@rarui/styles 1.17.0 → 1.18.0-rc.1

package/dist/index.d.ts

@@ -9624,6 +9624,173 @@ export declare const tooltip: {
 		container: string;
 	};
 };
+declare const sideNavigationStyles: {
+	sideNavigation: import("@vanilla-extract/recipes").RuntimeFn<{
+		position: {
+			left: {
+				left: number;
+				transform: "translateX(-100%)";
+			};
+			right: {
+				right: number;
+				transform: "translateX(100%)";
+			};
+		};
+		open: {
+			true: {
+				opacity: number;
+				transform: "translateX(0)";
+			};
+		};
+	}>;
+	sideNavigationItem: import("@vanilla-extract/recipes").RuntimeFn<{
+		[x: string]: {
+			[x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+		};
+	}>;
+	overlay: string;
+};
+declare const sideNavigationPaddingProperties: {
+	none: string;
+	small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+	medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export type SideNavigationVariants = RecipeVariants<typeof sideNavigationStyles.sideNavigation>;
+export type SideNavigationDynamicProperties = Pick<StandardLonghandProperties, "maxWidth">;
+export interface SideNavigationSprinkle extends SideNavigationDynamicProperties {
+	/**
+	 * The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.
+	 * @default small
+	 */
+	padding?: AddDollar<keyof typeof sideNavigationPaddingProperties> | Conditions<AddDollar<keyof typeof sideNavigationPaddingProperties>>;
+	/**
+	 * The zIndex property specifies the stack order of the box.
+	 */
+	zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+export declare const sideNavigation: {
+	classnames: {
+		sideNavigation: import("@vanilla-extract/recipes").RuntimeFn<{
+			position: {
+				left: {
+					left: number;
+					transform: "translateX(-100%)";
+				};
+				right: {
+					right: number;
+					transform: "translateX(100%)";
+				};
+			};
+			open: {
+				true: {
+					opacity: number;
+					transform: "translateX(0)";
+				};
+			};
+		}>;
+		sideNavigationItem: import("@vanilla-extract/recipes").RuntimeFn<{
+			[x: string]: {
+				[x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+			};
+		}>;
+		overlay: string;
+	};
+	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
+		{
+			config: {
+				zIndex: {
+					values: {
+						100: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						200: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						300: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						400: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						500: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						600: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						700: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						800: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						900: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+					};
+					staticScale: {
+						"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					name: "zIndex";
+				};
+				padding: {
+					values: {
+						medium: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						none: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						small: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+					};
+					staticScale: {
+						none: string;
+						small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					name: "padding";
+				};
+			};
+		} & {
+			config: {
+				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>;
+					};
+				};
+			};
+		}
+	]>;
+};
 
 export {
 	checkbox$1 as checkbox,