@ultraviolet/form 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,669 @@
+export { FieldArray, useFieldArray } from 'react-final-form-arrays';
+import { FieldSubscription, AnyObject, FieldValidator, FieldState } from 'final-form';
+export { FORM_ERROR, FormApi } from 'final-form';
+import { UseFieldConfig, FieldMetaState, FormRenderProps, FormProps as FormProps$1 } from 'react-final-form';
+export { Field, FormSpy, useField, useForm, useFormState } from 'react-final-form';
+import * as react from 'react';
+import { ReactNode, ComponentProps, FocusEvent, JSX, ForwardedRef, FocusEventHandler } from 'react';
+import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
+import { DateInput, Radio, SelectInput, SelectableCard, NumberInput, TagInput, TextInput, TimeInput, Toggle, Button } from '@ultraviolet/ui';
+import { CSSObject, Theme, css } from '@emotion/react';
+import Select, { GroupBase, OptionProps, Props, CommonProps } from 'react-select';
+
+type FormErrorFunctionParams<InputValue = unknown> = {
+    label: string;
+    name: string;
+    value: InputValue;
+    allValues: AnyObject;
+    meta?: FieldMetaState<InputValue>;
+};
+type RequiredErrors = {
+    TOO_LOW: ((params: FormErrorFunctionParams & {
+        min: number;
+    }) => string) | string;
+    TOO_HIGH: ((params: FormErrorFunctionParams & {
+        max: number;
+    }) => string) | string;
+    MIN_LENGTH: ((params: FormErrorFunctionParams & {
+        minLength: number;
+    }) => string) | string;
+    MAX_LENGTH: ((params: FormErrorFunctionParams & {
+        maxLength: number;
+    }) => string) | string;
+    REGEX: ((params: FormErrorFunctionParams & {
+        regex: (RegExp | RegExp[])[];
+    }) => string) | string;
+    REQUIRED: ((params: FormErrorFunctionParams) => string) | string;
+    MAX_DATE: ((params: FormErrorFunctionParams & {
+        maxDate: Date;
+    }) => string) | string;
+    MIN_DATE: ((params: FormErrorFunctionParams & {
+        minDate: Date;
+    }) => string) | string;
+};
+type FormErrors = RequiredErrors;
+type ValidatorProps = {
+    required?: boolean;
+    min?: number;
+    minLength?: number;
+    max?: number;
+    maxLength?: number;
+    regex?: (RegExp | RegExp[])[];
+    maxDate?: Date;
+    minDate?: Date;
+};
+type ValidatorObject<InputValue = unknown> = {
+    validate: (value: InputValue, allValues?: AnyObject, meta?: FieldMetaState<InputValue>) => boolean;
+    error: keyof RequiredErrors;
+};
+type BaseFieldProps<FieldValue, InputValue = unknown> = {
+    parse?: UseFieldConfig<FieldValue, InputValue>['parse'];
+    format?: UseFieldConfig<FieldValue, InputValue>['format'];
+    formatOnBlur?: boolean;
+    subscription?: FieldSubscription;
+    validateFields?: string[];
+    defaultValue?: FieldValue;
+    data?: AnyObject;
+    allowNull?: boolean;
+    initialValue?: FieldValue;
+    multiple?: boolean;
+    isEqual?: (a: InputValue, b: InputValue) => boolean;
+    validate?: FieldValidator<FieldValue>;
+    afterSubmit?: () => void;
+    beforeSubmit?: () => void | boolean;
+    value?: FieldValue;
+};
+
+declare const CheckboxField: react.ForwardRefExoticComponent<BaseFieldProps<string, string> & Partial<Pick<({
+    error?: ReactNode;
+    size?: number | undefined;
+    progress?: boolean | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | "indeterminate" | undefined;
+    className?: string | undefined;
+    "data-visibility"?: string | undefined;
+    required?: boolean | undefined;
+    'data-testid'?: string | undefined;
+} & Pick<react.InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange"> & (({
+    "aria-label"?: undefined;
+} & {
+    children: ReactNode;
+}) | ({
+    children?: undefined;
+} & {
+    'aria-label': string;
+}))) & react.RefAttributes<HTMLInputElement>, "value" | "disabled" | "progress" | "onFocus" | "onBlur" | "onChange" | "size" | "data-testid">> & {
+    name: string;
+    label?: string | undefined;
+    className?: string | undefined;
+    children?: ReactNode;
+    required?: boolean | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type DateFieldProps = BaseFieldProps<Date> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus'> & {
+    name: string;
+    maxDate?: Date;
+    minDate?: Date;
+    disabled?: boolean;
+    required?: boolean;
+    locale?: string;
+    onChange?: (value: Date | null) => void;
+    onBlur?: (event: FocusEvent<HTMLElement>) => void;
+    onFocus?: (value: FocusEvent<HTMLElement>) => void;
+    autoFocus?: boolean;
+};
+declare const DateField: ({ required, name, label, validate, format, locale, maxDate, minDate, initialValue, disabled, value: inputVal, onChange, onBlur, onFocus, formatOnBlur, autoFocus, "data-testid": dataTestId, }: DateFieldProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type FormProps<FormValues = unknown> = {
+    children?: ((props: FormRenderProps<FormValues, Partial<FormValues>>) => ReactNode) | ReactNode;
+    errors: FormErrors;
+    /**
+     * onRawSubmit is the base onSubmit from final-form
+     */
+    onRawSubmit: FormProps$1<FormValues, Partial<FormValues>>['onSubmit'];
+    initialValues?: Partial<FormValues>;
+    validateOnBlur?: FormProps$1<FormValues, Partial<FormValues>>['validateOnBlur'];
+    validate?: FormProps$1<FormValues, Partial<FormValues>>['validate'];
+    /**
+     * The form name attribute
+     */
+    name?: string;
+    render?: FormProps$1<FormValues, Partial<FormValues>>['render'];
+    mutators?: FormProps$1<FormValues, Partial<FormValues>>['mutators'];
+    keepDirtyOnReinitialize?: boolean;
+    className?: string;
+};
+declare const Form: <FormValues>({ children, onRawSubmit, errors, initialValues, validateOnBlur, validate, name, render, mutators, keepDirtyOnReinitialize, className, }: FormProps<FormValues>) => JSX.Element;
+
+type RadioValue = NonNullable<ComponentProps<typeof Radio>['value']>;
+type RadioFieldProps<T = RadioValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'size' | 'value' | 'data-testid'>> & {
+    children?: ReactNode;
+    className?: string;
+    label?: string;
+    name: string;
+    required?: boolean;
+};
+declare const RadioField: ({ children, className, "data-testid": dataTestId, disabled, id, label, name, onBlur, onChange, onFocus, required, size, validate, value, }: RadioFieldProps) => JSX.Element;
+
+type SelectOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    description?: string;
+    inlineDescription?: string;
+};
+type WithSelectProps = {
+    selectProps: SelectProps;
+};
+type SelectStyleProps = {
+    error?: string;
+    /**
+     * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
+     */
+    customStyle: (state: SelectProps & WithSelectProps) => Record<string, CSSObject>;
+    animation?: string;
+    /**
+     * Time of the animation
+     */
+    animationDuration?: number;
+    /**
+     * Show/hide the label inside the component
+     */
+    noTopLabel?: boolean;
+    theme: Theme;
+};
+type StyledContainerProps = {
+    isDisabled?: boolean;
+    additionalStyles?: Parameters<typeof css>[0];
+};
+type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & CommonProps<SelectOption, boolean, GroupBase<SelectOption>> & {
+    value?: string | SelectOption;
+    checked?: boolean;
+    error?: string;
+    labelId?: string;
+    required?: boolean;
+    time?: boolean;
+};
+type StateManagedSelect = typeof Select;
+type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
+    /**
+     * Name of the animation
+     */
+    animation?: string;
+    /**
+     * Play the animation when the value change
+     */
+    animationOnChange?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    innerRef?: ForwardedRef<StateManagedSelect>;
+    /**
+     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
+     */
+    customComponents?: SelectProps['components'];
+    children: ReactNode;
+    emptyState?: ComponentProps<Select>['noOptionsMessage'];
+}>;
+type SelectInputOptions = SelectProps['options'];
+type SelectInputOptionOrGroup = NonNullable<SelectInputOptions>[number];
+type SelectInputFieldProps<T extends SelectInputOptionOrGroup = SelectInputOptionOrGroup> = BaseFieldProps<T> & Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'noOptionsMessage' | 'customStyle' | 'data-testid'> & {
+    label?: string;
+    maxLength?: number;
+    minLength?: number;
+    name: string;
+};
+declare const SelectInputField: {
+    <T extends (SelectOption | GroupBase<SelectOption>) & (SelectOption | GroupBase<SelectOption>) = (SelectOption | GroupBase<SelectOption>) & (SelectOption | GroupBase<SelectOption>)>({ animation, animationDuration, animationOnChange, children, className, disabled, error: errorProp, format: formatProp, formatOnBlur, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, value, noTopLabel, noOptionsMessage, customStyle, "data-testid": dataTestId, }: SelectInputFieldProps<T>): _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+    Option: (props: Partial<OptionProps<{
+        value: string;
+        label: ReactNode;
+        disabled?: boolean | undefined;
+        description?: string | undefined;
+        inlineDescription?: string | undefined;
+    }, boolean, GroupBase<{
+        value: string;
+        label: ReactNode;
+        disabled?: boolean | undefined;
+        description?: string | undefined;
+        inlineDescription?: string | undefined;
+    }>> & {
+        value: string;
+        label: ReactNode;
+        disabled?: boolean | undefined;
+        description?: string | undefined;
+        inlineDescription?: string | undefined;
+    }>) => react.JSX.Element;
+};
+
+type SelectableCardValue = NonNullable<ComponentProps<typeof SelectableCard>['value']>;
+type SelectableCardFieldProps<T = SelectableCardValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'showTick' | 'type' | 'id' | 'children' | 'name' | 'tooltip' | 'label' | 'data-testid'>> & {
+    name: string;
+    required?: boolean;
+    className?: string;
+};
+declare const SelectableCardField: ({ name, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, validate, tooltip, id, label, "data-testid": dataTestId, }: SelectableCardFieldProps) => JSX.Element;
+
+type NumberInputValue = NonNullable<ComponentProps<typeof NumberInput>['value']>;
+type NumberInputValueFieldProps<T = NumberInputValue, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'value' | 'onChange' | 'className' | 'data-testid'>> & {
+    name: string;
+    required?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+};
+declare const NumberInputField: ({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, validate, value, className, "data-testid": dataTestId, }: NumberInputValueFieldProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+declare const SubmitErrorAlert: <FormValues>({ className, }: {
+    className?: string | undefined;
+}) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type TagInputProp = ComponentProps<typeof TagInput>['tags'];
+type TagInputFieldProps<T = TagInputProp, K = string> = BaseFieldProps<T, K> & Partial<Pick<ComponentProps<typeof TagInput>, 'tags' | 'variant' | 'onChange' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid'>> & {
+    name: string;
+    required?: boolean;
+};
+declare const TagInputField: ({ className, "data-testid": dataTestId, disabled, id, name, onChange, placeholder, required, tags, validate, variant, }: TagInputFieldProps) => JSX.Element;
+
+type TextInputValue = NonNullable<ComponentProps<typeof TextInput>['value']>;
+declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<TextInputValue, string> & Partial<Pick<({
+    'data-testid'?: string | undefined;
+    ariaControls?: string | undefined;
+    autoComplete?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    cols?: number | undefined;
+    defaultValue?: string | undefined;
+    disabled?: boolean | undefined;
+    edit?: boolean | undefined;
+    error?: string | undefined;
+    fillAvailable?: boolean | undefined;
+    generated?: boolean | undefined;
+    height?: string | number | undefined;
+    id?: string | undefined;
+    label?: string | undefined;
+    multiline?: boolean | undefined;
+    name?: string | undefined;
+    notice?: string | undefined;
+    noTopLabel?: boolean | undefined;
+    onBlur?: react.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onFocus?: react.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    placeholder?: string | undefined;
+    random?: string | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    resizable?: boolean | undefined;
+    rows?: number | undefined;
+    size?: "small" | "medium" | undefined;
+    tabIndex?: number | undefined;
+    type?: string | undefined;
+    unit?: string | undefined;
+    valid?: boolean | undefined;
+    value?: string | number | undefined;
+    wrap?: string | undefined;
+    inputProps?: {
+        error?: boolean | undefined;
+        name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
+        required?: boolean | undefined;
+        min?: string | number | undefined;
+        minLength?: number | undefined;
+        max?: string | number | undefined;
+        maxLength?: number | undefined;
+        disabled?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        multiple?: boolean | undefined;
+        type?: react.HTMLInputTypeAttribute | undefined;
+        children?: react.ReactNode;
+        className?: string | undefined;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: react.CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
+        onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        autoFocus?: boolean | undefined;
+        id?: string | undefined;
+        onChange?: react.ChangeEventHandler<HTMLInputElement> | undefined;
+        'aria-label'?: string | undefined;
+        size?: number | undefined;
+        checked?: boolean | undefined;
+        onSubmit?: react.FormEventHandler<HTMLInputElement> | undefined;
+        autoComplete?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
+        hidden?: boolean | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: react.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "off" | "on" | undefined;
+        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        is?: string | undefined;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "false" | "true") | undefined;
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-busy'?: (boolean | "false" | "true") | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | undefined;
+        'aria-colcount'?: number | undefined;
+        'aria-colindex'?: number | undefined;
+        'aria-colspan'?: number | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: boolean | "time" | "false" | "true" | "date" | "page" | "step" | "location" | undefined;
+        'aria-describedby'?: string | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "false" | "true") | undefined;
+        'aria-dropeffect'?: "link" | "move" | "none" | "copy" | "execute" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "false" | "true") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "false" | "true") | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "menu" | "false" | "true" | "grid" | "listbox" | "tree" | undefined;
+        'aria-hidden'?: (boolean | "false" | "true") | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: number | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "false" | "true") | undefined;
+        'aria-multiline'?: (boolean | "false" | "true") | undefined;
+        'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: number | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "false" | "true") | undefined;
+        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "false" | "true") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: number | undefined;
+        'aria-rowindex'?: number | undefined;
+        'aria-rowspan'?: number | undefined;
+        'aria-selected'?: (boolean | "false" | "true") | undefined;
+        'aria-setsize'?: number | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCopyCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCutCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPasteCapture?: react.ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionEndCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStartCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLInputElement> | undefined;
+        onFocusCapture?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        onBlurCapture?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        onChangeCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onBeforeInputCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onInputCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onReset?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onResetCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onSubmitCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalid?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onInvalidCapture?: react.FormEventHandler<HTMLInputElement> | undefined;
+        onLoad?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onError?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onErrorCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onKeyDown?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyDownCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPress?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyPressCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUp?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onKeyUpCapture?: react.KeyboardEventHandler<HTMLInputElement> | undefined;
+        onAbort?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onAbortCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlay?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThrough?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onCanPlayThroughCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onDurationChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptied?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onEmptiedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncrypted?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onEncryptedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onEnded?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onEndedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedData?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedDataCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadata?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadedMetadataCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStart?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onLoadStartCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onPause?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onPauseCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlay?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlaying?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onPlayingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgress?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onProgressCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onRateChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onResize?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onResizeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeked?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekedCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeeking?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSeekingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalled?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onStalledCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspend?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSuspendCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdate?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onTimeUpdateCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChange?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onVolumeChangeCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaiting?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onWaitingCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onAuxClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onAuxClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenu?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onContextMenuCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClick?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onDoubleClickCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onDrag?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnd?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEndCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnter?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragEnterCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExit?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragExitCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeave?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragLeaveCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOver?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragOverCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStart?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDragStartCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDrop?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onDropCapture?: react.DragEventHandler<HTMLInputElement> | undefined;
+        onMouseDown?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseDownCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseEnter?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseLeave?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMove?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseMoveCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOut?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOutCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOver?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseOverCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUp?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onMouseUpCapture?: react.MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onSelectCapture?: react.ReactEventHandler<HTMLInputElement> | undefined;
+        onTouchCancel?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchCancelCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEnd?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchEndCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMove?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchMoveCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStart?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onTouchStartCapture?: react.TouchEventHandler<HTMLInputElement> | undefined;
+        onPointerDown?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerDownCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMove?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerMoveCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUp?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerUpCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancel?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerCancelCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnter?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerEnterCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeave?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerLeaveCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOver?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOverCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOut?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onPointerOutCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLInputElement> | undefined;
+        onScroll?: react.UIEventHandler<HTMLInputElement> | undefined;
+        onScrollCapture?: react.UIEventHandler<HTMLInputElement> | undefined;
+        onWheel?: react.WheelEventHandler<HTMLInputElement> | undefined;
+        onWheelCapture?: react.WheelEventHandler<HTMLInputElement> | undefined;
+        onAnimationStart?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationStartCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEnd?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationEndCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIteration?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+        onAnimationIterationCapture?: react.AnimationEventHandler<HTMLInputElement> | undefined;
+        onTransitionEnd?: react.TransitionEventHandler<HTMLInputElement> | undefined;
+        onTransitionEndCapture?: react.TransitionEventHandler<HTMLInputElement> | undefined;
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+        readOnly?: boolean | undefined;
+        list?: string | undefined;
+        step?: string | number | undefined;
+        accept?: string | undefined;
+        alt?: string | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        src?: string | undefined;
+        fillAvailable?: boolean | undefined;
+        multiline?: boolean | undefined;
+        resizable?: boolean | undefined;
+        hasLabel?: boolean | undefined;
+        paddingRightFactor: number;
+        isPlaceholderVisible?: boolean | undefined;
+    } | undefined;
+    max?: string | number | undefined;
+    min?: string | number | undefined;
+} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "valid" | "value" | "required" | "minLength" | "maxLength" | "disabled" | "type" | "label" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange" | "size" | "data-testid" | "autoComplete" | "placeholder" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "noTopLabel" | "readOnly" | "cols" | "rows" | "fillAvailable" | "generated" | "multiline" | "notice" | "random" | "resizable" | "unit">> & {
+    name: string;
+    className?: string | undefined;
+    max?: number | undefined;
+    min?: number | undefined;
+    regex?: (RegExp | RegExp[])[] | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type TimeFieldProps = BaseFieldProps<Date> & ComponentProps<typeof TimeInput> & {
+    name: string;
+};
+declare const TimeField: ({ required, name, schedule, placeholder, disabled, initialValue, validate, readOnly, value, onChange, onBlur, onFocus, isLoading, isClearable, inputId, id, formatOnBlur, animation, animationDuration, animationOnChange, className, isSearchable, options, "data-testid": dataTestId, }: TimeFieldProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type ToggleFieldProps<T = unknown, K = unknown> = BaseFieldProps<T, K> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'onChange' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
+    name: string;
+    required?: boolean;
+};
+declare const ToggleField: ({ afterSubmit, allowNull, beforeSubmit, className, data, defaultValue, disabled, format, formatOnBlur, initialValue, isEqual, label, multiple, name, onChange, parse, required, size, subscription, tooltip, validate, validateFields, value, labelPosition, "data-testid": dataTestId, }: ToggleFieldProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type SubmitProps = {
+    children?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    icon?: ComponentProps<typeof Button>['icon'];
+    iconPosition?: ComponentProps<typeof Button>['iconPosition'];
+    size?: ComponentProps<typeof Button>['size'];
+    variant?: ComponentProps<typeof Button>['variant'];
+    sentiment?: ComponentProps<typeof Button>['sentiment'];
+    tooltip?: ComponentProps<typeof Button>['tooltip'];
+};
+declare const Submit: ({ children, className, disabled, icon, iconPosition, size, variant, sentiment, tooltip, }: SubmitProps) => JSX.Element;
+
+type UseValidationParams<FieldValue = unknown> = {
+    validators: ValidatorObject<FieldValue>[];
+    validate?: FieldValidator<FieldValue>;
+};
+type UseValidationResult<FieldValue = unknown> = (value: FieldValue, allValues: AnyObject, meta?: FieldState<FieldValue>) => string[] | undefined | unknown;
+declare const useValidation: <T = unknown>({ validators, validate, }: UseValidationParams<T>) => UseValidationResult<T>;
+
+type CallbackFn<FieldValue, AllValues> = (value: FieldValue, values: AllValues) => unknown;
+declare const useOnFieldChange: <FieldValue = unknown, AllValues = unknown>(name: string, callback: CallbackFn<FieldValue, AllValues>, enabled?: boolean) => void;
+
+declare const pickValidators: <InputValue = unknown>(args: ValidatorProps) => ValidatorObject<InputValue>[];
+
+type GetErrorProps = Omit<FormErrorFunctionParams, 'allValues'> & AnyObject & {
+    errorProp?: string;
+    additionalErrorChecks?: boolean;
+};
+type ErrorContextValue = {
+    errors: FormErrors;
+    getError: (props: GetErrorProps) => string | undefined;
+};
+type ErrorProviderProps = {
+    children: ReactNode;
+    errors: FormErrors;
+};
+declare const ErrorProvider: ({ children, errors, }: ErrorProviderProps) => JSX.Element;
+declare const useErrors: () => ErrorContextValue;
+
+export { BaseFieldProps, CheckboxField, DateField, ErrorProvider, Form, FormErrors, NumberInputField, RadioField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextInputField, TimeField, ToggleField, pickValidators, useErrors, useOnFieldChange, useValidation };