@epilot/zenith-react 0.1.0-next.0

package/dist/components/appearance-boundary/appearance-boundary.js

@@ -0,0 +1,53 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as t from "react";
+import { ComposeAsChild as f } from "../slot/compose-as-child.js";
+import { SLOT_ATTR as A } from "@epilot/zenith-runtime/v1";
+const l = ["light", "dark"], C = [
+  "plain",
+  "bordered",
+  "glass",
+  "tint",
+  "card"
+], h = (e) => ({
+  mode: l.includes(e.mode) ? e.mode : "light",
+  surface: C.includes(e.surface) ? e.surface : "plain"
+}), i = t.createContext(void 0), O = t.forwardRef(function({ mode: r, surface: n, asChild: m = !1, className: c, children: s, ...d }, u) {
+  const a = t.useMemo(
+    () => h({ mode: r, surface: n }),
+    [r, n]
+  ), p = m ? /* @__PURE__ */ o(
+    f,
+    {
+      ...d,
+      ref: u,
+      className: c,
+      forceProps: { "data-theme": a.mode, "data-surface": a.surface },
+      "data-theme": a.mode,
+      "data-surface": a.surface,
+      children: s
+    }
+  ) : /* @__PURE__ */ o(
+    "div",
+    {
+      ref: u,
+      "data-slot": "appearance-boundary",
+      [A]: "appearance-boundary",
+      className: c,
+      ...d,
+      "data-theme": a.mode,
+      "data-surface": a.surface,
+      children: s
+    }
+  );
+  return /* @__PURE__ */ o(i.Provider, { value: a, children: p });
+}), v = () => t.useContext(i), R = () => {
+  const e = v();
+  return e === void 0 ? {} : { "data-theme": e.mode, "data-surface": e.surface };
+};
+export {
+  O as AppearanceBoundary,
+  h as canonicalAppearance,
+  v as useAppearance,
+  R as useAppearanceAttributes
+};
+//# sourceMappingURL=appearance-boundary.js.map

package/dist/components/appearance-boundary/appearance-boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance-boundary.js","sources":["../../../src/components/appearance-boundary/appearance-boundary.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/**\n * A region that carries its own appearance — `packages/tokens/SPEC.md` §2 rule 3's document\n * boundary, as a component instead of two hand-written DOM attributes.\n *\n * **What it is for.** Mode is the page's: the shell stamps `data-theme` on `<html>` and every token\n * resolves from there through ordinary CSS inheritance. The one exception is a region that renders\n * content the page does not own — a variable, email or journey preview, a code editor — which brings\n * its own theme regardless of the shell's. The generated sheet already supports that: it emits every\n * treatment's light values under `.light[data-surface=\"<t>\"], [data-theme=\"light\"][data-surface=\"<t>\"]`\n * after the dark blocks, and the dark compounds `[data-theme=\"dark\"][data-surface=\"<t>\"]` alongside\n * them, so an element carrying BOTH attributes wins over an ancestor's mode on specificity and\n * source order. This component is the supported way to stamp that pair.\n *\n * **Why both props are required.** The two attributes are one boundary, not two independent\n * switches. The role tokens (`surface.*`, `border.*`, `shadow.*`, `blur.*`) resolve through the\n * compound `[data-theme=…][data-surface=…]` selector; stamping only `data-theme` would reset the\n * mode while leaving the treatment to be inherited from whatever ancestor happens to declare one —\n * so a boundary would silently render the page's treatment under the region's mode, which is a\n * combination nobody designed. Requiring `surface` makes the caller say which treatment the region\n * is, rather than having this component fabricate a plausible one.\n *\n * **Without a boundary nothing changes.** No component reads `document.documentElement`, and none\n * of them consults this context for anything except re-stamping portalled content (below). A tree\n * with no `AppearanceBoundary` behaves exactly as it does today: live shell attributes stay\n * authoritative, including when the shell flips them after mount.\n *\n * **Density is a separate axis** and stays that way. `DensityProvider` is independent, its context\n * is a different context, and this component neither reads nor writes `data-density`. A region can\n * be inside both, in either nesting order.\n *\n * **Scope limit, stated plainly.** The React context below is per bundled copy of this package. Two\n * independently bundled micro-frontends do not share it, so a boundary in one does not reach\n * portalled content rendered by the other. The DOM attributes it stamps *are* shared — they are\n * ordinary CSS — so the non-portal case works across copies; it is only the portal re-stamp that is\n * copy-local. Each MFE wraps its own root.\n */\n\nexport type AppearanceMode = \"light\" | \"dark\"\n\nexport type AppearanceSurface = \"plain\" | \"bordered\" | \"glass\" | \"tint\" | \"card\"\n\nexport type Appearance = {\n  mode: AppearanceMode\n  surface: AppearanceSurface\n}\n\nconst CANONICAL_MODES: readonly AppearanceMode[] = [\"light\", \"dark\"]\nconst CANONICAL_SURFACES: readonly AppearanceSurface[] = [\n  \"plain\",\n  \"bordered\",\n  \"glass\",\n  \"tint\",\n  \"card\",\n]\n\n/**\n * Per-axis normalization of invalid runtime input, mirroring `canonicalDensity`. A typed caller\n * cannot reach this; a plain-JavaScript one can, and a bad string would otherwise be stamped\n * verbatim into `data-theme`/`data-surface`, where no generated selector matches it — leaving the\n * region with the shell's appearance while `useAppearance()` reported the boundary's.\n *\n * Per axis, not all-or-nothing: a valid `mode` with a garbage `surface` keeps the mode. Collapsing\n * both to the default because one was wrong would throw away information the caller did supply.\n */\nexport const canonicalAppearance = (appearance: Appearance): Appearance => ({\n  mode: CANONICAL_MODES.includes(appearance.mode) ? appearance.mode : \"light\",\n  surface: CANONICAL_SURFACES.includes(appearance.surface)\n    ? appearance.surface\n    : \"plain\",\n})\n\n/**\n * Unexported, same as `DensityContext` — read only through `useAppearance()`. Default `undefined`:\n * a component with no `AppearanceBoundary` ancestor gets `undefined`, never a fabricated\n * `{light, plain}`, which would be this package inventing a reading of the live shell attributes it\n * deliberately does not read.\n */\nconst AppearanceContext = React.createContext<Appearance | undefined>(undefined)\n\ntype AppearanceBoundaryBaseProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"children\"\n> & {\n  /** The mode this region renders in, regardless of the page's. No default. */\n  mode: AppearanceMode\n  /** The treatment this region restates. Required — see the note on both props above. */\n  surface: AppearanceSurface\n}\n\nexport type AppearanceBoundaryProps =\n  | (AppearanceBoundaryBaseProps & {\n      asChild?: false\n      children?: React.ReactNode\n    })\n  | (AppearanceBoundaryBaseProps & {\n      asChild: true\n      children: React.ReactElement\n    })\n\n/**\n * The default is one ordinary HTML div. `asChild` stamps the same authoritative pair on one actual\n * child without a wrapper, while keeping the context provider around it so portal descendants keep\n * their nearest explicit appearance. Child markers remain the child's identity.\n */\nexport const AppearanceBoundary = React.forwardRef<\n  HTMLDivElement,\n  AppearanceBoundaryProps\n>(function AppearanceBoundary(\n  { mode, surface, asChild = false, className, children, ...props },\n  ref\n) {\n  const value = React.useMemo(\n    () => canonicalAppearance({ mode, surface }),\n    [mode, surface]\n  )\n\n  const content = asChild ? (\n    <ComposeAsChild\n      {...props}\n      ref={ref}\n      className={className}\n      forceProps={{ \"data-theme\": value.mode, \"data-surface\": value.surface }}\n      // Authoritative, spread LAST: required normalized props win over conflicting child attrs.\n      data-theme={value.mode}\n      data-surface={value.surface}\n    >\n      {children as React.ReactElement}\n    </ComposeAsChild>\n  ) : (\n    <div\n      ref={ref}\n      data-slot=\"appearance-boundary\"\n      {...{ [SLOT_ATTR]: \"appearance-boundary\" }}\n      className={className}\n      {...props}\n      // Authoritative, spread LAST — the same ordering rule `DensityProvider` applies to\n      // `data-density`. `AppearanceBoundaryProps` extends every native div prop, so a caller can\n      // pass a raw conflicting `data-theme`/`data-surface`; the normalized required props win, and\n      // the DOM attributes then always agree with the context value below.\n      data-theme={value.mode}\n      data-surface={value.surface}\n    >\n      {children}\n    </div>\n  )\n\n  return (\n    <AppearanceContext.Provider value={value}>\n      {content}\n    </AppearanceContext.Provider>\n  )\n})\n\n/**\n * The nearest explicit boundary, or `undefined` when there is none. Package-internal — NOT exported\n * from `src/index.ts`; `AppearanceBoundary` is the whole public surface. Never reads\n * `getComputedStyle` or `documentElement`: `undefined` means \"no explicit boundary in the React\n * tree\", not \"the ambient appearance is unknown\".\n */\nexport const useAppearance = (): Appearance | undefined =>\n  React.useContext(AppearanceContext)\n\n/**\n * The attributes a portal-content element re-stamps, or nothing at all.\n *\n * Portalled content is a React-tree descendant but a DOM sibling, so a boundary's DOM attributes do\n * not reach it while its context does — exactly the asymmetry `DensityProvider` was built around\n * (DENSITY-SPEC.md §4.4). One helper rather than the same ternary pair at nine call sites, and one\n * place where \"no explicit boundary ⇒ stamp NEITHER attribute\" is decided: stamping a fabricated\n * `light`/`plain` would mask the live shell inheritance that already reaches the portal correctly,\n * and stamping only one of the pair would produce the mode-without-treatment combination the\n * required props exist to prevent.\n *\n * Package-internal, and deliberately a hook returning a spreadable object rather than a public\n * `useAppearance()` + a public attribute builder — there is one consumer shape and it is inside\n * this package.\n */\nexport const useAppearanceAttributes = (): {\n  \"data-theme\"?: AppearanceMode\n  \"data-surface\"?: AppearanceSurface\n} => {\n  const appearance = useAppearance()\n  return appearance === undefined\n    ? {}\n    : { \"data-theme\": appearance.mode, \"data-surface\": appearance.surface }\n}\n"],"names":["CANONICAL_MODES","CANONICAL_SURFACES","canonicalAppearance","appearance","AppearanceContext","React","AppearanceBoundary","mode","surface","asChild","className","children","props","ref","value","content","jsx","ComposeAsChild","SLOT_ATTR","useAppearance","useAppearanceAttributes"],"mappings":";;;;AAmDA,MAAMA,IAA6C,CAAC,SAAS,MAAM,GAC7DC,IAAmD;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWaC,IAAsB,CAACC,OAAwC;AAAA,EAC1E,MAAMH,EAAgB,SAASG,EAAW,IAAI,IAAIA,EAAW,OAAO;AAAA,EACpE,SAASF,EAAmB,SAASE,EAAW,OAAO,IACnDA,EAAW,UACX;AACN,IAQMC,IAAoBC,EAAM,cAAsC,MAAS,GA2BlEC,IAAqBD,EAAM,WAGtC,SACA,EAAE,MAAAE,GAAM,SAAAC,GAAS,SAAAC,IAAU,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC1DC,GACA;AACA,QAAMC,IAAQT,EAAM;AAAA,IAClB,MAAMH,EAAoB,EAAE,MAAAK,GAAM,SAAAC,GAAS;AAAA,IAC3C,CAACD,GAAMC,CAAO;AAAA,EAAA,GAGVO,IAAUN,IACd,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGL;AAAA,MACJ,KAAAC;AAAA,MACA,WAAAH;AAAA,MACA,YAAY,EAAE,cAAcI,EAAM,MAAM,gBAAgBA,EAAM,QAAA;AAAA,MAE9D,cAAYA,EAAM;AAAA,MAClB,gBAAcA,EAAM;AAAA,MAEnB,UAAAH;AAAA,IAAA;AAAA,EAAA,IAGH,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACK,CAAS,GAAG;AAAA,MACnB,WAAAR;AAAA,MACC,GAAGE;AAAA,MAKJ,cAAYE,EAAM;AAAA,MAClB,gBAAcA,EAAM;AAAA,MAEnB,UAAAH;AAAA,IAAA;AAAA,EAAA;AAIL,SACE,gBAAAK,EAACZ,EAAkB,UAAlB,EAA2B,OAAAU,GACzB,UAAAC,GACH;AAEJ,CAAC,GAQYI,IAAgB,MAC3Bd,EAAM,WAAWD,CAAiB,GAiBvBgB,IAA0B,MAGlC;AACH,QAAMjB,IAAagB,EAAA;AACnB,SAAOhB,MAAe,SAClB,CAAA,IACA,EAAE,cAAcA,EAAW,MAAM,gBAAgBA,EAAW,QAAA;AAClE;"}

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

@@ -0,0 +1,142 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import * as a from "react";
+import { mergeClasses as g, SLOT_ATTR as m, shorthands as N } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as S } from "../../styles/make-styles.js";
+import { grayA11 as I, leadingSm as E, textSm as L, spacingElement2 as w, spacingElement1 as P, radiusMd as k, body as C } from "../../tokens/index.js";
+import { AvatarGroupContext as z, Avatar as D } from "./avatar.js";
+const R = S({
+  root: {
+    display: "flex",
+    alignItems: "center"
+  },
+  item: {
+    position: "relative",
+    marginLeft: "-0.5rem",
+    transitionProperty: "transform",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ":first-child": { marginLeft: "0" }
+  },
+  itemBeforeActive: {
+    transform: "translateX(-0.75rem)"
+  },
+  itemAfterActive: {
+    transform: "translateX(0.75rem)"
+  },
+  itemActive: {
+    zIndex: 10
+  },
+  overflow: {
+    position: "relative",
+    zIndex: 0,
+    ...N.border("0", "solid", "transparent"),
+    cursor: "pointer"
+  },
+  overflowPanel: {
+    position: "absolute",
+    top: "100%",
+    left: "0",
+    zIndex: 20,
+    width: "max-content",
+    maxWidth: "20rem",
+    padding: w,
+    backgroundColor: C,
+    borderRadius: k,
+    boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+  },
+  overflowList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: P
+  },
+  overflowItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: w
+  },
+  overflowName: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: L,
+    lineHeight: E,
+    color: I
+  }
+}), V = a.forwardRef(
+  function({ max: f, size: v, className: h, children: A, ...b }, y) {
+    const r = R(), n = a.Children.toArray(A).filter(a.isValidElement), d = typeof f == "number" ? n.slice(0, f) : n, p = n.length - d.length, [l, s] = a.useState(null), [x, u] = a.useState(!1);
+    return /* @__PURE__ */ o(z.Provider, { value: { size: v }, children: /* @__PURE__ */ c(
+      "div",
+      {
+        ref: y,
+        "data-slot": "avatar-group",
+        [m]: "avatar-group",
+        className: g(r.root, h),
+        ...b,
+        children: [
+          d.map((e, t) => /* @__PURE__ */ o(
+            "div",
+            {
+              "data-slot": "avatar-group-item",
+              [m]: "avatar-group-item",
+              onPointerEnter: () => s(t),
+              onPointerLeave: () => s((i) => i === t ? null : i),
+              onFocus: () => s(t),
+              onBlur: () => s((i) => i === t ? null : i),
+              className: g(
+                r.item,
+                l !== null && t < l && r.itemBeforeActive,
+                l !== null && t > l && r.itemAfterActive,
+                l === t && r.itemActive
+              ),
+              children: e
+            },
+            t
+          )),
+          p > 0 && /* @__PURE__ */ c(
+            "div",
+            {
+              "data-slot": "avatar-group-overflow-wrapper",
+              [m]: "avatar-group-overflow-wrapper",
+              className: r.item,
+              children: [
+                /* @__PURE__ */ o(
+                  D,
+                  {
+                    size: v,
+                    color: "gray",
+                    initials: `+${p}`,
+                    "aria-label": `${p} more`,
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: () => u((e) => !e),
+                    onKeyDown: (e) => {
+                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u((t) => !t));
+                    },
+                    className: r.overflow
+                  }
+                ),
+                x && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    "data-slot": "avatar-group-overflow",
+                    [m]: "avatar-group-overflow",
+                    className: r.overflowPanel,
+                    children: /* @__PURE__ */ o("ul", { className: r.overflowList, children: n.map((e, t) => /* @__PURE__ */ c("li", { className: r.overflowItem, children: [
+                      e,
+                      a.isValidElement(e) && e.props.alt && /* @__PURE__ */ o("span", { className: r.overflowName, children: e.props.alt })
+                    ] }, t)) })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+export {
+  V as AvatarGroup
+};
+//# sourceMappingURL=avatar-group.js.map

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

@@ -0,0 +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 \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } 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 = makeZenithStyles({\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","makeZenithStyles","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":";;;;;;AAcA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,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,YAAYC;AAAAA,IACZ,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,IAASlB,EAAA,GACTmB,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;"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,174 @@
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import * as i from "react";
+import { Root as p, Image as y, Fallback as A } from "../../vendor/.bun/@radix-ui_react-avatar@1.1.10_2b23df507bdda662/vendor/@radix-ui/react-avatar/dist/index.js";
+import { SLOT_ATTR as n, mergeClasses as x } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as S } from "../../styles/make-styles.js";
+import { useZenithPaletteTokensFor as w } from "../../tokens/use-palette-tokens.js";
+import { indigoA12 as C, indigo3 as z, purpleA12 as R, purple3 as T, pinkA12 as j, pink3 as F, redA12 as O, red3 as H, bronzeA12 as I, bronze3 as N, orangeA12 as X, orange3 as B, yellowA12 as L, yellow3 as W, limeA12 as Z, lime3 as _, greenA12 as G, green3 as M, mintA12 as P, mint3 as U, tealA12 as V, teal3 as Y, cyanA12 as q, cyan3 as D, skyA12 as E, sky3 as J, blueA12 as K, blue3 as Q, 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";
+const c = [
+  "blue",
+  "sky",
+  "cyan",
+  "teal",
+  "mint",
+  "green",
+  "lime",
+  "orange",
+  "bronze",
+  "pink",
+  "purple",
+  "indigo"
+], ga = (t) => {
+  let a = 0;
+  for (let r = 0; r < t.length; r++)
+    a = a * 31 + t.charCodeAt(r) >>> 0;
+  return c[a % c.length];
+}, da = {
+  gray: {
+    "--avatar-background": aa,
+    "--avatar-foreground": $
+  },
+  blue: {
+    "--avatar-background": Q,
+    "--avatar-foreground": K
+  },
+  sky: {
+    "--avatar-background": J,
+    "--avatar-foreground": E
+  },
+  cyan: {
+    "--avatar-background": D,
+    "--avatar-foreground": q
+  },
+  teal: {
+    "--avatar-background": Y,
+    "--avatar-foreground": V
+  },
+  mint: {
+    "--avatar-background": U,
+    "--avatar-foreground": P
+  },
+  green: {
+    "--avatar-background": M,
+    "--avatar-foreground": G
+  },
+  lime: {
+    "--avatar-background": _,
+    "--avatar-foreground": Z
+  },
+  yellow: {
+    "--avatar-background": W,
+    "--avatar-foreground": L
+  },
+  orange: {
+    "--avatar-background": B,
+    "--avatar-foreground": X
+  },
+  bronze: {
+    "--avatar-background": N,
+    "--avatar-foreground": I
+  },
+  red: {
+    "--avatar-background": H,
+    "--avatar-foreground": O
+  },
+  pink: {
+    "--avatar-background": F,
+    "--avatar-foreground": j
+  },
+  purple: {
+    "--avatar-background": T,
+    "--avatar-foreground": R
+  },
+  indigo: {
+    "--avatar-background": z,
+    "--avatar-foreground": C
+  }
+}, sa = i.createContext(
+  null
+), ca = S({
+  root: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    overflowX: "hidden",
+    overflowY: "hidden",
+    borderRadius: "9999px",
+    backgroundColor: "var(--avatar-background)",
+    color: "var(--avatar-foreground)",
+    fontWeight: la,
+    textTransform: "uppercase"
+  },
+  sm: {
+    width: "1.5rem",
+    height: "1.5rem",
+    fontSize: ia,
+    lineHeight: na
+  },
+  base: {
+    width: "2rem",
+    height: "2rem",
+    fontSize: oa,
+    lineHeight: ta
+  },
+  lg: {
+    width: "2.5rem",
+    height: "2.5rem",
+    fontSize: ea,
+    lineHeight: ra
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  fallback: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  }
+}), ka = i.forwardRef(function({ className: a, src: r, alt: l, initials: g, color: u, size: v, style: m, ...f }, b) {
+  const e = ca(), o = i.useContext(sa), h = v ?? (o == null ? void 0 : o.size) ?? "base", d = u ?? ga(l ?? g ?? "");
+  return w(d), /* @__PURE__ */ k(
+    p,
+    {
+      ref: b,
+      "data-slot": "avatar",
+      [n]: "avatar",
+      className: x(e.root, e[h], a),
+      style: { ...da[d], ...m },
+      ...f,
+      children: [
+        /* @__PURE__ */ s(
+          y,
+          {
+            "data-slot": "avatar-image",
+            [n]: "avatar-image",
+            src: r,
+            alt: l,
+            className: e.image
+          }
+        ),
+        /* @__PURE__ */ s(
+          A,
+          {
+            "data-slot": "avatar-fallback",
+            [n]: "avatar-fallback",
+            className: e.fallback,
+            "aria-hidden": "true",
+            children: g
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ka as Avatar,
+  sa as AvatarGroupContext
+};
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\nimport * as tokens from \"../../tokens\"\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 = makeZenithStyles({\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  /** Accessible name for the image, and the seed for the automatic colour. */\n  alt?: string\n  /** Shown when no `src` loads. Also seeds the automatic colour when `alt` is absent. */\n  initials?: string\n  /**\n   * Leave this unset and the colour is derived by hashing `alt`, falling back to\n   * `initials` — so the same person keeps the same colour everywhere, and two\n   * people rarely collide. Set it only to override that.\n   */\n  color?: AvatarColor\n  /** @default \"base\" */\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  // Was a module-scope call, so merely IMPORTING Avatar installed 63 kB of palette CSS whether one\n  // ever rendered. Now it is per-instance and keyed on the resolved family, installed at commit\n  // time (WP2B2) via a hook called unconditionally every render. Every auto colour is decorative,\n  // so a seeded avatar still installs the sheet; an explicit `color=\"gray\"` no longer does, and\n  // neither does an import that never renders.\n  useZenithPaletteTokensFor(resolvedColor)\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":["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","makeZenithStyles","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","useZenithPaletteTokensFor","jsxs","AvatarPrimitive.Root","SLOT_ATTR","mergeClasses","jsx","AvatarPrimitive.Image","AvatarPrimitive.Fallback"],"mappings":"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"}

package/dist/components/badge/badge.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { NS, PALETTE_NS } from \"../../tokens\"\nimport { isCoreFamily } from \"../../tokens/install\"\nimport { useZenithPaletteTokensFor } from \"../../tokens/use-palette-tokens\"\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 = \"--zenith-badge-bg\"\nconst FG = \"--zenith-badge-fg\"\nconst BD = \"--zenith-badge-bd\"\n\nconst resolveColor = (color: BadgeColor): string =>\n  color === \"neutral\" ? \"gray\" : color\n\n/**\n * The namespace fix. `resolveColor` runs FIRST so `neutral` is classified as `gray` (core) rather\n * than as the literal string \"neutral\" (which is in neither sheet's family list) — same order\n * `semantic`/`primitive` already apply it in. This does not touch `useZenithPaletteTokensFor(color)`\n * above, which still receives the raw, unresolved `color` prop and therefore still installs the\n * palette sheet for `color=\"neutral\"` even though the resolved family needs none of it — a\n * separate, pre-existing inefficiency this fix does not optimize.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: BadgeColor, slot: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-sem-${family}-${slot})`\n}\nconst primitive = (color: BadgeColor, step: string): string => {\n  const family = resolveColor(color)\n  return `var(--zenith-${namespaceFor(family)}-${family}-${step})`\n}\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 = makeZenithStyles({\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 still arrive from an expression the build cannot see, so this has to\n    // be re-evaluated every commit (WP2B2 — the hook closes over this render's resolved value) —\n    // but it is the resolved family that decides, and a core one needs no palette sheet.\n    useZenithPaletteTokensFor(color)\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","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","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","useZenithPaletteTokensFor","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":"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"}