@nuee/registry 0.4.0 → 0.5.0

package/dist/index.d.ts

@@ -14,10 +14,19 @@ export type TokenFile = {
     content: string;
     name: string;
 };
+export type FoundationFile = {
+    content: string;
+    name: string;
+};
+export declare function parseRegistryItem(value: unknown): RegistryItem;
+export declare function isRegistryItem(value: unknown): value is RegistryItem;
 export declare function getRegistryItem(name: string): Promise<RegistryItem>;
 export declare function getTokenFiles(): Promise<TokenFile[]>;
+export declare function getFoundationFiles(): Promise<FoundationFile[]>;
 export declare const dependencyVersions: {
     "@base-ui/react": string;
+    "@daypicker/react": string;
     "@phosphor-icons/react": string;
     "@stylexjs/stylex": string;
+    "embla-carousel-react": string;
 };

package/dist/index.js

@@ -1,26 +1,68 @@
 import { readFile } from "node:fs/promises";
 export { registryItems } from "./items.js";
-function isRegistryItem(value) {
-    if (typeof value !== "object" || value === null)
-        return false;
+export function parseRegistryItem(value) {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        throw new Error("Invalid registry item: expected an object.");
+    }
     const item = value;
-    return (typeof item.name === "string" &&
-        typeof item.primaryExport === "string" &&
-        Array.isArray(item.dependencies) &&
-        Array.isArray(item.files) &&
-        Array.isArray(item.registryDependencies) &&
-        item.files.every((file) => typeof file === "object" &&
-            file !== null &&
-            typeof file.path === "string" &&
-            typeof file.content === "string"));
+    const { name, primaryExport } = item;
+    if (typeof name !== "string" || name.length === 0) {
+        throw new Error("Invalid registry item: name must be a non-empty string.");
+    }
+    if (typeof primaryExport !== "string" || primaryExport.length === 0) {
+        throw new Error("Invalid registry item: primaryExport must be a non-empty string.");
+    }
+    const dependencies = parseDependencies(item.dependencies, "dependencies");
+    const registryDependencies = parseDependencies(item.registryDependencies, "registryDependencies");
+    if (!Array.isArray(item.files)) {
+        throw new Error("Invalid registry item: files must be an array.");
+    }
+    const files = item.files.map((file, index) => {
+        if (typeof file !== "object" || file === null || Array.isArray(file)) {
+            throw new Error(`Invalid registry item: files[${index}] must be an object.`);
+        }
+        const entry = file;
+        if (typeof entry.path !== "string") {
+            throw new Error(`Invalid registry item: files[${index}].path must be a string.`);
+        }
+        if (typeof entry.content !== "string") {
+            throw new Error(`Invalid registry item: files[${index}].content must be a string.`);
+        }
+        return { path: entry.path, content: entry.content };
+    });
+    return {
+        name,
+        primaryExport,
+        dependencies,
+        registryDependencies,
+        files,
+    };
+}
+function parseDependencies(value, field) {
+    if (!Array.isArray(value)) {
+        throw new Error(`Invalid registry item: ${field} must be an array.`);
+    }
+    return value.map((entry, index) => {
+        if (typeof entry !== "string" || entry.length === 0) {
+            throw new Error(`Invalid registry item: ${field}[${index}] must be a non-empty string.`);
+        }
+        return entry;
+    });
+}
+export function isRegistryItem(value) {
+    try {
+        parseRegistryItem(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
 }
 export async function getRegistryItem(name) {
     const file = new URL(`./items/${name}.json`, import.meta.url);
     try {
         const item = JSON.parse(await readFile(file, "utf8"));
-        if (!isRegistryItem(item))
-            throw new Error("Invalid registry item.");
-        return item;
+        return parseRegistryItem(item);
     }
     catch (error) {
         if (typeof error === "object" && error !== null && "code" in error && error.code === "ENOENT") {
@@ -36,8 +78,18 @@ export async function getTokenFiles() {
         name,
     })));
 }
+export async function getFoundationFiles() {
+    const tokenFiles = await getTokenFiles();
+    const resetFile = {
+        content: await readFile(new URL("./styles/reset.css", import.meta.url), "utf8"),
+        name: "reset.css",
+    };
+    return [...tokenFiles, resetFile];
+}
 export const dependencyVersions = {
     "@base-ui/react": "^1.7.0",
+    "@daypicker/react": "^10.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@stylexjs/stylex": "^0.19.0",
+    "embla-carousel-react": "^8.6.0",
 };

package/dist/items/accordion.json

@@ -3,11 +3,7 @@
   "primaryExport": "Accordion",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0, width: \"100%\" },\n  item: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: sizeVars.stroke,\n  },\n  header: { display: \"flex\", margin: 0 },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    flex: 1,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"space-between\",\n    lineHeight: typographyVars.lineHeightNormal,\n    outline: \"none\",\n    paddingBlock: spacingVars.space4,\n    paddingInline: 0,\n    textAlign: \"start\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    \":hover\": { textDecoration: \"underline\", textUnderlineOffset: spacingVars.space1 },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { textDecoration: \"none\" },\n  },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: \"1rem\",\n    justifyContent: \"center\",\n    width: \"1rem\",\n  },\n  iconClosed: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    \":is([data-panel-open] *)\": { display: \"none\" },\n  },\n  iconOpen: {\n    alignItems: \"center\",\n    display: \"none\",\n    \":is([data-panel-open] *)\": { display: \"inline-flex\" },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--accordion-panel-height)\",\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    opacity: 1,\n    overflow: \"hidden\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"height, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0.01ms\" },\n  },\n  panelTransitioning: { height: 0, opacity: 0 },\n  panelContent: {\n    paddingBottom: spacingVars.space4,\n    paddingInlineEnd: spacingVars.space6,\n    width: \"100%\",\n  },\n});\n\nexport function Accordion({ ...props }: ComponentProps<typeof AccordionPrimitive.Root>) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <AccordionPrimitive.Root\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function AccordionItem({ ...props }: ComponentProps<typeof AccordionPrimitive.Item>) {\n  const stylexProps = stylex.props(styles.item);\n  return (\n    <AccordionPrimitive.Item\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function AccordionTrigger({\n  children,\n  ...props\n}: ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header {...stylex.props(styles.header)}>\n      <AccordionPrimitive.Trigger\n        {...props}\n        className={(state) => {\n          const stylexProps = stylex.props(\n            styles.trigger,\n            state.disabled && styles.triggerDisabled,\n          );\n          return stylexProps.className;\n        }}\n        style={(state) => {\n          const stylexProps = stylex.props(\n            styles.trigger,\n            state.disabled && styles.triggerDisabled,\n          );\n          return stylexProps.style;\n        }}\n      >\n        {children}\n        <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n          <span {...stylex.props(styles.iconClosed)}>\n            <Icon name=\"chevronDown\" />\n          </span>\n          <span {...stylex.props(styles.iconOpen)}>\n            <Icon name=\"chevronUp\" />\n          </span>\n        </span>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionContent({\n  children,\n  ...props\n}: ComponentProps<typeof AccordionPrimitive.Panel>) {\n  return (\n    <AccordionPrimitive.Panel\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return stylexProps.className;\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return stylexProps.style;\n      }}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport {\n  colorVars,\n  motionVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0, width: \"100%\" },\n  item: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: sizeVars.stroke,\n  },\n  header: { display: \"flex\", margin: 0 },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    flex: 1,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"space-between\",\n    lineHeight: typographyVars.lineHeightNormal,\n    outline: \"none\",\n    paddingBlock: spacingVars.space4,\n    paddingInline: 0,\n    textAlign: \"start\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { textDecoration: \"underline\", textUnderlineOffset: spacingVars.space1 },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { textDecoration: \"none\" },\n  },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    transform: \"rotate(0deg)\",\n    width: sizeVars.iconMd,\n    \":is([data-panel-open] *)\": { transform: \"rotate(180deg)\" },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--accordion-panel-height)\",\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    opacity: 1,\n    overflow: \"hidden\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"height, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  panelTransitioning: { height: 0, opacity: 0 },\n  panelContent: {\n    paddingBottom: spacingVars.space4,\n    paddingInlineEnd: spacingVars.space6,\n    width: \"100%\",\n  },\n});\n\nexport function Accordion({\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Root>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <AccordionPrimitive.Root\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\nexport function AccordionItem({\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Item>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.item);\n  return (\n    <AccordionPrimitive.Item\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\nexport function AccordionTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: AccordionPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <AccordionPrimitive.Header {...stylex.props(styles.header)}>\n      <AccordionPrimitive.Trigger\n        {...props}\n        className={(state) => getTriggerStyles(state).className}\n        style={(state) => getTriggerStyles(state).style}\n      >\n        {children}\n        <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n          <CaretDownIcon />\n        </span>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionContent({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Panel>, \"className\" | \"style\">) {\n  function getPanelStyles(state: AccordionPrimitive.Panel.State) {\n    return stylex.props(\n      styles.panel,\n      state.transitionStatus === \"starting\" && styles.panelTransitioning,\n      state.transitionStatus === \"ending\" && styles.panelTransitioning,\n    );\n  }\n  return (\n    <AccordionPrimitive.Panel\n      {...props}\n      className={(state) => getPanelStyles(state).className}\n      style={(state) => getPanelStyles(state).style}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n",
       "path": "accordion.tsx"
     }
   ],

