@epilot/volt-ui-experimental-griffel 0.1.2 → 0.2.1

package/dist/components/table/table.js

@@ -1,59 +1,60 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as n from "react";
-import { shorthands as b } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as c } from "../../renderer/contract.js";
-import { makeVoltStyles as A } from "../../styles/make-styles.js";
-import { grayA5 as C, spacingGroup2 as w, grayA11 as S, textSm as R, spacingElement3 as p, spacingElement2 as N, grayA12 as v, fontWeightNormal as L, spacingLayout2 as W, fontWeightMedium as B, accentA3 as k, semGraySoft as D } from "../../tokens/index.js";
-import { mergeClasses as s } from "../../node_modules/@griffel/core/src/mergeClasses.js";
-const x = n.createContext("normal"), d = A({
+import { shorthands as f } 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({
   wrapper: {
     position: "relative",
     width: "100%",
-    ...b.overflow("auto")
+    ...f.overflow("auto")
   },
   root: {
     width: "100%",
-    fontSize: R
+    fontSize: N,
+    lineHeight: R
   },
   header: {
     "& tr": {
-      ...b.borderBottom("1px", "solid", C)
+      ...f.borderBottom("1px", "solid", C)
     }
   },
   body: {
     "& tr:last-child": {
-      ...b.borderWidth(0)
+      ...f.borderWidth(0)
     }
   },
   footer: {
-    ...b.borderTop("1px", "solid", C),
+    ...f.borderTop("1px", "solid", C),
     backgroundColor: D,
-    fontWeight: B,
+    fontWeight: k,
     "& > tr:last-child": {
       borderBottomWidth: 0
     }
   },
   row: {
-    ...b.borderBottom("1px", "solid", C),
+    ...f.borderBottom("1px", "solid", C),
     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: k
+      backgroundColor: A
     }
   },
   rowHover: {
     ":hover": {
-      backgroundColor: k
+      backgroundColor: A
     }
   },
   head: {
     // px-3
-    paddingLeft: p,
-    paddingRight: p,
+    paddingLeft: g,
+    paddingRight: g,
     verticalAlign: "middle",
-    fontWeight: B,
-    color: v,
+    fontWeight: k,
+    color: B,
     "&:has([role='checkbox'])": {
       paddingRight: 0
     },
@@ -83,11 +84,11 @@ const x = n.createContext("normal"), d = A({
   },
   cell: {
     // px-3
-    paddingLeft: p,
-    paddingRight: p,
+    paddingLeft: g,
+    paddingRight: g,
     verticalAlign: "middle",
     fontWeight: L,
-    color: v,
+    color: B,
     "&:has([role='checkbox'])": {
       paddingRight: 0
     },
@@ -102,19 +103,20 @@ const x = n.createContext("normal"), d = A({
     paddingBottom: "0.375rem"
   },
   cellNormal: {
-    paddingTop: N,
-    paddingBottom: N
+    paddingTop: v,
+    paddingBottom: v
   },
   cellComfortable: {
-    paddingTop: p,
-    paddingBottom: p
+    paddingTop: g,
+    paddingBottom: g
   },
   cellNumeric: {
     fontVariantNumeric: "tabular-nums"
   },
   caption: {
-    fontSize: R,
-    color: S
+    fontSize: N,
+    lineHeight: R,
+    color: H
   },
   captionTop: {
     captionSide: "top",
@@ -126,8 +128,8 @@ const x = n.createContext("normal"), d = A({
     // mt-4
     marginTop: w
   }
-}), V = n.forwardRef(
-  function({ className: e, density: t = "normal", ...a }, r) {
+}), 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(
       "table",
@@ -135,12 +137,12 @@ const x = n.createContext("normal"), d = A({
         ref: r,
         "data-slot": "table",
         [c]: "table",
-        className: s(l.root, e),
+        className: s(l.root, o),
         ...a
       }
     ) }) });
   }
-), j = n.forwardRef(function({ className: e, ...t }, a) {
+), M = n.forwardRef(function({ className: o, ...t }, a) {
   const r = d();
   return /* @__PURE__ */ i(
     "thead",
@@ -148,11 +150,11 @@ const x = n.createContext("normal"), d = A({
       ref: a,
       "data-slot": "table-header",
       [c]: "table-header",
-      className: s(r.header, e),
+      className: s(r.header, o),
       ...t
     }
   );
-}), M = n.forwardRef(function({ className: e, ...t }, a) {
+}), O = n.forwardRef(function({ className: o, ...t }, a) {
   const r = d();
   return /* @__PURE__ */ i(
     "tbody",
@@ -160,11 +162,11 @@ const x = n.createContext("normal"), d = A({
       ref: a,
       "data-slot": "table-body",
       [c]: "table-body",
-      className: s(r.body, e),
+      className: s(r.body, o),
       ...t
     }
   );
-}), O = n.forwardRef(function({ className: e, ...t }, a) {
+}), Q = n.forwardRef(function({ className: o, ...t }, a) {
   const r = d();
   return /* @__PURE__ */ i(
     "tfoot",
@@ -172,12 +174,12 @@ const x = n.createContext("normal"), d = A({
       ref: a,
       "data-slot": "table-footer",
       [c]: "table-footer",
-      className: s(r.footer, e),
+      className: s(r.footer, o),
       ...t
     }
   );
 }), _ = n.forwardRef(
-  function({ className: e, noHover: t, ...a }, r) {
+  function({ className: o, noHover: t, ...a }, r) {
     const l = d();
     return /* @__PURE__ */ i(
       "tr",
@@ -188,15 +190,15 @@ const x = n.createContext("normal"), d = A({
         className: s(
           l.row,
           !t && l.rowHover,
-          e
+          o
         ),
         ...a
       }
     );
   }
 ), q = n.forwardRef(
-  function({ className: e, align: t = "left", density: a, scope: r = "col", children: l, ...g }, h) {
-    const u = n.useContext(x), f = a ?? u, o = d(), y = f === "compact" ? o.headCompact : f === "normal" ? o.headNormal : o.headComfortable, T = t === "center" ? o.alignCenter : t === "right" ? o.alignRight : o.alignLeft;
+  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(
       "th",
       {
@@ -204,15 +206,15 @@ const x = n.createContext("normal"), d = A({
         "data-slot": "table-head",
         [c]: "table-head",
         scope: r,
-        className: s(o.head, y, T, e),
-        ...g,
+        className: s(e.head, y, T, o),
+        ...b,
         children: l
       }
     );
   }
 ), I = n.forwardRef(
-  function({ className: e, align: t = "left", numeric: a, density: r, children: l, ...g }, h) {
-    const u = n.useContext(x), f = r ?? u, o = d(), y = f === "compact" ? o.cellCompact : f === "normal" ? o.cellNormal : o.cellComfortable, T = t === "center" ? o.alignCenter : t === "right" ? o.alignRight : o.alignLeft;
+  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(
       "td",
       {
@@ -220,18 +222,18 @@ const x = n.createContext("normal"), d = A({
         "data-slot": "table-cell",
         [c]: "table-cell",
         className: s(
-          o.cell,
+          e.cell,
           y,
           T,
-          a && o.cellNumeric,
-          e
+          a && e.cellNumeric,
+          o
         ),
-        ...g,
+        ...b,
         children: l
       }
     );
   }
-), J = n.forwardRef(function({ className: e, position: t = "bottom", ...a }, r) {
+), J = n.forwardRef(function({ className: o, position: t = "bottom", ...a }, r) {
   const l = d();
   return /* @__PURE__ */ i(
     "caption",
@@ -242,21 +244,21 @@ const x = n.createContext("normal"), d = A({
       className: s(
         l.caption,
         t === "top" ? l.captionTop : l.captionBottom,
-        e
+        o
       ),
       ...a
     }
   );
 });
 export {
-  V as Table,
-  M as TableBody,
+  j as Table,
+  O as TableBody,
   J as TableCaption,
   I as TableCell,
   x as TableDensityContext,
-  O as TableFooter,
+  Q as TableFooter,
   q as TableHead,
-  j as TableHeader,
+  M as TableHeader,
   _ 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 \"@griffel/core\"\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  },\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    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.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\"\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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"}

package/dist/components/tabs/tabs.js

@@ -1,11 +1,11 @@
 import { jsx as l } from "react/jsx-runtime";
 import * as s from "react";
-import { Root as v, Content as y, List as T, Trigger as A } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
-import { shorthands as t } from "../../node_modules/@griffel/core/src/index.js";
-import { SLOT_ATTR as c } from "../../renderer/contract.js";
+import { Root as y, Content as v, List as T, Trigger as A } from "../../vendor/@radix-ui/react-tabs/dist/index.js";
+import { shorthands as t } 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 d } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as k } from "../../styles/make-styles.js";
-import { spacingElement3 as m, spacingGroup2 as R, spacingElement2 as i, errorA3 as V, errorA8 as S, errorA4 as w, errorA11 as L, accentA3 as j, accentA8 as D, accentA4 as I, accentA12 as N, grayA3 as z, grayA8 as B, grayA4 as E, grayA12 as p, textSm as G, radiusLg as h, spacingElement1 as O } from "../../tokens/index.js";
-import { mergeClasses as d } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+import { spacingElement3 as m, spacingGroup2 as R, spacingElement2 as i, errorA3 as S, errorA8 as V, errorA4 as w, errorA11 as L, accentA3 as j, accentA8 as D, accentA4 as I, accentA12 as N, grayA3 as z, grayA8 as B, grayA4 as E, grayA12 as p, leadingSm as G, textSm as O, radiusLg as h, spacingElement1 as P } from "../../tokens/index.js";
 const x = s.createContext({
   size: "base",
   variant: "default"
@@ -34,7 +34,7 @@ const x = s.createContext({
       flexDirection: "column",
       alignItems: "stretch",
       justifyContent: "flex-start",
-      ...t.gap(O),
+      ...t.gap(P),
       ...t.paddingBlock(0)
     }
   },
@@ -47,7 +47,8 @@ const x = s.createContext({
     ...t.borderWidth(0),
     ...t.borderRadius(h),
     cursor: "pointer",
-    fontSize: G,
+    fontSize: O,
+    lineHeight: G,
     transitionProperty: "all",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -103,10 +104,10 @@ const x = s.createContext({
       backgroundColor: w
     },
     ":focus-visible": {
-      outlineColor: S
+      outlineColor: V
     },
     "&[data-state='active']": {
-      backgroundColor: V
+      backgroundColor: S
     }
   },
   content: {
@@ -115,33 +116,33 @@ const x = s.createContext({
     flexBasis: "0%",
     outlineStyle: "none"
   }
-}), J = s.forwardRef(function({ className: a, size: e = "base", variant: o = "default", ...r }, n) {
-  const f = g(), b = s.useMemo(() => ({ size: e, variant: o }), [e, o]);
+}), J = s.forwardRef(function({ className: o, size: e = "base", variant: a = "default", ...r }, n) {
+  const f = g(), b = s.useMemo(() => ({ size: e, variant: a }), [e, a]);
   return /* @__PURE__ */ l(x.Provider, { value: b, children: /* @__PURE__ */ l(
-    v,
+    y,
     {
       ref: n,
       "data-slot": "tabs",
       [c]: "tabs",
       "data-size": e,
-      "data-variant": o,
-      className: d(f.root, a),
+      "data-variant": a,
+      className: d(f.root, o),
       ...r
     }
   ) });
-}), K = s.forwardRef(function({ className: a, ...e }, o) {
+}), K = s.forwardRef(function({ className: o, ...e }, a) {
   const r = g();
   return /* @__PURE__ */ l(
     T,
     {
-      ref: o,
+      ref: a,
       "data-slot": "tabs-list",
       [c]: "tabs-list",
-      className: d(r.list, a),
+      className: d(r.list, o),
       ...e
     }
   );
-}), Q = s.forwardRef(function({ className: a, variant: e = "default", ...o }, r) {
+}), U = s.forwardRef(function({ className: o, variant: e = "default", ...a }, r) {
   const n = g(), { size: f, variant: b } = s.useContext(x), C = e === "destructive" ? n.destructiveVariant : b === "highlight" ? n.highlightVariant : n.defaultVariant;
   return /* @__PURE__ */ l(
     A,
@@ -153,28 +154,28 @@ const x = s.createContext({
         n.trigger,
         n[f],
         C,
-        a
+        o
       ),
-      ...o
+      ...a
     }
   );
-}), U = s.forwardRef(function({ className: a, ...e }, o) {
+}), X = s.forwardRef(function({ className: o, ...e }, a) {
   const r = g();
   return /* @__PURE__ */ l(
-    y,
+    v,
     {
-      ref: o,
+      ref: a,
       "data-slot": "tabs-content",
       [c]: "tabs-content",
-      className: d(r.content, a),
+      className: d(r.content, o),
       ...e
     }
   );
 });
 export {
   J as Tabs,
-  U as TabsContent,
+  X as TabsContent,
   K as TabsList,
-  Q as TabsTrigger
+  U as TabsTrigger
 };
 //# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\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\nexport type TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"row\",\n      alignItems: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  list: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    height: \"auto\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingBlock(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      justifyContent: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement1),\n      ...shorthands.paddingBlock(0),\n    },\n  },\n  trigger: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    fontSize: tokens.textSm,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \"&[data-orientation='vertical']\": {\n      justifyContent: \"flex-start\",\n      textAlign: \"left\",\n      width: \"100%\",\n    },\n  },\n  // Sizes\n  sm: {\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\n    },\n  },\n  highlightVariant: {\n    color: tokens.accentA12,\n    \":hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  destructiveVariant: {\n    color: tokens.errorA11,\n    \":hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  { className, size = \"base\", variant = \"default\", ...props },\n  ref\n) {\n  const styles = useStyles()\n  const contextValue = React.useMemo(() => ({ size, variant }), [size, variant])\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        {...{ [SLOT_ATTR]: \"tabs\" }}\n        data-size={size}\n        data-variant={variant}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger({ className, variant = \"default\", ...props }, ref) {\n  const styles = useStyles()\n  const { size, variant: rootVariant } = React.useContext(TabsContext)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","tokens.textSm","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA4","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","props","ref","styles","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","rootVariant","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\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 TabsSize = \"sm\" | \"base\" | \"lg\"\nexport type TabsRootVariant = \"default\" | \"highlight\"\nexport type TabsTriggerVariant = \"default\" | \"destructive\"\n\ntype TabsContextValue = {\n  size: TabsSize\n  variant: TabsRootVariant\n}\n\nconst TabsContext = React.createContext<TabsContextValue>({\n  size: \"base\",\n  variant: \"default\",\n})\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"row\",\n      alignItems: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement2),\n    },\n  },\n  list: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA12,\n    height: \"auto\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingBlock(tokens.spacingElement2),\n    \"&[data-orientation='vertical']\": {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      justifyContent: \"flex-start\",\n      ...shorthands.gap(tokens.spacingElement1),\n      ...shorthands.paddingBlock(0),\n    },\n  },\n  trigger: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    backgroundColor: \"transparent\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \"&[data-orientation='vertical']\": {\n      justifyContent: \"flex-start\",\n      textAlign: \"left\",\n      width: \"100%\",\n    },\n  },\n  // Sizes\n  sm: {\n    ...shorthands.padding(\"0.375rem\", tokens.spacingElement2),\n  },\n  base: {\n    ...shorthands.padding(tokens.spacingElement2, tokens.spacingElement3),\n  },\n  lg: {\n    ...shorthands.padding(tokens.spacingElement3, tokens.spacingGroup2),\n  },\n  // Variants\n  defaultVariant: {\n    color: tokens.grayA12,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.grayA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.grayA3,\n    },\n  },\n  highlightVariant: {\n    color: tokens.accentA12,\n    \":hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.accentA3,\n    },\n  },\n  destructiveVariant: {\n    color: tokens.errorA11,\n    \":hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='active']\": {\n      backgroundColor: tokens.errorA3,\n    },\n  },\n  content: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    outlineStyle: \"none\",\n  },\n})\n\nexport type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  size?: TabsSize\n  variant?: TabsRootVariant\n}\n\nexport const Tabs = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Root>,\n  TabsProps\n>(function Tabs(\n  { className, size = \"base\", variant = \"default\", ...props },\n  ref\n) {\n  const styles = useStyles()\n  const contextValue = React.useMemo(() => ({ size, variant }), [size, variant])\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <TabsPrimitive.Root\n        ref={ref}\n        data-slot=\"tabs\"\n        {...{ [SLOT_ATTR]: \"tabs\" }}\n        data-size={size}\n        data-variant={variant}\n        className={mergeClasses(styles.root, className)}\n        {...props}\n      />\n    </TabsContext.Provider>\n  )\n})\n\nexport type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      data-slot=\"tabs-list\"\n      {...{ [SLOT_ATTR]: \"tabs-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type TabsTriggerProps = React.ComponentProps<\n  typeof TabsPrimitive.Trigger\n> & {\n  variant?: TabsTriggerVariant\n}\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(function TabsTrigger({ className, variant = \"default\", ...props }, ref) {\n  const styles = useStyles()\n  const { size, variant: rootVariant } = React.useContext(TabsContext)\n\n  const resolvedVariantClass =\n    variant === \"destructive\"\n      ? styles.destructiveVariant\n      : rootVariant === \"highlight\"\n        ? styles.highlightVariant\n        : styles.defaultVariant\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      {...{ [SLOT_ATTR]: \"tabs-trigger\" }}\n      className={mergeClasses(\n        styles.trigger,\n        styles[size],\n        resolvedVariantClass,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nexport type TabsContentProps = React.ComponentProps<\n  typeof TabsPrimitive.Content\n>\n\nexport const TabsContent = React.forwardRef<\n  React.ComponentRef<typeof TabsPrimitive.Content>,\n  TabsContentProps\n>(function TabsContent({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      data-slot=\"tabs-content\"\n      {...{ [SLOT_ATTR]: \"tabs-content\" }}\n      className={mergeClasses(styles.content, className)}\n      {...props}\n    />\n  )\n})\n"],"names":["TabsContext","React","useStyles","makeVoltStyles","shorthands","tokens.spacingElement2","tokens.grayA12","tokens.radiusLg","tokens.spacingElement1","tokens.textSm","tokens.leadingSm","tokens.spacingElement3","tokens.spacingGroup2","tokens.grayA4","tokens.grayA8","tokens.grayA3","tokens.accentA12","tokens.accentA4","tokens.accentA8","tokens.accentA3","tokens.errorA11","tokens.errorA4","tokens.errorA8","tokens.errorA3","Tabs","className","size","variant","props","ref","styles","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","rootVariant","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":";;;;;;;;AAiBA,MAAMA,IAAcC,EAAM,cAAgC;AAAA,EACxD,MAAM;AAAA,EACN,SAAS;AACX,CAAC,GAEKC,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,kCAAkC;AAAA,MAChC,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,GAAGD,EAAW,IAAIC,CAAsB;AAAA,IAAA;AAAA,EAC1C;AAAA,EAEF,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGF,EAAW,IAAIC,CAAsB;AAAA,IACxC,GAAGD,EAAW,aAAaG,CAAe;AAAA,IAC1C,GAAGH,EAAW,aAAaC,CAAsB;AAAA,IACjD,kCAAkC;AAAA,MAChC,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,GAAGD,EAAW,IAAII,CAAsB;AAAA,MACxC,GAAGJ,EAAW,aAAa,CAAC;AAAA,IAAA;AAAA,EAC9B;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAGA,EAAW,IAAIC,CAAsB;AAAA,IACxC,iBAAiB;AAAA,IACjB,GAAGD,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,GAAGA,EAAW,aAAaG,CAAe;AAAA,IAC1C,QAAQ;AAAA,IACR,UAAUE;AAAAA,IACV,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,IAEhB,kCAAkC;AAAA,MAChC,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,GAAGN,EAAW,QAAQ,YAAYC,CAAsB;AAAA,EAAA;AAAA,EAE1D,MAAM;AAAA,IACJ,GAAGD,EAAW,QAAQC,GAAwBM,CAAsB;AAAA,EAAA;AAAA,EAEtE,IAAI;AAAA,IACF,GAAGP,EAAW,QAAQO,GAAwBC,CAAoB;AAAA,EAAA;AAAA;AAAA,EAGpE,gBAAgB;AAAA,IACd,OAAON;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBO;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,0BAA0B;AAAA,MACxB,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,kBAAkB;AAAA,IAChB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,0BAA0B;AAAA,MACxB,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,oBAAoB;AAAA,IAClB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,0BAA0B;AAAA,MACxB,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,cAAc;AAAA,EAAA;AAElB,CAAC,GAOYC,IAAOvB,EAAM,WAGxB,SACA,EAAE,WAAAwB,GAAW,MAAAC,IAAO,QAAQ,SAAAC,IAAU,WAAW,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS5B,EAAA,GACT6B,IAAe9B,EAAM,QAAQ,OAAO,EAAE,MAAAyB,GAAM,SAAAC,EAAA,IAAY,CAACD,GAAMC,CAAO,CAAC;AAE7E,SACE,gBAAAK,EAAChC,EAAY,UAAZ,EAAqB,OAAO+B,GAC3B,UAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,aAAU;AAAA,MACJ,CAACK,CAAS,GAAG;AAAA,MACnB,aAAWR;AAAA,MACX,gBAAcC;AAAA,MACd,WAAWQ,EAAaL,EAAO,MAAML,CAAS;AAAA,MAC7C,GAAGG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC,GAIYQ,IAAWnC,EAAM,WAG5B,SAAkB,EAAE,WAAAwB,GAAW,GAAGG,EAAA,GAASC,GAAK;AAChD,QAAMC,IAAS5B,EAAA;AAEf,SACE,gBAAA8B;AAAA,IAACK;AAAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,aAAU;AAAA,MACJ,CAACK,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaL,EAAO,MAAML,CAAS;AAAA,MAC7C,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAQYU,IAAcrC,EAAM,WAG/B,SAAqB,EAAE,WAAAwB,GAAW,SAAAE,IAAU,WAAW,GAAGC,EAAA,GAASC,GAAK;AACxE,QAAMC,IAAS5B,EAAA,GACT,EAAE,MAAAwB,GAAM,SAASa,MAAgBtC,EAAM,WAAWD,CAAW,GAE7DwC,IACJb,MAAY,gBACRG,EAAO,qBACPS,MAAgB,cACdT,EAAO,mBACPA,EAAO;AAEf,SACE,gBAAAE;AAAA,IAACS;AAAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,aAAU;AAAA,MACJ,CAACK,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAAA,QACTL,EAAO;AAAA,QACPA,EAAOJ,CAAI;AAAA,QACXc;AAAA,QACAf;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAMYc,IAAczC,EAAM,WAG/B,SAAqB,EAAE,WAAAwB,GAAW,GAAGG,EAAA,GAASC,GAAK;AACnD,QAAMC,IAAS5B,EAAA;AAEf,SACE,gBAAA8B;AAAA,IAACW;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,aAAU;AAAA,MACJ,CAACK,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaL,EAAO,SAASL,CAAS;AAAA,MAChD,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}