@cloudflare/kumo 1.18.0 → 1.19.0

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

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as a, jsxs as u, Fragment as C } from "react/jsx-runtime";
+import { forwardRef as l, isValidElement as k, cloneElement as v } from "react";
+import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
+const m = {
+  state: {
+    default: {
+      classes: "text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default hover:font-medium",
+      description: "Inactive section link"
+    },
+    active: {
+      classes: "text-kumo-default font-medium",
+      description: "Currently visible / active section"
+    }
+  }
+}, g = {
+  state: "default"
+}, y = "group relative block w-full truncate rounded-md py-1 pl-5 text-sm text-left no-underline transition-all duration-500", h = "absolute inset-y-0 left-0.5 w-0.5 rounded-full transition-all duration-200 bg-kumo-brand", d = l(
+  ({ className: e, "aria-label": t = "Table of contents", ...s }, n) => /* @__PURE__ */ a("nav", { ref: n, "aria-label": t, className: e, ...s })
+), f = l(({ className: e, ...t }, s) => /* @__PURE__ */ a(
+  "p",
+  {
+    ref: s,
+    className: o(
+      "mb-3 text-xs font-semibold tracking-wide text-kumo-subtle uppercase",
+      e
+    ),
+    ...t
+  }
+)), b = l(({ className: e, ...t }, s) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: s,
+    className: o(
+      "relative space-y-1.5 before:absolute before:inset-y-0 before:left-0.5 before:w-px before:bg-kumo-line",
+      e
+    ),
+    ...t
+  }
+)), p = l(({ active: e = !1, className: t, children: s, render: n, ...i }, r) => {
+  const N = e ? m.state.active.classes : m.state.default.classes, x = o(y, N, t), O = /* @__PURE__ */ u(C, { children: [
+    /* @__PURE__ */ a(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: o(
+          h,
+          e ? "opacity-100" : "opacity-0 group-hover:opacity-60"
+        )
+      }
+    ),
+    /* @__PURE__ */ a("span", { className: "block min-w-0 leading-5", children: s })
+  ] }), c = {
+    ref: r,
+    "aria-current": e ? "true" : void 0,
+    className: x,
+    children: O,
+    ...i
+  };
+  return n && k(n) ? v(n, c) : /* @__PURE__ */ a("a", { ...c });
+}), T = l(({ label: e, href: t, className: s, children: n, ...i }, r) => /* @__PURE__ */ u("div", { ref: r, className: o("mt-3", s), ...i, children: [
+  t ? /* @__PURE__ */ a(
+    "a",
+    {
+      href: t,
+      className: "mb-1.5 block pl-5 text-xs font-medium text-kumo-subtle no-underline hover:text-kumo-default",
+      children: e
+    }
+  ) : /* @__PURE__ */ a("p", { className: "mb-1.5 pl-5 text-xs font-medium text-kumo-subtle", children: e }),
+  /* @__PURE__ */ a("div", { className: "space-y-1.5 pl-3", children: n })
+] }));
+d.displayName = "TableOfContents";
+f.displayName = "TableOfContents.Title";
+b.displayName = "TableOfContents.List";
+p.displayName = "TableOfContents.Item";
+T.displayName = "TableOfContents.Group";
+const I = Object.assign(d, {
+  Title: f,
+  List: b,
+  Item: p,
+  Group: T
+});
+export {
+  m as K,
+  I as T,
+  g as a
+};
+//# sourceMappingURL=table-of-contents-f813ivi7ta23vqdm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-of-contents-f813ivi7ta23vqdm.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:bg-kumo-tint hover:text-kumo-default hover:font-medium\",\n      description: \"Inactive section link\",\n    },\n    active: {\n      classes: \"text-kumo-default font-medium\",\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  \"group relative block w-full truncate rounded-md py-1 pl-5 text-sm text-left no-underline transition-all duration-500\";\n\nconst INDICATOR_BASE =\n  \"absolute inset-y-0 left-0.5 w-0.5 rounded-full transition-all duration-200 bg-kumo-brand\";\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<HTMLDivElement>;\n\nconst TableOfContentsList = forwardRef<\n  HTMLDivElement,\n  TableOfContentsListProps\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"relative space-y-1.5 before:absolute before:inset-y-0 before:left-0.5 before:w-px before:bg-kumo-line\",\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    <>\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          INDICATOR_BASE,\n          active ? \"opacity-100\" : \"opacity-0 group-hover:opacity-60\",\n        )}\n      />\n      <span className=\"block min-w-0 leading-5\">{children}</span>\n    </>\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 cloneElement(render, sharedProps);\n  }\n\n  // Default to anchor tag\n  // oxlint-disable-next-line anchor-has-content -- children are in sharedProps\n  return <a {...sharedProps} />;\n});\n\nexport interface TableOfContentsGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"title\"\n> {\n  /** Label displayed above the group's items. */\n  label: string;\n  /** URL the group label links to. */\n  href?: string;\n}\n\nconst TableOfContentsGroup = forwardRef<\n  HTMLDivElement,\n  TableOfContentsGroupProps\n>(({ label, href, className, children, ...props }, ref) => (\n  <div ref={ref} className={cn(\"mt-3\", className)} {...props}>\n    {href ? (\n      <a\n        href={href}\n        className=\"mb-1.5 block pl-5 text-xs font-medium text-kumo-subtle no-underline hover:text-kumo-default\"\n      >\n        {label}\n      </a>\n    ) : (\n      <p className=\"mb-1.5 pl-5 text-xs font-medium text-kumo-subtle\">\n        {label}\n      </p>\n    )}\n    <div className=\"space-y-1.5 pl-3\">{children}</div>\n  </div>\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","INDICATOR_BASE","TableOfContentsRoot","forwardRef","className","ariaLabel","props","ref","TableOfContentsTitle","jsx","cn","TableOfContentsList","TableOfContentsItem","active","children","render","stateClasses","combinedClassName","innerContent","jsxs","Fragment","sharedProps","isValidElement","cloneElement","TableOfContentsGroup","label","href","TableOfContents"],"mappings":"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"}