package/dist/items/alert-dialog.json

@@ -3,7 +3,7 @@
   "primaryExport": "AlertDialog",
   "files": [
     {
-      "content": "import { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Button } from \"./button\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: 51,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"28rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2 },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\ntype AlertDialogContentProps = ComponentProps<typeof AlertDialogPrimitive.Popup> & {\n  children: ReactNode;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function AlertDialogContent({ children, xstyle, ...props }: AlertDialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <AlertDialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <AlertDialogPrimitive.Popup\n          {...props}\n          className={() => stylexProps.className}\n          style={() => stylexProps.style}\n        >\n          {children}\n        </AlertDialogPrimitive.Popup>\n      </AlertDialogPrimitive.Viewport>\n    </AlertDialogPrimitive.Portal>\n  );\n}\n\nexport function AlertDialogHeader({\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function AlertDialogFooter({\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n\nexport function AlertDialogTitle({ ...props }: ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <AlertDialogPrimitive.Title\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function AlertDialogDescription({\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <AlertDialogPrimitive.Description\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\ntype AlertDialogButtonProps = ComponentProps<typeof AlertDialogPrimitive.Close>;\n\nexport function AlertDialogCancel({ children, ...props }: AlertDialogButtonProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      {...props}\n      render={<Button variant=\"secondary\">{children}</Button>}\n    />\n  );\n}\n\nexport function AlertDialogAction({ children, ...props }: AlertDialogButtonProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      {...props}\n      render={<Button variant=\"destructive\">{children}</Button>}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Button } from \"./button\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: colorVars.bgOverlay,\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.modalBackdrop,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: layerVars.modal,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"28rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2 },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\ntype AlertDialogContentProps = Omit<\n  ComponentProps<typeof AlertDialogPrimitive.Popup>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function AlertDialogContent({ children, xstyle, ...props }: AlertDialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <AlertDialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <AlertDialogPrimitive.Popup\n          {...props}\n          className={stylexProps.className}\n          style={stylexProps.style}\n        >\n          {children}\n        </AlertDialogPrimitive.Popup>\n      </AlertDialogPrimitive.Viewport>\n    </AlertDialogPrimitive.Portal>\n  );\n}\n\nexport function AlertDialogHeader({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function AlertDialogFooter({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n\nexport function AlertDialogTitle({\n  ...props\n}: Omit<ComponentProps<typeof AlertDialogPrimitive.Title>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <AlertDialogPrimitive.Title\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\nexport function AlertDialogDescription({\n  ...props\n}: Omit<ComponentProps<typeof AlertDialogPrimitive.Description>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <AlertDialogPrimitive.Description\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\ntype AlertDialogButtonProps = Omit<\n  ComponentProps<typeof AlertDialogPrimitive.Close>,\n  \"className\" | \"style\"\n>;\n\nexport function AlertDialogCancel({ children, ...props }: AlertDialogButtonProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      {...props}\n      render={<Button variant=\"secondary\">{children}</Button>}\n    />\n  );\n}\n\nexport function AlertDialogAction({ children, ...props }: AlertDialogButtonProps) {\n  return (\n    <AlertDialogPrimitive.Close\n      {...props}\n      render={<Button variant=\"destructive\">{children}</Button>}\n    />\n  );\n}\n",
       "path": "alert-dialog.tsx"
     }
   ],

package/dist/items/aspect-ratio.json

@@ -3,7 +3,7 @@
   "primaryExport": "AspectRatio",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: (ratio: number) => ({\n    aspectRatio: ratio,\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n  }),\n});\n\nexport type AspectRatioProps = ComponentProps<\"div\"> & {\n  ratio?: number;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function AspectRatio({ ratio = 1, xstyle, ...props }: AspectRatioProps) {\n  const stylexProps = stylex.props(styles.root(ratio), xstyle);\n  return <div {...props} {...stylexProps} />;\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: (ratio: number) => ({\n    aspectRatio: ratio,\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n  }),\n});\n\nexport type AspectRatioProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  ratio?: number;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function AspectRatio({ ratio = 1, xstyle, ...props }: AspectRatioProps) {\n  return <div {...props} {...stylex.props(styles.root(ratio), xstyle)} />;\n}\n",
       "path": "aspect-ratio.tsx"
     }
   ],

package/dist/items/attachment.json

@@ -3,7 +3,7 @@
   "primaryExport": "Attachment",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n  },\n  horizontal: { flexDirection: \"row\" },\n  vertical: { alignItems: \"stretch\", flexDirection: \"column\" },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4.5rem\", padding: spacingVars.space3 },\n  sm: { gap: spacingVars.space2, minHeight: sizeVars.touchTarget, padding: spacingVars.space2 },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlMd, padding: spacingVars.space1 },\n  error: {\n    backgroundColor: colorVars.bgFeedbackError,\n    borderColor: colorVars.strokeFeedbackError,\n  },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n  },\n  mediaicon: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    height: sizeVars.controlLg,\n    width: sizeVars.controlLg,\n  },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: \"3rem\",\n    objectFit: \"cover\",\n    width: \"3rem\",\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n    paddingInline: spacingVars.space2,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    gap: spacingVars.space1,\n    position: \"relative\",\n    zIndex: 2,\n  },\n  action: { minWidth: sizeVars.controlSm, paddingInline: spacingVars.space2 },\n  trigger: {\n    backgroundColor: \"transparent\",\n    borderWidth: 0,\n    borderRadius: \"inherit\",\n    cursor: \"pointer\",\n    inset: 0,\n    outline: {\n      default: \"none\",\n      \":focus-visible\": `${sizeVars.focusRing} solid ${colorVars.strokeFocus}`,\n    },\n    outlineOffset: { default: 0, \":focus-visible\": 2 },\n    position: \"absolute\",\n    zIndex: 1,\n  },\n  group: {\n    display: \"flex\",\n    gap: spacingVars.space3,\n    overflowX: \"auto\",\n    paddingBlock: spacingVars.space1,\n    scrollSnapType: \"x proximity\",\n    width: \"100%\",\n  },\n});\n\nexport type AttachmentState = \"done\" | \"error\" | \"idle\" | \"processing\" | \"uploading\";\nexport type AttachmentSize = \"default\" | \"sm\" | \"xs\";\n\nexport type AttachmentProps = Omit<ComponentProps<\"div\">, \"title\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  size?: AttachmentSize;\n  state?: AttachmentState;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Attachment({\n  orientation = \"horizontal\",\n  size = \"default\",\n  state = \"done\",\n  xstyle,\n  ...props\n}: AttachmentProps) {\n  return (\n    <div\n      {...props}\n      data-orientation={orientation}\n      data-state={state}\n      {...stylex.props(\n        styles.root,\n        styles[orientation],\n        size === \"default\" ? styles.sizeDefault : styles[size],\n        state === \"error\" && styles.error,\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport type AttachmentMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"icon\" | \"image\";\n};\n\nexport function AttachmentMedia({ variant = \"icon\", ...props }: AttachmentMediaProps) {\n  return <div {...props} {...stylex.props(styles.media, styles[`media${variant}`])} />;\n}\n\nexport function AttachmentContent({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function AttachmentTitle({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function AttachmentDescription({ ...props }: ComponentProps<\"p\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n\nexport function AttachmentActions({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.actions)} />;\n}\n\nexport type AttachmentActionProps = Omit<ButtonProps, \"size\" | \"variant\">;\n\nexport function AttachmentAction({ xstyle, ...props }: AttachmentActionProps) {\n  return <Button {...props} size=\"sm\" variant=\"ghost\" xstyle={[styles.action, xstyle]} />;\n}\n\nexport function AttachmentTrigger({ type = \"button\", ...props }: ComponentProps<\"button\">) {\n  return <button {...props} type={type} {...stylex.props(styles.trigger)} />;\n}\n\nexport function AttachmentGroup({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n",
+      "content": "\"use client\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button, type ButtonProps } from \"./button\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n  },\n  horizontal: { flexDirection: \"row\" },\n  vertical: { alignItems: \"stretch\", flexDirection: \"column\" },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4.5rem\", padding: spacingVars.space3 },\n  sm: { gap: spacingVars.space2, minHeight: sizeVars.touchTarget, padding: spacingVars.space2 },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlMd, padding: spacingVars.space1 },\n  error: {\n    backgroundColor: colorVars.bgFeedbackError,\n    borderColor: \"transparent\",\n  },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n  },\n  mediaicon: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    height: sizeVars.controlLg,\n    width: sizeVars.controlLg,\n  },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: \"3rem\",\n    objectFit: \"cover\",\n    width: \"3rem\",\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n    paddingInlineEnd: spacingVars.space5,\n    paddingInlineStart: spacingVars.space2,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    gap: spacingVars.space1,\n    position: \"relative\",\n    zIndex: 2,\n  },\n  action: { minWidth: sizeVars.controlSm },\n  trigger: {\n    backgroundColor: \"transparent\",\n    borderWidth: 0,\n    borderRadius: \"inherit\",\n    cursor: \"pointer\",\n    inset: 0,\n    outline: {\n      default: \"none\",\n      \":focus-visible\": `${sizeVars.focusRing} solid ${colorVars.strokeFocus}`,\n    },\n    outlineOffset: { default: 0, \":focus-visible\": 2 },\n    position: \"absolute\",\n    zIndex: 1,\n  },\n  group: {\n    display: \"flex\",\n    gap: spacingVars.space3,\n    overflowX: \"auto\",\n    paddingBlock: spacingVars.space1,\n    scrollSnapType: \"x proximity\",\n    width: \"100%\",\n  },\n});\n\nexport type AttachmentState = \"done\" | \"error\" | \"idle\" | \"processing\" | \"uploading\";\nexport type AttachmentSize = \"default\" | \"sm\" | \"xs\";\n\nexport type AttachmentProps = Omit<ComponentProps<\"div\">, \"title\" | \"className\" | \"style\"> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  size?: AttachmentSize;\n  state?: AttachmentState;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Attachment({\n  orientation = \"horizontal\",\n  size = \"default\",\n  state = \"done\",\n  xstyle,\n  ...props\n}: AttachmentProps) {\n  return (\n    <div\n      {...props}\n      data-orientation={orientation}\n      data-state={state}\n      {...stylex.props(\n        styles.root,\n        styles[orientation],\n        size === \"default\" ? styles.sizeDefault : styles[size],\n        state === \"error\" && styles.error,\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport type AttachmentMediaProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  variant?: \"icon\" | \"image\";\n};\n\nexport function AttachmentMedia({ variant = \"icon\", ...props }: AttachmentMediaProps) {\n  return <div {...props} {...stylex.props(styles.media, styles[`media${variant}`])} />;\n}\n\nexport function AttachmentContent({\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function AttachmentTitle({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function AttachmentDescription({\n  ...props\n}: Omit<ComponentProps<\"p\">, \"className\" | \"style\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n\nexport function AttachmentActions({\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.actions)} />;\n}\n\nexport type AttachmentActionProps = Omit<ButtonProps, \"size\" | \"variant\">;\n\nexport function AttachmentAction({ xstyle, ...props }: AttachmentActionProps) {\n  return <Button {...props} size=\"sm\" variant=\"ghost\" xstyle={[styles.action, xstyle]} />;\n}\n\nexport function AttachmentTrigger({\n  type = \"button\",\n  ...props\n}: Omit<ComponentProps<\"button\">, \"className\" | \"style\">) {\n  return <button {...props} type={type} {...stylex.props(styles.trigger)} />;\n}\n\nexport function AttachmentGroup({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n",
       "path": "attachment.tsx"
     }
   ],

package/dist/items/avatar.json

@@ -3,7 +3,7 @@
   "primaryExport": "Avatar",
   "files": [
     {
-      "content": "import { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    overflow: \"visible\",\n    position: \"relative\",\n  },\n  sm: { height: sizeVars.controlSm, width: sizeVars.controlSm },\n  md: { height: sizeVars.controlMd, width: sizeVars.controlMd },\n  lg: { height: sizeVars.controlLg, width: sizeVars.controlLg },\n  image: {\n    borderRadius: \"inherit\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  fallback: {\n    alignItems: \"center\",\n    borderRadius: \"inherit\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"100%\",\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  badge: {\n    backgroundColor: colorVars.fgFeedbackSuccess,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: \"0.125rem\",\n    bottom: \"-0.0625rem\",\n    height: \"0.75rem\",\n    position: \"absolute\",\n    right: \"-0.0625rem\",\n    width: \"0.75rem\",\n  },\n  group: { display: \"flex\", gap: spacingVars.space1 },\n  groupCount: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: \"0.125rem\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlMd,\n    justifyContent: \"center\",\n    width: sizeVars.controlMd,\n  },\n});\n\nexport type AvatarSize = \"lg\" | \"md\" | \"sm\";\n\nexport type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: AvatarSize;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Avatar({ size = \"md\", xstyle, ...props }: AvatarProps) {\n  const stylexProps = stylex.props(styles.root, styles[size], xstyle);\n  return (\n    <AvatarPrimitive.Root\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function AvatarImage({ ...props }: ComponentProps<typeof AvatarPrimitive.Image>) {\n  const stylexProps = stylex.props(styles.image);\n  return (\n    <AvatarPrimitive.Image\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function AvatarFallback({ ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  const stylexProps = stylex.props(styles.fallback);\n  return (\n    <AvatarPrimitive.Fallback\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function AvatarBadge({ ...props }: ComponentProps<\"span\">) {\n  return <span {...props} {...stylex.props(styles.badge)} />;\n}\n\nexport function AvatarGroup({ ...props }: ComponentProps<\"div\">) {\n  const stylexProps = stylex.props(styles.group);\n  return <div {...props} {...stylexProps} />;\n}\n\nexport function AvatarGroupCount({ ...props }: ComponentProps<\"span\">) {\n  return <span {...props} {...stylex.props(styles.groupCount)} />;\n}\n",
+      "content": "\"use client\";\n\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    flexShrink: 0,\n    overflow: \"visible\",\n    position: \"relative\",\n  },\n  sm: { height: sizeVars.controlSm, width: sizeVars.controlSm },\n  md: { height: sizeVars.controlMd, width: sizeVars.controlMd },\n  lg: { height: sizeVars.controlLg, width: sizeVars.controlLg },\n  image: {\n    borderRadius: \"inherit\",\n    height: \"100%\",\n    objectFit: \"cover\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  fallback: {\n    alignItems: \"center\",\n    borderRadius: \"inherit\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"100%\",\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  badge: {\n    backgroundColor: colorVars.fgFeedbackSuccess,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: \"0.125rem\",\n    bottom: \"-0.0625rem\",\n    height: \"0.75rem\",\n    position: \"absolute\",\n    right: \"-0.0625rem\",\n    width: \"0.75rem\",\n  },\n  group: { display: \"flex\", gap: spacingVars.space1 },\n  groupCount: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: \"0.125rem\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlMd,\n    justifyContent: \"center\",\n    width: sizeVars.controlMd,\n  },\n});\n\nexport type AvatarSize = \"lg\" | \"md\" | \"sm\";\n\nexport type AvatarProps = Omit<\n  ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  size?: AvatarSize;\n};\n\nexport function Avatar({ size = \"md\", ...props }: AvatarProps) {\n  const stylexProps = stylex.props(styles.root, styles[size]);\n  return (\n    <AvatarPrimitive.Root {...props} className={stylexProps.className} style={stylexProps.style} />\n  );\n}\n\nexport function AvatarImage({\n  ...props\n}: Omit<ComponentProps<typeof AvatarPrimitive.Image>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.image);\n  return (\n    <AvatarPrimitive.Image {...props} className={stylexProps.className} style={stylexProps.style} />\n  );\n}\n\nexport function AvatarFallback({\n  ...props\n}: Omit<ComponentProps<typeof AvatarPrimitive.Fallback>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.fallback);\n  return (\n    <AvatarPrimitive.Fallback\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\nexport function AvatarBadge({ ...props }: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return <span {...props} {...stylex.props(styles.badge)} />;\n}\n\nexport function AvatarGroup({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport function AvatarGroupCount({\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return <span {...props} {...stylex.props(styles.groupCount)} />;\n}\n",
       "path": "avatar.tsx"
     }
   ],

package/dist/items/badge.json

@@ -3,7 +3,7 @@
   "primaryExport": "Badge",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    lineHeight: typographyVars.lineHeightTight,\n    minHeight: sizeVars.iconMd,\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n    whiteSpace: \"nowrap\",\n  },\n  primary: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderColor: colorVars.bgActionPrimary,\n    color: colorVars.fgInverse,\n  },\n  secondary: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSubtle,\n    color: colorVars.fgPrimary,\n  },\n  destructive: {\n    backgroundColor: colorVars.bgFeedbackError,\n    borderColor: colorVars.strokeFeedbackError,\n    color: colorVars.fgFeedbackError,\n  },\n  outline: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgPrimary,\n  },\n  ghost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n    color: colorVars.fgPrimary,\n  },\n});\n\ntype BadgeVariant = \"primary\" | \"secondary\" | \"destructive\" | \"outline\" | \"ghost\";\n\nexport type BadgeProps = ComponentProps<\"span\"> & {\n  variant?: BadgeVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Badge({ variant = \"primary\", xstyle, ...props }: BadgeProps) {\n  const stylexProps = stylex.props(styles.root, styles[variant], xstyle);\n  return <span {...props} {...stylexProps} />;\n}\n",
+      "content": "import {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    lineHeight: typographyVars.lineHeightTight,\n    minHeight: sizeVars.iconMd,\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n    whiteSpace: \"nowrap\",\n  },\n  primary: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderColor: colorVars.bgActionPrimary,\n    color: colorVars.fgOnActionPrimary,\n  },\n  secondary: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.bgSubtle,\n    color: colorVars.fgPrimary,\n  },\n  destructive: {\n    backgroundColor: colorVars.bgFeedbackError,\n    borderColor: \"transparent\",\n    color: colorVars.fgFeedbackError,\n  },\n  outline: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgPrimary,\n  },\n  ghost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n    color: colorVars.fgPrimary,\n  },\n});\n\ntype BadgeVariant = \"primary\" | \"secondary\" | \"destructive\" | \"outline\" | \"ghost\";\n\nexport type BadgeProps = Omit<ComponentProps<\"span\">, \"className\" | \"style\"> & {\n  variant?: BadgeVariant;\n};\n\nexport function Badge({ variant = \"primary\", ...props }: BadgeProps) {\n  return <span {...props} {...stylex.props(styles.root, styles[variant])} />;\n}\n",
       "path": "badge.tsx"
     }
   ],

package/dist/items/banner.json

@@ -3,7 +3,7 @@
   "primaryExport": "Banner",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"start\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    display: \"grid\",\n    width: \"100%\",\n  },\n  md: {\n    columnGap: spacingVars.space3,\n    paddingBlock: spacingVars.space3,\n    paddingInline: spacingVars.space4,\n  },\n  sm: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    columnGap: spacingVars.space2,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space3,\n  },\n  withIcon: { gridTemplateColumns: `${sizeVars.iconMd} minmax(0, 1fr)` },\n  withAction: { gridTemplateColumns: `minmax(0, 1fr) auto` },\n  withIconAndAction: {\n    gridTemplateColumns: `${sizeVars.iconMd} minmax(0, 1fr) auto`,\n  },\n  icon: {\n    alignItems: \"center\",\n    alignSelf: \"start\",\n    display: \"inline-flex\",\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    width: sizeVars.iconMd,\n  },\n  iconAlignedCenter: { alignSelf: \"center\" },\n  content: { display: \"grid\", gap: spacingVars.space1, minWidth: 0 },\n  action: { alignItems: \"center\", display: \"flex\", gap: spacingVars.space2 },\n  info: { backgroundColor: colorVars.bgFeedbackInfo, color: colorVars.fgFeedbackInfo },\n  warning: {\n    backgroundColor: colorVars.bgFeedbackWarning,\n    color: colorVars.fgFeedbackWarning,\n  },\n  error: { backgroundColor: colorVars.bgFeedbackError, color: colorVars.fgFeedbackError },\n  neutral: { backgroundColor: colorVars.bgSubtle, color: colorVars.fgSecondary },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: \"currentColor\",\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    opacity: 0.82,\n  },\n});\n\nexport type BannerVariant = \"error\" | \"info\" | \"neutral\" | \"warning\";\nexport type BannerSize = \"md\" | \"sm\";\nexport type BannerAnnounce = \"assertive\" | \"polite\";\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport type BannerProps = ComponentProps<\"div\"> &\n  StyleProps & {\n    action?: ReactNode;\n    /** Announces a Banner that is added or updated after the initial page render. */\n    announce?: BannerAnnounce;\n    description?: ReactNode;\n    icon?: ReactNode;\n    size?: BannerSize;\n    title?: ReactNode;\n    variant?: BannerVariant;\n  };\n\nexport function Banner({\n  action,\n  announce,\n  children,\n  description,\n  icon,\n  role,\n  size = \"md\",\n  title,\n  variant = \"info\",\n  xstyle,\n  ...props\n}: BannerProps) {\n  let liveRole: \"alert\" | \"status\" | undefined;\n  if (announce === \"assertive\") {\n    liveRole = \"alert\";\n  } else if (announce === \"polite\") {\n    liveRole = \"status\";\n  }\n\n  const stylexProps = stylex.props(\n    styles.root,\n    styles[size],\n    styles[variant],\n    Boolean(icon) && styles.withIcon,\n    Boolean(action) && styles.withAction,\n    Boolean(icon) && Boolean(action) && styles.withIconAndAction,\n    xstyle,\n  );\n\n  return (\n    <div {...props} role={role ?? liveRole} {...stylexProps}>\n      {icon ? (\n        <span {...stylex.props(styles.icon, size === \"sm\" && styles.iconAlignedCenter)}>\n          {icon}\n        </span>\n      ) : null}\n      <div {...stylex.props(styles.content)}>\n        {title ? <BannerTitle>{title}</BannerTitle> : null}\n        {description ? <BannerDescription>{description}</BannerDescription> : null}\n        {children}\n      </div>\n      {action ? <div {...stylex.props(styles.action)}>{action}</div> : null}\n    </div>\n  );\n}\n\nexport function BannerTitle({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.title, xstyle);\n  return <div {...props} {...stylexProps} />;\n}\n\nexport function BannerDescription({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n  return <div {...props} {...stylexProps} />;\n}\n",
+      "content": "import { colorVars, radiusVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n  },\n  md: {\n    gap: spacingVars.space2,\n    paddingBlock: spacingVars.space3,\n    paddingInline: spacingVars.space4,\n  },\n  sm: {\n    borderRadius: radiusVars.sm,\n    gap: spacingVars.space1,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space3,\n  },\n  content: { display: \"grid\", gap: spacingVars.space1, minWidth: 0 },\n  action: { alignItems: \"center\", display: \"flex\", gap: spacingVars.space2 },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: \"currentColor\",\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    opacity: 0.82,\n  },\n});\n\nexport type BannerSize = \"md\" | \"sm\";\nexport type BannerAnnounce = \"assertive\" | \"polite\";\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport type BannerProps = Omit<ComponentProps<\"div\">, \"title\" | \"className\" | \"style\"> &\n  StyleProps & {\n    action?: ReactNode;\n    /** Announces a Banner that is added or updated after the initial page render. */\n    announce?: BannerAnnounce;\n    description?: ReactNode;\n    size?: BannerSize;\n    title?: ReactNode;\n  };\n\nexport function Banner({\n  action,\n  announce,\n  children,\n  description,\n  role,\n  size = \"md\",\n  title,\n  xstyle,\n  ...props\n}: BannerProps) {\n  let liveRole: \"alert\" | \"status\" | undefined;\n  if (announce === \"assertive\") {\n    liveRole = \"alert\";\n  } else if (announce === \"polite\") {\n    liveRole = \"status\";\n  }\n\n  return (\n    <div {...props} role={role ?? liveRole} {...stylex.props(styles.root, styles[size], xstyle)}>\n      <div {...stylex.props(styles.content)}>\n        {title ? <BannerTitle>{title}</BannerTitle> : null}\n        {description ? <BannerDescription>{description}</BannerDescription> : null}\n        {children}\n      </div>\n      {action ? <div {...stylex.props(styles.action)}>{action}</div> : null}\n    </div>\n  );\n}\n\nexport function BannerTitle({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.title, xstyle)} />;\n}\n\nexport function BannerDescription({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.description, xstyle)} />;\n}\n",
       "path": "banner.tsx"
     }
   ],

package/dist/items/breadcrumb.json

@@ -3,11 +3,7 @@
   "primaryExport": "Breadcrumb",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0 },\n  list: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightNormal,\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { alignItems: \"center\", display: \"inline-flex\", gap: spacingVars.space2 },\n  link: {\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    outline: \"none\",\n    textDecoration: \"none\",\n    \":hover\": { color: colorVars.fgPrimary, textDecoration: \"underline\" },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  page: { color: colorVars.fgPrimary, fontWeight: typographyVars.fontWeightMedium },\n  separator: { alignItems: \"center\", color: colorVars.fgTertiary, display: \"inline-flex\" },\n  ellipsis: {\n    alignItems: \"center\",\n    color: colorVars.fgTertiary,\n    display: \"inline-flex\",\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    width: sizeVars.iconMd,\n  },\n});\n\nexport function Breadcrumb({ ...props }: ComponentProps<\"nav\">) {\n  return <nav aria-label=\"Breadcrumb\" {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function BreadcrumbList({ ...props }: ComponentProps<\"ol\">) {\n  return <ol {...props} {...stylex.props(styles.list)} />;\n}\n\nexport function BreadcrumbItem({ ...props }: ComponentProps<\"li\">) {\n  return <li {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function BreadcrumbLink({ children, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a {...props} {...stylex.props(styles.link)}>\n      {children}\n    </a>\n  );\n}\n\nexport function BreadcrumbPage({ ...props }: ComponentProps<\"span\">) {\n  return <span aria-current=\"page\" {...props} {...stylex.props(styles.page)} />;\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  ...props\n}: ComponentProps<\"li\"> & { children?: ReactNode }) {\n  return (\n    <li aria-hidden=\"true\" role=\"presentation\" {...props} {...stylex.props(styles.separator)}>\n      {children ?? <Icon name=\"chevronRight\" />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({ ...props }: ComponentProps<\"span\">) {\n  return (\n    <span aria-hidden=\"true\" {...props} {...stylex.props(styles.ellipsis)}>\n      …\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretRightIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0 },\n  list: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightNormal,\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { alignItems: \"center\", display: \"inline-flex\", gap: spacingVars.space2 },\n  link: {\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    outline: \"none\",\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color, text-decoration-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { color: colorVars.fgPrimary, textDecoration: \"underline\" },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  page: { color: colorVars.fgPrimary, fontWeight: typographyVars.fontWeightMedium },\n  separator: { alignItems: \"center\", color: colorVars.fgTertiary, display: \"inline-flex\" },\n  ellipsis: {\n    alignItems: \"center\",\n    color: colorVars.fgTertiary,\n    display: \"inline-flex\",\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    width: sizeVars.iconMd,\n  },\n});\n\nexport function Breadcrumb({ ...props }: Omit<ComponentProps<\"nav\">, \"className\" | \"style\">) {\n  return <nav aria-label=\"Breadcrumb\" {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function BreadcrumbList({ ...props }: Omit<ComponentProps<\"ol\">, \"className\" | \"style\">) {\n  return <ol {...props} {...stylex.props(styles.list)} />;\n}\n\nexport function BreadcrumbItem({ ...props }: Omit<ComponentProps<\"li\">, \"className\" | \"style\">) {\n  return <li {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function BreadcrumbLink({\n  children,\n  ...props\n}: Omit<ComponentProps<\"a\">, \"className\" | \"style\">) {\n  return (\n    <a {...props} {...stylex.props(styles.link)}>\n      {children}\n    </a>\n  );\n}\n\nexport function BreadcrumbPage({ ...props }: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return <span aria-current=\"page\" {...props} {...stylex.props(styles.page)} />;\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  ...props\n}: Omit<ComponentProps<\"li\">, \"className\" | \"style\"> & { children?: ReactNode }) {\n  return (\n    <li aria-hidden=\"true\" role=\"presentation\" {...props} {...stylex.props(styles.separator)}>\n      {children ?? <CaretRightIcon />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return (\n    <span aria-hidden=\"true\" {...props} {...stylex.props(styles.ellipsis)}>\n      …\n    </span>\n  );\n}\n",
       "path": "breadcrumb.tsx"
     }
   ],

