@nuee/registry 0.4.0 → 0.5.0

package/dist/items/checkbox.json

@@ -3,11 +3,7 @@
   "primaryExport": "Checkbox",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { colorVars, motionVars, radiusVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgInverse,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: \"1.5rem\",\n    justifyContent: \"center\",\n    minHeight: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, opacity\",\n    width: \"1.5rem\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  checked: { backgroundColor: colorVars.bgActionPrimary, borderColor: colorVars.bgActionPrimary },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    width: \"100%\",\n  },\n});\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Checkbox({ xstyle, ...props }: CheckboxProps) {\n  return (\n    <CheckboxPrimitive.Root\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          xstyle,\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n        );\n        return stylexProps.className;\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          xstyle,\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n        );\n        return stylexProps.style;\n      }}\n    >\n      <CheckboxPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" weight=\"bold\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport {\n  colorVars,\n  motionVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CheckIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlPlacementStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgOnActionPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n    height: sizeVars.iconLg,\n    justifyContent: \"center\",\n    minHeight: sizeVars.iconLg,\n    minWidth: sizeVars.iconLg,\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.iconLg,\n    // Keep a text baseline whether the checked indicator is mounted or not.\n    \"::before\": { content: '\"\\\\200b\"' },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  checked: { backgroundColor: colorVars.bgActionPrimary, borderColor: colorVars.bgActionPrimary },\n  disabled: {\n    cursor: \"not-allowed\",\n    opacity: opacityVars.disabled,\n    \":hover\": { backgroundColor: colorVars.bgSurface },\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    width: \"100%\",\n  },\n});\n\nexport type CheckboxProps = Omit<\n  ComponentProps<typeof CheckboxPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  xstyle?: ControlPlacementStyles;\n};\n\nexport function Checkbox({ xstyle, ...props }: CheckboxProps) {\n  function getRootStyles(state: CheckboxPrimitive.Root.State) {\n    return stylex.props(\n      styles.root,\n      xstyle,\n      state.checked && styles.checked,\n      state.disabled && styles.disabled,\n    );\n  }\n  return (\n    <CheckboxPrimitive.Root\n      {...props}\n      className={(state) => getRootStyles(state).className}\n      style={(state) => getRootStyles(state).style}\n    >\n      <CheckboxPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <CheckIcon aria-hidden=\"true\" weight=\"bold\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n",
       "path": "checkbox.tsx"
     }
   ],

package/dist/items/collapsible.json

@@ -3,11 +3,7 @@
   "primaryExport": "Collapsible",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    minWidth: 0,\n    width: \"100%\",\n  },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    flexShrink: 0,\n    height: sizeVars.controlSm,\n    justifyContent: \"center\",\n    outline: \"none\",\n    padding: 0,\n    width: sizeVars.controlSm,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n  panel: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"var(--collapsible-panel-height)\",\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    opacity: 1,\n    overflow: \"hidden\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"height, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0.01ms\" },\n  },\n  panelTransitioning: { height: 0, opacity: 0 },\n  panelContent: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2 },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"transform\",\n  },\n});\n\nexport function Collapsible({ ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  const stylexProps = stylex.props(styles.root);\n  return (\n    <CollapsiblePrimitive.Root\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function CollapsibleTrigger({\n  children,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return sx.style;\n      }}\n    >\n      {children}\n      <span aria-hidden=\"true\" {...stylex.props(styles.icon)}>\n        <Icon name=\"caretUpDown\" />\n      </span>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nexport function CollapsibleContent({\n  children,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Panel>) {\n  return (\n    <CollapsiblePrimitive.Panel\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return sx.style;\n      }}\n    >\n      <div {...stylex.props(styles.panelContent)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  );\n}\n",
+      "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",
       "path": "collapsible.tsx"
     }
   ],

package/dist/items/combobox.json

