cisse-vue-ui 0.7.0 → 0.7.2

package/dist/{TagsInput-ClqgyR9O.cjs → TagsInput-BF3zRMcU.cjs}

@@ -51,12 +51,80 @@ const _sfc_main$q = /* @__PURE__ */ vue.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__ */ vue.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 = vue.useSlots();
+    const hasLeftIcon = vue.computed(() => props.icon || slots.icon);
+    const hasRightContent = vue.computed(() => props.iconRight || slots.actions);
+    const inputClass = vue.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 vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["relative", __props.wrapperClass])
+      }, [
+        hasLeftIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+            __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: __props.icon,
+              class: "size-5"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+          ])
+        ])) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
+        hasRightContent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
+          vue.renderSlot(_ctx.$slots, "actions", {}, () => [
+            __props.iconRight ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: __props.iconRight,
+              class: "size-5 text-gray-400 pointer-events-none"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
+          ])
+        ])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$o = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "FormInput",
   props: /* @__PURE__ */ vue.mergeModels({
     type: { default: "text" },
@@ -79,58 +147,36 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const modelValue = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return props.icon || props.iconRight ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-        props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.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"])) : vue.createCommentVNode("", true),
-        vue.withDirectives(vue.createElementVNode("input", vue.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), [
-          [vue.vModelDynamic, modelValue.value]
-        ]),
-        props.iconRight ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.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"])) : vue.createCommentVNode("", true)
-      ])) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
-        key: 1,
-        id: props.id ?? props.name ?? "",
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
+      return vue.openBlock(), vue.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)), [
-        [vue.vModelDynamic, modelValue.value]
-      ]);
+        invalid: props.invalid
+      }, {
+        default: vue.withCtx(({ inputClass }) => [
+          vue.withDirectives(vue.createElementVNode("input", vue.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), [
+            [vue.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 = {
@@ -151,7 +197,7 @@ const _hoisted_10$4 = {
   "aria-hidden": "true"
 };
 const _hoisted_11$4 = { class: "flex-1" };
-const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "FormSelect",
   props: /* @__PURE__ */ vue.mergeModels({
     options: {},
@@ -271,7 +317,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
       return [base, state, text, props.triggerClass];
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
         vue.createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -298,7 +344,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["size-4 shrink-0 text-gray-400 transition-transform", vue.unref(isOpen) && "rotate-180"]),
             "aria-hidden": "true"
           }, null, 8, ["class"])
-        ], 42, _hoisted_2$i),
+        ], 42, _hoisted_2$g),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -389,8 +435,8 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$n = ["hidden"];
-const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$m = ["hidden"];
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "FormGroup",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -443,7 +489,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["html-for", "error"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "input", {}, () => [
-            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, vue.mergeProps({
+            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$n, vue.mergeProps({
               key: 0,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
@@ -451,7 +497,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
               id: inputId.value,
               invalid: Boolean(__props.error),
               "described-by": hasError.value ? helpId.value : void 0
-            }), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
+            }), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (vue.openBlock(), vue.createBlock(_sfc_main$o, vue.mergeProps({
               key: 1,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
@@ -472,53 +518,61 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
             _: 1
           }, 8, ["id"])) : vue.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__ */ vue.defineComponent({
+const _hoisted_1$l = ["name", "placeholder", "disabled"];
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "SearchInput",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ vue.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 = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
-        vue.createVNode(vue.unref(vue$1.Icon), {
-          icon: __props.icon,
-          class: "absolute top-1/2 left-3 size-5 -translate-y-1/2 text-gray-400"
-        }, null, 8, ["icon"]),
-        vue.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 vue.openBlock(), vue.createBlock(_sfc_main$p, {
+        icon: props.icon,
+        size: props.size,
+        disabled: props.disabled
+      }, {
+        default: vue.withCtx(({ inputClass }) => [
+          vue.withDirectives(vue.createElementVNode("input", vue.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), [
+            [vue.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__ */ vue.defineComponent({
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -582,8 +636,8 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
             ]),
             "aria-hidden": "true"
           }, null, 2)
-        ], 10, _hoisted_1$l),
-        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
+        ], 10, _hoisted_1$k),
+        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
           __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
             id: labelId.value,
@@ -599,8 +653,8 @@ const _sfc_main$l = /* @__PURE__ */ vue.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"
 };
@@ -610,7 +664,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__ */ vue.defineComponent({
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "Slider",
   props: /* @__PURE__ */ vue.mergeModels({
     min: { default: 0 },
@@ -641,8 +695,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
       modelValue.value = Number(target.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-        __props.showValue ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        __props.showValue ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
           vue.createElementVNode("span", _hoisted_3$d, vue.toDisplayString(__props.min), 1),
           vue.createElementVNode("span", _hoisted_4$9, vue.toDisplayString(displayValue.value), 1),
           vue.createElementVNode("span", _hoisted_5$7, vue.toDisplayString(__props.max), 1)
@@ -669,9 +723,9 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Slider = /* @__PURE__ */ _pluginVue_exportHelper._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__ */ _pluginVue_exportHelper._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"];
@@ -689,7 +743,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__ */ vue.defineComponent({
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePicker",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Select date" },
@@ -813,7 +867,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       return formatter.format(date);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
         vue.createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -852,7 +906,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": "true"
             })
           ])
-        ], 10, _hoisted_2$e),
+        ], 10, _hoisted_2$d),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -957,8 +1011,8 @@ const _sfc_main$j = /* @__PURE__ */ vue.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 = {
@@ -977,7 +1031,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__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
   props: {
     accept: {},
@@ -1105,7 +1159,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       return "heroicons:document";
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass(dropzoneClasses.value),
           onDrop: vue.withModifiers(handleDrop, ["prevent"]),
@@ -1122,7 +1176,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
             multiple: __props.multiple,
             disabled: __props.disabled,
             onChange: handleInputChange
-          }, null, 40, _hoisted_2$d),
+          }, null, 40, _hoisted_2$c),
           vue.createElementVNode("div", _hoisted_3$b, [
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "heroicons:cloud-arrow-up",
@@ -1164,13 +1218,13 @@ const _sfc_main$i = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "Rating",
   props: {
     modelValue: { default: 0 },
@@ -1233,7 +1287,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       hoverValue.value = null;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
         vue.createElementVNode("div", {
           class: "flex items-center",
           onMouseleave: handleMouseLeave
@@ -1265,7 +1319,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                   class: vue.normalizeClass([sizeClasses.value, __props.color])
                 }, null, 8, ["icon", "class"])
               ], 4)
-            ], 42, _hoisted_2$c);
+            ], 42, _hoisted_2$b);
           }), 128))
         ], 32),
         __props.showValue ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$a, vue.toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : vue.createCommentVNode("", true)
