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,69 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../core/cn"
+
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted font-medium text-muted-foreground select-none",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-xs",
+        sm: "size-8 text-sm",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg",
+        xl: "size-16 text-xl",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+)
+
+interface AvatarProps
+  extends React.ComponentPropsWithoutRef<"span">,
+    VariantProps<typeof avatarVariants> {
+  src?: string
+  alt?: string
+  fallback?: string
+  initials?: string
+}
+
+function getInitials(name?: string): string {
+  if (!name) return "?"
+  const parts = name.trim().split(/\s+/)
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  ({ className, size, src, alt, fallback, initials, ...props }, ref) => {
+    const [imgError, setImgError] = React.useState(false)
+    const showImage = src && !imgError
+    const displayInitials = initials ?? getInitials(fallback ?? alt)
+
+    return (
+      <span
+        ref={ref}
+        data-slot="avatar"
+        className={cn(avatarVariants({ size }), className)}
+        {...props}
+      >
+        {showImage ? (
+          <img
+            src={src}
+            alt={alt ?? ""}
+            className="aspect-square size-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <span data-slot="avatar-fallback" aria-hidden="true">
+            {displayInitials}
+          </span>
+        )}
+      </span>
+    )
+  }
+)
+Avatar.displayName = "Avatar"
+
+export { Avatar, avatarVariants }
+export type { AvatarProps }