@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/primitives/components/form/form-fields.d.ts

@@ -0,0 +1,270 @@
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import type { CascaderOption } from '../cascader';
+import { Cascader } from '../cascader';
+import { Checkbox } from '../checkbox';
+import { DatePicker } from '../date-picker';
+import { Input } from '../input';
+import { RadioGroup } from '../radio';
+import { Select } from '../select';
+import { Switch } from '../switch';
+import type { TagInputOption } from '../tag-input';
+import { TagInput } from '../tag-input';
+import { TextArea } from '../textarea';
+type BaseFormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, 'render'> & {
+    label?: string;
+    description?: string;
+    placeholder?: string;
+};
+export type FormInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    type?: React.ComponentProps<typeof Input>['type'];
+    variant?: React.ComponentProps<typeof Input>['variant'];
+    inputProps?: Omit<React.ComponentProps<typeof Input>, 'type' | 'variant'>;
+};
+/**
+ * Pre-built Input field component with integrated form state.
+ * Reduces boilerplate by combining FormField, FormItem, FormLabel, FormControl, and FormMessage.
+ *
+ * @example
+ * ```tsx
+ * <FormInput
+ *   control={form.control}
+ *   name="email"
+ *   label="Email"
+ *   type="email"
+ *   placeholder="user@example.com"
+ *   description="We'll never share your email"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, placeholder, type, variant, inputProps, ...fieldProps }: FormInputProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormTextAreaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    textAreaProps?: React.ComponentProps<typeof TextArea>;
+};
+/**
+ * Pre-built TextArea field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormTextArea
+ *   control={form.control}
+ *   name="bio"
+ *   label="Bio"
+ *   placeholder="Tell us about yourself"
+ *   description="Max 200 characters"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormTextArea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, placeholder, textAreaProps, ...fieldProps }: FormTextAreaProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormSelectOption = {
+    /** Value written to the form field when chosen; also the React key, so keep it unique */
+    value: string;
+    /** Text shown in the dropdown */
+    label: string;
+    /** Shows the option but prevents choosing it */
+    disabled?: boolean;
+};
+export type FormSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    options: FormSelectOption[];
+    selectProps?: Omit<React.ComponentProps<typeof Select>, 'onValueChange' | 'defaultValue'>;
+};
+/**
+ * Pre-built Select field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormSelect
+ *   control={form.control}
+ *   name="role"
+ *   label="Role"
+ *   placeholder="Select a role"
+ *   options={[
+ *     { value: 'admin', label: 'Admin' },
+ *     { value: 'user', label: 'User' },
+ *   ]}
+ *   description="Your access level"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, placeholder, options, selectProps, ...fieldProps }: FormSelectProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    checkboxProps?: React.ComponentProps<typeof Checkbox>;
+    layout?: 'row' | 'column';
+};
+/**
+ * Pre-built Checkbox field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormCheckbox
+ *   control={form.control}
+ *   name="terms"
+ *   label="Accept terms and conditions"
+ *   description="You must agree to continue"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormCheckbox: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, checkboxProps, layout, ...fieldProps }: FormCheckboxProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    switchProps?: Omit<React.ComponentProps<typeof Switch>, 'checked' | 'onCheckedChange'>;
+    layout?: 'row' | 'column';
+};
+/**
+ * Pre-built Switch field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormSwitch
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   description="Receive alerts when miners go offline"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormSwitch: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, switchProps, layout, ...fieldProps }: FormSwitchProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormRadioOption = {
+    /** Value written to the form field when chosen; also the React key and part of the input `id`, so keep it unique */
+    value: string;
+    /** Text of the radio's `<label>` */
+    label: string;
+    /** Shows the radio but prevents choosing it */
+    disabled?: boolean;
+};
+export type FormRadioGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    options: FormRadioOption[];
+    orientation?: 'horizontal' | 'vertical';
+    radioGroupProps?: Omit<React.ComponentProps<typeof RadioGroup>, 'onValueChange' | 'defaultValue' | 'orientation'>;
+};
+/**
+ * Pre-built RadioGroup field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormRadioGroup
+ *   control={form.control}
+ *   name="priority"
+ *   label="Priority"
+ *   options={[
+ *     { value: 'low', label: 'Low' },
+ *     { value: 'medium', label: 'Medium' },
+ *     { value: 'high', label: 'High' },
+ *   ]}
+ *   orientation="horizontal"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormRadioGroup: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, options, orientation, radioGroupProps, ...fieldProps }: FormRadioGroupProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormDatePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    datePickerProps?: Omit<React.ComponentProps<typeof DatePicker>, 'selected' | 'onSelect'>;
+};
+/**
+ * Pre-built DatePicker field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormDatePicker
+ *   control={form.control}
+ *   name="startDate"
+ *   label="Start Date"
+ *   placeholder="Pick a date"
+ *   description="When should this take effect?"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormDatePicker: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, placeholder, datePickerProps, ...fieldProps }: FormDatePickerProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormTagInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    options?: TagInputOption[];
+    allowCustomTags?: boolean;
+    variant?: 'default' | 'search';
+    tagInputProps?: Omit<React.ComponentProps<typeof TagInput>, 'value' | 'onTagsChange' | 'label' | 'placeholder'>;
+};
+/**
+ * Pre-built TagInput field component with integrated form state.
+ * Perfect for multi-select with search and tag display.
+ *
+ * @example
+ * ```tsx
+ * <FormTagInput
+ *   control={form.control}
+ *   name="tags"
+ *   label="Tags"
+ *   placeholder="Add tags..."
+ *   options={['React', 'TypeScript', 'Node.js']}
+ *   description="Select or type tags"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormTagInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, placeholder, options, allowCustomTags, variant, tagInputProps, ...fieldProps }: FormTagInputProps<TFieldValues, TName>) => React.JSX.Element;
+export type FormCascaderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = BaseFormFieldProps<TFieldValues, TName> & {
+    options: CascaderOption[];
+    multiple?: boolean;
+    cascaderProps?: Omit<React.ComponentProps<typeof Cascader>, 'value' | 'onChange' | 'options' | 'placeholder'>;
+};
+/**
+ * Pre-built Cascader field component with integrated form state.
+ * Perfect for hierarchical selections like categories and subcategories.
+ *
+ * @example
+ * ```tsx
+ * <FormCascader
+ *   control={form.control}
+ *   name="category"
+ *   label="Category"
+ *   placeholder="Select category..."
+ *   options={[
+ *     {
+ *       value: 'electronics',
+ *       label: 'Electronics',
+ *       children: [
+ *         { value: 'phones', label: 'Phones' },
+ *         { value: 'laptops', label: 'Laptops' },
+ *       ],
+ *     },
+ *   ]}
+ *   description="Choose a category and subcategory"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection mode
+ * <FormCascader
+ *   control={form.control}
+ *   name="categories"
+ *   label="Categories"
+ *   placeholder="Select categories..."
+ *   options={categoryOptions}
+ *   multiple
+ *   description="Select multiple categories"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const FormCascader: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, description, placeholder, options, multiple, cascaderProps, ...fieldProps }: FormCascaderProps<TFieldValues, TName>) => React.JSX.Element;
+export {};

package/dist/primitives/components/form/form-fields.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cascader } from '../cascader';
+import { Checkbox } from '../checkbox';
+import { DatePicker } from '../date-picker';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Radio, RadioGroup } from '../radio';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { Switch } from '../switch';
+import { TagInput } from '../tag-input';
+import { TextArea } from '../textarea';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './index';
+/**
+ * Pre-built Input field component with integrated form state.
+ * Reduces boilerplate by combining FormField, FormItem, FormLabel, FormControl, and FormMessage.
+ *
+ * @example
+ * ```tsx
+ * <FormInput
+ *   control={form.control}
+ *   name="email"
+ *   label="Email"
+ *   type="email"
+ *   placeholder="user@example.com"
+ *   description="We'll never share your email"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormInput = ({ label, description, placeholder, type, variant, inputProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(Input, { type: type, variant: variant, placeholder: placeholder, ...inputProps, ...field }) }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built TextArea field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormTextArea
+ *   control={form.control}
+ *   name="bio"
+ *   label="Bio"
+ *   placeholder="Tell us about yourself"
+ *   description="Max 200 characters"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormTextArea = ({ label, description, placeholder, textAreaProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(TextArea, { placeholder: placeholder, ...textAreaProps, ...field }) }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built Select field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormSelect
+ *   control={form.control}
+ *   name="role"
+ *   label="Role"
+ *   placeholder="Select a role"
+ *   options={[
+ *     { value: 'admin', label: 'Admin' },
+ *     { value: 'user', label: 'User' },
+ *   ]}
+ *   description="Your access level"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormSelect = ({ label, description, placeholder, options, selectProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsxs(Select, { onValueChange: field.onChange, value: field.value ?? "", ...selectProps, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: placeholder }) }) }), _jsx(SelectContent, { children: options.map(({ value, label, disabled }) => (_jsx(SelectItem, { value: value, disabled: disabled, children: label }, value))) })] }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built Checkbox field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormCheckbox
+ *   control={form.control}
+ *   name="terms"
+ *   label="Accept terms and conditions"
+ *   description="You must agree to continue"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormCheckbox = ({ label, description, checkboxProps, layout = 'row', ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: layout,
+                    alignItems: layout === 'row' ? 'center' : 'flex-start',
+                    gap: layout === 'row' ? '0.5rem' : '0.75rem',
+                }, children: [_jsx(FormControl, { children: _jsx(Checkbox, { checked: field.value, onCheckedChange: field.onChange, ...checkboxProps }) }), label && _jsx(FormLabel, { children: label })] }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built Switch field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormSwitch
+ *   control={form.control}
+ *   name="notifications"
+ *   label="Enable notifications"
+ *   description="Receive alerts when miners go offline"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormSwitch = ({ label, description, switchProps, layout = 'row', ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: layout,
+                    alignItems: layout === 'row' ? 'center' : 'flex-start',
+                    gap: '0.75rem',
+                }, children: [_jsx(FormControl, { children: _jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, ...switchProps }) }), label && _jsx(FormLabel, { children: label })] }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built RadioGroup field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormRadioGroup
+ *   control={form.control}
+ *   name="priority"
+ *   label="Priority"
+ *   options={[
+ *     { value: 'low', label: 'Low' },
+ *     { value: 'medium', label: 'Medium' },
+ *     { value: 'high', label: 'High' },
+ *   ]}
+ *   orientation="horizontal"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormRadioGroup = ({ label, description, options, orientation = 'vertical', radioGroupProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(RadioGroup, { onValueChange: field.onChange, defaultValue: field.value, orientation: orientation, ...radioGroupProps, children: options.map(({ value, label, disabled }) => {
+                        const id = `${field.name}-${value}`;
+                        return (_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '0.375rem',
+                            }, children: [_jsx(Radio, { value: value, id: id, disabled: disabled }), _jsx(Label, { htmlFor: id, children: label })] }, value));
+                    }) }) }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built DatePicker field component with integrated form state.
+ *
+ * @example
+ * ```tsx
+ * <FormDatePicker
+ *   control={form.control}
+ *   name="startDate"
+ *   label="Start Date"
+ *   placeholder="Pick a date"
+ *   description="When should this take effect?"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormDatePicker = ({ label, description, placeholder, datePickerProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(DatePicker, { selected: field.value, onSelect: field.onChange, placeholder: placeholder, ...datePickerProps }) }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built TagInput field component with integrated form state.
+ * Perfect for multi-select with search and tag display.
+ *
+ * @example
+ * ```tsx
+ * <FormTagInput
+ *   control={form.control}
+ *   name="tags"
+ *   label="Tags"
+ *   placeholder="Add tags..."
+ *   options={['React', 'TypeScript', 'Node.js']}
+ *   description="Select or type tags"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormTagInput = ({ label, description, placeholder, options, allowCustomTags = true, variant = 'search', tagInputProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(TagInput, { value: field.value || [], onTagsChange: field.onChange, options: options, placeholder: placeholder, allowCustomTags: allowCustomTags, variant: variant, ...tagInputProps }) }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));
+/**
+ * Pre-built Cascader field component with integrated form state.
+ * Perfect for hierarchical selections like categories and subcategories.
+ *
+ * @example
+ * ```tsx
+ * <FormCascader
+ *   control={form.control}
+ *   name="category"
+ *   label="Category"
+ *   placeholder="Select category..."
+ *   options={[
+ *     {
+ *       value: 'electronics',
+ *       label: 'Electronics',
+ *       children: [
+ *         { value: 'phones', label: 'Phones' },
+ *         { value: 'laptops', label: 'Laptops' },
+ *       ],
+ *     },
+ *   ]}
+ *   description="Choose a category and subcategory"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection mode
+ * <FormCascader
+ *   control={form.control}
+ *   name="categories"
+ *   label="Categories"
+ *   placeholder="Select categories..."
+ *   options={categoryOptions}
+ *   multiple
+ *   description="Select multiple categories"
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const FormCascader = ({ label, description, placeholder, options, multiple = false, cascaderProps, ...fieldProps }) => (_jsx(FormField, { ...fieldProps, render: ({ field }) => (_jsxs(FormItem, { children: [label && _jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx(Cascader, { value: field.value, onChange: field.onChange, options: options, placeholder: placeholder, multiple: multiple, ...cascaderProps }) }), description && _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] })) }));

package/dist/primitives/components/form/form-hooks.d.ts

@@ -0,0 +1,50 @@
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
+export type UseFormResetOptions<TFieldValues extends FieldValues = FieldValues> = {
+    /**
+     * The form instance from useForm()
+     */
+    form: UseFormReturn<TFieldValues>;
+    /**
+     * Optional callback called before reset
+     */
+    onBeforeReset?: VoidFunction;
+    /**
+     * Optional callback called after reset
+     */
+    onAfterReset?: VoidFunction;
+};
+export type UseFormResetReturn = {
+    /**
+     * Reset the form to default values
+     */
+    resetForm: VoidFunction;
+    /**
+     * Whether the form has been modified from its default values
+     */
+    isDirty: boolean;
+};
+/**
+ * Hook to handle form reset with callbacks.
+ *
+ * @example
+ * ```tsx
+ * const form = useForm<FormValues>({ defaultValues: { email: '' } })
+ * const { resetForm, isDirty } = useFormReset({
+ *   form,
+ *   onAfterReset: () => toast.info('Form reset'),
+ * })
+ *
+ * return (
+ *   <Form form={form} onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormInput control={form.control} name="email" label="Email" />
+ *     <Button type="button" onClick={resetForm} disabled={!isDirty}>
+ *       Reset
+ *     </Button>
+ *   </Form>
+ * )
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const useFormReset: <TFieldValues extends FieldValues = FieldValues>({ form, onBeforeReset, onAfterReset, }: UseFormResetOptions<TFieldValues>) => UseFormResetReturn;

package/dist/primitives/components/form/form-hooks.js

@@ -0,0 +1,35 @@
+/**
+ * Hook to handle form reset with callbacks.
+ *
+ * @example
+ * ```tsx
+ * const form = useForm<FormValues>({ defaultValues: { email: '' } })
+ * const { resetForm, isDirty } = useFormReset({
+ *   form,
+ *   onAfterReset: () => toast.info('Form reset'),
+ * })
+ *
+ * return (
+ *   <Form form={form} onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormInput control={form.control} name="email" label="Email" />
+ *     <Button type="button" onClick={resetForm} disabled={!isDirty}>
+ *       Reset
+ *     </Button>
+ *   </Form>
+ * )
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const useFormReset = ({ form, onBeforeReset, onAfterReset, }) => {
+    const resetForm = () => {
+        onBeforeReset?.();
+        form.reset();
+        onAfterReset?.();
+    };
+    return {
+        resetForm,
+        isDirty: form.formState.isDirty,
+    };
+};