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

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

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Avatar,\n  AvatarGroupContext,\n  type AvatarColor,\n  type AvatarSize,\n} from \"./avatar\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  item: {\n    position: \"relative\",\n    marginLeft: \"-0.5rem\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":first-child\": { marginLeft: \"0\" },\n  },\n  itemBeforeActive: {\n    transform: \"translateX(-0.75rem)\",\n  },\n  itemAfterActive: {\n    transform: \"translateX(0.75rem)\",\n  },\n  itemActive: {\n    zIndex: 10,\n  },\n  overflow: {\n    position: \"relative\",\n    zIndex: 0,\n    ...shorthands.border(\"0\", \"solid\", \"transparent\"),\n    cursor: \"pointer\",\n  },\n  overflowPanel: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: \"0\",\n    zIndex: 20,\n    width: \"max-content\",\n    maxWidth: \"20rem\",\n    padding: tokens.spacingElement2,\n    backgroundColor: tokens.body,\n    borderRadius: tokens.radiusMd,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  overflowList: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: tokens.spacingElement1,\n  },\n  overflowItem: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement2,\n  },\n  overflowName: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontSize: tokens.textSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AvatarGroupProps = Omit<React.ComponentProps<\"div\">, \"color\"> & {\n  max?: number\n  size?: AvatarSize\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ max, size, className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n    const visible = typeof max === \"number\" ? items.slice(0, max) : items\n    const overflow = items.length - visible.length\n    const [active, setActive] = React.useState<number | null>(null)\n    const [open, setOpen] = React.useState(false)\n\n    return (\n      <AvatarGroupContext.Provider value={{ size }}>\n        <div\n          ref={ref}\n          data-slot=\"avatar-group\"\n          {...{ [SLOT_ATTR]: \"avatar-group\" }}\n          className={mergeClasses(styles.root, className)}\n          {...props}\n        >\n          {visible.map((child, index) => (\n            <div\n              key={index}\n              data-slot=\"avatar-group-item\"\n              {...{ [SLOT_ATTR]: \"avatar-group-item\" }}\n              onPointerEnter={() => setActive(index)}\n              onPointerLeave={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              onFocus={() => setActive(index)}\n              onBlur={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              className={mergeClasses(\n                styles.item,\n                active !== null && index < active && styles.itemBeforeActive,\n                active !== null && index > active && styles.itemAfterActive,\n                active === index && styles.itemActive\n              )}\n            >\n              {child}\n            </div>\n          ))}\n          {overflow > 0 && (\n            <div\n              data-slot=\"avatar-group-overflow-wrapper\"\n              {...{ [SLOT_ATTR]: \"avatar-group-overflow-wrapper\" }}\n              className={styles.item}\n            >\n              <Avatar\n                size={size}\n                color={\"gray\" as AvatarColor}\n                initials={`+${overflow}`}\n                aria-label={`${overflow} more`}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => setOpen((current) => !current)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault()\n                    setOpen((current) => !current)\n                  }\n                }}\n                className={styles.overflow}\n              />\n              {open && (\n                <div\n                  data-slot=\"avatar-group-overflow\"\n                  {...{ [SLOT_ATTR]: \"avatar-group-overflow\" }}\n                  className={styles.overflowPanel}\n                >\n                  <ul className={styles.overflowList}>\n                    {items.map((item, index) => (\n                      <li key={index} className={styles.overflowItem}>\n                        {item}\n                        {React.isValidElement<{ alt?: string }>(item) &&\n                          item.props.alt && (\n                            <span className={styles.overflowName}>\n                              {item.props.alt}\n                            </span>\n                          )}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </AvatarGroupContext.Provider>\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.body","tokens.radiusMd","tokens.spacingElement1","tokens.textSm","tokens.grayA11","AvatarGroup","React","max","size","className","children","props","ref","styles","items","visible","overflow","active","setActive","open","setOpen","AvatarGroupContext","jsxs","SLOT_ATTR","mergeClasses","child","index","jsx","current","Avatar","event","item"],"mappings":";;;;;;;;AAcA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,EAAA;AAAA,EAEd,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,gBAAgB,EAAE,YAAY,IAAA;AAAA,EAAI;AAAA,EAEpC,kBAAkB;AAAA,IAChB,WAAW;AAAA,EAAA;AAAA,EAEb,iBAAiB;AAAA,IACf,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAGC,EAAW,OAAO,KAAK,SAAS,aAAa;AAAA,IAChD,QAAQ;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAASC;AAAAA,IACT,iBAAiBC;AAAAA,IACjB,cAAcC;AAAAA,IACd,WAAW;AAAA,EAAA;AAAA,EAEb,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAKC;AAAAA,EAAO;AAAA,EAEd,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAKH;AAAAA,EAAO;AAAA,EAEd,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAUI;AAAAA,IACV,OAAOC;AAAAA,EAAO;AAElB,CAAC,GAOYC,IAAcC,EAAM;AAAA,EAC/B,SAAqB,EAAE,KAAAC,GAAK,MAAAC,GAAM,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,GAAK;AACtE,UAAMC,IAASjB,EAAA,GACTkB,IAAQR,EAAM,SAAS,QAAQI,CAAQ,EAAE,OAAOJ,EAAM,cAAc,GACpES,IAAU,OAAOR,KAAQ,WAAWO,EAAM,MAAM,GAAGP,CAAG,IAAIO,GAC1DE,IAAWF,EAAM,SAASC,EAAQ,QAClC,CAACE,GAAQC,CAAS,IAAIZ,EAAM,SAAwB,IAAI,GACxD,CAACa,GAAMC,CAAO,IAAId,EAAM,SAAS,EAAK;AAE5C,6BACGe,EAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAAb,KACpC,UAAA,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,aAAU;AAAA,QACJ,CAACW,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAaX,EAAO,MAAMJ,CAAS;AAAA,QAC7C,GAAGE;AAAA,QAEH,UAAA;AAAA,UAAAI,EAAQ,IAAI,CAACU,GAAOC,MACnB,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,aAAU;AAAA,cACJ,CAACJ,CAAS,GAAG;AAAA,cACnB,gBAAgB,MAAML,EAAUQ,CAAK;AAAA,cACrC,gBAAgB,MACdR,EAAU,CAACU,MAAaA,MAAYF,IAAQ,OAAOE,CAAQ;AAAA,cAE7D,SAAS,MAAMV,EAAUQ,CAAK;AAAA,cAC9B,QAAQ,MACNR,EAAU,CAACU,MAAaA,MAAYF,IAAQ,OAAOE,CAAQ;AAAA,cAE7D,WAAWJ;AAAA,gBACTX,EAAO;AAAA,gBACPI,MAAW,QAAQS,IAAQT,KAAUJ,EAAO;AAAA,gBAC5CI,MAAW,QAAQS,IAAQT,KAAUJ,EAAO;AAAA,gBAC5CI,MAAWS,KAASb,EAAO;AAAA,cAAA;AAAA,cAG5B,UAAAY;AAAA,YAAA;AAAA,YAlBIC;AAAA,UAAA,CAoBR;AAAA,UACAV,IAAW,KACV,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACJ,CAACC,CAAS,GAAG;AAAA,cACnB,WAAWV,EAAO;AAAA,cAElB,UAAA;AAAA,gBAAA,gBAAAc;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAArB;AAAA,oBACA,OAAO;AAAA,oBACP,UAAU,IAAIQ,CAAQ;AAAA,oBACtB,cAAY,GAAGA,CAAQ;AAAA,oBACvB,MAAK;AAAA,oBACL,UAAU;AAAA,oBACV,SAAS,MAAMI,EAAQ,CAACQ,MAAY,CAACA,CAAO;AAAA,oBAC5C,WAAW,CAACE,MAAU;AACpB,uBAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACNV,EAAQ,CAACQ,MAAY,CAACA,CAAO;AAAA,oBAEjC;AAAA,oBACA,WAAWf,EAAO;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEnBM,KACC,gBAAAQ;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,aAAU;AAAA,oBACJ,CAACJ,CAAS,GAAG;AAAA,oBACnB,WAAWV,EAAO;AAAA,oBAElB,UAAA,gBAAAc,EAAC,MAAA,EAAG,WAAWd,EAAO,cACnB,UAAAC,EAAM,IAAI,CAACiB,GAAML,MAChB,gBAAAJ,EAAC,MAAA,EAAe,WAAWT,EAAO,cAC/B,UAAA;AAAA,sBAAAkB;AAAA,sBACAzB,EAAM,eAAiCyB,CAAI,KAC1CA,EAAK,MAAM,OACT,gBAAAJ,EAAC,QAAA,EAAK,WAAWd,EAAO,cACrB,UAAAkB,EAAK,MAAM,IAAA,CACd;AAAA,oBAAA,EAAA,GANGL,CAQT,CACD,EAAA,CACH;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"avatar-group.js","sources":["../../../src/components/avatar/avatar-group.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Avatar,\n  AvatarGroupContext,\n  type AvatarColor,\n  type AvatarSize,\n} from \"./avatar\"\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  item: {\n    position: \"relative\",\n    marginLeft: \"-0.5rem\",\n    transitionProperty: \"transform\",\n    transitionDuration: \"200ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":first-child\": { marginLeft: \"0\" },\n  },\n  itemBeforeActive: {\n    transform: \"translateX(-0.75rem)\",\n  },\n  itemAfterActive: {\n    transform: \"translateX(0.75rem)\",\n  },\n  itemActive: {\n    zIndex: 10,\n  },\n  overflow: {\n    position: \"relative\",\n    zIndex: 0,\n    ...shorthands.border(\"0\", \"solid\", \"transparent\"),\n    cursor: \"pointer\",\n  },\n  overflowPanel: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: \"0\",\n    zIndex: 20,\n    width: \"max-content\",\n    maxWidth: \"20rem\",\n    padding: tokens.spacingElement2,\n    backgroundColor: tokens.body,\n    borderRadius: tokens.radiusMd,\n    boxShadow: \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\",\n  },\n  overflowList: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: tokens.spacingElement1,\n  },\n  overflowItem: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement2,\n  },\n  overflowName: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n})\n\nexport type AvatarGroupProps = Omit<React.ComponentProps<\"div\">, \"color\"> & {\n  max?: number\n  size?: AvatarSize\n}\n\nexport const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup({ max, size, className, children, ...props }, ref) {\n    const styles = useStyles()\n    const items = React.Children.toArray(children).filter(React.isValidElement)\n    const visible = typeof max === \"number\" ? items.slice(0, max) : items\n    const overflow = items.length - visible.length\n    const [active, setActive] = React.useState<number | null>(null)\n    const [open, setOpen] = React.useState(false)\n\n    return (\n      <AvatarGroupContext.Provider value={{ size }}>\n        <div\n          ref={ref}\n          data-slot=\"avatar-group\"\n          {...{ [SLOT_ATTR]: \"avatar-group\" }}\n          className={mergeClasses(styles.root, className)}\n          {...props}\n        >\n          {visible.map((child, index) => (\n            <div\n              key={index}\n              data-slot=\"avatar-group-item\"\n              {...{ [SLOT_ATTR]: \"avatar-group-item\" }}\n              onPointerEnter={() => setActive(index)}\n              onPointerLeave={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              onFocus={() => setActive(index)}\n              onBlur={() =>\n                setActive((current) => (current === index ? null : current))\n              }\n              className={mergeClasses(\n                styles.item,\n                active !== null && index < active && styles.itemBeforeActive,\n                active !== null && index > active && styles.itemAfterActive,\n                active === index && styles.itemActive\n              )}\n            >\n              {child}\n            </div>\n          ))}\n          {overflow > 0 && (\n            <div\n              data-slot=\"avatar-group-overflow-wrapper\"\n              {...{ [SLOT_ATTR]: \"avatar-group-overflow-wrapper\" }}\n              className={styles.item}\n            >\n              <Avatar\n                size={size}\n                color={\"gray\" as AvatarColor}\n                initials={`+${overflow}`}\n                aria-label={`${overflow} more`}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => setOpen((current) => !current)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault()\n                    setOpen((current) => !current)\n                  }\n                }}\n                className={styles.overflow}\n              />\n              {open && (\n                <div\n                  data-slot=\"avatar-group-overflow\"\n                  {...{ [SLOT_ATTR]: \"avatar-group-overflow\" }}\n                  className={styles.overflowPanel}\n                >\n                  <ul className={styles.overflowList}>\n                    {items.map((item, index) => (\n                      <li key={index} className={styles.overflowItem}>\n                        {item}\n                        {React.isValidElement<{ alt?: string }>(item) &&\n                          item.props.alt && (\n                            <span className={styles.overflowName}>\n                              {item.props.alt}\n                            </span>\n                          )}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </AvatarGroupContext.Provider>\n    )\n  }\n)\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.body","tokens.radiusMd","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.grayA11","AvatarGroup","React","max","size","className","children","props","ref","styles","items","visible","overflow","active","setActive","open","setOpen","AvatarGroupContext","jsxs","SLOT_ATTR","mergeClasses","child","index","jsx","current","Avatar","event","item"],"mappings":"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"}

