siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Dropdown/Dropdown.tsx

@@ -1,422 +1,422 @@
-import React, { useState, useRef, useEffect } from 'react';
-import type {
-  DropdownProps,
-  DropdownItemProps,
-  DropdownHeadingProps,
-  DropdownDividerProps,
-} from './Dropdown.types';
-import { ChevronDownIcon } from './icons';
-
-/**
- * Componente Dropdown del sistema de diseño Siesa
- * Basado en especificaciones de Figma con Tailwind CSS
- *
- * 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
- * - Cierre automático al hacer click fuera
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- *
- * @example
- * ```tsx
- * <Dropdown
- *   placeholder="Options"
- *   items={[
- *     { children: 'Account', icon: <UserIcon /> },
- *     { children: 'Settings', icon: <CogIcon /> },
- *     { isDivider: true },
- *     { children: 'Logout' },
- *   ]}
- * />
- * ```
- */
-export const Dropdown: React.FC<DropdownProps> = ({
-  variant = 'default',
-  children,
-  items,
-  open: controlledOpen,
-  onOpenChange,
-  disabled = false,
-  className = '',
-  menuClassName = '',
-  ariaLabel,
-  placeholder = 'Options',
-}) => {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Determinar si es controlado o no controlado
-  const isControlled = controlledOpen !== undefined;
-  const isOpen = isControlled ? controlledOpen : internalOpen;
-
-  // Función para cambiar el estado
-  const handleToggle = () => {
-    if (disabled) return;
-
-    const newOpen = !isOpen;
-
-    if (!isControlled) {
-      setInternalOpen(newOpen);
-    }
-
-    onOpenChange?.(newOpen);
-  };
-
-  // Cerrar al hacer click fuera
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        if (!isControlled) {
-          setInternalOpen(false);
-        }
-        onOpenChange?.(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }
-  }, [isOpen, isControlled, onOpenChange]);
-
-  // Cerrar al presionar Escape
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isOpen) {
-        if (!isControlled) {
-          setInternalOpen(false);
-        }
-        onOpenChange?.(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape);
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }
-  }, [isOpen, isControlled, onOpenChange]);
-
-  // Handler para item click
-  const handleItemClick = (item: DropdownItemProps) => {
-    if (item.disabled || item.isDivider || item.isHeading) return;
-
-    // Ejecutar el onClick del item
-    if (item.onClick) {
-      item.onClick({} as React.MouseEvent<HTMLButtonElement>);
-    }
-
-    // Cerrar el dropdown
-    if (!isControlled) {
-      setInternalOpen(false);
-    }
-    onOpenChange?.(false);
-  };
-
-  // ===== CLASES DEL TRIGGER BUTTON =====
-  const triggerClasses = [
-    // Base
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'rounded-lg',
-    'font-bold',
-    'text-sm',
-    'whitespace-nowrap',
-    'transition-all',
-    'duration-150',
-
-    // Variant-specific sizing
-    variant === 'icon-only' ? 'w-9 h-9' : 'gap-3 px-3 py-2',
-
-    // Colores y estados (Light Mode)
-    'bg-bg-primary',
-    'text-content-secondary',
-    'border',
-    'border-border-primary',
-    'hover:bg-background-secondary',
-    'active:scale-95',
-
-    // Dark Mode
-    'dark:bg-dark-bg-primary',
-    'dark:text-content-secondary',
-    'dark:border-dark-border-primary',
-    'dark:hover:bg-dark-bg-primary',
-
-    // Focus ring
-    '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',
-
-    // Disabled
-    disabled && 'opacity-50',
-    disabled && 'cursor-not-allowed',
-    disabled && 'pointer-events-none',
-
-    // Custom classes
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES DEL MENU =====
-  const menuClasses = [
-    // Base
-    'absolute',
-    'top-full',
-    'left-0',
-    'mt-2',
-    'min-w-[182px]',
-    'rounded-xl',
-    'p-1',
-    'border',
-    'z-50',
-
-    // Colores (Light Mode)
-    'bg-background-secondary',
-    'border-border-primary',
-
-    // Dark Mode
-    'dark:bg-dark-bg-primary',
-    'dark:border-dark-border-primary',
-
-    // Shadow
-    'shadow-menu',
-
-    // Custom classes
-    menuClassName,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <div ref={dropdownRef} className="relative inline-block">
-      {/* Trigger Button */}
-      <button
-        type="button"
-        className={triggerClasses}
-        onClick={handleToggle}
-        disabled={disabled}
-        aria-label={ariaLabel || (variant === 'icon-only' ? 'Abrir menú' : undefined)}
-        aria-haspopup="true"
-        aria-expanded={isOpen}
-      >
-        {variant === 'default' && <span>{children || placeholder}</span>}
-        <ChevronDownIcon />
-      </button>
-
-      {/* Dropdown Menu */}
-      {isOpen && (
-        <div className={menuClasses}>
-          {items.map((item, index) => {
-            if (item.isDivider) {
-              return <DropdownDivider key={index} className={item.className} />;
-            }
-
-            if (item.isHeading) {
-              return (
-                <DropdownHeading key={index} className={item.className}>
-                  {item.children}
-                </DropdownHeading>
-              );
-            }
-
-            return (
-              <DropdownItem
-                key={index}
-                {...item}
-                onClick={() => handleItemClick(item)}
-              />
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * Componente DropdownItem
- * Item individual dentro del menú dropdown
- *
- * @example
- * ```tsx
- * <DropdownItem icon={<UserIcon />} shortcut="⌘ P">
- *   Profile
- * </DropdownItem>
- * ```
- */
-export const DropdownItem: React.FC<DropdownItemProps> = ({
-  children,
-  icon,
-  description,
-  shortcut,
-  disabled = false,
-  selected = false,
-  onClick,
-  className = '',
-}) => {
-  // ===== CLASES DEL ITEM =====
-  const itemClasses = [
-    // Base
-    'flex',
-    'items-center',
-    'gap-3',
-    'px-4',
-    'py-2',
-    'rounded-lg',
-    'text-sm',
-    'w-full',
-    'text-left',
-    'transition-colors',
-    'duration-150',
-
-    // Colores y estados (Light Mode)
-    'text-content-primary',
-    !disabled && 'hover:bg-white',
-    selected && 'bg-white',
-
-    // Dark Mode
-    'dark:text-dark-content-primary',
-    !disabled && 'dark:hover:bg-dark-bg-primary',
-    selected && 'dark:bg-dark-bg-primary',
-
-    // Disabled
-    disabled && 'opacity-50',
-    disabled && 'cursor-not-allowed',
-    !disabled && 'cursor-pointer',
-
-    // Custom classes
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <button
-      type="button"
-      className={itemClasses}
-      onClick={onClick}
-      disabled={disabled}
-    >
-      {/* Icon */}
-      {icon && (
-        <span className="inline-flex items-center justify-center w-4 h-4 text-content-secondary dark:text-content-secondary">
-          {icon}
-        </span>
-      )}
-
-      {/* Content */}
-      <div className="flex-1 min-w-0">
-        {/* Label */}
-        <div className="text-content-primary dark:text-dark-content-primary">
-          {children}
-        </div>
-
-        {/* Description */}
-        {description && (
-          <div className="text-xs text-content-secondary dark:text-content-secondary mt-0.5">
-            {description}
-          </div>
-        )}
-      </div>
-
-      {/* Shortcut */}
-      {shortcut && (
-        <span className="text-xs text-content-secondary dark:text-content-secondary ml-auto whitespace-nowrap">
-          {shortcut}
-        </span>
-      )}
-    </button>
-  );
-};
-
-/**
- * Componente DropdownHeading
- * Encabezado de sección dentro del menú dropdown
- *
- * @example
- * ```tsx
- * <DropdownHeading>My events</DropdownHeading>
- * ```
- */
-export const DropdownHeading: React.FC<DropdownHeadingProps> = ({
-  children,
-  className = '',
-}) => {
-  // ===== CLASES DEL HEADING =====
-  const headingClasses = [
-    // Base
-    'px-4',
-    'py-1',
-    'text-xs',
-    'font-normal',
-
-    // Colores
-    'text-content-tertiary',
-
-    // Dark Mode
-    'dark:text-content-tertiary',
-
-    // Custom classes
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return <div className={headingClasses}>{children}</div>;
-};
-
-/**
- * Componente DropdownDivider
- * Separador visual entre items del menú dropdown
- *
- * @example
- * ```tsx
- * <DropdownDivider />
- * ```
- */
-export const DropdownDivider: React.FC<DropdownDividerProps> = ({
-  className = '',
-}) => {
-  // ===== CLASES DEL DIVIDER =====
-  const dividerClasses = [
-    // Base
-    'px-4',
-    'py-1',
-
-    // Custom classes
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <div className={dividerClasses}>
-      <div className="h-px bg-border-primary dark:bg-dark-border-primary" />
-    </div>
-  );
-};
+import React, { useState, useRef, useEffect } from 'react';
+import type {
+  DropdownProps,
+  DropdownItemProps,
+  DropdownHeadingProps,
+  DropdownDividerProps,
+} from './Dropdown.types';
+import { ChevronDownIcon } from './icons';
+
+/**
+ * Componente Dropdown del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * 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
+ * - Cierre automático al hacer click fuera
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   placeholder="Options"
+ *   items={[
+ *     { children: 'Account', icon: <UserIcon /> },
+ *     { children: 'Settings', icon: <CogIcon /> },
+ *     { isDivider: true },
+ *     { children: 'Logout' },
+ *   ]}
+ * />
+ * ```
+ */
+export const Dropdown: React.FC<DropdownProps> = ({
+  variant = 'default',
+  children,
+  items,
+  open: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  className = '',
+  menuClassName = '',
+  ariaLabel,
+  placeholder = 'Options',
+}) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Determinar si es controlado o no controlado
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  // Función para cambiar el estado
+  const handleToggle = () => {
+    if (disabled) return;
+
+    const newOpen = !isOpen;
+
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+
+    onOpenChange?.(newOpen);
+  };
+
+  // Cerrar al hacer click fuera
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        if (!isControlled) {
+          setInternalOpen(false);
+        }
+        onOpenChange?.(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isOpen, isControlled, onOpenChange]);
+
+  // Cerrar al presionar Escape
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        if (!isControlled) {
+          setInternalOpen(false);
+        }
+        onOpenChange?.(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  }, [isOpen, isControlled, onOpenChange]);
+
+  // Handler para item click
+  const handleItemClick = (item: DropdownItemProps) => {
+    if (item.disabled || item.isDivider || item.isHeading) return;
+
+    // Ejecutar el onClick del item
+    if (item.onClick) {
+      item.onClick({} as React.MouseEvent<HTMLButtonElement>);
+    }
+
+    // Cerrar el dropdown
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  };
+
+  // ===== CLASES DEL TRIGGER BUTTON =====
+  const triggerClasses = [
+    // Base
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-lg',
+    'font-bold',
+    'text-sm',
+    'whitespace-nowrap',
+    'transition-all',
+    'duration-150',
+
+    // Variant-specific sizing
+    variant === 'icon-only' ? 'w-9 h-9' : 'gap-3 px-3 py-2',
+
+    // Colores y estados (Light Mode)
+    'bg-bg-primary',
+    'text-content-secondary',
+    'border',
+    'border-border-primary',
+    'hover:bg-background-secondary',
+    'active:scale-95',
+
+    // Dark Mode
+    'dark:bg-dark-bg-primary',
+    'dark:text-content-secondary',
+    'dark:border-dark-border-primary',
+    'dark:hover:bg-dark-bg-primary',
+
+    // Focus ring
+    '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',
+
+    // Disabled
+    disabled && 'opacity-50',
+    disabled && 'cursor-not-allowed',
+    disabled && 'pointer-events-none',
+
+    // Custom classes
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES DEL MENU =====
+  const menuClasses = [
+    // Base
+    'absolute',
+    'top-full',
+    'left-0',
+    'mt-2',
+    'min-w-[182px]',
+    'rounded-xl',
+    'p-1',
+    'border',
+    'z-50',
+
+    // Colores (Light Mode)
+    'bg-background-secondary',
+    'border-border-primary',
+
+    // Dark Mode
+    'dark:bg-dark-bg-primary',
+    'dark:border-dark-border-primary',
+
+    // Shadow
+    'shadow-menu',
+
+    // Custom classes
+    menuClassName,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <div ref={dropdownRef} className="relative inline-block">
+      {/* Trigger Button */}
+      <button
+        type="button"
+        className={triggerClasses}
+        onClick={handleToggle}
+        disabled={disabled}
+        aria-label={ariaLabel || (variant === 'icon-only' ? 'Abrir menú' : undefined)}
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+      >
+        {variant === 'default' && <span>{children || placeholder}</span>}
+        <ChevronDownIcon />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className={menuClasses}>
+          {items.map((item, index) => {
+            if (item.isDivider) {
+              return <DropdownDivider key={index} className={item.className} />;
+            }
+
+            if (item.isHeading) {
+              return (
+                <DropdownHeading key={index} className={item.className}>
+                  {item.children}
+                </DropdownHeading>
+              );
+            }
+
+            return (
+              <DropdownItem
+                key={index}
+                {...item}
+                onClick={() => handleItemClick(item)}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Componente DropdownItem
+ * Item individual dentro del menú dropdown
+ *
+ * @example
+ * ```tsx
+ * <DropdownItem icon={<UserIcon />} shortcut="⌘ P">
+ *   Profile
+ * </DropdownItem>
+ * ```
+ */
+export const DropdownItem: React.FC<DropdownItemProps> = ({
+  children,
+  icon,
+  description,
+  shortcut,
+  disabled = false,
+  selected = false,
+  onClick,
+  className = '',
+}) => {
+  // ===== CLASES DEL ITEM =====
+  const itemClasses = [
+    // Base
+    'flex',
+    'items-center',
+    'gap-3',
+    'px-4',
+    'py-2',
+    'rounded-lg',
+    'text-sm',
+    'w-full',
+    'text-left',
+    'transition-colors',
+    'duration-150',
+
+    // Colores y estados (Light Mode)
+    'text-content-primary',
+    !disabled && 'hover:bg-white',
+    selected && 'bg-white',
+
+    // Dark Mode
+    'dark:text-dark-content-primary',
+    !disabled && 'dark:hover:bg-dark-bg-primary',
+    selected && 'dark:bg-dark-bg-primary',
+
+    // Disabled
+    disabled && 'opacity-50',
+    disabled && 'cursor-not-allowed',
+    !disabled && 'cursor-pointer',
+
+    // Custom classes
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <button
+      type="button"
+      className={itemClasses}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {/* Icon */}
+      {icon && (
+        <span className="inline-flex items-center justify-center w-4 h-4 text-content-secondary dark:text-content-secondary">
+          {icon}
+        </span>
+      )}
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {/* Label */}
+        <div className="text-content-primary dark:text-dark-content-primary">
+          {children}
+        </div>
+
+        {/* Description */}
+        {description && (
+          <div className="text-xs text-content-secondary dark:text-content-secondary mt-0.5">
+            {description}
+          </div>
+        )}
+      </div>
+
+      {/* Shortcut */}
+      {shortcut && (
+        <span className="text-xs text-content-secondary dark:text-content-secondary ml-auto whitespace-nowrap">
+          {shortcut}
+        </span>
+      )}
+    </button>
+  );
+};
+
+/**
+ * Componente DropdownHeading
+ * Encabezado de sección dentro del menú dropdown
+ *
+ * @example
+ * ```tsx
+ * <DropdownHeading>My events</DropdownHeading>
+ * ```
+ */
+export const DropdownHeading: React.FC<DropdownHeadingProps> = ({
+  children,
+  className = '',
+}) => {
+  // ===== CLASES DEL HEADING =====
+  const headingClasses = [
+    // Base
+    'px-4',
+    'py-1',
+    'text-xs',
+    'font-normal',
+
+    // Colores
+    'text-content-tertiary',
+
+    // Dark Mode
+    'dark:text-content-tertiary',
+
+    // Custom classes
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return <div className={headingClasses}>{children}</div>;
+};
+
+/**
+ * Componente DropdownDivider
+ * Separador visual entre items del menú dropdown
+ *
+ * @example
+ * ```tsx
+ * <DropdownDivider />
+ * ```
+ */
+export const DropdownDivider: React.FC<DropdownDividerProps> = ({
+  className = '',
+}) => {
+  // ===== CLASES DEL DIVIDER =====
+  const dividerClasses = [
+    // Base
+    'px-4',
+    'py-1',
+
+    // Custom classes
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <div className={dividerClasses}>
+      <div className="h-px bg-border-primary dark:bg-dark-border-primary" />
+    </div>
+  );
+};