@axa-fr/design-system-apollo-react 1.0.5-alpha.391 → 1.0.5-alpha.396

package/dist/Form/ItemMessage/ItemMessageCommon.d.ts

@@ -1,5 +1,6 @@
+import type { ReactNode } from "react";
 type ItemMessageProps = {
-    message?: string;
+    message?: ReactNode;
     id?: string;
     messageType?: "error" | "success";
 };

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

@@ -1,5 +1,5 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioApollo.scss";
 import { type CardRadioProps } from "./CardRadioCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioApollo.scss";
 export declare const CardRadio: {
     (props: CardRadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Form/Radio/CardRadio/CardRadioApollo.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioApollo.scss";
-import { Icon } from "../../../Icon/IconApollo";
+import { CardRadioOption } from "../CardRadioOption/CardRadioOptionApollo";
 import { CardRadioCommon } from "./CardRadioCommon";
-import { Radio } from "../Radio/RadioApollo";
 import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
-export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, IconComponent: Icon, RadioComponent: Radio, ItemMessageComponent: ItemMessage }));
+import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioApollo.scss";
+export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, CardRadioOptionComponent: CardRadioOption, ItemMessageComponent: ItemMessage }));
 CardRadio.displayName = "CardRadio";

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

@@ -1,21 +1,36 @@
-import { type ComponentProps, type ComponentType } from "react";
+import { type ComponentProps, type ComponentType, type PropsWithChildren, type ReactNode } from "react";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
-import type { Radio } from "../Radio/RadioCommon";
-import type { IconComponent, RadioComponent, TCardRadioItemOption } from "./types";
-export type CardRadioProps = Omit<ComponentProps<typeof Radio>, "size"> & {
-    type: "vertical" | "horizontal";
+import { type CardRadioOptionProps } from "../CardRadioOption/CardRadioOptionCommon";
+type RadioOption = Omit<CardRadioOptionProps, "name" | "type" | "isInvalid">;
+export type CardRadioProps = Omit<CardRadioOptionProps, "value" | "label" | "type" | "isInvalid" | "icon" | "description" | "subtitle" | "children"> & {
+    type?: "vertical" | "horizontal";
+    /**
+     * @deprecated Use `label` instead.
+     */
     labelGroup?: string;
+    /**
+     * @deprecated Use `description` instead.
+     */
     descriptionGroup?: string;
+    label: ReactNode;
+    description?: ReactNode;
+    /**
+     * @deprecated Use `required` instead.
+     */
     isRequired?: boolean;
+    /**
+     * @deprecated This prop is deprecated. To check an option, use the `checked` property in each item of the `options` array.
+     */
     value?: number | string;
-    options: TCardRadioItemOption[];
-    error?: string;
-};
-export type CardRadioCommonProps = CardRadioProps & RadioComponent & IconComponent & {
+    options: RadioOption[];
+    error?: ReactNode;
+} & PropsWithChildren;
+export type CardRadioCommonProps = CardRadioProps & {
+    CardRadioOptionComponent: ComponentType<CardRadioOptionProps>;
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
-declare const CardRadioCommon: {
-    ({ className, labelGroup, descriptionGroup, RadioComponent, IconComponent, isRequired, options, type, error, name, value, onChange, ItemMessageComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardRadioCommon: {
+    ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, type, error, name, value, id, CardRadioOptionComponent, ItemMessageComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { CardRadioCommon };
+export {};

package/dist/Form/Radio/CardRadio/CardRadioCommon.js

@@ -1,21 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { BREAKPOINT } from "../../../utilities/constants";
-import { getComponentClassName } from "../../../utilities/getComponentClassName";
-import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
-import { CardRadioItem } from "./CardRadioItem";
-const CardRadioCommon = ({ className, labelGroup, descriptionGroup, RadioComponent, IconComponent, isRequired, options, type = "vertical", error, name, value, onChange, ItemMessageComponent, ...inputProps }) => {
-    const componentClassName = getComponentClassName("af-card-radio__container", className);
-    const RadioGroupClassName = getComponentClassName("af-card-radio-group", className, type);
-    const cardRadioId = useId();
-    const errorId = `${cardRadioId}:error`;
-    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
-    const size = isMobile
-        ? "M"
-        : "L";
-    return (_jsxs("fieldset", { className: componentClassName, "aria-invalid": Boolean(error), "aria-errormessage": error ? errorId : undefined, children: [labelGroup && (_jsxs("legend", { className: "af-card-radio__legend", children: [_jsxs("p", { children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] }), descriptionGroup && (_jsx("p", { className: "af-card-radio__description", children: descriptionGroup }))] })), _jsx("div", { className: RadioGroupClassName, children: options.map((cardRadioItemProps) => (_jsx(CardRadioItem, { name: name, onChange: onChange, size: size, RadioComponent: RadioComponent, IconComponent: IconComponent, isInvalid: Boolean(error), checked: value !== undefined
+import { useId, } from "react";
+export const CardRadioCommon = ({ className, labelGroup, descriptionGroup, label, description, isRequired, required, options, type = "vertical", error, name, value, id, CardRadioOptionComponent, ItemMessageComponent, ...inputProps }) => {
+    const generatedId = useId();
+    const cardRadioId = id ?? generatedId;
+    const errorId = `${cardRadioId}-error`;
+    return (_jsxs("fieldset", { className: ["af-card-radio", className].filter(Boolean).join(" "), role: "radiogroup", "aria-required": required ? true : undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, id: cardRadioId, children: [_jsxs("legend", { className: "af-card-radio__legend", children: [_jsxs("p", { className: "af-card-radio__label", children: [label, labelGroup, (required || isRequired) && _jsx("span", { "aria-hidden": true, children: "*" })] }), (description || descriptionGroup) && (_jsxs("p", { className: "af-card-radio__description", children: [description, descriptionGroup] }))] }), _jsx("div", { className: [
+                    "af-card-radio__options",
+                    `af-card-radio__options--${type}`,
+                ].join(" "), children: options.map((cardRadioItemProps) => (_jsx(CardRadioOptionComponent, { id: `${cardRadioId}-${cardRadioItemProps.value}`, checked: value !== undefined
                         ? value === cardRadioItemProps.value
-                        : undefined, ...inputProps, ...cardRadioItemProps }, `${name ?? cardRadioId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
+                        : undefined, ...inputProps, ...cardRadioItemProps, type: type, isInvalid: Boolean(error), name: name }, `${name ?? cardRadioId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
 };
 CardRadioCommon.displayName = "CardRadioCommon";
-export { CardRadioCommon };

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

@@ -1,5 +1,5 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioLF.scss";
 import { type CardRadioProps } from "./CardRadioCommon";
+import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioLF.scss";
 export declare const CardRadio: {
     (props: CardRadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Form/Radio/CardRadio/CardRadioLF.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioLF.scss";
-import { Icon } from "../../../Icon/IconLF";
+import { CardRadioOption } from "../CardRadioOption/CardRadioOptionLF";
 import { CardRadioCommon } from "./CardRadioCommon";
-import { Radio } from "../Radio/RadioLF";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
-export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, IconComponent: Icon, RadioComponent: Radio, ItemMessageComponent: ItemMessage }));
+import "@axa-fr/design-system-apollo-css/dist/Form/Radio/CardRadio/CardRadioLF.scss";
+export const CardRadio = (props) => (_jsx(CardRadioCommon, { ...props, CardRadioOptionComponent: CardRadioOption, ItemMessageComponent: ItemMessage }));
 CardRadio.displayName = "CardRadio";

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

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

package/dist/Form/Radio/CardRadioOption/CardRadioOptionApollo.js

@@ -0,0 +1,6 @@
+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/design-system-apollo-css/dist/Form/Radio/CardRadioOption/CardRadioOptionApollo.scss";
+export const CardRadioOption = (props) => (_jsx(CardRadioOptionCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));

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

@@ -0,0 +1,15 @@
+import { type ComponentProps, type ComponentType, type ReactNode } from "react";
+import type { Icon as IconCommon } from "../../../Icon/IconCommon";
+import type { Radio } from "../Radio/RadioCommon";
+export type CardRadioOptionProps = Omit<ComponentProps<typeof Radio>, "size"> & {
+    label: ReactNode;
+    type?: "vertical" | "horizontal";
+    description?: ReactNode;
+    subtitle?: ReactNode;
+    icon?: ComponentProps<typeof IconCommon>["src"];
+};
+export type CardRadioOptionCommonProps = CardRadioOptionProps & {
+    RadioComponent: ComponentType<ComponentProps<typeof Radio>>;
+    IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
+};
+export declare const CardRadioOptionCommon: import("react").ForwardRefExoticComponent<Omit<CardRadioOptionCommonProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Form/Radio/CardRadioOption/CardRadioOptionCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+export const CardRadioOptionCommon = forwardRef(({ label, type = "vertical", description, subtitle, icon, isInvalid, className, RadioComponent, IconComponent, ...inputProps }, ref) => (_jsxs("label", { className: [
+        "af-card-radio-option",
+        isInvalid && "af-card-radio-option--invalid",
+        type === "horizontal" && "af-card-radio-option--horizontal",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" "), children: [icon && _jsx(IconComponent, { src: icon, role: "presentation" }), _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/Form/Radio/CardRadioOption/CardRadioOptionLF.d.ts

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

package/dist/Form/Radio/CardRadioOption/CardRadioOptionLF.js

@@ -0,0 +1,6 @@
+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/design-system-apollo-css/dist/Form/Radio/CardRadioOption/CardRadioOptionLF.scss";
+export const CardRadioOption = (props) => (_jsx(CardRadioOptionCommon, { ...props, RadioComponent: Radio, IconComponent: Icon }));

package/dist/Form/TextArea/TextAreaApollo.d.ts

@@ -19,7 +19,7 @@ export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Om
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
     onButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
 } & Partial<{
-    message?: string;
+    message?: import("react").ReactNode;
     id?: string;
     messageType?: "error" | "success";
 }>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>, "ItemMessageComponent" | "ItemLabelComponent">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Form/TextArea/TextAreaLF.d.ts

@@ -19,7 +19,7 @@ export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<Om
     ItemMessageComponent: import("react").ComponentType<ComponentProps<typeof ItemMessage>>;
     onButtonClick?: import("react").MouseEventHandler<HTMLButtonElement>;
 } & Partial<{
-    message?: string;
+    message?: import("react").ReactNode;
     id?: string;
     messageType?: "error" | "success";
 }>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>, "ItemMessageComponent" | "ItemLabelComponent">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";
 export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileApollo";
 export { TextArea } from "./Form/TextArea/TextAreaApollo";
 export { Radio } from "./Form/Radio/Radio/RadioApollo";
+export { CardRadioOption } from "./Form/Radio/CardRadioOption/CardRadioOptionApollo";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioApollo";
 export { InputText } from "./Form/InputText/InputTextApollo";
 export { DebugGrid } from "./Grid/DebugGridApollo";

package/dist/index.js

@@ -23,6 +23,7 @@ export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";
 export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileApollo";
 export { TextArea } from "./Form/TextArea/TextAreaApollo";
 export { Radio } from "./Form/Radio/Radio/RadioApollo";
+export { CardRadioOption } from "./Form/Radio/CardRadioOption/CardRadioOptionApollo";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioApollo";
 export { InputText } from "./Form/InputText/InputTextApollo";
 export { DebugGrid } from "./Grid/DebugGridApollo";

package/dist/indexLF.d.ts

@@ -26,6 +26,7 @@ export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileLF";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";
 export { TextArea } from "./Form/TextArea/TextAreaLF";
 export { Radio } from "./Form/Radio/Radio/RadioLF";
+export { CardRadioOption } from "./Form/Radio/CardRadioOption/CardRadioOptionLF";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioLF";
 export { InputText, 
 /** @deprecated Use `InputText` instead. */

package/dist/indexLF.js

@@ -26,6 +26,7 @@ export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileLF";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";
 export { TextArea } from "./Form/TextArea/TextAreaLF";
 export { Radio } from "./Form/Radio/Radio/RadioLF";
+export { CardRadioOption } from "./Form/Radio/CardRadioOption/CardRadioOptionLF";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioLF";
 export { InputText, 
 /** @deprecated Use `InputText` instead. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.391",
+  "version": "1.0.5-alpha.396",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.391",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.391",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.396",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.396",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },

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

@@ -1,13 +0,0 @@
-import { type ComponentProps, type ComponentType } from "react";
-import type { Icon as IconCommon } from "../../../Icon/IconCommon";
-import type { Radio } from "../Radio/RadioCommon";
-export type TCardRadioItemProps = Omit<ComponentProps<typeof Radio>, "size"> & {
-    label: string;
-    description?: string;
-    subtitle?: string;
-    icon?: ComponentProps<typeof IconCommon>["src"];
-    size: ComponentProps<typeof IconCommon>["size"];
-    RadioComponent: ComponentType<ComponentProps<typeof Radio>>;
-    IconComponent: ComponentType<ComponentProps<typeof IconCommon>>;
-};
-export declare const CardRadioItem: ({ label, description, subtitle, icon, size, RadioComponent, IconComponent, ...inputProps }: TCardRadioItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/Radio/CardRadio/CardRadioItem.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardRadioItem = ({ label, description, subtitle, icon, size, RadioComponent, IconComponent, ...inputProps }) => (_jsxs("label", { className: "af-card-radio-label", children: [_jsx(RadioComponent, { ...inputProps }), _jsxs("div", { className: "af-card-radio-content", children: [icon && _jsx(IconComponent, { src: icon, size: size, role: "presentation" }), _jsxs("div", { className: "af-card-radio-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }));

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

@@ -1,11 +0,0 @@
-import type { ComponentProps, ComponentType } from "react";
-import type { Icon } from "../../../indexLF";
-import type { RadioProps } from "../Radio/RadioCommon";
-import type { TCardRadioItemProps } from "./CardRadioItem";
-export type TCardRadioItemOption = Omit<TCardRadioItemProps, "RadioComponent" | "IconComponent" | "size" | "name">;
-export type RadioComponent = {
-    RadioComponent: ComponentType<RadioProps>;
-};
-export type IconComponent = {
-    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
-};

package/dist/Form/Radio/CardRadio/types.js

@@ -1 +0,0 @@
-export {};