@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\nif (typeof document !== \"undefined\") {\n  ensurePaletteTokens()\n}\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["ensurePaletteTokens","AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.textSm","tokens.textBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+/**
+ * REFERENCE COMPONENT — the colour-matrix collapse. Read this before writing another component
+ * that takes a `color` prop.
+ *
+ * v1 enumerates 20 colours x 3 styles as 60 `compoundVariants`, each a distinct class string like
+ * `volt-bg-mint-soft`. Because those names are built by interpolation, Tailwind's scanner cannot
+ * see them, which is what `safelist.css` exists to force — 9 lines that emit ~945 rules, 65.6 KB
+ * and 59% of v1's entire rule count. The Griffel PoC carried the same shape forward as 60 static
+ * style objects.
+ *
+ * Here the colour is a VALUE, not part of a class name. Three atoms read three custom properties;
+ * the component sets those properties inline from the `color` prop. Total rules: one small set per
+ * style variant, regardless of how many colours exist. Adding a 22nd palette family costs zero
+ * rules.
+ *
+ * Two consequences worth knowing:
+ *  - `color` may legitimately arrive from a runtime expression (`getColorForEntityLabel(label)` and
+ *    `WCAG_BADGE_MAP[level].color` both exist in consumer code today), which no build step can
+ *    resolve. That is exactly why the palette sheet cannot be statically shaken, and why this
+ *    component calls `ensurePaletteTokens()`.
+ *  - Selectors key on SLOT_ATTR, never on `data-slot`. `data-slot` values are shared with v1, so a
+ *    rule keyed on one also matches v1-rendered DOM — the StyleX track had a v1 icon compute to
+ *    0x0 through a green gate this way. `data-slot` is still emitted, purely as a diagnostic.
+ */
+declare const COLORS: readonly ["accent", "neutral", "gray", "success", "warning", "error", "info", "blue", "sky", "mint", "lime", "green", "teal", "cyan", "indigo", "purple", "pink", "red", "orange", "yellow", "bronze"];
+export type BadgeColor = (typeof COLORS)[number];
+export type BadgeVariant = "soft" | "solid" | "surface";
+export type BadgeSize = "sm" | "base" | "lg";
+export type BadgeProps = Omit<React.ComponentProps<"span">, "color"> & {
+    color?: BadgeColor;
+    /**
+     * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute
+     * and made a badge unable to take both a visual treatment and an inline style. Retrocompat is
+     * not a requirement here, so the collision is fixed rather than inherited.
+     */
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+};
+export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { COLORS as BADGE_COLORS };

package/dist/components/badge/badge.js

@@ -0,0 +1,137 @@
+import { jsx as h } from "react/jsx-runtime";
+import * as v from "react";
+import { shorthands as b } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as S } from "../../renderer/contract.js";
+import { makeVoltStyles as x } from "../../styles/make-styles.js";
+import { radiusMd as y, spacingElement3 as w, spacingElement1 as r, textBase as R, radiusSm as $, spacingElement2 as C, textSm as O, textXs as k, errorA8 as A, accentA8 as B, fontWeightNormal as T } from "../../tokens/index.js";
+import { ensurePaletteTokens as W } from "../../tokens/install.js";
+import { NS as l } from "../../tokens/core.generated.js";
+import { mergeClasses as E } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const F = [
+  "accent",
+  "neutral",
+  "gray",
+  "success",
+  "warning",
+  "error",
+  "info",
+  "blue",
+  "sky",
+  "mint",
+  "lime",
+  "green",
+  "teal",
+  "cyan",
+  "indigo",
+  "purple",
+  "pink",
+  "red",
+  "orange",
+  "yellow",
+  "bronze"
+], n = "--volt2-badge-bg", i = "--volt2-badge-fg", a = "--volt2-badge-bd", d = (e) => e === "neutral" ? "gray" : e, t = (e, o) => `var(--volt2-${l}-sem-${d(e)}-${o})`, I = (e, o) => `var(--volt2-${l}-${d(e)}-${o})`, z = {
+  soft: (e) => ({
+    [n]: t(e, "soft"),
+    [i]: t(e, "default"),
+    [a]: "transparent"
+  }),
+  solid: (e) => ({
+    [n]: t(e, "solid"),
+    [i]: t(e, "contrast"),
+    [a]: "transparent"
+  }),
+  surface: (e) => ({
+    [n]: t(e, "surface"),
+    [i]: t(e, "default"),
+    [a]: I(e, "a6")
+  })
+}, L = x({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "fit-content",
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    overflow: "hidden",
+    fontWeight: T,
+    // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a
+    // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would
+    // both survive with the winner decided by insertion order. Griffel warns at runtime, which
+    // means the mistake ships silently in production where nobody reads the console.
+    // `shorthands.*` expands to the individual longhands.
+    ...b.border("1px", "solid", `var(${a})`),
+    // The whole point: one rule each, colour supplied per instance.
+    backgroundColor: `var(${n})`,
+    color: `var(${i})`,
+    transitionProperty: "color, box-shadow",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: B
+    },
+    // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused
+    // badge paints the error ring, matching v1's variant ordering.
+    "&[aria-invalid]": {
+      outlineColor: A
+    },
+    "& > svg": { pointerEvents: "none" }
+  },
+  sm: {
+    fontSize: k,
+    lineHeight: "1rem",
+    letterSpacing: "0.04px",
+    gap: r,
+    paddingInline: r,
+    minWidth: "1rem",
+    borderRadius: "3px",
+    "& > svg": { width: "0.75rem", height: "0.75rem" }
+  },
+  base: {
+    fontSize: O,
+    lineHeight: "1.25rem",
+    gap: r,
+    paddingInline: C,
+    minWidth: "1.25rem",
+    borderRadius: $,
+    "& > svg": { width: "1rem", height: "1rem" }
+  },
+  lg: {
+    fontSize: R,
+    lineHeight: "1.5rem",
+    gap: r,
+    paddingInline: w,
+    minWidth: "1.5rem",
+    borderRadius: y,
+    "& > svg": { width: "1rem", height: "1rem" }
+  }
+}), M = v.forwardRef(
+  function({
+    className: o,
+    color: m = "accent",
+    variant: g = "soft",
+    size: p = "base",
+    style: c,
+    ...f
+  }, u) {
+    W();
+    const s = L();
+    return /* @__PURE__ */ h(
+      "span",
+      {
+        ref: u,
+        "data-slot": "badge",
+        [S]: "badge",
+        className: E(s.root, s[p], o),
+        style: { ...z[g](m), ...c },
+        ...f
+      }
+    );
+  }
+);
+export {
+  F as BADGE_COLORS,
+  M as Badge
+};
+//# sourceMappingURL=badge.js.map

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

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

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+/**
+ * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.
+ *
+ * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between
+ * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The
+ * `nav` / `ol` / `li` semantics and the `aria-current="page"` handling are the real value of this
+ * component and are reproduced exactly.
+ *
+ * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per
+ * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting
+ * a non-`<a>` link anchors it themselves.
+ *
+ * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`
+ * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav
+ * itself has no base styles in v1 — it is left to the caller's className — so it carries only the
+ * slot attributes.
+ *
+ * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms
+ * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is
+ * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).
+ */
+export type BreadcrumbProps = React.ComponentProps<"nav"> & {
+    separator?: React.ReactNode;
+};
+export declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<BreadcrumbProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export type BreadcrumbItemProps = Omit<React.ComponentProps<"a">, "href"> & {
+    href?: string;
+    isCurrent?: boolean;
+};
+export declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,111 @@
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import * as t 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 x } from "../../styles/make-styles.js";
+import { semGrayDefault as p, fontWeightSemibold as b, accentA8 as B, semGrayLight as f, textBase as S, spacingElement1 as L, spacingElement2 as I } from "../../tokens/index.js";
+import { mergeClasses as g } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const h = x({
+  list: {
+    display: "flex",
+    alignItems: "center",
+    // gap-2
+    ...u.gap(I),
+    fontSize: S
+  },
+  separator: {
+    color: f
+  },
+  item: {
+    display: "inline-flex",
+    alignItems: "center",
+    // gap-1
+    ...u.gap(L)
+  },
+  link: {
+    fontWeight: b,
+    color: f,
+    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,
+      textDecorationLine: "underline"
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: B
+    }
+  },
+  page: {
+    fontWeight: b,
+    color: p
+  }
+}), D = t.forwardRef(
+  function({ separator: o = "/", className: a, children: i, ...n }, m) {
+    const l = h(), r = t.Children.toArray(i).filter(t.isValidElement);
+    return /* @__PURE__ */ e(
+      "nav",
+      {
+        ref: m,
+        "data-slot": "breadcrumb",
+        [c]: "breadcrumb",
+        "aria-label": "Breadcrumb",
+        className: a,
+        ...n,
+        children: /* @__PURE__ */ e("ol", { className: l.list, children: r.map((d, s) => /* @__PURE__ */ k(t.Fragment, { children: [
+          s > 0 && /* @__PURE__ */ e(
+            "li",
+            {
+              role: "presentation",
+              "aria-hidden": "true",
+              className: l.separator,
+              children: o
+            }
+          ),
+          d
+        ] }, s)) })
+      }
+    );
+  }
+), E = t.forwardRef(function({ href: o, isCurrent: a = !1, className: i, children: n, ...m }, l) {
+  const r = h(), s = !!o ? /* @__PURE__ */ e(
+    "a",
+    {
+      "data-slot": "breadcrumb-link",
+      [c]: "breadcrumb-link",
+      href: o,
+      className: g(r.link, i),
+      ...a ? { "aria-current": "page" } : {},
+      ...m,
+      children: n
+    }
+  ) : /* @__PURE__ */ e(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      [c]: "breadcrumb-page",
+      className: g(r.page, i),
+      ...a ? { "aria-current": "page" } : {},
+      children: n
+    }
+  );
+  return /* @__PURE__ */ e(
+    "li",
+    {
+      ref: l,
+      "data-slot": "breadcrumb-item",
+      [c]: "breadcrumb-item",
+      className: r.item,
+      children: s
+    }
+  );
+});
+export {
+  D as Breadcrumb,
+  E as BreadcrumbItem
+};
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +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\"\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\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const content = isLink ? (\n    <a\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    </a>\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","content","mergeClasses"],"mappings":"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"}

