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

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

@@ -0,0 +1,91 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const button: {
+    classnames: {
+        button: RuntimeFn<{
+            full: {
+                true: {
+                    width: "100%";
+                };
+            };
+            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})`;
+                };
+                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: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "3rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                medium: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "2.5rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                    height: "2rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            variant: {
+                solid: {
+                    selectors: {
+                        "&:hover:after": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:active:after": {
+                            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                    };
+                };
+                outlined: {
+                    backgroundColor: "transparent";
+                };
+                text: {
+                    backgroundColor: "transparent";
+                    textDecoration: "underline";
+                    borderColor: "transparent";
+                };
+                tonal: {
+                    borderColor: "transparent";
+                };
+            };
+        }>;
+    };
+};
+
+export { button };

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

@@ -0,0 +1,105 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const buttonStyles: {
+    button: RuntimeFn<{
+        /**
+         * Specifies whether the button should take up the full width of its container.
+         * This variant is useful when you want to make a button span the entire width of its parent container.
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Defines the appearance variants for the button component.
+         * Each appearance variant corresponds to a specific background color, border color, and text color.
+         */
+        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})`;
+            };
+            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})`;
+            };
+        };
+        /**
+         * Defines the size of the button component.
+         * @default "large"
+         */
+        size: {
+            large: {
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "2rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Defines the visual variant of the badge, affecting its background style, border and text.
+         */
+        variant: {
+            solid: {
+                selectors: {
+                    "&:hover:after": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    "&:active:after": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            outlined: {
+                backgroundColor: "transparent";
+            };
+            text: {
+                backgroundColor: "transparent";
+                textDecoration: "underline";
+                borderColor: "transparent";
+            };
+            tonal: {
+                borderColor: "transparent";
+            };
+        };
+    }>;
+};
+
+export { buttonStyles };

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

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

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

@@ -0,0 +1,53 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const checkbox: {
+    classnames: {
+        checkbox: RuntimeFn<{
+            error: {
+                true: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":checked": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            size: {
+                medium: {
+                    width: "1.25rem";
+                    height: "1.25rem";
+                };
+                large: {
+                    width: "1.5rem";
+                    height: "1.5rem";
+                };
+            };
+            indeterminate: {
+                true: {
+                    selectors: {
+                        "&:checked:after": {
+                            top: number;
+                            bottom: number;
+                            margin: "auto";
+                            height: number;
+                            borderLeft: "none";
+                            transform: "rotate(0deg)";
+                        };
+                    };
+                };
+            };
+        }>;
+        label: RuntimeFn<{
+            error: {
+                true: {
+                    vars: {
+                        [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+        container: string;
+        overlay: string;
+    };
+};
+
+export { checkbox };

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

@@ -0,0 +1,63 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const checkboxStyles: {
+    checkbox: RuntimeFn<{
+        /**
+         * Specifies whether the checkbox is in error state
+         */
+        error: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":checked": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the checkbox
+         */
+        size: {
+            medium: {
+                width: "1.25rem";
+                height: "1.25rem";
+            };
+            large: {
+                width: "1.5rem";
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether the checkbox is indeterminate state
+         */
+        indeterminate: {
+            true: {
+                selectors: {
+                    "&:checked:after": {
+                        top: number;
+                        bottom: number;
+                        margin: "auto";
+                        height: number;
+                        borderLeft: "none";
+                        transform: "rotate(0deg)";
+                    };
+                };
+            };
+        };
+    }>;
+    label: RuntimeFn<{
+        /**
+         * Specifies whether the label is in error state
+         */
+        error: {
+            true: {
+                vars: {
+                    [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+    container: string;
+    overlay: string;
+};
+
+export { checkboxStyles };

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

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

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

@@ -0,0 +1,93 @@
+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 chip: {
+    classnames: {
+        chip: RuntimeFn<{
+            pill: {
+                true: {
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            selected: {
+                true: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            size: {
+                medium: {
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    height: "2rem";
+                };
+                small: {
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    height: "1.5rem";
+                };
+            };
+            textOverflow: {
+                true: {
+                    minWidth: "auto";
+                    width: "100%";
+                };
+            };
+        }>;
+        content: RuntimeFn<{
+            textOverflow: {
+                true: {
+                    textOverflow: "ellipsis";
+                    whiteSpace: "nowrap";
+                    width: "100%";
+                    display: "block";
+                    overflow: "hidden";
+                };
+            };
+        }>;
+        close: string;
+        overlay: string;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            padding: {
+                values: {
+                    medium: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    small: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    medium: string;
+                    small: string;
+                };
+                name: "padding";
+            };
+        };
+    } & {
+        config: {
+            textTransform: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "textTransform";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { chip };

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

@@ -0,0 +1,75 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const chipStyles: {
+    chip: RuntimeFn<{
+        /**
+         * Specifies whether the chip will be displayed in the pill shape
+         */
+        pill: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies whether the chip is selected
+         */
+        selected: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the chip
+         */
+        size: {
+            medium: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                height: "2rem";
+            };
+            small: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         */
+        textOverflow: {
+            true: {
+                minWidth: "auto";
+                width: "100%";
+            };
+        };
+    }>;
+    content: RuntimeFn<{
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         */
+        textOverflow: {
+            true: {
+                textOverflow: "ellipsis";
+                whiteSpace: "nowrap";
+                width: "100%";
+                display: "block";
+                overflow: "hidden";
+            };
+        };
+    }>;
+    close: string;
+    overlay: string;
+};
+declare const paddingProperties: {
+    medium: string;
+    small: string;
+};
+
+export { chipStyles, paddingProperties };

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

@@ -0,0 +1,15 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { paddingProperties, chipStyles } from './rarui-chip.css.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+
+type ChipVariants = NonNullable<RecipeVariants<typeof chipStyles.chip>>;
+type ChipDynamicProperties = Pick<StandardLonghandProperties, "textTransform">;
+interface ChipSprinkle extends ChipDynamicProperties {
+    /**
+     * The padding properties are used to generate space around an chip's content area.
+     */
+    padding?: AddDollar<keyof typeof paddingProperties> | Conditions<AddDollar<keyof typeof paddingProperties>>;
+}
+
+export type { ChipSprinkle, ChipVariants };

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

@@ -0,0 +1,10 @@
+declare const datepicker: {
+    classnames: {
+        datepicker: string;
+        day: string;
+        weekday: string;
+        time: string;
+    };
+};
+
+export { datepicker };

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

@@ -0,0 +1,112 @@
+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 dropdown: {
+    classnames: {
+        dropdown: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+        item: RuntimeFn<{
+            selected: {
+                true: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            zIndex: {
+                values: {
+                    100: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    200: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    300: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    400: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    500: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    600: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    700: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    800: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    900: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "zIndex";
+            };
+        };
+    } & {
+        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>;
+                };
+            };
+            maxWidth: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "maxWidth";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { dropdown };

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

@@ -0,0 +1,30 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const dropdownStyles: {
+    dropdown: RuntimeFn<{
+        /**
+         * Specifies the padding inside the dropdown menu. This prop accepts one of the following values: "base" or "none".
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+};
+
+export { dropdownStyles };