siesa-ui-kit 1.0.5 → 1.0.7

package/dist/components/NavigationRailTypes/NavigationRailTypes.d.ts

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { NavigationRailTypesProps } from './NavigationRailTypes.types';
+/**
+ * Componente NavigationRailTypes del sistema de diseño Siesa
+ *
+ * Barra de navegación lateral que permite dos modos visuales:
+ * - **Collapsed (Colapsado)**: 80px width, solo iconos con botón de búsqueda
+ * - **Expanded (Expandido)**: 215px width, con labels y búsqueda integrada
+ *
+ * **Características:**
+ * - Dos modos: collapsed e expanded (toggle con botón "Colapsar")
+ * - Soporta items con badges de notificación
+ * - Items colapsables para agrupar navegación relacionada
+ * - Botón "Recientes" en footer
+ * - Búsqueda integrada (solo en modo expanded)
+ * - Dark mode completo
+ * - Focus rings adaptativos
+ *
+ * **Especificaciones de Figma:**
+ * - Collapsed: 80px width, items con height 44px + gap 12px
+ * - Expanded: 215px width, items reutilizan DropdownItemCollapsible
+ * - Icono search: 16x16px, azul (#0e79fd)
+ * - Borde derecho: 1px solid #e4e4e7 (collapsed)
+ * - Borde izquierdo: 1px solid #e4e4e7 (expanded)
+ * - Height total: 900px (scroll si necesario)
+ *
+ * **Estructura:**
+ * 1. Header (Search en expanded) - altura variable
+ * 2. Menu & Destinations - flex 1 con items scrollables
+ * 3. Footer - Actions con divider y botones
+ *
+ * **Estados de Items:**
+ * - `default`: Text color content-primary
+ * - `hover`: Fondo hover-overlay, icon color content-custom-primary
+ * - `active`: Fondo custom-primary, text color custom-primary
+ * - `disabled`: Opacity 50%, sin interacción
+ *
+ * **Colores (Light Mode):**
+ * - Background: background-primary (#ffffff)
+ * - Borders: border-primary (#e4e4e7)
+ * - Text: content-primary (#18181b)
+ * - Icons: content-secondary (#a1a1aa)
+ * - Icon hover: content-custom-primary (#0e79fd)
+ * - Divider: border-primary (#e4e4e7)
+ * - Search input: bg-primary, border-primary, placeholder: content-tertiary
+ *
+ * **Colores (Dark Mode):**
+ * - Background: background-primary/dark (#09090b)
+ * - Borders: border-primary/dark (#3f3f46)
+ * - Text: content-primary/dark (#fafafa)
+ * - Icons: content-secondary/dark (#a1a1aa)
+ * - Icon hover: content-custom-primary/dark (#bfe2fe)
+ * - Divider: border-primary/dark (#3f3f46)
+ *
+ * **Tipografía:**
+ * - Items labels: Paragraph/Small (14px, Regular, line-height 20px)
+ * - Heading: Paragraph/Tiny (12px, Regular, line-height 16px) - si aplica
+ * - Button labels: Label Small (14px, Bold)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado (gap-3, px-4, py-2, etc)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
+ *
+ * @example
+ * ```tsx
+ * const navItems: NavigationRailItem[] = [
+ *   {
+ *     id: 'home',
+ *     label: 'Home',
+ *     icon: <HomeIcon />,
+ *     active: true,
+ *     onClick: () => navigate('/home'),
+ *   },
+ *   {
+ *     id: 'users',
+ *     label: 'Users',
+ *     icon: <UsersIcon />,
+ *     badge: true,
+ *     onClick: () => navigate('/users'),
+ *   },
+ * ];
+ *
+ * const [isCollapsed, setIsCollapsed] = useState(true);
+ *
+ * <NavigationRailTypes
+ *   collapsed={isCollapsed}
+ *   items={navItems}
+ *   showRecentButton={true}
+ *   onCollapsedChange={setIsCollapsed}
+ *   onItemClick={(index, item) => console.log('Selected:', item.id)}
+ * />
+ * ```
+ *
+ * @see NavigationRailTypes.types.ts - Props e interfaces
+ */
+export declare const NavigationRailTypes: React.ForwardRefExoticComponent<NavigationRailTypesProps & React.RefAttributes<HTMLDivElement>>;
+export default NavigationRailTypes;
+//# sourceMappingURL=NavigationRailTypes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailTypes.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailTypes/NavigationRailTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,wBAAwB,EAAsB,MAAM,6BAA6B,CAAC;AAMhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,eAAO,MAAM,mBAAmB,iGAgR/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react';
+/**
+ * Props del componente NavigationRailTypes
+ *
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=6135-36219
+ */
+export interface NavigationRailTypesProps {
+    /**
+     * Determina si el rail está colapsado (iconos solo) o expandido (con labels)
+     * - `true`: Modo colapsado (80px width, solo iconos)
+     * - `false`: Modo expandido (215px width, con labels)
+     * @default true
+     */
+    collapsed?: boolean;
+    /**
+     * Items de navegación a mostrar en la barra
+     * Se muestran en modo comprimido (iconos) o expandido (con descripción)
+     */
+    items?: NavigationRailItem[];
+    /**
+     * Si mostrar el botón "Recientes" en el footer
+     * @default true
+     */
+    showRecentButton?: boolean;
+    /**
+     * Callback cuando el estado collapsed cambia
+     * Útil para sincronizar con estado global
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Callback cuando se clickea un item
+     * @param index - índice del item clickeado
+     * @param item - datos del item
+     */
+    onItemClick?: (index: number, item: NavigationRailItem) => void;
+    /**
+     * Classes CSS adicionales
+     */
+    className?: string;
+}
+/**
+ * Props para cada item de navegación en el rail
+ */
+export interface NavigationRailItem {
+    /**
+     * Identificador único del item
+     */
+    id: string;
+    /**
+     * Etiqueta del item (visible en modo expandido)
+     */
+    label: string;
+    /**
+     * Icono a mostrar (16x16px recomendado)
+     */
+    icon: ReactNode;
+    /**
+     * Si el item está activo/seleccionado
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Si el item está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback cuando se hace click en el item
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * URL para navigation (si se usa como link)
+     */
+    href?: string;
+    /**
+     * Atributos ARIA para accesibilidad
+     */
+    ariaLabel?: string;
+    /**
+     * Badge de notificación (dot rojo pequeño)
+     */
+    badge?: boolean;
+    /**
+     * Contador de notificaciones (99+ para >99)
+     */
+    badgeCount?: number;
+    /**
+     * Color del badge
+     * @default 'red'
+     */
+    badgeColor?: 'red' | 'blue' | 'green' | 'yellow' | 'orange';
+}
+/**
+ * Props para el item colapsable (reutiliza DropdownItemCollapsible)
+ * Solo se usa en modo expandido
+ */
+export interface NavigationRailCollapsibleItem extends NavigationRailItem {
+    /**
+     * Items anidados (solo en modo expandido)
+     */
+    children?: NavigationRailItem[];
+    /**
+     * Si el item está expandido inicialmente
+     */
+    defaultOpen?: boolean;
+    /**
+     * Si el item es colapsable
+     */
+    isCollapsible?: boolean;
+}
+//# sourceMappingURL=NavigationRailTypes.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationRailTypes.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailTypes/NavigationRailTypes.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE3D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC7D;AAED;;;GAGG;AACH,MAAM,WAAW,6BAA8B,SAAQ,kBAAkB;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAEhC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+/**
+ * Icono Chevron Right (apunta hacia la derecha)
+ * Usado en el botón de collapse
+ * Tamaño recomendado: 16x16px
+ */
+export declare const ChevronRightIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Chevron Left (apunta hacia la izquierda)
+ * Usado en el botón de expand
+ * Tamaño recomendado: 16x16px
+ */
+export declare const ChevronLeftIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Clock (reloj)
+ * Usado en el botón "Recientes"
+ * Tamaño recomendado: 16x16px
+ */
+export declare const ClockIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Magnifying Glass (búsqueda)
+ * Usado en el botón de búsqueda
+ * Tamaño recomendado: 16x16px
+ */
+export declare const MagnifyingGlassIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Home
+ * Ejemplo para items de navegación
+ * Tamaño recomendado: 16x16px
+ */
+export declare const HomeIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Users
+ * Ejemplo para items de navegación
+ * Tamaño recomendado: 16x16px
+ */
+export declare const UsersIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Settings
+ * Ejemplo para items de navegación
+ * Tamaño recomendado: 16x16px
+ */
+export declare const SettingsIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailTypes/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAY7D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAY5D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAatD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAahE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAarD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAetD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAazD,CAAC"}

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

