@axa-fr/canopee-react 2.0.0-alpha.7 → 2.0.0-alpha.71

package/dist/client.d.ts

@@ -1,13 +1,14 @@
-import "@axa-fr/canopee-css/client/common/rebootLF.css";
+import "@axa-fr/canopee-css/client/common/reboot.css";
 import "@axa-fr/canopee-css/client/common/tokens.css";
 import "@axa-fr/canopee-css/client/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
 export { Accordion, accordionVariants, type AccordionVariants, } from "./prospect-client/Accordion/AccordionLF";
 export { AccordionContextual, accordionContextualVariants, type AccordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualLF";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreLF";
+export { AppName, type AppNameProps } from "./prospect-client/AppName/AppName";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
 export { Button, buttonVariants, type ButtonVariants, } from "./prospect-client/Button/ButtonLF";
-export { Card, type CardProps } from "./prospect-client/Card/CardLF";
+export { Card, cardVariants, type CardProps, type CardVariants, } from "./prospect-client/Card/CardLF";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./prospect-client/CardMessage/CardMessageLF";
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconLF";
 export { ContentItemDuoAction, type ContentItemDuoActionState, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionLF";
@@ -15,9 +16,7 @@ export { ContentItemMono } from "./prospect-client/ContentItemMono/ContentItemMo
 export { DataAgent, type DataAgentProps, } from "./prospect-client/DataAgent/DataAgentLF";
 export { Divider } from "./prospect-client/Divider/DividerLF";
 export { Fieldset, type FieldsetProps, } from "./prospect-client/Fieldset/FieldsetLF";
-export { CardCheckbox, 
-/** @deprecated Use `CardCheckbox` instead. */
-CardCheckbox as CheckboxCard, } from "./prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxLF";
+export { CardCheckbox, type CardCheckboxProps, } from "./prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxLF";
 export { CardCheckboxOption } from "./prospect-client/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF";
 export { Checkbox } from "./prospect-client/Form/Checkbox/Checkbox/CheckboxLF";
 export { CheckboxText } from "./prospect-client/Form/Checkbox/CheckboxText/CheckboxTextLF";
@@ -25,29 +24,27 @@ export { Dropdown } from "./prospect-client/Form/Dropdown/DropdownLF";
 export { FileUpload } from "./prospect-client/Form/FileUpload/FileUpload/FileUploadLF";
 export { InputFile } from "./prospect-client/Form/FileUpload/InputFile/InputFileLF";
 export { ItemFile } from "./prospect-client/Form/FileUpload/ItemFile/ItemFileLF";
-export { 
-/** @deprecated Use `InputDate` instead. */
-InputDate as DateInput, InputDate, } from "./prospect-client/Form/InputDate/InputDateLF";
+export { InputDate } from "./prospect-client/Form/InputDate/InputDateLF";
 export { type OptionType } from "./prospect-client/Form/InputPhone/InputPhone.types";
 export { InputPhone } from "./prospect-client/Form/InputPhone/InputPhoneLF";
-export { InputText, 
-/** @deprecated Use `InputText` instead. */
-InputText as TextInput, } from "./prospect-client/Form/InputText/InputTextLF";
+export { InputText } from "./prospect-client/Form/InputText/InputTextLF";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomLF";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelLF";
 export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageLF";
+export { ItemMultiSelect, type ItemMultiSelectProps, } from "./prospect-client/Form/ItemMultiSelect/ItemMultiSelectLF";
+export { MultiSelectList, type MultiSelectListProps, } from "./prospect-client/Form/MultiSelectList/MultiSelectListLF";
 export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioLF";
 export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupLF";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioLF";
 export { RadioText, type RadioTextProps, } from "./prospect-client/Form/Radio/RadioText/RadioTextLF";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaLF";
 export { DebugGrid } from "./prospect-client/Grid/DebugGridLF";
+export { Header, type HeaderProps } from "./prospect-client/Header/HeaderLF";
 export { Heading, type HeadingLevel, type HeadingProps, } from "./prospect-client/Heading/HeadingLF";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./prospect-client/Icon/IconLF";
-export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/ItemTabBarLF";
 export { ItemMenu, type ItemMenuProps, } from "./prospect-client/ItemMenu/ItemMenuLF";
-export { TabMenu, type TabMenuProps } from "./prospect-client/TabMenu/TabMenu";
-export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
+export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/ItemTabBarLF";
+export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, ExitLayoutSkeleton, type ExitLayoutSkeletonProps, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
 export { Footer, type FooterProps, } from "./prospect-client/Layout/Footer/FooterLF";
 export { FormLayout, type FormLayoutProps, } from "./prospect-client/Layout/FormLayout/FormLayout";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorLF";
@@ -56,16 +53,18 @@ export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, ty
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoLF";
 export { List, type ListProps } from "./prospect-client/List/List/ListLF";
 export { Loader, type LoaderProps } from "./prospect-client/Loader/LoaderLF";
+export { MenuBurger, type MenuBurgerProps, } from "./prospect-client/MenuBurger/MenuBurgerLF";
 export { Message, messageVariants, type MessageVariants, } from "./prospect-client/Message/MessageLF";
-export { MultiMessage, type MultiMessageItem, type MultiMessageProps, } from "./prospect-client/MultiMessage/MultiMessageLF";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./prospect-client/Modal/ModalLF";
+export { MultiMessage, type MultiMessageItem, type MultiMessageProps, } from "./prospect-client/MultiMessage/MultiMessageLF";
 export { ErrorPage, type ErrorPageProps, } from "./prospect-client/pages/ErrorPage/ErrorPageLF";
 export { ValidPage, type ValidPageProps, } from "./prospect-client/pages/ValidPage/ValidPageLF";
 export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";
 export { ProgressBar } from "./prospect-client/ProgressBar/ProgressBarLF";
 export { ProgressBarGroup } from "./prospect-client/ProgressBarGroup/ProgressBarGroupLF";
-export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonLF";
+export { Skeleton, skeletonSizeVariants, skeletonVariants, type SkeletonActionSizeVariant, type SkeletonCircleSizeVariant, type SkeletonProps, type SkeletonSizeVariant, type SkeletonVariant, } from "./prospect-client/Skeleton/Skeleton";
+export { SkeletonGrid, type SkeletonGridProps, } from "./prospect-client/SkeletonGrid/SkeletonGrid";
 export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListLF";
 export { Spinner, spinnerVariants, type SpinnerVariants, } from "./prospect-client/Spinner/SpinnerLF";
 export { Stepper } from "./prospect-client/Stepper/StepperLF";
@@ -73,8 +72,10 @@ export { Svg } from "./prospect-client/Svg/Svg";
 export { TabBar, tabBarDirection, type TabBarDirection, type TabBarProps, } from "./prospect-client/TabBar/TabBarLF";
 export { Table, type BodyColorVariants, type HeadColorVariants, type RowSizeVariants, type TableProps, } from "./prospect-client/Table/TableLF";
 export { TableMobileCard, type TableMobileCardProps, } from "./prospect-client/TableMobileCard/TableMobileCard";
+export { TabMenu, type TabMenuProps } from "./prospect-client/TabMenu/TabMenu";
 export { Tag, tagVariants, type TagVariants, } from "./prospect-client/Tag/TagLF";
 export { TagList, type TagListProps, } from "./prospect-client/TagList/TagListLF";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./prospect-client/Toggle/ToggleLF";
 export type { GridContainerProps } from "./prospect-client/utilities/types/GridContainerProps";
+export { MessageBar, type MessageBarProps, type MessageBarVariant, } from "./prospect-client/MessageBar/MessageBarLF";

package/dist/client.js

@@ -1,13 +1,14 @@
-import "@axa-fr/canopee-css/client/common/rebootLF.css";
+import "@axa-fr/canopee-css/client/common/reboot.css";
 import "@axa-fr/canopee-css/client/common/tokens.css";
 import "@axa-fr/canopee-css/client/Grid/Grid.css";
 import "@fontsource/source-sans-pro";
 export { Accordion, accordionVariants, } from "./prospect-client/Accordion/AccordionLF";
 export { AccordionContextual, accordionContextualVariants, } from "./prospect-client/AccordionContextual/AccordionContextualLF";
 export { AccordionCore } from "./prospect-client/AccordionCore/AccordionCoreLF";
+export { AppName } from "./prospect-client/AppName/AppName";
 export { BasePicture } from "./prospect-client/BasePicture/BasePicture";
 export { Button, buttonVariants, } from "./prospect-client/Button/ButtonLF";
-export { Card } from "./prospect-client/Card/CardLF";
+export { Card, cardVariants, } from "./prospect-client/Card/CardLF";
 export { CardMessage, cardMessageVariants, } from "./prospect-client/CardMessage/CardMessageLF";
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconLF";
 export { ContentItemDuoAction, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionLF";
@@ -15,9 +16,7 @@ export { ContentItemMono } from "./prospect-client/ContentItemMono/ContentItemMo
 export { DataAgent, } from "./prospect-client/DataAgent/DataAgentLF";
 export { Divider } from "./prospect-client/Divider/DividerLF";
 export { Fieldset, } from "./prospect-client/Fieldset/FieldsetLF";
-export { CardCheckbox, 
-/** @deprecated Use `CardCheckbox` instead. */
-CardCheckbox as CheckboxCard, } from "./prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxLF";
+export { CardCheckbox, } from "./prospect-client/Form/Checkbox/CardCheckbox/CardCheckboxLF";
 export { CardCheckboxOption } from "./prospect-client/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF";
 export { Checkbox } from "./prospect-client/Form/Checkbox/Checkbox/CheckboxLF";
 export { CheckboxText } from "./prospect-client/Form/Checkbox/CheckboxText/CheckboxTextLF";
@@ -25,29 +24,27 @@ export { Dropdown } from "./prospect-client/Form/Dropdown/DropdownLF";
 export { FileUpload } from "./prospect-client/Form/FileUpload/FileUpload/FileUploadLF";
 export { InputFile } from "./prospect-client/Form/FileUpload/InputFile/InputFileLF";
 export { ItemFile } from "./prospect-client/Form/FileUpload/ItemFile/ItemFileLF";
-export { 
-/** @deprecated Use `InputDate` instead. */
-InputDate as DateInput, InputDate, } from "./prospect-client/Form/InputDate/InputDateLF";
+export { InputDate } from "./prospect-client/Form/InputDate/InputDateLF";
 export {} from "./prospect-client/Form/InputPhone/InputPhone.types";
 export { InputPhone } from "./prospect-client/Form/InputPhone/InputPhoneLF";
-export { InputText, 
-/** @deprecated Use `InputText` instead. */
-InputText as TextInput, } from "./prospect-client/Form/InputText/InputTextLF";
+export { InputText } from "./prospect-client/Form/InputText/InputTextLF";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomLF";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelLF";
 export { ItemMessage, itemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageLF";
+export { ItemMultiSelect, } from "./prospect-client/Form/ItemMultiSelect/ItemMultiSelectLF";
+export { MultiSelectList, } from "./prospect-client/Form/MultiSelectList/MultiSelectListLF";
 export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioLF";
 export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupLF";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioLF";
 export { RadioText, } from "./prospect-client/Form/Radio/RadioText/RadioTextLF";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaLF";
 export { DebugGrid } from "./prospect-client/Grid/DebugGridLF";
+export { Header } from "./prospect-client/Header/HeaderLF";
 export { Heading, } from "./prospect-client/Heading/HeadingLF";
 export { Icon, iconSizeVariants, iconVariants, } from "./prospect-client/Icon/IconLF";
-export { ItemTabBar, } from "./prospect-client/ItemTabBar/ItemTabBarLF";
 export { ItemMenu, } from "./prospect-client/ItemMenu/ItemMenuLF";
-export { TabMenu } from "./prospect-client/TabMenu/TabMenu";
-export { ExitLayout, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
+export { ItemTabBar, } from "./prospect-client/ItemTabBar/ItemTabBarLF";
+export { ExitLayout, ExitLayoutSkeleton, } from "./prospect-client/Layout/ExitLayout/ExitLayoutLF";
 export { Footer, } from "./prospect-client/Layout/Footer/FooterLF";
 export { FormLayout, } from "./prospect-client/Layout/FormLayout/FormLayout";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorLF";
@@ -56,16 +53,18 @@ export { ClickItem, clickItemStates, clickItemVariants, } from "./prospect-clien
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoLF";
 export { List } from "./prospect-client/List/List/ListLF";
 export { Loader } from "./prospect-client/Loader/LoaderLF";
+export { MenuBurger, } from "./prospect-client/MenuBurger/MenuBurgerLF";
 export { Message, messageVariants, } from "./prospect-client/Message/MessageLF";
-export { MultiMessage, } from "./prospect-client/MultiMessage/MultiMessageLF";
 export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./prospect-client/Modal/ModalLF";
+export { MultiMessage, } from "./prospect-client/MultiMessage/MultiMessageLF";
 export { ErrorPage, } from "./prospect-client/pages/ErrorPage/ErrorPageLF";
 export { ValidPage, } from "./prospect-client/pages/ValidPage/ValidPageLF";
 export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/ItemPaginationLF";
 export { Pagination } from "./prospect-client/Pagination/PaginationLF";
 export { ProgressBar } from "./prospect-client/ProgressBar/ProgressBarLF";
 export { ProgressBarGroup } from "./prospect-client/ProgressBarGroup/ProgressBarGroupLF";
-export { Skeleton, } from "./prospect-client/Skeleton/SkeletonLF";
+export { Skeleton, skeletonSizeVariants, skeletonVariants, } from "./prospect-client/Skeleton/Skeleton";
+export { SkeletonGrid, } from "./prospect-client/SkeletonGrid/SkeletonGrid";
 export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListLF";
 export { Spinner, spinnerVariants, } from "./prospect-client/Spinner/SpinnerLF";
 export { Stepper } from "./prospect-client/Stepper/StepperLF";
@@ -73,7 +72,9 @@ export { Svg } from "./prospect-client/Svg/Svg";
 export { TabBar, tabBarDirection, } from "./prospect-client/TabBar/TabBarLF";
 export { Table, } from "./prospect-client/Table/TableLF";
 export { TableMobileCard, } from "./prospect-client/TableMobileCard/TableMobileCard";
+export { TabMenu } from "./prospect-client/TabMenu/TabMenu";
 export { Tag, tagVariants, } from "./prospect-client/Tag/TagLF";
 export { TagList, } from "./prospect-client/TagList/TagListLF";
 export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVerticalLF";
 export { Toggle } from "./prospect-client/Toggle/ToggleLF";
+export { MessageBar, } from "./prospect-client/MessageBar/MessageBarLF";

package/dist/distributeur/ButtonMultiActions/ButtonMultiActions.d.ts

@@ -0,0 +1,10 @@
+import "@axa-fr/canopee-css/distributeur/MultiActionsButton/MultiActionsButton.css";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export type ButtonMultiActionsProps = {
+    label?: string;
+    menuLabel?: string;
+    align?: "auto" | "left" | "right";
+} & Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+    children: ReactNode;
+};
+export declare const ButtonMultiActions: ({ label, menuLabel, align, className, id, onClick, onKeyDown, onMouseDown, children, ...buttonProps }: ButtonMultiActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/ButtonMultiActions/ButtonMultiActions.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/canopee-css/distributeur/MultiActionsButton/MultiActionsButton.css";
+import chevronDown from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
+import { useId, useRef, } from "react";
+import { Button } from "../Button/Button";
+import { Svg } from "../Svg";
+import { getClassName } from "../utilities/helpers/getClassName";
+export const ButtonMultiActions = ({ label = "Actions", menuLabel = "Actions supplémentaires", align = "auto", className, id, onClick, onKeyDown, onMouseDown, children, ...buttonProps }) => {
+    const generatedId = useId();
+    const menuId = `${id ?? `af-button-multi-actions-${generatedId}`}-menu`;
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const handleMenuToggle = (event) => {
+        const isOpen = event.newState === "open";
+        triggerRef.current?.setAttribute("aria-expanded", String(isOpen));
+        if (!isOpen) {
+            triggerRef.current?.focus();
+        }
+    };
+    // Open the menu and focus its first item when navigating with ArrowDown
+    const handleTriggerKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || menuRef.current?.matches(":popover-open"))
+            return;
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            menuRef.current?.showPopover();
+        }
+    };
+    // Close the menu once an action inside it has been activated
+    const handleMenuClick = (event) => {
+        if (event.target !== event.currentTarget) {
+            menuRef.current?.hidePopover();
+        }
+    };
+    // Close the menu when the user presses Escape, returning focus to the trigger
+    const handleMenuKeyDown = (event) => {
+        if (event.key === "Escape" || event.key === "Esc") {
+            event.preventDefault();
+            menuRef.current?.hidePopover();
+        }
+    };
+    return (_jsxs("div", { className: "af-button-multi-actions", ref: containerRef, children: [_jsx(Button, { ref: triggerRef, variant: "ghost", className: getClassName({
+                    baseClassName: "af-button-multi-actions__trigger",
+                    modifiers: [align],
+                    className,
+                }), "aria-haspopup": "menu", "aria-controls": menuId, "aria-expanded": "false", onClick: onClick, onKeyDown: handleTriggerKeyDown, onMouseDown: onMouseDown, ...buttonProps, popoverTarget: menuId, rightIcon: _jsx(Svg, { src: chevronDown, alt: "", "aria-hidden": "true", className: getClassName({
+                        baseClassName: "af-button-multi-actions__icon",
+                    }) }), children: label }), _jsx("div", { popover: "auto", id: menuId, role: "menu", "aria-label": menuLabel, tabIndex: -1, className: "af-button-multi-actions__menu", ref: menuRef, onToggle: handleMenuToggle, onKeyDown: handleMenuKeyDown, onClick: handleMenuClick, children: children })] }));
+};

package/dist/distributeur/ButtonMultiActions/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonMultiActions } from "./ButtonMultiActions";
+export type { ButtonMultiActionsProps } from "./ButtonMultiActions";

package/dist/distributeur/ButtonMultiActions/index.js

@@ -0,0 +1 @@
+export { ButtonMultiActions } from "./ButtonMultiActions";

package/dist/distributeur/Card/BaseCard.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes, LabelHTMLAttributes } from "react";
+import "@axa-fr/canopee-css/distributeur/Card/BaseCard.css";
+type BaseCardOwnProps = {
+    orientation?: "horizontal" | "vertical";
+};
+type BaseCardButtonProps = BaseCardOwnProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+    component?: "button";
+};
+type BaseCardLabelProps = BaseCardOwnProps & LabelHTMLAttributes<HTMLLabelElement> & {
+    component: "label";
+};
+export type BaseCardProps = BaseCardButtonProps | BaseCardLabelProps;
+export declare const BaseCard: (props: BaseCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/Card/BaseCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../utilities/helpers/getClassName";
+import "@axa-fr/canopee-css/distributeur/Card/BaseCard.css";
+const isLabelCard = (props) => props.component === "label";
+function stripCardInternalProps(props) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { component, className, children, orientation, ...rest } = props;
+    return rest;
+}
+export const BaseCard = (props) => {
+    const { className, children, orientation } = props;
+    const finalClassName = getClassName({
+        baseClassName: "af-basecard",
+        modifiers: [orientation],
+        className,
+    });
+    if (isLabelCard(props)) {
+        const labelProps = stripCardInternalProps(props);
+        return (_jsx("label", { className: finalClassName, ...labelProps, children: children }));
+    }
+    const { type, ...buttonProps } = stripCardInternalProps(props);
+    return (_jsx("button", { type: type === "submit" ? "submit" : "button", className: finalClassName, ...buttonProps, children: children }));
+};

