{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-dropzone-demo",
  "type": "registry:component",
  "registryDependencies": [
    "halo-dropzone"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-dropzone-demo.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useEffect, useState } from \"react\"\n\nimport {\n  DropzoneUploadFileList,\n  fileKey,\n  HaloDropzone,\n  type QueuedFile,\n} from \"@/registry/default/ui/halo-dropzone\"\n\nexport default function HaloDropzoneDemo() {\n  const [queue, setQueue] = useState<QueuedFile[]>([])\n\n  const handleFiles = useCallback((files: File[]) => {\n    const stamp = Date.now()\n    setQueue((prev) => [\n      ...prev,\n      ...files.map((file, i) => ({\n        id: `${fileKey(file)}-${stamp}-${i}`,\n        file,\n        progress: 0,\n        done: false,\n      })),\n    ])\n  }, [])\n\n  const remove = useCallback((id: string) => {\n    setQueue((prev) => prev.filter((r) => r.id !== id))\n  }, [])\n\n  const hasActiveUploads = queue.some((r) => !r.done)\n\n  useEffect(() => {\n    if (!hasActiveUploads) {\n      return\n    }\n    const id = window.setInterval(() => {\n      setQueue((prev) =>\n        prev.map((row) => {\n          if (row.done) {\n            return row\n          }\n          const step = 4 + Math.random() * 9\n          const next = Math.min(100, row.progress + step)\n          if (next >= 100) {\n            return { ...row, progress: 100, done: true }\n          }\n          return { ...row, progress: next }\n        })\n      )\n    }, 95)\n    return () => window.clearInterval(id)\n  }, [hasActiveUploads])\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"w-full max-w-2xl space-y-6\">\n        <div className=\"text-center\">\n          <h2 className=\"text-balance font-semibold text-2xl text-foreground\">\n            Animated dropzone\n          </h2>\n          <p className=\"mt-2 text-pretty text-muted-foreground text-sm\">\n            Drag in files or use the file picker: images can preview inside the\n            zone, and queued files show as rows with progress below.\n          </p>\n        </div>\n        <HaloDropzone\n          accept=\"image/*,application/pdf,text/plain,application/json,text/markdown,.doc,.docx,.xlsx,.ppt,.pptx,.csv\"\n          formatHint=\"Try images plus PDF, Office, JSON, MD…\"\n          multiple\n          onFiles={handleFiles}\n          showSuccessThumbnails={false}\n          successResetMs={4000}\n          translucent\n        />\n        <DropzoneUploadFileList\n          className=\"w-full\"\n          items={queue}\n          onRemove={remove}\n        />\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}