recursive-dropdown-mui 1.0.0

package/README.md

@@ -0,0 +1,264 @@
+# Recursive Dropdown MUI
+
+Menú desplegable recursivo con soporte para múltiples niveles,
+navegación, scroll suave y total personalización. Construido sobre
+**Material UI** y **React Router**.
+
+---
+
+## 📦 Instalación
+
+```bash
+npm install recursive-dropdown-mui
+# o
+yarn add recursive-dropdown-mui
+# o
+pnpm add recursive-dropdown-mui
+```
+
+### Dependencias requeridas
+
+Este paquete espera que tu proyecto ya tenga instalados:
+
+- @mui/material
+- @emotion/react
+- @emotion/styled
+- react-router-dom
+
+---
+
+## 🚀 Uso básico
+
+```tsx
+import { DropdownWithSubmenu } from "recursive-dropdown-mui";
+import { menuItems } from "./menuData"; // tu array de MenuItem
+
+function App() {
+  return <DropdownWithSubmenu menuItems={menuItems} triggerText="Explorar" />;
+}
+```
+
+---
+
+## 📘 Estructura de datos (MenuItem)
+
+Cada ítem del menú sigue la interfaz:
+
+```ts
+interface MenuItem {
+  label: string; // Texto visible
+  href?: string; // Ruta de navegación (React Router)
+  hash?: string; // Ancla para scroll interno (sin #)
+  icon: React.ReactNode; // Icono (elemento JSX)
+  children?: MenuItem[]; // Subítems anidados
+}
+```
+
+- ✅ Puedes combinar `href` y `hash`.
+- ✅ Si solo usas `hash`, se tomará el `href` del ancestro más cercano
+  como base.
+- ✅ Ítems sin `href/hash` y sin hijos → no hacen nada al hacer clic.
+- ✅ Ítems sin `href/hash` pero con hijos → expanden/colapsan el
+  submenú.
+
+---
+
+## 🧩 Props principales
+
+### 1. Datos y contenido
+
+| Prop        | Tipo                      | Default          | Descripción                           |
+| ----------- | ------------------------- | ---------------- | ------------------------------------- |
+| menuItems   | MenuItem[]                | defaultMenuItems | Array de ítems del menú               |
+| loading     | boolean                   | false            | Muestra estado de carga               |
+| loadingText | string                    | "Cargando..."    | Texto del spinner                     |
+| emptyState  | React.ReactNode           | undefined        | Componente cuando no hay ítems        |
+| triggerText | string \| React.ReactNode | "EXPLORAR"       | Texto o elemento del botón disparador |
+| triggerIcon | React.ReactNode           | undefined        | Icono que acompaña al texto del botón |
+
+### 2. Comportamiento
+
+| Prop                | Tipo                 | Default | Descripción                       |
+| ------------------- | -------------------- | ------- | --------------------------------- |
+| onItemClick         | (item, path) => void | -       | Callback al hacer clic en un ítem |
+| onHoverItem         | (item, path) => void | -       | Callback al pasar el mouse        |
+| onOpen              | () => void           | -       | Al abrir el menú                  |
+| onClose             | () => void           | -       | Al cerrar el menú                 |
+| maxDepth            | number               | 5       | Profundidad máxima                |
+| openOnHover         | boolean              | true    | Abrir con hover                   |
+| closeOnClickOutside | boolean              | true    | Cerrar al hacer clic fuera        |
+| closeDelay          | number (ms)          | 300     | Retraso para cerrar               |
+
+### 3. Estilos y diseño
+
+| Prop         | Tipo                               | Default  | Descripción            |
+| ------------ | ---------------------------------- | -------- | ---------------------- |
+| sx           | SxProps<Theme>                     | -        | Estilos del contenedor |
+| paperSx      | SxProps<Theme>                     | -        | Estilos del Paper      |
+| itemSx       | SxProps<Theme>                     | -        | Estilos del ítem       |
+| submenuSx    | SxProps<Theme>                     | -        | Estilos del submenú    |
+| density      | compact \| standard \| comfortable | standard | Densidad vertical      |
+| showDividers | boolean                            | false    | Mostrar separadores    |
+| dividerColor | string                             | divider  | Color del divisor      |
+
+### 4. Iconos
+
+| Prop         | Tipo                 | Default         | Descripción        |
+| ------------ | -------------------- | --------------- | ------------------ |
+| expandIcon   | React.ReactNode      | ChevronRight    | Submenú cerrado    |
+| collapseIcon | React.ReactNode      | ArrowDropUpIcon | Submenú abierto    |
+| submenuIcon  | React.ReactNode      | expandIcon      | Icono del submenú  |
+| iconPosition | start \| end \| none | end             | Posición del icono |
+
+### 5. Comportamiento avanzado
+
+| Prop            | Tipo           | Default | Descripción         |
+| --------------- | -------------- | ------- | ------------------- |
+| open            | boolean        | -       | Control externo     |
+| defaultOpen     | boolean        | false   | Estado inicial      |
+| initialDepth    | number         | 0       | Profundidad inicial |
+| autoExpandDepth | number         | 0       | Auto expansión      |
+| scrollIntoView  | boolean        | true    | Scroll por hash     |
+| scrollOffset    | number         | 80      | Offset              |
+| scrollBehavior  | auto \| smooth | smooth  | Tipo de scroll      |
+| disabled        | boolean        | false   | Deshabilitado       |
+| readOnly        | boolean        | false   | Solo lectura        |
+
+### 6. Accesibilidad y SEO
+
+| Prop               | Tipo    | Default          | Descripción        |
+| ------------------ | ------- | ---------------- | ------------------ |
+| ariaLabel          | string  | Menú desplegable | aria-label         |
+| ariaLabelledBy     | string  | -                | Etiqueta           |
+| ariaDescribedBy    | string  | -                | Descripción        |
+| role               | string  | menu             | Rol ARIA           |
+| keyboardNavigation | boolean | true             | Navegación teclado |
+| focusOnOpen        | boolean | true             | Foco inicial       |
+| useAnchorTags      | boolean | true             | Usa `<a>`          |
+| rel                | string  | -                | Atributo rel       |
+
+### 7. Internacionalización
+
+| Prop         | Tipo                 | Default | Descripción |
+| ------------ | -------------------- | ------- | ----------- |
+| translations | DropdownTranslations | -       | Textos      |
+| direction    | ltr \| rtl           | ltr     | Dirección   |
+
+### 8. Renderizado personalizado
+
+| Prop          | Tipo                       | Descripción           |
+| ------------- | -------------------------- | --------------------- |
+| renderTrigger | (props) => React.ReactNode | Trigger personalizado |
+| renderItem    | (props) => React.ReactNode | Ítem personalizado    |
+| renderSubmenu | (props) => React.ReactNode | Submenú personalizado |
+
+### 9. Temas y variantes
+
+| Prop        | Tipo                                                             | Default | Descripción        |
+| ----------- | ---------------------------------------------------------------- | ------- | ------------------ |
+| variant     | default \| minimal \| elevated \| borderless \| dark \| gradient | default | Variante visual    |
+| customTheme | CustomTheme                                                      | -       | Tema personalizado |
+
+---
+
+---
+
+## 🎨 Ejemplos avanzados
+
+### Menú con apertura por click
+
+```tsx
+<DropdownWithSubmenu
+  menuItems={menuItems}
+  openOnHover={false}
+  closeOnClickOutside={true}
+/>
+```
+
+### Densidad compacta
+
+```tsx
+<DropdownWithSubmenu
+  menuItems={menuItems}
+  density="compact"
+  iconPosition="none"
+/>
+```
+
+### Tema oscuro
+
+```tsx
+<DropdownWithSubmenu
+  menuItems={menuItems}
+  variant="dark"
+  customTheme={{
+    colors: { background: "#1e1e2f", text: "#ffffff" },
+    borderRadius: 8,
+    spacing: 1,
+  }}
+/>
+```
+
+### Trigger personalizado
+
+```tsx
+<DropdownWithSubmenu
+  menuItems={menuItems}
+  renderTrigger={({ isOpen, toggle, ref }) => (
+    <button ref={ref} onClick={toggle} className="mi-boton">
+      {isOpen ? "Cerrar" : "Abrir"} menú
+    </button>
+  )}
+/>
+```
+
+### Enlaces reales para SEO
+
+```tsx
+<DropdownWithSubmenu
+  menuItems={menuItems}
+  useAnchorTags={true}
+  rel="noopener noreferrer"
+/>
+```
+
+---
+
+## ♿ Accesibilidad
+
+- Rol `menu` / `menuitem`
+- Navegación por teclado
+- Atributos ARIA
+- Lectores de pantalla
+
+---
+
+## 📐 TypeScript
+
+```ts
+import type {
+  MenuItem,
+  DropdownVariant,
+  DropdownDensity,
+  IconPosition,
+  ScrollBehavior,
+  CustomTheme,
+  DropdownTranslations,
+  DropdownWithSubmenuProps,
+} from "recursive-dropdown-mui";
+```
+
+---
+
+## 🛠️ Desarrollo local
+
+1.  Clona el repositorio\
+2.  Instala dependencias: `pnpm install`\
+3.  Construye: `pnpm build`\
+4.  Dev: `pnpm dev`
+
+---
+
+## 📄 Licencia
+
+MIT © Blackysensei

