@nimbus-ds/components 5.22.0 → 5.23.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/components",
-  "version": "5.22.0",
+  "version": "5.23.0-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [

package/dist/Alert/index.d.ts

@@ -1,60 +0,0 @@
-// 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 AlertSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "height" | "data-testid">>;
-export type AlertSkeletonProps = AlertSkeletonProperties;
-export declare const AlertSkeleton: React.FC<AlertSkeletonProps>;
-export interface AlertComponents {
-	Skeleton: typeof AlertSkeleton;
-}
-export interface AlertProperties {
-	/**
-	 * The content for the title of the alert.
-	 */
-	title?: string;
-	/**
-	 * Change the visual style of the alert.
-	 * @default neutral
-	 */
-	appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
-	/**
-	 * The content of the alert.
-	 * @TJS-type React.ReactNode
-	 */
-	children: ReactNode;
-	/**
-	 * Function to be passed on actioning the dismiss button.
-	 * @TJS-type () => void;
-	 */
-	onRemove?: () => void;
-	/**
-	 * Determines if the alert is shown or not.
-	 * @default true
-	 */
-	show?: boolean;
-}
-export type AlertProps = AlertProperties & HTMLAttributes<HTMLElement>;
-export declare const Alert: React.FC<AlertProps> & AlertComponents;
-
-export {};

package/dist/Chip/index.d.ts

@@ -1,59 +0,0 @@
-// 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/FileUploader/index.d.ts

@@ -1,98 +0,0 @@
-// 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

@@ -1,120 +0,0 @@
-// 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 {};

package/dist/Input/index.d.ts

@@ -1,76 +0,0 @@
-// 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/Link/index.d.ts

@@ -1,115 +0,0 @@
-// 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 {};