@furystack/shades-common-components/esm/components/inputs/input.d.ts

Common UI components for FuryStack Shades

import type { PartialElement } from '@furystack/shades';
import type { Palette } from '../../services/theme-provider-service.js';
import type { ComponentSize } from '../component-size.js';
export type ValidInputValidationResult = {
    isValid: true;
};
export type InvalidInputValidationResult = {
    isValid: false;
    message: string;
};
export type InputValidationResult = ValidInputValidationResult | InvalidInputValidationResult;
export interface TextInputProps extends Omit<PartialElement<HTMLInputElement>, 'size'> {
    /**
     * Callback that will be called when the input value changes
     */
    onTextChange?: (text: string) => void;
    /**
     * An optional label title element or string
     */
    labelTitle?: JSX.Element | string;
    /**
     * Optional props for the label element
     */
    labelProps?: PartialElement<HTMLLabelElement>;
    /**
     * Boolean that indicates if the field will be focused automatically
     */
    autofocus?: boolean;
    /**
     * The variant of the input
     */
    variant?: 'contained' | 'outlined';
    /**
     * The size of the input.
     * @default 'medium'
     */
    size?: ComponentSize;
    /**
     * The default color of the input (Error color will be used in case of invalid input value)
     */
    defaultColor?: keyof Palette;
    /**
     * Callback for retrieving the custom validation result
     * @returns The custom validation state
     */
    getValidationResult?: (options: {
        state: TextInputState;
    }) => InputValidationResult;
    /**
     * Optional callback for the helper text
     */
    getHelperText?: (options: {
        state: TextInputState;
        validationResult?: InputValidationResult;
    }) => JSX.Element | string;
    /**
     * Optional callback for retrieving an icon element on the left side of the input field
     */
    getStartIcon?: (options: {
        state: TextInputState;
        validationResult?: InputValidationResult;
    }) => JSX.Element | string;
    /**
     * Optional callback for retrieving an icon element on the right side of the input field
     */
    getEndIcon?: (options: {
        state: TextInputState;
        validationResult?: InputValidationResult;
    }) => JSX.Element | string;
}
declare global {
    interface ValidityState {
        toJSON: () => Partial<ValidityState>;
    }
}
export type TextInputState = {
    value: string;
    focused: boolean;
    validity: ValidityState;
};
export declare const Input: (props: TextInputProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=input.d.ts.map