@ultraviolet/form 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/components/CheckboxGroupField/index.cjs

@@ -16,12 +16,12 @@ const CheckboxGroupField = ({
   control,
   children,
   onChange,
-  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   validate,
+  legend = "",
   ...props
 }) => {
   const {
@@ -73,7 +73,7 @@ const CheckboxGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, name, required, children });
 };
 CheckboxGroupField.Checkbox = ui.CheckboxGroup.Checkbox;

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, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
 export declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, label, error: customError, name, required, shouldUnregister, validate, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, error: customError, name, required, shouldUnregister, validate, legend, ...props }: 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

@@ -14,12 +14,12 @@ const CheckboxGroupField = ({
   control,
   children,
   onChange,
-  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   validate,
+  legend = "",
   ...props
 }) => {
   const {
@@ -71,7 +71,7 @@ const CheckboxGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, name, required, children });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;

package/dist/components/RadioGroupField/index.cjs

@@ -11,11 +11,10 @@ const RadioGroupField = ({
   onChange,
   required,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
-  legend,
+  legend = "",
   ...props
 }) => {
   const {
@@ -39,7 +38,7 @@ const RadioGroupField = ({
     field.onChange(event);
     onChange?.(event.target.value);
   }, required, value: field.value, error: getError({
-    label
+    label: legend
   }, error) ?? customError, legend: legend ?? "", children });
 };
 RadioGroupField.Radio = ui.RadioGroup.Radio;

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

