@versini/ui-table 3.0.17 → 3.1.1

package/dist/index.js

@@ -1,34 +1,34 @@
-import s from "clsx";
-import { jsx as i, jsxs as y, Fragment as W } from "react/jsx-runtime";
-import T, { useContext as f } from "react";
+import o from "clsx";
+import { jsx as i, jsxs as N, Fragment as ie } from "react/jsx-runtime";
+import R, { useRef as T, useLayoutEffect as $, useMemo as q, useState as ne, useEffect as Y, useCallback as le, useContext as B } from "react";
 /*!
-  @versini/ui-table v3.0.17
+  @versini/ui-table v3.1.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TABLE__ || (window.__VERSINI_UI_TABLE__ = {
-    version: "3.0.17",
-    buildTime: "01/24/2025 09:19 AM EST",
+    version: "3.1.1",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const _ = "thead", C = "tfoot", u = "tbody", p = {
+const z = "thead", U = "tfoot", w = "tbody", S = {
   ASC: "asc",
   DESC: "desc"
-}, P = ({
+}, ce = ({
   mode: e,
-  className: a,
+  className: r,
   wrapperClassName: t,
-  stickyHeader: r,
-  stickyFooter: o
+  stickyHeader: a,
+  stickyFooter: s
 }) => ({
-  wrapper: s(
+  wrapper: o(
     "not-prose relative w-full rounded-lg shadow-md",
     {
-      "overflow-x-auto": !r && !o,
-      "overflow-y-scroll": r || o,
+      "overflow-x-auto": !a && !s,
+      "overflow-y-scroll": a || s,
       "bg-surface-darker": e === "dark" || e === "system",
       "bg-surface-light": e === "light" || e === "alt-system",
       "dark:bg-surface-light": e === "system",
@@ -40,205 +40,205 @@ const _ = "thead", C = "tfoot", u = "tbody", p = {
     },
     t
   ),
-  table: s("my-0 w-full text-left text-sm", a, {
+  table: o("my-0 w-full text-left text-sm", r, {
     "text-copy-light": e === "dark",
     "text-copy-dark": e === "light",
     "text-copy-light dark:text-copy-dark": e === "system",
     "text-copy-dark dark:text-copy-light": e === "alt-system"
   }),
-  caption: s("py-2 text-sm font-bold", {
+  caption: o("py-2 text-sm font-bold", {
     "text-copy-light": e === "dark",
     "text-copy-dark": e === "light",
     "text-copy-light dark:text-copy-dark": e === "system",
     "text-copy-dark dark:text-copy-light": e === "alt-system"
   })
-}), D = ({
+}), de = ({
   className: e,
-  stickyHeader: a,
+  stickyHeader: r,
   mode: t
-}) => s(
+}) => o(
   {
-    "sticky top-0 z-10": a,
-    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": a && t === "dark",
-    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": a && t === "system",
-    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": a && t === "light",
-    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": a && t === "alt-system"
+    "sticky top-0 z-10": r,
+    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": r && t === "dark",
+    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": r && t === "system",
+    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": r && t === "light",
+    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": r && t === "alt-system"
   },
   e
-), H = ({
+), ge = ({
   className: e,
-  stickyFooter: a,
+  stickyFooter: r,
   mode: t
-}) => s(
+}) => o(
   {
-    "sticky bottom-0 z-10": a,
-    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": a && t === "dark",
-    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": a && t === "system",
-    "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": a && t === "light",
-    "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": a && t === "alt-system"
+    "sticky bottom-0 z-10": r,
+    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": r && t === "dark",
+    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": r && t === "system",
+    "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": r && t === "light",
+    "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": r && t === "alt-system"
   },
   e
-), $ = ({
+), he = ({
   mode: e,
-  className: a,
+  className: r,
   cellWrapper: t
-}) => t === _ || t === C ? s(
+}) => t === z || t === U ? o(
   {
     "bg-table-head-dark": e === "dark" || e === "system",
     "bg-table-head-light": e === "light" || e === "alt-system",
     "dark:bg-table-head-light": e === "system",
     "dark:bg-table-head-dark": e === "alt-system"
   },
-  a
-) : s(
+  r
+) : o(
   "border-b last:border-0",
   {
     "border-table-dark": e === "dark" || e === "system",
-    "odd:bg-table-dark-odd even:bg-table-dark-even": t === u && e === "dark",
+    "odd:bg-table-dark-odd even:bg-table-dark-even": t === w && e === "dark",
     "border-table-light": e === "light" || e === "alt-system",
-    "odd:bg-table-light-odd even:bg-table-light-even": t === u && e === "light",
+    "odd:bg-table-light-odd even:bg-table-light-even": t === w && e === "light",
     "dark:border-table-light": e === "system",
-    "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": t === u && e === "system",
+    "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": t === w && e === "system",
     "dark:border-table-dark": e === "alt-system",
-    "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": t === u && e === "alt-system"
+    "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": t === w && e === "alt-system"
   },
-  a
-), F = ({
+  r
+), be = ({
   cellWrapper: e,
-  className: a,
+  className: r,
   compact: t,
-  mode: r,
-  align: o
+  mode: a,
+  align: s
 }) => ({
-  alignClasses: s({
-    "flex justify-start text-left": o === "left",
-    "flex justify-center text-center": o === "center",
-    "flex justify-end text-right": o === "right"
+  alignClasses: o({
+    "flex justify-start text-left": s === "left",
+    "flex justify-center text-center": s === "center",
+    "flex justify-end text-right": s === "right"
   }),
-  mainClasses: s(
+  mainClasses: o(
     {
-      "text-copy-light": r === "dark" || r === "system",
-      "text-copy-dark": r === "light" || r === "alt-system",
-      "dark:text-copy-dark": r === "system",
-      "dark:text-copy-light": r === "alt-system",
-      "px-4 py-3": !t && (e === _ || e === C),
-      "p-4": !t && e === u,
+      "text-copy-light": a === "dark" || a === "system",
+      "text-copy-dark": a === "light" || a === "alt-system",
+      "dark:text-copy-dark": a === "system",
+      "dark:text-copy-light": a === "alt-system",
+      "px-4 py-3": !t && (e === z || e === U),
+      "p-4": !t && e === w,
       "px-2 py-1.5": t
     },
-    a
+    r
   )
-}), G = ({
+}), me = ({
   buttonClassName: e
-}) => s("rounded-none text-sm", e), I = "av-button", B = "icon", E = "button", N = "link", Y = ({
+}) => o("rounded-none text-sm", e), F = "av-button", M = "icon", Z = "button", P = "link", ue = ({
   type: e,
-  size: a,
+  size: r,
   labelRight: t,
-  labelLeft: r,
-  align: o
+  labelLeft: a,
+  align: s
 }) => {
-  const l = "max-h-8 py-0 px-2", c = "max-h-9 h-8 px-3", d = "max-h-12 py-2 px-4";
+  const n = "max-h-8 py-0 px-2", l = "max-h-9 h-8 px-3", d = "max-h-12 py-2 px-4";
   switch (e) {
-    case E:
-    case N:
-      return s({
-        [l]: a === "small",
-        [c]: a === "medium",
-        [d]: a === "large"
+    case Z:
+    case P:
+      return o({
+        [n]: r === "small",
+        [l]: r === "medium",
+        [d]: r === "large"
       });
-    case B:
-      return s("inline-flex items-center", {
-        "justify-center": o === "center",
-        "justify-start": o === "left",
-        "justify-end": o === "right",
-        "h-6 w-6 p-0": a === "small" && !(t || r),
-        "h-6 px-2": a === "small" && (t || r),
-        "h-8 w-8 p-1": a === "medium" && !(t || r),
-        "h-8 px-3": a === "medium" && (t || r),
-        "h-12 w-12 p-2": a === "large" && !(t || r),
-        "h-12 px-4": a === "large" && (t || r)
+    case M:
+      return o("inline-flex items-center", {
+        "justify-center": s === "center",
+        "justify-start": s === "left",
+        "justify-end": s === "right",
+        "h-6 py-0": r === "small" && !(t || a),
+        "h-6": r === "small" && (t || a),
+        "h-8 py-1": r === "medium" && !(t || a),
+        "h-8": r === "medium" && (t || a),
+        "h-12 py-2": r === "large" && !(t || a),
+        "h-12": r === "large" && (t || a)
       });
   }
-}, q = ({
+}, ye = ({
   type: e,
-  size: a,
+  size: r,
   labelRight: t,
-  labelLeft: r
+  labelLeft: a
 }) => {
-  const o = "text-sm font-medium", l = "text-base font-medium", c = "text-lg font-medium";
+  const s = "text-sm font-medium", n = "text-base font-medium", l = "text-lg font-medium";
   switch (e) {
-    case E:
-    case N:
-      return s({
-        "text-center": e === N,
-        [o]: a === "small",
-        [l]: a === "medium",
-        [c]: a === "large"
+    case Z:
+    case P:
+      return o({
+        "text-center": e === P,
+        [s]: r === "small",
+        [n]: r === "medium",
+        [l]: r === "large"
       });
-    case B:
-      return s({
-        [o]: a === "small" && (t || r),
-        [l]: a === "medium" && (t || r),
-        [c]: a === "large" && (t || r)
+    case M:
+      return o({
+        [s]: r === "small" && (t || a),
+        [n]: r === "medium" && (t || a),
+        [l]: r === "large" && (t || a)
       });
   }
-}, J = ({
+}, fe = ({
   mode: e,
-  noBackground: a,
+  noBackground: r,
   noTruncate: t,
-  variant: r
+  variant: a
 }) => {
-  if (a)
+  if (r)
     return "not-prose";
-  if (r === "primary")
-    return s("not-prose", {
+  if (a === "primary")
+    return o("not-prose", {
       truncate: !t,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
       "dark:text-copy-lighter": e === "system",
       "dark:text-copy-light": e === "alt-system"
     });
-  if (r === "secondary")
-    return s("not-prose", {
+  if (a === "secondary")
+    return o("not-prose", {
       truncate: !t,
       "text-copy-light": e === "light" || e === "system",
       "text-copy-lighter": e === "dark" || e === "alt-system",
       "dark:text-copy-lighter": e === "alt-system",
       "dark:text-copy-light": e === "system"
     });
-  if (r === "danger")
-    return s("not-prose", {
+  if (a === "danger")
+    return o("not-prose", {
       truncate: !t,
       "text-copy-light": e === "dark" || e === "system",
       "text-copy-lighter": e === "light" || e === "alt-system",
       "dark:text-copy-lighter": e === "system",
       "dark:text-copy-light": e === "alt-system"
     });
-  if (r === "selected")
-    return s("not-prose text-copy-lighter", {
+  if (a === "selected")
+    return o("not-prose text-copy-lighter", {
       truncate: !t
     });
-}, K = ({
+}, ke = ({
   mode: e,
-  noBackground: a,
+  noBackground: r,
   variant: t
 }) => {
-  if (!a) {
+  if (!r) {
     if (t === "primary")
-      return s({
+      return o({
         "bg-action-dark": e === "dark",
         "bg-action-light": e === "light",
         "bg-action-dark dark:bg-action-light": e === "system",
         "bg-action-light dark:bg-action-dark": e === "alt-system"
       });
     if (t === "secondary")
-      return s({
+      return o({
         "bg-action-dark": e === "light",
         "bg-action-light": e === "dark",
         "bg-action-dark dark:bg-action-light": e === "alt-system",
         "bg-action-light dark:bg-action-dark": e === "system"
       });
     if (t === "danger")
-      return s({
+      return o({
         "bg-action-danger-dark": e === "dark",
         "bg-action-danger-light": e === "light",
         "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
@@ -247,35 +247,35 @@ const _ = "thead", C = "tfoot", u = "tbody", p = {
     if (t === "selected")
       return "bg-action-selected-dark";
   }
-}, Q = ({
+}, ve = ({
   radius: e
-}) => s({
+}) => o({
   "rounded-full": e === "large",
   "rounded-md": e === "medium",
   "rounded-sm": e === "small"
-}), X = ({
+}), pe = ({
   mode: e,
-  disabled: a,
+  disabled: r,
   variant: t
 }) => {
-  if (a)
+  if (r)
     return "";
   if (t === "primary")
-    return s("hover:text-copy-light-hover", {
+    return o("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "dark",
       "hover:bg-action-light-hover": e === "light",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system"
     });
   if (t === "secondary")
-    return s("hover:text-copy-light-hover", {
+    return o("hover:text-copy-light-hover", {
       "hover:bg-action-dark-hover": e === "light",
       "hover:bg-action-light-hover": e === "dark",
       "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system",
       "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system"
     });
   if (t === "danger")
-    return s("hover:text-copy-light-hover", {
+    return o("hover:text-copy-light-hover", {
       "hover:bg-action-danger-dark-hover": e === "dark",
       "hover:bg-action-danger-light-hover": e === "light",
       "hover:bg-action-danger-dark-hover dark:hover:bg-action-danger-light-hover": e === "system",
@@ -283,29 +283,29 @@ const _ = "thead", C = "tfoot", u = "tbody", p = {
     });
   if (t === "selected")
     return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, Z = ({
+}, _e = ({
   mode: e,
-  disabled: a,
+  disabled: r,
   variant: t
 }) => {
-  if (a)
+  if (r)
     return "";
   if (t === "primary")
-    return s("active:text-copy-light-active", {
+    return o("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "dark",
       "active:bg-action-light-active": e === "light",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system"
     });
   if (t === "secondary")
-    return s("active:text-copy-light-active", {
+    return o("active:text-copy-light-active", {
       "active:bg-action-dark-active": e === "light",
       "active:bg-action-light-active": e === "dark",
       "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system",
       "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system"
     });
   if (t === "danger")
-    return s("active:text-copy-lighter-active", {
+    return o("active:text-copy-lighter-active", {
       "active:bg-action-danger-dark-active": e === "dark",
       "active:bg-action-danger-light-active": e === "light",
       "active:bg-action-danger-dark-active dark:active:bg-action-danger-light-active": e === "system",
@@ -313,29 +313,29 @@ const _ = "thead", C = "tfoot", u = "tbody", p = {
     });
   if (t === "selected")
     return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, ee = ({
+}, xe = ({
   mode: e,
-  noBorder: a,
+  noBorder: r,
   variant: t
 }) => {
-  if (a)
+  if (r)
     return "border border-transparent";
   if (t === "primary")
-    return s("border", {
+    return o("border", {
       "border-border-dark": e === "dark",
       "border-border-accent": e === "light",
       "border-border-dark dark:border-border-accent": e === "system",
       "border-border-accent dark:border-border-dark": e === "alt-system"
     });
   if (t === "secondary")
-    return s("border", {
+    return o("border", {
       "border-border-dark": e === "light",
       "border-border-accent": e === "dark",
       "border-border-dark dark:border-border-accent": e === "alt-system",
       "border-border-accent dark:border-border-dark": e === "system"
     });
   if (t === "danger")
-    return s("border", {
+    return o("border", {
       "border-border-danger-dark": e === "dark",
       "border-border-danger-medium": e === "light",
       "border-border-danger-dark dark:border-border-danger-medium": e === "system",
@@ -343,130 +343,241 @@ const _ = "thead", C = "tfoot", u = "tbody", p = {
     });
   if (t === "selected")
     return "border border-border-selected-dark";
-}, te = ({
+}, we = ({
   focusMode: e
-}) => s("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
+}) => o("focus:outline", "focus:outline-2", "focus:outline-offset-2", {
   "focus:outline-focus-dark": e === "dark",
   "focus:outline-focus-light": e === "light",
   "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
   "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), ae = ({
+}), Ne = ({
+  mode: e,
+  raw: r,
+  iconClassName: t
+}) => r ? "" : o(
+  {
+    "text-copy-accent-dark": e === "light" || e === "alt-system",
+    "text-copy-light": e === "dark" || e === "system",
+    "dark:text-copy-light": e === "alt-system",
+    "dark:text-copy-accent-dark": e === "system"
+  },
+  t
+), Ce = ({
+  animated: e
+}) => o({
+  "transition-opacity duration-300 ease-in": e
+}), Te = ({
   type: e,
-  className: a,
+  className: r,
   raw: t,
-  mode: r,
-  focusMode: o,
-  disabled: l,
-  fullWidth: c,
+  mode: a,
+  focusMode: s,
+  disabled: n,
+  fullWidth: l,
   size: d,
-  noBorder: n,
-  labelRight: g,
-  labelLeft: b,
-  noBackground: m,
-  variant: h,
-  noTruncate: v,
-  align: x,
-  radius: w
-}) => (h || (h = "primary"), t ? s(I, a) : s(
-  I,
-  J({
-    mode: r,
-    variant: h,
-    noBackground: m,
-    noTruncate: v
+  noBorder: c,
+  labelRight: h,
+  labelLeft: m,
+  noBackground: g,
+  variant: b,
+  noTruncate: f,
+  align: V,
+  radius: L,
+  animated: A
+}) => (b || (b = "primary"), t ? o(F, r) : o(
+  F,
+  fe({
+    mode: a,
+    variant: b,
+    noBackground: g,
+    noTruncate: f
   }),
-  K({ mode: r, noBackground: m, variant: h }),
-  Q({ radius: w }),
-  Y({
+  ke({ mode: a, noBackground: g, variant: b }),
+  ve({ radius: L }),
+  ue({
     type: e,
     size: d,
-    labelRight: g,
-    labelLeft: b,
-    align: x
+    labelRight: h,
+    labelLeft: m,
+    align: V
   }),
-  q({ type: e, size: d, labelRight: g, labelLeft: b }),
-  ee({ mode: r, variant: h, noBorder: n }),
-  te({ focusMode: o }),
-  X({ mode: r, variant: h, disabled: l }),
-  Z({ mode: r, variant: h, disabled: l }),
+  ye({ type: e, size: d, labelRight: h, labelLeft: m }),
+  xe({ mode: a, variant: b, noBorder: c }),
+  we({ focusMode: s }),
+  pe({ mode: a, variant: b, disabled: n }),
+  _e({ mode: a, variant: b, disabled: n }),
   {
-    "w-full": c,
-    "disabled:cursor-not-allowed disabled:opacity-50": l
+    "w-full": l,
+    "disabled:cursor-not-allowed disabled:opacity-50": n
   },
-  a
-)), re = (e, a, t) => {
-  var r;
-  !a && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((r = e == null ? void 0 : e.currentTarget) == null ? void 0 : r.focus) == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
-}, R = T.forwardRef((e, a) => {
-  const { onClick: t, noInternalClick: r = !1, ...o } = e;
+  o({
+    "transition-[width] duration-300 ease-in-out": e === M && A
+  }),
+  r
+)), Be = (e, r, t) => {
+  var a;
+  !r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof ((a = e == null ? void 0 : e.currentTarget) == null ? void 0 : a.focus) == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
+}, J = R.forwardRef((e, r) => {
+  const { onClick: t, noInternalClick: a = !1, ...s } = e;
   return /* @__PURE__ */ i(
     "button",
     {
-      ref: a,
-      onClick: (l) => {
-        re(l, r, t);
+      ref: r,
+      onClick: (n) => {
+        Be(n, a, t);
       },
-      ...o
+      ...s
     }
   );
 });
