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

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * Skeleton — v1's loading placeholder ported to Griffel atoms.
+ *
+ * Two variants, `default` and `ai`. `default` is a gray block that pulses; `ai` is a gray field
+ * that renders three decorative colour spots drifting behind the content. The spots are ported from
+ * v1's global `skeleton-ai-spot-*` classes in `styles/utilities.css`, including their exact
+ * gradients, durations (10s / 12s / 14s) and easing.
+ *
+ * The keyframes are the object form, so Griffel hashes each one from its content — a hand-authored
+ * global `@keyframes` would collide across two co-resident copies of this package. The pulse is a
+ * single three-stop animation; each spot carries its own.
+ *
+ * The spots are `purple-a4`, `pink-a4` and `indigo-a4`, none of which is a core token family
+ * (accent / gray / error / warning / success / info ship in the core sheet; everything else lives
+ * in the palette sheet, which is not loaded by default). `ai` therefore calls
+ * `ensurePaletteTokens()` — CONVENTIONS rule 3. There is no `color` prop, so no inline custom
+ * properties: the spot colours are constant and live inside the style objects.
+ */
+export type SkeletonVariant = "default" | "ai";
+export type SkeletonProps = React.ComponentProps<"div"> & {
+    variant?: SkeletonVariant;
+};
+export declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,121 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import * as d from "react";
+import { shorthands as i } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as m } from "../../renderer/contract.js";
+import { makeVoltStyles as p } from "../../styles/make-styles.js";
+import { indigoA4 as f, pinkA4 as g, purpleA4 as k, gray3 as b, gray4 as y, radiusMd as l } from "../../tokens/index.js";
+import { ensurePaletteTokens as N } from "../../tokens/install.js";
+import { mergeClasses as t } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const T = p({
+  default: {
+    backgroundColor: y,
+    ...i.borderRadius(l),
+    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(l),
+    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"
+  }
+}), D = d.forwardRef(
+  function({ variant: u = "default", className: o, children: e, ...r }, s) {
+    N();
+    const a = T();
+    return u === "ai" ? /* @__PURE__ */ c(
+      "div",
+      {
+        ref: s,
+        "data-slot": "skeleton",
+        [m]: "skeleton",
+        className: t(a.ai, o),
+        ...r,
+        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)
+            }
+          ),
+          e
+        ]
+      }
+    ) : /* @__PURE__ */ n(
+      "div",
+      {
+        ref: s,
+        "data-slot": "skeleton",
+        [m]: "skeleton",
+        className: t(a.default, o),
+        ...r,
+        children: e
+      }
+    );
+  }
+);
+export {
+  D 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 \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { ensurePaletteTokens } from \"../../tokens/install\"\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 = makeVoltStyles({\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  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). It has to be present whenever this component renders at all.\n    ensurePaletteTokens()\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","makeVoltStyles","tokens.gray4","shorthands","tokens.radiusMd","tokens.gray3","tokens.purpleA4","tokens.pinkA4","tokens.indigoA4","Skeleton","React","variant","className","children","props","ref","ensurePaletteTokens","styles","jsxs","SLOT_ATTR","mergeClasses","jsx"],"mappings":"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"}

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * Spinner — v1's SVG spinner ported to a size-driven style object.
+ *
+ * v1 sizes this with Tailwind `size-*` utilities and deprecated the `size` prop in favour of a
+ * `className` like `size-4`. There is no Tailwind here, so that escape hatch does not exist: `size`
+ * is the supported API and the `@deprecated` tag is dropped (CONVENTIONS rule 9).
+ *
+ * The SVG markup, `viewBox` and stroke attributes are copied exactly from v1. Both animations are
+ * the object form per CONVENTIONS rule 8: the outer `<g>` spins from a single `100%` stop, and the
+ * dash sweep carries all three of v1's keyframe stops (`0%`, `47.5%`, `95%,100%`) from
+ * `styles/animations.css`. The only mechanical changes are stylistic: sizes become width/height
+ * atoms and the two `animate-*` classes become `animationName` + duration + timing + iteration.
+ *
+ * The five dimensions (1rem / 1.5rem / 2.5rem / 4rem / 6rem) are v1's Tailwind `size-N` values;
+ * the v2 token set has no size or width/height family, so they are literals (CONVENTIONS rule 1).
+ *
+ * v1 also exposes a `variant` prop (`circle` | `line`) whose branches are both empty strings — it
+ * produces no styles at all, so it is omitted here.
+ */
+export type SpinnerSize = "sm" | "base" | "lg" | "xl" | "2xl";
+export type SpinnerProps = React.ComponentProps<"svg"> & {
+    size?: SpinnerSize;
+};
+export declare const Spinner: React.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/spinner/spinner.js

