@syuttechnologies/layout 1.0.2 → 1.0.21

package/dist/components/ui/SyutSelect/SyutSelectUnified.js

@@ -0,0 +1,679 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import Select from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import AsyncSelect from 'react-select/async';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+// ============================================================================
+// INJECT SELF-CONTAINED STYLES
+// ============================================================================
+if (typeof document !== 'undefined') {
+    const styleId = 'syut-select-styles';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      /* SyutSelectUnified Component Styles */
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .syut-select-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        width: 100%;
+      }
+
+      .syut-select-label {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--text-primary, #1e293b);
+        margin-bottom: 0.25rem;
+      }
+
+      .syut-select-required {
+        color: var(--danger, #ef4444);
+        margin-left: 0.25rem;
+      }
+
+      .syut-select-error {
+        font-size: 0.75rem;
+        color: var(--danger, #ef4444);
+        margin-top: 0.25rem;
+      }
+
+      .syut-select-helper {
+        font-size: 0.75rem;
+        color: var(--text-muted, #64748b);
+        margin-top: 0.25rem;
+      }
+
+      /* React-select overrides for consistent theming */
+      .syut-select__control {
+        border-color: var(--border-color, #e2e8f0) !important;
+        background: var(--bg-primary, #ffffff) !important;
+      }
+
+      .syut-select__control--is-focused {
+        border-color: var(--primary, #3b82f6) !important;
+        box-shadow: 0 0 0 1px var(--primary, #3b82f6) !important;
+      }
+
+      .syut-select__menu {
+        background: var(--bg-primary, #ffffff) !important;
+        border: 1px solid var(--border-color, #e2e8f0) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+        z-index: 9999 !important;
+      }
+
+      .syut-select__option {
+        background: transparent !important;
+        color: var(--text-primary, #1e293b) !important;
+      }
+
+      .syut-select__option--is-focused {
+        background: var(--bg-secondary, #f8fafc) !important;
+      }
+
+      .syut-select__option--is-selected {
+        background: var(--primary, #3b82f6) !important;
+        color: white !important;
+      }
+
+      .syut-select__single-value {
+        color: var(--text-primary, #1e293b) !important;
+      }
+
+      .syut-select__multi-value {
+        background: var(--bg-tertiary, #e0ebf7) !important;
+        border-radius: 4px !important;
+      }
+
+      .syut-select__multi-value__label {
+        color: var(--text-primary, #1e293b) !important;
+      }
+
+      .syut-select__multi-value__remove:hover {
+        background: var(--danger, #ef4444) !important;
+        color: white !important;
+      }
+
+      .syut-select__placeholder {
+        color: var(--text-muted, #64748b) !important;
+      }
+
+      .syut-select__input-container {
+        color: var(--text-primary, #1e293b) !important;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+// ============================================================================
+// SIZE CONFIGURATIONS
+// ============================================================================
+const sizeConfig = {
+    sm: { height: '32px', fontSize: '0.8rem', padding: '0.375rem 0.5rem', checkboxSize: '14px' },
+    md: { height: '38px', fontSize: '0.875rem', padding: '0.5rem 0.75rem', checkboxSize: '16px' },
+    lg: { height: '44px', fontSize: '1rem', padding: '0.625rem 1rem', checkboxSize: '18px' },
+};
+// ============================================================================
+// REACT-SELECT CUSTOM STYLES
+// ============================================================================
+const getReactSelectStyles = (size, hasError) => {
+    const config = sizeConfig[size];
+    return {
+        control: (base, state) => ({
+            ...base,
+            minHeight: config.height,
+            fontSize: config.fontSize,
+            borderColor: hasError
+                ? 'var(--danger, #ef4444)'
+                : state.isFocused
+                    ? 'var(--primary)'
+                    : 'var(--border-color)',
+            boxShadow: state.isFocused
+                ? `0 0 0 1px ${hasError ? 'var(--danger, #ef4444)' : 'var(--primary)'}`
+                : 'none',
+            backgroundColor: state.isDisabled ? 'var(--bg-secondary)' : 'var(--bg-primary)',
+            '&:hover': {
+                borderColor: hasError ? 'var(--danger, #ef4444)' : 'var(--primary)',
+            },
+            cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+        }),
+        menu: (base) => ({
+            ...base,
+            backgroundColor: 'var(--bg-primary)',
+            border: '1px solid var(--border-color)',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            zIndex: 9999,
+        }),
+        menuList: (base) => ({
+            ...base,
+            padding: '4px',
+        }),
+        option: (base, state) => ({
+            ...base,
+            fontSize: config.fontSize,
+            padding: config.padding,
+            backgroundColor: state.isSelected
+                ? 'var(--primary)'
+                : state.isFocused
+                    ? 'var(--bg-secondary)'
+                    : 'transparent',
+            color: state.isSelected ? 'white' : 'var(--text-primary)',
+            cursor: state.isDisabled ? 'not-allowed' : 'pointer',
+            borderRadius: '4px',
+        }),
+        singleValue: (base) => ({
+            ...base,
+            color: 'var(--text-primary)',
+        }),
+        multiValue: (base) => ({
+            ...base,
+            backgroundColor: 'var(--bg-tertiary, #e0ebf7)',
+            borderRadius: '4px',
+        }),
+        multiValueLabel: (base) => ({
+            ...base,
+            color: 'var(--text-primary)',
+            fontSize: config.fontSize,
+            padding: '2px 6px',
+        }),
+        multiValueRemove: (base) => ({
+            ...base,
+            color: 'var(--text-muted)',
+            '&:hover': {
+                backgroundColor: 'var(--danger, #ef4444)',
+                color: 'white',
+            },
+        }),
+        placeholder: (base) => ({
+            ...base,
+            color: 'var(--text-muted)',
+        }),
+        input: (base) => ({
+            ...base,
+            color: 'var(--text-primary)',
+        }),
+        dropdownIndicator: (base, state) => ({
+            ...base,
+            color: 'var(--text-muted)',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined,
+            transition: 'transform 0.2s ease',
+        }),
+        clearIndicator: (base) => ({
+            ...base,
+            color: 'var(--text-muted)',
+            '&:hover': {
+                color: 'var(--danger, #ef4444)',
+            },
+        }),
+    };
+};
+// ============================================================================
+// CHECKBOX VARIANT COMPONENT
+// ============================================================================
+const CheckboxVariant = ({ id, options: initialOptions = [], value = [], onChange, placeholder = 'Select...', isDisabled = false, isLoading: externalLoading = false, isMulti = true, isAsync = false, loadOptions, defaultOptions, cacheOptions = true, error, size = 'md', showSelectAll = true, selectAllLabel = 'Select All', maxMenuHeight = 250, searchPlaceholder = 'Search...', noOptionsMessage = 'No options found', debounceDelay = 300, minSearchLength = 1, loadingMessage = 'Loading...', minSearchMessage = 'Type to search...', config, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [asyncOptions, setAsyncOptions] = useState([]);
+    const [isSearching, setIsSearching] = useState(false);
+    const [hasSearched, setHasSearched] = useState(false);
+    const containerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const optionsListRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    const optionsCacheRef = useRef(new Map());
+    // Determine which options to use (async loaded or initial)
+    const options = isAsync ? asyncOptions : initialOptions;
+    const isLoading = externalLoading || isSearching;
+    // Load default options when dropdown opens (for async mode)
+    useEffect(() => {
+        if (isAsync && isOpen && !hasSearched) {
+            if (defaultOptions === true && loadOptions) {
+                // Load initial options with empty string
+                setIsSearching(true);
+                const result = loadOptions('', (loadedOptions) => {
+                    setAsyncOptions(loadedOptions);
+                    setIsSearching(false);
+                });
+                if (result instanceof Promise) {
+                    result.then((loadedOptions) => {
+                        setAsyncOptions(loadedOptions);
+                        setIsSearching(false);
+                    }).catch(() => {
+                        setIsSearching(false);
+                    });
+                }
+            }
+            else if (Array.isArray(defaultOptions)) {
+                setAsyncOptions(defaultOptions);
+            }
+        }
+    }, [isAsync, isOpen, hasSearched, defaultOptions, loadOptions]);
+    // Handle async search with debounce
+    useEffect(() => {
+        if (!isAsync || !loadOptions)
+            return;
+        // Clear previous timer
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // Check minimum search length
+        if (searchQuery.length < minSearchLength) {
+            if (searchQuery.length === 0 && Array.isArray(defaultOptions)) {
+                setAsyncOptions(defaultOptions);
+            }
+            return;
+        }
+        // Check cache first
+        if (cacheOptions && optionsCacheRef.current.has(searchQuery)) {
+            setAsyncOptions(optionsCacheRef.current.get(searchQuery) || []);
+            return;
+        }
+        // Debounce the API call
+        debounceTimerRef.current = setTimeout(() => {
+            setIsSearching(true);
+            setHasSearched(true);
+            const result = loadOptions(searchQuery, (loadedOptions) => {
+                setAsyncOptions(loadedOptions);
+                if (cacheOptions) {
+                    optionsCacheRef.current.set(searchQuery, loadedOptions);
+                }
+                setIsSearching(false);
+            });
+            if (result instanceof Promise) {
+                result.then((loadedOptions) => {
+                    setAsyncOptions(loadedOptions);
+                    if (cacheOptions) {
+                        optionsCacheRef.current.set(searchQuery, loadedOptions);
+                    }
+                    setIsSearching(false);
+                }).catch(() => {
+                    setIsSearching(false);
+                });
+            }
+        }, debounceDelay);
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [searchQuery, isAsync, loadOptions, debounceDelay, minSearchLength, cacheOptions, defaultOptions]);
+    // Normalize value to array
+    const selectedValues = useMemo(() => {
+        if (!value)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }, [value]);
+    // Filter options based on search query (only for non-async mode)
+    const filteredOptions = useMemo(() => {
+        if (isAsync)
+            return options; // Async filtering is done by the API
+        if (!searchQuery.trim())
+            return options;
+        const query = searchQuery.toLowerCase();
+        return options.filter(option => option.label.toLowerCase().includes(query) ||
+            option.value.toLowerCase().includes(query));
+    }, [options, searchQuery, isAsync]);
+    // Check if all filtered options are selected
+    const allFilteredSelected = useMemo(() => {
+        const selectableOptions = filteredOptions.filter(opt => !opt.isDisabled);
+        if (selectableOptions.length === 0)
+            return false;
+        return selectableOptions.every(opt => selectedValues.includes(opt.value));
+    }, [filteredOptions, selectedValues]);
+    // Get selected options with their details
+    const selectedOptions = useMemo(() => {
+        return options.filter(opt => selectedValues.includes(opt.value));
+    }, [options, selectedValues]);
+    // Handle click outside to close dropdown
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchQuery('');
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    // Focus search input when dropdown opens
+    useEffect(() => {
+        if (isOpen && searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+        if (!isOpen) {
+            setHighlightedIndex(-1);
+        }
+    }, [isOpen]);
+    // Reset highlighted index when filtered options change
+    useEffect(() => {
+        setHighlightedIndex(-1);
+    }, [filteredOptions.length]);
+    // Scroll highlighted option into view
+    useEffect(() => {
+        if (highlightedIndex >= 0 && optionsListRef.current) {
+            const highlightedElement = optionsListRef.current.children[highlightedIndex];
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [highlightedIndex]);
+    // Handle option toggle
+    const handleOptionToggle = useCallback((optionValue) => {
+        if (isMulti) {
+            const newValue = selectedValues.includes(optionValue)
+                ? selectedValues.filter(v => v !== optionValue)
+                : [...selectedValues, optionValue];
+            onChange?.(newValue);
+        }
+        else {
+            onChange?.(optionValue);
+            setIsOpen(false);
+            setSearchQuery('');
+        }
+    }, [selectedValues, onChange, isMulti]);
+    // Handle select all toggle
+    const handleSelectAllToggle = useCallback(() => {
+        const selectableOptions = filteredOptions.filter(opt => !opt.isDisabled);
+        const selectableValues = selectableOptions.map(opt => opt.value);
+        if (allFilteredSelected) {
+            const newValue = selectedValues.filter(v => !selectableValues.includes(v));
+            onChange?.(newValue);
+        }
+        else {
+            const newValue = [...new Set([...selectedValues, ...selectableValues])];
+            onChange?.(newValue);
+        }
+    }, [filteredOptions, allFilteredSelected, selectedValues, onChange]);
+    // Remove a selected item
+    const removeSelection = useCallback((optionValue, e) => {
+        e.stopPropagation();
+        if (isMulti) {
+            onChange?.(selectedValues.filter(v => v !== optionValue));
+        }
+        else {
+            onChange?.(null);
+        }
+    }, [selectedValues, onChange, isMulti]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        const selectableOptions = filteredOptions.filter(opt => !opt.isDisabled);
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                e.stopPropagation();
+                setHighlightedIndex(prev => {
+                    const nextIndex = prev + 1;
+                    return nextIndex >= selectableOptions.length ? 0 : nextIndex;
+                });
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                e.stopPropagation();
+                setHighlightedIndex(prev => {
+                    const nextIndex = prev - 1;
+                    return nextIndex < 0 ? selectableOptions.length - 1 : nextIndex;
+                });
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                e.stopPropagation();
+                if (highlightedIndex >= 0 && highlightedIndex < selectableOptions.length) {
+                    handleOptionToggle(selectableOptions[highlightedIndex].value);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                setIsOpen(false);
+                setSearchQuery('');
+                break;
+            default:
+                e.stopPropagation();
+                break;
+        }
+    }, [filteredOptions, highlightedIndex, handleOptionToggle]);
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative' }, children: [_jsxs("div", { id: id, onClick: () => !isDisabled && setIsOpen(!isOpen), style: {
+                    width: '100%',
+                    minHeight: config.height,
+                    maxHeight: '120px',
+                    overflowY: 'auto',
+                    padding: '0.25rem 0.5rem',
+                    paddingRight: '2rem',
+                    fontSize: config.fontSize,
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'flex-start',
+                    alignContent: 'flex-start',
+                    gap: '0.25rem',
+                    background: isDisabled ? 'var(--bg-secondary)' : 'var(--bg-primary)',
+                    border: `1px solid ${error ? 'var(--danger, #ef4444)' : isOpen ? 'var(--primary)' : 'var(--border-color)'}`,
+                    borderRadius: 'var(--radius-sm, 4px)',
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
+                    position: 'relative',
+                    transition: 'all 0.2s ease',
+                    boxShadow: isOpen ? '0 0 0 1px var(--primary)' : 'none',
+                }, children: [isLoading ? (_jsx("span", { style: { color: 'var(--text-muted)', padding: '0.125rem 0.25rem' }, children: "Loading..." })) : selectedOptions.length === 0 ? (_jsx("span", { style: { color: 'var(--text-muted)', padding: '0.125rem 0.25rem' }, children: placeholder })) : (selectedOptions.map(option => (_jsxs("span", { style: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '0.25rem',
+                            padding: '0.125rem 0.375rem',
+                            background: 'var(--bg-tertiary, #e0ebf7)',
+                            border: '1px solid var(--border-color)',
+                            borderRadius: '0.25rem',
+                            fontSize: '0.75rem',
+                            color: 'var(--text-primary)',
+                            fontWeight: 500,
+                            maxWidth: '150px'
+                        }, children: [_jsx("span", { style: {
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap'
+                                }, children: option.label }), !isDisabled && (_jsx("button", { type: "button", onClick: (e) => removeSelection(option.value, e), style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: '14px',
+                                    height: '14px',
+                                    padding: 0,
+                                    border: 'none',
+                                    background: 'transparent',
+                                    cursor: 'pointer',
+                                    borderRadius: '50%',
+                                    color: 'var(--text-muted)',
+                                    flexShrink: 0
+                                }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.background = 'var(--border-color)';
+                                    e.currentTarget.style.color = 'var(--text-primary)';
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.background = 'transparent';
+                                    e.currentTarget.style.color = 'var(--text-muted)';
+                                }, children: _jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }, option.value)))), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: {
+                            position: 'absolute',
+                            right: '0.5rem',
+                            top: '50%',
+                            transform: isOpen ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%) rotate(0deg)',
+                            transition: 'transform 0.2s ease',
+                            color: 'var(--text-muted)',
+                            flexShrink: 0,
+                        }, children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), isOpen && (_jsxs("div", { style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: '4px',
+                    background: 'var(--bg-primary)',
+                    border: '1px solid var(--border-color)',
+                    borderRadius: 'var(--radius-sm, 4px)',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+                    zIndex: 9999,
+                    overflow: 'hidden',
+                }, children: [_jsx("div", { style: { padding: '0.5rem', borderBottom: '1px solid var(--border-color)' }, children: _jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onClick: (e) => e.stopPropagation(), onKeyDown: handleKeyDown, onMouseDown: (e) => e.stopPropagation(), placeholder: searchPlaceholder, style: {
+                                width: '100%',
+                                padding: '0.375rem 0.5rem',
+                                fontSize: config.fontSize,
+                                border: '1px solid var(--border-color)',
+                                borderRadius: 'var(--radius-sm, 4px)',
+                                background: 'var(--bg-primary)',
+                                color: 'var(--text-primary)',
+                                outline: 'none',
+                            }, onFocus: (e) => {
+                                e.target.style.borderColor = 'var(--primary)';
+                            }, onBlur: (e) => {
+                                e.target.style.borderColor = 'var(--border-color)';
+                            } }) }), isMulti && showSelectAll && filteredOptions.length > 0 && (_jsxs("div", { onClick: handleSelectAllToggle, style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.5rem',
+                            padding: config.padding,
+                            cursor: 'pointer',
+                            borderBottom: '1px solid var(--border-color)',
+                            background: 'var(--bg-secondary)',
+                            fontWeight: 600,
+                            fontSize: config.fontSize,
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.background = 'var(--bg-tertiary, #e2e8f0)';
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.background = 'var(--bg-secondary)';
+                        }, children: [_jsx("input", { type: "checkbox", checked: allFilteredSelected, onChange: () => { }, style: {
+                                    width: config.checkboxSize,
+                                    height: config.checkboxSize,
+                                    accentColor: 'var(--primary)',
+                                    cursor: 'pointer',
+                                } }), _jsx("span", { style: { color: 'var(--text-primary)' }, children: selectAllLabel })] })), _jsx("div", { ref: optionsListRef, style: {
+                            maxHeight: `${maxMenuHeight}px`,
+                            overflowY: 'auto',
+                        }, children: isLoading ? (_jsxs("div", { style: {
+                                padding: '1rem',
+                                textAlign: 'center',
+                                color: 'var(--text-muted)',
+                                fontSize: config.fontSize,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '0.5rem',
+                            }, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { animation: 'spin 1s linear infinite' }, children: [_jsx("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }), _jsx("path", { d: "M12 2a10 10 0 0 1 10 10", strokeLinecap: "round" })] }), loadingMessage] })) : isAsync && searchQuery.length < minSearchLength && filteredOptions.length === 0 ? (_jsx("div", { style: {
+                                padding: '1rem',
+                                textAlign: 'center',
+                                color: 'var(--text-muted)',
+                                fontSize: config.fontSize,
+                            }, children: minSearchMessage })) : filteredOptions.length === 0 ? (_jsx("div", { style: {
+                                padding: '1rem',
+                                textAlign: 'center',
+                                color: 'var(--text-muted)',
+                                fontSize: config.fontSize,
+                            }, children: noOptionsMessage })) : (filteredOptions.filter(opt => !opt.isDisabled).map((option, index) => {
+                            const isSelected = selectedValues.includes(option.value);
+                            const isHighlighted = index === highlightedIndex;
+                            return (_jsxs("div", { onClick: () => handleOptionToggle(option.value), onMouseEnter: () => setHighlightedIndex(index), style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.5rem',
+                                    padding: config.padding,
+                                    cursor: 'pointer',
+                                    fontSize: config.fontSize,
+                                    background: isHighlighted ? 'var(--bg-secondary)' : 'transparent',
+                                    transition: 'background 0.15s ease',
+                                }, children: [isMulti && (_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => { }, style: {
+                                            width: config.checkboxSize,
+                                            height: config.checkboxSize,
+                                            accentColor: 'var(--primary)',
+                                            cursor: 'pointer',
+                                        } })), _jsx("span", { style: {
+                                            color: !isMulti && isSelected ? 'var(--primary)' : 'var(--text-primary)',
+                                            flex: 1,
+                                            fontWeight: !isMulti && isSelected ? 600 : 400,
+                                        }, children: option.label }), !isMulti && isSelected && (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "var(--primary)", strokeWidth: "2", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }, option.value));
+                        })) })] }))] }));
+};
+// ============================================================================
+// MAIN UNIFIED COMPONENT
+// ============================================================================
+/**
+ * SyutSelectUnified - A unified select component with multiple variants
+ *
+ * @example
+ * Single select (default variant):
+ * ```tsx
+ * <SyutSelectUnified
+ *   options={options}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ * />
+ * ```
+ *
+ * @example
+ * Multi-select with checkbox variant:
+ * ```tsx
+ * <SyutSelectUnified
+ *   isMulti
+ *   variant="checkbox"
+ *   options={options}
+ *   value={selectedValues}
+ *   onChange={setSelectedValues}
+ *   showSelectAll
+ * />
+ * ```
+ *
+ * @example
+ * Creatable select:
+ * ```tsx
+ * <SyutSelectUnified
+ *   isCreatable
+ *   options={options}
+ *   onCreateOption={(value) => addOption(value)}
+ * />
+ * ```
+ */
+export function SyutSelectUnified({ id, name, options = [], value, onChange, placeholder = 'Select...', isDisabled = false, isLoading = false, isMulti = false, isSearchable: isSearchableProp = false, searchable, isClearable = true, isCreatable = false, onCreateOption, formatCreateLabel = (inputValue) => `Create "${inputValue}"`, isAsync = false, loadOptions, defaultOptions = true, cacheOptions = true, label, error, helperText, required = false, className = '', size = 'md', autoFocus = false, menuPlacement = 'auto', maxMenuHeight = 300, variant = 'default', showSelectAll = true, selectAllLabel = 'Select All', searchPlaceholder = 'Search...', noOptionsMessage = 'No options found', debounceDelay = 300, minSearchLength = 1, loadingMessage = 'Loading...', minSearchMessage = 'Type to search...', style, }) {
+    const config = sizeConfig[size];
+    // Handle legacy searchable prop
+    const isSearchable = searchable ?? isSearchableProp;
+    // Convert value to SelectOption format for react-select
+    const reactSelectValue = useMemo(() => {
+        if (!value)
+            return isMulti ? [] : null;
+        if (isMulti) {
+            const values = Array.isArray(value) ? value : [value];
+            return options.filter(opt => values.includes(opt.value));
+        }
+        return options.find(opt => opt.value === value) || null;
+    }, [value, options, isMulti]);
+    // Handle react-select change
+    const handleReactSelectChange = useCallback((newValue, actionMeta) => {
+        if (isMulti) {
+            const values = newValue.map(opt => opt.value);
+            onChange?.(values);
+        }
+        else {
+            onChange?.(newValue?.value || null);
+        }
+    }, [onChange, isMulti]);
+    // Get react-select styles
+    const customStyles = useMemo(() => getReactSelectStyles(size, !!error), [size, error]);
+    // Determine which Select component to use
+    const SelectComponent = useMemo(() => {
+        if (isAsync && isCreatable)
+            return AsyncCreatableSelect;
+        if (isAsync)
+            return AsyncSelect;
+        if (isCreatable)
+            return CreatableSelect;
+        return Select;
+    }, [isAsync, isCreatable]);
+    // Use checkbox variant for multi-select checkbox style
+    const useCheckboxVariant = variant === 'checkbox';
+    return (_jsxs("div", { className: `syut-select-container ${className}`, style: style, children: [label && (_jsxs("label", { className: "syut-select-label", htmlFor: id, children: [label, required && _jsx("span", { className: "syut-select-required", children: "*" })] })), useCheckboxVariant ? (_jsx(CheckboxVariant, { id: id, options: options, value: value, onChange: onChange, placeholder: placeholder, isDisabled: isDisabled, isLoading: isLoading, isMulti: isMulti, isAsync: isAsync, loadOptions: loadOptions, defaultOptions: defaultOptions, cacheOptions: cacheOptions, error: error, size: size, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, maxMenuHeight: maxMenuHeight, searchPlaceholder: searchPlaceholder, noOptionsMessage: noOptionsMessage, debounceDelay: debounceDelay, minSearchLength: minSearchLength, loadingMessage: loadingMessage, minSearchMessage: minSearchMessage, config: config })) : (_jsx(SelectComponent, { inputId: id, name: name, options: options, value: reactSelectValue, onChange: handleReactSelectChange, placeholder: placeholder, isDisabled: isDisabled, isLoading: isLoading, isMulti: isMulti, isSearchable: isSearchable, isClearable: isClearable, styles: customStyles, noOptionsMessage: () => noOptionsMessage, autoFocus: autoFocus, menuPlacement: menuPlacement, closeMenuOnSelect: !isMulti, maxMenuHeight: maxMenuHeight, classNamePrefix: "syut-select", ...(isCreatable ? { onCreateOption, formatCreateLabel } : {}), ...(isAsync ? { loadOptions, defaultOptions, cacheOptions } : {}) })), error && _jsx("span", { className: "syut-select-error", children: error }), helperText && !error && (_jsx("span", { className: "syut-select-helper", children: helperText }))] }));
+}
+export default SyutSelectUnified;