allaw-ui 4.1.3 → 4.1.4

package/dist/assets/allaw-font.svg

@@ -7,8 +7,8 @@
 {
 	"fontFamily": "allaw-font",
 	"majorVersion": 1,
-	"minorVersion": 5,
-	"version": "Version 1.5",
+	"minorVersion": 6,
+	"version": "Version 1.6",
 	"fontId": "allaw-font",
 	"psName": "allaw-font",
 	"subFamily": "Regular",
@@ -148,4 +148,5 @@
 <glyph unicode="&#xe97b;" glyph-name="website" data-tags="website" d="M45.742-61.901c-10.296 3.27-21.314 9.659-27.741 16.086-12.094 12.094-19.797 34.549-17.64 51.422 3.326 26.012 1.705 24.038 103.747 126.329 55.9 56.037 88.947 90.199 88.063 91.036-0.778 0.737-28.44 15.015-61.471 31.728-39.305 19.888-61.947 32.181-65.527 35.577-6.492 6.159-8.726 12.135-8.835 23.631-0.105 11.096 3.758 18.708 11.762 23.175 3.3 1.842 98.823 31.081 212.273 64.975 226.502 67.669 218.13 65.558 232.335 58.579 5.33-2.619 8.060-5.262 11.338-10.979 8.095-14.113 10.825-2.836-55.897-230.846-33.133-113.228-61.417-208.176-62.852-210.995s-4.482-6.85-6.772-8.956c-11.467-10.548-33.816-9.277-45.075 2.563-2.194 2.308-17.755 31.661-34.58 65.229s-31.15 61.38-31.836 61.803c-0.685 0.424-40.096-38.14-87.579-85.697-82.67-82.797-94.863-94.314-105.892-100.015-12.807-6.619-34.861-8.762-47.822-4.645zM497.632-62.639c-14.021 4.607-40.354 22.302-38.886 26.13 0.926 2.412 38.158 128.902 65.218 221.567 9.764 33.434 18.43 62.931 19.26 65.55l1.508 4.761h71.661c39.414 0 71.661-0.268 71.661-0.596 0-2.833-9.649-51.046-13.221-66.059-5.315-22.341-9.199-35.74-19.318-66.642-9.973-30.457-18.138-50.198-32.734-79.147-26.729-53.011-53.885-84.996-85.519-100.727-9.731-4.839-12.253-5.456-23.437-5.731-6.893-0.17-14.18 0.233-16.195 0.895zM646.475-46.014c0.589 1.007 3.861 5.786 7.271 10.62 41.368 58.644 78.164 161.599 98.421 275.382l2.608 14.648 115.317 0.375c63.424 0.207 115.317-0.153 115.317-0.799 0-2.506-14.701-34.065-23.003-49.38-46.509-85.799-109.097-150.983-190.858-198.772-19.13-11.181-49.76-26.368-67.759-33.596-12.369-4.967-56.093-20.309-57.879-20.309-0.279 0-0.028 0.824 0.564 1.831zM565.012 320.575c0 0.416 5.984 20.356 13.298 44.31 12.697 41.582 13.335 44.332 14.116 60.754 1.467 30.852-5.977 50.845-27.337 73.426-18.602 19.665-39.453 28.754-65.969 28.754-16.29 0-24.384-1.974-101.814-24.836-37.888-11.187-70.772-20.813-73.075-21.391l-4.187-1.051 0.963 16.681c2.032 35.194 3.833 62.416 4.665 70.512l0.865 8.423h371.495l0.847-6.958c6.263-51.424 6.247-186.929-0.028-241.691l-0.881-7.69h-66.479c-36.564 0-66.479 0.34-66.479 0.757zM763.377 326.044c3.256 25.424 4.425 57.636 4.425 121.944s-1.169 96.52-4.425 121.944l-0.797 6.225h246.003l3-13.028c8.686-37.723 12.35-71.888 12.35-115.141 0-43.486-2.886-71.213-11.469-110.172-1.99-9.034-3.618-16.779-3.618-17.211s-55.41-0.786-123.133-0.786h-123.133zM3.465 384.636c-0.471 2.618-1.574 17.614-2.451 33.324-2.714 48.646 1.492 99.696 11.962 145.17l3 13.028h246.003l-0.819-6.225c-2.091-15.897-3.8-42.778-4.701-73.936l-0.983-34.020-8.191-2.375c-50.76-14.717-210.663-62.564-216.49-64.778-4.192-1.593-11.683-5.609-16.646-8.923s-9.205-6.026-9.426-6.026c-0.221 0-0.788 2.142-1.259 4.761zM39.151 641.876c0 2.632 13.444 31.481 22.435 48.14 26.125 48.409 53.345 84.983 92.511 124.304 47.887 48.076 109.104 86.869 179.247 113.59 17.38 6.621 46.092 15.889 46.883 15.133 0.281-0.269-2.443-4.653-6.053-9.742-46.645-65.761-80.388-159.17-103.35-286.101l-1.060-5.859-115.306-0.375c-65.409-0.213-115.306 0.181-115.306 0.91zM336.504 641.103c0 0.272 1.681 9.665 3.736 20.873 7.283 39.731 15.296 70.898 28.778 111.929 23.028 70.086 58.558 133.478 90.080 160.72 33.516 28.965 58.495 32.731 88.551 13.352 19.925-12.847 34.684-28.441 53.367-56.385 10.922-16.336 30.975-55.366 40.522-78.87 12.024-29.604 26.375-75.738 34.629-111.324 3.448-14.866 11.888-57.673 11.888-60.295 0-0.272-79.099-0.494-175.775-0.494s-175.775 0.222-175.775 0.494zM754.719 642.44c-0.343 1.007-2.013 9.741-3.71 19.409-19.074 108.674-56.196 208.816-100.624 271.453-3.61 5.090-6.334 9.474-6.053 9.742 0.791 0.755 29.503-8.512 46.883-15.133 70.144-26.721 131.36-65.514 179.247-113.59 39.167-39.321 66.387-75.896 92.511-124.304 8.976-16.633 22.435-45.506 22.435-48.131 0-0.714-50.674-1.276-115.032-1.276-90.716 0-115.164 0.387-115.657 1.831z" />
 <glyph unicode="&#xe97c;" glyph-name="x-small" data-tags="x-small" d="M215.409 96.435c-16.271 3.272-32.785 12.856-40.751 23.65-10.406 14.101-15.343 28.71-15.343 45.403 0 16.165 4.236 29.32 14.009 43.502 3.629 5.266 76.523 77.935 231.306 230.59l8.424 8.308-51.202 50.698c-28.161 27.884-81.227 80.41-117.924 116.725-67.506 66.803-71.296 70.843-76.947 82.052-10.56 20.944-10.263 46.73 0.778 67.618 6.758 12.786 14.483 20.511 27.269 27.269 20.888 11.041 46.673 11.337 67.618 0.778 11.209-5.651 15.25-9.441 82.052-76.947 36.315-36.698 88.82-89.743 116.679-117.878l50.652-51.155 50.652 51.155c27.858 28.135 80.364 81.18 116.679 117.878 66.802 67.506 70.843 71.296 82.052 76.947 20.944 10.56 46.73 10.263 67.618-0.778 12.786-6.758 20.511-14.483 27.269-27.269 11.041-20.888 11.337-46.673 0.777-67.618-5.651-11.209-9.441-15.25-76.947-82.052-36.698-36.315-89.764-88.841-117.924-116.725l-51.201-50.698 8.424-8.308c154.783-152.656 227.677-225.324 231.306-230.59 9.772-14.182 14.009-27.337 14.009-43.502 0-16.693-4.937-31.302-15.343-45.403-6.026-8.165-18.513-16.719-30.458-20.863-18.435-6.397-40.274-4.988-57.529 3.712-11.924 6.012-13.594 7.623-132.608 127.931-63.895 64.59-116.444 117.436-116.775 117.436s-52.88-52.846-116.775-117.436c-87.268-88.217-117.667-118.465-122.18-121.569-10.374-7.137-18.608-10.688-29.817-12.856-7.131-1.379-20.998-1.382-27.846-0.004z" />
 <glyph unicode="&#xe97d;" glyph-name="play" data-tags="play" horiz-adv-x="877" d="M94.48-63.141c-32.274 5.287-63.377 26.516-79.643 54.361-6.986 11.959-12.17 28.677-13.919 44.888-1.224 11.345-1.224 812.334 0 823.68 3.044 28.221 13.476 49.939 32.911 68.519 34.712 33.184 82.082 40.948 123.653 20.265 10.169-5.059 666.111-405.913 674.048-411.918 26.288-19.891 41.424-46.683 45.222-80.048 2.187-19.213-3.817-46.177-14.211-63.816-7.59-12.88-18.692-25.036-30.619-33.527-9.888-7.039-665.618-407.55-674.44-411.939-8.208-4.084-18.146-7.57-27.483-9.641-8.259-1.832-26.744-2.261-35.519-0.823z" />
+<glyph unicode="&#xe97e;" glyph-name="allaw-icon-drag" data-tags="allaw-icon-drag" d="M444.559 754.913c0-65.602-53.181-118.783-118.783-118.783s-118.783 53.181-118.783 118.783c0 65.602 53.181 118.783 118.783 118.783s118.783-53.181 118.783-118.783zM444.559 448c0-65.602-53.181-118.783-118.783-118.783s-118.783 53.181-118.783 118.783c0 65.602 53.181 118.783 118.783 118.783s118.783-53.181 118.783-118.783zM444.559 141.087c0-65.602-53.181-118.783-118.783-118.783s-118.783 53.181-118.783 118.783c0 65.602 53.181 118.783 118.783 118.783s118.783-53.181 118.783-118.783zM817.006 754.913c0-65.602-53.181-118.783-118.783-118.783s-118.783 53.181-118.783 118.783c0 65.602 53.181 118.783 118.783 118.783s118.783-53.181 118.783-118.783zM817.006 448c0-65.602-53.181-118.783-118.783-118.783s-118.783 53.181-118.783 118.783c0 65.602 53.181 118.783 118.783 118.783s118.783-53.181 118.783-118.783zM817.006 141.087c0-65.602-53.181-118.783-118.783-118.783s-118.783 53.181-118.783 118.783c0 65.602 53.181 118.783 118.783 118.783s118.783-53.181 118.783-118.783z" />
 </font></defs></svg>

package/dist/components/atoms/inputs/SearchBar.css

@@ -6,7 +6,7 @@
   height: 45px;
   padding: 0px 6px 0px 14px;
   align-items: center;
-  gap: 73px;
+  gap: 8px;
   flex-shrink: 0;
   border-radius: 73px;
   border: 1px solid var(--venom-grey, #e6edf5);
@@ -23,7 +23,8 @@
   opacity: 0.9;
   border: none;
   outline: none;
-  width: 100%;
+  flex: 1;
+  width: auto;
   padding-left: 3px;
 }
 
@@ -52,3 +53,28 @@
   align-items: center;
   justify-content: center;
 }
