@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
@@ -1,4 +1,4 @@
1
- declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
1
+ declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../..").ControlledFormComponentProps<boolean> & {
2
2
  children?: React.ReactNode;
3
3
  size?: import("./Checkbox.types").CheckboxSizeEnum;
4
4
  type?: import("./Checkbox.types").CheckboxTypeEnum;
@@ -271,8 +271,8 @@ declare const usePresenter: (props: CheckboxProps) => {
271
271
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
272
272
  pattern?: string | undefined;
273
273
  step?: number | string | undefined;
274
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
275
274
  accept?: string | undefined;
275
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
276
276
  capture?: boolean | "user" | "environment" | undefined;
277
277
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
278
278
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
2
+ declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../..").ControlledFormComponentProps<boolean> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("..").CheckboxSizeEnum;
5
5
  type?: import("..").CheckboxTypeEnum;
@@ -278,9 +278,8 @@ declare const usePresenter: (props: CheckboxItemProps) => {
278
278
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
279
279
  pattern?: string | undefined;
280
280
  step?: number | string | undefined;
281
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
282
- name?: string | undefined;
283
281
  accept?: string | undefined;
282
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
284
283
  capture?: boolean | "user" | "environment" | undefined;
285
284
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
286
285
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -293,6 +292,7 @@ declare const usePresenter: (props: CheckboxItemProps) => {
293
292
  min?: number | string | undefined;
294
293
  minLength?: number | undefined;
295
294
  multiple?: boolean | undefined;
295
+ name?: string | undefined;
296
296
  placeholder?: string | undefined;
297
297
  readOnly?: boolean | undefined;
298
298
  initialValue?: boolean | undefined;
@@ -1,4 +1,4 @@
1
- declare const CustomToggle: import("react").ForwardRefExoticComponent<import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
1
+ declare const CustomToggle: import("react").ForwardRefExoticComponent<import("../..").ControlledFormComponentProps<boolean> & {
2
2
  offContent?: import("react").ReactNode;
3
3
  onContent?: import("react").ReactNode;
4
4
  className?: string;
@@ -1,4 +1,4 @@
1
- declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string> & {
1
+ declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../..").ControlledFormComponentProps<string> & {
2
2
  inputType?: import("./Input.types").InputTypeEnum;
3
3
  leadingIcon?: React.ReactNode;
4
4
  trailingIcon?: React.ReactNode;
@@ -280,9 +280,8 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
280
280
  pattern?: string | undefined;
281
281
  size?: number | undefined;
282
282
  step?: number | string | undefined;
283
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
284
- name?: string | undefined;
285
283
  accept?: string | undefined;
284
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
286
285
  capture?: boolean | "user" | "environment" | undefined;
287
286
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
288
287
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -295,6 +294,7 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
295
294
  min?: number | string | undefined;
296
295
  minLength?: number | undefined;
297
296
  multiple?: boolean | undefined;
297
+ name?: string | undefined;
298
298
  placeholder?: string | undefined;
299
299
  readOnly?: boolean | undefined;
300
300
  initialValue?: string | undefined;
@@ -287,9 +287,8 @@ declare const usePresenter: (props: PasswordProps) => {
287
287
  size?: number | undefined;
288
288
  leadingIcon?: React.ReactNode;
289
289
  step?: number | string | undefined;
290
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
291
- name?: string | undefined;
292
290
  accept?: string | undefined;
291
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
293
292
  capture?: boolean | "user" | "environment" | undefined;
294
293
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
295
294
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -302,6 +301,7 @@ declare const usePresenter: (props: PasswordProps) => {
302
301
  min?: number | string | undefined;
303
302
  minLength?: number | undefined;
304
303
  multiple?: boolean | undefined;
304
+ name?: string | undefined;
305
305
  placeholder?: string | undefined;
306
306
  readOnly?: boolean | undefined;
307
307
  onValueChange?: ((value: string) => void) | undefined;
@@ -1,4 +1,4 @@
1
- declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string | number> & {
1
+ declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../..").ControlledFormComponentProps<string | number> & {
2
2
  children?: React.ReactNode;
3
3
  size?: import("./RadioButton.types").RadioButtonSizeEnum;
4
4
  labelAlignment?: import("./RadioButton.types").RadioButtonLabelAlignmentEnum;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string | number> & {
2
+ declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../..").ControlledFormComponentProps<string | number> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("..").RadioButtonSizeEnum;
5
5
  labelAlignment?: import("..").RadioButtonLabelAlignmentEnum;
@@ -285,9 +285,8 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
285
285
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
286
286
  pattern?: string | undefined;
287
287
  step?: number | string | undefined;
288
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
289
- name?: string | undefined;
290
288
  accept?: string | undefined;
289
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
291
290
  capture?: boolean | "user" | "environment" | undefined;
292
291
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
293
292
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -300,6 +299,7 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
300
299
  min?: number | string | undefined;
301
300
  minLength?: number | undefined;
302
301
  multiple?: boolean | undefined;
302
+ name?: string | undefined;
303
303
  placeholder?: string | undefined;
304
304
  readOnly?: boolean | undefined;
305
305
  initialValue?: string | number | undefined;
@@ -1,2 +1,2 @@
1
- declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string> & import("react").RefAttributes<HTMLTextAreaElement>>;
1
+ declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & import("../..").ControlledFormComponentProps<string> & import("react").RefAttributes<HTMLTextAreaElement>>;
2
2
  export default TextArea;
@@ -273,9 +273,9 @@ declare const usePresenter: (props: TextAreaProps) => {
273
273
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
274
274
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
275
275
  autoComplete?: string | undefined;
276
- name?: string | undefined;
277
276
  maxLength?: number | undefined;
278
277
  minLength?: number | undefined;
278
+ name?: string | undefined;
279
279
  placeholder?: string | undefined;
280
280
  readOnly?: boolean | undefined;
281
281
  cols?: number | undefined;
@@ -1,4 +1,4 @@
1
- declare const Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
1
+ declare const Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & import("../..").ControlledFormComponentProps<boolean> & {
2
2
  children?: React.ReactNode;
3
3
  labelAlignment?: import("./Toggle.types").ToggleLabelAlignmentEnum;
4
4
  } & import("react").RefAttributes<HTMLInputElement>>;
@@ -278,9 +278,8 @@ declare const usePresenter: (props: ToggleProps) => {
278
278
  pattern?: string | undefined;
279
279
  size?: number | undefined;
280
280
  step?: number | string | undefined;
281
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
282
- name?: string | undefined;
283
281
  accept?: string | undefined;
282
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
284
283
  capture?: boolean | "user" | "environment" | undefined;
285
284
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
286
285
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -293,6 +292,7 @@ declare const usePresenter: (props: ToggleProps) => {
293
292
  min?: number | string | undefined;
294
293
  minLength?: number | undefined;
295
294
  multiple?: boolean | undefined;
295
+ name?: string | undefined;
296
296
  placeholder?: string | undefined;
297
297
  readOnly?: boolean | undefined;
298
298
  initialValue?: boolean | undefined;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
2
+ declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & import("../..").ControlledFormComponentProps<boolean> & {
3
3
  defaultChecked?: boolean;
4
4
  children?: React.ReactNode;
5
5
  className?: string;
@@ -1,3 +1,29 @@
1
- import { FormFieldProps } from './FormField.types';
2
- declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
1
+ import type { FieldValues, Path } from 'react-hook-form';
2
+ import type { FormFieldProps, StandaloneFieldProps } from './FormField.types';
3
+ /**
4
+ * Smart FormField component that works both inside and outside Form context
5
+ *
6
+ * Usage inside Form:
7
+ * ```tsx
8
+ * <Form defaultValues={{ email: '' }}>
9
+ * <FormField name="email" label="Email" required>
10
+ * <Input placeholder="Enter email" />
11
+ * </FormField>
12
+ * </Form>
13
+ * ```
14
+ *
15
+ * Usage standalone:
16
+ * ```tsx
17
+ * <FormField
18
+ * name="email"
19
+ * label="Email"
20
+ * value={email}
21
+ * onChange={setEmail}
22
+ * required
23
+ * >
24
+ * <Input placeholder="Enter email" />
25
+ * </FormField>
26
+ * ```
27
+ */
28
+ declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => import("react/jsx-runtime").JSX.Element;
3
29
  export default FormField;
@@ -1,16 +1,22 @@
1
- import { FormFieldProps } from './FormField.types';
2
- declare const usePresenter: (props: FormFieldProps) => {
1
+ import { type FieldValues, type Path } from 'react-hook-form';
2
+ import type { FormFieldProps, StandaloneFieldProps } from './FormField.types';
3
+ /**
4
+ * Presenter hook for FormField
5
+ * Handles both Form-integrated and standalone modes
6
+ */
7
+ declare const usePresenter: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => {
8
+ fieldId: string;
3
9
  label: string | undefined;
4
10
  required: boolean | undefined;
5
- infoIcon: import("react").ReactNode;
6
- children: import("react").ReactNode;
7
11
  messageText: string | undefined;
8
- fieldId: string;
12
+ isInvalid: boolean;
13
+ isValidating: boolean;
14
+ infoIcon: import("react").ReactNode;
9
15
  variantProps: {
10
16
  'component-variant': string;
11
17
  };
12
- showMessageContainer: string | true | undefined;
13
- showErrorIcon: string | false | undefined;
14
- showInfoIcon: string | false | undefined;
18
+ field: import("react-hook-form").ControllerRenderProps<TFieldValues, TName>;
19
+ children: import("react").ReactNode;
20
+ disabled: boolean | undefined;
15
21
  };
16
22
  export default usePresenter;
@@ -1,64 +1,20 @@
1
- import type { HTMLAttributes } from 'react';
2
- import { FieldValidationFunction, FieldValue } from '../../organisms/Form/Form.types';
1
+ import type { ReactNode } from 'react';
2
+ import type { FieldValues, Path, PathValue } from 'react-hook-form';
3
3
  /**
4
- * Props for the FormField component.
4
+ * Type representing allowed field values
5
5
  */
6
- export type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
7
- /**
8
- * Name of the form field
9
- */
10
- name: string;
11
- /**
12
- * Label for the form field
13
- */
14
- label?: string;
15
- /**
16
- * Children for the form field
17
- */
18
- children: React.ReactNode;
19
- /**
20
- * Message for the form field
21
- */
22
- message?: string;
23
- /**
24
- * There is a message/error for the form field
25
- */
26
- hasMessage?: boolean;
27
- /**
28
- * Info icon for the form field
29
- */
30
- infoIcon?: React.ReactNode;
31
- /**
32
- * Indicates if the form field is required
33
- */
34
- required?: boolean;
35
- /**
36
- * Validation function for the form field
37
- */
38
- validate?: FieldValidationFunction;
39
- /**
40
- * Indicates if the form field is disabled
41
- */
42
- disabled?: boolean;
43
- /**
44
- * Indicates if the form field is invalid
45
- */
46
- invalid?: boolean;
47
- /**
48
- * Id for the form field
49
- */
50
- id?: string;
51
- };
6
+ export type FieldValue = string | number | Date | boolean | File | null | Array<string | number | Date | File | Record<string, unknown>> | Record<string, unknown>;
52
7
  /**
53
- * Props that must be implemented by all form field components that are controlled inputs
8
+ * Props that all controlled form components should accept
9
+ * This allows them to work both standalone and within FormField
54
10
  */
55
11
  export type ControlledFormComponentProps<T extends FieldValue> = {
56
12
  /**
57
- * the initial value for the field
13
+ * The initial value for the field
58
14
  */
59
15
  initialValue?: T;
60
16
  /**
61
- * the initial value for the field
17
+ * The initial checked state (for checkboxes/toggles)
62
18
  */
63
19
  checked?: boolean;
64
20
  /**
@@ -90,3 +46,80 @@ export type ControlledFormComponentProps<T extends FieldValue> = {
90
46
  */
91
47
  id?: string;
92
48
  };
49
+ /**
50
+ * Field-level validation function
51
+ * Returns error message string if invalid, undefined if valid
52
+ */
53
+ export type FieldValidationFunction<TValue = FieldValue> = (value: TValue) => string | undefined;
54
+ /**
55
+ * Field-level async validation function
56
+ * Returns error message string if invalid, undefined if valid
57
+ */
58
+ export type AsyncFieldValidationFunction<TValue = FieldValue> = (value: TValue) => Promise<string | undefined>;
59
+ /**
60
+ * FormField component props for use within a Form
61
+ */
62
+ export type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
63
+ /** Field name (must match form value key) - type-safe */
64
+ name: TName;
65
+ /** Field label */
66
+ label?: string;
67
+ /** Display name for validation messages (defaults to label or name) */
68
+ displayName?: string;
69
+ /**
70
+ * Child component - will be cloned with injected props:
71
+ * value, onValueChange, onBlur, ref, disabled, invalid, required, id, name
72
+ */
73
+ children: ReactNode;
74
+ /** Field is required */
75
+ required?: boolean;
76
+ /** Sync validation function */
77
+ validate?: FieldValidationFunction<PathValue<TFieldValues, TName>>;
78
+ /** Async validation function */
79
+ asyncValidate?: AsyncFieldValidationFunction<PathValue<TFieldValues, TName>>;
80
+ /** Default value for this field */
81
+ defaultValue?: PathValue<TFieldValues, TName>;
82
+ /** Info message to display */
83
+ message?: string;
84
+ /** Disabled state */
85
+ disabled?: boolean;
86
+ /** External invalid state */
87
+ invalid?: boolean;
88
+ /** Info icon element */
89
+ infoIcon?: ReactNode;
90
+ /** Field ID */
91
+ id?: string;
92
+ };
93
+ /**
94
+ * Standalone FormField props (works without Form context)
95
+ */
96
+ export type StandaloneFieldProps<TValue = FieldValue> = {
97
+ /** Field name */
98
+ name: string;
99
+ /** Field label */
100
+ label?: string;
101
+ /** Display name for validation messages */
102
+ displayName?: string;
103
+ /** Child component to render */
104
+ children: ReactNode;
105
+ /** Field is required */
106
+ required?: boolean;
107
+ /** Sync validation function */
108
+ validate?: FieldValidationFunction<TValue>;
109
+ /** Async validation function */
110
+ asyncValidate?: AsyncFieldValidationFunction<TValue>;
111
+ /** Controlled value */
112
+ value?: TValue;
113
+ /** Controlled onChange */
114
+ onChange?: (value: TValue) => void;
115
+ /** External error */
116
+ error?: string;
117
+ /** Info message */
118
+ message?: string;
119
+ /** Disabled state */
120
+ disabled?: boolean;
121
+ /** Info icon element */
122
+ infoIcon?: ReactNode;
123
+ /** Field ID */
124
+ id?: string;
125
+ };
@@ -1,11 +1,8 @@
1
- import React from 'react';
2
- import { FieldValue } from '../../organisms';
3
- export declare const injectPropsToMatchingFields: (node: React.ReactNode, propsToInject: {
4
- id: string;
5
- name: string;
6
- value: any;
7
- onValueChange: (value: FieldValue) => void;
8
- disabled?: boolean;
9
- invalid?: boolean;
10
- required?: boolean;
11
- }, shouldInjectValueProps: boolean) => React.ReactNode;
1
+ /**
2
+ * Shared utilities for FormField components
3
+ */
4
+ /**
5
+ * Check if a value is empty for required validation
6
+ * Handles strings, numbers, booleans, arrays, objects, null, undefined
7
+ */
8
+ export declare const isEmpty: (val: unknown) => boolean;
@@ -1,4 +1,3 @@
1
1
  import FormField from './FormField';
2
- import type { FormFieldProps } from './FormField.types';
3
- export type { FormFieldProps };
4
2
  export default FormField;
3
+ export * from './FormField.types';
@@ -0,0 +1,14 @@
1
+ import { type UseControllerProps, type UseControllerReturn, type FieldValues, type Path } from 'react-hook-form';
2
+ type SafeControllerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>, TTransformedValues = TFieldValues> = UseControllerProps<TFieldValues, TName, TTransformedValues> & {
3
+ value?: unknown;
4
+ onChange?: (value: any) => void;
5
+ externalError?: string;
6
+ };
7
+ /**
8
+ * Standalone controller hook that manages local state and validation
9
+ * Used when there's no Form context
10
+ *
11
+ * Has the same signature as useController with a few additional props for standalone mode
12
+ */
13
+ export declare const useSafeController: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>, TTransformedValues = TFieldValues>(props: SafeControllerProps<TFieldValues, TName, TTransformedValues>) => UseControllerReturn<TFieldValues, TName>;
14
+ export {};
@@ -0,0 +1,8 @@
1
+ import { type FieldValues, type Control } from 'react-hook-form';
2
+ /**
3
+ * Safely attempt to get form context without throwing
4
+ * Returns the control object if available, undefined otherwise
5
+ *
6
+ * This allows components to work both inside and outside Form context
7
+ */
8
+ export declare const useSafeFormContext: <TFieldValues extends FieldValues = FieldValues>() => Control<TFieldValues> | undefined;
@@ -5,7 +5,7 @@
5
5
  * @param ref - Forward ref to the input element
6
6
  * @returns Search component
7
7
  */
8
- declare const Search: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../FormField/FormField.types").ControlledFormComponentProps<string> & {
8
+ declare const Search: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("..").ControlledFormComponentProps<string> & {
9
9
  style?: import("./Search.types").SearchStyleEnum;
10
10
  onSearch?: import("./Search.types").SearchCallback;
11
11
  onClear?: () => void;
@@ -295,9 +295,8 @@ declare const useSearchPresenter: (props: SearchProps) => {
295
295
  pattern?: string | undefined;
296
296
  size?: number | undefined;
297
297
  step?: number | string | undefined;
298
- autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
299
- name?: string | undefined;
300
298
  accept?: string | undefined;
299
+ autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
301
300
  capture?: boolean | "user" | "environment" | undefined;
302
301
  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
303
302
  formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
@@ -310,6 +309,7 @@ declare const useSearchPresenter: (props: SearchProps) => {
310
309
  min?: number | string | undefined;
311
310
  minLength?: number | undefined;
312
311
  multiple?: boolean | undefined;
312
+ name?: string | undefined;
313
313
  placeholder?: string | undefined;
314
314
  readOnly?: boolean | undefined;
315
315
  invalid?: boolean;
@@ -12,17 +12,17 @@ declare const usePresenter: (props: SelectProps) => {
12
12
  'component-variant': string;
13
13
  };
14
14
  isOpen: boolean;
15
- selectedValue: import("../..").FieldValue;
15
+ selectedValue: import("..").FieldValue;
16
16
  resetSelectedValue: () => void;
17
17
  triggerProps: {
18
18
  disabled?: boolean;
19
19
  required?: boolean;
20
20
  checked?: boolean;
21
- value?: import("../..").FieldValue | undefined;
21
+ value?: import("..").FieldValue | undefined;
22
22
  id?: string;
23
23
  invalid?: boolean;
24
- onValueChange?: ((value: import("../..").FieldValue) => void) | undefined;
25
- initialValue?: import("../..").FieldValue | undefined;
24
+ onValueChange?: ((value: import("..").FieldValue) => void) | undefined;
25
+ initialValue?: import("..").FieldValue | undefined;
26
26
  closeSelectOptions?: () => void;
27
27
  role?: import("react").AriaRole | undefined;
28
28
  onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
@@ -1,3 +1,24 @@
1
+ import { type FieldValues } from 'react-hook-form';
1
2
  import type { FormProps } from './Form.types';
2
- declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
3
+ /**
4
+ * Form component - clean wrapper around React Hook Form
5
+ *
6
+ * Usage:
7
+ * ```tsx
8
+ * <Form defaultValues={{ name: '' }} onSubmit={handleSubmit}>
9
+ * <FormField name="name" label="Name">
10
+ * <Input />
11
+ * </FormField>
12
+ * <Button actionType="submit">Submit</Button>
13
+ * </Form>
14
+ * ```
15
+ *
16
+ * Access RHF methods anywhere in form:
17
+ * ```tsx
18
+ * import { useFormContext, useWatch } from 'react-hook-form';
19
+ * const { setValue, reset } = useFormContext();
20
+ * const name = useWatch({ name: 'name' });
21
+ * ```
22
+ */
23
+ declare const Form: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => import("react/jsx-runtime").JSX.Element;
3
24
  export default Form;
@@ -0,0 +1,21 @@
1
+ import { type FieldValues } from 'react-hook-form';
2
+ import type { FormProps } from './Form.types';
3
+ /**
4
+ * Presenter hook for Form component
5
+ * Handles RHF initialization and form state management
6
+ */
7
+ declare const usePresenter: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => {
8
+ methods: import("react-hook-form").UseFormReturn<TFormValues, any, TFormValues>;
9
+ onFormSubmit: import("react").FormEventHandler<HTMLFormElement>;
10
+ autosave: boolean;
11
+ onSubmit: import("./Form.types").FormSubmitHandler<TFormValues> | undefined;
12
+ autosaveDelayMs: number;
13
+ variantProps: {
14
+ 'component-variant': string;
15
+ };
16
+ children: import("react").ReactNode;
17
+ className?: string;
18
+ style?: React.CSSProperties;
19
+ formRef?: React.Ref<HTMLFormElement>;
20
+ };
21
+ export default usePresenter;