@axa-fr/design-system-apollo-react 1.0.5-alpha.250 → 1.0.5-alpha.251

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

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
+import { CheckboxProps } from "./CheckboxCommon";
+export declare const Checkbox: {
+    (props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/checkbox/checkbox/CheckboxApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
+import checkBoxIcon from "@material-symbols/svg-400/outlined/check_small.svg";
+import { CheckboxCommon } from "./CheckboxCommon";
+export const Checkbox = (props) => (_jsx(CheckboxCommon, { ...props, checkBoxIcon: checkBoxIcon }));
+Checkbox.displayName = "Checkbox";

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

@@ -0,0 +1,15 @@
+import React from "react";
+type CheckboxIcon = {
+    checkBoxIcon: string;
+};
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    errorId?: string;
+    hasError?: boolean;
+    className?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
+export type CheckboxCommonProps = CheckboxProps & CheckboxIcon;
+declare const CheckboxCommon: {
+    ({ errorId, checkBoxIcon, hasError, ...inputProps }: CheckboxCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CheckboxCommon };

package/dist/Form/checkbox/checkbox/CheckboxCommon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Svg } from "../../../Svg/Svg";
+const CheckboxCommon = ({ errorId, checkBoxIcon, hasError, ...inputProps }) => (_jsxs("span", { className: "af-checkbox", children: [_jsx("input", { ...inputProps, type: "checkbox", "aria-errormessage": errorId, "aria-invalid": hasError, disabled: false }), _jsx("span", { className: "af-checkbox__icons", children: _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked", "aria-hidden": true }) })] }));
+CheckboxCommon.displayName = "CheckboxCommon";
+export { CheckboxCommon };

package/dist/Form/checkbox/checkbox/CheckboxLf.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
+import { CheckboxProps } from "./CheckboxCommon";
+export declare const Checkbox: {
+    (props: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/checkbox/checkbox/CheckboxLf.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
+import checkBoxIcon from "@material-symbols/svg-400/outlined/check.svg";
+import { CheckboxCommon } from "./CheckboxCommon";
+export const Checkbox = (props) => (_jsx(CheckboxCommon, { ...props, checkBoxIcon: checkBoxIcon }));
+Checkbox.displayName = "Checkbox";

package/dist/Form/checkbox/checkboxCard/CheckboxCardApollo.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss";
+import { CheckboxCardProps } from "./CheckboxCardCommon";
+export declare const CheckboxCard: {
+    (props: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/checkbox/checkboxCard/CheckboxCardApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss";
+import { CheckboxCardCommon } from "./CheckboxCardCommon";
+import { Checkbox } from "../checkbox/CheckboxApollo";
+import { Icon } from "../../../Icon/IconApollo";
+export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox }));
+CheckboxCard.displayName = "CheckboxCard";

package/dist/Form/checkbox/checkboxCard/CheckboxCardCommon.d.ts

@@ -0,0 +1,29 @@
+import React, { type ComponentProps, ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
+import { CheckboxProps } from "../checkbox/CheckboxCommon";
+import { Icon } from "../../../Icon/IconCommon";
+type CheckboxComponent = {
+    CheckboxComponent: ComponentType<CheckboxProps>;
+};
+type IconComponent = {
+    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
+};
+export type CheckboxCardProps = ComponentPropsWithRef<"input"> & {
+    type: "vertical" | "horizontal";
+    labelGroup?: string;
+    descriptionGroup?: string;
+    isRequired?: boolean;
+    options: ({
+        label: ReactNode;
+        subtitle?: ReactNode;
+        description?: ReactNode;
+        hasError?: boolean;
+        icon?: string;
+    } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">)[];
+    onChange?: React.ChangeEventHandler;
+};
+export type CheckboxCardCommonProps = CheckboxCardProps & CheckboxComponent & IconComponent;
+declare const CheckboxCardCommon: {
+    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, }: CheckboxCardCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CheckboxCardCommon };

package/dist/Form/checkbox/checkboxCard/CheckboxCardCommon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { getComponentClassName } from "../../../utilities/getComponentClassName";
+import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
+import { BREAKPOINT } from "../../../utilities/constants";
+const CheckboxCardCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", }) => {
+    const componentClassName = getComponentClassName("af-checkbox-card__container", className);
+    const checkboxGroupClassName = getComponentClassName(`af-checkbox-card-group--${type}`, className);
+    const optionId = useId();
+    const errorId = useId();
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    const size = isMobile ? "M" : "L";
+    return (_jsxs("div", { className: componentClassName, children: [_jsxs("div", { className: "af-checkbox-card__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox-card__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox-card__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: checkboxGroupClassName, children: options.map(({ label, description, subtitle, icon, hasError, ...inputProps }) => (_jsxs("label", { "aria-invalid": hasError, htmlFor: `id-${inputProps.name}`, className: "af-checkbox-card-label", children: [_jsx(CheckboxComponent, { id: `id-${inputProps.name}`, errorId: errorId, hasError: hasError, onChange: onChange, ...inputProps }), _jsxs("div", { className: "af-checkbox-card-content", children: [icon && _jsx(IconComponent, { src: icon, size: size }), _jsxs("div", { className: "af-checkbox-card-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) })] }));
+};
+CheckboxCardCommon.displayName = "CheckboxCardCommon";
+export { CheckboxCardCommon };

package/dist/Form/checkbox/checkboxCard/CheckboxCardLF.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss";
+import { CheckboxCardProps } from "./CheckboxCardCommon";
+export declare const CheckboxCard: {
+    (props: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/checkbox/checkboxCard/CheckboxCardLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss";
+import { CheckboxCardCommon } from "./CheckboxCardCommon";
+import { Checkbox } from "../checkbox/CheckboxLf";
+import { Icon } from "../../../Icon/IconLF";
+export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox }));
+CheckboxCard.displayName = "CheckboxCard";

package/dist/Form/checkbox/checkboxText/CheckboxTextApollo.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss";
+import { CheckboxTextProps } from "./CheckboxTextCommon";
+export declare const CheckboxText: {
+    (props: CheckboxTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/checkbox/checkboxText/CheckboxTextApollo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss";
+import { CheckboxTextCommon } from "./CheckboxTextCommon";
+import { Checkbox } from "../checkbox/CheckboxApollo";
+import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
+export const CheckboxText = (props) => (_jsx(CheckboxTextCommon, { ...props, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
+CheckboxText.displayName = "CheckboxText";

package/dist/Form/checkbox/checkboxText/CheckboxTextCommon.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode, type ComponentType, type ComponentProps } from "react";
+import { CheckboxProps } from "../checkbox/CheckboxCommon";
+import { ItemMessage } from "../../ItemMessage/ItemMessageCommon";
+type CheckboxComponent = {
+    CheckboxComponent: ComponentType<CheckboxProps>;
+};
+type ItemMessageComponen = {
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+};
+export type CheckboxTextProps = {
+    label: string | ReactNode;
+    errorMessage?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled">;
+export type CheckboxTextCommonProps = CheckboxTextProps & CheckboxComponent & ItemMessageComponen;
+declare const CheckboxTextCommon: {
+    ({ label, errorMessage, CheckboxComponent, ItemMessageComponent, ...inputProps }: CheckboxTextCommonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { CheckboxTextCommon };

package/dist/Form/checkbox/checkboxText/CheckboxTextCommon.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+const CheckboxTextCommon = ({ label, errorMessage, CheckboxComponent, ItemMessageComponent, ...inputProps }) => {
+    const errorId = useId();
+    let inputId = useId();
+    inputId = inputProps.id || inputId;
+    return (_jsxs("div", { className: "af-checkbox-text", children: [_jsxs("label", { htmlFor: inputId, children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: Boolean(errorMessage), ...inputProps }), _jsx("span", { children: label })] }, inputProps.name), _jsx("div", { className: "af-checkbox-text__error", children: _jsx(ItemMessageComponent, { message: errorMessage }) })] }));
+};
+CheckboxTextCommon.displayName = "CheckboxTextCommon";
+export { CheckboxTextCommon };

package/dist/Form/checkbox/checkboxText/CheckboxTextLF.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.scss";
+import { CheckboxTextProps } from "./CheckboxTextCommon";
+export declare const CheckboxText: {
+    (props: CheckboxTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/checkbox/checkboxText/CheckboxTextLF.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.scss";
+import { CheckboxTextCommon } from "./CheckboxTextCommon";
+import { Checkbox } from "../checkbox/CheckboxLf";
+import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
+export const CheckboxText = (props) => (_jsx(CheckboxTextCommon, { ...props, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
+CheckboxText.displayName = "CheckboxText";

package/dist/index.d.ts

@@ -26,3 +26,6 @@ export { Stepper } from "./Stepper/StepperApollo";
 export { DateInput } from "./Form/DateInput/DateInputApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Heading, type HeadingLevel } from "./Heading/HeadingApollo";
+export { Checkbox } from "./Form/checkbox/checkbox/CheckboxApollo";
+export { CheckboxText } from "./Form/checkbox/checkboxText/CheckboxTextApollo";
+export { CheckboxCard } from "./Form/checkbox/checkboxCard/CheckboxCardApollo";

package/dist/index.js

@@ -26,3 +26,6 @@ export { Stepper } from "./Stepper/StepperApollo";
 export { DateInput } from "./Form/DateInput/DateInputApollo";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalApollo";
 export { Heading } from "./Heading/HeadingApollo";
+export { Checkbox } from "./Form/checkbox/checkbox/CheckboxApollo";
+export { CheckboxText } from "./Form/checkbox/checkboxText/CheckboxTextApollo";
+export { CheckboxCard } from "./Form/checkbox/checkboxCard/CheckboxCardApollo";

package/dist/indexLF.d.ts

@@ -25,3 +25,6 @@ export { Stepper } from "./Stepper/StepperLF";
 export { DateInput } from "./Form/DateInput/DateInputLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Heading, type HeadingLevel } from "./Heading/HeadingLF";
+export { Checkbox } from "./Form/checkbox/checkbox/CheckboxLf";
+export { CheckboxText } from "./Form/checkbox/checkboxText/CheckboxTextLF";
+export { CheckboxCard } from "./Form/checkbox/checkboxCard/CheckboxCardLF";

package/dist/indexLF.js

@@ -25,3 +25,6 @@ export { Stepper } from "./Stepper/StepperLF";
 export { DateInput } from "./Form/DateInput/DateInputLF";
 export { TimelineVertical } from "./TimelineVertical/TimelineVerticalLF";
 export { Heading } from "./Heading/HeadingLF";
+export { Checkbox } from "./Form/checkbox/checkbox/CheckboxLf";
+export { CheckboxText } from "./Form/checkbox/checkboxText/CheckboxTextLF";
+export { CheckboxCard } from "./Form/checkbox/checkboxCard/CheckboxCardLF";

package/dist/utilities/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const BREAKPOINT: {
+    SM: number;
+    MD: number;
+    LG: number;
+    XL: number;
+};

package/dist/utilities/constants.js

@@ -0,0 +1,6 @@
+export const BREAKPOINT = {
+    SM: 667,
+    MD: 1023,
+    LG: 1279,
+    XL: 1599,
+};

package/dist/utilities/hook/useIsSmallScreen.d.ts

@@ -0,0 +1 @@
+export declare const useIsSmallScreen: (breakPointToCheck: number) => boolean;

package/dist/utilities/hook/useIsSmallScreen.js

@@ -0,0 +1,14 @@
+import { useCallback, useSyncExternalStore } from "react";
+export const useIsSmallScreen = (breakPointToCheck) => {
+    const subscribe = useCallback((listener) => {
+        window.addEventListener("resize", listener);
+        return () => {
+            window.removeEventListener("resize", listener);
+        };
+    }, []);
+    const getSnapshot = useCallback(() => {
+        return window.innerWidth <= breakPointToCheck;
+    }, [breakPointToCheck]);
+    const getServerSnapshot = useCallback(() => false, []);
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};

package/package.json

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