siesa-ui-kit 1.0.6 → 1.0.8

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

@@ -0,0 +1,115 @@
+import type { InputHTMLAttributes } from 'react';
+/**
+ * Estados visuales del Radio Button
+ *
+ * @see Radio.tsx - Implementación del componente
+ */
+export type RadioState = 'default' | 'hover' | 'focus' | 'disabled';
+/**
+ * Props del componente Radio
+ *
+ * Extiende las props nativas de HTMLInputElement excepto 'type' y 'size'
+ * que están manejados internamente por el componente.
+ *
+ * @see docs/colors.md - Sistema de colores para estados
+ * @see docs/typography.md - Tipografía para labels y descriptions
+ * @see docs/spacing.md - Espaciado entre elementos
+ *
+ * @example
+ * ```tsx
+ * // Radio simple
+ * <Radio
+ *   label="Accept terms"
+ *   value="accept"
+ *   name="terms"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ * />
+ *
+ * // Radio con description
+ * <Radio
+ *   label="Allow tickets to be resold"
+ *   description="Customers can resell or transfer their tickets"
+ *   value="resell"
+ *   name="ticketOptions"
+ *   checked={resellAllowed}
+ *   onChange={(e) => setResellAllowed(e.target.checked)}
+ * />
+ *
+ * // Radio disabled
+ * <Radio
+ *   label="Premium feature"
+ *   description="Upgrade to access this feature"
+ *   disabled
+ *   value="premium"
+ *   name="features"
+ * />
+ * ```
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * Etiqueta del radio button
+     *
+     * Se muestra con tipografía Label Small (14px Bold) según sistema de diseño.
+     *
+     * @see docs/typography.md - Label Small (text-sm font-bold)
+     */
+    label?: string;
+    /**
+     * Descripción debajo del label
+     *
+     * Se muestra con tipografía Paragraph Small (14px Regular) según sistema de diseño.
+     *
+     * @see docs/typography.md - Paragraph Small (text-sm font-normal)
+     */
+    description?: string;
+    /**
+     * Si el radio está seleccionado
+     *
+     * Controla el estado checked del radio button. En grupos de radio buttons,
+     * solo uno puede estar checked a la vez.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Valor del radio button (requerido para grupos)
+     *
+     * Identifica el valor único de este radio button dentro de un grupo.
+     * Es esencial para manejar la selección en grupos de radio buttons.
+     */
+    value?: string | number;
+    /**
+     * Nombre del grupo de radio buttons
+     *
+     * Agrupa múltiples radio buttons para permitir selección única.
+     * Todos los radios con el mismo `name` pertenecen al mismo grupo.
+     */
+    name?: string;
+    /**
+     * Clases CSS adicionales
+     *
+     * Permite extender los estilos del componente con clases de Tailwind CSS
+     * o clases personalizadas.
+     */
+    className?: string;
+    /**
+     * Callback cuando el estado del radio cambia
+     *
+     * Se ejecuta cuando el usuario selecciona o deselecciona el radio button.
+     *
+     * @param event - Evento de cambio del input nativo
+     *
+     * @example
+     * ```tsx
+     * <Radio
+     *   onChange={(e) => {
+     *     console.log('Checked:', e.target.checked);
+     *     console.log('Value:', e.target.value);
+     *   }}
+     * />
+     * ```
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+//# sourceMappingURL=Radio.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.types.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9F;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACjE"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { SelectProps } from './Select.types';
+/**
+ * Select - Componente de selección (dropdown) del sistema de diseño Siesa
+ *
+ * Componente Select personalizado con menú desplegable para seleccionar opciones
+ * de una lista. Incluye navegación por teclado, click outside y 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 y keyboard navigation
+ * - Click outside para cerrar el menú
+ * - Soporte de teclado (Enter, Escape, Arrow Up/Down)
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ *   placeholder="Select an option"
+ *   label="Choose one"
+ * />
+ * ```
+ */
+export declare const Select: React.FC<SelectProps>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAGhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgaxC,CAAC"}

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

