vlite3 0.2.3 → 0.2.5

package/README.md

@@ -62,7 +62,7 @@ In your `main.ts` or `main.js`, import `createVLite` and `vScrollReveal` and reg
 ```typescript
 import { createApp } from 'vue'
 import App from './App.vue'
-import { env, createVLite, vScrollReveal, GoogleSignInPlugin } from 'vlite3'
+import { createVLite, vScrollReveal, GoogleSignInPlugin } from 'vlite3'
 
 const app = createApp(App)
 
@@ -372,7 +372,9 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 
 ## Complete reference for AI agents and developers:
 
-- [llms.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms.txt).
-- [llms-theming.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-theming.txt).
-- [llms-full.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-full.txt).
-- [llms-advance.txt](https://github.com/safdar-azeem/vlite3/blob/main/llms-advance.txt).
+- [1-setup.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/1-setup.md)
+- [2-theming.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/2-theming.md)
+- [3-all-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/3-all-components.md)
+- [4-forms.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/4-forms.md)
+- [5-utility.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/5-utility.md)
+- [6-advance-components.md](https://github.com/safdar-azeem/vlite3/blob/main/docs/6-advance-components.md)

package/components/AvatarUploader/AvatarUploader.vue.js

@@ -59,7 +59,7 @@ const E = { class: "inline-block" }, $ = ["onClick"], I = /* @__PURE__ */ x({
             }, [
               e.loading || k ? (n(), o("div", {
                 key: 0,
-                class: l(["absolute inset-0 flex items-center justify-center bg-black/40 text-white", e.rounded === "full" ? "rounded-full" : "rounded-md"])
+                class: l(["absolute inset-0 flex items-center justify-center bg-[#00000051] text-white", e.rounded === "full" ? "rounded-full" : "rounded-md"])
               }, [
                 d(u, {
                   icon: "lucide:loader-2",
@@ -67,7 +67,7 @@ const E = { class: "inline-block" }, $ = ["onClick"], I = /* @__PURE__ */ x({
                 })
               ], 2)) : e.editable && !e.disabled ? (n(), o("div", {
                 key: 1,
-                class: l(["absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity", e.rounded === "full" ? "rounded-full" : "rounded-md"])
+                class: l(["absolute inset-0 flex items-center justify-center bg-[#00000051] text-white opacity-0 group-hover:opacity-100 transition-opacity", e.rounded === "full" ? "rounded-full" : "rounded-md"])
               }, [
                 d(u, {
                   icon: "lucide:camera",

package/components/Button.vue.js

@@ -41,7 +41,7 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
         xs: "h-6.5 px-2",
         sm: "h-8 px-3",
         md: "h-9 px-4 py-2",
-        lg: "h-10 px-8",
+        lg: "h-10 px-6",
         xl: "h-12 px-10"
       }, b = {
         xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",

package/components/Modal.vue.js

@@ -1,9 +1,9 @@
-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 g, resolveDynamicComponent as P } from "vue";
+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 = {
   key: 0,
-  class: "flex-none flex flex-col space-y-1.5 pb-0 border-b border-border/60"
+  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 = {
   key: 0,
   class: "text-sm text-muted-foreground mb-2"
@@ -25,18 +25,18 @@ const D = {
     bodyProps: {}
   },
   emits: ["close", "update:show", "onOpen"],
-  setup(e, { emit: p }) {
-    const c = e, u = p, l = $(c.show);
+  setup(e, { emit: g }) {
+    const c = e, f = g, l = $(c.show);
     m(
       () => c.show,
       (t) => {
-        l.value = t, t && u("onOpen");
+        l.value = t, t && f("onOpen");
       }
     );
     const x = () => {
       l.value = !0;
     }, o = () => {
-      l.value = !1, u("update:show", !1), u("close");
+      l.value = !1, f("update:show", !1), f("close");
     };
     B("modal-context", { close: o });
     const k = () => {
@@ -46,7 +46,7 @@ const D = {
       t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
     }), O(() => {
       document.body.style.overflow = "";
-    }), (t, f) => (s(), a(S, null, [
+    }), (t, u) => (s(), a(S, null, [
       r("span", y({
         onClick: b(x, ["stop"]),
         class: `${e.triggerClass}`
@@ -72,14 +72,14 @@ const D = {
             }, [
               r("div", {
                 class: d(["modal-body relative w-full rounded border border-border bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh]", [e.maxWidth]]),
-                onClick: f[0] || (f[0] = b(() => {
+                onClick: u[0] || (u[0] = b(() => {
                 }, ["stop"]))
               }, [
                 e.title ? (s(), a("div", D, [
                   r("div", {
-                    class: d(["flex items-center justify-between bg-muted-light py-1 px-4 rounded-t-md", e.headerClass])
+                    class: d(["flex items-center justify-between py-1.5 px-4 rounded-t-md", e.headerClass])
                   }, [
-                    r("h3", K, g(e.title), 1),
+                    r("h3", K, p(e.title), 1),
                     v(V, {
                       rounded: "full",
                       size: "sm",
@@ -93,7 +93,7 @@ const D = {
                 r("div", {
                   class: d(["flex-1 overflow-y-auto px-4 pt-4 pb-3.5 min-h-0", e.bodyClass])
                 }, [
-                  e.description ? (s(), a("p", M, g(e.description), 1)) : n("", !0),
+                  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", {
                     key: 2,
                     close: o

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

@@ -18,6 +18,8 @@ declare function __VLS_template(): {
         left?(_: {}): any;
         left?(_: {}): any;
         left?(_: {}): any;
+        left?(_: {}): any;
+        center?(_: {}): any;
         center?(_: {}): any;
         center?(_: {}): any;
         center?(_: {}): any;
@@ -28,8 +30,12 @@ declare function __VLS_template(): {
         default?(_: {}): any;
         default?(_: {}): any;
         'mobile-menu'?(_: {}): any;
+        'mobile-menu'?(_: {}): any;
+    };
+    refs: {
+        mobileTriggerRef: HTMLButtonElement;
+        mobileMenuRef: HTMLDivElement;
     };
-    refs: {};
     rootEl: HTMLElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -51,9 +57,14 @@ declare const __VLS_component: import('vue').DefineComponent<NavbarProps, {}, {}
     floating: boolean;
     mobileBreakpoint: "sm" | "md" | "lg" | "xl";
     logoClass: string;
+    menuClass: string;
     rightClass: string;
     mobileTriggerClass: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
+    mobileMenuVariant: "sidepanel" | "dropdown";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    mobileTriggerRef: HTMLButtonElement;
+    mobileMenuRef: HTMLDivElement;
+}, HTMLElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/Navbar/Navbar.vue.js

@@ -1,24 +1,25 @@
-import { defineComponent as T, ref as y, useSlots as j, onMounted as L, onUnmounted as M, computed as g, provide as N, watch as O, openBlock as o, createElementBlock as r, normalizeClass as a, Fragment as k, createElementVNode as n, renderSlot as t, createVNode as h, createBlock as w, resolveDynamicComponent as P, withCtx as v, createCommentVNode as d, toDisplayString as E, createTextVNode as V } from "vue";
-import { useRoute as A } from "vue-router";
-import $ from "../Icon.vue.js";
-import H from "../SidePanel.vue.js";
-import D from "../Logo.vue.js";
-const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R = { key: 2 }, Y = { class: "flex flex-col space-y-6 pt-4 h-full" }, q = {
+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 { 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";
+import q from "../SidePanel.vue.js";
+import G from "../Logo.vue.js";
+const I = { class: "flex items-center gap-4 shrink-0 z-10" }, J = { key: 1 }, K = { key: 2 }, Q = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, W = { class: "space-y-1 p-2" }, X = { class: "space-y-1 p-2" }, Z = { class: "flex flex-col space-y-6 pt-4 h-full" }, _ = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, G = {
+}, ee = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
-}, I = {
+}, le = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, _ = /* @__PURE__ */ T({
+}, ue = /* @__PURE__ */ R({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
     position: { default: "sticky" },
     centerPosition: { default: "center" },
-    glass: { type: Boolean, default: !0 },
+    glass: { type: Boolean, default: !1 },
     border: { type: Boolean, default: !0 },
     floating: { type: Boolean, default: !1 },
     class: { default: "" },
@@ -30,37 +31,47 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
     mobileBreakpoint: { default: "md" },
     logoClass: { default: "" },
     contentClass: { default: "" },
+    menuClass: { default: "" },
     rightClass: { default: "" },
-    mobileTriggerClass: { default: "" }
+    mobileTriggerClass: { default: "" },
+    mobileMenuVariant: { default: "sidepanel" }
   },
   emits: ["toggle-mobile"],
-  setup(m, { emit: J }) {
-    const e = m, i = y(!1), p = y(!1);
-    j();
-    const x = () => {
-      p.value = window.scrollY > 10;
+  setup(m, { emit: oe }) {
+    const l = m, a = g(!1), b = g(!1);
+    V();
+    const w = g(null), h = g(null);
+    U(
+      w,
+      () => {
+        a.value = !1;
+      },
+      { ignore: [h] }
+    );
+    const $ = () => {
+      b.value = window.scrollY > 10;
     };
     L(() => {
-      window.addEventListener("scroll", x, { passive: !0 });
-    }), M(() => {
-      window.removeEventListener("scroll", x);
+      window.addEventListener("scroll", $, { passive: !0 });
+    }), N(() => {
+      window.removeEventListener("scroll", $);
     });
-    const C = g(() => {
-      const l = e.variant === "sidebar", s = {
+    const z = p(() => {
+      const e = l.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"
-      }, f = "bg-body", b = [
-        e.glass && (p.value || l || e.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
-        e.border && !e.floating ? l ? "border-r border-border" : "border-b border-border" : "",
-        e.floating ? "m-4 rounded-xl shadow-lg border border-border/50" : "",
-        p.value && !e.floating && !l && e.position === "sticky" ? "shadow-sm" : ""
+      }, f = "bg-body", v = [
+        l.glass && (b.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
+        l.border && !l.floating ? e ? "border-r border-border" : "border-b border-border" : "",
+        l.floating ? "m-4 rounded shadow-lg border border-border/50" : "",
+        b.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
       ];
       let c = "";
-      return l ? c = u.value.sidebarLayout : c = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${e.height}`, [f, s[e.position], ...b, c, e.class].join(" ");
-    }), u = g(() => {
-      const l = e.mobileBreakpoint || "md", s = {
+      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(" ");
+    }), u = p(() => {
+      const e = l.mobileBreakpoint || "md", o = {
         sm: "sm:hidden",
         md: "md:hidden",
         lg: "lg:hidden",
@@ -70,32 +81,32 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
-      }, b = {
-        sm: `flex flex-col max-sm:w-full ${e.compact ? "w-20" : e.width} h-auto sm:h-full sm:max-h-screen`,
-        md: `flex flex-col max-md:w-full ${e.compact ? "w-20" : e.width} h-auto md:h-full md:max-h-screen`,
-        lg: `flex flex-col max-lg:w-full ${e.compact ? "w-20" : e.width} h-auto lg:h-full lg:max-h-screen`,
-        xl: `flex flex-col max-xl:w-full ${e.compact ? "w-20" : e.width} h-auto xl:h-full xl:max-h-screen`
+      }, v = {
+        sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : l.width} h-auto sm:h-full sm:max-h-screen`,
+        md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : l.width} h-auto md:h-full md:max-h-screen`,
+        lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : l.width} h-auto lg:h-full lg:max-h-screen`,
+        xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : l.width} h-auto xl:h-full xl:max-h-screen`
       }, c = {
         sm: "sm:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         md: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         lg: "lg:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         xl: "xl:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background"
-      }, S = {
+      }, O = {
         sm: "hidden sm:flex flex-col h-full w-full overflow-hidden",
         md: "hidden md:flex flex-col h-full w-full overflow-hidden",
         lg: "hidden lg:flex flex-col h-full w-full overflow-hidden",
         xl: "hidden xl:flex flex-col h-full w-full overflow-hidden"
       };
       return {
-        mobileTrigger: s[l],
-        desktopContent: f[l],
-        sidebarLayout: b[l],
-        mobileHeader: c[l],
-        desktopSidebar: S[l]
+        mobileTrigger: o[e],
+        desktopContent: f[e],
+        sidebarLayout: v[e],
+        mobileHeader: c[e],
+        desktopSidebar: O[e]
       };
-    }), B = g(() => {
-      if (e.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
-      switch (e.centerPosition) {
+    }), S = p(() => {
+      if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
+      switch (l.centerPosition) {
         case "left":
           return "flex items-center justify-start";
         case "right":
@@ -104,77 +115,83 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
           return `${u.value.desktopContent} items-center justify-center mx-auto`;
       }
     });
-    N("navbar-context", {
-      compact: g(() => e.compact)
+    P("navbar-context", {
+      compact: p(() => l.compact)
     });
-    const z = A();
-    return O(
-      () => z.path,
+    const M = H();
+    C(
+      () => M.path,
       () => {
-        i.value = !1;
+        a.value = !1;
       }
-    ), (l, s) => (o(), r("nav", {
-      class: a(C.value),
+    );
+    const j = F(Y).greater(l.mobileBreakpoint);
+    return C(j, (e) => {
+      e && (a.value = !1);
+    }), (e, o) => (t(), n("nav", {
+      class: i(z.value),
       role: "navigation"
     }, [
-      m.variant === "header" ? (o(), r(k, { key: 0 }, [
-        n("div", U, [
-          t(l.$slots, "mobile-trigger", {
-            isOpen: i.value,
-            toggle: () => i.value = !i.value
+      m.variant === "header" ? (t(), n(x, { key: 0 }, [
+        r("div", I, [
+          s(e.$slots, "mobile-trigger", {
+            isOpen: a.value,
+            toggle: () => a.value = !a.value
           }, () => [
-            n("button", {
+            r("button", {
               type: "button",
-              class: a(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [u.value.mobileTrigger, e.mobileTriggerClass]]),
-              onClick: s[0] || (s[0] = (f) => i.value = !0)
+              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)
             }, [
-              h($, {
+              B(T, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[3] || (s[3] = n("span", { class: "sr-only" }, "Open Menu", -1))
+              o[3] || (o[3] = r("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ]),
-          l.$slots?.logo ? (o(), r("div", {
+          e.$slots?.logo ? (t(), n("div", {
             key: 0,
-            class: a(["shrink-0", e.logoClass])
+            class: i(["shrink-0", l.logoClass])
           }, [
-            t(l.$slots, "logo", {}, () => [
-              (o(), w(P(e.logo ? "img" : "div"), {
-                src: e.logo,
+            s(e.$slots, "logo", {}, () => [
+              (t(), y(E(l.logo ? "img" : "div"), {
+                src: l.logo,
                 class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
               }, {
-                default: v(() => [
-                  e.logo ? d("", !0) : (o(), w(D, {
+                default: k(() => [
+                  l.logo ? d("", !0) : (t(), y(G, {
                     key: 0,
                     class: "h-6 w-6"
                   })),
-                  !e.logo && e.logoAlt ? (o(), r("span", F, E(e.logoAlt), 1)) : e.logo ? d("", !0) : (o(), r("span", R, "Brand"))
+                  !l.logo && l.logoAlt ? (t(), n("span", J, A(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), n("span", K, "Brand"))
                 ]),
                 _: 1
               }, 8, ["src"]))
             ])
           ], 2)) : d("", !0),
-          l.$slots?.left ? (o(), r("div", {
+          e.$slots?.left ? (t(), n("div", {
             key: 1,
-            class: a(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", u.value.desktopContent])
+            class: i(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", u.value.desktopContent])
           }, [
-            t(l.$slots, "left")
+            s(e.$slots, "left")
           ], 2)) : d("", !0)
         ]),
-        l.$slots?.center ? (o(), r("div", {
+        e.$slots?.center ? (t(), n("div", {
           key: 0,
-          class: a([
-            B.value,
+          class: i([
+            S.value,
             // Width constraint to ensure it doesn't crush others, but allows simple resizing
             "max-w-full",
-            e.contentClass
+            l.contentClass
           ])
         }, [
-          t(l.$slots, "center")
+          s(e.$slots, "center")
         ], 2)) : d("", !0),
-        n("div", {
-          class: a(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
+        r("div", {
+          class: i(["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.
@@ -183,99 +200,121 @@ const U = { class: "flex items-center gap-4 shrink-0 z-10" }, F = { key: 1 }, R
               // 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.
             },
-            e.rightClass
+            l.rightClass
           ]])
         }, [
-          t(l.$slots, "right")
+          s(e.$slots, "right")
         ], 2)
-      ], 64)) : (o(), r(k, { key: 1 }, [
-        n("div", {
-          class: a(u.value.mobileHeader)
+      ], 64)) : (t(), n(x, { key: 1 }, [
+        r("div", {
+          class: i(u.value.mobileHeader)
         }, [
-          l.$slots?.logo ? t(l.$slots, "logo", { key: 0 }, () => [
-            s[4] || (s[4] = n("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+          e.$slots?.logo ? s(e.$slots, "logo", { key: 0 }, () => [
+            o[4] || (o[4] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
           ]) : d("", !0),
-          t(l.$slots, "mobile-trigger", {
-            isOpen: i.value,
-            toggle: () => i.value = !i.value
+          s(e.$slots, "mobile-trigger", {
+            isOpen: a.value,
+            toggle: () => a.value = !a.value
           }, () => [
-            n("button", {
+            r("button", {
               type: "button",
-              class: a(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", e.mobileTriggerClass]),
-              onClick: s[1] || (s[1] = (f) => i.value = !0)
+              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)
             }, [
-              h($, {
+              B(T, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[5] || (s[5] = n("span", { class: "sr-only" }, "Open Menu", -1))
+              o[5] || (o[5] = r("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ])
         ], 2),
-        n("div", {
-          class: a(u.value.desktopSidebar)
+        r("div", {
+          class: i(u.value.desktopSidebar)
         }, [
-          l.$slots?.logo ? (o(), r("div", {
+          e.$slots?.logo ? (t(), n("div", {
             key: 0,
-            class: a(["py-4.5 flex items-center px-4.5 z-10", e.logoClass])
+            class: i(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
           }, [
-            t(l.$slots, "logo", {}, () => [
-              s[6] || (s[6] = n("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
+            s(e.$slots, "logo", {}, () => [
+              o[6] || (o[6] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
             ])
           ], 2)) : d("", !0),
-          n("div", {
-            class: a(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", e.contentClass])
+          r("div", {
+            class: i(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
           }, [
-            t(l.$slots, "left"),
-            t(l.$slots, "default"),
-            t(l.$slots, "center")
+            s(e.$slots, "left"),
+            s(e.$slots, "default"),
+            s(e.$slots, "center")
           ], 2),
-          l.$slots?.right ? (o(), r("div", {
+          e.$slots?.right ? (t(), n("div", {
             key: 1,
-            class: a(["p-2 border-t border-border shrink-0 bg-background mt-auto", e.rightClass])
+            class: i(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
           }, [
-            t(l.$slots, "right")
+            s(e.$slots, "right")
           ], 2)) : d("", !0)
         ], 2)
       ], 64)),
-      h(H, {
-        show: i.value,
-        "onUpdate:show": s[2] || (s[2] = (f) => i.value = f),
+      l.mobileMenuVariant === "dropdown" ? (t(), n(x, { key: 2 }, [
+        a.value ? (t(), n("div", {
+          key: 0,
+          ref_key: "mobileMenuRef",
+          ref: w,
+          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", {}, () => [
+              r("div", W, [
+                s(e.$slots, "left")
+              ]),
+              o[7] || (o[7] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+              r("div", X, [
+                s(e.$slots, "center")
+              ])
+            ])
+          ])
+        ], 2)) : d("", !0)
+      ], 64)) : (t(), y(q, {
+        key: 3,
+        show: a.value,
+        "onUpdate:show": o[2] || (o[2] = (f) => a.value = f),
         position: "left",
         size: "sm",
         triggerClass: u.value.mobileTrigger,
-        class: a(["z-60", u.value.mobileTrigger]),
+        class: i(["z-60", u.value.mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, {
-        header: v(() => [
-          t(l.$slots, "logo", {}, () => [
-            s[7] || (s[7] = V("Brand", -1))
+        header: k(() => [
+          s(e.$slots, "logo", {}, () => [
+            o[8] || (o[8] = D("Brand", -1))
           ])
         ]),
-        default: v(() => [
-          n("div", Y, [
-            m.variant === "header" ? (o(), r("div", q, [
-              t(l.$slots, "mobile-menu", {}, () => [
-                t(l.$slots, "left"),
-                s[8] || (s[8] = n("div", { class: "h-px bg-border my-2" }, null, -1)),
-                t(l.$slots, "center")
+        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(), r("div", G, [
-              t(l.$slots, "left"),
-              t(l.$slots, "default"),
-              t(l.$slots, "center")
+            ])) : (t(), n("div", ee, [
+              s(e.$slots, "left"),
+              s(e.$slots, "default"),
+              s(e.$slots, "center")
             ])),
-            l.$slots?.right ? (o(), r("div", I, [
-              t(l.$slots, "right")
+            e.$slots?.right ? (t(), n("div", le, [
+              s(e.$slots, "right")
             ])) : d("", !0)
           ])
         ]),
         _: 3
-      }, 8, ["show", "triggerClass", "class"])
+      }, 8, ["show", "triggerClass", "class"]))
     ], 2));
   }
 });
 export {
-  _ as default
+  ue as default
 };

package/components/Slider.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as E, ref as k, watch as I, computed as r, openBlock as i, createElementBlock as v, normalizeClass as s, createBlock as N, createCommentVNode as f, toDisplayString as V, createElementVNode as b, normalizeStyle as y, withDirectives as R, vModelText as F } from "vue";
-import H from "./Icon.vue.js";
-const U = {
+import { defineComponent as I, ref as k, watch as N, computed as r, openBlock as i, createElementBlock as v, normalizeClass as s, createBlock as R, createCommentVNode as f, toDisplayString as C, createElementVNode as b, normalizeStyle as x, withDirectives as F, vModelText as H } from "vue";
+import U from "./Icon.vue.js";
+const W = {
   key: 1,
   class: "text-sm font-medium whitespace-nowrap cursor-pointer"
-}, j = ["min", "max", "step", "disabled"], G = /* @__PURE__ */ E({
+}, j = ["min", "max", "step", "disabled"], G = /* @__PURE__ */ I({
   __name: "Slider",
   props: {
     min: { default: 0 },
@@ -19,39 +19,53 @@ const U = {
     size: { default: "md" }
   },
   emits: ["update:modelValue", "change", "iconClick"],
-  setup(t, { emit: C }) {
-    const l = t, d = C, u = k(!1), g = k(!1), o = k(l.modelValue);
-    I(
-      () => l.modelValue,
+  setup(l, { emit: $ }) {
+    const t = l, d = $, o = k(!1), g = k(!1), u = k(t.modelValue);
+    N(
+      () => t.modelValue,
       (n) => {
-        o.value = n;
+        u.value = n;
       }
     );
-    const p = r(() => l.centerOrigin !== void 0 ? l.centerOrigin : l.min < 0 && l.max > 0), x = r(() => l.max - l.min), h = r(() => (o.value - l.min) / x.value * 100), w = r(() => (0 - l.min) / x.value * 100), c = (n) => `calc(${n}% + (8px - ${n * 0.16}px))`, $ = r(() => {
-      if (p.value) {
-        const n = Math.min(h.value, w.value), e = Math.max(h.value, w.value), a = c(n), T = c(e);
+    const h = r(() => t.centerOrigin !== void 0 ? t.centerOrigin : t.min < 0 && t.max > 0), y = r(() => t.max - t.min), p = r(() => (u.value - t.min) / y.value * 100), w = r(() => (0 - t.min) / y.value * 100), V = r(() => {
+      switch (t.size) {
+        case "xs":
+          return 10;
+        case "sm":
+          return 12;
+        case "lg":
+          return 16;
+        default:
+          return 14;
+      }
+    }), c = (n) => {
+      const e = V.value / 2, a = V.value;
+      return `calc(${n}% + (${e}px - ${a * (n / 100)}px))`;
+    }, z = r(() => {
+      if (h.value) {
+        const n = Math.min(p.value, w.value), e = Math.max(p.value, w.value), a = c(n), E = c(e);
         return {
           left: a,
-          width: `calc(${T} - ${a})`
+          width: `calc(${E} - ${a})`
         };
       } else
         return {
           left: "0%",
-          width: c(h.value)
+          width: c(p.value)
         };
-    }), z = r(() => p.value ? o.value < 0 ? "rounded-r-none" : o.value > 0 ? "rounded-l-none" : "" : ""), M = r(() => ({
-      left: c(h.value)
-    })), B = () => {
-      d("update:modelValue", o.value);
-    }, S = () => {
-      d("change", o.value), u.value = !1;
-    }, D = r(() => Math.abs(l.modelValue) > 1e-3), P = () => {
-      if (l.disabled) return;
-      const n = p.value ? 0 : l.min;
-      o.value = n, d("update:modelValue", n), d("change", n);
-    }, O = r(() => {
-      const n = l.step.toString().split(".")[1]?.length || 0;
-      return o.value.toFixed(n);
+    }), M = r(() => h.value ? u.value < 0 ? "rounded-r-none" : u.value > 0 ? "rounded-l-none" : "" : ""), B = r(() => ({
+      left: c(p.value)
+    })), S = () => {
+      d("update:modelValue", u.value);
+    }, D = () => {
+      d("change", u.value), o.value = !1;
+    }, P = r(() => Math.abs(t.modelValue) > 1e-3), O = () => {
+      if (t.disabled) return;
+      const n = h.value ? 0 : t.min;
+      u.value = n, d("update:modelValue", n), d("change", n);
+    }, T = r(() => {
+      const n = t.step.toString().split(".")[1]?.length || 0;
+      return u.value.toFixed(n);
     }), m = r(() => ({
       xs: {
         track: "h-0.5",
@@ -77,24 +91,24 @@ const U = {
         wrapper: "h-7",
         tick: "h-4"
       }
-    })[l.size]);
+    })[t.size]);
     return (n, e) => (i(), v("div", {
-      class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none": t.disabled }]),
+      class: s(["slider-wrapper flex items-center gap-3 w-full select-none touch-none", { "opacity-50 pointer-events-none": l.disabled }]),
       onMouseenter: e[6] || (e[6] = (a) => g.value = !0),
       onMouseleave: e[7] || (e[7] = (a) => g.value = !1)
     }, [
-      t.label || t.icon ? (i(), v("div", {
+      l.label || l.icon ? (i(), v("div", {
         key: 0,
-        class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": u.value || g.value }, t.labelClass || "text-muted-foreground"]]),
+        class: s(["flex items-center gap-2 min-w-fit cursor-pointer transition-colors", [{ "text-primary": o.value || g.value }, l.labelClass || "text-muted-foreground"]]),
         onClick: e[0] || (e[0] = (a) => d("iconClick")),
         title: "Double-click to reset"
       }, [
-        t.icon ? (i(), N(H, {
+        l.icon ? (i(), R(U, {
           key: 0,
-          icon: t.icon,
+          icon: l.icon,
           class: "h-4 w-4"
         }, null, 8, ["icon"])) : f("", !0),
-        t.label ? (i(), v("label", U, V(t.label), 1)) : f("", !0)
+        l.label ? (i(), v("label", W, C(l.label), 1)) : f("", !0)
       ], 2)) : f("", !0),
       b("div", {
         class: s(["relative flex-1 flex items-center group", m.value.wrapper])
@@ -102,61 +116,61 @@ const U = {
         b("div", {
           class: s(["absolute w-full bg-secondary rounded-full overflow-hidden", m.value.track])
         }, null, 2),
-        p.value ? (i(), v("div", {
+        h.value ? (i(), v("div", {
           key: 0,
           class: s(["absolute top-1/2 w-0.5 bg-muted-foreground/30 rounded transform -translate-y-1/2 z-0", m.value.tick]),
-          style: y({ left: c(w.value) })
+          style: x({ left: c(w.value) })
         }, null, 6)) : f("", !0),
         b("div", {
           class: s(["absolute bg-primary rounded-full will-change-transform", [
             {
-              "bg-muted-foreground": t.disabled,
-              "transition-all duration-75 ease-out": !u.value,
-              "duration-0": u.value
+              "bg-muted-foreground": l.disabled,
+              "transition-all duration-75 ease-out": !o.value,
+              "duration-0": o.value
             },
             m.value.track,
-            z.value
+            M.value
           ]]),
-          style: y($.value)
+          style: x(z.value)
         }, null, 6),
         b("div", {
-          class: s(["absolute top-1/2 bg-background border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10", [
+          class: s(["absolute top-1/2 bg-background -ml-px border border-border shadow-sm rounded-full transform -translate-y-1/2 -translate-x-1/2 pointer-events-none transition-transform duration-100 ease-out z-10", [
             {
-              "border-primary shadow-md scale-110": u.value,
-              "border-primary": D.value
+              "border-primary shadow-md scale-110": o.value,
+              "border-primary": P.value
             },
             m.value.thumb
           ]]),
-          style: y(M.value)
+          style: x(B.value)
         }, null, 6),
-        R(b("input", {
+        F(b("input", {
           type: "range",
-          "onUpdate:modelValue": e[1] || (e[1] = (a) => o.value = a),
-          min: t.min,
-          max: t.max,
-          step: t.step,
-          disabled: t.disabled,
-          onInput: B,
-          onChange: S,
-          onMousedown: e[2] || (e[2] = (a) => u.value = !0),
-          onTouchstart: e[3] || (e[3] = (a) => u.value = !0),
-          onMouseup: e[4] || (e[4] = (a) => u.value = !1),
-          onTouchend: e[5] || (e[5] = (a) => u.value = !1),
+          "onUpdate:modelValue": e[1] || (e[1] = (a) => u.value = a),
+          min: l.min,
+          max: l.max,
+          step: l.step,
+          disabled: l.disabled,
+          onInput: S,
+          onChange: D,
+          onMousedown: e[2] || (e[2] = (a) => o.value = !0),
+          onTouchstart: e[3] || (e[3] = (a) => o.value = !0),
+          onMouseup: e[4] || (e[4] = (a) => o.value = !1),
+          onTouchend: e[5] || (e[5] = (a) => o.value = !1),
           class: "slider-input absolute inset-0 w-full h-full opacity-0 cursor-pointer z-20 m-0 p-0"
         }, null, 40, j), [
           [
-            F,
-            o.value,
+            H,
+            u.value,
             void 0,
             { number: !0 }
           ]
         ])
       ], 2),
-      t.showValue ? (i(), v("span", {
+      l.showValue ? (i(), v("span", {
         key: 1,
-        onDblclick: P,
+        onDblclick: O,
         class: "font-mono tabular-nums text-muted-foreground text-right min-w-6 text-sm"
-      }, V(O.value), 33)) : f("", !0)
+      }, C(T.value), 33)) : f("", !0)
     ], 34));
   }
 });

package/components/Tabes/Tabes.vue.js

@@ -39,7 +39,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
     const k = (e) => {
       e.disabled || (v("update:modelValue", e.value), v("change", e.value));
     }, C = p(() => ["inline-flex rounded-lg relative isolate", {
-      surface: "bg-secondary p-1",
+      surface: "bg-secondary/80 p-1",
       primary: "bg-secondary p-1",
       secondary: "bg-secondary p-1",
       danger: "bg-danger/10 p-1",

package/components/ThemeToggle.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
 export default _default;

package/components/ThemeToggle.vue.js

@@ -1,18 +1,20 @@
-import { defineComponent as n, openBlock as i, createBlock as c, unref as e } from "vue";
+import { defineComponent as n, openBlock as c, createElementBlock as i, createVNode as l, unref as e } from "vue";
 import { useTheme as m } from "../composables/useTheme.js";
 import r from "./Button.vue.js";
-const p = /* @__PURE__ */ n({
+const d = /* @__PURE__ */ n({
   __name: "ThemeToggle",
-  setup(l) {
+  setup(a) {
     const { theme: o, toggleTheme: t } = m();
-    return (a, h) => (i(), c(r, {
-      icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
-      variant: "secondary",
-      title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
-      onClick: e(t)
-    }, null, 8, ["icon", "title", "onClick"]));
+    return (s, u) => (c(), i("span", null, [
+      l(r, {
+        icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
+        variant: "secondary",
+        title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
+        onClick: e(t)
+      }, null, 8, ["icon", "title", "onClick"])
+    ]));
   }
 });
 export {
-  p as default
+  d as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -131,6 +131,7 @@
 .dark .tooltip-container,
 .bg-card,
 .theme-section,
+.light,
 :root {
 
   --color-white: #ffffff;
@@ -197,11 +198,11 @@
   --color-background: var(--color-body);
   --color-foreground: var(--color-gray-900);
 
-  --color-border: color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2));
-  --color-input: var(--color-border);
+  --color-border: color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2));
+  --color-input: color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2));
 
 
-  --color-secondary: color-mix(in oklab, var(--color-mixture-1) 95.5%, var(--color-mixture-2));
+  --color-secondary: color-mix(in oklab, var(--color-mixture-1) 94.8%, var(--color-mixture-2));
   --color-secondary-foreground: var(--color-foreground);
 
   --color-muted-light: var(--color-gray-50);
@@ -222,6 +223,13 @@
   --date-picker-radius: var(--radius) !important;
 }
 
+.light {
+  --color-white: #ffffff !important;
+  --color-mixture-1: #ffffff !important;
+  --color-mixture-2: #0c0c0c !important;
+  background-color: var(--color-white);
+}
+
 .dark {
   --color-white: #0b0b0b !important;
   --color-mixture-1: #0c0c0c !important;
@@ -265,7 +273,7 @@
 
   /* Variants (vlite3 custom) */
   --color-primary-light: #212121;
-  --color-primary: #fafafa;
+  --color-primary: #E4E6EA;
   --color-primary-dark: #d4d4d8;
   --color-primary-foreground: #18181b;
   --color-primary-fg: #18181b;
@@ -310,14 +318,15 @@
 
 .dark .modal-body,
 .dark .sidepanel-body {
-  --color-white: #171717 !important;
+  --color-white: #141414 !important;
   --color-mixture-1: #151515 !important;
   --color-mixture-2: #ffffff !important;
+  --color-input: color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2));
 }
 
 .dark .tooltip-container {
-  --color-white: #181818 !important;
-  --color-mixture-1: #1f2020 !important;
+  --color-white: #131313 !important;
+  --color-mixture-1: #161616 !important;
   --color-mixture-2: #ffffff !important;
 }
 
@@ -338,17 +347,17 @@
 }
 
 .dark .bg-card {
-  --color-body: #131313 !important;
-  --color-mixture-1: #191818 !important;
+  --color-body: #111 !important;
+  --color-mixture-1: #111 !important;
   --color-mixture-2: #ffffff !important;
   background-color: var(--color-body) !important;
 }
 
 .bg-card {
   --color-body: #FAFAFA !important;
-  --color-mixture-1: #fbfbfb !important;
+  --color-mixture-1: #FAFAFA !important;
   --color-mixture-2: #000000 !important;
-  background-color: #FBFBFB !important;
+  background-color: #FAFAFA !important;
   border-color: color-mix(in oklab, var(--color-mixture-1) 95%, var(--color-mixture-2));
 }
 

package/types/navbar.type.d.ts

@@ -27,6 +27,8 @@ export interface NavbarProps {
     mobileBreakpoint?: 'sm' | 'md' | 'lg' | 'xl';
     logoClass?: string;
     contentClass?: string;
+    menuClass?: string;
     rightClass?: string;
     mobileTriggerClass?: string;
+    mobileMenuVariant?: 'sidepanel' | 'dropdown';
 }