@nuee/registry 0.3.2 → 0.4.1

package/dist/items/dialog.json

@@ -7,12 +7,8 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { getNativeStyleProps } from \"./stylex-props\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: 51,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"32rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  close: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: spacingVars.space3,\n    width: sizeVars.touchTarget,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingInlineEnd: spacingVars.space8,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\ntype DialogContentProps = ComponentProps<typeof DialogPrimitive.Popup> & {\n  children: ReactNode;\n  /** Accessible name for the optional close button. @default \"Close\" */\n  closeLabel?: string;\n  showCloseButton?: boolean;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DialogContent({\n  children,\n  className,\n  closeLabel = \"Close\",\n  showCloseButton = true,\n  style,\n  xstyle,\n  ...props\n}: DialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <DialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DialogPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const customClassName = typeof className === \"function\" ? className(state) : className;\n            return [stylexProps.className, customClassName].filter(Boolean).join(\" \");\n          }}\n          style={(state) => {\n            return {\n              ...stylexProps.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        >\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close aria-label={closeLabel} {...stylex.props(styles.close)}>\n              <Icon aria-hidden=\"true\" name=\"close\" />\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Viewport>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogHeader({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.header, xstyle), className, style)}\n    />\n  );\n}\n\nexport function DialogFooter({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.footer, xstyle), className, style)}\n    />\n  );\n}\n\nexport function DialogTitle({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n\nexport function DialogDescription({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={(state) =>\n        [stylexProps.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({\n        ...stylexProps.style,\n        ...(typeof style === \"function\" ? style(state) : style),\n      })}\n    />\n  );\n}\n",
+      "content": "import { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  backdrop: {\n    backdropFilter: \"blur(4px)\",\n    backgroundColor: \"oklch(0% 0 0 / 40%)\",\n    inset: 0,\n    position: \"fixed\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 50,\n    \":is([data-starting-style])\": { opacity: 0 },\n    \":is([data-ending-style])\": {\n      opacity: 0,\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n  },\n  viewport: {\n    alignItems: \"center\",\n    display: \"flex\",\n    inset: 0,\n    justifyContent: \"center\",\n    padding: spacingVars.space4,\n    position: \"fixed\",\n    zIndex: 51,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.overlay,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    maxHeight: \"calc(100dvh - 2rem)\",\n    maxWidth: \"32rem\",\n    outline: \"none\",\n    overflow: \"auto\",\n    padding: spacingVars.space6,\n    position: \"relative\",\n    transitionDuration: motionVars.durationSlow,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"100%\",\n    \":is([data-starting-style], [data-ending-style])\": {\n      opacity: 0,\n      transform: \"scale(0.95)\",\n    },\n    \":is([data-ending-style])\": {\n      transitionDuration: motionVars.durationNormal,\n      transitionTimingFunction: motionVars.easingExit,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style], [data-ending-style])\": { transform: \"scale(0.99)\" },\n    },\n  },\n  close: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    height: sizeVars.touchTarget,\n    justifyContent: \"center\",\n    outline: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: spacingVars.space3,\n    width: sizeVars.touchTarget,\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  header: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    paddingInlineEnd: spacingVars.space8,\n  },\n  footer: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    gap: spacingVars.space2,\n    justifyContent: \"flex-end\",\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n});\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\ntype DialogContentProps = ComponentProps<typeof DialogPrimitive.Popup> & {\n  children: ReactNode;\n  /** Accessible name for the optional close button. @default \"Close\" */\n  closeLabel?: string;\n  showCloseButton?: boolean;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function DialogContent({\n  children,\n  closeLabel = \"Close\",\n  showCloseButton = true,\n  xstyle,\n  ...props\n}: DialogContentProps) {\n  const stylexProps = stylex.props(styles.popup, xstyle);\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Backdrop {...stylex.props(styles.backdrop)} />\n      <DialogPrimitive.Viewport {...stylex.props(styles.viewport)}>\n        <DialogPrimitive.Popup\n          {...props}\n          className={() => stylexProps.className}\n          style={() => stylexProps.style}\n        >\n          {children}\n          {showCloseButton ? (\n            <DialogPrimitive.Close aria-label={closeLabel} {...stylex.props(styles.close)}>\n              <Icon aria-hidden=\"true\" name=\"close\" />\n            </DialogPrimitive.Close>\n          ) : null}\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Viewport>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogHeader({\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.header, xstyle)} />;\n}\n\nexport function DialogFooter({\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & { xstyle?: stylex.StyleXStyles }) {\n  return <div {...props} {...stylex.props(styles.footer, xstyle)} />;\n}\n\nexport function DialogTitle({ ...props }: ComponentProps<typeof DialogPrimitive.Title>) {\n  const stylexProps = stylex.props(styles.title);\n  return (\n    <DialogPrimitive.Title\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n\nexport function DialogDescription({\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Description>) {\n  const stylexProps = stylex.props(styles.description);\n  return (\n    <DialogPrimitive.Description\n      {...props}\n      className={() => stylexProps.className}\n      style={() => stylexProps.style}\n    />\n  );\n}\n",
       "path": "dialog.tsx"
-    },
-    {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nexport function getNativeStyleProps(\n  stylexProps: ReturnType<typeof stylex.props>,\n  className?: string,\n  style?: ComponentProps<\"div\">[\"style\"],\n): Pick<ComponentProps<\"div\">, \"className\" | \"style\"> {\n  return {\n    className: [stylexProps.className, className].filter(Boolean).join(\" \"),\n    style: { ...stylexProps.style, ...style },\n  };\n}\n",
-      "path": "stylex-props.ts"
     }
   ],
   "dependencies": [

package/dist/items/drawer.json

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

@@ -7,7 +7,7 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    minWidth: \"12rem\",\n    outline: \"none\",\n    padding: spacingVars.space1,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    position: \"relative\",\n    userSelect: \"none\",\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  inset: { paddingInlineStart: spacingVars.space8 },\n  destructive: { color: colorVars.fgFeedbackError },\n  choiceItem: { paddingInlineStart: spacingVars.space8 },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  radioDot: {\n    backgroundColor: \"currentColor\",\n    borderRadius: radiusVars.full,\n    height: spacingVars.space2,\n    width: spacingVars.space2,\n  },\n  label: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space2,\n  },\n  separator: {\n    backgroundColor: colorVars.strokeDefault,\n    height: sizeVars.stroke,\n    marginBlock: spacingVars.space1,\n  },\n  shortcut: {\n    color: colorVars.fgTertiary,\n    fontSize: typographyVars.fontSizeXs,\n    marginInlineStart: \"auto\",\n  },\n  subIcon: { marginInlineStart: \"auto\" },\n});\n\nexport const DropdownMenu = MenuPrimitive.Root;\nexport const DropdownMenuTrigger = MenuPrimitive.Trigger;\nexport const DropdownMenuGroup = MenuPrimitive.Group;\nexport const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\nexport const DropdownMenuSub = MenuPrimitive.SubmenuRoot;\n\ntype DropdownMenuContentProps = ComponentProps<typeof MenuPrimitive.Popup> &\n  Pick<\n    ComponentProps<typeof MenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >;\n\nexport function DropdownMenuContent({\n  align = \"start\",\n  alignOffset,\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  style,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <MenuPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return [sx.className, 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      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\ntype DropdownMenuItemProps = ComponentProps<typeof MenuPrimitive.Item> & {\n  destructive?: boolean;\n  inset?: boolean;\n};\n\nexport function DropdownMenuItem({\n  className,\n  destructive = false,\n  inset = false,\n  style,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n          destructive && styles.destructive,\n        );\n        return [sx.className, 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          inset && styles.inset,\n          destructive && styles.destructive,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    />\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <MenuPrimitive.CheckboxItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  children,\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \");\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      <MenuPrimitive.RadioItemIndicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.radioDot)} />\n      </MenuPrimitive.RadioItemIndicator>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({\n  className,\n  inset = false,\n  style,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & { inset?: boolean }) {\n  const sx = stylex.props(styles.label, inset && styles.inset);\n  return (\n    <MenuPrimitive.GroupLabel\n      {...props}\n      className={(state) =>\n        [sx.className, typeof className === \"function\" ? className(state) : className]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      style={(state) => ({ ...sx.style, ...(typeof style === \"function\" ? style(state) : style) })}\n    />\n  );\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n\nexport function DropdownMenuShortcut({\n  children,\n  ...props\n}: ComponentProps<\"span\"> & { children: ReactNode }) {\n  return (\n    <span {...props} {...stylex.props(styles.shortcut)}>\n      {children}\n    </span>\n  );\n}\n\nexport function DropdownMenuSubTrigger({\n  children,\n  className,\n  inset = false,\n  style,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n        );\n        return [sx.className, 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          inset && styles.inset,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    >\n      {children}\n      <Icon aria-hidden=\"true\" name=\"chevronRight\" {...stylex.props(styles.subIcon)} />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport const DropdownMenuSubContent = DropdownMenuContent;\n",
+      "content": "import { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  positioner: { zIndex: 60 },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    minWidth: \"12rem\",\n    outline: \"none\",\n    padding: spacingVars.space1,\n    transform: \"scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transform: \"none\",\n      transitionDuration: \"0.01ms\",\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.98)\" },\n  popupEnding: {\n    transitionDuration: motionVars.durationFast,\n    transitionTimingFunction: motionVars.easingExit,\n  },\n  item: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    display: \"flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space2,\n    position: \"relative\",\n    userSelect: \"none\",\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  itemHighlighted: { backgroundColor: colorVars.interactionHover },\n  itemDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n  },\n  inset: { paddingInlineStart: spacingVars.space8 },\n  destructive: { color: colorVars.fgFeedbackError },\n  choiceItem: { paddingInlineStart: spacingVars.space8 },\n  indicator: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    insetInlineStart: spacingVars.space2,\n    justifyContent: \"center\",\n    position: \"absolute\",\n  },\n  radioDot: {\n    backgroundColor: \"currentColor\",\n    borderRadius: radiusVars.full,\n    height: spacingVars.space2,\n    width: spacingVars.space2,\n  },\n  label: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    paddingBlock: spacingVars.space2,\n    paddingInline: spacingVars.space2,\n  },\n  separator: {\n    backgroundColor: colorVars.strokeDefault,\n    height: sizeVars.stroke,\n    marginBlock: spacingVars.space1,\n  },\n  shortcut: {\n    color: colorVars.fgTertiary,\n    fontSize: typographyVars.fontSizeXs,\n    marginInlineStart: \"auto\",\n  },\n  subIcon: { marginInlineStart: \"auto\" },\n});\n\nexport const DropdownMenu = MenuPrimitive.Root;\nexport const DropdownMenuTrigger = MenuPrimitive.Trigger;\nexport const DropdownMenuGroup = MenuPrimitive.Group;\nexport const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup;\nexport const DropdownMenuSub = MenuPrimitive.SubmenuRoot;\n\ntype DropdownMenuContentProps = ComponentProps<typeof MenuPrimitive.Popup> &\n  Pick<\n    ComponentProps<typeof MenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >;\n\nexport function DropdownMenuContent({\n  align = \"start\",\n  alignOffset,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <MenuPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.className;\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupEnding,\n            );\n            return sx.style;\n          }}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\ntype DropdownMenuItemProps = ComponentProps<typeof MenuPrimitive.Item> & {\n  destructive?: boolean;\n  inset?: boolean;\n};\n\nexport function DropdownMenuItem({\n  destructive = false,\n  inset = false,\n  ...props\n}: DropdownMenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n          destructive && styles.destructive,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n          destructive && styles.destructive,\n        );\n        return sx.style;\n      }}\n    />\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  children,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\n    >\n      <MenuPrimitive.CheckboxItemIndicator {...stylex.props(styles.indicator)}>\n        <Icon aria-hidden=\"true\" name=\"check\" />\n      </MenuPrimitive.CheckboxItemIndicator>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  children,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.RadioItem>) {\n  return (\n    <MenuPrimitive.RadioItem\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          styles.choiceItem,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n        );\n        return sx.style;\n      }}\n    >\n      <MenuPrimitive.RadioItemIndicator {...stylex.props(styles.indicator)}>\n        <span {...stylex.props(styles.radioDot)} />\n      </MenuPrimitive.RadioItemIndicator>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({\n  inset = false,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.GroupLabel> & { inset?: boolean }) {\n  const sx = stylex.props(styles.label, inset && styles.inset);\n  return (\n    <MenuPrimitive.GroupLabel {...props} className={() => sx.className} style={() => sx.style} />\n  );\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator {...props} {...stylex.props(styles.separator)} />;\n}\n\nexport function DropdownMenuShortcut({\n  children,\n  ...props\n}: ComponentProps<\"span\"> & { children: ReactNode }) {\n  return (\n    <span {...props} {...stylex.props(styles.shortcut)}>\n      {children}\n    </span>\n  );\n}\n\nexport function DropdownMenuSubTrigger({\n  children,\n  inset = false,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.item,\n          state.highlighted && styles.itemHighlighted,\n          state.disabled && styles.itemDisabled,\n          inset && styles.inset,\n        );\n        return sx.style;\n      }}\n    >\n      {children}\n      <Icon aria-hidden=\"true\" name=\"chevronRight\" {...stylex.props(styles.subIcon)} />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nexport const DropdownMenuSubContent = DropdownMenuContent;\n",
       "path": "dropdown-menu.tsx"
     }
   ],

package/dist/items/empty.json

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

@@ -3,12 +3,8 @@
   "primaryExport": "Field",
   "files": [
     {
-      "content": "import { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", gap: spacingVars.space2, width: \"100%\" },\n  vertical: { flexDirection: \"column\" },\n  horizontal: { alignItems: \"center\", flexDirection: \"row\", gap: spacingVars.space4 },\n  label: {\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  error: {\n    color: colorVars.fgFeedbackError,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  set: {\n    borderStyle: \"none\",\n    borderWidth: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    margin: 0,\n    minWidth: 0,\n    padding: 0,\n  },\n  legend: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightMedium,\n    marginBottom: spacingVars.space3,\n    padding: 0,\n  },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space6, width: \"100%\" },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype FieldOrientation = \"horizontal\" | \"vertical\";\n\nfunction mergeClassName<State>(\n  generatedClassName: string | undefined,\n  className: string | ((state: State) => string | undefined) | undefined,\n) {\n  if (typeof className === \"function\") {\n    return (state: State) => [generatedClassName, className(state)].filter(Boolean).join(\" \");\n  }\n\n  return [generatedClassName, className].filter(Boolean).join(\" \");\n}\n\nexport type FieldProps = ComponentProps<typeof FieldPrimitive.Root> &\n  StyleProps & { orientation?: FieldOrientation };\n\nexport function Field({\n  className,\n  orientation = \"vertical\",\n  style,\n  xstyle,\n  ...props\n}: FieldProps) {\n  const stylexProps = stylex.props(styles.root, styles[orientation], xstyle);\n\n  return (\n    <FieldPrimitive.Root\n      {...props}\n      data-orientation={orientation}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldLabel({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Label> & StyleProps) {\n  const stylexProps = stylex.props(styles.label, xstyle);\n  return (\n    <FieldPrimitive.Label\n      {...props}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldDescription({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Description> & StyleProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n  return (\n    <FieldPrimitive.Description\n      {...props}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldError({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Error> & StyleProps) {\n  const stylexProps = stylex.props(styles.error, xstyle);\n  return (\n    <FieldPrimitive.Error\n      {...props}\n      className={mergeClassName(stylexProps.className, className)}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function FieldSet({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"fieldset\"> & StyleProps) {\n  return (\n    <fieldset\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.set, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldLegend({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"legend\"> & StyleProps) {\n  return (\n    <legend\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.legend, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldGroup({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.group, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldContent({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.content, xstyle), className, style)}\n    />\n  );\n}\n\nexport function FieldTitle({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.title, xstyle), className, style)}\n    />\n  );\n}\n",
+      "content": "import { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", gap: spacingVars.space2, width: \"100%\" },\n  vertical: { flexDirection: \"column\" },\n  horizontal: { alignItems: \"center\", flexDirection: \"row\", gap: spacingVars.space4 },\n  label: {\n    color: colorVars.fgPrimary,\n    cursor: \"default\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  error: {\n    color: colorVars.fgFeedbackError,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  set: {\n    borderStyle: \"none\",\n    borderWidth: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space6,\n    margin: 0,\n    minWidth: 0,\n    padding: 0,\n  },\n  legend: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightMedium,\n    marginBottom: spacingVars.space3,\n    padding: 0,\n  },\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space6, width: \"100%\" },\n  content: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype FieldOrientation = \"horizontal\" | \"vertical\";\n\nexport type FieldProps = ComponentProps<typeof FieldPrimitive.Root> &\n  StyleProps & { orientation?: FieldOrientation };\n\nexport function Field({ orientation = \"vertical\", xstyle, ...props }: FieldProps) {\n  const stylexProps = stylex.props(styles.root, styles[orientation], xstyle);\n\n  return <FieldPrimitive.Root {...props} data-orientation={orientation} {...stylexProps} />;\n}\n\nexport function FieldLabel({\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Label> & StyleProps) {\n  const stylexProps = stylex.props(styles.label, xstyle);\n  return <FieldPrimitive.Label {...props} {...stylexProps} />;\n}\n\nexport function FieldDescription({\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Description> & StyleProps) {\n  const stylexProps = stylex.props(styles.description, xstyle);\n  return <FieldPrimitive.Description {...props} {...stylexProps} />;\n}\n\nexport function FieldError({\n  xstyle,\n  ...props\n}: ComponentProps<typeof FieldPrimitive.Error> & StyleProps) {\n  const stylexProps = stylex.props(styles.error, xstyle);\n  return <FieldPrimitive.Error {...props} {...stylexProps} />;\n}\n\nexport function FieldSet({ xstyle, ...props }: ComponentProps<\"fieldset\"> & StyleProps) {\n  return <fieldset {...props} {...stylex.props(styles.set, xstyle)} />;\n}\n\nexport function FieldLegend({ xstyle, ...props }: ComponentProps<\"legend\"> & StyleProps) {\n  return <legend {...props} {...stylex.props(styles.legend, xstyle)} />;\n}\n\nexport function FieldGroup({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.group, xstyle)} />;\n}\n\nexport function FieldContent({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.content, xstyle)} />;\n}\n\nexport function FieldTitle({ xstyle, ...props }: ComponentProps<\"div\"> & StyleProps) {\n  return <div {...props} {...stylex.props(styles.title, xstyle)} />;\n}\n",
       "path": "field.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/hover-card.json

@@ -3,7 +3,7 @@
   "primaryExport": "HoverCard",
   "files": [
     {
-      "content": "import { PreviewCard } from \"@base-ui/react/preview-card\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    maxWidth: \"20rem\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"translateY(0) scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 60,\n    \"@media (prefers-reduced-motion: reduce)\": { transform: \"none\", transitionDuration: \"0.01ms\" },\n  },\n  transitioning: { opacity: 0, transform: \"translateY(0.25rem) scale(0.98)\" },\n});\n\nexport const HoverCard = PreviewCard.Root;\nexport const HoverCardTrigger = PreviewCard.Trigger;\n\nexport type HoverCardContentProps = ComponentProps<typeof PreviewCard.Popup> & {\n  align?: ComponentProps<typeof PreviewCard.Positioner>[\"align\"];\n  side?: ComponentProps<typeof PreviewCard.Positioner>[\"side\"];\n  sideOffset?: number;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function HoverCardContent({\n  align = \"center\",\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  style,\n  xstyle,\n  ...props\n}: HoverCardContentProps) {\n  const base = stylex.props(styles.popup, xstyle);\n  return (\n    <PreviewCard.Portal>\n      <PreviewCard.Positioner align={align} side={side} sideOffset={sideOffset}>\n        <PreviewCard.Popup\n          {...props}\n          className={(state) => {\n            const motion = stylex.props(\n              state.transitionStatus === \"starting\" && styles.transitioning,\n              state.transitionStatus === \"ending\" && styles.transitioning,\n            );\n            const custom = typeof className === \"function\" ? className(state) : className;\n            return [base.className, motion.className, custom].filter(Boolean).join(\" \");\n          }}\n          style={(state) => {\n            const motion = stylex.props(\n              state.transitionStatus === \"starting\" && styles.transitioning,\n              state.transitionStatus === \"ending\" && styles.transitioning,\n            );\n            return {\n              ...base.style,\n              ...motion.style,\n              ...(typeof style === \"function\" ? style(state) : style),\n            };\n          }}\n        />\n      </PreviewCard.Positioner>\n    </PreviewCard.Portal>\n  );\n}\n",
+      "content": "import { PreviewCard } from \"@base-ui/react/preview-card\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    maxWidth: \"20rem\",\n    outline: \"none\",\n    padding: spacingVars.space4,\n    transform: \"translateY(0) scale(1)\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingEnter,\n    zIndex: 60,\n    \"@media (prefers-reduced-motion: reduce)\": { transform: \"none\", transitionDuration: \"0.01ms\" },\n  },\n  transitioning: { opacity: 0, transform: \"translateY(0.25rem) scale(0.98)\" },\n});\n\nexport const HoverCard = PreviewCard.Root;\nexport const HoverCardTrigger = PreviewCard.Trigger;\n\nexport type HoverCardContentProps = ComponentProps<typeof PreviewCard.Popup> & {\n  align?: ComponentProps<typeof PreviewCard.Positioner>[\"align\"];\n  side?: ComponentProps<typeof PreviewCard.Positioner>[\"side\"];\n  sideOffset?: number;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function HoverCardContent({\n  align = \"center\",\n  side = \"bottom\",\n  sideOffset = 6,\n  xstyle,\n  ...props\n}: HoverCardContentProps) {\n  return (\n    <PreviewCard.Portal>\n      <PreviewCard.Positioner align={align} side={side} sideOffset={sideOffset}>\n        <PreviewCard.Popup\n          {...props}\n          className={(state) =>\n            stylex.props(\n              styles.popup,\n              xstyle,\n              state.transitionStatus === \"starting\" && styles.transitioning,\n              state.transitionStatus === \"ending\" && styles.transitioning,\n            ).className\n          }\n          style={(state) =>\n            stylex.props(\n              styles.popup,\n              xstyle,\n              state.transitionStatus === \"starting\" && styles.transitioning,\n              state.transitionStatus === \"ending\" && styles.transitioning,\n            ).style\n          }\n        />\n      </PreviewCard.Positioner>\n    </PreviewCard.Portal>\n  );\n}\n",
       "path": "hover-card.tsx"
     }
   ],

package/dist/items/input-group.json

@@ -3,7 +3,7 @@
   "primaryExport": "InputGroup",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, MouseEvent } from \"react\";\n\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input, type InputProps } from \"./input\";\nimport { Textarea, type TextareaProps } from \"./textarea\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    minHeight: sizeVars.controlMd,\n    minWidth: 0,\n    width: \"100%\",\n    \":focus-within\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  invalid: { borderColor: colorVars.strokeFeedbackError },\n  addon: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    cursor: \"text\",\n    display: \"flex\",\n    flexShrink: 0,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlMd,\n  },\n  \"inline-start\": { order: -1, paddingInlineStart: spacingVars.space3 },\n  \"inline-end\": { order: 1, paddingInlineEnd: spacingVars.space3 },\n  \"block-start\": {\n    alignSelf: \"stretch\",\n    justifyContent: \"flex-start\",\n    order: -1,\n    paddingInline: spacingVars.space3,\n    width: \"100%\",\n  },\n  \"block-end\": {\n    alignSelf: \"stretch\",\n    justifyContent: \"flex-start\",\n    order: 1,\n    paddingInline: spacingVars.space3,\n    width: \"100%\",\n  },\n  control: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    boxShadow: \"none\",\n    flex: 1,\n    minWidth: 0,\n    outline: \"none\",\n    \":hover\": { borderColor: \"transparent\" },\n    \":focus-visible\": {\n      borderColor: \"transparent\",\n      outlineColor: \"transparent\",\n      outlineOffset: 0,\n      outlineStyle: \"none\",\n      outlineWidth: 0,\n    },\n  },\n  textarea: { minHeight: \"5rem\" },\n  button: { flexShrink: 0, margin: spacingVars.space1 },\n  text: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype AddonAlignment = \"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\";\n\nexport type InputGroupProps = ComponentProps<\"div\"> & StyleProps & { invalid?: boolean };\n\nexport function InputGroup({\n  className,\n  invalid = false,\n  style,\n  xstyle,\n  ...props\n}: InputGroupProps) {\n  const stylexProps = stylex.props(styles.root, invalid && styles.invalid, xstyle);\n  return (\n    <div\n      {...props}\n      data-invalid={invalid || undefined}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  align = \"inline-start\",\n  className,\n  onClick,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps & { align?: AddonAlignment }) {\n  const stylexProps = stylex.props(styles.addon, styles[align], xstyle);\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented || (event.target as HTMLElement).closest(\"button\")) return;\n    event.currentTarget.parentElement?.querySelector<HTMLElement>(\"input, textarea\")?.focus();\n  };\n\n  return (\n    <div\n      {...props}\n      role=\"presentation\"\n      data-align={align}\n      onClick={handleClick}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function InputGroupInput({ xstyle, ...props }: InputProps) {\n  return <Input {...props} xstyle={[styles.control, xstyle]} />;\n}\n\nexport function InputGroupTextarea({ xstyle, ...props }: TextareaProps) {\n  return <Textarea {...props} xstyle={[styles.control, styles.textarea, xstyle]} />;\n}\n\nexport function InputGroupButton({\n  size = \"sm\",\n  variant = \"ghost\",\n  xstyle,\n  ...props\n}: ButtonProps) {\n  return <Button {...props} size={size} variant={variant} xstyle={[styles.button, xstyle]} />;\n}\n\nexport function InputGroupText({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"span\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.text, xstyle);\n  return (\n    <span\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, MouseEvent } from \"react\";\n\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input, type InputProps } from \"./input\";\nimport { Textarea, type TextareaProps } from \"./textarea\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    minHeight: sizeVars.controlMd,\n    minWidth: 0,\n    width: \"100%\",\n    \":focus-within\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  invalid: { borderColor: colorVars.strokeFeedbackError },\n  addon: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    cursor: \"text\",\n    display: \"flex\",\n    flexShrink: 0,\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n    minHeight: sizeVars.controlMd,\n  },\n  \"inline-start\": { order: -1, paddingInlineStart: spacingVars.space3 },\n  \"inline-end\": { order: 1, paddingInlineEnd: spacingVars.space3 },\n  \"block-start\": {\n    alignSelf: \"stretch\",\n    justifyContent: \"flex-start\",\n    order: -1,\n    paddingInline: spacingVars.space3,\n    width: \"100%\",\n  },\n  \"block-end\": {\n    alignSelf: \"stretch\",\n    justifyContent: \"flex-start\",\n    order: 1,\n    paddingInline: spacingVars.space3,\n    width: \"100%\",\n  },\n  control: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    boxShadow: \"none\",\n    flex: 1,\n    minWidth: 0,\n    outline: \"none\",\n    \":hover\": { borderColor: \"transparent\" },\n    \":focus-visible\": {\n      borderColor: \"transparent\",\n      outlineColor: \"transparent\",\n      outlineOffset: 0,\n      outlineStyle: \"none\",\n      outlineWidth: 0,\n    },\n  },\n  textarea: { minHeight: \"5rem\" },\n  button: { flexShrink: 0, margin: spacingVars.space1 },\n  text: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    gap: spacingVars.space2,\n  },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\ntype AddonAlignment = \"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\";\n\nexport type InputGroupProps = ComponentProps<\"div\"> & StyleProps & { invalid?: boolean };\n\nexport function InputGroup({ invalid = false, xstyle, ...props }: InputGroupProps) {\n  const stylexProps = stylex.props(styles.root, invalid && styles.invalid, xstyle);\n  return <div {...props} data-invalid={invalid || undefined} {...stylexProps} />;\n}\n\nexport function InputGroupAddon({\n  align = \"inline-start\",\n  onClick,\n  xstyle,\n  ...props\n}: ComponentProps<\"div\"> & StyleProps & { align?: AddonAlignment }) {\n  const stylexProps = stylex.props(styles.addon, styles[align], xstyle);\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented || (event.target as HTMLElement).closest(\"button\")) return;\n    event.currentTarget.parentElement?.querySelector<HTMLElement>(\"input, textarea\")?.focus();\n  };\n\n  return (\n    <div {...props} role=\"presentation\" data-align={align} onClick={handleClick} {...stylexProps} />\n  );\n}\n\nexport function InputGroupInput({ xstyle, ...props }: InputProps) {\n  return <Input {...props} xstyle={[styles.control, xstyle]} />;\n}\n\nexport function InputGroupTextarea({ xstyle, ...props }: TextareaProps) {\n  return <Textarea {...props} xstyle={[styles.control, styles.textarea, xstyle]} />;\n}\n\nexport function InputGroupButton({\n  size = \"sm\",\n  variant = \"ghost\",\n  xstyle,\n  ...props\n}: ButtonProps) {\n  return <Button {...props} size={size} variant={variant} xstyle={[styles.button, xstyle]} />;\n}\n\nexport function InputGroupText({ xstyle, ...props }: ComponentProps<\"span\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.text, xstyle);\n  return <span {...props} {...stylexProps} />;\n}\n",
       "path": "input-group.tsx"
     }
   ],

