@rarui/styles 1.19.0 → 1.20.0

package/dist/index.d.ts

@@ -8604,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})`;