@indielayer/ui 1.6.0 → 1.6.2

package/lib/components/formGroup/FormGroup.vue.d.ts

@@ -5,7 +5,10 @@ declare const formGroupProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    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;
@@ -51,7 +54,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    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;
@@ -87,7 +93,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    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;
@@ -118,6 +127,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: 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/input/Input.vue.d.ts

@@ -22,7 +22,10 @@ declare const inputProps: {
         default: string;
     };
     block: BooleanConstructor;
-    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -86,7 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     block: BooleanConstructor;
-    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -148,7 +154,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     block: BooleanConstructor;
-    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -192,6 +201,7 @@ declare const _default: __VLS_WithTemplateSlots<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/input/Input.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as F, ref as y, watch as H, openBlock as t, createBlock as l, normalizeStyle as X, unref as r, normalizeClass as a, withCtx as j, createElementVNode as h, renderSlot as b, createCommentVNode as u, mergeProps as A, toHandlers as D } from "vue";
+import { defineComponent as F, ref as y, watch as H, openBlock as l, createBlock as t, normalizeStyle as X, unref as r, normalizeClass as a, withCtx as j, createElementVNode as h, renderSlot as b, createCommentVNode as u, mergeProps as A, toHandlers as D } from "vue";
 import { useTheme as G } from "../../composables/useTheme.js";
 import { useColors as J } from "../../composables/useColors.js";
 import { useCommon as v } from "../../composables/useCommon.js";
@@ -60,21 +60,21 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
     function C() {
       n.value = n.value === "password" ? "text" : "password";
     }
