@pathscale/ui 1.2.1 → 1.2.2

package/dist/components/combo-box/ComboBox.js

@@ -0,0 +1,741 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ComboBox.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__ from "./ComboBox.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>No matching options"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=option tabindex=-1 data-slot=combobox-option><span>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span><span>");
+const ComboBoxContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const normalizeKey = (key)=>null == key ? null : String(key);
+const toOptionKey = (key, index)=>{
+    const safeKey = key.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+    return safeKey.length > 0 ? safeKey : `option-${index}`;
+};
+const defaultFilter = (textValue, inputValue)=>{
+    if (0 === inputValue.trim().length) return true;
+    return textValue.toLowerCase().includes(inputValue.trim().toLowerCase());
+};
+const extractItemKey = (item, index)=>{
+    if (item && "object" == typeof item) {
+        const record = item;
+        if (null != record.key) return String(record.key);
+        if (null != record.id) return String(record.id);
+    }
+    return String(index);
+};
+const extractItemText = (item, fallbackKey)=>{
+    if (item && "object" == typeof item) {
+        const record = item;
+        if ("string" == typeof record.textValue) return record.textValue;
+        if ("string" == typeof record.label) return record.label;
+    }
+    return fallbackKey;
+};
+const extractItemDisabled = (item)=>{
+    if (!item || "object" != typeof item) return false;
+    return Boolean(item.disabled);
+};
+const ComboBoxRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "startIcon",
+        "endIcon",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "items",
+        "selectedKey",
+        "defaultSelectedKey",
+        "onSelectionChange",
+        "inputValue",
+        "defaultInputValue",
+        "onInputChange",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "fullWidth",
+        "variant",
+        "menuTrigger",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "allowsCustomValue",
+        "placeholder",
+        "name",
+        "isRequired",
+        "required",
+        "defaultFilter",
+        "itemKey",
+        "itemTextValue",
+        "itemDisabled",
+        "onFocusOut",
+        "ref"
+    ]);
+    const listBoxId = `${(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)()}-listbox`;
+    const [internalSelectedKey, setInternalSelectedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(normalizeKey(local.defaultSelectedKey));
+    const [internalInputValue, setInternalInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultInputValue ?? "");
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
+    const [activeKey, setActiveKeySignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    let rootRef;
+    let inputRef;
+    const variant = ()=>local.variant ?? "primary";
+    const menuTrigger = ()=>local.menuTrigger ?? "focus";
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const isRequired = ()=>Boolean(local.isRequired) || Boolean(local.required);
+    const isOpen = ()=>void 0 !== local.isOpen ? Boolean(local.isOpen) : internalOpen();
+    const selectedKey = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.selectedKey ? normalizeKey(local.selectedKey) : internalSelectedKey());
+    const inputValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.inputValue ? local.inputValue : internalInputValue());
+    const normalizedItems = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(local.items ?? []).map((item, index)=>{
+            const baseKey = null != local.itemKey ? String(local.itemKey(item, index)) : extractItemKey(item, index);
+            const textValue = null != local.itemTextValue ? local.itemTextValue(item, index) : extractItemText(item, baseKey);
+            const disabled = null != local.itemDisabled ? Boolean(local.itemDisabled(item, index)) : extractItemDisabled(item);
+            return {
+                key: baseKey,
+                textValue,
+                disabled,
+                item
+            };
+        }));
+    const selectedItem = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const key = selectedKey();
+        if (!key) return;
+        return normalizedItems().find((item)=>item.key === key);
+    });
+    const filteredItems = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const query = inputValue();
+        const filter = local.defaultFilter ?? defaultFilter;
+        return normalizedItems().filter((item)=>filter(item.textValue, query));
+    });
+    const getEnabledItems = ()=>filteredItems().filter((item)=>!item.disabled);
+    const setSelectedKey = (nextKey)=>{
+        if (void 0 === local.selectedKey) setInternalSelectedKey(nextKey);
+        local.onSelectionChange?.(nextKey);
+    };
+    const setInputValue = (nextValue)=>{
+        if (void 0 === local.inputValue) setInternalInputValue(nextValue);
+        local.onInputChange?.(nextValue);
+    };
+    const setOpen = (next, options)=>{
+        if (next && isDisabled()) return;
+        if (void 0 === local.isOpen) setInternalOpen(next);
+        local.onOpenChange?.(next);
+        if (!next && options?.focusInput) queueMicrotask(()=>{
+            inputRef?.focus();
+        });
+    };
+    const focusBoundary = (target)=>{
+        const enabledItems = getEnabledItems();
+        if (!enabledItems.length) return void setActiveKeySignal(null);
+        if ("selected" === target) {
+            const selected = enabledItems.find((item)=>item.key === selectedKey());
+            setActiveKeySignal((selected ?? enabledItems[0]).key);
+            return;
+        }
+        setActiveKeySignal("first" === target ? enabledItems[0].key : enabledItems[enabledItems.length - 1].key);
+    };
+    const focusNext = (direction)=>{
+        const enabledItems = getEnabledItems();
+        if (!enabledItems.length) return void setActiveKeySignal(null);
+        const current = activeKey();
+        const currentIndex = enabledItems.findIndex((item)=>item.key === current);
+        if (currentIndex < 0) return void focusBoundary(1 === direction ? "first" : "last");
+        const nextIndex = (currentIndex + direction + enabledItems.length) % enabledItems.length;
+        setActiveKeySignal(enabledItems[nextIndex].key);
+    };
+    const selectKey = (key)=>{
+        const item = normalizedItems().find((entry)=>entry.key === key);
+        if (!item || item.disabled || isDisabled()) return;
+        setSelectedKey(item.key);
+        setInputValue(item.textValue);
+        setActiveKeySignal(item.key);
+        setOpen(false, {
+            focusInput: true
+        });
+    };
+    const closeAndCommit = ()=>{
+        setOpen(false);
+        setActiveKeySignal(null);
+        if (!local.allowsCustomValue) {
+            const selected = selectedItem();
+            setInputValue(selected?.textValue ?? "");
+        }
+    };
+    const handleFocusOut = (event)=>{
+        invokeEventHandler(local.onFocusOut, event);
+        if (event.defaultPrevented) return;
+        const nextTarget = event.relatedTarget;
+        if (rootRef?.contains(nextTarget)) return;
+        closeAndCommit();
+    };
+    const getOptionId = (key)=>`${listBoxId}-${toOptionKey(key, 0)}`;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (void 0 !== local.inputValue) return;
+        const selected = selectedItem();
+        if (!selected) return;
+        if (internalInputValue() !== selected.textValue) setInternalInputValue(selected.textValue);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!isOpen()) return;
+        const enabledItems = getEnabledItems();
+        if (!enabledItems.length) return void setActiveKeySignal(null);
+        const currentKey = activeKey();
+        if (currentKey && enabledItems.some((item)=>item.key === currentKey)) return;
+        const selected = enabledItems.find((item)=>item.key === selectedKey());
+        setActiveKeySignal((selected ?? enabledItems[0]).key);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        const handlePointerDown = (event)=>{
+            if (!rootRef) return;
+            if (rootRef.contains(event.target)) return;
+            closeAndCommit();
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+        });
+    });
+    const hiddenValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const currentKey = selectedKey();
+        if (currentKey) return currentKey;
+        if (local.allowsCustomValue) return inputValue();
+        return "";
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxContext.Provider, {
+        value: {
+            variant,
+            fullWidth,
+            isDisabled,
+            isInvalid,
+            isRequired,
+            isOpen,
+            inputValue,
+            selectedKey,
+            selectedTextValue: ()=>selectedItem()?.textValue,
+            activeKey,
+            filteredItems,
+            listBoxId,
+            menuTrigger,
+            setOpen,
+            toggleOpen: ()=>setOpen(!isOpen()),
+            setSelectedKey,
+            setInputValue,
+            setActiveKey: setActiveKeySignal,
+            selectKey,
+            focusNext,
+            focusBoundary,
+            getOptionId,
+            attachInputRef: (node)=>{
+                inputRef = node;
+            }
+        },
+        get children () {
+            var _el$ = _tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+                rootRef = node;
+                if ("function" == typeof local.ref) local.ref(node);
+            }, _el$);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Root.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Root.flag.fullWidth, local.class, local.className)
+                }), {
+                "data-slot": "combobox",
+                get ["data-open"] () {
+                    return isOpen() ? "true" : "false";
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                onFocusOut: handleFocusOut
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return local.name;
+                },
+                get children () {
+                    var _el$2 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "name", local.name));
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.value = hiddenValue());
+                    return _el$2;
+                }
+            }), null);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxInputGroup, {
+                        get children () {
+                            return [
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                    get when () {
+                                        return local.startIcon;
+                                    },
+                                    get children () {
+                                        var _el$3 = _tmpl$3();
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.base, __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.start)
+                                            }), {
+                                            "data-slot": "combobox-start-icon"
+                                        }), false, true);
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startIcon);
+                                        return _el$3;
+                                    }
+                                }),
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxInput, {
+                                    get placeholder () {
+                                        return local.placeholder;
+                                    },
+                                    get required () {
+                                        return isRequired();
+                                    }
+                                }),
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxTrigger, {
+                                    get endIcon () {
+                                        return local.endIcon;
+                                    }
+                                })
+                            ];
+                        }
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxPopover, {
+                        get children () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxList, {});
+                        }
+                    })
+                ], null);
+            return _el$;
+        }
+    });
+};
+const ComboBoxInputGroup = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ComboBoxContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.InputGroup.base, context?.fullWidth() && __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.InputGroup.flag.fullWidth, local.class, local.className)
+            }), {
+            "data-slot": "combobox-input-group",
+            get ["data-disabled"] () {
+                return context?.isDisabled() ? "true" : void 0;
+            },
+            get ["data-invalid"] () {
+                return context?.isInvalid() ? "true" : void 0;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const ComboBoxInput = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ComboBoxContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onInput",
+        "onKeyDown",
+        "onFocus",
+        "onBlur",
+        "ref",
+        "required"
+    ]);
+    const handleInput = (event)=>{
+        invokeEventHandler(local.onInput, event);
+        if (event.defaultPrevented) return;
+        const nextValue = event.currentTarget.value;
+        context?.setInputValue(nextValue);
+        const selectedTextValue = context?.selectedTextValue();
+        if (context?.selectedKey() != null && selectedTextValue !== nextValue) context?.setSelectedKey(null);
+        if ((context?.menuTrigger() ?? "focus") !== "manual") context?.setOpen(true);
+    };
+    const handleFocus = (event)=>{
+        invokeEventHandler(local.onFocus, event);
+        if (event.defaultPrevented) return;
+        if ((context?.menuTrigger() ?? "focus") === "focus") context?.setOpen(true);
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        const isOpen = context?.isOpen() ?? false;
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            if (!isOpen) {
+                context?.setOpen(true);
+                context?.focusBoundary("selected");
+                return;
+            }
+            context?.focusNext(1);
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            if (!isOpen) {
+                context?.setOpen(true);
+                context?.focusBoundary("selected");
+                return;
+            }
+            context?.focusNext(-1);
+            return;
+        }
+        if ("Home" === event.key && isOpen) {
+            event.preventDefault();
+            context?.focusBoundary("first");
+            return;
+        }
+        if ("End" === event.key && isOpen) {
+            event.preventDefault();
+            context?.focusBoundary("last");
+            return;
+        }
+        if ("Escape" === event.key) {
+            event.preventDefault();
+            context?.setOpen(false);
+            return;
+        }
+        if ("Enter" === event.key && isOpen) {
+            const key = context?.activeKey();
+            if (!key) return;
+            event.preventDefault();
+            context?.selectKey(key);
+            return;
+        }
+        if ("Tab" === event.key) context?.setOpen(false);
+    };
+    const activeOptionId = ()=>{
+        const activeKey = context?.activeKey();
+        if (!context?.isOpen() || !activeKey) return;
+        return context.getOptionId(activeKey);
+    };
+    return (()=>{
+        var _el$5 = _tmpl$4();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+            context?.attachInputRef(node);
+            if ("function" == typeof local.ref) local.ref(node);
+        }, _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            get ["aria-controls"] () {
+                return context?.listBoxId;
+            },
+            get ["aria-expanded"] () {
+                return context?.isOpen() ? "true" : "false";
+            },
+            "aria-autocomplete": "list",
+            get ["aria-activedescendant"] () {
+                return activeOptionId();
+            },
+            get ["aria-disabled"] () {
+                return context?.isDisabled() ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return context?.isInvalid() ? "true" : void 0;
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Input.base, local.class, local.className)
+            }), {
+            "data-slot": "combobox-input",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get value () {
+                return context?.inputValue() ?? "";
+            },
+            get disabled () {
+                return context?.isDisabled();
+            },
+            get required () {
+                return local.required ?? context?.isRequired();
+            },
+            onInput: handleInput,
+            onFocus: handleFocus,
+            onBlur: (event)=>invokeEventHandler(local.onBlur, event),
+            onKeyDown: handleKeyDown
+        }), false, false);
+        return _el$5;
+    })();
+};
+const ComboBoxTrigger = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ComboBoxContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "startIcon",
+        "endIcon",
+        "onClick"
+    ]);
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        context?.toggleOpen();
+    };
+    return (()=>{
+        var _el$6 = _tmpl$5();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "button"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Trigger.base, local.class, local.className)
+            }), {
+            "data-slot": "combobox-trigger",
+            get ["data-open"] () {
+                return context?.isOpen() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return context?.isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return context?.isDisabled() ? "true" : void 0;
+            },
+            "aria-haspopup": "listbox",
+            get ["aria-expanded"] () {
+                return context?.isOpen() ? "true" : "false";
+            },
+            get ["aria-controls"] () {
+                return context?.listBoxId;
+            },
+            "aria-label": "Toggle options",
+            onClick: handleClick
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
+            return ()=>_c$() ? (()=>{
+                    var _el$7 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.base, __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.start)
+                        }), {
+                        "data-slot": "combobox-trigger-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.startIcon);
+                    return _el$7;
+                })() : null;
+        })(), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (()=>{
+            var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+            return ()=>_c$2() ? (()=>{
+                    var _el$8 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.base, __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.end, __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Trigger.icon)
+                        }), {
+                        "data-slot": "combobox-trigger-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.endIcon);
+                    return _el$8;
+                })() : null;
+        })(), null);
+        return _el$6;
+    })();
+};
+const ComboBoxPopover = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ComboBoxContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Popover.base, local.class, local.className)
+            }), {
+            "data-slot": "combobox-popover",
+            get ["data-open"] () {
+                return context?.isOpen() ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ComboBoxList, {}));
+        return _el$9;
+    })();
+};
+const ComboBoxList = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ComboBoxContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "renderEmptyState",
+        "endIcon"
+    ]);
+    const items = ()=>context?.filteredItems() ?? [];
+    return (()=>{
+        var _el$0 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return context?.listBoxId;
+            },
+            role: "listbox"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.List.base, local.class, local.className)
+            }), {
+            "data-slot": "combobox-list",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return items().length > 0;
+            },
+            get fallback () {
+                return local.renderEmptyState?.() ?? (()=>{
+                    var _el$1 = _tmpl$6();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.List.empty
+                        }), {
+                        "data-slot": "combobox-empty-state"
+                    }), false, true);
+                    return _el$1;
+                })();
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    get each () {
+                        return items();
+                    },
+                    children: (item)=>{
+                        const selected = ()=>context?.selectedKey() === item.key;
+                        const active = ()=>context?.activeKey() === item.key;
+                        const state = {
+                            key: item.key,
+                            textValue: item.textValue,
+                            isSelected: selected(),
+                            isActive: active(),
+                            isDisabled: item.disabled,
+                            item: item.item
+                        };
+                        return (()=>{
+                            var _el$10 = _tmpl$7(), _el$11 = _el$10.firstChild;
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+                                get id () {
+                                    return context?.getOptionId(item.key);
+                                },
+                                get ["aria-selected"] () {
+                                    return selected() ? "true" : "false";
+                                },
+                                get ["aria-disabled"] () {
+                                    return item.disabled ? "true" : void 0;
+                                },
+                                get ["data-key"] () {
+                                    return item.key;
+                                },
+                                get ["data-selected"] () {
+                                    return selected() ? "true" : "false";
+                                },
+                                get ["data-active"] () {
+                                    return active() ? "true" : "false";
+                                },
+                                get ["data-disabled"] () {
+                                    return item.disabled ? "true" : "false";
+                                }
+                            }, ()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Option.base
+                                }), {
+                                onMouseDown: (event)=>event.preventDefault(),
+                                onMouseEnter: ()=>{
+                                    if (item.disabled) return;
+                                    context?.setActiveKey(item.key);
+                                },
+                                onClick: ()=>{
+                                    if (item.disabled) return;
+                                    context?.selectKey(item.key);
+                                }
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Option.label
+                                })), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, (()=>{
+                                var _c$3 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"function" == typeof local.children);
+                                return ()=>_c$3() ? local.children(state) : item.textValue;
+                            })());
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, (()=>{
+                                var _c$4 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
+                                return ()=>_c$4() ? (()=>{
+                                        var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild;
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                                class: __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Option.indicator
+                                            }), {
+                                            "aria-hidden": "true"
+                                        }), false, true);
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.base, __WEBPACK_EXTERNAL_MODULE__ComboBox_classes_js_713bff32__.CLASSES.Icon.end)
+                                            }), {
+                                            "data-slot": "combobox-option-end-icon"
+                                        }), false, true);
+                                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, ()=>local.endIcon);
+                                        return _el$12;
+                                    })() : null;
+                            })(), null);
+                            return _el$10;
+                        })();
+                    }
+                });
+            }
+        }));
+        return _el$0;
+    })();
+};
+const ComboBox = Object.assign(ComboBoxRoot, {
+    Root: ComboBoxRoot,
+    InputGroup: ComboBoxInputGroup,
+    Input: ComboBoxInput,
+    Trigger: ComboBoxTrigger,
+    Popover: ComboBoxPopover,
+    List: ComboBoxList
+});
+const combo_box_ComboBox = ComboBox;
+export { ComboBox, ComboBoxInput, ComboBoxInputGroup, ComboBoxList, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger, combo_box_ComboBox as default };