@konstructio/ui 0.1.2-alpha.9 → 0.1.2-alpha.94

package/dist/components/Select/components/ListItem/ListItem.js

@@ -0,0 +1,64 @@
+import { t as s } from "../../../../utils-COaoD3PI.js";
+import { Typography as y } from "../../../Typography/Typography.js";
+import { useSelectContext as I } from "../../contexts/select.hook.js";
+import { listItemVariants as L } from "./ListItem.variants.js";
+import { useCallback as d, useRef as V } from "react";
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+function j(c, r) {
+  const i = r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
+  return c.split(o).map((a, t) => a.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ n("mark", {
+    className: "bg-transparent font-semibold text-metal-800 dark:text-metal-50",
+    children: a
+  }, t) : /* @__PURE__ */ n("span", { children: a }, t));
+}
+var K = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: x, toggleOpen: g } = I(), b = V(null), f = d((e) => {
+    x(e.value, o), g(!1);
+  }, [x, g]), N = d((e, l) => {
+    e.key === "Enter" && (e.stopPropagation(), f(l));
+  }, [f]), w = d(({ label: e, rightComponent: l, subLabel: p, rightComponentClassName: C }) => {
+    if (c) return /* @__PURE__ */ n(y, {
+      variant: "body2",
+      className: "text-zinc-800 dark:text-metal-50 italic",
+      children: e
+    });
+    if (typeof e != "string") return e;
+    const k = h && m.length > 0 ? j(e, m) : [e];
+    return /* @__PURE__ */ u(y, {
+      variant: "body2",
+      className: "text-zinc-700 dark:text-metal-50 font-medium",
+      children: [l ? /* @__PURE__ */ u("span", {
+        className: s("flex gap-2 items-center", C),
+        children: [
+          k,
+          " ",
+          l
+        ]
+      }) : k, p ? /* @__PURE__ */ n("span", {
+        className: s("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
+        children: p
+      }) : null]
+    });
+  }, [h, m]);
+  return /* @__PURE__ */ u("li", {
+    ref: b,
+    role: "option",
+    "data-action": "false",
+    className: s(L({ className: i })),
+    tabIndex: 0,
+    onClick: (e) => {
+      r && (f(t), e.stopPropagation());
+    },
+    onKeyDown: (e) => N(e, t),
+    children: [t.leftIcon ? /* @__PURE__ */ n("span", {
+      className: s("w-4 h-4 flex justify-center", {
+        "items-center": !t.subLabel,
+        "items-baseline -tranmetal-y-2": !!t.subLabel
+      }, t.leftIconClassName),
+      children: t.leftIcon
+    }) : null, w(t)]
+  });
+};
+export {
+  K as ListItem
+};

package/dist/components/{Dropdown → Select}/components/ListItem/ListItem.variants.js

