@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.104

package/dist/components/Select/hooks/useSelect.js

@@ -1,67 +1,68 @@
-import { useSelectContext as b } from "../contexts/select.hook.js";
-import { useCallback as w, useEffect as c, useRef as m } from "react";
-var h = ({ ulRef: f, inputRef: r, disabled: E, internalValue: u, onBlur: g }) => {
-  const t = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = b();
-  return c(() => {
-    const e = new AbortController(), s = (l) => {
-      l.key === "Escape" && n(!1);
-    }, o = (l) => {
-      t.current?.contains(l.target) || n(!1);
+import { useClickOutside as E } from "../../../hooks/useClickOutside.js";
+import { useSelectContext as w } from "../contexts/select.hook.js";
+import { useCallback as p, useEffect as l, useRef as v } from "react";
+var k = ({ ulRef: d, inputRef: o, searchInputRef: m, disabled: b, internalValue: i, onBlur: f }) => {
+  const n = v(null), a = v(null), { value: c, setSearchTerm: g, setCanFilter: u, toggleOpen: r } = w();
+  return E(n, p(() => {
+    r(!1);
+  }, [r])), l(() => {
+    const e = new AbortController(), s = (t) => {
+      t.key === "Escape" && r(!1);
     };
-    return document.addEventListener("keydown", s, { signal: e.signal }), document.addEventListener("mousedown", o, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
-      document.hidden && n(!1);
-    }, { signal: e.signal }), a.current?.addEventListener("focusin", (l) => {
-      !E && l.target?.matches(":focus-visible") && n(!0);
+    return document.addEventListener("keydown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && r(!1);
+    }, { signal: e.signal }), a.current?.addEventListener("focusin", (t) => {
+      !b && t.target?.matches(":focus-visible") && r(!0);
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [n, t]), c(() => {
+  }, [r, n]), l(() => {
     const e = new AbortController();
     return a.current?.addEventListener("keydown", (s) => {
       if (s.key === "ArrowDown") {
-        const o = f.current?.querySelector("li");
-        o && o.focus();
+        const t = d.current?.querySelector("li");
+        t && t.focus();
       }
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [a, f]), c(() => {
+  }, [a, d]), l(() => {
     const e = new AbortController();
-    return r?.current?.addEventListener("focusin", () => {
-      v(u?.value ?? ""), d(!1);
-    }, { signal: e.signal }), r?.current?.addEventListener("focusout", () => {
-      d(!0);
+    return o?.current?.addEventListener("focusin", () => {
+      g(i?.value ?? ""), u(!1);
+    }, { signal: e.signal }), o?.current?.addEventListener("focusout", () => {
+      u(!0);
     }, { signal: e.signal }), a.current?.addEventListener("focus", () => {
-      d(!1);
-    }, { signal: e.signal }), t.current?.addEventListener("focusout", (s) => {
-      t.current?.contains(s.relatedTarget) || n(!1);
+      u(!1);
+    }, { signal: e.signal }), n.current?.addEventListener("focusout", (s) => {
+      n.current?.contains(s.relatedTarget) || r(!1);
     }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [i]), c(() => {
-    r?.current && (r.current.value = i && u?.value || "");
-  }, [u, i]), c(() => {
+  }, [c]), l(() => {
+    o?.current && (o.current.value = c && i?.value || "");
+  }, [i, c]), l(() => {
     const e = new AbortController();
-    return t.current?.addEventListener("focusout", (s) => {
-      const o = s.relatedTarget;
-      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
+    return n.current?.addEventListener("focusout", (s) => {
+      const t = s.relatedTarget;
+      (!t || !n.current?.contains(t)) && (o?.current?.value || f?.());
     }), () => {
       e.abort();
     };
   }, [
+    r,
     n,
-    t,
-    v,
     g,
-    i
+    f,
+    c
   ]), {
-    wrapperRef: t,
+    wrapperRef: n,
     wrapperInputRef: a,
-    handleOpen: w(() => {
-      n(!0), requestAnimationFrame(() => r?.current?.focus());
-    }, [r, n])
+    handleOpen: () => {
+      r(!0), requestAnimationFrame(() => m?.current?.focus());
+    }
   };
 };
 export {
-  h as useSelect
+  k as useSelect
 };

package/dist/components/Sidebar/Sidebar.js

@@ -1,29 +1,32 @@
 "use client";
-import { Footer as i } from "./components/Footer/Footer.js";
-import { Label as a } from "./components/Label/Label.js";
-import { Logo as t } from "./components/Logo/Logo.js";
+import { CollapseTrigger as i } from "./components/CollapseTrigger/CollapseTrigger.js";
+import { Footer as a } from "./components/Footer/Footer.js";
+import { Label as t } from "./components/Label/Label.js";
+import { Logo as p } from "./components/Logo/Logo.js";
 import { NavigationGroup as m } from "./components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as p } from "./components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as e } from "./components/NavigationSeparator/NavigationSeparator.js";
+import { NavigationOption as e } from "./components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as g } from "./components/NavigationSeparator/NavigationSeparator.js";
 import { Navigation as n } from "./components/Navigation/Navigation.js";
-import { Wrapper as g } from "./components/Wrapper/Wrapper.js";
-import { jsx as f } from "react/jsx-runtime";
-import '../../Sidebar.css';var o = (r) => /* @__PURE__ */ f(g, { ...r });
+import { Wrapper as f } from "./components/Wrapper/Wrapper.js";
+import { jsx as v } from "react/jsx-runtime";
+import '../../Sidebar.css';var o = (r) => /* @__PURE__ */ v(f, { ...r });
 o.displayName = "KonstructSidebar";
-o.Footer = i;
-o.Label = a;
-o.Logo = t;
+o.CollapseTrigger = i;
+o.Footer = a;
+o.Label = t;
+o.Logo = p;
 o.Navigation = n;
 o.NavigationGroup = m;
-o.NavigationOption = p;
-o.NavigationSeparator = e;
+o.NavigationOption = e;
+o.NavigationSeparator = g;
 export {
-  i as Footer,
-  a as Label,
-  t as Logo,
+  i as CollapseTrigger,
+  a as Footer,
+  t as Label,
+  p as Logo,
   n as Navigation,
   m as NavigationGroup,
-  p as NavigationOption,
-  e as NavigationSeparator,
+  e as NavigationOption,
+  g as NavigationSeparator,
   o as Sidebar
 };

package/dist/components/Sidebar/components/CollapseTrigger/CollapseTrigger.js

@@ -0,0 +1,30 @@
+import { t as n } from "../../../../utils-Cx-WzRZF.js";
+import { ArrowLeftIcon as l } from "../../../../assets/icons/components/ArrowLeft.js";
+import { ArrowRightIcon as s } from "../../../../assets/icons/components/ArrowRight.js";
+import { useSidebarContext as p } from "../../contexts/SidebarContext.js";
+import { collapseTriggerVariants as g } from "./CollapseTrigger.variants.js";
+import { jsx as o } from "react/jsx-runtime";
+var d = ({ className: a }) => {
+  const { isCollapsed: r, canToggle: e, toggleMode: t } = p();
+  return e ? /* @__PURE__ */ o("button", {
+    type: "button",
+    "data-konstruct-sidebar-collapse-trigger": "",
+    "aria-label": r ? "Expand navigation" : "Collapse navigation",
+    "aria-expanded": !r,
+    className: n(g({ className: a })),
+    onClick: (i) => {
+      i.stopPropagation(), t();
+    },
+    children: r ? /* @__PURE__ */ o(s, {
+      size: 24,
+      "aria-hidden": "true"
+    }) : /* @__PURE__ */ o(l, {
+      size: 24,
+      "aria-hidden": "true"
+    })
+  }) : null;
+};
+d.displayName = "KonstructSidebarCollapseTrigger";
+export {
+  d as CollapseTrigger
+};

package/dist/components/Sidebar/components/CollapseTrigger/CollapseTrigger.variants.js

@@ -0,0 +1,20 @@
+import { t as e } from "../../../../dist-B9GE4SXf.js";
+var i = e([
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "shrink-0",
+  "p-1",
+  "rounded",
+  "border",
+  "border-metal-700",
+  "text-metal-50",
+  "cursor-pointer",
+  "hover:bg-metal-800",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-white/40"
+]);
+export {
+  i as collapseTriggerVariants
+};

package/dist/components/Sidebar/components/HamburgerTrigger/HamburgerTrigger.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../HamburgerTrigger-7a4POUaM.js";
+import { t as e } from "../../../../HamburgerTrigger-DRylBL2d.js";
 export {
   e as HamburgerTrigger
 };

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -1,17 +1,21 @@
-import { t as a } from "../../../../utils-Cx-WzRZF.js";
-import { useSidebarContext as e } from "../../contexts/SidebarContext.js";
+import { t as e } from "../../../../utils-Cx-WzRZF.js";
+import { useSidebarContext as i } from "../../contexts/SidebarContext.js";
 import { logoVariants as s } from "./Logo.variants.js";
-import { jsx as i } from "react/jsx-runtime";
-var m = ({ children: o, className: r }) => {
-  const { closeDrawer: t } = e();
-  return /* @__PURE__ */ i("header", {
+import { jsx as m } from "react/jsx-runtime";
+var d = ({ children: r, className: a, showOnCollapse: o = !1 }) => {
+  const { closeDrawer: t } = i();
+  return /* @__PURE__ */ m("header", {
     "data-konstruct-sidebar-logo": "",
-    className: a(s({ className: r })),
+    "data-hide-on-collapse": o ? void 0 : "",
+    className: e(s({
+      showOnCollapse: o,
+      className: a
+    })),
     onClick: () => t(),
-    children: o
+    children: r
   });
 };
-m.displayName = "KonstructSidebarLogo";
+d.displayName = "KonstructSidebarLogo";
 export {
-  m as Logo
+  d as Logo
 };

package/dist/components/Sidebar/components/Logo/Logo.variants.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../../dist-B9GE4SXf.js";
-var p = e([
+import { t as a } from "../../../../dist-B9GE4SXf.js";
+var d = a([
   "group-data-[mode=expanded]/sidebar:px-4",
   "group-data-[mode=expanded]/sidebar:py-5",
   "flex",
@@ -21,7 +21,17 @@ var p = e([
   "[&>*>p]:-mt-2",
   "[&>*>img]:pt-3",
   "cursor-pointer"
-]);
+], {
+  variants: { showOnCollapse: {
+    true: null,
+    false: [
+      "group-data-[mode=collapsed]/sidebar:[&>*:not([data-konstruct-sidebar-collapse-trigger])]:hidden",
+      "group-data-[mode=collapsed]/sidebar:py-5",
+      "group-data-[mode=collapsed]/sidebar:mb-0"
+    ]
+  } },
+  defaultVariants: { showOnCollapse: !1 }
+});
 export {
-  p as logoVariants
+  d as logoVariants
 };

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.js

@@ -1,54 +1,58 @@
-import { t as l } from "../../../../utils-Cx-WzRZF.js";
-import { a as T, i as j, n as P, o as V, r as A, t as D } from "../../../../dist-DnGj9MTf.js";
-import { useSidebarContext as E } from "../../contexts/SidebarContext.js";
-import { NavigationOptionContext as H } from "./NavigationOption.context.js";
-import { navigationOptionVariants as R } from "./NavigationOption.variants.js";
-import { Children as z, isValidElement as B, useCallback as K, useMemo as M, useState as q } from "react";
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-var F = (e) => {
-  const o = z.toArray(e);
-  return o.length === 1 && B(o[0]) ? o[0] : /* @__PURE__ */ t("span", {
+import { t as u } from "../../../../utils-Cx-WzRZF.js";
+import { a as j, i as P, n as V, o as A, r as D, t as E } from "../../../../dist-tGUUcv8n.js";
+import { useSidebarContext as H } from "../../contexts/SidebarContext.js";
+import { NavigationOptionContext as R } from "./NavigationOption.context.js";
+import { navigationOptionVariants as z } from "./NavigationOption.variants.js";
+import { Children as B, isValidElement as K, useCallback as M, useMemo as q, useState as F } from "react";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+var G = (e) => {
+  const o = B.toArray(e);
+  return o.length === 1 && K(o[0]) ? o[0] : /* @__PURE__ */ t("span", {
     className: "flex w-full items-center justify-center gap-2",
     children: e
   });
-}, G = ({ children: e, className: o, closeDrawerOnClick: d = !0, isVisible: p = !0, isActive: n, tooltip: u, tooltipBgClassName: m = "bg-kubefirst-dark-blue-900", tooltipArrowClassName: f = "fill-kubefirst-dark-blue-900", tooltipTextClassName: C = "text-white", tooltipClassName: g, ...r }) => {
-  const { isCollapsed: h, expandOnHover: v, closeDrawer: x } = E(), i = h && v, [b, k] = q(null), a = K((S) => {
-    k(S);
-  }, []), w = M(() => ({
-    hasOwnTooltip: i,
-    registerTooltipContent: a
-  }), [i, a]);
-  if (!p) return null;
-  const N = "onClick" in r ? r.onClick : void 0, O = () => {
-    d && x(), N?.();
-  }, s = u ?? b, y = i && s ? /* @__PURE__ */ t(j, {
+}, I = ({ children: e, className: o, closeDrawerOnClick: m = !0, isVisible: f = !0, isActive: r, role: a, tooltip: C, tooltipBgClassName: g = "bg-kubefirst-dark-blue-900", tooltipArrowClassName: h = "fill-kubefirst-dark-blue-900", tooltipTextClassName: b = "text-white", tooltipClassName: v, ...i }) => {
+  const { isCollapsed: x, expandOnHover: k, closeDrawer: w } = H(), n = x && k, [N, y] = F(null), s = M((T) => {
+    y(T);
+  }, []), O = q(() => ({
+    hasOwnTooltip: n,
+    registerTooltipContent: s
+  }), [n, s]);
+  if (!f) return null;
+  const S = "onClick" in i ? i.onClick : void 0, l = () => {
+    m && w(), S?.();
+  }, c = C ?? N, d = n && c ? /* @__PURE__ */ t(P, {
     delayDuration: 0,
-    children: /* @__PURE__ */ c(T, { children: [/* @__PURE__ */ t(V, {
+    children: /* @__PURE__ */ p(j, { children: [/* @__PURE__ */ t(A, {
       asChild: !0,
-      children: F(e)
-    }), /* @__PURE__ */ t(A, { children: /* @__PURE__ */ c(P, {
+      children: G(e)
+    }), /* @__PURE__ */ t(D, { children: /* @__PURE__ */ p(V, {
       side: "right",
       sideOffset: 12,
-      className: l("z-[60] flex w-fit items-center gap-2 rounded px-3 py-2 text-sm shadow-lg whitespace-nowrap", "animate-in fade-in-0", m, C, g),
-      children: [s, /* @__PURE__ */ t(D, { className: f })]
+      className: u("z-60 flex w-fit items-center gap-2 rounded px-3 py-2 text-sm shadow-lg whitespace-nowrap", "animate-in fade-in-0", g, b, v),
+      children: [c, /* @__PURE__ */ t(E, { className: h })]
     }) })] })
   }) : e;
-  return /* @__PURE__ */ t(H.Provider, {
-    value: w,
+  return /* @__PURE__ */ t(R.Provider, {
+    value: O,
     children: /* @__PURE__ */ t("li", {
-      ...r,
-      role: "option",
-      "data-active": n ? "true" : void 0,
-      onClick: O,
-      className: l(R({
+      ...i,
+      "data-active": r ? "true" : void 0,
+      onClick: a === "button" ? void 0 : l,
+      className: u(z({
         className: o,
-        isActive: n
+        isActive: r
       })),
-      children: y
+      children: a === "button" ? /* @__PURE__ */ t("button", {
+        type: "button",
+        onClick: l,
+        className: "flex w-full cursor-pointer items-center gap-2",
+        children: d
+      }) : d
     })
   });
 };
-G.displayName = "KonstructSidebarNavigationOption";
+I.displayName = "KonstructSidebarNavigationOption";
 export {
-  G as NavigationOption
+  I as NavigationOption
 };

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.js

@@ -12,16 +12,15 @@ var t = e([
   "cursor-pointer",
   "flex",
   "font-normal",
-  "font-normal",
   "gap-4",
   "rounded",
+  "shrink-0",
   "group-data-[mode=collapsed]/sidebar:justify-center",
   "group-data-[mode=collapsed]/sidebar:[&>a]:justify-center",
-  "text-black",
   "w-full",
-  "text-[#9ea2c6]",
+  "text-kubefirst-dark-blue-300",
   "hover:text-white",
-  "hover:bg-[#252a41]",
+  "hover:bg-kubefirst-dark-blue-800",
   "selection:bg-powder-500",
   "selection:text-white"
 ], {
@@ -31,7 +30,7 @@ var t = e([
   } },
   compoundVariants: [{
     isActive: !0,
-    class: ["text-white", "bg-[#252a41]"]
+    class: ["data-[active=true]:text-white", "data-[active=true]:bg-kubefirst-dark-blue-800"]
   }]
 });
 export {

package/dist/components/Sidebar/components/Wrapper/Wrapper.js

@@ -1,114 +1,121 @@
-import { t as B } from "../../../../HamburgerTrigger-7a4POUaM.js";
-import { t as i } from "../../../../utils-Cx-WzRZF.js";
-import { Drawer as G } from "../../../Drawer/Drawer.js";
-import { SidebarContext as z } from "../../contexts/SidebarContext.js";
-import { useSidebarMode as J } from "../../hooks/useSidebarMode.js";
-import { dragVariants as K, wrapperSiderbarVariants as H } from "../../Sidebar.variants.js";
-import { useCallback as l, useEffect as f, useRef as m, useState as V } from "react";
-import { Fragment as Q, jsx as o, jsxs as k } from "react/jsx-runtime";
-var Y = 280, Z = ({ animateOnHover: A = !0, canResize: F = !0, children: b, dividerClassName: I, drawerBreakpoint: N, drawerClassNames: u, drawerMaxWidth: x = Y, expandedBreakpoint: P, expandOnHover: T = !0, initialMode: _, initialWidth: D = 256, maxWith: s = 300, minWith: a = 240, mode: $ = "auto", separatorClassName: g, style: L, theme: M, triggerClassName: j, wrapperClassName: E }) => {
-  const r = J($, P, N, _), [R, v] = V(!1), [O, C] = V(null), n = m(null), e = m(null), w = m(!1), S = m(!1);
+import { t as Q } from "../../../../HamburgerTrigger-DRylBL2d.js";
+import { t as l } from "../../../../utils-Cx-WzRZF.js";
+import { Drawer as Y } from "../../../Drawer/Drawer.js";
+import { SidebarContext as k } from "../../contexts/SidebarContext.js";
+import { useSidebarMode as Z } from "../../hooks/useSidebarMode.js";
+import { dragVariants as ee, wrapperSiderbarVariants as A } from "../../Sidebar.variants.js";
+import { useCallback as p, useEffect as f, useRef as m, useState as M } from "react";
+import { Fragment as re, jsx as o, jsxs as F } from "react/jsx-runtime";
+var te = 280, ne = ({ animateOnHover: I = !0, canResize: N = !0, children: y, dividerClassName: P, drawerBreakpoint: _, drawerClassNames: i, drawerMaxWidth: b = te, expandedBreakpoint: $, expandOnHover: j = !0, initialMode: C, initialWidth: x = 256, maxWith: s = 300, minWith: a = 240, mode: U = "auto", separatorClassName: D, style: L, theme: E, triggerClassName: X, wrapperClassName: O }) => {
+  const t = Z(U, $, _, C), [R, v] = M(!1), [S, W] = M(null), [z, T] = M(null), u = t === "drawer" ? "drawer" : z ?? t, n = m(null), r = m(null), w = m(!1), H = m(!1);
   f(() => {
-    if (r !== "drawer") return;
-    const t = () => {
-      C(window.innerWidth);
+    if (t !== "drawer") return;
+    const e = () => {
+      W(window.innerWidth);
     };
-    return t(), window.addEventListener("resize", t), () => {
-      window.removeEventListener("resize", t);
+    return e(), window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
     };
-  }, [r]);
-  const p = l((t) => {
+  }, [t]);
+  const g = p((e) => {
     if (!w.current) {
       n.current && (n.current.style.opacity = "0");
       return;
     }
-    let c = t.clientX;
-    c < a && (c = a), c > s && (c = s), e.current && n.current && (e.current.style.width = `${c}px`, n.current.classList.add("opacity-100"));
-  }, [s, a]), h = l(() => {
-    w.current = !1, n.current && n.current.classList.remove("opacity-100"), e.current && e.current.classList.remove("transition-none"), document.body.style.userSelect = "", document.body.style.cursor = "", document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", h);
-  }, [p]), U = l((t) => {
-    t.preventDefault(), t.stopPropagation(), w.current = !0, e.current && e.current.classList.add("transition-none"), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", document.addEventListener("mousemove", p), document.addEventListener("mouseup", h);
-  }, [p, h]);
+    let c = e.clientX;
+    c < a && (c = a), c > s && (c = s), r.current && n.current && (r.current.style.width = `${c}px`, n.current.classList.add("opacity-100"));
+  }, [s, a]), V = p(() => {
+    w.current = !1, n.current && n.current.classList.remove("opacity-100"), r.current && r.current.classList.remove("transition-none"), document.body.style.userSelect = "", document.body.style.cursor = "", document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", V);
+  }, [g]), q = (e) => {
+    e.preventDefault(), e.stopPropagation(), w.current = !0, r.current && r.current.classList.add("transition-none"), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", document.addEventListener("mousemove", g), document.addEventListener("mouseup", V);
+  };
   f(() => {
-    r !== "expanded" && e.current && (e.current.style.width = "");
-  }, [r]), f(() => {
-    r !== "drawer" && v(!1);
-  }, [r]), f(() => {
-    if (S.current || r !== "expanded" || !e.current) return;
-    const t = Math.min(Math.max(D, a), s);
-    e.current.style.width = `${t}px`, S.current = !0;
+    u !== "expanded" && r.current && (r.current.style.width = "");
+  }, [u]), f(() => {
+    t !== "drawer" && v(!1), T(null);
+  }, [t]), f(() => {
+    if (H.current || u !== "expanded" || !r.current) return;
+    const e = Math.min(Math.max(x, a), s);
+    r.current.style.width = `${e}px`, H.current = !0;
   }, [
-    D,
+    x,
     s,
     a,
-    r
+    u
   ]);
-  const X = l(() => {
+  const B = () => {
     v(!0);
-  }, []), y = l(() => {
+  }, h = p(() => {
     v(!1);
-  }, []);
-  if (r === "drawer") return /* @__PURE__ */ k(Q, { children: [/* @__PURE__ */ o(B, {
+  }, []), G = p(() => {
+    T((e) => (e ?? t) === "collapsed" ? "expanded" : "collapsed");
+  }, [t]);
+  if (t === "drawer") return /* @__PURE__ */ F(re, { children: [/* @__PURE__ */ o(Q, {
     isOpen: R,
-    onClick: X,
-    className: j
-  }), /* @__PURE__ */ o(G, {
+    onClick: B,
+    className: X
+  }), /* @__PURE__ */ o(Y, {
     isOpen: R,
-    onClose: y,
+    onClose: h,
     position: "left",
-    defaultWidth: O !== null ? Math.min(O, x) : x,
-    theme: M,
+    defaultWidth: S !== null ? Math.min(S, b) : b,
+    theme: E,
     classNames: {
-      ...u,
-      root: i("z-[60]", u?.root),
-      panel: i(H({ mode: "expanded" }), "h-full border-r-0", E, u?.panel),
-      content: i("gap-0", u?.content)
+      ...i,
+      root: l("z-60", i?.root),
+      panel: l(A({ mode: "expanded" }), "h-full border-r-0", O, i?.panel),
+      content: l("gap-0", i?.content)
     },
-    children: /* @__PURE__ */ o(z.Provider, {
+    children: /* @__PURE__ */ o(k.Provider, {
       value: {
         mode: "expanded",
         isCollapsed: !1,
         expandOnHover: !1,
         animateOnHover: !1,
-        separatorClassName: g,
-        closeDrawer: y
+        separatorClassName: D,
+        closeDrawer: h,
+        canToggle: !1,
+        toggleMode: () => {
+        }
       },
       children: /* @__PURE__ */ o("div", {
         className: "konstruct-sidebar group/sidebar flex flex-col flex-1 min-h-0",
         "data-mode": "expanded",
         style: L,
-        children: b
+        children: y
       })
     })
   })] });
-  const d = r, W = F && d === "expanded", q = {
+  const d = z ?? t, J = N && d === "expanded", K = {
     mode: d,
     isCollapsed: d === "collapsed",
-    expandOnHover: T,
-    animateOnHover: A,
-    separatorClassName: g,
-    closeDrawer: y
+    expandOnHover: j,
+    animateOnHover: I,
+    separatorClassName: D,
+    closeDrawer: h,
+    canToggle: !0,
+    toggleMode: G
   };
-  return /* @__PURE__ */ o(z.Provider, {
-    value: q,
-    children: /* @__PURE__ */ k("aside", {
-      ref: e,
-      className: i("konstruct-sidebar", H({
+  return /* @__PURE__ */ o(k.Provider, {
+    value: K,
+    children: /* @__PURE__ */ F("aside", {
+      ref: r,
+      className: l("konstruct-sidebar", A({
         mode: d,
-        className: E
+        className: O
       })),
-      "data-theme": M,
+      "data-theme": E,
       "data-mode": d,
       style: L,
-      children: [b, W && /* @__PURE__ */ o("div", {
+      children: [y, J && /* @__PURE__ */ o("div", {
         ref: n,
-        className: i(K({ className: I })),
-        onMouseDown: U
+        className: l(ee({ className: P })),
+        onMouseDown: q
       })]
     })
   });
 };
-Z.displayName = "Sidebar.Wrapper";
+ne.displayName = "Sidebar.Wrapper";
 export {
-  Z as Wrapper
+  ne as Wrapper
 };