siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/DropdownItemCollapsible/DropdownItemCollapsible.tsx

@@ -1,287 +1,307 @@
-import React, { useState } from 'react';
-import type {
-  DropdownItemCollapsibleProps,
-  DropdownItemCollapsibleChildProps,
-} from './DropdownItemCollapsible.types';
-import { ChevronDownIcon } from './icons';
-
-/**
- * Componente DropdownItemCollapsible del sistema de diseño Siesa
- *
- * Item colapsable para uso dentro de Dropdowns que permite agrupar
- * items relacionados en secciones expandibles.
- *
- * **Características:**
- * - Soporte completo para expandir/colapsar
- * - Iconos personalizables en header y children
- * - Items anidados indentados automáticamente
- * - Dark mode completo con inversión de colores
- * - Estados: default, hover, active, disabled
- * - Focus rings adaptativos
- * - Animación suave de rotación del chevron
- *
- * **Estados visuales:**
- * - `collapsed`: Muestra solo el header con chevron apuntando down
- * - `expanded`: Muestra header y lista de items anidados
- * - `disabled`: Opacidad 50%, sin interacción
- * - `hover`: Fondo de hover sutil, color primario del icono
- * - `active`: Item anidado seleccionado con fondo custom-primary
- *
- * **Espaciado según Figma:**
- * - Header padding: px-4 py-2 (16px horizontal, 8px vertical)
- * - Item anidado padding: pl-6 pr-4 py-2 (24px left, 16px right, 8px vertical)
- * - Gap entre elementos: gap-3 (12px)
- * - Gap interno (icon + text): gap-3 (12px)
- * - Indent entre niveles: 8px adicional por nivel
- * - Divisor: borde top de 1px con spacing-0.5 (2px) arriba
- * - Sección heading: pt-3 pb-1 px-0 (12px top, 4px bottom, sin horizontal)
- *
- * **Tipografía:**
- * - Header: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
- * - Items anidados: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
- * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - text-content-tertiary
- *
- * **Colores (Light Mode):**
- * - Header text: content-primary (#18181b)
- * - Header icon: content-secondary (#a1a1aa)
- * - Header hover: bg-background-custom-primary (#dbeefe)
- * - Header text hover: content-custom-primary (#0e79fd)
- * - Item text: content-primary (#18181b)
- * - Item hover: bg-transparent (sin fondo)
- * - Divider: border-border-primary (#e4e4e7)
- * - Heading text: content-tertiary (#71717a)
- *
- * **Colores (Dark Mode):**
- * - Header text: content-primary/dark (#fafafa)
- * - Header icon: content-secondary/dark (#a1a1aa)
- * - Header hover: bg-background-custom-primary/dark (#0e5ab0)
- * - Header text hover: content-custom-primary/dark (#bfe2fe)
- * - Item text: content-primary/dark (#fafafa)
- * - Divider: border-border-primary/dark (#3f3f46)
- * - Heading text: content-tertiary/dark (#a1a1aa)
- *
- * **Border radius:**
- * - Todos los items: rounded-lg (8px)
- *
- * **Sombras:**
- * - Ninguna (usado dentro de dropdowns)
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
- *
- * @example
- * ```tsx
- * // Item colapsable simple
- * <DropdownItemCollapsible
- *   label="Users"
- *   icon={<UserIcon />}
- *   children={[
- *     { label: "Active Users", icon: <CheckIcon /> },
- *     { label: "Inactive Users", icon: <CloseIcon /> },
- *   ]}
- * />
- *
- * // Con encabezado de sección
- * <DropdownItemCollapsible
- *   label="Customers"
- *   icon={<BuildingIcon />}
- *   showHeading={true}
- *   headingLabel="SECTION 1"
- *   children={[...]}
- * />
- *
- * // Item no colapsable (actúa como botón normal)
- * <DropdownItemCollapsible
- *   label="Single Item"
- *   icon={<StarIcon />}
- *   isCollapsible={false}
- *   onClick={() => console.log('clicked')}
- * />
- * ```
- */
-export const DropdownItemCollapsible: React.FC<DropdownItemCollapsibleProps> = ({
-  label,
-  icon,
-  children = [],
-  defaultOpen = false,
-  disabled = false,
-  onOpenChange,
-  onClick,
-  isCollapsible = children.length > 0,
-  showHeading = false,
-  headingLabel,
-  showDivider = true,
-  className = '',
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  const handleToggle = () => {
-    if (disabled || !isCollapsible) return;
-
-    const newOpen = !isOpen;
-    setIsOpen(newOpen);
-    onOpenChange?.(newOpen);
-  };
-
-  const handleHeaderClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (disabled) return;
-
-    if (isCollapsible) {
-      handleToggle();
-    } else {
-      onClick?.(e);
-    }
-  };
-
-  const handleChildClick = (child: DropdownItemCollapsibleChildProps) => (
-    e: React.MouseEvent<HTMLDivElement>,
-  ) => {
-    if (child.disabled) return;
-    child.onClick?.(e);
-  };
-
-  return (
-    <div className={`flex flex-col gap-0.5 w-full ${className}`}>
-      {/* Section Heading */}
-      {showHeading && headingLabel && (
-        <div className="flex flex-col gap-0 items-start pb-1 pt-3 px-0 w-full">
-          <p className="font-['Inter:Regular',sans-serif] font-normal leading-4 not-italic text-xs text-content-tertiary dark:text-content-tertiary w-full">
-            {headingLabel}
-          </p>
-        </div>
-      )}
-
-      {/* Header Button */}
-      <button
-        onClick={handleHeaderClick}
-        disabled={disabled}
-        className={[
-          // Base
-          'flex items-center gap-3 px-4 py-2 w-full',
-          'rounded-lg cursor-pointer',
-          'transition-all duration-150',
-
-          // Colores y estados (Light Mode)
-          !disabled && 'text-content-primary',
-          !disabled && 'hover:bg-primary-custom-100',
-          !disabled && 'hover:text-primary-custom-600',
-
-          // Dark Mode
-          !disabled && 'dark:text-content-primary',
-          !disabled && 'dark:hover:bg-dark-bg-custom',
-          !disabled && 'dark:hover:text-dark-content-custom',
-
-          // Focus ring
-          !disabled && 'focus:outline-none',
-          !disabled && 'focus:ring-2',
-          !disabled && 'focus:ring-offset-2',
-          !disabled && 'focus:ring-primary-custom-400',
-          !disabled && 'focus:ring-offset-bg-primary',
-          !disabled && 'dark:focus:ring-offset-dark-bg-primary',
-
-          // Disabled
-          disabled && 'opacity-50',
-          disabled && 'cursor-not-allowed',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        aria-expanded={isOpen && isCollapsible}
-        aria-disabled={disabled}
-      >
-        {/* Icon Wrapper */}
-        {icon && (
-          <div className="flex items-center justify-center w-4 h-4 shrink-0 text-content-secondary dark:text-content-secondary">
-            {icon}
-          </div>
-        )}
-
-        {/* Content Wrapper */}
-        <div className="flex flex-1 flex-col items-start justify-center gap-0.5">
-          <p className="font-['Inter:Regular',sans-serif] font-normal leading-5 not-italic text-sm text-left">
-            {label}
-          </p>
-        </div>
-
-        {/* Chevron (solo visible si es colapsable) */}
-        {isCollapsible && (
-          <div
-            className={[
-              'flex items-center justify-center w-4 h-4 shrink-0',
-              'text-content-secondary dark:text-content-secondary',
-              'transition-transform duration-200',
-              isOpen ? 'rotate-180' : 'rotate-0',
-            ].join(' ')}
-          >
-            <ChevronDownIcon className="w-4 h-4" />
-          </div>
-        )}
-      </button>
-
-      {/* Divider */}
-      {showDivider && <div className="w-full h-px bg-border-primary dark:bg-dark-border-primary" />}
-
-      {/* Children Container (expanded) */}
-      {isOpen && isCollapsible && children.length > 0 && (
-        <div className="flex flex-col gap-0.5 w-full py-2 px-0">
-          {children.map((child, index) => (
-            <div
-              key={index}
-              onClick={handleChildClick(child)}
-              className={[
-                // Base
-                'flex gap-3 items-center pl-6 pr-4 py-2 w-full',
-                'rounded-lg cursor-pointer',
-                'transition-all duration-150',
-
-                // Colores y estados (Light Mode)
-                !child.disabled && 'text-content-primary',
-                !child.disabled && 'hover:bg-primary-custom-100',
-                !child.disabled && 'hover:text-primary-custom-600',
-
-                // Dark Mode
-                !child.disabled && 'dark:text-content-primary',
-                !child.disabled && 'dark:hover:bg-dark-bg-custom',
-                !child.disabled && 'dark:hover:text-dark-content-custom',
-
-                // Focus ring
-                !child.disabled && 'focus:outline-none',
-                !child.disabled && 'focus:ring-2',
-                !child.disabled && 'focus:ring-offset-2',
-                !child.disabled && 'focus:ring-primary-custom-400',
-                !child.disabled && 'focus:ring-offset-bg-primary',
-                !child.disabled && 'dark:focus:ring-offset-dark-bg-primary',
-
-                // Disabled
-                child.disabled && 'opacity-50',
-                child.disabled && 'cursor-not-allowed',
-
-                // Custom classes
-                child.className,
-              ]
-                .filter(Boolean)
-                .join(' ')}
-            >
-              {/* Child Icon Wrapper */}
-              {child.icon && (
-                <div className="flex items-center justify-center w-4 h-4 shrink-0 text-content-secondary dark:text-content-secondary">
-                  {child.icon}
-                </div>
-              )}
-
-              {/* Child Content Wrapper */}
-              <div className="flex flex-1 flex-col items-start justify-center gap-0.5">
-                <p className="font-['Inter:Regular',sans-serif] font-normal leading-5 not-italic text-sm text-left">
-                  {child.label}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DropdownItemCollapsible;
+import React, { useState } from 'react';
+import type {
+  DropdownItemCollapsibleProps,
+  DropdownItemCollapsibleChildProps,
+} from './DropdownItemCollapsible.types';
+import { ChevronDownIcon } from './icons';
+import { Badge } from '../Badge/Badge';
+
+/**
+ * Componente DropdownItemCollapsible del sistema de diseño Siesa
+ *
+ * Item colapsable para uso dentro de Dropdowns que permite agrupar
+ * items relacionados en secciones expandibles.
+ *
+ * **Características:**
+ * - Soporte completo para expandir/colapsar
+ * - Iconos personalizables en header y children
+ * - Items anidados indentados automáticamente
+ * - Dark mode completo con inversión de colores
+ * - Estados: default, hover, active, disabled
+ * - Focus rings adaptativos
+ * - Animación suave de rotación del chevron
+ *
+ * **Estados visuales:**
+ * - `collapsed`: Muestra solo el header con chevron apuntando down
+ * - `expanded`: Muestra header y lista de items anidados
+ * - `disabled`: Opacidad 50%, sin interacción
+ * - `hover`: Fondo de hover sutil, color primario del icono
+ * - `active`: Item anidado seleccionado con fondo custom-primary
+ *
+ * **Espaciado según Figma:**
+ * - Header padding: px-4 py-2 (16px horizontal, 8px vertical)
+ * - Item anidado padding: pl-6 pr-4 py-2 (24px left, 16px right, 8px vertical)
+ * - Gap entre elementos: gap-3 (12px)
+ * - Gap interno (icon + text): gap-3 (12px)
+ * - Indent entre niveles: 8px adicional por nivel
+ * - Divisor: borde top de 1px con spacing-0.5 (2px) arriba
+ * - Sección heading: pt-3 pb-1 px-0 (12px top, 4px bottom, sin horizontal)
+ *
+ * **Tipografía:**
+ * - Header: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
+ * - Items anidados: Paragraph/Small (14px, Regular, line-height 20px) - text-content-primary
+ * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - text-content-tertiary
+ *
+ * **Colores (Light Mode):**
+ * - Header text: content-primary (#18181b)
+ * - Header icon: content-secondary (#a1a1aa)
+ * - Header hover: bg-background-custom-primary (#dbeefe)
+ * - Header text hover: content-custom-primary (#0e79fd)
+ * - Item text: content-primary (#18181b)
+ * - Item hover: bg-transparent (sin fondo)
+ * - Divider: border-border-primary (#e4e4e7)
+ * - Heading text: content-tertiary (#71717a)
+ *
+ * **Colores (Dark Mode):**
+ * - Header text: content-primary/dark (#fafafa)
+ * - Header icon: content-secondary/dark (#a1a1aa)
+ * - Header hover: bg-background-custom-primary/dark (#0e5ab0)
+ * - Header text hover: content-custom-primary/dark (#bfe2fe)
+ * - Item text: content-primary/dark (#fafafa)
+ * - Divider: border-border-primary/dark (#3f3f46)
+ * - Heading text: content-tertiary/dark (#a1a1aa)
+ *
+ * **Border radius:**
+ * - Todos los items: rounded-lg (8px)
+ *
+ * **Sombras:**
+ * - Ninguna (usado dentro de dropdowns)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-34374
+ *
+ * @example
+ * ```tsx
+ * // Item colapsable simple
+ * <DropdownItemCollapsible
+ *   label="Users"
+ *   icon={<UserIcon />}
+ *   children={[
+ *     { label: "Active Users", icon: <CheckIcon /> },
+ *     { label: "Inactive Users", icon: <CloseIcon /> },
+ *   ]}
+ * />
+ *
+ * // Con encabezado de sección
+ * <DropdownItemCollapsible
+ *   label="Customers"
+ *   icon={<BuildingIcon />}
+ *   showHeading={true}
+ *   headingLabel="SECTION 1"
+ *   children={[...]}
+ * />
+ *
+ * // Item no colapsable (actúa como botón normal)
+ * <DropdownItemCollapsible
+ *   label="Single Item"
+ *   icon={<StarIcon />}
+ *   isCollapsible={false}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+export const DropdownItemCollapsible: React.FC<DropdownItemCollapsibleProps> = ({
+  label,
+  icon,
+  children = [],
+  defaultOpen = false,
+  disabled = false,
+  onOpenChange,
+  onClick,
+  isCollapsible = children.length > 0,
+  showHeading = false,
+  headingLabel,
+  showDivider = true,
+  selected = false,
+  badge = false,
+  badgeCount,
+  badgeColor = 'red',
+  className = '',
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const handleToggle = () => {
+    if (disabled || !isCollapsible) return;
+
+    const newOpen = !isOpen;
+    setIsOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  const handleHeaderClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+
+    if (isCollapsible) {
+      handleToggle();
+    } else {
+      onClick?.(e);
+    }
+  };
+
+  const handleChildClick = (child: DropdownItemCollapsibleChildProps) => (
+    e: React.MouseEvent<HTMLDivElement>,
+  ) => {
+    if (child.disabled) return;
+    child.onClick?.(e);
+  };
+
+  return (
+    <div className={`flex flex-col gap-0.5 w-full ${className}`}>
+      {/* Section Heading */}
+      {showHeading && headingLabel && (
+        <div className="flex flex-col gap-0 items-start pb-1 pt-3 px-0 w-full">
+          <p className="font-['Inter:Regular',sans-serif] font-normal leading-4 not-italic text-xs text-content-tertiary dark:text-content-tertiary w-full">
+            {headingLabel}
+          </p>
+        </div>
+      )}
+
+      {/* Header Button */}
+      <button
+        onClick={handleHeaderClick}
+        disabled={disabled}
+        className={[
+          // Base
+          'flex items-center gap-3 px-4 py-2 w-full',
+          'rounded-lg cursor-pointer',
+          'transition-all duration-150',
+
+          // Colores y estados (Light Mode)
+          selected && !disabled && 'bg-primary-custom-100 text-primary-custom-600',
+          !selected && !disabled && 'text-content-primary',
+          !disabled && 'hover:bg-primary-custom-100',
+          !disabled && 'hover:text-primary-custom-600',
+
+          // Dark Mode
+          selected && !disabled && 'dark:bg-dark-bg-custom dark:text-dark-content-custom',
+          !selected && !disabled && 'dark:text-content-primary',
+          !disabled && 'dark:hover:bg-dark-bg-custom',
+          !disabled && 'dark:hover:text-dark-content-custom',
+
+          // Focus ring
+          !disabled && 'focus:outline-none',
+          !disabled && 'focus:ring-2',
+          !disabled && 'focus:ring-offset-2',
+          !disabled && 'focus:ring-primary-custom-400',
+          !disabled && 'focus:ring-offset-bg-primary',
+          !disabled && 'dark:focus:ring-offset-dark-bg-primary',
+
+          // Disabled
+          disabled && 'opacity-50',
+          disabled && 'cursor-not-allowed',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        aria-expanded={isOpen && isCollapsible}
+        aria-disabled={disabled}
+      >
+        {/* Icon Wrapper */}
+        {icon && (
+          <div className="flex items-center justify-center w-4 h-4 shrink-0 text-content-secondary dark:text-content-secondary">
+            {icon}
+          </div>
+        )}
+
+        {/* Content Wrapper */}
+        <div className="flex flex-1 flex-col items-start justify-center gap-0.5">
+          <p className="font-['Inter:Regular',sans-serif] font-normal leading-5 not-italic text-sm text-left">
+            {label}
+          </p>
+        </div>
+
+        {/* Badge */}
+        {(badge || badgeCount) && (
+          <div className="flex items-center justify-center shrink-0">
+            {badgeCount ? (
+              <div className="flex items-center justify-center px-1.5 py-0.5 rounded-full bg-red-500 dark:bg-red-600 text-white text-xs font-bold min-w-6 h-6">
+                {badgeCount > 99 ? '99+' : badgeCount}
+              </div>
+            ) : (
+              <div className="w-2 h-2 rounded-full bg-red-500 dark:bg-red-600 shrink-0" />
+            )}
+          </div>
+        )}
+
+        {/* Chevron (solo visible si es colapsable) */}
+        {isCollapsible && (
+          <div
+            className={[
+              'flex items-center justify-center w-4 h-4 shrink-0',
+              'text-content-secondary dark:text-content-secondary',
+              'transition-transform duration-200',
+              isOpen ? 'rotate-180' : 'rotate-0',
+            ].join(' ')}
+          >
+            <ChevronDownIcon className="w-4 h-4" />
+          </div>
+        )}
+      </button>
+
+      {/* Divider */}
+      {showDivider && <div className="w-full h-px bg-border-primary dark:bg-dark-border-primary" />}
+
+      {/* Children Container (expanded) */}
+      {isOpen && isCollapsible && children.length > 0 && (
+        <div className="flex flex-col gap-0.5 w-full py-2 px-0">
+          {children.map((child, index) => (
+            <div
+              key={index}
+              onClick={handleChildClick(child)}
+              className={[
+                // Base
+                'flex gap-3 items-center pl-6 pr-4 py-2 w-full',
+                'rounded-lg cursor-pointer',
+                'transition-all duration-150',
+
+                // Colores y estados (Light Mode)
+                !child.disabled && 'text-content-primary',
+                !child.disabled && 'hover:bg-primary-custom-100',
+                !child.disabled && 'hover:text-primary-custom-600',
+
+                // Dark Mode
+                !child.disabled && 'dark:text-content-primary',
+                !child.disabled && 'dark:hover:bg-dark-bg-custom',
+                !child.disabled && 'dark:hover:text-dark-content-custom',
+
+                // Focus ring
+                !child.disabled && 'focus:outline-none',
+                !child.disabled && 'focus:ring-2',
+                !child.disabled && 'focus:ring-offset-2',
+                !child.disabled && 'focus:ring-primary-custom-400',
+                !child.disabled && 'focus:ring-offset-bg-primary',
+                !child.disabled && 'dark:focus:ring-offset-dark-bg-primary',
+
+                // Disabled
+                child.disabled && 'opacity-50',
+                child.disabled && 'cursor-not-allowed',
+
+                // Custom classes
+                child.className,
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {/* Child Icon Wrapper */}
+              {child.icon && (
+                <div className="flex items-center justify-center w-4 h-4 shrink-0 text-content-secondary dark:text-content-secondary">
+                  {child.icon}
+                </div>
+              )}
+
+              {/* Child Content Wrapper */}
+              <div className="flex flex-1 flex-col items-start justify-center gap-0.5">
+                <p className="font-['Inter:Regular',sans-serif] font-normal leading-5 not-italic text-sm text-left">
+                  {child.label}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DropdownItemCollapsible;