@refraktor/core 0.0.1

package/build/components/select/select-dropdown/select-dropdown.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { InputField } from "../../input/input-field";
+import { Transition } from "../../transition";
+import { findFocusedSelectItemIndex, focusSelectItem, getNavigableSelectItems, useSelectContext } from "../select.context";
+import { FloatingFocusManager, FloatingPortal, useMergeRefs } from "@floating-ui/react";
+const SelectDropdown = factory(({ children, className, style, onKeyDown, ...props }, ref) => {
+    const { cx, getRadius } = useTheme();
+    const select = useSelectContext();
+    const typeaheadRef = useRef("");
+    const typeaheadTimeoutRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (!select.select.opened) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (select.searchable) {
+                select.searchInputRef.current?.focus();
+                return;
+            }
+            select.focusSelectedOrFirstItem();
+        });
+    }, [
+        select.focusSelectedOrFirstItem,
+        select.searchable,
+        select.searchInputRef,
+        select.select.opened
+    ]);
+    const clearTypeahead = () => {
+        typeaheadRef.current = "";
+        if (typeaheadTimeoutRef.current !== null) {
+            window.clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        const items = getNavigableSelectItems(select.getVisibleItems());
+        const focusedIndex = findFocusedSelectItemIndex(items);
+        const isSearchInputTarget = event.target === select.searchInputRef.current;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            if (!items.length) {
+                return;
+            }
+            const nextIndex = focusedIndex >= 0 ? (focusedIndex + 1) % items.length : 0;
+            focusSelectItem(items[nextIndex]);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!items.length) {
+                return;
+            }
+            const nextIndex = focusedIndex >= 0
+                ? (focusedIndex - 1 + items.length) % items.length
+                : items.length - 1;
+            focusSelectItem(items[nextIndex]);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            focusSelectItem(items[0]);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            focusSelectItem(items[items.length - 1]);
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            select.select.close();
+            select.triggerInputRef.current?.focus();
+            return;
+        }
+        if (event.key === "Tab") {
+            select.select.close();
+            return;
+        }
+        if ((event.key === "Enter" || event.key === " ") &&
+            !isSearchInputTarget) {
+            if (focusedIndex === -1) {
+                return;
+            }
+            event.preventDefault();
+            items[focusedIndex].select();
+            return;
+        }
+        if (!select.searchable &&
+            event.key.length === 1 &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            const search = `${typeaheadRef.current}${event.key.toLowerCase()}`;
+            typeaheadRef.current = search;
+            if (typeaheadTimeoutRef.current !== null) {
+                window.clearTimeout(typeaheadTimeoutRef.current);
+            }
+            typeaheadTimeoutRef.current = window.setTimeout(() => {
+                clearTypeahead();
+            }, 400);
+            const matchedItem = items.find((item, index) => {
+                if (index <= focusedIndex) {
+                    return false;
+                }
+                return item.textValue
+                    .trim()
+                    .toLowerCase()
+                    .startsWith(search);
+            });
+            if (matchedItem) {
+                event.preventDefault();
+                focusSelectItem(matchedItem);
+                return;
+            }
+            const wrappedMatch = items.find((item, index) => {
+                if (index > focusedIndex) {
+                    return false;
+                }
+                return item.textValue
+                    .trim()
+                    .toLowerCase()
+                    .startsWith(search);
+            });
+            if (wrappedMatch) {
+                event.preventDefault();
+                focusSelectItem(wrappedMatch);
+            }
+        }
+    };
+    const referenceWidth = select.select.refs.reference.current?.offsetWidth;
+    const dropdownContent = (_jsx(Transition, { transition: "fade", duration: 150, mounted: select.select.opened, ...select.transitionProps, children: _jsxs("div", { ref: useMergeRefs([ref, select.select.refs.setFloating]), id: select.listId, role: "listbox", "aria-labelledby": select.triggerId, tabIndex: -1, style: {
+                ...select.select.floatingStyles,
+                width: referenceWidth,
+                ...style
+            }, className: cx("z-50 min-w-32 bg-[var(--refraktor-bg)] text-[var(--refraktor-text)] shadow-md border border-[var(--refraktor-border)]", getRadius(select.radius), select.getStyles("dropdown"), className), ...select.select.getFloatingProps({
+                onKeyDown: handleKeyDown
+            }), ...props, children: [select.searchable && (_jsx("div", { className: cx("p-1 border-b border-[var(--refraktor-border)]", select.getStyles("search")), children: _jsx(InputField, { ref: (node) => {
+                            select.searchInputRef.current = node;
+                        }, value: select.search, onChange: (event) => {
+                            select.setSearch(event.currentTarget.value);
+                        }, size: select.size, radius: select.radius, variant: select.variant, placeholder: select.searchPlaceholder, autoComplete: "off", className: select.getStyles("searchInput") }) })), _jsxs("div", { className: cx("max-h-80 overflow-y-auto refraktor-scrollbar p-1", select.getStyles("options")), children: [children, !select.hasVisibleItems() && (_jsx("div", { className: cx("px-1.5 py-1.5 text-sm text-[var(--refraktor-text-secondary)]", select.getStyles("empty")), children: select.nothingFound }))] })] }) }));
+    const wrappedContent = select.select.opened ? (_jsx(FloatingFocusManager, { context: select.select.context, modal: false, initialFocus: -1, children: dropdownContent })) : (dropdownContent);
+    return select.withinPortal ? (_jsx(FloatingPortal, { children: wrappedContent })) : (wrappedContent);
+});
+SelectDropdown.displayName = "@refraktor/core/Select.Dropdown";
+export default SelectDropdown;

