@ztwoint/z-ui 0.1.60 → 0.1.62

package/dist/_virtual/bind-all.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/bind.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/bind-event-listener/dist/index.js";
+var i = /* @__PURE__ */ r();
+export {
+  i as d
+};

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/components/assets/icons/drag-handle.js

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+const x = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: "w-5 h-5 text-text-neutral-muted",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ t("rect", { x: "3", y: "5", width: "14", height: "1.6", rx: "0.8" }),
+      /* @__PURE__ */ t("rect", { x: "3", y: "9.2", width: "14", height: "1.6", rx: "0.8" }),
+      /* @__PURE__ */ t("rect", { x: "3", y: "13.4", width: "14", height: "1.6", rx: "0.8" })
+    ]
+  }
+);
+export {
+  x as default
+};

package/dist/components/assets/icons/minus.js

@@ -0,0 +1,28 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+function l({ title: i = "minus", ...n }) {
+  return /* @__PURE__ */ r(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...n,
+      children: [
+        /* @__PURE__ */ t("title", { children: i }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M11.6394 6.12927C12.0808 6.17395 12.4255 6.54686 12.4255 7C12.4255 7.45314 12.0808 7.82605 11.6394 7.87073L11.5505 7.875H2.4502C1.96702 7.87491 1.5752 7.4832 1.5752 7C1.5752 6.5168 1.96702 6.12509 2.4502 6.125H11.5505L11.6394 6.12927Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  l as Minus,
+  l as default
+};

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

@@ -0,0 +1,47 @@
+import { useState as I, useEffect as p } from "react";
+import { monitorForElements as C } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+import { extractClosestEdge as E } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
+import { reorderWithEdge as D } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/reorder-with-edge.js";
+import { triggerPostMoveFlash as S } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop-flourish/dist/esm/trigger-post-move-flash.js";
+import { flushSync as T } from "react-dom";
+import "react/jsx-runtime";
+import "clsx";
+import "tailwind-merge";
+import { isColumnData as s } from "./components/column-item/column-item.util.js";
+import "../button/button.js";
+const $ = ({ columns: e, onReorder: r }) => {
+  const [t, a] = I(e);
+  return p(() => {
+    a(e);
+  }, [e]), p(() => C({
+    canMonitor({ source: o }) {
+      return s(o.data);
+    },
+    onDrop({ location: o, source: g }) {
+      const c = o.current.dropTargets[0];
+      if (!c)
+        return;
+      const n = g.data, i = c.data;
+      if (!s(n) || !s(i))
+        return;
+      const u = t.findIndex((m) => m.id === n.columnId), d = t.findIndex((m) => m.id === i.columnId);
+      if (d < 0 || u < 0)
+        return;
+      const x = E(i), f = D({
+        list: t,
+        startIndex: u,
+        indexOfTarget: d,
+        closestEdgeOfTarget: x,
+        axis: "vertical"
+      });
+      T(() => {
+        a(f), r == null || r(f);
+      });
+      const l = document.querySelector(`[data-column-id="${n.columnId}"]`);
+      l instanceof HTMLElement && S(l);
+    }
+  }), [t, r]), { internalColumns: t };
+};
+export {
+  $ as useColumnReorder
+};

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

@@ -0,0 +1,26 @@
+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 = ({
+  columns: e,
+  onReorder: d,
+  onRemove: i,
+  className: m
+}) => {
+  const { internalColumns: t } = a({ columns: e, onReorder: d });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: n(
+        "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden box-shadow-medium-10",
+        m
+      ),
+      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)) })
+    }
+  );
+};
+export {
+  b as ColumnReOrder
+};

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

