@versini/ui-table 5.0.0 → 5.0.2

package/dist/components/Table/Table.js

@@ -1,957 +1,402 @@
-import { jsx as o, jsxs as N } from "react/jsx-runtime";
-import z, { useRef as w, useLayoutEffect as q, useEffect as W, useState as ce, useMemo as K, useCallback as ne, useContext as B } from "react";
-import l from "clsx";
-import { TableCellSortDirections as R } from "../TableConstants/TableConstants.js";
-const Y = "av-button", P = "icon", Q = "button", U = "link", de = ({
-  type: e,
-  size: r,
-  labelRight: t,
-  labelLeft: a,
-  align: s,
-  animated: i
-}) => {
-  const c = "max-h-8 py-0 px-2", d = "max-h-9 h-8 px-3", n = "max-h-12 py-2 px-4";
-  switch (e) {
-    case Q:
-    case U:
-      return l({
-        [c]: r === "small",
-        [d]: r === "medium",
-        [n]: r === "large"
-      });
-    case P:
-      return l("flex items-center", {
-        "justify-center": s === "center",
-        "justify-start": s === "left",
-        "justify-end": s === "right",
-        "h-6 w-6 p-0": r === "small" && !i && !(t || a),
-        "h-6 px-1 sm:px-2": r === "small" && !i && (t || a),
-        "h-8 w-8 p-1": r === "medium" && !i && !(t || a),
-        "h-8 px-3": r === "medium" && !i && (t || a),
-        "h-12 w-12 p-2": r === "large" && !i && !(t || a),
-        "h-12 px-4": r === "large" && !i && (t || a),
-        "h-6 py-0": r === "small" && i && !(t || a),
-        "h-6": r === "small" && i && (t || a),
-        "h-8 py-1": r === "medium" && i && !(t || a),
-        "h-8": r === "medium" && i && (t || a),
-        "h-12 py-2": r === "large" && i && !(t || a),
-        "h-12": r === "large" && i && (t || a)
-      });
-  }
-}, he = ({
-  type: e,
-  size: r,
-  labelRight: t,
-  labelLeft: a
-}) => {
-  const s = "text-sm font-medium", i = "text-base font-medium", c = "text-lg font-medium";
-  switch (e) {
-    case Q:
-    case U:
-      return l({
-        "text-center": e === U,
-        [s]: r === "small",
-        [i]: r === "medium",
-        [c]: r === "large"
-      });
-    case P:
-      return l({
-        [s]: r === "small" && (t || a),
-        [i]: r === "medium" && (t || a),
-        [c]: r === "large" && (t || a)
-      });
-  }
-}, ge = ({
-  mode: e,
-  noBackground: r,
-  truncate: t,
-  variant: a
-}) => {
-  if (r)
-    return "not-prose";
-  if (a === "primary")
-    return l("not-prose", {
-      truncate: t,
-      "text-copy-dark": e === "dark" || e === "system",
-      "text-copy-light": e === "light" || e === "alt-system",
-      "dark:text-copy-light": e === "system",
-      "dark:text-copy-dark": e === "alt-system"
-    });
-  if (a === "secondary")
-    return l("not-prose", {
-      truncate: t,
-      "text-copy-light": e === "dark" || e === "system",
-      "text-copy-dark": e === "light" || e === "alt-system",
-      "dark:text-copy-dark": e === "system",
-      "dark:text-copy-light": e === "alt-system"
-    });
-  if (a === "danger")
-    return l("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 (a === "selected")
-    return l("not-prose text-copy-lighter", {
-      truncate: t
-    });
-}, me = ({
-  mode: e,
-  noBackground: r,
-  variant: t
-}) => {
-  if (!r) {
-    if (t === "primary")
-      return l({
-        "bg-action-light": e === "dark",
-        "bg-action-dark": e === "light",
-        "bg-action-light dark:bg-action-dark": e === "system",
-        "bg-action-dark dark:bg-action-light": e === "alt-system"
-      });
-    if (t === "secondary")
-      return l({
-        "bg-action-light": e === "light",
-        "bg-action-dark": e === "dark",
-        "bg-action-light dark:bg-action-dark": e === "alt-system",
-        "bg-action-dark dark:bg-action-light": e === "system"
-      });
-    if (t === "danger")
-      return l({
-        "bg-action-danger-dark": e === "dark",
-        "bg-action-danger-light": e === "light",
-        "bg-action-danger-dark dark:bg-action-danger-light": e === "system",
-        "bg-action-danger-light dark:bg-action-danger-dark": e === "alt-system"
-      });
-    if (t === "selected")
-      return "bg-action-selected-dark";
-  }
-}, be = ({
-  radius: e
-}) => l({
-  "rounded-full": e === "large",
-  "rounded-md": e === "medium",
-  "rounded-xs": e === "small"
-}), ue = ({
-  mode: e,
-  disabled: r,
-  variant: t
-}) => {
-  if (r)
-    return "";
-  if (t === "primary")
-    return l({
-      "hover:text-copy-dark-hover": e === "dark" || e === "system",
-      "hover:text-copy-light-hover": e === "light" || e === "alt-system",
-      "dark:hover:text-copy-light-hover": e === "system",
-      "dark:hover:text-copy-dark-hover": e === "alt-system",
-      "hover:bg-action-light-hover": e === "dark",
-      "hover:bg-action-dark-hover": e === "light",
-      "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "system",
-      "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "alt-system"
-    });
-  if (t === "secondary")
-    return l({
-      "hover:text-copy-light-hover": e === "dark" || e === "system",
-      "hover:text-copy-dark-hover": e === "light" || e === "alt-system",
-      "dark:hover:text-copy-dark-hover": e === "system",
-      "dark:hover:text-copy-light-hover": e === "alt-system",
-      "hover:bg-action-light-hover": e === "light",
-      "hover:bg-action-dark-hover": e === "dark",
-      "hover:bg-action-light-hover dark:hover:bg-action-dark-hover": e === "alt-system",
-      "hover:bg-action-dark-hover dark:hover:bg-action-light-hover": e === "system"
-    });
-  if (t === "danger")
-    return l("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",
-      "hover:bg-action-danger-light-hover dark:hover:bg-action-danger-dark-hover": e === "alt-system"
-    });
-  if (t === "selected")
-    return "hover:text-copy-light-hover hover:bg-action-selected-dark-hover";
-}, ye = ({
-  mode: e,
-  disabled: r,
-  variant: t
-}) => {
-  if (r)
-    return "";
-  if (t === "primary")
-    return l({
-      "active:text-copy-dark-active": e === "dark" || e === "system",
-      "active:text-copy-light-active": e === "light" || e === "alt-system",
-      "dark:active:text-copy-light-active": e === "system",
-      "dark:active:text-copy-dark-active": e === "alt-system",
-      "active:bg-action-light-active": e === "dark",
-      "active:bg-action-dark-active": e === "light",
-      "active:bg-action-light-active dark:active:bg-action-dark-active": e === "system",
-      "active:bg-action-dark-active dark:active:bg-action-light-active": e === "alt-system"
-    });
-  if (t === "secondary")
-    return l({
-      "active:text-copy-light-active": e === "dark" || e === "system",
-      "active:text-copy-dark-active": e === "light" || e === "alt-system",
-      "dark:active:text-copy-dark-active": e === "system",
-      "dark:active:text-copy-light-active": e === "alt-system",
-      "active:bg-action-light-active": e === "light",
-      "active:bg-action-dark-active": e === "dark",
-      "active:bg-action-light-active dark:active:bg-action-dark-active": e === "alt-system",
-      "active:bg-action-dark-active dark:active:bg-action-light-active": e === "system"
-    });
-  if (t === "danger")
-    return l("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",
-      "active:bg-action-danger-light-active dark:active:bg-action-danger-dark-active": e === "alt-system"
-    });
-  if (t === "selected")
-    return "active:text-copy-lighter-active active:bg-action-selected-dark-active";
-}, ke = ({
-  mode: e,
-  noBorder: r,
-  variant: t
-}) => {
-  if (r)
-    return "border border-transparent";
-  if (t === "primary")
-    return l("border", {
-      "border-border-medium": e === "dark",
-      "border-border-accent": e === "light",
-      "border-border-medium dark:border-border-accent": e === "system",
-      "border-border-accent dark:border-border-medium": e === "alt-system"
-    });
-  if (t === "secondary")
-    return l("border", {
-      "border-border-medium": e === "light",
-      "border-border-accent": e === "dark",
-      "border-border-medium dark:border-border-accent": e === "alt-system",
-      "border-border-accent dark:border-border-medium": e === "system"
-    });
-  if (t === "danger")
-    return l("border", {
-      "border-border-danger-dark": e === "dark",
-      "border-border-danger-medium": e === "light",
-      "border-border-danger-dark dark:border-border-danger-medium": e === "system",
-      "border-border-danger-medium dark:border-border-danger-dark": e === "alt-system"
-    });
-  if (t === "selected")
-    return "border border-border-selected-dark";
-}, ve = ({
-  focusMode: e
-}) => l("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"
-}), pe = ({
-  mode: e,
-  raw: r,
-  iconClassName: t,
-  variant: a = "primary"
-}) => {
-  if (r)
-    return "";
-  let s = {};
-  return a === "primary" ? s = {
-    "text-copy-dark": e === "dark" || e === "system",
-    "text-copy-light": e === "light" || e === "alt-system",
-    "dark:text-copy-light": e === "system",
-    "dark:text-copy-dark": e === "alt-system"
-  } : a === "secondary" ? s = {
-    "text-copy-light": e === "dark" || e === "system",
-    "text-copy-dark": e === "light" || e === "alt-system",
-    "dark:text-copy-dark": e === "system",
-    "dark:text-copy-light": e === "alt-system"
-  } : a === "danger" ? s = {
-    "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"
-  } : a === "selected" && (s = {
-    "text-copy-lighter": !0
-  }), l(s, t);
-}, fe = ({
-  animated: e
-}) => l({
-  "transition-opacity duration-300 ease-in-out": e
-}), xe = ({
-  type: e,
-  className: r,
-  raw: t,
-  mode: a,
-  focusMode: s,
-  disabled: i,
-  fullWidth: c,
-  size: d,
-  noBorder: n,
-  labelRight: g,
-  labelLeft: b,
-  noBackground: h,
-  variant: m,
-  truncate: p,
-  align: L,
-  radius: M,
-  animated: T
-}) => (m || (m = "primary"), t ? l(Y, r) : l(
-  Y,
-  ge({
-    mode: a,
-    variant: m,
-    noBackground: h,
-    truncate: p
-  }),
-  me({ mode: a, noBackground: h, variant: m }),
-  be({ radius: M }),
-  de({
-    type: e,
-    size: d,
-    labelRight: g,
-    labelLeft: b,
-    align: L,
-    animated: T
-  }),
-  he({ type: e, size: d, labelRight: g, labelLeft: b }),
-  ke({ mode: a, variant: m, noBorder: n }),
-  ve({ focusMode: s }),
-  ue({ mode: a, variant: m, disabled: i }),
-  ye({ mode: a, variant: m, disabled: i }),
-  {
-    "w-full": c,
-    "disabled:cursor-not-allowed disabled:opacity-50": i
-  },
-  l({
-    "transition-[width] duration-300 ease-in": T
-  }),
-  r
-)), _e = (e, r, t) => {
-  !r && (!document.activeElement || document.activeElement !== e.currentTarget) && typeof e?.currentTarget?.focus == "function" && e.currentTarget.focus(), typeof t == "function" && t(e);
-}, X = z.forwardRef((e, r) => {
-  const { onClick: t, noInternalClick: a = !1, ...s } = e;
-  return /* @__PURE__ */ o(
-    "button",
-    {
-      ref: r,
-      onClick: (i) => {
-        _e(i, a, t);
-      },
-      ...s
-    }
-  );
-});
-X.displayName = "BaseButton";
-function we() {
-  const e = w(!1);
-  return W(() => (e.current = !0, () => {
-    e.current = !1;
-  }), []), ne(() => e.current, []);
-}
-function Ne(e) {
-  return K(() => e.every((r) => r == null) ? () => {
-  } : (r) => {
-    e.forEach((t) => {
-      typeof t == "function" ? t(r) : t != null && (t.current = r);
-    });
-  }, [...e]);
-}
-const Ce = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function j(e) {
-  const r = we(), t = w(0), a = w(null), [s, i] = ce(Ce), c = K(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((d) => {
-    const n = d[0];
-    n && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
-      a.current && r() && i(n.contentRect);
-    }));
-  }), [r]);
-  return W(() => (a.current && c?.observe(a.current, e), () => {
-    c?.disconnect(), t.current && cancelAnimationFrame(t.current);
-  }), [c, e]), [a, s];
-}
-const E = {
-  small: 24,
-  // w-6
-  medium: 32,
-  // w-8
-  large: 48
-  // w-12
-}, Be = {
-  small: 16,
-  // px-2 x 2
-  medium: 24,
-  // px-3 x 2
-  large: 32
-  // px-4 x 2
-}, Te = 2, Ie = 300, Z = z.forwardRef(
-  ({
-    children: e,
-    disabled: r = !1,
-    mode: t = "system",
-    focusMode: a = "system",
-    fullWidth: s = !1,
-    className: i,
-    type: c = "button",
-    raw: d = !1,
-    noBorder: n = !1,
-    "aria-label": g,
-    label: b,
-    size: h = "medium",
-    labelRight: m,
-    labelLeft: p,
-    noBackground: L = !1,
-    align: M = "center",
-    radius: T = "large",
-    variant: D = "secondary",
-    iconClassName: te,
-    animated: k = !1,
-    ...re
-  }, ae) => {
-    const se = xe({
-      type: P,
-      mode: t,
-      focusMode: a,
-      fullWidth: s,
-      disabled: r,
-      raw: d,
-      className: i,
-      noBorder: n,
-      size: h,
-      labelRight: m,
-      labelLeft: p,
-      noBackground: L,
-      align: M,
-      radius: T,
-      variant: D,
-      animated: k
-    }), le = pe({ mode: t, raw: d, iconClassName: te, variant: D }), F = fe({ animated: k }), ie = "flex items-center justify-center relative w-full h-full overflow-hidden", [u, V] = j(), [y, O] = j(), [I, G] = j(), A = w(0), v = w(null), f = w(null), oe = Ne([ae, v]);
-    return q(() => {
-      I && I.current && k && (A.current = G.width + Be[h] + (n ? 0 : Te), v.current && !v.current.style.width && (v.current.style.width = `${E[h]}px`));
-    }, [G, I, h, n, k]), q(() => {
-      if (v && v.current && k) {
-        let x = E[h];
-        m && u && V.width > 0 ? x = V.width + A.current : p && y && O.width > 0 && (x = O.width + A.current), f.current && clearTimeout(f.current), x !== parseInt(v.current.style.width || "0", 10) && (u.current && (u.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"), v.current.style.width = `${x}px`, x > E[h] && (f.current = setTimeout(() => {
-          u.current && m && (u.current.style.opacity = "1"), y.current && p && (y.current.style.opacity = "1"), f.current = null;
-        }, Ie * 0.8))), x === E[h] && (u.current && (u.current.style.opacity = "0"), y.current && (y.current.style.opacity = "0"));
-      }
-    }, [
-      V,
-      m,
-      u,
-      O,
-      p,
-      y,
-      h,
-      k
-    ]), W(() => () => {
-      f.current && clearTimeout(f.current);
-    }, []), /* @__PURE__ */ o(
-      X,
-      {
-        ref: oe,
-        className: se,
-        disabled: r,
-        type: c,
-        "aria-label": g || b,
-        ...re,
-        children: /* @__PURE__ */ N("div", { className: ie, children: [
-          /* @__PURE__ */ o(
-            J,
-            {
-              label: p,
-              labelRef: y,
-              labelClass: F,
-              labelInnerClass: "pr-2",
-              initiallyHidden: k
-            }
-          ),
-          /* @__PURE__ */ o("span", { ref: I, className: le, children: e }),
-          /* @__PURE__ */ o(
-            J,
-            {
-              label: m,
-              labelRef: u,
-              labelClass: F,
-              labelInnerClass: "pl-2",
-              initiallyHidden: k
-            }
-          )
-        ] })
-      }
-    );
-  }
-), J = ({
-  labelRef: e,
-  labelClass: r,
-  label: t,
-  labelInnerClass: a,
-  initiallyHidden: s = !1
-}) => /* @__PURE__ */ o(
-  "span",
-  {
-    ref: e,
-    className: r,
-    style: s ? { opacity: 0 } : void 0,
-    children: t && /* @__PURE__ */ o("span", { className: a, children: t })
-  }
-);
-Z.displayName = "ButtonIcon";
-/*!
-  @versini/ui-button v8.0.0
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "8.0.0",
-    buildTime: "09/01/2025 03:17 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const ee = z.forwardRef(
-  ({
-    children: e,
-    mode: r = "system",
-    className: t,
-    active: a = !1,
-    ...s
-  }, i) => {
-    const c = a ? l(
-      "relative",
-      "focus-within:static",
-      "focus-within:after:border-transparent",
-      "after:absolute",
-      "after:content-['']",
-      "after:border-b-2",
-      "after:bottom-[-4px]",
-      "after:left-0",
-      "after:right-0",
-      {
-        "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__ */ o("div", { className: c, children: /* @__PURE__ */ o(
-      Z,
-      {
-        className: t,
-        ref: i,
-        mode: r,
-        radius: "small",
-        size: "small",
-        align: "center",
-        ...s,
-        children: e
-      }
-    ) });
-  }
-);
-ee.displayName = "ButtonSort";
-const $ = ({
-  children: e,
-  fill: r,
-  viewBox: t,
+import { jsxs as y, jsx as l } from "react/jsx-runtime";
+import { ButtonSort_private as v } from "@versini/ui-button";
+import C, { useContext as p } from "react";
+import o from "clsx";
+import { TableCellSortDirections as x } from "../TableConstants/TableConstants.js";
+const u = ({
+  children: t,
+  fill: s,
+  viewBox: e,
   className: a,
-  defaultViewBox: s,
-  size: i,
-  title: c,
-  semantic: d = !1,
-  ...n
+  defaultViewBox: r,
+  size: n,
+  title: _,
+  semantic: i = !1,
+  ...c
 }) => {
-  const g = l(i, a);
-  return /* @__PURE__ */ N(
+  const d = o(n, a);
+  return /* @__PURE__ */ y(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      className: g,
-      viewBox: t || s,
-      fill: r || "currentColor",
+      className: d,
+      viewBox: e || r,
+      fill: s || "currentColor",
       role: "img",
-      "aria-hidden": !d,
+      "aria-hidden": !i,
       focusable: !1,
-      ...n,
+      ...c,
       children: [
-        c && d && /* @__PURE__ */ o("title", { children: c }),
-        e
+        _ && i && /* @__PURE__ */ l("title", { children: _ }),
+        t
       ]
     }
   );
 };
 /*!
-  @versini/ui-svgicon v4.2.1
+  @versini/ui-svgicon v4.2.2
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
-    version: "4.2.1",
-    buildTime: "08/27/2025 08:27 AM EDT",
+    version: "4.2.2",
+    buildTime: "10/17/2025 12:12 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const Re = ({
-  className: e,
-  viewBox: r,
-  title: t,
+const N = ({
+  className: t,
+  viewBox: s,
+  title: e,
   monotone: a,
-  ...s
-}) => /* @__PURE__ */ N(
-  $,
+  ...r
+}) => /* @__PURE__ */ y(
+  u,
   {
     defaultViewBox: "0 0 576 512",
     size: "size-5",
-    viewBox: r,
-    className: e,
-    title: t || "Sort",
-    ...s,
+    viewBox: s,
+    className: t,
+    title: e || "Sort",
+    ...r,
     children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ l(
         "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: a ? "1" : "0.4"
         }
       ),
-      /* @__PURE__ */ o("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" })
+      /* @__PURE__ */ l("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" })
     ]
   }
