@refraktor/core 0.0.3 → 0.0.4

package/build/components/combobox/combobox-input/combobox-input.js

@@ -0,0 +1,101 @@
+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 { useComboboxContext } from "../combobox.context";
+const ComboboxInput = factory(({ className, placeholder, leftSection, rightSection, onKeyDown, ...props }, ref) => {
+    const { cx } = useTheme();
+    const combobox = useComboboxContext();
+    return (_jsx("div", { ref: (node) => {
+            combobox.combobox.refs.setReference(node);
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: cx("w-full", combobox.getStyles("input"), className), "data-opened": combobox.combobox.opened, ...combobox.combobox.getReferenceProps({
+            onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented || combobox.disabled) {
+                    return;
+                }
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    if (!combobox.combobox.opened) {
+                        combobox.combobox.open();
+                        requestAnimationFrame(combobox.setActiveToSelectedOrFirst);
+                        return;
+                    }
+                    combobox.moveActiveOption(1);
+                    return;
+                }
+                if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (!combobox.combobox.opened) {
+                        combobox.combobox.open();
+                        requestAnimationFrame(combobox.setActiveToLast);
+                        return;
+                    }
+                    combobox.moveActiveOption(-1);
+                    return;
+                }
+                if (event.key === "Home" && combobox.combobox.opened) {
+                    event.preventDefault();
+                    combobox.setActiveToFirst();
+                    return;
+                }
+                if (event.key === "End" && combobox.combobox.opened) {
+                    event.preventDefault();
+                    combobox.setActiveToLast();
+                    return;
+                }
+                if (event.key === "Enter") {
+                    if (!combobox.combobox.opened) {
+                        combobox.combobox.open();
+                        requestAnimationFrame(combobox.setActiveToSelectedOrFirst);
+                        return;
+                    }
+                    event.preventDefault();
+                    combobox.selectActiveOption();
+                    return;
+                }
+                if (event.key === "Escape" && combobox.combobox.opened) {
+                    event.preventDefault();
+                    combobox.combobox.close();
+                    if (combobox.value !== null) {
+                        combobox.setSearch(combobox.getSelectedLabel());
+                    }
+                    return;
+                }
+                if (event.key === "Tab") {
+                    combobox.combobox.close();
+                }
+            }
+        }), ...props, children: _jsx(InputField, { id: combobox.inputId, ref: (node) => {
+                combobox.inputRef.current = node;
+            }, required: combobox.required, error: combobox.error, disabled: combobox.disabled, value: combobox.search, placeholder: placeholder ?? combobox.placeholder, size: combobox.size, radius: combobox.radius, variant: combobox.variant, role: "combobox", autoComplete: "off", "aria-expanded": combobox.combobox.opened, "aria-controls": combobox.listId, "aria-haspopup": "listbox", "aria-autocomplete": "list", "aria-disabled": combobox.disabled, "aria-activedescendant": combobox.combobox.opened
+                ? combobox.activeOptionId ?? undefined
+                : undefined, className: cx("cursor-text", combobox.getStyles("inputField")), leftSection: leftSection, rightSection: rightSection ?? (_jsx(ChevronIcon, { direction: "down", size: 14, className: cx("transition-transform", combobox.combobox.opened && "rotate-180", combobox.getStyles("inputIcon")) })), onFocus: () => {
+                if (combobox.openOnFocus && !combobox.disabled) {
+                    combobox.combobox.open();
+                }
+            }, onClick: () => {
+                if (!combobox.disabled && !combobox.combobox.opened) {
+                    combobox.combobox.open();
+                }
+            }, onChange: (event) => {
+                const nextSearch = event.currentTarget.value;
+                combobox.setSearch(nextSearch);
+                if (combobox.value !== null &&
+                    nextSearch !== combobox.getSelectedLabel()) {
+                    combobox.clearValue();
+                }
+                if (!combobox.combobox.opened && !combobox.disabled) {
+                    combobox.combobox.open();
+                }
+            } }) }));
+});
+ComboboxInput.displayName = "@refraktor/core/Combobox.Input";
+export default ComboboxInput;

package/build/components/combobox/combobox-input/index.d.ts

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

package/build/components/combobox/combobox-input/index.d.ts.map

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

package/build/components/combobox/combobox-input/index.js

@@ -0,0 +1 @@
+export { default as ComboboxInput } from "./combobox-input";

package/build/components/combobox/combobox-option/combobox-option.d.ts

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

package/build/components/combobox/combobox-option/combobox-option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-option.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-option/combobox-option.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AAEtE,QAAA,MAAM,cAAc,qEAwJnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/build/components/combobox/combobox-option/combobox-option.js

@@ -0,0 +1,86 @@
+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, useComboboxContext, useComboboxGroupContext } from "../combobox.context";
+const ComboboxOption = factory(({ id, value, children, disabled, textValue, className, onClick, onMouseMove, onKeyDown, onSelect, ...props }, ref) => {
+    const { cx } = useTheme();
+    const combobox = useComboboxContext();
+    const group = useComboboxGroupContext();
+    const _id = useId(id);
+    const optionRef = useRef(null);
+    const resolvedTextValue = getNodeTextValue(children, textValue) || value;
+    const isVisible = combobox.isOptionVisible(_id);
+    const isSelected = combobox.value === value;
+    const isActive = combobox.activeOptionId === _id;
+    const handleSelect = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        combobox.selectValue(value, resolvedTextValue);
+        onSelect?.(value);
+    }, [combobox, disabled, onSelect, resolvedTextValue, value]);
+    useEffect(() => {
+        return combobox.registerItem({
+            id: _id,
+            value,
+            ref: optionRef,
+            disabled: !!disabled,
+            label: resolvedTextValue,
+            textValue: resolvedTextValue,
+            groupId: group?.groupId,
+            select: handleSelect
+        });
+    }, [
+        _id,
+        combobox,
+        disabled,
+        group?.groupId,
+        handleSelect,
+        resolvedTextValue,
+        value
+    ]);
+    useEffect(() => {
+        if (!isActive || !isVisible) {
+            return;
+        }
+        if (typeof optionRef.current?.scrollIntoView === "function") {
+            optionRef.current.scrollIntoView({ block: "nearest" });
+        }
+    }, [isActive, isVisible]);
+    return (_jsxs("button", { ref: (node) => {
+            optionRef.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-active": isActive, "data-disabled": disabled, "aria-selected": isSelected, "aria-disabled": disabled, className: cx("w-full text-left p-1.5 text-xs rounded-none appearance-none border-none bg-transparent", "inline-flex items-center gap-2 outline-none transition-colors", "hover:bg-[var(--refraktor-bg-hover)]", "data-[active=true]:bg-[var(--refraktor-bg-hover)]", "data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed", getRadius(combobox.radius), combobox.getStyles("option"), className), onMouseMove: (event) => {
+            onMouseMove?.(event);
+            if (!disabled) {
+                combobox.setActiveOptionId(_id);
+            }
+        }, onMouseDown: (event) => {
+            event.preventDefault();
+        }, 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", combobox.getStyles("optionLabel")), children: children }), isSelected && (_jsx("span", { className: cx("inline-flex items-center shrink-0 text-[var(--refraktor-primary)]", combobox.getStyles("optionCheck")), children: _jsx(CheckIcon, { size: 14 }) }))] }));
+});
+ComboboxOption.displayName = "@refraktor/core/Combobox.Option";
+export default ComboboxOption;

package/build/components/combobox/combobox-option/index.d.ts

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

package/build/components/combobox/combobox-option/index.d.ts.map

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

package/build/components/combobox/combobox-option/index.js

@@ -0,0 +1 @@
+export { default as ComboboxOption } from "./combobox-option";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-root.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox-root/combobox-root.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAER,0BAA0B,EAE7B,MAAM,mBAAmB,CAAC;AA4D3B,QAAA,MAAM,YAAY,mEAgZhB,CAAC;AAIH,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,282 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useUncontrolled } from "@refraktor/utils";
+import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTheme } from "../../../theme";
+import { factory, useClassNames, useProps } from "../../../utils";
+import { ComboboxProvider, getNavigableComboboxItems, getNodeTextValue, useComboboxItemsRegistry } from "../combobox.context";
+import { useCombobox } from "../use-combobox";
+import { InputWrapper } from "../../input/input-wrapper";
+const defaultProps = {
+    positioning: {
+        placement: "bottom-start",
+        offset: 4
+    },
+    middlewares: { flip: true, shift: true },
+    placeholder: "Type to search",
+    nothingFound: "No options",
+    size: "md",
+    radius: "default",
+    variant: "default",
+    withinPortal: true,
+    openOnFocus: true,
+    closeOnClickOutside: true,
+    closeOnEscape: true
+};
+function collectComboboxOptionLabels(node, labels) {
+    Children.forEach(node, (child) => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const typeDisplayName = child.type
+            .displayName;
+        const props = child.props;
+        if (typeDisplayName === "@refraktor/core/Combobox.Option" &&
+            typeof props.value === "string") {
+            labels.set(props.value, getNodeTextValue(props.children, props.textValue) || props.value);
+        }
+        if (props.children !== undefined && props.children !== null) {
+            collectComboboxOptionLabels(props.children, labels);
+        }
+    });
+}
+function getComboboxOptionLabels(node) {
+    const labels = new Map();
+    collectComboboxOptionLabels(node, labels);
+    return labels;
+}
+const ComboboxRoot = factory((_props, ref) => {
+    const { cx } = useTheme();
+    const { id, children, label, description, error, required, withAsterisk, value, defaultValue, onChange, searchValue, defaultSearchValue, onSearchChange, opened, defaultOpened, onOpenedChange, positioning, middlewares, disabled, openOnFocus, placeholder, nothingFound, filter, limit, size, radius, variant, withinPortal, closeOnClickOutside, closeOnEscape, transitionProps, className, classNames, ...props } = useProps("Combobox", defaultProps, _props);
+    const classes = useClassNames("Combobox", classNames);
+    const _id = useId(id);
+    const listId = `${_id}-listbox`;
+    const inputId = `${_id}-input`;
+    const hasWrapper = label || description || error;
+    const inferredLabels = useMemo(() => getComboboxOptionLabels(children), [children]);
+    const [selectedValue, setSelectedValue] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: null,
+        onChange
+    });
+    const [search, setSearch] = useUncontrolled({
+        value: searchValue,
+        defaultValue: defaultSearchValue,
+        finalValue: "",
+        onChange: onSearchChange
+    });
+    const combobox = useCombobox({
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        positioning,
+        middlewares,
+        disabled,
+        closeOnClickOutside,
+        closeOnEscape
+    });
+    const { registerItem: registerRegistryItem, getItems } = useComboboxItemsRegistry();
+    const labelsRef = useRef(new Map());
+    const inputRef = useRef(null);
+    const [activeOptionId, setActiveOptionId] = useState(null);
+    const getLabelForValue = useCallback((itemValue) => {
+        return (labelsRef.current.get(itemValue) ??
+            inferredLabels.get(itemValue) ??
+            itemValue);
+    }, [inferredLabels]);
+    const selectedLabel = useMemo(() => {
+        if (!selectedValue) {
+            return "";
+        }
+        return getLabelForValue(selectedValue);
+    }, [getLabelForValue, selectedValue]);
+    const normalizedQuery = useMemo(() => {
+        const query = search.trim();
+        if (combobox.opened && selectedValue && query === selectedLabel) {
+            return "";
+        }
+        return query;
+    }, [combobox.opened, search, selectedLabel, selectedValue]);
+    const normalizedQueryLower = normalizedQuery.toLowerCase();
+    const isSearchMatch = useCallback((item) => {
+        if (!normalizedQuery) {
+            return true;
+        }
+        if (filter) {
+            return filter({
+                value: item.value,
+                label: item.label,
+                textValue: item.textValue,
+                disabled: item.disabled,
+                groupId: item.groupId
+            }, normalizedQuery);
+        }
+        return item.textValue.toLowerCase().includes(normalizedQueryLower);
+    }, [filter, normalizedQuery, normalizedQueryLower]);
+    const getVisibleItems = useCallback(() => {
+        const matchedItems = getItems().filter((item) => isSearchMatch(item));
+        if (typeof limit === "number" && limit > 0) {
+            return matchedItems.slice(0, limit);
+        }
+        return matchedItems;
+    }, [getItems, isSearchMatch, limit]);
+    const hasVisibleItems = useCallback(() => getVisibleItems().length > 0, [getVisibleItems]);
+    const isOptionVisible = useCallback((itemId) => getVisibleItems().some((item) => item.id === itemId), [getVisibleItems]);
+    const isGroupVisible = useCallback((groupId) => {
+        if (!normalizedQuery) {
+            return true;
+        }
+        const groupItems = getItems().filter((item) => item.groupId === groupId);
+        if (!groupItems.length) {
+            return true;
+        }
+        return groupItems.some((item) => isSearchMatch(item));
+    }, [getItems, isSearchMatch, normalizedQuery]);
+    const getSelectedLabel = useCallback(() => {
+        return selectedLabel;
+    }, [selectedLabel]);
+    const getVisibleNavigableItems = useCallback(() => getNavigableComboboxItems(getVisibleItems()), [getVisibleItems]);
+    const setActiveToFirst = useCallback(() => {
+        const items = getVisibleNavigableItems();
+        setActiveOptionId(items[0]?.id ?? null);
+    }, [getVisibleNavigableItems]);
+    const setActiveToLast = useCallback(() => {
+        const items = getVisibleNavigableItems();
+        setActiveOptionId(items[items.length - 1]?.id ?? null);
+    }, [getVisibleNavigableItems]);
+    const setActiveToSelectedOrFirst = useCallback(() => {
+        const items = getVisibleNavigableItems();
+        if (!items.length) {
+            setActiveOptionId(null);
+            return;
+        }
+        const selectedItem = items.find((item) => item.value === selectedValue);
+        setActiveOptionId((selectedItem ?? items[0]).id);
+    }, [getVisibleNavigableItems, selectedValue]);
+    const moveActiveOption = useCallback((direction) => {
+        const items = getVisibleNavigableItems();
+        if (!items.length) {
+            setActiveOptionId(null);
+            return;
+        }
+        const activeIndex = items.findIndex((item) => item.id === activeOptionId);
+        if (activeIndex === -1) {
+            setActiveOptionId(direction === 1 ? items[0].id : items[items.length - 1].id);
+            return;
+        }
+        const nextIndex = (activeIndex + direction + items.length) % items.length;
+        setActiveOptionId(items[nextIndex].id);
+    }, [activeOptionId, getVisibleNavigableItems]);
+    const selectActiveOption = useCallback(() => {
+        if (!activeOptionId) {
+            return;
+        }
+        const activeItem = getVisibleNavigableItems().find((item) => item.id === activeOptionId);
+        activeItem?.select();
+    }, [activeOptionId, getVisibleNavigableItems]);
+    const clearValue = useCallback(() => {
+        setSelectedValue(null);
+    }, [setSelectedValue]);
+    const selectValue = useCallback((nextValue, nextLabel) => {
+        labelsRef.current.set(nextValue, nextLabel);
+        setSelectedValue(nextValue);
+        setSearch(nextLabel);
+        combobox.close();
+    }, [combobox, setSearch, setSelectedValue]);
+    const registerItem = useCallback((item) => {
+        labelsRef.current.set(item.value, item.label);
+        return registerRegistryItem(item);
+    }, [registerRegistryItem]);
+    useEffect(() => {
+        if (!combobox.opened) {
+            setActiveOptionId(null);
+            return;
+        }
+        setActiveToSelectedOrFirst();
+    }, [combobox.opened, setActiveToSelectedOrFirst]);
+    useEffect(() => {
+        if (!combobox.opened) {
+            return;
+        }
+        const visibleItems = getVisibleNavigableItems();
+        if (!visibleItems.length) {
+            setActiveOptionId(null);
+            return;
+        }
+        if (!activeOptionId) {
+            setActiveOptionId(visibleItems[0].id);
+            return;
+        }
+        const hasActiveItem = visibleItems.some((item) => item.id === activeOptionId);
+        if (!hasActiveItem) {
+            setActiveOptionId(visibleItems[0].id);
+        }
+    }, [activeOptionId, combobox.opened, getVisibleNavigableItems]);
+    const isSearchControlled = searchValue !== undefined;
+    useEffect(() => {
+        if (isSearchControlled || combobox.opened || !selectedValue) {
+            return;
+        }
+        const selectedLabel = getSelectedLabel();
+        if (search !== selectedLabel) {
+            setSearch(selectedLabel);
+        }
+    }, [
+        combobox.opened,
+        getSelectedLabel,
+        isSearchControlled,
+        search,
+        selectedValue,
+        setSearch
+    ]);
+    const activeValue = useMemo(() => {
+        if (!activeOptionId) {
+            return null;
+        }
+        const activeItem = getItems().find((item) => item.id === activeOptionId);
+        return activeItem?.value ?? null;
+    }, [activeOptionId, getItems]);
+    const getStyles = useCallback((part) => classes[part], [classes]);
+    const context = {
+        combobox,
+        value: selectedValue,
+        clearValue,
+        selectValue,
+        search,
+        setSearch,
+        placeholder,
+        nothingFound,
+        disabled: !!disabled,
+        error: !!error,
+        required: !!required,
+        openOnFocus: !!openOnFocus,
+        size,
+        radius,
+        variant,
+        withinPortal: !!withinPortal,
+        transitionProps,
+        listId,
+        inputId,
+        inputRef,
+        activeOptionId,
+        activeValue,
+        setActiveOptionId,
+        setActiveToFirst,
+        setActiveToLast,
+        setActiveToSelectedOrFirst,
+        moveActiveOption,
+        selectActiveOption,
+        registerItem,
+        getItems,
+        getVisibleItems,
+        hasVisibleItems,
+        isOptionVisible,
+        isGroupVisible,
+        getSelectedLabel,
+        getStyles
+    };
+    const content = (_jsx("div", { ref: ref, id: _id, className: cx("relative w-full", classes.root, className), ...props, children: children }));
+    return (_jsx(ComboboxProvider, { value: context, children: hasWrapper ? (_jsx(InputWrapper, { label: label, description: description, error: error, required: required, withAsterisk: withAsterisk, inputId: inputId, children: content })) : (content) }));
+});
+ComboboxRoot.displayName = "@refraktor/core/Combobox.Root";
+export default ComboboxRoot;

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

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

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

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

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

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

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

