siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Navbar/Navbar.types.ts

@@ -1,219 +0,0 @@
-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;
-}

package/src/components/Navbar/README.md

@@ -1,279 +0,0 @@
-# Navbar
-
-Barra de navegación principal del sistema de diseño Siesa UI Kit con soporte completo para responsive design y dark mode.
-
-## Características
-
-- **4 Variantes**: `responsive` (default), `desktop`, `tablet`, `mobile`
-- **Dark Mode Completo**: Todos los elementos con tokens adaptativos
-- **Tokens del Sistema**: NO colores hardcodeados
-- **Focus Rings Adaptativos**: Para accesibilidad en light y dark mode
-- **Logo Personalizable**: Acepta componente custom o usa logo por defecto
-- **Badge de Ambiente**: Usa el componente Badge con color yellow del sistema
-- **Notificaciones**: Badges con token `error-content` para consistencia
-- **Dropdown de Usuario**: Avatar con nombre y email
-- **Logo Siesa Trailing**: Opcional, solo en desktop
-- **TypeScript Estricto**: Tipado completo con interfaces
-- **Accesibilidad**: ARIA labels en todos los botones
-- **Handlers de Eventos**: Callbacks para navegación, búsqueda, carrito y notificaciones
-
-## Especificaciones de Figma
-
-| Variante | Tamaño | Elementos |
-|----------|--------|-----------|
-| **Desktop** | 1360x64px | Botón nav, Logo business, Siesa logo, Nombre producto, Badge, Botones, Dropdown, Siesa logo trailing |
-| **Tablet** | 1024x64px | Similar a desktop pero logos más pequeños, sin Siesa trailing |
-| **Mobile** | 428x40px | Solo Siesa icono (30x30), Badge "Pruebas", Botón búsqueda, Avatar circular |
-
-## Instalación
-
-```tsx
-import { Navbar } from '@/components/Navbar';
-```
-
-## Uso Básico
-
-```tsx
-<Navbar
-  productName="Mi Aplicación"
-  environmentBadge="Ambiente de Pruebas"
-  userDropdown={{
-    avatar: "/path/to/avatar.jpg",
-    name: "Juan Pérez",
-    email: "juan@ejemplo.com",
-  }}
-/>
-```
-
-## Con Handlers de Eventos
-
-```tsx
-<Navbar
-  productName="Portal Empresarial"
-  environmentBadge="Ambiente de Pruebas"
-  userDropdown={{
-    avatar: "/path/to/avatar.jpg",
-    name: "María García",
-    email: "maria@miempresa.com",
-    onMenuClick: () => openUserMenu(),
-  }}
-  notifications={{
-    cart: 15,
-    bell: true,
-  }}
-  onNavigationClick={() => router.back()}
-  onSearchClick={() => openSearch()}
-  onCartClick={() => openCart()}
-  onNotificationsClick={() => openNotifications()}
-/>
-```
-
-## Variantes de Dispositivo
-
-### Desktop
-
-```tsx
-<Navbar
-  variant="desktop"
-  productName="Sistema de Gestión"
-  showTrailingSiesaLogo={true}
-  // ... resto de props
-/>
-```
-
-### Tablet
-
-```tsx
-<Navbar
-  variant="tablet"
-  productName="Sistema de Gestión"
-  // ... resto de props
-/>
-```
-
-### Mobile
-
-```tsx
-<Navbar
-  variant="mobile"
-  environmentBadge="Ambiente de Pruebas"
-  // productName se ignora en mobile
-  // ... resto de props
-/>
-```
-
-## Props
-
-### NavbarProps
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `logo` | `ReactNode` | Logo business | Logo del negocio/cliente (solo desktop/tablet) |
-| `siesaLogo` | `ReactNode` | Logo Siesa | Logo de Siesa personalizado |
-| `productName` | `string` | `'Nombre Producto'` | Nombre del producto (solo desktop/tablet) |
-| `environmentBadge` | `string` | `undefined` | Texto del badge de ambiente |
-| `userDropdown` | `UserDropdownProps` | `undefined` | Datos del dropdown de usuario |
-| `actions` | `ReactNode` | `undefined` | Elementos adicionales en trailing |
-| `notifications` | `NotificationsProps` | `undefined` | Configuración de badges |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `variant` | `NavbarVariant` | `'responsive'` | Modo de visualización |
-| `hideActionButtons` | `boolean` | `false` | Ocultar botones de acción |
-| `leadingAction` | `ReactNode` | `undefined` | Elemento leading personalizado |
-| `showTrailingSiesaLogo` | `boolean` | `true` | Mostrar Siesa logo en trailing (solo desktop) |
-| `onNavigationClick` | `() => void` | `undefined` | Handler para botón de navegación |
-| `onSearchClick` | `() => void` | `undefined` | Handler para búsqueda (solo mobile) |
-| `onCartClick` | `() => void` | `undefined` | Handler para carrito |
-| `onNotificationsClick` | `() => void` | `undefined` | Handler para notificaciones |
-
-### UserDropdownProps
-
-```typescript
-interface UserDropdownProps {
-  avatar: string;         // URL del avatar (mínimo 80x80px para retina)
-  name: string;           // Nombre del usuario
-  email?: string;         // Email del usuario
-  role?: string;          // Rol (alternativa a email)
-  onMenuClick?: () => void; // Handler para click
-}
-```
-
-### NotificationsProps
-
-```typescript
-interface NotificationsProps {
-  cart?: number;    // Número de items (>99 muestra "+99")
-  bell?: boolean;   // Dot de notificación
-}
-```
-
-### NavbarVariant
-
-```typescript
-type NavbarVariant = 'responsive' | 'desktop' | 'tablet' | 'mobile';
-```
-
-## Dark Mode
-
-El componente se adapta automáticamente al dark mode usando la clase `.dark` en el elemento `<html>`.
-
-### Tokens de Color
-
-| Elemento | Light Token | Dark Token |
-|----------|-------------|------------|
-| **Fondo** | `bg-background-primary` | `dark:bg-dark-bg-primary` |
-| **Texto principal** | `text-content-primary` | `dark:text-dark-content-primary` |
-| **Texto secundario** | `text-content-secondary` | `dark:text-content-secondary` |
-| **Bordes divider** | `bg-border-primary` | `dark:bg-dark-border-primary` |
-| **Iconos acción** | `text-primary-custom-600` | `dark:text-primary-custom-600` |
-| **Hover buttons** | `hover:bg-background-secondary` | `dark:hover:bg-dark-bg-secondary` |
-| **Botón navegación** | `bg-primary-custom-600` | `dark:bg-dark-bg-inverse` |
-| **Badge notificación** | `bg-error-content` | `dark:bg-error-content` |
-| **Focus ring** | `focus:ring-primary-custom-400` | `dark:focus:ring-dark-border-custom` |
-| **Focus offset** | `focus:ring-offset-2` | `dark:focus:ring-offset-dark-bg-primary` |
-
-### Estados Interactivos
-
-Todos los botones incluyen:
-- **Hover**: Cambio de fondo adaptativo
-- **Active**: `scale-95` para feedback visual
-- **Focus**: Ring adaptativo con offset correcto
-- **Transiciones**: `transition-all duration-150`
-
-## Responsive Behavior
-
-| Elemento | Desktop (lg:) | Tablet (md:) | Mobile |
-|----------|---------------|--------------|--------|
-| **Altura** | 64px | 64px | 40px |
-| **Botón navegación** | Visible | Visible | Oculto |
-| **Business Logo** | 168x30px | 140x25px | Oculto |
-| **Siesa Logo Leading** | 120x30px | 100x25px | 30x30px (icono) |
-| **Nombre producto** | Visible | Visible | Oculto |
-| **Dividers** | Visibles | Visibles | Ocultos |
-| **Badge ambiente** | Texto completo | Texto completo | "Pruebas" |
-| **Botón búsqueda** | Oculto | Oculto | Visible |
-| **Avatar** | 40x40 rounded-md | 40x40 rounded-md | 32x32 rounded-full |
-| **Nombre/email** | Visibles | Visibles | Ocultos |
-| **Chevron** | Visible | Visible | Oculto |
-| **Siesa Logo Trailing** | Visible | Oculto | Oculto |
-
-## Mejores Prácticas
-
-### Hacer
-
-1. Usar la variante `responsive` (default) para adaptación automática
-2. Proporcionar siempre `userDropdown` para mostrar información del usuario
-3. Usar avatares de alta resolución (mínimo 80x80px)
-4. Mantener `productName` corto (idealmente <25 caracteres)
-5. Actualizar `notifications` dinámicamente
-6. Usar solo tokens del sistema para customización
-7. Testear estados de focus con teclado (Tab)
-8. Implementar handlers para interactividad
-
-### Evitar
-
-1. No forzar variantes a menos que sea necesario
-2. No usar textos muy largos en `productName`
-3. No olvidar `environmentBadge` en desarrollo/prueba
-4. No mezclar el navbar con otros headers
-5. No usar colores hardcodeados (hex)
-6. No omitir handlers para elementos interactivos
-
-## Archivos del Componente
-
-```
-src/components/Navbar/
-├── Navbar.tsx          # Componente principal
-├── Navbar.types.ts     # Tipos e interfaces
-├── Navbar.stories.tsx  # Stories de Storybook
-├── icons.tsx           # Iconos Heroicons Micro
-├── index.ts            # Exports
-└── README.md           # Documentación
-```
-
-## Referencias
-
-- **Figma**: [Navbar Component](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4278-18626&m=dev)
-- **Docs**:
-  - `docs/colors.md` - Sistema de colores
-  - `docs/typography.md` - Sistema tipográfico
-  - `docs/spacing.md` - Sistema de espaciado
-  - `docs/shadows.md` - Sistema de sombras
-  - `docs/dark-mode-guide.md` - Guía de dark mode
-
-## Changelog
-
-### Version 1.2.0 (2025-12-02) - Corrección Completa Siesa UI Kit Specialist
-
-**Nuevas características:**
-- Variante `tablet` añadida para soporte completo responsive
-- `showTrailingSiesaLogo` prop para controlar logo Siesa en trailing
-- Handlers de eventos: `onNavigationClick`, `onSearchClick`, `onCartClick`, `onNotificationsClick`
-- Tipos exportados: `NavbarVariant`, `UserDropdownProps`, `NotificationsProps`
-
-**Correcciones:**
-- Dark mode completo en todos los elementos con tokens del sistema
-- Focus rings adaptativos para light y dark mode
-- Botón de navegación con `shadow-button-inset` según Button de referencia
-- Badge de ambiente usa componente Badge correctamente
-- Hover states con tokens: `hover:bg-background-secondary` / `dark:hover:bg-dark-bg-secondary`
-- Fondo del navbar con tokens: `bg-background-primary` / `dark:bg-dark-bg-primary`
-
-**Mejoras:**
-- JSDoc completo con referencias `@see` a documentación
-- Stories actualizadas con ejemplos de todas las variantes
-- README actualizado con tabla de tokens y especificaciones
-
-### Version 1.1.0 (2025-11-19)
-- Corrección de colores hardcodeados
-- Añadidos focus rings adaptativos
-- Active states con scale-95
-
-### Version 1.0.0 (2025-11-18)
-- Componente inicial con soporte responsive
-- Dark mode básico
-- Badges de notificación
-
----
-
-**Mantenido por**: Equipo Siesa UI Kit
-**Última actualización**: 2025-12-02

