@axa-fr/canopee-react 1.8.0 → 2.0.0-RC.1

package/dist/distributeur/Form/Checkbox/Checkbox.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import React, { forwardRef } from "react";
+import React, {} from "react";
 import { CheckboxItem } from "./CheckboxItem";
 import { CheckboxModes } from "./CheckboxModes";
+import { getClassName } from "../../utilities";
 const defaultClassName = (mode) => {
     switch (mode) {
         case CheckboxModes.default:
@@ -13,18 +14,22 @@ const defaultClassName = (mode) => {
             return `af-form__checkbox-${mode}`;
     }
 };
-const CheckboxInner = forwardRef(({ id, name, options, disabled, children, values = [], mode = CheckboxModes.default, onChange = () => { }, ...otherProps }, inputRef) => {
-    const className = defaultClassName(mode);
+const CheckboxInner = ({ id, name, options, disabled, children, values = [], mode = CheckboxModes.default, onChange = () => { }, className, ...otherProps }) => {
+    const itemClassName = defaultClassName(mode);
+    const componentClassName = getClassName({
+        baseClassName: "af-form__checkbox-container",
+        className,
+    });
     const handleOnChange = ({ target: { value, checked }, }) => {
         const newValues = checked
             ? [...values, value]
             : values.filter((v) => v !== value);
         onChange({ values: newValues, target: { value, checked }, id, name });
     };
-    return (_jsx("div", { className: "af-form__checkbox-container", children: options.map((option) => {
+    return (_jsx("div", { className: componentClassName, children: options.map((option) => {
             const isChecked = values ? values.indexOf(option.value) >= 0 : false;
-            return (_createElement(CheckboxItem, { ...otherProps, onChange: handleOnChange, key: option.value, className: className, isChecked: isChecked, name: name, disabled: option.disabled || disabled, ref: inputRef, ...option }, children));
+            return (_createElement(CheckboxItem, { ...otherProps, onChange: handleOnChange, key: option.value, className: itemClassName, isChecked: isChecked, name: name, disabled: option.disabled || disabled, ...option }, children));
         }) }));
-});
+};
 CheckboxInner.displayName = "Checkbox";
 export const Checkbox = CheckboxInner;

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

@@ -1,6 +1,9 @@
-import { type ComponentProps } from "react";
+import { type ComponentPropsWithRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Checkbox } from "./Checkbox";
-type Props = Omit<ComponentProps<typeof Checkbox> & ConsumerFieldProps, "placeholder">;
-declare const CheckboxInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+type Props = Omit<ComponentPropsWithRef<typeof Checkbox> & ConsumerFieldProps, "placeholder">;
+declare const CheckboxInput: {
+    ({ label, mode, options, children, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { CheckboxInput };

package/dist/distributeur/Form/Checkbox/CheckboxInput.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { Field, useOptionsWithId } from "../core";
 import { Checkbox } from "./Checkbox";
 import { CheckboxModes } from "./CheckboxModes";
-const CheckboxInput = forwardRef(({ label, mode = "default", options, children, ...otherProps }, inputRef) => {
+const CheckboxInput = ({ label, mode = "default", options, children, ...otherProps }) => {
     const newOptions = useOptionsWithId(options);
-    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ classModifier, id, ariaInvalid, errorId, ...props }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, classModifier: ariaInvalid ? `${classModifier} error` : classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
+    return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ inputClassName, id, ariaInvalid, errorId, ...props }) => {
+            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
         } }));
-});
+};
 CheckboxInput.displayName = "CheckboxInput";
 export { CheckboxInput };

package/dist/distributeur/Form/Checkbox/CheckboxItem.d.ts

@@ -1,12 +1,14 @@
-import { type ReactNode } from "react";
+import { type ComponentPropsWithRef, type ReactNode } from "react";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
-declare const CheckboxItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
+type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
     optionClassName?: string;
     children?: ReactNode;
     label?: ReactNode;
     isChecked?: boolean;
     variant?: "error" | "warning";
-} & import("react").RefAttributes<HTMLInputElement>>;
+};
+declare const CheckboxItem: {
+    ({ disabled, value, id, children, label, isChecked, className, variant, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { CheckboxItem };

package/dist/distributeur/Form/Checkbox/CheckboxItem.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import check from "@material-symbols/svg-700/sharp/check.svg";
-import { forwardRef, useId, } from "react";
+import { useId } from "react";
 import { getOptionClassName } from "../core";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 import { Svg } from "../../Svg";
-const CheckboxItem = forwardRef(({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, variant, ...otherProps }, inputRef) => {
+const CheckboxItem = ({ disabled = false, value = "", id, children, label, isChecked, className, variant, ...otherProps }) => {
     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, variant);
-    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 })] })] }));
-});
+    const optionClassName = getOptionClassName(className ?? "", "af-form__checkbox", disabled, variant);
+    return (_jsxs("div", { className: optionClassName, children: [_jsx("input", { ...otherProps, className: "af-form__input-checkbox", value: value, id: newId, disabled: disabled, checked: isChecked, type: "checkbox" }), _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/distributeur/Form/Choice/Choice.d.ts

@@ -1,15 +1,16 @@
-import { type ComponentProps } from "react";
+import { type ComponentPropsWithRef } from "react";
 import { Radio } from "../Radio";
 import { type Option } from "../core";
-type Props = Omit<ComponentProps<typeof Radio>, "options" | "value"> & {
+type Props = Omit<ComponentPropsWithRef<typeof Radio>, "options" | "value"> & {
     id: string;
     name?: string;
     options?: Array<Omit<Option, "value"> & {
         value: boolean;
     }>;
     value?: boolean | string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
 };
-declare const Choice: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const Choice: {
+    ({ children, value, options, name, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { Choice };

package/dist/distributeur/Form/Choice/Choice.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { Radio } from "../Radio";
 import { useOptionsWithId } from "../core";
 const defaultOptions = [
     { label: "Oui", value: true },
     { label: "Non", value: false },
 ];
-const Choice = forwardRef(({ children, value, options = defaultOptions, name, ...otherProps }, inputRef) => {
+const Choice = ({ children, value, options = defaultOptions, name, ...otherProps }) => {
     const choiceOptions = useOptionsWithId(options.map((o) => ({
         ...o,
         value: `${o.value}`,
     })));
     const generatedId = useId();
-    return (_jsx(Radio, { ...otherProps, mode: "default", ref: inputRef, name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
-});
+    return (_jsx(Radio, { ...otherProps, mode: "default", name: name ?? `choice_${generatedId}`, value: value?.toString(), options: choiceOptions, children: children }));
+};
 Choice.displayName = "Choice";
 export { Choice };

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

@@ -1,6 +1,9 @@
-import { type ComponentProps } from "react";
+import { type ComponentPropsWithRef } from "react";
 import { type ConsumerFieldProps } from "../core";
 import { Choice } from "./Choice";
-type Props = ComponentProps<typeof Choice> & ConsumerFieldProps;
-declare const ChoiceInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+type Props = ComponentPropsWithRef<typeof Choice> & ConsumerFieldProps;
+declare const ChoiceInput: {
+    ({ label, options, children, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { ChoiceInput };

package/dist/distributeur/Form/Choice/ChoiceInput.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { Field } from "../core";
 import { Choice } from "./Choice";
 const defaultOptions = [
     { label: "Oui", value: true },
     { label: "Non", value: false },
 ];
-const ChoiceInput = forwardRef(({ label, options = defaultOptions, children, ...otherProps }, inputRef) => {
-    return (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ classModifier, id, errorId, ariaInvalid, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Choice, { id: id, ref: inputRef, classModifier: classModifier, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props }), children] })) }));
-});
+const ChoiceInput = ({ label, options = defaultOptions, children, ...otherProps }) => (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ inputClassName, id, errorId, ariaInvalid, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Choice, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, options: options, ...props }), children] })) }));
 ChoiceInput.displayName = "ChoiceInput";
 export { ChoiceInput };

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