@@ -3,11 +3,7 @@
   "primaryExport": "Combobox",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  inputGroup: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    height: sizeVars.controlMd,\n    width: \"14rem\",\n    paddingInlineStart: spacingVars.space3,\n    \":focus-within\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  searchIcon: { color: colorVars.fgSecondary, flexShrink: 0 },\n  input: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: \"none\",\n    color: colorVars.fgPrimary,\n    flex: 1,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    height: \"100%\",\n    minWidth: 0,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    \"::placeholder\": { color: colorVars.fgTertiary },\n  },\n  inputDisabled: { color: colorVars.fgDisabled, cursor: \"not-allowed\" },\n  trigger: {\n    alignItems: \"center\",\n    alignSelf: \"stretch\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    boxShadow: \"none\",\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    outline: \"none\",\n    width: sizeVars.controlMd,\n  },\n  triggerDisabled: {\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    maxHeight: \"min(20rem, var(--available-height))\",\n    minWidth: \"var(--anchor-width)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    padding: spacingVars.space1,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  list: { overflowY: \"auto\", overscrollBehavior: \"contain\" },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    cursor: \"default\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInlineEnd: spacingVars.space3,\n    paddingInlineStart: spacingVars.space8,\n    position: \"relative\",\n    userSelect: \"none\",\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  empty: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    padding: spacingVars.space4,\n    textAlign: \"center\",\n    \":empty\": { padding: 0 },\n  },\n  label: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space2,\n  },\n  separator: {\n    backgroundColor: colorVars.strokeDefault,\n    height: sizeVars.stroke,\n    marginBlock: spacingVars.space1,\n    marginInline: -spacingVars.space1,\n  },\n});\n\nexport const Combobox = ComboboxPrimitive.Root;\nexport const ComboboxCollection = ComboboxPrimitive.Collection;\nexport const ComboboxGroup = ComboboxPrimitive.Group;\n\nexport function ComboboxInput({ ...props }: ComponentProps<typeof ComboboxPrimitive.Input>) {\n  return (\n    <ComboboxPrimitive.InputGroup {...stylex.props(styles.inputGroup)}>\n      <Icon aria-hidden=\"true\" name=\"search\" {...stylex.props(styles.searchIcon)} />\n      <ComboboxPrimitive.Input\n        {...props}\n        className={(state) => {\n          const sx = stylex.props(styles.input, state.disabled && styles.inputDisabled);\n          return sx.className;\n        }}\n        style={(state) => {\n          const sx = stylex.props(styles.input, state.disabled && styles.inputDisabled);\n          return sx.style;\n        }}\n      />\n      <ComboboxPrimitive.Trigger\n        aria-label=\"Open options\"\n        className={(state) =>\n          stylex.props(styles.trigger, state.disabled && styles.triggerDisabled).className ?? \"\"\n        }\n        style={(state) =>\n          stylex.props(styles.trigger, state.disabled && styles.triggerDisabled).style\n        }\n      >\n        <Icon aria-hidden=\"true\" name=\"chevronDown\" />\n      </ComboboxPrimitive.Trigger>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\ntype ComboboxContentProps = ComponentProps<typeof ComboboxPrimitive.Popup> &\n  Pick<ComponentProps<typeof ComboboxPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    children: ReactNode;\n  };\n\nexport function ComboboxContent({\n  align = \"start\",\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <ComboboxPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.className;\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.style;\n          }}\n        >\n          <ComboboxPrimitive.List {...stylex.props(styles.list)}>{children}</ComboboxPrimitive.List>\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nexport function ComboboxItem({\n  children,\n  ...props\n}: ComponentProps<typeof ComboboxPrimitive.Item>) {\n  return (\n    <ComboboxPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\n    >\n      <ComboboxPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </ComboboxPrimitive.ItemIndicator>\n      {children}\n    </ComboboxPrimitive.Item>\n  );\n}\n\nexport function ComboboxEmpty(props: ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return <ComboboxPrimitive.Empty {...props} {...stylex.props(styles.empty)} />;\n}\n\nexport function ComboboxLabel(props: ComponentProps<typeof ComboboxPrimitive.GroupLabel>) {\n  return <ComboboxPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function ComboboxSeparator(props: ComponentProps<typeof ComboboxPrimitive.Separator>) {\n  return <ComboboxPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
