@ultraviolet/form 4.0.0 → 4.0.1

package/dist/components/RadioField/index.js

@@ -28,13 +28,13 @@ const RadioField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const errorLabel = useMemo(() => {
     if (label && typeof label === "string") {
@@ -45,14 +45,14 @@ const RadioField = ({
     }
     return name;
   }, [label, name, ariaLabel]);
-  return /* @__PURE__ */ jsx(Radio, { ...props, name: field.name, checked: field.value === value, disabled, error: getError({
+  return /* @__PURE__ */ jsx(Radio, { ...props, checked: field.value === value, disabled, error: getError({
     label: errorLabel
-  }, error), onChange: () => {
-    field.onChange(value);
-    onChange?.(value);
-  }, onBlur: (event) => {
+  }, error), name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
+  }, onChange: () => {
+    field.onChange(value);
+    onChange?.(value);
   }, onFocus, required, value: value ?? "", ...label ? {
     label
   } : {

package/dist/components/RadioGroupField/index.cjs

@@ -26,20 +26,20 @@ const RadioGroupField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, error: getError({
+    label: legend
+  }, error) ?? customError, legend, name: field.name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target.value);
-  }, required, value: field.value, error: getError({
-    label: legend
-  }, error) ?? customError, legend, children });
+  }, required, value: field.value, children });
 };
 RadioGroupField.Radio = ui.RadioGroup.Radio;
 exports.RadioGroupField = RadioGroupField;

package/dist/components/RadioGroupField/index.js

@@ -24,20 +24,20 @@ const RadioGroupField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsx(RadioGroup, { ...props, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsx(RadioGroup, { ...props, error: getError({
+    label: legend
+  }, error) ?? customError, legend, name: field.name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target.value);
-  }, required, value: field.value, error: getError({
-    label: legend
-  }, error) ?? customError, legend, children });
+  }, required, value: field.value, children });
 };
 RadioGroupField.Radio = RadioGroup.Radio;
 export {

package/dist/components/SelectInputField/index.cjs

@@ -25,13 +25,13 @@ const SelectInputField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const {
     getError
@@ -40,11 +40,11 @@ const SelectInputField = ({
     onChange?.(value);
     field.onChange(value);
   }, [onChange, field]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { name: field.name, multiselect, required, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name
+  }, error), label, multiselect, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, value: field.value, error: getError({
-    label: label ?? ariaLabel ?? name
-  }, error), label, "aria-label": ariaLabel, onChange: handleChange, ...props });
+  }, onChange: handleChange, required, value: field.value, ...props });
 };
 exports.SelectInputField = SelectInputField;

package/dist/components/SelectInputField/index.js

@@ -23,13 +23,13 @@ const SelectInputField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const {
     getError
@@ -38,12 +38,12 @@ const SelectInputField = ({
     onChange?.(value);
     field.onChange(value);
   }, [onChange, field]);
-  return /* @__PURE__ */ jsx(SelectInput, { name: field.name, multiselect, required, onBlur: (event) => {
+  return /* @__PURE__ */ jsx(SelectInput, { "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name
+  }, error), label, multiselect, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, value: field.value, error: getError({
-    label: label ?? ariaLabel ?? name
-  }, error), label, "aria-label": ariaLabel, onChange: handleChange, ...props });
+  }, onChange: handleChange, required, value: field.value, ...props });
 };
 export {
   SelectInputField

package/dist/components/SelectableCardField/index.cjs

@@ -27,13 +27,13 @@ const SelectableCardField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
   return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...props, ...productIcon ? {
@@ -44,7 +44,10 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, checked: isChecked, onChange: (event) => {
+  }, checked: isChecked, isError: !!error, name: field.name, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -56,11 +59,8 @@ const SelectableCardField = ({
       field.onChange(event);
     }
     onChange?.(event.currentTarget.value);
-  }, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, value: value ?? "", name: field.name });
+  }, type, value: value ?? "" });
 };
 exports.SelectableCardField = SelectableCardField;

package/dist/components/SelectableCardField/index.js

@@ -25,13 +25,13 @@ const SelectableCardField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
   return /* @__PURE__ */ jsx(SelectableCard, { ...props, ...productIcon ? {
@@ -42,7 +42,10 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, checked: isChecked, onChange: (event) => {
+  }, checked: isChecked, isError: !!error, name: field.name, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -54,12 +57,9 @@ const SelectableCardField = ({
       field.onChange(event);
     }
     onChange?.(event.currentTarget.value);
-  }, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, value: value ?? "", name: field.name });
+  }, type, value: value ?? "" });
 };
 export {
   SelectableCardField

package/dist/components/SelectableCardGroupField/index.cjs

@@ -27,15 +27,17 @@ const SelectableCardGroupField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { ...props, columns, error: getError({
+    label: legend
+  }, error) ?? customError, legend, name, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -47,9 +49,7 @@ const SelectableCardGroupField = ({
       field.onChange(event);
     }
     onChange?.(event.currentTarget.value);
-  }, error: getError({
-    label: legend
-  }, error) ?? customError, columns, required });
+  }, required, type, value: field.value });
 };
 SelectableCardGroupField.Card = ui.SelectableCardGroup.Card;
 exports.SelectableCardGroupField = SelectableCardGroupField;

