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

package/README.md

@@ -59,6 +59,29 @@ last-one-wins collision.
 Tree-shaking is real and worth relying on — `Text` alone is 15.5k gzip against 172.4k for every
 export, an 11× spread. v1 has no such spread; it ships everything either way.
 
+## Importing tokens in React
+
+Import token bindings from the `/tokens` subpath, not the `tokens` namespace on the package root:
+
+```js
+import { accent9, gray11 } from "@epilot/volt-ui-experimental-griffel/tokens" // shakes
+import { tokens } from "@epilot/volt-ui-experimental-griffel" // does not
+```
+
+A namespace object cannot be tree-shaken, so the second form pulls all 950 bindings. Measured on the
+sixteen a real consumer needed: **9,138 bytes gzip through the namespace against 207 through the
+subpath.**
+
+Two caveats, both measured rather than assumed. The saving only materialises for a consumer that
+wants tokens and little else — any component you import brings the core token _sheet_, which is a
+single string of every declaration and does not shake. A real micro-frontend that swapped the
+namespace for the subpath saw **no change at all**, because its components had already pulled the
+sheet in.
+
+And `typesVersions` is what makes the subpath visible to TypeScript on `moduleResolution: node`.
+Without it the bundler resolves the import and `tsc` does not, which is how it first surfaced — as a
+build failure in a consumer, not here.
+
 ## Tokens outside React
 
 The runtime custom properties this package emits carry a value-derived hash

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

@@ -27,5 +27,11 @@ export declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<Breadcrumb
 export type BreadcrumbItemProps = Omit<React.ComponentProps<"a">, "href"> & {
     href?: string;
     isCurrent?: boolean;
+    /**
+     * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This
+     * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package
+     * was on Base UI and restored once it moved back to Radix.
+     */
+    asChild?: boolean;
 };
 export declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,11 +1,12 @@
-import { jsx as e, jsxs as k } from "react/jsx-runtime";
-import * as t from "react";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import * as o from "react";
 import { shorthands as u } from "../../node_modules/@griffel/core/src/index.js";
 import { SLOT_ATTR as c } from "../../renderer/contract.js";
-import { makeVoltStyles as 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 { makeVoltStyles as L } from "../../styles/make-styles.js";
+import { semGrayDefault as p, fontWeightSemibold as b, accentA8 as R, semGrayLight as f, textBase as S, spacingElement1 as B, spacingElement2 as I } from "../../tokens/index.js";
+import { Root as N } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { mergeClasses as g } from "../../node_modules/@griffel/core/src/mergeClasses.js";
-const h = x({
+const h = L({
   list: {
     display: "flex",
     alignItems: "center",
@@ -20,7 +21,7 @@ const h = x({
     display: "inline-flex",
     alignItems: "center",
     // gap-1
-    ...u.gap(L)
+    ...u.gap(B)
   },
   link: {
     fontWeight: b,
@@ -37,50 +38,50 @@ const h = x({
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: B
+      outlineColor: R
     }
   },
   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);
+}), z = o.forwardRef(
+  function({ separator: r = "/", className: a, children: i, ...n }, s) {
+    const l = h(), m = o.Children.toArray(i).filter(o.isValidElement);
     return /* @__PURE__ */ e(
       "nav",
       {
-        ref: m,
+        ref: s,
         "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(
+        children: /* @__PURE__ */ e("ol", { className: l.list, children: m.map((t, d) => /* @__PURE__ */ x(o.Fragment, { children: [
+          d > 0 && /* @__PURE__ */ e(
             "li",
             {
               role: "presentation",
               "aria-hidden": "true",
               className: l.separator,
-              children: o
+              children: r
             }
           ),
-          d
-        ] }, s)) })
+          t
+        ] }, d)) })
       }
     );
   }