-), Ee = ({
-  className: e,
-  viewBox: r,
-  title: t,
+), T = ({
+  className: t,
+  viewBox: s,
+  title: e,
   monotone: a,
-  ...s
-}) => /* @__PURE__ */ N(
-  $,
+  ...r
+}) => /* @__PURE__ */ y(
+  u,
   {
     defaultViewBox: "0 0 576 512",
     size: "size-5",
-    viewBox: r,
-    className: e,
-    title: t || "Sort Down",
-    ...s,
+    viewBox: s,
+    className: t,
+    title: e || "Sort Down",
+    ...r,
     children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ l(
         "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: a ? "1" : "0.4"
         }
       ),
-      /* @__PURE__ */ o("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" })
+      /* @__PURE__ */ l("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" })
     ]
   }
-), ze = ({
-  className: e,
-  viewBox: r,
-  title: t,
+), S = ({
+  className: t,
+  viewBox: s,
+  title: e,
   monotone: a,
-  ...s
-}) => /* @__PURE__ */ N(
-  $,
+  ...r
+}) => /* @__PURE__ */ y(
+  u,
   {
     defaultViewBox: "0 0 576 512",
     size: "size-5",
-    viewBox: r,
-    className: e,
-    title: t || "Sort Up",
-    ...s,
+    viewBox: s,
+    className: t,
+    title: e || "Sort Up",
+    ...r,
     children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ l(
         "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: a ? "1" : "0.4"
         }
       ),
-      /* @__PURE__ */ o("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" })
+      /* @__PURE__ */ l("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" })
     ]
   }
 );
 /*!
-  @versini/ui-icons v4.11.0
+  @versini/ui-icons v4.12.3
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "4.11.0",
-    buildTime: "08/27/2025 08:28 AM EDT",
+    version: "4.12.3",
+    buildTime: "10/17/2025 12:12 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const C = z.createContext({
+const g = C.createContext({
   mode: "light",
   cellWrapper: "thead",
   stickyHeader: !1,
   stickyFooter: !1,
   compact: !1
-}), S = "thead", H = "tfoot", _ = "tbody", Se = ({
-  mode: e,
-  className: r,
-  wrapperClassName: t,
+}), k = "thead", w = "tfoot", b = "tbody", B = ({
+  mode: t,
+  className: s,
+  wrapperClassName: e,
   stickyHeader: a,
-  stickyFooter: s
+  stickyFooter: r
 }) => ({
-  wrapper: l(
+  wrapper: o(
     "not-prose relative w-full rounded-lg shadow-md",
     {
-      "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",
-      "dark:bg-surface-darker": e === "alt-system",
-      "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"
+      "overflow-x-auto": !a && !r,
+      "overflow-y-scroll": a || r,
+      "bg-surface-darker": t === "dark" || t === "system",
+      "bg-surface-light": t === "light" || t === "alt-system",
+      "dark:bg-surface-light": t === "system",
+      "dark:bg-surface-darker": t === "alt-system",
+      "text-copy-light": t === "dark",
+      "text-copy-dark": t === "light",
+      "text-copy-light dark:text-copy-dark": t === "system",
+      "text-copy-dark dark:text-copy-light": t === "alt-system"
     },
-    t
+    e
   ),
-  table: l("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"
+  table: o("my-0 w-full text-left text-sm", s, {
+    "text-copy-light": t === "dark",
+    "text-copy-dark": t === "light",
+    "text-copy-light dark:text-copy-dark": t === "system",
+    "text-copy-dark dark:text-copy-light": t === "alt-system"
   }),
-  caption: l("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"
+  caption: o("py-2 text-sm font-bold", {
+    "text-copy-light": t === "dark",
+    "text-copy-dark": t === "light",
+    "text-copy-light dark:text-copy-dark": t === "system",
+    "text-copy-dark dark:text-copy-light": t === "alt-system"
   })
-}), Le = ({
-  className: e,
-  stickyHeader: r,
-  mode: t
-}) => l(
+}), E = ({
+  className: t,
+  stickyHeader: s,
+  mode: e
+}) => o(
   {
-    "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"
+    "sticky top-0 z-10": s,
+    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": s && e === "dark",
+    "shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": s && e === "system",
+    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem]": s && e === "light",
+    "shadow-[rgb(65_65_65_/30%)_0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_0.5rem_1rem]": s && e === "alt-system"
   },
-  e
-), Me = ({
-  className: e,
-  stickyFooter: r,
-  mode: t
-}) => l(
+  t
+), V = ({
+  className: t,
+  stickyFooter: s,
+  mode: e
+}) => o(
   {
-    "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"
+    "sticky bottom-0 z-10": s,
+    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": s && e === "dark",
+    "shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem] dark:shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": s && e === "system",
+    "shadow-[rgb(65_65_65_/30%)_0_-0.5rem_1rem]": s && e === "light",
+    "shadow-[rgb(65_65_65_/30%)_-0_0.5rem_1rem] dark:shadow-[rgb(190_190_190_/20%)_0_-0.5rem_1rem]": s && e === "alt-system"
   },
-  e
-), Ve = ({
-  mode: e,
-  className: r,
-  cellWrapper: t
-}) => t === S || t === H ? l(
+  t
+), I = ({
+  mode: t,
+  className: s,
+  cellWrapper: e
+}) => e === k || e === w ? 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"
+    "bg-table-head-dark": t === "dark" || t === "system",
+    "bg-table-head-light": t === "light" || t === "alt-system",
+    "dark:bg-table-head-light": t === "system",
+    "dark:bg-table-head-dark": t === "alt-system"
   },
-  r
-) : l(
+  s
+) : o(
   "border-b last:border-0",
   {
-    "border-table-dark": e === "dark" || e === "system",
-    "odd:bg-table-dark-odd even:bg-table-dark-even": t === _ && e === "dark",
-    "border-table-light": e === "light" || e === "alt-system",
-    "odd:bg-table-light-odd even:bg-table-light-even": t === _ && 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 === _ && 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 === _ && e === "alt-system"
+    "border-table-dark": t === "dark" || t === "system",
+    "odd:bg-table-dark-odd even:bg-table-dark-even": e === b && t === "dark",
+    "border-table-light": t === "light" || t === "alt-system",
+    "odd:bg-table-light-odd even:bg-table-light-even": e === b && t === "light",
+    "dark:border-table-light": t === "system",
+    "odd:bg-table-dark-odd even:bg-table-dark-even dark:odd:bg-table-light-odd dark:even:bg-table-light-even": e === b && t === "system",
+    "dark:border-table-dark": t === "alt-system",
+    "odd:bg-table-light-odd even:bg-table-light-even dark:odd:bg-table-dark-odd dark:even:bg-table-dark-even": e === b && t === "alt-system"
   },
-  r
-), Oe = ({
-  cellWrapper: e,
-  className: r,
-  compact: t,
+  s
+), R = ({
+  cellWrapper: t,
+  className: s,
+  compact: e,
   mode: a,
-  align: s
+  align: r
 }) => ({
-  alignClasses: l({
-    "flex justify-start text-left": s === "left",
-    "flex justify-center text-center": s === "center",
-    "flex justify-end text-right": s === "right"
+  alignClasses: o({
+    "flex justify-start text-left": r === "left",
+    "flex justify-center text-center": r === "center",
+    "flex justify-end text-right": r === "right"
   }),
-  mainClasses: l(
+  mainClasses: o(
     {
       "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 === S || e === H),
-      "p-4": !t && e === _,
-      "px-2 py-1.5": t
+      "px-4 py-3": !e && (t === k || t === w),
+      "p-4": !e && t === b,
+      "px-2 py-1.5": e
     },
-    r
+    s
   )
-}), Ae = ({
-  buttonClassName: e
-}) => l("rounded-none text-sm", e), He = ({
-  children: e,
-  mode: r = "system",
-  caption: t,
+}), z = ({
+  buttonClassName: t
+}) => o("rounded-none text-sm", t), j = ({
+  children: t,
+  mode: s = "system",
+  caption: e,
   compact: a,
-  summary: s,
-  className: i,
-  wrapperClassName: c,
-  maxHeight: d,
-  stickyHeader: n,
-  stickyFooter: g,
-  ...b
+  summary: r,
+  className: n,
+  wrapperClassName: _,
+  maxHeight: i,
+  stickyHeader: c,
+  stickyFooter: d,
+  ...h
 }) => {
-  const h = Se({
-    mode: r,
-    className: i,
-    wrapperClassName: c,
-    stickyHeader: n,
-    stickyFooter: g
+  const m = B({
+    mode: s,
+    className: n,
+    wrapperClassName: _,
+    stickyHeader: c,
+    stickyFooter: d
   });
-  return /* @__PURE__ */ o(
-    C.Provider,
+  return /* @__PURE__ */ l(
+    g.Provider,
     {
-      value: { mode: r, stickyHeader: n, stickyFooter: g, compact: a },
-      children: /* @__PURE__ */ o(
+      value: { mode: s, stickyHeader: c, stickyFooter: d, compact: a },
+      children: /* @__PURE__ */ l(
         "div",
         {
-          className: h.wrapper,
-          ...d && {
-            style: { maxHeight: d }
+          className: m.wrapper,
+          ...i && {
+            style: { maxHeight: i }
           },
-          children: /* @__PURE__ */ N("table", { className: h.table, summary: s, ...b, children: [
-            t && /* @__PURE__ */ o("caption", { className: h.caption, children: t }),
-            e
+          children: /* @__PURE__ */ y("table", { className: m.table, summary: r, ...h, children: [
+            e && /* @__PURE__ */ l("caption", { className: m.caption, children: e }),
+            t
           ] })
         }
       )
     }
   );
-}, De = ({
-  children: e,
-  className: r,
-  ...t
+}, D = ({
+  children: t,
+  className: s,
+  ...e
 }) => {
-  const a = B(C);
-  a.cellWrapper = S;
-  const s = Le({
-    className: r,
+  const a = p(g);
+  a.cellWrapper = k;
+  const r = E({
+    className: s,
     mode: a.mode,
     stickyHeader: a.stickyHeader
   });
-  return /* @__PURE__ */ o("thead", { className: s, ...t, children: e });
-}, Fe = ({
-  children: e,
-  className: r,
-  ...t
+  return /* @__PURE__ */ l("thead", { className: r, ...e, children: t });
+}, U = ({
+  children: t,
+  className: s,
+  ...e
 }) => {
-  const a = B(C);
-  a.cellWrapper = H;
-  const s = Me({
-    className: r,
+  const a = p(g);
+  a.cellWrapper = w;
+  const r = V({
+    className: s,
     mode: a.mode,
     stickyFooter: a.stickyFooter
   });
-  return /* @__PURE__ */ o("tfoot", { className: s, ...t, children: e });
-}, Ge = ({ children: e, ...r }) => {
-  const t = B(C);
-  return t.cellWrapper = _, /* @__PURE__ */ o("tbody", { ...r, children: e });
-}, qe = ({
-  children: e,
-  className: r,
-  ...t
+  return /* @__PURE__ */ l("tfoot", { className: r, ...e, children: t });
+}, H = ({ children: t, ...s }) => {
+  const e = p(g);
+  return e.cellWrapper = b, /* @__PURE__ */ l("tbody", { ...s, children: t });
+}, G = ({
+  children: t,
+  className: s,
+  ...e
 }) => {
-  const a = B(C), s = Ve({
+  const a = p(g), r = I({
     mode: a.mode,
     cellWrapper: a.cellWrapper,
-    className: r
+    className: s
   });
-  return /* @__PURE__ */ o("tr", { className: s, ...t, children: e });
-}, je = ({
-  children: e,
-  component: r,
-  className: t,
+  return /* @__PURE__ */ l("tr", { className: r, ...e, children: t });
+}, M = ({
+  children: t,
+  component: s,
+  className: e,
   align: a,
-  ...s
+  ...r
 }) => {
-  const i = B(C), c = r || (i.cellWrapper === S ? "th" : "td"), { mainClasses: d, alignClasses: n } = Oe({
-    cellWrapper: i.cellWrapper,
-    className: t,
-    mode: i.mode,
-    compact: i.compact,
+  const n = p(g), _ = s || (n.cellWrapper === k ? "th" : "td"), { mainClasses: i, alignClasses: c } = R({
+    cellWrapper: n.cellWrapper,
+    className: e,
+    mode: n.mode,
+    compact: n.compact,
     align: a
   });
-  return a ? /* @__PURE__ */ o(c, { className: d, ...s, children: /* @__PURE__ */ o("div", { className: n, children: e }) }) : /* @__PURE__ */ o(c, { className: d, ...s, children: e });
-}, Ye = ({
-  align: e,
-  children: r,
-  buttonClassName: t,
+  return a ? /* @__PURE__ */ l(_, { className: i, ...r, children: /* @__PURE__ */ l("div", { className: c, children: t }) }) : /* @__PURE__ */ l(_, { className: i, ...r, children: t });
+}, F = ({
+  align: t,
+  children: s,
+  buttonClassName: e,
   className: a,
-  component: s,
-  focusMode: i = "alt-system",
-  mode: c = "alt-system",
-  onClick: d,
-  sortDirection: n,
-  sortedCell: g,
-  cellId: b,
-  ...h
+  component: r,
+  focusMode: n = "alt-system",
+  mode: _ = "alt-system",
+  onClick: i,
+  sortDirection: c,
+  sortedCell: d,
+  cellId: h,
+  ...m
 }) => {
-  const m = Ae({ buttonClassName: t });
-  return /* @__PURE__ */ o(
-    je,
+  const f = z({ buttonClassName: e });
+  return /* @__PURE__ */ l(
+    M,
     {
-      component: s,
+      component: r,
       className: a,
       role: "columnheader",
-      "aria-sort": n === R.ASC && g === b ? "ascending" : n === R.DESC && g === b ? "descending" : "other",
-      ...h,
-      children: /* @__PURE__ */ o(
-        ee,
+      "aria-sort": c === x.ASC && d === h ? "ascending" : c === x.DESC && d === h ? "descending" : "other",
+      ...m,
+      children: /* @__PURE__ */ l(
+        v,
         {
-          active: g === b,
-          className: m,
-          onClick: d,
-          align: e,
+          active: d === h,
+          className: f,
+          onClick: i,
+          align: t,
           noBorder: !0,
-          focusMode: i,
-          mode: c,
+          focusMode: n,
+          mode: _,
           fullWidth: !0,
-          labelRight: r,
-          children: n === R.ASC && g === b ? /* @__PURE__ */ o(ze, { className: "size-4", monotone: !0 }) : n === R.DESC && g === b ? /* @__PURE__ */ o(Ee, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ o(Re, { className: "size-4", monotone: !0 })
+          labelRight: s,
+          children: c === x.ASC && d === h ? /* @__PURE__ */ l(S, { className: "size-4", monotone: !0 }) : c === x.DESC && d === h ? /* @__PURE__ */ l(T, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ l(N, { className: "size-4", monotone: !0 })
         }
       )
     }
   );
 };
 export {
-  He as Table,
-  Ge as TableBody,
-  je as TableCell,
-  Ye as TableCellSort,
-  Fe as TableFooter,
-  De as TableHead,
-  qe as TableRow
+  j as Table,
+  H as TableBody,
+  M as TableCell,
+  F as TableCellSort,
+  U as TableFooter,
+  D as TableHead,
+  G as TableRow
 };

package/dist/index.js

@@ -1,13 +1,13 @@
 import { Table as r, TableBody as i, TableCell as T, TableCellSort as a, TableFooter as t, TableHead as _, TableRow as b } from "./components/Table/Table.js";
 import { TableCellSortDirections as I } from "./components/TableConstants/TableConstants.js";
 /*!
-  @versini/ui-table v5.0.0
+  @versini/ui-table v5.0.2
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TABLE__ || (window.__VERSINI_UI_TABLE__ = {
-    version: "5.0.0",
-    buildTime: "09/01/2025 03:18 PM EDT",
+    version: "5.0.2",
+    buildTime: "10/17/2025 12:54 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-table",
-	"version": "5.0.0",
+	"version": "5.0.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -50,23 +50,19 @@
 		"test:watch": "vitest",
 		"test": "vitest run"
 	},
-	"peerDependencies": {
-		"react": "^19.0.0",
-		"react-dom": "^19.0.0"
-	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "6.8.0",
-		"@versini/ui-types": "6.0.0"
+		"@testing-library/jest-dom": "6.9.1",
+		"@versini/ui-types": "6.0.2"
 	},
 	"dependencies": {
-		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-button": "8.0.0",
-		"@versini/ui-icons": "4.11.0",
+		"@tailwindcss/typography": "0.5.19",
+		"@versini/ui-button": "8.0.2",
+		"@versini/ui-icons": "4.12.3",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.12"
+		"tailwindcss": "4.1.14"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "70a47e9e30172dbb7b36306773fe9511e437fba6"
+	"gitHead": "67e049c9b2e46e8f52509bf6198ca0cdaf5d970a"
 }