@rarui/styles 1.20.0 → 1.22.0

package/dist/index.d.ts

@@ -7782,9 +7782,10 @@ declare const styles$2: {
 			ghost: {
 				backgroundColor: "transparent";
 				textDecoration: "underline";
-				border: "none";
+				borderColor: "transparent";
 				borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				":hover": {
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				};
 				":active": {
@@ -7854,9 +7855,10 @@ export declare const iconButton: {
 				ghost: {
 					backgroundColor: "transparent";
 					textDecoration: "underline";
-					border: "none";
+					borderColor: "transparent";
 					borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					":hover": {
+						borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 						borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 					};
 					":active": {
@@ -8604,124 +8606,6 @@ 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})`;
@@ -9858,6 +9742,99 @@ export declare const tooltip: {
 		container: string;
 	};
 };
+declare const breadcrumbStyles: {
+	breadcrumb: string;
+	breadcrumbItem: import("@vanilla-extract/recipes").RuntimeFn<{
+		/**
+		 * Indicates whether the breadcrumb item is currently active.
+		 * An active item is typically styled differently to show that it represents the current page.
+		 */
+		active: {
+			true: {
+				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+		};
+	}>;
+};
+export type BreadcrumbVariants = RecipeVariants<typeof breadcrumbStyles.breadcrumbItem>;
+export declare const breadcrumb: {
+	classnames: {
+		breadcrumb: string;
+		breadcrumbItem: import("@vanilla-extract/recipes").RuntimeFn<{
+			active: {
+				true: {
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+		}>;
+	};
+};
+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: {
@@ -10132,6 +10109,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,