@ultraviolet/form 3.9.7 → 3.10.0

package/dist/components/CheckboxField/index.cjs

@@ -15,6 +15,7 @@ const CheckboxField = ({
   onBlur,
   shouldUnregister = false,
   validate,
+  "aria-label": ariaLabel,
   ...props
 }) => {
   const {
@@ -42,7 +43,12 @@ const CheckboxField = ({
     field.onBlur();
     onBlur?.(event);
   }, disabled: field.disabled, checked: !!field.value, error: getError({
-    label: label ?? ""
-  }, error), ref: field.ref, children });
+    label: label ?? ariaLabel ?? name
+  }, error), ref: field.ref, ...children ? {
+    children,
+    "aria-label": void 0
+  } : {
+    "aria-label": ariaLabel
+  } });
 };
 exports.CheckboxField = CheckboxField;

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, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'value'> & Omit<ComponentProps<typeof Checkbox>, 'value' | 'onChange' | 'aria-label'> & {
+type CheckboxFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'value'> & Omit<ComponentProps<typeof Checkbox>, 'value' | 'onChange'> & {
     className?: string;
     children?: ReactNode;
 };
-export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, label, disabled, required, children, onChange, onBlur, shouldUnregister, validate, ...props }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CheckboxField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, label, disabled, required, children, onChange, onBlur, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: CheckboxFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxField/index.js

