@nuee/registry 0.5.0 → 0.5.1

package/dist/items/accordion.json

@@ -3,7 +3,7 @@
   "primaryExport": "Accordion",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport {\n  colorVars,\n  motionVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0, width: \"100%\" },\n  item: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: sizeVars.stroke,\n  },\n  header: { display: \"flex\", margin: 0 },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    flex: 1,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"space-between\",\n    lineHeight: typographyVars.lineHeightNormal,\n    outline: \"none\",\n    paddingBlock: spacingVars.space4,\n    paddingInline: 0,\n    textAlign: \"start\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { textDecoration: \"underline\", textUnderlineOffset: spacingVars.space1 },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { textDecoration: \"none\" },\n  },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    transform: \"rotate(0deg)\",\n    width: sizeVars.iconMd,\n    \":is([data-panel-open] *)\": { transform: \"rotate(180deg)\" },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--accordion-panel-height)\",\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    opacity: 1,\n    overflow: \"hidden\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"height, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  panelTransitioning: { height: 0, opacity: 0 },\n  panelContent: {\n    paddingBottom: spacingVars.space4,\n    paddingInlineEnd: spacingVars.space6,\n    width: \"100%\",\n  },\n});\n\nexport function Accordion({\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Root>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <AccordionPrimitive.Root\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\nexport function AccordionItem({\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Item>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.item);\n  return (\n    <AccordionPrimitive.Item\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n\nexport function AccordionTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: AccordionPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <AccordionPrimitive.Header {...stylex.props(styles.header)}>\n      <AccordionPrimitive.Trigger\n        {...props}\n        className={(state) => getTriggerStyles(state).className}\n        style={(state) => getTriggerStyles(state).style}\n      >\n        {children}\n        <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n          <CaretDownIcon />\n        </span>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionContent({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Panel>, \"className\" | \"style\">) {\n  function getPanelStyles(state: AccordionPrimitive.Panel.State) {\n    return stylex.props(\n      styles.panel,\n      state.transitionStatus === \"starting\" && styles.panelTransitioning,\n      state.transitionStatus === \"ending\" && styles.panelTransitioning,\n    );\n  }\n  return (\n    <AccordionPrimitive.Panel\n      {...props}\n      className={(state) => getPanelStyles(state).className}\n      style={(state) => getPanelStyles(state).style}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\";\nimport {\n  colorVars,\n  motionVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0, width: \"100%\" },\n  item: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: sizeVars.stroke,\n  },\n  header: { display: \"flex\", margin: 0 },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    flex: 1,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"space-between\",\n    lineHeight: typographyVars.lineHeightNormal,\n    outline: \"none\",\n    paddingBlock: spacingVars.space4,\n    paddingInline: 0,\n    textAlign: \"start\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { textDecoration: \"underline\", textUnderlineOffset: spacingVars.space1 },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { textDecoration: \"none\" },\n  },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    transform: \"rotate(0deg)\",\n    width: sizeVars.iconMd,\n    \":is([data-panel-open] *)\": { transform: \"rotate(180deg)\" },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--accordion-panel-height)\",\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    opacity: 1,\n    overflow: \"hidden\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"height, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  panelTransitioning: { height: 0, opacity: 0 },\n  panelContent: {\n    paddingBottom: spacingVars.space4,\n    paddingInlineEnd: spacingVars.space6,\n    width: \"100%\",\n  },\n});\n\nexport function Accordion({\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Root>, \"className\" | \"style\">) {\n  return <AccordionPrimitive.Root {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function AccordionItem({\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Item>, \"className\" | \"style\">) {\n  return <AccordionPrimitive.Item {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function AccordionTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: AccordionPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <AccordionPrimitive.Header {...stylex.props(styles.header)}>\n      <AccordionPrimitive.Trigger\n        {...props}\n        className={(state) => getTriggerStyles(state).className}\n        style={(state) => getTriggerStyles(state).style}\n      >\n        {children}\n        <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n          <CaretDownIcon />\n        </span>\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nexport function AccordionContent({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof AccordionPrimitive.Panel>, \"className\" | \"style\">) {\n  function getPanelStyles(state: AccordionPrimitive.Panel.State) {\n    return stylex.props(\n      styles.panel,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.panelTransitioning,\n    );\n  }\n  return (\n    <AccordionPrimitive.Panel\n      {...props}\n      className={(state) => getPanelStyles(state).className}\n      style={(state) => getPanelStyles(state).style}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </AccordionPrimitive.Panel>\n  );\n}\n",
       "path": "accordion.tsx"
     }
   ],

package/dist/items/alert-dialog.json

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

package/dist/items/avatar.json

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

package/dist/items/button-group.json

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

package/dist/items/button.json

@@ -3,7 +3,7 @@
   "primaryExport": "Button",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    isolation: \"isolate\",\n    justifyContent: \"center\",\n    lineHeight: typographyVars.lineHeightTight,\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    userSelect: \"none\",\n    whiteSpace: \"nowrap\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n    },\n    \"::before\": {\n      backgroundColor: colorVars.interactionDefault,\n      content: '\"\"',\n      inset: 0,\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      transitionDuration: motionVars.durationFast,\n      transitionProperty: \"background-color\",\n      transitionTimingFunction: motionVars.easingStandard,\n      zIndex: 0,\n    },\n  },\n  solidInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionSolidHover,\n        \":active\": colorVars.interactionSolidPressed,\n      },\n    },\n  },\n  surfaceInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionHover,\n        \":active\": colorVars.interactionPressed,\n      },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: spacingVars.space2,\n    position: \"relative\",\n    zIndex: 1,\n  },\n  iconContent: {\n    gap: 0,\n    // Give icon-only buttons a text baseline without adding visible content.\n    \"::before\": { content: '\"\\\\200b\"' },\n  },\n  primaryContent: { color: colorVars.fgOnActionPrimary },\n  destructiveContent: { color: colorVars.fgOnActionDestructive },\n  disabledContent: { color: colorVars.fgDisabled },\n  primary: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderColor: colorVars.bgActionPrimary,\n    color: colorVars.fgOnActionPrimary,\n  },\n  secondary: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgPrimary,\n  },\n  ghost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n    color: colorVars.fgPrimary,\n  },\n  destructive: {\n    backgroundColor: colorVars.bgActionDestructive,\n    borderColor: colorVars.bgActionDestructive,\n    color: colorVars.fgOnActionDestructive,\n  },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n  },\n  disabledGhost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n  },\n  disabledInteraction: {\n    \"::before\": { backgroundColor: colorVars.interactionDefault },\n  },\n  sm: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: spacingVars.space3,\n  },\n  md: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: spacingVars.space4,\n  },\n  lg: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: spacingVars.space5,\n  },\n  \"icon-xs\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlXs,\n    paddingInline: 0,\n    width: sizeVars.controlXs,\n  },\n  \"icon-sm\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: 0,\n    width: sizeVars.controlSm,\n  },\n  icon: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: 0,\n    width: sizeVars.controlMd,\n  },\n  \"icon-lg\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: 0,\n    width: sizeVars.controlLg,\n  },\n  square: { paddingInline: 0 },\n  circle: { borderRadius: radiusVars.full, paddingInline: 0 },\n  iconSm: { width: sizeVars.controlSm },\n  iconMd: { width: sizeVars.controlMd },\n  iconLg: { width: sizeVars.controlLg },\n});\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"destructive\";\ntype ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\";\n\nexport type ButtonProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\" | \"style\"> & {\n  children: ReactNode;\n  size?: ButtonSize;\n  /** Use an icon size for icon-only buttons, and add an accessible name. */\n  shape?: \"default\" | \"square\" | \"circle\";\n  variant?: ButtonVariant;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Button({\n  children,\n  disabled,\n  size = \"md\",\n  shape = \"default\",\n  variant = \"primary\",\n  xstyle,\n  ...props\n}: ButtonProps) {\n  const isDisabled = Boolean(disabled);\n  const isIconSize = size.startsWith(\"icon\");\n  const hasSolidBackground = variant === \"primary\" || variant === \"destructive\";\n\n  return (\n    <ButtonPrimitive\n      {...props}\n      disabled={disabled}\n      {...stylex.props(\n        styles.root,\n        styles[variant],\n        styles[size],\n        shape !== \"default\" && styles[shape],\n        !isIconSize && shape !== \"default\" && size === \"sm\" && styles.iconSm,\n        !isIconSize && shape !== \"default\" && size === \"md\" && styles.iconMd,\n        !isIconSize && shape !== \"default\" && size === \"lg\" && styles.iconLg,\n        hasSolidBackground ? styles.solidInteraction : styles.surfaceInteraction,\n        isDisabled && styles.disabled,\n        isDisabled && variant === \"ghost\" && styles.disabledGhost,\n        isDisabled && styles.disabledInteraction,\n        xstyle,\n      )}\n    >\n      <span\n        {...stylex.props(\n          styles.content,\n          isIconSize && styles.iconContent,\n          variant === \"primary\" && styles.primaryContent,\n          variant === \"destructive\" && styles.destructiveContent,\n          isDisabled && styles.disabledContent,\n        )}\n      >\n        {children}\n      </span>\n    </ButtonPrimitive>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    isolation: \"isolate\",\n    justifyContent: \"center\",\n    lineHeight: typographyVars.lineHeightTight,\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    userSelect: \"none\",\n    whiteSpace: \"nowrap\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n    },\n    \"::before\": {\n      backgroundColor: colorVars.interactionDefault,\n      content: '\"\"',\n      inset: 0,\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      transitionDuration: motionVars.durationFast,\n      transitionProperty: \"background-color\",\n      transitionTimingFunction: motionVars.easingStandard,\n      zIndex: 0,\n    },\n  },\n  solidInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionSolidHover,\n        \":active\": colorVars.interactionSolidPressed,\n      },\n    },\n  },\n  surfaceInteraction: {\n    \"::before\": {\n      backgroundColor: {\n        default: colorVars.interactionDefault,\n        \":hover\": colorVars.interactionHover,\n        \":active\": colorVars.interactionPressed,\n      },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    gap: spacingVars.space2,\n    position: \"relative\",\n    zIndex: 1,\n  },\n  iconContent: {\n    gap: 0,\n    // Give icon-only buttons a text baseline without adding visible content.\n    \"::before\": { content: '\"\\\\200b\"' },\n  },\n  primary: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderColor: colorVars.bgActionPrimary,\n    color: colorVars.fgOnActionPrimary,\n  },\n  secondary: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgPrimary,\n  },\n  ghost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n    color: colorVars.fgPrimary,\n  },\n  destructive: {\n    backgroundColor: colorVars.bgActionDestructive,\n    borderColor: colorVars.bgActionDestructive,\n    color: colorVars.fgOnActionDestructive,\n  },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    \"::before\": { backgroundColor: colorVars.interactionDefault },\n  },\n  disabledGhost: {\n    backgroundColor: colorVars.interactionDefault,\n    borderColor: colorVars.interactionDefault,\n  },\n  sm: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: spacingVars.space3,\n  },\n  md: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: spacingVars.space4,\n  },\n  lg: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: spacingVars.space5,\n  },\n  \"icon-xs\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlXs,\n    paddingInline: 0,\n    width: sizeVars.controlXs,\n  },\n  \"icon-sm\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: 0,\n    width: sizeVars.controlSm,\n  },\n  icon: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: 0,\n    width: sizeVars.controlMd,\n  },\n  \"icon-lg\": {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlLg,\n    paddingInline: 0,\n    width: sizeVars.controlLg,\n  },\n  square: { paddingInline: 0 },\n  circle: { borderRadius: radiusVars.full, paddingInline: 0 },\n  iconSm: { width: sizeVars.controlSm },\n  iconMd: { width: sizeVars.controlMd },\n  iconLg: { width: sizeVars.controlLg },\n});\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"destructive\";\ntype ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\";\n\nexport type ButtonProps = Omit<ComponentProps<typeof ButtonPrimitive>, \"className\" | \"style\"> & {\n  children: ReactNode;\n  size?: ButtonSize;\n  /** Use an icon size for icon-only buttons, and add an accessible name. */\n  shape?: \"default\" | \"square\" | \"circle\";\n  variant?: ButtonVariant;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Button({\n  children,\n  disabled,\n  size = \"md\",\n  shape = \"default\",\n  variant = \"primary\",\n  xstyle,\n  ...props\n}: ButtonProps) {\n  const isIconSize = size.startsWith(\"icon\");\n  const hasSolidBackground = variant === \"primary\" || variant === \"destructive\";\n\n  return (\n    <ButtonPrimitive\n      {...props}\n      disabled={disabled}\n      {...stylex.props(\n        styles.root,\n        styles[variant],\n        styles[size],\n        shape !== \"default\" && styles[shape],\n        !isIconSize && shape !== \"default\" && size === \"sm\" && styles.iconSm,\n        !isIconSize && shape !== \"default\" && size === \"md\" && styles.iconMd,\n        !isIconSize && shape !== \"default\" && size === \"lg\" && styles.iconLg,\n        hasSolidBackground ? styles.solidInteraction : styles.surfaceInteraction,\n        disabled && styles.disabled,\n        disabled && variant === \"ghost\" && styles.disabledGhost,\n        xstyle,\n      )}\n    >\n      <span {...stylex.props(styles.content, isIconSize && styles.iconContent)}>{children}</span>\n    </ButtonPrimitive>\n  );\n}\n",
       "path": "button.tsx"
     },
     {

package/dist/items/calendar.json

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

package/dist/items/collapsible.json

@@ -3,7 +3,7 @@
   "primaryExport": "Collapsible",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { ArrowsDownUpIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\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.fontFamilyBody,\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    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlSm,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":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)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\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  },\n});\n\nexport function Collapsible({\n  ...props\n}: Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, \"className\" | \"style\">) {\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}: Omit<ComponentProps<typeof CollapsiblePrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: CollapsiblePrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <CollapsiblePrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n        <ArrowsDownUpIcon />\n      </span>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function CollapsibleContent({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof CollapsiblePrimitive.Panel>, \"className\" | \"style\">) {\n  function getPanelStyles(state: CollapsiblePrimitive.Panel.State) {\n    return stylex.props(\n      styles.panel,\n      state.transitionStatus === \"starting\" && styles.panelTransitioning,\n      state.transitionStatus === \"ending\" && styles.panelTransitioning,\n    );\n  }\n  return (\n    <CollapsiblePrimitive.Panel\n      {...props}\n      className={(state) => getPanelStyles(state).className}\n      style={(state) => getPanelStyles(state).style}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { ArrowsDownUpIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\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.fontFamilyBody,\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    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlSm,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":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)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\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  },\n});\n\nexport function Collapsible({\n  ...props\n}: Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, \"className\" | \"style\">) {\n  return <CollapsiblePrimitive.Root {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function CollapsibleTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof CollapsiblePrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: CollapsiblePrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <CollapsiblePrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n        <ArrowsDownUpIcon />\n      </span>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function CollapsibleContent({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof CollapsiblePrimitive.Panel>, \"className\" | \"style\">) {\n  function getPanelStyles(state: CollapsiblePrimitive.Panel.State) {\n    return stylex.props(\n      styles.panel,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.panelTransitioning,\n    );\n  }\n  return (\n    <CollapsiblePrimitive.Panel\n      {...props}\n      className={(state) => getPanelStyles(state).className}\n      style={(state) => getPanelStyles(state).style}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n}\n",
       "path": "collapsible.tsx"
     }
   ],

