@cloudflare/kumo 2.1.0 → 2.2.0

package/dist/chunks/{table-htqdo9dgy8c6hwuq.js.map → table-ef63hg1r1zia9u9j.js.map}

@@ -1 +1 @@
-{"version":3,"file":"table-htqdo9dgy8c6hwuq.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-ef63hg1r1zia9u9j.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/tabs-g8ier5pehjpfxauf.js

@@ -0,0 +1,152 @@
+"use client";
+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 { be as N, bf as y, bg as L, bh as O } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
+const w = {
+  variant: "segmented",
+  size: "base"
+};
+function _({
+  tabs: s,
+  value: a,
+  selectedValue: n,
+  onValueChange: o,
+  activateOnFocus: e,
+  className: t,
+  listClassName: r,
+  indicatorClassName: f,
+  variant: h = w.variant,
+  size: I = w.size
+}) {
+  const g = s ?? [];
+  if (g.length === 0)
+    return null;
+  const C = g[0]?.value, v = a !== void 0, T = {
+    value: v ? a : void 0,
+    defaultValue: v ? void 0 : n ?? C
+  }, u = h === "segmented", d = h === "underline", l = I === "sm", { ref: k, isOverflowing: m } = V(u), P = R(k, m);
+  return /* @__PURE__ */ x(
+    N,
+    {
+      ...T,
+      className: c("relative isolate min-w-0 font-medium", t),
+      onValueChange: (i) => {
+        const S = String(i);
+        o?.(S);
+      },
+      children: [
+        u && /* @__PURE__ */ p("div", { className: c("absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-kumo-recessed", l ? "h-6.5" : "h-9") }),
+        /* @__PURE__ */ x(
+          y,
+          {
+            ref: k,
+            activateOnFocus: e,
+            "data-overflowing": m ? "" : void 0,
+            ...P(),
+            className: c(
+              "relative flex min-w-0 shrink items-stretch",
+              u && "kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70 [--scroll-fade-width:3rem]",
+              u && (l ? "h-6.5 rounded-md" : "h-9"),
+              m && "cursor-grab active:cursor-grabbing",
+              d && "gap-4 border-b border-kumo-hairline pb-2",
+              d && (l ? "h-6.5" : "h-7.5"),
+              r
+            ),
+            children: [
+              g.map((i) => /* @__PURE__ */ p(
+                L,
+                {
+                  value: i.value,
+                  render: i.render,
+                  className: c(
+                    "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",
+                    m ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
+                    l ? "text-xs" : "text-base",
+                    u && "my-0.5 rounded-md text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
+                    u && (l ? "px-2" : "px-2.5"),
+                    d && "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",
+                    d && (l ? "px-1.5 py-2.5" : "px-2 py-3"),
+                    i.className
+                  ),
+                  children: i.label
+                },
+                i.value
+              )),
+              /* @__PURE__ */ p(
+                O,
+                {
+                  render: (i) => /* @__PURE__ */ p(
+                    "div",
+                    {
+                      ...i,
+                      className: c(
+                        "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",
+                        u && c("top-(--active-tab-top) h-(--active-tab-height) bg-kumo-base shadow-sm ring ring-kumo-line", l ? "rounded" : "rounded-md"),
+                        d && "bottom-0 h-0.5 bg-kumo-brand",
+                        f
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function R(s, a) {
+  const n = b(null), o = b(!1);
+  return () => ({
+    onPointerDownCapture: (e) => {
+      const t = s.current;
+      !t || !a || e.pointerType !== "mouse" || e.button !== 0 || (n.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        scrollLeft: t.scrollLeft,
+        dragging: !1
+      }, o.current = !1);
+    },
+    onPointerMoveCapture: (e) => {
+      const t = s.current, r = n.current;
+      if (!t || !a || !r || r.pointerId !== e.pointerId) return;
+      const f = e.clientX - r.startX;
+      if (!r.dragging) {
+        if (Math.abs(f) <= 3) return;
+        r.dragging = !0, o.current = !0, t.setPointerCapture(e.pointerId);
+      }
+      e.preventDefault(), t.scrollLeft = r.scrollLeft - f;
+    },
+    onPointerUpCapture: (e) => {
+      const t = s.current, r = n.current;
+      !t || !r || r.pointerId !== e.pointerId || (n.current = null, t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), o.current && window.setTimeout(() => {
+        o.current = !1;
+      }, 0));
+    },
+    onPointerCancelCapture: (e) => {
+      const t = s.current, r = n.current;
+      !t || !r || r.pointerId !== e.pointerId || (n.current = null, t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId));
+    },
+    onClickCapture: (e) => {
+      o.current && (e.preventDefault(), e.stopPropagation(), o.current = !1);
+    }
+  });
+}
+function V(s) {
+  const a = b(null), [n, o] = z(!1);
+  return D(() => {
+    if (!s) return;
+    const e = a.current;
+    if (!e) return;
+    const t = () => o(e.scrollWidth > e.clientWidth), r = new ResizeObserver(t);
+    return r.observe(e), t(), () => r.disconnect();
+  }, [s]), { ref: a, isOverflowing: n };
+}
+export {
+  _ as T
+};
+//# sourceMappingURL=tabs-g8ier5pehjpfxauf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-g8ier5pehjpfxauf.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            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-evn3ce20j18hpyqt.js → toast-e5id2hx8pv0x3vue.js}

@@ -1,16 +1,16 @@
 "use client";
-import { jsxs as o, jsx as r, Fragment as x } from "react/jsx-runtime";
+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-n859eyw550yi2b9z.js";
+import { B as b } from "./button-gflkhovvkmt0ftzz.js";
 import { u as y } from "./portal-provider-hwmkdmkpvct0cb76.js";
 import * as a from "react";
-import { a0 as k, bv as V, a2 as F, a1 as T, a4 as _, bw as H, bx as N, a5 as C, by as S, V as Y } from "./vendor-base-ui-epfrwb4nfbd4btaz.js";
+import { a0 as k, bw as V, a2 as F, a1 as T, a4 as _, bx as H, by as N, a5 as C, bz as S, V as Y } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
 const s = a.forwardRef((t, e) => {
   const {
     alt: n,
-    color: l = "currentColor",
-    size: i = "1em",
+    color: r = "currentColor",
+    size: o = "1em",
     weight: Z = "regular",
     mirrored: M = !1,
     children: L,
@@ -22,9 +22,9 @@ const s = a.forwardRef((t, e) => {
     {
       ref: e,
       xmlns: "http://www.w3.org/2000/svg",
-      width: i,
-      height: i,
-      fill: l,
+      width: o,
+      height: o,
+      fill: r,
       viewBox: "0 0 256 256",
       transform: M ? "scale(-1, 1)" : void 0,
       ...w
@@ -235,8 +235,8 @@ function v(t) {
       if (e.id) {
         const n = t.toasts;
         if (n) {
-          const l = n.find((i) => i.id === e.id);
-          if (l && l.transitionStatus !== "ending")
+          const r = n.find((o) => o.id === e.id);
+          if (r && r.transitionStatus !== "ending")
             return t.update(e.id, { bump: !1 }), requestAnimationFrame(() => {
               t.update(e.id, {
                 bump: !0,
@@ -245,7 +245,7 @@ function v(t) {
                 }
               });
             }), e.id;
-          if (l && l.transitionStatus === "ending")
+          if (r && r.transitionStatus === "ending")
             return e.id;
         }
       }
@@ -258,33 +258,37 @@ function v(t) {
     }),
     promise: (e, n) => t.promise(e, {
       loading: { ...n.loading },
-      success: typeof n.success == "function" ? (l) => ({
-        ...n.success(l)
+      success: typeof n.success == "function" ? (r) => ({
+        ...n.success(r)
       }) : { ...n.success },
-      error: typeof n.error == "function" ? (l) => ({
-        ...n.error(l)
+      error: typeof n.error == "function" ? (r) => ({
+        ...n.error(r)
       }) : { ...n.error }
     })
   };
 }
-const K = () => {
+const z = () => {
   const t = T();
   return {
     ...v(t),
     toasts: t.toasts
   };
 }, e1 = () => v(Y());
-function z({ children: t, container: e }) {
-  const n = y();
-  return /* @__PURE__ */ o(k, { children: [
+function K({
+  children: t,
+  container: e,
+  toastManager: n
+}) {
+  const r = y();
+  return /* @__PURE__ */ i(k, { toastManager: n, children: [
     t,
-    /* @__PURE__ */ r(V, { container: e ?? n ?? void 0, children: /* @__PURE__ */ r(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__ */ r(D, {}) }) })
+    /* @__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, {}) }) })
   ] });
 }
-const t1 = z;
+const t1 = K;
 function D() {
-  const { toasts: t } = K();
-  return t.map((e) => /* @__PURE__ */ o(
+  const { toasts: t } = z();
+  return t.map((e) => /* @__PURE__ */ i(
     _,
     {
       toast: e,
@@ -303,28 +307,28 @@ function D() {
         e.bump && "animate-toast-bump"
       ),
       children: [
-        /* @__PURE__ */ r(U, { variant: e.variant }),
-        /* @__PURE__ */ o(H, { className: "isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100", children: [
-          e.content ?? /* @__PURE__ */ r(x, { children: /* @__PURE__ */ o("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ r(j, { variant: e.variant }),
-            /* @__PURE__ */ o("div", { className: "flex flex-col gap-1 overflow-hidden", children: [
-              /* @__PURE__ */ r(
+        /* @__PURE__ */ l(U, { variant: e.variant }),
+        /* @__PURE__ */ i(H, { className: "isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100", children: [
+          e.content ?? /* @__PURE__ */ l(x, { children: /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ l(j, { variant: e.variant }),
+            /* @__PURE__ */ i("div", { className: "flex flex-col gap-1 overflow-hidden", children: [
+              /* @__PURE__ */ l(
                 N,
                 {
                   "data-toast-title": !0,
                   className: "text-[0.975rem] leading-5 font-medium text-kumo-default"
                 }
               ),
-              /* @__PURE__ */ r(C, { className: "text-[0.925rem] leading-5 text-kumo-subtle" }),
-              !!e.actions && /* @__PURE__ */ r("div", { className: "mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px", children: e.actions.map((n, l) => /* @__PURE__ */ r(b, { ...n }, l)) })
+              /* @__PURE__ */ l(C, { className: "text-[0.925rem] leading-5 text-kumo-subtle" }),
+              !!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__ */ 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",
               "aria-label": "Close",
-              children: /* @__PURE__ */ r(h, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ l(h, { className: "h-3 w-3" })
             }
           )
         ] })
@@ -341,7 +345,7 @@ const P = {
 };
 function U({ variant: t }) {
   const e = t && P[t];
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: m("absolute inset-0 rounded-[11px] bg-kumo-base/90", e)
@@ -353,12 +357,12 @@ function j({ variant: t }) {
   const e = d(A.variant, t, c.variant);
   if (!("icon" in e)) return null;
   const n = e.icon;
-  return /* @__PURE__ */ r(n, { "data-toast-icon": !0, className: "mt-0.5 h-4 w-4 shrink-0", weight: "fill" });
+  return /* @__PURE__ */ l(n, { "data-toast-icon": !0, className: "mt-0.5 h-4 w-4 shrink-0", weight: "fill" });
 }
 export {
-  z as T,
+  K as T,
   t1 as a,
   e1 as c,
-  K as u
+  z as u
 };
-//# sourceMappingURL=toast-evn3ce20j18hpyqt.js.map
+//# sourceMappingURL=toast-e5id2hx8pv0x3vue.js.map