@@ -13,6 +13,7 @@ const CheckboxField = ({
   onBlur,
   shouldUnregister = false,
   validate,
+  "aria-label": ariaLabel,
   ...props
 }) => {
   const {
@@ -40,8 +41,13 @@ const CheckboxField = ({
     field.onBlur();
     onBlur?.(event);
   }, disabled: field.disabled, checked: !!field.value, error: getError({
-    label: label ?? ""
-  }, error), ref: field.ref, children });
+    label: label ?? ariaLabel ?? name
+  }, error), ref: field.ref, ...children ? {
+    children,
+    "aria-label": void 0
+  } : {
+    "aria-label": ariaLabel
+  } });
 };
 export {
   CheckboxField

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

@@ -17,15 +17,13 @@ export declare const CheckboxGroupField: {
         required?: boolean;
         'data-testid'?: string;
         tooltip?: string;
-    } & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex"> & (({
-        "aria-label"?: undefined;
-    } & {
+    } & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onBlur" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex"> & ({
         children: import("react").ReactNode;
-    }) | ({
-        children?: undefined;
-    } & {
+        'aria-label'?: never;
+    } | {
+        children?: never;
         'aria-label': string;
-    })))) & import("react").RefAttributes<HTMLInputElement>, "onChange" | "checked"> & {
+    }))) & import("react").RefAttributes<HTMLInputElement>, "onChange" | "checked"> & {
         value: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/dist/components/NumberInputFieldV2/index.cjs

@@ -62,7 +62,7 @@ const NumberInputFieldV2 = ({
     field.onChange(newValue);
     onChange?.(newValue);
   }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
-    label: label ?? "",
+    label: label ?? ariaLabel ?? name,
     max,
     min,
     isInteger: step

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

@@ -2,7 +2,7 @@ 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, 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'>> & {
+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' | 'aria-label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'autoFocus' | 'readOnly' | 'min' | 'max' | 'controls'>> & {
     className?: string;
 };
 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;

package/dist/components/NumberInputFieldV2/index.js

@@ -60,7 +60,7 @@ const NumberInputFieldV2 = ({
     field.onChange(newValue);
     onChange?.(newValue);
   }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
-    label: label ?? "",
+    label: label ?? ariaLabel ?? name,
     max,
     min,
     isInteger: step

package/dist/components/RadioField/index.cjs

@@ -2,6 +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 reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const RadioField = ({
@@ -16,6 +17,7 @@ const RadioField = ({
   value,
   shouldUnregister = false,
   validate,
+  "aria-label": ariaLabel,
   ...props
 }) => {
   const {
@@ -35,14 +37,27 @@ const RadioField = ({
       validate
     }
   });
+  const errorLabel = react.useMemo(() => {
+    if (label && typeof label === "string") {
+      return label;
+    }
+    if (ariaLabel) {
+      return ariaLabel;
+    }
+    return name;
+  }, [label, name, ariaLabel]);
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { ...props, name: field.name, checked: field.value === value, disabled, error: getError({
-    label: typeof label === "string" ? label : ""
+    label: errorLabel
   }, error), onChange: () => {
     field.onChange(value);
     onChange?.(value);
   }, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onFocus, required, value: value ?? "", label });
+  }, onFocus, required, value: value ?? "", ...label ? {
+    label
+  } : {
+    "aria-label": ariaLabel
+  } });
 };
 exports.RadioField = RadioField;

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

@@ -1,10 +1,10 @@
 import { Radio } from '@ultraviolet/ui';
-import type { ComponentProps } from 'react';
+import { type ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof Radio>, 'value' | 'onChange' | 'aria-label'>;
+type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof Radio>, 'value' | 'onChange'>;
 /**
  * @deprecated This component is deprecated, use `RadioGroupField` instead.
  */
-export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, disabled, name, onBlur, label, onChange, onFocus, required, value, shouldUnregister, validate, ...props }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, disabled, name, onBlur, label, onChange, onFocus, required, value, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioField/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Radio } from "@ultraviolet/ui";
+import { useMemo } from "react";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioField = ({
@@ -14,6 +15,7 @@ const RadioField = ({
   value,
   shouldUnregister = false,
   validate,
+  "aria-label": ariaLabel,
   ...props
 }) => {
   const {
@@ -33,15 +35,28 @@ const RadioField = ({
       validate
     }
   });
+  const errorLabel = useMemo(() => {
+    if (label && typeof label === "string") {
+      return label;
+    }
+    if (ariaLabel) {
+      return ariaLabel;
+    }
+    return name;
+  }, [label, name, ariaLabel]);
   return /* @__PURE__ */ jsx(Radio, { ...props, name: field.name, checked: field.value === value, disabled, error: getError({
-    label: typeof label === "string" ? label : ""
+    label: errorLabel
   }, error), onChange: () => {
     field.onChange(value);
     onChange?.(value);
   }, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onFocus, required, value: value ?? "", label });
+  }, onFocus, required, value: value ?? "", ...label ? {
+    label
+  } : {
+    "aria-label": ariaLabel
+  } });
 };
 export {
   RadioField

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

@@ -13,13 +13,7 @@ export declare const RadioGroupField: {
         className?: string;
         'data-testid'?: string;
         tooltip?: string;
-    } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex" | "onKeyDown"> & ({
-        'aria-label': string;
-        label?: never;
-    } | {
-        'aria-label'?: never;
-        label: import("react").ReactNode;
-    }))) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+    } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "onFocus" | "autoFocus" | "id" | "tabIndex" | "onKeyDown"> & import("node_modules/@ultraviolet/ui/dist/types").LabelProp)) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
         name?: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/dist/components/SelectInputFieldV2/index.cjs

@@ -67,7 +67,7 @@ const SelectInputFieldV2 = ({
     field.onBlur();
     onBlur?.(event);
   }, placeholder, readOnly, multiselect, value: field.value, placeholderSearch, helper, emptyState, searchable, clearable, descriptionDirection, footer, labelDescription, error: getError({
-    label
+    label: label ?? ariaLabel ?? name
   }, error), success, loadMore, isLoading, selectAll, selectAllGroup, autofocus, optionalInfoPlacement, "aria-label": ariaLabel, onChange: handleChange, tooltip });
 };
 exports.SelectInputFieldV2 = SelectInputFieldV2;

package/dist/components/SelectInputFieldV2/index.js

