@ultraviolet/form 2.14.6 → 3.0.0

package/dist/components/NumberInputFieldV2/index.js

@@ -4,6 +4,7 @@ import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputFieldV2 = ({
   disabled,
+  control,
   max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
@@ -20,14 +21,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
@@ -39,12 +40,13 @@ const NumberInputFieldV2 = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       max,
       min,
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {

package/dist/components/RadioField/index.cjs

@@ -6,6 +6,7 @@ const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const RadioField = ({
   className,
+  control,
   "data-testid": dataTestId,
   disabled,
   id,
@@ -16,9 +17,9 @@ const RadioField = ({
   onFocus,
   required,
   value,
-  rules,
   tooltip,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -30,10 +31,11 @@ const RadioField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { name: field.name, checked: field.value === value, className, "data-testid": dataTestId, disabled, error: getError({

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

@@ -2,11 +2,11 @@ import { Radio } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
+type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
     className?: string;
 };
 /**
  * @deprecated This component is deprecated, use `RadioGroupField` instead.
  */
-export declare const RadioField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, shouldUnregister, }: RadioFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, control, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, tooltip, shouldUnregister, validate, }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioField/index.js

@@ -4,6 +4,7 @@ import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioField = ({
   className,
+  control,
   "data-testid": dataTestId,
   disabled,
   id,
@@ -14,9 +15,9 @@ const RadioField = ({
   onFocus,
   required,
   value,
-  rules,
   tooltip,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -28,10 +29,11 @@ const RadioField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(Radio, { name: field.name, checked: field.value === value, className, "data-testid": dataTestId, disabled, error: getError({

package/dist/components/RadioGroupField/index.cjs

@@ -6,17 +6,18 @@ const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const RadioGroupField = ({
   className,
+  control,
   legend = "",
   name,
   onChange,
   required,
-  rules,
   children,
   label = "",
   error: customError,
   helper,
   direction,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -28,10 +29,11 @@ const RadioGroupField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { className, name: field.name, onChange: (event) => {

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

@@ -2,11 +2,11 @@ import { RadioGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type RadioGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
     className?: string;
 };
 export declare const RadioGroupField: {
-    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, shouldUnregister, }: RadioGroupFieldProps<TFieldValues, TName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, control, legend, name, onChange, required, children, label, error: customError, helper, direction, shouldUnregister, validate, }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: Omit<({
         error?: import("react").ReactNode;
         checked?: boolean;

package/dist/components/RadioGroupField/index.js

@@ -4,17 +4,18 @@ import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioGroupField = ({
   className,
+  control,
   legend = "",
   name,
   onChange,
   required,
-  rules,
   children,
   label = "",
   error: customError,
   helper,
   direction,
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -26,10 +27,11 @@ const RadioGroupField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(RadioGroup, { className, name: field.name, onChange: (event) => {

package/dist/components/SelectInputField/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 identity = (x) => x;
@@ -35,14 +35,14 @@ const SelectInputField = ({
   placeholder,
   readOnly,
   required,
-  rules,
   noTopLabel,
   emptyState,
   customStyle,
   shouldUnregister = false,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  validate
 }) => {
-  const options = React.useMemo(() => optionsProp || React.Children.toArray(children).flat().filter(Boolean).map(({
+  const options = react.useMemo(() => optionsProp || react.Children.toArray(children).flat().filter(Boolean).map(({
     props: {
       children: labelChild,
       ...option
@@ -51,8 +51,8 @@ const SelectInputField = ({
     ...option,
     label: labelChild
   })), [optionsProp, children]);
-  const parse = React.useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
-  const format = React.useCallback((val) => {
+  const parse = react.useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
+  const format = react.useCallback((val) => {
     if (multiple) return formatProp(val, name);
     const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
     let selected = "";
@@ -82,7 +82,7 @@ const SelectInputField = ({
       required,
       minLength: minLength || required ? 1 : void 0,
       maxLength,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({

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

@@ -68,7 +68,7 @@ type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentP
 /**
  * @deprecated This component is deprecated, please use `SelectInputFieldV2` instead
  */
-export type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'emptyState' | 'customStyle' | 'data-testid'>> & {
+export type SelectInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'emptyState' | 'customStyle' | 'data-testid'>> & {
     multiple?: boolean;
     parse?: (value: unknown, name?: string) => unknown;
     format?: (value: unknown, name: string) => unknown;
@@ -76,7 +76,7 @@ export type SelectInputFieldProps<TFieldValues extends FieldValues, TName extend
     minLength?: number;
 };
 export declare const SelectInputField: {
-    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, emptyState, customStyle, shouldUnregister, "data-testid": dataTestId, }: SelectInputFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, noTopLabel, emptyState, customStyle, shouldUnregister, "data-testid": dataTestId, validate, }: SelectInputFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Option: (props: Partial<OptionProps<import("@ultraviolet/ui").SelectOption> & import("@ultraviolet/ui").SelectOption>) => import("react").JSX.Element;
 };
 export {};

package/dist/components/SelectInputField/index.js

@@ -33,12 +33,12 @@ const SelectInputField = ({
   placeholder,
   readOnly,
   required,
-  rules,
   noTopLabel,
   emptyState,
   customStyle,
   shouldUnregister = false,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  validate
 }) => {
   const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
     props: {
@@ -80,7 +80,7 @@ const SelectInputField = ({
       required,
       minLength: minLength || required ? 1 : void 0,
       maxLength,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({

package/dist/components/SelectInputFieldV2/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 SelectInputFieldV2 = ({
@@ -37,8 +37,9 @@ const SelectInputFieldV2 = ({
   name,
   "aria-label": ariaLabel,
   optionalInfoPlacement,
-  rules,
-  shouldUnregister = false
+  shouldUnregister = false,
+  control,
+  validate
 }) => {
   const {
     field,
@@ -47,16 +48,17 @@ const SelectInputFieldV2 = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   const {
     getError
   } = index.useErrors();
-  const handleChange = React.useCallback((value) => {
+  const handleChange = react.useCallback((value) => {
     onChange?.(value);
     field.onChange(value);
   }, [onChange, field]);

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

@@ -2,6 +2,6 @@ import { SelectInputV2 } from '@ultraviolet/ui';
 import { type ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type SelectInputFieldV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Pick<ComponentProps<typeof SelectInputV2>, 'placeholder' | 'placeholderSearch' | 'label' | 'helper' | 'options' | 'emptyState' | 'searchable' | 'readOnly' | 'clearable' | 'size' | 'multiselect' | 'required' | 'descriptionDirection' | 'footer' | 'labelDescription' | 'success' | 'loadMore' | 'isLoading' | 'selectAll' | 'selectAllGroup' | 'autofocus' | 'data-testid' | 'onChange' | 'id' | 'onBlur' | 'aria-label' | 'className' | 'onFocus' | 'optionalInfoPlacement' | 'disabled'>;
-export declare const SelectInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autofocus, className, id, label, onFocus, onBlur, placeholder, readOnly, required, size, "data-testid": dataTestId, disabled, placeholderSearch, helper, options, emptyState, onChange, searchable, clearable, multiselect, descriptionDirection, footer, labelDescription, success, loadMore, isLoading, selectAll, selectAllGroup, name, "aria-label": ariaLabel, optionalInfoPlacement, rules, shouldUnregister, }: SelectInputFieldV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type SelectInputFieldV2Props<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Pick<ComponentProps<typeof SelectInputV2>, 'placeholder' | 'placeholderSearch' | 'label' | 'helper' | 'options' | 'emptyState' | 'searchable' | 'readOnly' | 'clearable' | 'size' | 'multiselect' | 'required' | 'descriptionDirection' | 'footer' | 'labelDescription' | 'success' | 'loadMore' | 'isLoading' | 'selectAll' | 'selectAllGroup' | 'autofocus' | 'data-testid' | 'onChange' | 'id' | 'onBlur' | 'aria-label' | 'className' | 'onFocus' | 'optionalInfoPlacement' | 'disabled'>;
+export declare const SelectInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autofocus, className, id, label, onFocus, onBlur, placeholder, readOnly, required, size, "data-testid": dataTestId, disabled, placeholderSearch, helper, options, emptyState, onChange, searchable, clearable, multiselect, descriptionDirection, footer, labelDescription, success, loadMore, isLoading, selectAll, selectAllGroup, name, "aria-label": ariaLabel, optionalInfoPlacement, shouldUnregister, control, validate, }: SelectInputFieldV2Props<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectInputFieldV2/index.js

@@ -35,8 +35,9 @@ const SelectInputFieldV2 = ({
   name,
   "aria-label": ariaLabel,
   optionalInfoPlacement,
-  rules,
-  shouldUnregister = false
+  shouldUnregister = false,
+  control,
+  validate
 }) => {
   const {
     field,
@@ -45,10 +46,11 @@ const SelectInputFieldV2 = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   const {

package/dist/components/SelectableCardField/index.cjs

@@ -5,6 +5,7 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const SelectableCardField = ({
   name,
+  control,
   value,
   onChange,
   showTick,
@@ -18,8 +19,8 @@ const SelectableCardField = ({
   tooltip,
   id,
   label,
-  rules,
   shouldUnregister = false,
+  validate,
   "data-testid": dataTestId
 }) => {
   const {
@@ -29,10 +30,11 @@ const SelectableCardField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;

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

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

package/dist/components/SelectableCardField/index.js

@@ -3,6 +3,7 @@ import { SelectableCard } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 const SelectableCardField = ({
   name,
+  control,
   value,
   onChange,
   showTick,
@@ -16,8 +17,8 @@ const SelectableCardField = ({
   tooltip,
   id,
   label,
-  rules,
   shouldUnregister = false,
+  validate,
   "data-testid": dataTestId
 }) => {
   const {
@@ -27,10 +28,11 @@ const SelectableCardField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;

package/dist/components/SelectableCardGroupField/index.cjs

@@ -7,10 +7,10 @@ const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardGroupField = ({
   className,
   legend,
+  control,
   name,
   onChange,
   required = false,
-  rules,
   children,
   label = "",
   error: customError,
@@ -18,7 +18,8 @@ const SelectableCardGroupField = ({
   columns = 1,
   showTick,
   type = "radio",
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -30,10 +31,11 @@ const SelectableCardGroupField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {

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

@@ -2,9 +2,9 @@ import { SelectableCardGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className' | 'onChange'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className' | 'onChange'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
 export declare const SelectableCardGroupField: {
-    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, }: SelectableCardGroupFieldProps<TFieldValues, TName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, control, name, onChange, required, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, validate, }: SelectableCardGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: import("node_modules/@ultraviolet/ui/dist/components/SelectableCardGroup").CardSelectableCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SelectableCardGroupField/index.js

@@ -5,10 +5,10 @@ import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardGroupField = ({
   className,
   legend,
+  control,
   name,
   onChange,
   required = false,
-  rules,
   children,
   label = "",
   error: customError,
@@ -16,7 +16,8 @@ const SelectableCardGroupField = ({
   columns = 1,
   showTick,
   type = "radio",
-  shouldUnregister = false
+  shouldUnregister = false,
+  validate
 }) => {
   const {
     getError
@@ -28,10 +29,11 @@ const SelectableCardGroupField = ({
     }
   } = useController({
     name,
+    control,
     shouldUnregister,
     rules: {
       required,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {

package/dist/components/TagInputField/index.cjs

@@ -8,11 +8,11 @@ const TagInputField = ({
   className,
   disabled,
   id,
+  control,
   name,
   onChange,
   placeholder,
   required,
-  rules,
   variant,
   shouldUnregister = false,
   "data-testid": dataTestId,
@@ -22,7 +22,8 @@ const TagInputField = ({
   size,
   success,
   readOnly,
-  tooltip
+  tooltip,
+  validate
 }) => {
   const {
     getError
@@ -34,10 +35,11 @@ const TagInputField = ({
     }
   } = reactHookForm.useController({
     name,
+    control,
     rules: {
       required,
       shouldUnregister,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {

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

@@ -2,5 +2,5 @@ import { TagInput } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-export type TagInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip'>>;
-export declare const TagInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, name, onChange, placeholder, required, rules, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, }: TagInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type TagInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip'>>;
+export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, control, name, onChange, placeholder, required, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, validate, }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -6,11 +6,11 @@ const TagInputField = ({
   className,
   disabled,
   id,
+  control,
   name,
   onChange,
   placeholder,
   required,
-  rules,
   variant,
   shouldUnregister = false,
   "data-testid": dataTestId,
@@ -20,7 +20,8 @@ const TagInputField = ({
   size,
   success,
   readOnly,
-  tooltip
+  tooltip,
+  validate
 }) => {
   const {
     getError
@@ -32,10 +33,11 @@ const TagInputField = ({
     }
   } = useController({
     name,
+    control,
     rules: {
       required,
       shouldUnregister,
-      ...rules
+      validate
     }
   });
   return /* @__PURE__ */ jsx(TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {