@pathscale/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,773 @@
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./ComboBox.css";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ComboBox.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<input>"), _tmpl$5 = /*#__PURE__*/ template("<button>"), _tmpl$6 = /*#__PURE__*/ template("<div>No matching options"), _tmpl$7 = /*#__PURE__*/ template("<div role=option tabindex=-1 data-slot=combobox-option><span>"), _tmpl$8 = /*#__PURE__*/ template("<span><span>");
+const ComboBoxContext = 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 __solidLayoutComboBoxRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "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 = `${createUniqueId()}-listbox`;
+    const [internalSelectedKey, setInternalSelectedKey] = createSignal(normalizeKey(local.defaultSelectedKey));
+    const [internalInputValue, setInternalInputValue] = createSignal(local.defaultInputValue ?? "");
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const [activeKey, setActiveKeySignal] = 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 = createMemo(()=>void 0 !== local.selectedKey ? normalizeKey(local.selectedKey) : internalSelectedKey());
+    const inputValue = createMemo(()=>void 0 !== local.inputValue ? local.inputValue : internalInputValue());
+    const normalizedItems = 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 = createMemo(()=>{
+        const key = selectedKey();
+        if (!key) return;
+        return normalizedItems().find((item)=>item.key === key);
+    });
+    const filteredItems = 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)}`;
+    createEffect(()=>{
+        if (void 0 !== local.inputValue) return;
+        const selected = selectedItem();
+        if (!selected) return;
+        if (internalInputValue() !== selected.textValue) setInternalInputValue(selected.textValue);
+    });
+    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);
+    });
+    onMount(()=>{
+        const handlePointerDown = (event)=>{
+            if (!rootRef) return;
+            if (rootRef.contains(event.target)) return;
+            closeAndCommit();
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        onCleanup(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+        });
+    });
+    const hiddenValue = createMemo(()=>{
+        const currentKey = selectedKey();
+        if (currentKey) return currentKey;
+        if (local.allowsCustomValue) return inputValue();
+        return "";
+    });
+    return 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();
+            use((node)=>{
+                rootRef = node;
+                if ("function" == typeof local.ref) local.ref(node);
+            }, _el$);
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && 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);
+            insert(_el$, createComponent(Show, {
+                get when () {
+                    return local.name;
+                },
+                get children () {
+                    var _el$2 = _tmpl$();
+                    effect(()=>setAttribute(_el$2, "name", local.name));
+                    effect(()=>_el$2.value = hiddenValue());
+                    return _el$2;
+                }
+            }), null);
+            insert(_el$, ()=>local.children ?? [
+                    createComponent(ComboBoxInputGroup, {
+                        get children () {
+                            return [
+                                createComponent(Show, {
+                                    get when () {
+                                        return local.startIcon;
+                                    },
+                                    get children () {
+                                        var _el$3 = _tmpl$3();
+                                        spread(_el$3, mergeProps(()=>({
+                                                class: twMerge(CLASSES.Icon.base, CLASSES.Icon.start)
+                                            }), {
+                                            "data-slot": "combobox-start-icon"
+                                        }), false, true);
+                                        insert(_el$3, ()=>local.startIcon);
+                                        return _el$3;
+                                    }
+                                }),
+                                createComponent(ComboBoxInput, {
+                                    get placeholder () {
+                                        return local.placeholder;
+                                    },
+                                    get required () {
+                                        return isRequired();
+                                    }
+                                }),
+                                createComponent(ComboBoxTrigger, {
+                                    get endIcon () {
+                                        return local.endIcon;
+                                    }
+                                })
+                            ];
+                        }
+                    }),
+                    createComponent(ComboBoxPopover, {
+                        get children () {
+                            return createComponent(ComboBoxList, {});
+                        }
+                    })
+                ], null);
+            return _el$;
+        }
+    });
+};
+const ComboBoxRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutComboBoxRoot,
+    embedded: true
+});
+const __solidLayoutComboBoxInputGroup = (_stable, p)=>{
+    const context = useContext(ComboBoxContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$2();
+        spread(_el$4, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.InputGroup.base, context?.fullWidth() && 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);
+        insert(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const ComboBoxInputGroup = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutComboBoxInputGroup,
+    embedded: true
+});
+const __solidLayoutComboBoxInput = (_stable, p)=>{
+    const context = useContext(ComboBoxContext);
+    const [local, others] = splitProps(p, [
+        "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();
+        use((node)=>{
+            context?.attachInputRef(node);
+            if ("function" == typeof local.ref) local.ref(node);
+        }, _el$5);
+        spread(_el$5, 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: twMerge(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 ComboBoxInput = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutComboBoxInput,
+    embedded: true
+});
+const __solidLayoutComboBoxTrigger = (_stable, p)=>{
+    const context = useContext(ComboBoxContext);
+    const [local, others] = splitProps(p, [
+        "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();
+        spread(_el$6, mergeProps(others, {
+            type: "button"
+        }, ()=>({
+                class: twMerge(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);
+        insert(_el$6, (()=>{
+            var _c$ = memo(()=>!!local.startIcon);
+            return ()=>_c$() ? (()=>{
+                    var _el$7 = _tmpl$3();
+                    spread(_el$7, mergeProps(()=>({
+                            class: twMerge(CLASSES.Icon.base, CLASSES.Icon.start)
+                        }), {
+                        "data-slot": "combobox-trigger-start-icon"
+                    }), false, true);
+                    insert(_el$7, ()=>local.startIcon);
+                    return _el$7;
+                })() : null;
+        })(), null);
+        insert(_el$6, ()=>local.children, null);
+        insert(_el$6, (()=>{
+            var _c$2 = memo(()=>!!local.endIcon);
+            return ()=>_c$2() ? (()=>{
+                    var _el$8 = _tmpl$3();
+                    spread(_el$8, mergeProps(()=>({
+                            class: twMerge(CLASSES.Icon.base, CLASSES.Icon.end, CLASSES.Trigger.icon)
+                        }), {
+                        "data-slot": "combobox-trigger-end-icon"
+                    }), false, true);
+                    insert(_el$8, ()=>local.endIcon);
+                    return _el$8;
+                })() : null;
+        })(), null);
+        return _el$6;
+    })();
+};
+const ComboBoxTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutComboBoxTrigger,
+    embedded: true
+});
+const __solidLayoutComboBoxPopover = (_stable, p)=>{
+    const context = useContext(ComboBoxContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$2();
+        spread(_el$9, mergeProps(others, ()=>({
+                class: twMerge(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);
+        insert(_el$9, ()=>local.children ?? createComponent(ComboBoxList, {}));
+        return _el$9;
+    })();
+};
+const ComboBoxPopover = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutComboBoxPopover,
+    embedded: true
+});
+const __solidLayoutComboBoxList = (_stable, p)=>{
+    const context = useContext(ComboBoxContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "renderEmptyState",
+        "endIcon"
+    ]);
+    const items = ()=>context?.filteredItems() ?? [];
+    return (()=>{
+        var _el$0 = _tmpl$2();
+        spread(_el$0, mergeProps(others, {
+            get id () {
+                return context?.listBoxId;
+            },
+            role: "listbox"
+        }, ()=>({
+                class: twMerge(CLASSES.List.base, local.class, local.className)
+            }), {
+            "data-slot": "combobox-list",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$0, createComponent(Show, {
+            get when () {
+                return items().length > 0;
+            },
+            get fallback () {
+                return local.renderEmptyState?.() ?? (()=>{
+                    var _el$1 = _tmpl$6();
+                    spread(_el$1, mergeProps(()=>({
+                            class: CLASSES.List.empty
+                        }), {
+                        "data-slot": "combobox-empty-state"
+                    }), false, true);
+                    return _el$1;
+                })();
+            },
+            get children () {
+                return createComponent(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;
+                            spread(_el$10, 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: 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);
+                            spread(_el$11, mergeProps(()=>({
+                                    class: CLASSES.Option.label
+                                })), false, true);
+                            insert(_el$11, (()=>{
+                                var _c$3 = memo(()=>"function" == typeof local.children);
+                                return ()=>_c$3() ? local.children(state) : item.textValue;
+                            })());
+                            insert(_el$10, (()=>{
+                                var _c$4 = memo(()=>!!local.endIcon);
+                                return ()=>_c$4() ? (()=>{
+                                        var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild;
+                                        spread(_el$12, mergeProps(()=>({
+                                                class: CLASSES.Option.indicator
+                                            }), {
+                                            "aria-hidden": "true"
+                                        }), false, true);
+                                        spread(_el$13, mergeProps(()=>({
+                                                class: twMerge(CLASSES.Icon.base, CLASSES.Icon.end)
+                                            }), {
+                                            "data-slot": "combobox-option-end-icon"
+                                        }), false, true);
+                                        insert(_el$13, ()=>local.endIcon);
+                                        return _el$12;
+                                    })() : null;
+                            })(), null);
+                            return _el$10;
+                        })();
+                    }
+                });
+            }
+        }));
+        return _el$0;
+    })();
+};
+const ComboBoxList = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutComboBoxList,
+    embedded: true
+});
+const ComboBox = Object.assign(ComboBoxRoot, {
+    Root: ComboBoxRoot,
+    InputGroup: ComboBoxInputGroup,
+    Input: ComboBoxInput,
+    Trigger: ComboBoxTrigger,
+    Popover: ComboBoxPopover,
+    List: ComboBoxList
+});
+const ComboBox_generated = ComboBox;
+export default ComboBox_generated;
+export { ComboBox, ComboBoxInput, ComboBoxInputGroup, ComboBoxList, ComboBoxPopover, ComboBoxRoot, ComboBoxTrigger };