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

package/dist/components/table/table.js

@@ -0,0 +1,262 @@
+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({
+  wrapper: {
+    position: "relative",
+    width: "100%",
+    ...b.overflow("auto")
+  },
+  root: {
+    width: "100%",
+    fontSize: R
+  },
+  header: {
+    "& tr": {
+      ...b.borderBottom("1px", "solid", C)
+    }
+  },
+  body: {
+    "& tr:last-child": {
+      ...b.borderWidth(0)
+    }
+  },
+  footer: {
+    ...b.borderTop("1px", "solid", C),
+    backgroundColor: D,
+    fontWeight: B,
+    "& > tr:last-child": {
+      borderBottomWidth: 0
+    }
+  },
+  row: {
+    ...b.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
+    }
+  },
+  rowHover: {
+    ":hover": {
+      backgroundColor: k
+    }
+  },
+  head: {
+    // px-3
+    paddingLeft: p,
+    paddingRight: p,
+    verticalAlign: "middle",
+    fontWeight: B,
+    color: v,
+    "&:has([role='checkbox'])": {
+      paddingRight: 0
+    },
+    "& > [role='checkbox']": {
+      // v1 `translate-y-[2px]`.
+      translate: "0 2px"
+    }
+  },
+  // h-8 / h-9 / h-10
+  headCompact: {
+    height: W
+  },
+  headNormal: {
+    height: "2.25rem"
+  },
+  headComfortable: {
+    height: "2.5rem"
+  },
+  alignLeft: {
+    textAlign: "left"
+  },
+  alignCenter: {
+    textAlign: "center"
+  },
+  alignRight: {
+    textAlign: "right"
+  },
+  cell: {
+    // px-3
+    paddingLeft: p,
+    paddingRight: p,
+    verticalAlign: "middle",
+    fontWeight: L,
+    color: v,
+    "&:has([role='checkbox'])": {
+      paddingRight: 0
+    },
+    "& > [role='checkbox']": {
+      // v1 `translate-y-[2px]`.
+      translate: "0 2px"
+    }
+  },
+  // py-1.5 / py-2 / py-3
+  cellCompact: {
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem"
+  },
+  cellNormal: {
+    paddingTop: N,
+    paddingBottom: N
+  },
+  cellComfortable: {
+    paddingTop: p,
+    paddingBottom: p
+  },
+  cellNumeric: {
+    fontVariantNumeric: "tabular-nums"
+  },
+  caption: {
+    fontSize: R,
+    color: S
+  },
+  captionTop: {
+    captionSide: "top",
+    // mb-4
+    marginBottom: w
+  },
+  captionBottom: {
+    captionSide: "bottom",
+    // mt-4
+    marginTop: w
+  }
+}), V = n.forwardRef(
+  function({ className: e, 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",
+      {
+        ref: r,
+        "data-slot": "table",
+        [c]: "table",
+        className: s(l.root, e),
+        ...a
+      }
+    ) }) });
+  }
+), j = n.forwardRef(function({ className: e, ...t }, a) {
+  const r = d();
+  return /* @__PURE__ */ i(
+    "thead",
+    {
+      ref: a,
+      "data-slot": "table-header",
+      [c]: "table-header",
+      className: s(r.header, e),
+      ...t
+    }
+  );
+}), M = n.forwardRef(function({ className: e, ...t }, a) {
+  const r = d();
+  return /* @__PURE__ */ i(
+    "tbody",
+    {
+      ref: a,
+      "data-slot": "table-body",
+      [c]: "table-body",
+      className: s(r.body, e),
+      ...t
+    }
+  );
+}), O = n.forwardRef(function({ className: e, ...t }, a) {
+  const r = d();
+  return /* @__PURE__ */ i(
+    "tfoot",
+    {
+      ref: a,
+      "data-slot": "table-footer",
+      [c]: "table-footer",
+      className: s(r.footer, e),
+      ...t
+    }
+  );
+}), _ = n.forwardRef(
+  function({ className: e, noHover: t, ...a }, r) {
+    const l = d();
+    return /* @__PURE__ */ i(
+      "tr",
+      {
+        ref: r,
+        "data-slot": "table-row",
+        [c]: "table-row",
+        className: s(
+          l.row,
+          !t && l.rowHover,
+          e
+        ),
+        ...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;
+    return /* @__PURE__ */ i(
+      "th",
+      {
+        ref: h,
+        "data-slot": "table-head",
+        [c]: "table-head",
+        scope: r,
+        className: s(o.head, y, T, e),
+        ...g,
+        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;
+    return /* @__PURE__ */ i(
+      "td",
+      {
+        ref: h,
+        "data-slot": "table-cell",
+        [c]: "table-cell",
+        className: s(
+          o.cell,
+          y,
+          T,
+          a && o.cellNumeric,
+          e
+        ),
+        ...g,
+        children: l
+      }
+    );
+  }
+), J = n.forwardRef(function({ className: e, position: t = "bottom", ...a }, r) {
+  const l = d();
+  return /* @__PURE__ */ i(
+    "caption",
+    {
+      ref: r,
+      "data-slot": "table-caption",
+      [c]: "table-caption",
+      className: s(
+        l.caption,
+        t === "top" ? l.captionTop : l.captionBottom,
+        e
+      ),
+      ...a
+    }
+  );
+});
+export {
+  V as Table,
+  M as TableBody,
+  J as TableCaption,
+  I as TableCell,
+  x as TableDensityContext,
+  O as TableFooter,
+  q as TableHead,
+  j as TableHeader,
+  _ as TableRow
+};
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +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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"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export type TabsSize = "sm" | "base" | "lg";
+export type TabsRootVariant = "default" | "highlight";
+export type TabsTriggerVariant = "default" | "destructive";
+export type TabsProps = React.ComponentProps<typeof TabsPrimitive.Root> & {
+    size?: TabsSize;
+    variant?: TabsRootVariant;
+};
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+    variant?: TabsTriggerVariant;
+};
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Content>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,180 @@
+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 { 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";
+const x = s.createContext({
+  size: "base",
+  variant: "default"
+}), g = k({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    ...t.gap(i),
+    "&[data-orientation='vertical']": {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      ...t.gap(i)
+    }
+  },
+  list: {
+    backgroundColor: "transparent",
+    color: p,
+    height: "auto",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...t.gap(i),
+    ...t.borderRadius(h),
+    ...t.paddingBlock(i),
+    "&[data-orientation='vertical']": {
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "flex-start",
+      ...t.gap(O),
+      ...t.paddingBlock(0)
+    }
+  },
+  trigger: {
+    display: "inline-flex",
+    alignItems: "center",
+    ...t.gap(i),
+    backgroundColor: "transparent",
+    ...t.borderStyle("none"),
+    ...t.borderWidth(0),
+    ...t.borderRadius(h),
+    cursor: "pointer",
+    fontSize: G,
+    transitionProperty: "all",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineOffset: "2px",
+      outlineStyle: "solid"
+    },
+    "&[data-orientation='vertical']": {
+      justifyContent: "flex-start",
+      textAlign: "left",
+      width: "100%"
+    }
+  },
+  // Sizes
+  sm: {
+    ...t.padding("0.375rem", i)
+  },
+  base: {
+    ...t.padding(i, m)
+  },
+  lg: {
+    ...t.padding(m, R)
+  },
+  // Variants
+  defaultVariant: {
+    color: p,
+    ":hover": {
+      backgroundColor: E
+    },
+    ":focus-visible": {
+      outlineColor: B
+    },
+    "&[data-state='active']": {
+      backgroundColor: z
+    }
+  },
+  highlightVariant: {
+    color: N,
+    ":hover": {
+      backgroundColor: I
+    },
+    ":focus-visible": {
+      outlineColor: D
+    },
+    "&[data-state='active']": {
+      backgroundColor: j
+    }
+  },
+  destructiveVariant: {
+    color: L,
+    ":hover": {
+      backgroundColor: w
+    },
+    ":focus-visible": {
+      outlineColor: S
+    },
+    "&[data-state='active']": {
+      backgroundColor: V
+    }
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1,
+    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]);
+  return /* @__PURE__ */ l(x.Provider, { value: b, children: /* @__PURE__ */ l(
+    v,
+    {
+      ref: n,
+      "data-slot": "tabs",
+      [c]: "tabs",
+      "data-size": e,
+      "data-variant": o,
+      className: d(f.root, a),
+      ...r
+    }
+  ) });
+}), K = s.forwardRef(function({ className: a, ...e }, o) {
+  const r = g();
+  return /* @__PURE__ */ l(
+    T,
+    {
+      ref: o,
+      "data-slot": "tabs-list",
+      [c]: "tabs-list",
+      className: d(r.list, a),
+      ...e
+    }
+  );
+}), Q = s.forwardRef(function({ className: a, variant: e = "default", ...o }, 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,
+    {
+      ref: r,
+      "data-slot": "tabs-trigger",
+      [c]: "tabs-trigger",
+      className: d(
+        n.trigger,
+        n[f],
+        C,
+        a
+      ),
+      ...o
+    }
+  );
+}), U = s.forwardRef(function({ className: a, ...e }, o) {
+  const r = g();
+  return /* @__PURE__ */ l(
+    y,
+    {
+      ref: o,
+      "data-slot": "tabs-content",
+      [c]: "tabs-content",
+      className: d(r.content, a),
+      ...e
+    }
+  );
+});
+export {
+  J as Tabs,
+  U as TabsContent,
+  K as TabsList,
+  Q as TabsTrigger
+};
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +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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"}

