@cloudflare/kumo 1.16.0 → 1.18.0

package/dist/chunks/table-inweecadl3her7pd.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { c as r } from "./cn-ct4n7r74mh8y0f48.js";
+import { C as f } from "./checkbox-kt1uojk2f9e0d0h1.js";
+const d = {
+  layout: {
+    auto: {
+      classes: "",
+      description: "Auto table layout - columns resize based on content"
+    },
+    fixed: {
+      classes: "table-fixed",
+      description: "Fixed table layout - columns have equal width, controlled via colgroup"
+    }
+  },
+  variant: {
+    default: {
+      classes: "",
+      description: "Default row variant"
+    },
+    selected: {
+      classes: "bg-kumo-tint",
+      description: "Selected row variant"
+    }
+  },
+  sticky: {
+    left: {
+      classes: "sticky left-0",
+      description: "Pin column to the left edge of the scroll container"
+    },
+    right: {
+      classes: "sticky right-0",
+      description: "Pin column to the right edge of the scroll container"
+    }
+  }
+}, h = (t, e) => {
+  const a = d.sticky[t].classes;
+  return r(a, e === "head" ? "z-2" : "z-1", "bg-kumo-base", t === "right" ? (
+    // Gradient fades from transparent on the left to opaque on the right
+    "before:pointer-events-none before:absolute before:inset-y-0 before:-left-6 before:w-6 before:bg-gradient-to-r before:from-transparent before:to-kumo-base"
+  ) : "before:pointer-events-none before:absolute before:inset-y-0 before:-right-6 before:w-6 before:bg-gradient-to-l before:from-transparent before:to-kumo-base");
+}, v = {
+  layout: "auto",
+  variant: "default"
+}, N = s(({ layout: t = "auto", ...e }, a) => {
+  const o = r(
+    "isolate w-full",
+    // isolate creates a stacking context so z-0/z-1/z-2 never leak out
+    d.layout[t].classes,
+    "[&_td]:border-b [&_td]:border-kumo-fill [&_tr:last-child_td]:border-b-0",
+    // Row border
+    "[&_td]:p-3",
+    // Cell padding
+    "[&_th]:border-b [&_th]:border-kumo-fill [&_th]:p-3 [&_th]:font-semibold [&_th]:text-base",
+    // Header styles
+    "[&_th]:bg-kumo-base",
+    // Header background color
+    "text-left text-kumo-default",
+    e.className
+  );
+  return /* @__PURE__ */ l("table", { ref: a, ...e, className: o });
+}), y = s(({ variant: t = "default", sticky: e, ...a }, o) => {
+  const n = r(
+    t === "compact" && "[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong",
+    e && "[&_th]:sticky [&_th]:top-0 [&_th]:z-1",
+    a.className
+  );
+  return /* @__PURE__ */ l("thead", { ref: o, ...a, className: n });
+}), u = s(({ sticky: t, ...e }, a) => {
+  const o = r(
+    "group relative",
+    t && h(t, "head"),
+    e.className
+  );
+  return /* @__PURE__ */ l("th", { ref: a, ...e, className: o });
+}), g = s(({ variant: t = v.variant, ...e }, a) => {
+  const o = r(
+    d.variant[t].classes,
+    e.className
+  );
+  return /* @__PURE__ */ l("tr", { ref: a, ...e, className: o });
+}), T = s((t, e) => /* @__PURE__ */ l("tbody", { ref: e, ...t })), m = s(({ sticky: t, ...e }, a) => {
+  const o = r(
+    t && h(t, "cell"),
+    e.className
+  );
+  return /* @__PURE__ */ l("td", { ref: a, ...e, className: o });
+}), k = s((t, e) => /* @__PURE__ */ l("tfoot", { ref: e, ...t })), p = s((t, e) => /* @__PURE__ */ l(
+  "button",
+  {
+    ref: e,
+    ...t,
+    type: "button",
+    "aria-label": "Resize column",
+    className: r(
+      "invisible h-full group-hover:visible",
+      // Make the handle invisible by default
+      "w-[10px]",
+      // Hitting area
+      "flex items-center justify-center",
+      // Center the handle
+      "cursor-col-resize touch-none select-none",
+      // Prevent selection and touch events
+      "absolute top-0 right-0",
+      // Position the handle
+      "m-0 bg-kumo-base p-0"
+      // Override the stratus button styles
+    ),
+    children: /* @__PURE__ */ l("span", { className: "h-5 w-[2px] rounded bg-kumo-hairline" })
+  }
+)), _ = s(
+  ({ checked: t, indeterminate: e, onValueChange: a, label: o, disabled: n, ...c }, i) => /* @__PURE__ */ l(
+    m,
+    {
+      ref: i,
+      ...c,
+      className: r("w-10 leading-none", c.className),
+      children: /* @__PURE__ */ l(
+        f,
+        {
+          checked: t,
+          indeterminate: e,
+          onCheckedChange: (b) => {
+            a?.(b);
+          },
+          "aria-label": o ?? "Select row",
+          disabled: n,
+          className: "relative before:absolute before:-inset-3 before:content-['']"
+        }
+      )
+    }
+  )
+), C = s(
+  ({ checked: t, indeterminate: e, onValueChange: a, label: o, disabled: n, ...c }, i) => /* @__PURE__ */ l(
+    u,
+    {
+      ref: i,
+      ...c,
+      className: r("w-10 leading-none", c.className),
+      children: /* @__PURE__ */ l(
+        f,
+        {
+          checked: t,
+          indeterminate: e,
+          onCheckedChange: (b) => {
+            a?.(b);
+          },
+          "aria-label": o ?? "Select all rows",
+          disabled: n,
+          className: "relative before:absolute before:-inset-3 before:content-['']"
+        }
+      )
+    }
+  )
+);
+N.displayName = "Table";
+T.displayName = "Table.Body";
+u.displayName = "Table.Head";
+g.displayName = "Table.Row";
+m.displayName = "Table.Cell";
+k.displayName = "Table.Footer";
+y.displayName = "Table.Header";
+p.displayName = "Table.ResizeHandle";
+_.displayName = "Table.CheckCell";
+C.displayName = "Table.CheckHead";
+const R = Object.assign(N, {
+  Header: y,
+  Head: u,
+  Row: g,
+  Body: T,
+  Cell: m,
+  CheckCell: _,
+  CheckHead: C,
+  Footer: k,
+  ResizeHandle: p
+});
+export {
+  v as K,
+  R as T,
+  d as a
+};
+//# sourceMappingURL=table-inweecadl3her7pd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-inweecadl3her7pd.js","sources":["../../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils\";\nimport { Checkbox } 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 */\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 fade =\n    side === \"right\"\n      ? // Gradient fades from transparent on the left to opaque on the right\n        \"before:pointer-events-none before:absolute before:inset-y-0 before:-left-6 before:w-6 before:bg-gradient-to-r before:from-transparent before:to-kumo-base\"\n      : \"before:pointer-events-none before:absolute before:inset-y-0 before:-right-6 before:w-6 before:bg-gradient-to-l before:from-transparent before:to-kumo-base\";\n\n  const z = element === \"head\" ? \"z-2\" : \"z-1\";\n\n  return cn(base, z, \"bg-kumo-base\", 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-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 className = cn(\n    variant === \"compact\" &&\n      \"[&_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 <thead ref={ref} {...props} className={className} />;\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      )}\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    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    { checked, indeterminate, onValueChange, label, disabled, ...props },\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) => {\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    onValueChange?: (checked: boolean) => void;\n    label?: string;\n    disabled?: boolean;\n  }\n>(\n  (\n    { checked, indeterminate, onValueChange, label, disabled, ...props },\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) => {\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} onValueChange={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)} onValueChange={() => 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","cn","KUMO_TABLE_DEFAULT_VARIANTS","TableRoot","forwardRef","layout","props","ref","className","jsx","TableHeader","variant","sticky","TableHead","TableRow","TableBody","TableCell","TableFooter","TableResizeHandle","TableCheckCell","checked","indeterminate","onValueChange","label","disabled","Checkbox","newChecked","TableCheckHead","Table"],"mappings":"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"}

