siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Tabs/README.md

@@ -1,201 +1,201 @@
-# Tabs
-
-Componente de navegación por pestañas del sistema de diseño Siesa UI Kit.
-
-## Descripción
-
-El componente `Tabs` proporciona una interfaz de navegación horizontal que permite a los usuarios cambiar entre diferentes vistas o secciones de contenido. Está diseñado siguiendo las especificaciones de Figma con soporte completo para dark mode.
-
-## Características
-
-- ✅ Estados: Default, Hover, Focus, Active, Disabled
-- ✅ Soporte para iconos (Heroicons Micro 16x16)
-- ✅ Badge de notificación con contador
-- ✅ Dark mode completo
-- ✅ Modo controlado y no controlado
-- ✅ Accesibilidad con ARIA roles
-- ✅ TypeScript estricto
-
-## Instalación
-
-El componente está incluido en el Siesa UI Kit. Importa desde la carpeta de componentes:
-
-```tsx
-import { Tabs, Tab } from '@/components/Tabs';
-import type { TabItem } from '@/components/Tabs';
-```
-
-## Uso Básico
-
-### Modo No Controlado
-
-```tsx
-<Tabs
-  items={[
-    { id: 'inicio', label: 'Inicio' },
-    { id: 'perfil', label: 'Perfil' },
-    { id: 'configuracion', label: 'Configuración' },
-  ]}
-  defaultActiveId="inicio"
-/>
-```
-
-### Modo Controlado
-
-```tsx
-const [activeTab, setActiveTab] = useState('inicio');
-
-<Tabs
-  items={[
-    { id: 'inicio', label: 'Inicio' },
-    { id: 'perfil', label: 'Perfil' },
-    { id: 'configuracion', label: 'Configuración' },
-  ]}
-  activeId={activeTab}
-  onChange={setActiveTab}
-/>
-```
-
-### Con Iconos
-
-```tsx
-import { HomeIcon, UserIcon, CogIcon } from '@/components/Tabs';
-
-<Tabs
-  items={[
-    { id: 'inicio', label: 'Inicio', icon: <HomeIcon className="w-3 h-3" /> },
-    { id: 'perfil', label: 'Perfil', icon: <UserIcon className="w-3 h-3" /> },
-    { id: 'configuracion', label: 'Configuración', icon: <CogIcon className="w-3 h-3" /> },
-  ]}
-  activeId={activeTab}
-  onChange={setActiveTab}
-/>
-```
-
-### Con Badges de Notificación
-
-```tsx
-<Tabs
-  items={[
-    { id: 'mensajes', label: 'Mensajes', badge: 5 },
-    { id: 'notificaciones', label: 'Notificaciones', badge: 12 },
-    { id: 'tareas', label: 'Tareas' },
-  ]}
-  activeId={activeTab}
-  onChange={setActiveTab}
-/>
-```
-
-### Full Width
-
-```tsx
-<Tabs
-  items={[...]}
-  activeId={activeTab}
-  onChange={setActiveTab}
-  fullWidth
-/>
-```
-
-## Props
-
-### TabsProps (Contenedor)
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `items` | `TabItem[]` | **requerido** | Lista de tabs a mostrar |
-| `activeId` | `string` | - | ID del tab seleccionado (modo controlado) |
-| `defaultActiveId` | `string` | - | ID del tab inicial (modo no controlado) |
-| `onChange` | `(id: string) => void` | - | Callback al cambiar de tab |
-| `fullWidth` | `boolean` | `false` | Si los tabs ocupan todo el ancho |
-| `size` | `'sm' \| 'base' \| 'lg'` | `'base'` | Tamaño (espaciado entre tabs) |
-| `showBorder` | `boolean` | `true` | Mostrar línea inferior |
-| `className` | `string` | - | Clases CSS adicionales |
-
-### TabItem
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `id` | `string` | **requerido** | Identificador único |
-| `label` | `string` | **requerido** | Texto del tab |
-| `icon` | `ReactNode` | - | Icono a la izquierda |
-| `badge` | `number` | - | Número de notificaciones |
-| `disabled` | `boolean` | `false` | Si está deshabilitado |
-
-### TabProps (Tab Individual)
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `label` | `string` | **requerido** | Texto del tab |
-| `active` | `boolean` | `false` | Si está activo |
-| `icon` | `ReactNode` | - | Icono a la izquierda |
-| `badge` | `number` | - | Número de notificaciones |
-| `disabled` | `boolean` | `false` | Si está deshabilitado |
-| `onClick` | `() => void` | - | Callback al hacer click |
-| `className` | `string` | - | Clases CSS adicionales |
-| `ariaLabel` | `string` | - | Etiqueta accesible |
-
-## Iconos Incluidos
-
-El componente incluye los siguientes iconos Heroicons Micro (16x16):
-
-- `CheckIcon` - Icono de verificación
-- `HomeIcon` - Icono de inicio
-- `UserIcon` - Icono de usuario
-- `CogIcon` - Icono de configuración
-- `BellIcon` - Icono de notificaciones
-- `DocumentIcon` - Icono de documento
-- `ChartIcon` - Icono de estadísticas
-
-## Especificaciones de Diseño
-
-### Dimensiones (según Figma)
-
-- **Padding interno**: 8px
-- **Gap entre icono y texto**: 4px
-- **Altura del indicador activo**: 2px
-- **Border radius**: 8px (rounded-lg)
-
-### Tipografía
-
-- **Texto**: Label Small (14px Bold, line-height 20px)
-- **Badge**: 12px Regular
-
-### Colores
-
-**Light Mode:**
-- Texto inactivo: `#18181b` (content-primary)
-- Texto activo: `#0e79fd` (primary-custom-600)
-- Hover overlay: `rgba(0,0,0,0.03)`
-- Indicador activo: `#0e79fd`
-
-**Dark Mode:**
-- Texto inactivo: `#ffffff` (dark-content-primary)
-- Texto activo: `#0e79fd` (primary-custom-600)
-- Hover overlay: `rgba(255,255,255,0.05)`
-- Indicador activo: `#0e79fd`
-
-## Accesibilidad
-
-El componente implementa las siguientes características de accesibilidad:
-
-- `role="tablist"` en el contenedor
-- `role="tab"` en cada tab individual
-- `aria-selected` para indicar el tab activo
-- `aria-disabled` para tabs deshabilitados
-- Navegación con teclado (Tab para focus)
-- Focus visible con anillo de foco
-
-## Mejores Prácticas
-
-1. **Usa iconos consistentemente** - Si un tab tiene icono, considera agregar iconos a todos
-2. **Badges para notificaciones** - Usa badges solo cuando hay información relevante para el usuario
-3. **Deshabilita en lugar de ocultar** - Si un tab no está disponible, deshabilítalo en lugar de ocultarlo
-4. **Textos cortos** - Mantén los labels de los tabs concisos
-5. **Orden lógico** - Organiza los tabs en orden de importancia o flujo de trabajo
-
-## Referencias
-
-- **Figma**: [Tabs Component](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4514-29083)
-- **Documentación de colores**: `docs/colors.md`
-- **Documentación de tipografía**: `docs/typography.md`
+# Tabs
+
+Componente de navegación por pestañas del sistema de diseño Siesa UI Kit.
+
+## Descripción
+
+El componente `Tabs` proporciona una interfaz de navegación horizontal que permite a los usuarios cambiar entre diferentes vistas o secciones de contenido. Está diseñado siguiendo las especificaciones de Figma con soporte completo para dark mode.
+
+## Características
+
+- ✅ Estados: Default, Hover, Focus, Active, Disabled
+- ✅ Soporte para iconos (Heroicons Micro 16x16)
+- ✅ Badge de notificación con contador
+- ✅ Dark mode completo
+- ✅ Modo controlado y no controlado
+- ✅ Accesibilidad con ARIA roles
+- ✅ TypeScript estricto
+
+## Instalación
+
+El componente está incluido en el Siesa UI Kit. Importa desde la carpeta de componentes:
+
+```tsx
+import { Tabs, Tab } from '@/components/Tabs';
+import type { TabItem } from '@/components/Tabs';
+```
+
+## Uso Básico
+
+### Modo No Controlado
+
+```tsx
+<Tabs
+  items={[
+    { id: 'inicio', label: 'Inicio' },
+    { id: 'perfil', label: 'Perfil' },
+    { id: 'configuracion', label: 'Configuración' },
+  ]}
+  defaultActiveId="inicio"
+/>
+```
+
+### Modo Controlado
+
+```tsx
+const [activeTab, setActiveTab] = useState('inicio');
+
+<Tabs
+  items={[
+    { id: 'inicio', label: 'Inicio' },
+    { id: 'perfil', label: 'Perfil' },
+    { id: 'configuracion', label: 'Configuración' },
+  ]}
+  activeId={activeTab}
+  onChange={setActiveTab}
+/>
+```
+
+### Con Iconos
+
+```tsx
+import { HomeIcon, UserIcon, CogIcon } from '@/components/Tabs';
+
+<Tabs
+  items={[
+    { id: 'inicio', label: 'Inicio', icon: <HomeIcon className="w-3 h-3" /> },
+    { id: 'perfil', label: 'Perfil', icon: <UserIcon className="w-3 h-3" /> },
+    { id: 'configuracion', label: 'Configuración', icon: <CogIcon className="w-3 h-3" /> },
+  ]}
+  activeId={activeTab}
+  onChange={setActiveTab}
+/>
+```
+
+### Con Badges de Notificación
+
+```tsx
+<Tabs
+  items={[
+    { id: 'mensajes', label: 'Mensajes', badge: 5 },
+    { id: 'notificaciones', label: 'Notificaciones', badge: 12 },
+    { id: 'tareas', label: 'Tareas' },
+  ]}
+  activeId={activeTab}
+  onChange={setActiveTab}
+/>
+```
+
+### Full Width
+
+```tsx
+<Tabs
+  items={[...]}
+  activeId={activeTab}
+  onChange={setActiveTab}
+  fullWidth
+/>
+```
+
+## Props
+
+### TabsProps (Contenedor)
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `items` | `TabItem[]` | **requerido** | Lista de tabs a mostrar |
+| `activeId` | `string` | - | ID del tab seleccionado (modo controlado) |
+| `defaultActiveId` | `string` | - | ID del tab inicial (modo no controlado) |
+| `onChange` | `(id: string) => void` | - | Callback al cambiar de tab |
+| `fullWidth` | `boolean` | `false` | Si los tabs ocupan todo el ancho |
+| `size` | `'sm' \| 'base' \| 'lg'` | `'base'` | Tamaño (espaciado entre tabs) |
+| `showBorder` | `boolean` | `true` | Mostrar línea inferior |
+| `className` | `string` | - | Clases CSS adicionales |
+
+### TabItem
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `id` | `string` | **requerido** | Identificador único |
+| `label` | `string` | **requerido** | Texto del tab |
+| `icon` | `ReactNode` | - | Icono a la izquierda |
+| `badge` | `number` | - | Número de notificaciones |
+| `disabled` | `boolean` | `false` | Si está deshabilitado |
+
+### TabProps (Tab Individual)
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `label` | `string` | **requerido** | Texto del tab |
+| `active` | `boolean` | `false` | Si está activo |
+| `icon` | `ReactNode` | - | Icono a la izquierda |
+| `badge` | `number` | - | Número de notificaciones |
+| `disabled` | `boolean` | `false` | Si está deshabilitado |
+| `onClick` | `() => void` | - | Callback al hacer click |
+| `className` | `string` | - | Clases CSS adicionales |
+| `ariaLabel` | `string` | - | Etiqueta accesible |
+
+## Iconos Incluidos
+
+El componente incluye los siguientes iconos Heroicons Micro (16x16):
+
+- `CheckIcon` - Icono de verificación
+- `HomeIcon` - Icono de inicio
+- `UserIcon` - Icono de usuario
+- `CogIcon` - Icono de configuración
+- `BellIcon` - Icono de notificaciones
+- `DocumentIcon` - Icono de documento
+- `ChartIcon` - Icono de estadísticas
+
+## Especificaciones de Diseño
+
+### Dimensiones (según Figma)
+
+- **Padding interno**: 8px
+- **Gap entre icono y texto**: 4px
+- **Altura del indicador activo**: 2px
+- **Border radius**: 8px (rounded-lg)
+
+### Tipografía
+
+- **Texto**: Label Small (14px Bold, line-height 20px)
+- **Badge**: 12px Regular
+
+### Colores
+
+**Light Mode:**
+- Texto inactivo: `#18181b` (content-primary)
+- Texto activo: `#0e79fd` (primary-custom-600)
+- Hover overlay: `rgba(0,0,0,0.03)`
+- Indicador activo: `#0e79fd`
+
+**Dark Mode:**
+- Texto inactivo: `#ffffff` (dark-content-primary)
+- Texto activo: `#0e79fd` (primary-custom-600)
+- Hover overlay: `rgba(255,255,255,0.05)`
+- Indicador activo: `#0e79fd`
+
+## Accesibilidad
+
+El componente implementa las siguientes características de accesibilidad:
+
+- `role="tablist"` en el contenedor
+- `role="tab"` en cada tab individual
+- `aria-selected` para indicar el tab activo
+- `aria-disabled` para tabs deshabilitados
+- Navegación con teclado (Tab para focus)
+- Focus visible con anillo de foco
+
+## Mejores Prácticas
+
+1. **Usa iconos consistentemente** - Si un tab tiene icono, considera agregar iconos a todos
+2. **Badges para notificaciones** - Usa badges solo cuando hay información relevante para el usuario
+3. **Deshabilita en lugar de ocultar** - Si un tab no está disponible, deshabilítalo en lugar de ocultarlo
+4. **Textos cortos** - Mantén los labels de los tabs concisos
+5. **Orden lógico** - Organiza los tabs en orden de importancia o flujo de trabajo
+
+## Referencias
+
+- **Figma**: [Tabs Component](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4514-29083)
+- **Documentación de colores**: `docs/colors.md`
+- **Documentación de tipografía**: `docs/typography.md`