package/dist/items/bubble.json

@@ -3,7 +3,7 @@
   "primaryExport": "Bubble",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, radiusVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    maxWidth: \"min(32rem, 85%)\",\n    paddingBlock: spacingVars.space3,\n    paddingInline: spacingVars.space4,\n    whiteSpace: \"pre-wrap\",\n  },\n  incoming: {\n    alignSelf: \"flex-start\",\n    borderBottomLeftRadius: radiusVars.sm,\n    borderRadius: radiusVars.sm,\n  },\n  outgoing: {\n    alignSelf: \"flex-end\",\n    borderBottomRightRadius: radiusVars.sm,\n    borderRadius: radiusVars.sm,\n  },\n  variantDefault: { backgroundColor: colorVars.bgSubtle, color: colorVars.fgPrimary },\n  outline: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: 1,\n    color: colorVars.fgPrimary,\n  },\n});\n\nexport type BubbleProps = ComponentProps<\"div\"> & {\n  side?: \"incoming\" | \"outgoing\";\n  variant?: \"default\" | \"outline\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Bubble({ side = \"incoming\", variant = \"default\", xstyle, ...props }: BubbleProps) {\n  const resolved = stylex.props(\n    styles.root,\n    styles[side],\n    variant === \"default\" ? styles.variantDefault : styles[variant],\n    xstyle,\n  );\n  return <div {...props} {...resolved} data-side={side} />;\n}\n",
