@nimbus-ds/components 5.29.0-rc.1 → 5.29.1-rc.1

package/dist/Button/index.d.ts

@@ -0,0 +1,83 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, ReactNode } from 'react';
+
+export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
+export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
+	as?: E;
+}>>;
+export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}
+/**
+ * Extends original type to ensure built in React types play nice
+ * with polymorphic components still e.g. `React.ElementRef` etc.
+ */
+> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+	/**
+	 * When `as` prop is passed, use this overload.
+	 * Merges original own props (without DOM props) and the inferred props
+	 * from `as` element with the own props taking precendence.
+	 *
+	 * We explicitly avoid `React.ElementType` and manually narrow the prop types
+	 * so that events are typed when using JSX.IntrinsicElements.
+	 */
+	<As = IntrinsicElementString>(props: As extends "" ? {
+		as: keyof JSX.IntrinsicElements;
+	} : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
+		as: As;
+	}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
+		as: As;
+	}> : never): React.ReactElement | null;
+}
+export interface SkeletonProperties {
+	/**
+	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+	 */
+	width: string;
+	/**
+	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+	 */
+	height: string;
+	/**
+	 * The border radius of the skeleton.
+	 */
+	borderRadius?: string;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export type ButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
+export type ButtonSkeletonProps = ButtonSkeletonProperties;
+export declare const ButtonSkeleton: React.FC<ButtonSkeletonProps>;
+export interface ButtonComponents {
+	Skeleton: typeof ButtonSkeleton;
+}
+export interface ButtonProperties {
+	/**
+	 * The content of the button.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Change the visual style of the button.
+	 * @default neutral
+	 */
+	appearance?: "primary" | "danger" | "neutral" | "transparent" | "ai-primary" | "ai-secondary";
+	/**
+	 * Disables the button, disallowing user interaction.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Determines if the button should grow to fill the full width of its container.
+	 * @default false
+	 */
+	fullWidth?: boolean;
+}
+export type ButtonBaseProps = ButtonProperties & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const Button: PolymorphicForwardRefComponent<"a" | "button", ButtonBaseProps> & ButtonComponents;
+export type ButtonProps = ComponentPropsWithRef<typeof Button>;
+
+export {};

package/dist/CHANGELOG.md

@@ -6,7 +6,7 @@ Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team
 
 #### 🎉 New features
 
-- `Text`: Added `ai-generative` appearance to highlight AI-generated content using Nimbus AI gradient style. ([#TBD](https://github.com/TiendaNube/nimbus-design-system/pull/TBD) by [@usuario](https://github.com/usuario))
+- `Text`: Added `ai-generative` appearance to highlight AI-generated content using Nimbus AI gradient style. ([#363](https://github.com/TiendaNube/nimbus-design-system/pull/363) by [@joacotornello](https://github.com/joacotornello))
 
 ## 2025-09-25 `5.28.0`
 

package/dist/Card/index.d.ts

@@ -0,0 +1,153 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+declare const card: {
+	classnames: {
+		container: string;
+		container__footer: string;
+	};
+	subComponents: {
+		header: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		body: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		footer: {
+			sprinkle: ((props: {
+				padding?: "base" | "small" | "none" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+	};
+	sprinkle: ((props: {
+		backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
+		padding?: "base" | "small" | "none" | undefined;
+	}) => string) & {
+		properties: Set<"backgroundColor" | "padding">;
+	};
+	properties: {
+		backgroundColor: {
+			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		padding: {
+			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			none: string;
+		};
+	};
+};
+export interface CardBodyProperties {
+	/**
+	 * The content of the card body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an card's body content area.
+	 * @default none
+	 */
+	padding?: keyof typeof card.subComponents.body.properties.padding;
+}
+export type CardBodyProps = CardBodyProperties & HTMLAttributes<HTMLElement>;
+export declare const CardBody: React.FC<CardBodyProps>;
+export interface CardFooterProperties {
+	/**
+	 * The content of the card footer.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an card's footer content area.
+	 * @default none
+	 */
+	padding?: keyof typeof card.subComponents.footer.properties.padding;
+}
+export type CardFooterProps = CardFooterProperties & HTMLAttributes<HTMLElement>;
+export declare const CardFooter: React.FC<CardFooterProps>;
+export interface CardHeaderProperties {
+	/**
+	 * The content of the card header.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+	/**
+	 * The title to display in the card header.
+	 */
+	title?: string;
+	/**
+	 * The padding properties are used to generate space around an card's header content area.
+	 * @default none
+	 */
+	padding?: keyof typeof card.subComponents.header.properties.padding;
+}
+export type CardHeaderProps = CardHeaderProperties & HTMLAttributes<HTMLElement>;
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export interface CardComponents {
+	Body: typeof CardBody;
+	Footer: typeof CardFooter;
+	Header: typeof CardHeader;
+}
+export interface CardProperties {
+	/**
+	 * The content of the card.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an card's content area.
+	 * @default base
+	 */
+	padding?: keyof typeof card.properties.padding;
+	/**
+	 * The backgroundColor property sets the background color of the card.
+	 * @default neutral-background
+	 */
+	backgroundColor?: keyof typeof card.properties.backgroundColor;
+}
+export type CardProps = CardProperties & HTMLAttributes<HTMLElement>;
+export declare const Card: React.FC<CardProps> & CardComponents;
+
+export {};

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,62 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, InputHTMLAttributes } from 'react';
+
+export interface SkeletonProperties {
+	/**
+	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+	 */
+	width: string;
+	/**
+	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+	 */
+	height: string;
+	/**
+	 * The border radius of the skeleton.
+	 */
+	borderRadius?: string;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export type CheckboxSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
+export type CheckboxSkeletonProps = CheckboxSkeletonProperties;
+export declare const CheckboxSkeleton: React.FC<CheckboxSkeletonProps>;
+export interface CheckboxComponents {
+	Skeleton: typeof CheckboxSkeleton;
+}
+export interface CheckboxProperties {
+	/**
+	 * 	The name of the input element.
+	 */
+	name: string;
+	/**
+	 * Change the visual style of the checkbox.
+	 * @default neutral
+	 */
+	appearance?: "primary" | "danger";
+	/**
+	 * Modifies true/false value of the native checkbox.
+	 */
+	checked?: boolean;
+	/**
+	 * Modifies the native disabled state of the native checkbox.
+	 */
+	disabled?: boolean;
+	/**
+	 * If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
+	 * @default false
+	 */
+	indeterminate?: boolean;
+	/**
+	 * Text to be rendered inside the component.
+	 */
+	label?: string;
+}
+export type CheckboxProps = CheckboxProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
+
+export {};

package/dist/Chip/index.d.ts

@@ -0,0 +1,59 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+
+export interface SkeletonProperties {
+	/**
+	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+	 */
+	width: string;
+	/**
+	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+	 */
+	height: string;
+	/**
+	 * The border radius of the skeleton.
+	 */
+	borderRadius?: string;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export type ChipSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+};
+export type ChipSkeletonProps = ChipSkeletonProperties;
+export declare const ChipSkeleton: React.FC<ChipSkeletonProps>;
+export interface ChipComponents {
+	Skeleton: typeof ChipSkeleton;
+}
+export interface ChipProperties {
+	/**
+	 Text to be displayed on chip.
+	*/
+	text: string;
+	/**
+	 * SVG icon to be displayed on chip.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+	/**
+	 * Informs whether the close icon should be displayed.
+	 */
+	removable?: boolean;
+	/**
+	 * Highlights the chip to indicate its value was generated by AI.
+	 * Applies AI gradient border and an AI outline.
+	 */
+	aiGenerated?: boolean;
+}
+export type ChipProps = ChipProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
+export declare const Chip: React.FC<ChipProps> & ChipComponents;
+
+export {};

package/dist/Collapsible/index.d.ts

@@ -0,0 +1,45 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface CollapsibleBodyProperties {
+	/**
+	 * The content of the collapsible body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Show Collapsible.Body when state is open or closed.
+	 * @default open
+	 */
+	visibleWhen?: "open" | "closed";
+	/**
+	 * Set the direction that Collapsible.Body going to open
+	 * @default none
+	 */
+	direction?: "top" | "bottom" | "none";
+}
+export type CollapsibleBodyProps = CollapsibleBodyProperties & HTMLAttributes<HTMLElement>;
+export declare const CollapsibleBody: React.FC<CollapsibleBodyProps>;
+export interface CollapsibleItemProperties {
+	/**
+	 * The content of the collapsible body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type CollapsibleItemProps = CollapsibleItemProperties;
+export declare const CollapsibleItem: React.FC<CollapsibleItemProps>;
+export interface CollapsibleComponents {
+	Body: typeof CollapsibleBody;
+	Item: typeof CollapsibleItem;
+}
+export interface CollapsibleProperties {
+	children?: ReactNode;
+	open?: boolean;
+}
+export type CollapsibleBaseProps = CollapsibleProperties & Omit<HTMLAttributes<HTMLElement>, "onChange">;
+export declare const Collapsible: React.FC<CollapsibleProperties> & CollapsibleComponents;
+
+export {};

package/dist/Divider/index.d.ts

@@ -0,0 +1,30 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes } from 'react';
+
+export interface DividerProperties {
+	/**
+	 * Defines the orientation of the divider.
+	 * @default horizontal
+	 */
+	orientation?: "horizontal" | "vertical";
+	/**
+	 * Visual appearance color.
+	 * @default neutral
+	 */
+	appearance?: "neutral";
+	/**
+	 * Thickness level based on shape.border.width tokens.
+	 * @default 1
+	 */
+	thickness?: 1 | 2 | 3;
+}
+export type DividerProps = DividerProperties & HTMLAttributes<HTMLHRElement>;
+export declare const Divider: React.FC<DividerProps>;
+
+export {
+	Divider as default,
+};
+
+export {};

package/dist/FileUploader/index.d.ts

@@ -0,0 +1,98 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, InputHTMLAttributes } 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";
+declare const fileUploader: {
+	sprinkle: ((props: {
+		aspectRatio?: "none" | AspectRatio | undefined;
+		flexDirection?: "row" | "column" | undefined;
+		cursor?: Cursor | undefined;
+	}) => string) & {
+		properties: Set<"aspectRatio" | "cursor" | "flexDirection">;
+	};
+	properties: {
+		aspectRatio: readonly [
+			"none",
+			...AspectRatio[]
+		];
+		flexDirection: readonly [
+			"row",
+			"column"
+		];
+		cursor: Cursor[];
+	};
+	classnames: {
+		container: string;
+		container__input: string;
+		disabled: string;
+		skeleton: string;
+	};
+};
+export interface SkeletonProperties {
+	/**
+	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+	 */
+	width: string;
+	/**
+	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+	 */
+	height: string;
+	/**
+	 * The border radius of the skeleton.
+	 */
+	borderRadius?: string;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export type FileUploaderSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & Partial<Pick<FileUploaderProps, "aspectRatio">> & {
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+};
+export type FileUploaderSkeletonProps = FileUploaderSkeletonProperties;
+export declare const FileUploaderSkeleton: React.FC<FileUploaderSkeletonProps>;
+export interface FileUploaderComponents {
+	Skeleton: typeof FileUploaderSkeleton;
+}
+export interface FileUploaderProperties {
+	/**
+	 * Provide additional context to the action.
+	 */
+	placeholder?: string;
+	/**
+	 * Accept file types
+	 * @default image/jpeg,image/gif,image/png
+	 */
+	accept?: string;
+	/**
+	 * Height value of the file uploader. Defaults to 100%.
+	 * @default 100%
+	 */
+	height?: string;
+	/**
+	 * Width value of the file uploader. Defaults to 100%.
+	 * @default 100%
+	 */
+	width?: string;
+	/**
+	 * Permitted aspect ratios for the size of the file uploader.
+	 * @default 1/1
+	 */
+	aspectRatio?: typeof fileUploader.properties.aspectRatio[number];
+	/**
+	 * Defines the position of the placeholder in relation to the icon.
+	 * @default column
+	 */
+	flexDirection?: typeof fileUploader.properties.flexDirection[number];
+}
+export type FileUploaderProps = FileUploaderProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const FileUploader: React.FC<FileUploaderProps> & FileUploaderComponents;
+
+export {};

package/dist/Icon/index.d.ts

@@ -0,0 +1,120 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type Cursor = "auto" | "pointer" | "not-allowed" | "grab" | "inherit";
+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" | "success-interactive" | "ai-generative" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
+		cursor?: Cursor | undefined;
+	}) => string) & {
+		properties: Set<"color" | "cursor">;
+	};
+	properties: {
+		color: {
+			currentColor: string;
+			"primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"ai-generative": string;
+		};
+		cursor: Cursor[];
+	};
+	classnames: {
+		base: string;
+	};
+};
+export interface SkeletonProperties {
+	/**
+	 * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+	 */
+	width: string;
+	/**
+	 * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+	 */
+	height: string;
+	/**
+	 * The border radius of the skeleton.
+	 */
+	borderRadius?: string;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export type IconSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+};
+export type IconSkeletonProps = IconSkeletonProperties;
+export declare const IconSkeleton: React.FC<IconSkeletonProps>;
+export interface IconComponents {
+	Skeleton: typeof IconSkeleton;
+}
+export interface IconProperties {
+	/**
+	 * The SVG contents to display in the Icon.
+	 * @TJS-type React.ReactNode
+	 */
+	source: ReactNode;
+	/**
+	 * Set the color for the SVG fill.
+	 * Use "ai-generative" to apply the Nimbus AI generative gradient.
+	 * @default neutral-textLow
+	 */
+	color?: keyof typeof icon.properties.color | "ai-generative";
+	/**
+	 * The cursor property specifies the mouse cursor to be displayed when pointing over an element.
+	 * @default inherit
+	 */
+	cursor?: (typeof icon.properties.cursor)[number];
+}
+export type IconProps = IconProperties & HTMLAttributes<HTMLDivElement>;
+export declare const Icon: React.FC<IconProps> & IconComponents;
+/**
+ * Checks if a color value is valid (exists and is not "none" or "transparent")
+ * @param color - The color value to check
+ * @returns True if color is valid, false otherwise
+ */
+export declare const isValidColorValue: (color: string | undefined) => boolean;
+/**
+ * Checks if a color value can use gradient (valid and not already a URL reference)
+ * @param color - The color value to check
+ * @returns True if color can use gradient, false otherwise
+ */
+export declare const canUseGradient: (color: string) => boolean;
+/**
+ * Checks if a color value is a gradient
+ * @param color - The color value to check
+ * @returns True if color is a known gradient value, false otherwise
+ */
+export declare const isGradient: (color: string) => boolean;
+/**
+ * Collection of known gradient color values
+ */
+export declare const GRADIENT_COLORS: Set<string>;
+
+export {};