@nex-ui/react/dist/types/theme/recipes/switch.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 switchRecipe: _nex_ui_system.SlotRecipeRuntimeFn<{
    root: {
        display: "inline-flex";
        position: "relative";
        h: number;
        alignItems: "center";
        cursor: "pointer";
    };
    input: {
        position: "absolute";
        inset: number;
        opacity: number;
        m: number;
        zIndex: number;
        _focusVisible: {
            '& + *': {
                outline: string;
                outlineOffset: string;
            };
        };
    };
    track: {
        bg: {
            _DEFAULT: "gray.200";
            _dark: "gray.500";
        };
        display: "inline-flex";
        borderRadius: "full";
        alignItems: "center";
        boxSizing: "border-box";
        transition: "colors";
        overflow: "hidden";
        position: "relative";
        px: "1";
    };
    thumb: {
        bg: "white";
        borderRadius: "inherit";
        transition: "margin";
        display: "flex";
        justifyContent: "center";
        alignItems: "center";
    };
    startIcon: {
        display: "flex";
        alignItems: "center";
        justifyContent: "center";
        position: "absolute";
        transition: "scale";
        insetInlineStart: "1";
        opacity: number;
        scale: number;
    };
    endIcon: {
        display: "flex";
        alignItems: "center";
        justifyContent: "center";
        position: "absolute";
        transition: "transform";
        insetInlineEnd: "1";
    };
    label: {
        ml: "2";
    };
}, {
    color: {
        readonly blue: {
            track: {
                readonly colorPalette: "blue";
            };
        };
        readonly gray: {
            track: {
                readonly colorPalette: "gray";
            };
        };
        readonly pink: {
            track: {
                readonly colorPalette: "pink";
            };
        };
        readonly purple: {
            track: {
                readonly colorPalette: "purple";
            };
        };
        readonly cyan: {
            track: {
                readonly colorPalette: "cyan";
            };
        };
        readonly orange: {
            track: {
                readonly colorPalette: "orange";
            };
        };
        readonly yellow: {
            track: {
                readonly colorPalette: "yellow";
            };
        };
        readonly green: {
            track: {
                readonly colorPalette: "green";
            };
        };
        readonly red: {
            track: {
                readonly colorPalette: "red";
            };
        };
    };
    size: {
        sm: {
            track: {
                w: "10";
                h: "6";
                fs: "sm";
            };
            thumb: {
                w: "4";
                h: "4";
            };
            startIcon: {
                w: "4";
                h: "4";
            };
            endIcon: {
                w: "4";
                h: "4";
            };
            label: {
                fs: "md";
            };
        };
        md: {
            track: {
                w: "12";
                h: "7";
                fs: "lg";
            };
            thumb: {
                w: "5";
                h: "5";
            };
            startIcon: {
                w: "5";
                h: "5";
            };
            endIcon: {
                w: "5";
                h: "5";
            };
            label: {
                fs: "lg";
            };
        };
        lg: {
            track: {
                w: "14";
                h: "8";
                fs: "xl";
            };
            thumb: {
                w: "6";
                h: "6";
            };
            startIcon: {
                w: "6";
                h: "6";
            };
            endIcon: {
                w: "6";
                h: "6";
            };
            label: {
                fs: "xl";
            };
        };
    };
    checked: {
        true: {
            thumb: {
                ml: "50%";
            };
            track: {
                bg: "colorPalette.primary";
            };
            startIcon: {
                opacity: number;
                scale: "1";
            };
            endIcon: {
                opacity: number;
                transform: "translateX(100%)";
            };
        };
    };
    disabled: {
        true: {
            root: {
                opacity: number;
                pointerEvents: "none";
            };
        };
    };
}>;
type SwitchRecipe = typeof switchRecipe;
type SwitchVariants = RecipeVariants<SwitchRecipe>;

export { switchRecipe };
export type { SwitchRecipe, SwitchVariants };