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

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -1,28 +1,28 @@
-import { t } from "../../utils-Cx-WzRZF.js";
+import { t as e } from "../../utils-Cx-WzRZF.js";
 import { RadioCard as C } from "../RadioCard/RadioCard.js";
 import { radioCardGroupVariants as N } from "./RadioCardGroup.variants.js";
-import { useCallback as S, useState as k } from "react";
-import { jsx as a } from "react/jsx-runtime";
-var g = ({ className: o, defaultChecked: m, direction: s, name: d, options: c, theme: i, wrapperClassName: p, onValueChange: e }) => {
-  const [n, f] = k(m), l = S((r) => {
-    f(r), e?.(r);
-  }, [e]);
-  return /* @__PURE__ */ a("div", {
-    className: t(N({
-      className: p,
-      direction: s
+import { useState as S } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var k = ({ className: t, defaultChecked: a, direction: m, name: d, options: s, theme: c, wrapperClassName: i, onValueChange: n }) => {
+  const [p, f] = S(a), h = (r) => {
+    f(r), n?.(r);
+  };
+  return /* @__PURE__ */ o("div", {
+    className: e(N({
+      className: i,
+      direction: m
     })),
-    "data-theme": i,
-    children: c.map(({ value: r, ...h }) => /* @__PURE__ */ a(C, {
+    "data-theme": c,
+    children: s.map(({ value: r, ...l }) => /* @__PURE__ */ o(C, {
       value: r,
       name: d,
-      className: t(o),
-      checked: n === r,
-      onChange: () => l(r),
-      ...h
+      className: e(t),
+      checked: p === r,
+      onChange: () => h(r),
+      ...l
     }, r))
   });
 };
 export {
-  g as RadioCardGroup
+  k as RadioCardGroup
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,29 +1,29 @@
-import { t as G } from "../../dist-DqKFpce5.js";
-import { t as s } from "../../utils-Cx-WzRZF.js";
-import { Radio as R } from "../Radio/Radio.js";
-import { radioGroupVariants as b } from "./RadioGroup.variants.js";
-import { useCallback as j, useState as I } from "react";
-import { jsx as m } from "react/jsx-runtime";
-var D = ({ asChild: a, className: c, defaultChecked: i, direction: n, name: d, options: p, theme: l, value: e, wrapperClassName: f, onValueChange: r }) => {
-  const S = a ? G : "div", o = e !== void 0, [h, C] = I(() => i), N = o ? e : h, k = j((t) => {
-    o || C(t), r?.(t);
-  }, [o, r]);
-  return /* @__PURE__ */ m(S, {
-    className: s(b({
-      className: f,
-      direction: n
+import { t as R } from "../../dist-xCbHbMLA.js";
+import { t as r } from "../../utils-Cx-WzRZF.js";
+import { Radio as g } from "../Radio/Radio.js";
+import { radioGroupVariants as j } from "./RadioGroup.variants.js";
+import { useState as k } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var B = ({ asChild: m, className: n, defaultChecked: a, direction: c, name: i, options: d, theme: p, value: t, wrapperClassName: l, onValueChange: f }) => {
+  const h = m ? R : "div", e = t !== void 0, [S, C] = k(() => a), N = e ? t : S, x = (o) => {
+    e || C(o), f?.(o);
+  };
+  return /* @__PURE__ */ s(h, {
+    className: r(j({
+      className: l,
+      direction: c
     })),
-    "data-theme": l,
-    children: p.map(({ value: t, ...x }) => /* @__PURE__ */ m(R, {
-      value: t,
-      name: d,
-      className: s(c),
-      checked: N === t,
-      onChange: () => k(t),
-      ...x
-    }, t))
+    "data-theme": p,
+    children: d.map(({ value: o, ...G }) => /* @__PURE__ */ s(g, {
+      value: o,
+      name: i,
+      className: r(n),
+      checked: N === o,
+      onChange: () => x(o),
+      ...G
+    }, o))
   });
 };
 export {
-  D as RadioGroup
+  B as RadioGroup
 };

package/dist/components/Range/Range.js

@@ -1,21 +1,23 @@
 import { t as e } from "../../utils-Cx-WzRZF.js";
-import { i as v, n as V, r as i, t as S } from "../../dist-CT6d9xe7.js";
-import { rangeOutsideVariants as R, rangeVariants as j, thumbVariants as c, trackVariants as b } from "./Range.variants.js";
-import { forwardRef as k, useCallback as w, useEffect as y, useImperativeHandle as C, useRef as T, useState as E } from "react";
+import { i as v, n as V, r as i, t as S } from "../../dist-DDck_2lb.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";
-var A = k(({ label: l, labelWrapperClassName: u, defaultValue: m = [0, 100], name: d, theme: f, size: n, showValue: o, ...h }, p) => {
-  const r = T(null), [t, x] = E(m);
-  C(p, () => r.current, [r]), y(() => {
+var q = y(({ label: n, labelWrapperClassName: m, defaultValue: u = [0, 100], name: d, theme: f, size: l, showValue: o, ...h }, p) => {
+  const r = C(null), [t, x] = T(u);
+  k(p, () => r.current, [r]), b(() => {
     r.current && (r.current.value = `[${t.toString()}]`);
   }, [t]);
-  const N = w((g) => x(g), []);
+  const N = (g) => {
+    x(g);
+  };
   return /* @__PURE__ */ s("div", {
     className: "w-full relative flex flex-col gap-3",
     "data-theme": f,
     children: [
       /* @__PURE__ */ s("div", {
-        className: e("flex items-center", l ? "justify-between" : "justify-end", u),
-        children: [l ? /* @__PURE__ */ a("label", { children: l }) : null, o ? /* @__PURE__ */ s("span", {
+        className: e("flex items-center", n ? "justify-between" : "justify-end", m),
+        children: [n ? /* @__PURE__ */ a("label", { children: n }) : null, o ? /* @__PURE__ */ s("span", {
           className: "text-xs",
           children: [
             t[0],
@@ -37,16 +39,16 @@ var A = k(({ label: l, labelWrapperClassName: u, defaultValue: m = [0, 100], nam
         ...h,
         children: [
           /* @__PURE__ */ a(v, {
-            className: e(b({ size: n })),
+            className: e(w({ size: l })),
             children: /* @__PURE__ */ a(V, { className: e(R()) })
           }),
-          /* @__PURE__ */ a(i, { className: e(c({ size: n })) }),
-          /* @__PURE__ */ a(i, { className: e(c({ size: n })) })
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) }),
+          /* @__PURE__ */ a(i, { className: e(c({ size: l })) })
         ]
       })
     ]
   });
 });
 export {
-  A as Range
+  q as Range
 };

package/dist/components/Select/Select.js

@@ -1,7 +1,7 @@
 import { t as a } from "../../utils-Cx-WzRZF.js";
-import { t as h } from "../../Wrapper-DNEn4fef.js";
+import { t as h } from "../../Wrapper-BhqUVI1G.js";
 import { SelectProvider as v } from "./contexts/select.provider.js";
-import { n as N } from "../../AdditionalOptions-Cj29eeMF.js";
+import { n as N } from "../../AdditionalOptions-D0BAS2HG.js";
 import { forwardRef as g, useMemo as j } from "react";
 import { jsx as r, jsxs as k } from "react/jsx-runtime";
 var R = g(({ error: e, errorClassName: i, helperText: l, helperTextClassName: d, highlightSearch: p, mainWrapperClassName: f, name: s, value: n, options: t, onChange: c, onBlur: m, ...o }, x) => /* @__PURE__ */ r(v, {

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

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

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

@@ -1,9 +1,9 @@
 import { o as K } from "../../../../rolldown-runtime-Ck3dxwZt.js";
 import { t as n } from "../../../../utils-Cx-WzRZF.js";
-import { t as Q } from "../../../../Loading-fD0Xiyeq.js";
+import { t as Q } from "../../../../Loading-DUh9PMJN.js";
 import { t as W } from "../../../../debounce-C5Ycjilj.js";
 import { useSelectContext as Y } from "../../contexts/select.hook.js";
-import { n as $, t as R } from "../../../../AdditionalOptions-Cj29eeMF.js";
+import { n as $, t as R } from "../../../../AdditionalOptions-D0BAS2HG.js";
 import { listGroupLabelVariants as ee, listVariants as te } from "./List.variants.js";
 import "../../constants/pagination.js";
 import "../../constants/list.js";

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

@@ -1,64 +1,64 @@
-import { t as s } from "../../../../utils-Cx-WzRZF.js";
-import { Typography as y } from "../../../Typography/Typography.js";
+import { t as l } from "../../../../utils-Cx-WzRZF.js";
+import { Typography as x } 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) {
+import { listItemVariants as C } from "./ListItem.variants.js";
+import { useRef as L } from "react";
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+function V(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, {
+var D = ({ isEmpty: c, isClickable: r, className: i, inputRef: o, listItemSecondRowClassName: a, ...t }) => {
+  const { searchTerm: f, highlightSearchEnabled: g, setValue: p, toggleOpen: y } = I(), k = L(null), d = (e) => {
+    p(e.value, o), y(!1);
+  }, N = (e, s) => {
+    e.key === "Enter" && (e.stopPropagation(), d(s));
+  }, b = ({ label: e, rightComponent: s, subLabel: u, rightComponentClassName: w }) => {
+    if (c) return /* @__PURE__ */ n(x, {
       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, {
+    const h = g && f.length > 0 ? V(e, f) : [e];
+    return /* @__PURE__ */ m(x, {
       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: [s ? /* @__PURE__ */ m("span", {
+        className: l("flex gap-2 items-center", w),
         children: [
-          k,
+          h,
           " ",
-          l
+          s
         ]
-      }) : k, p ? /* @__PURE__ */ n("span", {
-        className: s("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
-        children: p
+      }) : h, u ? /* @__PURE__ */ n("span", {
+        className: l("block font-normal text-sm text-metal-800 dark:text-metal-50", a),
+        children: u
       }) : null]
     });
-  }, [h, m]);
-  return /* @__PURE__ */ u("li", {
-    ref: b,
+  };
+  return /* @__PURE__ */ m("li", {
+    ref: k,
     role: "option",
     "data-action": "false",
-    className: s(L({ className: i })),
+    className: l(C({ className: i })),
     tabIndex: 0,
     onClick: (e) => {
-      r && (f(t), e.stopPropagation());
+      r && (d(t), e.stopPropagation());
     },
     onKeyDown: (e) => N(e, t),
     children: [t.leftIcon ? /* @__PURE__ */ n("span", {
-      className: s("w-4 h-4 flex justify-center", {
+      className: l("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)]
+    }) : null, b(t)]
   });
 };
 export {
-  K as ListItem
+  D as ListItem
 };

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

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

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

@@ -1,5 +1,5 @@
-import { t as o } from "../../../Wrapper-DNEn4fef.js";
-import { t as i } from "../../../AdditionalOptions-Cj29eeMF.js";
+import { t as o } from "../../../Wrapper-BhqUVI1G.js";
+import { t as i } from "../../../AdditionalOptions-D0BAS2HG.js";
 import { EmptyList as p } from "./EmptyList.js";
 import { List as a } from "./List/List.js";
 export {

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

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

package/dist/components/Sidebar/Sidebar.js

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

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

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

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

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

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

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

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

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

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

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