@axa-fr/canopee-react 2.0.0-alpha.8 → 2.0.0-alpha.80

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

@@ -1,8 +1,6 @@
 import { type ComponentPropsWithRef, type ReactNode } from "react";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
     optionClassName?: string;
     children?: ReactNode;
     label?: ReactNode;
@@ -10,7 +8,7 @@ type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {
     variant?: "error" | "warning";
 };
 declare const CheckboxItem: {
-    ({ disabled, value, id, children, label, isChecked, className, classModifier, variant, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ 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

@@ -4,11 +4,11 @@ import { useId } from "react";
 import { getOptionClassName } from "../core";
 import "@axa-fr/canopee-css/distributeur/Form/Checkbox/Checkbox.css";
 import { Svg } from "../../Svg";
-const CheckboxItem = ({ disabled = false, value = "", id, children, label, isChecked, className, classModifier, variant, ...otherProps }) => {
+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);
+    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";

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

@@ -8,8 +8,6 @@ type Props = Omit<ComponentPropsWithRef<typeof Radio>, "options" | "value"> & {
         value: boolean;
     }>;
     value?: boolean | string;
-    /** @deprecated Use `className` instead. */
-    classModifier?: string;
 };
 declare const Choice: {
     ({ children, value, options, name, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,6 @@ const defaultOptions = [
     { label: "Oui", value: true },
     { label: "Non", value: false },
 ];
-const ChoiceInput = ({ label, options = defaultOptions, children, ...otherProps }) => (_jsx(Field, { label: label, roleContainer: "radiogroup", ...otherProps, renderInput: ({ classModifier, id, errorId, ariaInvalid, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Choice, { id: id, 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,13 +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, classModifier, defaultValue, value, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ className, defaultValue, value, hasInfobulle, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Date };

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

@@ -3,13 +3,13 @@ import "@axa-fr/canopee-css/distributeur/Form/Date/Date.css";
 import {} from "react";
 import { formatDateInputValue } from "../../utilities/helpers/date";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Date = ({ className, classModifier, defaultValue, value, ...otherProps }) => {
+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), 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.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import {} from "react";
 import { Field } from "../core";
 import { Date } from "./Date";
-const DateInput = ({ children, ...otherProps }) => (_jsx(Field, { classNameSuffix: "date", ...otherProps, renderInput: ({ id, classModifier, ariaInvalid, errorId, ...props }) => (_jsxs(_Fragment, { children: [_jsx(Date, { id: id, classModifier: classModifier, "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/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;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioItem } from "./RadioItem";
+export const RadioText = ({ id, label, ...props }) => (_jsxs("label", { htmlFor: id, className: "af-radio__text", children: [_jsx(RadioItem, { id: id, ...props }), _jsx("span", { className: "af-radio__label", children: label })] }));

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

@@ -0,0 +1,8 @@
+import type { RadioInputPropsButtonVariant, RadioInputPropsCardVariant } from "./RadioInput";
+type RadioInputOptionsProps = {
+    inputId: string;
+    isInvalid: boolean;
+    describedBy?: string;
+} & (Pick<RadioInputPropsCardVariant, "variant" | "options" | "showAddButton" | "orientation" | "onAdd"> | Pick<RadioInputPropsButtonVariant, "variant" | "options">);
+export declare const RadioInputOptions: ({ inputId, isInvalid, describedBy, ...props }: RadioInputOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddRadioCard } from "./AddRadioCard";
+import { RadioButton } from "./RadioButton";
+import { RadioCard } from "./RadioCard";
+export const RadioInputOptions = ({ inputId, isInvalid, describedBy, ...props }) => (_jsxs(_Fragment, { children: [!props.variant || props.variant === "button"
+            ? props.options.map((o) => (_jsx(RadioButton, { ...o }, `${inputId}-${o.value}`)))
+            : null, props.variant === "card" ? (_jsxs(_Fragment, { children: [props.options.map((o) => (_jsx(RadioCard, { id: `${inputId}-${o.value}`, ...o, "aria-invalid": isInvalid, "aria-describedby": describedBy, orientation: props.orientation || "horizontal" }, `${inputId}-${o.value}`))), props.showAddButton ? (_jsx(AddRadioCard, { orientation: props.orientation || "horizontal", onClick: props.onAdd })) : null] })) : null] }));

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

@@ -0,0 +1,8 @@
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Select.css";
+import { type ComponentPropsWithRef } from "react";
+declare const Select: {
+    ({ className, children, ...otherProps }: ComponentPropsWithRef<"select">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Select };

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Input.css";
+import "@axa-fr/canopee-css/distributeur/Form/Experimental/Select.css";
+import {} from "react";
+import icon from "@material-symbols/svg-700/rounded/arrow_drop_down-fill.svg";
+import { getClassName } from "../../utilities/helpers/getClassName";
+import { Svg } from "../../Svg";
+const Select = ({ className, children, ...otherProps }) => {
+    const componentClassName = getClassName({
+        baseClassName: "af-input__input",
+        className,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("select", { className: componentClassName, ...otherProps, children: children }), _jsx(Svg, { className: "af-input__select-icon", src: icon })] }));
+};
+Select.displayName = "Select";
+export { Select };

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

@@ -0,0 +1,36 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { Select } from "./Select";
+import type { InputBaseProps } from "./types";
+export type SelectInputProps = Omit<ComponentProps<typeof Select>, "children"> & InputBaseProps & {
+    /**
+     * The content of the select, as JSX.
+     * This allows you to render `<option>` elements, and to group them with `<optgroup>`.
+     *
+     * @example
+     * ```tsx
+     * options={
+     *   <optgroup label="Europe">
+     *     <option value="FR">France</option>
+     *     <option value="ES">Spain</option>
+     *   </optgroup>
+     * }
+     * ```
+     */
+    options: ReactNode;
+    /**
+     * The text of the empty option rendered before the options, when no value is selected.
+     * Pass `null` to not render any placeholder option.
+     * @default "- Select -"
+     */
+    placeholder?: string | null;
+};
+/**
+ * This component renders a label, a select field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the select.
+ * It also supports adding a unit on the right of the select.
+ */
+declare const SelectInput: {
+    ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, options, placeholder, ...props }: SelectInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SelectInput };

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { InputContainer } from "./InputContainer";
+import { InputUnit } from "./InputUnit";
+import { ItemMessage } from "./ItemMessage";
+import { Label } from "./Label";
+import { Select } from "./Select";
+import { useInput } from "./useInput.hook";
+/**
+ * This component renders a label, a select field and optionnally help and error messages.
+ * It can be customized to render the label on top, or on the left of the select.
+ * It also supports adding a unit on the right of the select.
+ */
+const SelectInput = ({ contentRight, id, labelPosition, inputClassName: inputClassNameProp, labelClassName: labelClassNameProp, helpMessage, containerClassName, required, label, errorMessage, options, placeholder = "- Select -", ...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 }), _jsxs(Select, { ...props, className: inputClassName, id: inputId, "aria-describedby": describedBy, "aria-invalid": isInvalid, children: [placeholder === null ? null : _jsx("option", { value: "", children: placeholder }), options] }), contentRight ? _jsx(InputUnit, { children: contentRight }) : null, helpMessage ? (_jsx(ItemMessage, { id: helperId, children: helpMessage })) : null, errorMessage ? (_jsx(ItemMessage, { variant: "error", id: errorId, children: errorMessage })) : null] }));
+};
+SelectInput.displayName = "SelectInput";
+export { SelectInput };

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

@@ -1,9 +1,20 @@
+export { DateInput } from "./DateInput";
+export type { DateInputProps } from "./DateInput";
 export { Input } from "./Input";
 export { InputContainer } from "./InputContainer";
 export { InputUnit } from "./InputUnit";
 export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
+export { Select } from "./Select";
+export { SelectInput } from "./SelectInput";
+export type { SelectInputProps } from "./SelectInput";
 export { TextInput } from "./TextInput";
 export type { TextInputProps } from "./TextInput";
 export type { InputBaseProps, LabelPosition, SingleLineLabelPosition, } from "./types";
 export { useInput } from "./useInput.hook";
+export { RadioButton, type RadioButtonProps } from "./Radio/RadioButton";
+export { RadioCard, type RadioCardProps } from "./Radio/RadioCard";
+export { RadioGroup, type RadioGroupProps } from "./Radio/RadioGroup";
+export { RadioInput, type RadioInputProps, type RadioInputPropsButtonVariant, type RadioInputPropsCardVariant, } from "./Radio/RadioInput";
+export { RadioItem, type RadioItemProps } from "./Radio/RadioItem";
+export { RadioText, type RadioTextProps } from "./Radio/RadioText";

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

@@ -1,7 +1,16 @@
+export { DateInput } from "./DateInput";
 export { Input } from "./Input";
 export { InputContainer } from "./InputContainer";
 export { InputUnit } from "./InputUnit";
 export { ItemMessage } from "./ItemMessage";
 export { Label } from "./Label";
+export { Select } from "./Select";
+export { SelectInput } from "./SelectInput";
 export { TextInput } from "./TextInput";
 export { useInput } from "./useInput.hook";
+export { RadioButton } from "./Radio/RadioButton";
+export { RadioCard } from "./Radio/RadioCard";
+export { RadioGroup } from "./Radio/RadioGroup";
+export { RadioInput, } from "./Radio/RadioInput";
+export { RadioItem } from "./Radio/RadioItem";
+export { RadioText } from "./Radio/RadioText";

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

@@ -35,7 +35,7 @@ export type InputBaseProps = {
      * - `leftAbove` will place the label above the input, aligned to the left. This is used to have the label above the input.
      * @default "centerLeft"
      */
-    labelPosition?: SingleLineLabelPosition;
+    labelPosition?: LabelPosition;
     /**
      * The help message to display below the input.
      */

package/dist/distributeur/Form/Experimental/useInput.hook.js

@@ -11,7 +11,7 @@ export const useInput = (props) => {
     });
     const labelClassName = getClassName({
         baseClassName: "af-label",
-        modifiers: [props.labelPosition === "above" && "top"],
+        modifiers: [props.labelPosition === "topLeft" && "top-left"],
         className: props.labelClassName,
     });
     const errorId = isInvalid ? `${inputId}-description` : undefined;