package/dist/items/combobox.json

@@ -3,7 +3,7 @@
   "primaryExport": "Combobox",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon, CheckIcon, MagnifyingGlassIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\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    paddingInlineStart: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"14rem\",\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.fontFamilyBody,\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    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlMd,\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n  positioner: { zIndex: layerVars.popup },\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\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: `calc(${spacingVars.space1} * -1)`,\n  },\n});\n\nexport const Combobox = ComboboxPrimitive.Root;\nexport const ComboboxCollection = ComboboxPrimitive.Collection;\nexport const ComboboxGroup = ComboboxPrimitive.Group;\n\nexport function ComboboxInput({\n  ...props\n}: Omit<ComponentProps<typeof ComboboxPrimitive.Input>, \"className\" | \"style\">) {\n  function getInputStyles(state: ComboboxPrimitive.Input.State) {\n    return stylex.props(styles.input, state.disabled && styles.inputDisabled);\n  }\n  return (\n    <ComboboxPrimitive.InputGroup {...stylex.props(styles.inputGroup)}>\n      <MagnifyingGlassIcon aria-hidden=\"true\" {...stylex.props(styles.searchIcon)} />\n      <ComboboxPrimitive.Input\n        {...props}\n        className={(state) => getInputStyles(state).className}\n        style={(state) => getInputStyles(state).style}\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        <CaretDownIcon aria-hidden=\"true\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\ntype ComboboxContentProps = Omit<\n  ComponentProps<typeof ComboboxPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\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  function getPopupStyles(state: ComboboxPrimitive.Popup.State) {\n    return 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  }\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) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\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}: Omit<ComponentProps<typeof ComboboxPrimitive.Item>, \"className\" | \"style\">) {\n  function getItemStyles(state: ComboboxPrimitive.Item.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <ComboboxPrimitive.Item\n      {...props}\n      className={(state) => getItemStyles(state).className}\n      style={(state) => getItemStyles(state).style}\n    >\n      <ComboboxPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" />\n      </ComboboxPrimitive.ItemIndicator>\n      {children}\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxEmpty(\n  props: Omit<ComponentProps<typeof ComboboxPrimitive.Empty>, \"className\" | \"style\">,\n) {\n  return <ComboboxPrimitive.Empty {...props} {...stylex.props(styles.empty)} />;\n}\n\nexport function ComboboxLabel(\n  props: Omit<ComponentProps<typeof ComboboxPrimitive.GroupLabel>, \"className\" | \"style\">,\n) {\n  return <ComboboxPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function ComboboxSeparator(\n  props: Omit<ComponentProps<typeof ComboboxPrimitive.Separator>, \"className\" | \"style\">,\n) {\n  return <ComboboxPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
+      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon, CheckIcon, MagnifyingGlassIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\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    paddingInlineStart: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"14rem\",\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.fontFamilyBody,\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    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlMd,\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n  positioner: { zIndex: layerVars.popup },\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\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: `calc(${spacingVars.space1} * -1)`,\n  },\n});\n\nexport const Combobox = ComboboxPrimitive.Root;\nexport const ComboboxCollection = ComboboxPrimitive.Collection;\nexport const ComboboxGroup = ComboboxPrimitive.Group;\n\nexport function ComboboxInput({\n  ...props\n}: Omit<ComponentProps<typeof ComboboxPrimitive.Input>, \"className\" | \"style\">) {\n  function getInputStyles(state: ComboboxPrimitive.Input.State) {\n    return stylex.props(styles.input, state.disabled && styles.inputDisabled);\n  }\n  function getTriggerStyles(state: ComboboxPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n\n  return (\n    <ComboboxPrimitive.InputGroup {...stylex.props(styles.inputGroup)}>\n      <MagnifyingGlassIcon aria-hidden=\"true\" {...stylex.props(styles.searchIcon)} />\n      <ComboboxPrimitive.Input\n        {...props}\n        className={(state) => getInputStyles(state).className}\n        style={(state) => getInputStyles(state).style}\n      />\n      <ComboboxPrimitive.Trigger\n        aria-label=\"Open options\"\n        className={(state) => getTriggerStyles(state).className ?? \"\"}\n        style={(state) => getTriggerStyles(state).style}\n      >\n        <CaretDownIcon aria-hidden=\"true\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\ntype ComboboxContentProps = Omit<\n  ComponentProps<typeof ComboboxPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\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  function getPopupStyles(state: ComboboxPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n    );\n  }\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) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\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}: Omit<ComponentProps<typeof ComboboxPrimitive.Item>, \"className\" | \"style\">) {\n  function getItemStyles(state: ComboboxPrimitive.Item.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <ComboboxPrimitive.Item\n      {...props}\n      className={(state) => getItemStyles(state).className}\n      style={(state) => getItemStyles(state).style}\n    >\n      <ComboboxPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" />\n      </ComboboxPrimitive.ItemIndicator>\n      {children}\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxEmpty(\n  props: Omit<ComponentProps<typeof ComboboxPrimitive.Empty>, \"className\" | \"style\">,\n) {\n  return <ComboboxPrimitive.Empty {...props} {...stylex.props(styles.empty)} />;\n}\n\nexport function ComboboxLabel(\n  props: Omit<ComponentProps<typeof ComboboxPrimitive.GroupLabel>, \"className\" | \"style\">,\n) {\n  return <ComboboxPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function ComboboxSeparator(\n  props: Omit<ComponentProps<typeof ComboboxPrimitive.Separator>, \"className\" | \"style\">,\n) {\n  return <ComboboxPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
       "path": "combobox.tsx"
     }
   ],

package/dist/items/dialog.json

@@ -3,7 +3,7 @@
   "primaryExport": "Dialog",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: colorVars.bgOverlay,\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.modalBackdrop,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: layerVars.modal,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: sizeVars.contentMd,\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  close: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.touchTarget,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingInlineEnd: spacingVars.space8,\n  },\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 Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\ntype DialogContentProps = Omit<\n  ComponentProps<typeof DialogPrimitive.Popup>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  /** Accessible name for the optional close button. @default \"Close\" */\n  closeLabel?: string;\n  showCloseButton?: boolean;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DialogContent({\n  children,\n  closeLabel = \"Close\",\n  showCloseButton = true,\n  xstyle,\n  ...props\n}: DialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <DialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DialogPrimitive.Popup\n          {...props}\n          className={stylexProps.className}\n          style={stylexProps.style}\n        >\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close aria-label={closeLabel} {...stylex.props(styles.close)}>\n              <XIcon aria-hidden=\"true\" />\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Viewport>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogHeader({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DialogFooter({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n\nexport function DialogTitle({\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Title>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DialogPrimitive.Title {...props} className={stylexProps.className} style={stylexProps.style} />\n  );\n}\n\nexport function DialogDescription({\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Description>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: colorVars.bgOverlay,\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.modalBackdrop,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: layerVars.modal,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: sizeVars.contentMd,\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  close: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.touchTarget,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingInlineEnd: spacingVars.space8,\n  },\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 Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\ntype DialogContentProps = Omit<\n  ComponentProps<typeof DialogPrimitive.Popup>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  /** Accessible name for the optional close button. @default \"Close\" */\n  closeLabel?: string;\n  showCloseButton?: boolean;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DialogContent({\n  children,\n  closeLabel = \"Close\",\n  showCloseButton = true,\n  xstyle,\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <DialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DialogPrimitive.Popup {...props} {...stylex.props(styles.popup, xstyle)}>\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close aria-label={closeLabel} {...stylex.props(styles.close)}>\n              <XIcon aria-hidden=\"true\" />\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Viewport>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogHeader({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DialogFooter({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n\nexport function DialogTitle({\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Title>, \"className\" | \"style\">) {\n  return <DialogPrimitive.Title {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function DialogDescription({\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Description>, \"className\" | \"style\">) {\n  return <DialogPrimitive.Description {...props} {...stylex.props(styles.description)} />;\n}\n",
       "path": "dialog.tsx"
     }
   ],

package/dist/items/drawer.json

