@konstructio/ui 0.1.2-alpha.99 → 0.1.3

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

@@ -1,54 +1,82 @@
-import { t as l } from "../../../../utils-COaoD3PI.js";
-import { a as T, i as j, n as P, o as V, r as A, t as D } from "../../../../dist-BeLV4B_x.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 { a as B, i as M, n as z, o as K, r as U, t as Y } from "../../../../dist-DsOk4psA.js";
+import { t as T } from "../../../../utils-DnIJruo0.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
   });
-}, 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, {
+}, 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__ */ c(T, { children: [/* @__PURE__ */ t(V, {
+    children: /* @__PURE__ */ s(Y, { children: [/* @__PURE__ */ t(K, {
       asChild: !0,
-      children: F(e)
-    }), /* @__PURE__ */ t(A, { children: /* @__PURE__ */ c(P, {
+      children: et(n)
+    }), /* @__PURE__ */ t(M, { children: /* @__PURE__ */ s(U, {
       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: 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(H.Provider, {
-    value: w,
+  }) : n;
+  return /* @__PURE__ */ t(q.Provider, {
+    value: H,
     children: /* @__PURE__ */ t("li", {
-      ...r,
-      role: "option",
-      "data-active": n ? "true" : void 0,
-      onClick: O,
-      className: l(R({
-        className: o,
-        isActive: n
+      ...l,
+      ...V,
+      "data-active": p ? "true" : void 0,
+      onClick: m === "button" ? void 0 : h,
+      className: T(G({
+        className: x,
+        isActive: p,
+        hasBadge: !!o
       })),
-      children: y
+      children: m === "button" ? /* @__PURE__ */ s("button", {
+        type: "button",
+        onClick: h,
+        className: "flex w-full cursor-pointer items-center gap-2",
+        children: [v, C]
+      }) : /* @__PURE__ */ s(tt, { children: [v, C] })
     })
   });
 };
-G.displayName = "KonstructSidebarNavigationOption";
+nt.displayName = "KonstructSidebarNavigationOption";
 export {
-  G as NavigationOption
+  nt as NavigationOption
 };

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

@@ -1,4 +1,4 @@
-import { t as e } from "../../../../dist-Bcn6lMQe.js";
+import { t as e } from "../../../../dist-B9GE4SXf.js";
 var t = e([
   "[&>a]:flex",
   "[&>a]:items-center",
@@ -8,30 +8,37 @@ var t = e([
   "[&>a]:w-full",
   "[&>a]:p-2.5",
   "group-data-[mode=expanded]/sidebar:[&>a]:px-4",
-  "group-data-[mode=expanded]/sidebar:[&>a]:py-2.5",
+  "group-data-[mode=expanded]/sidebar:[&>a]:py-1.5",
   "cursor-pointer",
+  "tap-target",
   "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",
+  "active:bg-kubefirst-dark-blue-800",
   "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: ["text-white", "bg-[#252a41]"]
+    class: ["data-[active=true]:text-white", "data-[active=true]:bg-kubefirst-dark-blue-800"]
   }]
 });
 export {

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.js

@@ -1,4 +1,4 @@
-import { t as r } from "../../../../utils-COaoD3PI.js";
+import { t as r } from "../../../../utils-DnIJruo0.js";
 import { navigationSeparatorVariant as o } from "./NavigationSeparator.variants.js";
 import { jsx as t } from "react/jsx-runtime";
 var i = ({ className: a }) => /* @__PURE__ */ t("div", {

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

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../dist-Bcn6lMQe.js";
+import { t as a } from "../../../../dist-B9GE4SXf.js";
 var t = a([
   "h-px",
   "bg-white/20",

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.js

@@ -1,11 +1,28 @@
-import { t as a } from "../../../../utils-COaoD3PI.js";
-import { navigationTitleVariants as e } from "./NavigationTitle.variants.js";
-import { jsx as n } from "react/jsx-runtime";
-var o = ({ title: i, className: r, isVisible: t = !0 }) => t ? /* @__PURE__ */ n("h2", {
-  className: a(e({ className: r })),
-  children: i
+import { t as m } from "../../../../chevron-down-BODx0Q7h.js";
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { navigationTitleButtonVariants as c, navigationTitleVariants as o } from "./NavigationTitle.variants.js";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+var d = ({ title: t, className: i, isVisible: s = !0, isOpen: n = !0, controlsId: l, onToggle: e }) => s ? e ? /* @__PURE__ */ a("h2", {
+  className: r(o({ className: i })),
+  children: /* @__PURE__ */ u("button", {
+    type: "button",
+    "aria-expanded": n,
+    "aria-controls": l,
+    onClick: e,
+    className: c(),
+    children: [/* @__PURE__ */ a("span", {
+      className: "uppercase",
+      children: t
+    }), /* @__PURE__ */ a(m, {
+      "aria-hidden": "true",
+      className: r("size-4 shrink-0 transition-transform duration-200", !n && "-rotate-90")
+    })]
+  })
+}) : /* @__PURE__ */ a("h2", {
+  className: r(o({ className: i })),
+  children: t
 }) : null;
-o.displayName = "KonstructSidebarNavigationTitle";
+d.displayName = "KonstructSidebarNavigationTitle";
 export {
-  o as NavigationTitle
+  d as NavigationTitle
 };

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

@@ -1,4 +1,4 @@
-import { t } from "../../../../dist-Bcn6lMQe.js";
+import { t } from "../../../../dist-B9GE4SXf.js";
 var i = t([
   "text-sm",
   "font-bold",
@@ -8,7 +8,22 @@ var i = t([
   "text-white",
   "selection:bg-powder-500",
   "selection:text-white"
+]), n = t([
+  "flex",
+  "w-full",
+  "cursor-pointer",
+  "items-center",
+  "justify-between",
+  "gap-2",
+  "rounded",
+  "text-left",
+  "uppercase",
+  "outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-inset",
+  "focus-visible:ring-aurora-500"
 ]);
 export {
+  n as navigationTitleButtonVariants,
   i as navigationTitleVariants
 };

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

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

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

@@ -1,22 +1,24 @@
-import { t as r } from "../../../HamburgerTrigger-BzCfBWzH.js";
+import { CollapseTrigger as r } from "./CollapseTrigger/CollapseTrigger.js";
 import { Footer as m } from "./Footer/Footer.js";
-import { Label as a } from "./Label/Label.js";
-import { Logo as f } from "./Logo/Logo.js";
-import { NavigationTitle as e } from "./NavigationTitle/NavigationTitle.js";
-import { NavigationGroup as v } from "./NavigationGroup/NavigationGroup.js";
+import { t as p } from "../../../HamburgerTrigger-DKxa6_Nb.js";
+import { Label as f } from "./Label/Label.js";
+import { Logo as e } from "./Logo/Logo.js";
+import { Navigation as v } from "./Navigation/Navigation.js";
+import { NavigationGroup as l } from "./NavigationGroup/NavigationGroup.js";
 import { NavigationOption as b } from "./NavigationOption/NavigationOption.js";
 import { NavigationSeparator as u } from "./NavigationSeparator/NavigationSeparator.js";
-import { Navigation as T } from "./Navigation/Navigation.js";
-import { Wrapper as x } from "./Wrapper/Wrapper.js";
+import { NavigationTitle as x } from "./NavigationTitle/NavigationTitle.js";
+import { Wrapper as F } from "./Wrapper/Wrapper.js";
 export {
+  r as CollapseTrigger,
   m as Footer,
-  r as HamburgerTrigger,
-  a as Label,
-  f as Logo,
-  T as Navigation,
-  v as NavigationGroup,
+  p as HamburgerTrigger,
+  f as Label,
+  e as Logo,
+  v as Navigation,
+  l as NavigationGroup,
   b as NavigationOption,
   u as NavigationSeparator,
-  e as NavigationTitle,
-  x as Wrapper
+  x as NavigationTitle,
+  F as Wrapper
 };

package/dist/components/Sidebar/contexts/SidebarContext.js

@@ -1,13 +1,16 @@
-import { createContext as e, useContext as r } from "react";
-var t = e({
+import { createContext as e, useContext as a } from "react";
+var o = e({
   mode: "expanded",
   isCollapsed: !1,
   expandOnHover: !1,
   animateOnHover: !0,
   closeDrawer: () => {
+  },
+  canToggle: !1,
+  toggleMode: () => {
   }
-}), o = () => r(t);
+}), t = () => a(o);
 export {
-  t as SidebarContext,
-  o as useSidebarContext
+  o as SidebarContext,
+  t as useSidebarContext
 };

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,18 @@
+import { t as a } from "../../utils-DnIJruo0.js";
+import { skeletonVariants as n } from "./Skeleton.variants.js";
+import { jsx as e } from "react/jsx-runtime";
+var d = ({ className: r, count: t = 1, label: l = "Loading", shape: o, theme: s, wrapperClassName: i }) => /* @__PURE__ */ e("div", {
+  role: "status",
+  "aria-label": l,
+  "aria-busy": "true",
+  "data-theme": s,
+  className: a("flex w-full flex-col gap-2", i),
+  children: Array.from({ length: t }, (f, m) => /* @__PURE__ */ e("span", {
+    "aria-hidden": "true",
+    className: a(n({ shape: o }), r)
+  }, m))
+});
+d.displayName = "KonstructSkeleton";
+export {
+  d as Skeleton
+};

package/dist/components/Skeleton/Skeleton.variants.js

@@ -0,0 +1,25 @@
+import { t as a } from "../../dist-B9GE4SXf.js";
+var r = a([
+  "block",
+  "animate-pulse",
+  "bg-gray-200",
+  "dark:bg-metal-700"
+], {
+  variants: { shape: {
+    rect: [
+      "h-5",
+      "w-full",
+      "rounded"
+    ],
+    text: [
+      "h-3.5",
+      "w-full",
+      "rounded"
+    ],
+    circle: ["size-10", "rounded-full"]
+  } },
+  defaultVariants: { shape: "rect" }
+});
+export {
+  r as skeletonVariants
+};