{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-drawer",
  "title": "Animated Drawer",
  "description": "component for the Animated Drawer",
  "dependencies": [
    "lucide-react",
    "motion",
    "vaul",
    "react-use-measure"
  ],
  "files": [
    {
      "path": "app/registry/animateddrawer/demo.tsx",
      "content": "'use client';\n\nimport { useState, useMemo } from 'react';\nimport { Drawer } from 'vaul';\nimport useMeasure from 'react-use-measure';\nimport { motion } from 'motion/react';\nimport { Button } from '@/components/ui/button';\nimport { X } from 'lucide-react';\nimport {\n  BannedIcon,\n  DangerIcon,\n  FaceIDIcon,\n  LockIcon,\n  PassIcon,\n  PhraseIcon,\n  RecoveryPhraseIcon,\n  ShieldIcon,\n  WarningIcon,\n} from '@/components/demo';\nexport const AnimatedDrawer = () => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [view, setView] = useState('default');\n  const [elementRef, bounds] = useMeasure();\n\n  const content = useMemo(() => {\n    switch (view) {\n      case 'default':\n        return (\n          <div className=\"\">\n            <div className=\"flex items-center justify-between w-full\">\n              <h2 className=\"text-lg font-medium text-neutral-900 dark:text-neutral-100\">Wallet Settings</h2>\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                className=\"rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n                onClick={() => setIsOpen(false)}\n              >\n                <X className=\"text-neutral-600 dark:text-neutral-400\" size=\"18\" />\n              </Button>\n            </div>\n\n            <div className=\"mt-6 flex flex-col items-start gap-4\">\n              <button\n                onClick={() => setView('key')}\n                className=\"bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100 font-medium flex items-center gap-2 w-full rounded-2xl px-4 py-3.5 transition-colors\"\n              >\n                <LockIcon />\n                View Private Key\n              </button>\n              <button\n                onClick={() => setView('pharse')}\n                className=\"bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-900 dark:text-neutral-100 font-medium flex items-center gap-2 w-full rounded-2xl px-4 py-3.5 transition-colors\"\n              >\n                <PassIcon />\n                View Recovery Phrase\n              </button>\n              <button\n                onClick={() => setView('remove')}\n                className=\"bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 font-medium flex items-center gap-2 w-full rounded-2xl px-4 py-3.5 transition-colors\"\n              >\n                <WarningIcon />\n                Remove Wallet\n              </button>\n            </div>\n          </div>\n        );\n      case 'remove':\n        return (\n          <div className=\"space-y-4\">\n            <div className=\"flex justify-between\">\n              <DangerIcon />\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                className=\"rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n                onClick={() => setIsOpen(false)}\n              >\n                <X className=\"text-neutral-600 dark:text-neutral-400\" size=\"18\" />\n              </Button>\n            </div>\n            <h2 className=\"font-medium text-xl text-neutral-900 dark:text-neutral-100\">Remove Wallet?</h2>\n\n            <p className=\"text-neutral-500 dark:text-neutral-400 font-light text-lg\">\n              This action cannot be undone. Make sure you&apos;ve backed up your recovery phrase before proceeding. \n              You&apos;ll lose access to all funds if you don&apos;t have a backup.\n            </p>\n            <div className=\"flex items-center justify-start gap-4\">\n              <Button\n                onClick={() => setView('default')}\n                className=\"w-36 h-12 bg-neutral-200 dark:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 text-neutral-900 dark:text-neutral-100 rounded-3xl text-lg transition-colors\"\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => setView('default')}\n                className=\"w-36 h-12 bg-red-500 hover:bg-red-600 text-white rounded-3xl text-lg transition-colors\"\n              >\n                Remove\n              </Button>\n            </div>\n          </div>\n        );\n      case 'pharse':\n        return (\n          <div className=\"space-y-4\">\n            <div className=\"flex justify-between\">\n              <RecoveryPhraseIcon />\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                className=\"rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n                onClick={() => setIsOpen(false)}\n              >\n                <X className=\"text-neutral-600 dark:text-neutral-400\" size=\"18\" />\n              </Button>\n            </div>\n            <h2 className=\"font-medium text-xl text-neutral-900 dark:text-neutral-100\">Recovery Phrase</h2>\n            <p className=\"text-neutral-500 dark:text-neutral-400 font-light text-lg\">\n              Your recovery phrase is the master key to your wallet. Write it down and store it securely. \n              Anyone with this phrase can access your funds.\n            </p>\n            <div className=\"border-t border-neutral-200 dark:border-neutral-700 space-y-5 text-neutral-500 dark:text-neutral-400 text-lg\">\n              <div className=\"flex items-center gap-4 mt-5\">\n                <ShieldIcon />\n                <h3>Store it in a secure location</h3>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <PhraseIcon />\n                <h3>Never share with anyone</h3>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <BannedIcon />\n                <h3>We cannot recover it for you</h3>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-start gap-4\">\n              <Button\n                onClick={() => setView('default')}\n                className=\"w-36 h-12 bg-neutral-200 dark:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 text-neutral-900 dark:text-neutral-100 rounded-3xl text-lg transition-colors\"\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => setView('default')}\n                className=\"w-42 h-12 bg-sky-400 hover:bg-sky-500 text-white rounded-3xl text-lg flex items-center gap-3 transition-colors\"\n              >\n                <FaceIDIcon />\n                Show Phrase\n              </Button>\n            </div>\n          </div>\n        );\n      case 'key':\n        return (\n          <div className=\"space-y-4\">\n             <div className=\"flex justify-between\">\n              <RecoveryPhraseIcon />\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                className=\"rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800\"\n                onClick={() => setIsOpen(false)}\n              >\n                <X className=\"text-neutral-600 dark:text-neutral-400\" size=\"18\" />\n              </Button>\n            </div>\n            <h2 className=\"font-medium text-xl text-neutral-900 dark:text-neutral-100\">Private Key</h2>\n            <p className=\"text-neutral-500 dark:text-neutral-400 font-light text-lg\">\n              Your private key is a cryptographic key that proves ownership of your wallet. \n              Treat it with the same security as your bank account details.\n            </p>\n\n            <div className=\"border-t border-neutral-200 dark:border-neutral-700 space-y-5 text-neutral-500 dark:text-neutral-400 text-lg\">\n              <div className=\"flex items-center gap-4 mt-5\">\n                <ShieldIcon />\n                <h3>Store it in a secure location</h3>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <PhraseIcon />\n                <h3>Never share with anyone</h3>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <BannedIcon />\n                <h3>We cannot recover it for you</h3>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-start gap-4\">\n              <Button\n                onClick={() => setView('default')}\n                className=\"w-36 h-12 bg-neutral-200 dark:bg-neutral-700 hover:bg-neutral-300 dark:hover:bg-neutral-600 text-neutral-900 dark:text-neutral-100 rounded-3xl text-lg transition-colors\"\n              >\n                Cancel\n              </Button>\n              <Button\n                onClick={() => setView('default')}\n                className=\"w-42 h-12 bg-sky-400 hover:bg-sky-500 text-white rounded-3xl text-lg flex items-center gap-3 transition-colors\"\n              >\n                <FaceIDIcon />\n                Show Key\n              </Button>\n            </div>\n          </div>\n        );\n    }\n  }, [view]);\n\n  return (\n    <>\n      <Button\n        className=\"mt-5 px-6 rounded-full bg-white dark:bg-neutral-800 py-2 font-medium text-black dark:text-white border border-neutral-200 dark:border-neutral-700 transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 focus-visible:shadow-focus-ring-button md:font-medium\"\n        onClick={() => setIsOpen(true)}\n      >\n        Click Me To Open Drawer\n      </Button>\n      <Drawer.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Drawer.Portal>\n          <Drawer.Overlay className=\"fixed inset-0 bg-black/40\" onClick={() => setIsOpen(false)} />\n          <Drawer.Content\n            asChild\n            className=\"fixed inset-x-4 bottom-4 z-10 mx-auto h-64 max-w-[361px] overflow-hidden rounded-[36px] bg-white dark:bg-neutral-900 outline-hidden md:mx-auto md:w-full\"\n          >\n            <motion.div animate={{ height: bounds.height }}>\n              <div className=\"p-6\" ref={elementRef}>\n                {content}\n              </div>\n            </motion.div>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  );\n};\n\n\n",
      "type": "registry:component",
      "target": "components/spectrumui/animateddrawer.tsx"
    }
  ],
  "type": "registry:component"
}