@delightui/components 0.1.105 → 0.1.107

package/docs/components/organisms/DropzoneClear.md

@@ -0,0 +1,135 @@
+# DropzoneClear
+
+## Description
+
+A specialized button component for clearing files from a dropzone. It integrates with the Dropzone context to provide a one-click solution for removing all uploaded files, with customizable icon display and consistent styling that matches the dropzone interface.
+
+## Aliases
+
+- DropzoneClear
+- ClearFiles
+- ResetDropzone
+- RemoveAllFiles
+
+## Props Breakdown
+
+**Extends:** `IconButton` component props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `icon` | `ReactNode` | `<Icon icon="CloseDelete" style="Outlined"/>` | No | Custom icon to display in the clear button |
+
+Plus all `IconButton` props (size, disabled, className, etc.).
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Dropzone, DropzoneClear, DropzoneContent } from '@delightui/components';
+
+function BasicDropzoneClearExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        <p>Drop files here or click to upload</p>
+        <DropzoneClear />
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Custom Icon
+```tsx
+import { Icon } from '@delightui/components';
+
+function CustomIconExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        <p>Upload your images</p>
+        <div className="dropzone-actions">
+          <DropzoneClear 
+            icon={<Icon icon="Trash" style="Outlined" />}
+          />
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### With File Count Display
+```tsx
+function FileCountExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        {({ files }) => (
+          <>
+            <p>Drop files here</p>
+            {files.length > 0 && (
+              <div className="file-info">
+                <span>{files.length} file(s) selected</span>
+                <DropzoneClear size="Small" />
+              </div>
+            )}
+          </>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Styled Clear Button
+```tsx
+function StyledClearExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        <div className="upload-area">
+          <p>Upload documents</p>
+          
+          <div className="upload-controls">
+            <DropzoneClear 
+              className="clear-button"
+              size="Medium"
+              icon={<Icon icon="RefreshCcw" style="Outlined" />}
+            />
+          </div>
+        </div>
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Conditional Clear Button
+```tsx
+function ConditionalClearExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        {({ files, isDragActive }) => (
+          <div className="dropzone-content">
+            {isDragActive ? (
+              <p>Drop files here...</p>
+            ) : (
+              <>
+                <p>Click or drag files to upload</p>
+                {files.length > 0 && (
+                  <div className="file-actions">
+                    <span>{files.length} files ready</span>
+                    <DropzoneClear />
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```

package/docs/components/organisms/DropzoneContent.md

@@ -0,0 +1,216 @@
+# DropzoneContent
+
+## Description
+
+A specialized content component designed to display different states within a Dropzone component. DropzoneContent provides predefined styling and layout for empty, uploaded, and loading states, offering a consistent visual experience across different dropzone implementations.
+
+## Aliases
+
+- DropzoneContent
+- Dropzone State
+- Upload State
+
+## Props Breakdown
+
+**Extends:** Standalone interface (no HTML element inheritance)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `type` | `'Empty' \| 'Uploaded' \| 'Loading'` | - | Yes | The state type to display |
+| `className` | `string` | - | No | Additional CSS class names |
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function BasicDropzoneContentExample() {
+  return (
+    <div>
+      <DropzoneContent type="Empty" />
+      <DropzoneContent type="Loading" />
+      <DropzoneContent type="Uploaded" />
+    </div>
+  );
+}
+```
+
+### Empty State
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function EmptyStateExample() {
+  return (
+    <DropzoneContent 
+      type="Empty"
+      className="custom-empty-state"
+    />
+  );
+}
+```
+
+### Loading State
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function LoadingStateExample() {
+  return (
+    <DropzoneContent 
+      type="Loading"
+      className="custom-loading-state"
+    />
+  );
+}
+```
+
+### Uploaded State
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function UploadedStateExample() {
+  return (
+    <DropzoneContent 
+      type="Uploaded"
+      className="custom-uploaded-state"
+    />
+  );
+}
+```
+
+### Dynamic State
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function DynamicStateExample() {
+  const [state, setState] = useState<'Empty' | 'Loading' | 'Uploaded'>('Empty');
+
+  const handleStateChange = () => {
+    setState('Loading');
+    setTimeout(() => setState('Uploaded'), 2000);
+  };
+
+  return (
+    <div>
+      <DropzoneContent type={state} />
+      <button onClick={handleStateChange}>
+        Start Upload Process
+      </button>
+    </div>
+  );
+}
+```
+
+### With Custom Styling
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function CustomStyledExample() {
+  return (
+    <div style={{ display: 'flex', gap: '20px' }}>
+      <DropzoneContent 
+        type="Empty"
+        className="bordered-state"
+        style={{ padding: '20px', border: '1px solid #ccc' }}
+      />
+      
+      <DropzoneContent 
+        type="Loading"
+        className="loading-animation"
+        style={{ padding: '20px', backgroundColor: '#f0f8ff' }}
+      />
+      
+      <DropzoneContent 
+        type="Uploaded"
+        className="success-state"
+        style={{ padding: '20px', backgroundColor: '#f0fff0' }}
+      />
+    </div>
+  );
+}
+```
+
+### Integration with Dropzone
+
+```tsx
+import { Dropzone, DropzoneContent } from '@delightui/components';
+
+function IntegratedExample() {
+  const [files, setFiles] = useState<File[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const getDropzoneState = (): 'Empty' | 'Loading' | 'Uploaded' => {
+    if (isUploading) return 'Loading';
+    if (files.length > 0) return 'Uploaded';
+    return 'Empty';
+  };
+
+  return (
+    <Dropzone
+      value={files}
+      onValueChange={setFiles}
+      empty={<DropzoneContent type="Empty" />}
+      loading={<DropzoneContent type="Loading" />}
+      uploaded={<DropzoneContent type="Uploaded" />}
+    />
+  );
+}
+```
+
+### Conditional Rendering
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function ConditionalRenderingExample() {
+  const [showState, setShowState] = useState<'Empty' | 'Loading' | 'Uploaded' | null>(null);
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px' }}>
+        <button onClick={() => setShowState('Empty')}>Show Empty</button>
+        <button onClick={() => setShowState('Loading')}>Show Loading</button>
+        <button onClick={() => setShowState('Uploaded')}>Show Uploaded</button>
+        <button onClick={() => setShowState(null)}>Hide</button>
+      </div>
+
+      {showState && (
+        <DropzoneContent type={showState} />
+      )}
+    </div>
+  );
+}
+```
+
+### Accessibility Example
+
+```tsx
+import { DropzoneContent } from '@delightui/components';
+
+function AccessibilityExample() {
+  const [currentState, setCurrentState] = useState<'Empty' | 'Loading' | 'Uploaded'>('Empty');
+
+  return (
+    <div role="region" aria-label="File upload area">
+      <DropzoneContent 
+        type={currentState}
+        className="accessible-dropzone-content"
+        aria-live="polite"
+        aria-describedby="upload-instructions"
+      />
+      
+      <div id="upload-instructions" style={{ marginTop: '10px' }}>
+        {currentState === 'Empty' && 'Drag and drop files here or click to browse'}
+        {currentState === 'Loading' && 'Please wait while your files are being uploaded'}
+        {currentState === 'Uploaded' && 'Files have been successfully uploaded'}
+      </div>
+    </div>
+  );
+}
+```

package/docs/components/organisms/DropzoneFilename.md

@@ -0,0 +1,191 @@
+# DropzoneFilename
+
+## Description
+
+A text component that displays the filename of uploaded files in a dropzone. It automatically retrieves file information from the Dropzone context and renders the filename with consistent text styling, supporting multiple files through index selection.
+
+## Aliases
+
+- DropzoneFilename
+- FileName
+- FileNameDisplay
+- UploadedFileName
+
+## Props Breakdown
+
+**Extends:** `Text` component props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `fileIndex` | `number` | `0` | No | Index of the file to display the name for |
+
+Plus all `Text` component props (type, size, weight, color, etc.).
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Dropzone, DropzoneFilename, DropzoneContent } from '@delightui/components';
+
+function BasicFilenameExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        {({ files }) => (
+          <>
+            <p>Drop files here</p>
+            {files.length > 0 && (
+              <div className="file-display">
+                <DropzoneFilename />
+              </div>
+            )}
+          </>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Multiple Files Display
+```tsx
+function MultipleFilesExample() {
+  return (
+    <Dropzone multiple>
+      <DropzoneContent>
+        {({ files }) => (
+          <>
+            <p>Drop multiple files here</p>
+            {files.length > 0 && (
+              <div className="file-list">
+                <h4>Uploaded Files:</h4>
+                {files.map((_, index) => (
+                  <div key={index} className="file-item">
+                    <DropzoneFilename 
+                      fileIndex={index}
+                      type="Body"
+                      size="Small"
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Styled Filename Display
+```tsx
+function StyledFilenameExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        {({ files }) => (
+          <div className="upload-area">
+            <p>Upload your document</p>
+            
+            {files.length > 0 && (
+              <div className="selected-file">
+                <Icon icon="Document" size="Small" />
+                <DropzoneFilename 
+                  type="Body"
+                  weight="Medium"
+                  color="Primary"
+                  className="filename-text"
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### File List with Actions
+```tsx
+import { DropzoneClear, Icon, Button } from '@delightui/components';
+
+function FileListWithActionsExample() {
+  return (
+    <Dropzone multiple>
+      <DropzoneContent>
+        {({ files }) => (
+          <>
+            <div className="upload-prompt">
+              <p>Upload files</p>
+            </div>
+            
+            {files.length > 0 && (
+              <div className="file-management">
+                <div className="file-list">
+                  {files.map((_, index) => (
+                    <div key={index} className="file-entry">
+                      <Icon icon="Document" size="Small" />
+                      <DropzoneFilename 
+                        fileIndex={index}
+                        type="Body"
+                        size="Small"
+                        className="file-name"
+                      />
+                      <Button size="Small" type="Ghost">Remove</Button>
+                    </div>
+                  ))}
+                </div>
+                
+                <div className="file-actions">
+                  <DropzoneClear size="Small" />
+                  <Button size="Small">Upload All</Button>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```
+
+### Truncated Long Filenames
+```tsx
+function TruncatedFilenameExample() {
+  return (
+    <Dropzone>
+      <DropzoneContent>
+        {({ files }) => (
+          <>
+            <p>Upload file</p>
+            
+            {files.length > 0 && (
+              <div className="file-preview">
+                <div className="file-info">
+                  <DropzoneFilename 
+                    type="Body"
+                    size="Small"
+                    className="truncated-filename"
+                    style={{ 
+                      maxWidth: '200px',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap'
+                    }}
+                  />
+                  <Text type="Caption" color="Secondary">
+                    {Math.round(files[0]?.size / 1024)} KB
+                  </Text>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </DropzoneContent>
+    </Dropzone>
+  );
+}
+```