@nimbus-ds/components 5.24.0-rc.3 → 5.25.0

package/dist/MultiSelect/index.d.ts

@@ -0,0 +1,107 @@
+// Generated by dts-bundle-generator v7.2.0
+
+import React from 'react';
+import { ComponentPropsWithRef, HTMLAttributes, InputHTMLAttributes } from 'react';
+
+declare const multiSelect: {
+	sprinkle: ((props: {
+		zIndex?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | {
+			xs?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+			md?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+			lg?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+			xl?: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
+		} | undefined;
+	}) => string) & {
+		properties: Set<"zIndex">;
+	};
+	properties: {
+		zIndex: {
+			"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+	};
+	classnames: {
+		appearance: Record<"success" | "warning" | "danger" | "neutral", string>;
+		container: string;
+		container__icon: string;
+		container__button: 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 MultiSelectSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
+export type MultiSelectSkeletonProps = MultiSelectSkeletonProperties & HTMLAttributes<HTMLDivElement>;
+export declare const MultiSelectSkeleton: React.FC<MultiSelectSkeletonProps>;
+export interface MultiSelectComponents {
+	Skeleton: typeof MultiSelectSkeleton;
+}
+export interface MultiSelectOption {
+	/**
+	 * Label for the option.
+	 */
+	label: string;
+	/**
+	 * Value of the option
+	 */
+	value: string;
+}
+export interface MultiSelectProperties {
+	/**
+	 * The name of the wrapper element or the select element when native.
+	 */
+	name: string;
+	/**
+	 * The id of the wrapper element or the select element when native.
+	 */
+	id: string;
+	/**
+	 * Change the visual style of the select.
+	 * @default neutral
+	 */
+	appearance?: "success" | "warning" | "danger" | "neutral";
+	/**
+	 * Options of the MultiSelect
+	 */
+	options: MultiSelectOption[];
+	/**
+	 * Options of the MultiSelect
+	 */
+	onChange?: (values: MultiSelectOption[]) => void;
+	/**
+	 * Deafult of the MultiSelect
+	 */
+	value?: MultiSelectOption[];
+	/**
+	 * ZIndex of the MultiSelect
+	 */
+	zIndex?: keyof typeof multiSelect.properties.zIndex;
+}
+export type MultiSelectBaseProps = MultiSelectProperties & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "value">;
+export declare const MultiSelect: React.FC<MultiSelectBaseProps> & MultiSelectComponents;
+export type MultiSelectProps = ComponentPropsWithRef<typeof MultiSelect>;
+
+export {};