@ztwoint/z-ui 0.1.128 → 0.1.130

package/dist/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "stroke" | "filled" | "ghost" | null | undefined;
+    variant?: "stroke" | "filled" | "colored-stroke" | "ghost" | null | undefined;
     shade?: "danger" | "neutral" | "brand" | null | undefined;
     size?: "small" | "large" | "medium" | null | undefined;
     iconOnly?: boolean | null | undefined;

package/dist/components/button/button.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as x, Fragment as h } from "react/jsx-runtime";
+import { jsx as e, jsxs as f, Fragment as h } from "react/jsx-runtime";
 import k from "react";
 import { Slot as w } from "@radix-ui/react-slot";
 import { cva as N } from "class-variance-authority";
@@ -10,9 +10,12 @@ const C = N(
       variant: {
         filled: [""],
         stroke: [
-          "ring-[0.5px] ring-btn-secondary-stroke-default hover:ring-btn-secondary-stroke-hover active:ring-btn-secondary-stroke-pressed disabled:ring-btn-secondary-stroke-disabled",
+          "ring-[1px] ring-btn-secondary-stroke-default hover:ring-btn-secondary-stroke-hover active:ring-btn-secondary-stroke-pressed disabled:ring-btn-secondary-stroke-disabled",
           "bg-btn-secondary-surface-default hover:bg-btn-secondary-surface-hover active:bg-btn-secondary-surface-pressed disabled:bg-btn-secondary-surface-disabled"
         ],
+        "colored-stroke": [
+          "ring-[1px] bg-btn-secondary-surface-default hover:bg-btn-secondary-surface-hover active:bg-btn-secondary-surface-pressed disabled:bg-btn-secondary-surface-disabled"
+        ],
         ghost: [
           "hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted"
         ]
@@ -35,17 +38,17 @@ const C = N(
       {
         variant: "filled",
         shade: "brand",
-        class: "bg-btn-primary-brand-surface-default hover:bg-btn-primary-brand-surface-hover active:bg-btn-primary-brand-surface-pressed disabled:bg-btn-primary-brand-surface-disabled ring-[0.5px] ring-btn-primary-brand-stroke-default hover:ring-btn-primary-brand-stroke-hover active:ring-btn-primary-brand-stroke-pressed disabled:ring-btn-primary-brand-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
+        class: "bg-btn-primary-brand-surface-default hover:bg-btn-primary-brand-surface-hover active:bg-btn-primary-brand-surface-pressed disabled:bg-btn-primary-brand-surface-disabled ring-[1px] ring-btn-primary-brand-stroke-default hover:ring-btn-primary-brand-stroke-hover active:ring-btn-primary-brand-stroke-pressed disabled:ring-btn-primary-brand-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "filled",
         shade: "neutral",
-        class: "bg-btn-primary-neutral-surface-default hover:bg-btn-primary-neutral-surface-hover active:bg-btn-primary-neutral-surface-pressed disabled:bg-btn-primary-neutral-surface-disabled ring-[0.5px] ring-btn-primary-neutral-stroke-default hover:ring-btn-primary-neutral-stroke-hover active:ring-btn-primary-neutral-stroke-pressed disabled:ring-btn-primary-neutral-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
+        class: "bg-btn-primary-neutral-surface-default hover:bg-btn-primary-neutral-surface-hover active:bg-btn-primary-neutral-surface-pressed disabled:bg-btn-primary-neutral-surface-disabled ring-[1px] ring-btn-primary-neutral-stroke-default hover:ring-btn-primary-neutral-stroke-hover active:ring-btn-primary-neutral-stroke-pressed disabled:ring-btn-primary-neutral-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "filled",
         shade: "danger",
-        class: "bg-btn-primary-danger-surface-default hover:bg-btn-primary-danger-surface-hover active:bg-btn-primary-danger-surface-pressed disabled:bg-btn-primary-danger-surface-disabled ring-[0.5px] ring-btn-primary-danger-stroke-default hover:ring-btn-primary-danger-stroke-hover active:ring-btn-primary-danger-stroke-pressed disabled:ring-btn-primary-danger-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
+        class: "bg-btn-primary-danger-surface-default hover:bg-btn-primary-danger-surface-hover active:bg-btn-primary-danger-surface-pressed disabled:bg-btn-primary-danger-surface-disabled ring-[1px] ring-btn-primary-danger-stroke-default hover:ring-btn-primary-danger-stroke-hover active:ring-btn-primary-danger-stroke-pressed disabled:ring-btn-primary-danger-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
@@ -62,6 +65,21 @@ const C = N(
         shade: "danger",
         class: "text-text-danger-secondary disabled:text-text-neutral-muted"
       },
+      {
+        variant: "colored-stroke",
+        shade: "neutral",
+        class: "text-text-neutral-primary ring-text-neutral-primary hover:ring-text-neutral-primary active:ring-text-neutral-primary disabled:text-text-neutral-muted disabled:ring-text-neutral-muted"
+      },
+      {
+        variant: "colored-stroke",
+        shade: "brand",
+        class: "text-text-neutral-primary ring-text-brand-secondary hover:ring-text-brand-secondary active:ring-text-brand-secondary disabled:text-text-neutral-muted disabled:ring-text-neutral-muted"
+      },
+      {
+        variant: "colored-stroke",
+        shade: "danger",
+        class: "text-text-neutral-primary ring-text-danger-secondary hover:ring-text-danger-secondary active:ring-text-danger-secondary disabled:text-text-neutral-muted disabled:ring-text-neutral-muted"
+      },
       {
         variant: "ghost",
         shade: "neutral",
@@ -90,19 +108,19 @@ const C = N(
     className: b,
     shade: u = "neutral",
     size: c,
-    variant: m = "filled",
+    variant: g = "filled",
     asChild: i = !1,
     leftIcon: r,
     rightIcon: t,
-    label: p,
+    label: m,
     children: l,
-    ...g
-  }, y) => {
-    const f = i ? w : "button", a = p || l, n = !a && !!(r || t), o = n ? r || t : null, v = d(
-      C({ shade: u, size: c, variant: m, iconOnly: n }),
+    ...p
+  }, x) => {
+    const y = i ? w : "button", a = m || l, n = !a && !!(r || t), o = n ? r || t : null, v = d(
+      C({ shade: u, size: c, variant: g, iconOnly: n }),
       b
     ), s = "w-3.5 h-3.5 min-w-max";
-    return /* @__PURE__ */ e(f, { className: v, ref: y, ...g, children: i ? l : n ? o ? /* @__PURE__ */ e("span", { className: s, children: o }) : null : /* @__PURE__ */ x(h, { children: [
+    return /* @__PURE__ */ e(y, { className: v, ref: x, ...p, children: i ? l : n ? o ? /* @__PURE__ */ e("span", { className: s, children: o }) : null : /* @__PURE__ */ f(h, { children: [
       r && /* @__PURE__ */ e("span", { className: d(s), children: r }),
       a && /* @__PURE__ */ e("span", { children: a }),
       t && /* @__PURE__ */ e("span", { className: d(s), children: t })

package/dist/components/column-reorder/column-reorder.js

@@ -4,35 +4,35 @@ import { cn as f } from "../../lib/utils.js";
 import { ColumnItem as p } from "./components/column-item/column-item.js";
 import { useColumnReorder as c } from "./column-reorder.hook.js";
 const C = ({
-  columns: o,
+  columns: e,
   onReorder: d,
   onRemove: i,
   onEdit: l,
-  renderAction: t,
-  className: m,
-  disabled: n = !1,
-  editable: s = !1
+  renderAction: m,
+  className: t,
+  disabled: s = !1,
+  editable: n = !1
 }) => {
-  const { internalColumns: a } = c({ columns: o, onReorder: d });
+  const { internalColumns: a } = c({ columns: e, onReorder: d });
   return /* @__PURE__ */ r(
     "div",
     {
       className: f(
-        "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
-        m
+        "rounded-2xl border-[1px] border-stroke-solid-light bg-background-neutral-default overflow-hidden box-shadow-medium-10",
+        t
       ),
-      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: a.map((e, u) => /* @__PURE__ */ r(
+      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: a.map((o, u) => /* @__PURE__ */ r(
         p,
         {
-          column: e,
+          column: o,
           index: u,
           onRemove: i,
           onEdit: l,
-          renderAction: t,
-          disabled: n,
-          editable: s
+          renderAction: m,
+          disabled: s,
+          editable: n
         },
-        e.id
+        o.id
       )) })
     }
   );

package/dist/components/dropdown/z2-dropdown.js

@@ -71,7 +71,7 @@ function B({
     "div",
     {
       className: d(
-        "flex items-center justify-center gap-1.5 p-2 self-stretch relative cursor-pointer rounded-lg bg-white border-[0.5px] border-[#E0E0E0] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:border-neutral-300 ",
+        "flex items-center justify-center gap-1.5 p-2 self-stretch relative cursor-pointer rounded-lg bg-white border-[1px] border-[#E0E0E0] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:border-neutral-300 ",
         o
       ),
       children: [
@@ -133,7 +133,7 @@ function F({
       align: a,
       sideOffset: 8,
       className: d(
-        "bg-white max-w-fit w-[var(--radix-popover-trigger-width)] p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg min-w-fit",
+        "bg-white max-w-fit w-[var(--radix-popover-trigger-width)] p-1 flex flex-col items-start rounded-2xl border-[1px] border-[#E0E0E0] shadow-lg min-w-fit",
         e
       ),
       ...o
@@ -222,7 +222,7 @@ function L({
       side: l,
       className: d(
         "min-w-md min-h-fit h-[var(--radix-popover-content-height)]",
-        "bg-white w-full p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg",
+        "bg-white w-full p-1 flex flex-col items-start rounded-2xl border-[1px] border-[#E0E0E0] shadow-lg",
         e
       ),
       ...r

package/dist/components/dynamic-table/z2-table.js

@@ -1,12 +1,12 @@
 import { jsxs as R, jsx as o, Fragment as z } from "react/jsx-runtime";
 import { Fragment as P } from "react";
 import { Z2Checkbox as k } from "../checkbox/checkbox.js";
-import { useZ2Table as g } from "./z2-table-context.js";
+import { useZ2Table as b } from "./z2-table-context.js";
 import { flexRender as w } from "@tanstack/react-table";
 import { cva as v } from "class-variance-authority";
 import { cn as p } from "../../lib/utils.js";
 import { Z2Skeleton as Z } from "../skeleton/skeleton.js";
-const B = v("", {
+const _ = v("", {
   variants: {
     size: {
       dense: "p-2 h-8",
@@ -37,33 +37,33 @@ function N(l) {
     zIndex: e ? 1 : 0
   };
 }
-function _({ children: l }) {
-  var t, r, a;
-  const { props: e } = g();
+function B({ children: l }) {
+  var a, r, t;
+  const { props: e } = b();
   return /* @__PURE__ */ o(
     "table",
     {
       "data-slot": "data-grid-table",
       className: p(
         "w-full align-middle text-left rtl:text-right text-neutral-secondary",
-        !((t = e.tableLayout) != null && t.columnsDraggable) && "border-separate border-spacing-0",
+        !((a = e.tableLayout) != null && a.columnsDraggable) && "border-separate border-spacing-0",
         ((r = e.tableLayout) == null ? void 0 : r.width) === "fixed" ? "table-fixed" : "table-auto",
-        (a = e.tableClassNames) == null ? void 0 : a.base
+        (t = e.tableClassNames) == null ? void 0 : t.base
       ),
       children: l
     }
   );
 }
 function I({ children: l }) {
-  var t, r, a;
-  const { props: e } = g();
+  var a, r, t;
+  const { props: e } = b();
   return /* @__PURE__ */ o(
     "thead",
     {
       className: p(
         "",
-        (t = e.tableClassNames) == null ? void 0 : t.header,
-        ((r = e.tableLayout) == null ? void 0 : r.headerSticky) && ((a = e.tableClassNames) == null ? void 0 : a.headerSticky)
+        (a = e.tableClassNames) == null ? void 0 : a.header,
+        ((r = e.tableLayout) == null ? void 0 : r.headerSticky) && ((t = e.tableClassNames) == null ? void 0 : t.headerSticky)
       ),
       children: l
     }
@@ -73,18 +73,18 @@ function T({
   children: l,
   headerGroup: e
 }) {
-  var r, a, n, d, s;
-  const { props: t } = g();
+  var r, t, n, d, i;
+  const { props: a } = b();
   return /* @__PURE__ */ o(
     "tr",
     {
       className: p(
         "bg-transparent tracking-wider rounded-xl",
-        ((r = t.tableLayout) == null ? void 0 : r.headerBorder) && "[&>th]:border-b border-stroke-solid-light",
-        ((a = t.tableLayout) == null ? void 0 : a.cellBorder) && "[&_>:last-child]:border-e-0",
-        ((n = t.tableLayout) == null ? void 0 : n.stripped) && "bg-transparent",
-        ((d = t.tableLayout) == null ? void 0 : d.headerBackground) !== !1 && "bg-background-neutral-medium",
-        (s = t.tableClassNames) == null ? void 0 : s.headerRow
+        ((r = a.tableLayout) == null ? void 0 : r.headerBorder) && "[&>th]:border-b border-stroke-solid-light",
+        ((t = a.tableLayout) == null ? void 0 : t.cellBorder) && "[&_>:last-child]:border-e-0",
+        ((n = a.tableLayout) == null ? void 0 : n.stripped) && "bg-transparent",
+        ((d = a.tableLayout) == null ? void 0 : d.headerBackground) !== !1 && "bg-background-neutral-medium",
+        (i = a.tableClassNames) == null ? void 0 : i.headerRow
       ),
       children: l
     },
@@ -94,42 +94,42 @@ function T({
 function D({
   children: l,
   header: e,
-  dndRef: t,
+  dndRef: a,
   dndStyle: r
 }) {
-  var c, b, m, h, f, C, y, x;
-  const { props: a } = g(), { column: n } = e, d = n.getIsPinned(), s = d === "left" && n.getIsLastColumn("left"), i = d === "right" && n.getIsFirstColumn("right"), u = B({
-    size: (c = a.tableLayout) != null && c.dense ? "dense" : "default"
+  var u, g, m, h, f, C, y, x;
+  const { props: t } = b(), { column: n } = e, d = n.getIsPinned(), i = d === "left" && n.getIsLastColumn("left"), s = d === "right" && n.getIsFirstColumn("right"), c = _({
+    size: (u = t.tableLayout) != null && u.dense ? "dense" : "default"
   });
   return /* @__PURE__ */ o(
     "th",
     {
-      ref: t,
+      ref: a,
       colSpan: e.colSpan,
       style: {
-        ...((b = a.tableLayout) == null ? void 0 : b.width) === "fixed" && {
+        ...((g = t.tableLayout) == null ? void 0 : g.width) === "fixed" && {
           width: `${e.getSize()}px`
         },
-        ...((m = a.tableLayout) == null ? void 0 : m.columnsPinnable) && n.getCanPin() && N(n),
+        ...((m = t.tableLayout) == null ? void 0 : m.columnsPinnable) && n.getCanPin() && N(n),
         ...r || null
       },
       "data-pinned": d || void 0,
-      "data-last-col": s ? "left" : i ? "right" : void 0,
+      "data-last-col": i ? "left" : s ? "right" : void 0,
       className: p(
         "relative h-10 text-left rtl:text-right align-middle [&:has([role=checkbox])]:pe-0 border-stroke-solid-light leading-none-medium-sm dark:text-inverted-secondary",
-        u,
-        ((h = a.tableLayout) == null ? void 0 : h.cellBorder) && "border-e",
-        ((f = a.tableLayout) == null ? void 0 : f.columnsResizable) && n.getCanResize() && "truncate",
-        ((C = a.tableLayout) == null ? void 0 : C.columnsPinnable) && n.getCanPin() && "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs",
+        c,
+        ((h = t.tableLayout) == null ? void 0 : h.cellBorder) && "border-e",
+        ((f = t.tableLayout) == null ? void 0 : f.columnsResizable) && n.getCanResize() && "truncate",
+        ((C = t.tableLayout) == null ? void 0 : C.columnsPinnable) && n.getCanPin() && "[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs",
         (y = e.column.columnDef.meta) == null ? void 0 : y.headerClassName,
-        n.getIndex() === 0 || n.getIndex() === e.headerGroup.headers.length - 1 ? (x = a.tableClassNames) == null ? void 0 : x.edgeCell : ""
+        n.getIndex() === 0 || n.getIndex() === e.headerGroup.headers.length - 1 ? (x = t.tableClassNames) == null ? void 0 : x.edgeCell : ""
       ),
       children: l
     },
     e.id
   );
 }
-function A({ header: l }) {
+function M({ header: l }) {
   const { column: e } = l;
   return /* @__PURE__ */ o(
     "div",
@@ -141,18 +141,18 @@ function A({ header: l }) {
     }
   );
 }
-function M() {
+function A() {
   return /* @__PURE__ */ o("tbody", { "aria-hidden": "true", className: "h-2" });
 }
 function V({ children: l }) {
-  var t, r;
-  const { props: e } = g();
+  var a, r;
+  const { props: e } = b();
   return /* @__PURE__ */ o(
     "tbody",
     {
       className: p(
         "[&_tr:last-child]:border-0",
-        ((t = e.tableLayout) == null ? void 0 : t.rowRounded) && "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg",
+        ((a = e.tableLayout) == null ? void 0 : a.rowRounded) && "[&_td:first-child]:rounded-s-lg [&_td:last-child]:rounded-e-lg",
         (r = e.tableClassNames) == null ? void 0 : r.body
       ),
       children: l
@@ -160,19 +160,19 @@ function V({ children: l }) {
   );
 }
 function F({ children: l }) {
-  var r, a, n, d, s;
-  const { table: e, props: t } = g();
+  var r, t, n, d, i;
+  const { table: e, props: a } = b();
   return /* @__PURE__ */ o(
     "tr",
     {
       className: p(
         "hover:bg-background-neutral-medium data-[state=selected]:bg-muted/50 border-stroke-solid-light",
-        t.onRowClick && "cursor-pointer",
-        !((r = t.tableLayout) != null && r.stripped) && ((a = t.tableLayout) == null ? void 0 : a.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light",
-        ((n = t.tableLayout) == null ? void 0 : n.cellBorder) && "[&_>:last-child]:border-e-0",
-        ((d = t.tableLayout) == null ? void 0 : d.stripped) && "odd:bg-background-neutral-medium hover:bg-transparent odd:hover:bg-background-neutral-medium",
+        a.onRowClick && "cursor-pointer",
+        !((r = a.tableLayout) != null && r.stripped) && ((t = a.tableLayout) == null ? void 0 : t.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light",
+        ((n = a.tableLayout) == null ? void 0 : n.cellBorder) && "[&_>:last-child]:border-e-0",
+        ((d = a.tableLayout) == null ? void 0 : d.stripped) && "odd:bg-background-neutral-medium hover:bg-transparent odd:hover:bg-background-neutral-medium",
         e.options.enableRowSelection && "[&_>:first-child]:relative",
-        (s = t.tableClassNames) == null ? void 0 : s.bodyRow
+        (i = a.tableClassNames) == null ? void 0 : i.bodyRow
       ),
       children: l
     }
@@ -182,26 +182,26 @@ function H({
   children: l,
   column: e
 }) {
-  var n, d, s, i, u, c, b;
-  const { props: t, table: r } = g(), a = S({
-    size: (n = t.tableLayout) != null && n.dense ? "dense" : "default"
+  var n, d, i, s, c, u, g;
+  const { props: a, table: r } = b(), t = S({
+    size: (n = a.tableLayout) != null && n.dense ? "dense" : "default"
   });
   return /* @__PURE__ */ o(
     "td",
     {
       style: {
-        ...((d = t.tableLayout) == null ? void 0 : d.width) === "fixed" && {
+        ...((d = a.tableLayout) == null ? void 0 : d.width) === "fixed" && {
           width: `${e.getSize()}px`
         }
       },
       className: p(
         "align-middle",
-        a,
-        ((s = t.tableLayout) == null ? void 0 : s.cellBorder) && "border-e border-stroke-solid-light",
-        ((i = t.tableLayout) == null ? void 0 : i.columnsResizable) && e.getCanResize() && "truncate",
-        (u = e.columnDef.meta) == null ? void 0 : u.cellClassName,
-        ((c = t.tableLayout) == null ? void 0 : c.columnsPinnable) && e.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-stroke-solid-light data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
-        e.getIndex() === 0 || e.getIndex() === r.getVisibleFlatColumns().length - 1 ? (b = t.tableClassNames) == null ? void 0 : b.edgeCell : ""
+        t,
+        ((i = a.tableLayout) == null ? void 0 : i.cellBorder) && "border-e border-stroke-solid-light",
+        ((s = a.tableLayout) == null ? void 0 : s.columnsResizable) && e.getCanResize() && "truncate",
+        (c = e.columnDef.meta) == null ? void 0 : c.cellClassName,
+        ((u = a.tableLayout) == null ? void 0 : u.columnsPinnable) && e.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-stroke-solid-light data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+        e.getIndex() === 0 || e.getIndex() === r.getVisibleFlatColumns().length - 1 ? (g = a.tableClassNames) == null ? void 0 : g.edgeCell : ""
       ),
       children: l
     }
@@ -210,79 +210,79 @@ function H({
 function E({
   children: l,
   row: e,
-  dndRef: t,
+  dndRef: a,
   dndStyle: r
 }) {
-  var d, s, i, u, c;
-  const { props: a, table: n } = g();
+  var d, i, s, c, u;
+  const { props: t, table: n } = b();
   return /* @__PURE__ */ o(
     "tr",
     {
-      ref: t,
+      ref: a,
       style: { ...r || null },
       "data-state": n.options.enableRowSelection && e.getIsSelected() ? "selected" : void 0,
-      onClick: () => a.onRowClick && a.onRowClick(e.original),
+      onClick: () => t.onRowClick && t.onRowClick(e.original),
       className: p(
         "hover:bg-background-neutral-medium data-[state=selected]:bg-muted/50 leading-none-medium-sm text-neutral-primary dark:text-inverted-primary",
-        a.onRowClick && "cursor-pointer",
-        !((d = a.tableLayout) != null && d.stripped) && ((s = a.tableLayout) == null ? void 0 : s.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light",
-        ((i = a.tableLayout) == null ? void 0 : i.cellBorder) && "[&_>:last-child]:border-e-0",
-        ((u = a.tableLayout) == null ? void 0 : u.stripped) && "odd:bg-background-neutral-medium hover:bg-transparent odd:hover:bg-background-neutral-medium",
+        t.onRowClick && "cursor-pointer",
+        !((d = t.tableLayout) != null && d.stripped) && ((i = t.tableLayout) == null ? void 0 : i.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light",
+        ((s = t.tableLayout) == null ? void 0 : s.cellBorder) && "[&_>:last-child]:border-e-0",
+        ((c = t.tableLayout) == null ? void 0 : c.stripped) && "odd:bg-background-neutral-medium hover:bg-transparent odd:hover:bg-background-neutral-medium",
         n.options.enableRowSelection && "[&_>:first-child]:relative",
-        (c = a.tableClassNames) == null ? void 0 : c.bodyRow
+        (u = t.tableClassNames) == null ? void 0 : u.bodyRow
       ),
       children: l
     }
   );
 }
 function j({ row: l }) {
-  var a, n, d, s, i, u;
-  const { props: e, table: t } = g();
-  return ((n = (a = t.getAllColumns().find((c) => {
-    var b;
-    return (b = c.columnDef.meta) == null ? void 0 : b.expandedContent;
-  })) == null ? void 0 : a.columnDef.meta) == null ? void 0 : n.expandedContent) ? /* @__PURE__ */ o(
+  var d, i;
+  const { props: e, table: a } = b(), r = a.getAllColumns().find((s) => {
+    var c;
+    return (c = s.columnDef.meta) == null ? void 0 : c.expandedContent;
+  }), t = (d = r == null ? void 0 : r.columnDef.meta) == null ? void 0 : d.expandedContent;
+  if (!t)
+    return null;
+  let n;
+  return typeof t == "function" ? n = t(l.original) : n = t, n == null ? null : /* @__PURE__ */ o(
     "tr",
     {
       className: p(
-        ((d = e.tableLayout) == null ? void 0 : d.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light"
+        ((i = e.tableLayout) == null ? void 0 : i.rowBorder) && "[&:not(:last-child)>td]:border-b [&:not(:last-child)>td]:border-stroke-solid-light"
       ),
-      children: /* @__PURE__ */ o("td", { colSpan: l.getVisibleCells().length, children: (u = (i = (s = t.getAllColumns().find((c) => {
-        var b;
-        return (b = c.columnDef.meta) == null ? void 0 : b.expandedContent;
-      })) == null ? void 0 : s.columnDef.meta) == null ? void 0 : i.expandedContent) == null ? void 0 : u.call(i, l.original) })
+      children: /* @__PURE__ */ o("td", { colSpan: l.getVisibleCells().length, children: n })
     }
-  ) : null;
+  );
 }
 function $({
   children: l,
   cell: e,
-  dndRef: t,
+  dndRef: a,
   dndStyle: r
 }) {
-  var b, m, h, f, C, y, x, L;
-  const { props: a } = g(), { column: n, row: d } = e, s = n.getIsPinned(), i = s === "left" && n.getIsLastColumn("left"), u = s === "right" && n.getIsFirstColumn("right"), c = S({
-    size: (b = a.tableLayout) != null && b.dense ? "dense" : "default"
+  var g, m, h, f, C, y, x, L;
+  const { props: t } = b(), { column: n, row: d } = e, i = n.getIsPinned(), s = i === "left" && n.getIsLastColumn("left"), c = i === "right" && n.getIsFirstColumn("right"), u = S({
+    size: (g = t.tableLayout) != null && g.dense ? "dense" : "default"
   });
   return /* @__PURE__ */ o(
     "td",
     {
-      ref: t,
-      ...(m = a.tableLayout) != null && m.columnsDraggable && !s ? { cell: e } : {},
+      ref: a,
+      ...(m = t.tableLayout) != null && m.columnsDraggable && !i ? { cell: e } : {},
       style: {
-        ...((h = a.tableLayout) == null ? void 0 : h.columnsPinnable) && n.getCanPin() && N(n),
+        ...((h = t.tableLayout) == null ? void 0 : h.columnsPinnable) && n.getCanPin() && N(n),
         ...r || null
       },
-      "data-pinned": s || void 0,
-      "data-last-col": i ? "left" : u ? "right" : void 0,
+      "data-pinned": i || void 0,
+      "data-last-col": s ? "left" : c ? "right" : void 0,
       className: p(
         "align-middle",
-        c,
-        ((f = a.tableLayout) == null ? void 0 : f.cellBorder) && "border-e border-stroke-solid-light",
-        ((C = a.tableLayout) == null ? void 0 : C.columnsResizable) && n.getCanResize() && "truncate",
+        u,
+        ((f = t.tableLayout) == null ? void 0 : f.cellBorder) && "border-e border-stroke-solid-light",
+        ((C = t.tableLayout) == null ? void 0 : C.columnsResizable) && n.getCanResize() && "truncate",
         (y = e.column.columnDef.meta) == null ? void 0 : y.cellClassName,
-        ((x = a.tableLayout) == null ? void 0 : x.columnsPinnable) && n.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
-        n.getIndex() === 0 || n.getIndex() === d.getVisibleCells().length - 1 ? (L = a.tableClassNames) == null ? void 0 : L.edgeCell : ""
+        ((x = t.tableLayout) == null ? void 0 : x.columnsPinnable) && n.getCanPin() && '[&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border data-pinned:bg-background/90 data-pinned:backdrop-blur-xs"',
+        n.getIndex() === 0 || n.getIndex() === d.getVisibleCells().length - 1 ? (L = t.tableClassNames) == null ? void 0 : L.edgeCell : ""
       ),
       children: l
     },
@@ -290,12 +290,12 @@ function $({
   );
 }
 function G() {
-  const { table: l, props: e } = g(), t = l.getAllColumns().length;
-  return /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: t, className: "text-center text-muted-foreground py-6", children: e.emptyMessage || "No data available" }) });
+  const { table: l, props: e } = b(), a = l.getAllColumns().length;
+  return /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: a, className: "text-center text-muted-foreground py-6", children: e.emptyMessage || "No data available" }) });
 }
 function O() {
-  const { table: l, props: e } = g(), t = l.getAllColumns().length;
-  return /* @__PURE__ */ o("tr", { style: { height: l.getState().pagination.pageSize * 43 }, children: /* @__PURE__ */ o("td", { colSpan: t, className: "text-center text-muted-foreground py-6", children: /* @__PURE__ */ R("div", { className: "text-neutral-muted flex items-center gap-2 px-4 py-2 leading-none-medium-sm justify-center", children: [
+  const { table: l, props: e } = b(), a = l.getAllColumns().length;
+  return /* @__PURE__ */ o("tr", { style: { height: l.getState().pagination.pageSize * 43 }, children: /* @__PURE__ */ o("td", { colSpan: a, className: "text-center text-muted-foreground py-6", children: /* @__PURE__ */ R("div", { className: "text-neutral-muted flex items-center gap-2 px-4 py-2 leading-none-medium-sm justify-center", children: [
     /* @__PURE__ */ R(
       "svg",
       {
@@ -368,43 +368,43 @@ function ee({
   ) });
 }
 function te(l) {
-  const { table: e, recordCount: t, isLoading: r } = g();
+  const { table: e, recordCount: a, isLoading: r } = b();
   return /* @__PURE__ */ o(
     k,
     {
       checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected() && "indeterminate",
-      disabled: r || t === 0,
-      onCheckedChange: (a) => e.toggleAllPageRowsSelected(!!a),
+      disabled: r || a === 0,
+      onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
       "aria-label": "Select all",
       className: "align-[inherit]"
     }
   );
 }
 function ae() {
-  var a, n;
-  const { table: l, isLoading: e, props: t } = g(), r = l.getState().pagination;
-  return /* @__PURE__ */ R(_, { children: [
-    (((a = t.tableLayout) == null ? void 0 : a.stripped) || !((n = t.tableLayout) != null && n.rowBorder)) && /* @__PURE__ */ o(M, {}),
-    /* @__PURE__ */ o(V, { children: e && (r != null && r.pageSize) ? t.loadingMode === "skeleton" ? Array.from({ length: r.pageSize }).map((d, s) => /* @__PURE__ */ o(F, { children: l.getVisibleFlatColumns().map((i, u) => {
-      var c;
-      return /* @__PURE__ */ o(H, { column: i, children: ((c = i.columnDef.meta) == null ? void 0 : c.skeleton) || /* @__PURE__ */ o(Z, { className: "h-4 w-full" }) }, u);
-    }) }, s)) : /* @__PURE__ */ o(O, {}) : l.getRowModel().rows.length ? l.getRowModel().rows.map((d, s) => /* @__PURE__ */ R(P, { children: [
-      /* @__PURE__ */ o(E, { row: d, children: d.getVisibleCells().map((i, u) => /* @__PURE__ */ o($, { cell: i, children: w(i.column.columnDef.cell, i.getContext()) }, u)) }, s),
+  var t, n;
+  const { table: l, isLoading: e, props: a } = b(), r = l.getState().pagination;
+  return /* @__PURE__ */ R(B, { children: [
+    (((t = a.tableLayout) == null ? void 0 : t.stripped) || !((n = a.tableLayout) != null && n.rowBorder)) && /* @__PURE__ */ o(A, {}),
+    /* @__PURE__ */ o(V, { children: e && (r != null && r.pageSize) ? a.loadingMode === "skeleton" ? Array.from({ length: r.pageSize }).map((d, i) => /* @__PURE__ */ o(F, { children: l.getVisibleFlatColumns().map((s, c) => {
+      var u;
+      return /* @__PURE__ */ o(H, { column: s, children: ((u = s.columnDef.meta) == null ? void 0 : u.skeleton) || /* @__PURE__ */ o(Z, { className: "h-4 w-full" }) }, c);
+    }) }, i)) : /* @__PURE__ */ o(O, {}) : l.getRowModel().rows.length ? l.getRowModel().rows.map((d, i) => /* @__PURE__ */ R(P, { children: [
+      /* @__PURE__ */ o(E, { row: d, children: d.getVisibleCells().map((s, c) => /* @__PURE__ */ o($, { cell: s, children: w(s.column.columnDef.cell, s.getContext()) }, c)) }, i),
       d.getIsExpanded() && /* @__PURE__ */ o(j, { row: d })
     ] }, d.id)) : /* @__PURE__ */ o(G, {}) }),
-    /* @__PURE__ */ o(I, { children: l.getHeaderGroups().map((d, s) => /* @__PURE__ */ o(T, { headerGroup: d, children: d.headers.map((i, u) => {
-      var b;
-      const { column: c } = i;
-      return /* @__PURE__ */ R(D, { header: i, children: [
-        i.isPlaceholder ? null : w(i.column.columnDef.header, i.getContext()),
-        ((b = t.tableLayout) == null ? void 0 : b.columnsResizable) && c.getCanResize() && /* @__PURE__ */ o(A, { header: i })
-      ] }, u);
-    }) }, s)) })
+    /* @__PURE__ */ o(I, { children: l.getHeaderGroups().map((d, i) => /* @__PURE__ */ o(T, { headerGroup: d, children: d.headers.map((s, c) => {
+      var g;
+      const { column: u } = s;
+      return /* @__PURE__ */ R(D, { header: s, children: [
+        s.isPlaceholder ? null : w(s.column.columnDef.header, s.getContext()),
+        ((g = a.tableLayout) == null ? void 0 : g.columnsResizable) && u.getCanResize() && /* @__PURE__ */ o(M, { header: s })
+      ] }, c);
+    }) }, i)) })
   ] });
 }
 export {
   ae as Z2Table,
-  _ as Z2TableBase,
+  B as Z2TableBase,
   V as Z2TableBody,
   E as Z2TableBodyRow,
   $ as Z2TableBodyRowCell,
@@ -415,9 +415,9 @@ export {
   I as Z2TableHead,
   T as Z2TableHeadRow,
   D as Z2TableHeadRowCell,
-  A as Z2TableHeadRowCellResize,
+  M as Z2TableHeadRowCellResize,
   O as Z2TableLoader,
   ee as Z2TableRowSelect,
   te as Z2TableRowSelectAll,
-  M as Z2TableRowSpacer
+  A as Z2TableRowSpacer
 };

package/dist/components/input/input.js

@@ -15,7 +15,7 @@ const d = _("", {
     "div",
     {
       className: e(
-        "rounded-lg bg-input-surface-default flex items-center shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.default)] hover:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.hover)] focus-within:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] focus-within:hover:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] has-[:disabled]:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.disabled)]",
+        "rounded-lg bg-input-surface-default flex items-center shadow-[inset_0_0_0_1px_theme(colors.input.stroke.default)] hover:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.hover)] focus-within:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] focus-within:hover:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] has-[:disabled]:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.disabled)]",
         d({ size: s }),
         o
       ),

package/dist/components/number-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberBadge, numberBadgeVariants } from './number-badge';
+export type { NumberBadgeProps } from './number-badge';