+      "content": "import {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    maxWidth: `min(${sizeVars.contentMd}, 100%)`,\n    paddingBlock: spacingVars.space3,\n    paddingInline: spacingVars.space4,\n    whiteSpace: \"pre-wrap\",\n  },\n  alignStart: {\n    alignSelf: \"flex-start\",\n    borderBottomLeftRadius: radiusVars.sm,\n    borderRadius: radiusVars.sm,\n  },\n  alignEnd: {\n    alignSelf: \"flex-end\",\n    borderBottomRightRadius: radiusVars.sm,\n    borderRadius: radiusVars.sm,\n  },\n  default: { backgroundColor: colorVars.bgSubtle, color: colorVars.fgPrimary },\n  primary: {\n    backgroundColor: colorVars.bgMessageOutgoing,\n    color: colorVars.fgOnMessageOutgoing,\n  },\n  outline: {\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n  },\n});\n\nexport type BubbleAlign = \"start\" | \"end\";\nexport type BubbleVariant = \"default\" | \"primary\" | \"outline\";\n\nexport type BubbleProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  align?: BubbleAlign;\n  variant?: BubbleVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Bubble({ align = \"start\", variant = \"default\", xstyle, ...props }: BubbleProps) {\n  return (\n    <div\n      {...props}\n      data-align={align}\n      data-variant={variant}\n      {...stylex.props(\n        styles.root,\n        align === \"start\" ? styles.alignStart : styles.alignEnd,\n        styles[variant],\n        xstyle,\n      )}\n    />\n  );\n}\n",
       "path": "bubble.tsx"
     }
   ],