@@ -65,7 +65,7 @@ const SelectInputFieldV2 = ({
     field.onBlur();
     onBlur?.(event);
   }, placeholder, readOnly, multiselect, value: field.value, placeholderSearch, helper, emptyState, searchable, clearable, descriptionDirection, footer, labelDescription, error: getError({
-    label
+    label: label ?? ariaLabel ?? name
   }, error), success, loadMore, isLoading, selectAll, selectAllGroup, autofocus, optionalInfoPlacement, "aria-label": ariaLabel, onChange: handleChange, tooltip });
 };
 export {

package/dist/components/SelectableCardField/index.cjs

@@ -23,7 +23,8 @@ const SelectableCardField = ({
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel
 }) => {
   const {
     field,
@@ -40,7 +41,15 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { productIcon, illustration, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...productIcon ? {
+    productIcon
+  } : {
+    illustration
+  }, ...label ? {
+    label
+  } : {
+    "aria-label": ariaLabel
+  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -57,6 +66,6 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, label, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
 };
 exports.SelectableCardField = SelectableCardField;

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

@@ -1,11 +1,15 @@
 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, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'label' | 'data-testid'>> & {
+import type { BaseFieldProps, LabelProp } from '../../types';
+type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'data-testid'>> & {
     className?: string;
-    illustration?: string;
+} & ({
+    illustration?: ComponentProps<typeof SelectableCard>['illustration'];
     productIcon?: never;
-};
-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, productIcon, illustration, "data-testid": dataTestId, }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+} | {
+    productIcon?: ComponentProps<typeof SelectableCard>['productIcon'];
+    illustration?: never;
+}) & LabelProp;
+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, productIcon, illustration, "data-testid": dataTestId, "aria-label": ariaLabel, }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectableCardField/index.js

@@ -21,7 +21,8 @@ const SelectableCardField = ({
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel
 }) => {
   const {
     field,
@@ -38,7 +39,15 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsx(SelectableCard, { productIcon, illustration, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  return /* @__PURE__ */ jsx(SelectableCard, { ...productIcon ? {
+    productIcon
+  } : {
+    illustration
+  }, ...label ? {
+    label
+  } : {
+    "aria-label": ariaLabel
+  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -55,7 +64,7 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, label, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
 };
 export {
   SelectableCardField

package/dist/components/SliderField/index.cjs

@@ -19,6 +19,7 @@ const SliderField = ({
   value,
   defaultValue,
   options,
+  "aria-label": ariaLabel,
   ...props
 }) => {
   const {
@@ -66,9 +67,9 @@ const SliderField = ({
       onChange?.(newValue);
     }
   }, max, min, error: getError({
-    label: label ?? "",
+    label: label ?? ariaLabel ?? name,
     max,
     min
-  }, error), label, required, options, ...props });
+  }, error), label, required, options, "aria-label": ariaLabel, ...props });
 };
 exports.SliderField = SliderField;

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

@@ -5,5 +5,5 @@ import type { BaseFieldProps } from '../../types';
 type SliderFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof Slider>, 'value' | 'onChange'> & {
     suffix?: string | ReactNode[];
 };
-export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, options, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, options, "aria-label": ariaLabel, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SliderField/index.js

@@ -17,6 +17,7 @@ const SliderField = ({
   value,
   defaultValue,
   options,
+  "aria-label": ariaLabel,
   ...props
 }) => {
   const {
@@ -64,10 +65,10 @@ const SliderField = ({
       onChange?.(newValue);
     }
   }, max, min, error: getError({
-    label: label ?? "",
+    label: label ?? ariaLabel ?? name,
     max,
     min
-  }, error), label, required, options, ...props });
+  }, error), label, required, options, "aria-label": ariaLabel, ...props });
 };
 export {
   SliderField

package/dist/components/TagInputField/index.cjs

@@ -25,7 +25,8 @@ const TagInputField = ({
   success,
   readOnly,
   tooltip,
-  validate
+  validate,
+  "aria-label": ariaLabel
 }) => {
   const {
     getError
@@ -54,7 +55,7 @@ const TagInputField = ({
     onChange?.(newTags);
   }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, labelDescription, size, success, error: getError({
     regex: regexes,
-    label: label ?? ""
+    label: label ?? ariaLabel ?? name
   }, error), readOnly, tooltip });
 };
 exports.TagInputField = TagInputField;

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

@@ -2,7 +2,7 @@ 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, 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 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' | 'aria-label'>> & {
     regex?: (RegExp | RegExp[])[];
 };