package/src/components/Navbar/icons.tsx

@@ -1,102 +0,0 @@
-/**
- * Iconos para el componente Navbar
- * Basados en Heroicons Micro (16x16px)
- */
-
-export const ShoppingCartIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    width="16"
-    height="16"
-  >
-    <path d="M1.75 1.002a.75.75 0 1 0 0 1.5h1.035l1.38 5.514a2.75 2.75 0 0 0 2.658 2.048h5.355a2.75 2.75 0 0 0 2.658-2.048l.9-3.597a.75.75 0 0 0-.728-.919H4.655l-.22-.88A.75.75 0 0 0 3.71 2H1.75ZM5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM11.5 13a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" />
-  </svg>
-);
-
-export const BellIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    width="16"
-    height="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const MagnifyingGlassIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    width="16"
-    height="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const ChevronDownIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    width="16"
-    height="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const ExclamationTriangleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    width="16"
-    height="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 7.25a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);
-
-export const NotificationDot = () => (
-  <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="4" cy="4" r="4" fill="currentColor" />
-  </svg>
-);
-
-export const ArrowLeftStartOnRectangleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 16 16"
-    fill="currentColor"
-    width="16"
-    height="16"
-  >
-    <path
-      fillRule="evenodd"
-      d="M14 4.75A2.75 2.75 0 0 0 11.25 2h-3A2.75 2.75 0 0 0 5.5 4.75v.5a.75.75 0 0 0 1.5 0v-.5c0-.69.56-1.25 1.25-1.25h3c.69 0 1.25.56 1.25 1.25v6.5c0 .69-.56 1.25-1.25 1.25h-3c-.69 0-1.25-.56-1.25-1.25v-.5a.75.75 0 0 0-1.5 0v.5A2.75 2.75 0 0 0 8.25 14h3A2.75 2.75 0 0 0 14 11.25v-6.5Zm-9.47.47a.75.75 0 0 0-1.06 0L1.22 7.47a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06l-.97-.97h5.69a.75.75 0 0 0 0-1.5H3.56l.97-.97a.75.75 0 0 0 0-1.06Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);

package/src/components/Navbar/index.ts

@@ -1,8 +0,0 @@
-export { Navbar } from './Navbar';
-export type {
-  NavbarProps,
-  NavbarVariant,
-  UserDropdownProps,
-  NotificationsProps,
-} from './Navbar.types';
-export * from './icons';