package/dist/components/SelectableCardGroupField/index.js

@@ -25,15 +25,17 @@ const SelectableCardGroupField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsx(SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsx(SelectableCardGroup, { ...props, columns, error: getError({
+    label: legend
+  }, error) ?? customError, legend, name, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -45,9 +47,7 @@ const SelectableCardGroupField = ({
       field.onChange(event);
     }
     onChange?.(event.currentTarget.value);
-  }, error: getError({
-    label: legend
-  }, error) ?? customError, columns, required });
+  }, required, type, value: field.value });
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;
 export {

package/dist/components/SelectableCardOptionGroupField/index.cjs

@@ -28,32 +28,32 @@ const SelectableCardOptionGroupField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const {
     field: optionField
   } = reactHookForm.useController({
     name: optionName ?? `${name}Option`,
-    shouldUnregister,
     rules: {
       required
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardOptionGroup, { legend, name, value: field.value, optionValue: String(optionField.value), onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardOptionGroup, { error: getError({
+    label: legend
+  }, error) ?? customError, legend, name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event);
   }, onChangeOption: (value) => {
     optionField.onChange(value);
     onChangeOption?.(value);
-  }, error: getError({
-    label: legend
-  }, error) ?? customError, required, ...props, children });
+  }, optionValue: String(optionField.value), required, value: field.value, ...props, children });
 };
 SelectableCardOptionGroupField.Option = ui.SelectableCardOptionGroup.Option;
 exports.SelectableCardOptionGroupField = SelectableCardOptionGroupField;

package/dist/components/SelectableCardOptionGroupField/index.js

@@ -26,32 +26,32 @@ const SelectableCardOptionGroupField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const {
     field: optionField
   } = useController({
     name: optionName ?? `${name}Option`,
-    shouldUnregister,
     rules: {
       required
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsx(SelectableCardOptionGroup, { legend, name, value: field.value, optionValue: String(optionField.value), onChange: (event) => {
+  return /* @__PURE__ */ jsx(SelectableCardOptionGroup, { error: getError({
+    label: legend
+  }, error) ?? customError, legend, name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event);
   }, onChangeOption: (value) => {
     optionField.onChange(value);
     onChangeOption?.(value);
-  }, error: getError({
-    label: legend
-  }, error) ?? customError, required, ...props, children });
+  }, optionValue: String(optionField.value), required, value: field.value, ...props, children });
 };
 SelectableCardOptionGroupField.Option = SelectableCardOptionGroup.Option;
 export {

package/dist/components/SliderField/index.cjs

@@ -32,15 +32,15 @@ const SliderField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       max,
       min,
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const finalValue = react.useMemo(() => {
     if (options && field.value) {
@@ -55,7 +55,11 @@ const SliderField = ({
     }
     return field.value;
   }, [field.value, options]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: finalValue, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name,
+    max,
+    min
+  }, error), label, max, min, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
@@ -67,10 +71,6 @@ const SliderField = ({
       field.onChange(newValue);
       onChange?.(newValue);
     }
-  }, max, min, error: getError({
-    label: label ?? ariaLabel ?? name,
-    max,
-    min
-  }, error), label, required, options, "aria-label": ariaLabel, ...props });
+  }, options, required, value: finalValue, ...props });
 };
 exports.SliderField = SliderField;

package/dist/components/SliderField/index.js

@@ -30,15 +30,15 @@ const SliderField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       max,
       min,
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const finalValue = useMemo(() => {
     if (options && field.value) {
@@ -53,7 +53,11 @@ const SliderField = ({
     }
     return field.value;
   }, [field.value, options]);
-  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: finalValue, onBlur: (event) => {
+  return /* @__PURE__ */ jsx(Slider, { "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name,
+    max,
+    min
+  }, error), label, max, min, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
@@ -65,11 +69,7 @@ const SliderField = ({
       field.onChange(newValue);
       onChange?.(newValue);
     }
-  }, max, min, error: getError({
-    label: label ?? ariaLabel ?? name,
-    max,
-    min
-  }, error), label, required, options, "aria-label": ariaLabel, ...props });
+  }, options, required, value: finalValue, ...props });
 };
 export {
   SliderField

package/dist/components/Submit/index.cjs

@@ -20,6 +20,6 @@ const Submit = ({
     isValid
   } = reactHookForm.useFormState();
   const isDisabled = disabled || isSubmitting || !isValid;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className, disabled: isDisabled, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className, disabled: isDisabled, fullWidth, isLoading: isSubmitting, onClick, sentiment, size, tooltip, type: "submit", variant, children });
 };
 exports.Submit = Submit;