@@ -3,7 +3,7 @@
   "primaryExport": "Drawer",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, useContext } from \"react\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  overlay: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: colorVars.bgOverlay,\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.modalBackdrop,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  overlayTransparent: { backdropFilter: \"none\", backgroundColor: \"transparent\" },\n  viewport: { inset: 0, position: \"fixed\", zIndex: layerVars.modal },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    minHeight: 0,\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    willChange: \"transform\",\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  verticalPopup: {\n    left: 0,\n    marginInline: \"auto\",\n    maxHeight: \"calc(100dvh - 6rem)\",\n    right: 0,\n    width: \"100%\",\n  },\n  downPopup: {\n    borderRadius: `${radiusVars.xl} ${radiusVars.xl} 0 0`,\n    bottom: 0,\n    minHeight: \"50dvh\",\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(0, 100%, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(0, 24%, 0)\",\n      },\n    },\n  },\n  upPopup: {\n    borderRadius: `0 0 ${radiusVars.xl} ${radiusVars.xl}`,\n    minHeight: \"50dvh\",\n    top: 0,\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(0, -100%, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(0, -24%, 0)\",\n      },\n    },\n  },\n  horizontalPopup: {\n    bottom: 0,\n    maxWidth: sizeVars.contentSm,\n    top: 0,\n    width: \"75vw\",\n  },\n  leftPopup: {\n    borderRadius: `0 ${radiusVars.xl} ${radiusVars.xl} 0`,\n    left: 0,\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(-100%, 0, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(-24%, 0, 0)\",\n      },\n    },\n  },\n  rightPopup: {\n    borderRadius: `${radiusVars.xl} 0 0 ${radiusVars.xl}`,\n    right: 0,\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(100%, 0, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(24%, 0, 0)\",\n      },\n    },\n  },\n  content: { display: \"flex\", flex: 1, flexDirection: \"column\", minHeight: 0 },\n  swipeHandle: {\n    alignSelf: \"center\",\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    flexShrink: 0,\n    height: spacingVars.space1,\n    marginBlock: spacingVars.space2,\n    width: spacingVars.space10,\n  },\n  horizontalSwipeHandle: {\n    height: spacingVars.space10,\n    marginBlock: 0,\n    position: \"absolute\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    width: spacingVars.space1,\n  },\n  upSwipeHandle: {\n    bottom: spacingVars.space2,\n    left: 0,\n    marginBlock: 0,\n    marginInline: \"auto\",\n    position: \"absolute\",\n    right: 0,\n  },\n  leftSwipeHandle: { right: spacingVars.space2 },\n  rightSwipeHandle: { left: spacingVars.space2 },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingBlock: spacingVars.space6,\n    paddingBlockEnd: spacingVars.space2,\n    paddingInline: spacingVars.space6,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-start\",\n    paddingBlock: spacingVars.space6,\n    paddingBlockStart: spacingVars.space2,\n    paddingInline: spacingVars.space6,\n  },\n  sideFooter: {\n    \"@media (max-width: 40rem)\": { justifyContent: \"center\" },\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\ntype DrawerContextValue = {\n  overlay: DrawerOverlayMode;\n  showSwipeHandle: boolean;\n  swipeDirection: DrawerSwipeDirection;\n};\n\nexport type DrawerOverlayMode = \"visible\" | \"transparent\" | \"none\";\nexport type DrawerSwipeDirection = \"down\" | \"up\" | \"left\" | \"right\";\n\nconst DrawerContext = createContext<DrawerContextValue>({\n  overlay: \"visible\",\n  showSwipeHandle: false,\n  swipeDirection: \"down\",\n});\n\nexport type DrawerProps = Omit<\n  ComponentProps<typeof DrawerPrimitive.Root>,\n  \"swipeDirection\" | \"className\" | \"style\"\n> & {\n  /** Controls the backdrop behind the Drawer. */\n  overlay?: DrawerOverlayMode;\n  showSwipeHandle?: boolean;\n  swipeDirection?: DrawerSwipeDirection;\n};\n\nexport function Drawer({\n  overlay = \"visible\",\n  showSwipeHandle = false,\n  swipeDirection = \"down\",\n  ...props\n}: DrawerProps) {\n  return (\n    <DrawerContext.Provider value={{ overlay, showSwipeHandle, swipeDirection }}>\n      <DrawerPrimitive.Root {...props} swipeDirection={swipeDirection} />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerClose = DrawerPrimitive.Close;\nexport const DrawerPortal = DrawerPrimitive.Portal;\n\ntype DrawerOverlayProps = Omit<\n  ComponentProps<typeof DrawerPrimitive.Backdrop>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DrawerOverlay({ xstyle, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Backdrop\n      {...props}\n      data-slot=\"drawer-overlay\"\n      {...stylex.props(styles.overlay, xstyle)}\n    />\n  );\n}\n\ntype DrawerSwipeHandleProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DrawerSwipeHandle({ xstyle, ...props }: DrawerSwipeHandleProps) {\n  const { swipeDirection } = useContext(DrawerContext);\n  const isHorizontal = swipeDirection === \"left\" || swipeDirection === \"right\";\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"drawer-swipe-handle\"\n      {...props}\n      {...stylex.props(\n        styles.swipeHandle,\n        isHorizontal && styles.horizontalSwipeHandle,\n        swipeDirection === \"up\" && styles.upSwipeHandle,\n        swipeDirection === \"left\" && styles.leftSwipeHandle,\n        swipeDirection === \"right\" && styles.rightSwipeHandle,\n        xstyle,\n      )}\n    />\n  );\n}\n\ntype DrawerContentProps = Omit<\n  ComponentProps<typeof DrawerPrimitive.Popup>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nfunction getDrawerPopupStylexProps(\n  swipeDirection: DrawerSwipeDirection,\n  xstyle?: stylex.StyleXStyles,\n) {\n  if (swipeDirection === \"right\") {\n    return stylex.props(styles.popup, styles.horizontalPopup, styles.rightPopup, xstyle);\n  }\n  if (swipeDirection === \"left\") {\n    return stylex.props(styles.popup, styles.horizontalPopup, styles.leftPopup, xstyle);\n  }\n  if (swipeDirection === \"up\") {\n    return stylex.props(styles.popup, styles.verticalPopup, styles.upPopup, xstyle);\n  }\n\n  return stylex.props(styles.popup, styles.verticalPopup, styles.downPopup, xstyle);\n}\n\nexport function DrawerContent({ children, xstyle, ...props }: DrawerContentProps) {\n  const { overlay, showSwipeHandle, swipeDirection } = useContext(DrawerContext);\n\n  return (\n    <DrawerPortal>\n      {overlay === \"none\" ? null : (\n        <DrawerOverlay xstyle={overlay === \"transparent\" ? styles.overlayTransparent : undefined} />\n      )}\n      <DrawerPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DrawerPrimitive.Popup\n          {...props}\n          data-slot=\"drawer-popup\"\n          {...getDrawerPopupStylexProps(swipeDirection, xstyle)}\n        >\n          {showSwipeHandle ? <DrawerSwipeHandle /> : null}\n          <DrawerPrimitive.Content {...stylex.props(styles.content)}>\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DrawerFooter({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  const { swipeDirection } = useContext(DrawerContext);\n  const isSideDrawer = swipeDirection === \"left\" || swipeDirection === \"right\";\n\n  return (\n    <div {...props} {...stylex.props(styles.footer, isSideDrawer && styles.sideFooter, xstyle)} />\n  );\n}\n\nexport function DrawerTitle({\n  ...props\n}: Omit<ComponentProps<typeof DrawerPrimitive.Title>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DrawerPrimitive.Title {...props} className={stylexProps.className} style={stylexProps.style} />\n  );\n}\n\nexport function DrawerDescription({\n  ...props\n}: Omit<ComponentProps<typeof DrawerPrimitive.Description>, \"className\" | \"style\">) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <DrawerPrimitive.Description\n      {...props}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, useContext } from \"react\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  overlay: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: colorVars.bgOverlay,\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.modalBackdrop,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  overlayTransparent: { backdropFilter: \"none\", backgroundColor: \"transparent\" },\n  viewport: { inset: 0, position: \"fixed\", zIndex: layerVars.modal },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    flexDirection: \"column\",\n    minHeight: 0,\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    willChange: \"transform\",\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-ending-style])\": { transitionDuration: motionVars.durationInstant },\n    },\n  },\n  verticalPopup: {\n    left: 0,\n    marginInline: \"auto\",\n    maxHeight: \"calc(100dvh - 6rem)\",\n    right: 0,\n    width: \"100%\",\n  },\n  downPopup: {\n    borderRadius: `${radiusVars.xl} ${radiusVars.xl} 0 0`,\n    bottom: 0,\n    minHeight: \"50dvh\",\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(0, 100%, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(0, 24%, 0)\",\n      },\n    },\n  },\n  upPopup: {\n    borderRadius: `0 0 ${radiusVars.xl} ${radiusVars.xl}`,\n    minHeight: \"50dvh\",\n    top: 0,\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(0, -100%, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(0, -24%, 0)\",\n      },\n    },\n  },\n  horizontalPopup: {\n    bottom: 0,\n    maxWidth: sizeVars.contentSm,\n    top: 0,\n    width: \"75vw\",\n  },\n  leftPopup: {\n    borderRadius: `0 ${radiusVars.xl} ${radiusVars.xl} 0`,\n    left: 0,\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(-100%, 0, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(-24%, 0, 0)\",\n      },\n    },\n  },\n  rightPopup: {\n    borderRadius: `${radiusVars.xl} 0 0 ${radiusVars.xl}`,\n    right: 0,\n    transform:\n      \"translate3d(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px), 0)\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"translate3d(100%, 0, 0)\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style], [data-ending-style])\": {\n        transform: \"translate3d(24%, 0, 0)\",\n      },\n    },\n  },\n  content: { display: \"flex\", flex: 1, flexDirection: \"column\", minHeight: 0 },\n  swipeHandle: {\n    alignSelf: \"center\",\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    flexShrink: 0,\n    height: spacingVars.space1,\n    marginBlock: spacingVars.space2,\n    width: spacingVars.space10,\n  },\n  horizontalSwipeHandle: {\n    height: spacingVars.space10,\n    marginBlock: 0,\n    position: \"absolute\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    width: spacingVars.space1,\n  },\n  upSwipeHandle: {\n    bottom: spacingVars.space2,\n    left: 0,\n    marginBlock: 0,\n    marginInline: \"auto\",\n    position: \"absolute\",\n    right: 0,\n  },\n  leftSwipeHandle: { right: spacingVars.space2 },\n  rightSwipeHandle: { left: spacingVars.space2 },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingBlock: spacingVars.space6,\n    paddingBlockEnd: spacingVars.space2,\n    paddingInline: spacingVars.space6,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-start\",\n    paddingBlock: spacingVars.space6,\n    paddingBlockStart: spacingVars.space2,\n    paddingInline: spacingVars.space6,\n  },\n  sideFooter: {\n    \"@media (max-width: 40rem)\": { justifyContent: \"center\" },\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\ntype DrawerContextValue = {\n  overlay: DrawerOverlayMode;\n  showSwipeHandle: boolean;\n  swipeDirection: DrawerSwipeDirection;\n};\n\nexport type DrawerOverlayMode = \"visible\" | \"transparent\" | \"none\";\nexport type DrawerSwipeDirection = \"down\" | \"up\" | \"left\" | \"right\";\n\nconst DrawerContext = createContext<DrawerContextValue>({\n  overlay: \"visible\",\n  showSwipeHandle: false,\n  swipeDirection: \"down\",\n});\n\nexport type DrawerProps = Omit<\n  ComponentProps<typeof DrawerPrimitive.Root>,\n  \"swipeDirection\" | \"className\" | \"style\"\n> & {\n  /** Controls the backdrop behind the Drawer. */\n  overlay?: DrawerOverlayMode;\n  showSwipeHandle?: boolean;\n  swipeDirection?: DrawerSwipeDirection;\n};\n\nexport function Drawer({\n  overlay = \"visible\",\n  showSwipeHandle = false,\n  swipeDirection = \"down\",\n  ...props\n}: DrawerProps) {\n  return (\n    <DrawerContext.Provider value={{ overlay, showSwipeHandle, swipeDirection }}>\n      <DrawerPrimitive.Root {...props} swipeDirection={swipeDirection} />\n    </DrawerContext.Provider>\n  );\n}\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerClose = DrawerPrimitive.Close;\nexport const DrawerPortal = DrawerPrimitive.Portal;\n\ntype DrawerOverlayProps = Omit<\n  ComponentProps<typeof DrawerPrimitive.Backdrop>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DrawerOverlay({ xstyle, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Backdrop\n      {...props}\n      data-slot=\"drawer-overlay\"\n      {...stylex.props(styles.overlay, xstyle)}\n    />\n  );\n}\n\ntype DrawerSwipeHandleProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DrawerSwipeHandle({ xstyle, ...props }: DrawerSwipeHandleProps) {\n  const { swipeDirection } = useContext(DrawerContext);\n  const isHorizontal = swipeDirection === \"left\" || swipeDirection === \"right\";\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"drawer-swipe-handle\"\n      {...props}\n      {...stylex.props(\n        styles.swipeHandle,\n        isHorizontal && styles.horizontalSwipeHandle,\n        swipeDirection === \"up\" && styles.upSwipeHandle,\n        swipeDirection === \"left\" && styles.leftSwipeHandle,\n        swipeDirection === \"right\" && styles.rightSwipeHandle,\n        xstyle,\n      )}\n    />\n  );\n}\n\ntype DrawerContentProps = Omit<\n  ComponentProps<typeof DrawerPrimitive.Popup>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DrawerContent({ children, xstyle, ...props }: DrawerContentProps) {\n  const { overlay, showSwipeHandle, swipeDirection } = useContext(DrawerContext);\n  const isHorizontal = swipeDirection === \"left\" || swipeDirection === \"right\";\n\n  return (\n    <DrawerPortal>\n      {overlay === \"none\" ? null : (\n        <DrawerOverlay xstyle={overlay === \"transparent\" ? styles.overlayTransparent : undefined} />\n      )}\n      <DrawerPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DrawerPrimitive.Popup\n          {...props}\n          data-slot=\"drawer-popup\"\n          {...stylex.props(\n            styles.popup,\n            isHorizontal ? styles.horizontalPopup : styles.verticalPopup,\n            styles[`${swipeDirection}Popup`],\n            xstyle,\n          )}\n        >\n          {showSwipeHandle ? <DrawerSwipeHandle /> : null}\n          <DrawerPrimitive.Content {...stylex.props(styles.content)}>\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DrawerFooter({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & { xstyle?: stylex.StyleXStyles }) {\n  const { swipeDirection } = useContext(DrawerContext);\n  const isSideDrawer = swipeDirection === \"left\" || swipeDirection === \"right\";\n\n  return (\n    <div {...props} {...stylex.props(styles.footer, isSideDrawer && styles.sideFooter, xstyle)} />\n  );\n}\n\nexport function DrawerTitle({\n  ...props\n}: Omit<ComponentProps<typeof DrawerPrimitive.Title>, \"className\" | \"style\">) {\n  return <DrawerPrimitive.Title {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function DrawerDescription({\n  ...props\n}: Omit<ComponentProps<typeof DrawerPrimitive.Description>, \"className\" | \"style\">) {\n  return <DrawerPrimitive.Description {...props} {...stylex.props(styles.description)} />;\n}\n",
       "path": "drawer.tsx"
     }
   ],

