@tangible/ui 0.0.1 → 0.0.2

package/components/Select/Select.js

@@ -0,0 +1,497 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, cloneElement, isValidElement, } from 'react';
+import { useFloating, offset, flip, shift, size as sizeMiddleware, autoUpdate, FloatingPortal, useDismiss, useInteractions, useListNavigation, useTypeahead, useRole, useClick, } from '@floating-ui/react';
+import { cx } from '../../utils/cx.js';
+import { toKey } from '../../utils/value-key.js';
+import { getPortalRootFor } from '../../utils/portal.js';
+import { Icon } from '../Icon/index.js';
+import { SelectActionsContext, SelectStateContext, SelectContentContext, useSelectContext, useSelectContentContext, } from './SelectContext.js';
+import { toPlacement, } from './types.js';
+// =============================================================================
+// Select Root
+// =============================================================================
+function SelectRoot({ id: triggerIdProp, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled = false, placeholder = '', size = 'md', side = 'bottom', align = 'start', sideOffset = 4, clearable = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, children, }) {
+    // Controlled/uncontrolled value
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isValueControlled = controlledValue !== undefined;
+    const value = isValueControlled ? controlledValue : uncontrolledValue;
+    // Store display text separately so it persists when dropdown is closed
+    const [displayText, setDisplayText] = useState(undefined);
+    // Option registration
+    const optionsRef = useRef(new Map());
+    const [registryVersion, setRegistryVersion] = useState(0);
+    const setValue = useCallback((newValue, textValue) => {
+        if (!isValueControlled) {
+            setUncontrolledValue(newValue);
+            setDisplayText(newValue === undefined ? undefined : textValue);
+        }
+        onValueChange?.(newValue);
+    }, [isValueControlled, onValueChange]);
+    // Sync displayText when value changes (handles controlled updates and clears)
+    const prevValue = useRef(value);
+    useEffect(() => {
+        if (prevValue.current !== value) {
+            if (value === undefined) {
+                setDisplayText(undefined);
+            }
+            else {
+                const option = optionsRef.current.get(toKey(value));
+                if (option) {
+                    setDisplayText(option.textValue);
+                }
+            }
+            prevValue.current = value;
+        }
+    }, [value]);
+    // Initialize displayText when options register (handles defaultValue case)
+    // This runs when registryVersion changes, catching newly registered options
+    useEffect(() => {
+        if (value !== undefined && !displayText) {
+            const option = optionsRef.current.get(toKey(value));
+            if (option) {
+                setDisplayText(option.textValue);
+            }
+        }
+    }, [registryVersion, value, displayText]);
+    // Controlled/uncontrolled open
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpenControlled = controlledOpen !== undefined;
+    const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
+    const setOpen = useCallback((nextOpen) => {
+        if (disabled)
+            return;
+        if (!isOpenControlled) {
+            setUncontrolledOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+    }, [disabled, isOpenControlled, onOpenChange]);
+    // IDs
+    const baseId = useId();
+    const triggerId = triggerIdProp ?? `${baseId}-trigger`;
+    const listboxId = `${baseId}-listbox`;
+    // Refs for list navigation
+    const listRef = useRef([]);
+    const listContentRef = useRef([]);
+    // Active index for navigation
+    const [activeIndex, setActiveIndex] = useState(null);
+    // Compute placement from props
+    const placement = toPlacement(side, align);
+    // Get ordered options
+    const getOrderedOptions = useCallback(() => {
+        const options = Array.from(optionsRef.current.values());
+        return options.sort((a, b) => {
+            if (!a.ref.current || !b.ref.current)
+                return 0;
+            const position = a.ref.current.compareDocumentPosition(b.ref.current);
+            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+                return -1;
+            if (position & Node.DOCUMENT_POSITION_PRECEDING)
+                return 1;
+            return 0;
+        });
+    }, []);
+    // Memoized ordered options - recompute when registry changes
+    // Also update listContentRef synchronously for typeahead
+    const orderedOptions = useMemo(() => {
+        const options = getOrderedOptions();
+        // Update typeahead ref synchronously (during render is safe for refs)
+        listContentRef.current = options.map((opt) => opt.textValue);
+        return options;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [registryVersion]);
+    // Floating UI setup - in Root so Trigger and Content can share
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        open,
+        onOpenChange: setOpen,
+        middleware: [
+            offset(sideOffset),
+            flip({ padding: 8 }),
+            shift({ padding: 8 }),
+            sizeMiddleware({
+                apply({ availableHeight, rects, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${Math.min(availableHeight - 16, 300)}px`,
+                        minWidth: `${rects.reference.width}px`,
+                    });
+                },
+                padding: 8,
+            }),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    // Handle selection
+    const handleSelect = useCallback((index) => {
+        if (index === null)
+            return;
+        const option = orderedOptions[index];
+        if (option && !option.disabled) {
+            setValue(option.value, option.textValue);
+            setOpen(false);
+        }
+    }, [orderedOptions, setValue, setOpen]);
+    // Floating UI interactions
+    // Use 'click' (not 'mousedown') so button has focus when dropdown opens
+    // This ensures keyboard navigation works immediately
+    const click = useClick(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'listbox' });
+    // Compute disabled indices for keyboard navigation to skip
+    const disabledIndices = useMemo(() => orderedOptions.reduce((acc, opt, i) => {
+        if (opt.disabled)
+            acc.push(i);
+        return acc;
+    }, []), [orderedOptions]);
+    const listNavigation = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+        virtual: true,
+        focusItemOnOpen: true,
+        selectedIndex: orderedOptions.findIndex((opt) => value !== undefined && toKey(opt.value) === toKey(value)),
+        disabledIndices,
+    });
+    const typeahead = useTypeahead(context, {
+        listRef: listContentRef,
+        activeIndex,
+        onMatch: (index) => {
+            if (open) {
+                setActiveIndex(index);
+            }
+        },
+        resetMs: 500,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+        listNavigation,
+        typeahead,
+    ]);
+    // Register option (stable callback - no value/displayText deps)
+    const registerOption = useCallback((option) => {
+        optionsRef.current.set(toKey(option.value), option);
+        setRegistryVersion((v) => v + 1);
+    }, []);
+    const unregisterOption = useCallback((optionValue) => {
+        optionsRef.current.delete(toKey(optionValue));
+        setRegistryVersion((v) => v + 1);
+    }, []);
+    // Get selected option's text value
+    const getSelectedTextValue = useCallback(() => {
+        return displayText;
+    }, [displayText]);
+    // Highlighted value for keyboard navigation
+    const highlightedValue = activeIndex !== null ? orderedOptions[activeIndex]?.value ?? null : null;
+    // Reset active index when closing
+    useEffect(() => {
+        if (!open) {
+            setActiveIndex(null);
+        }
+        else {
+            // When opening, set active index to selected value or first enabled
+            const selectedIndex = orderedOptions.findIndex((opt) => value !== undefined && toKey(opt.value) === toKey(value));
+            if (selectedIndex >= 0 && !orderedOptions[selectedIndex]?.disabled) {
+                setActiveIndex(selectedIndex);
+            }
+            else {
+                const firstEnabled = orderedOptions.findIndex((opt) => !opt.disabled);
+                setActiveIndex(firstEnabled >= 0 ? firstEnabled : null);
+            }
+        }
+    }, [open, orderedOptions, value]);
+    // Scroll active option into view
+    useEffect(() => {
+        if (open && activeIndex !== null && listRef.current[activeIndex]) {
+            listRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [open, activeIndex]);
+    // ==========================================================================
+    // Split Context Values
+    // ==========================================================================
+    // Actions: stable config, IDs, refs, callbacks — rarely changes
+    // State: open, value, activeIndex, etc. — changes on interaction
+    // ==========================================================================
+    const actionsValue = useMemo(() => ({
+        // Config (from props, stable for component lifetime)
+        disabled,
+        placeholder,
+        clearable,
+        size,
+        // ARIA IDs (stable)
+        triggerId,
+        listboxId,
+        ariaLabel,
+        ariaLabelledBy,
+        ariaDescribedBy,
+        // Stable callbacks
+        setOpen,
+        setValue,
+        registerOption,
+        unregisterOption,
+        handleSelect,
+        // Refs (stable objects)
+        refs,
+        listRef,
+        // Floating UI interaction props (stable functions from useInteractions)
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    }), [
+        // Config props - only change if parent rerenders with new props
+        disabled,
+        placeholder,
+        clearable,
+        size,
+        // IDs are stable (from useId)
+        triggerId,
+        listboxId,
+        ariaLabel,
+        ariaLabelledBy,
+        ariaDescribedBy,
+        // Callbacks are stable (useCallback with stable deps)
+        setOpen,
+        setValue,
+        registerOption,
+        unregisterOption,
+        handleSelect,
+        // Refs are stable objects
+        refs,
+        listRef,
+        // Interaction props from useInteractions (stable)
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    ]);
+    const stateValue = useMemo(() => ({
+        // Open state
+        open,
+        // Selection state
+        value,
+        // Selection helper
+        getSelectedTextValue,
+        // Navigation state
+        activeIndex,
+        highlightedValue,
+        // Derived (changes when registry changes)
+        orderedOptions,
+        // Floating UI (changes on open/position)
+        floatingStyles,
+        floatingContext: context,
+    }), [
+        open,
+        value,
+        getSelectedTextValue,
+        activeIndex,
+        highlightedValue,
+        orderedOptions,
+        floatingStyles,
+        context,
+    ]);
+    return (_jsx(SelectActionsContext.Provider, { value: actionsValue, children: _jsx(SelectStateContext.Provider, { value: stateValue, children: children }) }));
+}
+SelectRoot.displayName = 'Select';
+// =============================================================================
+// Select.Trigger
+// =============================================================================
+function SelectTriggerComponent({ asChild = false, className, children, }) {
+    const { open, setOpen, disabled, placeholder, clearable, size, triggerId, listboxId, ariaLabel, ariaLabelledBy, ariaDescribedBy, getSelectedTextValue, setValue, refs, getReferenceProps, activeIndex, handleSelect, } = useSelectContext();
+    const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
+    const displayValue = getSelectedTextValue();
+    const hasValue = displayValue !== undefined;
+    // Ensure trigger has focus when dropdown opens (Safari doesn't focus buttons on click)
+    useEffect(() => {
+        if (open && refs.reference.current) {
+            refs.reference.current.focus();
+        }
+    }, [open, refs.reference]);
+    // Handle Enter/Space for selection when open
+    const handleKeyDown = useCallback((e) => {
+        if (open && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleSelect(activeIndex);
+        }
+    }, [open, activeIndex, handleSelect]);
+    // Close dropdown when focus leaves trigger
+    // Uses blur guard pattern: only close if focus moved outside controlled elements
+    const handleBlur = useCallback((e) => {
+        if (!open)
+            return;
+        const relatedTarget = e.relatedTarget;
+        // Focus left the document entirely (e.g., clicked outside window)
+        if (relatedTarget === null) {
+            setOpen(false);
+            return;
+        }
+        // Check if focus moved to the floating content (clicking an option)
+        const floating = refs.floating.current;
+        if (floating && relatedTarget && floating.contains(relatedTarget)) {
+            return;
+        }
+        // Focus moved somewhere outside our control — close
+        setOpen(false);
+    }, [open, setOpen, refs.floating]);
+    // Handle clear button - clears value, keeps focus on trigger
+    const handleClear = useCallback((e) => {
+        e.preventDefault(); // Keep focus in trigger
+        e.stopPropagation(); // Don't open dropdown
+        if (disabled)
+            return;
+        setValue(undefined);
+    }, [disabled, setValue]);
+    // Get Floating UI's reference props - pass our handlers so they get composed
+    const floatingProps = getReferenceProps({
+        'aria-activedescendant': activeIndex !== null ? `${listboxId}-option-${activeIndex}` : undefined,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+    });
+    const triggerProps = {
+        id: triggerId,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'aria-disabled': disabled || undefined,
+        'data-state': open ? 'open' : 'closed',
+        'data-disabled': disabled || undefined,
+        ...floatingProps,
+    };
+    if (asChild && isValidElement(children)) {
+        const childProps = children.props;
+        // Compose event handlers: child runs first, skip ours if defaultPrevented
+        const composeHandler = (ours, theirs) => {
+            if (!ours && !theirs)
+                return undefined;
+            if (!ours)
+                return theirs;
+            if (!theirs)
+                return ours;
+            return (e) => {
+                theirs(e);
+                if (!e.defaultPrevented) {
+                    ours(e);
+                }
+            };
+        };
+        return cloneElement(children, {
+            // Spread order: ours first, then child (child wins), then explicit overrides
+            ...triggerProps,
+            ...childProps,
+            // Re-assert must-have props that child cannot override
+            id: triggerId,
+            ref: refs.setReference,
+            'aria-haspopup': floatingProps['aria-haspopup'],
+            'aria-expanded': floatingProps['aria-expanded'],
+            'aria-controls': floatingProps['aria-controls'],
+            'aria-activedescendant': floatingProps['aria-activedescendant'],
+            'aria-describedby': ariaDescribedBy,
+            'aria-disabled': disabled || undefined,
+            'data-state': open ? 'open' : 'closed',
+            'data-disabled': disabled || undefined,
+            className: cx(childProps.className, 'tui-select__trigger', sizeClass, className),
+            // Composed handlers override both spreads
+            onClick: composeHandler(triggerProps.onClick, childProps.onClick),
+            onKeyDown: composeHandler(triggerProps.onKeyDown, childProps.onKeyDown),
+            onBlur: composeHandler(triggerProps.onBlur, childProps.onBlur),
+            onMouseDown: composeHandler(triggerProps.onMouseDown, childProps.onMouseDown),
+            onPointerDown: composeHandler(triggerProps.onPointerDown, childProps.onPointerDown),
+        });
+    }
+    return (_jsxs("button", { ref: refs.setReference, type: "button", className: cx('tui-select__trigger', sizeClass, className), disabled: disabled, ...triggerProps, children: [_jsx("span", { className: "tui-select__value", children: displayValue || _jsx("span", { className: "tui-select__placeholder", children: placeholder }) }), clearable && hasValue && !disabled && (_jsx("span", { className: "tui-select__clear", onPointerDown: handleClear, "aria-hidden": "true", children: _jsx(Icon, { name: "system/close", size: "sm" }) })), _jsx(Icon, { name: "system/chevron-down", size: "sm", className: "tui-select__icon", "aria-hidden": "true" })] }));
+}
+SelectTriggerComponent.displayName = 'Select.Trigger';
+// =============================================================================
+// Select.Content
+// =============================================================================
+function SelectContentComponent({ className, children, }) {
+    const { open, listboxId, triggerId, refs, floatingStyles, getFloatingProps, listRef, activeIndex, handleSelect, orderedOptions, } = useSelectContext();
+    const portalRoot = getPortalRootFor(refs.reference.current);
+    // Memoized context for options
+    const contentContext = useMemo(() => ({
+        listRef,
+        activeIndex,
+        handleSelect,
+        orderedOptions,
+    }), [listRef, activeIndex, handleSelect, orderedOptions]);
+    return (_jsxs(_Fragment, { children: [!open && (_jsx("div", { style: { display: 'none' }, "aria-hidden": "true", children: _jsx(SelectContentContext.Provider, { value: contentContext, children: children }) })), open && (_jsx(FloatingPortal, { root: portalRoot, children: _jsx("div", { ref: refs.setFloating, id: listboxId, role: "listbox", "aria-labelledby": triggerId, className: cx('tui-select__content', className), style: {
+                        ...floatingStyles,
+                        minWidth: refs.reference.current?.offsetWidth,
+                        pointerEvents: 'auto',
+                    }, ...getFloatingProps(), children: _jsx(SelectContentContext.Provider, { value: contentContext, children: children }) }) }))] }));
+}
+SelectContentComponent.displayName = 'Select.Content';
+// =============================================================================
+// Select.Option
+// =============================================================================
+function SelectOptionComponent({ value: optionValue, disabled = false, textValue: explicitTextValue, className, children, }) {
+    const { value: selectedValue, setValue, setOpen, listboxId, registerOption, unregisterOption, highlightedValue, getItemProps, } = useSelectContext();
+    const { listRef, orderedOptions } = useSelectContentContext();
+    const ref = useRef(null);
+    // Derive textValue from children if not explicitly provided
+    const textValue = explicitTextValue ?? (typeof children === 'string' ? children : '');
+    // Warn in dev if textValue couldn't be derived
+    useEffect(() => {
+        if (import.meta.env.DEV && !textValue) {
+            console.warn(`Select.Option with value="${optionValue}" has no textValue. Provide textValue prop when children is not a string.`);
+        }
+    }, [textValue, optionValue]);
+    // Register option
+    useLayoutEffect(() => {
+        registerOption({ value: optionValue, ref, disabled, textValue });
+        return () => unregisterOption(optionValue);
+    }, [optionValue, disabled, textValue, registerOption, unregisterOption]);
+    // Find this option's index in ordered list
+    const index = orderedOptions.findIndex((opt) => toKey(opt.value) === toKey(optionValue));
+    // Assign ref to listRef for navigation
+    useEffect(() => {
+        if (index >= 0) {
+            listRef.current[index] = ref.current;
+        }
+    }, [index, listRef]);
+    const isSelected = selectedValue !== undefined && toKey(selectedValue) === toKey(optionValue);
+    const isHighlighted = highlightedValue !== null && toKey(highlightedValue) === toKey(optionValue);
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        setValue(optionValue, textValue);
+        setOpen(false);
+    }, [disabled, optionValue, textValue, setValue, setOpen]);
+    return (_jsxs("div", { ref: ref, id: index >= 0 ? `${listboxId}-option-${index}` : undefined, role: "option", className: cx('tui-select__option', className), "aria-selected": isSelected, "aria-disabled": disabled || undefined, "data-highlighted": isHighlighted || undefined, "data-disabled": disabled || undefined, ...getItemProps({
+            onClick: handleClick,
+        }), children: [_jsx("span", { className: "tui-select__option-content", children: children }), isSelected && (_jsx(Icon, { name: "system/check", size: "sm", className: "tui-select__option-check", "aria-hidden": "true" }))] }));
+}
+SelectOptionComponent.displayName = 'Select.Option';
+// =============================================================================
+// Select.Group
+// =============================================================================
+function SelectGroupComponent({ className, children }) {
+    const groupId = useId();
+    return (_jsx("div", { role: "group", "aria-labelledby": `${groupId}-label`, className: cx('tui-select__group', className), children: _jsx(SelectGroupContext.Provider, { value: { groupId }, children: children }) }));
+}
+SelectGroupComponent.displayName = 'Select.Group';
+const SelectGroupContext = React.createContext(null);
+// =============================================================================
+// Select.Label
+// =============================================================================
+function SelectLabelComponent({ className, children }) {
+    const groupContext = React.useContext(SelectGroupContext);
+    // No aria-hidden — aria-labelledby on Group references this element,
+    // so screen readers need access to read the label text.
+    return (_jsx("div", { id: groupContext ? `${groupContext.groupId}-label` : undefined, className: cx('tui-select__label', className), children: children }));
+}
+SelectLabelComponent.displayName = 'Select.Label';
+export const Select = SelectRoot;
+Select.Trigger = SelectTriggerComponent;
+Select.Content = SelectContentComponent;
+Select.Option = SelectOptionComponent;
+Select.Group = SelectGroupComponent;
+Select.Label = SelectLabelComponent;
+// Named exports
+export const SelectTrigger = SelectTriggerComponent;
+export const SelectContent = SelectContentComponent;
+export const SelectOption = SelectOptionComponent;
+export const SelectGroup = SelectGroupComponent;
+export const SelectLabel = SelectLabelComponent;
+// Hook for advanced use cases
+// eslint-disable-next-line react-refresh/only-export-components
+export { useSelectContext as useSelect } from './SelectContext.js';

package/components/Select/SelectContext.d.ts

@@ -0,0 +1,20 @@
+import type { SelectActionsContextValue, SelectStateContextValue, SelectContentContextValue } from './types';
+export declare const SelectActionsContext: import("react").Context<SelectActionsContextValue | null>;
+export declare const SelectStateContext: import("react").Context<SelectStateContextValue | null>;
+/**
+ * Access stable config, IDs, refs, and callbacks.
+ * Safe to use without causing rerenders on navigation changes.
+ */
+export declare function useSelectActions(): SelectActionsContextValue;
+/**
+ * Access reactive state: open, value, activeIndex, orderedOptions.
+ * Subscribing causes rerender when these values change.
+ */
+export declare function useSelectState(): SelectStateContextValue;
+/**
+ * Combined hook for components that need both.
+ * Convenience for Trigger/Content that need everything.
+ */
+export declare function useSelectContext(): SelectActionsContextValue & SelectStateContextValue;
+export declare const SelectContentContext: import("react").Context<SelectContentContextValue | null>;
+export declare function useSelectContentContext(): SelectContentContextValue;

package/components/Select/SelectContext.js

@@ -0,0 +1,56 @@
+import { createContext, useContext } from 'react';
+// =============================================================================
+// Split Contexts for Performance
+// =============================================================================
+// Actions context: stable config, IDs, refs, callbacks — rarely changes
+// State context: open, value, activeIndex, etc. — changes on interaction
+//
+// Components subscribe to what they need:
+// - Options: actions (register) + minimal state (isSelected check)
+// - Trigger: both (needs state for display, actions for handlers)
+// - Content: both (needs floating styles, refs)
+// =============================================================================
+export const SelectActionsContext = createContext(null);
+export const SelectStateContext = createContext(null);
+/**
+ * Access stable config, IDs, refs, and callbacks.
+ * Safe to use without causing rerenders on navigation changes.
+ */
+export function useSelectActions() {
+    const context = useContext(SelectActionsContext);
+    if (!context) {
+        throw new Error('Select components must be used within a Select');
+    }
+    return context;
+}
+/**
+ * Access reactive state: open, value, activeIndex, orderedOptions.
+ * Subscribing causes rerender when these values change.
+ */
+export function useSelectState() {
+    const context = useContext(SelectStateContext);
+    if (!context) {
+        throw new Error('Select components must be used within a Select');
+    }
+    return context;
+}
+/**
+ * Combined hook for components that need both.
+ * Convenience for Trigger/Content that need everything.
+ */
+export function useSelectContext() {
+    const actions = useSelectActions();
+    const state = useSelectState();
+    return { ...actions, ...state };
+}
+// =============================================================================
+// Content Context (for Option registration)
+// =============================================================================
+export const SelectContentContext = createContext(null);
+export function useSelectContentContext() {
+    const context = useContext(SelectContentContext);
+    if (!context) {
+        throw new Error('Select.Option must be used within Select.Content');
+    }
+    return context;
+}

package/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, SelectLabel, useSelect, } from './Select';
+export type { SelectProps, SelectTriggerProps, SelectContentProps, SelectOptionProps, SelectGroupProps, SelectLabelProps, } from './types';
+export type { OptionValue } from '../../utils/value-key';

package/components/Select/index.js

@@ -0,0 +1 @@
+export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, SelectLabel, useSelect, } from './Select.js';