@delightui/components 0.1.161 → 0.1.162-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts +1 -1
  2. package/dist/cjs/components/atoms/Checkbox/Checkbox.presenter.d.ts +1 -1
  3. package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.d.ts +1 -1
  4. package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts +2 -2
  5. package/dist/cjs/components/atoms/CustomToggle/CustomToggle.d.ts +1 -1
  6. package/dist/cjs/components/atoms/Input/Input.d.ts +1 -1
  7. package/dist/cjs/components/atoms/Input/Input.presenter.d.ts +2 -2
  8. package/dist/cjs/components/atoms/Password/Password.presenter.d.ts +2 -2
  9. package/dist/cjs/components/atoms/RadioButton/RadioButton.d.ts +1 -1
  10. package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.d.ts +1 -1
  11. package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts +2 -2
  12. package/dist/cjs/components/atoms/TextArea/TextArea.d.ts +1 -1
  13. package/dist/cjs/components/atoms/TextArea/TextArea.presenter.d.ts +1 -1
  14. package/dist/cjs/components/atoms/Toggle/Toggle.d.ts +1 -1
  15. package/dist/cjs/components/atoms/Toggle/Toggle.presenter.d.ts +2 -2
  16. package/dist/cjs/components/atoms/ToggleButton/ToggleButton.d.ts +1 -1
  17. package/dist/cjs/components/molecules/FormField/FormField.d.ts +28 -2
  18. package/dist/cjs/components/molecules/FormField/FormField.presenter.d.ts +14 -8
  19. package/dist/cjs/components/molecules/FormField/FormField.types.d.ts +85 -52
  20. package/dist/cjs/components/molecules/FormField/FormField.utils.d.ts +8 -11
  21. package/dist/cjs/components/molecules/FormField/index.d.ts +1 -2
  22. package/dist/cjs/components/molecules/FormField/useSafeController.d.ts +14 -0
  23. package/dist/cjs/components/molecules/FormField/useSafeFormContext.d.ts +8 -0
  24. package/dist/cjs/components/molecules/Search/Search.d.ts +1 -1
  25. package/dist/cjs/components/molecules/Search/Search.presenter.d.ts +2 -2
  26. package/dist/cjs/components/molecules/Select/Select.presenter.d.ts +4 -4
  27. package/dist/cjs/components/organisms/Form/Form.d.ts +22 -1
  28. package/dist/cjs/components/organisms/Form/Form.presenter.d.ts +21 -0
  29. package/dist/cjs/components/organisms/Form/Form.types.d.ts +27 -131
  30. package/dist/cjs/components/organisms/Form/examples/DropzoneFormExample.d.ts +6 -0
  31. package/dist/cjs/components/organisms/Form/examples/UpdatedFormExample.d.ts +2 -0
  32. package/dist/cjs/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts} +0 -3
  33. package/dist/cjs/components/organisms/Form/index.d.ts +4 -4
  34. package/dist/cjs/components/organisms/Form/useAutosave.d.ts +10 -0
  35. package/dist/cjs/library.js +3 -3
  36. package/dist/cjs/library.js.map +1 -1
  37. package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts +1 -1
  38. package/dist/esm/components/atoms/Checkbox/Checkbox.presenter.d.ts +1 -1
  39. package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.d.ts +1 -1
  40. package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts +2 -2
  41. package/dist/esm/components/atoms/CustomToggle/CustomToggle.d.ts +1 -1
  42. package/dist/esm/components/atoms/Input/Input.d.ts +1 -1
  43. package/dist/esm/components/atoms/Input/Input.presenter.d.ts +2 -2
  44. package/dist/esm/components/atoms/Password/Password.presenter.d.ts +2 -2
  45. package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts +1 -1
  46. package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.d.ts +1 -1
  47. package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts +2 -2
  48. package/dist/esm/components/atoms/TextArea/TextArea.d.ts +1 -1
  49. package/dist/esm/components/atoms/TextArea/TextArea.presenter.d.ts +1 -1
  50. package/dist/esm/components/atoms/Toggle/Toggle.d.ts +1 -1
  51. package/dist/esm/components/atoms/Toggle/Toggle.presenter.d.ts +2 -2
  52. package/dist/esm/components/atoms/ToggleButton/ToggleButton.d.ts +1 -1
  53. package/dist/esm/components/molecules/FormField/FormField.d.ts +28 -2
  54. package/dist/esm/components/molecules/FormField/FormField.presenter.d.ts +14 -8
  55. package/dist/esm/components/molecules/FormField/FormField.types.d.ts +85 -52
  56. package/dist/esm/components/molecules/FormField/FormField.utils.d.ts +8 -11
  57. package/dist/esm/components/molecules/FormField/index.d.ts +1 -2
  58. package/dist/esm/components/molecules/FormField/useSafeController.d.ts +14 -0
  59. package/dist/esm/components/molecules/FormField/useSafeFormContext.d.ts +8 -0
  60. package/dist/esm/components/molecules/Search/Search.d.ts +1 -1
  61. package/dist/esm/components/molecules/Search/Search.presenter.d.ts +2 -2
  62. package/dist/esm/components/molecules/Select/Select.presenter.d.ts +4 -4
  63. package/dist/esm/components/organisms/Form/Form.d.ts +22 -1
  64. package/dist/esm/components/organisms/Form/Form.presenter.d.ts +21 -0
  65. package/dist/esm/components/organisms/Form/Form.types.d.ts +27 -131
  66. package/dist/esm/components/organisms/Form/examples/DropzoneFormExample.d.ts +6 -0
  67. package/dist/esm/components/organisms/Form/examples/UpdatedFormExample.d.ts +2 -0
  68. package/dist/esm/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts} +0 -3
  69. package/dist/esm/components/organisms/Form/index.d.ts +4 -4
  70. package/dist/esm/components/organisms/Form/useAutosave.d.ts +10 -0
  71. package/dist/esm/library.js +3 -3
  72. package/dist/esm/library.js.map +1 -1
  73. package/dist/index.d.ts +165 -232
  74. package/docs/FORM_MIGRATION_GUIDE.md +631 -0
  75. package/docs/components/molecules/FormField.md +129 -34
  76. package/docs/components/organisms/Form.md +858 -162
  77. package/package.json +4 -1
  78. package/dist/cjs/components/organisms/Form/DropzoneFormExample.d.ts +0 -6
  79. package/dist/cjs/components/organisms/Form/Form.utils.d.ts +0 -2
  80. package/dist/cjs/components/organisms/Form/FormContext.d.ts +0 -5
  81. package/dist/cjs/components/organisms/Form/UpdatedFormExample.d.ts +0 -23
  82. package/dist/cjs/components/organisms/Form/useForm.d.ts +0 -50
  83. package/dist/esm/components/organisms/Form/DropzoneFormExample.d.ts +0 -6
  84. package/dist/esm/components/organisms/Form/Form.utils.d.ts +0 -2
  85. package/dist/esm/components/organisms/Form/FormContext.d.ts +0 -5
  86. package/dist/esm/components/organisms/Form/UpdatedFormExample.d.ts +0 -23
  87. package/dist/esm/components/organisms/Form/useForm.d.ts +0 -50
  88. /package/dist/cjs/components/organisms/Form/{AutosaveFormExample.d.ts → examples/AutosaveFormExample.d.ts} +0 -0
  89. /package/dist/esm/components/organisms/Form/{AutosaveFormExample.d.ts → examples/AutosaveFormExample.d.ts} +0 -0
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
- import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, FormHTMLAttributes, Ref, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties, TableHTMLAttributes, TdHTMLAttributes, ReactElement, AriaRole, KeyboardEventHandler } from 'react';
3
+ import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties, TableHTMLAttributes, TdHTMLAttributes, ReactElement, AriaRole, KeyboardEventHandler, Ref } from 'react';
4
+ import { FieldValues, Path, PathValue, UseFormProps } from 'react-hook-form';
4
5
  import { LinkProps } from 'react-router-dom';
