@uxf/form 1.0.0-beta.146 → 1.0.0-beta.148

package/avatar-file-input/avatar-file-input.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { AvatarFileInputProps as UIAvatarFileInputProps } from "@uxf/ui/avatar-file-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FileResponse, FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<FileResponse | null>["onChange"];
 export type AvatarFileInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIAvatarFileInputProps, "isInvalid" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function AvatarFileInput<FormData extends FieldValues>(props: AvatarFileInputProps<FormData>): JSX.Element;
 export declare namespace AvatarFileInput {
     var displayName: string;
 }
+export {};

package/avatar-file-input/avatar-file-input.js

@@ -24,7 +24,12 @@ function AvatarFileInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, id: props.id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, id: props.id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value }));
 }
 exports.AvatarFileInput = AvatarFileInput;
 AvatarFileInput.displayName = "UxfFormAvatarFileInput";

package/checkbox-button/checkbox-button.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { CheckboxButtonProps as UICheckboxButtonProps } from "@uxf/ui/checkbox-button";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<boolean | undefined>["onChange"];
 export type ComboProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UICheckboxButtonProps, "isInvalid" | "name" | "onChange" | "value"> & {
     nullable?: boolean;
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function CheckboxButton<FormData extends Record<string, any>>(props: ComboProps<FormData>): JSX.Element;
 export declare namespace CheckboxButton {
     var displayName: string;
 }
+export {};

package/checkbox-button/checkbox-button.js

@@ -24,7 +24,12 @@ function CheckboxButton(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(checkbox_button_1.CheckboxButton, { className: props.className, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: (value) => field.onChange(value), onFocus: props.onFocus, ref: field.ref, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(checkbox_button_1.CheckboxButton, { className: props.className, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
 }
 exports.CheckboxButton = CheckboxButton;
 CheckboxButton.displayName = "UxfFormCheckboxButton";

package/checkbox-input/checkbox-input.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { CheckboxInputProps as UICheckboxInputProps } from "@uxf/ui/checkbox-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<boolean | undefined>["onChange"];
 export type ComboProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UICheckboxInputProps, "isInvalid" | "name" | "onChange" | "value"> & {
     nullable?: boolean;
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function CheckboxInput<FormData extends Record<string, any>>(props: ComboProps<FormData>): JSX.Element;
 export declare namespace CheckboxInput {
     var displayName: string;
 }
+export {};

package/checkbox-input/checkbox-input.js

@@ -24,7 +24,12 @@ function CheckboxInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, ref: field.ref, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
 }
 exports.CheckboxInput = CheckboxInput;
 CheckboxInput.displayName = "UxfFormCheckboxInput";

package/color-radio-group/color-radio-group.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { ColorRadioGroupProps as UIColorRadioGroupProps } from "@uxf/ui/color-radio-group";
+import { ColorRadioGroupOptionValue, ColorRadioGroupProps as UIColorRadioGroupProps } from "@uxf/ui/color-radio-group";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<ColorRadioGroupOptionValue | null>["onChange"];
 export type ColorRadioGroupProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIColorRadioGroupProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function ColorRadioGroup<FormData extends Record<string, any>>(props: ColorRadioGroupProps<FormData>): JSX.Element;
 export declare namespace ColorRadioGroup {
     var displayName: string;
 }
+export {};

package/color-radio-group/color-radio-group.js

@@ -8,7 +8,7 @@ const color_radio_group_1 = require("@uxf/ui/color-radio-group");
 const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 function ColorRadioGroup(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
         defaultValue: props.defaultValue,
@@ -24,8 +24,12 @@ function ColorRadioGroup(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value) => field.onChange(value);
-    return (react_1.default.createElement(color_radio_group_1.ColorRadioGroup, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(color_radio_group_1.ColorRadioGroup, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : null }));
 }
 exports.ColorRadioGroup = ColorRadioGroup;
 ColorRadioGroup.displayName = "UxfFormColorRadioGroup";

package/combobox/combobox.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { ComboboxProps as UIComboboxProps } from "@uxf/ui/combobox";
+import { ComboboxProps as UIComboboxProps, ComboboxValue } from "@uxf/ui/combobox";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<ComboboxValue | null>["onChange"];
 export type ComboProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIComboboxProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function Combobox<FormData extends Record<string, any>>(props: ComboProps<FormData>): JSX.Element;
 export declare namespace Combobox {
     var displayName: string;
 }
+export {};

package/combobox/combobox.js

@@ -24,7 +24,12 @@ function Combobox(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(combobox_1.Combobox, { className: props.className, dropdownPlacement: props.dropdownPlacement, forwardRef: field.ref, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, loadOptions: props.loadOptions, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(combobox_1.Combobox, { className: props.className, dropdownPlacement: props.dropdownPlacement, forwardRef: field.ref, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, loadOptions: props.loadOptions, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, value: field.value }));
 }
 exports.Combobox = Combobox;
 Combobox.displayName = "UxfFormCombobox";

package/date-picker-input/date-picker-input.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { DatePickerInputProps as UIDatePickerInputProps } from "@uxf/ui/date-picker-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<Date | null>["onChange"];
 export type DatePickerInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIDatePickerInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function DatePickerInput<FormData extends FieldValues>(props: DatePickerInputProps<FormData>): JSX.Element;
 export declare namespace DatePickerInput {
     var displayName: string;
 }
+export {};

package/date-picker-input/date-picker-input.js

@@ -25,8 +25,10 @@ function DatePickerInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value) => {
+    const onChange = (value, event) => {
+        var _a;
         field.onChange(value ? (0, dayjs_1.default)(value).format("YYYY-MM-DD") : null);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
     return (react_1.default.createElement(date_picker_input_1.DatePickerInput, { className: props.className, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, value: field.value, variant: props.variant }));
 }

package/dropzone/dropzone-input.d.ts

@@ -1,11 +1,16 @@
 /// <reference types="react" />
 import { DropzoneInputProps as UIDropzoneProps } from "@uxf/ui/dropzone";
+import { DropzoneFile } from "@uxf/ui/dropzone/types";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<DropzoneFile[] | undefined>["onChange"];
 export type DropzoneProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIDropzoneProps, "onChange" | "value"> & {
     minFilesCount?: number;
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function DropzoneInput<FormData extends FieldValues>(props: DropzoneProps<FormData>): JSX.Element;
 export declare namespace DropzoneInput {
     var displayName: string;
 }
+export {};

package/dropzone/dropzone-input.js

@@ -44,7 +44,12 @@ function DropzoneInput(props) {
         },
         shouldUnregister: props.shouldUnregister,
     });
-    return (react_1.default.createElement(dropzone_1.Dropzone, { helperText: ((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) || props.helperText, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, noClick: props.noClick, noDrag: props.noDrag, onChange: field.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(dropzone_1.Dropzone, { helperText: ((_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) || props.helperText, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, maxFilesCount: props.maxFilesCount, minFileSize: props.minFileSize, noClick: props.noClick, noDrag: props.noDrag, onChange: onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, value: field.value }));
 }
 exports.DropzoneInput = DropzoneInput;
 DropzoneInput.displayName = "UxfFormDropzoneInput";

package/dropzone/dropzone-list.d.ts

@@ -1,8 +1,14 @@
 /// <reference types="react" />
 import { DropzoneListProps as UIDropzoneListProps } from "@uxf/ui/dropzone";
 import { FieldValues, UseControllerProps } from "react-hook-form";
-export type DropzoneListProps<FormData extends FieldValues> = Pick<UseControllerProps<FormData>, "control" | "name"> & Pick<UIDropzoneListProps, "errorText" | "onAbortWarning" | "onRemoveWarning" | "renderItem">;
+import { FormControlProps } from "@uxf/ui/types";
+import { DropzoneFile } from "@uxf/ui/dropzone/types";
+type OnChangeHandler = FormControlProps<DropzoneFile[] | undefined>["onChange"];
+export interface DropzoneListProps<FormData extends FieldValues> extends Pick<UseControllerProps<FormData>, "control" | "name">, Pick<UIDropzoneListProps, "errorText" | "onAbortWarning" | "onRemoveWarning" | "renderItem"> {
+    onChange?: OnChangeHandler;
+}
 export declare function DropzoneList<FormData extends FieldValues>(props: DropzoneListProps<FormData>): JSX.Element;
 export declare namespace DropzoneList {
     var displayName: string;
 }
+export {};

package/dropzone/dropzone-list.js

@@ -12,7 +12,12 @@ function DropzoneList(props) {
         control: props.control,
         name: props.name,
     });
-    return (react_1.default.createElement(dropzone_1.Dropzone.List, { errorText: props.errorText, onAbortWarning: props.onAbortWarning, onChange: field.onChange, onRemoveWarning: props.onRemoveWarning, renderItem: props.renderItem, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(dropzone_1.Dropzone.List, { errorText: props.errorText, onAbortWarning: props.onAbortWarning, onChange: onChange, onRemoveWarning: props.onRemoveWarning, renderItem: props.renderItem, value: field.value }));
 }
 exports.DropzoneList = DropzoneList;
 DropzoneList.displayName = "UxfFormDropzoneList";

package/file-input/file-input.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { FileInputProps as UIFileInputProps } from "@uxf/ui/file-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FileResponse, FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<FileResponse | null>["onChange"];
 export type FileInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIFileInputProps, "isInvalid" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function FileInput<FormData extends FieldValues>(props: FileInputProps<FormData>): JSX.Element;
 export declare namespace FileInput {
     var displayName: string;
 }
+export {};

package/file-input/file-input.js

@@ -24,7 +24,12 @@ function FileInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(file_input_1.FileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, size: props.size, value: field.value, variant: props.variant }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(file_input_1.FileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, id: props.id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, size: props.size, value: field.value, variant: props.variant }));
 }
 exports.FileInput = FileInput;
 FileInput.displayName = "FileInput";

package/gps-input/gps-input.d.ts

@@ -1,14 +1,18 @@
 /// <reference types="react" />
 import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
 export type Gps = {
     lat: number;
     lng: number;
 };
+type OnChangeHandler = FormControlProps<string>["onChange"];
 export type GpsInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value" | "type"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function GpsInput<FormData extends Record<string, Gps | null | undefined>>(props: GpsInputProps<FormData>): JSX.Element;
 export declare namespace GpsInput {
     var displayName: string;
 }
+export {};

package/gps-input/gps-input.js

@@ -114,23 +114,26 @@ function GpsInput(props) {
             setVisualValue(`${field.value.lat}N, ${field.value.lng}E`);
         }
     }, [field.value, visualValue]);
-    const handleChange = (value) => {
+    const onBlur = (event) => {
+        var _a;
+        field.onBlur();
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const onChange = (value, event) => {
+        var _a, _b;
         setVisualValue(value);
         try {
             const coords = new coordinate_parser_1.default(value);
             setCoordsFormatError(false);
             field.onChange({ lat: coords.getLatitude(), lng: coords.getLongitude() });
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
         }
         catch (e) {
             setCoordsFormatError(true);
             field.onChange(null);
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
         }
     };
-    const onBlur = (event) => {
-        var _a;
-        field.onBlur();
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    };
     const composedHelperText = (react_1.default.createElement(react_1.default.Fragment, null,
         fieldState.error && !coordsFormatError && !field.value
             ? `${fieldState.error.message}`
@@ -141,7 +144,7 @@ function GpsInput(props) {
                     : EMPTY_HELPER_TEXT,
         " ",
         SUPPORTED_FORMATS_TOOLTIP));
-    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: composedHelperText, hiddenLabel: props.hiddenLabel, id: props.id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: (!!fieldState.error && !field.value) || coordsFormatError, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: handleChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "text", value: visualValue, variant: props.variant }));
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: composedHelperText, hiddenLabel: props.hiddenLabel, id: props.id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: (!!fieldState.error && !field.value) || coordsFormatError, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "text", value: visualValue, variant: props.variant }));
 }
 exports.GpsInput = GpsInput;
 GpsInput.displayName = "UxfFormGpsInput";

