@epilot/zenith-react 0.1.0-next.0

package/dist/components/pill/pill.js

@@ -0,0 +1,161 @@
+import { jsxs as w, jsx as z } from "react/jsx-runtime";
+import * as O from "react";
+import { mergeClasses as R, SLOT_ATTR as k, shorthands as L } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as N } from "../../styles/make-styles.js";
+import { spacingGroup2 as g, spacingElement1 as v, accentA8 as T, radiusMd as E, spacingElement2 as I, fontWeightBold as P, leadingXs as A, textXs as B } from "../../tokens/index.js";
+import { useZenithPaletteTokensFor as C } from "../../tokens/use-palette-tokens.js";
+import { ClearButton as F } from "../../lib/clear-button.js";
+import { NS as D } from "../../tokens/core.meta.generated.js";
+import { NS as G } from "../../tokens/palette.generated.js";
+import { isCoreFamily as W } from "../../packages/tokens/dist/install.js";
+const Y = [
+  "blue",
+  "sky",
+  "mint",
+  "lime",
+  "green",
+  "teal",
+  "cyan",
+  "indigo",
+  "purple",
+  "pink",
+  "red",
+  "orange",
+  "yellow",
+  "bronze",
+  "gray",
+  "accent",
+  "warning",
+  "success",
+  "error"
+], p = "--zenith-pill-bg", d = "--zenith-pill-fg", m = "--zenith-pill-bd", a = "--zenith-pill-hov", u = (e) => W(e) ? D : G, t = (e, o) => `var(--zenith-${u(e)}-sem-${e}-${o})`, _ = (e, o) => `var(--zenith-${u(e)}-${e}-${o})`, j = {
+  soft: (e) => ({
+    [p]: t(e, "soft"),
+    [d]: t(e, "light"),
+    [m]: "transparent",
+    [a]: t(e, "soft-hover")
+  }),
+  solid: (e) => ({
+    [p]: t(e, "solid"),
+    [d]: t(e, "contrast"),
+    [m]: "transparent",
+    [a]: t(e, "solid-hover")
+  }),
+  surface: (e) => ({
+    [p]: t(e, "surface"),
+    [d]: t(e, "light"),
+    [m]: _(e, "a6"),
+    [a]: t(e, "surface-hover")
+  })
+}, H = N({
+  root: {
+    display: "inline-flex",
+    alignItems: "center",
+    // v1 `h-6` — a fixed height, not a minimum.
+    height: "1.5rem",
+    gap: v,
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    overflow: "hidden",
+    fontSize: B,
+    lineHeight: A,
+    fontWeight: P,
+    paddingInline: I,
+    borderRadius: E,
+    transitionProperty: "color, box-shadow, background-color",
+    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one
+    // custom property; `border` and a later `borderColor` would both survive.
+    ...L.border("1px", "solid", `var(${m})`),
+    // The whole point: one rule each, colour supplied per instance.
+    backgroundColor: `var(${p})`,
+    color: `var(${d})`,
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: T
+    },
+    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.
+    "& > svg": {
+      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no
+      // business describing a dimension. The scale has no size family — noted rather than faked.
+      width: "1rem",
+      height: "1rem",
+      flexShrink: 0,
+      pointerEvents: "none"
+    }
+  },
+  interactive: {
+    cursor: "pointer",
+    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant
+    // by VARIANT_SLOTS — never per-colour hover rules.
+    ":hover": { backgroundColor: `var(${a})` }
+  },
+  hasRemove: {
+    // v1's `pr-1` when a clear button is present.
+    paddingRight: v
+  },
+  disabled: {
+    pointerEvents: "none"
+  },
+  removeSize: {
+    // v1's `size-4` on the composed ClearButton.
+    width: g,
+    height: g
+  }
+}), ee = O.forwardRef(function({
+  className: o,
+  color: S = "accent",
+  variant: y = "soft",
+  disabled: r,
+  onRemove: h,
+  onClick: i,
+  children: b,
+  ...x
+}, $) {
+  const n = H(), c = r ? "gray" : S;
+  C(c);
+  const s = !!i && !r, f = j[y](c);
+  return s || delete f[a], /* @__PURE__ */ w(
+    "span",
+    {
+      ref: $,
+      "data-slot": "pill",
+      [k]: "pill",
+      "data-disabled": r || void 0,
+      role: s ? "button" : void 0,
+      tabIndex: s ? 0 : void 0,
+      onClick: i,
+      onKeyDown: s ? (l) => {
+        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i == null || i(l));
+      } : void 0,
+      className: R(
+        n.root,
+        s && n.interactive,
+        h && n.hasRemove,
+        r && n.disabled,
+        o
+      ),
+      style: { ...f },
+      ...x,
+      children: [
+        b,
+        h && // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon
+        // fallback all live in the lib, not inline.
+        /* @__PURE__ */ z(
+          F,
+          {
+            className: n.removeSize,
+            onClick: h,
+            disabled: r
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Y as PILL_COLORS,
+  ee as Pill
+};
+//# sourceMappingURL=pill.js.map

package/dist/components/pill/pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.js","sources":["../../../src/components/pill/pill.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\"\nimport { ClearButton } from \"../../lib/clear-button\"\n\n/**\n * Pill — same colour-matrix collapse as Badge, plus a hover background.\n *\n * v1 enumerates 19 colours x 3 styles as 57 `compoundVariants`, each a distinct class string\n * built by interpolation (`volt-bg-${color}-soft`), which Tailwind's scanner cannot see and\n * `safelist.css` exists to force into existence. The hover state made that 57 more per-colour\n * rules. Here the colour is a VALUE, not part of a class name: the four atoms below read four\n * custom properties, the component sets those inline from the `color` prop, and a single `:hover`\n * atom reads the hover background. Total rules: one small set per style variant — 9 colours' worth\n * of rules cover all 19 x 3 combinations.\n */\n\nconst COLORS = [\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  \"gray\",\n  \"accent\",\n  \"warning\",\n  \"success\",\n  \"error\",\n] as const\n\nexport type PillColor = (typeof COLORS)[number]\nexport type PillVariant = \"soft\" | \"solid\" | \"surface\"\n\n/** The four slots a variant can paint. Set inline; read by the atoms below. */\nconst BG = \"--zenith-pill-bg\"\nconst FG = \"--zenith-pill-fg\"\nconst BD = \"--zenith-pill-bd\"\nconst HOV = \"--zenith-pill-hov\"\n\n/**\n * The namespace fix — same shape as Badge's. Pill has no `neutral` alias of its own (its\n * gray-when-disabled resolution already happens in the component body, before `VARIANT_SLOTS` is\n * called — `color` here is always the already-resolved family), so no extra resolve step is needed\n * before classifying it.\n */\nconst namespaceFor = (family: string): string =>\n  isCoreFamily(family) ? NS : PALETTE_NS\n\nconst semantic = (color: PillColor, slot: string): string =>\n  `var(--zenith-${namespaceFor(color)}-sem-${color}-${slot})`\nconst primitive = (color: PillColor, step: string): string =>\n  `var(--zenith-${namespaceFor(color)}-${color}-${step})`\n\n/**\n * Which token each variant pulls into each slot. This replaces the 57-entry compound matrix: it is\n * data about three variants, not about 57 combinations. Text uses the `light` semantic slot, which\n * is Pill's one departure from Badge (Badge uses `default`).\n */\nconst VARIANT_SLOTS: Record<\n  PillVariant,\n  (color: PillColor) => Record<string, string>\n> = {\n  soft: (c) => ({\n    [BG]: semantic(c, \"soft\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"soft-hover\"),\n  }),\n  solid: (c) => ({\n    [BG]: semantic(c, \"solid\"),\n    [FG]: semantic(c, \"contrast\"),\n    [BD]: \"transparent\",\n    [HOV]: semantic(c, \"solid-hover\"),\n  }),\n  surface: (c) => ({\n    [BG]: semantic(c, \"surface\"),\n    [FG]: semantic(c, \"light\"),\n    [BD]: primitive(c, \"a6\"),\n    [HOV]: semantic(c, \"surface-hover\"),\n  }),\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    // v1 `h-6` — a fixed height, not a minimum.\n    height: \"1.5rem\",\n    gap: tokens.spacingElement1,\n    whiteSpace: \"nowrap\",\n    flexShrink: 0,\n    overflow: \"hidden\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    fontWeight: tokens.fontWeightBold,\n    paddingInline: tokens.spacingElement2,\n    borderRadius: tokens.radiusMd,\n    transitionProperty: \"color, box-shadow, background-color\",\n    // NEVER write a CSS shorthand in a Griffel style object — see Badge. One atom reads one\n    // custom property; `border` and a later `borderColor` would both survive.\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    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n    // v1 `[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:pointer-events-none`.\n    \"& > svg\": {\n      // Literals, not tokens.spacingGroup2: that happens to be 1rem, but a spacing token has no\n      // business describing a dimension. The scale has no size family — noted rather than faked.\n      width: \"1rem\",\n      height: \"1rem\",\n      flexShrink: 0,\n      pointerEvents: \"none\",\n    },\n  },\n  interactive: {\n    cursor: \"pointer\",\n    // The one hover rule. It reads the fourth custom property, line-picked per colour and variant\n    // by VARIANT_SLOTS — never per-colour hover rules.\n    \":hover\": { backgroundColor: `var(${HOV})` },\n  },\n  hasRemove: {\n    // v1's `pr-1` when a clear button is present.\n    paddingRight: tokens.spacingElement1,\n  },\n  disabled: {\n    pointerEvents: \"none\",\n  },\n  removeSize: {\n    // v1's `size-4` on the composed ClearButton.\n    width: tokens.spacingGroup2,\n    height: tokens.spacingGroup2,\n  },\n})\n\nexport type PillProps = Omit<React.ComponentProps<\"span\">, \"color\"> & {\n  color?: PillColor\n  /**\n   * Named `variant`, not `style`. v1 called this `style`, which shadows the HTML `style` attribute.\n   * Retrocompat is not a requirement here, so the collision is fixed rather than inherited.\n   */\n  variant?: PillVariant\n  disabled?: boolean\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const Pill = React.forwardRef<HTMLSpanElement, PillProps>(function Pill(\n  {\n    className,\n    color = \"accent\",\n    variant = \"soft\",\n    disabled,\n    onRemove,\n    onClick,\n    children,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // v1 resolves to gray when disabled and only makes the pill interactive when it has an onClick.\n  const resolvedColor: PillColor = disabled ? \"gray\" : color\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) — but\n  // it is the RESOLVED family that decides, and the five core families Pill offers (accent, gray,\n  // warning, success, error) need no palette sheet at all.\n  useZenithPaletteTokensFor(resolvedColor)\n  const interactive = !!onClick && !disabled\n\n  // The hover slot is only meaningful while interactive — v1 attaches its hover background class\n  // (`interactive && hoverStyleClasses[...]`) only then, so drop it from the inline properties\n  // otherwise. Setting it unconditionally would be harmless but would claim a hover state that\n  // cannot be reached.\n  const slot = VARIANT_SLOTS[variant](resolvedColor)\n  if (!interactive) delete slot[HOV]\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"pill\"\n      {...{ [SLOT_ATTR]: \"pill\" }}\n      data-disabled={disabled || undefined}\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault()\n                onClick?.(e as unknown as React.MouseEvent<HTMLSpanElement>)\n              }\n            }\n          : undefined\n      }\n      className={mergeClasses(\n        styles.root,\n        interactive && styles.interactive,\n        onRemove && styles.hasRemove,\n        disabled && styles.disabled,\n        className\n      )}\n      style={{ ...slot } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        // v1 composes the shared ClearButton here — hover, focus ring and the size-3 CloseIcon\n        // fallback all live in the lib, not inline.\n        <ClearButton\n          className={styles.removeSize}\n          onClick={onRemove}\n          disabled={disabled}\n        />\n      )}\n    </span>\n  )\n})\n\nexport { COLORS as PILL_COLORS }\n"],"names":["COLORS","BG","FG","BD","HOV","namespaceFor","family","isCoreFamily","NS","PALETTE_NS","semantic","color","slot","primitive","step","VARIANT_SLOTS","c","useStyles","makeZenithStyles","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightBold","tokens.spacingElement2","tokens.radiusMd","shorthands","tokens.accentA8","tokens.spacingGroup2","Pill","React","className","variant","disabled","onRemove","onClick","children","props","ref","styles","resolvedColor","useZenithPaletteTokensFor","interactive","jsxs","SLOT_ATTR","e","mergeClasses","jsx","ClearButton"],"mappings":"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"}

package/dist/components/popover/popover.js

@@ -0,0 +1,147 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "react";
+import { Root as g, Anchor as v, Content as y, Portal as P, Trigger as b } from "../../vendor/.bun/@radix-ui_react-popover@1.1.15_2b23df507bdda662/vendor/@radix-ui/react-popover/dist/index.js";
+import { SLOT_ATTR as s, mergeClasses as h, shorthands as p } from "@epilot/zenith-runtime/v1";
+import { useAppearanceAttributes as x } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as R } from "../density-provider/density-provider.js";
+import { makeZenithStyles as A } from "../../styles/make-styles.js";
+import { spacingElement2 as i, grayA12 as T, body as C, spacingGroup2 as N, grayA1 as w, radiusXl as D } from "../../tokens/index.js";
+const S = A({
+  popup: {
+    backgroundColor: C,
+    color: T,
+    transformOrigin: "var(--radix-popover-content-transform-origin)",
+    ...p.borderRadius(D),
+    ...p.border("1px", "solid", w),
+    // v1 shadow-md
+    boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
+    outlineStyle: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+      animationIterationCount: "1",
+      "&[data-state='open']": {
+        animationDuration: "0.01ms"
+      }
+    },
+    "&[data-state='open']": {
+      animationName: {
+        from: { opacity: 0, transform: "scale(0.95)" },
+        to: { opacity: 1, transform: "scale(1)" }
+      },
+      animationDuration: "150ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
+    },
+    "&[data-state='open'][data-side='bottom']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateY(-${i}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateY(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='left']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateX(${i}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateX(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='right']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateX(-${i}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateX(0) scale(1)" }
+      }
+    },
+    "&[data-state='open'][data-side='top']": {
+      animationName: {
+        from: {
+          opacity: 0,
+          transform: `translateY(${i}) scale(0.95)`
+        },
+        to: { opacity: 1, transform: "translateY(0) scale(1)" }
+      }
+    },
+    "&[data-state='closed']": {
+      animationName: {
+        from: { opacity: 1, transform: "scale(1)" },
+        to: { opacity: 0, transform: "scale(0.95)" }
+      },
+      animationDuration: "100ms",
+      animationTimingFunction: "cubic-bezier(0.4, 0, 1, 1)"
+    }
+  },
+  popupPadding: {
+    ...p.padding(N)
+  }
+}), O = e.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ r(g, { "data-slot": "popover", ...o });
+  }
+), j = e.forwardRef(function({ className: o, ...t }, a) {
+  return /* @__PURE__ */ r(
+    b,
+    {
+      ref: a,
+      "data-slot": "popover-trigger",
+      [s]: "popover-trigger",
+      className: o,
+      ...t
+    }
+  );
+}), E = e.forwardRef(
+  function(o, t) {
+    return /* @__PURE__ */ r(
+      P,
+      {
+        "data-slot": "popover-portal",
+        [s]: "popover-portal",
+        ...o
+      }
+    );
+  }
+), G = e.forwardRef(function({ className: o, ...t }, a) {
+  return /* @__PURE__ */ r(
+    v,
+    {
+      ref: a,
+      "data-slot": "popover-anchor",
+      [s]: "popover-anchor",
+      className: o,
+      ...t
+    }
+  );
+}), I = e.forwardRef(function({ className: o, align: t = "center", sideOffset: a = 4, flush: d = !1, ...f }, l) {
+  const m = S(), c = R(), u = x();
+  return /* @__PURE__ */ r(
+    y,
+    {
+      ref: l,
+      "data-slot": "popover-content",
+      [s]: "popover-content",
+      ...c !== void 0 ? { "data-density": c } : {},
+      ...u,
+      align: t,
+      sideOffset: a,
+      className: h(
+        m.popup,
+        !d && m.popupPadding,
+        o
+      ),
+      ...f
+    }
+  );
+});
+export {
+  O as Popover,
+  G as PopoverAnchor,
+  I as PopoverContent,
+  E as PopoverPortal,
+  j as PopoverTrigger
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { useAppearanceAttributes } from \"../appearance-boundary/appearance-boundary\"\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeZenithStyles({\n  popup: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    transformOrigin: \"var(--radix-popover-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    // v1 shadow-md\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    outlineStyle: \"none\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      animationDuration: \"0.01ms\",\n      animationIterationCount: \"1\",\n      \"&[data-state='open']\": {\n        animationDuration: \"0.01ms\",\n      },\n    },\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  popupPadding: {\n    ...shorthands.padding(tokens.spacingGroup2),\n  },\n})\n\nexport type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(\n  function Popover(props, _ref) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n  }\n)\n\nexport type PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>\n\nexport const PopoverTrigger = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      data-slot=\"popover-trigger\"\n      {...{ [SLOT_ATTR]: \"popover-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverPortalProps = React.ComponentProps<\n  typeof PopoverPrimitive.Portal\n>\n\nexport const PopoverPortal = React.forwardRef<HTMLElement, PopoverPortalProps>(\n  function PopoverPortal(props, _ref) {\n    return (\n      <PopoverPrimitive.Portal\n        data-slot=\"popover-portal\"\n        {...{ [SLOT_ATTR]: \"popover-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type PopoverAnchorProps = React.ComponentProps<\n  typeof PopoverPrimitive.Anchor\n>\n\nexport const PopoverAnchor = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Anchor>,\n  PopoverAnchorProps\n>(function PopoverAnchor({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Anchor\n      ref={ref}\n      data-slot=\"popover-anchor\"\n      {...{ [SLOT_ATTR]: \"popover-anchor\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverContentProps = React.ComponentProps<\n  typeof PopoverPrimitive.Content\n> & {\n  flush?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  { className, align = \"center\", sideOffset = 4, flush = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n  // SPEC.md §2 rule 3 — the same portal asymmetry, for the appearance pair: re-stamp the\n  // nearest explicit AppearanceBoundary's mode+surface, or neither attribute when there is\n  // none, leaving live shell inheritance in place.\n  const appearance = useAppearanceAttributes()\n\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      data-slot=\"popover-content\"\n      {...{ [SLOT_ATTR]: \"popover-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      {...appearance}\n      align={align}\n      sideOffset={sideOffset}\n      className={mergeClasses(\n        styles.popup,\n        !flush && styles.popupPadding,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusXl","tokens.grayA1","tokens.spacingElement2","tokens.spacingGroup2","Popover","React","props","_ref","PopoverPrimitive.Root","PopoverTrigger","className","ref","jsx","PopoverPrimitive.Trigger","SLOT_ATTR","PopoverPortal","PopoverPrimitive.Portal","PopoverAnchor","PopoverPrimitive.Anchor","PopoverContent","align","sideOffset","flush","styles","override","useDensity","appearance","useAppearanceAttributes","PopoverPrimitive.Content","mergeClasses"],"mappings":"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"}

package/dist/components/radio/radio.js

@@ -0,0 +1,139 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import * as d from "react";
+import { Root as h, Item as b, Indicator as x } from "../../vendor/.bun/@radix-ui_react-radio-group@1.3.8_2b23df507bdda662/vendor/@radix-ui/react-radio-group/dist/index.js";
+import { mergeClasses as p, SLOT_ATTR as s, shorthands as t } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as C } from "../../styles/make-styles.js";
+import { semAccentContrast as l, errorA10 as k, semFocusRing as u, semErrorSoft as w, grayA3 as m, semAccentSolid as R, semAccentOnSoft as y, semAccentSoft as v, errorA8 as S, accentA7 as A, spacingElement3 as I } from "../../tokens/index.js";
+const j = d.forwardRef(
+  function(o, r) {
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        ref: r,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...o,
+        children: /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" })
+      }
+    );
+  }
+), f = C({
+  group: {
+    display: "grid",
+    ...t.gap(I)
+  },
+  item: {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    aspectRatio: "1 / 1",
+    width: "1rem",
+    height: "1rem",
+    flexShrink: 0,
+    borderRadius: "9999px",
+    ...t.border("1px", "solid", A),
+    backgroundColor: v,
+    color: y,
+    // Tailwind `shadow-xs` — literal per CONVENTIONS B7
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "color, box-shadow",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    ":focus-visible": {
+      outlineOffset: "2px",
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: u
+    },
+    "&[data-disabled]": {
+      cursor: "not-allowed",
+      backgroundColor: m,
+      ...t.borderColor("transparent")
+    },
+    "&[data-state='checked']": {
+      backgroundColor: R,
+      color: l
+    },
+    "&[data-state='checked'][data-disabled]": {
+      backgroundColor: m
+    },
+    "&[aria-invalid='true'], &[data-invalid]": {
+      backgroundColor: w,
+      ...t.borderColor(S),
+      outlineColor: u
+    },
+    "&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]": {
+      backgroundColor: k,
+      ...t.borderColor("transparent")
+    }
+  },
+  indicator: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%"
+  },
+  icon: {
+    color: l,
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "0.5rem",
+    height: "0.5rem",
+    transform: "translate(-50%, -50%)",
+    pointerEvents: "none"
+  }
+}), O = d.forwardRef(function({ className: o, ...r }, i) {
+  const a = f();
+  return /* @__PURE__ */ e(
+    h,
+    {
+      ref: i,
+      "data-slot": "radio-group",
+      [s]: "radio-group",
+      className: p(a.group, o),
+      ...r
+    }
+  );
+}), z = d.forwardRef(function({ className: o, children: r, ...i }, a) {
+  const n = f();
+  return /* @__PURE__ */ g(
+    b,
+    {
+      ref: a,
+      "data-slot": "radio-group-item",
+      [s]: "radio-group-item",
+      className: p(n.item, o),
+      ...i,
+      children: [
+        /* @__PURE__ */ e(
+          x,
+          {
+            "data-slot": "radio-group-indicator",
+            [s]: "radio-group-indicator",
+            className: n.indicator,
+            children: /* @__PURE__ */ e(j, { className: n.icon })
+          }
+        ),
+        r
+      ]
+    }
+  );
+});
+export {
+  O as RadioGroup,
+  z as RadioGroupItem
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\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\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeZenithStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.semErrorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    color: tokens.semAccentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeZenithStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.semAccentSoft","tokens.semAccentOnSoft","tokens.semFocusRing","tokens.grayA3","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semErrorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":";;;;;;AAQA,MAAMA,IAAaC,EAAM;AAAA,EACvB,SAAoBC,GAAOC,GAAK;AAC9B,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAGD;AAAA,QAEJ,4BAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrC;AACF,GAEMG,IAAYC,EAAiB;AAAA,EACjC,OAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAGC,EAAW,IAAIC,CAAsB;AAAA,EAAA;AAAA,EAE1C,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAGD,EAAW,OAAO,OAAO,SAASE,CAAe;AAAA,IACpD,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA;AAAAA,IAEP,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,kBAAkB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcC;AAAAA,IAAO;AAAA,IAEvB,oBAAoB;AAAA,MAClB,QAAQ;AAAA,MACR,iBAAiBC;AAAAA,MACjB,GAAGN,EAAW,YAAY,aAAa;AAAA,IAAA;AAAA,IAEzC,2BAA2B;AAAA,MACzB,iBAAiBO;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,0CAA0C;AAAA,MACxC,iBAAiBF;AAAAA,IAAO;AAAA,IAE1B,2CAA2C;AAAA,MACzC,iBAAiBG;AAAAA,MACjB,GAAGT,EAAW,YAAYU,CAAc;AAAA,MACxC,cAAcL;AAAAA,IAAO;AAAA,IAEvB,uFACE;AAAA,MACE,iBAAiBM;AAAAA,MACjB,GAAGX,EAAW,YAAY,aAAa;AAAA,IAAA;AAAA,EACzC;AAAA,EAEJ,WAAW;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAOQ;AAAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EAAA;AAEnB,CAAC,GAMYI,IAAalB,EAAM,WAG9B,SAAoB,EAAE,WAAAmB,GAAW,GAAGlB,EAAA,GAASC,GAAK;AAClD,QAAMkB,IAAShB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAACkB;AAAAA,IAAA;AAAA,MACC,KAAAnB;AAAA,MACA,aAAU;AAAA,MACJ,CAACoB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,OAAOD,CAAS;AAAA,MAC9C,GAAGlB;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAMYuB,IAAiBxB,EAAM,WAGlC,SAAwB,EAAE,WAAAmB,GAAW,UAAAM,GAAU,GAAGxB,EAAA,GAASC,GAAK;AAChE,QAAMkB,IAAShB,EAAA;AAEf,SACE,gBAAAsB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAzB;AAAA,MACA,aAAU;AAAA,MACJ,CAACoB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMD,CAAS;AAAA,MAC7C,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACyB;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACJ,CAACN,CAAS,GAAG;AAAA,YACnB,WAAWF,EAAO;AAAA,YAElB,UAAA,gBAAAjB,EAACJ,GAAA,EAAW,WAAWqB,EAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAErCK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}