@nuee/registry 0.3.2 → 0.4.1

package/dist/index.d.ts

@@ -14,8 +14,13 @@ export type TokenFile = {
     content: string;
     name: string;
 };
+export type FoundationFile = {
+    content: string;
+    name: string;
+};
 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;
     "@phosphor-icons/react": string;

package/dist/index.js

@@ -36,6 +36,14 @@ 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",
     "@phosphor-icons/react": "^2.1.10",

package/dist/items/accordion.json

@@ -7,7 +7,7 @@
       "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({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AccordionPrimitive.Root>) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <AccordionPrimitive.Root\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AccordionItem({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AccordionPrimitive.Item>) {\n  const stylexProps = stylex.props(styles.item);\n  return (\n    <AccordionPrimitive.Item\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AccordionTrigger({\n  children,\n  className,\n  style,\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 [\n            stylexProps.className,\n            typeof className === \"function\" ? className(state) : className,\n          ]\n            .filter(Boolean)\n            .join(\" \");\n        }}\n        style={(state) => {\n          const stylexProps = stylex.props(\n            styles.trigger,\n            state.disabled && styles.triggerDisabled,\n          );\n          return { ...stylexProps.style, ...(typeof style === \"function\" ? style(state) : 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  className,\n  style,\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 [\n          stylexProps.className,\n          typeof className === \"function\" ? className(state) : className,\n        ]\n          .filter(Boolean)\n          .join(\" \");\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, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n",
+      "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",
       "path": "accordion.tsx"
     }
   ],

package/dist/items/alert-dialog.json

@@ -3,12 +3,8 @@
   "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 { getNativeStyleProps } from \"./stylex-props\";\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({\n  children,\n  className,\n  style,\n  xstyle,\n  ...props\n}: 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={(state) => {\n            return [\n              stylexProps.className,\n              typeof className === \"function\" ? className(state) : className,\n            ]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        >\n          {children}\n        </AlertDialogPrimitive.Popup>\n      </AlertDialogPrimitive.Viewport>\n    </AlertDialogPrimitive.Portal>\n  );\n}\n\nexport function AlertDialogHeader({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.header, xstyle), className, style)}\n    />\n  );\n}\n\nexport function AlertDialogFooter({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.footer, xstyle), className, style)}\n    />\n  );\n}\n\nexport function AlertDialogTitle({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <AlertDialogPrimitive.Title\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AlertDialogDescription({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <AlertDialogPrimitive.Description\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\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": "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",
       "path": "alert-dialog.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

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({ className, ratio = 1, style, xstyle, ...props }: AspectRatioProps) {\n  const stylexProps = stylex.props(styles.root(ratio), xstyle);\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\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 = 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",
       "path": "aspect-ratio.tsx"
     }
   ],

package/dist/items/attachment.json

@@ -3,12 +3,8 @@
   "primaryExport": "Attachment",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\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  className,\n  orientation = \"horizontal\",\n  size = \"default\",\n  state = \"done\",\n  style,\n  xstyle,\n  ...props\n}: AttachmentProps) {\n  return (\n    <div\n      {...props}\n      data-orientation={orientation}\n      data-state={state}\n      {...getNativeStyleProps(\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        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport type AttachmentMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"icon\" | \"image\";\n};\n\nexport function AttachmentMedia({\n  className,\n  style,\n  variant = \"icon\",\n  ...props\n}: AttachmentMediaProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(styles.media, styles[`media${variant}`]),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function AttachmentContent({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n\nexport function AttachmentTitle({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.title), className, style)} />;\n}\n\nexport function AttachmentDescription({ className, style, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p {...props} {...getNativeStyleProps(stylex.props(styles.description), className, style)} />\n  );\n}\n\nexport function AttachmentActions({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.actions), className, style)} />\n  );\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  className,\n  style,\n  type = \"button\",\n  ...props\n}: ComponentProps<\"button\">) {\n  return (\n    <button\n      {...props}\n      type={type}\n      {...getNativeStyleProps(stylex.props(styles.trigger), className, style)}\n    />\n  );\n}\n\nexport function AttachmentGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.group), className, style)} />;\n}\n",
