siesa-ui-kit 1.0.6 → 1.0.7

package/dist/components/LoginView/LoginView.types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Props del componente LoginView
+ */
+export interface LoginViewProps {
+    /**
+     * Handler para el submit del formulario de login
+     * @param email - Email ingresado por el usuario
+     * @param password - Contraseña ingresada por el usuario
+     */
+    onSubmit?: (email: string, password: string) => void;
+    /**
+     * Handler para el click en "Olvidé mi Contraseña"
+     */
+    onForgotPassword?: () => void;
+    /**
+     * Handler para el click en "¿No tienes una cuenta?"
+     */
+    onSignUp?: () => void;
+    /**
+     * Estado de carga del botón de submit
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Mensaje de error general para mostrar en el formulario
+     */
+    errorMessage?: string;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * Si se muestra el fondo decorativo con imagen
+     * @default true
+     */
+    showBackground?: boolean;
+    /**
+     * Variante de visualización
+     * - 'responsive': Se adapta según el viewport (default)
+     * - 'mobile': Siempre se muestra como mobile sin efectos de card
+     * - 'desktop': Siempre se muestra como desktop con card
+     * @default 'responsive'
+     */
+    variant?: 'responsive' | 'mobile' | 'desktop';
+}
+//# sourceMappingURL=LoginView.types.d.ts.map

package/dist/components/LoginView/LoginView.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginView.types.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/LoginView.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAErD;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC/C"}

package/dist/components/LoginView/icons.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * Icono de sobre (envelope) para el input de email
+ */
+export declare const EnvelopeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de candado cerrado (lock) para el input de contraseña
+ */
+export declare const LockClosedIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de ojo (eye) para mostrar/ocultar contraseña
+ */
+export declare const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Logo de Siesa
+ */
+export declare const SiesaLogo: React.FC<React.SVGProps<SVGSVGElement>>;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/LoginView/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAUhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAalE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAc3D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CA2B7D,CAAC"}

package/dist/components/LoginView/index.d.ts

@@ -0,0 +1,4 @@
+export { LoginView } from './LoginView';
+export type { LoginViewProps } from './LoginView.types';
+export { EnvelopeIcon, LockClosedIcon, EyeIcon, SiesaLogo } from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LoginView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoginView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { NavbarProps } from './Navbar.types';
+/**
+ * Componente Navbar del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * Barra de navegación principal con soporte completo para responsive y dark mode.
+ * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.
+ *
+ * **Variantes de dispositivo:**
+ * - `responsive`: Se adapta automáticamente al viewport (por defecto)
+ * - `desktop`: Versión completa (1360x64px) con todos los elementos
+ * - `tablet`: Versión tablet (1024x64px) con elementos reducidos
+ * - `mobile`: Versión simplificada (428x40px) con logo icono y avatar circular
+ *
+ * **Elementos incluidos:**
+ * - Botón de navegación (solo desktop/tablet) - Usa shadow-button-inset
+ * - Logo del negocio (solo desktop/tablet)
+ * - Dividers verticales (solo desktop/tablet)
+ * - Logo Siesa (completo en desktop/tablet, icono en mobile)
+ * - Nombre del producto (solo desktop/tablet) - Heading/Tiny (20px Bold)
+ * - Badge de ambiente con icono de advertencia (yellow)
+ * - Botones de acción (search solo mobile, cart, notifications)
+ * - Dropdown de usuario con avatar, nombre y email
+ * - Logo Siesa trailing (solo desktop)
+ *
+ * **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 (NO colores hardcodeados)
+ * - Focus rings adaptativos para light y dark mode
+ * - Type safety con TypeScript estricto
+ * - Responsive design con breakpoints md: y lg:
+ * - Tipografía del sistema: Heading/Tiny, Paragraph/Small, Paragraph/Tiny
+ * - Spacing del sistema (4px, 8px, 12px, 16px, 32px)
+ *
+ * @see docs/colors.md - Sistema de colores y tokens dark mode
+ * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras (button-inset)
+ *
+ * @example
+ * ```tsx
+ * <Navbar
+ *   productName="Mi Producto"
+ *   environmentBadge="Ambiente de Pruebas"
+ *   userDropdown={{
+ *     avatar: "/path/to/avatar.jpg",
+ *     name: "Juan Pérez",
+ *     email: "juan@ejemplo.com",
+ *   }}
+ *   notifications={{
+ *     cart: 99,
+ *     bell: true,
+ *   }}
+ *   onNavigationClick={() => router.back()}
+ *   onCartClick={() => openCart()}
+ *   onNotificationsClick={() => openNotifications()}
+ * />
+ * ```
+ */
+export declare const Navbar: React.FC<NavbarProps>;
+//# sourceMappingURL=Navbar.d.ts.map

package/dist/components/Navbar/Navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2qBxC,CAAC"}

package/dist/components/Navbar/Navbar.types.d.ts

@@ -0,0 +1,194 @@
+import type { ReactNode } from 'react';
+/**
+ * Variante de dispositivo del Navbar
+ * - `responsive`: Se adapta automáticamente al viewport (por defecto)
+ * - `desktop`: Versión completa (≥1024px) con todos los elementos
+ * - `tablet`: Versión tablet (≥768px) con elementos reducidos
+ * - `mobile`: Versión simplificada (<768px) con logo icono y avatar circular
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4278-18626
+ */
+export type NavbarVariant = 'responsive' | 'desktop' | 'tablet' | 'mobile';
+/**
+ * Datos del dropdown de usuario
+ *
+ * @example
+ * ```tsx
+ * const userDropdown: UserDropdownProps = {
+ *   avatar: '/path/to/avatar.jpg',
+ *   name: 'Juan Pérez',
+ *   email: 'juan@ejemplo.com',
+ *   onMenuClick: () => setMenuOpen(true),
+ * };
+ * ```
+ */
+export interface UserDropdownProps {
+    /**
+     * URL del avatar del usuario
+     * Recomendado: mínimo 80x80px para retina
+     */
+    avatar: string;
+    /**
+     * Nombre del usuario (se muestra en desktop/tablet)
+     */
+    name: string;
+    /**
+     * Email del usuario (se muestra en desktop/tablet)
+     */
+    email?: string;
+    /**
+     * Rol del usuario (alternativa a email, ej: "Administrador")
+     */
+    role?: string;
+    /**
+     * Handler para click en el dropdown de usuario
+     */
+    onMenuClick?: () => void;
+}
+/**
+ * Configuración de badges de notificación
+ *
+ * @example
+ * ```tsx
+ * const notifications: NotificationsProps = {
+ *   cart: 15,      // Muestra badge con "15"
+ *   bell: true,    // Muestra dot de notificación
+ * };
+ * ```
+ */
+export interface NotificationsProps {
+    /**
+     * Número de items en el carrito
+     * Si es > 99, muestra "+99"
+     */
+    cart?: number;
+    /**
+     * Muestra dot de notificación en la campana
+     */
+    bell?: boolean;
+}
+/**
+ * Props del componente Navbar
+ *
+ * Barra de navegación principal con soporte completo para responsive design y dark mode.
+ * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.
+ *
+ * **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
+ * - Focus rings adaptativos para light y dark mode
+ * - Tipografía del sistema: Heading/Tiny (20px Bold), Paragraph/Small (14px), Paragraph/Tiny (12px)
+ * - Spacing del sistema: 4px, 8px, 12px, 16px, 32px
+ *
+ * @see docs/colors.md - Sistema de colores y tokens dark mode
+ * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras (button-inset)
+ */
+export interface NavbarProps {
+    /**
+     * Logo del negocio/cliente (componente o imagen)
+     * Solo visible en desktop/tablet
+     *
+     * @default Logo por defecto de la carpeta public
+     */
+    logo?: ReactNode;
+    /**
+     * Logo de Siesa personalizado
+     * Si no se proporciona, usa el logo por defecto según variante
+     *
+     * @default Logo Siesa de la carpeta public
+     */
+    siesaLogo?: ReactNode;
+    /**
+     * Nombre del producto que aparece después del logo
+     * Solo visible en desktop/tablet (se oculta en mobile)
+     *
+     * @default 'Nombre Producto'
+     */
+    productName?: string;
+    /**
+     * Badge de ambiente/entorno (ej: "Ambiente de Pruebas")
+     * En mobile muestra versión corta ("Pruebas")
+     */
+    environmentBadge?: string;
+    /**
+     * Contenido del dropdown de usuario
+     */
+    userDropdown?: UserDropdownProps;
+    /**
+     * Elementos de acción adicionales en la barra (botones, iconos, etc.)
+     * Se muestran a la derecha después del dropdown de usuario
+     */
+    actions?: ReactNode;
+    /**
+     * Configuración de badges de notificación para los botones
+     */
+    notifications?: NotificationsProps;
+    /**
+     * Clases CSS adicionales para el contenedor del navbar
+     */
+    className?: string;
+    /**
+     * Modo de visualización del navbar
+     * - `responsive`: Se adapta automáticamente al viewport
+     * - `desktop`: Versión completa (1360x64px)
+     * - `tablet`: Versión tablet (1024x64px)
+     * - `mobile`: Versión compacta (428x40px)
+     *
+     * @default 'responsive'
+     */
+    variant?: NavbarVariant;
+    /**
+     * Ocultar botones de acción (carrito, notificaciones, búsqueda)
+     *
+     * @default false
+     */
+    hideActionButtons?: boolean;
+    /**
+     * Elemento leading personalizado (reemplaza el botón de navegación por defecto)
+     * Solo visible en desktop/tablet
+     */
+    leadingAction?: ReactNode;
+    /**
+     * Mostrar Business Logo en el leading (lado izquierdo)
+     * Solo visible en desktop/tablet
+     *
+     * @default false
+     */
+    showBusinessLogo?: boolean;
+    /**
+     * Mostrar Logo de Siesa en el leading (lado izquierdo)
+     * Solo visible en desktop/tablet (en mobile siempre muestra el icono)
+     *
+     * @default true
+     */
+    showSiesaLogoLeading?: boolean;
+    /**
+     * Mostrar Logo de Siesa en el trailing (lado derecho)
+     * Solo visible en desktop/tablet
+     *
+     * @default false
+     */
+    showSiesaLogoTrailing?: boolean;
+    /**
+     * Handler para click en el botón de navegación (flecha izquierda)
+     * Solo visible en desktop/tablet cuando no hay leadingAction
+     */
+    onNavigationClick?: () => void;
+    /**
+     * Handler para click en el botón de búsqueda
+     * Solo visible en mobile
+     */
+    onSearchClick?: () => void;
+    /**
+     * Handler para click en el botón de carrito
+     */
+    onCartClick?: () => void;
+    /**
+     * Handler para click en el botón de notificaciones
+     */
+    onNotificationsClick?: () => void;
+}
+//# sourceMappingURL=Navbar.types.d.ts.map

