/**
 * Recipe configuration for the NumberInput component.
 * Defines the styling variants and base styles using Chakra UI's slot recipe system.
 */
export declare const numberInputRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "input" | "leadingElement" | "trailingElement" | "incrementButton" | "decrementButton", {
    size: {
        sm: {
            root: {
                pl: "300";
                pr: "900";
                gap: "100";
            };
            input: {
                h: "800";
                textStyle: "sm";
            };
            leadingElement: {
                "& > svg": {
                    boxSize: "400";
                };
            };
            trailingElement: {
                "& > svg": {
                    boxSize: "400";
                };
            };
        };
        md: {
            root: {
                pl: "400";
                pr: "1000";
                gap: "200";
            };
            input: {
                h: "1000";
                textStyle: "md";
            };
            leadingElement: {
                "& > svg": {
                    boxSize: "500";
                };
            };
            trailingElement: {
                "& > svg": {
                    boxSize: "500";
                };
            };
        };
    };
    variant: {
        solid: {
            root: {
                _hover: {
                    backgroundColor: "primary.2";
                };
                "--border-width": "sizes.25";
                "--border-color": "colors.neutral.7";
                backgroundColor: "neutral.1";
            };
            incrementButton: {
                "&[data-invalid='true']": {
                    borderTop: "2px solid var(--border-color)";
                    borderRight: "2px solid var(--border-color)";
                };
                borderTop: "var(--border-width) solid var(--border-color)";
                borderRight: "var(--border-width) solid var(--border-color)";
                borderLeft: "var(--border-width) solid var(--border-color)";
                boxShadow: "inset 0 -0.5px 0 0 var(--border-color)";
                _hover: {
                    backgroundColor: "primaryAlpha.4";
                };
            };
            decrementButton: {
                "&[data-invalid='true']": {
                    borderBottom: "2px solid var(--border-color)";
                    borderRight: "2px solid var(--border-color)";
                };
                borderBottom: "var(--border-width) solid var(--border-color)";
                borderRight: "var(--border-width) solid var(--border-color)";
                borderLeft: "var(--border-width) solid var(--border-color)";
                boxShadow: "inset 0 0.5px 0 0 var(--border-color)";
                _hover: {
                    backgroundColor: "primaryAlpha.4";
                };
            };
        };
        ghost: {
            root: {
                _hover: {
                    backgroundColor: "primary.2";
                };
            };
            incrementButton: {
                "&[data-invalid='true']": {
                    borderTop: "2px solid var(--border-color)";
                    borderRight: "2px solid var(--border-color)";
                };
                _hover: {
                    backgroundColor: "primaryAlpha.4";
                };
            };
            decrementButton: {
                "&[data-invalid='true']": {
                    borderBottom: "2px solid var(--border-color)";
                    borderRight: "2px solid var(--border-color)";
                };
                _hover: {
                    backgroundColor: "primaryAlpha.4";
                };
            };
        };
    };
}>;