impact-nova 2.2.5 → 2.2.7

package/dist/components/data-display/statistics-card/statistics-card.js

@@ -1,37 +1,38 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
 import * as S from "react";
 import { createComponent as m } from "../../../lib/primitives/create-component.js";
-import { createCompoundPart as v } from "../../../lib/primitives/create-compound.js";
+import { createCompoundPart as w } from "../../../lib/primitives/create-compound.js";
 import { cn as p } from "../../../lib/utils.js";
-import { Checkbox as P } from "../../forms/checkbox/checkbox.js";
-import { Tooltip as j, TooltipTrigger as L, TooltipContent as W } from "../../feedback/tooltip/tooltip.js";
-import { Info as G } from "impact-nova-icons";
-import { Chart as B } from "../chart/chart.js";
-import { useStatisticsChartData as $, useStatisticsChartLabel as O, useStatisticsChartSeries as R, useStatisticsChartOptions as H } from "./statistics-card.hooks.js";
-import { useStatisticsCardContext as y, StatisticsCardContext as M } from "./statistics-card-context.js";
-const X = m(
+import { Checkbox as j } from "../../forms/checkbox/checkbox.js";
+import { Tooltip as L, TooltipTrigger as W, TooltipContent as G } from "../../feedback/tooltip/tooltip.js";
+import { OverflowTooltip as N } from "../../feedback/tooltip/overflow-tooltip.js";
+import { Info as B } from "impact-nova-icons";
+import { Chart as O } from "../chart/chart.js";
+import { useStatisticsChartData as $, useStatisticsChartLabel as R, useStatisticsChartSeries as H, useStatisticsChartOptions as M } from "./statistics-card.hooks.js";
+import { useStatisticsCardContext as y, StatisticsCardContext as D } from "./statistics-card-context.js";
+const Z = m(
   "StatisticsCardRoot",
-  ({ className: r, items: a, onItemToggle: s, chartSize: t = 110, config: o, mapItem: n, children: c, ...l }, e) => {
+  ({ className: o, items: t, onItemToggle: r, chartSize: e = 110, config: i, mapItem: n, children: c, ...l }, a) => {
     const d = S.useMemo(
-      () => n ? a.map((k, I) => n(k, I)) : a,
-      [a, n]
-    ), f = "var(--color-surface-subtle)", x = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", g = "w-full min-w-0 max-w-[439px]", C = o?.colors?.background || f, w = o?.spacing?.rootPadding || x, b = o?.spacing?.rootGap || h, N = o?.spacing?.rootWidth || g, T = S.useMemo(
-      () => ({ items: d, onItemToggle: s, chartSize: t, config: o }),
-      [d, s, t, o]
+      () => n ? t.map((I, P) => n(I, P)) : t,
+      [t, n]
+    ), f = "var(--color-surface-subtle)", g = "px-5 py-4", h = "gap-4 md:gap-6 lg:gap-8", x = "w-full min-w-0 max-w-[439px]", C = i?.colors?.background || f, v = i?.spacing?.rootPadding || g, b = i?.spacing?.rootGap || h, T = i?.spacing?.rootWidth || x, k = S.useMemo(
+      () => ({ items: d, onItemToggle: r, chartSize: e, config: i }),
+      [d, r, e, i]
     );
-    return /* @__PURE__ */ i(M.Provider, { value: T, children: /* @__PURE__ */ i(
+    return /* @__PURE__ */ s(D.Provider, { value: k, children: /* @__PURE__ */ s(
       "div",
       {
-        ref: e,
+        ref: a,
         role: "region",
         "aria-roledescription": "statistics card",
         "data-component": "statistics-card",
         className: p(
           "flex flex-row flex-wrap md:flex-nowrap items-center justify-between rounded-lg box-border min-w-0 overflow-hidden bg-[var(--statistics-card-bg)]",
-          N,
-          w,
+          T,
+          v,
           b,
-          r
+          o
         ),
         style: { "--statistics-card-bg": C },
         ...l,
@@ -39,54 +40,78 @@ const X = m(
       }
     ) });
   }
-), Y = v("statistics-card", {
+), _ = w("statistics-card", {
   part: "header",
   displayName: "StatisticsCardHeader",
   className: "flex flex-col items-start gap-4 flex-shrink-0 min-w-0"
-}), Z = v("statistics-card", {
+}), z = w("statistics-card", {
   part: "title",
   displayName: "StatisticsCardTitle",
   className: "flex flex-row items-center gap-1.5 min-w-0 max-w-[150px]"
-}), _ = m(
+}), tt = m(
   "StatisticsCardTitleIcon",
-  ({ icon: r, className: a, ...s }, t) => /* @__PURE__ */ i(
+  ({ icon: o, className: t, ...r }, e) => /* @__PURE__ */ s(
     "div",
     {
-      ref: t,
+      ref: e,
       "data-component": "statistics-card-title-icon",
-      className: p("flex items-center justify-center w-6 h-6 p-1.5 bg-accent rounded-full shrink-0", a),
-      ...s,
-      children: r
+      className: p("flex items-center justify-center w-6 h-6 p-1.5 bg-accent rounded-full shrink-0", t),
+      ...r,
+      children: o
     }
   )
-), z = m(
+), et = m(
   "StatisticsCardTitleText",
-  ({ className: r, children: a, ...s }, t) => /* @__PURE__ */ i(
-    "span",
-    {
-      ref: t,
-      "data-component": "statistics-card-title-text",
-      className: p("font-semibold text-base leading-[1.5em] text-secondary-foreground truncate line-clamp-1", r),
-      ...s,
-      children: a
-    }
-  )
-), tt = m(
+  ({ className: o, children: t, ...r }, e) => {
+    const i = p(
+      "font-semibold text-base leading-[1.5em] text-secondary-foreground truncate line-clamp-1",
+      o
+    );
+    return typeof t == "string" ? /* @__PURE__ */ s(
+      N,
+      {
+        as: "span",
+        triggerClassName: i,
+        content: t,
+        side: "top",
+        variant: "tertiary",
+        children: /* @__PURE__ */ s(
+          "span",
+          {
+            ref: e,
+            "data-component": "statistics-card-title-text",
+            ...r,
+            children: t
+          }
+        )
+      }
+    ) : /* @__PURE__ */ s(
+      "span",
+      {
+        ref: e,
+        "data-component": "statistics-card-title-text",
+        className: i,
+        ...r,
+        children: t
+      }
+    );
+  }
+), at = m(
   "StatisticsCardTitleTooltip",
-  ({ content: r, icon: a, ...s }, t) => /* @__PURE__ */ i("div", { ref: t, "data-component": "statistics-card-title-tooltip", ...s, children: /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ i(L, { asChild: !0, children: a || /* @__PURE__ */ i(G, { size: "sm", className: "text-secondary-foreground cursor-pointer shrink-0" }) }),
-    /* @__PURE__ */ i(W, { variant: "tertiary", side: "top", children: r })
+  ({ content: o, icon: t, ...r }, e) => /* @__PURE__ */ s("div", { ref: e, "data-component": "statistics-card-title-tooltip", ...r, children: /* @__PURE__ */ u(L, { children: [
+    /* @__PURE__ */ s(W, { asChild: !0, children: t || /* @__PURE__ */ s(B, { size: "sm", className: "text-secondary-foreground cursor-pointer shrink-0" }) }),
+    /* @__PURE__ */ s(G, { variant: "tertiary", side: "top", children: o })
   ] }) })
-), et = m(
+), st = m(
   "StatisticsCardChart",
-  ({ className: r, centerLabel: a, chartConfig: s, chartSize: t = 104, ...o }, n) => {
-    const { items: c, onItemToggle: l } = y(), { total: e, checkedTotal: d, hasChecked: f } = $(c), x = O(a, f, d, e), h = R(c, f), g = H(c, l, s), C = {
-      ...g,
+  ({ className: o, centerLabel: t, chartConfig: r, chartSize: e = 104, ...i }, n) => {
+    const { items: c, onItemToggle: l } = y(), { total: a, checkedTotal: d, hasChecked: f } = $(c), g = R(t, f, d, a), h = H(c, f), x = M(c, l, r), C = {
+      ...x,
       chart: {
-        ...g.chart,
+        ...x.chart,
         type: "pie",
-        height: t,
-        width: t,
+        height: e,
+        width: e,
         margin: [0, 0, 0, 0],
         spacing: [0, 0, 0, 0],
         backgroundColor: "transparent"
@@ -102,142 +127,144 @@ const X = m(
       {
         ref: n,
         "data-component": "statistics-card-chart",
-        className: p("relative flex items-center justify-center flex-shrink-0", r),
-        style: { width: `${t}px`, height: `${t}px` },
-        ...o,
+        className: p("relative flex items-center justify-center flex-shrink-0", o),
+        style: { width: `${e}px`, height: `${e}px` },
+        ...i,
         children: [
-          /* @__PURE__ */ i(
-            B,
+          /* @__PURE__ */ s(
+            O,
             {
               options: C,
-              height: t,
-              width: t,
+              height: e,
+              width: e,
               noWrapper: !0
             }
           ),
-          x && /* @__PURE__ */ i("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ i("span", { className: "font-black text-[12px] leading-[9.536px] text-foreground", children: x }) })
+          g && /* @__PURE__ */ s("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ s("span", { className: "font-black text-[12px] leading-[9.536px] text-foreground", children: g }) })
         ]
       }
     );
   }
-), at = m(
+), it = m(
   "StatisticsCardLegend",
-  ({ className: r, children: a, ...s }, t) => {
-    const { config: o } = y(), n = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", c = "gap-2", l = o?.spacing?.legendWidth || n, e = o?.spacing?.itemGap || c;
-    return /* @__PURE__ */ i(
+  ({ className: o, children: t, ...r }, e) => {
+    const { config: i } = y(), n = "w-full md:w-auto md:min-w-[190px] md:max-w-[208px]", c = "gap-2", l = i?.spacing?.legendWidth || n, a = i?.spacing?.itemGap || c;
+    return /* @__PURE__ */ s(
       "div",
       {
-        ref: t,
+        ref: e,
         role: "list",
         "data-component": "statistics-card-legend",
         className: p(
           "flex flex-col justify-center min-w-0 flex-1 md:flex-none",
           l,
-          e,
-          r
+          a,
+          o
         ),
-        ...s,
-        children: a
+        ...r,
+        children: t
       }
     );
   }
-), st = m(
+), rt = m(
   "StatisticsCardLegendItem",
-  ({ className: r, index: a, item: s, ...t }, o) => {
+  ({ className: o, index: t, item: r, ...e }, i) => {
     const { items: n, onItemToggle: c, config: l } = y();
-    let e = s, d = -1;
-    if (!e && a !== void 0 ? (e = n[a], d = a) : e && (d = n.findIndex((b) => b === e)), !e || d === -1) return null;
-    const f = "bg-canvas-elevated", x = "px-3 py-1.5", h = "var(--color-foreground)", g = l?.colors?.background || f, C = l?.spacing?.itemPadding || x, w = l?.colors?.text || h;
+    let a = r, d = -1;
+    if (!a && t !== void 0 ? (a = n[t], d = t) : a && (d = n.findIndex((b) => b === a)), !a || d === -1) return null;
+    const f = "bg-canvas-elevated", g = "px-3 py-1.5", h = "var(--color-foreground)", x = l?.colors?.background || f, C = l?.spacing?.itemPadding || g, v = l?.colors?.text || h;
     return /* @__PURE__ */ u(
       "div",
       {
-        ref: o,
+        ref: i,
         role: "listitem",
-        "aria-label": `${e.label}: ${e.value}`,
+        "aria-label": `${a.label}: ${a.value}`,
         "data-component": "statistics-card-legend-item",
         className: p(
           "flex flex-row items-center gap-2 rounded-md border-l-2 transition-all shadow-elevation-floating",
-          e.checked && "shadow-none ring-[3px] ring-[var(--item-color)]",
-          g,
+          a.checked && "shadow-none ring-[3px] ring-[var(--item-color)]",
+          x,
           C,
-          r
+          o
         ),
         style: {
-          borderLeftColor: e.borderColor,
-          "--item-color": e.borderColor
+          borderLeftColor: a.borderColor,
+          "--item-color": a.borderColor
         },
-        ...t,
+        ...e,
         children: [
           /* @__PURE__ */ u("div", { className: "flex flex-row items-center gap-2 flex-1 min-w-0", children: [
-            /* @__PURE__ */ i(
-              P,
+            /* @__PURE__ */ s(
+              j,
               {
-                checked: e.checked ?? !1,
+                checked: a.checked ?? !1,
                 onCheckedChange: (b) => c?.(d, b === !0),
-                "aria-label": `Select ${e.label}`,
+                "aria-label": `Select ${a.label}`,
                 className: "shrink-0"
               }
             ),
-            /* @__PURE__ */ i(
-              "span",
+            /* @__PURE__ */ s(
+              N,
               {
-                className: "flex-1 font-medium text-xs leading-[1.25em] truncate text-[var(--item-text)]",
-                style: { "--item-text": w },
-                children: e.label
+                triggerClassName: "flex-1 font-medium text-xs leading-[1.25em] truncate text-[var(--item-text)] block min-w-0",
+                content: a.label,
+                side: "top",
+                variant: "tertiary",
+                children: /* @__PURE__ */ s("span", { style: { "--item-text": v }, children: a.label })
               }
             )
           ] }),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ s(
             "span",
             {
               className: "shrink-0 font-semibold text-sm leading-[1.5em] text-right min-w-[27px] text-foreground",
-              children: e.value
+              children: a.value
             }
           )
         ]
       }
     );
   }
-), it = v("statistics-card", {
+), ot = w("statistics-card", {
   part: "summary",
   displayName: "StatisticsCardSummary",
   className: "flex flex-wrap items-center gap-3 self-center text-[11px] font-medium text-secondary-foreground"
-}), rt = m(
+}), nt = m(
   "StatisticsCardSummaryItem",
-  ({ className: r, label: a, count: s, color: t = "var(--color-secondary-foreground)", ...o }, n) => /* @__PURE__ */ u(
+  ({ className: o, label: t, count: r, color: e = "var(--color-secondary-foreground)", ...i }, n) => /* @__PURE__ */ u(
     "div",
     {
       ref: n,
       "data-component": "statistics-card-summary-item",
-      className: p("flex items-center gap-1", r),
-      style: { "--summary-color": t },
-      ...o,
+      className: p("flex items-center gap-1", o),
+      style: { "--summary-color": e },
+      ...i,
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ s(
           "span",
           {
             className: "w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--summary-color)]"
           }
         ),
         /* @__PURE__ */ u("span", { children: [
-          a,
+          t,
           ": ",
-          s
+          r
         ] })
       ]
     }
   )
 );
 export {
-  et as StatisticsCardChart,
-  Y as StatisticsCardHeader,
-  at as StatisticsCardLegend,
-  st as StatisticsCardLegendItem,
-  X as StatisticsCardRoot,
-  it as StatisticsCardSummary,
-  rt as StatisticsCardSummaryItem,
-  Z as StatisticsCardTitle,
-  _ as StatisticsCardTitleIcon,
-  z as StatisticsCardTitleText,
-  tt as StatisticsCardTitleTooltip
+  st as StatisticsCardChart,
+  _ as StatisticsCardHeader,
+  it as StatisticsCardLegend,
+  rt as StatisticsCardLegendItem,
+  Z as StatisticsCardRoot,
+  ot as StatisticsCardSummary,
+  nt as StatisticsCardSummaryItem,
+  z as StatisticsCardTitle,
+  tt as StatisticsCardTitleIcon,
+  et as StatisticsCardTitleText,
+  at as StatisticsCardTitleTooltip
 };

package/dist/components/feedback/alert/alert.variants.d.ts

@@ -1,4 +1,4 @@
 export declare const alertVariants: (props?: ({
-    variant?: "default" | "error" | "info" | "warning" | "success" | null | undefined;
+    variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
     emphasis?: "flat" | "elevated" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/feedback/tooltip/badge-overflow-tooltip.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from '../../data-display/badge/badge.variants';
+import { OverflowTooltipProps } from './overflow-tooltip.types';
+type BadgeStyleProps = Pick<VariantProps<typeof badgeVariants>, 'variant' | 'color' | 'size' | 'shape'>;
+export interface BadgeOverflowTooltipProps extends Omit<OverflowTooltipProps, 'children' | 'triggerClassName' | 'as'> {
+    label: string;
+    badgeVariant?: BadgeStyleProps['variant'];
+    badgeColor?: BadgeStyleProps['color'];
+    badgeSize?: BadgeStyleProps['size'];
+    badgeShape?: BadgeStyleProps['shape'];
+    maxWidthClassName?: string;
+    triggerClassName?: string;
+}
+/**
+ * Badge shell + inner truncating OverflowTooltip trigger.
+ * SSOT for pill badges with ellipsis (Filters Applied, saved views, etc.).
+ */
+export declare function BadgeOverflowTooltip({ label, badgeVariant, badgeColor, badgeSize, badgeShape, maxWidthClassName, triggerClassName, content, ...overflowTooltipProps }: BadgeOverflowTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/feedback/tooltip/badge-overflow-tooltip.js

@@ -0,0 +1,48 @@
+import { jsx as o } from "react/jsx-runtime";
+import { badgeVariants as c } from "../../data-display/badge/badge.variants.js";
+import { cn as t } from "../../../lib/utils.js";
+import { OverflowTooltip as f } from "./overflow-tooltip.js";
+function x({
+  label: r,
+  badgeVariant: e = "outline",
+  badgeColor: a = "primary",
+  badgeSize: i = "md",
+  badgeShape: n = "circle",
+  maxWidthClassName: l = "max-w-[140px]",
+  triggerClassName: m,
+  content: p,
+  ...s
+}) {
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      className: t(
+        c({
+          variant: e,
+          color: a,
+          size: i,
+          shape: n,
+          layout: "default"
+        }),
+        l,
+        "min-w-0 shrink overflow-hidden"
+      ),
+      children: /* @__PURE__ */ o(
+        f,
+        {
+          as: "span",
+          content: p ?? r,
+          triggerClassName: t(
+            "block min-w-0 w-full truncate text-start font-['Manrope']",
+            m
+          ),
+          ...s,
+          children: r
+        }
+      )
+    }
+  );
+}
+export {
+  x as BadgeOverflowTooltip
+};

package/dist/components/feedback/tooltip/index.d.ts

@@ -3,5 +3,10 @@ export type { TooltipContentProps } from './tooltip.types';
 export { tooltipVariants } from './tooltip.variants';
 export { ButtonIconTooltip } from './button-icon-tooltip';
 export type { ButtonIconTooltipProps } from './button-icon-tooltip';
+export { OverflowTooltip } from './overflow-tooltip';
+export { BadgeOverflowTooltip } from './badge-overflow-tooltip';
+export type { BadgeOverflowTooltipProps } from './badge-overflow-tooltip';
+export { useOverflowTooltip } from './use-overflow-tooltip';
+export type { OverflowTooltipProps, UseOverflowTooltipOptions, UseOverflowTooltipResult, } from './overflow-tooltip.types';
 export { defaultTabTooltipRender, defaultAccordionTooltipRender, } from './tab-tooltip-render';
 export type { InfoTooltipRender } from './tab-tooltip-render';

package/dist/components/feedback/tooltip/index.js

@@ -1,14 +1,20 @@
-import { Tooltip as r, TooltipContent as e, TooltipProvider as i, TooltipTrigger as p } from "./tooltip.js";
-import { tooltipVariants as T } from "./tooltip.variants.js";
-import { ButtonIconTooltip as d } from "./button-icon-tooltip.js";
-import { defaultAccordionTooltipRender as a, defaultTabTooltipRender as m } from "./tab-tooltip-render.js";
+import { Tooltip as r, TooltipContent as e, TooltipProvider as p, TooltipTrigger as l } from "./tooltip.js";
+import { tooltipVariants as f } from "./tooltip.variants.js";
+import { ButtonIconTooltip as n } from "./button-icon-tooltip.js";
+import { OverflowTooltip as m } from "./overflow-tooltip.js";
+import { BadgeOverflowTooltip as a } from "./badge-overflow-tooltip.js";
+import { useOverflowTooltip as v } from "./use-overflow-tooltip.js";
+import { defaultAccordionTooltipRender as g, defaultTabTooltipRender as w } from "./tab-tooltip-render.js";
 export {
-  d as ButtonIconTooltip,
+  a as BadgeOverflowTooltip,
+  n as ButtonIconTooltip,
+  m as OverflowTooltip,
   r as Tooltip,
   e as TooltipContent,
-  i as TooltipProvider,
-  p as TooltipTrigger,
-  a as defaultAccordionTooltipRender,
-  m as defaultTabTooltipRender,
-  T as tooltipVariants
+  p as TooltipProvider,
+  l as TooltipTrigger,
+  g as defaultAccordionTooltipRender,
+  w as defaultTabTooltipRender,
+  f as tooltipVariants,
+  v as useOverflowTooltip
 };

package/dist/components/feedback/tooltip/overflow-tooltip.d.ts

@@ -0,0 +1,2 @@
+import { OverflowTooltipProps } from './overflow-tooltip.types';
+export declare function OverflowTooltip({ children, content, overflowMode, side, align, variant, className, triggerClassName, as: triggerElement, alwaysShow, disabled, focusable, }: OverflowTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/feedback/tooltip/overflow-tooltip.js

@@ -0,0 +1,92 @@
+import { jsx as n, jsxs as A } from "react/jsx-runtime";
+import { cn as b } from "../../../lib/utils.js";
+import { Tooltip as G, TooltipTrigger as H, TooltipContent as R } from "./tooltip.js";
+import { useOverflowTooltip as q } from "./use-overflow-tooltip.js";
+function M({
+  children: o,
+  content: i,
+  overflowMode: m = "ellipsis",
+  side: P = "top",
+  align: l,
+  variant: s,
+  className: t,
+  triggerClassName: r,
+  as: x = "span",
+  alwaysShow: C = !1,
+  disabled: p = !1,
+  focusable: w = !1
+}) {
+  const a = x, d = i ?? o, {
+    setTriggerRef: v,
+    onTriggerPointerEnter: h,
+    onTriggerPointerLeave: L,
+    onTriggerFocus: E,
+    onContentPointerEnter: O,
+    onContentPointerDown: F,
+    onContentPointerLeave: k,
+    onContentPointerUp: y,
+    triggerTabIndex: D,
+    isTooltipArmed: c,
+    isTooltipOpen: I,
+    tooltipContent: j,
+    handleTooltipOpenChange: U
+  } = q(o, {
+    content: i,
+    overflowMode: m,
+    alwaysShow: C,
+    disabled: p,
+    focusable: w,
+    contentDependency: d
+  }), e = `${r ?? ""} ${t ?? ""}`, f = /\btruncate\b/.test(e), g = /\b(inline-block|inline-flex|inline)\b/.test(
+    e
+  ), T = /\bflex\b/.test(e), u = /\bflex-1\b/.test(e), $ = b(
+    "outline-none min-w-0 max-w-full",
+    f && !g && !T && !u && "block w-full",
+    f && !g && !T && u && "block",
+    r,
+    t
+  );
+  return p ? /* @__PURE__ */ n(a, { className: b(r, t), children: o }) : /* @__PURE__ */ A(
+    G,
+    {
+      disableHoverableContent: !1,
+      open: c && I,
+      onOpenChange: U,
+      children: [
+        /* @__PURE__ */ n(H, { asChild: !0, children: /* @__PURE__ */ n(
+          a,
+          {
+            ref: v,
+            "data-component": "overflow-tooltip-trigger",
+            className: $,
+            onPointerEnter: h,
+            onPointerLeave: L,
+            tabIndex: D,
+            onFocus: E,
+            children: o
+          }
+        ) }),
+        c ? /* @__PURE__ */ n(
+          R,
+          {
+            side: P,
+            ...l ? { align: l } : {},
+            ...s ? { variant: s } : {},
+            onPointerEnter: O,
+            onPointerLeave: k,
+            onPointerDown: () => {
+              F();
+            },
+            onPointerUp: () => {
+              y();
+            },
+            children: j
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  M as OverflowTooltip
+};

package/dist/components/feedback/tooltip/overflow-tooltip.types.d.ts

@@ -0,0 +1,42 @@
+import { TextOverflowMode } from '../../../lib/overflow/is-text-overflowing';
+import { TooltipContentProps } from './tooltip.types';
+import type * as React from 'react';
+export interface UseOverflowTooltipOptions {
+    content?: React.ReactNode;
+    overflowMode?: TextOverflowMode;
+    alwaysShow?: boolean;
+    disabled?: boolean;
+    /** When false (default), trigger is pointer-only — safe inside buttons, options, comboboxes. */
+    focusable?: boolean;
+    contentDependency?: unknown;
+}
+export interface UseOverflowTooltipResult {
+    setTriggerRef: React.RefCallback<HTMLElement>;
+    onTriggerPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onTriggerPointerLeave: React.PointerEventHandler<HTMLElement>;
+    onTriggerFocus?: React.FocusEventHandler<HTMLElement>;
+    triggerTabIndex?: number;
+    isTooltipArmed: boolean;
+    isTooltipOpen: boolean;
+    tooltipContent: React.ReactNode;
+    recheckOverflow: () => boolean;
+    handleTooltipOpenChange: (isOpen: boolean) => void;
+    onContentPointerEnter: React.PointerEventHandler<HTMLElement>;
+    onContentPointerLeave: React.PointerEventHandler<HTMLElement>;
+    onContentPointerDown: () => void;
+    onContentPointerUp: () => void;
+}
+export interface OverflowTooltipProps {
+    children: React.ReactNode;
+    content?: React.ReactNode;
+    overflowMode?: TextOverflowMode;
+    side?: TooltipContentProps['side'];
+    align?: TooltipContentProps['align'];
+    variant?: TooltipContentProps['variant'];
+    className?: string;
+    triggerClassName?: string;
+    as?: 'span' | 'p' | 'div';
+    alwaysShow?: boolean;
+    disabled?: boolean;
+    focusable?: boolean;
+}

package/dist/components/feedback/tooltip/tooltip.d.ts

@@ -1,8 +1,8 @@
 import { TooltipContentProps } from './tooltip.types';
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
-declare const Tooltip: (props: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipProvider: ({ disableHoverableContent, ...providerProps }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ disableHoverableContent, ...tooltipProps }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };