siesa-ui-kit 1.0.0 → 1.0.1

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,46 @@
+import type { SwitchProps } from './Switch.types';
+/**
+ * Switch - Componente de switch del sistema de diseño Siesa
+ *
+ * Campo de activación/desactivación con soporte para:
+ * - Estados: default, hover, focus, disabled
+ * - On, off
+ * - Label y description opcionales
+ * - Posición del label: leading (izquierda) o trailing (derecha)
+ * - Animación suave de transición
+ * - Dark mode completo
+ * - Accesibilidad completa
+ *
+ * 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 ring con shadow especial según Figma
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Label a la izquierda (default)
+ * <Switch
+ *   label="Permitir inserción"
+ *   description="Permite que otros inserten los detalles de tu evento."
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ *
+ * // Label a la derecha
+ * <Switch
+ *   label="Activar notificaciones"
+ *   labelPosition="trailing"
+ *   checked={false}
+ *   onChange={(e) => console.log(e.target.checked)}
+ * />
+ * ```
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,MAAM,0GAqMlB,CAAC"}

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

@@ -0,0 +1,58 @@
+import type { InputHTMLAttributes } from 'react';
+/**
+ * Estados visuales del Switch
+ */
+export type SwitchState = 'default' | 'hover' | 'focus' | 'disabled';
+/**
+ * Posición del label respecto al switch
+ * - `leading`: Label a la izquierda, switch a la derecha
+ * - `trailing`: Switch a la izquierda, label a la derecha
+ */
+export type LabelPosition = 'leading' | 'trailing';
+/**
+ * Props del componente Switch
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ */
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Etiqueta del switch
+     */
+    label?: string;
+    /**
+     * Descripción debajo del label
+     */
+    description?: string;
+    /**
+     * Posición del label respecto al switch
+     * - `leading`: Label a la izquierda, switch a la derecha (default)
+     * - `trailing`: Switch a la izquierda, label a la derecha
+     * @default 'leading'
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * Si el switch está activado
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Si el switch está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Callback cuando el estado del switch cambia
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Label para accesibilidad (ARIA)
+     * Si no se proporciona, se usa el valor de `label`
+     */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=Switch.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAErE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEhE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,64 @@
+import type { TableProps } from './Table.types';
+/**
+ * Table - Componente principal de tabla
+ *
+ * Características implementadas:
+ * - Definición de columnas flexible con accessor y render custom
+ * - Sorting en columnas (controlado o no controlado)
+ * - Variantes: basic, fullWidth, striped, grid
+ * - Dark mode completo en todos los estados
+ * - Estados de loading y empty
+ * - Filas clickeables
+ * - Accesibilidad con roles y keyboard navigation
+ *
+ * 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
+ * - Type safety con TypeScript estricto y generics
+ * - Accesibilidad con ARIA labels y keyboard support
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label/Small para headers, Paragraph/Small para cells)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * // Uso básico
+ * <Table
+ *   title="Usuarios"
+ *   columns={[
+ *     { header: 'Nombre', accessor: 'name' },
+ *     { header: 'Email', accessor: 'email' },
+ *     { header: 'Rol', accessor: 'role', sortable: true },
+ *   ]}
+ *   data={users}
+ * />
+ *
+ * // Con render custom
+ * <Table
+ *   columns={[
+ *     {
+ *       header: 'Estado',
+ *       accessor: 'status',
+ *       render: (value) => (
+ *         <Badge color={value === 'active' ? 'green' : 'red'}>
+ *           {value}
+ *         </Badge>
+ *       ),
+ *     },
+ *   ]}
+ *   data={data}
+ * />
+ *
+ * // Variante striped
+ * <Table
+ *   variant="striped"
+ *   columns={columns}
+ *   data={data}
+ * />
+ * ```
+ */
+export declare const Table: <T extends Record<string, any>>({ title, columns, data, variant, showBorder, showShadow, onSort, sortColumn: externalSortColumn, sortDirection: externalSortDirection, fullWidth, emptyMessage, loading, loadingRows, pagination, className, id, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,UAAU,EAKX,MAAM,eAAe,CAAC;AAuYvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,oNAkBlD,UAAU,CAAC,CAAC,CAAC,4CAkNf,CAAC"}

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

@@ -0,0 +1,173 @@
+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;
+}
+//# sourceMappingURL=Table.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { Table } from './Table';
+export type { TableProps, TableColumn, SortDirection, TableHeaderProps, TableCellProps, TableRowProps, } from './Table.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,aAAa,GACd,MAAM,eAAe,CAAC"}

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { TabProps, TabsProps } from './Tabs.types';
+/**
+ * Componente Tab individual del sistema de diseño Siesa
+ *
+ * Representa un único tab dentro de un grupo de tabs. Incluye soporte para:
+ * - Estado activo/inactivo con indicador visual (línea inferior)
+ * - Icono opcional a la izquierda del texto
+ * - Badge de notificación con contador
+ * - Estados hover, focus y disabled
+ * - Dark mode completo
+ *
+ * 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
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Tab
+ *   label="Inicio"
+ *   active={true}
+ *   icon={<HomeIcon />}
+ *   badge={3}
+ *   onClick={() => setActiveTab('home')}
+ * />
+ * ```
+ */
+export declare const Tab: React.FC<TabProps>;
+/**
+ * Componente Tabs contenedor del sistema de diseño Siesa
+ *
+ * Agrupa múltiples tabs permitiendo navegación entre diferentes secciones.
+ * Soporta modo controlado (con activeId y onChange) y no controlado (con defaultActiveId).
+ *
+ * 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
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA roles y keyboard navigation
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Modo controlado
+ * const [activeTab, setActiveTab] = useState('home');
+ *
+ * <Tabs
+ *   items={[
+ *     { id: 'home', label: 'Inicio', icon: <HomeIcon /> },
+ *     { id: 'profile', label: 'Perfil', badge: 3 },
+ *     { id: 'settings', label: 'Configuración' },
+ *   ]}
+ *   activeId={activeTab}
+ *   onChange={setActiveTab}
+ * />
+ *
+ * // Modo no controlado
+ * <Tabs
+ *   items={[...]}
+ *   defaultActiveId="home"
+ * />
+ * ```
+ */
+export declare const Tabs: React.FC<TabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA0MlC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6EpC,CAAC"}

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

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react';
+/**
+ * Configuración de un item de Tab individual
+ */
+export interface TabItem {
+    /**
+     * Identificador único del tab
+     */
+    id: string;
+    /**
+     * Texto a mostrar en el tab
+     */
+    label: string;
+    /**
+     * Icono a mostrar a la izquierda del texto (opcional)
+     */
+    icon?: ReactNode;
+    /**
+     * Número de notificaciones a mostrar en el badge (opcional)
+     */
+    badge?: number;
+    /**
+     * Si el tab está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Props del componente Tab individual (interno)
+ */
+export interface TabProps {
+    /**
+     * Texto a mostrar en el tab
+     */
+    label: string;
+    /**
+     * Si el tab está activo/seleccionado
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Icono a mostrar a la izquierda del texto (opcional)
+     */
+    icon?: ReactNode;
+    /**
+     * Número de notificaciones a mostrar en el badge (opcional)
+     */
+    badge?: number;
+    /**
+     * Si el tab está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Función callback ejecutada al hacer click
+     */
+    onClick?: () => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Etiqueta accesible para lectores de pantalla
+     */
+    ariaLabel?: string;
+}
+/**
+ * Props del componente Tabs (contenedor)
+ */
+export interface TabsProps {
+    /**
+     * Lista de tabs a mostrar
+     */
+    items: TabItem[];
+    /**
+     * ID del tab actualmente seleccionado
+     */
+    activeId?: string;
+    /**
+     * ID del tab seleccionado por defecto (para componente no controlado)
+     */
+    defaultActiveId?: string;
+    /**
+     * Callback ejecutado cuando cambia el tab seleccionado
+     */
+    onChange?: (id: string) => void;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * Si los tabs deben ocupar todo el ancho disponible
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Tamaño de los tabs
+     * @default 'base'
+     */
+    size?: 'sm' | 'base' | 'lg';
+    /**
+     * Si se muestra la línea inferior del contenedor de tabs
+     * @default true
+     */
+    showBorder?: boolean;
+}
+//# sourceMappingURL=Tabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,KAAK,EAAE,OAAO,EAAE,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+/**
+ * Icono de check (Heroicons Micro 16x16)
+ * Usado como icono de ejemplo en los tabs
+ */
+export declare const CheckIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de inicio/home (Heroicons Micro 16x16)
+ */
+export declare const HomeIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de usuario (Heroicons Micro 16x16)
+ */
+export declare const UserIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de configuración/engranaje (Heroicons Micro 16x16)
+ */
+export declare const CogIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de campana/notificaciones (Heroicons Micro 16x16)
+ */
+export declare const BellIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de documento (Heroicons Micro 16x16)
+ */
+export declare const DocumentIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono de gráfico/estadísticas (Heroicons Micro 16x16)
+ */
+export declare const ChartIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CActD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAYrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAYrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAcpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAcrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAczD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAYtD,CAAC"}

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

@@ -0,0 +1,4 @@
+export { Tabs, Tab } from './Tabs';
+export type { TabsProps, TabProps, TabItem } from './Tabs.types';
+export { CheckIcon, HomeIcon, UserIcon, CogIcon, BellIcon, DocumentIcon, ChartIcon, } from './icons';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,SAAS,GACV,MAAM,SAAS,CAAC"}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,38 @@
+import type { TextareaProps } from './Textarea.types';
+/**
+ * Textarea - Componente de área de texto del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Focus rings adaptativos para light y dark mode
+ * - Tokens de color consistentes con la documentación
+ * - Estados hover, focus, disabled y error completos
+ * - Typography: Paragraph Base (16px) para texto
+ *
+ * Campo de entrada de texto multi-línea con soporte para:
+ * - Estados: default, hover, focus, filled, disabled
+ * - Validación con mensajes de error
+ * - Label, description y helper text
+ * - Resize vertical, horizontal, both o none
+ * - Dark mode completo
+ * - Accesibilidad completa
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/shadows.md - Sistema de sombras
+ * @see docs/typography.md - Sistema tipográfico (Paragraph, Label)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   label="About"
+ *   description="Tell us about yourself"
+ *   placeholder="Write a few sentences..."
+ *   helperText="Minimum 50 characters"
+ * />
+ * ```
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,QAAQ,+GAmJpB,CAAC"}