@@ -0,0 +1,4 @@
+export { NavigationRailTypes } from './NavigationRailTypes';
+export { default } from './NavigationRailTypes';
+export type { NavigationRailTypesProps, NavigationRailItem, NavigationRailCollapsibleItem, } from './NavigationRailTypes.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationRailTypes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EACV,wBAAwB,EACxB,kBAAkB,EAClB,6BAA6B,GAC9B,MAAM,6BAA6B,CAAC"}

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { NotificationProps } from './Notification.types';
+/**
+ * Componente Notification del sistema de diseño Siesa
+ *
+ * Badge de notificación para indicar alertas, mensajes o notificaciones pendientes.
+ * Puede mostrar un punto simple o un contador numérico con límite automático a 99+.
+ *
+ * **Especificaciones de Figma:**
+ * - Badge con número: 27px × 13px (aprox), Label/XXSmall (10px Bold, line-height 12px)
+ * - Badge simple (dot): 13px × 13px
+ * - Color: `content-extensions-red` (#b91c1c) por defecto
+ * - Border radius: Pill (rounded-full)
+ * - Padding: 4px horizontal
+ *
+ * **Variantes:**
+ * - Sin count: Muestra punto circular (dot)
+ * - Con count: Muestra badge con número (máximo 99+)
+ *
+ * **Uso típico:**
+ * - Como overlay en iconos o botones
+ * - En elementos de menú o navegación
+ * - Standalone para indicar estado
+ *
+ * @see docs/colors.md - Sistema de colores (token content-extensions-red)
+ * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)
+ * @see src/components/Button/Button.tsx - Referencia de badges en botones
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651
+ *
+ * @example
+ * ```tsx
+ * // Badge simple (punto)
+ * <Notification />
+ *
+ * // Badge con número
+ * <Notification count={5} />
+ *
+ * // Badge con muchos (muestra 99+)
+ * <Notification count={150} />
+ *
+ * // Con color personalizado
+ * <Notification count={3} color="green" />
+ *
+ * // Como overlay en botón
+ * <button className="relative">
+ *   <BellIcon />
+ *   <Notification count={5} className="absolute -top-1 -right-1" />
+ * </button>
+ * ```
+ */
+export declare const Notification: React.FC<NotificationProps>;
+//# sourceMappingURL=Notification.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6FpD,CAAC"}

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

