@rarui/styles 1.18.0 → 1.20.0

package/dist/index.d.ts

@@ -8166,6 +8166,98 @@ export declare const link: {
 		}>;
 	};
 };
+declare const progressStyles: {
+	progress: string;
+	progressBar: string;
+	circle: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies the size of the progress indicator.
+		 * This prop accepts one of the following values: "large" or "small".
+		 * @default large
+		 */
+		size: {
+			large: {
+				width: "8.75rem";
+				height: "8.75rem";
+			};
+			small: {
+				width: "5rem";
+				height: "5rem";
+			};
+		};
+	}>;
+	circleBase: string;
+	circleProgress: import("@vanilla-extract/recipes").RuntimeFn<{
+		completed: {
+			true: {
+				stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+		};
+	}>;
+	circleText: string;
+};
+export type ProgressVariants = RecipeVariants<typeof progressStyles.circle>;
+export declare const progress: {
+	classnames: {
+		progress: string;
+		progressBar: string;
+		circle: import("@vanilla-extract/recipes").RuntimeFn<{
+			size: {
+				large: {
+					width: "8.75rem";
+					height: "8.75rem";
+				};
+				small: {
+					width: "5rem";
+					height: "5rem";
+				};
+			};
+		}>;
+		circleBase: string;
+		circleProgress: import("@vanilla-extract/recipes").RuntimeFn<{
+			completed: {
+				true: {
+					stroke: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+		}>;
+		circleText: string;
+	};
+	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
+		{
+			config: {
+				backgroundColor: {
+					values: {
+						info: {
+							default: string;
+						};
+						success: {
+							default: string;
+						};
+					};
+					staticScale: {
+						info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					name: "backgroundColor";
+				};
+			};
+		} & {
+			config: {
+				width: {
+					dynamic: {
+						default: string;
+					};
+					dynamicScale: true;
+					name: "width";
+					vars: {
+						default: string;
+					};
+				};
+			};
+		}
+	]>;
+};
 declare const styles$6: {
 	radioButton: import("@vanilla-extract/recipes").RuntimeFn<{
 		size: {
@@ -8512,6 +8604,124 @@ declare const status$1: {
 		}>;
 	};
 };
+declare const stepperStyles: {
+	stepper: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
+		 * @default horizontal
+		 */
+		direction: {
+			horizontal: {
+				width: "100%";
+				flexDirection: "row";
+			};
+			vertical: {
+				flexDirection: "column";
+				height: "100%";
+				alignItems: "flex-start";
+			};
+		};
+	}>;
+	step: import("@vanilla-extract/recipes").RuntimeFn<{
+		direction: {
+			/**
+			 * Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.
+			 * @default horizontal
+			 */
+			horizontal: {
+				flexDirection: "column";
+				":after": {
+					top: "20px";
+					height: "1px";
+					width: "calc(100% - 60px)";
+					left: "calc(50% + 30px)";
+				};
+			};
+			vertical: {
+				":after": {
+					width: "1px";
+					height: "calc(100% - 60px)";
+					top: "calc(50% + 30px)";
+					left: "18px";
+				};
+			};
+		};
+	}>;
+	stepCircle: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Indicates whether the step is currently active. An active step is typically highlighted to show that it is the current step.
+		 */
+		active: {
+			true: {
+				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+		};
+		/**
+		 * Indicates whether the step has been completed. A completed step is usually marked with a checkmark or other indicator.
+		 */
+		done: {
+			true: {
+				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+		};
+	}>;
+};
+export type StepperVariants = RecipeVariants<typeof stepperStyles.stepper>;
+export type StepperStepVariants = RecipeVariants<typeof stepperStyles.stepCircle>;
+export declare const stepper: {
+	classNames: {
+		stepper: import("@vanilla-extract/recipes").RuntimeFn<{
+			direction: {
+				horizontal: {
+					width: "100%";
+					flexDirection: "row";
+				};
+				vertical: {
+					flexDirection: "column";
+					height: "100%";
+					alignItems: "flex-start";
+				};
+			};
+		}>;
+		step: import("@vanilla-extract/recipes").RuntimeFn<{
+			direction: {
+				horizontal: {
+					flexDirection: "column";
+					":after": {
+						top: "20px";
+						height: "1px";
+						width: "calc(100% - 60px)";
+						left: "calc(50% + 30px)";
+					};
+				};
+				vertical: {
+					":after": {
+						width: "1px";
+						height: "calc(100% - 60px)";
+						top: "calc(50% + 30px)";
+						left: "18px";
+					};
+				};
+			};
+		}>;
+		stepCircle: import("@vanilla-extract/recipes").RuntimeFn<{
+			active: {
+				true: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+			done: {
+				true: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+		}>;
+	};
+};
 declare const textLineHeightProperties: {
 	xxs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 	xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;