package/dist/components/text/text.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+/**
+ * Text — the v1 text scale ported to Griffel atoms.
+ *
+ * v1 expressed the ten variants as cva classes (`text-3xl tracking-tighter font-bold` etc.), one
+ * per variant. Here each variant is a small set of atoms that read design tokens instead of
+ * literal values; the variant itself is the whole style, so there is exactly one slot per variant
+ * and the caller's `className` is merged on top.
+ *
+ * Unlike Badge there is no `color` prop, so no palette install and no inline custom properties:
+ * the only colour used (the helper variants) is `gray-a11`, a core token that ships in the core
+ * sheet.
+ *
+ * Body and helper variants keep v1's `display: inline-block` — it lets inline text size to its
+ * content inside flex/grid parents instead of collapsing to zero width. Titles and headings
+ * inherit their display, exactly as v1.
+ */
+export type TextVariant = "title3" | "title2" | "title1" | "heading3" | "heading2" | "heading1" | "body2" | "body1" | "helper2" | "helper1";
+export type TextProps = React.ComponentProps<"span"> & {
+    variant?: TextVariant;
+};
+export declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/text/text.js

@@ -0,0 +1,80 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as S from "react";
+import { SLOT_ATTR as s } from "../../renderer/contract.js";
+import { makeVoltStyles as m } from "../../styles/make-styles.js";
+import { grayA11 as n, trackingNormal as t, textXs as l, textSm as i, fontWeightBold as e, textBase as x, trackingTight as o, textLg as h, textXl as d, text2xl as y, trackingTighter as z, text3xl as k } from "../../tokens/index.js";
+import { mergeClasses as b } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const T = m({
+  // Title variants
+  title3: {
+    fontSize: k,
+    letterSpacing: z,
+    fontWeight: e
+  },
+  title2: {
+    fontSize: y,
+    letterSpacing: o,
+    fontWeight: e
+  },
+  title1: {
+    fontSize: d,
+    letterSpacing: o,
+    fontWeight: e
+  },
+  // Heading variants
+  heading3: {
+    fontSize: h,
+    letterSpacing: o,
+    fontWeight: e
+  },
+  heading2: {
+    fontSize: x,
+    letterSpacing: t,
+    fontWeight: e
+  },
+  heading1: {
+    fontSize: i,
+    letterSpacing: t,
+    fontWeight: e
+  },
+  // Body variants
+  body2: {
+    fontSize: i,
+    letterSpacing: t,
+    display: "inline-block"
+  },
+  body1: {
+    fontSize: l,
+    letterSpacing: t,
+    display: "inline-block"
+  },
+  // Helper variants
+  helper2: {
+    fontSize: i,
+    letterSpacing: t,
+    display: "inline-block",
+    color: n
+  },
+  helper1: {
+    fontSize: l,
+    letterSpacing: t,
+    display: "inline-block",
+    color: n
+  }
+}), N = S.forwardRef(function({ variant: r = "body2", className: a, ...g }, f) {
+  const c = T();
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      ref: f,
+      "data-slot": "text",
+      [s]: "text",
+      className: b(c[r], a),
+      ...g
+    }
+  );
+});
+export {
+  N as Text
+};
+//# sourceMappingURL=text.js.map

