@ztwoint/z-ui 0.1.8 → 0.1.10

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

@@ -0,0 +1,97 @@
+import { jsx as a, Fragment as m, jsxs as b } from "react/jsx-runtime";
+import * as o from "react";
+import * as h from "react-dom";
+import { cn as n } from "../../../lib/utils.js";
+import { Z2PopoverContext as y } from "./popover.js";
+const C = o.forwardRef(
+  ({ children: i, side: l = "right", className: f }) => {
+    const t = o.useContext(y), [e, p] = o.useState(null), u = o.useRef(null);
+    o.useEffect(() => {
+      if (t != null && t.isOpen && (t != null && t.triggerId)) {
+        const r = document.querySelector(
+          `[data-popover-trigger="${t.triggerId}"]`
+        );
+        r && p(r.getBoundingClientRect());
+      }
+    }, [t == null ? void 0 : t.isOpen, t == null ? void 0 : t.triggerId]);
+    const d = o.useCallback(() => {
+      t != null && t.cancelClose && t.cancelClose();
+    }, [t]), g = o.useCallback(() => {
+      t != null && t.scheduleClose && t.scheduleClose();
+    }, [t]);
+    if (!(t != null && t.isOpen)) return null;
+    const s = (() => {
+      if (!e) return { top: 0, left: 0 };
+      const r = 8;
+      switch (l) {
+        case "right":
+          return {
+            top: e.top + e.height / 2,
+            left: e.right + r
+          };
+        case "left":
+          return {
+            top: e.top + e.height / 2,
+            left: e.left - r
+          };
+        case "top":
+          return {
+            top: e.top - r,
+            left: e.left + e.width / 2
+          };
+        case "bottom":
+          return {
+            top: e.bottom + r,
+            left: e.left + e.width / 2
+          };
+        default:
+          return { top: 0, left: 0 };
+      }
+    })(), c = {
+      top: "-translate-x-1/2 -translate-y-full",
+      bottom: "-translate-x-1/2",
+      left: "-translate-y-1/2 -translate-x-full",
+      right: "-translate-y-1/2"
+    };
+    return /* @__PURE__ */ a(m, { children: typeof document < "u" && h.createPortal(
+      /* @__PURE__ */ b(
+        "div",
+        {
+          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]",
+            "pointer-events-auto select-none",
+            c[l],
+            f
+          ),
+          style: {
+            top: s.top,
+            left: s.left
+          },
+          onMouseEnter: d,
+          onMouseLeave: g,
+          children: [
+            i,
+            /* @__PURE__ */ a(
+              "div",
+              {
+                className: n(
+                  "absolute w-2 h-2 bg-white border-gray-200 transform rotate-45",
+                  l === "right" && "-left-1 top-1/2 -translate-y-1/2 border-l border-b",
+                  l === "left" && "-right-1 top-1/2 -translate-y-1/2 border-r border-t",
+                  l === "top" && "-bottom-1 left-1/2 -translate-x-1/2 border-r border-b",
+                  l === "bottom" && "-top-1 left-1/2 -translate-x-1/2 border-l border-t"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    ) });
+  }
+);
+C.displayName = "Z2PopoverContent";
+export {
+  C as Z2PopoverContent
+};

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

@@ -0,0 +1,3 @@
+import { Z2PopoverTriggerProps } from '../types';
+import * as React from 'react';
+export declare const Z2PopoverTrigger: React.ForwardRefExoticComponent<Z2PopoverTriggerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as o from "react";
+import { Z2PopoverContext as a } from "./popover.js";
+const p = o.forwardRef(
+  ({ children: e }, t) => {
+    const r = o.useContext(a);
+    return /* @__PURE__ */ i("div", { ref: t, className: "relative inline-block", "data-popover-trigger": r == null ? void 0 : r.triggerId, children: e });
+  }
+);
+p.displayName = "Z2PopoverTrigger";
+export {
+  p as Z2PopoverTrigger
+};

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

@@ -0,0 +1,9 @@
+import { Z2PopoverProps, Z2PopoverContextType } from '../types';
+import * as React from 'react';
+export declare const Z2PopoverContext: React.Context<Z2PopoverContextType | null>;
+export declare const Z2Popover: {
+    ({ children, delayDuration }: Z2PopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Z2PopoverTrigger } from './popover-trigger';
+export { Z2PopoverContent } from './popover-content';

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

@@ -0,0 +1,45 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as r from "react";
+import { Z2PopoverTrigger as g } from "./popover-trigger.js";
+import { Z2PopoverContent as C } from "./popover-content.js";
+const f = r.createContext(null), p = ({ children: i, delayDuration: n = 300 }) => {
+  const [u, o] = r.useState(!1), t = r.useRef(void 0), e = r.useRef(void 0), c = r.useMemo(
+    () => `popover-trigger-${Math.random().toString(36).substr(2, 9)}`,
+    []
+  ), a = r.useMemo(
+    () => ({
+      isOpen: u,
+      setIsOpen: o,
+      triggerId: c,
+      cancelClose: () => {
+        e.current && (clearTimeout(e.current), e.current = void 0);
+      },
+      scheduleClose: () => {
+        e.current && clearTimeout(e.current), e.current = window.setTimeout(() => o(!1), 150);
+      }
+    }),
+    [u, c]
+  ), l = r.useCallback(() => {
+    t.current && clearTimeout(t.current), e.current && (clearTimeout(e.current), e.current = void 0), t.current = window.setTimeout(() => o(!0), n);
+  }, [n]), m = r.useCallback(() => {
+    t.current && clearTimeout(t.current), e.current && clearTimeout(e.current), e.current = window.setTimeout(() => o(!1), 150);
+  }, []);
+  return r.useEffect(() => () => {
+    t.current && clearTimeout(t.current), e.current && clearTimeout(e.current);
+  }, []), /* @__PURE__ */ s(f.Provider, { value: a, children: /* @__PURE__ */ s(
+    "div",
+    {
+      className: " inline-block",
+      onMouseEnter: l,
+      onMouseLeave: m,
+      children: i
+    }
+  ) });
+};
+p.displayName = "Z2Popover";
+export {
+  p as Z2Popover,
+  C as Z2PopoverContent,
+  f as Z2PopoverContext,
+  g as Z2PopoverTrigger
+};

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarContentProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarContent: React.ForwardRefExoticComponent<Z2SideNavBarContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,34 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as f } from "../../lib/utils.js";
+import { useZ2SideNavBar as m } from "./context.js";
+const s = l.forwardRef(
+  ({ className: e, children: r, ...o }, t) => {
+    const { isCollapsed: i } = m();
+    return i ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: t,
+        className: f(
+          "flex-1 overflow-y-auto flex flex-col items-start gap-2 relative w-10.5 max-w-10.5",
+          "border-b border-gray-200",
+          e
+        ),
+        ...o,
+        children: r
+      }
+    ) : /* @__PURE__ */ a(
+      "div",
+      {
+        ref: t,
+        className: f("flex flex-col items-center flex-1 overflow-y-auto", e),
+        ...o,
+        children: r
+      }
+    );
+  }
+);
+s.displayName = "Z2SideNavBarContent";
+export {
+  s as Z2SideNavBarContent
+};

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarFooterProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarFooter: React.ForwardRefExoticComponent<Z2SideNavBarFooterProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as m from "react";
+import { cn as i } from "../../lib/utils.js";
+import { useZ2SideNavBar as f } from "./context.js";
+const d = m.forwardRef(
+  ({ className: r, children: e, ...t }, o) => {
+    const { isCollapsed: s } = f();
+    return s ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: o,
+        className: i(
+          "flex p-2 flex-col justify-center items-center gap-1.5 self-stretch relative",
+          r
+        ),
+        ...t,
+        children: e
+      }
+    ) : /* @__PURE__ */ a("div", { ref: o, className: i("p-4 border-t border-gray-200", r), ...t, children: e });
+  }
+);
+d.displayName = "Z2SideNavBarFooter";
+export {
+  d as Z2SideNavBarFooter
+};

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarGroupProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarGroup: React.ForwardRefExoticComponent<Z2SideNavBarGroupProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as m } from "../../lib/utils.js";
+import { useZ2SideNavBar as d } from "./context.js";
+const f = c.forwardRef(
+  ({ className: r, children: e, title: a, ...t }, o) => {
+    const { isCollapsed: s } = d(), l = a && !s;
+    return s ? /* @__PURE__ */ i(
+      "div",
+      {
+        ref: o,
+        className: m("flex flex-col items-start gap-1.5 p-1.5  relative", r),
+        ...t,
+        children: e
+      }
+    ) : /* @__PURE__ */ p("div", { ref: o, className: m("w-56 max-w-56 pt-2", r), ...t, children: [
+      l && /* @__PURE__ */ i("h3", { className: "text-sm font-medium text-(--color-neutral-600) px-2 pb-2", children: a }),
+      e
+    ] });
+  }
+);
+f.displayName = "Z2SideNavBarGroup";
+export {
+  f as Z2SideNavBarGroup
+};

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarHeaderProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarHeader: React.ForwardRefExoticComponent<Z2SideNavBarHeaderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,122 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as x } from "../../lib/utils.js";
+import { useZ2SideNavBar as N } from "./context.js";
+import u from "../assets/icons/window-left-copy.js";
+import w from "../assets/icons/sidebar-left-show-copy.js";
+const C = n.forwardRef(
+  ({
+    className: o,
+    children: l,
+    showCollapseButton: g = !0,
+    icon: s,
+    title: r,
+    forceMultiLine: c = !1,
+    ...d
+  }, m) => {
+    const { toggleCollapsed: p, isCollapsed: i } = N(), [v, h] = n.useState(c), f = n.useRef(null), b = v || !!l;
+    return n.useEffect(() => {
+      if (c) {
+        h(!0);
+        return;
+      }
+      if (f.current && !i && 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 = r, document.body.appendChild(t);
+        const y = t.offsetWidth;
+        document.body.removeChild(t), h(y > 168);
+      }
+    }, [r, i, c]), i ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: m,
+        className: x(
+          "flex flex-col items-center gap-1.5 self-stretch border-b border-gray-200 p-2",
+          o
+        ),
+        ...d,
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: p,
+            className: "flex items-center justify-center cursor-pointer p-1.5 gap-1 rounded-lg relative bg-transparent border-none",
+            title: "Expand sidebar",
+            children: /* @__PURE__ */ e(w, { className: "w-3.5 h-3.5 text-(--color-neutral-600)" })
+          }
+        )
+      }
+    ) : b && !i ? /* @__PURE__ */ a(
+      "div",
+      {
+        ref: m,
+        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,
+        children: [
+          /* @__PURE__ */ a("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(
+              "button",
+              {
+                onClick: p,
+                className: "sidebar-toggle-button flex p-1.5 justify-center items-center gap-1 rounded-lg relative bg-transparent border-none cursor-pointer",
+                title: "Collapse sidebar",
+                children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5 text-(--color-neutral-600)" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("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: r }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                ref: f,
+                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: l
+              }
+            )
+          ] })
+        ]
+      }
+    ) : /* @__PURE__ */ a(
+      "div",
+      {
+        ref: m,
+        className: x(
+          "flex items-center gap-2.5 border-b header-default-layout w-60 px-2.5 py-2.5 pl-3 border-gray-100 relative",
+          o
+        ),
+        ...d,
+        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 }) }),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ref: f,
+              className: "text-content flex flex-col items-start gap-2.5 flex-1 relative",
+              children: [
+                /* @__PURE__ */ e("div", { className: "primary-text line-clamp-1 self-stretch overflow-hidden text-gray-950 text-ellipsis text-sm font-medium leading-none tracking-tight relative", children: r }),
+                l && /* @__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: l })
+              ]
+            }
+          ),
+          g && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: p,
+              className: "collapse-button flex p-1.5 justify-center items-center gap-1 rounded-lg relative bg-transparent border-none cursor-pointer",
+              title: "Collapse sidebar",
+              children: /* @__PURE__ */ e("div", { className: "w-3.5 h-3.5 aspect-square relative", children: /* @__PURE__ */ e(u, { className: "text-(--color-neutral-600)" }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+C.displayName = "Z2SideNavBarHeader";
+export {
+  C as Z2SideNavBarHeader
+};

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarItemProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarItem: React.ForwardRefExoticComponent<Z2SideNavBarItemProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarProviderProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarProvider: React.ForwardRefExoticComponent<Z2SideNavBarProviderProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,3 @@
+import { Z2SideNavBarSeparatorProps } from './types';
+import * as React from 'react';
+export declare const Z2SideNavBarSeparator: React.ForwardRefExoticComponent<Z2SideNavBarSeparatorProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as m } from "../../lib/utils.js";
+const i = t.forwardRef(
+  ({ className: r, ...a }, o) => /* @__PURE__ */ e("div", { ref: o, className: m("", r), ...a })
+);
+i.displayName = "Z2SideNavBarSeparator";
+export {
+  i as Z2SideNavBarSeparator
+};

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

@@ -0,0 +1,7 @@
+import { Z2SideNavBarProps } from './types';
+import * as React from 'react';
+export declare const Z2SidebarVariants: (props?: ({
+    variant?: "default" | "inset" | "floating" | null | undefined;
+    side?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export declare const Z2SideNavBar: React.ForwardRefExoticComponent<Z2SideNavBarProps & React.RefAttributes<HTMLDivElement>>;