@pawanr/shadcn-file-upload 0.1.0

package/README.md

@@ -0,0 +1,115 @@
+# shadcn-file-upload
+
+A production-ready React component package combining shadcn/ui with react-dropzone. Features file type icons, customizable progress bars, and Untitled UI-inspired design.
+
+## Features
+
+- 📂 **Drag and drop** support with visual states
+- 🎨 **Untitled UI design** patterns
+- 🖼️ **Beautiful SVG file icons** (dynamic based on extension)
+- 📊 **Progress bars** with customizable colors
+- ✨ **shadcn/ui** compatible styling
+- 🌑 **Dark mode** support
+- 📱 **Responsive** design
+- ✅ **TypeScript** support
+
+## Installation
+
+```bash
+npm install shadcn-file-upload
+# or
+yarn add shadcn-file-upload
+# or
+pnpm add shadcn-file-upload
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { FileUpload, useFileUpload, FileItem } from 'shadcn-file-upload';
+
+export default function MyComponent() {
+  const { files, addFiles, removeFile } = useFileUpload({
+    maxFiles: 5,
+    maxSize: 10 * 1024 * 1024, // 10MB
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif'],
+      'application/pdf': ['.pdf']
+    }
+  });
+
+  return (
+    <div className="space-y-4 max-w-xl mx-auto p-4">
+      <FileUpload
+        onChange={addFiles}
+        maxFiles={5}
+        maxSize={10 * 1024 * 1024}
+        accept={{ 'image/*': [], 'application/pdf': [] }}
+        value={files}
+      />
+
+      <div className="space-y-3">
+        {files.map((file) => (
+          <FileItem
+            key={file.id}
+            file={file}
+            onRemove={removeFile}
+            showProgress
+            progress={file.progress}
+            status={file.status}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### With Auto-Upload
+
+```tsx
+const { files, addFiles } = useFileUpload({
+  autoUpload: true,
+  onUpload: async (files) => {
+    const formData = new FormData();
+    files.forEach((file) => formData.append('files', file));
+    await fetch('/api/upload', { method: 'POST', body: formData });
+  }
+});
+```
+
+## Props
+
+### FileUpload
+
+| Prop           | Type                       | Default | Description                                 |
+| -------------- | -------------------------- | ------- | ------------------------------------------- |
+| `onChange`     | `(files: File[]) => void`  | -       | Callback when files are added               |
+| `maxFiles`     | `number`                   | `1`     | Maximum number of files                     |
+| `maxSize`      | `number`                   | `10MB`  | Maximum file size in bytes                  |
+| `accept`       | `Record<string, string[]>` | -       | Accepted MIME types                         |
+| `disabled`     | `boolean`                  | `false` | Disable dropzone                            |
+| `showFileList` | `boolean`                  | `true`  | Show internal file list (if not controlled) |
+
+### FileItem
+
+| Prop       | Type                                            | Default  | Description               |
+| ---------- | ----------------------------------------------- | -------- | ------------------------- |
+| `file`     | `FileWithMeta`                                  | -        | File object with metadata |
+| `progress` | `number`                                        | `0`      | Upload progress (0-100)   |
+| `status`   | `'idle' \| 'uploading' \| 'success' \| 'error'` | `'idle'` | Upload status             |
+| `onRemove` | `(file: File) => void`                          | -        | Callback to remove file   |
+
+## Working Example
+
+To see a working example of the component in action, check out the `example/` directory in the repository. You can run it locally:
+
+```bash
+npm run demo
+```
+
+## License
+
+MIT

package/dist/components/file-icon.d.ts

@@ -0,0 +1,4 @@
+import { FileIconProps } from '../types';
+
+export declare const FileIcon: ({ file, size, className }: FileIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-icon.d.ts.map

package/dist/components/file-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-icon.d.ts","sourceRoot":"","sources":["../../src/components/file-icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,eAAO,MAAM,QAAQ,GAAI,2BAAgC,aAAa,4CAQrE,CAAC"}

package/dist/components/file-item.d.ts

@@ -0,0 +1,4 @@
+import { FileItemProps } from '../types';
+
+export declare const FileItem: ({ file, progress, progressColor, onRemove, showProgress, status, error, className }: FileItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-item.d.ts.map

package/dist/components/file-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../src/components/file-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAkCzC,eAAO,MAAM,QAAQ,GAAI,qFAStB,aAAa,4CAqDf,CAAC"}

package/dist/components/file-upload.d.ts

@@ -0,0 +1,4 @@
+import { FileUploadProps } from '../types';
+
+export declare const FileUpload: ({ onChange, onUpload, maxFiles, maxSize, accept, disabled, multiple, className, dropzoneClassName, children }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA4B3C,eAAO,MAAM,UAAU,GAAI,+GAaxB,eAAe,4CAoFjB,CAAC"}

package/dist/hooks/use-file-upload.d.ts

@@ -0,0 +1,4 @@
+import { UseFileUploadOptions, UseFileUploadReturn } from '../types';
+
+export declare const useFileUpload: ({ maxFiles, maxSize, accept, onUpload, autoUpload, initialFiles }?: UseFileUploadOptions) => UseFileUploadReturn;
+//# sourceMappingURL=use-file-upload.d.ts.map

package/dist/hooks/use-file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-upload.d.ts","sourceRoot":"","sources":["../../src/hooks/use-file-upload.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAgB,MAAM,UAAU,CAAC;AAGnF,eAAO,MAAM,aAAa,GAAI,oEAO3B,oBAAyB,KAAG,mBAgI9B,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components/file-upload';
+export * from './components/file-item';
+export * from './components/file-icon';
+export * from './hooks/use-file-upload';
+export * from './lib/file-helpers';
+export * from './lib/file-icons';
+export * from './lib/utils';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}