@kloudlite/design-system/atoms/input.d.ts

A design system for building ambitious products.

import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
type InputSizes = 'md' | 'lg' | 'xl' | (undefined & NonNullable<unknown>);
export interface IInputRow {
    value?: string | number;
    extra?: JSX.Element;
    className?: string;
    textFieldClassName?: string;
    containerClassName?: string;
    error?: boolean;
    disabled?: boolean;
    label?: ReactNode;
    autoComplete?: 'off' | (undefined & NonNullable<unknown>);
    onChange?: ChangeEventHandler<HTMLInputElement>;
    message?: ReactNode;
    placeholder?: string;
    size?: InputSizes;
    name?: string;
    tabIndex?: number;
    shimmerLoading?: boolean;
    onFocus?: FocusEventHandler;
    onBlur?: FocusEventHandler;
    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
    onClick?: MouseEventHandler<HTMLTextAreaElement>;
    onMouseDown?: MouseEventHandler<HTMLTextAreaElement>;
    onPointerDown?: PointerEventHandler<HTMLTextAreaElement>;
    autoFocus?: boolean;
    focusRing?: boolean;
}
interface INumberInput extends IInputRow {
    min?: number;
    max?: number;
    step?: number;
    suffix?: ReactNode;
}
export interface ITextInput extends IInputRow {
    prefix?: ReactNode;
    suffix?: ReactNode;
    prefixIcon?: JSX.Element;
    suffixIcon?: JSX.Element;
    showclear?: boolean;
}
interface ITextArea extends IInputRow {
    rows?: string;
    prefix?: ReactNode;
    prefixIcon?: JSX.Element;
    resize?: boolean;
    cols?: string;
}
export interface ITextInputBase extends IInputRow {
    type?: 'password' | 'number' | 'text' | (undefined & NonNullable<unknown>);
    component?: any;
    showclear?: boolean;
    resize?: boolean;
    prefix?: ReactNode;
    suffix?: ReactNode;
    prefixIcon?: JSX.Element;
    suffixIcon?: JSX.Element;
    id: string;
}
export declare const TextInputBase: import("react").ForwardRefExoticComponent<ITextInputBase & import("react").RefAttributes<HTMLInputElement>>;
export declare const NumberInput: ({ suffix, value, error, onChange, label, step, ...etc }: INumberInput) => import("react/jsx-runtime").JSX.Element;
export declare const TextInput: import("react").ForwardRefExoticComponent<ITextInput & import("react").RefAttributes<HTMLInputElement>>;
export declare const TextArea: import("react").ForwardRefExoticComponent<ITextArea & import("react").RefAttributes<HTMLInputElement>>;
export declare const PasswordInput: (props: IInputRow) => import("react/jsx-runtime").JSX.Element;
export {};