feat: nuevos componentes UI — accordion, avatar, breadcrumb, checkbox, command, dropdown, pagination, popover, radio, sheet, select, switch, textarea, toast

Componentes React accesibles basados en Radix UI con soporte de temas via CSS variables. Incluye barrel export en index.ts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-03 03:23:32 +02:00
parent 619a56c567
commit 35bcb63300
29 changed files with 2537 additions and 0 deletions
+53
View File
@@ -0,0 +1,53 @@
---
name: accordion
kind: component
lang: ts
domain: ui
version: "1.0.0"
purity: impure
signature: "Accordion(props: AccordionProps): JSX.Element"
description: "Secciones colapsables con animaciones. Base-UI Collapsible primitive. Composable: AccordionItem + AccordionTrigger + AccordionContent."
tags: [accordion, collapsible, component, ui, interactive, base-ui]
uses_functions: [cn_ts_core]
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: ["@base-ui/react/collapsible", "lucide-react"]
tested: false
tests: []
test_file_path: ""
file_path: "frontend/functions/ui/accordion.tsx"
props:
- name: className
type: "string"
required: false
description: "Clases CSS adicionales para el contenedor"
emits: []
has_state: false
framework: react
variant: []
---
## Ejemplo
```tsx
<Accordion>
<AccordionItem defaultOpen>
<AccordionTrigger>Seccion 1</AccordionTrigger>
<AccordionContent>
Contenido de la primera seccion.
</AccordionContent>
</AccordionItem>
<AccordionItem>
<AccordionTrigger>Seccion 2</AccordionTrigger>
<AccordionContent>
Contenido de la segunda seccion.
</AccordionContent>
</AccordionItem>
</Accordion>
```
## Notas
Cada AccordionItem es un Collapsible independiente — permite multiples items abiertos simultaneamente. Para exclusividad (solo uno abierto), manejar el estado externamente. El chevron rota 180 grados con [data-open]. Exports: Accordion, AccordionItem, AccordionTrigger, AccordionContent.