@ztwoint/z-ui 0.1.143 → 0.1.145

package/dist/components/assets/icons/arrows-through-line-y.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    secondaryfill?: string;
+    strokewidth?: number;
+    title?: string;
+};
+declare function ArrowsThroughLineY({ fill, secondaryfill: _secondaryfill, strokewidth: _strokewidth, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default ArrowsThroughLineY;

package/dist/components/assets/icons/arrows-through-line-y.js

@@ -0,0 +1,38 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+function n({
+  fill: r = "currentColor",
+  secondaryfill: o,
+  strokewidth: d = 1,
+  title: h = "Reorder Menu",
+  ...a
+}) {
+  return /* @__PURE__ */ e("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...a, children: [
+    /* @__PURE__ */ t("title", { children: h }),
+    /* @__PURE__ */ e("g", { fill: r, children: [
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M12.29 7.61h-2.93a0.58 0.58 0 0 1 0-1.17h2.93a0.58 0.58 0 0 1 0 1.17z",
+          fill: r
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M7.02 7.61h-5.26a0.58 0.58 0 0 1 0-1.17h5.26a0.58 0.58 0 0 1 0 1.17z",
+          fill: r
+        }
+      ),
+      /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M8.95 4.12a0.58 0.58 0 0 0 0.82 0 0.58 0.58 0 0 0 0-0.83l-2.34-2.34a0.58 0.58 0 0 0-0.82 0l-2.34 2.34a0.58 0.58 0 1 0 0.82 0.83l1.35-1.34v8.48l-1.35-1.34a0.58 0.58 0 1 0-0.82 0.83l2.34 2.34a0.58 0.58 0 0 0 0.82 0l2.34-2.34a0.58 0.58 0 1 0-0.82-0.83l-1.35 1.34v-8.48l1.35 1.34z",
+          fill: r
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  n as default
+};

package/dist/components/collapsible-side-nav-bar/index.d.ts

@@ -15,4 +15,5 @@ export { default as CirclesIcon } from '../assets/icons/circles-icon';
 export { default as DatabaseCopy } from '../assets/icons/database-copy';
 export { default as WindowLeftCopy } from '../assets/icons/window-left-copy';
 export { default as SidebarLeftShowCopy } from '../assets/icons/sidebar-left-show-copy';
+export { default as ArrowsThroughLineY } from '../assets/icons/arrows-through-line-y';
 export { SIDEBAR_WIDTH, SIDEBAR_WIDTH_COLLAPSED } from './constants';

package/dist/components/collapsible-side-nav-bar/side-nav-bar-header.js

@@ -1,84 +1,98 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as h } from "../../lib/utils.js";
-import { useZ2SideNavBar as C } from "./context.js";
-import x from "../assets/icons/window-left-copy.js";
-import { Button as v } from "../button/button.js";
-const w = n.forwardRef(
+import * as o from "react";
+import { cn as x } from "../../lib/utils.js";
+import { useZ2SideNavBar as z } from "./context.js";
+import v from "../assets/icons/window-left-copy.js";
+import C from "../assets/icons/arrows-through-line-y.js";
+import { Button as a } from "../button/button.js";
+const I = o.forwardRef(
   ({
-    className: o,
-    children: r,
+    className: d,
+    children: s,
     showCollapseButton: g = !0,
-    icon: s,
-    title: a,
-    forceMultiLine: d = !1,
-    ...c
-  }, m) => {
-    const { toggleCollapsed: f, isCollapsed: i } = C(), [y, u] = n.useState(d), p = n.useRef(null), b = y || !!r;
-    return n.useEffect(() => {
-      if (d) {
-        u(!0);
+    icon: i,
+    title: r,
+    forceMultiLine: c = !1,
+    ...m
+  }, f) => {
+    const { toggleCollapsed: h, isCollapsed: n, enableEdit: u, onReorderClick: y } = z(), [N, b] = o.useState(c), p = o.useRef(null), k = N || !!s;
+    return o.useEffect(() => {
+      if (c) {
+        b(!0);
         return;
       }
-      if (p.current && !i && a) {
+      if (p.current && !n && r) {
         const t = document.createElement("span");
-        t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.fontSize = "14px", t.style.fontWeight = "450", t.textContent = a, document.body.appendChild(t);
-        const N = t.offsetWidth;
-        document.body.removeChild(t), u(N > 168);
+        t.style.visibility = "hidden", t.style.position = "absolute", t.style.whiteSpace = "nowrap", t.style.fontSize = "14px", t.style.fontWeight = "450", t.textContent = r, document.body.appendChild(t);
+        const w = t.offsetWidth;
+        document.body.removeChild(t), b(w > 168);
       }
-    }, [a, i, d]), i ? /* @__PURE__ */ e(
+    }, [r, n, c]), n ? /* @__PURE__ */ e(
       "div",
       {
-        ref: m,
-        className: h(
+        ref: f,
+        className: x(
           "flex flex-col items-center gap-1.5 self-stretch border-b border-gray-200 p-2",
-          o
+          d
         ),
-        ...c,
+        ...m,
         children: /* @__PURE__ */ e(
-          v,
+          a,
           {
-            variant: "ghost",
+            variant: "stroke",
             shade: "neutral",
             size: "small",
-            onClick: f,
+            onClick: h,
             title: "Collapse sidebar",
-            leftIcon: /* @__PURE__ */ e(x, {})
+            leftIcon: /* @__PURE__ */ e(v, {})
           }
         )
       }
-    ) : b && !i ? /* @__PURE__ */ l(
+    ) : k && !n ? /* @__PURE__ */ l(
       "div",
       {
-        ref: m,
-        className: h(
+        ref: f,
+        className: x(
           "flex flex-col items-start gap-5 self-stretch border-b border-gray-100 w-60 px-2.5 py-4 pl-4 relative",
-          o
+          d
         ),
-        ...c,
+        ...m,
         children: [
           /* @__PURE__ */ l("div", { className: "header-icons-container flex justify-between items-center self-stretch relative", children: [
-            s && /* @__PURE__ */ e("div", { className: "database-icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: s }) }),
-            g && /* @__PURE__ */ e(
-              v,
-              {
-                variant: "ghost",
-                shade: "neutral",
-                size: "small",
-                onClick: f,
-                title: "Collapse sidebar",
-                leftIcon: /* @__PURE__ */ e(x, {})
-              }
-            )
+            i && /* @__PURE__ */ e(a, { variant: "filled", shade: "brand", size: "small", leftIcon: i }),
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+              u && /* @__PURE__ */ e(
+                a,
+                {
+                  variant: "ghost",
+                  shade: "neutral",
+                  size: "small",
+                  onClick: y,
+                  title: "Reorder items",
+                  leftIcon: /* @__PURE__ */ e(C, {})
+                }
+              ),
+              g && /* @__PURE__ */ e(
+                a,
+                {
+                  variant: "stroke",
+                  shade: "neutral",
+                  size: "small",
+                  onClick: h,
+                  title: "Collapse sidebar",
+                  leftIcon: /* @__PURE__ */ e(v, {})
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ l("div", { className: "text-preset-container flex flex-col items-start gap-2.5 self-stretch relative", children: [
-            /* @__PURE__ */ e("div", { className: "primary-text self-stretch text-gray-950 text-sm font-medium leading-none tracking-tight relative", children: a }),
+            /* @__PURE__ */ e("div", { className: "primary-text self-stretch text-gray-950 text-sm font-medium leading-none tracking-tight relative", children: r }),
             /* @__PURE__ */ e(
               "div",
               {
                 ref: p,
                 className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-gray-600 text-ellipsis text-sm font-normal leading-none tracking-tight relative",
-                children: r
+                children: s
               }
             )
           ] })
@@ -87,42 +101,54 @@ const w = n.forwardRef(
     ) : /* @__PURE__ */ l(
       "div",
       {
-        ref: m,
-        className: h(
+        ref: f,
+        className: x(
           "flex items-center gap-2.5 border-b header-default-layout w-full pr-2.5 pl-3 py-2.5 stroke-solid-light relative",
-          o
+          d
         ),
-        ...c,
+        ...m,
         children: [
-          s && /* @__PURE__ */ e("div", { className: "icon-container flex p-1.5 justify-center items-center gap-1 rounded-lg bg-gray-50 relative", children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: s }) }),
+          i && /* @__PURE__ */ e(a, { variant: "filled", shade: "brand", size: "small", leftIcon: i }),
           /* @__PURE__ */ l(
             "div",
             {
               ref: p,
               className: "text-content flex flex-col items-start gap-2.5 flex-1 relative",
               children: [
-                /* @__PURE__ */ e("div", { className: "leading-none-medium-sm text-neutral-primary", children: a }),
-                r && /* @__PURE__ */ e("div", { className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-(--color-neutral-600) text-ellipsis text-xs font-normal leading-none tracking-tight relative", children: r })
+                /* @__PURE__ */ e("div", { className: "leading-none-medium-sm text-neutral-primary", children: r }),
+                s && /* @__PURE__ */ e("div", { className: "secondary-text line-clamp-1 self-stretch overflow-hidden text-(--color-neutral-600) text-ellipsis text-xs font-normal leading-none tracking-tight relative", children: s })
               ]
             }
           ),
-          g && /* @__PURE__ */ e(
-            v,
-            {
-              variant: "ghost",
-              shade: "neutral",
-              size: "small",
-              onClick: f,
-              title: "Collapse sidebar",
-              leftIcon: /* @__PURE__ */ e(x, {})
-            }
-          )
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
+            u && /* @__PURE__ */ e(
+              a,
+              {
+                shade: "neutral",
+                size: "small",
+                onClick: y,
+                title: "Reorder items",
+                leftIcon: /* @__PURE__ */ e(C, {})
+              }
+            ),
+            g && /* @__PURE__ */ e(
+              a,
+              {
+                variant: "stroke",
+                shade: "neutral",
+                size: "small",
+                onClick: h,
+                title: "Collapse sidebar",
+                leftIcon: /* @__PURE__ */ e(v, {})
+              }
+            )
+          ] })
         ]
       }
     );
   }
 );
-w.displayName = "Z2SideNavBarHeader";
+I.displayName = "Z2SideNavBarHeader";
 export {
-  w as Z2SideNavBarHeader
+  I as Z2SideNavBarHeader
 };

package/dist/components/collapsible-side-nav-bar/side-nav-bar-provider.js

@@ -1,39 +1,41 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as r from "react";
-import { cn as l } from "../../lib/utils.js";
-import { Z2SideNavBarContext as S } from "./context.js";
-import { SIDEBAR_WIDTH_COLLAPSED as d, SIDEBAR_WIDTH as h } from "./constants.js";
-const C = r.forwardRef(
-  ({ children: m, defaultCollapsed: c = !1, style: t, className: a, ...n }, p) => {
-    const [e, u] = r.useState(c), s = r.useCallback(() => {
-      u(!e);
-    }, [e]), v = r.useMemo(
+import { cn as m } from "../../lib/utils.js";
+import { Z2SideNavBarContext as B } from "./context.js";
+import { SIDEBAR_WIDTH_COLLAPSED as c, SIDEBAR_WIDTH as C } from "./constants.js";
+const D = r.forwardRef(
+  ({ children: p, defaultCollapsed: n = !1, enableEdit: s, onReorderClick: t, style: a, className: i, ...u }, v) => {
+    const [e, f] = r.useState(n), l = r.useCallback(() => {
+      f(!e);
+    }, [e]), S = r.useMemo(
       () => ({
         isCollapsed: e,
-        toggleCollapsed: s
+        toggleCollapsed: l,
+        enableEdit: s,
+        onReorderClick: t
       }),
-      [e, s]
-    ), i = r.useMemo(() => e ? d : h, [e]), f = r.useMemo(
+      [e, l, s, t]
+    ), d = r.useMemo(() => e ? c : C, [e]), h = r.useMemo(
       () => ({
-        "--sidebar-width": i,
-        "--sidebar-width-collapsed": d,
-        ...t
+        "--sidebar-width": d,
+        "--sidebar-width-collapsed": c,
+        ...a
       }),
-      [i, t]
+      [d, a]
     );
-    return /* @__PURE__ */ o(S.Provider, { value: v, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ o(B.Provider, { value: S, children: /* @__PURE__ */ o(
       "div",
       {
-        ref: p,
-        className: l("relative h-full", a),
-        style: f,
-        ...n,
-        children: /* @__PURE__ */ o("div", { className: l("h-full", a), children: m })
+        ref: v,
+        className: m("relative h-full", i),
+        style: h,
+        ...u,
+        children: /* @__PURE__ */ o("div", { className: m("h-full", i), children: p })
       }
     ) });
   }
 );
-C.displayName = "Z2SideNavBarProvider";
+D.displayName = "Z2SideNavBarProvider";
 export {
-  C as Z2SideNavBarProvider
+  D as Z2SideNavBarProvider
 };

package/dist/components/collapsible-side-nav-bar/types.d.ts

@@ -2,10 +2,14 @@ import * as React from 'react';
 export interface Z2SideNavBarContextType {
     isCollapsed: boolean;
     toggleCollapsed: () => void;
+    enableEdit?: boolean;
+    onReorderClick?: () => void;
 }
 export interface Z2SideNavBarProviderProps {
     children: React.ReactNode;
     defaultCollapsed?: boolean;
+    enableEdit?: boolean;
+    onReorderClick?: () => void;
     style?: React.CSSProperties;
     className?: string;
 }

package/dist/components/primitives/select-compact/select-compact.js

@@ -1,13 +1,13 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
 import { useRef as N } from "react";
 import { SearchIcon as I } from "lucide-react";
-import { Z2Select as Z, Z2SelectTrigger as P, Z2SelectValue as k, Z2SelectContent as O, Z2SelectItem as p } from "../../select/z2-select.js";
+import { Z2Select as Z, Z2SelectTrigger as P, Z2SelectValue as k, Z2SelectContent as O, Z2SelectItem as h } from "../../select/z2-select.js";
 import { Input as V } from "../../input/input.js";
 import { useSelectCompactSearch as b } from "./select-compact.hook.js";
 function q({
   value: s,
   onChange: r,
-  options: d,
+  options: p,
   placeholder: y = "Select field",
   className: S,
   searchable: a = !1,
@@ -15,16 +15,16 @@ function q({
   disabled: w = !1
 }) {
   const {
-    searchQuery: i,
-    filteredOptions: u,
-    isCurrentValueInFiltered: x,
+    searchQuery: u,
+    filteredOptions: i,
+    isCurrentValueInFiltered: C,
     currentOption: n,
     handleSearchChange: m,
     resetSearch: o
-  } = b(d, s), l = N(null), C = (e) => {
+  } = b(p, s), l = N(null), x = (e) => {
     e && a && setTimeout(() => {
-      var h;
-      (h = l.current) == null || h.focus();
+      var d;
+      (d = l.current) == null || d.focus();
     }, 0), e || o();
   }, K = (e) => {
     r == null || r(e), o();
@@ -38,12 +38,12 @@ function q({
     {
       value: s || "",
       onValueChange: K,
-      onOpenChange: C,
+      onOpenChange: x,
       disabled: w,
       children: [
         /* @__PURE__ */ t(P, { className: S, children: /* @__PURE__ */ t(k, { placeholder: y }) }),
         /* @__PURE__ */ c(O, { onKeyDown: (e) => {
-          !a || !l.current || document.activeElement !== l.current && D(e) && (e.preventDefault(), e.stopPropagation(), m(i + e.key), l.current.focus());
+          !a || !l.current || document.activeElement !== l.current && D(e) && (e.preventDefault(), e.stopPropagation(), m(u + e.key), l.current.focus());
         }, children: [
           a && /* @__PURE__ */ t(
             "div",
@@ -56,7 +56,7 @@ function q({
                 {
                   ref: l,
                   size: "small",
-                  value: i,
+                  value: u,
                   onChange: (e) => m(e.target.value),
                   onKeyDown: v,
                   placeholder: g,
@@ -66,9 +66,9 @@ function q({
               )
             }
           ),
-          /* @__PURE__ */ c("div", { className: "max-h-[240px] min-h-[120px] overflow-y-auto w-full", children: [
-            !x && n && /* @__PURE__ */ t(p, { value: n.value, className: "hidden", children: n.label }, n.value),
-            u.length > 0 ? u.map((e) => /* @__PURE__ */ t(p, { value: e.value, children: e.label }, e.value)) : /* @__PURE__ */ t("div", { className: "px-2 py-3 text-text-neutral-muted leading-none-medium-sm text-center", children: "No results found" })
+          /* @__PURE__ */ c("div", { className: "max-h-[240px] overflow-y-auto w-full", children: [
+            !C && n && /* @__PURE__ */ t(h, { value: n.value, className: "hidden", children: n.label }, n.value),
+            i.length > 0 ? i.map((e) => /* @__PURE__ */ t(h, { value: e.value, children: e.label }, e.value)) : /* @__PURE__ */ t("div", { className: "px-2 py-3 text-text-neutral-muted leading-none-medium-sm text-center", children: "No results found" })
           ] })
         ] })
       ]