@nuee/registry 0.4.0 → 0.5.0

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({ 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",
+      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps, MouseEvent } from \"react\";\n\nimport { Button, type ButtonProps } from \"./button\";\nimport type { InputProps } from \"./input\";\nimport type { TextareaProps } from \"./textarea\";\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    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color\",\n    transitionTimingFunction: motionVars.easingStandard,\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: {\n    borderColor: colorVars.strokeFeedbackError,\n    \":focus-within\": {\n      borderColor: colorVars.strokeFeedbackError,\n      outlineColor: colorVars.strokeFeedbackError,\n    },\n  },\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  input: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    height: sizeVars.controlMd,\n    lineHeight: typographyVars.lineHeightNormal,\n    paddingInline: spacingVars.space3,\n    width: \"100%\",\n    \"::placeholder\": { color: colorVars.fgTertiary },\n    \":disabled\": {\n      backgroundColor: colorVars.bgSubtle,\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n    },\n  },\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 = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> &\n  StyleProps & { invalid?: boolean };\n\nexport function InputGroup({ invalid = false, xstyle, ...props }: InputGroupProps) {\n  return (\n    <div\n      {...props}\n      data-invalid={invalid || undefined}\n      {...stylex.props(styles.root, invalid && styles.invalid, xstyle)}\n    />\n  );\n}\n\nexport function InputGroupAddon({\n  align = \"inline-start\",\n  onClick,\n  xstyle,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & StyleProps & { align?: AddonAlignment }) {\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      {...stylex.props(styles.addon, styles[align], xstyle)}\n    />\n  );\n}\n\nexport function InputGroupInput({ xstyle, ...props }: InputProps) {\n  return <InputPrimitive {...props} {...stylex.props(styles.input, styles.control, xstyle)} />;\n}\n\nexport function InputGroupTextarea({ xstyle, ...props }: TextareaProps) {\n  return <textarea {...props} {...stylex.props(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  xstyle,\n  ...props\n}: Omit<ComponentProps<\"span\">, \"className\" | \"style\"> & StyleProps) {\n  return <span {...props} {...stylex.props(styles.text, xstyle)} />;\n}\n",
       "path": "input-group.tsx"
     }
   ],

package/dist/items/input-otp.json

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

package/dist/items/input.json

@@ -3,8 +3,12 @@
   "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({ \"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",
+      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport type { ControlLayoutStyles } from \"./control-layout\";\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      \":focus-visible\": {\n        outlineColor: colorVars.strokeFeedbackError,\n      },\n    },\n  },\n  invalid: {\n    borderColor: colorVars.strokeFeedbackError,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFeedbackError,\n    },\n  },\n});\n\nexport type InputProps = Omit<ComponentProps<typeof InputPrimitive>, \"className\" | \"style\"> & {\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Input({ \"aria-invalid\": ariaInvalid, xstyle, ...props }: InputProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  return (\n    <InputPrimitive\n      {...props}\n      aria-invalid={ariaInvalid}\n      {...stylex.props(styles.root, isInvalid && styles.invalid, xstyle)}\n    />\n  );\n}\n",
       "path": "input.tsx"
