@ztwoint/z-ui 0.1.64 → 0.1.65

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

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

package/dist/components/column-reorder/column-reorder.type.d.ts

@@ -8,5 +8,6 @@ export interface ColumnReOrderProps {
     columns: ColumnType[];
     onReorder?: (reorderedColumns: ColumnType[]) => void;
     onRemove?: (columnId: string) => void;
+    renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
     className?: string;
 }

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

@@ -1,79 +1,84 @@
-import { jsxs as s, Fragment as u, jsx as e } from "react/jsx-runtime";
-import { createPortal as g } from "react-dom";
+import { jsxs as i, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { createPortal as p } from "react-dom";
 import "react";
-import { cn as i } from "../../../../lib/utils.js";
-import { useColumnItemDragAndDrop as p } from "./column-item.hook.js";
-import { Button as f } from "../../../button/button.js";
-import { Minus as h } from "../../../assets/icons/minus.js";
-import { parseColumnLabel as l } from "./column-item.util.js";
-import c from "../../../assets/icons/drag-handle.js";
-const x = {
+import { cn as l } from "../../../../lib/utils.js";
+import { useColumnItemDragAndDrop as f } from "./column-item.hook.js";
+import { Button as h } from "../../../button/button.js";
+import { Minus as x } from "../../../assets/icons/minus.js";
+import { parseColumnLabel as c } from "./column-item.util.js";
+import d from "../../../assets/icons/drag-handle.js";
+const b = {
   "is-dragging": "opacity-40",
   "is-dragging-over": "bg-background-neutral-medium"
-}, b = ({
+}, N = ({
   edge: t,
   isFirstElement: r = !1
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: i(
+    className: l(
       "absolute left-0 right-0 h-0.5 bg-blue-500",
       t === "top" ? r ? "top-0" : "top-[-3px]" : "bottom-0"
     )
   }
 );
-function N({ column: t }) {
-  const { groupLabel: r, fieldLabel: n } = l(t);
-  return /* @__PURE__ */ s("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
-    /* @__PURE__ */ e(c, {}),
+function v({ column: t }) {
+  const { groupLabel: r, fieldLabel: a } = c(t);
+  return /* @__PURE__ */ i("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
+    /* @__PURE__ */ e(d, {}),
     /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5 ", children: t.icon }),
-    /* @__PURE__ */ s("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
       /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary  truncate", children: r }),
       /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
-      /* @__PURE__ */ e("span", { className: "text-text-neutral-primary truncate", children: n })
+      /* @__PURE__ */ e("span", { className: "text-text-neutral-primary truncate", children: a })
     ] })
   ] });
 }
-const E = ({ column: t, index: r, onRemove: n }) => {
-  const { ref: d, state: a } = p(t, r), { groupLabel: o, fieldLabel: m } = l(t);
-  return /* @__PURE__ */ s(u, { children: [
-    /* @__PURE__ */ s("div", { className: "relative border-b-0.5", children: [
-      /* @__PURE__ */ s(
+const F = ({
+  column: t,
+  index: r,
+  onRemove: a,
+  renderAction: n
+}) => {
+  const { ref: o, state: s } = f(t, r), { groupLabel: m, fieldLabel: u } = c(t);
+  return /* @__PURE__ */ i(g, { children: [
+    /* @__PURE__ */ i("div", { className: "relative border-b-0.5", children: [
+      /* @__PURE__ */ i(
         "div",
         {
           "data-column-id": t.id,
-          ref: d,
-          className: i(
+          ref: o,
+          className: l(
             "flex items-center gap-2 p-1 pl-3 bg-background-neutral-default cursor-grab hover:bg-background-neutral-medium transition-colors",
-            x[a.type] ?? ""
+            b[s.type] ?? ""
           ),
           children: [
-            /* @__PURE__ */ e(c, {}),
+            /* @__PURE__ */ e(d, {}),
             /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
-            /* @__PURE__ */ s("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
-              /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary  truncate", children: o }),
+            /* @__PURE__ */ i("div", { className: "flex items-center gap-0.5 min-w-0 leading-none-regular-sm", children: [
+              /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary  truncate", children: m }),
               /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
-              /* @__PURE__ */ e("span", { className: "text-text-neutral-primary   truncate", children: m })
+              /* @__PURE__ */ e("span", { className: "text-text-neutral-primary   truncate", children: u })
             ] }),
-            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: /* @__PURE__ */ e(
-              f,
+            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: n ? n(t, a) : /* @__PURE__ */ e(
+              h,
               {
-                onClick: () => n == null ? void 0 : n(t.id),
+                onClick: () => a == null ? void 0 : a(t.id),
                 variant: "ghost",
                 shade: "neutral",
                 size: "medium",
-                leftIcon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+                leftIcon: /* @__PURE__ */ e(x, { className: "w-4 h-4" })
               }
             ) })
           ]
         }
       ),
-      a.type === "is-dragging-over" && a.closestEdge && /* @__PURE__ */ e(b, { edge: a.closestEdge, isFirstElement: r === 0 })
+      s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(N, { edge: s.closestEdge, isFirstElement: r === 0 })
     ] }),
-    a.type === "preview" && g(/* @__PURE__ */ e(N, { column: t }), a.container)
+    s.type === "preview" && p(/* @__PURE__ */ e(v, { column: t }), s.container)
   ] });
 };
 export {
-  E as ColumnItem,
-  E as default
+  F as ColumnItem,
+  F as default
 };

package/dist/components/column-reorder/components/column-item/column-item.type.d.ts

@@ -15,4 +15,5 @@ export interface ColumnItemProps {
     column: ColumnType;
     index: number;
     onRemove?: (columnId: string) => void;
+    renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => React.ReactNode;
 }

package/dist/types/components/column-reorder/column-reorder.type.d.ts

@@ -8,5 +8,6 @@ export interface ColumnReOrderProps {
     columns: ColumnType[];
     onReorder?: (reorderedColumns: ColumnType[]) => void;
     onRemove?: (columnId: string) => void;
+    renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
     className?: string;
 }

package/dist/types/components/column-reorder/components/column-item/column-item.type.d.ts

@@ -15,4 +15,5 @@ export interface ColumnItemProps {
     column: ColumnType;
     index: number;
     onRemove?: (columnId: string) => void;
+    renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => React.ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.64",
+  "version": "0.1.65",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",