+      "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",
       "path": "attachment.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/avatar.json

@@ -3,12 +3,8 @@
   "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 { getNativeStyleProps } from \"./stylex-props\";\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({ className, size = \"md\", style, xstyle, ...props }: AvatarProps) {\n  const stylexProps = stylex.props(styles.root, styles[size], xstyle);\n  return (\n    <AvatarPrimitive.Root\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AvatarImage({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Image>) {\n  const stylexProps = stylex.props(styles.image);\n  return (\n    <AvatarPrimitive.Image\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AvatarFallback({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  const stylexProps = stylex.props(styles.fallback);\n  return (\n    <AvatarPrimitive.Fallback\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function AvatarBadge({ className, style, ...props }: ComponentProps<\"span\">) {\n  return <span {...props} {...getNativeStyleProps(stylex.props(styles.badge), className, style)} />;\n}\n\nexport function AvatarGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  const stylexProps = stylex.props(styles.group);\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function AvatarGroupCount({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span {...props} {...getNativeStyleProps(stylex.props(styles.groupCount), className, style)} />\n  );\n}\n",
+      "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",
       "path": "avatar.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

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({ className, style, variant = \"primary\", xstyle, ...props }: BadgeProps) {\n  const stylexProps = stylex.props(styles.root, styles[variant], xstyle);\n  return (\n    <span\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "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",
       "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  className,\n  description,\n  icon,\n  role,\n  size = \"md\",\n  style,\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\n      {...props}\n      role={role ?? liveRole}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    >\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({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.title, xstyle);\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function BannerDescription({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "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",
       "path": "banner.tsx"
     }
   ],

package/dist/items/breadcrumb.json

@@ -7,12 +7,8 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { getNativeStyleProps } from \"./stylex-props\";\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({ className, style, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.root), className, style)}\n    />\n  );\n}\n\nexport function BreadcrumbList({ className, style, ...props }: ComponentProps<\"ol\">) {\n  return <ol {...props} {...getNativeStyleProps(stylex.props(styles.list), className, style)} />;\n}\n\nexport function BreadcrumbItem({ className, style, ...props }: ComponentProps<\"li\">) {\n  return <li {...props} {...getNativeStyleProps(stylex.props(styles.item), className, style)} />;\n}\n\nexport function BreadcrumbLink({ children, className, style, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a {...props} {...getNativeStyleProps(stylex.props(styles.link), className, style)}>\n      {children}\n    </a>\n  );\n}\n\nexport function BreadcrumbPage({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-current=\"page\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.page), className, style)}\n    />\n  );\n}\n\nexport function BreadcrumbSeparator({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<\"li\"> & { children?: ReactNode }) {\n  return (\n    <li\n      aria-hidden=\"true\"\n      role=\"presentation\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.separator), className, style)}\n    >\n      {children ?? <Icon name=\"chevronRight\" />}\n    </li>\n  );\n}\n\nexport function BreadcrumbEllipsis({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.ellipsis), className, style)}\n    >\n      …\n    </span>\n  );\n}\n",
+      "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",
       "path": "breadcrumb.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

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({\n  className,\n  side = \"incoming\",\n  style,\n  variant = \"default\",\n  xstyle,\n  ...props\n}: BubbleProps) {\n  const resolved = stylex.props(\n    styles.root,\n    styles[side],\n    variant === \"default\" ? styles.variantDefault : styles[variant],\n    xstyle,\n  );\n  return (\n    <div\n      {...props}\n      className={[resolved.className, className].filter(Boolean).join(\" \")}\n      data-side={side}\n      style={{ ...resolved.style, ...style }}\n    />\n  );\n}\n",
+      "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",
       "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  className,\n  children,\n  orientation = \"horizontal\",\n  role,\n  style,\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\n      {...props}\n      data-orientation={orientation}\n      role={role ?? \"group\"}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport function ButtonGroupText({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"span\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.text, xstyle);\n  return (\n    <span\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\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": "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",
       "path": "button-group.tsx"
     }
   ],

package/dist/items/button.json

@@ -3,7 +3,7 @@
   "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  className,\n  disabled,\n  size = \"md\",\n  style,\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 mergedClassName = [stylexProps.className, className].filter(Boolean).join(\" \");\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\n      {...props}\n      className={mergedClassName}\n      disabled={disabled}\n      style={{ ...stylexProps.style, ...style }}\n    >\n      <span {...contentStylexProps}>{children}</span>\n    </ButtonPrimitive>\n  );\n}\n",
+      "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",
       "path": "button.tsx"
     }
   ],

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({ className, style, xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.card, xstyle);\n\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function CardHeader({ className, style, xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.header, xstyle);\n\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function CardTitle({ children, className, style, xstyle, ...props }: HeadingProps) {\n  const stylexProps = stylex.props(styles.title, xstyle);\n\n  return (\n    <h3\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    >\n      {children}\n    </h3>\n  );\n}\n\nexport function CardDescription({ className, style, xstyle, ...props }: ParagraphProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n\n  return (\n    <p\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function CardContent({ className, style, xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.content, xstyle);\n\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function CardFooter({ className, style, xstyle, ...props }: ElementProps) {\n  const stylexProps = stylex.props(styles.footer, xstyle);\n\n  return (\n    <div\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "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",
       "path": "card.tsx"
     }
   ],

package/dist/items/checkbox.json

@@ -7,7 +7,7 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { colorVars, motionVars, radiusVars, sizeVars } 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.fgInverse,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: \"1.5rem\",\n    justifyContent: \"center\",\n    minHeight: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, opacity\",\n    width: \"1.5rem\",\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  checked: { backgroundColor: colorVars.bgActionPrimary, borderColor: colorVars.bgActionPrimary },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    width: \"100%\",\n  },\n});\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Checkbox({ className, style, xstyle, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          xstyle,\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n        );\n        const customClassName = typeof className === \"function\" ? className(state) : className;\n        return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          xstyle,\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n        );\n        const customStyle = typeof style === \"function\" ? style(state) : style;\n        return { ...stylexProps.style, ...customStyle };\n      }}\n    >\n      <CheckboxPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" weight=\"bold\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n",
+      "content": "import { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { colorVars, motionVars, radiusVars, sizeVars } 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.fgInverse,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: \"1.5rem\",\n    justifyContent: \"center\",\n    minHeight: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, opacity\",\n    width: \"1.5rem\",\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  checked: { backgroundColor: colorVars.bgActionPrimary, borderColor: colorVars.bgActionPrimary },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    width: \"100%\",\n  },\n});\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Checkbox({ xstyle, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          xstyle,\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n        );\n        return stylexProps.className;\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          xstyle,\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n        );\n        return stylexProps.style;\n      }}\n    >\n      <CheckboxPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" weight=\"bold\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n",
       "path": "checkbox.tsx"
     }
   ],

package/dist/items/collapsible.json

@@ -7,7 +7,7 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\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    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    minWidth: 0,\n    width: \"100%\",\n  },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    flexShrink: 0,\n    height: sizeVars.controlSm,\n    justifyContent: \"center\",\n    outline: \"none\",\n    padding: 0,\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    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--collapsible-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: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2 },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"transform\",\n  },\n});\n\nexport function Collapsible({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <CollapsiblePrimitive.Root\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function CollapsibleTrigger({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      {children}\n      <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n        <Icon name=\"caretUpDown\" />\n      </span>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function CollapsibleContent({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Panel>) {\n  return (\n    <CollapsiblePrimitive.Panel\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n}\n",
+      "content": "import { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\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    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    minWidth: 0,\n    width: \"100%\",\n  },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    flexShrink: 0,\n    height: sizeVars.controlSm,\n    justifyContent: \"center\",\n    outline: \"none\",\n    padding: 0,\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    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--collapsible-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: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2 },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"transform\",\n  },\n});\n\nexport function Collapsible({ ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <CollapsiblePrimitive.Root\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function CollapsibleTrigger({\n  children,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return sx.style;\n      }}\n    >\n      {children}\n      <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n        <Icon name=\"caretUpDown\" />\n      </span>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function CollapsibleContent({\n  children,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Panel>) {\n  return (\n    <CollapsiblePrimitive.Panel\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return sx.style;\n      }}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n}\n",
       "path": "collapsible.tsx"
     }
   ],

package/dist/items/combobox.json

@@ -7,7 +7,7 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\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  inputGroup: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    height: sizeVars.controlMd,\n    width: \"14rem\",\n    paddingInlineStart: spacingVars.space3,\n    \":focus-within\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  searchIcon: { color: colorVars.fgSecondary, flexShrink: 0 },\n  input: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: \"none\",\n    color: colorVars.fgPrimary,\n    flex: 1,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"100%\",\n    minWidth: 0,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    \"::placeholder\": { color: colorVars.fgTertiary },\n  },\n  inputDisabled: { color: colorVars.fgDisabled, cursor: \"not-allowed\" },\n  trigger: {\n    alignItems: \"center\",\n    alignSelf: \"stretch\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: \"none\",\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    outline: \"none\",\n    width: sizeVars.controlMd,\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    maxHeight: \"min(20rem, var(--available-height))\",\n    minWidth: \"var(--anchor-width)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    padding: spacingVars.space1,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  list: { overflowY: \"auto\", overscrollBehavior: \"contain\" },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    cursor: \"default\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInlineEnd: spacingVars.space3,\n    paddingInlineStart: spacingVars.space8,\n    position: \"relative\",\n    userSelect: \"none\",\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  empty: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    padding: spacingVars.space4,\n    textAlign: \"center\",\n    \":empty\": { padding: 0 },\n  },\n  label: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space2,\n  },\n  separator: {\n    backgroundColor: colorVars.strokeDefault,\n    height: sizeVars.stroke,\n    marginBlock: spacingVars.space1,\n    marginInline: -spacingVars.space1,\n  },\n});\n\nexport const Combobox = ComboboxPrimitive.Root;\nexport const ComboboxCollection = ComboboxPrimitive.Collection;\nexport const ComboboxGroup = ComboboxPrimitive.Group;\n\nexport function ComboboxInput({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Input>) {\n  return (\n    <ComboboxPrimitive.InputGroup {...stylex.props(styles.inputGroup)}>\n      <Icon aria-hidden=\"true\" name=\"search\" {...stylex.props(styles.searchIcon)} />\n      <ComboboxPrimitive.Input\n        {...props}\n        className={(state) => {\n          const sx = stylex.props(styles.input, state.disabled && styles.inputDisabled);\n          return [sx.className, typeof className === \"function\" ? className(state) : className]\n            .filter(Boolean)\n            .join(\" \");\n        }}\n        style={(state) => {\n          const sx = stylex.props(styles.input, state.disabled && styles.inputDisabled);\n          return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n        }}\n      />\n      <ComboboxPrimitive.Trigger\n        aria-label=\"Open options\"\n        className={(state) =>\n          stylex.props(styles.trigger, state.disabled && styles.triggerDisabled).className ?? \"\"\n        }\n        style={(state) =>\n          stylex.props(styles.trigger, state.disabled && styles.triggerDisabled).style\n        }\n      >\n        <Icon aria-hidden=\"true\" name=\"chevronDown\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\ntype ComboboxContentProps = ComponentProps<typeof ComboboxPrimitive.Popup> &\n  Pick<ComponentProps<typeof ComboboxPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    children: ReactNode;\n  };\n\nexport function ComboboxContent({\n  align = \"start\",\n  children,\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  style,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <ComboboxPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return [sx.className, typeof className === \"function\" ? className(state) : className]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n          }}\n        >\n          <ComboboxPrimitive.List {...stylex.props(styles.list)}>{children}</ComboboxPrimitive.List>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Item>) {\n  return (\n    <ComboboxPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <ComboboxPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </ComboboxPrimitive.ItemIndicator>\n      {children}\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxEmpty(props: ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return <ComboboxPrimitive.Empty {...props} {...stylex.props(styles.empty)} />;\n}\n\nexport function ComboboxLabel(props: ComponentProps<typeof ComboboxPrimitive.GroupLabel>) {\n  return <ComboboxPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function ComboboxSeparator(props: ComponentProps<typeof ComboboxPrimitive.Separator>) {\n  return <ComboboxPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
+      "content": "import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\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  inputGroup: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    height: sizeVars.controlMd,\n    width: \"14rem\",\n    paddingInlineStart: spacingVars.space3,\n    \":focus-within\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  searchIcon: { color: colorVars.fgSecondary, flexShrink: 0 },\n  input: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: \"none\",\n    color: colorVars.fgPrimary,\n    flex: 1,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"100%\",\n    minWidth: 0,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    \"::placeholder\": { color: colorVars.fgTertiary },\n  },\n  inputDisabled: { color: colorVars.fgDisabled, cursor: \"not-allowed\" },\n  trigger: {\n    alignItems: \"center\",\n    alignSelf: \"stretch\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: \"none\",\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    outline: \"none\",\n    width: sizeVars.controlMd,\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    maxHeight: \"min(20rem, var(--available-height))\",\n    minWidth: \"var(--anchor-width)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    padding: spacingVars.space1,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  list: { overflowY: \"auto\", overscrollBehavior: \"contain\" },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    cursor: \"default\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInlineEnd: spacingVars.space3,\n    paddingInlineStart: spacingVars.space8,\n    position: \"relative\",\n    userSelect: \"none\",\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  empty: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    padding: spacingVars.space4,\n    textAlign: \"center\",\n    \":empty\": { padding: 0 },\n  },\n  label: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space2,\n  },\n  separator: {\n    backgroundColor: colorVars.strokeDefault,\n    height: sizeVars.stroke,\n    marginBlock: spacingVars.space1,\n    marginInline: -spacingVars.space1,\n  },\n});\n\nexport const Combobox = ComboboxPrimitive.Root;\nexport const ComboboxCollection = ComboboxPrimitive.Collection;\nexport const ComboboxGroup = ComboboxPrimitive.Group;\n\nexport function ComboboxInput({ ...props }: ComponentProps<typeof ComboboxPrimitive.Input>) {\n  return (\n    <ComboboxPrimitive.InputGroup {...stylex.props(styles.inputGroup)}>\n      <Icon aria-hidden=\"true\" name=\"search\" {...stylex.props(styles.searchIcon)} />\n      <ComboboxPrimitive.Input\n        {...props}\n        className={(state) => {\n          const sx = stylex.props(styles.input, state.disabled && styles.inputDisabled);\n          return sx.className;\n        }}\n        style={(state) => {\n          const sx = stylex.props(styles.input, state.disabled && styles.inputDisabled);\n          return sx.style;\n        }}\n      />\n      <ComboboxPrimitive.Trigger\n        aria-label=\"Open options\"\n        className={(state) =>\n          stylex.props(styles.trigger, state.disabled && styles.triggerDisabled).className ?? \"\"\n        }\n        style={(state) =>\n          stylex.props(styles.trigger, state.disabled && styles.triggerDisabled).style\n        }\n      >\n        <Icon aria-hidden=\"true\" name=\"chevronDown\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\ntype ComboboxContentProps = ComponentProps<typeof ComboboxPrimitive.Popup> &\n  Pick<ComponentProps<typeof ComboboxPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    children: ReactNode;\n  };\n\nexport function ComboboxContent({\n  align = \"start\",\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <ComboboxPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.className;\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.style;\n          }}\n        >\n          <ComboboxPrimitive.List {...stylex.props(styles.list)}>{children}</ComboboxPrimitive.List>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  children,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Item>) {\n  return (\n    <ComboboxPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\n    >\n      <ComboboxPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </ComboboxPrimitive.ItemIndicator>\n      {children}\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxEmpty(props: ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return <ComboboxPrimitive.Empty {...props} {...stylex.props(styles.empty)} />;\n}\n\nexport function ComboboxLabel(props: ComponentProps<typeof ComboboxPrimitive.GroupLabel>) {\n  return <ComboboxPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function ComboboxSeparator(props: ComponentProps<typeof ComboboxPrimitive.Separator>) {\n  return <ComboboxPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
       "path": "combobox.tsx"
     }
   ],

package/dist/items/content-row.json

@@ -3,12 +3,8 @@
   "primaryExport": "ContentRow",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\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    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    width: \"100%\",\n  },\n  variantDefault: { backgroundColor: \"transparent\" },\n  muted: { backgroundColor: colorVars.bgSubtle },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlSm, padding: spacingVars.space2 },\n  sm: { gap: spacingVars.space3, minHeight: sizeVars.touchTarget, padding: spacingVars.space3 },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4rem\", padding: spacingVars.space4 },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\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.controlMd,\n    width: sizeVars.controlMd,\n  },\n  mediaavatar: { borderRadius: radiusVars.full },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.touchTarget,\n    width: sizeVars.touchTarget,\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: { alignItems: \"center\", display: \"flex\", flexShrink: 0, gap: spacingVars.space2 },\n});\n\nexport type ContentRowSize = \"default\" | \"sm\" | \"xs\";\nexport type ContentRowVariant = \"default\" | \"muted\" | \"outline\";\n\nexport type ContentRowProps = ComponentProps<\"div\"> & {\n  size?: ContentRowSize;\n  variant?: ContentRowVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ContentRow({\n  className,\n  size = \"default\",\n  style,\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ContentRowProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(\n          styles.root,\n          size === \"default\" ? styles.sizeDefault : styles[size],\n          variant === \"default\" ? styles.variantDefault : styles[variant],\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function ContentRowGroup({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.group), className, style)} />;\n}\n\nexport type ContentRowMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"avatar\" | \"icon\" | \"image\";\n};\n\nexport function ContentRowMedia({\n  className,\n  style,\n  variant = \"icon\",\n  ...props\n}: ContentRowMediaProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(styles.media, styles[`media${variant}`]),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function ContentRowContent({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n\nexport function ContentRowTitle({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.title), className, style)} />;\n}\n\nexport function ContentRowDescription({ className, style, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p {...props} {...getNativeStyleProps(stylex.props(styles.description), className, style)} />\n  );\n}\n\nexport function ContentRowActions({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.actions), className, style)} />\n  );\n}\n",
