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

package/dist/IconButton/index.d.ts

@@ -0,0 +1,170 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+
+export interface Conditions<T> {
+	xs?: T;
+	md?: T;
+	lg?: T;
+	xl?: T;
+}
+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;
+	};
+};
+declare const propertiesIconButton: {
+	backgroundColor: {
+		transparent: string;
+		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+	borderColor: {
+		"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-interactivePressed": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		transparent: string;
+		"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"ai-generativeSurface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	};
+};
+export type IconButtonBackgroundColorProperties = keyof typeof propertiesIconButton.backgroundColor;
+export type IconButtonBorderColorProperties = keyof typeof propertiesIconButton.borderColor;
+export interface IconButtonConditions<T> extends Conditions<T> {
+	focus?: T;
+	active?: T;
+	hover?: T;
+}
+export interface IconButtonSprinkle {
+	/**
+	 * The size of the component.
+	 * @default 2.75rem
+	 */
+	size?: string | IconButtonConditions<string>;
+	/**
+	 * The borderColor property sets the color of the icon button's four borders.
+	 * @default { xs: "neutral-interactive", active: "neutral-interactivePressed", hover: "neutral-interactiveHover", focus: "primary-interactive" }
+	 */
+	borderColor?: IconButtonBorderColorProperties | IconButtonConditions<IconButtonBorderColorProperties>;
+	/**
+	 * The backgroundColor property sets the background color of the icon button.
+	 * @default {  xs: "neutral-surface", active: "neutral-interactive", hover: "neutral-surfaceHighlight" }
+	 */
+	backgroundColor?: IconButtonBackgroundColorProperties | IconButtonConditions<IconButtonBackgroundColorProperties>;
+}
+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 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 type IconButtonSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height">> & {
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+};
+export type IconButtonSkeletonProps = IconButtonSkeletonProperties;
+export declare const IconButtonSkeleton: React.FC<IconButtonSkeletonProps>;
+export interface IconButtonComponents {
+	Skeleton: typeof IconButtonSkeleton;
+}
+export interface IconButtonProperties extends IconButtonSprinkle {
+	/**
+	 * Type of html tag to create for the Icon Button component.
+	 * @default button
+	 */
+	as?: "button" | "div";
+	/**
+	 * The SVG contents to display in the Icon button.
+	 * @TJS-type React.ReactNode
+	 */
+	source: ReactNode;
+	/**
+	 * Set the color for the inner Icon fill.
+	 * @default neutral-textHigh
+	 */
+	color?: IconProps["color"];
+	/**
+	 * AI gradient background appearance for the button container.
+	 * When provided, container color/border sprinkles are ignored in favor of gradient styles.
+	 */
+	appearance?: "ai-generative";
+}
+export type IconButtonProps = IconButtonProperties & ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement>;
+export declare const IconButton: React.FC<IconButtonProps> & IconButtonComponents;
+
+export {};

package/dist/Input/index.d.ts

