@orcestr/ui 0.0.1

package/dist/components/PaginatedCombobox/PaginatedCombobox.js

@@ -0,0 +1,223 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { LuCheck, LuChevronsUpDown, LuPlus, LuX } from 'react-icons/lu';
+import { useListNavigation } from '../../hooks/useListNavigation';
+import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
+import { Button } from '../Button/Button';
+import { IconButton } from '../IconButton/IconButton';
+import { Popover } from '../Popover/Popover';
+import { Spinner } from '../Spinner/Spinner';
+import { TextField } from '../TextField/TextField';
+import { Tooltip } from '../Tooltip/Tooltip';
+const DEFAULT_DEBOUNCE_MS = 200;
+export function PaginatedCombobox({ loadPage, getItemId, renderOption, renderSelectedLabel, value, onChange, placeholder, emptyText, loadingText, errorText, retryLabel, searchPlaceholder, clearLabel, disabled = false, clearable = false, showChevron = true, size = 3, maxHeight = 280, closeOnSelect = true, isItemSelected, searchAction, optionAction, resetKey, debounceMs = DEFAULT_DEBOUNCE_MS, testId, }) {
+    const { copy } = useOrcestrUiLocale();
+    const actualPlaceholder = placeholder ?? copy.common.selectValue;
+    const actualEmptyText = emptyText ?? copy.common.noOptions;
+    const actualLoadingText = loadingText ?? copy.common.loading;
+    const actualErrorText = errorText ?? copy.table.unableToLoad;
+    const actualRetryLabel = retryLabel ?? copy.common.retry;
+    const actualSearchPlaceholder = searchPlaceholder ?? copy.common.search;
+    const [open, setOpen] = useState(false);
+    const [searchInput, setSearchInput] = useState('');
+    const actualSearchActionLabel = searchAction
+        ? typeof searchAction.label === 'function'
+            ? searchAction.label(searchInput)
+            : searchAction.label
+        : '';
+    const [debouncedSearch, setDebouncedSearch] = useState('');
+    const [pages, setPages] = useState([]);
+    const [loadingInitial, setLoadingInitial] = useState(false);
+    const [loadingNext, setLoadingNext] = useState(false);
+    const [error, setError] = useState(null);
+    const requestIdRef = useRef(0);
+    const sentinelRef = useRef(null);
+    const scrollRef = useRef(null);
+    useEffect(() => {
+        const timer = window.setTimeout(() => setDebouncedSearch(searchInput.trim()), debounceMs);
+        return () => window.clearTimeout(timer);
+    }, [debounceMs, searchInput]);
+    const items = useMemo(() => {
+        const seen = new Set();
+        const result = [];
+        for (const page of pages) {
+            for (const item of page.items) {
+                const key = String(getItemId(item));
+                if (seen.has(key))
+                    continue;
+                seen.add(key);
+                result.push(item);
+            }
+        }
+        return result;
+    }, [getItemId, pages]);
+    const lastPage = pages.at(-1);
+    const hasNextPage = Boolean(lastPage?.has_next);
+    const selectedId = value === null ? null : String(getItemId(value));
+    const navigationItems = useMemo(() => items.map((item) => ({
+        value: String(getItemId(item)),
+        searchText: String(getItemId(item)),
+    })), [getItemId, items]);
+    const navigation = useListNavigation(navigationItems, { value: selectedId });
+    const highlightedId = navigation.highlightedValue;
+    const highlightedItem = useMemo(() => highlightedId === null
+        ? null
+        : items.find((item) => String(getItemId(item)) === highlightedId) ?? null, [getItemId, highlightedId, items]);
+    useEffect(() => {
+        if (!open || highlightedId === null)
+            return;
+        const node = scrollRef.current?.querySelector(`[data-oui-paginated-combobox-value="${cssAttr(highlightedId)}"]`);
+        node?.scrollIntoView({ block: 'nearest' });
+    }, [highlightedId, open]);
+    const fetchPage = useCallback(async (page, search) => {
+        const requestId = ++requestIdRef.current;
+        if (page === 1) {
+            setLoadingInitial(true);
+            setPages([]);
+        }
+        else {
+            setLoadingNext(true);
+        }
+        setError(null);
+        try {
+            const result = await loadPage(page, search);
+            if (requestId !== requestIdRef.current)
+                return;
+            setPages((current) => (page === 1 ? [result] : [...current, result]));
+        }
+        catch (nextError) {
+            if (requestId !== requestIdRef.current)
+                return;
+            setError(nextError);
+            if (page === 1)
+                setPages([]);
+        }
+        finally {
+            if (requestId !== requestIdRef.current)
+                return;
+            setLoadingInitial(false);
+            setLoadingNext(false);
+        }
+    }, [loadPage]);
+    useEffect(() => {
+        if (!open)
+            return;
+        void fetchPage(1, debouncedSearch);
+    }, [debouncedSearch, fetchPage, open, resetKey]);
+    useEffect(() => {
+        if (!open || !hasNextPage || loadingNext || loadingInitial)
+            return;
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (!entries[0]?.isIntersecting)
+                return;
+            const nextPage = (lastPage?.page ?? pages.length) + 1;
+            void fetchPage(nextPage, debouncedSearch);
+        }, { threshold: 0.1 });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [
+        debouncedSearch,
+        fetchPage,
+        hasNextPage,
+        lastPage?.page,
+        loadingInitial,
+        loadingNext,
+        open,
+        pages.length,
+    ]);
+    const clear = useCallback(() => {
+        onChange(null);
+        setSearchInput('');
+        setDebouncedSearch('');
+    }, [onChange]);
+    const close = useCallback(() => {
+        setOpen(false);
+        navigation.reset();
+    }, [navigation]);
+    const handleSelect = useCallback((item) => {
+        onChange(item);
+        if (closeOnSelect) {
+            setOpen(false);
+            setSearchInput('');
+            navigation.reset();
+        }
+    }, [closeOnSelect, navigation, onChange]);
+    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':
+                if (highlightedItem !== null) {
+                    event.preventDefault();
+                    handleSelect(highlightedItem);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                close();
+                break;
+        }
+    }, [close, handleSelect, highlightedItem, navigation, open]);
+    const triggerLabel = value ? renderSelectedLabel(value) : null;
+    const canClear = clearable && value !== null && !disabled;
+    const isInitialLoading = loadingInitial && items.length === 0;
+    return (_jsxs(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', "data-testid": testId, "data-state": open ? 'open' : 'closed', onKeyDown: handleKeyDown, rightIcon: _jsxs("span", { className: 'oui-combobox-trigger-actions', children: [canClear ? (_jsx("span", { "aria-label": clearLabel ?? copy.common.clear, className: 'oui-combobox-clear', onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            clear();
+                        }, 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 ?? actualPlaceholder }) }), className: 'oui-combobox-content', align: 'start', sideOffset: 4, matchTriggerWidth: true, disabled: disabled, children: [_jsxs("div", { className: 'oui-combobox-search-wrap', children: [_jsx(TextField, { autoFocus: true, size: 2, placeholder: actualSearchPlaceholder, value: searchInput, onChange: (event) => setSearchInput(event.target.value), onKeyDown: handleKeyDown }), searchAction ? (_jsx(Tooltip, { content: actualSearchActionLabel, children: _jsx(IconButton, { size: 2, v: 'soft', icon: _jsx(LuPlus, { size: 14 }), className: 'oui-combobox-search-action', "aria-label": actualSearchActionLabel, disabled: searchAction.disabled, onClick: () => {
+                                setOpen(false);
+                                searchAction.onClick(searchInput);
+                            } }) })) : null] }), _jsx("div", { ref: scrollRef, className: 'oui-combobox-scroll', style: { maxHeight }, tabIndex: -1, onKeyDown: handleKeyDown, children: isInitialLoading ? (_jsxs("div", { className: 'oui-combobox-state', children: [_jsx(Spinner, {}), _jsx("span", { className: 'oui-visually-hidden', children: actualLoadingText })] })) : error ? (_jsxs("div", { className: 'oui-combobox-state', children: [_jsx("span", { children: actualErrorText }), _jsx(Button, { size: 1, v: 'surface', onClick: () => void fetchPage(1, debouncedSearch), children: actualRetryLabel })] })) : items.length === 0 ? (_jsx("div", { className: 'oui-combobox-empty', children: actualEmptyText })) : (_jsxs("div", { className: 'oui-combobox-options', children: [items.map((item) => {
+                            const id = getItemId(item);
+                            const itemId = String(id);
+                            const selected = isItemSelected?.(item) ??
+                                (value !== null &&
+                                    String(getItemId(value)) === itemId);
+                            const highlighted = highlightedId === itemId;
+                            return (_jsxs("div", { className: 'oui-combobox-option', "data-selected": selected ? 'true' : 'false', "data-highlighted": highlighted ? 'true' : 'false', "data-oui-paginated-combobox-value": itemId, onMouseEnter: () => navigation.setHighlightedValue(itemId), children: [_jsx("button", { type: 'button', className: 'oui-combobox-option-main', onClick: () => handleSelect(item), children: renderOption(item) }), selected ? (_jsx(LuCheck, { className: 'oui-combobox-check', size: 15 })) : null, optionAction ? (_jsx(Tooltip, { content: optionAction.label(item), children: _jsx("button", { type: 'button', className: 'oui-combobox-option-action', "aria-label": optionAction.label(item), disabled: optionAction.disabled?.(item), onPointerDown: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                            }, onClick: (event) => {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                optionAction.onClick(item, close);
+                                            }, children: optionAction.icon }) })) : null] }, itemId));
+                        }), hasNextPage ? (_jsx("div", { ref: sentinelRef, className: 'oui-combobox-sentinel' })) : null, loadingNext ? (_jsx("div", { className: 'oui-combobox-next-loader', children: _jsx(Spinner, { size: 1 }) })) : null] })) })] }));
+}
+function cssAttr(value) {
+    return value.replace(/"/g, '\\"');
+}

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

@@ -0,0 +1,13 @@
+import { type QueryKey, type UseQueryOptions } from '@tanstack/react-query';
+import type { PaginatedResult } from './PaginatedCombobox';
+export type PaginatedComboboxQueryParams = {
+    page: number;
+    search: string;
+};
+export type PaginatedComboboxQueryLoaderOptions<TItem, TQueryKey extends QueryKey = QueryKey> = {
+    queryKey: (params: PaginatedComboboxQueryParams) => TQueryKey;
+    queryFn: (params: PaginatedComboboxQueryParams) => Promise<PaginatedResult<TItem>>;
+    staleTime?: UseQueryOptions<PaginatedResult<TItem>, Error, PaginatedResult<TItem>, TQueryKey>['staleTime'];
+};
+export declare function usePaginatedComboboxQueryLoader<TItem, TQueryKey extends QueryKey = QueryKey>({ queryKey, queryFn, staleTime, }: PaginatedComboboxQueryLoaderOptions<TItem, TQueryKey>): (page: number, search: string) => Promise<PaginatedResult<TItem>>;
+//# sourceMappingURL=PaginatedComboboxReactQueryAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedComboboxReactQueryAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/PaginatedCombobox/PaginatedComboboxReactQueryAdapter.ts"],"names":[],"mappings":"AAGA,OAAO,EACH,KAAK,QAAQ,EACb,KAAK,eAAe,EAEvB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,qBAAqB,CAAC;AAEzD,MAAM,MAAM,4BAA4B,GAAG;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,mCAAmC,CAAC,KAAK,EAAE,SAAS,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC5F,QAAQ,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,SAAS,CAAC;IAC9D,OAAO,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;IACnF,SAAS,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;CAC9G,CAAC;AAEF,wBAAgB,+BAA+B,CAC3C,KAAK,EACL,SAAS,SAAS,QAAQ,GAAG,QAAQ,EACvC,EACE,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,mCAAmC,CAAC,KAAK,EAAE,SAAS,CAAC,UAIzC,MAAM,UAAU,MAAM,qCAQpC"}

package/dist/components/PaginatedCombobox/PaginatedComboboxReactQueryAdapter.js

@@ -0,0 +1,10 @@
+import { useCallback, } from 'react';
+import { useQueryClient, } from '@tanstack/react-query';
+export function usePaginatedComboboxQueryLoader({ queryKey, queryFn, staleTime, }) {
+    const queryClient = useQueryClient();
+    return useCallback((page, search) => queryClient.fetchQuery({
+        queryKey: queryKey({ page, search }),
+        queryFn: () => queryFn({ page, search }),
+        staleTime,
+    }), [queryClient, queryFn, queryKey, staleTime]);
+}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,7 @@
+export declare function Pagination({ page, pageCount, onPageChange, testId, }: {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    testId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAKA,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,MAAM,GACT,EAAE;IACC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA2BA"}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button/Button';
+import { Flex } from '../Flex/Flex';
+import { Text } from '../Text/Text';
+import { useOrcestrUiLocale } from '../../locale/LocaleProvider';
+export function Pagination({ page, pageCount, onPageChange, testId, }) {
+    const { copy } = useOrcestrUiLocale();
+    return (_jsxs(Flex, { a: 'c', g: 2, testId: testId, children: [_jsx(Button, { size: 1, v: 'soft', disabled: page <= 1, testId: testId ? `${testId}-previous` : undefined, onClick: () => onPageChange(page - 1), children: copy.common.previous }), _jsxs(Text, { fs: '13px', testId: testId ? `${testId}-status` : undefined, children: [page, " / ", pageCount] }), _jsx(Button, { size: 1, v: 'soft', disabled: page >= pageCount, testId: testId ? `${testId}-next` : undefined, onClick: () => onPageChange(page + 1), children: copy.common.next })] }));
+}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { type FloatingAlign, type FloatingSide } from '../../hooks/useFloatingPosition';
+export type PopoverProps = {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+    collisionPadding?: number;
+    matchTriggerWidth?: boolean;
+    disabled?: boolean;
+    className?: string;
+    testId?: string;
+};
+export declare function Popover({ trigger, children, open, defaultOpen, onOpenChange, side, align, sideOffset, collisionPadding, matchTriggerWidth, disabled, className, testId, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EASH,KAAK,SAAS,EAEjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAkBtF,MAAM,MAAM,YAAY,GAAG;IACvB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,IAAe,EACf,KAAe,EACf,UAAc,EACd,gBAAoB,EACpB,iBAAyB,EACzB,QAAgB,EAChB,SAAS,EACT,MAAM,GACT,EAAE,YAAY,2CAsGd"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useRef, } from 'react';
+import { useDisclosure } from '../../hooks/useDisclosure';
+import {} from '../../hooks/useFloatingPosition';
+import { useFloatingLayer } from '../../hooks/useFloatingLayer';
+import { useOutsidePointerDown } from '../../hooks/useOutsidePointerDown';
+import { composeRefs } from '../../utils/composeRefs';
+import { cn } from '../../utils/cn';
+import { useOverlayContext, useOverlayLayerIndex } from '../Overlay/OverlayProvider';
+import { Portal } from '../Portal/Portal';
+export function Popover({ trigger, children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, matchTriggerWidth = false, disabled = false, className, testId, }) {
+    const overlay = useOverlayContext();
+    const disclosure = useDisclosure({ open, defaultOpen, onOpenChange });
+    const { open: isOpen, close: closeDisclosure, toggle } = disclosure;
+    const previousFocusRef = useRef(null);
+    const { triggerRef, contentRef, present, state, style, } = useFloatingLayer({
+        open: isOpen,
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        matchTriggerWidth,
+    });
+    const close = useCallback(() => closeDisclosure(), [closeDisclosure]);
+    const layerIndex = useOverlayLayerIndex(present);
+    useOutsidePointerDown([triggerRef, contentRef], isOpen, close);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        previousFocusRef.current =
+            document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            closeDisclosure();
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown, true);
+            previousFocusRef.current?.focus?.();
+        };
+    }, [closeDisclosure, isOpen]);
+    const handleTriggerClick = useCallback((event) => {
+        if (event.defaultPrevented || disabled)
+            return;
+        toggle();
+    }, [disabled, toggle]);
+    const triggerNode = isValidElement(trigger)
+        ? clonePopoverTrigger(trigger, {
+            ref: triggerRef,
+            open: isOpen,
+            disabled,
+            testId,
+            onClick: handleTriggerClick,
+        })
+        : (_jsx("span", { ref: triggerRef, className: 'oui-popover-trigger', "data-disabled": disabled ? 'true' : undefined, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "data-testid": testId, onClick: handleTriggerClick, onKeyDown: (event) => {
+                if (disabled)
+                    return;
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    toggle();
+                }
+            }, children: trigger }));
+    return (_jsxs(_Fragment, { children: [triggerNode, present ? (_jsx(Portal, { children: _jsx("div", { ref: contentRef, className: cn('oui-popover-content', className), "data-state": state, "data-layer": 'dropdown', "data-testid": testId ? `${testId}-content` : undefined, style: {
+                        ...style,
+                        zIndex: overlay.zIndex.dropdown + layerIndex * 10,
+                    }, children: children }) })) : null] }));
+}
+function clonePopoverTrigger(trigger, { ref, open, disabled, testId, onClick, }) {
+    return cloneElement(trigger, {
+        ref: composeRefs(trigger.props.ref, ref),
+        className: cn('oui-popover-trigger', trigger.props.className),
+        'data-disabled': disabled ? 'true' : trigger.props['data-disabled'],
+        'data-testid': testId ?? trigger.props['data-testid'],
+        'aria-expanded': open,
+        onClick: (event) => {
+            trigger.props.onClick?.(event);
+            onClick(event);
+        },
+    });
+}

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export declare function Portal({ children, container, }: {
+    children: ReactNode;
+    container?: HTMLElement | null;
+}): import("react").ReactPortal | null;
+//# sourceMappingURL=Portal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/components/Portal/Portal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK3D,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC,sCASA"}

