@axa-fr/design-system-slash-react 1.2.1-alpha.9 → 1.2.1-alpha.94

package/dist/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import "@axa-fr/design-system-slash-css/dist/Card/Card.css";
+type CardProps = ComponentProps<"button"> & {
+    /** By default : *vertical* */
+    orientation?: "vertical" | "horizontal";
+    /** icon url, for exemple from "@material-symbols" :
+     *
+     *  import villaIcon from "@material-symbols/svg-400/outlined/villa.svg"; */
+    iconSrc?: string;
+    error?: boolean;
+};
+export declare const Card: ({ children, className, iconSrc, orientation, error, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Card/Card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Svg } from "../Svg";
+import "@axa-fr/design-system-slash-css/dist/Card/Card.css";
+const DEFAULT_CLASS_NAME = "af-card";
+export const Card = ({ children, className, iconSrc, orientation = "vertical", error = false, ...otherProps }) => (_jsxs("button", { type: "button", className: classNames(DEFAULT_CLASS_NAME, error && `${DEFAULT_CLASS_NAME}--error`, orientation === "horizontal" && `${DEFAULT_CLASS_NAME}--${orientation}`, className), ...otherProps, children: [iconSrc ? _jsx(Svg, { src: iconSrc }) : null, children] }));

package/dist/Form/Checkbox/CheckboxInput.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
-import { LegacyField } from "../core";
+import { type ConsumerFieldProps } from "../core";
 import { Checkbox } from "./Checkbox";
-type Props = Omit<ComponentProps<typeof Checkbox> & ComponentProps<typeof LegacyField>, "children" | "placeholder">;
+type Props = Omit<ComponentProps<typeof Checkbox> & ConsumerFieldProps, "children" | "placeholder">;
 declare const CheckboxInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { CheckboxInput };

package/dist/Form/Checkbox/CheckboxInput.js

@@ -1,23 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { LegacyField, MessageTypes, useOptionsWithId } from "../core";
+import { forwardRef } from "react";
+import { Field, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const CheckboxInput = forwardRef(({ mode, messageType, message, classModifier, options, classNameContainerLabel, classNameContainerInput, label, isVisible, className, forceDisplayMessage, required, ...checkboxProps }, inputRef) => {
-    let rowModifier = classModifier;
-    if (mode === CheckboxModes.classic) {
-        rowModifier += " label-top";
-    }
-    if (required) {
-        rowModifier += " required";
-    }
-    const errorUseId = useId();
+const CheckboxInput = forwardRef(({ label, mode = "default", options, ...otherProps }, inputRef) => {
     const newOptions = useOptionsWithId(options);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsx(LegacyField, { label: label, id: newOptions[0].id, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsx(Checkbox, { mode: mode, options: newOptions, classModifier: message && messageType === MessageTypes.error && forceDisplayMessage
-                ? `${classModifier} error`
-                : classModifier, ref: inputRef, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...checkboxProps }) }));
+    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
+            return (_jsx(Checkbox, { id: id, mode: mode, options: newOptions, classModifier: ariaInvalid ? `${classModifier} error` : classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }));
+        } }));
 });
 CheckboxInput.displayName = "CheckboxInput";
 export { CheckboxInput };

package/dist/Form/Checkbox/CheckboxItem.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import check from "@material-symbols/svg-400/sharp/check.svg";
 import { forwardRef, useId } from "react";
 import { getOptionClassName } from "../core";
 import "@axa-fr/design-system-slash-css/dist/Form/Checkbox/Checkbox.scss";
