@nimbus-ds/components 5.33.0-rc.2 → 5.34.0

package/dist/index.d.ts

@@ -101,6 +101,8 @@ export type Overflow = "visible" | "hidden" | "scroll" | "auto";
 export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
 export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
 export type WordBreak = "normal" | "break-all" | "keep-all" | "break-word";
+export type TextOverflow = "clip" | "ellipsis";
+export type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces";
 declare const propertiesBox: {
 	gap: {
 		none: string;
@@ -243,7 +245,10 @@ declare const propertiesBox: {
 		transparent: string;
 	};
 	borderRadius: {
-		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
+		 * 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.
+		 */
 		"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -251,6 +256,10 @@ declare const propertiesBox: {
 		"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		/**
+		 * 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.
+		 */
 		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		none: string;
@@ -377,9 +386,7 @@ declare const propertiesBox: {
 		"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
-		 * This defines the ability for a flex item to shrink if necessary.
-		 */
+		h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 		h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -929,7 +936,9 @@ export interface IconButtonSprinkle {
 declare const propertiesText: {
 	color: {
 		"ai-generative": "transparent";
-		currentColor: string;
+		currentColor: string; /**
+		 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
+		 */
 		"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})`;
@@ -971,6 +980,9 @@ declare const propertiesText: {
 	};
 	wordBreak: WordBreak[];
 	textDecoration: TextDecoration[];
+	textOverflow: TextOverflow[];
+	whiteSpace: WhiteSpace[];
+	overflow: Overflow[];
 };
 export type TextColorProperties = keyof typeof propertiesText.color;
 export type TextFontSizeProperties = keyof typeof propertiesText.fontSize;
@@ -1013,13 +1025,26 @@ export interface TextSprinkle {
 	 */
 	WebkitLineClamp?: number | TextConditions<number>;
 	/**
-	 * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
+	 * The wordBreak property sets whether line breaks appear wherever the text would otherwise overflow its content box.
 	 */
 	wordBreak?: WordBreak | TextConditions<WordBreak>;
 	/**
 	 * The textDecoration shorthand property sets the appearance of decorative lines on text.
 	 */
 	textDecoration?: TextDecoration | TextConditions<TextDecoration>;
+	/**
+	 * The textOverflow property specifies how overflowed content that is not displayed should be signaled to the user (e.g., 'ellipsis' for '...', 'clip' for hard cutoff).
+	 * Note: This property only works when overflow is set to 'hidden'.
+	 */
+	textOverflow?: TextOverflow | TextConditions<TextOverflow>;
+	/**
+	 * The whiteSpace property sets how white space inside an element is handled.
+	 */
+	whiteSpace?: WhiteSpace | TextConditions<WhiteSpace>;
+	/**
+	 * The overflow property specifies what happens if content overflows an element's box.
+	 */
+	overflow?: Overflow | TextConditions<Overflow>;
 }
 declare const text: {
 	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
@@ -1280,6 +1305,72 @@ declare const text: {
 					staticScale: TextDecoration[];
 					name: "textDecoration";
 				};
+				textOverflow: {
+					values: {
+						clip: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						ellipsis: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+					};
+					staticScale: TextOverflow[];
+					name: "textOverflow";
+				};
+				whiteSpace: {
+					values: {
+						pre: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						normal: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						nowrap: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"break-spaces": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"pre-line": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						"pre-wrap": {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+					};
+					staticScale: WhiteSpace[];
+					name: "whiteSpace";
+				};
+				overflow: {
+					values: {
+						hidden: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						auto: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						visible: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+						scroll: {
+							default: string;
+							conditions: Record<"xs" | "md" | "lg" | "xl", string>;
+						};
+					};
+					staticScale: Overflow[];
+					name: "overflow";
+				};
 			};
 		} & {
 			config: {
@@ -1311,7 +1402,7 @@ declare const text: {
 		} & {
 			config: {
 				[x: string]: {
-					mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "wordBreak" | "lineClamp" | "textDecoration" | "WebkitLineClamp")[];
+					mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "textOverflow" | "whiteSpace" | "wordBreak" | "lineClamp" | "overflow" | "textDecoration" | "WebkitLineClamp")[];
 				};
 			};
 		}
@@ -1361,6 +1452,9 @@ declare const text: {
 		};
 		wordBreak: WordBreak[];
 		textDecoration: TextDecoration[];
+		textOverflow: TextOverflow[];
+		whiteSpace: WhiteSpace[];
+		overflow: Overflow[];
 	};
 	aiColors: {
 		readonly "ai-generative": "transparent";