vlite3 0.1.2 → 0.1.4

package/components/Form/FormField.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as k, defineAsyncComponent as t, computed as o, markRaw as V, openBlock as w, createBlock as x, resolveDynamicComponent as C, mergeProps as P, toHandlers as U } from "vue";
-import { isComponent as i } from "./utils/form.utils.js";
-import s from "../Input.vue.js";
+import { defineComponent as k, defineAsyncComponent as t, computed as i, markRaw as V, openBlock as w, createBlock as x, resolveDynamicComponent as C, mergeProps as P, toHandlers as U } from "vue";
+import { isComponent as o } from "./utils/form.utils.js";
+import d from "../Input.vue.js";
 import z from "../Switch.vue.js";
 import S from "../CheckBox.vue.js";
 import F from "../Textarea.vue.js";
@@ -21,26 +21,14 @@ const M = /* @__PURE__ */ k({
     isUpdate: { type: Boolean, default: !1 }
   },
   emits: ["change"],
-  setup(d, { emit: c }) {
-    const u = t(
-      () => import("../Dropdown/Dropdown.vue2.js")
-    ), f = t(
-      () => import("../MultiSelect/MultiSelect.vue2.js")
-    ), p = t(
-      () => import("../DatePicker.vue2.js")
-    ), m = t(
-      () => import("../ColorPicker/ColorPicker.vue2.js")
-    ), h = t(
-      () => import("../IconPicker.vue2.js")
-    ), v = t(
-      () => import("./CustomFields.vue.js")
-    ), r = d, n = c, l = (e, a) => {
-      n("change", { value: e, data: a });
-    }, _ = (e) => {
-      n("change", { value: e });
-    }, y = o(() => {
+  setup(n, { emit: c }) {
+    const u = t(() => import("../Dropdown/Dropdown.vue2.js")), f = t(() => import("../MultiSelect/MultiSelect.vue2.js")), p = t(() => import("../DatePicker.vue2.js")), m = t(() => import("../ColorPicker/ColorPicker.vue2.js")), h = t(() => import("../IconPicker.vue2.js")), v = t(() => import("./CustomFields.vue.js")), r = n, s = c, l = (e, a) => {
+      s("change", { value: e, data: a });
+    }, y = (e) => {
+      s("change", { value: e });
+    }, g = i(() => {
       const e = r.field.type;
-      if (i(e))
+      if (o(e))
         return V(e);
       switch (e) {
         case "text":
@@ -50,7 +38,7 @@ const M = /* @__PURE__ */ k({
         case "tel":
         case "url":
         case "search":
-          return s;
+          return d;
         case "textarea":
           return F;
         case "switch":
@@ -76,9 +64,9 @@ const M = /* @__PURE__ */ k({
         case "customFields":
           return v;
         default:
-          return s;
+          return d;
       }
-    }), g = o(() => {
+    }), _ = i(() => {
       const e = r.field.type, a = {
         disabled: r.disabled || r.field.disabled === !0,
         ...r.field.props || {}
@@ -162,15 +150,15 @@ const M = /* @__PURE__ */ k({
         size: r.size,
         rounded: r.rounded,
         isUpdate: r.isUpdate
-      } : i(e) ? {
+      } : o(e) ? {
         ...a,
         value: r.value,
         values: r.values
       } : a;
-    }), b = o(() => {
+    }), b = i(() => {
       const e = r.field.type;
       return e === "text" || e === "email" || e === "password" || e === "number" || e === "tel" || e === "url" || e === "search" || e === "textarea" || e === "switch" || e === "check" || !e ? {
-        "update:modelValue": _
+        "update:modelValue": y
       } : e === "select" ? {
         onSelect: (a) => {
           l(a.value, a.data);
@@ -193,13 +181,16 @@ const M = /* @__PURE__ */ k({
         onSelect: (a) => l(a)
       } : e === "customFields" ? {
         change: (a) => l(a)
-      } : i(e) ? {
+      } : o(e) ? {
         onChange: (a) => {
           l(a.value, a.data);
         }
       } : {};
     });
-    return (e, a) => (w(), x(C(y.value), P(g.value, U(b.value)), null, 16));
+    return (e, a) => (w(), x(C(g.value), P({
+      ..._.value,
+      ...n.field?.props || {}
+    }, U(b.value)), null, 16));
   }
 });
 export {

package/components/Form/composables/useForm.d.ts

@@ -4,6 +4,7 @@ export interface UseFormOptions {
     schema: IForm[] | IForm[][];
     values?: Record<string, any>;
     isUpdate?: boolean;
+    folderId?: string;
     onSubmit?: (payload: IFormSubmitPayload) => void | Promise<void>;
 }
 export interface UseFormReturn {

package/components/Form/composables/useForm.js

@@ -1,8 +1,8 @@
 import { ref as u, computed as $, watch as k } from "vue";
 import { initializeFormValues as j, deepClone as c, getNestedValue as N, evaluateConditional as y, setNestedValue as h, collectFileFields as B, filterNullCustomFields as G } from "../utils/form.utils.js";
 import { useFileUpload as H } from "./useFileUpload.js";
-function X(q) {
-  const { schema: i, values: V, isUpdate: d = !1, onSubmit: b } = q, { handleUploadFile: x, loading: I } = H(), t = u(j(i, V)), r = u({}), v = u(!1), n = u(!1), m = u(c(t.value)), f = $(() => i ? Array.isArray(i[0]) ? i.flat() : i : []);
+function Y(q) {
+  const { schema: i, values: V, isUpdate: d = !1, folderId: x, onSubmit: b } = q, { handleUploadFile: D, loading: J } = H(), t = u(j(i, V)), r = u({}), v = u(!1), n = u(!1), m = u(c(t.value)), f = $(() => i ? Array.isArray(i[0]) ? i.flat() : i : []);
   k(
     () => V,
     (e) => {
@@ -13,11 +13,11 @@ function X(q) {
   const p = () => ({
     values: t.value,
     isUpdate: d
-  }), g = (e) => N(t.value, e), D = (e) => r.value[e] || "", A = (e, l) => {
+  }), g = (e) => N(t.value, e), O = (e) => r.value[e] || "", A = (e, l) => {
     l ? r.value[e] = l : delete r.value[e];
   }, F = () => {
     r.value = {};
-  }, S = (e) => e.when ? y(e.when, p()) : !0, w = (e) => y(e.disabled, p()), O = (e) => y(e.readonly, p()), C = (e) => {
+  }, S = (e) => e.when ? y(e.when, p()) : !0, w = (e) => y(e.disabled, p()), z = (e) => y(e.readonly, p()), C = (e) => {
     const l = g(e.name);
     let a = "";
     return e.required && (l == null || l === "" || Array.isArray(l) && l.length === 0) && (a = `${e.label || e.name} is required`), !a && e.validation && (a = e.validation({
@@ -33,7 +33,7 @@ function X(q) {
       C(l) && (e = !1);
     }
     return e;
-  }, z = (e, l, a) => {
+  }, I = (e, l, a) => {
     t.value = h(t.value, e, l), n.value = !0, delete r.value[e];
     const o = f.value.find((s) => s.name === e);
     if (o?.updateValues) {
@@ -48,9 +48,9 @@ function X(q) {
   }, L = async () => {
     const e = c(t.value), l = B(i, e);
     for (const a of l) {
-      const { name: o, value: s, type: M } = a;
+      const { name: o, value: s, type: P } = a;
       if (s instanceof File || s && typeof s == "object" && s.file instanceof File) {
-        const U = await x(s);
+        const U = await D(s, x);
         U && Object.assign(e, h(e, o, U));
       }
     }
@@ -72,14 +72,14 @@ function X(q) {
     errors: r,
     isSubmitting: v,
     isDirty: n,
-    handleFieldChange: z,
+    handleFieldChange: I,
     validateField: C,
     validateAll: E,
     isFieldVisible: S,
     isFieldDisabled: w,
-    isFieldReadonly: O,
+    isFieldReadonly: z,
     getFieldValue: g,
-    getFieldError: D,
+    getFieldError: O,
     setFieldError: A,
     clearErrors: F,
     resetForm: () => {
@@ -105,5 +105,5 @@ function X(q) {
   };
 }
 export {
-  X as useForm
+  Y as useForm
 };

package/components/Form/types.d.ts

@@ -140,6 +140,8 @@ export interface IFormProps {
     showCancel?: boolean;
     /** Whether this is an update operation */
     isUpdate?: boolean;
+    /** Folder ID for file uploads */
+    folderId?: string;
     /** Custom class for form element */
     class?: string;
     /** Custom class for the grid layout (overrides columns) */

package/components/Input.vue.js

@@ -41,7 +41,7 @@ const Y = ["type", "value", "placeholder", "disabled", "min", "max"], Z = { clas
     ].join(" ")), T = u(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
       " "
     )), R = u(() => {
-      const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50 transition-all focus-visible:outline-none", o = {
+      const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none", o = {
         solid: "bg-muted border-transparent focus-visible:border-primary",
         outline: "border border-input focus-visible:border-primary",
         "outline-b": "border-b border-input bg-transparent rounded-none focus-visible:border-primary",

package/components/Modal.vue.js

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

package/components/Navbar/Navbar.vue.d.ts

@@ -41,6 +41,7 @@ declare const __VLS_component: import('vue').DefineComponent<NavbarProps, {}, {}
     centerPosition: import('../../types/navbar.type').NavbarCenterPosition;
     glass: boolean;
     floating: boolean;
+    mobileBreakpoint: "sm" | "md" | "lg" | "xl";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/Navbar/Navbar.vue.js

@@ -1,14 +1,14 @@
-import { defineComponent as C, ref as v, useSlots as z, onMounted as S, onUnmounted as j, computed as f, provide as M, openBlock as n, createElementBlock as r, normalizeClass as m, Fragment as h, createElementVNode as s, renderSlot as l, createVNode as p, createBlock as y, resolveDynamicComponent as N, withCtx as b, createCommentVNode as w, toDisplayString as P, createTextVNode as E } from "vue";
-import x from "../Icon.vue.js";
-import V from "../SidePanel.vue.js";
-import A from "../Logo.vue.js";
-const O = { class: "flex items-center gap-4 shrink-0 z-10" }, D = { class: "shrink-0" }, L = { key: 1 }, U = { key: 2 }, W = { class: "hidden md:flex items-center gap-1 overflow-x-auto no-scrollbar mask-gradient" }, F = { class: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background" }, T = { class: "hidden md:flex flex-col h-full w-full overflow-hidden" }, Y = { class: "h-16 flex items-center px-6 shrink-0 z-10" }, q = { class: "flex-1 px-4 py-4 overflow-y-auto space-y-4 scrollbar-thin" }, G = { class: "p-4 border-t border-border shrink-0 bg-background mt-auto" }, H = { class: "flex flex-col space-y-6 pt-4 h-full" }, I = {
+import { defineComponent as z, ref as h, useSlots as S, onMounted as j, onUnmounted as M, computed as f, provide as N, openBlock as r, createElementBlock as i, normalizeClass as a, Fragment as y, createElementVNode as s, renderSlot as l, createVNode as p, createBlock as k, resolveDynamicComponent as P, withCtx as g, createCommentVNode as w, toDisplayString as T, createTextVNode as E } from "vue";
+import $ from "../Icon.vue.js";
+import L from "../SidePanel.vue.js";
+import V from "../Logo.vue.js";
+const A = { class: "flex items-center gap-4 shrink-0 z-10" }, O = { class: "shrink-0" }, D = { key: 1 }, H = { key: 2 }, U = { class: "h-16 flex items-center px-6 shrink-0 z-10" }, F = { class: "flex-1 px-4 py-4 overflow-y-auto space-y-4 scrollbar-thin" }, Y = { class: "p-4 border-t border-border shrink-0 bg-background mt-auto" }, q = { class: "flex flex-col space-y-6 pt-4 h-full" }, G = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, J = {
+}, I = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto"
-}, K = { class: "mt-auto pt-4 border-t border-border" }, te = /* @__PURE__ */ C({
+}, J = { class: "mt-auto pt-4 border-t border-border" }, Z = /* @__PURE__ */ z({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
@@ -22,35 +22,50 @@ const O = { class: "flex items-center gap-4 shrink-0 z-10" }, D = { class: "shri
     width: { default: "w-64" },
     compact: { type: Boolean, default: !1 },
     logo: {},
-    logoAlt: {}
+    logoAlt: {},
+    mobileBreakpoint: { default: "md" }
   },
   emits: ["toggle-mobile"],
-  setup(a, { emit: Q }) {
-    const t = a, d = v(!1), u = v(!1);
-    z();
-    const g = () => {
-      u.value = window.scrollY > 10;
+  setup(d, { emit: K }) {
+    const t = d, c = h(!1), m = h(!1);
+    S();
+    const v = () => {
+      m.value = window.scrollY > 10;
     };
-    S(() => {
-      window.addEventListener("scroll", g, { passive: !0 });
-    }), j(() => {
-      window.removeEventListener("scroll", g);
+    j(() => {
+      window.addEventListener("scroll", v, { passive: !0 });
+    }), M(() => {
+      window.removeEventListener("scroll", v);
     });
-    const k = f(() => {
+    const x = f(() => {
       const e = t.variant === "sidebar", o = {
         fixed: "fixed top-0 left-0 z-40",
         sticky: "sticky top-0 z-40",
         relative: "relative z-10",
         absolute: "absolute top-0 left-0 w-full z-40"
-      }, i = "transition-all duration-300 ease-in-out bg-body", B = [
-        t.glass && (u.value || e || t.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
+      }, u = "transition-all duration-300 ease-in-out bg-body", B = [
+        t.glass && (m.value || e || t.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
         t.border && !t.floating ? e ? "border-r border-border" : "border-b border-border" : "",
         t.floating ? "m-4 rounded-xl shadow-lg border border-border/50" : "",
-        u.value && !t.floating && !e && t.position === "sticky" ? "shadow-sm" : ""
+        m.value && !t.floating && !e && t.position === "sticky" ? "shadow-sm" : ""
       ];
-      let c = "";
-      return e ? c = `flex flex-col max-md:w-full ${t.compact ? "w-20" : t.width} h-auto md:h-full md:max-h-screen` : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${t.height}`, [i, o[t.position], ...B, c, t.class].join(" ");
-    }), $ = f(() => {
+      let b = "";
+      return e ? b = n.value.sidebarLayout : b = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${t.height}`, [u, o[t.position], ...B, b, t.class].join(" ");
+    }), n = f(() => {
+      const e = t.mobileBreakpoint || "md";
+      return {
+        // Show on mobile (up to breakpoint), hide on desktop (breakpoint and up)
+        mobileTrigger: `${e}:hidden`,
+        // Hide on mobile, show on desktop
+        desktopContent: `hidden ${e}:flex`,
+        // Sidebar: Mobile (auto height, full width) -> Desktop (fixed width based on prop, full height constrained to viewport)
+        sidebarLayout: `flex flex-col max-${e}:w-full ${t.compact ? "w-20" : t.width} h-auto ${e}:h-full ${e}:max-h-screen`,
+        // Mobile Header (visible only on small screens)
+        mobileHeader: `${e}:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background`,
+        // Desktop Sidebar Content (hidden on small screens)
+        desktopSidebar: `hidden ${e}:flex flex-col h-full w-full overflow-hidden`
+      };
+    }), C = f(() => {
       if (t.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
       switch (t.centerPosition) {
         case "left":
@@ -58,54 +73,56 @@ const O = { class: "flex items-center gap-4 shrink-0 z-10" }, D = { class: "shri
         case "right":
           return "flex items-center justify-end ml-auto";
         default:
-          return "hidden md:flex items-center justify-center mx-auto";
+          return `${n.value.desktopContent} items-center justify-center mx-auto`;
       }
     });
-    return M("navbar-context", {
+    return N("navbar-context", {
       compact: f(() => t.compact)
-    }), (e, o) => (n(), r("nav", {
-      class: m(k.value),
+    }), (e, o) => (r(), i("nav", {
+      class: a(x.value),
       role: "navigation"
     }, [
-      a.variant === "header" ? (n(), r(h, { key: 0 }, [
-        s("div", O, [
+      d.variant === "header" ? (r(), i(y, { key: 0 }, [
+        s("div", A, [
           l(e.$slots, "mobile-trigger", {}, () => [
             s("button", {
               type: "button",
-              class: "md:hidden p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0",
-              onClick: o[0] || (o[0] = (i) => d.value = !0)
+              class: a(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", n.value.mobileTrigger]),
+              onClick: o[0] || (o[0] = (u) => c.value = !0)
             }, [
-              p(x, {
+              p($, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
               o[3] || (o[3] = s("span", { class: "sr-only" }, "Open Menu", -1))
-            ])
+            ], 2)
           ]),
-          s("div", D, [
+          s("div", O, [
             l(e.$slots, "logo", {}, () => [
-              (n(), y(N(t.logo ? "img" : "div"), {
+              (r(), k(P(t.logo ? "img" : "div"), {
                 src: t.logo,
                 class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
               }, {
-                default: b(() => [
-                  t.logo ? w("", !0) : (n(), y(A, {
+                default: g(() => [
+                  t.logo ? w("", !0) : (r(), k(V, {
                     key: 0,
                     class: "h-6 w-6"
                   })),
-                  !t.logo && t.logoAlt ? (n(), r("span", L, P(t.logoAlt), 1)) : t.logo ? w("", !0) : (n(), r("span", U, "Brand"))
+                  !t.logo && t.logoAlt ? (r(), i("span", D, T(t.logoAlt), 1)) : t.logo ? w("", !0) : (r(), i("span", H, "Brand"))
                 ]),
                 _: 1
               }, 8, ["src"]))
             ])
           ]),
-          s("div", W, [
+          s("div", {
+            class: a(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", n.value.desktopContent])
+          }, [
             l(e.$slots, "left")
-          ])
+          ], 2)
         ]),
         s("div", {
-          class: m([
-            $.value,
+          class: a([
+            C.value,
             // Width constraint to ensure it doesn't crush others, but allows simple resizing
             "max-w-full"
           ])
@@ -113,86 +130,90 @@ const O = { class: "flex items-center gap-4 shrink-0 z-10" }, D = { class: "shri
           l(e.$slots, "center")
         ], 2),
         s("div", {
-          class: m(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", {
+          class: a(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", {
             // Always push to end unless Center is pushing it.
             // If Center is 'center' (mx-auto) or 'right' (ml-auto), this naturally falls to end.
             // If Center is 'left', we MUST have ml-auto here.
-            "ml-auto": a.centerPosition === "left" || a.centerPosition === "center"
+            "ml-auto": d.centerPosition === "left" || d.centerPosition === "center"
             // If center is 'right', Center has ml-auto. Right just sits next to it.
             // But if we add ml-auto here too, they might split space? No, flexbox parses strictly.
           }])
         }, [
           l(e.$slots, "right")
         ], 2)
-      ], 64)) : (n(), r(h, { key: 1 }, [
-        s("div", F, [
+      ], 64)) : (r(), i(y, { key: 1 }, [
+        s("div", {
+          class: a(n.value.mobileHeader)
+        }, [
           l(e.$slots, "logo", {}, () => [
             o[4] || (o[4] = s("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
           ]),
           s("button", {
             type: "button",
             class: "p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md",
-            onClick: o[1] || (o[1] = (i) => d.value = !0)
+            onClick: o[1] || (o[1] = (u) => c.value = !0)
           }, [
-            p(x, {
+            p($, {
               icon: "lucide:menu",
               class: "w-5 h-5"
             }),
             o[5] || (o[5] = s("span", { class: "sr-only" }, "Open Menu", -1))
           ])
-        ]),
-        s("div", T, [
-          s("div", Y, [
+        ], 2),
+        s("div", {
+          class: a(n.value.desktopSidebar)
+        }, [
+          s("div", U, [
             l(e.$slots, "logo", {}, () => [
               o[6] || (o[6] = s("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
             ])
           ]),
-          s("div", q, [
+          s("div", F, [
             l(e.$slots, "left"),
             l(e.$slots, "default"),
             l(e.$slots, "center")
           ]),
-          s("div", G, [
+          s("div", Y, [
             l(e.$slots, "right")
           ])
-        ])
+        ], 2)
       ], 64)),
-      p(V, {
-        show: d.value,
-        "onUpdate:show": o[2] || (o[2] = (i) => d.value = i),
+      p(L, {
+        show: c.value,
+        "onUpdate:show": o[2] || (o[2] = (u) => c.value = u),
         position: "left",
         size: "sm",
-        triggerClass: "sm:hidden",
-        class: "z-60 sm:hidden"
+        triggerClass: n.value.mobileTrigger,
+        class: a(["z-60", n.value.mobileTrigger])
       }, {
-        header: b(() => [
+        header: g(() => [
           l(e.$slots, "logo", {}, () => [
             o[7] || (o[7] = E("Brand", -1))
           ])
         ]),
-        default: b(() => [
-          s("div", H, [
-            a.variant === "header" ? (n(), r("div", I, [
+        default: g(() => [
+          s("div", q, [
+            d.variant === "header" ? (r(), i("div", G, [
               l(e.$slots, "mobile-menu", {}, () => [
                 l(e.$slots, "left"),
                 o[8] || (o[8] = s("div", { class: "h-px bg-border my-2" }, null, -1)),
                 l(e.$slots, "center")
               ])
-            ])) : (n(), r("div", J, [
+            ])) : (r(), i("div", I, [
               l(e.$slots, "left"),
               l(e.$slots, "default"),
               l(e.$slots, "center")
             ])),
-            s("div", K, [
+            s("div", J, [
               l(e.$slots, "right")
             ])
           ])
         ]),
         _: 3
-      }, 8, ["show"])
+      }, 8, ["show", "triggerClass", "class"])
     ], 2));
   }
 });
 export {
-  te as default
+  Z as default
 };