@start-base/react-form-elements/index.d.ts

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import React, { ElementType, ChangeEvent, ReactNode, HTMLProps, FocusEvent } from 'react';
import * as react_hook_form from 'react-hook-form';
import { FieldError } from 'react-hook-form';
import { DayPickerRangeProps, DayPickerSingleProps, DateRange } from 'react-day-picker';
import { SelectInstance, Props, GroupBase } from 'react-select';
import { Locale } from 'date-fns';

type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
interface CurrencyInputOnChangeValues {
    float: number | null;
    formatted: string;
    value: string;
}
interface IntlConfig {
    locale: string;
    currency?: string;
}
type AmountInputRootProps = Overwrite<React.ComponentPropsWithRef<'input'>, {
    allowDecimals?: boolean;
    allowNegativeValue?: boolean;
    id?: string;
    maxLength?: number;
    className?: string;
    customInput?: ElementType;
    decimalsLimit?: number;
    decimalScale?: number;
    defaultValue?: number | string;
    disabled?: boolean;
    fixedDecimalLength?: number;
    onValueChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
    placeholder?: string;
    prefix?: string;
    suffix?: string;
    step?: number;
    decimalSeparator?: string;
    groupSeparator?: string;
    disableGroupSeparators?: boolean;
    disableAbbreviations?: boolean;
    intlConfig?: IntlConfig;
    transformRawValue?: (rawValue: string) => string;
    formatValueOnBlur?: boolean;
}>;

interface AmountInputProps extends AmountInputRootProps {
    name: string;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | null;
    value?: string | number | readonly string[] | undefined;
    inputClassName?: string | null;
    labelClassName?: string | null;
    errorClassName?: string | null;
    prepend?: React.ReactNode | null;
    prependClassName?: string | null;
    append?: React.ReactNode | null;
    appendClassName?: string | null;
    disableShrink?: boolean;
    disabled?: boolean;
}
declare const AmountInput: React.ForwardRefExoticComponent<Omit<AmountInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

interface CalendarRootRangeProps extends DayPickerRangeProps {
    numberOfMonths?: number;
    classNames?: Partial<Record<string, string>>;
    calendarClassName?: string | null;
    className?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null;
}
interface CalendarRootSingleProps extends DayPickerSingleProps {
    numberOfMonths?: number;
    classNames?: Partial<Record<string, string>>;
    calendarClassName?: string | null;
    className?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null;
}

interface CalendarProps extends CalendarRootSingleProps {
    name: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string;
    value?: Date | null;
    labelClassName?: string;
    errorClassName?: string;
    calendarClassName?: string;
    disabled?: boolean;
}
declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLInputElement>>;

interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
    name: string;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    label?: ReactNode;
    checked?: boolean;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
}
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

interface Option$4 {
    value: string | number;
    label: string | React.ReactNode;
}
interface CheckboxCardsProps {
    name: string;
    onChange: (event: {
        target: {
            name: string;
            value: (string | number)[];
        };
    }) => void;
    value?: (string | number)[];
    options: Option$4[];
    label?: string | React.ReactNode | null;
    inputClassName?: string | null;
    cardClassName?: string | null;
    labelClassName?: string | null;
    optionLabelClassName?: string | null;
    errorClassName?: string | null;
    direction?: 'row' | 'column';
    hideInput?: boolean;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
}
declare const CheckboxCards: React.ForwardRefExoticComponent<CheckboxCardsProps & React.RefAttributes<HTMLInputElement>>;

interface Option$3 {
    value: string | number;
    label: string | React.ReactNode;
}
interface CheckboxGroupProps {
    name: string;
    onChange: (event: {
        target: {
            name: string;
            value: (string | number)[];
        };
    }) => void;
    value?: (string | number)[];
    options: Option$3[];
    label?: string | React.ReactNode | null;
    inputClassName?: string | null;
    labelClassName?: string | null;
    optionLabelClassName?: string | null;
    errorClassName?: string | null;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
}
declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLInputElement>>;

