@epilot/zenith-react 0.1.0-next.0

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,111 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import * as o from "react";
+import { SLOT_ATTR as c, mergeClasses as u, shorthands as b } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as B } from "../../styles/make-styles.js";
+import { semGrayDefault as p, 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/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
+const h = B({
+  list: {
+    display: "flex",
+    alignItems: "center",
+    // gap-2
+    ...b.gap(N),
+    fontSize: S,
+    lineHeight: R
+  },
+  separator: {
+    color: g
+  },
+  item: {
+    display: "inline-flex",
+    alignItems: "center",
+    // gap-1
+    ...b.gap(I)
+  },
+  link: {
+    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,
+      textDecorationLine: "underline"
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: L
+    }
+  },
+  page: {
+    fontWeight: f,
+    color: p
+  }
+}), w = 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",
+      {
+        ref: s,
+        "data-slot": "breadcrumb",
+        [c]: "breadcrumb",
+        "aria-label": "Breadcrumb",
+        className: a,
+        ...n,
+        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: t
+            }
+          ),
+          r
+        ] }, d)) })
+      }
+    );
+  }
+), z = o.forwardRef(function({ href: t, isCurrent: a = !1, className: i, children: n, asChild: s = !1, ...l }, m) {
+  const r = h(), y = !!t || s ? /* @__PURE__ */ e(
+    s ? T : "a",
+    {
+      "data-slot": "breadcrumb-link",
+      [c]: "breadcrumb-link",
+      ...t ? { href: t } : {},
+      className: u(r.link, i),
+      ...a ? { "aria-current": "page" } : {},
+      ...l,
+      children: n
+    }
+  ) : /* @__PURE__ */ e(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      [c]: "breadcrumb-page",
+      className: u(r.page, i),
+      ...a ? { "aria-current": "page" } : {},
+      children: n
+    }
+  );
+  return /* @__PURE__ */ e(
+    "li",
+    {
+      ref: m,
+      "data-slot": "breadcrumb-item",
+      [c]: "breadcrumb-item",
+      className: r.item,
+      children: y
+    }
+  );
+});
+export {
+  w as Breadcrumb,
+  z 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 \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } 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 = makeZenithStyles({\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","makeZenithStyles","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

@@ -0,0 +1,221 @@
+import { jsx as b } from "react/jsx-runtime";
+import * as s from "react";
+import { mergeClasses as w, SLOT_ATTR as B, shorthands as n } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as H } from "../../styles/make-styles.js";
+import { capTrim as E } from "../../styles/text-box.js";
+import { radiusLg as A, buttonIconSize as g, leadingLg as R, textLg as I, leadingBase as z, textBase as L, buttonBaseMinHeight as O, leadingSm as T, textSm as D, leadingXs as P, textXs as X, semErrorSoft as h, errorA11 as $, semErrorSoftHover as V, semErrorOnSoft as W, semErrorSolidHover as u, semErrorContrast as j, semErrorSolid as F, semAccentSoft as d, grayA12 as M, accentA11 as N, semAccentSoftHover as K, semAccentOnSoft as Z, semAccentSolidHover as p, semAccentContrast as _, semAccentSolid as q, semFocusRing as G, fontWeightSemibold as J, buttonBasePaddingInline as Q, spacingElement3 as U } from "../../tokens/index.js";
+import { Root as Y } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
+const ee = "button", oe = H({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: J,
+    whiteSpace: "nowrap",
+    transitionProperty: "all",
+    cursor: "pointer",
+    flexShrink: 0,
+    // Disabled keeps pointer events so a Tooltip can still explain why, but shows none of the
+    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.
+    ":disabled": { opacity: 0.5, cursor: "not-allowed" },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: G
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    "& svg": {
+      flexShrink: 0,
+      pointerEvents: "none",
+      color: "currentColor"
+    }
+  },
+  label: E,
+  primary: {
+    backgroundColor: q,
+    color: _,
+    ":hover:not(:disabled)": { backgroundColor: p },
+    ":active:not(:disabled)": { backgroundColor: p }
+  },
+  secondary: {
+    backgroundColor: d,
+    color: Z,
+    ":hover:not(:disabled)": { backgroundColor: K }
+  },
+  tertiary: {
+    backgroundColor: "transparent",
+    color: N,
+    ":hover:not(:disabled)": { backgroundColor: d }
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    color: M,
+    ":hover:not(:disabled)": { backgroundColor: d }
+  },
+  primaryDestructive: {
+    backgroundColor: F,
+    color: j,
+    ":hover:not(:disabled)": { backgroundColor: u },
+    ":active:not(:disabled)": { backgroundColor: u }
+  },
+  secondaryDestructive: {
+    backgroundColor: h,
+    color: W,
+    ":hover:not(:disabled)": { backgroundColor: V }
+  },
+  tertiaryDestructive: {
+    backgroundColor: "transparent",
+    color: $,
+    ":hover:not(:disabled)": { backgroundColor: h }
+  },
+  xs: {
+    ...n.paddingInline("0.5rem"),
+    ...n.paddingBlock("0.25rem"),
+    // Cap trimming removes the line-height's leading from direct text. Keep the established
+    // 24px control geometry explicitly instead of relying on that incidental text height.
+    minHeight: "1.5rem",
+    fontSize: X,
+    lineHeight: P,
+    gap: "4px",
+    "& svg": { width: "0.75rem", height: "0.75rem" }
+  },
+  sm: {
+    ...n.paddingInline(U),
+    ...n.paddingBlock("0.25rem"),
+    // As above, the fixed 28px size is part of Button's contract, independent of its label box.
+    minHeight: "1.75rem",
+    fontSize: D,
+    lineHeight: T,
+    gap: "0.375rem",
+    "& svg": { width: "0.875rem", height: "0.875rem" }
+  },
+  base: {
+    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the
+    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block
+    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an
+    // explicit minHeight above the natural content box, same mechanism `lg` already uses).
+    ...n.paddingInline(Q),
+    ...n.paddingBlock("0.25rem"),
+    minHeight: O,
+    fontSize: L,
+    lineHeight: z,
+    gap: "0.5rem",
+    "& svg": { width: "1rem", height: "1rem" }
+  },
+  lg: {
+    ...n.paddingInline("1.25rem"),
+    ...n.paddingBlock("0.25rem"),
+    minHeight: "2.5rem",
+    fontSize: I,
+    lineHeight: R,
+    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: {
+    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable
+    // both move freely (DENSITY-SPEC.md §2.4).
+    width: g,
+    height: g,
+    "& svg": { width: "1.125rem", height: "1.125rem" }
+  },
+  iconLg: {
+    width: "2.5rem",
+    height: "2.5rem",
+    "& svg": { width: "1.5rem", height: "1.5rem" }
+  },
+  normal: { borderRadius: A },
+  rounded: { borderRadius: "9999px" }
+});
+function f(c, i = "button") {
+  return s.Children.toArray(c).flatMap((e, t) => {
+    const l = s.isValidElement(e) && e.key !== null ? String(e.key) : String(t), o = `${i}/${l}`;
+    return s.isValidElement(e) && e.type === s.Fragment ? f(e.props.children, o) : [{ node: e, keyPath: o }];
+  });
+}
+function te(c, i) {
+  const e = [];
+  let t = [];
+  const l = () => {
+    if (!t.length) return;
+    t.every(
+      ({ node: r }) => typeof r == "string" && r.trim() === ""
+    ) ? e.push(...t.map(({ node: r }) => r)) : e.push(
+      /* @__PURE__ */ b(
+        "span",
+        {
+          "data-slot": "button-label",
+          className: i,
+          children: t.map(({ node: r }) => r)
+        },
+        `button-label:${t[0].keyPath}`
+      )
+    ), t = [];
+  };
+  for (const o of f(c)) {
+    if (typeof o.node == "string" || typeof o.node == "number") {
+      t.push(o);
+      continue;
+    }
+    l(), e.push(
+      s.isValidElement(o.node) ? s.cloneElement(o.node, { key: o.keyPath }) : o.node
+    );
+  }
+  return l(), e;
+}
+const ce = s.forwardRef(
+  function({
+    variant: i = "primary",
+    size: e = "base",
+    shape: t = "rounded",
+    destructive: l = !1,
+    className: o,
+    asChild: r = !1,
+    children: m,
+    ...S
+  }, y) {
+    const a = oe(), k = l && i !== "ghost" ? `${i}Destructive` : i, v = {
+      xs: "xs",
+      sm: "sm",
+      base: "base",
+      lg: "lg",
+      "icon-xs": "iconXs",
+      "icon-sm": "iconSm",
+      icon: "icon",
+      "icon-lg": "iconLg"
+    }[e], C = r ? Y : ee, x = r ? m : te(m, a.label);
+    return /* @__PURE__ */ b(
+      C,
+      {
+        ref: y,
+        "data-slot": "button",
+        [B]: "button",
+        className: w(
+          a.root,
+          a[k],
+          a[v],
+          a[t],
+          o
+        ),
+        ...S,
+        children: x
+      }
+    );
+  }
+);
+export {
+  ce 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 \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { capTrim } from \"../../styles/text-box\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Base UI's type declarations resolve `react` from the hoisted root's `@types/react` (v19), while\n * this package pins `@types/react` 18 in its own node_modules. Re-typing the primitive onto OUR\n * `React` keeps the button's pass-through props and ref on one React type for this package.\n */\n/**\n * A native `<button>`, no primitive.\n *\n * v1's only Radix use here is `Slot`, purely to implement `asChild`, and this does the same. Base\n * UI's button primitive supplied nothing v1 had: it added a dependency, and with it the\n * `@types/react` 19 requirement, for a plain element.\n */\nconst ButtonBase = \"button\" as const\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontWeight: tokens.fontWeightSemibold,\n    whiteSpace: \"nowrap\",\n    transitionProperty: \"all\",\n    cursor: \"pointer\",\n    flexShrink: 0,\n    // Disabled keeps pointer events so a Tooltip can still explain why, but shows none of the\n    // hover or press feedback (every variant guards those with `:not(:disabled)`) and no pointer.\n    \":disabled\": { opacity: 0.5, cursor: \"not-allowed\" },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  label: capTrim,\n  primary: {\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semAccentSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.semAccentSolidHover },\n  },\n  secondary: {\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semAccentSoftHover },\n  },\n  tertiary: {\n    backgroundColor: \"transparent\",\n    color: tokens.accentA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semAccentSoft },\n  },\n  ghost: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semAccentSoft },\n  },\n  primaryDestructive: {\n    backgroundColor: tokens.semErrorSolid,\n    color: tokens.semErrorContrast,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semErrorSolidHover },\n    \":active:not(:disabled)\": { backgroundColor: tokens.semErrorSolidHover },\n  },\n  secondaryDestructive: {\n    backgroundColor: tokens.semErrorSoft,\n    color: tokens.semErrorOnSoft,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semErrorSoftHover },\n  },\n  tertiaryDestructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorA11,\n    \":hover:not(:disabled)\": { backgroundColor: tokens.semErrorSoft },\n  },\n  xs: {\n    ...shorthands.paddingInline(\"0.5rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // Cap trimming removes the line-height's leading from direct text. Keep the established\n    // 24px control geometry explicitly instead of relying on that incidental text height.\n    minHeight: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    gap: \"4px\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  sm: {\n    ...shorthands.paddingInline(tokens.spacingElement3),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    // As above, the fixed 28px size is part of Button's contract, independent of its label box.\n    minHeight: \"1.75rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    gap: \"0.375rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  base: {\n    // Density-bound (DENSITY-SPEC.md §2.4, WP9B1-ACCEPTANCE-WP9B2A): padding-inline is the\n    // compact/comfortable lever; min-height is floored by the fixed line-height + padding-block\n    // below and cannot shrink, so it is bound too (compact === normal, comfortable raised via an\n    // explicit minHeight above the natural content box, same mechanism `lg` already uses).\n    ...shorthands.paddingInline(tokens.buttonBasePaddingInline),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: tokens.buttonBaseMinHeight,\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  lg: {\n    ...shorthands.paddingInline(\"1.25rem\"),\n    ...shorthands.paddingBlock(\"0.25rem\"),\n    minHeight: \"2.5rem\",\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    gap: \"0.5rem\",\n    \"& svg\": { width: \"1rem\", height: \"1rem\" },\n  },\n  iconXs: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.75rem\", height: \"0.75rem\" },\n  },\n  iconSm: {\n    width: \"1.75rem\",\n    height: \"1.75rem\",\n    \"& svg\": { width: \"0.875rem\", height: \"0.875rem\" },\n  },\n  icon: {\n    // Density-bound: a fixed square, no line-height floor (unlike `base`), so compact/comfortable\n    // both move freely (DENSITY-SPEC.md §2.4).\n    width: tokens.buttonIconSize,\n    height: tokens.buttonIconSize,\n    \"& svg\": { width: \"1.125rem\", height: \"1.125rem\" },\n  },\n  iconLg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    \"& svg\": { width: \"1.5rem\", height: \"1.5rem\" },\n  },\n  normal: { borderRadius: tokens.radiusLg },\n  rounded: { borderRadius: \"9999px\" },\n})\n\ntype FlatButtonChild = {\n  node: React.ReactNode\n  keyPath: string\n}\n\n/**\n * Fragments do not create boxes, so flatten them to the same leaf order the flex container sees.\n * React.Children.toArray handles nested arrays and gives keyed elements a stable local key; the\n * parent fragment path keeps equal keys from separate fragment scopes distinct.\n */\nfunction flattenButtonChildren(\n  children: React.ReactNode,\n  parentPath = \"button\"\n): FlatButtonChild[] {\n  return React.Children.toArray(children).flatMap((node, index) => {\n    const localKey =\n      React.isValidElement(node) && node.key !== null\n        ? String(node.key)\n        : String(index)\n    const keyPath = `${parentPath}/${localKey}`\n\n    if (\n      React.isValidElement<{ children?: React.ReactNode }>(node) &&\n      node.type === React.Fragment\n    ) {\n      return flattenButtonChildren(node.props.children, keyPath)\n    }\n\n    return [{ node, keyPath }]\n  })\n}\n\n/**\n * A flex container's direct text becomes an anonymous flex item, which `text-box` cannot select.\n * Recreate exactly those contiguous text runs as real label boxes. Consumer elements stay direct\n * children and whitespace-only runs stay raw, preserving today's element order and flex gaps.\n */\nfunction wrapButtonTextRuns(\n  children: React.ReactNode,\n  labelClassName: string\n): React.ReactNode[] {\n  const output: React.ReactNode[] = []\n  let textRun: FlatButtonChild[] = []\n\n  const flushTextRun = () => {\n    if (!textRun.length) return\n\n    const whitespaceOnly = textRun.every(\n      ({ node }) => typeof node === \"string\" && node.trim() === \"\"\n    )\n    if (whitespaceOnly) {\n      output.push(...textRun.map(({ node }) => node))\n    } else {\n      output.push(\n        <span\n          key={`button-label:${textRun[0].keyPath}`}\n          data-slot=\"button-label\"\n          className={labelClassName}\n        >\n          {textRun.map(({ node }) => node)}\n        </span>\n      )\n    }\n    textRun = []\n  }\n\n  for (const child of flattenButtonChildren(children)) {\n    if (typeof child.node === \"string\" || typeof child.node === \"number\") {\n      textRun.push(child)\n      continue\n    }\n\n    flushTextRun()\n    output.push(\n      React.isValidElement(child.node)\n        ? React.cloneElement(child.node, { key: child.keyPath })\n        : child.node\n    )\n  }\n  flushTextRun()\n\n  return output\n}\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\"\nexport type ButtonSize =\n  \"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon-xs\" | \"icon-sm\" | \"icon\" | \"icon-lg\"\nexport type ButtonShape = \"normal\" | \"rounded\"\n\nexport type ButtonProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"variant\" | \"size\" | \"shape\" | \"destructive\" | \"className\" | \"render\"\n> & {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  shape?: ButtonShape\n  destructive?: boolean\n  className?: string\n  /**\n   * Render the child element instead of a `button`, keeping Button's styling and slot markers.\n   * v1 supports this and consumers rely on it to wrap links; it was dropped here while the package\n   * was briefly on Base UI, and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      variant = \"primary\",\n      size = \"base\",\n      shape = \"rounded\",\n      destructive = false,\n      className,\n      asChild = false,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const variantSlot:\n      | ButtonVariant\n      | \"primaryDestructive\"\n      | \"secondaryDestructive\"\n      | \"tertiaryDestructive\" =\n      destructive && variant !== \"ghost\"\n        ? (`${variant}Destructive` as\n            | \"primaryDestructive\"\n            | \"secondaryDestructive\"\n            | \"tertiaryDestructive\")\n        : variant\n    const sizeSlot:\n      \"xs\" | \"sm\" | \"base\" | \"lg\" | \"iconXs\" | \"iconSm\" | \"icon\" | \"iconLg\" = (\n      {\n        xs: \"xs\",\n        sm: \"sm\",\n        base: \"base\",\n        lg: \"lg\",\n        \"icon-xs\": \"iconXs\",\n        \"icon-sm\": \"iconSm\",\n        icon: \"icon\",\n        \"icon-lg\": \"iconLg\",\n      } as const\n    )[size]\n\n    const Root = asChild ? Slot : ButtonBase\n    const content = asChild\n      ? children\n      : wrapButtonTextRuns(children, styles.label)\n\n    return (\n      <Root\n        ref={ref}\n        data-slot=\"button\"\n        {...{ [SLOT_ATTR]: \"button\" }}\n        className={mergeClasses(\n          styles.root,\n          styles[variantSlot],\n          styles[sizeSlot],\n          styles[shape],\n          className\n        )}\n        {...props}\n      >\n        {content}\n      </Root>\n    )\n  }\n)\n"],"names":["ButtonBase","useStyles","makeZenithStyles","tokens.fontWeightSemibold","tokens.semFocusRing","capTrim","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","tokens.semAccentSoft","tokens.semAccentOnSoft","tokens.semAccentSoftHover","tokens.accentA11","tokens.grayA12","tokens.semErrorSolid","tokens.semErrorContrast","tokens.semErrorSolidHover","tokens.semErrorSoft","tokens.semErrorOnSoft","tokens.semErrorSoftHover","tokens.errorA11","shorthands","tokens.textXs","tokens.leadingXs","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.buttonBasePaddingInline","tokens.buttonBaseMinHeight","tokens.textBase","tokens.leadingBase","tokens.textLg","tokens.leadingLg","tokens.buttonIconSize","tokens.radiusLg","flattenButtonChildren","children","parentPath","React","node","index","localKey","keyPath","wrapButtonTextRuns","labelClassName","output","textRun","flushTextRun","jsx","child","Button","variant","size","shape","destructive","className","asChild","props","ref","styles","variantSlot","sizeSlot","Root","Slot","content","SLOT_ATTR","mergeClasses"],"mappings":"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"}

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

