{
  "name": "spreadsheet-import-dialog",
  "type": "registry:component",
  "dependencies": [
    "@unsanity/spreadsheet"
  ],
  "registryDependencies": [
    "dialog",
    "button"
  ],
  "files": [
    {
      "path": "components/spreadsheet/spreadsheet-import-dialog.tsx",
      "content": "\"use client\";\n\nimport { useCallback, useRef, useState } from \"react\";\nimport { Upload } from \"lucide-react\";\nimport { useSpreadsheetImport } from \"@unsanity/spreadsheet\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\n\ntype SpreadsheetImportDialogProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n};\n\nexport function SpreadsheetImportDialog({\n  open,\n  onOpenChange,\n}: SpreadsheetImportDialogProps) {\n  const { importFiles } = useSpreadsheetImport();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const handleFiles = useCallback(\n    async (list: File[] | FileList) => {\n      const count = await importFiles(list);\n      if (count > 0) onOpenChange(false);\n    },\n    [importFiles, onOpenChange]\n  );\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const list = e.target.files;\n      if (list?.length) void handleFiles(list);\n      e.target.value = \"\";\n    },\n    [handleFiles]\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"sm:max-w-md\" showCloseButton>\n        <DialogHeader>\n          <DialogTitle>Import sheets</DialogTitle>\n          <DialogDescription>\n            Upload one or more .csv or .tsv files. Each file becomes a new sheet\n            after the current tab. Empty rows and columns are trimmed.\n          </DialogDescription>\n        </DialogHeader>\n        <ImportDropZone\n          isDragging={isDragging}\n          onClick={() => inputRef.current?.click()}\n          onDragOver={(e) => {\n            e.preventDefault();\n            setIsDragging(true);\n          }}\n          onDragLeave={() => setIsDragging(false)}\n          onDrop={(e) => {\n            e.preventDefault();\n            setIsDragging(false);\n            if (e.dataTransfer.files.length) void handleFiles(e.dataTransfer.files);\n          }}\n        />\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept=\".csv,.tsv,text/csv,text/tab-separated-values\"\n          multiple\n          className=\"hidden\"\n          onChange={onInputChange}\n        />\n        <DialogFooter>\n          <Button type=\"button\" variant=\"outline\" onClick={() => onOpenChange(false)}>\n            Cancel\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction ImportDropZone({\n  isDragging,\n  onClick,\n  onDragOver,\n  onDragLeave,\n  onDrop,\n}: {\n  isDragging: boolean;\n  onClick: () => void;\n  onDragOver: (e: React.DragEvent) => void;\n  onDragLeave: () => void;\n  onDrop: (e: React.DragEvent) => void;\n}) {\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          onClick();\n        }\n      }}\n      className={[\n        \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-8 text-center text-sm transition-colors outline-none\",\n        isDragging\n          ? \"border-primary bg-accent/50\"\n          : \"border-muted-foreground/25 hover:border-muted-foreground/50 hover:bg-muted/40\",\n      ].join(\" \")}\n      onClick={onClick}\n      onDragOver={onDragOver}\n      onDragLeave={onDragLeave}\n      onDrop={onDrop}\n    >\n      <Upload className=\"size-8 text-muted-foreground\" />\n      <p className=\"text-muted-foreground\">Click or drag and drop .csv / .tsv files</p>\n      <p className=\"text-xs text-muted-foreground/80\">Multiple files create multiple sheets</p>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}