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

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.d.ts

@@ -1,21 +1,21 @@
-import React, { ComponentPropsWithRef, type ComponentProps, type ComponentType } from "react";
+import { type ChangeEventHandler, type ComponentProps, type ComponentType } from "react";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { type TCardCheckboxItem } from "./CardCheckboxItem";
 import type { CheckboxComponent, IconComponent } from "./types";
-export type CardCheckboxProps = ComponentPropsWithRef<"input"> & {
+export type CardCheckboxProps = Partial<TCardCheckboxItem> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;
     isRequired?: boolean;
     options: TCardCheckboxItem[];
-    onChange?: React.ChangeEventHandler;
+    onChange?: ChangeEventHandler;
     error?: string;
 };
 type CardCheckboxCommonProps = CardCheckboxProps & CheckboxComponent & IconComponent & {
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
 export declare const CardCheckboxCommon: {
-    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, error, ItemMessageComponent, }: CardCheckboxCommonProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, error, ItemMessageComponent, ...inputProps }: CardCheckboxCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.js

@@ -4,12 +4,12 @@ import { BREAKPOINT } from "../../../utilities/constants";
 import { getComponentClassName } from "../../../utilities/getComponentClassName";
 import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
 import { CardCheckboxItem } from "./CardCheckboxItem";
-export const CardCheckboxCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", error, ItemMessageComponent, }) => {
+export const CardCheckboxCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", error, ItemMessageComponent, ...inputProps }) => {
     const componentClassName = getComponentClassName("af-card-checkbox__container", className);
     const checkboxGroupClassName = getComponentClassName("af-card-checkbox-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-checkbox__legend", children: [_jsxs("p", { children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] }), descriptionGroup && (_jsx("p", { className: "af-card-checkbox__description", children: descriptionGroup }))] })), _jsxs("div", { className: "af-card-checkbox__choices", children: [_jsx("ul", { className: checkboxGroupClassName, children: options.map(({ hasError, ...inputProps }) => (_jsx("li", { children: _jsx(CardCheckboxItem, { size: size, errorId: errorId, onChange: onChange, CheckboxComponent: CheckboxComponent, IconComponent: IconComponent, hasError: Boolean(error) || hasError, ...inputProps }) }, crypto.randomUUID()))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] })] }));
+    return (_jsxs("fieldset", { className: componentClassName, children: [labelGroup && (_jsxs("legend", { className: "af-card-checkbox__legend", children: [_jsxs("p", { children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] }), descriptionGroup && (_jsx("p", { className: "af-card-checkbox__description", children: descriptionGroup }))] })), _jsxs("div", { className: "af-card-checkbox__choices", children: [_jsx("ul", { className: checkboxGroupClassName, children: options.map(({ hasError, ...optionProps }) => (_jsx("li", { children: _jsx(CardCheckboxItem, { ...inputProps, size: size, errorId: errorId, onChange: onChange, CheckboxComponent: CheckboxComponent, IconComponent: IconComponent, hasError: Boolean(error) || hasError, ...optionProps }) }, crypto.randomUUID()))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] })] }));
 };
 CardCheckboxCommon.displayName = "CardCheckboxCommon";

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.d.ts

@@ -1,5 +1,5 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     errorId?: string;
     hasError?: boolean;
     className?: string;

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.d.ts

@@ -1,17 +1,14 @@
-import React from "react";
-export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+import { type InputHTMLAttributes } from "react";
+export type CheckboxProps = {
     errorId?: string;
     hasError?: boolean;
     className?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
-export type CheckboxCommonProps = CheckboxProps & {
-    checkBoxIcon: string;
-};
-declare const CheckboxCommon: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled">;
+declare const CheckboxCommon: import("react").ForwardRefExoticComponent<{
     errorId?: string;
     hasError?: boolean;
     className?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled"> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled"> & {
     checkBoxIcon: string;
-} & React.RefAttributes<HTMLInputElement>>;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export { CheckboxCommon };

package/dist/Form/Checkbox/Checkbox/CheckboxLF.d.ts

@@ -1,5 +1,5 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     errorId?: string;
     hasError?: boolean;
     className?: string;

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

@@ -1,8 +1,8 @@
 import { type ComponentProps, type ComponentType } from "react";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
-import type { RadioCommon } from "../Radio/RadioCommon";
+import type { Radio } from "../Radio/RadioCommon";
 import type { IconComponent, RadioComponent, TCardRadioItemOption } from "./types";
-export type CardRadioProps = Omit<ComponentProps<typeof RadioCommon>, "size"> & {
+export type CardRadioProps = Omit<ComponentProps<typeof Radio>, "size"> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;

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

@@ -13,7 +13,7 @@ const CardRadioCommon = ({ className, labelGroup, descriptionGroup, RadioCompone
     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
+    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
                         ? value === cardRadioItemProps.value
                         : undefined, ...inputProps, ...cardRadioItemProps }, `${name ?? cardRadioId}-${cardRadioItemProps.label}`))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] }));
 };

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

@@ -1,13 +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"> & {
+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 RadioCommon>>;
+    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/Radio/RadioApollo.d.ts

@@ -1,3 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Radio/Radio/RadioApollo.scss";
-import { type RadioProps } from "./RadioCommon";
-export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export { Radio } from "./RadioCommon";

package/dist/Form/Radio/Radio/RadioApollo.js

@@ -1,6 +1,2 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import "@axa-fr/design-system-apollo-css/dist/Form/Radio/Radio/RadioApollo.scss";
-import { RadioCommon } from "./RadioCommon";
-export const Radio = forwardRef((props, ref) => (_jsx(RadioCommon, { ...props, ref: ref })));
-Radio.displayName = "Radio";
+export { Radio } from "./RadioCommon";

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

@@ -1,3 +1,5 @@
-import React from "react";
-export type RadioProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
-export declare const RadioCommon: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+import { type ComponentProps } from "react";
+export type RadioProps = Omit<ComponentProps<"input">, "disabled" | "type"> & {
+    isInvalid?: boolean;
+};
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,4 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-export const RadioCommon = forwardRef((inputProps, ref) => (_jsxs("span", { className: "af-radio", children: [_jsx("input", { ...inputProps, type: "radio", ref: ref }), _jsx("span", { className: "af-radio__icons" })] })));
-RadioCommon.displayName = "RadioCommon";
+export const Radio = forwardRef(({ className, isInvalid, ...props }, ref) => (_jsx("input", { ...props, className: ["af-radio", isInvalid && "af-radio--invalid", className]
+        .filter(Boolean)
+        .join(" "), type: "radio", ref: ref })));
+Radio.displayName = "Radio";

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

@@ -1,3 +1,2 @@
 import "@axa-fr/design-system-apollo-css/dist/Form/Radio/Radio/RadioLF.scss";
-import { type RadioProps } from "./RadioCommon";
-export declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export { Radio } from "./RadioCommon";

package/dist/Form/Radio/Radio/RadioLF.js

@@ -1,6 +1,2 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import "@axa-fr/design-system-apollo-css/dist/Form/Radio/Radio/RadioLF.scss";
-import { RadioCommon } from "./RadioCommon";
-export const Radio = forwardRef((props, ref) => (_jsx(RadioCommon, { ...props, ref: ref })));
-Radio.displayName = "Radio";
+export { Radio } from "./RadioCommon";

package/package.json

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