@indielayer/ui 1.6.0 → 1.6.2

package/lib/components/slider/Slider.vue.d.ts

@@ -13,7 +13,10 @@ declare const sliderProps: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -60,7 +63,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -108,7 +114,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -144,6 +153,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     color: string;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    modelValue: string | number | boolean | object | any[] | undefined;
     readonly: boolean;
     required: boolean;
     validateOnInput: boolean;

package/lib/components/slider/Slider.vue.js

@@ -1,7 +1,7 @@
 import o from "./Slider.vue2.js";
 import "./Slider.vue3.js";
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0298db68"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-95a853b4"]]);
 export {
-  _ as default
+  p as default
 };

package/lib/components/slider/Slider.vue2.js

@@ -32,13 +32,13 @@ const D = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" },
   props: K,
   emits: i.emits(),
   setup(h, { expose: N, emit: g }) {
-    const s = h, n = g, m = d(null), l = d(Number(s.modelValue ?? 0)), { focus: u, blur: w } = y(m);
+    const s = h, n = g, m = d(null), l = d(Number(s.modelValue ?? 0)), { focus: u, blur: S } = y(m);
     p(() => s.modelValue, (e) => {
       l.value = Number(e ?? 0);
     }), p(l, (e) => {
       n("update:modelValue", e);
     });
-    const S = F(() => (l.value - Number(s.min)) / (Number(s.max) - Number(s.min)) * 100), {
+    const w = F(() => (l.value - Number(s.min)) / (Number(s.max) - Number(s.min)) * 100), {
       errorInternal: C,
       hideFooterInternal: _,
       isInsideForm: k,
@@ -47,7 +47,7 @@ const D = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" },
       validate: $,
       setError: q
     } = i(s, { focus: u, emit: n }), { styles: z, classes: t, className: B } = j("Slider", {}, s);
-    return N({ focus: u, blur: w, reset: V, validate: $, setError: q }), (e, O) => (f(), c(x, {
+    return N({ focus: u, blur: S, reset: V, validate: $, setError: q }), (e, O) => (f(), c(x, {
       style: v(r(z)),
       disabled: e.disabled,
       required: e.required,
@@ -68,7 +68,7 @@ const D = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" },
               ref_key: "elRef",
               ref: m,
               type: "range",
-              class: [r(t).input, "absolute w-full z-10 appearance-none bg-transparent focus:outline-none focus-visible:outline-none"],
+              class: [r(t).input, "absolute z-10 appearance-none bg-transparent focus:outline-none focus-visible:outline-none"],
               disabled: e.disabled,
               name: e.name,
               max: e.max,
@@ -82,7 +82,7 @@ const D = { class: "flex items-center relative w-full gap-2 min-h-[1.25rem]" },
             }, [
               o("div", {
                 class: a(r(t).progress),
-                style: v({ width: S.value + "%" })
+                style: v({ width: w.value + "%" })
               }, null, 6)
             ], 2)
           ]),

package/lib/components/slider/theme/Slider.base.theme.js

@@ -4,7 +4,7 @@ const l = {
       const e = [];
       return r.disabled && e.push("cursor-not-allowed"), e;
     },
-    input: "w-[calc(100%+0.5rem)] -ml-1 disabled:cursor-not-allowed",
+    input: "w-[calc(100%+0.65rem)] -ml-1 disabled:cursor-not-allowed",
     track: "h-1.5 bg-secondary-200 dark:bg-secondary-700 rounded-md overflow-hidden",
     progress: "h-full bg-[color:var(--x-slider-bg)]"
   },

package/lib/components/table/Table.vue.js

@@ -1,15 +1,15 @@
-import { defineComponent as E, ref as J, watch as X, openBlock as n, createElementBlock as a, normalizeClass as c, unref as u, renderSlot as i, createElementVNode as p, normalizeStyle as F, createVNode as f, withCtx as d, createBlock as m, createCommentVNode as $, Fragment as y, renderList as g, createTextVNode as _, toDisplayString as C } from "vue";
-import { useTheme as O } from "../../composables/useTheme.js";
-import P from "./TableHead.vue.js";
-import N from "./TableHeader.vue.js";
-import W from "./TableBody.js";
-import S from "./TableRow.vue.js";
-import w from "./TableCell.vue.js";
-import q from "../spinner/Spinner.vue.js";
-import G from "../skeleton/Skeleton.vue.js";
-import K from "../icon/Icon.vue.js";
-import { chevronDownIcon as M } from "../../common/icons.js";
-const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["onClick"], j = { key: 0 }, x = { colspan: "999" }, ee = {
+import { defineComponent as J, ref as X, watch as F, openBlock as n, createElementBlock as r, normalizeClass as c, unref as p, renderSlot as d, createElementVNode as m, normalizeStyle as O, createVNode as y, withCtx as u, createBlock as k, createCommentVNode as b, Fragment as g, renderList as v, createTextVNode as C, toDisplayString as N } from "vue";
+import { useTheme as P } from "../../composables/useTheme.js";
+import W from "./TableHead.vue.js";
+import S from "./TableHeader.vue.js";
+import q from "./TableBody.js";
+import z from "./TableRow.vue.js";
+import B from "./TableCell.vue.js";
+import G from "../spinner/Spinner.vue.js";
+import K from "../skeleton/Skeleton.vue.js";
+import M from "../icon/Icon.vue.js";
+import { chevronDownIcon as Q } from "../../common/icons.js";
+const R = { key: 1 }, U = ["colspan"], Y = { key: 2 }, Z = ["colspan"], j = ["onClick"], x = { colspan: "999" }, ee = {
   headers: {
     type: Array,
     default: () => []
@@ -42,7 +42,7 @@ const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["on
     default: !0
   },
   expandable: Boolean
-}, te = { name: "XTable" }, fe = /* @__PURE__ */ E({
+}, te = { name: "XTable" }, fe = /* @__PURE__ */ J({
   ...te,
   props: {
     ...ee,
@@ -52,21 +52,21 @@ const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["on
     }
   },
   emits: ["update:sort", "click-row"],
-  setup(h, { emit: z }) {
-    const v = h;
-    function A(e) {
+  setup(h, { emit: A }) {
+    const $ = h;
+    function T(e) {
       try {
         return JSON.parse(JSON.stringify(e));
       } catch {
         return [];
       }
     }
-    const k = J([]);
-    X(() => v.items, (e) => {
-      v.expandable && (k.value = A(e));
+    const f = X([]);
+    F(() => $.items, (e) => {
+      $.expandable && (f.value = T(e));
     }, { immediate: !0 });
-    const T = z;
-    function H(e, o) {
+    const H = A;
+    function V(e, o) {
       if (e)
         for (let t = 0; t < o.length; t++) {
           const { 0: l, 1: s } = o[t].split(",");
@@ -74,59 +74,59 @@ const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["on
             return parseInt(s) > 0 ? 1 : -1;
         }
     }
-    function V(e) {
-      const o = v.sort.slice(0);
+    function I(e) {
+      const o = $.sort.slice(0);
       let t = !1;
       for (let l = 0; l < o.length; l++) {
-        const { 0: s, 1: r } = o[l].split(",");
+        const { 0: s, 1: a } = o[l].split(",");
         if (s === e.value) {
-          if (t = !0, r === "-1") {
+          if (t = !0, a === "-1") {
             o.splice(l, 1, `${e.value},1`);
             break;
-          } else if (r === "1") {
+          } else if (a === "1") {
             o.splice(l, 1);
             break;
           }
         }
       }
-      t || o.push(`${e.value},-1`), T("update:sort", o);
+      t || o.push(`${e.value},-1`), H("update:sort", o);
     }
-    function I(e, o) {
+    function L(e, o) {
       if (!o)
         return "";
       const t = Array.isArray(o) ? o : o.match(/([^[.\]])+/g);
-      return (t == null ? void 0 : t.reduce((s, r) => s && s[r], e)) ?? "";
+      return (t == null ? void 0 : t.reduce((s, a) => s && s[a], e)) ?? "";
     }
-    const { styles: L, classes: b, className: D } = O("Table", {}, v);
-    return (e, o) => (n(), a("div", {
-      class: c([u(D), u(b).wrapper])
+    const { styles: D, classes: w, className: E } = P("Table", {}, $);
+    return (e, o) => (n(), r("div", {
+      class: c([p(E), p(w).wrapper])
     }, [
-      i(e.$slots, "title"),
-      i(e.$slots, "actions"),
-      p("table", {
-        style: F(u(L)),
-        class: c(u(b).table)
+      d(e.$slots, "title"),
+      d(e.$slots, "actions"),
+      m("table", {
+        style: O(p(D)),
+        class: c(p(w).table)
       }, [
-        f(P, null, {
-          default: d(() => [
-            e.expandable ? (n(), m(N, {
+        y(W, null, {
+          default: u(() => [
+            e.expandable ? (n(), k(S, {
               key: 0,
               width: "48",
               class: "!p-0",
               "sticky-header": e.stickyHeader
-            }, null, 8, ["sticky-header"])) : $("", !0),
-            (n(!0), a(y, null, g(e.headers, (t, l) => (n(), m(N, {
+            }, null, 8, ["sticky-header"])) : b("", !0),
+            (n(!0), r(g, null, v(e.headers, (t, l) => (n(), k(S, {
               key: l,
               "sticky-header": e.stickyHeader,
               "text-align": t.align,
-              sort: H(t.value, e.sort),
+              sort: V(t.value, e.sort),
               sortable: t.sortable,
               width: t.width,
-              onClick: (s) => t.sortable ? V(t) : null
+              onClick: (s) => t.sortable ? I(t) : null
             }, {
-              default: d(() => [
-                i(e.$slots, `header-${t.value}`, { header: t }, () => [
-                  _(C(t.text), 1)
+              default: u(() => [
+                d(e.$slots, `header-${t.value}`, { header: t }, () => [
+                  C(N(t.text), 1)
                 ])
               ]),
               _: 2
@@ -134,23 +134,23 @@ const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["on
           ]),
           _: 3
         }),
-        f(u(W), null, {
-          default: d(() => [
-            e.loading ? (n(!0), a(y, { key: 0 }, g(Number(e.loadingLines), (t, l) => (n(), m(S, {
+        y(p(q), null, {
+          default: u(() => [
+            e.loading ? (n(!0), r(g, { key: 0 }, v(Number(e.loadingLines), (t, l) => (n(), k(z, {
               key: l,
               striped: e.striped
             }, {
-              default: d(() => [
-                (n(!0), a(y, null, g(e.headers, (s, r) => (n(), m(w, {
-                  key: r,
+              default: u(() => [
+                (n(!0), r(g, null, v(e.headers, (s, a) => (n(), k(B, {
+                  key: a,
                   "text-align": s.align,
                   width: s.width,
                   dense: e.dense,
                   fixed: e.fixed
                 }, {
-                  default: d(() => [
-                    i(e.$slots, `loading-${s.value}`, { item: t }, () => [
-                      f(G, {
+                  default: u(() => [
+                    d(e.$slots, `loading-${s.value}`, { item: t }, () => [
+                      y(K, {
                         class: c(["max-w-[60%]", {
                           "mx-auto": s.align === "center",
                           "ml-auto": s.align === "right"
@@ -163,63 +163,63 @@ const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["on
                 }, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
               ]),
               _: 2
-            }, 1032, ["striped"]))), 128)) : e.error ? (n(), a("tr", Q, [
-              p("td", {
+            }, 1032, ["striped"]))), 128)) : e.error ? (n(), r("tr", R, [
+              m("td", {
                 colspan: e.headers.length
               }, [
-                i(e.$slots, "error")
-              ], 8, R)
-            ])) : !h.items || h.items.length === 0 ? (n(), a("tr", U, [
-              p("td", {
+                d(e.$slots, "error")
+              ], 8, U)
+            ])) : !h.items || h.items.length === 0 ? (n(), r("tr", Y, [
+              m("td", {
                 colspan: e.headers.length
               }, [
-                i(e.$slots, "empty")
-              ], 8, Y)
-            ])) : (n(!0), a(y, { key: 3 }, g(h.items, (t, l) => {
-              var s;
-              return n(), a(y, { key: l }, [
-                f(S, {
+                d(e.$slots, "empty")
+              ], 8, Z)
+            ])) : (n(!0), r(g, { key: 3 }, v(h.items, (t, l) => {
+              var s, a;
+              return n(), r(g, { key: l }, [
+                y(z, {
                   pointer: e.pointer,
                   striped: e.striped,
-                  onClick: (r) => e.$emit("click-row", t)
+                  onClick: (i) => e.$emit("click-row", t)
                 }, {
-                  default: d(() => [
-                    e.expandable ? (n(), m(w, {
+                  default: u(() => [
+                    e.expandable ? (n(), k(B, {
                       key: 0,
                       width: "48",
                       class: "!p-1"
                     }, {
-                      default: d(() => {
-                        var r;
+                      default: u(() => {
+                        var i;
                         return [
-                          p("button", {
+                          m("button", {
                             type: "button",
                             class: "p-4",
-                            onClick: (B) => k.value[l].__expanded = !k.value[l].__expanded
+                            onClick: (_) => f.value[l].__expanded = !f.value[l].__expanded
                           }, [
-                            f(K, {
-                              icon: u(M),
+                            y(M, {
+                              icon: p(Q),
                               size: e.dense ? "xs" : "md",
                               class: c(["transition-transform", {
-                                "rotate-180": (r = k.value[l]) == null ? void 0 : r.__expanded
+                                "rotate-180": (i = f.value[l]) == null ? void 0 : i.__expanded
                               }])
                             }, null, 8, ["icon", "size", "class"])
-                          ], 8, Z)
+                          ], 8, j)
                         ];
                       }),
                       _: 2
-                    }, 1024)) : $("", !0),
-                    (n(!0), a(y, null, g(e.headers, (r, B) => (n(), m(w, {
-                      key: B,
-                      "text-align": r.align,
-                      truncate: r.truncate,
-                      width: r.width,
+                    }, 1024)) : b("", !0),
+                    (n(!0), r(g, null, v(e.headers, (i, _) => (n(), k(B, {
+                      key: _,
+                      "text-align": i.align,
+                      truncate: i.truncate,
+                      width: i.width,
                       dense: e.dense,
                       fixed: e.fixed
                     }, {
-                      default: d(() => [
-                        i(e.$slots, `item-${r.value}`, { item: t }, () => [
-                          _(C(I(t, r.value)), 1)
+                      default: u(() => [
+                        d(e.$slots, `item-${i.value}`, { item: t }, () => [
+                          C(N(L(t, i.value)), 1)
                         ])
                       ]),
                       _: 2
@@ -227,26 +227,29 @@ const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["on
                   ]),
                   _: 2
                 }, 1032, ["pointer", "striped", "onClick"]),
-                e.expandable ? (n(), a("tr", j, [
-                  p("td", x, [
-                    p("div", {
-                      class: c(["overflow-hidden transition-opacity", [(s = k.value[l]) != null && s.__expanded ? "" : "opacity-0 max-h-0"]])
+                e.expandable ? (n(), r("tr", {
+                  key: 0,
+                  class: c({ hidden: !((s = f.value[l]) != null && s.__expanded) })
+                }, [
+                  m("td", x, [
+                    m("div", {
+                      class: c(["overflow-hidden transition-opacity", [(a = f.value[l]) != null && a.__expanded ? "" : "opacity-0 max-h-0"]])
                     }, [
-                      i(e.$slots, "expanded-row", { item: t })
+                      d(e.$slots, "expanded-row", { item: t })
                     ], 2)
                   ])
-                ])) : $("", !0)
+                ], 2)) : b("", !0)
               ], 64);
             }), 128))
           ]),
           _: 3
         }),
-        e.loading ? (n(), a("div", {
+        e.loading ? (n(), r("div", {
           key: 0,
-          class: c(u(b).loadingWrapper)
+          class: c(p(w).loadingWrapper)
         }, [
-          f(q, { size: "lg" })
-        ], 2)) : $("", !0)
+          y(G, { size: "lg" })
+        ], 2)) : b("", !0)
       ], 6)
     ], 2));
   }

package/lib/components/table/theme/TableCell.base.theme.js

@@ -1,7 +1,7 @@
 const i = {
   classes: {
     wrapper: ({ props: e }) => {
-      const t = ["last:pr-0 px-3"];
+      const t = ["px-3"];
       return t.push(e.dense ? "py-2" : "py-4"), e.textAlign === "left" ? t.push("text-left") : e.textAlign === "center" ? t.push("text-center") : e.textAlign === "right" ? t.push("text-right") : e.textAlign === "justify" && t.push("text-justify"), e.verticalAlign === "baseline" ? t.push("align-baseline") : e.verticalAlign === "bottom" ? t.push("align-bottom") : e.verticalAlign === "middle" ? t.push("align-middle") : e.verticalAlign === "text-bottom" ? t.push("align-text-bottom") : e.verticalAlign === "text-top" ? t.push("align-text-top") : e.verticalAlign === "top" && t.push("align-top"), e.truncate && t.push("truncate"), t;
     }
   }

package/lib/components/table/theme/TableHead.base.theme.js

@@ -1,9 +1,9 @@
-const t = {
+const e = {
   classes: {
-    thead: "align-bottom",
-    row: "text-sm text-secondary-600 dark:text-secondary-400 border-b"
+    thead: "align-bottom bg-secondary-50 dark:bg-secondary-700",
+    row: "text-sm text-secondary-600 dark:text-secondary-200 border-b"
   }
-}, e = t;
+}, t = e;
 export {
-  e as default
+  t as default
 };

package/lib/components/table/theme/TableHeader.base.theme.js

@@ -1,10 +1,10 @@
 const s = {
   classes: {
     th: ({ props: e }) => {
-      const t = ["relative py-2 font-semibold tracking-widest uppercase text-xs px-3"];
+      const t = ["relative py-3 font-semibold text-xs px-3"];
       return e.sortable && t.push("cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out"), e.stickyHeader && t.push("sticky top-0"), e.textAlign === "left" && t.push("text-left"), e.textAlign === "right" && t.push("text-right"), e.textAlign === "center" && t.push("text-center"), e.textAlign === "justify" && t.push("text-justify"), t;
     },
-    sortIcon: ({ props: e }) => ["absolute stroke-2 w-3 h-3 top-2.5 right-0.5"]
+    sortIcon: ({ props: e }) => ["absolute stroke-2 w-3 h-3 top-3.5 right-0.5"]
   }
 }, i = s;
 export {

package/lib/components/table/theme/TableRow.base.theme.js

@@ -2,7 +2,7 @@ const s = {
   classes: {
     row: ({ props: r }) => {
       const e = [];
-      return r.striped ? e.push("odd:bg-secondary-50 dark:odd:bg-secondary-800") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
+      return r.striped ? e.push("even:bg-secondary-50 dark:even:bg-secondary-700") : e.push("border-b border-secondary-200 dark:border-secondary-700"), r.pointer && e.push("hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer"), e;
     }
   }
 }, o = s;

package/lib/components/textarea/Textarea.vue.d.ts

@@ -18,7 +18,10 @@ declare const textareaProps: {
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     resizable: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -74,7 +77,10 @@ declare const _default: import("vue").DefineComponent<{
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     resizable: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -128,7 +134,10 @@ declare const _default: import("vue").DefineComponent<{
     preventEnter: BooleanConstructor;
     block: BooleanConstructor;
     resizable: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -166,6 +175,7 @@ declare const _default: import("vue").DefineComponent<{
     block: boolean;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    modelValue: string | number | boolean | object | any[] | undefined;
     readonly: boolean;
     required: boolean;
     validateOnInput: boolean;

package/lib/components/textarea/Textarea.vue.js

@@ -40,28 +40,28 @@ const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlengt
   emits: s.emits(),
   setup(f, { expose: c, emit: h }) {
     const t = f, b = h, o = P(null);
-    O(o, l), typeof window < "u" && X(window, "resize", l), q([() => t.modelValue, () => t.size], () => {
-      setTimeout(l);
+    O(o, n), typeof window < "u" && X(window, "resize", n), q([() => t.modelValue, () => t.size], () => {
+      setTimeout(n);
     });
     const g = A("textarea"), y = J().getPalette("primary"), v = g.get("border", y[400]);
     function w() {
-      l();
+      n();
     }
     function S(e) {
       t.preventEnter && e.preventDefault(), e.stopPropagation();
     }
-    function l() {
+    function n() {
       t.adjustToText && o.value && (o.value.style.height = "1px", o.value.style.height = 2 + o.value.scrollHeight + "px");
     }
     const { focus: a, blur: k } = p(o), {
-      errorInternal: n,
+      errorInternal: l,
       hideFooterInternal: N,
       isInsideForm: T,
       inputListeners: z,
       reset: C,
       validate: B,
       setError: E
-    } = s(t, { focus: a, emit: b }), { styles: I, classes: i, className: V } = G("Textarea", {}, t, { errorInternal: n });
+    } = s(t, { focus: a, emit: b }), { styles: I, classes: i, className: V } = G("Textarea", {}, t, { errorInternal: l });
     return c({ focus: a, blur: k, reset: C, validate: B, setError: E }), (e, _) => (m(), d(M, {
       style: K(r(I)),
       block: e.block,
@@ -82,7 +82,7 @@ const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlengt
           ref: o,
           class: ["", [
             r(i).input,
-            r(n) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
+            r(l) ? "border-error-500 dark:border-error-400 focus:outline-error-500" : "focus:outline-[color:var(--x-textarea-border)]"
           ]],
           style: r(v),
           disabled: e.disabled,
@@ -95,14 +95,14 @@ const U = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlengt
           name: e.name,
           placeholder: e.placeholder,
           readonly: e.readonly,
-          value: e.modelValue ? String(e.modelValue) : ""
+          value: typeof e.modelValue < "u" ? String(e.modelValue) : ""
         }, L(r(z), !0), {
           onKeydown: $(S, ["enter"]),
           onInput: w
         }), null, 16, U),
         r(N) ? D("", !0) : (m(), d(Q, {
           key: 0,
-          error: r(n),
+          error: r(l),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),

package/lib/components/textarea/theme/Textarea.base.theme.js

@@ -3,7 +3,7 @@ const a = {
     wrapper: "",
     input: ({ props: s, data: r }) => {
       const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
-      return s.resizable || e.push("resize-none"), !r.errorInternal && !s.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), s.size === "xs" ? e.push("px-2 py-1 text-xs") : s.size === "sm" ? e.push("px-2 py-2 text-sm") : s.size === "lg" ? e.push("px-4 py-3 text-lg") : s.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(s.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
+      return s.resizable || e.push("resize-none"), !r.errorInternal && !s.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), s.size === "xs" ? e.push("px-2 py-1 text-xs") : s.size === "sm" ? e.push("px-2 py-1.5 text-sm") : s.size === "lg" ? e.push("px-4 py-3 text-lg") : s.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(s.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
     }
   }
 }, t = a;

package/lib/components/toggle/Toggle.vue.d.ts

@@ -2,7 +2,10 @@ import { type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const toggleProps: {
     glow: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -43,7 +46,10 @@ export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses
 }
 declare const _default: import("vue").DefineComponent<{
     glow: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -85,7 +91,10 @@ declare const _default: import("vue").DefineComponent<{
     setError: (val: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     glow: BooleanConstructor;
-    modelValue: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: import("vue").PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -128,6 +137,7 @@ declare const _default: import("vue").DefineComponent<{
     size: import("../../composables/useCommon").Size;
     loading: boolean;
     loadingStatus: import("../loader/Loader.vue").LoaderStatus;
+    modelValue: string | number | boolean | object | any[] | undefined;
     readonly: boolean;
     required: boolean;
     validateOnInput: boolean;