package/dist/components/avatar/avatar.js

@@ -1,11 +1,11 @@
 import { jsxs as h, jsx as g } from "react/jsx-runtime";
 import * as i from "react";
-import { Root as p, Image as y, Fallback as A } from "../../node_modules/@radix-ui/react-avatar/dist/index.js";
-import { SLOT_ATTR as n } from "../../renderer/contract.js";
-import { makeVoltStyles as x } from "../../styles/make-styles.js";
+import { Root as p, Image as y, Fallback as A } from "../../vendor/@radix-ui/react-avatar/dist/index.js";
+import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as x } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as S } from "../../styles/make-styles.js";
 import { ensurePaletteTokens as w } from "../../tokens/install.js";
-import { indigoA12 as S, indigo3 as C, purpleA12 as z, purple3 as R, pinkA12 as T, pink3 as j, redA12 as O, red3 as F, bronzeA12 as I, bronze3 as N, orangeA12 as L, orange3 as V, yellowA12 as W, yellow3 as X, limeA12 as _, lime3 as B, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as H, sky3 as J, blueA12 as K, blue3 as Q, grayA12 as Z, gray3 as $, textBase as aa, textSm as ra, textXs as ea, fontWeightMedium as ta } from "../../tokens/index.js";
-import { mergeClasses as oa } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+import { indigoA12 as C, indigo3 as z, purpleA12 as R, purple3 as T, pinkA12 as j, pink3 as O, redA12 as F, red3 as H, bronzeA12 as I, bronze3 as N, orangeA12 as X, orange3 as B, yellowA12 as L, yellow3 as V, limeA12 as W, lime3 as _, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as Y, teal3 as q, cyanA12 as D, cyan3 as E, skyA12 as J, sky3 as K, blueA12 as Q, blue3 as Z, grayA12 as $, gray3 as aa, leadingBase as ra, textBase as ea, leadingSm as ta, textSm as oa, leadingXs as na, textXs as ia, fontWeightMedium as la } from "../../tokens/index.js";
 typeof document < "u" && w();
 const s = [
   "blue",
@@ -20,23 +20,23 @@ const s = [
   "pink",
   "purple",
   "indigo"
-], na = (t) => {
+], da = (t) => {
   let a = 0;
   for (let r = 0; r < t.length; r++)
     a = a * 31 + t.charCodeAt(r) >>> 0;
   return s[a % s.length];
-}, ia = {
+}, ga = {
   gray: {
-    "--avatar-background": $,
-    "--avatar-foreground": Z
+    "--avatar-background": aa,
+    "--avatar-foreground": $
   },
   blue: {
-    "--avatar-background": Q,
-    "--avatar-foreground": K
+    "--avatar-background": Z,
+    "--avatar-foreground": Q
   },
   sky: {
-    "--avatar-background": J,
-    "--avatar-foreground": H
+    "--avatar-background": K,
+    "--avatar-foreground": J
   },
   cyan: {
     "--avatar-background": E,
@@ -55,40 +55,40 @@ const s = [
     "--avatar-foreground": G
   },
   lime: {
-    "--avatar-background": B,
-    "--avatar-foreground": _
-  },
-  yellow: {
-    "--avatar-background": X,
+    "--avatar-background": _,
     "--avatar-foreground": W
   },
-  orange: {
+  yellow: {
     "--avatar-background": V,
     "--avatar-foreground": L
   },
+  orange: {
+    "--avatar-background": B,
+    "--avatar-foreground": X
+  },
   bronze: {
     "--avatar-background": N,
     "--avatar-foreground": I
   },
   red: {
-    "--avatar-background": F,
-    "--avatar-foreground": O
+    "--avatar-background": H,
+    "--avatar-foreground": F
   },
   pink: {
-    "--avatar-background": j,
-    "--avatar-foreground": T
+    "--avatar-background": O,
+    "--avatar-foreground": j
   },
   purple: {
-    "--avatar-background": R,
-    "--avatar-foreground": z
+    "--avatar-background": T,
+    "--avatar-foreground": R
   },
   indigo: {
-    "--avatar-background": C,
-    "--avatar-foreground": S
+    "--avatar-background": z,
+    "--avatar-foreground": C
   }
-}, la = i.createContext(
+}, sa = i.createContext(
   null
-), da = x({
+), ca = S({
   root: {
     position: "relative",
     display: "inline-flex",
@@ -100,23 +100,26 @@ const s = [
     borderRadius: "9999px",
     backgroundColor: "var(--avatar-background)",
     color: "var(--avatar-foreground)",
-    fontWeight: ta,
+    fontWeight: la,
     textTransform: "uppercase"
   },
   sm: {
     width: "1.5rem",
     height: "1.5rem",
-    fontSize: ea
+    fontSize: ia,
+    lineHeight: na
   },
   base: {
     width: "2rem",
     height: "2rem",
-    fontSize: ra
+    fontSize: oa,
+    lineHeight: ta
   },
   lg: {
     width: "2.5rem",
     height: "2.5rem",
-    fontSize: aa
+    fontSize: ea,
+    lineHeight: ra
   },
   image: {
     width: "100%",
@@ -130,16 +133,16 @@ const s = [
     width: "100%",
     height: "100%"
   }
-}), ba = i.forwardRef(function({ className: a, src: r, alt: l, initials: d, color: c, size: u, style: v, ...f }, m) {
-  const e = da(), o = i.useContext(la), b = u ?? (o == null ? void 0 : o.size) ?? "base", k = c ?? na(l ?? d ?? "");
+}), pa = i.forwardRef(function({ className: a, src: r, alt: l, initials: d, color: c, size: u, style: v, ...f }, m) {
+  const e = ca(), o = i.useContext(sa), b = u ?? (o == null ? void 0 : o.size) ?? "base", k = c ?? da(l ?? d ?? "");
   return /* @__PURE__ */ h(
     p,
     {
       ref: m,
       "data-slot": "avatar",
       [n]: "avatar",
-      className: oa(e.root, e[b], a),
-      style: { ...ia[k], ...v },
+      className: x(e.root, e[b], a),
+      style: { ...ga[k], ...v },
       ...f,
       children: [
         /* @__PURE__ */ g(
@@ -167,7 +170,7 @@ const s = [
   );
 });
 export {
-  ba as Avatar,
-  la as AvatarGroupContext
+  pa as Avatar,
+  sa as AvatarGroupContext
 };
 //# sourceMappingURL=avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\nif (typeof document !== \"undefined\") {\n  ensurePaletteTokens()\n}\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["ensurePaletteTokens","AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.textSm","tokens.textBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":";;;;;;;;AASI,OAAO,WAAa,OACtBA,EAAA;AAqBF,MAAMC,IAA6B;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,KAAe,CAACC,MAA8B;AAClD,MAAIC,IAAO;AACX,WAASC,IAAI,GAAGA,IAAIF,EAAK,QAAQE;AAC/B,IAAAD,IAAQA,IAAO,KAAKD,EAAK,WAAWE,CAAC,MAAO;AAE9C,SAAOJ,EAAYG,IAAOH,EAAY,MAAM;AAC9C,GAEMK,KAAsD;AAAA,EAC1D,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,KAAK;AAAA,IACH,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,OAAO;AAAA,IACL,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,QAAQ;AAAA,IACN,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,QAAQ;AAAA,IACN,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,QAAQ;AAAA,IACN,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,KAAK;AAAA,IACH,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,MAAM;AAAA,IACJ,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,QAAQ;AAAA,IACN,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAAA,EAEhC,QAAQ;AAAA,IACN,uBAAuBC;AAAAA,IACvB,uBAAuBC;AAAAA,EAAO;AAElC,GAEMC,KAAqBC,EAAM;AAAA,EAC/B;AACF,GAEMC,KAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,YAAYC;AAAAA,IACZ,eAAe;AAAA,EAAA;AAAA,EAEjB,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAUC;AAAAA,EAAO;AAAA,EAEnB,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAUC;AAAAA,EAAO;AAAA,EAEnB,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAUC;AAAAA,EAAO;AAAA,EAEnB,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAEZ,CAAC,GAcYC,KAASP,EAAM,WAG1B,SACA,EAAE,WAAAQ,GAAW,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,OAAAC,GAAO,MAAAC,GAAM,OAAAC,GAAO,GAAGC,EAAA,GACxDC,GACA;AACA,QAAMC,IAAShB,GAAA,GACTiB,IAAQlB,EAAM,WAAWD,EAAkB,GAC3CoB,IAAeN,MAAQK,KAAA,gBAAAA,EAAO,SAAQ,QACtCE,IAAgBR,KAAShD,GAAa8C,KAAOC,KAAY,EAAE;AAEjE,SACE,gBAAAU;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,aAAU;AAAA,MACJ,CAACO,CAAS,GAAG;AAAA,MACnB,WAAWC,GAAaP,EAAO,MAAMA,EAAOE,CAAY,GAAGX,CAAS;AAAA,MACpE,OAAO,EAAE,GAAGxC,GAAUoD,CAAa,GAAG,GAAGN,EAAA;AAAA,MACxC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACJ,CAACH,CAAS,GAAG;AAAA,YACnB,KAAAd;AAAA,YACA,KAAAC;AAAA,YACA,WAAWO,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAQ;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACJ,CAACJ,CAAS,GAAG;AAAA,YACnB,WAAWN,EAAO;AAAA,YAClB,eAAY;AAAA,YAEX,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\nimport * as tokens from \"../../tokens\"\n\nif (typeof document !== \"undefined\") {\n  ensurePaletteTokens()\n}\n\nexport type AvatarColor =\n  | \"gray\"\n  | \"blue\"\n  | \"sky\"\n  | \"cyan\"\n  | \"teal\"\n  | \"mint\"\n  | \"green\"\n  | \"lime\"\n  | \"yellow\"\n  | \"orange\"\n  | \"bronze\"\n  | \"red\"\n  | \"pink\"\n  | \"purple\"\n  | \"indigo\"\nexport type AvatarSize = \"sm\" | \"base\" | \"lg\"\n\nconst AUTO_COLORS: AvatarColor[] = [\n  \"blue\",\n  \"sky\",\n  \"cyan\",\n  \"teal\",\n  \"mint\",\n  \"green\",\n  \"lime\",\n  \"orange\",\n  \"bronze\",\n  \"pink\",\n  \"purple\",\n  \"indigo\",\n]\n\nconst colorForSeed = (seed: string): AvatarColor => {\n  let hash = 0\n  for (let i = 0; i < seed.length; i++) {\n    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0\n  }\n  return AUTO_COLORS[hash % AUTO_COLORS.length]\n}\n\nconst colorVars: Record<AvatarColor, React.CSSProperties> = {\n  gray: {\n    \"--avatar-background\": tokens.gray3,\n    \"--avatar-foreground\": tokens.grayA12,\n  } as React.CSSProperties,\n  blue: {\n    \"--avatar-background\": tokens.blue3,\n    \"--avatar-foreground\": tokens.blueA12,\n  } as React.CSSProperties,\n  sky: {\n    \"--avatar-background\": tokens.sky3,\n    \"--avatar-foreground\": tokens.skyA12,\n  } as React.CSSProperties,\n  cyan: {\n    \"--avatar-background\": tokens.cyan3,\n    \"--avatar-foreground\": tokens.cyanA12,\n  } as React.CSSProperties,\n  teal: {\n    \"--avatar-background\": tokens.teal3,\n    \"--avatar-foreground\": tokens.tealA12,\n  } as React.CSSProperties,\n  mint: {\n    \"--avatar-background\": tokens.mint3,\n    \"--avatar-foreground\": tokens.mintA12,\n  } as React.CSSProperties,\n  green: {\n    \"--avatar-background\": tokens.green3,\n    \"--avatar-foreground\": tokens.greenA12,\n  } as React.CSSProperties,\n  lime: {\n    \"--avatar-background\": tokens.lime3,\n    \"--avatar-foreground\": tokens.limeA12,\n  } as React.CSSProperties,\n  yellow: {\n    \"--avatar-background\": tokens.yellow3,\n    \"--avatar-foreground\": tokens.yellowA12,\n  } as React.CSSProperties,\n  orange: {\n    \"--avatar-background\": tokens.orange3,\n    \"--avatar-foreground\": tokens.orangeA12,\n  } as React.CSSProperties,\n  bronze: {\n    \"--avatar-background\": tokens.bronze3,\n    \"--avatar-foreground\": tokens.bronzeA12,\n  } as React.CSSProperties,\n  red: {\n    \"--avatar-background\": tokens.red3,\n    \"--avatar-foreground\": tokens.redA12,\n  } as React.CSSProperties,\n  pink: {\n    \"--avatar-background\": tokens.pink3,\n    \"--avatar-foreground\": tokens.pinkA12,\n  } as React.CSSProperties,\n  purple: {\n    \"--avatar-background\": tokens.purple3,\n    \"--avatar-foreground\": tokens.purpleA12,\n  } as React.CSSProperties,\n  indigo: {\n    \"--avatar-background\": tokens.indigo3,\n    \"--avatar-foreground\": tokens.indigoA12,\n  } as React.CSSProperties,\n}\n\nconst AvatarGroupContext = React.createContext<{ size?: AvatarSize } | null>(\n  null\n)\n\nconst useStyles = makeVoltStyles({\n  root: {\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexShrink: 0,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    borderRadius: \"9999px\",\n    backgroundColor: \"var(--avatar-background)\",\n    color: \"var(--avatar-foreground)\",\n    fontWeight: tokens.fontWeightMedium,\n    textTransform: \"uppercase\",\n  },\n  sm: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n  },\n  base: {\n    width: \"2rem\",\n    height: \"2rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n  },\n  image: {\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  },\n  fallback: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n})\n\nexport type AvatarProps = Omit<\n  React.ComponentProps<typeof AvatarPrimitive.Root>,\n  \"className\" | \"color\" | \"children\"\n> & {\n  className?: string\n  src?: string\n  alt?: string\n  initials?: string\n  color?: AvatarColor\n  size?: AvatarSize\n}\n\nexport const Avatar = React.forwardRef<\n  React.ComponentRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(function Avatar(\n  { className, src, alt, initials, color, size, style, ...props },\n  ref\n) {\n  const styles = useStyles()\n  const group = React.useContext(AvatarGroupContext)\n  const resolvedSize = size ?? group?.size ?? \"base\"\n  const resolvedColor = color ?? colorForSeed(alt ?? initials ?? \"\")\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      data-slot=\"avatar\"\n      {...{ [SLOT_ATTR]: \"avatar\" }}\n      className={mergeClasses(styles.root, styles[resolvedSize], className)}\n      style={{ ...colorVars[resolvedColor], ...style }}\n      {...props}\n    >\n      <AvatarPrimitive.Image\n        data-slot=\"avatar-image\"\n        {...{ [SLOT_ATTR]: \"avatar-image\" }}\n        src={src}\n        alt={alt}\n        className={styles.image}\n      />\n      <AvatarPrimitive.Fallback\n        data-slot=\"avatar-fallback\"\n        {...{ [SLOT_ATTR]: \"avatar-fallback\" }}\n        className={styles.fallback}\n        aria-hidden=\"true\"\n      >\n        {initials}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n\nexport { AvatarGroupContext }\n"],"names":["ensurePaletteTokens","AUTO_COLORS","colorForSeed","seed","hash","i","colorVars","tokens.gray3","tokens.grayA12","tokens.blue3","tokens.blueA12","tokens.sky3","tokens.skyA12","tokens.cyan3","tokens.cyanA12","tokens.teal3","tokens.tealA12","tokens.mint3","tokens.mintA12","tokens.green3","tokens.greenA12","tokens.lime3","tokens.limeA12","tokens.yellow3","tokens.yellowA12","tokens.orange3","tokens.orangeA12","tokens.bronze3","tokens.bronzeA12","tokens.red3","tokens.redA12","tokens.pink3","tokens.pinkA12","tokens.purple3","tokens.purpleA12","tokens.indigo3","tokens.indigoA12","AvatarGroupContext","React","useStyles","makeVoltStyles","tokens.fontWeightMedium","tokens.textXs","tokens.leadingXs","tokens.textSm","tokens.leadingSm","tokens.textBase","tokens.leadingBase","Avatar","className","src","alt","initials","color","size","style","props","ref","styles","group","resolvedSize","resolvedColor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}

package/dist/components/badge/badge.js

@@ -1,12 +1,12 @@
 import { jsx as h } from "react/jsx-runtime";
 import * as v from "react";
-import { shorthands as b } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as S } from "../../renderer/contract.js";
+import { shorthands as b } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as S } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as y } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as x } from "../../styles/make-styles.js";
-import { radiusMd as y, spacingElement3 as w, spacingElement1 as r, textBase as R, radiusSm as $, spacingElement2 as C, textSm as O, textXs as k, errorA8 as A, accentA8 as B, fontWeightNormal as T } from "../../tokens/index.js";
-import { ensurePaletteTokens as W } from "../../tokens/install.js";
+import { radiusMd as w, spacingElement3 as R, spacingElement1 as r, textBase as $, radiusSm as C, spacingElement2 as O, textSm as k, textXs as A, errorA8 as B, accentA8 as T, fontWeightNormal as W } from "../../tokens/index.js";
+import { ensurePaletteTokens as E } from "../../tokens/install.js";
 import { NS as l } from "../../tokens/core.generated.js";
-import { mergeClasses as E } from "../../node_modules/@griffel/core/src/mergeClasses.js";
 const F = [
   "accent",
   "neutral",
@@ -54,7 +54,7 @@ const F = [
     whiteSpace: "nowrap",
     flexShrink: 0,
     overflow: "hidden",
-    fontWeight: T,
+    fontWeight: W,
     // NEVER write a CSS shorthand in a Griffel style object. Atoms are one declaration each, so a
     // shorthand cannot be resolved against a longhand — `border` and a later `borderColor` would
     // both survive with the winner decided by insertion order. Griffel warns at runtime, which
@@ -69,17 +69,17 @@ const F = [
       outlineWidth: "2px",
       outlineStyle: "solid",
       outlineOffset: "2px",
-      outlineColor: B
+      outlineColor: T
     },
     // v1 `aria-invalid:outline-error-a8`. Declared after the focus ring so an invalid focused
     // badge paints the error ring, matching v1's variant ordering.
     "&[aria-invalid]": {
-      outlineColor: A
+      outlineColor: B
     },
     "& > svg": { pointerEvents: "none" }
   },
   sm: {
-    fontSize: k,
+    fontSize: A,
     lineHeight: "1rem",
     letterSpacing: "0.04px",
     gap: r,
@@ -89,21 +89,21 @@ const F = [
     "& > svg": { width: "0.75rem", height: "0.75rem" }
   },
   base: {
-    fontSize: O,
+    fontSize: k,
     lineHeight: "1.25rem",
     gap: r,
-    paddingInline: C,
+    paddingInline: O,
     minWidth: "1.25rem",
-    borderRadius: $,
+    borderRadius: C,
     "& > svg": { width: "1rem", height: "1rem" }
   },
   lg: {
-    fontSize: R,
+    fontSize: $,
     lineHeight: "1.5rem",
     gap: r,
-    paddingInline: w,
+    paddingInline: R,
     minWidth: "1.5rem",
-    borderRadius: y,
+    borderRadius: w,
     "& > svg": { width: "1rem", height: "1rem" }
   }
 }), M = v.forwardRef(
@@ -115,7 +115,7 @@ const F = [
     style: c,
     ...f
   }, u) {
-    W();
+    E();
     const s = L();
     return /* @__PURE__ */ h(
       "span",
@@ -123,7 +123,7 @@ const F = [
         ref: u,
         "data-slot": "badge",
         [S]: "badge",
-        className: E(s.root, s[p], o),
+        className: y(s.root, s[p], o),
         style: { ...z[g](m), ...c },
         ...f
       }

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

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

package/dist/components/breadcrumb/breadcrumb.js

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

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

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