+
+.SearchBar-clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-right: 0;
+  margin-left: 0;
+  transition: background 0.15s;
+}
+
+.SearchBar-clear-button:hover {
+  background: #f6fcfe;
+}
+
+.SearchBar-clear-button i {
+  color: #728ea7;
+  font-size: 18px;
+  pointer-events: none;
+}

package/dist/components/atoms/inputs/SearchBar.d.ts

@@ -7,6 +7,7 @@ export interface SearchBarProps {
     endIcon?: string;
     value?: string;
     onChange?: (value: string) => void;
+    showClear?: boolean;
 }
 declare const SearchBar: React.FC<SearchBarProps>;
 export default SearchBar;

package/dist/components/atoms/inputs/SearchBar.js

@@ -3,8 +3,8 @@ import "./SearchBar.css";
 import "../../../styles/global.css";
 import "../../../styles/icons.css";
 var SearchBar = function (_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, _c = _a.endIcon, endIcon = _c === void 0 ? "allaw-icon-search" : _c, _d = _a.value, controlledValue = _d === void 0 ? "" : _d, onChange = _a.onChange;
-    var _e = useState(controlledValue), value = _e[0], setValue = _e[1];
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Faites une recherche" : _b, _c = _a.endIcon, endIcon = _c === void 0 ? "allaw-icon-search" : _c, _d = _a.value, controlledValue = _d === void 0 ? "" : _d, onChange = _a.onChange, _e = _a.showClear, showClear = _e === void 0 ? false : _e;
+    var _f = useState(controlledValue), value = _f[0], setValue = _f[1];
     var handleChange = function (event) {
         var newValue = event.target.value;
         setValue(newValue);
@@ -12,9 +12,17 @@ var SearchBar = function (_a) {
             onChange(newValue);
         }
     };
+    var handleClear = function () {
+        setValue("");
+        if (onChange) {
+            onChange("");
+        }
+    };
     return (React.createElement("div", { className: "SearchBar" },
         React.createElement("input", { type: "text", placeholder: placeholder, className: "SearchBar-placeholder", value: controlledValue || value, onChange: handleChange }),
-        React.createElement("button", { className: "SearchBar-icon-button" },
+        showClear && (controlledValue || value) && (React.createElement("button", { type: "button", className: "SearchBar-clear-button", onClick: handleClear, "aria-label": "Effacer la recherche" },
+            React.createElement("i", { className: "allaw-icon-x-small" }))),
+        React.createElement("button", { className: "SearchBar-icon-button", tabIndex: -1, "aria-label": "Rechercher" },
             React.createElement("i", { className: endIcon }))));
 };
 export default SearchBar;

package/dist/components/atoms/inputs/SearchBar.stories.d.ts

@@ -10,6 +10,7 @@ declare namespace _default {
     export let excludeStories: RegExp;
     export namespace args {
         let endIcon: string;
+        let showClear: boolean;
     }
     export namespace argTypes {
         export namespace placeholder {
@@ -32,6 +33,12 @@ declare namespace _default {
             }
             export { control_2 as control };
         }
+        export namespace showClear_1 {
+            let control_3: string;
+            export { control_3 as control };
+            export let description: string;
+        }
+        export { showClear_1 as showClear };
         export namespace onChange_1 {
             let action_1: string;
             export { action_1 as action };
@@ -51,4 +58,5 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WithClear: any;
 import SearchBar from "./SearchBar";

package/dist/components/atoms/inputs/SearchBar.stories.js

@@ -21,7 +21,7 @@ export default {
     component: SearchBar,
     tags: ["autodocs"],
     excludeStories: /.*Data$/,
-    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search" }),
+    args: __assign(__assign({}, ActionsData), { endIcon: "allaw-icon-search", showClear: false }),
     argTypes: {
         placeholder: {
             control: {
@@ -38,6 +38,10 @@ export default {
                 type: "text",
             },
         },
+        showClear: {
+            control: "boolean",
+            description: "Affiche une croix pour effacer le champ si true.",
+        },
         onChange: { action: "changed" },
     },
     parameters: {
@@ -63,5 +67,14 @@ export var Default = Template.bind({});
 Default.args = {
     placeholder: "Faites une recherche",
     endIcon: "allaw-icon-search",
+    showClear: false,
+    onChange: function (value) { return console.log("Search value:", value); },
+};
+export var WithClear = Template.bind({});
+WithClear.args = {
+    placeholder: "Faites une recherche",
+    endIcon: "allaw-icon-search",
+    showClear: true,
+    value: "test",
     onChange: function (value) { return console.log("Search value:", value); },
 };

package/dist/components/molecules/proSwitch/AvatarBubble.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface AvatarBubbleProps {
+    firstName: string;
+    name: string;
+    src?: string;
+    size?: number;
+    isSelected?: boolean;
+    disabled?: boolean;
+    disableHoverAnimation?: boolean;
+    onClick?: () => void;
+    alt?: string;
+    className?: string;
+    borderThick?: boolean;
+}
+declare const AvatarBubble: React.FC<AvatarBubbleProps>;
+export default AvatarBubble;

package/dist/components/molecules/proSwitch/AvatarBubble.js

@@ -0,0 +1,72 @@
+import React, { useState, useCallback } from "react";
+import Image from "next/image";
+import styles from "./avatarBubble.module.css";
+// Fonction de hash simple (DJB2)
+var hashString = function (str) {
+    var hash = 5381;
+    for (var i = 0; i < str.length; i++) {
+        hash = (hash << 5) + hash + str.charCodeAt(i);
+    }
+    return Math.abs(hash);
+};
+// Génère la couleur de fond basée sur le nom
+var generateBackgroundColor = function (firstName, name) {
+    var fullName = "".concat(firstName, " ").concat(name).trim();
+    var hash = hashString(fullName);
+    var hue = hash % 360;
+    return "hsl(".concat(hue, ", 60%, 70%)");
+};
+// Génère les initiales
+var generateInitials = function (firstName, name) {
+    var _a, _b;
+    var firstInitial = ((_a = firstName === null || firstName === void 0 ? void 0 : firstName.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || "";
+    var lastInitial = ((_b = name === null || name === void 0 ? void 0 : name.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) || "";
+    return "".concat(firstInitial).concat(lastInitial);
+};
+var AvatarBubble = function (_a) {
+    var firstName = _a.firstName, name = _a.name, src = _a.src, _b = _a.size, size = _b === void 0 ? 42.5 : _b, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableHoverAnimation, disableHoverAnimation = _e === void 0 ? false : _e, onClick = _a.onClick, alt = _a.alt, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.borderThick, borderThick = _g === void 0 ? false : _g;
+    var _h = useState(false), imageError = _h[0], setImageError = _h[1];
+    var hasValidSrc = src && src.trim() !== "";
+    var shouldShowInitials = !hasValidSrc || imageError;
+    var backgroundColor = generateBackgroundColor(firstName, name);
+    var initials = generateInitials(firstName, name);
+    var displayAlt = alt || "".concat(firstName, " ").concat(name);
+    var ariaLabel = "".concat(firstName, " ").concat(name).concat(isSelected ? ", sélectionné(e)" : "");
+    var handleImageError = useCallback(function () {
+        setImageError(true);
+    }, []);
+    var handleClick = useCallback(function () {
+        if (!disabled && onClick) {
+            onClick();
+        }
+    }, [disabled, onClick]);
+    var handleKeyDown = useCallback(function (event) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleClick();
+        }
+    }, [handleClick]);
+    var containerStyle = {
+        width: "".concat(size, "px"),
+        height: "".concat(size, "px"),
+    };
+    var initialsStyle = {
+        backgroundColor: backgroundColor,
+        fontSize: "".concat(Math.max(12, size * 0.4), "px"),
+    };
+    return (React.createElement("div", { className: "".concat(styles.avatarBubble, " ").concat(className, " ") +
+            (borderThick
+                ? isSelected
+                    ? styles.selectedThick
+                    : styles.thick
+                : isSelected
+                    ? styles.selectedThin
+                    : styles.thin), style: containerStyle, role: "button", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: handleKeyDown, "data-selected": isSelected, "data-disabled": disabled, "data-disable-hover-animation": disableHoverAnimation }, shouldShowInitials ? (React.createElement("div", { className: styles.initials, style: initialsStyle, "aria-label": displayAlt }, initials)) : (React.createElement("div", { className: styles.imageContainer },
+        React.createElement(Image, { src: src, alt: displayAlt, width: size, height: size, className: styles.image, onError: handleImageError, onLoad: function () { return setImageError(false); }, style: {
+                objectFit: "cover",
+                width: "100%",
+                height: "100%",
+                borderRadius: "50%",
+            } })))));
+};
+export default AvatarBubble;

package/dist/components/molecules/proSwitch/AvatarBubble.stories.d.ts

@@ -0,0 +1,93 @@
+declare namespace _default {
+    export let title: string;
+    export { AvatarBubble as component };
+    export let tags: string[];
+    export namespace argTypes {
+        namespace firstName {
+            let control: string;
+            let description: string;
+        }
+        namespace name {
+            let control_1: string;
+            export { control_1 as control };
+            let description_1: string;
+            export { description_1 as description };
+        }
+        namespace src {
+            let control_2: string;
+            export { control_2 as control };
+            let description_2: string;
+            export { description_2 as description };
+        }
+        namespace size {
+            export namespace control_3 {
+                let type: string;
+                let min: number;
+                let max: number;
+                let step: number;
+            }
+            export { control_3 as control };
+            let description_3: string;
+            export { description_3 as description };
+        }
+        namespace isSelected {
+            let control_4: string;
+            export { control_4 as control };
+            let description_4: string;
+            export { description_4 as description };
+        }
+        namespace disabled {
+            let control_5: string;
+            export { control_5 as control };
+            let description_5: string;
+            export { description_5 as description };
+        }
+        namespace disableHoverAnimation {
+            let control_6: string;
+            export { control_6 as control };
+            let description_6: string;
+            export { description_6 as description };
+        }
+        namespace borderThick {
+            let control_7: string;
+            export { control_7 as control };
+            let description_7: string;
+            export { description_7 as description };
+        }
+        namespace onClick {
+            export let action: string;
+            let description_8: string;
+            export { description_8 as description };
+        }
+        namespace alt {
+            let control_8: string;
+            export { control_8 as control };
+            let description_9: string;
+            export { description_9 as description };
+        }
+    }
+    export namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+            export let values: {
+                name: string;
+                value: string;
+            }[];
+        }
+    }
+}
+export default _default;
+export const Default: any;
+export const WithInitials: any;
+export const Selected: any;
+export const Disabled: any;
+export const Small: any;
+export const Large: any;
+export const WithoutHoverAnimation: any;
+export const SelectedWithoutHoverAnimation: any;
+export function MultipleSizes(): React.JSX.Element;
+export function ColorVariations(): React.JSX.Element;
+export function HoverAnimationComparison(): React.JSX.Element;
+import AvatarBubble from "./AvatarBubble";
+import React from "react";

package/dist/components/molecules/proSwitch/AvatarBubble.stories.js

@@ -0,0 +1,215 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState } from "react";
+import { action } from "@storybook/addon-actions";
+import AvatarBubble from "./AvatarBubble";
+import "../../../styles/global.css";
+export default {
+    title: "Components/Molecules/ProSwitch/AvatarBubble",
+    component: AvatarBubble,
+    tags: ["autodocs"],
+    argTypes: {
+        firstName: {
+            control: "text",
+            description: "Prénom de la personne",
+        },
+        name: {
+            control: "text",
+            description: "Nom de famille de la personne",
+        },
+        src: {
+            control: "text",
+            description: "URL de l'image de profil (optionnel)",
+        },
+        size: {
+            control: { type: "number", min: 20, max: 100, step: 0.5 },
+            description: "Taille de l'avatar en pixels (défaut: 42.5)",
+        },
+        isSelected: {
+            control: "boolean",
+            description: "État sélectionné avec anneau bleu",
+        },
+        disabled: {
+            control: "boolean",
+            description: "État désactivé (grisé)",
+        },
+        disableHoverAnimation: {
+            control: "boolean",
+            description: "Désactive l'animation au hover (translateY)",
+        },
+        borderThick: {
+            control: "boolean",
+            description: "Bordure épaisse (4px) autour de l'avatar si true, 2px sinon (défaut)",
+        },
+        onClick: {
+            action: "clicked",
+            description: "Callback appelé au clic",
+        },
+        alt: {
+            control: "text",
+            description: "Texte alternatif pour l'accessibilité",
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "#ffffff" },
+                { name: "grey", value: "#728ea7" },
+                { name: "figma", value: "#404040" },
+                { name: "dark", value: "#171e25" },
+            ],
+        },
+    },
+};
+var Template = function (args) {
+    var _a = useState(args.isSelected || false), selected = _a[0], setSelected = _a[1];
+    var handleClick = function () {
+        setSelected(!selected);
+        action("Avatar clicked")(args);
+    };
+    return (React.createElement("div", { style: { padding: "20px" } },
+        React.createElement(AvatarBubble, __assign({}, args, { isSelected: selected, onClick: handleClick }))));
+};
+export var Default = Template.bind({});
+Default.args = {
+    firstName: "Jean",
+    name: "Dupont",
+    src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
+    size: 42.5,
+    isSelected: false,
+    disabled: false,
+    disableHoverAnimation: false,
+    borderThick: false,
+};
+export var WithInitials = Template.bind({});
+WithInitials.args = {
+    firstName: "Marie",
+    name: "Martin",
+    src: "", // Pas d'image pour forcer l'affichage des initiales
+    size: 42.5,
+    isSelected: false,
+    disabled: false,
+    disableHoverAnimation: false,
+    borderThick: false,
+};
+export var Selected = Template.bind({});
+Selected.args = {
+    firstName: "Pierre",
+    name: "Durand",
+    src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
+    size: 42.5,
+    isSelected: true,
+    disabled: false,
+    disableHoverAnimation: false,
+    borderThick: false,
+};
+export var Disabled = Template.bind({});
+Disabled.args = {
+    firstName: "Sophie",
+    name: "Bernard",
+    src: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
+    size: 42.5,
+    isSelected: false,
+    disabled: true,
+    disableHoverAnimation: false,
+    borderThick: false,
+};
+export var Small = Template.bind({});
+Small.args = {
+    firstName: "Lucas",
+    name: "Petit",
+    src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&h=150&fit=crop&crop=face",
+    size: 32,
+    isSelected: false,
+    disabled: false,
+    disableHoverAnimation: false,
+    borderThick: false,
+};
+export var Large = Template.bind({});
+Large.args = {
+    firstName: "Emma",
+    name: "Rousseau",
+    src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face",
+    size: 56,
+    isSelected: false,
+    disabled: false,
+    disableHoverAnimation: false,
+    borderThick: false,
+};
+export var WithoutHoverAnimation = Template.bind({});
+WithoutHoverAnimation.args = {
+    firstName: "Thomas",
+    name: "Leroy",
+    src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
+    size: 42.5,
+    isSelected: false,
+    disabled: false,
+    disableHoverAnimation: true,
+    borderThick: false,
+};
+export var SelectedWithoutHoverAnimation = Template.bind({});
+SelectedWithoutHoverAnimation.args = {
+    firstName: "Julie",
+    name: "Moreau",
+    src: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
+    size: 42.5,
+    isSelected: true,
+    disabled: false,
+    disableHoverAnimation: true,
+    borderThick: false,
+};
+export var MultipleSizes = function () {
+    var _a = useState(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
+    var avatars = [
+        { firstName: "Alice", name: "Dubois", size: 32 },
+        { firstName: "Bob", name: "Moreau", size: 42.5 },
+        { firstName: "Claire", name: "Simon", size: 56 },
+    ];
+    return (React.createElement("div", { style: {
+            padding: "20px",
+            display: "flex",
+            gap: "20px",
+            alignItems: "center",
+        } }, avatars.map(function (avatar, index) { return (React.createElement(AvatarBubble, { key: index, firstName: avatar.firstName, name: avatar.name, size: avatar.size, isSelected: selectedIndex === index, onClick: function () { return setSelectedIndex(index); } })); })));
+};
+export var ColorVariations = function () {
+    var names = [
+        { firstName: "Alice", name: "Dubois" },
+        { firstName: "Bob", name: "Moreau" },
+        { firstName: "Claire", name: "Simon" },
+        { firstName: "David", name: "Michel" },
+        { firstName: "Emma", name: "Rousseau" },
+        { firstName: "François", name: "Leroy" },
+    ];
+    return (React.createElement("div", { style: {
+            padding: "20px",
+            display: "flex",
+            gap: "10px",
+            flexWrap: "wrap",
+        } }, names.map(function (name, index) { return (React.createElement(AvatarBubble, { key: index, firstName: name.firstName, name: name.name, size: 42.5, onClick: function () { return action("Clicked ".concat(name.firstName, " ").concat(name.name))(); } })); })));
+};
+export var HoverAnimationComparison = function () {
+    var _a = useState(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
+    return (React.createElement("div", { style: {
+            padding: "20px",
+            display: "flex",
+            gap: "20px",
+            alignItems: "center",
+        } },
+        React.createElement("div", { style: { textAlign: "center" } },
+            React.createElement("h4", { style: { marginBottom: "10px" } }, "Avec animation"),
+            React.createElement(AvatarBubble, { firstName: "Jean", name: "Dupont", src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 0, onClick: function () { return setSelectedIndex(0); } })),
+        React.createElement("div", { style: { textAlign: "center" } },
+            React.createElement("h4", { style: { marginBottom: "10px" } }, "Sans animation"),
+            React.createElement(AvatarBubble, { firstName: "Marie", name: "Martin", src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face", size: 42.5, isSelected: selectedIndex === 1, onClick: function () { return setSelectedIndex(1); }, disableHoverAnimation: true }))));
+};

package/dist/components/molecules/proSwitch/AvatarToggleGroup.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface Pro {
+    token: string;
+    proUserId: string;
+    name: string;
+    firstName: string;
+    profilePictureLink: string;
+    profession?: string;
+}
+export interface AvatarToggleGroupProps {
+    pros: Pro[];
+    mode: "single" | "multiple";
+    selected: string[];
+    onSelect: (selectedPros: Pro[]) => void;
+    maxVisible?: number;
+    disabled?: boolean;
+    onOpenPortal?: () => void;
+    className?: string;
+}
+declare const AvatarToggleGroup: React.FC<AvatarToggleGroupProps>;
+export default AvatarToggleGroup;