@versini/ui-table 4.0.4 → 4.0.6

package/dist/components/Table/Table.js

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