+      "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    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    width: \"100%\",\n  },\n  variantDefault: { backgroundColor: \"transparent\" },\n  muted: { backgroundColor: colorVars.bgSubtle },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlSm, padding: spacingVars.space2 },\n  sm: { gap: spacingVars.space3, minHeight: sizeVars.touchTarget, padding: spacingVars.space3 },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4rem\", padding: spacingVars.space4 },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\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.controlMd,\n    width: sizeVars.controlMd,\n  },\n  mediaavatar: { borderRadius: radiusVars.full },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.touchTarget,\n    width: sizeVars.touchTarget,\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: { alignItems: \"center\", display: \"flex\", flexShrink: 0, gap: spacingVars.space2 },\n});\n\nexport type ContentRowSize = \"default\" | \"sm\" | \"xs\";\nexport type ContentRowVariant = \"default\" | \"muted\" | \"outline\";\n\nexport type ContentRowProps = ComponentProps<\"div\"> & {\n  size?: ContentRowSize;\n  variant?: ContentRowVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ContentRow({\n  size = \"default\",\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ContentRowProps) {\n  return (\n    <div\n      {...props}\n      {...stylex.props(\n        styles.root,\n        size === \"default\" ? styles.sizeDefault : styles[size],\n        variant === \"default\" ? styles.variantDefault : styles[variant],\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport function ContentRowGroup({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport type ContentRowMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"avatar\" | \"icon\" | \"image\";\n};\n\nexport function ContentRowMedia({ variant = \"icon\", ...props }: ContentRowMediaProps) {\n  return <div {...props} {...stylex.props(styles.media, styles[`media${variant}`])} />;\n}\n\nexport function ContentRowContent({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function ContentRowTitle({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function ContentRowDescription({ ...props }: ComponentProps<\"p\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n\nexport function ContentRowActions({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.actions)} />;\n}\n",
       "path": "content-row.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [