cisse-vue-ui 0.5.34 → 0.7.0

package/dist/{IconPicker.vue_vue_type_script_setup_true_lang-agY_E72J.cjs → TagsInput-ClqgyR9O.cjs}

@@ -5,8 +5,9 @@ const vue$1 = require("@iconify/vue");
 const useDropdown = require("./useDropdown-DHFnd259.cjs");
 const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-DM9IkUGy.cjs");
 const index = require("./index-D1x3TH9k.cjs");
-const _hoisted_1$e = ["data-error", "for"];
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue_vue_type_script_setup_true_lang-CXRj7LEP.cjs");
+const _hoisted_1$r = ["data-error", "for"];
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "FormLabel",
   props: {
     error: { type: [String, Boolean] },
@@ -20,12 +21,12 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
         class: "block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300"
       }, [
         vue.renderSlot(_ctx.$slots, "default")
-      ], 8, _hoisted_1$e);
+      ], 8, _hoisted_1$r);
     };
   }
 });
-const _hoisted_1$d = ["id", "data-error", "role", "aria-live"];
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$q = ["id", "data-error", "role", "aria-live"];
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "FormHelp",
   props: {
     id: {},
@@ -44,12 +45,18 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.createTextVNode(vue.toDisplayString(__props.text ?? ""), 1)
         ])
-      ], 8, _hoisted_1$d);
+      ], 8, _hoisted_1$q);
     };
   }
 });
-const _hoisted_1$c = ["id", "disabled", "name", "placeholder", "type", "required", "aria-invalid", "aria-required", "aria-describedby"];
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$p = {
+  key: 0,
+  class: "relative"
+};
+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: "FormInput",
   props: /* @__PURE__ */ vue.mergeModels({
     type: { default: "text" },
@@ -60,7 +67,9 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     id: {},
     name: {},
     required: { type: Boolean },
-    describedBy: {}
+    describedBy: {},
+    icon: {},
+    iconRight: {}
   }, {
     "modelValue": {},
     "modelModifiers": {}
@@ -70,9 +79,41 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const modelValue = vue.useModel(__props, "modelValue");
     return (_ctx, _cache) => {
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
+      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[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event),
         disabled: props.disabled,
         name: props.name ?? "",
         placeholder: props.placeholder,
@@ -81,36 +122,36 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         "aria-invalid": props.invalid || void 0,
         "aria-required": props.required || void 0,
         "aria-describedby": props.describedBy || void 0,
-        class: "mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm user-invalid:border-red-500 user-invalid:text-red-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-hidden focus:user-invalid:border-red-500 focus:user-invalid:ring-red-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500"
-      }, _ctx.$attrs), null, 16, _hoisted_1$c)), [
+        class: [baseInputClass, "px-4 py-3"]
+      }, _ctx.$attrs), null, 16, _hoisted_3$g)), [
         [vue.vModelDynamic, modelValue.value]
       ]);
     };
   }
 });
-const _hoisted_1$b = { class: "relative" };
-const _hoisted_2$a = ["id", "disabled", "aria-expanded", "aria-controls", "aria-invalid", "aria-describedby"];
-const _hoisted_3$9 = { class: "flex-1 truncate" };
-const _hoisted_4$7 = ["id", "aria-label"];
-const _hoisted_5$6 = {
+const _hoisted_1$o = { class: "relative" };
+const _hoisted_2$i = ["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 = {
   key: 0,
   class: "sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800"
 };
-const _hoisted_6$6 = { class: "flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900" };
-const _hoisted_7$6 = {
+const _hoisted_6$8 = { class: "flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900" };
+const _hoisted_7$7 = {
   key: 1,
   class: "px-4 py-3 text-sm text-gray-500 dark:text-gray-400",
   role: "status"
 };
-const _hoisted_8$5 = { class: "py-1" };
-const _hoisted_9$3 = ["aria-selected", "data-index", "onClick", "onMouseenter"];
-const _hoisted_10$3 = {
+const _hoisted_8$6 = { class: "py-1" };
+const _hoisted_9$4 = ["aria-selected", "data-index", "onClick", "onMouseenter"];
+const _hoisted_10$4 = {
   key: 1,
   class: "size-4 shrink-0",
   "aria-hidden": "true"
 };
-const _hoisted_11$3 = { class: "flex-1" };
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_11$4 = { class: "flex-1" };
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
   __name: "FormSelect",
   props: /* @__PURE__ */ vue.mergeModels({
     options: {},
@@ -123,6 +164,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     name: {},
     required: { type: Boolean },
     describedBy: {},
+    icon: {},
+    iconRight: {},
     teleport: { type: Boolean, default: true },
     searchable: { type: Boolean, default: false },
     noResultsText: { default: "No results found" },
@@ -228,7 +271,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       return [base, state, text, props.triggerClass];
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
         vue.createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -248,14 +291,14 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
             option: selectedOption.value,
             placeholder: __props.placeholder
           }, () => [
-            vue.createElementVNode("span", _hoisted_3$9, vue.toDisplayString(displayValue.value), 1)
+            vue.createElementVNode("span", _hoisted_3$f, vue.toDisplayString(displayValue.value), 1)
           ]),
           vue.createVNode(vue.unref(vue$1.Icon), {
             icon: "lucide:chevron-down",
             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$a),
+        ], 42, _hoisted_2$i),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -282,8 +325,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                   !__props.teleport && "absolute mt-1 w-full"
                 ])
               }, [
-                __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
-                  vue.createElementVNode("div", _hoisted_6$6, [
+                __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$8, [
+                  vue.createElementVNode("div", _hoisted_6$8, [
                     vue.createVNode(vue.unref(vue$1.Icon), {
                       icon: "lucide:search",
                       class: "size-4 text-gray-400",
@@ -303,8 +346,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ])
                 ])) : vue.createCommentVNode("", true),
-                filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$6, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true),
-                vue.createElementVNode("div", _hoisted_8$5, [
+                filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$7, vue.toDisplayString(__props.noResultsText), 1)) : vue.createCommentVNode("", true),
+                vue.createElementVNode("div", _hoisted_8$6, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option, index2) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: String(option.value),
@@ -331,13 +374,13 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                           icon: "lucide:check",
                           class: "size-4 shrink-0 text-primary",
                           "aria-hidden": "true"
-                        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$3)),
-                        vue.createElementVNode("span", _hoisted_11$3, vue.toDisplayString(option.label), 1)
+                        })) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_10$4)),
+                        vue.createElementVNode("span", _hoisted_11$4, vue.toDisplayString(option.label), 1)
                       ])
-                    ], 42, _hoisted_9$3);
+                    ], 42, _hoisted_9$4);
                   }), 128))
                 ])
-              ], 14, _hoisted_4$7)) : vue.createCommentVNode("", true)
+              ], 14, _hoisted_4$b)) : vue.createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -346,8 +389,8 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$a = ["hidden"];
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$n = ["hidden"];
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   __name: "FormGroup",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -364,6 +407,8 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     name: {},
     required: { type: Boolean },
     describedBy: {},
+    icon: {},
+    iconRight: {},
     options: {}
   }, {
     "modelValue": {},
@@ -386,7 +431,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
       }, [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.renderSlot(_ctx.$slots, "label", {}, () => [
-            __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
+            __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
               key: 0,
               "html-for": inputId.value,
               error: __props.error
@@ -398,7 +443,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["html-for", "error"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "input", {}, () => [
-            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$b, vue.mergeProps({
+            isSelect.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, vue.mergeProps({
               key: 0,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
@@ -406,7 +451,7 @@ const _sfc_main$a = /* @__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$c, vue.mergeProps({
+            }), null, 16, ["modelValue", "id", "invalid", "described-by"])) : (vue.openBlock(), vue.createBlock(_sfc_main$p, vue.mergeProps({
               key: 1,
               modelValue: modelValue.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
@@ -416,7 +461,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
               "described-by": hasError.value ? helpId.value : void 0
             }), null, 16, ["modelValue", "id", "invalid", "described-by"]))
           ]),
-          hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
+          hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 0,
             id: helpId.value,
             error: true
@@ -427,13 +472,13 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
             _: 1
           }, 8, ["id"])) : vue.createCommentVNode("", true)
         ])
-      ], 12, _hoisted_1$a);
+      ], 12, _hoisted_1$n);
     };
   }
 });
-const _hoisted_1$9 = { class: "relative" };
-const _hoisted_2$9 = ["disabled", "placeholder", "value"];
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$m = { class: "relative" };
+const _hoisted_2$h = ["disabled", "placeholder", "value"];
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchInput",
   props: {
     modelValue: {},
@@ -449,7 +494,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       emit("update:modelValue", target.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+      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"
@@ -461,19 +506,19 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
           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$9)
+        }, null, 40, _hoisted_2$h)
       ]);
     };
   }
 });
-const _hoisted_1$8 = ["id", "aria-checked", "aria-labelledby", "aria-describedby", "disabled"];
-const _hoisted_2$8 = {
+const _hoisted_1$l = ["id", "aria-checked", "aria-labelledby", "aria-describedby", "disabled"];
+const _hoisted_2$g = {
   key: 0,
   class: "flex flex-col"
 };
-const _hoisted_3$8 = ["id"];
-const _hoisted_4$6 = ["id"];
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$e = ["id"];
+const _hoisted_4$a = ["id"];
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: false },
@@ -537,35 +582,35 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             ]),
             "aria-hidden": "true"
           }, null, 2)
-        ], 10, _hoisted_1$8),
-        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$8, [
+        ], 10, _hoisted_1$l),
+        __props.label || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
           __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
             id: labelId.value,
             class: "text-sm font-medium text-gray-900 dark:text-white"
-          }, vue.toDisplayString(__props.label), 9, _hoisted_3$8)) : vue.createCommentVNode("", true),
+          }, vue.toDisplayString(__props.label), 9, _hoisted_3$e)) : vue.createCommentVNode("", true),
           __props.description ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 1,
             id: descriptionId.value,
             class: "text-sm text-gray-500 dark:text-gray-400"
-          }, vue.toDisplayString(__props.description), 9, _hoisted_4$6)) : vue.createCommentVNode("", true)
+          }, vue.toDisplayString(__props.description), 9, _hoisted_4$a)) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$7 = { class: "w-full" };
-const _hoisted_2$7 = {
+const _hoisted_1$k = { class: "w-full" };
+const _hoisted_2$f = {
   key: 0,
   class: "mb-2 flex justify-between text-sm"
 };
-const _hoisted_3$7 = { class: "text-gray-600 dark:text-gray-400" };
-const _hoisted_4$5 = { class: "font-medium text-gray-900 dark:text-white" };
-const _hoisted_5$5 = { class: "text-gray-600 dark:text-gray-400" };
-const _hoisted_6$5 = { class: "relative" };
-const _hoisted_7$5 = ["value", "min", "max", "step", "disabled"];
-const _hoisted_8$4 = { class: "pointer-events-none absolute inset-y-0 left-0 flex items-center" };
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_3$d = { class: "text-gray-600 dark:text-gray-400" };
+const _hoisted_4$9 = { class: "font-medium text-gray-900 dark:text-white" };
+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({
   __name: "Slider",
   props: /* @__PURE__ */ vue.mergeModels({
     min: { default: 0 },
@@ -596,13 +641,13 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       modelValue.value = Number(target.value);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-        __props.showValue ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
-          vue.createElementVNode("span", _hoisted_3$7, vue.toDisplayString(__props.min), 1),
-          vue.createElementVNode("span", _hoisted_4$5, vue.toDisplayString(displayValue.value), 1),
-          vue.createElementVNode("span", _hoisted_5$5, vue.toDisplayString(__props.max), 1)
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        __props.showValue ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
+          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)
         ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_6$5, [
+        vue.createElementVNode("div", _hoisted_6$7, [
           vue.createElementVNode("input", {
             type: "range",
             value: modelValue.value,
@@ -612,8 +657,8 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
             disabled: __props.disabled,
             class: "slider-input w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
             onInput: handleInput
-          }, null, 40, _hoisted_7$5),
-          vue.createElementVNode("div", _hoisted_8$4, [
+          }, null, 40, _hoisted_7$6),
+          vue.createElementVNode("div", _hoisted_8$5, [
             vue.createElementVNode("div", {
               class: "h-2 rounded-full bg-primary",
               style: vue.normalizeStyle({ width: `${percentage.value}%` })
@@ -624,27 +669,27 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Slider = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$7, [["__scopeId", "data-v-c25e2c2a"]]);
-const _hoisted_1$6 = { class: "relative" };
-const _hoisted_2$6 = ["id", "disabled", "aria-expanded", "aria-controls"];
-const _hoisted_3$6 = { class: "flex-1 truncate" };
-const _hoisted_4$4 = { class: "flex items-center gap-1" };
-const _hoisted_5$4 = ["id", "aria-label"];
-const _hoisted_6$4 = { class: "mb-4 flex items-center justify-between" };
-const _hoisted_7$4 = {
+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 _hoisted_3$c = { class: "flex-1 truncate" };
+const _hoisted_4$8 = { class: "flex items-center gap-1" };
+const _hoisted_5$6 = ["id", "aria-label"];
+const _hoisted_6$6 = { class: "mb-4 flex items-center justify-between" };
+const _hoisted_7$5 = {
   class: "font-medium text-gray-900 dark:text-white",
   "aria-live": "polite",
   "aria-atomic": "true"
 };
-const _hoisted_8$3 = {
+const _hoisted_8$4 = {
   class: "mb-2 grid grid-cols-7 gap-1",
   role: "row"
 };
-const _hoisted_9$2 = ["abbr"];
-const _hoisted_10$2 = ["id", "aria-label"];
-const _hoisted_11$2 = ["aria-label", "aria-selected", "aria-disabled", "disabled", "onClick"];
-const _hoisted_12$1 = { class: "mt-4 border-t border-gray-200 pt-3 dark:border-gray-700" };
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+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({
   __name: "DatePicker",
   props: /* @__PURE__ */ vue.mergeModels({
     placeholder: { default: "Select date" },
@@ -768,7 +813,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       return formatter.format(date);
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
         vue.createElementVNode("button", {
           id: triggerId.value,
           ref_key: "triggerRef",
@@ -786,8 +831,8 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           onClick: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => vue.unref(toggle) && vue.unref(toggle)(...args))
         }, [
-          vue.createElementVNode("span", _hoisted_3$6, vue.toDisplayString(displayValue.value || __props.placeholder), 1),
-          vue.createElementVNode("div", _hoisted_4$4, [
+          vue.createElementVNode("span", _hoisted_3$c, vue.toDisplayString(displayValue.value || __props.placeholder), 1),
+          vue.createElementVNode("div", _hoisted_4$8, [
             modelValue.value ? (vue.openBlock(), vue.createElementBlock("button", {
               key: 0,
               type: "button",
@@ -807,7 +852,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": "true"
             })
           ])
-        ], 10, _hoisted_2$6),
+        ], 10, _hoisted_2$e),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -832,7 +877,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                 style: vue.normalizeStyle(vue.unref(dropdownStyle)),
                 class: "z-9999 w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
               }, [
-                vue.createElementVNode("div", _hoisted_6$4, [
+                vue.createElementVNode("div", _hoisted_6$6, [
                   vue.createElementVNode("button", {
                     type: "button",
                     class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
@@ -845,7 +890,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                       "aria-hidden": "true"
                     })
                   ]),
-                  vue.createElementVNode("span", _hoisted_7$4, vue.toDisplayString(monthYear.value), 1),
+                  vue.createElementVNode("span", _hoisted_7$5, vue.toDisplayString(monthYear.value), 1),
                   vue.createElementVNode("button", {
                     type: "button",
                     class: "rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700",
@@ -859,14 +904,14 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                     })
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_8$3, [
+                vue.createElementVNode("div", _hoisted_8$4, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekDays.value, (day) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
                       key: day,
                       class: "text-center text-xs font-medium text-gray-500 dark:text-gray-400",
                       role: "columnheader",
                       abbr: day
-                    }, vue.toDisplayString(day), 9, _hoisted_9$2);
+                    }, vue.toDisplayString(day), 9, _hoisted_9$3);
                   }), 128))
                 ]),
                 vue.createElementVNode("div", {
@@ -893,17 +938,17 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                         day.isSelected && "bg-primary text-white font-semibold"
                       ]),
                       onClick: ($event) => selectDate(day)
-                    }, vue.toDisplayString(day.date.getDate()), 11, _hoisted_11$2);
+                    }, vue.toDisplayString(day.date.getDate()), 11, _hoisted_11$3);
                   }), 128))
-                ], 8, _hoisted_10$2),
-                vue.createElementVNode("div", _hoisted_12$1, [
+                ], 8, _hoisted_10$3),
+                vue.createElementVNode("div", _hoisted_12$2, [
                   vue.createElementVNode("button", {
                     type: "button",
                     class: "w-full rounded py-1.5 text-sm font-medium text-primary hover:bg-primary/10",
                     onClick: _cache[1] || (_cache[1] = ($event) => selectDate({ date: /* @__PURE__ */ new Date(), isDisabled: false }))
                   }, " Today ")
                 ])
-              ], 12, _hoisted_5$4)) : vue.createCommentVNode("", true)
+              ], 12, _hoisted_5$6)) : vue.createCommentVNode("", true)
             ]),
             _: 1
           })
@@ -912,27 +957,27 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "space-y-4" };
-const _hoisted_2$5 = ["accept", "multiple", "disabled"];
-const _hoisted_3$5 = { class: "space-y-2" };
-const _hoisted_4$3 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300" };
-const _hoisted_5$3 = {
+const _hoisted_1$i = { class: "space-y-4" };
+const _hoisted_2$d = ["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 = {
   key: 0,
   class: "text-xs text-gray-500 dark:text-gray-400"
 };
-const _hoisted_6$3 = {
+const _hoisted_6$5 = {
   key: 1,
   class: "text-xs text-gray-500 dark:text-gray-400"
 };
-const _hoisted_7$3 = {
+const _hoisted_7$4 = {
   key: 0,
   class: "space-y-2"
 };
-const _hoisted_8$2 = { class: "flex-1 min-w-0" };
-const _hoisted_9$1 = { class: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate" };
-const _hoisted_10$1 = { class: "text-xs text-gray-500 dark:text-gray-400" };
-const _hoisted_11$1 = ["onClick"];
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+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({
   __name: "FileUpload",
   props: {
     accept: {},
@@ -1060,7 +1105,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       return "heroicons:document";
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass(dropzoneClasses.value),
           onDrop: vue.withModifiers(handleDrop, ["prevent"]),
@@ -1077,18 +1122,18 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             multiple: __props.multiple,
             disabled: __props.disabled,
             onChange: handleInputChange
-          }, null, 40, _hoisted_2$5),
-          vue.createElementVNode("div", _hoisted_3$5, [
+          }, null, 40, _hoisted_2$d),
+          vue.createElementVNode("div", _hoisted_3$b, [
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "heroicons:cloud-arrow-up",
               class: vue.normalizeClass(["size-12 mx-auto text-gray-400", { "text-primary-500": isDragging.value }])
             }, null, 8, ["class"]),
-            vue.createElementVNode("p", _hoisted_4$3, vue.toDisplayString(__props.label), 1),
-            __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$3, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
-            __props.maxSize ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$3, " Max size: " + vue.toDisplayString(formatSize(__props.maxSize)), 1)) : vue.createCommentVNode("", true)
+            vue.createElementVNode("p", _hoisted_4$7, vue.toDisplayString(__props.label), 1),
+            __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$5, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
+            __props.maxSize ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_6$5, " Max size: " + vue.toDisplayString(formatSize(__props.maxSize)), 1)) : vue.createCommentVNode("", true)
           ])
         ], 34),
