@konstructio/ui 0.1.2-alpha.111 → 0.1.2-alpha.113

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-actions-menu/use-actions-menu.js

@@ -1,41 +1,44 @@
-import { useMenuInteractions as R } from "../use-menu-interactions/use-menu-interactions.js";
-import { useMenuKeyboardNavigation as w } from "../use-menu-keyboard-navigation/use-menu-keyboard-navigation.js";
-import { useRowHighlight as b } from "../use-row-highlight/use-row-highlight.js";
-import { useCallback as v, useId as y, useRef as o, useState as u } from "react";
-var k = () => {
-  const [e, a] = u(!1), [i, l] = u(!1), n = o(null), s = o(null), t = o(null), c = y(), d = v((O) => {
-    l(!0), a(O);
-  }, []), { closeMenu: r, handlePointerEnter: g, handlePointerLeave: p, handleTriggerClick: f, handleTriggerPointerDown: m, openMenu: h } = R({
+import { useMenuInteractions as P } from "../use-menu-interactions/use-menu-interactions.js";
+import { useMenuKeyboardNavigation as b } from "../use-menu-keyboard-navigation/use-menu-keyboard-navigation.js";
+import { useRowHighlight as y } from "../use-row-highlight/use-row-highlight.js";
+import { useCallback as C, useId as D, useRef as o, useState as u } from "react";
+var H = ({ openOnHover: a }) => {
+  const [e, l] = u(!1), [i, c] = u(!1), n = o(null), s = o(null), t = o(null), d = D(), g = C((w) => {
+    c(!0), l(w);
+  }, []), { closeMenu: r, handlePointerEnter: p, handlePointerLeave: f, handleTriggerClick: h, handleTriggerPointerDown: m, handleButtonPointerLeave: M, openMenu: I, selectAndClose: O } = P({
     isOpen: e,
     menuRef: t,
+    openOnHover: a,
     triggerRef: n,
-    setIsOpen: d
-  }), { handleMenuKeyDown: M, handleTriggerKeyDown: I } = w({
+    setIsOpen: g
+  }), { handleMenuKeyDown: R, handleTriggerKeyDown: v } = b({
     buttonRef: s,
     isOpen: e,
     menuRef: t,
     closeMenu: r,
-    openMenu: h
+    openMenu: I
   });
-  return b({
+  return y({
     isOpen: e,
     triggerRef: n
   }), {
     buttonRef: s,
     hasOpened: i,
     isOpen: e,
-    menuId: c,
+    menuId: d,
     menuRef: t,
     triggerRef: n,
     closeMenu: r,
-    handleMenuKeyDown: M,
-    handlePointerEnter: g,
-    handlePointerLeave: p,
-    handleTriggerClick: f,
-    handleTriggerKeyDown: I,
-    handleTriggerPointerDown: m
+    handleMenuKeyDown: R,
+    handlePointerEnter: p,
+    handlePointerLeave: f,
+    handleTriggerClick: h,
+    handleTriggerKeyDown: v,
+    handleTriggerPointerDown: m,
+    handleButtonPointerLeave: M,
+    selectAndClose: O
   };
 };
 export {
-  k as useActionsMenu
+  H as useActionsMenu
 };

package/dist/components/VirtualizedTable/components/Actions/components/PortalActions/hooks/use-menu-interactions/use-menu-interactions.js

@@ -1,72 +1,78 @@
 import "../../constants/index.js";
-import { useCallback as r, useEffect as T, useLayoutEffect as M, useRef as p } from "react";
-var x = ({ isOpen: l, menuRef: s, triggerRef: d, setIsOpen: n }) => {
-  const o = p(void 0), f = p(null), h = r(() => {
-    clearTimeout(o.current), n(!0);
-  }, [n]), i = r(() => {
-    clearTimeout(o.current), n(!1);
-  }, [n]), g = r(() => {
-    clearTimeout(o.current), o.current = setTimeout(() => {
+import { useCallback as r, useEffect as y, useLayoutEffect as b, useRef as T } from "react";
+var _ = ({ isOpen: l, menuRef: d, openOnHover: c, triggerRef: f, setIsOpen: n }) => {
+  const u = T(void 0), g = T(null), h = T(!1), m = r(() => {
+    clearTimeout(u.current), n(!0);
+  }, [n]), o = r(() => {
+    clearTimeout(u.current), n(!1);
+  }, [n]), p = r(() => {
+    h.current = !0, o();
+  }, [o]), w = r(() => {
+    clearTimeout(u.current), u.current = setTimeout(() => {
       n(!1);
     }, 100);
-  }, [n]), w = r((t) => {
-    t.pointerType !== "touch" && h();
-  }, [h]), E = r((t) => {
-    t.pointerType !== "touch" && g();
-  }, [g]), y = r((t) => {
-    f.current = t.pointerType;
-  }, []), v = r(() => {
-    const t = f.current;
-    if (f.current = null, clearTimeout(o.current), t && t !== "touch") {
+  }, [n]), L = r((t) => {
+    !c || h.current || t.pointerType === "touch" || m();
+  }, [m, c]), M = r((t) => {
+    !c || t.pointerType === "touch" || w();
+  }, [c, w]), v = r(() => {
+    h.current = !1;
+  }, []), C = r((t) => {
+    g.current = t.pointerType;
+  }, []), P = r(() => {
+    const t = g.current;
+    if (g.current = null, h.current = !1, clearTimeout(u.current), c && t && t !== "touch") {
       n(!0);
       return;
     }
     n((e) => !e);
-  }, [n]);
-  T(() => () => {
-    clearTimeout(o.current);
+  }, [c, n]);
+  y(() => () => {
+    clearTimeout(u.current);
   }, []);
-  const u = r(() => {
-    const t = d.current, e = s.current;
+  const s = r(() => {
+    const t = f.current, e = d.current;
     if (!t || !e) return;
-    const c = t.getBoundingClientRect(), a = c.bottom + 4 + e.offsetHeight <= window.innerHeight ? c.bottom + 4 : c.top - 4 - e.offsetHeight;
-    e.style.top = `${Math.round(Math.max(a, 4))}px`, e.style.left = `${Math.round(Math.max(c.right - e.offsetWidth, 4))}px`;
-  }, [s, d]);
-  return M(() => {
-    l && u();
-  }, [l, u]), T(() => {
+    const i = t.getBoundingClientRect(), a = i.bottom + 4 + e.offsetHeight <= window.innerHeight ? i.bottom + 4 : i.top - 4 - e.offsetHeight;
+    e.style.top = `${Math.round(Math.max(a, 4))}px`, e.style.left = `${Math.round(Math.max(i.right - e.offsetWidth, 4))}px`;
+  }, [d, f]);
+  return b(() => {
+    l && s();
+  }, [l, s]), y(() => {
     if (!l) return;
     const t = new AbortController(), e = (a) => {
-      const m = a.target;
-      d.current?.contains(m) || s.current?.contains(m) || i();
-    }, c = (a) => {
-      a.key === "Escape" && i();
+      const E = a.target;
+      f.current?.contains(E) || d.current?.contains(E) || o();
+    }, i = (a) => {
+      a.key === "Escape" && o();
     };
-    return document.addEventListener("mousedown", e, { signal: t.signal }), document.addEventListener("keydown", c, { signal: t.signal }), document.addEventListener("scroll", u, {
+    return document.addEventListener("mousedown", e, { signal: t.signal }), document.addEventListener("keydown", i, { signal: t.signal }), document.addEventListener("scroll", s, {
       signal: t.signal,
       capture: !0,
       passive: !0
-    }), window.addEventListener("resize", u, {
+    }), window.addEventListener("resize", s, {
       signal: t.signal,
       passive: !0
-    }), window.addEventListener("blur", i, { signal: t.signal }), () => {
+    }), window.addEventListener("blur", o, { signal: t.signal }), () => {
       t.abort();
     };
   }, [
     l,
-    s,
     d,
-    i,
-    u
+    f,
+    o,
+    s
   ]), {
-    closeMenu: i,
-    handlePointerEnter: w,
-    handlePointerLeave: E,
-    handleTriggerClick: v,
-    handleTriggerPointerDown: y,
-    openMenu: h
+    closeMenu: o,
+    handlePointerEnter: L,
+    handlePointerLeave: M,
+    handleTriggerClick: P,
+    handleTriggerPointerDown: C,
+    handleButtonPointerLeave: v,
+    openMenu: m,
+    selectAndClose: p
   };
 };
 export {
-  x as useMenuInteractions
+  _ as useMenuInteractions
 };

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,18 +1,18 @@
 import { t } from "../../../../utils-DnIJruo0.js";
-import { n as I } from "../../../../table.provider-MQ4T5Xb5.js";
-import { useTableContext as T } from "../../contexts/table.hook.js";
-import { isPaginationBarVisible as q } from "../../utils/pagination.js";
+import { useTableContext as I } from "../../contexts/table.hook.js";
+import { isPaginationBarVisible as T } from "../../utils/pagination.js";
+import { n as q } from "../../../../table.provider-CW1fpZcF.js";
 import { Skeleton as G } from "../Skeleton/Skeleton.js";
 import { ExpandableRow as J } from "../ExpandableRow/ExpandableRow.js";
 import { Fragment as K } from "react";
 import { jsx as e, jsxs as Q } from "react/jsx-runtime";
 var te = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) => {
-  const { table: m, pageSize: E, totalItems: R = -1 / 0, tableLoading: C, tableError: c, enableExpandedRow: D, classNameExpandedRow: _, classNameExpandedCell: j, classNameExpandedContent: z, enableHoverRow: u, classNameHoverRow: B, classNameActiveExpandedRow: V, renderExpandedRow: f, isBorderOnAdjacentCell: L, isExpandColumnVisible: A } = T();
+  const { table: m, pageSize: E, totalItems: R = -1 / 0, tableLoading: C, tableError: c, enableExpandedRow: D, classNameExpandedRow: _, classNameExpandedCell: j, classNameExpandedContent: z, enableHoverRow: u, classNameHoverRow: B, classNameActiveExpandedRow: V, renderExpandedRow: f, isBorderOnAdjacentCell: L, isExpandColumnVisible: A } = I();
   if (v || C) return /* @__PURE__ */ e(G, {
     numberOfRows: E,
     table: m
   });
-  const r = m.getRowModel().rows ?? [], d = N && q(R), x = r.length === 0 && !!c && !!a, h = r.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
+  const r = m.getRowModel().rows ?? [], d = N && T(R), x = r.length === 0 && !!c && !!a, h = r.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
   if (h) {
     const l = m.getVisibleLeafColumns().length;
     return /* @__PURE__ */ e("tbody", {
@@ -53,7 +53,7 @@ var te = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) =>
             }),
             "data-expanded": n ? !0 : void 0,
             ...o.columnDef.meta?.attributes ?? {},
-            children: I(o.columnDef.cell, O())
+            children: q(o.columnDef.cell, O())
           }, M);
         })
       }), H && /* @__PURE__ */ e(J, {

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -1,18 +1,18 @@
 import { t as o } from "../../../../utils-DnIJruo0.js";
 import { t as u } from "../../../../chevron-up-B8hiVgxZ.js";
 import { Typography as c } from "../../../Typography/Typography.js";
-import { a as b, i as v, n as w, r as S } from "../../../../dist-LRkZdylX.js";
-import { listVariants as k } from "../../../Select/components/List/List.variants.js";
-import { listItemVariants as N } from "../../../Select/components/ListItem/ListItem.variants.js";
-import { selectVariants as C } from "../../../Select/Select.variants.js";
-import { DEFAULT_PAGE_SIZES as y } from "../../constants/pagination.js";
-import { useTableContext as z } from "../../contexts/table.hook.js";
-import { useState as O } from "react";
+import { a as v, i as b, r as w, t as P } from "../../../../dist-CQSCPpFc.js";
+import { listVariants as S } from "../../../Select/components/List/List.variants.js";
+import { listItemVariants as k } from "../../../Select/components/ListItem/ListItem.variants.js";
+import { selectVariants as N } from "../../../Select/Select.variants.js";
+import { DEFAULT_PAGE_SIZES as C } from "../../constants/pagination.js";
+import { useTableContext as y } from "../../contexts/table.hook.js";
+import { useState as z } from "react";
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
-  const { pageSize: i, onPageSize: g, handlePage: h } = z(), [n, l] = O(!1), m = (t) => {
-    g(Number(t)), h(0), l(!1);
-  }, p = /* @__PURE__ */ e(w, {
+var _ = ({ pageSizes: d = C, isListPortal: f = !1, direction: s = "auto" }) => {
+  const { pageSize: i, onPageSize: g, handlePage: h } = y(), [l, n] = z(!1), p = (t) => {
+    g(Number(t)), h(0), n(!1);
+  }, m = /* @__PURE__ */ e(w, {
     asChild: !0,
     side: s === "up" ? "top" : "bottom",
     avoidCollisions: s === "auto",
@@ -24,19 +24,19 @@ var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
     children: /* @__PURE__ */ e("ul", {
       role: "listbox",
       "aria-label": "Rows per page",
-      className: o(k(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
+      className: o(S(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
       children: d.map((t) => {
         const a = String(t);
         return /* @__PURE__ */ e("li", {
           role: "option",
           "aria-selected": a === String(i),
           tabIndex: 0,
-          className: o(N(), "dark:bg-metal-800"),
+          className: o(k(), "dark:bg-metal-800"),
           onClick: () => {
-            m(a);
+            p(a);
           },
           onKeyDown: (x) => {
-            x.key === "Enter" && m(a);
+            x.key === "Enter" && p(a);
           },
           children: /* @__PURE__ */ e(c, {
             variant: "body2",
@@ -49,21 +49,21 @@ var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
   });
   return /* @__PURE__ */ r("div", {
     className: "kvt-page-size flex items-center gap-2 dark:text-metal-300",
-    children: [/* @__PURE__ */ e("span", { children: "Show" }), /* @__PURE__ */ r(v, {
-      open: n,
-      onOpenChange: l,
-      children: [/* @__PURE__ */ r(b, {
+    children: [/* @__PURE__ */ e("span", { children: "Show" }), /* @__PURE__ */ r(P, {
+      open: l,
+      onOpenChange: n,
+      children: [/* @__PURE__ */ r(v, {
         "aria-label": "Rows per page",
-        className: o(C(), "w-22 bg-white"),
+        className: o(N(), "w-22 bg-white"),
         children: [/* @__PURE__ */ e(c, {
           variant: "body2",
           className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
           children: i
         }), /* @__PURE__ */ e(u, {
-          "data-state": n ? "open" : "closed",
+          "data-state": l ? "open" : "closed",
           className: "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none"
         })]
-      }), f ? /* @__PURE__ */ e(S, { children: p }) : p]
+      }), f ? /* @__PURE__ */ e(b, { children: m }) : m]
     })]
   });
 };

package/dist/components/VirtualizedTable/components/EmptyResults/EmptyResults.js

@@ -0,0 +1,30 @@
+import { Button as n } from "../../../Button/Button.js";
+import { useTableContext as l } from "../../contexts/table.hook.js";
+import { sendResetFiltersEvent as p } from "../../events/filters/filters.js";
+import { EmptyState as c } from "../EmptyState/EmptyState.js";
+import { Fragment as d, jsx as e, jsxs as u } from "react/jsx-runtime";
+var f = ({ className: r, description: s = "Filters may be too restrictive.", image: o, resetLabel: a = "Reset filters", title: i = "No results", onResetFilters: t }) => {
+  const { tableId: m } = l();
+  return /* @__PURE__ */ e(c, {
+    className: r,
+    image: o,
+    title: i,
+    description: /* @__PURE__ */ u(d, { children: [s, /* @__PURE__ */ e(n, {
+      variant: "link",
+      appearance: "compact",
+      className: "p-0",
+      onClick: () => {
+        if (t) {
+          t();
+          return;
+        }
+        p(m);
+      },
+      children: a
+    })] })
+  });
+};
+f.displayName = "KonstructVirtualizedTableEmptyResults";
+export {
+  f as EmptyResults
+};

package/dist/components/VirtualizedTable/components/EmptyState/EmptyState.js

@@ -0,0 +1,32 @@
+import { t as c } from "../../../../utils-DnIJruo0.js";
+import { Typography as l } from "../../../Typography/Typography.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+var n = ({ action: t, className: s, description: a, image: r, title: m }) => /* @__PURE__ */ i("div", {
+  className: c("flex flex-col items-center gap-4 px-4 py-20 text-center", s),
+  children: [
+    r && /* @__PURE__ */ e("div", {
+      className: "flex items-center justify-center",
+      children: r
+    }),
+    /* @__PURE__ */ e(l, {
+      variant: "subtitle3",
+      component: "h2",
+      className: "text-slate-800 dark:text-metal-50",
+      children: m
+    }),
+    a && /* @__PURE__ */ e(l, {
+      variant: "body2",
+      component: "p",
+      className: "flex flex-wrap items-center justify-center gap-1 text-slate-500 dark:text-metal-300",
+      children: a
+    }),
+    t && /* @__PURE__ */ e("div", {
+      className: "pt-2",
+      children: t
+    })
+  ]
+});
+n.displayName = "KonstructVirtualizedTableEmptyState";
+export {
+  n as EmptyState
+};

package/dist/components/VirtualizedTable/components/ErrorState/ErrorState.js

@@ -0,0 +1,35 @@
+import { AlertOutlineIcon as s } from "../../../../assets/icons/components/AlertOutline.js";
+import { Button as l } from "../../../Button/Button.js";
+import { useTableContext as d } from "../../contexts/table.hook.js";
+import { sendRefreshEvent as p } from "../../events/refresh/refresh.js";
+import { EmptyState as c } from "../EmptyState/EmptyState.js";
+import { Fragment as f, jsx as e, jsxs as h } from "react/jsx-runtime";
+var u = ({ className: t, description: a, icon: o = /* @__PURE__ */ e(s, {
+  size: 40,
+  className: "text-red-600 dark:text-red-400",
+  "aria-hidden": "true"
+}), retryLabel: n = "Refresh", title: i = "Something went wrong", onRetry: r }) => {
+  const { tableId: m } = d();
+  return /* @__PURE__ */ e(c, {
+    className: t,
+    image: o,
+    title: i,
+    description: /* @__PURE__ */ h(f, { children: [a, /* @__PURE__ */ e(l, {
+      variant: "link",
+      appearance: "compact",
+      className: "p-0",
+      onClick: () => {
+        if (r) {
+          r();
+          return;
+        }
+        p(m);
+      },
+      children: n
+    })] })
+  });
+};
+u.displayName = "KonstructVirtualizedTableErrorState";
+export {
+  u as ErrorState
+};

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -4,14 +4,14 @@ import { t as G } from "../../../../utils-DnIJruo0.js";
 import { Button as H } from "../../../Button/Button.js";
 import { resetEvent as J } from "../../../Filter/events/index.js";
 import { Filter as a } from "../../../Filter/Filter.js";
-import { t as K } from "../../../../debounce-BdyZeJQk.js";
+import { t as K } from "../../../../debounce-dMRJxNsT.js";
 import { useTableContext as Q } from "../../contexts/table.hook.js";
-import { getTableId as U } from "../../utils/get-table-id.js";
-import { t as W } from "../../../../events.types-BG1Uh8i6.js";
+import { t as U } from "../../../../events.types-BG1Uh8i6.js";
+import { getTableId as W } from "../../utils/get-table-id.js";
 import { useEffect as X, useMemo as Y, useRef as Z } from "react";
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
 var f = /* @__PURE__ */ V(K(), 1), ie = ({ id: F, actions: b, filters: v, multiSelectFilter: S, placeholder: R, showFilterInput: D = !0, showResetButton: w = !0, resetButtonClassName: T, closeOnApply: k = !0 }) => {
-  const l = Z(null), m = U(F), { termOfSearch: x, multiselectSelected: M, dateFilters: E, dateRangeFilters: _, timeFilters: j, onChangeTermOfSearch: c, onSelectMultiselect: A, onSelectDateFilter: I, onSelectDateRangeFilter: d, onSelectTimeFilter: O } = Q(), B = [...v ?? S?.map((e) => ({
+  const l = Z(null), m = W(F), { termOfSearch: x, multiselectSelected: M, dateFilters: E, dateRangeFilters: _, timeFilters: j, onChangeTermOfSearch: c, onSelectMultiselect: A, onSelectDateFilter: I, onSelectDateRangeFilter: d, onSelectTimeFilter: O } = Q(), B = [...v ?? S?.map((e) => ({
     ...e,
     type: "badgeMultiSelect"
   })) ?? [], ...b ?? []], h = (e, t) => {
@@ -21,7 +21,7 @@ var f = /* @__PURE__ */ V(K(), 1), ie = ({ id: F, actions: b, filters: v, multiS
   };
   X(() => {
     const e = new AbortController();
-    return document.addEventListener(W.RESET_FILTERS, (t) => {
+    return document.addEventListener(U.RESET_FILTERS, (t) => {
       const { detail: o } = t;
       o.tableId === m && (c(""), l.current && (l.current.value = ""), J(m));
     }, { signal: e.signal }), () => e.abort();

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -1,11 +1,11 @@
 import { t } from "../../../../utils-DnIJruo0.js";
-import { n as g } from "../../../../table.provider-MQ4T5Xb5.js";
-import { useTableContext as k } from "../../contexts/table.hook.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+import { n as k } from "../../../../table.provider-CW1fpZcF.js";
 import u from "../../assets/chevron-up.js";
 import C from "../../assets/chevron-down.js";
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
 var D = ({ className: c, classNameArrows: i, classNameActiveArrows: l, classNameHeaderContent: m }) => {
-  const { table: s, headerContent: d, onSorting: n } = k(), p = (a) => {
+  const { table: s, headerContent: d, onSorting: n } = g(), p = (a) => {
     n([{
       id: a.id,
       desc: !1
@@ -32,7 +32,7 @@ var D = ({ className: c, classNameArrows: i, classNameActiveArrows: l, className
         className: t("kvt-header-cell", "px-4", "py-3", "text-left", "text-xs", !d && "first:rounded-tl-lg", !d && "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", e.columnDef.meta?.headerClassName),
         children: /* @__PURE__ */ o("span", {
           className: "flex items-center gap-2 w-full",
-          children: [g(e.columnDef.header, f()), e.getCanSort() && /* @__PURE__ */ o("div", {
+          children: [k(e.columnDef.header, f()), e.getCanSort() && /* @__PURE__ */ o("div", {
             className: t("flex flex-col text-slate-400 justify-center items-center gap-1", i),
             role: "presentation",
             children: [/* @__PURE__ */ r(u, {

package/dist/components/VirtualizedTable/components/TruncateText/TruncateText.js

@@ -1,43 +1,50 @@
-import { o as R } from "../../../../rolldown-runtime-Dw9YIBcH.js";
-import { t as i } from "../../../../utils-DnIJruo0.js";
-import { Typography as l } from "../../../Typography/Typography.js";
-import { t as _ } from "../../../../debounce-BdyZeJQk.js";
-import { Tooltip as g } from "../../../Tooltip/Tooltip.js";
-import { useCallback as v, useEffect as a, useRef as z, useState as E } from "react";
-import { jsx as n } from "react/jsx-runtime";
-var L = /* @__PURE__ */ R(_(), 1), A = ({ getValue: u, value: m, textClassName: c, side: f = "bottom", sideOffset: p, bgClassName: d, arrowClassName: b, className: h, delayDuration: w = 0 }) => {
-  const o = z(null), [T, x] = E(!1), r = m ?? u().toLocaleLowerCase(), t = v(() => {
-    const e = o.current;
-    e && x(e.scrollWidth > e.clientWidth);
-  }, []);
-  return a(() => {
-    const e = new AbortController(), s = (0, L.default)(t, 300);
-    return window.addEventListener("resize", s, { signal: e.signal }), () => {
-      e.abort(), s.cancel();
+import { t as g } from "../../../../utils-DnIJruo0.js";
+import { Tooltip as j } from "../../../Tooltip/Tooltip.js";
+import { Typography as E } from "../../../Typography/Typography.js";
+import { CopyButton as L } from "../../../CopyButton/CopyButton.js";
+import { useEffect as W, useState as l } from "react";
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+var q = ({ getValue: a, value: m, textClassName: f, variant: u, component: p = "p", copyable: d = !1, copyButtonProps: h, side: x = "bottom", sideOffset: T, bgClassName: b, arrowClassName: v, className: w, delayDuration: y = 0 }) => {
+  const [e, C] = l(null), [n, N] = l(!1), t = m ?? a?.().toLocaleLowerCase() ?? "";
+  W(() => {
+    if (!e) return;
+    const c = () => {
+      N(e.scrollWidth > e.clientWidth);
     };
-  }, [t]), a(() => {
-    t();
-  }, [t]), T ? /* @__PURE__ */ n(g, {
-    content: r,
-    side: f,
-    sideOffset: p,
-    bgClassName: d,
-    arrowClassName: b,
-    className: h,
-    delayDuration: w,
-    children: /* @__PURE__ */ n(l, {
-      ref: o,
-      component: "p",
-      className: i("w-full truncate cursor-pointer", c),
-      children: r
-    })
-  }) : /* @__PURE__ */ n(l, {
-    ref: o,
-    component: "p",
-    className: i("w-full truncate", c),
-    children: r
-  });
+    c();
+    const i = new ResizeObserver(c);
+    return i.observe(e), () => {
+      i.disconnect();
+    };
+  }, [e, t]);
+  const o = /* @__PURE__ */ r(E, {
+    ref: C,
+    variant: u,
+    component: p,
+    className: g("w-full truncate", n && "cursor-pointer", f),
+    children: t
+  }), s = n ? /* @__PURE__ */ r(j, {
+    content: t,
+    side: x,
+    sideOffset: T,
+    bgClassName: b,
+    arrowClassName: v,
+    className: w,
+    delayDuration: y,
+    children: o
+  }) : o;
+  return d ? /* @__PURE__ */ z("div", {
+    className: "flex min-w-0 items-center gap-2",
+    children: [/* @__PURE__ */ r("span", {
+      className: "min-w-0 flex-1",
+      children: s
+    }), /* @__PURE__ */ r(L, {
+      text: t,
+      label: t,
+      ...h
+    })]
+  }) : s;
 };
 export {
-  A as TruncateText
+  q as TruncateText
 };