package/build/components/select/select-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectGroup } from "./select-group";
+//# sourceMappingURL=index.d.ts.map

package/build/components/select/select-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/build/components/select/select-group/index.js

@@ -0,0 +1 @@
+export { default as SelectGroup } from "./select-group";

package/build/components/select/select-group/select-group.d.ts

@@ -0,0 +1,4 @@
+import type { SelectGroupFactoryPayload } from "../select.types";
+declare const SelectGroup: import("../../..").RefraktorComponent<SelectGroupFactoryPayload>;
+export default SelectGroup;
+//# sourceMappingURL=select-group.d.ts.map

package/build/components/select/select-group/select-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-group.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-group/select-group.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAEjE,QAAA,MAAM,WAAW,kEAoChB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/build/components/select/select-group/select-group.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { SelectGroupProvider, useSelectContext } from "../select.context";
+const SelectGroup = factory(({ id, label, children, className, ...props }, ref) => {
+    const { cx } = useTheme();
+    const select = useSelectContext();
+    const _id = useId(id);
+    const labelId = `${_id}-label`;
+    const isVisible = select.isGroupVisible(_id);
+    return (_jsx(SelectGroupProvider, { value: { groupId: _id }, children: _jsxs("div", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, hidden: !isVisible, className: cx("py-1", select.getStyles("group"), className), ...props, children: [label && (_jsx("div", { id: labelId, className: cx("px-1.5 pb-1 text-xs font-medium text-[var(--refraktor-text-secondary)]", select.getStyles("groupLabel")), children: label })), children] }) }));
+});
+SelectGroup.displayName = "@refraktor/core/Select.Group";
+export default SelectGroup;

package/build/components/select/select-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectItem } from "./select-item";
+//# sourceMappingURL=index.d.ts.map

package/build/components/select/select-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/build/components/select/select-item/index.js

@@ -0,0 +1 @@
+export { default as SelectItem } from "./select-item";

package/build/components/select/select-item/select-item.d.ts

@@ -0,0 +1,4 @@
+import type { SelectItemFactoryPayload } from "../select.types";
+declare const SelectItem: import("../../..").RefraktorComponent<SelectItemFactoryPayload>;
+export default SelectItem;
+//# sourceMappingURL=select-item.d.ts.map

package/build/components/select/select-item/select-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-item.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-item/select-item.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEhE,QAAA,MAAM,UAAU,iEA4If,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/build/components/select/select-item/select-item.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "@refraktor/utils";
+import { useCallback, useEffect, useRef } from "react";
+import { CheckIcon } from "../../../icons";
+import { getRadius, useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { getNodeTextValue, useSelectContext, useSelectGroupContext } from "../select.context";
+const SelectItem = factory(({ id, value, children, disabled, textValue, className, onClick, onMouseMove, onKeyDown, onSelect, ...props }, ref) => {
+    const { cx } = useTheme();
+    const select = useSelectContext();
+    const group = useSelectGroupContext();
+    const _id = useId(id);
+    const itemRef = useRef(null);
+    const resolvedTextValue = getNodeTextValue(children, textValue) || value;
+    const isVisible = select.isSearchMatch(resolvedTextValue);
+    const isSelected = select.value === value;
+    const handleSelect = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        select.selectValue(value, resolvedTextValue);
+        onSelect?.(value);
+    }, [disabled, onSelect, resolvedTextValue, select.selectValue, value]);
+    useEffect(() => {
+        return select.registerItem({
+            id: _id,
+            value,
+            ref: itemRef,
+            disabled: !!disabled,
+            label: resolvedTextValue,
+            textValue: resolvedTextValue,
+            groupId: group?.groupId,
+            select: handleSelect
+        });
+    }, [
+        _id,
+        disabled,
+        group?.groupId,
+        handleSelect,
+        resolvedTextValue,
+        select.registerItem,
+        value
+    ]);
+    return (_jsxs("button", { ref: (node) => {
+            itemRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, id: _id, type: "button", role: "option", tabIndex: -1, disabled: disabled, hidden: !isVisible, "data-selected": isSelected, "data-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, className: cx("w-full text-left p-1.5 text-sm rounded-none appearance-none border-none bg-transparent", "inline-flex items-center gap-2 outline-none transition-colors", "hover:bg-[var(--refraktor-bg-hover)] focus-visible:bg-[var(--refraktor-bg-hover)]", "data-[selected=true]:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getRadius(select.radius), select.getStyles("item"), className), onMouseMove: (event) => {
+            onMouseMove?.(event);
+            if (!disabled &&
+                document.activeElement !== event.currentTarget) {
+                event.currentTarget.focus();
+            }
+        }, onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented) {
+                return;
+            }
+            handleSelect();
+        }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || disabled) {
+                return;
+            }
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleSelect();
+            }
+        }, ...props, children: [_jsx("span", { className: cx("flex-1", select.getStyles("itemLabel")), children: children }), isSelected && (_jsx("span", { className: cx("inline-flex items-center shrink-0 text-[var(--refraktor-primary)]", select.getStyles("itemCheck")), children: _jsx(CheckIcon, { size: 14 }) }))] }));
+});
+SelectItem.displayName = "@refraktor/core/Select.Item";
+export default SelectItem;

package/build/components/select/select-root/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectRoot } from "./select-root";
+//# sourceMappingURL=index.d.ts.map

package/build/components/select/select-root/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-root/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/build/components/select/select-root/index.js

@@ -0,0 +1 @@
+export { default as SelectRoot } from "./select-root";

package/build/components/select/select-root/select-root.d.ts

@@ -0,0 +1,4 @@
+import type { SelectRootFactoryPayload } from "../select.types";
+declare const SelectRoot: import("../../..").RefraktorComponent<SelectRootFactoryPayload>;
+export default SelectRoot;
+//# sourceMappingURL=select-root.d.ts.map

