@epilot/volt-ui-experimental-griffel 0.2.3 → 0.3.1

package/dist/components/table/table.js

@@ -1,60 +1,64 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as n from "react";
-import { shorthands as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { jsx as l } from "react/jsx-runtime";
+import * as i from "react";
+import { shorthands as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as c } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as s } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as S } from "../../styles/make-styles.js";
-import { grayA5 as C, spacingGroup2 as w, grayA11 as H, leadingSm as R, textSm as N, spacingElement3 as g, spacingElement2 as v, grayA12 as B, fontWeightNormal as L, spacingLayout2 as W, fontWeightMedium as k, accentA3 as A, semGraySoft as D } from "../../tokens/index.js";
-const x = n.createContext("normal"), d = S({
+import { mergeClasses as d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as A } from "../../styles/make-styles.js";
+import { grayA5 as u, spacingGroup2 as w, grayA11 as B, leadingSm as x, textSm as R, grayA12 as C, fontWeightNormal as H, tableCellPaddingY as N, spacingElement3 as m, fontWeightMedium as v, tableHeadHeight as S, accentA3 as k, semGraySoft as W } from "../../tokens/index.js";
+import { canonicalDensity as T, DensityContextBoundary as y } from "../density-provider/density-provider.js";
+const j = i.createContext("normal"), s = A({
   wrapper: {
     position: "relative",
     width: "100%",
-    ...f.overflow("auto")
+    ...g.overflow("auto")
   },
   root: {
     width: "100%",
-    fontSize: N,
-    lineHeight: R
+    fontSize: R,
+    lineHeight: x
   },
   header: {
     "& tr": {
-      ...f.borderBottom("1px", "solid", C)
+      ...g.borderBottom("1px", "solid", u)
     }
   },
   body: {
     "& tr:last-child": {
-      ...f.borderWidth(0)
+      ...g.borderWidth(0)
     }
   },
   footer: {
-    ...f.borderTop("1px", "solid", C),
-    backgroundColor: D,
-    fontWeight: k,
+    ...g.borderTop("1px", "solid", u),
+    backgroundColor: W,
+    fontWeight: v,
     "& > tr:last-child": {
       borderBottomWidth: 0
     }
   },
   row: {
-    ...f.borderBottom("1px", "solid", C),
+    ...g.borderBottom("1px", "solid", u),
     transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     "&[data-state='selected']": {
-      backgroundColor: A
+      backgroundColor: k
     }
   },
   rowHover: {
     ":hover": {
-      backgroundColor: A
+      backgroundColor: k
     }
   },
   head: {
     // px-3
-    paddingLeft: g,
-    paddingRight: g,
+    paddingLeft: m,
+    paddingRight: m,
+    // Density-bound (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]
+    // ancestor — 32/36/40px for compact/normal/comfortable. No JS density switch needed.
+    height: S,
     verticalAlign: "middle",
-    fontWeight: k,
-    color: B,
+    fontWeight: v,
+    color: C,
     "&:has([role='checkbox'])": {
       paddingRight: 0
     },
@@ -63,16 +67,6 @@ const x = n.createContext("normal"), d = S({
       translate: "0 2px"
     }
   },
-  // h-8 / h-9 / h-10
-  headCompact: {
-    height: W
-  },
-  headNormal: {
-    height: "2.25rem"
-  },
-  headComfortable: {
-    height: "2.5rem"
-  },
   alignLeft: {
     textAlign: "left"
   },
@@ -84,11 +78,15 @@ const x = n.createContext("normal"), d = S({
   },
   cell: {
     // px-3
-    paddingLeft: g,
-    paddingRight: g,
+    paddingLeft: m,
+    paddingRight: m,
+    // Density-bound (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]
+    // ancestor — 6/8/12px for compact/normal/comfortable. No JS density switch needed.
+    paddingTop: N,
+    paddingBottom: N,
     verticalAlign: "middle",
-    fontWeight: L,
-    color: B,
+    fontWeight: H,
+    color: C,
     "&:has([role='checkbox'])": {
       paddingRight: 0
     },
@@ -97,26 +95,13 @@ const x = n.createContext("normal"), d = S({
       translate: "0 2px"
     }
   },
-  // py-1.5 / py-2 / py-3
-  cellCompact: {
-    paddingTop: "0.375rem",
-    paddingBottom: "0.375rem"
-  },
-  cellNormal: {
-    paddingTop: v,
-    paddingBottom: v
-  },
-  cellComfortable: {
-    paddingTop: g,
-    paddingBottom: g
-  },
   cellNumeric: {
     fontVariantNumeric: "tabular-nums"
   },
   caption: {
-    fontSize: N,
-    lineHeight: R,
-    color: H
+    fontSize: R,
+    lineHeight: x,
+    color: B
   },
   captionTop: {
     captionSide: "top",
@@ -128,137 +113,140 @@ const x = n.createContext("normal"), d = S({
     // mt-4
     marginTop: w
   }
-}), j = n.forwardRef(
-  function({ className: o, density: t = "normal", ...a }, r) {
-    const l = d();
-    return /* @__PURE__ */ i(x.Provider, { value: t, children: /* @__PURE__ */ i("div", { className: l.wrapper, children: /* @__PURE__ */ i(
+}), E = i.forwardRef(
+  function({ className: a, density: t, children: o, ...e }, r) {
+    const f = s();
+    return /* @__PURE__ */ l("div", { className: f.wrapper, children: /* @__PURE__ */ l(
       "table",
       {
         ref: r,
         "data-slot": "table",
         [c]: "table",
-        className: s(l.root, o),
-        ...a
+        className: d(f.root, a),
+        ...e,
+        ...t !== void 0 ? { "data-density": T(t) } : {},
+        children: /* @__PURE__ */ l(y, { density: t, children: o })
       }
-    ) }) });
+    ) });
   }
-), M = n.forwardRef(function({ className: o, ...t }, a) {
-  const r = d();
-  return /* @__PURE__ */ i(
+), M = i.forwardRef(function({ className: a, ...t }, o) {
+  const e = s();
+  return /* @__PURE__ */ l(
     "thead",
     {
-      ref: a,
+      ref: o,
       "data-slot": "table-header",
       [c]: "table-header",
-      className: s(r.header, o),
+      className: d(e.header, a),
       ...t
     }
   );
-}), O = n.forwardRef(function({ className: o, ...t }, a) {
-  const r = d();
-  return /* @__PURE__ */ i(
+}), O = i.forwardRef(function({ className: a, ...t }, o) {
+  const e = s();
+  return /* @__PURE__ */ l(
     "tbody",
     {
-      ref: a,
+      ref: o,
       "data-slot": "table-body",
       [c]: "table-body",
-      className: s(r.body, o),
+      className: d(e.body, a),
       ...t
     }
   );
-}), Q = n.forwardRef(function({ className: o, ...t }, a) {
-  const r = d();
-  return /* @__PURE__ */ i(
+}), Q = i.forwardRef(function({ className: a, ...t }, o) {
+  const e = s();
+  return /* @__PURE__ */ l(
     "tfoot",
     {
-      ref: a,
+      ref: o,
       "data-slot": "table-footer",
       [c]: "table-footer",
-      className: s(r.footer, o),
+      className: d(e.footer, a),
       ...t
     }
   );
-}), _ = n.forwardRef(
-  function({ className: o, noHover: t, ...a }, r) {
-    const l = d();
-    return /* @__PURE__ */ i(
+}), Y = i.forwardRef(
+  function({ className: a, noHover: t, ...o }, e) {
+    const r = s();
+    return /* @__PURE__ */ l(
       "tr",
       {
-        ref: r,
+        ref: e,
         "data-slot": "table-row",
         [c]: "table-row",
-        className: s(
-          l.row,
-          !t && l.rowHover,
-          o
+        className: d(
+          r.row,
+          !t && r.rowHover,
+          a
         ),
-        ...a
+        ...o
       }
     );
   }
-), q = n.forwardRef(
-  function({ className: o, align: t = "left", density: a, scope: r = "col", children: l, ...b }, h) {
-    const u = n.useContext(x), p = a ?? u, e = d(), y = p === "compact" ? e.headCompact : p === "normal" ? e.headNormal : e.headComfortable, T = t === "center" ? e.alignCenter : t === "right" ? e.alignRight : e.alignLeft;
-    return /* @__PURE__ */ i(
+), _ = i.forwardRef(
+  function({ className: a, align: t = "left", density: o, scope: e = "col", children: r, ...f }, p) {
+    const n = s(), h = t === "center" ? n.alignCenter : t === "right" ? n.alignRight : n.alignLeft;
+    return /* @__PURE__ */ l(
       "th",
       {
-        ref: h,
+        ref: p,
         "data-slot": "table-head",
         [c]: "table-head",
-        scope: r,
-        className: s(e.head, y, T, o),
-        ...b,
-        children: l
+        scope: e,
+        className: d(n.head, h, a),
+        ...f,
+        ...o !== void 0 ? { "data-density": T(o) } : {},
+        children: /* @__PURE__ */ l(y, { density: o, children: r })
       }
     );
   }
-), I = n.forwardRef(
-  function({ className: o, align: t = "left", numeric: a, density: r, children: l, ...b }, h) {
-    const u = n.useContext(x), p = r ?? u, e = d(), y = p === "compact" ? e.cellCompact : p === "normal" ? e.cellNormal : e.cellComfortable, T = t === "center" ? e.alignCenter : t === "right" ? e.alignRight : e.alignLeft;
-    return /* @__PURE__ */ i(
+), q = i.forwardRef(
+  function({ className: a, align: t = "left", numeric: o, density: e, children: r, ...f }, p) {
+    const n = s(), h = t === "center" ? n.alignCenter : t === "right" ? n.alignRight : n.alignLeft;
+    return /* @__PURE__ */ l(
       "td",
       {
-        ref: h,
+        ref: p,
         "data-slot": "table-cell",
         [c]: "table-cell",
-        className: s(
-          e.cell,
-          y,
-          T,
-          a && e.cellNumeric,
-          o
+        className: d(
+          n.cell,
+          h,
+          o && n.cellNumeric,
+          a
         ),
-        ...b,
-        children: l
+        ...f,
+        ...e !== void 0 ? { "data-density": T(e) } : {},
+        children: /* @__PURE__ */ l(y, { density: e, children: r })
       }
     );
   }
-), J = n.forwardRef(function({ className: o, position: t = "bottom", ...a }, r) {
-  const l = d();
-  return /* @__PURE__ */ i(
+), I = i.forwardRef(function({ className: a, position: t = "bottom", ...o }, e) {
+  const r = s();
+  return /* @__PURE__ */ l(
     "caption",
     {
-      ref: r,
+      ref: e,
       "data-slot": "table-caption",
       [c]: "table-caption",
-      className: s(
-        l.caption,
-        t === "top" ? l.captionTop : l.captionBottom,
-        o
+      className: d(
+        r.caption,
+        t === "top" ? r.captionTop : r.captionBottom,
+        a
       ),
-      ...a
+      ...o
     }
   );
 });
 export {
-  j as Table,
+  E as Table,
   O as TableBody,
-  J as TableCaption,
-  I as TableCell,
-  x as TableDensityContext,
+  I as TableCaption,
+  q as TableCell,
+  j as TableDensityContext,
   Q as TableFooter,
-  q as TableHead,
+  _ as TableHead,
   M as TableHeader,
-  _ as TableRow
+  Y as TableRow
 };
 //# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Table — the primitive set (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead,\n * TableCell, TableCaption) in Card's compound pattern: one `makeVoltStyles` call, one slot per\n * sub-component, each reading its own slot.\n *\n * v1 ships a density dimension through React context, defaulting to `normal`; TableHead and\n * TableCell each resolve `effectiveDensity = density ?? contextDensity`, and that drives a height\n * (head) or a vertical padding (cell) slot. Selectors carry over untouched where they do not\n * involve `data-slot`: `[&_tr]:border-b`, `[&_tr:last-child]:border-0`,\n * `data-[state=selected]:bg-accent-a3` (Radix selection state) and the `role=\"checkbox\"`\n * column-reflow rules all obey the original attribute.\n *\n * Values explicit where no token exists: `px-3` (0.75rem) on head/cell, the `h-9` / `h-10`\n * heights (2.25rem / 2.5rem), `py-1.5` (0.375rem) and `py-3` (0.75rem) cell paddings. The row's\n * `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — visible motion from the framework's default theme,\n * which the v1 file does not state (Rule 0: flagged, not approximated away). The checkbox\n * `translate-y-[2px]` maps to the modern `translate` property, which is what Tailwind v4 emits.\n */\n\nexport type TableDensity = \"compact\" | \"normal\" | \"comfortable\"\n\nconst TableDensityContext = React.createContext<TableDensity>(\"normal\")\n\nconst useStyles = makeVoltStyles({\n  wrapper: {\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  root: {\n    width: \"100%\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  header: {\n    \"& tr\": {\n      ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n    },\n  },\n  body: {\n    \"& tr:last-child\": {\n      ...shorthands.borderWidth(0),\n    },\n  },\n  footer: {\n    ...shorthands.borderTop(\"1px\", \"solid\", tokens.grayA5),\n    backgroundColor: tokens.semGraySoft,\n    fontWeight: tokens.fontWeightMedium,\n    \"& > tr:last-child\": {\n      borderBottomWidth: 0,\n    },\n  },\n  row: {\n    ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"&[data-state='selected']\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowHover: {\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  head: {\n    // px-3\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    verticalAlign: \"middle\",\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    \"&:has([role='checkbox'])\": {\n      paddingRight: 0,\n    },\n    \"& > [role='checkbox']\": {\n      // v1 `translate-y-[2px]`.\n      translate: \"0 2px\",\n    },\n  },\n  // h-8 / h-9 / h-10\n  headCompact: {\n    height: tokens.spacingLayout2,\n  },\n  headNormal: {\n    height: \"2.25rem\",\n  },\n  headComfortable: {\n    height: \"2.5rem\",\n  },\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  alignRight: {\n    textAlign: \"right\",\n  },\n  cell: {\n    // px-3\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    verticalAlign: \"middle\",\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA12,\n    \"&:has([role='checkbox'])\": {\n      paddingRight: 0,\n    },\n    \"& > [role='checkbox']\": {\n      // v1 `translate-y-[2px]`.\n      translate: \"0 2px\",\n    },\n  },\n  // py-1.5 / py-2 / py-3\n  cellCompact: {\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n  },\n  cellNormal: {\n    paddingTop: tokens.spacingElement2,\n    paddingBottom: tokens.spacingElement2,\n  },\n  cellComfortable: {\n    paddingTop: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n  },\n  cellNumeric: {\n    fontVariantNumeric: \"tabular-nums\",\n  },\n  caption: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n  captionTop: {\n    captionSide: \"top\",\n    // mb-4\n    marginBottom: tokens.spacingGroup2,\n  },\n  captionBottom: {\n    captionSide: \"bottom\",\n    // mt-4\n    marginTop: tokens.spacingGroup2,\n  },\n})\n\nexport type TableProps = React.ComponentProps<\"table\"> & {\n  density?: TableDensity\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  function Table({ className, density = \"normal\", ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <TableDensityContext.Provider value={density}>\n        <div className={styles.wrapper}>\n          <table\n            ref={ref}\n            data-slot=\"table\"\n            {...{ [SLOT_ATTR]: \"table\" }}\n            className={mergeClasses(styles.root, className)}\n            {...props}\n          />\n        </div>\n      </TableDensityContext.Provider>\n    )\n  }\n)\n\nexport const TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"thead\">\n>(function TableHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <thead\n      ref={ref}\n      data-slot=\"table-header\"\n      {...{ [SLOT_ATTR]: \"table-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"tbody\">\n>(function TableBody({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <tbody\n      ref={ref}\n      data-slot=\"table-body\"\n      {...{ [SLOT_ATTR]: \"table-body\" }}\n      className={mergeClasses(styles.body, className)}\n      {...props}\n    />\n  )\n})\n\nexport const TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"tfoot\">\n>(function TableFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <tfoot\n      ref={ref}\n      data-slot=\"table-footer\"\n      {...{ [SLOT_ATTR]: \"table-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TableRowProps = React.ComponentProps<\"tr\"> & {\n  /** Disable hover background effect */\n  noHover?: boolean\n}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow({ className, noHover, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <tr\n        ref={ref}\n        data-slot=\"table-row\"\n        {...{ [SLOT_ATTR]: \"table-row\" }}\n        className={mergeClasses(\n          styles.row,\n          !noHover && styles.rowHover,\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type TableHeadProps = React.ComponentProps<\"th\"> & {\n  align?: \"left\" | \"center\" | \"right\"\n  density?: TableDensity\n}\n\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  function TableHead(\n    { className, align = \"left\", density, scope = \"col\", children, ...props },\n    ref\n  ) {\n    const contextDensity = React.useContext(TableDensityContext)\n    const effectiveDensity = density ?? contextDensity\n    const styles = useStyles()\n\n    const height =\n      effectiveDensity === \"compact\"\n        ? styles.headCompact\n        : effectiveDensity === \"normal\"\n          ? styles.headNormal\n          : styles.headComfortable\n    const alignment =\n      align === \"center\"\n        ? styles.alignCenter\n        : align === \"right\"\n          ? styles.alignRight\n          : styles.alignLeft\n\n    return (\n      <th\n        ref={ref}\n        data-slot=\"table-head\"\n        {...{ [SLOT_ATTR]: \"table-head\" }}\n        scope={scope}\n        className={mergeClasses(styles.head, height, alignment, className)}\n        {...props}\n      >\n        {children}\n      </th>\n    )\n  }\n)\n\nexport type TableCellProps = React.ComponentProps<\"td\"> & {\n  align?: \"left\" | \"center\" | \"right\"\n  numeric?: boolean\n  density?: TableDensity\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(\n    { className, align = \"left\", numeric, density, children, ...props },\n    ref\n  ) {\n    const contextDensity = React.useContext(TableDensityContext)\n    const effectiveDensity = density ?? contextDensity\n    const styles = useStyles()\n\n    const height =\n      effectiveDensity === \"compact\"\n        ? styles.cellCompact\n        : effectiveDensity === \"normal\"\n          ? styles.cellNormal\n          : styles.cellComfortable\n    const alignment =\n      align === \"center\"\n        ? styles.alignCenter\n        : align === \"right\"\n          ? styles.alignRight\n          : styles.alignLeft\n\n    return (\n      <td\n        ref={ref}\n        data-slot=\"table-cell\"\n        {...{ [SLOT_ATTR]: \"table-cell\" }}\n        className={mergeClasses(\n          styles.cell,\n          height,\n          alignment,\n          numeric && styles.cellNumeric,\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </td>\n    )\n  }\n)\n\nexport type TableCaptionProps = React.ComponentProps<\"caption\"> & {\n  position?: \"top\" | \"bottom\"\n}\n\nexport const TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  TableCaptionProps\n>(function TableCaption({ className, position = \"bottom\", ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <caption\n      ref={ref}\n      data-slot=\"table-caption\"\n      {...{ [SLOT_ATTR]: \"table-caption\" }}\n      className={mergeClasses(\n        styles.caption,\n        position === \"top\" ? styles.captionTop : styles.captionBottom,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport { TableDensityContext }\n"],"names":["TableDensityContext","React","useStyles","makeVoltStyles","shorthands","tokens.textSm","tokens.leadingSm","tokens.grayA5","tokens.semGraySoft","tokens.fontWeightMedium","tokens.accentA3","tokens.spacingElement3","tokens.grayA12","tokens.spacingLayout2","tokens.fontWeightNormal","tokens.spacingElement2","tokens.grayA11","tokens.spacingGroup2","Table","className","density","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","TableHeader","TableBody","TableFooter","TableRow","noHover","TableHead","align","scope","children","contextDensity","effectiveDensity","height","alignment","TableCell","numeric","TableCaption","position"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  canonicalDensity,\n  DensityContextBoundary,\n} from \"../density-provider/density-provider\"\n\n/**\n * Table — the primitive set (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead,\n * TableCell, TableCaption) in Card's compound pattern: one `makeVoltStyles` call, one slot per\n * sub-component, each reading its own slot.\n *\n * Density (approved 2026-09-09, TABLE-DENSITY-IMPLEMENTATION.md — replaces the earlier\n * context-only mechanism described by `TABLE-LIST-DENSITY-COMPATIBILITY-NOTE.md`, now resolved;\n * corrected 2026-09-09 per TABLE-DENSITY-REVIEW-1.md, see the two notes below):\n * `TableHead`/`TableCell` read `tokens.tableHeadHeight`/`tokens.tableCellPaddingY` directly —\n * generated CSS custom properties that cascade from the nearest `[data-density]` ancestor, exactly\n * like Button/Field/Select. `Table`'s own `density` prop, when explicit, stamps `data-density` on\n * the `<table>` element itself; when omitted, no attribute is stamped and ambient shell density\n * (or an outer `DensityProvider`) inherits through ordinary DOM/CSS with no React involvement — a\n * shell attribute mutation restyles an already-mounted table without a rerender. Per-cell\n * `TableHead`/`TableCell` `density` props stamp their own `data-density` the same way, overriding\n * locally. `TableDensityContext` (below) is a deprecated, now-inert compatibility export — see its\n * own doc comment.\n *\n * Two corrections (TABLE-DENSITY-REVIEW-1.md), both applied identically to `Table`, `DataTable`\n * (`data-table.tsx`), `TableHead` and `TableCell`:\n *\n * 1. An explicit `density` establishes a `DensityContextBoundary`, not just a DOM stamp. A DOM\n *    attribute alone reaches ordinary CSS-inheriting descendants, but a Radix `Portal` (a real\n *    `Select`/`Popover`/etc. rendered inside a cell) is a DOM sibling, not descendant, of that cell\n *    — its own `useDensity()` read needs the REACT context updated too, or it silently reports a\n *    stale ancestor value instead of the cell's own override.\n * 2. The DOM stamp and the context value both run through the SAME `canonicalDensity` function\n *    (from `density-provider.tsx`, package-internal). Before this fix, `DensityContextBoundary`\n *    normalized invalid runtime input (e.g. a bad string bypassing TypeScript) for the context, but\n *    the DOM attribute was written raw/unnormalized — an invalid value could stamp `data-density`\n *    with something no generated CSS selector matches while `useDensity()` reported the normalized\n *    `\"normal\"`, disagreeing about what density is actually in effect.\n *\n * Selectors carry over untouched where they do not involve `data-slot`: `[&_tr]:border-b`,\n * `[&_tr:last-child]:border-0`, `data-[state=selected]:bg-accent-a3` (Radix selection state) and\n * the `role=\"checkbox\"` column-reflow rules all obey the original attribute.\n *\n * Values explicit where no token exists: `px-3` (0.75rem) on head/cell. The row's\n * `transition-colors` expands to Tailwind v4's default property list plus the 150ms\n * `cubic-bezier(0.4, 0, 0.2, 1)` easing — visible motion from the framework's default theme,\n * which the v1 file does not state (Rule 0: flagged, not approximated away). The checkbox\n * `translate-y-[2px]` maps to the modern `translate` property, which is what Tailwind v4 emits.\n */\n\nexport type TableDensity = \"compact\" | \"normal\" | \"comfortable\"\n\n/**\n * @deprecated No longer a supported way to control Table/DataTable geometry (approved 2026-09-09,\n * TABLE-DENSITY-IMPLEMENTATION.md). `Table`/`DataTable` no longer provide a value into this\n * context, and `TableHead`/`TableCell` no longer read it — density now flows entirely through CSS\n * custom-property inheritance from the nearest `[data-density]` ancestor (ambient shell or\n * `DensityProvider`), plus each component's own `density` prop stamping its own `data-density`\n * when explicit. This context simply no longer controls or reports Table/DataTable geometry —\n * `useContext(TableDensityContext)` still returns whatever a consumer's own raw\n * `TableDensityContext.Provider` sets (or the bare `\"normal\"` default with no such Provider), it\n * just has no bearing on what actually renders any more. Kept only so existing\n * `import { TableDensityContext }` statements and `useContext(TableDensityContext)` call sites do\n * not hard-error. Use the `density` prop on `Table`/`DataTable`/`TableHead`/`TableCell`, or wrap a\n * subtree in `DensityProvider`, instead. This is a disclosed behavioural change; the context's own\n * type and default value are unchanged.\n */\nconst TableDensityContext = React.createContext<TableDensity>(\"normal\")\n\nconst useStyles = makeVoltStyles({\n  wrapper: {\n    position: \"relative\",\n    width: \"100%\",\n    ...shorthands.overflow(\"auto\"),\n  },\n  root: {\n    width: \"100%\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n  },\n  header: {\n    \"& tr\": {\n      ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n    },\n  },\n  body: {\n    \"& tr:last-child\": {\n      ...shorthands.borderWidth(0),\n    },\n  },\n  footer: {\n    ...shorthands.borderTop(\"1px\", \"solid\", tokens.grayA5),\n    backgroundColor: tokens.semGraySoft,\n    fontWeight: tokens.fontWeightMedium,\n    \"& > tr:last-child\": {\n      borderBottomWidth: 0,\n    },\n  },\n  row: {\n    ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA5),\n    transitionProperty:\n      \"color, background-color, border-color, text-decoration-color, fill, stroke\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"&[data-state='selected']\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  rowHover: {\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  head: {\n    // px-3\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    // Density-bound (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]\n    // ancestor — 32/36/40px for compact/normal/comfortable. No JS density switch needed.\n    height: tokens.tableHeadHeight,\n    verticalAlign: \"middle\",\n    fontWeight: tokens.fontWeightMedium,\n    color: tokens.grayA12,\n    \"&:has([role='checkbox'])\": {\n      paddingRight: 0,\n    },\n    \"& > [role='checkbox']\": {\n      // v1 `translate-y-[2px]`.\n      translate: \"0 2px\",\n    },\n  },\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  alignRight: {\n    textAlign: \"right\",\n  },\n  cell: {\n    // px-3\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n    // Density-bound (TABLE-DENSITY-IMPLEMENTATION.md): cascades from the nearest [data-density]\n    // ancestor — 6/8/12px for compact/normal/comfortable. No JS density switch needed.\n    paddingTop: tokens.tableCellPaddingY,\n    paddingBottom: tokens.tableCellPaddingY,\n    verticalAlign: \"middle\",\n    fontWeight: tokens.fontWeightNormal,\n    color: tokens.grayA12,\n    \"&:has([role='checkbox'])\": {\n      paddingRight: 0,\n    },\n    \"& > [role='checkbox']\": {\n      // v1 `translate-y-[2px]`.\n      translate: \"0 2px\",\n    },\n  },\n  cellNumeric: {\n    fontVariantNumeric: \"tabular-nums\",\n  },\n  caption: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n  captionTop: {\n    captionSide: \"top\",\n    // mb-4\n    marginBottom: tokens.spacingGroup2,\n  },\n  captionBottom: {\n    captionSide: \"bottom\",\n    // mt-4\n    marginTop: tokens.spacingGroup2,\n  },\n})\n\nexport type TableProps = React.ComponentProps<\"table\"> & {\n  density?: TableDensity\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  function Table({ className, density, children, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <div className={styles.wrapper}>\n        <table\n          ref={ref}\n          data-slot=\"table\"\n          {...{ [SLOT_ATTR]: \"table\" }}\n          className={mergeClasses(styles.root, className)}\n          {...props}\n          // Authoritative, spread last: a raw caller data-density prop (part of {...props}, since\n          // TableProps extends every native table prop) must never win over the normalized density\n          // prop — same invariant DensityProvider enforces for its own data-density stamp.\n          // canonicalDensity here is the SAME normalization DensityContextBoundary below applies to\n          // the context value, so an invalid density can never make the DOM and context disagree\n          // (TABLE-DENSITY-REVIEW-1.md #2).\n          {...(density !== undefined\n            ? { \"data-density\": canonicalDensity(density) }\n            : {})}\n        >\n          <DensityContextBoundary density={density}>\n            {children}\n          </DensityContextBoundary>\n        </table>\n      </div>\n    )\n  }\n)\n\nexport const TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"thead\">\n>(function TableHeader({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <thead\n      ref={ref}\n      data-slot=\"table-header\"\n      {...{ [SLOT_ATTR]: \"table-header\" }}\n      className={mergeClasses(styles.header, className)}\n      {...props}\n    />\n  )\n})\n\nexport const TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"tbody\">\n>(function TableBody({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <tbody\n      ref={ref}\n      data-slot=\"table-body\"\n      {...{ [SLOT_ATTR]: \"table-body\" }}\n      className={mergeClasses(styles.body, className)}\n      {...props}\n    />\n  )\n})\n\nexport const TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.ComponentProps<\"tfoot\">\n>(function TableFooter({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <tfoot\n      ref={ref}\n      data-slot=\"table-footer\"\n      {...{ [SLOT_ATTR]: \"table-footer\" }}\n      className={mergeClasses(styles.footer, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TableRowProps = React.ComponentProps<\"tr\"> & {\n  /** Disable hover background effect */\n  noHover?: boolean\n}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  function TableRow({ className, noHover, ...props }, ref) {\n    const styles = useStyles()\n\n    return (\n      <tr\n        ref={ref}\n        data-slot=\"table-row\"\n        {...{ [SLOT_ATTR]: \"table-row\" }}\n        className={mergeClasses(\n          styles.row,\n          !noHover && styles.rowHover,\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type TableHeadProps = React.ComponentProps<\"th\"> & {\n  align?: \"left\" | \"center\" | \"right\"\n  density?: TableDensity\n}\n\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  function TableHead(\n    { className, align = \"left\", density, scope = \"col\", children, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    const alignment =\n      align === \"center\"\n        ? styles.alignCenter\n        : align === \"right\"\n          ? styles.alignRight\n          : styles.alignLeft\n\n    return (\n      <th\n        ref={ref}\n        data-slot=\"table-head\"\n        {...{ [SLOT_ATTR]: \"table-head\" }}\n        scope={scope}\n        className={mergeClasses(styles.head, alignment, className)}\n        {...props}\n        // Authoritative, normalized, spread last — see the matching comment on Table above.\n        {...(density !== undefined\n          ? { \"data-density\": canonicalDensity(density) }\n          : {})}\n      >\n        {/* TABLE-DENSITY-REVIEW-1.md #1: an explicit per-cell override must also establish the\n            context boundary, not just the DOM stamp — a real portal (Select/Popover/etc.) rendered\n            inside this cell is a DOM sibling, not a descendant, so only useDensity() reaches it. */}\n        <DensityContextBoundary density={density}>{children}</DensityContextBoundary>\n      </th>\n    )\n  }\n)\n\nexport type TableCellProps = React.ComponentProps<\"td\"> & {\n  align?: \"left\" | \"center\" | \"right\"\n  numeric?: boolean\n  density?: TableDensity\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(\n    { className, align = \"left\", numeric, density, children, ...props },\n    ref\n  ) {\n    const styles = useStyles()\n\n    const alignment =\n      align === \"center\"\n        ? styles.alignCenter\n        : align === \"right\"\n          ? styles.alignRight\n          : styles.alignLeft\n\n    return (\n      <td\n        ref={ref}\n        data-slot=\"table-cell\"\n        {...{ [SLOT_ATTR]: \"table-cell\" }}\n        className={mergeClasses(\n          styles.cell,\n          alignment,\n          numeric && styles.cellNumeric,\n          className\n        )}\n        {...props}\n        // Authoritative, normalized, spread last — see the matching comment on Table above.\n        {...(density !== undefined\n          ? { \"data-density\": canonicalDensity(density) }\n          : {})}\n      >\n        {/* TABLE-DENSITY-REVIEW-1.md #1: see the matching comment on TableHead above. */}\n        <DensityContextBoundary density={density}>{children}</DensityContextBoundary>\n      </td>\n    )\n  }\n)\n\nexport type TableCaptionProps = React.ComponentProps<\"caption\"> & {\n  position?: \"top\" | \"bottom\"\n}\n\nexport const TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  TableCaptionProps\n>(function TableCaption({ className, position = \"bottom\", ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <caption\n      ref={ref}\n      data-slot=\"table-caption\"\n      {...{ [SLOT_ATTR]: \"table-caption\" }}\n      className={mergeClasses(\n        styles.caption,\n        position === \"top\" ? styles.captionTop : styles.captionBottom,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport { TableDensityContext }\n"],"names":["TableDensityContext","React","useStyles","makeVoltStyles","shorthands","tokens.textSm","tokens.leadingSm","tokens.grayA5","tokens.semGraySoft","tokens.fontWeightMedium","tokens.accentA3","tokens.spacingElement3","tokens.tableHeadHeight","tokens.grayA12","tokens.tableCellPaddingY","tokens.fontWeightNormal","tokens.grayA11","tokens.spacingGroup2","Table","className","density","children","props","ref","styles","jsx","SLOT_ATTR","mergeClasses","canonicalDensity","DensityContextBoundary","TableHeader","TableBody","TableFooter","TableRow","noHover","TableHead","align","scope","alignment","TableCell","numeric","TableCaption","position"],"mappings":"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"}

package/dist/components/toggle/toggle.js

@@ -3,10 +3,10 @@ import * as l from "react";
 import { Root as d } from "../../vendor/@radix-ui/react-toggle/dist/index.js";
 import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as c } from "../../styles/make-styles.js";
-import { radius2xl as u, spacingElement2 as h, radiusXl as f, radiusLg as p, spacingElement1 as b, errorA4 as v, errorA3 as C, errorA8 as k, semErrorSoft as y, semErrorLight as S, accentA4 as A, accentA3 as x, accentA8 as R, semAccentSoft as T, semAccentLight as W, fontWeightSemibold as E } from "../../tokens/index.js";
-const w = c({
+import { mergeClasses as c } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { makeVoltStyles as g } from "../../styles/make-styles.js";
+import { radius2xl as u, spacingElement2 as h, radiusXl as f, radiusLg as p, spacingElement1 as b, errorA4 as v, semErrorOnSoft as C, errorA3 as S, semErrorSoft as k, semErrorLight as y, accentA4 as x, semAccentOnSoft as A, accentA3 as R, semAccentSoft as E, semAccentLight as T, semFocusRing as W, fontWeightSemibold as w } from "../../tokens/index.js";
+const I = g({
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -14,16 +14,20 @@ const w = c({
     ...o.gap(b),
     flexShrink: 0,
     cursor: "pointer",
-    fontWeight: E,
+    fontWeight: w,
     transitionProperty: "all",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
     ...o.borderStyle("none"),
     ...o.borderWidth(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
-      outlineStyle: "solid"
+      outlineStyle: "solid",
+      outlineColor: W
     },
     ":disabled, &[data-disabled]": {
       pointerEvents: "none",
@@ -38,31 +42,27 @@ const w = c({
   // Variants
   default: {
     backgroundColor: "transparent",
-    color: W,
+    color: T,
     ":hover": {
-      backgroundColor: T
-    },
-    ":focus-visible": {
-      outlineColor: R
+      backgroundColor: E
     },
     "&[data-state='on']": {
-      backgroundColor: x
+      backgroundColor: R,
+      color: A
     },
     "&[data-state='on']:hover": {
-      backgroundColor: A
+      backgroundColor: x
     }
   },
   destructive: {
     backgroundColor: "transparent",
-    color: S,
+    color: y,
     ":hover": {
-      backgroundColor: y
-    },
-    ":focus-visible": {
-      outlineColor: k
+      backgroundColor: k
     },
     "&[data-state='on']": {
-      backgroundColor: C
+      backgroundColor: S,
+      color: C
     },
     "&[data-state='on']:hover": {
       backgroundColor: v
@@ -99,26 +99,26 @@ const w = c({
       height: "1.25rem"
     }
   }
-}), P = l.forwardRef(function({ className: r, variant: t = "default", size: i = "base", ...n }, a) {
-  const e = w();
+}), Q = l.forwardRef(function({ className: e, variant: t = "default", size: n = "base", ...i }, a) {
+  const r = I();
   return /* @__PURE__ */ s(
     d,
     {
       ref: a,
       "data-slot": "toggle",
       [m]: "toggle",
-      className: g(
-        e.root,
-        e[t],
-        e[i],
-        r
+      className: c(
+        r.root,
+        r[t],
+        r[n],
+        e
       ),
-      ...n
+      ...i
     }
   );
 });
 export {
-  P as Toggle,
-  w as useToggleStyles
+  Q as Toggle,
+  I as useToggleStyles
 };
 //# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA8","tokens.accentA3","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA8","tokens.errorA3","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsx","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAWO,MAAMA,IAAkBC,EAAe;AAAA,EAC5C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,IAEhB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAOG;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGZ,EAAW,aAAaa,CAAe;AAAA,IAC1C,GAAGb,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,EAAW,cAAce,CAAsB;AAAA,IAClD,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGf,EAAW,aAAagB,CAAgB;AAAA,IAC3C,GAAGhB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYiB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS1B,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\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    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.semErrorOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semFocusRing","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA3","tokens.semAccentOnSoft","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA3","tokens.semErrorOnSoft","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsx","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAWO,MAAMA,IAAkBC,EAAe;AAAA,EAC5C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAcG;AAAAA,IAAO;AAAA,IAEvB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGb,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,aAAae,CAAe;AAAA,IAC1C,GAAGf,EAAW,cAAcgB,CAAsB;AAAA,IAClD,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGhB,EAAW,aAAaiB,CAAgB;AAAA,IAC3C,GAAGjB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYkB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE,gBAAA4B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}