@@ -1273,8 +1327,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.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"
 };
@@ -1287,7 +1341,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__ */ vue.defineComponent({
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#3b82f6" },
@@ -1356,8 +1410,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
       isOpen.value = false;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
-        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$b, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$a, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("button", {
           type: "button",
           class: vue.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 }]),
@@ -1447,8 +1501,8 @@ const _sfc_main$g = /* @__PURE__ */ vue.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"
 };
@@ -1456,7 +1510,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__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeSlider",
   props: {
     modelValue: { default: () => [25, 75] },
@@ -1534,8 +1588,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-        __props.showLabels ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        __props.showLabels ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(minValue.value)), 1),
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(maxValue.value)), 1)
         ])) : vue.createCommentVNode("", true),
@@ -1576,8 +1630,8 @@ const _sfc_main$f = /* @__PURE__ */ vue.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"];
@@ -1587,7 +1641,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__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "Combobox",
   props: {
     modelValue: {},
@@ -1718,7 +1772,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.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] = vue.withModifiers(() => {
             }, ["stop"]))
-          }, null, 8, _hoisted_2$9)), [
+          }, null, 8, _hoisted_2$8)), [
             [vue.vModelText, search.value]
           ]),
           vue.createElementVNode("div", _hoisted_3$7, [
@@ -1744,7 +1798,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": "true"
             }, null, 8, ["class"])
           ])
-        ], 10, _hoisted_1$e),
+        ], 10, _hoisted_1$d),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: teleportTarget.value,
           disabled: teleportDisabled.value
@@ -1812,8 +1866,8 @@ const _sfc_main$e = /* @__PURE__ */ vue.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"
 };
@@ -1846,7 +1900,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__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "IconPicker",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -1970,7 +2024,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
       searchQuery.value = "";
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
         __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
           key: 0,
           "html-for": inputId.value,