@@ -0,0 +1,124 @@
+import type { ReactNode } from 'react';
+/**
+ * Opción individual del Select
+ */
+export interface SelectOption {
+    /**
+     * Valor único de la opción
+     */
+    value: string | number;
+    /**
+     * Label visible de la opción
+     */
+    label: string;
+    /**
+     * Si la opción está deshabilitada
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icono personalizado para la opción
+     */
+    icon?: ReactNode;
+}
+/**
+ * Props del componente Select
+ */
+export interface SelectProps {
+    /**
+     * Opciones disponibles para seleccionar
+     */
+    options: SelectOption[];
+    /**
+     * Valor seleccionado actual
+     */
+    value?: string | number;
+    /**
+     * Valor por defecto inicial
+     */
+    defaultValue?: string | number;
+    /**
+     * Texto del placeholder cuando no hay selección
+     * @default 'Seleccionar...'
+     */
+    placeholder?: string;
+    /**
+     * Si el select está deshabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Si el select muestra un error
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Label del select (opcional)
+     */
+    label?: string;
+    /**
+     * Texto descriptivo que aparece debajo del label y antes del trigger
+     * Equivale al "Description" de Figma
+     * @example "This will be visible to clients on the project."
+     */
+    description?: string;
+    /**
+     * Muestra el label
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Muestra la descripción
+     * @default true
+     */
+    showDescription?: boolean;
+    /**
+     * Header opcional que aparece al inicio del menú
+     * @example "Header ..."
+     */
+    menuHeader?: string;
+    /**
+     * Handler cuando cambia la selección
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Clases CSS adicionales
+     */
+    className?: string;
+    /**
+     * Clases CSS adicionales para el trigger
+     */
+    triggerClassName?: string;
+    /**
+     * Clases CSS adicionales para el menu
+     */
+    menuClassName?: string;
+    /**
+     * Label para accesibilidad (ARIA)
+     */
+    ariaLabel?: string;
+    /**
+     * ID del select para asociar con label
+     */
+    id?: string;
+    /**
+     * Nombre del campo para formularios
+     */
+    name?: string;
+    /**
+     * Si el campo es requerido
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Posición del menú desplegable
+     * @default 'bottom'
+     */
+    menuPosition?: 'top' | 'bottom';
+    /**
+     * Ancho completo
+     * @default false
+     */
+    fullWidth?: boolean;
+}
+//# sourceMappingURL=Select.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IAEvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Icono ChevronUpDown para el trigger del Select
+ * Heroicons Micro (16x16px)
+ */
+export declare const ChevronUpDownIcon: React.FC<{
+    className?: string;
+}>;
+/**
+ * Icono Check para los items seleccionados del menu
+ * Heroicons Micro (16x16px)
+ */
+export declare const CheckIcon: React.FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Select/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAqB9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAgBtD,CAAC"}

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

@@ -0,0 +1,4 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select.types';
+export { ChevronUpDownIcon, CheckIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/SignUpView/SignUpView.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { SignUpViewProps } from './SignUpView.types';
+/**
+ * SignUpView - Vista de registro del sistema Siesa
+ *
+ * Vista completa de registro con formulario que incluye:
+ * - Logo de Siesa
+ * - Campos de nombre, email y contraseña
+ * - Botón de registro
+ * - Link para iniciar sesión
+ * - Texto de términos y condiciones
+ * - Fondo decorativo opcional
+ *
+ * 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 y manejo de formulario semántico
+ * - Validación de email básica
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * <SignUpView
+ *   onSubmit={(name, email, password) => console.log('Sign up', name, email, password)}
+ *   onSignIn={() => console.log('Go to sign in')}
+ *   onTermsClick={() => console.log('View terms')}
+ *   onPrivacyClick={() => console.log('View privacy')}
+ * />
+ * ```
+ */
+export declare const SignUpView: React.FC<SignUpViewProps>;
+//# sourceMappingURL=SignUpView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpView.d.ts","sourceRoot":"","sources":["../../../src/components/SignUpView/SignUpView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+chD,CAAC"}

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

@@ -0,0 +1,51 @@
+/**
+ * Props del componente SignUpView
+ */
+export interface SignUpViewProps {
+    /**
+     * Handler para el submit del formulario de registro
+     * @param name - Nombre ingresado por el usuario
+     * @param email - Email ingresado por el usuario
+     * @param password - Contraseña ingresada por el usuario
+     */
+    onSubmit?: (name: string, email: string, password: string) => void;
+    /**
+     * Handler para el click en "Ya tengo una cuenta"
+     */
+    onSignIn?: () => void;
+    /**
+     * Handler para el click en "Condiciones de Uso"
+     */
+    onTermsClick?: () => void;
+    /**
+     * Handler para el click en "Políticas de Privacidad"
+     */
+    onPrivacyClick?: () => void;
+    /**
+     * Estado de carga del botón de submit
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Mensaje de error general para mostrar en el formulario
+     */
+    errorMessage?: string;
+    /**
+     * Clases CSS adicionales para el contenedor
+     */
+    className?: string;
+    /**
+     * Si se muestra el fondo decorativo con imagen
+     * @default true
+     */
+    showBackground?: boolean;
+    /**
+     * Variante de visualización
+     * - 'responsive': Se adapta según el viewport (default)
+     * - 'mobile': Siempre se muestra como mobile sin efectos de card
+     * - 'desktop': Siempre se muestra como desktop con card
+     * @default 'responsive'
+     */
+    variant?: 'responsive' | 'mobile' | 'desktop';
+}
+//# sourceMappingURL=SignUpView.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpView.types.d.ts","sourceRoot":"","sources":["../../../src/components/SignUpView/SignUpView.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC/C"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * Icono de círculo de usuario para el input de nombre
+ */
+export declare const UserCircleIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de sobre (envelope) para el input de email
+ */
+export declare const EnvelopeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de candado cerrado (lock) para el input de contraseña
+ */
+export declare const LockClosedIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+/**
+ * Icono de ojo (eye) para mostrar/ocultar contraseña
+ */
+export declare const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/SignUpView/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAalE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAUhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAalE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAc3D,CAAC"}

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

@@ -0,0 +1,4 @@
+export { SignUpView } from './SignUpView';
+export type { SignUpViewProps } from './SignUpView.types';
+export { UserCircleIcon, EnvelopeIcon, LockClosedIcon, EyeIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SignUpView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

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"}