@nuee/registry 0.3.0

package/dist/items/native-select.json

@@ -0,0 +1,19 @@
+{
+  "name": "native-select",
+  "primaryExport": "NativeSelect",
+  "files": [
+    {
+      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
+      "path": "Icon.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"inline-flex\", position: \"relative\", width: \"fit-content\" },\n  select: {\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    fontSize: typographyVars.fontSizeSm,\n    minWidth: \"10rem\",\n    outline: \"none\",\n    paddingInlineStart: spacingVars.space3,\n    paddingInlineEnd: spacingVars.space8,\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      \":hover\": { borderColor: colorVars.strokeDefault },\n    },\n  },\n  sm: { height: sizeVars.controlSm },\n  md: { height: sizeVars.controlMd },\n  icon: {\n    color: colorVars.fgSecondary,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n});\n\nexport type NativeSelectProps = Omit<ComponentProps<\"select\">, \"size\"> & {\n  size?: \"md\" | \"sm\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function NativeSelect({\n  className,\n  children,\n  size = \"md\",\n  style,\n  xstyle,\n  ...props\n}: NativeSelectProps) {\n  const stylexProps = stylex.props(styles.select, styles[size], xstyle);\n  return (\n    <span {...stylex.props(styles.root)}>\n      <select\n        {...props}\n        className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n        style={{ ...stylexProps.style, ...style }}\n      >\n        {children}\n      </select>\n      <Icon aria-hidden=\"true\" name=\"chevronDown\" {...stylex.props(styles.icon)} />\n    </span>\n  );\n}\n\nexport function NativeSelectOption(props: ComponentProps<\"option\">) {\n  return <option {...props} />;\n}\nexport function NativeSelectOptGroup(props: ComponentProps<\"optgroup\">) {\n  return <optgroup {...props} />;\n}\n",
+      "path": "native-select.tsx"
+    }
+  ],
+  "dependencies": [
+    "@phosphor-icons/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/navigation-menu.json

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

package/dist/items/pagination.json

@@ -0,0 +1,19 @@
+{
+  "name": "pagination",
+  "primaryExport": "Pagination",
+  "files": [
+    {
+      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
+      "path": "Icon.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\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: { display: \"flex\", justifyContent: \"center\", width: \"100%\" },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space1,\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { display: \"inline-flex\" },\n  link: {\n    alignItems: \"center\",\n    backgroundColor: {\n      default: \"transparent\",\n      \":hover\": colorVars.interactionHover,\n      \":active\": colorVars.interactionPressed,\n    },\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    minHeight: sizeVars.controlMd,\n    outline: \"none\",\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \"[aria-disabled='true']\": {\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      pointerEvents: \"none\",\n    },\n  },\n  icon: { width: sizeVars.controlMd },\n  default: { paddingInline: spacingVars.space3 },\n  active: { backgroundColor: colorVars.bgSurfacePressed, borderColor: colorVars.strokeStrong },\n  ellipsis: {\n    alignItems: \"center\",\n    color: colorVars.fgTertiary,\n    display: \"inline-flex\",\n    height: sizeVars.controlMd,\n    justifyContent: \"center\",\n    width: sizeVars.controlMd,\n  },\n});\n\nexport function Pagination({ className, style, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.root), className, style)}\n    />\n  );\n}\n\nexport function PaginationContent({ className, style, ...props }: ComponentProps<\"ul\">) {\n  return <ul {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />;\n}\n\nexport function PaginationItem({ className, style, ...props }: ComponentProps<\"li\">) {\n  return <li {...props} {...getNativeStyleProps(stylex.props(styles.item), className, style)} />;\n}\n\nexport type PaginationLinkProps = ComponentProps<\"a\"> & {\n  isActive?: boolean;\n  size?: \"default\" | \"icon\";\n};\n\nexport function PaginationLink({\n  children,\n  className,\n  isActive = false,\n  size = \"icon\",\n  style,\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(styles.link, styles[size], isActive && styles.active),\n        className,\n        style,\n      )}\n    >\n      {children}\n    </a>\n  );\n}\n\nexport function PaginationPrevious({ children, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink aria-label=\"Previous page\" size=\"default\" {...props}>\n      <Icon aria-hidden=\"true\" name=\"chevronLeft\" />\n      {children ?? \"Previous\"}\n    </PaginationLink>\n  );\n}\n\nexport function PaginationNext({ children, ...props }: PaginationLinkProps) {\n  return (\n    <PaginationLink aria-label=\"Next page\" size=\"default\" {...props}>\n      {children ?? \"Next\"}\n      <Icon aria-hidden=\"true\" name=\"chevronRight\" />\n    </PaginationLink>\n  );\n}\n\nexport function PaginationEllipsis({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.ellipsis), className, style)}\n    >\n      …\n    </span>\n  );\n}\n",
+      "path": "pagination.tsx"
+    }
+  ],
+  "dependencies": [
+    "@phosphor-icons/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/popover.json

@@ -0,0 +1,15 @@
+{
+  "name": "popover",
+  "primaryExport": "Popover",
+  "files": [
+    {
+      "content": "import { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\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  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    maxWidth: \"calc(100vw - 2rem)\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"18rem\",\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  header: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space1 },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverClose = PopoverPrimitive.Close;\n\ntype PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Popup> &\n  Pick<ComponentProps<typeof PopoverPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function PopoverContent({\n  align = \"start\",\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  style,\n  xstyle,\n  ...props\n}: PopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <PopoverPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const stylexProps = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n              xstyle,\n            );\n            return [\n              stylexProps.className,\n              typeof className === \"function\" ? className(state) : className,\n            ]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            const stylexProps = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n              xstyle,\n            );\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverHeader({ className, style, ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...getNativeStyleProps(stylex.props(styles.header), className, style)} />;\n}\nexport function PopoverTitle({ children, className, style, ...props }: ComponentProps<\"h2\">) {\n  return (\n    <h2 {...props} {...getNativeStyleProps(stylex.props(styles.title), className, style)}>\n      {children}\n    </h2>\n  );\n}\nexport function PopoverDescription({ className, style, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p {...props} {...getNativeStyleProps(stylex.props(styles.description), className, style)} />\n  );\n}\n",
+      "path": "popover.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/progress.json

@@ -0,0 +1,15 @@
+{
+  "name": "progress",
+  "primaryExport": "Progress",
+  "files": [
+    {
+      "content": "import { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, motionVars, radiusVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    height: \"0.5rem\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  indicator: {\n    backgroundColor: colorVars.bgActionPrimary,\n    height: \"100%\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"width\",\n  },\n});\n\nexport type ProgressProps = ComponentProps<typeof ProgressPrimitive.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Progress({ className, style, xstyle, ...props }: ProgressProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <ProgressPrimitive.Root\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    >\n      <ProgressPrimitive.Indicator {...stylex.props(styles.indicator)} />\n    </ProgressPrimitive.Root>\n  );\n}\n",
+      "path": "progress.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/radio-group.json

@@ -0,0 +1,15 @@
+{
+  "name": "radio-group",
+  "primaryExport": "RadioGroup",
+  "files": [
+    {
+      "content": "import { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  opacityVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space3 },\n  item: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: \"1.5rem\",\n    justifyContent: \"center\",\n    outline: \"none\",\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\", opacity: opacityVars.disabled },\n  },\n  checked: { borderColor: colorVars.strokeAction },\n  indicator: { alignItems: \"center\", display: \"inline-flex\", justifyContent: \"center\" },\n  dot: {\n    backgroundColor: colorVars.bgActionPrimary,\n    borderRadius: radiusVars.full,\n    height: \"0.75rem\",\n    width: \"0.75rem\",\n  },\n});\n\nexport type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function RadioGroup({ className, style, xstyle, ...props }: RadioGroupProps) {\n  const stylexProps = stylex.props(styles.group, xstyle);\n  return (\n    <RadioGroupPrimitive\n      {...props}\n      className={(state) => {\n        const customClassName = typeof className === \"function\" ? className(state) : className;\n        return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n      }}\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof RadioPrimitive.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function RadioGroupItem({ className, style, xstyle, ...props }: RadioGroupItemProps) {\n  return (\n    <RadioPrimitive.Root\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(styles.item, state.checked && styles.checked, xstyle);\n        const customClassName = typeof className === \"function\" ? className(state) : className;\n        return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(styles.item, state.checked && styles.checked, xstyle);\n        return { ...stylexProps.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <RadioPrimitive.Indicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.dot)} />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  );\n}\n",
+      "path": "radio-group.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/scroll-area.json

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

package/dist/items/select.json

@@ -0,0 +1,20 @@
+{
+  "name": "select",
+  "primaryExport": "Select",
+  "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 { Select as SelectPrimitive } from \"@base-ui/react/select\";\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  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.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    height: sizeVars.controlMd,\n    justifyContent: \"space-between\",\n    width: \"11rem\",\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    \":hover\": { backgroundColor: colorVars.bgSurfacePressed },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  triggerDisabled: {\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.bgSubtle },\n  },\n  triggerIcon: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    flexShrink: 0,\n  },\n  positioner: { zIndex: 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\", padding: 0 },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInlineEnd: spacingVars.space3,\n    paddingInlineStart: spacingVars.space8,\n    position: \"relative\",\n    userSelect: \"none\",\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  label: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space2,\n  },\n  separator: {\n    backgroundColor: colorVars.strokeDefault,\n    height: sizeVars.stroke,\n    marginBlock: spacingVars.space1,\n    marginInline: -spacingVars.space1,\n  },\n});\n\nexport const Select = SelectPrimitive.Root;\nexport const SelectValue = SelectPrimitive.Value;\nexport const SelectGroup = SelectPrimitive.Group;\n\nexport function SelectTrigger({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Trigger>) {\n  return (\n    <SelectPrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      {children}\n      <SelectPrimitive.Icon {...stylex.props(styles.triggerIcon)}>\n        <Icon aria-hidden=\"true\" name=\"chevronDown\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\ntype SelectContentProps = ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    ComponentProps<typeof SelectPrimitive.Positioner>,\n    \"align\" | \"alignItemWithTrigger\" | \"side\" | \"sideOffset\"\n  > & { children: ReactNode };\n\nexport function SelectContent({\n  align = \"start\",\n  alignItemWithTrigger = false,\n  children,\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  style,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <SelectPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return [sx.className, typeof className === \"function\" ? className(state) : className]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n          }}\n        >\n          <SelectPrimitive.List {...stylex.props(styles.list)}>{children}</SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <SelectPrimitive.ItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </SelectPrimitive.ItemIndicator>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel(props: ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return <SelectPrimitive.GroupLabel {...props} {...stylex.props(styles.label)} />;\n}\n\nexport function SelectSeparator(props: ComponentProps<typeof SelectPrimitive.Separator>) {\n  return <SelectPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n",
+      "path": "select.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@phosphor-icons/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/separator.json

@@ -0,0 +1,15 @@
+{
+  "name": "separator",
+  "primaryExport": "Separator",
+  "files": [
+    {
+      "content": "import { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { backgroundColor: colorVars.strokeDefault, flexShrink: 0 },\n  horizontal: { height: sizeVars.stroke, width: \"100%\" },\n  vertical: { alignSelf: \"stretch\", minHeight: sizeVars.touchTarget, width: sizeVars.stroke },\n});\n\nexport type SeparatorProps = ComponentProps<typeof SeparatorPrimitive> & {\n  decorative?: boolean;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Separator({\n  className,\n  decorative = true,\n  orientation = \"horizontal\",\n  style,\n  xstyle,\n  ...props\n}: SeparatorProps) {\n  const stylexProps = stylex.props(styles.root, styles[orientation], xstyle);\n  return (\n    <SeparatorPrimitive\n      {...props}\n      aria-hidden={decorative || undefined}\n      orientation={orientation}\n      role={decorative ? \"presentation\" : undefined}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "path": "separator.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/skeleton.json

@@ -0,0 +1,14 @@
+{
+  "name": "skeleton",
+  "primaryExport": "Skeleton",
+  "files": [
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, radiusVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst pulse = stylex.keyframes({ \"0%, 100%\": { opacity: 1 }, \"50%\": { opacity: 0.5 } });\n\nconst styles = stylex.create({\n  root: {\n    animationDuration: \"1.5s\",\n    animationIterationCount: \"infinite\",\n    animationName: pulse,\n    animationTimingFunction: \"ease-in-out\",\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    \"@media (prefers-reduced-motion: reduce)\": { animationName: \"none\" },\n  },\n});\n\nexport type SkeletonProps = ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles };\n\nexport function Skeleton({ className, style, xstyle, ...props }: SkeletonProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <div\n      {...props}\n      aria-hidden=\"true\"\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "path": "skeleton.tsx"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/slider.json

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

package/dist/items/spinner.json

@@ -0,0 +1,14 @@
+{
+  "name": "spinner",
+  "primaryExport": "Spinner",
+  "files": [
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, radiusVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst spin = stylex.keyframes({ to: { transform: \"rotate(360deg)\" } });\n\nconst styles = stylex.create({\n  root: {\n    animationDuration: \"700ms\",\n    animationIterationCount: \"infinite\",\n    animationName: spin,\n    animationTimingFunction: \"linear\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderRightColor: colorVars.fgPrimary,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.focusRing,\n    display: \"inline-block\",\n    height: sizeVars.iconMd,\n    width: sizeVars.iconMd,\n    \"@media (prefers-reduced-motion: reduce)\": { animationDuration: \"1.5s\" },\n  },\n});\n\nexport type SpinnerProps = ComponentProps<\"output\"> & {\n  label?: string;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Spinner({ className, label = \"Loading\", style, xstyle, ...props }: SpinnerProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <output\n      {...props}\n      aria-label={label}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "path": "spinner.tsx"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/switch.json

@@ -0,0 +1,15 @@
+{
+  "name": "switch",
+  "primaryExport": "Switch",
+  "files": [
+    {
+      "content": "import { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, motionVars, radiusVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.interactionDisabled,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.full,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    outline: \"none\",\n    padding: \"0.125rem\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, opacity\",\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  sm: { height: \"1.5rem\", width: \"2rem\" },\n  md: { height: \"1.5rem\", width: \"2.5rem\" },\n  checked: { backgroundColor: colorVars.bgActionPrimary },\n  disabled: { backgroundColor: colorVars.interactionDisabled, cursor: \"not-allowed\" },\n  thumb: {\n    backgroundColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    display: \"block\",\n    transform: \"translateX(0)\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"transform\",\n  },\n  thumbsm: { height: \"1rem\", width: \"1rem\" },\n  thumbmd: { height: \"1.25rem\", width: \"1.25rem\" },\n  thumbCheckedsm: { transform: \"translateX(0.75rem)\" },\n  thumbCheckedmd: { transform: \"translateX(1rem)\" },\n});\n\nexport type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"md\" | \"sm\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Switch({ className, size = \"md\", style, xstyle, ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        const customClassName = typeof className === \"function\" ? className(state) : className;\n        return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        const customStyle = typeof style === \"function\" ? style(state) : style;\n        return { ...stylexProps.style, ...customStyle };\n      }}\n    >\n      <SwitchPrimitive.Thumb\n        className={(state) =>\n          stylex.props(\n            styles.thumb,\n            styles[`thumb${size}`],\n            state.checked && styles[`thumbChecked${size}`],\n          ).className\n        }\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n",
+      "path": "switch.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/table.json

@@ -0,0 +1,14 @@
+{
+  "name": "table",
+  "primaryExport": "Table",
+  "files": [
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, motionVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  container: { overflowX: \"auto\", position: \"relative\", width: \"100%\" },\n  table: {\n    borderCollapse: \"collapse\",\n    captionSide: \"bottom\",\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    width: \"100%\",\n  },\n  header: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n  },\n  body: {},\n  footer: {\n    backgroundColor: colorVars.bgSubtle,\n    borderTopColor: colorVars.strokeDefault,\n    borderTopStyle: \"solid\",\n    borderTopWidth: 1,\n    fontWeight: typographyVars.fontWeightMedium,\n  },\n  row: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    backgroundColor: {\n      default: \"transparent\",\n      \":hover\": colorVars.interactionHover,\n    },\n  },\n  head: {\n    color: colorVars.fgSecondary,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"2.5rem\",\n    paddingInline: spacingVars.space3,\n    textAlign: \"left\",\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n  },\n  cell: {\n    paddingBlock: spacingVars.space3,\n    paddingInline: spacingVars.space3,\n    verticalAlign: \"middle\",\n    whiteSpace: \"nowrap\",\n  },\n  caption: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    marginTop: spacingVars.space4,\n    textAlign: \"left\",\n  },\n});\n\nexport type TableProps = ComponentProps<\"table\"> & {\n  containerClassName?: string;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Table({ className, containerClassName, style, xstyle, ...props }: TableProps) {\n  return (\n    <div\n      className={[stylex.props(styles.container).className, containerClassName]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <table\n        {...props}\n        {...getNativeStyleProps(stylex.props(styles.table, xstyle), className, style)}\n      />\n    </div>\n  );\n}\n\nexport function TableHeader({ className, style, ...props }: ComponentProps<\"thead\">) {\n  return (\n    <thead {...props} {...getNativeStyleProps(stylex.props(styles.header), className, style)} />\n  );\n}\n\nexport function TableBody({ className, style, ...props }: ComponentProps<\"tbody\">) {\n  return <tbody {...props} {...getNativeStyleProps(stylex.props(styles.body), className, style)} />;\n}\n\nexport function TableFooter({ className, style, ...props }: ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot {...props} {...getNativeStyleProps(stylex.props(styles.footer), className, style)} />\n  );\n}\n\nexport function TableRow({ className, style, ...props }: ComponentProps<\"tr\">) {\n  return <tr {...props} {...getNativeStyleProps(stylex.props(styles.row), className, style)} />;\n}\n\nexport function TableHead({ className, style, ...props }: ComponentProps<\"th\">) {\n  return <th {...props} {...getNativeStyleProps(stylex.props(styles.head), className, style)} />;\n}\n\nexport function TableCell({ className, style, ...props }: ComponentProps<\"td\">) {\n  return <td {...props} {...getNativeStyleProps(stylex.props(styles.cell), className, style)} />;\n}\n\nexport function TableCaption({ className, style, ...props }: ComponentProps<\"caption\">) {\n  return (\n    <caption {...props} {...getNativeStyleProps(stylex.props(styles.caption), className, style)} />\n  );\n}\n",
+      "path": "table.tsx"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/tabs.json

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

package/dist/items/textarea.json

@@ -0,0 +1,14 @@
+{
+  "name": "textarea",
+  "primaryExport": "Textarea",
+  "files": [
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    minHeight: \"5rem\",\n    outline: \"none\",\n    padding: spacingVars.space3,\n    resize: \"vertical\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"::placeholder\": { color: colorVars.fgTertiary },\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      \":hover\": { borderColor: colorVars.strokeDefault },\n    },\n    \":user-invalid\": { borderColor: colorVars.strokeFeedbackError },\n  },\n  invalid: { borderColor: colorVars.strokeFeedbackError },\n});\n\nexport type TextareaProps = ComponentProps<\"textarea\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Textarea({\n  \"aria-invalid\": ariaInvalid,\n  className,\n  style,\n  xstyle,\n  ...props\n}: TextareaProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  const stylexProps = stylex.props(styles.root, isInvalid && styles.invalid, xstyle);\n\n  return (\n    <textarea\n      {...props}\n      aria-invalid={ariaInvalid}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "path": "textarea.tsx"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/toast.json

@@ -0,0 +1,24 @@
+{
+  "name": "toast",
+  "primaryExport": "toast",
+  "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 { Toast as ToastPrimitive } from \"@base-ui/react/toast\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { useLayoutEffect, useRef, useState, type ComponentProps } from \"react\";\n\nimport { Icon, type IconName } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { toastViewportVars } from \"./toast.stylex\";\n\nconst spin = stylex.keyframes({ to: { transform: \"rotate(360deg)\" } });\n\nconst styles = stylex.create({\n  viewport: {\n    maxWidth: \"24rem\",\n    outline: \"none\",\n    pointerEvents: \"none\",\n    position: \"fixed\",\n    width: \"calc(100vw - 2rem)\",\n    zIndex: 70,\n    [toastViewportVars.stackPointerEvents]: {\n      default: \"none\",\n      \":is([data-expanded])\": \"auto\",\n    },\n    [toastViewportVars.clearAllOpacity]: {\n      default: \"1\",\n      \":not([data-expanded])\": \"0\",\n    },\n    [toastViewportVars.clearAllPointerEvents]: {\n      default: \"auto\",\n      \":not([data-expanded])\": \"none\",\n    },\n  },\n  viewportTop: { top: spacingVars.space4 },\n  viewportBottom: { bottom: spacingVars.space4 },\n  viewportLeft: { left: spacingVars.space4 },\n  viewportCenter: { left: \"50%\", transform: \"translateX(-50%)\" },\n  viewportRight: { right: spacingVars.space4 },\n  stack: {\n    bottom: 0,\n    left: 0,\n    pointerEvents: toastViewportVars.stackPointerEvents,\n    position: \"absolute\",\n    right: 0,\n  },\n  stackTop: { bottom: \"auto\", top: 0 },\n  root: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    bottom: 0,\n    boxShadow: shadowVars.overlay,\n    color: colorVars.fgPrimary,\n    height: \"var(--toast-frontmost-height, var(--toast-height))\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    pointerEvents: \"auto\",\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    transform:\n      \"translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * 0.75rem) - ((1 - max(0, 1 - (var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height))))) scale(calc(max(0, 1 - (var(--toast-index) * 0.1))))\",\n    transformOrigin: \"bottom\",\n    transition: \"transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms, height 150ms\",\n    userSelect: \"none\",\n    width: \"100%\",\n    willChange: \"transform\",\n    zIndex: \"calc(1000 - var(--toast-index))\",\n    \"::after\": {\n      content: '\"\"',\n      height: \"calc(0.75rem + 1px)\",\n      left: 0,\n      position: \"absolute\",\n      top: \"100%\",\n      width: \"100%\",\n    },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":is([data-expanded])\": {\n      height: \"var(--toast-height)\",\n      overflow: \"visible\",\n      transform:\n        \"translateX(var(--toast-swipe-movement-x)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-limited])\": { opacity: 0, pointerEvents: \"none\" },\n    \":is([data-swiping])\": { transitionDuration: \"0ms\" },\n    \":is([data-starting-style])\": { opacity: 0, transform: \"translateY(150%)\" },\n    \":is([data-ending-style])\": { opacity: 0, transform: \"translateY(150%)\" },\n    \":is([data-ending-style][data-swipe-direction='up'])\": {\n      transform: \"translateY(calc(var(--toast-swipe-movement-y) - 150%))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='down'])\": {\n      transform: \"translateY(calc(var(--toast-swipe-movement-y) + 150%))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='left'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='right'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style])\": { transform: \"translateY(24%)\" },\n      \":is([data-ending-style])\": { transform: \"translateY(24%)\" },\n    },\n  },\n  rootTop: {\n    bottom: \"auto\",\n    top: 0,\n    transform:\n      \"translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * 0.75rem) + ((1 - max(0, 1 - (var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height))))) scale(calc(max(0, 1 - (var(--toast-index) * 0.1))))\",\n    transformOrigin: \"top\",\n    \":is([data-expanded])\": {\n      transform:\n        \"translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-starting-style])\": { transform: \"translateY(-150%)\" },\n    \":is([data-ending-style])\": { transform: \"translateY(-150%)\" },\n    \":is([data-ending-style][data-swipe-direction='left'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='right'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style])\": { transform: \"translateY(-24%)\" },\n      \":is([data-ending-style])\": { transform: \"translateY(-24%)\" },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space3,\n    height: \"100%\",\n    minHeight: \"4.75rem\",\n    overflow: \"hidden\",\n    padding: spacingVars.space4,\n    position: \"relative\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity\",\n    \":is([data-behind]:not([data-expanded]))\": { opacity: 0, pointerEvents: \"none\" },\n  },\n  message: {\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    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  statusIcon: {\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    marginTop: \"0.0625rem\",\n    width: sizeVars.iconMd,\n  },\n  default: { color: colorVars.fgSecondary },\n  success: { color: colorVars.fgFeedbackSuccess },\n  info: { color: colorVars.fgFeedbackInfo },\n  warning: { color: colorVars.fgFeedbackWarning },\n  error: { color: colorVars.fgFeedbackError },\n  loading: { color: colorVars.fgSecondary },\n  loadingIcon: {\n    animationDuration: \"700ms\",\n    animationIterationCount: \"infinite\",\n    animationName: spin,\n    animationTimingFunction: \"linear\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderRightColor: colorVars.fgPrimary,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.focusRing,\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    width: sizeVars.iconMd,\n    \"@media (prefers-reduced-motion: reduce)\": { animationDuration: \"1.5s\" },\n  },\n  action: {\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    flexShrink: 0,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"1.75rem\",\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  close: {\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.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: \"1.75rem\",\n    justifyContent: \"center\",\n    outline: \"none\",\n    width: \"1.75rem\",\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  clearAll: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderRadius: radiusVars.sm,\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"1.75rem\",\n    outline: \"none\",\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n    opacity: toastViewportVars.clearAllOpacity,\n    pointerEvents: toastViewportVars.clearAllPointerEvents,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    zIndex: 1001,\n    \":hover\": { backgroundColor: colorVars.bgRaised, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  clearAllTop: { bottom: 0, top: \"auto\" },\n});\n\ntype ToastType = \"default\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"loading\";\n\nexport type ToastPosition =\n  | \"bottom-center\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-center\"\n  | \"top-left\"\n  | \"top-right\";\n\nexport type ToasterProps = Omit<\n  ComponentProps<typeof ToastPrimitive.Provider>,\n  \"children\" | \"toastManager\"\n> & {\n  /** Toast viewport position. @default \"bottom-right\" */\n  position?: ToastPosition;\n};\n\nexport const toast = ToastPrimitive.createToastManager();\n\nconst toastIcons: Partial<Record<ToastType, IconName>> = {\n  success: \"success\",\n  info: \"info\",\n  warning: \"warning\",\n  error: \"error\",\n};\n\nfunction ToastStatusIcon({ type }: { type?: string }) {\n  if (!type || type === \"default\") {\n    return null;\n  }\n\n  if (type === \"loading\") {\n    return <span aria-hidden=\"true\" {...stylex.props(styles.loadingIcon)} />;\n  }\n\n  const iconName = toastIcons[type as ToastType];\n  if (!iconName) {\n    return null;\n  }\n\n  return (\n    <span aria-hidden=\"true\" {...stylex.props(styles.statusIcon, styles[type as ToastType])}>\n      <Icon name={iconName} />\n    </span>\n  );\n}\n\nfunction ToastStack({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  const stackRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n  const isTop = position.startsWith(\"top\");\n  const hasClearAction = toasts.length > 1;\n  const stackHeight = hasClearAction\n    ? `calc(${height}px + 1.75rem + ${spacingVars.space2})`\n    : height;\n\n  useLayoutEffect(() => {\n    const stack = stackRef.current;\n\n    if (!stack) {\n      return;\n    }\n\n    const measuredStack = stack;\n\n    function updateHeight() {\n      const rootList = Array.from(\n        measuredStack.querySelectorAll<HTMLElement>(\"[data-nuee-toast-root]:not([data-limited])\"),\n      );\n      const toastGap =\n        Number.parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.75;\n      const nextHeight = rootList.reduce((maximumHeight, root) => {\n        const rootStyles = getComputedStyle(root);\n        const offset = Number.parseFloat(rootStyles.getPropertyValue(\"--toast-offset-y\")) || 0;\n        const index = Number.parseFloat(rootStyles.getPropertyValue(\"--toast-index\")) || 0;\n        const rootHeight =\n          Number.parseFloat(rootStyles.getPropertyValue(\"--toast-height\")) || root.offsetHeight;\n\n        return Math.max(maximumHeight, offset + index * toastGap + rootHeight);\n      }, 0);\n\n      setHeight((currentHeight) => (currentHeight === nextHeight ? currentHeight : nextHeight));\n    }\n\n    updateHeight();\n\n    const resizeObserver = new ResizeObserver(updateHeight);\n    const rootList = measuredStack.querySelectorAll<HTMLElement>(\"[data-nuee-toast-root]\");\n    rootList.forEach((root) => resizeObserver.observe(root));\n    window.addEventListener(\"resize\", updateHeight);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener(\"resize\", updateHeight);\n    };\n  }, [toasts]);\n\n  return (\n    <div\n      ref={stackRef}\n      style={{ height: stackHeight }}\n      {...stylex.props(styles.stack, isTop && styles.stackTop)}\n    >\n      {toasts.map((item) => (\n        <ToastPrimitive.Root\n          key={item.id}\n          toast={item}\n          data-nuee-toast-root=\"\"\n          {...stylex.props(styles.root, isTop && styles.rootTop)}\n        >\n          <ToastPrimitive.Content {...stylex.props(styles.content)}>\n            <ToastStatusIcon type={item.type} />\n            <div {...stylex.props(styles.message)}>\n              <ToastPrimitive.Title {...stylex.props(styles.title)} />\n              <ToastPrimitive.Description {...stylex.props(styles.description)} />\n            </div>\n            {item.actionProps ? <ToastPrimitive.Action {...stylex.props(styles.action)} /> : null}\n            <ToastPrimitive.Close aria-label=\"Close toast\" {...stylex.props(styles.close)}>\n              <Icon aria-hidden=\"true\" name=\"close\" />\n            </ToastPrimitive.Close>\n          </ToastPrimitive.Content>\n        </ToastPrimitive.Root>\n      ))}\n      {hasClearAction ? (\n        <button\n          type=\"button\"\n          onClick={() => toast.close()}\n          {...stylex.props(styles.clearAll, isTop && styles.clearAllTop)}\n        >\n          Clear all\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Toaster({ limit = 3, position = \"bottom-right\", ...props }: ToasterProps) {\n  const [verticalPosition, horizontalPosition] = position.split(\"-\") as [\n    \"bottom\" | \"top\",\n    \"center\" | \"left\" | \"right\",\n  ];\n\n  return (\n    <ToastPrimitive.Provider {...props} limit={limit} toastManager={toast}>\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          {...stylex.props(\n            styles.viewport,\n            verticalPosition === \"top\" ? styles.viewportTop : styles.viewportBottom,\n            horizontalPosition === \"left\" && styles.viewportLeft,\n            horizontalPosition === \"center\" && styles.viewportCenter,\n            horizontalPosition === \"right\" && styles.viewportRight,\n          )}\n        >\n          <ToastStack position={position} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n",
+      "path": "toast.tsx"
+    },
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\n\nexport const toastViewportVars = stylex.defineVars({\n  clearAllOpacity: \"1\",\n  clearAllPointerEvents: \"auto\",\n  stackPointerEvents: \"none\",\n});\n",
+      "path": "toast.stylex.ts"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@phosphor-icons/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/toggle-group.json

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

package/dist/items/toggle.json

@@ -0,0 +1,15 @@
+{
+  "name": "toggle",
+  "primaryExport": "Toggle",
+  "files": [
+    {
+      "content": "import { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    \":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  sm: {\n    height: sizeVars.controlSm,\n    minWidth: sizeVars.controlSm,\n    paddingInline: spacingVars.space2,\n  },\n  md: {\n    height: sizeVars.controlMd,\n    minWidth: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  lg: {\n    height: sizeVars.controlLg,\n    minWidth: sizeVars.controlLg,\n    paddingInline: spacingVars.space4,\n  },\n  default: { backgroundColor: \"transparent\" },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  pressed: { backgroundColor: colorVars.bgSurfacePressed, color: colorVars.fgPrimary },\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});\n\nexport type ToggleSize = \"lg\" | \"md\" | \"sm\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport type ToggleProps = ComponentProps<typeof TogglePrimitive> & {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Toggle({\n  className,\n  size = \"md\",\n  style,\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          styles[variant],\n          state.pressed && styles.pressed,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        const customClassName = typeof className === \"function\" ? className(state) : className;\n        return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          styles[variant],\n          state.pressed && styles.pressed,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        return { ...stylexProps.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    />\n  );\n}\n",
+      "path": "toggle.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/tooltip.json

@@ -0,0 +1,15 @@
+{
+  "name": "tooltip",
+  "primaryExport": "Tooltip",
+  "files": [
+    {
+      "content": "import { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: 70 },\n  popup: {\n    backgroundColor: colorVars.fgPrimary,\n    borderRadius: radiusVars.sm,\n    boxShadow: shadowVars.floating,\n    color: colorVars.bgCanvas,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n    maxWidth: \"18rem\",\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space3,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  arrow: { fill: colorVars.fgPrimary, height: spacingVars.space2, width: spacingVars.space3 },\n});\n\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\ntype TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<ComponentProps<typeof TooltipPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\"> & {\n    xstyle?: stylex.StyleXStyles;\n  };\n\nexport function TooltipContent({\n  align = \"center\",\n  className,\n  side = \"top\",\n  sideOffset = 6,\n  style,\n  xstyle,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <TooltipPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const stylexProps = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n              xstyle,\n            );\n            return [\n              stylexProps.className,\n              typeof className === \"function\" ? className(state) : className,\n            ]\n              .filter(Boolean)\n              .join(\" \");\n          }}\n          style={(state) => {\n            const stylexProps = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n              xstyle,\n            );\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        >\n          {props.children}\n          <TooltipPrimitive.Arrow {...stylex.props(styles.arrow)} />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n",
+      "path": "tooltip.tsx"
+    }
+  ],
+  "dependencies": [
+    "@base-ui/react",
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/typography.json

@@ -0,0 +1,14 @@
+{
+  "name": "typography",
+  "primaryExport": "Typography",
+  "files": [
+    {
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport { createElement, type CSSProperties, type HTMLAttributes } from \"react\";\n\nimport { colorVars, radiusVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { color: colorVars.fgPrimary, fontFamily: typographyVars.fontFamily, margin: 0 },\n  display: {\n    fontSize: \"2rem\",\n    fontWeight: typographyVars.fontWeightSemibold,\n    letterSpacing: \"-0.025em\",\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeXl,\n    fontWeight: typographyVars.fontWeightSemibold,\n    letterSpacing: \"-0.015em\",\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  heading: {\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  body: {\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  label: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  caption: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  code: {\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.sm,\n    fontFamily: \"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace\",\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n  },\n});\n\ntype TypographyElement = \"blockquote\" | \"code\" | \"h1\" | \"h2\" | \"h3\" | \"p\" | \"span\";\ntype TypographyVariant = \"body\" | \"caption\" | \"code\" | \"display\" | \"heading\" | \"label\" | \"title\";\n\nconst defaultElementMap: Record<TypographyVariant, TypographyElement> = {\n  body: \"p\",\n  caption: \"span\",\n  code: \"code\",\n  display: \"h1\",\n  heading: \"h3\",\n  label: \"span\",\n  title: \"h2\",\n};\n\nexport type TypographyProps = HTMLAttributes<HTMLElement> & {\n  as?: TypographyElement;\n  variant?: TypographyVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Typography({\n  as,\n  className,\n  style,\n  variant = \"body\",\n  xstyle,\n  ...props\n}: TypographyProps) {\n  const element = as ?? defaultElementMap[variant];\n  const stylexProps = stylex.props(styles.root, styles[variant], xstyle);\n\n  return createElement(element, {\n    ...props,\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style } as CSSProperties,\n  });\n}\n",
+      "path": "typography.tsx"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}