@seed-ship/mcp-ui-solid 2.6.1 → 2.6.3

package/dist/components/FormFieldRenderer.js

@@ -1,7 +1,7 @@
 import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, memo, setProperty, className, runHydrationEvents } from "solid-js/web";
 import { Show, Switch, Match, For, createSignal, onCleanup } from "solid-js";
 import { useConditionalField } from "../hooks/useConditionalField.js";
-var _tmpl$ = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ template(`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ template(`<input>`), _tmpl$4 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$5 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$6 = /* @__PURE__ */ template(`<textarea>`), _tmpl$7 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$8 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$1 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$10 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$11 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$12 = /* @__PURE__ */ template(`<option>`), _tmpl$13 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$15 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-48 overflow-auto">`), _tmpl$16 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$17 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$18 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$19 = /* @__PURE__ */ template(`<div class=relative><input type=text autocomplete=off><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<button type=button class="w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 text-gray-900 dark:text-white">`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ template(`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ template(`<input>`), _tmpl$4 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$5 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$6 = /* @__PURE__ */ template(`<textarea>`), _tmpl$7 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$8 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$0 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$1 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$10 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$11 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$13 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$14 = /* @__PURE__ */ template(`<option>`), _tmpl$15 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$16 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$17 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$18 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$19 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg overflow-hidden"><!$><!/><div class="max-h-72 overflow-y-auto"><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$21 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">&times;`), _tmpl$22 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$24 = /* @__PURE__ */ template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">&#10003;`), _tmpl$26 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`);
 const FormFieldRenderer = (props) => {
   const {
     isVisible
@@ -23,7 +23,7 @@ const FormFieldRenderer = (props) => {
       return isVisible();
     },
     get children() {
-      var _el$ = getNextElement(_tmpl$11), _el$27 = _el$.firstChild, [_el$28, _co$7] = getNextMarker(_el$27.nextSibling), _el$29 = _el$28.nextSibling, [_el$30, _co$8] = getNextMarker(_el$29.nextSibling), _el$31 = _el$30.nextSibling, [_el$32, _co$9] = getNextMarker(_el$31.nextSibling), _el$33 = _el$32.nextSibling, [_el$34, _co$0] = getNextMarker(_el$33.nextSibling);
+      var _el$ = getNextElement(_tmpl$13), _el$32 = _el$.firstChild, [_el$33, _co$8] = getNextMarker(_el$32.nextSibling), _el$34 = _el$33.nextSibling, [_el$35, _co$9] = getNextMarker(_el$34.nextSibling), _el$36 = _el$35.nextSibling, [_el$37, _co$0] = getNextMarker(_el$36.nextSibling), _el$38 = _el$37.nextSibling, [_el$39, _co$1] = getNextMarker(_el$38.nextSibling);
       insert(_el$, createComponent(Show, {
         get when() {
           return memo(() => !!props.field.label)() && props.field.type !== "checkbox";
@@ -42,7 +42,7 @@ const FormFieldRenderer = (props) => {
           effect(() => setAttribute(_el$2, "for", fieldId()));
           return _el$2;
         }
-      }), _el$28, _co$7);
+      }), _el$33, _co$8);
       insert(_el$, createComponent(Switch, {
         get children() {
           return [createComponent(Match, {
@@ -217,11 +217,11 @@ const FormFieldRenderer = (props) => {
                   return props.field.options;
                 },
                 children: (option) => (() => {
-                  var _el$35 = getNextElement(_tmpl$12);
-                  insert(_el$35, () => option.label);
-                  effect(() => setProperty(_el$35, "disabled", option.disabled));
-                  effect(() => setProperty(_el$35, "value", option.value));
-                  return _el$35;
+                  var _el$40 = getNextElement(_tmpl$14);
+                  insert(_el$40, () => option.label);
+                  effect(() => setProperty(_el$40, "disabled", option.disabled));
+                  effect(() => setProperty(_el$40, "value", option.value));
+                  return _el$40;
                 })()
               }), _el$15, _co$4);
               effect((_p$) => {
@@ -337,23 +337,23 @@ const FormFieldRenderer = (props) => {
                   return props.field.options;
                 },
                 children: (option, index) => (() => {
-                  var _el$36 = getNextElement(_tmpl$13), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
-                  _el$37.addEventListener("change", () => props.onChange(option.value));
-                  insert(_el$38, () => option.label);
+                  var _el$41 = getNextElement(_tmpl$15), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling;
+                  _el$42.addEventListener("change", () => props.onChange(option.value));
+                  insert(_el$43, () => option.label);
                   effect((_p$) => {
-                    var _v$57 = props.field.name, _v$58 = `${fieldId()}-${index()}`, _v$59 = props.disabled || option.disabled;
-                    _v$57 !== _p$.e && setAttribute(_el$37, "name", _p$.e = _v$57);
-                    _v$58 !== _p$.t && setAttribute(_el$37, "id", _p$.t = _v$58);
-                    _v$59 !== _p$.a && setProperty(_el$37, "disabled", _p$.a = _v$59);
+                    var _v$62 = props.field.name, _v$63 = `${fieldId()}-${index()}`, _v$64 = props.disabled || option.disabled;
+                    _v$62 !== _p$.e && setAttribute(_el$42, "name", _p$.e = _v$62);
+                    _v$63 !== _p$.t && setAttribute(_el$42, "id", _p$.t = _v$63);
+                    _v$64 !== _p$.a && setProperty(_el$42, "disabled", _p$.a = _v$64);
                     return _p$;
                   }, {
                     e: void 0,
                     t: void 0,
                     a: void 0
                   });
-                  effect(() => setProperty(_el$37, "value", option.value));
-                  effect(() => setProperty(_el$37, "checked", props.value === option.value));
-                  return _el$36;
+                  effect(() => setProperty(_el$42, "value", option.value));
+                  effect(() => setProperty(_el$42, "checked", props.value === option.value));
+                  return _el$41;
                 })()
               }));
               effect((_p$) => {
@@ -369,36 +369,67 @@ const FormFieldRenderer = (props) => {
               });
               return _el$24;
             }
+          }), createComponent(Match, {
+            when: true,
+            get children() {
+              return [(() => {
+                var _el$25 = getNextElement(_tmpl$1);
+                _el$25.$$input = (e) => props.onChange(e.currentTarget.value);
+                effect((_p$) => {
+                  var _v$57 = fieldId(), _v$58 = props.field.name, _v$59 = props.field.placeholder || `(${props.field.type})`, _v$60 = props.disabled, _v$61 = baseInputClass();
+                  _v$57 !== _p$.e && setAttribute(_el$25, "id", _p$.e = _v$57);
+                  _v$58 !== _p$.t && setAttribute(_el$25, "name", _p$.t = _v$58);
+                  _v$59 !== _p$.a && setAttribute(_el$25, "placeholder", _p$.a = _v$59);
+                  _v$60 !== _p$.o && setProperty(_el$25, "disabled", _p$.o = _v$60);
+                  _v$61 !== _p$.i && className(_el$25, _p$.i = _v$61);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0,
+                  a: void 0,
+                  o: void 0,
+                  i: void 0
+                });
+                effect(() => setProperty(_el$25, "value", props.value || ""));
+                runHydrationEvents();
+                return _el$25;
+              })(), (() => {
+                var _el$26 = getNextElement(_tmpl$10), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling, [_el$29, _co$7] = getNextMarker(_el$28.nextSibling);
+                insert(_el$26, () => props.field.type, _el$29, _co$7);
+                return _el$26;
+              })()];
+            }
           })];
         }
-      }), _el$30, _co$8);
+      }), _el$35, _co$9);
       insert(_el$, createComponent(Show, {
         get when() {
           return memo(() => !!props.field.helpText)() && !props.error;
         },
         get children() {
-          var _el$25 = getNextElement(_tmpl$1);
-          insert(_el$25, () => props.field.helpText);
-          return _el$25;
+          var _el$30 = getNextElement(_tmpl$11);
+          insert(_el$30, () => props.field.helpText);
+          return _el$30;
         }
-      }), _el$32, _co$9);
+      }), _el$37, _co$0);
       insert(_el$, createComponent(Show, {
         get when() {
           return props.error;
         },
         get children() {
-          var _el$26 = getNextElement(_tmpl$10);
-          insert(_el$26, () => props.error);
-          effect(() => setAttribute(_el$26, "id", errorId()));
-          return _el$26;
+          var _el$31 = getNextElement(_tmpl$12);
+          insert(_el$31, () => props.error);
+          effect(() => setAttribute(_el$31, "id", errorId()));
+          return _el$31;
         }
-      }), _el$34, _co$0);
+      }), _el$39, _co$1);
       return _el$;
     }
   });
 };
 const MultiSelectField = (props) => {
   const [open, setOpen] = createSignal(false);
+  const [filter, setFilter] = createSignal("");
   const toggle = (val) => {
     const current = props.value || [];
     if (current.includes(val)) {
@@ -414,61 +445,90 @@ const MultiSelectField = (props) => {
     var _a, _b;
     return ((_b = (_a = props.field.options) == null ? void 0 : _a.find((o) => o.value === val)) == null ? void 0 : _b.label) || val;
   };
+  const filteredOptions = () => {
+    const q = filter().toLowerCase();
+    if (!q) return props.field.options || [];
+    return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+  };
   return (() => {
-    var _el$39 = getNextElement(_tmpl$16), _el$44 = _el$39.firstChild, [_el$45, _co$1] = getNextMarker(_el$44.nextSibling), _el$41 = _el$45.nextSibling, _el$42 = _el$41.firstChild, _el$46 = _el$41.nextSibling, [_el$47, _co$10] = getNextMarker(_el$46.nextSibling);
-    insert(_el$39, createComponent(Show, {
+    var _el$44 = getNextElement(_tmpl$20), _el$59 = _el$44.firstChild, [_el$60, _co$13] = getNextMarker(_el$59.nextSibling), _el$46 = _el$60.nextSibling, _el$47 = _el$46.firstChild, _el$61 = _el$46.nextSibling, [_el$62, _co$14] = getNextMarker(_el$61.nextSibling);
+    insert(_el$44, createComponent(Show, {
       get when() {
         return props.value.length > 0;
       },
       get children() {
-        var _el$40 = getNextElement(_tmpl$14);
-        insert(_el$40, createComponent(For, {
+        var _el$45 = getNextElement(_tmpl$16);
+        insert(_el$45, createComponent(For, {
           get each() {
             return props.value;
           },
           children: (val) => (() => {
-            var _el$48 = getNextElement(_tmpl$17), _el$50 = _el$48.firstChild, [_el$51, _co$11] = getNextMarker(_el$50.nextSibling), _el$49 = _el$51.nextSibling;
-            insert(_el$48, () => getLabel(val), _el$51, _co$11);
-            _el$49.$$click = () => removeChip(val);
-            effect(() => setAttribute(_el$49, "aria-label", `Remove ${getLabel(val)}`));
+            var _el$63 = getNextElement(_tmpl$21), _el$65 = _el$63.firstChild, [_el$66, _co$15] = getNextMarker(_el$65.nextSibling), _el$64 = _el$66.nextSibling;
+            insert(_el$63, () => getLabel(val), _el$66, _co$15);
+            _el$64.$$click = () => removeChip(val);
+            effect(() => setAttribute(_el$64, "aria-label", `Remove ${getLabel(val)}`));
             runHydrationEvents();
-            return _el$48;
+            return _el$63;
           })()
         }));
-        return _el$40;
+        return _el$45;
       }
-    }), _el$45, _co$1);
-    _el$41.$$click = () => setOpen(!open());
-    insert(_el$42, (() => {
+    }), _el$60, _co$13);
+    _el$46.$$click = () => {
+      setOpen(!open());
+      if (!open()) setFilter("");
+    };
+    insert(_el$47, (() => {
       var _c$ = memo(() => !!props.value.length);
       return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
     })());
-    insert(_el$39, createComponent(Show, {
+    insert(_el$44, createComponent(Show, {
       get when() {
         return open();
       },
       get children() {
-        var _el$43 = getNextElement(_tmpl$15);
-        insert(_el$43, createComponent(For, {
+        var _el$48 = getNextElement(_tmpl$19), _el$57 = _el$48.firstChild, [_el$58, _co$12] = getNextMarker(_el$57.nextSibling), _el$51 = _el$58.nextSibling, _el$53 = _el$51.firstChild, [_el$54, _co$10] = getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$11] = getNextMarker(_el$55.nextSibling);
+        insert(_el$48, createComponent(Show, {
+          get when() {
+            var _a;
+            return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
+          },
+          get children() {
+            var _el$49 = getNextElement(_tmpl$17), _el$50 = _el$49.firstChild;
+            _el$50.$$input = (e) => setFilter(e.currentTarget.value);
+            effect(() => setProperty(_el$50, "value", filter()));
+            runHydrationEvents();
+            return _el$49;
+          }
+        }), _el$58, _co$12);
+        insert(_el$51, createComponent(For, {
           get each() {
-            return props.field.options;
+            return filteredOptions();
           },
           children: (option) => (() => {
-            var _el$52 = getNextElement(_tmpl$18), _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling;
-            _el$53.addEventListener("change", () => toggle(option.value));
-            insert(_el$54, () => option.label);
-            effect(() => setProperty(_el$53, "checked", (props.value || []).includes(option.value)));
-            return _el$52;
+            var _el$67 = getNextElement(_tmpl$22), _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling;
+            _el$68.addEventListener("change", () => toggle(option.value));
+            insert(_el$69, () => option.label);
+            effect(() => setProperty(_el$68, "checked", (props.value || []).includes(option.value)));
+            return _el$67;
           })()
-        }));
-        return _el$43;
+        }), _el$54, _co$10);
+        insert(_el$51, createComponent(Show, {
+          get when() {
+            return filteredOptions().length === 0;
+          },
+          get children() {
+            return getNextElement(_tmpl$18);
+          }
+        }), _el$56, _co$11);
+        return _el$48;
       }
-    }), _el$47, _co$10);
+    }), _el$62, _co$14);
     effect((_p$) => {
-      var _v$60 = props.disabled, _v$61 = `${props.baseClass} text-left flex items-center justify-between`, _v$62 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
-      _v$60 !== _p$.e && setProperty(_el$41, "disabled", _p$.e = _v$60);
-      _v$61 !== _p$.t && className(_el$41, _p$.t = _v$61);
-      _v$62 !== _p$.a && className(_el$42, _p$.a = _v$62);
+      var _v$65 = props.disabled, _v$66 = `${props.baseClass} text-left flex items-center justify-between`, _v$67 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
+      _v$65 !== _p$.e && setProperty(_el$46, "disabled", _p$.e = _v$65);
+      _v$66 !== _p$.t && className(_el$46, _p$.t = _v$66);
+      _v$67 !== _p$.a && className(_el$47, _p$.a = _v$67);
       return _p$;
     }, {
       e: void 0,
@@ -476,15 +536,17 @@ const MultiSelectField = (props) => {
       a: void 0
     });
     runHydrationEvents();
-    return _el$39;
+    return _el$44;
   })();
 };
 const AutocompleteField = (props) => {
   const [query, setQuery] = createSignal("");
   const [suggestions, setSuggestions] = createSignal([]);
   const [isOpen, setIsOpen] = createSignal(false);
-  const [selectedLabel, setSelectedLabel] = createSignal("");
+  const [selectedLabels, setSelectedLabels] = createSignal(/* @__PURE__ */ new Map());
   let debounceTimer = null;
+  const isMultiple = () => props.field.multiple === true;
+  const selectedValues = () => isMultiple() ? Array.isArray(props.value) ? props.value : [] : [];
   const minChars = () => props.field.minChars ?? 2;
   const debounceMs = () => props.field.debounceMs ?? 300;
   const fetchSuggestions = async (q) => {
@@ -515,8 +577,9 @@ const AutocompleteField = (props) => {
   };
   const handleInput = (value) => {
     setQuery(value);
-    setSelectedLabel("");
-    props.onChange("");
+    if (!isMultiple()) {
+      props.onChange("");
+    }
     if (debounceTimer) clearTimeout(debounceTimer);
     if (value.length < minChars()) {
       setSuggestions([]);
@@ -526,58 +589,120 @@ const AutocompleteField = (props) => {
     debounceTimer = setTimeout(() => fetchSuggestions(value), debounceMs());
   };
   const selectSuggestion = (item) => {
-    props.onChange(item.value);
-    setSelectedLabel(item.label);
-    setQuery(item.label);
-    setIsOpen(false);
-    setSuggestions([]);
+    if (isMultiple()) {
+      const current = selectedValues();
+      if (!current.includes(item.value)) {
+        props.onChange([...current, item.value]);
+        setSelectedLabels((prev) => new Map(prev).set(item.value, item.label));
+      }
+      setQuery("");
+      setSuggestions([]);
+      setIsOpen(false);
+    } else {
+      props.onChange(item.value);
+      setSelectedLabels((prev) => new Map(prev).set(item.value, item.label));
+      setQuery(item.label);
+      setIsOpen(false);
+      setSuggestions([]);
+    }
   };
+  const removeChip = (val) => {
+    props.onChange(selectedValues().filter((v) => v !== val));
+    setSelectedLabels((prev) => {
+      const m = new Map(prev);
+      m.delete(val);
+      return m;
+    });
+  };
+  const getLabel = (val) => selectedLabels().get(val) || val;
   onCleanup(() => {
     if (debounceTimer) clearTimeout(debounceTimer);
   });
   return (() => {
-    var _el$55 = getNextElement(_tmpl$19), _el$56 = _el$55.firstChild, _el$58 = _el$56.nextSibling, [_el$59, _co$12] = getNextMarker(_el$58.nextSibling);
-    _el$56.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
-    _el$56.addEventListener("focus", () => {
+    var _el$70 = getNextElement(_tmpl$24), _el$74 = _el$70.firstChild, [_el$75, _co$16] = getNextMarker(_el$74.nextSibling), _el$72 = _el$75.nextSibling, _el$76 = _el$72.nextSibling, [_el$77, _co$17] = getNextMarker(_el$76.nextSibling);
+    insert(_el$70, createComponent(Show, {
+      get when() {
+        return memo(() => !!isMultiple())() && selectedValues().length > 0;
+      },
+      get children() {
+        var _el$71 = getNextElement(_tmpl$16);
+        insert(_el$71, createComponent(For, {
+          get each() {
+            return selectedValues();
+          },
+          children: (val) => (() => {
+            var _el$78 = getNextElement(_tmpl$21), _el$80 = _el$78.firstChild, [_el$81, _co$18] = getNextMarker(_el$80.nextSibling), _el$79 = _el$81.nextSibling;
+            insert(_el$78, () => getLabel(val), _el$81, _co$18);
+            _el$79.$$click = () => removeChip(val);
+            effect(() => setAttribute(_el$79, "aria-label", `Remove ${getLabel(val)}`));
+            runHydrationEvents();
+            return _el$78;
+          })()
+        }));
+        return _el$71;
+      }
+    }), _el$75, _co$16);
+    _el$72.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
+    _el$72.addEventListener("focus", () => {
       if (suggestions().length) setIsOpen(true);
     });
-    _el$56.$$input = (e) => handleInput(e.currentTarget.value);
-    insert(_el$55, createComponent(Show, {
+    _el$72.$$input = (e) => handleInput(e.currentTarget.value);
+    insert(_el$70, createComponent(Show, {
       get when() {
         return memo(() => !!isOpen())() && suggestions().length > 0;
       },
       get children() {
-        var _el$57 = getNextElement(_tmpl$15);
-        insert(_el$57, createComponent(For, {
+        var _el$73 = getNextElement(_tmpl$23);
+        insert(_el$73, createComponent(For, {
           get each() {
             return suggestions();
           },
-          children: (item) => (() => {
-            var _el$60 = getNextElement(_tmpl$20);
-            _el$60.$$click = () => selectSuggestion(item);
-            _el$60.$$mousedown = (e) => e.preventDefault();
-            insert(_el$60, () => item.label);
-            runHydrationEvents();
-            return _el$60;
-          })()
+          children: (item) => {
+            const isSelected = () => isMultiple() && selectedValues().includes(item.value);
+            return (() => {
+              var _el$82 = getNextElement(_tmpl$26), _el$84 = _el$82.firstChild, [_el$85, _co$19] = getNextMarker(_el$84.nextSibling), _el$86 = _el$85.nextSibling, [_el$87, _co$20] = getNextMarker(_el$86.nextSibling);
+              _el$82.$$click = () => selectSuggestion(item);
+              _el$82.$$mousedown = (e) => e.preventDefault();
+              insert(_el$82, () => item.label, _el$85, _co$19);
+              insert(_el$82, createComponent(Show, {
+                get when() {
+                  return isSelected();
+                },
+                get children() {
+                  return getNextElement(_tmpl$25);
+                }
+              }), _el$87, _co$20);
+              effect((_p$) => {
+                var _v$71 = `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected() ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`, _v$72 = isSelected();
+                _v$71 !== _p$.e && className(_el$82, _p$.e = _v$71);
+                _v$72 !== _p$.t && setProperty(_el$82, "disabled", _p$.t = _v$72);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              runHydrationEvents();
+              return _el$82;
+            })();
+          }
         }));
-        return _el$57;
+        return _el$73;
       }
-    }), _el$59, _co$12);
+    }), _el$77, _co$17);
     effect((_p$) => {
-      var _v$63 = props.field.placeholder, _v$64 = props.disabled, _v$65 = props.baseClass;
-      _v$63 !== _p$.e && setAttribute(_el$56, "placeholder", _p$.e = _v$63);
-      _v$64 !== _p$.t && setProperty(_el$56, "disabled", _p$.t = _v$64);
-      _v$65 !== _p$.a && className(_el$56, _p$.a = _v$65);
+      var _v$68 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$69 = props.disabled, _v$70 = props.baseClass;
+      _v$68 !== _p$.e && setAttribute(_el$72, "placeholder", _p$.e = _v$68);
+      _v$69 !== _p$.t && setProperty(_el$72, "disabled", _p$.t = _v$69);
+      _v$70 !== _p$.a && className(_el$72, _p$.a = _v$70);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    effect(() => setProperty(_el$56, "value", query()));
+    effect(() => setProperty(_el$72, "value", query()));
     runHydrationEvents();
-    return _el$55;
+    return _el$70;
   })();
 };
 delegateEvents(["input", "click", "mousedown"]);