package/build/components/select/select-root/select-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-root.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-root/select-root.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAER,wBAAwB,EAE3B,MAAM,iBAAiB,CAAC;AAqBzB,QAAA,MAAM,UAAU,iEAqNd,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/build/components/select/select-root/select-root.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { useCallback, useEffect, useRef } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useClassNames, useProps } from "../../../utils";
+import { focusSelectItem, getNavigableSelectItems, SelectProvider, useSelectItemsRegistry } from "../select.context";
+import { useSelect } from "../use-select";
+const defaultProps = {
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    searchable: false,
+    placeholder: "Select option",
+    searchPlaceholder: "Search...",
+    nothingFound: "No options",
+    size: "md",
+    radius: "default",
+    variant: "default",
+    withinPortal: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+};
+const SelectRoot = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, value, defaultValue, onChange, opened, defaultOpened, onOpenedChange, positioning, middlewares, disabled, searchable, searchValue, defaultSearchValue, onSearchChange, placeholder, searchPlaceholder, nothingFound, size, radius, variant, withinPortal, closeOnClickOutside, closeOnEscape, transitionProps, className, classNames, ...props } = useProps("Select", defaultProps, _props);
+    const classes = useClassNames("Select", classNames);
+    const _id = useId(id);
+    const listId = `${_id}-listbox`;
+    const triggerId = `${_id}-trigger`;
+    const [selectedValue, setSelectedValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: null,
+        onChange
+    });
+    const [search, setSearch] = useUncontrolled({
+        value: searchValue,
+        defaultValue: defaultSearchValue,
+        finalValue: "",
+        onChange: onSearchChange
+    });
+    const select = useSelect({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+    const { registerItem: registerRegistryItem, getItems } = useSelectItemsRegistry();
+    const labelsRef = useRef(new Map());
+    const triggerInputRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const normalizedSearch = search.trim().toLowerCase();
+    const isSearchMatch = useCallback((textValue) => {
+        if (!normalizedSearch) {
+            return true;
+        }
+        return textValue.toLowerCase().includes(normalizedSearch);
+    }, [normalizedSearch]);
+    const getVisibleItems = useCallback(() => getItems().filter((item) => isSearchMatch(item.textValue)), [getItems, isSearchMatch]);
+    const hasVisibleItems = useCallback(() => getVisibleItems().length > 0, [getVisibleItems]);
+    const isGroupVisible = useCallback((groupId) => {
+        if (!normalizedSearch) {
+            return true;
+        }
+        const groupItems = getItems().filter((item) => item.groupId === groupId);
+        if (!groupItems.length) {
+            return true;
+        }
+        return groupItems.some((item) => isSearchMatch(item.textValue));
+    }, [getItems, isSearchMatch, normalizedSearch]);
+    const getSelectedLabel = useCallback(() => {
+        if (!selectedValue) {
+            return "";
+        }
+        return labelsRef.current.get(selectedValue) ?? selectedValue;
+    }, [selectedValue]);
+    const focusFirstItem = useCallback(() => {
+        const items = getNavigableSelectItems(getVisibleItems());
+        focusSelectItem(items[0]);
+    }, [getVisibleItems]);
+    const focusLastItem = useCallback(() => {
+        const items = getNavigableSelectItems(getVisibleItems());
+        focusSelectItem(items[items.length - 1]);
+    }, [getVisibleItems]);
+    const focusSelectedOrFirstItem = useCallback(() => {
+        const items = getNavigableSelectItems(getVisibleItems());
+        if (!items.length) {
+            return;
+        }
+        const selectedItem = items.find((item) => item.value === selectedValue);
+        focusSelectItem(selectedItem ?? items[0]);
+    }, [getVisibleItems, selectedValue]);
+    const selectValue = useCallback((nextValue, label) => {
+        labelsRef.current.set(nextValue, label);
+        setSelectedValue(nextValue);
+        select.close();
+    }, [select, setSelectedValue]);
+    const registerItem = useCallback((item) => {
+        labelsRef.current.set(item.value, item.label);
+        return registerRegistryItem(item);
+    }, [registerRegistryItem]);
+    useEffect(() => {
+        if (!select.opened && search) {
+            setSearch("");
+        }
+    }, [search, select.opened, setSearch]);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    const context = {
+        select,
+        value: selectedValue,
+        selectValue,
+        searchable: !!searchable,
+        search,
+        setSearch,
+        placeholder,
+        searchPlaceholder,
+        nothingFound,
+        disabled: !!disabled,
+        size,
+        radius,
+        variant,
+        withinPortal: !!withinPortal,
+        transitionProps,
+        listId,
+        triggerId,
+        triggerInputRef,
+        searchInputRef,
+        registerItem,
+        getItems,
+        getVisibleItems,
+        hasVisibleItems,
+        isSearchMatch,
+        isGroupVisible,
+        getSelectedLabel,
+        focusFirstItem,
+        focusLastItem,
+        focusSelectedOrFirstItem,
+        getStyles
+    };
+    return (_jsx(SelectProvider, { value: context, children: _jsx("div", { ref: ref, id: _id, className: cx("relative w-full", classes.root, className), ...props, children: children }) }));
+});
+SelectRoot.displayName = "@refraktor/core/Select.Root";
+export default SelectRoot;

package/build/components/select/select-trigger/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectTrigger } from "./select-trigger";
+//# sourceMappingURL=index.d.ts.map

package/build/components/select/select-trigger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-trigger/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/build/components/select/select-trigger/index.js

@@ -0,0 +1 @@
+export { default as SelectTrigger } from "./select-trigger";

package/build/components/select/select-trigger/select-trigger.d.ts

@@ -0,0 +1,4 @@
+import type { SelectTriggerFactoryPayload } from "../select.types";
+declare const SelectTrigger: import("../../..").RefraktorComponent<SelectTriggerFactoryPayload>;
+export default SelectTrigger;
+//# sourceMappingURL=select-trigger.d.ts.map

package/build/components/select/select-trigger/select-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select-trigger/select-trigger.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;AAEnE,QAAA,MAAM,aAAa,oEA6GlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/build/components/select/select-trigger/select-trigger.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronIcon } from "../../../icons";
+import { useTheme } from "../../../theme";
+import { factory } from "../../../utils";
+import { InputField } from "../../input/input-field";
+import { useSelectContext } from "../select.context";
+const SelectTrigger = factory(({ className, placeholder, rightSection, onKeyDown, ...props }, ref) => {
+    const { cx } = useTheme();
+    const select = useSelectContext();
+    const hasValue = !!select.value;
+    const selectedLabel = select.getSelectedLabel();
+    return (_jsx("div", { ref: (node) => {
+            select.select.refs.setReference(node);
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: cx("w-full", select.getStyles("trigger"), className), "data-opened": select.select.opened, ...select.select.getReferenceProps({
+            onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented || select.disabled) {
+                    return;
+                }
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    if (!select.select.opened) {
+                        select.select.open();
+                    }
+                    requestAnimationFrame(select.focusFirstItem);
+                    return;
+                }
+                if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (!select.select.opened) {
+                        select.select.open();
+                    }
+                    requestAnimationFrame(select.focusLastItem);
+                    return;
+                }
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    if (!select.select.opened) {
+                        select.select.open();
+                    }
+                    else {
+                        select.select.close();
+                    }
+                    return;
+                }
+                if (event.key === "Escape" && select.select.opened) {
+                    event.preventDefault();
+                    select.select.close();
+                }
+            }
+        }), ...props, children: _jsx(InputField, { id: select.triggerId, ref: (node) => {
+                select.triggerInputRef.current = node;
+            }, readOnly: true, disabled: select.disabled, value: hasValue ? selectedLabel : "", placeholder: hasValue ? undefined : placeholder ?? select.placeholder, size: select.size, radius: select.radius, variant: select.variant, role: "combobox", "aria-expanded": select.select.opened, "aria-controls": select.listId, "aria-haspopup": "listbox", "aria-autocomplete": select.searchable ? "list" : "none", "aria-disabled": select.disabled, className: cx("cursor-pointer", select.getStyles("triggerInput")), rightSection: rightSection ?? (_jsx(ChevronIcon, { direction: "down", size: 14, className: cx("transition-transform", select.select.opened && "rotate-180", select.getStyles("triggerIcon")) })) }) }));
+});
+SelectTrigger.displayName = "@refraktor/core/Select.Trigger";
+export default SelectTrigger;

package/build/components/select/select.context.d.ts

@@ -0,0 +1,69 @@
+import type { MutableRefObject, ReactNode } from "react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import type { InputVariant } from "../input";
+import type { TransitionProps } from "../transition";
+import type { SelectClassNames } from "./select.types";
+import type { UseSelectReturn } from "./use-select";
+export interface SelectItemRegistration {
+    id: string;
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+    label: string;
+    textValue: string;
+    groupId?: string;
+    select: () => void;
+}
+export interface SelectContextValue {
+    select: UseSelectReturn;
+    value: string | null;
+    selectValue: (value: string, label: string) => void;
+    searchable: boolean;
+    search: string;
+    setSearch: (value: string) => void;
+    placeholder: string;
+    searchPlaceholder: string;
+    nothingFound: ReactNode;
+    disabled: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: InputVariant;
+    withinPortal: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    listId: string;
+    triggerId: string;
+    triggerInputRef: MutableRefObject<HTMLInputElement | null>;
+    searchInputRef: MutableRefObject<HTMLInputElement | null>;
+    registerItem: (item: SelectItemRegistration) => () => void;
+    getItems: () => SelectItemRegistration[];
+    getVisibleItems: () => SelectItemRegistration[];
+    hasVisibleItems: () => boolean;
+    isSearchMatch: (textValue: string) => boolean;
+    isGroupVisible: (groupId: string) => boolean;
+    getSelectedLabel: () => string;
+    focusFirstItem: () => void;
+    focusLastItem: () => void;
+    focusSelectedOrFirstItem: () => void;
+    getStyles: (part: keyof SelectClassNames) => string | undefined;
+}
+export interface SelectGroupContextValue {
+    groupId: string;
+}
+export declare const SelectProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: SelectContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useSelectContext: () => SelectContextValue;
+export declare const SelectGroupProvider: ({ value, children }: {
+    value: SelectGroupContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useSelectGroupContext: () => SelectGroupContextValue | null;
+export declare function useSelectItemsRegistry(): {
+    registerItem: (item: SelectItemRegistration) => () => void;
+    getItems: () => SelectItemRegistration[];
+};
+export declare function sortSelectItems(items: SelectItemRegistration[]): SelectItemRegistration[];
+export declare function getNavigableSelectItems(items: SelectItemRegistration[]): SelectItemRegistration[];
+export declare function findFocusedSelectItemIndex(items: SelectItemRegistration[]): number;
+export declare function focusSelectItem(item?: SelectItemRegistration): void;
+export declare function getNodeTextValue(children: ReactNode, explicitTextValue?: string): string;
+//# sourceMappingURL=select.context.d.ts.map

package/build/components/select/select.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.context.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.context.ts"],"names":[],"mappings":"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"}