-        files.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_7$3, [
+        files.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_7$4, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(files.value, (uploadedFile) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: uploadedFile.id,
@@ -1098,9 +1143,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                 icon: getFileIcon(uploadedFile.file),
                 class: "size-8 text-gray-400"
               }, null, 8, ["icon"]),
-              vue.createElementVNode("div", _hoisted_8$2, [
-                vue.createElementVNode("p", _hoisted_9$1, vue.toDisplayString(uploadedFile.file.name), 1),
-                vue.createElementVNode("p", _hoisted_10$1, vue.toDisplayString(formatSize(uploadedFile.file.size)), 1)
+              vue.createElementVNode("div", _hoisted_8$3, [
+                vue.createElementVNode("p", _hoisted_9$2, vue.toDisplayString(uploadedFile.file.name), 1),
+                vue.createElementVNode("p", _hoisted_10$2, vue.toDisplayString(formatSize(uploadedFile.file.size)), 1)
               ]),
               vue.createElementVNode("button", {
                 type: "button",
@@ -1111,7 +1156,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                   icon: "heroicons:x-mark",
                   class: "size-5"
                 })
-              ], 8, _hoisted_11$1)
+              ], 8, _hoisted_11$2)
             ]);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -1119,13 +1164,13 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "flex items-center gap-1" };
-const _hoisted_2$4 = ["disabled", "onClick", "onMousemove"];
-const _hoisted_3$4 = {
+const _hoisted_1$h = { class: "flex items-center gap-1" };
+const _hoisted_2$c = ["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$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "Rating",
   props: {
     modelValue: { default: 0 },
@@ -1188,7 +1233,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
       hoverValue.value = null;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
         vue.createElementVNode("div", {
           class: "flex items-center",
           onMouseleave: handleMouseLeave
@@ -1220,29 +1265,29 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
                   class: vue.normalizeClass([sizeClasses.value, __props.color])
                 }, null, 8, ["icon", "class"])
               ], 4)
-            ], 42, _hoisted_2$4);
+            ], 42, _hoisted_2$c);
           }), 128))
         ], 32),
-        __props.showValue ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$4, vue.toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : vue.createCommentVNode("", true)
+        __props.showValue ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$a, vue.toDisplayString(__props.modelValue.toFixed(__props.allowHalf ? 1 : 0)), 1)) : vue.createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$3 = { class: "relative inline-block" };
-const _hoisted_2$3 = {
+const _hoisted_1$g = { class: "relative inline-block" };
+const _hoisted_2$b = {
   key: 0,
   class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
 };
-const _hoisted_3$3 = ["disabled"];
-const _hoisted_4$2 = { class: "text-sm font-mono text-gray-700 dark:text-gray-300" };
-const _hoisted_5$2 = { class: "grid grid-cols-5 gap-2 mb-3" };
-const _hoisted_6$2 = ["title", "onClick"];
-const _hoisted_7$2 = {
+const _hoisted_3$9 = ["disabled"];
+const _hoisted_4$6 = { class: "text-sm font-mono text-gray-700 dark:text-gray-300" };
+const _hoisted_5$4 = { class: "grid grid-cols-5 gap-2 mb-3" };
+const _hoisted_6$4 = ["title", "onClick"];
+const _hoisted_7$3 = {
   key: 0,
   class: "flex items-center gap-2 pt-3 border-t border-gray-200 dark:border-gray-700"
 };
-const _hoisted_8$1 = ["value"];
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_8$2 = ["value"];
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "ColorPicker",
   props: {
     modelValue: { default: "#3b82f6" },
@@ -1311,8 +1356,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       isOpen.value = false;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_2$3, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
+      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),
         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 }]),
@@ -1323,12 +1368,12 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             class: "size-6 rounded border border-gray-200 dark:border-gray-600",
             style: vue.normalizeStyle({ backgroundColor: __props.modelValue })
           }, null, 4),
-          vue.createElementVNode("span", _hoisted_4$2, vue.toDisplayString(__props.modelValue), 1),
+          vue.createElementVNode("span", _hoisted_4$6, vue.toDisplayString(__props.modelValue), 1),
           vue.createVNode(vue.unref(vue$1.Icon), {
             icon: "heroicons:chevron-down",
             class: vue.normalizeClass(["size-4 text-gray-400", { "rotate-180": isOpen.value }])
           }, null, 8, ["class"])
-        ], 10, _hoisted_3$3),
+        ], 10, _hoisted_3$9),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: teleportTarget.value,
           disabled: teleportDisabled.value
@@ -1348,7 +1393,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                 onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
                 }, ["stop"]))
               }, [
-                vue.createElementVNode("div", _hoisted_5$2, [
+                vue.createElementVNode("div", _hoisted_5$4, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.swatches, (color) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: color,
@@ -1367,16 +1412,16 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
                           ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#eab308", "#f59e0b"].includes(color) ? "text-gray-800" : "text-white"
                         ]])
                       }, null, 8, ["class"])) : vue.createCommentVNode("", true)
-                    ], 14, _hoisted_6$2);
+                    ], 14, _hoisted_6$4);
                   }), 128))
                 ]),
-                __props.showInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, [
+                __props.showInput ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
                   vue.createElementVNode("input", {
                     type: "color",
                     value: __props.modelValue,
                     class: "size-8 rounded cursor-pointer border-0 p-0",
                     onInput: handleNativeInput
-                  }, null, 40, _hoisted_8$1),
+                  }, null, 40, _hoisted_8$2),
                   vue.withDirectives(vue.createElementVNode("input", {
                     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
                     type: "text",
@@ -1402,16 +1447,16 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "space-y-2" };
-const _hoisted_2$2 = {
+const _hoisted_1$f = { class: "space-y-2" };
+const _hoisted_2$a = {
   key: 0,
   class: "flex justify-between text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _hoisted_3$2 = {
+const _hoisted_3$8 = {
   key: 1,
   class: "flex justify-between text-xs text-gray-500 dark:text-gray-400"
 };
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "RangeSlider",
   props: {
     modelValue: { default: () => [25, 75] },
@@ -1489,8 +1534,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-        __props.showLabels ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        __props.showLabels ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
           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),
@@ -1523,7 +1568,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
             onMousedown: _cache[1] || (_cache[1] = ($event) => handleMouseDown("max"))
           }, null, 38)
         ], 2),
-        __props.showMinMax ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+        __props.showMinMax ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, [
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(__props.min)), 1),
           vue.createElementVNode("span", null, vue.toDisplayString(__props.formatLabel(__props.max)), 1)
         ])) : vue.createCommentVNode("", true)
