@nex-ui/react/dist/types/theme/recipes/checkbox.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 checkboxGroupRecipe: _nex_ui_system.RecipeRuntimeFn<{
    orientation: {
        horizontal: {
            flexDirection: "row";
        };
        vertical: {
            flexDirection: "column";
        };
    };
}>;
declare const checkboxRecipe: _nex_ui_system.SlotRecipeRuntimeFn<{
    root: {
        display: "inline-flex";
        position: "relative";
        alignItems: "center";
        boxSizing: "border-box";
        cursor: "pointer";
        WebkitTapHighlightColor: "transparent";
        maxWidth: "fit-content";
    };
    input: {
        position: "absolute";
        inset: number;
        opacity: number;
        margin: number;
        cursor: "inherit";
        zIndex: number;
        _focusVisible: {
            '& + *::before': {
                outline: string;
                outlineOffset: string;
            };
        };
        _hover: {
            '& + *::before': {
                borderColor: string;
            };
        };
    };
    label: {
        ml: "2";
    };
    checkedIcon: {
        opacity: number;
        transition: "all 0.2s linear";
        transform: "scale(0.4)";
    };
    icon: {
        display: "inline-flex";
        position: "relative";
        justifyContent: "center";
        alignItems: "center";
        color: "colorPalette.contrastText";
        '::before': {
            content: "\"\"";
            position: "absolute";
            inset: number;
            border: "md";
            borderColor: "gray.highlight";
            transition: "colors";
            background: "transparent";
            zIndex: number;
        };
        '::after': {
            content: "\"\"";
            position: "absolute";
            inset: number;
            bg: "colorPalette.primary";
            transition: "all 0.2s linear";
            transform: "scale(0.4)";
            opacity: number;
            zIndex: number;
        };
    };
}, {
    checked: {
        true: {
            checkedIcon: {
                opacity: number;
                transform: "scale(1)";
            };
            icon: {
                '::after': {
                    opacity: number;
                    transform: "scale(1)";
                };
            };
        };
    };
    size: {
        sm: {
            root: {
                h: "6";
                p: "1";
            };
            icon: {
                w: "4";
                h: "4";
                fs: "sm";
            };
            label: {
                fs: "md";
            };
        };
        md: {
            root: {
                h: "8";
                p: "1.5";
            };
            icon: {
                w: "5";
                h: "5";
                fs: "md";
            };
            label: {
                fs: "lg";
            };
        };
        lg: {
            root: {
                h: "10";
                p: "2";
            };
            icon: {
                w: "6";
                h: "6";
                fs: "xl";
            };
            label: {
                fs: "xl";
            };
        };
    };
    radius: {
        none: {
            icon: {
                '::before': {
                    borderRadius: number;
                };
                '::after': {
                    borderRadius: number;
                };
            };
        };
        sm: {
            icon: {
                '::before': {
                    borderRadius: "calc({radii.lg} * .5)";
                };
                '::after': {
                    borderRadius: "calc({radii.lg} * .5)";
                };
            };
        };
        md: {
            icon: {
                '::before': {
                    borderRadius: "calc({radii.lg} * .6)";
                };
                '::after': {
                    borderRadius: "calc({radii.lg} * .6)";
                };
            };
        };
        lg: {
            icon: {
                '::before': {
                    borderRadius: "calc({radii.lg} * .7)";
                };
                '::after': {
                    borderRadius: "calc({radii.lg} * .7)";
                };
            };
        };
        full: {
            icon: {
                '::before': {
                    borderRadius: "full";
                };
                '::after': {
                    borderRadius: "full";
                };
            };
        };
    };
    disabled: {
        true: {
            root: {
                opacity: number;
                pointerEvents: "none";
            };
        };
    };
    indeterminate: {
        true: {
            icon: {
                '::after': {
                    opacity: number;
                    transform: "scale(1)";
                };
            };
        };
    };
    color: {
        readonly blue: {
            input: {
                readonly colorPalette: "blue";
            };
            icon: {
                readonly colorPalette: "blue";
            };
        };
        readonly gray: {
            input: {
                readonly colorPalette: "gray";
            };
            icon: {
                readonly colorPalette: "gray";
            };
        };
        readonly pink: {
            input: {
                readonly colorPalette: "pink";
            };
            icon: {
                readonly colorPalette: "pink";
            };
        };
        readonly purple: {
            input: {
                readonly colorPalette: "purple";
            };
            icon: {
                readonly colorPalette: "purple";
            };
        };
        readonly cyan: {
            input: {
                readonly colorPalette: "cyan";
            };
            icon: {
                readonly colorPalette: "cyan";
            };
        };
        readonly orange: {
            input: {
                readonly colorPalette: "orange";
            };
            icon: {
                readonly colorPalette: "orange";
            };
        };
        readonly yellow: {
            input: {
                readonly colorPalette: "yellow";
            };
            icon: {
                readonly colorPalette: "yellow";
            };
        };
        readonly green: {
            input: {
                readonly colorPalette: "green";
            };
            icon: {
                readonly colorPalette: "green";
            };
        };
        readonly red: {
            input: {
                readonly colorPalette: "red";
            };
            icon: {
                readonly colorPalette: "red";
            };
        };
    };
}>;
type CheckboxRecipe = typeof checkboxRecipe;
type CheckboxVariants = RecipeVariants<CheckboxRecipe>;
type CheckboxGroupRecipe = typeof checkboxGroupRecipe;

export { checkboxGroupRecipe, checkboxRecipe };
export type { CheckboxGroupRecipe, CheckboxRecipe, CheckboxVariants };