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

package/dist/Title/index.d.ts

@@ -0,0 +1,164 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface Conditions<T> {
+	xs?: T;
+	md?: T;
+	lg?: T;
+	xl?: T;
+}
+export type TextAlign = "left" | "right" | "center" | "justify";
+declare const propertiesTitle: {
+	color: {
+		"primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	textAlign: TextAlign[];
+	fontSize: {
+		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4-5": `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})`;
+		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	fontWeight: {
+		regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	lineHeight: {
+		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"4-5": `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})`;
+		"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+};
+export type TitleColorProperties = keyof typeof propertiesTitle.color;
+export type TitleFontSizeProperties = keyof typeof propertiesTitle.fontSize;
+export type TitleFontWeightProperties = keyof typeof propertiesTitle.fontWeight;
+export type TitleLineHeightProperties = keyof typeof propertiesTitle.lineHeight;
+export type TitleConditions<T> = Conditions<T>;
+export interface TitleSprinkle {
+	/**
+	 * The fontSize property sets the size of the title.
+	 * @default base
+	 */
+	fontSize?: TitleFontSizeProperties | TitleConditions<TitleFontSizeProperties>;
+	/**
+	 * The fontWeight property sets how thick or thin characters in title should be displayed.
+	 * @default regular
+	 */
+	fontWeight?: TitleFontWeightProperties | TitleConditions<TitleFontWeightProperties>;
+	/**
+	 * The lineHeight property specifies the line height of the title.
+	 * @default base
+	 */
+	lineHeight?: TitleLineHeightProperties | TitleConditions<TitleLineHeightProperties>;
+	/**
+	 * The textAlign property specifies the horizontal alignment of title.
+	 * @default left
+	 */
+	textAlign?: TextAlign | TitleConditions<TextAlign>;
+	/**
+	 * The color property is used to set the color of the title.
+	 * @default neutral-textLow
+	 */
+	color?: TitleColorProperties | TitleConditions<TitleColorProperties>;
+}
+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 TitleSkeletonProperties = Pick<TitleProps, "as"> & Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
+export type TitleSkeletonProps = TitleSkeletonProperties;
+export declare const TitleSkeleton: React.FC<TitleSkeletonProps>;
+export interface TitleComponents {
+	Skeleton: typeof TitleSkeleton;
+}
+export interface TitleProperties extends TitleSprinkle {
+	/**
+	 * The content of the title.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Type of html tag to create for the title.
+	 * @default h1
+	 */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+export type TitleProps = TitleProperties & HTMLAttributes<HTMLHeadingElement>;
+export declare const Title: React.FC<TitleProps> & TitleComponents;
+
+export {};

package/dist/Toast/index.d.ts

@@ -0,0 +1,56 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface ToastProviderProperties {
+	/**
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type ToastProviderProps = ToastProviderProperties;
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export interface ToastComponents {
+	Provider: typeof ToastProvider;
+}
+export type Types = "primary" | "success" | "danger" | "progress";
+export interface ToastProperties {
+	/**
+	 * Unique toast ID used when hiding or removing a toast.
+	 */
+	id: string;
+	/**
+	 * The text that should appear in the toast message.
+	 */
+	text: string;
+	/**
+	 * Change the visual style of the toast.
+	 * @default primary
+	 */
+	type?: Types;
+	/**
+	 * The time in milliseconds that the toast message should persist.
+	 * @default 4000
+	 */
+	duration?: 4000 | 8000 | 16000;
+	/**
+	 * Tells you whether or not Toast should close automatically.
+	 * @default true
+	 */
+	autoClose?: boolean;
+	/**
+	 * Tells the toast position when we are using multiple toasts.
+	 * @default 0
+	 */
+	position?: number;
+}
+export type ToastProps = ToastProperties & HTMLAttributes<HTMLDivElement>;
+export declare const Toast: React.FC<ToastProps> & ToastComponents;
+export interface ToastContextProps {
+	closeToast: (id: string) => void;
+	addToast: (toast: Omit<ToastProps, "autoClose">) => void;
+}
+export declare const useToast: () => ToastContextProps;
+
+export {};

package/dist/Toggle/index.d.ts

@@ -0,0 +1,48 @@
+// 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 ToggleSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
+export type ToggleSkeletonProps = ToggleSkeletonProperties;
+export declare const ToggleSkeleton: React.FC<ToggleSkeletonProps>;
+export interface ToggleComponents {
+	Skeleton: typeof ToggleSkeleton;
+}
+export interface ToggleProperties {
+	/**
+	 * The name of the input element.
+	 */
+	name: string;
+	/**
+	 * Sets toggle state to activated or deactivated.
+	 */
+	active?: boolean;
+	/**
+	 * Text to be rendered inside the component
+	 */
+	label?: string;
+}
+export type ToggleProps = ToggleProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const Toggle: React.FC<ToggleProps> & ToggleComponents;
+
+export {};

package/dist/Tooltip/index.d.ts

@@ -0,0 +1,46 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface Conditions<T> {
+	xs?: T;
+	md?: T;
+	lg?: T;
+	xl?: T;
+}
+export interface TooltipSprinkle {
+	/**
+	 * The maxWidth property specifies the maximum width of a popover's content area.
+	 */
+	maxWidth?: string | Conditions<string>;
+}
+export interface TooltipProperties extends TooltipSprinkle {
+	/**
+	 * An HTML element, or a function that returns one. It's used to set the position of the tooltip.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The text that should appear in the tooltip message.
+	 */
+	content: string;
+	/**
+	 * Conditional for displaying the popover arrow.
+	 * @default false
+	 */
+	arrow?: boolean;
+	/**
+	 * Position of the popover.
+	 * @default bottom
+	 */
+	position?: "top" | "bottom" | "left" | "right";
+}
+export type TooltipProps = TooltipProperties & HTMLAttributes<HTMLDivElement>;
+export declare const Tooltip: React.FC<TooltipProps>;
+
+export {
+	Tooltip as default,
+};
+
+export {};

package/dist/index.d.ts

@@ -995,6 +995,7 @@ export interface TextSprinkle {
 	textAlign?: TextAlign | TextConditions<TextAlign>;
 	/**
 	 * The color property is used to set the color of the text.
+	 * Note: Gradients like 'ai-generative' changes other properties like 'width' and 'display', which could make the component behave differently. Ensure to visually test the component when dynamically changing the color.
 	 * @default neutral-textLow
 	 */
 	color?: TextColorProperties | TextConditions<TextColorProperties>;
@@ -2166,6 +2167,7 @@ declare const sidebar: {
 		container__footer: string;
 		position: Record<"left" | "right", string>;
 		isVisible: string;
+		removeScrollElement: string;
 	};
 };
 declare const propertiesTable: {