package/dist/items/button-group.json

@@ -3,7 +3,7 @@
   "primaryExport": "ButtonGroup",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ComponentProps,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Separator } from \"./separator\";\nimport { radiusVars } from \"@nuee/tokens/semantic.stylex\";\nimport { colorVars, sizeVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"stretch\",\n    display: \"inline-flex\",\n    gap: 0,\n    width: \"fit-content\",\n  },\n  horizontal: { flexDirection: \"row\" },\n  vertical: { flexDirection: \"column\" },\n  item: {\n    minWidth: 0,\n    position: \"relative\",\n    \":focus-visible\": { zIndex: 1 },\n  },\n  horizontalItem: { marginInlineStart: -1 },\n  horizontalFirstItem: { marginInlineStart: 0 },\n  horizontalLastItem: {},\n  verticalItem: { marginBlockStart: -1 },\n  verticalFirstItem: { marginBlockStart: 0 },\n  verticalLastItem: {},\n  text: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    minHeight: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  separator: { alignSelf: \"stretch\", height: \"auto\", marginInline: -1, minHeight: \"auto\" },\n});\n\ntype StyleProps = { style?: CSSProperties; xstyle?: stylex.StyleXStyles };\ntype GroupItem = ReactElement<StyleProps>;\n\nfunction isGroupItem(child: ReactNode): child is GroupItem {\n  return isValidElement(child) && child.type !== ButtonGroupSeparator;\n}\n\nfunction getItemBorderRadius(\n  orientation: \"horizontal\" | \"vertical\",\n  position: number,\n  length: number,\n): CSSProperties {\n  const isFirst = position === 0;\n  const isLast = position === length - 1;\n\n  if (orientation === \"horizontal\") {\n    return {\n      borderBottomLeftRadius: isFirst ? radiusVars.sm : 0,\n      borderBottomRightRadius: isLast ? radiusVars.sm : 0,\n      borderTopLeftRadius: isFirst ? radiusVars.sm : 0,\n      borderTopRightRadius: isLast ? radiusVars.sm : 0,\n    };\n  }\n\n  return {\n    borderBottomLeftRadius: isLast ? radiusVars.sm : 0,\n    borderBottomRightRadius: isLast ? radiusVars.sm : 0,\n    borderTopLeftRadius: isFirst ? radiusVars.sm : 0,\n    borderTopRightRadius: isFirst ? radiusVars.sm : 0,\n  };\n}\n\nexport type ButtonGroupProps = ComponentProps<\"div\"> &\n  StyleProps & { orientation?: \"horizontal\" | \"vertical\" };\n\nexport function ButtonGroup({\n  children,\n  orientation = \"horizontal\",\n  role,\n  xstyle,\n  ...props\n}: ButtonGroupProps) {\n  const stylexProps = stylex.props(styles.root, styles[orientation], xstyle);\n  const childItems = Children.toArray(children);\n  const groupItems = childItems.filter(isGroupItem);\n\n  const content = childItems.map((child, childIndex) => {\n    if (!isGroupItem(child)) return child;\n\n    const position = childItems.slice(0, childIndex).filter(isGroupItem).length;\n    const groupItem = child;\n    const itemStyles = [\n      styles.item,\n      styles[`${orientation}Item`],\n      position === 0 && styles[`${orientation}FirstItem`],\n      position === groupItems.length - 1 && styles[`${orientation}LastItem`],\n    ];\n\n    return cloneElement(groupItem, {\n      style: {\n        ...groupItem.props.style,\n        ...getItemBorderRadius(orientation, position, groupItems.length),\n      },\n      xstyle: [...itemStyles, groupItem.props.xstyle],\n    });\n  });\n\n  return (\n    <div {...props} data-orientation={orientation} role={role ?? \"group\"} {...stylexProps}>\n      {content}\n    </div>\n  );\n}\n\nexport function ButtonGroupText({ xstyle, ...props }: ComponentProps<\"span\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.text, xstyle);\n  return <span {...props} {...stylexProps} />;\n}\n\nexport function ButtonGroupSeparator({\n  orientation = \"vertical\",\n  xstyle,\n  ...props\n}: ComponentProps<typeof Separator> & StyleProps) {\n  return <Separator {...props} orientation={orientation} xstyle={[styles.separator, xstyle]} />;\n}\n",