@@ -2,9 +2,9 @@ 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, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof RadioGroup>, 'value' | 'onChange' | 'legend'> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend'>>;
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof RadioGroup>, 'value' | 'onChange' | 'legend'> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend'>>;
 export declare const RadioGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, onChange, required, children, label, error: customError, shouldUnregister, validate, legend, ...props }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, onChange, required, children, error: customError, shouldUnregister, validate, legend, ...props }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, }: Omit<({
         error?: import("react").ReactNode;
         value: string | number;

package/dist/components/RadioGroupField/index.js

@@ -9,11 +9,10 @@ const RadioGroupField = ({
   onChange,
   required,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
-  legend,
+  legend = "",
   ...props
 }) => {
   const {
@@ -37,7 +36,7 @@ const RadioGroupField = ({
     field.onChange(event);
     onChange?.(event.target.value);
   }, required, value: field.value, error: getError({
-    label
+    label: legend
   }, error) ?? customError, legend: legend ?? "", children });
 };
 RadioGroupField.Radio = RadioGroup.Radio;

package/dist/components/SelectableCardGroupField/index.cjs

@@ -7,13 +7,13 @@ const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardGroupField = ({
   className,
-  legend,
+  legend = "",
+  legendDescription,
   control,
   name,
   onChange,
   required = false,
   children,
-  label = "",
   error: customError,
   helper,
   columns = 1,
@@ -39,7 +39,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { legend, legendDescription, name, type, showTick, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -52,7 +52,7 @@ const SelectableCardGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, className, columns, helper, required, children });
 };
 SelectableCardGroupField.Card = ui.SelectableCardGroup.Card;

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, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend' | 'legendDescription'>;
 export declare const SelectableCardGroupField: {
-    <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;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, legendDescription, control, name, onChange, required, children, 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,13 +5,13 @@ import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardGroupField = ({
   className,
-  legend,
+  legend = "",
+  legendDescription,
   control,
   name,
   onChange,
   required = false,
   children,
-  label = "",
   error: customError,
   helper,
   columns = 1,
@@ -37,7 +37,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsx(SelectableCardGroup, { legend, legendDescription, name, type, showTick, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -50,7 +50,7 @@ const SelectableCardGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, className, columns, helper, required, children });
 };
 SelectableCardGroupField.Card = SelectableCardGroup.Card;

package/dist/components/SelectableCardOptionGroupField/index.cjs

@@ -6,7 +6,7 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardOptionGroupField = ({
-  legend,
+  legend = "",
   control,
   name,
   optionName,
@@ -14,7 +14,6 @@ const SelectableCardOptionGroupField = ({
   onChangeOption,
   required = false,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
@@ -53,7 +52,7 @@ const SelectableCardOptionGroupField = ({
     optionField.onChange(value);
     onChangeOption?.(value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, required, ...props, children });
 };
 SelectableCardOptionGroupField.Option = ui.SelectableCardOptionGroup.Option;

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

@@ -2,11 +2,11 @@ import { SelectableCardOptionGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type SelectableCardOptionGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<ComponentProps<typeof SelectableCardOptionGroup>, 'onChange' | 'onChangeOption'> & Partial<Pick<ComponentProps<typeof SelectableCardOptionGroup>, 'onChangeOption' | 'onChange'>> & BaseFieldProps<TFieldValues, TFieldName> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & {
+type SelectableCardOptionGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<ComponentProps<typeof SelectableCardOptionGroup>, 'onChange' | 'onChangeOption'> & Partial<Pick<ComponentProps<typeof SelectableCardOptionGroup>, 'onChangeOption' | 'onChange'>> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & {
     optionName?: string;
 };
 export declare const SelectableCardOptionGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, optionName, onChange, onChangeOption, required, children, label, error: customError, shouldUnregister, validate, ...props }: SelectableCardOptionGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, name, optionName, onChange, onChangeOption, required, children, error: customError, shouldUnregister, validate, ...props }: SelectableCardOptionGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, }: Omit<import("node_modules/@ultraviolet/ui/dist/components/SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
         value: string;
         className?: string;

package/dist/components/SelectableCardOptionGroupField/index.js

@@ -4,7 +4,7 @@ import { SelectableCardOptionGroup } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SelectableCardOptionGroupField = ({
-  legend,
+  legend = "",
   control,
   name,
   optionName,
@@ -12,7 +12,6 @@ const SelectableCardOptionGroupField = ({
   onChangeOption,
   required = false,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
@@ -51,7 +50,7 @@ const SelectableCardOptionGroupField = ({
     optionField.onChange(value);
     onChangeOption?.(value);
   }, error: getError({
-    label
+    label: legend
   }, error) ?? customError, required, ...props, children });
 };
 SelectableCardOptionGroupField.Option = SelectableCardOptionGroup.Option;

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

@@ -2,9 +2,9 @@ import { ToggleGroup } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type ToggleGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof ToggleGroup>, 'className' | 'helper' | 'direction' | 'children' | 'error' | 'legend' | 'description'>> & Required<Pick<ComponentProps<typeof ToggleGroup>, 'legend'>>;
+type ToggleGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof ToggleGroup>, 'className' | 'helper' | 'direction' | 'children' | 'error' | 'legend' | 'legendDescription' | 'description'>> & Required<Pick<ComponentProps<typeof ToggleGroup>, 'legend'>>;
 export declare const ToggleGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, className, helper, description, direction, children, onChange, label, error: customError, name, required, shouldUnregister, validate, }: ToggleGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, legendDescription, control, className, helper, description, direction, children, onChange, error: customError, name, required, shouldUnregister, validate, }: ToggleGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: Omit<{
         id?: string;
         checked?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.3",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -55,26 +55,26 @@
     "@emotion/styled": "11.14.0",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x",
-    "@ultraviolet/ui": "2.0.0-beta.1"
+    "@ultraviolet/ui": "2.0.0-beta.3"
   },
   "devDependencies": {
-    "@babel/core": "7.26.10",
+    "@babel/core": "7.27.1",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "19.0.12",
-    "@types/react-dom": "19.0.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "@ultraviolet/ui": "2.0.0-beta.1",
+    "@types/react": "19.1.4",
+    "@types/react-dom": "19.1.5",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "@ultraviolet/ui": "2.0.0-beta.3",
     "@utils/test": "0.0.1"
   },
   "dependencies": {
     "@babel/runtime": "7.27.1",
     "react-hook-form": "7.55.0",
     "react-select": "5.10.0",
-    "@ultraviolet/icons": "4.0.0-beta.1",
-    "@ultraviolet/themes": "2.0.0-beta.0"
+    "@ultraviolet/icons": "4.0.0-beta.2",
+    "@ultraviolet/themes": "2.0.0-beta.1"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",