package/dist/chunks/tabs-e7eh7l3mpk3xgmwq.js

@@ -0,0 +1,92 @@
+"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-k7bzesq81ie36nya.js";
+const V = {
+  variant: "segmented"
+};
+function z({
+  tabs: u,
+  value: i,
+  selectedValue: m,
+  onValueChange: c,
+  activateOnFocus: b,
+  className: g,
+  listClassName: h,
+  indicatorClassName: v,
+  variant: n = V.variant
+}) {
+  const r = u ?? [];
+  if (r.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";
+  return /* @__PURE__ */ d(
+    x,
+    {
+      ...p,
+      className: s("relative isolate min-w-0 font-medium", g),
+      onValueChange: (e) => {
+        const k = String(e);
+        c?.(k);
+      },
+      children: [
+        t && /* @__PURE__ */ a("div", { className: "absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-lg bg-kumo-recessed" }),
+        /* @__PURE__ */ d(
+          T,
+          {
+            activateOnFocus: b,
+            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-line/70",
+              o && "h-7 gap-4 border-b border-kumo-hairline pb-2",
+              h
+            ),
+            children: [
+              r.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",
+                    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",
+                    e.className
+                  ),
+                  children: e.label
+                },
+                e.value
+              )),
+              /* @__PURE__ */ a(
+                N,
+                {
+                  render: (e) => /* @__PURE__ */ a(
+                    "div",
+                    {
+                      ...e,
+                      className: s(
+                        "absolute z-1 left-0",
+                        "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-hairline",
+                        o && "bottom-0 h-0.5 bg-kumo-brand",
+                        v
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as T
+};
+//# sourceMappingURL=tabs-e7eh7l3mpk3xgmwq.js.map

package/dist/chunks/{tabs-n0t7iro7wr0pzgk2.js.map → tabs-e7eh7l3mpk3xgmwq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tabs-n0t7iro7wr0pzgk2.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-8.5 -translate-y-1/2 rounded-lg bg-kumo-surface\" />\n      )}\n      <TabsPrimitive.List\n        activateOnFocus={activateOnFocus}\n        className={cn(\n          \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"h-8.5 rounded-lg bg-kumo-recessed px-px\",\n          isUnderline && \"h-7 gap-4 border-b border-kumo-ring 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-ring\",\n              isSegmented &&\n                \"my-px rounded-lg 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          className={cn(\n            \"absolute z-1 transition-[left,width,transform] duration-200 ease-out\",\n            \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n            \"left-(--active-tab-left) w-(--active-tab-width)\",\n            isSegmented &&\n              \"top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-kumo-base shadow-sm ring ring-kumo-ring\",\n            isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n            indicatorClassName,\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"],"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,mFAAA,CAAmF;AAAA,QAEpG,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,WAAWP;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACAJ,KACE;AAAA,oBACFC,KAAe;AAAA,oBACfP;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"tabs-e7eh7l3mpk3xgmwq.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-line/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-hairline\",\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-gzt92mlji1lug13d.js → text-nmyi1rkwdj37f30f.js}

@@ -1,7 +1,7 @@
 "use client";
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as f, useMemo as p } from "react";
-import { c as g } from "./cn-ct4n7r74mh8y0f48.js";
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as p, useMemo as g } from "react";
+import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
 const s = {
   variant: {
     heading1: {
@@ -60,38 +60,40 @@ const s = {
     }
   }
 };
-function b({
+function h({
   variant: e = "body",
   bold: i = !1,
   size: o = "base",
-  children: c,
-  DANGEROUS_className: r,
-  DANGEROUS_style: a,
+  truncate: c = !1,
+  children: r,
+  DANGEROUS_className: a,
+  DANGEROUS_style: l,
   as: t,
-  ...l
-}, d) {
-  const n = ["body", "secondary", "success", "error"].includes(e), m = ["mono", "mono-secondary"].includes(e), u = p(() => t || (e === "heading1" ? "h1" : e === "heading2" ? "h2" : e === "heading3" ? "h3" : ["mono", "mono-secondary"].includes(e) ? "span" : "p"), [e, t]);
-  return /* @__PURE__ */ x(
-    u,
+  ...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]);
+  return /* @__PURE__ */ f(
+    x,
     {
-      ref: d,
-      className: g(
+      ref: m,
+      className: b(
         "text-kumo-default",
         s.variant[e].classes,
         n ? s.size[o].classes : "",
         n && i ? "font-medium" : "",
         // Monospace fonts need to be 1pt smaller than body text to optically match
-        m && (o === "lg" ? s.size.base.classes : s.size.sm.classes),
-        r
+        u && (o === "lg" ? s.size.base.classes : s.size.sm.classes),
+        c && "truncate min-w-0",
+        a
       ),
-      style: a,
-      ...l,
-      children: c
+      style: l,
+      ...d,
+      children: r
     }
   );
 }
-const M = f(b);
+const T = p(h);
 export {
-  M as T
+  T
 };
-//# sourceMappingURL=text-gzt92mlji1lug13d.js.map
+//# sourceMappingURL=text-nmyi1rkwdj37f30f.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-nmyi1rkwdj37f30f.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  type ElementType,\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\ntype BaseTextProps = Omit<\n  ComponentPropsWithoutRef<\"span\">,\n  \"className\" | \"style\"\n> & {\n  DANGEROUS_className?: string;\n  DANGEROUS_style?: CSSProperties;\n  as?: ElementType;\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      }\n    : Variant extends Monospace\n      ? {\n          variant?: Variant;\n          bold?: never;\n          size?: \"lg\";\n          truncate?: boolean;\n        }\n      : Variant extends Heading\n        ? {\n            variant?: Variant;\n            bold?: never;\n            size?: never;\n            truncate?: boolean;\n          }\n        : never);\n\n/**\n * Text component props.\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\">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  /** The HTML element type to render as (e.g. `\"span\"`, `\"p\"`, `\"h1\"`). Auto-selected based on variant if omitted. */\n  as?: ElementType;\n  /** Text content. */\n  children?: React.ReactNode;\n}\n\n/**\n * Typography component for rendering text with consistent styling.\n * Automatically selects the appropriate HTML element based on variant\n * (`h1`/`h2`/`h3` for headings, `p` for body, `span` for mono).\n *\n * @example\n * ```tsx\n * <Text variant=\"heading1\">Dashboard</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<HTMLHeadingElement>,\n) {\n  const isCopy = [\"body\", \"secondary\", \"success\", \"error\"].includes(variant);\n  const isMono = [\"mono\", \"mono-secondary\"].includes(variant);\n\n  const Component = useMemo(() => {\n    if (as) return as;\n    if (variant === \"heading1\") return \"h1\";\n    if (variant === \"heading2\") return \"h2\";\n    if (variant === \"heading3\") return \"h3\";\n    if ([\"mono\", \"mono-secondary\"].includes(variant)) return \"span\";\n    return \"p\";\n  }, [variant, as]);\n\n  return (\n    <Component\n      ref={ref}\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":";;;;AAYO,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;AAmKA,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,GAEpDY,IAAYC,EAAQ,MACpBN,MACAP,MAAY,aAAmB,OAC/BA,MAAY,aAAmB,OAC/BA,MAAY,aAAmB,OAC/B,CAAC,QAAQ,gBAAgB,EAAE,SAASA,CAAO,IAAU,SAClD,MACN,CAACA,GAASO,CAAE,CAAC;AAEhB,SACE,gBAAAO;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,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;"}