Componentes
58 componentes, 37 de ellos Pro. Cada uno se instala con un comando y su código queda en tu repositorio.
Base
20- AccordionSecciones plegables sobre el Disclosure de React Aria: el boton anuncia si esta abierto, el panel se asocia por aria-controls y el contenido cerrado sale del orden de tabulacion. Modo exclusivo o multiple.
- AlertAviso en linea con icono, titulo y accion. Los de error usan role="alert" para que el lector de pantalla los anuncie al aparecer; los informativos no interrumpen. Incluye EmptyState y ErrorState.
- AvatarAvatar con fallback a iniciales, indicador de estado y AvatarGroup con contador de excedente.
- ButtonBoton sobre React Aria: estados de foco, hover y press correctos en mouse, teclado y tactil, mas un estado de carga que preserva el ancho.
- CardSuperficie base del sistema. Header, body y footer componibles; es el contenedor de todos los charts, stat cards y blocks.
- CheckboxCasilla sobre React Aria, con estado indeterminado para selecciones parciales y CheckboxGroup con validacion y mensaje de error asociado al grupo, no a cada casilla.
- ChipEtiqueta compacta de estado. Incluye DeltaChip, la pildora de variacion porcentual que usan las stat cards y los headers de chart.
- DialogModal sobre React Aria: atrapa el foco, cierra con Escape, bloquea el scroll de fondo y devuelve el foco al disparador. Incluye AlertDialog para confirmar acciones destructivas.
- DividerSeparador horizontal o vertical, con variante que aloja una etiqueta al medio ("o continuar con").
- Icon ButtonBoton cuadrado para acciones sin texto. Exige aria-label por tipos: un icono sin nombre accesible es invisible para un lector de pantalla.
- InputCampo de texto y textarea con autosize. Label, descripcion y error quedan asociados por React Aria, asi que el error se anuncia solo al fallar la validacion.
- MenuEl menu "..." que lleva cada card. Sobre React Aria: navegacion con flechas, typeahead, foco que vuelve al trigger al cerrar.
- PopoverSuperficie flotante para rangos de fecha y filtros. Atrapa el foco, cierra con Escape y se reposiciona sola cuando no entra en pantalla.
- Segmented ControlEl switcher Weekly/Monthly/Yearly de los charts. Es un radiogroup real, no una fila de botones: se navega con flechas y se anuncia como un grupo con una opcion elegida.
- SelectDesplegable sobre React Aria: se abre con teclado, busca por escritura, cierra con Escape y devuelve el foco al disparador. El menu copia el ancho del disparador para no saltar al abrirse.
- SkeletonPlaceholder de carga. Se marca aria-hidden y se acompana de un aria-busy en el contenedor: anunciar cada barra gris es ruido para un lector de pantalla.
- Stat CardLa tarjeta de KPI de cualquier tablero: cifra grande con contador, variacion contra el periodo anterior, tendencia opcional y tile de icono. Existe para que nadie la vuelva a escribir a mano.
- SwitchInterruptor de encendido y apagado sobre React Aria. La etiqueta forma parte del control, asi que hacer clic en el texto tambien lo activa, y el estado se anuncia como "activado"/"desactivado".
- TabsPestanas sobre React Aria: se navegan con flechas, el panel se anuncia al cambiar y solo el panel activo entra en el orden de tabulacion. Tres apariencias: subrayado, pildora y encerradas.
- TooltipTooltip sobre React Aria: aparece con hover y con foco de teclado, respeta el delay de grupo y se cierra con Escape.
Charts
20- Activity RingsPROAnillos concentricos de progreso, cada uno con su meta. Se animan al entrar y admiten superar el 100% dibujando una segunda vuelta sobre la primera.
- Area ChartPROAreas apiladas o superpuestas para varias series, con leyenda, guia vertical y tooltip que lista todas las series del punto.
- Bar ListPRORanking de barras horizontales con la etiqueta dentro de la barra. El formato que mejor lee categorias con nombres largos, donde un grafico de columnas obliga a rotar el texto.
- Chart CardPROCabecera compartida por todos los charts: titulo, cifra grande con contador animado, pildora de variacion, switcher de rango y menu. Evita reescribir el mismo header diecisiete veces.
- Chart CorePROMotor compartido de todos los charts: escalas, ticks, constructores de path, grilla, ejes, tooltip posicionado, contador animado y medicion responsiva. Sin dependencias de graficos.
- Combo ChartPROBarras y linea sobre el mismo grafico, con eje derecho independiente. El caso tipico: volumen en barras y tasa de conversion en linea, dos magnitudes que no comparten escala.
- ContributionsPROGrilla anual de actividad al estilo GitHub: una celda por dia, cinco niveles de intensidad, etiquetas de mes y dia, y tooltip por celda. Recibe fechas sueltas y arma el calendario.
- Earnings ChartPROColumnas de ingresos y egresos alrededor de una linea cero, con el neto acumulado encima. Las barras negativas crecen hacia abajo, que es como se lee un flujo de caja.
- Funnel ChartPROEmbudo de conversion con trapecios que unen etapa con etapa. Muestra la tasa de paso y la caida entre etapas, que es el dato que se busca y que un grafico de barras esconde.
- Heatmap ChartPROMatriz de intensidad para cruzar dos dimensiones (hora x dia, canal x semana). Escala secuencial en OKLCH, celdas cuadradas y resaltado de fila y columna al pasar el cursor.
- Line ChartPROLinea sobre gradiente de area, con grilla, ejes, switcher de rango, punto activo que sigue al cursor y tooltip. Una prop cambia entre curva suave y segmentos rectos.
- Most Active DaysPROCalendario mensual donde el tamano y la intensidad del circulo codifican la actividad del dia. Destaca el dia mas alto y resume el mes al pie.
- Radar ChartPROComparacion de varias series sobre los mismos ejes. Telarana de referencia, poligonos con relleno translucido y etiquetas alineadas segun su cuadrante para que no se corten.
- Radial ChartPRODona con segmentos, hueco central para la cifra total y leyenda con valores. Los segmentos se atenuan al pasar el cursor sobre otro, para leer uno a la vez.
- Sankey ChartPRODiagrama de flujo entre nodos: el grosor de cada cinta es su volumen. Calcula las columnas por profundidad y reparte la altura sola; solo hay que darle nodos y enlaces.
- Scatter ChartPRODispersion de dos variables con radio opcional como tercera dimension (bubble). Grilla en ambos ejes, deteccion del punto mas cercano al cursor y tooltip anclado al punto.
- Sleep ScorePROMedidor semicircular con un puntaje sobre 100, una banda de color por tramo de calidad y el desglose de las fases apiladas debajo.
- SparklinePROMicro-grafico de linea en SVG puro, sin librerias. Curva Catmull-Rom, gradiente de area, punto activo que sigue al cursor y tooltip. Es la prueba de concepto del motor de charts de la Fase 1.
- Stage BarsPROBarra unica segmentada que reparte un total entre etapas o estados. Ocupa una fila y comunica proporcion mejor que una torta cuando los segmentos son pocos.
- Steps ChartPROColumnas diarias con linea de meta punteada. Las barras que superan la meta cambian de color, asi que cumplir o no se lee sin comparar contra el eje.
Blocks
10- Agent LimitsPROConsumo del plan por recurso, con la fecha de reinicio y un aviso cuando algo se acerca al tope. Las barras cambian de tono en dos umbrales, asi el problema se ve antes de chocarse con el limite.
- Agent ProgressPROBarra de avance de una tarea larga con el paso actual, el tiempo transcurrido y la posibilidad de cancelar. Cuando no se puede estimar el total, la barra pasa a indeterminada en vez de inventar un porcentaje.
- Agent ThinkingPROIndicador de razonamiento para un chat: la etiqueta actual se lee con un barrido de luz, los pasos completados quedan colapsados y el bloque entero se puede expandir para auditar el recorrido.
- CalendarPROCalendario mensual con seleccion de dia o de rango, marcas de eventos y navegacion completa por teclado: flechas para moverse, Inicio y Fin para los bordes de la semana, RePag y AvPag para cambiar de mes.
- ComposerPROEntrada de chat que crece con el texto. Enter envia, Shift+Enter salta de linea, el boton de enviar se habilita solo con contenido y muestra un stop mientras la respuesta esta en curso.
- Composer AttachmentsPROFila de adjuntos sobre el prompt. Cada ficha entra escalonada, muestra su progreso de subida y se puede quitar; los errores se explican en la ficha en vez de desaparecer.
- Composer PanelPROEl composer completo: adjuntos arriba, texto al medio y una barra con modo de permisos, selector de modelo y contexto consumido. El modo de permisos cambia el color del borde, porque "ejecutar sin preguntar" tiene que verse antes de escribir.
- QuestionnairePROCuestionario paso a paso con una pregunta por pantalla, avance visible y respuestas revisables al final. Volver atras conserva lo respondido; el boton de continuar se habilita solo cuando la respuesta es valida.
- Task ListPROPlan de trabajo de un agente con estado por tarea y subtareas anidadas. El estado se comunica con forma ademas de color, para que se distinga sin depender de la vista cromatica.
- Web SearchPROResultados de una busqueda hecha por el agente: las consultas que lanzo, las fuentes citadas y de donde salio cada afirmacion. El bloque existe para que la respuesta sea auditable, no para decorar.
Templates
7- AI ChatPROPantalla completa de chat: historial lateral, hilo de mensajes con razonamiento y fuentes plegables, y el composer con modo de permisos. Es la composicion de referencia de los blocks de agente.
- AI Image GenerationPROPantalla de generacion de imagenes: prompt, parametros, grilla de resultados con estados de carga y panel de detalle. Las imagenes se representan con marcadores propios, sin depender de archivos externos.
- AI ProfilePROFicha de un agente: identidad, instrucciones, herramientas habilitadas, consumo del plan y actividad reciente. Compone agent-limits, contributions, bar-list y task-list.
- Finance DashboardPROTablero financiero: cifras principales, flujo de caja, distribucion de gastos y movimientos recientes. Compone earnings-chart, radial-chart, bar-list y stage-bars sobre una grilla que se reordena en mobile.
- Home DashboardPROTablero de actividad personal: anillos del dia, pasos con meta, sueno, calendario y racha anual. Compone activity-rings, steps-chart, sleep-score, calendar y contributions.
- Marketing DashboardPROTablero de adquisicion: embudo, canales, recorrido hasta la conversion y rendimiento por campana. Compone funnel-chart, area-chart, sankey-chart, scatter-chart, heatmap-chart y bar-list.
- Medical ProfilePROFicha clinica: signos vitales con rango de referencia, evolucion, sueno, actividad y proximos turnos. Los valores fuera de rango se marcan con texto ademas de color, porque un dato clinico no puede depender de la vista cromatica.