@@ -1,8 +1,8 @@
-import { c as r } from "../../../../index-D29mdTf5.js";
-const t = r([
+import { t as r } from "../../../../dist-Bcn6lMQe.js";
+var a = r([
   "cursor-pointer",
-  "py-2",
-  "px-2",
+  "py-1.5",
+  "px-6",
   "h-full",
   "focus-visible:outline-none",
   "m-0",
@@ -12,11 +12,12 @@ const t = r([
   "gap-3",
   "transition-bg",
   "duration-250",
+  "min-h-10",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
-  "dark:hover:bg-slate-700",
-  "dark:focus:bg-slate-700"
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
 ]);
 export {
-  t as listItemVariants
+  a as listItemVariants
 };

package/dist/components/Select/components/Wrapper.js

@@ -0,0 +1,4 @@
+import { t as p } from "../../../Wrapper-DimnwFZe.js";
+export {
+  p as Wrapper
+};

package/dist/components/Select/components/index.js

@@ -0,0 +1,10 @@
+import { t as o } from "../../../Wrapper-DimnwFZe.js";
+import { t as i } from "../../../AdditionalOptions-UEegkZqG.js";
+import { EmptyList as p } from "./EmptyList.js";
+import { List as a } from "./List/List.js";
+export {
+  i as AdditionalOptions,
+  p as EmptyList,
+  a as List,
+  o as Wrapper
+};

package/dist/components/Select/constants/index.js

@@ -0,0 +1,6 @@
+import { DEFAULT_LIST_SIZE as r } from "./pagination.js";
+import { ITEM_HEIGHT_PX as E } from "./list.js";
+export {
+  r as DEFAULT_LIST_SIZE,
+  E as ITEM_HEIGHT_PX
+};

package/dist/components/Select/constants/list.js

@@ -0,0 +1,4 @@
+var r = 40;
+export {
+  r as ITEM_HEIGHT_PX
+};

package/dist/components/Select/constants/pagination.js

@@ -0,0 +1,4 @@
+var r = 10;
+export {
+  r as DEFAULT_LIST_SIZE
+};

package/dist/components/Select/contexts/index.js

@@ -0,0 +1,6 @@
+import { useSelectContext as o } from "./select.hook.js";
+import { SelectProvider as t } from "./select.provider.js";
+export {
+  t as SelectProvider,
+  o as useSelectContext
+};

package/dist/components/Select/contexts/select.context.js

@@ -0,0 +1,36 @@
+import { createContext as e } from "react";
+var t = e({
+  highlightSearchEnabled: !1,
+  isOpen: !1,
+  searchTerm: "",
+  value: void 0,
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  isTyping: !1,
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
+  },
+  setSearchTerm() {
+    throw new Error("setSearchTerm function must be overridden");
+  },
+  setValue() {
+    throw new Error("setValue function must be overridden");
+  },
+  toggleOpen() {
+    throw new Error("toggleOpen function must be overridden");
+  }
+});
+export {
+  t as SelectContext
+};

package/dist/components/Select/contexts/select.hook.js

@@ -0,0 +1,10 @@
+import { SelectContext as t } from "./select.context.js";
+import { useContext as o } from "react";
+var c = () => {
+  const e = o(t);
+  if (!e) throw new Error("useSelectContext must be used within a SelectProvider");
+  return e;
+};
+export {
+  c as useSelectContext
+};

package/dist/components/Select/contexts/select.provider.js

@@ -0,0 +1,48 @@
+import { useToggle as L } from "../../../hooks/useToggle.js";
+import { SelectContext as N } from "./select.context.js";
+import { useCallback as f, useEffect as T, useRef as p, useState as e } from "react";
+import { jsx as O } from "react/jsx-runtime";
+var c = 1, R = 300, V = ({ children: v, value: C, name: i, highlightSearch: E = !1, options: n, onChange: a, onBlur: u }) => {
+  const [S, l] = e(n), d = p(E), [F, g] = L(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = p(void 0), D = f((r, m) => {
+    m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: {
+      value: r,
+      name: i ?? ""
+    } }), u?.(), t.current = setTimeout(() => {
+      h(!1);
+    }, R);
+  }, [
+    a,
+    i,
+    u
+  ]), G = f((r) => {
+    g(r), o(!0), s(c);
+  }, [g]);
+  return T(() => {
+    l(n);
+  }, [n.length]), T(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ O(N.Provider, {
+    value: {
+      highlightSearchEnabled: d.current,
+      isOpen: F,
+      searchTerm: P,
+      value: C,
+      canFilter: b,
+      canContinueFetching: A,
+      page: _,
+      options: S,
+      isTyping: y,
+      setOptions: l,
+      setPage: s,
+      setCanContinueFetching: o,
+      setCanFilter: x,
+      setSearchTerm: I,
+      setValue: D,
+      toggleOpen: G
+    },
+    children: v
+  });
+};
+export {
+  V as SelectProvider
+};

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

@@ -0,0 +1,41 @@
+import { useSelectContext as k } from "../contexts/select.hook.js";
+import { useEffect as a, useRef as b } from "react";
+var A = ({ searchable: o, ulRef: n, wrapperInputRef: e, filteredOptions: f }) => {
+  const r = b(0), { isOpen: s } = k();
+  a(() => {
+    const g = n.current?.querySelectorAll("li") ?? [], t = Array.from(g).filter((c) => c.getAttribute("data-action") !== "true"), u = new AbortController(), i = () => {
+      r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
+    }, l = () => {
+      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
+    };
+    return n.current?.addEventListener("keydown", (c) => {
+      switch (c.preventDefault(), c.key) {
+        case "ArrowDown":
+          i();
+          break;
+        case "Tab":
+          c.shiftKey ? l() : i();
+          break;
+        case "ArrowUp":
+          r.current === 0 ? e.current?.focus() : l();
+          break;
+        case "Enter":
+          t[r.current]?.click();
+          break;
+      }
+    }, { signal: u.signal }), () => {
+      u.abort();
+    };
+  }, [
+    n,
+    r,
+    e,
+    o,
+    f.length
+  ]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
+};
+export {
+  A as useNavigationUlList
+};

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

@@ -0,0 +1,67 @@
+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);
+    };
+    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);
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [n, t]), c(() => {
+    const e = new AbortController();
+    return a.current?.addEventListener("keydown", (s) => {
+      if (s.key === "ArrowDown") {
+        const o = f.current?.querySelector("li");
+        o && o.focus();
+      }
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [a, f]), c(() => {
+    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?.());
+    }), () => {
+      e.abort();
+    };
+  }, [
+    n,
+    t,
+    v,
+    g,
+    i
+  ]), {
+    wrapperRef: t,
+    wrapperInputRef: a,
+    handleOpen: w(() => {
+      n(!0), requestAnimationFrame(() => r?.current?.focus());
+    }, [r, n])
+  };
+};
+export {
+  h as useSelect
+};