interface DatePickerProps extends CalendarRootSingleProps {
    name: string;
    onChange: (event: unknown) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string;
    placeholder?: string;
    value?: string | number | Date | undefined;
    locale?: any;
    format?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    calendarClassName?: string;
    prepend?: React.ReactNode;
    prependClassName?: string;
    append?: React.ReactNode;
    appendClassName?: string;
    disableShrink?: boolean;
    disabled?: boolean;
}
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

interface DateRangePickerProps extends CalendarRootRangeProps {
    name: string;
    onChange: (event: {
        target: {
            name: string;
            value: DateRange | undefined;
        };
    }) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | null;
    placeholder?: string | null;
    value?: DateRange;
    inputClassName?: string | null;
    numberOfMonths?: number;
    separator?: string;
    labelClassName?: string | null;
    errorClassName?: string | null;
    calendarClassName?: string | null;
    format?: string;
    prepend?: React.ReactNode | JSX.Element | null;
    prependClassName?: string | null;
    append?: React.ReactNode | JSX.Element | null;
    appendClassName?: string | null;
    disableShrink?: boolean;
    disabled?: boolean;
}
declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;

interface FormProps extends HTMLProps<HTMLFormElement> {
    children: ReactNode;
}
declare const Form: React.FC<FormProps>;

interface DateRangePickerInputProps {
    from: Date;
    to: Date;
}
type InputProps = {
    name: string;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | null;
    placeholder?: string | undefined;
    value?: string | boolean | number | Date | Date[] | DateRangePickerInputProps;
    inputClassName?: string | null;
    labelClassName?: string | null;
    errorClassName?: string | null;
    prepend?: React.ReactNode | JSX.Element | null;
    prependClassName?: string | null;
    append?: React.ReactNode | JSX.Element | null;
    appendClassName?: string | null;
    disableShrink?: boolean;
    disabled?: boolean;
} & React.InputHTMLAttributes<HTMLInputElement>;
declare const Input: React.ForwardRefExoticComponent<{
    name: string;
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | null;
    placeholder?: string | undefined;
    value?: string | boolean | number | Date | Date[] | DateRangePickerInputProps;
    inputClassName?: string | null;
    labelClassName?: string | null;
    errorClassName?: string | null;
    prepend?: React.ReactNode | JSX.Element | null;
    prependClassName?: string | null;
    append?: React.ReactNode | JSX.Element | null;
    appendClassName?: string | null;
    disableShrink?: boolean;
    disabled?: boolean;
} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

interface MultipleDatePickerProps extends Props {
    name: string;
    onChange: (event: {
        target: {
            name: string;
            value: Date[];
        };
    }) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | null;
    placeholder?: string | null;
    value?: Date[] | undefined;
    locale?: Locale | null;
    format?: string;
    inputClassName?: string | null;
    labelClassName?: string | null;
    errorClassName?: string | null;
    calendarClassName?: string | null;
    disableShrink?: boolean;
    disabled?: boolean;
    classNames?: any;
    components?: any;
    onFocus?: (event: React.FocusEvent) => void;
    onBlur?: (event: React.FocusEvent) => void;
    [key: string]: any;
}
declare const MultipleDatePicker: React.ForwardRefExoticComponent<Omit<MultipleDatePickerProps, "ref"> & React.RefAttributes<SelectInstance>>;

interface NumberInputProps extends InputProps {
    name: string;
    value?: string | number;
    onChange: (event: {
        target: {
            name: string;
            value: string | number;
        };
    }) => void;
}
declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

interface OTPInputProps {
    name: string;
    length: number;
    onChange: (event: {
        target: {
            name: string;
            value: string;
        };
    }) => void;
    format?: number[] | null;
    separator?: string | React.ReactElement | null;
    timer?: number | null;
    onComplete?: () => void;
    onResend?: () => void;
    value?: string;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | null;
    resendLabel?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    disabled?: boolean;
}
declare const OTPInputComponent: React.ForwardRefExoticComponent<OTPInputProps & React.RefAttributes<HTMLInputElement>>;