package/dist/distributeur/CardButton/CardButton.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { type BaseCardProps } from "../Card/BaseCard";
+import "@axa-fr/canopee-css/distributeur/CardButton/CardButton.css";
+type CardButtonOwnProps = {
+    className?: string;
+    children?: ReactNode;
+    icon?: ReactNode;
+    orientation?: "horizontal" | "vertical";
+};
+type CardButtonAsButtonProps = CardButtonOwnProps & Omit<Extract<BaseCardProps, {
+    component?: "button";
+}>, "className" | "children">;
+type CardButtonAsLabelProps = CardButtonOwnProps & Omit<Extract<BaseCardProps, {
+    component: "label";
+}>, "className" | "children">;
+export type CardButtonProps = CardButtonAsButtonProps | CardButtonAsLabelProps;
+export declare const CardButton: ({ className, children, icon, orientation, ...props }: CardButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/distributeur/CardButton/CardButton.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { BaseCard } from "../Card/BaseCard";
+import "@axa-fr/canopee-css/distributeur/CardButton/CardButton.css";
+import { getClassName } from "../utilities/helpers/getClassName";
+export const CardButton = ({ className, children = "Card Button", icon = null, orientation = "horizontal", ...props }) => {
+    const finalClassName = getClassName({
+        baseClassName: "af-card-button",
+        className,
+        modifiers: [orientation],
+    });
+    return (_jsxs(BaseCard, { className: finalClassName, ...props, children: [icon, children] }));
+};

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 })] }));