@@ -0,0 +1,73 @@
+import type { MutableRefObject, ReactNode } from "react";
+import type { RefraktorRadius, RefraktorSize } from "../../theme";
+import type { InputVariant } from "../input";
+import type { TransitionProps } from "../transition";
+import type { ComboboxClassNames } from "./combobox.types";
+import type { UseComboboxReturn } from "./use-combobox";
+export interface ComboboxItemRegistration {
+    id: string;
+    value: string;
+    ref: MutableRefObject<HTMLElement | null>;
+    disabled: boolean;
+    label: string;
+    textValue: string;
+    groupId?: string;
+    select: () => void;
+}
+export interface ComboboxContextValue {
+    combobox: UseComboboxReturn;
+    value: string | null;
+    clearValue: () => void;
+    selectValue: (value: string, label: string) => void;
+    search: string;
+    setSearch: (value: string) => void;
+    placeholder: string;
+    nothingFound: ReactNode;
+    disabled: boolean;
+    error: boolean;
+    required: boolean;
+    openOnFocus: boolean;
+    size: RefraktorSize;
+    radius: RefraktorRadius;
+    variant: InputVariant;
+    withinPortal: boolean;
+    transitionProps?: Omit<TransitionProps, "children" | "mounted">;
+    listId: string;
+    inputId: string;
+    inputRef: MutableRefObject<HTMLInputElement | null>;
+    activeOptionId: string | null;
+    activeValue: string | null;
+    setActiveOptionId: (value: string | null) => void;
+    setActiveToFirst: () => void;
+    setActiveToLast: () => void;
+    setActiveToSelectedOrFirst: () => void;
+    moveActiveOption: (direction: 1 | -1) => void;
+    selectActiveOption: () => void;
+    registerItem: (item: ComboboxItemRegistration) => () => void;
+    getItems: () => ComboboxItemRegistration[];
+    getVisibleItems: () => ComboboxItemRegistration[];
+    hasVisibleItems: () => boolean;
+    isOptionVisible: (itemId: string) => boolean;
+    isGroupVisible: (groupId: string) => boolean;
+    getSelectedLabel: () => string;
+    getStyles: (part: keyof ComboboxClassNames) => string | undefined;
+}
+export interface ComboboxGroupContextValue {
+    groupId: string;
+}
+export declare const ComboboxProvider: ({ children, value }: {
+    children: React.ReactNode;
+    value: ComboboxContextValue;
+}) => import("react/jsx-runtime").JSX.Element, useComboboxContext: () => ComboboxContextValue;
+export declare const ComboboxGroupProvider: ({ value, children }: {
+    value: ComboboxGroupContextValue;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useComboboxGroupContext: () => ComboboxGroupContextValue | null;
+export declare function useComboboxItemsRegistry(): {
+    registerItem: (item: ComboboxItemRegistration) => () => void;
+    getItems: () => ComboboxItemRegistration[];
+};
+export declare function sortComboboxItems(items: ComboboxItemRegistration[]): ComboboxItemRegistration[];
+export declare function getNavigableComboboxItems(items: ComboboxItemRegistration[]): ComboboxItemRegistration[];
+export declare function getNodeTextValue(children: ReactNode, explicitTextValue?: string): string;
+//# sourceMappingURL=combobox.context.d.ts.map

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

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

package/build/components/combobox/combobox.context.js

@@ -0,0 +1,50 @@
+import { createOptionalContext, createSafeContext } from "@refraktor/utils";
+import { useCallback, useRef } from "react";
+export const [ComboboxProvider, useComboboxContext] = createSafeContext("Combobox component was not found in tree. Make sure Combobox.Input, Combobox.Dropdown, Combobox.Group and Combobox.Option are wrapped with Combobox.Root or Combobox.");
+export const [ComboboxGroupProvider, useComboboxGroupContext] = createOptionalContext();
+export function useComboboxItemsRegistry() {
+    const itemsRef = useRef([]);
+    const registerItem = useCallback((item) => {
+        itemsRef.current = [
+            ...itemsRef.current.filter((x) => x.id !== item.id),
+            item
+        ];
+        return () => {
+            itemsRef.current = itemsRef.current.filter((x) => x.id !== item.id);
+        };
+    }, []);
+    const getItems = useCallback(() => sortComboboxItems(itemsRef.current), []);
+    return {
+        registerItem,
+        getItems
+    };
+}
+export function sortComboboxItems(items) {
+    return [...items].sort((a, b) => {
+        const aNode = a.ref.current;
+        const bNode = b.ref.current;
+        if (!aNode || !bNode || aNode === bNode) {
+            return 0;
+        }
+        const position = aNode.compareDocumentPosition(bNode);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+        }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+}
+export function getNavigableComboboxItems(items) {
+    return items.filter((item) => !item.disabled);
+}
+export function getNodeTextValue(children, explicitTextValue) {
+    if (explicitTextValue) {
+        return explicitTextValue;
+    }
+    if (typeof children === "string" || typeof children === "number") {
+        return String(children);
+    }
+    return "";
+}

package/build/components/combobox/combobox.d.ts

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

package/build/components/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGR,sBAAsB,EAGzB,MAAM,kBAAkB,CAAC;AAM1B,QAAA,MAAM,QAAQ,4DAgDZ,CAAC;AAWH,eAAe,QAAQ,CAAC"}