@syuttechnologies/layout 1.0.2 → 1.0.21

package/src/components/ui/SyutSelect/SyutSelectUnified.tsx

@@ -0,0 +1,1115 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import Select, {
+  components,
+  GroupBase,
+  StylesConfig,
+  ActionMeta,
+  MultiValue,
+  SingleValue,
+} 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);
+  }
+}
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+  [key: string]: any;
+}
+
+export interface SyutSelectUnifiedProps {
+  /** Unique identifier for the select */
+  id?: string;
+  /** Name attribute for form handling */
+  name?: string;
+  /** Options to display in the dropdown */
+  options?: SelectOption[];
+  /** Currently selected value(s) - string[] for multi, string for single */
+  value?: string | string[];
+  /** Callback when selection changes */
+  onChange?: (value: any) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the select is disabled */
+  isDisabled?: boolean;
+  /** Whether the select is in loading state */
+  isLoading?: boolean;
+  /** Whether to allow multiple selections */
+  isMulti?: boolean;
+  /** Whether the select is searchable */
+  isSearchable?: boolean;
+  /** Legacy alias for isSearchable */
+  searchable?: boolean;
+  /** Whether the value can be cleared */
+  isClearable?: boolean;
+  /** Whether to allow creating new options */
+  isCreatable?: boolean;
+  /** Callback for creating new options */
+  onCreateOption?: (inputValue: string) => void;
+  /** Format for the create option label */
+  formatCreateLabel?: (inputValue: string) => React.ReactNode;
+  /** Whether to use async loading */
+  isAsync?: boolean;
+  /** Async function to load options */
+  loadOptions?: (
+    inputValue: string,
+    callback: (options: SelectOption[]) => void
+  ) => Promise<SelectOption[]> | void;
+  /** Default options to show before search (for async) */
+  defaultOptions?: boolean | SelectOption[];
+  /** Cache loaded options */
+  cacheOptions?: boolean;
+  /** Label for the select (optional) */
+  label?: string;
+  /** Error message to display */
+  error?: string;
+  /** Helper text below the select */
+  helperText?: string;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Additional class name for the container */
+  className?: string;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Auto focus the select */
+  autoFocus?: boolean;
+  /** Menu placement */
+  menuPlacement?: 'auto' | 'top' | 'bottom';
+  /** Maximum height of dropdown menu */
+  maxMenuHeight?: number;
+  /**
+   * Variant style:
+   * - 'default': Uses react-select (tags for multi, dropdown for single)
+   * - 'checkbox': Custom checkbox-style multi-select with search and select all
+   */
+  variant?: 'default' | 'checkbox';
+  /** Show select all option (only for checkbox variant) */
+  showSelectAll?: boolean;
+  /** Label for select all option */
+  selectAllLabel?: string;
+  /** Search placeholder (for checkbox variant) */
+  searchPlaceholder?: string;
+  /** No options message */
+  noOptionsMessage?: string;
+  /** Debounce delay in ms for async search (default: 300) */
+  debounceDelay?: number;
+  /** Minimum characters before triggering async search (default: 1) */
+  minSearchLength?: number;
+  /** Message to show while loading async results */
+  loadingMessage?: string;
+  /** Message to show when search query is too short */
+  minSearchMessage?: string;
+  /** Inline styles for the container */
+  style?: React.CSSProperties;
+}
+
+// ============================================================================
+// 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: 'sm' | 'md' | 'lg',
+  hasError: boolean
+): StylesConfig<SelectOption, boolean, GroupBase<SelectOption>> => {
+  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: React.FC<SyutSelectUnifiedProps & { config: typeof sizeConfig['md'] }> = ({
+  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<SelectOption[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const optionsListRef = useRef<HTMLDivElement>(null);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const optionsCacheRef = useRef<Map<string, SelectOption[]>>(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: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        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] as HTMLElement;
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({ block: 'nearest' });
+      }
+    }
+  }, [highlightedIndex]);
+
+  // Handle option toggle
+  const handleOptionToggle = useCallback((optionValue: string) => {
+    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: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isMulti) {
+      onChange?.(selectedValues.filter(v => v !== optionValue));
+    } else {
+      onChange?.(null);
+    }
+  }, [selectedValues, onChange, isMulti]);
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    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 (
+    <div ref={containerRef} style={{ position: 'relative' }}>
+      {/* Trigger */}
+      <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',
+        }}
+      >
+        {isLoading ? (
+          <span style={{ color: 'var(--text-muted)', padding: '0.125rem 0.25rem' }}>Loading...</span>
+        ) : selectedOptions.length === 0 ? (
+          <span style={{ color: 'var(--text-muted)', padding: '0.125rem 0.25rem' }}>{placeholder}</span>
+        ) : (
+          selectedOptions.map(option => (
+            <span
+              key={option.value}
+              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'
+              }}
+            >
+              <span style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap'
+              }}>
+                {option.label}
+              </span>
+              {!isDisabled && (
+                <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)';
+                  }}
+                >
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              )}
+            </span>
+          ))
+        )}
+        <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,
+          }}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <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',
+          }}
+        >
+          {/* Search Input */}
+          <div style={{ padding: '0.5rem', borderBottom: '1px solid var(--border-color)' }}>
+            <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)';
+              }}
+            />
+          </div>
+
+          {/* Select All Option */}
+          {isMulti && showSelectAll && filteredOptions.length > 0 && (
+            <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)';
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={allFilteredSelected}
+                onChange={() => {}}
+                style={{
+                  width: config.checkboxSize,
+                  height: config.checkboxSize,
+                  accentColor: 'var(--primary)',
+                  cursor: 'pointer',
+                }}
+              />
+              <span style={{ color: 'var(--text-primary)' }}>{selectAllLabel}</span>
+            </div>
+          )}
+
+          {/* Options List */}
+          <div
+            ref={optionsListRef}
+            style={{
+              maxHeight: `${maxMenuHeight}px`,
+              overflowY: 'auto',
+            }}
+          >
+            {isLoading ? (
+              <div
+                style={{
+                  padding: '1rem',
+                  textAlign: 'center',
+                  color: 'var(--text-muted)',
+                  fontSize: config.fontSize,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '0.5rem',
+                }}
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  style={{ animation: 'spin 1s linear infinite' }}
+                >
+                  <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
+                  <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
+                </svg>
+                {loadingMessage}
+              </div>
+            ) : isAsync && searchQuery.length < minSearchLength && filteredOptions.length === 0 ? (
+              <div
+                style={{
+                  padding: '1rem',
+                  textAlign: 'center',
+                  color: 'var(--text-muted)',
+                  fontSize: config.fontSize,
+                }}
+              >
+                {minSearchMessage}
+              </div>
+            ) : filteredOptions.length === 0 ? (
+              <div
+                style={{
+                  padding: '1rem',
+                  textAlign: 'center',
+                  color: 'var(--text-muted)',
+                  fontSize: config.fontSize,
+                }}
+              >
+                {noOptionsMessage}
+              </div>
+            ) : (
+              filteredOptions.filter(opt => !opt.isDisabled).map((option, index) => {
+                const isSelected = selectedValues.includes(option.value);
+                const isHighlighted = index === highlightedIndex;
+                return (
+                  <div
+                    key={option.value}
+                    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',
+                    }}
+                  >
+                    {isMulti && (
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => {}}
+                        style={{
+                          width: config.checkboxSize,
+                          height: config.checkboxSize,
+                          accentColor: 'var(--primary)',
+                          cursor: 'pointer',
+                        }}
+                      />
+                    )}
+                    <span style={{
+                      color: !isMulti && isSelected ? 'var(--primary)' : 'var(--text-primary)',
+                      flex: 1,
+                      fontWeight: !isMulti && isSelected ? 600 : 400,
+                    }}>
+                      {option.label}
+                    </span>
+                    {!isMulti && isSelected && (
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ============================================================================
+// 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,
+}: SyutSelectUnifiedProps) {
+  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: MultiValue<SelectOption> | SingleValue<SelectOption>,
+      actionMeta: ActionMeta<SelectOption>
+    ) => {
+      if (isMulti) {
+        const values = (newValue as MultiValue<SelectOption>).map(opt => opt.value);
+        onChange?.(values);
+      } else {
+        onChange?.((newValue as SingleValue<SelectOption>)?.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 (
+    <div className={`syut-select-container ${className}`} style={style}>
+      {label && (
+        <label className="syut-select-label" htmlFor={id}>
+          {label}
+          {required && <span className="syut-select-required">*</span>}
+        </label>
+      )}
+
+      {useCheckboxVariant ? (
+        <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}
+        />
+      ) : (
+        <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 && <span className="syut-select-error">{error}</span>}
+      {helperText && !error && (
+        <span className="syut-select-helper">{helperText}</span>
+      )}
+    </div>
+  );
+}
+
+export default SyutSelectUnified;