+    },
+    {
+      "content": "import type { StyleXStyles } from \"@stylexjs/stylex\";\nimport type { CSSProperties } from \"react\";\n\n/** Placement belongs to the screen; appearance and state belong to the control. */\ntype Placement = Pick<\n  CSSProperties,\n  | \"alignSelf\"\n  | \"justifySelf\"\n  | \"flexGrow\"\n  | \"flexShrink\"\n  | \"flexBasis\"\n  | \"order\"\n  | \"gridArea\"\n  | \"gridColumn\"\n  | \"gridRow\"\n  | \"margin\"\n  | \"marginBlock\"\n  | \"marginBlockStart\"\n  | \"marginBlockEnd\"\n  | \"marginInline\"\n  | \"marginInlineStart\"\n  | \"marginInlineEnd\"\n  | \"position\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"insetInlineStart\"\n  | \"insetInlineEnd\"\n  | \"zIndex\"\n>;\n\nexport type ControlPlacementStyles = StyleXStyles<Placement>;\nexport type ControlLayoutStyles = StyleXStyles<\n  Placement & Pick<CSSProperties, \"width\" | \"minWidth\" | \"maxWidth\">\n>;\n\n/** A multiline field may opt into its vertical space; its visual treatment stays owned. */\nexport type ControlFieldStyles = StyleXStyles<\n  Placement &\n    Pick<CSSProperties, \"width\" | \"minWidth\" | \"maxWidth\" | \"height\" | \"minHeight\" | \"maxHeight\">\n>;\n",
+      "path": "control-layout.ts"
     }
   ],
   "dependencies": [

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({ 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",
+      "content": "import {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    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.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    justifyContent: \"center\",\n    minHeight: sizeVars.iconLg,\n    minWidth: sizeVars.iconLg,\n    paddingInline: spacingVars.space1,\n    userSelect: \"none\",\n  },\n  group: { alignItems: \"center\", display: \"inline-flex\", gap: spacingVars.space1 },\n});\n\nexport function Kbd(props: Omit<ComponentProps<\"kbd\">, \"className\" | \"style\">) {\n  return <kbd {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function KbdGroup(props: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return <span {...props} {...stylex.props(styles.group)} />;\n}\n",
       "path": "kbd.tsx"
     }
   ],

package/dist/items/label.json

@@ -3,8 +3,12 @@
   "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({ xstyle, ...props }: LabelProps) {\n  const stylexProps = stylex.props(styles.root, xstyle);\n  return <label {...props} {...stylexProps} />;\n}\n",
+      "content": "import { colorVars, spacingVars } from \"@nuee/tokens/semantic.stylex\";\n/* 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 { typographyStyles } from \"./typography\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    gap: spacingVars.space2,\n    userSelect: \"none\",\n  },\n});\n\nexport type LabelProps = Omit<ComponentProps<\"label\">, \"className\" | \"style\">;\n\nexport function Label(props: LabelProps) {\n  return <label {...props} {...stylex.props(typographyStyles.title, styles.root)} />;\n}\n",
       "path": "label.tsx"
+    },
+    {
+      "content": "import { typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nexport const typographyStyles = stylex.create({\n  body: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  description: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  caption: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightRegular,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  label: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n  title: {\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  page: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeXl,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  section: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeLg,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  subsection: {\n    fontFamily: typographyVars.fontFamilyHeading,\n    fontSize: typographyVars.fontSizeMd,\n    fontWeight: typographyVars.fontWeightSemibold,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n});\n",
+      "path": "typography.ts"
     }
   ],
   "dependencies": [

package/dist/items/link.json

@@ -3,11 +3,7 @@
   "primaryExport": "Link",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { 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",
+      "content": "\"use client\";\n\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { colorVars, motionVars, sizeVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport { ArrowSquareOutIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { forwardRef, type ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderRadius: \"0.125rem\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    gap: \"0.1875em\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color, opacity, text-decoration-color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  inline: {\n    color: colorVars.fgAction,\n    textDecorationLine: \"underline\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.15em\",\n    \":hover\": { opacity: 0.72 },\n  },\n  current: {\n    color: \"currentColor\",\n    textDecorationLine: \"underline\",\n    textDecorationThickness: sizeVars.stroke,\n    textUnderlineOffset: \"0.15em\",\n    \":hover\": { opacity: 0.72 },\n  },\n  plain: {\n    color: colorVars.fgAction,\n    textDecorationLine: \"none\",\n    \":hover\": { opacity: 0.72 },\n  },\n});\n\nexport type LinkVariant = \"current\" | \"inline\" | \"plain\";\n\nexport type LinkProps = Omit<useRender.ComponentProps<\"a\">, \"className\" | \"style\"> & {\n  variant?: LinkVariant;\n};\n\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { render, variant = \"inline\", ...props },\n  ref,\n) {\n  const stylexProps = stylex.props(styles.root, styles[variant]);\n\n  return useRender({\n    defaultTagName: \"a\",\n    props: {\n      ...props,\n      ...stylexProps,\n    },\n    ref,\n    render,\n  });\n});\n\nfunction ExternalIcon(\n  props: Omit<ComponentProps<typeof ArrowSquareOutIcon>, \"className\" | \"style\">,\n) {\n  return <ArrowSquareOutIcon aria-hidden=\"true\" size=\"1em\" {...props} />;\n}\n\nexport const Link = Object.assign(LinkBase, { ExternalIcon });\n",
       "path": "link.tsx"
     }
   ],

