@epilot/volt-ui-experimental-griffel 0.1.1 → 0.2.0

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":";;;;;;;;AA+BA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,uBAAuB;AAAA,MACrB,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,IAEZ,CAAC,YAAYC,CAAS,mBAAmB,GAAG;AAAA,MAC1C,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IAAA;AAAA,EAC1C;AAAA,EAEF,YAAY;AAAA,IACV,2BAA2B;AAAA,MACzB,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,0BAA0B;AAAA,MACxB,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,UAAU;AAAA,IACR,eAAe;AAAA,IACf,2BAA2B;AAAA,MACzB,qBAAqB;AAAA,MACrB,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,IAAA;AAAA,IAElB,0BAA0B;AAAA,MACxB,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,MAAM;AAAA,IACJ,iBAAiBC;AAAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGF,EAAW,IAAIC,CAAsB;AAAA,IACxC,GAAGD,EAAW,aAAaG,CAAe;AAAA,IAC1C,GAAGH,EAAW,OAAO,OAAO,SAASI,CAAa;AAAA,IAClD,GAAGJ,EAAW,QAAQK,GAAwBC,CAAoB;AAAA,IAClE,UAAUC;AAAAA,IACV,YAAYC;AAAAA;AAAAA,IAEZ,WAAW;AAAA,IACX,SAAS;AAAA,MACP,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,WAAW;AAAA,IACT,GAAGR,EAAW,OAAO,CAAC;AAAA,IACtB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,iBAAiB;AAAA,EAAA;AAAA,EAEnB,mBAAmB;AAAA,IACjB,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAMYS,IAAcC,EAAM;AAAA,EAC/B,SACE,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,GAAGC,EAAA,GAC5CC,GACA;AACA,UAAMC,IAASlB,EAAA;AAEf,WACE,gBAAAmB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,MAAK;AAAA,QACL,aAAU;AAAA,QACJ,CAACf,CAAS,GAAG;AAAA,QACnB,oBAAkBa;AAAA,QAClB,WAAWK,EAAaF,EAAO,MAAMA,EAAOH,CAAW,GAAGD,CAAS;AAAA,QAClE,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF,GAIaK,IAAkBR,EAAM,WAGnC,SAAyB,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,GAAK;AACvD,QAAMC,IAASlB,EAAA;AAEf,SACE,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACf,CAAS,GAAG;AAAA,MACnB,WAAWkB,EAAaF,EAAO,MAAMJ,CAAS;AAAA,MAC7C,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAIYM,IAAuBT,EAAM,WAGxC,SACA,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAC1CC,GACA;AACA,QAAMC,IAASlB,EAAA;AAEf,SACE,gBAAAmB;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,aAAU;AAAA,MACJ,CAACf,CAAS,GAAG;AAAA,MACnB,aAAAa;AAAA,MACA,WAAWK;AAAA,QACTF,EAAO;AAAA,QACPH,MAAgB,cAAcG,EAAO;AAAA,QACrCJ;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"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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"}