package/dist/components/Navbar/Navbar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Navbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3E;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAEjC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC"}

package/dist/components/Navbar/icons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Iconos para el componente Navbar
+ * Basados en Heroicons Micro (16x16px)
+ */
+export declare const ShoppingCartIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const BellIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const MagnifyingGlassIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronDownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExclamationTriangleIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationDot: () => import("react/jsx-runtime").JSX.Element;
+export declare const ArrowLeftStartOnRectangleIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/Navbar/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/icons.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,gBAAgB,+CAU5B,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAcpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAc/B,CAAC;AAEF,eAAO,MAAM,eAAe,+CAc3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAcnC,CAAC;AAEF,eAAO,MAAM,eAAe,+CAI3B,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CAczC,CAAC"}

package/dist/components/Navbar/index.d.ts

@@ -0,0 +1,4 @@
+export { Navbar } from './Navbar';
+export type { NavbarProps, NavbarVariant, UserDropdownProps, NotificationsProps, } from './Navbar.types';
+export * from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/components/NavigationBar/NavigationBar.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { NavigationBarProps } from './NavigationBar.types';
+/**
+ * NavigationBar del sistema de diseño Siesa
+ *
+ * **Componente de navegación inferior (Bottom Navigation Bar) para móvil.**
+ * Permite al usuario navegar entre vistas principales de la aplicación.
+ * Diseñado para contener 3-5 ítems de navegación.
+ *
+ * **🔄 Navegación Responsive:**
+ * El NavigationRail (navegación lateral vertical) se convierte en NavigationBar
+ * (navegación inferior horizontal) cuando la pantalla es móvil. Esta es una
+ * práctica recomendada de UX para aprovechar mejor el espacio en diferentes
+ * dispositivos:
+ * - **Desktop/Tablet**: Usar NavigationRail (lateral)
+ * - **Mobile**: Usar NavigationBar (inferior)
+ *
+ * **Características:**
+ * - Soporta hasta 5 ítems de navegación (recomendado: 3-5)
+ * - Cada ítem tiene icono + label
+ * - Indicador visual de ítem activo (fondo azul claro)
+ * - Estados: active, hover, disabled
+ * - Dark mode completo
+ * - Accesibilidad con ARIA labels
+ *
+ * **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
+ * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
+ * - Iconos de 16x16px según especificaciones de Figma
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see NavigationRail - Componente de navegación lateral para desktop
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { id: 'home', icon: <HomeIcon />, label: 'Inicio', active: true },
+ *   { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
+ *   { id: 'profile', icon: <ProfileIcon />, label: 'Perfil' },
+ * ];
+ *
+ * <NavigationBar
+ *   items={items}
+ *   activeItemId="home"
+ *   onItemClick={(id) => console.log('Clicked:', id)}
+ * />
+ * ```
+ *
+ * @example
+ * // Patrón responsive: NavigationRail en desktop, NavigationBar en mobile
+ * ```tsx
+ * function ResponsiveNav() {
+ *   return (
+ *     <>
+ *       // NavigationRail para desktop/tablet
+ *       <div className="hidden md:block">
+ *         <NavigationRail items={items} />
+ *       </div>
+ *
+ *       // NavigationBar para móvil
+ *       <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
+ *         <NavigationBar items={items} />
+ *       </div>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare const NavigationBar: React.FC<NavigationBarProps>;
+//# sourceMappingURL=NavigationBar.d.ts.map

package/dist/components/NavigationBar/NavigationBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,uBAAuB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2KtD,CAAC"}

package/dist/components/NavigationBar/NavigationBar.types.d.ts

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+/**
+ * Interfaz para un ítem individual del Navigation Bar
+ */
+export interface NavigationBarItem {
+    /**
+     * Identificador único del ítem
+     */
+    id: string;
+    /**
+     * Icono del ítem (componente React)
+     */
+    icon: ReactNode;
+    /**
+     * Label del ítem (texto debajo del icono)
+     */
+    label: string;
+    /**
+     * Si el ítem está activo
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Si el ítem está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Función onClick del ítem
+     */
+    onClick?: (id: string) => void;
+    /**
+     * Etiqueta accesible para lectores de pantalla
+     */
+    ariaLabel?: string;
+}
+/**
+ * Props del componente NavigationBar
+ */
+export interface NavigationBarProps {
+    /**
+     * Lista de ítems del navigation bar (máximo 5 ítems recomendado)
+     */
+    items: NavigationBarItem[];
+    /**
+     * ID del ítem actualmente activo
+     */
+    activeItemId?: string;
+    /**
+     * Función que se ejecuta cuando se hace click en un ítem
+     */
+    onItemClick?: (id: string) => void;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * Etiqueta accesible para el navigation bar
+     * @default 'Navigation Bar'
+     */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=NavigationBar.types.d.ts.map

package/dist/components/NavigationBar/NavigationBar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationBar/NavigationBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/NavigationBar/index.d.ts

@@ -0,0 +1,3 @@
+export { NavigationBar } from './NavigationBar';
+export type { NavigationBarProps, NavigationBarItem } from './NavigationBar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NavigationBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/NavigationRail/NavigationRail.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { NavigationRailProps } from './NavigationRail.types';
+/**
+ * NavigationRail - Componente principal
+ */
+export declare const NavigationRail: React.FC<NavigationRailProps>;
+//# sourceMappingURL=NavigationRail.d.ts.map

package/dist/components/NavigationRail/NavigationRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRail.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRail/NavigationRail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAA2B,MAAM,wBAAwB,CAAC;AAwO3F;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqLxD,CAAC"}

package/dist/components/NavigationRail/NavigationRail.types.d.ts

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+/**
+ * Props para NavigationRailItem
+ */
+export interface NavigationRailItemProps {
+    /**
+     * Icono a mostrar en el item
+     */
+    icon: ReactNode;
+    /**
+     * Label del item de navegación
+     */
+    label: string;
+    /**
+     * Si el item está seleccionado actualmente
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Mostrar badge de notificación (dot rojo)
+     * @default false
+     */
+    badge?: boolean;
+    /**
+     * Número a mostrar en el badge (reemplaza el dot)
+     */
+    badgeCount?: number;
+    /**
+     * Handler para evento click
+     */
+    onClick?: () => void;
+    /**
+     * Label para accesibilidad (ARIA)
+     */
+    ariaLabel?: string;
+    /**
+     * ID único del item (para navegación)
+     */
+    id?: string;
+}
+/**
+ * Props del componente NavigationRail
+ */
+export interface NavigationRailProps {
+    /**
+     * Items de navegación a mostrar
+     */
+    items: NavigationRailItemProps[];
+    /**
+     * Alineación vertical de los items
+     * - `top`: Items alineados arriba (debajo del FAB)
+     * - `center`: Items centrados verticalmente
+     * - `bottom`: Items alineados abajo
+     * @default 'top'
+     */
+    alignment?: 'top' | 'center' | 'bottom';
+    /**
+     * Mostrar botón FAB (Floating Action Button) en la parte superior
+     * @default false
+     */
+    showFab?: boolean;
+    /**
+     * Icono del botón FAB
+     */
+    fabIcon?: ReactNode;
+    /**
+     * Handler para click en el FAB
+     */
+    onFabClick?: () => void;
+    /**
+     * Label del FAB para accesibilidad
+     */
+    fabAriaLabel?: string;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * ID del item seleccionado actualmente
+     */
+    selectedId?: string;
+    /**
+     * Handler cuando se selecciona un item
+     */
+    onItemSelect?: (id: string) => void;
+}
+//# sourceMappingURL=NavigationRail.types.d.ts.map

package/dist/components/NavigationRail/NavigationRail.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRail.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRail/NavigationRail.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,KAAK,EAAE,uBAAuB,EAAE,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAExC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}

package/dist/components/NavigationRail/index.d.ts

@@ -0,0 +1,3 @@
+export { NavigationRail } from './NavigationRail';
+export type { NavigationRailProps, NavigationRailItemProps } from './NavigationRail.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NavigationRail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}