cisse-vue-ui 0.7.0 → 0.7.1

package/dist/{TagsInput-C4wBPfrj.js → TagsInput-CFAC_MSw.js}

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, mergeModels, useModel, withDirectives, createBlock, createCommentVNode, unref, createElementVNode, mergeProps, vModelDynamic, computed, ref, watch, normalizeClass, createVNode, Teleport, Transition, withCtx, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys, vShow, useSlots, createSlots, onMounted, TransitionGroup } from "vue";
+import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, useSlots, computed, normalizeClass, createCommentVNode, createBlock, unref, mergeModels, useModel, withCtx, withDirectives, createElementVNode, mergeProps, vModelDynamic, ref, watch, createVNode, Teleport, Transition, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys, vShow, createSlots, onMounted, TransitionGroup } from "vue";
 import { u as useId } from "./useId-xeHj7rkg.js";
 import { Icon } from "@iconify/vue";
 import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
@@ -50,12 +50,80 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$p = {
   key: 0,
-  class: "relative"
+  class: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
+};
+const _hoisted_2$h = {
+  key: 1,
+  class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
 };
-const _hoisted_2$j = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
-const _hoisted_3$g = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
-const baseInputClass = "block w-full rounded-xl border border-gray-200 bg-gray-50 text-sm text-gray-900 placeholder-gray-400 transition-all focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600 dark:disabled:bg-slate-800 dark:disabled:text-gray-500";
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "InputWrapper",
+  props: {
+    icon: {},
+    iconRight: {},
+    size: { default: "md" },
+    invalid: { type: Boolean },
+    disabled: { type: Boolean },
+    wrapperClass: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const slots = useSlots();
+    const hasLeftIcon = computed(() => props.icon || slots.icon);
+    const hasRightContent = computed(() => props.iconRight || slots.actions);
+    const inputClass = computed(() => [
+      // Base styles
+      "block w-full rounded-xl border text-sm transition-all",
+      "border-gray-200 bg-gray-50 text-gray-900 placeholder-gray-400",
+      "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden",
+      "disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
+      // Dark mode
+      "dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500",
+      "dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600",
+      "dark:disabled:bg-slate-800 dark:disabled:text-gray-500",
+      // Padding based on icons/actions
+      hasLeftIcon.value ? "pl-10" : "pl-4",
+      hasRightContent.value ? "pr-10" : "pr-4",
+      // Size
+      props.size === "sm" && "py-2 text-xs",
+      props.size === "md" && "py-3 text-sm",
+      props.size === "lg" && "py-4 text-base",
+      // Invalid state
+      props.invalid && "border-red-500 focus:border-red-500 focus:ring-red-500 dark:border-red-500"
+    ]);
+    __expose({ inputClass });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["relative", __props.wrapperClass])
+      }, [
+        hasLeftIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            __props.icon ? (openBlock(), createBlock(unref(Icon), {
+              key: 0,
+              icon: __props.icon,
+              class: "size-5"
+            }, null, 8, ["icon"])) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
+        hasRightContent.value ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
+          renderSlot(_ctx.$slots, "actions", {}, () => [
+            __props.iconRight ? (openBlock(), createBlock(unref(Icon), {
+              key: 0,
+              icon: __props.iconRight,
+              class: "size-5 text-gray-400 pointer-events-none"
+            }, null, 8, ["icon"])) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$o = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FormInput",
   props: /* @__PURE__ */ mergeModels({
     type: { default: "text" },
@@ -78,58 +146,36 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const props = __props;
     const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return props.icon || props.iconRight ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
-        props.icon ? (openBlock(), createBlock(unref(Icon), {
-          key: 0,
-          icon: props.icon,
-          class: "absolute left-3 top-1/2 -translate-y-1/2 size-5 text-gray-400 pointer-events-none"
-        }, null, 8, ["icon"])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("input", mergeProps({
-          id: props.id ?? props.name ?? "",
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
-          disabled: props.disabled,
-          name: props.name ?? "",
-          placeholder: props.placeholder,
-          type: props.type,
-          required: props.required,
-          "aria-invalid": props.invalid || void 0,
-          "aria-required": props.required || void 0,
-          "aria-describedby": props.describedBy || void 0,
-          class: [
-            baseInputClass,
-            "py-3",
-            props.icon ? "pl-10" : "pl-4",
-            props.iconRight ? "pr-10" : "pr-4"
-          ]
-        }, _ctx.$attrs), null, 16, _hoisted_2$j), [
-          [vModelDynamic, modelValue.value]
-        ]),
-        props.iconRight ? (openBlock(), createBlock(unref(Icon), {
-          key: 1,
-          icon: props.iconRight,
-          class: "absolute right-3 top-1/2 -translate-y-1/2 size-5 text-gray-400 pointer-events-none"
-        }, null, 8, ["icon"])) : createCommentVNode("", true)
-      ])) : withDirectives((openBlock(), createElementBlock("input", mergeProps({
-        key: 1,
-        id: props.id ?? props.name ?? "",
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+      return openBlock(), createBlock(_sfc_main$p, {
+        icon: props.icon,
+        "icon-right": props.iconRight,
         disabled: props.disabled,
-        name: props.name ?? "",
-        placeholder: props.placeholder,
-        type: props.type,
-        required: props.required,
-        "aria-invalid": props.invalid || void 0,
-        "aria-required": props.required || void 0,
-        "aria-describedby": props.describedBy || void 0,
-        class: [baseInputClass, "px-4 py-3"]
-      }, _ctx.$attrs), null, 16, _hoisted_3$g)), [
-        [vModelDynamic, modelValue.value]
-      ]);
+        invalid: props.invalid
+      }, {
+        default: withCtx(({ inputClass }) => [
+          withDirectives(createElementVNode("input", mergeProps({
+            id: props.id ?? props.name ?? "",
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            disabled: props.disabled,
+            name: props.name ?? "",
+            placeholder: props.placeholder,
+            type: props.type,
+            required: props.required,
+            "aria-invalid": props.invalid || void 0,
+            "aria-required": props.required || void 0,
+            "aria-describedby": props.describedBy || void 0,
+            class: inputClass
+          }, _ctx.$attrs), null, 16, _hoisted_1$o), [
+            [vModelDynamic, modelValue.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["icon", "icon-right", "disabled", "invalid"]);
     };
   }
 });
-const _hoisted_1$o = { class: "relative" };
-const _hoisted_2$i = ["id", "disabled", "aria-expanded", "aria-controls", "aria-invalid", "aria-describedby"];
+const _hoisted_1$n = { class: "relative" };
+const _hoisted_2$g = ["id", "disabled", "aria-expanded", "aria-controls", "aria-invalid", "aria-describedby"];
 const _hoisted_3$f = { class: "flex-1 truncate" };
 const _hoisted_4$b = ["id", "aria-label"];
 const _hoisted_5$8 = {
@@ -150,7 +196,7 @@ const _hoisted_10$4 = {
   "aria-hidden": "true"
 };
 const _hoisted_11$4 = { class: "flex-1" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "FormSelect",
   props: /* @__PURE__ */ mergeModels({
     options: {},
@@ -270,7 +316,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       return [base, state, text, props.triggerClass];
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -297,7 +343,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", unref(isOpen) && "rotate-180"]),
             "aria-hidden": "true"
           }, null, 8, ["class"])
-        ], 42, _hoisted_2$i),
+        ], 42, _hoisted_2$g),
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -388,8 +434,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = ["hidden"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["hidden"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "FormGroup",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -442,7 +488,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             }, 8, ["html-for", "error"])) : createCommentVNode("", true)
           ]),
           renderSlot(_ctx.$slots, "input", {}, () => [
-            isSelect.value ? (openBlock(), createBlock(_sfc_main$o, mergeProps({
+            isSelect.value ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
@@ -450,7 +496,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
               id: inputId.value,
               invalid: Boolean(__props.error),
               "described-by": hasError.value ? helpId.value : void 0
-            }), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (openBlock(), createBlock(_sfc_main$p, mergeProps({
+            }), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (openBlock(), createBlock(_sfc_main$o, mergeProps({
               key: 1,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
@@ -471,53 +517,61 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["id"])) : createCommentVNode("", true)
         ])
-      ], 12, _hoisted_1$n);
+      ], 12, _hoisted_1$m);
     };
   }
 });