+      "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",
       "path": "combobox.tsx"
     }
   ],

package/dist/items/content-row.json

@@ -3,8 +3,12 @@
   "primaryExport": "ContentRow",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    width: \"100%\",\n  },\n  variantDefault: { backgroundColor: \"transparent\" },\n  muted: { backgroundColor: colorVars.bgSubtle },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlSm, padding: spacingVars.space2 },\n  sm: { gap: spacingVars.space3, minHeight: sizeVars.touchTarget, padding: spacingVars.space3 },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4rem\", padding: spacingVars.space4 },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n  },\n  mediaicon: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    height: sizeVars.controlMd,\n    width: sizeVars.controlMd,\n  },\n  mediaavatar: { borderRadius: radiusVars.full },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.touchTarget,\n    width: sizeVars.touchTarget,\n  },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  actions: { alignItems: \"center\", display: \"flex\", flexShrink: 0, gap: spacingVars.space2 },\n});\n\nexport type ContentRowSize = \"default\" | \"sm\" | \"xs\";\nexport type ContentRowVariant = \"default\" | \"muted\" | \"outline\";\n\nexport type ContentRowProps = ComponentProps<\"div\"> & {\n  size?: ContentRowSize;\n  variant?: ContentRowVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ContentRow({\n  size = \"default\",\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ContentRowProps) {\n  return (\n    <div\n      {...props}\n      {...stylex.props(\n        styles.root,\n        size === \"default\" ? styles.sizeDefault : styles[size],\n        variant === \"default\" ? styles.variantDefault : styles[variant],\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport function ContentRowGroup({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport type ContentRowMediaProps = ComponentProps<\"div\"> & {\n  variant?: \"avatar\" | \"icon\" | \"image\";\n};\n\nexport function ContentRowMedia({ variant = \"icon\", ...props }: ContentRowMediaProps) {\n  return <div {...props} {...stylex.props(styles.media, styles[`media${variant}`])} />;\n}\n\nexport function ContentRowContent({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function ContentRowTitle({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function ContentRowDescription({ ...props }: ComponentProps<\"p\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n\nexport function ContentRowActions({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.actions)} />;\n}\n",
+      "content": "import { colorVars, radiusVars, sizeVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { typographyStyles } from \"./typography\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    minWidth: 0,\n    width: \"100%\",\n  },\n  variantDefault: { backgroundColor: \"transparent\" },\n  muted: { backgroundColor: colorVars.bgSubtle },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  xs: { gap: spacingVars.space2, minHeight: sizeVars.controlSm, padding: spacingVars.space2 },\n  sm: { gap: spacingVars.space3, minHeight: sizeVars.touchTarget, padding: spacingVars.space3 },\n  sizeDefault: { gap: spacingVars.space3, minHeight: \"4rem\", padding: spacingVars.space4 },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  media: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n  },\n  mediaicon: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    height: sizeVars.controlMd,\n    width: sizeVars.controlMd,\n  },\n  mediaavatar: { borderRadius: radiusVars.full },\n  mediaimage: {\n    borderRadius: radiusVars.sm,\n    height: sizeVars.touchTarget,\n    width: sizeVars.touchTarget,\n  },\n  content: {\n    alignSelf: \"baseline\",\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    margin: 0,\n  },\n  actions: {\n    alignItems: \"baseline\",\n    alignSelf: \"baseline\",\n    display: \"flex\",\n    flexShrink: 0,\n    gap: spacingVars.space2,\n  },\n});\n\nexport type ContentRowSize = \"default\" | \"sm\" | \"xs\";\nexport type ContentRowVariant = \"default\" | \"muted\" | \"outline\";\n\nexport type ContentRowProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  size?: ContentRowSize;\n  variant?: ContentRowVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function ContentRow({\n  size = \"default\",\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ContentRowProps) {\n  return (\n    <div\n      {...props}\n      {...stylex.props(\n        styles.root,\n        size === \"default\" ? styles.sizeDefault : styles[size],\n        variant === \"default\" ? styles.variantDefault : styles[variant],\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport function ContentRowGroup({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport type ContentRowMediaProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\n  variant?: \"avatar\" | \"icon\" | \"image\";\n};\n\nexport function ContentRowMedia({ variant = \"icon\", ...props }: ContentRowMediaProps) {\n  return <div {...props} {...stylex.props(styles.media, styles[`media${variant}`])} />;\n}\n\nexport function ContentRowContent({\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function ContentRowTitle({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(typographyStyles.title)} />;\n}\n\nexport function ContentRowDescription({\n  ...props\n}: Omit<ComponentProps<\"p\">, \"className\" | \"style\">) {\n  return <p {...props} {...stylex.props(typographyStyles.description, styles.description)} />;\n}\n\nexport function ContentRowActions({\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.actions)} />;\n}\n",
       "path": "content-row.tsx"
