@nimbus-ds/styles 7.0.0 → 7.1.0

package/dist/index.d.ts

@@ -75,6 +75,10 @@ declare const propertiesBox: {
 	flexWrap: FlexWrap[];
 	justifyContent: JustifyContent[];
 	alignItems: AlignItems[];
+	/**
+	 * The boxSizing property sets how the total width and height of an box is calculated.
+	 * @default border-box
+	 */
 	alignSelf: AlignSelf[];
 	pointerEvents: PointerEvents[];
 	backgroundColor: {
@@ -89,7 +93,9 @@ declare const propertiesBox: {
 		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * The min width property specifies the width of a box's content area.
+		 */
 		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -115,7 +121,9 @@ declare const propertiesBox: {
 		"warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * The min width property specifies the width of a box's content area.
+		 */
 		"danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -199,6 +207,7 @@ declare const propertiesBox: {
 		slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	};
 	transitionTimingFunction: TransitionTiming[];
+	textDecoration: TextDecoration[];
 };
 export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
 export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
@@ -217,84 +226,332 @@ export interface BoxConditions<T> extends Conditions<T> {
 	disabled?: T;
 }
 export interface BoxSprinkle {
+	/**
+	 * The width property specifies the width of a box's content area.
+	 */
 	width?: string | BoxConditions<string>;
+	/**
+	 * The height property specifies the height of a box's content area.
+	 */
 	height?: string | BoxConditions<string>;
+	/**
+	 * The max width property specifies the width of a box's content area.
+	 */
 	maxWidth?: string | BoxConditions<string>;
+	/**
+	 * The max height property specifies the height of a box's content area.
+	 */
 	maxHeight?: string | BoxConditions<string>;
+	/**
+	 * The min width property specifies the width of a box's content area.
+	 */
 	minWidth?: string | BoxConditions<string>;
+	/**
+	 * The min height property specifies the height of a box's content area.
+	 */
 	minHeight?: string | BoxConditions<string>;
+	/**
+	 * The bottom property participates in setting the vertical position of a positioned box.
+	 */
 	bottom?: string | BoxConditions<string>;
+	/**
+	 * The left property participates in specifying the horizontal position of a positioned box.
+	 */
 	left?: string | BoxConditions<string>;
+	/**
+	 * The right property participates in specifying the horizontal position of a positioned box.
+	 */
 	right?: string | BoxConditions<string>;
+	/**
+	 * The top property participates in setting the vertical position of a positioned box.
+	 */
 	top?: string | BoxConditions<string>;
+	/**
+	 * This is the shorthand for flexGrow, flexShrink and flexBasis combined.
+	 */
 	flex?: string | BoxConditions<string>;
+	/**
+	 * This defines the ability for a flex item to shrink if necessary.
+	 */
 	flexShrink?: string | BoxConditions<string>;
+	/**
+	 * This defines the ability for a flex item to grow if necessary.
+	 */
 	flexGrow?: string | BoxConditions<string>;
+	/**
+	 * The flexWrap property sets whether flex items are forced onto one line or can wrap onto multiple lines.
+	 */
+	flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
+	/**
+	 * The order property controls the order in which they appear in a flex container.
+	 */
 	order?: string | BoxConditions<string>;
+	/**
+	 * The gridTemplateColumns property defines the line names and track sizing functions of the grid columns.
+	 */
 	gridTemplateColumns?: string | BoxConditions<string>;
+	/**
+	 * The gridTemplateAreas property specifies named grid areas, establishing the cells in the grid and assigning them names.
+	 */
 	gridTemplateAreas?: string | BoxConditions<string>;
+	/**
+	 * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
+	 */
 	gridTemplateRows?: string | BoxConditions<string>;
+	/**
+	 * The gridArea shorthand property specifies a grid item's size and location within a grid by contributing a line,
+	 * a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
+	 */
 	gridArea?: string | BoxConditions<string>;
+	/**
+	 * The display property sets whether an box is treated as a block or inline element and the layout used for its children,
+	 * such as grid or flex.
+	 */
 	display?: Display | BoxConditions<Display>;
-	flexWrap?: FlexWrap | BoxConditions<FlexWrap>;
+	/**
+	 * The justifyContent property defines how the browser distributes space between and around content items along
+	 * the main-axis of a flex container, and the inline axis of a grid container.
+	 */
 	justifyContent?: JustifyContent | BoxConditions<JustifyContent>;
+	/**
+	 * The flexDirection property sets how flex items are placed in the flex container defining the main axis and the direction.
+	 */
 	flexDirection?: FlexDirection | BoxConditions<FlexDirection>;
+	/**
+	 * The alignItems property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
+	 * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
+	 */
 	alignItems?: AlignItems | BoxConditions<AlignItems>;
+	/**
+	 * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
+	 * In Flexbox, it aligns the item on the cross axis.
+	 */
 	alignSelf?: AlignSelf | BoxConditions<AlignSelf>;
+	/**
+	 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
+	 */
 	gap?: BoxGapProperties | BoxConditions<BoxGapProperties>;
+	/**
+	 * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
+	 */
 	gridGap?: BoxGridGapProperties | BoxConditions<BoxGridGapProperties>;
+	/**
+	 * The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
+	 */
 	pointerEvents?: PointerEvents | BoxConditions<PointerEvents>;
+	/**
+	 * The position property sets how an box is positioned in a document.
+	 */
 	position?: Position | BoxConditions<Position>;
+	/**
+	 * The overflow shorthand property sets the desired behavior for an box's overflow.
+	 */
 	overflow?: Overflow | BoxConditions<Overflow>;
+	/**
+	 * The overflow-x property sets what shows when content overflows a block-level box's left and right edges.
+	 */
 	overflowX?: Overflow | BoxConditions<Overflow>;
+	/**
+	 * The overflow-y property sets what shows when content overflows a block-level box's top and bottom edges.
+	 */
 	overflowY?: Overflow | BoxConditions<Overflow>;
+	/**
+	 * The cursor property sets the mouse cursor, if any, to show when the mouse pointer is over an box.
+	 */
 	cursor?: Cursor | BoxConditions<Cursor>;
+	/**
+	 * The backgroundColor property sets the background color of the box.
+	 * @default neutral-background
+	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
+	 */
 	backgroundColor?: BoxBackgroundColorProperties | BoxConditions<BoxBackgroundColorProperties>;
+	/**
+	 * The color property is used to set the color of the box.
+	 */
 	color?: BoxColorProperties | BoxConditions<BoxColorProperties>;
+	/**
+	 * The borderRadius property rounds the corners of an box's outer border edge.
+	 */
 	borderRadius?: string | BoxConditions<string>;
+	/**
+	 * The borderWidth property sets the width of an box's border.
+	 */
 	borderWidth?: string | BoxConditions<string>;
+	/**
+	 * The borderColor property sets the color of the box's four borders.
+	 */
 	borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
+	/**
+	 * borderStyle property sets the line style for all four sides of an box's border.
+	 */
 	borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
+	/**
+	 * The boxSizing property sets how the total width and height of an box is calculated.
+	 * @default border-box
+	 */
 	boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
+	/**
+	 * The boxShadow property adds shadow effects around an box's frame.
+	 */
 	boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
+	/**
+	 * The padding properties are used to generate space around an box's content area.
+	 */
 	padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The paddingTop property sets the height of the padding area on the top of an box.
+	 */
 	paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The paddingBottom property sets the height of the padding area on the bottom of an box.
+	 */
 	paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The paddingLeft property sets the width of the padding area to the left of an box.
+	 */
 	paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The paddingLeft property sets the width of the padding area to the right of an box.
+	 */
 	paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The margin shorthand property sets the margin area on all four sides of an box.
+	 */
 	margin?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginTop property sets the margin area on the top of an box.
+	 */
 	marginTop?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginBottom property sets the margin area on the bottom of an box.
+	 */
 	marginBottom?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginLeft property sets the margin area on the left side of an box.
+	 */
 	marginLeft?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginRight property sets the margin area on the right side of an box.
+	 */
 	marginRight?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
-	paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The transitionTimingFunction property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
+	 */
+	transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
+	/**
+	 * The transitionProperty property sets the CSS properties to which a transition effect should be applied.
+	 */
+	transitionProperty?: string | BoxConditions<string>;
+	/**
+	 * The transitionDelay property specifies the duration to wait before starting a property's transition effect when its value changes.
+	 */
+	transitionDelay?: string | BoxConditions<string>;
+	/**
+	 * The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
+	 */
+	transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
+	/**
+	 * The zIndex property specifies the stack order of the box.
+	 */
+	zIndex?: number | BoxConditions<number>;
+	/**
+	 * The backgroundImage property sets one or more background images on an element.
+	 */
+	backgroundImage?: string | BoxConditions<string>;
+	/**
+	 * The backgroundPosition property sets the initial position for each background image.
+	 * The position is relative to the position layer set by background-origin.
+	 */
+	backgroundPosition?: string | BoxConditions<string>;
+	/**
+	 * The backgroundBlendMode property sets how an element's background images should blend with each
+	 * other and with the element's background color.
+	 */
+	backgroundBlendMode?: string | BoxConditions<string>;
+	/**
+	 * The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
+	 */
+	backgroundRepeat?: string | BoxConditions<string>;
+	/**
+	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
+	 */
+	textDecoration?: TextDecoration | BoxConditions<TextDecoration>;
+	/**
+	 * The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
+	 */
+	backgroundSize?: string | BoxConditions<string>;
+	/**
+	 * The p shorthand property sets the margin area on all four sides of an box.
+	 */
 	p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The pl shorthand property sets the width of the padding area to the left of an box.
+	 */
 	pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The pl shorthand property sets the width of the padding area to the right of an box.
+	 */
 	pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The pt shorthand property sets the height of the padding area on the top of an box.
+	 */
 	pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The pb shorthand property sets the height of the padding area on the botton of an box.
+	 */
 	pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The px shorthand property defines the width of the left and right padding area of a box.
+	 */
 	px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
+	 */
 	py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
-	marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The paddingX shorthand property defines the width of the left and right padding area of a box.
+	 */
+	paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
+	 */
+	paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
+	/**
+	 * The m shorthand property sets the margin area on all four sides of an box.
+	 */
 	m?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The mr property sets the margin area on the right side of an box.
+	 */
 	mr?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The ml property sets the margin area on the left side of an box.
+	 */
 	ml?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The mt property sets the margin area on the top of an box.
+	 */
 	mt?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginBottom property sets the margin area on the bottom of an box.
+	 */
 	mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The mx property defines the margin area on the left and right side of a box.
+	 */
 	mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The my property defines the margin area on the top and bottom of a box
+	 */
 	my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
-	transitionTimingFunction?: TransitionTiming | BoxConditions<TransitionTiming>;
-	transitionProperty?: string | BoxConditions<string>;
-	transitionDelay?: string | BoxConditions<string>;
-	transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
-	zIndex?: number | BoxConditions<number>;
-	backgroundImage?: string | BoxConditions<string>;
-	backgroundPosition?: string | BoxConditions<string>;
-	backgroundBlendMode?: string | BoxConditions<string>;
-	backgroundRepeat?: string | BoxConditions<string>;
-	backgroundSize?: string | BoxConditions<string>;
+	/**
+	 * The marginX property defines the margin area on the left and right side of a box.
+	 */
+	marginX?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
+	/**
+	 * The marginY property defines the margin area on the top and bottom of a box
+	 */
+	marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
 }
 export declare const box: {
 	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
@@ -698,6 +955,20 @@ export declare const box: {
 					staticScale: TransitionTiming[];
 					name: "transitionTimingFunction";
 				};
+				textDecoration: {
+					values: {
+						none: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover" | "focusWithin", string>;
+						};
+						underline: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl" | "focus" | "active" | "disabled" | "hover" | "focusWithin", string>;
+						};
+					};
+					staticScale: TextDecoration[];
+					name: "textDecoration";
+				};
 			};
 		} & {
 			config: {
@@ -1734,6 +2005,7 @@ export declare const box: {
 			slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		};
 		transitionTimingFunction: TransitionTiming[];
+		textDecoration: TextDecoration[];
 	};
 };
 export declare const button: {
@@ -1859,8 +2131,20 @@ export interface IconButtonConditions<T> extends Conditions<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 declare const iconButton: {
@@ -2172,11 +2456,34 @@ export type PopoverColorProperties = keyof typeof propertiesPopover.color;
 export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
 export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
 export interface PopoverSprinkle {
+	/**
+	 * The width property specifies the width of a popover's content area.
+	 * @default 17.5rem
+	 */
 	width?: 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?: number | Conditions<number>;
+	/**
+	 * 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>;
 }
 export declare const popover: {
@@ -2517,6 +2824,7 @@ export declare const accordion: {
 export declare const alert: {
 	classnames: {
 		appearance: Record<"primary" | "success" | "warning" | "danger" | "neutral", string>;
+		container: string;
 		container__body: string;
 		container__content: string;
 		container__close_appearance: Record<"primary" | "success" | "warning" | "danger" | "neutral", string>;
@@ -2565,7 +2873,15 @@ declare const propertiesModal: {
 };
 export type PaddingProperties = keyof typeof propertiesModal.padding;
 export interface ModalSprinkle {
+	/**
+	 * The maxWidth property specifies the maxWidth of a modal's content area.
+	 * @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>;
 }
 export declare const modal: {
@@ -2702,8 +3018,19 @@ declare const sidebarSprinkle: {
 };
 export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
 export interface SidebarSprinkle {
+	/**
+	 * The maxWidth property specifies the maxWidth of a sidebar's content area.
+	 * @default 375px
+	 */
 	maxWidth?: string | Conditions<string>;
+	/**
+	 * The zIndex property specifies the stack order of the sidebar.
+	 */
 	zIndex?: number | Conditions<number>;
+	/**
+	 * The padding properties are used to generate space around an sidebar's content area.
+	 * @default base
+	 */
 	padding?: SidebarPaddingProperties | Conditions<SidebarPaddingProperties>;
 }
 export declare const sidebar: {
@@ -2817,11 +3144,26 @@ export interface TableConditions<T> extends Conditions<T> {
 	hover?: T;
 }
 export interface TableSprinkle {
-	padding?: TablePaddingProperties | TableConditions<TablePaddingProperties>;
+	/**
+	 * The width property specifies the width of a table's content area.
+	 */
 	width?: string | TableConditions<string>;
+	/**
+	 * The maxWidth property specifies the maxWidth of a table's content area.
+	 */
 	maxWidth?: string | TableConditions<string>;
+	/**
+	 * The minWidth property specifies the minWidth of a table's content area.
+	 */
 	minWidth?: string | TableConditions<string>;
+	/**
+	 * The backgroundColor property sets the background color of the table.
+	 */
 	backgroundColor?: TableRowBackgroundColorProperties | TableConditions<TableRowBackgroundColorProperties>;
+	/**
+	 * The padding properties are used to generate space around an table's content area.
+	 */
+	padding?: TablePaddingProperties | TableConditions<TablePaddingProperties>;
 }
 export declare const table: {
 	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[