@rarui/styles 1.23.0 → 1.24.0

package/dist/index.d.ts

@@ -7066,11 +7066,20 @@ export declare const box: {
 };
 declare const styles: {
 	button: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies whether the button should take up the full width of its container.
+		 * This variant is useful when you want to make a button span the entire width of its parent container.
+		 *
+		 */
 		full: {
 			true: {
 				width: "100%";
 			};
 		};
+		/**
+		 * Defines the appearance variants for the button component.
+		 * Each appearance variant corresponds to a specific background color, border color, and text color.
+		 */
 		appearance: {
 			brand: {
 				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7103,6 +7112,9 @@ declare const styles: {
 				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Defines the size of the button component.
+		 */
 		size: {
 			large: {
 				padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7120,6 +7132,9 @@ declare const styles: {
 				fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Defines the visual variant of the badge, affecting its background style, border and text.
+		 */
 		variant: {
 			solid: {};
 			outlined: {
@@ -7230,6 +7245,9 @@ export declare const button: {
 	};
 };
 declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
+	/**
+	 * Specifies whether the checkbox is in error state
+	 */
 	error: {
 		true: {
 			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7238,6 +7256,9 @@ declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
 			};
 		};
 	};
+	/**
+	 * Specifies the size of the checkbox
+	 */
 	size: {
 		medium: {
 			width: "1.25rem";
@@ -7248,6 +7269,9 @@ declare const checkbox: import("@vanilla-extract/recipes").RuntimeFn<{
 			height: "1.5rem";
 		};
 	};
+	/**
+	 * Specifies whether the checkbox is indeterminate state
+	 */
 	indeterminate: {
 		true: {
 			selectors: {
@@ -7316,11 +7340,17 @@ declare const checkbox$1: {
 };
 declare const styles$1: {
 	chip: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies whether the chip will be displayed in the pill shape
+		 */
 		pill: {
 			true: {
 				borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies whether the chip is selected
+		 */
 		selected: {
 			true: {
 				borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7331,6 +7361,9 @@ declare const styles$1: {
 				};
 			};
 		};
+		/**
+		 * Specifies the size of the chip
+		 */
 		size: {
 			medium: {
 				lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7742,6 +7775,9 @@ export declare const icon: {
 };
 declare const styles$2: {
 	iconButton: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Determines the visual style of the icon button, influencing its color scheme and appearance.
+		 */
 		appearance: {
 			brand: {
 				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7775,6 +7811,9 @@ declare const styles$2: {
 			};
 		};
 		variant: {
+			/**
+			 * Defines the visual variant of the icon button, affecting its background style, border and text.
+			 */
 			solid: {};
 			outlined: {
 				backgroundColor: "transparent";
@@ -7885,6 +7924,9 @@ export declare const iconButton: {
 };
 declare const styles$3: {
 	container: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Determines the visual style of the input, affecting its border
+		 */
 		appearance: {
 			success: {
 				borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -7907,9 +7949,15 @@ declare const styles$3: {
 		};
 	}>;
 	input: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Places a divider between the input and the leading components
+		 */
 		divider: {
 			false: {};
 		};
+		/**
+		 * Specifies the size of the badge, controlling its dimensions.
+		 */
 		size: {
 			large: {
 				height: "3rem";
@@ -8064,6 +8112,9 @@ export declare const input: {
 };
 declare const styles$4: {
 	label: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies whether the label is hidden or not
+		 */
 		hidden: {
 			true: {
 				border: "0";
@@ -8099,6 +8150,9 @@ export declare const label: {
 };
 declare const styles$5: {
 	link: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Determines the visual style of the link.
+		 */
 		appearance: {
 			brand: {
 				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -8110,6 +8164,9 @@ declare const styles$5: {
 				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies the size of the link.
+		 */
 		size: {
 			large: {
 				fontSize: "1.125rem";
@@ -8258,6 +8315,9 @@ export declare const progress: {
 };
 declare const styles$6: {
 	radioButton: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies the size of the radiobutton
+		 */
 		size: {
 			small: {
 				width: "1.25rem";
@@ -8284,6 +8344,9 @@ declare const styles$6: {
 				};
 			};
 		};
+		/**
+		 * Specifies whether the radiobutton is in error state
+		 */
 		error: {
 			true: {
 				borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -8495,6 +8558,9 @@ export declare const skeleton: {
 };
 declare const styles$7: {
 	status: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Determines the visual style of the status, influencing its color scheme.
+		 */
 		appearance: {
 			success: {
 				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -8513,6 +8579,9 @@ declare const styles$7: {
 				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies the size of the badge, controlling its dimensions.
+		 */
 		size: {
 			normal: {
 				height: "1.75rem";
@@ -8523,9 +8592,15 @@ declare const styles$7: {
 				fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies whether the status is in subdued mode
+		 */
 		subdued: {
 			true: {};
 		};
+		/**
+		 * Specifies the variant of the status
+		 */
 		variant: {
 			solid: {};
 			text: {
@@ -9269,9 +9344,15 @@ export declare const banner: {
 };
 declare const styles$8: {
 	toast: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Where the toast is located
+		 */
 		placement: {
 			topRight: {};
 		};
+		/**
+		 * Determines the visual style of the toast, influencing its color scheme and appearance.
+		 */
 		appearance: {
 			info: {
 				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9298,6 +9379,9 @@ declare const styles$8: {
 				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies the size of the toast, controlling its dimensions.
+		 */
 		size: {
 			small: {
 				padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
@@ -9309,6 +9393,9 @@ declare const styles$8: {
 				padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies the variant of the toast
+		 */
 		variant: {
 			solid: {};
 			tonal: {
@@ -9530,6 +9617,9 @@ export declare const toast: {
 };
 declare const styles$9: {
 	toggle: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies the size of the toggle, controlling its dimensions.
+		 */
 		size: {
 			large: {
 				":before": {
@@ -9556,6 +9646,9 @@ declare const styles$9: {
 				};
 			};
 		};
+		/**
+		 * Specifies whether the radiobutton is in error state
+		 */
 		error: {
 			true: {
 				":before": {
@@ -9671,6 +9764,9 @@ export declare const toggle: {
 };
 declare const styles$10: {
 	tooltip: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies whether the color scheme should be inverted
+		 */
 		inverted: {
 			true: {
 				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9681,6 +9777,9 @@ declare const styles$10: {
 				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 			};
 		};
+		/**
+		 * Specifies the padding for the tooltip
+		 */
 		padding: {
 			base: {
 				padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9765,6 +9864,14 @@ export declare const breadcrumb: {
 		}>;
 	};
 };
+export declare const datepicker: {
+	classnames: {
+		datepicker: string;
+		day: string;
+		weekday: string;
+		time: string;
+	};
+};
 declare const dropdownStyles: {
 	dropdown: import("@vanilla-extract/recipes").RuntimeFn<{
 		/**
@@ -9845,6 +9952,7 @@ declare const paginationStyles: {
 		selected: {
 			true: {
 				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				":hover": {
 					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9891,6 +9999,7 @@ export declare const pagination: {
 			selected: {
 				true: {
 					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					":hover": {
 						backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -9920,6 +10029,9 @@ export declare const pagination: {
 };
 declare const sidebarStyles: {
 	sidebar: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies where the sidebar should be positioned
+		 */
 		position: {
 			left: {
 				left: number;
@@ -9930,6 +10042,10 @@ declare const sidebarStyles: {
 				transform: "translateX(100%)";
 			};
 		};
+		/**
+		 * Determines if the sidebar is shown or not.
+		 * @default true
+		 */
 		open: {
 			true: {
 				opacity: number;