package/dist/components/button/button.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "ghost";
+export type ButtonSize = "xs" | "sm" | "base" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg";
+export type ButtonShape = "normal" | "rounded";
+export type ButtonProps = Omit<React.ComponentProps<"button">, "variant" | "size" | "shape" | "destructive" | "className" | "render"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    destructive?: boolean;
+    className?: string;
+};
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.js

@@ -0,0 +1,168 @@
+import { jsx as C } from "react/jsx-runtime";
+import * as S from "react";
+import { shorthands as o } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as k } from "../../renderer/contract.js";
+import { makeVoltStyles as x } from "../../styles/make-styles.js";
+import { radiusLg as y, textLg as w, textBase as A, textSm as B, textXs as H, 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 R, accentA8 as n, accentA11 as m, semAccentSoftHover as D, semAccentSolidHover as a, semAccentContrast as T, semAccentSolid as W, fontWeightSemibold as X, spacingElement3 as j } from "../../tokens/index.js";
+import { mergeClasses as O } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const N = "button", P = x({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: X,
+    whiteSpace: "nowrap",
+    transitionProperty: "all",
+    cursor: "pointer",
+    flexShrink: 0,
+    ":disabled": { opacity: 0.5 },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px"
+    },
+    "& svg": {
+      flexShrink: 0,
+      pointerEvents: "none",
+      color: "currentColor"
+    }
+  },
+  primary: {
+    backgroundColor: W,
+    color: T,
+    ":hover": { backgroundColor: a },
+    ":active": { backgroundColor: a },
+    ":focus-visible": { outlineColor: n }
+  },
+  secondary: {
+    backgroundColor: i,
+    color: m,
+    ":hover": { backgroundColor: D },
+    ":focus-visible": { outlineColor: n }
+  },
+  tertiary: {
+    backgroundColor: "transparent",
+    color: m,
+    ":hover": { backgroundColor: i },
+    ":focus-visible": { outlineColor: n }
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    color: R,
+    ":hover": { backgroundColor: i },
+    ":focus-visible": { outlineColor: L }
+  },
+  primaryDestructive: {
+    backgroundColor: I,
+    color: z,
+    ":hover": { backgroundColor: c },
+    ":active": { backgroundColor: c },
+    ":focus-visible": { outlineColor: t }
+  },
+  secondaryDestructive: {
+    backgroundColor: s,
+    color: l,
+    ":hover": { backgroundColor: E },
+    ":focus-visible": { outlineColor: t }
+  },
+  tertiaryDestructive: {
+    backgroundColor: "transparent",
+    color: l,
+    ":hover": { backgroundColor: s },
+    ":focus-visible": { outlineColor: t }
+  },
+  xs: {
+    ...o.paddingInline("0.5rem"),
+    ...o.paddingBlock("0.25rem"),
+    minHeight: "1.25rem",
+    fontSize: H,
+    gap: "4px",
+    "& svg": { width: "0.75rem", height: "0.75rem" }
+  },
+  sm: {
+    ...o.paddingInline(j),
+    ...o.paddingBlock("0.25rem"),
+    minHeight: "1.5rem",
+    fontSize: B,
+    gap: "0.375rem",
+    "& svg": { width: "0.875rem", height: "0.875rem" }
+  },
+  base: {
+    ...o.paddingInline("1rem"),
+    ...o.paddingBlock("0.25rem"),
+    minHeight: "2rem",
+    fontSize: A,
+    gap: "0.5rem",
+    "& svg": { width: "1rem", height: "1rem" }
+  },
+  lg: {
+    ...o.paddingInline("1.25rem"),
+    ...o.paddingBlock("0.25rem"),
+    minHeight: "2.5rem",
+    fontSize: w,
+    gap: "0.5rem",
+    "& svg": { width: "1rem", height: "1rem" }
+  },
+  iconXs: {
+    width: "1.5rem",
+    height: "1.5rem",
+    "& svg": { width: "0.75rem", height: "0.75rem" }
+  },
+  iconSm: {
+    width: "1.75rem",
+    height: "1.75rem",
+    "& svg": { width: "0.875rem", height: "0.875rem" }
+  },
+  icon: {
+    width: "2rem",
+    height: "2rem",
+    "& svg": { width: "1.125rem", height: "1.125rem" }
+  },
+  iconLg: {
+    width: "2.5rem",
+    height: "2.5rem",
+    "& svg": { width: "1.5rem", height: "1.5rem" }
+  },
+  normal: { borderRadius: y },
+  rounded: { borderRadius: "9999px" }
+}), K = S.forwardRef(
+  function({
+    variant: e = "primary",
+    size: g = "base",
+    shape: d = "rounded",
+    destructive: h = !1,
+    className: u,
+    ...p
+  }, b) {
+    const r = P(), f = h && e !== "ghost" ? `${e}Destructive` : e, v = {
+      xs: "xs",
+      sm: "sm",
+      base: "base",
+      lg: "lg",
+      "icon-xs": "iconXs",
+      "icon-sm": "iconSm",
+      icon: "icon",
+      "icon-lg": "iconLg"
+    }[g];
+    return /* @__PURE__ */ C(
+      N,
+      {
+        ref: b,
+        "data-slot": "button",
+        [k]: "button",
+        className: O(
+          r.root,
+          r[f],
+          r[v],
+          r[d],
+          u
+        ),
+        ...p
+      }
+    );
+  }
+);
+export {
+  K as Button
+};
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +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\"\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 v2 dropped `asChild`\n * deliberately. Base UI's button primitive was therefore supplying nothing v1 had: it added a\n * dependency, and with it the `@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\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      ...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    return (\n      <ButtonBase\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","props","ref","styles","variantSlot","sizeSlot","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { type SeparatorProps } from "../separator/separator";
+/**
+ * ButtonGroup — compound component family for grouping buttons, text, and separators.
+ *
+ * One `makeVoltStyles` call for the whole family, one slot per sub-component (following `card.tsx`).
+ *
+ * No Base UI primitive is needed: v1 only used Radix `Slot` for `asChild` on `ButtonGroupText`,
+ * which CONVENTIONS rule 6 drops.
+ *
+ * `ButtonGroup` handles both `horizontal` and `vertical` orientations, removing adjoining border
+ * radius and borders on adjacent children. Sibling focus-visible elements are elevated (`z-index: 10`)
+ * and made relative so focus rings are never obscured by subsequent siblings.
+ *
+ * Nested button groups gain a gap via a `:has()` selector keyed on `SLOT_ATTR` (never on `data-slot`,
+ * per CONVENTIONS rule 4).
+ *
+ * `ButtonGroupText` provides a matching text container (`gray-a4`, subtle border, `shadow-xs`).
+ *
+ * `ButtonGroupSeparator` composes `Separator` with transparent background and stretch alignment.
+ */
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupProps = React.ComponentProps<"div"> & {
+    orientation?: ButtonGroupOrientation;
+};
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ButtonGroupTextProps = React.ComponentProps<"div">;
+export declare const ButtonGroupText: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ButtonGroupSeparatorProps = SeparatorProps;
+export declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;