@delightui/components 0.1.104 → 0.1.106

package/docs/components/organisms/DropzoneSupportedFormats.md

@@ -0,0 +1,184 @@
+# DropzoneSupportedFormats
+
+## Description
+
+A text component that automatically displays the supported file formats for a dropzone. It reads the accepted file types from the Dropzone context and formats them into a readable list, helping users understand what file types they can upload.
+
+## Aliases
+
+- DropzoneSupportedFormats
+- SupportedFormats
+- AcceptedFileTypes
+- FileFormatList
+
+## Props Breakdown
+
+**Extends:** `Text` component props
+
+All `Text` component props are supported (type, size, weight, color, className, etc.).
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Dropzone, DropzoneSupportedFormats, DropzoneContent } from '@delightui/components';
+
+function BasicSupportedFormatsExample() {
+  return (
+    <Dropzone accept={{ 'image/*': ['.jpg', '.jpeg', '.png', '.gif'] }}>
+      <DropzoneContent>
+        <p>Upload your images</p>
+        <DropzoneSupportedFormats 
+          type="Caption" 
+          color="Secondary" 
+        />
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Document Upload with Formats
+```tsx
+function DocumentUploadExample() {
+  const documentTypes = {
+    'application/pdf': ['.pdf'],
+    'application/msword': ['.doc'],
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+    'text/plain': ['.txt']
+  };
+
+  return (
+    <Dropzone accept={documentTypes}>
+      <DropzoneContent>
+        <div className="upload-area">
+          <h3>Upload Documents</h3>
+          <p>Drop your files here or click to browse</p>
+          
+          <div className="format-info">
+            <DropzoneSupportedFormats 
+              type="Body"
+              size="Small"
+              color="Secondary"
+            />
+          </div>
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Multiple File Type Categories
+```tsx
+function MultipleTypesExample() {
+  const mediaTypes = {
+    'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
+    'video/*': ['.mp4', '.avi', '.mov', '.wmv'],
+    'audio/*': ['.mp3', '.wav', '.ogg', '.m4a']
+  };
+
+  return (
+    <Dropzone accept={mediaTypes} multiple>
+      <DropzoneContent>
+        <div className="media-upload">
+          <h3>Upload Media Files</h3>
+          <p>Images, videos, and audio files are supported</p>
+          
+          <DropzoneSupportedFormats 
+            type="Caption"
+            size="Small"
+            className="format-list"
+          />
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Styled Format Display
+```tsx
+function StyledFormatExample() {
+  return (
+    <Dropzone accept={{ 'image/*': ['.jpg', '.png'], 'application/pdf': ['.pdf'] }}>
+      <DropzoneContent>
+        <div className="styled-upload">
+          <div className="upload-icon">📁</div>
+          <h4>Choose Files</h4>
+          
+          <div className="format-display">
+            <DropzoneSupportedFormats 
+              type="Body"
+              size="Small"
+              weight="Medium"
+              className="supported-formats"
+              style={{
+                padding: '8px 12px',
+                backgroundColor: '#f5f5f5',
+                borderRadius: '4px',
+                border: '1px solid #ddd'
+              }}
+            />
+          </div>
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Conditional Format Display
+```tsx
+function ConditionalFormatExample() {
+  return (
+    <Dropzone accept={{ 'image/*': ['.jpg', '.png', '.gif'] }}>
+      <DropzoneContent>
+        {({ files, isDragActive }) => (
+          <div className="conditional-upload">
+            {isDragActive ? (
+              <p>Drop files here...</p>
+            ) : files.length > 0 ? (
+              <div className="files-selected">
+                <p>{files.length} files selected</p>
+              </div>
+            ) : (
+              <div className="upload-prompt">
+                <p>Drag & drop images here</p>
+                <DropzoneSupportedFormats 
+                  type="Caption" 
+                  color="Tertiary"
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Help Text with Formats
+```tsx
+function HelpTextExample() {
+  return (
+    <Dropzone accept={{ 'application/pdf': ['.pdf'], 'image/*': ['.jpg', '.png'] }}>
+      <DropzoneContent>
+        <div className="help-upload">
+          <h3>Upload Resume</h3>
+          <p>Please upload your resume in PDF format or as an image</p>
+          
+          <div className="help-info">
+            <Icon icon="Info" size="Small" />
+            <DropzoneSupportedFormats 
+              type="Caption"
+              className="inline-formats"
+            />
+          </div>
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```

package/docs/components/organisms/DropzoneTrigger.md

@@ -0,0 +1,209 @@
+# DropzoneTrigger
+
+## Description
+
+A button component that triggers the file selection dialog for a dropzone. It integrates with the Dropzone context to provide a clickable interface for users to browse and select files, serving as an alternative or complement to drag-and-drop functionality.
+
+## Aliases
+
+- DropzoneTrigger
+- FileSelectButton
+- BrowseButton
+- UploadTrigger
+
+## Props Breakdown
+
+**Extends:** `Button` component props
+
+All `Button` component props are supported (size, style, type, appearance, disabled, etc.).
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Dropzone, DropzoneTrigger, DropzoneContent } from '@delightui/components';
+
+function BasicTriggerExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        <p>Drag files here or</p>
+        <DropzoneTrigger>
+          Choose Files
+        </DropzoneTrigger>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Styled Upload Button
+```tsx
+function StyledTriggerExample() {
+  return (
+    <Dropzone accept={{ 'image/*': ['.jpg', '.png', '.gif'] }}>
+      <DropzoneContent>
+        <div className="upload-area">
+          <h3>Upload Images</h3>
+          <p>Select images from your device</p>
+          
+          <DropzoneTrigger
+            size="Large"
+            style="Primary"
+            leadingIcon={<Icon icon="Upload" />}
+          >
+            Browse Images
+          </DropzoneTrigger>
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Multiple Upload Options
+```tsx
+function MultipleOptionsExample() {
+  return (
+    <Dropzone multiple>
+      <DropzoneContent>
+        {({ files }) => (
+          <div className="upload-options">
+            <div className="drag-area">
+              <p>Drag & drop files here</p>
+              <span>or</span>
+            </div>
+            
+            <div className="button-group">
+              <DropzoneTrigger
+                type="Outlined"
+                size="Medium"
+              >
+                Choose Files
+              </DropzoneTrigger>
+              
+              {files.length > 0 && (
+                <Button
+                  style="Primary"
+                  size="Medium"
+                  onClick={() => console.log('Upload files')}
+                >
+                  Upload {files.length} Files
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Document Upload Interface
+```tsx
+function DocumentUploadExample() {
+  return (
+    <Dropzone accept={{ 'application/pdf': ['.pdf'], 'application/msword': ['.doc', '.docx'] }}>
+      <DropzoneContent>
+        {({ files, isDragActive }) => (
+          <div className="document-upload">
+            {isDragActive ? (
+              <div className="drag-active">
+                <p>Drop documents here...</p>
+              </div>
+            ) : files.length > 0 ? (
+              <div className="files-ready">
+                <p>{files.length} document(s) selected</p>
+                <DropzoneTrigger
+                  type="Ghost"
+                  size="Small"
+                >
+                  Choose Different Files
+                </DropzoneTrigger>
+              </div>
+            ) : (
+              <div className="upload-prompt">
+                <Icon icon="Document" size="Large" />
+                <h3>Upload Documents</h3>
+                <p>PDF and Word documents supported</p>
+                
+                <DropzoneTrigger
+                  size="Large"
+                  style="Primary"
+                  leadingIcon={<Icon icon="FolderOpen" />}
+                >
+                  Select Documents
+                </DropzoneTrigger>
+              </div>
+            )}
+          </div>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Profile Picture Upload
+```tsx
+function ProfilePictureExample() {
+  return (
+    <Dropzone accept={{ 'image/*': ['.jpg', '.jpeg', '.png'] }}>
+      <DropzoneContent>
+        {({ files }) => (
+          <div className="profile-upload">
+            <div className="avatar-preview">
+              {files.length > 0 ? (
+                <img src={URL.createObjectURL(files[0])} alt="Preview" />
+              ) : (
+                <div className="avatar-placeholder">
+                  <Icon icon="Person" size="Large" />
+                </div>
+              )}
+            </div>
+            
+            <div className="upload-controls">
+              <DropzoneTrigger
+                size="Medium"
+                type="Outlined"
+                leadingIcon={<Icon icon="Camera" />}
+              >
+                {files.length > 0 ? 'Change Photo' : 'Upload Photo'}
+              </DropzoneTrigger>
+            </div>
+          </div>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Disabled State
+```tsx
+function DisabledTriggerExample() {
+  const [isUploading, setIsUploading] = useState(false);
+
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        <div className="upload-with-status">
+          <p>Upload your files</p>
+          
+          <DropzoneTrigger
+            disabled={isUploading}
+            leadingIcon={isUploading ? <Spinner size="Small" /> : <Icon icon="Upload" />}
+          >
+            {isUploading ? 'Uploading...' : 'Choose Files'}
+          </DropzoneTrigger>
+          
+          {isUploading && (
+            <p className="upload-status">Please wait while files are being uploaded...</p>
+          )}
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```