vlite3 0.0.4 → 0.0.7

package/README.md

@@ -30,28 +30,16 @@ import 'vlite3/style.css'
 
 This library relies on Tailwind CSS for utility classes. You must configure your project to scan the library's files so that the necessary classes are generated.
 
-#### Tailwind CSS v3 (`tailwind.config.js`)
-
-Add the library path to your `content` array:
-
-```js
-module.exports = {
-	content: [
-		'./index.html',
-		'./src/**/*.{vue,js,ts,jsx,tsx}',
-		'./node_modules/vlite3/dist/**/*.{js,vue}', // <--- Add this line
-	],
-	// ...
-}
-```
-
 #### Tailwind CSS v4
 
 If you are using the new CSS-first configuration, add the source path:
 
 ```css
 @import 'tailwindcss';
-@source "../node_modules/vlite3/dist";
+@layer theme, base, components, utilities;
+
+@import 'vlite3/style.css';
+@source "../node_modules/vlite3";
 ```
 
 ## Usage

package/components/Avatar.vue.js

@@ -31,9 +31,9 @@ const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
       xs: "h-6 w-6 text-[10px]",
       sm: "h-8 w-8 text-xs",
       md: "h-10 w-10 text-sm",
-      lg: "h-12 w-12 text-base",
-      xl: "h-14 w-14 text-lg",
-      "2xl": "h-16 w-16 text-xl"
+      lg: "h-14 w-14 text-base",
+      xl: "h-20 w-20 text-lg",
+      "2xl": "h-22 w-22 text-xl"
     }, h = {
       none: "rounded-none",
       sm: "rounded-sm",

package/components/AvatarUploader/AvatarUploader.vue.d.ts

@@ -10,6 +10,7 @@ export interface Props {
     fallback?: string;
     alt?: string;
     maxSize?: number;
+    className?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

package/components/AvatarUploader/AvatarUploader.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, ref as z, computed as f, openBlock as r, createElementBlock as o, normalizeClass as n, createVNode as l, unref as C, withCtx as p, createElementVNode as A, createCommentVNode as g, withModifiers as B } from "vue";
+import { defineComponent as w, ref as z, computed as f, openBlock as r, createElementBlock as n, normalizeClass as l, createVNode as o, unref as C, withCtx as A, createElementVNode as B, createCommentVNode as g, withModifiers as N } from "vue";
 import u from "../Icon.vue.js";
 import j from "../FilePicker/FilePicker.vue.js";
 import E from "../Avatar.vue.js";
@@ -13,69 +13,70 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
     disabled: { type: Boolean, default: !1 },
     fallback: {},
     alt: { default: "Avatar" },
-    maxSize: {}
+    maxSize: {},
+    className: {}
   },
   emits: ["update:modelValue", "change", "error"],
   setup(e, { emit: v }) {
-    const s = e, t = v, i = z(null), c = f(() => i.value || s.modelValue), h = (a) => {
+    const s = e, t = v, d = z(null), c = f(() => d.value || s.modelValue), h = (a) => {
       if (!a || Array.isArray(a)) {
         Array.isArray(a) && a.length === 0 && m();
         return;
       }
-      a.base64 && (i.value = a.base64, t("update:modelValue", a.base64)), t("change", a);
+      a.base64 && (d.value = a.base64, t("update:modelValue", a.base64)), t("change", a);
     }, y = (a) => {
       t("error", a);
     }, m = () => {
-      i.value = null, t("update:modelValue", null), t("change", null);
+      d.value = null, t("update:modelValue", null), t("change", null);
     }, k = f(() => [
       "group relative inline-block",
       // If rounded is full, we need overflow hidden on the container to clip the overlay
       s.rounded === "full" ? "rounded-full" : ""
     ].join(" "));
-    return (a, b) => (r(), o("div", {
-      class: n(k.value)
+    return (a, b) => (r(), n("div", {
+      class: l(k.value)
     }, [
-      l(C(j), {
+      o(C(j), {
         disabled: !e.editable || e.disabled || e.loading,
         "return-format": "base64",
         "file-types": ["image/jpeg", "image/png", "image/webp", "image/gif"],
         "max-size": e.maxSize,
         class: "w-auto h-auto block",
-        onChange: b[0] || (b[0] = (d) => h(d)),
+        onChange: b[0] || (b[0] = (i) => h(i)),
         onError: y
       }, {
-        trigger: p(({ trigger: d, isLoading: x }) => [
-          A("div", {
-            class: n(["relative cursor-pointer transition-transform active:scale-95", { "cursor-default": !e.editable || e.disabled }]),
-            onClick: (N) => e.editable && !e.disabled ? d() : null
+        trigger: A(({ trigger: i, isLoading: x }) => [
+          B("div", {
+            class: l(["relative cursor-pointer transition-transform active:scale-95", { "cursor-default": !e.editable || e.disabled }]),
+            onClick: (R) => e.editable && !e.disabled ? i() : null
           }, [
-            l(E, {
+            o(E, {
               src: c.value || void 0,
               fallback: e.fallback,
               alt: e.alt,
               size: e.size,
               rounded: e.rounded,
-              class: "ring-offset-background transition-shadow group-hover:ring-2 group-hover:ring-primary/20"
-            }, null, 8, ["src", "fallback", "alt", "size", "rounded"]),
-            e.loading || x ? (r(), o("div", {
+              class: l(e.className)
+            }, null, 8, ["src", "fallback", "alt", "size", "rounded", "class"]),
+            e.loading || x ? (r(), n("div", {
               key: 0,
-              class: n([
+              class: l([
                 "absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-[1px] text-white transition-opacity",
                 e.rounded === "full" ? "rounded-full" : "rounded-md"
               ])
             }, [
-              l(u, {
+              o(u, {
                 icon: "lucide:loader-2",
                 class: "animate-spin w-1/3 h-1/3"
               })
-            ], 2)) : e.editable && !e.disabled ? (r(), o("div", {
+            ], 2)) : e.editable && !e.disabled ? (r(), n("div", {
               key: 1,
-              class: n([
+              class: l([
                 "absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100",
                 e.rounded === "full" ? "rounded-full" : "rounded-md"
               ])
             }, [
-              l(u, {
+              o(u, {
                 icon: "lucide:camera",
                 class: "w-1/3 h-1/3"
               })
@@ -84,14 +85,14 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
         ]),
         _: 1
       }, 8, ["disabled", "max-size"]),
-      c.value && e.editable && !e.disabled && !e.loading ? (r(), o("button", {
+      c.value && e.editable && !e.disabled && !e.loading ? (r(), n("button", {
         key: 0,
         type: "button",
         class: "absolute -top-1 -right-1 z-10 p-1 bg-background border border-border rounded-full text-muted-foreground shadow-sm hover:text-destructive hover:border-destructive transition-colors opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 duration-200 transform",
-        onClick: B(m, ["stop"]),
+        onClick: N(m, ["stop"]),
         title: "Remove image"
       }, [
-        l(u, {
+        o(u, {
           icon: "lucide:x",
           class: "w-3 h-3"
         })

package/components/Dropdown/DropdownBooleanItem.vue.d.ts

@@ -0,0 +1,12 @@
+import { IDropdownOption } from '../../types';
+interface Props {
+    option: IDropdownOption;
+    value: boolean;
+    focused?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: boolean, option: IDropdownOption) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onChange?: (value: boolean, option: IDropdownOption) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Dropdown/DropdownBooleanItem.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as r, openBlock as i, createElementBlock as m, withModifiers as d, normalizeClass as u, createElementVNode as c, createBlock as f, createCommentVNode as p, toDisplayString as g, createVNode as h } from "vue";
+import v from "../Switch.vue.js";
+import x from "../Icon.vue.js";
+const k = { class: "flex items-center gap-2 flex-1 min-w-0" }, y = { class: "truncate font-medium" }, V = /* @__PURE__ */ r({
+  __name: "DropdownBooleanItem",
+  props: {
+    option: {},
+    value: { type: Boolean },
+    focused: { type: Boolean }
+  },
+  emits: ["change"],
+  setup(e, { emit: a }) {
+    const l = e, s = a, o = (t) => {
+      s("change", t, l.option);
+    };
+    return (t, n) => (i(), m("div", {
+      "data-dropdown-item": "",
+      class: u(["relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none transition-colors", [
+        e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+      ]]),
+      onClick: n[0] || (n[0] = d((w) => o(!e.value), ["stop"]))
+    }, [
+      c("div", k, [
+        e.option.icon ? (i(), f(x, {
+          key: 0,
+          icon: e.option.icon,
+          class: "h-4 w-4 shrink-0 opacity-70"
+        }, null, 8, ["icon"])) : p("", !0),
+        c("span", y, g(e.option.label), 1)
+      ]),
+      h(v, {
+        "model-value": e.value,
+        class: "ml-3 shrink-0 scale-75 origin-right",
+        "onUpdate:modelValue": o
+      }, null, 8, ["model-value"])
+    ], 2));
+  }
+});
+export {
+  V as default
+};

package/components/Dropdown/DropdownBooleanItem.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DropdownBooleanItem.vue.js";
+export {
+  f as default
+};

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,29 +1,30 @@
-import { defineComponent as U, defineAsyncComponent as q, ref as $, computed as _, watch as B, toRef as G, onMounted as J, onBeforeUnmount as Q, openBlock as o, createElementBlock as c, createVNode as p, createCommentVNode as i, renderSlot as h, createElementVNode as y, unref as n, normalizeStyle as W, normalizeClass as C, createBlock as v, Fragment as T, renderList as X, withCtx as N, toDisplayString as Y, mergeProps as Z, nextTick as ee } from "vue";
-import x from "../Icon.vue.js";
-import te from "../Input.vue.js";
-import le from "./DropdownItem.vue.js";
-import se from "./DropdownGroupedLayout.vue.js";
-import { useDropdownNavigation as oe } from "./composables/useDropdownNavigation.js";
-import { useDropdownIds as ne } from "./composables/useDropdownIds.js";
-const re = { class: "w-full min-w-[150px] flex flex-col" }, de = {
+import { defineComponent as G, defineAsyncComponent as J, ref as B, computed as I, watch as _, toRef as Q, onMounted as W, onBeforeUnmount as X, openBlock as o, createElementBlock as c, createVNode as x, createCommentVNode as u, renderSlot as v, createElementVNode as g, unref as n, normalizeStyle as Y, normalizeClass as C, createBlock as m, Fragment as T, renderList as Z, withCtx as N, toDisplayString as ee, mergeProps as te, nextTick as le } from "vue";
+import M from "../Icon.vue.js";
+import se from "../Input.vue.js";
+import oe from "./DropdownItem.vue.js";
+import ne from "./DropdownBooleanItem.vue.js";
+import re from "./DropdownGroupedLayout.vue.js";
+import { useDropdownNavigation as ae } from "./composables/useDropdownNavigation.js";
+import { useDropdownIds as ce } from "./composables/useDropdownIds.js";
+const de = { class: "w-full min-w-[150px] flex flex-col" }, ie = {
   key: 0,
   class: "bg-body border-b mb-1 z-10 rounded-t-md shrink-0"
-}, ce = {
+}, ue = {
   key: 1,
   class: "shrink-0"
-}, ae = {
+}, fe = {
   key: 0,
   class: "px-2 py-6 text-center text-sm text-muted-foreground"
-}, ie = {
+}, me = {
   key: 0,
   class: "h-px bg-border my-1 mx-1"
-}, ue = ["onMouseenter"], fe = { class: "flex items-center gap-2 flex-1 min-w-0" }, me = { class: "truncate" }, he = {
+}, he = ["onMouseenter"], ye = { class: "flex items-center gap-2 flex-1 min-w-0" }, ve = { class: "truncate" }, ge = {
   key: 3,
   class: "flex justify-center py-2"
-}, ye = {
+}, ke = {
   key: 2,
   class: "shrink-0 border-t mt-1 pt-1"
-}, Se = /* @__PURE__ */ U({
+}, Be = /* @__PURE__ */ G({
   __name: "DropdownMenu",
   props: {
     options: { default: () => [] },
@@ -43,66 +44,75 @@ const re = { class: "w-full min-w-[150px] flex flex-col" }, de = {
     remote: { type: Boolean, default: !1 }
   },
   emits: ["select", "close", "load-more", "search"],
-  setup(r, { emit: D }) {
-    const E = q(() => import("./Dropdown.vue2.js")), t = r, u = D, w = $(null), f = $(""), { getMenuId: P, getAllRecursiveIds: V } = ne(), j = _(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
-    let g = null;
-    B(f, (e) => {
-      t.remote && (g && clearTimeout(g), g = setTimeout(() => {
-        e && u("search", e);
+  setup(a, { emit: V }) {
+    const j = J(() => import("./Dropdown.vue2.js")), t = a, i = V, S = B(null), f = B(""), { getMenuId: D, getAllRecursiveIds: E } = ce(), P = I(() => t.remote ? t.searchable : t.searchable && (t.options?.length || 0) > 9);
+    let k = null;
+    _(f, (e) => {
+      t.remote && (k && clearTimeout(k), k = setTimeout(() => {
+        e && i("search", e);
       }, 100));
     });
     const H = (e) => {
       const s = e.target;
-      s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && u("load-more");
+      s.scrollTop + s.clientHeight >= s.scrollHeight - 50 && t.hasMore && !t.loading && i("load-more");
     }, b = (e, s) => {
-      e.disabled || u("select", e);
+      e.disabled || i("select", e);
     }, {
-      focusedIndex: k,
-      isKeyboardMode: S,
+      focusedIndex: h,
+      isKeyboardMode: p,
       filteredOptions: R,
       // rename
-      handleKeyDown: I,
-      handleMouseMove: M,
-      onMouseEnterItem: O,
+      handleKeyDown: O,
+      handleMouseMove: $,
+      onMouseEnterItem: w,
       scrollToIndex: z
-    } = oe({
-      options: G(t, "options"),
+    } = ae({
+      options: Q(t, "options"),
       searchQuery: f,
-      containerRef: w,
-      emit: (e, ...s) => u(e, ...s),
+      containerRef: S,
+      emit: (e, ...s) => i(e, ...s),
       handleSelect: (e, s) => b(e)
-    }), m = _(() => t.remote ? f.value ? t.options : t.cachedOptions.length ? t.cachedOptions : t.options : R.value), A = (e) => {
+    }), y = I(() => t.remote ? f.value ? t.options : t.cachedOptions.length ? t.cachedOptions : t.options : R.value), A = (e) => {
       if (!(!t.selected || typeof t.selected != "object") && e.key && e.key in t.selected)
         return t.selected[e.key];
-    }, L = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, F = (e, s) => {
+    }, L = (e) => e.disabled ? !1 : Array.isArray(t.selected) ? t.selected.includes(e.value) : t.selected && typeof t.selected == "object" && e.key ? t.selected[e.key] === e.value : t.selected === e.value, F = (e) => !e.key || !t.selected || typeof t.selected != "object" ? !1 : !!t.selected[e.key], K = (e, s) => {
+      if (!s.key) return;
+      const l = {
+        label: s.label,
+        value: e,
+        key: s.key,
+        data: s.data
+      };
+      i("select", l);
+    }, U = (e, s) => {
       let l = s.value;
       e.key && (l = { [e.key]: l });
-      const d = {
+      const r = {
         label: e.label,
         value: l,
         data: s.data,
         key: e.key
       };
-      u("select", d);
-    }, K = async () => {
-      await ee();
+      i("select", r);
+    }, q = async () => {
+      await le();
       let e = -1;
       t.layout !== "grouped" && (t.selectedIndex !== null && t.selectedIndex >= 0 ? e = t.selectedIndex : t.selected !== void 0 && typeof t.selected != "object" && (e = t.options.findIndex(
         (s) => s.value === t.selected
       )), e !== -1 && z(e));
     };
-    return B(
-      () => m.value,
+    return _(
+      () => y.value,
       () => {
-        k.value = -1;
+        h.value = -1;
       }
-    ), J(() => {
-      K(), window.addEventListener("keydown", I);
-    }), Q(() => {
-      window.removeEventListener("keydown", I);
-    }), (e, s) => (o(), c("div", re, [
-      j.value ? (o(), c("div", de, [
-        p(te, {
+    ), W(() => {
+      q(), window.addEventListener("keydown", O);
+    }), X(() => {
+      window.removeEventListener("keydown", O);
+    }), (e, s) => (o(), c("div", de, [
+      P.value ? (o(), c("div", ie, [
+        x(se, {
           modelValue: f.value,
           "onUpdate:modelValue": s[0] || (s[0] = (l) => f.value = l),
           placeholder: "Search...",
@@ -111,101 +121,108 @@ const re = { class: "w-full min-w-[150px] flex flex-col" }, de = {
           variant: "transparent",
           "show-clear-button": !1
         }, null, 8, ["modelValue"])
-      ])) : i("", !0),
-      e.$slots.header ? (o(), c("div", ce, [
-        h(e.$slots, "header")
-      ])) : i("", !0),
-      y("div", {
+      ])) : u("", !0),
+      e.$slots.header ? (o(), c("div", ue, [
+        v(e.$slots, "header")
+      ])) : u("", !0),
+      g("div", {
         ref_key: "containerRef",
-        ref: w,
+        ref: S,
         tabindex: "0",
         role: "menu",
         class: C([
           "w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1",
           t.class
         ]),
-        style: W({ maxHeight: t.maxHeight }),
+        style: Y({ maxHeight: t.maxHeight }),
         onMousemove: s[1] || (s[1] = //@ts-ignore
-        (...l) => n(M) && n(M)(...l)),
+        (...l) => n($) && n($)(...l)),
         onScroll: H
       }, [
-        m.value.length === 0 && r.options?.length > 0 && !r.loading ? (o(), c("div", ae, " No options found ")) : i("", !0),
-        r.layout === "grouped" ? (o(), v(se, {
+        y.value.length === 0 && a.options?.length > 0 && !a.loading ? (o(), c("div", fe, " No options found ")) : u("", !0),
+        a.layout === "grouped" ? (o(), m(re, {
           key: 1,
-          options: m.value,
-          selected: r.selected,
-          selectable: r.selectable,
-          columns: r.columns,
+          options: y.value,
+          selected: a.selected,
+          selectable: a.selectable,
+          columns: a.columns,
           onSelect: b
-        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), c(T, { key: 2 }, X(m.value, (l, d) => (o(), c(T, { key: d }, [
-          l.label === "---" ? (o(), c("div", ie)) : l.children && l.children.length > 0 ? (o(), v(n(E), {
+        }, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), c(T, { key: 2 }, Z(y.value, (l, r) => (o(), c(T, { key: r }, [
+          l.label === "---" ? (o(), c("div", me)) : l.data?.isBoolean ? (o(), m(ne, {
             key: 1,
+            option: l,
+            value: F(l),
+            focused: n(p) && n(h) === r,
+            onChange: K,
+            onMouseenter: (d) => n(w)(r)
+          }, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), m(n(j), {
+            key: 2,
             position: l.position || t.nestedPosition,
             offset: l.offset || t.nestedOffset,
             class: "w-full",
             options: l.children,
             selected: A(l),
-            menuId: n(P)(l),
+            menuId: n(D)(l),
             nestedPosition: t.nestedPosition,
             nestedOffset: t.nestedOffset,
             selectable: t.selectable,
-            ignoreClickOutside: n(V)(l.children),
-            onOnSelect: (a) => F(l, a)
+            ignoreClickOutside: n(E)(l.children),
+            onOnSelect: (d) => U(l, d)
           }, {
             trigger: N(() => [
-              y("div", {
+              g("div", {
                 "data-dropdown-item": "",
                 class: C(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors justify-between w-full", [
-                  n(S) && n(k) === d ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
+                  n(p) && n(h) === r ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
                   l.disabled ? "opacity-50 cursor-not-allowed" : ""
                 ]]),
-                onMouseenter: (a) => n(O)(d)
+                onMouseenter: (d) => n(w)(r)
               }, [
-                y("div", fe, [
-                  l.icon ? (o(), v(x, {
+                g("div", ye, [
+                  l.icon ? (o(), m(M, {
                     key: 0,
                     icon: l.icon,
                     class: "h-4 w-4 shrink-0 opacity-70"
-                  }, null, 8, ["icon"])) : i("", !0),
-                  y("span", me, Y(l.label), 1)
+                  }, null, 8, ["icon"])) : u("", !0),
+                  g("span", ve, ee(l.label), 1)
                 ]),
-                p(x, {
+                x(M, {
                   icon: "lucide:chevron-right",
                   class: "h-4 w-4 text-muted-foreground shrink-0 ml-2"
                 })
-              ], 42, ue)
+              ], 42, he)
             ]),
             _: 2
-          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "onOnSelect"])) : (o(), v(le, {
-            key: 2,
+          }, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "onOnSelect"])) : (o(), m(oe, {
+            key: 3,
             option: l,
-            index: d,
+            index: r,
             selected: L(l),
-            focused: n(S) && n(k) === d,
-            selectable: r.selectable,
-            onClick: (a) => b(l),
-            onMouseenter: (a) => n(O)(d)
+            focused: n(p) && n(h) === r,
+            selectable: a.selectable,
+            onClick: (d) => b(l),
+            onMouseenter: (d) => n(w)(r)
           }, {
-            default: N((a) => [
-              h(e.$slots, "item", Z({ ref_for: !0 }, a))
+            default: N((d) => [
+              v(e.$slots, "item", te({ ref_for: !0 }, d))
             ]),
             _: 3
           }, 8, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
         ], 64))), 128)),
-        r.loading ? (o(), c("div", he, [
-          p(x, {
+        a.loading ? (o(), c("div", ge, [
+          x(M, {
             icon: "lucide:loader-2",
             class: "w-4 h-4 animate-spin text-muted-foreground"
           })
-        ])) : i("", !0),
-        h(e.$slots, "menu")
+        ])) : u("", !0),
+        v(e.$slots, "menu")
       ], 38),
-      e.$slots.footer ? (o(), c("div", ye, [
-        h(e.$slots, "footer")
-      ])) : i("", !0)
+      e.$slots.footer ? (o(), c("div", ke, [
+        v(e.$slots, "footer")
+      ])) : u("", !0)
     ]));
   }
 });
 export {
-  Se as default
+  Be as default
 };

package/components/Masonry/Masonry.vue.d.ts

@@ -4,7 +4,7 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {
             data: any;
-            index: number;
+            index: any;
             colIndex: number;
         }): any;
     };

package/components/Masonry/Masonry.vue.js

@@ -1,7 +1,7 @@
 import o from "./Masonry.vue2.js";
 /* empty css             */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-5c6cb3dc"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-314f8a7f"]]);
 export {
   m as default
 };

package/components/Masonry/Masonry.vue2.js

@@ -1,7 +1,7 @@
-import { defineComponent as N, ref as d, computed as p, onMounted as B, onUnmounted as K, openBlock as s, createBlock as O, resolveDynamicComponent as z, normalizeStyle as v, withCtx as C, createElementBlock as i, Fragment as y, renderList as g, renderSlot as S } from "vue";
-import { MASONRY_BREAKPOINTS as b } from "./types.js";
+import { defineComponent as B, ref as d, computed as m, onMounted as K, onUnmounted as O, openBlock as u, createBlock as w, resolveDynamicComponent as z, normalizeStyle as v, withCtx as C, createElementBlock as c, Fragment as p, renderList as y, renderSlot as S } from "vue";
+import { MASONRY_BREAKPOINTS as x } from "./types.js";
 import { debounce as A } from "../../utils/functions.js";
-const j = /* @__PURE__ */ N({
+const j = /* @__PURE__ */ B({
   __name: "Masonry",
   props: {
     data: {},
@@ -10,59 +10,65 @@ const j = /* @__PURE__ */ N({
     tag: { default: "div" },
     itemKey: { default: "id" }
   },
-  setup(c) {
-    const l = c, a = d(null), f = d(0), u = d(null), x = () => {
-      a.value && (f.value = a.value.clientWidth);
-    }, h = p(() => {
+  setup(i) {
+    const l = i, r = d(null), f = d(0), s = d(null), g = () => {
+      r.value && (f.value = r.value.clientWidth);
+    }, b = m(() => {
       if (typeof l.cols == "number") return l.cols;
-      const t = f.value;
-      if (!t) return l.cols.default || 1;
-      let n = l.cols.default || 1;
-      const o = Object.keys(l.cols).map((e) => {
-        let r = 0;
-        return typeof e == "number" || !isNaN(Number(e)) ? r = Number(e) : e in b && (r = b[e]), { k: e, px: r, val: l.cols[e] };
-      }).filter((e) => e.val !== void 0).sort((e, r) => e.px - r.px);
-      for (const e of o)
-        t >= e.px && (n = e.val);
-      return n || 1;
-    }), R = p(() => {
-      const t = h.value, n = Array.from({ length: t }, () => []), o = l.data.length;
-      for (let e = 0; e < o; e++)
-        n[e % t].push(l.data[e]);
-      return n;
+      const n = f.value;
+      if (!n) return l.cols.default || 1;
+      let o = l.cols.default || 1;
+      const t = Object.keys(l.cols).map((e) => {
+        let a = 0;
+        return typeof e == "number" || !isNaN(Number(e)) ? a = Number(e) : e in x && (a = x[e]), { k: e, px: a, val: l.cols[e] };
+      }).filter((e) => e.val !== void 0).sort((e, a) => e.px - a.px);
+      for (const e of t)
+        n >= e.px && (o = e.val);
+      return o || 1;
+    }), h = m(() => {
+      const n = b.value, o = Array.from({ length: n }, () => []), t = l.data.length;
+      for (let e = 0; e < t; e++)
+        o[e % n].push({
+          data: l.data[e],
+          index: e
+        });
+      return o;
     });
-    B(() => {
-      x();
-      const t = A((n) => {
-        const o = n[0];
-        o && (f.value = o.contentRect.width);
+    K(() => {
+      g();
+      const n = A((o) => {
+        const t = o[0];
+        t && (f.value = t.contentRect.width);
       }, 100);
-      u.value = new ResizeObserver(t), a.value && u.value.observe(a.value);
-    }), K(() => {
-      u.value && (u.value.disconnect(), u.value = null);
+      s.value = new ResizeObserver(n), r.value && s.value.observe(r.value);
+    }), O(() => {
+      s.value && (s.value.disconnect(), s.value = null);
     });
-    const w = (t, n) => t && typeof t == "object" && l.itemKey in t ? t[l.itemKey] : n;
-    return (t, n) => (s(), O(z(c.tag), {
+    const R = (n, o) => {
+      const t = n.data;
+      return t && typeof t == "object" && l.itemKey in t ? t[l.itemKey] : o;
+    };
+    return (n, o) => (u(), w(z(i.tag), {
       ref_key: "containerRef",
-      ref: a,
+      ref: r,
       class: "flex w-full",
-      style: v({ gap: `${c.gap}px` })
+      style: v({ gap: `${i.gap}px` })
     }, {
       default: C(() => [
-        (s(!0), i(y, null, g(R.value, (o, e) => (s(), i("div", {
+        (u(!0), c(p, null, y(h.value, (t, e) => (u(), c("div", {
           key: e,
           class: "flex flex-col flex-1 min-w-0",
-          style: v({ gap: `${c.gap}px` }),
+          style: v({ gap: `${i.gap}px` }),
           role: "list"
         }, [
-          (s(!0), i(y, null, g(o, (r, m) => (s(), i("div", {
-            key: w(r, m),
+          (u(!0), c(p, null, y(t, (a, N) => (u(), c("div", {
+            key: R(a, N),
             class: "masonry-item",
             role: "listitem"
           }, [
-            S(t.$slots, "default", {
-              data: r,
-              index: m,
+            S(n.$slots, "default", {
+              data: a.data,
+              index: a.index,
               colIndex: e
             }, void 0, !0)
           ]))), 128))

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "vlite3",
   "private": false,
+  "author": "safdar-azeem",
   "description": "A lightweight Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "type": "module",
   "main": "index.js",
-  "module": "index.js",
-  "types": "index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
+    "postbuild": "node scripts/bundle-css.js",
     "preview": "vite preview",
     "prepare:dist": "npm run build && cp package.json README.md dist/",
     "release:patch": "npm version patch && npm run prepare:dist && cd dist && npm publish",
@@ -18,14 +18,6 @@
     "release:major": "npm version major && npm run prepare:dist && cd dist && npm publish",
     "publish:dist": "npm run prepare:dist && cd dist && npm publish"
   },
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "require": "./index.js"
-    },
-    "./style.css": "./index.css"
-  },
   "dependencies": {
     "@formkit/drag-and-drop": "^0.5.3",
     "@iconify/vue": "5.0.0",
@@ -50,6 +42,7 @@
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "vue-tsc": "^3.1.4",
-    "vue": "^3.5.24"
+    "vue": "^3.5.24",
+    "vue-router": "^4.0.0"
   }
 }

package/style.css

@@ -0,0 +1,545 @@
+@import 'tailwindcss';
+@layer theme, base, components, utilities;
+
+/* --- theme.css --- */
+@layer base {
+  :root {
+    /* Base Colors */
+    --color-white: #ffffff;
+    --color-black: #000000;
+
+    --color-gray-50: #FAFAFA;
+    --color-gray-100: #F6F5F6;
+    --color-gray-150: #F5F5F5;
+    --color-gray-200: #EFEFEF;
+    --color-gray-250: #d1d1d6;
+    --color-gray-300: #c7c7cc;
+    --color-gray-350: #aeaeb2;
+    --color-gray-400: #8e8e93;
+    --color-gray-450: #636366;
+    --color-gray-500: #636366;
+    --color-gray-550: #48484a;
+    --color-gray-600: #48484a;
+    --color-gray-650: #3a3a3c;
+    --color-gray-700: #3a3a3c;
+    --color-gray-750: #2c2c2e;
+    --color-gray-800: #1c1c1e;
+    --color-gray-850: #000000;
+    --color-gray-900: #000000;
+
+
+    --color-body: var(--color-white);
+    --border: var(--color-gray-250);
+
+    /* NEW SEMANTIC TOKENS (shadcn/ui style) */
+    --background: var(--color-white);
+    --foreground: var(--color-gray-900);
+
+    --card: var(--color-gray-50);
+    --card-foreground: var(--color-gray-900);
+
+    --popover: var(--color-white);
+    --popover-foreground: var(--color-gray-900);
+
+    --primary: #18181b;
+    --primary-foreground: var(--color-white);
+
+    /* Secondary: Slightly darker than muted for actions (Buttons) */
+    --secondary: var(--color-gray-200);
+    --secondary-foreground: var(--color-gray-900);
+
+    /* Muted: Subtle backgrounds (Cards, Inputs) */
+    --muted: var(--color-gray-100);
+    --muted-foreground: var(--color-gray-500);
+
+    /* Accent: Interactive hover states (Dropdown items, etc) */
+    --accent: var(--color-gray-150);
+    --accent-foreground: var(--color-gray-900);
+
+    --destructive: #ff3b30;
+    --destructive-foreground: var(--color-white);
+
+    --border: var(--color-gray-250);
+    --input: var(--color-gray-250);
+    --ring: var(--color-gray-900);
+    /* END NEW SEMANTIC TOKENS */
+
+
+    /* Primary - Refined Dark Zinc/Black */
+    --color-primary-light: #f4f4f5;
+    --color-primary: #18181b;
+    --color-primary-dark: #3f3f46;
+    --color-primary-fg: var(--color-white);
+    --color-primary-fg-light: #18181b;
+
+    /* Semantics - Apple-like Human Interface Colors */
+
+    /* Danger (System Red) */
+    --color-danger-light: #fff2f2;
+    --color-danger: #ff3b30;
+    --color-danger-dark: #d70015;
+    --color-danger-fg: var(--color-white);
+    --color-danger-fg-light: #d70015;
+
+    /* Warning (System Orange/Yellow) */
+    --color-warning-light: #fff9e6;
+    --color-warning: #ff9500;
+    --color-warning-dark: #c95100;
+    --color-warning-fg: var(--color-white);
+    --color-warning-fg-light: #c95100;
+
+    /* Info (System Blue) */
+    --color-info-light: #f0f8ff;
+    --color-info: #007aff;
+    --color-info-dark: #0051a8;
+    --color-info-fg: var(--color-white);
+    --color-info-fg-light: #0051a8;
+
+    /* Success (System Green) */
+    --color-success-light: #f2fffa;
+    --color-success: #34c759;
+    --color-success-dark: #248a3d;
+    --color-success-fg: var(--color-white);
+    --color-success-fg-light: #248a3d;
+
+    /* v-tooltip-lite variables */
+    --tooltip-bg: var(--popover) !important;
+    --tooltip-text: var(--popover-foreground) !important;
+    --tooltip-border: var(--border) !important;
+
+    --tooltip-radius: var(--radius) !important;
+    --tooltip-shadow: var(--shadow-dropdown) !important;
+    --tooltip-arrow-size: 0.5em !important;
+    --tooltip-z-index: 50;
+    --tooltip-font-size: unset !important;
+    --date-picker-border: var(--border) !important;
+
+  }
+
+  .dark {
+    /* Dark Mode Overrides */
+    --color-white: #000000;
+    --color-black: #ffffff;
+
+    /* Notion Dark Background + Apple Grays */
+    --color-body: oklch(0.145 0 0);
+    --border: #2c2c2e;
+
+    --color-gray-50: #161616;
+    --color-gray-100: #161616;
+    --color-gray-150: #3d3d3f;
+    --color-gray-200: #262626;
+    --color-gray-250: #2d2d2d;
+    --color-gray-300: #545456;
+    --color-gray-350: #636366;
+    --color-gray-400: #8e8e93;
+    --color-gray-450: #aeaeb2;
+    --color-gray-500: #aeaeb2;
+    --color-gray-550: #c7c7cc;
+    --color-gray-600: #c7c7cc;
+    --color-gray-650: #d1d1d6;
+    --color-gray-700: #e5e5ea;
+    --color-gray-750: #f2f2f7;
+    --color-gray-800: #f2f2f7;
+    --color-gray-850: #ffffff;
+    --color-gray-900: #ffffff;
+
+    /* NEW SEMANTIC TOKENS (Dark Mode) */
+    --background: var(--color-body);
+    --foreground: var(--color-gray-900);
+
+    --card: #181818;
+    /* Adjusted: using darker context */
+    --card-foreground: var(--color-900);
+
+    --popover: var(--color-body);
+    --popover-foreground: var(--color-gray-900);
+
+    --primary: #f4f4f5;
+    --primary-foreground: #18181b;
+
+    --secondary: var(--color-gray-200);
+    --secondary-foreground: var(--color-gray-900);
+
+    --muted: var(--color-gray-50);
+    --muted-foreground: var(--color-gray-600);
+
+    --accent: var(--color-gray-100);
+    --accent-foreground: var(--color-gray-900);
+
+    --destructive: #bf2625;
+    --destructive-foreground: var(--color-black);
+
+    --border: var(--color-gray-200);
+    --input: var(--color-gray-200);
+    --ring: var(--color-gray-300);
+    /* END NEW SEMANTIC TOKENS */
+
+    /* Primary */
+    --color-primary-light: #2c2c2e;
+    --color-primary: #f4f4f5;
+    /* High Contrast White/Gray */
+    --color-primary-dark: #d4d4d8;
+    --color-primary-fg: #191919;
+    --color-primary-fg-light: #f4f4f5;
+
+    /* Semantics - Dark Mode High Contrast */
+
+    /* Danger */
+    --color-danger-light: #4E1D1A;
+    --color-danger-fg-light: #FCFCFC;
+    --color-danger: #BF2625;
+    --color-danger-fg: #ffffff;
+    --color-danger-dark: #D72627;
+
+    /* Warning */
+    --color-warning-light: #3a1e00;
+    --color-warning-fg-light: #ff9f0a;
+    --color-warning: #ff9f0a;
+    --color-warning-fg: #ffffff;
+    --color-warning-dark: #ffb340;
+
+    /* Info */
+    --color-info-light: #001a33;
+    --color-info-fg-light: #0a84ff;
+    --color-info: #0a84ff;
+    --color-info-fg: #ffffff;
+    --color-info-dark: #409cff;
+
+    /* Success */
+    --color-success-light: #1B3419;
+    --color-success-fg-light: #ffffff;
+    --color-success: #007E51;
+    --color-success-fg: #ffffff;
+    --color-success-dark: #00613f;
+  }
+}
+
+@theme {
+  /* Map Utilities to CSS Variables */
+  --color-white: var(--color-white);
+  --color-black: var(--color-black);
+
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-150: var(--color-gray-150);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-250: var(--color-gray-250);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-350: var(--color-gray-350);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-450: var(--color-gray-450);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-550: var(--color-gray-550);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-650: var(--color-gray-650);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-750: var(--color-gray-750);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-850: var(--color-gray-850);
+  --color-gray-900: var(--color-gray-900);
+
+  --color-body: var(--color-body);
+  --border: var(--border);
+
+  /* NEW SEMANTIC COLORS */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+
+  --color-primary-light: var(--color-primary-light);
+  /* --color-primary: var(--color-primary); -> Overridden/merged above */
+  --color-primary-dark: var(--color-primary-dark);
+  --color-primary-fg: var(--color-primary-fg);
+  --color-primary-fg-light: var(--color-primary-fg-light);
+
+  --color-danger-light: var(--color-danger-light);
+  --color-danger: var(--color-danger);
+  --color-danger-dark: var(--color-danger-dark);
+  --color-danger-fg: var(--color-danger-fg);
+  --color-danger-fg-light: var(--color-danger-fg-light);
+
+  --color-warning-light: var(--color-warning-light);
+  --color-warning: var(--color-warning);
+  --color-warning-dark: var(--color-warning-dark);
+  --color-warning-fg: var(--color-warning-fg);
+  --color-warning-fg-light: var(--color-warning-fg-light);
+
+  --color-info-light: var(--color-info-light);
+  --color-info: var(--color-info);
+  --color-info-dark: var(--color-info-dark);
+  --color-info-fg: var(--color-info-fg);
+  --color-info-fg-light: var(--color-info-fg-light);
+
+  --color-success-light: var(--color-success-light);
+  --color-success: var(--color-success);
+  --color-success-dark: var(--color-success-dark);
+  --color-success-fg: var(--color-success-fg);
+  --color-success-fg-light: var(--color-success-fg-light);
+
+  /* Shadows */
+  --shadow-dropdown: 0 3px 4px -3px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 3%);
+  --shadow-offcanvas: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+    0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-DEFAULT: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Radii */
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 3px);
+  --radius-xl: calc(var(--radius) + 5px);
+  --radius-2xl: calc(var(--radius) + 7px);
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-ripple: ripple 600ms linear;
+}
+
+/* --- base.css --- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  letter-spacing: -0.01px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+
+@layer components {
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  }
+
+
+  /* Ripple */
+  span.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 600ms linear;
+    background-color: rgba(255, 255, 255, 0.094);
+    pointer-events: none;
+  }
+
+  *,
+  ::before,
+  ::after {
+    @apply border-border;
+  }
+
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4 {
+    @apply font-bold text-gray-900;
+  }
+
+  h5,
+  .h5,
+  h6,
+  .h6 {
+    @apply font-sans text-gray-900;
+  }
+
+  h1,
+  .h1 {
+    @apply text-3xl;
+    line-height: 1.3em;
+  }
+
+  h2,
+  .h2 {
+    @apply text-2xl;
+    line-height: 1.3em;
+  }
+
+  h3,
+  .h3 {
+    @apply text-xl;
+    line-height: 1.25em;
+  }
+
+  h4,
+  .h4 {
+    @apply text-lg;
+  }
+
+  h5,
+  .h5 {
+    @apply font-semibold;
+  }
+
+  h6,
+  .h6 {
+    @apply font-medium;
+  }
+
+  small {
+    @apply text-sm;
+  }
+
+  :root {
+    scroll-behavior: smooth;
+  }
+
+  .dropdown .tooltip-content {
+    padding: 0 !important;
+  }
+
+  .basic-tooltip .tooltip-content {
+    padding: 0.3em 0.7em !important;
+    font-size: 0.8em
+  }
+}
+
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+#icon-picker {
+  --iconPicker-text: theme('colors.gray.700');
+  --iconPicker-border: theme('colors.gray.250');
+  --iconPicker-primary: theme('colors.primary.DEFAULT');
+  --iconPicker-primary-fg: theme('colors.primary.fg');
+  --iconPicker-primary-hover: theme('colors.primary.dark');
+  --iconPicker-radius: 0.375em;
+  --iconPicker-gap: 0.25em;
+  --iconPicker-input-height: 2.125em;
+  --iconPicker-selected-bg: theme('colors.gray.100');
+  --iconPicker-font-base: 15.5px;
+  --iconPicker-transition: all 0.2s ease;
+}
+
+/* --- input.css --- */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+/* Hide the stepper controls */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: theme('colors.gray.900');
+  -webkit-box-shadow: 0 0 0px 1000px theme('colors.body') inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  opacity: 0;
+}
+
+input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+textarea {
+  scrollbar-width: thin !important;
+}
+
+textarea::-webkit-scrollbar {
+  width: 6px !important;
+  height: 6px !important;
+}
+
+textarea::-webkit-scrollbar-track {
+  border-radius: 10px !important;
+}
+
+textarea::-webkit-scrollbar-thumb {
+  border-radius: 10px !important;
+  border: 1px solid transparent !important;
+  background-clip: padding-box !important;
+}
+
+/* --- Vite Generated CSS --- */
+.accordion-enter-active[data-v-d71e56f7],.accordion-leave-active[data-v-d71e56f7]{transition:height .3s ease-in-out}.attached-group[data-v-1a20a82d]:not(.vertical-group) button{border-radius:0}.attached-group[data-v-1a20a82d] button{position:relative;--radius: .375rem}.attached-group[data-v-1a20a82d] button:focus-visible,.attached-group[data-v-1a20a82d] button:hover{z-index:10}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child){margin-left:-1px}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);border-top-right-radius:0;border-bottom-right-radius:0}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child):not(:last-child){border-radius:0}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-bottom-left-radius:0}.vertical-group[data-v-1a20a82d] button:not(:first-child){margin-top:-1px}.vertical-group[data-v-1a20a82d] button:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.vertical-group[data-v-1a20a82d] button:not(:first-child):not(:last-child){border-radius:0}.vertical-group[data-v-1a20a82d] button:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-top-right-radius:0}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child):not(.border):before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none}.vertical-group[data-v-1a20a82d] button:not(:first-child):not(.border):before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none;width:auto}.vertical-group[data-v-1a20a82d] button:not(:first-child):not(.border):before{width:100%}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child):not(.border):before{height:100%}.IroBox{border-radius:8px!important}.heatmap-container[data-v-7e3a425e]{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}.heatmap-wrapper[data-v-7e3a425e]{width:100%;height:100%;overflow:auto;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;position:relative}.heatmap-grid[data-v-7e3a425e]{width:fit-content;height:fit-content;transition:all .2s ease-in-out}.heatmap-cell[data-v-7e3a425e]{aspect-ratio:1 / 1;border-radius:2px;transition:all .15s ease-in-out;border:1px solid transparent;box-sizing:border-box}.heatmap-cell-interactive[data-v-7e3a425e]{cursor:pointer}.heatmap-cell-interactive[data-v-7e3a425e]:hover{transform:scale(1.1);border-color:var(--border);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10;position:relative}.heatmap-cell-empty[data-v-7e3a425e]{opacity:.6}.heatmap-cell-hovered[data-v-7e3a425e]{outline:2px solid var(--primary);outline-offset:1px}.heatmap-cell-label[data-v-7e3a425e]{font-size:8px;font-weight:500;color:var(--foreground);opacity:.8;display:flex;align-items:center;justify-content:center;height:100%;width:100%;pointer-events:none}.heatmap-legend[data-v-7e3a425e]{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;color:var(--muted-foreground);flex-shrink:0}.heatmap-legend-label[data-v-7e3a425e]{font-weight:500}.heatmap-legend-colors[data-v-7e3a425e]{display:flex;gap:.125rem}.heatmap-legend-item[data-v-7e3a425e]{width:.75rem;height:.75rem;border-radius:.375rem;border:1px solid var(--border)}@media(max-width:640px){.heatmap-wrapper[data-v-7e3a425e]{padding:12px}.heatmap-cell[data-v-7e3a425e]{border-radius:2px}.heatmap-cell-label[data-v-7e3a425e]{font-size:7px}}@media(min-width:641px)and (max-width:1023px){.heatmap-wrapper[data-v-7e3a425e]{padding:14px}.heatmap-cell[data-v-7e3a425e]{border-radius:2px}}@media(min-width:1024px){.heatmap-wrapper[data-v-7e3a425e]{padding:16px}.heatmap-cell[data-v-7e3a425e]{border-radius:3px}}.masonry-item[data-v-314f8a7f]{content-visibility:auto;contain-intrinsic-size:1px 200px}.slide-right-enter-active[data-v-fe22a19d],.slide-right-leave-active[data-v-fe22a19d],.slide-left-enter-active[data-v-fe22a19d],.slide-left-leave-active[data-v-fe22a19d]{transition:transform .3s ease-in-out}.slide-right-enter-from[data-v-fe22a19d],.slide-right-leave-to[data-v-fe22a19d]{transform:translate(100%)}.slide-left-enter-from[data-v-fe22a19d],.slide-left-leave-to[data-v-fe22a19d]{transform:translate(-100%)}.ease-out-spring[data-v-aa299289],.ease-spring[data-v-aa299289]{transition-timing-function:cubic-bezier(.16,1,.3,1)}
+

package/index.css

@@ -1 +0,0 @@
-.accordion-enter-active[data-v-d71e56f7],.accordion-leave-active[data-v-d71e56f7]{transition:height .3s ease-in-out}.attached-group[data-v-1a20a82d]:not(.vertical-group) button{border-radius:0}.attached-group[data-v-1a20a82d] button{position:relative;--radius: .375rem}.attached-group[data-v-1a20a82d] button:focus-visible,.attached-group[data-v-1a20a82d] button:hover{z-index:10}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child){margin-left:-1px}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);border-top-right-radius:0;border-bottom-right-radius:0}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child):not(:last-child){border-radius:0}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-bottom-left-radius:0}.vertical-group[data-v-1a20a82d] button:not(:first-child){margin-top:-1px}.vertical-group[data-v-1a20a82d] button:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.vertical-group[data-v-1a20a82d] button:not(:first-child):not(:last-child){border-radius:0}.vertical-group[data-v-1a20a82d] button:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:0;border-top-right-radius:0}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child):not(.border):before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none}.vertical-group[data-v-1a20a82d] button:not(:first-child):not(.border):before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:currentColor;opacity:.15;z-index:5;pointer-events:none;width:auto}.vertical-group[data-v-1a20a82d] button:not(:first-child):not(.border):before{width:100%}.attached-group[data-v-1a20a82d]:not(.vertical-group) button:not(:first-child):not(.border):before{height:100%}.IroBox{border-radius:8px!important}.heatmap-container[data-v-7e3a425e]{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}.heatmap-wrapper[data-v-7e3a425e]{width:100%;height:100%;overflow:auto;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;position:relative}.heatmap-grid[data-v-7e3a425e]{width:fit-content;height:fit-content;transition:all .2s ease-in-out}.heatmap-cell[data-v-7e3a425e]{aspect-ratio:1 / 1;border-radius:2px;transition:all .15s ease-in-out;border:1px solid transparent;box-sizing:border-box}.heatmap-cell-interactive[data-v-7e3a425e]{cursor:pointer}.heatmap-cell-interactive[data-v-7e3a425e]:hover{transform:scale(1.1);border-color:var(--border);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10;position:relative}.heatmap-cell-empty[data-v-7e3a425e]{opacity:.6}.heatmap-cell-hovered[data-v-7e3a425e]{outline:2px solid var(--primary);outline-offset:1px}.heatmap-cell-label[data-v-7e3a425e]{font-size:8px;font-weight:500;color:var(--foreground);opacity:.8;display:flex;align-items:center;justify-content:center;height:100%;width:100%;pointer-events:none}.heatmap-legend[data-v-7e3a425e]{display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.75rem;color:var(--muted-foreground);flex-shrink:0}.heatmap-legend-label[data-v-7e3a425e]{font-weight:500}.heatmap-legend-colors[data-v-7e3a425e]{display:flex;gap:.125rem}.heatmap-legend-item[data-v-7e3a425e]{width:.75rem;height:.75rem;border-radius:.375rem;border:1px solid var(--border)}@media(max-width:640px){.heatmap-wrapper[data-v-7e3a425e]{padding:12px}.heatmap-cell[data-v-7e3a425e]{border-radius:2px}.heatmap-cell-label[data-v-7e3a425e]{font-size:7px}}@media(min-width:641px)and (max-width:1023px){.heatmap-wrapper[data-v-7e3a425e]{padding:14px}.heatmap-cell[data-v-7e3a425e]{border-radius:2px}}@media(min-width:1024px){.heatmap-wrapper[data-v-7e3a425e]{padding:16px}.heatmap-cell[data-v-7e3a425e]{border-radius:3px}}.masonry-item[data-v-5c6cb3dc]{content-visibility:auto;contain-intrinsic-size:1px 200px}.slide-right-enter-active[data-v-fe22a19d],.slide-right-leave-active[data-v-fe22a19d],.slide-left-enter-active[data-v-fe22a19d],.slide-left-leave-active[data-v-fe22a19d]{transition:transform .3s ease-in-out}.slide-right-enter-from[data-v-fe22a19d],.slide-right-leave-to[data-v-fe22a19d]{transform:translate(100%)}.slide-left-enter-from[data-v-fe22a19d],.slide-left-leave-to[data-v-fe22a19d]{transform:translate(-100%)}.ease-out-spring[data-v-aa299289],.ease-spring[data-v-aa299289]{transition-timing-function:cubic-bezier(.16,1,.3,1)}