package/multi-combobox/multi-combobox.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { MultiComboboxProps as UIMultiComboboxProps } from "@uxf/ui/multi-combobox";
+import { MultiComboboxOption, MultiComboboxProps as UIMultiComboboxProps } from "@uxf/ui/multi-combobox";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<MultiComboboxOption[] | null>["onChange"];
 export type ComboProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIMultiComboboxProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function MultiCombobox<FormData extends Record<string, any>>(props: ComboProps<FormData>): JSX.Element;
 export declare namespace MultiCombobox {
     var displayName: string;
 }
+export {};

package/multi-combobox/multi-combobox.js

@@ -24,7 +24,12 @@ function MultiCombobox(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { className: props.className, dropdownPlacement: props.dropdownPlacement, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, loadOptions: props.loadOptions, name: field.name, onBlur: onBlur, onChange: (value) => field.onChange(value), onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, value: field.value, withCheckboxes: props.withCheckboxes }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { className: props.className, dropdownPlacement: props.dropdownPlacement, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: ((_d = props.options) === null || _d === void 0 ? void 0 : _d.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, loadOptions: props.loadOptions, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, value: field.value, withCheckboxes: props.withCheckboxes }));
 }
 exports.MultiCombobox = MultiCombobox;
 MultiCombobox.displayName = "UxfFormMultiCombobox";

