@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/node_modules/rainbow-sprinkles/dist/declarations/src/types.d.d.ts

@@ -0,0 +1,137 @@
+import { Properties } from './css.d.js';
+
+interface CSSProperties extends Properties {
+}
+declare type PropertyCssValue<T> = T extends keyof CSSProperties ? CSSProperties[T] : never;
+declare type ConditionalPropertyValue = {
+    default: string;
+    conditions: {
+        [conditionName: string]: string;
+    };
+};
+declare type NonConditionalPropertyValue = {
+    default: string;
+};
+declare type DynamicProperty = {
+    dynamic: NonConditionalPropertyValue;
+    vars: NonConditionalPropertyValue;
+    dynamicScale: {
+        [token: string]: string;
+    } | true;
+    name: string;
+};
+declare type DynamicConditionalProperty = {
+    dynamic: ConditionalPropertyValue;
+    vars: ConditionalPropertyValue;
+    dynamicScale: {
+        [token: string]: string;
+    } | true;
+    name: string;
+};
+declare type StaticPropertyArray = {
+    values: {
+        [value: string]: NonConditionalPropertyValue;
+    };
+    staticScale: string[];
+    name: string;
+};
+declare type StaticConditionalPropertyArray = {
+    values: {
+        [value: string]: ConditionalPropertyValue;
+    };
+    staticScale: string[];
+    name: string;
+};
+declare type StaticProperty = {
+    values: {
+        [value: string]: NonConditionalPropertyValue;
+    };
+    staticScale: {
+        [token: string]: string;
+    };
+    name: string;
+};
+declare type StaticConditionalProperty = {
+    values: {
+        [value: string]: ConditionalPropertyValue;
+    };
+    staticScale: {
+        [token: string]: string;
+    };
+    name: string;
+};
+declare type StaticDynamicPropertyArray = {
+    dynamic: NonConditionalPropertyValue;
+    values: {
+        [value: string]: NonConditionalPropertyValue;
+    };
+    name: string;
+    staticScale: string[];
+    dynamicScale: true;
+    vars: NonConditionalPropertyValue;
+};
+declare type StaticDynamicConditionalPropertyArray = {
+    dynamic: ConditionalPropertyValue;
+    values: {
+        [value: string]: ConditionalPropertyValue;
+    };
+    name: string;
+    staticScale: string[];
+    dynamicScale: true;
+    vars: ConditionalPropertyValue;
+};
+declare type StaticDynamicProperty = {
+    dynamic: NonConditionalPropertyValue;
+    values: {
+        [value: string]: NonConditionalPropertyValue;
+    };
+    name: string;
+    vars: NonConditionalPropertyValue;
+    staticScale: {
+        [token: string]: string;
+    };
+    dynamicScale: true;
+};
+declare type StaticDynamicConditionalProperty = {
+    dynamic: ConditionalPropertyValue;
+    values: {
+        [value: string]: ConditionalPropertyValue;
+    };
+    name: string;
+    vars: ConditionalPropertyValue;
+    staticScale: {
+        [token: string]: string;
+    };
+    dynamicScale: true;
+};
+declare type ShorthandProperty = {
+    mappings: string[];
+};
+declare type SprinkleProperties = {
+    [k: string]: DynamicProperty | StaticProperty | StaticPropertyArray | StaticDynamicPropertyArray | StaticDynamicProperty | DynamicConditionalProperty | StaticConditionalProperty | StaticConditionalPropertyArray | StaticDynamicConditionalPropertyArray | StaticDynamicConditionalProperty | ShorthandProperty;
+};
+declare type DefinePropertiesReturn = {
+    config: SprinkleProperties;
+};
+declare type ValueOrConditionObject<T, Conditions extends ConditionalPropertyValue> = T | null | Partial<Record<keyof Conditions['conditions'], T | null>>;
+declare type ValueOrConditionObjectStatic<T, Values extends {
+    [k: string]: ConditionalPropertyValue;
+}> = T | null | {
+    [Condition in keyof Values[keyof Values]['conditions']]?: T | null;
+};
+declare type PrefixValue<T> = T extends `-${infer Root}` ? `-$${Root}` : `$${(string | number) & T}`;
+declare type ChildSprinkle<Sprinkle extends SprinkleProperties[keyof SprinkleProperties]> = Sprinkle extends StaticDynamicConditionalProperty ? ValueOrConditionObject<PropertyCssValue<Sprinkle['name']> | PrefixValue<keyof Sprinkle['staticScale']>, Sprinkle['vars']> : Sprinkle extends StaticDynamicConditionalPropertyArray ? ValueOrConditionObject<PropertyCssValue<Sprinkle['name']>, Sprinkle['vars']> : Sprinkle extends DynamicConditionalProperty ? Sprinkle['dynamicScale'] extends boolean ? ValueOrConditionObject<PropertyCssValue<Sprinkle['name']>, Sprinkle['vars']> : ValueOrConditionObject<PropertyCssValue<Sprinkle['name']> | PrefixValue<keyof Sprinkle['dynamicScale']>, Sprinkle['vars']> : Sprinkle extends StaticDynamicConditionalPropertyArray ? ValueOrConditionObject<Sprinkle['staticScale'][number], Sprinkle['dynamic']> : Sprinkle extends StaticDynamicConditionalProperty ? ValueOrConditionObjectStatic<PrefixValue<keyof Sprinkle['staticScale']>, Sprinkle['values']> : Sprinkle extends StaticConditionalProperty ? ValueOrConditionObjectStatic<PrefixValue<keyof Sprinkle['staticScale']>, Sprinkle['values']> : Sprinkle extends StaticConditionalPropertyArray ? ValueOrConditionObjectStatic<Sprinkle['staticScale'][number], Sprinkle['values']> : Sprinkle extends StaticDynamicProperty ? PrefixValue<keyof Sprinkle['staticScale']> | PropertyCssValue<Sprinkle['name']> : Sprinkle extends StaticDynamicPropertyArray ? PropertyCssValue<Sprinkle['name']> : Sprinkle extends DynamicProperty ? PropertyCssValue<Sprinkle['name']> | (Sprinkle['dynamicScale'] extends boolean ? never : PrefixValue<keyof Sprinkle['dynamicScale']>) : Sprinkle extends StaticProperty ? PrefixValue<keyof Sprinkle['staticScale']> : Sprinkle extends StaticPropertyArray ? Sprinkle['staticScale'][number] : never;
+declare type ChildSprinkles<Sprinkles extends SprinkleProperties> = {
+    [Prop in keyof Sprinkles]?: Sprinkles[Prop] extends ShorthandProperty ? ChildSprinkle<Sprinkles[Sprinkles[Prop]['mappings'][number]]> : ChildSprinkle<Sprinkles[Prop]>;
+};
+declare type SprinklesProps<Args extends ReadonlyArray<any>> = Args extends [
+    infer L,
+    ...infer R
+] ? (L extends DefinePropertiesReturn ? ChildSprinkles<L['config']> : never) & SprinklesProps<R> : {};
+declare type RuntimeFnReturn = {
+    style: Record<string, string>;
+    className: string;
+    otherProps: Record<string, any>;
+};
+
+export type { CSSProperties, ChildSprinkle, ChildSprinkles, ConditionalPropertyValue, DefinePropertiesReturn, DynamicConditionalProperty, DynamicProperty, PrefixValue, RuntimeFnReturn, ShorthandProperty, SprinkleProperties, SprinklesProps, StaticConditionalProperty, StaticConditionalPropertyArray, StaticDynamicConditionalProperty, StaticDynamicConditionalPropertyArray, StaticDynamicProperty, StaticDynamicPropertyArray, StaticProperty, StaticPropertyArray };

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/index.js

