@rarui/styles 2.3.0-rc.1 → 2.3.0-rc.3

package/dist/packages/exhibition/title/index.d.ts

@@ -0,0 +1,289 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const title: {
+    classnames: {
+        title: RuntimeFn<{
+            as: {
+                h1: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                h2: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                h3: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                h4: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                h5: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                h6: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            color: {
+                values: {
+                    "invert-disabled": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "invert-secondary": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-alt": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "on-brand": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "on-error": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "on-info": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "on-success": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "on-warning": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "warning-alt": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    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>;
+                    };
+                    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>;
+                    };
+                    currentColor: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    currentColor: 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})`;
+                    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})`;
+                    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "on-brand": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "on-error": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "on-info": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "on-success": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "on-warning": `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})`;
+                    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "warning-alt": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "color";
+            };
+            fontWeight: {
+                values: {
+                    regular: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    medium: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    semiBold: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    bold: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "fontWeight";
+            };
+            lineHeight: {
+                values: {
+                    xs: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    s: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    m: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    l: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    xl: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    hero: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "lineHeight";
+            };
+            fontSize: {
+                values: {
+                    xs: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    s: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    m: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    l: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    xl: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    hero: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "fontSize";
+            };
+        };
+    } & {
+        config: {
+            textAlign: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "textAlign";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+            textTransform: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "textTransform";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+            textDecoration: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "textDecoration";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { title };

package/dist/packages/exhibition/title/rarui-title.css.d.ts

@@ -0,0 +1,18 @@
+declare const titleLineHeightProperties: {
+    hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const titleFontSizeProperties: {
+    hero: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    s: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    m: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    l: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { titleFontSizeProperties, titleLineHeightProperties };

package/dist/packages/exhibition/title/rarui-title.types.d.ts

@@ -0,0 +1,27 @@
+import { titleFontSizeProperties, titleLineHeightProperties } from './rarui-title.css.js';
+import { StandardLonghandProperties, StandardShorthandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { colorProperties, fontWeightProperties } from '../../../properties/css.js';
+
+type TitleDynamicProperties = Pick<StandardLonghandProperties, "textAlign" | "textTransform"> & Pick<StandardShorthandProperties, "textDecoration">;
+interface TitleSprinkle extends TitleDynamicProperties {
+    /**
+     * The color property is used to set the color of the title.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | Conditions<AddDollar<keyof typeof colorProperties>>;
+    /**
+     * The color property is used to set the color of the title.
+     * @default $regular
+     */
+    fontWeight?: AddDollar<keyof typeof fontWeightProperties> | Conditions<AddDollar<keyof typeof fontWeightProperties>>;
+    /**
+     * The fontSize property sets the size of the title.
+     */
+    fontSize?: AddDollar<keyof typeof titleFontSizeProperties> | Conditions<AddDollar<keyof typeof titleFontSizeProperties>>;
+    /**
+     * The lineHeight property specifies the line height of the title.
+     */
+    lineHeight?: AddDollar<keyof typeof titleLineHeightProperties> | Conditions<AddDollar<keyof typeof titleLineHeightProperties>>;
+}
+
+export type { TitleSprinkle };

package/dist/packages/exhibition/tooltip/index.d.ts

@@ -0,0 +1,39 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const tooltip: {
+    classnames: {
+        tooltip: 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: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+        container: string;
+    };
+};
+
+export { tooltip };

package/dist/packages/exhibition/tooltip/rarui-tooltip.css.d.ts

@@ -0,0 +1,43 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const styles: {
+    tooltip: RuntimeFn<{
+        /**
+         * Specifies whether the color scheme should be inverted
+         */
+        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})`;
+            };
+        };
+        /**
+         * Specifies the padding for the tooltip
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    header: RuntimeFn<{
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    container: string;
+};
+
+export { styles };

package/dist/packages/exhibition/tooltip/rarui-tooltip.types.d.ts

@@ -0,0 +1,6 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { styles } from './rarui-tooltip.css.js';
+
+type TooltipVariants = NonNullable<RecipeVariants<typeof styles.tooltip>>;
+
+export type { TooltipVariants };

package/dist/packages/feedback/progress/index.d.ts

@@ -0,0 +1,81 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const progress: {
+    classnames: {
+        progress: string;
+        bar: string;
+        circle: RuntimeFn<{
+            size: {
+                large: {
+                    width: "8.75rem";
+                    height: "8.75rem";
+                };
+                small: {
+                    width: "5rem";
+                    height: "5rem";
+                };
+            };
+        }>;
+        circleBase: string;
+        circleProgress: string;
+        circleText: string;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            backgroundColor: {
+                values: {
+                    brand: {
+                        default: string;
+                    };
+                    info: {
+                        default: string;
+                    };
+                    success: {
+                        default: string;
+                    };
+                };
+                staticScale: {
+                    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "backgroundColor";
+            };
+            stroke: {
+                values: {
+                    brand: {
+                        default: string;
+                    };
+                    info: {
+                        default: string;
+                    };
+                    success: {
+                        default: string;
+                    };
+                };
+                staticScale: {
+                    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "stroke";
+            };
+        };
+    } & {
+        config: {
+            width: {
+                dynamic: {
+                    default: string;
+                };
+                dynamicScale: true;
+                name: "width";
+                vars: {
+                    default: string;
+                };
+            };
+        };
+    }]>;
+};
+
+export { progress };

package/dist/packages/feedback/progress/rarui-progress.css.d.ts

@@ -0,0 +1,33 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const progressStyles: {
+    progress: string;
+    bar: string;
+    circle: RuntimeFn<{
+        /**
+         * Specifies the size of the progress indicator.
+         * This prop accepts one of the following values: "large" or "small".
+         * @default large
+         */
+        size: {
+            large: {
+                width: "8.75rem";
+                height: "8.75rem";
+            };
+            small: {
+                width: "5rem";
+                height: "5rem";
+            };
+        };
+    }>;
+    circleBase: string;
+    circleProgress: string;
+    circleText: string;
+};
+declare const progressColorProperties: {
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { progressColorProperties, progressStyles };

package/dist/packages/feedback/progress/rarui-progress.types.d.ts

@@ -0,0 +1,16 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { AddDollar } from '../../../types/utils.types.js';
+import { progressStyles, progressColorProperties } from './rarui-progress.css.js';
+
+type ProgressVariants = NonNullable<RecipeVariants<typeof progressStyles.circle>>;
+interface ProgressSprinkle {
+    /**
+     * Specifies the color of the progress.
+     * This prop accepts one of the following values: "$info", "$success" or "$brand"
+     * @default $info
+     * @examples ["$brand", { xs: "$brand", md: "$info" }]
+     */
+    color?: AddDollar<keyof typeof progressColorProperties>;
+}
+
+export type { ProgressSprinkle, ProgressVariants };