@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/file-upload.d.ts

@@ -0,0 +1,88 @@
+/**
+ * File upload building blocks: a drop zone that validates picked or dropped files, and a list of
+ * files with upload progress, failure and retry. Uploading itself stays with the application.
+ */
+import { type ComponentProps, type ReactNode } from "react";
+export interface FileUploadDropZoneLabels {
+    uploadAction: string;
+    /** Appended to the action on narrow screens, where drag and drop is not offered. Empty by default. */
+    uploadActionMobileSuffix: string;
+    /** Shown next to the action on wide screens. */
+    dragAndDrop: string;
+    /** Accessible name of the hidden file input. */
+    input: string;
+}
+export interface FileUploadDropZoneProps {
+    /** Explains which files are allowed; turns destructive after a rejected file. */
+    hint?: string;
+    isDisabled?: boolean;
+    /** Same syntax as `<input accept>`, such as `"image/*,.pdf"`. */
+    accept?: string;
+    allowsMultiple?: boolean;
+    /** Maximum file size in bytes. */
+    maxSize?: number;
+    onDropFiles?: (files: File[]) => void;
+    onDropUnacceptedFiles?: (files: File[]) => void;
+    onSizeLimitExceed?: (files: File[]) => void;
+    inputId?: string;
+    labels?: Partial<FileUploadDropZoneLabels>;
+    className?: string;
+}
+/**
+ * Renders the drop zone. The action button and a click anywhere on the zone open the native file
+ * picker; the same file can be picked again after a failure.
+ * @param props - Constraints, callbacks and optional copy.
+ * @returns The drop zone.
+ */
+export declare function FileUploadDropZone({ hint, isDisabled, accept, allowsMultiple, maxSize, onDropFiles, onDropUnacceptedFiles, onSizeLimitExceed, inputId, labels, className, }: FileUploadDropZoneProps): import("react").JSX.Element;
+export interface FileUploadItemLabels {
+    complete: string;
+    uploading: string;
+    failed: string;
+    retry: string;
+    /** Accessible name of the delete button. */
+    delete: string;
+    /** Accessible name of the progress bar. */
+    progress: string;
+}
+export interface FileUploadItemProps {
+    name: string;
+    /** Size in bytes. */
+    size: number;
+    /** Upload progress from 0 to 100. */
+    progress: number;
+    failed?: boolean;
+    onDelete?: () => void;
+    isDeleteDisabled?: boolean;
+    onRetry?: () => void;
+    locale?: string;
+    labels?: Partial<FileUploadItemLabels>;
+    /** File illustration, such as an icon for its type. Defaults to a generic file icon. */
+    icon?: ReactNode;
+    /**
+     * `bar` shows a progress bar with the percentage under the name; `fill` tints the item
+     * background from left to right and shows the percentage next to the status.
+     */
+    progressVariant?: FileUploadProgressVariant;
+    className?: string;
+}
+export type FileUploadProgressVariant = "bar" | "fill";
+/**
+ * Renders one file with its size, status, progress (a bar or a background fill), delete action
+ * and, after a failure, a retry action. Place it inside `FileUploadList` so additions and removals animate.
+ * @param props - File metadata, progress, callbacks and optional copy.
+ * @returns The list item.
+ */
+export declare function FileUploadItem({ name, size, progress, failed, onDelete, isDeleteDisabled, onRetry, locale, labels, icon, progressVariant, className, }: FileUploadItemProps): import("react").JSX.Element;
+/**
+ * Lays out a drop zone and its file list.
+ * @param props - Native `div` attributes.
+ * @returns The container.
+ */
+export declare function FileUpload({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * Lists `FileUploadItem`s; only files added after the first render animate in.
+ * @param props - Native `ul` attributes and the items.
+ * @returns The list.
+ */
+export declare function FileUploadList({ className, children, ...props }: ComponentProps<"ul">): import("react").JSX.Element;