# 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>
  );
}
```