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

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/Modal/index.d.ts

@@ -0,0 +1,232 @@
+// 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;
+}
+declare const propertiesModal: {
+	padding: {
+		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		none: string;
+	};
+};
+export type PaddingProperties = keyof typeof propertiesModal.padding;
+export interface ModalSprinkle {
+	/**
+	 * The maxWidth property specifies the maxWidth of a modal's content area. The width of the modal will be defined by the width of the content in this prop.
+	 * @default { xs: "100%", md: "500px" }
+	 */
+	maxWidth?: string | Conditions<string>;
+	/**
+	 * The padding properties are used to generate space around an modal's content area.
+	 * @default base
+	 */
+	padding?: PaddingProperties | Conditions<PaddingProperties>;
+}
+declare const modal: {
+	classnames: {
+		overlay: string;
+		overlayScoped: string;
+		container: string;
+		container__close: string;
+		container__footer: string;
+	};
+	subComponents: {
+		header: {
+			sprinkle: ((props: {
+				padding?: "small" | "none" | "base" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		body: {
+			sprinkle: ((props: {
+				padding?: "small" | "none" | "base" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+		footer: {
+			sprinkle: ((props: {
+				padding?: "small" | "none" | "base" | undefined;
+			}) => string) & {
+				properties: Set<"padding">;
+			};
+			properties: {
+				padding: {
+					base: string;
+					small: string;
+					none: string;
+				};
+			};
+		};
+	};
+	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
+		{
+			config: {
+				maxWidth: {
+					dynamic: {
+						default: string;
+						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+					};
+					dynamicScale: true;
+					name: "maxWidth";
+					vars: {
+						default: string;
+						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+					};
+				};
+				padding: {
+					dynamic: {
+						default: string;
+						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+					};
+					dynamicScale: {
+						base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						none: string;
+					};
+					name: "padding";
+					vars: {
+						default: string;
+						conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+					};
+				};
+			};
+		} & {
+			config: {
+				[x: string]: {
+					mappings: ("maxWidth" | "padding")[];
+				};
+			};
+		}
+	]>;
+	properties: {
+		padding: {
+			base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			none: string;
+		};
+	};
+};
+export type CloseOnOutsidePress = (event: PointerEvent | MouseEvent) => boolean;
+export interface ModalBodyProperties {
+	/**
+	 * The content of the modal body.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an modal's body content area.
+	 * @default none
+	 */
+	padding?: keyof typeof modal.subComponents.body.properties.padding;
+}
+export type ModalBodyProps = ModalBodyProperties & HTMLAttributes<HTMLElement>;
+export declare const ModalBody: React.FC<ModalBodyProps>;
+export interface ModalFooterProperties {
+	/**
+	 * The content of the modal footer.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * The padding properties are used to generate space around an modal's footer content area.
+	 * @default none
+	 */
+	padding?: keyof typeof modal.subComponents.footer.properties.padding;
+}
+export type ModalFooterProps = ModalFooterProperties & HTMLAttributes<HTMLElement>;
+export declare const ModalFooter: React.FC<ModalFooterProps>;
+export interface ModalHeaderProperties {
+	/**
+	 * The content of the modal header.
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+	/**
+	 * The title to display in the modal header.
+	 */
+	title?: string;
+	/**
+	 * The padding properties are used to generate space around an modal's header content area.
+	 * @default none
+	 */
+	padding?: keyof typeof modal.subComponents.header.properties.padding;
+}
+export type ModalHeaderProps = ModalHeaderProperties & HTMLAttributes<HTMLElement>;
+export declare const ModalHeader: React.FC<ModalHeaderProps>;
+export interface ModalComponents {
+	Body: typeof ModalBody;
+	Footer: typeof ModalFooter;
+	Header: typeof ModalHeader;
+}
+export interface ModalProperties extends ModalSprinkle {
+	/**
+	 * The content of the modal.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Whether the modal is open or not.
+	 */
+	open: boolean;
+	/**
+	 * Callback fired when the component requests to be closed.
+	 * @TJS-type (open: boolean) => void;
+	 */
+	onDismiss?: (open: boolean) => void;
+	/**
+	 * Id to be embedded in the portal element
+	 */
+	portalId?: string;
+	/**
+	 * Controls whether clicking/pressing outside should close the modal.
+	 * - boolean: enable/disable dismissal on outside press
+	 * - function: receive the DOM event and return true to allow closing, false to ignore
+	 *
+	 * Defaults to true.
+	 */
+	closeOnOutsidePress?: boolean | CloseOnOutsidePress;
+	/**
+	 * The attribute name to ignore when checking for outside clicks. Useful to
+	 * mark regions (e.g., a chat) that should not close the modal when clicked.
+	 * @default "data-nimbus-outside-press-ignore"
+	 */
+	ignoreAttributeName?: string;
+	/**
+	 * The padding properties are used to generate space around an modal's content area.
+	 * @default base
+	 */
+	padding?: keyof typeof modal.properties.padding;
+}
+export type ModalProps = ModalProperties & {
+	/**
+	 * Root element where the portal should be mounted. When provided and not null,
+	 * the portal renders inside this element; when null/undefined, the default root is used.
+	 */
+	root?: HTMLElement | null;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Modal: React.FC<ModalProps> & ModalComponents;
+
+export {};