package/multi-select/multi-select.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { MultiSelectProps as UIMultiSelectProps } from "@uxf/ui/multi-select";
+import { MultiSelectOption, MultiSelectProps as UIMultiSelectProps } from "@uxf/ui/multi-select";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<MultiSelectOption[] | null>["onChange"];
 export type ComboProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIMultiSelectProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function MultiSelect<FormData extends Record<string, any>>(props: ComboProps<FormData>): JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }
+export {};

package/multi-select/multi-select.js

@@ -24,7 +24,12 @@ function MultiSelect(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(multi_select_1.MultiSelect, { className: props.className, dropdownPlacement: props.dropdownPlacement, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: (value) => field.onChange(value), onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, value: field.value, withPopover: props.withPopover }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(multi_select_1.MultiSelect, { className: props.className, dropdownPlacement: props.dropdownPlacement, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, value: field.value, withPopover: props.withPopover }));
 }
 exports.MultiSelect = MultiSelect;
 MultiSelect.displayName = "UxfFormMultiSelect";

package/number-input/number-input.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="react" />
 import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<string>["onChange"];
 export type NumberInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "inputMode" | "isInvalid" | "maxLength" | "minLength" | "name" | "onChange" | "value" | "type"> & {
     decimalPlaces?: number;
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function NumberInput<FormData extends FieldValues>(props: NumberInputProps<FormData>): JSX.Element;
 export declare namespace NumberInput {
     var displayName: string;
 }
+export {};

package/number-input/number-input.js

@@ -43,7 +43,12 @@ function NumberInput(props) {
         }
         (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, inputMode: props.decimalPlaces ? "decimal" : "numeric", isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, onKeyDown: onKeyDown, pattern: props.pattern, placeholder: props.placeholder, step: props.decimalPlaces ? Number(0).toFixed(props.decimalPlaces - 1) + "1" : props.step, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "number", value: (_d = field.value) !== null && _d !== void 0 ? _d : "", variant: props.variant }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, inputMode: props.decimalPlaces ? "decimal" : "numeric", isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: onKeyDown, pattern: props.pattern, placeholder: props.placeholder, step: props.decimalPlaces ? Number(0).toFixed(props.decimalPlaces - 1) + "1" : props.step, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "number", value: (_d = field.value) !== null && _d !== void 0 ? _d : "", variant: props.variant }));
 }
 exports.NumberInput = NumberInput;
 NumberInput.displayName = "UxfFormNumberInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "1.0.0-beta.146",