@@ -1,10 +1,12 @@
 import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
 import { type ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "value"> & {
-    /** @deprecated Use `className` and the native `disabled`/`required` props instead. */
-    classModifier?: string;
     defaultValue?: Date | string;
     value?: Date | string;
+    hasInfobulle?: boolean;
+};
+declare const Date: {
+    ({ className, defaultValue, value, hasInfobulle, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-declare const Date: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Date };

package/dist/distributeur/Form/Date/Date.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
-import { forwardRef } from "react";
+import {} from "react";
 import { formatDateInputValue } from "../../utilities/helpers/date";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Date = forwardRef(({ className, classModifier, defaultValue, value, ...otherProps }, ref) => {
+const Date = ({ className, defaultValue, value, hasInfobulle, ...otherProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-form__input-date",
-        modifiers: classModifier?.split(" "),
+        modifiers: [hasInfobulle && "hasinfobulle"],
         className,
     });
-    return (_jsx("input", { className: componentClassName, type: "date", defaultValue: formatDateInputValue(defaultValue), value: formatDateInputValue(value), ref: ref, disabled: classModifier?.includes("disabled"), required: classModifier?.includes("required"), ...otherProps }));
-});
+    return (_jsx("input", { className: `${componentClassName} af-form__input-text`, type: "date", defaultValue: formatDateInputValue(defaultValue), value: formatDateInputValue(value), ...otherProps }));
+};
 Date.displayName = "Date";
 export { Date };

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

@@ -4,5 +4,8 @@ import { Date } from "./Date";
 type Props = ConsumerFieldProps & ComponentProps<typeof Date> & {
     helpMessage?: ReactNode;
 };
-declare const DateInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const DateInput: {
+    ({ children, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { DateInput };

package/dist/distributeur/Form/Date/DateInput.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { Field } from "../core";
 import { Date } from "./Date";
-const DateInput = forwardRef(({ children, ...otherProps }, inputRef) => {
-    return (_jsx(Field, { classNameSuffix: "date", ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
-});
+const DateInput = ({ children, ...otherProps }) => (_jsx(Field, { ...otherProps, renderInput: ({ id, inputClassName, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] })) }));
 DateInput.displayName = "DateInput";
 export { DateInput };

package/dist/distributeur/Form/Experimental/DateInput.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentProps } from "react";
+import { Input } from "./Input";
+import type { InputBaseProps } from "./types";
+export type DateInputProps = Omit<ComponentProps<typeof Input>, "children" | "type" | "value" | "defaultValue" | "min" | "max"> & InputBaseProps & {
+    /**
+     * The value of the date input, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    value?: Date | string;
+    /**
+     * The default value of the date input, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    defaultValue?: Date | string;
+    /**
+     * The earliest selectable date, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    min?: Date | string;
+    /**
+     * The latest selectable date, as a `Date` or an ISO date string (`YYYY-MM-DD`).
+     */
+    max?: Date | string;
+};
+/**
+ * This component renders a label, a date input field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the input.
+ * It also supports adding a unit on the right of the input.
+ */
+declare const DateInput: {
+    ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, value, defaultValue, min, max, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DateInput };

package/dist/distributeur/Form/Experimental/DateInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { formatDateInputValue } from "../../utilities/helpers/date";
+import { Input } from "./Input";
+import { InputContainer } from "./InputContainer";
+import { InputUnit } from "./InputUnit";
+import { ItemMessage } from "./ItemMessage";
+import { Label } from "./Label";
+import { useInput } from "./useInput.hook";
+/**
+ * This component renders a label, a date input field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the input.
+ * It also supports adding a unit on the right of the input.
+ */
+const DateInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, value, defaultValue, min, max, ...props }) => {
+    const { describedBy, errorId, helperId, inputClassName, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
+        id,
+        labelPosition,
+        inputClassName: inputClassNameProp,
+        labelClassName: labelClassNameProp,
+        errorMessage,
+        helpMessage,
+    });
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: containerClassName, children: [_jsx(Label, { htmlFor: inputId, required: required, className: labelClassName, children: label }), _jsx(Input, { ...props, type: "date", value: formatDateInputValue(value), defaultValue: formatDateInputValue(defaultValue), min: formatDateInputValue(min), max: formatDateInputValue(max), className: inputClassName, id: inputId, "aria-describedby": describedBy, "aria-invalid": isInvalid }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+};
+DateInput.displayName = "DateInput";
+export { DateInput };

package/dist/distributeur/Form/Experimental/Input.d.ts

@@ -1,3 +1,7 @@
 import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
-declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+import { type ComponentPropsWithRef } from "react";
+declare const Input: {
+    ({ className, ...otherProps }: ComponentPropsWithRef<"input">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { Input };

package/dist/distributeur/Form/Experimental/Input.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
-import { forwardRef } from "react";
+import {} from "react";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Input = forwardRef(({ className, ...otherProps }, inputRef) => {
+const Input = ({ className, ...otherProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-input__input",
         className,
     });
-    return (_jsx("input", { className: componentClassName, ref: inputRef, ...otherProps }));
-});
+    return _jsx("input", { className: componentClassName, ...otherProps });
+};
 Input.displayName = "Input";
 export { Input };

package/dist/distributeur/Form/Experimental/InputContainer.d.ts

@@ -3,6 +3,9 @@ import type { PropsWithChildren } from "react";
 type InputContainerProps = PropsWithChildren<{
     vertical?: boolean;
     className?: string;
+    component?: "div" | "fieldset";
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
 }>;
-export declare const InputContainer: ({ children, vertical, className, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputContainer: ({ children, vertical, className, component: Component, ...props }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/distributeur/Form/Experimental/InputContainer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputContainer.css";
 import classNames from "classnames";
-export const InputContainer = ({ children, vertical, className, }) => {
+export const InputContainer = ({ children, vertical, className, component: Component = "div", ...props }) => {
     const containerClass = classNames("af-input__container", { "af-input__container--vertical": vertical }, className);
-    return _jsx("div", { className: containerClass, children: children });
+    return (_jsx(Component, { className: containerClass, ...props, children: children }));
 };

package/dist/distributeur/Form/Experimental/InputUnit.d.ts

@@ -1,3 +1,3 @@
 import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputUnit.css";
 import type { PropsWithChildren } from "react";
-export declare const InputUnit: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const InputUnit: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element | null;

package/dist/distributeur/Form/Experimental/InputUnit.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Experimental/InputUnit.css";
-export const InputUnit = ({ children }) => (_jsx("span", { className: "af-input__unit", children: children }));
+export const InputUnit = ({ children }) => children ? _jsx("span", { className: "af-input__unit", children: children }) : null;

package/dist/distributeur/Form/Experimental/ItemMessage.d.ts

@@ -24,5 +24,5 @@ type Props = {
      */
     id?: string;
 };
-export declare const ItemMessage: ({ variant, children, className, id }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemMessage: ({ variant, children, className, id }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/distributeur/Form/Experimental/ItemMessage.js

@@ -15,5 +15,5 @@ export const ItemMessage = ({ variant, children, className, id }) => {
         modifiers: [variant],
     });
     const icon = variant ? iconByVariant[variant] : null;
-    return (_jsxs("div", { className: componentClassName, id: id, children: [icon ? _jsx(Svg, { src: icon, className: "af-item-message__icon" }) : null, children] }));
+    return children ? (_jsxs("div", { className: componentClassName, id: id, children: [icon ? _jsx(Svg, { src: icon, className: "af-item-message__icon" }) : null, children] })) : null;
 };

package/dist/distributeur/Form/Experimental/Label.d.ts

@@ -1,6 +1,6 @@
 import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
 import type { ComponentProps } from "react";
-type LabelProps = ComponentProps<"label"> & {
+export type LabelProps = ComponentProps<"label"> & {
     /**
      * Whether the label is required or not.
      * This will add a `*` after the label text.
@@ -10,4 +10,3 @@ type LabelProps = ComponentProps<"label"> & {
     required?: boolean;
 };
 export declare const Label: ({ children, required, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/distributeur/Form/Experimental/Legend.d.ts

@@ -0,0 +1,12 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
+import type { ComponentProps } from "react";
+export type LegendProps = ComponentProps<"span"> & {
+    /**
+     * Whether the label is required or not.
+     * This will add a `*` after the label text.
+     * This is purely presentational and does not enforce any validation logic.
+     * @default false
+     */
+    required?: boolean;
+};
+export declare const Legend: ({ children, required, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Legend.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Label.css";
+export const Legend = ({ children, required = false, ...props }) => (_jsxs("span", { className: "af-label", ...props, children: [children, required ? (_jsx("span", { className: "af-label__required", "aria-hidden": true, children: "*" })) : null] }));

package/dist/distributeur/Form/Experimental/Radio/AddRadioCard.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio/AddRadioCard.css";
+export type AddRadioCardProps = {
+    orientation?: "horizontal" | "vertical";
+    onClick?: () => void;
+};
+export declare const AddRadioCard: ({ orientation, onClick, }: AddRadioCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Radio/AddRadioCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio/AddRadioCard.css";
+import AddIcon from "@material-symbols/svg-400/rounded/add_circle-fill.svg";
+import { CardButton } from "../../../CardButton/CardButton";
+import { Svg } from "../../../Svg";
+import { getClassName } from "../../../utilities/helpers/getClassName";
+export const AddRadioCard = ({ orientation = "horizontal", onClick, }) => {
+    const addRadioCardClassName = getClassName({
+        baseClassName: "af-radio-add-card",
+        modifiers: [orientation],
+    });
+    return (_jsx(CardButton, { className: addRadioCardClassName, onClick: onClick, icon: _jsx(Svg, { src: AddIcon, "aria-hidden": "true", className: "af-basecard__icon" }), orientation: orientation, children: _jsx("span", { className: "af-radiocard__label", children: "Ajouter" }) }));
+};

package/dist/distributeur/Form/Experimental/Radio/RadioButton.d.ts

@@ -0,0 +1,13 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
+import type { ChangeEvent, InputHTMLAttributes } from "react";
+export type RadioButtonProps = {
+    id: string;
+    name: string;
+    value: string;
+    disabled?: boolean;
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    label: string;
+    className?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+export declare const RadioButton: ({ id, name, label, onChange, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Radio/RadioButton.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
+export const RadioButton = ({ id, name, label, onChange, ...props }) => (_jsxs("label", { className: "af-radio__button", htmlFor: id, children: [label, _jsx("input", { type: "radio", id: id, name: name, onChange: onChange, ...props })] }));

package/dist/distributeur/Form/Experimental/Radio/RadioCard.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import { type RadioItemProps } from "./RadioItem";
+export type RadioCardProps = {
+    label?: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    name: string;
+} & RadioItemProps;
+export declare const RadioCard: ({ id, icon, label, action, orientation, ...props }: RadioCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Radio/RadioCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { CardButton } from "../../../CardButton/CardButton";
+import { Svg } from "../../../Svg";
+import { RadioItem } from "./RadioItem";
+import { getClassName } from "../../../utilities/helpers/getClassName";
+export const RadioCard = ({ id, icon, label, action, orientation = "horizontal", ...props }) => {
+    const radioCardClassName = getClassName({
+        baseClassName: "af-radiocard",
+        modifiers: [orientation],
+    });
+    return (_jsxs("div", { className: radioCardClassName, children: [_jsxs(CardButton, { component: "label", htmlFor: id, className: "af-radio__card", orientation: orientation, children: [_jsx(RadioItem, { id: id, ...props }), typeof icon === "string" ? (_jsx(Svg, { className: "af-basecard__icon", src: icon })) : (icon), _jsx("span", { className: "af-radiocard__label", children: label })] }), action ? _jsx("span", { className: "af-radiocard__action", children: action }) : null] }));
+};

package/dist/distributeur/Form/Experimental/Radio/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type RadioGroupProps = {
+    className?: string;
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    variant?: "button" | "card";
+};
+export declare const RadioGroup: ({ children, orientation, variant, className, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Radio/RadioGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../../../utilities/helpers/getClassName";
+export const RadioGroup = ({ children, orientation = "horizontal", variant = "button", className, }) => {
+    const finalClassName = getClassName({
+        baseClassName: "af-radio__group",
+        modifiers: [orientation, variant],
+        className,
+    });
+    return _jsx("div", { className: finalClassName, children: children });
+};

package/dist/distributeur/Form/Experimental/Radio/RadioInput.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import type { InputBaseProps } from "../types";
+import { type RadioButtonProps } from "./RadioButton";
+import { type RadioCardProps } from "./RadioCard";
+export type RadioInputPropsButtonVariant = InputBaseProps & {
+    variant?: "button";
+    options: RadioButtonProps[];
+    children?: ReactNode;
+};
+export type RadioInputPropsCardVariant = InputBaseProps & {
+    variant: "card";
+    showAddButton?: boolean;
+    orientation?: "horizontal" | "vertical";
+    onAdd: () => void;
+    options: RadioCardProps[];
+};
+export type RadioInputProps = RadioInputPropsCardVariant | RadioInputPropsButtonVariant;
+export declare const RadioInput: ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }: RadioInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Radio/RadioInput.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputContainer } from "../InputContainer";
+import { InputUnit } from "../InputUnit";
+import { ItemMessage } from "../ItemMessage";
+import { Legend } from "../Legend";
+import { useInput } from "../useInput.hook";
+import {} from "./RadioButton";
+import {} from "./RadioCard";
+import { RadioGroup } from "./RadioGroup";
+import { RadioInputOptions } from "./_radioInputOptions";
+function getLabelPosition(labelPosition, orientation) {
+    if (labelPosition) {
+        return labelPosition;
+    }
+    if (orientation === "vertical") {
+        return "topLeft";
+    }
+    return "centerLeft";
+}
+export const RadioInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, ...props }) => {
+    const variant = props.variant || "button";
+    const { describedBy, errorId, helperId, inputId, isContainerVertical, isInvalid, labelClassName, } = useInput({
+        id,
+        labelPosition: getLabelPosition(labelPosition, props.variant === "card" ? props.orientation : undefined),
+        inputClassName: inputClassNameProp,
+        labelClassName: labelClassNameProp,
+        errorMessage,
+        helpMessage,
+    });
+    const labelId = `${inputId}-label`;
+    return (_jsxs(InputContainer, { vertical: isContainerVertical, className: `${containerClassName} af-radio__input-container`, component: "fieldset", "aria-labelledby": labelId, "aria-describedby": describedBy, children: [_jsx(Legend, { id: labelId, required: required, className: labelClassName, children: label }), _jsx(RadioGroup, { variant: variant, className: inputClassNameProp, orientation: props.variant === "card"
+                    ? props.orientation || "horizontal"
+                    : undefined, children: _jsx(RadioInputOptions, { inputId: inputId, isInvalid: isInvalid, describedBy: describedBy, ...props }) }), _jsx(InputUnit, { children: contentRight }), _jsx(ItemMessage, { id: helperId, children: helpMessage }), _jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })] }));
+};

package/dist/distributeur/Form/Experimental/Radio/RadioItem.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
+import type { InputHTMLAttributes } from "react";
+export type RadioItemProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const RadioItem: ({ className, ...props }: RadioItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Experimental/Radio/RadioItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Radio.css";
+import { getClassName } from "../../../utilities/helpers/getClassName";
+export const RadioItem = ({ className, ...props }) => {
+    const finalClassName = getClassName({
+        baseClassName: "af-radio__item",
+        className,
+    });
+    return _jsx("input", { type: "radio", className: finalClassName, ...props });
+};

package/dist/distributeur/Form/Experimental/Radio/RadioText.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import { type RadioItemProps } from "./RadioItem";
+export type RadioTextProps = {
+    label: ReactNode;
+} & RadioItemProps;
+export declare const RadioText: ({ id, label, ...props }: RadioTextProps) => import("react/jsx-runtime").JSX.Element;