+    },
+    {
+      "content": "import { typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nexport const typographyStyles = stylex.create({\n  body: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  caption: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  label: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  title: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  page: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeXl,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  section: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  subsection: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n});\n",
+      "path": "typography.ts"
     }
   ],
   "dependencies": [

package/dist/items/context-menu.json

@@ -3,7 +3,7 @@
   "primaryExport": "ContextMenu",
   "files": [
     {
-      "content": "import { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\";\n\nexport {\n  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,\n  DropdownMenuContent as ContextMenuContent,\n  DropdownMenuGroup as ContextMenuGroup,\n  DropdownMenuItem as ContextMenuItem,\n  DropdownMenuLabel as ContextMenuLabel,\n  DropdownMenuRadioGroup as ContextMenuRadioGroup,\n  DropdownMenuRadioItem as ContextMenuRadioItem,\n  DropdownMenuSeparator as ContextMenuSeparator,\n  DropdownMenuShortcut as ContextMenuShortcut,\n  DropdownMenuSub as ContextMenuSub,\n  DropdownMenuSubContent as ContextMenuSubContent,\n  DropdownMenuSubTrigger as ContextMenuSubTrigger,\n} from \"./dropdown-menu\";\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n",
+      "content": "\"use client\";\n\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\";\n\nexport {\n  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,\n  DropdownMenuContent as ContextMenuContent,\n  DropdownMenuGroup as ContextMenuGroup,\n  DropdownMenuItem as ContextMenuItem,\n  DropdownMenuLabel as ContextMenuLabel,\n  DropdownMenuRadioGroup as ContextMenuRadioGroup,\n  DropdownMenuRadioItem as ContextMenuRadioItem,\n  DropdownMenuSeparator as ContextMenuSeparator,\n  DropdownMenuShortcut as ContextMenuShortcut,\n  DropdownMenuSub as ContextMenuSub,\n  DropdownMenuSubContent as ContextMenuSubContent,\n  DropdownMenuSubTrigger as ContextMenuSubTrigger,\n} from \"./dropdown-menu\";\n\nexport const ContextMenu = ContextMenuPrimitive.Root;\nexport const ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n",
       "path": "context-menu.tsx"
     }
   ],

package/dist/items/date-picker.json

@@ -0,0 +1,19 @@
+{
+  "name": "date-picker",
+  "primaryExport": "DatePicker",
+  "files": [
+    {
+      "content": "\"use client\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { useState } from \"react\";\n\nimport { Calendar } from \"./calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst styles = stylex.create({\n  root: { display: \"inline-flex\", minWidth: \"13rem\" },\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    fontWeight: typographyVars.fontWeightRegular,\n    height: sizeVars.controlMd,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    textAlign: \"left\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \":hover\": { borderColor: colorVars.strokeStrong },\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\": {\n      backgroundColor: colorVars.bgSubtle,\n      borderColor: colorVars.strokeDefault,\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n    },\n  },\n  placeholder: { color: colorVars.fgSecondary },\n  calendar: { padding: 0, width: \"fit-content\" },\n  value: { fontWeight: typographyVars.fontWeightRegular },\n});\n\nexport type DatePickerProps = {\n  defaultValue?: Date;\n  disabled?: boolean;\n  format?: (date: Date) => string;\n  onValueChange?: (date: Date | undefined) => void;\n  placeholder?: string;\n  value?: Date;\n  xstyle?: stylex.StyleXStyles;\n};\n\nfunction defaultFormat(date: Date) {\n  return new Intl.DateTimeFormat(undefined, { dateStyle: \"medium\" }).format(date);\n}\n\nexport function DatePicker(props: DatePickerProps) {\n  const {\n    defaultValue,\n    disabled,\n    format = defaultFormat,\n    onValueChange,\n    placeholder = \"Pick a date\",\n    value,\n    xstyle,\n  } = props;\n  const [open, setOpen] = useState(false);\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = Object.hasOwn(props, \"value\");\n  const selectedValue = isControlled ? value : uncontrolledValue;\n\n  function handleSelect(date: Date | undefined) {\n    if (!isControlled) setUncontrolledValue(date);\n    onValueChange?.(date);\n    setOpen(false);\n  }\n\n  return (\n    <span {...stylex.props(styles.root, xstyle)}>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <button disabled={disabled} type=\"button\" {...stylex.props(styles.trigger)}>\n              {selectedValue ? (\n                <span {...stylex.props(styles.value)}>{format(selectedValue)}</span>\n              ) : (\n                <span {...stylex.props(styles.placeholder)}>{placeholder}</span>\n              )}\n            </button>\n          }\n        />\n        <PopoverContent xstyle={styles.calendar}>\n          <Calendar mode=\"single\" onSelect={handleSelect} selected={selectedValue} />\n        </PopoverContent>\n      </Popover>\n    </span>\n  );\n}\n",
+      "path": "date-picker.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@phosphor-icons/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": [
+    "calendar",
+    "popover"
+  ]
+}

package/dist/items/dialog.json

@@ -3,11 +3,7 @@
   "primaryExport": "Dialog",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: 51,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"32rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  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    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 = ComponentProps<typeof DialogPrimitive.Popup> & {\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              <Icon aria-hidden=\"true\" name=\"close\" />\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}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DialogFooter({\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n\nexport function DialogTitle({ ...props }: ComponentProps<typeof DialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function DialogDescription({\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\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  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",
       "path": "dialog.tsx"
     }
   ],

package/dist/items/drawer.json

@@ -3,7 +3,7 @@
   "primaryExport": "Drawer",
   "files": [
     {
-      "content": "import { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, useContext } from \"react\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  overlay: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  overlayTransparent: { backdropFilter: \"none\", backgroundColor: \"transparent\" },\n  viewport: { inset: 0, position: \"fixed\", zIndex: 51 },\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)\": { transitionDuration: motionVars.durationNormal },\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: \"1rem 1rem 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 1rem 1rem\",\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: \"24rem\",\n    top: 0,\n    width: \"75vw\",\n  },\n  leftPopup: {\n    borderRadius: \"0 1rem 1rem 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: \"1rem 0 0 1rem\",\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: \"0.25rem\",\n    marginBlock: spacingVars.space2,\n    width: \"2.5rem\",\n  },\n  horizontalSwipeHandle: {\n    height: \"2.5rem\",\n    marginBlock: 0,\n    position: \"absolute\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    width: \"0.25rem\",\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<ComponentProps<typeof DrawerPrimitive.Root>, \"swipeDirection\"> & {\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 = ComponentProps<typeof DrawerPrimitive.Backdrop> & {\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      className={() => {\n        const stylexProps = stylex.props(styles.overlay, xstyle);\n        return stylexProps.className;\n      }}\n      style={() => {\n        const stylexProps = stylex.props(styles.overlay, xstyle);\n        return stylexProps.style;\n      }}\n    />\n  );\n}\n\ntype DrawerSwipeHandleProps = ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles };\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 = ComponentProps<typeof DrawerPrimitive.Popup> & {\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          className={() => {\n            const stylexProps = getDrawerPopupStylexProps(swipeDirection, xstyle);\n            return stylexProps.className;\n          }}\n          style={() => {\n            const stylexProps = getDrawerPopupStylexProps(swipeDirection, xstyle);\n            return stylexProps.style;\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}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DrawerFooter({\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { 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({ ...props }: ComponentProps<typeof DrawerPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DrawerPrimitive.Title\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  ...props\n}: ComponentProps<typeof DrawerPrimitive.Description>) {\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\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",
       "path": "drawer.tsx"
     }
   ],

package/dist/items/dropdown-menu.json

@@ -3,11 +3,7 @@
   "primaryExport": "DropdownMenu",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    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: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamily,\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 = ComponentProps<typeof MenuPrimitive.Popup> &\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  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) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.className;\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.style;\n          }}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\ntype DropdownMenuItemProps = ComponentProps<typeof MenuPrimitive.Item> & {\n  destructive?: boolean;\n  inset?: boolean;\n};\n\nexport function DropdownMenuItem({\n  destructive = false,\n  inset = false,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n          destructive && styles.destructive,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n          destructive && styles.destructive,\n        );\n        return sx.style;\n      }}\n    />\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  children,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\n    >\n      <MenuPrimitive.CheckboxItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  children,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\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}: ComponentProps<typeof MenuPrimitive.GroupLabel> & { inset?: boolean }) {\n  const sx = stylex.props(styles.label, inset && styles.inset);\n  return (\n    <MenuPrimitive.GroupLabel {...props} className={() => sx.className} style={() => sx.style} />\n  );\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n\nexport function DropdownMenuShortcut({\n  children,\n  ...props\n}: ComponentProps<\"span\"> & { 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}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n        );\n        return sx.style;\n      }}\n    >\n      {children}\n      <Icon aria-hidden=\"true\" name=\"chevronRight\" {...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\" && 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",
       "path": "dropdown-menu.tsx"
     }
   ],

