@versini/ui-table 2.0.10 → 3.0.0

package/dist/index.d.ts

@@ -59,6 +59,10 @@ type TableCellProps = {
 	 * @default "td"
 	 */
 	component?: "td" | "th";
+	/**
+	 * Whether to align the cell content to the left, center, or right.
+	 */
+	align?: "left" | "center" | "right";
 } & React.ThHTMLAttributes<HTMLTableCellElement> &
 	React.TdHTMLAttributes<HTMLTableCellElement>;
 
@@ -119,7 +123,7 @@ declare const TableHead: ({ children, className, ...otherProps }: TableHeadProps
 declare const TableFooter: ({ children, className, ...otherProps }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 declare const TableBody: ({ children, ...otherProps }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 declare const TableRow: ({ children, className, ...otherProps }: TableRowProps) => react_jsx_runtime.JSX.Element;
-declare const TableCell: ({ children, component, className, ...otherProps }: TableCellProps) => react_jsx_runtime.JSX.Element;
+declare const TableCell: ({ children, component, className, align, ...otherProps }: TableCellProps) => react_jsx_runtime.JSX.Element;
 declare const TableCellSort: ({ align, children, buttonClassName, className, component, focusMode, mode, onClick, sortDirection, sortedCell, cellId, ...otherProps }: TableCellSortProps) => react_jsx_runtime.JSX.Element;
 
 export { Table, TableBody, TableCell, TableCellSort, TableCellSortDirections, TableFooter, TableHead, TableRow };

package/dist/index.js

@@ -1,20 +1,20 @@
 import i from "clsx";
-import { jsx as l, jsxs as k, Fragment as A } from "react/jsx-runtime";
+import { jsx as s, jsxs as y, Fragment as j } from "react/jsx-runtime";
 import T, { useContext as v } from "react";
 /*!
-  @versini/ui-table v2.0.10
+  @versini/ui-table v3.0.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TABLE__ || (window.__VERSINI_UI_TABLE__ = {
-    version: "2.0.10",
-    buildTime: "01/02/2025 05:13 PM EST",
+    version: "3.0.0",
+    buildTime: "01/03/2025 10:45 AM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const f = "thead", B = "tfoot", u = "tbody", _ = {
+const _ = "thead", B = "tfoot", u = "tbody", f = {
   ASC: "asc",
   DESC: "desc"
 }, W = ({
@@ -29,10 +29,14 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
     {
       "overflow-x-auto": !r && !o,
       "overflow-y-scroll": r || o,
-      "bg-surface-darker text-copy-light": e === "dark",
-      "bg-surface-light text-copy-dark": e === "light",
-      "bg-surface-darker text-copy-light dark:bg-surface-light dark:text-copy-dark": e === "system",
-      "bg-surface-light text-copy-dark dark:bg-surface-darker dark:text-copy-light": e === "alt-system"
+      "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
   ),
@@ -48,7 +52,7 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
     "text-copy-light dark:text-copy-dark": e === "system",
     "text-copy-dark dark:text-copy-light": e === "alt-system"
   })
-}), j = ({
+}), P = ({
   className: e,
   stickyHeader: a,
   mode: t
@@ -78,24 +82,24 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   mode: e,
   className: a,
   cellWrapper: t
-}) => t === f || t === B ? i(
+}) => t === _ || t === B ? i(
   {
-    "bg-table-head-dark": e === "dark",
-    "bg-table-head-light": e === "light",
-    "bg-table-head-dark dark:bg-table-head-light": e === "system",
-    "bg-table-head-light dark:bg-table-head-dark": e === "alt-system"
+    "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
 ) : i(
   "border-b last:border-0",
   {
-    "border-table-dark": e === "dark",
+    "border-table-dark": e === "dark" || e === "system",
     "odd:bg-table-dark-odd even:bg-table-dark-even": t === u && e === "dark",
-    "border-table-light": e === "light",
+    "border-table-light": e === "light" || e === "alt-system",
     "odd:bg-table-light-odd even:bg-table-light-even": t === u && e === "light",
-    "border-table-dark dark:border-table-light": e === "system",
+    "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",
-    "border-table-light dark:border-table-dark": e === "alt-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"
   },
   a
@@ -103,14 +107,18 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   cellWrapper: e,
   className: a,
   compact: t,
-  mode: r
+  mode: r,
+  align: o
 }) => i(
   {
-    "text-copy-light": r === "dark",
-    "text-copy-dark": r === "light",
-    "text-copy-light dark:text-copy-dark": r === "system",
-    "text-copy-dark dark:text-copy-light": r === "alt-system",
-    "px-4 py-3": !t && (e === f || e === B),
+    "flex justify-start": o === "left",
+    "flex justify-center": o === "center",
+    "flex justify-end": o === "right",
+    "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 === B),
     "p-4": !t && e === u,
     "px-2 py-1.5": t
   },
@@ -124,14 +132,14 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   labelLeft: r,
   align: o
 }) => {
-  const d = "max-h-8 py-0 px-2", c = "max-h-9 py-1 px-3", s = "max-h-12 py-2 px-4";
+  const l = "max-h-8 py-0 px-2", d = "max-h-9 py-1 px-3", c = "max-h-12 py-2 px-4";
   switch (e) {
     case S:
     case N:
       return i({
-        [d]: a === "small",
-        [c]: a === "medium",
-        [s]: a === "large"
+        [l]: a === "small",
+        [d]: a === "medium",
+        [c]: a === "large"
       });
     case C:
       return i("inline-flex items-center", {
@@ -152,21 +160,21 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   labelRight: t,
   labelLeft: r
 }) => {
-  const o = "text-sm font-medium", d = "text-base font-medium", c = "text-lg font-medium";
+  const o = "text-sm font-medium", l = "text-base font-medium", d = "text-lg font-medium";
   switch (e) {
     case S:
     case N:
       return i({
         "text-center": e === N,
         [o]: a === "small",
-        [d]: a === "medium",
-        [c]: a === "large"
+        [l]: a === "medium",
+        [d]: a === "large"
       });
     case C:
       return i({
         [o]: a === "small" && (t || r),
-        [d]: a === "medium" && (t || r),
-        [c]: a === "large" && (t || r)
+        [l]: a === "medium" && (t || r),
+        [d]: a === "large" && (t || r)
       });
   }
 }, K = ({
@@ -348,9 +356,9 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   raw: t,
   mode: r,
   focusMode: o,
-  disabled: d,
-  fullWidth: c,
-  size: s,
+  disabled: l,
+  fullWidth: d,
+  size: c,
   noBorder: g,
   labelRight: n,
   labelLeft: b,
@@ -371,19 +379,19 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   X({ radius: w }),
   q({
     type: e,
-    size: s,
+    size: c,
     labelRight: n,
     labelLeft: b,
     align: x
   }),
-  J({ type: e, size: s, labelRight: n, labelLeft: b }),
+  J({ type: e, size: c, labelRight: n, labelLeft: b }),
   ee({ mode: r, variant: h, noBorder: g }),
   te({ focusMode: o }),
-  Z({ mode: r, variant: h, disabled: d }),
-  $({ mode: r, variant: h, disabled: d }),
+  Z({ mode: r, variant: h, disabled: l }),
+  $({ mode: r, variant: h, disabled: l }),
   {
-    "w-full": c,
-    "disabled:cursor-not-allowed disabled:opacity-50": d
+    "w-full": d,
+    "disabled:cursor-not-allowed disabled:opacity-50": l
   },
   a
 )), re = (e, a, t) => {
@@ -391,12 +399,12 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
   !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);
 }, E = T.forwardRef((e, a) => {
   const { onClick: t, noInternalClick: r = !1, ...o } = e;
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ s(
     "button",
     {
       ref: a,
-      onClick: (d) => {
-        re(d, r, t);
+      onClick: (l) => {
+        re(l, r, t);
       },
       ...o
     }
@@ -404,13 +412,13 @@ const f = "thead", B = "tfoot", u = "tbody", _ = {
 });
 E.displayName = "BaseButton";
 /*!
-  @versini/ui-button v3.2.2
+  @versini/ui-button v4.0.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_BUTTON__ || (window.__VERSINI_UI_BUTTON__ = {
-    version: "3.2.2",
-    buildTime: "01/02/2025 05:13 PM EST",
+    version: "4.0.0",
+    buildTime: "01/03/2025 10:45 AM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -423,9 +431,9 @@ const R = T.forwardRef(
     mode: t = "system",
     focusMode: r = "system",
     fullWidth: o = !1,
-    className: d,
-    type: c = "button",
-    raw: s = !1,
+    className: l,
+    type: d = "button",
+    raw: c = !1,
     noBorder: g = !1,
     "aria-label": n,
     label: b,
@@ -437,15 +445,15 @@ const R = T.forwardRef(
     active: V = !1,
     radius: L = "large",
     ...M
-  }, H) => {
-    const U = ae({
+  }, A) => {
+    const H = ae({
       type: C,
       mode: t,
       focusMode: r,
       fullWidth: o,
       disabled: a,
-      raw: s,
-      className: d,
+      raw: c,
+      className: l,
       noBorder: g,
       size: m,
       labelRight: h,
@@ -453,11 +461,11 @@ const R = T.forwardRef(
       noBackground: x,
       align: w,
       radius: L
-    }), P = i({
-      "text-copy-accent-dark": t === "light" && !s,
-      "text-copy-light": t === "dark" && !s,
-      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !s,
-      "text-copy-light dark:text-copy-accent-dark": t === "system" && !s
+    }), U = i({
+      "text-copy-accent-dark": t === "light" && !c,
+      "text-copy-light": t === "dark" && !c,
+      "text-copy-accent-dark dark:text-copy-light": t === "alt-system" && !c,
+      "text-copy-light dark:text-copy-accent-dark": t === "system" && !c
     }), O = V ? i(
       "relative",
       "focus-within:static",
@@ -475,19 +483,19 @@ const R = T.forwardRef(
         "after:border-table-light dark:after:border-table-dark": t === "alt-system"
       }
     ) : "";
-    return /* @__PURE__ */ l("div", { className: O, children: /* @__PURE__ */ k(
+    return /* @__PURE__ */ s("div", { className: O, children: /* @__PURE__ */ y(
       E,
       {
-        ref: H,
-        className: U,
+        ref: A,
+        className: H,
         disabled: a,
-        type: c,
+        type: d,
         "aria-label": n || b,
         ...M,
         children: [
-          p && /* @__PURE__ */ l("span", { className: "pr-2", children: p }),
-          /* @__PURE__ */ l("div", { className: P, children: e }),
-          h && /* @__PURE__ */ l("span", { className: "pl-2", children: h })
+          p && /* @__PURE__ */ s("span", { className: "pr-2", children: p }),
+          /* @__PURE__ */ s("div", { className: U, children: e }),
+          h && /* @__PURE__ */ s("span", { className: "pl-2", children: h })
         ]
       }
     ) });
@@ -500,14 +508,14 @@ const z = ({
   viewBox: t,
   className: r,
   defaultViewBox: o,
-  size: d,
-  title: c,
-  semantic: s = !1,
+  size: l,
+  title: d,
+  semantic: c = !1,
   ...g
 }) => {
-  const n = i(d, r);
-  return /* @__PURE__ */ k(A, { children: [
-    /* @__PURE__ */ l(
+  const n = i(l, r);
+  return /* @__PURE__ */ y(j, { children: [
+    /* @__PURE__ */ s(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -515,23 +523,23 @@ const z = ({
         viewBox: t || o,
         fill: a || "currentColor",
         role: "img",
-        "aria-hidden": !s,
+        "aria-hidden": !c,
         focusable: !1,
         ...g,
         children: e
       }
     ),
-    c && s && /* @__PURE__ */ l("span", { className: "sr-only", children: c })
+    d && c && /* @__PURE__ */ s("span", { className: "sr-only", children: d })
   ] });
 };
 /*!
-  @versini/ui-svgicon v3.0.3
+  @versini/ui-svgicon v4.0.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_SVGICON__ || (window.__VERSINI_UI_SVGICON__ = {
-    version: "3.0.3",
-    buildTime: "01/02/2025 05:13 PM EST",
+    version: "4.0.0",
+    buildTime: "01/03/2025 10:45 AM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -543,7 +551,7 @@ const oe = ({
   title: t,
   monotone: r,
   ...o
-}) => /* @__PURE__ */ k(
+}) => /* @__PURE__ */ y(
   z,
   {
     defaultViewBox: "0 0 576 512",
@@ -553,14 +561,14 @@ const oe = ({
     title: t || "Sort",
     ...o,
     children: [
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ s(
         "path",
         {
           opacity: r ? "1" : "0.4",
           d: "M393.4 41.4c12.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 0L448 141.3V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V141.3l-41.4 41.4c-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 32V370.7L86.6 329.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96z" })
+      /* @__PURE__ */ s("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 32V370.7L86.6 329.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96z" })
     ]
   }
 ), ie = ({
@@ -569,7 +577,7 @@ const oe = ({
   title: t,
   monotone: r,
   ...o
-}) => /* @__PURE__ */ k(
+}) => /* @__PURE__ */ y(
   z,
   {
     defaultViewBox: "0 0 576 512",
@@ -579,23 +587,23 @@ const oe = ({
     title: t || "Sort Down",
     ...o,
     children: [
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ s(
         "path",
         {
           opacity: r ? "1" : "0.4",
           d: "M288 448c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32zm0-128c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32zm0-128c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32zm0-128c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H320c-17.7 0-32 14.3-32 32z"
         }
       ),
-      /* @__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-32s-32 14.3-32 32V365.7L63.6 330.4c-11.9-13-32.2-13.9-45.2-2s-13.9 32.2-2 45.2l88 96C110.5 476.2 119 480 128 480z" })
+      /* @__PURE__ */ s("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-32s-32 14.3-32 32V365.7L63.6 330.4c-11.9-13-32.2-13.9-45.2-2s-13.9 32.2-2 45.2l88 96C110.5 476.2 119 480 128 480z" })
     ]
   }
-), le = ({
+), se = ({
   className: e,
   viewBox: a,
   title: t,
   monotone: r,
   ...o
-}) => /* @__PURE__ */ k(
+}) => /* @__PURE__ */ y(
   z,
   {
     defaultViewBox: "0 0 576 512",
@@ -605,31 +613,31 @@ const oe = ({
     title: t || "Sort Up",
     ...o,
     children: [
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ s(
         "path",
         {
           opacity: r ? "1" : "0.4",
           d: "M288 64c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32zm0 128c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32zm0 128c0-17.7 14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32zm0 128c0-17.7 14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32z"
         }
       ),
-      /* @__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.3L63.6 181.6c-11.9 13-32.2 13.9-45.2 2s-13.9-32.2-2-45.2l88-96C110.5 35.8 119 32 128 32z" })
+      /* @__PURE__ */ s("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.3L63.6 181.6c-11.9 13-32.2 13.9-45.2 2s-13.9-32.2-2-45.2l88-96C110.5 35.8 119 32 128 32z" })
     ]
   }
 );
 /*!
-  @versini/ui-icons v3.1.1
+  @versini/ui-icons v4.0.0
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_ICONS__ || (window.__VERSINI_UI_ICONS__ = {
-    version: "3.1.1",
-    buildTime: "01/02/2025 05:13 PM EST",
+    version: "4.0.0",
+    buildTime: "01/03/2025 10:45 AM EST",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const y = T.createContext({
+const k = T.createContext({
   mode: "light",
   cellWrapper: "thead",
   stickyHeader: !1,
@@ -641,33 +649,33 @@ const y = T.createContext({
   caption: t,
   compact: r,
   summary: o,
-  className: d,
-  wrapperClassName: c,
-  maxHeight: s,
+  className: l,
+  wrapperClassName: d,
+  maxHeight: c,
   stickyHeader: g,
   stickyFooter: n,
   ...b
 }) => {
   const m = W({
     mode: a,
-    className: d,
-    wrapperClassName: c,
+    className: l,
+    wrapperClassName: d,
     stickyHeader: g,
     stickyFooter: n
   });
-  return /* @__PURE__ */ l(
-    y.Provider,
+  return /* @__PURE__ */ s(
+    k.Provider,
     {
       value: { mode: a, stickyHeader: g, stickyFooter: n, compact: r },
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ s(
         "div",
         {
           className: m.wrapper,
-          ...s && {
-            style: { maxHeight: s }
+          ...c && {
+            style: { maxHeight: c }
           },
-          children: /* @__PURE__ */ k("table", { className: m.table, summary: o, ...b, children: [
-            t && /* @__PURE__ */ l("caption", { className: m.caption, children: t }),
+          children: /* @__PURE__ */ y("table", { className: m.table, summary: o, ...b, children: [
+            t && /* @__PURE__ */ s("caption", { className: m.caption, children: t }),
             e
           ] })
         }
@@ -679,90 +687,92 @@ const y = T.createContext({
   className: a,
   ...t
 }) => {
-  const r = v(y);
-  r.cellWrapper = f;
-  const o = j({
+  const r = v(k);
+  r.cellWrapper = _;
+  const o = P({
     className: a,
     mode: r.mode,
     stickyHeader: r.stickyHeader
   });
-  return /* @__PURE__ */ l("thead", { className: o, ...t, children: e });
+  return /* @__PURE__ */ s("thead", { className: o, ...t, children: e });
 }, be = ({
   children: e,
   className: a,
   ...t
 }) => {
-  const r = v(y);
+  const r = v(k);
   r.cellWrapper = B;
   const o = D({
     className: a,
     mode: r.mode,
     stickyFooter: r.stickyFooter
   });
-  return /* @__PURE__ */ l("tfoot", { className: o, ...t, children: e });
+  return /* @__PURE__ */ s("tfoot", { className: o, ...t, children: e });
 }, me = ({ children: e, ...a }) => {
-  const t = v(y);
-  return t.cellWrapper = u, /* @__PURE__ */ l("tbody", { ...a, children: e });
+  const t = v(k);
+  return t.cellWrapper = u, /* @__PURE__ */ s("tbody", { ...a, children: e });
 }, ue = ({
   children: e,
   className: a,
   ...t
 }) => {
-  const r = v(y), o = F({
+  const r = v(k), o = F({
     mode: r.mode,
     cellWrapper: r.cellWrapper,
     className: a
   });
-  return /* @__PURE__ */ l("tr", { className: o, ...t, children: e });
-}, de = ({
+  return /* @__PURE__ */ s("tr", { className: o, ...t, children: e });
+}, le = ({
   children: e,
   component: a,
   className: t,
-  ...r
+  align: r,
+  ...o
 }) => {
-  const o = v(y), d = a || (o.cellWrapper === f ? "th" : "td"), c = G({
-    cellWrapper: o.cellWrapper,
+  const l = v(k), d = a || (l.cellWrapper === _ ? "th" : "td"), c = G({
+    cellWrapper: l.cellWrapper,
     className: t,
-    mode: o.mode,
-    compact: o.compact
+    mode: l.mode,
+    compact: l.compact,
+    align: r
   });
-  return /* @__PURE__ */ l(d, { className: c, ...r, children: e });
-}, ke = ({
+  return /* @__PURE__ */ s(d, { className: c, ...o, children: e });
+}, ye = ({
   align: e,
   children: a,
   buttonClassName: t,
   className: r,
   component: o,
-  focusMode: d = "alt-system",
-  mode: c = "alt-system",
-  onClick: s,
+  focusMode: l = "alt-system",
+  mode: d = "alt-system",
+  onClick: c,
   sortDirection: g,
   sortedCell: n,
   cellId: b,
   ...m
 }) => {
   const h = Y({ buttonClassName: t });
-  return /* @__PURE__ */ l(
-    de,
+  return /* @__PURE__ */ s(
+    le,
     {
       component: o,
       className: r,
       role: "columnheader",
-      "aria-sort": g === _.ASC && n === b ? "ascending" : g === _.DESC && n === b ? "descending" : "other",
+      "aria-sort": g === f.ASC && n === b ? "ascending" : g === f.DESC && n === b ? "descending" : "other",
       ...m,
-      children: /* @__PURE__ */ l(
+      children: /* @__PURE__ */ s(
         R,
         {
           active: n === b,
           className: h,
-          onClick: s,
+          onClick: c,
           align: e,
           noBorder: !0,
-          focusMode: d,
-          mode: c,
+          focusMode: l,
+          mode: d,
           fullWidth: !0,
           labelRight: a,
-          children: g === _.ASC && n === b ? /* @__PURE__ */ l(le, { className: "size-4", monotone: !0 }) : g === _.DESC && n === b ? /* @__PURE__ */ l(ie, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ l(oe, { className: "size-4", monotone: !0 })
+          children: g === f.ASC && n === b ? /* @__PURE__ */ s(se, { className: "size-4", monotone: !0 }) : g === f.DESC && n === b ? /* @__PURE__ */ s(ie, { className: "size-4", monotone: !0 }) : /* @__PURE__ */ s(oe, { className: "size-4", monotone: !0 })
         }
       )
     }
@@ -771,9 +781,9 @@ const y = T.createContext({
 export {
   ge as Table,
   me as TableBody,
-  de as TableCell,
-  ke as TableCellSort,
-  _ as TableCellSortDirections,
+  le as TableCell,
+  ye as TableCellSort,
+  f as TableCellSortDirections,
   be as TableFooter,
   he as TableHead,
   ue as TableRow

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-table",
-	"version": "2.0.10",
+	"version": "3.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,14 +39,14 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.15",
-		"@versini/ui-button": "3.2.2",
-		"@versini/ui-icons": "3.1.1",
-		"@versini/ui-types": "3.0.3",
+		"@versini/ui-button": "4.0.0",
+		"@versini/ui-icons": "4.0.0",
+		"@versini/ui-types": "4.0.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "3.4.17"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "c43b9e0ea4ad97fde6cc3d088c32374ff34c6495"
+	"gitHead": "406bf426c5b3186ef7197e0b51d83ec0de689cde"
 }