@epilot/zenith-react 0.2.0-next.0 → 0.2.0-next.3

package/dist/components/button/button.js

@@ -1,16 +1,18 @@
-import { jsx as b } from "react/jsx-runtime";
-import * as a from "react";
-import { mergeClasses as w, SLOT_ATTR as B, shorthands as n } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as H } from "../../styles/make-styles.js";
-import { capTrim as R } from "../../styles/text-box.js";
-import { radiusLg as I, buttonIconSize as m, leadingLg as z, textLg as E, leadingBase as L, textBase as O, buttonBaseMinHeight as T, leadingSm as A, textSm as D, leadingXs as P, textXs as X, errorSoft as h, errorA11 as $, errorSoftHover as V, errorOnSoft as W, errorSolidHover as u, errorContrast as j, errorSolid as M, accentSoft as d, grayA12 as N, accentA11 as F, accentSoftHover as K, accentOnSoft as Z, accentSolidHover as p, accentContrast as _, accentSolid as q, focusRing as G, fontWeightSemibold as J, buttonBasePaddingInline as Q, spacingElement3 as U } from "../../tokens/index.js";
-import { Root as Y } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
-const ee = "button", oe = H({
+import { jsx as f } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeClasses as B, SLOT_ATTR as H, shorthands as n } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as R } from "../../styles/make-styles.js";
+import { boxModel as i, nativeControl as I } from "../../styles/host-reset.js";
+import { capTrim as z } from "../../styles/text-box.js";
+import { radiusLg as E, buttonIconSize as h, leadingLg as L, textLg as O, leadingBase as T, textBase as A, buttonBaseMinHeight as D, leadingSm as P, textSm as X, leadingXs as $, textXs as M, errorSoft as u, errorA11 as V, errorSoftHover as W, errorOnSoft as j, errorSolidHover as p, errorContrast as N, errorSolid as F, accentSoft as g, grayA12 as K, accentA11 as Z, accentSoftHover as _, accentOnSoft as q, accentSolidHover as b, accentContrast as G, accentSolid as J, focusRing as Q, fontWeightSemibold as U, buttonBasePaddingInline as Y, spacingElement3 as ee } from "../../tokens/index.js";
+import { Root as oe } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
+const te = "button", re = R({
   root: {
+    ...I,
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    fontWeight: J,
+    fontWeight: U,
     whiteSpace: "nowrap",
     transitionProperty: "all",
     cursor: "pointer",
@@ -22,7 +24,7 @@ const ee = "button", oe = H({
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: G
+      outlineColor: Q
     },
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0.01ms"
@@ -33,160 +35,168 @@ const ee = "button", oe = H({
       color: "currentColor"
     }
   },
-  label: R,
+  label: z,
   primary: {
-    backgroundColor: q,
-    color: _,
-    ":hover:not(:disabled)": { backgroundColor: p },
-    ":active:not(:disabled)": { backgroundColor: p }
+    backgroundColor: J,
+    color: G,
+    ":hover:not(:disabled)": { backgroundColor: b },
+    ":active:not(:disabled)": { backgroundColor: b }
   },
   secondary: {
-    backgroundColor: d,
-    color: Z,
-    ":hover:not(:disabled)": { backgroundColor: K }
+    backgroundColor: g,
+    color: q,
+    ":hover:not(:disabled)": { backgroundColor: _ }
   },
   tertiary: {
     backgroundColor: "transparent",
-    color: F,
-    ":hover:not(:disabled)": { backgroundColor: d }
+    color: Z,
+    ":hover:not(:disabled)": { backgroundColor: g }
   },
   ghost: {
     backgroundColor: "transparent",
-    color: N,
-    ":hover:not(:disabled)": { backgroundColor: d }
+    color: K,
+    ":hover:not(:disabled)": { backgroundColor: g }
   },
   primaryDestructive: {
-    backgroundColor: M,
-    color: j,
-    ":hover:not(:disabled)": { backgroundColor: u },
-    ":active:not(:disabled)": { backgroundColor: u }
+    backgroundColor: F,
+    color: N,
+    ":hover:not(:disabled)": { backgroundColor: p },
+    ":active:not(:disabled)": { backgroundColor: p }
   },
   secondaryDestructive: {
-    backgroundColor: h,
-    color: W,
-    ":hover:not(:disabled)": { backgroundColor: V }
+    backgroundColor: u,
+    color: j,
+    ":hover:not(:disabled)": { backgroundColor: W }
   },
   tertiaryDestructive: {
     backgroundColor: "transparent",
-    color: $,
-    ":hover:not(:disabled)": { backgroundColor: h }
+    color: V,
+    ":hover:not(:disabled)": { backgroundColor: u }
   },
   xs: {
+    ...i,
     ...n.paddingInline("0.5rem"),
     ...n.paddingBlock("0.25rem"),
     // Cap trimming removes the line-height's leading from direct text. Keep the established
     // 24px control geometry explicitly instead of relying on that incidental text height.
     minHeight: "1.5rem",
-    fontSize: X,
-    lineHeight: P,
+    fontSize: M,
+    lineHeight: $,
     gap: "4px",
     "& svg": { width: "0.75rem", height: "0.75rem" }
   },
   sm: {
-    ...n.paddingInline(U),
+    ...i,
+    ...n.paddingInline(ee),
     ...n.paddingBlock("0.25rem"),
     // As above, the fixed 28px size is part of Button's contract, independent of its label box.
     minHeight: "1.75rem",
-    fontSize: D,
-    lineHeight: A,
+    fontSize: X,
+    lineHeight: P,
     gap: "0.375rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
   base: {
+    ...i,
     // 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).
-    ...n.paddingInline(Q),
+    ...n.paddingInline(Y),
     ...n.paddingBlock("0.25rem"),
-    minHeight: T,
-    fontSize: O,
-    lineHeight: L,
+    minHeight: D,
+    fontSize: A,
+    lineHeight: T,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
   lg: {
+    ...i,
     ...n.paddingInline("1.25rem"),
     ...n.paddingBlock("0.25rem"),
     minHeight: "2.5rem",
-    fontSize: E,
-    lineHeight: z,
+    fontSize: O,
+    lineHeight: L,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
   iconXs: {
+    ...i,
     width: "1.5rem",
     height: "1.5rem",
     "& svg": { width: "0.75rem", height: "0.75rem" }
   },
   iconSm: {
+    ...i,
     width: "1.75rem",
     height: "1.75rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
   icon: {
+    ...i,
     // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable
     // both move freely (DENSITY-SPEC.md §2.4).
-    width: m,
-    height: m,
+    width: h,
+    height: h,
     "& svg": { width: "1.125rem", height: "1.125rem" }
   },
   iconLg: {
+    ...i,
     width: "2.5rem",
     height: "2.5rem",
     "& svg": { width: "1.5rem", height: "1.5rem" }
   },
-  normal: { borderRadius: I },
+  normal: { borderRadius: E },
   rounded: { borderRadius: "9999px" }
 });
-function f(c, i = "button") {
-  return a.Children.toArray(c).flatMap((e, t) => {
-    const l = a.isValidElement(e) && e.key !== null ? String(e.key) : String(t), o = `${i}/${l}`;
-    return a.isValidElement(e) && e.type === a.Fragment ? f(e.props.children, o) : [{ node: e, keyPath: o }];
+function S(d, a = "button") {
+  return l.Children.toArray(d).flatMap((e, t) => {
+    const s = l.isValidElement(e) && e.key !== null ? String(e.key) : String(t), o = `${a}/${s}`;
+    return l.isValidElement(e) && e.type === l.Fragment ? S(e.props.children, o) : [{ node: e, keyPath: o }];
   });
 }
-function te(c, i) {
+function ne(d, a) {
   const e = [];
   let t = [];
-  const l = () => {
+  const s = () => {
     if (!t.length) return;
     t.every(
       ({ node: r }) => typeof r == "string" && r.trim() === ""
     ) ? e.push(...t.map(({ node: r }) => r)) : e.push(
-      /* @__PURE__ */ b(
+      /* @__PURE__ */ f(
         "span",
         {
           "data-slot": "button-label",
-          className: i,
+          className: a,
           children: t.map(({ node: r }) => r)
         },
         `button-label:${t[0].keyPath}`
       )
     ), t = [];
   };
-  for (const o of f(c)) {
+  for (const o of S(d)) {
     if (typeof o.node == "string" || typeof o.node == "number") {
       t.push(o);
       continue;
     }
-    l(), e.push(
-      a.isValidElement(o.node) ? a.cloneElement(o.node, { key: o.keyPath }) : o.node
+    s(), e.push(
+      l.isValidElement(o.node) ? l.cloneElement(o.node, { key: o.keyPath }) : o.node
     );
   }
-  return l(), e;
+  return s(), e;
 }
-const ce = a.forwardRef(
+const me = l.forwardRef(
   function({
-    variant: i = "primary",
+    variant: a = "primary",
     size: e = "base",
     shape: t = "rounded",
-    destructive: l = !1,
+    destructive: s = !1,
     className: o,
     asChild: r = !1,
-    children: g,
-    ...S
-  }, y) {
-    const s = oe(), k = l && i !== "ghost" ? `${i}Destructive` : i, v = {
+    children: m,
+    ...y
+  }, k) {
+    const c = re(), v = s && a !== "ghost" ? `${a}Destructive` : a, C = {
       xs: "xs",
       sm: "sm",
       base: "base",
@@ -195,27 +205,27 @@ const ce = a.forwardRef(
       "icon-sm": "iconSm",
       icon: "icon",
       "icon-lg": "iconLg"
-    }[e], C = r ? Y : ee, x = r ? g : te(g, s.label);
-    return /* @__PURE__ */ b(
-      C,
+    }[e], x = r ? oe : te, w = r ? m : ne(m, c.label);
+    return /* @__PURE__ */ f(
+      x,
       {
-        ref: y,
+        ref: k,
         "data-slot": "button",
-        [B]: "button",
-        className: w(
-          s.root,
-          s[k],
-          s[v],
-          s[t],
+        [H]: "button",
+        className: B(
+          c.root,
+          c[v],
+          c[C],
+          c[t],
           o
         ),
-        ...S,
-        children: x
+        ...y,
+        children: w
       }
     );
   }
 );
 export {
-  ce as Button
+  me 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/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { capTrim } from \"../../styles/text-box\"\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 = makeZenithStyles({\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 keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\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  label: capTrim,\n  primary: {\n    backgroundColor: tokens.accentSolid,\n    color: tokens.accentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.errorSolid,\n    color: tokens.errorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.errorSoft,\n    color: tokens.errorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoft },\n  },\n  xs: {\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\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    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\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\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"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      children,\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\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"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    const content = asChild\n      ? children\n      : wrapButtonTextRuns(children, styles.label)\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        {content}\n      </Root>\n    )\n  }\n)\n"],"names":["ButtonBase","useStyles","makeZenithStyles","tokens.fontWeightSemibold","tokens.focusRing","capTrim","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","tokens.accentSoft","tokens.accentOnSoft","tokens.accentSoftHover","tokens.accentA11","tokens.grayA12","tokens.errorSolid","tokens.errorContrast","tokens.errorSolidHover","tokens.errorSoft","tokens.errorOnSoft","tokens.errorSoftHover","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","flattenButtonChildren","children","parentPath","React","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","Root","Slot","content","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/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel, nativeControl } from \"../../styles/host-reset\"\nimport { capTrim } from \"../../styles/text-box\"\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 = makeZenithStyles({\n  root: {\n    ...nativeControl,\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 keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.focusRing,\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  label: capTrim,\n  primary: {\n    backgroundColor: tokens.accentSolid,\n    color: tokens.accentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.accentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.accentSoft,\n    color: tokens.accentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.accentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.errorSolid,\n    color: tokens.errorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.errorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.errorSoft,\n    color: tokens.errorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.errorSoft },\n  },\n  xs: {\n    ...boxModel,\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...boxModel,\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    ...boxModel,\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    ...boxModel,\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    ...boxModel,\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    ...boxModel,\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    ...boxModel,\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    ...boxModel,\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\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"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      children,\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\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"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    const content = asChild\n      ? children\n      : wrapButtonTextRuns(children, styles.label)\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        {content}\n      </Root>\n    )\n  }\n)\n"],"names":["ButtonBase","useStyles","makeZenithStyles","nativeControl","tokens.fontWeightSemibold","tokens.focusRing","capTrim","tokens.accentSolid","tokens.accentContrast","tokens.accentSolidHover","tokens.accentSoft","tokens.accentOnSoft","tokens.accentSoftHover","tokens.accentA11","tokens.grayA12","tokens.errorSolid","tokens.errorContrast","tokens.errorSolidHover","tokens.errorSoft","tokens.errorOnSoft","tokens.errorSoftHover","tokens.errorA11","boxModel","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","flattenButtonChildren","children","parentPath","React","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","Root","Slot","content","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/button-group/button-group.js

@@ -1,11 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-import * as d from "react";
-import { mergeClasses as p, SLOT_ATTR as s, shorthands as o } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as g } from "../../styles/make-styles.js";
-import { fontWeightMedium as m, leadingSm as f, textSm as h, grayA4 as b, spacingElement3 as x, spacingGroup2 as R, grayA5 as S, radiusMd as v, spacingElement2 as c } from "../../tokens/index.js";
-import { Separator as B } from "../separator/separator.js";
-const u = g({
+import { jsx as d } from "react/jsx-runtime";
+import * as p from "react";
+import { mergeClasses as u, SLOT_ATTR as s, shorthands as o } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as m } from "../../styles/make-styles.js";
+import { boxModel as n } from "../../styles/host-reset.js";
+import { fontWeightMedium as f, leadingSm as h, textSm as b, grayA4 as x, spacingElement3 as R, spacingGroup2 as S, grayA5 as v, radiusMd as B, spacingElement2 as g } from "../../tokens/index.js";
+import { Separator as T } from "../separator/separator.js";
+const l = m({
   root: {
+    ...n,
     display: "flex",
     width: "fit-content",
     alignItems: "stretch",
@@ -14,7 +16,7 @@ const u = g({
       position: "relative"
     },
     [`&:has(> [${s}="button-group"])`]: {
-      ...o.gap(c)
+      ...o.gap(g)
     }
   },
   horizontal: {
@@ -41,16 +43,17 @@ const u = g({
     }
   },
   text: {
-    backgroundColor: b,
+    ...n,
+    backgroundColor: x,
     display: "flex",
     alignItems: "center",
-    ...o.gap(c),
-    ...o.borderRadius(v),
-    ...o.border("1px", "solid", S),
-    ...o.padding(x, R),
-    fontSize: h,
-    lineHeight: f,
-    fontWeight: m,
+    ...o.gap(g),
+    ...o.borderRadius(B),
+    ...o.border("1px", "solid", v),
+    ...o.padding(R, S),
+    fontSize: b,
+    lineHeight: h,
+    fontWeight: f,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
     boxShadow: "0 1px 2px 0 #0000000d",
     "& svg": {
@@ -66,12 +69,13 @@ const u = g({
     backgroundColor: "transparent"
   },
   separatorVertical: {
+    ...n,
     height: "1px"
   }
-}), z = d.forwardRef(
+}), k = p.forwardRef(
   function({ className: r, orientation: t = "horizontal", ...e }, a) {
-    const i = u();
-    return /* @__PURE__ */ n(
+    const i = l();
+    return /* @__PURE__ */ d(
       "div",
       {
         ref: a,
@@ -79,33 +83,33 @@ const u = g({
         "data-slot": "button-group",
         [s]: "button-group",
         "data-orientation": t,
-        className: p(i.root, i[t], r),
+        className: u(i.root, i[t], r),
         ...e
       }
     );
   }
-), W = d.forwardRef(function({ className: r, ...t }, e) {
-  const a = u();
-  return /* @__PURE__ */ n(
+), A = p.forwardRef(function({ className: r, ...t }, e) {
+  const a = l();
+  return /* @__PURE__ */ d(
     "div",
     {
       ref: e,
       "data-slot": "button-group-text",
       [s]: "button-group-text",
-      className: p(a.text, r),
+      className: u(a.text, r),
       ...t
     }
   );
-}), k = d.forwardRef(function({ className: r, orientation: t = "vertical", ...e }, a) {
-  const i = u();
-  return /* @__PURE__ */ n(
-    B,
+}), C = p.forwardRef(function({ className: r, orientation: t = "vertical", ...e }, a) {
+  const i = l();
+  return /* @__PURE__ */ d(
+    T,
     {
       ref: a,
       "data-slot": "button-group-separator",
       [s]: "button-group-separator",
       orientation: t,
-      className: p(
+      className: u(
         i.separator,
         t === "vertical" && i.separatorVertical,
         r
@@ -115,8 +119,8 @@ const u = g({
   );
 });
 export {
-  z as ButtonGroup,
-  k as ButtonGroupSeparator,
-  W as ButtonGroupText
+  k as ButtonGroup,
+  C as ButtonGroupSeparator,
+  A as ButtonGroupText
 };
 //# sourceMappingURL=button-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../../src/components/button-group/button-group.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 * as tokens from \"../../tokens\"\nimport { Separator, type SeparatorProps } from \"../separator/separator\"\n\n/**\n * ButtonGroup — compound component family for grouping buttons, text, and separators. One\n * `makeZenithStyles` call for the whole family, one slot per sub-component (following `card.tsx`).\n */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"flex\",\n    width: \"fit-content\",\n    alignItems: \"stretch\",\n    \"& > *:focus-visible\": {\n      zIndex: 10,\n      position: \"relative\",\n    },\n    [`&:has(> [${SLOT_ATTR}=\"button-group\"])`]: {\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  horizontal: {\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      borderLeftWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  vertical: {\n    flexDirection: \"column\",\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderTopRightRadius: 0,\n      borderTopWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderBottomLeftRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  text: {\n    backgroundColor: tokens.grayA4,\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightMedium,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    \"& svg\": {\n      pointerEvents: \"none\",\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  separator: {\n    ...shorthands.margin(0),\n    position: \"relative\",\n    alignSelf: \"stretch\",\n    backgroundColor: \"transparent\",\n  },\n  separatorVertical: {\n    height: \"1px\",\n  },\n})\n\nexport type ButtonGroupProps = React.ComponentProps<\"div\"> & {\n  orientation?: ButtonGroupOrientation\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { className, orientation = \"horizontal\", ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"button-group\"\n        {...{ [SLOT_ATTR]: \"button-group\" }}\n        data-orientation={orientation}\n        className={mergeClasses(styles.root, styles[orientation], className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type ButtonGroupTextProps = React.ComponentProps<\"div\">\n\nexport const ButtonGroupText = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupTextProps\n>(function ButtonGroupText({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"button-group-text\"\n      {...{ [SLOT_ATTR]: \"button-group-text\" }}\n      className={mergeClasses(styles.text, className)}\n      {...props}\n    />\n  )\n})\n\nexport type ButtonGroupSeparatorProps = SeparatorProps\n\nexport const ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupSeparatorProps\n>(function ButtonGroupSeparator(\n  { className, orientation = \"vertical\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Separator\n      ref={ref}\n      data-slot=\"button-group-separator\"\n      {...{ [SLOT_ATTR]: \"button-group-separator\" }}\n      orientation={orientation}\n      className={mergeClasses(\n        styles.separator,\n        orientation === \"vertical\" && styles.separatorVertical,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","SLOT_ATTR","shorthands","tokens.spacingElement2","tokens.grayA4","tokens.radiusMd","tokens.grayA5","tokens.spacingElement3","tokens.spacingGroup2","tokens.textSm","tokens.leadingSm","tokens.fontWeightMedium","ButtonGroup","React","className","orientation","props","ref","styles","jsx","mergeClasses","ButtonGroupText","ButtonGroupSeparator","Separator"],"mappings":"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"}
+{"version":3,"file":"button-group.js","sources":["../../../src/components/button-group/button-group.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 { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { Separator, type SeparatorProps } from \"../separator/separator\"\n\n/**\n * ButtonGroup — compound component family for grouping buttons, text, and separators. One\n * `makeZenithStyles` call for the whole family, one slot per sub-component (following `card.tsx`).\n */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    display: \"flex\",\n    width: \"fit-content\",\n    alignItems: \"stretch\",\n    \"& > *:focus-visible\": {\n      zIndex: 10,\n      position: \"relative\",\n    },\n    [`&:has(> [${SLOT_ATTR}=\"button-group\"])`]: {\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  horizontal: {\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      borderLeftWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  vertical: {\n    flexDirection: \"column\",\n    \"& > *:not(:first-child)\": {\n      borderTopLeftRadius: 0,\n      borderTopRightRadius: 0,\n      borderTopWidth: 0,\n    },\n    \"& > *:not(:last-child)\": {\n      borderBottomLeftRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n  },\n  text: {\n    ...boxModel,\n    backgroundColor: tokens.grayA4,\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    fontWeight: tokens.fontWeightMedium,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    \"& svg\": {\n      pointerEvents: \"none\",\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  separator: {\n    ...shorthands.margin(0),\n    position: \"relative\",\n    alignSelf: \"stretch\",\n    backgroundColor: \"transparent\",\n  },\n  separatorVertical: {\n    ...boxModel,\n    height: \"1px\",\n  },\n})\n\nexport type ButtonGroupProps = React.ComponentProps<\"div\"> & {\n  orientation?: ButtonGroupOrientation\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  function ButtonGroup(\n    { className, orientation = \"horizontal\", ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        data-slot=\"button-group\"\n        {...{ [SLOT_ATTR]: \"button-group\" }}\n        data-orientation={orientation}\n        className={mergeClasses(styles.root, styles[orientation], className)}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type ButtonGroupTextProps = React.ComponentProps<\"div\">\n\nexport const ButtonGroupText = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupTextProps\n>(function ButtonGroupText({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"button-group-text\"\n      {...{ [SLOT_ATTR]: \"button-group-text\" }}\n      className={mergeClasses(styles.text, className)}\n      {...props}\n    />\n  )\n})\n\nexport type ButtonGroupSeparatorProps = SeparatorProps\n\nexport const ButtonGroupSeparator = React.forwardRef<\n  HTMLDivElement,\n  ButtonGroupSeparatorProps\n>(function ButtonGroupSeparator(\n  { className, orientation = \"vertical\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <Separator\n      ref={ref}\n      data-slot=\"button-group-separator\"\n      {...{ [SLOT_ATTR]: \"button-group-separator\" }}\n      orientation={orientation}\n      className={mergeClasses(\n        styles.separator,\n        orientation === \"vertical\" && styles.separatorVertical,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","SLOT_ATTR","shorthands","tokens.spacingElement2","tokens.grayA4","tokens.radiusMd","tokens.grayA5","tokens.spacingElement3","tokens.spacingGroup2","tokens.textSm","tokens.leadingSm","tokens.fontWeightMedium","ButtonGroup","React","className","orientation","props","ref","styles","jsx","mergeClasses","ButtonGroupText","ButtonGroupSeparator","Separator"],"mappings":"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"}