@@ -0,0 +1,78 @@
+import { useRef as f, useState as l, useEffect as u } from "react";
+import { dropTargetForElements as D, draggable as c } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+import { setCustomNativeDragPreview as v } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js";
+import { pointerOutsideOfPreview as E } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js";
+import { combine as y } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
+import { extractClosestEdge as p, attachClosestEdge as C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
+import { getColumnData as m, isColumnData as w } from "./column-item.util.js";
+const a = { type: "idle" }, k = (n, s) => {
+  const i = f(null), [d, r] = l(a);
+  return u(() => {
+    const o = i.current;
+    if (o)
+      return y(
+        c({
+          element: o,
+          getInitialData() {
+            return m(n, s);
+          },
+          onGenerateDragPreview({ nativeSetDragImage: e }) {
+            v({
+              nativeSetDragImage: e,
+              getOffset: E({
+                x: "16px",
+                y: "0px"
+              }),
+              render({ container: t }) {
+                r({ type: "preview", container: t });
+              }
+            });
+          },
+          onDragStart() {
+            r({ type: "is-dragging" });
+          },
+          onDrop() {
+            r(a);
+          }
+        }),
+        D({
+          element: o,
+          canDrop({ source: e }) {
+            return e.element === o ? !1 : w(e.data);
+          },
+          getData({ input: e }) {
+            const t = m(n, s);
+            return C(t, {
+              element: o,
+              input: e,
+              allowedEdges: ["top", "bottom"]
+            });
+          },
+          getIsSticky() {
+            return !0;
+          },
+          onDragEnter({ self: e }) {
+            const t = p(e.data);
+            r({ type: "is-dragging-over", closestEdge: t });
+          },
+          onDrag({ self: e }) {
+            const t = p(e.data);
+            r((g) => g.type === "is-dragging-over" && g.closestEdge === t ? g : { type: "is-dragging-over", closestEdge: t });
+          },
+          onDragLeave() {
+            r(a);
+          },
+          onDrop() {
+            r(a);
+          }
+        })
+      );
+  }, [n, s]), {
+    ref: i,
+    state: d
+  };
+};
+export {
+  a as idle,
+  k as useColumnItemDragAndDrop
+};

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

@@ -0,0 +1,79 @@
+import { jsxs as s, Fragment as u, jsx as e } from "react/jsx-runtime";
+import { createPortal as g } 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 = {
+  "is-dragging": "opacity-40",
+  "is-dragging-over": "bg-background-neutral-medium"
+}, b = ({
+  edge: t,
+  isFirstElement: r = !1
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: i(
+      "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, {}),
+    /* @__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: r }),
+      /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
+      /* @__PURE__ */ e("span", { className: "text-text-neutral-primary truncate", children: n })
+    ] })
+  ] });
+}
+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(
+        "div",
+        {
+          "data-column-id": t.id,
+          ref: d,
+          className: i(
+            "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] ?? ""
+          ),
+          children: [
+            /* @__PURE__ */ e(c, {}),
+            /* @__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__ */ e("span", { className: "text-text-neutral-muted", children: "/" }),
+              /* @__PURE__ */ e("span", { className: "text-text-neutral-primary   truncate", children: m })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: /* @__PURE__ */ e(
+              f,
+              {
+                onClick: () => n == null ? void 0 : n(t.id),
+                variant: "ghost",
+                shade: "neutral",
+                size: "medium",
+                leftIcon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+              }
+            ) })
+          ]
+        }
+      ),
+      a.type === "is-dragging-over" && a.closestEdge && /* @__PURE__ */ e(b, { edge: a.closestEdge, isFirstElement: r === 0 })
+    ] }),
+    a.type === "preview" && g(/* @__PURE__ */ e(N, { column: t }), a.container)
+  ] });
+};
+export {
+  E as ColumnItem,
+  E as default
+};

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

@@ -0,0 +1,12 @@
+const t = (e, n) => ({
+  columnId: e.id,
+  index: n
+}), l = (e) => typeof e.columnId == "string" && typeof e.index == "number", r = (e) => {
+  const [n, o] = e.label;
+  return { groupLabel: n, fieldLabel: o };
+};
+export {
+  t as getColumnData,
+  l as isColumnData,
+  r as parseColumnLabel
+};

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

