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

declare const inputRecipe: _nex_ui_system.SlotRecipeRuntimeFn<{
    root: {
        boxSizing: "border-box";
        transition: "colors";
        display: "inline-flex";
        alignItems: "center";
        gap: "1";
        cursor: "text";
        position: "relative";
        px: "3";
    };
    input: {
        outline: "none";
        border: "none";
        fs: "inherit";
        bg: "transparent";
        color: "inherit";
        flex: number;
        cursor: "inherit";
        w: "full";
        p: number;
        '::placeholder': {
            color: "inherit";
        };
        '::WebkitSearchCancelButton': {
            WebkitAppearance: string;
            appearance: string;
        };
    };
    clearBtn: {
        padding: number;
        w: "auto";
        h: "auto";
        fs: "inherit";
    };
    label: {
        position: "absolute";
        transformOrigin: "top left";
        pointerEvents: "none";
        transition: "colors";
    };
    prefix: {
        display: "flex";
        alignItems: "center";
        pointerEvents: "none";
    };
    suffix: {
        display: "flex";
        alignItems: "center";
        pointerEvents: "none";
    };
}, {
    size: {
        sm: {
            root: {
                fs: "md";
                h: "8";
            };
            input: {
                py: "2";
            };
        };
        md: {
            root: {
                fs: "lg";
                h: "10";
            };
            input: {
                py: "2.5";
            };
        };
        lg: {
            root: {
                fs: "lg";
                h: "12";
            };
            input: {
                py: "3";
            };
        };
    };
    fullWidth: {
        readonly true: {
            root: {
                readonly w: "100%";
            };
        };
    };
    radius: {
        readonly sm: {
            root: {
                readonly borderRadius: "md";
            };
        };
        readonly md: {
            root: {
                readonly borderRadius: "lg";
            };
        };
        readonly lg: {
            root: {
                readonly borderRadius: "xl";
            };
        };
        readonly full: {
            root: {
                readonly borderRadius: "full";
            };
        };
        readonly none: {
            root: {
                readonly borderRadius: "none";
            };
        };
    };
    color: {
        readonly blue: {
            input: {
                readonly colorPalette: "blue";
            };
            label: {
                readonly colorPalette: "blue";
            };
            root: {
                readonly colorPalette: "blue";
            };
        };
        readonly gray: {
            input: {
                readonly colorPalette: "gray";
            };
            label: {
                readonly colorPalette: "gray";
            };
            root: {
                readonly colorPalette: "gray";
            };
        };
        readonly pink: {
            input: {
                readonly colorPalette: "pink";
            };
            label: {
                readonly colorPalette: "pink";
            };
            root: {
                readonly colorPalette: "pink";
            };
        };
        readonly purple: {
            input: {
                readonly colorPalette: "purple";
            };
            label: {
                readonly colorPalette: "purple";
            };
            root: {
                readonly colorPalette: "purple";
            };
        };
        readonly cyan: {
            input: {
                readonly colorPalette: "cyan";
            };
            label: {
                readonly colorPalette: "cyan";
            };
            root: {
                readonly colorPalette: "cyan";
            };
        };
        readonly orange: {
            input: {
                readonly colorPalette: "orange";
            };
            label: {
                readonly colorPalette: "orange";
            };
            root: {
                readonly colorPalette: "orange";
            };
        };
        readonly yellow: {
            input: {
                readonly colorPalette: "yellow";
            };
            label: {
                readonly colorPalette: "yellow";
            };
            root: {
                readonly colorPalette: "yellow";
            };
        };
        readonly green: {
            input: {
                readonly colorPalette: "green";
            };
            label: {
                readonly colorPalette: "green";
            };
            root: {
                readonly colorPalette: "green";
            };
        };
        readonly red: {
            input: {
                readonly colorPalette: "red";
            };
            label: {
                readonly colorPalette: "red";
            };
            root: {
                readonly colorPalette: "red";
            };
        };
    };
    variant: {
        outlined: {
            root: {
                border: "md";
                borderColor: "gray.highlight";
                ':hover': {
                    borderColor: "gray.secondary";
                };
                _focusWithin: {
                    borderColor: string;
                };
            };
        };
        filled: {
            root: {
                bg: "colorPalette.muted";
                ':hover': {
                    bg: "colorPalette.subtle";
                };
                _focusWithin: {
                    bg: string;
                };
            };
            label: {
                color: "colorPalette.primary";
            };
            input: {
                color: "colorPalette.primary";
                transition: "colors";
            };
        };
        underlined: {
            root: {
                px: "1.5";
                '::before': {
                    content: "\"\"";
                    position: "absolute";
                    bottom: number;
                    left: number;
                    w: "100%";
                    h: "1px";
                    bg: "gray.highlight";
                };
                '::after': {
                    content: "\"\"";
                    position: "absolute";
                    bottom: number;
                    left: "50%";
                    transform: "translateX(-50%)";
                    width: number;
                    h: "2px";
                    bg: "colorPalette.primary";
                    transition: "width 0.2s ease";
                };
                _focusWithin: {
                    '::after': {
                        width: string;
                    };
                };
            };
        };
    };
    disabled: {
        true: {
            root: {
                pointerEvents: "none";
                opacity: number;
            };
        };
    };
    invaild: {
        true: {};
    };
    labelPlacement: {
        'float-outside': {
            label: {
                "&:has(+ *:is(:focus-within, [data-focus-within=true]))": {
                    insetInlineStart: string;
                    insetBlockStart: string;
                };
            };
        };
        outside: {
            label: {
                insetInlineStart: "0";
                insetBlockStart: "-1em";
                transform: "translateY(-50%)";
            };
        };
        'float-inside': {
            label: {
                "&:has(+ *:is(:focus-within, [data-focus-within=true]))": {
                    transform: string;
                };
            };
            input: {
                pb: number;
            };
        };
        inside: {
            label: {
                insetBlockStart: "50%";
                transform: "translateY(-90%) scale(0.8)";
            };
            input: {
                pb: number;
            };
        };
    };
}>;
type InputRecipe = typeof inputRecipe;
type InputVariants = RecipeVariants<InputRecipe>;

export { inputRecipe };
export type { InputRecipe, InputVariants };