@axa-fr/design-system-apollo-react 1.0.5-alpha.334 → 1.0.5-alpha.338

package/dist/Form/ItemMessage/ItemMessageCommon.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
 import successIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
 import { Svg } from "../../Svg/Svg";
 export const ItemMessage = ({ message, id, messageType = "error", }) => {
     if (!message) {
         return null;
     }
-    return (_jsxs("small", { className: `af-item-message af-item-message--${messageType}`, role: messageType === "error" ? "alert" : undefined, "aria-live": "assertive", children: [_jsx(Svg, { src: messageType === "error" ? errorIcon : successIcon, className: "af-item-message__icon", "aria-hidden": "true" }), _jsx("span", { id: id, className: "af-item-message__message", children: message })] }));
+    return (_jsxs("small", { id: id, className: `af-item-message af-item-message--${messageType}`, role: messageType === "error" ? "alert" : undefined, "aria-live": "assertive", children: [_jsx(Svg, { src: messageType === "error" ? errorIcon : successIcon, className: "af-item-message__icon", "aria-hidden": "true" }), _jsx("span", { className: "af-item-message__message", children: message })] }));
 };

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

@@ -1,34 +1,21 @@
-import React, { type ComponentProps, ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
-import { Icon } from "../../../Icon/IconCommon";
+import { type ComponentProps, type ComponentType } from "react";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
-import { RadioProps } from "../Radio/RadioCommon";
-type RadioComponent = {
-    RadioComponent: ComponentType<RadioProps>;
-};
-type IconComponent = {
-    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
-};
-export type CardRadioProps = ComponentPropsWithRef<"input"> & {
+import type { RadioCommon } from "../Radio/RadioCommon";
+import type { IconComponent, RadioComponent, TCardRadioItemOption } from "./types";
+export type CardRadioProps = Omit<ComponentProps<typeof RadioCommon>, "size"> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;
     isRequired?: boolean;
-    value?: number;
-    options: ({
-        label: ReactNode;
-        subtitle?: ReactNode;
-        description?: ReactNode;
-        hasError?: boolean;
-        icon?: string;
-    } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">)[];
-    onChange?: React.ChangeEventHandler;
+    value?: number | string;
+    options: TCardRadioItemOption[];
     error?: string;
 };
 export type CardRadioCommonProps = CardRadioProps & RadioComponent & IconComponent & {
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
 declare const CardRadioCommon: {
-    ({ className, labelGroup, descriptionGroup, RadioComponent, IconComponent, isRequired, options, type, error, name, onChange, ItemMessageComponent, }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, labelGroup, descriptionGroup, RadioComponent, IconComponent, isRequired, options, type, error, name, value, onChange, ItemMessageComponent, ...inputProps }: CardRadioCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { CardRadioCommon };

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

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, } from "react";
+import { useId } from "react";
+import { BREAKPOINT } from "../../../utilities/constants";
 import { getComponentClassName } from "../../../utilities/getComponentClassName";
 import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
-import { BREAKPOINT } from "../../../utilities/constants";
-const CardRadioCommon = ({ className, labelGroup, descriptionGroup, RadioComponent, IconComponent, isRequired, options, type = "vertical", error, name, onChange, ItemMessageComponent, }) => {
+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 errorId = useId();
     const isMobile = useIsSmallScreen(BREAKPOINT.SM);
-    const size = isMobile ? "M" : "L";
-    return (_jsxs("fieldset", { className: componentClassName, 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(({ label, description, subtitle, icon, hasError, ...inputProps }, index) => (_jsxs("label", { "aria-invalid": Boolean(error) || hasError, htmlFor: `id-${name ?? inputProps.name}-${index}`, className: "af-card-radio-label", children: [_jsx(RadioComponent, { id: `id-${name ?? inputProps.name}-${index}`, errorId: errorId, hasError: Boolean(error) || hasError, ...inputProps, name: name ?? inputProps.name, onChange: onChange }), _jsxs("div", { className: "af-card-radio-content", children: [icon && _jsx(IconComponent, { src: icon, size: size }), _jsxs("div", { className: "af-card-radio-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, `${name ?? inputProps.name}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
+    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, checked: value !== undefined
+                        ? value === cardRadioItemProps.value
+                        : undefined, ...inputProps, ...cardRadioItemProps }, `${name}-${crypto.randomUUID()}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
 };
 CardRadioCommon.displayName = "CardRadioCommon";
 export { CardRadioCommon };

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

@@ -0,0 +1,13 @@
+import { type ComponentProps, type ComponentType } from "react";
+import type { Icon as IconCommon } from "../../../Icon/IconCommon";
+import type { RadioCommon } from "../Radio/RadioCommon";
+export type TCardRadioItemProps = Omit<ComponentProps<typeof RadioCommon>, "size"> & {
+    label: string;
+    description?: string;
+    subtitle?: string;
+    icon?: ComponentProps<typeof IconCommon>["src"];
+    size: ComponentProps<typeof IconCommon>["size"];
+    RadioComponent: ComponentType<ComponentProps<typeof RadioCommon>>;
+    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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,11 @@
+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

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

package/dist/Form/Radio/Radio/RadioCommon.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
-export type RadioProps = {
-    errorId?: string;
-    hasError?: boolean;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
+export type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
 export declare const RadioCommon: {
-    ({ errorId, hasError, ...inputProps }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    (inputProps: RadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/Form/Radio/Radio/RadioCommon.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const RadioCommon = ({ errorId, hasError, ...inputProps }) => (_jsxs("span", { className: "af-radio", "aria-invalid": hasError, "aria-errormessage": errorId, children: [_jsx("input", { ...inputProps, type: "radio" }), _jsx("span", { className: "af-radio__icons" })] }));
+export const RadioCommon = (inputProps) => (_jsxs("span", { className: "af-radio", children: [_jsx("input", { ...inputProps, type: "radio" }), _jsx("span", { className: "af-radio__icons" })] }));
 RadioCommon.displayName = "RadioCommon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.334",
+  "version": "1.0.5-alpha.338",
   "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.334",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.334",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.338",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.338",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },