@epilot/zenith-react 0.1.0-next.0

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,119 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import * as d from "react";
+import { mergeClasses as t, SLOT_ATTR as l, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as p } from "../../styles/make-styles.js";
+import { indigoA4 as f, pinkA4 as g, purpleA4 as k, gray3 as b, gray4 as h, radiusMd as u } from "../../tokens/index.js";
+import { useZenithPaletteTokensWhen as y } from "../../tokens/use-palette-tokens.js";
+const N = p({
+  default: {
+    backgroundColor: h,
+    ...i.borderRadius(u),
+    animationName: {
+      "0%,100%": { opacity: 1 },
+      "50%": { opacity: 0.5 }
+    },
+    animationDuration: "2s",
+    animationTimingFunction: "cubic-bezier(0.4,0,0.6,1)",
+    animationIterationCount: "infinite"
+  },
+  ai: {
+    backgroundColor: b,
+    ...i.borderRadius(u),
+    position: "relative",
+    ...i.overflow("hidden")
+  },
+  spot: {
+    position: "absolute",
+    inset: "-50%",
+    ...i.borderRadius("50%"),
+    opacity: 0.6,
+    filter: "blur(18px)",
+    pointerEvents: "none"
+  },
+  spot1: {
+    backgroundImage: `radial-gradient(circle, ${k} 0%, transparent 65%)`,
+    animationName: {
+      "0%,100%": { transform: "translate(-20%, 0%) scale(1)" },
+      "33%": { transform: "translate(40%, -25%) scale(1.2)" },
+      "66%": { transform: "translate(-10%, 30%) scale(0.9)" }
+    },
+    animationDuration: "10s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite"
+  },
+  spot2: {
+    backgroundImage: `radial-gradient(circle, ${g} 0%, transparent 65%)`,
+    animationName: {
+      "0%,100%": { transform: "translate(20%, 0%) scale(1.1)" },
+      "33%": { transform: "translate(-35%, 25%) scale(0.9)" },
+      "66%": { transform: "translate(30%, -20%) scale(1.3)" }
+    },
+    animationDuration: "12s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite"
+  },
+  spot3: {
+    backgroundImage: `radial-gradient(circle, ${f} 0%, transparent 65%)`,
+    animationName: {
+      "0%,100%": { transform: "translate(0%, 20%) scale(1)" },
+      "33%": { transform: "translate(25%, -30%) scale(1.2)" },
+      "66%": { transform: "translate(-30%, 10%) scale(0.8)" }
+    },
+    animationDuration: "14s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite"
+  }
+}), x = d.forwardRef(
+  function({ variant: e = "default", className: o, children: r, ...s }, m) {
+    y(e === "ai");
+    const a = N();
+    return e === "ai" ? /* @__PURE__ */ c(
+      "div",
+      {
+        ref: m,
+        "data-slot": "skeleton",
+        [l]: "skeleton",
+        className: t(a.ai, o),
+        ...s,
+        children: [
+          /* @__PURE__ */ n(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: t(a.spot, a.spot1)
+            }
+          ),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: t(a.spot, a.spot2)
+            }
+          ),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: t(a.spot, a.spot3)
+            }
+          ),
+          r
+        ]
+      }
+    ) : /* @__PURE__ */ n(
+      "div",
+      {
+        ref: m,
+        "data-slot": "skeleton",
+        [l]: "skeleton",
+        className: t(a.default, o),
+        ...s,
+        children: r
+      }
+    );
+  }
+);
+export {
+  x as Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sources":["../../../src/components/skeleton/skeleton.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 { useZenithPaletteTokensWhen } from \"../../tokens/use-palette-tokens\"\n\n/**\n * Skeleton — v1's loading placeholder ported to Griffel atoms.\n *\n * Two variants, `default` and `ai`. `default` is a gray block that pulses; `ai` is a gray field\n * that renders three decorative colour spots drifting behind the content. The spots are ported from\n * v1's global `skeleton-ai-spot-*` classes in `styles/utilities.css`, including their exact\n * gradients, durations (10s / 12s / 14s) and easing.\n *\n * The keyframes are the object form, so Griffel hashes each one from its content — a hand-authored\n * global `@keyframes` would collide across two co-resident copies of this package. The pulse is a\n * single three-stop animation; each spot carries its own.\n *\n * The spots are `purple-a4`, `pink-a4` and `indigo-a4`, none of which is a core token family\n * (accent / gray / error / warning / success / info ship in the core sheet; everything else lives\n * in the palette sheet, which is not loaded by default). `ai` therefore calls\n * `ensurePaletteTokens()` — CONVENTIONS rule 3. There is no `color` prop, so no inline custom\n * properties: the spot colours are constant and live inside the style objects.\n */\n\nexport type SkeletonVariant = \"default\" | \"ai\"\n\nconst useStyles = makeZenithStyles({\n  default: {\n    backgroundColor: tokens.gray4,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    animationName: {\n      \"0%,100%\": { opacity: 1 },\n      \"50%\": { opacity: 0.5 },\n    },\n    animationDuration: \"2s\",\n    animationTimingFunction: \"cubic-bezier(0.4,0,0.6,1)\",\n    animationIterationCount: \"infinite\",\n  },\n  ai: {\n    backgroundColor: tokens.gray3,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    position: \"relative\",\n    ...shorthands.overflow(\"hidden\"),\n  },\n  spot: {\n    position: \"absolute\",\n    inset: \"-50%\",\n    ...shorthands.borderRadius(\"50%\"),\n    opacity: 0.6,\n    filter: \"blur(18px)\",\n    pointerEvents: \"none\",\n  },\n  spot1: {\n    backgroundImage: `radial-gradient(circle, ${tokens.purpleA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(-20%, 0%) scale(1)\" },\n      \"33%\": { transform: \"translate(40%, -25%) scale(1.2)\" },\n      \"66%\": { transform: \"translate(-10%, 30%) scale(0.9)\" },\n    },\n    animationDuration: \"10s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n  spot2: {\n    backgroundImage: `radial-gradient(circle, ${tokens.pinkA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(20%, 0%) scale(1.1)\" },\n      \"33%\": { transform: \"translate(-35%, 25%) scale(0.9)\" },\n      \"66%\": { transform: \"translate(30%, -20%) scale(1.3)\" },\n    },\n    animationDuration: \"12s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n  spot3: {\n    backgroundImage: `radial-gradient(circle, ${tokens.indigoA4} 0%, transparent 65%)`,\n    animationName: {\n      \"0%,100%\": { transform: \"translate(0%, 20%) scale(1)\" },\n      \"33%\": { transform: \"translate(25%, -30%) scale(1.2)\" },\n      \"66%\": { transform: \"translate(-30%, 10%) scale(0.8)\" },\n    },\n    animationDuration: \"14s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n})\n\nexport type SkeletonProps = React.ComponentProps<\"div\"> & {\n  /**\n   * `default` is the ordinary loading pulse.\n   *\n   * `ai` is the placeholder for content being generated, drawn with three\n   * drifting colour spots. It is not merely decorative: its spot colours\n   * (purple, pink, indigo) are palette families rather than core ones, so `ai`\n   * calls `ensurePaletteTokens()` and its colours arrive on a later frame than\n   * the rest of the surface.\n   *\n   * @default \"default\"\n   */\n  variant?: SkeletonVariant\n}\n\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  function Skeleton(\n    { variant = \"default\", className, children, ...props },\n    ref\n  ) {\n    // The decorative families live in the palette sheet, which is not installed by default\n    // (CONVENTIONS rule 3). Only the `ai` variant paints them — purple-a4, pink-a4, indigo-a4.\n    // The hook is called unconditionally every render (WP2B2 — hook order); the `variant === \"ai\"`\n    // branch lives inside its commit-phase effect, not around this call, so the default variant\n    // still installs nothing it never reads.\n    useZenithPaletteTokensWhen(variant === \"ai\")\n\n    const styles = useStyles()\n\n    if (variant === \"ai\") {\n      return (\n        <div\n          ref={ref}\n          data-slot=\"skeleton\"\n          {...{ [SLOT_ATTR]: \"skeleton\" }}\n          className={mergeClasses(styles.ai, className)}\n          {...props}\n        >\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot1)}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot2)}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={mergeClasses(styles.spot, styles.spot3)}\n          />\n          {children}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"skeleton\"\n        {...{ [SLOT_ATTR]: \"skeleton\" }}\n        className={mergeClasses(styles.default, className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","tokens.gray4","shorthands","tokens.radiusMd","tokens.gray3","tokens.purpleA4","tokens.pinkA4","tokens.indigoA4","Skeleton","React","variant","className","children","props","ref","useZenithPaletteTokensWhen","styles","jsxs","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}

package/dist/components/slot/compose-as-child.js

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as e from "react";
+import { mergeClasses as c } from "@epilot/zenith-runtime/v1";
+import { Root as d } from "../../vendor/.bun/@radix-ui_react-slot@1.2.4_0ac650c021fb1b59/vendor/@radix-ui/react-slot/dist/index.js";
+const g = e.forwardRef(function({ children: s, className: t, forceProps: l, ...n }, a) {
+  const o = e.Children.only(s);
+  if (o.type === e.Fragment)
+    throw new Error("asChild requires one real element, not a React.Fragment");
+  const r = o, m = e.cloneElement(r, {
+    ...l,
+    // Child classes first makes the composer's role recipe authoritative; its caller class is
+    // appended by the composer and can then deliberately override the recipe. Inline child
+    // styles still win through Radix Slot's normal style merge.
+    className: c(r.props.className, t)
+  });
+  return /* @__PURE__ */ i(d, { ...n, ref: a, children: m });
+});
+export {
+  g as ComposeAsChild
+};
+//# sourceMappingURL=compose-as-child.js.map

package/dist/components/slot/compose-as-child.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compose-as-child.js","sources":["../../../src/components/slot/compose-as-child.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\n/**\n * The Radix Slot is still responsible for its established prop contract: it composes event\n * handlers and refs, and gives an existing child's inline style precedence. Its built-in className\n * merge is string concatenation, however, which cannot collapse competing Griffel atomic groups.\n * Merge that one prop before handing the real child to Slot so a composing Surface can replace a\n * Card's visual atoms without relying on stylesheet insertion order.\n *\n * This helper deliberately does not add diagnostic markers. An asChild composer decorates the\n * child's actual element, so the child remains a Card (or a plain native element), not a Surface.\n *\n * @internal composition plumbing for `asChild`, not a component. Its only callers are Surface and\n * AppearanceBoundary; it renders no element of its own and has no appearance to document, so\n * exporting it would add a name to the public API that no consumer has a use for.\n */\nexport type ComposeAsChildProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Slot>,\n  \"children\" | \"className\"\n> & {\n  children: React.ReactElement\n  className?: string\n  /** Values which must win over raw child props (appearance's canonical DOM pair). */\n  forceProps?: Record<string, unknown>\n}\n\nexport const ComposeAsChild = React.forwardRef<\n  HTMLElement,\n  ComposeAsChildProps\n>(function ComposeAsChild(\n  { children, className, forceProps, ...slotProps },\n  forwardedRef\n) {\n  const child = React.Children.only(children)\n\n  if (child.type === React.Fragment)\n    throw new Error(\"asChild requires one real element, not a React.Fragment\")\n\n  const classedChild = child as React.ReactElement<{ className?: string }>\n  const childWithMergedClasses = React.cloneElement(classedChild, {\n    ...forceProps,\n    // Child classes first makes the composer's role recipe authoritative; its caller class is\n    // appended by the composer and can then deliberately override the recipe. Inline child\n    // styles still win through Radix Slot's normal style merge.\n    className: mergeClasses(classedChild.props.className, className),\n  })\n\n  return (\n    <Slot {...slotProps} ref={forwardedRef}>\n      {childWithMergedClasses}\n    </Slot>\n  )\n})\n"],"names":["ComposeAsChild","React","children","className","forceProps","slotProps","forwardedRef","child","classedChild","childWithMergedClasses","mergeClasses","Slot"],"mappings":";;;;AA6BO,MAAMA,IAAiBC,EAAM,WAGlC,SACA,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,GAAGC,EAAA,GACtCC,GACA;AACA,QAAMC,IAAQN,EAAM,SAAS,KAAKC,CAAQ;AAE1C,MAAIK,EAAM,SAASN,EAAM;AACvB,UAAM,IAAI,MAAM,yDAAyD;AAE3E,QAAMO,IAAeD,GACfE,IAAyBR,EAAM,aAAaO,GAAc;AAAA,IAC9D,GAAGJ;AAAA;AAAA;AAAA;AAAA,IAIH,WAAWM,EAAaF,EAAa,MAAM,WAAWL,CAAS;AAAA,EAAA,CAChE;AAED,2BACGQ,GAAA,EAAM,GAAGN,GAAW,KAAKC,GACvB,UAAAG,GACH;AAEJ,CAAC;"}

package/dist/components/spinner/spinner.js

@@ -0,0 +1,94 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import * as o from "react";
+import { mergeClasses as m, SLOT_ATTR as h } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as c } from "../../styles/make-styles.js";
+const l = c({
+  sm: {
+    width: "1rem",
+    height: "1rem"
+  },
+  base: {
+    width: "1.5rem",
+    height: "1.5rem"
+  },
+  lg: {
+    width: "2.5rem",
+    height: "2.5rem"
+  },
+  xl: {
+    width: "4rem",
+    height: "4rem"
+  },
+  "2xl": {
+    width: "6rem",
+    height: "6rem"
+  },
+  spin: {
+    transformOrigin: "center",
+    animationName: {
+      "100%": { transform: "rotate(360deg)" }
+    },
+    animationDuration: "2s",
+    animationTimingFunction: "linear",
+    animationIterationCount: "infinite"
+  },
+  dash: {
+    animationName: {
+      "0%": {
+        strokeDasharray: "0 150",
+        strokeDashoffset: 0
+      },
+      "47.5%": {
+        strokeDasharray: "42 150",
+        strokeDashoffset: -16
+      },
+      "95%,100%": {
+        strokeDasharray: "42 150",
+        strokeDashoffset: -59
+      }
+    },
+    animationDuration: "1.5s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite"
+  }
+}), u = o.forwardRef(
+  function({ size: i = "base", className: r, ...n }, s) {
+    const t = l();
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        ref: s,
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        role: "status",
+        "data-slot": "spinner",
+        [h]: "spinner",
+        className: m(t[i], r),
+        ...n,
+        children: /* @__PURE__ */ a("g", { className: t.spin, children: [
+          /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "9.5", strokeWidth: "3", opacity: "0.1" }),
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              className: t.dash,
+              cx: "12",
+              cy: "12",
+              r: "9.5",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              fill: "none"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+export {
+  u as Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\n\n/**\n * Spinner — v1's SVG spinner ported to a size-driven style object.\n *\n * v1 sizes this with Tailwind `size-*` utilities and deprecated the `size` prop in favour of a\n * `className` like `size-4`. There is no Tailwind here, so that escape hatch does not exist: `size`\n * is the supported API and the `@deprecated` tag is dropped (CONVENTIONS rule 9).\n *\n * The SVG markup, `viewBox` and stroke attributes are copied exactly from v1. Both animations are\n * the object form per CONVENTIONS rule 8: the outer `<g>` spins from a single `100%` stop, and the\n * dash sweep carries all three of v1's keyframe stops (`0%`, `47.5%`, `95%,100%`) from\n * `styles/animations.css`. The only mechanical changes are stylistic: sizes become width/height\n * atoms and the two `animate-*` classes become `animationName` + duration + timing + iteration.\n *\n * The five dimensions (1rem / 1.5rem / 2.5rem / 4rem / 6rem) are v1's Tailwind `size-N` values;\n * the v2 token set has no size or width/height family, so they are literals (CONVENTIONS rule 1).\n *\n * v1 also exposes a `variant` prop (`circle` | `line`) whose branches are both empty strings — it\n * produces no styles at all, so it is omitted here.\n */\n\nexport type SpinnerSize = \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\"\n\nconst useStyles = makeZenithStyles({\n  sm: {\n    width: \"1rem\",\n    height: \"1rem\",\n  },\n  base: {\n    width: \"1.5rem\",\n    height: \"1.5rem\",\n  },\n  lg: {\n    width: \"2.5rem\",\n    height: \"2.5rem\",\n  },\n  xl: {\n    width: \"4rem\",\n    height: \"4rem\",\n  },\n  \"2xl\": {\n    width: \"6rem\",\n    height: \"6rem\",\n  },\n  spin: {\n    transformOrigin: \"center\",\n    animationName: {\n      \"100%\": { transform: \"rotate(360deg)\" },\n    },\n    animationDuration: \"2s\",\n    animationTimingFunction: \"linear\",\n    animationIterationCount: \"infinite\",\n  },\n  dash: {\n    animationName: {\n      \"0%\": {\n        strokeDasharray: \"0 150\",\n        strokeDashoffset: 0,\n      },\n      \"47.5%\": {\n        strokeDasharray: \"42 150\",\n        strokeDashoffset: -16,\n      },\n      \"95%,100%\": {\n        strokeDasharray: \"42 150\",\n        strokeDashoffset: -59,\n      },\n    },\n    animationDuration: \"1.5s\",\n    animationTimingFunction: \"ease-in-out\",\n    animationIterationCount: \"infinite\",\n  },\n})\n\nexport type SpinnerProps = React.ComponentProps<\"svg\"> & {\n  size?: SpinnerSize\n}\n\nexport const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(\n  function Spinner({ size = \"base\", className, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        role=\"status\"\n        data-slot=\"spinner\"\n        {...{ [SLOT_ATTR]: \"spinner\" }}\n        className={mergeClasses(styles[size], className)}\n        {...props}\n      >\n        <g className={styles.spin}>\n          <circle cx=\"12\" cy=\"12\" r=\"9.5\" strokeWidth=\"3\" opacity=\"0.1\" />\n          <circle\n            className={styles.dash}\n            cx=\"12\"\n            cy=\"12\"\n            r=\"9.5\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            fill=\"none\"\n          />\n        </g>\n      </svg>\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","Spinner","React","size","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","jsxs"],"mappings":";;;;AA6BA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,IAAI;AAAA,IACF,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,eAAe;AAAA,MACb,QAAQ,EAAE,WAAW,iBAAA;AAAA,IAAiB;AAAA,IAExC,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,EAAA;AAAA,EAE3B,MAAM;AAAA,IACJ,eAAe;AAAA,MACb,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA;AAAA,MAEpB,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,MAAA;AAAA,IACpB;AAAA,IAEF,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,EAAA;AAE7B,CAAC,GAMYC,IAAUC,EAAM;AAAA,EAC3B,SAAiB,EAAE,MAAAC,IAAO,QAAQ,WAAAC,GAAW,GAAGC,EAAA,GAASC,GAAK;AAC5D,UAAMC,IAASR,EAAA;AAEf,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,OAAM;AAAA,QACN,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,aAAU;AAAA,QACJ,CAACG,CAAS,GAAG;AAAA,QACnB,WAAWC,EAAaH,EAAOJ,CAAI,GAAGC,CAAS;AAAA,QAC9C,GAAGC;AAAA,QAEJ,UAAA,gBAAAM,EAAC,KAAA,EAAE,WAAWJ,EAAO,MACnB,UAAA;AAAA,UAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM,aAAY,KAAI,SAAQ,MAAA,CAAM;AAAA,UAC9D,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,EAAO;AAAA,cAClB,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAE;AAAA,cACF,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACP,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/components/surface/surface.js

@@ -0,0 +1,44 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as n from "react";
+import { mergeClasses as l, SLOT_ATTR as u, shorthands as r } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as m } from "../../styles/make-styles.js";
+import { shadowContainer as f, surfaceRadiusContainer as C, surfaceContainer as h, blurObject as p, shadowObject as S, surfaceRadiusObject as j, surfaceObject as O, borderContainer as R, borderWidthContainer as w, borderObject as y, borderWidthObject as k } from "../../tokens/index.js";
+import { ComposeAsChild as x } from "../slot/compose-as-child.js";
+const W = m({
+  panel: {
+    backgroundColor: O,
+    ...r.borderWidth(k),
+    ...r.borderStyle("solid"),
+    ...r.borderColor(y),
+    borderRadius: j,
+    boxShadow: S,
+    backdropFilter: `blur(${p})`
+  },
+  section: {
+    backgroundColor: h,
+    ...r.borderWidth(w),
+    ...r.borderStyle("solid"),
+    ...r.borderColor(R),
+    borderRadius: C,
+    boxShadow: f
+  }
+}), L = n.forwardRef(
+  function({ kind: d, asChild: i = !1, className: c, children: o, ...e }, s) {
+    const b = W(), t = l(b[d], c);
+    return i ? /* @__PURE__ */ a(x, { ...e, ref: s, className: t, children: o }) : /* @__PURE__ */ a(
+      "div",
+      {
+        ...e,
+        ref: s,
+        "data-slot": "surface",
+        [u]: "surface",
+        className: t,
+        children: o
+      }
+    );
+  }
+);
+export {
+  L as Surface
+};
+//# sourceMappingURL=surface.js.map

package/dist/components/surface/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sources":["../../../src/components/surface/surface.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 { ComposeAsChild } from \"../slot/compose-as-child\"\n\n/** A visual role, not an ARIA role or an elevation scale. */\nexport type SurfaceKind = \"panel\" | \"section\"\n\ntype SurfaceBaseProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"children\" | \"kind\"\n> & {\n  /** `panel` is an object frame; `section` is a container grouping. */\n  kind: SurfaceKind\n}\n\nexport type SurfaceProps =\n  | (SurfaceBaseProps & { asChild?: false; children?: React.ReactNode })\n  | (SurfaceBaseProps & { asChild: true; children: React.ReactElement })\n\n/**\n * A role recipe with no layout opinions. The property shapes deliberately match the other role\n * recipes: per-side border atoms let `mergeClasses` replace a Card's border without a wrapper or\n * stylesheet-order dependency.\n */\nconst useStyles = makeZenithStyles({\n  panel: {\n    backgroundColor: tokens.surfaceObject,\n    ...shorthands.borderWidth(tokens.borderWidthObject),\n    ...shorthands.borderStyle(\"solid\"),\n    ...shorthands.borderColor(tokens.borderObject),\n    borderRadius: tokens.surfaceRadiusObject,\n    boxShadow: tokens.shadowObject,\n    backdropFilter: `blur(${tokens.blurObject})`,\n  },\n  section: {\n    backgroundColor: tokens.surfaceContainer,\n    ...shorthands.borderWidth(tokens.borderWidthContainer),\n    ...shorthands.borderStyle(\"solid\"),\n    ...shorthands.borderColor(tokens.borderContainer),\n    borderRadius: tokens.surfaceRadiusContainer,\n    boxShadow: tokens.shadowContainer,\n  },\n})\n\n/**\n * One optional wrapper for an approved visual role. In asChild mode Surface intentionally keeps\n * the target's data-slot/SLOT_ATTR identity: a Card remains a Card, while a native child need not\n * pretend to be a component it is not.\n */\nexport const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(\n  function Surface(\n    { kind, asChild = false, className, children, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n    const composedClassName = mergeClasses(styles[kind], className)\n\n    if (asChild)\n      return (\n        <ComposeAsChild {...props} ref={ref} className={composedClassName}>\n          {children as React.ReactElement}\n        </ComposeAsChild>\n      )\n\n    return (\n      <div\n        {...props}\n        ref={ref}\n        data-slot=\"surface\"\n        {...{ [SLOT_ATTR]: \"surface\" }}\n        className={composedClassName}\n      >\n        {children}\n      </div>\n    )\n  }\n)\n"],"names":["useStyles","makeZenithStyles","tokens.surfaceObject","shorthands","tokens.borderWidthObject","tokens.borderObject","tokens.surfaceRadiusObject","tokens.shadowObject","tokens.blurObject","tokens.surfaceContainer","tokens.borderWidthContainer","tokens.borderContainer","tokens.surfaceRadiusContainer","tokens.shadowContainer","Surface","React","kind","asChild","className","children","props","ref","styles","composedClassName","mergeClasses","ComposeAsChild","jsx","SLOT_ATTR"],"mappings":";;;;;;AA6BA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,OAAO;AAAA,IACL,iBAAiBC;AAAAA,IACjB,GAAGC,EAAW,YAAYC,CAAwB;AAAA,IAClD,GAAGD,EAAW,YAAY,OAAO;AAAA,IACjC,GAAGA,EAAW,YAAYE,CAAmB;AAAA,IAC7C,cAAcC;AAAAA,IACd,WAAWC;AAAAA,IACX,gBAAgB,QAAQC,CAAiB;AAAA,EAAA;AAAA,EAE3C,SAAS;AAAA,IACP,iBAAiBC;AAAAA,IACjB,GAAGN,EAAW,YAAYO,CAA2B;AAAA,IACrD,GAAGP,EAAW,YAAY,OAAO;AAAA,IACjC,GAAGA,EAAW,YAAYQ,CAAsB;AAAA,IAChD,cAAcC;AAAAA,IACd,WAAWC;AAAAA,EAAO;AAEtB,CAAC,GAOYC,IAAUC,EAAM;AAAA,EAC3B,SACE,EAAE,MAAAC,GAAM,SAAAC,IAAU,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACjDC,GACA;AACA,UAAMC,IAAStB,EAAA,GACTuB,IAAoBC,EAAaF,EAAON,CAAI,GAAGE,CAAS;AAE9D,WAAID,sBAECQ,GAAA,EAAgB,GAAGL,GAAO,KAAAC,GAAU,WAAWE,GAC7C,UAAAJ,GACH,IAIF,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACJ,KAAAC;AAAA,QACA,aAAU;AAAA,QACJ,CAACM,CAAS,GAAG;AAAA,QACnB,WAAWJ;AAAA,QAEV,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/components/switch/switch.js

@@ -0,0 +1,256 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import * as a from "react";
+import { Root as x, Thumb as y } from "../../vendor/.bun/@radix-ui_react-switch@1.2.6_2b23df507bdda662/vendor/@radix-ui/react-switch/dist/index.js";
+import { mergeClasses as g, SLOT_ATTR as n, shorthands as r } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as b } from "../../styles/make-styles.js";
+import { errorA3 as C, semErrorSolid as v, errorA8 as u, grayA3 as S, semAccentSolid as T, grayA8 as m, semFocusRing as R, errorA11 as A, errorContrast as z, accentA11 as D, grayContrast as E } from "../../tokens/index.js";
+const I = a.forwardRef(
+  function(i, e) {
+    const o = w();
+    return /* @__PURE__ */ t(
+      "svg",
+      {
+        ref: e,
+        "data-slot": "switch-thumb-icon-checked",
+        [n]: "switch-thumb-icon-checked",
+        role: "presentation",
+        className: o.checked,
+        viewBox: "0 0 1 6",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ t("rect", { width: "1", height: "6", fill: "currentColor" })
+      }
+    );
+  }
+), V = a.forwardRef(
+  function(i, e) {
+    const o = w();
+    return /* @__PURE__ */ t(
+      "svg",
+      {
+        ref: e,
+        "data-slot": "switch-thumb-icon-unchecked",
+        [n]: "switch-thumb-icon-unchecked",
+        role: "presentation",
+        className: o.unchecked,
+        viewBox: "0 0 4 6",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ t(
+          "rect",
+          {
+            x: "0.5",
+            y: "0.5",
+            width: "3",
+            height: "5",
+            rx: "1.5",
+            stroke: "currentColor"
+          }
+        )
+      }
+    );
+  }
+), N = a.forwardRef(
+  function(i, e) {
+    const o = w();
+    return /* @__PURE__ */ t(
+      "svg",
+      {
+        ref: e,
+        "data-slot": "switch-thumb-icon-disabled",
+        [n]: "switch-thumb-icon-disabled",
+        className: o.disabled,
+        viewBox: "0 0 4 5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M0 5V1.875H0.666667V1.25C0.666667 0.90625 0.797223 0.611979 1.05833 0.367188C1.31944 0.122396 1.63333 0 2 0C2.36667 0 2.68056 0.122396 2.94167 0.367188C3.20278 0.611979 3.33333 0.90625 3.33333 1.25V1.875H4V5H0ZM1.33333 1.875H2.66667V1.25C2.66667 1.07292 2.60278 0.924479 2.475 0.804687C2.34722 0.684896 2.18889 0.625 2 0.625C1.81111 0.625 1.65278 0.684896 1.525 0.804687C1.39722 0.924479 1.33333 1.07292 1.33333 1.25V1.875Z",
+            fill: "currentColor"
+          }
+        )
+      }
+    );
+  }
+), w = b({
+  checked: {
+    display: "none",
+    position: "absolute",
+    pointerEvents: "none",
+    ...r.inset(0),
+    color: "currentColor",
+    ...r.margin("auto")
+  },
+  unchecked: {
+    display: "none",
+    position: "absolute",
+    pointerEvents: "none",
+    ...r.inset(0),
+    color: "currentColor",
+    ...r.margin("auto")
+  },
+  disabled: {
+    display: "inline-block",
+    position: "absolute",
+    pointerEvents: "none",
+    ...r.inset(0),
+    color: "currentColor",
+    ...r.margin("auto")
+  }
+}), H = b({
+  root: {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    cursor: "pointer",
+    borderRadius: "9999px",
+    ...r.border("1px", "solid", "transparent"),
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "all",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transitionDuration: "150ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: R
+    },
+    ":disabled, &[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5
+    }
+  },
+  default: {
+    color: m,
+    "&[data-state='checked']": { backgroundColor: T },
+    "&[data-state='unchecked']": { backgroundColor: S }
+  },
+  destructive: {
+    color: u,
+    "&[data-state='checked']": { backgroundColor: v },
+    "&[data-state='unchecked']": { backgroundColor: C }
+  },
+  sm: {
+    width: "1.625rem",
+    height: "1rem",
+    "& svg": { width: "0.25rem", height: "0.375rem" }
+  },
+  base: {
+    width: "2.125rem",
+    height: "1.25rem",
+    "& svg": { width: "0.4375rem", height: "0.5rem" }
+  },
+  lg: {
+    width: "2.625rem",
+    height: "1.5rem",
+    "& svg": { width: "0.5rem", height: "0.625rem" }
+  }
+}), _ = b({
+  thumb: {
+    position: "relative",
+    display: "block",
+    pointerEvents: "none",
+    borderRadius: "9999px",
+    boxShadow: "0 1px 2px 0 #0000000d",
+    transitionProperty: "transform",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    transitionDuration: "150ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    "&[data-state='checked']": {
+      transform: "translateX(calc(100% - 1px))"
+    },
+    "&[data-state='unchecked']": {
+      transform: "translateX(1px)"
+    },
+    "&[data-state='checked'] [data-zenith-slot='switch-thumb-icon-checked']": {
+      display: "inline-block"
+    },
+    "&[data-state='unchecked'] [data-zenith-slot='switch-thumb-icon-unchecked']": {
+      display: "inline-block"
+    }
+  },
+  default: {
+    backgroundColor: E,
+    color: m,
+    "&[data-state='checked']": { color: D },
+    "&[data-state='unchecked']": { color: m }
+  },
+  destructive: {
+    backgroundColor: z,
+    color: u,
+    "&[data-state='checked']": { color: A },
+    "&[data-state='unchecked']": { color: u }
+  },
+  sm: {
+    width: "0.75rem",
+    height: "0.75rem",
+    "& svg[data-zenith-slot='switch-thumb-icon-disabled']": {
+      width: "0.25rem"
+    }
+  },
+  base: {
+    width: "1rem",
+    height: "1rem",
+    "& svg[data-zenith-slot='switch-thumb-icon-disabled']": {
+      width: "0.375rem"
+    }
+  },
+  lg: {
+    width: "1.25rem",
+    height: "1.25rem",
+    "& svg[data-zenith-slot='switch-thumb-icon-disabled']": {
+      width: "0.4375rem"
+    }
+  }
+}), O = a.forwardRef(function({
+  variant: i = "default",
+  size: e = "base",
+  className: o,
+  showThumbIcon: d = !1,
+  ...s
+}, k) {
+  const l = H(), h = _(), p = i === "primary" ? "default" : i;
+  return /* @__PURE__ */ t(
+    x,
+    {
+      ref: k,
+      "data-slot": "switch",
+      [n]: "switch",
+      className: g(
+        l.root,
+        l[p],
+        l[e],
+        o
+      ),
+      ...s,
+      children: /* @__PURE__ */ f(
+        y,
+        {
+          "data-slot": "switch-thumb",
+          [n]: "switch-thumb",
+          className: g(
+            h.thumb,
+            h[p],
+            h[e]
+          ),
+          children: [
+            d && !s.disabled && /* @__PURE__ */ t(I, {}),
+            d && !s.disabled && /* @__PURE__ */ t(V, {}),
+            d && s.disabled && /* @__PURE__ */ t(N, {})
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  O as Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\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 ThumbIconChecked = React.forwardRef<SVGSVGElement>(\n  function ThumbIconChecked(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-checked\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-checked\" }}\n        role=\"presentation\"\n        className={styles.checked}\n        viewBox=\"0 0 1 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect width=\"1\" height=\"6\" fill=\"currentColor\" />\n      </svg>\n    )\n  }\n)\n\nconst ThumbIconUnchecked = React.forwardRef<SVGSVGElement>(\n  function ThumbIconUnchecked(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-unchecked\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-unchecked\" }}\n        role=\"presentation\"\n        className={styles.unchecked}\n        viewBox=\"0 0 4 6\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect\n          x=\"0.5\"\n          y=\"0.5\"\n          width=\"3\"\n          height=\"5\"\n          rx=\"1.5\"\n          stroke=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nconst ThumbIconDisabled = React.forwardRef<SVGSVGElement>(\n  function ThumbIconDisabled(_props, ref) {\n    const styles = useThumbIconStyles()\n\n    return (\n      <svg\n        ref={ref}\n        data-slot=\"switch-thumb-icon-disabled\"\n        {...{ [SLOT_ATTR]: \"switch-thumb-icon-disabled\" }}\n        className={styles.disabled}\n        viewBox=\"0 0 4 5\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 5V1.875H0.666667V1.25C0.666667 0.90625 0.797223 0.611979 1.05833 0.367188C1.31944 0.122396 1.63333 0 2 0C2.36667 0 2.68056 0.122396 2.94167 0.367188C3.20278 0.611979 3.33333 0.90625 3.33333 1.25V1.875H4V5H0ZM1.33333 1.875H2.66667V1.25C2.66667 1.07292 2.60278 0.924479 2.475 0.804687C2.34722 0.684896 2.18889 0.625 2 0.625C1.81111 0.625 1.65278 0.684896 1.525 0.804687C1.39722 0.924479 1.33333 1.07292 1.33333 1.25V1.875Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nconst useThumbIconStyles = makeZenithStyles({\n  checked: {\n    display: \"none\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n  unchecked: {\n    display: \"none\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n  disabled: {\n    display: \"inline-block\",\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    ...shorthands.inset(0),\n    color: \"currentColor\",\n    ...shorthands.margin(\"auto\"),\n  },\n})\n\nconst useRootStyles = makeZenithStyles({\n  root: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    flexShrink: 0,\n    cursor: \"pointer\",\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", \"transparent\"),\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"all\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n  },\n  default: {\n    color: tokens.grayA8,\n    \"&[data-state='checked']\": { backgroundColor: tokens.semAccentSolid },\n    \"&[data-state='unchecked']\": { backgroundColor: tokens.grayA3 },\n  },\n  destructive: {\n    color: tokens.errorA8,\n    \"&[data-state='checked']\": { backgroundColor: tokens.semErrorSolid },\n    \"&[data-state='unchecked']\": { backgroundColor: tokens.errorA3 },\n  },\n  sm: {\n    width: \"1.625rem\",\n    height: \"1rem\",\n    \"& svg\": { width: \"0.25rem\", height: \"0.375rem\" },\n  },\n  base: {\n    width: \"2.125rem\",\n    height: \"1.25rem\",\n    \"& svg\": { width: \"0.4375rem\", height: \"0.5rem\" },\n  },\n  lg: {\n    width: \"2.625rem\",\n    height: \"1.5rem\",\n    \"& svg\": { width: \"0.5rem\", height: \"0.625rem\" },\n  },\n})\n\nconst useThumbStyles = makeZenithStyles({\n  thumb: {\n    position: \"relative\",\n    display: \"block\",\n    pointerEvents: \"none\",\n    borderRadius: \"9999px\",\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"transform\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDuration: \"150ms\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \"&[data-state='checked']\": {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n    \"&[data-state='unchecked']\": {\n      transform: \"translateX(1px)\",\n    },\n    \"&[data-state='checked'] [data-zenith-slot='switch-thumb-icon-checked']\": {\n      display: \"inline-block\",\n    },\n    \"&[data-state='unchecked'] [data-zenith-slot='switch-thumb-icon-unchecked']\":\n      {\n        display: \"inline-block\",\n      },\n  },\n  default: {\n    backgroundColor: tokens.grayContrast,\n    color: tokens.grayA8,\n    \"&[data-state='checked']\": { color: tokens.accentA11 },\n    \"&[data-state='unchecked']\": { color: tokens.grayA8 },\n  },\n  destructive: {\n    backgroundColor: tokens.errorContrast,\n    color: tokens.errorA8,\n    \"&[data-state='checked']\": { color: tokens.errorA11 },\n    \"&[data-state='unchecked']\": { color: tokens.errorA8 },\n  },\n  sm: {\n    width: \"0.75rem\",\n    height: \"0.75rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.25rem\",\n    },\n  },\n  base: {\n    width: \"1rem\",\n    height: \"1rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.375rem\",\n    },\n  },\n  lg: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    \"& svg[data-zenith-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.4375rem\",\n    },\n  },\n})\n\n/**\n * `primary` is a deprecated alias of `default`, carried because v1 has it and real consumers still\n * pass it — entity-sidepanel's SettingsControls does. v1's own comment marks it deprecated and its\n * styles are byte-identical to `default`, so it is mapped rather than duplicated.\n *\n * @remarks `primary` is deprecated; use `default`.\n */\nexport type SwitchVariant = \"default\" | \"destructive\" | \"primary\"\nexport type SwitchSize = \"sm\" | \"base\" | \"lg\"\n\nexport type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  /**\n   * `default` or `destructive`.\n   *\n   * `primary` is a **deprecated alias of `default`** with byte-identical styles,\n   * kept because v1 had it and consumers still pass it. Choosing it changes\n   * nothing; use `default`.\n   *\n   * @default \"default\"\n   */\n  variant?: SwitchVariant\n  /** @default \"base\" */\n  size?: SwitchSize\n  showThumbIcon?: boolean\n}\n\nexport const Switch = React.forwardRef<\n  React.ComponentRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(function Switch(\n  {\n    variant = \"default\",\n    size = \"base\",\n    className,\n    showThumbIcon = false,\n    ...props\n  },\n  ref\n) {\n  const rootStyles = useRootStyles()\n  const thumbStyles = useThumbStyles()\n  // See SwitchVariant: `primary` is v1's deprecated alias for `default`, same styles.\n  const variantKey = variant === \"primary\" ? \"default\" : variant\n\n  return (\n    <SwitchPrimitive.Root\n      ref={ref}\n      data-slot=\"switch\"\n      {...{ [SLOT_ATTR]: \"switch\" }}\n      className={mergeClasses(\n        rootStyles.root,\n        rootStyles[variantKey],\n        rootStyles[size],\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        {...{ [SLOT_ATTR]: \"switch-thumb\" }}\n        className={mergeClasses(\n          thumbStyles.thumb,\n          thumbStyles[variantKey],\n          thumbStyles[size]\n        )}\n      >\n        {showThumbIcon && !props.disabled && <ThumbIconChecked />}\n        {showThumbIcon && !props.disabled && <ThumbIconUnchecked />}\n        {showThumbIcon && props.disabled && <ThumbIconDisabled />}\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  )\n})\n"],"names":["ThumbIconChecked","React","_props","ref","styles","useThumbIconStyles","jsx","SLOT_ATTR","ThumbIconUnchecked","ThumbIconDisabled","makeZenithStyles","shorthands","useRootStyles","tokens.semFocusRing","tokens.grayA8","tokens.semAccentSolid","tokens.grayA3","tokens.errorA8","tokens.semErrorSolid","tokens.errorA3","useThumbStyles","tokens.grayContrast","tokens.accentA11","tokens.errorContrast","tokens.errorA11","Switch","variant","size","className","showThumbIcon","props","rootStyles","thumbStyles","variantKey","SwitchPrimitive.Root","mergeClasses","jsxs","SwitchPrimitive.Thumb"],"mappings":"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"}