@@ -53,7 +53,7 @@ function w({
       "data-size": s,
       className: l(
         // base layout
-        "h-7.5 flex items-center justify-center w-full self-stretch transition-all cursor-pointer",
+        "h-7.5 flex items-center justify-between w-full self-stretch transition-all cursor-pointer",
         "gap-[6px] p-2 rounded-md",
         // size variants
         "data-[size=sm]:gap-1 data-[size=sm]:p-[6px]",

package/dist/components/table/components/cell/avatar-cell.js

@@ -34,12 +34,15 @@ import "../../table.context.js";
 import "../../../tooltip/tooltip.js";
 import "../../../badge/badge.js";
 import "../../../text-preset/text-preset.js";
-const X = ({
+import "react-dom";
+import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
+import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
+const _ = ({
   avatar: m,
   value: a,
-  rightIcon: e,
+  rightIcon: o,
   className: s,
-  helperText: o,
+  helperText: e,
   description: l
 }) => /* @__PURE__ */ i(
   "div",
@@ -61,8 +64,8 @@ const X = ({
               a
             ] }),
             /* @__PURE__ */ i("div", { className: "flex items-center gap-2.5", children: [
-              o && /* @__PURE__ */ t("span", { className: "text-text-neutral-secondary", children: o }),
-              e && /* @__PURE__ */ t("span", { className: r("min-h-max min-w-max"), children: e })
+              e && /* @__PURE__ */ t("span", { className: "text-text-neutral-secondary", children: e }),
+              o && /* @__PURE__ */ t("span", { className: r("min-h-max min-w-max"), children: o })
             ] })
           ]
         }
@@ -72,5 +75,5 @@ const X = ({
   }
 );
 export {
-  X as AvatarCell
+  _ as AvatarCell
 };

package/dist/components/table/table-provider.js

@@ -40,6 +40,9 @@ import "../tooltip/tooltip.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
+import "react-dom";
+import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
+import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import { TableHeaderWrapper as c } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as d } from "./components/table-header-content.js";
 import { TableFooter as u } from "./components/table-footer.js";

package/dist/components/table-card/table-card.js

@@ -1,5 +1,5 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { Table as t } from "../table/table-provider.js";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Table as e } from "../table/table-provider.js";
 import "react";
 import { cn as i } from "../../lib/utils.js";
 /* empty css                        */
@@ -34,8 +34,11 @@ import f from "../assets/icons/octagon-warning-Copy.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
+import "react-dom";
+import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
+import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import "../table/table.context.js";
-const Pe = ({
+const Ct = ({
   dataSource: w,
   schema: P,
   loading: H,
@@ -63,18 +66,18 @@ const Pe = ({
 }) => {
   var v;
   if (x)
-    return /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ e(f, { className: "mt-1.5" }),
+    return /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ t(f, { className: "mt-1.5" }),
       /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
-        /* @__PURE__ */ e("div", { className: "text-sm", children: "Please try again later" }),
-        typeof x == "string" && /* @__PURE__ */ e("div", { className: "text-text-warning-secondary text-sm", children: x })
+        /* @__PURE__ */ t("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
+        /* @__PURE__ */ t("div", { className: "text-sm", children: "Please try again later" }),
+        typeof x == "string" && /* @__PURE__ */ t("div", { className: "text-text-warning-secondary text-sm", children: x })
       ] })
     ] }) });
   const C = s && s.totalPage && s.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!c || C, F = m || r || h || u, R = typeof (r == null ? void 0 : r.showFilterButton) > "u" ? !0 : r == null ? void 0 : r.showFilterButton;