package/dist/items/dropdown-menu.json

@@ -3,7 +3,7 @@
   "primaryExport": "DropdownMenu",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretRightIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: layerVars.popup },\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    minWidth: \"12rem\",\n    outline: \"none\",\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    position: \"relative\",\n    userSelect: \"none\",\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  inset: { paddingInlineStart: spacingVars.space8 },\n  destructive: { color: colorVars.fgFeedbackError },\n  choiceItem: { paddingInlineStart: spacingVars.space8 },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  radioDot: {\n    backgroundColor: \"currentColor\",\n    borderRadius: radiusVars.full,\n    height: spacingVars.space2,\n    width: spacingVars.space2,\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  },\n  shortcut: {\n    color: colorVars.fgTertiary,\n    fontSize: typographyVars.fontSizeXs,\n    marginInlineStart: \"auto\",\n  },\n  subIcon: { marginInlineStart: \"auto\" },\n});\n\nexport const DropdownMenu = MenuPrimitive.Root;\nexport const DropdownMenuTrigger = MenuPrimitive.Trigger;\nexport const DropdownMenuGroup = MenuPrimitive.Group;\nexport const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\nexport const DropdownMenuSub = MenuPrimitive.SubmenuRoot;\n\ntype DropdownMenuContentProps = Omit<\n  ComponentProps<typeof MenuPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<\n    ComponentProps<typeof MenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >;\n\nexport function DropdownMenuContent({\n  align = \"start\",\n  alignOffset,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: DropdownMenuContentProps) {\n  function getPopupStyles(state: MenuPrimitive.Popup.State) {\n    return 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  }\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <MenuPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\ntype DropdownMenuItemProps = Omit<\n  ComponentProps<typeof MenuPrimitive.Item>,\n  \"className\" | \"style\"\n> & {\n  destructive?: boolean;\n  inset?: boolean;\n};\n\nexport function DropdownMenuItem({\n  destructive = false,\n  inset = false,\n  ...props\n}: DropdownMenuItemProps) {\n  function getItemStyles(state: MenuPrimitive.Item.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n      inset && styles.inset,\n      destructive && styles.destructive,\n    );\n  }\n  return (\n    <MenuPrimitive.Item\n      {...props}\n      className={(state) => getItemStyles(state).className}\n      style={(state) => getItemStyles(state).style}\n    />\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.CheckboxItem>, \"className\" | \"style\">) {\n  function getCheckboxItemStyles(state: MenuPrimitive.CheckboxItem.State) {\n    return stylex.props(\n      styles.item,\n      styles.choiceItem,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <MenuPrimitive.CheckboxItem\n      {...props}\n      className={(state) => getCheckboxItemStyles(state).className}\n      style={(state) => getCheckboxItemStyles(state).style}\n    >\n      <MenuPrimitive.CheckboxItemIndicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.RadioItem>, \"className\" | \"style\">) {\n  function getRadioItemStyles(state: MenuPrimitive.RadioItem.State) {\n    return stylex.props(\n      styles.item,\n      styles.choiceItem,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <MenuPrimitive.RadioItem\n      {...props}\n      className={(state) => getRadioItemStyles(state).className}\n      style={(state) => getRadioItemStyles(state).style}\n    >\n      <MenuPrimitive.RadioItemIndicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.radioDot)} />\n      </MenuPrimitive.RadioItemIndicator>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({\n  inset = false,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.GroupLabel>, \"className\" | \"style\"> & {\n  inset?: boolean;\n}) {\n  const sx = stylex.props(styles.label, inset && styles.inset);\n  return <MenuPrimitive.GroupLabel {...props} className={sx.className} style={sx.style} />;\n}\n\nexport function DropdownMenuSeparator(\n  props: Omit<ComponentProps<typeof MenuPrimitive.Separator>, \"className\" | \"style\">,\n) {\n  return <MenuPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n\nexport function DropdownMenuShortcut({\n  children,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\"> & { children: ReactNode }) {\n  return (\n    <span {...props} {...stylex.props(styles.shortcut)}>\n      {children}\n    </span>\n  );\n}\n\nexport function DropdownMenuSubTrigger({\n  children,\n  inset = false,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.SubmenuTrigger>, \"className\" | \"style\"> & {\n  inset?: boolean;\n}) {\n  function getSubmenuTriggerStyles(state: MenuPrimitive.SubmenuTrigger.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n      inset && styles.inset,\n    );\n  }\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      {...props}\n      className={(state) => getSubmenuTriggerStyles(state).className}\n      style={(state) => getSubmenuTriggerStyles(state).style}\n    >\n      {children}\n      <CaretRightIcon aria-hidden=\"true\" {...stylex.props(styles.subIcon)} />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport const DropdownMenuSubContent = DropdownMenuContent;\n",
+      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretRightIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: layerVars.popup },\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    minWidth: \"12rem\",\n    outline: \"none\",\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    position: \"relative\",\n    userSelect: \"none\",\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  inset: { paddingInlineStart: spacingVars.space8 },\n  destructive: { color: colorVars.fgFeedbackError },\n  choiceItem: { paddingInlineStart: spacingVars.space8 },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  radioDot: {\n    backgroundColor: \"currentColor\",\n    borderRadius: radiusVars.full,\n    height: spacingVars.space2,\n    width: spacingVars.space2,\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  },\n  shortcut: {\n    color: colorVars.fgTertiary,\n    fontSize: typographyVars.fontSizeXs,\n    marginInlineStart: \"auto\",\n  },\n  subIcon: { marginInlineStart: \"auto\" },\n});\n\nexport const DropdownMenu = MenuPrimitive.Root;\nexport const DropdownMenuTrigger = MenuPrimitive.Trigger;\nexport const DropdownMenuGroup = MenuPrimitive.Group;\nexport const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\nexport const DropdownMenuSub = MenuPrimitive.SubmenuRoot;\n\ntype DropdownMenuContentProps = Omit<\n  ComponentProps<typeof MenuPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<\n    ComponentProps<typeof MenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >;\n\nexport function DropdownMenuContent({\n  align = \"start\",\n  alignOffset,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: DropdownMenuContentProps) {\n  function getPopupStyles(state: MenuPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n    );\n  }\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <MenuPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\ntype DropdownMenuItemProps = Omit<\n  ComponentProps<typeof MenuPrimitive.Item>,\n  \"className\" | \"style\"\n> & {\n  destructive?: boolean;\n  inset?: boolean;\n};\n\nexport function DropdownMenuItem({\n  destructive = false,\n  inset = false,\n  ...props\n}: DropdownMenuItemProps) {\n  function getItemStyles(state: MenuPrimitive.Item.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n      inset && styles.inset,\n      destructive && styles.destructive,\n    );\n  }\n  return (\n    <MenuPrimitive.Item\n      {...props}\n      className={(state) => getItemStyles(state).className}\n      style={(state) => getItemStyles(state).style}\n    />\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.CheckboxItem>, \"className\" | \"style\">) {\n  function getCheckboxItemStyles(state: MenuPrimitive.CheckboxItem.State) {\n    return stylex.props(\n      styles.item,\n      styles.choiceItem,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <MenuPrimitive.CheckboxItem\n      {...props}\n      className={(state) => getCheckboxItemStyles(state).className}\n      style={(state) => getCheckboxItemStyles(state).style}\n    >\n      <MenuPrimitive.CheckboxItemIndicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.RadioItem>, \"className\" | \"style\">) {\n  function getRadioItemStyles(state: MenuPrimitive.RadioItem.State) {\n    return stylex.props(\n      styles.item,\n      styles.choiceItem,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <MenuPrimitive.RadioItem\n      {...props}\n      className={(state) => getRadioItemStyles(state).className}\n      style={(state) => getRadioItemStyles(state).style}\n    >\n      <MenuPrimitive.RadioItemIndicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.radioDot)} />\n      </MenuPrimitive.RadioItemIndicator>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({\n  inset = false,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.GroupLabel>, \"className\" | \"style\"> & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel {...props} {...stylex.props(styles.label, inset && styles.inset)} />\n  );\n}\n\nexport function DropdownMenuSeparator(\n  props: Omit<ComponentProps<typeof MenuPrimitive.Separator>, \"className\" | \"style\">,\n) {\n  return <MenuPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n\nexport function DropdownMenuShortcut({\n  children,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\"> & { children: ReactNode }) {\n  return (\n    <span {...props} {...stylex.props(styles.shortcut)}>\n      {children}\n    </span>\n  );\n}\n\nexport function DropdownMenuSubTrigger({\n  children,\n  inset = false,\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.SubmenuTrigger>, \"className\" | \"style\"> & {\n  inset?: boolean;\n}) {\n  function getSubmenuTriggerStyles(state: MenuPrimitive.SubmenuTrigger.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n      inset && styles.inset,\n    );\n  }\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      {...props}\n      className={(state) => getSubmenuTriggerStyles(state).className}\n      style={(state) => getSubmenuTriggerStyles(state).style}\n    >\n      {children}\n      <CaretRightIcon aria-hidden=\"true\" {...stylex.props(styles.subIcon)} />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport const DropdownMenuSubContent = DropdownMenuContent;\n",
       "path": "dropdown-menu.tsx"
     }
   ],

package/dist/items/hover-card.json

@@ -3,7 +3,7 @@
   "primaryExport": "HoverCard",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { PreviewCard } from \"@base-ui/react/preview-card\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\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    fontSize: typographyVars.fontSizeSm,\n    maxWidth: \"20rem\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"translateY(0) scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.popup,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  transitioning: { opacity: 0, transform: \"translateY(0.25rem) scale(0.98)\" },\n  trigger: {\n    color: colorVars.fgPrimary,\n    textDecorationLine: \"none\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.25em\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"text-decoration-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":focus-visible\": { textDecorationLine: \"underline\" },\n    \":hover\": { textDecorationLine: \"underline\" },\n  },\n});\n\nexport const HoverCard = PreviewCard.Root;\n\nexport type HoverCardTriggerProps = Omit<\n  ComponentProps<typeof PreviewCard.Trigger>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function HoverCardTrigger({ xstyle, ...props }: HoverCardTriggerProps) {\n  return <PreviewCard.Trigger {...props} {...stylex.props(styles.trigger, xstyle)} />;\n}\n\nexport type HoverCardContentProps = Omit<\n  ComponentProps<typeof PreviewCard.Popup>,\n  \"className\" | \"style\"\n> & {\n  align?: Omit<ComponentProps<typeof PreviewCard.Positioner>, \"className\" | \"style\">[\"align\"];\n  side?: Omit<ComponentProps<typeof PreviewCard.Positioner>, \"className\" | \"style\">[\"side\"];\n  sideOffset?: number;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function HoverCardContent({\n  align = \"center\",\n  side = \"bottom\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: HoverCardContentProps) {\n  return (\n    <PreviewCard.Portal>\n      <PreviewCard.Positioner align={align} side={side} sideOffset={sideOffset}>\n        <PreviewCard.Popup\n          {...props}\n          className={(state) =>\n            stylex.props(\n              styles.popup,\n              xstyle,\n              state.transitionStatus === \"starting\" && styles.transitioning,\n              state.transitionStatus === \"ending\" && styles.transitioning,\n            ).className\n          }\n          style={(state) =>\n            stylex.props(\n              styles.popup,\n              xstyle,\n              state.transitionStatus === \"starting\" && styles.transitioning,\n              state.transitionStatus === \"ending\" && styles.transitioning,\n            ).style\n          }\n        />\n      </PreviewCard.Positioner>\n    </PreviewCard.Portal>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { PreviewCard } from \"@base-ui/react/preview-card\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\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    fontSize: typographyVars.fontSizeSm,\n    maxWidth: \"20rem\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"translateY(0) scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: layerVars.popup,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  transitioning: { opacity: 0, transform: \"translateY(0.25rem) scale(0.98)\" },\n  trigger: {\n    color: colorVars.fgPrimary,\n    textDecorationLine: \"none\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.25em\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"text-decoration-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":focus-visible\": { textDecorationLine: \"underline\" },\n    \":hover\": { textDecorationLine: \"underline\" },\n  },\n});\n\nexport const HoverCard = PreviewCard.Root;\n\nexport type HoverCardTriggerProps = Omit<\n  ComponentProps<typeof PreviewCard.Trigger>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function HoverCardTrigger({ xstyle, ...props }: HoverCardTriggerProps) {\n  return <PreviewCard.Trigger {...props} {...stylex.props(styles.trigger, xstyle)} />;\n}\n\nexport type HoverCardContentProps = Omit<\n  ComponentProps<typeof PreviewCard.Popup>,\n  \"className\" | \"style\"\n> & {\n  align?: Omit<ComponentProps<typeof PreviewCard.Positioner>, \"className\" | \"style\">[\"align\"];\n  side?: Omit<ComponentProps<typeof PreviewCard.Positioner>, \"className\" | \"style\">[\"side\"];\n  sideOffset?: number;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function HoverCardContent({\n  align = \"center\",\n  side = \"bottom\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: HoverCardContentProps) {\n  function getPopupStyles(state: PreviewCard.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      xstyle,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.transitioning,\n    );\n  }\n\n  return (\n    <PreviewCard.Portal>\n      <PreviewCard.Positioner align={align} side={side} sideOffset={sideOffset}>\n        <PreviewCard.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        />\n      </PreviewCard.Positioner>\n    </PreviewCard.Portal>\n  );\n}\n",
       "path": "hover-card.tsx"
     }
   ],

