react-smart-file-uploader 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 React Smart Image Uploader
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITness FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,539 @@
+# React Smart File Uploader
+
+🚀 A powerful and customizable file uploader component for React supporting images, PDFs, Excel, and Word documents with intelligent compression, cropping, and session persistence.
+
+## Features
+
+- ✨ **Easy to use**: Simple API with sensible defaults
+- 📄 **Multiple file types**: Images, PDFs, Excel (.xlsx, .xls), Word (.docx, .doc)
+- 🗜️ **Smart compression**: Automatic compression for images and PDFs
+- 🖼️ **Image cropping**: Circle and square cropping with customizable dimensions
+- 💾 **Session persistence**: Keep uploaded files across page refreshes
+- 🎨 **Fully customizable**: Replace the default UI with your own components
+- 📱 **Responsive**: Works great on desktop and mobile
+- 🔧 **TypeScript**: Full TypeScript support with comprehensive types
+- 🌐 **Universal**: Works with any React application
+- 📦 **Lightweight**: Minimal dependencies
+
+## Installation
+
+```bash
+npm install react-smart-file-uploader
+```
+
+or
+
+```bash
+yarn add react-smart-file-uploader
+```
+
+## Quick Start
+
+```tsx
+import React, { useState } from 'react';
+import { ImageUploader, ProcessedImage } from 'react-smart-file-uploader';
+
+function App() {
+  const [files, setFiles] = useState<ProcessedImage[]>([]);
+
+  return (
+    <div>
+      <ImageUploader
+        multiple
+        onFilesChange={setFiles}
+        accept="image/*"
+        maxFiles={5}
+        maxSize={5 * 1024 * 1024} // 5MB
+      />
+      
+      <div>
+        <h3>Uploaded Files:</h3>
+        {files.map((file, index) => (
+          <div key={index}>
+            <img src={file.url} alt={file.file.name} width={100} />
+            <p>{file.file.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## Supported File Types
+
+The uploader intelligently handles different file types:
+
+### Images
+- **Formats**: JPG, PNG, GIF, WebP, SVG, etc.
+- **Compression**: ✅ Automatic (configurable quality)
+- **Cropping**: ✅ Supported (circle/square)
+- **Preview**: ✅ Thumbnail display
+
+### PDFs
+- **Formats**: PDF
+- **Compression**: ✅ Automatic optimization
+- **Cropping**: ❌ Not applicable
+- **Preview**: ✅ File icon display
+
+### Excel Spreadsheets
+- **Formats**: .xlsx, .xls
+- **Compression**: ❌ Disabled (preserves data integrity)
+- **Cropping**: ❌ Not applicable
+- **Preview**: ✅ File icon display
+
+### Word Documents
+- **Formats**: .docx, .doc
+- **Compression**: ❌ Disabled (preserves formatting)
+- **Cropping**: ❌ Not applicable
+- **Preview**: ✅ File icon display
+
+## API Reference
+
+### ImageUploader Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `multiple` | `boolean` | `false` | Allow multiple file selection |
+| `accept` | `string` | `undefined` | File types to accept (e.g., "image/*", "application/pdf", ".xlsx,.xls,.docx,.doc") |
+| `maxFiles` | `number` | `10` | Maximum number of files |
+| `maxSize` | `number` | `5242880` | Maximum file size in bytes (5MB) |
+| `disabled` | `boolean` | `false` | Disable the uploader |
+| `compression` | `CompressionConfig \| null` | `{ quality: 0.2, maxWidth: 1920, maxHeight: 1080 }` | Compression settings for images and PDFs (pass `null` to disable) |
+| `crop` | `CropConfig` | `undefined` | Image cropping settings |
+| `session` | `SessionConfig` | `undefined` | Session persistence settings |
+| `customUI` | `(props: CustomUIProps) => ReactNode` | `undefined` | Custom UI renderer |
+| `showPreview` | `boolean` | `true` | Show file previews |
+| `showProgress` | `boolean` | `false` | Show upload progress |
+| `className` | `string` | `undefined` | CSS class name |
+| `style` | `CSSProperties` | `undefined` | Inline styles |
+| `uploadText` | `string` | `"Click to upload or drag and drop"` | Upload area text |
+| `dragText` | `string` | `"Drop files here"` | Drag active text |
+| `errorText` | `object` | See below | Error messages |
+| `onFilesChange` | `(files: ProcessedImage[]) => void` | `undefined` | Files change callback |
+| `onError` | `(error: string) => void` | `undefined` | Error callback |
+| `onProgress` | `(progress: number) => void` | `undefined` | Progress callback |
+| `onCrop` | `(croppedImage: ProcessedImage) => void` | `undefined` | Crop complete callback |
+
+### CompressionConfig
+
+```tsx
+interface CompressionConfig {
+  quality: number; // 0.1 to 1.0
+  maxWidth?: number;
+  maxHeight?: number;
+  convertSize?: number; // Convert to JPEG if larger than this size
+}
+```
+
+### CropConfig
+
+```tsx
+interface CropConfig {
+  enabled: boolean;
+  shape: 'circle' | 'square';
+  width?: number;
+  height?: number;
+  aspect?: number; // width/height ratio
+}
+```
+
+### SessionConfig
+
+```tsx
+interface SessionConfig {
+  enabled: boolean;
+  key?: string; // localStorage key
+  clearOnUnmount?: boolean;
+}
+```
+
+## Usage Examples
+
+### Basic Image Upload
+
+```tsx
+import { ImageUploader } from 'react-smart-file-uploader';
+
+function BasicUpload() {
+  return (
+    <ImageUploader
+      accept="image/*"
+      onFilesChange={(files) => console.log('Files:', files)}
+    />
+  );
+}
+```
+
+### Multi-Format File Upload
+
+```tsx
+function MultiFormatUpload() {
+  const [files, setFiles] = useState<ProcessedImage[]>([]);
+
+  return (
+    <ImageUploader
+      multiple
+      accept="image/*,.pdf,.xlsx,.xls,.docx,.doc"
+      maxFiles={10}
+      maxSize={10 * 1024 * 1024} // 10MB
+      onFilesChange={(files) => {
+        setFiles(files);
+        files.forEach(file => {
+          console.log('File type:', file.file.fileCategory);
+          console.log('Original size:', file.file.size);
+        });
+      }}
+    />
+  );
+}
+```
+
+### PDF Upload with Compression
+
+```tsx
+function PDFUpload() {
+  return (
+    <ImageUploader
+      multiple
+      accept=".pdf"
+      compression={{
+        quality: 0.7, // PDF compression quality
+        maxWidth: 1920,
+        maxHeight: 1080,
+      }}
+      onFilesChange={(files) => {
+        files.forEach(file => {
+          console.log('PDF compressed:', file.base64);
+        });
+      }}
+    />
+  );
+}
+```
+
+### Excel/Word Upload (No Compression)
+
+```tsx
+function DocumentUpload() {
+  return (
+    <ImageUploader
+      multiple
+      accept=".xlsx,.xls,.docx,.doc"
+      // Compression is automatically disabled for Excel and Word files
+      onFilesChange={(files) => {
+        files.forEach(file => {
+          console.log('Document uploaded:', file.file.name);
+          console.log('File category:', file.file.fileCategory);
+        });
+      }}
+    />
+  );
+}
+```
+```
+
+### Multi-Format File Upload
+
+```tsx
+function MultiFormatUpload() {
+  const [files, setFiles] = useState<ProcessedImage[]>([]);
+
+  return (
+    <ImageUploader
+      multiple
+      accept="image/*,.pdf,.xlsx,.xls,.docx,.doc"
+      maxFiles={10}
+      maxSize={10 * 1024 * 1024} // 10MB
+      onFilesChange={(files) => {
+        setFiles(files);
+        files.forEach(file => {
+          console.log('File type:', file.file.fileCategory);
+          console.log('Original size:', file.file.size);
+        });
+      }}
+    />
+  );
+}
+```
+
+### PDF Upload with Compression
+
+```tsx
+function PDFUpload() {
+  return (
+    <ImageUploader
+      multiple
+      accept=".pdf"
+      compression={{
+        quality: 0.7, // PDF compression quality
+        maxWidth: 1920,
+        maxHeight: 1080,
+      }}
+      onFilesChange={(files) => {
+        files.forEach(file => {
+          console.log('PDF compressed:', file.base64);
+        });
+      }}
+    />
+  );
+}
+```
+
+### Excel/Word Upload (No Compression)
+
+```tsx
+function DocumentUpload() {
+  return (
+    <ImageUploader
+      multiple
+      accept=".xlsx,.xls,.docx,.doc"
+      // Compression is automatically disabled for Excel and Word files
+      onFilesChange={(files) => {
+        files.forEach(file => {
+          console.log('Document uploaded:', file.file.name);
+          console.log('File category:', file.file.fileCategory);
+        });
+      }}
+    />
+  );
+}
+```
+
+### Multiple Files with Compression
+
+```tsx
+function MultipleUpload() {
+  return (
+    <ImageUploader
+      multiple
+      maxFiles={10}
+      compression={{
+        quality: 0.8,
+        maxWidth: 1920,
+        maxHeight: 1080,
+      }}
+      onFilesChange={(files) => {
+        files.forEach(file => {
+          console.log('Base64:', file.base64);
+          console.log('Blob:', file.blob);
+        });
+      }}
+    />
+  );
+}
+```
+
+### Disable Compression
+
+```tsx
+function NoCompressionUpload() {
+  return (
+    <ImageUploader
+      multiple
+      compression={null} // Disable compression entirely
+      onFilesChange={(files) => {
+        // Files will be uploaded without compression
+        console.log('Original files:', files);
+      }}
+    />
+  );
+}
+```
+
+### Image Cropping
+
+```tsx
+function CroppingUpload() {
+  return (
+    <ImageUploader
+      crop={{
+        enabled: true,
+        shape: 'circle',
+        width: 200,
+        height: 200,
+      }}
+      onCrop={(croppedImage) => {
+        console.log('Cropped image:', croppedImage);
+      }}
+    />
+  );
+}
+```
+
+### Session Persistence
+
+```tsx
+function PersistentUpload() {
+  return (
+    <ImageUploader
+      multiple
+      session={{
+        enabled: true,
+        key: 'my-upload-session',
+        clearOnUnmount: false,
+      }}
+      onFilesChange={(files) => {
+        // Files will persist across page refreshes
+        console.log('Persistent files:', files);
+      }}
+    />
+  );
+}
+```
+
+### Custom UI
+
+```tsx
+function CustomUIUpload() {
+  return (
+    <ImageUploader
+      customUI={({ isDragActive, openFileDialog, files, removeFile }) => (
+        <div className="my-custom-uploader">
+          <button 
+            onClick={openFileDialog}
+            className={isDragActive ? 'drag-active' : ''}
+          >
+            {isDragActive ? 'Drop it!' : 'Click to Upload'}
+          </button>
+          
+          <div className="file-list">
+            {files.map((file, index) => (
+              <div key={index} className="file-item">
+                <img src={file.url} alt={file.file.name} />
+                <button onClick={() => removeFile(index)}>Remove</button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    />
+  );
+}
+```
+
+### Using Ref for Programmatic Control
+
+```tsx
+import { useRef } from 'react';
+import { ImageUploader, ImageUploaderRef } from 'react-smart-file-uploader';
+
+function RefExample() {
+  const uploaderRef = useRef<ImageUploaderRef>(null);
+
+  const handleClearAll = () => {
+    uploaderRef.current?.clearFiles();
+  };
+
+  const handleOpenDialog = () => {
+    uploaderRef.current?.openFileDialog();
+  };
+
+  const handleGetFiles = () => {
+    const files = uploaderRef.current?.getFiles();
+    console.log('Current files:', files);
+  };
+
+  return (
+    <div>
+      <ImageUploader ref={uploaderRef} multiple />
+      
+      <div>
+        <button onClick={handleOpenDialog}>Open File Dialog</button>
+        <button onClick={handleClearAll}>Clear All</button>
+        <button onClick={handleGetFiles}>Get Files</button>
+      </div>
+    </div>
+  );
+}
+```
+
+## Styling
+
+The component uses Tailwind CSS classes by default, but you can easily customize the styling:
+
+### Using CSS Classes
+
+```tsx
+<ImageUploader
+  className="my-uploader"
+  // ... other props
+/>
+```
+
+```css
+.my-uploader {
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.my-uploader:hover {
+  border-color: #007bff;
+}
+```
+
+### Using Inline Styles
+
+```tsx
+<ImageUploader
+  style={{
+    border: '2px dashed #ccc',
+    borderRadius: '8px',
+    padding: '20px',
+  }}
+/>
+```
+
+## TypeScript Support
+
+The package is written in TypeScript and provides comprehensive type definitions:
+
+```tsx
+import {
+  ImageUploader,
+  ProcessedImage,
+  ImageUploaderProps,
+  ImageUploaderRef,
+  CropConfig,
+  CompressionConfig,
+  SessionConfig,
+} from 'react-smart-file-uploader';
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT © [Your Name]
+
+## Changelog
+
+### v2.0.0 (Latest)
+- 🎉 **Major Update**: Multi-format file support
+- ✨ Added support for PDF files with automatic compression
+- ✨ Added support for Excel files (.xlsx, .xls) - compression disabled
+- ✨ Added support for Word documents (.docx, .doc) - compression disabled
+- 🔧 Added `fileCategory` property to track file types
+- 🔧 Enhanced file type detection with `getFileCategory` utility
+- 🎨 Improved file preview with type-specific icons
+- 📝 Renamed package from `react-smart-image-uploader` to `react-smart-file-uploader`
+- 📚 Updated documentation with multi-format examples
+
+### v1.0.0
+- Initial release
+- Image upload with drag & drop
+- Image compression
+- Image cropping (circle/square)
+- Session persistence
+- Custom UI support
+- TypeScript support

package/dist/DefaultUI.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CustomUIProps } from './types';
+interface DefaultUIProps extends CustomUIProps {
+    uploadText?: string;
+    dragText?: string;
+    showPreview?: boolean;
+    multiple?: boolean;
+}
+declare const DefaultUI: React.FC<DefaultUIProps>;
+export default DefaultUI;
+//# sourceMappingURL=DefaultUI.d.ts.map

package/dist/DefaultUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultUI.d.ts","sourceRoot":"","sources":["../src/DefaultUI.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAkB,MAAM,SAAS,CAAC;AAGxD,UAAU,cAAe,SAAQ,aAAa;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyKvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/ImageCropper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'react-image-crop/dist/ReactCrop.css';
+import { ProcessedImage, CropConfig } from './types';
+interface ImageCropperProps {
+    image: ProcessedImage;
+    cropConfig: CropConfig;
+    onCropComplete: (croppedImage: ProcessedImage) => void;
+    onCancel: () => void;
+}
+declare const ImageCropper: React.FC<ImageCropperProps>;
+export default ImageCropper;
+//# sourceMappingURL=ImageCropper.d.ts.map

package/dist/ImageCropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../src/ImageCropper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,OAAO,qCAAqC,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErD,UAAU,iBAAiB;IACzB,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,cAAc,EAAE,CAAC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmK7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/ImageUploader.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ImageUploaderProps, ImageUploaderRef } from './types';
+declare const ImageUploader: React.ForwardRefExoticComponent<ImageUploaderProps & React.RefAttributes<ImageUploaderRef>>;
+export default ImageUploader;
+//# sourceMappingURL=ImageUploader.d.ts.map

package/dist/ImageUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader.d.ts","sourceRoot":"","sources":["../src/ImageUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,SAAS,CAAC;AAcjB,QAAA,MAAM,aAAa,6FAyVlB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/dist/index.css

@@ -0,0 +1 @@
+@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:rgba(0,0,0,.2);--rc-drag-bar-size:6px;--rc-border-color:hsla(0,0%,100%,.7);--rc-focus-color:#08f}.ReactCrop{cursor:crosshair;display:inline-block;max-width:100%;position:relative}.ReactCrop *,.ReactCrop :after,.ReactCrop :before{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit;overflow:hidden}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-height:inherit;max-width:100%}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{bottom:0;height:calc(100% + .5px);left:0;pointer-events:none;position:absolute;right:0;top:0;width:calc(100% + .5px)}.ReactCrop__crop-selection{cursor:move;left:0;position:absolute;top:0;transform:translateZ(0)}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{border:1px solid var(--rc-border-color);bottom:-1px;content:"";left:-1px;opacity:.3;pointer-events:none;position:absolute;right:-1px;top:-1px}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;animation-iteration-count:infinite;animation-play-state:running;animation-timing-function:linear;background-image:linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:10px 1px,10px 1px,1px 10px,1px 10px;color:#fff}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{background-color:#fff6;content:"";display:block;position:absolute}.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{height:100%;width:1px}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before{height:1px;width:100%}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color);height:var(--rc-drag-handle-size);position:absolute;width:var(--rc-drag-handle-size)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{cursor:nw-resize;left:0;top:0;transform:translate(-50%,-50%)}.ReactCrop .ord-n{cursor:n-resize;left:50%;top:0;transform:translate(-50%,-50%)}.ReactCrop .ord-ne{cursor:ne-resize;top:0}.ReactCrop .ord-e,.ReactCrop .ord-ne{right:0;transform:translate(50%,-50%)}.ReactCrop .ord-e{cursor:e-resize;top:50%}.ReactCrop .ord-se{bottom:0;cursor:se-resize;right:0;transform:translate(50%,50%)}.ReactCrop .ord-s{cursor:s-resize;left:50%}.ReactCrop .ord-s,.ReactCrop .ord-sw{bottom:0;transform:translate(-50%,50%)}.ReactCrop .ord-sw{cursor:sw-resize;left:0}.ReactCrop .ord-w{cursor:w-resize;left:0;top:50%;transform:translate(-50%,-50%)}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{height:var(--rc-drag-bar-size);left:0;top:0;transform:translateY(-50%);width:100%}.ReactCrop__drag-bar.ord-e{height:100%;right:0;top:0;transform:translate(50%);width:var(--rc-drag-bar-size)}.ReactCrop__drag-bar.ord-s{bottom:0;height:var(--rc-drag-bar-size);left:0;transform:translateY(50%);width:100%}.ReactCrop__drag-bar.ord-w{height:100%;left:0;top:0;transform:translate(-50%);width:var(--rc-drag-bar-size)}.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w,.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle{display:none}@media (pointer:coarse){.ReactCrop .ord-e,.ReactCrop .ord-n,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{height:var(--rc-drag-handle-mobile-size);width:var(--rc-drag-handle-mobile-size)}}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as ImageUploader } from './ImageUploader';
+export { default as DefaultUI } from './DefaultUI';
+export { default as ImageCropper } from './ImageCropper';
+export type { ImageFile, ProcessedImage, CropConfig, CompressionConfig, SessionConfig, CustomUIProps, ImageUploaderProps, ImageUploaderRef, } from './types';
+export { validateFileSize, validateFileType, fileToBase64, compressImage, processFile, saveToSession, loadFromSession, clearSession, parseAcceptProp, formatFileSize, cleanupUrls, } from './utils';
+export { default } from './ImageUploader';
+//# 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":"AACA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGzD,YAAY,EACV,SAAS,EACT,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,eAAe,EACf,YAAY,EACZ,eAAe,EACf,cAAc,EACd,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.esm.css

@@ -0,0 +1 @@
+@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:rgba(0,0,0,.2);--rc-drag-bar-size:6px;--rc-border-color:hsla(0,0%,100%,.7);--rc-focus-color:#08f}.ReactCrop{cursor:crosshair;display:inline-block;max-width:100%;position:relative}.ReactCrop *,.ReactCrop :after,.ReactCrop :before{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit;overflow:hidden}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-height:inherit;max-width:100%}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{bottom:0;height:calc(100% + .5px);left:0;pointer-events:none;position:absolute;right:0;top:0;width:calc(100% + .5px)}.ReactCrop__crop-selection{cursor:move;left:0;position:absolute;top:0;transform:translateZ(0)}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{border:1px solid var(--rc-border-color);bottom:-1px;content:"";left:-1px;opacity:.3;pointer-events:none;position:absolute;right:-1px;top:-1px}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;animation-iteration-count:infinite;animation-play-state:running;animation-timing-function:linear;background-image:linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:10px 1px,10px 1px,1px 10px,1px 10px;color:#fff}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{background-color:#fff6;content:"";display:block;position:absolute}.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{height:100%;width:1px}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before{height:1px;width:100%}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color);height:var(--rc-drag-handle-size);position:absolute;width:var(--rc-drag-handle-size)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{cursor:nw-resize;left:0;top:0;transform:translate(-50%,-50%)}.ReactCrop .ord-n{cursor:n-resize;left:50%;top:0;transform:translate(-50%,-50%)}.ReactCrop .ord-ne{cursor:ne-resize;top:0}.ReactCrop .ord-e,.ReactCrop .ord-ne{right:0;transform:translate(50%,-50%)}.ReactCrop .ord-e{cursor:e-resize;top:50%}.ReactCrop .ord-se{bottom:0;cursor:se-resize;right:0;transform:translate(50%,50%)}.ReactCrop .ord-s{cursor:s-resize;left:50%}.ReactCrop .ord-s,.ReactCrop .ord-sw{bottom:0;transform:translate(-50%,50%)}.ReactCrop .ord-sw{cursor:sw-resize;left:0}.ReactCrop .ord-w{cursor:w-resize;left:0;top:50%;transform:translate(-50%,-50%)}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{height:var(--rc-drag-bar-size);left:0;top:0;transform:translateY(-50%);width:100%}.ReactCrop__drag-bar.ord-e{height:100%;right:0;top:0;transform:translate(50%);width:var(--rc-drag-bar-size)}.ReactCrop__drag-bar.ord-s{bottom:0;height:var(--rc-drag-bar-size);left:0;transform:translateY(50%);width:100%}.ReactCrop__drag-bar.ord-w{height:100%;left:0;top:0;transform:translate(-50%);width:var(--rc-drag-bar-size)}.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w,.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle{display:none}@media (pointer:coarse){.ReactCrop .ord-e,.ReactCrop .ord-n,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{height:var(--rc-drag-handle-mobile-size);width:var(--rc-drag-handle-mobile-size)}}