-export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, 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;
+export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, className, disabled, id, control, name, onChange, placeholder, required, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, validate, "aria-label": ariaLabel, }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -23,7 +23,8 @@ const TagInputField = ({
   success,
   readOnly,
   tooltip,
-  validate
+  validate,
+  "aria-label": ariaLabel
 }) => {
   const {
     getError
@@ -52,7 +53,7 @@ const TagInputField = ({
     onChange?.(newTags);
   }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, labelDescription, size, success, error: getError({
     regex: regexes,
-    label: label ?? ""
+    label: label ?? ariaLabel ?? name
   }, error), readOnly, tooltip });
 };
 export {

package/dist/components/TextAreaField/index.cjs

@@ -79,7 +79,7 @@ const TextAreaField = ({
     regex: regexes,
     minLength,
     maxLength,
-    label: label ?? ariaLabel,
+    label: label ?? ariaLabel ?? name,
     value: field.value
   }, error), helper, labelDescription, minLength, maxLength, name, onBlur: (event) => {
     onBlur?.(event);

package/dist/components/TextAreaField/index.js

@@ -77,7 +77,7 @@ const TextAreaField = ({
     regex: regexes,
     minLength,
     maxLength,
-    label: label ?? ariaLabel,
+    label: label ?? ariaLabel ?? name,
     value: field.value
   }, error), helper, labelDescription, minLength, maxLength, name, onBlur: (event) => {
     onBlur?.(event);

package/dist/components/TextInputFieldV2/index.cjs

@@ -72,7 +72,7 @@ const TextInputField = ({
     regex: regexes,
     minLength,
     maxLength,
-    label: label ?? "",
+    label: label ?? ariaLabel ?? name,
     value: field.value
   }, error), helper, label, loading, labelDescription, minLength, maxLength, name, onBlur: (event) => {
     onBlur?.(event);

package/dist/components/TextInputFieldV2/index.js

@@ -70,7 +70,7 @@ const TextInputField = ({
     regex: regexes,
     minLength,
     maxLength,
-    label: label ?? "",
+    label: label ?? ariaLabel ?? name,
     value: field.value
   }, error), helper, label, loading, labelDescription, minLength, maxLength, name, onBlur: (event) => {
     onBlur?.(event);

package/dist/components/ToggleField/index.cjs

@@ -19,7 +19,8 @@ const ToggleField = ({
   format,
   "data-testid": dataTestId,
   shouldUnregister = false,
-  validate
+  validate,
+  "aria-label": ariaLabel
 }) => {
   const {
     field,
@@ -52,7 +53,7 @@ const ToggleField = ({
     }
     onChange?.(event.target.checked);
   }, label, size, disabled, labelPosition, className, required, "data-testid": dataTestId, error: getError({
-    label: name
+    label: typeof label === "string" ? label : ariaLabel ?? name
   }, error) });
 };
 exports.ToggleField = ToggleField;

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

@@ -2,9 +2,9 @@ import { Toggle } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type ToggleFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid'> & {
+type ToggleFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Pick<ComponentProps<typeof Toggle>, 'disabled' | 'label' | 'size' | 'tooltip' | 'labelPosition' | 'className' | 'data-testid' | 'aria-label'> & {
     parse?: (value: boolean) => any;
     format?: (value: any) => boolean;
 };
-export declare const ToggleField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, label, name, control, onChange, required, size, tooltip, labelPosition, parse, format, "data-testid": dataTestId, shouldUnregister, validate, }: ToggleFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, label, name, control, onChange, required, size, tooltip, labelPosition, parse, format, "data-testid": dataTestId, shouldUnregister, validate, "aria-label": ariaLabel, }: ToggleFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ToggleField/index.js

@@ -17,7 +17,8 @@ const ToggleField = ({
   format,
   "data-testid": dataTestId,
   shouldUnregister = false,
-  validate
+  validate,
+  "aria-label": ariaLabel
 }) => {
   const {
     field,
@@ -50,7 +51,7 @@ const ToggleField = ({
     }
     onChange?.(event.target.checked);
   }, label, size, disabled, labelPosition, className, required, "data-testid": dataTestId, error: getError({
-    label: name
+    label: typeof label === "string" ? label : ariaLabel ?? name
   }, error) });
 };
 export {

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

@@ -14,6 +14,7 @@ export declare const ToggleGroupField: {
         size?: "large" | "small";
         labelPosition?: "left" | "right";
         label?: import("react").ReactNode;
+        'aria-label'?: string;
         helper?: import("react").ReactNode;
         disabled?: boolean;
         className?: string;

package/dist/components/VerificationCodeField/index.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const ui = require("@ultraviolet/ui");
+const reactHookForm = require("react-hook-form");
+const index = require("../../providers/ErrorContext/index.cjs");
+const VerificationCodeField = ({
+  className,
+  fields,
+  id = "verification-code-input",
+  label,
+  name,
+  onChange,
+  onComplete,
+  placeholder,
+  required,
+  type = "number",
+  disabled,
+  validate
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    rules: {
+      required,
+      validate: {
+        required: (localValue) => {
+          if (required && localValue.length !== (fields ?? 4)) {
+            return false;
+          }
+          return true;
+        },
+        ...validate
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className, gap: 1, justifyContent: "center", alignItems: "center", direction: "column", "aria-label": "verification-code-field", children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("label", { id: `${id}-label`, htmlFor: `${id}-0`, style: {
+      cursor: "pointer",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", variant: "body", prominence: "strong", children: label }) }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.VerificationCode, { inputId: id, error: !!error, placeholder, fields, onChange: (event) => {
+      onChange?.(event);
+      field.onChange(event);
+    }, onComplete: (event) => {
+      onComplete?.(event);
+    }, type, disabled, required }),
+    error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "small", variant: "caption", sentiment: "danger", children: getError({
+      label: label || "verification-code-field"
+    }, error) }) : null
+  ] });
+};
+exports.VerificationCodeField = VerificationCodeField;

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

@@ -0,0 +1,12 @@
+import { VerificationCode } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type VerificationCodeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof VerificationCode>, 'disabled' | 'error' | 'fields' | 'initialValue' | 'onChange' | 'onComplete' | 'placeholder' | 'required' | 'type'>> & {
+    className?: string;
+    id?: string;
+    name: string;
+    label?: string;
+};
+export declare const VerificationCodeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, fields, id, label, name, onChange, onComplete, placeholder, required, type, disabled, validate, }: VerificationCodeFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VerificationCodeField/index.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Stack, Text, VerificationCode } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const VerificationCodeField = ({
+  className,
+  fields,
+  id = "verification-code-input",
+  label,
+  name,
+  onChange,
+  onComplete,
+  placeholder,
+  required,
+  type = "number",
+  disabled,
+  validate
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    rules: {
+      required,
+      validate: {
+        required: (localValue) => {
+          if (required && localValue.length !== (fields ?? 4)) {
+            return false;
+          }
+          return true;
+        },
+        ...validate
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(Stack, { className, gap: 1, justifyContent: "center", alignItems: "center", direction: "column", "aria-label": "verification-code-field", children: [
+    label ? /* @__PURE__ */ jsx("label", { id: `${id}-label`, htmlFor: `${id}-0`, style: {
+      cursor: "pointer",
+      flexShrink: 0
+    }, children: /* @__PURE__ */ jsx(Text, { as: "p", variant: "body", prominence: "strong", children: label }) }) : null,
+    /* @__PURE__ */ jsx(VerificationCode, { inputId: id, error: !!error, placeholder, fields, onChange: (event) => {
+      onChange?.(event);
+      field.onChange(event);
+    }, onComplete: (event) => {
+      onComplete?.(event);
+    }, type, disabled, required }),
+    error ? /* @__PURE__ */ jsx(Text, { as: "small", variant: "caption", sentiment: "danger", children: getError({
+      label: label || "verification-code-field"
+    }, error) }) : null
+  ] });
+};
+export {
+  VerificationCodeField
+};

package/dist/components/index.d.ts

@@ -21,3 +21,4 @@ export { SelectableCardGroupField } from './SelectableCardGroupField';
 export { SelectInputFieldV2 } from './SelectInputFieldV2';
 export { UnitInputField } from './UnitInputField';
 export { SliderField } from './SliderField';
+export { VerificationCodeField } from './VerificationCodeField';

package/dist/index.cjs

@@ -26,6 +26,7 @@ const index$k = require("./components/SelectableCardGroupField/index.cjs");
 const index$l = require("./components/SelectInputFieldV2/index.cjs");
 const index$m = require("./components/UnitInputField/index.cjs");
 const index$n = require("./components/SliderField/index.cjs");
+const index$o = require("./components/VerificationCodeField/index.cjs");
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
 Object.defineProperty(exports, "useController", {
@@ -76,3 +77,4 @@ exports.SelectableCardGroupField = index$k.SelectableCardGroupField;
 exports.SelectInputFieldV2 = index$l.SelectInputFieldV2;
 exports.UnitInputField = index$m.UnitInputField;
 exports.SliderField = index$n.SliderField;
+exports.VerificationCodeField = index$o.VerificationCodeField;

package/dist/index.js

@@ -24,6 +24,7 @@ import { SelectableCardGroupField } from "./components/SelectableCardGroupField/
 import { SelectInputFieldV2 } from "./components/SelectInputFieldV2/index.js";
 import { UnitInputField } from "./components/UnitInputField/index.js";
 import { SliderField } from "./components/SliderField/index.js";
+import { VerificationCodeField } from "./components/VerificationCodeField/index.js";
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -49,6 +50,7 @@ export {
   TimeField,
   ToggleField,
   UnitInputField,
+  VerificationCodeField,
   useController,
   useErrors,
   useFieldArray,

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { Control, FieldError, FieldPath, FieldPathValue, FieldValues, Path, PathValue, UseControllerProps, Validate } from 'react-hook-form';
 export type MetaField = {
     isInteger?: number | string;
@@ -28,3 +29,21 @@ export type BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TFiel
     shouldUnregister?: UseControllerProps<TFieldValues, TFieldName>['shouldUnregister'];
     control?: Control<TFieldValues>;
 };
+/**
+ * Classic prop type where label is a ReactNode and aria-label is a string.
+ * One or another is required.
+ */
+export type LabelProp = {
+    label: ReactNode;
+    'aria-label'?: never;
+} | {
+    label?: never;
+    'aria-label': string;
+};
+export type PascalToCamelCase<S extends string> = S extends `${infer P1}${infer P2}` ? `${Lowercase<P1>}${P2}` : S;
+export type RemoveSuffix<S extends string, Suffix extends string> = S extends `${infer Prefix}${Suffix}` ? Prefix : S;
+/**
+ * This type removes the suffix from a PascalCase string and converts it to camelCase. Pretty useful for Icon, CategoryIcon and ProductIcon components.
+ * Their names being `AddressIcon` but we might need to have `address` as the prop name.
+ */
+export type PascalToCamelCaseWithoutSuffix<T extends string, Suffix extends string> = T extends `${infer Prefix}${Suffix}` ? `${PascalToCamelCase<Prefix extends `${infer First}${infer Rest}` ? `${First}${Rest}` : never>}` : never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.9.7",
+  "version": "3.10.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -69,10 +69,10 @@
   },
   "dependencies": {
     "@babel/runtime": "7.25.7",
-    "react-hook-form": "7.53.0",
+    "react-hook-form": "7.53.1",
     "react-select": "5.8.1",
     "@ultraviolet/themes": "1.14.2",
-    "@ultraviolet/ui": "1.73.1"
+    "@ultraviolet/ui": "1.74.0"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",