package/dist/items/empty.json

@@ -3,7 +3,7 @@
   "primaryExport": "Empty",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"dashed\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    justifyContent: \"center\",\n    minWidth: 0,\n    padding: spacingVars.space8,\n    textAlign: \"center\",\n  },\n  header: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    maxWidth: sizeVars.contentSm,\n  },\n  media: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    width: sizeVars.touchTarget,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxWidth: sizeVars.contentSm,\n    width: \"100%\",\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport function Empty({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.root, xstyle)} />;\n}\n\nexport function EmptyHeader({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function EmptyMedia({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} aria-hidden=\"true\" {...stylex.props(styles.media, xstyle)} />;\n}\n\nexport function EmptyTitle({ children, xstyle, ...props }: ComponentProps<\"h3\"> & StyleProps) {\n  return (\n    <h3 {...props} {...stylex.props(styles.title, xstyle)}>\n      {children}\n    </h3>\n  );\n}\n\nexport function EmptyDescription({ xstyle, ...props }: ComponentProps<\"p\"> & StyleProps) {\n  return <p {...props} {...stylex.props(styles.description, xstyle)} />;\n}\n\nexport function EmptyContent({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.content, xstyle)} />;\n}\n",
+      "content": "import {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"dashed\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    justifyContent: \"center\",\n    minWidth: 0,\n    padding: spacingVars.space8,\n    textAlign: \"center\",\n  },\n  header: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    maxWidth: sizeVars.contentSm,\n  },\n  media: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    width: sizeVars.touchTarget,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxWidth: sizeVars.contentSm,\n    width: \"100%\",\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport function Empty({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.root, xstyle)} />;\n}\n\nexport function EmptyHeader({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function EmptyMedia({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} aria-hidden=\"true\" {...stylex.props(styles.media, xstyle)} />;\n}\n\nexport function EmptyTitle({\n  children,\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"h3\">, \"className\" | \"style\"> & StyleProps) {\n  return (\n    <h3 {...props} {...stylex.props(styles.title, xstyle)}>\n      {children}\n    </h3>\n  );\n}\n\nexport function EmptyDescription({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"p\">, \"className\" | \"style\"> & StyleProps) {\n  return <p {...props} {...stylex.props(styles.description, xstyle)} />;\n}\n\nexport function EmptyContent({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.content, xstyle)} />;\n}\n",
       "path": "empty.tsx"
     }
   ],

