@nex-ui/react/dist/types/theme/recipes/badge.d.ts

🎉 A beautiful, modern, and reliable React component library.

import * as _nex_ui_system from '@nex-ui/system';
import { RecipeVariants } from '@nex-ui/system';

declare const badgeRecipe: _nex_ui_system.SlotRecipeRuntimeFn<{
    root: {
        display: "inline-flex";
        alignItems: "center";
        justifyContent: "center";
        userSelect: "none";
        whiteSpace: "nowrap";
        lh: "1rem";
    };
    closeButton: {
        display: "inline-flex";
        alignItems: "center";
        justifyContent: "center";
        color: "colorPalette.tertiary";
        opacity: number;
        borderRadius: "full";
        _hover: {
            opacity: number;
        };
        _active: {
            opacity: number;
        };
        _focusVisibleRing: {
            outline: string;
        };
        mr: "-1";
        ml: "1";
        '& svg': {
            fs: string;
        };
    };
    startIcon: {
        display: "inherit";
        ml: "-1";
        mr: "1";
        '& svg': {
            fs: string;
        };
    };
    endIcon: {
        display: "inherit";
        ml: "1";
        mr: "-1";
        '& svg': {
            fs: string;
        };
    };
}, {
    size: {
        xs: {
            root: {
                fs: "xs";
                h: "4";
                px: "1.5";
            };
        };
        sm: {
            root: {
                fs: "sm";
                h: "5";
                px: "2";
            };
        };
        md: {
            root: {
                fs: "md";
                px: "2.5";
                h: "6";
            };
        };
        lg: {
            root: {
                fs: "md";
                px: "3";
                h: "7";
            };
        };
    };
    radius: {
        none: {
            root: {
                borderRadius: "none";
            };
        };
        xs: {
            root: {
                borderRadius: "xs";
            };
        };
        sm: {
            root: {
                borderRadius: "sm";
            };
        };
        md: {
            root: {
                borderRadius: "md";
            };
        };
        lg: {
            root: {
                borderRadius: "lg";
            };
        };
        full: {
            root: {
                borderRadius: "full";
            };
        };
    };
    color: {
        readonly blue: {
            root: {
                readonly colorPalette: "blue";
            };
            closeButton: {
                readonly colorPalette: "blue";
            };
        };
        readonly gray: {
            root: {
                readonly colorPalette: "gray";
            };
            closeButton: {
                readonly colorPalette: "gray";
            };
        };
        readonly pink: {
            root: {
                readonly colorPalette: "pink";
            };
            closeButton: {
                readonly colorPalette: "pink";
            };
        };
        readonly purple: {
            root: {
                readonly colorPalette: "purple";
            };
            closeButton: {
                readonly colorPalette: "purple";
            };
        };
        readonly cyan: {
            root: {
                readonly colorPalette: "cyan";
            };
            closeButton: {
                readonly colorPalette: "cyan";
            };
        };
        readonly orange: {
            root: {
                readonly colorPalette: "orange";
            };
            closeButton: {
                readonly colorPalette: "orange";
            };
        };
        readonly yellow: {
            root: {
                readonly colorPalette: "yellow";
            };
            closeButton: {
                readonly colorPalette: "yellow";
            };
        };
        readonly green: {
            root: {
                readonly colorPalette: "green";
            };
            closeButton: {
                readonly colorPalette: "green";
            };
        };
        readonly red: {
            root: {
                readonly colorPalette: "red";
            };
            closeButton: {
                readonly colorPalette: "red";
            };
        };
    };
    variant: {
        solid: {
            root: {
                bg: "colorPalette.primary";
                color: "colorPalette.contrastText";
            };
            closeButton: {
                color: "colorPalette.contrastText";
                _focusVisibleRing: {
                    outline: string;
                };
            };
        };
        outlined: {
            root: {
                bg: "transparent";
                border: "sm";
                borderColor: "colorPalette.primary";
                color: "colorPalette.tertiary";
            };
        };
        faded: {
            root: {
                bg: "colorPalette.subtle";
                color: "colorPalette.tertiary";
            };
        };
        subtle: {
            root: {
                bg: "colorPalette.subtle";
                color: "colorPalette.tertiary";
                border: "sm";
                borderColor: "colorPalette.highlight";
            };
        };
    };
    disabled: {
        true: {
            root: {
                opacity: number;
                pointerEvents: "none";
            };
        };
    };
}>;
type BadgeRecipe = typeof badgeRecipe;
type BadgeVariants = RecipeVariants<BadgeRecipe>;

export { badgeRecipe };
export type { BadgeRecipe, BadgeVariants };