@@ -1978,7 +2032,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(__props.label) + " ", 1),
-            __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$8, "*")) : vue.createCommentVNode("", true)
+            __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$7, "*")) : vue.createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["html-for", "error"])) : vue.createCommentVNode("", true),
@@ -2105,8 +2159,8 @@ const _sfc_main$d = /* @__PURE__ */ vue.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,
@@ -2117,7 +2171,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__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "FormSection",
   props: /* @__PURE__ */ vue.mergeModels({
     title: {},
@@ -2151,8 +2205,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
           ]),
           onClick: _cache[0] || (_cache[0] = ($event) => __props.collapsible && toggleCollapse())
         }, [
-          vue.createElementVNode("div", _hoisted_1$c, [
-            vue.createElementVNode("div", _hoisted_2$7, [
+          vue.createElementVNode("div", _hoisted_1$b, [
+            vue.createElementVNode("div", _hoisted_2$6, [
               __props.icon ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: vue.normalizeClass([
@@ -2220,8 +2274,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$b = { key: 1 };
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$a = { key: 1 };
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "FormActions",
   props: {
     submitLabel: { default: "Enregistrer" },
@@ -2288,7 +2342,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                 class: "w-5 h-5"
               }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
               vue.createTextVNode(" " + vue.toDisplayString(__props.submitLabel), 1)
-            ], 64)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$b, vue.toDisplayString(__props.loadingLabel || __props.submitLabel + "..."), 1))
+            ], 64)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, vue.toDisplayString(__props.loadingLabel || __props.submitLabel + "..."), 1))
           ]),
           _: 1
         }, 8, ["variant", "disabled", "loading", "class"]),
@@ -2297,79 +2351,11 @@ const _sfc_main$b = /* @__PURE__ */ vue.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__ */ vue.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 = vue.useSlots();
-    const hasLeftIcon = vue.computed(() => props.icon || slots.icon);
-    const hasRightContent = vue.computed(() => props.iconRight || slots.actions);
-    const inputClass = vue.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 vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["relative", __props.wrapperClass])
-      }, [
-        hasLeftIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-            __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
-              key: 0,
-              icon: __props.icon,
-              class: "size-5"
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-          ])
-        ])) : vue.createCommentVNode("", true),
-        vue.renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
-        hasRightContent.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
-          vue.renderSlot(_ctx.$slots, "actions", {}, () => [
-            __props.iconRight ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
-              key: 0,
-              icon: __props.iconRight,
-              class: "size-5 text-gray-400 pointer-events-none"
-            }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
-          ])
-        ])) : vue.createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
 const _hoisted_1$9 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "EmailInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Enter email address..." },
@@ -2401,14 +2387,14 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       isTouched.value = true;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$p, {
         icon: "lucide:mail",
         size: __props.size,
         disabled: __props.disabled,
         invalid: showStatus.value && isValid.value === false
       }, {
         default: vue.withCtx(({ inputClass }) => [
-          vue.withDirectives(vue.createElementVNode("input", {
+          vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             id: __props.id ?? __props.name,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "email",
@@ -2419,9 +2405,8 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
             "aria-invalid": showStatus.value && isValid.value === false || void 0,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: vue.normalizeClass(inputClass),
-            onBlur: handleBlur
-          }, null, 42, _hoisted_1$9), [
+            class: inputClass
+          }, _ctx.$attrs, { onBlur: handleBlur }), null, 16, _hoisted_1$9), [
             [vue.vModelText, modelValue.value]
           ])
         ]),
