@nuee/registry 0.3.2 → 0.4.0

package/dist/items/pagination.json

@@ -7,12 +7,8 @@
       "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",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { 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({ ...props }: ComponentProps<\"nav\">) {\n  return <nav aria-label=\"Pagination\" {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function PaginationContent({ ...props }: ComponentProps<\"ul\">) {\n  return <ul {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function PaginationItem({ ...props }: ComponentProps<\"li\">) {\n  return <li {...props} {...stylex.props(styles.item)} />;\n}\n\nexport type PaginationLinkProps = ComponentProps<\"a\"> & {\n  isActive?: boolean;\n  size?: \"default\" | \"icon\";\n};\n\nexport function PaginationLink({\n  children,\n  isActive = false,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      {...props}\n      {...stylex.props(styles.link, styles[size], isActive && styles.active)}\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({ ...props }: ComponentProps<\"span\">) {\n  return (\n    <span aria-hidden=\"true\" {...props} {...stylex.props(styles.ellipsis)}>\n      …\n    </span>\n  );\n}\n",
       "path": "pagination.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/popover.json

@@ -3,12 +3,8 @@
   "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",
+      "content": "import { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  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  side = \"bottom\",\n  sideOffset = 6,\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 stylexProps.className;\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 stylexProps.style;\n          }}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nexport function PopoverHeader({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.header)} />;\n}\nexport function PopoverTitle({ children, ...props }: ComponentProps<\"h2\">) {\n  return (\n    <h2 {...props} {...stylex.props(styles.title)}>\n      {children}\n    </h2>\n  );\n}\nexport function PopoverDescription({ ...props }: ComponentProps<\"p\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n",
       "path": "popover.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/progress.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ xstyle, ...props }: ProgressProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <ProgressPrimitive.Root\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    >\n      <ProgressPrimitive.Indicator {...stylex.props(styles.indicator)} />\n    </ProgressPrimitive.Root>\n  );\n}\n",
       "path": "progress.tsx"
     }
   ],

package/dist/items/radio-group.json

@@ -3,7 +3,7 @@
   "primaryExport": "RadioGroup",
   "files": [
     {
-      "content": "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",
+      "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({ xstyle, ...props }: RadioGroupProps) {\n  const stylexProps = stylex.props(styles.group, xstyle);\n  return (\n    <RadioGroupPrimitive\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof RadioPrimitive.Root> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function RadioGroupItem({ 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        return stylexProps.className;\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(styles.item, state.checked && styles.checked, xstyle);\n        return stylexProps.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"
     }
   ],

package/dist/items/scroll-area.json

@@ -3,7 +3,7 @@
   "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",
+      "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  scrollbars = \"vertical\",\n  xstyle,\n  ...props\n}: ScrollAreaProps) {\n  const root = stylex.props(styles.root, xstyle);\n  return (\n    <ScrollAreaPrimitive.Root {...props} className={() => root.className} style={() => root.style}>\n      <ScrollAreaPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <ScrollAreaPrimitive.Content {...stylex.props(styles.content)}>\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {scrollbars === \"vertical\" || scrollbars === \"both\" ? (\n        <ScrollBar orientation=\"vertical\" />\n      ) : null}\n      {scrollbars === \"horizontal\" || scrollbars === \"both\" ? (\n        <ScrollBar orientation=\"horizontal\" />\n      ) : null}\n      <ScrollAreaPrimitive.Corner {...stylex.props(styles.corner)} />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  orientation = \"vertical\",\n  ...props\n}: ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {\n  const resolved = stylex.props(styles.scrollbar, styles[orientation]);\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      {...props}\n      className={() => resolved.className}\n      orientation={orientation}\n      style={() => resolved.style}\n    >\n      <ScrollAreaPrimitive.Thumb {...stylex.props(styles.thumb)} />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n",
       "path": "scroll-area.tsx"
     }
   ],

package/dist/items/select.json

@@ -7,7 +7,7 @@
       "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",
+      "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  ...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;\n      }}\n      style={(state) => {\n        const sx = stylex.props(styles.trigger, state.disabled && styles.triggerDisabled);\n        return sx.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  side = \"bottom\",\n  sideOffset = 4,\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;\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.style;\n          }}\n        >\n          <SelectPrimitive.List {...stylex.props(styles.list)}>{children}</SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport function SelectItem({ children, ...props }: 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;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\n    >\n      <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"
     }
   ],

package/dist/items/separator.json

@@ -3,7 +3,7 @@
   "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",
+      "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  decorative = true,\n  orientation = \"horizontal\",\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      {...stylexProps}\n    />\n  );\n}\n",
       "path": "separator.tsx"
     }
   ],

package/dist/items/skeleton.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ xstyle, ...props }: SkeletonProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return <div {...props} aria-hidden=\"true\" {...stylexProps} />;\n}\n",
       "path": "skeleton.tsx"
     }
   ],

