@grupor5/raya 0.2.12 → 0.2.14

package/dist/index.d.mts

@@ -11,7 +11,7 @@ export { Breakpoint, ColumnSpan, ContainerSize, GridGap, GridSpec, breakpoints,
 export { IconAnimation, IconCategory, IconColor, IconSize, IconState, IconVariant, defaultIconConfig, iconAnimations, iconCategories, iconColors, iconSizeClasses, iconSizes, iconStates, iconTheme, iconTokens, iconVariants } from './tokens/icons.mjs';
 export { ButtonColor, ButtonSize, ButtonState, ButtonTokenProps, ButtonVariant, buttonAnimations, buttonBaseClasses, buttonColors, buttonIconClasses, buttonLoadingClasses, buttonSizeClasses, buttonSizes, buttonStates, buttonTheme, buttonTokens, buttonVariantClasses, buttonVariants, defaultButtonConfig, getButtonIconSize, getButtonSizeClasses, getButtonVariantClasses, loadingSpinnerSVG } from './tokens/buttons.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export { classNames } from './utils/classNames.mjs';
 export { cn } from './utils/cn.mjs';
 export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.mjs';
@@ -34,6 +34,8 @@ export { Dropdown, DropdownProps } from './molecules/dropdown/index.mjs';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.mjs';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.mjs';
 export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.mjs';
+export { BrandInfo, FooterMenuItem, MainNavigationItem, Sidebar, SidebarProps, SubNavigationItem } from './organisms/sidebar/index.mjs';
+export { NotificationItem, TopNavbar, TopNavbarProps, UserMenuOption, UserProfile } from './organisms/topnavbar/index.mjs';
 export { useModal } from './hooks/useModal.mjs';
 import 'clsx';
 import 'class-variance-authority/types';
@@ -72,277 +74,6 @@ interface ModalProps {
 }
 declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
-/**
- * Navigation item interface for main menu items
- */
-interface MainNavigationItem {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    path: string;
-    badge?: string | number;
-    subItems?: SubNavigationItem[];
-}
-/**
- * Navigation item interface for submenu items
- */
-interface SubNavigationItem {
-    id: string;
-    label: string;
-    path: string;
-    badge?: string | number;
-}
-/**
- * Footer menu item interface
- */
-interface FooterMenuItem {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    path: string;
-    badge?: string | number;
-}
-/**
- * Brand information interface
- */
-interface BrandInfo {
-    logo?: React__default.ReactNode;
-    name: string;
-    tagline?: string;
-}
-/**
- * Sidebar component props
- */
-interface SidebarProps {
-    /** Brand information displayed at the top */
-    brand: BrandInfo;
-    /** Main navigation items with optional submenus */
-    mainNavigation: MainNavigationItem[];
-    /** Footer menu items (optional) */
-    footerMenu?: FooterMenuItem[];
-    /** Whether to show footer menu */
-    showFooterMenu?: boolean;
-    /** Current active path */
-    currentPath?: string;
-    /** Whether the sidebar is collapsed */
-    collapsed?: boolean;
-    /** Callback when navigation item is clicked */
-    onNavigate?: (path: string, item: MainNavigationItem | SubNavigationItem | FooterMenuItem) => void;
-    /** Callback when collapse toggle is clicked */
-    onToggleCollapse?: () => void;
-    /** Custom className */
-    className?: string;
-    /** Data test id for testing */
-    'data-testid'?: string;
-}
-/**
- * # Sidebar - Navigation Organism
- *
- * ## 🚨 GRID SYSTEM COMPLIANCE
- *
- * Este componente está diseñado para ocupar **exactamente 2 columnas** en el grid system del Raya Design System.
- * Debe usarse dentro de un Grid container para mantener la consistencia de layouts.
- *
- * ### Features
- * - **Fixed Width**: Ocupa exactamente 2 columnas del sistema de grid (max-width: 200px)
- * - **Main Navigation**: Elementos principales con iconos opcionales (sin chevron, sin fondo cuando submenu activo)
- * - **Submenus**: Subitems con RightIcon, ancho completo respetando posición
- * - **Clean Active States**: Solo el item directamente seleccionado tiene fondo oscuro
- * - **Footer Menu**: Menu inferior opcional (configurable)
- * - **Dynamic Content**: Navegación completamente dinámica via props
- * - **Real Icons**: Usa iconos de la librería @grupor5/raya-icons (NO emojis)
- * - **Smart Spacing**: Spacing optimizado entre texto y badges
- * - **Text Ellipsis**: Texto se trunca con ellipsis si excede el ancho disponible
- * - **Overflow Control**: Sin desbordamiento horizontal, respeta límites del grid
- * - **Brand Display**: Logo y información de marca
- * - **Collapsible**: Opción de colapsar para ahorrar espacio
- * - **Accessibility**: ARIA labels y navegación por teclado
- *
- * ### Grid Usage
- * ```tsx
- * <Grid cols={12} margin>
- *   <GridItem span={{ mobile: 12, desktop: 2 }}>
- *     <Sidebar {...props} />
- *   </GridItem>
- *   <GridItem span={{ mobile: 12, desktop: 10 }}>
- *     <MainContent />
- *   </GridItem>
- * </Grid>
- * ```
- *
- * @example
- * ```tsx
- * // Import icons from raya-icons library
- * import { HomeIcon } from '@grupor5/raya-icons/icons/HomeIcon';
- * import { CategoryIcon } from '@grupor5/raya-icons/icons/CategoryIcon';
- * import { DocumentIcon } from '@grupor5/raya-icons/icons/DocumentIcon';
- * import { SettingIcon } from '@grupor5/raya-icons/icons/SettingIcon';
- *
- * // Sidebar with main navigation and submenus
- * <Sidebar
- *   brand={{ name: "Manta Seguros" }}
- *   mainNavigation={[
- *     {
- *       id: "dashboard",
- *       label: "Dashboard",
- *       icon: <HomeIcon className="w-5 h-5" />,
- *       path: "/dashboard"
- *     },
- *     {
- *       id: "products",
- *       label: "Productos",
- *       icon: <CategoryIcon className="w-5 h-5" />,
- *       path: "/products",
- *       subItems: [
- *         { id: "tables", label: "Table's name", path: "/products/tables" }
- *       ]
- *     },
- *     {
- *       id: "policies",
- *       label: "Pólizas",
- *       icon: <DocumentIcon className="w-5 h-5" />,
- *       path: "/policies",
- *       subItems: [
- *         { id: "quote", label: "Cotizar", path: "/policies/quote" },
- *         { id: "issue", label: "Emitir", path: "/policies/issue" },
- *         { id: "modify", label: "Modificar", path: "/policies/modify" }
- *       ]
- *     }
- *   ]}
- *   footerMenu={[
- *     { id: "settings", label: "Configuración", icon: <SettingIcon className="w-5 h-5" />, path: "/settings" }
- *   ]}
- *   showFooterMenu={true}
- *   currentPath="/products/tables"
- *   onNavigate={(path, item) => navigate(path)}
- * />
- * ```
- */
-declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface NotificationItem {
-    id: string;
-    icon?: React__default.ReactNode;
-    badge?: string | number;
-    onClick?: () => void;
-}
-interface UserMenuOption {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    onClick?: () => void;
-    separator?: boolean;
-}
-interface UserProfile {
-    name: string;
-    email?: string;
-    avatar?: string;
-    role?: string;
-    menuOptions?: UserMenuOption[];
-}
-interface TopNavbarProps {
-    /** Whether the sidebar is collapsed/hidden */
-    sidebarCollapsed?: boolean;
-    /** Callback when hamburger menu is clicked */
-    onToggleSidebar?: () => void;
-    /** Notification items array (extensible for future menus) */
-    notifications?: NotificationItem[];
-    /** User profile information */
-    userProfile: UserProfile;
-    /** Callback when user menu actions are triggered */
-    onUserMenuClick?: (action: string) => void;
-    /** Custom className */
-    className?: string;
-    /** Data test id for testing */
-    'data-testid'?: string;
-}
-/**
- * # TopNavbar - Application Header Organism
- *
- * ## 🚨 GRID SYSTEM INTEGRATION
- *
- * Este componente está diseñado para integrarse con el sistema de grid dinámico:
- * - **Con Sidebar**: Ocupa 10 columnas del content area
- * - **Sin Sidebar**: Ocupa 12 columnas completas
- * - **Responsive**: Se adapta automáticamente al estado del sidebar
- *
- * ### Features
- * - **Hamburger Menu**: Toggle para mostrar/ocultar sidebar completamente
- * - **Notifications Area**: Extensible para múltiples iconos y menús futuros
- * - **User Profile Dropdown**: Avatar con menú desplegable completo
- * - **Custom Menu Options**: Opciones de menú personalizables con iconos
- * - **User Info Display**: Nombre, email y rol en el header del menú
- * - **Dynamic Layout**: Se adapta de 10 a 12 columnas según estado del sidebar
- * - **Badge System**: Notificaciones con contadores visuales
- * - **Accessibility**: ARIA labels y navegación por teclado
- *
- * ### Grid Usage
- * ```tsx
- * <Grid cols={12} margin>
- *   {!sidebarCollapsed && (
- *     <GridItem span={{ mobile: 12, desktop: 2 }}>
- *       <Sidebar />
- *     </GridItem>
- *   )}
- *   <GridItem span={{
- *     mobile: 12,
- *     desktop: sidebarCollapsed ? 12 : 10
- *   }}>
- *     <TopNavbar
- *       sidebarCollapsed={sidebarCollapsed}
- *       onToggleSidebar={toggleSidebar}
- *       userProfile={userProfile}
- *       notifications={notifications}
- *     />
- *     <MainContent />
- *   </GridItem>
- * </Grid>
- * ```
- *
- * @example
- * ```tsx
- * // Basic usage with sidebar integration and custom menu
- * <TopNavbar
- *   sidebarCollapsed={false}
- *   onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
- *   userProfile={{
- *     name: "Ana Rodríguez",
- *     email: "ana@mantaseguros.com",
- *     role: "Administrator",
- *     menuOptions: [
- *       {
- *         id: "profile",
- *         label: "Mi perfil",
- *         icon: <UserIcon className="w-4 h-4" />,
- *         onClick: () => navigate('/profile')
- *       },
- *       {
- *         id: "settings",
- *         label: "Configuración",
- *         icon: <SettingIcon className="w-4 h-4" />,
- *         onClick: () => navigate('/settings')
- *       },
- *       {
- *         id: "logout",
- *         label: "Cerrar sesión",
- *         separator: true,
- *         onClick: () => handleLogout()
- *       }
- *     ]
- *   }}
- *   notifications={[
- *     {
- *       id: "notifications",
- *       badge: "3",
- *       onClick: () => showNotifications()
- *     }
- *   ]}
- *   onUserMenuClick={(action) => handleUserAction(action)}
- * />
- * ```
- */
-declare const TopNavbar: React__default.ForwardRefExoticComponent<TopNavbarProps & React__default.RefAttributes<HTMLDivElement>>;
-
 interface AuthLayoutProps {
     children: ReactNode;
 }
@@ -354,4 +85,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
 }
 
