vlite3 0.2.6 → 0.2.7

package/components/Button.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as v, useSlots as x, computed as s, withDirectives as y, openBlock as r, createElementBlock as w, normalizeClass as i, createBlock as a, createCommentVNode as u, renderSlot as p, createTextVNode as k, toDisplayString as z, unref as B } from "vue";
-import c from "./Icon.vue.js";
+import { defineComponent as v, useSlots as x, computed as c, withDirectives as w, openBlock as i, createElementBlock as y, normalizeClass as o, createBlock as l, createCommentVNode as u, renderSlot as p, createTextVNode as z, toDisplayString as k, unref as B } from "vue";
+import d from "./Icon.vue.js";
 import { vRipple as C } from "../directives/vRipple.js";
-const R = ["type", "disabled"], D = /* @__PURE__ */ v({
+const S = ["type", "disabled"], D = /* @__PURE__ */ v({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,8 +16,8 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
     rounded: { default: "md" }
   },
   setup(e) {
-    const t = e, g = x(), l = s(() => t.icon && !t.text && !g.default), h = s(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", d = {
+    const t = e, g = x(), s = c(() => t.icon && !t.text && !g.default), h = c(() => {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] cursor-pointer gap-2", r = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -43,13 +43,13 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
         md: "h-9 px-4 py-2",
         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",
-        sm: "h-8 w-8 min-h-9 min-w-9",
-        md: "h-9 w-9 min-h-9 min-w-9",
-        lg: "h-10 w-10 min-h-11 min-w-11",
-        xl: "h-12 w-12 min-h-12 min-w-12"
       }, m = {
+        xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
+        sm: "h-7 w-7 min-h-7 min-w-7",
+        md: "h-7.5 w-7.5 min-h-7.5 min-w-7.5",
+        lg: "h-8 w-8 min-h-8 min-w-8",
+        xl: "h-8.5 w-8.5 min-h-8.5 min-w-8.5"
+      }, b = {
         none: "rounded-none",
         sm: "rounded-sm",
         md: "rounded",
@@ -60,44 +60,53 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
       };
       return [
         n,
-        d[t.variant],
-        m[t.rounded],
-        l.value ? b[t.size] : f[t.size],
+        r[t.variant],
+        b[t.rounded],
+        s.value ? m[t.size] : f[t.size],
         t.class
       ].join(" ");
-    }), o = s(() => ({
-      xs: "w-3 h-3",
-      sm: "w-4 h-4",
-      md: "w-4 h-4",
-      lg: "w-4 h-4",
-      xl: "w-4 h-4"
-    })[t.size]);
-    return (n, d) => y((r(), w("button", {
+    }), a = c(() => {
+      const n = {
+        xs: "w-3 h-3",
+        sm: "w-4 h-4",
+        md: "w-4 h-4",
+        lg: "w-4 h-4",
+        xl: "w-4 h-4"
+      }, r = {
+        xs: "w-3 h-3",
+        sm: "w-3.5 h-3.5",
+        md: "w-3.5 h-3.5",
+        lg: "w-4 h-4",
+        xl: "w-4 h-4"
+      };
+      return s.value ? r[t.size] : n[t.size];
+    });
+    return (n, r) => w((i(), y("button", {
       type: e.type,
-      class: i(h.value),
+      class: o(h.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (r(), a(c, {
+      e.loading ? (i(), l(d, {
         key: 0,
         icon: "lucide:loader-2",
-        class: i(["animate-spin", { [o.value]: !0 }])
-      }, null, 8, ["class"])) : e.icon ? (r(), a(c, {
+        class: o(["animate-spin", { [a.value]: !0 }])
+      }, null, 8, ["class"])) : e.icon ? (i(), l(d, {
         key: 1,
         icon: e.icon,
-        class: i({
-          "mx-auto": l.value,
-          [o.value]: !0
+        class: o({
+          "mx-auto": s.value,
+          [a.value]: !0
         })
       }, null, 8, ["icon", "class"])) : u("", !0),
       p(n.$slots, "default", {}, () => [
-        k(z(e.text), 1)
+        z(k(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (r(), a(c, {
+      e.iconRight && !e.loading ? (i(), l(d, {
         key: 2,
         icon: e.iconRight,
-        class: i([o.value, "h-4 w-4"])
+        class: o([a.value, "h-4 w-4"])
       }, null, 8, ["icon", "class"])) : u("", !0)
-    ], 10, R)), [
+    ], 10, S)), [
       [B(C)]
     ]);
   }

package/components/ChoiceBox/ChoiceBox.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, computed as y, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as x } from "vue";
+import { defineComponent as w, computed as x, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as y } from "vue";
 import m from "../Icon.vue.js";
 const K = { class: "w-full" }, N = {
   key: 0,
@@ -14,7 +14,7 @@ const K = { class: "w-full" }, N = {
   class: "shrink-0 pt-0.5"
 }, q = { class: "flex flex-col" }, z = { class: "flex items-center gap-2" }, D = {
   key: 0,
-  class: "mt-1 text-sm text-muted-foreground leading-relaxed"
+  class: "mt-1 -text-fs-3 text-muted leading-relaxed"
 }, F = {
   key: 0,
   class: "absolute top-4 right-4 text-primary"
@@ -31,18 +31,18 @@ const K = { class: "w-full" }, N = {
     gap: { default: 4 }
   },
   emits: ["update:modelValue", "change"],
-  setup(r, { emit: h }) {
-    const s = r, g = h, n = (l) => Array.isArray(s.modelValue) ? s.modelValue.includes(l) : s.modelValue === l, f = (l) => {
-      if (s.disabled || s.options.find((d) => d.id === l)?.disabled) return;
+  setup(s, { emit: h }) {
+    const r = s, g = h, n = (l) => Array.isArray(r.modelValue) ? r.modelValue.includes(l) : r.modelValue === l, f = (l) => {
+      if (r.disabled || r.options.find((d) => d.id === l)?.disabled) return;
       let e;
-      if (s.multiple) {
-        const d = Array.isArray(s.modelValue) ? [...s.modelValue] : [], p = d.indexOf(l);
+      if (r.multiple) {
+        const d = Array.isArray(r.modelValue) ? [...r.modelValue] : [], p = d.indexOf(l);
         p === -1 ? d.push(l) : d.splice(p, 1), e = d;
       } else
         e = l;
       g("update:modelValue", e), g("change", e);
-    }, b = y(() => {
-      switch (s.grid) {
+    }, b = x(() => {
+      switch (r.grid) {
         case 1:
           return "grid-cols-1";
         case 2:
@@ -54,8 +54,8 @@ const K = { class: "w-full" }, N = {
         default:
           return "grid-cols-1";
       }
-    }), v = y(() => {
-      switch (s.gap) {
+    }), v = x(() => {
+      switch (r.gap) {
         case 2:
           return "gap-2";
         case 3:
@@ -71,18 +71,18 @@ const K = { class: "w-full" }, N = {
       }
     });
     return (l, k) => (t(), i("div", K, [
-      r.title || r.description ? (t(), i("div", N, [
-        r.title ? (t(), i("h3", $, o(r.title), 1)) : a("", !0),
-        r.description ? (t(), i("p", E, o(r.description), 1)) : a("", !0)
+      s.title || s.description ? (t(), i("div", N, [
+        s.title ? (t(), i("h3", $, o(s.title), 1)) : a("", !0),
+        s.description ? (t(), i("p", E, o(s.description), 1)) : a("", !0)
       ])) : a("", !0),
       c("div", {
         class: u(["grid", [b.value, v.value]])
       }, [
-        (t(!0), i(V, null, _(r.options, (e) => (t(), i("div", {
+        (t(!0), i(V, null, _(s.options, (e) => (t(), i("div", {
           key: e.id,
           class: u(["relative flex cursor-pointer rounded-xl border border-border p-4 transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [
             n(e.id) ? "border-primary bg-accent" : "bg-card hover:border-primary/50 hover:bg-accent",
-            r.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
+            s.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
           ]]),
           onClick: (d) => f(e.id),
           tabindex: "0",
@@ -105,7 +105,7 @@ const K = { class: "w-full" }, N = {
             c("div", q, [
               c("div", z, [
                 c("span", {
-                  class: u(["font-semibold text-foreground", {
+                  class: u(["font-semibold text-foreground text-fs-1", {
                     "text-primary": n(e.id)
                   }])
                 }, o(e.title), 3),
@@ -121,11 +121,11 @@ const K = { class: "w-full" }, N = {
             ])
           ]),
           n(e.id) ? (t(), i("div", F, [
-            r.multiple ? (t(), x(m, {
+            s.multiple ? (t(), y(m, {
               key: 0,
               icon: "lucide:check-square",
               class: "h-5 w-5"
-            })) : (t(), x(m, {
+            })) : (t(), y(m, {
               key: 1,
               icon: "lucide:check-circle-2",
               class: "h-5 w-5"

package/components/ColorPicker/ColorIro.vue.d.ts

@@ -3,7 +3,18 @@ type __VLS_Props = {
     showHeader?: boolean;
     size?: 'sm' | 'md' | 'lg';
 };
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        bottom?(_: {}): any;
+    };
+    refs: {
+        pickerRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
     "update:color": (color: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
@@ -15,4 +26,10 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     pickerRef: HTMLDivElement;
 }, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ColorPicker/ColorIro.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as B, defineAsyncComponent as E, ref as h, computed as C, watch as u, onMounted as H, onUnmounted as _, openBlock as i, createElementBlock as g, createVNode as P, unref as c, createBlock as x, createCommentVNode as d, createElementVNode as T, normalizeClass as N, nextTick as R } from "vue";
-import n from "@jaames/iro";
-import { useEyeDropper as V } from "@vueuse/core";
-const D = { class: "space-y-3" }, $ = {
+import { defineComponent as H, defineAsyncComponent as B, ref as g, computed as E, watch as p, onMounted as T, onUnmounted as C, openBlock as a, createElementBlock as x, createVNode as P, unref as c, createBlock as b, createCommentVNode as d, createElementVNode as M, normalizeStyle as N, renderSlot as R, nextTick as V } from "vue";
+import i from "@jaames/iro";
+import { useEyeDropper as D } from "@vueuse/core";
+const L = { class: "space-y-3 w-max" }, _ = {
   key: 0,
   class: "flex gap-2 mb-2.5 -text-fs-3 pr-0.5"
-}, M = /* @__PURE__ */ B({
+}, I = /* @__PURE__ */ H({
   __name: "ColorIro",
   props: {
     color: {},
@@ -12,9 +12,9 @@ const D = { class: "space-y-3" }, $ = {
     size: { default: "md" }
   },
   emits: ["update:color", "close"],
-  setup(l, { emit: b }) {
-    const a = E(() => import("../Button.vue2.js")), t = l, s = b, p = h(), e = h(null), { isSupported: m, open: z, sRGBHex: S } = V(), f = C(() => {
-      switch (t.size) {
+  setup(l, { emit: S }) {
+    const s = B(() => import("../Button.vue2.js")), n = l, u = S, r = g(), e = g(null), { isSupported: m, open: z, sRGBHex: w } = D(), f = E(() => {
+      switch (n.size) {
         case "sm":
           return 140;
         case "lg":
@@ -22,121 +22,119 @@ const D = { class: "space-y-3" }, $ = {
         default:
           return 162;
       }
-    }), w = {
+    }), v = {
       sm: 120,
       md: 140,
       lg: 150
-    }, v = async () => {
-      if (!(!p.value || e.value)) {
-        await R();
+    }, y = async () => {
+      if (!(!r.value || e.value)) {
+        await V();
         try {
-          e.value && (e.value.off("color:change"), e.value = null), e.value = n.ColorPicker(p.value, {
+          e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = ""), e.value = i.ColorPicker(r.value, {
             width: f.value,
-            color: t.color,
+            color: n.color,
             margin: 9,
-            boxHeight: w[t?.size],
-            // Auto-scale or keep ratio? default is usually width.
-            // Let's rely on default square-ish box unless specified.
-            // But for small size, maybe we want to keep it compact.
-            // iro defaults boxHeight to width if not specified.
+            boxHeight: v[n.size],
             sliderSize: 14,
             layout: [
               {
-                component: n.ui.Box
+                component: i.ui.Box
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "hue"
                 }
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "saturation"
                 }
               },
               {
-                component: n.ui.Slider,
+                component: i.ui.Slider,
                 options: {
                   sliderType: "value"
                 }
               }
             ]
           }), e.value.on("color:change", (o) => {
-            s("update:color", o.hexString);
+            u("update:color", o.hexString);
           });
         } catch (o) {
           console.error("Failed to initialize color picker:", o);
         }
       }
-    }, k = () => {
-      e.value && (e.value.off("color:change"), e.value = null);
+    }, h = () => {
+      e.value && (e.value.off("color:change"), e.value = null), r.value && (r.value.innerHTML = "");
     };
-    u(
-      () => t.color,
+    p(
+      () => n.color,
       (o) => {
         if (e.value && e.value.color.hexString !== o)
           try {
             e.value.color.hexString = o;
-          } catch (r) {
-            console.error("Error updating color:", r);
+          } catch (t) {
+            console.error("Error updating color:", t);
           }
       }
-    ), u(
-      () => t.size,
+    ), p(
+      () => n.size,
       () => {
-        k(), v();
+        h(), y();
       }
-    ), u(S, (o) => {
-      if (o && (s("update:color", o), e.value))
+    ), p(w, (o) => {
+      if (o && (u("update:color", o), e.value))
         try {
           e.value.color.hexString = o;
-        } catch (r) {
-          console.error("Error updating color from eyedropper:", r);
+        } catch (t) {
+          console.error("Error updating color from eyedropper:", t);
         }
     });
-    const y = async () => {
+    const k = async () => {
       try {
         await z();
       } catch (o) {
         console.error("Error opening eyedropper:", o);
       }
     };
-    return H(() => {
-      v();
-    }), _(() => {
-      k();
-    }), (o, r) => (i(), g("div", D, [
-      l.showHeader ? (i(), g("div", $, [
-        P(c(a), {
+    return T(() => {
+      y();
+    }), C(() => {
+      h();
+    }), (o, t) => (a(), x("div", L, [
+      l.showHeader ? (a(), x("div", _, [
+        P(c(s), {
           icon: "typcn:arrow-back",
-          onClick: r[0] || (r[0] = (A) => s("close")),
+          onClick: t[0] || (t[0] = ($) => u("close")),
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         }),
-        c(m) ? (i(), x(c(a), {
+        c(m) ? (a(), b(c(s), {
           key: 0,
-          onClick: y,
+          onClick: k,
           icon: "pepicons-pop:color-picker",
           class: "flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"
         })) : d("", !0)
       ])) : d("", !0),
-      T("div", {
+      M("div", {
         ref_key: "pickerRef",
-        ref: p,
-        class: N(`w-[${f.value}px]`)
-      }, null, 2),
-      c(m) && !l.showHeader ? (i(), x(c(a), {
-        key: 1,
-        onClick: y,
-        icon: "pepicons-pop:color-picker",
-        variant: "outline",
-        size: "xs",
-        class: "w-full"
-      })) : d("", !0)
+        ref: r,
+        style: N({ width: f.value + "px", minHeight: v[l.size] + "px" })
+      }, null, 4),
+      R(o.$slots, "bottom", {}, () => [
+        c(m) && !l.showHeader ? (a(), b(c(s), {
+          key: 0,
+          onClick: k,
+          icon: "pepicons-pop:color-picker",
+          variant: "outline",
+          size: "sm",
+          class: "w-full"
+        })) : d("", !0)
+      ])
     ]));
   }
 });
 export {
-  M as default
+  I as default
 };

package/components/ColorPicker/ColorPicker.vue.d.ts

@@ -6,6 +6,7 @@ interface Props {
     size?: 'sm' | 'md' | 'lg';
     position?: TooltTipPlacement;
     btnProps?: ButtonProps;
+    showInput?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -18,5 +19,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     size: "sm" | "md" | "lg";
     modelValue: string;
     position: TooltTipPlacement;
+    showInput: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/ColorPicker/ColorPicker.vue.js

@@ -1,56 +1,111 @@
-import { defineComponent as n, openBlock as d, createBlock as r, unref as c, withCtx as l, createElementVNode as m, createVNode as a, mergeProps as u } from "vue";
-import f from "../Dropdown/Dropdown.vue.js";
+import { defineComponent as z, ref as p, watch as i, openBlock as a, createBlock as f, unref as v, withCtx as u, createElementBlock as h, createVNode as c, createCommentVNode as d, createElementVNode as $, mergeProps as w } from "vue";
+import B from "../Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import p from "../Button.vue.js";
-import h from "./ColorIro.vue.js";
+import O from "../Input.vue.js";
+import y from "../Button.vue.js";
+import E from "./ColorIro.vue.js";
 /* empty css              */
-const b = { class: "p-1.5" }, w = /* @__PURE__ */ n({
+import { useEyeDropper as P } from "@vueuse/core";
+const I = {
+  key: 0,
+  class: "p-2 w-max flex flex-col justify-center"
+}, N = {
+  key: 0,
+  class: "flex items-center gap-1.5 w-full"
+}, D = { class: "w-32" }, q = /* @__PURE__ */ z({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#000000" },
     disabled: { type: Boolean, default: !1 },
     size: { default: "md" },
     position: { default: "bottom" },
-    btnProps: {}
+    btnProps: {},
+    showInput: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "change"],
-  setup(e, { emit: s }) {
-    const t = s, i = (o) => {
-      t("update:modelValue", o), t("change", o);
+  setup(o, { emit: V }) {
+    const n = o, m = V, r = p(!1), t = p(n.modelValue || "#000000"), { isSupported: b, open: g, sRGBHex: k } = P();
+    i(k, (e) => {
+      e && (t.value = e);
+    });
+    const x = async () => {
+      try {
+        await g();
+      } catch (e) {
+        console.error("Error opening eyedropper:", e);
+      }
     };
-    return (o, g) => (d(), r(c(f), {
-      disabled: e.disabled,
+    i(
+      () => n.modelValue,
+      (e) => {
+        e && e !== t.value && (t.value = e);
+      }
+    ), i(t, (e) => {
+      /^#([0-9A-F]{3,8})$/i.test(e) && e !== n.modelValue && (m("update:modelValue", e), m("change", e));
+    });
+    const C = (e) => {
+      t.value = e;
+    };
+    return (e, l) => (a(), f(v(B), {
+      disabled: o.disabled,
       class: "w-auto",
-      position: e.position,
+      position: o.position,
       offset: [0, 8],
       searchable: !1,
-      "close-on-select": !1
+      "close-on-select": !1,
+      onOnOpen: l[1] || (l[1] = (s) => r.value = !0),
+      onOnClose: l[2] || (l[2] = (s) => r.value = !1)
     }, {
-      trigger: l(({ isOpen: V }) => [
-        a(p, u({
-          style: { backgroundColor: e.modelValue }
+      trigger: u(({ isOpen: s }) => [
+        c(y, w({
+          style: { backgroundColor: o.modelValue }
         }, {
           rounded: "full",
           size: "xs",
           icon: " ",
           variant: "outline",
-          ...e.btnProps || {}
+          ...o.btnProps || {}
         }), null, 16, ["style"])
       ]),
-      default: l(() => [
-        m("div", b, [
-          a(h, {
-            color: e.modelValue,
+      default: u(() => [
+        r.value ? (a(), h("div", I, [
+          c(E, {
+            color: o.modelValue,
             "show-header": !1,
-            size: e.size,
-            "onUpdate:color": i
-          }, null, 8, ["color", "size"])
-        ])
+            size: o.size,
+            "onUpdate:color": C
+          }, {
+            bottom: u(() => [
+              o.showInput ? (a(), h("div", N, [
+                v(b) ? (a(), f(y, {
+                  key: 0,
+                  onClick: x,
+                  icon: "pepicons-pop:color-picker",
+                  variant: "outline",
+                  size: "sm",
+                  class: "px-2 shrink-0"
+                })) : d("", !0),
+                $("div", D, [
+                  c(O, {
+                    modelValue: t.value,
+                    "onUpdate:modelValue": l[0] || (l[0] = (s) => t.value = s),
+                    size: "sm",
+                    "show-clear-button": !1,
+                    placeholder: "#000000",
+                    class: "flex-1 w-full",
+                    "input-class": "font-mono text-xs uppercase "
+                  }, null, 8, ["modelValue"])
+                ])
+              ])) : d("", !0)
+            ]),
+            _: 1
+          }, 8, ["color", "size"])
+        ])) : d("", !0)
       ]),
       _: 1
     }, 8, ["disabled", "position"]));
   }
 });
 export {
-  w as default
+  q as default
 };

package/components/Tabes/Tabes.vue.js

@@ -15,7 +15,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
   setup(s, { emit: x }) {
     const r = s, v = x, d = g(null), f = g(/* @__PURE__ */ new Map()), h = (e, n) => {
       e ? f.value.set(n, e) : f.value.delete(n);
-    }, b = g({
+    }, m = g({
       width: "0px",
       height: "0px",
       transform: "translate(0px, 0px)",
@@ -24,14 +24,14 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       await D();
       const e = d.value, n = f.value.get(r.modelValue);
       if (!e || !n) {
-        b.value.opacity = 0;
+        m.value.opacity = 0;
         return;
       }
-      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), m = t.left - a.left, $ = t.top - a.top, B = t.width, L = t.height;
-      b.value = {
+      const a = e.getBoundingClientRect(), t = n.getBoundingClientRect(), b = t.left - a.left, $ = t.top - a.top, B = t.width, L = t.height;
+      m.value = {
         width: `${B}px`,
         height: `${L}px`,
-        transform: `translate(${m}px, ${$}px)`,
+        transform: `translate(${b}px, ${$}px)`,
         opacity: 1
       };
     };
@@ -48,8 +48,8 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       line: "bg-transparent gap-6 rounded-none p-0 border-b border-border w-full"
     }[r.variant], r.block ? "flex w-full" : ""]), w = {
       sm: "text-xs px-2.5 py-1",
-      md: "text-xs px-3 py-1",
-      lg: "text-base px-4 py-1.5"
+      md: "-text-fs-2 px-3 py-1",
+      lg: "-text-fs-1 px-4 py-1"
     }, z = p(() => [r.variant === "line" ? "relative z-10 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-primary/50 pb-2 border-b-2 border-transparent hover:text-foreground" : "relative z-10 flex-1 flex items-center justify-center gap-2 font-medium transition-colors duration-50 ease-out cursor-pointer select-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-primary/50"]), V = (e) => {
       const n = e.value === r.modelValue, a = r.variant === "line";
       let t = "";
@@ -81,8 +81,8 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
           }
       else
         t = a ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground/80";
-      const m = e.disabled ? "opacity-50 cursor-not-allowed" : "";
-      return [z.value, t, m].join(" ");
+      const b = e.disabled ? "opacity-50 cursor-not-allowed" : "";
+      return [z.value, t, b].join(" ");
     }, R = p(() => {
       const e = "absolute left-0 top-0 transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] z-0 pointer-events-none";
       return r.variant === "line" ? `${e} !h-[2px] !top-auto bottom-0` : `${e} rounded-md shadow-sm`;
@@ -104,7 +104,7 @@ const q = ["aria-selected", "disabled", "onClick"], K = /* @__PURE__ */ M({
       s.modelValue !== void 0 ? (i(), u("div", {
         key: 0,
         class: l([R.value, S()]),
-        style: A(b.value)
+        style: A(m.value)
       }, null, 6)) : y("", !0),
       (i(!0), u(E, null, I(s.options, (a) => (i(), u("button", {
         key: a.value,

package/components/Workbook/Sheet.vue.d.ts

@@ -12,6 +12,9 @@ interface Props {
         cancel?: string;
     };
     allowIconChange?: boolean;
+    itemClass?: string;
+    activeItemClass?: string;
+    inactiveItemClass?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     select: (id: string) => any;
@@ -30,10 +33,13 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "onEdit-end"?: (id: string) => any;
     onDuplicate?: (id: string) => any;
 }>, {
+    itemClass: string;
     isEditing: boolean;
     canDelete: boolean;
     confirmDelete: boolean;
     allowIconChange: boolean;
+    activeItemClass: string;
+    inactiveItemClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
 }, HTMLDivElement>;

package/components/Workbook/Sheet.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as N, ref as x, computed as g, openBlock as c, createElementBlock as a, normalizeClass as w, createElementVNode as r, withModifiers as y, createBlock as b, withCtx as m, createVNode as d, createCommentVNode as D, withDirectives as O, vModelText as $, toDisplayString as k, unref as j, createTextVNode as M, nextTick as R } from "vue";
+import { defineComponent as S, ref as g, computed as y, openBlock as a, createElementBlock as c, normalizeClass as D, createElementVNode as r, withModifiers as f, createBlock as b, withCtx as v, createVNode as d, createCommentVNode as C, withDirectives as V, vModelText as N, toDisplayString as k, unref as O, createTextVNode as j, nextTick as M } from "vue";
 import u from "../Icon.vue.js";
-import z from "../Dropdown/Dropdown.vue.js";
-import A from "../IconPicker.vue.js";
-const I = {
+import R from "../Dropdown/Dropdown.vue.js";
+import z from "../IconPicker.vue.js";
+const A = {
   type: "button",
   class: "flex items-center justify-center rounded hover:bg-accent transition-colors p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-primary/20 mt-1"
 }, K = {
@@ -11,9 +11,9 @@ const I = {
 }, U = { class: "flex-1 min-w-0 pr-1" }, q = {
   key: 1,
   class: "block truncate text-sm font-medium leading-normal"
-}, F = { class: "opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 flex items-center bg-inherit" }, G = { class: "p-1 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors" }, H = {
-  class: /* @__PURE__ */ w(["flex items-center"])
-}, W = /* @__PURE__ */ N({
+}, F = { class: "p-1 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors" }, G = {
+  class: /* @__PURE__ */ D(["flex items-center"])
+}, Q = /* @__PURE__ */ S({
   __name: "Sheet",
   props: {
     sheet: {},
@@ -22,23 +22,26 @@ const I = {
     canDelete: { type: Boolean, default: !0 },
     confirmDelete: { type: Boolean, default: !1 },
     confirmDeleteTexts: {},
-    allowIconChange: { type: Boolean, default: !0 }
+    allowIconChange: { type: Boolean, default: !0 },
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    inactiveItemClass: { default: "" }
   },
   emits: ["select", "update:title", "update:icon", "edit-start", "edit-end", "duplicate", "delete"],
-  setup(i, { emit: C }) {
-    const e = i, n = C, f = x(null), s = x(e.sheet.title), v = () => {
-      s.value = e.sheet.title, n("edit-start", e.sheet.id), R(() => {
-        f.value?.focus(), f.value?.select();
+  setup(i, { emit: w }) {
+    const e = i, l = w, m = g(null), s = g(e.sheet.title), p = () => {
+      s.value = e.sheet.title, l("edit-start", e.sheet.id), M(() => {
+        m.value?.focus(), m.value?.select();
       });
     }, h = () => {
       if (!e.isEditing) return;
       const t = s.value.trim();
-      t ? n("update:title", e.sheet.id, t) : s.value = e.sheet.title, n("edit-end", e.sheet.id);
+      t ? l("update:title", e.sheet.id, t) : s.value = e.sheet.title, l("edit-end", e.sheet.id);
     }, E = () => {
-      s.value = e.sheet.title, n("edit-end", e.sheet.id);
+      s.value = e.sheet.title, l("edit-end", e.sheet.id);
     }, T = (t) => {
       t.key === "Enter" && h(), t.key === "Escape" && E();
-    }, B = g(() => [
+    }, B = y(() => [
       { label: "Rename", value: "rename", icon: "lucide:pencil" },
       { label: "Duplicate", value: "duplicate", icon: "lucide:copy" },
       {
@@ -54,40 +57,41 @@ const I = {
           cancelText: e.confirmDeleteTexts?.cancel,
           variant: "danger",
           onConfirm: () => {
-            e.canDelete && n("delete", e.sheet.id);
+            e.canDelete && l("delete", e.sheet.id);
           }
         } : void 0
       }
-    ]), S = (t) => {
-      if (t.value === "rename" && v(), t.value === "duplicate" && n("duplicate", e.sheet.id), t.value === "delete") {
+    ]), I = (t) => {
+      if (t.value === "rename" && p(), t.value === "duplicate" && l("duplicate", e.sheet.id), t.value === "delete") {
         if (!e.canDelete || e.confirmDelete) return;
-        n("delete", e.sheet.id);
+        l("delete", e.sheet.id);
       }
-    }, p = (t) => {
-      t && t.value && t.value !== "delete" || e.canDelete && n("delete", e.sheet.id);
-    }, V = g(() => [
+    }, x = (t) => {
+      t && t.value && t.value !== "delete" || e.canDelete && l("delete", e.sheet.id);
+    }, $ = y(() => [
       "group relative flex items-center min-w-[120px] max-w-[240px] h-9 px-3 border-r border-border select-none cursor-pointer transition-all duration-200 ease-out",
-      e.isActive ? "bg-muted text-foreground ring-1 ring-border ring-b-0 z-10" : "text-muted-foreground hover:bg-accent/50",
+      e.itemClass,
+      e.isActive ? `bg-muted text-foreground ring-1 ring-border ring-b-0 z-10 ${e.activeItemClass}` : `text-muted-foreground hover:bg-accent/50 ${e.inactiveItemClass}`,
       e.isEditing ? "cursor-text" : ""
-    ].join(" "));
-    return (t, o) => (c(), a("div", {
-      class: w(V.value),
-      onClick: o[4] || (o[4] = (l) => n("select", i.sheet.id)),
-      onDblclick: v
+    ].filter(Boolean).join(" "));
+    return (t, n) => (a(), c("div", {
+      class: D($.value),
+      onClick: n[5] || (n[5] = (o) => l("select", i.sheet.id)),
+      onDblclick: p
     }, [
       r("div", {
-        onClick: o[1] || (o[1] = y(() => {
+        onClick: n[1] || (n[1] = f(() => {
         }, ["stop"])),
         class: "mr-2 flex items-center shrink-0"
       }, [
-        (i.sheet.icon || i.isEditing) && i.allowIconChange ? (c(), b(A, {
+        (i.sheet.icon || i.isEditing) && i.allowIconChange ? (a(), b(z, {
           key: 0,
           value: i.sheet.icon || "lucide:file",
           position: "bottom-start",
-          onOnSelect: o[0] || (o[0] = (l) => n("update:icon", i.sheet.id, l))
+          onOnSelect: n[0] || (n[0] = (o) => l("update:icon", i.sheet.id, o))
         }, {
-          default: m(() => [
-            r("button", I, [
+          default: v(() => [
+            r("button", A, [
               d(u, {
                 icon: i.sheet.icon || "lucide:file",
                 class: "w-4 h-4 opacity-70 hover:opacity-100 transition-opacity"
@@ -95,55 +99,59 @@ const I = {
             ])
           ]),
           _: 1
-        }, 8, ["value"])) : i.sheet.icon ? (c(), a("div", K, [
+        }, 8, ["value"])) : i.sheet.icon ? (a(), c("div", K, [
           d(u, {
             icon: i.sheet.icon,
             class: "w-4 h-4 opacity-70"
           }, null, 8, ["icon"])
-        ])) : D("", !0)
+        ])) : C("", !0)
       ]),
       r("div", U, [
-        i.isEditing ? O((c(), a("input", {
+        i.isEditing ? V((a(), c("input", {
           key: 0,
           ref_key: "inputRef",
-          ref: f,
-          "onUpdate:modelValue": o[2] || (o[2] = (l) => s.value = l),
+          ref: m,
+          "onUpdate:modelValue": n[2] || (n[2] = (o) => s.value = o),
           type: "text",
           class: "w-full bg-transparent border-none outline-none p-0 text-sm font-medium text-foreground placeholder-muted-foreground focus:ring-0",
           onBlur: h,
           onKeydown: T,
-          onClick: o[3] || (o[3] = y(() => {
+          onClick: n[3] || (n[3] = f(() => {
           }, ["stop"]))
         }, null, 544)), [
-          [$, s.value]
-        ]) : (c(), a("span", q, k(i.sheet.title), 1))
+          [N, s.value]
+        ]) : (a(), c("span", q, k(i.sheet.title), 1))
       ]),
-      r("div", F, [
-        d(j(z), {
+      r("div", {
+        class: "opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 flex items-center bg-inherit",
+        onClick: n[4] || (n[4] = f(() => {
+        }, ["stop"]))
+      }, [
+        d(O(R), {
           options: B.value,
           position: "bottom-end",
           width: "140px",
           teleport: !0,
-          onOnSelect: S,
-          onOnConfirm: p,
-          onConfirm: p
+          onOnSelect: I,
+          onOnConfirm: x,
+          onConfirm: x
         }, {
-          trigger: m(() => [
-            r("button", G, [
+          trigger: v(() => [
+            r("button", F, [
               d(u, {
                 icon: "lucide:more-vertical",
                 class: "w-3.5 h-3.5"
               })
             ])
           ]),
-          item: m(({ option: l }) => [
-            r("div", H, [
-              l?.icon ? (c(), b(u, {
+          item: v(({ option: o }) => [
+            r("div", G, [
+              o?.icon ? (a(), b(u, {
                 key: 0,
-                icon: l?.icon,
+                icon: o?.icon,
                 class: "w-3.5 h-3.5 mr-2 opacity-70"
-              }, null, 8, ["icon"])) : D("", !0),
-              M(" " + k(l?.label), 1)
+              }, null, 8, ["icon"])) : C("", !0),
+              j(" " + k(o?.label), 1)
             ])
           ]),
           _: 1
@@ -153,5 +161,5 @@ const I = {
   }
 });
 export {
-  W as default
+  Q as default
 };

package/components/Workbook/Workbook.vue.d.ts

@@ -33,11 +33,14 @@ declare const __VLS_component: import('vue').DefineComponent<WorkbookProps, {},
     "onUpdate:sheets"?: (sheets: WorkbookSheet[]) => any;
 }>, {
     variant: "chrome" | "folder" | "simple" | "card";
+    itemClass: string;
     modelValue: string;
     editable: boolean;
     draggable: boolean;
     confirmDelete: boolean;
     allowIconChange: boolean;
+    activeItemClass: string;
+    inactiveItemClass: string;
     sheets: WorkbookSheet[];
     addable: boolean;
     addButtonPosition: AddButtonPosition;

package/components/Workbook/Workbook.vue.js

@@ -1,7 +1,7 @@
 import o from "./Workbook.vue2.js";
 /* empty css              */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b2bb8797"]]);
+const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-833e6dc5"]]);
 export {
   _ as default
 };

package/components/Workbook/Workbook.vue2.js

@@ -1,15 +1,15 @@
-import { defineComponent as T, ref as g, watch as p, nextTick as _, computed as U, openBlock as a, createElementBlock as i, createElementVNode as c, renderSlot as m, createCommentVNode as u, Fragment as A, renderList as P, unref as J, createBlock as O, createVNode as x } from "vue";
-import { useDragAndDrop as W } from "@formkit/drag-and-drop/vue";
-import { animations as Y } from "@formkit/drag-and-drop";
-import z from "./Sheet.vue.js";
+import { defineComponent as T, ref as g, watch as x, nextTick as U, computed as A, openBlock as d, createElementBlock as o, createElementVNode as c, renderSlot as m, createCommentVNode as u, Fragment as P, renderList as J, unref as O, createBlock as W, createVNode as p } from "vue";
+import { useDragAndDrop as Y } from "@formkit/drag-and-drop/vue";
+import { animations as z } from "@formkit/drag-and-drop";
+import F from "./Sheet.vue.js";
 import b from "./WorkbookAddButton.vue.js";
-const F = { class: "flex flex-col w-full font-sans" }, L = { class: "flex items-end w-full border-b px-1 gap-2" }, M = {
+const L = { class: "flex flex-col w-full font-sans" }, M = { class: "flex items-end w-full border-b px-1" }, j = {
   key: 0,
-  class: "flex items-center mb-1 mr-2"
-}, j = {
+  class: "flex items-center"
+}, q = {
   key: 0,
   class: "shrink-0 mb-1"
-}, q = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, G = { key: 0 }, H = { key: 1 }, K = { class: "flex-1 relative bg-white w-full" }, te = /* @__PURE__ */ T({
+}, G = { class: "flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone" }, H = { key: 0 }, K = { key: 1 }, Q = { class: "flex-1 relative bg-white w-full" }, te = /* @__PURE__ */ T({
   __name: "Workbook",
   props: {
     modelValue: { default: "" },
@@ -21,20 +21,23 @@ const F = { class: "flex flex-col w-full font-sans" }, L = { class: "flex items-
     maxSheets: { default: 50 },
     variant: { default: "chrome" },
     class: {},
+    itemClass: { default: "" },
+    activeItemClass: { default: "" },
+    inactiveItemClass: { default: "" },
     confirmDelete: { type: Boolean, default: !1 },
     confirmDeleteTexts: {},
     allowIconChange: { type: Boolean, default: !0 }
   },
   emits: ["update:modelValue", "update:sheets", "change", "add", "delete", "duplicate", "edit-start", "edit-end"],
-  setup(d, { emit: k }) {
-    const l = d, o = k, f = g(null), r = g(null), [w, h] = W(l.sheets, {
-      plugins: [Y()],
+  setup(i, { emit: k }) {
+    const l = i, a = k, f = g(null), r = g(null), [w, h] = Y(l.sheets, {
+      plugins: [z()],
       draggable: (e) => l.draggable && !r.value,
       onSort: (e) => {
-        o("update:sheets", e.values);
+        a("update:sheets", e.values);
       }
     });
-    p(
+    x(
       () => l.sheets,
       (e) => {
         JSON.stringify(e) !== JSON.stringify(h.value) && (h.value = [...e]);
@@ -42,44 +45,44 @@ const F = { class: "flex flex-col w-full font-sans" }, L = { class: "flex items-
       { deep: !0 }
     );
     const y = (e) => {
-      o("update:modelValue", e), o("change", e);
+      a("update:modelValue", e), a("change", e);
     }, v = () => {
-      l.sheets.length >= l.maxSheets || o("add");
-    }, S = (e, s) => {
-      const t = l.sheets.findIndex((n) => n.id === e);
+      l.sheets.length >= l.maxSheets || a("add");
+    }, C = (e, n) => {
+      const t = l.sheets.findIndex((s) => s.id === e);
       if (t !== -1) {
-        const n = [...l.sheets];
-        n[t] = { ...n[t], title: s }, o("update:sheets", n);
+        const s = [...l.sheets];
+        s[t] = { ...s[t], title: n }, a("update:sheets", s);
       }
-    }, D = (e, s) => {
-      const t = l.sheets.findIndex((n) => n.id === e);
+    }, S = (e, n) => {
+      const t = l.sheets.findIndex((s) => s.id === e);
       if (t !== -1) {
-        const n = [...l.sheets];
-        n[t] = { ...n[t], icon: s }, o("update:sheets", n);
+        const s = [...l.sheets];
+        s[t] = { ...s[t], icon: n }, a("update:sheets", s);
       }
+    }, I = (e) => {
+      r.value = e, a("edit-start", e);
+    }, D = (e) => {
+      r.value = null, a("edit-end", e);
     }, B = (e) => {
-      r.value = e, o("edit-start", e);
+      a("duplicate", e);
     }, V = (e) => {
-      r.value = null, o("edit-end", e);
-    }, I = (e) => {
-      o("duplicate", e);
-    }, C = (e) => {
-      const s = l.sheets.findIndex((n) => n.id === e);
-      if (s === -1) return;
+      const n = l.sheets.findIndex((s) => s.id === e);
+      if (n === -1) return;
       const t = [...l.sheets];
-      if (t.splice(s, 1), o("update:sheets", t), o("delete", e), l.modelValue === e) {
-        let n = "";
+      if (t.splice(n, 1), a("update:sheets", t), a("delete", e), l.modelValue === e) {
+        let s = "";
         if (t.length > 0) {
-          const N = Math.min(s, t.length - 1);
-          n = t[N].id;
+          const N = Math.min(n, t.length - 1);
+          s = t[N].id;
         }
-        o("update:modelValue", n), o("change", n);
+        a("update:modelValue", s), a("change", s);
       }
     };
-    p(
+    x(
       () => l.sheets.length,
-      (e, s) => {
-        s !== void 0 && s > 0 && e === s + 1 && l.addable && _(() => {
+      (e, n) => {
+        n !== void 0 && n > 0 && e === n + 1 && l.addable && U(() => {
           const t = l.sheets[l.sheets.length - 1];
           t.id === l.modelValue && (r.value = t.id);
         });
@@ -87,10 +90,10 @@ const F = { class: "flex flex-col w-full font-sans" }, L = { class: "flex items-
     );
     const E = (e) => {
       f.value && e.deltaY !== 0 && (f.value.scrollLeft += e.deltaY, e.preventDefault());
-    }, $ = U(() => l.sheets.length > 1);
-    return (e, s) => (a(), i("div", F, [
-      c("div", L, [
-        e.$slots["left-addons"] ? (a(), i("div", M, [
+    }, $ = A(() => l.sheets.length > 1);
+    return (e, n) => (d(), o("div", L, [
+      c("div", M, [
+        e.$slots["left-addons"] ? (d(), o("div", j, [
           m(e.$slots, "left-addons", {}, void 0, !0)
         ])) : u("", !0),
         c("div", {
@@ -105,39 +108,42 @@ const F = { class: "flex flex-col w-full font-sans" }, L = { class: "flex items-
             ref: w,
             class: "flex items-end"
           }, [
-            (a(!0), i(A, null, P(J(h), (t) => (a(), O(z, {
+            (d(!0), o(P, null, J(O(h), (t) => (d(), W(F, {
               key: t.id,
               sheet: t,
-              "is-active": d.modelValue === t.id,
+              "is-active": i.modelValue === t.id,
               "is-editing": r.value === t.id,
               "can-delete": $.value,
-              "confirm-delete": d.confirmDelete,
-              "confirm-delete-texts": d.confirmDeleteTexts,
-              "allow-icon-change": d.allowIconChange,
+              "confirm-delete": i.confirmDelete,
+              "confirm-delete-texts": i.confirmDeleteTexts,
+              "allow-icon-change": i.allowIconChange,
+              "item-class": i.itemClass,
+              "active-item-class": i.activeItemClass,
+              "inactive-item-class": i.inactiveItemClass,
               onSelect: y,
-              "onUpdate:title": S,
-              "onUpdate:icon": D,
-              onEditStart: B,
-              onEditEnd: V,
-              onDuplicate: I,
-              onDelete: C
-            }, null, 8, ["sheet", "is-active", "is-editing", "can-delete", "confirm-delete", "confirm-delete-texts", "allow-icon-change"]))), 128))
+              "onUpdate:title": C,
+              "onUpdate:icon": S,
+              onEditStart: I,
+              onEditEnd: D,
+              onDuplicate: B,
+              onDelete: V
+            }, null, 8, ["sheet", "is-active", "is-editing", "can-delete", "confirm-delete", "confirm-delete-texts", "allow-icon-change", "item-class", "active-item-class", "inactive-item-class"]))), 128))
           ], 512),
-          d.addable && d.addButtonPosition === "attached" ? (a(), i("div", j, [
-            x(b, { onClick: v })
+          i.addable && i.addButtonPosition === "attached" ? (d(), o("div", q, [
+            p(b, { onClick: v })
           ])) : u("", !0),
-          s[0] || (s[0] = c("div", { class: "w-1 shrink-0" }, null, -1))
+          n[0] || (n[0] = c("div", { class: "w-1 shrink-0" }, null, -1))
         ], 544),
-        c("div", q, [
-          d.addable && d.addButtonPosition === "fixed-right" ? (a(), i("div", G, [
-            x(b, { onClick: v })
+        c("div", G, [
+          i.addable && i.addButtonPosition === "fixed-right" ? (d(), o("div", H, [
+            p(b, { onClick: v })
           ])) : u("", !0),
-          e.$slots["right-addons"] ? (a(), i("div", H, [
+          e.$slots["right-addons"] ? (d(), o("div", K, [
             m(e.$slots, "right-addons", {}, void 0, !0)
           ])) : u("", !0)
         ])
       ]),
-      c("div", K, [
+      c("div", Q, [
         m(e.$slots, "default", {}, void 0, !0)
       ])
     ]));

package/components/Workbook/types.d.ts

@@ -19,6 +19,9 @@ export interface WorkbookProps {
     maxSheets?: number;
     variant?: 'chrome' | 'folder' | 'simple' | 'card';
     class?: string;
+    itemClass?: string;
+    activeItemClass?: string;
+    inactiveItemClass?: string;
     confirmDelete?: boolean;
     confirmDeleteTexts?: {
         title?: string;

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.6",
+  "version": "0.2.7",
   "type": "module",
   "main": "index.js",
   "module": "index.js",

package/style.css

@@ -315,6 +315,10 @@
   --color-success-dark: #00613f;
 }
 
+@utility -text-fs-* {
+  font-size: calc(--value(--text--fs- *, [length], [number]));
+}
+
 
 .dark .modal-body,
 .dark .sidepanel-body {