@nimbus-ds/components 5.39.0 → 5.40.0

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
-Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
+Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories
+every day, with simplicity, accessibility, consistency and performance.
+
+## 2025-12-09 `5.40.0`
+
+#### 🎉 New features
+
+- `FileUploader`: Added `dragOverlay` property to render a custom overlay when dragging files over the uploader. ([#387](https://github.com/TiendaNube/nimbus-design-system/pull/387) by [@joacotornello](https://github.com/joacotornello))
 
 ## 2025-12-02 `5.39.0`
 

package/dist/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Changelog
 
-Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
+Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories
+every day, with simplicity, accessibility, consistency and performance.
+
+## 2025-12-09 `5.40.0`
+
+#### 🎉 New features
+
+- `FileUploader`: Added `dragOverlay` property to render a custom overlay when dragging files over the uploader. ([#387](https://github.com/TiendaNube/nimbus-design-system/pull/387) by [@joacotornello](https://github.com/joacotornello))
 
 ## 2025-12-02 `5.39.0`
 

package/dist/FileUploader/index.d.ts

@@ -1,7 +1,7 @@
 // Generated by dts-bundle-generator v7.2.0
 
 import React from 'react';
-import { DragEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { DragEvent, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
 
 export type AspectRatio = "1/1" | "16/9" | "9/16" | "4/3" | "3/4" | "2/1" | "1/2";
 export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
@@ -10,8 +10,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 [
@@ -23,6 +25,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;
@@ -30,6 +42,8 @@ declare const fileUploader: {
 		disabled: string;
 		dragging: string;
 		skeleton: string;
+		overlay: string;
+		overlay__image: string;
 	};
 };
 export interface SkeletonProperties {
@@ -59,8 +73,47 @@ export type FileUploaderSkeletonProperties = Partial<Pick<SkeletonProps, "width"
 };
 export type FileUploaderSkeletonProps = FileUploaderSkeletonProperties;
 export 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">;
+/**
+ * Overlay component displayed during drag operations on FileUploader.
+ * Renders a customizable visual feedback with optional title, subtitle and image.
+ */
+export declare const FileUploaderOverlay: React.FC<FileUploaderOverlayProps>;
 export interface FileUploaderComponents {
 	Skeleton: typeof FileUploaderSkeleton;
+	Overlay: typeof FileUploaderOverlay;
 }
 export interface FileUploaderProperties {
 	/**
@@ -108,8 +161,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 {};