@@ -0,0 +1,122 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as d from "react";
+import { mergeClasses as p, SLOT_ATTR as s, shorthands as o } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as g } from "../../styles/make-styles.js";
+import { fontWeightMedium as m, leadingSm as f, textSm as h, grayA4 as b, spacingElement3 as x, spacingGroup2 as R, grayA5 as S, radiusMd as v, spacingElement2 as c } from "../../tokens/index.js";
+import { Separator as B } from "../separator/separator.js";
+const u = g({
+  root: {
+    display: "flex",
+    width: "fit-content",
+    alignItems: "stretch",
+    "& > *:focus-visible": {
+      zIndex: 10,
+      position: "relative"
+    },
+    [`&:has(> [${s}="button-group"])`]: {
+      ...o.gap(c)
+    }
+  },
+  horizontal: {
+    "& > *:not(:first-child)": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeftWidth: 0
+    },
+    "& > *:not(:last-child)": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  },
+  vertical: {
+    flexDirection: "column",
+    "& > *:not(:first-child)": {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      borderTopWidth: 0
+    },
+    "& > *:not(:last-child)": {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  },
+  text: {
+    backgroundColor: b,
+    display: "flex",
+    alignItems: "center",
+    ...o.gap(c),
+    ...o.borderRadius(v),
+    ...o.border("1px", "solid", S),
+    ...o.padding(x, R),
+    fontSize: h,
+    lineHeight: f,
+    fontWeight: m,
+    // Tailwind `shadow-xs` — literal per CONVENTIONS B7
+    boxShadow: "0 1px 2px 0 #0000000d",
+    "& svg": {
+      pointerEvents: "none",
+      width: "1rem",
+      height: "1rem"
+    }
+  },
+  separator: {
+    ...o.margin(0),
+    position: "relative",
+    alignSelf: "stretch",
+    backgroundColor: "transparent"
+  },
+  separatorVertical: {
+    height: "1px"
+  }
+}), z = d.forwardRef(
+  function({ className: r, orientation: t = "horizontal", ...e }, a) {
+    const i = u();
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: a,
+        role: "group",
+        "data-slot": "button-group",
+        [s]: "button-group",
+        "data-orientation": t,
+        className: p(i.root, i[t], r),
+        ...e
+      }
+    );
+  }
+), W = d.forwardRef(function({ className: r, ...t }, e) {
+  const a = u();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: e,
+      "data-slot": "button-group-text",
+      [s]: "button-group-text",
+      className: p(a.text, r),
+      ...t
+    }
+  );
+}), k = d.forwardRef(function({ className: r, orientation: t = "vertical", ...e }, a) {
+  const i = u();
+  return /* @__PURE__ */ n(
+    B,
+    {
+      ref: a,
+      "data-slot": "button-group-separator",
+      [s]: "button-group-separator",
+      orientation: t,
+      className: p(
+        i.separator,
+        t === "vertical" && i.separatorVertical,
+        r
+      ),
+      ...e
+    }
+  );
+});
+export {
+  z as ButtonGroup,
+  k as ButtonGroupSeparator,
+  W as ButtonGroupText
+};
+//# sourceMappingURL=button-group.js.map

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

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