5
6
  import { Plugin } from 'flatpickr/dist/types/options';
6
7
  import FlatPickr, { DateTimePickerProps } from 'react-flatpickr';
@@ -188,201 +189,20 @@ interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIco
188
189
  declare const IconButton: (props: IconButtonProps) => react_jsx_runtime.JSX.Element;
189
190
 
190
191
  /**
191
- * Type representing the allowed values for form fields
192
+ * Type representing allowed field values
192
193
  */
193
- type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
194
+ type FieldValue = string | number | Date | boolean | File | null | Array<string | number | Date | File | Record<string, unknown>> | Record<string, unknown>;
194
195
  /**
195
- * Type representing the form values as a partial record of field names to field values
196
- * @example
197
- * ```typescript
198
- * const formState: FormState = {
199
- * name: 'John Doe',
200
- * age: 30,
201
- * dob: new Date('1990-01-01')
202
- * };
203
- * ```
204
- */
205
- type FormState<T extends FieldValue = FieldValue> = Partial<Record<string, T>>;
206
- /**
207
- * Type representing the form errors as a partial record of field names to error messages
208
- */
209
- type FormErrors<T extends FormState = FormState> = Partial<Record<keyof T, string>>;
210
- /**
211
- * Type representing a validation function for a form field
212
- * It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
213
- * @example
214
- * ```typescript
215
- * const nameValidator: FieldValidationFunction = (setError, value) => {
216
- * if (!value) {
217
- * setError('Name is required');
218
- * return false;
219
- * }
220
- * return true;
221
- * };
222
- * ```
223
- */
224
- type FieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
225
- /**
226
- * Type representing the required fields in a form
227
- * It's a partial record of field names to a boolean indicating if the field is required
228
- */
229
- type RequiredFields<T extends FormState = FormState> = Partial<Record<keyof T, boolean>>;
230
- /**
231
- * Type representing the validation functions for each field in a form
232
- * It's a partial record of field names to validation functions (or undefined)
233
- * @example
234
- * ```typescript
235
- * const nameValidator: FieldValidationFunction = (setError, value) => {
236
- * if (!value) {
237
- * setError('Name is required');
238
- * return false;
239
- * }
240
- * return true;
241
- * };
242
- * const fieldValidators: FieldValidators = {
243
- * name: nameValidator,
244
- * age: undefined,
245
- * };
246
- * ```
247
- */
248
- type FieldValidators<T extends FormState = FormState> = Partial<Record<keyof T, FieldValidationFunction | undefined>>;
249
- /**
250
- * Type representing a function that handles form state changes
251
- * It takes the new form state and an error setter function and doesn't return anything
252
- * @example
253
- * ```typescript
254
- * const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
255
- * // Validate form state and set errors
256
- * if (!state.name) {
257
- * setError('name', 'Name is required');
258
- * }
259
- * };
260
- * ```
261
- */
262
- type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
263
- /**
264
- * Type representing a function that validates the entire form
265
- * It takes the form values and an error setter function and returns a boolean indicating if the form is valid
266
- * @example
267
- * ```typescript
268
- * const validateForm: FormValidator = (state, setError) => {
269
- * let isValid = true;
270
- * if (!state.name) {
271
- * setError('name', 'Name is required');
272
- * isValid = false;
273
- * }
274
- * if (!state.age || typeof state.age !== 'number') {
275
- * setError('age', 'Age must be a number');
276
- * isValid = false;
277
- * }
278
- * return isValid;
279
- * };
280
- * ```
281
- */
282
- type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
283
- /**
284
- * Type representing a function that handles form submission.
285
- * It takes updated form state and a function to set error messages for specific fields.
286
- *
287
- * @template T - The type of the form state, defaulting to `FormState`.
288
- *
289
- * @param {T} values - The updated form state values.
290
- * @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
291
- *
292
- * @example
293
- * ```typescript
294
- * const handleFormSubmit: FormSubmitHandler = (values, setError) => {
295
- * // Submit form data
296
- * console.log(values);
297
- * };
298
- * ```
299
- */
300
- type FormSubmitHandler<T extends FormState = FormState> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void;
301
- type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
302
- formRef?: Ref<HTMLFormElement>;
303
- };
304
- type FormContextValues<T extends FormState = FormState> = {
305
- formRef?: Ref<HTMLFormElement>;
306
- formState?: T;
307
- updateFieldValue: (name: string, value: FieldValue) => void;
308
- formErrors: FormErrors<T>;
309
- updateFieldError: (name: keyof T, errorMessage: string) => void;
310
- onFormSubmit: React__default.FormEventHandler<HTMLFormElement>;
311
- updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
312
- updateRequiredFields: (name: keyof T, required?: boolean) => void;
313
- resetForm: () => void;
314
- };
315
- type FormProviderProps<T extends FormState = FormState> = {
316
- formRef?: Ref<HTMLFormElement>;
317
- children?: React__default.ReactNode;
318
- formState?: T;
319
- onFormStateChange?: FormStateChangeHandler<T>;
320
- formValidator?: FormValidator<T>;
321
- onSubmit?: FormSubmitHandler<T>;
322
- validateOnChange?: boolean;
323
- autosave?: boolean;
324
- autosaveDelayMs?: number;
325
- };
326
-
327
- /**
328
- * Props for the FormField component.
329
- */
330
- type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
331
- /**
332
- * Name of the form field
333
- */
334
- name: string;
335
- /**
336
- * Label for the form field
337
- */
338
- label?: string;
339
- /**
340
- * Children for the form field
341
- */
342
- children: React.ReactNode;
343
- /**
344
- * Message for the form field
345
- */
346
- message?: string;
347
- /**
348
- * There is a message/error for the form field
349
- */
350
- hasMessage?: boolean;
351
- /**
352
- * Info icon for the form field
353
- */
354
- infoIcon?: React.ReactNode;
355
- /**
356
- * Indicates if the form field is required
357
- */
358
- required?: boolean;
359
- /**
360
- * Validation function for the form field
361
- */
362
- validate?: FieldValidationFunction;
363
- /**
364
- * Indicates if the form field is disabled
365
- */
366
- disabled?: boolean;
367
- /**
368
- * Indicates if the form field is invalid
369
- */
370
- invalid?: boolean;
371
- /**
372
- * Id for the form field
373
- */
374
- id?: string;
375
- };
376
- /**
377
- * Props that must be implemented by all form field components that are controlled inputs
196
+ * Props that all controlled form components should accept
197
+ * This allows them to work both standalone and within FormField
378
198
  */