-export { AuthLayout, type BrandInfo, type FooterMenuItem, type IconProps, type MainNavigationItem, Modal, type NotificationItem, Sidebar, type SidebarProps, type Size, type SubNavigationItem, ThemeProvider, TopNavbar, type TopNavbarProps, type UserMenuOption, type UserProfile, useTheme };
+export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };

package/dist/index.d.ts

@@ -11,7 +11,7 @@ export { Breakpoint, ColumnSpan, ContainerSize, GridGap, GridSpec, breakpoints,
 export { IconAnimation, IconCategory, IconColor, IconSize, IconState, IconVariant, defaultIconConfig, iconAnimations, iconCategories, iconColors, iconSizeClasses, iconSizes, iconStates, iconTheme, iconTokens, iconVariants } from './tokens/icons.js';
 export { ButtonColor, ButtonSize, ButtonState, ButtonTokenProps, ButtonVariant, buttonAnimations, buttonBaseClasses, buttonColors, buttonIconClasses, buttonLoadingClasses, buttonSizeClasses, buttonSizes, buttonStates, buttonTheme, buttonTokens, buttonVariantClasses, buttonVariants, defaultButtonConfig, getButtonIconSize, getButtonSizeClasses, getButtonVariantClasses, loadingSpinnerSVG } from './tokens/buttons.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export { classNames } from './utils/classNames.js';
 export { cn } from './utils/cn.js';
 export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.js';
@@ -34,6 +34,8 @@ export { Dropdown, DropdownProps } from './molecules/dropdown/index.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.js';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.js';
 export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.js';
+export { BrandInfo, FooterMenuItem, MainNavigationItem, Sidebar, SidebarProps, SubNavigationItem } from './organisms/sidebar/index.js';
+export { NotificationItem, TopNavbar, TopNavbarProps, UserMenuOption, UserProfile } from './organisms/topnavbar/index.js';
 export { useModal } from './hooks/useModal.js';
 import 'clsx';
 import 'class-variance-authority/types';
@@ -72,277 +74,6 @@ interface ModalProps {
 }
 declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
-/**
- * Navigation item interface for main menu items
- */
-interface MainNavigationItem {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    path: string;
-    badge?: string | number;
-    subItems?: SubNavigationItem[];
-}
-/**
- * Navigation item interface for submenu items
- */
-interface SubNavigationItem {
-    id: string;
-    label: string;
-    path: string;
-    badge?: string | number;
-}
-/**
- * Footer menu item interface
- */
-interface FooterMenuItem {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    path: string;
-    badge?: string | number;
-}
-/**
- * Brand information interface
- */
-interface BrandInfo {
-    logo?: React__default.ReactNode;
-    name: string;
-    tagline?: string;
-}
-/**
- * Sidebar component props
- */
-interface SidebarProps {
-    /** Brand information displayed at the top */
-    brand: BrandInfo;
-    /** Main navigation items with optional submenus */
-    mainNavigation: MainNavigationItem[];
-    /** Footer menu items (optional) */
-    footerMenu?: FooterMenuItem[];
-    /** Whether to show footer menu */
-    showFooterMenu?: boolean;
-    /** Current active path */
-    currentPath?: string;
-    /** Whether the sidebar is collapsed */
-    collapsed?: boolean;
-    /** Callback when navigation item is clicked */
-    onNavigate?: (path: string, item: MainNavigationItem | SubNavigationItem | FooterMenuItem) => void;
-    /** Callback when collapse toggle is clicked */
-    onToggleCollapse?: () => void;
-    /** Custom className */
-    className?: string;
-    /** Data test id for testing */
-    'data-testid'?: string;
-}
-/**
- * # Sidebar - Navigation Organism
- *
- * ## 🚨 GRID SYSTEM COMPLIANCE
- *
- * Este componente está diseñado para ocupar **exactamente 2 columnas** en el grid system del Raya Design System.
- * Debe usarse dentro de un Grid container para mantener la consistencia de layouts.
- *
- * ### Features
- * - **Fixed Width**: Ocupa exactamente 2 columnas del sistema de grid (max-width: 200px)
- * - **Main Navigation**: Elementos principales con iconos opcionales (sin chevron, sin fondo cuando submenu activo)
- * - **Submenus**: Subitems con RightIcon, ancho completo respetando posición
- * - **Clean Active States**: Solo el item directamente seleccionado tiene fondo oscuro
- * - **Footer Menu**: Menu inferior opcional (configurable)
- * - **Dynamic Content**: Navegación completamente dinámica via props
- * - **Real Icons**: Usa iconos de la librería @grupor5/raya-icons (NO emojis)
- * - **Smart Spacing**: Spacing optimizado entre texto y badges
- * - **Text Ellipsis**: Texto se trunca con ellipsis si excede el ancho disponible
- * - **Overflow Control**: Sin desbordamiento horizontal, respeta límites del grid
- * - **Brand Display**: Logo y información de marca
- * - **Collapsible**: Opción de colapsar para ahorrar espacio
- * - **Accessibility**: ARIA labels y navegación por teclado
- *
- * ### Grid Usage
- * ```tsx
- * <Grid cols={12} margin>
- *   <GridItem span={{ mobile: 12, desktop: 2 }}>
- *     <Sidebar {...props} />
- *   </GridItem>
- *   <GridItem span={{ mobile: 12, desktop: 10 }}>
- *     <MainContent />
- *   </GridItem>
- * </Grid>
- * ```
- *
- * @example
- * ```tsx
- * // Import icons from raya-icons library
- * import { HomeIcon } from '@grupor5/raya-icons/icons/HomeIcon';
- * import { CategoryIcon } from '@grupor5/raya-icons/icons/CategoryIcon';
- * import { DocumentIcon } from '@grupor5/raya-icons/icons/DocumentIcon';
- * import { SettingIcon } from '@grupor5/raya-icons/icons/SettingIcon';
- *
- * // Sidebar with main navigation and submenus
- * <Sidebar
- *   brand={{ name: "Manta Seguros" }}
- *   mainNavigation={[
- *     {
- *       id: "dashboard",
- *       label: "Dashboard",
- *       icon: <HomeIcon className="w-5 h-5" />,
- *       path: "/dashboard"
- *     },
- *     {
- *       id: "products",
- *       label: "Productos",
- *       icon: <CategoryIcon className="w-5 h-5" />,
- *       path: "/products",
- *       subItems: [
- *         { id: "tables", label: "Table's name", path: "/products/tables" }
- *       ]
- *     },
- *     {
- *       id: "policies",
- *       label: "Pólizas",
- *       icon: <DocumentIcon className="w-5 h-5" />,
- *       path: "/policies",
- *       subItems: [
- *         { id: "quote", label: "Cotizar", path: "/policies/quote" },
- *         { id: "issue", label: "Emitir", path: "/policies/issue" },
- *         { id: "modify", label: "Modificar", path: "/policies/modify" }
- *       ]
- *     }
- *   ]}
- *   footerMenu={[
- *     { id: "settings", label: "Configuración", icon: <SettingIcon className="w-5 h-5" />, path: "/settings" }
- *   ]}
- *   showFooterMenu={true}
- *   currentPath="/products/tables"
- *   onNavigate={(path, item) => navigate(path)}
- * />
- * ```
- */
-declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface NotificationItem {
-    id: string;
-    icon?: React__default.ReactNode;
-    badge?: string | number;
-    onClick?: () => void;
-}
-interface UserMenuOption {
-    id: string;
-    label: string;
-    icon?: React__default.ReactNode;
-    onClick?: () => void;
-    separator?: boolean;
-}
-interface UserProfile {
-    name: string;
-    email?: string;
-    avatar?: string;
-    role?: string;
-    menuOptions?: UserMenuOption[];
-}
-interface TopNavbarProps {
-    /** Whether the sidebar is collapsed/hidden */
-    sidebarCollapsed?: boolean;
-    /** Callback when hamburger menu is clicked */
-    onToggleSidebar?: () => void;
-    /** Notification items array (extensible for future menus) */
-    notifications?: NotificationItem[];
-    /** User profile information */
-    userProfile: UserProfile;
-    /** Callback when user menu actions are triggered */
-    onUserMenuClick?: (action: string) => void;
-    /** Custom className */
-    className?: string;
-    /** Data test id for testing */
-    'data-testid'?: string;
-}
-/**
- * # TopNavbar - Application Header Organism
- *
- * ## 🚨 GRID SYSTEM INTEGRATION
- *
- * Este componente está diseñado para integrarse con el sistema de grid dinámico:
- * - **Con Sidebar**: Ocupa 10 columnas del content area
- * - **Sin Sidebar**: Ocupa 12 columnas completas
- * - **Responsive**: Se adapta automáticamente al estado del sidebar
- *
- * ### Features
- * - **Hamburger Menu**: Toggle para mostrar/ocultar sidebar completamente
- * - **Notifications Area**: Extensible para múltiples iconos y menús futuros
- * - **User Profile Dropdown**: Avatar con menú desplegable completo
- * - **Custom Menu Options**: Opciones de menú personalizables con iconos
- * - **User Info Display**: Nombre, email y rol en el header del menú
- * - **Dynamic Layout**: Se adapta de 10 a 12 columnas según estado del sidebar
- * - **Badge System**: Notificaciones con contadores visuales
- * - **Accessibility**: ARIA labels y navegación por teclado
- *
- * ### Grid Usage
- * ```tsx
- * <Grid cols={12} margin>
- *   {!sidebarCollapsed && (
- *     <GridItem span={{ mobile: 12, desktop: 2 }}>
- *       <Sidebar />
- *     </GridItem>
- *   )}
- *   <GridItem span={{
- *     mobile: 12,
- *     desktop: sidebarCollapsed ? 12 : 10
- *   }}>
- *     <TopNavbar
- *       sidebarCollapsed={sidebarCollapsed}
- *       onToggleSidebar={toggleSidebar}
- *       userProfile={userProfile}
- *       notifications={notifications}
- *     />
- *     <MainContent />
- *   </GridItem>
- * </Grid>
- * ```
- *
- * @example
- * ```tsx
- * // Basic usage with sidebar integration and custom menu
- * <TopNavbar
- *   sidebarCollapsed={false}
- *   onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
- *   userProfile={{
- *     name: "Ana Rodríguez",
- *     email: "ana@mantaseguros.com",
- *     role: "Administrator",
- *     menuOptions: [
- *       {
- *         id: "profile",
- *         label: "Mi perfil",
- *         icon: <UserIcon className="w-4 h-4" />,
- *         onClick: () => navigate('/profile')
- *       },
- *       {
- *         id: "settings",
- *         label: "Configuración",
- *         icon: <SettingIcon className="w-4 h-4" />,
- *         onClick: () => navigate('/settings')
- *       },
- *       {
- *         id: "logout",
- *         label: "Cerrar sesión",
- *         separator: true,
- *         onClick: () => handleLogout()
- *       }
- *     ]
- *   }}
- *   notifications={[
- *     {
- *       id: "notifications",
- *       badge: "3",
- *       onClick: () => showNotifications()
- *     }
- *   ]}
- *   onUserMenuClick={(action) => handleUserAction(action)}
- * />
- * ```
- */
-declare const TopNavbar: React__default.ForwardRefExoticComponent<TopNavbarProps & React__default.RefAttributes<HTMLDivElement>>;
-
 interface AuthLayoutProps {
     children: ReactNode;
 }
@@ -354,4 +85,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
 }
 
-export { AuthLayout, type BrandInfo, type FooterMenuItem, type IconProps, type MainNavigationItem, Modal, type NotificationItem, Sidebar, type SidebarProps, type Size, type SubNavigationItem, ThemeProvider, TopNavbar, type TopNavbarProps, type UserMenuOption, type UserProfile, useTheme };
+export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };