@grupor5/raya 0.2.10 → 0.2.12

package/dist/atoms/badge/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 
@@ -8,7 +8,7 @@ declare const badgeVariants: (props?: ({
     shape?: "rounded" | "circular" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     visual?: "solid" | "dot" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 declare function Badge({ className, variant, size, visual, shape, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;

package/dist/atoms/badge/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 
@@ -8,7 +8,7 @@ declare const badgeVariants: (props?: ({
     shape?: "rounded" | "circular" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     visual?: "solid" | "dot" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 declare function Badge({ className, variant, size, visual, shape, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;

package/dist/atoms/label/index.d.mts

@@ -1,8 +1,8 @@
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
 
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_dist_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 
 export { Label };

package/dist/atoms/label/index.d.ts

@@ -1,8 +1,8 @@
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { VariantProps } from 'class-variance-authority';
 
-declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_dist_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 
 export { Label };

package/dist/atoms/tag/index.d.mts

@@ -1,10 +1,10 @@
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
     variant?: "default" | "success" | "warning" | "danger" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TagProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
     showBullet?: boolean;
     onClose?: () => void;

package/dist/atoms/tag/index.d.ts

@@ -1,10 +1,10 @@
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
     variant?: "default" | "success" | "warning" | "danger" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TagProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
     showBullet?: boolean;
     onClose?: () => void;

package/dist/atoms/typography/index.d.mts

@@ -1,10 +1,10 @@
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const typographyVariants: (props?: ({
     variant?: "display-l" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "subheading-lg" | "subheading-md" | "subheading-sm" | "body-bold-lg" | "body-bold-md" | "body-bold-sm" | "body-bold-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "caption-c1" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
 }

package/dist/atoms/typography/index.d.ts

@@ -1,10 +1,10 @@
-import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const typographyVariants: (props?: ({
     variant?: "display-l" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "subheading-lg" | "subheading-md" | "subheading-sm" | "body-bold-lg" | "body-bold-md" | "body-bold-sm" | "body-bold-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "caption-c1" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
 }

package/dist/index.d.mts

@@ -36,7 +36,7 @@ export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyl
 export { Grid, GridItem, GridItemProps, GridProps, ResponsiveValue } from './molecules/grid/index.mjs';
 export { useModal } from './hooks/useModal.mjs';
 import 'clsx';
-import 'class-variance-authority/dist/types';
+import 'class-variance-authority/types';
 import 'class-variance-authority';
 import '@radix-ui/react-checkbox';
 import '@radix-ui/react-label';
@@ -73,16 +73,34 @@ interface ModalProps {
 declare function Modal({ open, onClose, children }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Navigation item interface
+ * Navigation item interface for main menu items
  */
-interface NavigationItem {
+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;
-    children?: NavigationItem[];
-    isCollapsible?: boolean;
 }
 /**
  * Brand information interface
@@ -98,14 +116,18 @@ interface BrandInfo {
 interface SidebarProps {
     /** Brand information displayed at the top */
     brand: BrandInfo;
-    /** Navigation items */
-    navigation: NavigationItem[];
+    /** 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?: (item: NavigationItem) => void;
+    onNavigate?: (path: string, item: MainNavigationItem | SubNavigationItem | FooterMenuItem) => void;
     /** Callback when collapse toggle is clicked */
     onToggleCollapse?: () => void;
     /** Custom className */
@@ -114,17 +136,24 @@ interface SidebarProps {
     'data-testid'?: string;
 }
 /**
- * # Sidebar - Navigation Organismo
+ * # Sidebar - Navigation Organism
  *
  * ## 🚨 GRID SYSTEM COMPLIANCE
  *
- * Este componente está diseñado para ocupar **2 columnas** en el grid system del Raya Design System.
+ * 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
- * - **Grid Integration**: Ocupa exactamente 2 columnas del sistema de grid
- * - **Responsive Behavior**: Se adapta a diferentes breakpoints
- * - **Navigation System**: Soporte para navegación jerárquica y badges
+ * - **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
@@ -143,40 +172,176 @@ interface SidebarProps {
  *
  * @example
  * ```tsx
- * // Basic sidebar with navigation
+ * // 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" }}
- *   navigation={[
- *     { id: "dashboard", label: "Dashboard", icon: <HomeIcon />, path: "/" },
- *     { id: "products", label: "Productos", icon: <ProductIcon />, path: "/products" },
+ *   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" }
  *   ]}
- *   currentPath="/dashboard"
- *   onNavigate={(item) => navigate(item.path)}
+ *   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
- * // Sidebar with hierarchical navigation
- * <Sidebar
- *   brand={{ name: "Admin Panel", tagline: "Management System" }}
- *   navigation={[
+ * // 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: "products",
- *       label: "Productos",
- *       icon: <ProductIcon />,
- *       path: "/products",
- *       isCollapsible: true,
- *       children: [
- *         { id: "all-products", label: "Todos", path: "/products" },
- *         { id: "categories", label: "Categorías", path: "/products/categories" }
- *       ]
+ *       id: "notifications",
+ *       badge: "3",
+ *       onClick: () => showNotifications()
  *     }
  *   ]}
+ *   onUserMenuClick={(action) => handleUserAction(action)}
  * />
  * ```
  */
-declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const TopNavbar: React__default.ForwardRefExoticComponent<TopNavbarProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AuthLayoutProps {
     children: ReactNode;
@@ -189,4 +354,4 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
     color?: string;
 }
 
-export { AuthLayout, type BrandInfo, type IconProps, Modal, type NavigationItem, Sidebar, type SidebarProps, type Size, ThemeProvider, useTheme };
+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 };