+      "content": "\"use client\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport {\n  Children,\n  Fragment,\n  cloneElement,\n  isValidElement,\n  type ComponentProps,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { Separator } from \"./separator\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"stretch\",\n    display: \"inline-flex\",\n    gap: 0,\n    width: \"fit-content\",\n  },\n  horizontal: { flexDirection: \"row\" },\n  vertical: { flexDirection: \"column\" },\n  item: {\n    minWidth: 0,\n    position: \"relative\",\n    \":focus-visible\": { zIndex: 1 },\n  },\n  horizontalItem: { marginInlineStart: -1 },\n  horizontalFirstItem: { marginInlineStart: 0 },\n  horizontalOnlyItem: { borderRadius: radiusVars.sm },\n  horizontalFirstItemRadius: {\n    borderBottomLeftRadius: radiusVars.sm,\n    borderBottomRightRadius: 0,\n    borderTopLeftRadius: radiusVars.sm,\n    borderTopRightRadius: 0,\n  },\n  horizontalMiddleItem: { borderRadius: 0 },\n  horizontalLastItem: {\n    borderBottomLeftRadius: 0,\n    borderBottomRightRadius: radiusVars.sm,\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: radiusVars.sm,\n  },\n  verticalItem: { marginBlockStart: -1 },\n  verticalFirstItem: { marginBlockStart: 0 },\n  verticalOnlyItem: { borderRadius: radiusVars.sm },\n  verticalFirstItemRadius: {\n    borderBottomLeftRadius: 0,\n    borderBottomRightRadius: 0,\n    borderTopLeftRadius: radiusVars.sm,\n    borderTopRightRadius: radiusVars.sm,\n  },\n  verticalMiddleItem: { borderRadius: 0 },\n  verticalLastItem: {\n    borderBottomLeftRadius: radiusVars.sm,\n    borderBottomRightRadius: radiusVars.sm,\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: 0,\n  },\n  text: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    minHeight: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  separator: { alignSelf: \"stretch\", height: \"auto\", marginInline: -1, minHeight: \"auto\" },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype GroupItem = ReactElement<StyleProps>;\n\nfunction isGroupItem(child: ReactNode): child is GroupItem {\n  return (\n    isValidElement(child) &&\n    typeof child.type !== \"string\" &&\n    child.type !== Fragment &&\n    child.type !== ButtonGroupSeparator\n  );\n}\n\nfunction getItemPositionStyle(\n  orientation: \"horizontal\" | \"vertical\",\n  isFirst: boolean,\n  isLast: boolean,\n) {\n  if (orientation === \"horizontal\") {\n    if (isFirst && isLast) return styles.horizontalOnlyItem;\n    if (isFirst) return styles.horizontalFirstItemRadius;\n    if (isLast) return styles.horizontalLastItem;\n    return styles.horizontalMiddleItem;\n  }\n\n  if (isFirst && isLast) return styles.verticalOnlyItem;\n  if (isFirst) return styles.verticalFirstItemRadius;\n  if (isLast) return styles.verticalLastItem;\n  return styles.verticalMiddleItem;\n}\n\n/** Direct children must be Nuee buttons or components that forward xstyle. Fragments and native elements are not styled as group items. */\nexport type ButtonGroupProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> &\n  StyleProps & { orientation?: \"horizontal\" | \"vertical\" };\n\nexport function ButtonGroup({\n  children,\n  orientation = \"horizontal\",\n  role,\n  xstyle,\n  ...props\n}: ButtonGroupProps) {\n  const childItems = Children.toArray(children);\n  const groupItems = childItems.filter(isGroupItem);\n\n  let position = -1;\n  const content: ReactNode[] = [];\n  for (const child of childItems) {\n    if (!isGroupItem(child)) {\n      content.push(child);\n      continue;\n    }\n\n    position += 1;\n    const isFirst = position === 0;\n    const isLast = position === groupItems.length - 1;\n    const positionStyle = getItemPositionStyle(orientation, isFirst, isLast);\n    const itemStyles = [\n      styles.item,\n      styles[`${orientation}Item`],\n      isFirst && styles[`${orientation}FirstItem`],\n      positionStyle,\n    ];\n\n    content.push(\n      cloneElement(child, {\n        xstyle: [...itemStyles, child.props.xstyle],\n      }),\n    );\n  }\n\n  return (\n    <div\n      {...props}\n      data-orientation={orientation}\n      role={role ?? \"group\"}\n      {...stylex.props(styles.root, styles[orientation], xstyle)}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport function ButtonGroupText({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\"> & StyleProps) {\n  return <span {...props} {...stylex.props(styles.text, xstyle)} />;\n}\n\nexport function ButtonGroupSeparator({\n  orientation = \"vertical\",\n  xstyle,\n  ...props\n}: Omit<ComponentProps<typeof Separator>, \"className\" | \"style\"> & StyleProps) {\n  return <Separator {...props} orientation={orientation} xstyle={[styles.separator, xstyle]} />;\n}\n",
       "path": "button-group.tsx"
     }
   ],

package/dist/items/button.json

