@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.1

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS } from \"../../tokens\"\nimport { ensurePaletteTokensFor } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n *\n * v1 enumerates 20 colours x 3 styles as 60 `compoundVariants`, each a distinct class string like\n * `volt-bg-mint-soft`. Because those names are built by interpolation, Tailwind's scanner cannot\n * see them, which is what `safelist.css` exists to force — 9 lines that emit ~945 rules, 65.6 KB\n * and 59% of v1's entire rule count. The Griffel PoC carried the same shape forward as 60 static\n * style objects.\n *\n * Here the colour is a VALUE, not part of a class name. Three atoms read three custom properties;\n * the component sets those properties inline from the `color` prop. Total rules: one small set per\n * style variant, regardless of how many colours exist. Adding a 22nd palette family costs zero\n * rules.\n *\n * Two consequences worth knowing:\n *  - `color` may legitimately arrive from a runtime expression (`getColorForEntityLabel(label)` and\n *    `WCAG_BADGE_MAP[level].color` both exist in consumer code today), which no build step can\n *    resolve. That is exactly why the palette sheet cannot be statically shaken, and why this\n *    component calls `ensurePaletteTokens()`.\n *  - Selectors key on SLOT_ATTR, never on `data-slot`. `data-slot` values are shared with v1, so a\n *    rule keyed on one also matches v1-rendered DOM — the StyleX track had a v1 icon compute to\n *    0x0 through a green gate this way. `data-slot` is still emitted, purely as a diagnostic.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\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] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-badge-bg\"\nconst FG = \"--volt2-badge-fg\"\nconst BD = \"--volt2-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\nconst semantic = (color: BadgeColor, slot: string): string =>\n  `var(--volt2-${NS}-sem-${resolveColor(color)}-${slot})`\nconst primitive = (color: BadgeColor, step: string): string =>\n  `var(--volt2-${NS}-${resolveColor(color)}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\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    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\n  ) {\n    // A decorative family can still arrive from an expression the build cannot see, so this has to\n    // run on every render — but it is the resolved family that decides, and a core one needs no\n    // palette sheet.\n    ensurePaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","semantic","slot","NS","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","ensurePaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useVoltPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component\n * that takes a `color` prop.\n *\n * v1 enumerates 20 colours x 3 styles as 60 `compoundVariants`, each a distinct class string like\n * `volt-bg-mint-soft`. Because those names are built by interpolation, Tailwind's scanner cannot\n * see them, which is what `safelist.css` exists to force — 9 lines that emit ~945 rules, 65.6 KB\n * and 59% of v1's entire rule count. The Griffel PoC carried the same shape forward as 60 static\n * style objects.\n *\n * Here the colour is a VALUE, not part of a class name. Three atoms read three custom properties;\n * the component sets those properties inline from the `color` prop. Total rules: one small set per\n * style variant, regardless of how many colours exist. Adding a 22nd palette family costs zero\n * rules.\n *\n * Two consequences worth knowing:\n *  - `color` may legitimately arrive from a runtime expression (`getColorForEntityLabel(label)` and\n *    `WCAG_BADGE_MAP[level].color` both exist in consumer code today), which no build step can\n *    resolve. That is exactly why the palette sheet cannot be statically shaken, and why this\n *    component calls `ensurePaletteTokens()`.\n *  - Selectors key on SLOT_ATTR, never on `data-slot`. `data-slot` values are shared with v1, so a\n *    rule keyed on one also matches v1-rendered DOM — the StyleX track had a v1 icon compute to\n *    0x0 through a green gate this way. `data-slot` is still emitted, purely as a diagnostic.\n */\n\nconst COLORS = [\n  \"accent\",\n  \"neutral\",\n  \"gray\",\n  \"success\",\n  \"warning\",\n  \"error\",\n  \"info\",\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] as const\n\nexport type BadgeColor = (typeof COLORS)[number]\nexport type BadgeVariant = \"soft\" | \"solid\" | \"surface\"\nexport type BadgeSize = \"sm\" | \"base\" | \"lg\"\n\n/** The three slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--volt2-badge-bg\"\nconst FG = \"--volt2-badge-fg\"\nconst BD = \"--volt2-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in. This does not touch `useVoltPaletteTokensFor(color)`\n * above, which still receives the raw, unresolved `color` prop and therefore still installs the\n * palette sheet for `color=\"neutral\"` even though the resolved family needs none of it — a\n * separate, pre-existing inefficiency this fix does not optimize. See BADGE-PILL-NAMESPACE-FIX.md.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--volt2-${namespaceFor(family)}-sem-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--volt2-${namespaceFor(family)}-${family}-${step})`\n}\n\n/**\n * Which token each variant pulls into each slot. This replaces the 60-entry compound matrix: it is\n * data about three variants, not about 60 combinations.\n */\nconst VARIANT_SLOTS: Record<\n  BadgeVariant,\n  (color: BadgeColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: \"transparent\",\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"default\"),\n    [BD]: primitive(c, \"a6\"),\n  }),\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"fit-content\",\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontWeight: tokens.fontWeightNormal,\n    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a\n    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would\n    // both survive with the winner decided by insertion order. Griffel warns at runtime, which\n    // means the mistake ships silently in production where nobody reads the console.\n    // `shorthands.*` expands to the individual longhands.\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    transitionProperty: \"color, box-shadow\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused\n    // badge paints the error ring, matching v1's variant ordering.\n    \"&[aria-invalid]\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"& > svg\": { pointerEvents: \"none\" },\n  },\n  sm: {\n    fontSize: tokens.textXs,\n    lineHeight: \"1rem\",\n    letterSpacing: \"0.04px\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement1,\n    minWidth: \"1rem\",\n    borderRadius: \"3px\",\n    \"& > svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  base: {\n    fontSize: tokens.textSm,\n    lineHeight: \"1.25rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement2,\n    minWidth: \"1.25rem\",\n    borderRadius: tokens.radiusSm,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    fontSize: tokens.textBase,\n    lineHeight: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    paddingInline: tokens.spacingElement3,\n    minWidth: \"1.5rem\",\n    borderRadius: tokens.radiusMd,\n    \"& > svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n})\n\nexport type BadgeProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: BadgeColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute\n   * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is\n   * not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: BadgeVariant\n  size?: BadgeSize\n}\n\nexport const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  function Badge(\n    {\n      className,\n      color = \"accent\",\n      variant = \"soft\",\n      size = \"base\",\n      style,\n      ...props\n    },\n    ref\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) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useVoltPaletteTokensFor(color)\n\n    const styles = useStyles()\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...{ [SLOT_ATTR]: \"badge\" }}\n        className={mergeClasses(styles.root, styles[size], className)}\n        style={\n          { ...VARIANT_SLOTS[variant](color), ...style } as React.CSSProperties\n        }\n        {...props}\n      />\n    )\n  }\n)\n\nexport { COLORS as BADGE_COLORS }\n"],"names":["COLORS","BG","FG","BD","resolveColor","color","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeVoltStyles","tokens.fontWeightNormal","shorthands","tokens.accentA8","tokens.errorA8","tokens.textXs","tokens.spacingElement1","tokens.textSm","tokens.spacingElement2","tokens.radiusSm","tokens.textBase","tokens.spacingElement3","tokens.radiusMd","Badge","React","className","variant","size","style","props","ref","useVoltPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/button/button.js

@@ -1,17 +1,17 @@
-import { jsx as S } from "react/jsx-runtime";
-import * as k from "react";
+import { jsx as b } from "react/jsx-runtime";
+import * as S from "react";
 import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as y } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as w } from "../../styles/make-styles.js";