package/dist/components/Sidebar/Sidebar.js

@@ -1,25 +1,29 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Wrapper as t } from "./components/Wrapper/Wrapper.js";
-import { Footer as a } from "./components/Footer/Footer.js";
-import { Logo as p } from "./components/Logo/Logo.js";
-import { Navigation as m } from "./components/Navigation/Navigation.js";
-import { NavigationGroup as n } from "./components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as g } from "./components/NavigationOption/NavigationOption.js";
+"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";
-const o = (r) => /* @__PURE__ */ i(t, { ...r });
+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 });
 o.displayName = "KonstructSidebar";
-o.Footer = a;
-o.Logo = p;
-o.Navigation = m;
-o.NavigationGroup = n;
-o.NavigationOption = g;
+o.Footer = i;
+o.Label = a;
+o.Logo = t;
+o.Navigation = n;
+o.NavigationGroup = m;
+o.NavigationOption = p;
 o.NavigationSeparator = e;
 export {
-  a as Footer,
-  p as Logo,
-  m as Navigation,
-  n as NavigationGroup,
-  g as NavigationOption,
+  i as Footer,
+  a as Label,
+  t as Logo,
+  n as Navigation,
+  m as NavigationGroup,
+  p as NavigationOption,
   e as NavigationSeparator,
   o as Sidebar
 };

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

