diff --git a/.changeset/mosaic-component-entry-points.md b/.changeset/mosaic-component-entry-points.md new file mode 100644 index 00000000000..b9d657aefd0 --- /dev/null +++ b/.changeset/mosaic-component-entry-points.md @@ -0,0 +1,5 @@ +--- +'@clerk/mosaic': patch +--- + +Export `Avatar`, `Badge`, `Banner`, `Button`, `DataList`, `EmptyState`, `Entity`, `Heading`, `Icon`, `Input`, `Item`, `Skeleton`, `Table` and `Text` from `@clerk/mosaic/components/`, and the `External` glyph from `@clerk/mosaic/icons/glyphs/external`, the import paths Swingset documents. Style them with `@clerk/mosaic/styles.css`. diff --git a/packages/mosaic/package.json b/packages/mosaic/package.json index e5aa55398b8..a5308445af8 100644 --- a/packages/mosaic/package.json +++ b/packages/mosaic/package.json @@ -31,6 +31,81 @@ "import": "./dist/index.js", "default": "./dist/index.js" }, + "./components/avatar": { + "types": "./dist/components/avatar.d.ts", + "import": "./dist/components/avatar.js", + "default": "./dist/components/avatar.js" + }, + "./components/badge": { + "types": "./dist/components/badge.d.ts", + "import": "./dist/components/badge.js", + "default": "./dist/components/badge.js" + }, + "./components/banner": { + "types": "./dist/components/banner.d.ts", + "import": "./dist/components/banner.js", + "default": "./dist/components/banner.js" + }, + "./components/button": { + "types": "./dist/components/button.d.ts", + "import": "./dist/components/button.js", + "default": "./dist/components/button.js" + }, + "./components/data-list": { + "types": "./dist/components/data-list.d.ts", + "import": "./dist/components/data-list.js", + "default": "./dist/components/data-list.js" + }, + "./components/empty-state": { + "types": "./dist/components/empty-state.d.ts", + "import": "./dist/components/empty-state.js", + "default": "./dist/components/empty-state.js" + }, + "./components/entity": { + "types": "./dist/components/entity.d.ts", + "import": "./dist/components/entity.js", + "default": "./dist/components/entity.js" + }, + "./components/heading": { + "types": "./dist/components/heading.d.ts", + "import": "./dist/components/heading.js", + "default": "./dist/components/heading.js" + }, + "./components/icon": { + "types": "./dist/components/icon.d.ts", + "import": "./dist/components/icon.js", + "default": "./dist/components/icon.js" + }, + "./components/input": { + "types": "./dist/components/input.d.ts", + "import": "./dist/components/input.js", + "default": "./dist/components/input.js" + }, + "./components/item": { + "types": "./dist/components/item.d.ts", + "import": "./dist/components/item.js", + "default": "./dist/components/item.js" + }, + "./components/skeleton": { + "types": "./dist/components/skeleton.d.ts", + "import": "./dist/components/skeleton.js", + "default": "./dist/components/skeleton.js" + }, + "./components/table": { + "types": "./dist/components/table.d.ts", + "import": "./dist/components/table.js", + "default": "./dist/components/table.js" + }, + "./components/text": { + "types": "./dist/components/text.d.ts", + "import": "./dist/components/text.js", + "default": "./dist/components/text.js" + }, + "./icons/glyphs/external": { + "types": "./dist/icons/glyphs/external.d.ts", + "import": "./dist/icons/glyphs/external.js", + "default": "./dist/icons/glyphs/external.js" + }, "./styles.css": { "types": "./styles.css.d.ts", "default": "./dist/styles.css" diff --git a/packages/mosaic/scripts/check-bundle.mjs b/packages/mosaic/scripts/check-bundle.mjs index e0fc40d26ae..8d911c6048f 100644 --- a/packages/mosaic/scripts/check-bundle.mjs +++ b/packages/mosaic/scripts/check-bundle.mjs @@ -2,12 +2,17 @@ import { readdir, readFile } from 'node:fs/promises'; import { resolve } from 'node:path'; const distDir = resolve(import.meta.dirname, '../dist'); -const jsFiles = (await readdir(distDir)).filter(file => file.endsWith('.js')); +const jsFiles = (await readdir(distDir, { recursive: true })).filter(file => file.endsWith('.js')); const sources = await Promise.all(jsFiles.map(file => readFile(resolve(distDir, file), 'utf8'))); -const entry = await readFile(resolve(distDir, 'index.js'), 'utf8'); - -if (!entry.startsWith("'use client';") && !entry.startsWith('"use client";')) { - throw new Error("Published Mosaic JS is missing a top-level 'use client' boundary."); +const componentEntries = (await readdir(resolve(distDir, 'components'))) + .filter(file => file.endsWith('.js')) + .map(file => `components/${file}`); + +for (const entryFile of ['index.js', ...componentEntries]) { + const entry = await readFile(resolve(distDir, entryFile), 'utf8'); + if (!entry.startsWith("'use client';") && !entry.startsWith('"use client";')) { + throw new Error(`Published Mosaic JS entry ${entryFile} is missing a top-level 'use client' boundary.`); + } } const forbidden = [ diff --git a/packages/mosaic/src/components/avatar/index.ts b/packages/mosaic/src/components/avatar/index.ts index 363ec08e971..d0536b3f373 100644 --- a/packages/mosaic/src/components/avatar/index.ts +++ b/packages/mosaic/src/components/avatar/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Avatar } from './avatar'; export type { AvatarProps, AvatarImageProps, AvatarFallbackProps, AvatarIconProps } from './avatar'; diff --git a/packages/mosaic/src/components/badge/index.ts b/packages/mosaic/src/components/badge/index.ts index b8e71bd1b09..cd2e1eee458 100644 --- a/packages/mosaic/src/components/badge/index.ts +++ b/packages/mosaic/src/components/badge/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Badge } from './badge'; export type { BadgeProps } from './badge'; diff --git a/packages/mosaic/src/components/banner/index.ts b/packages/mosaic/src/components/banner/index.ts index ffd72024cf5..a82427a74ca 100644 --- a/packages/mosaic/src/components/banner/index.ts +++ b/packages/mosaic/src/components/banner/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Banner } from './banner'; export type { BannerDescriptionProps, BannerLabelProps, BannerRootProps } from './banner'; diff --git a/packages/mosaic/src/components/button/index.ts b/packages/mosaic/src/components/button/index.ts index e78f0e1ff28..c5178c2d3c9 100644 --- a/packages/mosaic/src/components/button/index.ts +++ b/packages/mosaic/src/components/button/index.ts @@ -1,3 +1,5 @@ +'use client'; + export { Button } from './button'; export type { ButtonProps } from './button'; export { SubmitButton } from './submit-button'; diff --git a/packages/mosaic/src/components/data-list/index.ts b/packages/mosaic/src/components/data-list/index.ts index 5ba0c71d82c..62a63565020 100644 --- a/packages/mosaic/src/components/data-list/index.ts +++ b/packages/mosaic/src/components/data-list/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { DataList } from './data-list'; export type { DataListProps } from './data-list'; diff --git a/packages/mosaic/src/components/empty-state/index.ts b/packages/mosaic/src/components/empty-state/index.ts index 4b8b9f7afdd..37ab78550f1 100644 --- a/packages/mosaic/src/components/empty-state/index.ts +++ b/packages/mosaic/src/components/empty-state/index.ts @@ -1,3 +1,5 @@ +'use client'; + export { EmptyState } from './empty-state'; export type { EmptyStateActionsProps, diff --git a/packages/mosaic/src/components/entity/index.ts b/packages/mosaic/src/components/entity/index.ts index df2ed8a10b9..8740fe3de49 100644 --- a/packages/mosaic/src/components/entity/index.ts +++ b/packages/mosaic/src/components/entity/index.ts @@ -1 +1,3 @@ +'use client'; + export { Entity } from './entity'; diff --git a/packages/mosaic/src/components/heading/index.ts b/packages/mosaic/src/components/heading/index.ts index 30d333df9a8..6349156ebe3 100644 --- a/packages/mosaic/src/components/heading/index.ts +++ b/packages/mosaic/src/components/heading/index.ts @@ -1,3 +1,5 @@ +'use client'; + export { Heading, HeadingContext } from './heading'; export type { HeadingProps } from './heading'; export { HeadingLevelProvider, useHeadingLevel } from './heading-level'; diff --git a/packages/mosaic/src/components/icon/index.ts b/packages/mosaic/src/components/icon/index.ts index 38ab61e44ad..44c766f8e3c 100644 --- a/packages/mosaic/src/components/icon/index.ts +++ b/packages/mosaic/src/components/icon/index.ts @@ -1,3 +1,5 @@ +'use client'; + export { Icon } from './icon'; export type { IconProps } from './icon'; export { IconFrame } from './icon-frame'; diff --git a/packages/mosaic/src/components/input/index.ts b/packages/mosaic/src/components/input/index.ts index 8739b78cda1..57d15f70214 100644 --- a/packages/mosaic/src/components/input/index.ts +++ b/packages/mosaic/src/components/input/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Input } from './input'; export type { InputProps, InputVariant } from './input'; diff --git a/packages/mosaic/src/components/item/index.ts b/packages/mosaic/src/components/item/index.ts index 9d8050d9ddf..a0a8cfa20eb 100644 --- a/packages/mosaic/src/components/item/index.ts +++ b/packages/mosaic/src/components/item/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Item } from './item'; export type { ItemProps } from './item'; diff --git a/packages/mosaic/src/components/skeleton/index.ts b/packages/mosaic/src/components/skeleton/index.ts index 97fc71eb407..42884dda57f 100644 --- a/packages/mosaic/src/components/skeleton/index.ts +++ b/packages/mosaic/src/components/skeleton/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Skeleton } from './skeleton'; export type { SkeletonProps, SkeletonShape } from './skeleton'; diff --git a/packages/mosaic/src/components/table/index.ts b/packages/mosaic/src/components/table/index.ts index cc27cbfd2c1..4aab26a417d 100644 --- a/packages/mosaic/src/components/table/index.ts +++ b/packages/mosaic/src/components/table/index.ts @@ -1,3 +1,5 @@ +'use client'; + export { Table } from './table'; export type { TableAlign, diff --git a/packages/mosaic/src/components/text/index.ts b/packages/mosaic/src/components/text/index.ts index 9491dcb2a55..4c52880bce3 100644 --- a/packages/mosaic/src/components/text/index.ts +++ b/packages/mosaic/src/components/text/index.ts @@ -1,2 +1,4 @@ +'use client'; + export { Text, TextContext } from './text'; export type { TextProps } from './text'; diff --git a/packages/mosaic/src/styles/index.ts b/packages/mosaic/src/styles/index.ts index bcb936fa3da..38d93933f33 100644 --- a/packages/mosaic/src/styles/index.ts +++ b/packages/mosaic/src/styles/index.ts @@ -56,6 +56,7 @@ export type { DialogVariant, DialogTriggerProps, } from '../components/dialog'; +export { Entity } from '../components/entity'; export { Field } from '../components/field'; export type { FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldRootProps } from '../components/field'; export { Flow, useFlowAutoFocus } from '../components/flow'; diff --git a/packages/mosaic/tsdown.config.mts b/packages/mosaic/tsdown.config.mts index e707ceef074..95ded416a37 100644 --- a/packages/mosaic/tsdown.config.mts +++ b/packages/mosaic/tsdown.config.mts @@ -13,7 +13,24 @@ const { default: getTypeScriptExecutablePath } = await import( ); export default defineConfig({ - entry: ['./src/index.ts'], + entry: { + index: './src/index.ts', + 'components/avatar': './src/components/avatar/index.ts', + 'components/badge': './src/components/badge/index.ts', + 'components/banner': './src/components/banner/index.ts', + 'components/button': './src/components/button/index.ts', + 'components/data-list': './src/components/data-list/index.ts', + 'components/empty-state': './src/components/empty-state/index.ts', + 'components/entity': './src/components/entity/index.ts', + 'components/heading': './src/components/heading/index.ts', + 'components/icon': './src/components/icon/index.ts', + 'components/input': './src/components/input/index.ts', + 'components/item': './src/components/item/index.ts', + 'components/skeleton': './src/components/skeleton/index.ts', + 'components/table': './src/components/table/index.ts', + 'components/text': './src/components/text/index.ts', + 'icons/glyphs/external': './src/icons/glyphs/external.tsx', + }, outDir: './dist', format: ['esm'], dts: {