@cloudflare/kumo 1.18.0 → 1.19.0

package/dist/chunks/table-inweecadl3her7pd.js

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

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

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

package/dist/chunks/tooltip-belkznz8t8333h5f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip-belkznz8t8333h5f.js","sources":["../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipBase } from \"@base-ui/react/tooltip\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  usePortalContainer,\n  type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Tooltip side variant definitions mapping positions to their Tailwind classes. */\nexport const KUMO_TOOLTIP_VARIANTS = {\n  side: {\n    top: {\n      classes: \"\",\n      description: \"Tooltip appears above the trigger\",\n    },\n    bottom: {\n      classes: \"\",\n      description: \"Tooltip appears below the trigger\",\n    },\n    left: {\n      classes: \"\",\n      description: \"Tooltip appears to the left of the trigger\",\n    },\n    right: {\n      classes: \"\",\n      description: \"Tooltip appears to the right of the trigger\",\n    },\n  },\n} as const;\n\nexport const KUMO_TOOLTIP_DEFAULT_VARIANTS = {\n  side: \"top\",\n} as const;\n\n// Derived types from KUMO_TOOLTIP_VARIANTS\nexport type KumoTooltipSide = keyof typeof KUMO_TOOLTIP_VARIANTS.side;\n\nexport interface KumoTooltipVariantsProps {\n  /**\n   * Preferred side of the trigger to render the tooltip.\n   * - `\"top\"` — Tooltip appears above the trigger\n   * - `\"bottom\"` — Tooltip appears below the trigger\n   * - `\"left\"` — Tooltip appears to the left of the trigger\n   * - `\"right\"` — Tooltip appears to the right of the trigger\n   * @default \"top\"\n   */\n  side?: KumoTooltipSide;\n}\n\nexport function tooltipVariants({\n  side = KUMO_TOOLTIP_DEFAULT_VARIANTS.side,\n}: KumoTooltipVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n    \"shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill\",\n    \"transition-[transform,opacity] duration-150\",\n    \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n    \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n    \"data-[instant]:duration-0\",\n    // Apply side-specific styles (currently none, but extensible)\n    KUMO_TOOLTIP_VARIANTS.side[side].classes,\n  );\n}\n\nexport const TooltipProvider = TooltipBase.Provider;\n\ntype BaseTooltipProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;\n\ntype TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;\n\n/** Alignment options for tooltip positioning. Source: PositionerProps[\"align\"] */\ntype TooltipAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Tooltip component props.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Add new item\" asChild>\n *   <Button shape=\"square\" icon={PlusIcon} />\n * </Tooltip>\n * ```\n */\nexport type TooltipProps = BaseTooltipProps &\n  KumoTooltipVariantsProps & {\n    /**\n     * Alignment on the axis perpendicular to `side`.\n     * - `\"start\"` — Align to the start edge\n     * - `\"center\"` — Center-aligned\n     * - `\"end\"` — Align to the end edge\n     */\n    align?: TooltipAlign;\n    /** When `true`, the trigger wraps the child element instead of adding a wrapper. */\n    asChild?: boolean;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Content to display inside the tooltip popup. */\n    content: ReactNode;\n    /**\n     * Container element for the portal. Use this to render the tooltip inside\n     * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n     * @default document.body (or KumoPortalProvider container if set)\n     */\n    container?: PortalContainer;\n    /**\n     * How long to wait before closing the tooltip. Specified in milliseconds.\n     * @default 0\n     */\n    closeDelay?: number;\n    /**\n     * How long to wait before opening the tooltip. Specified in milliseconds.\n     * @default 600\n     */\n    delay?: number;\n  };\n\n/**\n * Accessible popup that shows additional information on hover/focus.\n * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save changes\" asChild>\n *   <Button variant=\"primary\">Save</Button>\n * </Tooltip>\n * ```\n */\nexport function Tooltip({\n  content,\n  children,\n  align,\n  asChild,\n  side,\n  className,\n  container: containerProp,\n  closeDelay,\n  delay,\n  ...props\n}: TooltipProps) {\n  const contextContainer = usePortalContainer();\n  const container = containerProp ?? contextContainer ?? undefined;\n\n  return (\n    <TooltipBase.Root {...props}>\n      <TooltipBase.Trigger\n        closeDelay={closeDelay}\n        delay={delay}\n        className={cn(\n          // Defensive resets when rendering as button wrapper (not asChild)\n          // These prevent global button styles from polluting the trigger\n          // Consumer styles passed via className will override these (tailwind-merge)\n          !asChild &&\n            \"inline-flex items-center bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0]\",\n          className,\n        )}\n        render={asChild ? (children as TriggerProps[\"render\"]) : undefined}\n      >\n        {asChild ? undefined : (children as ReactNode)}\n      </TooltipBase.Trigger>\n      <TooltipBase.Portal container={container}>\n        <TooltipBase.Positioner align={align} side={side} sideOffset={10}>\n          <TooltipBase.Popup\n            className={cn(\n              \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n              \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n              \"transition-[transform,opacity] duration-150\",\n              \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n              \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n              \"data-[instant]:duration-0\",\n              \"kumo-tooltip-popup\",\n            )}\n          >\n            <TooltipBase.Arrow\n              className={cn(\n                \"flex\",\n                \"data-[side=bottom]:top-[-8px]\",\n                \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n                \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n                \"data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n              )}\n            >\n              <ArrowSvg />\n            </TooltipBase.Arrow>\n            {content}\n          </TooltipBase.Popup>\n        </TooltipBase.Positioner>\n      </TooltipBase.Portal>\n    </TooltipBase.Root>\n  );\n}\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches tooltip background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the tooltip's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/tooltip\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className=\"fill-kumo-base\"\n      />\n      <path\n        d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n        className=\"fill-kumo-tip-shadow\"\n      />\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className=\"fill-kumo-tip-stroke\"\n      />\n    </svg>\n  );\n}\n"],"names":["TooltipProvider","TooltipBase.Provider","Tooltip","content","children","align","asChild","side","className","containerProp","closeDelay","delay","props","contextContainer","usePortalContainer","container","jsxs","TooltipBase.Root","jsx","TooltipBase.Trigger","cn","TooltipBase.Portal","TooltipBase.Positioner","TooltipBase.Popup","TooltipBase.Arrow","ArrowSvg"],"mappings":";;;;;AAiEO,MAAMA,IAAkBC;AA+DxB,SAASC,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAWC;AAAA,EACX,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAmBC,EAAA,GACnBC,IAAYN,KAAiBI,KAAoB;AAEvD,SACE,gBAAAG,EAACC,GAAA,EAAkB,GAAGL,GACpB,UAAA;AAAA,IAAA,gBAAAM;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,YAAAT;AAAA,QACA,OAAAC;AAAA,QACA,WAAWS;AAAA;AAAA;AAAA;AAAA,UAIT,CAACd,KACC;AAAA,UACFE;AAAA,QAAA;AAAA,QAEF,QAAQF,IAAWF,IAAsC;AAAA,QAExD,cAAU,SAAaA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1B,gBAAAc,EAACG,GAAA,EAAmB,WAAAN,GAClB,UAAA,gBAAAG,EAACI,GAAA,EAAuB,OAAAjB,GAAc,MAAAE,GAAY,YAAY,IAC5D,UAAA,gBAAAS;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,WAAWJ;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGF,4BAACK,GAAA,CAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXtB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAiBA,SAASsB,EAASb,GAAoC;AACpD,SACE,gBAAAI,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAQ,GAAGJ,GAC9D,UAAA;AAAA,IAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}