@epilot/zenith-react 0.1.0-next.1 → 0.2.0-next.0

package/dist/components/table/table.js

@@ -2,9 +2,9 @@ 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 { spacingGroup2 as w, grayA11 as B, leadingSm as x, textSm as R, grayA12 as C, fontWeightNormal as H, tableCellPaddingY as N, spacingElement3 as h, fontWeightMedium as v, tableHeadHeight as S, accentA3 as k, graySoft 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({
+const j = i.createContext("normal"), s = A({
   wrapper: {
     position: "relative",
     width: "100%",
@@ -49,8 +49,8 @@ const P = i.createContext("normal"), s = A({
   },
   head: {
     // px-3
-    paddingLeft: m,
-    paddingRight: m,
+    paddingLeft: h,
+    paddingRight: h,
     // Density-bound: cascades from the nearest [data-density] ancestor — 32/36/40px for
     // compact/normal/comfortable. No JS density switch needed.
     height: S,
@@ -76,8 +76,8 @@ const P = i.createContext("normal"), s = A({
   },
   cell: {
     // px-3
-    paddingLeft: m,
-    paddingRight: m,
+    paddingLeft: h,
+    paddingRight: h,
     // Density-bound: cascades from the nearest [data-density] ancestor — 6/8/12px for
     // compact/normal/comfortable. No JS density switch needed.
     paddingTop: N,
@@ -111,7 +111,7 @@ const P = i.createContext("normal"), s = A({
     // mt-4
     marginTop: w
   }
-}), j = i.forwardRef(
+}), E = i.forwardRef(
   function({ className: a, density: t, children: e, ...o }, r) {
     const g = s();
     return /* @__PURE__ */ l("div", { className: g.wrapper, children: /* @__PURE__ */ l(
@@ -127,7 +127,7 @@ const P = i.createContext("normal"), s = A({
       }
     ) });
   }
-), E = i.forwardRef(function({ className: a, ...t }, e) {
+), G = i.forwardRef(function({ className: a, ...t }, e) {
   const o = s();
   return /* @__PURE__ */ l(
     "thead",
@@ -182,12 +182,12 @@ const P = i.createContext("normal"), s = A({
     );
   }
 ), Y = i.forwardRef(
-  function({ className: a, align: t = "left", density: e, scope: o = "col", children: r, ...g }, h) {
+  function({ className: a, align: t = "left", density: e, scope: o = "col", children: r, ...g }, m) {
     const n = s(), p = t === "center" ? n.alignCenter : t === "right" ? n.alignRight : n.alignLeft;
     return /* @__PURE__ */ l(
       "th",
       {
-        ref: h,
+        ref: m,
         "data-slot": "table-head",
         [d]: "table-head",
         scope: o,
@@ -199,12 +199,12 @@ const P = i.createContext("normal"), s = A({
     );
   }
 ), Z = i.forwardRef(
-  function({ className: a, align: t = "left", numeric: e, density: o, children: r, ...g }, h) {
+  function({ className: a, align: t = "left", numeric: e, density: o, children: r, ...g }, m) {
     const n = s(), p = t === "center" ? n.alignCenter : t === "right" ? n.alignRight : n.alignLeft;
     return /* @__PURE__ */ l(
       "td",
       {
-        ref: h,
+        ref: m,
         "data-slot": "table-cell",
         [d]: "table-cell",
         className: c(
@@ -237,14 +237,14 @@ const P = i.createContext("normal"), s = A({
   );
 });
 export {
-  j as Table,
+  E as Table,
   M as TableBody,
   _ as TableCaption,
   Z as TableCell,
-  P as TableDensityContext,
+  j as TableDensityContext,
   O as TableFooter,
   Y as TableHead,
-  E as TableHeader,
+  G as TableHeader,
   V as TableRow
 };
 //# sourceMappingURL=table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { mergeClasses, shorthands } from \"@epilot/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\nexport type TableDensity = \"compact\" | \"normal\" | \"comfortable\"\n\n/**\n * 2026-09-09).\n * @deprecated No longer a supported way to control Table/DataTable geometry (approved\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          {...(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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"}
+{"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\nexport type TableDensity = \"compact\" | \"normal\" | \"comfortable\"\n\n/**\n * 2026-09-09).\n * @deprecated No longer a supported way to control Table/DataTable geometry (approved\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.graySoft,\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          {...(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.graySoft","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

@@ -1,52 +1,52 @@
-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({
+import { jsx as C } from "react/jsx-runtime";
+import * as r from "react";
+import { Root as w, Content as z, List as G, Trigger as O } from "../../vendor/.bun/@radix-ui_react-tabs@1.1.13_2b23df507bdda662/vendor/@radix-ui/react-tabs/dist/index.js";
+import { mergeClasses as x, SLOT_ATTR as T, shorthands as e } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as W } from "../../styles/make-styles.js";
+import { errorA3 as B, errorA8 as F, errorA4 as H, errorA11 as K, accentA3 as U, accentA8 as Z, accentA4 as _, accentA12 as q, grayA3 as D, grayA8 as J, grayA4 as Q, grayA12 as E, leadingSm as X, textSm as Y, spacingElement3 as I, spacingGroup2 as $, spacingElement2 as g, radiusLg as N, spacingElement1 as M } from "../../tokens/index.js";
+const P = r.createContext({
   size: "base",
   variant: "default"
-}), g = k({
+}), k = W({
   root: {
     display: "flex",
     flexDirection: "column",
-    ...t.gap(i),
+    ...e.gap(g),
     "&[data-orientation='vertical']": {
       flexDirection: "row",
       alignItems: "flex-start",
-      ...t.gap(i)
+      ...e.gap(g)
     }
   },
   list: {
     backgroundColor: "transparent",
-    color: m,
+    color: E,
     height: "auto",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...t.gap(i),
-    ...t.borderRadius(h),
-    ...t.paddingBlock(i),
+    ...e.gap(g),
+    ...e.borderRadius(N),
+    ...e.paddingBlock(g),
     "&[data-orientation='vertical']": {
       flexDirection: "column",
       alignItems: "stretch",
       justifyContent: "flex-start",
-      ...t.gap(P),
-      ...t.paddingBlock(0)
+      ...e.gap(M),
+      ...e.paddingBlock(0)
     }
   },
   trigger: {
     display: "inline-flex",
     alignItems: "center",
-    ...t.gap(i),
+    ...e.gap(g),
     backgroundColor: "transparent",
-    ...t.borderStyle("none"),
-    ...t.borderWidth(0),
-    ...t.borderRadius(h),
+    ...e.borderStyle("none"),
+    ...e.borderWidth(0),
+    ...e.borderRadius(N),
     cursor: "pointer",
-    fontSize: G,
-    lineHeight: E,
+    fontSize: Y,
+    lineHeight: X,
     transitionProperty: "all",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -63,49 +63,49 @@ const x = s.createContext({
   },
   // Sizes
   sm: {
-    ...t.padding("0.375rem", i)
+    ...e.padding("0.375rem", g)
   },
   base: {
-    ...t.padding(i, p)
+    ...e.padding(g, I)
   },
   lg: {
-    ...t.padding(p, O)
+    ...e.padding(I, $)
   },
   // Variants
   defaultVariant: {
-    color: m,
+    color: E,
     ":hover": {
-      backgroundColor: B
+      backgroundColor: Q
     },
     ":focus-visible": {
-      outlineColor: z
+      outlineColor: J
     },
     "&[data-state='active']": {
-      backgroundColor: N
+      backgroundColor: D
     }
   },
   highlightVariant: {
-    color: I,
+    color: q,
     ":hover": {
-      backgroundColor: D
+      backgroundColor: _
     },
     ":focus-visible": {
-      outlineColor: j
+      outlineColor: Z
     },
     "&[data-state='active']": {
-      backgroundColor: L
+      backgroundColor: U
     }
   },
   destructiveVariant: {
-    color: w,
+    color: K,
     ":hover": {
-      backgroundColor: V
+      backgroundColor: H
     },
     ":focus-visible": {
-      outlineColor: S
+      outlineColor: F
     },
     "&[data-state='active']": {
-      backgroundColor: R
+      backgroundColor: B
     }
   },
   content: {
@@ -114,66 +114,121 @@ const x = s.createContext({
     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,
+}), nt = r.forwardRef(function({
+  className: l,
+  size: n = "base",
+  variant: a = "default",
+  value: o,
+  defaultValue: h,
+  onValueChange: b,
+  ...c
+}, R) {
+  const d = k(), [S, V] = r.useState(h), u = o !== void 0, f = (u ? o : S) ?? "", y = r.useRef({ value: f, isControlled: u, onValueChange: b });
+  y.current = { value: f, isControlled: u, onValueChange: b };
+  const s = r.useRef(null), v = r.useCallback((i) => {
+    const t = { value: i, reported: !1 };
+    s.current = t, setTimeout(() => {
+      s.current === t && (s.current = null);
+    }, 0);
+  }, []), p = r.useCallback((i) => {
+    var j;
+    const t = y.current, m = s.current;
+    if (m !== null && m.value === i) {
+      if (m.reported) return;
+      m.reported = !0;
+    }
+    i !== t.value && (t.isControlled || V(i), (j = t.onValueChange) == null || j.call(t, i));
+  }, []), L = r.useMemo(
+    () => ({ size: n, variant: a, select: p, beginPress: v }),
+    [n, a, p, v]
+  );
+  return /* @__PURE__ */ C(P.Provider, { value: L, children: /* @__PURE__ */ C(
+    w,
     {
-      ref: n,
+      ref: R,
       "data-slot": "tabs",
-      [d]: "tabs",
-      "data-size": e,
+      [T]: "tabs",
+      "data-size": n,
       "data-variant": a,
-      className: c(f.root, o),
-      ...r
+      className: x(d.root, l),
+      ...c,
+      value: f,
+      onValueChange: p
     }
   ) });
-}), q = s.forwardRef(function({ className: o, ...e }, a) {
-  const r = g();
-  return /* @__PURE__ */ l(
-    T,
+}), st = r.forwardRef(function({ className: l, ...n }, a) {
+  const o = k();
+  return /* @__PURE__ */ C(
+    G,
     {
       ref: a,
       "data-slot": "tabs-list",
-      [d]: "tabs-list",
-      className: c(r.list, o),
-      ...e
+      [T]: "tabs-list",
+      className: x(o.list, l),
+      ...n
     }
   );
-}), 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,
+}), it = r.forwardRef(function({
+  className: l,
+  variant: n = "default",
+  onClick: a,
+  onKeyDown: o,
+  onBlur: h,
+  onMouseDown: b,
+  ...c
+}, R) {
+  const d = k(), {
+    size: S,
+    variant: V,
+    select: u,
+    beginPress: f
+  } = r.useContext(P), y = (t) => {
+    b == null || b(t), !t.defaultPrevented && t.button === 0 && !t.ctrlKey && !c.disabled && (f == null || f(c.value));
+  }, s = r.useRef(!1), v = (t) => {
+    o == null || o(t), s.current = !t.defaultPrevented && (t.key === "Enter" || t.key === " ");
+  }, p = (t) => {
+    h == null || h(t), s.current = !1;
+  }, L = (t) => {
+    a == null || a(t);
+    const m = s.current;
+    s.current = !1, !(m || t.detail !== 0 || t.defaultPrevented || t.ctrlKey || c.disabled) && (u == null || u(c.value));
+  }, i = n === "destructive" ? d.destructiveVariant : V === "highlight" ? d.highlightVariant : d.defaultVariant;
+  return /* @__PURE__ */ C(
+    O,
     {
-      ref: r,
+      ref: R,
       "data-slot": "tabs-trigger",
-      [d]: "tabs-trigger",
-      className: c(
-        n.trigger,
-        n[f],
-        C,
-        o
+      [T]: "tabs-trigger",
+      className: x(
+        d.trigger,
+        d[S],
+        i,
+        l
       ),
-      ...a
+      ...c,
+      onClick: L,
+      onKeyDown: v,
+      onBlur: p,
+      onMouseDown: y
     }
   );
-}), K = s.forwardRef(function({ className: o, ...e }, a) {
-  const r = g();
-  return /* @__PURE__ */ l(
-    y,
+}), lt = r.forwardRef(function({ className: l, ...n }, a) {
+  const o = k();
+  return /* @__PURE__ */ C(
+    z,
     {
       ref: a,
       "data-slot": "tabs-content",
-      [d]: "tabs-content",
-      className: c(r.content, o),
-      ...e
+      [T]: "tabs-content",
+      className: x(o.content, l),
+      ...n
     }
   );
 });
 export {
-  _ as Tabs,
-  K as TabsContent,
-  q as TabsList,
-  J as TabsTrigger
+  nt as Tabs,
+  lt as TabsContent,
+  st as TabsList,
+  it 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 \"@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":"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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/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  /** Selects a tab. Absent when a trigger renders outside `Tabs`. */\n  select?: (value: string) => void\n  /** Marks the start of a pointer press on a trigger; see `beginPress` in `Tabs`. */\n  beginPress?: (value: string) => void\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  {\n    className,\n    size = \"base\",\n    variant = \"default\",\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n\n  // Zenith owns the value so a trigger can select on click, which Radix does not do (it selects on\n  // mousedown, Enter/Space and focus). Radix always receives it controlled; \"\" selects nothing,\n  // which is what an uncontrolled Root without a defaultValue shows.\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const isControlled = valueProp !== undefined\n  const value = (isControlled ? valueProp : uncontrolled) ?? \"\"\n  const latest = React.useRef({ value, isControlled, onValueChange })\n  latest.current = { value, isControlled, onValueChange }\n\n  // One pointer press on a trigger can reach `select` twice for the same tab: Radix selects on\n  // mousedown, then again on the focus that press causes if the tab is still unselected, which it\n  // is when a controlled owner declined (#17; unchanged through Radix Tabs 1.2.1). A press opens a\n  // window in which only the first report for its tab goes through. Mousedown and the focus it\n  // causes run in one task, so the window closes on the next one and a later focus is reported.\n  const press = React.useRef<{ value: string; reported: boolean } | null>(null)\n  const beginPress = React.useCallback((pressed: string) => {\n    const token = { value: pressed, reported: false }\n    press.current = token\n    setTimeout(() => {\n      if (press.current === token) press.current = null\n    }, 0)\n  }, [])\n\n  const select = React.useCallback((next: string) => {\n    const current = latest.current\n    const pressed = press.current\n    if (pressed !== null && pressed.value === next) {\n      if (pressed.reported) return\n      pressed.reported = true\n    }\n    if (next === current.value) return\n    if (!current.isControlled) setUncontrolled(next)\n    current.onValueChange?.(next)\n  }, [])\n\n  const contextValue = React.useMemo(\n    () => ({ size, variant, select, beginPress }),\n    [size, variant, select, beginPress]\n  )\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        value={value}\n        onValueChange={select}\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(\n  {\n    className,\n    variant = \"default\",\n    onClick,\n    onKeyDown,\n    onBlur,\n    onMouseDown,\n    ...props\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    size,\n    variant: rootVariant,\n    select,\n    beginPress,\n  } = React.useContext(TabsContext)\n\n  // Runs before Radix's own mousedown handler, under the same conditions Radix selects on.\n  const handleMouseDown: TabsTriggerProps[\"onMouseDown\"] = (event) => {\n    onMouseDown?.(event)\n    if (\n      !event.defaultPrevented &&\n      event.button === 0 &&\n      !event.ctrlKey &&\n      !props.disabled\n    ) {\n      beginPress?.(props.value)\n    }\n  }\n\n  // Radix has already selected on the key that synthesises this click; selecting again would\n  // report the change twice to an owner that declined it.\n  const keyActivated = React.useRef(false)\n\n  const handleKeyDown: TabsTriggerProps[\"onKeyDown\"] = (event) => {\n    onKeyDown?.(event)\n    // Only a key Radix acted on synthesises a click. A prevented one skips Radix and produces no\n    // click, so flagging it would leave nothing to clear the flag and swallow the next bare click.\n    keyActivated.current =\n      !event.defaultPrevented && (event.key === \"Enter\" || event.key === \" \")\n  }\n\n  const handleBlur: TabsTriggerProps[\"onBlur\"] = (event) => {\n    onBlur?.(event)\n    keyActivated.current = false\n  }\n\n  // A click with no mousedown before it — `element.click()`, assistive technology, automation —\n  // reaches none of Radix's handlers. `detail` is 0 for exactly those clicks; a pointer click\n  // carries its count and was already handled, or deliberately refused, on mousedown.\n  const handleClick: TabsTriggerProps[\"onClick\"] = (event) => {\n    onClick?.(event)\n    const fromKey = keyActivated.current\n    keyActivated.current = false\n    if (\n      fromKey ||\n      event.detail !== 0 ||\n      event.defaultPrevented ||\n      event.ctrlKey ||\n      props.disabled\n    ) {\n      return\n    }\n    select?.(props.value)\n  }\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      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onMouseDown={handleMouseDown}\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","valueProp","defaultValue","onValueChange","props","ref","styles","uncontrolled","setUncontrolled","isControlled","value","latest","press","beginPress","pressed","token","select","next","current","_a","contextValue","jsx","TabsPrimitive.Root","SLOT_ATTR","mergeClasses","TabsList","TabsPrimitive.List","TabsTrigger","onClick","onKeyDown","onBlur","onMouseDown","rootVariant","handleMouseDown","event","keyActivated","handleKeyDown","handleBlur","handleClick","fromKey","resolvedVariantClass","TabsPrimitive.Trigger","TabsContent","TabsPrimitive.Content"],"mappings":"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"}

package/dist/components/text/text.js

@@ -55,7 +55,16 @@ const R = m({
     letterSpacing: e,
     display: "inline-block"
   },
-  // Helper variants
+  // Helper variants.
+  //
+  // `grayA11` is the alpha ink, and it composites against whatever is painted behind it, which is
+  // what you want: it tracks the backdrop instead of holding one value. Measured against the solid
+  // `gray11` it is equal on the page (5.89 vs 5.90) and ahead on any tinted surface -- 5.51 vs 4.82
+  // on a gray-4 row, 5.53 vs 4.88 on accent-4 selected.
+  //
+  // This was briefly switched to the solid over a 1.07:1 reading, but the alpha was not the cause:
+  // AppearanceBoundary declared a mode and painted nothing, so BOTH inks landed on the wrong canvas
+  // (alpha 1.08, solid 2.09). That is fixed in the boundary, which now paints the mode it declares.
   helper2: {
     fontSize: n,
     lineHeight: i,

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

@@ -1 +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. v1 expressed the ten variants as cva classes\n * (`text-3xl tracking-tighter font-bold` etc.), one per variant.\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. **The number runs opposite to HTML heading\n   * convention: 3 is the largest of its group and 1 the smallest.** `title3` is `text3xl` and\n   * `title1` is `textXl`; `heading3` is `textLg` and `heading1` is `textSm`. Reading `title1` as\n   * \"the primary title\" gives you the smallest one.\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":";;;;;AAyBA,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,GAYYC,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;"}
+{"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. v1 expressed the ten variants as cva classes\n * (`text-3xl tracking-tighter font-bold` etc.), one per variant.\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  //\n  // `grayA11` is the alpha ink, and it composites against whatever is painted behind it, which is\n  // what you want: it tracks the backdrop instead of holding one value. Measured against the solid\n  // `gray11` it is equal on the page (5.89 vs 5.90) and ahead on any tinted surface -- 5.51 vs 4.82\n  // on a gray-4 row, 5.53 vs 4.88 on accent-4 selected.\n  //\n  // This was briefly switched to the solid over a 1.07:1 reading, but the alpha was not the cause:\n  // AppearanceBoundary declared a mode and painted nothing, so BOTH inks landed on the wrong canvas\n  // (alpha 1.08, solid 2.09). That is fixed in the boundary, which now paints the mode it declares.\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. **The number runs opposite to HTML heading\n   * convention: 3 is the largest of its group and 1 the smallest.** `title3` is `text3xl` and\n   * `title1` is `textXl`; `heading3` is `textLg` and `heading1` is `textSm`. Reading `title1` as\n   * \"the primary title\" gives you the smallest one.\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":";;;;;AAyBA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYX,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,GAYYC,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;"}