@rarui/styles 1.31.0-rc.8 → 1.31.1

package/dist/index.d.ts

@@ -3974,6 +3974,11 @@ declare const fontSizeProperties: {
 	"label-m": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	"label-l": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
+declare const fontFamilyProperties: {
+	body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	heading: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
 declare const lineHeightProperties: {
 	readonly hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	readonly "body-xxs": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -4166,19 +4171,19 @@ export interface BoxSprinkle extends BoxDynamicProperties {
 	 */
 	borderRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
 	/**
-	 * The borderRadius property rounds the corners of an box's outer border edge.
+	 * The borderTopLeftRadius property rounds the corners of an box's outer border edge.
 	 */
 	borderTopLeftRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
 	/**
-	 * The borderRadius property rounds the corners of an box's outer border edge.
+	 * The borderTopRightRadius property rounds the corners of an box's outer border edge.
 	 */
 	borderTopRightRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
 	/**
-	 * The borderRadius property rounds the corners of an box's outer border edge.
+	 * The borderBottomLeftRadius property rounds the corners of an box's outer border edge.
 	 */
 	borderBottomLeftRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
 	/**
-	 * The borderRadius property rounds the corners of an box's outer border edge.
+	 * The borderBottomRightRadius property rounds the corners of an box's outer border edge.
 	 */
 	borderBottomRightRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
 	/**
@@ -4333,6 +4338,10 @@ export interface BoxSprinkle extends BoxDynamicProperties {
 	 * The marginY property defines the margin area on the top and bottom of a box
 	 */
 	marginY?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+	/**
+	 * The fontFamily property sets the font family of the box.
+	 */
+	fontFamily?: AddDollar<keyof typeof fontFamilyProperties> | BoxConditions<AddDollar<keyof typeof fontFamilyProperties>>;
 	/**
 	 * The fontSize property sets the size of the box.
 	 */
@@ -4704,15 +4713,15 @@ export declare const box: {
 				};
 				borderRadius: {
 					values: {
-						xs: {
+						button: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						xl: {
+						xs: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						button: {
+						xl: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
@@ -4766,15 +4775,15 @@ export declare const box: {
 				};
 				borderTopLeftRadius: {
 					values: {
-						xs: {
+						button: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						xl: {
+						xs: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						button: {
+						xl: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
@@ -4828,15 +4837,15 @@ export declare const box: {
 				};
 				borderTopRightRadius: {
 					values: {
-						xs: {
+						button: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						xl: {
+						xs: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						button: {
+						xl: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
@@ -4890,15 +4899,15 @@ export declare const box: {
 				};
 				borderBottomLeftRadius: {
 					values: {
-						xs: {
+						button: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						xl: {
+						xs: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						button: {
+						xl: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
@@ -4952,15 +4961,15 @@ export declare const box: {
 				};
 				borderBottomRightRadius: {
 					values: {
-						xs: {
+						button: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						xl: {
+						xs: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
-						button: {
+						xl: {
 							default: string;
 							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 						};
@@ -6601,6 +6610,28 @@ export declare const box: {
 					};
 					name: "fontSize";
 				};
+				fontFamily: {
+					values: {
+						body: {
+							default: string;
+							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
+						};
+						heading: {
+							default: string;
+							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
+						};
+						button: {
+							default: string;
+							conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
+						};
+					};
+					staticScale: {
+						body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						heading: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						button: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					name: "fontFamily";
+				};
 			};
 		} & {
 			config: {
@@ -8595,7 +8626,21 @@ declare const progressStyles: {
 	}>;
 	circleText: string;
 };
+declare const progressBackgroundColorProperties: {
+	info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
 export type ProgressVariants = RecipeVariants<typeof progressStyles.circle>;
+export interface ProgressSprinkle {
+	/**
+	 * Specifies the background color of the progress.
+	 * This prop accepts one of the following values: "$info", "$success" or "$brand"
+	 * @default $info
+	 * @examples ["$brand", { xs: "$brand", md: "$info" }]
+	 */
+	backgroundColor?: AddDollar<keyof typeof progressBackgroundColorProperties>;
+}
 export declare const progress: {
 	classnames: {
 		progress: string;
@@ -8627,6 +8672,9 @@ export declare const progress: {
 			config: {
 				backgroundColor: {
 					values: {
+						brand: {
+							default: string;
+						};
 						info: {
 							default: string;
 						};
@@ -8637,6 +8685,7 @@ export declare const progress: {
 					staticScale: {
 						info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					};
 					name: "backgroundColor";
 				};
@@ -10212,7 +10261,7 @@ declare const styles$7: {
 				};
 				":after": {
 					top: "-.3125rem";
-					left: "-.375rem";
+					left: "-.3125rem";
 					height: "2.75rem";
 					width: "2.75rem";
 				};
@@ -10247,7 +10296,6 @@ declare const styles$7: {
 		};
 	}>;
 	input: string;
-	icon: string;
 	slider: import("@vanilla-extract/recipes").RuntimeFn<{
 		size: {
 			large: {
@@ -10273,6 +10321,38 @@ declare const styles$7: {
 			};
 		};
 	}>;
+	unchecked: import("@vanilla-extract/recipes").RuntimeFn<{
+		size: {
+			large: {
+				left: "1rem";
+				height: "1.5rem";
+				width: "1.5rem";
+				borderRadius: "0.75rem";
+			};
+			small: {
+				left: "0.75rem";
+				width: "1rem";
+				height: "1rem";
+				borderRadius: "0.5rem";
+			};
+		};
+	}>;
+	checked: import("@vanilla-extract/recipes").RuntimeFn<{
+		size: {
+			large: {
+				left: "2.25rem";
+				height: "1.5rem";
+				width: "1.5rem";
+				borderRadius: "0.75rem";
+			};
+			small: {
+				left: "2rem";
+				width: "1rem";
+				height: "1rem";
+				borderRadius: "0.5rem";
+			};
+		};
+	}>;
 };
 export type ToggleVariants = RecipeVariants<typeof styles$7.toggle>;
 export declare const toggle: {
@@ -10286,7 +10366,7 @@ export declare const toggle: {
 					};
 					":after": {
 						top: "-.3125rem";
-						left: "-.375rem";
+						left: "-.3125rem";
 						height: "2.75rem";
 						width: "2.75rem";
 					};
@@ -10318,7 +10398,6 @@ export declare const toggle: {
 			};
 		}>;
 		input: string;
-		icon: string;
 		slider: import("@vanilla-extract/recipes").RuntimeFn<{
 			size: {
 				large: {
@@ -10344,6 +10423,38 @@ export declare const toggle: {
 				};
 			};
 		}>;
+		unchecked: import("@vanilla-extract/recipes").RuntimeFn<{
+			size: {
+				large: {
+					left: "1rem";
+					height: "1.5rem";
+					width: "1.5rem";
+					borderRadius: "0.75rem";
+				};
+				small: {
+					left: "0.75rem";
+					width: "1rem";
+					height: "1rem";
+					borderRadius: "0.5rem";
+				};
+			};
+		}>;
+		checked: import("@vanilla-extract/recipes").RuntimeFn<{
+			size: {
+				large: {
+					left: "2.25rem";
+					height: "1.5rem";
+					width: "1.5rem";
+					borderRadius: "0.75rem";
+				};
+				small: {
+					left: "2rem";
+					width: "1rem";
+					height: "1rem";
+					borderRadius: "0.5rem";
+				};
+			};
+		}>;
 	};
 };
 declare const styles$8: {
@@ -11305,7 +11416,7 @@ declare const sideNavigationStyles: {
 		open: {
 			true: {
 				overflow: "visible";
-				maxHeight: "100vh";
+				maxHeight: "unset";
 				marginTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
@@ -11376,7 +11487,7 @@ export declare const sideNavigation: {
 			open: {
 				true: {
 					overflow: "visible";
-					maxHeight: "100vh";
+					maxHeight: "unset";
 					marginTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				};
 			};