-  return /* @__PURE__ */ e("div", { className: i("flex flex-col overflow-hidden", T), children: /* @__PURE__ */ a(t, { dataSource: w, schema: P, loading: H, emptyMessage: k, children: [
+  return /* @__PURE__ */ t("div", { className: i("flex flex-col overflow-hidden", T), children: /* @__PURE__ */ a(e, { dataSource: w, schema: P, loading: H, emptyMessage: k, children: [
     g && F && /* @__PURE__ */ a(
-      t.Header,
+      e.Header,
       {
         className: i(
           "flex-shrink-0",
@@ -83,10 +86,10 @@ const Pe = ({
           _
         ),
         children: [
-          /* @__PURE__ */ a(t.HeaderContent, { children: [
+          /* @__PURE__ */ a(e.HeaderContent, { children: [
             h && h,
-            m && /* @__PURE__ */ e(
-              t.Search,
+            m && /* @__PURE__ */ t(
+              e.Search,
               {
                 search: {
                   value: m.value || "",
@@ -98,7 +101,7 @@ const Pe = ({
               }
             ),
             r && /* @__PURE__ */ a(
-              t.Filter,
+              e.Filter,
               {
                 schema: P,
                 filter: {
@@ -107,18 +110,18 @@ const Pe = ({
                   })
                 },
                 children: [
-                  R && /* @__PURE__ */ e(t.Filter.FilterButton, {}),
-                  (v = r == null ? void 0 : r.quickFilters) == null ? void 0 : v.map((B) => /* @__PURE__ */ e(t.Filter.FilterColumnButton, { filterName: B }, B))
+                  R && /* @__PURE__ */ t(e.Filter.FilterButton, {}),
+                  (v = r == null ? void 0 : r.quickFilters) == null ? void 0 : v.map((B) => /* @__PURE__ */ t(e.Filter.FilterColumnButton, { filterName: B }, B))
                 ]
               }
             )
           ] }),
-          u && /* @__PURE__ */ e(t.HeaderContent, { children: u })
+          u && /* @__PURE__ */ t(e.HeaderContent, { children: u })
         ]
       }
     ),
-    /* @__PURE__ */ e(
-      t.Body,
+    /* @__PURE__ */ t(
+      e.Body,
       {
         cell: l == null ? void 0 : l.cell,
         sort: l == null ? void 0 : l.sort,
@@ -135,7 +138,7 @@ const Pe = ({
       }
     ),
     p && N && /* @__PURE__ */ a(
-      t.Footer,
+      e.Footer,
       {
         className: i(
           "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
@@ -144,18 +147,18 @@ const Pe = ({
           j
         ),
         children: [
-          c ? /* @__PURE__ */ e(t.FooterContent, { children: /* @__PURE__ */ e(
-            t.PaginationInfo,
+          c ? /* @__PURE__ */ t(e.FooterContent, { children: /* @__PURE__ */ t(
+            e.PaginationInfo,
             {
               showTotal: c.showTotal,
               totalItems: c.totalItems,
               currentPage: c.currentPage,
               itemsPerPage: c.itemsPerPage
             }
-          ) }) : s || o ? /* @__PURE__ */ e(t.FooterContent, { children: null }) : null,
-          (s || o) && /* @__PURE__ */ a(t.FooterContent, { children: [
-            C && /* @__PURE__ */ e(
-              t.PaginationQuickJumper,
+          ) }) : s || o ? /* @__PURE__ */ t(e.FooterContent, { children: null }) : null,
+          (s || o) && /* @__PURE__ */ a(e.FooterContent, { children: [
+            C && /* @__PURE__ */ t(
+              e.PaginationQuickJumper,
               {
                 currentPage: s.currentPage,
                 totalPage: s.totalPage,
@@ -164,8 +167,8 @@ const Pe = ({
                 disabled: s.disabled
               }
             ),
-            o && /* @__PURE__ */ e(
-              t.Pagination,
+            o && /* @__PURE__ */ t(
+              e.Pagination,
               {
                 currentPage: o.currentPage,
                 totalPage: o.totalPage,
@@ -181,5 +184,5 @@ const Pe = ({
   ] }) });
 };
 export {
-  Pe as default
+  Ct as default
 };

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export * from './components/table-card';
 export * from './components/badge/badge';
 export * from './components/avatar/avatar';
 export * from './components/text-preset/text-preset';
+export * from './components/column-reorder';
 export * from './components/assets/icons/apartment-building';
 export * from './components/assets/icons/chevron-down';
 export * from './components/assets/icons/chevron-left';