379
199
  type ControlledFormComponentProps<T extends FieldValue> = {
380
200
  /**
381
- * the initial value for the field
201
+ * The initial value for the field
382
202
  */
383
203
  initialValue?: T;
384
204
  /**
385
- * the initial value for the field
205
+ * The initial checked state (for checkboxes/toggles)
386
206
  */
387
207
  checked?: boolean;
388
208
  /**
@@ -414,6 +234,83 @@ type ControlledFormComponentProps<T extends FieldValue> = {
414
234
  */
415
235
  id?: string;
416
236
  };
237
+ /**
238
+ * Field-level validation function
239
+ * Returns error message string if invalid, undefined if valid
240
+ */
241
+ type FieldValidationFunction<TValue = FieldValue> = (value: TValue) => string | undefined;
242
+ /**
243
+ * Field-level async validation function
244
+ * Returns error message string if invalid, undefined if valid
245
+ */
246
+ type AsyncFieldValidationFunction<TValue = FieldValue> = (value: TValue) => Promise<string | undefined>;
247
+ /**
248
+ * FormField component props for use within a Form
249
+ */
250
+ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
251
+ /** Field name (must match form value key) - type-safe */
252
+ name: TName;
253
+ /** Field label */
254
+ label?: string;
255
+ /** Display name for validation messages (defaults to label or name) */
256
+ displayName?: string;
257
+ /**
258
+ * Child component - will be cloned with injected props:
259
+ * value, onValueChange, onBlur, ref, disabled, invalid, required, id, name
260
+ */
261
+ children: ReactNode;
262
+ /** Field is required */
263
+ required?: boolean;
264
+ /** Sync validation function */
265
+ validate?: FieldValidationFunction<PathValue<TFieldValues, TName>>;
266
+ /** Async validation function */
267
+ asyncValidate?: AsyncFieldValidationFunction<PathValue<TFieldValues, TName>>;
268
+ /** Default value for this field */
269
+ defaultValue?: PathValue<TFieldValues, TName>;
270
+ /** Info message to display */
271
+ message?: string;
272
+ /** Disabled state */
273
+ disabled?: boolean;
274
+ /** External invalid state */
275
+ invalid?: boolean;
276
+ /** Info icon element */
277
+ infoIcon?: ReactNode;
278
+ /** Field ID */
279
+ id?: string;
280
+ };
281
+ /**
282
+ * Standalone FormField props (works without Form context)
283
+ */
284
+ type StandaloneFieldProps<TValue = FieldValue> = {
285
+ /** Field name */
286
+ name: string;
287
+ /** Field label */
288
+ label?: string;
289
+ /** Display name for validation messages */
290
+ displayName?: string;
291
+ /** Child component to render */
292
+ children: ReactNode;
293
+ /** Field is required */
294
+ required?: boolean;
295
+ /** Sync validation function */
296
+ validate?: FieldValidationFunction<TValue>;
297
+ /** Async validation function */
298
+ asyncValidate?: AsyncFieldValidationFunction<TValue>;
299
+ /** Controlled value */
300
+ value?: TValue;
301
+ /** Controlled onChange */
302
+ onChange?: (value: TValue) => void;
303
+ /** External error */
304
+ error?: string;
305
+ /** Info message */
306
+ message?: string;
307
+ /** Disabled state */
308
+ disabled?: boolean;
309
+ /** Info icon element */
310
+ infoIcon?: ReactNode;
311
+ /** Field ID */
312
+ id?: string;
313
+ };
417
314
 