package/dist/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../../src/components/text/text.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n/**\n * Text — the v1 text scale ported to Griffel atoms.\n *\n * v1 expressed the ten variants as cva classes (`text-3xl tracking-tighter font-bold` etc.), one\n * per variant. Here each variant is a small set of atoms that read design tokens instead of\n * literal values; the variant itself is the whole style, so there is exactly one slot per variant\n * and the caller's `className` is merged on top.\n *\n * Unlike Badge there is no `color` prop, so no palette install and no inline custom properties:\n * the only colour used (the helper variants) is `gray-a11`, a core token that ships in the core\n * sheet.\n *\n * Body and helper variants keep v1's `display: inline-block` — it lets inline text size to its\n * content inside flex/grid parents instead of collapsing to zero width. Titles and headings\n * inherit their display, exactly as v1.\n */\n\nexport type TextVariant =\n  | \"title3\"\n  | \"title2\"\n  | \"title1\"\n  | \"heading3\"\n  | \"heading2\"\n  | \"heading1\"\n  | \"body2\"\n  | \"body1\"\n  | \"helper2\"\n  | \"helper1\"\n\nconst useStyles = makeVoltStyles({\n  // Title variants\n  title3: {\n    fontSize: tokens.text3xl,\n    letterSpacing: tokens.trackingTighter,\n    fontWeight: tokens.fontWeightBold,\n  },\n  title2: {\n    fontSize: tokens.text2xl,\n    letterSpacing: tokens.trackingTight,\n    fontWeight: tokens.fontWeightBold,\n  },\n  title1: {\n    fontSize: tokens.textXl,\n    letterSpacing: tokens.trackingTight,\n    fontWeight: tokens.fontWeightBold,\n  },\n  // Heading variants\n  heading3: {\n    fontSize: tokens.textLg,\n    letterSpacing: tokens.trackingTight,\n    fontWeight: tokens.fontWeightBold,\n  },\n  heading2: {\n    fontSize: tokens.textBase,\n    letterSpacing: tokens.trackingNormal,\n    fontWeight: tokens.fontWeightBold,\n  },\n  heading1: {\n    fontSize: tokens.textSm,\n    letterSpacing: tokens.trackingNormal,\n    fontWeight: tokens.fontWeightBold,\n  },\n  // Body variants\n  body2: {\n    fontSize: tokens.textSm,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n  },\n  body1: {\n    fontSize: tokens.textXs,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n  },\n  // Helper variants\n  helper2: {\n    fontSize: tokens.textSm,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n    color: tokens.grayA11,\n  },\n  helper1: {\n    fontSize: tokens.textXs,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type TextProps = React.ComponentProps<\"span\"> & {\n  variant?: TextVariant\n}\n\nexport const Text = React.forwardRef<HTMLSpanElement, TextProps>(function Text(\n  { variant = \"body2\", className, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"text\"\n      {...{ [SLOT_ATTR]: \"text\" }}\n      className={mergeClasses(styles[variant], className)}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.text3xl","tokens.trackingTighter","tokens.fontWeightBold","tokens.text2xl","tokens.trackingTight","tokens.textXl","tokens.textLg","tokens.textBase","tokens.trackingNormal","tokens.textSm","tokens.textXs","tokens.grayA11","Text","React","variant","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AAqCA,MAAMA,IAAYC,EAAe;AAAA;AAAA,EAE/B,QAAQ;AAAA,IACN,UAAUC;AAAAA,IACV,eAAeC;AAAAA,IACf,YAAYC;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,UAAUC;AAAAA,IACV,eAAeC;AAAAA,IACf,YAAYF;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,UAAUG;AAAAA,IACV,eAAeD;AAAAA,IACf,YAAYF;AAAAA,EAAO;AAAA;AAAA,EAGrB,UAAU;AAAA,IACR,UAAUI;AAAAA,IACV,eAAeF;AAAAA,IACf,YAAYF;AAAAA,EAAO;AAAA,EAErB,UAAU;AAAA,IACR,UAAUK;AAAAA,IACV,eAAeC;AAAAA,IACf,YAAYN;AAAAA,EAAO;AAAA,EAErB,UAAU;AAAA,IACR,UAAUO;AAAAA,IACV,eAAeD;AAAAA,IACf,YAAYN;AAAAA,EAAO;AAAA;AAAA,EAGrB,OAAO;AAAA,IACL,UAAUO;AAAAA,IACV,eAAeD;AAAAA,IACf,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,UAAUE;AAAAA,IACV,eAAeF;AAAAA,IACf,SAAS;AAAA,EAAA;AAAA;AAAA,EAGX,SAAS;AAAA,IACP,UAAUC;AAAAA,IACV,eAAeD;AAAAA,IACf,SAAS;AAAA,IACT,OAAOG;AAAAA,EAAO;AAAA,EAEhB,SAAS;AAAA,IACP,UAAUD;AAAAA,IACV,eAAeF;AAAAA,IACf,SAAS;AAAA,IACT,OAAOG;AAAAA,EAAO;AAElB,CAAC,GAMYC,IAAOC,EAAM,WAAuC,SAC/D,EAAE,SAAAC,IAAU,SAAS,WAAAC,GAAW,GAAGC,EAAA,GACnCC,GACA;AACA,QAAMC,IAASpB,EAAA;AAEf,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAOJ,CAAO,GAAGC,CAAS;AAAA,MACjD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as Sonner from "sonner";
+export type ToasterProps = Sonner.ToasterProps & {
+    theme?: "light" | "dark";
+};
+export declare const Toaster: React.ForwardRefExoticComponent<Sonner.ToasterProps & {
+    theme?: "light" | "dark";
+} & React.RefAttributes<HTMLElement>>;
+export type ToastOptions = Parameters<typeof Sonner.toast>[1];
+export { toast } from "sonner";