-    const { focus: g, blur: $ } = S(c), {
+    const { focus: g, blur: R } = S(c), {
       errorInternal: m,
-      hideFooterInternal: R,
-      isInsideForm: L,
-      inputListeners: P,
-      reset: V,
+      hideFooterInternal: V,
+      isInsideForm: $,
+      inputListeners: L,
+      reset: P,
       validate: B,
       setError: T
     } = f(o, { focus: g, emit: N }), { styles: q, classes: s, className: E } = G("Input", {}, o, { errorInternal: m });
-    return w({ focus: g, blur: $, reset: V, validate: B, setError: T }), (e, i) => (t(), l(O, {
+    return w({ focus: g, blur: R, reset: P, validate: B, setError: T }), (e, i) => (l(), t(O, {
       style: X(r(q)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
-      "is-inside-form": r(L),
+      "is-inside-form": r($),
       label: e.label,
       class: a([
         r(E),
@@ -85,10 +85,10 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
       default: j(() => [
         h("div", U, [
           b(e.$slots, "prefix", {}, () => [
-            e.iconLeft ? (t(), l(d, {
+            e.iconLeft || e.icon ? (l(), t(d, {
               key: 0,
               size: e.size,
-              icon: e.iconLeft,
+              icon: e.iconLeft || e.icon,
               class: a(["ml-2 left-1", r(s).icon])
             }, null, 8, ["size", "icon", "class"])) : u("", !0)
           ]),
@@ -116,15 +116,15 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
             placeholder: e.placeholder,
             readonly: e.readonly,
             type: n.value,
-            value: e.modelValue || ""
-          }, e.$attrs, D(r(P), !0), { onChange: I }), null, 16, W),
+            value: typeof e.modelValue < "u" ? e.modelValue : ""
+          }, D(r(L), !0), { onChange: I }), null, 16, W),
           b(e.$slots, "suffix", {}, () => [
-            e.iconRight ? (t(), l(d, {
+            e.iconRight ? (l(), t(d, {
               key: 0,
               size: e.size,
               icon: e.iconRight,
               class: a(["mr-2 right-1", r(s).icon])
-            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (t(), l(d, {
+            }, null, 8, ["size", "icon", "class"])) : e.type === "password" && e.showPasswordToggle ? (l(), t(d, {
               key: 1,
               size: e.size,
               icon: n.value === "password" ? r(K) : r(M),
@@ -133,7 +133,7 @@ const U = { class: "relative" }, W = ["id", "disabled", "min", "max", "minlength
             }, null, 8, ["size", "icon", "class"])) : u("", !0)
           ])
         ]),
-        r(R) ? u("", !0) : (t(), l(Q, {
+        r(V) ? u("", !0) : (l(), t(Q, {
           key: 0,
           error: r(m),
           helper: e.helper

package/lib/components/input/theme/Input.base.theme.js

@@ -3,7 +3,7 @@ const o = {
     wrapper: "",
     input: ({ props: r, data: s }) => {
       const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
-      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-2 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.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.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-1.5 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.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;
     },
     icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
   },

package/lib/components/modal/Modal.vue.d.ts

@@ -2,14 +2,22 @@ import { type PropType, type ExtractPublicPropTypes } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 import { type FormError } from '../form/Form.vue';
 declare const modalSize: readonly ["xs", "sm", "md", "lg", "xl", "full"];
+declare const modalPosition: readonly ["top", "center", "bottom"];
 declare const modalProps: {
     size: {
         type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;
         default: string;
     };
+    position: {
+        type: PropType<"top" | "bottom" | "center">;
+        default: string;
+    };
     modelValue: BooleanConstructor;
     showClose: BooleanConstructor;
-    backdrop: BooleanConstructor;
+    backdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hasActions: {
         type: BooleanConstructor;
         default: boolean;
@@ -39,8 +47,9 @@ declare const modalProps: {
     persistent: BooleanConstructor;
 };
 export type ModalSize = typeof modalSize[number];
+export type ModalPosition = typeof modalPosition[number];
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>;
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label';
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'modalWrapper' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label';
 type InternaData = {
     visible: boolean;
 };
@@ -51,9 +60,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;
         default: string;
     };
+    position: {
+        type: PropType<"top" | "bottom" | "center">;
+        default: string;
+    };
     modelValue: BooleanConstructor;
     showClose: BooleanConstructor;
-    backdrop: BooleanConstructor;
+    backdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hasActions: {
         type: BooleanConstructor;
         default: boolean;
@@ -89,9 +105,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"xs" | "sm" | "md" | "lg" | "xl" | "full">;
         default: string;
     };
+    position: {
+        type: PropType<"top" | "bottom" | "center">;
+        default: string;
+    };
     modelValue: BooleanConstructor;
     showClose: BooleanConstructor;
-    backdrop: BooleanConstructor;
+    backdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     hasActions: {
         type: BooleanConstructor;
         default: boolean;
@@ -124,6 +147,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    position: "top" | "bottom" | "center";
     loading: boolean;
     modelValue: boolean;
     fluid: boolean;
@@ -139,7 +163,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}>, {
     image?(_: {}): any;
     header?(_: {}): any;
+    "header-content"?(_: {}): any;
     default?(_: {}): any;
+    footer?(_: {}): any;
     actions?(_: {}): any;
     "cancel-action"?(_: {}): any;
     "tertiary-action"?(_: {}): any;

package/lib/components/modal/Modal.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as H, ref as f, watch as g, nextTick as B, useSlots as I, computed as M, openBlock as t, createBlock as p, Teleport as P, createElementBlock as i, normalizeStyle as W, unref as o, normalizeClass as s, createCommentVNode as a, createElementVNode as S, resolveDynamicComponent as K, withCtx as w, renderSlot as r, toDisplayString as v } from "vue";
+import { defineComponent as X, ref as f, watch as g, nextTick as B, useSlots as H, computed as I, openBlock as t, createBlock as p, Teleport as M, createElementBlock as r, normalizeStyle as j, unref as o, normalizeClass as a, createCommentVNode as s, createElementVNode as S, resolveDynamicComponent as K, withCtx as w, renderSlot as i, toDisplayString as v } from "vue";
 import { onClickOutside as L, useEventListener as q } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
 import { useTheme as G } from "../../composables/useTheme.js";
 import { useFocusTrap as J } from "../../composables/useFocusTrap.js";
@@ -6,14 +6,21 @@ import { closeIcon as Q } from "../../common/icons.js";
 import U from "../button/Button.vue.js";
 import Y from "../scroll/Scroll.vue.js";
 import Z from "../form/Form.vue.js";
-const _ = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = {
+const _ = { key: 0 }, x = ["xs", "sm", "md", "lg", "xl", "full"], ee = ["top", "center", "bottom"], oe = {
   size: {
     type: String,
     default: "xl"
   },
+  position: {
+    type: String,
+    default: "center"
+  },
   modelValue: Boolean,
   showClose: Boolean,
-  backdrop: Boolean,
+  backdrop: {
+    type: Boolean,
+    default: !0
+  },
   hasActions: {
     type: Boolean,
     default: !0
@@ -45,14 +52,15 @@ const _ = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
 }, te = {
   name: "XModal",
   validators: {
-    size: ee
+    size: x,
+    position: ee
   }
-}, ce = /* @__PURE__ */ H({
+}, ce = /* @__PURE__ */ X({
   ...te,
   props: oe,
   emits: ["update:modelValue", "submit"],
-  setup(V, { expose: C, emit: T }) {
-    const n = V, b = T, u = f(n.modelValue), d = f(!1), y = f(null), $ = f(null), { initFocusTrap: D, clearFocusTrap: z } = J();
+  setup($, { expose: V, emit: C }) {
+    const n = $, b = C, u = f(n.modelValue), d = f(!1), y = f(null), T = f(null), { initFocusTrap: D, clearFocusTrap: z } = J();
     let c;
     g(u, (e) => {
       c && (c(), c = void 0), e && setTimeout(() => {
@@ -80,26 +88,28 @@ const _ = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
     function O() {
       b("update:modelValue", !0), d.value = !0;
     }
-    const k = I(), R = M(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: X } = G("Modal", {}, n, {
+    const k = H(), R = I(() => !!(k["tertiary-action"] || k["cancel-action"])), { styles: N, classes: l, className: P } = G("Modal", {}, n, {
       visible: d
     });
-    return C({ open: O, close: m }), (e, h) => (t(), p(P, { to: "body" }, [
-      u.value ? (t(), i("div", {
+    return V({ open: O, close: m }), (e, h) => (t(), p(M, { to: "body" }, [
+      u.value ? (t(), r("div", {
         key: 0,
         ref_key: "modalWrapperRef",
-        ref: $,
-        style: W(o(N)),
-        class: s([
-          o(X),
+        ref: T,
+        style: j(o(N)),
+        class: a([
+          o(P),
           o(l).wrapper,
           d.value ? "visible" : "invisible ease-in duration-100"
         ])
       }, [
-        e.backdrop ? (t(), i("div", {
+        e.backdrop ? (t(), r("div", {
           key: 0,
-          class: s(o(l).backdrop)
-        }, null, 2)) : a("", !0),
-        S("div", _, [
+          class: a(o(l).backdrop)
+        }, null, 2)) : s("", !0),
+        S("div", {
+          class: a(o(l).modalWrapper)
+        }, [
           (t(), p(K(e.isForm ? Z : "div"), {
             ref_key: "modalRef",
             ref: y,
@@ -108,75 +118,79 @@ const _ = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
             title: e.formTitle,
             description: e.formDescription,
             errors: e.formErrors,
-            class: s(o(l).modal),
+            class: a(o(l).modal),
             "auto-focus": "",
             "has-footer": !1,
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "modal-headline",
-            onSubmit: h[0] || (h[0] = (j) => e.$emit("submit", j))
+            onSubmit: h[0] || (h[0] = (W) => e.$emit("submit", W))
           }, {
             default: w(() => [
-              r(e.$slots, "image"),
-              e.hasHeader ? (t(), i("div", {
-                key: 0,
-                class: s(o(l).header)
-              }, [
-                r(e.$slots, "header", {}, () => [
-                  e.label ? (t(), i("div", {
-                    key: 0,
-                    class: s(o(l).label)
-                  }, v(e.label), 3)) : a("", !0),
-                  e.title ? (t(), i("div", {
-                    key: 1,
-                    class: s(o(l).title)
-                  }, v(e.title), 3)) : a("", !0)
-                ])
-              ], 2)) : a("", !0),
+              i(e.$slots, "image"),
+              i(e.$slots, "header", {}, () => [
+                e.hasHeader ? (t(), r("div", {
+                  key: 0,
+                  class: a(o(l).header)
+                }, [
+                  i(e.$slots, "header-content", {}, () => [
+                    e.label ? (t(), r("div", {
+                      key: 0,
+                      class: a(o(l).label)
+                    }, v(e.label), 3)) : s("", !0),
+                    e.title ? (t(), r("div", {
+                      key: 1,
+                      class: a(o(l).title)
+                    }, v(e.title), 3)) : s("", !0)
+                  ])
+                ], 2)) : s("", !0)
+              ]),
               e.$slots.default ? (t(), p(Y, {
-                key: 1,
+                key: 0,
                 scrollbar: !1,
                 vertical: ""
               }, {
                 default: w(() => [
                   S("div", {
-                    class: s(o(l).content)
+                    class: a(o(l).content)
                   }, [
-                    e.description ? (t(), i("div", {
+                    e.description ? (t(), r("div", {
                       key: 0,
-                      class: s(o(l).description)
-                    }, v(e.description), 3)) : a("", !0),
-                    r(e.$slots, "default")
+                      class: a(o(l).description)
+                    }, v(e.description), 3)) : s("", !0),
+                    i(e.$slots, "default")
                   ], 2)
                 ]),
                 _: 3
-              })) : a("", !0),
+              })) : s("", !0),
               e.showClose ? (t(), p(U, {
-                key: 2,
+                key: 1,
                 ghost: "",
                 size: "sm",
                 tabindex: "-1",
                 icon: o(Q),
-                class: s(o(l).closeIcon),
+                class: a(o(l).closeIcon),
                 onClick: m
-              }, null, 8, ["icon", "class"])) : a("", !0),
-              e.hasActions ? (t(), i("div", {
-                key: 3,
-                class: s(o(l).actions)
-              }, [
-                r(e.$slots, "actions", {}, () => [
-                  r(e.$slots, "cancel-action"),
-                  R.value ? (t(), i("div", x)) : a("", !0),
-                  r(e.$slots, "tertiary-action"),
-                  r(e.$slots, "secondary-action"),
-                  r(e.$slots, "primary-action")
-                ])
-              ], 2)) : a("", !0)
+              }, null, 8, ["icon", "class"])) : s("", !0),
+              i(e.$slots, "footer", {}, () => [
+                e.hasActions ? (t(), r("div", {
+                  key: 0,
+                  class: a(o(l).actions)
+                }, [
+                  i(e.$slots, "actions", {}, () => [
+                    i(e.$slots, "cancel-action"),
+                    R.value ? (t(), r("div", _)) : s("", !0),
+                    i(e.$slots, "tertiary-action"),
+                    i(e.$slots, "secondary-action"),
+                    i(e.$slots, "primary-action")
+                  ])
+                ], 2)) : s("", !0)
+              ])
             ]),
             _: 3
           }, 40, ["disabled", "auto-validate", "title", "description", "errors", "class"]))
-        ])
-      ], 6)) : a("", !0)
+        ], 2)
+      ], 6)) : s("", !0)
     ]));
   }
 });

package/lib/components/modal/theme/Modal.base.theme.js

@@ -2,22 +2,26 @@ const a = {
   classes: {
     wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
     backdrop: ({ data: e }) => {
-      const t = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
-      return e.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
+      const s = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
+      return e.visible ? s.push("ease-out duration-200 opacity-30 dark:opacity-70") : s.push("ease-in duration-100 opacity-0"), s;
     },
-    modal: ({ props: e, data: t }) => {
-      const s = ["relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
-      return t.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? s.push("sm:max-w-xs") : e.size === "sm" ? s.push("sm:max-w-sm") : e.size === "lg" ? s.push("sm:max-w-xl") : e.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
+    modalWrapper: ({ props: e }) => {
+      const s = ["flex justify-center p-4 sm:p-8 md:py-20 h-screen"];
+      return e.position === "top" ? s.push("items-start") : e.position === "bottom" ? s.push("items-end") : s.push("sm:items-end items-center"), s;
+    },
+    modal: ({ props: e, data: s }) => {
+      const t = ["relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return s.visible ? t.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : t.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? t.push("sm:max-w-xs") : e.size === "sm" ? t.push("sm:max-w-sm") : e.size === "lg" ? t.push("sm:max-w-xl") : e.size === "xl" ? t.push("sm:max-w-3xl") : t.push("sm:max-w-lg"), t;
     },
     closeIcon: "!absolute top-2 z-10 right-2",
     header: "text-lg pl-6 py-4 border-b pr-12",
     content: "px-6 py-4",
-    actions: ({ props: e, slots: t }) => ["flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end"],
+    actions: ({ props: e, slots: s }) => ["flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end"],
     label: "text-xs text-secondary-500 mb-1",
     title: "text-xl font-semibold",
     description: "text-sm mb-8"
   }
-}, l = a;
+}, i = a;
 export {
-  l as default
+  i as default
 };

package/lib/components/notifications/theme/Notifications.base.theme.js

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
+    wrapper: "fixed z-50 w-full sm:w-auto max-h-screen",
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
     item: "w-full flex items-center rounded-md px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border border-secondary-700 dark:border-secondary-100"
   }

package/lib/components/radio/Radio.vue.d.ts

@@ -3,7 +3,10 @@ import { type ThemeComponent } from '../../composables/useTheme';
 declare const radioProps: {
     value: (StringConstructor | NumberConstructor)[];
     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;
@@ -50,7 +53,10 @@ export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses,
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     value: (StringConstructor | NumberConstructor)[];
     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;
@@ -93,7 +99,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: (StringConstructor | NumberConstructor)[];
     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;
@@ -136,6 +145,7 @@ declare const _default: __VLS_WithTemplateSlots<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;

package/lib/components/select/Select.vue.d.ts

@@ -6,7 +6,10 @@ declare const selectProps: {
     multiple: BooleanConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
-    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -59,7 +62,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     multiple: BooleanConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
-    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -105,7 +111,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     multiple: BooleanConstructor;
     flat: BooleanConstructor;
     native: BooleanConstructor;
-    modelValue: PropType<string | number | boolean | object | any[] | undefined>;
+    modelValue: {
+        readonly type: PropType<string | number | boolean | object | any[] | undefined>;
+        readonly default: undefined;
+    };
     id: StringConstructor;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -148,6 +157,7 @@ declare const _default: __VLS_WithTemplateSlots<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;

package/lib/components/select/theme/Select.base.theme.js

@@ -3,7 +3,7 @@ const t = {
     wrapper: "",
     box: ({ props: e, data: s }) => {
       const r = ["w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-1.5 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed") : r.push("bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
     content: "p-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",