package/dist/components/Submit/index.js

@@ -18,7 +18,7 @@ const Submit = ({
     isValid
   } = useFormState();
   const isDisabled = disabled || isSubmitting || !isValid;
-  return /* @__PURE__ */ jsx(Button, { className, disabled: isDisabled, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
+  return /* @__PURE__ */ jsx(Button, { className, disabled: isDisabled, fullWidth, isLoading: isSubmitting, onClick, sentiment, size, tooltip, type: "submit", variant, children });
 };
 export {
   Submit

package/dist/components/SwitchButtonField/index.cjs

@@ -19,17 +19,17 @@ const SwitchButtonField = ({
   const {
     field
   } = reactHookForm.useController({
+    control,
     name,
-    shouldUnregister,
-    control
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SwitchButton, { ...props, name, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target);
-  }, value: field.value, tooltip, size, className, onFocus, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SwitchButton, { ...props, className, name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  } });
+  }, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event.target);
+  }, onFocus, size, tooltip, value: field.value });
 };
 SwitchButtonField.Option = ui.SwitchButton.Option;
 exports.SwitchButtonField = SwitchButtonField;

package/dist/components/SwitchButtonField/index.js

@@ -17,17 +17,17 @@ const SwitchButtonField = ({
   const {
     field
   } = useController({
+    control,
     name,
-    shouldUnregister,
-    control
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsx(SwitchButton, { ...props, name, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target);
-  }, value: field.value, tooltip, size, className, onFocus, onBlur: (event) => {
+  return /* @__PURE__ */ jsx(SwitchButton, { ...props, className, name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  } });
+  }, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event.target);
+  }, onFocus, size, tooltip, value: field.value });
 };
 SwitchButtonField.Option = SwitchButton.Option;
 export {

package/dist/components/TagInputField/index.cjs

@@ -27,8 +27,8 @@ const TagInputField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
+    name,
     rules: {
       required,
       shouldUnregister,
@@ -40,12 +40,12 @@ const TagInputField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { ...props, name: field.name, onChange: (newTags) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { ...props, "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name,
+    regex: regexes
+  }, error), label, name: field.name, onChange: (newTags) => {
     field.onChange(newTags);
     onChange?.(newTags);
-  }, value: field.value, label, "aria-label": ariaLabel, error: getError({
-    regex: regexes,
-    label: label ?? ariaLabel ?? name
-  }, error) });
+  }, value: field.value });
 };
 exports.TagInputField = TagInputField;

package/dist/components/TagInputField/index.js

@@ -25,8 +25,8 @@ const TagInputField = ({
       error
     }
   } = useController({
-    name,
     control,
+    name,
     rules: {
       required,
       shouldUnregister,
@@ -38,13 +38,13 @@ const TagInputField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(TagInput, { ...props, name: field.name, onChange: (newTags) => {
+  return /* @__PURE__ */ jsx(TagInput, { ...props, "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name,
+    regex: regexes
+  }, error), label, name: field.name, onChange: (newTags) => {
     field.onChange(newTags);
     onChange?.(newTags);
-  }, value: field.value, label, "aria-label": ariaLabel, error: getError({
-    regex: regexes,
-    label: label ?? ariaLabel ?? name
-  }, error) });
+  }, value: field.value });
 };
 export {
   TagInputField

package/dist/components/TextAreaField/index.cjs

@@ -31,18 +31,18 @@ const TextAreaField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
+    name,
     rules: {
+      maxLength,
+      minLength,
       required,
       validate: {
         ...regexes ? {
           pattern: (value) => validateRegex.validateRegex(value, regexes)
         } : {},
         ...validate
-      },
-      minLength,
-      maxLength
+      }
     }
   });
   const onKeyDownHandler = (event) => {
@@ -64,12 +64,12 @@ const TextAreaField = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ui.TextArea, { ...props, error: getError({
-    regex: regexes,
-    minLength,
-    maxLength,
     label: label ?? ariaLabel ?? name,
+    maxLength,
+    minLength,
+    regex: regexes,
     value: field.value
-  }, error), minLength, maxLength, name, onBlur: (event) => {
+  }, error), maxLength, minLength, name, onBlur: (event) => {
     onBlur?.(event);
     field.onBlur();
   }, onChange: (event) => {