@epilot/zenith-react 0.1.0-next.1 → 0.1.0

package/dist/components/pill/pill.js

@@ -28,23 +28,23 @@ const Y = [
   "warning",
   "success",
   "error"
-], p = "--zenith-pill-bg", d = "--zenith-pill-fg", m = "--zenith-pill-bd", a = "--zenith-pill-hov", u = (e) => W(e) ? D : G, t = (e, o) => `var(--zenith-${u(e)}-sem-${e}-${o})`, _ = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, j = {
+], p = "--zenith-pill-bg", d = "--zenith-pill-fg", h = "--zenith-pill-bd", a = "--zenith-pill-hov", u = (e) => W(e) ? D : G, t = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, _ = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, j = {
   soft: (e) => ({
     [p]: t(e, "soft"),
     [d]: t(e, "light"),
-    [m]: "transparent",
+    [h]: "transparent",
     [a]: t(e, "soft-hover")
   }),
   solid: (e) => ({
     [p]: t(e, "solid"),
     [d]: t(e, "contrast"),
-    [m]: "transparent",
+    [h]: "transparent",
     [a]: t(e, "solid-hover")
   }),
   surface: (e) => ({
     [p]: t(e, "surface"),
     [d]: t(e, "light"),
-    [m]: _(e, "a6"),
+    [h]: _(e, "a6"),
     [a]: t(e, "surface-hover")
   })
 }, H = N({
@@ -65,7 +65,7 @@ const Y = [
     transitionProperty: "color, box-shadow, background-color",
     // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one
     // custom property; `border` and a later `borderColor` would both survive.
-    ...L.border("1px", "solid", `var(${m})`),
+    ...L.border("1px", "solid", `var(${h})`),
     // The whole point: one rule each, colour supplied per instance.
     backgroundColor: `var(${p})`,
     color: `var(${d})`,
@@ -108,7 +108,7 @@ const Y = [
   color: S = "accent",
   variant: y = "soft",
   disabled: r,
-  onRemove: h,
+  onRemove: m,
   onClick: i,
   children: b,
   ...x
@@ -132,7 +132,7 @@ const Y = [
       className: R(
         n.root,
         s && n.interactive,
-        h && n.hasRemove,
+        m && n.hasRemove,
         r && n.disabled,
         o
       ),
@@ -140,13 +140,13 @@ const Y = [
       ...x,
       children: [
         b,
-        h && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
+        m && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
         // fallback all live in the lib, not inline.
         /* @__PURE__ */ z(
           F,
           {
             className: n.removeSize,
-            onClick: h,
+            onClick: m,
             disabled: r
           }
         )

package/dist/components/pill/pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/** Pill — same colour-matrix collapse as Badge, plus a hover background. */\n\nconst COLORS = [\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--zenith-${namespaceFor(color)}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n  // A decorative family can still arrive from an expression the build cannot see, so this has to\n  // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) — but\n  // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n  // warning, success, error) need no palette sheet at all.\n  useZenithPaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}
+{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/** Pill — same colour-matrix collapse as Badge, plus a hover background. */\n\nconst COLORS = [\n  \"blue\",\n  \"sky\",\n  \"mint\",\n  \"lime\",\n  \"green\",\n  \"teal\",\n  \"cyan\",\n  \"indigo\",\n  \"purple\",\n  \"pink\",\n  \"red\",\n  \"orange\",\n  \"yellow\",\n  \"bronze\",\n  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\n    ...shorthands.border(\"1px\", \"solid\", `var(${BD})`),\n    // The whole point: one rule each, colour supplied per instance.\n    backgroundColor: `var(${BG})`,\n    color: `var(${FG})`,\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\n\n  // A decorative family can still arrive from an expression the build cannot see, so this has to\n  // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) — but\n  // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n  // warning, success, error) need no palette sheet at all.\n  useZenithPaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}

package/dist/components/radio/radio.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
 import * as d from "react";
 import { Root as h, Item as b, Indicator as x } from "../../vendor/.bun/@radix-ui_react-radio-group@1.3.8_2b23df507bdda662/vendor/@radix-ui/react-radio-group/dist/index.js";
-import { mergeClasses as p, SLOT_ATTR as s, shorthands as t } from "@epilot/zenith-runtime/v1";
+import { mergeClasses as m, SLOT_ATTR as s, shorthands as t } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as C } from "../../styles/make-styles.js";
-import { semAccentContrast as l, errorA10 as k, semFocusRing as u, semErrorSoft as w, grayA3 as m, semAccentSolid as R, semAccentOnSoft as y, semAccentSoft as v, errorA8 as S, accentA7 as A, spacingElement3 as I } from "../../tokens/index.js";
-const j = d.forwardRef(
+import { accentContrast as l, errorA10 as k, focusRing as u, errorSoft as w, grayA3 as p, accentSolid as R, accentOnSoft as y, accentSoft as v, errorA8 as S, accentA7 as I, spacingElement3 as j } from "../../tokens/index.js";
+const A = d.forwardRef(
   function(o, r) {
     return /* @__PURE__ */ e(
       "svg",
@@ -25,7 +25,7 @@ const j = d.forwardRef(
 ), f = C({
   group: {
     display: "grid",
-    ...t.gap(I)
+    ...t.gap(j)
   },
   item: {
     boxSizing: "border-box",
@@ -38,7 +38,7 @@ const j = d.forwardRef(
     height: "1rem",
     flexShrink: 0,
     borderRadius: "9999px",
-    ...t.border("1px", "solid", A),
+    ...t.border("1px", "solid", I),
     backgroundColor: v,
     color: y,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
@@ -57,7 +57,7 @@ const j = d.forwardRef(
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
-      backgroundColor: m,
+      backgroundColor: p,
       ...t.borderColor("transparent")
     },
     "&[data-state='checked']": {
@@ -65,7 +65,7 @@ const j = d.forwardRef(
       color: l
     },
     "&[data-state='checked'][data-disabled]": {
-      backgroundColor: m
+      backgroundColor: p
     },
     "&[aria-invalid='true'], &[data-invalid]": {
       backgroundColor: w,
@@ -95,7 +95,7 @@ const j = d.forwardRef(
     transform: "translate(-50%, -50%)",
     pointerEvents: "none"
   }
-}), O = d.forwardRef(function({ className: o, ...r }, i) {
+}), z = d.forwardRef(function({ className: o, ...r }, i) {
   const a = f();
   return /* @__PURE__ */ e(
     h,
@@ -103,11 +103,11 @@ const j = d.forwardRef(
       ref: i,
       "data-slot": "radio-group",
       [s]: "radio-group",
-      className: p(a.group, o),
+      className: m(a.group, o),
       ...r
     }
   );
-}), z = d.forwardRef(function({ className: o, children: r, ...i }, a) {
+}), D = d.forwardRef(function({ className: o, children: r, ...i }, a) {
   const n = f();
   return /* @__PURE__ */ g(
     b,
@@ -115,7 +115,7 @@ const j = d.forwardRef(
       ref: a,
       "data-slot": "radio-group-item",
       [s]: "radio-group-item",
-      className: p(n.item, o),
+      className: m(n.item, o),
       ...i,
       children: [
         /* @__PURE__ */ e(
@@ -124,7 +124,7 @@ const j = d.forwardRef(
             "data-slot": "radio-group-indicator",
             [s]: "radio-group-indicator",
             className: n.indicator,
-            children: /* @__PURE__ */ e(j, { className: n.icon })
+            children: /* @__PURE__ */ e(A, { className: n.icon })
           }
         ),
         r
@@ -133,7 +133,7 @@ const j = d.forwardRef(
   );
 });
 export {
-  O as RadioGroup,
-  z as RadioGroupItem
+  z as RadioGroup,
+  D as RadioGroupItem
 };
 //# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.semErrorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    color: tokens.semAccentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.semAccentSoft","tokens.semAccentOnSoft","tokens.semFocusRing","tokens.grayA3","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semErrorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":"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"}
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.accentSolid,\n      color: tokens.accentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.errorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.focusRing,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    color: tokens.accentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.accentSoft","tokens.accentOnSoft","tokens.focusRing","tokens.grayA3","tokens.accentSolid","tokens.accentContrast","tokens.errorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":"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"}

package/dist/components/scroll-area/scroll-area.js

@@ -1,9 +1,9 @@
-import { jsx as p, jsxs as j } from "react/jsx-runtime";
+import { jsx as f, jsxs as j } from "react/jsx-runtime";
 import * as e from "react";
 import { Root as H, Scrollbar as W, Thumb as O, Corner as L, Viewport as q } from "../../vendor/.bun/@radix-ui_react-scroll-area@1.2.10_2b23df507bdda662/vendor/@radix-ui/react-scroll-area/dist/index.js";
 import { mergeClasses as b, SLOT_ATTR as o, shorthands as R } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as I } from "../../styles/make-styles.js";
-import { grayA9 as M, grayA11 as Z, grayA10 as _, semFocusRing as B } from "../../tokens/index.js";
+import { grayA9 as M, grayA11 as Z, grayA10 as _, focusRing as B } from "../../tokens/index.js";
 import { useScrollbarStyles as G } from "./scrollbar-styles.js";
 const T = e.createContext(null), E = I({
   root: {
@@ -82,7 +82,7 @@ const T = e.createContext(null), E = I({
     onFocusCapture: n,
     onBlurCapture: x,
     ...D
-  }, f) {
+  }, p) {
     const d = E(), y = G(), w = e.useRef(null), k = e.useRef(
       void 0
     ), s = e.useRef({
@@ -111,13 +111,13 @@ const T = e.createContext(null), E = I({
       () => ({ orientation: a, onScroll: S }),
       [a, S]
     ), $ = a === "both" ? ["vertical", "horizontal"] : [a];
-    return /* @__PURE__ */ p(T.Provider, { value: N, children: /* @__PURE__ */ j(
+    return /* @__PURE__ */ f(T.Provider, { value: N, children: /* @__PURE__ */ j(
       H,
       {
         ...D,
         type: "auto",
         ref: (r) => {
-          w.current = r, typeof f == "function" ? f(r) : f && (f.current = r);
+          w.current = r, typeof p == "function" ? p(r) : p && (p.current = r);
         },
         "data-slot": "scroll-area",
         [o]: "scroll-area",
@@ -138,7 +138,7 @@ const T = e.createContext(null), E = I({
         },
         children: [
           g,
-          $.map((r) => /* @__PURE__ */ p(
+          $.map((r) => /* @__PURE__ */ f(
             W,
             {
               orientation: r,
@@ -152,7 +152,7 @@ const T = e.createContext(null), E = I({
               onPointerDown: () => {
                 s.current.drag = !0, m();
               },
-              children: /* @__PURE__ */ p(
+              children: /* @__PURE__ */ f(
                 O,
                 {
                   "data-slot": "scroll-area-thumb",
@@ -163,7 +163,7 @@ const T = e.createContext(null), E = I({
             },
             r
           )),
-          a === "both" && /* @__PURE__ */ p(L, { className: d.corner })
+          a === "both" && /* @__PURE__ */ f(L, { className: d.corner })
         ]
       }
     ) });
@@ -172,7 +172,7 @@ const T = e.createContext(null), E = I({
   const t = e.useContext(T), l = E();
   if (!t)
     throw new Error("ScrollAreaViewport requires a ScrollArea parent");
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     q,
     {
       ...v,

package/dist/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as Primitive from \"@radix-ui/react-scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"./scrollbar-styles\"\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\"\nexport type ScrollAreaVisibility = \"interaction\" | \"always\"\nexport type ScrollAreaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Primitive.Root>,\n  \"asChild\" | \"type\" | \"scrollHideDelay\"\n> & {\n  orientation?: ScrollAreaOrientation\n  visibility?: ScrollAreaVisibility\n}\nexport type ScrollAreaViewportProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Primitive.Viewport>,\n  \"asChild\"\n>\n\nconst Context = React.createContext<{\n  orientation: ScrollAreaOrientation\n  onScroll: () => void\n} | null>(null)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    position: \"relative\",\n    minWidth: 0,\n    minHeight: 0,\n    ...shorthands.overflow(\"hidden\"),\n    [`&[data-revealed='true'] > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n      opacity: 1,\n      pointerEvents: \"auto\",\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n        opacity: 1,\n        pointerEvents: \"auto\",\n        backgroundColor: \"Canvas\",\n      },\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    height: \"100%\",\n    minWidth: 0,\n    minHeight: 0,\n    boxSizing: \"border-box\",\n    borderRadius: \"inherit\",\n    \":focus-visible\": {\n      outlineWidth: \"3px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n      outlineOffset: \"-3px\",\n    },\n  },\n  verticalContent: {\n    // Radix's measurement wrapper defaults to display:table, which expands long lines.\n    \"& > div\": { display: \"block\", minWidth: \"100%\" },\n  },\n  reserveVertical: { paddingInlineEnd: \"12px\" },\n  reserveHorizontal: { paddingBottom: \"12px\" },\n  track: {\n    boxSizing: \"border-box\",\n    ...shorthands.padding(\"3px\"),\n    backgroundColor: \"transparent\",\n    opacity: 0,\n    pointerEvents: \"none\",\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0s\" },\n    [`&:hover > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA10,\n    },\n    [`&:active > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA11,\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n        backgroundColor: \"ButtonText\",\n        forcedColorAdjust: \"none\",\n      },\n    },\n  },\n  vertical: { width: \"12px\" },\n  horizontal: { height: \"12px\", flexDirection: \"column\" },\n  thumb: { backgroundColor: tokens.grayA9 },\n  // Radix owns thumb length (including its 18px minimum) and uses it in drag math.\n  // A CSS-only minimum overrides the paint but not that math, overshooting the track.\n  corner: { backgroundColor: \"transparent\", pointerEvents: \"none\" },\n})\n\n/** Native scrolling with Radix tracks. Dimensions belong here; scroll refs belong to the viewport. */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      orientation = \"vertical\",\n      visibility = \"interaction\",\n      className,\n      children,\n      onPointerEnter,\n      onPointerLeave,\n      onFocusCapture,\n      onBlurCapture,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const scrollbar = useScrollbarStyles()\n    const root = React.useRef<HTMLDivElement | null>(null)\n    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined\n    )\n    const interaction = React.useRef({\n      hover: false,\n      focus: false,\n      drag: false,\n    })\n    const [revealed, setRevealed] = React.useState(false)\n    const clear = React.useCallback(() => {\n      clearTimeout(timer.current)\n    }, [])\n    const reveal = React.useCallback(() => {\n      clear()\n      setRevealed(true)\n    }, [clear])\n    const settle = React.useCallback(() => {\n      clear()\n      if (!Object.values(interaction.current).some(Boolean)) {\n        timer.current = setTimeout(() => setRevealed(false), 600)\n      }\n    }, [clear])\n    const pulse = React.useCallback(() => {\n      reveal()\n      settle()\n    }, [reveal, settle])\n    React.useEffect(() => {\n      const doc = root.current?.ownerDocument\n      const endDrag = () => {\n        if (interaction.current.drag) {\n          interaction.current.drag = false\n          settle()\n        }\n      }\n      doc?.addEventListener(\"pointerup\", endDrag, true)\n      doc?.addEventListener(\"pointercancel\", endDrag, true)\n      return () => {\n        clear()\n        doc?.removeEventListener(\"pointerup\", endDrag, true)\n        doc?.removeEventListener(\"pointercancel\", endDrag, true)\n      }\n    }, [clear, settle])\n    const context = React.useMemo(\n      () => ({ orientation, onScroll: pulse }),\n      [orientation, pulse]\n    )\n    const tracks =\n      orientation === \"both\"\n        ? ([\"vertical\", \"horizontal\"] as const)\n        : [orientation]\n    return (\n      <Context.Provider value={context}>\n        <Primitive.Root\n          {...props}\n          type=\"auto\"\n          ref={(node) => {\n            root.current = node\n            if (typeof ref === \"function\") ref(node)\n            else if (ref) ref.current = node\n          }}\n          data-slot=\"scroll-area\"\n          {...{ [SLOT_ATTR]: \"scroll-area\" }}\n          data-orientation={orientation}\n          data-revealed={visibility === \"always\" || revealed}\n          className={mergeClasses(styles.root, className)}\n          onPointerEnter={(event) => {\n            if (event.pointerType !== \"touch\") {\n              interaction.current.hover = true\n              reveal()\n            }\n            onPointerEnter?.(event)\n          }}\n          onPointerLeave={(event) => {\n            interaction.current.hover = false\n            settle()\n            onPointerLeave?.(event)\n          }}\n          onFocusCapture={(event) => {\n            interaction.current.focus = true\n            reveal()\n            onFocusCapture?.(event)\n          }}\n          onBlurCapture={(event) => {\n            if (!event.currentTarget.contains(event.relatedTarget)) {\n              interaction.current.focus = false\n              settle()\n            }\n            onBlurCapture?.(event)\n          }}\n        >\n          {children}\n          {tracks.map((axis) => (\n            <Primitive.Scrollbar\n              key={axis}\n              orientation={axis}\n              data-slot=\"scroll-area-scrollbar\"\n              {...{ [SLOT_ATTR]: \"scroll-area-scrollbar\" }}\n              className={mergeClasses(\n                scrollbar.track,\n                styles.track,\n                styles[axis]\n              )}\n              onPointerDown={() => {\n                interaction.current.drag = true\n                reveal()\n              }}\n            >\n              <Primitive.Thumb\n                data-slot=\"scroll-area-thumb\"\n                {...{ [SLOT_ATTR]: \"scroll-area-thumb\" }}\n                className={mergeClasses(scrollbar.thumb, styles.thumb)}\n              />\n            </Primitive.Scrollbar>\n          ))}\n          {orientation === \"both\" && (\n            <Primitive.Corner className={styles.corner} />\n          )}\n        </Primitive.Root>\n      </Context.Provider>\n    )\n  }\n)\n\n/** Put keyboard focus, accessible naming and onScroll on this actual scroll element. */\nexport const ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaViewportProps\n>(function ScrollAreaViewport({ className, onScroll, ...props }, ref) {\n  const context = React.useContext(Context)\n  const styles = useStyles()\n  if (!context)\n    throw new Error(\"ScrollAreaViewport requires a ScrollArea parent\")\n  return (\n    <Primitive.Viewport\n      {...props}\n      ref={ref}\n      data-slot=\"scroll-area-viewport\"\n      {...{ [SLOT_ATTR]: \"scroll-area-viewport\" }}\n      className={mergeClasses(\n        styles.viewport,\n        context.orientation === \"vertical\" && styles.verticalContent,\n        context.orientation !== \"horizontal\" && styles.reserveVertical,\n        context.orientation !== \"vertical\" && styles.reserveHorizontal,\n        className\n      )}\n      onScroll={(event) => {\n        if (event.target === event.currentTarget) {\n          context.onScroll()\n          onScroll?.(event)\n        }\n      }}\n    />\n  )\n})\n"],"names":["Context","React","useStyles","makeZenithStyles","shorthands","SLOT_ATTR","tokens.semFocusRing","tokens.grayA10","tokens.grayA11","tokens.grayA9","ScrollArea","orientation","visibility","className","children","onPointerEnter","onPointerLeave","onFocusCapture","onBlurCapture","props","ref","styles","scrollbar","useScrollbarStyles","root","timer","interaction","revealed","setRevealed","clear","reveal","settle","pulse","doc","_a","endDrag","context","tracks","jsx","jsxs","Primitive.Root","node","mergeClasses","event","axis","Primitive.Scrollbar","Primitive.Thumb","Primitive.Corner","ScrollAreaViewport","onScroll","Primitive.Viewport"],"mappings":"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"}
+{"version":3,"file":"scroll-area.js","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as Primitive from \"@radix-ui/react-scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"./scrollbar-styles\"\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\"\nexport type ScrollAreaVisibility = \"interaction\" | \"always\"\nexport type ScrollAreaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Primitive.Root>,\n  \"asChild\" | \"type\" | \"scrollHideDelay\"\n> & {\n  orientation?: ScrollAreaOrientation\n  visibility?: ScrollAreaVisibility\n}\nexport type ScrollAreaViewportProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Primitive.Viewport>,\n  \"asChild\"\n>\n\nconst Context = React.createContext<{\n  orientation: ScrollAreaOrientation\n  onScroll: () => void\n} | null>(null)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    position: \"relative\",\n    minWidth: 0,\n    minHeight: 0,\n    ...shorthands.overflow(\"hidden\"),\n    [`&[data-revealed='true'] > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n      opacity: 1,\n      pointerEvents: \"auto\",\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n        opacity: 1,\n        pointerEvents: \"auto\",\n        backgroundColor: \"Canvas\",\n      },\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    height: \"100%\",\n    minWidth: 0,\n    minHeight: 0,\n    boxSizing: \"border-box\",\n    borderRadius: \"inherit\",\n    \":focus-visible\": {\n      outlineWidth: \"3px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n      outlineOffset: \"-3px\",\n    },\n  },\n  verticalContent: {\n    // Radix's measurement wrapper defaults to display:table, which expands long lines.\n    \"& > div\": { display: \"block\", minWidth: \"100%\" },\n  },\n  reserveVertical: { paddingInlineEnd: \"12px\" },\n  reserveHorizontal: { paddingBottom: \"12px\" },\n  track: {\n    boxSizing: \"border-box\",\n    ...shorthands.padding(\"3px\"),\n    backgroundColor: \"transparent\",\n    opacity: 0,\n    pointerEvents: \"none\",\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0s\" },\n    [`&:hover > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA10,\n    },\n    [`&:active > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA11,\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n        backgroundColor: \"ButtonText\",\n        forcedColorAdjust: \"none\",\n      },\n    },\n  },\n  vertical: { width: \"12px\" },\n  horizontal: { height: \"12px\", flexDirection: \"column\" },\n  thumb: { backgroundColor: tokens.grayA9 },\n  // Radix owns thumb length (including its 18px minimum) and uses it in drag math.\n  // A CSS-only minimum overrides the paint but not that math, overshooting the track.\n  corner: { backgroundColor: \"transparent\", pointerEvents: \"none\" },\n})\n\n/** Native scrolling with Radix tracks. Dimensions belong here; scroll refs belong to the viewport. */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      orientation = \"vertical\",\n      visibility = \"interaction\",\n      className,\n      children,\n      onPointerEnter,\n      onPointerLeave,\n      onFocusCapture,\n      onBlurCapture,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const scrollbar = useScrollbarStyles()\n    const root = React.useRef<HTMLDivElement | null>(null)\n    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined\n    )\n    const interaction = React.useRef({\n      hover: false,\n      focus: false,\n      drag: false,\n    })\n    const [revealed, setRevealed] = React.useState(false)\n    const clear = React.useCallback(() => {\n      clearTimeout(timer.current)\n    }, [])\n    const reveal = React.useCallback(() => {\n      clear()\n      setRevealed(true)\n    }, [clear])\n    const settle = React.useCallback(() => {\n      clear()\n      if (!Object.values(interaction.current).some(Boolean)) {\n        timer.current = setTimeout(() => setRevealed(false), 600)\n      }\n    }, [clear])\n    const pulse = React.useCallback(() => {\n      reveal()\n      settle()\n    }, [reveal, settle])\n    React.useEffect(() => {\n      const doc = root.current?.ownerDocument\n      const endDrag = () => {\n        if (interaction.current.drag) {\n          interaction.current.drag = false\n          settle()\n        }\n      }\n      doc?.addEventListener(\"pointerup\", endDrag, true)\n      doc?.addEventListener(\"pointercancel\", endDrag, true)\n      return () => {\n        clear()\n        doc?.removeEventListener(\"pointerup\", endDrag, true)\n        doc?.removeEventListener(\"pointercancel\", endDrag, true)\n      }\n    }, [clear, settle])\n    const context = React.useMemo(\n      () => ({ orientation, onScroll: pulse }),\n      [orientation, pulse]\n    )\n    const tracks =\n      orientation === \"both\"\n        ? ([\"vertical\", \"horizontal\"] as const)\n        : [orientation]\n    return (\n      <Context.Provider value={context}>\n        <Primitive.Root\n          {...props}\n          type=\"auto\"\n          ref={(node) => {\n            root.current = node\n            if (typeof ref === \"function\") ref(node)\n            else if (ref) ref.current = node\n          }}\n          data-slot=\"scroll-area\"\n          {...{ [SLOT_ATTR]: \"scroll-area\" }}\n          data-orientation={orientation}\n          data-revealed={visibility === \"always\" || revealed}\n          className={mergeClasses(styles.root, className)}\n          onPointerEnter={(event) => {\n            if (event.pointerType !== \"touch\") {\n              interaction.current.hover = true\n              reveal()\n            }\n            onPointerEnter?.(event)\n          }}\n          onPointerLeave={(event) => {\n            interaction.current.hover = false\n            settle()\n            onPointerLeave?.(event)\n          }}\n          onFocusCapture={(event) => {\n            interaction.current.focus = true\n            reveal()\n            onFocusCapture?.(event)\n          }}\n          onBlurCapture={(event) => {\n            if (!event.currentTarget.contains(event.relatedTarget)) {\n              interaction.current.focus = false\n              settle()\n            }\n            onBlurCapture?.(event)\n          }}\n        >\n          {children}\n          {tracks.map((axis) => (\n            <Primitive.Scrollbar\n              key={axis}\n              orientation={axis}\n              data-slot=\"scroll-area-scrollbar\"\n              {...{ [SLOT_ATTR]: \"scroll-area-scrollbar\" }}\n              className={mergeClasses(\n                scrollbar.track,\n                styles.track,\n                styles[axis]\n              )}\n              onPointerDown={() => {\n                interaction.current.drag = true\n                reveal()\n              }}\n            >\n              <Primitive.Thumb\n                data-slot=\"scroll-area-thumb\"\n                {...{ [SLOT_ATTR]: \"scroll-area-thumb\" }}\n                className={mergeClasses(scrollbar.thumb, styles.thumb)}\n              />\n            </Primitive.Scrollbar>\n          ))}\n          {orientation === \"both\" && (\n            <Primitive.Corner className={styles.corner} />\n          )}\n        </Primitive.Root>\n      </Context.Provider>\n    )\n  }\n)\n\n/** Put keyboard focus, accessible naming and onScroll on this actual scroll element. */\nexport const ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaViewportProps\n>(function ScrollAreaViewport({ className, onScroll, ...props }, ref) {\n  const context = React.useContext(Context)\n  const styles = useStyles()\n  if (!context)\n    throw new Error(\"ScrollAreaViewport requires a ScrollArea parent\")\n  return (\n    <Primitive.Viewport\n      {...props}\n      ref={ref}\n      data-slot=\"scroll-area-viewport\"\n      {...{ [SLOT_ATTR]: \"scroll-area-viewport\" }}\n      className={mergeClasses(\n        styles.viewport,\n        context.orientation === \"vertical\" && styles.verticalContent,\n        context.orientation !== \"horizontal\" && styles.reserveVertical,\n        context.orientation !== \"vertical\" && styles.reserveHorizontal,\n        className\n      )}\n      onScroll={(event) => {\n        if (event.target === event.currentTarget) {\n          context.onScroll()\n          onScroll?.(event)\n        }\n      }}\n    />\n  )\n})\n"],"names":["Context","React","useStyles","makeZenithStyles","shorthands","SLOT_ATTR","tokens.focusRing","tokens.grayA10","tokens.grayA11","tokens.grayA9","ScrollArea","orientation","visibility","className","children","onPointerEnter","onPointerLeave","onFocusCapture","onBlurCapture","props","ref","styles","scrollbar","useScrollbarStyles","root","timer","interaction","revealed","setRevealed","clear","reveal","settle","pulse","doc","_a","endDrag","context","tracks","jsx","jsxs","Primitive.Root","node","mergeClasses","event","axis","Primitive.Scrollbar","Primitive.Thumb","Primitive.Corner","ScrollAreaViewport","onScroll","Primitive.Viewport"],"mappings":"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"}

package/dist/components/segmented-control/segmented-control.js

@@ -4,7 +4,7 @@ import { useRef as M, useState as k, useCallback as v, useLayoutEffect as w } fr
 import { Root as O, Item as V } from "../../vendor/.bun/@radix-ui_react-radio-group@1.3.8_2b23df507bdda662/vendor/@radix-ui/react-radio-group/dist/index.js";
 import { SLOT_ATTR as e, mergeClasses as C, shorthands as n } from "@epilot/zenith-runtime/v1";
 import { makeZenithStyles as G } from "../../styles/make-styles.js";
-import { semAccentDefault as R, accentA8 as P, semAccentSoft as I, fontWeightSemibold as Y, leadingXs as Z, textXs as _, spacingElement1 as m, spacingElement3 as A, body as J } from "../../tokens/index.js";
+import { accentDefault as R, accentA8 as P, accentSoft as I, fontWeightSemibold as Y, leadingXs as Z, textXs as _, spacingElement1 as m, spacingElement3 as A, body as J } from "../../tokens/index.js";
 const T = u.createContext({
   layout: "hug"
 }), W = G({

package/dist/components/segmented-control/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type SegmentedControlLayout = \"hug\" | \"equal\" | \"stretch\"\n\nexport type SegmentedControlProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n> & {\n  layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n> & {\n  icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n  layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    layout: \"hug\",\n  })\n\nconst useStyles = makeZenithStyles({\n  group: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.semAccentSoft,\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n  },\n  groupStretch: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n  groupVertical: {\n    flexDirection: \"column\",\n    display: \"inline-flex\",\n    width: \"fit-content\",\n  },\n  indicator: {\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    zIndex: 0,\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.body,\n    // Tailwind `shadow-sm`\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n  },\n  indicatorAnimated: {\n    transitionProperty: \"transform, width, height\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  item: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    minWidth: \"3rem\",\n    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n    // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semAccentDefault,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    backgroundColor: \"transparent\",\n    outlineStyle: \"none\",\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n    aspectRatio: \"auto\",\n    width: \"auto\",\n    height: \"auto\",\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":hover:not([data-checked])\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n      backgroundColor: \"transparent\",\n    },\n    \"&[data-checked]\": {\n      backgroundColor: \"transparent\",\n      color: tokens.semAccentDefault,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: \"transparent\",\n    },\n    [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n      display: \"none\",\n    },\n    // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n    // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n    [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n      display: \"none\",\n    },\n  },\n  itemStretch: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    flexShrink: 0,\n    width: \"1rem\",\n    height: \"1rem\",\n    pointerEvents: \"none\",\n    \"& svg\": {\n      width: \"100%\",\n      height: \"100%\",\n      display: \"block\",\n    },\n  },\n  label: {\n    lineHeight: \"1rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport const SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>(function SegmentedControl(\n  {\n    className,\n    layout = \"hug\",\n    orientation = \"horizontal\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    children,\n    ...props\n  },\n  forwardedRef\n) {\n  const styles = useStyles()\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [trackedValue, setTrackedValue] = useState(defaultValue)\n  // Starts false to prevent CSS transition flash on SSR hydration\n  const [indicatorReady, setIndicatorReady] = useState(false)\n  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n    opacity: 0,\n  })\n\n  const isControlled = valueProp !== undefined\n  const currentValue = isControlled ? valueProp : trackedValue\n\n  const updateIndicator = useCallback(() => {\n    if (!rootRef.current) return\n    const el = rootRef.current.querySelector<HTMLElement>(\n      `[${SLOT_ATTR}=\"segmented-control-item\"][data-state=\"checked\"]`\n    )\n    if (!el) return\n    setIndicatorStyle({\n      opacity: 1,\n      width: el.offsetWidth,\n      height: el.offsetHeight,\n      transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n    })\n    setIndicatorReady(true)\n  }, [])\n\n  // Must run before indicator effect so equalized widths are measured correctly\n  useLayoutEffect(() => {\n    if (!rootRef.current) return\n    const items = Array.from(\n      rootRef.current.querySelectorAll<HTMLElement>(\n        `[${SLOT_ATTR}=\"segmented-control-item\"]`\n      )\n    )\n    if (!items.length) return\n    items.forEach((el) => (el.style.minWidth = \"\"))\n    if (layout !== \"equal\") return\n    const max = Math.max(...items.map((el) => el.offsetWidth))\n    items.forEach((el) => (el.style.minWidth = `${max}px`))\n  }, [layout])\n\n  useLayoutEffect(() => {\n    if (!indicatorReady) {\n      updateIndicator()\n      return\n    }\n    const raf = requestAnimationFrame(updateIndicator)\n    return () => cancelAnimationFrame(raf)\n  }, [currentValue, indicatorReady, updateIndicator])\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      if (!isControlled) setTrackedValue(value)\n      onValueChange?.(value)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const handleRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(node)\n    } else if (forwardedRef) {\n      forwardedRef.current = node\n    }\n  }\n\n  const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <RadioGroupPrimitive.Root\n        ref={handleRef}\n        data-slot=\"segmented-control\"\n        {...{ [SLOT_ATTR]: \"segmented-control\" }}\n        data-layout={layout}\n        value={isControlled ? valueProp : undefined}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={mergeClasses(\n          styles.group,\n          layout === \"stretch\" && styles.groupStretch,\n          orientation === \"vertical\" && styles.groupVertical,\n          className\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-indicator\"\n          {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n          className={mergeClasses(\n            styles.indicator,\n            indicatorReady && styles.indicatorAnimated\n          )}\n          style={indicatorStyle}\n        />\n        {children}\n      </RadioGroupPrimitive.Root>\n    </SegmentedControlContext.Provider>\n  )\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  SegmentedControlItemProps\n>(function SegmentedControlItem(\n  { className, value, icon, children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { layout } = React.useContext(SegmentedControlContext)\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      value={value}\n      data-slot=\"segmented-control-item\"\n      {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n      className={mergeClasses(\n        styles.item,\n        layout === \"stretch\" && styles.itemStretch,\n        className\n      )}\n      {...props}\n    >\n      {icon && (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-item-icon\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n          className={styles.icon}\n        >\n          {icon}\n        </span>\n      )}\n      {children && (\n        <span\n          data-slot=\"segmented-control-item-label\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n          className={styles.label}\n        >\n          {children}\n        </span>\n      )}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.semAccentSoft","tokens.body","tokens.spacingElement3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.semAccentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","useLayoutEffect","items","max","raf","handleValueChange","value","handleRef","node","contextValue","jsx","jsxs","RadioGroupPrimitive.Root","mergeClasses","SegmentedControlItem","icon","ref","RadioGroupPrimitive.Item"],"mappings":"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"}
+{"version":3,"file":"segmented-control.js","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type SegmentedControlLayout = \"hug\" | \"equal\" | \"stretch\"\n\nexport type SegmentedControlProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n> & {\n  layout?: SegmentedControlLayout\n}\n\nexport type SegmentedControlItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n> & {\n  icon?: React.ReactNode\n}\n\ninterface SegmentedControlContextValue {\n  layout: SegmentedControlLayout\n}\n\nconst SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    layout: \"hug\",\n  })\n\nconst useStyles = makeZenithStyles({\n  group: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.accentSoft,\n    ...shorthands.padding(tokens.spacingElement1),\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n  },\n  groupStretch: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n  groupVertical: {\n    flexDirection: \"column\",\n    display: \"inline-flex\",\n    width: \"fit-content\",\n  },\n  indicator: {\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    zIndex: 0,\n    ...shorthands.borderRadius(\"9999px\"),\n    backgroundColor: tokens.body,\n    // Tailwind `shadow-sm`\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n  },\n  indicatorAnimated: {\n    transitionProperty: \"transform, width, height\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  },\n  item: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    ...shorthands.borderRadius(\"9999px\"),\n    minWidth: \"3rem\",\n    // v1 uses Tailwind's `px-3` = 0.75rem here. The semantic spacing scale has NO 0.75rem\n    // token -- it runs 0.25/0.5/0.5/1/1.5/2 -- so this is a literal by necessity.\n    // `spacingGroup1` is 0.5rem and reaching for it by name (as three components did)\n    // silently loses 4px per side. See STATUS: the scale gap is the root cause.\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    paddingTop: tokens.spacingElement1,\n    paddingBottom: tokens.spacingElement1,\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.accentDefault,\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    backgroundColor: \"transparent\",\n    outlineStyle: \"none\",\n    ...shorthands.border(\"0\"),\n    boxShadow: \"none\",\n    aspectRatio: \"auto\",\n    width: \"auto\",\n    height: \"auto\",\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":hover:not([data-checked])\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n      backgroundColor: \"transparent\",\n    },\n    \"&[data-checked]\": {\n      backgroundColor: \"transparent\",\n      color: tokens.accentDefault,\n    },\n    \"&[data-checked][data-disabled]\": {\n      backgroundColor: \"transparent\",\n    },\n    [`& [${SLOT_ATTR}=\"radio-group-indicator\"]`]: {\n      display: \"none\",\n    },\n    // Keyed on SLOT_ATTR, never data-slot (rule 4): the composed RadioGroup emits both, and\n    // data-slot values are shared with v1 so such a rule would also match v1-rendered DOM.\n    [`[${SLOT_ATTR}='radio-group-indicator']`]: {\n      display: \"none\",\n    },\n  },\n  itemStretch: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n  },\n  icon: {\n    flexShrink: 0,\n    width: \"1rem\",\n    height: \"1rem\",\n    pointerEvents: \"none\",\n    \"& svg\": {\n      width: \"100%\",\n      height: \"100%\",\n      display: \"block\",\n    },\n  },\n  label: {\n    lineHeight: \"1rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n})\n\nexport const SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>(function SegmentedControl(\n  {\n    className,\n    layout = \"hug\",\n    orientation = \"horizontal\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    children,\n    ...props\n  },\n  forwardedRef\n) {\n  const styles = useStyles()\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [trackedValue, setTrackedValue] = useState(defaultValue)\n  // Starts false to prevent CSS transition flash on SSR hydration\n  const [indicatorReady, setIndicatorReady] = useState(false)\n  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({\n    opacity: 0,\n  })\n\n  const isControlled = valueProp !== undefined\n  const currentValue = isControlled ? valueProp : trackedValue\n\n  const updateIndicator = useCallback(() => {\n    if (!rootRef.current) return\n    const el = rootRef.current.querySelector<HTMLElement>(\n      `[${SLOT_ATTR}=\"segmented-control-item\"][data-state=\"checked\"]`\n    )\n    if (!el) return\n    setIndicatorStyle({\n      opacity: 1,\n      width: el.offsetWidth,\n      height: el.offsetHeight,\n      transform: `translate(${el.offsetLeft}px, ${el.offsetTop}px)`,\n    })\n    setIndicatorReady(true)\n  }, [])\n\n  // Must run before indicator effect so equalized widths are measured correctly\n  useLayoutEffect(() => {\n    if (!rootRef.current) return\n    const items = Array.from(\n      rootRef.current.querySelectorAll<HTMLElement>(\n        `[${SLOT_ATTR}=\"segmented-control-item\"]`\n      )\n    )\n    if (!items.length) return\n    items.forEach((el) => (el.style.minWidth = \"\"))\n    if (layout !== \"equal\") return\n    const max = Math.max(...items.map((el) => el.offsetWidth))\n    items.forEach((el) => (el.style.minWidth = `${max}px`))\n  }, [layout])\n\n  useLayoutEffect(() => {\n    if (!indicatorReady) {\n      updateIndicator()\n      return\n    }\n    const raf = requestAnimationFrame(updateIndicator)\n    return () => cancelAnimationFrame(raf)\n  }, [currentValue, indicatorReady, updateIndicator])\n\n  const handleValueChange = useCallback(\n    (value: string) => {\n      if (!isControlled) setTrackedValue(value)\n      onValueChange?.(value)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const handleRef = (node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof forwardedRef === \"function\") {\n      forwardedRef(node)\n    } else if (forwardedRef) {\n      forwardedRef.current = node\n    }\n  }\n\n  const contextValue = React.useMemo(() => ({ layout }), [layout])\n\n  return (\n    <SegmentedControlContext.Provider value={contextValue}>\n      <RadioGroupPrimitive.Root\n        ref={handleRef}\n        data-slot=\"segmented-control\"\n        {...{ [SLOT_ATTR]: \"segmented-control\" }}\n        data-layout={layout}\n        value={isControlled ? valueProp : undefined}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={mergeClasses(\n          styles.group,\n          layout === \"stretch\" && styles.groupStretch,\n          orientation === \"vertical\" && styles.groupVertical,\n          className\n        )}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-indicator\"\n          {...{ [SLOT_ATTR]: \"segmented-control-indicator\" }}\n          className={mergeClasses(\n            styles.indicator,\n            indicatorReady && styles.indicatorAnimated\n          )}\n          style={indicatorStyle}\n        />\n        {children}\n      </RadioGroupPrimitive.Root>\n    </SegmentedControlContext.Provider>\n  )\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  SegmentedControlItemProps\n>(function SegmentedControlItem(\n  { className, value, icon, children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const { layout } = React.useContext(SegmentedControlContext)\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      value={value}\n      data-slot=\"segmented-control-item\"\n      {...{ [SLOT_ATTR]: \"segmented-control-item\" }}\n      className={mergeClasses(\n        styles.item,\n        layout === \"stretch\" && styles.itemStretch,\n        className\n      )}\n      {...props}\n    >\n      {icon && (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"segmented-control-item-icon\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-icon\" }}\n          className={styles.icon}\n        >\n          {icon}\n        </span>\n      )}\n      {children && (\n        <span\n          data-slot=\"segmented-control-item-label\"\n          {...{ [SLOT_ATTR]: \"segmented-control-item-label\" }}\n          className={styles.label}\n        >\n          {children}\n        </span>\n      )}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["SegmentedControlContext","React","useStyles","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.accentSoft","tokens.body","tokens.spacingElement3","tokens.textXs","tokens.leadingXs","tokens.fontWeightSemibold","tokens.accentDefault","tokens.accentA8","SLOT_ATTR","SegmentedControl","className","layout","orientation","valueProp","defaultValue","onValueChange","children","props","forwardedRef","styles","rootRef","useRef","trackedValue","setTrackedValue","useState","indicatorReady","setIndicatorReady","indicatorStyle","setIndicatorStyle","isControlled","currentValue","updateIndicator","useCallback","el","useLayoutEffect","items","max","raf","handleValueChange","value","handleRef","node","contextValue","jsx","jsxs","RadioGroupPrimitive.Root","mergeClasses","SegmentedControlItem","icon","ref","RadioGroupPrimitive.Item"],"mappings":"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"}

package/dist/components/select/select.js

@@ -1,11 +1,11 @@
 import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import * as s from "react";
-import { Root as D, Portal as B, Content as L, Viewport as $, Group as k, Item as P, ItemIndicator as W, ItemText as z, Label as X, ScrollDownButton as j, ScrollUpButton as E, Separator as M, Value as U, Trigger as Y, Icon as F } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
+import { Root as D, Portal as B, Content as L, Viewport as $, Group as k, Item as P, ItemIndicator as W, ItemText as z, Label as X, ScrollDownButton as j, ScrollUpButton as E, Separator as M, Value as U, Trigger as Y, Icon as O } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
 import { SLOT_ATTR as i, mergeClasses as p, shorthands as c } from "@epilot/zenith-runtime/v1";
-import { useAppearanceAttributes as G } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as O } from "../density-provider/density-provider.js";
-import { makeZenithStyles as Z } from "../../styles/make-styles.js";
-import { spacingElement1 as g, semGraySoft as H, gray11 as V, fontWeightSemibold as _, leadingXs as J, textXs as K, spacingElement2 as d, grayA11 as f, accentA3 as S, grayA12 as y, leadingSm as b, textSm as v, selectItemPaddingY as I, selectItemPaddingLeft as Q, body as tt, accentA11 as C, semFocusRing as q, semAccentSoft as et, grayA8 as ot, radiusMd as R, radius2xl as rt, selectContentGap as at, selectContentPadding as nt, radiusLg as it } from "../../tokens/index.js";
+import { useAppearanceAttributes as Z } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as F } from "../density-provider/density-provider.js";
+import { makeZenithStyles as G } from "../../styles/make-styles.js";
+import { spacingElement1 as g, graySoft as H, gray11 as V, fontWeightSemibold as _, leadingXs as J, textXs as K, spacingElement2 as d, grayA11 as f, accentA3 as S, grayA12 as y, leadingSm as b, textSm as v, selectItemPaddingY as I, selectItemPaddingLeft as Q, body as tt, accentA11 as C, focusRing as q, accentSoft as et, grayA8 as ot, radiusMd as R, radius2xl as rt, selectContentGap as at, selectContentPadding as nt, radiusLg as it } from "../../tokens/index.js";
 const lt = (n) => /* @__PURE__ */ t(
   "svg",
   {
@@ -50,7 +50,7 @@ const lt = (n) => /* @__PURE__ */ t(
     ...n,
     children: /* @__PURE__ */ t("path", { d: "M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z" })
   }
-), u = Z({
+), u = G({
   trigger: {
     display: "flex",
     width: "100%",
@@ -373,7 +373,7 @@ const lt = (n) => /* @__PURE__ */ t(
       children: [
         e,
         /* @__PURE__ */ t(
-          F,
+          O,
           {
             asChild: !0,
             "data-slot": "select-icon",
@@ -413,16 +413,16 @@ const lt = (n) => /* @__PURE__ */ t(
   align: l = "center",
   container: r,
   ...m
-}, A) {
-  const w = u(), x = O(), N = G();
+}, N) {
+  const w = u(), x = F(), A = Z();
   return /* @__PURE__ */ t(B, { container: r, children: /* @__PURE__ */ h(
     L,
     {
-      ref: A,
+      ref: N,
       "data-slot": "select-content",
       [i]: "select-content",
       ...x !== void 0 ? { "data-density": x } : {},
-      ...N,
+      ...A,
       position: a,
       align: l,
       className: p(w.popup, o),