@povio/ui 3.3.0 → 3.4.0-rc.10

package/dist/rhf/Inputs.js

@@ -0,0 +1,148 @@
+import { Autocomplete, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, DateTimePicker, NumberInput, NumberRangeInput, PasswordInput, QueryAutocomplete, QuerySelect, Segment, Select, Slider, TextArea, TextInput, TimePicker, Toggle } from "./components.js";
+import { StringUtils } from "../utils/string.utils.js";
+import { ZodUtils } from "../utils/zod.utils.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { z } from "zod";
+//#region src/rhf/Inputs.tsx
+var componentRegistry = {
+	autocomplete: Autocomplete,
+	checkbox: Checkbox,
+	checkboxGroup: CheckboxGroup,
+	datePicker: DatePicker,
+	dateRangePicker: DateRangePicker,
+	dateTimePicker: DateTimePicker,
+	numberInput: NumberInput,
+	numberRangeInput: NumberRangeInput,
+	passwordInput: PasswordInput,
+	queryAutocomplete: QueryAutocomplete,
+	querySelect: QuerySelect,
+	segment: Segment,
+	select: Select,
+	slider: Slider,
+	textArea: TextArea,
+	textInput: TextInput,
+	timePicker: TimePicker,
+	toggle: Toggle
+};
+function InputItem({ form, inputDef }) {
+	const { name, label = "", placeholder, props, inputWrapper, render, type } = inputDef;
+	const formControl = {
+		control: form.control,
+		name
+	};
+	if (render) return render(formControl, form);
+	if (!type) return null;
+	const Component = componentRegistry[type];
+	const usesChildrenAsLabel = type === "toggle" || type === "checkbox";
+	const inputComponent = /* @__PURE__ */ jsx(Component, {
+		...props,
+		label: usesChildrenAsLabel ? void 0 : label,
+		placeholder,
+		formControl,
+		children: usesChildrenAsLabel ? label : void 0
+	});
+	return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
+}
+function Inputs(t0) {
+	const $ = c(9);
+	const { form, inputDefs, children } = t0;
+	if (!children) {
+		let t1;
+		if ($[0] !== form || $[1] !== inputDefs) {
+			let t2;
+			if ($[3] !== form) {
+				t2 = (inputDef) => /* @__PURE__ */ jsx(InputItem, {
+					form,
+					inputDef
+				}, String(inputDef.name));
+				$[3] = form;
+				$[4] = t2;
+			} else t2 = $[4];
+			t1 = inputDefs.map(t2);
+			$[0] = form;
+			$[1] = inputDefs;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	let t1;
+	if ($[5] !== children || $[6] !== form || $[7] !== inputDefs) {
+		const rendered = {};
+		for (const inputDef_0 of inputDefs) rendered[inputDef_0.name] = /* @__PURE__ */ jsx(InputItem, {
+			form,
+			inputDef: inputDef_0
+		});
+		t1 = children(rendered);
+		$[5] = children;
+		$[6] = form;
+		$[7] = inputDefs;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
+}
+function Form(t0) {
+	const $ = c(16);
+	const { form, schema, onSubmit, onError, className, children } = t0;
+	let fields;
+	if ($[0] !== form || $[1] !== schema.shape) {
+		fields = {};
+		let t1;
+		if ($[3] !== schema.shape) {
+			t1 = Object.keys(schema.shape);
+			$[3] = schema.shape;
+			$[4] = t1;
+		} else t1 = $[4];
+		for (const field of t1) {
+			const componentName = StringUtils.capitalize(String(field));
+			fields[componentName] = ((t2) => {
+				const { inputType, label, placeholder, ...props } = t2;
+				const schemaType = ZodUtils.unwrapZodType(schema.shape[field]);
+				return /* @__PURE__ */ jsx(InputItem, {
+					form,
+					inputDef: {
+						name: field,
+						type: inputType ?? (schemaType instanceof z.ZodBoolean ? "toggle" : schemaType instanceof z.ZodNumber ? "numberInput" : "textInput"),
+						label,
+						placeholder,
+						props
+					}
+				});
+			});
+		}
+		$[0] = form;
+		$[1] = schema.shape;
+		$[2] = fields;
+	} else fields = $[2];
+	const components = fields;
+	let t1;
+	if ($[5] !== form || $[6] !== onError || $[7] !== onSubmit) {
+		t1 = form.handleSubmit(onSubmit, onError);
+		$[5] = form;
+		$[6] = onError;
+		$[7] = onSubmit;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== children || $[10] !== components) {
+		t2 = children(components);
+		$[9] = children;
+		$[10] = components;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== className || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx("form", {
+			className,
+			onSubmit: t1,
+			children: t2
+		});
+		$[12] = className;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
+//#endregion
+export { Form, Inputs };

package/dist/rhf/components.d.ts

@@ -0,0 +1,80 @@
+import { FieldValues } from 'react-hook-form';
+import { Key } from 'react-aria-components';
+import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
+import { CheckboxGroupProps } from '../components/inputs/Checkbox/CheckboxGroup';
+import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
+import { DateRangePickerProps } from '../components/inputs/DateTime/DateRangePicker/DateRangePicker';
+import { DateTimePickerProps } from '../components/inputs/DateTime/DateTimePicker/DateTimePicker';
+import { TimePickerProps } from '../components/inputs/DateTime/TimePicker/TimePicker';
+import { FileUploadBaseProps } from '../components/inputs/File/FileUpload';
+import { InputUploadBaseProps } from '../components/inputs/File/InputUpload';
+import { NumberInputProps } from '../components/inputs/Input/NumberInput/NumberInput';
+import { NumberRangeInputProps } from '../components/inputs/Input/NumberRangeInput/NumberRangeInput';
+import { PasswordInputProps } from '../components/inputs/Input/PasswordInput/PasswordInput';
+import { TextAreaProps } from '../components/inputs/Input/TextArea/TextArea';
+import { TextInputProps } from '../components/inputs/Input/TextInput/TextInput';
+import { RadioGroupProps } from '../components/inputs/RadioGroup/RadioGroup';
+import { AutocompleteProps } from '../components/inputs/Selection/Autocomplete/Autocomplete';
+import { QueryAutocompleteProps, QueryFn as AutocompleteQueryFn } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
+import { SelectProps } from '../components/inputs/Selection/Select/Select';
+import { QuerySelect as TanStackQuerySelect, QuerySelectProps } from '../components/inputs/Selection/Select/QuerySelect';
+import { DefaultInitialSelectItem, GroupedSelectProps, MultiSelectProps, SelectItem, SingleSelectProps } from '../components/inputs/Selection/shared/select.types';
+import { SliderProps } from '../components/inputs/Slider/Slider';
+import { ToggleProps } from '../components/inputs/Toggle/Toggle';
+import { TextEditorProps } from '../components/inputs/TextEditor/TextEditor';
+import { SegmentProps } from '../components/segment/segment.types';
+import { ControlProps, FormControl } from './form.types';
+import { FireBlurOnChangeProps } from './fieldAdapter';
+export type ControlledCheckboxProps<TFieldValues extends FieldValues> = ControlProps<CheckboxProps & FireBlurOnChangeProps, TFieldValues, "isSelected">;
+export declare const Checkbox: <TFieldValues extends FieldValues>(props: ControlledCheckboxProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledCheckboxGroupProps<TFieldValues extends FieldValues> = ControlProps<CheckboxGroupProps & FireBlurOnChangeProps, TFieldValues>;
+export declare const CheckboxGroup: <TFieldValues extends FieldValues>(props: ControlledCheckboxGroupProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps & FireBlurOnChangeProps, TFieldValues>;
+export declare const DatePicker: <TFieldValues extends FieldValues>(props: ControlledDatePickerProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps & FireBlurOnChangeProps, TFieldValues>;
+export declare const DateRangePicker: <TFieldValues extends FieldValues>(props: ControlledDateRangePickerProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledDateTimePickerProps<TFieldValues extends FieldValues> = ControlProps<DateTimePickerProps & FireBlurOnChangeProps, TFieldValues>;
+export declare const DateTimePicker: <TFieldValues extends FieldValues>(props: ControlledDateTimePickerProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledTimePickerProps<TFieldValues extends FieldValues> = ControlProps<TimePickerProps & FireBlurOnChangeProps, TFieldValues>;
+export declare const TimePicker: <TFieldValues extends FieldValues>(props: ControlledTimePickerProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;
+export declare const NumberInput: <TFieldValues extends FieldValues>(props: ControlledNumberInputProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledNumberRangeInputProps<TFieldValues extends FieldValues> = ControlProps<NumberRangeInputProps, TFieldValues>;
+export declare const NumberRangeInput: <TFieldValues extends FieldValues>(props: ControlledNumberRangeInputProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledPasswordInputProps<TFieldValues extends FieldValues> = ControlProps<PasswordInputProps, TFieldValues>;
+export declare const PasswordInput: <TFieldValues extends FieldValues>(props: ControlledPasswordInputProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledTextAreaProps<TFieldValues extends FieldValues> = ControlProps<TextAreaProps, TFieldValues>;
+export declare const TextArea: <TFieldValues extends FieldValues>(props: ControlledTextAreaProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledTextInputProps<TFieldValues extends FieldValues> = ControlProps<TextInputProps, TFieldValues>;
+export declare const TextInput: <TFieldValues extends FieldValues>(props: ControlledTextInputProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledRadioGroupProps<TFieldValues extends FieldValues> = ControlProps<RadioGroupProps & FireBlurOnChangeProps, TFieldValues>;
+export declare const RadioGroup: <TFieldValues extends FieldValues>(props: ControlledRadioGroupProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledSliderProps<TFieldValues extends FieldValues, IsRange extends boolean = false> = ControlProps<SliderProps<IsRange>, TFieldValues>;
+export declare const Slider: <TFieldValues extends FieldValues, IsRange extends boolean = false>(props: ControlledSliderProps<TFieldValues, IsRange>) => import('react').ReactNode;
+export type ControlledToggleProps<TFieldValues extends FieldValues> = ControlProps<ToggleProps & FireBlurOnChangeProps, TFieldValues, "isSelected">;
+export declare const Toggle: <TFieldValues extends FieldValues>(props: ControlledToggleProps<TFieldValues>) => import('react').ReactNode;
+export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = ControlProps<SegmentProps<TKey>, TFieldValues>;
+export declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import('react').ReactNode;
+type RHFSelectionProps<TFieldValues extends FieldValues, TProps, TKey extends Key, TInitialSelectItem> = ({
+    selectionMode: MultiSelectProps["selectionMode"];
+} & ControlProps<Omit<TProps, keyof GroupedSelectProps> & MultiSelectProps<TKey, TInitialSelectItem>, TFieldValues>) | ({
+    selectionMode?: SingleSelectProps["selectionMode"];
+} & ControlProps<Omit<TProps, keyof GroupedSelectProps> & SingleSelectProps<TKey, TInitialSelectItem>, TFieldValues>);
+export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = RHFSelectionProps<TFieldValues, SelectProps<TKey, TInitialSelectItem> & FireBlurOnChangeProps, TKey, TInitialSelectItem>;
+export declare const Select: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import('react').ReactNode;
+export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = RHFSelectionProps<TFieldValues, AutocompleteProps<TKey, TInitialSelectItem> & FireBlurOnChangeProps, TKey, TInitialSelectItem>;
+export declare const Autocomplete: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import('react').ReactNode;
+type ReplaceFieldWithFormControl<TProps, TFieldValues extends FieldValues> = Omit<TProps, "field"> & {
+    formControl: FormControl<TFieldValues, unknown>;
+} & FireBlurOnChangeProps;
+export type RHFQuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends Parameters<typeof TanStackQuerySelect>[0]["query"], TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = ReplaceFieldWithFormControl<QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>, TFieldValues>;
+export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends Parameters<typeof TanStackQuerySelect>[0]["query"], TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: RHFQuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import('react').ReactNode;
+export type RHFQueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends AutocompleteQueryFn> = ReplaceFieldWithFormControl<QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>, TFieldValues>;
+export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends AutocompleteQueryFn>(props: RHFQueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import('react').ReactNode;
+export type ControlledTextEditorProps<TFieldValues extends FieldValues> = ControlProps<TextEditorProps, TFieldValues>;
+export declare const TextEditor: <TFieldValues extends FieldValues>(props: ControlledTextEditorProps<TFieldValues>) => import('react').ReactNode;
+export type RHFFileUploadProps<TFieldValues extends FieldValues> = ControlProps<FileUploadBaseProps, TFieldValues>;
+export declare const FileUpload: <TFieldValues extends FieldValues>(props: RHFFileUploadProps<TFieldValues>) => import('react').ReactNode;
+export type RHFInputUploadProps<TFieldValues extends FieldValues> = ControlProps<InputUploadBaseProps, TFieldValues>;
+export declare const InputUpload: <TFieldValues extends FieldValues>(props: RHFInputUploadProps<TFieldValues>) => import('react').ReactNode;
+export type { CheckboxGroupProps, CheckboxProps, DatePickerProps, DateRangePickerProps, DateTimePickerProps, NumberInputProps, NumberRangeInputProps, PasswordInputProps, RadioGroupProps, SegmentProps, SelectProps, SliderProps, TextAreaProps, TextInputProps, TimePickerProps, ToggleProps, TextEditorProps, AutocompleteProps, };

package/dist/rhf/components.js

@@ -0,0 +1,101 @@
+import { UIConfig } from "../config/uiConfig.context.js";
+import { Checkbox as Checkbox$1 } from "../components/inputs/Checkbox/Checkbox.js";
+import { CheckboxGroup as CheckboxGroup$1 } from "../components/inputs/Checkbox/CheckboxGroup.js";
+import { DatePicker as DatePicker$1 } from "../components/inputs/DateTime/DatePicker/DatePicker.js";
+import { TextInput as TextInput$1 } from "../components/inputs/Input/TextInput/TextInput.js";
+import { Select as Select$1 } from "../components/inputs/Selection/Select/Select.js";
+import { DateRangePicker as DateRangePicker$1 } from "../components/inputs/DateTime/DateRangePicker/DateRangePicker.js";
+import { DateTimePicker as DateTimePicker$1 } from "../components/inputs/DateTime/DateTimePicker/DateTimePicker.js";
+import { TimePicker as TimePicker$1 } from "../components/inputs/DateTime/TimePicker/TimePicker.js";
+import { FileUpload as FileUpload$1 } from "../components/inputs/File/FileUpload.js";
+import { InputUpload as InputUpload$1 } from "../components/inputs/File/InputUpload.js";
+import { NumberInput as NumberInput$1 } from "../components/inputs/Input/NumberInput/NumberInput.js";
+import { NumberRangeInput as NumberRangeInput$1 } from "../components/inputs/Input/NumberRangeInput/NumberRangeInput.js";
+import { PasswordInput as PasswordInput$1 } from "../components/inputs/Input/PasswordInput/PasswordInput.js";
+import { TextArea as TextArea$1 } from "../components/inputs/Input/TextArea/TextArea.js";
+import { RadioGroup as RadioGroup$1 } from "../components/inputs/RadioGroup/RadioGroup.js";
+import { Autocomplete as Autocomplete$1 } from "../components/inputs/Selection/Autocomplete/Autocomplete.js";
+import { QueryAutocomplete as QueryAutocomplete$1 } from "../components/inputs/Selection/Autocomplete/QueryAutocomplete.js";
+import { QuerySelect as QuerySelect$1 } from "../components/inputs/Selection/Select/QuerySelect.js";
+import { Slider as Slider$1 } from "../components/inputs/Slider/Slider.js";
+import { Toggle as Toggle$1 } from "../components/inputs/Toggle/Toggle.js";
+import { Segment as Segment$1 } from "../components/segment/Segment.js";
+import { renderRHFField } from "./fieldAdapter.js";
+import { c } from "react/compiler-runtime";
+import { parseDate, parseDateTime, parseTime } from "@internationalized/date";
+//#region src/rhf/components.tsx
+var runtime = (component) => component;
+var useFireBlurOnChange = (props, key) => {
+	const $ = c(3);
+	const config = UIConfig.useConfig();
+	const t0 = props.fireBlurOnChange ?? config[key].fireBlurOnChange;
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = {
+			...props,
+			fireBlurOnChange: t0
+		};
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+var toCalendarDate$1 = (value) => typeof value === "string" ? parseDate(value.slice(0, 10)) : value;
+var toCalendarDateTime$1 = (value) => typeof value === "string" ? parseDateTime(value.replace(/(?:Z|[+-]\d{2}:?\d{2})$/, "")) : value;
+var toTime$1 = (value) => typeof value === "string" ? parseTime(value.slice(11, 23)) : value;
+var toCalendarDateRange = (value) => {
+	if (!value || typeof value !== "object" || !("start" in value) || !("end" in value)) return value;
+	const range = value;
+	return {
+		start: toCalendarDate$1(range.start),
+		end: toCalendarDate$1(range.end)
+	};
+};
+var Checkbox = (props) => {
+	return renderRHFField(runtime(Checkbox$1), useFireBlurOnChange(props, "checkbox"), "isSelected");
+};
+var CheckboxGroup = (props) => {
+	return renderRHFField(runtime(CheckboxGroup$1), useFireBlurOnChange(props, "checkbox"));
+};
+var DatePicker = (props) => {
+	return renderRHFField(runtime(DatePicker$1), useFireBlurOnChange(props, "dateInput"), "value", toCalendarDate$1);
+};
+var DateRangePicker = (props) => {
+	return renderRHFField(runtime(DateRangePicker$1), useFireBlurOnChange(props, "dateInput"), "value", toCalendarDateRange);
+};
+var DateTimePicker = (props) => {
+	return renderRHFField(runtime(DateTimePicker$1), useFireBlurOnChange(props, "dateInput"), "value", toCalendarDateTime$1);
+};
+var TimePicker = (props) => {
+	return renderRHFField(runtime(TimePicker$1), useFireBlurOnChange(props, "dateInput"), "value", toTime$1);
+};
+var NumberInput = (props) => renderRHFField(runtime(NumberInput$1), props);
+var NumberRangeInput = (props) => renderRHFField(runtime(NumberRangeInput$1), props);
+var PasswordInput = (props) => renderRHFField(runtime(PasswordInput$1), props);
+var TextArea = (props) => renderRHFField(runtime(TextArea$1), props);
+var TextInput = (props) => renderRHFField(runtime(TextInput$1), props);
+var RadioGroup = (props) => {
+	return renderRHFField(runtime(RadioGroup$1), useFireBlurOnChange(props, "radioGroup"));
+};
+var Slider = (props) => renderRHFField(runtime(Slider$1), props);
+var Toggle = (props) => {
+	return renderRHFField(runtime(Toggle$1), useFireBlurOnChange(props, "toggle"), "isSelected");
+};
+var Segment = (props) => renderRHFField(runtime(Segment$1), props);
+var Select = (props) => {
+	return renderRHFField(runtime(Select$1), useFireBlurOnChange(props, "select"));
+};
+var Autocomplete = (props) => {
+	return renderRHFField(runtime(Autocomplete$1), useFireBlurOnChange(props, "select"));
+};
+var QuerySelect = (props) => {
+	return renderRHFField(runtime(QuerySelect$1), useFireBlurOnChange(props, "select"));
+};
+var QueryAutocomplete = (props) => {
+	return renderRHFField(runtime(QueryAutocomplete$1), useFireBlurOnChange(props, "select"));
+};
+var FileUpload = (props) => renderRHFField(runtime(FileUpload$1), props);
+var InputUpload = (props) => renderRHFField(runtime(InputUpload$1), props);
+//#endregion
+export { Autocomplete, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, DateTimePicker, FileUpload, InputUpload, NumberInput, NumberRangeInput, PasswordInput, QueryAutocomplete, QuerySelect, RadioGroup, Segment, Select, Slider, TextArea, TextInput, TimePicker, Toggle };

package/dist/rhf/dynamicInputs.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { DynamicInputsObjectSchema, DynamicInputsOptions as TanStackDynamicInputsOptions } from '../helpers/dynamicInputs';
+import { InputDef } from './Inputs';
+type RHFRender<TSchema extends z.ZodObject<Record<string, z.ZodType>>> = (formControl: {
+    control: UseFormReturn<z.infer<TSchema>>["control"];
+    name: keyof z.infer<TSchema>;
+}, form: UseFormReturn<z.infer<TSchema>>) => ReactElement;
+export type DynamicInputsOptions<TSchema extends z.ZodType> = Omit<TanStackDynamicInputsOptions<TSchema>, "inputs"> & {
+    inputs?: Record<string, boolean | Record<string, unknown> | RHFRender<DynamicInputsObjectSchema<TSchema>>>;
+};
+export { type DynamicInputsObjectSchema };
+export declare const dynamicInputs: <TSchema extends z.ZodType>(params: {
+    schema: TSchema;
+    preset?: InputDef<z.infer<DynamicInputsObjectSchema<TSchema>>>[];
+    options: DynamicInputsOptions<TSchema>;
+}) => InputDef<z.infer<DynamicInputsObjectSchema<TSchema>>>[];

package/dist/rhf/dynamicInputs.js

@@ -0,0 +1,5 @@
+import { dynamicInputs as dynamicInputs$1 } from "../helpers/dynamicInputs.js";
+//#region src/rhf/dynamicInputs.ts
+var dynamicInputs = dynamicInputs$1;
+//#endregion
+export { dynamicInputs };

package/dist/rhf/fieldAdapter.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType, ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { ControlProps } from './form.types';
+export interface FireBlurOnChangeProps {
+    fireBlurOnChange?: boolean;
+}
+export declare function renderRHFField<TProps extends object, TFieldValues extends FieldValues, TValueKey extends keyof TProps = "value" extends keyof TProps ? "value" : never>(Component: ComponentType<any>, props: ControlProps<TProps, TFieldValues, TValueKey>, valueKey?: "isSelected" | "value", blurValueTransform?: (value: unknown) => unknown): ReactNode;

package/dist/rhf/fieldAdapter.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+//#region src/rhf/fieldAdapter.tsx
+function renderRHFField(Component, props, valueKey = "value", blurValueTransform = (value) => value) {
+	if (!("formControl" in props)) {
+		const { fireBlurOnChange, ...componentProps } = props;
+		const runtimeProps = componentProps;
+		return /* @__PURE__ */ jsx(Component, {
+			...runtimeProps,
+			onChange: (value) => {
+				runtimeProps.onChange?.(value);
+				if (fireBlurOnChange) runtimeProps.onBlur?.({ target: { value: blurValueTransform(value) } });
+			}
+		});
+	}
+	const { fireBlurOnChange, formControl, ...componentProps } = props;
+	const runtimeProps = componentProps;
+	return /* @__PURE__ */ jsx(Controller, {
+		control: formControl.control,
+		name: formControl.name,
+		render: ({ field, fieldState }) => {
+			const valueProps = { [valueKey]: field.value ?? (valueKey === "isSelected" ? false : null) };
+			return /* @__PURE__ */ jsx(Component, {
+				...componentProps,
+				...valueProps,
+				ref: field.ref,
+				onChange: (value) => {
+					field.onChange(value ?? null);
+					if (fireBlurOnChange) field.onBlur();
+				},
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || runtimeProps.isDisabled,
+				isDirty: fieldState.isDirty,
+				error: runtimeProps.error ?? fieldState.error?.message
+			});
+		}
+	});
+}
+//#endregion
+export { renderRHFField };

package/dist/rhf/form.types.d.ts

@@ -0,0 +1,12 @@
+import { Control, FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+export type ControlKeys<TProps, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = TValueProp | "onChange" | "onBlur";
+export interface FormControl<TFieldValues extends FieldValues, TType> {
+    control: Control<TFieldValues>;
+    name: {
+        [K in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, K> extends TType ? K : never;
+    }[FieldPath<TFieldValues>];
+}
+export type FormControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
+    formControl: FormControl<TFieldValues, TProps[TValueProp] | null>;
+} & Omit<TProps, ControlKeys<TProps, TValueProp>> & Partial<Record<ControlKeys<TProps, TValueProp>, never>>;
+export type ControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;

package/dist/rhf/useAutosave.d.ts

@@ -0,0 +1,10 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface UseAutosaveProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown> {
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    delay?: number;
+    enabled?: boolean;
+    trigger?: "change" | "blur";
+    onSave: (data: Partial<TTransformedValues>) => Promise<TResponse>;
+    onSaveSuccess?: () => void;
+}
+export declare function useAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, trigger, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): void;

package/dist/rhf/useAutosave.js

@@ -0,0 +1,71 @@
+import { ObjectUtils } from "../utils/object.utils.js";
+import { isEqual } from "../utils/isEqual.js";
+import { useEffect, useRef } from "react";
+import { useFormState, useWatch } from "react-hook-form";
+//#region src/rhf/useAutosave.ts
+function isNilOrEqual(left, right) {
+	if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) return true;
+	return isEqual(left, right);
+}
+function diffLeftOnly(left, right, shallowKeys) {
+	if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) return !isNilOrEqual(left, right) ? left : void 0;
+	if (Array.isArray(left)) return !isNilOrEqual(left, right) ? left : void 0;
+	const result = Object.entries(left).reduce((acc, [key, value]) => {
+		const shallowSubtree = shallowKeys?.[key];
+		if (shallowSubtree === true) {
+			if (!isNilOrEqual(value, right?.[key])) acc[key] = value;
+			return acc;
+		}
+		const diff = diffLeftOnly(value, right?.[key], shallowSubtree);
+		if (diff !== void 0 && (!ObjectUtils.isObject(diff) || !ObjectUtils.isEmpty(diff))) acc[key] = diff;
+		return acc;
+	}, {});
+	return ObjectUtils.isEmpty(result) ? void 0 : result;
+}
+function useAutosave({ form, delay = 500, enabled = true, trigger = "change", onSave, onSaveSuccess }) {
+	const timeoutRef = useRef(void 0);
+	const previousBlurTriggerFieldsRef = useRef(void 0);
+	const { control, reset, handleSubmit } = form;
+	const { dirtyFields, touchedFields, defaultValues } = useFormState({ control });
+	const formData = useWatch({ control });
+	useEffect(() => {
+		if (!enabled || Object.keys(dirtyFields).length === 0) return;
+		if (trigger === "blur") {
+			const blurTriggerFields = JSON.stringify(touchedFields);
+			if (Object.keys(touchedFields).length === 0 || previousBlurTriggerFieldsRef.current === blurTriggerFields) return;
+			previousBlurTriggerFieldsRef.current = blurTriggerFields;
+		}
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			handleSubmit(async (data) => {
+				const changedData = diffLeftOnly(Object.entries(dirtyFields).filter(([, value]) => value).reduce((acc, [key]) => {
+					acc[key] = data[key];
+					return acc;
+				}, {}), defaultValues, dirtyFields) ?? {};
+				if (Object.keys(changedData).length === 0) return;
+				try {
+					reset(void 0, { keepValues: true });
+					await onSave(changedData);
+					onSaveSuccess?.();
+				} catch {
+					reset(defaultValues);
+				}
+			})();
+		}, delay);
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, [
+		defaultValues,
+		dirtyFields,
+		trigger === "change" ? formData : touchedFields,
+		delay,
+		onSave,
+		handleSubmit,
+		enabled,
+		reset,
+		trigger
+	]);
+}
+//#endregion
+export { useAutosave };

package/dist/rhf/useForm.d.ts

@@ -0,0 +1,18 @@
+import { BrowserNativeObject, ExtractObjects, FieldValues, NestedValue, UseFormProps as UseReactHookFormProps } from 'react-hook-form';
+import { z } from 'zod';
+type DeepNullablePartial<T> = T extends BrowserNativeObject | NestedValue ? T : {
+    [K in keyof T]?: ExtractObjects<T[K]> extends never ? T[K] | null : DeepNullablePartial<T[K]>;
+};
+type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
+type NullableDefaultValues<TFieldValues> = TFieldValues extends AsyncDefaultValues<TFieldValues> ? DeepNullablePartial<Awaited<TFieldValues>> : DeepNullablePartial<TFieldValues>;
+export type UseFormResolverProps<TFieldValues extends FieldValues, TTransformedValues = TFieldValues> = {
+    zodSchema: z.ZodType<TTransformedValues, TFieldValues>;
+    resolver?: never;
+} | {
+    zodSchema?: never;
+};
+export type UseFormProps<TFieldValues extends FieldValues, TContext, TTransformedValues = TFieldValues> = Omit<UseReactHookFormProps<TFieldValues, TContext, TTransformedValues>, "defaultValues"> & {
+    defaultValues?: NullableDefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
+};
+export declare function useForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ resolver, zodSchema, defaultValues, ...props }: UseFormProps<TFieldValues, TContext, TTransformedValues> & UseFormResolverProps<TFieldValues, TTransformedValues>): import('react-hook-form').UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+export {};

package/dist/rhf/useForm.js

@@ -0,0 +1,48 @@
+import { c } from "react/compiler-runtime";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+//#region src/rhf/useForm.ts
+function useForm$1(t0) {
+	const $ = c(12);
+	let defaultValues;
+	let props;
+	let resolver;
+	let zodSchema;
+	if ($[0] !== t0) {
+		({resolver, zodSchema, defaultValues, ...props} = t0);
+		$[0] = t0;
+		$[1] = defaultValues;
+		$[2] = props;
+		$[3] = resolver;
+		$[4] = zodSchema;
+	} else {
+		defaultValues = $[1];
+		props = $[2];
+		resolver = $[3];
+		zodSchema = $[4];
+	}
+	let t1;
+	if ($[5] !== resolver || $[6] !== zodSchema) {
+		t1 = resolver ?? (zodSchema ? zodResolver(zodSchema) : void 0);
+		$[5] = resolver;
+		$[6] = zodSchema;
+		$[7] = t1;
+	} else t1 = $[7];
+	const formResolver = t1;
+	const t2 = defaultValues;
+	let t3;
+	if ($[8] !== formResolver || $[9] !== props || $[10] !== t2) {
+		t3 = {
+			...props,
+			resolver: formResolver,
+			defaultValues: t2
+		};
+		$[8] = formResolver;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return useForm(t3);
+}
+//#endregion
+export { useForm$1 as useForm };

package/dist/rhf/useFormAutosave.d.ts

@@ -0,0 +1,15 @@
+import { DependencyList } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { UseAutosaveProps } from './useAutosave';
+import { UseFormProps, UseFormResolverProps } from './useForm';
+export type UseFormAutosaveProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown> = Omit<UseFormProps<TFieldValues, TContext, TTransformedValues>, "defaultValues"> & UseFormResolverProps<TFieldValues, TTransformedValues> & {
+    autosaveDelay?: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["delay"];
+    enableAutosave?: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["enabled"];
+    autosaveOn?: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["trigger"];
+    normalizeAutosaveData?: (data: Partial<TTransformedValues>) => Partial<TTransformedValues> | undefined;
+    onAutosave: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["onSave"];
+    getResetValues: () => UseFormProps<TFieldValues, TContext, TTransformedValues>["defaultValues"];
+    resetDeps: DependencyList;
+    resetTimeout?: number;
+};
+export declare function useFormAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = any>({ autosaveDelay, enableAutosave, autosaveOn, normalizeAutosaveData, onAutosave, getResetValues, resetDeps, resetTimeout, ...props }: UseFormAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): import('react-hook-form').UseFormReturn<TFieldValues, TContext, TTransformedValues>;

package/dist/rhf/useFormAutosave.js

@@ -0,0 +1,59 @@
+import { ObjectUtils } from "../utils/object.utils.js";
+import { useAutosave } from "./useAutosave.js";
+import { useForm } from "./useForm.js";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/rhf/useFormAutosave.ts
+var getResetTimeoutErrorMessage = (resetTimeout) => `Form Reset Timeout (${resetTimeout}ms) - Action Required
+Problem: Form values weren't reset after submission.
+
+Likely causes:
+• Missing variables in reset dependency array
+• Reset dependencies not updating after form save
+• Async operations blocking timely reset
+
+Solutions:
+1. Ensure reset dependencies include all relevant state variables
+2. Confirm your submission handler updates state properly (check query invalidation)
+3. For slower operations, consider increasing the timeout threshold`;
+function useFormAutosave({ autosaveDelay, enableAutosave, autosaveOn = "change", normalizeAutosaveData, onAutosave, getResetValues, resetDeps, resetTimeout = 5e3, ...props }) {
+	const form = useForm({
+		...props,
+		defaultValues: getResetValues()
+	});
+	const shouldResetFormValuesRef = useRef(false);
+	const resetFormValuesTimeoutRef = useRef(void 0);
+	useEffect(() => {
+		const resetValues = getResetValues();
+		if (resetValues === void 0) return;
+		const resetFormValues = async () => {
+			const keepStateOptions = shouldResetFormValuesRef.current ? { keepDirtyValues: true } : void 0;
+			shouldResetFormValuesRef.current = false;
+			let values = resetValues;
+			if (ObjectUtils.isFunction(resetValues)) values = await resetValues();
+			form.reset(values, keepStateOptions);
+		};
+		resetFormValues();
+	}, [...resetDeps]);
+	const onSaveSuccess = () => {
+		shouldResetFormValuesRef.current = true;
+		if (resetFormValuesTimeoutRef.current) clearTimeout(resetFormValuesTimeoutRef.current);
+		resetFormValuesTimeoutRef.current = setTimeout(() => {
+			if (shouldResetFormValuesRef.current) throw new Error(getResetTimeoutErrorMessage(resetTimeout));
+		}, resetTimeout);
+	};
+	useAutosave({
+		form,
+		delay: autosaveDelay,
+		enabled: enableAutosave,
+		trigger: autosaveOn,
+		onSave: useCallback((data) => {
+			const normalizedData = normalizeAutosaveData ? normalizeAutosaveData(data) : data;
+			if (!normalizedData || ObjectUtils.isEmpty(normalizedData)) return Promise.resolve(void 0);
+			return onAutosave(normalizedData);
+		}, [normalizeAutosaveData, onAutosave]),
+		onSaveSuccess
+	});
+	return form;
+}
+//#endregion
+export { useFormAutosave };