siesa-ui-kit 1.0.2 → 1.0.3

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

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

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

package/src/components/Tabs/README.md

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