@ultraviolet/form 2.14.7 → 3.0.0

package/dist/components/CheckboxField/index.cjs

@@ -6,6 +6,7 @@ const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const CheckboxField = ({
   id,
+  control,
   name,
   label,
   size,
@@ -17,11 +18,11 @@ const CheckboxField = ({
   onChange,
   onBlur,
   onFocus,
-  rules,
   helper,
   tooltip,
   "data-testid": dataTestId,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -35,9 +36,10 @@ const CheckboxField = ({
     name,
     disabled,
     shouldUnregister,
+    control,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id, name: field.name, onChange: (event) => {

package/dist/components/CheckboxField/index.d.ts

@@ -2,9 +2,9 @@ import { Checkbox } from '@ultraviolet/ui';
 import type { ComponentProps, ReactNode } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'value'> & Partial<Pick<ComponentProps<typeof Checkbox>, 'id' | 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
+type CheckboxFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'value'> & Partial<Pick<ComponentProps<typeof Checkbox>, 'id' | 'disabled' | 'onBlur' | 'onFocus' | 'progress' | 'size' | 'data-testid' | 'helper' | 'tooltip'>> & {
     className?: string;
     children?: ReactNode;
 };
-export declare const CheckboxField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, rules, helper, tooltip, "data-testid": dataTestId, shouldUnregister, }: CheckboxFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, control, name, label, size, progress, disabled, required, className, children, onChange, onBlur, onFocus, helper, tooltip, "data-testid": dataTestId, shouldUnregister, validate, }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxField/index.js

@@ -4,6 +4,7 @@ import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const CheckboxField = ({
   id,
+  control,
   name,
   label,
   size,
@@ -15,11 +16,11 @@ const CheckboxField = ({
   onChange,
   onBlur,
   onFocus,
-  rules,
   helper,
   tooltip,
   "data-testid": dataTestId,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -33,9 +34,10 @@ const CheckboxField = ({
     name,
     disabled,
     shouldUnregister,
+    control,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(Checkbox, { id, name: field.name, onChange: (event) => {

package/dist/components/CheckboxGroupField/index.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
-const React = require("react");
+const react = require("react");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const arraysContainSameValues = (array1, array2) => {
@@ -14,6 +14,7 @@ const arraysContainSameValues = (array1, array2) => {
 const CheckboxGroupField = ({
   legend,
   className,
+  control,
   helper,
   direction,
   children,
@@ -23,14 +24,14 @@ const CheckboxGroupField = ({
   name,
   required = false,
   shouldUnregister = false,
-  rules
+  validate
 }) => {
   const {
     getError
   } = index.useErrors();
-  const validate = React.useCallback((value) => {
-    const requiredChildren = React.Children.map(children, (child) => {
-      if (React.isValidElement(child)) {
+  const checkboxValid = react.useCallback((value) => {
+    const requiredChildren = react.Children.map(children, (child) => {
+      if (react.isValidElement(child)) {
         if (child.props.required) {
           return child.props.name;
         }
@@ -41,7 +42,7 @@ const CheckboxGroupField = ({
     if (!required && arraysContainSameValues(value, requiredChildren)) {
       return true;
     }
-    if (value.length >= React.Children.count(children)) {
+    if (value.length >= react.Children.count(children)) {
       return true;
     }
     return false;
@@ -53,10 +54,13 @@ const CheckboxGroupField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
-      validate,
-      ...rules
+      validate: {
+        checkboxValid,
+        ...validate
+      }
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {

package/dist/components/CheckboxGroupField/index.d.ts

@@ -2,9 +2,9 @@ import { CheckboxGroup } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof CheckboxGroup>, 'className' | 'helper' | 'required' | 'direction' | 'children' | 'error' | 'legend'>> & Required<Pick<ComponentProps<typeof CheckboxGroup>, 'legend'>>;
 export declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, rules, }: CheckboxGroupFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, className, control, helper, direction, children, onChange, label, error: customError, name, required, shouldUnregister, validate, }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
         error?: string | import("react").ReactNode;
         size?: number;

package/dist/components/CheckboxGroupField/index.js

@@ -12,6 +12,7 @@ const arraysContainSameValues = (array1, array2) => {
 const CheckboxGroupField = ({
   legend,
   className,
+  control,
   helper,
   direction,
   children,
@@ -21,12 +22,12 @@ const CheckboxGroupField = ({
   name,
   required = false,
   shouldUnregister = false,
-  rules
+  validate
 }) => {
   const {
     getError
   } = useErrors();
-  const validate = useCallback((value) => {
+  const checkboxValid = useCallback((value) => {
     const requiredChildren = Children.map(children, (child) => {
       if (isValidElement(child)) {
         if (child.props.required) {
@@ -51,10 +52,13 @@ const CheckboxGroupField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
-      validate,
-      ...rules
+      validate: {
+        checkboxValid,
+        ...validate
+      }
     }
   });
   return /* @__PURE__ */ jsx(CheckboxGroup, { legend, name, value: field.value, onChange: (event) => {

package/dist/components/DateField/index.cjs

@@ -11,6 +11,7 @@ const isEmpty = (value) => typeof value === "string" ? value === "" : value ===
 const DateField = ({
   required,
   name,
+  control,
   label = "",
   format,
   locale,
@@ -20,7 +21,7 @@ const DateField = ({
   onChange,
   onBlur,
   onFocus,
-  rules,
+  validate,
   autoFocus = false,
   excludeDates,
   selectsRange,
@@ -38,15 +39,15 @@ const DateField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
-      ...rules,
+      required,
       validate: {
-        ...rules?.validate,
         minDate: minDate.minDateValidator(minDate$1),
-        maxDate: maxDate.maxDateValidator(maxDate$1)
-      },
-      required
+        maxDate: maxDate.maxDateValidator(maxDate$1),
+        ...validate
+      }
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { name: field.name, label, value: field.value, format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""), locale, required, onChange: (val) => {

package/dist/components/DateField/index.d.ts

@@ -2,7 +2,7 @@ import { DateInput } from '@ultraviolet/ui';
 import type { ComponentProps, FocusEvent } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type DateFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
+type DateFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
     maxDate?: Date;
     minDate?: Date;
     disabled?: boolean;
@@ -12,5 +12,5 @@ type DateFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TF
     onFocus?: (value: FocusEvent<HTMLElement>) => void;
     autoFocus?: boolean;
 };
-export declare const DateField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, rules, autoFocus, excludeDates, selectsRange, size, "data-testid": dataTestId, shouldUnregister, }: DateFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DateField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, control, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, validate, autoFocus, excludeDates, selectsRange, size, "data-testid": dataTestId, shouldUnregister, }: DateFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateField/index.js

@@ -9,6 +9,7 @@ const isEmpty = (value) => typeof value === "string" ? value === "" : value ===
 const DateField = ({
   required,
   name,
+  control,
   label = "",
   format,
   locale,
@@ -18,7 +19,7 @@ const DateField = ({
   onChange,
   onBlur,
   onFocus,
-  rules,
+  validate,
   autoFocus = false,
   excludeDates,
   selectsRange,
@@ -36,15 +37,15 @@ const DateField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
-      ...rules,
+      required,
       validate: {
-        ...rules?.validate,
         minDate: minDateValidator(minDate),
-        maxDate: maxDateValidator(maxDate)
-      },
-      required
+        maxDate: maxDateValidator(maxDate),
+        ...validate
+      }
     }
   });
   return /* @__PURE__ */ jsx(DateInput, { name: field.name, label, value: field.value, format: format || ((value) => value ? parseDate(value).toLocaleDateString() : ""), locale, required, onChange: (val) => {

package/dist/components/Form/index.cjs

@@ -1,72 +1,32 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const reactHookForm = require("react-hook-form");
-const constants = require("../../constants.cjs");
 const defaultErrors = require("./defaultErrors.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefaultCompat(React);
-const FormSubmitContext = React__default.default.createContext({});
 const Form = ({
   children,
-  methods: methodsProp,
-  initialValues,
+  methods,
   errors,
-  onRawSubmit,
+  onSubmit,
   name
 }) => {
-  const methodsHook = reactHookForm.useForm({
-    defaultValues: initialValues,
-    mode: "onChange"
-  });
-  const methods = !methodsProp ? methodsHook : methodsProp;
   const handleSubmit = methods.handleSubmit(async (values) => {
-    const result = await onRawSubmit(values, {
-      reset: methods.reset,
-      resetFieldState: methods.resetField,
-      restart: () => methods.reset(initialValues),
-      change: methods.setValue
-    });
-    if (result === null) {
-      methods.setError("root.submit", {
-        type: "custom"
-      });
-      return;
-    }
-    if (result && typeof result !== "boolean" && typeof result !== "number") {
+    const result = await onSubmit(values);
+    if (result) {
       methods.setError("root.submit", {
         type: "custom",
-        message: typeof result === "object" ? result[constants.FORM_ERROR] : result
+        message: result
       });
     }
   });
-  const formSubmitContextValue = React.useMemo(() => ({
-    handleSubmit
-  }), [handleSubmit]);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(index.ErrorProvider, { errors: {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(index.ErrorProvider, { errors: {
     ...defaultErrors.defaultErrors,
     ...errors
   }, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: async (e) => {
     e.preventDefault();
     e.stopPropagation();
     await handleSubmit(e);
-  }, name, noValidate: true, children: typeof children === "function" ? children({
-    values: methods.watch(),
-    hasValidationErrors: !methods.formState.isValid,
-    errors: methods.formState.errors,
-    submitting: methods.formState.isSubmitting,
-    pristine: !methods.formState.isDirty,
-    handleSubmit,
-    submitError: !!methods.formState.errors?.root?.["submit"],
-    valid: methods.formState.isValid,
-    form: {
-      change: methods.setValue,
-      reset: methods.reset,
-      submit: handleSubmit
-    }
-  }) : children }) }) }) });
+  }, name, noValidate: true, children }) }) });
 };
 exports.Form = Form;
-exports.FormSubmitContext = FormSubmitContext;

package/dist/components/Form/index.d.ts

@@ -1,69 +1,13 @@
 import type { ReactNode } from 'react';
-import React from 'react';
-import type { DefaultValues, FieldErrors, FieldValues, UseFormHandleSubmit, UseFormReturn } from 'react-hook-form';
-import { FORM_ERROR } from '../../constants';
+import type { FieldValues, UseFormReturn } from 'react-hook-form';
 import type { FormErrors } from '../../types';
-type Without<T, U> = {
-    [P in Exclude<keyof T, keyof U>]?: never;
-};
-type SingleXOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
-export type XOR<T extends unknown[]> = T extends [infer Only] ? Only : T extends [infer A, infer B, ...infer Rest] ? XOR<[SingleXOR<A, B>, ...Rest]> : never;
-type FormStateReturn<TFormValues extends FieldValues> = {
-    values: TFormValues;
-    hasValidationErrors: boolean;
-    errors: FieldErrors<TFormValues>;
-    submitting: boolean;
-    pristine: boolean;
-    handleSubmit: () => Promise<void>;
-    submitError: boolean;
-    valid: boolean;
-    form: {
-        change: UseFormReturn<TFormValues>['setValue'];
-        reset: UseFormReturn<TFormValues>['reset'];
-        submit: () => Promise<void>;
-    };
-};
-type OnRawSubmitReturn = {
-    [FORM_ERROR]?: string;
-} | undefined | null | string | void | boolean | number;
-type FormSubmitContextValue<TFieldValues extends FieldValues = FieldValues> = {
-    handleSubmit: ReturnType<UseFormHandleSubmit<TFieldValues>>;
-};
-export declare const FormSubmitContext: React.Context<FormSubmitContextValue<FieldValues>>;
-export type FormProps<TFormValues extends FieldValues = FieldValues> = {
-    children?: ((props: FormStateReturn<TFormValues>) => ReactNode) | ReactNode;
+type OnSubmitReturn = string | null | undefined | void;
+type FormProps<TFieldValues extends FieldValues> = {
+    children?: ReactNode;
     errors: FormErrors;
     name?: string;
-    onRawSubmit: (data: TFormValues, formState: {
-        reset: UseFormReturn<TFormValues>['reset'];
-        resetFieldState: UseFormReturn<TFormValues>['resetField'];
-        restart: () => void;
-        change: UseFormReturn<TFormValues>['setValue'];
-    }) => Promise<OnRawSubmitReturn> | OnRawSubmitReturn;
-} & XOR<[
-    {
-        /**
-         * @deprecated Use the `methods` prop with [useForm](https://www.react-hook-form.com/api/useform/) instead.
-         *
-         * @example
-         * ```tsx
-         *  const methods = useForm({
-         *    defaultValues,
-         *    mode: 'onChange'
-         *  })
-         *
-         *  return (
-         *    <Form methods={methods} onRawSubmit={handleSubmit} errors={formErrors}>
-         *      // ...
-         *    </Form>
-         *  )
-         * ```
-         */
-        initialValues?: DefaultValues<TFormValues>;
-    },
-    {
-        methods: UseFormReturn<TFormValues>;
-    }
-]>;
-export declare const Form: <TFormValues extends FieldValues>({ children, methods: methodsProp, initialValues, errors, onRawSubmit, name, }: FormProps<TFormValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    onSubmit: (data: TFieldValues) => Promise<OnSubmitReturn> | OnSubmitReturn;
+    methods: UseFormReturn<TFieldValues>;
+};
+export declare const Form: <TFieldValues extends FieldValues>({ children, methods, errors, onSubmit, name, }: FormProps<TFieldValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Form/index.js

@@ -1,70 +1,32 @@
 import { jsx } from "@emotion/react/jsx-runtime";
-import React, { useMemo } from "react";
-import { useForm, FormProvider } from "react-hook-form";
-import { FORM_ERROR } from "../../constants.js";
+import { FormProvider } from "react-hook-form";
 import { defaultErrors } from "./defaultErrors.js";
 import { ErrorProvider } from "../../providers/ErrorContext/index.js";
-const FormSubmitContext = React.createContext({});
 const Form = ({
   children,
-  methods: methodsProp,
-  initialValues,
+  methods,
   errors,
-  onRawSubmit,
+  onSubmit,
   name
 }) => {
-  const methodsHook = useForm({
-    defaultValues: initialValues,
-    mode: "onChange"
-  });
-  const methods = !methodsProp ? methodsHook : methodsProp;
   const handleSubmit = methods.handleSubmit(async (values) => {
-    const result = await onRawSubmit(values, {
-      reset: methods.reset,
-      resetFieldState: methods.resetField,
-      restart: () => methods.reset(initialValues),
-      change: methods.setValue
-    });
-    if (result === null) {
-      methods.setError("root.submit", {
-        type: "custom"
-      });
-      return;
-    }
-    if (result && typeof result !== "boolean" && typeof result !== "number") {
+    const result = await onSubmit(values);
+    if (result) {
       methods.setError("root.submit", {
         type: "custom",
-        message: typeof result === "object" ? result[FORM_ERROR] : result
+        message: result
       });
     }
   });
-  const formSubmitContextValue = useMemo(() => ({
-    handleSubmit
-  }), [handleSubmit]);
-  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(FormSubmitContext.Provider, { value: formSubmitContextValue, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
     ...defaultErrors,
     ...errors
   }, children: /* @__PURE__ */ jsx("form", { onSubmit: async (e) => {
     e.preventDefault();
     e.stopPropagation();
     await handleSubmit(e);
-  }, name, noValidate: true, children: typeof children === "function" ? children({
-    values: methods.watch(),
-    hasValidationErrors: !methods.formState.isValid,
-    errors: methods.formState.errors,
-    submitting: methods.formState.isSubmitting,
-    pristine: !methods.formState.isDirty,
-    handleSubmit,
-    submitError: !!methods.formState.errors?.root?.["submit"],
-    valid: methods.formState.isValid,
-    form: {
-      change: methods.setValue,
-      reset: methods.reset,
-      submit: handleSubmit
-    }
-  }) : children }) }) }) });
+  }, name, noValidate: true, children }) }) });
 };
 export {
-  Form,
-  FormSubmitContext
+  Form
 };

package/dist/components/NumberInputField/index.cjs

@@ -18,10 +18,11 @@ const NumberInputField = ({
   size,
   step,
   text,
-  rules,
   className,
   label,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate,
+  control
 }) => {
   const {
     getError
@@ -34,11 +35,12 @@ const NumberInputField = ({
   } = reactHookForm.useController({
     name,
     shouldUnregister,
+    control,
     rules: {
       max: maxValue,
       min: minValue,
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {

package/dist/components/NumberInputField/index.d.ts

@@ -2,12 +2,12 @@ import { NumberInput } from '@ultraviolet/ui';
 import type { ComponentProps, FocusEventHandler } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type NumberInputValueFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
+type NumberInputValueFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
     onBlur?: FocusEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
 };
 /**
  * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
  */
-export declare const NumberInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NumberInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, className, label, shouldUnregister, validate, control, }: NumberInputValueFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInputField/index.js

@@ -16,10 +16,11 @@ const NumberInputField = ({
   size,
   step,
   text,
-  rules,
   className,
   label,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate,
+  control
 }) => {
   const {
     getError
@@ -32,11 +33,12 @@ const NumberInputField = ({
   } = useController({
     name,
     shouldUnregister,
+    control,
     rules: {
       max: maxValue,
       min: minValue,
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {

package/dist/components/NumberInputFieldV2/index.cjs

@@ -6,6 +6,7 @@ const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const NumberInputFieldV2 = ({
   disabled,
+  control,
   max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
@@ -22,14 +23,14 @@ const NumberInputFieldV2 = ({
   placeholder,
   success,
   helper,
-  rules,
   controls = true,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
   required,
   autoFocus,
   readOnly,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -41,12 +42,13 @@ const NumberInputFieldV2 = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       max,
       min,
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {

package/dist/components/NumberInputFieldV2/index.d.ts

@@ -2,10 +2,8 @@ import { NumberInputV2 } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type NumberInputV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'aria-label' | 'autoFocus' | 'readOnly' | 'min' | 'max' | 'controls'>> & {
+type NumberInputV2Props<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'aria-label' | 'autoFocus' | 'readOnly' | 'min' | 'max' | 'controls'>> & {
     className?: string;
-    name: string;
-    required?: boolean;
 };
-export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, rules, controls, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, }: NumberInputV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, control, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, controls, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, validate, }: NumberInputV2Props<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};