import React from 'react';
import type { DropdownItemCollapsibleProps } from './DropdownItemCollapsible.types';
/**
 * 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 declare const DropdownItemCollapsible: React.FC<DropdownItemCollapsibleProps>;
export default DropdownItemCollapsible;
//# sourceMappingURL=DropdownItemCollapsible.d.ts.map