{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "specials-magnetic-drawer-demo",
  "type": "registry:component",
  "title": "Magnetic Drawer Demo",
  "description": "Demo for the Magnetic Drawer component",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/specials/magnetic-drawer-demo.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { MagneticDrawer } from \"./magnetic-drawer\";\nimport { Settings, Bell, User, Lock, Palette, Globe } from \"lucide-react\";\n\nexport default function MagneticDrawerDemo() {\n    const [open, setOpen] = useState(false);\n\n    return (\n        <div className=\"relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-950 dark:to-neutral-900\">\n            <button\n                onClick={() => setOpen(true)}\n                className=\"rounded-full bg-neutral-900 px-8 py-3 font-medium text-white shadow-lg transition-transform hover:scale-105 dark:bg-white dark:text-neutral-900\"\n            >\n                Open Magnetic Drawer\n            </button>\n\n            <MagneticDrawer\n                open={open}\n                onOpenChange={setOpen}\n                snapPoints={[0.3, 0.6, 0.9]}\n            >\n                <div className=\"space-y-6\">\n                    <div>\n                        <h2 className=\"text-2xl font-bold\">Settings</h2>\n                        <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                            Drag to snap to different heights\n                        </p>\n                    </div>\n\n                    <div className=\"space-y-2\">\n                        <SettingItem icon={<User />} title=\"Profile\" description=\"Manage your account\" />\n                        <SettingItem icon={<Bell />} title=\"Notifications\" description=\"Configure alerts\" />\n                        <SettingItem icon={<Lock />} title=\"Privacy\" description=\"Security settings\" />\n                        <SettingItem icon={<Palette />} title=\"Appearance\" description=\"Theme and colors\" />\n                        <SettingItem icon={<Globe />} title=\"Language\" description=\"Region and language\" />\n                        <SettingItem icon={<Settings />} title=\"Advanced\" description=\"Developer options\" />\n                    </div>\n\n                    <div className=\"rounded-lg bg-neutral-100 p-4 dark:bg-neutral-800\">\n                        <p className=\"text-sm text-neutral-600 dark:text-neutral-400\">\n                            💡 <strong>Tip:</strong> Swipe quickly to jump between snap points, or drag slowly for precise control.\n                        </p>\n                    </div>\n                </div>\n            </MagneticDrawer>\n        </div>\n    );\n}\n\nfunction SettingItem({\n    icon,\n    title,\n    description,\n}: {\n    icon: React.ReactNode;\n    title: string;\n    description: string;\n}) {\n    return (\n        <div className=\"flex items-center gap-4 rounded-lg border border-neutral-200 bg-white p-4 transition-colors hover:bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800\">\n            <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-800\">\n                {icon}\n            </div>\n            <div className=\"flex-1\">\n                <h3 className=\"font-medium\">{title}</h3>\n                <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">{description}</p>\n            </div>\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}