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,66 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { cn } from "../core/cn"
+
+interface SwitchToggleProps extends SwitchPrimitive.Root.Props {
+  label?: string
+  labelPosition?: "left" | "right"
+  className?: string
+}
+
+function SwitchToggle({ className, label, labelPosition = "right", id, ...props }: SwitchToggleProps) {
+  const internalId = React.useId()
+  const switchId = id ?? internalId
+
+  const switchEl = (
+    <SwitchPrimitive.Root
+      id={switchId}
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors outline-none",
+        "bg-input focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "data-checked:bg-primary",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
+          "translate-x-0 data-checked:translate-x-4"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+
+  if (!label) return switchEl
+
+  return (
+    <div className="flex items-center gap-2">
+      {labelPosition === "left" && (
+        <label
+          htmlFor={switchId}
+          data-slot="switch-label"
+          className="text-sm font-medium leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+        >
+          {label}
+        </label>
+      )}
+      {switchEl}
+      {labelPosition === "right" && (
+        <label
+          htmlFor={switchId}
+          data-slot="switch-label"
+          className="text-sm font-medium leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}
+
+export { SwitchToggle }
+export type { SwitchToggleProps }