package/dist/items/input-otp.json

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

@@ -3,7 +3,7 @@
   "primaryExport": "Input",
   "files": [
     {
-      "content": "import { Input as InputPrimitive } from \"@base-ui/react/input\";\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    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    height: sizeVars.controlMd,\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"::placeholder\": {\n      color: colorVars.fgTertiary,\n    },\n    \":hover\": {\n      borderColor: colorVars.strokeStrong,\n    },\n    \":focus-visible\": {\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\": {\n      borderColor: colorVars.strokeFeedbackError,\n    },\n  },\n  invalid: {\n    borderColor: colorVars.strokeFeedbackError,\n  },\n});\n\nexport type InputProps = ComponentProps<typeof InputPrimitive> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Input({\n  \"aria-invalid\": ariaInvalid,\n  className,\n  style,\n  xstyle,\n  ...props\n}: InputProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  const stylexProps = stylex.props(styles.root, isInvalid && styles.invalid, xstyle);\n  const mergedClassName = [stylexProps.className, className].filter(Boolean).join(\" \");\n\n  return (\n    <InputPrimitive\n      {...props}\n      aria-invalid={ariaInvalid}\n      className={mergedClassName}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "content": "import { Input as InputPrimitive } from \"@base-ui/react/input\";\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    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    height: sizeVars.controlMd,\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"::placeholder\": {\n      color: colorVars.fgTertiary,\n    },\n    \":hover\": {\n      borderColor: colorVars.strokeStrong,\n    },\n    \":focus-visible\": {\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\": {\n      borderColor: colorVars.strokeFeedbackError,\n    },\n  },\n  invalid: {\n    borderColor: colorVars.strokeFeedbackError,\n  },\n});\n\nexport type InputProps = ComponentProps<typeof InputPrimitive> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Input({ \"aria-invalid\": ariaInvalid, xstyle, ...props }: InputProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  const stylexProps = stylex.props(styles.root, isInvalid && styles.invalid, xstyle);\n  return <InputPrimitive {...props} aria-invalid={ariaInvalid} {...stylexProps} />;\n}\n",
       "path": "input.tsx"
     }
   ],

package/dist/items/kbd.json

@@ -3,7 +3,7 @@
   "primaryExport": "Kbd",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    minHeight: \"1.25rem\",\n    minWidth: \"1.25rem\",\n    paddingInline: spacingVars.space1,\n    userSelect: \"none\",\n  },\n  group: { alignItems: \"center\", display: \"inline-flex\", gap: spacingVars.space1 },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport function Kbd({ className, style, xstyle, ...props }: ComponentProps<\"kbd\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <kbd\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n\nexport function KbdGroup({\n  className,\n  style,\n  xstyle,\n  ...props\n}: ComponentProps<\"span\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.group, xstyle);\n  return (\n    <span\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    minHeight: \"1.25rem\",\n    minWidth: \"1.25rem\",\n    paddingInline: spacingVars.space1,\n    userSelect: \"none\",\n  },\n  group: { alignItems: \"center\", display: \"inline-flex\", gap: spacingVars.space1 },\n});\n\ntype StyleProps = { xstyle?: stylex.StyleXStyles };\n\nexport function Kbd({ xstyle, ...props }: ComponentProps<\"kbd\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return <kbd {...props} {...stylexProps} />;\n}\n\nexport function KbdGroup({ xstyle, ...props }: ComponentProps<\"span\"> & StyleProps) {\n  const stylexProps = stylex.props(styles.group, xstyle);\n  return <span {...props} {...stylexProps} />;\n}\n",
       "path": "kbd.tsx"
     }
   ],

package/dist/items/label.json

@@ -3,7 +3,7 @@
   "primaryExport": "Label",
   "files": [
     {
-      "content": "/* oxlint-disable jsx-a11y/label-has-associated-control -- The caller provides htmlFor or nests the control. */\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightTight,\n    userSelect: \"none\",\n  },\n});\n\nexport type LabelProps = ComponentProps<\"label\"> & { xstyle?: stylex.StyleXStyles };\n\nexport function Label({ className, style, xstyle, ...props }: LabelProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return (\n    <label\n      {...props}\n      className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n      style={{ ...stylexProps.style, ...style }}\n    />\n  );\n}\n",
+      "content": "/* oxlint-disable jsx-a11y/label-has-associated-control -- The caller provides htmlFor or nests the control. */\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightTight,\n    userSelect: \"none\",\n  },\n});\n\nexport type LabelProps = ComponentProps<\"label\"> & { xstyle?: stylex.StyleXStyles };\n\nexport function Label({ xstyle, ...props }: LabelProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return <label {...props} {...stylexProps} />;\n}\n",
       "path": "label.tsx"
     }
   ],

package/dist/items/link.json

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

package/dist/items/marker.json

@@ -3,12 +3,8 @@
   "primaryExport": "Marker",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n  },\n  variantDefault: {},\n  border: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n    paddingBottom: spacingVars.space2,\n  },\n  separator: {\n    display: \"flex\",\n    width: \"100%\",\n    \"::before\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: 1,\n    },\n    \"::after\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: 1,\n    },\n  },\n  icon: { alignItems: \"center\", display: \"inline-flex\", flexShrink: 0 },\n  content: { overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" },\n});\n\nexport type MarkerProps = ComponentProps<\"div\"> & {\n  variant?: \"border\" | \"default\" | \"separator\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Marker({ className, style, variant = \"default\", xstyle, ...props }: MarkerProps) {\n  return (\n    <div\n      {...props}\n      {...getNativeStyleProps(\n        stylex.props(\n          styles.root,\n          variant === \"default\" ? styles.variantDefault : styles[variant],\n          xstyle,\n        ),\n        className,\n        style,\n      )}\n    />\n  );\n}\n\nexport function MarkerIcon({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      {...props}\n      {...getNativeStyleProps(stylex.props(styles.icon), className, style)}\n    />\n  );\n}\n\nexport function MarkerContent({ className, style, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space2,\n    lineHeight: typographyVars.lineHeightNormal,\n    minWidth: 0,\n  },\n  variantDefault: {},\n  border: {\n    borderBottomColor: colorVars.strokeDefault,\n    borderBottomStyle: \"solid\",\n    borderBottomWidth: 1,\n    paddingBottom: spacingVars.space2,\n  },\n  separator: {\n    display: \"flex\",\n    width: \"100%\",\n    \"::before\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: 1,\n    },\n    \"::after\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: 1,\n    },\n  },\n  icon: { alignItems: \"center\", display: \"inline-flex\", flexShrink: 0 },\n  content: { overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" },\n});\n\nexport type MarkerProps = ComponentProps<\"div\"> & {\n  variant?: \"border\" | \"default\" | \"separator\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Marker({ variant = \"default\", xstyle, ...props }: MarkerProps) {\n  return (\n    <div\n      {...props}\n      {...stylex.props(\n        styles.root,\n        variant === \"default\" ? styles.variantDefault : styles[variant],\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport function MarkerIcon({ ...props }: ComponentProps<\"span\">) {\n  return <span aria-hidden=\"true\" {...props} {...stylex.props(styles.icon)} />;\n}\n\nexport function MarkerContent({ ...props }: ComponentProps<\"span\">) {\n  return <span {...props} {...stylex.props(styles.content)} />;\n}\n",
       "path": "marker.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/menubar.json

