@rarui/styles 1.19.0 → 1.21.0

package/dist/index.d.ts

@@ -9740,6 +9740,72 @@ export declare const tooltip: {
 		container: string;
 	};
 };
+declare const dropdownStyles: {
+	dropdown: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Specifies the padding inside the dropdown menu. This prop accepts one of the following values: "base" or "none".
+		 * @default base
+		 */
+		padding: {
+			base: {
+				padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+			none: {
+				padding: number;
+			};
+		};
+	}>;
+	dropdownItem: string;
+	container: string;
+};
+export type DropdownVariants = RecipeVariants<typeof dropdownStyles.dropdown>;
+export type DropdownSprinkle = Pick<StandardLonghandProperties, "width" | "maxWidth">;
+export declare const dropdown: {
+	classnames: {
+		dropdown: import("@vanilla-extract/recipes").RuntimeFn<{
+			padding: {
+				base: {
+					padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				none: {
+					padding: number;
+				};
+			};
+		}>;
+		dropdownItem: string;
+		container: string;
+	};
+	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
+		{
+			config: {
+				width: {
+					dynamic: {
+						default: string;
+						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+					};
+					dynamicScale: true;
+					name: "width";
+					vars: {
+						default: string;
+						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+					};
+				};
+				maxWidth: {
+					dynamic: {
+						default: string;
+						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+					};
+					dynamicScale: true;
+					name: "maxWidth";
+					vars: {
+						default: string;
+						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+					};
+				};
+			};
+		}
+	]>;
+};
 declare const sidebarStyles: {
 	sidebar: import("@vanilla-extract/recipes").RuntimeFn<{
 		position: {
@@ -10014,6 +10080,124 @@ export declare const sideNavigation: {
 		}>;
 	};
 };
+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})`;
+				};
+			};
+		}>;
+	};
+};
 
 export {
 	checkbox$1 as checkbox,