@axa-fr/canopee-react 1.2.1-alpha.11 → 1.2.1-alpha.13

package/dist/client.d.ts

@@ -61,3 +61,5 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Card, type CardProps } from "./prospect-client/Card/CardLF";
 export { List, type ListProps } from "./prospect-client/List/List/ListLF";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorLF";
+export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonLF";
+export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListLF";

package/dist/client.js

@@ -60,3 +60,5 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Card } from "./prospect-client/Card/CardLF";
 export { List } from "./prospect-client/List/List/ListLF";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorLF";
+export { Skeleton, } from "./prospect-client/Skeleton/SkeletonLF";
+export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListLF";

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

@@ -8,7 +8,15 @@ export declare enum RadioModes {
 declare const Radio: import("react").ForwardRefExoticComponent<(({
     options: Option[];
 } & Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    options: Option[];
+    options: ({
+        id?: string;
+        icon?: import("react").ReactNode;
+        label: import("react").ReactNode;
+        description?: import("react").ReactNode;
+        value: string;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & {
+        action?: import("react").ReactNode;
+    })[];
     orientation?: "horizontal" | "vertical";
 }, "ref"> & {
     mode: "cardRadio";

package/dist/distributeur/Form/Radio/RadioCardGroup.d.ts

@@ -1,8 +1,11 @@
 import "@axa-fr/canopee-css/distributeur/Form/Radio/RadioCardGroup.css";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import type { Option } from "../core";
+type RadioOptions = Option & {
+    action?: ReactNode;
+};
 type Props = ComponentProps<"input"> & {
-    options: Option[];
+    options: RadioOptions[];
     orientation?: "horizontal" | "vertical";
 };
 export declare const RadioCardGroup: ({ children, options, className, value, name, orientation, disabled, "aria-invalid": ariaInvalid, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/distributeur/Form/Radio/RadioCardGroup.js

@@ -12,7 +12,7 @@ export const RadioCardGroup = ({ children, options, className, value, name, orie
             className,
             orientation === "horizontal" &&
                 `${DEFAULT_CONTAINER_CLASSNAME}--horizontal`,
-        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, ...otherOptionProps }) => {
+        ]), children: [options.map(({ name: optionName, icon, label, disabled: optionDisabled, value: optionValue, action, ...otherOptionProps }) => {
                 const newName = name || optionName || idGenerated;
                 const allClassNames = classNames([
                     DEFAULT_CLASSNAME,
@@ -20,6 +20,6 @@ export const RadioCardGroup = ({ children, options, className, value, name, orie
                     ariaInvalid && `${DEFAULT_CLASSNAME}--error`,
                 ]);
                 const isDisabled = disabled || optionDisabled;
-                return (_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue));
+                return (_jsxs("div", { children: [_jsxs("label", { className: allClassNames, children: [_jsx("input", { ...otherProps, type: "radio", name: newName, disabled: isDisabled, checked: isDisabled ? false : optionValue === value, value: optionValue, ...otherOptionProps }), typeof icon === "string" ? _jsx(Svg, { src: icon }) : icon, label] }, optionValue), action] }, optionValue));
             }), children] }));
 };

package/dist/prospect-client/Skeleton/SkeletonApollo.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Skeleton/SkeletonApollo.css";
+export { Skeleton, type SkeletonProps } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonApollo.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/prospect/Skeleton/SkeletonApollo.css";
+export { Skeleton } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonCommon.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+type isLoadingAndChildrenProps = {
+    children: ReactNode;
+    isLoading: boolean;
+} | {
+    children?: undefined;
+    isLoading?: boolean;
+};
+export type SkeletonProps = {
+    className?: string;
+    grid: number[][];
+    "aria-busy"?: boolean;
+    "aria-label"?: string;
+    maxCols?: number;
+    colGap?: number;
+    rowGap?: number;
+} & isLoadingAndChildrenProps;
+export declare const Skeleton: ({ className, grid, "aria-busy": ariaBusy, "aria-label": ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export {};

package/dist/prospect-client/Skeleton/SkeletonCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassName } from "../utilities/getClassName";
+const CLASS_NAME = "af-skeleton";
+export const Skeleton = ({ className, grid = [], "aria-busy": ariaBusy = true, "aria-label": ariaLabel = "Chargement", maxCols = 12, colGap = 16, rowGap = 8, isLoading = true, children, }) => isLoading ? (_jsx("div", { className: getClassName({
+        baseClassName: `${CLASS_NAME}-container`,
+        className,
+    }), "aria-label": ariaLabel, role: "status", "aria-busy": ariaBusy, style: {
+        "--max-cols": maxCols,
+        "--col-gap": `calc(${colGap} / var(--font-size-base) * 1rem)`,
+        "--row-gap": `calc(${rowGap} / var(--font-size-base) * 1rem)`,
+    }, children: grid.map((cols, indexRow) => cols.map((colSize, indexCol) => (_jsx("div", { style: { "--col-size": colSize }, className: CLASS_NAME }, `${indexRow}-${indexCol}`)))) })) : (children);

package/dist/prospect-client/Skeleton/SkeletonLF.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonLF.css";
+export { Skeleton, type SkeletonProps } from "./SkeletonCommon";

package/dist/prospect-client/Skeleton/SkeletonLF.js

@@ -0,0 +1,2 @@
+import "@axa-fr/canopee-css/client/Skeleton/SkeletonLF.css";
+export { Skeleton } from "./SkeletonCommon";

package/dist/prospect-client/SkeletonList/SkeletonListApollo.d.ts

@@ -0,0 +1,3 @@
+import { type SkeletonListProps } from "./SkeletonListCommon";
+export { type SkeletonListProps } from "./SkeletonListCommon";
+export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/SkeletonList/SkeletonListApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/SkeletonApollo";
+import { List } from "../List/List/ListApollo";
+import { SkeletonListCommon, } from "./SkeletonListCommon";
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));

package/dist/prospect-client/SkeletonList/SkeletonListCommon.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import type { SkeletonProps } from "../Skeleton/SkeletonCommon";
+import type { ListProps } from "../List/List/ListCommon";
+export type SkeletonListProps = {
+    lists: {
+        lines?: number;
+        grid: SkeletonProps["grid"];
+    }[];
+    isLoading?: boolean;
+    className?: string;
+} & PropsWithChildren;
+type SkeletonListPropsCommon = SkeletonListProps & {
+    ListComponent: ComponentType<ListProps>;
+    SkeletonComponent: ComponentType<SkeletonProps>;
+};
+export declare const SkeletonListCommon: ({ children, isLoading, lists, className, ListComponent, SkeletonComponent, }: SkeletonListPropsCommon) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
+export {};

package/dist/prospect-client/SkeletonList/SkeletonListCommon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SkeletonListCommon = ({ children, isLoading, lists = [], className, ListComponent, SkeletonComponent, }) => isLoading
+    ? lists.map(({ lines = 1, grid }, linesIndex) => (_jsx(ListComponent, { className: className, children: [...Array(lines).keys()].map((_, lineIndex) => (_jsx(SkeletonComponent, { grid: grid }, lineIndex))) }, linesIndex)))
+    : children;

package/dist/prospect-client/SkeletonList/SkeletonListLF.d.ts

@@ -0,0 +1,3 @@
+import { type SkeletonListProps } from "./SkeletonListCommon";
+export { type SkeletonListProps } from "./SkeletonListCommon";
+export declare const SkeletonList: (props: SkeletonListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/SkeletonList/SkeletonListLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from "../Skeleton/SkeletonLF";
+import { List } from "../List/List/ListLF";
+import { SkeletonListCommon, } from "./SkeletonListCommon";
+export const SkeletonList = (props) => (_jsx(SkeletonListCommon, { ...props, SkeletonComponent: Skeleton, ListComponent: List }));

package/dist/prospect.d.ts

@@ -57,3 +57,5 @@ export { ItemPagination, type ItemPaginationProps, } from "./prospect-client/Pag
 export { Card, type CardProps } from "./prospect-client/Card/CardApollo";
 export { List, type ListProps } from "./prospect-client/List/List/ListApollo";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
+export { Skeleton, type SkeletonProps, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { SkeletonList, type SkeletonListProps, } from "./prospect-client/SkeletonList/SkeletonListApollo";

package/dist/prospect.js

@@ -56,3 +56,5 @@ export { ItemPagination, } from "./prospect-client/Pagination/ItemPagination/Ite
 export { Card } from "./prospect-client/Card/CardApollo";
 export { List } from "./prospect-client/List/List/ListApollo";
 export { LevelSelector, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
+export { Skeleton, } from "./prospect-client/Skeleton/SkeletonApollo";
+export { SkeletonList, } from "./prospect-client/SkeletonList/SkeletonListApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.2.1-alpha.11",
+  "version": "1.2.1-alpha.13",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.2.1-alpha.11",
+    "@axa-fr/canopee-css": "1.2.1-alpha.13",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"