impact-nova 2.2.4 → 2.2.6

package/dist/components/data/expandable-list-item/expandable-list-item-preset.js

@@ -1,13 +1,13 @@
 import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import * as R from "react";
-import { ExpandableListItemAttributes as T } from "./expandable-list-item-attributes.js";
-import { ExpandableListItemMetrics as v } from "./expandable-list-item-metrics.js";
-import { ExpandableListItemRoot as f, ExpandableListItemRow as o, ExpandableListItemCheckbox as C, ExpandableListItemHeader as E, ExpandableListItemMedia as I, ExpandableListItemTitle as k, ExpandableListItemDescription as L, ExpandableListItemTrigger as y, ExpandableListItemContent as j, ExpandableListItemFooter as M } from "./expandable-list-item-parts.js";
+import * as P from "react";
+import { ExpandableListItemAttributes as R } from "./expandable-list-item-attributes.js";
+import { ExpandableListItemMetrics as T } from "./expandable-list-item-metrics.js";
+import { ExpandableListItemRoot as o, ExpandableListItemRow as f, ExpandableListItemCheckbox as C, ExpandableListItemHeader as E, ExpandableListItemMedia as I, ExpandableListItemTitle as k, ExpandableListItemDescription as L, ExpandableListItemTrigger as v, ExpandableListItemContent as j, ExpandableListItemFooter as M } from "./expandable-list-item-parts.js";
 function O(e) {
   switch (e.type) {
     case "metrics":
       return /* @__PURE__ */ l(
-        v,
+        T,
         {
           sectionId: e.id,
           columns: e.columns
@@ -16,12 +16,13 @@ function O(e) {
       );
     case "attributes":
       return /* @__PURE__ */ l(
-        T,
+        R,
         {
           title: e.title,
           tags: e.tags,
           maxVisibleTags: e.maxVisibleTags,
-          formatOverflow: e.formatOverflow
+          formatOverflow: e.formatOverflow,
+          externalCopyFunction: e.externalCopyFunction
         },
         e.id
       );
@@ -34,7 +35,7 @@ function O(e) {
 function V({ section: e }) {
   return /* @__PURE__ */ l("div", { className: "px-4 py-4 sm:px-5", children: e.content });
 }
-const $ = R.forwardRef(
+const $ = P.forwardRef(
   ({
     className: e,
     title: t,
@@ -43,31 +44,31 @@ const $ = R.forwardRef(
     selection: a,
     selected: g,
     expanded: w,
-    defaultExpanded: S = !1,
-    onExpandedChange: P,
+    defaultExpanded: y = !1,
+    onExpandedChange: S,
     disabled: c,
     sections: i,
     panelFooter: h,
-    expandAriaLabel: s = "Expand details",
-    collapseAriaLabel: u = "Collapse details",
-    ...b
-  }, p) => {
+    expandAriaLabel: u = "Expand details",
+    collapseAriaLabel: s = "Collapse details",
+    ...p
+  }, b) => {
     const x = !!(g || a?.checked);
     return i != null && i.length > 0 || h != null ? /* @__PURE__ */ d(
-      f,
+      o,
       {
-        ref: p,
+        ref: b,
         className: e,
         selected: x,
         expanded: w,
-        defaultExpanded: S,
-        onExpandedChange: P,
+        defaultExpanded: y,
+        onExpandedChange: S,
         disabled: c,
-        expandAriaLabel: s,
-        collapseAriaLabel: u,
-        ...b,
+        expandAriaLabel: u,
+        collapseAriaLabel: s,
+        ...p,
         children: [
-          /* @__PURE__ */ d(o, { children: [
+          /* @__PURE__ */ d(f, { children: [
             a ? /* @__PURE__ */ l(
               C,
               {
@@ -79,7 +80,7 @@ const $ = R.forwardRef(
                 "aria-label": a["aria-label"] ?? `Select ${t}`
               }
             ) : null,
-            /* @__PURE__ */ l(y, { children: /* @__PURE__ */ d(E, { children: [
+            /* @__PURE__ */ l(v, { children: /* @__PURE__ */ d(E, { children: [
               /* @__PURE__ */ d(I, { children: [
                 /* @__PURE__ */ l(k, { children: t }),
                 m
@@ -94,16 +95,16 @@ const $ = R.forwardRef(
         ]
       }
     ) : /* @__PURE__ */ l(
-      f,
+      o,
       {
-        ref: p,
+        ref: b,
         className: e,
         selected: x,
         disabled: c,
-        expandAriaLabel: s,
-        collapseAriaLabel: u,
-        ...b,
-        children: /* @__PURE__ */ d(o, { children: [
+        expandAriaLabel: u,
+        collapseAriaLabel: s,
+        ...p,
+        children: /* @__PURE__ */ d(f, { children: [
           a ? /* @__PURE__ */ l(
             C,
             {

package/dist/components/data/expandable-list-item/expandable-list-item.types.d.ts

@@ -1,4 +1,9 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
+export interface ExternalCopyFunctionProps {
+    e: React.MouseEvent<HTMLButtonElement>;
+    val: string | number;
+    index: number;
+}
 export type ExpandableListItemMetricColumn = {
     label: string;
     value: string;
@@ -19,6 +24,8 @@ export type ExpandableListItemAttributesSection = {
     maxVisibleTags?: number;
     /** Default: `(n) => \`+\${n}\``. */
     formatOverflow?: (hiddenCount: number) => string;
+    /** Override the default clipboard copy inside the overflow popover. */
+    externalCopyFunction?: (props: ExternalCopyFunctionProps) => void;
 };
 /** Arbitrary block inside the expanded panel. */
 export type ExpandableListItemCustomSection = {

package/dist/components/data/expandable-list-item/index.d.ts

@@ -2,4 +2,4 @@ export { ExpandableListItem, type ExpandableListItemProps, } from './expandable-
 export { ExpandableListItemRoot, ExpandableListItemRow, ExpandableListItemCheckbox, ExpandableListItemTrigger, ExpandableListItemTitle, ExpandableListItemDescription, ExpandableListItemMedia, ExpandableListItemHeader, ExpandableListItemContent, ExpandableListItemFooter, type ExpandableListItemRootProps, type ExpandableListItemCheckboxProps, } from './expandable-list-item-parts';
 export { ExpandableListItemMetrics, type ExpandableListItemMetricsProps } from './expandable-list-item-metrics';
 export { ExpandableListItemAttributes, type ExpandableListItemAttributesProps, } from './expandable-list-item-attributes';
-export type { ExpandableListItemAttributesSection, ExpandableListItemCustomSection, ExpandableListItemMetricColumn, ExpandableListItemMetricsSection, ExpandableListItemSelection, ExpandableListItemSection, } from './expandable-list-item.types';
+export type { ExternalCopyFunctionProps, ExpandableListItemAttributesSection, ExpandableListItemCustomSection, ExpandableListItemMetricColumn, ExpandableListItemMetricsSection, ExpandableListItemSelection, ExpandableListItemSection, } from './expandable-list-item.types';

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/tooltip/index.d.ts

@@ -3,5 +3,8 @@ 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 { 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,18 @@
-import { Tooltip as r, TooltipContent as e, TooltipProvider as i, TooltipTrigger as p } from "./tooltip.js";
+import { Tooltip as r, TooltipContent as e, TooltipProvider as p, TooltipTrigger as i } 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 { ButtonIconTooltip as n } from "./button-icon-tooltip.js";
+import { OverflowTooltip as m } from "./overflow-tooltip.js";
+import { useOverflowTooltip as a } from "./use-overflow-tooltip.js";
+import { defaultAccordionTooltipRender as c, defaultTabTooltipRender as v } from "./tab-tooltip-render.js";
 export {
-  d as ButtonIconTooltip,
+  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,
+  i as TooltipTrigger,
+  c as defaultAccordionTooltipRender,
+  v as defaultTabTooltipRender,
+  T as tooltipVariants,
+  a 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,69 @@
+import { jsx as e, jsxs as F } from "react/jsx-runtime";
+import { cn as f } from "../../../lib/utils.js";
+import { Tooltip as I, TooltipTrigger as P, TooltipContent as b } from "./tooltip.js";
+import { useOverflowTooltip as y } from "./use-overflow-tooltip.js";
+function k({
+  children: o,
+  content: t,
+  overflowMode: T = "ellipsis",
+  side: m = "top",
+  align: n,
+  variant: r,
+  className: i,
+  triggerClassName: p,
+  as: a = "span",
+  alwaysShow: c = !1,
+  disabled: l = !1,
+  focusable: u = !1
+}) {
+  const s = a, d = t ?? o, {
+    setTriggerRef: x,
+    onTriggerPointerEnter: C,
+    onTriggerFocus: O,
+    triggerTabIndex: h,
+    isTooltipArmed: g,
+    isTooltipOpen: w,
+    tooltipContent: E,
+    handleTooltipOpenChange: j
+  } = y(o, {
+    content: t,
+    overflowMode: T,
+    alwaysShow: c,
+    disabled: l,
+    focusable: u,
+    contentDependency: d
+  }), v = f("outline-none", p, i);
+  return l ? /* @__PURE__ */ e(s, { className: f(p, i), children: o }) : /* @__PURE__ */ F(
+    I,
+    {
+      open: g && w,
+      onOpenChange: j,
+      children: [
+        /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(
+          s,
+          {
+            ref: x,
+            "data-component": "overflow-tooltip-trigger",
+            className: v,
+            onPointerEnter: C,
+            tabIndex: h,
+            onFocus: O,
+            children: o
+          }
+        ) }),
+        g ? /* @__PURE__ */ e(
+          b,
+          {
+            side: m,
+            ...n ? { align: n } : {},
+            ...r ? { variant: r } : {},
+            children: E
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  k as OverflowTooltip
+};