@orcestr/ui 0.0.1

package/dist/components/Modal/Modal.js

@@ -0,0 +1,155 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useLayoutEffect, useRef, } from 'react';
+import { LuX } from 'react-icons/lu';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { usePresence } from '../../hooks/usePresence';
+import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
+import { OrcestrThemeContext } from '../../theme/useTheme';
+import { cn } from '../../utils/cn';
+import { IconButton } from '../IconButton/IconButton';
+import { lockOverlayScroll, useOverlayContext, useOverlayLayerIndex, } from '../Overlay/OverlayProvider';
+import { Portal } from '../Portal/Portal';
+export function Modal({ open, onOpenChange, title, description, children, footer, maxWidth, minHeight, overlayColor, overlayOpacity, overlayBlur, borderColor, radius, shadow, animationDuration, animation, overlayClassName, overlayStyle, className, contentClassName, bodyClassName, closeOnOverlayClick = true, testId, }) {
+    const { copy } = useOrcestrUiLocale();
+    const themeContext = useContext(OrcestrThemeContext);
+    const overlayContext = useOverlayContext();
+    const layerRef = useRef(null);
+    const contentRef = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    const actualAnimationDuration = animationDuration ?? themeContext?.theme.motion.modalDuration ?? '380ms';
+    const actualAnimation = animation ?? themeContext?.theme.motion.modalAnimation ?? 'zoom-blur';
+    const actualMaxWidth = maxWidth ?? themeContext?.theme.components.modalMaxWidth ?? 680;
+    const actualOverlayColor = overlayColor ?? themeContext?.theme.motion.modalOverlayColor ?? 'transparent';
+    const actualOverlayOpacity = overlayOpacity ?? themeContext?.theme.motion.modalOverlayOpacity ?? 0;
+    const actualOverlayBlur = overlayBlur ?? themeContext?.theme.motion.modalOverlayBlur ?? 10;
+    const actualAnimationMs = durationMs(actualAnimationDuration, 380);
+    const actualAnimationEase = themeContext?.theme.motion.ease ?? 'cubic-bezier(0.22, 1, 0.36, 1)';
+    const { present, state } = usePresence(open, actualAnimationMs);
+    const layerIndex = useOverlayLayerIndex(present);
+    const zIndex = overlayContext.zIndex.modal + layerIndex * 20;
+    const overlayBlurValue = cssLength(actualOverlayBlur) ?? '10px';
+    const overlayBackdropFilter = `blur(${overlayBlurValue})`;
+    const overlayBackground = modalOverlayBackground(actualOverlayColor, actualOverlayOpacity);
+    useFocusTrap(contentRef, open, () => onOpenChange(false));
+    useEffect(() => {
+        if (!open)
+            return;
+        return lockOverlayScroll();
+    }, [open]);
+    useLayoutEffect(() => {
+        const layer = layerRef.current;
+        if (!present || !layer || !layer.animate)
+            return;
+        if (state !== 'opening' && state !== 'closing')
+            return;
+        const closedFrame = {
+            backgroundColor: 'rgb(0 0 0 / 0)',
+            backdropFilter: 'blur(0px)',
+            WebkitBackdropFilter: 'blur(0px)',
+        };
+        const openFrame = {
+            backgroundColor: overlayBackground,
+            backdropFilter: overlayBackdropFilter,
+            WebkitBackdropFilter: overlayBackdropFilter,
+        };
+        const animation = layer.animate(state === 'opening'
+            ? [closedFrame, openFrame]
+            : [openFrame, closedFrame], {
+            duration: actualAnimationMs,
+            easing: actualAnimationEase,
+            fill: 'forwards',
+        });
+        return () => {
+            animation.cancel();
+        };
+    }, [
+        actualAnimationEase,
+        actualAnimationMs,
+        overlayBackdropFilter,
+        overlayBackground,
+        present,
+        state,
+    ]);
+    if (!present)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { ref: layerRef, className: cn('oui-modal-layer', overlayClassName, className), style: {
+                zIndex,
+                '--oui-modal-overlay-background': overlayBackground,
+                '--oui-modal-overlay-blur': overlayBlurValue,
+                '--oui-modal-animation-duration': cssDuration(actualAnimationDuration),
+                '--oui-modal-animation-ease': actualAnimationEase,
+                backgroundColor: overlayBackground,
+                backdropFilter: overlayBackdropFilter,
+                WebkitBackdropFilter: overlayBackdropFilter,
+                ...overlayStyle,
+            }, "data-state": state, "data-testid": testId, onPointerDown: (event) => {
+                if (event.target === event.currentTarget) {
+                    if (closeOnOverlayClick)
+                        onOpenChange(false);
+                }
+            }, children: _jsxs("div", { ref: contentRef, role: 'dialog', "aria-modal": 'true', "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, className: cn('oui-modal-content', contentClassName), "data-state": state, "data-animation": actualAnimation, "data-testid": testId ? `${testId}-content` : undefined, style: {
+                    width: typeof actualMaxWidth === 'number'
+                        ? `min(calc(100vw - 24px), ${actualMaxWidth}px)`
+                        : `min(calc(100vw - 24px), ${actualMaxWidth})`,
+                    minHeight: typeof minHeight === 'number'
+                        ? `${minHeight}px`
+                        : minHeight,
+                    '--oui-modal-border-color': borderColor,
+                    '--oui-modal-radius': cssLength(radius),
+                    '--oui-modal-shadow': shadow,
+                }, children: [_jsxs("div", { className: 'oui-modal-header', children: [_jsxs("div", { className: 'oui-modal-title-wrap', children: [title ? (_jsx("h2", { id: titleId, className: 'oui-modal-title', children: title })) : null, description ? (_jsx("p", { id: descriptionId, className: 'oui-modal-description', children: description })) : null] }), _jsx(IconButton, { v: 'ghost', icon: _jsx(LuX, { size: 18 }), "aria-label": copy.common.close, onClick: () => onOpenChange(false) })] }), _jsx("div", { className: cn('oui-modal-body', bodyClassName), children: children }), footer ? _jsx("div", { className: 'oui-modal-footer', children: footer }) : null] }) }) }));
+}
+function cssLength(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function cssDuration(value) {
+    return typeof value === 'number' ? `${value}ms` : value;
+}
+function durationMs(value, fallbackMs) {
+    if (value === undefined)
+        return fallbackMs;
+    if (typeof value === 'number')
+        return Math.max(0, value);
+    const normalized = value.trim().toLowerCase();
+    const numeric = Number.parseFloat(normalized);
+    if (!Number.isFinite(numeric))
+        return fallbackMs;
+    if (normalized.endsWith('ms'))
+        return Math.max(0, numeric);
+    if (normalized.endsWith('s'))
+        return Math.max(0, numeric * 1000);
+    return Math.max(0, numeric);
+}
+function modalOverlayBackground(color, opacity) {
+    const normalizedOpacity = Math.max(0, Math.min(1, opacity));
+    if (normalizedOpacity === 0 || color.trim().toLowerCase() === 'transparent') {
+        return 'rgb(0 0 0 / 0.001)';
+    }
+    const rgb = hexToRgb(color);
+    if (rgb) {
+        return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${normalizedOpacity})`;
+    }
+    return `color-mix(in srgb, ${color} ${Math.round(normalizedOpacity * 100)}%, transparent)`;
+}
+function hexToRgb(value) {
+    const color = value.trim();
+    if (/^#[0-9a-f]{3}$/i.test(color)) {
+        return {
+            r: Number.parseInt(color[1] + color[1], 16),
+            g: Number.parseInt(color[2] + color[2], 16),
+            b: Number.parseInt(color[3] + color[3], 16),
+        };
+    }
+    if (/^#[0-9a-f]{6}$/i.test(color)) {
+        return {
+            r: Number.parseInt(color.slice(1, 3), 16),
+            g: Number.parseInt(color.slice(3, 5), 16),
+            b: Number.parseInt(color.slice(5, 7), 16),
+        };
+    }
+    return null;
+}

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../../theme/systemProps';
+import type { SelectItem } from '../Select/Select';
+export declare function MultiSelect<V extends string = string>({ items, value, onValueChange, placeholder, clearable, disabled, showChevron, emptyText, clearLabel, selectedFallbackLabel, size, maxHeight, className, renderValue, testId, }: {
+    items: ReadonlyArray<SelectItem<V>>;
+    value: ReadonlyArray<V>;
+    onValueChange: (value: V[]) => void;
+    placeholder?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    showChevron?: boolean;
+    emptyText?: ReactNode;
+    clearLabel?: string;
+    selectedFallbackLabel?: ReactNode | ((values: ReadonlyArray<V>) => ReactNode);
+    size?: UiSize;
+    maxHeight?: number;
+    className?: string;
+    renderValue?: (items: ReadonlyArray<SelectItem<V>>) => ReactNode;
+    testId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/components/MultiSelect/MultiSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGpD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAEjD,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACnD,KAAK,EACL,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAgB,EAChB,QAAgB,EAChB,WAAkB,EAClB,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,IAAQ,EACR,SAAe,EACf,SAAS,EACT,WAAW,EACX,MAAM,GACT,EAAE;IACC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2NA"}

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { LuCheck, LuChevronsUpDown, LuX } from 'react-icons/lu';
+import { useListNavigation } from '../../hooks/useListNavigation';
+import { useTypeahead } from '../../hooks/useTypeahead';
+import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
+import { Button } from '../Button/Button';
+import { Popover } from '../Popover/Popover';
+export function MultiSelect({ items, value, onValueChange, placeholder, clearable = true, disabled = false, showChevron = true, emptyText, clearLabel, selectedFallbackLabel, size = 3, maxHeight = 280, className, renderValue, testId, }) {
+    const { copy } = useOrcestrUiLocale();
+    const [open, setOpen] = useState(false);
+    const optionsRef = useRef(null);
+    const selectedItems = useMemo(() => items.filter((item) => value.includes(item.value)), [items, value]);
+    const selectedSet = useMemo(() => new Set(value), [value]);
+    const navigationItems = useMemo(() => items.map((item) => ({
+        value: item.value,
+        disabled: item.disabled,
+        searchText: selectItemText(item),
+    })), [items]);
+    const navigation = useListNavigation(navigationItems, {
+        value: value[0] ?? null,
+    });
+    const highlighted = navigation.highlightedValue;
+    const canClear = clearable && selectedItems.length > 0 && !disabled;
+    const triggerLabel = selectedItems.length > 0
+        ? renderValue?.(selectedItems) ?? defaultMultiSelectLabel(selectedItems)
+        : value.length > 0
+            ? typeof selectedFallbackLabel === 'function'
+                ? selectedFallbackLabel(value)
+                : selectedFallbackLabel
+            : null;
+    useEffect(() => {
+        if (!open || highlighted === null)
+            return;
+        const node = optionsRef.current?.querySelector(`[data-oui-multi-select-value="${cssAttr(highlighted)}"]`);
+        node?.scrollIntoView({ block: 'nearest' });
+    }, [highlighted, open]);
+    const toggle = useCallback((nextValue) => {
+        if (selectedSet.has(nextValue)) {
+            onValueChange(value.filter((itemValue) => itemValue !== nextValue));
+            return;
+        }
+        onValueChange([...value, nextValue]);
+    }, [onValueChange, selectedSet, value]);
+    const close = useCallback(() => {
+        setOpen(false);
+        navigation.reset();
+    }, [navigation]);
+    const handleTypeahead = useTypeahead((query) => {
+        const match = navigation.enabledItems.find((item) => item.searchText?.toLowerCase().startsWith(query));
+        if (match)
+            navigation.setHighlightedValue(match.value);
+    });
+    const handleKeyDown = useCallback((event) => {
+        if (!open && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+            event.preventDefault();
+            setOpen(true);
+            return;
+        }
+        if (!open)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                navigation.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                navigation.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                navigation.first();
+                break;
+            case 'End':
+                event.preventDefault();
+                navigation.last();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (highlighted !== null)
+                    toggle(highlighted);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                close();
+                break;
+            default:
+                if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+                    handleTypeahead(event.key);
+                }
+        }
+    }, [close, handleTypeahead, highlighted, navigation, open, toggle]);
+    return (_jsx(Popover, { open: open, onOpenChange: (next) => {
+            setOpen(next);
+            if (!next)
+                navigation.reset();
+        }, trigger: _jsx(Button, { type: 'button', v: 'surface', size: size, disabled: disabled, fullWidth: true, pressAnimation: 'none', className: 'oui-combobox-trigger oui-multi-select-trigger', "data-state": open ? 'open' : 'closed', testId: testId, "aria-haspopup": 'listbox', "aria-expanded": open, onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clearSelectedValues, className: 'oui-combobox-clear', onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            onValueChange([]);
+                            navigation.reset();
+                        }, children: _jsx(LuX, { size: 14 }) })) : null, showChevron ? _jsx(LuChevronsUpDown, { size: 15 }) : null] }), children: _jsx("span", { className: triggerLabel
+                    ? 'oui-combobox-trigger-label'
+                    : 'oui-combobox-placeholder', children: triggerLabel ?? placeholder ?? copy.common.selectValue }) }), className: className ? `oui-select-content ${className}` : 'oui-select-content', testId: testId ? `${testId}-popover` : undefined, align: 'start', sideOffset: 4, matchTriggerWidth: true, disabled: disabled, children: _jsx("div", { ref: optionsRef, role: 'listbox', "aria-multiselectable": 'true', className: 'oui-combobox-scroll oui-combobox-options', "data-testid": testId ? `${testId}-listbox` : undefined, style: { maxHeight }, tabIndex: -1, onKeyDown: handleKeyDown, children: items.length === 0 ? (_jsx("div", { className: 'oui-combobox-empty', children: emptyText ?? copy.common.noOptions })) : (items.map((item) => {
+                const selected = selectedSet.has(item.value);
+                const isHighlighted = highlighted === item.value;
+                return (_jsxs("button", { type: 'button', role: 'option', "aria-selected": selected, disabled: item.disabled, className: 'oui-combobox-option oui-multi-select-option', "data-oui-multi-select-value": item.value, "data-selected": selected ? 'true' : 'false', "data-highlighted": isHighlighted ? 'true' : 'false', onMouseEnter: () => {
+                        if (!item.disabled) {
+                            navigation.setHighlightedValue(item.value);
+                        }
+                    }, onClick: () => {
+                        if (!item.disabled)
+                            toggle(item.value);
+                    }, children: [_jsx("span", { className: 'oui-multi-select-check', children: selected ? _jsx(LuCheck, { size: 14 }) : null }), _jsx("span", { className: 'oui-combobox-option-main', children: item.label })] }, item.value));
+            })) }) }));
+}
+function defaultMultiSelectLabel(items) {
+    if (items.length <= 2) {
+        return items.map((item) => selectItemText(item)).join(', ');
+    }
+    return `${items.length} selected`;
+}
+function selectItemText(item) {
+    const label = item.triggerLabel ?? item.label;
+    if (typeof label === 'string')
+        return label;
+    if (typeof label === 'number')
+        return String(label);
+    return item.searchText ?? String(item.value);
+}
+function cssAttr(value) {
+    return value.replace(/"/g, '\\"');
+}

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,4 @@
+import { type TextFieldProps } from '../TextField/TextField';
+export type NumberFieldProps = Omit<TextFieldProps, 'type'>;
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/components/NumberField/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,WAAW,+GAYvB,CAAC"}

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TextField } from '../TextField/TextField';
+export const NumberField = forwardRef(function NumberField({ testId, ...props }, ref) {
+    return (_jsx(TextField, { ref: ref, type: 'number', inputMode: 'decimal', testId: testId, ...props }));
+});

package/dist/components/Overlay/OverlayProvider.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type OverlayLayerKind = 'dropdown' | 'overlay' | 'modal' | 'toast';
+export type OverlayZIndex = Record<OverlayLayerKind, number>;
+type OverlayContextValue = {
+    portalContainer: HTMLElement | null;
+    zIndex: OverlayZIndex;
+};
+export type OverlayProviderProps = {
+    children: ReactNode;
+    container?: HTMLElement | null;
+    zIndex?: Partial<OverlayZIndex>;
+    testId?: string;
+};
+export declare function OverlayProvider({ children, container, zIndex, testId, }: OverlayProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useOverlayContext(): OverlayContextValue;
+export declare function useOverlayLayerIndex(active: boolean): number;
+export declare function lockOverlayScroll(): () => void;
+export {};
+//# sourceMappingURL=OverlayProvider.d.ts.map

package/dist/components/Overlay/OverlayProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/OverlayProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACvB,eAAe,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC,MAAM,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAqBF,wBAAgB,eAAe,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GACT,EAAE,oBAAoB,2CAiCtB;AAED,wBAAgB,iBAAiB,wBAEhC;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO,UAsBnD;AAKD,wBAAgB,iBAAiB,eAYhC"}

package/dist/components/Overlay/OverlayProvider.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+const defaultZIndex = {
+    dropdown: 980,
+    overlay: 1000,
+    modal: 1000,
+    toast: 2147483000,
+};
+const OverlayContext = createContext({
+    portalContainer: null,
+    zIndex: defaultZIndex,
+});
+const layerIds = [];
+const listeners = new Set();
+function emitLayerChange() {
+    for (const listener of listeners)
+        listener();
+}
+export function OverlayProvider({ children, container, zIndex, testId, }) {
+    const fallbackRef = useRef(null);
+    const [fallbackContainer, setFallbackContainer] = useState(null);
+    const resolvedZIndex = useMemo(() => ({ ...defaultZIndex, ...zIndex }), [zIndex]);
+    const value = useMemo(() => ({
+        portalContainer: container ?? fallbackContainer,
+        zIndex: resolvedZIndex,
+    }), [container, fallbackContainer, resolvedZIndex]);
+    useEffect(() => {
+        setFallbackContainer(fallbackRef.current);
+    }, []);
+    return (_jsxs(OverlayContext.Provider, { value: value, children: [children, container === undefined ? (_jsx("div", { ref: fallbackRef, className: 'oui-overlay-root', "data-testid": testId })) : null] }));
+}
+export function useOverlayContext() {
+    return useContext(OverlayContext);
+}
+export function useOverlayLayerIndex(active) {
+    const [id] = useState(() => Symbol('oui-layer'));
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        if (!active)
+            return;
+        layerIds.push(id);
+        emitLayerChange();
+        const update = () => {
+            setIndex(Math.max(0, layerIds.indexOf(id)));
+        };
+        listeners.add(update);
+        update();
+        return () => {
+            const currentIndex = layerIds.indexOf(id);
+            if (currentIndex !== -1)
+                layerIds.splice(currentIndex, 1);
+            listeners.delete(update);
+            emitLayerChange();
+        };
+    }, [active, id]);
+    return index;
+}
+let scrollLockCount = 0;
+let previousBodyOverflow = '';
+export function lockOverlayScroll() {
+    if (scrollLockCount === 0) {
+        previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    scrollLockCount += 1;
+    return () => {
+        scrollLockCount = Math.max(0, scrollLockCount - 1);
+        if (scrollLockCount === 0) {
+            document.body.style.overflow = previousBodyOverflow;
+        }
+    };
+}

package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import type { UiSize } from '../../theme/systemProps';
+export type PaginatedResult<T> = {
+    items: T[];
+    page: number;
+    page_size?: number;
+    total?: number;
+    has_next: boolean;
+};
+export type PaginatedComboboxSearchAction = {
+    label: string | ((search: string) => string);
+    onClick: (search: string) => void;
+    disabled?: boolean;
+};
+export type PaginatedComboboxProps<T> = {
+    loadPage: (page: number, search: string) => Promise<PaginatedResult<T>>;
+    getItemId: (item: T) => string | number;
+    renderOption: (item: T) => ReactNode;
+    renderSelectedLabel: (item: T) => ReactNode;
+    value: T | null;
+    onChange: (item: T | null) => void;
+    placeholder?: string;
+    emptyText?: ReactNode;
+    loadingText?: ReactNode;
+    errorText?: ReactNode;
+    retryLabel?: ReactNode;
+    searchPlaceholder?: string;
+    clearLabel?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    showChevron?: boolean;
+    size?: UiSize;
+    maxHeight?: number;
+    closeOnSelect?: boolean;
+    isItemSelected?: (item: T) => boolean;
+    searchAction?: PaginatedComboboxSearchAction;
+    optionAction?: {
+        label: (item: T) => string;
+        icon: ReactNode;
+        onClick: (item: T, close?: () => void) => void;
+        disabled?: (item: T) => boolean;
+    };
+    resetKey?: unknown;
+    debounceMs?: number;
+    testId?: string;
+};
+export declare function PaginatedCombobox<T>({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled, clearable, showChevron, size, maxHeight, closeOnSelect, isItemSelected, searchAction, optionAction, resetKey, debounceMs, testId, }: PaginatedComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PaginatedCombobox.d.ts.map

package/dist/components/PaginatedCombobox/PaginatedCombobox.d.ts.map

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