@nuee/registry 0.4.0 → 0.5.0

package/dist/items/skeleton.json

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

package/dist/items/slider.json

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

package/dist/items/spinner.json

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

package/dist/items/switch.json

@@ -3,8 +3,12 @@
   "primaryExport": "Switch",
   "files": [
     {
-      "content": "import { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { colorVars, motionVars, radiusVars, sizeVars } from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.interactionDisabled,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.full,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    outline: \"none\",\n    padding: \"0.125rem\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, opacity\",\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  sm: { height: \"1.5rem\", width: \"2rem\" },\n  md: { height: \"1.5rem\", width: \"2.5rem\" },\n  checked: { backgroundColor: colorVars.bgActionPrimary },\n  disabled: { backgroundColor: colorVars.interactionDisabled, cursor: \"not-allowed\" },\n  thumb: {\n    backgroundColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    display: \"block\",\n    transform: \"translateX(0)\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"transform\",\n  },\n  thumbsm: { height: \"1rem\", width: \"1rem\" },\n  thumbmd: { height: \"1.25rem\", width: \"1.25rem\" },\n  thumbCheckedsm: { transform: \"translateX(0.75rem)\" },\n  thumbCheckedmd: { transform: \"translateX(1rem)\" },\n});\n\nexport type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"md\" | \"sm\";\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Switch({ size = \"md\", xstyle, ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        return stylexProps.className;\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          state.checked && styles.checked,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        return stylexProps.style;\n      }}\n    >\n      <SwitchPrimitive.Thumb\n        className={(state) =>\n          stylex.props(\n            styles.thumb,\n            styles[`thumb${size}`],\n            state.checked && styles[`thumbChecked${size}`],\n          ).className\n        }\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport {\n  colorVars,\n  motionVars,\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 { ControlPlacementStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: colorVars.interactionDisabled,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    borderRadius: radiusVars.full,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    outline: \"none\",\n    padding: spacingVars.space0_5,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  sm: { height: sizeVars.controlXs, width: sizeVars.controlSm },\n  md: { height: sizeVars.controlXs, width: sizeVars.controlLg },\n  checked: { backgroundColor: colorVars.bgActionPrimary },\n  disabled: { backgroundColor: colorVars.interactionDisabled, cursor: \"not-allowed\" },\n  disabledThumb: { backgroundColor: colorVars.fgDisabled },\n  thumb: {\n    backgroundColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    display: \"block\",\n    transform: \"translateX(0)\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, transform\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n    },\n  },\n  thumbsm: { height: sizeVars.iconMd, width: sizeVars.iconMd },\n  thumbmd: { height: sizeVars.iconLg, width: sizeVars.iconLg },\n  thumbCheckedsm: { transform: `translateX(${spacingVars.space3})` },\n  thumbCheckedmd: { transform: `translateX(${spacingVars.space4})` },\n});\n\nexport type SwitchProps = Omit<\n  ComponentProps<typeof SwitchPrimitive.Root>,\n  \"className\" | \"style\"\n> & {\n  size?: \"md\" | \"sm\";\n  xstyle?: ControlPlacementStyles;\n};\n\nexport function Switch({ size = \"md\", xstyle, ...props }: SwitchProps) {\n  function getRootStyles(state: SwitchPrimitive.Root.State) {\n    return stylex.props(\n      styles.root,\n      styles[size],\n      state.checked && styles.checked,\n      state.disabled && styles.disabled,\n      xstyle,\n    );\n  }\n  return (\n    <SwitchPrimitive.Root\n      {...props}\n      className={(state) => getRootStyles(state).className}\n      style={(state) => getRootStyles(state).style}\n    >\n      <SwitchPrimitive.Thumb\n        className={(state) =>\n          stylex.props(\n            styles.thumb,\n            styles[`thumb${size}`],\n            state.checked && styles[`thumbChecked${size}`],\n            state.disabled && styles.disabledThumb,\n          ).className\n        }\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n",
       "path": "switch.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/table.json

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

package/dist/items/tabs.json

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

package/dist/items/textarea.json

@@ -3,7 +3,7 @@
   "primaryExport": "Textarea",
   "files": [
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    minHeight: \"5rem\",\n    outline: \"none\",\n    padding: spacingVars.space3,\n    resize: \"vertical\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"::placeholder\": { color: colorVars.fgTertiary },\n    \":hover\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: colorVars.bgSubtle,\n      borderColor: colorVars.strokeDefault,\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { borderColor: colorVars.strokeDefault },\n    },\n    \":user-invalid\": { borderColor: colorVars.strokeFeedbackError },\n  },\n  invalid: { borderColor: colorVars.strokeFeedbackError },\n});\n\nexport type TextareaProps = ComponentProps<\"textarea\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Textarea({ \"aria-invalid\": ariaInvalid, xstyle, ...props }: TextareaProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  const stylexProps = stylex.props(styles.root, isInvalid && styles.invalid, xstyle);\n\n  return <textarea {...props} aria-invalid={ariaInvalid} {...stylexProps} />;\n}\n",
+      "content": "import {\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 { ControlFieldStyles } from \"./control-layout\";\n\nconst styles = stylex.create({\n  root: {\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    minHeight: \"5rem\",\n    outline: \"none\",\n    padding: spacingVars.space3,\n    resize: \"vertical\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"border-color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: \"100%\",\n    \"::placeholder\": { color: colorVars.fgTertiary },\n    \":hover\": { borderColor: colorVars.strokeStrong },\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFocus,\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": {\n      backgroundColor: colorVars.bgSubtle,\n      borderColor: colorVars.strokeDefault,\n      color: colorVars.fgDisabled,\n      cursor: \"not-allowed\",\n      \":hover\": { borderColor: colorVars.strokeDefault },\n    },\n    \":user-invalid\": {\n      borderColor: colorVars.strokeFeedbackError,\n      \":focus-visible\": {\n        borderColor: colorVars.strokeFeedbackError,\n        outlineColor: colorVars.strokeFeedbackError,\n      },\n    },\n  },\n  invalid: {\n    borderColor: colorVars.strokeFeedbackError,\n    \":focus-visible\": {\n      borderColor: colorVars.strokeFeedbackError,\n      outlineColor: colorVars.strokeFeedbackError,\n    },\n  },\n});\n\nexport type TextareaProps = Omit<ComponentProps<\"textarea\">, \"className\" | \"style\"> & {\n  xstyle?: ControlFieldStyles;\n};\n\nexport function Textarea({ \"aria-invalid\": ariaInvalid, xstyle, ...props }: TextareaProps) {\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n  return (\n    <textarea\n      {...props}\n      aria-invalid={ariaInvalid}\n      {...stylex.props(styles.root, isInvalid && styles.invalid, xstyle)}\n    />\n  );\n}\n",
       "path": "textarea.tsx"
     }
   ],

package/dist/items/timeline.json

@@ -0,0 +1,14 @@
+{
+  "name": "timeline",
+  "primaryExport": "Timeline",
+  "files": [
+    {
+      "content": "import {\n  colorVars,\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  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space4,\n    margin: 0,\n    padding: 0,\n  },\n  item: {\n    columnGap: spacingVars.space3,\n    display: \"grid\",\n    gridTemplateColumns: `${sizeVars.controlXs} minmax(0, 1fr)`,\n    listStyle: \"none\",\n    minWidth: 0,\n    position: \"relative\",\n    \"::before\": {\n      backgroundColor: colorVars.strokeDefault,\n      bottom: `calc(${spacingVars.space4} * -1)`,\n      content: '\"\"',\n      left: `calc((${sizeVars.controlXs} - ${sizeVars.stroke}) / 2)`,\n      position: \"absolute\",\n      top: 0,\n      width: sizeVars.stroke,\n      zIndex: 0,\n    },\n    \":last-child\": {\n      \"::before\": { display: \"none\" },\n    },\n  },\n  indicator: {\n    alignItems: \"center\",\n    backgroundColor: colorVars.bgSurface,\n    borderRadius: radiusVars.full,\n    color: colorVars.fgSecondary,\n    display: \"inline-flex\",\n    fontSize: sizeVars.iconSm,\n    gridColumn: 1,\n    height: sizeVars.controlXs,\n    justifyContent: \"center\",\n    position: \"relative\",\n    width: sizeVars.controlXs,\n    zIndex: 1,\n    boxShadow: shadowVars.floating,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n  },\n  indicatorActive: {\n    backgroundColor: colorVars.bgCurrent,\n    color: colorVars.fgPrimary,\n  },\n  indicatorComplete: {\n    backgroundColor: colorVars.bgFeedbackSuccess,\n    color: colorVars.fgFeedbackSuccess,\n  },\n  indicatorError: {\n    backgroundColor: colorVars.bgFeedbackError,\n    color: colorVars.fgFeedbackError,\n  },\n  content: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    gridColumn: 2,\n    minWidth: 0,\n    paddingBlock: spacingVars.space1,\n  },\n  title: {\n    color: colorVars.fgPrimary,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  time: {\n    color: colorVars.fgTertiary,\n    fontSize: typographyVars.fontSizeXs,\n    lineHeight: typographyVars.lineHeightNormal,\n  },\n});\n\nexport type TimelineIndicatorVariant = \"active\" | \"complete\" | \"default\" | \"error\";\n\nexport type TimelineProps = Omit<ComponentProps<\"ol\">, \"className\" | \"style\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Timeline({ xstyle, ...props }: TimelineProps) {\n  return <ol {...props} {...stylex.props(styles.root, xstyle)} />;\n}\n\nexport type TimelineItemProps = Omit<ComponentProps<\"li\">, \"className\" | \"style\"> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function TimelineItem({ xstyle, ...props }: TimelineItemProps) {\n  return <li {...props} {...stylex.props(styles.item, xstyle)} />;\n}\n\nexport type TimelineIndicatorProps = Omit<ComponentProps<\"span\">, \"className\" | \"style\"> & {\n  variant?: TimelineIndicatorVariant;\n};\n\nexport function TimelineIndicator({ variant = \"default\", ...props }: TimelineIndicatorProps) {\n  return (\n    <span\n      aria-hidden={props[\"aria-label\"] === undefined ? true : undefined}\n      {...props}\n      {...stylex.props(\n        styles.indicator,\n        variant === \"active\" && styles.indicatorActive,\n        variant === \"complete\" && styles.indicatorComplete,\n        variant === \"error\" && styles.indicatorError,\n      )}\n    />\n  );\n}\n\nexport function TimelineContent({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.content)} />;\n}\n\nexport function TimelineTitle({ ...props }: Omit<ComponentProps<\"div\">, \"className\" | \"style\">) {\n  return <div {...props} {...stylex.props(styles.title)} />;\n}\n\nexport function TimelineDescription({\n  ...props\n}: Omit<ComponentProps<\"p\">, \"className\" | \"style\">) {\n  return <p {...props} {...stylex.props(styles.description)} />;\n}\n\nexport function TimelineTime({ ...props }: Omit<ComponentProps<\"time\">, \"className\" | \"style\">) {\n  return <time {...props} {...stylex.props(styles.time)} />;\n}\n",
+      "path": "timeline.tsx"
+    }
+  ],
+  "dependencies": [
+    "@stylexjs/stylex"
+  ],
+  "registryDependencies": []
+}

package/dist/items/toast.json

@@ -3,16 +3,16 @@
   "primaryExport": "toast",
   "files": [
     {
-      "content": "import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from \"@phosphor-icons/react\";\nimport {\n  ArrowDownIcon,\n  ArrowSquareOutIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n  CalendarIcon,\n  CaretDoubleLeftIcon,\n  CaretDoubleRightIcon,\n  CaretDownIcon,\n  CaretLeftIcon,\n  CaretRightIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  CheckCircleIcon,\n  CheckIcon,\n  ChecksIcon,\n  ClockIcon,\n  ColumnsIcon,\n  CopyIcon,\n  DotsThreeIcon,\n  EyeSlashIcon,\n  FileIcon,\n  FolderIcon,\n  FunnelIcon,\n  GitBranchIcon,\n  InfoIcon,\n  ListIcon,\n  MagnifyingGlassIcon,\n  MicrophoneIcon,\n  PaperclipIcon,\n  DownloadSimpleIcon,\n  StopIcon,\n  WarningIcon,\n  WrenchIcon,\n  XCircleIcon,\n  XIcon,\n} from \"@phosphor-icons/react\";\n\nexport const iconRegistry = {\n  close: XIcon,\n  chevronDown: CaretDownIcon,\n  chevronLeft: CaretLeftIcon,\n  chevronRight: CaretRightIcon,\n  chevronUp: CaretUpIcon,\n  chevronsLeft: CaretDoubleLeftIcon,\n  chevronsRight: CaretDoubleRightIcon,\n  caretUpDown: CaretUpDownIcon,\n  check: CheckIcon,\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  calendar: CalendarIcon,\n  clock: ClockIcon,\n  externalLink: ArrowSquareOutIcon,\n  menu: ListIcon,\n  moreHorizontal: DotsThreeIcon,\n  search: MagnifyingGlassIcon,\n  arrowUp: ArrowUpIcon,\n  arrowDown: ArrowDownIcon,\n  arrowsUpDown: ArrowsDownUpIcon,\n  funnel: FunnelIcon,\n  eyeSlash: EyeSlashIcon,\n  viewColumns: ColumnsIcon,\n  copy: CopyIcon,\n  checkDouble: ChecksIcon,\n  wrench: WrenchIcon,\n  stop: StopIcon,\n  microphone: MicrophoneIcon,\n  folder: FolderIcon,\n  file: FileIcon,\n  paperclip: PaperclipIcon,\n  download: DownloadSimpleIcon,\n  branch: GitBranchIcon,\n} satisfies Record<string, PhosphorIcon>;\n\nexport type IconName = keyof typeof iconRegistry;\n\nexport type IconProps = PhosphorIconProps & {\n  name: IconName;\n};\n\nexport function Icon({ name, weight = \"regular\", ...props }: IconProps) {\n  const IconComponent = iconRegistry[name];\n\n  return <IconComponent {...props} weight={weight} />;\n}\n",
-      "path": "Icon.tsx"
-    },
-    {
-      "content": "import { Toast as ToastPrimitive } from \"@base-ui/react/toast\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { useLayoutEffect, useRef, useState, type ComponentProps } from \"react\";\n\nimport { Icon, type IconName } from \"./Icon\";\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { toastViewportVars } from \"./toast.stylex\";\n\nconst spin = stylex.keyframes({ to: { transform: \"rotate(360deg)\" } });\n\nconst styles = stylex.create({\n  viewport: {\n    maxWidth: \"24rem\",\n    outline: \"none\",\n    pointerEvents: \"none\",\n    position: \"fixed\",\n    width: \"calc(100vw - 2rem)\",\n    zIndex: 70,\n    [toastViewportVars.stackPointerEvents]: {\n      default: \"none\",\n      \":is([data-expanded])\": \"auto\",\n    },\n    [toastViewportVars.clearAllOpacity]: {\n      default: \"1\",\n      \":not([data-expanded])\": \"0\",\n    },\n    [toastViewportVars.clearAllPointerEvents]: {\n      default: \"auto\",\n      \":not([data-expanded])\": \"none\",\n    },\n  },\n  viewportTop: { top: spacingVars.space4 },\n  viewportBottom: { bottom: spacingVars.space4 },\n  viewportLeft: { left: spacingVars.space4 },\n  viewportCenter: { left: \"50%\", transform: \"translateX(-50%)\" },\n  viewportRight: { right: spacingVars.space4 },\n  stack: {\n    bottom: 0,\n    left: 0,\n    pointerEvents: toastViewportVars.stackPointerEvents,\n    position: \"absolute\",\n    right: 0,\n  },\n  stackTop: { bottom: \"auto\", top: 0 },\n  root: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    bottom: 0,\n    boxShadow: shadowVars.overlay,\n    color: colorVars.fgPrimary,\n    height: \"var(--toast-frontmost-height, var(--toast-height))\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    pointerEvents: \"auto\",\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    transform:\n      \"translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * 0.75rem) - ((1 - max(0, 1 - (var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height))))) scale(calc(max(0, 1 - (var(--toast-index) * 0.1))))\",\n    transformOrigin: \"bottom\",\n    transition: \"transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms, height 150ms\",\n    userSelect: \"none\",\n    width: \"100%\",\n    willChange: \"transform\",\n    zIndex: \"calc(1000 - var(--toast-index))\",\n    \"::after\": {\n      content: '\"\"',\n      height: \"calc(0.75rem + 1px)\",\n      left: 0,\n      position: \"absolute\",\n      top: \"100%\",\n      width: \"100%\",\n    },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":is([data-expanded])\": {\n      height: \"var(--toast-height)\",\n      overflow: \"visible\",\n      transform:\n        \"translateX(var(--toast-swipe-movement-x)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-limited])\": { opacity: 0, pointerEvents: \"none\" },\n    \":is([data-swiping])\": { transitionDuration: \"0ms\" },\n    \":is([data-starting-style])\": { opacity: 0, transform: \"translateY(150%)\" },\n    \":is([data-ending-style])\": { opacity: 0, transform: \"translateY(150%)\" },\n    \":is([data-ending-style][data-swipe-direction='up'])\": {\n      transform: \"translateY(calc(var(--toast-swipe-movement-y) - 150%))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='down'])\": {\n      transform: \"translateY(calc(var(--toast-swipe-movement-y) + 150%))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='left'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='right'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationNormal,\n      \":is([data-starting-style])\": { transform: \"translateY(24%)\" },\n      \":is([data-ending-style])\": { transform: \"translateY(24%)\" },\n    },\n  },\n  rootTop: {\n    bottom: \"auto\",\n    top: 0,\n    transform:\n      \"translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * 0.75rem) + ((1 - max(0, 1 - (var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height))))) scale(calc(max(0, 1 - (var(--toast-index) * 0.1))))\",\n    transformOrigin: \"top\",\n    \":is([data-expanded])\": {\n      transform:\n        \"translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-starting-style])\": { transform: \"translateY(-150%)\" },\n    \":is([data-ending-style])\": { transform: \"translateY(-150%)\" },\n    \":is([data-ending-style][data-swipe-direction='left'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='right'])\": {\n      transform:\n        \"translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * 0.75rem) + var(--toast-swipe-movement-y)))\",\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style])\": { transform: \"translateY(-24%)\" },\n      \":is([data-ending-style])\": { transform: \"translateY(-24%)\" },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space3,\n    height: \"100%\",\n    minHeight: \"4.75rem\",\n    overflow: \"hidden\",\n    padding: spacingVars.space4,\n    position: \"relative\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity\",\n    \":is([data-behind]:not([data-expanded]))\": { opacity: 0, pointerEvents: \"none\" },\n  },\n  message: {\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    fontSize: typographyVars.fontSizeSm,\n    lineHeight: typographyVars.lineHeightNormal,\n    margin: 0,\n  },\n  statusIcon: {\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    justifyContent: \"center\",\n    marginTop: \"0.0625rem\",\n    width: sizeVars.iconMd,\n  },\n  default: { color: colorVars.fgSecondary },\n  success: { color: colorVars.fgFeedbackSuccess },\n  info: { color: colorVars.fgFeedbackInfo },\n  warning: { color: colorVars.fgFeedbackWarning },\n  error: { color: colorVars.fgFeedbackError },\n  loading: { color: colorVars.fgSecondary },\n  loadingIcon: {\n    animationDuration: \"700ms\",\n    animationIterationCount: \"infinite\",\n    animationName: spin,\n    animationTimingFunction: \"linear\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderRightColor: colorVars.fgPrimary,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.focusRing,\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    width: sizeVars.iconMd,\n    \"@media (prefers-reduced-motion: reduce)\": { animationDuration: \"1.5s\" },\n  },\n  action: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSurface,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"1.75rem\",\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  close: {\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    height: \"1.75rem\",\n    justifyContent: \"center\",\n    outline: \"none\",\n    width: \"1.75rem\",\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  clearAll: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderRadius: radiusVars.sm,\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    fontFamily: typographyVars.fontFamily,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: \"1.75rem\",\n    outline: \"none\",\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n    opacity: toastViewportVars.clearAllOpacity,\n    pointerEvents: toastViewportVars.clearAllPointerEvents,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    zIndex: 1001,\n    \":hover\": { backgroundColor: colorVars.bgRaised, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  clearAllTop: { bottom: 0, top: \"auto\" },\n});\n\ntype ToastType = \"default\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"loading\";\n\nexport type ToastPosition =\n  | \"bottom-center\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-center\"\n  | \"top-left\"\n  | \"top-right\";\n\nexport type ToasterProps = Omit<\n  ComponentProps<typeof ToastPrimitive.Provider>,\n  \"children\" | \"toastManager\"\n> & {\n  /** Toast viewport position. @default \"bottom-right\" */\n  position?: ToastPosition;\n};\n\nexport const toast = ToastPrimitive.createToastManager();\n\nconst toastIcons: Partial<Record<ToastType, IconName>> = {\n  success: \"success\",\n  info: \"info\",\n  warning: \"warning\",\n  error: \"error\",\n};\n\nfunction ToastStatusIcon({ type }: { type?: string }) {\n  if (!type || type === \"default\") {\n    return null;\n  }\n\n  if (type === \"loading\") {\n    return <span aria-hidden=\"true\" {...stylex.props(styles.loadingIcon)} />;\n  }\n\n  const iconName = toastIcons[type as ToastType];\n  if (!iconName) {\n    return null;\n  }\n\n  return (\n    <span aria-hidden=\"true\" {...stylex.props(styles.statusIcon, styles[type as ToastType])}>\n      <Icon name={iconName} />\n    </span>\n  );\n}\n\nfunction ToastStack({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  const stackRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n  const isTop = position.startsWith(\"top\");\n  const hasClearAction = toasts.length > 1;\n  const stackHeight = hasClearAction\n    ? `calc(${height}px + 1.75rem + ${spacingVars.space2})`\n    : height;\n\n  useLayoutEffect(() => {\n    const stack = stackRef.current;\n\n    if (!stack) {\n      return;\n    }\n\n    const measuredStack = stack;\n\n    function updateHeight() {\n      const rootList = Array.from(\n        measuredStack.querySelectorAll<HTMLElement>(\"[data-nuee-toast-root]:not([data-limited])\"),\n      );\n      const toastGap =\n        Number.parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.75;\n      const nextHeight = rootList.reduce((maximumHeight, root) => {\n        const rootStyles = getComputedStyle(root);\n        const offset = Number.parseFloat(rootStyles.getPropertyValue(\"--toast-offset-y\")) || 0;\n        const index = Number.parseFloat(rootStyles.getPropertyValue(\"--toast-index\")) || 0;\n        const rootHeight =\n          Number.parseFloat(rootStyles.getPropertyValue(\"--toast-height\")) || root.offsetHeight;\n\n        return Math.max(maximumHeight, offset + index * toastGap + rootHeight);\n      }, 0);\n\n      setHeight((currentHeight) => (currentHeight === nextHeight ? currentHeight : nextHeight));\n    }\n\n    updateHeight();\n\n    const resizeObserver = new ResizeObserver(updateHeight);\n    const rootList = measuredStack.querySelectorAll<HTMLElement>(\"[data-nuee-toast-root]\");\n    rootList.forEach((root) => resizeObserver.observe(root));\n    window.addEventListener(\"resize\", updateHeight);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener(\"resize\", updateHeight);\n    };\n  }, [toasts]);\n\n  return (\n    <div\n      ref={stackRef}\n      style={{ height: stackHeight }}\n      {...stylex.props(styles.stack, isTop && styles.stackTop)}\n    >\n      {toasts.map((item) => (\n        <ToastPrimitive.Root\n          key={item.id}\n          toast={item}\n          data-nuee-toast-root=\"\"\n          {...stylex.props(styles.root, isTop && styles.rootTop)}\n        >\n          <ToastPrimitive.Content {...stylex.props(styles.content)}>\n            <ToastStatusIcon type={item.type} />\n            <div {...stylex.props(styles.message)}>\n              <ToastPrimitive.Title {...stylex.props(styles.title)} />\n              <ToastPrimitive.Description {...stylex.props(styles.description)} />\n            </div>\n            {item.actionProps ? <ToastPrimitive.Action {...stylex.props(styles.action)} /> : null}\n            <ToastPrimitive.Close aria-label=\"Close toast\" {...stylex.props(styles.close)}>\n              <Icon aria-hidden=\"true\" name=\"close\" />\n            </ToastPrimitive.Close>\n          </ToastPrimitive.Content>\n        </ToastPrimitive.Root>\n      ))}\n      {hasClearAction ? (\n        <button\n          type=\"button\"\n          onClick={() => toast.close()}\n          {...stylex.props(styles.clearAll, isTop && styles.clearAllTop)}\n        >\n          Clear all\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Toaster({ limit = 3, position = \"bottom-right\", ...props }: ToasterProps) {\n  const [verticalPosition, horizontalPosition] = position.split(\"-\") as [\n    \"bottom\" | \"top\",\n    \"center\" | \"left\" | \"right\",\n  ];\n\n  return (\n    <ToastPrimitive.Provider {...props} limit={limit} toastManager={toast}>\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          {...stylex.props(\n            styles.viewport,\n            verticalPosition === \"top\" ? styles.viewportTop : styles.viewportBottom,\n            horizontalPosition === \"left\" && styles.viewportLeft,\n            horizontalPosition === \"center\" && styles.viewportCenter,\n            horizontalPosition === \"right\" && styles.viewportRight,\n          )}\n        >\n          <ToastStack position={position} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\";\nimport {\n  colorVars,\n  layerVars,\n  motionVars,\n  radiusVars,\n  shadowVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\nimport { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon, XIcon } from \"@phosphor-icons/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { useEffect, useLayoutEffect, useRef, useState, type ComponentProps } from \"react\";\n\nimport { toastViewportVars } from \"./toast.stylex\";\nimport { typographyStyles } from \"./typography\";\n\nconst spin = stylex.keyframes({ to: { transform: \"rotate(360deg)\" } });\n\nconst styles = stylex.create({\n  viewport: {\n    maxWidth: sizeVars.contentSm,\n    outline: \"none\",\n    pointerEvents: \"none\",\n    position: \"fixed\",\n    width: `calc(100vw - ${spacingVars.space4} * 2)`,\n    zIndex: layerVars.notification,\n    [toastViewportVars.stackPointerEvents]: {\n      default: \"none\",\n      \":is([data-expanded])\": \"auto\",\n    },\n    [toastViewportVars.clearActionOffset]: {\n      default: \"0px\",\n      \":is([data-expanded])\": `calc(${sizeVars.controlSm} + ${spacingVars.space2})`,\n    },\n    [toastViewportVars.clearActionOpacity]: {\n      default: \"0\",\n      \":is([data-expanded])\": \"1\",\n    },\n    [toastViewportVars.clearActionPointerEvents]: {\n      default: \"none\",\n      \":is([data-expanded])\": \"auto\",\n    },\n  },\n  viewportTop: { top: spacingVars.space4 },\n  viewportBottom: { bottom: spacingVars.space4 },\n  viewportLeft: { left: spacingVars.space4 },\n  viewportCenter: { left: \"50%\", transform: \"translateX(-50%)\" },\n  viewportRight: { right: spacingVars.space4 },\n  stack: (height: number | string) => ({\n    bottom: 0,\n    height,\n    columnGap: spacingVars.space3,\n    left: 0,\n    pointerEvents: toastViewportVars.stackPointerEvents,\n    position: \"absolute\",\n    right: 0,\n  }),\n  stackTop: { bottom: \"auto\", top: 0 },\n  root: {\n    backgroundColor: colorVars.bgRaised,\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    bottom: 0,\n    boxShadow: shadowVars.overlay,\n    color: colorVars.fgPrimary,\n    height: \"var(--toast-frontmost-height, var(--toast-height))\",\n    outline: \"none\",\n    overflow: \"hidden\",\n    pointerEvents: \"auto\",\n    position: \"absolute\",\n    left: \"calc(min(var(--toast-index), 2) * 5%)\",\n    right: \"calc(min(var(--toast-index), 2) * 5%)\",\n    transform: `translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * ${spacingVars.space3})))`,\n    transformOrigin: \"bottom\",\n    transition: `transform ${motionVars.durationSlow} ${motionVars.easingEnter}, opacity ${motionVars.durationNormal} ${motionVars.easingStandard}, height ${motionVars.durationNormal} ${motionVars.easingStandard}, left ${motionVars.durationSlow} ${motionVars.easingEnter}, right ${motionVars.durationSlow} ${motionVars.easingEnter}`,\n    userSelect: \"none\",\n    width: \"auto\",\n    zIndex: \"calc(1000 - var(--toast-index))\",\n    \"::after\": {\n      content: '\"\"',\n      height: `calc(${spacingVars.space3} + ${sizeVars.stroke})`,\n      left: 0,\n      position: \"absolute\",\n      top: \"100%\",\n      width: \"100%\",\n    },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":is([data-expanded])\": {\n      height: \"var(--toast-height)\",\n      left: 0,\n      right: 0,\n      overflow: \"visible\",\n      transform: `translateX(var(--toast-swipe-movement-x)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * ${spacingVars.space3}) + var(--toast-swipe-movement-y)))`,\n    },\n    \":is([data-limited])\": { opacity: 0, pointerEvents: \"none\" },\n    \":is([data-swiping])\": { transitionDuration: \"0ms\" },\n    \":is([data-starting-style])\": { opacity: 0, transform: \"translateY(150%)\" },\n    \":is([data-ending-style])\": { opacity: 0, transform: \"translateY(150%)\" },\n    \":is([data-ending-style][data-swipe-direction='up'])\": {\n      transform: \"translateY(calc(var(--toast-swipe-movement-y) - 150%))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='down'])\": {\n      transform: \"translateY(calc(var(--toast-swipe-movement-y) + 150%))\",\n    },\n    \":is([data-ending-style][data-swipe-direction='left'])\": {\n      transform: `translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * ${spacingVars.space3}) + var(--toast-swipe-movement-y)))`,\n    },\n    \":is([data-ending-style][data-swipe-direction='right'])\": {\n      transform: `translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(calc((var(--toast-offset-y) * -1) - (var(--toast-index) * ${spacingVars.space3}) + var(--toast-swipe-movement-y)))`,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: motionVars.durationInstant,\n      \":is([data-starting-style])\": { transform: \"translateY(24%)\" },\n      \":is([data-ending-style])\": { transform: \"translateY(24%)\" },\n    },\n  },\n  rootTop: {\n    bottom: \"auto\",\n    top: 0,\n    transform: `translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * ${spacingVars.space3})))`,\n    transformOrigin: \"top\",\n    \":is([data-expanded])\": {\n      transform: `translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * ${spacingVars.space3}) + var(--toast-swipe-movement-y)))`,\n    },\n    \":is([data-starting-style])\": { transform: \"translateY(-150%)\" },\n    \":is([data-ending-style])\": { transform: \"translateY(-150%)\" },\n    \":is([data-ending-style][data-swipe-direction='left'])\": {\n      transform: `translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * ${spacingVars.space3}) + var(--toast-swipe-movement-y)))`,\n    },\n    \":is([data-ending-style][data-swipe-direction='right'])\": {\n      transform: `translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(calc(var(--toast-offset-y) + (var(--toast-index) * ${spacingVars.space3}) + var(--toast-swipe-movement-y)))`,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      \":is([data-starting-style])\": { transform: \"translateY(-24%)\" },\n      \":is([data-ending-style])\": { transform: \"translateY(-24%)\" },\n    },\n  },\n  content: {\n    alignItems: \"center\",\n    display: \"flex\",\n    gap: spacingVars.space3,\n    height: \"100%\",\n    minHeight: toastViewportVars.contentMinHeight,\n    overflow: \"hidden\",\n    padding: spacingVars.space4,\n    position: \"relative\",\n    transitionDuration: motionVars.durationNormal,\n    transitionProperty: \"opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":is([data-behind]:not([data-expanded]))\": { opacity: 0, pointerEvents: \"none\" },\n  },\n  message: {\n    alignSelf: \"baseline\",\n    display: \"flex\",\n    flex: 1,\n    flexDirection: \"column\",\n    gap: spacingVars.space1,\n    minWidth: 0,\n  },\n  title: {\n    margin: 0,\n  },\n  description: {\n    color: colorVars.fgSecondary,\n    margin: 0,\n  },\n  statusIcon: {\n    alignSelf: \"baseline\",\n    alignItems: \"center\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    justifyContent: \"center\",\n    width: sizeVars.iconMd,\n    \"::before\": { content: '\"\\\\200b\"' },\n  },\n  loadingIcon: {\n    animationDuration: motionVars.durationLoading,\n    animationIterationCount: \"infinite\",\n    animationName: spin,\n    animationTimingFunction: \"linear\",\n    borderColor: colorVars.strokeDefault,\n    borderRadius: radiusVars.full,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.focusRing,\n    flexShrink: 0,\n    height: sizeVars.iconMd,\n    width: sizeVars.iconMd,\n    \"@media (prefers-reduced-motion: reduce)\": {\n      animationDuration: motionVars.durationLoadingReduced,\n    },\n  },\n  action: {\n    alignSelf: \"baseline\",\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"none\",\n    borderWidth: 0,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    height: sizeVars.controlXs,\n    justifyContent: \"center\",\n    outline: \"none\",\n    paddingInline: spacingVars.space3,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { textDecoration: \"underline\" },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  close: {\n    alignSelf: \"baseline\",\n    alignItems: \"center\",\n    appearance: \"none\",\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    flexShrink: 0,\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    lineHeight: typographyVars.lineHeightTight,\n    height: sizeVars.controlXs,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color\",\n    transitionTimingFunction: motionVars.easingStandard,\n    width: sizeVars.controlXs,\n    // Match the title's text baseline while centering the icon in its hit area.\n    \"::before\": { content: '\"\\\\200b\"' },\n    \":hover\": { backgroundColor: colorVars.interactionHover, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  clearAll: {\n    appearance: \"none\",\n    backgroundColor: colorVars.bgSubtle,\n    borderColor: colorVars.strokeDefault,\n    borderStyle: \"solid\",\n    borderRadius: radiusVars.sm,\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgSecondary,\n    cursor: \"pointer\",\n    fontFamily: typographyVars.fontFamilyBody,\n    fontSize: typographyVars.fontSizeXs,\n    fontWeight: typographyVars.fontWeightMedium,\n    height: sizeVars.controlSm,\n    outline: \"none\",\n    paddingBlock: spacingVars.space1,\n    paddingInline: spacingVars.space2,\n    opacity: toastViewportVars.clearActionOpacity,\n    pointerEvents: toastViewportVars.clearActionPointerEvents,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    zIndex: 1001,\n    \":hover\": { backgroundColor: colorVars.bgRaised, color: colorVars.fgPrimary },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.stroke,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n  },\n  clearAllTop: { bottom: 0, top: \"auto\" },\n});\n\nexport type ToastPosition =\n  | \"bottom-center\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-center\"\n  | \"top-left\"\n  | \"top-right\";\n\nexport type ToasterProps = Omit<\n  ComponentProps<typeof ToastPrimitive.Provider>,\n  \"children\" | \"toastManager\" | \"className\" | \"style\"\n> & {\n  /** Toast viewport position. @default \"bottom-right\" */\n  position?: ToastPosition;\n  /** Content and accessible label for the action that dismisses all toasts. */\n  clearAllProps?: Pick<ComponentProps<\"button\">, \"children\" | \"aria-label\">;\n};\n\nexport const toast = ToastPrimitive.createToastManager();\n\nconst toastIcons = {\n  success: CheckCircleIcon,\n  info: InfoIcon,\n  warning: WarningIcon,\n  error: XCircleIcon,\n};\n\nfunction ToastStatusIcon({ type }: { type?: string }) {\n  if (!type || type === \"default\") {\n    return null;\n  }\n\n  if (type === \"loading\") {\n    return (\n      <span aria-hidden=\"true\" {...stylex.props(styles.statusIcon)}>\n        <span {...stylex.props(styles.loadingIcon)} />\n      </span>\n    );\n  }\n\n  const IconComponent = toastIcons[type as keyof typeof toastIcons];\n  if (!IconComponent) {\n    return null;\n  }\n\n  return (\n    <span aria-hidden=\"true\" {...stylex.props(styles.statusIcon)}>\n      <IconComponent />\n    </span>\n  );\n}\n\nfunction ToastStack({\n  position,\n  clearAllProps,\n}: {\n  position: ToastPosition;\n  clearAllProps: ToasterProps[\"clearAllProps\"];\n}) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  const stackRef = useRef<HTMLDivElement>(null);\n  const dismissedIds = useRef(new Set<string>());\n  const [height, setHeight] = useState(0);\n  const isTop = position.startsWith(\"top\");\n  const hasClearAction = toasts.length > 1;\n  const stackHeight = hasClearAction\n    ? `calc(${height}px + ${toastViewportVars.clearActionOffset})`\n    : height;\n\n  useEffect(() => {\n    const stack = stackRef.current;\n    if (!stack) return;\n\n    const document = stack.ownerDocument;\n    const currentIds = new Set(toasts.map((item) => item.id));\n    for (const id of dismissedIds.current) {\n      if (!currentIds.has(id)) dismissedIds.current.delete(id);\n    }\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\" || event.defaultPrevented || event.isComposing) return;\n      const latest = toasts.find(\n        (item) => item.transitionStatus !== \"ending\" && !dismissedIds.current.has(item.id),\n      );\n      if (!latest) return;\n\n      event.preventDefault();\n      event.stopPropagation();\n      if (event.repeat) return;\n      dismissedIds.current.add(latest.id);\n      toast.close(latest.id);\n    };\n\n    // Intercept Toast's own focused-item dismissal so one key closes only the newest item.\n    stack.addEventListener(\"keydown\", handleEscape, true);\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      stack.removeEventListener(\"keydown\", handleEscape, true);\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [toasts]);\n\n  useLayoutEffect(() => {\n    const stack = stackRef.current;\n\n    if (!stack) {\n      return;\n    }\n\n    const updateHeight = () => {\n      const rootList = Array.from(\n        stack.querySelectorAll<HTMLElement>(\"[data-nuee-toast-root]:not([data-limited])\"),\n      );\n      const toastGap = Number.parseFloat(getComputedStyle(stack).columnGap) || 0;\n      let nextHeight = 0;\n      for (const root of rootList) {\n        const rootStyles = getComputedStyle(root);\n        const offset = Number.parseFloat(rootStyles.getPropertyValue(\"--toast-offset-y\")) || 0;\n        const index = Number.parseFloat(rootStyles.getPropertyValue(\"--toast-index\")) || 0;\n        const rootHeight =\n          Number.parseFloat(rootStyles.getPropertyValue(\"--toast-height\")) || root.offsetHeight;\n\n        nextHeight = Math.max(nextHeight, offset + index * toastGap + rootHeight);\n      }\n\n      setHeight(nextHeight);\n    };\n\n    updateHeight();\n\n    const resizeObserver = new ResizeObserver(updateHeight);\n    const rootList = stack.querySelectorAll<HTMLElement>(\"[data-nuee-toast-root]\");\n    rootList.forEach((root) => resizeObserver.observe(root));\n    window.addEventListener(\"resize\", updateHeight);\n\n    return () => {\n      resizeObserver.disconnect();\n      window.removeEventListener(\"resize\", updateHeight);\n    };\n  }, [toasts]);\n\n  return (\n    <div ref={stackRef} {...stylex.props(styles.stack(stackHeight), isTop && styles.stackTop)}>\n      {toasts.map((item) => (\n        <ToastPrimitive.Root\n          key={item.id}\n          toast={item}\n          data-nuee-toast-root=\"\"\n          {...stylex.props(styles.root, isTop && styles.rootTop)}\n        >\n          <ToastPrimitive.Content {...stylex.props(styles.content)}>\n            <ToastStatusIcon type={item.type} />\n            <div {...stylex.props(styles.message)}>\n              <ToastPrimitive.Title {...stylex.props(typographyStyles.title, styles.title)} />\n              <ToastPrimitive.Description\n                {...stylex.props(typographyStyles.description, styles.description)}\n              />\n            </div>\n            {item.actionProps ? <ToastPrimitive.Action {...stylex.props(styles.action)} /> : null}\n            <ToastPrimitive.Close aria-label=\"Close toast\" {...stylex.props(styles.close)}>\n              <XIcon aria-hidden=\"true\" />\n            </ToastPrimitive.Close>\n          </ToastPrimitive.Content>\n        </ToastPrimitive.Root>\n      ))}\n      {hasClearAction ? (\n        <button\n          {...clearAllProps}\n          type=\"button\"\n          onClick={() => toast.close()}\n          {...stylex.props(styles.clearAll, isTop && styles.clearAllTop)}\n        >\n          {clearAllProps?.children ?? \"Clear all\"}\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function Toaster({\n  limit = 3,\n  position = \"bottom-right\",\n  clearAllProps,\n  ...props\n}: ToasterProps) {\n  const [verticalPosition, horizontalPosition] = position.split(\"-\") as [\n    \"bottom\" | \"top\",\n    \"center\" | \"left\" | \"right\",\n  ];\n\n  return (\n    <ToastPrimitive.Provider {...props} limit={limit} toastManager={toast}>\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport\n          {...stylex.props(\n            styles.viewport,\n            verticalPosition === \"top\" ? styles.viewportTop : styles.viewportBottom,\n            horizontalPosition === \"left\" && styles.viewportLeft,\n            horizontalPosition === \"center\" && styles.viewportCenter,\n            horizontalPosition === \"right\" && styles.viewportRight,\n          )}\n        >\n          <ToastStack position={position} clearAllProps={clearAllProps} />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n",
       "path": "toast.tsx"
     },
     {
-      "content": "import * as stylex from \"@stylexjs/stylex\";\n\nexport const toastViewportVars = stylex.defineVars({\n  clearAllOpacity: \"1\",\n  clearAllPointerEvents: \"auto\",\n  stackPointerEvents: \"none\",\n});\n",
+      "content": "import * as stylex from \"@stylexjs/stylex\";\n\nexport const toastViewportVars = stylex.defineVars({\n  contentMinHeight: \"4.75rem\",\n  clearActionOffset: \"0px\",\n  clearActionOpacity: \"0\",\n  clearActionPointerEvents: \"none\",\n  stackPointerEvents: \"none\",\n});\n",
       "path": "toast.stylex.ts"
+    },
+    {
+      "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/toggle-group.json

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

package/dist/items/toggle.json

@@ -3,7 +3,7 @@
   "primaryExport": "Toggle",
   "files": [
     {
-      "content": "import { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport {\n  colorVars,\n  motionVars,\n  radiusVars,\n  sizeVars,\n  spacingVars,\n  typographyVars,\n} from \"@nuee/tokens/semantic.stylex\";\n\nconst styles = stylex.create({\n  root: {\n    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  sm: {\n    height: sizeVars.controlSm,\n    minWidth: sizeVars.controlSm,\n    paddingInline: spacingVars.space2,\n  },\n  md: {\n    height: sizeVars.controlMd,\n    minWidth: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  lg: {\n    height: sizeVars.controlLg,\n    minWidth: sizeVars.controlLg,\n    paddingInline: spacingVars.space4,\n  },\n  default: { backgroundColor: \"transparent\" },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  pressed: { backgroundColor: colorVars.bgSurfacePressed, color: colorVars.fgPrimary },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n});\n\nexport type ToggleSize = \"lg\" | \"md\" | \"sm\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport type ToggleProps = ComponentProps<typeof TogglePrimitive> & {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport function Toggle({ size = \"md\", variant = \"default\", xstyle, ...props }: ToggleProps) {\n  return (\n    <TogglePrimitive\n      {...props}\n      className={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          styles[variant],\n          state.pressed && styles.pressed,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        return stylexProps.className;\n      }}\n      style={(state) => {\n        const stylexProps = stylex.props(\n          styles.root,\n          styles[size],\n          styles[variant],\n          state.pressed && styles.pressed,\n          state.disabled && styles.disabled,\n          xstyle,\n        );\n        return stylexProps.style;\n      }}\n    />\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\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    alignItems: \"center\",\n    borderColor: \"transparent\",\n    borderRadius: radiusVars.sm,\n    borderStyle: \"solid\",\n    borderWidth: sizeVars.stroke,\n    color: colorVars.fgPrimary,\n    cursor: \"pointer\",\n    display: \"inline-flex\",\n    fontSize: typographyVars.fontSizeSm,\n    fontWeight: typographyVars.fontWeightMedium,\n    gap: spacingVars.space1,\n    justifyContent: \"center\",\n    outline: \"none\",\n    transitionDuration: motionVars.durationFast,\n    transitionProperty: \"background-color, border-color, color, opacity\",\n    transitionTimingFunction: motionVars.easingStandard,\n    \":hover\": { backgroundColor: colorVars.interactionHover },\n    \":focus-visible\": {\n      outlineColor: colorVars.strokeFocus,\n      outlineOffset: sizeVars.focusRing,\n      outlineStyle: \"solid\",\n      outlineWidth: sizeVars.focusRing,\n    },\n    \":disabled\": { cursor: \"not-allowed\" },\n  },\n  sm: {\n    height: sizeVars.controlSm,\n    minWidth: sizeVars.controlSm,\n    paddingInline: spacingVars.space2,\n  },\n  md: {\n    height: sizeVars.controlMd,\n    minWidth: sizeVars.controlMd,\n    paddingInline: spacingVars.space3,\n  },\n  lg: {\n    height: sizeVars.controlLg,\n    minWidth: sizeVars.controlLg,\n    paddingInline: spacingVars.space4,\n  },\n  default: { backgroundColor: \"transparent\" },\n  outline: { backgroundColor: colorVars.bgSurface, borderColor: colorVars.strokeDefault },\n  pressed: { backgroundColor: colorVars.interactionSelected, color: colorVars.fgPrimary },\n  disabled: {\n    backgroundColor: colorVars.interactionDisabled,\n    borderColor: colorVars.strokeDefault,\n    color: colorVars.fgDisabled,\n    cursor: \"not-allowed\",\n    \":hover\": { backgroundColor: colorVars.interactionDisabled },\n  },\n});\n\nexport type ToggleSize = \"lg\" | \"md\" | \"sm\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport type ToggleProps = Omit<ComponentProps<typeof TogglePrimitive>, \"className\" | \"style\"> & {\n  size?: ToggleSize;\n  variant?: ToggleVariant;\n  xstyle?: ControlLayoutStyles;\n};\n\nexport function Toggle({ size = \"md\", variant = \"default\", xstyle, ...props }: ToggleProps) {\n  function getToggleStyles(state: TogglePrimitive.State) {\n    return stylex.props(\n      styles.root,\n      styles[size],\n      styles[variant],\n      state.pressed && styles.pressed,\n      state.disabled && styles.disabled,\n      xstyle,\n    );\n  }\n  return (\n    <TogglePrimitive\n      {...props}\n      className={(state) => getToggleStyles(state).className}\n      style={(state) => getToggleStyles(state).style}\n    />\n  );\n}\n",
       "path": "toggle.tsx"
     }
   ],

package/dist/items/tooltip.json

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

package/dist/items.d.ts

@@ -1,4 +1,9 @@
 export declare const registryItems: {
+    heading: {
+        files: string[];
+        dependencies: string[];
+        registryDependencies: undefined[];
+    };
     accordion: {
         files: string[];
         dependencies: string[];
@@ -59,6 +64,16 @@ export declare const registryItems: {
         dependencies: string[];
         registryDependencies: undefined[];
     };
+    calendar: {
+        files: string[];
+        dependencies: string[];
+        registryDependencies: undefined[];
+    };
+    carousel: {
+        files: string[];
+        dependencies: string[];
+        registryDependencies: string[];
+    };
     checkbox: {
         files: string[];
         dependencies: string[];
@@ -84,6 +99,11 @@ export declare const registryItems: {
         dependencies: string[];
         registryDependencies: undefined[];
     };
+    "date-picker": {
+        files: string[];
+        dependencies: string[];
+        registryDependencies: string[];
+    };
     drawer: {
         files: string[];
         dependencies: string[];
@@ -102,7 +122,7 @@ export declare const registryItems: {
     field: {
         files: string[];
         dependencies: string[];
-        registryDependencies: undefined[];
+        registryDependencies: string[];
     };
     "hover-card": {
         files: string[];
@@ -155,11 +175,6 @@ export declare const registryItems: {
         registryDependencies: string[];
     };
     message: {
-        files: string[];
-        dependencies: string[];
-        registryDependencies: undefined[];
-    };
-    "message-scroller": {
         files: string[];
         dependencies: string[];
         registryDependencies: string[];
@@ -229,6 +244,11 @@ export declare const registryItems: {
         dependencies: string[];
         registryDependencies: undefined[];
     };
+    timeline: {
+        files: string[];
+        dependencies: string[];
+        registryDependencies: undefined[];
+    };
     table: {
         files: string[];
         dependencies: string[];
@@ -264,9 +284,4 @@ export declare const registryItems: {
         dependencies: string[];
         registryDependencies: undefined[];
     };
-    typography: {
-        files: string[];
-        dependencies: string[];
-        registryDependencies: undefined[];
-    };
 };