@pathscale/ui 1.3.1 → 1.5.0

package/dist/components/select/Select.generated.js

@@ -0,0 +1,875 @@
+import { Portal, createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Select.css";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createOverlayPosition } from "../_shared/overlayPosition.js";
+import { CLASSES, componentRecipe } from "./Select.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<span><span>"), _tmpl$5 = /*#__PURE__*/ template("<button><span>");
+const SelectContext = 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 isIterableValue = (value)=>{
+    if (null == value || "string" == typeof value) return false;
+    return "function" == typeof value[Symbol.iterator];
+};
+const normalizeSelection = (selectionMode, value)=>{
+    if (null == value) return [];
+    let entries;
+    entries = Array.isArray(value) ? value : isIterableValue(value) ? Array.from(value) : [
+        value
+    ];
+    const normalized = entries.map((entry)=>String(entry)).filter((entry, index, source)=>source.indexOf(entry) === index);
+    if ("single" === selectionMode) return normalized.slice(0, 1);
+    return normalized;
+};
+const sortOptionsByDomOrder = (options)=>[
+        ...options
+    ].sort((a, b)=>{
+        if (a.ref === b.ref) return 0;
+        const relation = a.ref.compareDocumentPosition(b.ref);
+        if (relation & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+        if (relation & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        return 0;
+    });
+const __solidLayoutSelectRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "placeholder",
+        "value",
+        "defaultValue",
+        "selectedKeys",
+        "defaultSelectedKeys",
+        "onChange",
+        "onSelectionChange",
+        "isDisabled",
+        "disabled",
+        "fullWidth",
+        "variant",
+        "selectionMode",
+        "placement",
+        "autoFlip",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "ref"
+    ]);
+    const baseId = createUniqueId();
+    const triggerId = `${baseId}-trigger`;
+    const listboxId = `${baseId}-listbox`;
+    const selectionMode = ()=>local.selectionMode ?? "single";
+    const variant = ()=>local.variant ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const initialSelected = normalizeSelection(selectionMode(), local.defaultSelectedKeys ?? local.defaultValue);
+    const [internalSelectedKeys, setInternalSelectedKeys] = createSignal(initialSelected);
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const [options, setOptions] = createSignal([]);
+    const [optionTextByKey, setOptionTextByKey] = createSignal(new Map());
+    const [focusedKey, setFocusedKey] = createSignal();
+    const [focusRequest, setFocusRequest] = createSignal(null);
+    const [triggerRef, setTriggerRefSignal] = createSignal();
+    const [popoverRef, setPopoverRefSignal] = createSignal();
+    const [rootRef, setRootRefSignal] = createSignal();
+    const open = ()=>void 0 !== local.isOpen ? Boolean(local.isOpen) : internalOpen();
+    const placement = ()=>local.placement ?? "bottom";
+    const autoFlip = ()=>local.autoFlip ?? true;
+    const selectedKeys = createMemo(()=>{
+        const controlledValue = void 0 !== local.selectedKeys ? local.selectedKeys : local.value;
+        if (void 0 !== controlledValue) return normalizeSelection(selectionMode(), controlledValue);
+        return normalizeSelection(selectionMode(), internalSelectedKeys());
+    });
+    const selectedSet = createMemo(()=>new Set(selectedKeys()));
+    const selectedText = createMemo(()=>{
+        if (!selectedKeys().length) return "";
+        return selectedKeys().map((key)=>optionTextByKey().get(key) ?? key).join("multiple" === selectionMode() ? ", " : "");
+    });
+    const getEnabledOptions = ()=>options().filter((option)=>!option.disabled);
+    const focusOption = (option)=>{
+        if (!option) return;
+        setFocusedKey(option.key);
+        option.ref.focus();
+    };
+    const focusBoundary = (target)=>{
+        const enabled = getEnabledOptions();
+        if (!enabled.length) return;
+        if ("selected" === target) {
+            const selected = enabled.find((option)=>selectedSet().has(option.key));
+            focusOption(selected ?? enabled[0]);
+            return;
+        }
+        focusOption("first" === target ? enabled[0] : enabled[enabled.length - 1]);
+    };
+    const focusNext = (direction)=>{
+        const enabled = getEnabledOptions();
+        if (!enabled.length) return;
+        const active = document.activeElement;
+        let currentIndex = enabled.findIndex((option)=>option.ref === active);
+        if (currentIndex < 0) currentIndex = enabled.findIndex((option)=>option.key === focusedKey());
+        if (currentIndex < 0) return void focusBoundary(1 === direction ? "first" : "last");
+        const nextIndex = (currentIndex + direction + enabled.length) % enabled.length;
+        focusOption(enabled[nextIndex]);
+    };
+    const emitSelectionChange = (nextKeys)=>{
+        if (void 0 === local.selectedKeys && void 0 === local.value) setInternalSelectedKeys(nextKeys);
+        local.onSelectionChange?.(new Set(nextKeys));
+        local.onChange?.("multiple" === selectionMode() ? nextKeys : nextKeys[0] ?? null);
+    };
+    const setOpen = (next, options)=>{
+        if (next && disabled()) return;
+        if (void 0 === local.isOpen) setInternalOpen(next);
+        local.onOpenChange?.(next);
+        if (!next) {
+            setFocusRequest(null);
+            if (options?.focusTrigger) triggerRef()?.focus();
+        }
+    };
+    const toggleOpen = ()=>{
+        setOpen(!open());
+    };
+    const selectKey = (key)=>{
+        if (disabled()) return;
+        let nextKeys;
+        if ("multiple" === selectionMode()) {
+            const nextSet = new Set(selectedKeys());
+            if (nextSet.has(key)) nextSet.delete(key);
+            else nextSet.add(key);
+            nextKeys = Array.from(nextSet);
+            emitSelectionChange(nextKeys);
+            setFocusedKey(key);
+            return;
+        }
+        nextKeys = [
+            key
+        ];
+        emitSelectionChange(nextKeys);
+        setFocusedKey(key);
+        setOpen(false, {
+            focusTrigger: true
+        });
+    };
+    const registerOption = (option)=>{
+        setOptionTextByKey((current)=>{
+            if (current.get(option.key) === option.textValue) return current;
+            const next = new Map(current);
+            next.set(option.key, option.textValue);
+            return next;
+        });
+        setOptions((current)=>sortOptionsByDomOrder([
+                ...current.filter((entry)=>entry.key !== option.key),
+                option
+            ]));
+    };
+    const unregisterOption = (key)=>{
+        setOptions((current)=>current.filter((option)=>option.key !== key));
+        if (focusedKey() === key) setFocusedKey(void 0);
+    };
+    const setTriggerRef = (el)=>{
+        setTriggerRefSignal(el);
+    };
+    const setPopoverRef = (el)=>{
+        setPopoverRefSignal(el);
+    };
+    const setRootRef = (el)=>{
+        setRootRefSignal(el);
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    createEffect(()=>{
+        if (!open()) return;
+        const request = focusRequest();
+        if (!request) return;
+        focusBoundary(request);
+        setFocusRequest(null);
+    });
+    createEffect(()=>{
+        const currentFocused = focusedKey();
+        const currentOptions = options();
+        if (currentFocused && !currentOptions.some((option)=>option.key === currentFocused)) return void setFocusedKey(void 0);
+        if (open() && !currentFocused) {
+            const selected = currentOptions.find((option)=>selectedSet().has(option.key) && !option.disabled);
+            setFocusedKey(selected?.key ?? currentOptions.find((option)=>!option.disabled)?.key);
+        }
+    });
+    onMount(()=>{
+        const handlePointerDown = (event)=>{
+            if (!open()) return;
+            const target = event.target;
+            if (rootRef()?.contains(target)) return;
+            if (popoverRef()?.contains(target)) return;
+            if (triggerRef()?.contains(target)) return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        onCleanup(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+        });
+    });
+    return createComponent(SelectContext.Provider, {
+        value: {
+            open,
+            variant,
+            fullWidth,
+            disabled,
+            selectionMode,
+            placeholder: ()=>local.placeholder ?? "Select an option",
+            triggerId,
+            listboxId,
+            placement,
+            autoFlip,
+            triggerRef,
+            popoverRef,
+            selectedKeys,
+            selectedText,
+            focusedKey,
+            isSelected: (key)=>selectedSet().has(key),
+            setOpen,
+            toggleOpen,
+            setFocusedKey,
+            focusBoundary,
+            focusNext,
+            requestFocus: setFocusRequest,
+            selectKey,
+            registerOption,
+            unregisterOption,
+            setTriggerRef,
+            setPopoverRef,
+            setRootRef
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            use(setRootRef, _el$);
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "ui-select",
+                get ["data-open"] () {
+                    return open() ? "true" : "false";
+                },
+                get ["data-disabled"] () {
+                    return disabled() ? "true" : "false";
+                },
+                get ["data-selection-mode"] () {
+                    return selectionMode();
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const SelectRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectRoot,
+    embedded: true
+});
+const __solidLayoutSelectTrigger = (_stable, p)=>{
+    const ctx = useContext(SelectContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "disabled",
+        "startIcon",
+        "endIcon",
+        "onClick",
+        "onKeyDown",
+        "ref",
+        "type"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.trigger, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }), false, true);
+        insert(_el$2, (()=>{
+            var _c$ = memo(()=>!!local.startIcon);
+            return ()=>_c$() ? (()=>{
+                    var _el$3 = _tmpl$3();
+                    spread(_el$3, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-trigger-start-icon"
+                    }), false, true);
+                    insert(_el$3, ()=>local.startIcon);
+                    return _el$3;
+                })() : null;
+        })(), null);
+        insert(_el$2, ()=>local.children, null);
+        insert(_el$2, (()=>{
+            var _c$2 = memo(()=>!!local.endIcon);
+            return ()=>_c$2() ? (()=>{
+                    var _el$4 = _tmpl$3();
+                    spread(_el$4, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-trigger-end-icon"
+                    }), false, true);
+                    insert(_el$4, ()=>local.endIcon);
+                    return _el$4;
+                })() : null;
+        })(), null);
+        return _el$2;
+    })();
+    const isDisabled = ()=>Boolean(local.disabled) || ctx.disabled();
+    const setRef = (el)=>{
+        ctx.setTriggerRef(el);
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        ctx.toggleOpen();
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            if (!ctx.open()) ctx.setOpen(true);
+            ctx.requestFocus("selected");
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            if (!ctx.open()) ctx.setOpen(true);
+            ctx.requestFocus("last");
+            return;
+        }
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            if (ctx.open()) ctx.setOpen(false);
+            else {
+                ctx.setOpen(true);
+                ctx.requestFocus("selected");
+            }
+            return;
+        }
+        if ("Escape" === event.key && ctx.open()) {
+            event.preventDefault();
+            ctx.setOpen(false);
+        }
+    };
+    return (()=>{
+        var _el$5 = _tmpl$2();
+        use(setRef, _el$5);
+        spread(_el$5, mergeProps(others, {
+            get id () {
+                return ctx.triggerId;
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.trigger, ctx.fullWidth() && CLASSES.slot.triggerFullWidth, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "ui-select-trigger",
+            get ["data-open"] () {
+                return ctx.open() ? "true" : "false";
+            },
+            "aria-haspopup": "listbox",
+            get ["aria-expanded"] () {
+                return ctx.open();
+            },
+            get ["aria-controls"] () {
+                return ctx.listboxId;
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        insert(_el$5, (()=>{
+            var _c$3 = memo(()=>!!local.startIcon);
+            return ()=>_c$3() ? (()=>{
+                    var _el$6 = _tmpl$3();
+                    spread(_el$6, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-trigger-start-icon"
+                    }), false, true);
+                    insert(_el$6, ()=>local.startIcon);
+                    return _el$6;
+                })() : null;
+        })(), null);
+        insert(_el$5, ()=>local.children, null);
+        insert(_el$5, (()=>{
+            var _c$4 = memo(()=>!!local.endIcon);
+            return ()=>_c$4() ? (()=>{
+                    var _el$7 = _tmpl$3();
+                    spread(_el$7, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-trigger-end-icon"
+                    }), false, true);
+                    insert(_el$7, ()=>local.endIcon);
+                    return _el$7;
+                })() : null;
+        })(), null);
+        return _el$5;
+    })();
+};
+const SelectTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectTrigger,
+    embedded: true
+});
+const __solidLayoutSelectValue = (_stable, p)=>{
+    const ctx = useContext(SelectContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const placeholder = ()=>ctx?.placeholder() ?? "";
+    const text = ()=>ctx?.selectedText() ?? "";
+    const isPlaceholder = ()=>(ctx?.selectedKeys().length ?? 0) === 0;
+    return (()=>{
+        var _el$8 = _tmpl$3();
+        spread(_el$8, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.value, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "ui-select-value",
+            get ["data-placeholder"] () {
+                return isPlaceholder() ? "true" : "false";
+            }
+        }), false, true);
+        insert(_el$8, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
+        return _el$8;
+    })();
+};
+const SelectValue = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectValue,
+    embedded: true
+});
+const __solidLayoutSelectIndicator = (_stable, p)=>{
+    const ctx = useContext(SelectContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "startIcon",
+        "endIcon"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$3();
+        spread(_el$9, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.indicator, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "ui-select-indicator",
+            get ["data-open"] () {
+                return ctx?.open() ? "true" : "false";
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        insert(_el$9, (()=>{
+            var _c$5 = memo(()=>!!local.startIcon);
+            return ()=>_c$5() ? (()=>{
+                    var _el$0 = _tmpl$3();
+                    spread(_el$0, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-indicator-start-icon"
+                    }), false, true);
+                    insert(_el$0, ()=>local.startIcon);
+                    return _el$0;
+                })() : null;
+        })(), null);
+        insert(_el$9, ()=>local.children, null);
+        insert(_el$9, (()=>{
+            var _c$6 = memo(()=>!!local.endIcon);
+            return ()=>_c$6() ? (()=>{
+                    var _el$1 = _tmpl$3();
+                    spread(_el$1, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-indicator-end-icon"
+                    }), false, true);
+                    insert(_el$1, ()=>local.endIcon);
+                    return _el$1;
+                })() : null;
+        })(), null);
+        return _el$9;
+    })();
+};
+const SelectIndicator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectIndicator,
+    embedded: true
+});
+const __solidLayoutSelectPopover = (_stable, p)=>{
+    const ctx = useContext(SelectContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onPointerDown"
+    ]);
+    const overlayPosition = createOverlayPosition({
+        open: ()=>ctx?.open() ?? false,
+        triggerRef: ()=>ctx?.triggerRef(),
+        overlayRef: ()=>ctx?.popoverRef(),
+        placement: ()=>ctx?.placement() ?? "bottom",
+        offset: ()=>6,
+        autoFlip: ()=>ctx?.autoFlip() ?? true,
+        align: ()=>"start",
+        matchTriggerWidth: ()=>true,
+        minWidth: ()=>224
+    });
+    const popoverStyle = ()=>{
+        const overlayStyle = overlayPosition.style();
+        if ("string" == typeof local.style) return [
+            local.style,
+            Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
+        ].filter(Boolean).join("; ");
+        return {
+            ...local.style ?? {},
+            ...overlayStyle
+        };
+    };
+    return createComponent(Portal, {
+        get children () {
+            var _el$10 = _tmpl$();
+            var _ref$ = ctx?.setPopoverRef;
+            "function" == typeof _ref$ && use(_ref$, _el$10);
+            spread(_el$10, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.slot.popover, local.class, local.className)
+                }), {
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                "data-slot": "ui-select-popover",
+                get ["data-open"] () {
+                    return ctx?.open() ? "true" : "false";
+                },
+                get ["data-placement"] () {
+                    return overlayPosition.placement();
+                },
+                get style () {
+                    return popoverStyle();
+                },
+                "on:pointerdown": (event)=>{
+                    invokeEventHandler(local.onPointerDown, event);
+                    if (!event.defaultPrevented) event.stopPropagation();
+                }
+            }), false, true);
+            insert(_el$10, ()=>local.children);
+            return _el$10;
+        }
+    });
+};
+const SelectPopover = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectPopover,
+    embedded: true
+});
+const __solidLayoutSelectListbox = (_stable, p)=>{
+    const ctx = useContext(SelectContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$11 = _tmpl$();
+        spread(_el$11, mergeProps(others, {
+            get id () {
+                return ctx?.listboxId;
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.listbox, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "ui-select-listbox",
+            role: "listbox",
+            get ["aria-multiselectable"] () {
+                return ctx?.selectionMode() === "multiple" ? "true" : void 0;
+            },
+            tabindex: -1
+        }), false, true);
+        insert(_el$11, ()=>local.children);
+        return _el$11;
+    })();
+};
+const SelectListbox = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectListbox,
+    embedded: true
+});
+const __solidLayoutSelectOption = (_stable, p)=>{
+    const ctx = useContext(SelectContext);
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "value",
+        "textValue",
+        "isDisabled",
+        "disabled",
+        "startIcon",
+        "endIcon",
+        "onClick",
+        "onKeyDown",
+        "onMouseEnter",
+        "ref",
+        "type"
+    ]);
+    if (!ctx) return (()=>{
+        var _el$12 = _tmpl$2();
+        spread(_el$12, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.option, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }), false, true);
+        insert(_el$12, (()=>{
+            var _c$7 = memo(()=>!!local.startIcon);
+            return ()=>_c$7() ? (()=>{
+                    var _el$13 = _tmpl$3();
+                    spread(_el$13, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), false, true);
+                    insert(_el$13, ()=>local.startIcon);
+                    return _el$13;
+                })() : null;
+        })(), null);
+        insert(_el$12, ()=>local.children, null);
+        insert(_el$12, (()=>{
+            var _c$8 = memo(()=>!!local.endIcon);
+            return ()=>_c$8() ? (()=>{
+                    var _el$14 = _tmpl$4(), _el$15 = _el$14.firstChild;
+                    spread(_el$14, mergeProps(()=>({
+                            class: CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), false, true);
+                    spread(_el$15, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), false, true);
+                    insert(_el$15, ()=>local.endIcon);
+                    return _el$14;
+                })() : null;
+        })(), null);
+        return _el$12;
+    })();
+    const key = ()=>String(local.value);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || ctx.disabled();
+    const isSelected = ()=>ctx.isSelected(key());
+    const isFocused = ()=>ctx.focusedKey() === key();
+    let optionRef;
+    const setRef = (el)=>{
+        optionRef = el;
+        ctx.registerOption({
+            key: key(),
+            textValue: local.textValue ?? ("string" == typeof local.children ? local.children : key()),
+            disabled: isDisabled(),
+            ref: el
+        });
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    createEffect(()=>{
+        if (!optionRef) return;
+        ctx.registerOption({
+            key: key(),
+            textValue: local.textValue ?? ("string" == typeof local.children ? local.children : key()),
+            disabled: isDisabled(),
+            ref: optionRef
+        });
+    });
+    onCleanup(()=>{
+        ctx.unregisterOption(key());
+    });
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        ctx.selectKey(key());
+    };
+    const handleMouseEnter = (event)=>{
+        invokeEventHandler(local.onMouseEnter, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        ctx.setFocusedKey(key());
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            ctx.focusNext(1);
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            ctx.focusNext(-1);
+            return;
+        }
+        if ("Home" === event.key) {
+            event.preventDefault();
+            ctx.focusBoundary("first");
+            return;
+        }
+        if ("End" === event.key) {
+            event.preventDefault();
+            ctx.focusBoundary("last");
+            return;
+        }
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            ctx.selectKey(key());
+            return;
+        }
+        if ("Escape" === event.key) {
+            event.preventDefault();
+            ctx.setOpen(false, {
+                focusTrigger: true
+            });
+            return;
+        }
+        if ("Tab" === event.key) ctx.setOpen(false);
+    };
+    return (()=>{
+        var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
+        use(setRef, _el$16);
+        spread(_el$16, mergeProps(others, {
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.slot.option, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "ui-select-option",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-focused"] () {
+                return isFocused() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            role: "option",
+            get ["aria-selected"] () {
+                return isSelected();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            tabindex: -1,
+            onClick: handleClick,
+            onMouseEnter: handleMouseEnter,
+            onFocus: ()=>ctx.setFocusedKey(key()),
+            onKeyDown: handleKeyDown
+        }), false, true);
+        insert(_el$16, (()=>{
+            var _c$9 = memo(()=>!!local.startIcon);
+            return ()=>_c$9() ? (()=>{
+                    var _el$18 = _tmpl$3();
+                    spread(_el$18, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), false, true);
+                    insert(_el$18, ()=>local.startIcon);
+                    return _el$18;
+                })() : null;
+        })(), _el$17);
+        spread(_el$17, mergeProps(()=>({
+                class: CLASSES.slot.optionLabel
+            }), {
+            "data-slot": "ui-select-option-label"
+        }), false, true);
+        insert(_el$17, ()=>local.children);
+        insert(_el$16, (()=>{
+            var _c$0 = memo(()=>!!local.endIcon);
+            return ()=>_c$0() ? (()=>{
+                    var _el$19 = _tmpl$4(), _el$20 = _el$19.firstChild;
+                    spread(_el$19, mergeProps(()=>({
+                            class: CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), false, true);
+                    spread(_el$20, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), false, true);
+                    insert(_el$20, ()=>local.endIcon);
+                    return _el$19;
+                })() : null;
+        })(), null);
+        return _el$16;
+    })();
+};
+const SelectOption = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutSelectOption,
+    embedded: true
+});
+const Select = Object.assign(SelectRoot, {
+    Root: SelectRoot,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Indicator: SelectIndicator,
+    Popover: SelectPopover,
+    Listbox: SelectListbox,
+    Option: SelectOption
+});
+const Select_generated = Select;
+export default Select_generated;