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

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

@@ -0,0 +1,52 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const avatar: {
+    classnames: {
+        container: string;
+        avatar: RuntimeFn<{
+            size: {
+                small: {
+                    width: "20px";
+                    height: "20px";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                medium: {
+                    width: "30px";
+                    height: "30px";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                large: {
+                    width: "40px";
+                    height: "40px";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                xLarge: {
+                    width: "60px";
+                    height: "60px";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        }>;
+        badge: RuntimeFn<{
+            size: {
+                small: {
+                    left: "18px";
+                };
+                medium: {
+                    left: "24px";
+                };
+                large: {
+                    top: "-4px";
+                    left: "30px";
+                };
+                xLarge: {
+                    left: "44px";
+                };
+            };
+        }>;
+    };
+};
+
+export { avatar };

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

@@ -0,0 +1,54 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const avatarStyles: {
+    container: string;
+    avatar: RuntimeFn<{
+        /**
+         * Specifies the size of the Avatar component.
+         * @default medium
+         */
+        size: {
+            small: {
+                width: "20px";
+                height: "20px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                width: "30px";
+                height: "30px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            large: {
+                width: "40px";
+                height: "40px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            xLarge: {
+                width: "60px";
+                height: "60px";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    badge: RuntimeFn<{
+        size: {
+            small: {
+                left: "18px";
+            };
+            medium: {
+                left: "24px";
+            };
+            large: {
+                top: "-4px";
+                left: "30px";
+            };
+            xLarge: {
+                left: "44px";
+            };
+        };
+    }>;
+};
+
+export { avatarStyles };

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

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

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

@@ -0,0 +1,79 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const badge: {
+    classnames: {
+        badge: RuntimeFn<{
+            appearance: {
+                brand: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                danger: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                success: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                warning: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                info: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                neutral: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                inverted: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            size: {
+                large: {
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "3rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                medium: {
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "2em";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "1.5rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                dot: {
+                    height: "0.5rem";
+                    width: "0.5rem";
+                };
+            };
+            variant: {
+                solid: {};
+                outlined: {
+                    borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderStyle: "solid";
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        }>;
+    };
+};
+
+export { badge };

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

@@ -0,0 +1,89 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const badgeStyles: {
+    badge: RuntimeFn<{
+        /**
+         * Determines the visual style of the badge, influencing its color scheme and appearance.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            danger: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            info: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            inverted: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         * @defaiult medium
+         */
+        size: {
+            large: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "2em";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "1.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            dot: {
+                height: "0.5rem";
+                width: "0.5rem";
+            };
+        };
+        /**
+         * Defines the visual variant of the badge, affecting its background style.
+         * @defaiult solid
+         */
+        variant: {
+            solid: {};
+            outlined: {
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderStyle: "solid";
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+};
+
+export { badgeStyles };

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

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

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

@@ -0,0 +1,167 @@
+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';
+import { ComplexStyleRule } from '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.d.js';
+
+declare const divider: {
+    classnames: {
+        divider: RuntimeFn<{
+            [x: string]: {
+                [x: string]: string | ComplexStyleRule;
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            borderColor: {
+                values: {
+                    "invert-disabled": {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    "brand-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>;
+                    };
+                    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 { divider };

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

@@ -0,0 +1,6 @@
+declare const dividerBorderWidthProperties: {
+    "1": string;
+    "2": string;
+};
+
+export { dividerBorderWidthProperties };

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

@@ -0,0 +1,26 @@
+import { dividerBorderWidthProperties } from './rarui-divider.css.js';
+import { Conditions, AddDollar } from '../../../types/utils.types.js';
+import { borderColorProperties } from '../../../properties/css.js';
+
+type DividerBorderStyle = "solid" | "dashed";
+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 type { DividerSprinkle };

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

@@ -0,0 +1,136 @@
+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';
+import { ComplexStyleRule } from '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.d.js';
+
+declare const icon: {
+    classnames: {
+        icon: RuntimeFn<{
+            [x: string]: {
+                [x: string]: string | ComplexStyleRule;
+            };
+        }>;
+    };
+    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";
+            };
+        };
+    } & {
+        config: {
+            cursor: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "cursor";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { icon };

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

@@ -0,0 +1,13 @@
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { colorProperties } from '../../../properties/css.js';
+
+type IconDynamicProperties = Pick<StandardLonghandProperties, "cursor">;
+interface IconSprinkle extends IconDynamicProperties {
+    /**
+     * The color property sets the icon.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | Conditions<AddDollar<keyof typeof colorProperties>>;
+}
+
+export type { IconSprinkle };