package/dist/chunks/table-olwwulga2l3hdwlx.js

@@ -0,0 +1,189 @@
+"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 = {
+  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 = (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 = {
+  layout: "auto",
+  variant: "default"
+}, g = n(({ layout: e = "auto", ...a }, t) => {
+  const o = r(
+    "isolate w-full",
+    // isolate creates a stacking context so z-0/z-1/z-2 never leak out
+    d.layout[e].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",
+    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(
+    "group/header",
+    c && "[&_th]:bg-kumo-elevated [&_th]:py-2 text-xs text-kumo-strong",
+    a && "[&_th]:sticky [&_th]:top-0 [&_th]:z-1",
+    t.className
+  );
+  return /* @__PURE__ */ s(
+    "thead",
+    {
+      ref: o,
+      ...t,
+      className: l,
+      ...c && { "data-compact": "" }
+    }
+  );
+}), m = n(({ sticky: e, ...a }, t) => {
+  const o = r(
+    "group relative",
+    e && h(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,
+    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"),
+    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(
+  "button",
+  {
+    ref: a,
+    ...e,
+    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__ */ 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,
+    {
+      ref: b,
+      ...l,
+      className: r("w-10 leading-none", l.className),
+      children: /* @__PURE__ */ s(
+        f,
+        {
+          checked: e,
+          indeterminate: a,
+          onCheckedChange: (i) => {
+            t?.(i);
+          },
+          "aria-label": o ?? "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,
+    {
+      ref: b,
+      ...l,
+      className: r("w-10 leading-none", l.className),
+      children: /* @__PURE__ */ s(
+        f,
+        {
+          checked: e,
+          indeterminate: a,
+          onCheckedChange: (i) => {
+            t?.(i);
+          },
+          "aria-label": o ?? "Select all rows",
+          disabled: c,
+          className: "relative before:absolute before:-inset-3 before:content-['']"
+        }
+      )
+    }
+  )
+);
+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";
+C.displayName = "Table.CheckCell";
+_.displayName = "Table.CheckHead";
+const A = Object.assign(g, {
+  Header: p,
+  Head: m,
+  Row: k,
+  Body: N,
+  Cell: u,
+  CheckCell: C,
+  CheckHead: _,
+  Footer: y,
+  ResizeHandle: T
+});
+export {
+  v as K,
+  A as T,
+  d as a
+};
+//# sourceMappingURL=table-olwwulga2l3hdwlx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-olwwulga2l3hdwlx.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 *\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-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      )}\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","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","onValueChange","label","disabled","Checkbox","newChecked","TableCheckHead","Table"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 "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";
+import { b9 as x, ba as T, bb as w, bc as N } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
 const V = {
   variant: "segmented"
 };
@@ -40,7 +40,7 @@ function z({
             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",
+              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
             ),
@@ -71,7 +71,7 @@ function z({
                         "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",
+                        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
                       )
@@ -89,4 +89,4 @@ function z({
 export {
   z as T
 };
-//# sourceMappingURL=tabs-e7eh7l3mpk3xgmwq.js.map
+//# sourceMappingURL=tabs-lohcglgppp6gj0hp.js.map

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

@@ -1 +1 @@
-{"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;"}
+{"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;"}

package/dist/chunks/{toast-bpz6iaq54u9jmuu8.js → toast-dg52x89yd231mxhe.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as o, jsx as r, Fragment as E } from "react/jsx-runtime";
 import { c } from "./cn-ct4n7r74mh8y0f48.js";
-import { B as w } from "./button-cdxnqcgzwko8ooha.js";
+import { B as w } from "./button-oaqi7ykdisyskoos.js";
 import { u as x } from "./portal-provider-hwmkdmkpvct0cb76.js";
 import * as a from "react";
-import { $ as b, bt as y, a1 as k, a0 as F, a3 as V, bu as T, bv as _, a4 as H, bw as N, U as C } from "./vendor-base-ui-k7bzesq81ie36nya.js";
+import { $ as b, bt as y, a1 as k, a0 as F, a3 as V, bu as T, bv as _, a4 as H, bw as N, U as C } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
 const s = a.forwardRef((t, e) => {
   const {
     alt: n,
@@ -222,7 +222,7 @@ function X({
 } = {}) {
   return c(
     // Base styles for toast root
-    "rounded-xl ring ring-kumo-hairline bg-clip-padding p-4 shadow-lg",
+    "rounded-xl ring ring-kumo-line bg-clip-padding p-4 shadow-lg",
     // Apply variant styles from KUMO_TOAST_VARIANTS
     h.variant[t].classes
   );
@@ -360,4 +360,4 @@ export {
   Q as c,
   B as u
 };
-//# sourceMappingURL=toast-bpz6iaq54u9jmuu8.js.map
+//# sourceMappingURL=toast-dg52x89yd231mxhe.js.map