@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/input/input/rarui-input.css

@@ -0,0 +1,171 @@
+.rarui-input_container__lq13ap0 {
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-style: solid;
+  transition: all 150ms ease;
+  border-radius: var(--rarui-shape-border-radius-input);
+  border-color: var(--rarui-colors-border-secondary);
+}
+.rarui-input_container__lq13ap0:hover {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-input_container__lq13ap0:focus {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-input_container__lq13ap0:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-input_container__lq13ap0:has(input:disabled) {
+  border-color: var(--rarui-colors-surface-disabled);
+}
+.rarui-input_container_appearance_success__lq13ap1 {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-input_container_appearance_success__lq13ap1:hover {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-input_container_appearance_success__lq13ap1:focus {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-input_container_appearance_error__lq13ap2 {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-input_container_appearance_error__lq13ap2:hover {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-input_container_appearance_error__lq13ap2:focus {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-input_container_border_true__lq13ap3 {
+  border-width: var(--rarui-shape-border-width-1);
+}
+.rarui-input_container_border_false__lq13ap4 {
+  border-width: 0;
+}
+.rarui-input_container_size_large__lq13ap5 {
+  height: 3rem;
+}
+.rarui-input_container_size_medium__lq13ap6 {
+  height: 2.5rem;
+}
+.rarui-input_container_size_small__lq13ap7 {
+  height: 2rem;
+}
+.rarui-input__lq13ap8 {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: none;
+  padding: var(--rarui-spacing-2xs);
+  font-family: var(--rarui-fontFamily-body);
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-input__lq13ap8::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rarui-input__lq13ap8::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.rarui-input__lq13ap8:focus-within {
+  outline: none;
+  box-shadow: none;
+}
+.rarui-input__lq13ap8:disabled {
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-surface-disabled);
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-input__lq13ap8::placeholder {
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-input__lq13ap8[type='number'] {
+  -moz-appearance: textfield;
+}
+.rarui-input_size_large__lq13apa {
+  font-size: var(--rarui-fontSize-body-l);
+  line-height: var(--rarui-lineHeight-body-xl);
+}
+.rarui-input_size_medium__lq13apb {
+  font-size: var(--rarui-fontSize-body-m);
+  line-height: var(--rarui-lineHeight-body-l);
+}
+.rarui-input_size_small__lq13apc {
+  font-size: var(--rarui-fontSize-body-s);
+  line-height: var(--rarui-lineHeight-body-m);
+  padding: 0 var(--rarui-spacing-3xs);
+}
+.rarui-input_leading__lq13apd {
+  cursor: pointer;
+  box-sizing: border-box;
+  border-right-color: transparent;
+  border-width: 0;
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-secondary);
+}
+.rarui-input_leading_position_start__lq13ape {
+  border-right-width: var(--rarui-shape-border-width-1);
+}
+.rarui-input_leading_position_end__lq13apf {
+  border-left-width: var(--rarui-shape-border-width-1);
+}
+.rarui-input_leading_divider_true__lq13apg {
+  border-style: solid;
+  border-color: var(--rarui-colors-border-secondary);
+}
+.rarui-input_leading_divider_false__lq13aph {
+  border-right-width: 0;
+  border-left-width: 0;
+}
+.rarui-input_leading_appearance_success__lq13api {
+  color: var(--rarui-colors-content-success);
+  background-color: var(--rarui-colors-surface-success-subdued);
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-input_leading_appearance_error__lq13apj {
+  color: var(--rarui-colors-content-error);
+  background-color: var(--rarui-colors-surface-error-subdued);
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-input_leading_size_large__lq13apk {
+  padding: 0 var(--rarui-spacing-xs);
+}
+.rarui-input_leading_size_medium__lq13apl {
+  padding: 0 var(--rarui-spacing-2xs);
+}
+.rarui-input_leading_size_small__lq13apm {
+  padding: 0 var(--rarui-spacing-3xs);
+}
+.rarui-input_leading_compound_0__lq13apn {
+  padding-right: 0;
+}
+.rarui-input_leading_compound_1__lq13apo {
+  padding-left: 0;
+}
+.rarui-input_leading_compound_2__lq13app {
+  background-color: transparent;
+}
+.rarui-input_leading_compound_3__lq13apq {
+  background-color: transparent;
+}
+.rarui-input_container__lq13ap0:hover .rarui-input_leading__lq13apd {
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-input_container__lq13ap0:hover .rarui-input_leading_appearance_success__lq13api {
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-input_container__lq13ap0:hover .rarui-input_leading_appearance_error__lq13apj {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-input_container__lq13ap0:has(.rarui-input__lq13ap8:disabled) .rarui-input_leading__lq13apd {
+  cursor: auto;
+  border-color: var(--rarui-colors-border-disabled);
+  background-color: var(--rarui-colors-surface-disabled);
+  color: var(--rarui-colors-content-disabled);
+}

package/dist/packages/input/input/rarui-input.css.d.ts

@@ -0,0 +1,122 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const styles: {
+    container: RuntimeFn<{
+        /**
+         * Determines the visual style of the input, affecting its border
+         */
+        appearance: {
+            success: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            error: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                ":focus": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Determines if the input have borders or not.
+         */
+        border: {
+            true: {
+                borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            false: {
+                borderWidth: number;
+            };
+        };
+        size: {
+            large: {
+                height: "3rem";
+            };
+            medium: {
+                height: "2.5rem";
+            };
+            small: {
+                height: "2rem";
+            };
+        };
+    }>;
+    input: RuntimeFn<{
+        /**
+         * Places a divider between the input and the leading components
+         */
+        divider: {
+            false: {};
+        };
+        /**
+         * Specifies the size of the input, controlling its dimensions.
+         */
+        size: {
+            large: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    leading: RuntimeFn<{
+        position: {
+            start: {
+                borderRightWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            end: {
+                borderLeftWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        divider: {
+            true: {
+                borderStyle: "solid";
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            false: {
+                borderRightWidth: number;
+                borderLeftWidth: number;
+            };
+        };
+        appearance: {
+            success: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            error: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        size: {
+            large: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+            };
+            medium: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+            };
+            small: {
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+            };
+        };
+    }>;
+};
+
+export { styles };

package/dist/packages/input/input/rarui-input.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-input.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var i={container:a({defaultClassName:"rarui-input_container__lq13ap0",variantClassNames:{appearance:{success:"rarui-input_container_appearance_success__lq13ap1",error:"rarui-input_container_appearance_error__lq13ap2"},border:{true:"rarui-input_container_border_true__lq13ap3",false:"rarui-input_container_border_false__lq13ap4"},size:{large:"rarui-input_container_size_large__lq13ap5",medium:"rarui-input_container_size_medium__lq13ap6",small:"rarui-input_container_size_small__lq13ap7"}},defaultVariants:{},compoundVariants:[]}),input:a({defaultClassName:"rarui-input__lq13ap8",variantClassNames:{divider:{false:"rarui-input_divider_false__lq13ap9"},size:{large:"rarui-input_size_large__lq13apa",medium:"rarui-input_size_medium__lq13apb",small:"rarui-input_size_small__lq13apc"}},defaultVariants:{},compoundVariants:[]}),leading:a({defaultClassName:"rarui-input_leading__lq13apd",variantClassNames:{position:{start:"rarui-input_leading_position_start__lq13ape",end:"rarui-input_leading_position_end__lq13apf"},divider:{true:"rarui-input_leading_divider_true__lq13apg",false:"rarui-input_leading_divider_false__lq13aph"},appearance:{success:"rarui-input_leading_appearance_success__lq13api",error:"rarui-input_leading_appearance_error__lq13apj"},size:{large:"rarui-input_leading_size_large__lq13apk",medium:"rarui-input_leading_size_medium__lq13apl",small:"rarui-input_leading_size_small__lq13apm"}},defaultVariants:{},compoundVariants:[[{position:"start",divider:!1},"rarui-input_leading_compound_0__lq13apn"],[{position:"end",divider:!1},"rarui-input_leading_compound_1__lq13apo"],[{appearance:"error",divider:!1},"rarui-input_leading_compound_2__lq13app"],[{appearance:"success",divider:!1},"rarui-input_leading_compound_3__lq13apq"]]})};export{i as styles};

package/dist/packages/input/input/rarui-input.types.d.ts

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

package/dist/packages/input/radioButton/index.d.ts

@@ -0,0 +1,64 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const radioButton: {
+    classnames: {
+        radioButton: RuntimeFn<{
+            size: {
+                small: {
+                    width: "1.25rem";
+                    height: "1.25rem";
+                    ":before": {
+                        width: "2rem";
+                        height: "2rem";
+                    };
+                    ":after": {
+                        width: ".5rem";
+                        height: ".5rem";
+                    };
+                };
+                large: {
+                    width: "1.5rem";
+                    height: "1.5rem";
+                    ":before": {
+                        width: "2.75rem";
+                        height: "2.75rem";
+                    };
+                    ":after": {
+                        width: ".75rem";
+                        height: ".75rem";
+                    };
+                };
+            };
+            error: {
+                true: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    selectors: {
+                        "&:has(input:disabled)": {
+                            opacity: "50%";
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:has(input:checked)": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:has(input:checked):after": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:hover:before": {
+                            opacity: number;
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:active:before": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                    };
+                };
+            };
+        }>;
+        input: string;
+        container: string;
+    };
+};
+
+export { radioButton };

package/dist/packages/input/radioButton/index.js

@@ -0,0 +1 @@
+import{__assign as r}from"tslib";import{styles as o}from"./rarui-radioButton.css.js";var s={classnames:r({},o)};export{s as radioButton};

package/dist/packages/input/radioButton/rarui-radioButton.css

@@ -0,0 +1,113 @@
+.rarui-radioButton__1d9isw70 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  border-style: solid;
+  position: relative;
+  cursor: pointer;
+  border-width: var(--rarui-shape-border-width-2);
+  border-color: var(--rarui-colors-border-primary);
+}
+.rarui-radioButton__1d9isw70:before {
+  content: "";
+  position: absolute;
+  border-radius: 100%;
+  transition: all 150ms ease;
+  opacity: 0;
+}
+.rarui-radioButton__1d9isw70:after {
+  content: "";
+  position: absolute;
+  border-radius: 100%;
+  transition: all 150ms ease;
+  background-color: var(--rarui-colors-content-on-brand);
+  opacity: 0;
+}
+.rarui-radioButton__1d9isw70:has(input:checked) {
+  background-color: var(--rarui-colors-surface-brand);
+  border-color: var(--rarui-colors-surface-brand);
+}
+.rarui-radioButton__1d9isw70:has(input:checked):after {
+  opacity: 1;
+}
+.rarui-radioButton__1d9isw70:hover:before {
+  opacity: 1;
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-radioButton__1d9isw70:active:before {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-radioButton__1d9isw70:has(input:disabled) {
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-border-secondary);
+}
+.rarui-radioButton__1d9isw70:has(input:disabled):before {
+  opacity: 0;
+}
+.rarui-radioButton__1d9isw70:has(input:disabled):after {
+  background-color: var(--rarui-colors-content-disabled);
+}
+.rarui-radioButton_size_small__1d9isw71 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.rarui-radioButton_size_small__1d9isw71:before {
+  width: 2rem;
+  height: 2rem;
+}
+.rarui-radioButton_size_small__1d9isw71:after {
+  width: .5rem;
+  height: .5rem;
+}
+.rarui-radioButton_size_large__1d9isw72 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.rarui-radioButton_size_large__1d9isw72:before {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+.rarui-radioButton_size_large__1d9isw72:after {
+  width: .75rem;
+  height: .75rem;
+}
+.rarui-radioButton_error_true__1d9isw73 {
+  border-color: var(--rarui-colors-border-error);
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-radioButton_error_true__1d9isw73:has(input:disabled) {
+  opacity: 50%;
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-radioButton_error_true__1d9isw73:has(input:checked) {
+  background-color: var(--rarui-colors-surface-primary);
+  border-color: var(--rarui-colors-surface-error);
+}
+.rarui-radioButton_error_true__1d9isw73:has(input:checked):after {
+  background-color: var(--rarui-colors-content-error);
+}
+.rarui-radioButton_error_true__1d9isw73:hover:before {
+  opacity: 1;
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-radioButton_error_true__1d9isw73:active:before {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-radioButton_container__1d9isw74 {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--rarui-spacing-3xs);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-radioButton_container__1d9isw74[aria-disabled='true'] {
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-radioButton_input__1d9isw75 {
+  position: absolute;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}

package/dist/packages/input/radioButton/rarui-radioButton.css.d.ts

@@ -0,0 +1,68 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const styles: {
+    radioButton: RuntimeFn<{
+        /**
+         * Specifies the size of the radiobutton
+         */
+        size: {
+            small: {
+                width: "1.25rem";
+                height: "1.25rem";
+                ":before": {
+                    width: "2rem";
+                    height: "2rem";
+                };
+                ":after": {
+                    width: ".5rem";
+                    height: ".5rem";
+                };
+            };
+            large: {
+                width: "1.5rem";
+                height: "1.5rem";
+                ":before": {
+                    width: "2.75rem";
+                    height: "2.75rem";
+                };
+                ":after": {
+                    width: ".75rem";
+                    height: ".75rem";
+                };
+            };
+        };
+        /**
+         * Specifies whether the radiobutton is in error state
+         */
+        error: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                selectors: {
+                    "&:has(input:disabled)": {
+                        opacity: "50%";
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:has(input:checked)": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:has(input:checked):after": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:hover:before": {
+                        opacity: number;
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:active:before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        };
+    }>;
+    input: string;
+    container: string;
+};
+
+export { styles };

package/dist/packages/input/radioButton/rarui-radioButton.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-radioButton.css";import{c as r}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var a={radioButton:r({defaultClassName:"rarui-radioButton__1d9isw70",variantClassNames:{size:{small:"rarui-radioButton_size_small__1d9isw71",large:"rarui-radioButton_size_large__1d9isw72"},error:{true:"rarui-radioButton_error_true__1d9isw73"}},defaultVariants:{},compoundVariants:[]}),input:"rarui-radioButton_input__1d9isw75",container:"rarui-radioButton_container__1d9isw74"};export{a as styles};

package/dist/packages/input/radioButton/rarui-radioButton.types.d.ts

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

package/dist/packages/input/select/index.d.ts

@@ -0,0 +1,67 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const select: {
+    classnames: {
+        select: RuntimeFn<{
+            appearance: {
+                success: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":focus": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":active": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                error: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":focus": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":active": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            size: {
+                large: {
+                    height: "3rem";
+                };
+                medium: {
+                    height: "2.5rem";
+                };
+                small: {
+                    height: "2rem";
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                };
+            };
+        }>;
+        list: string;
+        close: string;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            maxHeight: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "maxHeight";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { select };

package/dist/packages/input/select/index.js

@@ -0,0 +1 @@
+import{selectSprinkle as s,selectStyles as r}from"./rarui-select.css.js";var e={classnames:r,sprinkle:s};export{e as select};