@konstructio/ui 0.1.2-alpha.98 → 0.1.3

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

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

package/dist/components/Sheet/Sheet.js

@@ -0,0 +1,174 @@
+"use client";
+import { a as K, o as V, r as J, s as Q, t as U } from "../../dist-DWopnVS-.js";
+import { t as s } from "../../utils-DnIJruo0.js";
+import { shouldDismissSheet as W } from "./utils/index.js";
+import { useCallback as X, useRef as g, useState as b } from "react";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { AnimatePresence as A, motion as d, useDragControls as Y, useReducedMotion as Z } from "motion/react";
+var T = {
+  duration: 0.2,
+  ease: "easeOut"
+}, k = {
+  duration: 0.6,
+  ease: [
+    0.4,
+    0,
+    0.2,
+    1
+  ]
+}, u = "100%", w = 0.05, ee = {
+  bounceStiffness: 500,
+  bounceDamping: 40
+}, te = {
+  bounceStiffness: 1e4,
+  bounceDamping: 1e3
+}, ae = {
+  enter: (n) => ({
+    opacity: 0,
+    x: n > 0 ? u : `-${u}`
+  }),
+  center: {
+    opacity: 1,
+    x: 0
+  },
+  exit: (n) => ({
+    opacity: 0,
+    x: n > 0 ? `-${u}` : u
+  })
+}, ne = ({ isOpen: n, onClose: v, title: C, hideTitle: E = !1, leading: I, position: a = "bottom", step: r = 0, className: P, bodyClassName: O, headerClassName: _, titleClassName: H, theme: F, children: M }) => {
+  const o = Z(), x = Y(), m = g(null), c = g(null), l = g(null), [z, f] = b("auto"), [G, y] = b(!1), [h, j] = b({
+    step: r,
+    direction: 1
+  });
+  h.step !== r && j({
+    step: r,
+    direction: r > h.step ? 1 : -1
+  });
+  const { direction: S } = h, R = a === "bottom" ? "100%" : "-100%", L = o ? {
+    initial: !1,
+    animate: { y: 0 }
+  } : {
+    initial: { y: R },
+    animate: { y: 0 },
+    exit: { y: R }
+  }, $ = a === "bottom" ? {
+    top: w,
+    bottom: 1
+  } : {
+    top: 1,
+    bottom: w
+  }, D = (t) => {
+    t.pointerType === "mouse" && t.button !== 0 || x.start(t);
+  }, q = (t, i) => {
+    W({
+      offset: i.offset.y,
+      velocity: i.velocity.y,
+      panelHeight: m.current?.offsetHeight ?? 0,
+      position: a
+    }) && v();
+  }, N = /* @__PURE__ */ e("div", {
+    "aria-hidden": "true",
+    "data-sheet-handle": "",
+    className: s("flex shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing", a === "bottom" ? "pb-2" : "pt-2"),
+    onPointerDown: D,
+    children: /* @__PURE__ */ e("div", { className: "h-1 w-10 rounded-full bg-slate-300 dark:bg-metal-600" })
+  }), B = X((t) => {
+    if (c.current?.disconnect(), c.current = null, l.current !== null && (cancelAnimationFrame(l.current), l.current = null), !t) {
+      y(!1), f("auto");
+      return;
+    }
+    f(t.getBoundingClientRect().height), typeof ResizeObserver < "u" && (c.current = new ResizeObserver(([i]) => {
+      i && f(i.contentRect.height);
+    }), c.current.observe(t)), l.current = requestAnimationFrame(() => {
+      y(!0);
+    });
+  }, []);
+  return /* @__PURE__ */ e(U, {
+    open: n,
+    onOpenChange: (t) => !t && v(),
+    children: /* @__PURE__ */ e(A, { children: n && /* @__PURE__ */ e(V, {
+      forceMount: !0,
+      children: /* @__PURE__ */ p("div", {
+        "data-theme": F,
+        className: "contents",
+        children: [/* @__PURE__ */ e(K, {
+          asChild: !0,
+          forceMount: !0,
+          children: /* @__PURE__ */ e(d.div, {
+            className: "fixed inset-0 z-50 bg-black/55",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: T
+          })
+        }), /* @__PURE__ */ e(J, {
+          asChild: !0,
+          forceMount: !0,
+          onOpenAutoFocus: (t) => {
+            t.preventDefault(), m.current?.focus();
+          },
+          children: /* @__PURE__ */ p(d.div, {
+            ref: m,
+            tabIndex: -1,
+            className: s("konstruct-sheet fixed inset-x-0 z-50 flex max-h-[calc(100dvh-4rem)] flex-col", "bg-white text-slate-800 shadow-xl outline-none", "dark:bg-metal-800 dark:text-metal-50", a === "bottom" ? "bottom-0 rounded-t-lg pt-2 pb-[calc(1rem+env(safe-area-inset-bottom))]" : "top-0 rounded-b-lg pb-2 pt-[calc(1rem+env(safe-area-inset-top))]", P),
+            "data-position": a,
+            "data-step": r,
+            transition: T,
+            drag: "y",
+            dragListener: !1,
+            dragControls: x,
+            dragConstraints: {
+              top: 0,
+              bottom: 0
+            },
+            dragElastic: $,
+            dragMomentum: !1,
+            dragTransition: o ? te : ee,
+            onDragEnd: q,
+            ...L,
+            children: [
+              a === "bottom" && N,
+              /* @__PURE__ */ p("div", {
+                className: s("flex min-h-9 shrink-0 touch-none items-center gap-2 px-6 pb-2", _, E && "sr-only"),
+                onPointerDown: D,
+                children: [I, /* @__PURE__ */ e(Q, {
+                  className: s("text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-metal-400", H),
+                  children: C
+                })]
+              }),
+              /* @__PURE__ */ e(d.div, {
+                className: s("flex min-h-0 flex-col overflow-y-auto overflow-x-hidden", O),
+                animate: { height: z },
+                transition: o || !G ? { duration: 0 } : k,
+                children: /* @__PURE__ */ e("div", {
+                  ref: B,
+                  className: "relative",
+                  children: /* @__PURE__ */ e(A, {
+                    mode: "popLayout",
+                    initial: !1,
+                    custom: S,
+                    children: /* @__PURE__ */ e(d.div, {
+                      custom: S,
+                      className: "flex w-full flex-col",
+                      variants: o ? void 0 : ae,
+                      initial: o ? !1 : "enter",
+                      animate: "center",
+                      exit: o ? void 0 : "exit",
+                      transition: k,
+                      children: M
+                    }, r)
+                  })
+                })
+              }),
+              a === "top" && N
+            ]
+          })
+        })]
+      })
+    }) })
+  });
+};
+ne.displayName = "KonstructSheet";
+export {
+  ne as Sheet
+};

package/dist/components/Sheet/utils/index.js

@@ -0,0 +1,10 @@
+var I = 0.25, i = 500;
+function c({ offset: e, velocity: n, panelHeight: o, position: S }) {
+  const s = S === "bottom" ? 1 : -1, t = e * s, r = n * s;
+  return t <= 0 ? !1 : t > o * 0.25 || r > 500;
+}
+export {
+  I as DISMISS_DISTANCE_RATIO,
+  i as DISMISS_VELOCITY,
+  c as shouldDismissSheet
+};

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 { 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 { 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 { 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 { Navigation as m } from "./components/Navigation/Navigation.js";
+import { NavigationGroup as e } from "./components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as g } from "./components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as n } from "./components/NavigationSeparator/NavigationSeparator.js";
+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.Navigation = n;
-o.NavigationGroup = m;
-o.NavigationOption = p;
-o.NavigationSeparator = e;
+o.CollapseTrigger = i;
+o.Footer = a;
+o.Label = t;
+o.Logo = p;
+o.Navigation = m;
+o.NavigationGroup = e;
+o.NavigationOption = g;
+o.NavigationSeparator = n;
 export {
-  i as Footer,
-  a as Label,
-  t as Logo,
-  n as Navigation,
-  m as NavigationGroup,
-  p as NavigationOption,
-  e as NavigationSeparator,
+  i as CollapseTrigger,
+  a as Footer,
+  t as Label,
+  p as Logo,
+  m as Navigation,
+  e as NavigationGroup,
+  g as NavigationOption,
+  n as NavigationSeparator,
   o as Sidebar
 };

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

@@ -1,4 +1,4 @@
-import { t as a } from "../../dist-Bcn6lMQe.js";
+import { t as a } from "../../dist-B9GE4SXf.js";
 var e = a([
   "flex",
   "flex-col",

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

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

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

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

package/dist/components/Sidebar/components/Footer/Footer.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../utils-COaoD3PI.js";
+import { t } from "../../../../utils-DnIJruo0.js";
 import { footerVariants as a } from "./Footer.variants.js";
 import { jsx as e } from "react/jsx-runtime";
 var m = ({ className: o, children: r }) => /* @__PURE__ */ e("footer", {

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

@@ -1,4 +1,4 @@
-import { t } from "../../../../dist-Bcn6lMQe.js";
+import { t } from "../../../../dist-B9GE4SXf.js";
 var e = t([
   "p-2",
   "pb-5",

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

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

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

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../dist-Bcn6lMQe.js";
+import { t as e } from "../../../../dist-B9GE4SXf.js";
 var r = e([
   "fixed",
   "top-4",

package/dist/components/Sidebar/components/Label/Label.js

@@ -1,5 +1,5 @@
-import { t as p } from "../../../../utils-COaoD3PI.js";
-import { Typography as l } from "../../../Typography/Typography.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { t as l } from "../../../../utils-DnIJruo0.js";
 import { useSidebarContext as m } from "../../contexts/SidebarContext.js";
 import { useNavigationOptionContext as f } from "../NavigationOption/NavigationOption.context.js";
 import { useEffect as b } from "react";
@@ -18,13 +18,13 @@ var d = ({ children: o, className: i, variant: a = "body1" }) => {
   ]), e ? /* @__PURE__ */ r("span", {
     className: "sr-only",
     children: o
-  }) : n && !s ? null : n && s ? /* @__PURE__ */ r(l, {
+  }) : n && !s ? null : n && s ? /* @__PURE__ */ r(p, {
     variant: a,
-    className: p("text-inherit", "absolute top-1/2 -translate-y-1/2 left-full ml-2", "overflow-hidden whitespace-nowrap", "rounded-r-xl bg-kubefirst-dark-blue-900 py-2 px-3", "shadow-lg", "max-w-0 opacity-0 invisible", "group-hover/sidebar-option:max-w-48 group-hover/sidebar-option:opacity-100 group-hover/sidebar-option:visible", u && "transition-[max-width,opacity] duration-200 ease-out", i),
+    className: l("text-inherit", "absolute top-1/2 -translate-y-1/2 left-full ml-2", "overflow-hidden whitespace-nowrap", "rounded-r-xl bg-kubefirst-dark-blue-900 py-2 px-3", "shadow-lg", "max-w-0 opacity-0 invisible", "group-hover/sidebar-option:max-w-48 group-hover/sidebar-option:opacity-100 group-hover/sidebar-option:visible", u && "transition-[max-width,opacity] duration-200 ease-out", i),
     children: o
-  }) : /* @__PURE__ */ r(l, {
+  }) : /* @__PURE__ */ r(p, {
     variant: a,
-    className: p("text-inherit", i),
+    className: l("text-inherit", i),
     children: o
   });
 };

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

@@ -1,17 +1,21 @@
-import { t as a } from "../../../../utils-COaoD3PI.js";
-import { useSidebarContext as e } from "../../contexts/SidebarContext.js";
+import { t as e } from "../../../../utils-DnIJruo0.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-Bcn6lMQe.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/Navigation/Navigation.js

@@ -1,9 +1,9 @@
-import { t as c } from "../../../../utils-COaoD3PI.js";
+import { t as c } from "../../../../utils-DnIJruo0.js";
 import { useSidebarContext as d } from "../../contexts/SidebarContext.js";
-import { NavigationTitle as y } from "../NavigationTitle/NavigationTitle.js";
 import { NavigationGroup as u } from "../NavigationGroup/NavigationGroup.js";
-import { NavigationOption as C } from "../NavigationOption/NavigationOption.js";
+import { NavigationOption as y } from "../NavigationOption/NavigationOption.js";
 import { NavigationSeparator as p } from "../NavigationSeparator/NavigationSeparator.js";
+import { NavigationTitle as C } from "../NavigationTitle/NavigationTitle.js";
 import { navigationVariants as S } from "./Navigation.variants.js";
 import { Children as b, Fragment as h, isValidElement as s } from "react";
 import { jsx as n } from "react/jsx-runtime";
@@ -24,9 +24,9 @@ var v = (r) => s(r) && r.type === u, x = (r) => s(r) && r.type === p, o = ({ cla
 };
 o.displayName = "KonstructSidebarNavigation";
 o.NavigationGroup = u;
-o.NavigationOption = C;
+o.NavigationOption = y;
 o.NavigationSeparator = p;
-o.NavigationTitle = y;
+o.NavigationTitle = C;
 export {
   o as Navigation
 };

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

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-Bcn6lMQe.js";
+import { t as a } from "../../../../dist-B9GE4SXf.js";
 var l = a([
   "flex",
   "flex-1",

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js

@@ -1,20 +1,36 @@
-import { t as m } from "../../../../utils-COaoD3PI.js";
-import { useSidebarContext as l } from "../../contexts/SidebarContext.js";
-import { NavigationTitle as p } from "../NavigationTitle/NavigationTitle.js";
-import { navigationGroupsVariants as u } from "./NavigationGroup.variants.js";
-import { Fragment as c, jsx as a, jsxs as f } from "react/jsx-runtime";
-var N = ({ children: o, title: r, className: i, titleClassName: t, isVisible: n = !0, ...s }) => {
-  const { isCollapsed: e } = l();
-  return n ? /* @__PURE__ */ f(c, { children: [r && !e ? /* @__PURE__ */ a(p, {
-    title: r,
-    className: t,
-    ...s
-  }) : null, /* @__PURE__ */ a("ul", {
-    className: m(u({ className: i })),
-    children: o
-  })] }) : null;
+import { Collapse as x } from "../../../Collapse/Collapse.js";
+import { t as I } from "../../../../utils-DnIJruo0.js";
+import { useSidebarContext as O } from "../../contexts/SidebarContext.js";
+import { NavigationTitle as G } from "../NavigationTitle/NavigationTitle.js";
+import { navigationGroupsVariants as S } from "./NavigationGroup.variants.js";
+import { useId as j, useState as C } from "react";
+import { Fragment as F, jsx as t, jsxs as b } from "react/jsx-runtime";
+var k = ({ children: m, title: n, className: p, titleClassName: c, isVisible: u = !0, isCollapsible: e = !1, isOpen: r, defaultOpen: d = !0, onOpenChange: g, ...f }) => {
+  const [v, N] = C(d), { isCollapsed: T } = O(), s = j();
+  if (!u) return null;
+  const i = !!n && !T, a = i && e, o = r ?? v, h = () => {
+    r === void 0 && N(!o), g?.(!o);
+  }, l = /* @__PURE__ */ t("ul", {
+    className: I(S({ className: p })),
+    children: m
+  });
+  return /* @__PURE__ */ b(F, { children: [i ? /* @__PURE__ */ t(G, {
+    title: n,
+    className: c,
+    ...a ? {
+      isOpen: o,
+      controlsId: s,
+      onToggle: h
+    } : {},
+    ...f
+  }) : null, e ? /* @__PURE__ */ t(x, {
+    id: s,
+    isOpen: !a || o,
+    keepMounted: !0,
+    children: l
+  }) : l] });
 };
-N.displayName = "KonstructSidebarNavigationGroup";
+k.displayName = "KonstructSidebarNavigationGroup";
 export {
-  N as NavigationGroup
+  k as NavigationGroup
 };

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

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-Bcn6lMQe.js";
+import { t as a } from "../../../../dist-B9GE4SXf.js";
 var r = a([
   "flex",
   "flex-col",