+import { Svg } from "../../Svg";
 const CheckboxItem = forwardRef(({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, ...otherProps }, inputRef) => {
     const newLabel = children || label;
     const generatedId = useId();
     const newId = id ?? generatedId; // id is required on this component
     const optionClassName = getOptionClassName(className ?? "", classModifier ?? "", "af-form__checkbox", disabled);
-    return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-checkbox", value: value, id: newId, disabled: disabled, checked: isChecked, type: "checkbox", ref: inputRef }), _jsxs("label", { className: "af-form__label", htmlFor: newId, children: [_jsx("span", { className: "af-form__indicator", children: _jsx("i", { className: "glyphicon glyphicon-ok" }) }), _jsx("span", { className: "af-form__description", children: newLabel })] })] }));
+    return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-checkbox", value: value, id: newId, disabled: disabled, checked: isChecked, type: "checkbox", ref: inputRef }), _jsxs("label", { className: "af-form__label", htmlFor: newId, children: [_jsx("span", { className: "af-form__indicator", children: _jsx(Svg, { role: "presentation", className: "ok-icon", src: check }) }), _jsx("span", { className: "af-form__description", children: newLabel })] })] }));
 });
 CheckboxItem.displayName = "CheckboxItem";
 export { CheckboxItem };

package/dist/Form/Choice/Choice.d.ts

@@ -1,13 +1,14 @@
-import "@axa-fr/design-system-slash-css/dist/Form/Choice/Choice.scss";
 import { type ComponentProps } from "react";
 import { Radio } from "../Radio";
 import { type Option } from "../core";
-type Props = Omit<ComponentProps<typeof Radio>, "options"> & {
+type Props = Omit<ComponentProps<typeof Radio>, "options" | "value"> & {
     id: string;
     name?: string;
     options?: Array<Omit<Option, "value"> & {
         value: boolean;
     }>;
+    value?: boolean | string;
+    classModifier?: string;
 };
 declare const Choice: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Choice };

package/dist/Form/Choice/Choice.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Form/Choice/Choice.scss";
 import { forwardRef, useId } from "react";
 import { Radio } from "../Radio";
 import { useOptionsWithId } from "../core";
@@ -13,7 +12,7 @@ const Choice = forwardRef(({ children, value, options = defaultOptions, name, ..
         value: `${o.value}`,
     })));
     const generatedId = useId();
-    return (_jsx(Radio, { ...otherProps, ref: inputRef, name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
+    return (_jsx(Radio, { ...otherProps, mode: "default", ref: inputRef, name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
 });
 Choice.displayName = "Choice";
 export { Choice };

package/dist/Form/Choice/ChoiceInput.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from "react";
-import { LegacyField } from "../core";
+import { type ConsumerFieldProps } from "../core";
 import { Choice } from "./Choice";
-type Props = ComponentProps<typeof Choice> & Omit<ComponentProps<typeof LegacyField>, "children">;
+type Props = ComponentProps<typeof Choice> & Omit<ConsumerFieldProps, "children">;
 declare const ChoiceInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { ChoiceInput };

package/dist/Form/Choice/ChoiceInput.js

@@ -1,26 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { LegacyField, useInputClassModifier, useOptionsWithId } from "../core";
+import { forwardRef } from "react";
+import { Field } from "../core";
 import { Choice } from "./Choice";
-import { useAriaInvalid } from "../core/useAriaInvalid";
 const defaultOptions = [
     { label: "Oui", value: true },
     { label: "Non", value: false },
 ];
-const ChoiceInput = forwardRef(({ id, name, messageType, message, className, classModifier, isVisible, classNameContainerLabel, classNameContainerInput, label, forceDisplayMessage, options = defaultOptions, disabled, required, ...otherProps }, inputRef) => {
-    const errorUseId = useId();
-    const newOptions = useOptionsWithId(options.map((o) => ({
-        ...o,
-        value: `${o.value}`,
-    })));
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier ?? "", disabled ?? false, false, required);
-    const firstId = newOptions?.[0]?.id ?? "";
-    const choiceOptions = newOptions.map((o) => ({
-        ...o,
-        value: o.value === "true",
-    }));
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsx(LegacyField, { label: label, id: firstId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsx(Choice, { ...otherProps, id: id, name: name, ref: inputRef, classModifier: inputClassModifier, options: options ? choiceOptions : undefined, required: required, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid }) }));
+const ChoiceInput = forwardRef(({ label, options = defaultOptions, ...otherProps }, inputRef) => {
+    return (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ classModifier, id, errorId, ariaInvalid, ...props }) => (_jsx(Choice, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props })) }));
 });
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

