siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Select/Select.tsx

@@ -1,454 +1,457 @@
-import React, { useState, useRef, useEffect } from 'react';
-import type { SelectProps, SelectOption } from './Select.types';
-import { ChevronUpDownIcon, CheckIcon } from './icons';
-
-/**
- * Select - Componente de selección (dropdown) del sistema de diseño Siesa
- *
- * Componente Select personalizado con menú desplegable para seleccionar opciones
- * de una lista. Incluye navegación por teclado, click outside y dark mode completo.
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels y keyboard navigation
- * - Click outside para cerrar el menú
- * - Soporte de teclado (Enter, Escape, Arrow Up/Down)
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <Select
- *   options={[
- *     { value: '1', label: 'Option 1' },
- *     { value: '2', label: 'Option 2' },
- *   ]}
- *   value={selectedValue}
- *   onChange={setSelectedValue}
- *   placeholder="Select an option"
- *   label="Choose one"
- * />
- * ```
- */
-export const Select: React.FC<SelectProps> = ({
-  options = [],
-  value,
-  defaultValue,
-  placeholder = 'Seleccionar...',
-  disabled = false,
-  error = false,
-  label,
-  description,
-  showLabel = true,
-  showDescription = true,
-  menuHeader,
-  onChange,
-  className = '',
-  triggerClassName = '',
-  menuClassName = '',
-  ariaLabel,
-  id,
-  name,
-  required = false,
-  menuPosition = 'bottom',
-  fullWidth = false,
-}) => {
-  // ===== ESTADO Y REFS =====
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<string | number | undefined>(
-    value !== undefined ? value : defaultValue
-  );
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // ===== SINCRONIZAR VALOR CONTROLADO =====
-  useEffect(() => {
-    if (value !== undefined) {
-      setSelectedValue(value);
-    }
-  }, [value]);
-
-  // ===== CERRAR AL HACER CLICK FUERA =====
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [isOpen]);
-
-  // ===== KEYBOARD NAVIGATION =====
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (!isOpen) return;
-
-      switch (event.key) {
-        case 'Escape':
-          setIsOpen(false);
-          triggerRef.current?.focus();
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          setFocusedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
-          break;
-        case 'Enter':
-          event.preventDefault();
-          if (focusedIndex >= 0 && focusedIndex < options.length) {
-            handleSelect(options[focusedIndex]);
-          }
-          break;
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [isOpen, focusedIndex, options]);
-
-  // ===== HELPERS =====
-  const selectedOption = options.find((opt) => opt.value === selectedValue);
-
-  const toggleMenu = () => {
-    if (!disabled) {
-      setIsOpen(!isOpen);
-      setFocusedIndex(-1);
-    }
-  };
-
-  const handleSelect = (option: SelectOption) => {
-    if (option.disabled) return;
-
-    setSelectedValue(option.value);
-    setIsOpen(false);
-    onChange?.(option.value);
-
-    setTimeout(() => {
-      triggerRef.current?.focus();
-    }, 0);
-  };
-
-  // ===== CLASES BASE DEL TRIGGER =====
-  // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)
-  // Border radius rounded-lg (8px) consistente con especificaciones
-  // Gap de 12px (gap-3) entre texto e icono según Figma
-  const baseTriggerClasses = `
-    inline-flex
-    items-center
-    justify-between
-    gap-3
-    w-full
-    px-3
-    py-2
-    text-sm
-    font-normal
-    leading-5
-    rounded-lg
-    border
-    transition-all
-    duration-150
-  `;
-
-  // ===== CLASES DE WIDTH =====
-  const widthClasses = fullWidth ? 'w-full' : 'min-w-[200px]';
-
-  // ===== CLASES PARA ESTADOS DEL TRIGGER =====
-  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-  const triggerStateClasses = error
-    ? `
-      border-error-border
-      bg-error-bg
-      text-content-primary
-      dark:border-error-border
-      dark:bg-error-bg
-      dark:text-dark-content-primary
-    `
-    : `
-      bg-bg-primary
-      border-border-primary
-      text-content-primary
-      dark:bg-dark-bg-primary
-      dark:border-dark-border-primary
-      dark:text-dark-content-primary
-    `;
-
-  // ===== CLASES PARA HOVER DEL TRIGGER =====
-  // Hover overlay rgba(0,0,0,0.024) según Figma
-  const triggerHoverClasses =
-    !disabled && !error
-      ? `
-        hover:bg-[rgba(255,255,255,1)]
-        hover:bg-[linear-gradient(90deg,rgba(0,0,0,0.024)_0%,rgba(0,0,0,0.024)_100%)]
-        dark:hover:bg-[rgba(17,45,87,1)]
-        dark:hover:bg-[linear-gradient(90deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.1)_100%)]
-      `
-      : '';
-
-  // ===== CLASES PARA FOCUS DEL TRIGGER =====
-  // Focus rings adaptativos siguiendo el patrón de otros componentes
-  const triggerFocusClasses = !disabled
-    ? `
-      focus:outline-none
-      focus:ring-2
-      focus:ring-primary-custom-400
-      focus:ring-offset-2
-      dark:focus:ring-dark-border-custom
-      dark:focus:ring-offset-dark-bg-primary
-    `
-    : '';
-
-  // ===== CLASES PARA DISABLED DEL TRIGGER =====
-  const triggerDisabledClasses = disabled
-    ? `
-      opacity-50
-      cursor-not-allowed
-    `
-    : '';
-
-  // ===== COMBINAR CLASES DEL TRIGGER =====
-  const finalTriggerClasses = [
-    baseTriggerClasses,
-    widthClasses,
-    triggerStateClasses,
-    triggerHoverClasses,
-    triggerFocusClasses,
-    triggerDisabledClasses,
-    triggerClassName,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES BASE DEL MENU =====
-  // Según Figma: altura fija 160px (h-40), sin borde visible (border-0),
-  // spacing de 4px desde trigger (mt-1), sin shadow prominente
-  const baseMenuClasses = `
-    absolute
-    z-50
-    w-full
-    min-w-[200px]
-    max-h-40
-    overflow-y-auto
-    p-1
-    rounded-md
-    border-0
-    transition-all
-    duration-150
-  `;
-
-  // ===== CLASES DE POSICIÓN DEL MENU =====
-  // Figma muestra 4px de separación, usando mt-1 en lugar de mt-2
-  const menuPositionClasses = menuPosition === 'top' ? 'bottom-full mb-1' : 'top-full mt-1';
-
-  // ===== CLASES DE COLOR DEL MENU =====
-  // Background secundario según Figma, sin borde prominente
-  const menuColorClasses = `
-    bg-background-secondary
-    dark:bg-dark-bg-primary
-  `;
-
-  // ===== CLASES DE VISIBILIDAD DEL MENU =====
-  const menuVisibilityClasses = isOpen ? 'opacity-100 visible' : 'opacity-0 invisible';
-
-  // ===== COMBINAR CLASES DEL MENU =====
-  const finalMenuClasses = [
-    baseMenuClasses,
-    menuPositionClasses,
-    menuColorClasses,
-    menuVisibilityClasses,
-    menuClassName,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES BASE DEL MENU ITEM =====
-  // CRÍTICO: Figma especifica text-[10px] leading-[12px] (Label XXSmall)
-  // NO usar text-xs que es 12px - debe ser exactamente 10px según diseño
-  const baseMenuItemClasses = `
-    flex
-    items-center
-    cursor-pointer
-    rounded-md
-    transition-all
-    duration-150
-    pl-2
-    pr-2.5
-    py-0.5
-    gap-0.5
-    text-[10px]
-    leading-[12px]
-    font-bold
-  `;
-
-  // ===== FUNCIÓN PARA OBTENER CLASES DE MENU ITEM =====
-  const getMenuItemClasses = (option: SelectOption, index: number) => {
-    const isSelected = option.value === selectedValue;
-    const isFocused = index === focusedIndex;
-
-    // Estados de color
-    const colorClasses =
-      isSelected && !isFocused
-        ? 'text-content-primary dark:text-dark-content-primary'
-        : isFocused || (isSelected && isFocused)
-        ? 'bg-primary-custom-600 text-primary-inverse-content dark:bg-primary-custom-600 dark:text-primary-inverse-content'
-        : 'text-content-primary dark:text-dark-content-primary';
-
-    // Hover
-    const hoverClasses = !option.disabled
-      ? 'hover:bg-primary-custom-600 hover:text-primary-inverse-content dark:hover:bg-primary-custom-600 dark:hover:text-primary-inverse-content'
-      : '';
-
-    // Disabled
-    const disabledClasses = option.disabled ? 'opacity-50 cursor-not-allowed' : '';
-
-    return [baseMenuItemClasses, colorClasses, hoverClasses, disabledClasses]
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-  };
-
-  // ===== CLASES DEL ICONO DEL TRIGGER =====
-  const iconClasses = [
-    'flex-shrink-0',
-    'transition-transform',
-    'duration-150',
-    isOpen && 'rotate-180',
-    disabled ? 'text-content-tertiary dark:text-content-tertiary' : 'text-content-secondary dark:text-content-secondary',
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES DEL CHECK ICON =====
-  const checkIconClasses = 'flex-shrink-0 w-4 h-4';
-
-  // ===== RENDERIZAR COMPONENTE =====
-  return (
-    <div className={`relative ${fullWidth ? 'w-full' : ''} ${className}`} ref={containerRef}>
-      {/* Label and Description - Según Figma, van ANTES del trigger con gap-1 (4px) */}
-      {(showLabel && label) || (showDescription && description) ? (
-        <div className="flex flex-col gap-1 mb-1 w-full">
-          {/* Label - Label Small (14px bold) */}
-          {showLabel && label && (
-            <label
-              htmlFor={id}
-              className="text-sm font-bold leading-5 text-content-primary dark:text-dark-content-primary"
-            >
-              {label}
-              {required && <span className="ml-1 text-error-content">*</span>}
-            </label>
-          )}
-
-          {/* Description - Paragraph Small (14px regular) */}
-          {showDescription && description && (
-            <p className="text-sm font-normal leading-5 text-content-tertiary dark:text-content-tertiary">
-              {description}
-            </p>
-          )}
-        </div>
-      ) : null}
-
-      {/* Trigger Button */}
-      <button
-        ref={triggerRef}
-        type="button"
-        className={finalTriggerClasses}
-        onClick={toggleMenu}
-        disabled={disabled}
-        aria-label={ariaLabel || label}
-        aria-haspopup="listbox"
-        aria-expanded={isOpen}
-        id={id}
-      >
-        {/* Selected value or placeholder */}
-        <span
-          className={
-            selectedOption ? '' : 'text-content-secondary dark:text-content-secondary'
-          }
-        >
-          {selectedOption ? selectedOption.label : placeholder}
-        </span>
-
-        {/* Chevron icon */}
-        <ChevronUpDownIcon className={iconClasses} />
-      </button>
-
-      {/* Hidden input for forms */}
-      {name && (
-        <input
-          type="hidden"
-          name={name}
-          value={selectedValue !== undefined ? String(selectedValue) : ''}
-        />
-      )}
-
-      {/* Menu */}
-      {isOpen && (
-        <div ref={menuRef} className={finalMenuClasses} role="listbox">
-          {/* Menu Header - Opcional según Figma */}
-          {menuHeader && (
-            <div className="flex items-center gap-0.5 px-6 py-0.5 rounded-[5px]">
-              <span className="text-[10px] font-bold leading-[12px] text-content-tertiary dark:text-content-tertiary">
-                {menuHeader}
-              </span>
-            </div>
-          )}
-
-          {/* Empty state */}
-          {options.length === 0 && (
-            <div className="px-2 py-1.5 text-[10px] leading-[12px] text-content-secondary dark:text-content-secondary">
-              No hay opciones disponibles
-            </div>
-          )}
-
-          {/* Options */}
-          {options.map((option, index) => (
-            <div
-              key={option.value}
-              className={getMenuItemClasses(option, index)}
-              onClick={() => handleSelect(option)}
-              onMouseEnter={() => setFocusedIndex(index)}
-              role="option"
-              aria-selected={option.value === selectedValue}
-              aria-disabled={option.disabled}
-            >
-              {/* Check icon for selected item */}
-              <div className="w-4 flex items-center justify-center">
-                {option.value === selectedValue && <CheckIcon className={checkIconClasses} />}
-              </div>
-
-              {/* Custom icon if provided */}
-              {option.icon && <span className="flex-shrink-0 w-4 h-4">{option.icon}</span>}
-
-              {/* Label */}
-              <span className="flex-1 text-left">{option.label}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useState, useRef, useEffect } from 'react';
+import type { SelectProps, SelectOption } from './Select.types';
+import { ChevronUpDownIcon, CheckIcon } from './icons';
+
+/**
+ * Select - Componente de selección (dropdown) del sistema de diseño Siesa
+ *
+ * Componente Select personalizado con menú desplegable para seleccionar opciones
+ * de una lista. Incluye navegación por teclado, click outside y dark mode completo.
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels y keyboard navigation
+ * - Click outside para cerrar el menú
+ * - Soporte de teclado (Enter, Escape, Arrow Up/Down)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ *   placeholder="Select an option"
+ *   label="Choose one"
+ * />
+ * ```
+ */
+export const Select: React.FC<SelectProps> = ({
+  options = [],
+  value,
+  defaultValue,
+  placeholder = 'Seleccionar...',
+  disabled = false,
+  error = false,
+  label,
+  description,
+  showLabel = true,
+  showDescription = true,
+  menuHeader,
+  onChange,
+  className = '',
+  triggerClassName = '',
+  menuClassName = '',
+  ariaLabel,
+  id,
+  name,
+  required = false,
+  menuPosition = 'bottom',
+  fullWidth = false,
+}) => {
+  // ===== ESTADO Y REFS =====
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState<string | number | undefined>(
+    value !== undefined ? value : defaultValue
+  );
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // ===== SINCRONIZAR VALOR CONTROLADO =====
+  useEffect(() => {
+    if (value !== undefined) {
+      setSelectedValue(value);
+    }
+  }, [value]);
+
+  // ===== CERRAR AL HACER CLICK FUERA =====
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  // ===== KEYBOARD NAVIGATION =====
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      switch (event.key) {
+        case 'Escape':
+          setIsOpen(false);
+          triggerRef.current?.focus();
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < options.length) {
+            handleSelect(options[focusedIndex]);
+          }
+          break;
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isOpen, focusedIndex, options]);
+
+  // ===== HELPERS =====
+  const selectedOption = options.find((opt) => opt.value === selectedValue);
+
+  const toggleMenu = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+      setFocusedIndex(-1);
+    }
+  };
+
+  const handleSelect = (option: SelectOption) => {
+    if (option.disabled) return;
+
+    setSelectedValue(option.value);
+    setIsOpen(false);
+    onChange?.(option.value);
+
+    setTimeout(() => {
+      triggerRef.current?.focus();
+    }, 0);
+  };
+
+  // ===== CLASES BASE DEL TRIGGER =====
+  // Usando el sistema tipográfico Paragraph Regular (14px = text-sm)
+  // Border radius rounded-lg (8px) consistente con especificaciones
+  // Gap de 12px (gap-3) entre texto e icono según Figma
+  const baseTriggerClasses = `
+    inline-flex
+    items-center
+    justify-between
+    gap-3
+    w-full
+    px-3
+    py-2
+    text-sm
+    font-normal
+    leading-5
+    rounded-lg
+    border
+    transition-all
+    duration-150
+  `;
+
+  // ===== CLASES DE WIDTH =====
+  const widthClasses = fullWidth ? 'w-full' : 'min-w-[200px]';
+
+  // ===== CLASES PARA ESTADOS DEL TRIGGER =====
+  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+  const triggerStateClasses = error
+    ? `
+      border-error-border
+      bg-error-bg
+      text-content-primary
+      dark:border-error-border
+      dark:bg-error-bg
+      dark:text-dark-content-primary
+    `
+    : `
+      bg-bg-primary
+      border-border-primary
+      text-content-primary
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+      dark:text-dark-content-primary
+    `;
+
+  // ===== CLASES PARA HOVER DEL TRIGGER =====
+  // Hover: border más claro según Figma (#f9f9f9)
+  const triggerHoverClasses =
+    !disabled && !error
+      ? `
+        hover:border-[#f9f9f9]
+        dark:hover:border-[#3a3a3f]
+      `
+      : '';
+
+  // ===== CLASES PARA FOCUS DEL TRIGGER =====
+  // Focus: border-2 con color específico #329cff según Figma
+  const triggerFocusClasses = !disabled
+    ? `
+      focus:outline-none
+      focus-within:border-2
+      focus-within:border-[#329cff]
+      dark:focus-within:border-[#329cff]
+    `
+    : '';
+
+  // ===== CLASES PARA DISABLED DEL TRIGGER =====
+  const triggerDisabledClasses = disabled
+    ? `
+      opacity-50
+      cursor-not-allowed
+    `
+    : '';
+
+  // ===== COMBINAR CLASES DEL TRIGGER =====
+  const finalTriggerClasses = [
+    baseTriggerClasses,
+    widthClasses,
+    triggerStateClasses,
+    triggerHoverClasses,
+    triggerFocusClasses,
+    triggerDisabledClasses,
+    triggerClassName,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES BASE DEL MENU =====
+  // Según Figma: altura fija 160px (h-40), border secundario,
+  // spacing de 4px desde trigger (mt-1), shadow-lg para elevación
+  const baseMenuClasses = `
+    absolute
+    z-50
+    w-full
+    min-w-[200px]
+    max-h-40
+    overflow-y-auto
+    p-1
+    rounded-md
+    border
+    shadow-lg
+    transition-all
+    duration-150
+  `;
+
+  // ===== CLASES DE POSICIÓN DEL MENU =====
+  // Figma muestra 4px de separación, usando mt-1 en lugar de mt-2
+  const menuPositionClasses = menuPosition === 'top' ? 'bottom-full mb-1' : 'top-full mt-1';
+
+  // ===== CLASES DE COLOR DEL MENU =====
+  // Background secundario según Figma con border secundario
+  const menuColorClasses = `
+    bg-background-secondary
+    border-border-secondary
+    dark:bg-dark-bg-primary
+    dark:border-dark-border-primary
+  `;
+
+  // ===== CLASES DE VISIBILIDAD DEL MENU =====
+  const menuVisibilityClasses = isOpen ? 'opacity-100 visible' : 'opacity-0 invisible';
+
+  // ===== COMBINAR CLASES DEL MENU =====
+  const finalMenuClasses = [
+    baseMenuClasses,
+    menuPositionClasses,
+    menuColorClasses,
+    menuVisibilityClasses,
+    menuClassName,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES BASE DEL MENU ITEM =====
+  // CRÍTICO: Figma especifica text-[10px] leading-[12px] (Label XXSmall)
+  // Gap de 2px (gap-0.5) entre elementos según Figma
+  const baseMenuItemClasses = `
+    flex
+    items-center
+    cursor-pointer
+    rounded-md
+    transition-all
+    duration-150
+    pl-2
+    pr-2.5
+    py-0.5
+    gap-0.5
+    text-[10px]
+    leading-[12px]
+    font-bold
+  `;
+
+  // ===== FUNCIÓN PARA OBTENER CLASES DE MENU ITEM =====
+  const getMenuItemClasses = (option: SelectOption, index: number) => {
+    const isSelected = option.value === selectedValue;
+    const isFocused = index === focusedIndex;
+
+    // Estados de color según Figma:
+    // - Default: text-content-primary
+    // - Hover: bg-primary-custom-600 + text-primary-inverse-content
+    // - Selected: muestra check icon, mismo text color que default
+    const colorClasses =
+      isFocused || (isSelected && isFocused)
+        ? 'bg-primary-custom-600 text-primary-inverse-content dark:bg-primary-custom-600 dark:text-primary-inverse-content'
+        : 'text-content-primary dark:text-dark-content-primary';
+
+    // Hover: fondo azul primario con texto blanco
+    const hoverClasses = !option.disabled
+      ? 'hover:bg-primary-custom-600 hover:text-primary-inverse-content dark:hover:bg-primary-custom-600 dark:hover:text-primary-inverse-content'
+      : '';
+
+    // Disabled
+    const disabledClasses = option.disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+    return [baseMenuItemClasses, colorClasses, hoverClasses, disabledClasses]
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+  };
+
+  // ===== CLASES DEL ICONO DEL TRIGGER =====
+  // Chevron icon 20x20px (size-5) según sistema Heroicons
+  const iconClasses = [
+    'size-5',
+    'flex-shrink-0',
+    'transition-transform',
+    'duration-150',
+    isOpen && 'rotate-180',
+    disabled ? 'text-content-tertiary dark:text-content-tertiary' : 'text-content-secondary dark:text-content-secondary',
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES DEL CHECK ICON =====
+  // Check icon 16x16px (size-4) según sistema Heroicons
+  const checkIconClasses = 'size-4 flex-shrink-0';
+
+  // ===== RENDERIZAR COMPONENTE =====
+  return (
+    <div className={`relative ${fullWidth ? 'w-full' : ''} ${className}`} ref={containerRef}>
+      {/* Label and Description - Según Figma, van ANTES del trigger con gap-1 (4px) */}
+      {(showLabel && label) || (showDescription && description) ? (
+        <div className="flex flex-col gap-1 mb-1 w-full">
+          {/* Label - Label Small (14px bold) */}
+          {showLabel && label && (
+            <label
+              htmlFor={id}
+              className="text-sm font-bold leading-5 text-content-primary dark:text-dark-content-primary"
+            >
+              {label}
+              {required && <span className="ml-1 text-error-content">*</span>}
+            </label>
+          )}
+
+          {/* Description - Paragraph Small (14px regular) */}
+          {showDescription && description && (
+            <p className="text-sm font-normal leading-5 text-content-tertiary dark:text-content-tertiary">
+              {description}
+            </p>
+          )}
+        </div>
+      ) : null}
+
+      {/* Trigger Button */}
+      <button
+        ref={triggerRef}
+        type="button"
+        className={finalTriggerClasses}
+        onClick={toggleMenu}
+        disabled={disabled}
+        aria-label={ariaLabel || label}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        id={id}
+      >
+        {/* Selected value or placeholder */}
+        <span
+          className={
+            selectedOption ? '' : 'text-content-secondary dark:text-content-secondary'
+          }
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+
+        {/* Chevron icon */}
+        <ChevronUpDownIcon className={iconClasses} />
+      </button>
+
+      {/* Hidden input for forms */}
+      {name && (
+        <input
+          type="hidden"
+          name={name}
+          value={selectedValue !== undefined ? String(selectedValue) : ''}
+        />
+      )}
+
+      {/* Menu */}
+      {isOpen && (
+        <div ref={menuRef} className={finalMenuClasses} role="listbox">
+          {/* Menu Header - Opcional según Figma */}
+          {menuHeader && (
+            <div className="flex items-center gap-0.5 px-6 py-0.5 rounded-[5px]">
+              <span className="text-[10px] font-bold leading-[12px] text-content-tertiary dark:text-content-tertiary">
+                {menuHeader}
+              </span>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {options.length === 0 && (
+            <div className="px-2 py-1.5 text-[10px] leading-[12px] text-content-secondary dark:text-content-secondary">
+              No hay opciones disponibles
+            </div>
+          )}
+
+          {/* Options */}
+          {options.map((option, index) => (
+            <div
+              key={option.value}
+              className={getMenuItemClasses(option, index)}
+              onClick={() => handleSelect(option)}
+              onMouseEnter={() => setFocusedIndex(index)}
+              role="option"
+              aria-selected={option.value === selectedValue}
+              aria-disabled={option.disabled}
+            >
+              {/* Check icon for selected item */}
+              <div className="w-4 flex items-center justify-center">
+                {option.value === selectedValue && <CheckIcon className={checkIconClasses} />}
+              </div>
+
+              {/* Custom icon if provided */}
+              {option.icon && <span className="flex-shrink-0 w-4 h-4">{option.icon}</span>}
+
+              {/* Label */}
+              <span className="flex-1 text-left">{option.label}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};