@epilot/zenith-react 0.1.0-next.0

package/dist/components/table/table.js

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

package/dist/components/tabs/tabs.js

@@ -0,0 +1,179 @@
+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 "../../vendor/.bun/@radix-ui_react-tabs@1.1.13_2b23df507bdda662/vendor/@radix-ui/react-tabs/dist/index.js";
+import { mergeClasses as c, SLOT_ATTR as d, shorthands as t } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as k } from "../../styles/make-styles.js";
+import { errorA3 as R, errorA8 as S, errorA4 as V, errorA11 as w, accentA3 as L, accentA8 as j, accentA4 as D, accentA12 as I, grayA3 as N, grayA8 as z, grayA4 as B, grayA12 as m, leadingSm as E, textSm as G, spacingElement3 as p, spacingGroup2 as O, spacingElement2 as i, radiusLg as h, spacingElement1 as P } from "../../tokens/index.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: m,
+    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(P),
+      ...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,
+    lineHeight: E,
+    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, p)
+  },
+  lg: {
+    ...t.padding(p, O)
+  },
+  // Variants
+  defaultVariant: {
+    color: m,
+    ":hover": {
+      backgroundColor: B
+    },
+    ":focus-visible": {
+      outlineColor: z
+    },
+    "&[data-state='active']": {
+      backgroundColor: N
+    }
+  },
+  highlightVariant: {
+    color: I,
+    ":hover": {
+      backgroundColor: D
+    },
+    ":focus-visible": {
+      outlineColor: j
+    },
+    "&[data-state='active']": {
+      backgroundColor: L
+    }
+  },
+  destructiveVariant: {
+    color: w,
+    ":hover": {
+      backgroundColor: V
+    },
+    ":focus-visible": {
+      outlineColor: S
+    },
+    "&[data-state='active']": {
+      backgroundColor: R
+    }
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    outlineStyle: "none"
+  }
+}), _ = 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,
+    {
+      ref: n,
+      "data-slot": "tabs",
+      [d]: "tabs",
+      "data-size": e,
+      "data-variant": a,
+      className: c(f.root, o),
+      ...r
+    }
+  ) });
+}), q = s.forwardRef(function({ className: o, ...e }, a) {
+  const r = g();
+  return /* @__PURE__ */ l(
+    T,
+    {
+      ref: a,
+      "data-slot": "tabs-list",
+      [d]: "tabs-list",
+      className: c(r.list, o),
+      ...e
+    }
+  );
+}), J = 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,
+    {
+      ref: r,
+      "data-slot": "tabs-trigger",
+      [d]: "tabs-trigger",
+      className: c(
+        n.trigger,
+        n[f],
+        C,
+        o
+      ),
+      ...a
+    }
+  );
+}), K = s.forwardRef(function({ className: o, ...e }, a) {
+  const r = g();
+  return /* @__PURE__ */ l(
+    y,
+    {
+      ref: a,
+      "data-slot": "tabs-content",
+      [d]: "tabs-content",
+      className: c(r.content, o),
+      ...e
+    }
+  );
+});
+export {
+  _ as Tabs,
+  K as TabsContent,
+  q as TabsList,
+  J 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 \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } 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 = makeZenithStyles({\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","makeZenithStyles","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,EAAiB;AAAA,EACjC,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;AAAA,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;"}

package/dist/components/text/text.js

@@ -0,0 +1,89 @@
+import { jsx as S } from "react/jsx-runtime";
+import * as p from "react";
+import { mergeClasses as d, SLOT_ATTR as x } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as m } from "../../styles/make-styles.js";
+import { grayA11 as o, trackingNormal as e, leadingXs as g, textXs as a, leadingSm as i, textSm as n, fontWeightBold as t, leadingBase as y, textBase as z, trackingTight as l, leadingLg as H, textLg as k, leadingXl as b, textXl as T, leading2xl as W, text2xl as X, trackingTighter as u, leading3xl as B, text3xl as L } from "../../tokens/index.js";
+const R = m({
+  // Title variants
+  title3: {
+    fontSize: L,
+    lineHeight: B,
+    letterSpacing: u,
+    fontWeight: t
+  },
+  title2: {
+    fontSize: X,
+    lineHeight: W,
+    letterSpacing: l,
+    fontWeight: t
+  },
+  title1: {
+    fontSize: T,
+    lineHeight: b,
+    letterSpacing: l,
+    fontWeight: t
+  },
+  // Heading variants
+  heading3: {
+    fontSize: k,
+    lineHeight: H,
+    letterSpacing: l,
+    fontWeight: t
+  },
+  heading2: {
+    fontSize: z,
+    lineHeight: y,
+    letterSpacing: e,
+    fontWeight: t
+  },
+  heading1: {
+    fontSize: n,
+    lineHeight: i,
+    letterSpacing: e,
+    fontWeight: t
+  },
+  // Body variants
+  body2: {
+    fontSize: n,
+    lineHeight: i,
+    letterSpacing: e,
+    display: "inline-block"
+  },
+  body1: {
+    fontSize: a,
+    lineHeight: g,
+    letterSpacing: e,
+    display: "inline-block"
+  },
+  // Helper variants
+  helper2: {
+    fontSize: n,
+    lineHeight: i,
+    letterSpacing: e,
+    display: "inline-block",
+    color: o
+  },
+  helper1: {
+    fontSize: a,
+    lineHeight: g,
+    letterSpacing: e,
+    display: "inline-block",
+    color: o
+  }
+}), O = p.forwardRef(function({ variant: r = "body2", className: c, ...f }, h) {
+  const s = R();
+  return /* @__PURE__ */ S(
+    "span",
+    {
+      ref: h,
+      "data-slot": "text",
+      [x]: "text",
+      className: d(s[r], c),
+      ...f
+    }
+  );
+});
+export {
+  O 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 \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } 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 = makeZenithStyles({\n  // Title variants\n  title3: {\n    fontSize: tokens.text3xl,\n    lineHeight: tokens.leading3xl,\n    letterSpacing: tokens.trackingTighter,\n    fontWeight: tokens.fontWeightBold,\n  },\n  title2: {\n    fontSize: tokens.text2xl,\n    lineHeight: tokens.leading2xl,\n    letterSpacing: tokens.trackingTight,\n    fontWeight: tokens.fontWeightBold,\n  },\n  title1: {\n    fontSize: tokens.textXl,\n    lineHeight: tokens.leadingXl,\n    letterSpacing: tokens.trackingTight,\n    fontWeight: tokens.fontWeightBold,\n  },\n  // Heading variants\n  heading3: {\n    fontSize: tokens.textLg,\n    lineHeight: tokens.leadingLg,\n    letterSpacing: tokens.trackingTight,\n    fontWeight: tokens.fontWeightBold,\n  },\n  heading2: {\n    fontSize: tokens.textBase,\n    lineHeight: tokens.leadingBase,\n    letterSpacing: tokens.trackingNormal,\n    fontWeight: tokens.fontWeightBold,\n  },\n  heading1: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    letterSpacing: tokens.trackingNormal,\n    fontWeight: tokens.fontWeightBold,\n  },\n  // Body variants\n  body2: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n  },\n  body1: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n  },\n  // Helper variants\n  helper2: {\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n    color: tokens.grayA11,\n  },\n  helper1: {\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    letterSpacing: tokens.trackingNormal,\n    display: \"inline-block\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type TextProps = React.ComponentProps<\"span\"> & {\n  /**\n   * The role and size of the text, as one value.\n   *\n   * **The number runs opposite to HTML heading convention: 3 is the largest of\n   * its group and 1 the smallest.** `title3` is `text3xl` and `title1` is\n   * `textXl`; `heading3` is `textLg` and `heading1` is `textSm`. Reading\n   * `title1` as \"the primary title\" gives you the smallest one.\n   *\n   * The prefix carries the role rather than the size alone: `body1` and\n   * `helper1` are both `textXs` and differ in weight and colour.\n   *\n   * @default \"body1\"\n   */\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","makeZenithStyles","tokens.text3xl","tokens.leading3xl","tokens.trackingTighter","tokens.fontWeightBold","tokens.text2xl","tokens.leading2xl","tokens.trackingTight","tokens.textXl","tokens.leadingXl","tokens.textLg","tokens.leadingLg","tokens.textBase","tokens.leadingBase","tokens.trackingNormal","tokens.textSm","tokens.leadingSm","tokens.textXs","tokens.leadingXs","tokens.grayA11","Text","React","variant","className","props","ref","styles","jsx","SLOT_ATTR","mergeClasses"],"mappings":";;;;;AAqCA,MAAMA,IAAYC,EAAiB;AAAA;AAAA,EAEjC,QAAQ;AAAA,IACN,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,YAAYC;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,YAAYH;AAAAA,EAAO;AAAA,EAErB,QAAQ;AAAA,IACN,UAAUI;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,YAAYH;AAAAA,EAAO;AAAA;AAAA,EAGrB,UAAU;AAAA,IACR,UAAUM;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeJ;AAAAA,IACf,YAAYH;AAAAA,EAAO;AAAA,EAErB,UAAU;AAAA,IACR,UAAUQ;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeC;AAAAA,IACf,YAAYV;AAAAA,EAAO;AAAA,EAErB,UAAU;AAAA,IACR,UAAUW;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,YAAYV;AAAAA,EAAO;AAAA;AAAA,EAGrB,OAAO;AAAA,IACL,UAAUW;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,UAAUG;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeJ;AAAAA,IACf,SAAS;AAAA,EAAA;AAAA;AAAA,EAGX,SAAS;AAAA,IACP,UAAUC;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeF;AAAAA,IACf,SAAS;AAAA,IACT,OAAOK;AAAAA,EAAO;AAAA,EAEhB,SAAS;AAAA,IACP,UAAUF;AAAAA,IACV,YAAYC;AAAAA,IACZ,eAAeJ;AAAAA,IACf,SAAS;AAAA,IACT,OAAOK;AAAAA,EAAO;AAElB,CAAC,GAmBYC,IAAOC,EAAM,WAAuC,SAC/D,EAAE,SAAAC,IAAU,SAAS,WAAAC,GAAW,GAAGC,EAAA,GACnCC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE,gBAAA4B;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;"}