+  "version": "1.0.0-beta.148",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "^1.0.0-beta.146",
+    "@uxf/ui": "^1.0.0-beta.148",
     "react-hook-form": "latest",
     "coordinate-parser": "^1.0.7"
   }

package/radio-group/radio-group.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { RadioGroupProps as UIRadioGroupProps } from "@uxf/ui/radio-group";
+import { RadioGroupOptionValue, RadioGroupProps as UIRadioGroupProps } from "@uxf/ui/radio-group";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<RadioGroupOptionValue | null>["onChange"];
 export type RadioGroupProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIRadioGroupProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function RadioGroup<FormData extends Record<string, any>>(props: RadioGroupProps<FormData>): JSX.Element;
 export declare namespace RadioGroup {
     var displayName: string;
 }
+export {};

package/radio-group/radio-group.js

@@ -8,7 +8,7 @@ const radio_group_1 = require("@uxf/ui/radio-group");
 const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 function RadioGroup(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
         defaultValue: props.defaultValue,
@@ -24,8 +24,12 @@ function RadioGroup(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (value) => field.onChange(value);
-    return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: field.value, variant: props.variant }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : null, variant: props.variant }));
 }
 exports.RadioGroup = RadioGroup;
 RadioGroup.displayName = "UxfFormRadioGroup";