@@ -3,7 +3,7 @@
   "primaryExport": "Menubar",
   "files": [
     {
-      "content": "import { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"./dropdown-menu\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    gap: spacingVars.space1,\n    minHeight: sizeVars.controlMd,\n    padding: spacingVars.space1,\n  },\n  trigger: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  triggerOpen: { backgroundColor: colorVars.bgSurfacePressed },\n  triggerDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n});\n\nexport function Menubar(props: ComponentProps<typeof MenubarPrimitive>) {\n  return <MenubarPrimitive {...props} {...stylex.props(styles.root)} />;\n}\n\nexport const MenubarMenu = MenuPrimitive.Root;\n\nexport function MenubarTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return (\n    <MenuPrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.trigger,\n          state.open && styles.triggerOpen,\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          state.open && styles.triggerOpen,\n          state.disabled && styles.triggerDisabled,\n        );\n        return { ...sx.style, ...(typeof style === \"function\" ? style(state) : style) };\n      }}\n    />\n  );\n}\n\nexport const MenubarContent = DropdownMenuContent;\nexport const MenubarItem = DropdownMenuItem;\nexport const MenubarCheckboxItem = DropdownMenuCheckboxItem;\nexport const MenubarRadioItem = DropdownMenuRadioItem;\nexport const MenubarGroup = DropdownMenuGroup;\nexport const MenubarRadioGroup = DropdownMenuRadioGroup;\nexport const MenubarLabel = DropdownMenuLabel;\nexport const MenubarSeparator = DropdownMenuSeparator;\nexport const MenubarShortcut = DropdownMenuShortcut;\nexport const MenubarSub = DropdownMenuSub;\nexport const MenubarSubTrigger = DropdownMenuSubTrigger;\nexport const MenubarSubContent = DropdownMenuSubContent;\n",
+      "content": "import { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"./dropdown-menu\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    display: \"flex\",\n    gap: spacingVars.space1,\n    minHeight: sizeVars.controlMd,\n    padding: spacingVars.space1,\n  },\n  trigger: {\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  triggerOpen: { backgroundColor: colorVars.bgSurfacePressed },\n  triggerDisabled: {\n    backgroundColor: \"transparent\",\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: \"transparent\" },\n  },\n});\n\nexport function Menubar(props: ComponentProps<typeof MenubarPrimitive>) {\n  return <MenubarPrimitive {...props} {...stylex.props(styles.root)} />;\n}\n\nexport const MenubarMenu = MenuPrimitive.Root;\n\nexport function MenubarTrigger({ ...props }: ComponentProps<typeof MenuPrimitive.Trigger>) {\n  return (\n    <MenuPrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.trigger,\n          state.open && styles.triggerOpen,\n          state.disabled && styles.triggerDisabled,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.trigger,\n          state.open && styles.triggerOpen,\n          state.disabled && styles.triggerDisabled,\n        );\n        return sx.style;\n      }}\n    />\n  );\n}\n\nexport const MenubarContent = DropdownMenuContent;\nexport const MenubarItem = DropdownMenuItem;\nexport const MenubarCheckboxItem = DropdownMenuCheckboxItem;\nexport const MenubarRadioItem = DropdownMenuRadioItem;\nexport const MenubarGroup = DropdownMenuGroup;\nexport const MenubarRadioGroup = DropdownMenuRadioGroup;\nexport const MenubarLabel = DropdownMenuLabel;\nexport const MenubarSeparator = DropdownMenuSeparator;\nexport const MenubarShortcut = DropdownMenuShortcut;\nexport const MenubarSub = DropdownMenuSub;\nexport const MenubarSubTrigger = DropdownMenuSubTrigger;\nexport const MenubarSubContent = DropdownMenuSubContent;\n",
       "path": "menubar.tsx"
     }
   ],

