@enos5/enos-vue-default 1.5.9 → 1.6.1

package/dist/components/CustomSelect.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor | null)[];
+        type: (ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor | null)[];
         default: string;
     };
     modelModifiers: {
@@ -21,6 +21,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -85,7 +89,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor | null)[];
+        type: (ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor | null)[];
         default: string;
     };
     modelModifiers: {
@@ -104,6 +108,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -168,11 +176,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    modelValue: string | number | boolean | null;
+    modelValue: string | number | boolean | unknown[] | null;
     modelModifiers: Record<string, any>;
     options: unknown[];
     placeholder: string;
     placeholderDisabled: boolean;
+    multiple: boolean;
     softDeleteAware: boolean;
     labelKey: string;
     valueKey: string;

package/dist/components/InputGroup.vue.d.ts

@@ -57,6 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     softDeleteAware: {
         type: BooleanConstructor;
         default: boolean;
@@ -201,6 +205,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     softDeleteAware: {
         type: BooleanConstructor;
         default: boolean;
@@ -302,6 +310,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     options: unknown[];
     placeholder: string;
     placeholderDisabled: boolean;
+    multiple: boolean;
     softDeleteAware: boolean;
     labelKey: string;
     valueKey: string;

package/dist/components/SelectInput.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor | null)[];
+        type: (ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor | null)[];
         default: string;
     };
     modelModifiers: {
@@ -21,6 +21,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -85,7 +89,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor | null)[];
+        type: (ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor | null)[];
         default: string;
     };
     modelModifiers: {
@@ -104,6 +108,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -168,11 +176,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    modelValue: string | number | boolean | null;
+    modelValue: string | number | boolean | unknown[] | null;
     modelModifiers: Record<string, any>;
     options: unknown[];
     placeholder: string;
     placeholderDisabled: boolean;
+    multiple: boolean;
     softDeleteAware: boolean;
     labelKey: string;
     valueKey: string;

package/dist/index.js

@@ -1,5 +1,5 @@
 import './styles.css';
-import { _, a, b, c, d, e, f, g, h, i, j, k, D, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, S, B, C, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, T, U, V, W, X, Y, Z, $, a0, a1 } from "./plugin-sa3VYroS.js";
+import { _, a, b, c, d, e, f, g, h, i, j, k, D, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, S, B, C, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, T, U, V, W, X, Y, Z, $, a0, a1 } from "./plugin-D5KJd0xy.js";
 export {
   _ as ActionCard,
   a as ActionMessage,

package/dist/index.node.js

@@ -1,4 +1,4 @@
-import { _, a, b, c, d, e, f, g, h, i, j, k, D, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, S, B, C, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, T, U, V, W, X, Y, Z, $, a0, a1 } from "./plugin-sa3VYroS.js";
+import { _, a, b, c, d, e, f, g, h, i, j, k, D, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, A, S, B, C, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, T, U, V, W, X, Y, Z, $, a0, a1 } from "./plugin-D5KJd0xy.js";
 export {
   _ as ActionCard,
   a as ActionMessage,

package/dist/{plugin-sa3VYroS.js → plugin-D5KJd0xy.js}

@@ -3,11 +3,11 @@ import { LockClosedIcon, ChevronDownIcon, PhotoIcon, ExclamationCircleIcon, Excl
 import Editor from "@tinymce/tinymce-vue";
 import { Link } from "@inertiajs/vue3";
 const _hoisted_1$C = { class: "border-b border-neutral-200 bg-neutral-50/80 p-2 dark:border-neutral-800 dark:bg-neutral-900/80" };
-const _hoisted_2$l = {
+const _hoisted_2$m = {
   role: "tablist",
   class: "flex overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-neutral-200 dark:bg-neutral-950 dark:ring-neutral-800"
 };
-const _hoisted_3$e = ["aria-selected", "tabindex", "onClick", "onKeydown"];
+const _hoisted_3$f = ["aria-selected", "tabindex", "onClick", "onKeydown"];
 const _sfc_main$R = {
   __name: "CardTabs",
   props: {
@@ -78,7 +78,7 @@ const _sfc_main$R = {
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$C, [
-        createElementVNode("div", _hoisted_2$l, [
+        createElementVNode("div", _hoisted_2$m, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab, index) => {
             return openBlock(), createElementBlock("button", {
               key: tab.value,
@@ -98,7 +98,7 @@ const _sfc_main$R = {
               ]),
               onClick: ($event) => activateTab(tab.value),
               onKeydown: ($event) => onTabKeydown($event, index)
-            }, toDisplayString(tab.label), 47, _hoisted_3$e);
+            }, toDisplayString(tab.label), 47, _hoisted_3$f);
           }), 128))
         ])
       ]);
@@ -109,7 +109,7 @@ const _hoisted_1$B = {
   key: 0,
   class: "mb-4"
 };
-const _hoisted_2$k = {
+const _hoisted_2$l = {
   key: 1,
   class: "mb-4 text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50"
 };
@@ -186,7 +186,7 @@ const _sfc_main$Q = {
         }, [
           _ctx.$slots.customTitle ? (openBlock(), createElementBlock("div", _hoisted_1$B, [
             renderSlot(_ctx.$slots, "customTitle")
-          ])) : __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$k, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          ])) : __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$l, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["relative", __props.tabs.length > 0 ? "overflow-hidden" : "overflow-visible"])
           }, [
@@ -303,14 +303,14 @@ const _export_sfc = (sfc, props) => {
 };
 const _sfc_main$M = {};
 const _hoisted_1$z = { class: "md:col-span-1 flex justify-between" };
-const _hoisted_2$j = { class: "px-4 sm:px-0" };
-const _hoisted_3$d = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
+const _hoisted_2$k = { class: "px-4 sm:px-0" };
+const _hoisted_3$e = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
 const _hoisted_4$9 = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
 const _hoisted_5$7 = { class: "px-4 sm:px-0" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$z, [
-    createElementVNode("div", _hoisted_2$j, [
-      createElementVNode("h3", _hoisted_3$d, [
+    createElementVNode("div", _hoisted_2$k, [
+      createElementVNode("h3", _hoisted_3$e, [
         renderSlot(_ctx.$slots, "title")
       ]),
       createElementVNode("p", _hoisted_4$9, [
@@ -324,8 +324,8 @@ function _sfc_render(_ctx, _cache) {
 }
 const SectionTitle = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["render", _sfc_render]]);
 const _hoisted_1$y = { class: "md:grid md:grid-cols-3 md:gap-6" };
-const _hoisted_2$i = { class: "mt-5 md:mt-0 md:col-span-2" };
-const _hoisted_3$c = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
+const _hoisted_2$j = { class: "mt-5 md:mt-0 md:col-span-2" };
+const _hoisted_3$d = { class: "rounded-lg border border-neutral-200 bg-white px-4 py-5 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 sm:p-6" };
 const _sfc_main$L = {
   __name: "ActionSection",
   setup(__props) {
@@ -340,8 +340,8 @@ const _sfc_main$L = {
           ]),
           _: 3
         }),
-        createElementVNode("div", _hoisted_2$i, [
-          createElementVNode("div", _hoisted_3$c, [
+        createElementVNode("div", _hoisted_2$j, [
+          createElementVNode("div", _hoisted_3$d, [
             renderSlot(_ctx.$slots, "content")
           ])
         ])
@@ -615,11 +615,11 @@ const _sfc_main$H = {
   }
 };
 const _hoisted_1$t = { class: "relative flex items-center" };
-const _hoisted_2$h = {
+const _hoisted_2$i = {
   key: 0,
   class: "absolute inset-y-0 left-0 flex items-center pointer-events-none pl-3"
 };
-const _hoisted_3$b = ["type", "value", "disabled"];
+const _hoisted_3$c = ["type", "value", "disabled"];
 const _hoisted_4$8 = ["aria-label"];
 const _hoisted_5$6 = {
   key: 0,
@@ -696,7 +696,7 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     __expose({ focus: () => input.value?.focus() });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        isPasswordField.value ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
+        isPasswordField.value ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
           createVNode(unref(LockClosedIcon), { class: "h-5 w-5 text-neutral-400 dark:text-neutral-200" })
         ])) : createCommentVNode("", true),
         createElementVNode("input", mergeProps({
@@ -710,7 +710,7 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value)),
           onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event)),
           onWheel: handleWheel
-        }), null, 16, _hoisted_3$b),
+        }), null, 16, _hoisted_3$c),
         isPasswordField.value ? (openBlock(), createElementBlock("button", {
           key: 1,
           type: "button",
@@ -822,11 +822,16 @@ const _sfc_main$F = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   }
 });
 const _hoisted_1$r = ["onClick"];
+const _hoisted_2$h = {
+  key: 0,
+  class: "flex items-center gap-3"
+};
+const _hoisted_3$b = ["checked", "disabled", "onChange"];
 const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "CustomSelect",
   props: {
     modelValue: {
-      type: [String, Number, Boolean, null],
+      type: [String, Number, Boolean, Array, null],
       default: ""
     },
     modelModifiers: {
@@ -845,6 +850,10 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       type: Boolean,
       default: false
     },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -916,6 +925,7 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const triggerRef = ref(null);
     const dropdownMenuRef = ref(null);
     const dropdownStyle = ref({});
+    const isDarkMode = ref(false);
     const isObjectOption = (option) => typeof option === "object" && option !== null;
     const optionValue = (option) => {
       if (isObjectOption(option)) {
@@ -938,9 +948,11 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       }
       return Boolean(option[props.deletedKey]);
     };
+    const modelValueArray = computed(() => Array.isArray(props.modelValue) ? props.modelValue : []);
     const modelValueAsString = computed(() => String(props.modelValue ?? ""));
+    const modelValueSet = computed(() => new Set(modelValueArray.value.map((value) => String(value))));
     const selectedDeletedOption = computed(() => {
-      if (!props.softDeleteAware || modelValueAsString.value === "") {
+      if (props.multiple || !props.softDeleteAware || modelValueAsString.value === "") {
         return null;
       }
       return props.options.find((option) => optionDeleted(option) && String(optionValue(option) ?? "") === modelValueAsString.value) ?? null;
@@ -951,7 +963,39 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       }
       return props.options.filter((option) => !optionDeleted(option));
     });
+    const selectedDeletedOptions = computed(() => {
+      if (!props.softDeleteAware || !props.multiple || modelValueSet.value.size === 0) {
+        return [];
+      }
+      return props.options.filter((option) => optionDeleted(option) && modelValueSet.value.has(String(optionValue(option) ?? "")));
+    });
+    const multipleOptions = computed(() => {
+      if (!props.multiple) {
+        return availableOptions.value;
+      }
+      const seen = /* @__PURE__ */ new Set();
+      return [...selectedDeletedOptions.value, ...availableOptions.value].filter((option) => {
+        const key = String(optionValue(option) ?? "");
+        if (seen.has(key)) {
+          return false;
+        }
+        seen.add(key);
+        return true;
+      });
+    });
+    const selectedMultipleOptions = computed(() => {
+      if (!props.multiple || modelValueSet.value.size === 0) {
+        return [];
+      }
+      return multipleOptions.value.filter((option) => modelValueSet.value.has(String(optionValue(option) ?? "")));
+    });
     const displayText = computed(() => {
+      if (props.multiple) {
+        if (selectedMultipleOptions.value.length === 0) {
+          return props.placeholder;
+        }
+        return selectedMultipleOptions.value.map((option) => optionText(option)).join(", ");
+      }
       if (props.modelValue === null || props.modelValue === void 0 || props.modelValue === "" && !props.options.some((option) => optionValue(option) === "")) {
         return props.placeholder;
       }
@@ -970,6 +1014,8 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       }
       return value;
     };
+    const normalizeEmittedValues = (values) => values.map((value) => normalizeEmittedValue(value));
+    const optionIsSelected = (option) => modelValueSet.value.has(String(optionValue(option) ?? ""));
     const toggleDropdown = () => {
       if (!props.disabled) {
         isOpen.value = !isOpen.value;
@@ -982,10 +1028,21 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
     const selectPlaceholder = () => {
       if (!props.placeholderDisabled) {
-        emit("update:modelValue", normalizeEmittedValue(""));
+        emit("update:modelValue", props.multiple ? [] : normalizeEmittedValue(""));
         isOpen.value = false;
       }
     };
+    const toggleMultipleOption = (option) => {
+      const normalizedValue = normalizeEmittedValue(optionValue(option));
+      const currentValues = [...modelValueArray.value];
+      const selectedIndex = currentValues.findIndex((value) => String(value) === String(normalizedValue));
+      if (selectedIndex >= 0) {
+        currentValues.splice(selectedIndex, 1);
+      } else {
+        currentValues.push(normalizedValue);
+      }
+      emit("update:modelValue", normalizeEmittedValues(currentValues));
+    };
     const updateDropdownPosition = () => {
       if (!triggerRef.value) {
         return;
@@ -1014,7 +1071,16 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         isOpen.value = false;
       }
     };
+    const syncDarkMode = () => {
+      if (rootRef.value?.closest(".dark")) {
+        isDarkMode.value = true;
+        return;
+      }
+      isDarkMode.value = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
+    };
+    const darkTextStyle = computed(() => isDarkMode.value ? { color: "#ffffff" } : null);
     onMounted(() => {
+      syncDarkMode();
       document.addEventListener("click", closeDropdown);
       window.addEventListener("resize", updateDropdownPosition);
       window.addEventListener("scroll", updateDropdownPosition, true);
@@ -1028,6 +1094,7 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       if (!open) {
         return;
       }
+      syncDarkMode();
       await nextTick();
       updateDropdownPosition();
     });
@@ -1043,14 +1110,16 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           ref: triggerRef,
           class: [
             __props.baseClass,
-            selectedDeletedOption.value ? __props.deletedSelectedClass : __props.normalTextClass,
+            selectedDeletedOption.value || __props.multiple && selectedMultipleOptions.value.some(optionDeleted) ? __props.deletedSelectedClass : __props.normalTextClass,
+            { "text-neutral-50": isDarkMode.value && !(selectedDeletedOption.value || __props.multiple && selectedMultipleOptions.value.some(optionDeleted)) },
             "flex items-center justify-between cursor-pointer",
             unref(attrs).class
           ]
         }, unref(attrs), { tabindex: "0" }), [
           createElementVNode("span", {
-            class: normalizeClass(!__props.modelValue && __props.placeholder ? __props.placeholderClass : null)
-          }, toDisplayString(displayText.value), 3),
+            class: normalizeClass((__props.multiple && selectedMultipleOptions.value.length === 0 || !__props.multiple && !__props.modelValue) && __props.placeholder ? __props.placeholderClass : null),
+            style: normalizeStyle(darkTextStyle.value)
+          }, toDisplayString(displayText.value), 7),
           createVNode(unref(ChevronDownIcon), {
             class: normalizeClass(["size-5 text-neutral-400 transition-transform dark:text-neutral-200", { "rotate-180": isOpen.value }])
           }, null, 8, ["class"])
@@ -1069,41 +1138,69 @@ const _sfc_main$E = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 key: 0,
                 ref_key: "dropdownMenuRef",
                 ref: dropdownMenuRef,
-                class: normalizeClass(__props.dropdownClass),
+                class: normalizeClass({ dark: isDarkMode.value }),
                 style: normalizeStyle(dropdownStyle.value)
               }, [
-                __props.placeholder ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass([
-                    __props.dropdownOptionClass,
-                    __props.placeholderClass,
-                    { "text-gray-400": !__props.modelValue }
-                  ]),
-                  onClick: withModifiers(selectPlaceholder, ["stop"])
-                }, toDisplayString(__props.placeholder), 3)) : createCommentVNode("", true),
-                selectedDeletedOption.value ? (openBlock(), createElementBlock("div", {
-                  key: 1,
-                  class: normalizeClass([
-                    __props.dropdownOptionClass,
-                    __props.deletedOptionClass,
-                    __props.dropdownSelectedClass
-                  ])
-                }, toDisplayString(optionText(selectedDeletedOption.value)), 3)) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(availableOptions.value, (option) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: String(optionValue(option)),
+                createElementVNode("div", {
+                  class: normalizeClass([__props.dropdownClass, { "bg-neutral-950 border-neutral-800": isDarkMode.value }])
+                }, [
+                  __props.placeholder && !__props.multiple ? (openBlock(), createElementBlock("div", {
+                    key: 0,
                     class: normalizeClass([
                       __props.dropdownOptionClass,
-                      __props.optionClass,
-                      {
-                        [__props.dropdownSelectedClass]: optionValue(option) === __props.modelValue || String(optionValue(option)) === String(__props.modelValue),
-                        "rounded-b-lg": option === availableOptions.value[availableOptions.value.length - 1] && !__props.placeholder,
-                        "rounded-lg": !__props.placeholder && availableOptions.value.length === 1
-                      }
+                      __props.placeholderClass,
+                      { "text-gray-400": !__props.modelValue }
                     ]),
-                    onClick: withModifiers(($event) => selectOption(option), ["stop"])
-                  }, toDisplayString(optionText(option)), 11, _hoisted_1$r);
-                }), 128))
+                    onClick: withModifiers(selectPlaceholder, ["stop"])
+                  }, [
+                    createElementVNode("span", {
+                      style: normalizeStyle(darkTextStyle.value)
+                    }, toDisplayString(__props.placeholder), 5)
+                  ], 2)) : createCommentVNode("", true),
+                  selectedDeletedOption.value ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass([
+                      __props.dropdownOptionClass,
+                      __props.deletedOptionClass,
+                      __props.dropdownSelectedClass
+                    ])
+                  }, toDisplayString(optionText(selectedDeletedOption.value)), 3)) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.multiple ? multipleOptions.value : availableOptions.value, (option) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: String(optionValue(option)),
+                      class: normalizeClass([
+                        __props.dropdownOptionClass,
+                        optionDeleted(option) ? __props.deletedOptionClass : __props.optionClass,
+                        { "text-neutral-50": isDarkMode.value && !optionDeleted(option) },
+                        {
+                          [__props.dropdownSelectedClass]: __props.multiple ? optionIsSelected(option) : optionValue(option) === __props.modelValue || String(optionValue(option)) === String(__props.modelValue),
+                          "rounded-b-lg": option === availableOptions.value[availableOptions.value.length - 1] && !__props.placeholder,
+                          "rounded-lg": !__props.placeholder && availableOptions.value.length === 1
+                        }
+                      ]),
+                      onClick: withModifiers(($event) => __props.multiple ? toggleMultipleOption(option) : selectOption(option), ["stop"])
+                    }, [
+                      __props.multiple ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
+                        createElementVNode("input", {
+                          type: "checkbox",
+                          class: "h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900",
+                          checked: optionIsSelected(option),
+                          disabled: __props.disabled,
+                          tabindex: "-1",
+                          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                          }, ["stop"])),
+                          onChange: withModifiers(($event) => toggleMultipleOption(option), ["stop"])
+                        }, null, 40, _hoisted_3$b),
+                        createElementVNode("span", {
+                          style: normalizeStyle(darkTextStyle.value)
+                        }, toDisplayString(optionText(option)), 5)
+                      ])) : (openBlock(), createElementBlock("span", {
+                        key: 1,
+                        style: normalizeStyle(darkTextStyle.value)
+                      }, toDisplayString(optionText(option)), 5))
+                    ], 10, _hoisted_1$r);
+                  }), 128))
+                ], 2)
               ], 6)) : createCommentVNode("", true)
             ]))
           ]),
