@nimbus-ds/components 5.39.0 → 5.40.0-rc.1

package/dist/index.d.ts

@@ -831,8 +831,10 @@ declare const fileUploader: {
 		aspectRatio?: "none" | AspectRatio | undefined;
 		flexDirection?: "row" | "column" | undefined;
 		cursor?: Cursor | undefined;
+		backgroundColor?: "transparent" | "primary-surface" | "neutral-background" | undefined;
+		borderColor?: "transparent" | "primary-interactive" | "ai-gradientPurpleHigh" | undefined;
 	}) => string) & {
-		properties: Set<"aspectRatio" | "cursor" | "flexDirection">;
+		properties: Set<"aspectRatio" | "backgroundColor" | "cursor" | "flexDirection" | "borderColor">;
 	};
 	properties: {
 		aspectRatio: readonly [
@@ -844,6 +846,16 @@ declare const fileUploader: {
 			"column"
 		];
 		cursor: Cursor[];
+		backgroundColor: {
+			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			transparent: string;
+		};
+		borderColor: {
+			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"ai-gradientPurpleHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			transparent: string;
+		};
 	};
 	classnames: {
 		container: string;
@@ -851,11 +863,13 @@ declare const fileUploader: {
 		disabled: string;
 		dragging: string;
 		skeleton: string;
+		overlay: string;
+		overlay__image: string;
 	};
 };
 declare const icon: {
 	sprinkle: ((props: {
-		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "ai-gradientPurpleHigh" | undefined;
+		color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | "ai-generative" | "ai-gradientPurpleHigh" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | undefined;
 		cursor?: Cursor | undefined;
 	}) => string) & {
 		properties: Set<"color" | "cursor">;
@@ -2446,8 +2460,43 @@ export type FileUploaderSkeletonProperties = Partial<Pick<SkeletonProps, "width"
 };
 export type FileUploaderSkeletonProps = FileUploaderSkeletonProperties;
 declare const FileUploaderSkeleton: React.FC<FileUploaderSkeletonProps>;
+export interface FileUploaderOverlayProperties {
+	/**
+	 * Title text displayed in the overlay
+	 */
+	title?: string;
+	/**
+	 * Subtitle text displayed below the title
+	 */
+	subtitle?: string;
+	/**
+	 * Source URL for the image displayed in the overlay
+	 */
+	imageSrc?: string;
+	/**
+	 * Alt text for the image
+	 */
+	imageAlt?: string;
+	/**
+	 * Border color of the overlay
+	 * @default primary-interactive
+	 */
+	borderColor?: keyof typeof fileUploader.properties.borderColor;
+	/**
+	 * Background color of the overlay
+	 * @default primary-surface
+	 */
+	backgroundColor?: keyof typeof fileUploader.properties.backgroundColor;
+	/**
+	 * Content to render inside the overlay
+	 */
+	children?: ReactNode;
+}
+export type FileUploaderOverlayProps = FileUploaderOverlayProperties & Omit<HTMLAttributes<HTMLDivElement>, "title">;
+declare const FileUploaderOverlay: React.FC<FileUploaderOverlayProps>;
 export interface FileUploaderComponents {
 	Skeleton: typeof FileUploaderSkeleton;
+	Overlay: typeof FileUploaderOverlay;
 }
 export interface FileUploaderProperties {
 	/**
@@ -2495,8 +2544,39 @@ export interface FileUploaderProperties {
 	 * Callback fired when an error occurs during file drop processing
 	 */
 	onError?: (error: Error) => void;
+	/**
+	 * Content to render inside the file uploader container
+	 */
+	children?: ReactNode;
+	/**
+	 * Hides the default icon when true
+	 * @default true
+	 */
+	showIcon?: boolean;
+	/**
+	 * Border color of the file uploader
+	 * @default primary-interactive
+	 */
+	borderColor?: keyof typeof fileUploader.properties.borderColor;
+	/**
+	 * Background color of the file uploader
+	 * @default primary-surface
+	 */
+	backgroundColor?: keyof typeof fileUploader.properties.backgroundColor;
+	/**
+	 * Custom overlay element to render when dragging files over the uploader.
+	 * When defined, this overlay will be displayed instead of children during drag operations.
+	 */
+	dragOverlay?: ReactNode;
+	/**
+	 * When true, the file uploader will not be clickable and files can only be uploaded by dragging and dropping. Useful for invisible upload areas used along FileUploader.Overlay.
+	 * @default false
+	 */
+	disableClickUpload?: boolean;
 }
-export type FileUploaderProps = FileUploaderProperties & InputHTMLAttributes<HTMLInputElement>;
+export type FileUploaderProps = FileUploaderProperties & {
+	dragOverlay?: ReactElement<FileUploaderOverlayProps>;
+} & InputHTMLAttributes<HTMLInputElement>;
 export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
 export type IconSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
 	/**