@konstructio/ui 0.1.2-alpha.112 → 0.1.2-alpha.114

package/dist/components/RadioCard/RadioCard.js

@@ -1,21 +1,39 @@
 import { t as a } from "../../utils-DnIJruo0.js";
-import { Card as d } from "../Card/Card.js";
-import { Radio as l } from "../Radio/Radio.js";
-import { radioCardVariants as e } from "./RadioCard.variants.js";
-import { jsx as o } from "react/jsx-runtime";
-var f = ({ wrapperClassName: r, theme: i, labelWrapperClassName: t, checked: m, description: s, ...p }) => /* @__PURE__ */ o(d, {
-  "data-theme": i,
-  className: a(e({ className: r })),
-  wrapperClassName: a("w-max", r),
-  isActive: m,
-  children: /* @__PURE__ */ o(l, {
-    wrapperClassName: a("w-full h-full p-3 gap-3", t),
-    checked: m,
-    description: s,
-    ...p
-  })
-});
-f.displayName = "KonstructRadioCard";
+import { Badge as v } from "../Badge/Badge.js";
+import { Card as x } from "../Card/Card.js";
+import { Radio as h } from "../Radio/Radio.js";
+import { radioCardVariants as w } from "./RadioCard.variants.js";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+var b = ({ wrapperClassName: l, theme: p, labelWrapperClassName: d, checked: r, className: n, content: s, contentClassName: f, description: c, hideIndicator: u = !1, label: i, tag: m, ...C }) => {
+  const e = typeof s == "function" ? s(!!r) : s, N = m ? /* @__PURE__ */ t("span", {
+    className: "flex items-center gap-2",
+    children: [i, /* @__PURE__ */ o(v, {
+      variant: "info",
+      label: m
+    })]
+  }) : i;
+  return /* @__PURE__ */ t(x, {
+    "data-theme": p,
+    className: a(w({
+      hasContent: !!e,
+      className: l
+    })),
+    wrapperClassName: a("w-max", l),
+    isActive: r,
+    children: [/* @__PURE__ */ o(h, {
+      wrapperClassName: a("w-full h-full p-3 gap-3", d),
+      className: a(u && "hidden", n),
+      checked: r,
+      description: c,
+      label: N,
+      ...C
+    }), e ? /* @__PURE__ */ o("div", {
+      className: a("relative w-full px-3 pb-3", f),
+      children: e
+    }) : null]
+  });
+};
+b.displayName = "KonstructRadioCard";
 export {
-  f as RadioCard
+  b as RadioCard
 };

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,10 +1,16 @@
-import { t as r } from "../../dist-B9GE4SXf.js";
-var e = r([
+import { t } from "../../dist-B9GE4SXf.js";
+var e = t([
   "flex",
   "items-center",
   "p-0",
   "border"
-]);
+], {
+  variants: { hasContent: {
+    true: ["flex-col", "items-stretch"],
+    false: []
+  } },
+  defaultVariants: { hasContent: !1 }
+});
 export {
   e as radioCardVariants
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-import { t as R } from "../../dist-xCbHbMLA.js";
+import { t as R } from "../../dist-CK8FUUUn.js";
 import { t as r } from "../../utils-DnIJruo0.js";
 import { Radio as g } from "../Radio/Radio.js";
 import { radioGroupVariants as j } from "./RadioGroup.variants.js";

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
 import { t as e } from "../../utils-DnIJruo0.js";
-import { i as v, n as V, r as i, t as S } from "../../dist-CNui_Egg.js";
+import { i as v, n as V, r as i, t as S } from "../../dist-fPYIsxyx.js";
 import { rangeOutsideVariants as R, rangeVariants as j, thumbVariants as c, trackVariants as w } from "./Range.variants.js";
 import { forwardRef as y, useEffect as b, useImperativeHandle as k, useRef as C, useState as T } from "react";
 import { jsx as a, jsxs as s } from "react/jsx-runtime";

package/dist/components/Select/Select.js

@@ -1,7 +1,7 @@
 import { n as y, t as d } from "../../utils-DnIJruo0.js";
-import { t as M } from "../../Wrapper-MmlrJppS.js";
+import { t as M } from "../../Wrapper-BCi_pLOr.js";
 import { SelectProvider as S } from "./contexts/select.provider.js";
-import { n as b } from "../../AdditionalOptions-D3SZ2WFJ.js";
+import { n as b } from "../../AdditionalOptions-ClcR_Kf7.js";
 import { forwardRef as E, useId as G, useMemo as H } from "react";
 import { jsx as s, jsxs as P } from "react/jsx-runtime";
 var B = E(({ error: e, errorClassName: m, helperText: l, helperTextClassName: x, highlightSearch: h, id: u, mainWrapperClassName: I, name: r, value: g, options: t, onChange: v, onBlur: n, onValueChange: $, ...N }, O) => {

package/dist/components/Select/components/AdditionalOptions/AdditionalOptions.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../AdditionalOptions-D3SZ2WFJ.js";
+import { t } from "../../../../AdditionalOptions-ClcR_Kf7.js";
 export {
   t as AdditionalOptions
 };

package/dist/components/Select/components/List/List.js

@@ -1,20 +1,20 @@
 import { o as $ } from "../../../../rolldown-runtime-Dw9YIBcH.js";
 import { t as n } from "../../../../utils-DnIJruo0.js";
 import { t as R } from "../../../../Loading-u8hXrFJR.js";
-import { t as ee } from "../../../../debounce-BdyZeJQk.js";
-import { useSelectContext as te } from "../../contexts/select.hook.js";
-import { n as re, t as oe } from "../../../../AdditionalOptions-D3SZ2WFJ.js";
-import { listGroupLabelVariants as ae, listVariants as ne } from "./List.variants.js";
+import { useSelectContext as ee } from "../../contexts/select.hook.js";
+import { n as te, t as re } from "../../../../AdditionalOptions-ClcR_Kf7.js";
+import { listGroupLabelVariants as oe, listVariants as ae } from "./List.variants.js";
+import { t as ne } from "../../../../debounce-dMRJxNsT.js";
 import "../../constants/pagination.js";
 import "../../constants/list.js";
 import { useNavigationUlList as se } from "../../hooks/useNavigationList.js";
 import { ListItem as g } from "../ListItem/ListItem.js";
 import { forwardRef as ie, useEffect as le, useImperativeHandle as ce, useMemo as I, useRef as N, useState as ue } from "react";
 import { jsx as o, jsxs as O } from "react/jsx-runtime";
-var fe = /* @__PURE__ */ $(ee(), 1), ke = ie(({ additionalOptions: P, className: T, groupedOptions: l, id: j, inputRef: c, isLoading: M, itemClassName: u, labelledBy: S, loadingText: C, name: q, searchable: f = !1, listItemSecondRowClassName: p, wrapperInputRef: A, isInfiniteScrollEnabled: h, noOptionsText: E, onFetchMoreOptions: b, visibleItems: F }, U) => {
-  const m = N(null), L = N(null), [v, k] = ue(!1), { canContinueFetching: d, canFilter: y, isOpen: V, isTyping: G, options: H, page: w, searchTerm: a, setCanContinueFetching: z, setOptions: D, setPage: X } = te(), Z = F !== void 0 ? { maxHeight: F * 40 } : void 0;
+var fe = /* @__PURE__ */ $(ne(), 1), ke = ie(({ additionalOptions: P, className: T, groupedOptions: l, id: j, inputRef: c, isLoading: M, itemClassName: u, labelledBy: S, loadingText: C, name: q, searchable: f = !1, listItemSecondRowClassName: p, wrapperInputRef: A, isInfiniteScrollEnabled: h, noOptionsText: E, onFetchMoreOptions: b, visibleItems: F }, U) => {
+  const m = N(null), L = N(null), [v, k] = ue(!1), { canContinueFetching: d, canFilter: y, isOpen: V, isTyping: G, options: H, page: w, searchTerm: a, setCanContinueFetching: z, setOptions: D, setPage: X } = ee(), Z = F !== void 0 ? { maxHeight: F * 40 } : void 0;
   ce(U, () => m.current, [m]);
-  const s = l.length > 0 && re(l[0]), _ = f && y ? H.filter((e) => {
+  const s = l.length > 0 && te(l[0]), _ = f && y ? H.filter((e) => {
     const t = a.toLowerCase();
     return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
   }) : H, x = I(() => {
@@ -77,7 +77,7 @@ var fe = /* @__PURE__ */ $(ee(), 1), ke = ie(({ additionalOptions: P, className:
     title: q,
     role: "listbox",
     "aria-labelledby": S,
-    className: n(ne({ className: T })),
+    className: n(ae({ className: T })),
     style: Z,
     "data-state": V ? "open" : "closed",
     children: [
@@ -106,7 +106,7 @@ var fe = /* @__PURE__ */ $(ee(), 1), ke = ie(({ additionalOptions: P, className:
             role: "presentation",
             "aria-hidden": "true",
             "data-action": "true",
-            className: n(ae()),
+            className: n(oe()),
             children: e.groupLabel
           }), e.options.map((t) => /* @__PURE__ */ o(g, {
             className: n("select-none", u),
@@ -132,7 +132,7 @@ var fe = /* @__PURE__ */ $(ee(), 1), ke = ie(({ additionalOptions: P, className:
         onClick: (e) => e.stopPropagation(),
         children: /* @__PURE__ */ o(R, { className: "w-4 h-4 text-aurora-500 select-none" })
       }),
-      /* @__PURE__ */ o(oe, { additionalOptions: P })
+      /* @__PURE__ */ o(re, { additionalOptions: P })
     ]
   });
 });

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

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

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

@@ -1,5 +1,5 @@
-import { t as o } from "../../../Wrapper-MmlrJppS.js";
-import { t as i } from "../../../AdditionalOptions-D3SZ2WFJ.js";
+import { t as o } from "../../../Wrapper-BCi_pLOr.js";
+import { t as i } from "../../../AdditionalOptions-ClcR_Kf7.js";
 import { EmptyList as p } from "./EmptyList.js";
 import { List as a } from "./List/List.js";
 export {

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

@@ -1,30 +1,30 @@
-import { t as n } from "../../../../utils-DnIJruo0.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 { t as l } from "../../../../utils-DnIJruo0.js";
+import { ArrowLeftIcon as s } from "../../../../assets/icons/components/ArrowLeft.js";
+import { ArrowRightIcon as p } from "../../../../assets/icons/components/ArrowRight.js";
+import { useSidebarContext as d } 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", {
+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: n(g({ className: a })),
-    onClick: (i) => {
-      i.stopPropagation(), t();
+    className: l(g({ className: o })),
+    onClick: (n) => {
+      n.stopPropagation(), i(), e?.(r ? "expanded" : "collapsed");
     },
-    children: r ? /* @__PURE__ */ o(s, {
+    children: r ? /* @__PURE__ */ a(p, {
       size: 24,
       "aria-hidden": "true"
-    }) : /* @__PURE__ */ o(l, {
+    }) : /* @__PURE__ */ a(s, {
       size: 24,
       "aria-hidden": "true"
     })
   }) : null;
 };
-d.displayName = "KonstructSidebarCollapseTrigger";
+m.displayName = "KonstructSidebarCollapseTrigger";
 export {
-  d as CollapseTrigger
+  m as CollapseTrigger
 };

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

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

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

@@ -1,58 +1,82 @@
-import { t as u } from "../../../../utils-DnIJruo0.js";
-import { a as j, i as P, n as V, o as A, r as D, t as E } from "../../../../dist-D5Q2IYuC.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", {
+import { t as T } from "../../../../utils-DnIJruo0.js";
+import { a as B, i as M, n as z, o as K, r as U, t as Y } from "../../../../dist-vUCyiTQy.js";
+import { useSidebarContext as $ } from "../../contexts/SidebarContext.js";
+import { NavigationOptionContext as q } from "./NavigationOption.context.js";
+import { navigationOptionVariants as G } from "./NavigationOption.variants.js";
+import { Children as I, isValidElement as J, useCallback as a, useEffect as Q, useMemo as W, useRef as X, useState as Z } from "react";
+import { Fragment as tt, jsx as t, jsxs as s } from "react/jsx-runtime";
+var et = (o) => {
+  const n = I.toArray(o);
+  return n.length === 1 && J(n[0]) ? n[0] : /* @__PURE__ */ t("span", {
     className: "flex w-full items-center justify-center gap-2",
-    children: e
+    children: o
   });
-}, 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, {
+}, ot = 80, nt = ({ badge: o, children: n, className: x, closeDrawerOnClick: b = !0, intentDelay: d = ot, isVisible: k = !0, isActive: p, role: m, tooltip: N, onIntent: r, tooltipBgClassName: w = "bg-kubefirst-dark-blue-900", tooltipArrowClassName: O = "fill-kubefirst-dark-blue-900", tooltipTextClassName: y = "text-white", tooltipClassName: E, ...l }) => {
+  const { isCollapsed: P, expandOnHover: S, closeDrawer: A } = $(), c = P && S, [D, F] = Z(null), u = X(void 0), e = a(() => {
+    clearTimeout(u.current), u.current = void 0;
+  }, []), i = a(() => {
+    e(), r?.();
+  }, [e, r]), j = a(() => {
+    r && (e(), u.current = setTimeout(i, d));
+  }, [
+    e,
+    i,
+    d,
+    r
+  ]);
+  Q(() => e, [e]);
+  const f = a((_) => {
+    F(_);
+  }, []), H = W(() => ({
+    hasOwnTooltip: c,
+    registerTooltipContent: f
+  }), [c, f]);
+  if (!k) return null;
+  const L = "onClick" in l ? l.onClick : void 0, h = () => {
+    b && A(), L?.();
+  }, g = N ?? D, R = c && !!g, V = r ? {
+    onPointerEnter: j,
+    onPointerLeave: e,
+    onPointerDown: i,
+    onTouchStart: i,
+    onFocus: i
+  } : {}, C = o ? /* @__PURE__ */ t("span", {
+    className: "ml-auto flex shrink-0 items-center group-data-[mode=collapsed]/sidebar:hidden",
+    children: o
+  }) : null, v = R ? /* @__PURE__ */ t(B, {
     delayDuration: 0,
-    children: /* @__PURE__ */ p(j, { children: [/* @__PURE__ */ t(A, {
+    children: /* @__PURE__ */ s(Y, { children: [/* @__PURE__ */ t(K, {
       asChild: !0,
-      children: G(e)
-    }), /* @__PURE__ */ t(D, { children: /* @__PURE__ */ p(V, {
+      children: et(n)
+    }), /* @__PURE__ */ t(M, { children: /* @__PURE__ */ s(U, {
       side: "right",
       sideOffset: 12,
-      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 })]
+      className: T("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", w, y, E),
+      children: [g, /* @__PURE__ */ t(z, { className: O })]
     }) })] })
-  }) : e;
-  return /* @__PURE__ */ t(R.Provider, {
-    value: O,
+  }) : n;
+  return /* @__PURE__ */ t(q.Provider, {
+    value: H,
     children: /* @__PURE__ */ t("li", {
-      ...i,
-      "data-active": r ? "true" : void 0,
-      onClick: a === "button" ? void 0 : l,
-      className: u(z({
-        className: o,
-        isActive: r
+      ...l,
+      ...V,
+      "data-active": p ? "true" : void 0,
+      onClick: m === "button" ? void 0 : h,
+      className: T(G({
+        className: x,
+        isActive: p,
+        hasBadge: !!o
       })),
-      children: a === "button" ? /* @__PURE__ */ t("button", {
+      children: m === "button" ? /* @__PURE__ */ s("button", {
         type: "button",
-        onClick: l,
+        onClick: h,
         className: "flex w-full cursor-pointer items-center gap-2",
-        children: d
-      }) : d
+        children: [v, C]
+      }) : /* @__PURE__ */ s(tt, { children: [v, C] })
     })
   });
 };
-I.displayName = "KonstructSidebarNavigationOption";
+nt.displayName = "KonstructSidebarNavigationOption";
 export {
-  I as NavigationOption
+  nt as NavigationOption
 };

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

@@ -24,10 +24,16 @@ var t = e([
   "selection:bg-powder-500",
   "selection:text-white"
 ], {
-  variants: { isActive: {
-    true: "",
-    false: ""
-  } },
+  variants: {
+    isActive: {
+      true: "",
+      false: ""
+    },
+    hasBadge: {
+      true: ["[&>a]:flex-1", "[&>a]:min-w-0"],
+      false: ""
+    }
+  },
   compoundVariants: [{
     isActive: !0,
     class: ["data-[active=true]:text-white", "data-[active=true]:bg-kubefirst-dark-blue-800"]

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

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

package/dist/components/Sidebar/components/index.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../../HamburgerTrigger-DjHmNEJD.js";
+import { t as r } from "../../../HamburgerTrigger-BgeS_nBA.js";
 import { CollapseTrigger as m } from "./CollapseTrigger/CollapseTrigger.js";
 import { Footer as p } from "./Footer/Footer.js";
 import { Label as f } from "./Label/Label.js";