@denisluyo/react-web

Componentes React generales del Design System. No contiene valores de marca: consume las variables semánticas del tema instalado por el producto.

import { Button } from '@denisluyo/react-web';
import '@denisluyo/theme-english-product/css';
import '@denisluyo/react-web/styles.css';

<Button variant="contained-contrast" size="large">
  Continuar
</Button>;

Button ofrece las variantes contained-contrast, contained, outlined y text; tamaños large, medium y small; estados nativos hover, active y disabled; loading; y slots startIcon/endIcon.

RadioButton usa un input[type="radio"] nativo, tamaños medium y small, selección mediante checked, label opcional, estados hover/active/disabled y loading como traducción de Skeleton.

Checkbox usa un input[type="checkbox"] nativo de 24 px, permite labels antes y después del control y conserva los estados Default, Selected, Empty, Disabled-Default y Disabled-Selected de Figma.

TextField usa un input nativo, conecta label y ayuda, expone error y disabled, y permite adornos configurables con switches de visibilidad independientes. Con type="password" y showPasswordToggle incorpora el control accesible para mostrar u ocultar la contraseña sin duplicar el componente.

TextArea usa un textarea nativo de 120 px de alto, conecta label y ayuda, expone error y disabled y permite configurar el redimensionamiento con resize.

Chip usa un botón toggle nativo de 24 px, comunica selección con aria-pressed, admite estado controlado/no controlado y expone iconos inicial/final con switches independientes.

Toast comunica feedback posterior a una acción mediante los estados information, success, warning y error; deriva status/alert, permite ocultar icono y cierre y delega la duración y la cola al proyecto consumidor.