@@ -1,19 +1,19 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
-  "duration-200",
-  "ease-linear",
+import { t as a } from "../../dist-Bcn6lMQe.js";
+var e = a([
   "flex",
   "flex-col",
-  "flex-shrink-0",
+  "shrink-0",
   "group/sidebar",
   "h-full",
-  "px-4",
   "relative",
-  "transition-all",
-  "w-[72px]",
-  "md:w-[256px]",
   "bg-kubefirst-dark-blue-900"
-]), o = r([
+], {
+  variants: { mode: {
+    expanded: ["w-64"],
+    collapsed: ["w-18"]
+  } },
+  defaultVariants: { mode: "expanded" }
+}), o = a([
   "absolute",
   "top-0",
   "right-0",
@@ -21,7 +21,7 @@ const e = r([
   "opacity-0",
   "group-hover/sidebar:opacity-100",
   "cursor-col-resize",
-  "w-[2px]",
+  "w-0.5",
   "shadow",
   "shadow-slate-200",
   "bg-slate-200"

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

@@ -1,8 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as e } from "../../../../utils/index.js";
-import { footerVariants as m } from "./Footer.variants.js";
-const a = ({ className: o, children: r }) => /* @__PURE__ */ t("footer", { className: e(m({ className: o })), children: r });
-a.displayName = "KonstructSidebarFooter";
+import { t } from "../../../../utils-COaoD3PI.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", {
+  className: t(a({ className: o })),
+  children: r
+});
+m.displayName = "KonstructSidebarFooter";
 export {
-  a as Footer
+  m as Footer
 };

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-D29mdTf5.js";
-const e = t([
+import { t } from "../../../../dist-Bcn6lMQe.js";
+var e = t([
   "p-2",
   "pb-5",
   "text-white",

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

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

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

@@ -0,0 +1,22 @@
+import { t as e } from "../../../../dist-Bcn6lMQe.js";
+var r = e([
+  "fixed",
+  "top-4",
+  "left-4",
+  "z-30",
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "w-10",
+  "h-10",
+  "rounded-md",
+  "bg-kubefirst-dark-blue-900",
+  "text-white",
+  "cursor-pointer",
+  "focus:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-white/40"
+]);
+export {
+  r as hamburgerTriggerVariants
+};

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

@@ -0,0 +1,34 @@
+import { t as p } from "../../../../utils-COaoD3PI.js";
+import { Typography as l } from "../../../Typography/Typography.js";
+import { useSidebarContext as m } from "../../contexts/SidebarContext.js";
+import { useNavigationOptionContext as f } from "../NavigationOption/NavigationOption.context.js";
+import { useEffect as b } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var d = ({ children: o, className: i, variant: a = "body1" }) => {
+  const { isCollapsed: n, expandOnHover: s, animateOnHover: u } = m(), t = f(), e = t?.hasOwnTooltip ?? !1;
+  return b(() => {
+    if (!(!e || !t))
+      return t.registerTooltipContent(o), () => {
+        t.registerTooltipContent(null);
+      };
+  }, [
+    o,
+    e,
+    t
+  ]), e ? /* @__PURE__ */ r("span", {
+    className: "sr-only",
+    children: o
+  }) : n && !s ? null : n && s ? /* @__PURE__ */ r(l, {
+    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),
+    children: o
+  }) : /* @__PURE__ */ r(l, {
+    variant: a,
+    className: p("text-inherit", i),
+    children: o
+  });
+};
+d.displayName = "KonstructSidebarLabel";
+export {
+  d as Label
+};

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

@@ -1,8 +1,17 @@
-import { jsx as a } from "react/jsx-runtime";
-import { cn as m } from "../../../../utils/index.js";
-import { logoVariants as t } from "./Logo.variants.js";
-const s = ({ children: o, className: r }) => /* @__PURE__ */ a("header", { className: m(t({ className: r })), children: o });
-s.displayName = "KonstructSidebarLogo";
+import { t as a } from "../../../../utils-COaoD3PI.js";
+import { useSidebarContext as e } 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", {
+    "data-konstruct-sidebar-logo": "",
+    className: a(s({ className: r })),
+    onClick: () => t(),
+    children: o
+  });
+};
+m.displayName = "KonstructSidebarLogo";
 export {
-  s as Logo
+  m as Logo
 };

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

@@ -1,15 +1,19 @@
-import { c as p } from "../../../../index-D29mdTf5.js";
-const o = p([
-  "md:px-4",
-  "md:py-5",
+import { t as e } from "../../../../dist-Bcn6lMQe.js";
+var p = e([
+  "group-data-[mode=expanded]/sidebar:px-4",
+  "group-data-[mode=expanded]/sidebar:py-5",
   "flex",
   "flex-col",
   "justify-center",
+  "group-data-[mode=collapsed]/sidebar:items-center",
+  "group-data-[mode=collapsed]/sidebar:[&>a]:justify-center",
+  "group-data-[mode=collapsed]/sidebar:[&>p]:text-center",
+  "group-data-[mode=collapsed]/sidebar:[&>p]:pt-1",
   "gap-1",
   "group",
   "relative",
   "mb-8",
-  "[&>p]:pl-14",
+  "group-data-[mode=expanded]/sidebar:[&>p]:pl-14",
   "[&>p]:-mt-2",
   "[&>img]:pt-3",
   "[&>*>p]:absolute",
@@ -19,5 +23,5 @@ const o = p([
   "cursor-pointer"
 ]);
 export {
-  o as logoVariants
+  p as logoVariants
 };

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

@@ -1,19 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as r } from "../../../../utils/index.js";
-import { NavigationGroup as n } from "../NavigationGroup/NavigationGroup.js";
-import { NavigationOption as m } from "../NavigationOption/NavigationOption.js";
+import { t as c } from "../../../../utils-COaoD3PI.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 { NavigationSeparator as p } from "../NavigationSeparator/NavigationSeparator.js";
-import { NavigationTitle as v } from "../NavigationTitle/NavigationTitle.js";
-import { navigationVariants as N } from "./Navigation.variants.js";
-const i = ({
-  className: a,
-  children: o
-}) => /* @__PURE__ */ t("nav", { className: r(N({ className: a })), children: o });
-i.displayName = "KonstructSidebarNavigation";
-i.NavigationGroup = n;
-i.NavigationOption = m;
-i.NavigationSeparator = p;
-i.NavigationTitle = v;
+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";
+var v = (r) => s(r) && r.type === u, x = (r) => s(r) && r.type === p, o = ({ className: r, children: m }) => {
+  const { isCollapsed: N, separatorClassName: f } = d(), g = (() => {
+    if (!N) return m;
+    const l = b.toArray(m), t = [];
+    return l.forEach((a, i) => {
+      if (!s(a)) return;
+      const e = t[t.length - 1];
+      v(a) && e && v(e) && !x(e) && t.push(/* @__PURE__ */ n(p, { className: f }, `sidebar-auto-separator-${i}`)), t.push(a);
+    }), t.map((a, i) => /* @__PURE__ */ n(h, { children: a }, a.key ?? `sidebar-nav-child-${i}`));
+  })();
+  return /* @__PURE__ */ n("nav", {
+    className: c(S({ className: r })),
+    children: g
+  });
+};
+o.displayName = "KonstructSidebarNavigation";
+o.NavigationGroup = u;
+o.NavigationOption = C;
+o.NavigationSeparator = p;
+o.NavigationTitle = y;
 export {
-  i as Navigation
+  o as Navigation
 };

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

@@ -1,5 +1,12 @@
-import { c as a } from "../../../../index-D29mdTf5.js";
-const o = a(["flex", "flex-1", "w-full", "flex-col"]);
+import { t as a } from "../../../../dist-Bcn6lMQe.js";
+var l = a([
+  "flex",
+  "flex-1",
+  "w-full",
+  "flex-col",
+  "min-h-0",
+  "overflow-y-auto"
+]);
 export {
-  o as navigationVariants
+  l as navigationVariants
 };