package/dist/items/marker.json

@@ -3,7 +3,7 @@
   "primaryExport": "Marker",
   "files": [
     {
-      "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",
+      "content": "import { colorVars, sizeVars, spacingVars, typographyVars } from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    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: sizeVars.stroke,\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: sizeVars.stroke,\n    },\n    \"::after\": {\n      backgroundColor: colorVars.strokeDefault,\n      content: \"\",\n      flex: 1,\n      height: sizeVars.stroke,\n    },\n  },\n  icon: { alignItems: \"center\", display: \"inline-flex\", flexShrink: 0 },\n  content: { overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" },\n});\n\nexport type MarkerProps = Omit<ComponentProps<\"div\">, \"className\" | \"style\"> & {\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 }: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return <span aria-hidden=\"true\" {...props} {...stylex.props(styles.icon)} />;\n}\n\nexport function MarkerContent({ ...props }: Omit<ComponentProps<\"span\">, \"className\" | \"style\">) {\n  return <span {...props} {...stylex.props(styles.content)} />;\n}\n",
       "path": "marker.tsx"
     }
   ],

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({ ...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",
+      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } 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\";\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.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlSm,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\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(\n  props: Omit<ComponentProps<typeof MenubarPrimitive>, \"className\" | \"style\">,\n) {\n  return <MenubarPrimitive {...props} {...stylex.props(styles.root)} />;\n}\n\nexport const MenubarMenu = MenuPrimitive.Root;\n\nexport function MenubarTrigger({\n  ...props\n}: Omit<ComponentProps<typeof MenuPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: MenuPrimitive.Trigger.State) {\n    return stylex.props(\n      styles.trigger,\n      state.open && styles.triggerOpen,\n      state.disabled && styles.triggerDisabled,\n    );\n  }\n  return (\n    <MenuPrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\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.json

@@ -3,12 +3,15 @@
   "primaryExport": "Message",
   "files": [
     {
-      "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",
+      "content": "import {\n  colorVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  group: { display: \"flex\", flexDirection: \"column\", gap: spacingVars.space2, minWidth: 0 },\n  root: { display: \"flex\", gap: spacingVars.space2, minWidth: 0, width: \"100%\" },\n  alignStart: { flexDirection: \"row\" },\n  alignEnd: { flexDirection: \"row-reverse\" },\n  avatar: {\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n    backgroundColor: colorVars.bgSubtle,\n    borderRadius: radiusVars.full,\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n    minWidth: sizeVars.controlLg,\n    overflow: \"hidden\",\n  },\n  header: {\n    alignItems: \"center\",\n    color: colorVars.fgSecondary,\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    maxWidth: \"100%\",\n    minWidth: 0,\n  },\n  content: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space2,\n    maxWidth: \"85%\",\n    minWidth: 0,\n    width: \"fit-content\",\n  },\n  footer: {\n    alignItems: \"center\",\n    color: colorVars.fgTertiary,\n    display: \"flex\",\n    fontSize: typographyVars.fontSizeXs,\n    justifyContent: \"flex-end\",\n    maxWidth: \"100%\",\n    minWidth: 0,\n  },\n});\n\nexport type MessageAlign = \"start\" | \"end\";\n\nexport type MessageProps = Omit<ComponentProps<\"article\">, \"className\" | \"style\"> & {\n  align?: MessageAlign;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Message({ align = \"start\", xstyle, ...props }: MessageProps) {\n  return (\n    <article\n      {...props}\n      data-align={align}\n      {...stylex.props(\n        styles.root,\n        align === \"start\" ? styles.alignStart : styles.alignEnd,\n        xstyle,\n      )}\n    />\n  );\n}\n\nexport function MessageGroup({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.group)} />;\n}\n\nexport function MessageAvatar({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.avatar)} />;\n}\n\nexport function MessageHeader({ ...props }: Omit<ComponentProps<\"header\">, \"className\" | \"style\">) {\n  return <header {...props} {...stylex.props(styles.header)} />;\n}\n\nexport function MessageContent({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function MessageFooter({ ...props }: Omit<ComponentProps<\"footer\">, \"className\" | \"style\">) {\n  return <footer {...props} {...stylex.props(styles.footer)} />;\n}\n",
       "path": "message.tsx"
     }
   ],
   "dependencies": [
     "@stylexjs/stylex"
   ],
-  "registryDependencies": []
+  "registryDependencies": [
+    "avatar",
+    "bubble"
+  ]
 }