@@ -3,8 +3,12 @@
   "primaryExport": "Button",
   "files": [
     {
-      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    isolation: \"isolate\",\n    justifyContent: \"center\",\n    lineHeight: typographyVars.lineHeightTight,\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    userSelect: \"none\",\n    whiteSpace: \"nowrap\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n    },\n    \"::before\": {\n      backgroundColor: colorVars.interactionDefault,\n      content: '\"\"',\n      inset: 0,\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      zIndex: 0,\n    },\n  },\n  solidInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionSolidHover,\n        \":active\": colorVars.interactionSolidPressed,\n      },\n    },\n  },\n  surfaceInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionHover,\n        \":active\": colorVars.interactionPressed,\n      },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: spacingVars.space2,\n    position: \"relative\",\n    zIndex: 1,\n  },\n  primaryContent: { color: colorVars.fgOnActionPrimary },\n  destructiveContent: { color: colorVars.fgOnActionDestructive },\n  disabledContent: { color: colorVars.fgDisabled },\n  primary: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderColor: colorVars.bgActionPrimary,\n    color: colorVars.fgOnActionPrimary,\n  },\n  secondary: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgPrimary,\n  },\n  ghost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n    color: colorVars.fgPrimary,\n  },\n  destructive: {\n    backgroundColor: colorVars.bgActionDestructive,\n    borderColor: colorVars.bgActionDestructive,\n    color: colorVars.fgOnActionDestructive,\n  },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n  },\n  disabledGhost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n  },\n  disabledInteraction: {\n    \"::before\": { backgroundColor: colorVars.interactionDefault },\n  },\n  sm: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: spacingVars.space3,\n  },\n  md: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: spacingVars.space4,\n  },\n  lg: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: spacingVars.space5,\n  },\n});\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"destructive\";\ntype ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport type ButtonProps = ComponentProps<typeof ButtonPrimitive> & {\n  children: ReactNode;\n  size?: ButtonSize;\n  variant?: ButtonVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Button({\n  children,\n  disabled,\n  size = \"md\",\n  variant = \"primary\",\n  xstyle,\n  ...props\n}: ButtonProps) {\n  const isDisabled = Boolean(disabled);\n  const hasSolidBackground = variant === \"primary\" || variant === \"destructive\";\n  const stylexProps = stylex.props(\n    styles.root,\n    styles[variant],\n    styles[size],\n    hasSolidBackground ? styles.solidInteraction : styles.surfaceInteraction,\n    isDisabled && styles.disabled,\n    isDisabled && variant === \"ghost\" && styles.disabledGhost,\n    isDisabled && styles.disabledInteraction,\n    xstyle,\n  );\n  const contentStylexProps = stylex.props(\n    styles.content,\n    variant === \"primary\" && styles.primaryContent,\n    variant === \"destructive\" && styles.destructiveContent,\n    isDisabled && styles.disabledContent,\n  );\n\n  return (\n    <ButtonPrimitive {...props} disabled={disabled} {...stylexProps}>\n      <span {...contentStylexProps}>{children}</span>\n    </ButtonPrimitive>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    isolation: \"isolate\",\n    justifyContent: \"center\",\n    lineHeight: typographyVars.lineHeightTight,\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    userSelect: \"none\",\n    whiteSpace: \"nowrap\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n    },\n    \"::before\": {\n      backgroundColor: colorVars.interactionDefault,\n      content: '\"\"',\n      inset: 0,\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      transitionDuration: motionVars.durationFast,\n      transitionProperty: \"background-color\",\n      transitionTimingFunction: motionVars.easingStandard,\n      zIndex: 0,\n    },\n  },\n  solidInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionSolidHover,\n        \":active\": colorVars.interactionSolidPressed,\n      },\n    },\n  },\n  surfaceInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionHover,\n        \":active\": colorVars.interactionPressed,\n      },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: spacingVars.space2,\n    position: \"relative\",\n    zIndex: 1,\n  },\n  iconContent: {\n    gap: 0,\n    // Give icon-only buttons a text baseline without adding visible content.\n    \"::before\": { content: '\"\\\\200b\"' },\n  },\n  primaryContent: { color: colorVars.fgOnActionPrimary },\n  destructiveContent: { color: colorVars.fgOnActionDestructive },\n  disabledContent: { color: colorVars.fgDisabled },\n  primary: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderColor: colorVars.bgActionPrimary,\n    color: colorVars.fgOnActionPrimary,\n  },\n  secondary: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgPrimary,\n  },\n  ghost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n    color: colorVars.fgPrimary,\n  },\n  destructive: {\n    backgroundColor: colorVars.bgActionDestructive,\n    borderColor: colorVars.bgActionDestructive,\n    color: colorVars.fgOnActionDestructive,\n  },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n  },\n  disabledGhost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n  },\n  disabledInteraction: {\n    \"::before\": { backgroundColor: colorVars.interactionDefault },\n  },\n  sm: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: spacingVars.space3,\n  },\n  md: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: spacingVars.space4,\n  },\n  lg: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: spacingVars.space5,\n  },\n  \"icon-xs\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlXs,\n    paddingInline: 0,\n    width: sizeVars.controlXs,\n  },\n  \"icon-sm\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: 0,\n    width: sizeVars.controlSm,\n  },\n  icon: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: 0,\n    width: sizeVars.controlMd,\n  },\n  \"icon-lg\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: 0,\n    width: sizeVars.controlLg,\n  },\n  square: { paddingInline: 0 },\n  circle: { borderRadius: radiusVars.full, paddingInline: 0 },\n  iconSm: { width: sizeVars.controlSm },\n  iconMd: { width: sizeVars.controlMd },\n  iconLg: { width: sizeVars.controlLg },\n});\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"destructive\";\ntype ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\";\n\nexport type ButtonProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\" | \"style\"> & {\n  children: ReactNode;\n  size?: ButtonSize;\n  /** Use an icon size for icon-only buttons, and add an accessible name. */\n  shape?: \"default\" | \"square\" | \"circle\";\n  variant?: ButtonVariant;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Button({\n  children,\n  disabled,\n  size = \"md\",\n  shape = \"default\",\n  variant = \"primary\",\n  xstyle,\n  ...props\n}: ButtonProps) {\n  const isDisabled = Boolean(disabled);\n  const isIconSize = size.startsWith(\"icon\");\n  const hasSolidBackground = variant === \"primary\" || variant === \"destructive\";\n\n  return (\n    <ButtonPrimitive\n      {...props}\n      disabled={disabled}\n      {...stylex.props(\n        styles.root,\n        styles[variant],\n        styles[size],\n        shape !== \"default\" && styles[shape],\n        !isIconSize && shape !== \"default\" && size === \"sm\" && styles.iconSm,\n        !isIconSize && shape !== \"default\" && size === \"md\" && styles.iconMd,\n        !isIconSize && shape !== \"default\" && size === \"lg\" && styles.iconLg,\n        hasSolidBackground ? styles.solidInteraction : styles.surfaceInteraction,\n        isDisabled && styles.disabled,\n        isDisabled && variant === \"ghost\" && styles.disabledGhost,\n        isDisabled && styles.disabledInteraction,\n        xstyle,\n      )}\n    >\n      <span\n        {...stylex.props(\n          styles.content,\n          isIconSize && styles.iconContent,\n          variant === \"primary\" && styles.primaryContent,\n          variant === \"destructive\" && styles.destructiveContent,\n          isDisabled && styles.disabledContent,\n        )}\n      >\n        {children}\n      </span>\n    </ButtonPrimitive>\n  );\n}\n",
       "path": "button.tsx"
+    },
+    {
+      "content": "import type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { CSSProperties } from \"react\";\n\n/** Placement belongs to the screen; appearance and state belong to the control. */\ntype Placement = Pick<\n  CSSProperties,\n  | \"alignSelf\"\n  | \"justifySelf\"\n  | \"flexGrow\"\n  | \"flexShrink\"\n  | \"flexBasis\"\n  | \"order\"\n  | \"gridArea\"\n  | \"gridColumn\"\n  | \"gridRow\"\n  | \"margin\"\n  | \"marginBlock\"\n  | \"marginBlockStart\"\n  | \"marginBlockEnd\"\n  | \"marginInline\"\n  | \"marginInlineStart\"\n  | \"marginInlineEnd\"\n  | \"position\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"insetInlineStart\"\n  | \"insetInlineEnd\"\n  | \"zIndex\"\n>;\n\nexport type ControlPlacementStyles = StyleXStyles<Placement>;\nexport type ControlLayoutStyles = StyleXStyles<\n  Placement & Pick<CSSProperties, \"width\" | \"minWidth\" | \"maxWidth\">\n>;\n\n/** A multiline field may opt into its vertical space; its visual treatment stays owned. */\nexport type ControlFieldStyles = StyleXStyles<\n  Placement &\n    Pick<CSSProperties, \"width\" | \"minWidth\" | \"maxWidth\" | \"height\" | \"minHeight\" | \"maxHeight\">\n>;\n",
+      "path": "control-layout.ts"
     }
   ],
   "dependencies": [

package/dist/items/calendar.json

@@ -0,0 +1,15 @@
+{
+  "name": "calendar",
+  "primaryExport": "Calendar",
+  "files": [
+    {
+      "content": "\"use client\";\n\nimport { DayButton, DayPicker, type DayButtonProps, type DayPickerProps } from \"@daypicker/react\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nconst styles = stylex.create({\n  root: {\n    color: colorVars.fgPrimary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    padding: spacingVars.space3,\n    width: \"fit-content\",\n  },\n  months: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space8 },\n  month: { position: \"relative\", width: \"17.5rem\" },\n  monthCaption: {\n    alignItems: \"center\",\n    display: \"flex\",\n    height: sizeVars.controlSm,\n    justifyContent: \"center\",\n    paddingInline: sizeVars.controlSm,\n  },\n  captionLabel: { fontWeight: typographyVars.fontWeightMedium },\n  nav: {\n    alignItems: \"center\",\n    display: \"flex\",\n    height: sizeVars.controlSm,\n    insetInline: 0,\n    justifyContent: \"space-between\",\n    position: \"absolute\",\n    insetBlockStart: 0,\n  },\n  navButton: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.interactionDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.controlSm,\n    justifyContent: \"center\",\n    outline: \"none\",\n    padding: 0,\n    position: \"absolute\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlSm,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  previous: { insetInlineStart: 0, insetBlockStart: 0 },\n  next: { insetInlineEnd: 0, insetBlockStart: 0 },\n  monthGrid: { borderCollapse: \"collapse\", tableLayout: \"fixed\", width: \"100%\" },\n  weekdays: { color: colorVars.fgSecondary },\n  weekday: {\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlSm,\n    textAlign: \"center\",\n  },\n  week: { height: sizeVars.controlMd },\n  day: { height: sizeVars.controlMd, textAlign: \"center\" },\n  dayButton: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.interactionDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    font: \"inherit\",\n    height: sizeVars.controlMd,\n    justifyContent: \"center\",\n    outline: \"none\",\n    padding: 0,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  selected: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgOnActionPrimary,\n    fontWeight: typographyVars.fontWeightMedium,\n    \":hover\": { backgroundColor: colorVars.bgActionPrimary },\n  },\n  today: {\n    backgroundColor: colorVars.bgCurrent,\n    color: colorVars.fgAction,\n    fontWeight: typographyVars.fontWeightSemibold,\n    \":hover\": { backgroundColor: colorVars.interactionPressed },\n  },\n  outside: { color: colorVars.fgTertiary },\n  disabled: { color: colorVars.fgDisabled, cursor: \"not-allowed\" },\n  rangeMiddle: {\n    backgroundColor: colorVars.interactionSelected,\n    borderRadius: 0,\n    color: colorVars.fgPrimary,\n  },\n  dayLabel: { color: \"inherit\" },\n  chevron: {\n    fill: colorVars.fgPrimary,\n    height: sizeVars.iconMd,\n    width: sizeVars.iconMd,\n  },\n});\n\nconst classNames = {\n  button_next: stylex.props(styles.navButton, styles.next).className,\n  button_previous: stylex.props(styles.navButton, styles.previous).className,\n  caption_label: stylex.props(styles.captionLabel).className,\n  day: stylex.props(styles.day).className,\n  chevron: stylex.props(styles.chevron).className,\n  month: stylex.props(styles.month).className,\n  month_caption: stylex.props(styles.monthCaption).className,\n  month_grid: stylex.props(styles.monthGrid).className,\n  months: stylex.props(styles.months).className,\n  nav: stylex.props(styles.nav).className,\n  week: stylex.props(styles.week).className,\n  weekday: stylex.props(styles.weekday).className,\n  weekdays: stylex.props(styles.weekdays).className,\n};\n\nfunction CalendarDayButton({ children, modifiers, ...props }: DayButtonProps) {\n  const isSelected =\n    modifiers.range_start || modifiers.range_end || (modifiers.selected && !modifiers.range_middle);\n\n  return (\n    <DayButton\n      {...props}\n      modifiers={modifiers}\n      {...stylex.props(\n        styles.dayButton,\n        modifiers.outside && styles.outside,\n        modifiers.range_middle && styles.rangeMiddle,\n        isSelected && styles.selected,\n        modifiers.today && !modifiers.selected && styles.today,\n        modifiers.disabled && styles.disabled,\n      )}\n    >\n      <span {...stylex.props(styles.dayLabel)}>{children}</span>\n    </DayButton>\n  );\n}\n\ntype WithoutCalendarStyling<Props> = Props extends unknown\n  ? Omit<\n      Props,\n      | \"className\"\n      | \"classNames\"\n      | \"components\"\n      | \"modifiersClassNames\"\n      | \"modifiersStyles\"\n      | \"style\"\n      | \"styles\"\n    >\n  : never;\n\ntype CalendarDayPickerProps = WithoutCalendarStyling<DayPickerProps>;\n\nexport type CalendarProps = CalendarDayPickerProps & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Calendar({ navLayout = \"around\", xstyle, ...props }: CalendarProps) {\n  const root = stylex.props(styles.root, xstyle);\n\n  return (\n    <DayPicker\n      {...props}\n      className={root.className}\n      classNames={classNames}\n      components={{ DayButton: CalendarDayButton }}\n      navLayout={navLayout}\n      style={root.style}\n    />\n  );\n}\n",
+      "path": "calendar.tsx"
+    }
+  ],
+  "dependencies": [
+    "@daypicker/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/card.json

@@ -3,7 +3,7 @@
   "primaryExport": "Card",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  card: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    paddingBlock: spacingVars.space6,\n    paddingInline: spacingVars.space6,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  content: {\n    paddingBlockEnd: spacingVars.space6,\n    paddingInline: spacingVars.space6,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space3,\n    paddingBlockEnd: spacingVars.space6,\n    paddingInline: spacingVars.space6,\n  },\n});\n\ntype StyleProps = {\n  xstyle?: stylex.StyleXStyles;\n};\n\ntype ElementProps = ComponentProps<\"div\"> & StyleProps;\ntype HeadingProps = ComponentProps<\"h3\"> & StyleProps;\ntype ParagraphProps = ComponentProps<\"p\"> & StyleProps;\n\nexport function Card({ xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.card, xstyle);\n\n  return <div {...props} {...stylexProps} />;\n}\n\nexport function CardHeader({ xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.header, xstyle);\n\n  return <div {...props} {...stylexProps} />;\n}\n\nexport function CardTitle({ children, xstyle, ...props }: HeadingProps) {\n  const stylexProps = stylex.props(styles.title, xstyle);\n\n  return (\n    <h3 {...props} {...stylexProps}>\n      {children}\n    </h3>\n  );\n}\n\nexport function CardDescription({ xstyle, ...props }: ParagraphProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n\n  return <p {...props} {...stylexProps} />;\n}\n\nexport function CardContent({ xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.content, xstyle);\n\n  return <div {...props} {...stylexProps} />;\n}\n\nexport function CardFooter({ xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.footer, xstyle);\n\n  return <div {...props} {...stylexProps} />;\n}\n",
+      "content": "import {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  card: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    paddingBlock: spacingVars.space6,\n    paddingInline: spacingVars.space6,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  content: {\n    paddingBlockEnd: spacingVars.space6,\n    paddingInline: spacingVars.space6,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space3,\n    paddingBlockEnd: spacingVars.space6,\n    paddingInline: spacingVars.space6,\n  },\n});\n\ntype StyleProps = {\n  xstyle?: stylex.StyleXStyles;\n};\n\ntype ElementProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps;\ntype HeadingProps = Omit<ComponentProps<\"h3\">, \"className\" | \"style\"> & StyleProps;\ntype ParagraphProps = Omit<ComponentProps<\"p\">, \"className\" | \"style\"> & StyleProps;\n\nexport function Card({ xstyle, ...props }: ElementProps) {\n  return <div {...props} {...stylex.props(styles.card, xstyle)} />;\n}\n\nexport function CardHeader({ xstyle, ...props }: ElementProps) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function CardTitle({ children, xstyle, ...props }: HeadingProps) {\n  return (\n    <h3 {...props} {...stylex.props(styles.title, xstyle)}>\n      {children}\n    </h3>\n  );\n}\n\nexport function CardDescription({ xstyle, ...props }: ParagraphProps) {\n  return <p {...props} {...stylex.props(styles.description, xstyle)} />;\n}\n\nexport function CardContent({ xstyle, ...props }: ElementProps) {\n  return <div {...props} {...stylex.props(styles.content, xstyle)} />;\n}\n\nexport function CardFooter({ xstyle, ...props }: ElementProps) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n",
       "path": "card.tsx"
     }
   ],