-), E = t.forwardRef(function({ href: o, isCurrent: a = !1, className: i, children: n, ...m }, l) {
-  const r = h(), s = !!o ? /* @__PURE__ */ e(
-    "a",
+), F = o.forwardRef(function({ href: r, isCurrent: a = !1, className: i, children: n, asChild: s = !1, ...l }, m) {
+  const t = h(), y = !!r || s ? /* @__PURE__ */ e(
+    s ? N : "a",
     {
       "data-slot": "breadcrumb-link",
       [c]: "breadcrumb-link",
-      href: o,
-      className: g(r.link, i),
+      ...r ? { href: r } : {},
+      className: g(t.link, i),
       ...a ? { "aria-current": "page" } : {},
-      ...m,
+      ...l,
       children: n
     }
   ) : /* @__PURE__ */ e(
@@ -88,7 +89,7 @@ const h = x({
     {
       "data-slot": "breadcrumb-page",
       [c]: "breadcrumb-page",
-      className: g(r.page, i),
+      className: g(t.page, i),
       ...a ? { "aria-current": "page" } : {},
       children: n
     }
@@ -96,16 +97,16 @@ const h = x({
   return /* @__PURE__ */ e(
     "li",
     {
-      ref: l,
+      ref: m,
       "data-slot": "breadcrumb-item",
       [c]: "breadcrumb-item",
-      className: r.item,
-      children: s
+      className: t.item,
+      children: y
     }
   );
 });
 export {
-  D as Breadcrumb,
-  E as BreadcrumbItem
+  z as Breadcrumb,
+  F as BreadcrumbItem
 };
 //# sourceMappingURL=breadcrumb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\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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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * Breadcrumb — Card's compound pattern applied to the nav / ol / li structure.\n *\n * v1's `Breadcrumb` walks its children and interleaves a presentational separator `<li>` between\n * them; `BreadcrumbItem` decides between a link and a plain page by whether a `href` exists. The\n * `nav` / `ol` / `li` semantics and the `aria-current=\"page\"` handling are the real value of this\n * component and are reproduced exactly.\n *\n * v1 renders the link branch through Radix `Slot` when `asChild` is set — dropped here per\n * CONVENTIONS rule 6 (no Radix dependency). There is no `asChild` escape hatch; a consumer wanting\n * a non-`<a>` link anchors it themselves.\n *\n * `BreadcrumbItem` with a `href` renders an `<a>` (slot `breadcrumb-link`); without one, a `<span>`\n * (slot `breadcrumb-page`). Either way the item is wrapped in a `breadcrumb-item` `<li>`. The nav\n * itself has no base styles in v1 — it is left to the caller's className — so it carries only the\n * slot attributes.\n *\n * The link's `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — literals from the framework's default theme, which is\n * visible motion and cannot be read from the v1 file (Rule 0: flagged, not approximated away).\n */\n\nexport type BreadcrumbProps = React.ComponentProps<\"nav\"> & {\n  separator?: React.ReactNode\n}\n\nconst useStyles = makeVoltStyles({\n  list: {\n    display: \"flex\",\n    alignItems: \"center\",\n    // gap-2\n    ...shorthands.gap(tokens.spacingElement2),\n    fontSize: tokens.textBase,\n  },\n  separator: {\n    color: tokens.semGrayLight,\n  },\n  item: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // gap-1\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  link: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayLight,\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    cursor: \"pointer\",\n    \":hover\": {\n      color: tokens.semGrayDefault,\n      textDecorationLine: \"underline\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  page: {\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.semGrayDefault,\n  },\n})\n\nexport const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  function Breadcrumb({ separator = \"/\", className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n\n    return (\n      <nav\n        ref={ref}\n        data-slot=\"breadcrumb\"\n        {...{ [SLOT_ATTR]: \"breadcrumb\" }}\n        aria-label=\"Breadcrumb\"\n        className={className}\n        {...props}\n      >\n        <ol className={styles.list}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && (\n                <li\n                  role=\"presentation\"\n                  aria-hidden=\"true\"\n                  className={styles.separator}\n                >\n                  {separator}\n                </li>\n              )}\n              {child}\n            </React.Fragment>\n          ))}\n        </ol>\n      </nav>\n    )\n  }\n)\n\nexport type BreadcrumbItemProps = Omit<React.ComponentProps<\"a\">, \"href\"> & {\n  href?: string\n  isCurrent?: boolean\n  /**\n   * Render the child instead of the built-in `a`, keeping the link styling and slot markers. This\n   * is how a consumer supplies a router link. v1 supports it; it was dropped here while the package\n   * was on Base UI and restored once it moved back to Radix.\n   */\n  asChild?: boolean\n}\n\nexport const BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  BreadcrumbItemProps\n>(function BreadcrumbItem(\n  { href, isCurrent = false, className, children, asChild = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const isLink = !!href\n\n  const LinkRoot = asChild ? Slot : \"a\"\n\n  const content =\n    isLink || asChild ? (\n      <LinkRoot\n        data-slot=\"breadcrumb-link\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-link\" }}\n        {...(href ? { href } : {})}\n        className={mergeClasses(styles.link, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n        {...props}\n      >\n        {children}\n      </LinkRoot>\n    ) : (\n      <span\n        data-slot=\"breadcrumb-page\"\n        {...{ [SLOT_ATTR]: \"breadcrumb-page\" }}\n        className={mergeClasses(styles.page, className)}\n        {...(isCurrent ? { \"aria-current\": \"page\" as const } : {})}\n      >\n        {children}\n      </span>\n    )\n\n  return (\n    <li\n      ref={ref}\n      data-slot=\"breadcrumb-item\"\n      {...{ [SLOT_ATTR]: \"breadcrumb-item\" }}\n      className={styles.item}\n    >\n      {content}\n    </li>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.textBase","tokens.semGrayLight","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semGrayDefault","tokens.accentA8","Breadcrumb","React","separator","className","children","props","ref","styles","items","jsx","SLOT_ATTR","child","index","jsxs","BreadcrumbItem","href","isCurrent","asChild","content","Slot","mergeClasses"],"mappings":"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"}

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

@@ -8,5 +8,11 @@ export type ButtonProps = Omit<React.ComponentProps<"button">, "variant" | "size
     shape?: ButtonShape;
     destructive?: boolean;
     className?: string;
+    /**
+     * Render the child element instead of a `button`, keeping Button's styling and slot markers.
+     * v1 supports this and consumers rely on it to wrap links; it was dropped here while the package
+     * was briefly on Base UI, and restored once it moved back to Radix.
+     */
+    asChild?: boolean;
 };
 export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.js

@@ -1,16 +1,17 @@
-import { jsx as C } from "react/jsx-runtime";
-import * as S from "react";
+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 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({
+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({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    fontWeight: X,
+    fontWeight: j,
     whiteSpace: "nowrap",
     transitionProperty: "all",
     cursor: "pointer",
@@ -28,8 +29,8 @@ const N = "button", P = x({
     }
   },
   primary: {
-    backgroundColor: W,
-    color: T,
+    backgroundColor: X,
+    color: W,
     ":hover": { backgroundColor: a },
     ":active": { backgroundColor: a },
     ":focus-visible": { outlineColor: n }
@@ -37,7 +38,7 @@ const N = "button", P = x({
   secondary: {
     backgroundColor: i,
     color: m,
-    ":hover": { backgroundColor: D },
+    ":hover": { backgroundColor: T },
     ":focus-visible": { outlineColor: n }
   },
   tertiary: {
@@ -48,7 +49,7 @@ const N = "button", P = x({
   },
   ghost: {
     backgroundColor: "transparent",
-    color: R,
+    color: D,
     ":hover": { backgroundColor: i },
     ":focus-visible": { outlineColor: L }
   },
@@ -75,15 +76,15 @@ const N = "button", P = x({
     ...o.paddingInline("0.5rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.25rem",
-    fontSize: H,
+    fontSize: R,
     gap: "4px",
     "& svg": { width: "0.75rem", height: "0.75rem" }
   },
   sm: {
-    ...o.paddingInline(j),
+    ...o.paddingInline(O),
     ...o.paddingBlock("0.25rem"),
     minHeight: "1.5rem",
-    fontSize: B,
+    fontSize: H,
     gap: "0.375rem",
     "& svg": { width: "0.875rem", height: "0.875rem" }
   },
@@ -91,7 +92,7 @@ const N = "button", P = x({
     ...o.paddingInline("1rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2rem",
-    fontSize: A,
+    fontSize: B,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -99,7 +100,7 @@ const N = "button", P = x({
     ...o.paddingInline("1.25rem"),
     ...o.paddingBlock("0.25rem"),
     minHeight: "2.5rem",
-    fontSize: w,
+    fontSize: A,
     gap: "0.5rem",
     "& svg": { width: "1rem", height: "1rem" }
   },
@@ -123,18 +124,19 @@ const N = "button", P = x({
     height: "2.5rem",
     "& svg": { width: "1.5rem", height: "1.5rem" }
   },
-  normal: { borderRadius: y },
+  normal: { borderRadius: w },
   rounded: { borderRadius: "9999px" }
-}), K = S.forwardRef(
+}), Y = k.forwardRef(
   function({
     variant: e = "primary",
     size: g = "base",
     shape: d = "rounded",
     destructive: h = !1,
     className: u,
-    ...p
+    asChild: p = !1,
+    ...f
   }, b) {
-    const r = P(), f = h && e !== "ghost" ? `${e}Destructive` : e, v = {
+    const r = _(), v = h && e !== "ghost" ? `${e}Destructive` : e, C = {
       xs: "xs",
       sm: "sm",
       base: "base",
@@ -144,25 +146,25 @@ const N = "button", P = x({
       icon: "icon",
       "icon-lg": "iconLg"
     }[g];
-    return /* @__PURE__ */ C(
-      N,
+    return /* @__PURE__ */ S(
+      p ? N : V,
       {
         ref: b,
         "data-slot": "button",
-        [k]: "button",
-        className: O(
+        [x]: "button",
+        className: P(
           r.root,
-          r[f],
           r[v],
+          r[C],
           r[d],
           u
         ),
-        ...p
+        ...f
       }
     );
   }
 );
 export {
-  K as Button
+  Y 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\"\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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"}
+{"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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"}

package/dist/components/command/command.d.ts

@@ -24,7 +24,7 @@ export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type CommandEmptyProps = React.ComponentProps<typeof CommandPrimitive.Empty>;
@@ -34,7 +34,7 @@ export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type CommandGroupProps = React.ComponentProps<typeof CommandPrimitive.Group>;
 export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -42,7 +42,7 @@ export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -52,7 +52,7 @@ export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item>;
@@ -62,7 +62,7 @@ export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -78,7 +78,7 @@ export declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/field/field-combobox.d.ts

@@ -21,7 +21,7 @@ export declare const FieldComboboxList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type FieldComboboxItemProps = CommandItemProps;
@@ -31,7 +31,7 @@ export declare const FieldComboboxItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -47,7 +47,7 @@ export declare const FieldComboboxEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type FieldComboboxGroupProps = CommandGroupProps;
 export declare const FieldComboboxGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
@@ -55,7 +55,7 @@ export declare const FieldComboboxGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -67,7 +67,7 @@ export declare const FieldComboboxSeparator: React.ForwardRefExoticComponent<Omi
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type FieldComboboxLoadingProps = CommandLoadingProps;
@@ -77,7 +77,7 @@ export declare const FieldComboboxLoading: React.ForwardRefExoticComponent<Omit<
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/node_modules/@radix-ui/react-slot/dist/index.js

@@ -0,0 +1,63 @@
+import * as o from "react";
+import { composeRefs as S } from "../../react-compose-refs/dist/index.js";
+import { jsx as y } from "react/jsx-runtime";
+var E = Symbol.for("react.lazy"), p = o[" use ".trim().toString()];
+function g(t) {
+  return typeof t == "object" && t !== null && "then" in t;
+}
+function d(t) {
+  return t != null && typeof t == "object" && "$$typeof" in t && t.$$typeof === E && "_payload" in t && g(t._payload);
+}
+// @__NO_SIDE_EFFECTS__
+function C(t) {
+  const n = /* @__PURE__ */ R(t), i = o.forwardRef((e, r) => {
+    let { children: l, ...a } = e;
+    d(l) && typeof p == "function" && (l = p(l._payload));
+    const s = o.Children.toArray(l), f = s.find(b);
+    if (f) {
+      const c = f.props.children, m = s.map((u) => u === f ? o.Children.count(c) > 1 ? o.Children.only(null) : o.isValidElement(c) ? c.props.children : null : u);
+      return /* @__PURE__ */ y(n, { ...a, ref: r, children: o.isValidElement(c) ? o.cloneElement(c, void 0, m) : null });
+    }
+    return /* @__PURE__ */ y(n, { ...a, ref: r, children: l });
+  });
+  return i.displayName = `${t}.Slot`, i;
+}
+var V = /* @__PURE__ */ C("Slot");
+// @__NO_SIDE_EFFECTS__
+function R(t) {
+  const n = o.forwardRef((i, e) => {
+    let { children: r, ...l } = i;
+    if (d(r) && typeof p == "function" && (r = p(r._payload)), o.isValidElement(r)) {
+      const a = P(r), s = h(l, r.props);
+      return r.type !== o.Fragment && (s.ref = e ? S(e, a) : a), o.cloneElement(r, s);
+    }
+    return o.Children.count(r) > 1 ? o.Children.only(null) : null;
+  });
+  return n.displayName = `${t}.SlotClone`, n;
+}
+var _ = Symbol("radix.slottable");
+function b(t) {
+  return o.isValidElement(t) && typeof t.type == "function" && "__radixId" in t.type && t.type.__radixId === _;
+}
+function h(t, n) {
+  const i = { ...n };
+  for (const e in n) {
+    const r = t[e], l = n[e];
+    /^on[A-Z]/.test(e) ? r && l ? i[e] = (...s) => {
+      const f = l(...s);
+      return r(...s), f;
+    } : r && (i[e] = r) : e === "style" ? i[e] = { ...r, ...l } : e === "className" && (i[e] = [r, l].filter(Boolean).join(" "));
+  }
+  return { ...t, ...i };
+}
+function P(t) {
+  var e, r;
+  let n = (e = Object.getOwnPropertyDescriptor(t.props, "ref")) == null ? void 0 : e.get, i = n && "isReactWarning" in n && n.isReactWarning;
+  return i ? t.ref : (n = (r = Object.getOwnPropertyDescriptor(t, "ref")) == null ? void 0 : r.get, i = n && "isReactWarning" in n && n.isReactWarning, i ? t.props.ref : t.props.ref || t.ref);
+}
+export {
+  V as Root,
+  V as Slot,
+  C as createSlot
+};
+//# sourceMappingURL=index.js.map

package/dist/node_modules/@radix-ui/react-slot/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../node_modules/@radix-ui/react-slot/dist/index.mjs"],"sourcesContent":["// src/slot.tsx\nimport * as React from \"react\";\nimport { composeRefs } from \"@radix-ui/react-compose-refs\";\nimport { Fragment as Fragment2, jsx } from \"react/jsx-runtime\";\nvar REACT_LAZY_TYPE = Symbol.for(\"react.lazy\");\nvar use = React[\" use \".trim().toString()];\nfunction isPromiseLike(value) {\n  return typeof value === \"object\" && value !== null && \"then\" in value;\n}\nfunction isLazyComponent(element) {\n  return element != null && typeof element === \"object\" && \"$$typeof\" in element && element.$$typeof === REACT_LAZY_TYPE && \"_payload\" in element && isPromiseLike(element._payload);\n}\n// @__NO_SIDE_EFFECTS__\nfunction createSlot(ownerName) {\n  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);\n  const Slot2 = React.forwardRef((props, forwardedRef) => {\n    let { children, ...slotProps } = props;\n    if (isLazyComponent(children) && typeof use === \"function\") {\n      children = use(children._payload);\n    }\n    const childrenArray = React.Children.toArray(children);\n    const slottable = childrenArray.find(isSlottable);\n    if (slottable) {\n      const newElement = slottable.props.children;\n      const newChildren = childrenArray.map((child) => {\n        if (child === slottable) {\n          if (React.Children.count(newElement) > 1) return React.Children.only(null);\n          return React.isValidElement(newElement) ? newElement.props.children : null;\n        } else {\n          return child;\n        }\n      });\n      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });\n    }\n    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });\n  });\n  Slot2.displayName = `${ownerName}.Slot`;\n  return Slot2;\n}\nvar Slot = /* @__PURE__ */ createSlot(\"Slot\");\n// @__NO_SIDE_EFFECTS__\nfunction createSlotClone(ownerName) {\n  const SlotClone = React.forwardRef((props, forwardedRef) => {\n    let { children, ...slotProps } = props;\n    if (isLazyComponent(children) && typeof use === \"function\") {\n      children = use(children._payload);\n    }\n    if (React.isValidElement(children)) {\n      const childrenRef = getElementRef(children);\n      const props2 = mergeProps(slotProps, children.props);\n      if (children.type !== React.Fragment) {\n        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;\n      }\n      return React.cloneElement(children, props2);\n    }\n    return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n  });\n  SlotClone.displayName = `${ownerName}.SlotClone`;\n  return SlotClone;\n}\nvar SLOTTABLE_IDENTIFIER = Symbol(\"radix.slottable\");\n// @__NO_SIDE_EFFECTS__\nfunction createSlottable(ownerName) {\n  const Slottable2 = ({ children }) => {\n    return /* @__PURE__ */ jsx(Fragment2, { children });\n  };\n  Slottable2.displayName = `${ownerName}.Slottable`;\n  Slottable2.__radixId = SLOTTABLE_IDENTIFIER;\n  return Slottable2;\n}\nvar Slottable = /* @__PURE__ */ createSlottable(\"Slottable\");\nfunction isSlottable(child) {\n  return React.isValidElement(child) && typeof child.type === \"function\" && \"__radixId\" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;\n}\nfunction mergeProps(slotProps, childProps) {\n  const overrideProps = { ...childProps };\n  for (const propName in childProps) {\n    const slotPropValue = slotProps[propName];\n    const childPropValue = childProps[propName];\n    const isHandler = /^on[A-Z]/.test(propName);\n    if (isHandler) {\n      if (slotPropValue && childPropValue) {\n        overrideProps[propName] = (...args) => {\n          const result = childPropValue(...args);\n          slotPropValue(...args);\n          return result;\n        };\n      } else if (slotPropValue) {\n        overrideProps[propName] = slotPropValue;\n      }\n    } else if (propName === \"style\") {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n    } else if (propName === \"className\") {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(\" \");\n    }\n  }\n  return { ...slotProps, ...overrideProps };\n}\nfunction getElementRef(element) {\n  let getter = Object.getOwnPropertyDescriptor(element.props, \"ref\")?.get;\n  let mayWarn = getter && \"isReactWarning\" in getter && getter.isReactWarning;\n  if (mayWarn) {\n    return element.ref;\n  }\n  getter = Object.getOwnPropertyDescriptor(element, \"ref\")?.get;\n  mayWarn = getter && \"isReactWarning\" in getter && getter.isReactWarning;\n  if (mayWarn) {\n    return element.props.ref;\n  }\n  return element.props.ref || element.ref;\n}\nexport {\n  Slot as Root,\n  Slot,\n  Slottable,\n  createSlot,\n  createSlottable\n};\n//# sourceMappingURL=index.mjs.map\n"],"names":["REACT_LAZY_TYPE","use","React","isPromiseLike","value","isLazyComponent","element","createSlot","ownerName","SlotClone","createSlotClone","Slot2","props","forwardedRef","children","slotProps","childrenArray","slottable","isSlottable","newElement","newChildren","child","jsx","Slot","childrenRef","getElementRef","props2","mergeProps","composeRefs","SLOTTABLE_IDENTIFIER","childProps","overrideProps","propName","slotPropValue","childPropValue","args","result","getter","_a","mayWarn","_b"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$comment": "GENERATED. Design token values for consumers that do not render this package's React components. Compile these into your own CSS under your own names at your own build time; do not reference this package's runtime custom properties, whose names are content-hashed and change with their values.",
   "package": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.1.0-experiment.1",
+  "version": "0.1.2",
   "themes": {
     "light": {
       "accent-1": "#fcfdfe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/volt-ui-experimental-griffel",
-  "version": "0.1.0-experiment.1",
+  "version": "0.1.2",
   "description": "Experimental Volt UI rebuild: Radix primitives styled with Griffel, bundled per micro-frontend instead of shared as a singleton",
   "type": "module",
   "repository": {
@@ -15,10 +15,17 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./tokens.json": "./dist/tokens.json"
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
+    "./tokens.json": "./dist/tokens.json",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "tokens.js",
+    "tokens.d.ts",
     "README.md"
   ],
   "sideEffects": false,
@@ -83,5 +90,15 @@
     "vite": "^5.4.9",
     "vitest": "^2.1.4"
   },
-  "private": false
+  "private": false,
+  "typesVersions": {
+    "*": {
+      "tokens": [
+        "./dist/tokens/index.d.ts"
+      ],
+      "tokens.json": [
+        "./dist/tokens.json"
+      ]
+    }
+  }
 }

package/tokens.d.ts

@@ -0,0 +1,3 @@
+// Types for the `./tokens` resolution stub. See tokens.js for why this path exists.
+// Written without a file extension so resolvers that predate `exports` can follow it.
+export * from "./dist/tokens/index"

package/tokens.js

@@ -0,0 +1,13 @@
+// Resolution stub for the `./tokens` subpath.
+//
+// `exports` in package.json already maps it, and webpack, Vite and Node all honour that. Tools
+// that predate `exports` resolve a subpath as a file path instead — `<package>/tokens` becomes
+// `<package>/tokens.js` — and find nothing. ESLint's node import resolver is one of them, so
+// `import/no-unresolved` fires on a specifier that every bundler resolves correctly, and each
+// consumer ends up carrying its own `eslint-disable`.
+//
+// This file is that path. It re-exports the same module the `exports` map points at, so both
+// resolution routes land on one module instance and nothing is duplicated.
+//
+// Same shape as the `typesVersions` entry, which exists for the same reason on the TypeScript side.
+export * from "./dist/tokens/index.js"