@pathscale/ui 1.1.12 → 1.1.14

package/dist/components/select/Select.js

@@ -1,62 +1,639 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./select.css";
+import "./Select.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_clsx__ from "clsx";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<select><option value disabled hidden>");
-const Select = (props)=>{
-    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
-        value: "",
-        placeholder: "Please, select an option"
-    }, props);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
-        "color",
-        "size",
-        "dataTheme",
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _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)('<svg viewBox="0 0 20 20"fill=none stroke=currentColor stroke-width=1.75><path d="M5 7.5L10 12.5L15 7.5"stroke-linecap=round stroke-linejoin=round>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button><span class=ui-select__option-label data-slot=ui-select-option-label></span><span class=ui-select__option-indicator data-slot=ui-select-option-indicator aria-hidden=true><svg viewBox="0 0 20 20"fill=none stroke=currentColor stroke-width=2><path d="M5.5 10.5L8.5 13.5L14.5 7.5"stroke-linecap=round stroke-linejoin=round>');
+const SelectContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const SELECT_VARIANT_CLASS_MAP = {
+    primary: "ui-select--primary",
+    secondary: "ui-select--secondary"
+};
+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)=>entry.length > 0 && 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 SelectRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
         "class",
         "className",
-        "style",
+        "dataTheme",
         "placeholder",
         "value",
-        "children"
+        "defaultValue",
+        "selectedKeys",
+        "defaultSelectedKeys",
+        "onChange",
+        "onSelectionChange",
+        "isDisabled",
+        "disabled",
+        "fullWidth",
+        "variant",
+        "selectionMode",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "ref"
+    ]);
+    const baseId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialSelected);
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
+    const [options, setOptions] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
+    const [focusedKey, setFocusedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [focusRequest, setFocusRequest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const [triggerRef, setTriggerRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [rootRef, setRootRefSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const open = ()=>void 0 !== local.isOpen ? Boolean(local.isOpen) : internalOpen();
+    const selectedKeys = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>new Set(selectedKeys()));
+    const selectedText = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (!selectedKeys().length) return "";
+        const optionMap = new Map(options().map((option)=>[
+                option.key,
+                option.textValue
+            ]));
+        return selectedKeys().map((key)=>optionMap.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)=>{
+        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 setRootRef = (el)=>{
+        setRootRefSignal(el);
+        if ("function" == typeof local.ref) local.ref(el);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!open()) return;
+        const request = focusRequest();
+        if (!request) return;
+        focusBoundary(request);
+        setFocusRequest(null);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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);
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        const handlePointerDown = (event)=>{
+            if (!open()) return;
+            const root = rootRef();
+            if (!root) return;
+            if (root.contains(event.target)) return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+        });
+    });
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SelectContext.Provider, {
+        value: {
+            open,
+            variant,
+            fullWidth,
+            disabled,
+            selectionMode,
+            placeholder: ()=>local.placeholder ?? "Select an option",
+            triggerId,
+            listboxId,
+            selectedKeys,
+            selectedText,
+            focusedKey,
+            isSelected: (key)=>selectedSet().has(key),
+            setOpen,
+            toggleOpen,
+            setFocusedKey,
+            focusBoundary,
+            focusNext,
+            requestFocus: setFocusRequest,
+            selectKey,
+            registerOption,
+            unregisterOption,
+            setTriggerRef,
+            setRootRef
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRootRef, _el$);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select", SELECT_VARIANT_CLASS_MAP[variant()], fullWidth() && "ui-select--full-width", 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);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const SelectTrigger = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "disabled",
+        "onClick",
+        "onKeyDown",
+        "ref",
+        "type"
     ]);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("select", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            "select-xl": "xl" === local.size,
-            "select-lg": "lg" === local.size,
-            "select-md": "md" === local.size,
-            "select-sm": "sm" === local.size,
-            "select-xs": "xs" === local.size,
-            "select-primary": "primary" === local.color,
-            "select-secondary": "secondary" === local.color,
-            "select-accent": "accent" === local.color,
-            "select-ghost": "ghost" === local.color,
-            "select-info": "info" === local.color,
-            "select-success": "success" === local.color,
-            "select-warning": "warning" === local.color,
-            "select-error": "error" === local.color
-        })));
-    const hasValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.value && "" !== local.value);
+    if (!ctx) return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        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$ = _tmpl$(), _el$2 = _el$.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        var _el$3 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$3);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.triggerId;
+            },
+            get type () {
+                return local.type ?? "button";
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", ctx.fullWidth() && "ui-select__trigger--full-width", 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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const SelectValue = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const placeholder = ()=>ctx?.placeholder() ?? "";
+    const text = ()=>ctx?.selectedText() ?? "";
+    const isPlaceholder = ()=>0 === text().length;
+    return (()=>{
+        var _el$4 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["class"] () {
-                return classes();
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__value", local.class, local.className);
             },
-            get style () {
-                return local.style;
+            get ["data-theme"] () {
+                return local.dataTheme;
             },
-            get value () {
-                return local.value;
+            "data-slot": "ui-select-value",
+            get ["data-placeholder"] () {
+                return isPlaceholder() ? "true" : "false";
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.placeholder);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.selected = !hasValue());
-        return _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
+        return _el$4;
+    })();
+};
+const SelectIndicator = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$5 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children ?? _tmpl$4());
+        return _el$5;
+    })();
+};
+const SelectPopover = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__popover", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "ui-select-popover",
+            get ["data-open"] () {
+                return ctx?.open() ? "true" : "false";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const SelectListbox = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$8 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx?.listboxId;
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const SelectOption = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(SelectContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "value",
+        "textValue",
+        "isDisabled",
+        "disabled",
+        "onClick",
+        "onKeyDown",
+        "onMouseEnter",
+        "ref",
+        "type"
+    ]);
+    if (!ctx) 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, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get type () {
+                return local.type ?? "button";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+    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);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!optionRef) return;
+        ctx.registerOption({
+            key: key(),
+            textValue: local.textValue ?? ("string" == typeof local.children ? local.children : key()),
+            disabled: isDisabled(),
+            ref: optionRef
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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$0 = _tmpl$5(), _el$1 = _el$0.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$0);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get type () {
+                return local.type ?? "button";
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.children);
+        return _el$0;
     })();
 };
+const Select = Object.assign(SelectRoot, {
+    Root: SelectRoot,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Indicator: SelectIndicator,
+    Popover: SelectPopover,
+    Listbox: SelectListbox,
+    Option: SelectOption
+});
 const select_Select = Select;
 export { select_Select as default };