-import { spacingElement3 as A, radiusLg as H, leadingLg as B, textLg as R, leadingBase as E, textBase as L, leadingSm as z, textSm as I, leadingXs as D, textXs as X, errorA8 as t, semErrorSoft as s, errorA11 as l, semErrorSoftHover as T, semErrorSolidHover as a, semErrorContrast as W, semErrorSolid as j, grayA8 as O, semAccentSoft as i, grayA12 as N, accentA8 as n, accentA11 as c, semAccentSoftHover as P, semAccentSolidHover as m, semAccentContrast as Q, semAccentSolid as V, fontWeightSemibold as _ } from "../../tokens/index.js";
-import { Root as $ } from "../../vendor/@radix-ui/react-slot/dist/index.js";
-const q = "button", F = w({
+import { SLOT_ATTR as v } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as k } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as C } from "../../styles/make-styles.js";
+import { buttonBasePaddingInline as x, spacingElement3 as y, radiusLg as w, buttonIconSize as n, leadingLg as H, textLg as B, leadingBase as A, textBase as R, buttonBaseMinHeight as E, leadingSm as I, textSm as z, leadingXs as L, textXs as D, semErrorSoft as i, errorA11 as O, semErrorSoftHover as X, semErrorOnSoft as T, semErrorSolidHover as s, semErrorContrast as W, semErrorSolid as j, semAccentSoft as t, grayA12 as P, accentA11 as F, semAccentSoftHover as M, semAccentOnSoft as N, semAccentSolidHover as a, semAccentContrast as Q, semAccentSolid as V, semFocusRing as _, fontWeightSemibold as $ } from "../../tokens/index.js";
+import { Root as q } from "../../vendor/@radix-ui/react-slot/dist/index.js";
+const G = "button", J = C({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    fontWeight: _,
+    fontWeight: $,
     whiteSpace: "nowrap",
     transitionProperty: "all",
     cursor: "pointer",
@@ -20,7 +20,11 @@ const q = "button", F = w({
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineOffset: "2px"
+      outlineOffset: "2px",
+      outlineColor: _
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
     },
     "& svg": {
       flexShrink: 0,
@@ -31,71 +35,68 @@ const q = "button", F = w({
   primary: {
     backgroundColor: V,
     color: Q,
-    ":hover": { backgroundColor: m },
-    ":active": { backgroundColor: m },
-    ":focus-visible": { outlineColor: n }
+    ":hover": { backgroundColor: a },
+    ":active": { backgroundColor: a }
   },
   secondary: {
-    backgroundColor: i,
-    color: c,
-    ":hover": { backgroundColor: P },
-    ":focus-visible": { outlineColor: n }
+    backgroundColor: t,
+    color: N,
+    ":hover": { backgroundColor: M }
   },
   tertiary: {
     backgroundColor: "transparent",
-    color: c,
-    ":hover": { backgroundColor: i },
-    ":focus-visible": { outlineColor: n }
+    color: F,
+    ":hover": { backgroundColor: t }
   },
   ghost: {
     backgroundColor: "transparent",
-    color: N,
-    ":hover": { backgroundColor: i },
-    ":focus-visible": { outlineColor: O }
+    color: P,
+    ":hover": { backgroundColor: t }
   },
   primaryDestructive: {
     backgroundColor: j,
     color: W,
-    ":hover": { backgroundColor: a },
-    ":active": { backgroundColor: a },
-    ":focus-visible": { outlineColor: t }
+    ":hover": { backgroundColor: s },
+    ":active": { backgroundColor: s }
   },
   secondaryDestructive: {
-    backgroundColor: s,
-    color: l,
-    ":hover": { backgroundColor: T },
-    ":focus-visible": { outlineColor: t }
+    backgroundColor: i,
+    color: T,
+    ":hover": { backgroundColor: X }
   },
   tertiaryDestructive: {
     backgroundColor: "transparent",
-    color: l,
-    ":hover": { backgroundColor: s },
-    ":focus-visible": { outlineColor: t }
+    color: O,
+    ":hover": { backgroundColor: i }
   },
   xs: {
     ...o.paddingInline("0.5rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.25rem",
-    fontSize: X,
-    lineHeight: D,
+    fontSize: D,
+    lineHeight: L,
     gap: "4px",
     "& svg": { width: "0.75rem", height: "0.75rem" }
   },
   sm: {
-    ...o.paddingInline(A),
+    ...o.paddingInline(y),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.5rem",
-    fontSize: I,
-    lineHeight: z,
+    fontSize: z,
+    lineHeight: I,
     gap: "0.375rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
   base: {
-    ...o.paddingInline("1rem"),
+    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the
+    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block
+    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an
+    // explicit minHeight above the natural content box, same mechanism `lg` already uses).
+    ...o.paddingInline(x),
     ...o.paddingBlock("0.25rem"),
-    minHeight: "2rem",
-    fontSize: L,
-    lineHeight: E,
+    minHeight: E,
+    fontSize: R,
+    lineHeight: A,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -103,8 +104,8 @@ const q = "button", F = w({
     ...o.paddingInline("1.25rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2.5rem",
-    fontSize: R,
-    lineHeight: B,
+    fontSize: B,
+    lineHeight: H,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -119,8 +120,10 @@ const q = "button", F = w({
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
   icon: {
-    width: "2rem",
-    height: "2rem",
+    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable
+    // both move freely (DENSITY-SPEC.md §2.4).
+    width: n,
+    height: n,
     "& svg": { width: "1.125rem", height: "1.125rem" }
   },
   iconLg: {
@@ -128,19 +131,19 @@ const q = "button", F = w({
     height: "2.5rem",
     "& svg": { width: "1.5rem", height: "1.5rem" }
   },
-  normal: { borderRadius: H },
+  normal: { borderRadius: w },
   rounded: { borderRadius: "9999px" }
-}), ro = k.forwardRef(
+}), io = S.forwardRef(
   function({
     variant: r = "primary",
-    size: g = "base",
-    shape: d = "rounded",
-    destructive: h = !1,
-    className: u,
-    asChild: p = !1,
-    ...f
-  }, b) {
-    const e = F(), v = h && r !== "ghost" ? `${r}Destructive` : r, C = {
+    size: m = "base",
+    shape: c = "rounded",
+    destructive: l = !1,
+    className: g,
+    asChild: d = !1,
+    ...h
+  }, u) {
+    const e = J(), p = l && r !== "ghost" ? `${r}Destructive` : r, f = {
       xs: "xs",
       sm: "sm",
       base: "base",
@@ -149,26 +152,26 @@ const q = "button", F = w({
       "icon-sm": "iconSm",
       icon: "icon",
       "icon-lg": "iconLg"
-    }[g];
-    return /* @__PURE__ */ S(
-      p ? $ : q,
+    }[m];
+    return /* @__PURE__ */ b(
+      d ? q : G,
       {
-        ref: b,
+        ref: u,
         "data-slot": "button",
-        [y]: "button",
-        className: x(
+        [v]: "button",
+        className: k(
           e.root,
-          e[v],
-          e[C],
-          e[d],
-          u
+          e[p],
+          e[f],
+          e[c],
+          g
         ),
-        ...f
+        ...h
       }
     );
   }
 );
 export {
-  ro as Button
+  io as Button
 };
 //# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Base UI's type declarations resolve `react` from the hoisted root's `@types/react` (v19), while\n * this package pins `@types/react` 18 in its own node_modules. Re-typing the primitive onto OUR\n * `React` keeps the button's pass-through props and ref on one React type for this package.\n */\n/**\n * A native `<button>`, no primitive.\n *\n * v1's only Radix use here is `Slot`, purely to implement `asChild`, and this does the same. Base\n * UI's button primitive supplied nothing v1 had: it added a dependency, and with it the\n * `@types/react` 19 requirement, for a plain element.\n */\nconst ButtonBase = \"button\" as const\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    \":disabled\": { opacity: 0.5 },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  primary: {\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": { backgroundColor: tokens.semAccentSolidHover },\n    \":active\": { backgroundColor: tokens.semAccentSolidHover },\n    \":focus-visible\": { outlineColor: tokens.accentA8 },\n  },\n  secondary: {\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.accentA11,\n    \":hover\": { backgroundColor: tokens.semAccentSoftHover },\n    \":focus-visible\": { outlineColor: tokens.accentA8 },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover\": { backgroundColor: tokens.semAccentSoft },\n    \":focus-visible\": { outlineColor: tokens.accentA8 },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover\": { backgroundColor: tokens.semAccentSoft },\n    \":focus-visible\": { outlineColor: tokens.grayA8 },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.semErrorSolid,\n    color: tokens.semErrorContrast,\n    \":hover\": { backgroundColor: tokens.semErrorSolidHover },\n    \":active\": { backgroundColor: tokens.semErrorSolidHover },\n    \":focus-visible\": { outlineColor: tokens.errorA8 },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.semErrorSoft,\n    color: tokens.errorA11,\n    \":hover\": { backgroundColor: tokens.semErrorSoftHover },\n    \":focus-visible\": { outlineColor: tokens.errorA8 },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover\": { backgroundColor: tokens.semErrorSoft },\n    \":focus-visible\": { outlineColor: tokens.errorA8 },\n  },\n  xs: {\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"1.25rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    ...shorthands.paddingInline(\"1rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    width: \"2rem\",\n    height: \"2rem\",\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  | \"xs\"\n  | \"sm\"\n  | \"base\"\n  | \"lg\"\n  | \"icon-xs\"\n  | \"icon-sm\"\n  | \"icon\"\n  | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the child element instead of a `button`, keeping Button's styling and slot markers.\n   * v1 supports this and consumers rely on it to wrap links; it was dropped here while the package\n   * was briefly on Base UI, and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      | \"xs\"\n      | \"sm\"\n      | \"base\"\n      | \"lg\"\n      | \"iconXs\"\n      | \"iconSm\"\n      | \"icon\"\n      | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const Root = asChild ? Slot : ButtonBase\n\n    return (\n      <Root\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variantSlot],\n          styles[sizeSlot],\n          styles[shape],\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["ButtonBase","useStyles","makeVoltStyles","tokens.fontWeightSemibold","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","tokens.accentA8","tokens.semAccentSoft","tokens.accentA11","tokens.semAccentSoftHover","tokens.grayA12","tokens.grayA8","tokens.semErrorSolid","tokens.semErrorContrast","tokens.semErrorSolidHover","tokens.errorA8","tokens.semErrorSoft","tokens.errorA11","tokens.semErrorSoftHover","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.radiusLg","Button","React","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","jsx","Slot","SLOT_ATTR","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Base UI's type declarations resolve `react` from the hoisted root's `@types/react` (v19), while\n * this package pins `@types/react` 18 in its own node_modules. Re-typing the primitive onto OUR\n * `React` keeps the button's pass-through props and ref on one React type for this package.\n */\n/**\n * A native `<button>`, no primitive.\n *\n * v1's only Radix use here is `Slot`, purely to implement `asChild`, and this does the same. Base\n * UI's button primitive supplied nothing v1 had: it added a dependency, and with it the\n * `@types/react` 19 requirement, for a plain element.\n */\nconst ButtonBase = \"button\" as const\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    \":disabled\": { opacity: 0.5 },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  primary: {\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": { backgroundColor: tokens.semAccentSolidHover },\n    \":active\": { backgroundColor: tokens.semAccentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentOnSoft,\n    \":hover\": { backgroundColor: tokens.semAccentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover\": { backgroundColor: tokens.semAccentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover\": { backgroundColor: tokens.semAccentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.semErrorSolid,\n    color: tokens.semErrorContrast,\n    \":hover\": { backgroundColor: tokens.semErrorSolidHover },\n    \":active\": { backgroundColor: tokens.semErrorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.semErrorSoft,\n    color: tokens.semErrorOnSoft,\n    \":hover\": { backgroundColor: tokens.semErrorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover\": { backgroundColor: tokens.semErrorSoft },\n  },\n  xs: {\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"1.25rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the\n    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block\n    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an\n    // explicit minHeight above the natural content box, same mechanism `lg` already uses).\n    ...shorthands.paddingInline(tokens.buttonBasePaddingInline),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: tokens.buttonBaseMinHeight,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable\n    // both move freely (DENSITY-SPEC.md §2.4).\n    width: tokens.buttonIconSize,\n    height: tokens.buttonIconSize,\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  | \"xs\"\n  | \"sm\"\n  | \"base\"\n  | \"lg\"\n  | \"icon-xs\"\n  | \"icon-sm\"\n  | \"icon\"\n  | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the child element instead of a `button`, keeping Button's styling and slot markers.\n   * v1 supports this and consumers rely on it to wrap links; it was dropped here while the package\n   * was briefly on Base UI, and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      | \"xs\"\n      | \"sm\"\n      | \"base\"\n      | \"lg\"\n      | \"iconXs\"\n      | \"iconSm\"\n      | \"icon\"\n      | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const Root = asChild ? Slot : ButtonBase\n\n    return (\n      <Root\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variantSlot],\n          styles[sizeSlot],\n          styles[shape],\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n"],"names":["ButtonBase","useStyles","makeVoltStyles","tokens.fontWeightSemibold","tokens.semFocusRing","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","tokens.semAccentSoft","tokens.semAccentOnSoft","tokens.semAccentSoftHover","tokens.accentA11","tokens.grayA12","tokens.semErrorSolid","tokens.semErrorContrast","tokens.semErrorSolidHover","tokens.semErrorSoft","tokens.semErrorOnSoft","tokens.semErrorSoftHover","tokens.errorA11","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.buttonBasePaddingInline","tokens.buttonBaseMinHeight","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.buttonIconSize","tokens.radiusLg","Button","React","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","jsx","Slot","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/checkbox/checkbox.js

@@ -1,12 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import { Checkbox as m, CheckboxIndicator as x } from "../../vendor/@radix-ui/react-checkbox/dist/index.js";
+import * as n from "react";
+import { Checkbox as m, CheckboxIndicator as u } from "../../vendor/@radix-ui/react-checkbox/dist/index.js";
 import { shorthands as e } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as p } from "../../styles/make-styles.js";
-import { errorA8 as s, grayA4 as u, accentA7 as d, semAccentContrast as f, semAccentSolid as k, accentA12 as g, accentA8 as w, radiusSm as C, semAccentSoft as v } from "../../tokens/index.js";
-const y = c.forwardRef(function(r, t) {
+import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as b } from "../../styles/make-styles.js";
+import { errorA8 as p, grayA4 as f, accentA7 as s, semAccentContrast as g, semAccentSolid as k, semAccentOnSoft as w, semFocusRing as d, radiusSm as C, semAccentSoft as v } from "../../tokens/index.js";
+const y = n.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -22,7 +22,7 @@ const y = c.forwardRef(function(r, t) {
       children: /* @__PURE__ */ o("path", { d: "m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z" })
     }
   );
-}), S = c.forwardRef(function(r, t) {
+}), S = n.forwardRef(function(r, t) {
   return /* @__PURE__ */ o(
     "svg",
     {
@@ -38,9 +38,9 @@ const y = c.forwardRef(function(r, t) {
       children: /* @__PURE__ */ o("path", { d: "M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z" })
     }
   );
-}), T = p({
+}), T = b({
   root: {
-    ...e.border("1px", "solid", d),
+    ...e.border("1px", "solid", s),
     backgroundColor: v,
     display: "inline-block",
     boxSizing: "border-box",
@@ -53,30 +53,33 @@ const y = c.forwardRef(function(r, t) {
     transitionProperty: "box-shadow",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     transitionDuration: "150ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
     ":focus-visible": {
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: w
+      outlineColor: d
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
       opacity: 0.5,
-      ...e.borderColor(u)
+      ...e.borderColor(f)
     },
     "&[aria-invalid='true']": {
-      outlineColor: s,
-      ...e.borderColor(s)
+      outlineColor: d,
+      ...e.borderColor(p)
     },
     "&[data-state='indeterminate']": {
-      backgroundColor: d,
+      backgroundColor: s,
       ...e.borderColor("transparent"),
-      color: g
+      color: w
     },
     "&[data-state='checked']": {
       backgroundColor: k,
       ...e.borderWidth("0px"),
-      color: f
+      color: g
     },
     "&[data-state='checked'] svg, &[data-state='indeterminate'] svg": {
       width: "0.875rem",
@@ -94,7 +97,7 @@ const y = c.forwardRef(function(r, t) {
       height: "0.875rem"
     }
   }
-}), B = c.forwardRef(function({ className: r, checked: t, ...l }, h) {
+}), z = n.forwardRef(function({ className: r, checked: t, ...l }, h) {
   const a = T();
   return /* @__PURE__ */ o(
     m,
@@ -103,10 +106,10 @@ const y = c.forwardRef(function(r, t) {
       checked: t,
       "data-slot": "checkbox",
       [i]: "checkbox",
-      className: b(a.root, r),
+      className: x(a.root, r),
       ...l,
       children: /* @__PURE__ */ o(
-        x,
+        u,
         {
           "data-slot": "checkbox-indicator",
           [i]: "checkbox-indicator",
@@ -118,6 +121,6 @@ const y = c.forwardRef(function(r, t) {
   );
 });
 export {
-  B as Checkbox
+  z as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.errorA8,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.accentA12,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeVoltStyles","shorthands","tokens.accentA7","tokens.semAccentSoft","tokens.radiusSm","tokens.accentA8","tokens.grayA4","tokens.errorA8","tokens.accentA12","tokens.semAccentSolid","tokens.semAccentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CheckIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function CheckIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-check-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-check-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z\" />\n    </svg>\n  )\n})\n\nconst MinusIcon = React.forwardRef<\n  SVGSVGElement,\n  React.SVGProps<SVGSVGElement>\n>(function MinusIcon(props, ref) {\n  return (\n    <svg\n      ref={ref}\n      data-slot=\"checkbox-minus-icon\"\n      {...{ [SLOT_ATTR]: \"checkbox-minus-icon\" }}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24px\"\n      viewBox=\"0 -960 960 960\"\n      width=\"24px\"\n      fill=\"currentColor\"\n      {...props}\n    >\n      <path d=\"M280-440q-17 0-28.5-11.5T240-480q0-17 11.5-28.5T280-520h400q17 0 28.5 11.5T720-480q0 17-11.5 28.5T680-440H280Z\" />\n    </svg>\n  )\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    display: \"inline-block\",\n    boxSizing: \"border-box\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: tokens.radiusSm,\n    // v1 `shadow-xs` — elevation comes from Tailwind's shadow scale, which has no token (B7).\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"box-shadow\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\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      opacity: 0.5,\n      ...shorthands.borderColor(tokens.grayA4),\n    },\n    \"&[aria-invalid='true']\": {\n      outlineColor: tokens.semFocusRing,\n      ...shorthands.borderColor(tokens.errorA8),\n    },\n    \"&[data-state='indeterminate']\": {\n      backgroundColor: tokens.accentA7,\n      ...shorthands.borderColor(\"transparent\"),\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      ...shorthands.borderWidth(\"0px\"),\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'] svg, &[data-state='indeterminate'] svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  indicator: {\n    display: \"grid\",\n    placeContent: \"center\",\n    height: \"100%\",\n    color: \"currentColor\",\n    transitionProperty: \"none\",\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n})\n\nexport type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>\n\nexport const Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(function Checkbox({ className, checked, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={checked}\n      data-slot=\"checkbox\"\n      {...{ [SLOT_ATTR]: \"checkbox\" }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        {...{ [SLOT_ATTR]: \"checkbox-indicator\" }}\n        className={styles.indicator}\n      >\n        {checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckIcon","React","props","ref","jsx","SLOT_ATTR","MinusIcon","useStyles","makeVoltStyles","shorthands","tokens.accentA7","tokens.semAccentSoft","tokens.radiusSm","tokens.semFocusRing","tokens.grayA4","tokens.errorA8","tokens.semAccentOnSoft","tokens.semAccentSolid","tokens.semAccentContrast","Checkbox","className","checked","styles","CheckboxPrimitive.Root","mergeClasses","CheckboxPrimitive.Indicator"],"mappings":"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"}