-const _hoisted_1$m = { class: "relative" };
-const _hoisted_2$h = ["disabled", "placeholder", "value"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = ["name", "placeholder", "disabled"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "SearchInput",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Search..." },
     icon: { default: "lucide:search" },
-    disabled: { type: Boolean, default: false }
-  },
+    disabled: { type: Boolean },
+    size: { default: "md" },
+    name: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const handleInput = (event) => {
-      const target = event.target;
-      emit("update:modelValue", target.value);
-    };
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
-        createVNode(unref(Icon), {
-          icon: __props.icon,
-          class: "absolute top-1/2 left-3 size-5 -translate-y-1/2 text-gray-400"
-        }, null, 8, ["icon"]),
-        createElementVNode("input", {
-          disabled: __props.disabled,
-          placeholder: __props.placeholder,
-          value: __props.modelValue,
-          class: "focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500",
-          type: "text",
-          onInput: handleInput
-        }, null, 40, _hoisted_2$h)
-      ]);
+      return openBlock(), createBlock(_sfc_main$p, {
+        icon: props.icon,
+        size: props.size,
+        disabled: props.disabled
+      }, {
+        default: withCtx(({ inputClass }) => [
+          withDirectives(createElementVNode("input", mergeProps({
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            type: "text",
+            name: props.name,
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            class: inputClass
+          }, _ctx.$attrs), null, 16, _hoisted_1$l), [
+            [vModelText, modelValue.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["icon", "size", "disabled"]);
     };
   }
 });
-const _hoisted_1$l = ["id", "aria-checked", "aria-labelledby", "aria-describedby", "disabled"];
-const _hoisted_2$g = {
+const _hoisted_1$k = ["id", "aria-checked", "aria-labelledby", "aria-describedby", "disabled"];
+const _hoisted_2$f = {
   key: 0,
   class: "flex flex-col"
 };
 const _hoisted_3$e = ["id"];
 const _hoisted_4$a = ["id"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -581,8 +635,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ]),
             "aria-hidden": "true"
           }, null, 2)