package/dist/items/input-otp.json

@@ -3,7 +3,7 @@
   "primaryExport": "InputOTP",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { OTPField } from \"@base-ui/react/otp-field\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: { alignItems: \"center\", display: \"flex\", gap: spacingVars.space2 },\n  group: { display: \"flex\" },\n  slot: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: 0,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    height: sizeVars.controlLg,\n    marginInlineStart: -1,\n    outline: \"none\",\n    textAlign: \"center\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, box-shadow, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlLg,\n    \":first-child\": {\n      borderBottomLeftRadius: radiusVars.sm,\n      borderTopLeftRadius: radiusVars.sm,\n      marginInlineStart: 0,\n    },\n    \":last-child\": { borderBottomRightRadius: radiusVars.sm, borderTopRightRadius: radiusVars.sm },\n    \":hover:not(:disabled)\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n      zIndex: 1,\n    },\n    \":disabled\": { cursor: \"not-allowed\", opacity: opacityVars.disabled },\n  },\n  separator: { color: colorVars.fgTertiary, paddingInline: spacingVars.space1 },\n});\n\nexport type InputOTPProps = Omit<ComponentProps<typeof OTPField.Root>, \"className\" | \"style\"> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function InputOTP({ xstyle, ...props }: InputOTPProps) {\n  const resolved = stylex.props(styles.root, xstyle);\n  return <OTPField.Root {...props} className={resolved.className} style={resolved.style} />;\n}\n\nexport function InputOTPGroup({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport function InputOTPSlot({\n  ...props\n}: Omit<ComponentProps<typeof OTPField.Input>, \"className\" | \"style\">) {\n  const resolved = stylex.props(styles.slot);\n  return <OTPField.Input {...props} className={resolved.className} style={resolved.style} />;\n}\n\nexport function InputOTPSeparator({\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return (\n    <span aria-hidden=\"true\" {...props} {...stylex.props(styles.separator)}>\n      {props.children ?? \"–\"}\n    </span>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { OTPField } from \"@base-ui/react/otp-field\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: { alignItems: \"center\", display: \"flex\", gap: spacingVars.space2 },\n  group: { display: \"flex\" },\n  slot: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: 0,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    height: sizeVars.controlLg,\n    marginInlineStart: -1,\n    outline: \"none\",\n    textAlign: \"center\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, box-shadow, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlLg,\n    \":first-child\": {\n      borderBottomLeftRadius: radiusVars.sm,\n      borderTopLeftRadius: radiusVars.sm,\n      marginInlineStart: 0,\n    },\n    \":last-child\": { borderBottomRightRadius: radiusVars.sm, borderTopRightRadius: radiusVars.sm },\n    \":hover:not(:disabled)\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n      zIndex: 1,\n    },\n    \":disabled\": { cursor: \"not-allowed\", opacity: opacityVars.disabled },\n  },\n  separator: { color: colorVars.fgTertiary, paddingInline: spacingVars.space1 },\n});\n\nexport type InputOTPProps = Omit<ComponentProps<typeof OTPField.Root>, \"className\" | \"style\"> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function InputOTP({ xstyle, ...props }: InputOTPProps) {\n  return <OTPField.Root {...props} {...stylex.props(styles.root, xstyle)} />;\n}\n\nexport function InputOTPGroup({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport function InputOTPSlot({\n  ...props\n}: Omit<ComponentProps<typeof OTPField.Input>, \"className\" | \"style\">) {\n  return <OTPField.Input {...props} {...stylex.props(styles.slot)} />;\n}\n\nexport function InputOTPSeparator({\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return (\n    <span aria-hidden=\"true\" {...props} {...stylex.props(styles.separator)}>\n      {props.children ?? \"–\"}\n    </span>\n  );\n}\n",
       "path": "input-otp.tsx"
     }
   ],

package/dist/items/link.json

@@ -3,7 +3,7 @@
   "primaryExport": "Link",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { colorVars, motionVars, sizeVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport { ArrowSquareOutIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { forwardRef, type ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderRadius: \"0.125rem\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    gap: \"0.1875em\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color, opacity, text-decoration-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  inline: {\n    color: colorVars.fgAction,\n    textDecorationLine: \"underline\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.15em\",\n    \":hover\": { opacity: 0.72 },\n  },\n  current: {\n    color: \"currentColor\",\n    textDecorationLine: \"underline\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.15em\",\n    \":hover\": { opacity: 0.72 },\n  },\n  plain: {\n    color: colorVars.fgAction,\n    textDecorationLine: \"none\",\n    \":hover\": { opacity: 0.72 },\n  },\n});\n\nexport type LinkVariant = \"current\" | \"inline\" | \"plain\";\n\nexport type LinkProps = Omit<useRender.ComponentProps<\"a\">, \"className\" | \"style\"> & {\n  variant?: LinkVariant;\n};\n\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { render, variant = \"inline\", ...props },\n  ref,\n) {\n  const stylexProps = stylex.props(styles.root, styles[variant]);\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: {\n      ...props,\n      ...stylexProps,\n    },\n    ref,\n    render,\n  });\n});\n\nfunction ExternalIcon(\n  props: Omit<ComponentProps<typeof ArrowSquareOutIcon>, \"className\" | \"style\">,\n) {\n  return <ArrowSquareOutIcon aria-hidden=\"true\" size=\"1em\" {...props} />;\n}\n\nexport const Link = Object.assign(LinkBase, { ExternalIcon });\n",
+      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { colorVars, motionVars, sizeVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport { ArrowSquareOutIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderRadius: \"0.125rem\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    gap: \"0.1875em\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color, opacity, text-decoration-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  inline: {\n    color: colorVars.fgAction,\n    textDecorationLine: \"underline\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.15em\",\n    \":hover\": { opacity: 0.72 },\n  },\n  current: {\n    color: \"currentColor\",\n    textDecorationLine: \"underline\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.15em\",\n    \":hover\": { opacity: 0.72 },\n  },\n  plain: {\n    color: colorVars.fgAction,\n    textDecorationLine: \"none\",\n    \":hover\": { opacity: 0.72 },\n  },\n});\n\nexport type LinkVariant = \"current\" | \"inline\" | \"plain\";\n\nexport type LinkProps = Omit<useRender.ComponentProps<\"a\">, \"className\" | \"style\"> & {\n  variant?: LinkVariant;\n};\n\nfunction LinkBase({ ref, render, variant = \"inline\", ...props }: LinkProps) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: {\n      ...props,\n      ...stylex.props(styles.root, styles[variant]),\n    },\n    ref,\n    render,\n  });\n}\n\nfunction ExternalIcon(\n  props: Omit<ComponentProps<typeof ArrowSquareOutIcon>, \"className\" | \"style\">,\n) {\n  return <ArrowSquareOutIcon aria-hidden=\"true\" size=\"1em\" {...props} />;\n}\n\nexport const Link = Object.assign(LinkBase, { ExternalIcon });\n",
       "path": "link.tsx"
     }
   ],

package/dist/items/navigation-menu.json

@@ -3,7 +3,7 @@
   "primaryExport": "NavigationMenu",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    justifyContent: \"center\",\n    maxWidth: \"max-content\",\n    position: \"relative\",\n    zIndex: 10,\n  },\n  list: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    gap: 0,\n    justifyContent: \"center\",\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { position: \"relative\" },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    height: sizeVars.controlMd,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: \"transparent\",\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { backgroundColor: \"transparent\" },\n    },\n  },\n  triggerOpen: { backgroundColor: colorVars.interactionHover },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    position: \"relative\",\n    top: sizeVars.stroke,\n    transform: \"rotate(0deg)\",\n    \":is([data-popup-open] *)\": { transform: \"rotate(180deg)\" },\n  },\n  content: {\n    height: \"100%\",\n    padding: spacingVars.space1,\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n    width: \"auto\",\n  },\n  contentStartingFromLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentStartingFromRight: { opacity: 0, transform: \"translateX(50%)\" },\n  contentEndingToLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentEndingToRight: { opacity: 0, transform: \"translateX(50%)\" },\n  link: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    gap: spacingVars.space2,\n    outline: \"none\",\n    padding: spacingVars.space2,\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      backgroundColor: colorVars.interactionHover,\n      outlineColor: colorVars.strokeFocus,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  positioner: {\n    height: \"var(--positioner-height)\",\n    maxWidth: \"var(--available-width)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"inset, width, height\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n    width: \"var(--positioner-width)\",\n    zIndex: layerVars.popup,\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.floating,\n    color: colorVars.fgPrimary,\n    height: \"var(--popup-height)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform, width, height\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"var(--popup-width)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.9)\" },\n  viewport: {\n    fontFamily: typographyVars.fontFamilyBody,\n    height: \"100%\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n  },\n});\n\nexport function NavigationMenu(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.Root>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.Root {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function NavigationMenuList(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.List>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.List {...props} {...stylex.props(styles.list)} />;\n}\n\nexport function NavigationMenuItem(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.Item>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.Item {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function NavigationMenuContent({\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Content>, \"className\" | \"style\">) {\n  function getContentStyles(state: NavigationMenuPrimitive.Content.State) {\n    return stylex.props(\n      styles.content,\n      state.transitionStatus === \"starting\" &&\n        state.activationDirection === \"left\" &&\n        styles.contentStartingFromLeft,\n      state.transitionStatus === \"starting\" &&\n        state.activationDirection === \"right\" &&\n        styles.contentStartingFromRight,\n      state.transitionStatus === \"ending\" &&\n        state.activationDirection === \"left\" &&\n        styles.contentEndingToRight,\n      state.transitionStatus === \"ending\" &&\n        state.activationDirection === \"right\" &&\n        styles.contentEndingToLeft,\n    );\n  }\n  return (\n    <NavigationMenuPrimitive.Content\n      {...props}\n      className={(state) => getContentStyles(state).className}\n      style={(state) => getContentStyles(state).style}\n    />\n  );\n}\n\nexport function NavigationMenuTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: NavigationMenuPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.open && styles.triggerOpen);\n  }\n  return (\n    <NavigationMenuPrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon {...stylex.props(styles.icon)}>\n        <CaretDownIcon aria-hidden=\"true\" />\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nexport function NavigationMenuLink({\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Link>, \"className\" | \"style\">) {\n  const sx = stylex.props(styles.link);\n  return <NavigationMenuPrimitive.Link {...props} className={sx.className} style={sx.style} />;\n}\n\ntype NavigationMenuViewportProps = Omit<\n  ComponentProps<typeof NavigationMenuPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof NavigationMenuPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\">;\n\nexport function NavigationMenuViewport({\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 8,\n  ...props\n}: NavigationMenuViewportProps) {\n  function getPopupStyles(state: NavigationMenuPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      state.transitionStatus === \"starting\" && styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupTransitioning,\n    );\n  }\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <NavigationMenuPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          <NavigationMenuPrimitive.Viewport {...stylex.props(styles.viewport)} />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    justifyContent: \"center\",\n    maxWidth: \"max-content\",\n    position: \"relative\",\n    zIndex: 10,\n  },\n  list: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    gap: 0,\n    justifyContent: \"center\",\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { position: \"relative\" },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    height: sizeVars.controlMd,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: \"transparent\",\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { backgroundColor: \"transparent\" },\n    },\n  },\n  triggerOpen: { backgroundColor: colorVars.interactionHover },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    position: \"relative\",\n    top: sizeVars.stroke,\n    transform: \"rotate(0deg)\",\n    \":is([data-popup-open] *)\": { transform: \"rotate(180deg)\" },\n  },\n  content: {\n    height: \"100%\",\n    padding: spacingVars.space1,\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n    width: \"auto\",\n  },\n  contentStartingFromLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentStartingFromRight: { opacity: 0, transform: \"translateX(50%)\" },\n  contentEndingToLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentEndingToRight: { opacity: 0, transform: \"translateX(50%)\" },\n  link: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    gap: spacingVars.space2,\n    outline: \"none\",\n    padding: spacingVars.space2,\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      backgroundColor: colorVars.interactionHover,\n      outlineColor: colorVars.strokeFocus,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  positioner: {\n    height: \"var(--positioner-height)\",\n    maxWidth: \"var(--available-width)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"inset, width, height\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n    width: \"var(--positioner-width)\",\n    zIndex: layerVars.popup,\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.floating,\n    color: colorVars.fgPrimary,\n    height: \"var(--popup-height)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform, width, height\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"var(--popup-width)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.9)\" },\n  viewport: {\n    fontFamily: typographyVars.fontFamilyBody,\n    height: \"100%\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n  },\n});\n\nexport function NavigationMenu(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.Root>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.Root {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function NavigationMenuList(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.List>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.List {...props} {...stylex.props(styles.list)} />;\n}\n\nexport function NavigationMenuItem(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.Item>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.Item {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function NavigationMenuContent({\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Content>, \"className\" | \"style\">) {\n  function getContentStyles(state: NavigationMenuPrimitive.Content.State) {\n    return stylex.props(\n      styles.content,\n      state.transitionStatus === \"starting\" &&\n        state.activationDirection === \"left\" &&\n        styles.contentStartingFromLeft,\n      state.transitionStatus === \"starting\" &&\n        state.activationDirection === \"right\" &&\n        styles.contentStartingFromRight,\n      state.transitionStatus === \"ending\" &&\n        state.activationDirection === \"left\" &&\n        styles.contentEndingToRight,\n      state.transitionStatus === \"ending\" &&\n        state.activationDirection === \"right\" &&\n        styles.contentEndingToLeft,\n    );\n  }\n  return (\n    <NavigationMenuPrimitive.Content\n      {...props}\n      className={(state) => getContentStyles(state).className}\n      style={(state) => getContentStyles(state).style}\n    />\n  );\n}\n\nexport function NavigationMenuTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: NavigationMenuPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.open && styles.triggerOpen);\n  }\n  return (\n    <NavigationMenuPrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon {...stylex.props(styles.icon)}>\n        <CaretDownIcon aria-hidden=\"true\" />\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nexport function NavigationMenuLink({\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Link>, \"className\" | \"style\">) {\n  return <NavigationMenuPrimitive.Link {...props} {...stylex.props(styles.link)} />;\n}\n\ntype NavigationMenuViewportProps = Omit<\n  ComponentProps<typeof NavigationMenuPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof NavigationMenuPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\">;\n\nexport function NavigationMenuViewport({\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 8,\n  ...props\n}: NavigationMenuViewportProps) {\n  function getPopupStyles(state: NavigationMenuPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.popupTransitioning,\n    );\n  }\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <NavigationMenuPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          <NavigationMenuPrimitive.Viewport {...stylex.props(styles.viewport)} />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n",
       "path": "navigation-menu.tsx"
     }
   ],