-R.displayName = "BaseButton";
+J.displayName = "BaseButton";
+function Ee() {
+  const e = T(!1);
+  return Y(() => (e.current = !0, () => {
+    e.current = !1;
+  }), []), le(() => e.current, []);
+}
+function Ie(e) {
+  return q(() => e.every((r) => r == null) ? () => {
+  } : (r) => {
+    e.forEach((t) => {
+      typeof t == "function" ? t(r) : t != null && (t.current = r);
+    });
+  }, e);
+}
+const Se = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function O(e) {
+  const r = Ee(), t = T(0), a = T(null), [s, n] = ne(Se), l = q(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
+    const c = d[0];
+    c && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
+      a.current && r() && n(c.contentRect);
+    }));
+  }), [r]);
+  return Y(() => (a.current && (l == null || l.observe(a.current, e)), () => {
+    l == null || l.disconnect(), t.current && cancelAnimationFrame(t.current);
+  }), [l, e]), [a, s];
+}
+const H = {
+  small: 24,
+  // w-6
+  medium: 32,
+  // w-8
+  large: 48
+  // w-12
+}, D = {
+  small: 8 * 2,
+  // px-2 x 2
+  medium: 12 * 2,
+  // px-3 x 2
+  large: 16 * 2
+  // px-4 x 2
+}, G = 2, K = R.forwardRef(
+  ({
+    children: e,
+    disabled: r = !1,
+    mode: t = "system",
+    focusMode: a = "system",
+    fullWidth: s = !1,
+    className: n,
+    type: l = "button",
+    raw: d = !1,
+    noBorder: c = !1,
+    "aria-label": h,
+    label: m,
+    size: g = "medium",
+    labelRight: b,
+    labelLeft: f,
+    noBackground: V = !1,
+    align: L = "center",
+    radius: A = "large",
+    variant: X = "primary",
+    iconClassName: ee,
+    animated: y = !1,
+    ...te
+  }, re) => {
+    const ae = Te({
+      type: M,
+      mode: t,
+      focusMode: a,
+      fullWidth: s,
+      disabled: r,
+      raw: d,
+      className: n,
+      noBorder: c,
+      size: g,
+      labelRight: b,
+      labelLeft: f,
+      noBackground: V,
+      align: L,
+      radius: A,
+      variant: X,
+      animated: y
+    }), se = Ne({ mode: t, raw: d, iconClassName: ee }), W = Ce({ animated: y }), [k, v] = O(), [p, _] = O(), [E, I] = O(), x = T(0), u = T(null), oe = Ie([re, u]);
+    return $(() => {
+      y || (x.current = I.width + D[g] + (c ? 0 : G), u && u.current && (v.width > 0 ? u.current.style.width = `${v.width + x.current}px` : _.width > 0 ? u.current.style.width = `${_.width + x.current}px` : u.current.style.width = `${H[g]}px`));
+    }, [y, I, g, c, v, _]), $(() => {
+      E && E.current && y && (x.current = I.width + D[g] + (c ? 0 : G));
+    }, [I, E, g, c, y]), $(() => {
+      u && u.current && y && (b && k && v.width > 0 ? (k.current && (k.current.style.opacity = "100"), u.current.style.width = `${v.width + x.current}px`) : f && _.width > 0 ? (p.current && (p.current.style.opacity = "100"), u.current.style.width = `${_.width + x.current}px`) : (k.current && (k.current.style.opacity = "0"), p.current && (p.current.style.opacity = "0"), u.current.style.width = `${H[g]}px`));
+    }, [
+      v,
+      b,
+      k,
+      _,
+      f,
+      p,
+      g,
+      y
+    ]), /* @__PURE__ */ N(
+      J,
+      {
+        ref: oe,
+        className: ae,
+        disabled: r,
+        type: l,
+        "aria-label": h || m,
+        ...te,
+        children: [
+          /* @__PURE__ */ i("span", { ref: p, className: W, children: f && /* @__PURE__ */ i("span", { className: "pr-2", children: f }) }),
+          /* @__PURE__ */ i("span", { ref: E, className: se, children: e }),
+          /* @__PURE__ */ i("span", { ref: k, className: W, children: b && /* @__PURE__ */ i("span", { className: "pl-2", children: b }) })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "ButtonIcon";
 /*!
-  @versini/ui-button v4.1.5
+  @versini/ui-button v4.2.1
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "4.1.5",
-    buildTime: "01/24/2025 09:19 AM EST",
+    version: "4.2.1",
+    buildTime: "01/26/2025 05:19 PM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const z = T.forwardRef(
+const Q = R.forwardRef(
   ({
     children: e,
-    disabled: a = !1,
-    mode: t = "system",
-    focusMode: r = "system",
-    fullWidth: o = !1,
-    className: l,
-    type: c = "button",
-    raw: d = !1,
-    noBorder: n = !1,
-    "aria-label": g,
-    label: b,
-    size: m = "medium",
-    labelRight: h,
-    labelLeft: v,
-    noBackground: x = !1,
-    align: w = "center",
-    active: V = !1,
-    radius: M = "large",
-    ...L
-  }, U) => {
-    const A = ae({
-      type: B,
-      mode: t,
-      focusMode: r,
-      fullWidth: o,
-      disabled: a,
-      raw: d,
-      className: l,
-      noBorder: n,
-      size: m,
-      labelRight: h,
-      labelLeft: v,
-      noBackground: x,
-      align: w,
-      radius: M
-    }), O = s({
-      "text-copy-accent-dark": t === "light" && !d,
-      "text-copy-light": t === "dark" && !d,
-      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !d,
-      "text-copy-light dark:text-copy-accent-dark": t === "system" && !d
-    }), j = V ? s(
+    mode: r = "system",
+    className: t,
+    active: a = !1,
+    ...s
+  }, n) => {
+    const l = a ? o(
       "relative",
       "focus-within:static",
       "focus-within:after:border-transparent",
@@ -477,59 +588,54 @@ const z = T.forwardRef(
       "after:left-0",
       "after:right-0",
       {
-        "after:border-table-dark": t === "dark",
-        "after:border-table-light": t === "light",
-        "after:border-table-dark dark:after:border-table-light": t === "system",
-        "after:border-table-light dark:after:border-table-dark": t === "alt-system"
+        "after:border-table-dark": r === "dark",
+        "after:border-table-light": r === "light",
+        "after:border-table-dark dark:after:border-table-light": r === "system",
+        "after:border-table-light dark:after:border-table-dark": r === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ i("div", { className: j, children: /* @__PURE__ */ y(
-      R,
+    return /* @__PURE__ */ i("div", { className: l, children: /* @__PURE__ */ i(
+      K,
       {
-        ref: U,
-        className: A,
-        disabled: a,
-        type: c,
-        "aria-label": g || b,
-        ...L,
-        children: [
-          v && /* @__PURE__ */ i("span", { className: "pr-2", children: v }),
-          /* @__PURE__ */ i("div", { className: O, children: e }),
-          h && /* @__PURE__ */ i("span", { className: "pl-2", children: h })
-        ]
+        className: o("justify-center", t),
+        ref: n,
+        mode: r,
+        radius: "small",
+        ...s,
+        children: e
       }
     ) });
   }
 );
-z.displayName = "ButtonSort";
-const S = ({
+Q.displayName = "ButtonSort";
+const j = ({
   children: e,
-  fill: a,
+  fill: r,
   viewBox: t,
-  className: r,
-  defaultViewBox: o,
-  size: l,
-  title: c,
+  className: a,
+  defaultViewBox: s,
+  size: n,
+  title: l,
   semantic: d = !1,
-  ...n
+  ...c
 }) => {
-  const g = s(l, r);
-  return /* @__PURE__ */ y(W, { children: [
+  const h = o(n, a);
+  return /* @__PURE__ */ N(ie, { children: [
     /* @__PURE__ */ i(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
-        className: g,
-        viewBox: t || o,
-        fill: a || "currentColor",
+        className: h,
+        viewBox: t || s,
+        fill: r || "currentColor",
         role: "img",
         "aria-hidden": !d,
         focusable: !1,
-        ...n,
+        ...c,
         children: e
       }
     ),
-    c && d && /* @__PURE__ */ i("span", { className: "sr-only", children: c })
+    l && d && /* @__PURE__ */ i("span", { className: "sr-only", children: l })
   ] });
 };
 /*!
@@ -545,79 +651,79 @@ try {
   });
 } catch {
 }
-const oe = ({
+const Re = ({
   className: e,
-  viewBox: a,
+  viewBox: r,
   title: t,
-  monotone: r,
-  ...o
-}) => /* @__PURE__ */ y(
-  S,
+  monotone: a,
+  ...s
+}) => /* @__PURE__ */ N(
+  j,
   {
     defaultViewBox: "0 0 576 512",
     size: "size-5",
-    viewBox: a,
+    viewBox: r,
     className: e,
     title: t || "Sort",
-    ...o,
+    ...s,
     children: [
       /* @__PURE__ */ i(
         "path",
         {
           d: "M297.4 137.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l41.3-41.4V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.3l41.4 41.4c12.5 12.5 32.8 12.5 45.3 0 6.2-6.2 9.4-14.4 9.4-22.6s-3.1-16.4-9.4-22.6l-96-96c-6.3-6.4-14.5-9.5-22.7-9.5s-16.4 3.1-22.6 9.4z",
-          opacity: r ? "1" : "0.4"
+          opacity: a ? "1" : "0.4"
         }
       ),
       /* @__PURE__ */ i("path", { d: "M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 370.7V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v306.7l-41.4-41.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96z" })
     ]
   }
-), se = ({
+), ze = ({
   className: e,
-  viewBox: a,
+  viewBox: r,
   title: t,
-  monotone: r,
-  ...o
-}) => /* @__PURE__ */ y(
-  S,
+  monotone: a,
+  ...s
+}) => /* @__PURE__ */ N(
+  j,
   {
     defaultViewBox: "0 0 576 512",
     size: "size-5",
-    viewBox: a,
+    viewBox: r,
     className: e,
     title: t || "Sort Down",
-    ...o,
+    ...s,
     children: [
       /* @__PURE__ */ i(
         "path",
         {
           d: "M288 64c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32",
-          opacity: r ? "1" : "0.4"
+          opacity: a ? "1" : "0.4"
         }
       ),
       /* @__PURE__ */ i("path", { d: "M128 480c9 0 17.5-3.8 23.6-10.4l88-96c11.9-13 11.1-33.3-2-45.2s-33.3-11.1-45.2 2L160 365.7V64c0-17.7-14.3-32-32-32S96 46.3 96 64v301.7l-32.4-35.3c-11.9-13-32.2-13.9-45.2-2s-13.9 32.2-2 45.2l88 96c6.1 6.6 14.6 10.4 23.6 10.4" })
     ]
   }
-), ie = ({
+), Me = ({
   className: e,
-  viewBox: a,
+  viewBox: r,
   title: t,
-  monotone: r,
-  ...o
-}) => /* @__PURE__ */ y(
-  S,
+  monotone: a,
+  ...s
+}) => /* @__PURE__ */ N(
+  j,
   {
     defaultViewBox: "0 0 576 512",
     size: "size-5",
-    viewBox: a,
+    viewBox: r,
     className: e,
     title: t || "Sort Up",
-    ...o,
+    ...s,
     children: [
       /* @__PURE__ */ i(
         "path",
         {
           d: "M288 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-96c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32m0 128c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32",
-          opacity: r ? "1" : "0.4"
+          opacity: a ? "1" : "0.4"
         }
       ),
       /* @__PURE__ */ i("path", { d: "M128 32c9 0 17.5 3.8 23.6 10.4l88 96c11.9 13 11.1 33.3-2 45.2s-33.3 11.1-45.2-2L160 146.3V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V146.3l-32.4 35.3c-11.9 13-32.2 13.9-45.2 2s-13.9-32.2-2-45.2l88-96C110.5 35.8 119 32 128 32" })
@@ -637,154 +743,154 @@ try {
   });
 } catch {
 }
-const k = T.createContext({
+const C = R.createContext({
   mode: "light",
   cellWrapper: "thead",
   stickyHeader: !1,
   stickyFooter: !1,
   compact: !1
-}), ge = ({
+}), Oe = ({
   children: e,
-  mode: a = "system",
+  mode: r = "system",
   caption: t,
-  compact: r,
-  summary: o,
-  className: l,
-  wrapperClassName: c,
+  compact: a,
+  summary: s,
+  className: n,
+  wrapperClassName: l,
   maxHeight: d,
-  stickyHeader: n,
-  stickyFooter: g,
-  ...b
+  stickyHeader: c,
+  stickyFooter: h,
+  ...m
 }) => {
-  const m = P({
-    mode: a,
-    className: l,
-    wrapperClassName: c,
-    stickyHeader: n,
-    stickyFooter: g
+  const g = ce({
+    mode: r,
+    className: n,
+    wrapperClassName: l,
+    stickyHeader: c,
+    stickyFooter: h
   });
   return /* @__PURE__ */ i(
-    k.Provider,
+    C.Provider,
     {
-      value: { mode: a, stickyHeader: n, stickyFooter: g, compact: r },
+      value: { mode: r, stickyHeader: c, stickyFooter: h, compact: a },
       children: /* @__PURE__ */ i(
         "div",
         {
-          className: m.wrapper,
+          className: g.wrapper,
           ...d && {
             style: { maxHeight: d }
           },
-          children: /* @__PURE__ */ y("table", { className: m.table, summary: o, ...b, children: [
-            t && /* @__PURE__ */ i("caption", { className: m.caption, children: t }),
+          children: /* @__PURE__ */ N("table", { className: g.table, summary: s, ...m, children: [
+            t && /* @__PURE__ */ i("caption", { className: g.caption, children: t }),
             e
           ] })
         }
       )
     }
   );
-}, he = ({
+}, Pe = ({
   children: e,
-  className: a,
+  className: r,
   ...t
 }) => {
-  const r = f(k);
-  r.cellWrapper = _;
-  const o = D({
-    className: a,
-    mode: r.mode,
-    stickyHeader: r.stickyHeader
+  const a = B(C);
+  a.cellWrapper = z;
+  const s = de({
+    className: r,
+    mode: a.mode,
+    stickyHeader: a.stickyHeader
   });
-  return /* @__PURE__ */ i("thead", { className: o, ...t, children: e });
-}, be = ({
+  return /* @__PURE__ */ i("thead", { className: s, ...t, children: e });
+}, Ue = ({
   children: e,
-  className: a,
+  className: r,
   ...t
 }) => {
-  const r = f(k);
-  r.cellWrapper = C;
-  const o = H({
-    className: a,
-    mode: r.mode,
-    stickyFooter: r.stickyFooter
+  const a = B(C);
+  a.cellWrapper = U;
+  const s = ge({
+    className: r,
+    mode: a.mode,
+    stickyFooter: a.stickyFooter
   });
-  return /* @__PURE__ */ i("tfoot", { className: o, ...t, children: e });
-}, me = ({ children: e, ...a }) => {
-  const t = f(k);
-  return t.cellWrapper = u, /* @__PURE__ */ i("tbody", { ...a, children: e });
-}, ue = ({
+  return /* @__PURE__ */ i("tfoot", { className: s, ...t, children: e });
+}, je = ({ children: e, ...r }) => {
+  const t = B(C);
+  return t.cellWrapper = w, /* @__PURE__ */ i("tbody", { ...r, children: e });
+}, We = ({
   children: e,
-  className: a,
+  className: r,
   ...t
 }) => {
-  const r = f(k), o = $({
-    mode: r.mode,
-    cellWrapper: r.cellWrapper,
-    className: a
+  const a = B(C), s = he({
+    mode: a.mode,
+    cellWrapper: a.cellWrapper,
+    className: r
   });
-  return /* @__PURE__ */ i("tr", { className: o, ...t, children: e });
-}, le = ({
+  return /* @__PURE__ */ i("tr", { className: s, ...t, children: e });
+}, Ve = ({
   children: e,
-  component: a,
+  component: r,
   className: t,
-  align: r,
-  ...o
+  align: a,
+  ...s
 }) => {
-  const l = f(k), c = a || (l.cellWrapper === _ ? "th" : "td"), { mainClasses: d, alignClasses: n } = F({
-    cellWrapper: l.cellWrapper,
+  const n = B(C), l = r || (n.cellWrapper === z ? "th" : "td"), { mainClasses: d, alignClasses: c } = be({
+    cellWrapper: n.cellWrapper,
     className: t,
-    mode: l.mode,
-    compact: l.compact,
-    align: r
+    mode: n.mode,
+    compact: n.compact,
+    align: a
   });
-  return r ? /* @__PURE__ */ i(c, { className: d, ...o, children: /* @__PURE__ */ i("div", { className: n, children: e }) }) : /* @__PURE__ */ i(c, { className: d, ...o, children: e });
-}, ye = ({
+  return a ? /* @__PURE__ */ i(l, { className: d, ...s, children: /* @__PURE__ */ i("div", { className: c, children: e }) }) : /* @__PURE__ */ i(l, { className: d, ...s, children: e });
+}, Fe = ({
   align: e,
-  children: a,
+  children: r,
   buttonClassName: t,
-  className: r,
-  component: o,
-  focusMode: l = "alt-system",
-  mode: c = "alt-system",
+  className: a,
+  component: s,
+  focusMode: n = "alt-system",
+  mode: l = "alt-system",
   onClick: d,
-  sortDirection: n,
-  sortedCell: g,
-  cellId: b,
-  ...m
+  sortDirection: c,
+  sortedCell: h,
+  cellId: m,
+  ...g
 }) => {
-  const h = G({ buttonClassName: t });
+  const b = me({ buttonClassName: t });
   return /* @__PURE__ */ i(
-    le,
+    Ve,
     {
-      component: o,
-      className: r,
+      component: s,
+      className: a,
       role: "columnheader",
-      "aria-sort": n === p.ASC && g === b ? "ascending" : n === p.DESC && g === b ? "descending" : "other",
-      ...m,
+      "aria-sort": c === S.ASC && h === m ? "ascending" : c === S.DESC && h === m ? "descending" : "other",
+      ...g,
       children: /* @__PURE__ */ i(
-        z,
+        Q,
         {
-          active: g === b,
-          className: h,
+          active: h === m,
+          className: b,
           onClick: d,
           align: e,
           noBorder: !0,
-          focusMode: l,
-          mode: c,
+          focusMode: n,
+          mode: l,
           fullWidth: !0,
-          labelRight: a,
-          children: n === p.ASC && g === b ? /* @__PURE__ */ i(ie, { className: "size-4", monotone: !0 }) : n === p.DESC && g === b ? /* @__PURE__ */ i(se, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ i(oe, { className: "size-4", monotone: !0 })
+          labelRight: r,
+          children: c === S.ASC && h === m ? /* @__PURE__ */ i(Me, { className: "size-4", monotone: !0 }) : c === S.DESC && h === m ? /* @__PURE__ */ i(ze, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ i(Re, { className: "size-4", monotone: !0 })
         }
       )
     }
   );
 };
 export {
-  ge as Table,
-  me as TableBody,
-  le as TableCell,
-  ye as TableCellSort,
-  p as TableCellSortDirections,
-  be as TableFooter,
-  he as TableHead,
-  ue as TableRow
+  Oe as Table,
+  je as TableBody,
+  Ve as TableCell,
+  Fe as TableCellSort,
+  S as TableCellSortDirections,
+  Ue as TableFooter,
+  Pe as TableHead,
+  We as TableRow
 };