package/dist/items/carousel.json

@@ -0,0 +1,18 @@
+{
+  "name": "carousel",
+  "primaryExport": "Carousel",
+  "files": [
+    {
+      "content": "\"use client\";\n\nimport { sizeVars } from \"@nuee/tokens/semantic.stylex\";\nimport { CaretLeftIcon, CaretRightIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport {\n  createContext,\n  useLayoutEffect,\n  useRef,\n  useContext,\n  useEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\n\nimport { Button } from \"./button\";\n\nconst styles = stylex.create({\n  root: { position: \"relative\", width: \"100%\" },\n  viewport: { overflow: \"hidden\", width: \"100%\" },\n  content: { display: \"flex\" },\n  item: { flex: \"0 0 100%\", minWidth: 0 },\n  control: {\n    position: \"absolute\",\n    top: `calc(50% - ${sizeVars.controlSm} / 2)`,\n  },\n  previous: { insetInlineStart: `calc(${sizeVars.controlSm} * -1.5)` },\n  next: { insetInlineEnd: `calc(${sizeVars.controlSm} * -1.5)` },\n});\n\ntype CarouselApi = ReturnType<typeof useEmblaCarousel>[1];\ntype CarouselOptions = Parameters<typeof useEmblaCarousel>[0];\ntype CarouselPlugins = Parameters<typeof useEmblaCarousel>[1];\ntype CarouselContextValue = {\n  canScrollNext: boolean;\n  canScrollPrevious: boolean;\n  scrollNext: () => void;\n  scrollPrevious: () => void;\n  viewportRef: ReturnType<typeof useEmblaCarousel>[0];\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nfunction useCarousel() {\n  const context = useContext(CarouselContext);\n  if (!context) throw new Error(\"Carousel slots must be rendered inside Carousel.\");\n  return context;\n}\n\nexport type { CarouselApi };\n\nexport type CarouselProps = Omit<ComponentProps<\"section\">, \"className\" | \"style\"> & {\n  children: ReactNode;\n  onSelect?: (api: NonNullable<CarouselApi>) => void;\n  options?: CarouselOptions;\n  plugins?: CarouselPlugins;\n  setApi?: (api: NonNullable<CarouselApi>) => void;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Carousel({\n  children,\n  onSelect,\n  options,\n  plugins,\n  setApi,\n  xstyle,\n  ...props\n}: CarouselProps) {\n  const [viewportRef, api] = useEmblaCarousel(options, plugins);\n  const [canScrollPrevious, setCanScrollPrevious] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n\n  const onSelectRef = useRef(onSelect);\n  useLayoutEffect(() => {\n    onSelectRef.current = onSelect;\n  }, [onSelect]);\n\n  useEffect(() => {\n    if (api) setApi?.(api);\n  }, [api, setApi]);\n\n  useEffect(() => {\n    if (!api) return;\n    function handleSelection(nextApi: NonNullable<CarouselApi>) {\n      setCanScrollPrevious(nextApi.canScrollPrev());\n      setCanScrollNext(nextApi.canScrollNext());\n      onSelectRef.current?.(nextApi);\n    }\n    api.on(\"reInit\", handleSelection).on(\"select\", handleSelection);\n    const frame = requestAnimationFrame(() => handleSelection(api));\n    return () => {\n      cancelAnimationFrame(frame);\n      api.off(\"reInit\", handleSelection).off(\"select\", handleSelection);\n    };\n  }, [api]);\n\n  function scrollPrevious() {\n    api?.scrollPrev();\n  }\n\n  function scrollNext() {\n    api?.scrollNext();\n  }\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        canScrollNext,\n        canScrollPrevious,\n        scrollNext,\n        scrollPrevious,\n        viewportRef,\n      }}\n    >\n      <section {...props} {...stylex.props(styles.root, xstyle)}>\n        {children}\n      </section>\n    </CarouselContext.Provider>\n  );\n}\n\nexport type CarouselContentProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function CarouselContent({ children, xstyle, ...props }: CarouselContentProps) {\n  const { viewportRef } = useCarousel();\n\n  return (\n    <div ref={viewportRef} {...stylex.props(styles.viewport)}>\n      <div {...props} {...stylex.props(styles.content, xstyle)}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type CarouselItemProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function CarouselItem({ xstyle, ...props }: CarouselItemProps) {\n  return <div {...props} {...stylex.props(styles.item, xstyle)} />;\n}\n\ntype CarouselControlProps = Omit<\n  ComponentProps<typeof Button>,\n  \"children\" | \"onClick\" | \"className\" | \"style\"\n>;\n\nexport function CarouselPrevious({ disabled, xstyle, ...props }: CarouselControlProps) {\n  const { canScrollPrevious, scrollPrevious } = useCarousel();\n  return (\n    <Button\n      aria-label=\"Previous slide\"\n      disabled={disabled ?? !canScrollPrevious}\n      onClick={scrollPrevious}\n      size=\"icon-sm\"\n      shape=\"circle\"\n      variant=\"secondary\"\n      xstyle={[styles.control, styles.previous, xstyle]}\n      {...props}\n    >\n      <CaretLeftIcon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n\nexport function CarouselNext({ disabled, xstyle, ...props }: CarouselControlProps) {\n  const { canScrollNext, scrollNext } = useCarousel();\n  return (\n    <Button\n      aria-label=\"Next slide\"\n      disabled={disabled ?? !canScrollNext}\n      onClick={scrollNext}\n      size=\"icon-sm\"\n      shape=\"circle\"\n      variant=\"secondary\"\n      xstyle={[styles.control, styles.next, xstyle]}\n      {...props}\n    >\n      <CaretRightIcon aria-hidden=\"true\" />\n    </Button>\n  );\n}\n",
+      "path": "carousel.tsx"
+    }
+  ],
+  "dependencies": [
+    "@phosphor-icons/react",
+    "@stylexjs/stylex",
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "button"
+  ]
+}