@@ -1117,7 +1214,7 @@ const _sfc_main$D = {
   __name: "SelectInput",
   props: {
     modelValue: {
-      type: [String, Number, Boolean, null],
+      type: [String, Number, Boolean, Array, null],
       default: ""
     },
     modelModifiers: {
@@ -1136,6 +1233,10 @@ const _sfc_main$D = {
       type: Boolean,
       default: false
     },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -1162,39 +1263,39 @@ const _sfc_main$D = {
     },
     baseClass: {
       type: [String, Array, Object],
-      default: "block w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+      default: "block w-full rounded-lg border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50 dark:focus:border-neutral-100 dark:focus:ring-neutral-100/10"
     },
     normalTextClass: {
       type: [String, Array, Object],
-      default: "text-slate-900"
+      default: "text-slate-900 dark:text-neutral-50"
     },
     deletedSelectedClass: {
       type: [String, Array, Object],
-      default: "text-red-600"
+      default: "text-red-600 dark:text-neutral-100"
     },
     optionClass: {
       type: [String, Array, Object],
-      default: "text-slate-900"
+      default: "text-slate-900 dark:text-neutral-50"
     },
     deletedOptionClass: {
       type: [String, Array, Object],
-      default: "text-rose-700"
+      default: "text-rose-700 dark:text-neutral-100"
     },
     placeholderClass: {
       type: [String, Array, Object],
-      default: "text-slate-500"
+      default: "text-slate-500 dark:text-neutral-200"
     },
     dropdownClass: {
       type: [String, Array, Object],
-      default: "bg-white/95 border border-slate-200 rounded-xl shadow-xl max-h-60 overflow-auto z-50 backdrop-blur-sm"
+      default: "bg-white border border-slate-200 rounded-xl shadow-xl max-h-60 overflow-auto z-50 backdrop-blur-sm dark:bg-neutral-950 dark:border-neutral-800"
     },
     dropdownOptionClass: {
       type: [String, Array, Object],
-      default: "px-4 py-3 hover:bg-slate-100 cursor-pointer transition-colors"
+      default: "px-4 py-3 hover:bg-slate-100 cursor-pointer transition-colors dark:hover:bg-neutral-900"
     },
     dropdownSelectedClass: {
       type: [String, Array, Object],
-      default: "bg-blue-50 text-blue-700 font-medium"
+      default: "bg-blue-50 text-blue-700 font-medium dark:bg-neutral-900 dark:text-neutral-50"
     }
   },
   emits: ["update:modelValue"],
@@ -1207,6 +1308,7 @@ const _sfc_main$D = {
         options: __props.options,
         placeholder: __props.placeholder,
         "placeholder-disabled": __props.placeholderDisabled,
+        multiple: __props.multiple,
         disabled: __props.disabled,
         "soft-delete-aware": __props.softDeleteAware,
         "label-key": __props.labelKey,
@@ -1223,7 +1325,7 @@ const _sfc_main$D = {
         "dropdown-option-class": __props.dropdownOptionClass,
         "dropdown-selected-class": __props.dropdownSelectedClass,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
-      }, _ctx.$attrs), null, 16, ["model-value", "model-modifiers", "options", "placeholder", "placeholder-disabled", "disabled", "soft-delete-aware", "label-key", "value-key", "deleted-key", "option-label", "base-class", "normal-text-class", "deleted-selected-class", "option-class", "deleted-option-class", "placeholder-class", "dropdown-class", "dropdown-option-class", "dropdown-selected-class"]);
+      }, _ctx.$attrs), null, 16, ["model-value", "model-modifiers", "options", "placeholder", "placeholder-disabled", "multiple", "disabled", "soft-delete-aware", "label-key", "value-key", "deleted-key", "option-label", "base-class", "normal-text-class", "deleted-selected-class", "option-class", "deleted-option-class", "placeholder-class", "dropdown-class", "dropdown-option-class", "dropdown-selected-class"]);
     };
   }
 };
@@ -1814,6 +1916,10 @@ const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       type: Boolean,
       default: false
     },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
     softDeleteAware: {
       type: Boolean,
       default: false
@@ -1982,6 +2088,7 @@ const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         options: props.options,
         placeholder: props.placeholder,
         placeholderDisabled: props.placeholderDisabled,
+        multiple: props.multiple,
         disabled: props.disabled,
         softDeleteAware: props.softDeleteAware,
         labelKey: props.labelKey,
@@ -4766,4 +4873,4 @@ export {
   _sfc_main$z as y,
   _sfc_main$x as z
 };
-//# sourceMappingURL=plugin-sa3VYroS.js.map
+//# sourceMappingURL=plugin-D5KJd0xy.js.map