@axa-fr/canopee-react 1.8.1-alpha.1 → 2.0.0-alpha.2

package/dist/prospect-client/Form/TextArea/TextAreaCommon.d.ts

@@ -15,5 +15,8 @@ type TextAreaCommonProps = TextAreaProps & {
     ItemLabelComponent: ComponentType<Omit<ComponentProps<typeof ItemLabelCommon>, "ButtonComponent">>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
-declare const TextAreaCommon: import("react").ForwardRefExoticComponent<Omit<TextAreaCommonProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+declare const TextAreaCommon: {
+    ({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder, containerProps, ...inputProps }: TextAreaCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { TextAreaCommon };

package/dist/prospect-client/Form/TextArea/TextAreaCommon.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, } from "react";
+import { useId, } from "react";
 import { getClassName } from "../../utilities/getClassName";
 import { ItemLabelCommon, } from "../ItemLabel/ItemLabelCommon";
 import { ItemMessage, } from "../ItemMessage/ItemMessageCommon";
-const TextAreaCommon = forwardRef(({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", containerProps, ...inputProps }, inputRef) => {
+const TextAreaCommon = ({ id, className, label, description, helper, error, message, messageType, buttonLabel, moreButtonLabel, onButtonClick, onMoreButtonClick, required, sideButtonLabel, ItemLabelComponent, ItemMessageComponent, onSideButtonClick, placeholder = " ", containerProps, ...inputProps }) => {
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const helperId = `${inputId}-helper`;
@@ -16,7 +16,7 @@ const TextAreaCommon = forwardRef(({ id, className, label, description, helper,
     });
     return (_jsxs("div", { className: ["af-form__input-container", className]
             .filter(Boolean)
-            .join(" "), ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: textareaClassName, ref: inputRef, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
-});
+            .join(" "), ...containerProps, children: [_jsx(ItemLabelComponent, { description: description, moreButtonLabel: moreButtonLabel ?? buttonLabel, onMoreButtonClick: onMoreButtonClick ?? onButtonClick, sideButtonLabel: sideButtonLabel, onSideButtonClick: onSideButtonClick, required: required, htmlFor: inputId, children: label }), _jsx("textarea", { id: inputId, className: textareaClassName, "aria-errormessage": hasError ? messageId : undefined, "aria-describedby": helper ? helperId : undefined, required: required, "aria-invalid": hasError || undefined, placeholder: placeholder, ...inputProps }), helper ? (_jsx("span", { id: helperId, className: "af-form__input-helper", children: helper })) : null, _jsx(ItemMessageComponent, { id: messageId, message: message || error, messageType: messageType })] }));
+};
 TextAreaCommon.displayName = "TextArea";
 export { TextAreaCommon };

package/dist/prospect-client/Form/TextArea/TextAreaLF.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/client/Form/TextArea/TextAreaLF.css";
 import { type TextAreaProps } from "./TextAreaCommon";
-export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: {
+    ({ ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Form/TextArea/TextAreaLF.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Form/TextArea/TextAreaLF.css";
-import { forwardRef } from "react";
 import { ItemLabel } from "../ItemLabel/ItemLabelLF";
 import { ItemMessage } from "../ItemMessage/ItemMessageLF";
 import { TextAreaCommon } from "./TextAreaCommon";
-export const TextArea = forwardRef((props, ref) => (_jsx(TextAreaCommon, { ...props, ref: ref, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage })));
+export const TextArea = ({ ...props }) => (_jsx(TextAreaCommon, { ...props, ItemLabelComponent: ItemLabel, ItemMessageComponent: ItemMessage }));
 TextArea.displayName = "TextArea";

package/dist/prospect-client/ItemMenu/ItemMenuApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/ItemMenu/ItemMenuApollo.css";
+export { ItemMenu, type ItemMenuProps } from "./ItemMenuCommon";

package/dist/prospect-client/ItemMenu/ItemMenuApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/ItemMenu/ItemMenuApollo.css";
+export { ItemMenu } from "./ItemMenuCommon";

package/dist/prospect-client/ItemMenu/ItemMenuCommon.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type PropsWithChildren } from "react";
+/**
+ * Props for the ItemMenu component.
+ */
+export type ItemMenuProps = {
+    /**
+     * Applies the active modifier class.
+     * @default false
+     */
+    isActive?: boolean;
+} & ComponentPropsWithRef<"a">;
+/**
+ * Renders a navigational item as an anchor element.
+ *
+ * @component
+ * @param {PropsWithChildren<ItemMenuProps>} props - ItemMenu props.
+ * @param {boolean} [props.isActive=false] - Adds active styling.
+ * @param {React.ReactNode} props.children - Item label/content.
+ * @param {React.Ref<HTMLAnchorElement>} props.ref - Optional ref to the anchor element.
+ * @returns {JSX.Element} The rendered ItemMenu component.
+ */
+export declare const ItemMenu: ({ isActive, children, className, ...props }: PropsWithChildren<ItemMenuProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/ItemMenu/ItemMenuCommon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { getClassName } from "../utilities/getClassName";
+/**
+ * Renders a navigational item as an anchor element.
+ *
+ * @component
+ * @param {PropsWithChildren<ItemMenuProps>} props - ItemMenu props.
+ * @param {boolean} [props.isActive=false] - Adds active styling.
+ * @param {React.ReactNode} props.children - Item label/content.
+ * @param {React.Ref<HTMLAnchorElement>} props.ref - Optional ref to the anchor element.
+ * @returns {JSX.Element} The rendered ItemMenu component.
+ */
+export const ItemMenu = ({ isActive = false, children, className, ...props }) => (_jsx("a", { className: getClassName({
+        baseClassName: "af-item-menu",
+        modifiers: [isActive && "active"],
+        className,
+    }), ...props, children: children }));

package/dist/prospect-client/ItemMenu/ItemMenuLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/ItemMenu/ItemMenuLF.css";
+export { ItemMenu, type ItemMenuProps } from "./ItemMenuCommon";

package/dist/prospect-client/ItemMenu/ItemMenuLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/ItemMenu/ItemMenuLF.css";
+export { ItemMenu } from "./ItemMenuCommon";

package/dist/prospect-client/ItemTabBar/ItemTabBarCommon.d.ts

@@ -3,4 +3,7 @@ export type ItemTabBarProps = ComponentPropsWithRef<"button"> & {
     isActive?: boolean;
     title: string;
 };
-export declare const ItemTabBar: import("react").ForwardRefExoticComponent<Omit<ItemTabBarProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ItemTabBar: {
+    ({ isActive, title, className, ...props }: ItemTabBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/ItemTabBar/ItemTabBarCommon.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {} from "react";
 import { getComponentClassName } from "../utilities/getComponentClassName";
-export const ItemTabBar = forwardRef(({ isActive = false, title, className, ...props }, ref) => {
+export const ItemTabBar = ({ isActive = false, title, className, ...props }) => {
     const classNames = getComponentClassName("af-item-tab-bar", className);
-    return (_jsx("button", { ref: ref, type: "button", role: "tab", "aria-selected": isActive, className: classNames, ...props, children: title }));
-});
+    return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, className: classNames, ...props, children: title }));
+};
 ItemTabBar.displayName = "ItemTabBar";

package/dist/prospect-client/Loader/LoaderCommon.d.ts

@@ -10,4 +10,7 @@ export type LoaderProps = {
 export type LoaderCommonProps<T extends ElementType> = PolymorphicComponent<T, LoaderProps> & {
     SpinnerComponent: ComponentType<SpinnerProps>;
 };
-export declare const LoaderCommon: import("react").ForwardRefExoticComponent<Omit<LoaderCommonProps<ElementType>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const LoaderCommon: {
+    ({ title, subtitle, SpinnerComponent, spinnerProps, className, isDialog, ...rest }: LoaderCommonProps<ElementType>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Loader/LoaderCommon.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 import { getClassName } from "../utilities/getClassName";
 import {} from "../Spinner/SpinnerCommon";
-export const LoaderCommon = forwardRef(({ title, subtitle, SpinnerComponent, spinnerProps, className, isDialog, ...rest }, ref) => {
+export const LoaderCommon = ({ title, subtitle, SpinnerComponent, spinnerProps, className, isDialog, ...rest }) => {
     const baseClassName = "af-loader";
     const titleId = useId();
     const Component = (isDialog && "dialog") || "article";
-    return (_jsxs(Component, { ref: ref, className: getClassName({
+    return (_jsxs(Component, { className: getClassName({
             baseClassName,
             className,
         }), "aria-labelledby": titleId, ...rest, children: [_jsx(SpinnerComponent, { ...spinnerProps }), _jsxs("div", { className: `${baseClassName}__content`, children: [_jsx("span", { id: titleId, className: `${baseClassName}__title`, children: title }), subtitle ? (_jsx("span", { className: `${baseClassName}__subtitle`, children: subtitle })) : null] })] }));
-});
+};
 LoaderCommon.displayName = "LoaderCommon";

package/dist/prospect-client/Modal/ModalApollo.d.ts

@@ -5,4 +5,7 @@ export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreB
 export { ModalCoreFooter } from "./components/ModalCoreFooterApollo";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderApollo";
 export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
-export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Modal: {
+    ({ headingProps, icon, iconProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Modal/ModalApollo.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/Modal/ModalApollo.css";
-import { forwardRef } from "react";
 import { Button } from "../Button/ButtonApollo";
 import { Heading } from "../Heading/HeadingApollo";
 import { ModalCommon } from "./ModalCommon";
@@ -8,10 +7,10 @@ export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterApollo";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderApollo";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+export const Modal = ({ headingProps = {}, icon, iconProps, ...props }) => (_jsx(ModalCommon, { ...props, headingComponent: Heading, headingProps: {
         ...headingProps,
         children: props.title,
         icon: headingProps.icon ?? icon,
         iconProps: headingProps.iconProps ?? iconProps,
-    }, buttonComponent: Button })));
+    }, buttonComponent: Button }));
 Modal.displayName = "Modal";

package/dist/prospect-client/Modal/ModalCommon.d.ts

@@ -7,4 +7,7 @@ export type ModalCommonProps = ModalCoreProps & Omit<ModalCoreHeaderCommonProps,
     modalCoreFooterProps?: ModalCoreFooterContainerProps;
     modalCoreHeaderProps?: ModalCoreHeaderContainerProps;
 };
-export declare const ModalCommon: import("react").ForwardRefExoticComponent<Omit<ModalCommonProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const ModalCommon: {
+    ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }: ModalCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Modal/ModalCommon.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ModalCore } from "./components/ModalCore";
 import { ModalCoreBody, } from "./components/ModalCoreBody";
 import { ModalCoreFooterCommon, } from "./components/ModalCoreFooterCommon";
 import { ModalCoreHeaderCommon } from "./components/ModalCoreHeaderCommon";
-export const ModalCommon = forwardRef(({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }, ref) => (_jsxs(ModalCore, { onClose: onClose, ref: ref, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] })));
+export const ModalCommon = ({ children, headingComponent, headingProps, closeButtonAriaLabel, onClose, iconProps, primaryButtonProps, secondaryButtonProps, tertiaryButtonProps, buttonComponent, modalCoreBodyProps, modalCoreFooterProps, modalCoreHeaderProps, ...props }) => (_jsxs(ModalCore, { onClose: onClose, ...props, children: [_jsx(ModalCoreHeaderCommon, { headingComponent: headingComponent, headingProps: headingProps, iconProps: iconProps, onClose: onClose, closeButtonAriaLabel: closeButtonAriaLabel, ...modalCoreHeaderProps }), _jsx(ModalCoreBody, { ...modalCoreBodyProps, children: children }), _jsx(ModalCoreFooterCommon, { buttonComponent: buttonComponent, primaryButtonProps: primaryButtonProps, secondaryButtonProps: secondaryButtonProps, tertiaryButtonProps: tertiaryButtonProps, ...modalCoreFooterProps })] }));
 ModalCommon.displayName = "ModalCommon";

package/dist/prospect-client/Modal/ModalLF.d.ts

@@ -5,4 +5,7 @@ export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreB
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
 export type { ModalCoreFooterProps, ModalCoreHeaderProps, ModalProps, } from "./types";
-export declare const Modal: import("react").ForwardRefExoticComponent<Omit<ModalProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+export declare const Modal: {
+    ({ headingProps, icon, iconProps, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Modal/ModalLF.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Modal/ModalLF.css";
-import { forwardRef } from "react";
 import { Button } from "../Button/ButtonLF";
 import { Heading } from "../Heading/HeadingLF";
 import { ModalCommon } from "./ModalCommon";
@@ -8,10 +7,10 @@ export { ModalCore } from "./components/ModalCore";
 export { ModalCoreBody, } from "./components/ModalCoreBody";
 export { ModalCoreFooter } from "./components/ModalCoreFooterLF";
 export { ModalCoreHeader } from "./components/ModalCoreHeaderLF";
-export const Modal = forwardRef(({ headingProps = {}, icon, iconProps, ...props }, ref) => (_jsx(ModalCommon, { ...props, ref: ref, headingComponent: Heading, headingProps: {
+export const Modal = ({ headingProps = {}, icon, iconProps, ...props }) => (_jsx(ModalCommon, { ...props, headingComponent: Heading, headingProps: {
         ...headingProps,
         children: props.title,
         icon: headingProps.icon ?? icon,
         iconProps: headingProps.iconProps ?? iconProps,
-    }, buttonComponent: Button })));
+    }, buttonComponent: Button }));
 Modal.displayName = "Modal";

package/dist/prospect-client/Modal/components/ModalCore.d.ts

@@ -2,5 +2,8 @@ import { type ComponentPropsWithRef } from "react";
 export type ModalCoreProps = Omit<ComponentPropsWithRef<"dialog">, "title" | "onClose"> & Required<Pick<ComponentPropsWithRef<"dialog">, "title">> & {
     onClose?: VoidFunction;
 };
-declare const ModalCore: import("react").ForwardRefExoticComponent<Omit<ModalCoreProps, "ref"> & import("react").RefAttributes<HTMLDialogElement>>;
+declare const ModalCore: {
+    ({ className, children, ...props }: ModalCoreProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { ModalCore };

package/dist/prospect-client/Modal/components/ModalCore.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const ModalCore = forwardRef(({ className, children, ...props }, ref) => (
+import {} from "react";
+const ModalCore = ({ className, children, ...props }) => (
 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-_jsx("dialog", { "aria-modal": true, "aria-label": props["aria-label"] ?? props.title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ref: ref, ...props, children: _jsx("section", { className: "af-modal__content", onClick: (e) => e.stopPropagation(), children: children }) })));
+_jsx("dialog", { "aria-modal": true, "aria-label": props["aria-label"] ?? props.title, className: ["af-modal", className].filter(Boolean).join(" "), onClick: props.onClose, ...props, children: _jsx("section", { className: "af-modal__content", onClick: (e) => e.stopPropagation(), children: children }) }));
 ModalCore.displayName = "ModalCore";
 export { ModalCore };

package/dist/prospect-client/TabMenu/TabMenu.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { type ItemMenuProps } from "../ItemMenu/ItemMenuCommon";
+import "@axa-fr/canopee-css/prospect/TabMenu/TabMenuAll.css";
+/**
+ * One item displayed in the TabMenu component.
+ */
+export type TabMenuItemProps = Omit<ItemMenuProps, "children"> & {
+    /**
+     * Visible label of the menu item.
+     */
+    label: string;
+};
+/**
+ * Props for the TabMenu component.
+ */
+export type TabMenuProps = {
+    /**
+     * List of menu items.
+     */
+    items?: TabMenuItemProps[];
+    /**
+     * Initial active item position.
+     * @default 0
+     */
+    initialPosition?: number;
+} & Omit<ComponentPropsWithoutRef<"nav">, "children">;
+/**
+ * Renders a keyboard-navigable tab-style menu.
+ *
+ * @component
+ * @param {TabMenuProps} props - TabMenu props.
+ * @param {TabMenuItemProps[]} [props.items] - Items to render.
+ * @param {number} [props.initialPosition=0] - Initially selected item index.
+ * @returns {JSX.Element | null} The rendered TabMenu, or null when no items are provided.
+ */
+export declare const TabMenu: ({ items, className, initialPosition, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/prospect-client/TabMenu/TabMenu.helpers.d.ts

@@ -0,0 +1 @@
+export declare const getPosition: (max: number, position: number, direction: string) => number;

package/dist/prospect-client/TabMenu/TabMenu.helpers.js

@@ -0,0 +1,12 @@
+export const getPosition = (max, position, direction) => {
+    switch (direction) {
+        case "ArrowRight":
+        case "ArrowDown":
+            return position + 1 < max ? position + 1 : 0;
+        case "ArrowLeft":
+        case "ArrowUp":
+            return position - 1 < 0 ? max - 1 : position - 1;
+        default:
+            return position;
+    }
+};

package/dist/prospect-client/TabMenu/TabMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState, } from "react";
+import { ItemMenu } from "../ItemMenu/ItemMenuCommon";
+import { getClassName } from "../utilities/getClassName";
+import { getPosition } from "./TabMenu.helpers";
+import "@axa-fr/canopee-css/prospect/TabMenu/TabMenuAll.css";
+/**
+ * Renders a keyboard-navigable tab-style menu.
+ *
+ * @component
+ * @param {TabMenuProps} props - TabMenu props.
+ * @param {TabMenuItemProps[]} [props.items] - Items to render.
+ * @param {number} [props.initialPosition=0] - Initially selected item index.
+ * @returns {JSX.Element | null} The rendered TabMenu, or null when no items are provided.
+ */
+export const TabMenu = ({ items, className, initialPosition = 0, ...props }) => {
+    const [position, setPosition] = useState(initialPosition);
+    const itemRefs = useRef([]);
+    const handleKeys = useCallback((key) => {
+        if (key === "ArrowRight" || key === "ArrowLeft") {
+            const newPosition = getPosition(items?.length ?? 0, position, key);
+            itemRefs.current[newPosition]?.focus();
+            setPosition(newPosition);
+        }
+    }, [position, items?.length]);
+    if (!items || items.length === 0) {
+        return null;
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsx("nav", { className: getClassName({
+            baseClassName: "af-tab-menu",
+            className,
+        }), ...props, 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, onKeyDown: (e) => handleKeys(e.key), children: _jsx("ul", { className: "af-tab-menu__list", children: items.map((item, index) => (_jsx("li", { role: "presentation", children: _jsx(ItemMenu, { ref: (el) => {
+                        itemRefs.current[index] = el;
+                    }, ...item, isActive: index === position ? true : item.isActive, tabIndex: index === position ? 0 : -1, children: item.label }) }, item.href))) }) }));
+};

package/dist/prospect-client/Toggle/ToggleApollo.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/prospect/Toggle/ToggleApollo.css";
 import { type ToggleProps } from "./ToggleCommon";
-export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Toggle: {
+    ({ ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Toggle/ToggleApollo.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/prospect/Toggle/ToggleApollo.css";
-import { forwardRef } from "react";
 import { Icon } from "../Icon/IconApollo";
 import { ToggleCommon } from "./ToggleCommon";
-export const Toggle = forwardRef((props, ref) => _jsx(ToggleCommon, { IconComponent: Icon, ...props, ref: ref }));
+export const Toggle = ({ ...props }) => (_jsx(ToggleCommon, { IconComponent: Icon, ...props }));
 Toggle.displayName = "Toggle";

package/dist/prospect-client/Toggle/ToggleCommon.d.ts

@@ -4,6 +4,7 @@ export type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, "style" |
 export type ToggleCommonProps = ToggleProps & {
     IconComponent: ComponentType<IconProps>;
 };
-export declare const ToggleCommon: import("react").ForwardRefExoticComponent<ToggleProps & {
-    IconComponent: ComponentType<IconProps>;
-} & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ToggleCommon: {
+    ({ className, IconComponent, ...inputProps }: ToggleCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Toggle/ToggleCommon.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import check from "@material-symbols/svg-400/rounded/check.svg";
 import close from "@material-symbols/svg-400/rounded/close.svg";
-import { forwardRef, useId, } from "react";
+import { useId } from "react";
 import { getComponentClassName } from "../utilities/getComponentClassName";
-export const ToggleCommon = forwardRef(({ className, IconComponent, ...inputProps }, ref) => {
+export const ToggleCommon = ({ className, IconComponent, ...inputProps }) => {
     let inputId = useId();
     inputId = inputProps.id ?? inputId;
-    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, ref: ref, type: "checkbox", id: inputId })] }));
-});
+    return (_jsxs("label", { className: getComponentClassName("af-toggle", className), htmlFor: inputId, children: [_jsx("div", { className: "af-toggle__root", children: _jsxs("span", { className: "af-toggle__handle", children: [_jsx(IconComponent, { src: check, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--check", size: "XS" }), _jsx(IconComponent, { src: close, "aria-hidden": "true", className: "af-toggle__icon af-toggle__icon--close", size: "XS" })] }) }), _jsx("input", { ...inputProps, type: "checkbox", id: inputId })] }));
+};
 ToggleCommon.displayName = "ToggleCommon";

package/dist/prospect-client/Toggle/ToggleLF.d.ts

@@ -1,3 +1,6 @@
 import "@axa-fr/canopee-css/client/Toggle/ToggleLF.css";
 import { type ToggleProps } from "./ToggleCommon";
-export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Toggle: {
+    ({ ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/prospect-client/Toggle/ToggleLF.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/client/Toggle/ToggleLF.css";
-import { forwardRef } from "react";
 import { Icon } from "../Icon/IconLF";
 import { ToggleCommon } from "./ToggleCommon";
-export const Toggle = forwardRef((props, ref) => _jsx(ToggleCommon, { IconComponent: Icon, ...props, ref: ref }));
+export const Toggle = ({ ...props }) => (_jsx(ToggleCommon, { IconComponent: Icon, ...props }));
 Toggle.displayName = "Toggle";

package/dist/prospect.d.ts

@@ -32,10 +32,8 @@ export { InputText } from "./prospect-client/Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomApollo";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, type ItemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageApollo";
-export { 
-/** @deprecated Use `CardRadioGroup` instead. */
-CardRadioGroup as CardRadio, CardRadioGroup, } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
-export { CardRadioOption } from "./prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo";
+export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioApollo";
+export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioApollo";
 export { RadioText, type RadioTextProps, } from "./prospect-client/Form/Radio/RadioText/RadioTextApollo";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaApollo";
@@ -43,6 +41,8 @@ export { DebugGrid } from "./prospect-client/Grid/DebugGridApollo";
 export { Heading, type HeadingLevel, type HeadingProps, } from "./prospect-client/Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./prospect-client/Icon/IconApollo";
 export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
+export { ItemMenu, type ItemMenuProps, } from "./prospect-client/ItemMenu/ItemMenuApollo";
+export { TabMenu, type TabMenuProps } from "./prospect-client/TabMenu/TabMenu";
 export { ExitLayout, type ExitLayoutProps, type ExitLayoutWithSubComponents, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
 export { Footer, type FooterProps, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { FormLayout, type FormLayoutProps, } from "./prospect-client/Layout/FormLayout/FormLayout";

package/dist/prospect.js

@@ -32,10 +32,8 @@ export { InputText } from "./prospect-client/Form/InputText/InputTextApollo";
 export { InputTextAtom } from "./prospect-client/Form/InputTextAtom/InputTextAtomApollo";
 export { ItemLabel } from "./prospect-client/Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage, itemMessageVariants, } from "./prospect-client/Form/ItemMessage/ItemMessageApollo";
-export { 
-/** @deprecated Use `CardRadioGroup` instead. */
-CardRadioGroup as CardRadio, CardRadioGroup, } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
-export { CardRadioOption } from "./prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo";
+export { CardRadio } from "./prospect-client/Form/Radio/CardRadio/CardRadioApollo";
+export { CardRadioGroup } from "./prospect-client/Form/Radio/CardRadioGroup/CardRadioGroupApollo";
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioApollo";
 export { RadioText, } from "./prospect-client/Form/Radio/RadioText/RadioTextApollo";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaApollo";
@@ -43,6 +41,8 @@ export { DebugGrid } from "./prospect-client/Grid/DebugGridApollo";
 export { Heading, } from "./prospect-client/Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, } from "./prospect-client/Icon/IconApollo";
 export { ItemTabBar, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
+export { ItemMenu, } from "./prospect-client/ItemMenu/ItemMenuApollo";
+export { TabMenu } from "./prospect-client/TabMenu/TabMenu";
 export { ExitLayout, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
 export { Footer, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { FormLayout, } from "./prospect-client/Layout/FormLayout/FormLayout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.8.1-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -53,10 +53,10 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.8.1-alpha.1",
+    "@axa-fr/canopee-css": "2.0.0-alpha.2",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
-    "react": ">= 18"
+    "react": ">= 19"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.8",

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo.d.ts

@@ -1,3 +0,0 @@
-import { type CardRadioOptionProps } from "./CardRadioOptionCommon";
-import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadioOption/CardRadioOptionApollo.css";
-export declare const CardRadioOption: (props: CardRadioOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionApollo.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from "../../../Icon/IconApollo";
-import { Radio } from "../Radio/RadioApollo";
-import { CardRadioOptionCommon, } from "./CardRadioOptionCommon";
-import "@axa-fr/canopee-css/prospect/Form/Radio/CardRadioOption/CardRadioOptionApollo.css";
-export const CardRadioOption = (props) => (_jsx(CardRadioOptionCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionCommon.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from "react";
-import { BasePicture } from "../../../BasePicture/BasePicture";
-import { getClassName } from "../../../utilities/getClassName";
-export const CardRadioOptionCommon = forwardRef(({ label, position, type, description, subtitle, icon, src, basePictureProps, isInvalid, className, RadioComponent, IconComponent, ...inputProps }, ref) => {
-    const isCardRadioOptionHorizontal = [position, type].includes("horizontal");
-    return (_jsxs("label", { className: getClassName({
-            baseClassName: "af-card-radio-option",
-            modifiers: [
-                isInvalid && "invalid",
-                isCardRadioOptionHorizontal && "horizontal",
-            ],
-            className,
-        }), children: [icon ? _jsx(IconComponent, { src: icon, role: "presentation" }) : null, isCardRadioOptionHorizontal && src ? (_jsx(BasePicture, { src: src, ...basePictureProps })) : null, _jsxs("div", { className: "af-card-radio-option__content", children: [_jsx("p", { className: "af-card-radio-option__label", children: label }), Boolean(description) && (_jsx("p", { className: "af-card-radio-option__description", children: description })), Boolean(subtitle) && (_jsx("p", { className: "af-card-radio-option__subtitle", children: subtitle }))] }), _jsx(RadioComponent, { ...inputProps, isInvalid: isInvalid, ref: ref })] }));
-});
-CardRadioOptionCommon.displayName = "CardRadioOptionCommon";

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionLF.d.ts

@@ -1,3 +0,0 @@
-import { type CardRadioOptionProps } from "./CardRadioOptionCommon";
-import "@axa-fr/canopee-css/client/Form/Radio/CardRadioOption/CardRadioOptionLF.css";
-export declare const CardRadioOption: (props: CardRadioOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/Form/Radio/CardRadioOption/CardRadioOptionLF.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from "../../../Icon/IconLF";
-import { Radio } from "../Radio/RadioLF";
-import { CardRadioOptionCommon, } from "./CardRadioOptionCommon";
-import "@axa-fr/canopee-css/client/Form/Radio/CardRadioOption/CardRadioOptionLF.css";
-export const CardRadioOption = (props) => (_jsx(CardRadioOptionCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));