package/dist/Form/Date/DateInput.d.ts

@@ -1,44 +1,8 @@
-import { ReactNode } from "react";
-declare const DateInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "value"> & {
-    classModifier?: string;
-    defaultValue?: Date | string;
-    value?: Date | string;
-}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref">, "placeholderText"> & Omit<{
-    message?: string;
-    messageType?: import("../core").MessageTypes;
-} & {
-    className?: string;
-    classModifier?: string;
-    forceDisplayMessage?: boolean;
-    children: ReactNode;
-    setStateMemoryFn?: typeof import("../core/FieldForm").setStateMemory;
-    onChangeByStateFn?: typeof import("../core/FieldForm").onChangeByState;
-    setStateOnBlurFn?: typeof import("../core/FieldForm").setStateOnBlur;
-    setStateOnFocusFn?: typeof import("../core/FieldForm").setStateOnFocus;
-    initialState?: {
-        hasLostFocusOnce: boolean;
-        hasFocus: boolean;
-        hasChange: boolean;
-        memory: {
-            message?: string;
-            messageType?: import("../core").MessageTypes;
-        };
-    };
-}, "children"> & {
-    label: ReactNode;
-    children?: ReactNode;
-    id?: string;
-    classModifier?: string;
-    classNameContainerLabel?: string;
-    classNameContainerInput?: string;
-    isVisible?: boolean;
-    roleContainer?: string;
-    ariaLabelContainer?: string;
-    isLabelContainerLinkedToInput?: boolean;
-    errorId?: string;
-} & {
-    placeholder?: string;
+import { ComponentProps, ReactNode } from "react";
+import { ConsumerFieldProps } from "../core";
+import { Date } from "./Date";
+type Props = Omit<ConsumerFieldProps & ComponentProps<typeof Date> & {
     helpMessage?: ReactNode;
-    children?: ReactNode;
-} & import("react").RefAttributes<HTMLInputElement>>;
+}, "renderInput" | "children">;
+declare const DateInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { DateInput };

package/dist/Form/Date/DateInput.js

@@ -1,15 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Field } from "../core";
 import { Date } from "./Date";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const DateInput = forwardRef(({ classModifier = "", message, children, helpMessage, id, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, disabled = false, required, ...otherProps }, ref) => {
-    const inputUseId = useId();
-    const errorUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__date", classModifier: inputFieldClassModifier, children: [_jsx(Date, { id: inputId, classModifier: inputClassModifier, disabled: disabled, required: required, ref: ref, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+const DateInput = forwardRef(({ rightElement, ...otherProps }, inputRef) => {
+    return (_jsx(Field, { ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...otherProps }), rightElement] })) }));
 });
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/Form/File/FileErrors.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const FileErrors = ({ errors }) => (_jsxs("div", { className: "af-form__file-errors", children: [_jsx("span", { children: "Le chargement de certains fichiers a \u00E9chou\u00E9 : " }), _jsx("ul", { className: "af-form__file-errors-list", children: errors &&
-                errors.map((err) => (_jsxs("li", { children: [err.file.name, " (", err.file.size, ")"] }, err.file.name))) })] }));
+const FileErrors = ({ errors }) => (_jsxs("div", { className: "af-form__file-errors", children: [_jsx("span", { children: "Le chargement de certains fichiers a \u00E9chou\u00E9 : " }), _jsx("ul", { className: "af-form__file-errors-list", children: errors
+                ? errors.map((err) => (_jsxs("li", { children: [err.file.name, " (", err.file.size, ")"] }, err.file.name)))
+                : null })] }));
 export { FileErrors };