package/dist/items/native-select.json

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

package/dist/items/navigation-menu.json

@@ -3,11 +3,7 @@
   "primaryExport": "NavigationMenu",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    justifyContent: \"center\",\n    maxWidth: \"max-content\",\n    position: \"relative\",\n    zIndex: 10,\n  },\n  list: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    gap: 0,\n    justifyContent: \"center\",\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { position: \"relative\" },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    height: sizeVars.controlMd,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: \"transparent\",\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { backgroundColor: \"transparent\" },\n    },\n  },\n  triggerOpen: { backgroundColor: colorVars.interactionHover },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    position: \"relative\",\n    top: sizeVars.stroke,\n  },\n  iconClosed: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    \":is([data-popup-open] *)\": { display: \"none\" },\n  },\n  iconOpen: {\n    alignItems: \"center\",\n    display: \"none\",\n    \":is([data-popup-open] *)\": { display: \"inline-flex\" },\n  },\n  content: {\n    height: \"100%\",\n    padding: spacingVars.space1,\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    width: \"auto\",\n  },\n  contentStartingFromLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentStartingFromRight: { opacity: 0, transform: \"translateX(50%)\" },\n  contentEndingToLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentEndingToRight: { opacity: 0, transform: \"translateX(50%)\" },\n  link: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    gap: spacingVars.space2,\n    outline: \"none\",\n    padding: spacingVars.space2,\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      backgroundColor: colorVars.interactionHover,\n      outlineColor: colorVars.strokeFocus,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  positioner: {\n    height: \"var(--positioner-height)\",\n    maxWidth: \"var(--available-width)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"inset, width, height\",\n    width: \"var(--positioner-width)\",\n    zIndex: 60,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    height: \"var(--popup-height)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform, width, height\",\n    width: \"var(--popup-width)\",\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.9)\" },\n  viewport: {\n    fontFamily: typographyVars.fontFamily,\n    height: \"100%\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n  },\n});\n\nexport function NavigationMenu(props: ComponentProps<typeof NavigationMenuPrimitive.Root>) {\n  return <NavigationMenuPrimitive.Root {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function NavigationMenuList(props: ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return <NavigationMenuPrimitive.List {...props} {...stylex.props(styles.list)} />;\n}\n\nexport function NavigationMenuItem(props: ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return <NavigationMenuPrimitive.Item {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function NavigationMenuContent({\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(\n          styles.content,\n          state.transitionStatus === \"starting\" &&\n            state.activationDirection === \"left\" &&\n            styles.contentStartingFromLeft,\n          state.transitionStatus === \"starting\" &&\n            state.activationDirection === \"right\" &&\n            styles.contentStartingFromRight,\n          state.transitionStatus === \"ending\" &&\n            state.activationDirection === \"left\" &&\n            styles.contentEndingToRight,\n          state.transitionStatus === \"ending\" &&\n            state.activationDirection === \"right\" &&\n            styles.contentEndingToLeft,\n        );\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(\n          styles.content,\n          state.transitionStatus === \"starting\" &&\n            state.activationDirection === \"left\" &&\n            styles.contentStartingFromLeft,\n          state.transitionStatus === \"starting\" &&\n            state.activationDirection === \"right\" &&\n            styles.contentStartingFromRight,\n          state.transitionStatus === \"ending\" &&\n            state.activationDirection === \"left\" &&\n            styles.contentEndingToRight,\n          state.transitionStatus === \"ending\" &&\n            state.activationDirection === \"right\" &&\n            styles.contentEndingToLeft,\n        );\n        return sx.style;\n      }}\n    />\n  );\n}\n\nexport function NavigationMenuTrigger({\n  children,\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      {...props}\n      className={(state) => {\n        const sx = stylex.props(styles.trigger, state.open && styles.triggerOpen);\n        return sx.className;\n      }}\n      style={(state) => {\n        const sx = stylex.props(styles.trigger, state.open && styles.triggerOpen);\n        return sx.style;\n      }}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon {...stylex.props(styles.icon)}>\n        <span {...stylex.props(styles.iconClosed)}>\n          <Icon aria-hidden=\"true\" name=\"chevronDown\" />\n        </span>\n        <span {...stylex.props(styles.iconOpen)}>\n          <Icon aria-hidden=\"true\" name=\"chevronUp\" />\n        </span>\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nexport function NavigationMenuLink({\n  ...props\n}: ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  const sx = stylex.props(styles.link);\n  return (\n    <NavigationMenuPrimitive.Link\n      {...props}\n      className={() => sx.className}\n      style={() => sx.style}\n    />\n  );\n}\n\ntype NavigationMenuViewportProps = ComponentProps<typeof NavigationMenuPrimitive.Popup> &\n  Pick<ComponentProps<typeof NavigationMenuPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\">;\n\nexport function NavigationMenuViewport({\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 8,\n  ...props\n}: NavigationMenuViewportProps) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <NavigationMenuPrimitive.Popup\n          {...props}\n          className={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n            );\n            return sx.className;\n          }}\n          style={(state) => {\n            const sx = stylex.props(\n              styles.popup,\n              state.transitionStatus === \"starting\" && styles.popupTransitioning,\n              state.transitionStatus === \"ending\" && styles.popupTransitioning,\n            );\n            return sx.style;\n          }}\n        >\n          <NavigationMenuPrimitive.Viewport {...stylex.props(styles.viewport)} />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    justifyContent: \"center\",\n    maxWidth: \"max-content\",\n    position: \"relative\",\n    zIndex: 10,\n  },\n  list: {\n    alignItems: \"center\",\n    display: \"flex\",\n    flex: 1,\n    gap: 0,\n    justifyContent: \"center\",\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n  },\n  item: { position: \"relative\" },\n  trigger: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    height: sizeVars.controlMd,\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: \"transparent\",\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { backgroundColor: \"transparent\" },\n    },\n  },\n  triggerOpen: { backgroundColor: colorVars.interactionHover },\n  icon: {\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    position: \"relative\",\n    top: sizeVars.stroke,\n    transform: \"rotate(0deg)\",\n    \":is([data-popup-open] *)\": { transform: \"rotate(180deg)\" },\n  },\n  content: {\n    height: \"100%\",\n    padding: spacingVars.space1,\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n    width: \"auto\",\n  },\n  contentStartingFromLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentStartingFromRight: { opacity: 0, transform: \"translateX(50%)\" },\n  contentEndingToLeft: { opacity: 0, transform: \"translateX(-50%)\" },\n  contentEndingToRight: { opacity: 0, transform: \"translateX(50%)\" },\n  link: {\n    alignItems: \"center\",\n    borderRadius: radiusVars.sm,\n    color: colorVars.fgPrimary,\n    display: \"flex\",\n    gap: spacingVars.space2,\n    outline: \"none\",\n    padding: spacingVars.space2,\n    textDecoration: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      backgroundColor: colorVars.interactionHover,\n      outlineColor: colorVars.strokeFocus,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  positioner: {\n    height: \"var(--positioner-height)\",\n    maxWidth: \"var(--available-width)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"inset, width, height\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n    width: \"var(--positioner-width)\",\n    zIndex: layerVars.popup,\n  },\n  popup: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    boxShadow: shadowVars.floating,\n    color: colorVars.fgPrimary,\n    height: \"var(--popup-height)\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    transformOrigin: \"var(--transform-origin)\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity, transform, width, height\",\n    transitionTimingFunction: motionVars.easingEnter,\n    width: \"var(--popup-width)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  popupTransitioning: { opacity: 0, transform: \"scale(0.9)\" },\n  viewport: {\n    fontFamily: typographyVars.fontFamilyBody,\n    height: \"100%\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n  },\n});\n\nexport function NavigationMenu(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.Root>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.Root {...props} {...stylex.props(styles.root)} />;\n}\n\nexport function NavigationMenuList(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.List>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.List {...props} {...stylex.props(styles.list)} />;\n}\n\nexport function NavigationMenuItem(\n  props: Omit<ComponentProps<typeof NavigationMenuPrimitive.Item>, \"className\" | \"style\">,\n) {\n  return <NavigationMenuPrimitive.Item {...props} {...stylex.props(styles.item)} />;\n}\n\nexport function NavigationMenuContent({\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Content>, \"className\" | \"style\">) {\n  function getContentStyles(state: NavigationMenuPrimitive.Content.State) {\n    return stylex.props(\n      styles.content,\n      state.transitionStatus === \"starting\" &&\n        state.activationDirection === \"left\" &&\n        styles.contentStartingFromLeft,\n      state.transitionStatus === \"starting\" &&\n        state.activationDirection === \"right\" &&\n        styles.contentStartingFromRight,\n      state.transitionStatus === \"ending\" &&\n        state.activationDirection === \"left\" &&\n        styles.contentEndingToRight,\n      state.transitionStatus === \"ending\" &&\n        state.activationDirection === \"right\" &&\n        styles.contentEndingToLeft,\n    );\n  }\n  return (\n    <NavigationMenuPrimitive.Content\n      {...props}\n      className={(state) => getContentStyles(state).className}\n      style={(state) => getContentStyles(state).style}\n    />\n  );\n}\n\nexport function NavigationMenuTrigger({\n  children,\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Trigger>, \"className\" | \"style\">) {\n  function getTriggerStyles(state: NavigationMenuPrimitive.Trigger.State) {\n    return stylex.props(styles.trigger, state.open && styles.triggerOpen);\n  }\n  return (\n    <NavigationMenuPrimitive.Trigger\n      {...props}\n      className={(state) => getTriggerStyles(state).className}\n      style={(state) => getTriggerStyles(state).style}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon {...stylex.props(styles.icon)}>\n        <CaretDownIcon aria-hidden=\"true\" />\n      </NavigationMenuPrimitive.Icon>\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nexport function NavigationMenuLink({\n  ...props\n}: Omit<ComponentProps<typeof NavigationMenuPrimitive.Link>, \"className\" | \"style\">) {\n  const sx = stylex.props(styles.link);\n  return <NavigationMenuPrimitive.Link {...props} className={sx.className} style={sx.style} />;\n}\n\ntype NavigationMenuViewportProps = Omit<\n  ComponentProps<typeof NavigationMenuPrimitive.Popup>,\n  \"className\" | \"style\"\n> &\n  Pick<ComponentProps<typeof NavigationMenuPrimitive.Positioner>, \"align\" | \"side\" | \"sideOffset\">;\n\nexport function NavigationMenuViewport({\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 8,\n  ...props\n}: NavigationMenuViewportProps) {\n  function getPopupStyles(state: NavigationMenuPrimitive.Popup.State) {\n    return stylex.props(\n      styles.popup,\n      state.transitionStatus === \"starting\" && styles.popupTransitioning,\n      state.transitionStatus === \"ending\" && styles.popupTransitioning,\n    );\n  }\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        align={align}\n        side={side}\n        sideOffset={sideOffset}\n        {...stylex.props(styles.positioner)}\n      >\n        <NavigationMenuPrimitive.Popup\n          {...props}\n          className={(state) => getPopupStyles(state).className}\n          style={(state) => getPopupStyles(state).style}\n        >\n          <NavigationMenuPrimitive.Viewport {...stylex.props(styles.viewport)} />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n",
       "path": "navigation-menu.tsx"
     }
   ],

package/dist/items/pagination.json

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

package/dist/items/popover.json

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

package/dist/items/progress.json

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

package/dist/items/radio-group.json

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

package/dist/items/scroll-area.json

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

package/dist/items/select.json

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

package/dist/items/separator.json

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