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,84 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../core/cn"
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectGroupLabel,
+} from "./select"
+
+export interface SimpleSelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SimpleSelectGroup {
+  group: string
+  items: SimpleSelectOption[]
+}
+
+export type SimpleSelectOptions = SimpleSelectOption[] | SimpleSelectGroup[]
+
+interface SimpleSelectProps {
+  value: string
+  onValueChange: (value: string) => void
+  options: SimpleSelectOptions
+  placeholder?: string
+  disabled?: boolean
+  size?: 'sm' | 'default'
+  className?: string
+}
+
+function isGrouped(options: SimpleSelectOptions): options is SimpleSelectGroup[] {
+  return options.length > 0 && 'group' in options[0]
+}
+
+function SimpleSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select...",
+  disabled = false,
+  size = 'default',
+  className,
+}: SimpleSelectProps) {
+  return (
+    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectTrigger
+        className={cn(
+          size === 'sm' && 'h-7 text-xs px-2',
+          className
+        )}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {isGrouped(options)
+          ? options.map(g => (
+              <SelectGroup key={g.group}>
+                <SelectGroupLabel>{g.group}</SelectGroupLabel>
+                {g.items.map(item => (
+                  <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            ))
+          : (options as SimpleSelectOption[]).map(item => (
+              <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+                {item.label}
+              </SelectItem>
+            ))
+        }
+      </SelectContent>
+    </Select>
+  )
+}
+
+export { SimpleSelect }