package/select/select.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-import { SelectProps as UISelectProps } from "@uxf/ui/select";
+import { SelectProps as UISelectProps, SelectValue } from "@uxf/ui/select";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<SelectValue | null>["onChange"];
 export type SelectProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UISelectProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function Select<FormData extends Record<string, any>>(props: SelectProps<FormData>): JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }
+export {};

package/select/select.js

@@ -24,7 +24,12 @@ function Select(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(select_1.Select, { className: props.className, dropdownPlacement: props.dropdownPlacement, forwardRef: field.ref, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(select_1.Select, { className: props.className, dropdownPlacement: props.dropdownPlacement, forwardRef: field.ref, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, value: field.value }));
 }
 exports.Select = Select;
 Select.displayName = "UxfFormSelect";

package/text-input/text-input.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<string>["onChange"];
 export type TextInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value" | "type"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 } & ({
     type: "email";
@@ -12,11 +15,12 @@ export type TextInputProps<FormData extends FieldValues> = UseControllerProps<Fo
     invalidEmailMessage?: never;
     invalidPhoneMessage?: string;
 } | {
-    type?: "password" | "search" | "text" | "url";
     invalidEmailMessage?: never;
     invalidPhoneMessage?: never;
+    type?: "password" | "search" | "text" | "url";
 });
 export declare function TextInput<FormData extends FieldValues>(props: TextInputProps<FormData>): JSX.Element;
 export declare namespace TextInput {
     var displayName: string;
 }
+export {};

package/text-input/text-input.js

@@ -37,7 +37,12 @@ function TextInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_e = (_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: props.type, value: (_f = field.value) !== null && _f !== void 0 ? _f : "", variant: props.variant }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_e = (_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: props.type, value: (_f = field.value) !== null && _f !== void 0 ? _f : "", variant: props.variant }));
 }
 exports.TextInput = TextInput;
 TextInput.displayName = "UxfFormTextInput";

package/textarea/textarea.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import { TextareaProps as UITextareaProps } from "@uxf/ui/textarea";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<string, HTMLTextAreaElement>["onChange"];
 export type TextareaProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextareaProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function Textarea<FormData extends Record<string, any>>(props: TextareaProps<FormData>): JSX.Element;
 export declare namespace Textarea {
     var displayName: string;
 }