package/dist/items/popover.json

@@ -3,7 +3,7 @@
   "primaryExport": "Popover",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: layerVars.popup },\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    maxWidth: \"calc(100vw - 2rem)\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: sizeVars.contentXs,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space1 },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\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 Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverClose = PopoverPrimitive.Close;\n\ntype PopoverContentProps = Omit<\n  ComponentProps<typeof PopoverPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof PopoverPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function PopoverContent({\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: PopoverContentProps) {\n  function getPopupStyles(state: PopoverPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      state.transitionStatus === \"starting\" && styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n      xstyle,\n    );\n  }\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <PopoverPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverHeader({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.header)} />;\n}\nexport function PopoverTitle({\n  children,\n  ...props\n}: Omit<ComponentProps<\"h2\">, \"className\" | \"style\">) {\n  return (\n    <h2 {...props} {...stylex.props(styles.title)}>\n      {children}\n    </h2>\n  );\n}\nexport function PopoverDescription({ ...props }: Omit<ComponentProps<\"p\">, \"className\" | \"style\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n",
+      "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: layerVars.popup },\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    maxWidth: \"calc(100vw - 2rem)\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: sizeVars.contentXs,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space1 },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\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 Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverClose = PopoverPrimitive.Close;\n\ntype PopoverContentProps = Omit<\n  ComponentProps<typeof PopoverPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof PopoverPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function PopoverContent({\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: PopoverContentProps) {\n  function getPopupStyles(state: PopoverPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n      xstyle,\n    );\n  }\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <PopoverPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverHeader({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.header)} />;\n}\nexport function PopoverTitle({\n  children,\n  ...props\n}: Omit<ComponentProps<\"h2\">, \"className\" | \"style\">) {\n  return (\n    <h2 {...props} {...stylex.props(styles.title)}>\n      {children}\n    </h2>\n  );\n}\nexport function PopoverDescription({ ...props }: Omit<ComponentProps<\"p\">, \"className\" | \"style\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n",
       "path": "popover.tsx"
     }
   ],

package/dist/items/progress.json

@@ -3,7 +3,7 @@
   "primaryExport": "Progress",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { colorVars, motionVars, radiusVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    height: sizeVars.trackMd,\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  indicator: {\n    backgroundColor: colorVars.bgActionPrimary,\n    height: \"100%\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"width\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n});\n\nexport type ProgressProps = Omit<\n  ComponentProps<typeof ProgressPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Progress({ xstyle, ...props }: ProgressProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <ProgressPrimitive.Root {...props} className={stylexProps.className} style={stylexProps.style}>\n      <ProgressPrimitive.Indicator {...stylex.props(styles.indicator)} />\n    </ProgressPrimitive.Root>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { colorVars, motionVars, radiusVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    height: sizeVars.trackMd,\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  indicator: {\n    backgroundColor: colorVars.bgActionPrimary,\n    height: \"100%\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"width\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n});\n\nexport type ProgressProps = Omit<\n  ComponentProps<typeof ProgressPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Progress({ xstyle, ...props }: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root {...props} {...stylex.props(styles.root, xstyle)}>\n      <ProgressPrimitive.Indicator {...stylex.props(styles.indicator)} />\n    </ProgressPrimitive.Root>\n  );\n}\n",
       "path": "progress.tsx"
     }
   ],

package/dist/items/radio-group.json

@@ -3,7 +3,7 @@
   "primaryExport": "RadioGroup",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles, ControlPlacementStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space3 },\n  item: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.controlXs,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlXs,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\", opacity: opacityVars.disabled },\n  },\n  checked: { borderColor: colorVars.strokeAction },\n  indicator: { alignItems: \"center\", display: \"inline-flex\", justifyContent: \"center\" },\n  dot: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderRadius: radiusVars.full,\n    height: sizeVars.iconXs,\n    width: sizeVars.iconXs,\n  },\n});\n\nexport type RadioGroupProps = Omit<\n  ComponentProps<typeof RadioGroupPrimitive>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function RadioGroup({ xstyle, ...props }: RadioGroupProps) {\n  const stylexProps = stylex.props(styles.group, xstyle);\n  return (\n    <RadioGroupPrimitive {...props} className={stylexProps.className} style={stylexProps.style} />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<\n  ComponentProps<typeof RadioPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlPlacementStyles;\n};\n\nexport function RadioGroupItem({ xstyle, ...props }: RadioGroupItemProps) {\n  function getRootStyles(state: RadioPrimitive.Root.State) {\n    return stylex.props(styles.item, state.checked && styles.checked, xstyle);\n  }\n  return (\n    <RadioPrimitive.Root\n      {...props}\n      className={(state) => getRootStyles(state).className}\n      style={(state) => getRootStyles(state).style}\n    >\n      <RadioPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.dot)} />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles, ControlPlacementStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space3 },\n  item: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.controlXs,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlXs,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\", opacity: opacityVars.disabled },\n  },\n  checked: { borderColor: colorVars.strokeAction },\n  indicator: { alignItems: \"center\", display: \"inline-flex\", justifyContent: \"center\" },\n  dot: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderRadius: radiusVars.full,\n    height: sizeVars.iconXs,\n    width: sizeVars.iconXs,\n  },\n});\n\nexport type RadioGroupProps = Omit<\n  ComponentProps<typeof RadioGroupPrimitive>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function RadioGroup({ xstyle, ...props }: RadioGroupProps) {\n  return <RadioGroupPrimitive {...props} {...stylex.props(styles.group, xstyle)} />;\n}\n\nexport type RadioGroupItemProps = Omit<\n  ComponentProps<typeof RadioPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlPlacementStyles;\n};\n\nexport function RadioGroupItem({ xstyle, ...props }: RadioGroupItemProps) {\n  function getRootStyles(state: RadioPrimitive.Root.State) {\n    return stylex.props(styles.item, state.checked && styles.checked, xstyle);\n  }\n  return (\n    <RadioPrimitive.Root\n      {...props}\n      className={(state) => getRootStyles(state).className}\n      style={(state) => getRootStyles(state).style}\n    >\n      <RadioPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.dot)} />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  );\n}\n",
       "path": "radio-group.tsx"
     }
   ],

package/dist/items/scroll-area.json

@@ -3,7 +3,7 @@
   "primaryExport": "ScrollArea",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { colorVars, motionVars, radiusVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  root: { overflow: \"hidden\", position: \"relative\" },\n  viewport: { height: \"100%\", width: \"100%\" },\n  content: { minWidth: \"100%\" },\n  scrollbar: {\n    display: \"flex\",\n    padding: spacingVars.space0_5,\n    touchAction: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    userSelect: \"none\",\n  },\n  vertical: { height: \"100%\", width: 10 },\n  horizontal: { flexDirection: \"column\", height: 10, width: \"100%\" },\n  thumb: {\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    flex: 1,\n    minHeight: 20,\n    minWidth: 20,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.strokeStrong },\n  },\n  corner: { backgroundColor: \"transparent\" },\n});\n\nexport type ScrollAreaProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  scrollbars?: \"both\" | \"horizontal\" | \"vertical\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ScrollArea({\n  children,\n  scrollbars = \"vertical\",\n  xstyle,\n  ...props\n}: ScrollAreaProps) {\n  const root = stylex.props(styles.root, xstyle);\n  return (\n    <ScrollAreaPrimitive.Root {...props} className={root.className} style={root.style}>\n      <ScrollAreaPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <ScrollAreaPrimitive.Content {...stylex.props(styles.content)}>\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {scrollbars === \"vertical\" || scrollbars === \"both\" ? (\n        <ScrollBar orientation=\"vertical\" />\n      ) : null}\n      {scrollbars === \"horizontal\" || scrollbars === \"both\" ? (\n        <ScrollBar orientation=\"horizontal\" />\n      ) : null}\n      <ScrollAreaPrimitive.Corner {...stylex.props(styles.corner)} />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  orientation = \"vertical\",\n  ...props\n}: Omit<ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>, \"className\" | \"style\">) {\n  const resolved = stylex.props(styles.scrollbar, styles[orientation]);\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      {...props}\n      className={resolved.className}\n      orientation={orientation}\n      style={resolved.style}\n    >\n      <ScrollAreaPrimitive.Thumb {...stylex.props(styles.thumb)} />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport { colorVars, motionVars, radiusVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  root: { overflow: \"hidden\", position: \"relative\" },\n  viewport: { height: \"100%\", width: \"100%\" },\n  content: { minWidth: \"100%\" },\n  scrollbar: {\n    display: \"flex\",\n    padding: spacingVars.space0_5,\n    touchAction: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    userSelect: \"none\",\n  },\n  vertical: { height: \"100%\", width: 10 },\n  horizontal: { flexDirection: \"column\", height: 10, width: \"100%\" },\n  thumb: {\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    flex: 1,\n    minHeight: 20,\n    minWidth: 20,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.strokeStrong },\n  },\n  corner: { backgroundColor: \"transparent\" },\n});\n\nexport type ScrollAreaProps = Omit<\n  ComponentProps<typeof ScrollAreaPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  scrollbars?: \"both\" | \"horizontal\" | \"vertical\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ScrollArea({\n  children,\n  scrollbars = \"vertical\",\n  xstyle,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root {...props} {...stylex.props(styles.root, xstyle)}>\n      <ScrollAreaPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <ScrollAreaPrimitive.Content {...stylex.props(styles.content)}>\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {scrollbars === \"vertical\" || scrollbars === \"both\" ? (\n        <ScrollBar orientation=\"vertical\" />\n      ) : null}\n      {scrollbars === \"horizontal\" || scrollbars === \"both\" ? (\n        <ScrollBar orientation=\"horizontal\" />\n      ) : null}\n      <ScrollAreaPrimitive.Corner {...stylex.props(styles.corner)} />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  orientation = \"vertical\",\n  ...props\n}: Omit<ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>, \"className\" | \"style\">) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      {...props}\n      {...stylex.props(styles.scrollbar, styles[orientation])}\n      orientation={orientation}\n    >\n      <ScrollAreaPrimitive.Thumb {...stylex.props(styles.thumb)} />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n",
       "path": "scroll-area.tsx"
     }
   ],