@@ -0,0 +1,95 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as a from "react";
+import { SLOT_ATTR as m } from "../../renderer/contract.js";
+import { makeVoltStyles as h } from "../../styles/make-styles.js";
+import { mergeClasses as c } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const l = h({
+  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"
+  }
+}), w = a.forwardRef(
+  function({ size: i = "base", className: r, ...n }, o) {
+    const t = l();
+    return /* @__PURE__ */ e(
+      "svg",
+      {
+        ref: o,
+        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",
+        [m]: "spinner",
+        className: c(t[i], r),
+        ...n,
+        children: /* @__PURE__ */ s("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 {
+  w 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 \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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 = makeVoltStyles({\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","makeVoltStyles","Spinner","React","size","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","jsxs"],"mappings":";;;;;AA6BA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,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/switch/switch.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+/**
+ * `primary` is a deprecated alias of `default`, carried because v1 has it and real consumers still
+ * pass it — entity-sidepanel's SettingsControls does. v1's own comment marks it deprecated and its
+ * styles are byte-identical to `default`, so it is mapped rather than duplicated.
+ *
+ * @remarks `primary` is deprecated; use `default`.
+ */
+export type SwitchVariant = "default" | "destructive" | "primary";
+export type SwitchSize = "sm" | "base" | "lg";
+export type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+    showThumbIcon?: boolean;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/switch/switch.js

@@ -0,0 +1,251 @@
+import { jsx as t, jsxs as k } from "react/jsx-runtime";
+import * as a from "react";
+import { Root as v, Thumb as x } from "../../node_modules/@radix-ui/react-switch/dist/index.js";
+import { shorthands as r } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../renderer/contract.js";
+import { makeVoltStyles as b } from "../../styles/make-styles.js";
+import { errorA8 as c, errorA3 as C, semErrorSolid as y, accentA8 as S, grayA3 as T, semAccentSolid as R, grayA8 as u, errorA11 as A, errorContrast as V, accentA11 as E, grayContrast as I } from "../../tokens/index.js";
+import { mergeClasses as g } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const N = a.forwardRef(
+  function(i, e) {
+    const o = w();
+    return /* @__PURE__ */ t(
+      "svg",
+      {
+        ref: e,
+        "data-slot": "switch-thumb-icon-checked",
+        [s]: "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" })
+      }
+    );
+  }
+), D = a.forwardRef(
+  function(i, e) {
+    const o = w();
+    return /* @__PURE__ */ t(
+      "svg",
+      {
+        ref: e,
+        "data-slot": "switch-thumb-icon-unchecked",
+        [s]: "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"
+          }
+        )
+      }
+    );
+  }
+), H = a.forwardRef(
+  function(i, e) {
+    const o = w();
+    return /* @__PURE__ */ t(
+      "svg",
+      {
+        ref: e,
+        "data-slot": "switch-thumb-icon-disabled",
+        [s]: "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")
+  }
+}), _ = 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",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px"
+    },
+    ":disabled, &[data-disabled]": {
+      pointerEvents: "none",
+      opacity: 0.5
+    }
+  },
+  default: {
+    color: u,
+    "&[data-state='checked']": { backgroundColor: R },
+    "&[data-state='unchecked']": { backgroundColor: T },
+    ":focus-visible": { outlineColor: S }
+  },
+  destructive: {
+    color: c,
+    "&[data-state='checked']": { backgroundColor: y },
+    "&[data-state='unchecked']": { backgroundColor: C },
+    ":focus-visible": { outlineColor: 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 = 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",
+    "&[data-state='checked']": {
+      transform: "translateX(calc(100% - 1px))"
+    },
+    "&[data-state='unchecked']": {
+      transform: "translateX(1px)"
+    },
+    "&[data-state='checked'] [data-volt2-slot='switch-thumb-icon-checked']": {
+      display: "inline-block"
+    },
+    "&[data-state='unchecked'] [data-volt2-slot='switch-thumb-icon-unchecked']": {
+      display: "inline-block"
+    }
+  },
+  default: {
+    backgroundColor: I,
+    color: u,
+    "&[data-state='checked']": { color: E },
+    "&[data-state='unchecked']": { color: u }
+  },
+  destructive: {
+    backgroundColor: V,
+    color: c,
+    "&[data-state='checked']": { color: A },
+    "&[data-state='unchecked']": { color: c }
+  },
+  sm: {
+    width: "0.75rem",
+    height: "0.75rem",
+    "& svg[data-volt2-slot='switch-thumb-icon-disabled']": { width: "0.25rem" }
+  },
+  base: {
+    width: "1rem",
+    height: "1rem",
+    "& svg[data-volt2-slot='switch-thumb-icon-disabled']": {
+      width: "0.375rem"
+    }
+  },
+  lg: {
+    width: "1.25rem",
+    height: "1.25rem",
+    "& svg[data-volt2-slot='switch-thumb-icon-disabled']": {
+      width: "0.4375rem"
+    }
+  }
+}), X = a.forwardRef(function({
+  variant: i = "default",
+  size: e = "base",
+  className: o,
+  showThumbIcon: d = !1,
+  ...n
+}, f) {
+  const h = _(), m = B(), p = i === "primary" ? "default" : i;
+  return /* @__PURE__ */ t(
+    v,
+    {
+      ref: f,
+      "data-slot": "switch",
+      [s]: "switch",
+      className: g(
+        h.root,
+        h[p],
+        h[e],
+        o
+      ),
+      ...n,
+      children: /* @__PURE__ */ k(
+        x,
+        {
+          "data-slot": "switch-thumb",
+          [s]: "switch-thumb",
+          className: g(
+            m.thumb,
+            m[p],
+            m[e]
+          ),
+          children: [
+            d && !n.disabled && /* @__PURE__ */ t(N, {}),
+            d && !n.disabled && /* @__PURE__ */ t(D, {}),
+            d && n.disabled && /* @__PURE__ */ t(H, {})
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  X 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 \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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 = makeVoltStyles({\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 = makeVoltStyles({\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    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\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    \":focus-visible\": { outlineColor: tokens.accentA8 },\n  },\n  destructive: {\n    color: tokens.errorA8,\n    \"&[data-state='checked']\": { backgroundColor: tokens.semErrorSolid },\n    \"&[data-state='unchecked']\": { backgroundColor: tokens.errorA3 },\n    \":focus-visible\": { outlineColor: tokens.errorA8 },\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 = makeVoltStyles({\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    \"&[data-state='checked']\": {\n      transform: \"translateX(calc(100% - 1px))\",\n    },\n    \"&[data-state='unchecked']\": {\n      transform: \"translateX(1px)\",\n    },\n    \"&[data-state='checked'] [data-volt2-slot='switch-thumb-icon-checked']\": {\n      display: \"inline-block\",\n    },\n    \"&[data-state='unchecked'] [data-volt2-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-volt2-slot='switch-thumb-icon-disabled']\": { width: \"0.25rem\" },\n  },\n  base: {\n    width: \"1rem\",\n    height: \"1rem\",\n    \"& svg[data-volt2-slot='switch-thumb-icon-disabled']\": {\n      width: \"0.375rem\",\n    },\n  },\n  lg: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    \"& svg[data-volt2-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  variant?: SwitchVariant\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","makeVoltStyles","shorthands","useRootStyles","tokens.grayA8","tokens.semAccentSolid","tokens.grayA3","tokens.accentA8","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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"}

package/dist/components/table/table.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+/**
+ * Table — the primitive set (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead,
+ * TableCell, TableCaption) in Card's compound pattern: one `makeVoltStyles` call, one slot per
+ * sub-component, each reading its own slot.
+ *
+ * v1 ships a density dimension through React context, defaulting to `normal`; TableHead and
+ * TableCell each resolve `effectiveDensity = density ?? contextDensity`, and that drives a height
+ * (head) or a vertical padding (cell) slot. Selectors carry over untouched where they do not
+ * involve `data-slot`: `[&_tr]:border-b`, `[&_tr:last-child]:border-0`,
+ * `data-[state=selected]:bg-accent-a3` (Radix selection state) and the `role="checkbox"`
+ * column-reflow rules all obey the original attribute.
+ *
+ * Values explicit where no token exists: `px-3` (0.75rem) on head/cell, the `h-9` / `h-10`
+ * heights (2.25rem / 2.5rem), `py-1.5` (0.375rem) and `py-3` (0.75rem) cell paddings. The row's
+ * `transition-colors` expands to Tailwind v4's default property list plus the 150ms
+ * `cubic-bezier(0.4, 0, 0.2, 1)` easing — visible motion from the framework's default theme,
+ * which the v1 file does not state (Rule 0: flagged, not approximated away). The checkbox
+ * `translate-y-[2px]` maps to the modern `translate` property, which is what Tailwind v4 emits.
+ */
+export type TableDensity = "compact" | "normal" | "comfortable";
+declare const TableDensityContext: React.Context<TableDensity>;
+export type TableProps = React.ComponentProps<"table"> & {
+    density?: TableDensity;
+};
+export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
+export type TableRowProps = React.ComponentProps<"tr"> & {
+    /** Disable hover background effect */
+    noHover?: boolean;
+};
+export declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
+export type TableHeadProps = React.ComponentProps<"th"> & {
+    align?: "left" | "center" | "right";
+    density?: TableDensity;
+};
+export declare const TableHead: React.ForwardRefExoticComponent<Omit<TableHeadProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+export type TableCellProps = React.ComponentProps<"td"> & {
+    align?: "left" | "center" | "right";
+    numeric?: boolean;
+    density?: TableDensity;
+};
+export declare const TableCell: React.ForwardRefExoticComponent<Omit<TableCellProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+export type TableCaptionProps = React.ComponentProps<"caption"> & {
+    position?: "top" | "bottom";
+};
+export declare const TableCaption: React.ForwardRefExoticComponent<Omit<TableCaptionProps, "ref"> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { TableDensityContext };