import { IconComponent } from '@maz-ui/icons';
import { HTMLAttributes, InputHTMLAttributes } from 'vue';
import { MazColor, MazSize } from './types';
export type MazInputValue = string | number | null | undefined | boolean;
export interface MazInputProps<T = MazInputValue> {
    /**
     * Inline styles to apply to the component root element
     * @type {HTMLAttributes['style']}
     */
    style?: HTMLAttributes['style'];
    /**
     * CSS classes to apply to the component root element
     * @type {HTMLAttributes['class']}
     */
    class?: HTMLAttributes['class'];
    /**
     * The current value of the input field. This prop is used for two-way data binding with v-model
     * @model
     * @type {T}
     * @example <MazInput v-model="inputValue" />
     */
    modelValue?: T | undefined;
    /**
     * Text displayed when the input is empty to guide the user
     * @type {string}
     * @example "Enter your email address"
     */
    placeholder?: InputHTMLAttributes['placeholder'];
    /**
     * Floating label that appears inside the input and moves up when focused or filled.
     * Provides better UX than traditional placeholders
     * @type {string}
     * @example "Email Address"
     */
    label?: string;
    /**
     * Static label displayed above the input field. Unlike the floating label, this remains fixed
     * @type {string}
     * @example "User Information"
     */
    topLabel?: string;
    /**
     * Helper text displayed below the input to provide additional context or validation feedback
     * @type {string}
     * @example "Must contain at least 8 characters"
     */
    assistiveText?: string;
    /**
     * Theme color that affects the border and focus states of the input
     * @values primary, secondary, accent, info, success, warning, destructive, contrast
     * @type {MazColor}
     * @example "primary"
     */
    color?: MazColor;
    /**
     * HTML input type attribute that determines the input behavior and validation
     * @type {InputHTMLAttributes['type']}
     * @values text, password, email, number, tel, url, search, date, time, datetime-local, month, week
     * @example "email"
     */
    type?: InputHTMLAttributes['type'];
    /**
     * Makes the input field mandatory for form submission
     * @type {boolean}
     * @example true
     */
    required?: boolean;
    /**
     * Disables the input field, preventing user interaction and form submission
     * @type {boolean}
     * @example false
     */
    disabled?: boolean;
    /**
     * Makes the input field read-only, allowing selection but preventing modification
     * @type {boolean}
     * @example false
     */
    readonly?: boolean;
    /**
     * Unique identifier for the input element, used for form labels and accessibility
     * @type {string}
     * @example "user-email"
     */
    id?: string;
    /**
     * Applies error styling (red border and text) to indicate validation failure
     * @type {boolean}
     * @example true
     */
    error?: boolean;
    /**
     * Applies success styling (green border and text) to indicate successful validation
     * @type {boolean}
     * @example true
     */
    success?: boolean;
    /**
     * Applies warning styling (orange border and text) to indicate potential issues
     * @type {boolean}
     * @example true
     */
    warning?: boolean;
    /**
     * Alternative text that replaces the label when provided. Useful for contextual hints
     * @type {string}
     * @example "Optional field"
     */
    hint?: string;
    /**
     * Additional CSS classes to apply specifically to the input wrapper element
     * @type {string}
     * @example "custom-input-wrapper"
     */
    inputClasses?: string;
    /**
     * Controls whether the input has a visible border. Set to false for borderless inputs
     * @type {boolean}
     * @example true
     */
    border?: boolean;
    /**
     * HTML inputmode attribute that provides hints for virtual keyboards on mobile devices
     * @type {InputHTMLAttributes['inputmode']}
     * @values text, numeric, decimal, tel, search, email, url
     * @example "numeric"
     */
    inputmode?: InputHTMLAttributes['inputmode'];
    /**
     * Controls the height and text size of the input component
     * @values xs, sm, md, lg, xl, mini
     * @type {MazSize}
     * @example "md"
     */
    size?: MazSize;
    /**
     * Enables input debouncing to limit the frequency of value updates.
     * When true, uses 500ms delay. When a number, uses that value as delay in milliseconds
     * @type {boolean | number}
     * @example true
     * @example 300
     */
    debounce?: boolean | number;
    /**
     * Automatically focuses the input when the component mounts
     * @type {boolean}
     * @example false
     */
    autoFocus?: boolean;
    /**
     * When true, shows the colored border immediately instead of only on focus
     * @type {boolean}
     * @example false
     */
    borderActive?: boolean;
    /**
     * Icon displayed on the left side of the input. Can be an icon name string or icon component
     * @type {string | IconComponent}
     * @example "user"
     * @example UserIcon
     */
    leftIcon?: string | IconComponent;
    /**
     * Icon displayed on the right side of the input. Can be an icon name string or icon component
     * @type {string | IconComponent}
     * @example "search"
     * @example SearchIcon
     */
    rightIcon?: string | IconComponent;
    /**
     * Controls the border radius of the input component
     * @values none, sm, md, lg, xl, full
     * @type {'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base'}
     * @default 'base'
     * @example "lg"
     */
    roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'base';
    /**
     * Makes the input expand to the full width of its container
     * @type {boolean}
     * @example false
     */
    block?: boolean;
    /**
     * The name of the input field. Used for form submission and validation
     * @type {string}
     * @example "email"
     */
    name?: string;
    /**
     * The autocomplete attribute for the input field. Used for form submission and validation
     * @type {string}
     * @example "email"
     */
    autocomplete?: string;
    /**
     * Loading state for the input field. Used to show a loading spinner
     * @note Spinner can be replace with the `loader` slot
     * @default false
     */
    loading?: boolean;
}
declare const _default: <T extends MazInputValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
        readonly onBlur?: ((event: Event) => any) | undefined;
        readonly onChange?: ((event: Event) => any) | undefined;
        readonly onClick?: ((event: Event) => any) | undefined;
        readonly onFocus?: ((event: Event) => any) | undefined;
        readonly onInput?: ((event: Event) => any) | undefined;
        readonly "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClick" | "onUpdate:model-value"> & MazInputProps<T> & Partial<{}>> & import('vue').PublicProps;
    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
    attrs: any;
    slots: {
        'left-icon'?(_: {}): any;
        'right-icon'?(_: {}): any;
        loader?(_: {}): any;
    };
    emit: ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "click", event: Event) => void) & ((evt: "focus", event: Event) => void) & ((evt: "input", event: Event) => void) & ((evt: "update:model-value", value?: T | undefined) => void);
}>) => import('vue').VNode & {
    __ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_PrettifyLocal<T> = {
    [K in keyof T]: T[K];
} & {};