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,97 @@
+import * as React from "react"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+import { cn } from "../core/cn"
+
+function Breadcrumb({ ...props }: React.ComponentPropsWithoutRef<"nav">) {
+  return <nav data-slot="breadcrumb" aria-label="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentPropsWithoutRef<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentPropsWithoutRef<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  href,
+  asChild,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean }) {
+  if (asChild) {
+    return (
+      <span data-slot="breadcrumb-link" className={cn("transition-colors hover:text-foreground", className)} {...(props as React.ComponentPropsWithoutRef<"span">)}>
+        {children}
+      </span>
+    )
+  }
+  return (
+    <a
+      data-slot="breadcrumb-link"
+      href={href}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-current="page"
+      aria-disabled="true"
+      className={cn("font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator }