@axa-fr/design-system-look-and-feel-react 0.3.0-ci.298 → 0.3.0-ci.300

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,20 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Skeleton/Skeleton.scss";
+import { ReactNode } from "react";
+type isLoadingAndChildrenProps = {
+    children: ReactNode;
+    isLoading: boolean;
+} | {
+    children?: undefined;
+    isLoading?: boolean;
+};
+export type SkeletonProps = {
+    className?: string;
+    grid: number[][];
+    ariaBusy?: boolean;
+    ariaLabel?: string;
+    maxCols?: number;
+    colGap?: number;
+    rowGap?: number;
+} & isLoadingAndChildrenProps;
+export declare const Skeleton: ({ className, grid, ariaBusy, ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/Skeleton/Skeleton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Skeleton/Skeleton.scss";
+export const Skeleton = ({ className = "af-skeleton", grid = [], ariaBusy = true, ariaLabel = "Chargement", maxCols = 12, colGap = 16, rowGap = 8, isLoading = true, children, }) => isLoading ? (_jsx("div", { className: `${className}-container`, "aria-label": ariaLabel, role: "status", "aria-live": "polite", "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: className }, `${indexRow}-${indexCol}`)))) })) : (children);

package/dist/SkeletonList/SkeletonList.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import { Skeleton, List } from "..";
+export type SkeletonListProps = {
+    lists: {
+        lines?: number;
+        grid: ComponentPropsWithRef<typeof Skeleton>["grid"];
+    }[];
+    classModifierList?: ComponentPropsWithRef<typeof List>["classModifier"];
+    isLoading: boolean;
+} & PropsWithChildren;
+export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element[] | null | undefined;

package/dist/SkeletonList/SkeletonList.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton, List } from "..";
+export const SkeletonList = ({ children, isLoading, lists = [], classModifierList, }) => isLoading
+    ? lists.map(({ lines = 1, grid }) => (_jsx(List, { classModifier: classModifierList, children: [...Array(lines).keys()].map(() => (_jsx(Skeleton, { grid: grid }, crypto.randomUUID()))) }, crypto.randomUUID())))
+    : children;

package/dist/index.d.ts

@@ -29,3 +29,4 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize, type TitleLevel } from "./Title";
+export { Skeleton } from "./Skeleton/Skeleton";

package/dist/index.js

@@ -27,3 +27,4 @@ export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
 export { Title, TitleSize } from "./Title";
+export { Skeleton } from "./Skeleton/Skeleton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.3.0-ci.298",
+  "version": "0.3.0-ci.300",
   "description": "",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.298",
+    "@axa-fr/design-system-look-and-feel-css": "0.3.0-ci.300",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },