@tangible/ui 0.0.1 → 0.0.3

package/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,39 @@
+import { type MultiSelectProps, type MultiSelectTriggerProps, type MultiSelectContentProps, type MultiSelectOptionProps, type MultiSelectGroupProps, type MultiSelectLabelProps } from './types';
+declare function MultiSelectRoot({ id: triggerIdProp, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, placeholder, size, display, maxChips, max, onMaxReached, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, children, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectRoot {
+    var displayName: string;
+}
+declare function MultiSelectTriggerComponent({ asChild, className, children, }: MultiSelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectTriggerComponent {
+    var displayName: string;
+}
+declare function MultiSelectContentComponent({ className, children }: MultiSelectContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectContentComponent {
+    var displayName: string;
+}
+declare function MultiSelectOptionComponent({ value: optionValue, disabled, textValue: explicitTextValue, className, children, }: MultiSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectOptionComponent {
+    var displayName: string;
+}
+declare function MultiSelectGroupComponent({ className, children }: MultiSelectGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectGroupComponent {
+    var displayName: string;
+}
+declare function MultiSelectLabelComponent({ className, children }: MultiSelectLabelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectLabelComponent {
+    var displayName: string;
+}
+type MultiSelectCompound = typeof MultiSelectRoot & {
+    Trigger: typeof MultiSelectTriggerComponent;
+    Content: typeof MultiSelectContentComponent;
+    Option: typeof MultiSelectOptionComponent;
+    Group: typeof MultiSelectGroupComponent;
+    Label: typeof MultiSelectLabelComponent;
+};
+export declare const MultiSelect: MultiSelectCompound;
+export declare const MultiSelectTrigger: typeof MultiSelectTriggerComponent;
+export declare const MultiSelectContent: typeof MultiSelectContentComponent;
+export declare const MultiSelectOption: typeof MultiSelectOptionComponent;
+export declare const MultiSelectGroup: typeof MultiSelectGroupComponent;
+export declare const MultiSelectLabel: typeof MultiSelectLabelComponent;
+export { useMultiSelectContext as useMultiSelect } from './MultiSelectContext';

package/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,623 @@
+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 { getPortalRootFor } from '../../utils/portal.js';
+import { Icon } from '../Icon/index.js';
+import { MultiSelectActionsContext, MultiSelectStateContext, MultiSelectContentContext, useMultiSelectContext, useMultiSelectContentContext, } from './MultiSelectContext.js';
+import { toKey, } from './types.js';
+// =============================================================================
+// MultiSelect Root
+// =============================================================================
+function MultiSelectRoot({ id: triggerIdProp, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled = false, placeholder = '', size = 'md', display = 'count', maxChips = 3, max, onMaxReached, '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;
+    // Track selected text values for display when closed
+    const selectedTextMapRef = useRef(new Map());
+    // Option registration
+    const optionsRef = useRef(new Map());
+    const [registryVersion, setRegistryVersion] = useState(0);
+    // Is selected helper
+    const isSelected = useCallback((optionValue) => {
+        const key = toKey(optionValue);
+        return value.some((v) => toKey(v) === key);
+    }, [value]);
+    // Check if max reached
+    const maxReached = max !== undefined && value.length >= max;
+    // Track if we just hit max (for callback)
+    const prevMaxReached = useRef(maxReached);
+    useEffect(() => {
+        if (maxReached && !prevMaxReached.current) {
+            onMaxReached?.();
+        }
+        prevMaxReached.current = maxReached;
+    }, [maxReached, onMaxReached]);
+    // Toggle option selection
+    const toggleOption = useCallback((optionValue, textValue) => {
+        const key = toKey(optionValue);
+        const currentlySelected = value.some((v) => toKey(v) === key);
+        let newValue;
+        if (currentlySelected) {
+            // Remove from selection
+            newValue = value.filter((v) => toKey(v) !== key);
+            selectedTextMapRef.current.delete(key);
+        }
+        else {
+            // Add to selection (unless max reached)
+            if (max !== undefined && value.length >= max) {
+                return; // Don't add more
+            }
+            newValue = [...value, optionValue];
+            selectedTextMapRef.current.set(key, textValue);
+        }
+        if (!isValueControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [value, max, isValueControlled, onValueChange]);
+    // Clear all selections
+    const clearAll = useCallback(() => {
+        selectedTextMapRef.current.clear();
+        if (!isValueControlled) {
+            setUncontrolledValue([]);
+        }
+        onValueChange?.([]);
+    }, [isValueControlled, onValueChange]);
+    // Sync selectedTextMap when controlled value changes
+    useEffect(() => {
+        if (isValueControlled && controlledValue) {
+            // Remove keys that are no longer selected
+            const currentKeys = new Set(controlledValue.map(toKey));
+            for (const key of selectedTextMapRef.current.keys()) {
+                if (!currentKeys.has(key)) {
+                    selectedTextMapRef.current.delete(key);
+                }
+            }
+            // Add any missing keys from registered options
+            for (const v of controlledValue) {
+                const key = toKey(v);
+                if (!selectedTextMapRef.current.has(key)) {
+                    const option = optionsRef.current.get(key);
+                    if (option) {
+                        selectedTextMapRef.current.set(key, option.textValue);
+                    }
+                }
+            }
+        }
+    }, [controlledValue, isValueControlled]);
+    // Initialize selectedTextMap when options register (handles defaultValue)
+    useEffect(() => {
+        for (const v of value) {
+            const key = toKey(v);
+            if (!selectedTextMapRef.current.has(key)) {
+                const option = optionsRef.current.get(key);
+                if (option) {
+                    selectedTextMapRef.current.set(key, option.textValue);
+                }
+            }
+        }
+    }, [registryVersion, value]);
+    // 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);
+    // 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
+    // getOrderedOptions is intentionally omitted - we only want to recompute when registryVersion changes
+    const orderedOptions = useMemo(() => {
+        const options = getOrderedOptions();
+        // Update typeahead ref synchronously
+        listContentRef.current = options.map((opt) => opt.textValue);
+        return options;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [registryVersion]);
+    // Compute disabled indices for keyboard navigation
+    // Skip disabled options AND unselected options when max reached
+    const disabledIndices = useMemo(() => orderedOptions.reduce((acc, opt, i) => {
+        const selected = isSelected(opt.value);
+        const isSelectable = !opt.disabled && (!maxReached || selected);
+        if (!isSelectable)
+            acc.push(i);
+        return acc;
+    }, []), [orderedOptions, maxReached, isSelected]);
+    // Floating UI setup
+    const { refs, floatingStyles, context } = useFloating({
+        placement: 'bottom-start',
+        open,
+        onOpenChange: setOpen,
+        middleware: [
+            offset(4),
+            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,
+    });
+    // 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' });
+    const listNavigation = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+        virtual: true,
+        focusItemOnOpen: true,
+        disabledIndices,
+    });
+    const typeahead = useTypeahead(context, {
+        listRef: listContentRef,
+        activeIndex,
+        onMatch: (index) => {
+            // Only match if the option is selectable
+            if (open && !disabledIndices.includes(index)) {
+                setActiveIndex(index);
+            }
+        },
+        resetMs: 500,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+        listNavigation,
+        typeahead,
+    ]);
+    // Register option
+    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 options for trigger display
+    const getSelectedOptions = useCallback(() => {
+        return value
+            .map((v) => {
+            const key = toKey(v);
+            const option = optionsRef.current.get(key);
+            if (option)
+                return option;
+            // Fallback for options not yet registered
+            const textValue = selectedTextMapRef.current.get(key) || String(v);
+            return { value: v, ref: { current: null }, disabled: false, textValue };
+        })
+            .filter(Boolean);
+    }, [value]);
+    // Highlighted value for keyboard navigation
+    const highlightedValue = activeIndex !== null ? orderedOptions[activeIndex]?.value ?? null : null;
+    // Track previous open state to detect open/close transitions
+    const prevOpenRef = useRef(open);
+    // Reset active index when closing, set initial when opening
+    useEffect(() => {
+        const wasOpen = prevOpenRef.current;
+        prevOpenRef.current = open;
+        if (!open) {
+            // Closing: reset active index
+            setActiveIndex(null);
+        }
+        else if (!wasOpen) {
+            // Just opened (transition from closed to open): set initial active index
+            const firstEnabled = orderedOptions.findIndex((opt) => {
+                const selected = value.some((v) => toKey(v) === toKey(opt.value));
+                const atMax = max !== undefined && value.length >= max;
+                return !opt.disabled && (!atMax || selected);
+            });
+            setActiveIndex(firstEnabled >= 0 ? firstEnabled : null);
+        }
+        // Note: Don't reset activeIndex while open - that would jump focus on toggle
+    }, [open, orderedOptions, value, max]);
+    // 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,
+        display,
+        maxChips,
+        max,
+        size,
+        // ARIA IDs (stable)
+        triggerId,
+        listboxId,
+        ariaLabel,
+        ariaLabelledBy,
+        ariaDescribedBy,
+        // Stable callbacks
+        setOpen,
+        toggleOption,
+        clearAll,
+        registerOption,
+        unregisterOption,
+        // 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,
+        display,
+        maxChips,
+        max,
+        size,
+        // IDs are stable (from useId)
+        triggerId,
+        listboxId,
+        ariaLabel,
+        ariaLabelledBy,
+        ariaDescribedBy,
+        // Callbacks are stable (useCallback with stable deps)
+        setOpen,
+        toggleOption,
+        clearAll,
+        registerOption,
+        unregisterOption,
+        // Refs are stable objects
+        refs,
+        listRef,
+        // Interaction props from useInteractions (stable)
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+    ]);
+    const stateValue = useMemo(() => ({
+        // Open state
+        open,
+        // Selection state
+        value,
+        maxReached,
+        // Selection helpers (semantically tied to value)
+        isSelected,
+        getSelectedOptions,
+        // Navigation state
+        activeIndex,
+        highlightedValue,
+        // Derived (changes when registry/value changes)
+        orderedOptions,
+        // Floating UI (changes on open/position)
+        floatingStyles,
+        floatingContext: context,
+    }), [
+        open,
+        value,
+        maxReached,
+        isSelected,
+        getSelectedOptions,
+        activeIndex,
+        highlightedValue,
+        orderedOptions,
+        floatingStyles,
+        context,
+    ]);
+    return (_jsx(MultiSelectActionsContext.Provider, { value: actionsValue, children: _jsx(MultiSelectStateContext.Provider, { value: stateValue, children: children }) }));
+}
+MultiSelectRoot.displayName = 'MultiSelect';
+// =============================================================================
+// MultiSelect.Trigger
+// =============================================================================
+function MultiSelectTriggerComponent({ asChild = false, className, children, }) {
+    const { open, setOpen, disabled, placeholder, size, display, maxChips, max, maxReached, triggerId, listboxId, ariaLabel, ariaLabelledBy, ariaDescribedBy, getSelectedOptions, clearAll, refs, getReferenceProps, activeIndex, orderedOptions, toggleOption, isSelected, } = useMultiSelectContext();
+    const sizeClass = size !== 'md' ? `is-size-${size}` : undefined;
+    const selectedOptions = getSelectedOptions();
+    const hasSelection = selectedOptions.length > 0;
+    // 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 keyboard interactions (Enter/Space for toggle when open)
+    // Note: Backspace/Delete handled directly on button element to avoid typeahead interference
+    const handleKeyDown = useCallback((e) => {
+        // Toggle option with Enter/Space when open
+        if (open && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            if (activeIndex !== null) {
+                const option = orderedOptions[activeIndex];
+                if (option) {
+                    const selected = isSelected(option.value);
+                    const canToggle = !option.disabled && (!maxReached || selected);
+                    if (canToggle) {
+                        toggleOption(option.value, option.textValue);
+                    }
+                }
+            }
+        }
+    }, [open, activeIndex, orderedOptions, isSelected, maxReached, toggleOption]);
+    // 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 click
+    const handleClearClick = useCallback((e) => {
+        e.stopPropagation(); // Prevent triggering the dropdown
+        if (disabled)
+            return;
+        clearAll();
+    }, [disabled, clearAll]);
+    // Get Floating UI's reference props
+    const floatingProps = getReferenceProps({
+        'aria-activedescendant': activeIndex !== null ? `${listboxId}-option-${activeIndex}` : undefined,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+    });
+    // Render trigger content based on display mode
+    const renderTriggerContent = () => {
+        if (!hasSelection) {
+            return _jsx("span", { className: "tui-multiselect__placeholder", children: placeholder });
+        }
+        if (display === 'count') {
+            return (_jsxs("span", { className: "tui-multiselect__count", children: [selectedOptions.length, " selected"] }));
+        }
+        // chips mode
+        const visibleChips = selectedOptions.slice(0, maxChips);
+        const overflow = selectedOptions.length - maxChips;
+        return (_jsxs("span", { className: "tui-multiselect__chips", children: [visibleChips.map((opt) => (_jsx("span", { className: "tui-multiselect__chip", children: opt.textValue }, toKey(opt.value)))), overflow > 0 && (_jsxs("span", { className: "tui-multiselect__more", children: ["+", overflow, " more"] }))] }));
+    };
+    // Default trigger content (when not using asChild or custom children)
+    const defaultTriggerContent = (_jsxs(_Fragment, { children: [_jsx("span", { className: "tui-multiselect__value", children: renderTriggerContent() }), hasSelection && (_jsx("span", { className: "tui-multiselect__clear", onClick: handleClearClick, "aria-hidden": "true", children: _jsx(Icon, { name: "system/close", size: "sm" }) })), _jsx(Icon, { name: "system/chevron-down", size: "sm", className: "tui-multiselect__icon", "aria-hidden": "true" })] }));
+    // Generate status message for screen readers
+    const statusMessage = hasSelection
+        ? `${selectedOptions.length} item${selectedOptions.length === 1 ? '' : 's'} selected${maxReached && max ? `. Maximum of ${max} reached` : ''}`
+        : '';
+    // Live region (rendered outside button, sibling to trigger)
+    const liveRegion = (_jsx("span", { className: "tui-visually-hidden", role: "status", "aria-live": "polite", "aria-atomic": "true", children: statusMessage }));
+    // Base trigger props
+    const triggerProps = {
+        id: triggerId,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        'aria-haspopup': 'listbox',
+        'aria-expanded': open,
+        'aria-controls': listboxId,
+        'aria-disabled': disabled || undefined,
+        'data-state': open ? 'open' : 'closed',
+        'data-disabled': disabled || undefined,
+        ...floatingProps,
+    };
+    // asChild: merge props onto child element
+    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 (_jsxs(_Fragment, { children: [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': 'listbox',
+                    'aria-expanded': open,
+                    'aria-controls': listboxId,
+                    '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-multiselect__trigger', sizeClass, className),
+                    // Composed handlers override both spreads
+                    onClick: composeHandler(triggerProps.onClick, childProps.onClick),
+                    // Handle Backspace/Delete before composed handlers (typeahead may intercept)
+                    onKeyDown: (e) => {
+                        if (!open && hasSelection && (e.key === 'Backspace' || e.key === 'Delete')) {
+                            e.preventDefault();
+                            clearAll();
+                            return;
+                        }
+                        // Then run composed handlers
+                        const composedHandler = composeHandler(triggerProps.onKeyDown, childProps.onKeyDown);
+                        composedHandler?.(e);
+                    },
+                    onBlur: composeHandler(triggerProps.onBlur, childProps.onBlur),
+                    onMouseDown: composeHandler(triggerProps.onMouseDown, childProps.onMouseDown),
+                    onPointerDown: composeHandler(triggerProps.onPointerDown, childProps.onPointerDown),
+                }), liveRegion] }));
+    }
+    // Default: render button with optional custom content
+    const triggerContent = children ?? defaultTriggerContent;
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: refs.setReference, type: "button", id: triggerId, className: cx('tui-multiselect__trigger', sizeClass, className), disabled: disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, "aria-disabled": disabled || undefined, "data-state": open ? 'open' : 'closed', "data-disabled": disabled || undefined, ...floatingProps, 
+                // Handle Backspace/Delete AFTER floatingProps to ensure we catch it
+                // (typeahead may intercept these for its buffer)
+                onKeyDown: (e) => {
+                    // Clear all with Backspace/Delete when closed and has selection
+                    if (!open && hasSelection && (e.key === 'Backspace' || e.key === 'Delete')) {
+                        e.preventDefault();
+                        clearAll();
+                        return;
+                    }
+                    // Call the composed handler from floatingProps for everything else
+                    floatingProps.onKeyDown?.(e);
+                }, children: triggerContent }), liveRegion] }));
+}
+MultiSelectTriggerComponent.displayName = 'MultiSelect.Trigger';
+// =============================================================================
+// MultiSelect.Content
+// =============================================================================
+function MultiSelectContentComponent({ className, children }) {
+    const { open, listboxId, triggerId, refs, floatingStyles, getFloatingProps, listRef, activeIndex, orderedOptions, } = useMultiSelectContext();
+    const portalRoot = getPortalRootFor(refs.reference.current);
+    // Memoized context for options
+    const contentContext = useMemo(() => ({
+        listRef,
+        activeIndex,
+        orderedOptions,
+    }), [listRef, activeIndex, orderedOptions]);
+    return (_jsxs(_Fragment, { children: [!open && (_jsx("div", { style: { display: 'none' }, "aria-hidden": "true", children: _jsx(MultiSelectContentContext.Provider, { value: contentContext, children: children }) })), open && (_jsx(FloatingPortal, { root: portalRoot, children: _jsx("div", { ref: refs.setFloating, id: listboxId, role: "listbox", "aria-labelledby": triggerId, "aria-multiselectable": "true", className: cx('tui-multiselect__content', className), style: {
+                        ...floatingStyles,
+                        minWidth: refs.reference.current?.offsetWidth,
+                        pointerEvents: 'auto',
+                    }, ...getFloatingProps(), children: _jsx(MultiSelectContentContext.Provider, { value: contentContext, children: children }) }) }))] }));
+}
+MultiSelectContentComponent.displayName = 'MultiSelect.Content';
+// =============================================================================
+// MultiSelect.Option
+// =============================================================================
+function MultiSelectOptionComponent({ value: optionValue, disabled = false, textValue: explicitTextValue, className, children, }) {
+    const { isSelected, toggleOption, listboxId, registerOption, unregisterOption, highlightedValue, getItemProps, maxReached, } = useMultiSelectContext();
+    const { listRef, orderedOptions } = useMultiSelectContentContext();
+    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(`MultiSelect.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 selected = isSelected(optionValue);
+    const isHighlighted = highlightedValue !== null && toKey(highlightedValue) === toKey(optionValue);
+    // Blocked: max reached and not selected (blocked by constraint, not intrinsically disabled)
+    const isBlocked = !disabled && maxReached && !selected;
+    // Selectable: not disabled AND (not max reached OR already selected)
+    const isSelectable = !disabled && (!maxReached || selected);
+    const handlePointerDown = useCallback((e) => {
+        // Prevent focus shift from trigger
+        e.preventDefault();
+    }, []);
+    const handleClick = useCallback(() => {
+        if (!isSelectable)
+            return;
+        toggleOption(optionValue, textValue);
+    }, [isSelectable, optionValue, textValue, toggleOption]);
+    return (_jsxs("div", { ref: ref, id: index >= 0 ? `${listboxId}-option-${index}` : undefined, role: "option", className: cx('tui-multiselect__option', className), "aria-selected": selected, "aria-disabled": !isSelectable || undefined, "data-highlighted": isHighlighted || undefined, "data-disabled": disabled || undefined, "data-blocked": isBlocked || undefined, ...getItemProps({
+            onClick: isSelectable ? handleClick : undefined,
+            onPointerDown: handlePointerDown,
+        }), children: [_jsx("span", { className: cx('tui-multiselect__checkbox', selected && 'is-checked'), "aria-hidden": "true", children: selected && _jsx(Icon, { name: "system/check", size: "xs" }) }), _jsx("span", { className: "tui-multiselect__option-content", children: children })] }));
+}
+MultiSelectOptionComponent.displayName = 'MultiSelect.Option';
+// =============================================================================
+// MultiSelect.Group
+// =============================================================================
+function MultiSelectGroupComponent({ className, children }) {
+    const groupId = useId();
+    return (_jsx("div", { role: "group", "aria-labelledby": `${groupId}-label`, className: cx('tui-multiselect__group', className), children: _jsx(MultiSelectGroupContext.Provider, { value: { groupId }, children: children }) }));
+}
+MultiSelectGroupComponent.displayName = 'MultiSelect.Group';
+const MultiSelectGroupContext = React.createContext(null);
+// =============================================================================
+// MultiSelect.Label
+// =============================================================================
+function MultiSelectLabelComponent({ className, children }) {
+    const groupContext = React.useContext(MultiSelectGroupContext);
+    // No aria-hidden or role="presentation" — 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-multiselect__label', className), children: children }));
+}
+MultiSelectLabelComponent.displayName = 'MultiSelect.Label';
+export const MultiSelect = MultiSelectRoot;
+MultiSelect.Trigger = MultiSelectTriggerComponent;
+MultiSelect.Content = MultiSelectContentComponent;
+MultiSelect.Option = MultiSelectOptionComponent;
+MultiSelect.Group = MultiSelectGroupComponent;
+MultiSelect.Label = MultiSelectLabelComponent;
+// Named exports
+export const MultiSelectTrigger = MultiSelectTriggerComponent;
+export const MultiSelectContent = MultiSelectContentComponent;
+export const MultiSelectOption = MultiSelectOptionComponent;
+export const MultiSelectGroup = MultiSelectGroupComponent;
+export const MultiSelectLabel = MultiSelectLabelComponent;
+// Hook for advanced use cases
+// eslint-disable-next-line react-refresh/only-export-components
+export { useMultiSelectContext as useMultiSelect } from './MultiSelectContext.js';