package/dist/Form/File/FileInput.d.ts

@@ -1,14 +1,13 @@
 import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
-import { LegacyField } from "../core";
+import { type ConsumerFieldProps } from "../core";
 import { File } from "./File";
 import { FileTable } from "./FileTable";
-type FieldProps = ComponentPropsWithoutRef<typeof LegacyField>;
 type FileProps = ComponentPropsWithoutRef<typeof File>;
 type FileTableProps = ComponentPropsWithoutRef<typeof FileTable>;
-type Props = FieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
+type Props = Omit<ConsumerFieldProps & FileProps & Pick<FileTableProps, "values" | "errors"> & {
     fileLabel?: string;
     helpMessage?: ReactNode;
-};
-declare const FileInput: ({ values, name, onChange, classModifier, message, children, helpMessage, id, forceDisplayMessage, messageType, classNameContainerLabel, classNameContainerInput, label, isVisible, className, errors, fileLabel, disabled, required, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
+}, "children">;
+declare const FileInput: ({ values, id, name, onChange, rightElement, label, errors, fileLabel, classModifier, ...otherFileProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { FileInput };

package/dist/Form/File/FileInput.js

@@ -1,11 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/File/File.scss";
 import { useId } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { Field } from "../core";
 import { File } from "./File";
 import { FileTable } from "./FileTable";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const FileInput = ({ values = [], name = "", onChange, classModifier = "", message, children, helpMessage, id = "", forceDisplayMessage, messageType, classNameContainerLabel, classNameContainerInput, label, isVisible, className, errors, fileLabel, disabled = false, required, ...otherFileProps }) => {
+const FileInput = ({ values = [], id, name = "", onChange, rightElement, label, errors, fileLabel, classModifier, ...otherFileProps }) => {
     const onDeleteClick = (selectedId, selectInputId) => {
         const newValues = values.filter((element) => element.id !== selectedId);
         onChange({
@@ -15,12 +14,8 @@ const FileInput = ({ values = [], name = "", onChange, classModifier = "", messa
             fileAction: "delete",
         });
     };
-    const inputUseId = useId();
-    const errorUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    const rowModifier = `${inputFieldClassModifier} label-top`;
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: rowModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__file", classModifier: inputFieldClassModifier, children: [_jsx(File, { id: inputId, name: name, onChange: onChange, disabled: disabled, classModifier: inputClassModifier, label: fileLabel, required: required || classModifier?.includes("required"), "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherFileProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message }), _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, inputId), classModifier: classModifier })] }));
+    const generatedId = useId();
+    const actualId = id ?? generatedId;
+    return (_jsx(Field, { label: label, labelPosition: "top", id: actualId, classNameSuffix: "file", ...otherFileProps, renderInput: ({ classModifier: inputClassModifiers, id: inputId, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(File, { id: inputId, name: name, onChange: onChange, classModifier: inputClassModifiers, label: fileLabel, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })), appendChildren: _jsx(FileTable, { errors: errors, values: values, onClick: (selectedId) => onDeleteClick(selectedId, actualId), classModifier: classModifier }) }));
 };
 export { FileInput };

package/dist/Form/File/FileTable.js

@@ -4,6 +4,6 @@ import { FileErrors } from "./FileErrors";
 import { getComponentClassName } from "../../utilities";
 const FileTable = ({ errors, values, className, classModifier, disabled, onClick, }) => {
     const componentClassName = getComponentClassName(className, classModifier, "custom-table-file af-file-table");
-    return (_jsxs("div", { className: componentClassName, children: [errors && errors.length > 0 && _jsx(FileErrors, { errors: errors }), values && values.length > 0 && (_jsx("ul", { className: "af-form__file-list", children: values.map(({ file, id }) => (_jsx(FileLine, { disabled: disabled, file: file, onClick: onClick, id: id }, id))) }))] }));
+    return (_jsxs("div", { className: componentClassName, children: [errors && errors.length > 0 ? _jsx(FileErrors, { errors: errors }) : null, values && values.length > 0 ? (_jsx("ul", { className: "af-form__file-list", children: values.map(({ file, id }) => (_jsx(FileLine, { disabled: disabled, file: file, onClick: onClick, id: id }, id))) })) : null] }));
 };
 export { FileTable };

