{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-buttons-smart-upload",
  "title": "Smart Upload",
  "description": "Turn file uploads into engaging moments with smooth animations and intuitive visual feedback",
  "dependencies": [
    "framer-motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react"
  ],
  "files": [
    {
      "path": "registry/components/buttons/smart-upload/index.tsx",
      "content": "'use client';\nimport React, { useState, useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\n\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n  CloudUploadIcon,\n  File02Icon,\n  CheckmarkCircle04Icon,\n  FolderCheckIcon,\n  ScanIcon,\n} from '@hugeicons/core-free-icons';\n\ntype UploadStatus = 'idle' | 'scanning' | 'encrypting' | 'uploading' | 'done';\n\nconst SmartUpload: React.FC = () => {\n  const [status, setStatus] = useState<UploadStatus>('idle');\n  const [previewUrl, setPreviewUrl] = useState<string | null>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleButtonClick = () => {\n    if (status !== 'idle') return;\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n\n    if (previewUrl) URL.revokeObjectURL(previewUrl);\n    setPreviewUrl(URL.createObjectURL(file));\n\n    // Reset input so the same file can be re-selected\n    e.target.value = '';\n\n    // Sequence of animations\n    setStatus('scanning');\n    setTimeout(() => setStatus('encrypting'), 1800);\n    setTimeout(() => setStatus('uploading'), 3200);\n    setTimeout(() => {\n      setStatus('done');\n      setTimeout(() => {\n        setStatus('idle');\n        setPreviewUrl(null);\n      }, 3000);\n    }, 4500);\n  };\n\n  return (\n    <div className=\"relative flex flex-col items-center justify-center\">\n      {/* Hidden file input */}\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        className=\"hidden\"\n        onChange={handleFileChange}\n      />\n      {/* Main Container */}\n      <motion.div\n        layout\n        className={`\n            relative bg-neutral-900 rounded-2xl overflow-hidden shadow-2xl\n            flex flex-col items-center\n            transition-all duration-500 ease-[0.23,1,0.32,1]\n        `}\n        animate={{\n          width: status === 'idle' || status === 'done' ? 240 : 280,\n          height: status === 'idle' || status === 'done' ? 60 : 320,\n          borderRadius: 24,\n        }}\n      >\n        {/* State: Idle / Button */}\n        {status === 'idle' && (\n          <motion.button\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={handleButtonClick}\n            className=\"absolute inset-0 w-full h-full flex items-center justify-center gap-3 group cursor-pointer\"\n          >\n            <div className=\"p-2 bg-neutral-800 rounded-full group-hover:bg-neutral-700 transition-colors\">\n              <HugeiconsIcon\n                icon={CloudUploadIcon}\n                strokeWidth={2}\n                className=\"w-5 h-5 text-neutral-300\"\n              />\n            </div>\n            <span className=\"text-neutral-200 font-medium\">\n              Upload Document\n            </span>\n          </motion.button>\n        )}\n\n        {/* State: Processing (Scanning/Encrypting/Uploading) */}\n        {(status === 'scanning' ||\n          status === 'encrypting' ||\n          status === 'uploading') && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            className=\"w-full h-full p-6 flex flex-col items-center\"\n          >\n            {/* Document Visual */}\n            <div className=\"relative w-32 h-40 bg-neutral-800 rounded-xl border border-neutral-700 shadow-inner flex items-center justify-center mb-6 overflow-hidden\">\n              {previewUrl ? (\n                <img\n                  src={previewUrl}\n                  alt=\"preview\"\n                  className=\"absolute inset-0 w-full h-full object-cover\"\n                />\n              ) : (\n                <HugeiconsIcon\n                  icon={File02Icon}\n                  strokeWidth={2}\n                  className=\"w-12 h-12 text-neutral-600\"\n                />\n              )}\n\n              {/* Scanning Beam */}\n              {status === 'scanning' && (\n                <motion.div\n                  className=\"absolute top-0 left-0 w-full h-12 bg-gradient-to-b from-blue-500/0 via-blue-500/20 to-blue-500/0 border-b border-blue-400/50\"\n                  animate={{ top: ['-20%', '120%'] }}\n                  transition={{\n                    duration: 1.5,\n                    repeat: Infinity,\n                    ease: 'linear',\n                  }}\n                />\n              )}\n\n              {/* Encryption Grid Overlay */}\n              {status === 'encrypting' && (\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  className=\"absolute inset-0 bg-emerald-900/10 grid grid-cols-6 grid-rows-8 gap-1\"\n                >\n                  {Array.from({ length: 48 }).map((_, i) => (\n                    <motion.div\n                      key={i}\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: [0, 1, 0] }}\n                      transition={{\n                        duration: 0.5,\n                        delay: Math.random() * 1,\n                        repeat: Infinity,\n                      }}\n                      className=\"bg-emerald-500/30 rounded-[1px]\"\n                    />\n                  ))}\n                </motion.div>\n              )}\n\n              {/* Upload Progress Fill */}\n              {status === 'uploading' && (\n                <motion.div\n                  className=\"absolute bottom-0 left-0 w-full bg-blue-500/10\"\n                  initial={{ height: '0%' }}\n                  animate={{ height: '100%' }}\n                  transition={{ duration: 1.2, ease: 'easeInOut' }}\n                />\n              )}\n            </div>\n\n            {/* Status Text & Icon */}\n            <div className=\"flex flex-col items-center gap-2\">\n              <AnimatePresence mode=\"wait\">\n                <motion.div\n                  key={status}\n                  initial={{ y: 10, opacity: 0 }}\n                  animate={{ y: 0, opacity: 1 }}\n                  exit={{ y: -10, opacity: 0 }}\n                  className=\"flex items-center gap-2\"\n                >\n                  {status === 'scanning' && (\n                    <HugeiconsIcon\n                      icon={ScanIcon}\n                      strokeWidth={2}\n                      className=\"w-4 h-4 text-blue-400 animate-pulse\"\n                    />\n                  )}\n                  {status === 'encrypting' && (\n                    <HugeiconsIcon\n                      icon={FolderCheckIcon}\n                      strokeWidth={2}\n                      className=\"w-4 h-4 text-emerald-400\"\n                    />\n                  )}\n                  {status === 'uploading' && (\n                    <HugeiconsIcon\n                      icon={CloudUploadIcon}\n                      strokeWidth={2}\n                      className=\"w-4 h-4 text-purple-400 animate-bounce\"\n                    />\n                  )}\n\n                  <span className=\"text-sm font-mono text-neutral-400 uppercase tracking-wider\">\n                    {status === 'scanning' && 'Virus Scan...'}\n                    {status === 'encrypting' && 'Encrypting...'}\n                    {status === 'uploading' && 'Uploading...'}\n                  </span>\n                </motion.div>\n              </AnimatePresence>\n\n              {/* Progress Bar Container */}\n              <div className=\"w-48 h-1 bg-neutral-800 rounded-full overflow-hidden mt-2\">\n                <motion.div\n                  className=\"h-full bg-white shadow-[0_0_10px_rgba(255,255,255,0.5)]\"\n                  initial={{ width: '0%' }}\n                  animate={{\n                    width:\n                      status === 'scanning'\n                        ? '30%'\n                        : status === 'encrypting'\n                          ? '65%'\n                          : status === 'uploading'\n                            ? '100%'\n                            : '0%',\n                  }}\n                  transition={{ duration: 0.5 }}\n                />\n              </div>\n            </div>\n          </motion.div>\n        )}\n\n        {/* State: Done */}\n        {status === 'done' && (\n          <motion.div\n            initial={{ opacity: 0, scale: 0.8 }}\n            animate={{ opacity: 1, scale: 1 }}\n            className=\"absolute inset-0 w-full h-full flex items-center justify-center gap-2 overflow-hidden bg-green-metallic\"\n          >\n            <div className=\"absolute inset-0 bg-black/50\" />\n            <div className=\"relative flex items-center gap-2\">\n              <HugeiconsIcon\n                icon={CheckmarkCircle04Icon}\n                strokeWidth={2}\n                className=\"w-5 h-5 text-white\"\n              />\n              <span className=\"text-white font-semibold\">Complete</span>\n            </div>\n          </motion.div>\n        )}\n      </motion.div>\n\n      {/* Reflection/Shadow */}\n      <div\n        className={`\n        h-4 w-48 mx-auto mt-4 rounded-[100%] blur-xl transition-all duration-500\n        ${status === 'idle' ? 'bg-black/10' : 'bg-black/20 scale-x-110'}\n      `}\n      />\n    </div>\n  );\n};\n\nexport default SmartUpload;\n",
      "type": "registry:ui",
      "target": "components/odysseyui/smart-upload.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "green-metallic": "linear-gradient(145deg, hsl(145 70% 38%) 0%, hsl(145 70% 24%) 25%, hsl(145 70% 46%) 50%, hsl(145 70% 28%) 75%, hsl(145 70% 36%) 100%)"
    }
  },
  "css": {
    "@utility bg-green-metallic": {
      "background": "var(--green-metallic)"
    }
  },
  "type": "registry:ui"
}