@spark-ui/components 11.4.1 → 11.4.3

package/dist/file-upload/index.d.mts

@@ -23,9 +23,21 @@ interface FileUploadProps {
      */
     value?: File[];
     /**
-     * Callback when files are selected
+     * Callback when files are accepted
+     * @param details - Details about the accepted files
      */
-    onFilesChange?: (files: File[]) => void;
+    onFileAccept?: (details: FileAcceptDetails) => void;
+    /**
+     * Callback when files are rejected
+     * @param details - Details about the rejected files and their errors
+     */
+    onFileReject?: (details: FileRejectDetails) => void;
+    /**
+     * Callback when files change (both accepted and rejected)
+     * For controlled mode, use this to update the value prop by extracting details.acceptedFiles
+     * @param details - Details about both accepted and rejected files
+     */
+    onFileChange?: (details: FileChangeDetails) => void;
     /**
      * Whether multiple files can be selected
      * @default true
@@ -45,12 +57,6 @@ interface FileUploadProps {
      * Files beyond this limit will be rejected
      */
     maxFiles?: number;
-    /**
-     * Callback when the maximum number of files is reached
-     * @param maxFiles - The maximum number of files allowed
-     * @param rejectedCount - The number of files that were rejected
-     */
-    onMaxFilesReached?: (maxFiles: number, rejectedCount: number) => void;
     /**
      * Maximum file size in bytes
      * Files larger than this will be rejected
@@ -61,12 +67,6 @@ interface FileUploadProps {
      * Files smaller than this will be rejected
      */
     minFileSize?: number;
-    /**
-     * Callback when a file size validation error occurs
-     * @param file - The file that failed validation
-     * @param error - The error message
-     */
-    onFileSizeError?: (file: File, error: string) => void;
     /**
      * When `true`, prevents the user from interacting with the file upload
      */
@@ -87,8 +87,18 @@ interface RejectedFile$1 {
     file: File;
     errors: FileUploadFileError[];
 }
+interface FileAcceptDetails {
+    files: File[];
+}
+interface FileRejectDetails {
+    files: RejectedFile$1[];
+}
+interface FileChangeDetails {
+    acceptedFiles: File[];
+    rejectedFiles: RejectedFile$1[];
+}
 declare const FileUpload$1: {
-    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFilesChange, multiple, accept, maxFiles, onMaxFilesReached, maxFileSize, minFileSize, onFileSizeError, disabled, readOnly, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFileAccept, onFileReject, onFileChange, multiple, accept, maxFiles, maxFileSize, minFileSize, disabled, readOnly, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -102,18 +112,22 @@ interface FileUploadAcceptedFileProps extends ComponentPropsWithoutRef<'li'> {
      * The file to display
      */
     file: File;
-    /**
-     * The index of the file in the accepted files array
-     */
-    fileIndex: number;
     /**
      * Upload progress value (0-100). When provided, displays a progress bar at the bottom of the file item.
      */
     uploadProgress?: number;
+    /**
+     * Accessible label for the delete button
+     */
+    deleteButtonAriaLabel: string;
+    /**
+     * Accessible label for the progress bar. Required when uploadProgress is provided.
+     */
+    progressAriaLabel?: string;
     className?: string;
 }
 declare const AcceptedFile: {
-    ({ asChild: _asChild, className, file, fileIndex, uploadProgress, ...props }: FileUploadAcceptedFileProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, className, file, uploadProgress, deleteButtonAriaLabel, progressAriaLabel, ...props }: FileUploadAcceptedFileProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -133,9 +147,8 @@ declare const Context: {
     displayName: string;
 };
 
-declare function Dropzone({ children, onFiles, className, unstyled, }: {
+declare function Dropzone({ children, className, unstyled, }: {
     children?: React.ReactNode;
-    onFiles?: (files: FileList) => void;
     className?: string;
     unstyled?: boolean;
 }): react_jsx_runtime.JSX.Element;
@@ -143,56 +156,14 @@ declare namespace Dropzone {
     var displayName: string;
 }
 
-interface FileUploadItemProps extends ComponentPropsWithoutRef<'li'> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLLIElement>;
-    children: ReactNode;
-    className?: string;
-}
-declare const Item: {
-    ({ asChild: _asChild, className, children, ...props }: FileUploadItemProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 interface FileUploadItemDeleteTriggerProps extends React.ComponentProps<typeof IconButton> {
     /**
-     * Index of the file to delete
+     * The file to delete
      */
-    fileIndex: number;
+    file: File;
 }
 declare const ItemDeleteTrigger: {
-    ({ className, fileIndex, onClick, ...props }: FileUploadItemDeleteTriggerProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface FileUploadItemFileNameProps extends ComponentPropsWithoutRef<'p'> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLParagraphElement>;
-    className?: string;
-    children?: ReactNode;
-}
-declare const ItemFileName: {
-    ({ asChild: _asChild, className, children, ...props }: FileUploadItemFileNameProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface FileUploadItemSizeTextProps extends ComponentPropsWithoutRef<'p'> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLParagraphElement>;
-    className?: string;
-    children?: ReactNode;
-}
-declare const ItemSizeText: {
-    ({ asChild: _asChild, className, children, ...props }: FileUploadItemSizeTextProps): react_jsx_runtime.JSX.Element;
+    ({ className, file, onClick, ...props }: FileUploadItemDeleteTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -227,31 +198,31 @@ interface FileUploadRejectedFileProps extends ComponentPropsWithoutRef<'li'> {
      * The rejected file to display
      */
     rejectedFile: RejectedFile$1;
-    /**
-     * The index of the rejected file in the rejectedFiles array
-     */
-    rejectedFileIndex: number;
     /**
      * Function to render the error message for each error code
      * @param error - The error code
      * @returns The error message to display
      */
     renderError: (error: FileUploadFileError) => string;
+    /**
+     * Accessible label for the delete button
+     */
+    deleteButtonAriaLabel: string;
     className?: string;
 }
 declare const RejectedFile: {
-    ({ asChild: _asChild, className, rejectedFile, rejectedFileIndex, renderError, ...props }: FileUploadRejectedFileProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, className, rejectedFile, renderError, deleteButtonAriaLabel, ...props }: FileUploadRejectedFileProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 interface FileUploadRejectedFileDeleteTriggerProps extends React.ComponentProps<typeof IconButton> {
     /**
-     * Index of the rejected file to remove
+     * The rejected file to remove
      */
-    rejectedFileIndex: number;
+    rejectedFile: RejectedFile$1;
 }
 declare const RejectedFileDeleteTrigger: {
-    ({ className, rejectedFileIndex, onClick, ...props }: FileUploadRejectedFileDeleteTriggerProps): react_jsx_runtime.JSX.Element;
+    ({ className, rejectedFile, onClick, ...props }: FileUploadRejectedFileDeleteTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -270,9 +241,6 @@ declare const FileUpload: typeof FileUpload$1 & {
     Trigger: typeof Trigger;
     Dropzone: typeof Dropzone;
     Context: typeof Context;
-    Item: typeof Item;
-    ItemFileName: typeof ItemFileName;
-    ItemSizeText: typeof ItemSizeText;
     ItemDeleteTrigger: typeof ItemDeleteTrigger;
     PreviewImage: typeof PreviewImage;
     AcceptedFile: typeof AcceptedFile;
@@ -280,4 +248,4 @@ declare const FileUpload: typeof FileUpload$1 & {
     RejectedFileDeleteTrigger: typeof RejectedFileDeleteTrigger;
 };
 
-export { FileUpload, type FileUploadFileError, type RejectedFile$1 as RejectedFile };
+export { type FileAcceptDetails, type FileChangeDetails, type FileRejectDetails, FileUpload, type FileUploadFileError, type RejectedFile$1 as RejectedFile };

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

@@ -23,9 +23,21 @@ interface FileUploadProps {
      */
     value?: File[];
     /**
-     * Callback when files are selected
+     * Callback when files are accepted
+     * @param details - Details about the accepted files
      */
-    onFilesChange?: (files: File[]) => void;
+    onFileAccept?: (details: FileAcceptDetails) => void;
+    /**
+     * Callback when files are rejected
+     * @param details - Details about the rejected files and their errors
+     */
+    onFileReject?: (details: FileRejectDetails) => void;
+    /**
+     * Callback when files change (both accepted and rejected)
+     * For controlled mode, use this to update the value prop by extracting details.acceptedFiles
+     * @param details - Details about both accepted and rejected files
+     */
+    onFileChange?: (details: FileChangeDetails) => void;
     /**
      * Whether multiple files can be selected
      * @default true
@@ -45,12 +57,6 @@ interface FileUploadProps {
      * Files beyond this limit will be rejected
      */
     maxFiles?: number;
-    /**
-     * Callback when the maximum number of files is reached
-     * @param maxFiles - The maximum number of files allowed
-     * @param rejectedCount - The number of files that were rejected
-     */
-    onMaxFilesReached?: (maxFiles: number, rejectedCount: number) => void;
     /**
      * Maximum file size in bytes
      * Files larger than this will be rejected
@@ -61,12 +67,6 @@ interface FileUploadProps {
      * Files smaller than this will be rejected
      */
     minFileSize?: number;
-    /**
-     * Callback when a file size validation error occurs
-     * @param file - The file that failed validation
-     * @param error - The error message
-     */
-    onFileSizeError?: (file: File, error: string) => void;
     /**
      * When `true`, prevents the user from interacting with the file upload
      */
@@ -87,8 +87,18 @@ interface RejectedFile$1 {
     file: File;
     errors: FileUploadFileError[];
 }
+interface FileAcceptDetails {
+    files: File[];
+}
+interface FileRejectDetails {
+    files: RejectedFile$1[];
+}
+interface FileChangeDetails {
+    acceptedFiles: File[];
+    rejectedFiles: RejectedFile$1[];
+}
 declare const FileUpload$1: {
-    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFilesChange, multiple, accept, maxFiles, onMaxFilesReached, maxFileSize, minFileSize, onFileSizeError, disabled, readOnly, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, children, defaultValue, value: controlledValue, onFileAccept, onFileReject, onFileChange, multiple, accept, maxFiles, maxFileSize, minFileSize, disabled, readOnly, locale, }: FileUploadProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -102,18 +112,22 @@ interface FileUploadAcceptedFileProps extends ComponentPropsWithoutRef<'li'> {
      * The file to display
      */
     file: File;
-    /**
-     * The index of the file in the accepted files array
-     */
-    fileIndex: number;
     /**
      * Upload progress value (0-100). When provided, displays a progress bar at the bottom of the file item.
      */
     uploadProgress?: number;
+    /**
+     * Accessible label for the delete button
+     */
+    deleteButtonAriaLabel: string;
+    /**
+     * Accessible label for the progress bar. Required when uploadProgress is provided.
+     */
+    progressAriaLabel?: string;
     className?: string;
 }
 declare const AcceptedFile: {
-    ({ asChild: _asChild, className, file, fileIndex, uploadProgress, ...props }: FileUploadAcceptedFileProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, className, file, uploadProgress, deleteButtonAriaLabel, progressAriaLabel, ...props }: FileUploadAcceptedFileProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -133,9 +147,8 @@ declare const Context: {
     displayName: string;
 };
 
-declare function Dropzone({ children, onFiles, className, unstyled, }: {
+declare function Dropzone({ children, className, unstyled, }: {
     children?: React.ReactNode;
-    onFiles?: (files: FileList) => void;
     className?: string;
     unstyled?: boolean;
 }): react_jsx_runtime.JSX.Element;
@@ -143,56 +156,14 @@ declare namespace Dropzone {
     var displayName: string;
 }
 
-interface FileUploadItemProps extends ComponentPropsWithoutRef<'li'> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLLIElement>;
-    children: ReactNode;
-    className?: string;
-}
-declare const Item: {
-    ({ asChild: _asChild, className, children, ...props }: FileUploadItemProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 interface FileUploadItemDeleteTriggerProps extends React.ComponentProps<typeof IconButton> {
     /**
-     * Index of the file to delete
+     * The file to delete
      */
-    fileIndex: number;
+    file: File;
 }
 declare const ItemDeleteTrigger: {
-    ({ className, fileIndex, onClick, ...props }: FileUploadItemDeleteTriggerProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface FileUploadItemFileNameProps extends ComponentPropsWithoutRef<'p'> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLParagraphElement>;
-    className?: string;
-    children?: ReactNode;
-}
-declare const ItemFileName: {
-    ({ asChild: _asChild, className, children, ...props }: FileUploadItemFileNameProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface FileUploadItemSizeTextProps extends ComponentPropsWithoutRef<'p'> {
-    /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
-     */
-    asChild?: boolean;
-    ref?: Ref<HTMLParagraphElement>;
-    className?: string;
-    children?: ReactNode;
-}
-declare const ItemSizeText: {
-    ({ asChild: _asChild, className, children, ...props }: FileUploadItemSizeTextProps): react_jsx_runtime.JSX.Element;
+    ({ className, file, onClick, ...props }: FileUploadItemDeleteTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -227,31 +198,31 @@ interface FileUploadRejectedFileProps extends ComponentPropsWithoutRef<'li'> {
      * The rejected file to display
      */
     rejectedFile: RejectedFile$1;
-    /**
-     * The index of the rejected file in the rejectedFiles array
-     */
-    rejectedFileIndex: number;
     /**
      * Function to render the error message for each error code
      * @param error - The error code
      * @returns The error message to display
      */
     renderError: (error: FileUploadFileError) => string;
+    /**
+     * Accessible label for the delete button
+     */
+    deleteButtonAriaLabel: string;
     className?: string;
 }
 declare const RejectedFile: {
-    ({ asChild: _asChild, className, rejectedFile, rejectedFileIndex, renderError, ...props }: FileUploadRejectedFileProps): react_jsx_runtime.JSX.Element;
+    ({ asChild: _asChild, className, rejectedFile, renderError, deleteButtonAriaLabel, ...props }: FileUploadRejectedFileProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 interface FileUploadRejectedFileDeleteTriggerProps extends React.ComponentProps<typeof IconButton> {
     /**
-     * Index of the rejected file to remove
+     * The rejected file to remove
      */
-    rejectedFileIndex: number;
+    rejectedFile: RejectedFile$1;
 }
 declare const RejectedFileDeleteTrigger: {
-    ({ className, rejectedFileIndex, onClick, ...props }: FileUploadRejectedFileDeleteTriggerProps): react_jsx_runtime.JSX.Element;
+    ({ className, rejectedFile, onClick, ...props }: FileUploadRejectedFileDeleteTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -270,9 +241,6 @@ declare const FileUpload: typeof FileUpload$1 & {
     Trigger: typeof Trigger;
     Dropzone: typeof Dropzone;
     Context: typeof Context;
-    Item: typeof Item;
-    ItemFileName: typeof ItemFileName;
-    ItemSizeText: typeof ItemSizeText;
     ItemDeleteTrigger: typeof ItemDeleteTrigger;
     PreviewImage: typeof PreviewImage;
     AcceptedFile: typeof AcceptedFile;
@@ -280,4 +248,4 @@ declare const FileUpload: typeof FileUpload$1 & {
     RejectedFileDeleteTrigger: typeof RejectedFileDeleteTrigger;
 };
 
-export { FileUpload, type FileUploadFileError, type RejectedFile$1 as RejectedFile };
+export { type FileAcceptDetails, type FileChangeDetails, type FileRejectDetails, FileUpload, type FileUploadFileError, type RejectedFile$1 as RejectedFile };