@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/navigation/tabs/index.d.ts

@@ -0,0 +1,65 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const tabs: {
+    classnames: {
+        ul: RuntimeFn<{
+            underlined: {
+                true: {
+                    padding: number;
+                    borderRadius: number;
+                    borderColor: "transparent";
+                    backgroundColor: "transparent";
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            position: {
+                left: {
+                    justifyContent: "flex-start";
+                };
+                center: {
+                    justifyContent: "center";
+                };
+                right: {
+                    justifyContent: "flex-end";
+                };
+            };
+        }>;
+        li: RuntimeFn<{
+            full: {
+                true: {
+                    flex: "1";
+                };
+            };
+        }>;
+        button: RuntimeFn<{
+            underlined: {
+                true: {
+                    borderRadius: number;
+                    borderColor: "transparent";
+                    backgroundColor: "transparent";
+                    borderBottomColor: "transparent";
+                    ":hover": {
+                        boxShadow: "none";
+                        borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":disabled": {
+                        borderBottomColor: "transparent";
+                    };
+                };
+            };
+            selected: {
+                true: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":disabled": {
+                        backgroundColor: "transparent";
+                        borderColor: "transparent";
+                    };
+                };
+            };
+        }>;
+    };
+};
+
+export { tabs };

package/dist/packages/navigation/tabs/index.js

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

package/dist/packages/navigation/tabs/rarui-tabs.css

@@ -0,0 +1,104 @@
+.rarui-tabs_ul__1apz2pr0 {
+  margin: 0;
+  border-style: solid;
+  list-style: none;
+  display: flex;
+  padding: var(--rarui-spacing-4xs);
+  gap: var(--rarui-spacing-4xs);
+  border-width: var(--rarui-shape-border-width-1);
+  border-radius: var(--rarui-shape-border-radius-xs);
+  background-color: var(--rarui-colors-surface-secondary);
+  border-color: var(--rarui-colors-border-subdued);
+}
+.rarui-tabs_ul_underlined_true__1apz2pr1 {
+  padding: 0;
+  border-radius: 0;
+  border-color: transparent;
+  background-color: transparent;
+  border-bottom-color: var(--rarui-colors-border-subdued);
+}
+.rarui-tabs_ul_position_left__1apz2pr2 {
+  justify-content: flex-start;
+}
+.rarui-tabs_ul_position_center__1apz2pr3 {
+  justify-content: center;
+}
+.rarui-tabs_ul_position_right__1apz2pr4 {
+  justify-content: flex-end;
+}
+.rarui-tabs_li__1apz2pr5 {
+  display: flex;
+}
+.rarui-tabs_li_full_true__1apz2pr6 {
+  flex: 1;
+}
+.rarui-tabs_button__1apz2pr7 {
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  transition: all 150ms ease;
+  border-style: solid;
+  border-color: transparent;
+  gap: var(--rarui-spacing-3xs);
+  border-width: var(--rarui-shape-border-width-1);
+  color: var(--rarui-colors-content-secondary);
+  font-family: var(--rarui-fontFamily-body);
+  font-weight: var(--rarui-fontWeight-semiBold);
+  font-size: var(--rarui-fontSize-button-m);
+  background-color: var(--rarui-colors-surface-secondary);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  padding: var(--rarui-spacing-3xs) var(--rarui-spacing-xs);
+}
+.rarui-tabs_button__1apz2pr7:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-tabs_button__1apz2pr7:hover {
+  background-color: var(--rarui-colors-surface-hover);
+  box-shadow: var(--rarui-elevation-bottom-1);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-tabs_button__1apz2pr7:disabled {
+  cursor: not-allowed;
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-tabs_button_underlined_true__1apz2pr8 {
+  border-radius: 0;
+  border-color: transparent;
+  background-color: transparent;
+  border-bottom-color: transparent;
+}
+.rarui-tabs_button_underlined_true__1apz2pr8:hover {
+  box-shadow: none;
+  border-bottom-color: var(--rarui-colors-border-subdued);
+}
+.rarui-tabs_button_underlined_true__1apz2pr8:disabled {
+  border-bottom-color: transparent;
+}
+.rarui-tabs_button_selected_true__1apz2pr9 {
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+  border-color: var(--rarui-colors-border-subdued);
+}
+.rarui-tabs_button_selected_true__1apz2pr9:disabled {
+  background-color: transparent;
+  border-color: transparent;
+}
+.rarui-tabs_button_compound_0__1apz2pra {
+  border-color: transparent;
+  color: var(--rarui-colors-content-brand);
+  border-bottom-color: var(--rarui-colors-border-brand-alt);
+}
+.rarui-tabs_button_compound_0__1apz2pra:hover {
+  color: var(--rarui-colors-content-brand);
+  border-bottom-color: var(--rarui-colors-border-brand-alt);
+}
+.rarui-tabs_button_compound_0__1apz2pra:disabled {
+  border-bottom-color: transparent;
+  color: var(--rarui-colors-content-disabled);
+}

package/dist/packages/navigation/tabs/rarui-tabs.css.d.ts

@@ -0,0 +1,79 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const tabsStyles: {
+    ul: RuntimeFn<{
+        /**
+         * Determines whether the tabs should have an underline style.
+         */
+        underlined: {
+            true: {
+                padding: number;
+                borderRadius: number;
+                borderColor: "transparent";
+                backgroundColor: "transparent";
+                borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Controls where the tab buttons are displayed. This prop accepts one of the following values: "left", "center", or "right".
+         * @default left
+         */
+        position: {
+            left: {
+                justifyContent: "flex-start";
+            };
+            center: {
+                justifyContent: "center";
+            };
+            right: {
+                justifyContent: "flex-end";
+            };
+        };
+    }>;
+    li: RuntimeFn<{
+        /**
+         * Determines whether the tabs should occupy the full width of their container.
+         */
+        full: {
+            true: {
+                flex: "1";
+            };
+        };
+    }>;
+    button: RuntimeFn<{
+        /**
+         * Determines whether the tabs should have an underline style.
+         */
+        underlined: {
+            true: {
+                borderRadius: number;
+                borderColor: "transparent";
+                backgroundColor: "transparent";
+                borderBottomColor: "transparent";
+                ":hover": {
+                    boxShadow: "none";
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":disabled": {
+                    borderBottomColor: "transparent";
+                };
+            };
+        };
+        /**
+         * Indicates whether the button is currently selected. This is used to style the button accordingly.
+         */
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":disabled": {
+                    backgroundColor: "transparent";
+                    borderColor: "transparent";
+                };
+            };
+        };
+    }>;
+};
+
+export { tabsStyles };

package/dist/packages/navigation/tabs/rarui-tabs.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-tabs.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r={ul:a({defaultClassName:"rarui-tabs_ul__1apz2pr0",variantClassNames:{underlined:{true:"rarui-tabs_ul_underlined_true__1apz2pr1"},position:{left:"rarui-tabs_ul_position_left__1apz2pr2",center:"rarui-tabs_ul_position_center__1apz2pr3",right:"rarui-tabs_ul_position_right__1apz2pr4"}},defaultVariants:{},compoundVariants:[]}),li:a({defaultClassName:"rarui-tabs_li__1apz2pr5",variantClassNames:{full:{true:"rarui-tabs_li_full_true__1apz2pr6"}},defaultVariants:{},compoundVariants:[]}),button:a({defaultClassName:"rarui-tabs_button__1apz2pr7",variantClassNames:{underlined:{true:"rarui-tabs_button_underlined_true__1apz2pr8"},selected:{true:"rarui-tabs_button_selected_true__1apz2pr9"}},defaultVariants:{},compoundVariants:[[{underlined:!0,selected:!0},"rarui-tabs_button_compound_0__1apz2pra"]]})};export{r as tabsStyles};

package/dist/packages/navigation/tabs/rarui-tabs.types.d.ts

@@ -0,0 +1,6 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { tabsStyles } from './rarui-tabs.css.js';
+
+type TabsVariants = NonNullable<RecipeVariants<typeof tabsStyles.ul>> & NonNullable<RecipeVariants<typeof tabsStyles.li>> & NonNullable<RecipeVariants<typeof tabsStyles.button>>;
+
+export type { TabsVariants };

package/dist/packages/surface/accordion/index.d.ts

@@ -0,0 +1,47 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const accordion: {
+    classnames: {
+        item: RuntimeFn<{
+            selected: {
+                true: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":active": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":disabled": {
+                        borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        backgroundColor: "transparent";
+                    };
+                };
+            };
+            size: {
+                large: {
+                    padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+                };
+                medium: {
+                    padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+                };
+                small: {
+                    padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+                };
+            };
+        }>;
+        body: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+    };
+};
+
+export { accordion };

package/dist/packages/surface/accordion/index.js

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

package/dist/packages/surface/accordion/rarui-accordion.css

@@ -0,0 +1,63 @@
+.rarui-accordion_item__1si5gvw0 {
+  cursor: pointer;
+  box-sizing: border-box;
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0;
+  border-bottom-width: var(--rarui-shape-border-width-1);
+  border-bottom-color: var(--rarui-colors-border-subdued);
+  border-top-left-radius: var(--rarui-shape-border-radius-2xs);
+  border-top-right-radius: var(--rarui-shape-border-radius-2xs);
+  color: var(--rarui-colors-content-primary);
+  transition: all 150ms ease;
+}
+.rarui-accordion_item__1si5gvw0:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-accordion_item__1si5gvw0:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-accordion_item__1si5gvw0:disabled {
+  background-color: transparent;
+  cursor: not-allowed;
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-accordion_item__1si5gvw0:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-accordion_item_selected_true__1si5gvw1 {
+  color: var(--rarui-colors-content-brand);
+  border-bottom-color: var(--rarui-colors-border-brand-alt);
+}
+.rarui-accordion_item_selected_true__1si5gvw1:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-accordion_item_selected_true__1si5gvw1:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-accordion_item_selected_true__1si5gvw1:disabled {
+  border-bottom-color: var(--rarui-colors-border-subdued);
+  background-color: transparent;
+}
+.rarui-accordion_item_size_large__1si5gvw2 {
+  padding: var(--rarui-spacing-2xs) var(--rarui-spacing-md);
+}
+.rarui-accordion_item_size_medium__1si5gvw3 {
+  padding: var(--rarui-spacing-2xs) var(--rarui-spacing-s);
+}
+.rarui-accordion_item_size_small__1si5gvw4 {
+  padding: var(--rarui-spacing-3xs) var(--rarui-spacing-xs);
+}
+.rarui-accordion_body__1si5gvw5 {
+  border-style: solid;
+  border-width: 0;
+  border-bottom-width: var(--rarui-shape-border-width-1);
+  border-bottom-color: var(--rarui-colors-border-subdued);
+}
+.rarui-accordion_body_padding_base__1si5gvw6 {
+  padding: var(--rarui-spacing-2xs);
+}
+.rarui-accordion_body_padding_none__1si5gvw7 {
+  padding: 0;
+}

package/dist/packages/surface/accordion/rarui-accordion.css.d.ts

@@ -0,0 +1,49 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const accordionStyles: {
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":disabled": {
+                    borderBottomColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+        size: {
+            large: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+            };
+            medium: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+            };
+            small: {
+                padding: `var(--${string}) var(--${string})` | `var(--${string}) var(--${string}, ${string})` | `var(--${string}) var(--${string}, ${number})` | `var(--${string}, ${string}) var(--${string})` | `var(--${string}, ${string}) var(--${string}, ${string})` | `var(--${string}, ${string}) var(--${string}, ${number})` | `var(--${string}, ${number}) var(--${string})` | `var(--${string}, ${number}) var(--${string}, ${string})` | `var(--${string}, ${number}) var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    body: RuntimeFn<{
+        /**
+         * Padding properties are used to generate space around the content area of an Accordion.Body..
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+};
+
+export { accordionStyles };

package/dist/packages/surface/accordion/rarui-accordion.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-accordion.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var i={item:a({defaultClassName:"rarui-accordion_item__1si5gvw0",variantClassNames:{selected:{true:"rarui-accordion_item_selected_true__1si5gvw1"},size:{large:"rarui-accordion_item_size_large__1si5gvw2",medium:"rarui-accordion_item_size_medium__1si5gvw3",small:"rarui-accordion_item_size_small__1si5gvw4"}},defaultVariants:{},compoundVariants:[]}),body:a({defaultClassName:"rarui-accordion_body__1si5gvw5",variantClassNames:{padding:{base:"rarui-accordion_body_padding_base__1si5gvw6",none:"rarui-accordion_body_padding_none__1si5gvw7"}},defaultVariants:{},compoundVariants:[]})};export{i as accordionStyles};

package/dist/packages/surface/accordion/rarui-accordion.types.d.ts

@@ -0,0 +1,6 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { accordionStyles } from './rarui-accordion.css.js';
+
+type AccordionVariants = Omit<NonNullable<RecipeVariants<typeof accordionStyles.item>>, "selected"> & NonNullable<RecipeVariants<typeof accordionStyles.body>>;
+
+export type { AccordionVariants };

package/dist/packages/surface/banner/index.d.ts

@@ -0,0 +1,41 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const banner: {
+    classnames: {
+        banner: RuntimeFn<{
+            appearance: {
+                brand: {
+                    backgroundColor: `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})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                neutral: {
+                    backgroundColor: `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})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                warning: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                error: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            floating: {
+                true: {
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        }>;
+    };
+};
+
+export { banner };

package/dist/packages/surface/banner/index.js

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

package/dist/packages/surface/banner/rarui-banner.css

@@ -0,0 +1,42 @@
+.rarui-banner__1wgs6s20 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: auto;
+  margin-right: auto;
+  padding: var(--rarui-spacing-4xs) var(--rarui-spacing-3xs);
+}
+.rarui-banner_appearance_brand__1wgs6s21 {
+  background-color: var(--rarui-colors-surface-brand);
+  color: var(--rarui-colors-content-on-brand);
+}
+.rarui-banner_appearance_info__1wgs6s22 {
+  background-color: var(--rarui-colors-surface-info-subdued);
+  color: var(--rarui-colors-content-info);
+}
+.rarui-banner_appearance_neutral__1wgs6s23 {
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-banner_appearance_inverted__1wgs6s24 {
+  background-color: var(--rarui-colors-surface-invert);
+  color: var(--rarui-colors-content-invert-secondary);
+}
+.rarui-banner_appearance_warning__1wgs6s25 {
+  background-color: var(--rarui-colors-surface-warning);
+  color: var(--rarui-colors-content-on-warning);
+}
+.rarui-banner_appearance_error__1wgs6s26 {
+  background-color: var(--rarui-colors-surface-error);
+  color: var(--rarui-colors-content-on-error);
+}
+.rarui-banner_floating_true__1wgs6s27 {
+  border-radius: var(--rarui-shape-border-radius-xs);
+}
+.rarui-banner__compound_0__1wgs6s28 {
+  border: 1px solid var(--rarui-colors-border-subdued);
+}
+.rarui-banner__compound_1__1wgs6s29 {
+  border: 1px solid var(--rarui-colors-border-invert);
+}

package/dist/packages/surface/banner/rarui-banner.css.d.ts

@@ -0,0 +1,47 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const bannerStyles: {
+    banner: RuntimeFn<{
+        /**
+         * Specifies the visual appearance of the banner message, influencing its color and style.
+         * @default brand
+         */
+        appearance: {
+            brand: {
+                backgroundColor: `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})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                backgroundColor: `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})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            error: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Determines whether the banner message should float above the content. This can be useful for ensuring the message remains visible even as the user scrolls.
+         * @default false
+         */
+        floating: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+};
+
+export { bannerStyles };

package/dist/packages/surface/banner/rarui-banner.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-banner.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r={banner:a({defaultClassName:"rarui-banner__1wgs6s20",variantClassNames:{appearance:{brand:"rarui-banner_appearance_brand__1wgs6s21",info:"rarui-banner_appearance_info__1wgs6s22",neutral:"rarui-banner_appearance_neutral__1wgs6s23",inverted:"rarui-banner_appearance_inverted__1wgs6s24",warning:"rarui-banner_appearance_warning__1wgs6s25",error:"rarui-banner_appearance_error__1wgs6s26"},floating:{true:"rarui-banner_floating_true__1wgs6s27"}},defaultVariants:{},compoundVariants:[[{appearance:"neutral",floating:!0},"rarui-banner__compound_0__1wgs6s28"],[{appearance:"inverted",floating:!0},"rarui-banner__compound_1__1wgs6s29"]]})};export{r as bannerStyles};

package/dist/packages/surface/banner/rarui-banner.types.d.ts

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