-        ], 10, _hoisted_1$l),
-        __props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
+        ], 10, _hoisted_1$k),
+        __props.label || __props.description ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
           __props.label ? (openBlock(), createElementBlock("span", {
             key: 0,
             id: labelId.value,
@@ -598,8 +652,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = { class: "w-full" };
-const _hoisted_2$f = {
+const _hoisted_1$j = { class: "w-full" };
+const _hoisted_2$e = {
   key: 0,
   class: "mb-2 flex justify-between text-sm"
 };
@@ -609,7 +663,7 @@ const _hoisted_5$7 = { class: "text-gray-600 dark:text-gray-400" };
 const _hoisted_6$7 = { class: "relative" };
 const _hoisted_7$6 = ["value", "min", "max", "step", "disabled"];
 const _hoisted_8$5 = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "Slider",
   props: /* @__PURE__ */ mergeModels({
     min: { default: 0 },
@@ -640,8 +694,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       modelValue.value = Number(target.value);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        __props.showValue ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+        __props.showValue ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
           createElementVNode("span", _hoisted_3$d, toDisplayString(__props.min), 1),
           createElementVNode("span", _hoisted_4$9, toDisplayString(displayValue.value), 1),
           createElementVNode("span", _hoisted_5$7, toDisplayString(__props.max), 1)
@@ -668,9 +722,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Slider = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-c25e2c2a"]]);
-const _hoisted_1$j = { class: "relative" };
-const _hoisted_2$e = ["id", "disabled", "aria-expanded", "aria-controls"];
+const Slider = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-c25e2c2a"]]);
+const _hoisted_1$i = { class: "relative" };
+const _hoisted_2$d = ["id", "disabled", "aria-expanded", "aria-controls"];
 const _hoisted_3$c = { class: "flex-1 truncate" };
 const _hoisted_4$8 = { class: "flex items-center gap-1" };
 const _hoisted_5$6 = ["id", "aria-label"];
@@ -688,7 +742,7 @@ const _hoisted_9$3 = ["abbr"];
 const _hoisted_10$3 = ["id", "aria-label"];
 const _hoisted_11$3 = ["aria-label", "aria-selected", "aria-disabled", "disabled", "onClick"];
 const _hoisted_12$2 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Select date" },
@@ -812,7 +866,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return formatter.format(date);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -851,7 +905,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               "aria-hidden": "true"
             })
           ])
-        ], 10, _hoisted_2$e),
+        ], 10, _hoisted_2$d),
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -956,8 +1010,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = { class: "space-y-4" };
-const _hoisted_2$d = ["accept", "multiple", "disabled"];
+const _hoisted_1$h = { class: "space-y-4" };
+const _hoisted_2$c = ["accept", "multiple", "disabled"];
 const _hoisted_3$b = { class: "space-y-2" };
 const _hoisted_4$7 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300" };
 const _hoisted_5$5 = {
@@ -976,7 +1030,7 @@ const _hoisted_8$3 = { class: "flex-1 min-w-0" };
 const _hoisted_9$2 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate" };
 const _hoisted_10$2 = { class: "text-xs text-gray-500 dark:text-gray-400" };
 const _hoisted_11$2 = ["onClick"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
   props: {
     accept: {},
@@ -1104,7 +1158,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return "heroicons:document";
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createElementVNode("div", {
           class: normalizeClass(dropzoneClasses.value),
           onDrop: withModifiers(handleDrop, ["prevent"]),
@@ -1121,7 +1175,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             multiple: __props.multiple,
             disabled: __props.disabled,
             onChange: handleInputChange
-          }, null, 40, _hoisted_2$d),
+          }, null, 40, _hoisted_2$c),
           createElementVNode("div", _hoisted_3$b, [
             createVNode(unref(Icon), {
               icon: "heroicons:cloud-arrow-up",
@@ -1163,13 +1217,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "flex items-center gap-1" };
-const _hoisted_2$c = ["disabled", "onClick", "onMousemove"];
+const _hoisted_1$g = { class: "flex items-center gap-1" };
+const _hoisted_2$b = ["disabled", "onClick", "onMousemove"];
 const _hoisted_3$a = {
   key: 0,
   class: "ml-2 text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "Rating",
   props: {
     modelValue: { default: 0 },
@@ -1232,7 +1286,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       hoverValue.value = null;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", {
           class: "flex items-center",
           onMouseleave: handleMouseLeave
@@ -1264,7 +1318,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   class: normalizeClass([sizeClasses.value, __props.color])
                 }, null, 8, ["icon", "class"])
               ], 4)
-            ], 42, _hoisted_2$c);
+            ], 42, _hoisted_2$b);
           }), 128))
         ], 32),
         __props.showValue ? (openBlock(), createElementBlock("span", _hoisted_3$a, toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : createCommentVNode("", true)
@@ -1272,8 +1326,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "relative inline-block" };
-const _hoisted_2$b = {
+const _hoisted_1$f = { class: "relative inline-block" };
+const _hoisted_2$a = {
   key: 0,
   class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
 };
@@ -1286,7 +1340,7 @@ const _hoisted_7$3 = {
   class: "flex items-center gap-2 pt-3 border-t border-gray-200 dark:border-gray-700"
 };
 const _hoisted_8$2 = ["value"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#3b82f6" },
@@ -1355,8 +1409,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       isOpen.value = false;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        __props.label ? (openBlock(), createElementBlock("label", _hoisted_2$b, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        __props.label ? (openBlock(), createElementBlock("label", _hoisted_2$a, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
         createElementVNode("button", {
           type: "button",
           class: normalizeClass(["flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors", { "opacity-50 cursor-not-allowed": __props.disabled }]),
@@ -1446,8 +1500,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = { class: "space-y-2" };
-const _hoisted_2$a = {
+const _hoisted_1$e = { class: "space-y-2" };
+const _hoisted_2$9 = {
   key: 0,
   class: "flex justify-between text-sm font-medium text-gray-700 dark:text-gray-300"
 };
@@ -1455,7 +1509,7 @@ const _hoisted_3$8 = {
   key: 1,
   class: "flex justify-between text-xs text-gray-500 dark:text-gray-400"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "RangeSlider",
   props: {
     modelValue: { default: () => [25, 75] },
@@ -1533,8 +1587,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        __props.showLabels ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        __props.showLabels ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
           createElementVNode("span", null, toDisplayString(__props.formatLabel(minValue.value)), 1),
           createElementVNode("span", null, toDisplayString(__props.formatLabel(maxValue.value)), 1)
         ])) : createCommentVNode("", true),
@@ -1575,8 +1629,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = ["aria-expanded", "aria-controls"];
-const _hoisted_2$9 = ["id", "name", "placeholder", "disabled", "aria-controls"];
+const _hoisted_1$d = ["aria-expanded", "aria-controls"];
+const _hoisted_2$8 = ["id", "name", "placeholder", "disabled", "aria-controls"];
 const _hoisted_3$7 = { class: "flex items-center gap-1" };
 const _hoisted_4$5 = ["id", "aria-label", "aria-multiselectable"];
 const _hoisted_5$3 = ["aria-selected", "aria-disabled", "disabled", "onClick"];
@@ -1586,7 +1640,7 @@ const _hoisted_7$2 = {
   class: "px-3 py-2 text-center text-sm text-gray-500 dark:text-gray-400",
   role: "status"
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "Combobox",
   props: {
     modelValue: {},
@@ -1717,7 +1771,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             class: "flex-1 border-none bg-transparent text-sm text-gray-900 outline-hidden placeholder:text-gray-400 dark:text-gray-100 dark:placeholder:text-gray-500",
             onClick: _cache[1] || (_cache[1] = withModifiers(() => {
             }, ["stop"]))
-          }, null, 8, _hoisted_2$9)), [
+          }, null, 8, _hoisted_2$8)), [
             [vModelText, search.value]
           ]),
           createElementVNode("div", _hoisted_3$7, [
@@ -1743,7 +1797,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               "aria-hidden": "true"
             }, null, 8, ["class"])
           ])
-        ], 10, _hoisted_1$e),
+        ], 10, _hoisted_1$d),
         (openBlock(), createBlock(Teleport, {
           to: teleportTarget.value,
           disabled: teleportDisabled.value
@@ -1811,8 +1865,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "relative" };
-const _hoisted_2$8 = {
+const _hoisted_1$c = { class: "relative" };
+const _hoisted_2$7 = {
   key: 0,
   class: "text-red-500 ml-0.5"
 };
@@ -1845,7 +1899,7 @@ const _hoisted_13 = {
 const _hoisted_14 = ["title", "onClick"];
 const _hoisted_15 = { class: "mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-700" };
 const _hoisted_16 = { class: "text-xs text-gray-500" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "IconPicker",
   props: /* @__PURE__ */ mergeModels({
     label: {},
@@ -1969,7 +2023,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       searchQuery.value = "";
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         __props.label ? (openBlock(), createBlock(_sfc_main$r, {
           key: 0,
           "html-for": inputId.value,
@@ -1977,7 +2031,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(__props.label) + " ", 1),
-            __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$8, "*")) : createCommentVNode("", true)
+            __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$7, "*")) : createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["html-for", "error"])) : createCommentVNode("", true),
@@ -2104,8 +2158,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "flex items-center justify-between" };
-const _hoisted_2$7 = { class: "flex items-center gap-3" };
+const _hoisted_1$b = { class: "flex items-center justify-between" };
+const _hoisted_2$6 = { class: "flex items-center gap-3" };
 const _hoisted_3$5 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
 const _hoisted_4$3 = {
   key: 0,
@@ -2116,7 +2170,7 @@ const _hoisted_6$1 = {
   key: 0,
   class: "px-5 py-4 bg-gray-50 dark:bg-slate-800/50 border-t border-gray-100 dark:border-slate-700"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "FormSection",
   props: /* @__PURE__ */ mergeModels({
     title: {},
@@ -2150,8 +2204,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           ]),
           onClick: _cache[0] || (_cache[0] = ($event) => __props.collapsible && toggleCollapse())
         }, [
-          createElementVNode("div", _hoisted_1$c, [
-            createElementVNode("div", _hoisted_2$7, [
+          createElementVNode("div", _hoisted_1$b, [
+            createElementVNode("div", _hoisted_2$6, [
               __props.icon ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 class: normalizeClass([
@@ -2219,8 +2273,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$b = { key: 1 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { key: 1 };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "FormActions",
   props: {
     submitLabel: { default: "Enregistrer" },
@@ -2287,7 +2341,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 class: "w-5 h-5"
               }, null, 8, ["icon"])) : createCommentVNode("", true),
               createTextVNode(" " + toDisplayString(__props.submitLabel), 1)
-            ], 64)) : (openBlock(), createElementBlock("span", _hoisted_1$b, toDisplayString(__props.loadingLabel || __props.submitLabel + "..."), 1))
+            ], 64)) : (openBlock(), createElementBlock("span", _hoisted_1$a, toDisplayString(__props.loadingLabel || __props.submitLabel + "..."), 1))
           ]),
           _: 1
         }, 8, ["variant", "disabled", "loading", "class"]),
@@ -2296,79 +2350,11 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = {
-  key: 0,
-  class: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400"
-};
-const _hoisted_2$6 = {
-  key: 1,
-  class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
-};
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "InputWrapper",
-  props: {
-    icon: {},
-    iconRight: {},
-    size: { default: "md" },
-    invalid: { type: Boolean },
-    disabled: { type: Boolean },
-    wrapperClass: {}
-  },
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const slots = useSlots();
-    const hasLeftIcon = computed(() => props.icon || slots.icon);
-    const hasRightContent = computed(() => props.iconRight || slots.actions);
-    const inputClass = computed(() => [
-      // Base styles
-      "block w-full rounded-xl border text-sm transition-all",
-      "border-gray-200 bg-gray-50 text-gray-900 placeholder-gray-400",
-      "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden",
-      "disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
-      // Dark mode
-      "dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500",
-      "dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600",
-      "dark:disabled:bg-slate-800 dark:disabled:text-gray-500",
-      // Padding based on icons/actions
-      hasLeftIcon.value ? "pl-10" : "pl-4",
-      hasRightContent.value ? "pr-10" : "pr-4",
-      // Size
-      props.size === "sm" && "py-2 text-xs",
-      props.size === "md" && "py-3 text-sm",
-      props.size === "lg" && "py-4 text-base",
-      // Invalid state
-      props.invalid && "border-red-500 focus:border-red-500 focus:ring-red-500 dark:border-red-500"
-    ]);
-    __expose({ inputClass });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["relative", __props.wrapperClass])
-      }, [
-        hasLeftIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
-          renderSlot(_ctx.$slots, "icon", {}, () => [
-            __props.icon ? (openBlock(), createBlock(unref(Icon), {
-              key: 0,
-              icon: __props.icon,
-              class: "size-5"
-            }, null, 8, ["icon"])) : createCommentVNode("", true)
-          ])
-        ])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
-        hasRightContent.value ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
-          renderSlot(_ctx.$slots, "actions", {}, () => [
-            __props.iconRight ? (openBlock(), createBlock(unref(Icon), {
-              key: 0,
-              icon: __props.iconRight,
-              class: "size-5 text-gray-400 pointer-events-none"
-            }, null, 8, ["icon"])) : createCommentVNode("", true)
-          ])
-        ])) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
 const _hoisted_1$9 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "EmailInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Enter email address..." },
