@epilot/volt-ui-experimental-griffel 0.1.2 → 0.2.1

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,52 +1,53 @@
 import { jsx as e, jsxs as x } from "react/jsx-runtime";
 import * as o from "react";
-import { shorthands as u } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as c } from "../../renderer/contract.js";
-import { makeVoltStyles as L } from "../../styles/make-styles.js";
-import { semGrayDefault as p, fontWeightSemibold as b, accentA8 as R, semGrayLight as f, textBase as S, spacingElement1 as B, spacingElement2 as I } from "../../tokens/index.js";
-import { Root as N } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { mergeClasses as g } from "../../node_modules/@griffel/core/src/mergeClasses.js";
-const h = L({
+import { shorthands as u } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as B } from "../../styles/make-styles.js";
+import { semGrayDefault as b, fontWeightSemibold as f, accentA8 as L, semGrayLight as g, leadingBase as R, textBase as S, spacingElement1 as I, spacingElement2 as N } from "../../tokens/index.js";
+import { Root as T } from "../../vendor/@radix-ui/react-slot/dist/index.js";
+const h = B({
   list: {
     display: "flex",
     alignItems: "center",
     // gap-2
-    ...u.gap(I),
-    fontSize: S
+    ...u.gap(N),
+    fontSize: S,
+    lineHeight: R
   },
   separator: {
-    color: f
+    color: g
   },
   item: {
     display: "inline-flex",
     alignItems: "center",
     // gap-1
-    ...u.gap(B)
+    ...u.gap(I)
   },
   link: {
-    fontWeight: b,
-    color: f,
+    fontWeight: f,
+    color: g,
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     cursor: "pointer",
     ":hover": {
-      color: p,
+      color: b,
       textDecorationLine: "underline"
     },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: R
+      outlineColor: L
     }
   },
   page: {
-    fontWeight: b,
-    color: p
+    fontWeight: f,
+    color: b
   }
-}), z = o.forwardRef(
-  function({ separator: r = "/", className: a, children: i, ...n }, s) {
+}), F = o.forwardRef(
+  function({ separator: t = "/", className: a, children: i, ...n }, s) {
     const l = h(), m = o.Children.toArray(i).filter(o.isValidElement);
     return /* @__PURE__ */ e(
       "nav",
@@ -57,29 +58,29 @@ const h = L({
         "aria-label": "Breadcrumb",
         className: a,
         ...n,
-        children: /* @__PURE__ */ e("ol", { className: l.list, children: m.map((t, d) => /* @__PURE__ */ x(o.Fragment, { children: [
+        children: /* @__PURE__ */ e("ol", { className: l.list, children: m.map((r, d) => /* @__PURE__ */ x(o.Fragment, { children: [
           d > 0 && /* @__PURE__ */ e(
             "li",
             {
               role: "presentation",
               "aria-hidden": "true",
               className: l.separator,
-              children: r
+              children: t
             }
           ),
-          t
+          r
         ] }, d)) })
       }
     );
   }
-), F = o.forwardRef(function({ href: r, isCurrent: a = !1, className: i, children: n, asChild: s = !1, ...l }, m) {
-  const t = h(), y = !!r || s ? /* @__PURE__ */ e(
-    s ? N : "a",
+), G = o.forwardRef(function({ href: t, isCurrent: a = !1, className: i, children: n, asChild: s = !1, ...l }, m) {
+  const r = h(), k = !!t || s ? /* @__PURE__ */ e(
+    s ? T : "a",
     {
       "data-slot": "breadcrumb-link",
       [c]: "breadcrumb-link",
-      ...r ? { href: r } : {},
-      className: g(t.link, i),
+      ...t ? { href: t } : {},
+      className: p(r.link, i),
       ...a ? { "aria-current": "page" } : {},
       ...l,
       children: n
@@ -89,7 +90,7 @@ const h = L({
     {
       "data-slot": "breadcrumb-page",
       [c]: "breadcrumb-page",
-      className: g(t.page, i),
+      className: p(r.page, i),
       ...a ? { "aria-current": "page" } : {},
       children: n
     }
@@ -100,13 +101,13 @@ const h = L({
       ref: m,
       "data-slot": "breadcrumb-item",
       [c]: "breadcrumb-item",
-      className: t.item,
-      children: y
+      className: r.item,
+      children: k
     }
   );
 });
 export {
-  z as Breadcrumb,
-  F as BreadcrumbItem
+  F as Breadcrumb,
+  G as BreadcrumbItem
 };
 //# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\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 * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.\n *\n * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between\n * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The\n * `nav` / `ol` / `li` semantics and the `aria-current=\"page\"` handling are the real value of this\n * component and are reproduced exactly.\n *\n * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per\n * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting\n * a non-`<a>` link anchors it themselves.\n *\n * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`\n * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav\n * itself has no base styles in v1 — it is left to the caller's className — so it carries only the\n * slot attributes.\n *\n * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is\n * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeVoltStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n  },\n  separator: {\n    color: tokens.semGrayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.semGrayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.semGrayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semGrayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsx","SLOT_ATTR","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","content","Slot","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.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 * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.\n *\n * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between\n * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The\n * `nav` / `ol` / `li` semantics and the `aria-current=\"page\"` handling are the real value of this\n * component and are reproduced exactly.\n *\n * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per\n * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting\n * a non-`<a>` link anchors it themselves.\n *\n * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`\n * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav\n * itself has no base styles in v1 — it is left to the caller's className — so it carries only the\n * slot attributes.\n *\n * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is\n * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeVoltStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  separator: {\n    color: tokens.semGrayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.semGrayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.leadingBase","tokens.semGrayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semGrayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsx","SLOT_ATTR","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","content","Slot","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 { shorthands as o } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as x } from "../../renderer/contract.js";
-import { makeVoltStyles as y } from "../../styles/make-styles.js";
-import { radiusLg as w, textLg as A, textBase as B, textSm as H, textXs as R, errorA8 as t, semErrorSoft as s, errorA11 as l, semErrorSoftHover as E, semErrorSolidHover as c, semErrorContrast as z, semErrorSolid as I, grayA8 as L, semAccentSoft as i, grayA12 as D, accentA8 as n, accentA11 as m, semAccentSoftHover as T, semAccentSolidHover as a, semAccentContrast as W, semAccentSolid as X, fontWeightSemibold as j, spacingElement3 as O } from "../../tokens/index.js";
-import { Root as N } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { mergeClasses as P } from "../../node_modules/@griffel/core/src/mergeClasses.js";
-const V = "button", _ = y({
+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 { radiusLg as A, leadingLg as H, textLg as B, leadingBase as R, textBase as E, leadingSm as L, textSm as z, leadingXs as I, textXs as D, errorA8 as t, semErrorSoft as s, errorA11 as l, semErrorSoftHover as X, semErrorSolidHover as a, semErrorContrast as T, semErrorSolid as W, grayA8 as j, semAccentSoft as i, grayA12 as O, accentA8 as n, accentA11 as c, semAccentSoftHover as N, semAccentSolidHover as m, semAccentContrast as P, semAccentSolid as Q, fontWeightSemibold as V, spacingElement3 as _ } from "../../tokens/index.js";
+import { Root as $ } from "../../vendor/@radix-ui/react-slot/dist/index.js";
+const q = "button", F = w({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    fontWeight: j,
+    fontWeight: V,
     whiteSpace: "nowrap",
     transitionProperty: "all",
     cursor: "pointer",
@@ -29,41 +29,41 @@ const V = "button", _ = y({
     }
   },
   primary: {
-    backgroundColor: X,
-    color: W,
-    ":hover": { backgroundColor: a },
-    ":active": { backgroundColor: a },
+    backgroundColor: Q,
+    color: P,
+    ":hover": { backgroundColor: m },
+    ":active": { backgroundColor: m },
     ":focus-visible": { outlineColor: n }
   },
   secondary: {
     backgroundColor: i,
-    color: m,
-    ":hover": { backgroundColor: T },
+    color: c,
+    ":hover": { backgroundColor: N },
     ":focus-visible": { outlineColor: n }
   },
   tertiary: {
     backgroundColor: "transparent",
-    color: m,
+    color: c,
     ":hover": { backgroundColor: i },
     ":focus-visible": { outlineColor: n }
   },
   ghost: {
     backgroundColor: "transparent",
-    color: D,
+    color: O,
     ":hover": { backgroundColor: i },
-    ":focus-visible": { outlineColor: L }
+    ":focus-visible": { outlineColor: j }
   },
   primaryDestructive: {
-    backgroundColor: I,
-    color: z,
-    ":hover": { backgroundColor: c },
-    ":active": { backgroundColor: c },
+    backgroundColor: W,
+    color: T,
+    ":hover": { backgroundColor: a },
+    ":active": { backgroundColor: a },
     ":focus-visible": { outlineColor: t }
   },
   secondaryDestructive: {
     backgroundColor: s,
     color: l,
-    ":hover": { backgroundColor: E },
+    ":hover": { backgroundColor: X },
     ":focus-visible": { outlineColor: t }
   },
   tertiaryDestructive: {
@@ -76,15 +76,17 @@ const V = "button", _ = y({
     ...o.paddingInline("0.5rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.25rem",
-    fontSize: R,
+    fontSize: D,
+    lineHeight: I,
     gap: "4px",
     "& svg": { width: "0.75rem", height: "0.75rem" }
   },
   sm: {
-    ...o.paddingInline(O),
+    ...o.paddingInline(_),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.5rem",
-    fontSize: H,
+    fontSize: z,
+    lineHeight: L,
     gap: "0.375rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
@@ -92,7 +94,8 @@ const V = "button", _ = y({
     ...o.paddingInline("1rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2rem",
-    fontSize: B,
+    fontSize: E,
+    lineHeight: R,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -100,7 +103,8 @@ const V = "button", _ = y({
     ...o.paddingInline("1.25rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2.5rem",
-    fontSize: A,
+    fontSize: B,
+    lineHeight: H,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -124,11 +128,11 @@ const V = "button", _ = y({
     height: "2.5rem",
     "& svg": { width: "1.5rem", height: "1.5rem" }
   },
-  normal: { borderRadius: w },
+  normal: { borderRadius: A },
   rounded: { borderRadius: "9999px" }
-}), Y = k.forwardRef(
+}), ro = k.forwardRef(
   function({
-    variant: e = "primary",
+    variant: r = "primary",
     size: g = "base",
     shape: d = "rounded",
     destructive: h = !1,
@@ -136,7 +140,7 @@ const V = "button", _ = y({
     asChild: p = !1,
     ...f
   }, b) {
-    const r = _(), v = h && e !== "ghost" ? `${e}Destructive` : e, C = {
+    const e = F(), v = h && r !== "ghost" ? `${r}Destructive` : r, C = {
       xs: "xs",
       sm: "sm",
       base: "base",
@@ -147,16 +151,16 @@ const V = "button", _ = y({
       "icon-lg": "iconLg"
     }[g];
     return /* @__PURE__ */ S(
-      p ? N : V,
+      p ? $ : q,
       {
         ref: b,
         "data-slot": "button",
-        [x]: "button",
-        className: P(
-          r.root,
-          r[v],
-          r[C],
-          r[d],
+        [y]: "button",
+        className: x(
+          e.root,
+          e[v],
+          e[C],
+          e[d],
           u
         ),
         ...f
@@ -165,6 +169,6 @@ const V = "button", _ = y({
   }
 );
 export {
-  Y as Button
+  ro 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 \"@griffel/core\"\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    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    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    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    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.spacingElement3","tokens.textSm","tokens.textBase","tokens.textLg","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    },\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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"}

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

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as p from "react";
-import { shorthands as o } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as s } from "../../renderer/contract.js";
-import { makeVoltStyles as m } from "../../styles/make-styles.js";
-import { spacingElement3 as f, spacingGroup2 as g, grayA5 as h, fontWeightMedium as b, textSm as x, grayA4 as R, radiusMd as v, spacingElement2 as c } from "../../tokens/index.js";
-import { Separator as B } from "../separator/separator.js";
-import { mergeClasses as d } from "../../node_modules/@griffel/core/src/mergeClasses.js";
-const u = m({
+import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as c } from "../../styles/make-styles.js";
+import { spacingElement3 as g, spacingGroup2 as f, grayA5 as h, fontWeightMedium as b, leadingSm as x, textSm as R, grayA4 as S, radiusMd as v, spacingElement2 as m } from "../../tokens/index.js";
+import { Separator as y } from "../separator/separator.js";
+const u = c({
   root: {
     display: "flex",
     width: "fit-content",
@@ -16,7 +16,7 @@ const u = m({
       position: "relative"
     },
     [`&:has(> [${s}="button-group"])`]: {
-      ...o.gap(c)
+      ...o.gap(m)
     }
   },
   horizontal: {
@@ -43,14 +43,15 @@ const u = m({
     }
   },
   text: {
-    backgroundColor: R,
+    backgroundColor: S,
     display: "flex",
     alignItems: "center",
-    ...o.gap(c),
+    ...o.gap(m),
     ...o.borderRadius(v),
     ...o.border("1px", "solid", h),
-    ...o.padding(f, g),
-    fontSize: x,
+    ...o.padding(g, f),
+    fontSize: R,
+    lineHeight: x,
     fontWeight: b,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
     boxShadow: "0 1px 2px 0 #0000000d",
@@ -69,7 +70,7 @@ const u = m({
   separatorVertical: {
     height: "1px"
   }
-}), W = p.forwardRef(
+}), k = p.forwardRef(
   function({ className: r, orientation: t = "horizontal", ...e }, a) {
     const i = u();
     return /* @__PURE__ */ n(
@@ -85,7 +86,7 @@ const u = m({
       }
     );
   }
-), k = p.forwardRef(function({ className: r, ...t }, e) {
+), A = p.forwardRef(function({ className: r, ...t }, e) {
   const a = u();
   return /* @__PURE__ */ n(
     "div",
@@ -97,10 +98,10 @@ const u = m({
       ...t
     }
   );
-}), A = p.forwardRef(function({ className: r, orientation: t = "vertical", ...e }, a) {
+}), C = p.forwardRef(function({ className: r, orientation: t = "vertical", ...e }, a) {
   const i = u();
   return /* @__PURE__ */ n(
-    B,
+    y,
     {
       ref: a,
       "data-slot": "button-group-separator",
@@ -116,8 +117,8 @@ const u = m({
   );
 });
 export {
-  W as ButtonGroup,
-  A as ButtonGroupSeparator,
-  k 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 \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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.\n *\n * One `makeVoltStyles` call for the whole family, one slot per sub-component (following `card.tsx`).\n *\n * No Base UI primitive is needed: v1 only used Radix `Slot` for `asChild` on `ButtonGroupText`,\n * which CONVENTIONS rule 6 drops.\n *\n * `ButtonGroup` handles both `horizontal` and `vertical` orientations, removing adjoining border\n * radius and borders on adjacent children. Sibling focus-visible elements are elevated (`z-index: 10`)\n * and made relative so focus rings are never obscured by subsequent siblings.\n *\n * Nested button groups gain a gap via a `:has()` selector keyed on `SLOT_ATTR` (never on `data-slot`,\n * per CONVENTIONS rule 4).\n *\n * `ButtonGroupText` provides a matching text container (`gray-a4`, subtle border, `shadow-xs`).\n *\n * `ButtonGroupSeparator` composes `Separator` with transparent background and stretch alignment.\n */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeVoltStyles({\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    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","makeVoltStyles","SLOT_ATTR","shorthands","tokens.spacingElement2","tokens.grayA4","tokens.radiusMd","tokens.grayA5","tokens.spacingElement3","tokens.spacingGroup2","tokens.textSm","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/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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.\n *\n * One `makeVoltStyles` call for the whole family, one slot per sub-component (following `card.tsx`).\n *\n * No Base UI primitive is needed: v1 only used Radix `Slot` for `asChild` on `ButtonGroupText`,\n * which CONVENTIONS rule 6 drops.\n *\n * `ButtonGroup` handles both `horizontal` and `vertical` orientations, removing adjoining border\n * radius and borders on adjacent children. Sibling focus-visible elements are elevated (`z-index: 10`)\n * and made relative so focus rings are never obscured by subsequent siblings.\n *\n * Nested button groups gain a gap via a `:has()` selector keyed on `SLOT_ATTR` (never on `data-slot`,\n * per CONVENTIONS rule 4).\n *\n * `ButtonGroupText` provides a matching text container (`gray-a4`, subtle border, `shadow-xs`).\n *\n * `ButtonGroupSeparator` composes `Separator` with transparent background and stretch alignment.\n */\n\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\"\n\nconst useStyles = makeVoltStyles({\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","makeVoltStyles","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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"}