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>
2026-04-03 03:23:32 +02:00
parent 619a56c567
commit 35bcb63300
29 changed files with 2537 additions and 0 deletions
@@ -0,0 +1,70 @@
+---
+name: avatar
+kind: component
+lang: ts
+domain: ui
+version: "1.0.0"
+purity: impure
+signature: "Avatar(props: AvatarProps): JSX.Element"
+description: "Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via CVA."
+tags: [avatar, user, image, component, ui, cva]
+uses_functions: [cn_ts_core]
+uses_types: []
+returns: []
+returns_optional: false
+error_type: ""
+imports: ["class-variance-authority"]
+tested: false
+tests: []
+test_file_path: ""
+file_path: "frontend/functions/ui/avatar.tsx"
+props:
+  - name: src
+    type: "string"
+    required: false
+    description: "URL de la imagen"
+  - name: alt
+    type: "string"
+    required: false
+    description: "Texto alternativo de la imagen"
+  - name: fallback
+    type: "string"
+    required: false
+    description: "Nombre completo del que extraer iniciales (ej: 'Juan Perez' -> 'JP')"
+  - name: initials
+    type: "string"
+    required: false
+    description: "Iniciales explicitas para el fallback (sobrescribe fallback)"
+  - name: size
+    type: "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+    required: false
+    description: "Tamanio del avatar (default: md)"
+  - name: className
+    type: "string"
+    required: false
+    description: "Clases CSS adicionales"
+emits: []
+has_state: true
+framework: react
+variant: [xs, sm, md, lg, xl]
+---
+
+## Ejemplo
+
+```tsx
+// Con imagen
+<Avatar src="https://example.com/user.jpg" alt="Juan Perez" size="md" />
+
+// Con fallback a iniciales
+<Avatar fallback="Juan Perez" size="lg" />
+
+// Iniciales explicitas
+<Avatar initials="JD" size="sm" />
+
+// Maneja error de imagen automaticamente
+<Avatar src="/broken-url.jpg" fallback="Maria Garcia" />
+```
+
+## Notas
+
+Usa estado interno para manejar errores de carga de imagen (onError). La funcion getInitials extrae 2 iniciales del nombre completo (primera y ultima palabra). Si solo hay una palabra, toma los 2 primeros caracteres. Usa forwardRef para compatibilidad con wrappers.