@spark-ui/components 11.2.4 → 11.3.0

package/dist/drawer/index.mjs

@@ -1,11 +1,11 @@
 import {
   IconButton
 } from "../chunk-XYK6V3JF.mjs";
-import "../chunk-HEKSVWYW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-HEKSVWYW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import "../chunk-KEGAAGJW.mjs";
 import "../chunk-6QCEPQ3U.mjs";
 

package/dist/dropdown/index.mjs

@@ -2,11 +2,11 @@ import {
   Popover
 } from "../chunk-D7YBYT5H.mjs";
 import "../chunk-XYK6V3JF.mjs";
-import "../chunk-HEKSVWYW.mjs";
-import "../chunk-GAK4SC2F.mjs";
 import {
   Icon
 } from "../chunk-UMUMFMFB.mjs";
+import "../chunk-HEKSVWYW.mjs";
+import "../chunk-GAK4SC2F.mjs";
 import {
   VisuallyHidden
 } from "../chunk-KEGAAGJW.mjs";

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

@@ -0,0 +1,283 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { IconButton } from '../icon-button/index.mjs';
+import { ButtonProps } from '../button/index.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface FileUploadProps {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+    className?: string;
+    /**
+     * Initial files to display when the component mounts (uncontrolled mode)
+     */
+    defaultValue?: File[];
+    /**
+     * Controlled files value (controlled mode)
+     * When provided, the component becomes controlled
+     */
+    value?: File[];
+    /**
+     * Callback when files are selected
+     */
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Whether multiple files can be selected
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Comma-separated list of accepted file types
+     * Supports MIME types (e.g., "image/*", "image/png", "application/pdf")
+     * and file extensions (e.g., ".pdf", ".doc", ".jpg")
+     * @example "image/*"
+     * @example ".pdf,.doc"
+     * @example "image/png,image/jpeg,.pdf"
+     */
+    accept?: string;
+    /**
+     * Maximum number of files that can be uploaded
+     * 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
+     */
+    maxFileSize?: number;
+    /**
+     * Minimum file size in bytes
+     * 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
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the file upload to read-only mode
+     */
+    readOnly?: boolean;
+    /**
+     * The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale.
+     * Used for formatting file sizes and error messages.
+     * @default Browser locale or 'en' if not available
+     */
+    locale?: string;
+}
+type FileUploadFileError = 'TOO_MANY_FILES' | 'FILE_INVALID_TYPE' | 'FILE_TOO_LARGE' | 'FILE_TOO_SMALL' | 'FILE_INVALID' | 'FILE_EXISTS';
+interface RejectedFile$1 {
+    file: File;
+    errors: FileUploadFileError[];
+}
+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;
+    displayName: string;
+};
+
+interface FileUploadAcceptedFileProps 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>;
+    /**
+     * 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;
+    className?: string;
+}
+declare const AcceptedFile: {
+    ({ asChild: _asChild, className, file, fileIndex, uploadProgress, ...props }: FileUploadAcceptedFileProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadContextProps {
+    /**
+     * Render prop that receives acceptedFiles, rejectedFiles, formatFileSize, and locale
+     */
+    children: (props: {
+        acceptedFiles: File[];
+        rejectedFiles: RejectedFile$1[];
+        formatFileSize: (bytes: number, locale?: string) => string;
+        locale?: string;
+    }) => ReactNode;
+}
+declare const Context: {
+    ({ children }: FileUploadContextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare function Dropzone({ children, onFiles, className, unstyled, }: {
+    children?: React.ReactNode;
+    onFiles?: (files: FileList) => void;
+    className?: string;
+    unstyled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+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
+     */
+    fileIndex: number;
+}
+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;
+    displayName: string;
+};
+
+interface FileUploadPreviewImageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    /**
+     * The file to preview
+     */
+    file: File;
+    /**
+     * Fallback content when file is not an image or preview fails
+     */
+    fallback?: React.ReactNode;
+}
+declare const PreviewImage: {
+    ({ asChild: _asChild, className, file, fallback, ...props }: FileUploadPreviewImageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadRejectedFileProps 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>;
+    /**
+     * 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;
+    className?: string;
+}
+declare const RejectedFile: {
+    ({ asChild: _asChild, className, rejectedFile, rejectedFileIndex, renderError, ...props }: FileUploadRejectedFileProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadRejectedFileDeleteTriggerProps extends React.ComponentProps<typeof IconButton> {
+    /**
+     * Index of the rejected file to remove
+     */
+    rejectedFileIndex: number;
+}
+declare const RejectedFileDeleteTrigger: {
+    ({ className, rejectedFileIndex, onClick, ...props }: FileUploadRejectedFileDeleteTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadTriggerProps extends Omit<ButtonProps, 'children' | 'disabled'> {
+    ref?: Ref<HTMLButtonElement>;
+    className?: string;
+    children: ReactNode;
+    unstyled?: boolean;
+}
+declare const Trigger: {
+    ({ className, children, asChild, unstyled, design, intent, ref, ...props }: FileUploadTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+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;
+    RejectedFile: typeof RejectedFile;
+    RejectedFileDeleteTrigger: typeof RejectedFileDeleteTrigger;
+};
+
+export { FileUpload, type FileUploadFileError, type RejectedFile$1 as RejectedFile };

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

@@ -0,0 +1,283 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { IconButton } from '../icon-button/index.js';
+import { ButtonProps } from '../button/index.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface FileUploadProps {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+    className?: string;
+    /**
+     * Initial files to display when the component mounts (uncontrolled mode)
+     */
+    defaultValue?: File[];
+    /**
+     * Controlled files value (controlled mode)
+     * When provided, the component becomes controlled
+     */
+    value?: File[];
+    /**
+     * Callback when files are selected
+     */
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Whether multiple files can be selected
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Comma-separated list of accepted file types
+     * Supports MIME types (e.g., "image/*", "image/png", "application/pdf")
+     * and file extensions (e.g., ".pdf", ".doc", ".jpg")
+     * @example "image/*"
+     * @example ".pdf,.doc"
+     * @example "image/png,image/jpeg,.pdf"
+     */
+    accept?: string;
+    /**
+     * Maximum number of files that can be uploaded
+     * 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
+     */
+    maxFileSize?: number;
+    /**
+     * Minimum file size in bytes
+     * 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
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, sets the file upload to read-only mode
+     */
+    readOnly?: boolean;
+    /**
+     * The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale.
+     * Used for formatting file sizes and error messages.
+     * @default Browser locale or 'en' if not available
+     */
+    locale?: string;
+}
+type FileUploadFileError = 'TOO_MANY_FILES' | 'FILE_INVALID_TYPE' | 'FILE_TOO_LARGE' | 'FILE_TOO_SMALL' | 'FILE_INVALID' | 'FILE_EXISTS';
+interface RejectedFile$1 {
+    file: File;
+    errors: FileUploadFileError[];
+}
+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;
+    displayName: string;
+};
+
+interface FileUploadAcceptedFileProps 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>;
+    /**
+     * 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;
+    className?: string;
+}
+declare const AcceptedFile: {
+    ({ asChild: _asChild, className, file, fileIndex, uploadProgress, ...props }: FileUploadAcceptedFileProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadContextProps {
+    /**
+     * Render prop that receives acceptedFiles, rejectedFiles, formatFileSize, and locale
+     */
+    children: (props: {
+        acceptedFiles: File[];
+        rejectedFiles: RejectedFile$1[];
+        formatFileSize: (bytes: number, locale?: string) => string;
+        locale?: string;
+    }) => ReactNode;
+}
+declare const Context: {
+    ({ children }: FileUploadContextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare function Dropzone({ children, onFiles, className, unstyled, }: {
+    children?: React.ReactNode;
+    onFiles?: (files: FileList) => void;
+    className?: string;
+    unstyled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+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
+     */
+    fileIndex: number;
+}
+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;
+    displayName: string;
+};
+
+interface FileUploadPreviewImageProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    /**
+     * The file to preview
+     */
+    file: File;
+    /**
+     * Fallback content when file is not an image or preview fails
+     */
+    fallback?: React.ReactNode;
+}
+declare const PreviewImage: {
+    ({ asChild: _asChild, className, file, fallback, ...props }: FileUploadPreviewImageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadRejectedFileProps 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>;
+    /**
+     * 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;
+    className?: string;
+}
+declare const RejectedFile: {
+    ({ asChild: _asChild, className, rejectedFile, rejectedFileIndex, renderError, ...props }: FileUploadRejectedFileProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadRejectedFileDeleteTriggerProps extends React.ComponentProps<typeof IconButton> {
+    /**
+     * Index of the rejected file to remove
+     */
+    rejectedFileIndex: number;
+}
+declare const RejectedFileDeleteTrigger: {
+    ({ className, rejectedFileIndex, onClick, ...props }: FileUploadRejectedFileDeleteTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FileUploadTriggerProps extends Omit<ButtonProps, 'children' | 'disabled'> {
+    ref?: Ref<HTMLButtonElement>;
+    className?: string;
+    children: ReactNode;
+    unstyled?: boolean;
+}
+declare const Trigger: {
+    ({ className, children, asChild, unstyled, design, intent, ref, ...props }: FileUploadTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+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;
+    RejectedFile: typeof RejectedFile;
+    RejectedFileDeleteTrigger: typeof RejectedFileDeleteTrigger;
+};
+
+export { FileUpload, type FileUploadFileError, type RejectedFile$1 as RejectedFile };