package/dist/items/select.json

@@ -3,7 +3,7 @@
   "primaryExport": "Select",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    height: sizeVars.controlMd,\n    justifyContent: \"space-between\",\n    width: \"11rem\",\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.bgSurfacePressed },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.bgSubtle },\n  },\n  triggerIcon: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    flexShrink: 0,\n  },\n  positioner: { zIndex: layerVars.popup },\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  list: { overflowY: \"auto\", overscrollBehavior: \"contain\", padding: 0 },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\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  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: `calc(${spacingVars.space1} * -1)`,\n  },\n});\n\nexport const Select = SelectPrimitive.Root;\nexport const SelectValue = SelectPrimitive.Value;\nexport const SelectGroup = SelectPrimitive.Group;\n\nexport function SelectTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof SelectPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: SelectPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <SelectPrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <SelectPrimitive.Icon {...stylex.props(styles.triggerIcon)}>\n        <CaretDownIcon aria-hidden=\"true\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\ntype SelectContentProps = Omit<\n  ComponentProps<typeof SelectPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<\n    ComponentProps<typeof SelectPrimitive.Positioner>,\n    \"align\" | \"alignItemWithTrigger\" | \"side\" | \"sideOffset\"\n  > & { children: ReactNode };\n\nexport function SelectContent({\n  align = \"start\",\n  alignItemWithTrigger = false,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: SelectContentProps) {\n  function getPopupStyles(state: SelectPrimitive.Popup.State) {\n    return 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  }\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <SelectPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          <SelectPrimitive.List {...stylex.props(styles.list)}>{children}</SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof SelectPrimitive.Item>, \"className\" | \"style\">) {\n  function getItemStyles(state: SelectPrimitive.Item.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <SelectPrimitive.Item\n      {...props}\n      className={(state) => getItemStyles(state).className}\n      style={(state) => getItemStyles(state).style}\n    >\n      <SelectPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel(\n  props: Omit<ComponentProps<typeof SelectPrimitive.GroupLabel>, \"className\" | \"style\">,\n) {\n  return <SelectPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function SelectSeparator(\n  props: Omit<ComponentProps<typeof SelectPrimitive.Separator>, \"className\" | \"style\">,\n) {\n  return <SelectPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
+      "content": "\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nconst styles = stylex.create({\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    height: sizeVars.controlMd,\n    justifyContent: \"space-between\",\n    width: \"11rem\",\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.bgSurfacePressed },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.bgSubtle },\n  },\n  triggerIcon: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    flexShrink: 0,\n  },\n  positioner: { zIndex: layerVars.popup },\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  list: { overflowY: \"auto\", overscrollBehavior: \"contain\", padding: 0 },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\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  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: `calc(${spacingVars.space1} * -1)`,\n  },\n});\n\nexport const Select = SelectPrimitive.Root;\nexport const SelectValue = SelectPrimitive.Value;\nexport const SelectGroup = SelectPrimitive.Group;\n\nexport function SelectTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof SelectPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: SelectPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n  }\n  return (\n    <SelectPrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <SelectPrimitive.Icon {...stylex.props(styles.triggerIcon)}>\n        <CaretDownIcon aria-hidden=\"true\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\ntype SelectContentProps = Omit<\n  ComponentProps<typeof SelectPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<\n    ComponentProps<typeof SelectPrimitive.Positioner>,\n    \"align\" | \"alignItemWithTrigger\" | \"side\" | \"sideOffset\"\n  > & { children: ReactNode };\n\nexport function SelectContent({\n  align = \"start\",\n  alignItemWithTrigger = false,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: SelectContentProps) {\n  function getPopupStyles(state: SelectPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n    );\n  }\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <SelectPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          <SelectPrimitive.List {...stylex.props(styles.list)}>{children}</SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof SelectPrimitive.Item>, \"className\" | \"style\">) {\n  function getItemStyles(state: SelectPrimitive.Item.State) {\n    return stylex.props(\n      styles.item,\n      state.highlighted && styles.itemHighlighted,\n      state.disabled && styles.itemDisabled,\n    );\n  }\n  return (\n    <SelectPrimitive.Item\n      {...props}\n      className={(state) => getItemStyles(state).className}\n      style={(state) => getItemStyles(state).style}\n    >\n      <SelectPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel(\n  props: Omit<ComponentProps<typeof SelectPrimitive.GroupLabel>, \"className\" | \"style\">,\n) {\n  return <SelectPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function SelectSeparator(\n  props: Omit<ComponentProps<typeof SelectPrimitive.Separator>, \"className\" | \"style\">,\n) {\n  return <SelectPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
       "path": "select.tsx"
     }
   ],

package/dist/items/slider.json

@@ -3,7 +3,7 @@
   "primaryExport": "Slider",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    opacity: { default: 1, \":disabled\": opacityVars.disabled },\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n  },\n  control: {\n    alignItems: \"center\",\n    display: \"flex\",\n    height: sizeVars.touchTarget,\n    position: \"relative\",\n    touchAction: \"none\",\n    width: \"100%\",\n  },\n  track: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.full,\n    height: sizeVars.trackSm,\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  indicator: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderRadius: radiusVars.full,\n    height: \"100%\",\n  },\n  thumb: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeAction,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    height: sizeVars.iconLg,\n    outline: \"none\",\n    width: sizeVars.iconLg,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n});\n\nexport type SliderProps = Omit<\n  ComponentProps<typeof SliderPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  /** Returns an accessible name for each thumb in a range slider. */\n  getAriaLabel?: (index: number) => string;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Slider({ defaultValue, getAriaLabel, value, xstyle, ...props }: SliderProps) {\n  const currentValue = value ?? defaultValue;\n  const thumbCount = Array.isArray(currentValue) ? currentValue.length : 1;\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <SliderPrimitive.Root\n      {...props}\n      defaultValue={defaultValue}\n      value={value}\n      className={stylexProps.className}\n      style={stylexProps.style}\n    >\n      <SliderPrimitive.Control {...stylex.props(styles.control)}>\n        <SliderPrimitive.Track {...stylex.props(styles.track)}>\n          <SliderPrimitive.Indicator {...stylex.props(styles.indicator)} />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbCount }, (_, index) => (\n          <SliderPrimitive.Thumb\n            getAriaLabel={getAriaLabel}\n            index={index}\n            key={index}\n            {...stylex.props(styles.thumb)}\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    opacity: { default: 1, \":disabled\": opacityVars.disabled },\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n  },\n  control: {\n    alignItems: \"center\",\n    display: \"flex\",\n    height: sizeVars.touchTarget,\n    position: \"relative\",\n    touchAction: \"none\",\n    width: \"100%\",\n  },\n  track: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.full,\n    height: sizeVars.trackSm,\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  indicator: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderRadius: radiusVars.full,\n    height: \"100%\",\n  },\n  thumb: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeAction,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    height: sizeVars.iconLg,\n    outline: \"none\",\n    width: sizeVars.iconLg,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n});\n\nexport type SliderProps = Omit<\n  ComponentProps<typeof SliderPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  /** Returns an accessible name for each thumb in a range slider. */\n  getAriaLabel?: (index: number) => string;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Slider({ defaultValue, getAriaLabel, value, xstyle, ...props }: SliderProps) {\n  const currentValue = value ?? defaultValue;\n  const thumbCount = Array.isArray(currentValue) ? currentValue.length : 1;\n  return (\n    <SliderPrimitive.Root\n      {...props}\n      defaultValue={defaultValue}\n      value={value}\n      {...stylex.props(styles.root, xstyle)}\n    >\n      <SliderPrimitive.Control {...stylex.props(styles.control)}>\n        <SliderPrimitive.Track {...stylex.props(styles.track)}>\n          <SliderPrimitive.Indicator {...stylex.props(styles.indicator)} />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbCount }, (_, index) => (\n          <SliderPrimitive.Thumb\n            getAriaLabel={getAriaLabel}\n            index={index}\n            key={index}\n            {...stylex.props(styles.thumb)}\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n",
       "path": "slider.tsx"
     }
   ],

package/dist/items/tabs.json

@@ -3,7 +3,7 @@
   "primaryExport": "Tabs",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, type ComponentProps, useContext } from \"react\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0, width: \"100%\" },\n  list: {\n    alignItems: \"stretch\",\n    display: \"inline-flex\",\n    maxWidth: \"100%\",\n    overflowX: \"auto\",\n    position: \"relative\",\n  },\n  segmentedList: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    minHeight: sizeVars.controlMd,\n    padding: spacingVars.space0_5,\n  },\n  underlineList: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: sizeVars.stroke,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlMd,\n  },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    whiteSpace: \"nowrap\",\n    zIndex: 1,\n    \":hover\": { color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: `calc(${sizeVars.stroke} * -1)`,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  segmentedTrigger: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: spacingVars.space3,\n  },\n  underlineTrigger: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: spacingVars.space2,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n  },\n  triggerActive: { color: colorVars.fgPrimary },\n  triggerDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\", color: colorVars.fgDisabled },\n  },\n  indicator: {\n    left: 0,\n    position: \"absolute\",\n    transform: \"translateX(var(--active-tab-left))\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"var(--active-tab-width)\",\n    zIndex: 0,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  segmentedIndicator: {\n    backgroundColor: colorVars.interactionSelected,\n    borderRadius: radiusVars.sm,\n    boxShadow: shadowVars.subtle,\n    height: \"var(--active-tab-height)\",\n    top: \"var(--active-tab-top)\",\n  },\n  underlineIndicator: {\n    backgroundColor: colorVars.fgAction,\n    bottom: 0,\n    height: sizeVars.focusRing,\n  },\n  panel: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    marginTop: spacingVars.space3,\n    minWidth: 0,\n    outline: \"none\",\n    width: \"100%\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n});\n\nexport type TabsVariant = \"segmented\" | \"underline\";\nexport type TabsProps = Omit<ComponentProps<typeof TabsPrimitive.Root>, \"className\" | \"style\"> & {\n  variant?: TabsVariant;\n};\n\nconst TabsVariantContext = createContext<TabsVariant>(\"segmented\");\n\nexport function Tabs({ variant = \"segmented\", ...props }: TabsProps) {\n  const stylexProps = stylex.props(styles.root);\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <TabsPrimitive.Root {...props} className={stylexProps.className} style={stylexProps.style} />\n    </TabsVariantContext.Provider>\n  );\n}\n\nexport function TabsList({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof TabsPrimitive.List>, \"className\" | \"style\">) {\n  const variant = useContext(TabsVariantContext);\n\n  return (\n    <TabsPrimitive.List {...props} {...stylex.props(styles.list, styles[`${variant}List`])}>\n      {children}\n      <TabsPrimitive.Indicator {...stylex.props(styles.indicator, styles[`${variant}Indicator`])} />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTrigger({\n  ...props\n}: Omit<ComponentProps<typeof TabsPrimitive.Tab>, \"className\" | \"style\">) {\n  const variant = useContext(TabsVariantContext);\n\n  function getTabStyles(state: TabsPrimitive.Tab.State) {\n    return stylex.props(\n      styles.trigger,\n      styles[`${variant}Trigger`],\n      state.active && styles.triggerActive,\n      state.disabled && styles.triggerDisabled,\n    );\n  }\n  return (\n    <TabsPrimitive.Tab\n      {...props}\n      className={(state) => getTabStyles(state).className}\n      style={(state) => getTabStyles(state).style}\n    />\n  );\n}\n\nexport function TabsContent({\n  ...props\n}: Omit<ComponentProps<typeof TabsPrimitive.Panel>, \"className\" | \"style\">) {\n  return <TabsPrimitive.Panel {...props} {...stylex.props(styles.panel)} />;\n}\n",
