@nimbus-ds/components 5.40.0 → 5.40.1

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 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-11 `5.40.1`
+
+#### 🐛 Bug fixes
+
+- Fixes `FileUploader` to use `asOverlay` property to render a custom overlay when dragging files over the uploader. Better API usage. ([#388](https://github.com/TiendaNube/nimbus-design-system/pull/388) by [@joacotornello](https://github.com/joacotornello))
+- Fixes `FileUploaderOverlay` component to use the correct background color and border color. ([#388](https://github.com/TiendaNube/nimbus-design-system/pull/388) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-12-09 `5.40.0`
 
 #### 🎉 New features

package/dist/CHANGELOG.md

@@ -3,6 +3,13 @@
 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-11 `5.40.1`
+
+#### 🐛 Bug fixes
+
+- Fixes `FileUploader` to use `asOverlay` property to render a custom overlay when dragging files over the uploader. Better API usage. ([#388](https://github.com/TiendaNube/nimbus-design-system/pull/388) by [@joacotornello](https://github.com/joacotornello))
+- Fixes `FileUploaderOverlay` component to use the correct background color and border color. ([#388](https://github.com/TiendaNube/nimbus-design-system/pull/388) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-12-09 `5.40.0`
 
 #### 🎉 New features

package/dist/FileUploader/index.d.ts

@@ -11,7 +11,7 @@ declare const fileUploader: {
 		flexDirection?: "row" | "column" | undefined;
 		cursor?: Cursor | undefined;
 		backgroundColor?: "transparent" | "primary-surface" | "neutral-background" | undefined;
-		borderColor?: "transparent" | "primary-interactive" | "ai-gradientPurpleHigh" | undefined;
+		borderColor?: "transparent" | "primary-interactive" | "ai-generativeInteractiveHover" | undefined;
 	}) => string) & {
 		properties: Set<"aspectRatio" | "backgroundColor" | "cursor" | "flexDirection" | "borderColor">;
 	};
@@ -32,9 +32,21 @@ declare const fileUploader: {
 		};
 		borderColor: {
 			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-			"ai-gradientPurpleHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"ai-generativeInteractiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			transparent: string;
 		};
+		borderRadius: {
+			"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
 	};
 	classnames: {
 		container: string;
@@ -42,7 +54,10 @@ declare const fileUploader: {
 		disabled: string;
 		dragging: string;
 		skeleton: string;
+		asOverlay: string;
 		overlay: string;
+		overlay__content: string;
+		overlay__content__text: string;
 		overlay__image: string;
 	};
 };
@@ -100,6 +115,11 @@ export interface FileUploaderOverlayProperties {
 	 * @default primary-surface
 	 */
 	backgroundColor?: keyof typeof fileUploader.properties.backgroundColor;
+	/**
+	 * Border radius of the overlay
+	 * @default 2
+	 */
+	borderRadius?: keyof typeof fileUploader.properties.borderRadius;
 	/**
 	 * Content to render inside the overlay
 	 */
@@ -148,15 +168,15 @@ export interface FileUploaderProperties {
 	/**
 	 * Callback fired when files are dropped (before validation)
 	 */
-	onDrop?: (event: DragEvent<HTMLLabelElement>) => void;
+	onDrop?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
 	/**
 	 * Callback fired when all dropped files are rejected due to file type validation
 	 */
-	onDropReject?: (event: DragEvent<HTMLLabelElement>) => void;
+	onDropReject?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
 	/**
 	 * Callback fired when files are successfully accepted and processed
 	 */
-	onDropSuccess?: (event: DragEvent<HTMLLabelElement>) => void;
+	onDropSuccess?: (event: DragEvent<HTMLLabelElement | HTMLDivElement>) => void;
 	/**
 	 * Callback fired when an error occurs during file drop processing
 	 */
@@ -165,21 +185,6 @@ export interface FileUploaderProperties {
 	 * 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.
@@ -190,6 +195,11 @@ export interface FileUploaderProperties {
 	 * @default false
 	 */
 	disableClickUpload?: boolean;
+	/**
+	 * When true, the file uploader will be rendered as an overlay. Useful for invisible upload areas used along FileUploader.Overlay.
+	 * @default false
+	 */
+	asOverlay?: boolean;
 }
 export type FileUploaderProps = FileUploaderProperties & {
 	dragOverlay?: ReactElement<FileUploaderOverlayProps>;