@@ -2449,6 +2434,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__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "PasswordInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Enter password..." },
@@ -2499,13 +2487,13 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       var _a, _b;
       return vue.openBlock(), vue.createElementBlock("div", null, [
-        vue.createVNode(_sfc_main$a, {
+        vue.createVNode(_sfc_main$p, {
           icon: "lucide:lock",
           size: __props.size,
           disabled: __props.disabled
         }, {
           default: vue.withCtx(({ inputClass }) => [
-            vue.withDirectives(vue.createElementVNode("input", {
+            vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
               id: __props.id ?? __props.name,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
               type: showPassword.value ? "text" : "password",
@@ -2515,9 +2503,8 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
               required: __props.required,
               "aria-required": __props.required || void 0,
               "aria-describedby": __props.describedBy,
-              class: vue.normalizeClass(inputClass),
-              autocomplete: "new-password"
-            }, null, 10, _hoisted_1$8), [
+              class: inputClass
+            }, _ctx.$attrs, { autocomplete: "new-password" }), null, 16, _hoisted_1$8), [
               [vue.vModelDynamic, modelValue.value]
             ])
           ]),
@@ -2580,29 +2567,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__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "PhoneInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Phone number" },
     size: { default: "md" },
     disabled: { type: Boolean },
+    showDialCode: { type: Boolean, default: false },
     name: {},
     id: {},
     required: { type: Boolean },
@@ -2623,6 +2633,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const showDropdown = vue.ref(false);
     const searchQuery = vue.ref("");
     const dropdownRef = vue.ref(null);
+    const rawDialCodeInput = vue.ref("");
     const filteredCountries = vue.computed(() => {
       if (!searchQuery.value) return props.countries;
       const query = searchQuery.value.toLowerCase();
@@ -2634,19 +2645,62 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       if (!modelValue.value) return "";
       return `${selectedCountry.value.dialCode}${modelValue.value}`;
     });
+    const displayValue = vue.computed(() => {
+      if (rawDialCodeInput.value) {
+        return rawDialCodeInput.value;
+      }
+      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;
+      if (inputValue.startsWith("+") || inputValue.startsWith("00")) {
+        const { digits, country } = parsePhoneWithDialCode(inputValue);
+        if (country) {
+          selectedCountry.value = country;
+          modelValue.value = digits;
+          rawDialCodeInput.value = "";
+        } else {
+          rawDialCodeInput.value = inputValue;
+          modelValue.value = "";
+        }
+      } else {
+        rawDialCodeInput.value = "";
+        modelValue.value = getPhoneDigits(inputValue);
+      }
+    }
+    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)) {
@@ -2668,7 +2722,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         ref_key: "dropdownRef",
         ref: dropdownRef
       }, [
-        vue.createVNode(_sfc_main$a, {
+        vue.createVNode(_sfc_main$p, {
           size: __props.size,
           disabled: __props.disabled
         }, {
@@ -2690,9 +2744,9 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
             ], 8, _hoisted_1$7)
           ]),
           default: vue.withCtx(({ inputClass }) => [
-            vue.createElementVNode("input", {
+            vue.createElementVNode("input", vue.mergeProps({
               id: __props.id ?? __props.name,
-              value: modelValue.value,
+              value: displayValue.value,
               type: "tel",
               name: __props.name,
               placeholder: __props.placeholder,
@@ -2700,9 +2754,11 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
               required: __props.required,
               "aria-required": __props.required || void 0,
               "aria-describedby": __props.describedBy,
-              class: vue.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: vue.withCtx(() => [
             vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString(selectedCountry.value.dialCode), 1)
@@ -2755,6 +2811,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__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "NumberInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "0" },
@@ -2813,12 +2872,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$p, {
         size: __props.size,
         disabled: __props.disabled
       }, vue.createSlots({
         default: vue.withCtx(({ inputClass }) => [
-          vue.createElementVNode("input", {
+          vue.createElementVNode("input", vue.mergeProps({
             id: __props.id ?? __props.name,
             value: modelValue.value,
             type: "number",
@@ -2831,9 +2890,8 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
             step: __props.step,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: vue.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
       }, [
@@ -2879,6 +2937,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__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "MoneyInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "0.00" },
@@ -2949,12 +3010,12 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$p, {
         size: __props.size,
         disabled: __props.disabled
       }, vue.createSlots({
         default: vue.withCtx(({ inputClass }) => [
-          vue.createElementVNode("input", {
+          vue.createElementVNode("input", vue.mergeProps({
             id: __props.id ?? __props.name,
             value: displayValue.value,
             type: "text",
@@ -2965,10 +3026,11 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             required: __props.required,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: vue.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
       }, [
@@ -2992,6 +3054,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$4 = ["id", "value", "name", "placeholder", "disabled", "required", "min", "max", "step", "aria-required", "aria-describedby"];
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "PercentInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "0" },
@@ -3033,12 +3098,12 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       displayValue.value = target.value;
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$p, {
         size: __props.size,
         disabled: __props.disabled
       }, {
         default: vue.withCtx(({ inputClass }) => [
-          vue.createElementVNode("input", {
+          vue.createElementVNode("input", vue.mergeProps({
             id: __props.id ?? __props.name,
             value: displayValue.value,
             type: "number",
@@ -3052,9 +3117,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
             step: __props.decimals > 0 ? Math.pow(10, -__props.decimals) : 1,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: vue.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: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
           vue.createElementVNode("span", { class: "text-sm font-medium text-gray-500 dark:text-gray-400" }, "%", -1)
@@ -3069,6 +3133,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__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "QuantityInput",
   props: /* @__PURE__ */ vue.mergeModels({
     size: { default: "md" },
@@ -3153,7 +3220,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["text-gray-600 dark:text-gray-300", sizeClasses.value.icon])
           }, null, 8, ["class"])
         ], 10, _hoisted_2$1),
-        vue.createElementVNode("input", {
+        vue.createElementVNode("input", vue.mergeProps({
           id: __props.id ?? __props.name,
           value: modelValue.value,
           type: "number",
@@ -3162,15 +3229,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           required: __props.required,
           min: __props.min,
           max: __props.max,
-          class: vue.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),
         vue.createElementVNode("button", {
           type: "button",
           disabled: !canIncrement.value,
@@ -3194,6 +3260,9 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$2 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "URLInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "https://example.com" },
@@ -3231,14 +3300,14 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$p, {
         icon: "lucide:link",
         size: __props.size,
         disabled: __props.disabled,
         invalid: showStatus.value && isValid.value === false
       }, {
         default: vue.withCtx(({ inputClass }) => [
-          vue.withDirectives(vue.createElementVNode("input", {
+          vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             id: __props.id ?? __props.name,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
             type: "url",
@@ -3249,9 +3318,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
             "aria-invalid": showStatus.value && isValid.value === false || void 0,
             "aria-required": __props.required || void 0,
             "aria-describedby": __props.describedBy,
-            class: vue.normalizeClass(inputClass),
-            onBlur: handleBlur
-          }, null, 42, _hoisted_1$2), [
+            class: inputClass
+          }, _ctx.$attrs, { onBlur: handleBlur }), null, 16, _hoisted_1$2), [
             [vue.vModelText, modelValue.value]
           ])
         ]),
@@ -3280,6 +3348,9 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$1 = ["value", "type", "name", "disabled", "onInput", "onKeydown"];
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "OTPInput",
   props: /* @__PURE__ */ vue.mergeModels({
     length: { default: 6 },
@@ -3430,6 +3501,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = ["id", "name", "placeholder", "disabled", "required"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
   __name: "TagsInput",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Add tag..." },
@@ -3550,7 +3624,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }),
-        canAddMore.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+        canAddMore.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
           key: 0,
           id: __props.id ?? __props.name,
           ref_key: "inputRef",
@@ -3561,47 +3635,48 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           placeholder: modelValue.value.length === 0 ? __props.placeholder : "",
           disabled: __props.disabled,
           required: __props.required && modelValue.value.length === 0,
-          class: vue.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)), [
           [vue.vModelText, inputValue.value]
         ]) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const TagsInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7949bfa4"]]);
+const TagsInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-fcace07c"]]);
 exports.Slider = Slider;
 exports.TagsInput = TagsInput;
 exports._sfc_main = _sfc_main$r;
 exports._sfc_main$1 = _sfc_main$q;
-exports._sfc_main$10 = _sfc_main$g;
-exports._sfc_main$11 = _sfc_main$f;
-exports._sfc_main$12 = _sfc_main$e;
-exports._sfc_main$13 = _sfc_main$d;
-exports._sfc_main$14 = _sfc_main$c;
-exports._sfc_main$15 = _sfc_main$b;
-exports._sfc_main$16 = _sfc_main$a;
+exports._sfc_main$10 = _sfc_main$f;
+exports._sfc_main$11 = _sfc_main$e;
+exports._sfc_main$12 = _sfc_main$d;
+exports._sfc_main$13 = _sfc_main$c;
+exports._sfc_main$14 = _sfc_main$b;
+exports._sfc_main$15 = _sfc_main$a;
+exports._sfc_main$16 = _sfc_main$p;
 exports._sfc_main$17 = _sfc_main$9;
 exports._sfc_main$18 = _sfc_main$8;
 exports._sfc_main$19 = _sfc_main$7;
-exports._sfc_main$2 = _sfc_main$p;
+exports._sfc_main$2 = _sfc_main$o;
 exports._sfc_main$20 = _sfc_main$6;
 exports._sfc_main$21 = _sfc_main$5;
 exports._sfc_main$22 = _sfc_main$4;
 exports._sfc_main$23 = _sfc_main$3;
 exports._sfc_main$24 = _sfc_main$2;
 exports._sfc_main$25 = _sfc_main$1;
-exports._sfc_main$3 = _sfc_main$o;
-exports._sfc_main$4 = _sfc_main$n;
-exports._sfc_main$5 = _sfc_main$m;
-exports._sfc_main$6 = _sfc_main$l;
-exports._sfc_main$7 = _sfc_main$j;
-exports._sfc_main$8 = _sfc_main$i;
-exports._sfc_main$9 = _sfc_main$h;
-//# sourceMappingURL=TagsInput-ClqgyR9O.cjs.map
+exports._sfc_main$3 = _sfc_main$n;
+exports._sfc_main$4 = _sfc_main$m;
+exports._sfc_main$5 = _sfc_main$l;
+exports._sfc_main$6 = _sfc_main$k;
+exports._sfc_main$7 = _sfc_main$i;
+exports._sfc_main$8 = _sfc_main$h;
+exports._sfc_main$9 = _sfc_main$g;
+//# sourceMappingURL=TagsInput-BF3zRMcU.cjs.map