{"_id":"@allem-ui/file-upload","name":"@allem-ui/file-upload","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@allem-ui/file-upload","version":"0.0.2","description":"File upload components with drag-and-drop for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/file-upload"},"keywords":["allem-ui","file-upload","drag-drop","dropzone","react","components"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/file-upload@0.0.2","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-sQw+N2o+QUrOajuH62UOsa6KvbdzZElUIKrATYuAjnVKnLZVPTF/dsT4Ii8nlW2foA2Bc15FGrxRE3iT2tkf1g==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/9f06d7c9b92b976704bc93cc063c2d12/allem-ui-file-upload-0.0.2.tgz","_from":"file:allem-ui-file-upload-0.0.2.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-sQw+N2o+QUrOajuH62UOsa6KvbdzZElUIKrATYuAjnVKnLZVPTF/dsT4Ii8nlW2foA2Bc15FGrxRE3iT2tkf1g==","shasum":"feb5e3e2ae0a8bcaac668afec8bb78d81f92712f","tarball":"https://registry.npmjs.org/@allem-ui/file-upload/-/file-upload-0.0.2.tgz","fileCount":8,"unpackedSize":67252,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBKonzp11nJ4QOgyFX2Y0WYsj+EgICIfqVTtqjhkhOiDAiAkgKhQk6eXjCoP9MNamfW7nzvxkfVrxavVk76bdAlTQg=="}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/file-upload_0.0.2_1779581028258_0.39470246387618957"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-24T00:03:48.107Z","0.0.2":"2026-05-24T00:03:48.389Z","modified":"2026-05-24T00:03:48.670Z"},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"description":"File upload components with drag-and-drop for Allem UI","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","file-upload","drag-drop","dropzone","react","components"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/file-upload"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"license":"MIT","readme":"# @allem-ui/file-upload\n\nDrag-and-drop file upload components for [Allem UI](https://github.com/kingofmit/allem-ui) — with image previews, progress tracking, validation, and a headless trigger option.\n\n## Install\n\n```bash\nnpm install @allem-ui/file-upload @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/file-upload\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport { FileUpload, FileUploadList, useFileUpload } from \"@allem-ui/file-upload\";\n\nfunction App() {\n  const { files, addFiles, removeFile, updateProgress, setStatus } = useFileUpload({\n    maxFiles: 5,\n    maxSize: 10 * 1024 * 1024, // 10MB\n    accept: [\"image/*\", \".pdf\"],\n  });\n\n  const handleUpload = async (newFiles: File[]) => {\n    addFiles(newFiles);\n    // Your upload logic here — call updateProgress() and setStatus()\n  };\n\n  return (\n    <div>\n      <FileUpload\n        onFilesSelected={handleUpload}\n        accept=\"image/*,.pdf\"\n        multiple\n      />\n      <FileUploadList files={files} onRemove={removeFile} />\n    </div>\n  );\n}\n```\n\n## Components\n\n### FileUpload\n\nDrop zone with click-to-browse. Shows an upload icon and instructions by default, or accepts custom children.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `onFilesSelected` | `(files: File[]) => void` | — | Called with selected files |\n| `accept` | `string` | — | Accepted file types (e.g. `\"image/*,.pdf\"`) |\n| `multiple` | `boolean` | `true` | Allow multiple files |\n| `disabled` | `boolean` | `false` | Disable the drop zone |\n| `className` | `string` | — | Additional CSS classes |\n\n### FileUploadList\n\nRenders a list of `FileUploadItem` components.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `files` | `UploadFile[]` | — | Array of file objects |\n| `onRemove` | `(id: string) => void` | — | Remove file callback |\n\n### FileUploadItem\n\nIndividual file row with thumbnail/icon, name, size, progress bar, and status.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `file` | `UploadFile` | — | File object to display |\n| `onRemove` | `(id: string) => void` | — | Remove callback |\n\n### FileUploadTrigger\n\nHeadless trigger — wraps any child element as a file upload button.\n\n```tsx\nimport { FileUploadTrigger } from \"@allem-ui/file-upload\";\n\n<FileUploadTrigger onFilesSelected={handleFiles} accept=\"image/*\">\n  <button>Choose files</button>\n</FileUploadTrigger>\n```\n\n### useFileUpload\n\nHook for managing file state with validation.\n\n```tsx\nconst {\n  files,          // UploadFile[]\n  addFiles,       // (files: File[]) => void\n  removeFile,     // (id: string) => void\n  updateProgress, // (id: string, progress: number) => void\n  setStatus,      // (id: string, status, error?) => void\n  clearFiles,     // () => void\n} = useFileUpload({\n  maxFiles: 10,\n  maxSize: 5 * 1024 * 1024,\n  accept: [\"image/*\", \".pdf\", \".docx\"],\n});\n```\n\n## UploadFile Type\n\n```ts\ninterface UploadFile {\n  id: string;\n  file: File;\n  name: string;\n  size: number;\n  type: string;\n  preview?: string;      // Object URL for images\n  progress?: number;     // 0-100\n  status: \"idle\" | \"uploading\" | \"success\" | \"error\";\n  error?: string;\n}\n```\n\n## Features\n\n- Drag-and-drop with visual feedback\n- Click to open native file picker\n- Image thumbnail previews (via `URL.createObjectURL`)\n- File type and size validation\n- Per-file progress bars\n- Status indicators (uploading spinner, success check, error)\n- Remove individual files\n- Keyboard accessible\n- Dark mode support\n- Zero dependencies\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-6bc8f0c297de058d7987fad70eec16cf"}