vlite3 0.4.6 → 0.4.7

package/components/Modal.vue.js

@@ -1,22 +1,25 @@
-import { defineComponent as w, ref as $, watch as m, provide as B, onUnmounted as O, openBlock as s, createElementBlock as a, Fragment as S, createElementVNode as r, mergeProps as y, withModifiers as b, renderSlot as i, createCommentVNode as n, createBlock as h, Teleport as z, createVNode as v, Transition as E, withCtx as N, normalizeClass as d, toDisplayString as p, resolveDynamicComponent as P } from "vue";
-import V from "./Button.vue.js";
-import { useKeyStroke as j } from "../composables/useKeyStroke.js";
-const D = {
+import { defineComponent as O, ref as S, watch as b, provide as z, onUnmounted as D, computed as p, openBlock as l, createElementBlock as a, Fragment as E, createElementVNode as n, mergeProps as v, withModifiers as h, renderSlot as c, createCommentVNode as i, createBlock as g, Teleport as N, createVNode as x, Transition as P, withCtx as T, normalizeClass as d, toDisplayString as k, resolveDynamicComponent as V } from "vue";
+import j from "./Button.vue.js";
+import { useKeyStroke as K } from "../composables/useKeyStroke.js";
+import { $t as C } from "../utils/i18n.js";
+const M = {
   key: 0,
   class: "flex-none flex flex-col space-y-1.5 pb-0 border-b border-border/90"
-}, K = { class: "text-lg font-semibold leading-none tracking-tight" }, M = {
+}, W = { class: "text-lg font-semibold leading-none tracking-tight" }, A = {
   key: 0,
   class: "text-sm text-muted-foreground mb-6.5"
-}, F = /* @__PURE__ */ w({
+}, H = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "Modal",
   props: {
     show: { type: Boolean, default: !1 },
     title: {},
+    titleI18n: {},
     maxWidth: { default: "sm:max-w-lg" },
     closeOutside: { type: Boolean, default: !0 },
     backdrop: { type: Boolean, default: !0 },
     description: {},
+    descriptionI18n: {},
     triggerClass: {},
     bodyClass: {},
     headerClass: {},
@@ -25,38 +28,40 @@ const D = {
     bodyProps: {}
   },
   emits: ["close", "update:show", "onOpen"],
-  setup(e, { emit: g }) {
-    const c = e, f = g, l = $(c.show);
-    m(
-      () => c.show,
-      (t) => {
-        l.value = t, t && f("onOpen");
+  setup(t, { emit: w }) {
+    const o = t, u = w, r = S(o.show);
+    b(
+      () => o.show,
+      (e) => {
+        r.value = e, e && u("onOpen");
       }
     );
-    const x = () => {
-      l.value = !0;
-    }, o = () => {
-      l.value = !1, f("update:show", !1), f("close");
+    const $ = () => {
+      r.value = !0;
+    }, s = () => {
+      r.value = !1, u("update:show", !1), u("close");
     };
-    B("modal-context", { close: o });
-    const k = () => {
-      c.closeOutside && o();
-    }, { onKeyStroke: C } = j();
-    return C("Escape", o), m(l, (t) => {
-      t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
-    }), O(() => {
+    z("modal-context", { close: s });
+    const B = () => {
+      o.closeOutside && s();
+    }, { onKeyStroke: I } = K();
+    I("Escape", s), b(r, (e) => {
+      e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+    }), D(() => {
       document.body.style.overflow = "";
-    }), (t, u) => (s(), a(S, null, [
-      r("span", y({
-        onClick: b(x, ["stop"]),
-        class: `${e.triggerClass}`
-      }, t.$attrs), [
-        i(t.$slots, "trigger", {}, () => [
-          e.body ? i(t.$slots, "default", { key: 0 }) : n("", !0)
+    });
+    const f = p(() => o.titleI18n ? C(o.titleI18n) : o.title), m = p(() => o.descriptionI18n ? C(o.descriptionI18n) : o.description);
+    return (e, y) => (l(), a(E, null, [
+      n("span", v({
+        onClick: h($, ["stop"]),
+        class: `${t.triggerClass}`
+      }, e.$attrs), [
+        c(e.$slots, "trigger", {}, () => [
+          t.body ? c(e.$slots, "default", { key: 0 }) : i("", !0)
         ])
       ], 16),
-      (s(), h(z, { to: "body" }, [
-        v(E, {
+      (l(), g(N, { to: "body" }, [
+        x(P, {
           "enter-active-class": "transition duration-200 ease-out",
           "enter-from-class": "opacity-0",
           "enter-to-class": "opacity-100",
@@ -64,49 +69,49 @@ const D = {
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: N(() => [
-            l.value ? (s(), a("div", {
+          default: T(() => [
+            r.value ? (l(), a("div", {
               key: 0,
-              class: d(["fixed inset-0 z-50 flex items-center justify-center bg-[#00000051] p-4", e.backdrop && "backdrop-blur-[2px]"]),
-              onClick: k
+              class: d(["fixed inset-0 z-50 flex items-center justify-center bg-[#00000051] p-4", t.backdrop && "backdrop-blur-[2px]"]),
+              onClick: B
             }, [
-              r("div", {
-                class: d(["modal-body relative w-full rounded border border-border/60 bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh]", [e.maxWidth]]),
-                onClick: u[0] || (u[0] = b(() => {
+              n("div", {
+                class: d(["modal-body relative w-full rounded border border-border/60 bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh]", [t.maxWidth]]),
+                onClick: y[0] || (y[0] = h(() => {
                 }, ["stop"]))
               }, [
-                e.title ? (s(), a("div", D, [
-                  r("div", {
-                    class: d(["flex items-center justify-between py-2 px-4 rounded-t-md", e.headerClass])
+                f.value ? (l(), a("div", M, [
+                  n("div", {
+                    class: d(["flex items-center justify-between py-2 px-4 rounded-t-md", t.headerClass])
                   }, [
-                    r("h3", K, p(e.title), 1),
-                    v(V, {
+                    n("h3", W, k(f.value), 1),
+                    x(j, {
                       rounded: "full",
                       size: "sm",
                       icon: "lucide:x",
                       variant: "ghost",
                       class: "hover:bg-gray-250/25!",
-                      onClick: o
+                      onClick: s
                     })
                   ], 2)
-                ])) : n("", !0),
-                r("div", {
-                  class: d(["flex-1 overflow-y-auto px-4 pt-4 pb-3.5 min-h-0", e.bodyClass])
+                ])) : i("", !0),
+                n("div", {
+                  class: d(["flex-1 overflow-y-auto px-4 pt-4 pb-3.5 min-h-0", t.bodyClass])
                 }, [
-                  e.description ? (s(), a("p", M, p(e.description), 1)) : n("", !0),
-                  e.body ? (s(), h(P(e.body), y({ key: 1 }, { ...e.bodyProps, ...t.$attrs }, { close: o }), null, 16)) : i(t.$slots, "default", {
+                  m.value ? (l(), a("p", A, k(m.value), 1)) : i("", !0),
+                  t.body ? (l(), g(V(t.body), v({ key: 1 }, { ...t.bodyProps, ...e.$attrs }, { close: s }), null, 16)) : c(e.$slots, "default", {
                     key: 2,
-                    close: o
+                    close: s
                   })
                 ], 2),
-                t.$slots.footer ? (s(), a("div", {
+                e.$slots.footer ? (l(), a("div", {
                   key: 1,
-                  class: d([e.footerClass, "flex-none flex items-center px-4 py-3 border-t border-border/75 rounded-b-xl bg"])
+                  class: d([t.footerClass, "flex-none flex items-center px-4 py-3 border-t border-border/75 rounded-b-xl bg-body"])
                 }, [
-                  i(t.$slots, "footer", { close: o })
-                ], 2)) : n("", !0)
+                  c(e.$slots, "footer", { close: s })
+                ], 2)) : i("", !0)
               ], 2)
-            ], 2)) : n("", !0)
+            ], 2)) : i("", !0)
           ]),
           _: 3
         })
@@ -115,5 +120,5 @@ const D = {
   }
 });
 export {
-  F as default
+  H as default
 };

package/components/MultiSelect/MultiSelect.vue.d.ts

@@ -3,6 +3,7 @@ interface Props {
     modelValue?: any[];
     options?: IDropdownOptions;
     placeholder?: string;
+    placeholderI18n?: string;
     disabled?: boolean;
     searchable?: boolean;
     variant?: 'default' | 'outline' | 'solid';
@@ -26,7 +27,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }>, {
     disabled: boolean;
     size: "sm" | "md" | "lg";
-    placeholder: string;
     variant: "default" | "outline" | "solid";
     modelValue: any[];
     loading: boolean;

package/components/MultiSelect/MultiSelect.vue.js

@@ -1,17 +1,19 @@
-import { defineComponent as z, ref as j, computed as i, openBlock as n, createBlock as m, unref as y, withCtx as f, createVNode as v, createElementVNode as d, normalizeClass as V, createElementBlock as p, toDisplayString as b, Fragment as w, renderList as E, withModifiers as k, createCommentVNode as g, createTextVNode as L } from "vue";
-import h from "../Icon.vue.js";
-import A from "../Dropdown/Dropdown.vue.js";
-import D from "../Dropdown/DropdownMenu.vue.js";
-import C from "../Badge.vue.js";
-const F = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }, T = {
+import { defineComponent as j, ref as E, computed as i, openBlock as s, createBlock as m, unref as v, withCtx as f, createVNode as h, createElementVNode as d, normalizeClass as w, createElementBlock as p, toDisplayString as b, Fragment as k, renderList as L, withModifiers as C, createCommentVNode as g, createTextVNode as A } from "vue";
+import x from "../Icon.vue.js";
+import D from "../Dropdown/Dropdown.vue.js";
+import F from "../Dropdown/DropdownMenu.vue.js";
+import { $t as y } from "../../utils/i18n.js";
+import $ from "../Badge.vue.js";
+const P = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }, T = {
   key: 0,
   class: "text-muted-foreground pl-1"
-}, U = { class: "truncate" }, q = ["onClick"], G = { class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground" }, R = /* @__PURE__ */ z({
+}, U = { class: "truncate" }, q = ["onClick"], G = { class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground" }, Y = /* @__PURE__ */ j({
   __name: "MultiSelect",
   props: {
     modelValue: { default: () => [] },
     options: { default: () => [] },
-    placeholder: { default: "Select items..." },
+    placeholder: {},
+    placeholderI18n: {},
     disabled: { type: Boolean, default: !1 },
     searchable: { type: Boolean, default: !0 },
     variant: { default: "outline" },
@@ -23,51 +25,56 @@ const F = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }
     layout: { default: "default" }
   },
   emits: ["update:modelValue", "change", "load-more", "search"],
-  setup(l, { emit: $ }) {
-    const o = l, s = $, u = j(!1), c = i(() => o.options.filter((a) => {
+  setup(o, { emit: S }) {
+    const t = o, r = S, u = E(!1), B = i(() => {
+      if (t.placeholderI18n) return y(t.placeholderI18n);
+      if (t.placeholder) return t.placeholder;
+      const a = y("vlite.multiSelect.placeholder");
+      return a !== "vlite.multiSelect.placeholder" ? a : "Select items...";
+    }), c = i(() => t.options.filter((a) => {
       const e = a.value ?? a.label;
-      return o.modelValue.includes(e);
-    })), B = i(() => c.value.slice(0, o.maxVisible)), x = i(() => c.value.length - o.maxVisible), O = (a) => {
-      const e = a.value ?? a.label, t = [...o.modelValue], r = t.indexOf(e);
-      r === -1 ? t.push(e) : t.splice(r, 1), s("update:modelValue", t), s("change", t);
-    }, M = (a) => {
-      const e = o.modelValue.filter((t) => t !== a);
-      s("update:modelValue", e), s("change", e);
-    }, S = () => {
-      s("update:modelValue", []), s("change", []);
-    }, N = i(() => [
+      return t.modelValue.includes(e);
+    })), O = i(() => c.value.slice(0, t.maxVisible)), V = i(() => c.value.length - t.maxVisible), M = (a) => {
+      const e = a.value ?? a.label, l = [...t.modelValue], n = l.indexOf(e);
+      n === -1 ? l.push(e) : l.splice(n, 1), r("update:modelValue", l), r("change", l);
+    }, I = (a) => {
+      const e = t.modelValue.filter((l) => l !== a);
+      r("update:modelValue", e), r("change", e);
+    }, N = () => {
+      r("update:modelValue", []), r("change", []);
+    }, z = i(() => [
       "flex items-center justify-between w-full px-3 py-1.5 rounded-md border text-sm transition-colors cursor-pointer",
-      o.disabled ? "opacity-50 cursor-not-allowed bg-muted" : "bg-background hover:bg-gray-50/70",
-      o.variant === "outline" ? "border-input" : "border-transparent bg-muted",
+      t.disabled ? "opacity-50 cursor-not-allowed bg-muted" : "bg-background hover:bg-gray-50/70",
+      t.variant === "outline" ? "border-input" : "border-transparent bg-muted",
       u.value ? "border-primary/20" : ""
     ].join(" "));
-    return i(() => o.size === "sm" ? "xs" : "sm"), (a, e) => (n(), m(y(A), {
+    return i(() => t.size === "sm" ? "xs" : "sm"), (a, e) => (s(), m(v(D), {
       isOpen: u.value,
-      "onUpdate:isOpen": e[3] || (e[3] = (t) => u.value = t),
+      "onUpdate:isOpen": e[3] || (e[3] = (l) => u.value = l),
       "close-on-select": !1,
       selectable: !0,
-      disabled: l.disabled
+      disabled: o.disabled
     }, {
-      trigger: f(({ isOpen: t }) => [
+      trigger: f(({ isOpen: l }) => [
         d("div", {
-          class: V(N.value)
+          class: w(z.value)
         }, [
-          d("div", F, [
-            c.value.length === 0 ? (n(), p("span", T, b(l.placeholder), 1)) : (n(), p(w, { key: 1 }, [
-              (n(!0), p(w, null, E(B.value, (r) => (n(), m(C, {
-                key: r.value,
+          d("div", P, [
+            c.value.length === 0 ? (s(), p("span", T, b(B.value), 1)) : (s(), p(k, { key: 1 }, [
+              (s(!0), p(k, null, L(O.value, (n) => (s(), m($, {
+                key: n.value,
                 variant: "secondary",
                 class: "gap-1 pr-1 truncate max-w-[150px]"
               }, {
                 default: f(() => [
-                  d("span", U, b(r.label), 1),
-                  l.disabled ? g("", !0) : (n(), p("button", {
+                  d("span", U, b(n.labelI18n ? v(y)(n.labelI18n) : n.label), 1),
+                  o.disabled ? g("", !0) : (s(), p("button", {
                     key: 0,
                     type: "button",
-                    onClick: k((H) => M(r.value), ["stop"]),
+                    onClick: C((H) => I(n.value), ["stop"]),
                     class: "hover:bg-destructive/10 hover:text-destructive rounded-full p-0.5 transition-colors"
                   }, [
-                    v(h, {
+                    h(x, {
                       icon: "lucide:x",
                       class: "w-3 h-3"
                     })
@@ -75,47 +82,47 @@ const F = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }
                 ]),
                 _: 2
               }, 1024))), 128)),
-              x.value > 0 ? (n(), m(C, {
+              V.value > 0 ? (s(), m($, {
                 key: 0,
                 variant: "secondary",
                 class: "font-normal text-muted-foreground"
               }, {
                 default: f(() => [
-                  L(" +" + b(x.value), 1)
+                  A(" +" + b(V.value), 1)
                 ]),
                 _: 1
               })) : g("", !0)
             ], 64))
           ]),
           d("div", G, [
-            c.value.length > 0 && !l.disabled ? (n(), m(h, {
+            c.value.length > 0 && !o.disabled ? (s(), m(x, {
               key: 0,
               icon: "lucide:x",
               class: "w-4 h-4 hover:text-foreground transition-colors",
-              onClick: k(S, ["stop"])
+              onClick: C(N, ["stop"])
             })) : g("", !0),
             e[4] || (e[4] = d("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
-            v(h, {
+            h(x, {
               icon: "lucide:chevron-down",
-              class: V(["w-4 h-4 transition-transform duration-200", { "rotate-180": t }])
+              class: w(["w-4 h-4 transition-transform duration-200", { "rotate-180": l }])
             }, null, 8, ["class"])
           ])
         ], 2)
       ]),
       default: f(() => [
-        v(y(D), {
-          options: l.options,
-          selected: l.modelValue,
+        h(v(F), {
+          options: o.options,
+          selected: o.modelValue,
           class: "min-w-[300px]",
-          loading: l.loading,
-          hasMore: l.hasMore,
-          searchable: l.searchable,
-          remote: l.remote,
-          layout: l.layout,
-          onSelect: O,
-          onClose: e[0] || (e[0] = (t) => u.value = !1),
-          onLoadMore: e[1] || (e[1] = (t) => a.$emit("load-more")),
-          onSearch: e[2] || (e[2] = (t) => a.$emit("search", t))
+          loading: o.loading,
+          hasMore: o.hasMore,
+          searchable: o.searchable,
+          remote: o.remote,
+          layout: o.layout,
+          onSelect: M,
+          onClose: e[0] || (e[0] = (l) => u.value = !1),
+          onLoadMore: e[1] || (e[1] = (l) => a.$emit("load-more")),
+          onSearch: e[2] || (e[2] = (l) => a.$emit("search", l))
         }, null, 8, ["options", "selected", "loading", "hasMore", "searchable", "remote", "layout"])
       ]),
       _: 1
@@ -123,5 +130,5 @@ const F = { class: "flex flex-wrap gap-1.5 items-center flex-1 min-w-0 py-0.5" }
   }
 });
 export {
-  R as default
+  Y as default
 };

package/components/Navbar/Navbar.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as R, ref as g, useSlots as V, onMounted as L, onUnmounted as N, computed as p, provide as P, watch as C, openBlock as t, createElementBlock as n, normalizeClass as i, Fragment as x, createElementVNode as r, renderSlot as s, createVNode as B, createBlock as y, resolveDynamicComponent as E, withCtx as k, createCommentVNode as d, toDisplayString as A, createTextVNode as D } from "vue";
+import { defineComponent as R, ref as g, useSlots as V, onMounted as L, onUnmounted as N, computed as p, provide as E, watch as C, openBlock as t, createElementBlock as n, normalizeClass as i, Fragment as x, createElementVNode as r, renderSlot as o, createVNode as B, createBlock as y, resolveDynamicComponent as P, withCtx as k, createCommentVNode as d, toDisplayString as A, createTextVNode as D } from "vue";
 import { useRoute as H } from "vue-router";
 import { onClickOutside as U, useBreakpoints as F, breakpointsTailwind as Y } from "@vueuse/core";
 import T from "../Icon.vue.js";
@@ -37,7 +37,7 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
     mobileMenuVariant: { default: "sidepanel" }
   },
   emits: ["toggle-mobile"],
-  setup(m, { emit: oe }) {
+  setup(m, { emit: se }) {
     const l = m, a = g(!1), b = g(!1);
     V();
     const w = g(null), h = g(null);
@@ -57,7 +57,7 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
       window.removeEventListener("scroll", $);
     });
     const z = p(() => {
-      const e = l.variant === "sidebar", o = {
+      const e = l.variant === "sidebar", s = {
         fixed: "fixed top-0 left-0 z-40",
         sticky: "sticky top-0 z-40",
         relative: "relative z-10",
@@ -69,9 +69,9 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
         b.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
       ];
       let c = "";
-      return e ? c = u.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [f, o[l.position], ...v, c, l.class].join(" ");
+      return e ? c = u.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [f, s[l.position], ...v, c, l.class].join(" ");
     }), u = p(() => {
-      const e = l.mobileBreakpoint || "md", o = {
+      const e = l.mobileBreakpoint || "md", s = {
         sm: "sm:hidden",
         md: "md:hidden",
         lg: "lg:hidden",
@@ -98,13 +98,13 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
         xl: "hidden xl:flex flex-col h-full w-full overflow-hidden"
       };
       return {
-        mobileTrigger: o[e],
+        mobileTrigger: s[e],
         desktopContent: f[e],
         sidebarLayout: v[e],
         mobileHeader: c[e],
         desktopSidebar: O[e]
       };
-    }), S = p(() => {
+    }), M = p(() => {
       if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
       switch (l.centerPosition) {
         case "left":
@@ -115,12 +115,12 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
           return `${u.value.desktopContent} items-center justify-center mx-auto`;
       }
     });
-    P("navbar-context", {
+    E("navbar-context", {
       compact: p(() => l.compact)
     });
-    const M = H();
+    const S = H();
     C(
-      () => M.path,
+      () => S.path,
       () => {
         a.value = !1;
       }
@@ -128,13 +128,13 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
     const j = F(Y).greater(l.mobileBreakpoint);
     return C(j, (e) => {
       e && (a.value = !1);
-    }), (e, o) => (t(), n("nav", {
+    }), (e, s) => (t(), n("nav", {
       class: i(z.value),
       role: "navigation"
     }, [
       m.variant === "header" ? (t(), n(x, { key: 0 }, [
         r("div", I, [
-          s(e.$slots, "mobile-trigger", {
+          o(e.$slots, "mobile-trigger", {
             isOpen: a.value,
             toggle: () => a.value = !a.value
           }, () => [
@@ -143,21 +143,21 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
               ref_key: "mobileTriggerRef",
               ref: h,
               class: i(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [u.value.mobileTrigger, l.mobileTriggerClass]]),
-              onClick: o[0] || (o[0] = (f) => a.value = !a.value)
+              onClick: s[0] || (s[0] = (f) => a.value = !a.value)
             }, [
               B(T, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              o[3] || (o[3] = r("span", { class: "sr-only" }, "Open Menu", -1))
+              s[3] || (s[3] = r("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ]),
           e.$slots?.logo ? (t(), n("div", {
             key: 0,
             class: i(["shrink-0", l.logoClass])
           }, [
-            s(e.$slots, "logo", {}, () => [
-              (t(), y(E(l.logo ? "img" : "div"), {
+            o(e.$slots, "logo", {}, () => [
+              (t(), y(P(l.logo ? "img" : "div"), {
                 src: l.logo,
                 class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
               }, {
@@ -176,19 +176,19 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
             key: 1,
             class: i(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", u.value.desktopContent])
           }, [
-            s(e.$slots, "left")
+            o(e.$slots, "left")
           ], 2)) : d("", !0)
         ]),
         e.$slots?.center ? (t(), n("div", {
           key: 0,
           class: i([
-            S.value,
+            M.value,
             // Width constraint to ensure it doesn't crush others, but allows simple resizing
             "max-w-full",
             l.contentClass
           ])
         }, [
-          s(e.$slots, "center")
+          o(e.$slots, "center")
         ], 2)) : d("", !0),
         r("div", {
           class: i(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
@@ -203,16 +203,16 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
             l.rightClass
           ]])
         }, [
-          s(e.$slots, "right")
+          o(e.$slots, "right")
         ], 2)
       ], 64)) : (t(), n(x, { key: 1 }, [
         r("div", {
           class: i(u.value.mobileHeader)
         }, [
-          e.$slots?.logo ? s(e.$slots, "logo", { key: 0 }, () => [
-            o[4] || (o[4] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+          e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
+            s[4] || (s[4] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
           ]) : d("", !0),
-          s(e.$slots, "mobile-trigger", {
+          o(e.$slots, "mobile-trigger", {
             isOpen: a.value,
             toggle: () => a.value = !a.value
           }, () => [
@@ -221,13 +221,13 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
               ref_key: "mobileTriggerRef",
               ref: h,
               class: i(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
-              onClick: o[1] || (o[1] = (f) => a.value = !a.value)
+              onClick: s[1] || (s[1] = (f) => a.value = !a.value)
             }, [
               B(T, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              o[5] || (o[5] = r("span", { class: "sr-only" }, "Open Menu", -1))
+              s[5] || (s[5] = r("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ])
         ], 2),
@@ -238,22 +238,22 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
             key: 0,
             class: i(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
           }, [
-            s(e.$slots, "logo", {}, () => [
-              o[6] || (o[6] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+            o(e.$slots, "logo", {}, () => [
+              s[6] || (s[6] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
             ])
           ], 2)) : d("", !0),
           r("div", {
             class: i(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
           }, [
-            s(e.$slots, "left"),
-            s(e.$slots, "default"),
-            s(e.$slots, "center")
+            o(e.$slots, "left"),
+            o(e.$slots, "default"),
+            o(e.$slots, "center")
           ], 2),
           e.$slots?.right ? (t(), n("div", {
             key: 1,
             class: i(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
           }, [
-            s(e.$slots, "right")
+            o(e.$slots, "right")
           ], 2)) : d("", !0)
         ], 2)
       ], 64)),
@@ -265,13 +265,13 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
           class: i(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
         }, [
           r("div", Q, [
-            s(e.$slots, "mobile-menu", {}, () => [
+            o(e.$slots, "mobile-menu", {}, () => [
               r("div", W, [
-                s(e.$slots, "left")
+                o(e.$slots, "left")
               ]),
-              o[7] || (o[7] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+              s[7] || (s[7] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
               r("div", X, [
-                s(e.$slots, "center")
+                o(e.$slots, "center")
               ])
             ])
           ])
@@ -279,7 +279,7 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
       ], 64)) : (t(), y(q, {
         key: 3,
         show: a.value,
-        "onUpdate:show": o[2] || (o[2] = (f) => a.value = f),
+        "onUpdate:show": s[2] || (s[2] = (f) => a.value = f),
         position: "left",
         size: "sm",
         triggerClass: u.value.mobileTrigger,
@@ -288,25 +288,25 @@ const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K
         bodyClass: "p-0!"
       }, {
         header: k(() => [
-          s(e.$slots, "logo", {}, () => [
-            o[8] || (o[8] = D("Brand", -1))
+          o(e.$slots, "logo", {}, () => [
+            s[8] || (s[8] = D("Brand", -1))
           ])
         ]),
         default: k(() => [
           r("div", Z, [
             m.variant === "header" ? (t(), n("div", _, [
-              s(e.$slots, "mobile-menu", {}, () => [
-                s(e.$slots, "left"),
-                o[9] || (o[9] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
-                s(e.$slots, "center")
+              o(e.$slots, "mobile-menu", {}, () => [
+                o(e.$slots, "left"),
+                s[9] || (s[9] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
+                o(e.$slots, "center")
               ])
             ])) : (t(), n("div", ee, [
-              s(e.$slots, "left"),
-              s(e.$slots, "default"),
-              s(e.$slots, "center")
+              o(e.$slots, "left"),
+              o(e.$slots, "default"),
+              o(e.$slots, "center")
             ])),
             e.$slots?.right ? (t(), n("div", le, [
-              s(e.$slots, "right")
+              o(e.$slots, "right")
             ])) : d("", !0)
           ])
         ]),