@rarui/styles 1.15.0 → 1.17.0-rc.1

package/dist/index.d.ts

@@ -3590,7 +3590,7 @@ declare namespace Property {
 	type ObjectFit = "contain" | "cover" | "fill" | "none" | "scale-down";
 	type ObjectPosition = DataType.Position;
 	type OffsetAnchor = DataType.Position | "auto";
-	type Opacity = OnlyStringNumeric;
+	type Opacity = string;
 	type Order = number;
 	type Orphans = OnlyNumber;
 	type Outline = DataType.Color | DataType.LineStyle | DataType.LineWidth | "auto" | "invert" | OnlyString;
@@ -4136,7 +4136,7 @@ export interface BoxConditions<T> extends Conditions<T> {
 	hover?: T;
 	disabled?: T;
 }
-export type BoxDynamicProperties = Pick<StandardLonghandProperties, "display" | "width" | "height" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "bottom" | "left" | "right" | "top" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "flexShrink" | "flexGrow" | "order" | "transitionDelay" | "transitionProperty" | "backgroundImage" | "backgroundBlendMode" | "backgroundRepeat" | "backgroundSize" | "flexDirection" | "flexWrap" | "flexBasis" | "justifyContent" | "justifyItems" | "alignContent" | "alignItems" | "alignSelf" | "pointerEvents" | "position" | "boxSizing" | "cursor" | "overflowX" | "overflowY" | "transitionTimingFunction" | "textAlign"> & Pick<StandardShorthandProperties, "flex" | "gridArea" | "backgroundPosition" | "flexFlow" | "borderStyle" | "overflow" | "textDecoration">;
+export type BoxDynamicProperties = Pick<StandardLonghandProperties, "display" | "width" | "height" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "bottom" | "left" | "right" | "top" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "flexShrink" | "flexGrow" | "order" | "transitionDelay" | "transitionProperty" | "backgroundImage" | "backgroundBlendMode" | "backgroundRepeat" | "backgroundSize" | "flexDirection" | "flexWrap" | "flexBasis" | "justifyContent" | "justifyItems" | "alignContent" | "alignItems" | "alignSelf" | "pointerEvents" | "position" | "boxSizing" | "cursor" | "overflowX" | "overflowY" | "transitionTimingFunction" | "textAlign" | "opacity"> & Pick<StandardShorthandProperties, "flex" | "gridArea" | "backgroundPosition" | "flexFlow" | "borderStyle" | "overflow" | "textDecoration">;
 export interface BoxSprinkle extends BoxDynamicProperties {
 	/**
 	 * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
@@ -6936,6 +6936,18 @@ export declare const box: {
 						conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
 					};
 				};
+				opacity: {
+					dynamic: {
+						default: string;
+						conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
+					};
+					dynamicScale: true;
+					name: "opacity";
+					vars: {
+						default: string;
+						conditions: Record<"disabled" | "hover" | "xs" | "xl" | "md" | "lg" | "active" | "focus" | "focusWithin", string>;
+					};
+				};
 			};
 		} & {
 			config: {
@@ -7352,6 +7364,193 @@ export declare const chip: {
 		overlay: string;
 	};
 };
+declare const dividerBorderWidthProperties: {
+	"1": string;
+	"2": string;
+};
+export type DividerBorderStyle = "solid" | "dashed";
+export interface DividerSprinkle {
+	/**
+	 * The **`size`** CSS property sets an element's area.
+	 * @default 100%
+	 */
+	size?: string | Conditions<string>;
+	/**
+	 * The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
+	 */
+	type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
+	/**
+	 * The **`thickness`** shorthand CSS property sets the width of an element's.
+	 */
+	thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
+	/**
+	 * The **`color`** CSS property sets an element's color.
+	 */
+	color?: AddDollar<keyof typeof borderColorProperties> | Conditions<AddDollar<keyof typeof borderColorProperties>>;
+}
+export declare const divider: {
+	classnames: {
+		divider: import("@vanilla-extract/recipes").RuntimeFn<{
+			[x: string]: {
+				[x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+			};
+		}>;
+	};
+	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
+		{
+			config: {
+				borderColor: {
+					values: {
+						brand: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						disabled: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						error: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						info: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						invert: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						"invert-disabled": {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						primary: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						secondary: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						success: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						warning: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						"brand-alt": {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						divider: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						subdued: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						transparent: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+					};
+					staticScale: {
+						transparent: string;
+						brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"brand-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						divider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						"invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						subdued: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					name: "borderColor";
+				};
+				borderStyle: {
+					values: {
+						[x: string]: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+					};
+					staticScale: string[];
+					name: "borderStyle";
+				};
+				borderTopWidth: {
+					values: {
+						1: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						2: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+					};
+					staticScale: {
+						"1": string;
+						"2": string;
+					};
+					name: "borderTopWidth";
+				};
+				borderLeftWidth: {
+					values: {
+						1: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+						2: {
+							default: string;
+							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+						};
+					};
+					staticScale: {
+						"1": string;
+						"2": string;
+					};
+					name: "borderLeftWidth";
+				};
+			};
+		} & {
+			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>;
+					};
+				};
+				height: {
+					dynamic: {
+						default: string;
+						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+					};
+					dynamicScale: true;
+					name: "height";
+					vars: {
+						default: string;
+						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+					};
+				};
+			};
+		}
+	]>;
+};
 export type IconDynamicProperties = Pick<StandardLonghandProperties, "cursor">;
 export interface IconSprinkle extends IconDynamicProperties {
 	/**
@@ -7917,6 +8116,125 @@ export declare const link: {
 		}>;
 	};
 };
+declare const styles$8: {
+	radioButton: import("@vanilla-extract/recipes").RuntimeFn<{
+		size: {
+			small: {
+				width: "1.25rem";
+				height: "1.25rem";
+				":before": {
+					width: "2rem";
+					height: "2rem";
+				};
+				":after": {
+					width: ".5rem";
+					height: ".5rem";
+				};
+			};
+			large: {
+				width: "1.5rem";
+				height: "1.5rem";
+				":before": {
+					width: "2.75rem";
+					height: "2.75rem";
+				};
+				":after": {
+					width: ".75rem";
+					height: ".75rem";
+				};
+			};
+		};
+		error: {
+			true: {
+				borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				selectors: {
+					"&:has(input:disabled)": {
+						opacity: "50%";
+						backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					"&:has(input:checked)": {
+						backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					"&:has(input:checked):after": {
+						backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					"&:hover:before": {
+						opacity: number;
+						backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					"&:active:before": {
+						backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+				};
+			};
+		};
+	}>;
+	input: string;
+	container: string;
+};
+export type RadioButtonVariants = RecipeVariants<typeof styles$8.radioButton>;
+export declare const radioButton: {
+	classnames: {
+		radioButton: import("@vanilla-extract/recipes").RuntimeFn<{
+			size: {
+				small: {
+					width: "1.25rem";
+					height: "1.25rem";
+					":before": {
+						width: "2rem";
+						height: "2rem";
+					};
+					":after": {
+						width: ".5rem";
+						height: ".5rem";
+					};
+				};
+				large: {
+					width: "1.5rem";
+					height: "1.5rem";
+					":before": {
+						width: "2.75rem";
+						height: "2.75rem";
+					};
+					":after": {
+						width: ".75rem";
+						height: ".75rem";
+					};
+				};
+			};
+			error: {
+				true: {
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					selectors: {
+						"&:has(input:disabled)": {
+							opacity: "50%";
+							backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						};
+						"&:has(input:checked)": {
+							backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+							borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						};
+						"&:has(input:checked):after": {
+							backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						};
+						"&:hover:before": {
+							opacity: number;
+							backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						};
+						"&:active:before": {
+							backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+						};
+					};
+				};
+			};
+		}>;
+		input: string;
+		container: string;
+	};
+};
 export type SkeletonDynamicProperties = Pick<StandardLonghandProperties, "width" | "height" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight">;
 export interface SkeletonSprinkle extends SkeletonDynamicProperties {
 	/**
@@ -8035,7 +8353,7 @@ export declare const skeleton: {
 		}
 	]>;
 };
-declare const styles$8: {
+declare const styles$9: {
 	status: import("@vanilla-extract/recipes").RuntimeFn<{
 		appearance: {
 			success: {
@@ -8088,7 +8406,7 @@ declare const styles$8: {
 		};
 	}>;
 };
-export type StatusVariants = RecipeVariants<typeof styles$8.status>;
+export type StatusVariants = RecipeVariants<typeof styles$9.status>;
 declare const status$1: {
 	classnames: {
 		status: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8728,7 +9046,7 @@ export declare const title: {
 		}
 	]>;
 };
-declare const styles$9: {
+declare const styles$10: {
 	banner: import("@vanilla-extract/recipes").RuntimeFn<{
 		appearance: {
 			brand: {
@@ -8763,7 +9081,7 @@ declare const styles$9: {
 		};
 	}>;
 };
-export type BannerVariants = RecipeVariants<typeof styles$9.banner>;
+export type BannerVariants = RecipeVariants<typeof styles$10.banner>;
 export declare const banner: {
 	classnames: {
 		banner: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -8801,7 +9119,7 @@ export declare const banner: {
 		}>;
 	};
 };
-declare const styles$10: {
+declare const styles$11: {
 	toast: import("@vanilla-extract/recipes").RuntimeFn<{
 		placement: {
 			topRight: {};
@@ -8930,7 +9248,7 @@ declare const styles$10: {
 		};
 	}>;
 };
-export type ToastVariants = RecipeVariants<typeof styles$10.toast>;
+export type ToastVariants = RecipeVariants<typeof styles$11.toast>;
 export declare const toast: {
 	classnames: {
 		toast: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9062,7 +9380,7 @@ export declare const toast: {
 		}>;
 	};
 };
-declare const styles$11: {
+declare const styles$12: {
 	toggle: import("@vanilla-extract/recipes").RuntimeFn<{
 		size: {
 			large: {
@@ -9131,7 +9449,7 @@ declare const styles$11: {
 		};
 	}>;
 };
-export type ToggleVariants = RecipeVariants<typeof styles$11.toggle>;
+export type ToggleVariants = RecipeVariants<typeof styles$12.toggle>;
 export declare const toggle: {
 	classnames: {
 		toggle: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -9203,111 +9521,74 @@ export declare const toggle: {
 		}>;
 	};
 };
-declare const dividerBorderWidthProperties: {
-	"1": string;
-	"2": string;
+declare const styles$13: {
+	tooltip: import("@vanilla-extract/recipes").RuntimeFn<{
+		inverted: {
+			true: {
+				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+			false: {
+				backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+		};
+		padding: {
+			base: {
+				padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+			none: {
+				padding: number;
+			};
+		};
+	}>;
+	header: import("@vanilla-extract/recipes").RuntimeFn<{
+		padding: {
+			base: {
+				padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+			none: {
+				padding: number;
+			};
+		};
+	}>;
+	container: string;
 };
-export type DividerBorderStyle = "solid" | "dashed";
-export interface DividerSprinkle {
-	/**
-	 * The **`size`** CSS property sets an element's area.
-	 * @default 100%
-	 */
-	size?: string | Conditions<string>;
-	/**
-	 * The **`type`** shorthand CSS property sets the line style for all four sides of an element's.
-	 */
-	type?: AddDollar<DividerBorderStyle> | Conditions<AddDollar<DividerBorderStyle>>;
-	/**
-	 * The **`thickness`** shorthand CSS property sets the width of an element's.
-	 */
-	thickness?: AddDollar<keyof typeof dividerBorderWidthProperties> | Conditions<AddDollar<keyof typeof dividerBorderWidthProperties>>;
-}
-export declare const divider: {
+export type TooltipVariants = RecipeVariants<typeof styles$13.tooltip>;
+export declare const tooltip: {
 	classnames: {
-		divider: import("@vanilla-extract/recipes").RuntimeFn<{
-			[x: string]: {
-				[x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
-			};
-		}>;
-	};
-	sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
-		{
-			config: {
-				borderStyle: {
-					values: {
-						[x: string]: {
-							default: string;
-							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-						};
-					};
-					staticScale: string[];
-					name: "borderStyle";
+		tooltip: import("@vanilla-extract/recipes").RuntimeFn<{
+			inverted: {
+				true: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				};
-				borderTopWidth: {
-					values: {
-						1: {
-							default: string;
-							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-						};
-						2: {
-							default: string;
-							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-						};
-					};
-					staticScale: {
-						"1": string;
-						"2": string;
-					};
-					name: "borderTopWidth";
+				false: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				};
-				borderLeftWidth: {
-					values: {
-						1: {
-							default: string;
-							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-						};
-						2: {
-							default: string;
-							conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-						};
-					};
-					staticScale: {
-						"1": string;
-						"2": string;
-					};
-					name: "borderLeftWidth";
+			};
+			padding: {
+				base: {
+					padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				none: {
+					padding: number;
 				};
 			};
-		} & {
-			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>;
-					};
+		}>;
+		header: import("@vanilla-extract/recipes").RuntimeFn<{
+			padding: {
+				base: {
+					padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 				};
-				height: {
-					dynamic: {
-						default: string;
-						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-					};
-					dynamicScale: true;
-					name: "height";
-					vars: {
-						default: string;
-						conditions: Record<"xs" | "xl" | "md" | "lg", string>;
-					};
+				none: {
+					padding: number;
 				};
 			};
-		}
-	]>;
+		}>;
+		container: string;
+	};
 };
 
 export {