{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transitions-view-toggle",
  "type": "registry:component",
  "title": "View Toggle",
  "description": "Smoothly rearrange items with multiple animation styles when switching views.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/transitions/list-grid.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useId } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport { Grid, List } from \"lucide-react\";\n\nexport interface ListGridItem {\n    id: string | number;\n    title: string;\n    subtitle: string;\n    status: string;\n    avatar?: string;\n}\n\ninterface ListGridProps {\n    items: ListGridItem[];\n    className?: string;\n    views?: Array<\"grid\" | \"list\" | \"compact\" | \"card\">;\n    variant?: \"smooth\" | \"stagger\" | \"scale-fade\" | \"crossfade\";\n}\n\nexport function ListGrid({ items, className, views = [\"grid\", \"list\"], variant = \"smooth\" }: ListGridProps) {\n    const [view, setView] = useState<\"grid\" | \"list\" | \"compact\" | \"card\">(views[0]);\n    const id = useId();\n\n    const getItemTransition = (index: number) => {\n        switch (variant) {\n            case \"smooth\":\n                return { type: \"spring\" as const, bounce: 0.2, duration: 0.6 };\n            case \"stagger\":\n                return { type: \"spring\" as const, bounce: 0.2, duration: 0.6, delay: index * 0.05 };\n            case \"scale-fade\":\n                return { type: \"spring\" as const, bounce: 0.15, duration: 0.5 };\n            case \"crossfade\":\n                return { type: \"tween\" as const, duration: 0.3 };\n            default:\n                return { type: \"spring\" as const, bounce: 0.2, duration: 0.6 };\n        }\n    };\n\n    const getItemInitial = () => {\n        switch (variant) {\n            case \"scale-fade\":\n                return { opacity: 0, scale: 0.9 };\n            case \"crossfade\":\n                return { opacity: 0 };\n            default:\n                return { opacity: 0, scale: 0.9 };\n        }\n    };\n\n    const getItemAnimate = () => {\n        switch (variant) {\n            case \"scale-fade\":\n                return { opacity: 1, scale: 1 };\n            case \"crossfade\":\n                return { opacity: 1 };\n            default:\n                return { opacity: 1, scale: 1 };\n        }\n    };\n\n    return (\n        <div className={cn(\"flex flex-col items-center justify-center p-8 bg-zinc-50 dark:bg-zinc-900 rounded-xl min-h-[400px] w-full\", className)}>\n            <div className=\"w-full max-w-md\">\n                <div className=\"flex justify-between items-center mb-6\">\n                    <h3 className=\"text-sm font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider\">\n                        Items\n                    </h3>\n                    <div className=\"flex bg-white dark:bg-zinc-800 rounded-lg p-1 border border-zinc-200 dark:border-zinc-700\">\n                        <button\n                            onClick={() => setView(\"grid\")}\n                            className={cn(\n                                \"p-2 rounded-md transition-colors relative\",\n                                view === \"grid\"\n                                    ? \"text-zinc-900 dark:text-zinc-100\"\n                                    : \"text-zinc-400 hover:text-zinc-600\"\n                            )}\n                        >\n                            {view === \"grid\" && (\n                                <motion.div\n                                    layoutId={`${id}-bg`}\n                                    className=\"absolute inset-0 bg-zinc-100 dark:bg-zinc-700 rounded-md -z-10 shadow-sm\"\n                                    transition={{ duration: 0.2 }}\n                                />\n                            )}\n                            <Grid size={16} />\n                        </button>\n                        <button\n                            onClick={() => setView(\"list\")}\n                            className={cn(\n                                \"p-2 rounded-md transition-colors relative\",\n                                view === \"list\"\n                                    ? \"text-zinc-900 dark:text-zinc-100\"\n                                    : \"text-zinc-400 hover:text-zinc-600\"\n                            )}\n                        >\n                            {view === \"list\" && (\n                                <motion.div\n                                    layoutId={`${id}-bg`}\n                                    className=\"absolute inset-0 bg-zinc-100 dark:bg-zinc-700 rounded-md -z-10 shadow-sm\"\n                                    transition={{ duration: 0.2 }}\n                                />\n                            )}\n                            <List size={16} />\n                        </button>\n                    </div>\n                </div>\n\n                <motion.div\n                    layout\n                    className={cn(\n                        \"grid gap-4\",\n                        view === \"grid\" ? \"grid-cols-2\" : \"grid-cols-1\"\n                    )}\n                >\n                    <AnimatePresence>\n                        {items.map((item, index) => (\n                            <motion.div\n                                key={item.id}\n                                layout\n                                initial={getItemInitial()}\n                                animate={getItemAnimate()}\n                                exit={getItemInitial()}\n                                transition={getItemTransition(index)}\n                                className={cn(\n                                    \"bg-white dark:bg-zinc-800 p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 shadow-sm hover:shadow-md transition-shadow cursor-default\",\n                                    view === \"list\" && \"flex items-center justify-between\"\n                                )}\n                            >\n                                <div className=\"flex items-center gap-3\">\n                                    {item.avatar ? (\n                                        <img\n                                            src={item.avatar}\n                                            alt={item.title}\n                                            className=\"w-10 h-10 rounded-full object-cover\"\n                                        />\n                                    ) : (\n                                        <div className=\"w-10 h-10 rounded-full bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-700 dark:to-zinc-800 flex items-center justify-center text-xs font-bold text-zinc-500\">\n                                            {item.title.substring(0, 2).toUpperCase()}\n                                        </div>\n                                    )}\n                                    <div>\n                                        <h4 className=\"font-semibold text-zinc-900 dark:text-zinc-100 text-sm\">\n                                            {item.title}\n                                        </h4>\n                                        <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n                                            {item.subtitle}\n                                        </p>\n                                    </div>\n                                </div>\n\n                                {view === \"list\" && (\n                                    <span\n                                        className={cn(\n                                            \"px-2 py-1 rounded-full text-xs font-medium\",\n                                            item.status === \"Active\" &&\n                                            \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400\",\n                                            item.status === \"Pending\" &&\n                                            \"bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400\",\n                                            item.status === \"Archived\" &&\n                                            \"bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400\"\n                                        )}\n                                    >\n                                        {item.status}\n                                    </span>\n                                )}\n\n                                {view === \"grid\" && (\n                                    <div className=\"mt-4 flex justify-between items-center\">\n                                        <span\n                                            className={cn(\n                                                \"px-2 py-1 rounded-full text-xs font-medium\",\n                                                item.status === \"Active\" &&\n                                                \"bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400\",\n                                                item.status === \"Pending\" &&\n                                                \"bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400\",\n                                                item.status === \"Archived\" &&\n                                                \"bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400\"\n                                            )}\n                                        >\n                                            {item.status}\n                                        </span>\n                                    </div>\n                                )}\n                            </motion.div>\n                        ))}\n                    </AnimatePresence>\n                </motion.div>\n            </div>\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}