@cloudflare/kumo 2.3.0 → 2.4.0

package/dist/chunks/{table-c6qemc2jmv22cv3p.js.map → table-e1te1im2tt2ez05y.js.map}

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

package/dist/chunks/{table-of-contents-fzyv7uhnnyr13dqu.js → table-of-contents-jco9kvt48d34dwsw.js}

@@ -16,52 +16,56 @@ const m = {
 }, A = {
   state: "default"
 }, p = "block w-full truncate border-l-2 border-transparent py-0.5 pl-4 text-sm text-left no-underline", T = o(
-  ({ className: t, "aria-label": s = "Table of contents", ...l }, a) => /* @__PURE__ */ e("nav", { ref: a, "aria-label": s, className: t, ...l })
-), N = o(({ className: t, ...s }, l) => /* @__PURE__ */ e(
+  ({ className: t, "aria-label": a = "Table of contents", ...s }, l) => /* @__PURE__ */ e("nav", { ref: l, "aria-label": a, className: t, ...s })
+), N = o(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   "p",
   {
-    ref: l,
+    ref: s,
     className: n(
       "mb-3 text-xs font-semibold tracking-wide text-kumo-subtle uppercase",
       t
     ),
-    ...s
+    ...a
   }
-)), x = o(({ className: t, ...s }, l) => /* @__PURE__ */ e(
+)), C = o(({ className: t, ...a }, s) => /* @__PURE__ */ e(
   "ul",
   {
-    ref: l,
+    ref: s,
     className: n(
       "flex flex-col gap-2 border-l-2 border-kumo-hairline",
       t
     ),
-    ...s
+    ...a
   }
-)), C = o(({ active: t = !1, className: s, children: l, render: a, ...i }, c) => {
-  const r = t ? m.state.active.classes : m.state.default.classes, d = n(p, r, s), u = {
-    ref: c,
+)), x = o(({ active: t = !1, className: a, children: s, render: l, ...i }, r) => {
+  const c = t ? m.state.active.classes : m.state.default.classes, u = n(p, c, a), d = {
+    ref: r,
     "aria-current": t ? "true" : void 0,
-    className: d,
-    children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: l }),
+    "data-kumo-component": "TableOfContents",
+    "data-kumo-part": "item",
+    className: u,
+    children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: s }),
     ...i
   };