package/dist/items/message-scroller.json

@@ -7,7 +7,7 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport { type ComponentProps, type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"./button\";\nimport { Icon } from \"./Icon\";\nimport { colorVars, motionVars, radiusVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { minHeight: 0, overflow: \"hidden\", position: \"relative\" },\n  viewport: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    height: \"100%\",\n    overflowY: \"auto\",\n    overscrollBehavior: \"contain\",\n    scrollBehavior: \"smooth\",\n    scrollbarColor: `${colorVars.strokeStrong} transparent`,\n    \"@media (prefers-reduced-motion: reduce)\": { scrollBehavior: \"auto\" },\n  },\n  action: {\n    borderRadius: radiusVars.full,\n    bottom: spacingVars.space3,\n    left: \"50%\",\n    minWidth: \"2rem\",\n    opacity: 1,\n    position: \"absolute\",\n    transform: \"translateX(-50%)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n  },\n});\n\nexport type MessageScrollerProps = ComponentProps<\"div\"> & {\n  children: ReactNode;\n  /** Keeps the latest message in view when new messages are added. @default true */\n  followOutput?: boolean;\n  scrollLabel?: string;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function MessageScroller({\n  children,\n  className,\n  followOutput = true,\n  scrollLabel = \"Scroll to latest message\",\n  style,\n  xstyle,\n  ...props\n}: MessageScrollerProps) {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [isAtEnd, setIsAtEnd] = useState(true);\n\n  useEffect(() => {\n    if (followOutput && isAtEnd)\n      viewportRef.current?.scrollTo({ top: viewportRef.current.scrollHeight });\n  }, [children, followOutput, isAtEnd]);\n\n  const resolved = stylex.props(styles.root, xstyle);\n  return (\n    <div\n      {...props}\n      className={[resolved.className, className].filter(Boolean).join(\" \")}\n      style={{ ...resolved.style, ...style }}\n    >\n      <div\n        ref={viewportRef}\n        {...stylex.props(styles.viewport)}\n        onScroll={(event) => {\n          const target = event.currentTarget;\n          setIsAtEnd(target.scrollHeight - target.scrollTop - target.clientHeight < 4);\n        }}\n      >\n        {children}\n      </div>\n      {!isAtEnd ? (\n        <Button\n          aria-label={scrollLabel}\n          size=\"sm\"\n          variant=\"secondary\"\n          xstyle={styles.action}\n          onClick={() =>\n            viewportRef.current?.scrollTo({\n              behavior: \"smooth\",\n              top: viewportRef.current.scrollHeight,\n            })\n          }\n        >\n          <Icon name=\"arrowDown\" />\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport { type ComponentProps, type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"./button\";\nimport { Icon } from \"./Icon\";\nimport { colorVars, motionVars, radiusVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { minHeight: 0, overflow: \"hidden\", position: \"relative\" },\n  viewport: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    height: \"100%\",\n    overflowY: \"auto\",\n    overscrollBehavior: \"contain\",\n    scrollBehavior: \"smooth\",\n    scrollbarColor: `${colorVars.strokeStrong} transparent`,\n    \"@media (prefers-reduced-motion: reduce)\": { scrollBehavior: \"auto\" },\n  },\n  action: {\n    borderRadius: radiusVars.full,\n    bottom: spacingVars.space3,\n    left: \"50%\",\n    minWidth: \"2rem\",\n    opacity: 1,\n    position: \"absolute\",\n    transform: \"translateX(-50%)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n  },\n});\n\nexport type MessageScrollerProps = ComponentProps<\"div\"> & {\n  children: ReactNode;\n  /** Keeps the latest message in view when new messages are added. @default true */\n  followOutput?: boolean;\n  scrollLabel?: string;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function MessageScroller({\n  children,\n  followOutput = true,\n  scrollLabel = \"Scroll to latest message\",\n  xstyle,\n  ...props\n}: MessageScrollerProps) {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [isAtEnd, setIsAtEnd] = useState(true);\n\n  useEffect(() => {\n    if (followOutput && isAtEnd)\n      viewportRef.current?.scrollTo({ top: viewportRef.current.scrollHeight });\n  }, [children, followOutput, isAtEnd]);\n\n  const resolved = stylex.props(styles.root, xstyle);\n  return (\n    <div {...props} {...resolved}>\n      <div\n        ref={viewportRef}\n        {...stylex.props(styles.viewport)}\n        onScroll={(event) => {\n          const target = event.currentTarget;\n          setIsAtEnd(target.scrollHeight - target.scrollTop - target.clientHeight < 4);\n        }}\n      >\n        {children}\n      </div>\n      {!isAtEnd ? (\n        <Button\n          aria-label={scrollLabel}\n          size=\"sm\"\n          variant=\"secondary\"\n          xstyle={styles.action}\n          onClick={() =>\n            viewportRef.current?.scrollTo({\n              behavior: \"smooth\",\n              top: viewportRef.current.scrollHeight,\n            })\n          }\n        >\n          <Icon name=\"arrowDown\" />\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n",
       "path": "message-scroller.tsx"
     }
   ],

