@ztwoint/z-ui 0.1.97 → 0.1.99

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

@@ -9,16 +9,17 @@ 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);
+import "../tooltip/tooltip.js";
+const b = ({ columns: o, onReorder: r }) => {
+  const [t, a] = I(o);
   return p(() => {
-    a(e);
-  }, [e]), p(() => C({
-    canMonitor({ source: o }) {
-      return s(o.data);
+    a(o);
+  }, [o]), p(() => C({
+    canMonitor({ source: e }) {
+      return s(e.data);
     },
-    onDrop({ location: o, source: g }) {
-      const c = o.current.dropTargets[0];
+    onDrop({ location: e, source: g }) {
+      const c = e.current.dropTargets[0];
       if (!c)
         return;
       const n = g.data, i = c.data;
@@ -43,5 +44,5 @@ const $ = ({ columns: e, onReorder: r }) => {
   }), [t, r]), { internalColumns: t };
 };
 export {
-  $ as useColumnReorder
+  b as useColumnReorder
 };

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

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

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

@@ -10,4 +10,5 @@ export interface ColumnReOrderProps {
     onRemove?: (columnId: string) => void;
     renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
     className?: string;
+    disabled?: boolean;
 }

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

@@ -1,7 +1,7 @@
 import { ColumnType } from '../../column-reorder.type';
 import { ColumnItemState } from './column-item.type';
 export declare const idle: ColumnItemState;
-export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number) => {
+export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean) => {
     ref: import('react').RefObject<HTMLDivElement | null>;
     state: ColumnItemState;
 };

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

@@ -1,25 +1,25 @@
-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({
+import { useRef as l, useState as u, useEffect as D } from "react";
+import { dropTargetForElements as c, draggable as v } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+import { setCustomNativeDragPreview as E } 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 y } 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 C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
+import { extractClosestEdge as m, attachClosestEdge as w } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
+import { getColumnData as f, isColumnData as S } from "./column-item.util.js";
+const a = { type: "idle" }, A = (n, s, i = !1) => {
+  const p = l(null), [d, r] = u(a);
+  return D(() => {
+    const o = p.current;
+    if (!(!o || i))
+      return C(
+        v({
           element: o,
           getInitialData() {
-            return m(n, s);
+            return f(n, s);
           },
           onGenerateDragPreview({ nativeSetDragImage: e }) {
-            v({
+            E({
               nativeSetDragImage: e,
-              getOffset: E({
+              getOffset: y({
                 x: "16px",
                 y: "0px"
               }),
@@ -35,14 +35,14 @@ const a = { type: "idle" }, k = (n, s) => {
             r(a);
           }
         }),
-        D({
+        c({
           element: o,
           canDrop({ source: e }) {
-            return e.element === o ? !1 : w(e.data);
+            return e.element === o ? !1 : S(e.data);
           },
           getData({ input: e }) {
-            const t = m(n, s);
-            return C(t, {
+            const t = f(n, s);
+            return w(t, {
               element: o,
               input: e,
               allowedEdges: ["top", "bottom"]
@@ -52,11 +52,11 @@ const a = { type: "idle" }, k = (n, s) => {
             return !0;
           },
           onDragEnter({ self: e }) {
-            const t = p(e.data);
+            const t = m(e.data);
             r({ type: "is-dragging-over", closestEdge: t });
           },
           onDrag({ self: e }) {
-            const t = p(e.data);
+            const t = m(e.data);
             r((g) => g.type === "is-dragging-over" && g.closestEdge === t ? g : { type: "is-dragging-over", closestEdge: t });
           },
           onDragLeave() {
@@ -67,12 +67,12 @@ const a = { type: "idle" }, k = (n, s) => {
           }
         })
       );
-  }, [n, s]), {
-    ref: i,
+  }, [n, s, i]), {
+    ref: p,
     state: d
   };
 };
 export {
   a as idle,
-  k as useColumnItemDragAndDrop
+  A as useColumnItemDragAndDrop
 };

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

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

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

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

package/dist/components/segmented-control/controller.d.ts

@@ -1,7 +1,10 @@
 interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
     handleOnClick?: (id?: string) => void;
     className?: string;
     children: React.ReactNode;
 }
-declare function SegmentedControl({ handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ value, defaultValue, onValueChange, handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
 export { SegmentedControl, type SegmentedControlProps };

package/dist/components/segmented-control/controller.js

@@ -1,22 +1,36 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as d } from "../../lib/utils.js";
-import { useSegmentedControl as l } from "./use-segmented-control.hook.js";
-function a({ handleOnClick: e, className: o, children: r, ...n }) {
-  const { containerRef: t, handleClick: i } = l({ onSelect: e });
-  return /* @__PURE__ */ m(
+import { jsx as u } from "react/jsx-runtime";
+import { cn as b } from "../../lib/utils.js";
+import { useSegmentedControl as n } from "./use-segmented-control.hook.js";
+function l({
+  value: o,
+  defaultValue: m,
+  onValueChange: r,
+  handleOnClick: t,
+  className: d,
+  children: i,
+  ...s
+}) {
+  const { containerRef: f, handleClick: c } = n({
+    onSelect: (e) => {
+      e && (r == null || r(e), t == null || t(e));
+    },
+    defaultSelectedId: o ?? m
+  });
+  return /* @__PURE__ */ u(
     "div",
     {
-      ref: t,
-      onClick: i,
-      className: d(
+      ref: f,
+      onClick: c,
+      className: b(
         "inline-flex items-start bg-background-neutral-medium rounded-lg border-2 border-stroke-solid-medium",
-        o
+        d
       ),
-      ...n,
-      children: r
+      ...s,
+      "data-selected-id": o,
+      children: i
     }
   );
 }
 export {
-  a as SegmentedControl
+  l as SegmentedControl
 };

package/dist/components/segmented-control/use-segmented-control.hook.d.ts

@@ -1,5 +1,6 @@
 type UseSegmentedControlOptions = {
     onSelect?: (id?: string) => void;
+    defaultSelectedId?: string;
 };
 type UseSegmentedControlResult = {
     containerRef: React.RefObject<HTMLDivElement | null>;

package/dist/components/segmented-control/use-segmented-control.hook.js

@@ -1,23 +1,23 @@
-import { useRef as u, useEffect as c, useCallback as n } from "react";
-function o(d = {}) {
-  const { onSelect: t } = d, r = u(null);
-  c(() => {
+import { useRef as u, useEffect as n, useCallback as o } from "react";
+function l(s = {}) {
+  const { onSelect: e, defaultSelectedId: a } = s, r = u(null);
+  n(() => {
     if (!r.current) return;
-    const e = r.current.querySelector("[data-id]");
-    e && !e.hasAttribute("data-selected") && (e.setAttribute("data-selected", "true"), e.dataset.id && (t == null || t(e.dataset.id)));
-  }, [t]);
-  const s = n(
-    (e) => {
+    const d = a ? `[data-id="${a}"]` : "[data-id]", t = r.current.querySelector(d);
+    t && !t.hasAttribute("data-selected") && (t.setAttribute("data-selected", "true"), t.dataset.id && (e == null || e(t.dataset.id)));
+  }, [e, a]);
+  const c = o(
+    (d) => {
       if (!r.current) return;
-      const a = e.target.closest("[data-id]");
-      a && (Array.from(r.current.children).forEach((i) => {
+      const t = d.target.closest("[data-id]");
+      t && (Array.from(r.current.children).forEach((i) => {
         i.removeAttribute("data-selected");
-      }), a.setAttribute("data-selected", "true"), a.dataset.id && (t == null || t(a.dataset.id)));
+      }), t.setAttribute("data-selected", "true"), t.dataset.id && (e == null || e(t.dataset.id)));
     },
-    [t]
+    [e]
   );
-  return { containerRef: r, handleClick: s };
+  return { containerRef: r, handleClick: c };
 }
 export {
-  o as useSegmentedControl
+  l as useSegmentedControl
 };