@@ -0,0 +1,76 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithRef, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+
+export type InputIconProperties = Required<Pick<InputBaseProps, "appendPosition">>;
+export type InputIconProps = InputIconProperties & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const InputIcon: React.FC<InputIconProps>;
+export type InputPasswordProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
+export declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export type InputPasswordProps = ComponentPropsWithRef<typeof InputPassword>;
+export type InputSearchProperties = Pick<InputBaseProps, "appearance" | "disabled" | "aiGenerated">;
+export declare const InputSearch: React.ForwardRefExoticComponent<InputSearchProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export type InputSearchProps = ComponentPropsWithRef<typeof InputSearch>;
+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 InputSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
+export type InputSkeletonProps = InputSkeletonProperties;
+export declare const InputSkeleton: React.FC<InputSkeletonProps>;
+export interface InputComponents {
+	Password: typeof InputPassword;
+	Search: typeof InputSearch;
+	Skeleton: typeof InputSkeleton;
+}
+export interface InputProperties {
+	/**
+	 * Change the visual style of the input.
+	 * @default neutral
+	 */
+	appearance?: "neutral" | "success" | "warning" | "danger" | "ai-generative";
+	/**
+	 * Highlights the field to indicate its value was generated by AI.
+	 * Applies AI gradient border, white background and an AI focus ring.
+	 */
+	aiGenerated?: boolean;
+	/**
+	 * Disables the input, disallowing user interaction.
+	 */
+	disabled?: boolean;
+	/**
+	 * Sent icon display position
+	 * @default start
+	 */
+	appendPosition?: "end" | "start";
+	/**
+	 * SVG icon to be displayed on input.
+	 * @TJS-type React.ReactNode
+	 */
+	append?: ReactNode;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type InputBaseProps = InputProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: React.ForwardRefExoticComponent<InputProperties & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>> & InputComponents;
+export type InputProps = ComponentPropsWithRef<typeof Input>;
+
+export {};

package/dist/Label/index.d.ts

@@ -0,0 +1,55 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { 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 LabelSkeletonProperties = 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 LabelSkeletonProps = LabelSkeletonProperties;
+export declare const LabelSkeleton: React.FC<LabelSkeletonProps>;
+export interface LabelComponents {
+	Skeleton: typeof LabelSkeleton;
+}
+export interface LabelProperties {
+	/**
+	 * The content of the label.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The for attribute specifies which form element a label is bound to.
+	 */
+	htmlFor?: string;
+	/**
+	 * If true the label will be visually hidden but maintain accessibility purpose
+	 * @default false
+	 */
+	hidden?: boolean;
+}
+export type LabelProps = LabelProperties & HTMLAttributes<HTMLElement>;
+export declare const Label: React.FC<LabelProps> & LabelComponents;
+
+export {};

package/dist/Link/index.d.ts

@@ -0,0 +1,115 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { 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 type TextDecoration = "none" | "underline" | "line-through";
+declare const link: {
+	sprinkle: ((props: {
+		textDecoration?: TextDecoration | undefined;
+		fontSize?: "base" | "caption" | "highlight" | undefined;
+		lineHeight?: "base" | "caption" | "highlight" | undefined;
+	}) => string) & {
+		properties: Set<"fontSize" | "textDecoration" | "lineHeight">;
+	};
+	properties: {
+		textDecoration: TextDecoration[];
+		fontSize: {
+			caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		lineHeight: {
+			readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+	};
+	classnames: {
+		base: string;
+		appearance: Record<"primary" | "danger" | "neutral" | "neutral-background", 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 LinkSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
+export type LinkSkeletonProps = LinkSkeletonProperties;
+export declare const LinkSkeleton: React.FC<LinkSkeletonProps>;
+export interface LinkComponents {
+	Skeleton: typeof LinkSkeleton;
+}
+export interface LinkProperties {
+	/**
+	 * The content of the link.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Change the visual style of the link.
+	 * @default neutral
+	 */
+	appearance?: "primary" | "danger" | "neutral" | "neutral-background";
+	/**
+	 * The textDecoration property specifies the decoration added to link.
+	 * @default neutral
+	 */
+	textDecoration?: typeof link.properties.textDecoration[number];
+	/**
+	 * The fontSize property sets the size of the link.
+	 * @default base
+	 */
+	fontSize?: keyof typeof link.properties.fontSize;
+	/**
+	 * The lineHeight property specifies the line height of the link
+	 * @default base
+	 */
+	lineHeight?: keyof typeof link.properties.lineHeight;
+}
+export type LinkBaseProps = LinkProperties & HTMLAttributes<HTMLElement>;
+export declare const Link: PolymorphicForwardRefComponent<"a" | "button", LinkBaseProps> & LinkComponents;
+export type LinkProps = ComponentPropsWithRef<typeof Link>;
+
+export {};

package/dist/List/index.d.ts

@@ -0,0 +1,75 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { 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 ListSkeletonItemProperties = 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 ListSkeletonItemProps = ListSkeletonItemProperties;
+export declare const ListSkeletonItem: React.FC<ListSkeletonItemProps>;
+export interface ListSkeletonProperties {
+	/**
+	 * The content of the list skeleton.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+}
+export type ListSkeletonProps = ListSkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export declare const ListSkeleton: React.FC<ListSkeletonProps>;
+export interface ListItemProperties {
+	/**
+	 * The content of the list item.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+}
+export type ListItemProps = ListItemProperties & HTMLAttributes<HTMLLIElement>;
+export declare const ListItem: React.FC<ListItemProps>;
+export interface ListComponents {
+	Skeleton: typeof ListSkeleton;
+	SkeletonItem: typeof ListSkeletonItem;
+	Item: typeof ListItem;
+}
+export interface ListProperties {
+	/**
+	 * The content of the list.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Determines the type of html list that will be rendered
+	 * @default ul
+	 */
+	as?: "ul" | "ol";
+}
+export type ListProps = ListProperties & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
+export declare const List: React.FC<ListProps> & ListComponents;
+
+export {};