@rarui/styles 2.3.0-rc.1 → 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/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: {
+                    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 { 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 };