@cloudflare/kumo 1.19.0 → 2.0.0

package/dist/chunks/{table-olwwulga2l3hdwlx.js → table-fyy8gl875yyevqs3.js}

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
-import { C as f } from "./checkbox-mwgmohffm22ut13s.js";
-const d = {
+import { forwardRef as r } from "react";
+import { c as l } from "./cn-ct4n7r74mh8y0f48.js";
+import { C as g } from "./checkbox-eren6w2csum1xghg.js";
+const m = {
   layout: {
     auto: {
       classes: "",
@@ -34,17 +34,17 @@ const d = {
       description: "Pin column to the right edge of the scroll container"
     }
   }
-}, h = (e, a) => {
-  const t = d.sticky[e].classes, o = a === "head" ? "z-2" : "z-1", c = e === "right" ? "before:-left-6" : "before:-right-6", l = "before:pointer-events-none before:absolute before:inset-y-0 before:w-6";
-  return a === "cell" ? r(t, o, "bg-kumo-base", l, c, e === "right" ? "before:bg-gradient-to-r before:from-transparent before:to-kumo-base" : "before:bg-gradient-to-l before:from-transparent before:to-kumo-base") : r(t, o, "bg-kumo-base group-data-[compact]/header:bg-kumo-elevated", l, c, e === "right" ? "before:bg-gradient-to-r before:from-transparent before:to-kumo-base group-data-[compact]/header:before:to-kumo-elevated" : "before:bg-gradient-to-l before:from-transparent before:to-kumo-base group-data-[compact]/header:before:to-kumo-elevated");
-}, v = {
+}, p = (e, a) => {
+  const t = m.sticky[e].classes, o = a === "head" ? "z-2" : "z-1", n = e === "right" ? "before:-left-6" : "before:-right-6", c = "before:pointer-events-none before:absolute before:inset-y-0 before:w-6";
+  return a === "cell" ? l(t, o, "bg-kumo-base", c, n, e === "right" ? "before:bg-gradient-to-r before:from-transparent before:to-kumo-base" : "before:bg-gradient-to-l before:from-transparent before:to-kumo-base") : l(t, o, "bg-kumo-base group-data-[compact]/header:bg-kumo-elevated", c, n, e === "right" ? "before:bg-gradient-to-r before:from-transparent before:to-kumo-base group-data-[compact]/header:before:to-kumo-elevated" : "before:bg-gradient-to-l before:from-transparent before:to-kumo-base group-data-[compact]/header:before:to-kumo-elevated");
+}, w = {
   layout: "auto",
   variant: "default"
-}, g = n(({ layout: e = "auto", ...a }, t) => {
-  const o = r(
+}, k = r(({ layout: e = "auto", ...a }, t) => {
+  const o = l(
     "isolate w-full",
     // isolate creates a stacking context so z-0/z-1/z-2 never leak out
-    d.layout[e].classes,
+    m.layout[e].classes,
     "[&_td]:border-b [&_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0",
     // Row border
     "[&_td]:p-3",
@@ -53,14 +53,14 @@ const d = {
     // Header styles
     "[&_th]:bg-kumo-base",
     // Header background color
-    "text-left text-kumo-default",
+    "text-base text-left text-kumo-default",
     a.className
   );
   return /* @__PURE__ */ s("table", { ref: t, ...a, className: o });
-}), p = n(({ variant: e = "default", sticky: a, ...t }, o) => {
-  const c = e === "compact", l = r(
+}), N = r(({ variant: e = "default", sticky: a, ...t }, o) => {
+  const n = e === "compact", c = l(
     "group/header",
-    c && "[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong",
+    n && "[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong",
     a && "[&_th]:sticky [&_th]:top-0 [&_th]:z-1",
     t.className
   );
@@ -69,37 +69,37 @@ const d = {
     {
       ref: o,
       ...t,
-      className: l,
-      ...c && { "data-compact": "" }
+      className: c,
+      ...n && { "data-compact": "" }
     }
   );
-}), m = n(({ sticky: e, ...a }, t) => {
-  const o = r(
+}), f = r(({ sticky: e, ...a }, t) => {
+  const o = l(
     "group relative",
-    e && h(e, "head"),
+    e && p(e, "head"),
     a.className
   );
   return /* @__PURE__ */ s("th", { ref: t, ...a, className: o });
-}), k = n(({ variant: e = v.variant, ...a }, t) => {
-  const o = r(
-    d.variant[e].classes,
+}), y = r(({ variant: e = w.variant, ...a }, t) => {
+  const o = l(
+    m.variant[e].classes,
     a.className
   );
   return /* @__PURE__ */ s("tr", { ref: t, ...a, className: o });
-}), N = n((e, a) => /* @__PURE__ */ s("tbody", { ref: a, ...e })), u = n(({ sticky: e, ...a }, t) => {
-  const o = r(
-    e && h(e, "cell"),
+}), T = r((e, a) => /* @__PURE__ */ s("tbody", { ref: a, ...e })), h = r(({ sticky: e, ...a }, t) => {
+  const o = l(
+    e && p(e, "cell"),
     a.className
   );
   return /* @__PURE__ */ s("td", { ref: t, ...a, className: o });
-}), y = n((e, a) => /* @__PURE__ */ s("tfoot", { ref: a, ...e })), T = n((e, a) => /* @__PURE__ */ s(
+}), v = r((e, a) => /* @__PURE__ */ s("tfoot", { ref: a, ...e })), _ = r((e, a) => /* @__PURE__ */ s(
   "button",
   {
     ref: a,
     ...e,
     type: "button",
     "aria-label": "Resize column",
-    className: r(
+    className: l(
       "invisible h-full group-hover:visible",
       // Make the handle invisible by default
       "w-[10px]",
@@ -110,49 +110,67 @@ const d = {
       // Prevent selection and touch events
       "absolute top-0 right-0",
       // Position the handle
-      "m-0 bg-kumo-base p-0"
+      "m-0 bg-kumo-base p-0",
       // Override the stratus button styles
+      "focus-visible:ring-2 focus-visible:ring-kumo-brand"
+      // Consistent keyboard focus styling
     ),
     children: /* @__PURE__ */ s("span", { className: "h-5 w-[2px] rounded bg-kumo-hairline" })
   }
-)), C = n(
-  ({ checked: e, indeterminate: a, onValueChange: t, label: o, disabled: c, ...l }, b) => /* @__PURE__ */ s(
-    u,
+)), C = r(
+  ({
+    checked: e,
+    indeterminate: a,
+    onCheckedChange: t,
+    onValueChange: o,
+    label: n,
+    disabled: c,
+    ...b
+  }, d) => /* @__PURE__ */ s(
+    h,
     {
-      ref: b,
-      ...l,
-      className: r("w-10 leading-none", l.className),
+      ref: d,
+      ...b,
+      className: l("w-10 leading-none", b.className),
       children: /* @__PURE__ */ s(
-        f,
+        g,
         {
           checked: e,
           indeterminate: a,
-          onCheckedChange: (i) => {
-            t?.(i);
+          onCheckedChange: (i, u) => {
+            t?.(i, u), o?.(i);
           },
-          "aria-label": o ?? "Select row",
+          "aria-label": n ?? "Select row",
           disabled: c,
           className: "relative before:absolute before:-inset-3 before:content-['']"
         }
       )
     }
   )
-), _ = n(
-  ({ checked: e, indeterminate: a, onValueChange: t, label: o, disabled: c, ...l }, b) => /* @__PURE__ */ s(
-    m,
+), x = r(
+  ({
+    checked: e,
+    indeterminate: a,
+    onCheckedChange: t,
+    onValueChange: o,
+    label: n,
+    disabled: c,
+    ...b
+  }, d) => /* @__PURE__ */ s(
+    f,
     {
-      ref: b,
-      ...l,
-      className: r("w-10 leading-none", l.className),
+      ref: d,
+      ...b,
+      className: l("w-10 leading-none", b.className),
       children: /* @__PURE__ */ s(
-        f,
+        g,
         {
           checked: e,
           indeterminate: a,
-          onCheckedChange: (i) => {
-            t?.(i);
+          onCheckedChange: (i, u) => {
+            t?.(i, u), o?.(i);
           },
-          "aria-label": o ?? "Select all rows",
+          "aria-label": n ?? "Select all rows",
           disabled: c,
           className: "relative before:absolute before:-inset-3 before:content-['']"
         }
@@ -160,30 +178,30 @@ const d = {
     }
   )
 );
-g.displayName = "Table";
-N.displayName = "Table.Body";
-m.displayName = "Table.Head";
-k.displayName = "Table.Row";
-u.displayName = "Table.Cell";
-y.displayName = "Table.Footer";
-p.displayName = "Table.Header";
-T.displayName = "Table.ResizeHandle";
+k.displayName = "Table";
+T.displayName = "Table.Body";
+f.displayName = "Table.Head";
+y.displayName = "Table.Row";
+h.displayName = "Table.Cell";
+v.displayName = "Table.Footer";
+N.displayName = "Table.Header";
+_.displayName = "Table.ResizeHandle";
 C.displayName = "Table.CheckCell";
-_.displayName = "Table.CheckHead";
-const A = Object.assign(g, {
-  Header: p,
-  Head: m,
-  Row: k,
-  Body: N,
-  Cell: u,
+x.displayName = "Table.CheckHead";
+const B = Object.assign(k, {
+  Header: N,
+  Head: f,
+  Row: y,
+  Body: T,
+  Cell: h,
   CheckCell: C,
-  CheckHead: _,
-  Footer: y,
-  ResizeHandle: T
+  CheckHead: x,
+  Footer: v,
+  ResizeHandle: _
 });
 export {
-  v as K,
-  A as T,
-  d as a
+  w as K,
+  B as T,
+  m as a
 };
-//# sourceMappingURL=table-olwwulga2l3hdwlx.js.map
+//# sourceMappingURL=table-fyy8gl875yyevqs3.js.map

package/dist/chunks/table-fyy8gl875yyevqs3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-fyy8gl875yyevqs3.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { Checkbox, type CheckboxChangeEventDetails } from \"../checkbox\";\n\n/** Table layout and row variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_TABLE_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto table layout - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description:\n        \"Fixed table layout - columns have equal width, controlled via colgroup\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"\",\n      description: \"Default row variant\",\n    },\n    selected: {\n      classes: \"bg-kumo-tint\",\n      description: \"Selected row variant\",\n    },\n  },\n  sticky: {\n    left: {\n      classes: \"sticky left-0\",\n      description: \"Pin column to the left edge of the scroll container\",\n    },\n    right: {\n      classes: \"sticky right-0\",\n      description: \"Pin column to the right edge of the scroll container\",\n    },\n  },\n} as const;\n\nexport type KumoTableStickyColumn = keyof typeof KUMO_TABLE_VARIANTS.sticky;\n\n/**\n * Shared sticky-column styles for `<th>` and `<td>`.\n *\n * - Opaque background so scrolling content doesn't show through.\n * - Gradient fade on the inner edge so the sticky boundary isn't a hard clip.\n * - z-index kept to z-0/z-1/z-2 within the table's `isolate` stacking context:\n *   - `z-0` — normal cells (default)\n *   - `z-1` — sticky body cells (`<td>`)\n *   - `z-2` — sticky header cells (`<th>`) so they sit above sticky body cells\n *\n * Header cells use `:has()` to detect if they're in a compact header (which has\n * `bg-kumo-elevated`) and adjust both the background and gradient fade colors.\n */\nconst stickyColumnClasses = (\n  side: KumoTableStickyColumn,\n  /** \"head\" renders at z-2, \"cell\" at z-1 */\n  element: \"head\" | \"cell\",\n) => {\n  const base = KUMO_TABLE_VARIANTS.sticky[side].classes;\n  const z = element === \"head\" ? \"z-2\" : \"z-1\";\n\n  const fadePosition = side === \"right\" ? \"before:-left-6\" : \"before:-right-6\";\n  const fadeBase =\n    \"before:pointer-events-none before:absolute before:inset-y-0 before:w-6\";\n\n  if (element === \"cell\") {\n    // Body cells always use kumo-base\n    const fade =\n      side === \"right\"\n        ? \"before:bg-gradient-to-r before:from-transparent before:to-kumo-base\"\n        : \"before:bg-gradient-to-l before:from-transparent before:to-kumo-base\";\n    return cn(base, z, \"bg-kumo-base\", fadeBase, fadePosition, fade);\n  }\n\n  // Header cells: use kumo-base by default, kumo-elevated when in compact header\n  // The compact header applies a data attribute we can target with :has()\n  const bg = \"bg-kumo-base group-data-[compact]/header:bg-kumo-elevated\";\n  const fade =\n    side === \"right\"\n      ? \"before:bg-gradient-to-r before:from-transparent before:to-kumo-base group-data-[compact]/header:before:to-kumo-elevated\"\n      : \"before:bg-gradient-to-l before:from-transparent before:to-kumo-base group-data-[compact]/header:before:to-kumo-elevated\";\n\n  return cn(base, z, bg, fadeBase, fadePosition, fade);\n};\n\nexport const KUMO_TABLE_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n  variant: \"default\",\n} as const;\n\nexport type KumoTableRowVariant = keyof typeof KUMO_TABLE_VARIANTS.variant;\nexport type KumoTableLayout = keyof typeof KUMO_TABLE_VARIANTS.layout;\n\n/**\n * Table root — applies layout, borders, padding, and header styles.\n *\n * @example\n * ```tsx\n * <Table layout=\"fixed\">\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.Head>Name</Table.Head>\n *       <Table.Head>Status</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row>\n *       <Table.Cell>Worker A</Table.Cell>\n *       <Table.Cell>Active</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n */\nconst TableRoot = forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement> & {\n    /**\n     * Table layout algorithm.\n     * - `\"auto\"` — columns resize based on content\n     * - `\"fixed\"` — equal-width columns, controlled via `<colgroup>`\n     * @default \"auto\"\n     */\n    layout?: KumoTableLayout;\n  }\n>(({ layout = \"auto\", ...props }, ref) => {\n  const className = cn(\n    \"isolate w-full\", // isolate creates a stacking context so z-0/z-1/z-2 never leak out\n    KUMO_TABLE_VARIANTS.layout[layout].classes,\n    \"[&_td]:border-b [&_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0\", // Row border\n    \"[&_td]:p-3\", // Cell padding\n    \"[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base\", // Header styles\n    \"[&_th]:bg-kumo-base\", // Header background color\n    \"text-base text-left text-kumo-default\",\n    props.className,\n  );\n\n  return <table ref={ref} {...props} className={className} />;\n});\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement> & {\n    variant?: \"default\" | \"compact\";\n    /**\n     * Make the header row stick to the top of the scroll container.\n     * Requires the table's parent to have a constrained height with\n     * `overflow-y: auto`.\n     */\n    sticky?: boolean;\n  }\n>(({ variant = \"default\", sticky, ...props }, ref) => {\n  const isCompact = variant === \"compact\";\n  const className = cn(\n    \"group/header\",\n    isCompact && \"[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong\",\n    sticky && \"[&_th]:sticky [&_th]:top-0 [&_th]:z-1\",\n    props.className,\n  );\n\n  return (\n    <thead\n      ref={ref}\n      {...props}\n      className={className}\n      {...(isCompact && { \"data-compact\": \"\" })}\n    />\n  );\n});\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  React.HTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this header cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on the\n     * inner edge. Sticky header columns render at `z-2` so they sit above both\n     * normal cells and sticky body cells (`z-1`).\n     */\n    sticky?: KumoTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    \"group relative\",\n    sticky && stickyColumnClasses(sticky, \"head\"),\n    props.className,\n  );\n  return <th ref={ref} {...props} className={className} />;\n});\n\nconst TableRow = forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    variant?: KumoTableRowVariant;\n  }\n>(({ variant = KUMO_TABLE_DEFAULT_VARIANTS.variant, ...props }, ref) => {\n  const className = cn(\n    KUMO_TABLE_VARIANTS.variant[variant].classes,\n    props.className,\n  );\n\n  return <tr ref={ref} {...props} className={className} />;\n});\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tbody ref={ref} {...props} />;\n});\n\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    /**\n     * Pin this cell to the left or right edge of the scroll container.\n     * Adds `position: sticky`, an opaque background, and a gradient fade on\n     * the inner edge. Requires the table's parent to have `overflow-x: auto`.\n     */\n    sticky?: KumoTableStickyColumn;\n  }\n>(({ sticky, ...props }, ref) => {\n  const className = cn(\n    sticky && stickyColumnClasses(sticky, \"cell\"),\n    props.className,\n  );\n  return <td ref={ref} {...props} className={className} />;\n});\n\nconst TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>((props, ref) => {\n  return <tfoot ref={ref} {...props} />;\n});\n\nconst TableResizeHandle = forwardRef<\n  HTMLButtonElement,\n  React.HTMLAttributes<HTMLButtonElement>\n>((props, ref) => {\n  return (\n    <button\n      ref={ref}\n      {...props}\n      type=\"button\"\n      aria-label=\"Resize column\"\n      className={cn(\n        \"invisible h-full group-hover:visible\", // Make the handle invisible by default\n        \"w-[10px]\", // Hitting area\n        \"flex items-center justify-center\", // Center the handle\n        \"cursor-col-resize touch-none select-none\", // Prevent selection and touch events\n        \"absolute top-0 right-0\", // Position the handle\n        \"m-0 bg-kumo-base p-0\", // Override the stratus button styles\n        \"focus-visible:ring-2 focus-visible:ring-kumo-brand\", // Consistent keyboard focus styling\n      )}\n    >\n      <span className=\"h-5 w-[2px] rounded bg-kumo-hairline\" />\n    </button>\n  );\n});\n\n/**\n * Special cell that makes the entire cell area a hit target for the checkbox.\n */\n\nconst TableCheckCell = forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableCell\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select row\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableCell>\n    );\n  },\n);\n\nconst TableCheckHead = forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & {\n    checked?: boolean;\n    indeterminate?: boolean;\n    /**\n     * Called when the checkbox's checked state changes. The optional second\n     * argument exposes event details from the underlying Checkbox, matching\n     * the Checkbox component's signature.\n     */\n    onCheckedChange?: (\n      checked: boolean,\n      eventDetails?: CheckboxChangeEventDetails,\n    ) => void;\n    /** @deprecated Use `onCheckedChange` instead. Will be removed in a future major version. */\n    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    {\n      checked,\n      indeterminate,\n      onCheckedChange,\n      onValueChange,\n      label,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <TableHead\n        ref={ref}\n        {...props}\n        className={cn(\"w-10 leading-none\", props.className)}\n      >\n        <Checkbox\n          checked={checked}\n          indeterminate={indeterminate}\n          onCheckedChange={(newChecked, eventDetails) => {\n            onCheckedChange?.(newChecked, eventDetails);\n            onValueChange?.(newChecked);\n          }}\n          aria-label={label ?? \"Select all rows\"}\n          disabled={disabled}\n          className=\"relative before:absolute before:-inset-3 before:content-['']\"\n        />\n      </TableHead>\n    );\n  },\n);\n\nTableRoot.displayName = \"Table\";\nTableBody.displayName = \"Table.Body\";\nTableHead.displayName = \"Table.Head\";\nTableRow.displayName = \"Table.Row\";\nTableCell.displayName = \"Table.Cell\";\nTableFooter.displayName = \"Table.Footer\";\nTableHeader.displayName = \"Table.Header\";\nTableResizeHandle.displayName = \"Table.ResizeHandle\";\nTableCheckCell.displayName = \"Table.CheckCell\";\nTableCheckHead.displayName = \"Table.CheckHead\";\n\n/**\n * Table — semantic HTML table with styled rows, cells, and selection support.\n *\n * Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`,\n * `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.\n *\n * @example\n * ```tsx\n * <Table>\n *   <Table.Header>\n *     <Table.Row>\n *       <Table.CheckHead checked={allSelected} onCheckedChange={toggleAll} />\n *       <Table.Head>Name</Table.Head>\n *     </Table.Row>\n *   </Table.Header>\n *   <Table.Body>\n *     {rows.map((row) => (\n *       <Table.Row key={row.id} variant={selected.has(row.id) ? \"selected\" : \"default\"}>\n *         <Table.CheckCell checked={selected.has(row.id)} onCheckedChange={() => toggle(row.id)} />\n *         <Table.Cell>{row.name}</Table.Cell>\n *       </Table.Row>\n *     ))}\n *   </Table.Body>\n * </Table>\n * ```\n */\nexport const Table = Object.assign(TableRoot, {\n  Header: TableHeader,\n  Head: TableHead,\n  Row: TableRow,\n  Body: TableBody,\n  Cell: TableCell,\n  CheckCell: TableCheckCell,\n  CheckHead: TableCheckHead,\n  Footer: TableFooter,\n  ResizeHandle: TableResizeHandle,\n});\n"],"names":["KUMO_TABLE_VARIANTS","stickyColumnClasses","side","element","base","z","fadePosition","fadeBase","cn","KUMO_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","jsx","TableHeader","variant","sticky","isCompact","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onCheckedChange","onValueChange","label","disabled","Checkbox","newChecked","eventDetails","TableCheckHead","Table"],"mappings":"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"}

package/dist/chunks/table-of-contents-fzyv7uhnnyr13dqu.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as o, isValidElement as k, cloneElement as h } from "react";
+import { c as n } from "./cn-ct4n7r74mh8y0f48.js";
+const m = {
+  state: {
+    default: {
+      classes: "text-kumo-subtle hover:border-kumo-line hover:text-kumo-default hover:font-medium",
+      description: "Inactive section link"
+    },
+    active: {
+      classes: "border-kumo-brand font-medium text-kumo-default",
+      description: "Currently visible / active section"
+    }
+  }
+}, A = {
+  state: "default"
+}, p = "block w-full truncate border-l-2 border-transparent py-0.5 pl-4 text-sm text-left no-underline", T = o(
+  ({ className: t, "aria-label": s = "Table of contents", ...l }, a) => /* @__PURE__ */ e("nav", { ref: a, "aria-label": s, className: t, ...l })
+), N = o(({ className: t, ...s }, l) => /* @__PURE__ */ e(
+  "p",
+  {
+    ref: l,
+    className: n(
+      "mb-3 text-xs font-semibold tracking-wide text-kumo-subtle uppercase",
+      t
+    ),
+    ...s
+  }
+)), x = o(({ className: t, ...s }, l) => /* @__PURE__ */ e(
+  "ul",
+  {
+    ref: l,
+    className: n(
+      "flex flex-col gap-2 border-l-2 border-kumo-hairline",
+      t
+    ),
+    ...s
+  }
+)), C = o(({ active: t = !1, className: s, children: l, render: a, ...i }, c) => {
+  const r = t ? m.state.active.classes : m.state.default.classes, d = n(p, r, s), u = {
+    ref: c,
+    "aria-current": t ? "true" : void 0,
+    className: d,
+    children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: l }),
+    ...i
+  };
+  return a && k(a) ? /* @__PURE__ */ e("li", { className: "-ml-0.5", children: h(a, u) }) : /* @__PURE__ */ e("li", { className: "-ml-0.5", children: /* @__PURE__ */ e("a", { ...u }) });
+}), b = "flex flex-col gap-2 border-l-2 border-kumo-hairline [&>li>a]:pl-7 [&>li>button]:pl-7", O = o(({ label: t, href: s, active: l = !1, className: a, children: i, ...c }, r) => {
+  if (s) {
+    const d = l ? m.state.active.classes : m.state.default.classes;
+    return /* @__PURE__ */ f(
+      "li",
+      {
+        ref: r,
+        className: n("-ml-0.5 flex flex-col gap-2", a),
+        ...c,
+        children: [
+          /* @__PURE__ */ e(
+            "a",
+            {
+              href: s,
+              "aria-current": l ? "true" : void 0,
+              className: n(p, d),
+              children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: t })
+            }
+          ),
+          /* @__PURE__ */ e("ul", { className: n(b), children: i })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ f(
+    "li",
+    {
+      ref: r,
+      className: n("-ml-0.5 flex flex-col gap-2", a),
+      ...c,
+      children: [
+        /* @__PURE__ */ e("p", { className: "py-0.5 pl-4 text-sm leading-5 font-medium text-kumo-subtle", children: t }),
+        /* @__PURE__ */ e("ul", { className: n(b), children: i })
+      ]
+    }
+  );
+});
+T.displayName = "TableOfContents";
+N.displayName = "TableOfContents.Title";
+x.displayName = "TableOfContents.List";
+C.displayName = "TableOfContents.Item";
+O.displayName = "TableOfContents.Group";
+const S = Object.assign(T, {
+  Title: N,
+  List: x,
+  Item: C,
+  Group: O
+});
+export {
+  m as K,
+  S as T,
+  A as a
+};
+//# sourceMappingURL=table-of-contents-fzyv7uhnnyr13dqu.js.map

package/dist/chunks/table-of-contents-fzyv7uhnnyr13dqu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents-fzyv7uhnnyr13dqu.js","sources":["../../src/components/table-of-contents/table-of-contents.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** TableOfContents item state variant definitions. */\nexport const KUMO_TABLE_OF_CONTENTS_VARIANTS = {\n  state: {\n    default: {\n      classes:\n        \"text-kumo-subtle hover:border-kumo-line hover:text-kumo-default hover:font-medium\",\n      description: \"Inactive section link\",\n    },\n    active: {\n      classes: \"border-kumo-brand font-medium text-kumo-default\",\n      description: \"Currently visible / active section\",\n    },\n  },\n} as const;\n\nexport const KUMO_TABLE_OF_CONTENTS_DEFAULT_VARIANTS = {\n  state: \"default\",\n} as const;\n\nexport type KumoTableOfContentsState =\n  keyof typeof KUMO_TABLE_OF_CONTENTS_VARIANTS.state;\n\nconst ITEM_BASE =\n  \"block w-full truncate border-l-2 border-transparent py-0.5 pl-4 text-sm text-left no-underline\";\n\nexport type TableOfContentsProps = React.HTMLAttributes<HTMLElement>;\n\nconst TableOfContentsRoot = forwardRef<HTMLElement, TableOfContentsProps>(\n  (\n    { className, \"aria-label\": ariaLabel = \"Table of contents\", ...props },\n    ref,\n  ) => (\n    <nav ref={ref} aria-label={ariaLabel} className={className} {...props} />\n  ),\n);\n\nexport type TableOfContentsTitleProps =\n  React.HTMLAttributes<HTMLParagraphElement>;\n\nconst TableOfContentsTitle = forwardRef<\n  HTMLParagraphElement,\n  TableOfContentsTitleProps\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      \"mb-3 text-xs font-semibold tracking-wide text-kumo-subtle uppercase\",\n      className,\n    )}\n    {...props}\n  />\n));\n\nexport type TableOfContentsListProps = React.HTMLAttributes<HTMLUListElement>;\n\nconst TableOfContentsList = forwardRef<\n  HTMLUListElement,\n  TableOfContentsListProps\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\n      \"flex flex-col gap-2 border-l-2 border-kumo-hairline\",\n      className,\n    )}\n    {...props}\n  />\n));\nexport interface TableOfContentsItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Whether this item represents the currently active section. */\n  active?: boolean;\n  /**\n   * Custom element to render as the link. Use this to integrate with\n   * framework routers (e.g., Next.js `<Link>`, React Router `<NavLink>`).\n   * The element receives all anchor props including `href`, `className`, and `children`.\n   *\n   * @example\n   * ```tsx\n   * <TableOfContents.Item render={<Link />} href=\"/intro\" active>\n   *   Introduction\n   * </TableOfContents.Item>\n   * ```\n   */\n  render?: React.ReactElement;\n}\n\nconst TableOfContentsItem = forwardRef<\n  HTMLAnchorElement,\n  TableOfContentsItemProps\n>(({ active = false, className, children, render, ...props }, ref) => {\n  const stateClasses = active\n    ? KUMO_TABLE_OF_CONTENTS_VARIANTS.state.active.classes\n    : KUMO_TABLE_OF_CONTENTS_VARIANTS.state.default.classes;\n\n  const combinedClassName = cn(ITEM_BASE, stateClasses, className);\n\n  const innerContent = (\n    <span className=\"block min-w-0 leading-5\">{children}</span>\n  );\n\n  const sharedProps = {\n    ref,\n    \"aria-current\": active ? (\"true\" as const) : undefined,\n    className: combinedClassName,\n    children: innerContent,\n    ...props,\n  };\n\n  // If a render prop is provided, clone it with our props\n  if (render && isValidElement(render)) {\n    return <li className=\"-ml-0.5\">{cloneElement(render, sharedProps)}</li>;\n  }\n\n  // Default to anchor tag\n  return (\n    <li className=\"-ml-0.5\">\n      {/* oxlint-disable-next-line anchor-has-content -- children are in sharedProps */}\n      <a {...sharedProps} />\n    </li>\n  );\n});\n\nexport interface TableOfContentsGroupProps extends Omit<\n  React.HTMLAttributes<HTMLLIElement>,\n  \"title\"\n> {\n  /** Label displayed above the group's items. */\n  label: string;\n  /** URL the group label links to. When provided, the label renders as a clickable link with item styling. */\n  href?: string;\n  /** Whether this group's label represents the currently active section. Only applies when `href` is provided. */\n  active?: boolean;\n}\n\nconst NESTED_UL_CLASSES =\n  \"flex flex-col gap-2 border-l-2 border-kumo-hairline [&>li>a]:pl-7 [&>li>button]:pl-7\";\n\nconst TableOfContentsGroup = forwardRef<\n  HTMLLIElement,\n  TableOfContentsGroupProps\n>(({ label, href, active = false, className, children, ...props }, ref) => {\n  if (href) {\n    const stateClasses = active\n      ? KUMO_TABLE_OF_CONTENTS_VARIANTS.state.active.classes\n      : KUMO_TABLE_OF_CONTENTS_VARIANTS.state.default.classes;\n\n    return (\n      <li\n        ref={ref}\n        className={cn(\"-ml-0.5 flex flex-col gap-2\", className)}\n        {...props}\n      >\n        <a\n          href={href}\n          aria-current={active ? (\"true\" as const) : undefined}\n          className={cn(ITEM_BASE, stateClasses)}\n        >\n          <span className=\"block min-w-0 leading-5\">{label}</span>\n        </a>\n        <ul className={cn(NESTED_UL_CLASSES)}>{children}</ul>\n      </li>\n    );\n  }\n\n  return (\n    <li\n      ref={ref}\n      className={cn(\"-ml-0.5 flex flex-col gap-2\", className)}\n      {...props}\n    >\n      <p className=\"py-0.5 pl-4 text-sm leading-5 font-medium text-kumo-subtle\">\n        {label}\n      </p>\n      <ul className={cn(NESTED_UL_CLASSES)}>{children}</ul>\n    </li>\n  );\n});\n\nTableOfContentsRoot.displayName = \"TableOfContents\";\nTableOfContentsTitle.displayName = \"TableOfContents.Title\";\nTableOfContentsList.displayName = \"TableOfContents.List\";\nTableOfContentsItem.displayName = \"TableOfContents.Item\";\nTableOfContentsGroup.displayName = \"TableOfContents.Group\";\n\n/**\n * TableOfContents — presentational compound component for section navigation.\n *\n * Purely visual; all interaction logic (scroll tracking, active state management)\n * is left to the consumer.\n *\n * @example\n * ```tsx\n * <TableOfContents>\n *   <TableOfContents.Title>On this page</TableOfContents.Title>\n *   <TableOfContents.List>\n *     <TableOfContents.Item href=\"#intro\" active>Introduction</TableOfContents.Item>\n *     <TableOfContents.Group label=\"Getting Started\">\n *       <TableOfContents.Item href=\"#install\">Installation</TableOfContents.Item>\n *       <TableOfContents.Item href=\"#setup\">Setup</TableOfContents.Item>\n *     </TableOfContents.Group>\n *   </TableOfContents.List>\n * </TableOfContents>\n * ```\n */\nexport const TableOfContents = Object.assign(TableOfContentsRoot, {\n  Title: TableOfContentsTitle,\n  List: TableOfContentsList,\n  Item: TableOfContentsItem,\n  Group: TableOfContentsGroup,\n});\n"],"names":["KUMO_TABLE_OF_CONTENTS_VARIANTS","KUMO_TABLE_OF_CONTENTS_DEFAULT_VARIANTS","ITEM_BASE","TableOfContentsRoot","forwardRef","className","ariaLabel","props","ref","TableOfContentsTitle","jsx","cn","TableOfContentsList","TableOfContentsItem","active","children","render","stateClasses","combinedClassName","sharedProps","isValidElement","cloneElement","NESTED_UL_CLASSES","TableOfContentsGroup","label","href","jsxs","TableOfContents"],"mappings":"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"}

package/dist/chunks/{tabs-lohcglgppp6gj0hp.js → tabs-jywwt8ebjqjkux75.js}

@@ -1,28 +1,28 @@
 "use client";
 import { jsxs as d, jsx as a } from "react/jsx-runtime";
 import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
-import { b9 as x, ba as T, bb as w, bc as N } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
+import { bd as x, be as T, bf as w, bg as N } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 const V = {
   variant: "segmented"
 };
 function z({
   tabs: u,
-  value: i,
+  value: n,
   selectedValue: m,
   onValueChange: c,
   activateOnFocus: b,
   className: g,
-  listClassName: h,
-  indicatorClassName: v,
-  variant: n = V.variant
+  listClassName: f,
+  indicatorClassName: h,
+  variant: i = V.variant
 }) {
-  const r = u ?? [];
-  if (r.length === 0)
+  const o = u ?? [];
+  if (o.length === 0)
     return null;
-  const f = r[0]?.value, l = i !== void 0, p = {
-    value: l ? i : void 0,
-    defaultValue: l ? void 0 : m ?? f
-  }, t = n === "segmented", o = n === "underline";
+  const v = o[0]?.value, l = n !== void 0, p = {
+    value: l ? n : void 0,
+    defaultValue: l ? void 0 : m ?? v
+  }, t = i === "segmented", r = i === "underline";
   return /* @__PURE__ */ d(
     x,
     {
@@ -41,19 +41,19 @@ function z({
             className: s(
               "scrollbar-hide relative flex min-w-0 shrink items-stretch",
               t && "h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70",
-              o && "h-7 gap-4 border-b border-kumo-hairline pb-2",
-              h
+              r && "h-7 gap-4 border-b border-kumo-hairline pb-2",
+              f
             ),
             children: [
-              r.map((e) => /* @__PURE__ */ a(
+              o.map((e) => /* @__PURE__ */ a(
                 w,
                 {
                   value: e.value,
                   render: e.render,
                   className: s(
-                    "relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-kumo-hairline",
+                    "relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
                     t && "my-0.5 rounded-md px-2.5 text-kumo-strong hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
-                    o && "px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint hover:text-kumo-subtle aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
+                    r && "px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint hover:text-kumo-subtle aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
                     e.className
                   ),
                   children: e.label
@@ -72,8 +72,8 @@ function z({
                         "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
                         "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
                         t && "top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line",
-                        o && "bottom-0 h-0.5 bg-kumo-brand",
-                        v
+                        r && "bottom-0 h-0.5 bg-kumo-brand",
+                        h
                       )
                     }
                   )
@@ -89,4 +89,4 @@ function z({
 export {
   z as T
 };
-//# sourceMappingURL=tabs-lohcglgppp6gj0hp.js.map
+//# sourceMappingURL=tabs-jywwt8ebjqjkux75.js.map

package/dist/chunks/{tabs-lohcglgppp6gj0hp.js.map → tabs-jywwt8ebjqjkux75.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-lohcglgppp6gj0hp.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const KUMO_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = KumoTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative isolate min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div className=\"absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed\" />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70\",\n          isUnderline && \"h-7 gap-4 border-b border-kumo-hairline pb-2\",\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            value={tab.value}\n            render={tab.render}\n            className={cn(\n              \"relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-kumo-hairline\",\n              isSegmented &&\n                \"my-0.5 rounded-md px-2.5 text-kumo-strong hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset\",\n              isUnderline &&\n                \"px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint hover:text-kumo-subtle aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default\",\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  \"top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line\",\n                isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator","props"],"mappings":";;;;AAUO,MAAMA,IAA6B;AAAA,EACxC,SAAS;AACX;AAuGO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC,IAAUV,EAA2B;AACvC,GAAc;AACZ,QAAMW,IAAoBT,KAAQ,CAAA;AAElC,MAAIS,EAAM,WAAW;AACnB,WAAO;AAGT,QAAMC,IAAgBD,EAAM,CAAC,GAAG,OAC1BE,IAAeV,MAAU,QACzBW,IAAY;AAAA,IAChB,OAAOD,IAAeV,IAAQ;AAAA,IAC9B,cAAcU,IAAe,SAAaT,KAAiBQ;AAAA,EAAA,GAGvDG,IAAcL,MAAY,aAC1BM,IAAcN,MAAY;AAEhC,SACE,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK,EAAG,wCAAwCZ,CAAS;AAAA,MAC/D,eAAe,CAACa,MAAc;AAC5B,cAAMC,IAAc,OAAOD,CAAS;AACpC,QAAAf,IAAgBgB,CAAW;AAAA,MAC7B;AAAA,MAGC,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,QAEnG,gBAAAL;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,iBAAAjB;AAAA,YACA,WAAWa;AAAA,cACT;AAAA,cACAJ,KAAe;AAAA,cACfC,KAAe;AAAA,cACfR;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAG,EAAM,IAAI,CAACa,MACV,gBAAAF;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAI;AAAA,kBACX,QAAQA,EAAI;AAAA,kBACZ,WAAWL;AAAA,oBACT;AAAA,oBACAJ,KACE;AAAA,oBACFC,KACE;AAAA,oBACFQ,EAAI;AAAA,kBAAA;AAAA,kBAGL,UAAAA,EAAI;AAAA,gBAAA;AAAA,gBAZAA,EAAI;AAAA,cAAA,CAcZ;AAAA,cACD,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,QAAQ,CAACC,MACP,gBAAAL;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACE,GAAGK;AAAA,sBACJ,WAAWR;AAAA,wBACT;AAAA,wBACA;AAAA,wBACA;AAAA,wBACAJ,KACE;AAAA,wBACFC,KAAe;AAAA,wBACfP;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tabs-jywwt8ebjqjkux75.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { TabsTab } from \"@base-ui/react/tabs\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const KUMO_TABS_VARIANTS = {\n  variant: [\"segmented\", \"underline\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n  container: {\n    height: 34,\n    borderRadius: 8,\n    background: \"color-accent\",\n    padding: 1,\n  },\n  tab: {\n    paddingX: 10,\n    verticalMargin: 1,\n    fontSize: 16,\n    fontWeight: 500,\n    borderRadius: 8,\n    activeColor: \"text-color-surface\",\n    inactiveColor: \"text-color-label\",\n  },\n  indicator: {\n    background: \"color-surface-secondary\",\n    ring: \"color-color-2\",\n    borderRadius: 6,\n    shadow: \"shadow-sm\",\n  },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n  /**\n   * Tab style.\n   * - `\"segmented\"` — Pill-shaped indicator on a filled track\n   * - `\"underline\"` — Underline indicator below tab text\n   * @default \"segmented\"\n   */\n  variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n  /** Unique identifier for the tab, used as the controlled value. */\n  value: string;\n  /** Display content for the tab trigger. */\n  label: ReactNode;\n  /** Additional CSS classes for this tab trigger. */\n  className?: string;\n  /**\n   * Custom render function or element to replace the tab element (e.g. for link-based tabs).\n   * When using a function, it receives the props to spread on the element and the tab's state.\n   */\n  render?: TabsTab.Props[\"render\"];\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n *   tabs={[\n *     { value: \"overview\", label: \"Overview\" },\n *     { value: \"settings\", label: \"Settings\" },\n *   ]}\n *   value={activeTab}\n *   onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = KumoTabsVariantsProps & {\n  /** Array of tab items to render. */\n  tabs?: TabsItem[];\n  /** Controlled value. When set, component becomes controlled. */\n  value?: string;\n  /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n  selectedValue?: string;\n  /** Callback fired when the active tab changes. */\n  onValueChange?: (value: string) => void;\n  /**\n   * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n   * When `false` (default), tabs receive focus but require Enter/Space to activate.\n   */\n  activateOnFocus?: boolean;\n  /** Additional CSS classes for the root element. */\n  className?: string;\n  /** Additional CSS classes for the tab list element. */\n  listClassName?: string;\n  /** Additional CSS classes for the indicator element. */\n  indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n *   variant=\"segmented\"\n *   tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n *   value={active}\n *   onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n  tabs,\n  value,\n  selectedValue,\n  onValueChange,\n  activateOnFocus,\n  className,\n  listClassName,\n  indicatorClassName,\n  variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n  const items: TabsItem[] = tabs ?? [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const fallbackValue = items[0]?.value;\n  const isControlled = value !== undefined;\n  const rootProps = {\n    value: isControlled ? value : undefined,\n    defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n  };\n\n  const isSegmented = variant === \"segmented\";\n  const isUnderline = variant === \"underline\";\n\n  return (\n    <TabsPrimitive.Root\n      {...rootProps}\n      className={cn(\"relative isolate min-w-0 font-medium\", className)}\n      onValueChange={(nextValue) => {\n        const stringValue = String(nextValue);\n        onValueChange?.(stringValue);\n      }}\n    >\n      {/* Background element for segmented variant */}\n      {isSegmented && (\n        <div className=\"absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed\" />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-9 rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70\",\n          isUnderline && \"h-7 gap-4 border-b border-kumo-hairline pb-2\",\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            value={tab.value}\n            render={tab.render}\n            className={cn(\n              \"relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              isSegmented &&\n                \"my-0.5 rounded-md px-2.5 text-kumo-strong hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset\",\n              isUnderline &&\n                \"px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint hover:text-kumo-subtle aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default\",\n              tab.className,\n            )}\n          >\n            {tab.label}\n          </TabsPrimitive.Tab>\n        ))}\n        <TabsPrimitive.Indicator\n          render={(props) => (\n            <div\n              {...props}\n              className={cn(\n                \"absolute z-1 left-0\",\n                \"w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200\",\n                \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n                isSegmented &&\n                  \"top-(--active-tab-top) h-(--active-tab-height) rounded-md bg-kumo-base shadow-sm ring ring-kumo-line\",\n                isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n                indicatorClassName,\n              )}\n            />\n          )}\n        />\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator","props"],"mappings":";;;;AAUO,MAAMA,IAA6B;AAAA,EACxC,SAAS;AACX;AAuGO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC,IAAUV,EAA2B;AACvC,GAAc;AACZ,QAAMW,IAAoBT,KAAQ,CAAA;AAElC,MAAIS,EAAM,WAAW;AACnB,WAAO;AAGT,QAAMC,IAAgBD,EAAM,CAAC,GAAG,OAC1BE,IAAeV,MAAU,QACzBW,IAAY;AAAA,IAChB,OAAOD,IAAeV,IAAQ;AAAA,IAC9B,cAAcU,IAAe,SAAaT,KAAiBQ;AAAA,EAAA,GAGvDG,IAAcL,MAAY,aAC1BM,IAAcN,MAAY;AAEhC,SACE,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK,EAAG,wCAAwCZ,CAAS;AAAA,MAC/D,eAAe,CAACa,MAAc;AAC5B,cAAMC,IAAc,OAAOD,CAAS;AACpC,QAAAf,IAAgBgB,CAAW;AAAA,MAC7B;AAAA,MAGC,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,QAEnG,gBAAAL;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,iBAAAjB;AAAA,YACA,WAAWa;AAAA,cACT;AAAA,cACAJ,KAAe;AAAA,cACfC,KAAe;AAAA,cACfR;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAG,EAAM,IAAI,CAACa,MACV,gBAAAF;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAI;AAAA,kBACX,QAAQA,EAAI;AAAA,kBACZ,WAAWL;AAAA,oBACT;AAAA,oBACAJ,KACE;AAAA,oBACFC,KACE;AAAA,oBACFQ,EAAI;AAAA,kBAAA;AAAA,kBAGL,UAAAA,EAAI;AAAA,gBAAA;AAAA,gBAZAA,EAAI;AAAA,cAAA,CAcZ;AAAA,cACD,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,QAAQ,CAACC,MACP,gBAAAL;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACE,GAAGK;AAAA,sBACJ,WAAWR;AAAA,wBACT;AAAA,wBACA;AAAA,wBACA;AAAA,wBACAJ,KACE;AAAA,wBACFC,KAAe;AAAA,wBACfP;AAAA,sBAAA;AAAA,oBACF;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/chunks/{text-nmyi1rkwdj37f30f.js → text-f7t467waymhb30sx.js}

@@ -60,18 +60,18 @@ const s = {
     }
   }
 };
-function h({
+function y({
   variant: e = "body",
   bold: i = !1,
   size: o = "base",
   truncate: c = !1,
-  children: r,
-  DANGEROUS_className: a,
+  children: a,
+  DANGEROUS_className: r,
   DANGEROUS_style: l,
   as: t,
   ...d
 }, m) {
-  const n = ["body", "secondary", "success", "error"].includes(e), u = ["mono", "mono-secondary"].includes(e), x = g(() => t || (e === "heading1" ? "h1" : e === "heading2" ? "h2" : e === "heading3" ? "h3" : ["mono", "mono-secondary"].includes(e) ? "span" : "p"), [e, t]);
+  const n = ["body", "secondary", "success", "error"].includes(e), u = ["mono", "mono-secondary"].includes(e), x = g(() => t || (["mono", "mono-secondary"].includes(e) || ["heading1", "heading2", "heading3"].includes(e) ? "span" : "p"), [e, t]);
   return /* @__PURE__ */ f(
     x,
     {
@@ -84,16 +84,16 @@ function h({
         // Monospace fonts need to be 1pt smaller than body text to optically match
         u && (o === "lg" ? s.size.base.classes : s.size.sm.classes),
         c && "truncate min-w-0",
-        a
+        r
       ),
       style: l,
       ...d,
-      children: r
+      children: a
     }
   );
 }
-const T = p(h);
+const T = p(y);
 export {
   T
 };
-//# sourceMappingURL=text-nmyi1rkwdj37f30f.js.map
+//# sourceMappingURL=text-f7t467waymhb30sx.js.map

package/dist/chunks/text-f7t467waymhb30sx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-f7t467waymhb30sx.js","sources":["../../src/components/text/text.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ForwardedRef,\n  forwardRef,\n  useMemo,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Text variant and size definitions mapping names to their Tailwind classes. */\nexport const KUMO_TEXT_VARIANTS = {\n  variant: {\n    heading1: {\n      classes: \"text-3xl font-semibold\",\n      description: \"Large heading for page titles\",\n    },\n    heading2: {\n      classes: \"text-2xl font-semibold\",\n      description: \"Medium heading for section titles\",\n    },\n    heading3: {\n      classes: \"text-lg font-semibold\",\n      description: \"Small heading for subsections\",\n    },\n    body: {\n      classes: \"text-kumo-default\",\n      description: \"Default body text\",\n    },\n    secondary: {\n      classes: \"text-kumo-subtle\",\n      description: \"Muted text for secondary information\",\n    },\n    success: {\n      classes: \"text-kumo-link\",\n      description: \"Success state text\",\n    },\n    error: {\n      classes: \"text-kumo-danger\",\n      description: \"Error state text\",\n    },\n    mono: {\n      classes: \"font-mono\",\n      description: \"Monospace text for code\",\n    },\n    \"mono-secondary\": {\n      classes: \"font-mono text-kumo-subtle\",\n      description: \"Muted monospace text\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"text-xs\",\n      description: \"Extra small text\",\n    },\n    sm: {\n      classes: \"text-sm\",\n      description: \"Small text\",\n    },\n    base: {\n      classes: \"text-base\",\n      description: \"Default text size\",\n    },\n    lg: {\n      classes: \"text-lg\",\n      description: \"Large text\",\n    },\n  },\n} as const;\n\nexport const KUMO_TEXT_DEFAULT_VARIANTS = {\n  variant: \"body\",\n  size: \"base\",\n} as const;\n\n/**\n * KUMO_TEXT_STYLING - Typography metadata for Figma generator\n *\n * This export provides structured styling information extracted from text.tsx\n * for use by the Figma plugin generator. It documents font sizes, weights,\n * colors, and font families used across all Text variants.\n *\n * Source of truth chain:\n * text.tsx (this file) → component-registry.json → text.ts (Figma generator)\n */\nexport const KUMO_TEXT_STYLING = {\n  fontSizes: {\n    xs: 12,\n    sm: 14,\n    base: 16,\n    lg: 18,\n    xl: 20,\n    \"2xl\": 24,\n    \"3xl\": 30,\n  },\n  fontWeights: {\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n  },\n  baseColor: \"text-kumo-default\",\n  variantColors: {\n    body: \"text-kumo-default\",\n    secondary: \"text-kumo-subtle\",\n    success: \"text-kumo-link\",\n    error: \"text-kumo-danger\",\n    mono: \"text-kumo-default\",\n    \"mono-secondary\": \"text-kumo-subtle\",\n  },\n  fontFamilies: {\n    default: \"sans-serif\",\n    mono: \"monospace\",\n  },\n} as const;\n\n// Derived types from KUMO_TEXT_VARIANTS\nexport type KumoTextVariant = keyof typeof KUMO_TEXT_VARIANTS.variant;\nexport type KumoTextSize = keyof typeof KUMO_TEXT_VARIANTS.size;\n\nexport interface KumoTextVariantsProps {\n  variant?: KumoTextVariant;\n  size?: KumoTextSize;\n}\n\nexport function textVariants({\n  variant = KUMO_TEXT_DEFAULT_VARIANTS.variant,\n  size = KUMO_TEXT_DEFAULT_VARIANTS.size,\n}: KumoTextVariantsProps = {}) {\n  return cn(\n    KUMO_TEXT_VARIANTS.variant[variant].classes,\n    KUMO_TEXT_VARIANTS.size[size].classes,\n  );\n}\n\n// Legacy types for backwards compatibility\ntype Heading = \"heading1\" | \"heading2\" | \"heading3\";\ntype Copy = \"body\" | \"secondary\" | \"success\" | \"error\";\ntype Monospace = \"mono\" | \"mono-secondary\";\ntype TextSize = KumoTextSize;\ntype TextVariant = KumoTextVariant;\n\n/** Valid HTML elements for the Text component's `as` prop. */\nexport type TextElement =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"p\"\n  | \"span\"\n  | \"label\"\n  | \"dt\"\n  | \"dd\"\n  | \"li\"\n  | \"figcaption\"\n  | \"legend\"\n  | \"pre\"\n  | \"code\"\n  | \"em\"\n  | \"strong\"\n  | \"small\"\n  | \"abbr\"\n  | \"time\";\n\ntype BaseTextProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  \"className\" | \"style\"\n> & {\n  DANGEROUS_className?: string;\n  DANGEROUS_style?: CSSProperties;\n};\n\ntype TextPropsInternal<Variant extends TextVariant = \"body\"> = BaseTextProps &\n  (Variant extends Copy\n    ? {\n        variant?: Variant;\n        bold?: boolean;\n        size?: TextSize;\n        truncate?: boolean;\n        /** Optional element override. Defaults to `<p>`. */\n        as?: TextElement;\n      }\n    : Variant extends Monospace\n      ? {\n          variant?: Variant;\n          bold?: never;\n          size?: \"lg\";\n          truncate?: boolean;\n          /** Optional element override. Defaults to `<span>`. */\n          as?: TextElement;\n        }\n      : Variant extends Heading\n        ? {\n            variant: Variant;\n            bold?: never;\n            size?: never;\n            truncate?: boolean;\n            /**\n             * Required for heading variants. Pick the element that reflects\n             * this text's place in the document outline (`\"h1\"` for a page\n             * title, `\"h2\"` for a section title, etc.) or `\"span\"` for\n             * decorative heading-styled text that is NOT a section heading.\n             *\n             * Previously optional (defaulted to `<span>`), which silently\n             * excluded real section headings from the document outline.\n             * Making it required surfaces the decision at the type level.\n             */\n            as: TextElement;\n          }\n        : never);\n\n/**\n * Text component props.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\" as=\"h1\">Page Title</Text>\n * <Text variant=\"body\">Default paragraph text.</Text>\n * <Text variant=\"secondary\" size=\"sm\">Muted helper text</Text>\n * <Text variant=\"error\">Something went wrong</Text>\n * <Text variant=\"mono\">console.log(\"code\")</Text>\n * ```\n */\nexport interface TextProps {\n  /**\n   * Text style variant. Determines color, font, and weight.\n   * - `\"heading1\"` — Large page title (30px, semibold)\n   * - `\"heading2\"` — Section title (24px, semibold)\n   * - `\"heading3\"` — Subsection title (18px, semibold)\n   * - `\"body\"` — Default body text\n   * - `\"secondary\"` — Muted text for secondary information\n   * - `\"success\"` — Success state text\n   * - `\"error\"` — Error state text\n   * - `\"mono\"` — Monospace text for code\n   * - `\"mono-secondary\"` — Muted monospace text\n   * @default \"body\"\n   */\n  variant?: KumoTextVariant;\n  /**\n   * Text size (only applies to body/secondary/success/error variants).\n   * - `\"xs\"` — 12px\n   * - `\"sm\"` — 14px\n   * - `\"base\"` — 16px\n   * - `\"lg\"` — 18px\n   * @default \"base\"\n   */\n  size?: KumoTextSize;\n  /** Whether to use bold font weight (only applies to body variants). */\n  bold?: boolean;\n  /** Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes. */\n  truncate?: boolean;\n  /**\n   * The HTML element to render. Accepts headings (`\"h1\"`–`\"h6\"`), block text\n   * (`\"p\"`, `\"pre\"`), inline text (`\"span\"`, `\"code\"`, `\"em\"`, `\"strong\"`,\n   * `\"small\"`, `\"abbr\"`, `\"time\"`), form-related (`\"label\"`, `\"legend\"`),\n   * list/definition (`\"dt\"`, `\"dd\"`, `\"li\"`), and `\"figcaption\"`.\n   *\n   * - **Required** for heading variants (`\"heading1\"`, `\"heading2\"`,\n   *   `\"heading3\"`) — pick the element that reflects this text's place in\n   *   the document outline, or `\"span\"` for decorative heading-styled text\n   *   that is not a section heading.\n   * - **Optional** for body variants (defaults to `\"p\"`) and monospace\n   *   variants (defaults to `\"span\"`).\n   */\n  as?: TextElement;\n  /** Text content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Typography component for rendering text with consistent styling.\n * Renders as `<p>` for body variants and `<span>` for headings/mono.\n * Use the `as` prop to set semantic HTML elements for proper document outlines.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\" as=\"h1\">Page Title</Text>\n * <Text variant=\"heading2\" as=\"h2\">Section Title</Text>\n * <Text>Default body text</Text>\n * ```\n */\nfunction _Text<Variant extends TextVariant = \"body\">(\n  {\n    variant = \"body\" as Variant,\n    bold = false,\n    size = \"base\",\n    truncate = false,\n    children,\n    DANGEROUS_className,\n    DANGEROUS_style,\n    as,\n    ...props\n  }: TextPropsInternal<Variant>,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const isCopy = [\"body\", \"secondary\", \"success\", \"error\"].includes(variant);\n  const isMono = [\"mono\", \"mono-secondary\"].includes(variant);\n\n  // Heading variants no longer auto-select h1/h2/h3 to avoid coupling visual\n  // presentation to semantic HTML. Use the `as` prop to set the appropriate\n  // heading level for your document outline (e.g., as=\"h2\").\n  const Component = useMemo(() => {\n    if (as) return as;\n    if ([\"mono\", \"mono-secondary\"].includes(variant)) return \"span\";\n    // Headings and body text default to span; use `as` for semantic elements\n    if ([\"heading1\", \"heading2\", \"heading3\"].includes(variant)) return \"span\";\n    return \"p\";\n  }, [variant, as]);\n\n  return (\n    <Component\n      // The dynamic `Component` tag creates an impossible intersection of ref\n      // types across all TextElement members. We widen to the common base\n      // (HTMLElement) which is safe — all text elements extend HTMLElement.\n      ref={ref as React.RefCallback<HTMLElement>}\n      className={cn(\n        \"text-kumo-default\",\n        KUMO_TEXT_VARIANTS.variant[variant].classes,\n        isCopy ? KUMO_TEXT_VARIANTS.size[size].classes : \"\",\n        isCopy && bold ? \"font-medium\" : \"\",\n        // Monospace fonts need to be 1pt smaller than body text to optically match\n        isMono &&\n          (size === \"lg\"\n            ? KUMO_TEXT_VARIANTS.size.base.classes\n            : KUMO_TEXT_VARIANTS.size.sm.classes),\n        truncate && \"truncate min-w-0\",\n        DANGEROUS_className,\n      )}\n      style={DANGEROUS_style}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n}\n\nexport const Text = forwardRef(_Text) as <Variant extends TextVariant = \"body\">(\n  props: TextPropsInternal<Variant> & {\n    ref?: ForwardedRef<ElementRef<\"span\">>;\n  },\n) => React.ReactElement;\n"],"names":["KUMO_TEXT_VARIANTS","_Text","variant","bold","size","truncate","children","DANGEROUS_className","DANGEROUS_style","as","props","ref","isCopy","isMono","Component","useMemo","jsx","cn","Text","forwardRef"],"mappings":";;;;AAWO,MAAMA,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AAsNA,SAASC,EACP;AAAA,EACE,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAS,CAAC,QAAQ,aAAa,WAAW,OAAO,EAAE,SAASV,CAAO,GACnEW,IAAS,CAAC,QAAQ,gBAAgB,EAAE,SAASX,CAAO,GAKpDY,IAAYC,EAAQ,MACpBN,MACA,CAAC,QAAQ,gBAAgB,EAAE,SAASP,CAAO,KAE3C,CAAC,YAAY,YAAY,UAAU,EAAE,SAASA,CAAO,IAAU,SAC5D,MACN,CAACA,GAASO,CAAE,CAAC;AAEhB,SACE,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MAIC,KAAAH;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAjB,EAAmB,QAAQE,CAAO,EAAE;AAAA,QACpCU,IAASZ,EAAmB,KAAKI,CAAI,EAAE,UAAU;AAAA,QACjDQ,KAAUT,IAAO,gBAAgB;AAAA;AAAA,QAEjCU,MACGT,MAAS,OACNJ,EAAmB,KAAK,KAAK,UAC7BA,EAAmB,KAAK,GAAG;AAAA,QACjCK,KAAY;AAAA,QACZE;AAAA,MAAA;AAAA,MAEF,OAAOC;AAAA,MACN,GAAGE;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMY,IAAOC,EAAWlB,CAAK;"}