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

package/dist/Popover/index.d.ts

@@ -0,0 +1,165 @@
+// 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 Overflow = "visible" | "hidden" | "scroll" | "auto";
+declare const propertiesPopover: {
+	backgroundColor: {
+		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceHighlight": `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})`;
+	};
+	color: {
+		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"neutral-surfaceHighlight": `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})`;
+	};
+	padding: {
+		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		none: string;
+	};
+	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})`;
+	};
+	overflow: Overflow[];
+};
+export type PopoverColorProperties = keyof typeof propertiesPopover.color;
+export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
+export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
+export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
+export interface PopoverSprinkle {
+	/**
+	 * The width property specifies the width of a popover's content area.
+	 * @default fit-content
+	 */
+	width?: string | Conditions<string>;
+	/**
+	 * The maxWidth property specifies the maximum width of a popover's content area.
+	 */
+	maxWidth?: string | Conditions<string>;
+	/**
+	 * The height property specifies the height of a popover's content area.
+	 */
+	height?: string | Conditions<string>;
+	/**
+	 * The zIndex property specifies the stack order of the popover.
+	 */
+	zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
+	/**
+	 * The backgroundColor property sets the background color of the popover.
+	 * @default neutral-background
+	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
+	 */
+	backgroundColor?: PopoverBackgroundColorProperties | Conditions<PopoverBackgroundColorProperties>;
+	/**
+	 * The color property is used to set the color of the popover.
+	 * @default neutral-background
+	 */
+	color?: PopoverColorProperties | Conditions<PopoverColorProperties>;
+	/**
+	 * The padding properties are used to generate space around an popover's content area.
+	 * @default base
+	 */
+	padding?: PopoverPaddingProperties | Conditions<PopoverPaddingProperties>;
+	/**
+	 * The overflow shorthand property sets the desired behavior for an popover's content overflow.
+	 */
+	overflow?: Overflow | Conditions<Overflow>;
+}
+export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end";
+export interface PopoverProperties extends PopoverSprinkle {
+	/**
+	 * An HTML element, or a function that returns one. It's used to set the position of the popover.
+	 * @TJS-type React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode);
+	 */
+	children: ReactNode | ((data: {
+		open: boolean;
+		setVisibility: (visibility: boolean) => void;
+	}) => ReactNode);
+	/**
+	 * The content of the popover.
+	 * @TJS-type React.ReactNode
+	 */
+	content: ReactNode;
+	/**
+	 * If true, the component is shown.
+	 */
+	visible?: boolean;
+	/**
+	 * Function to control popover opening and closing.
+	 * @TJS-type (visible: boolean) => void;
+	 */
+	onVisibility?: (visible: boolean) => void;
+	/**
+	 * Conditional for displaying the popover arrow.
+	 * @default true
+	 */
+	arrow?: boolean;
+	/**
+	 * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
+	 * @default false
+	 */
+	matchReferenceWidth?: boolean;
+	/**
+	 * Position of the popover.
+	 * @default bottom
+	 */
+	position?: PopoverPlacement;
+	/**
+	 * Adds hover event listeners that change the open state, like CSS :hover.
+	 * @default false
+	 */
+	enabledHover?: boolean;
+	/**
+	 * Adds click event listeners that change the open state.
+	 * @default true
+	 */
+	enabledClick?: boolean;
+	/**
+	 * Adds listeners that dismiss (close) the floating element.
+	 * @default true
+	 */
+	enabledDismiss?: boolean;
+	/**
+	 * Offest displaces the floating element from its core placement along the specified axes.
+	 * @default 10
+	 */
+	offset?: number;
+	/**
+	 * When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover.
+	 * @default false
+	 */
+	renderOverlay?: boolean;
+}
+export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children" | "content">;
+export declare const Popover: React.FC<PopoverProps>;
+
+export {
+	Popover as default,
+};
+
+export {};

package/dist/Radio/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 RadioSkeletonProperties = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<RadioProps, "as">> & {
+	/**
+	 * This is an attribute used to identify a DOM node for testing purposes.
+	 */
+	"data-testid"?: string;
+};
+export type RadioSkeletonProps = RadioSkeletonProperties;
+export declare const RadioSkeleton: React.FC<RadioSkeletonProps>;
+export interface RadioComponents {
+	Skeleton: typeof RadioSkeleton;
+}
+export interface RadioProperties {
+	/**
+	 * Name attribute of the input element.
+	 */
+	name: string;
+	/**
+	 * Change the visual style of the radio.
+	 * @default radio
+	 */
+	as?: "radio" | "button";
+	/**
+	 * Modifies true/false value of the native radio.
+	 */
+	checked?: boolean;
+	/**
+	 * Modifies the native disabled state of the native radio.
+	 */
+	disabled?: boolean;
+	/**
+	 * Text to be rendered inside the component.
+	 */
+	label?: string;
+}
+export type RadioProps = RadioProperties & InputHTMLAttributes<HTMLInputElement>;
+export declare const Radio: React.FC<RadioProps> & RadioComponents;
+
+export {};