@@ -1531,18 +1576,18 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1 = ["aria-expanded", "aria-controls"];
-const _hoisted_2$1 = ["id", "name", "placeholder", "disabled", "aria-controls"];
-const _hoisted_3$1 = { class: "flex items-center gap-1" };
-const _hoisted_4$1 = ["id", "aria-label", "aria-multiselectable"];
-const _hoisted_5$1 = ["aria-selected", "aria-disabled", "disabled", "onClick"];
-const _hoisted_6$1 = { class: "flex-1" };
-const _hoisted_7$1 = {
+const _hoisted_1$e = ["aria-expanded", "aria-controls"];
+const _hoisted_2$9 = ["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"];
+const _hoisted_6$3 = { class: "flex-1" };
+const _hoisted_7$2 = {
   key: 1,
   class: "px-3 py-2 text-center text-sm text-gray-500 dark:text-gray-400",
   role: "status"
 };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "Combobox",
   props: {
     modelValue: {},
@@ -1673,10 +1718,10 @@ const _sfc_main$1 = /* @__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$1)), [
+          }, null, 8, _hoisted_2$9)), [
             [vue.vModelText, search.value]
           ]),
-          vue.createElementVNode("div", _hoisted_3$1, [
+          vue.createElementVNode("div", _hoisted_3$7, [
             __props.clearable && selectedOptions.value.length > 0 && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
               key: 0,
               type: "button",
@@ -1699,7 +1744,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               "aria-hidden": "true"
             }, null, 8, ["class"])
           ])
-        ], 10, _hoisted_1$1),
+        ], 10, _hoisted_1$e),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: teleportTarget.value,
           disabled: teleportDisabled.value
@@ -1749,16 +1794,16 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         class: "size-3"
                       })) : vue.createCommentVNode("", true)
                     ], 2)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", _hoisted_6$1, vue.toDisplayString(option.label), 1),
+                    vue.createElementVNode("span", _hoisted_6$3, vue.toDisplayString(option.label), 1),
                     !__props.multiple && isSelected(option) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
                       key: 1,
                       icon: "lucide:check",
                       class: "size-4 text-primary",
                       "aria-hidden": "true"
                     })) : vue.createCommentVNode("", true)
-                  ], 10, _hoisted_5$1);
-                }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, vue.toDisplayString(__props.noResultsText), 1))
-              ], 8, _hoisted_4$1)) : vue.createCommentVNode("", true)
+                  ], 10, _hoisted_5$3);
+                }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2, vue.toDisplayString(__props.noResultsText), 1))
+              ], 8, _hoisted_4$5)) : vue.createCommentVNode("", true)
             ]),
             _: 1
           })
@@ -1767,30 +1812,30 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "relative" };
-const _hoisted_2 = {
+const _hoisted_1$d = { class: "relative" };
+const _hoisted_2$8 = {
   key: 0,
   class: "text-red-500 ml-0.5"
 };
-const _hoisted_3 = ["id", "disabled", "aria-invalid", "aria-describedby"];
-const _hoisted_4 = {
+const _hoisted_3$6 = ["id", "disabled", "aria-invalid", "aria-describedby"];
+const _hoisted_4$4 = {
   key: 0,
   class: "flex items-center gap-2 flex-1"
 };
-const _hoisted_5 = { class: "flex h-8 w-8 items-center justify-center rounded bg-gray-100 dark:bg-gray-800" };
-const _hoisted_6 = { class: "text-gray-700 dark:text-gray-300 font-mono text-xs truncate" };
-const _hoisted_7 = {
+const _hoisted_5$2 = { class: "flex size-8 items-center justify-center rounded bg-gray-100 dark:bg-gray-800" };
+const _hoisted_6$2 = { class: "text-gray-700 dark:text-gray-300 font-mono text-xs truncate" };
+const _hoisted_7$1 = {
   key: 1,
   class: "flex-1 text-gray-400 dark:text-gray-500"
 };
-const _hoisted_8 = { class: "relative mb-4" };
-const _hoisted_9 = ["placeholder"];
-const _hoisted_10 = {
+const _hoisted_8$1 = { class: "relative mb-4" };
+const _hoisted_9$1 = ["placeholder"];
+const _hoisted_10$1 = {
   key: 0,
   class: "absolute right-3 top-1/2 -translate-y-1/2"
 };
-const _hoisted_11 = { class: "max-h-64 overflow-y-auto" };
-const _hoisted_12 = {
+const _hoisted_11$1 = { class: "max-h-64 overflow-y-auto" };
+const _hoisted_12$1 = {
   key: 0,
   class: "py-8 text-center text-sm text-gray-500"
 };
@@ -1801,7 +1846,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 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "IconPicker",
   props: /* @__PURE__ */ vue.mergeModels({
     label: {},
@@ -1925,15 +1970,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       searchQuery.value = "";
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        __props.label ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
           key: 0,
           "html-for": inputId.value,
           error: __props.error
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(vue.toDisplayString(__props.label) + " ", 1),
-            __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, "*")) : vue.createCommentVNode("", true)
+            __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$8, "*")) : vue.createCommentVNode("", true)
           ]),
           _: 1
         }, 8, ["html-for", "error"])) : vue.createCommentVNode("", true),
@@ -1949,15 +1994,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ]]),
           onClick: openPicker
         }, [
-          modelValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-            vue.createElementVNode("div", _hoisted_5, [
+          modelValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [
+            vue.createElementVNode("div", _hoisted_5$2, [
               vue.createVNode(vue.unref(vue$1.Icon), {
                 icon: modelValue.value,
-                class: "h-5 w-5 text-gray-700 dark:text-gray-300"
+                class: "size-5 text-gray-700 dark:text-gray-300"
               }, null, 8, ["icon"])
             ]),
-            vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(modelValue.value), 1)
-          ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(__props.placeholder), 1)),
+            vue.createElementVNode("span", _hoisted_6$2, vue.toDisplayString(modelValue.value), 1)
+          ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$1, vue.toDisplayString(__props.placeholder), 1)),
           modelValue.value && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
             key: 2,
             type: "button",
@@ -1966,15 +2011,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, [
             vue.createVNode(vue.unref(vue$1.Icon), {
               icon: "lucide:x",
-              class: "h-4 w-4"
+              class: "size-4"
             })
           ])) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(vue$1.Icon), {
             icon: "lucide:chevron-down",
-            class: "h-4 w-4 text-gray-400"
+            class: "size-4 text-gray-400"
           })
-        ], 10, _hoisted_3),
-        __props.help && !hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
+        ], 10, _hoisted_3$6),
+        __props.help && !hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
           key: 1,
           id: helpId.value
         }, {
@@ -1983,7 +2028,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 8, ["id"])) : vue.createCommentVNode("", true),
-        hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
+        hasError.value ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
           key: 2,
           id: helpId.value,
           error: true
@@ -2004,10 +2049,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
               }, ["stop"]))
             }, [
-              vue.createElementVNode("div", _hoisted_8, [
+              vue.createElementVNode("div", _hoisted_8$1, [
                 vue.createVNode(vue.unref(vue$1.Icon), {
                   icon: "lucide:search",
-                  class: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
+                  class: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400"
                 }),
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
@@ -2015,23 +2060,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   placeholder: __props.placeholder,
                   class: "w-full rounded-md border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm text-gray-800 placeholder-gray-400 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:placeholder-gray-500",
                   autofocus: ""
-                }, null, 8, _hoisted_9), [
+                }, null, 8, _hoisted_9$1), [
                   [vue.vModelText, searchQuery.value]
                 ]),
-                isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+                isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
                   vue.createVNode(vue.unref(vue$1.Icon), {
                     icon: "lucide:loader-2",
-                    class: "h-4 w-4 animate-spin text-gray-400"
+                    class: "size-4 animate-spin text-gray-400"
                   })
                 ])) : vue.createCommentVNode("", true)
               ]),
-              vue.createElementVNode("div", _hoisted_11, [
-                displayedIcons.value.length === 0 && searchQuery.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, ' Aucune icône trouvée pour "' + vue.toDisplayString(searchQuery.value) + '" ', 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+              vue.createElementVNode("div", _hoisted_11$1, [
+                displayedIcons.value.length === 0 && searchQuery.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, ' Aucune icône trouvée pour "' + vue.toDisplayString(searchQuery.value) + '" ', 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayedIcons.value, (icon) => {
                     return vue.openBlock(), vue.createElementBlock("button", {
                       key: icon,
                       type: "button",
-                      class: vue.normalizeClass(["flex h-9 w-9 items-center justify-center rounded transition-colors", [
+                      class: vue.normalizeClass(["flex size-9 items-center justify-center rounded transition-colors", [
                         modelValue.value === icon ? "bg-primary text-white" : "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
                       ]]),
                       title: icon,
@@ -2039,7 +2084,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     }, [
                       vue.createVNode(vue.unref(vue$1.Icon), {
                         icon,
-                        class: "h-5 w-5"
+                        class: "size-5"
                       }, null, 8, ["icon"])
                     ], 10, _hoisted_14);
                   }), 128))
@@ -2060,19 +2105,1503 @@ const _sfc_main = /* @__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_3$5 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
+const _hoisted_4$3 = {
+  key: 0,
+  class: "text-sm text-gray-500 dark:text-gray-400"
+};
+const _hoisted_5$1 = { class: "p-5 sm:p-6" };
+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({
+  __name: "FormSection",
+  props: /* @__PURE__ */ vue.mergeModels({
+    title: {},
+    subtitle: {},
+    icon: {},
+    iconColor: { default: "primary" },
+    bordered: { type: Boolean, default: true },
+    collapsible: { type: Boolean, default: false },
+    collapsed: { type: Boolean, default: false }
+  }, {
+    "collapsed": { type: Boolean, ...{ default: false } },
+    "collapsedModifiers": {}
+  }),
+  emits: ["update:collapsed"],
+  setup(__props) {
+    const isCollapsed = vue.useModel(__props, "collapsed");
+    function toggleCollapse() {
+      isCollapsed.value = !isCollapsed.value;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "bg-white dark:bg-slate-800 rounded-2xl overflow-hidden",
+          __props.bordered && "border border-gray-100 dark:border-slate-700 shadow-sm"
+        ])
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            "p-5 border-b border-gray-100 dark:border-slate-700 bg-linear-to-r from-gray-50 to-white dark:from-slate-800 dark:to-slate-800",
+            __props.collapsible && "cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors"
+          ]),
+          onClick: _cache[0] || (_cache[0] = ($event) => __props.collapsible && toggleCollapse())
+        }, [
+          vue.createElementVNode("div", _hoisted_1$c, [
+            vue.createElementVNode("div", _hoisted_2$7, [
+              __props.icon ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass([
+                  "size-10 rounded-xl flex items-center justify-center",
+                  __props.iconColor === "primary" && "bg-primary-100 dark:bg-primary-900/30",
+                  __props.iconColor === "gray" && "bg-gray-100 dark:bg-slate-700",
+                  __props.iconColor === "success" && "bg-emerald-100 dark:bg-emerald-900/30",
+                  __props.iconColor === "warning" && "bg-amber-100 dark:bg-amber-900/30",
+                  __props.iconColor === "danger" && "bg-red-100 dark:bg-red-900/30"
+                ])
+              }, [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  icon: __props.icon,
+                  class: vue.normalizeClass([
+                    "size-5",
+                    __props.iconColor === "primary" && "text-primary-600 dark:text-primary-400",
+                    __props.iconColor === "gray" && "text-gray-600 dark:text-gray-400",
+                    __props.iconColor === "success" && "text-emerald-600 dark:text-emerald-400",
+                    __props.iconColor === "warning" && "text-amber-600 dark:text-amber-400",
+                    __props.iconColor === "danger" && "text-red-600 dark:text-red-400"
+                  ])
+                }, null, 8, ["icon", "class"])
+              ], 2)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", null, [
+                vue.createElementVNode("h2", _hoisted_3$5, [
+                  vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                    vue.createTextVNode(vue.toDisplayString(__props.title), 1)
+                  ])
+                ]),
+                __props.subtitle ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_4$3, [
+                  vue.renderSlot(_ctx.$slots, "subtitle", {}, () => [
+                    vue.createTextVNode(vue.toDisplayString(__props.subtitle), 1)
+                  ])
+                ])) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            __props.collapsible ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors",
+              onClick: vue.withModifiers(toggleCollapse, ["stop"])
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "heroicons:chevron-down",
+                class: vue.normalizeClass([
+                  "w-5 h-5 text-gray-400 transition-transform duration-200",
+                  isCollapsed.value && "-rotate-90"
+                ])
+              }, null, 8, ["class"])
+            ])) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "header-actions")
+          ])
+        ], 2),
+        vue.withDirectives(vue.createElementVNode("div", _hoisted_5$1, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 512), [
+          [vue.vShow, !isCollapsed.value]
+        ]),
+        _ctx.$slots.footer ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
+          vue.renderSlot(_ctx.$slots, "footer")
+        ], 512)), [
+          [vue.vShow, !isCollapsed.value]
+        ]) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$b = { key: 1 };
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormActions",
+  props: {
+    submitLabel: { default: "Enregistrer" },
+    cancelLabel: { default: "Annuler" },
+    submitIcon: { default: "heroicons:check" },
+    cancelIcon: { default: "heroicons:x-mark" },
+    loading: { type: Boolean },
+    loadingLabel: {},
+    disabled: { type: Boolean },
+    showCancel: { type: Boolean, default: true },
+    align: { default: "right" },
+    stackOnMobile: { type: Boolean, default: false },
+    submitVariant: { default: "primary" }
+  },
+  emits: ["submit", "cancel"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "flex gap-3 pt-2",
+          __props.align === "left" && "justify-start",
+          __props.align === "center" && "justify-center",
+          __props.align === "right" && "justify-end",
+          __props.align === "stretch" && "[&>*]:flex-1",
+          __props.stackOnMobile && "flex-col sm:flex-row"
+        ])
+      }, [
+        __props.showCancel ? (vue.openBlock(), vue.createBlock(Button_vue_vue_type_script_setup_true_lang._sfc_main, {
+          key: 0,
+          type: "button",
+          variant: "outline",
+          disabled: __props.loading,
+          class: vue.normalizeClass([
+            __props.stackOnMobile && "order-2 sm:order-1"
+          ]),
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("cancel"))
+        }, {
+          default: vue.withCtx(() => [
+            __props.cancelIcon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: __props.cancelIcon,
+              class: "w-5 h-5"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createTextVNode(" " + vue.toDisplayString(__props.cancelLabel), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled", "class"])) : vue.createCommentVNode("", true),
+        vue.createVNode(Button_vue_vue_type_script_setup_true_lang._sfc_main, {
+          type: "submit",
+          variant: __props.submitVariant,
+          disabled: __props.disabled || __props.loading,
+          loading: __props.loading,
+          class: vue.normalizeClass([
+            __props.stackOnMobile && "order-1 sm:order-2"
+          ]),
+          onClick: _cache[1] || (_cache[1] = ($event) => emit("submit"))
+        }, {
+          default: vue.withCtx(() => [
+            !__props.loading ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              __props.submitIcon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                key: 0,
+                icon: __props.submitIcon,
+                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))
+          ]),
+          _: 1
+        }, 8, ["variant", "disabled", "loading", "class"]),
+        vue.renderSlot(_ctx.$slots, "extra")
+      ], 2);
+    };
+  }
+});
+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({
+  __name: "EmailInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "Enter email address..." },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    showValidation: { type: Boolean, default: true },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const isValid = vue.computed(() => {
+      if (!modelValue.value) return null;
+      return emailRegex.test(modelValue.value);
+    });
+    const isTouched = vue.ref(false);
+    const showStatus = vue.computed(() => {
+      return props.showValidation && isTouched.value && !!modelValue.value;
+    });
+    function handleBlur() {
+      isTouched.value = true;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        icon: "lucide:mail",
+        size: __props.size,
+        disabled: __props.disabled,
+        invalid: showStatus.value && isValid.value === false
+      }, {
+        default: vue.withCtx(({ inputClass }) => [
+          vue.withDirectives(vue.createElementVNode("input", {
+            id: __props.id ?? __props.name,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            type: "email",
+            name: __props.name,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            required: __props.required,
+            "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), [
+            [vue.vModelText, modelValue.value]
+          ])
+        ]),
+        actions: vue.withCtx(() => [
+          showStatus.value && isValid.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 0,
+            icon: "lucide:check-circle",
+            class: "size-5 text-emerald-500"
+          })) : showStatus.value && isValid.value === false ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 1,
+            icon: "lucide:alert-circle",
+            class: "size-5 text-red-500"
+          })) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["size", "disabled", "invalid"]);
+    };
+  }
+});
+const _hoisted_1$8 = ["id", "type", "name", "placeholder", "disabled", "required", "aria-required", "aria-describedby"];
+const _hoisted_2$5 = ["disabled"];
+const _hoisted_3$4 = {
+  key: 0,
+  class: "mt-2"
+};
+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({
+  __name: "PasswordInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "Enter password..." },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    showStrength: { type: Boolean, default: false },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {},
+    minLength: { default: 8 }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const showPassword = vue.ref(false);
+    const strength = vue.computed(() => {
+      const password = modelValue.value;
+      if (!password) return null;
+      let score = 0;
+      if (password.length >= props.minLength) score++;
+      if (password.length >= 12) score++;
+      if (/[a-z]/.test(password)) score++;
+      if (/[A-Z]/.test(password)) score++;
+      if (/[0-9]/.test(password)) score++;
+      if (/[^a-zA-Z0-9]/.test(password)) score++;
+      if (score <= 2) return "weak";
+      if (score <= 3) return "fair";
+      if (score <= 4) return "good";
+      return "strong";
+    });
+    const strengthConfig = vue.computed(() => {
+      const configs = {
+        weak: { label: "Weak", color: "bg-red-500", width: "w-1/4" },
+        fair: { label: "Fair", color: "bg-orange-500", width: "w-2/4" },
+        good: { label: "Good", color: "bg-yellow-500", width: "w-3/4" },
+        strong: { label: "Strong", color: "bg-emerald-500", width: "w-full" }
+      };
+      return strength.value ? configs[strength.value] : null;
+    });
+    function toggleVisibility() {
+      showPassword.value = !showPassword.value;
+    }
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createVNode(_sfc_main$a, {
+          icon: "lucide:lock",
+          size: __props.size,
+          disabled: __props.disabled
+        }, {
+          default: vue.withCtx(({ inputClass }) => [
+            vue.withDirectives(vue.createElementVNode("input", {
+              id: __props.id ?? __props.name,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+              type: showPassword.value ? "text" : "password",
+              name: __props.name,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              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), [
+              [vue.vModelDynamic, modelValue.value]
+            ])
+          ]),
+          actions: vue.withCtx(() => [
+            vue.createElementVNode("button", {
+              type: "button",
+              disabled: __props.disabled,
+              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+              onClick: toggleVisibility
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: showPassword.value ? "lucide:eye-off" : "lucide:eye",
+                class: "size-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              }, null, 8, ["icon"])
+            ], 8, _hoisted_2$5)
+          ]),
+          _: 1
+        }, 8, ["size", "disabled"]),
+        __props.showStrength && modelValue.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
+          vue.createElementVNode("div", _hoisted_4$2, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([
+                "h-full rounded-full transition-all duration-300",
+                (_a = strengthConfig.value) == null ? void 0 : _a.color,
+                (_b = strengthConfig.value) == null ? void 0 : _b.width
+              ])
+            }, null, 2)
+          ]),
+          strengthConfig.value ? (vue.openBlock(), vue.createElementBlock("p", {
+            key: 0,
+            class: vue.normalizeClass([
+              "mt-1 text-xs font-medium",
+              strength.value === "weak" && "text-red-500",
+              strength.value === "fair" && "text-orange-500",
+              strength.value === "good" && "text-yellow-600 dark:text-yellow-500",
+              strength.value === "strong" && "text-emerald-500"
+            ])
+          }, vue.toDisplayString(strengthConfig.value.label), 3)) : vue.createCommentVNode("", true)
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$7 = ["disabled"];
+const _hoisted_2$4 = { class: "text-lg leading-none" };
+const _hoisted_3$3 = ["id", "value", "name", "placeholder", "disabled", "required", "aria-required", "aria-describedby"];
+const _hoisted_4$1 = { class: "text-xs text-gray-400 font-medium" };
+const _hoisted_5 = {
+  key: 0,
+  class: "absolute z-50 mt-1 w-full bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg overflow-hidden"
+};
+const _hoisted_6 = { class: "p-2 border-b border-gray-100 dark:border-slate-700" };
+const _hoisted_7 = { class: "max-h-48 overflow-y-auto" };
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "text-lg" };
+const _hoisted_10 = { class: "flex-1 text-sm text-gray-700 dark:text-gray-300" };
+const _hoisted_11 = { class: "text-sm text-gray-400" };
+const _hoisted_12 = {
+  key: 0,
+  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: "🇩🇿" }
+];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "PhoneInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "Phone number" },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {},
+    defaultCountry: { default: "FR" },
+    countries: { default: () => defaultCountries }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const selectedCountry = vue.ref(
+      props.countries.find((c) => c.code === props.defaultCountry) || props.countries[0]
+    );
+    const showDropdown = vue.ref(false);
+    const searchQuery = vue.ref("");
+    const dropdownRef = vue.ref(null);
+    const filteredCountries = vue.computed(() => {
+      if (!searchQuery.value) return props.countries;
+      const query = searchQuery.value.toLowerCase();
+      return props.countries.filter(
+        (c) => c.name.toLowerCase().includes(query) || c.dialCode.includes(query) || c.code.toLowerCase().includes(query)
+      );
+    });
+    const fullNumber = vue.computed(() => {
+      if (!modelValue.value) return "";
+      return `${selectedCountry.value.dialCode}${modelValue.value}`;
+    });
+    function selectCountry(country) {
+      selectedCountry.value = country;
+      showDropdown.value = false;
+      searchQuery.value = "";
+    }
+    function formatPhoneNumber(value) {
+      const cleaned = value.replace(/\D/g, "");
+      return cleaned;
+    }
+    function handleInput(event) {
+      const target = event.target;
+      const formatted = formatPhoneNumber(target.value);
+      modelValue.value = formatted;
+    }
+    function handleClickOutside(event) {
+      if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
+        showDropdown.value = false;
+        searchQuery.value = "";
+      }
+    }
+    vue.watch(showDropdown, (isOpen) => {
+      if (isOpen) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    __expose({ selectedCountry, fullNumber });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "relative",
+        ref_key: "dropdownRef",
+        ref: dropdownRef
+      }, [
+        vue.createVNode(_sfc_main$a, {
+          size: __props.size,
+          disabled: __props.disabled
+        }, {
+          icon: vue.withCtx(() => [
+            vue.createElementVNode("button", {
+              type: "button",
+              disabled: __props.disabled,
+              class: "flex items-center gap-1 pr-2 border-r border-gray-200 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-600 -ml-1 pl-1 py-1 rounded-l transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+              onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => showDropdown.value = !showDropdown.value, ["stop"]))
+            }, [
+              vue.createElementVNode("span", _hoisted_2$4, vue.toDisplayString(selectedCountry.value.flag), 1),
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "lucide:chevron-down",
+                class: vue.normalizeClass([
+                  "size-3 text-gray-400 transition-transform",
+                  showDropdown.value && "rotate-180"
+                ])
+              }, null, 8, ["class"])
+            ], 8, _hoisted_1$7)
+          ]),
+          default: vue.withCtx(({ inputClass }) => [
+            vue.createElementVNode("input", {
+              id: __props.id ?? __props.name,
+              value: modelValue.value,
+              type: "tel",
+              name: __props.name,
+              placeholder: __props.placeholder,
+              disabled: __props.disabled,
+              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)
+          ]),
+          actions: vue.withCtx(() => [
+            vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString(selectedCountry.value.dialCode), 1)
+          ]),
+          _: 1
+        }, 8, ["size", "disabled"]),
+        vue.createVNode(vue.Transition, {
+          "enter-active-class": "transition-all duration-200 ease-out",
+          "enter-from-class": "opacity-0 -translate-y-2",
+          "enter-to-class": "opacity-100 translate-y-0",
+          "leave-active-class": "transition-all duration-150 ease-in",
+          "leave-from-class": "opacity-100 translate-y-0",
+          "leave-to-class": "opacity-0 -translate-y-2"
+        }, {
+          default: vue.withCtx(() => [
+            showDropdown.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+              vue.createElementVNode("div", _hoisted_6, [
+                vue.withDirectives(vue.createElementVNode("input", {
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
+                  type: "text",
+                  placeholder: "Search countries...",
+                  class: "w-full px-3 py-2 text-sm border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                }, null, 512), [
+                  [vue.vModelText, searchQuery.value]
+                ])
+              ]),
+              vue.createElementVNode("ul", _hoisted_7, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredCountries.value, (country) => {
+                  return vue.openBlock(), vue.createElementBlock("li", {
+                    key: country.code,
+                    class: vue.normalizeClass(["flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors", selectedCountry.value.code === country.code && "bg-primary-50 dark:bg-primary-900/20"]),
+                    onClick: ($event) => selectCountry(country)
+                  }, [
+                    vue.createElementVNode("span", _hoisted_9, vue.toDisplayString(country.flag), 1),
+                    vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(country.name), 1),
+                    vue.createElementVNode("span", _hoisted_11, vue.toDisplayString(country.dialCode), 1)
+                  ], 10, _hoisted_8);
+                }), 128)),
+                filteredCountries.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_12, " No countries found ")) : vue.createCommentVNode("", true)
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 512);
+    };
+  }
+});
+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({
+  __name: "NumberInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "0" },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    min: {},
+    max: {},
+    step: { default: 1 },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {},
+    showStepper: { type: Boolean, default: true }
+  }, {
+    "modelValue": { default: null },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const canDecrement = vue.computed(() => {
+      if (props.disabled) return false;
+      if (modelValue.value === null) return true;
+      if (props.min !== void 0) return modelValue.value > props.min;
+      return true;
+    });
+    const canIncrement = vue.computed(() => {
+      if (props.disabled) return false;
+      if (modelValue.value === null) return true;
+      if (props.max !== void 0) return modelValue.value < props.max;
+      return true;
+    });
+    function increment() {
+      if (!canIncrement.value) return;
+      const current = modelValue.value ?? 0;
+      const newValue = current + props.step;
+      modelValue.value = props.max !== void 0 ? Math.min(newValue, props.max) : newValue;
+    }
+    function decrement() {
+      if (!canDecrement.value) return;
+      const current = modelValue.value ?? 0;
+      const newValue = current - props.step;
+      modelValue.value = props.min !== void 0 ? Math.max(newValue, props.min) : newValue;
+    }
+    function handleInput(event) {
+      const target = event.target;
+      const value = target.value === "" ? null : parseFloat(target.value);
+      if (value !== null && !isNaN(value)) {
+        let clampedValue = value;
+        if (props.min !== void 0) clampedValue = Math.max(clampedValue, props.min);
+        if (props.max !== void 0) clampedValue = Math.min(clampedValue, props.max);
+        modelValue.value = clampedValue;
+      } else {
+        modelValue.value = null;
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        size: __props.size,
+        disabled: __props.disabled
+      }, vue.createSlots({
+        default: vue.withCtx(({ inputClass }) => [
+          vue.createElementVNode("input", {
+            id: __props.id ?? __props.name,
+            value: modelValue.value,
+            type: "number",
+            name: __props.name,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            required: __props.required,
+            min: __props.min,
+            max: __props.max,
+            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)
+        ]),
+        _: 2
+      }, [
+        __props.showStepper ? {
+          name: "icon",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("button", {
+              type: "button",
+              disabled: !canDecrement.value,
+              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+              onClick: decrement
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "lucide:minus",
+                class: "size-4 text-gray-500"
+              })
+            ], 8, _hoisted_1$6)
+          ]),
+          key: "0"
+        } : void 0,
+        __props.showStepper ? {
+          name: "actions",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("button", {
+              type: "button",
+              disabled: !canIncrement.value,
+              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+              onClick: increment
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: "lucide:plus",
+                class: "size-4 text-gray-500"
+              })
+            ], 8, _hoisted_3$2)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["size", "disabled"]);
+    };
+  }
+});
+const _hoisted_1$5 = { class: "text-sm font-medium text-gray-500 dark:text-gray-400" };
+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({
+  __name: "MoneyInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "0.00" },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    currency: { default: "EUR" },
+    min: {},
+    max: {},
+    decimals: { default: 2 },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {}
+  }, {
+    "modelValue": { default: null },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const currencyConfig = {
+      EUR: { symbol: "€", locale: "fr-FR", position: "suffix" },
+      USD: { symbol: "$", locale: "en-US", position: "prefix" },
+      GBP: { symbol: "£", locale: "en-GB", position: "prefix" },
+      XOF: { symbol: "CFA", locale: "fr-FR", position: "suffix" },
+      MAD: { symbol: "DH", locale: "fr-MA", position: "suffix" },
+      CHF: { symbol: "CHF", locale: "fr-CH", position: "suffix" },
+      CAD: { symbol: "CA$", locale: "en-CA", position: "prefix" }
+    };
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const config = vue.computed(() => currencyConfig[props.currency]);
+    const displayValue = vue.ref("");
+    function formatForDisplay(value) {
+      if (value === null) return "";
+      return value.toLocaleString(config.value.locale, {
+        minimumFractionDigits: props.decimals,
+        maximumFractionDigits: props.decimals
+      });
+    }
+    function parseDisplayValue(value) {
+      if (!value) return null;
+      const cleaned = value.replace(/\s/g, "").replace(/,/g, ".");
+      const parsed = parseFloat(cleaned);
+      return isNaN(parsed) ? null : parsed;
+    }
+    vue.watch(
+      () => modelValue.value,
+      (newValue) => {
+        displayValue.value = formatForDisplay(newValue);
+      },
+      { immediate: true }
+    );
+    function handleInput(event) {
+      const target = event.target;
+      displayValue.value = target.value;
+    }
+    function handleBlur() {
+      const parsed = parseDisplayValue(displayValue.value);
+      if (parsed !== null) {
+        let clampedValue = parsed;
+        if (props.min !== void 0) clampedValue = Math.max(clampedValue, props.min);
+        if (props.max !== void 0) clampedValue = Math.min(clampedValue, props.max);
+        modelValue.value = clampedValue;
+        displayValue.value = formatForDisplay(clampedValue);
+      } else {
+        modelValue.value = null;
+        displayValue.value = "";
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        size: __props.size,
+        disabled: __props.disabled
+      }, vue.createSlots({
+        default: vue.withCtx(({ inputClass }) => [
+          vue.createElementVNode("input", {
+            id: __props.id ?? __props.name,
+            value: displayValue.value,
+            type: "text",
+            inputmode: "decimal",
+            name: __props.name,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            required: __props.required,
+            "aria-required": __props.required || void 0,
+            "aria-describedby": __props.describedBy,
+            class: vue.normalizeClass([inputClass, "text-right"]),
+            onInput: handleInput,
+            onBlur: handleBlur
+          }, null, 42, _hoisted_2$2)
+        ]),
+        _: 2
+      }, [
+        config.value.position === "prefix" ? {
+          name: "icon",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("span", _hoisted_1$5, vue.toDisplayString(config.value.symbol), 1)
+          ]),
+          key: "0"
+        } : void 0,
+        config.value.position === "suffix" ? {
+          name: "actions",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString(config.value.symbol), 1)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["size", "disabled"]);
+    };
+  }
+});
+const _hoisted_1$4 = ["id", "value", "name", "placeholder", "disabled", "required", "min", "max", "step", "aria-required", "aria-describedby"];
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "PercentInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "0" },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    min: { default: 0 },
+    max: { default: 100 },
+    decimals: { default: 0 },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {}
+  }, {
+    "modelValue": { default: null },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const displayValue = vue.computed({
+      get: () => modelValue.value !== null ? modelValue.value.toString() : "",
+      set: (val) => {
+        if (val === "") {
+          modelValue.value = null;
+          return;
+        }
+        const parsed = parseFloat(val);
+        if (!isNaN(parsed)) {
+          let clamped = parsed;
+          if (props.min !== void 0) clamped = Math.max(clamped, props.min);
+          if (props.max !== void 0) clamped = Math.min(clamped, props.max);
+          modelValue.value = clamped;
+        }
+      }
+    });
+    function handleInput(event) {
+      const target = event.target;
+      displayValue.value = target.value;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        size: __props.size,
+        disabled: __props.disabled
+      }, {
+        default: vue.withCtx(({ inputClass }) => [
+          vue.createElementVNode("input", {
+            id: __props.id ?? __props.name,
+            value: displayValue.value,
+            type: "number",
+            inputmode: "decimal",
+            name: __props.name,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            required: __props.required,
+            min: __props.min,
+            max: __props.max,
+            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)
+        ]),
+        actions: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
+          vue.createElementVNode("span", { class: "text-sm font-medium text-gray-500 dark:text-gray-400" }, "%", -1)
+        ])]),
+        _: 1
+      }, 8, ["size", "disabled"]);
+    };
+  }
+});
+const _hoisted_1$3 = { class: "inline-flex items-center gap-2 bg-gray-50 dark:bg-slate-700 rounded-xl p-1 border border-gray-200 dark:border-slate-600" };
+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({
+  __name: "QuantityInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    min: { default: 1 },
+    max: {},
+    step: { default: 1 },
+    name: {},
+    id: {},
+    required: { type: Boolean }
+  }, {
+    "modelValue": { default: 1 },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const canDecrement = vue.computed(() => {
+      if (props.disabled) return false;
+      if (props.min !== void 0) return modelValue.value > props.min;
+      return true;
+    });
+    const canIncrement = vue.computed(() => {
+      if (props.disabled) return false;
+      if (props.max !== void 0) return modelValue.value < props.max;
+      return true;
+    });
+    function increment() {
+      if (!canIncrement.value) return;
+      const newValue = modelValue.value + props.step;
+      modelValue.value = props.max !== void 0 ? Math.min(newValue, props.max) : newValue;
+    }
+    function decrement() {
+      if (!canDecrement.value) return;
+      const newValue = modelValue.value - props.step;
+      modelValue.value = props.min !== void 0 ? Math.max(newValue, props.min) : newValue;
+    }
+    function handleInput(event) {
+      const target = event.target;
+      const value = parseInt(target.value, 10);
+      if (!isNaN(value)) {
+        let clampedValue = value;
+        if (props.min !== void 0) clampedValue = Math.max(clampedValue, props.min);
+        if (props.max !== void 0) clampedValue = Math.min(clampedValue, props.max);
+        modelValue.value = clampedValue;
+      }
+    }
+    const sizeClasses = vue.computed(() => ({
+      button: {
+        sm: "size-7",
+        md: "size-9",
+        lg: "size-11"
+      }[props.size],
+      icon: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5"
+      }[props.size],
+      input: {
+        sm: "text-sm w-10",
+        md: "text-base w-12",
+        lg: "text-lg w-14"
+      }[props.size]
+    }));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+        vue.createElementVNode("button", {
+          type: "button",
+          disabled: !canDecrement.value,
+          class: vue.normalizeClass([
+            "flex items-center justify-center rounded-lg bg-white dark:bg-slate-600 border border-gray-200 dark:border-slate-500 transition-all",
+            "hover:bg-gray-50 dark:hover:bg-slate-500 hover:border-gray-300 dark:hover:border-slate-400",
+            "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-slate-600",
+            "shadow-sm",
+            sizeClasses.value.button
+          ]),
+          onClick: decrement
+        }, [
+          vue.createVNode(vue.unref(vue$1.Icon), {
+            icon: "lucide:minus",
+            class: vue.normalizeClass(["text-gray-600 dark:text-gray-300", sizeClasses.value.icon])
+          }, null, 8, ["class"])
+        ], 10, _hoisted_2$1),
+        vue.createElementVNode("input", {
+          id: __props.id ?? __props.name,
+          value: modelValue.value,
+          type: "number",
+          name: __props.name,
+          disabled: __props.disabled,
+          required: __props.required,
+          min: __props.min,
+          max: __props.max,
+          class: vue.normalizeClass([
+            "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),
+        vue.createElementVNode("button", {
+          type: "button",
+          disabled: !canIncrement.value,
+          class: vue.normalizeClass([
+            "flex items-center justify-center rounded-lg bg-white dark:bg-slate-600 border border-gray-200 dark:border-slate-500 transition-all",
+            "hover:bg-gray-50 dark:hover:bg-slate-500 hover:border-gray-300 dark:hover:border-slate-400",
+            "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-slate-600",
+            "shadow-sm",
+            sizeClasses.value.button
+          ]),
+          onClick: increment
+        }, [
+          vue.createVNode(vue.unref(vue$1.Icon), {
+            icon: "lucide:plus",
+            class: vue.normalizeClass(["text-gray-600 dark:text-gray-300", sizeClasses.value.icon])
+          }, null, 8, ["class"])
+        ], 10, _hoisted_4)
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = ["id", "name", "placeholder", "disabled", "required", "aria-invalid", "aria-required", "aria-describedby"];
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "URLInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "https://example.com" },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    showValidation: { type: Boolean, default: true },
+    name: {},
+    id: {},
+    required: { type: Boolean },
+    describedBy: {}
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
+    const isValid = vue.computed(() => {
+      if (!modelValue.value) return null;
+      return urlRegex.test(modelValue.value);
+    });
+    const isTouched = vue.ref(false);
+    const showStatus = vue.computed(() => {
+      return props.showValidation && isTouched.value && !!modelValue.value;
+    });
+    function handleBlur() {
+      isTouched.value = true;
+    }
+    function openUrl() {
+      if (isValid.value && modelValue.value) {
+        const url = modelValue.value.startsWith("http") ? modelValue.value : `https://${modelValue.value}`;
+        window.open(url, "_blank");
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$a, {
+        icon: "lucide:link",
+        size: __props.size,
+        disabled: __props.disabled,
+        invalid: showStatus.value && isValid.value === false
+      }, {
+        default: vue.withCtx(({ inputClass }) => [
+          vue.withDirectives(vue.createElementVNode("input", {
+            id: __props.id ?? __props.name,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            type: "url",
+            name: __props.name,
+            placeholder: __props.placeholder,
+            disabled: __props.disabled,
+            required: __props.required,
+            "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), [
+            [vue.vModelText, modelValue.value]
+          ])
+        ]),
+        actions: vue.withCtx(() => [
+          showStatus.value && isValid.value && modelValue.value ? (vue.openBlock(), vue.createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors",
+            title: "Open URL",
+            onClick: openUrl
+          }, [
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              icon: "lucide:external-link",
+              class: "size-4 text-gray-400 hover:text-primary-500"
+            })
+          ])) : showStatus.value && isValid.value === false ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+            key: 1,
+            icon: "lucide:alert-circle",
+            class: "size-5 text-red-500"
+          })) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["size", "disabled", "invalid"]);
+    };
+  }
+});
+const _hoisted_1$1 = ["value", "type", "name", "disabled", "onInput", "onKeydown"];
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "OTPInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    length: { default: 6 },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    autoFocus: { type: Boolean, default: true },
+    name: {},
+    masked: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["complete"], ["update:modelValue"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const inputRefs = vue.ref([]);
+    const digits = vue.computed(() => {
+      const arr = modelValue.value.split("");
+      while (arr.length < props.length) {
+        arr.push("");
+      }
+      return arr.slice(0, props.length);
+    });
+    const sizeClasses = vue.computed(() => ({
+      input: {
+        sm: "size-10 text-lg",
+        md: "size-12 text-xl",
+        lg: "size-14 text-2xl"
+      }[props.size],
+      gap: {
+        sm: "gap-2",
+        md: "gap-3",
+        lg: "gap-4"
+      }[props.size]
+    }));
+    function updateValue(index2, value) {
+      const newDigits = [...digits.value];
+      newDigits[index2] = value.slice(-1);
+      modelValue.value = newDigits.join("");
+      if (modelValue.value.length === props.length && !modelValue.value.includes("")) {
+        emit("complete", modelValue.value);
+      }
+    }
+    function handleInput(event, index2) {
+      const target = event.target;
+      const value = target.value.replace(/\D/g, "");
+      if (value) {
+        updateValue(index2, value);
+        if (index2 < props.length - 1) {
+          vue.nextTick(() => {
+            var _a;
+            (_a = inputRefs.value[index2 + 1]) == null ? void 0 : _a.focus();
+          });
+        }
+      }
+    }
+    function handleKeydown(event, index2) {
+      var _a, _b, _c;
+      const target = event.target;
+      if (event.key === "Backspace") {
+        if (!target.value && index2 > 0) {
+          (_a = inputRefs.value[index2 - 1]) == null ? void 0 : _a.focus();
+        }
+        updateValue(index2, "");
+      } else if (event.key === "ArrowLeft" && index2 > 0) {
+        (_b = inputRefs.value[index2 - 1]) == null ? void 0 : _b.focus();
+      } else if (event.key === "ArrowRight" && index2 < props.length - 1) {
+        (_c = inputRefs.value[index2 + 1]) == null ? void 0 : _c.focus();
+      }
+    }
+    function handlePaste(event) {
+      var _a;
+      event.preventDefault();
+      const pastedData = (_a = event.clipboardData) == null ? void 0 : _a.getData("text").replace(/\D/g, "").slice(0, props.length);
+      if (pastedData) {
+        modelValue.value = pastedData;
+        const focusIndex = Math.min(pastedData.length, props.length - 1);
+        vue.nextTick(() => {
+          var _a2;
+          (_a2 = inputRefs.value[focusIndex]) == null ? void 0 : _a2.focus();
+        });
+      }
+    }
+    function handleFocus(event) {
+      const target = event.target;
+      target.select();
+    }
+    vue.watch(
+      () => modelValue.value,
+      (newValue) => {
+        if (newValue.length === props.length) {
+          emit("complete", newValue);
+        }
+      }
+    );
+    vue.onMounted(() => {
+      var _a;
+      if (props.autoFocus) {
+        (_a = inputRefs.value[0]) == null ? void 0 : _a.focus();
+      }
+    });
+    function setInputRef(el, index2) {
+      if (el) {
+        inputRefs.value[index2] = el;
+      }
+    }
+    __expose({ focus: () => {
+      var _a;
+      return (_a = inputRefs.value[0]) == null ? void 0 : _a.focus();
+    } });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["inline-flex", sizeClasses.value.gap])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(digits.value, (digit, index2) => {
+          return vue.openBlock(), vue.createElementBlock("input", {
+            key: index2,
+            ref_for: true,
+            ref: (el) => setInputRef(el, index2),
+            value: digit,
+            type: __props.masked ? "password" : "text",
+            inputmode: "numeric",
+            name: __props.name ? `${__props.name}-${index2}` : void 0,
+            disabled: __props.disabled,
+            maxlength: "1",
+            autocomplete: "one-time-code",
+            class: vue.normalizeClass([
+              "text-center font-semibold rounded-xl border-2 transition-all",
+              "bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white",
+              "border-gray-200 dark:border-slate-600",
+              "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              digit ? "border-primary-300 dark:border-primary-500/50" : "",
+              sizeClasses.value.input
+            ]),
+            onInput: ($event) => handleInput($event, index2),
+            onKeydown: ($event) => handleKeydown($event, index2),
+            onPaste: handlePaste,
+            onFocus: handleFocus
+          }, null, 42, _hoisted_1$1);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["id", "name", "placeholder", "disabled", "required"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "TagsInput",
+  props: /* @__PURE__ */ vue.mergeModels({
+    placeholder: { default: "Add tag..." },
+    size: { default: "md" },
+    disabled: { type: Boolean },
+    max: {},
+    allowDuplicates: { type: Boolean, default: false },
+    name: {},
+    id: {},
+    required: { type: Boolean }
+  }, {
+    "modelValue": { default: () => [] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const modelValue = vue.useModel(__props, "modelValue");
+    const inputValue = vue.ref("");
+    const inputRef = vue.ref(null);
+    const canAddMore = vue.computed(() => {
+      if (props.max !== void 0) return modelValue.value.length < props.max;
+      return true;
+    });
+    const sizeClasses = vue.computed(() => ({
+      wrapper: {
+        sm: "min-h-9 py-1.5 px-2 gap-1",
+        md: "min-h-11 py-2 px-3 gap-1.5",
+        lg: "min-h-13 py-2.5 px-4 gap-2"
+      }[props.size],
+      tag: {
+        sm: "text-xs px-2 py-0.5",
+        md: "text-sm px-2.5 py-1",
+        lg: "text-base px-3 py-1.5"
+      }[props.size],
+      input: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }[props.size],
+      icon: {
+        sm: "size-3",
+        md: "size-3.5",
+        lg: "size-4"
+      }[props.size]
+    }));
+    function addTag(value) {
+      const trimmed = value.trim();
+      if (!trimmed) return;
+      if (!canAddMore.value) return;
+      if (!props.allowDuplicates && modelValue.value.includes(trimmed)) return;
+      modelValue.value = [...modelValue.value, trimmed];
+      inputValue.value = "";
+    }
+    function removeTag(index2) {
+      if (props.disabled) return;
+      modelValue.value = modelValue.value.filter((_, i) => i !== index2);
+    }
+    function handleKeydown(event) {
+      if (event.key === "Enter" || event.key === ",") {
+        event.preventDefault();
+        addTag(inputValue.value);
+      } else if (event.key === "Backspace" && !inputValue.value && modelValue.value.length > 0) {
+        removeTag(modelValue.value.length - 1);
+      }
+    }
+    function handleBlur() {
+      if (inputValue.value) {
+        addTag(inputValue.value);
+      }
+    }
+    function focusInput() {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    }
+    __expose({ focus: focusInput });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "flex flex-wrap items-center rounded-xl border transition-all cursor-text",
+          "bg-gray-50 dark:bg-slate-700",
+          "border-gray-200 dark:border-slate-600",
+          "focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:bg-white dark:focus-within:bg-slate-600",
+          __props.disabled && "opacity-50 cursor-not-allowed",
+          sizeClasses.value.wrapper
+        ]),
+        onClick: focusInput
+      }, [
+        vue.createVNode(vue.TransitionGroup, {
+          name: "tag",
+          tag: "div",
+          class: "flex flex-wrap gap-1.5"
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(modelValue.value, (tag, index2) => {
+              return vue.openBlock(), vue.createElementBlock("span", {
+                key: tag + index2,
+                class: vue.normalizeClass([
+                  "inline-flex items-center gap-1 rounded-lg font-medium",
+                  "bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300",
+                  sizeClasses.value.tag
+                ])
+              }, [
+                vue.createTextVNode(vue.toDisplayString(tag) + " ", 1),
+                !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 0,
+                  type: "button",
+                  class: "rounded-full hover:bg-primary-200 dark:hover:bg-primary-800/50 transition-colors p-0.5",
+                  onClick: vue.withModifiers(($event) => removeTag(index2), ["stop"])
+                }, [
+                  vue.createVNode(vue.unref(vue$1.Icon), {
+                    icon: "lucide:x",
+                    class: vue.normalizeClass(["text-primary-500", sizeClasses.value.icon])
+                  }, null, 8, ["class"])
+                ], 8, _hoisted_1)) : vue.createCommentVNode("", true)
+              ], 2);
+            }), 128))
+          ]),
+          _: 1
+        }),
+        canAddMore.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+          key: 0,
+          id: __props.id ?? __props.name,
+          ref_key: "inputRef",
+          ref: inputRef,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
+          type: "text",
+          name: __props.name,
+          placeholder: modelValue.value.length === 0 ? __props.placeholder : "",
+          disabled: __props.disabled,
+          required: __props.required && modelValue.value.length === 0,
+          class: vue.normalizeClass([
+            "flex-1 min-w-20 bg-transparent border-none focus:outline-none",
+            "text-gray-900 dark:text-white placeholder-gray-400",
+            sizeClasses.value.input
+          ]),
+          onKeydown: handleKeydown,
+          onBlur: handleBlur
+        }, null, 42, _hoisted_2)), [
+          [vue.vModelText, inputValue.value]
+        ]) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const TagsInput = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7949bfa4"]]);
 exports.Slider = Slider;
-exports._sfc_main = _sfc_main$e;
-exports._sfc_main$1 = _sfc_main$d;
-exports._sfc_main$10 = _sfc_main$3;
-exports._sfc_main$11 = _sfc_main$2;
-exports._sfc_main$12 = _sfc_main$1;
-exports._sfc_main$13 = _sfc_main;
-exports._sfc_main$2 = _sfc_main$c;
-exports._sfc_main$3 = _sfc_main$b;
-exports._sfc_main$4 = _sfc_main$a;
-exports._sfc_main$5 = _sfc_main$9;
-exports._sfc_main$6 = _sfc_main$8;
-exports._sfc_main$7 = _sfc_main$6;
-exports._sfc_main$8 = _sfc_main$5;
-exports._sfc_main$9 = _sfc_main$4;
-//# sourceMappingURL=IconPicker.vue_vue_type_script_setup_true_lang-agY_E72J.cjs.map
+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$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$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