+export {};

package/textarea/textarea.js

@@ -44,7 +44,12 @@ function Textarea(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [field, props]);
-    return (react_1.default.createElement(textarea_1.Textarea, { autoComplete: props.autoComplete, className: props.className, disableAutoHeight: props.disableAutoHeight, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: field.onChange, onFocus: props.onFocus, placeholder: props.placeholder, ref: field.ref, rows: props.rows, value: field.value || "" }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(textarea_1.Textarea, { autoComplete: props.autoComplete, className: props.className, disableAutoHeight: props.disableAutoHeight, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: props.id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, placeholder: props.placeholder, ref: field.ref, rows: props.rows, value: field.value || "" }));
 }
 exports.Textarea = Textarea;
 Textarea.displayName = "UxfFormTextarea";

package/time-picker-input/time-picker-input.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import { TimePickerInputProps as UITimePickerInputProps } from "@uxf/ui/time-picker-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { TimeType } from "@uxf/datepicker/hooks/use-time-picker";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<TimeType | null>["onChange"];
 export type TimePickerInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITimePickerInputProps, "isInvalid" | "max" | "min" | "pattern" | "step" | "name" | "onChange" | "value"> & {
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
     stringValue?: boolean;
 };
@@ -9,3 +13,4 @@ export declare function TimePickerInput<FormData extends FieldValues>(props: Tim
 export declare namespace TimePickerInput {
     var displayName: string;
 }
+export {};

package/time-picker-input/time-picker-input.js

@@ -25,13 +25,15 @@ function TimePickerInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    const onChange = (val) => {
-        if (props.stringValue && val !== null) {
-            field.onChange((0, dayjs_1.default)().set("hour", val.hour).set("minute", val.minute).set("second", 0).format("HH:mm:ss"));
+    const onChange = (value, event) => {
+        var _a;
+        if (props.stringValue && value !== null) {
+            field.onChange((0, dayjs_1.default)().set("hour", value.hour).set("minute", value.minute).set("second", 0).format("HH:mm:ss"));
         }
         else {
-            field.onChange(val);
+            field.onChange(value);
         }
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
     const value = props.stringValue
         ? field.value

package/toggle/toggle.d.ts

@@ -1,10 +1,15 @@
 /// <reference types="react" />
 import { ToggleProps as UIToggleProps } from "@uxf/ui/toggle";
 import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FormControlProps } from "@uxf/ui/types";
+type OnChangeHandler = FormControlProps<boolean | undefined>["onChange"];
 export type ComboProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIToggleProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    nullable?: boolean;
+    onChange?: OnChangeHandler;
     requiredMessage?: string;
 };
 export declare function Toggle<FormData extends Record<string, any>>(props: ComboProps<FormData>): JSX.Element;
 export declare namespace Toggle {
     var displayName: string;
 }
+export {};

package/toggle/toggle.js

@@ -8,7 +8,7 @@ const toggle_1 = require("@uxf/ui/toggle");
 const react_hook_form_1 = require("react-hook-form");
 const react_1 = __importDefault(require("react"));
 function Toggle(props) {
-    var _a;
+    var _a, _b;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
         defaultValue: props.defaultValue,
@@ -24,7 +24,12 @@ function Toggle(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(toggle_1.Toggle, { className: props.className, hiddenLabel: props.hiddenLabel, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: (value) => field.onChange(value), onFocus: props.onFocus, ref: field.ref, value: field.value }));
+    const onChange = (value, event) => {
+        var _a;
+        field.onChange(value);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+    };
+    return (react_1.default.createElement(toggle_1.Toggle, { className: props.className, hiddenLabel: props.hiddenLabel, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
 }
 exports.Toggle = Toggle;
 Toggle.displayName = "UxfFormToggle";