import type { FileValidationResult, FileValidationRule, FileValidationRuleSets } from '../../core/files'; type Props = { /** Allow multi-file selection. @default false */ multiple?: boolean; /** * Validation rules applied to each picked / dropped file — a single set * (`FileValidationRule[]`) or several sets (`FileValidationRule[][]`). With several sets, * each file is validated by the first set whose `accept` matches it (a set with no `accept` * rule matches anything; a file matching none is rejected). The native picker filter and * drag-over visual hint are auto-derived from every set's `FileRules.Mime(...)` rule's * `accept` — pass it once via the rule, the cmp wires the rest. */ validationRules?: FileValidationRule[] | FileValidationRuleSets; disabled?: boolean; /** Headline shown inside the drop zone. */ title?: string; /** Supporting text shown below the headline. */ description?: string; on?: { /** * Fires after picker / drop with one `FileValidationResult` per file. Consumer reads * `isValid` / `errors` per result and decides what to do (toast errors, queue valid * files into an `UploadMediaStore`, etc.). The cmp does NOT render any error UI or * progress visuals — those are composed externally next to the dropzone. */ select?: (results: FileValidationResult[]) => void; }; }; /** * Drag-and-drop or click-to-select file zone. **Pure selector** — picks files, runs optional * `validationRules`, and emits `on.select(FileValidationResult[])`. The consumer reads * `isValid` / `errors` per result and decides what to do (toast, queue into an * `UploadMediaStore`, etc.). The cmp renders neither error UI nor progress visuals — compose * those externally next to the dropzone (e.g. `` / `` driven by * `store.files`). * * The native picker filter + drag-over visual hint are derived from any `FileRules.Mime(...)` * rule's `accept` — pass it once via the rule, the cmp wires both. During drag-over, files * whose MIME does not match paint the zone with the danger color before drop (soft-validation * via `DataTransfer.items` — extension-only accept tokens defer to drop). * * ### CSS Custom Properties * | Property | Description | Default | * |---|---|---| * | `--sc-kit--file-uploader--background` | Drop-zone background | `var(--sc-kit--color--bg--field-alt)` | * | `--sc-kit--file-uploader--background--drag` | Background during valid drag-over / hover | `var(--sc-kit--color--accent--softer)` | * | `--sc-kit--file-uploader--background--drag-invalid` | Background when a dragged file's MIME does not match the Mime rule | `var(--sc-kit--color--danger--soft)` | * | `--sc-kit--file-uploader--border-color` | Dashed border color (idle) | `var(--sc-kit--color--border--strong)` | * | `--sc-kit--file-uploader--border-color--drag` | Dashed border color during valid drag-over / hover | `var(--sc-kit--color--accent)` | * | `--sc-kit--file-uploader--border-color--drag-invalid` | Dashed border color when dragged file's MIME does not match the Mime rule | `var(--sc-kit--color--danger)` | * | `--sc-kit--file-uploader--border-radius` | Drop-zone radius | `var(--sc-kit--radius--lg)` | * | `--sc-kit--file-uploader--padding` | Inner padding | `var(--sc-kit--space--6)` | * | `--sc-kit--file-uploader--icon--color` | Icon color | `var(--sc-kit--color--text--muted)` | * | `--sc-kit--file-uploader--title--color` | Title color | `var(--sc-kit--color--text--primary)` | * | `--sc-kit--file-uploader--description--color` | Description color | `var(--sc-kit--color--text--muted)` | */ declare const Cmp: import("svelte").Component; type Cmp = ReturnType; export default Cmp;