package/dist/items/message.json

@@ -3,12 +3,8 @@
   "primaryExport": "Message",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { getNativeStyleProps } from \"./stylex-props\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  incoming: { alignItems: \"flex-start\" },\n  outgoing: { alignItems: \"flex-end\" },\n  header: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n  },\n  content: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  footer: { color: colorVars.fgTertiary, fontSize: typographyVars.fontSizeXs },\n});\n\nexport type MessageProps = ComponentProps<\"article\"> & {\n  side?: \"incoming\" | \"outgoing\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Message({ className, side = \"incoming\", style, xstyle, ...props }: MessageProps) {\n  return (\n    <article\n      {...props}\n      data-side={side}\n      {...getNativeStyleProps(stylex.props(styles.root, styles[side], xstyle), className, style)}\n    />\n  );\n}\n\nexport function MessageHeader({ className, style, ...props }: ComponentProps<\"header\">) {\n  return (\n    <header {...props} {...getNativeStyleProps(stylex.props(styles.header), className, style)} />\n  );\n}\n\nexport function MessageContent({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div {...props} {...getNativeStyleProps(stylex.props(styles.content), className, style)} />\n  );\n}\n\nexport function MessageFooter({ className, style, ...props }: ComponentProps<\"footer\">) {\n  return (\n    <footer {...props} {...getNativeStyleProps(stylex.props(styles.footer), className, style)} />\n  );\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  incoming: { alignItems: \"flex-start\" },\n  outgoing: { alignItems: \"flex-end\" },\n  header: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n  },\n  content: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, width: \"100%\" },\n  footer: { color: colorVars.fgTertiary, fontSize: typographyVars.fontSizeXs },\n});\n\nexport type MessageProps = ComponentProps<\"article\"> & {\n  side?: \"incoming\" | \"outgoing\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Message({ side = \"incoming\", xstyle, ...props }: MessageProps) {\n  return (\n    <article {...props} data-side={side} {...stylex.props(styles.root, styles[side], xstyle)} />\n  );\n}\n\nexport function MessageHeader({ ...props }: ComponentProps<\"header\">) {\n  return <header {...props} {...stylex.props(styles.header)} />;\n}\n\nexport function MessageContent({ ...props }: ComponentProps<\"div\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function MessageFooter({ ...props }: ComponentProps<\"footer\">) {\n  return <footer {...props} {...stylex.props(styles.footer)} />;\n}\n",
       "path": "message.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/native-select.json