package/dist/items/field.json

@@ -3,13 +3,20 @@
   "primaryExport": "Field",
   "files": [
     {
-      "content": "import { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", gap: spacingVars.space2, width: \"100%\" },\n  vertical: { flexDirection: \"column\" },\n  horizontal: { alignItems: \"center\", flexDirection: \"row\", gap: spacingVars.space4 },\n  label: {\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  error: {\n    color: colorVars.fgFeedbackError,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  set: {\n    borderStyle: \"none\",\n    borderWidth: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    margin: 0,\n    minWidth: 0,\n    padding: 0,\n  },\n  legend: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightMedium,\n    marginBottom: spacingVars.space3,\n    padding: 0,\n  },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space6, width: \"100%\" },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype FieldOrientation = \"horizontal\" | \"vertical\";\n\nexport type FieldProps = ComponentProps<typeof FieldPrimitive.Root> &\n  StyleProps & { orientation?: FieldOrientation };\n\nexport function Field({ orientation = \"vertical\", xstyle, ...props }: FieldProps) {\n  const stylexProps = stylex.props(styles.root, styles[orientation], xstyle);\n\n  return <FieldPrimitive.Root {...props} data-orientation={orientation} {...stylexProps} />;\n}\n\nexport function FieldLabel({\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Label> & StyleProps) {\n  const stylexProps = stylex.props(styles.label, xstyle);\n  return <FieldPrimitive.Label {...props} {...stylexProps} />;\n}\n\nexport function FieldDescription({\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Description> & StyleProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n  return <FieldPrimitive.Description {...props} {...stylexProps} />;\n}\n\nexport function FieldError({\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Error> & StyleProps) {\n  const stylexProps = stylex.props(styles.error, xstyle);\n  return <FieldPrimitive.Error {...props} {...stylexProps} />;\n}\n\nexport function FieldSet({ xstyle, ...props }: ComponentProps<\"fieldset\"> & StyleProps) {\n  return <fieldset {...props} {...stylex.props(styles.set, xstyle)} />;\n}\n\nexport function FieldLegend({ xstyle, ...props }: ComponentProps<\"legend\"> & StyleProps) {\n  return <legend {...props} {...stylex.props(styles.legend, xstyle)} />;\n}\n\nexport function FieldGroup({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.group, xstyle)} />;\n}\n\nexport function FieldContent({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.content, xstyle)} />;\n}\n\nexport function FieldTitle({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.title, xstyle)} />;\n}\n",
+      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { typographyStyles } from \"./typography\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", gap: spacingVars.space2, width: \"100%\" },\n  vertical: { flexDirection: \"column\" },\n  horizontal: { alignItems: \"baseline\", flexDirection: \"row\", gap: spacingVars.space4 },\n  label: {\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    margin: 0,\n  },\n  error: {\n    color: colorVars.fgFeedbackError,\n  },\n  set: {\n    borderStyle: \"none\",\n    borderWidth: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    margin: 0,\n    minWidth: 0,\n    padding: 0,\n  },\n  legend: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightMedium,\n    marginBottom: spacingVars.space3,\n    padding: 0,\n  },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space6, width: \"100%\" },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype FieldOrientation = \"horizontal\" | \"vertical\";\n\nexport type FieldProps = Omit<ComponentProps<typeof FieldPrimitive.Root>, \"className\" | \"style\"> &\n  StyleProps & { orientation?: FieldOrientation };\n\nexport function Field({ orientation = \"vertical\", xstyle, ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      {...props}\n      data-orientation={orientation}\n      {...stylex.props(styles.root, styles[orientation], xstyle)}\n    />\n  );\n}\n\nexport function FieldLabel({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<typeof FieldPrimitive.Label>, \"className\" | \"style\"> & StyleProps) {\n  return (\n    <FieldPrimitive.Label\n      {...props}\n      {...stylex.props(typographyStyles.label, styles.label, xstyle)}\n    />\n  );\n}\n\nexport function FieldDescription({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<typeof FieldPrimitive.Description>, \"className\" | \"style\"> & StyleProps) {\n  return (\n    <FieldPrimitive.Description\n      {...props}\n      {...stylex.props(typographyStyles.description, styles.description, xstyle)}\n    />\n  );\n}\n\nexport function FieldError({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<typeof FieldPrimitive.Error>, \"className\" | \"style\"> & StyleProps) {\n  return (\n    <FieldPrimitive.Error\n      {...props}\n      {...stylex.props(typographyStyles.description, styles.error, xstyle)}\n    />\n  );\n}\n\nexport function FieldSet({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"fieldset\">, \"className\" | \"style\"> & StyleProps) {\n  return <fieldset {...props} {...stylex.props(styles.set, xstyle)} />;\n}\n\nexport function FieldLegend({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"legend\">, \"className\" | \"style\"> & StyleProps) {\n  return <legend {...props} {...stylex.props(styles.legend, xstyle)} />;\n}\n\nexport function FieldGroup({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.group, xstyle)} />;\n}\n\nexport function FieldContent({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.content, xstyle)} />;\n}\n\nexport function FieldTitle({\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps) {\n  return <div {...props} {...stylex.props(typographyStyles.label, styles.title, xstyle)} />;\n}\n",
       "path": "field.tsx"
+    },
+    {
+      "content": "import { typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nexport const typographyStyles = stylex.create({\n  body: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  caption: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  label: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  title: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  page: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeXl,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  section: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  subsection: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n});\n",
+      "path": "typography.ts"
     }
   ],
   "dependencies": [
     "@base-ui/react",
     "@stylexjs/stylex"
   ],