declare const PasswordInput: React.ForwardRefExoticComponent<{
    name: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | react_hook_form.FieldError;
    label?: string | null;
    placeholder?: string | undefined;
    value?: string | boolean | number | Date | Date[] | DateRangePickerInputProps;
    inputClassName?: string | null;
    labelClassName?: string | null;
    errorClassName?: string | null;
    prepend?: React.ReactNode | JSX.Element | null;
    prependClassName?: string | null;
    append?: React.ReactNode | JSX.Element | null;
    appendClassName?: string | null;
    disableShrink?: boolean;
    disabled?: boolean;
} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

interface PhoneInputProps extends InputProps {
    name: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    value?: string | number;
    defaultCountry?: string;
    [key: string]: any;
}
declare const PhoneInput: React.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

interface RadioProps {
    name: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    value: string;
    label?: string | React.ReactNode;
    checked?: boolean;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    [rest: string]: any;
}
declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

interface Option$2 {
    value: string;
    label: string | React.ReactNode;
}
interface RadioCardsProps {
    name: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    value?: string | null;
    options: Option$2[];
    label?: string | React.ReactNode;
    inputClassName?: string;
    cardClassName?: string;
    labelClassName?: string;
    optionLabelClassName?: string;
    direction?: 'row' | 'column';
    errorClassName?: string;
    disabled?: boolean;
    hideInput?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
}
declare const RadioCards: React.ForwardRefExoticComponent<RadioCardsProps & React.RefAttributes<HTMLInputElement>>;

interface Option$1 {
    value: string;
    label: string | React.ReactNode;
}
interface RadioGroupProps {
    name: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    value?: string | null;
    options: Option$1[];
    label?: string | React.ReactNode;
    inputClassName?: string;
    labelClassName?: string;
    optionLabelClassName?: string;
    errorClassName?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
}
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLInputElement>>;

interface SliderProps {
    name: string;
    onChange: (event: {
        target: {
            name: string;
            value: number | number[];
        };
    }) => void;
    label?: string | React.ReactNode;
    value?: number | number[] | null;
    range?: boolean;
    vertical?: boolean;
    defaultValue?: number[];
    tracksClassName?: string;
    trackClassName?: string;
    railClassName?: string;
    handleClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    [rest: string]: any;
}
declare const SliderComponent: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

interface Option {
    value: string | number;
    label: string | React.ReactNode;
}
interface SelectProps extends Props<Option, false, GroupBase<Option>> {
    name: string;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
    label?: string | React.ReactNode;
    options?: Option[];
    placeholder?: string;
    value?: Option | null;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    disableShrink?: boolean;
    disabled?: boolean;
    classNames?: Record<string, any>;
    components?: Record<string, any>;
    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
    [rest: string]: any;
}
declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<SelectInstance<Option, false, GroupBase<Option>>>>;

interface SwitchProps {
    name: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    label?: string | React.ReactNode;
    checked?: boolean;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    disabled?: boolean;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
}
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

declare const TextArea: React.ForwardRefExoticComponent<{
    name: string;
    onChange: (e: {
        target: {
            name: string;
            value: string;
        };
    }) => void;
    value?: string;
    label?: string | null;
    placeholder?: string | null;
    disabled?: boolean;
    autoGrow?: boolean;
    disableShrink?: boolean;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
    onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
    error?: boolean | string | {
        message?: string;
    } | null | undefined | FieldError;
} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;

export { AmountInput, Calendar, Checkbox, CheckboxCards, CheckboxGroup, DatePicker, DateRangePicker, Form, Input, MultipleDatePicker, NumberInput, OTPInputComponent as OTPInput, PasswordInput, PhoneInput, Radio, RadioCards, RadioGroup, Select, SliderComponent as Slider, Switch, TextArea };