@cloudflare/kumo 1.10.0 → 1.11.0

package/dist/{tooltip-2KqOpTj0.js → tooltip-C7p2iJ0y.js}

@@ -1,30 +1,36 @@
 "use client";
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { c as s } from "./cn-Bhsu1vx2.js";
-import { _ as p, V as m, W as c, X as f, Y as u, Z as h, b7 as g } from "./vendor-base-ui-DvXlzG7n.js";
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { c as i } from "./cn-Bhsu1vx2.js";
+import { _ as p, V as m, W as c, X as f, Y as u, Z as h, b8 as g } from "./vendor-base-ui-DN1j_aJS.js";
 const k = p;
-function v({
+function w({
   content: o,
-  children: i,
+  children: s,
   align: r,
-  asChild: e,
+  asChild: a,
   side: l,
-  className: d,
-  ...n
+  className: n,
+  ...d
 }) {
-  return /* @__PURE__ */ a(m, { ...n, children: [
+  return /* @__PURE__ */ e(m, { ...d, children: [
     /* @__PURE__ */ t(
       c,
       {
-        className: d,
-        render: e ? i : void 0,
-        children: e ? void 0 : i
+        className: i(
+          // Defensive resets when rendering as button wrapper (not asChild)
+          // These prevent global button styles from polluting the trigger
+          // Consumer styles passed via className will override these (tailwind-merge)
+          !a && "inline-flex items-center bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0]",
+          n
+        ),
+        render: a ? s : void 0,
+        children: a ? void 0 : s
       }
     ),
-    /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(u, { align: r, side: l, sideOffset: 10, children: /* @__PURE__ */ a(
+    /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(u, { align: r, side: l, sideOffset: 10, children: /* @__PURE__ */ e(
       h,
       {
-        className: s(
+        className: i(
           "flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default",
           "shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill",
           "transition-[transform,opacity] duration-150",
@@ -37,7 +43,7 @@ function v({
           /* @__PURE__ */ t(
             g,
             {
-              className: s(
+              className: i(
                 "flex",
                 "data-[side=bottom]:top-[-8px]",
                 "data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
@@ -54,7 +60,7 @@ function v({
   ] });
 }
 function x(o) {
-  return /* @__PURE__ */ a("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...o, children: [
+  return /* @__PURE__ */ e("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...o, children: [
     /* @__PURE__ */ t(
       "path",
       {
@@ -79,7 +85,7 @@ function x(o) {
   ] });
 }
 export {
-  v as T,
+  w as T,
   k as a
 };
-//# sourceMappingURL=tooltip-2KqOpTj0.js.map
+//# sourceMappingURL=tooltip-C7p2iJ0y.js.map

package/dist/tooltip-C7p2iJ0y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-C7p2iJ0y.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\";\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 * <TooltipProvider>\n *   <Tooltip content=\"Add new item\" asChild>\n *     <Button shape=\"square\" icon={PlusIcon} />\n *   </Tooltip>\n * </TooltipProvider>\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\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  ...props\n}: TooltipProps) {\n  return (\n    <TooltipBase.Root {...props}>\n      <TooltipBase.Trigger\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>\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","props","jsxs","TooltipBase.Root","jsx","TooltipBase.Trigger","cn","TooltipBase.Portal","TooltipBase.Positioner","TooltipBase.Popup","TooltipBase.Arrow","ArrowSvg"],"mappings":";;;;AA6DO,MAAMA,IAAkBC;AAiDxB,SAASC,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC,EAACC,GAAA,EAAkB,GAAGF,GACpB,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAWC;AAAA;AAAA;AAAA;AAAA,UAIT,CAACR,KACC;AAAA,UACFE;AAAA,QAAA;AAAA,QAEF,QAAQF,IAAWF,IAAsC;AAAA,QAExD,cAAU,SAAaA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1B,gBAAAQ,EAACG,GAAA,EACC,UAAA,gBAAAH,EAACI,GAAA,EAAuB,OAAAX,GAAc,MAAAE,GAAY,YAAY,IAC5D,UAAA,gBAAAG;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,UAEXhB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAiBA,SAASgB,EAASV,GAAoC;AACpD,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAQ,GAAGD,GAC9D,UAAA;AAAA,IAAA,gBAAAG;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;"}

package/dist/{vendor-base-ui-DvXlzG7n.js → vendor-base-ui-DN1j_aJS.js}

@@ -22688,7 +22688,7 @@ export {
   Af as Z,
   _f as _,
   tC as a,
-  mm as a$,
+  dm as a$,
   Oy as a0,
   rp as a1,
   dp as a2,
@@ -22705,27 +22705,27 @@ export {
   ml as aD,
   pl as aE,
   Jc as aF,
-  rl as aG,
-  ol as aH,
-  ll as aI,
-  il as aJ,
-  yl as aK,
-  Yp as aL,
-  Gf as aM,
-  zf as aN,
-  Xp as aO,
-  Jp as aP,
-  Zp as aQ,
-  jp as aR,
-  qp as aS,
-  VE as aT,
-  em as aU,
-  tm as aV,
-  nm as aW,
-  rm as aX,
-  am as aY,
-  lm as aZ,
-  dm as a_,
+  Qc as aG,
+  rl as aH,
+  ol as aI,
+  ll as aJ,
+  il as aK,
+  yl as aL,
+  Yp as aM,
+  Gf as aN,
+  zf as aO,
+  Xp as aP,
+  Jp as aQ,
+  Zp as aR,
+  jp as aS,
+  qp as aT,
+  VE as aU,
+  em as aV,
+  tm as aW,
+  nm as aX,
+  rm as aY,
+  am as aZ,
+  lm as a_,
   Bc as aa,
   hc as ab,
   Fc as ac,
@@ -22753,32 +22753,33 @@ export {
   tl as ay,
   dl as az,
   GS as b,
-  fm as b0,
-  Rm as b1,
-  xm as b2,
-  Sm as b3,
-  Tm as b4,
-  wm as b5,
-  Pm as b6,
-  kf as b7,
-  nR as b8,
-  Im as b9,
-  Mm as ba,
-  Om as bb,
-  Dm as bc,
-  Vm as bd,
-  km as be,
-  _m as bf,
-  Fm as bg,
-  Bm as bh,
-  Um as bi,
-  mR as bj,
-  eC as bk,
-  en as bl,
-  Iy as bm,
-  ip as bn,
-  cp as bo,
-  lp as bp,
+  mm as b0,
+  fm as b1,
+  Rm as b2,
+  xm as b3,
+  Sm as b4,
+  Tm as b5,
+  wm as b6,
+  Pm as b7,
+  kf as b8,
+  nR as b9,
+  Im as ba,
+  Mm as bb,
+  Om as bc,
+  Dm as bd,
+  Vm as be,
+  km as bf,
+  _m as bg,
+  Fm as bh,
+  Bm as bi,
+  Um as bj,
+  mR as bk,
+  eC as bl,
+  en as bm,
+  Iy as bn,
+  ip as bo,
+  cp as bp,
+  lp as bq,
   QS as c,
   nC as d,
   US as e,
@@ -22804,4 +22805,4 @@ export {
   XS as y,
   fC as z
 };
-//# sourceMappingURL=vendor-base-ui-DvXlzG7n.js.map
+//# sourceMappingURL=vendor-base-ui-DN1j_aJS.js.map