package/dist/Form/MultiSelect/MultiSelectInput.d.ts

@@ -1,9 +1,7 @@
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
-import { type ComponentProps, type ReactNode } from "react";
-import { LegacyField } from "../core";
+import { type ComponentProps } from "react";
+import { ConsumerFieldProps } from "../core";
 import { MultiSelect } from "./MultiSelect";
-type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof MultiSelect> & {
-    helpMessage?: ReactNode;
-};
-declare const MultiSelectInput: ({ classModifier, message, children, helpMessage, id, disabled, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, required, ...multiSelectProps }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = ConsumerFieldProps & ComponentProps<typeof MultiSelect>;
+declare const MultiSelectInput: ({ label, ...multiSelectProps }: Props) => import("react/jsx-runtime").JSX.Element;
 export { MultiSelectInput };

package/dist/Form/MultiSelect/MultiSelectInput.js

@@ -1,15 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/Form/MultiSelect/MultiSelect.scss";
-import { useId } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { Field } from "../core";
 import { MultiSelect } from "./MultiSelect";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-const MultiSelectInput = ({ classModifier, message, children, helpMessage, id, disabled, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, required, ...multiSelectProps }) => {
-    const { inputFieldClassModifier } = useInputClassModifier(classModifier ?? "", disabled ?? false, Boolean(children), required);
-    const generatedId = useId();
-    const errorUseId = useId();
-    const inputId = id || generatedId;
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(MultiSelect, { inputId: inputId, disabled: disabled, required: required, "aria-invalid": isInvalid, "aria-errormessage": errorUseId, ...multiSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+const MultiSelectInput = ({ label, ...multiSelectProps }) => {
+    return (_jsx(Field, { label: label, ...multiSelectProps, classNameSuffix: "select", renderInput: ({ id, ariaInvalid, errorId, ...props }) => {
+            return (_jsx(MultiSelect, { id: id, "aria-invalid": ariaInvalid, "aria-describedby": errorId, ...props }));
+        } }));
 };
 export { MultiSelectInput };

package/dist/Form/Number/NumberInput.d.ts

@@ -1,12 +1,9 @@
 import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from "react";
-import { LegacyField } from "../core";
+import { ComponentPropsWithRef } from "react";
+import { type ConsumerFieldProps } from "../core";
 import { Number } from "./Number";
-type Props = ComponentPropsWithoutRef<typeof LegacyField> & ComponentPropsWithRef<typeof Number> & {
-    helpMessage?: ReactNode;
-    children?: ReactNode;
-};
-export declare const NumberInput: ({ message, children, helpMessage, id, label, classNameContainerLabel, classNameContainerInput, forceDisplayMessage, messageType, isVisible, className, disabled, classModifier, required, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = Omit<ConsumerFieldProps & ComponentPropsWithRef<typeof Number>, "children">;
+export declare const NumberInput: ({ rightElement, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Number/NumberInput.js

@@ -1,16 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-slash-css/dist/common/grid.scss";
 import "@axa-fr/design-system-slash-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
-import { useId, } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { Field } from "../core";
 import { Number } from "./Number";
-import { useAriaInvalid } from "../core/useAriaInvalid";
-export const NumberInput = ({ message, children, helpMessage, id, label, classNameContainerLabel, classNameContainerInput, forceDisplayMessage, messageType, isVisible, className, disabled = false, classModifier = "", required, ...otherProps }) => {
-    const inputUseId = useId();
-    const errorUseId = useId();
-    const inputId = id ?? inputUseId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__text", classModifier: inputFieldClassModifier, children: [_jsx(Number, { id: inputId, classModifier: inputClassModifier, disabled: disabled, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
+export const NumberInput = ({ rightElement, ...props }) => {
+    return (_jsx(Field, { ...props, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...inputProps }) => (_jsxs(_Fragment, { children: [_jsx(Number, { id: id, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...inputProps }), rightElement] })) }));
 };

package/dist/Form/Pass/PassInput.d.ts

@@ -1,10 +1,10 @@
 import { ComponentProps, ReactNode } from "react";
-import { LegacyField } from "../core";
+import { ConsumerFieldProps } from "../core";
 import { Pass } from "./Pass";
 type PassProps = ComponentProps<typeof Pass>;
-type Props = ComponentProps<typeof LegacyField> & Omit<PassProps, "onToggleType" | "type"> & {
+type Props = Omit<ConsumerFieldProps & PassProps & {
     helpMessage?: ReactNode;
     score?: string;
-};
-declare const PassInput: ({ message, children, helpMessage, id, disabled, label, messageType, isVisible, forceDisplayMessage, className, classModifier, classNameContainerLabel, classNameContainerInput, score, required, ...passProps }: Props) => import("react/jsx-runtime").JSX.Element;
+}, "onToggleType" | "type" | "children">;
+declare const PassInput: ({ rightElement, score, classModifier, disabled, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export { PassInput };

package/dist/Form/Pass/PassInput.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
-import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Field } from "../core";
 import { Pass } from "./Pass";
-import { useAriaInvalid } from "../core/useAriaInvalid";
 const strengthList = {
     0: "bad",
     1: "okay",
@@ -24,15 +23,9 @@ const calculateStrength = (score) => {
     }
     return strengthList[strength];
 };
-const PassInput = ({ message, children, helpMessage, id, disabled = false, label, messageType, isVisible, forceDisplayMessage, className, classModifier, classNameContainerLabel, classNameContainerInput, score, required, ...passProps }) => {
+const PassInput = ({ rightElement, score, classModifier, disabled, ...props }) => {
     const strength = calculateStrength(score);
-    const classModifierStrength = [classModifier ?? "", strength ?? ""].join(" ");
     const [type, setType] = useState("password");
-    const inputId = useId();
-    const errorUseId = useId();
-    const finalId = id ?? inputId;
-    const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifierStrength, disabled, Boolean(children), required);
-    const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
-    return (_jsx(LegacyField, { label: label, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, id: finalId, classModifier: `${classModifierStrength} ${inputFieldClassModifier}`, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: _jsxs(FieldInput, { className: "af-form__pass-container", classModifier: inputFieldClassModifier, children: [_jsx(Pass, { ...passProps, type: type, id: inputId, disabled: disabled, classModifier: inputClassModifier, "aria-describedby": errorUseId, "aria-invalid": isInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), children, _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }) }));
+    return (_jsx(Field, { ...props, classModifier: classModifier, renderInput: ({ id, classModifier: modifier, ariaInvalid, errorId }) => (_jsxs(_Fragment, { children: [_jsx(Pass, { ...props, type: type, id: id, disabled: disabled, classModifier: `${modifier} ${strength}`, "aria-describedby": errorId, "aria-invalid": ariaInvalid, onToggleType: () => setType(type === "password" ? "text" : "password") }), rightElement] })) }));
 };
 export { PassInput };

package/dist/Form/Radio/Radio.d.ts

@@ -1,14 +1,26 @@
-import { ComponentPropsWithRef } from "react";
 import type { Option } from "../core";
-import { RadioItem } from "./RadioItem";
 export declare enum RadioModes {
     classic = "classic",
     default = "default",
-    inline = "inline"
+    inline = "inline",
+    card = "card"
 }
-type Props = Omit<ComponentPropsWithRef<typeof RadioItem>, "id" | "label" | "className"> & {
+declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
-    mode?: keyof typeof RadioModes;
-};
-declare const Radio: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    options: Option[];
+    orientation?: "horizontal" | "vertical";
+    error?: boolean;
+}, "ref"> & {
+    mode: "card";
+}) | Omit<{
+    options: Option[];
+} & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "checked"> & {
+    classModifier?: string;
+    optionClassName?: string;
+    label?: import("react").ReactNode;
+    isChecked?: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "className" | "id" | "label"> & {
+    mode?: "classic" | "default" | "inline";
+}, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
 export { Radio };

package/dist/Form/Radio/Radio.js

@@ -1,11 +1,14 @@
 import { createElement as _createElement } from "react";
-import { forwardRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from "react";
 import { RadioItem } from "./RadioItem";
+import { RadioCardGroup } from "./RadioCardGroup";
 export var RadioModes;
 (function (RadioModes) {
     RadioModes["classic"] = "classic";
     RadioModes["default"] = "default";
     RadioModes["inline"] = "inline";
+    RadioModes["card"] = "card";
 })(RadioModes || (RadioModes = {}));
 const getClassNameMode = (mode) => {
     switch (mode) {
@@ -13,13 +16,19 @@ const getClassNameMode = (mode) => {
             return "af-form__radio";
         case RadioModes.inline:
             return "af-form__radio-inline";
+        case RadioModes.card:
+            return "af-form__radio-card";
         default:
             return "af-form__radio-custom";
     }
 };
-const Radio = forwardRef(({ classModifier, options, value = "", mode = RadioModes.default, children, disabled, ...otherProps }, inputRef) => {
-    const classNameMode = getClassNameMode(mode);
-    return options.map((option) => (_createElement(RadioItem, { ...otherProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, classModifier: classModifier, ref: inputRef, ...option }, children)));
+const Radio = forwardRef(({ options, value = "", children, disabled, ...otherProps }, inputRef) => {
+    const { mode, ...onlyNecessaryProps } = otherProps;
+    const classNameMode = getClassNameMode(mode ?? "default");
+    if (mode === "card") {
+        return (_jsx(RadioCardGroup, { ...onlyNecessaryProps, options: options, disabled: disabled, value: value, children: children }));
+    }
+    return options.map((option) => (_createElement(RadioItem, { ...onlyNecessaryProps, key: option.value, isChecked: option.value === value, disabled: option.disabled || disabled, className: classNameMode, ref: inputRef, ...option }, children)));
 });
 Radio.displayName = "EnhancedInputRadio";
 export { Radio };

package/dist/Form/Radio/RadioCardGroup.d.ts

@@ -0,0 +1,10 @@
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
+import { ComponentProps } from "react";
+import type { Option } from "../core";
+type Props = ComponentProps<"input"> & {
+    options: Option[];
+    orientation?: "horizontal" | "vertical";
+    error?: boolean;
+};
+export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, error, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/Radio/RadioCardGroup.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Form/Radio/RadioCardGroup.css";
+import { useId, useRef } from "react";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const DEFAULT_CLASSNAME = "af-card";
+const DEFAULT_CONTAINER_CLASSNAME = "af-form__radio-card-group";
+export const RadioCardGroup = ({ children, options, className, value, name, orientation = "vertical", disabled = false, error = false, ...otherProps }) => {
+    const idGenerated = useId();
+    const radioGroupRef = useRef(null);
+    return (_jsxs("div", { ref: radioGroupRef, role: "radiogroup", className: classNames([
+            DEFAULT_CONTAINER_CLASSNAME,
+            className,
+            orientation === "horizontal" &&
+                `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
+        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
+                const newName = name || optionName || idGenerated;
+                const allClassNames = classNames([
+                    DEFAULT_CLASSNAME,
+                    orientation === "horizontal" && `${DEFAULT_CLASSNAME}--horizontal`,
+                    error && `${DEFAULT_CLASSNAME}--error`,
+                ]);
+                const isDisabled = disabled || optionDisabled;
+                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue));
+            }), children] }));
+};