@@ -0,0 +1 @@
+import{avatarStyles as a}from"./rarui-avatar.css.js";var r={classnames:a};export{r as avatar};

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

@@ -0,0 +1,61 @@
+.rarui-avatar_container__1jwfew50 {
+  position: relative;
+  display: inline-flex;
+}
+.rarui-avatar__1jwfew51 {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  overflow: hidden;
+  border-style: solid;
+  border-width: var(--rarui-shape-border-width-1);
+  background-color: var(--rarui-colors-surface-secondary);
+  border-color: var(--rarui-colors-border-subdued);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-avatar_size_small__1jwfew52 {
+  width: 20px;
+  height: 20px;
+  font-size: var(--rarui-fontSize-body-xxs);
+}
+.rarui-avatar_size_medium__1jwfew53 {
+  width: 30px;
+  height: 30px;
+  font-size: var(--rarui-fontSize-body-xs);
+}
+.rarui-avatar_size_large__1jwfew54 {
+  width: 40px;
+  height: 40px;
+  font-size: var(--rarui-fontSize-body-s);
+  border-width: var(--rarui-shape-border-width-2);
+}
+.rarui-avatar_size_xLarge__1jwfew55 {
+  width: 60px;
+  height: 60px;
+  font-size: var(--rarui-fontSize-body-m);
+  border-width: var(--rarui-shape-border-width-2);
+}
+.rarui-avatar_badge__1jwfew56 {
+  position: absolute;
+  top: 0;
+}
+.rarui-avatar_badge_size_small__1jwfew57 {
+  left: 18px;
+}
+.rarui-avatar_badge_size_medium__1jwfew58 {
+  left: 24px;
+}
+.rarui-avatar_badge_size_large__1jwfew59 {
+  top: -4px;
+  left: 30px;
+}
+.rarui-avatar_badge_size_xLarge__1jwfew5a {
+  left: 44px;
+}
+.rarui-avatar__1jwfew51 > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

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.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-avatar.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r={container:"rarui-avatar_container__1jwfew50",avatar:a({defaultClassName:"rarui-avatar__1jwfew51",variantClassNames:{size:{small:"rarui-avatar_size_small__1jwfew52",medium:"rarui-avatar_size_medium__1jwfew53",large:"rarui-avatar_size_large__1jwfew54",xLarge:"rarui-avatar_size_xLarge__1jwfew55"}},defaultVariants:{},compoundVariants:[]}),badge:a({defaultClassName:"rarui-avatar_badge__1jwfew56",variantClassNames:{size:{small:"rarui-avatar_badge_size_small__1jwfew57",medium:"rarui-avatar_badge_size_medium__1jwfew58",large:"rarui-avatar_badge_size_large__1jwfew59",xLarge:"rarui-avatar_badge_size_xLarge__1jwfew5a"}},defaultVariants:{},compoundVariants:[]})};export{r as 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/index.js

@@ -0,0 +1 @@
+import{badgeStyles as r}from"./rarui-badge.css.js";var s={classnames:r};export{s as badge};

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

@@ -0,0 +1,112 @@
+.rarui-badge__diq1u80 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  gap: var(--rarui-spacing-3xs);
+  font-weight: var(--rarui-fontWeight-medium);
+  line-height: var(--rarui-lineHeight-button-m);
+  font-size: var(--rarui-fontSize-button-m);
+  font-family: var(--rarui-fontFamily-body);
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-badge_appearance_brand__diq1u81 {
+  background-color: var(--rarui-colors-surface-brand);
+  border-color: var(--rarui-colors-surface-brand);
+  color: var(--rarui-colors-content-on-brand);
+}
+.rarui-badge_appearance_danger__diq1u82 {
+  background-color: var(--rarui-colors-surface-error);
+  border-color: var(--rarui-colors-surface-error);
+  color: var(--rarui-colors-content-on-error);
+}
+.rarui-badge_appearance_success__diq1u83 {
+  background-color: var(--rarui-colors-surface-success);
+  border-color: var(--rarui-colors-surface-success);
+  color: var(--rarui-colors-content-on-success);
+}
+.rarui-badge_appearance_warning__diq1u84 {
+  background-color: var(--rarui-colors-surface-warning);
+  border-color: var(--rarui-colors-surface-warning);
+  color: var(--rarui-colors-content-on-warning);
+}
+.rarui-badge_appearance_info__diq1u85 {
+  background-color: var(--rarui-colors-surface-info);
+  border-color: var(--rarui-colors-surface-info);
+  color: var(--rarui-colors-content-on-info);
+}
+.rarui-badge_appearance_neutral__diq1u86 {
+  background-color: var(--rarui-colors-surface-invert);
+  border-color: var(--rarui-colors-surface-invert);
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-badge_appearance_inverted__diq1u87 {
+  background-color: var(--rarui-colors-surface-primary);
+  border-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-badge_size_large__diq1u88 {
+  padding: 0 var(--rarui-spacing-xs);
+  height: 3rem;
+  font-size: var(--rarui-fontSize-button-l);
+  font-weight: var(--rarui-fontWeight-semiBold);
+}
+.rarui-badge_size_medium__diq1u89 {
+  padding: 0 var(--rarui-spacing-2xs);
+  height: 2em;
+  font-size: var(--rarui-fontSize-button-m);
+  font-weight: var(--rarui-fontWeight-medium);
+}
+.rarui-badge_size_small__diq1u8a {
+  padding: 0 var(--rarui-spacing-3xs);
+  height: 1.5rem;
+  font-size: var(--rarui-fontSize-button-s);
+  font-weight: var(--rarui-fontWeight-medium);
+}
+.rarui-badge_size_dot__diq1u8b {
+  height: 0.5rem;
+  width: 0.5rem;
+}
+.rarui-badge_variant_outlined__diq1u8d {
+  border-width: var(--rarui-shape-border-width-1);
+  border-style: solid;
+  border-color: var(--rarui-colors-surface-brand);
+}
+.rarui-badge__compound_0__diq1u8e {
+  color: var(--rarui-colors-content-brand);
+  border-color: var(--rarui-colors-border-brand);
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-badge__compound_1__diq1u8f {
+  color: var(--rarui-colors-content-error);
+  border-color: var(--rarui-colors-border-error);
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-badge__compound_2__diq1u8g {
+  color: var(--rarui-colors-content-success);
+  border-color: var(--rarui-colors-border-success);
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-badge__compound_3__diq1u8h {
+  color: var(--rarui-colors-content-warning);
+  border-color: var(--rarui-colors-border-warning);
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-badge__compound_4__diq1u8i {
+  color: var(--rarui-colors-content-info);
+  border-color: var(--rarui-colors-border-info);
+  background-color: var(--rarui-colors-surface-info-subdued);
+}
+.rarui-badge__compound_5__diq1u8j {
+  color: var(--rarui-colors-content-invert-secondary);
+  border-color: var(--rarui-colors-border-invert);
+  background-color: var(--rarui-colors-surface-invert-disabled);
+}
+.rarui-badge__compound_6__diq1u8k {
+  color: var(--rarui-colors-content-secondary);
+  border-color: var(--rarui-colors-border-subdued);
+  background-color: var(--rarui-colors-surface-secondary);
+}

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.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-badge.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var e={badge:a({defaultClassName:"rarui-badge__diq1u80",variantClassNames:{appearance:{brand:"rarui-badge_appearance_brand__diq1u81",danger:"rarui-badge_appearance_danger__diq1u82",success:"rarui-badge_appearance_success__diq1u83",warning:"rarui-badge_appearance_warning__diq1u84",info:"rarui-badge_appearance_info__diq1u85",neutral:"rarui-badge_appearance_neutral__diq1u86",inverted:"rarui-badge_appearance_inverted__diq1u87"},size:{large:"rarui-badge_size_large__diq1u88",medium:"rarui-badge_size_medium__diq1u89",small:"rarui-badge_size_small__diq1u8a",dot:"rarui-badge_size_dot__diq1u8b"},variant:{solid:"rarui-badge_variant_solid__diq1u8c",outlined:"rarui-badge_variant_outlined__diq1u8d"}},defaultVariants:{appearance:"brand",size:"medium",variant:"solid"},compoundVariants:[[{appearance:"brand",variant:"outlined"},"rarui-badge__compound_0__diq1u8e"],[{appearance:"danger",variant:"outlined"},"rarui-badge__compound_1__diq1u8f"],[{appearance:"success",variant:"outlined"},"rarui-badge__compound_2__diq1u8g"],[{appearance:"warning",variant:"outlined"},"rarui-badge__compound_3__diq1u8h"],[{appearance:"info",variant:"outlined"},"rarui-badge__compound_4__diq1u8i"],[{appearance:"neutral",variant:"outlined"},"rarui-badge__compound_5__diq1u8j"],[{appearance:"inverted",variant:"outlined"},"rarui-badge__compound_6__diq1u8k"]]})};export{e as 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 };