418
315
  /**
419
316
  * Enum for different input types.
@@ -1419,7 +1316,32 @@ type DatePickerProps = Omit<DatePickerBaseSharedProps, 'noCalendar' | 'inline'>
1419
1316
 
1420
1317
  declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
1421
1318
 
1422
- declare const FormField: (props: FormFieldProps) => react_jsx_runtime.JSX.Element;
1319
+ /**
1320
+ * Smart FormField component that works both inside and outside Form context
1321
+ *
1322
+ * Usage inside Form:
1323
+ * ```tsx
1324
+ * <Form defaultValues={{ email: '' }}>
1325
+ * <FormField name="email" label="Email" required>
1326
+ * <Input placeholder="Enter email" />
1327
+ * </FormField>
1328
+ * </Form>
1329
+ * ```
1330
+ *
1331
+ * Usage standalone:
1332
+ * ```tsx
1333
+ * <FormField
1334
+ * name="email"
1335
+ * label="Email"
1336
+ * value={email}
1337
+ * onChange={setEmail}
1338
+ * required
1339
+ * >
1340
+ * <Input placeholder="Enter email" />
1341
+ * </FormField>
1342
+ * ```
1343
+ */
1344
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => react_jsx_runtime.JSX.Element;
1423
1345
 
1424
1346
  type GridProps = HTMLAttributes<HTMLDivElement> & {
1425
1347
  columns?: number;
@@ -1864,6 +1786,38 @@ type RadioGroupProps = ControlledFormComponentProps<string | number> & {
1864
1786
 
1865
1787
  declare const RadioGroup: (props: RadioGroupProps) => react_jsx_runtime.JSX.Element;
1866
1788
 
1789
+ /**
1790
+ * Form submission handler
1791
+ */
1792
+ type FormSubmitHandler<TFormValues extends FieldValues = FieldValues> = (values: TFormValues) => void | Promise<void>;
1793
+ /**
1794
+ * Form component props
1795
+ */
1796
+ type FormProps<TFormValues extends FieldValues = FieldValues> = {
1797
+ children: ReactNode;
1798
+ /** Initial form values (uncontrolled mode) */
1799
+ defaultValues?: UseFormProps<TFormValues>['defaultValues'];
1800
+ /** Form submission handler */
1801
+ onSubmit?: FormSubmitHandler<TFormValues>;
1802
+ /** Enable autosave functionality */
1803
+ autosave?: boolean;
1804
+ /** Autosave debounce delay in milliseconds */
1805
+ autosaveDelayMs?: number;
1806
+ /** RHF validation mode */
1807
+ mode?: UseFormProps<TFormValues>['mode'];
1808
+ /** Additional RHF options */
1809
+ formOptions?: Omit<UseFormProps<TFormValues>, 'defaultValues' | 'mode'>;
1810
+ /** Form HTML attributes */
1811
+ className?: string;
1812
+ style?: React.CSSProperties;
1813
+ formRef?: React.Ref<HTMLFormElement>;
1814
+ };
1815
+ /**
1816
+ * @deprecated Use FormProps instead
1817
+ * Legacy alias for backwards compatibility
1818
+ */
1819
+ type FormProviderProps<TFormValues extends FieldValues = FieldValues> = Omit<FormProps<TFormValues>, 'className' | 'style' | 'formRef'>;
1820
+
1867
1821
  /**
1868
1822
  * Props for the Option component, extending LiHTMLAttributes<HTMLLIElement>.
1869
1823
  * Represents an option within a Select component.
@@ -2446,56 +2400,35 @@ type DropzoneContentProps = {
2446
2400
  declare const DropzoneContent: (props: DropzoneContentProps) => react_jsx_runtime.JSX.Element;
2447
2401
 
2448
2402
  /**
2449
- * Custom hook to access form context values.
2450
- * Provides direct access to all form state management functions and values.
2451
- *
2452
- * @throws {Error} If used outside of a Form component
2453
- * @returns {FormContextValues} Object containing form state and control functions
2403
+ * Form component - clean wrapper around React Hook Form
2454
2404
  *
2455
- * @example
2405
+ * Usage:
2456
2406
  * ```tsx
2457
- * const MyCustomField = () => {
2458
- * const {
2459
- * formState,
2460
- * formErrors,
2461
- * updateFieldValue,
2462
- * resetForm
2463
- * } = useForm();
2464
- *
2465
- * return (
2466
- * <div>
2467
- * <input
2468
- * value={formState.myField || ''}
2469
- * onChange={(e) => updateFieldValue('myField', e.target.value)}
2470
- * />
2471
- * {formErrors.myField && <span>{formErrors.myField}</span>}
2472
- * </div>
2473
- * );
2474
- * };
2407
+ * <Form defaultValues={{ name: '' }} onSubmit={handleSubmit}>
2408
+ * <FormField name="name" label="Name">
2409
+ * <Input />
2410
+ * </FormField>
2411
+ * <Button actionType="submit">Submit</Button>
2412
+ * </Form>
2475
2413
  * ```
2476
- */
2477
- declare const useForm: <T extends FormState = Partial<Record<string, FieldValue>>>() => FormContextValues<T>;
2478
- /**
2479
- * Type-safe version of useForm that returns properly typed form context
2480
2414
  *
2481
- * @example
2415
+ * Access RHF methods anywhere in form:
2482
2416
  * ```tsx
2483
- * interface MyFormData {
2484
- * name: string;
2485
- * email: string;
2486
- * age: number;
2487
- * }
2488
- *
2489
- * const MyComponent = () => {
2490
- * const form = useFormTyped<MyFormData>();
2491
- * // form.formState is now typed as MyFormData
2492
- * // form.formErrors is now typed as FormErrors<MyFormData>
2493
- * };
2417
+ * import { useFormContext, useWatch } from 'react-hook-form';
2418
+ * const { setValue, reset } = useFormContext();
2419
+ * const name = useWatch({ name: 'name' });
2494
2420
  * ```
2495
2421
  */
2496
- declare const useFormTyped: <T extends FormState>() => FormContextValues<T>;
2422
+ declare const Form: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => react_jsx_runtime.JSX.Element;
2497
2423
 
2498
- declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => react_jsx_runtime.JSX.Element;
2424
+ /**
2425
+ * Hook to enable autosave functionality for forms
2426
+ * Debounces changes and validates before submitting
2427
+ *
2428
+ * Note: Uses formState.isDirty to detect changes instead of watching all values
2429
+ * for better performance
2430
+ */
2431
+ declare const useAutosave: <TFormValues extends FieldValues>(enabled: boolean, onSubmit: FormSubmitHandler<TFormValues> | undefined, delayMs?: number) => void;
2499
2432
 
2500
2433
  type TableProps = TableHTMLAttributes<HTMLTableElement> & {
2501
2434
  /**
@@ -2856,4 +2789,4 @@ declare const NotificationContext: React__default.Context<NotificationContextVal
2856
2789
  declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
2857
2790
  declare const useNotification: () => NotificationContextValue;
2858
2791
 
2859
- export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, ChipInput, type ChipInputProps, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DateInput, type DateInputProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type Notification, type NotificationContainerProps, NotificationContext, type NotificationOffset, type NotificationPosition, NotificationProvider, type NotificationTrigger, Option, type OptionLike, type OptionLikeKey, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Search, type SearchCallback, type SearchStyleEnum as SearchModeEnum, type SearchProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type TriggerNotificationPayload, type UploadedFileMetadata, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useDebounce, useDropzoneContext, useForm, useFormTyped, useInflateView, useModal, useNotification, useSelectContext, useTab };
2792
+ export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, type AsyncFieldValidationFunction, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, ChipInput, type ChipInputProps, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type ControlledFormComponentProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DateInput, type DateInputProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValue, Form, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormSubmitHandler, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type Notification, type NotificationContainerProps, NotificationContext, type NotificationOffset, type NotificationPosition, NotificationProvider, type NotificationTrigger, Option, type OptionLike, type OptionLikeKey, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, ResponsiveComponent, type ResponsiveComponentProps, Search, type SearchCallback, type SearchStyleEnum as SearchModeEnum, type SearchProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, type StandaloneFieldProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type TriggerNotificationPayload, type UploadedFileMetadata, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useAutosave, useDebounce, useDropzoneContext, useInflateView, useModal, useNotification, useSelectContext, useTab };