+      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, type ComponentProps, useContext } from \"react\";\n\nconst styles = stylex.create({\n  root: { minWidth: 0, width: \"100%\" },\n  list: {\n    alignItems: \"stretch\",\n    display: \"inline-flex\",\n    maxWidth: \"100%\",\n    overflowX: \"auto\",\n    position: \"relative\",\n  },\n  segmentedList: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    minHeight: sizeVars.controlMd,\n    padding: spacingVars.space0_5,\n  },\n  underlineList: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: sizeVars.stroke,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlMd,\n  },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"relative\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    whiteSpace: \"nowrap\",\n    zIndex: 1,\n    \":hover\": { color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: `calc(${sizeVars.stroke} * -1)`,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  segmentedTrigger: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlSm,\n    paddingInline: spacingVars.space3,\n  },\n  underlineTrigger: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.controlMd,\n    paddingInline: spacingVars.space2,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n  },\n  triggerActive: { color: colorVars.fgPrimary },\n  triggerDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\", color: colorVars.fgDisabled },\n  },\n  indicator: {\n    left: 0,\n    position: \"absolute\",\n    transform: \"translateX(var(--active-tab-left))\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"transform, width, height\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"var(--active-tab-width)\",\n    zIndex: 0,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  segmentedIndicator: {\n    backgroundColor: colorVars.interactionSelected,\n    borderRadius: radiusVars.sm,\n    boxShadow: shadowVars.subtle,\n    height: \"var(--active-tab-height)\",\n    top: \"var(--active-tab-top)\",\n  },\n  underlineIndicator: {\n    backgroundColor: colorVars.fgAction,\n    bottom: 0,\n    height: sizeVars.focusRing,\n  },\n  panel: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    marginTop: spacingVars.space3,\n    minWidth: 0,\n    outline: \"none\",\n    width: \"100%\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n});\n\nexport type TabsVariant = \"segmented\" | \"underline\";\nexport type TabsProps = Omit<ComponentProps<typeof TabsPrimitive.Root>, \"className\" | \"style\"> & {\n  variant?: TabsVariant;\n};\n\nconst TabsVariantContext = createContext<TabsVariant>(\"segmented\");\n\nexport function Tabs({ variant = \"segmented\", ...props }: TabsProps) {\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <TabsPrimitive.Root {...props} {...stylex.props(styles.root)} />\n    </TabsVariantContext.Provider>\n  );\n}\n\nexport function TabsList({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof TabsPrimitive.List>, \"className\" | \"style\">) {\n  const variant = useContext(TabsVariantContext);\n\n  return (\n    <TabsPrimitive.List {...props} {...stylex.props(styles.list, styles[`${variant}List`])}>\n      {children}\n      <TabsPrimitive.Indicator {...stylex.props(styles.indicator, styles[`${variant}Indicator`])} />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTrigger({\n  ...props\n}: Omit<ComponentProps<typeof TabsPrimitive.Tab>, \"className\" | \"style\">) {\n  const variant = useContext(TabsVariantContext);\n\n  function getTabStyles(state: TabsPrimitive.Tab.State) {\n    return stylex.props(\n      styles.trigger,\n      styles[`${variant}Trigger`],\n      state.active && styles.triggerActive,\n      state.disabled && styles.triggerDisabled,\n    );\n  }\n  return (\n    <TabsPrimitive.Tab\n      {...props}\n      className={(state) => getTabStyles(state).className}\n      style={(state) => getTabStyles(state).style}\n    />\n  );\n}\n\nexport function TabsContent({\n  ...props\n}: Omit<ComponentProps<typeof TabsPrimitive.Panel>, \"className\" | \"style\">) {\n  return <TabsPrimitive.Panel {...props} {...stylex.props(styles.panel)} />;\n}\n",
       "path": "tabs.tsx"
     }
   ],

package/dist/items/toggle-group.json

@@ -3,7 +3,7 @@
   "primaryExport": "ToggleGroup",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, useContext, type ComponentProps, type ReactNode } from \"react\";\n\nimport type { ControlLayoutStyles, ControlPlacementStyles } from \"./control-layout\";\nimport type { ToggleSize, ToggleVariant } from \"./toggle\";\n\nconst styles = stylex.create({\n  root: { alignItems: \"center\", display: \"inline-flex\", width: \"fit-content\" },\n  default: { gap: spacingVars.space1 },\n  outline: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    gap: 0,\n    overflow: \"hidden\",\n  },\n  outlineItem: {\n    borderColor: \"transparent\",\n    borderRadius: 0,\n    marginInlineStart: -1,\n  },\n  item: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\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  itemSm: {\n    height: sizeVars.controlSm,\n    minWidth: sizeVars.controlSm,\n    paddingInline: spacingVars.space2,\n  },\n  itemMd: {\n    height: sizeVars.controlMd,\n    minWidth: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  itemLg: {\n    height: sizeVars.controlLg,\n    minWidth: sizeVars.controlLg,\n    paddingInline: spacingVars.space4,\n  },\n  itemDefault: { backgroundColor: \"transparent\" },\n  itemOutline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  itemPressed: { backgroundColor: colorVars.interactionSelected, color: colorVars.fgPrimary },\n  itemDisabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n});\n\nconst itemSizeStyles = { lg: styles.itemLg, md: styles.itemMd, sm: styles.itemSm };\nconst itemVariantStyles = { default: styles.itemDefault, outline: styles.itemOutline };\n\ntype ToggleGroupContextValue = { size: ToggleSize; variant: ToggleVariant };\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  size: \"md\",\n  variant: \"default\",\n});\n\nexport type ToggleGroupProps = Omit<\n  ComponentProps<typeof ToggleGroupPrimitive>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function ToggleGroup({\n  children,\n  size = \"md\",\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ToggleGroupProps) {\n  const stylexProps = stylex.props(styles.root, styles[variant], xstyle);\n  return (\n    <ToggleGroupPrimitive {...props} className={stylexProps.className} style={stylexProps.style}>\n      <ToggleGroupContext value={{ size, variant }}>{children}</ToggleGroupContext>\n    </ToggleGroupPrimitive>\n  );\n}\n\nexport type ToggleGroupItemProps = Omit<\n  ComponentProps<typeof TogglePrimitive>,\n  \"className\" | \"style\"\n> & {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: ControlPlacementStyles;\n};\n\nexport function ToggleGroupItem({ size, variant, xstyle, ...props }: ToggleGroupItemProps) {\n  const context = useContext(ToggleGroupContext);\n  const finalSize = size ?? context.size;\n  const finalVariant = variant ?? context.variant;\n  function getToggleStyles(state: TogglePrimitive.State) {\n    return stylex.props(\n      styles.item,\n      itemSizeStyles[finalSize],\n      itemVariantStyles[finalVariant],\n      state.pressed && styles.itemPressed,\n      state.disabled && styles.itemDisabled,\n      finalVariant === \"outline\" && styles.outlineItem,\n      xstyle,\n    );\n  }\n  return (\n    <TogglePrimitive\n      {...props}\n      className={(state) => getToggleStyles(state).className}\n      style={(state) => getToggleStyles(state).style}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, useContext, type ComponentProps, type ReactNode } from \"react\";\n\nimport type { ControlLayoutStyles, ControlPlacementStyles } from \"./control-layout\";\nimport type { ToggleSize, ToggleVariant } from \"./toggle\";\n\nconst styles = stylex.create({\n  root: { alignItems: \"center\", display: \"inline-flex\", width: \"fit-content\" },\n  default: { gap: spacingVars.space1 },\n  outline: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    gap: 0,\n    overflow: \"hidden\",\n  },\n  outlineItem: {\n    borderColor: \"transparent\",\n    borderRadius: 0,\n    marginInlineStart: -1,\n  },\n  item: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\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  itemSm: {\n    height: sizeVars.controlSm,\n    minWidth: sizeVars.controlSm,\n    paddingInline: spacingVars.space2,\n  },\n  itemMd: {\n    height: sizeVars.controlMd,\n    minWidth: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  itemLg: {\n    height: sizeVars.controlLg,\n    minWidth: sizeVars.controlLg,\n    paddingInline: spacingVars.space4,\n  },\n  itemDefault: { backgroundColor: \"transparent\" },\n  itemOutline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  itemPressed: { backgroundColor: colorVars.interactionSelected, color: colorVars.fgPrimary },\n  itemDisabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n});\n\nconst itemSizeStyles = { lg: styles.itemLg, md: styles.itemMd, sm: styles.itemSm };\nconst itemVariantStyles = { default: styles.itemDefault, outline: styles.itemOutline };\n\ntype ToggleGroupContextValue = { size: ToggleSize; variant: ToggleVariant };\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  size: \"md\",\n  variant: \"default\",\n});\n\nexport type ToggleGroupProps = Omit<\n  ComponentProps<typeof ToggleGroupPrimitive>,\n  \"className\" | \"style\"\n> & {\n  children: ReactNode;\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function ToggleGroup({\n  children,\n  size = \"md\",\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupPrimitive {...props} {...stylex.props(styles.root, styles[variant], xstyle)}>\n      <ToggleGroupContext value={{ size, variant }}>{children}</ToggleGroupContext>\n    </ToggleGroupPrimitive>\n  );\n}\n\nexport type ToggleGroupItemProps = Omit<\n  ComponentProps<typeof TogglePrimitive>,\n  \"className\" | \"style\"\n> & {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: ControlPlacementStyles;\n};\n\nexport function ToggleGroupItem({ size, variant, xstyle, ...props }: ToggleGroupItemProps) {\n  const context = useContext(ToggleGroupContext);\n  const finalSize = size ?? context.size;\n  const finalVariant = variant ?? context.variant;\n  function getToggleStyles(state: TogglePrimitive.State) {\n    return stylex.props(\n      styles.item,\n      itemSizeStyles[finalSize],\n      itemVariantStyles[finalVariant],\n      state.pressed && styles.itemPressed,\n      state.disabled && styles.itemDisabled,\n      finalVariant === \"outline\" && styles.outlineItem,\n      xstyle,\n    );\n  }\n  return (\n    <TogglePrimitive\n      {...props}\n      className={(state) => getToggleStyles(state).className}\n      style={(state) => getToggleStyles(state).style}\n    />\n  );\n}\n",
       "path": "toggle-group.tsx"
     }
   ],

package/dist/items/tooltip.json

@@ -3,7 +3,7 @@
   "primaryExport": "Tooltip",
   "files": [
     {
-      "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: layerVars.notification },\n  popup: {\n    backgroundColor: colorVars.bgInverse,\n    borderRadius: radiusVars.sm,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgInverse,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n    maxWidth: sizeVars.contentXs,\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space3,\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  arrow: { fill: colorVars.bgInverse, height: spacingVars.space2, width: spacingVars.space3 },\n});\n\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\ntype TooltipContentProps = Omit<\n  ComponentProps<typeof TooltipPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof TooltipPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function TooltipContent({\n  align = \"center\",\n  side = \"top\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: TooltipContentProps) {\n  function getPopupStyles(state: TooltipPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      state.transitionStatus === \"starting\" && styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n      xstyle,\n    );\n  }\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <TooltipPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          {props.children}\n          <TooltipPrimitive.Arrow {...stylex.props(styles.arrow)} />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: layerVars.notification },\n  popup: {\n    backgroundColor: colorVars.bgInverse,\n    borderRadius: radiusVars.sm,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgInverse,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n    maxWidth: sizeVars.contentXs,\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space3,\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: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  arrow: { fill: colorVars.bgInverse, height: spacingVars.space2, width: spacingVars.space3 },\n});\n\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\ntype TooltipContentProps = Omit<\n  ComponentProps<typeof TooltipPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof TooltipPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function TooltipContent({\n  align = \"center\",\n  side = \"top\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: TooltipContentProps) {\n  function getPopupStyles(state: TooltipPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      (state.transitionStatus === \"starting\" || state.transitionStatus === \"ending\") &&\n        styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupEnding,\n      xstyle,\n    );\n  }\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <TooltipPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          {props.children}\n          <TooltipPrimitive.Arrow {...stylex.props(styles.arrow)} />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n",
       "path": "tooltip.tsx"
     }
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuee/registry",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
   "repository": {
     "type": "git",