siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Table/Table.types.ts

@@ -0,0 +1,204 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Dirección de ordenamiento para columnas sortables
+ */
+export type SortDirection = 'asc' | 'desc' | null;
+
+/**
+ * Definición de una columna de la tabla
+ */
+export interface TableColumn<T = any> {
+  /**
+   * Título que se muestra en el header de la columna
+   */
+  header: string;
+
+  /**
+   * Key del objeto de datos para acceder al valor
+   * Puede ser una string o una función que retorna el valor
+   */
+  accessor: keyof T | ((row: T) => any);
+
+  /**
+   * Si la columna es sortable (ordenable)
+   * @default false
+   */
+  sortable?: boolean;
+
+  /**
+   * Función custom para renderizar el contenido de la celda
+   * Si no se provee, se usa el valor del accessor directamente
+   */
+  render?: (value: any, row: T, index: number) => ReactNode;
+
+  /**
+   * Alineación del contenido de la celda
+   * @default 'left'
+   */
+  align?: 'left' | 'center' | 'right';
+
+  /**
+   * Ancho de la columna (CSS width)
+   */
+  width?: string;
+}
+
+/**
+ * Props de paginación para la tabla
+ */
+export interface PaginationProps {
+  /**
+   * Página actual (1-indexed)
+   */
+  currentPage: number;
+
+  /**
+   * Total de páginas
+   */
+  totalPages: number;
+
+  /**
+   * Callback cuando cambia la página
+   */
+  onPageChange: (page: number) => void;
+
+  /**
+   * Texto del botón "Anterior"
+   * @default 'Anterior'
+   */
+  previousLabel?: string;
+
+  /**
+   * Texto del botón "Siguiente"
+   * @default 'Siguiente'
+   */
+  nextLabel?: string;
+}
+
+/**
+ * Props del componente Table
+ */
+export interface TableProps<T = any> {
+  /**
+   * Título opcional de la tabla
+   */
+  title?: string;
+
+  /**
+   * Definición de las columnas
+   */
+  columns: TableColumn<T>[];
+
+  /**
+   * Datos de las filas
+   */
+  data: T[];
+
+  /**
+   * Variante visual de la tabla
+   * @default 'basic'
+   */
+  variant?: 'basic' | 'fullWidth' | 'striped' | 'grid';
+
+  /**
+   * Si se muestra el borde del container
+   * @default true
+   */
+  showBorder?: boolean;
+
+  /**
+   * Si se muestra la sombra del container
+   * @default true
+   */
+  showShadow?: boolean;
+
+  /**
+   * Callback cuando se hace click en una fila
+   */
+  onRowClick?: (row: T, index: number) => void;
+
+  /**
+   * Callback cuando cambia el sort
+   */
+  onSort?: (column: keyof T | string, direction: SortDirection) => void;
+
+  /**
+   * Estado de sort controlado desde fuera
+   */
+  sortColumn?: keyof T | string;
+
+  /**
+   * Dirección de sort controlada desde fuera
+   */
+  sortDirection?: SortDirection;
+
+  /**
+   * Si la tabla debe ocupar todo el ancho disponible
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Texto a mostrar cuando no hay datos
+   * @default 'No hay datos disponibles'
+   */
+  emptyMessage?: string;
+
+  /**
+   * Si se está cargando la información
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Número de filas skeleton a mostrar cuando loading=true
+   * @default 5
+   */
+  loadingRows?: number;
+
+  /**
+   * Props de paginación (si se provee, se muestra paginación)
+   */
+  pagination?: PaginationProps;
+
+  /**
+   * Clases CSS adicionales para el container
+   */
+  className?: string;
+
+  /**
+   * ID único para accesibilidad
+   */
+  id?: string;
+}
+
+/**
+ * Props del TableHeader (uso interno)
+ */
+export interface TableHeaderProps<T = any> {
+  column: TableColumn<T>;
+  sortable: boolean;
+  sorted: boolean;
+  sortDirection: SortDirection;
+  onSort: () => void;
+}
+
+/**
+ * Props del TableCell (uso interno)
+ */
+export interface TableCellProps {
+  children: ReactNode;
+  align?: 'left' | 'center' | 'right';
+  width?: string;
+}
+
+/**
+ * Props del TableRow (uso interno)
+ */
+export interface TableRowProps {
+  children: ReactNode;
+  onClick?: () => void;
+  striped?: boolean;
+  index: number;
+}

package/src/components/Table/index.ts

@@ -0,0 +1,9 @@
+export { Table } from './Table';
+export type {
+  TableProps,
+  TableColumn,
+  SortDirection,
+  TableHeaderProps,
+  TableCellProps,
+  TableRowProps,
+} from './Table.types';

package/src/components/Tabs/README.md

@@ -0,0 +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`