import '../../content/icon/icon';
import '../../feedback/progress/progress';
import { type FileUploadFn } from './file-input-upload';
export type { FileUploadFn, FileUploadState, FileUploadStatus } from './file-input-upload';
/** File input component properties */
export type OreFileInputProps = {
/** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */
accept?: string;
/** Theme color tint */
color?: string;
/** Disabled state */
disabled?: boolean;
/** Error message text */
error?: string;
/**
* Render selected files as a grid of image thumbnails/previews instead of the default
* single-column list. Non-image files fall back to a generic file icon in the same grid.
*/
gallery?: boolean;
/** Helper text displayed below the input */
helper?: string;
/** Input label text */
label?: string;
/** Max number of files allowed (only used if multiple is true) */
'max-files'?: number;
/** Max size of a single file in bytes */
'max-size'?: number;
/** Allow multiple files selection */
multiple?: boolean;
/** Form field name */
name?: string;
/**
* JS-only callback fired with the inner `` element when it
* mounts, and with `null` when it unmounts. Intended for composed components
* that need imperative access to the raw element.
* Set as a JS property: `bitFileInput.ref = (el) => { ... }`.
*/
ref?: ((el: HTMLInputElement | null) => void) | null;
/** Required field */
required?: boolean;
/** Field size preset */
size?: string;
/**
* JS-only upload transport (see `FileUploadFn`). When set, every newly added file starts
* uploading immediately and independently — progress/speed/ETA, retry-on-failure, and a
* success confirmation card are all driven from here. Omit it to keep the component in its
* original picker-only mode (select files, no upload lifecycle).
* Set as a JS property: `fileInput.upload = async (file, { onProgress, signal }) => { ... }`.
*/
upload?: FileUploadFn | null;
};
/** Events emitted by the file-input component */
export type OreFileInputEvents = {
/** Emitted when files are added or removed */
change: {
files: File[];
originalEvent?: Event;
value: File[];
};
/** Emitted when a specific file is removed */
remove: {
file: File;
files: File[];
originalEvent?: Event;
value: File[];
};
/** Emitted when `upload` rejects for a file (after a fresh attempt or a retry) */
'upload-error': {
error: unknown;
file: File;
};
/** Emitted whenever `upload`'s `onProgress` reports new bytes for a file */
'upload-progress': {
file: File;
loaded: number;
total: number;
};
/** Emitted when `upload` resolves for a file */
'upload-success': {
file: File;
};
};
/**
* A file upload field with drag-and-drop support, built-in validation messaging, and — once a
* `upload` transport is wired up — a full per-file upload lifecycle: live progress/speed/ETA,
* retry-on-failure, a success confirmation card, and fully independent handling of concurrent
* files (one failing never blocks or cancels the others). Picking files with no `upload` set
* keeps the original, upload-free selection-only behavior.
*
* @element ore-file-input
*
* @attr {string} accept - Comma-separated file extensions or MIME types
* @attr {boolean} multiple - Enable multiple files selection
* @attr {boolean} gallery - Show selected files as an image thumbnail/preview grid
* @attr {number} max-files - Max number of files allowed
* @attr {number} max-size - Max size of each file in bytes
* @attr {boolean} disabled - Disable interaction
* @attr {string} error - Show an error state/message
* @attr {string} helper - Provide helper context below the dropzone
*
* @fires change - detail: { files: File[], value: File[] }
* @fires remove - detail: { file: File, files: File[] }
* @fires upload-progress - detail: { file: File, loaded: number, total: number }
* @fires upload-success - detail: { file: File }
* @fires upload-error - detail: { file: File, error: unknown }
*
* @cssprop --file-input-bg - Dropzone background color
* @cssprop --file-input-border-color - Dropzone border color
* @cssprop --file-input-font-size - Font size
* @cssprop --file-input-radius - Dropzone border radius
* @cssprop --file-input-min-height - Minimum dropzone height
* @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)
* @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)
* @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)
* @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)
* @cssprop --file-input-thumb-size - Gallery thumbnail width/height
* @part wrapper - Root wrapper around the file input field
* @part label - Visible label rendered above the dropzone
* @part dropzone - Interactive drag-and-drop target
* @part input - Native file input element
* @part gallery - Gallery grid container (rendered instead of `file-list` when `gallery` is set)
* @part helper - Helper text shown beneath the dropzone
* @part error - Error message shown beneath the field
* @example
* ```html
*
*
*
*
* ```
* ```ts
* // Wire up a real upload transport — progress/retry/success are then handled automatically.
* // `XMLHttpRequest` is used here (not `fetch`) because it's the only browser API that reports
* // upload progress; swap in whatever transport the app already uses.
* const input = document.querySelector('ore-file-input');
* input.upload = (file, { onProgress, signal, resumeFrom }) =>
* new Promise((resolve, reject) => {
* const xhr = new XMLHttpRequest();
*
* xhr.upload.addEventListener('progress', (e) => onProgress(resumeFrom + e.loaded, file.size));
* xhr.addEventListener('load', () => (xhr.status < 400 ? resolve() : reject(new Error(xhr.statusText))));
* xhr.addEventListener('error', () => reject(new Error('Network error')));
* signal.addEventListener('abort', () => xhr.abort());
*
* xhr.open('PUT', '/uploads');
* if (resumeFrom > 0) xhr.setRequestHeader('Content-Range', `bytes ${resumeFrom}-/${file.size}`);
* xhr.send(file);
* });
* ```
*/
export declare const FILE_INPUT_TAG: "ore-file-input";
//# sourceMappingURL=file-input.d.ts.map