@ztwoint/z-ui 0.1.119 → 0.1.121

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

@@ -1,8 +1,8 @@
-import { jsxs as m, jsx as o, Fragment as z } from "react/jsx-runtime";
+import { jsxs as R, jsx as o, Fragment as z } from "react/jsx-runtime";
 import { Fragment as P } from "react";
-import { Z2Checkbox as w } from "../checkbox/checkbox.js";
+import { Z2Checkbox as k } from "../checkbox/checkbox.js";
 import { useZ2Table as g } from "./z2-table-context.js";
-import { flexRender as k } from "@tanstack/react-table";
+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";
@@ -97,7 +97,7 @@ function D({
   dndRef: t,
   dndStyle: r
 }) {
-  var c, b, h, f, C, y, x, 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"
   });
@@ -105,11 +105,12 @@ function D({
     "th",
     {
       ref: t,
+      colSpan: e.colSpan,
       style: {
         ...((b = a.tableLayout) == null ? void 0 : b.width) === "fixed" && {
           width: `${e.getSize()}px`
         },
-        ...((h = a.tableLayout) == null ? void 0 : h.columnsPinnable) && n.getCanPin() && N(n),
+        ...((m = a.tableLayout) == null ? void 0 : m.columnsPinnable) && n.getCanPin() && N(n),
         ...r || null
       },
       "data-pinned": d || void 0,
@@ -117,11 +118,11 @@ function D({
       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,
-        ((f = a.tableLayout) == null ? void 0 : f.cellBorder) && "border-e",
-        ((C = a.tableLayout) == null ? void 0 : C.columnsResizable) && n.getCanResize() && "truncate",
-        ((y = a.tableLayout) == null ? void 0 : y.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",
-        (x = e.column.columnDef.meta) == null ? void 0 : x.headerClassName,
-        n.getIndex() === 0 || n.getIndex() === e.headerGroup.headers.length - 1 ? (R = a.tableClassNames) == null ? void 0 : R.edgeCell : ""
+        ((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",
+        (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 : ""
       ),
       children: l
     },
@@ -259,7 +260,7 @@ function $({
   dndRef: t,
   dndStyle: r
 }) {
-  var b, h, f, C, y, x, R, L;
+  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"
   });
@@ -267,9 +268,9 @@ function $({
     "td",
     {
       ref: t,
-      ...(h = a.tableLayout) != null && h.columnsDraggable && !s ? { cell: e } : {},
+      ...(m = a.tableLayout) != null && m.columnsDraggable && !s ? { cell: e } : {},
       style: {
-        ...((f = a.tableLayout) == null ? void 0 : f.columnsPinnable) && n.getCanPin() && N(n),
+        ...((h = a.tableLayout) == null ? void 0 : h.columnsPinnable) && n.getCanPin() && N(n),
         ...r || null
       },
       "data-pinned": s || void 0,
@@ -277,10 +278,10 @@ function $({
       className: p(
         "align-middle",
         c,
-        ((C = a.tableLayout) == null ? void 0 : C.cellBorder) && "border-e border-stroke-solid-light",
-        ((y = a.tableLayout) == null ? void 0 : y.columnsResizable) && n.getCanResize() && "truncate",
-        (x = e.column.columnDef.meta) == null ? void 0 : x.cellClassName,
-        ((R = a.tableLayout) == null ? void 0 : R.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"',
+        ((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",
+        (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 : ""
       ),
       children: l
@@ -294,8 +295,8 @@ function G() {
 }
 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__ */ m("div", { className: "text-neutral-muted flex items-center gap-2 px-4 py-2 leading-none-medium-sm justify-center", children: [
-    /* @__PURE__ */ m(
+  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: [
+    /* @__PURE__ */ R(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -356,31 +357,20 @@ function ee({
   row: l
   //   size,
 }) {
-  return /* @__PURE__ */ m(z, { children: [
-    /* @__PURE__ */ o(
-      "div",
-      {
-        className: p(
-          "hidden absolute top-0 bottom-0 start-0 w-[2px] bg-primary",
-          l.getIsSelected() && "block"
-        )
-      }
-    ),
-    /* @__PURE__ */ o(
-      w,
-      {
-        checked: l.getIsSelected(),
-        onCheckedChange: (e) => l.toggleSelected(!!e),
-        "aria-label": "Select row",
-        className: "align-[inherit]"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ o(z, { children: /* @__PURE__ */ o(
+    k,
+    {
+      checked: l.getIsSelected(),
+      onCheckedChange: (e) => l.toggleSelected(!!e),
+      "aria-label": "Select row",
+      className: "align-[inherit]"
+    }
+  ) });
 }
 function te(l) {
   const { table: e, recordCount: t, isLoading: r } = g();
   return /* @__PURE__ */ o(
-    w,
+    k,
     {
       checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected() && "indeterminate",
       disabled: r || t === 0,
@@ -393,20 +383,20 @@ function te(l) {
 function ae() {
   var a, n;
   const { table: l, isLoading: e, props: t } = g(), r = l.getState().pagination;
-  return /* @__PURE__ */ m(_, { children: [
+  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__ */ m(P, { children: [
-      /* @__PURE__ */ o(E, { row: d, children: d.getVisibleCells().map((i, u) => /* @__PURE__ */ o($, { cell: i, children: k(i.column.columnDef.cell, i.getContext()) }, u)) }, s),
+    }) }, 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),
       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__ */ m(D, { header: i, children: [
-        i.isPlaceholder ? null : k(i.column.columnDef.header, i.getContext()),
+      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)) })

package/dist/components/nav-header/nav-item/nav-item.d.ts

@@ -4,5 +4,6 @@ export interface NavItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     label?: string;
+    asTag?: React.ElementType;
 }
 export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/nav-header/nav-item/nav-item.js

@@ -1,32 +1,32 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import u from "react";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import p from "react";
 import { cn as f } from "../../../lib/utils.js";
-const p = u.forwardRef(
-  ({ leftIcon: n, label: o, rightIcon: r, className: t, isActive: a, children: l, ...c }, d) => {
-    const i = o ?? l, s = "w-3.5 h-3.5 min-w-max";
-    return /* @__PURE__ */ m(
-      "button",
+const v = p.forwardRef(
+  ({ leftIcon: n, label: t, rightIcon: o, className: i, isActive: a, children: c, asTag: l = "button", ...d }, m) => {
+    const r = t ?? c, s = "w-3.5 h-3.5 min-w-max";
+    return /* @__PURE__ */ u(
+      l,
       {
-        ref: d,
+        ref: m,
         className: f(
           "h-7.5 inline-flex items-center justify-center p-2 gap-1 rounded-lg",
           "hover:bg-background-inverted-elevated text-inverted-primary",
           "leading-none-medium-sm",
           "select-none hover:cursor-pointer disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring-default",
           a && "bg-background-inverted-elevated",
-          t
+          i
         ),
-        ...c,
+        ...d,
         children: [
           n && /* @__PURE__ */ e("span", { className: s, children: n }),
-          i && /* @__PURE__ */ e("span", { children: i }),
-          r && /* @__PURE__ */ e("span", { className: s, children: r })
+          r && /* @__PURE__ */ e("span", { children: r }),
+          o && /* @__PURE__ */ e("span", { className: s, children: o })
         ]
       }
     );
   }
 );
-p.displayName = "NavItem";
+v.displayName = "NavItem";
 export {
-  p as NavItem
+  v as NavItem
 };