-  "registryDependencies": []
+  "registryDependencies": [
+    "checkbox",
+    "input"
+  ]
 }

package/dist/items/heading.json

@@ -0,0 +1,18 @@
+{
+  "name": "heading",
+  "primaryExport": "Heading",
+  "files": [
+    {
+      "content": "import { colorVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { typographyStyles } from \"./typography\";\n\nconst styles = stylex.create({\n  root: { color: colorVars.fgPrimary, margin: 0 },\n});\n\nexport type HeadingProps = Omit<ComponentProps<\"h1\">, \"className\" | \"style\"> & {\n  level: 1 | 2 | 3 | 4 | 5 | 6;\n  size?: \"page\" | \"section\" | \"subsection\";\n};\n\nconst elements = { 1: \"h1\", 2: \"h2\", 3: \"h3\", 4: \"h4\", 5: \"h5\", 6: \"h6\" } as const;\n\nexport function Heading({ level, size = \"section\", ...props }: HeadingProps) {\n  const Element = elements[level];\n  return <Element {...props} {...stylex.props(styles.root, typographyStyles[size])} />;\n}\n",
+      "path": "heading.tsx"
+    },
+    {
+      "content": "import { typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nexport const typographyStyles = stylex.create({\n  body: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  caption: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  label: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  title: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  page: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeXl,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  section: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  subsection: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n});\n",
+      "path": "typography.ts"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/hover-card.json

@@ -3,7 +3,7 @@
   "primaryExport": "HoverCard",
   "files": [
     {
-      "content": "import { PreviewCard } from \"@base-ui/react/preview-card\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  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: 60,\n    \"@media (prefers-reduced-motion: reduce)\": { transform: \"none\", transitionDuration: \"0.01ms\" },\n  },\n  transitioning: { opacity: 0, transform: \"translateY(0.25rem) scale(0.98)\" },\n});\n\nexport const HoverCard = PreviewCard.Root;\nexport const HoverCardTrigger = PreviewCard.Trigger;\n\nexport type HoverCardContentProps = ComponentProps<typeof PreviewCard.Popup> & {\n  align?: ComponentProps<typeof PreviewCard.Positioner>[\"align\"];\n  side?: ComponentProps<typeof PreviewCard.Positioner>[\"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  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",
       "path": "hover-card.tsx"
     }
   ],