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 e89b78cc45
commit c5bb64160f
29 changed files with 2537 additions and 0 deletions
@@ -0,0 +1,100 @@
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+import { cn } from "../core/cn"
+import { buttonVariants } from "./button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="pagination"
+      role="navigation"
+      aria-label="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+  disabled?: boolean
+  size?: "icon" | "default" | "sm" | "lg"
+} & React.ComponentProps<"a">
+
+function PaginationLink({ className, isActive, disabled, size = "icon", ...props }: PaginationLinkProps) {
+  return (
+    <a
+      data-slot="pagination-link"
+      aria-current={isActive ? "page" : undefined}
+      aria-disabled={disabled}
+      className={cn(
+        buttonVariants({ variant: isActive ? "outline" : "ghost", size }),
+        disabled && "pointer-events-none opacity-50",
+        isActive && "border-border font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({ className, ...props }: React.ComponentProps<"a">) {
+  return (
+    <PaginationLink
+      data-slot="pagination-previous"
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 pl-2", className)}
+      {...props}
+    >
+      <ChevronLeftIcon className="size-4" />
+      <span>Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({ className, ...props }: React.ComponentProps<"a">) {
+  return (
+    <PaginationLink
+      data-slot="pagination-next"
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 pr-2", className)}
+      {...props}
+    >
+      <span>Next</span>
+      <ChevronRightIcon className="size-4" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="pagination-ellipsis"
+      aria-hidden
+      className={cn("flex size-8 items-center justify-center text-muted-foreground", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious }
+export type { PaginationLinkProps }