@@ -2400,14 +2386,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       isTouched.value = true;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$p, {
         icon: "lucide:mail",
         size: __props.size,
         disabled: __props.disabled,
         invalid: showStatus.value && isValid.value === false
       }, {
         default: withCtx(({ inputClass }) => [
-          withDirectives(createElementVNode("input", {
+          withDirectives(createElementVNode("input", mergeProps({
             id: __props.id ?? __props.name,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "email",
@@ -2418,9 +2404,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             "aria-invalid": showStatus.value && isValid.value === false || void 0,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: normalizeClass(inputClass),
-            onBlur: handleBlur
-          }, null, 42, _hoisted_1$9), [
+            class: inputClass
+          }, _ctx.$attrs, { onBlur: handleBlur }), null, 16, _hoisted_1$9), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -2448,6 +2433,9 @@ const _hoisted_3$4 = {
 };
 const _hoisted_4$2 = { class: "h-1.5 w-full rounded-full bg-gray-200 dark:bg-slate-700 overflow-hidden" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "PasswordInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Enter password..." },
@@ -2498,13 +2486,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b;
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$a, {
+        createVNode(_sfc_main$p, {
           icon: "lucide:lock",
           size: __props.size,
           disabled: __props.disabled
         }, {
           default: withCtx(({ inputClass }) => [
-            withDirectives(createElementVNode("input", {
+            withDirectives(createElementVNode("input", mergeProps({
               id: __props.id ?? __props.name,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
               type: showPassword.value ? "text" : "password",
@@ -2514,9 +2502,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               required: __props.required,
               "aria-required": __props.required || void 0,
               "aria-describedby": __props.describedBy,
-              class: normalizeClass(inputClass),
-              autocomplete: "new-password"
-            }, null, 10, _hoisted_1$8), [
+              class: inputClass
+            }, _ctx.$attrs, { autocomplete: "new-password" }), null, 16, _hoisted_1$8), [
               [vModelDynamic, modelValue.value]
             ])
           ]),
@@ -2579,29 +2566,52 @@ const _hoisted_12 = {
   class: "px-3 py-4 text-center text-sm text-gray-500"
 };
 const defaultCountries = [
-  { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷" },
-  { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸" },
-  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧" },
-  { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪" },
-  { code: "ES", name: "Spain", dialCode: "+34", flag: "🇪🇸" },
-  { code: "IT", name: "Italy", dialCode: "+39", flag: "🇮🇹" },
-  { code: "BE", name: "Belgium", dialCode: "+32", flag: "🇧🇪" },
-  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "🇨🇭" },
-  { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦" },
-  { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺" },
-  { code: "ML", name: "Mali", dialCode: "+223", flag: "🇲🇱" },
-  { code: "SN", name: "Senegal", dialCode: "+221", flag: "🇸🇳" },
-  { code: "CI", name: "Côte d'Ivoire", dialCode: "+225", flag: "🇨🇮" },
-  { code: "MA", name: "Morocco", dialCode: "+212", flag: "🇲🇦" },
-  { code: "TN", name: "Tunisia", dialCode: "+216", flag: "🇹🇳" },
-  { code: "DZ", name: "Algeria", dialCode: "+213", flag: "🇩🇿" }
+  { code: "FR", name: "France", dialCode: "+33", flag: "🇫🇷", format: "# ## ## ## ##" },
+  { code: "US", name: "United States", dialCode: "+1", flag: "🇺🇸", format: "(###) ###-####" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "🇬🇧", format: "#### ######" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "🇩🇪", format: "### #######" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "🇪🇸", format: "### ### ###" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "🇮🇹", format: "### ### ####" },
+  { code: "BE", name: "Belgium", dialCode: "+32", flag: "🇧🇪", format: "### ## ## ##" },
+  { code: "CH", name: "Switzerland", dialCode: "+41", flag: "🇨🇭", format: "## ### ## ##" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "🇨🇦", format: "(###) ###-####" },
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "🇦🇺", format: "### ### ###" },
+  { code: "ML", name: "Mali", dialCode: "+223", flag: "🇲🇱", format: "## ## ## ##" },
+  { code: "SN", name: "Senegal", dialCode: "+221", flag: "🇸🇳", format: "## ### ## ##" },
+  { code: "CI", name: "Côte d'Ivoire", dialCode: "+225", flag: "🇨🇮", format: "## ## ## ## ##" },
+  { code: "MA", name: "Morocco", dialCode: "+212", flag: "🇲🇦", format: "## ## ## ## ##" },
+  { code: "TN", name: "Tunisia", dialCode: "+216", flag: "🇹🇳", format: "## ### ###" },
+  { code: "DZ", name: "Algeria", dialCode: "+213", flag: "🇩🇿", format: "### ## ## ##" }
 ];
+function formatPhoneWithPattern(value, pattern) {
+  if (!pattern) return value;
+  const digits = value.replace(/\D/g, "");
+  let result = "";
+  let digitIndex = 0;
+  for (const char of pattern) {
+    if (digitIndex >= digits.length) break;
+    if (char === "#") {
+      result += digits[digitIndex];
+      digitIndex++;
+    } else {
+      result += char;
+    }
+  }
+  return result;
+}
+function getPhoneDigits(value) {
+  return value.replace(/\D/g, "");
+}
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "PhoneInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Phone number" },
     size: { default: "md" },
     disabled: { type: Boolean },
+    showDialCode: { type: Boolean, default: false },
     name: {},
     id: {},
     required: { type: Boolean },
@@ -2633,19 +2643,50 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       if (!modelValue.value) return "";
       return `${selectedCountry.value.dialCode}${modelValue.value}`;
     });
+    const displayValue = computed(() => {
+      const formatted = formatPhoneWithPattern(modelValue.value, selectedCountry.value.format);
+      if (props.showDialCode && modelValue.value) {
+        return `${selectedCountry.value.dialCode} ${formatted}`;
+      }
+      return formatted;
+    });
     function selectCountry(country) {
       selectedCountry.value = country;
       showDropdown.value = false;
       searchQuery.value = "";
     }
-    function formatPhoneNumber(value) {
-      const cleaned = value.replace(/\D/g, "");
-      return cleaned;
+    function parsePhoneWithDialCode(value) {
+      const cleaned = value.replace(/\s/g, "");
+      if (cleaned.startsWith("+") || cleaned.startsWith("00")) {
+        const withPlus = cleaned.startsWith("00") ? "+" + cleaned.slice(2) : cleaned;
+        for (const country of props.countries) {
+          if (withPlus.startsWith(country.dialCode)) {
+            const digits = withPlus.slice(country.dialCode.length).replace(/\D/g, "");
+            return { digits, country };
+          }
+        }
+      }
+      return { digits: getPhoneDigits(value) };
     }
     function handleInput(event) {
       const target = event.target;
-      const formatted = formatPhoneNumber(target.value);
-      modelValue.value = formatted;
+      const inputValue = target.value;
+      const { digits, country } = parsePhoneWithDialCode(inputValue);
+      if (country) {
+        selectedCountry.value = country;
+      }
+      modelValue.value = digits;
+    }
+    function handlePaste(event) {
+      var _a;
+      const pastedData = (_a = event.clipboardData) == null ? void 0 : _a.getData("text");
+      if (!pastedData) return;
+      const { digits, country } = parsePhoneWithDialCode(pastedData);
+      if (country) {
+        event.preventDefault();
+        selectedCountry.value = country;
+        modelValue.value = digits;
+      }
     }
     function handleClickOutside(event) {
       if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
@@ -2667,7 +2708,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ref_key: "dropdownRef",
         ref: dropdownRef
       }, [
-        createVNode(_sfc_main$a, {
+        createVNode(_sfc_main$p, {
           size: __props.size,
           disabled: __props.disabled
         }, {
@@ -2689,9 +2730,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ], 8, _hoisted_1$7)
           ]),
           default: withCtx(({ inputClass }) => [
-            createElementVNode("input", {
+            createElementVNode("input", mergeProps({
               id: __props.id ?? __props.name,
-              value: modelValue.value,
+              value: displayValue.value,
               type: "tel",
               name: __props.name,
               placeholder: __props.placeholder,
@@ -2699,9 +2740,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               required: __props.required,
               "aria-required": __props.required || void 0,
               "aria-describedby": __props.describedBy,
-              class: normalizeClass([inputClass, "pl-20"]),
-              onInput: handleInput
-            }, null, 42, _hoisted_3$3)
+              class: [inputClass, "pl-20"]
+            }, _ctx.$attrs, {
+              onInput: handleInput,
+              onPaste: handlePaste
+            }), null, 16, _hoisted_3$3)
           ]),
           actions: withCtx(() => [
             createElementVNode("span", _hoisted_4$1, toDisplayString(selectedCountry.value.dialCode), 1)
@@ -2754,6 +2797,9 @@ const _hoisted_1$6 = ["disabled"];
 const _hoisted_2$3 = ["id", "value", "name", "placeholder", "disabled", "required", "min", "max", "step", "aria-required", "aria-describedby"];
 const _hoisted_3$2 = ["disabled"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "NumberInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "0" },
@@ -2812,12 +2858,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$p, {
         size: __props.size,
         disabled: __props.disabled
       }, createSlots({
         default: withCtx(({ inputClass }) => [
-          createElementVNode("input", {
+          createElementVNode("input", mergeProps({
             id: __props.id ?? __props.name,
             value: modelValue.value,
             type: "number",
@@ -2830,9 +2876,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             step: __props.step,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: normalizeClass([inputClass, "text-center", __props.showStepper && "pl-12 pr-12"]),
-            onInput: handleInput
-          }, null, 42, _hoisted_2$3)
+            class: [inputClass, "text-center", __props.showStepper && "pl-12 pr-12"]
+          }, _ctx.$attrs, { onInput: handleInput }), null, 16, _hoisted_2$3)
         ]),
         _: 2
       }, [
@@ -2878,6 +2923,9 @@ const _hoisted_1$5 = { class: "text-sm font-medium text-gray-500 dark:text-gray-
 const _hoisted_2$2 = ["id", "value", "name", "placeholder", "disabled", "required", "aria-required", "aria-describedby"];
 const _hoisted_3$1 = { class: "text-sm font-medium text-gray-500 dark:text-gray-400" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "MoneyInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "0.00" },
@@ -2948,12 +2996,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$p, {
         size: __props.size,
         disabled: __props.disabled
       }, createSlots({
         default: withCtx(({ inputClass }) => [
-          createElementVNode("input", {
+          createElementVNode("input", mergeProps({
             id: __props.id ?? __props.name,
             value: displayValue.value,
             type: "text",
@@ -2964,10 +3012,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             required: __props.required,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: normalizeClass([inputClass, "text-right"]),
+            class: [inputClass, "text-right"]
+          }, _ctx.$attrs, {
             onInput: handleInput,
             onBlur: handleBlur
-          }, null, 42, _hoisted_2$2)
+          }), null, 16, _hoisted_2$2)
         ]),
         _: 2
       }, [
@@ -2991,6 +3040,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$4 = ["id", "value", "name", "placeholder", "disabled", "required", "min", "max", "step", "aria-required", "aria-describedby"];
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "PercentInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "0" },
@@ -3032,12 +3084,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       displayValue.value = target.value;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$p, {
         size: __props.size,
         disabled: __props.disabled
       }, {
         default: withCtx(({ inputClass }) => [
-          createElementVNode("input", {
+          createElementVNode("input", mergeProps({
             id: __props.id ?? __props.name,
             value: displayValue.value,
             type: "number",
@@ -3051,9 +3103,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             step: __props.decimals > 0 ? Math.pow(10, -__props.decimals) : 1,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: normalizeClass([inputClass, "text-right pr-10"]),
-            onInput: handleInput
-          }, null, 42, _hoisted_1$4)
+            class: [inputClass, "text-right pr-10"]
+          }, _ctx.$attrs, { onInput: handleInput }), null, 16, _hoisted_1$4)
         ]),
         actions: withCtx(() => [..._cache[0] || (_cache[0] = [
           createElementVNode("span", { class: "text-sm font-medium text-gray-500 dark:text-gray-400" }, "%", -1)
@@ -3068,6 +3119,9 @@ const _hoisted_2$1 = ["disabled"];
 const _hoisted_3 = ["id", "value", "name", "disabled", "required", "min", "max"];
 const _hoisted_4 = ["disabled"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "QuantityInput",
   props: /* @__PURE__ */ mergeModels({
     size: { default: "md" },
@@ -3152,7 +3206,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["text-gray-600 dark:text-gray-300", sizeClasses.value.icon])
           }, null, 8, ["class"])
         ], 10, _hoisted_2$1),
-        createElementVNode("input", {
+        createElementVNode("input", mergeProps({
           id: __props.id ?? __props.name,
           value: modelValue.value,
           type: "number",
@@ -3161,15 +3215,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           required: __props.required,
           min: __props.min,
           max: __props.max,
-          class: normalizeClass([
+          class: [
             "bg-transparent text-center font-semibold text-gray-900 dark:text-white",
             "focus:outline-none appearance-none",
             "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
             "disabled:opacity-50",
             sizeClasses.value.input
-          ]),
-          onInput: handleInput
-        }, null, 42, _hoisted_3),
+          ]
+        }, _ctx.$attrs, { onInput: handleInput }), null, 16, _hoisted_3),
         createElementVNode("button", {
           type: "button",
           disabled: !canIncrement.value,
@@ -3193,6 +3246,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$2 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "URLInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "https://example.com" },
@@ -3230,14 +3286,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$p, {
         icon: "lucide:link",
         size: __props.size,
         disabled: __props.disabled,
         invalid: showStatus.value && isValid.value === false
       }, {
         default: withCtx(({ inputClass }) => [
-          withDirectives(createElementVNode("input", {
+          withDirectives(createElementVNode("input", mergeProps({
             id: __props.id ?? __props.name,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "url",
@@ -3248,9 +3304,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             "aria-invalid": showStatus.value && isValid.value === false || void 0,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: normalizeClass(inputClass),
-            onBlur: handleBlur
-          }, null, 42, _hoisted_1$2), [
+            class: inputClass
+          }, _ctx.$attrs, { onBlur: handleBlur }), null, 16, _hoisted_1$2), [
             [vModelText, modelValue.value]
           ])
         ]),
@@ -3279,6 +3334,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1 = ["value", "type", "name", "disabled", "onInput", "onKeydown"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "OTPInput",
   props: /* @__PURE__ */ mergeModels({
     length: { default: 6 },
@@ -3429,6 +3487,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = ["id", "name", "placeholder", "disabled", "required"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "TagsInput",
   props: /* @__PURE__ */ mergeModels({
     placeholder: { default: "Add tag..." },
@@ -3549,7 +3610,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        canAddMore.value ? withDirectives((openBlock(), createElementBlock("input", {
+        canAddMore.value ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
           key: 0,
           id: __props.id ?? __props.name,
           ref_key: "inputRef",
@@ -3560,41 +3621,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           placeholder: modelValue.value.length === 0 ? __props.placeholder : "",
           disabled: __props.disabled,
           required: __props.required && modelValue.value.length === 0,
-          class: normalizeClass([
+          class: [
             "flex-1 min-w-20 bg-transparent border-none focus:outline-none",
             "text-gray-900 dark:text-white placeholder-gray-400",
             sizeClasses.value.input
-          ]),
+          ]
+        }, _ctx.$attrs, {
           onKeydown: handleKeydown,
           onBlur: handleBlur
-        }, null, 42, _hoisted_2)), [
+        }), null, 16, _hoisted_2)), [
           [vModelText, inputValue.value]
         ]) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7949bfa4"]]);
+const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fcace07c"]]);
 export {
   Slider as S,
   TagsInput as T,
   _sfc_main$r as _,
   _sfc_main$q as a,
-  _sfc_main$p as b,
-  _sfc_main$o as c,
-  _sfc_main$n as d,
-  _sfc_main$m as e,
-  _sfc_main$l as f,
-  _sfc_main$j as g,
-  _sfc_main$i as h,
-  _sfc_main$h as i,
-  _sfc_main$g as j,
-  _sfc_main$f as k,
-  _sfc_main$e as l,
-  _sfc_main$d as m,
-  _sfc_main$c as n,
-  _sfc_main$b as o,
-  _sfc_main$a as p,
+  _sfc_main$o as b,
+  _sfc_main$n as c,
+  _sfc_main$m as d,
+  _sfc_main$l as e,
+  _sfc_main$k as f,
+  _sfc_main$i as g,
+  _sfc_main$h as h,
+  _sfc_main$g as i,
+  _sfc_main$f as j,
+  _sfc_main$e as k,
+  _sfc_main$d as l,
+  _sfc_main$c as m,
+  _sfc_main$b as n,
+  _sfc_main$a as o,
+  _sfc_main$p as p,
   _sfc_main$9 as q,
   _sfc_main$8 as r,
   _sfc_main$7 as s,
@@ -3605,4 +3667,4 @@ export {
   _sfc_main$2 as x,
   _sfc_main$1 as y
 };
-//# sourceMappingURL=TagsInput-C4wBPfrj.js.map
+//# sourceMappingURL=TagsInput-CFAC_MSw.js.map