@@ -7,7 +7,7 @@
       "path": "Icon.tsx"
     },
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"inline-flex\", position: \"relative\", width: \"fit-content\" },\n  select: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    minWidth: \"10rem\",\n    outline: \"none\",\n    paddingInlineStart: spacingVars.space3,\n    paddingInlineEnd: spacingVars.space8,\n    width: \"100%\",\n    \":hover\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: colorVars.bgSubtle,\n      borderColor: colorVars.strokeDefault,\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { borderColor: colorVars.strokeDefault },\n    },\n  },\n  sm: { height: sizeVars.controlSm },\n  md: { height: sizeVars.controlMd },\n  icon: {\n    color: colorVars.fgSecondary,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n});\n\nexport type NativeSelectProps = Omit<ComponentProps<\"select\">, \"size\"> & {\n  size?: \"md\" | \"sm\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function NativeSelect({\n  className,\n  children,\n  size = \"md\",\n  style,\n  xstyle,\n  ...props\n}: NativeSelectProps) {\n  const stylexProps = stylex.props(styles.select, styles[size], xstyle);\n  return (\n    <span {...stylex.props(styles.root)}>\n      <select\n        {...props}\n        className={[stylexProps.className, className].filter(Boolean).join(\" \")}\n        style={{ ...stylexProps.style, ...style }}\n      >\n        {children}\n      </select>\n      <Icon aria-hidden=\"true\" name=\"chevronDown\" {...stylex.props(styles.icon)} />\n    </span>\n  );\n}\n\nexport function NativeSelectOption(props: ComponentProps<\"option\">) {\n  return <option {...props} />;\n}\nexport function NativeSelectOptGroup(props: ComponentProps<\"optgroup\">) {\n  return <optgroup {...props} />;\n}\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: { display: \"inline-flex\", position: \"relative\", width: \"fit-content\" },\n  select: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    minWidth: \"10rem\",\n    outline: \"none\",\n    paddingInlineStart: spacingVars.space3,\n    paddingInlineEnd: spacingVars.space8,\n    width: \"100%\",\n    \":hover\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: colorVars.bgSubtle,\n      borderColor: colorVars.strokeDefault,\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { borderColor: colorVars.strokeDefault },\n    },\n  },\n  sm: { height: sizeVars.controlSm },\n  md: { height: sizeVars.controlMd },\n  icon: {\n    color: colorVars.fgSecondary,\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    right: spacingVars.space3,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n});\n\nexport type NativeSelectProps = Omit<ComponentProps<\"select\">, \"size\"> & {\n  size?: \"md\" | \"sm\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function NativeSelect({ children, size = \"md\", xstyle, ...props }: NativeSelectProps) {\n  const stylexProps = stylex.props(styles.select, styles[size], xstyle);\n  return (\n    <span {...stylex.props(styles.root)}>\n      <select {...props} {...stylexProps}>\n        {children}\n      </select>\n      <Icon aria-hidden=\"true\" name=\"chevronDown\" {...stylex.props(styles.icon)} />\n    </span>\n  );\n}\n\nexport function NativeSelectOption(props: ComponentProps<\"option\">) {\n  return <option {...props} />;\n}\nexport function NativeSelectOptGroup(props: ComponentProps<\"optgroup\">) {\n  return <optgroup {...props} />;\n}\n",
       "path": "native-select.tsx"
     }
   ],