package/dist/components/Portal/Portal.js

@@ -0,0 +1,23 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { useOverlayContext } from '../Overlay/OverlayProvider';
+export function Portal({ children, container, }) {
+    const mounted = useSyncExternalStore(subscribeMounted, clientMounted, serverMounted);
+    const overlay = useOverlayContext();
+    if (!mounted)
+        return null;
+    const target = container ?? overlay.portalContainer ?? document.body;
+    if (!target)
+        return null;
+    return createPortal(children, target);
+}
+function subscribeMounted() {
+    return () => { };
+}
+function clientMounted() {
+    return true;
+}
+function serverMounted() {
+    return false;
+}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,14 @@
+export type RadioGroupItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export declare function RadioGroup({ value, onValueChange, items, name, className, testId, }: {
+    value: string;
+    onValueChange: (value: string) => void;
+    items: ReadonlyArray<RadioGroupItem>;
+    name: string;
+    className?: string;
+    testId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACvB,KAAK,EACL,aAAa,EACb,KAAK,EACL,IAAI,EACJ,SAAS,EACT,MAAM,GACT,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,2CA6BA"}

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+export function RadioGroup({ value, onValueChange, items, name, className, testId, }) {
+    return (_jsx("div", { className: cn('oui-radio-group', className), role: 'radiogroup', "data-testid": testId, children: items.map((item) => (_jsxs("label", { className: 'oui-radio', "data-checked": value === item.value ? 'true' : undefined, "data-disabled": item.disabled ? 'true' : undefined, "data-testid": testId ? `${testId}-${item.value}` : undefined, children: [_jsx("input", { type: 'radio', name: name, value: item.value, checked: value === item.value, disabled: item.disabled, onChange: () => onValueChange(item.value) }), _jsx("span", { className: 'oui-radio-dot' }), _jsx("span", { children: item.label })] }, item.value))) }));
+}

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type SystemProps } from '../../theme/systemProps';
+export type ScrollHighlightConfig = {
+    visible?: boolean;
+    mode?: 'static' | 'scroll';
+    h?: number | string;
+    color?: string;
+    start?: number;
+    fadeDistance?: number;
+    maxOpacity?: number;
+};
+export type ScrollAreaProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
+    highlights?: boolean;
+    highlightH?: number | string;
+    highlightColor?: string;
+    highlightVisible?: boolean;
+    highlightStart?: number;
+    highlightFadeDistance?: number;
+    highlightMaxOpacity?: number;
+    highlightTop?: ScrollHighlightConfig;
+    highlightBottom?: ScrollHighlightConfig;
+    testId?: string;
+};
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
+    highlights?: boolean;
+    highlightH?: number | string;
+    highlightColor?: string;
+    highlightVisible?: boolean;
+    highlightStart?: number;
+    highlightFadeDistance?: number;
+    highlightMaxOpacity?: number;
+    highlightTop?: ScrollHighlightConfig;
+    highlightBottom?: ScrollHighlightConfig;
+    testId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ScrollArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,KAAK,wBAAwB,EAChC,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACzD,WAAW,GAAG;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;iBAZF,OAAO;iBACP,MAAM,GAAG,MAAM;qBACX,MAAM;uBACJ,OAAO;qBACT,MAAM;4BACC,MAAM;0BACR,MAAM;mBACb,qBAAqB;sBAClB,qBAAqB;aAC9B,MAAM;kDA4KtB,CAAC"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { cn } from '../../utils/cn';
+import { splitSystemProps } from '../../theme/systemProps';
+import { BottomHighlight, TopHighlight } from '../Highlight/Highlight';
+export const ScrollArea = forwardRef(function ScrollArea({ className, style, children, highlights = false, highlightH = 32, highlightColor, highlightVisible = true, highlightStart = 0, highlightFadeDistance = 100, highlightMaxOpacity = 1, highlightTop, highlightBottom, testId, ...props }, ref) {
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const { onScroll, ...outerProps } = restProps;
+    const showHighlights = highlights && highlightVisible;
+    const scrollRef = useRef(null);
+    const frameRef = useRef(null);
+    const [opacity, setOpacity] = useState({ top: 0, bottom: 0 });
+    const topConfig = useMemo(() => normalizeHighlightConfig({
+        h: highlightH,
+        color: highlightColor,
+        visible: true,
+        start: highlightStart,
+        fadeDistance: highlightFadeDistance,
+        maxOpacity: highlightMaxOpacity,
+        ...highlightTop,
+    }), [
+        highlightColor,
+        highlightFadeDistance,
+        highlightH,
+        highlightMaxOpacity,
+        highlightStart,
+        highlightTop,
+    ]);
+    const bottomConfig = useMemo(() => normalizeHighlightConfig({
+        h: highlightH,
+        color: highlightColor,
+        visible: true,
+        start: highlightStart,
+        fadeDistance: highlightFadeDistance,
+        maxOpacity: highlightMaxOpacity,
+        ...highlightBottom,
+    }), [
+        highlightBottom,
+        highlightColor,
+        highlightFadeDistance,
+        highlightH,
+        highlightMaxOpacity,
+        highlightStart,
+    ]);
+    useImperativeHandle(ref, () => scrollRef.current, []);
+    const updateOpacity = useCallback(() => {
+        const node = scrollRef.current;
+        if (!node || !showHighlights) {
+            setOpacity({ top: 0, bottom: 0 });
+            return;
+        }
+        const maxScroll = Math.max(0, node.scrollHeight - node.clientHeight);
+        const nextOpacity = {
+            top: topConfig.visible
+                ? revealOpacity(node.scrollTop, topConfig)
+                : 0,
+            bottom: bottomConfig.visible
+                ? revealOpacity(maxScroll - node.scrollTop, bottomConfig)
+                : 0,
+        };
+        setOpacity((current) => current.top === nextOpacity.top && current.bottom === nextOpacity.bottom
+            ? current
+            : nextOpacity);
+    }, [bottomConfig, showHighlights, topConfig]);
+    const scheduleUpdate = useCallback(() => {
+        if (frameRef.current !== null)
+            return;
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            updateOpacity();
+        });
+    }, [updateOpacity]);
+    useEffect(() => {
+        scheduleUpdate();
+        const node = scrollRef.current;
+        if (!node)
+            return;
+        const observer = typeof ResizeObserver === 'undefined'
+            ? null
+            : new ResizeObserver(scheduleUpdate);
+        observer?.observe(node);
+        Array.from(node.children).forEach((child) => {
+            if (child instanceof HTMLElement &&
+                !child.classList.contains('oui-highlight')) {
+                observer?.observe(child);
+            }
+        });
+        window.addEventListener('resize', scheduleUpdate);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', scheduleUpdate);
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+        };
+    }, [scheduleUpdate]);
+    return (_jsxs("div", { className: cn('oui-scroll-area', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...outerProps, children: [_jsx("div", { ref: scrollRef, className: 'oui-scroll-area-viewport', "data-testid": testId ? `${testId}-viewport` : undefined, onScroll: (event) => {
+                    onScroll?.(event);
+                    scheduleUpdate();
+                }, children: children }), showHighlights ? (_jsxs("div", { className: 'oui-scroll-area-highlight-overlay', "aria-hidden": 'true', children: [topConfig.visible ? (_jsx(TopHighlight, { h: topConfig.h, color: topConfig.color, style: { opacity: opacity.top } })) : null, bottomConfig.visible ? (_jsx(BottomHighlight, { h: bottomConfig.h, color: bottomConfig.color, style: { opacity: opacity.bottom } })) : null] })) : null] }));
+});
+function normalizeHighlightConfig(config) {
+    return {
+        h: config.h,
+        color: config.color,
+        visible: config.visible ?? true,
+        mode: config.mode ?? 'scroll',
+        start: Math.max(0, config.start ?? 0),
+        fadeDistance: Math.max(0, config.fadeDistance ?? 100),
+        maxOpacity: Math.max(0, Math.min(1, config.maxOpacity ?? 1)),
+    };
+}
+function revealOpacity(distance, config) {
+    if (config.mode === 'static')
+        return config.maxOpacity;
+    const visibleDistance = distance - config.start;
+    if (visibleDistance <= 0)
+        return 0;
+    if (config.fadeDistance <= 0)
+        return config.maxOpacity;
+    return Math.min(1, visibleDistance / config.fadeDistance) * config.maxOpacity;
+}

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,14 @@
+import { type FlexProps } from '../Flex/Flex';
+export type SectionProps = FlexProps & {
+    sectionColor?: string;
+    sectionOpacity?: number | string;
+    testId?: string;
+};
+export declare const Section: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("../..").SystemProps & {
+    testId?: string;
+} & {
+    sectionColor?: string;
+    sectionOpacity?: number | string;
+    testId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAaF,eAAO,MAAM,OAAO;;;mBAhBD,MAAM;qBACJ,MAAM,GAAG,MAAM;aACvB,MAAM;kDAuCjB,CAAC"}