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,47 @@
+import * as React from "react"
+import { cn } from "../core/cn"
+
+interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
+  autoResize?: boolean
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, autoResize = false, onChange, ...props }, ref) => {
+    const internalRef = React.useRef<HTMLTextAreaElement>(null)
+    const resolvedRef = (ref as React.RefObject<HTMLTextAreaElement>) ?? internalRef
+
+    const handleChange = React.useCallback(
+      (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        if (autoResize && resolvedRef.current) {
+          resolvedRef.current.style.height = "auto"
+          resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight}px`
+        }
+        onChange?.(e)
+      },
+      [autoResize, onChange, resolvedRef]
+    )
+
+    return (
+      <textarea
+        ref={resolvedRef}
+        data-slot="textarea"
+        className={cn(
+          "min-h-[80px] w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm transition-colors outline-none",
+          "placeholder:text-muted-foreground",
+          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20",
+          "dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          autoResize && "resize-none overflow-hidden",
+          className
+        )}
+        onChange={handleChange}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
+export type { TextareaProps }