@@ -0,0 +1,138 @@
+/**
+ * Props del componente Notification
+ *
+ * Badge de notificación para mostrar alertas, mensajes o notificaciones pendientes.
+ * Alineado pixel-perfect con el diseño de Figma.
+ *
+ * @see src/components/Notification/Notification.tsx - Implementación del componente
+ * @see docs/colors.md - Sistema de colores (token content-extensions-red)
+ * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651
+ *
+ * @example
+ * ```tsx
+ * // Badge simple (punto)
+ * const simpleProps: NotificationProps = {};
+ *
+ * // Badge con número
+ * const withCountProps: NotificationProps = {
+ *   count: 5,
+ *   color: 'red',
+ * };
+ *
+ * // Como overlay
+ * <button className="relative">
+ *   <Icon />
+ *   <Notification count={3} className="absolute -top-1 -right-1" />
+ * </button>
+ * ```
+ */
+export interface NotificationProps {
+    /**
+     * Número de notificaciones a mostrar
+     *
+     * **Comportamiento:**
+     * - `undefined`: Muestra badge simple (punto rojo de 8px)
+     * - `1-99`: Muestra el número exacto en el badge
+     * - `100+`: Muestra "99+" en el badge
+     * - `0` o menor: Muestra badge simple (punto)
+     *
+     * **Nota:** El badge ajusta su ancho automáticamente según el contenido,
+     * con un mínimo de 16px y padding de 4px horizontal.
+     *
+     * @example
+     * ```tsx
+     * <Notification />              // Punto rojo simple
+     * <Notification count={5} />    // Muestra "5"
+     * <Notification count={99} />   // Muestra "99"
+     * <Notification count={150} />  // Muestra "99+"
+     * <Notification count={0} />    // Punto rojo simple
+     * ```
+     *
+     * @see src/components/Notification/Notification.tsx:93-123 - Renderizado con número
+     */
+    count?: number;
+    /**
+     * Color del badge
+     *
+     * Define el color de fondo del badge. Permite personalizar según el contexto
+     * o tipo de notificación.
+     *
+     * **Colores disponibles:**
+     * - `red` (default): Notificaciones de error, alertas críticas
+     * - `orange`: Advertencias importantes
+     * - `yellow`: Avisos, atención requerida
+     * - `green`: Notificaciones positivas, éxito
+     * - `blue`: Información general
+     * - `purple`: Notificaciones especiales o premium
+     * - `zinc`: Notificaciones neutras
+     * - Y 15+ colores adicionales de Tailwind
+     *
+     * **Nota:** El texto siempre será blanco para mantener contraste adecuado.
+     *
+     * @default 'red'
+     *
+     * @example
+     * ```tsx
+     * <Notification count={5} color="red" />      // Error/Crítico
+     * <Notification count={2} color="orange" />   // Advertencia
+     * <Notification count={8} color="green" />    // Éxito
+     * <Notification count={3} color="blue" />     // Info
+     * <Notification count={1} color="purple" />   // Especial
+     * ```
+     *
+     * @see src/components/Button/Button.tsx:220-244 - Referencia de colores
+     */
+    color?: 'zinc' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Clases CSS adicionales para posicionamiento o personalización
+     *
+     * Útil para posicionar el badge como overlay usando absolute positioning.
+     *
+     * **Advertencia:** Evita sobrescribir tamaños, colores o formas core del badge.
+     * Usa solo para posicionamiento, márgenes o efectos adicionales.
+     *
+     * @example
+     * ```tsx
+     * // Como overlay en botón
+     * <button className="relative">
+     *   <BellIcon />
+     *   <Notification count={5} className="absolute -top-1 -right-1" />
+     * </button>
+     *
+     * // Con margen personalizado
+     * <Notification count={3} className="ml-2" />
+     *
+     * // Con sombra adicional
+     * <Notification count={7} className="shadow-lg" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Label de accesibilidad (ARIA) personalizado
+     *
+     * Si no se proporciona, se genera automáticamente:
+     * - Con count: "{count} notificación(es)"
+     * - Sin count: "Notificación pendiente"
+     *
+     * **Mejores prácticas:**
+     * - Describe el tipo de notificación si es específico
+     * - Incluye contexto relevante para screen readers
+     * - Mantén el texto conciso pero descriptivo
+     *
+     * @example
+     * ```tsx
+     * // Auto-generado (recomendado)
+     * <Notification count={5} />
+     * // → aria-label="5 notificaciones"
+     *
+     * // Personalizado
+     * <Notification count={3} ariaLabel="3 mensajes no leídos" />
+     * <Notification ariaLabel="Nueva alerta de seguridad" />
+     * ```
+     *
+     * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
+     */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=Notification.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GACjE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAClE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAEtF;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/{src/components/Notification/index.ts → dist/components/Notification/index.d.ts}

@@ -1,3 +1,3 @@
-// index.ts
-export { Notification } from './Notification';
-export type { NotificationProps } from './Notification.types';
+export { Notification } from './Notification';
+export type { NotificationProps } from './Notification.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/POSConvention/POSConvention.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { POSConventionProps } from './POSConvention.types';
+/**
+ * POSConvention - Componente de leyenda/convención para estados de mesas POS
+ *
+ * Muestra un indicador circular de color con su respectiva etiqueta según el diseño de Figma.
+ * Se usa típicamente para crear leyendas que explican el significado de colores en el sistema POS.
+ *
+ * **Colores según Figma (node-id: 4418-40139):**
+ *
+ * | Estado | Light Mode | Dark Mode |
+ * |--------|------------|-----------|
+ * | Available | #0e79fd (azul) | #93d1fd (azul claro) |
+ * | Occupied | #af460e (naranja) | #f5a927 (amarillo) |
+ * | Reserved | #7e22ce (morado) | #c084fc (morado claro) |
+ * | Out of Service | #3f3f46 (gris) | #a1a1aa (gris claro) |
+ *
+ * **Dimensiones según Figma:**
+ * - Icono: 16x16px (círculo con fill)
+ * - Texto: 12px (Paragraph/Tiny - text-xs)
+ * - Gap: 4px (gap-1)
+ * - Line-height: 16px (leading-4)
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Colores exactos de Figma para Light y Dark mode
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con aria-label
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Paragraph Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Indicador de disponible
+ * <POSConvention status="available" />
+ *
+ * // Indicador de ocupada
+ * <POSConvention status="occupied" />
+ *
+ * // Leyenda completa en contenedor
+ * <div className="p-5 rounded-lg border border-dashed border-primary-custom-300">
+ *   <div className="flex flex-col gap-9">
+ *     <POSConvention status="available" />
+ *     <POSConvention status="occupied" />
+ *     <POSConvention status="reserved" />
+ *     <POSConvention status="outOfService" />
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare const POSConvention: React.FC<POSConventionProps>;
+//# sourceMappingURL=POSConvention.d.ts.map

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

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

package/{src/components/POSConvention/POSConvention.types.ts → dist/components/POSConvention/POSConvention.types.d.ts}

@@ -1,38 +1,37 @@
-/**
- * Tipo para los estados de convención posibles en el sistema POS
- *
- * Colores según Figma:
- *
- * | Estado | Light Mode | Dark Mode |
- * |--------|------------|-----------|
- * | `available` | #0e79fd (azul) | #93d1fd (azul claro) |
- * | `occupied` | #af460e (naranja) | #f5a927 (amarillo) |
- * | `reserved` | #7e22ce (morado) | #c084fc (morado claro) |
- * | `outOfService` | #3f3f46 (gris) | #a1a1aa (gris claro) |
- */
-export type ConventionStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
-
-/**
- * Props del componente POSConvention
- *
- * Componente de leyenda para mostrar el estado de las mesas en el sistema POS.
- * Muestra un indicador circular de color con su respectiva etiqueta.
- */
-export interface POSConventionProps {
-  /**
-   * Estado de la convención a mostrar
-   *
-   * - `available`: Disponible (Azul)
-   * - `occupied`: Ocupada (Naranja)
-   * - `reserved`: Reservada (Morado)
-   * - `outOfService`: F. de Servicio (Gris)
-   *
-   * @default 'available'
-   */
-  status?: ConventionStatus;
-
-  /**
-   * Clases CSS adicionales para el contenedor
-   */
-  className?: string;
-}
+/**
+ * Tipo para los estados de convención posibles en el sistema POS
+ *
+ * Colores según Figma:
+ *
+ * | Estado | Light Mode | Dark Mode |
+ * |--------|------------|-----------|
+ * | `available` | #0e79fd (azul) | #93d1fd (azul claro) |
+ * | `occupied` | #af460e (naranja) | #f5a927 (amarillo) |
+ * | `reserved` | #7e22ce (morado) | #c084fc (morado claro) |
+ * | `outOfService` | #3f3f46 (gris) | #a1a1aa (gris claro) |
+ */
+export type ConventionStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
+/**
+ * Props del componente POSConvention
+ *
+ * Componente de leyenda para mostrar el estado de las mesas en el sistema POS.
+ * Muestra un indicador circular de color con su respectiva etiqueta.
+ */
+export interface POSConventionProps {
+    /**
+     * Estado de la convención a mostrar
+     *
+     * - `available`: Disponible (Azul)
+     * - `occupied`: Ocupada (Naranja)
+     * - `reserved`: Reservada (Morado)
+     * - `outOfService`: F. de Servicio (Gris)
+     *
+     * @default 'available'
+     */
+    status?: ConventionStatus;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+}
+//# sourceMappingURL=POSConvention.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"POSConvention.types.d.ts","sourceRoot":"","sources":["../../../src/components/POSConvention/POSConvention.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * Icono de convención para POSConvention
+ *
+ * Círculo SVG de 16x16px con colores diferentes para Light y Dark mode.
+ * Basado en especificaciones de Figma:
+ * - Light mode: node-id 4418-40139
+ * - Dark mode: node-id 4418-40349
+ *
+ * Usa dos círculos superpuestos con clases CSS para alternar entre modos.
+ *
+ * @param lightColor - Color hexadecimal para Light mode
+ * @param darkColor - Color hexadecimal para Dark mode
+ * @param className - Clases CSS adicionales (opcional)
+ */
+export declare const ConventionIcon: React.FC<{
+    lightColor: string;
+    darkColor: string;
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/POSConvention/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAwBA,CAAC"}