{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-toggle-card",
  "title": "Animated Toggle Card",
  "description": "Selectable cards with a shared animated active state.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/corr/components/animated-toggle-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type AnimatedToggleCardItem = {\n  value: string\n  title: string\n  description?: string\n  icon?: React.ReactNode\n  tone?: \"default\" | \"success\" | \"warning\" | \"destructive\"\n}\n\nexport function AnimatedToggleCard({\n  items,\n  value,\n  onValueChange,\n  className,\n}: {\n  items: AnimatedToggleCardItem[]\n  value: string\n  onValueChange: (value: string) => void\n  className?: string\n}) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <div className={cn(\"grid gap-2 sm:grid-cols-3\", className)}>\n      {items.map((item) => {\n        const selected = item.value === value\n        const tone = item.tone ?? \"default\"\n        const toneClassName =\n          tone === \"success\"\n            ? \"data-[selected=true]:border-emerald-500/40 data-[selected=true]:text-emerald-950 dark:data-[selected=true]:text-emerald-100\"\n            : tone === \"warning\"\n              ? \"data-[selected=true]:border-amber-500/45 data-[selected=true]:text-amber-950 dark:data-[selected=true]:text-amber-100\"\n              : tone === \"destructive\"\n                ? \"data-[selected=true]:border-destructive/45 data-[selected=true]:text-destructive\"\n                : \"data-[selected=true]:border-primary\"\n        const activeClassName =\n          tone === \"success\"\n            ? \"bg-emerald-500/10\"\n            : tone === \"warning\"\n              ? \"bg-amber-500/10\"\n              : tone === \"destructive\"\n                ? \"bg-destructive/10\"\n                : \"bg-primary/8\"\n\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            data-selected={selected}\n            onClick={() => onValueChange(item.value)}\n            className={cn(\n              \"relative overflow-hidden rounded-md border bg-card p-3 text-left transition-colors outline-none\",\n              \"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30\",\n              toneClassName\n            )}\n          >\n            {selected ? (\n              <motion.div\n                layoutId=\"animated-toggle-card-active\"\n                className={cn(\"absolute inset-0\", activeClassName)}\n                transition={{ duration: reduceMotion ? 0 : 0.18 }}\n              />\n            ) : null}\n            <div className=\"relative flex items-start gap-3\">\n              {item.icon ? (\n                <div className=\"mt-0.5 text-muted-foreground\">{item.icon}</div>\n              ) : null}\n              <div>\n                <div className=\"text-sm font-medium\">{item.title}</div>\n                {item.description ? (\n                  <div className=\"mt-1 text-xs leading-5 text-muted-foreground\">\n                    {item.description}\n                  </div>\n                ) : null}\n              </div>\n            </div>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}