package/dist/items/slider.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ defaultValue, getAriaLabel, value, xstyle, ...props }: SliderProps) {\n  const currentValue = value ?? defaultValue;\n  const thumbCount = Array.isArray(currentValue) ? currentValue.length : 1;\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <SliderPrimitive.Root\n      {...props}\n      defaultValue={defaultValue}\n      value={value}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    >\n      <SliderPrimitive.Control {...stylex.props(styles.control)}>\n        <SliderPrimitive.Track {...stylex.props(styles.track)}>\n          <SliderPrimitive.Indicator {...stylex.props(styles.indicator)} />\n        </SliderPrimitive.Track>\n        {Array.from({ length: thumbCount }, (_, index) => (\n          <SliderPrimitive.Thumb\n            getAriaLabel={getAriaLabel}\n            index={index}\n            key={index}\n            {...stylex.props(styles.thumb)}\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n",
       "path": "slider.tsx"
     }
   ],

package/dist/items/spinner.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ label = \"Loading\", xstyle, ...props }: SpinnerProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return <output {...props} aria-label={label} {...stylexProps} />;\n}\n",
       "path": "spinner.tsx"
     }
   ],

package/dist/items/switch.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ size = \"md\", 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        return stylexProps.className;\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        return stylexProps.style;\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"
     }
   ],

package/dist/items/table.json

@@ -3,12 +3,8 @@
   "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",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\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({ containerClassName, xstyle, ...props }: TableProps) {\n  return (\n    <div\n      className={[stylex.props(styles.container).className, containerClassName]\n        .filter(Boolean)\n        .join(\" \")}\n    >\n      <table {...props} {...stylex.props(styles.table, xstyle)} />\n    </div>\n  );\n}\n\nexport function TableHeader({ ...props }: ComponentProps<\"thead\">) {\n  return <thead {...props} {...stylex.props(styles.header)} />;\n}\n\nexport function TableBody({ ...props }: ComponentProps<\"tbody\">) {\n  return <tbody {...props} {...stylex.props(styles.body)} />;\n}\n\nexport function TableFooter({ ...props }: ComponentProps<\"tfoot\">) {\n  return <tfoot {...props} {...stylex.props(styles.footer)} />;\n}\n\nexport function TableRow({ ...props }: ComponentProps<\"tr\">) {\n  return <tr {...props} {...stylex.props(styles.row)} />;\n}\n\nexport function TableHead({ ...props }: ComponentProps<\"th\">) {\n  return <th {...props} {...stylex.props(styles.head)} />;\n}\n\nexport function TableCell({ ...props }: ComponentProps<\"td\">) {\n  return <td {...props} {...stylex.props(styles.cell)} />;\n}\n\nexport function TableCaption({ ...props }: ComponentProps<\"caption\">) {\n  return <caption {...props} {...stylex.props(styles.caption)} />;\n}\n",
       "path": "table.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/tabs.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ 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={() => stylexProps.className}\n        style={() => stylexProps.style}\n      />\n    </TabsVariantContext.Provider>\n  );\n}\n\nexport function TabsList({ children, ...props }: ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = useContext(TabsVariantContext);\n\n  return (\n    <TabsPrimitive.List\n      {...props}\n      className={() => {\n        const sx = stylex.props(styles.list, styles[`${variant}List`]);\n        return sx.className;\n      }}\n      style={() => {\n        const sx = stylex.props(styles.list, styles[`${variant}List`]);\n        return sx.style;\n      }}\n    >\n      {children}\n      <TabsPrimitive.Indicator {...stylex.props(styles.indicator, styles[`${variant}Indicator`])} />\n    </TabsPrimitive.List>\n  );\n}\n\nexport function TabsTrigger({ ...props }: 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;\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;\n      }}\n    />\n  );\n}\n\nexport function TabsContent({ ...props }: 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;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.panel,\n          state.transitionStatus === \"starting\" && styles.panelTransitioning,\n          state.transitionStatus === \"ending\" && styles.panelTransitioning,\n        );\n        return sx.style;\n      }}\n    />\n  );\n}\n",
       "path": "tabs.tsx"
     }
   ],

package/dist/items/textarea.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ \"aria-invalid\": ariaInvalid, xstyle, ...props }: TextareaProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  const stylexProps = stylex.props(styles.root, isInvalid && styles.invalid, xstyle);\n\n  return <textarea {...props} aria-invalid={ariaInvalid} {...stylexProps} />;\n}\n",
       "path": "textarea.tsx"
     }
   ],

package/dist/items/toggle-group.json

@@ -3,7 +3,7 @@
   "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",
+      "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  size = \"md\",\n  variant = \"default\",\n  xstyle,\n  ...props\n}: ToggleGroupProps) {\n  const stylexProps = stylex.props(styles.root, styles[variant], xstyle);\n  return (\n    <ToggleGroupPrimitive\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\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({ size, variant, xstyle, ...props }: 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        return stylexProps.className;\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;\n      }}\n    />\n  );\n}\n",
       "path": "toggle-group.tsx"
     }
   ],

package/dist/items/toggle.json

@@ -3,7 +3,7 @@
   "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",
+      "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({ size = \"md\", variant = \"default\", xstyle, ...props }: 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        return stylexProps.className;\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;\n      }}\n    />\n  );\n}\n",
       "path": "toggle.tsx"
     }
   ],

package/dist/items/tooltip.json

@@ -3,7 +3,7 @@
   "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",
+      "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  side = \"top\",\n  sideOffset = 6,\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 stylexProps.className;\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 stylexProps.style;\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"
     }
   ],

package/dist/items/typography.json

@@ -3,7 +3,7 @@
   "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",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport { createElement, 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({ as, variant = \"body\", xstyle, ...props }: TypographyProps) {\n  const element = as ?? defaultElementMap[variant];\n  return createElement(element, {\n    ...props,\n    ...stylex.props(styles.root, styles[variant], xstyle),\n  });\n}\n",
       "path": "typography.tsx"
     }
   ],