-  return a && k(a) ? /* @__PURE__ */ e("li", { className: "-ml-0.5", children: h(a, u) }) : /* @__PURE__ */ e("li", { className: "-ml-0.5", children: /* @__PURE__ */ e("a", { ...u }) });
-}), b = "flex flex-col gap-2 border-l-2 border-kumo-hairline [&>li>a]:pl-7 [&>li>button]:pl-7", O = o(({ label: t, href: s, active: l = !1, className: a, children: i, ...c }, r) => {
-  if (s) {
-    const d = l ? m.state.active.classes : m.state.default.classes;
+  return l && k(l) ? /* @__PURE__ */ e("li", { className: "-ml-0.5", children: h(l, d) }) : /* @__PURE__ */ e("li", { className: "-ml-0.5", children: /* @__PURE__ */ e("a", { ...d }) });
+}), b = "flex flex-col gap-2 border-l-2 border-kumo-hairline [&>li>a]:pl-7 [&>li>button]:pl-7", O = o(({ label: t, href: a, active: s = !1, className: l, children: i, ...r }, c) => {
+  if (a) {
+    const u = s ? m.state.active.classes : m.state.default.classes;
     return /* @__PURE__ */ f(
       "li",
       {
-        ref: r,
-        className: n("-ml-0.5 flex flex-col gap-2", a),
-        ...c,
+        ref: c,
+        className: n("-ml-0.5 flex flex-col gap-2", l),
+        ...r,
         children: [
           /* @__PURE__ */ e(
             "a",
             {
-              href: s,
-              "aria-current": l ? "true" : void 0,
-              className: n(p, d),
+              href: a,
+              "aria-current": s ? "true" : void 0,
+              "data-kumo-component": "TableOfContents",
+              "data-kumo-part": "group-link",
+              className: n(p, u),
               children: /* @__PURE__ */ e("span", { className: "block min-w-0 leading-5", children: t })
             }
           ),
@@ -73,9 +77,9 @@ const m = {
   return /* @__PURE__ */ f(
     "li",
     {
-      ref: r,
-      className: n("-ml-0.5 flex flex-col gap-2", a),
-      ...c,
+      ref: c,
+      className: n("-ml-0.5 flex flex-col gap-2", l),
+      ...r,
       children: [
         /* @__PURE__ */ e("p", { className: "py-0.5 pl-4 text-sm leading-5 font-medium text-kumo-subtle", children: t }),
         /* @__PURE__ */ e("ul", { className: n(b), children: i })
@@ -85,13 +89,13 @@ const m = {
 });
 T.displayName = "TableOfContents";
 N.displayName = "TableOfContents.Title";
-x.displayName = "TableOfContents.List";
-C.displayName = "TableOfContents.Item";
+C.displayName = "TableOfContents.List";
+x.displayName = "TableOfContents.Item";
 O.displayName = "TableOfContents.Group";
 const S = Object.assign(T, {
   Title: N,
-  List: x,
-  Item: C,
+  List: C,
+  Item: x,
   Group: O
 });
 export {
@@ -99,4 +103,4 @@ export {
   S as T,
   A as a
 };
-//# sourceMappingURL=table-of-contents-fzyv7uhnnyr13dqu.js.map
+//# sourceMappingURL=table-of-contents-jco9kvt48d34dwsw.js.map

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

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

package/dist/chunks/{tabs-f0ztlooi91ko9g04.js → tabs-hice1yy5q2t889z8.js}

@@ -2,12 +2,12 @@
 import { jsxs as x, jsx as p } from "react/jsx-runtime";
 import { useRef as b, useState as z, useEffect as D } from "react";
 import { c } from "./cn-ct4n7r74mh8y0f48.js";
-import { bf as N, bg as y, bh as L, bi as O } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
+import { bg as N, bh as y, bi as L, bj as O } from "./vendor-base-ui-knphx7dts1vm1x37.js";
 const w = {
   variant: "segmented",
   size: "base"
 };
-function _({
+function M({
   tabs: s,
   value: a,
   selectedValue: n,
@@ -57,6 +57,8 @@ function _({
               g.map((i) => /* @__PURE__ */ p(
                 L,
                 {
+                  "data-kumo-component": "Tabs",
+                  "data-kumo-part": "tab",
                   value: i.value,
                   render: i.render,
                   className: c(
@@ -147,6 +149,6 @@ function V(s) {
   }, [s]), { ref: a, isOverflowing: n };
 }
 export {
-  _ as T
+  M as T
 };
-//# sourceMappingURL=tabs-f0ztlooi91ko9g04.js.map
+//# sourceMappingURL=tabs-hice1yy5q2t889z8.js.map

package/dist/chunks/tabs-hice1yy5q2t889z8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-hice1yy5q2t889z8.js","sources":["../../src/components/tabs/tabs.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type MouseEvent, type PointerEvent, 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  size: [\"base\", \"sm\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n  variant: \"segmented\",\n  size: \"base\",\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   * Tab size.\n   * - `\"base\"` — Default size (h-9, text-base)\n   * - `\"sm\"` — Compact size (h-6.5, text-xs) — matches Input size=\"sm\"\n   * @default \"base\"\n   */\n  size?: (typeof KUMO_TABS_VARIANTS.size)[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  size = KUMO_TABS_DEFAULT_VARIANTS.size,\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  const isSm = size === \"sm\";\n  const { ref: listRef, isOverflowing } = useOverflowDetect(isSegmented);\n  const bindDrag = useHorizontalDragScroll(listRef, isOverflowing);\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={cn(\"absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-kumo-recessed\", isSm ? \"h-6.5\" : \"h-9\")} />\n      )}\n      <TabsPrimitive.List\n        ref={listRef}\n        activateOnFocus={activateOnFocus}\n        data-overflowing={isOverflowing ? \"\" : undefined}\n        {...bindDrag()}\n        className={cn(\n          \"relative flex min-w-0 shrink items-stretch\",\n          isSegmented && \"kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70 [--scroll-fade-width:3rem]\",\n          isSegmented && (isSm ? \"h-6.5 rounded-md\" : \"h-9\"),\n          isOverflowing && \"cursor-grab active:cursor-grabbing\",\n          isUnderline && \"gap-4 border-b border-kumo-hairline pb-2\",\n          isUnderline && (isSm ? \"h-6.5\" : \"h-7.5\"),\n          listClassName,\n        )}\n      >\n        {items.map((tab) => (\n          <TabsPrimitive.Tab\n            key={tab.value}\n            data-kumo-component=\"Tabs\"\n            data-kumo-part=\"tab\"\n            value={tab.value}\n            render={tab.render}\n            className={cn(\n              \"relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\n              isOverflowing ? \"cursor-grab active:cursor-grabbing\" : \"cursor-pointer\",\n              isSm ? \"text-xs\" : \"text-base\",\n              isSegmented &&\n                \"my-0.5 rounded-md text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset\",\n              isSegmented && (isSm ? \"px-2\" : \"px-2.5\"),\n              isUnderline &&\n                \"text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default\",\n              isUnderline && (isSm ? \"px-1.5 py-2.5\" : \"px-2 py-3\"),\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                  cn(\"top-(--active-tab-top) h-(--active-tab-height) bg-kumo-base shadow-sm ring ring-kumo-line\", isSm ? \"rounded\" : \"rounded-md\"),\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\n// ─── Horizontal drag-to-scroll ────────────────────────────────────────\n\n/**\n * Enables mouse drag to horizontally scroll the tab list.\n * Touch devices keep native horizontal overflow scrolling and inertia.\n */\nfunction useHorizontalDragScroll(\n  ref: React.RefObject<HTMLElement | null>,\n  enabled: boolean,\n) {\n  const dragState = useRef<{\n    pointerId: number;\n    startX: number;\n    scrollLeft: number;\n    dragging: boolean;\n  } | null>(null);\n  const shouldSuppressClick = useRef(false);\n\n  return () => ({\n    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      if (!el || !enabled) return;\n      if (event.pointerType !== \"mouse\" || event.button !== 0) return;\n\n      dragState.current = {\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        scrollLeft: el.scrollLeft,\n        dragging: false,\n      };\n      shouldSuppressClick.current = false;\n    },\n    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !enabled || !state || state.pointerId !== event.pointerId) return;\n\n      const movementX = event.clientX - state.startX;\n      if (!state.dragging) {\n        if (Math.abs(movementX) <= 3) return;\n        state.dragging = true;\n        shouldSuppressClick.current = true;\n        el.setPointerCapture(event.pointerId);\n      }\n\n      event.preventDefault();\n      el.scrollLeft = state.scrollLeft - movementX;\n    },\n    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n      if (shouldSuppressClick.current) {\n        window.setTimeout(() => {\n          shouldSuppressClick.current = false;\n        }, 0);\n      }\n    },\n    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => {\n      const el = ref.current;\n      const state = dragState.current;\n      if (!el || !state || state.pointerId !== event.pointerId) return;\n\n      dragState.current = null;\n      if (el.hasPointerCapture(event.pointerId)) {\n        el.releasePointerCapture(event.pointerId);\n      }\n    },\n    onClickCapture: (event: MouseEvent<HTMLElement>) => {\n      if (!shouldSuppressClick.current) {\n        return;\n      }\n      event.preventDefault();\n      event.stopPropagation();\n      shouldSuppressClick.current = false;\n    },\n  });\n}\n\n// ─── Overflow detection ───────────────────────────────────────────────\n\n/**\n * Detects whether the element's content overflows horizontally.\n * Returns a ref to attach and a boolean for conditional rendering.\n * The `data-overflowing` attribute drives the scroll-fade CSS.\n */\nfunction useOverflowDetect(enabled: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  useEffect(() => {\n    if (!enabled) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const check = () => setIsOverflowing(el.scrollWidth > el.clientWidth);\n\n    const ro = new ResizeObserver(check);\n    ro.observe(el);\n    check();\n\n    return () => ro.disconnect();\n  }, [enabled]);\n\n  return { ref, isOverflowing };\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","size","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","isSm","listRef","isOverflowing","useOverflowDetect","bindDrag","useHorizontalDragScroll","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator","props","ref","enabled","dragState","useRef","shouldSuppressClick","event","el","state","movementX","setIsOverflowing","useState","useEffect","check","ro"],"mappings":"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"}

package/dist/chunks/{toast-ejfm5cbt9yulqhol.js → toast-kvbgct0jvfmn4mas.js}

@@ -2,15 +2,15 @@
 import { jsxs as i, jsx as l, Fragment as x } from "react/jsx-runtime";
 import { c as m } from "./cn-ct4n7r74mh8y0f48.js";
 import { r as d } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
-import { B as b } from "./button-fxdpoacmq5rv1adk.js";
+import { B as b } from "./button-mnrxu6dud2x5js5b.js";
 import { u as y } from "./portal-provider-hwmkdmkpvct0cb76.js";
 import * as a from "react";
-import { a0 as k, bx as V, a2 as F, a1 as T, a4 as _, by as H, bz as N, a5 as C, bA as S, V as Y } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
-const s = a.forwardRef((t, e) => {
+import { a0 as k, bE as F, a2 as V, a1 as T, a4 as _, bF as H, bG as N, a5 as C, bH as S, V as Y } from "./vendor-base-ui-knphx7dts1vm1x37.js";
+const o = a.forwardRef((t, e) => {
   const {
     alt: n,
     color: r = "currentColor",
-    size: o = "1em",
+    size: s = "1em",
     weight: Z = "regular",
     mirrored: M = !1,
     children: L,
@@ -22,8 +22,8 @@ const s = a.forwardRef((t, e) => {
     {
       ref: e,
       xmlns: "http://www.w3.org/2000/svg",
-      width: o,
-      height: o,
+      width: s,
+      height: s,
       fill: r,
       viewBox: "0 0 256 256",
       transform: M ? "scale(-1, 1)" : void 0,
@@ -34,7 +34,7 @@ const s = a.forwardRef((t, e) => {
     E.get(Z)
   );
 });
-s.displayName = "SSRBase";
+o.displayName = "SSRBase";
 const I = /* @__PURE__ */ new Map([
   [
     "bold",
@@ -60,7 +60,7 @@ const I = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("path", { d: "M170.83,101.17a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17ZM228,128A100,100,0,1,1,128,28,100.11,100.11,0,0,1,228,128Zm-8,0a92,92,0,1,0-92,92A92.1,92.1,0,0,0,220,128Z" }))
   ]
-]), u = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(s, { ref: e, ...t, weights: I }));
+]), u = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(o, { ref: e, ...t, weights: I }));
 u.displayName = "CheckCircleIcon";
 const R = /* @__PURE__ */ new Map([
   [
@@ -87,7 +87,7 @@ const R = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("path", { d: "M140,176a4,4,0,0,1-4,4,12,12,0,0,1-12-12V128a4,4,0,0,0-4-4,4,4,0,0,1,0-8,12,12,0,0,1,12,12v40a4,4,0,0,0,4,4A4,4,0,0,1,140,176ZM124,92a8,8,0,1,0-8-8A8,8,0,0,0,124,92Zm104,36A100,100,0,1,1,128,28,100.11,100.11,0,0,1,228,128Zm-8,0a92,92,0,1,0-92,92A92.1,92.1,0,0,0,220,128Z" }))
   ]
-]), g = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(s, { ref: e, ...t, weights: R }));
+]), g = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(o, { ref: e, ...t, weights: R }));
 g.displayName = "InfoIcon";
 const $ = /* @__PURE__ */ new Map([
   [
@@ -120,7 +120,7 @@ const $ = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("path", { d: "M233.34,190.09,145.88,38.22h0a20.75,20.75,0,0,0-35.76,0L22.66,190.09a19.52,19.52,0,0,0,0,19.71A20.36,20.36,0,0,0,40.54,220H215.46a20.36,20.36,0,0,0,17.86-10.2A19.52,19.52,0,0,0,233.34,190.09ZM226.4,205.8a12.47,12.47,0,0,1-10.94,6.2H40.54a12.47,12.47,0,0,1-10.94-6.2,11.45,11.45,0,0,1,0-11.72L117.05,42.21a12.76,12.76,0,0,1,21.9,0L226.4,194.08A11.45,11.45,0,0,1,226.4,205.8ZM124,144V104a4,4,0,0,1,8,0v40a4,4,0,0,1-8,0Zm12,36a8,8,0,1,1-8-8A8,8,0,0,1,136,180Z" }))
   ]
-]), p = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(s, { ref: e, ...t, weights: $ }));
+]), p = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(o, { ref: e, ...t, weights: $ }));
 p.displayName = "WarningIcon";
 const O = /* @__PURE__ */ new Map([
   [
@@ -153,7 +153,7 @@ const O = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("path", { d: "M124,136V80a4,4,0,0,1,8,0v56a4,4,0,0,1-8,0ZM228,91.55v72.9a12,12,0,0,1-3.51,8.49l-51.55,51.55a12,12,0,0,1-8.49,3.51H91.55a12,12,0,0,1-8.49-3.51L31.51,172.94A12,12,0,0,1,28,164.45V91.55a12,12,0,0,1,3.51-8.49L83.06,31.51A12,12,0,0,1,91.55,28h72.9a12,12,0,0,1,8.49,3.51l51.55,51.55A12,12,0,0,1,228,91.55Zm-8,0a4,4,0,0,0-1.17-2.83L167.28,37.17A4.06,4.06,0,0,0,164.45,36H91.55a4.06,4.06,0,0,0-2.83,1.17L37.17,88.72A4,4,0,0,0,36,91.55v72.9a4,4,0,0,0,1.17,2.83l51.55,51.55A4.06,4.06,0,0,0,91.55,220h72.9a4.06,4.06,0,0,0,2.83-1.17l51.55-51.55a4,4,0,0,0,1.17-2.83ZM128,164a8,8,0,1,0,8,8A8,8,0,0,0,128,164Z" }))
   ]
-]), f = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(s, { ref: e, ...t, weights: O }));
+]), f = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(o, { ref: e, ...t, weights: O }));
 f.displayName = "WarningOctagonIcon";
 const X = /* @__PURE__ */ new Map([
   [
@@ -186,7 +186,7 @@ const X = /* @__PURE__ */ new Map([
     "thin",
     /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("path", { d: "M202.83,197.17a4,4,0,0,1-5.66,5.66L128,133.66,58.83,202.83a4,4,0,0,1-5.66-5.66L122.34,128,53.17,58.83a4,4,0,0,1,5.66-5.66L128,122.34l69.17-69.17a4,4,0,1,1,5.66,5.66L133.66,128Z" }))
   ]
-]), h = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(s, { ref: e, ...t, weights: X }));
+]), h = a.forwardRef((t, e) => /* @__PURE__ */ a.createElement(o, { ref: e, ...t, weights: X }));
 h.displayName = "XIcon";
 const A = {
   variant: {
@@ -235,7 +235,7 @@ function v(t) {
       if (e.id) {
         const n = t.toasts;
         if (n) {
-          const r = n.find((o) => o.id === e.id);
+          const r = n.find((s) => s.id === e.id);
           if (r && r.transitionStatus !== "ending")
             return t.update(e.id, { bump: !1 }), requestAnimationFrame(() => {
               t.update(e.id, {
@@ -267,14 +267,14 @@ function v(t) {
     })
   };
 }
-const z = () => {
+const K = () => {
   const t = T();
   return {
     ...v(t),
     toasts: t.toasts
   };
 }, e1 = () => v(Y());
-function K({
+function z({
   children: t,
   container: e,
   toastManager: n
@@ -282,12 +282,12 @@ function K({
   const r = y();
   return /* @__PURE__ */ i(k, { toastManager: n, children: [
     t,
-    /* @__PURE__ */ l(V, { container: e ?? r ?? void 0, children: /* @__PURE__ */ l(F, { className: "fixed top-auto right-4 bottom-4 z-1 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]", children: /* @__PURE__ */ l(D, {}) }) })
+    /* @__PURE__ */ l(F, { container: e ?? r ?? void 0, children: /* @__PURE__ */ l(V, { className: "fixed top-auto right-4 bottom-4 z-1 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]", children: /* @__PURE__ */ l(D, {}) }) })
   ] });
 }
-const t1 = K;
+const t1 = z;
 function D() {
-  const { toasts: t } = z();
+  const { toasts: t } = K();
   return t.map((e) => /* @__PURE__ */ i(
     _,
     {
@@ -319,14 +319,16 @@ function D() {
                   className: "text-[0.975rem] leading-5 font-medium text-kumo-default"
                 }
               ),
-              /* @__PURE__ */ l(C, { className: "text-[0.925rem] leading-5 text-kumo-subtle" }),
+              /* @__PURE__ */ l(C, { className: "text-[0.925rem] leading-5 text-kumo-default/70" }),
               !!e.actions && /* @__PURE__ */ l("div", { className: "mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px", children: e.actions.map((n, r) => /* @__PURE__ */ l(b, { ...n }, r)) })
             ] })
           ] }) }),
           /* @__PURE__ */ l(
             S,
             {
-              className: "absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-kumo-contrast/10 hover:text-current",
+              "data-kumo-component": "Toast",
+              "data-kumo-part": "close",
+              className: "absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current hover:bg-kumo-contrast/10 hover:text-current",
               "aria-label": "Close",
               children: /* @__PURE__ */ l(h, { className: "h-3 w-3" })
             }
@@ -338,10 +340,10 @@ function D() {
   ));
 }
 const P = {
-  success: "bg-kumo-success/5",
-  error: "bg-kumo-danger/5",
-  warning: "bg-kumo-warning/5",
-  info: "bg-kumo-info/5"
+  success: "bg-kumo-success-tint/20",
+  error: "bg-kumo-danger-tint/30",
+  warning: "bg-kumo-warning-tint/20",
+  info: "bg-kumo-info-tint/30"
 };
 function U({ variant: t }) {
   const e = t && P[t];
@@ -360,9 +362,9 @@ function j({ variant: t }) {
   return /* @__PURE__ */ l(n, { "data-toast-icon": !0, className: "mt-0.5 h-4 w-4 shrink-0", weight: "fill" });
 }
 export {
-  K as T,
+  z as T,
   t1 as a,
   e1 as c,
-  z as u
+  K as u
 };
-//# sourceMappingURL=toast-ejfm5cbt9yulqhol.js.map
+//# sourceMappingURL=toast-kvbgct0jvfmn4mas.js.map