@ztwoint/z-ui 0.1.35 → 0.1.36

package/dist/components/assets/icons/chevron-down.js

@@ -1,13 +1,13 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-function s({ fill: o = "currentColor", title: r = "badge 13", ...t }) {
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+function s({ fill: r = "currentColor", title: e = "", ...t }) {
   return /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
-    /* @__PURE__ */ e("title", { children: r }),
-    /* @__PURE__ */ e("g", { fill: o, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ o("title", { children: e }),
+    /* @__PURE__ */ o("g", { fill: r, children: /* @__PURE__ */ o(
       "path",
       {
         d: "M2.45 5.25l4.55 4.55 4.55-4.55",
         fill: "none",
-        stroke: o,
+        stroke: r,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeWidth: "2"

package/dist/components/assets/icons/chevron-up-icon.js

@@ -1,16 +1,12 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-const s = ({
-  fill: e = "currentColor",
-  title: o = "badge 13",
-  ...t
-}) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
-  /* @__PURE__ */ r("title", { children: o }),
-  /* @__PURE__ */ r("g", { fill: e, children: /* @__PURE__ */ r(
+const s = ({ fill: o = "currentColor", title: e = "", ...t }) => /* @__PURE__ */ n("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...t, children: [
+  /* @__PURE__ */ r("title", { children: e }),
+  /* @__PURE__ */ r("g", { fill: o, children: /* @__PURE__ */ r(
     "path",
     {
       d: "M11.55 8.75l-4.55-4.55-4.55 4.55",
       fill: "none",
-      stroke: e,
+      stroke: o,
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: "2"

package/dist/components/assets/icons/circles-icon.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 function a({
   fill: o = "currentColor",
   secondaryfill: n,
-  title: i = "badge 13",
+  title: i = "",
   ...s
 }) {
   const t = n || o;

package/dist/components/assets/icons/database-copy.js

@@ -1,41 +1,36 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-function d({
-  fill: e = "currentColor",
-  secondaryfill: t,
-  title: n = "badge 13",
-  ...s
-}) {
-  return t = t || e, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...s, children: [
-    /* @__PURE__ */ o("title", { children: n }),
-    /* @__PURE__ */ r("g", { fill: e, children: [
-      /* @__PURE__ */ o(
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+function d({ fill: o = "currentColor", secondaryfill: e, title: n = "", ...s }) {
+  return e = e || o, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...s, children: [
+    /* @__PURE__ */ t("title", { children: n }),
+    /* @__PURE__ */ r("g", { fill: o, children: [
+      /* @__PURE__ */ t(
         "path",
         {
           d: "M2.8 3.85v6.3c0 0.97 1.88 1.75 4.2 1.75s4.2-0.78 4.2-1.75v-6.3",
           fill: "none",
-          stroke: e,
+          stroke: o,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         "path",
         {
           d: "M7 2.1a4.2 1.75 0 1 0 0 3.5 4.2 1.75 0 1 0 0-3.5z",
           fill: "none",
-          stroke: t,
+          stroke: e,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         "path",
         {
           d: "M11.2 7c0 0.97-1.88 1.75-4.2 1.75s-4.2-0.78-4.2-1.75",
           fill: "none",
-          stroke: e,
+          stroke: o,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeWidth: "2"

package/dist/components/assets/icons/sidebar-left-show-copy.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as o } from "react/jsx-runtime";
 function d({
   fill: t = "currentColor",
   secondaryfill: e,
-  title: h = "badge 13",
+  title: h = "",
   ...n
 }) {
   return e = e || t, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...n, children: [

package/dist/components/assets/icons/window-left-copy.js

@@ -1,25 +1,20 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-function d({
-  fill: e = "currentColor",
-  secondaryfill: t,
-  title: n = "badge 13",
-  ...i
-}) {
-  return t = t || e, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
-    /* @__PURE__ */ o("title", { children: n }),
-    /* @__PURE__ */ r("g", { fill: e, children: [
-      /* @__PURE__ */ o(
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+function s({ fill: o = "currentColor", secondaryfill: t, title: n = "", ...i }) {
+  return t = t || o, /* @__PURE__ */ r("svg", { height: "14", width: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg", ...i, children: [
+    /* @__PURE__ */ e("title", { children: n }),
+    /* @__PURE__ */ r("g", { fill: o, children: [
+      /* @__PURE__ */ e(
         "path",
         {
           d: "M11.9 4.9v4.2q0 2.1-2.1 2.1h-5.6q-2.1 0-2.1-2.1v-4.2q0-2.1 2.1-2.1h5.6q2.1 0 2.1 2.1z",
           fill: "none",
-          stroke: e,
+          stroke: o,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeWidth: "2"
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ e(
         "path",
         {
           d: "M5.6 4.9v4.2h-1.4v-4.2z",
@@ -34,5 +29,5 @@ function d({
   ] });
 }
 export {
-  d as default
+  s as default
 };

package/dist/components/collapsible-side-nav-bar/popover/popover-content.js

@@ -59,7 +59,7 @@ const C = o.forwardRef(
         {
           ref: u,
           className: n(
-            "fixed z-[9999] px-3 py-2 text-sm bg-white text-gray-900 rounded-lg shadow-lg border border-gray-200 min-w-[200px]",
+            "fixed z-[9999] px-3 py-2 text-sm bg-white text-gray-900 rounded-lg shadow-lg border border-gray-200 min-w-[256px] max-w-[256px]",
             "pointer-events-auto select-none",
             c[l],
             f

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

@@ -1,44 +1,44 @@
-import { jsxs as i, jsx as r, Fragment as D } from "react/jsx-runtime";
+import { jsxs as l, jsx as r, Fragment as D } from "react/jsx-runtime";
 import * as d from "react";
-import { cn as f } from "../../lib/utils.js";
+import { cn as m } from "../../lib/utils.js";
 import { useZ2SideNavBar as B } from "./context.js";
 import { ChevronUpIcon as M } from "../assets/icons/chevron-up-icon.js";
-import Z from "../assets/icons/sub-nav-indicator.js";
+import P from "../assets/icons/sub-nav-indicator.js";
 import { Z2Popover as A } from "./popover/popover.js";
 import R from "../assets/icons/chevron-down.js";
 import { Z2PopoverTrigger as E } from "./popover/popover-trigger.js";
 import { Z2PopoverContent as F } from "./popover/popover-content.js";
 const K = d.forwardRef(
   ({
-    className: x,
-    children: u,
-    icon: h,
-    label: o,
+    className: g,
+    children: p,
+    icon: f,
+    label: i,
     href: N,
-    isActive: m = !1,
-    onClick: p,
-    tooltip: v,
-    subItems: c,
-    ...y
-  }, P) => {
-    const { isCollapsed: a } = B(), [t, k] = d.useState(!1), s = o && !a, n = c && c.length > 0, C = d.useMemo(() => a ? n ? /* @__PURE__ */ i("div", { className: "text-left", children: [
-      /* @__PURE__ */ r("div", { className: "text-gray-500 mt-2 mb-1", children: v || o }),
-      /* @__PURE__ */ r("div", { className: "space-y-1", children: c.map((e) => {
-        const g = (l) => {
-          l.preventDefault(), l.stopPropagation(), e.onClick ? e.onClick() : e.href && (window.location.href = e.href);
-        }, b = /* @__PURE__ */ i(
+    isActive: h = !1,
+    onClick: v,
+    tooltip: u,
+    subItems: s,
+    ...C
+  }, b) => {
+    const { isCollapsed: o } = B(), [t, k] = d.useState(!1), c = i && !o, n = s && s.length > 0, y = d.useMemo(() => o ? n ? /* @__PURE__ */ l("div", { className: "text-left", children: [
+      /* @__PURE__ */ r("div", { className: "text-neutral-secondary mt-2 mb-1", children: u || i }),
+      /* @__PURE__ */ r("div", { className: "space-y-1", children: s.map((e) => {
+        const x = (a) => {
+          a.preventDefault(), a.stopPropagation(), e.onClick ? e.onClick() : e.href && (window.location.href = e.href);
+        }, Z = /* @__PURE__ */ l(
           "div",
           {
-            className: f(
+            className: m(
               "cursor-pointer transition-colors flex items-center gap-1.5 self-stretch rounded-lg p-2",
               {
-                "hover:!bg-gray-100 bg-gray-100": e.isActive,
-                "hover:!bg-gray-50": !e.isActive
+                "hover:!bg-(--color-neutral-75) bg-(--color-neutral-75) text-neutral-primary": e.isActive,
+                "hover:!bg-(--color-neutral-75) text-neutral-secondary": !e.isActive
               }
             ),
             onClick: e.onClick,
             children: [
-              /* @__PURE__ */ r(Z, { className: "text-(--color-neutral-150)" }),
+              /* @__PURE__ */ r(P, { className: "text-(--color-neutral-150)" }),
               /* @__PURE__ */ r("div", { className: "px-0.5 text-ellipsis leading-none-medium-sm", children: e.label })
             ]
           },
@@ -49,83 +49,84 @@ const K = d.forwardRef(
           {
             href: e.href,
             className: "block mt-2",
-            onClick: g,
-            children: b
+            onClick: x,
+            children: Z
           },
           e.id
         ) : /* @__PURE__ */ r(
           "div",
           {
-            onClick: g,
+            onClick: x,
             role: "button",
             tabIndex: 0,
             className: "block",
-            onKeyDown: (l) => {
-              (l.key === "Enter" || l.key === " ") && (l.preventDefault(), g(l));
+            onKeyDown: (a) => {
+              (a.key === "Enter" || a.key === " ") && (a.preventDefault(), x(a));
             },
-            children: b
+            children: Z
           },
           e.id
         );
       }) })
-    ] }) : v || o : null, [a, n, v, o, c]), w = d.useCallback(
+    ] }) : u || i : null, [o, n, u, i, s]), w = d.useCallback(
       (e) => {
         e.stopPropagation(), k(!t);
       },
       [t]
     ), S = d.useCallback(() => {
-      n && !a ? k(!t) : p && p();
-    }, [n, a, t, p]);
-    if (a) {
-      const e = /* @__PURE__ */ i(
+      n && !o ? k(!t) : v && v();
+    }, [n, o, t, v]);
+    if (o) {
+      const e = /* @__PURE__ */ l(
         "div",
         {
-          className: f(
+          className: m(
             "flex items-center justify-center gap-1.5 rounded-lg cursor-pointer transition-all duration-200",
             "p-2 justify-center gap-1.5 self-stretch relative",
-            "hover:bg-gray-50 text-gray-700 hover:text-gray-900",
-            m && "bg-(--color-neutral-100)",
-            x
+            "hover:bg-(--color-neutral-75) text-neutral-secondary hover:text-neutral-primary",
+            h && "bg-(--color-neutral-75) text-neutral-primary",
+            g
           ),
           onClick: S,
-          ...y,
+          ...C,
           children: [
-            h && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: h }),
-            u
+            f && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: f }),
+            p
           ]
         }
       );
-      return C ? /* @__PURE__ */ i(A, { children: [
+      return y ? /* @__PURE__ */ l(A, { children: [
         /* @__PURE__ */ r(E, { children: e }),
-        /* @__PURE__ */ r(F, { side: "right", children: C })
+        /* @__PURE__ */ r(F, { side: "right", children: y })
       ] }) : /* @__PURE__ */ r("div", { children: e });
     }
-    const j = /* @__PURE__ */ i(
+    const j = /* @__PURE__ */ l(
       "div",
       {
-        className: f(
+        className: m(
           "nav-item-container flex flex-col justify-center items-center gap-1.5 rounded-lg relative overflow-hidden p-0 w-full"
         ),
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ l(
             "div",
             {
-              className: f(
-                "nav-item-main flex items-center justify-center gap-1.5 self-stretch rounded-lg cursor-pointer transition-all duration-200 p-2 relative",
+              className: m(
+                "nav-item-main flex items-center gap-1.5 self-stretch rounded-lg cursor-pointer transition-all duration-200 p-2 relative",
                 {
                   // Background colors based on state
-                  "hover:bg-gray-50 text-gray-700 hover:text-gray-900": !m && !(s && n && t),
+                  "hover:bg-(--color-neutral-75) text-neutral-secondary hover:text-neutral-primary": !h && !(c && n && t),
                   // Focused state for expanded nav with sub items (matching component design)
-                  "text-black bg-gray-100": m || s && n && t
+                  "text-neutral-primary bg-(--color-neutral-75)": h || c && n && t
                 },
-                x
+                g
               ),
               onClick: S,
-              ...y,
+              ...C,
               children: [
-                h && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: h }),
-                s && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1", children: o }) }),
-                s && n && /* @__PURE__ */ r(D, { children: t ? /* @__PURE__ */ r(
+                f && /* @__PURE__ */ r("span", { className: "nav-item-icon flex-shrink-0 flex items-center justify-center w-3.5 h-3.5", children: f }),
+                c && i && /* @__PURE__ */ r("div", { className: "nav-item-label-container flex items-center gap-2.5 flex-1 px-0.5 relative", children: /* @__PURE__ */ r("div", { className: "nav-item-label flex-1 truncate text-sm font-medium leading-none tracking-tight text-black relative line-clamp-1", children: i }) }),
+                !c || !i ? /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5 flex-1 px-0.5 relative", children: p }) : p,
+                c && n && /* @__PURE__ */ r(D, { children: t ? /* @__PURE__ */ r(
                   M,
                   {
                     className: "w-3.5 h-3.5 cursor-pointer text-(--color-neutral-600)",
@@ -137,26 +138,25 @@ const K = d.forwardRef(
                     className: "w-3.5 h-3.5 text-(--color-neutral-600) cursor-pointer",
                     onClick: w
                   }
-                ) }),
-                u
+                ) })
               ]
             }
           ),
-          s && n && t && /* @__PURE__ */ i("div", { className: "sub-nav-container flex items-start gap-0 self-stretch p-0", children: [
+          c && n && t && /* @__PURE__ */ l("div", { className: "sub-nav-container flex items-start gap-0 self-stretch p-0", children: [
             /* @__PURE__ */ r("div", { className: "divider-group flex w-2 items-center gap-2.5 self-stretch" }),
-            /* @__PURE__ */ r("div", { className: "sub-nav-list flex flex-col items-start gap-1.5 flex-1", children: c.map((e) => /* @__PURE__ */ i(
+            /* @__PURE__ */ r("div", { className: "sub-nav-list flex flex-col items-start gap-1.5 flex-1", children: s.map((e) => /* @__PURE__ */ l(
               "div",
               {
-                className: f(
+                className: m(
                   "cursor-pointer transition-colors flex items-center gap-1.5 self-stretch rounded-lg p-2",
                   {
-                    "hover:!bg-gray-100 bg-gray-100": e.isActive,
-                    "hover:!bg-gray-50": !e.isActive
+                    "hover:!bg-(--color-neutral-75) bg-(--color-neutral-75) text-neutral-primary": e.isActive,
+                    "hover:!bg-(--color-neutral-75) text-neutral-secondary": !e.isActive
                   }
                 ),
                 onClick: e.onClick,
                 children: [
-                  /* @__PURE__ */ r(Z, { className: "text-(--color-neutral-150)" }),
+                  /* @__PURE__ */ r(P, { className: "text-(--color-neutral-150)" }),
                   /* @__PURE__ */ r("div", { className: "px-0.5 text-ellipsis leading-none-medium-sm", children: e.label })
                 ]
               },
@@ -166,7 +166,7 @@ const K = d.forwardRef(
         ]
       }
     );
-    return N ? /* @__PURE__ */ r("a", { href: N, children: j }) : /* @__PURE__ */ r("div", { ref: P, children: j });
+    return N ? /* @__PURE__ */ r("a", { href: N, children: j }) : /* @__PURE__ */ r("div", { ref: b, children: j });
   }
 );
 K.displayName = "Z2SideNavBarItem";