{"name":"upload-button","title":"Upload Button","type":"registry:ui","dependencies":["@better-upload/client","lucide-react"],"registryDependencies":["button"],"files":[{"path":"ui/upload-button.tsx","type":"registry:ui","content":"import { Button } from '@/components/ui/button';\nimport type { UploadHookControl } from '@better-upload/client';\nimport { Loader2, Upload } from 'lucide-react';\nimport { useId } from 'react';\n\ntype UploadButtonProps = {\n  control: UploadHookControl<false>;\n  id?: string;\n  accept?: string;\n  metadata?: Record<string, unknown>;\n  uploadOverride?: (\n    ...args: Parameters<UploadHookControl<false>['upload']>\n  ) => void;\n\n  // Add any additional props you need.\n};\n\nexport function UploadButton({\n  control: { upload, isPending },\n  id: _id,\n  accept,\n  metadata,\n  uploadOverride,\n}: UploadButtonProps) {\n  const id = useId();\n\n  return (\n    <Button disabled={isPending} className=\"relative\" type=\"button\">\n      <label htmlFor={_id || id} className=\"absolute inset-0 cursor-pointer\">\n        <input\n          id={_id || id}\n          disabled={isPending}\n          className=\"absolute inset-0 size-0 opacity-0\"\n          type=\"file\"\n          accept={accept}\n          onChange={(e) => {\n            if (e.target.files?.[0] && !isPending) {\n              if (uploadOverride) {\n                uploadOverride(e.target.files[0], { metadata });\n              } else {\n                upload(e.target.files[0], { metadata });\n              }\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n      {isPending ? (\n        <>\n          <Loader2 className=\"size-4 animate-spin\" />\n          Upload file\n        </>\n      ) : (\n        <>\n          <Upload className=\"size-4\" />\n          Upload file\n        </>\n      )}\n    </Button>\n  );\n}\n"}]}