package/dist/dropdown/DropdownWithSubmenu.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { DropdownWithSubmenuProps } from "./core/types";
+/**
+ * Componente de alto nivel que integra DropdownMenu, DropdownTrigger y DropdownContent.
+ * Expone una API simplificada para el usuario final.
+ */
+declare const DropdownWithSubmenu: React.FC<DropdownWithSubmenuProps>;
+export default DropdownWithSubmenu;

package/dist/dropdown/core/context/DropdownContext.d.ts

@@ -0,0 +1,71 @@
+import React, { type ReactNode } from "react";
+import { type SxProps, type Theme } from "@mui/material";
+import type { MenuItem, DropdownContextType, DropdownVariant, DropdownDensity, IconPosition, ScrollBehavior, CustomTheme, DropdownTranslations } from "../types";
+export declare const useDropdownContext: () => DropdownContextType;
+interface DropdownMenuProps {
+    children: ReactNode;
+    menuItems: MenuItem[];
+    loading?: boolean;
+    loadingText?: string;
+    emptyState?: React.ReactNode;
+    onItemClick?: (item: MenuItem, path: number[]) => void;
+    onHoverItem?: (item: MenuItem, path: number[]) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    maxDepth?: number;
+    openOnHover?: boolean;
+    closeOnClickOutside?: boolean;
+    closeDelay?: number;
+    sx?: SxProps<Theme>;
+    paperSx?: SxProps<Theme>;
+    itemSx?: SxProps<Theme>;
+    submenuSx?: SxProps<Theme>;
+    density?: DropdownDensity;
+    showDividers?: boolean;
+    dividerColor?: string;
+    expandIcon?: React.ReactNode;
+    collapseIcon?: React.ReactNode;
+    submenuIcon?: React.ReactNode;
+    iconPosition?: IconPosition;
+    open?: boolean;
+    defaultOpen?: boolean;
+    initialDepth?: number;
+    autoExpandDepth?: number;
+    scrollIntoView?: boolean;
+    scrollOffset?: number;
+    scrollBehavior?: ScrollBehavior;
+    disabled?: boolean;
+    readOnly?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    role?: string;
+    keyboardNavigation?: boolean;
+    focusOnOpen?: boolean;
+    useAnchorTags?: boolean;
+    rel?: string;
+    translations?: DropdownTranslations;
+    direction?: "ltr" | "rtl";
+    renderItem?: (props: {
+        item: MenuItem;
+        path: number[];
+        depth: number;
+        isActive: boolean;
+        hasChildren: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
+    renderSubmenu?: (props: {
+        items: MenuItem[];
+        depth: number;
+        parentPath: number[];
+    }) => React.ReactNode;
+    variant?: DropdownVariant;
+    customTheme?: CustomTheme;
+}
+/**
+ * Proveedor del contexto de dropdown.
+ * Utiliza el hook `useDropdown` para obtener toda la lógica de estado e interacción.
+ * Las props se pasan directamente a `useDropdown` y también se usan para valores estáticos.
+ */
+export declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export {};

package/dist/dropdown/core/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { useDropdownState } from "./useDropdownState";
+export { useHover } from "./useHover";
+export { useClickOutside } from "./useClickOutside";
+export { useScroll } from "./useScroll";
+export { useKeyboardNavigation } from "./useKeyboardNavigation";
+export { useItemNavigation } from "./useItemNavigation";
+export { useDropdown } from "./useDropdown";

package/dist/dropdown/core/hooks/useClickOutside.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from "react";
+interface UseClickOutsideProps {
+    isOpen: boolean;
+    closeOnClickOutside?: boolean;
+    setIsOpen: (open: boolean) => void;
+    rootRef: RefObject<HTMLElement | null>;
+}
+/**
+ * Hook que escucha clics fuera del componente raíz y cierra el menú.
+ * Respetar la prop `closeOnClickOutside` (true por defecto).
+ */
+export declare const useClickOutside: ({ isOpen, closeOnClickOutside, setIsOpen, rootRef, }: UseClickOutsideProps) => void;
+export {};

package/dist/dropdown/core/hooks/useDropdown.d.ts

@@ -0,0 +1,37 @@
+import type { MenuItem } from "../types";
+interface UseDropdownProps {
+    defaultOpen?: boolean;
+    closeDelay?: number;
+    openOnHover?: boolean;
+    closeOnClickOutside?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    menuItems: MenuItem[];
+    onItemClick?: (item: MenuItem, path: number[]) => void;
+    onHoverItem?: (item: MenuItem, path: number[]) => void;
+    scrollOffset?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+/**
+ * Hook principal que orquesta todos los submódulos de comportamiento del dropdown.
+ * Expone el estado y los manejadores necesarios para el contexto.
+ */
+export declare const useDropdown: (props: UseDropdownProps) => {
+    isOpen: boolean;
+    activePath: number[] | null;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setActivePath: import("react").Dispatch<import("react").SetStateAction<number[] | null>>;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleItemMouseEnter: (path: number[]) => void;
+    handleItemMouseLeave: () => void;
+    handleItemClick: (item: MenuItem, itemPath: number[]) => void;
+    getItemByPath: (path: number[]) => MenuItem | null;
+    getBaseHrefForPath: (path: number[]) => string;
+    buildItemUrl: (item: MenuItem, baseHref?: string) => string;
+    getItemDepth: (path: number[]) => number;
+    itemHasChildren: (item: MenuItem) => boolean;
+    timeoutRef: import("react").RefObject<number | null>;
+};
+export {};

package/dist/dropdown/core/hooks/useDropdownState.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook base para gestionar el estado local del dropdown.
+ *
+ * - `isOpen`: indica si el menú principal está visible.
+ * - `setIsOpen`: función para cambiar el estado de apertura.
+ * - `activePath`: array de índices que representa la ruta del submenú actualmente activo (hover o click).
+ * - `setActivePath`: función para actualizar la ruta activa.
+ */
+export declare const useDropdownState: (defaultOpen?: boolean) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    activePath: number[] | null;
+    setActivePath: import("react").Dispatch<import("react").SetStateAction<number[] | null>>;
+};

package/dist/dropdown/core/hooks/useHover.d.ts

@@ -0,0 +1,23 @@
+interface UseHoverProps {
+    openOnHover?: boolean;
+    closeDelay?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
+    setIsOpen: (open: boolean) => void;
+    setActivePath: (path: number[] | null) => void;
+}
+/**
+ * Hook que maneja toda la interacción por hover:
+ * - Apertura/cierre del menú principal con delay configurable.
+ * - Activación de submenús al pasar el ratón sobre items.
+ * - Limpieza de timeouts para evitar cierres abruptos.
+ */
+export declare const useHover: ({ openOnHover, closeDelay, onOpen, onClose, setIsOpen, setActivePath, }: UseHoverProps) => {
+    handleRootMouseEnter: () => void;
+    handleRootMouseLeave: () => void;
+    handleItemMouseEnter: (path: number[]) => void;
+    handleItemMouseLeave: () => void;
+    timeoutRef: import("react").RefObject<number | null>;
+    intervalRef: import("react").RefObject<number | null>;
+};
+export {};

package/dist/dropdown/core/hooks/useItemNavigation.d.ts

@@ -0,0 +1,27 @@
+import { MenuItem } from "../types";
+interface UseItemNavigationProps {
+    menuItems: MenuItem[];
+    onItemClick?: (item: MenuItem, path: number[]) => void;
+    onHoverItem?: (item: MenuItem, path: number[]) => void;
+    setIsOpen: (open: boolean) => void;
+    setActivePath: (path: number[] | null) => void;
+    activePath: number[] | null;
+    navigate: (url: string) => void;
+    locationPathname: string;
+    scrollToElement: (id: string, offset: number) => void;
+    scrollOffset: number;
+    disabled: boolean;
+    readOnly: boolean;
+}
+/**
+ * Hook que centraliza la lógica de navegación y expansión al hacer clic en un item.
+ * También construye URLs, obtiene items por path y maneja el hover.
+ */
+export declare const useItemNavigation: ({ menuItems, onItemClick, onHoverItem, setIsOpen, setActivePath, activePath, navigate, locationPathname, scrollToElement, scrollOffset, disabled, readOnly, }: UseItemNavigationProps) => {
+    getItemByPath: (path: number[]) => MenuItem | null;
+    getBaseHrefForPath: (path: number[]) => string;
+    buildItemUrl: (item: MenuItem, baseHref?: string) => string;
+    handleItemClick: (item: MenuItem, itemPath: number[]) => void;
+    handleHoverItem: (item: MenuItem, path: number[]) => void;
+};
+export {};

package/dist/dropdown/core/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from "react";
+import { MenuItem } from "../types";
+interface UseKeyboardNavigationProps {
+    isOpen: boolean;
+    activePath: number[] | null;
+    menuItems: MenuItem[];
+    onItemSelect: (item: MenuItem, path: number[]) => void;
+    onClose: () => void;
+    rootRef: RefObject<HTMLElement | null>;
+    enabled?: boolean;
+}
+/**
+ * Hook que implementa la navegación por teclado:
+ * - Flechas arriba/abajo: movimiento vertical entre items del mismo nivel.
+ * - Flecha derecha: abre submenú del item activo.
+ * - Flecha izquierda: cierra submenú actual.
+ * - Enter: selecciona el item activo.
+ * - Escape: cierra todo el menú.
+ */
+export declare const useKeyboardNavigation: ({ isOpen, activePath, menuItems, onItemSelect, onClose, rootRef, enabled, }: UseKeyboardNavigationProps) => void;
+export {};

package/dist/dropdown/core/hooks/useScroll.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook que proporciona funciones para realizar scroll suave:
+ * - `scrollToElement`: desplaza la ventana hasta un elemento con ID específico.
+ * - `scrollToTop`: vuelve al inicio de la página con un offset opcional.
+ */
+export declare const useScroll: () => {
+    scrollToElement: (elementId: string, offset?: number) => void;
+    scrollToTop: (offset?: number) => void;
+};

package/dist/dropdown/core/types.d.ts

@@ -0,0 +1,170 @@
+import { ReactNode } from "react";
+import type { SxProps, Theme } from "@mui/material";
+export interface MenuItem {
+    label: string;
+    href?: string;
+    hash?: string;
+    icon: ReactNode;
+    children?: MenuItem[];
+}
+export interface DropdownContextType {
+    isOpen: boolean;
+    activePath: number[] | null;
+    setIsOpen: (open: boolean) => void;
+    setActivePath: (path: number[] | null) => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleItemMouseEnter: (path: number[]) => void;
+    handleItemMouseLeave: () => void;
+    handleItemClick: (item: MenuItem, itemPath: number[]) => void;
+    getItemDepth: (path: number[]) => number;
+    buildItemUrl: (item: MenuItem, baseHref?: string) => string;
+    itemHasChildren: (item: MenuItem) => boolean;
+    menuItems: MenuItem[];
+    loading?: boolean;
+    loadingText?: string;
+    emptyState?: React.ReactNode;
+    onItemClick?: (item: MenuItem, path: number[]) => void;
+    onHoverItem?: (item: MenuItem, path: number[]) => void;
+    maxDepth: number;
+    getItemByPath: (path: number[]) => MenuItem | null;
+    getBaseHrefForPath: (path: number[]) => string;
+    paperSx?: any;
+    itemSx?: any;
+    submenuSx?: any;
+    density: DropdownDensity;
+    showDividers: boolean;
+    dividerColor: string;
+    getDensityStyles: () => any;
+    expandIcon: React.ReactNode;
+    collapseIcon: React.ReactNode;
+    submenuIcon: React.ReactNode;
+    iconPosition: IconPosition;
+    openOnHover: boolean;
+    closeDelay: number;
+    scrollIntoView: boolean;
+    scrollOffset: number;
+    scrollBehavior: ScrollBehavior;
+    disabled: boolean;
+    readOnly: boolean;
+    initialDepth: number;
+    autoExpandDepth: number;
+    ariaLabel: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    role: string;
+    keyboardNavigation: boolean;
+    focusOnOpen: boolean;
+    useAnchorTags: boolean;
+    rel?: string;
+    translations?: DropdownTranslations;
+    direction: "ltr" | "rtl";
+    renderItem?: (props: {
+        item: MenuItem;
+        path: number[];
+        depth: number;
+        isActive: boolean;
+        hasChildren: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
+    renderSubmenu?: (props: {
+        items: MenuItem[];
+        depth: number;
+        parentPath: number[];
+    }) => React.ReactNode;
+    variant: DropdownVariant;
+    customTheme?: CustomTheme;
+    LoadingState: React.FC;
+    EmptyState: React.FC;
+}
+export type DropdownVariant = "default" | "minimal" | "elevated" | "borderless" | "dark" | "gradient";
+export type DropdownDensity = "compact" | "standard" | "comfortable";
+export type IconPosition = "start" | "end" | "none";
+export type ScrollBehavior = "auto" | "smooth";
+export interface CustomTheme {
+    text?: string;
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        background?: string;
+        text?: string;
+    };
+    spacing?: number;
+    borderRadius?: number;
+}
+export interface DropdownTranslations {
+    expand?: string;
+    collapse?: string;
+    loading?: string;
+    empty?: string;
+}
+export interface DropdownWithSubmenuProps {
+    menuItems?: MenuItem[];
+    triggerText?: string | React.ReactNode;
+    triggerIcon?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    loading?: boolean;
+    loadingText?: string;
+    onItemClick?: (item: MenuItem, path: number[]) => void;
+    maxDepth?: number;
+    openOnHover?: boolean;
+    closeOnClickOutside?: boolean;
+    closeDelay?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onHoverItem?: (item: MenuItem, path: number[]) => void;
+    sx?: SxProps<Theme>;
+    triggerSx?: SxProps<Theme>;
+    paperSx?: SxProps<Theme>;
+    itemSx?: SxProps<Theme>;
+    submenuSx?: SxProps<Theme>;
+    buttonVariant?: "text" | "outlined" | "contained";
+    buttonColor?: "primary" | "secondary" | "inherit" | "success" | "error" | "info" | "warning";
+    buttonSize?: "small" | "medium" | "large";
+    density?: DropdownDensity;
+    expandIcon?: React.ReactNode;
+    collapseIcon?: React.ReactNode;
+    submenuIcon?: React.ReactNode;
+    iconPosition?: IconPosition;
+    showDividers?: boolean;
+    dividerColor?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    initialDepth?: number;
+    autoExpandDepth?: number;
+    scrollIntoView?: boolean;
+    scrollOffset?: number;
+    scrollBehavior?: ScrollBehavior;
+    disabled?: boolean;
+    readOnly?: boolean;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    role?: string;
+    keyboardNavigation?: boolean;
+    focusOnOpen?: boolean;
+    useAnchorTags?: boolean;
+    rel?: string;
+    translations?: DropdownTranslations;
+    direction?: "ltr" | "rtl";
+    renderTrigger?: (props: {
+        isOpen: boolean;
+        toggle: () => void;
+        ref: React.Ref<HTMLElement>;
+    }) => React.ReactNode;
+    renderItem?: (props: {
+        item: MenuItem;
+        path: number[];
+        depth: number;
+        isActive: boolean;
+        hasChildren: boolean;
+        onClick: () => void;
+    }) => React.ReactNode;
+    renderSubmenu?: (props: {
+        items: MenuItem[];
+        depth: number;
+        parentPath: number[];
+    }) => React.ReactNode;
+    variant?: DropdownVariant;
+    customTheme?: CustomTheme;
+}

package/dist/dropdown/data/menuData.d.ts

@@ -0,0 +1,2 @@
+import type { MenuItem } from "../core/types";
+export declare const menuItems: MenuItem[];

package/dist/dropdown/ui/DropdownContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * Componente que renderiza el contenido del menú desplegable.
+ * Solo se muestra cuando `isOpen` es `true`.
+ */
+export declare const DropdownContent: React.FC;