allaw-ui 0.0.19 → 0.0.35

package/README.md

@@ -15,6 +15,21 @@ Importez les composants dont vous avez besoin dans votre application React.
 - Button
 - Icon
 - Tag
+- EmployeeCard
+- CaseCard
+- DocumentCard
+- ContactCard
+- Stepper
+- ProgressBar
+- Input
+- SearchBar
+- Typography (Heading, Subtitle, Paragraph, TinyInfo, SmallTitle)
+- AppointementStatusTag
+- FolderStatusTag
+- PendingDocuments
+- ActionCircleButton
+- GhostButton
+- Checkbox
 
 Pour une documentation complète de chaque composant, veuillez consulter notre Storybook.
 
@@ -28,7 +43,7 @@ Pour une documentation complète de chaque composant, veuillez consulter notre S
 
 ### Installation des dépendances
 
-npm install
+    npm install
 
 Storybook sera disponible à l'adresse [http://localhost:6006](http://localhost:6006).
 
@@ -36,9 +51,9 @@ Storybook sera disponible à l'adresse [http://localhost:6006](http://localhost:
 
 import "../node_modules/allaw-ui/dist/styles/colors.css";
 
-<div className={styles.testCouleur}>
-Test couleur variable --bleu-allaw
-</div>
+    <div className={styles.testCouleur}>
+    Test couleur variable --bleu-allaw
+    </div>
 
 Fichier page.modules.css :
 .testCouleur {
@@ -47,9 +62,9 @@ color: var(--bleu-allaw);
 
 ### Utilisation des Boutons
 
-import { Button } from "allaw-ui";
+    import PrimaryButton from "allaw-ui/dist/components/atoms/buttons/PrimaryButton";
 
-        <Button
+    <Button
           label="click me"
           startIcon="allaw-icon-arrow-right"
           endIcon="allaw-icon-arrow-left"
@@ -57,15 +72,20 @@ import { Button } from "allaw-ui";
 
 ### Utilisation des Tags
 
-import { Tag } from "allaw-ui";
-
-<Tag status="passed" variant="big" />
+    import { Tag } from "allaw-ui";
+    <Tag status="passed" variant="big" />
 
 ### Build
 
 Pour construire la bibliothèque :
 
-npm run build
+    npm run build
+
+### Storybook
+
+Pour lancer Storybook en mode développement :
+
+    npm run build-storybook
 
 ## Contribution
 

package/dist/app/globals.css

@@ -0,0 +1,5 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}

package/dist/assets/NoPhoto.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2415 5113 c-534 -33 -1032 -223 -1444 -551 -919 -730 -1223 -1988
+-739 -3059 135 -298 363 -612 601 -826 l78 -70 27 21 c38 30 165 103 547 310
+182 99 349 196 372 216 23 20 54 62 70 94 27 55 28 62 31 248 l4 191 -46 63
+c-97 131 -197 334 -242 489 -20 68 -33 94 -63 126 -75 78 -76 81 -76 355 0
+261 2 276 55 335 17 18 19 50 23 355 4 376 7 393 78 539 121 246 391 381 799
+398 466 19 805 -125 940 -400 71 -145 73 -160 71 -532 -2 -328 -2 -331 19
+-350 12 -11 32 -38 44 -60 20 -38 21 -54 21 -285 0 -233 -1 -247 -22 -286 -25
+-47 -82 -101 -128 -120 -26 -10 -34 -23 -49 -71 -29 -97 -162 -352 -236 -455
+l-70 -97 0 -189 c0 -221 8 -255 78 -333 42 -47 79 -67 486 -271 243 -121 467
+-238 499 -259 l58 -40 66 58 c173 152 366 388 494 605 329 554 434 1223 293
+1858 -191 859 -820 1565 -1653 1854 -311 108 -671 159 -986 139z"/>
+</g>
+</svg>

package/dist/assets/allaw-font.svg

@@ -7,8 +7,8 @@
 {
 	"fontFamily": "allaw-font",
 	"majorVersion": 1,
-	"minorVersion": 1,
-	"version": "Version 1.1",
+	"minorVersion": 3,
+	"version": "Version 1.3",
 	"fontId": "allaw-font",
 	"psName": "allaw-font",
 	"subFamily": "Regular",
@@ -97,4 +97,10 @@
 <glyph unicode="&#xe947;" glyph-name="micOutline" data-tags="micOutline" d="M485.803 925.909c-59.872-10.823-107.673-53.325-125.927-109.19l-0.324-1.146c-8.021-25.387-8.192-30.464-7.552-232.747 0.555-177.963 0.811-191.061 3.712-202.197 15.36-58.411 56.363-101.888 111.019-117.76 13.452-4.073 28.912-6.417 44.92-6.417 68.519 0 127.005 42.956 149.998 103.406l0.368 1.102c9.899 26.795 9.344 14.933 9.984 221.867 0.427 131.712 0 194.688-1.28 204.587-4.676 36.561-21.192 68.599-45.518 92.793l-0.007 0.007c-11.818 12.248-25.672 22.435-41.034 30.034l-0.865 0.387c-22.101 11.221-39.509 15.445-66.176 16.171-2.731 0.117-5.935 0.184-9.154 0.184-7.805 0-15.518-0.392-23.121-1.158l0.958 0.078zM541.099 859.264c30.336-8.832 59.051-40.491 64.768-71.424 2.219-11.989 2.304-378.837 0.128-390.443-7.233-33.917-31.28-60.917-62.805-72.192l-0.683-0.213c-9.235-2.77-19.848-4.364-30.833-4.364-10.544 0-20.745 1.469-30.409 4.213l0.783-0.19c-22.528 7.083-45.483 27.136-56.235 49.109-9.685 19.84-9.387 12.715-9.387 216.875 0 117.248 0.64 191.445 1.707 197.205 4.053 21.973 21.717 47.317 42.667 61.269 21.888 14.549 52.053 18.347 80.299 10.155zM239.488 506.837c-4.424-2.828-8.117-6.385-11.010-10.541l-0.083-0.126c-3.925-6.272-3.968-6.997-3.925-55.851 0.043-50.944 1.28-65.536 7.808-92.16 23.787-94.697 91.918-169.597 180.483-202.36l2.002-0.648c15.486-5.566 33.995-10.372 53.054-13.556l1.943-0.268 9.813-1.152v-98.475l-139.648-0.981-6.528-5.291c-9.344-7.552-13.013-14.677-13.013-25.173 0-13.312 8.064-25.6 19.797-29.995 3.243-1.237 57.984-1.835 171.989-1.835 138.155 0 168.149 0.427 172.672 2.347 13.013 5.589 21.12 21.803 17.963 35.968-1.963 8.832-4.864 13.184-12.715 19.157l-6.315 4.821-139.349 0.981v98.475l9.813 1.152c21.002 3.452 39.511 8.258 57.325 14.539l-2.328-0.715c80.558 29.644 143.020 91.883 172.319 170.297l0.652 1.991c14.464 40.107 17.28 60.203 17.323 122.88 0.043 48.939 0 49.579-3.925 55.893-12.331 19.84-42.88 19.84-55.211 0-3.883-6.229-4.011-7.723-4.949-58.453-0.768-40.32-1.664-55.125-3.968-65.707-8.661-39.723-25.131-73.173-50.389-102.4-74.027-85.76-199.211-102.485-294.272-39.339-38.315 25.472-71.765 69.163-86.229 112.725-9.899 29.781-10.965 38.4-12.032 94.72-0.939 50.731-1.067 52.224-4.949 58.453-6.014 9.068-16.177 14.964-27.718 14.964-6.032 0-11.687-1.611-16.56-4.426l0.16 0.085z" />
 <glyph unicode="&#xe948;" glyph-name="presIcon" data-tags="presIcon" d="M89.344 862.805c-14.295-3.097-24.847-15.637-24.847-30.642 0-6.201 1.802-11.981 4.911-16.844l-0.075 0.126c7.552-12.117 14.421-14.891 38.571-15.573l20.011-0.597 0.512-234.923c0.469-220.331 0.725-235.605 3.584-245.205 12.421-42.857 44.917-76.141 86.365-89.427l0.931-0.258c10.624-3.456 16.213-4.011 50.048-4.651 27.776-0.512 37.888-1.237 37.333-2.688-9.984-26.923-50.688-154.027-50.645-158.251 0.085-13.568 10.752-27.051 24.363-30.763 12.843-3.499 28.971 3.157 34.773 14.379 1.536 2.987 6.016 15.019 9.941 26.752l7.125 21.333h359.424l7.979-23.424c8.405-24.704 11.819-30.080 22.613-35.627 3.914-1.937 8.522-3.070 13.395-3.070 9.089 0 17.258 3.942 22.889 10.209l0.025 0.028c5.268 5.959 8.719 13.635 9.42 22.091l0.009 0.139c0 2.091-46.123 144.299-50.56 155.861-0.725 1.877 6.059 2.432 37.205 3.029 33.749 0.64 39.467 1.195 50.048 4.608 42.343 13.628 74.81 46.897 87.062 88.795l0.234 0.933c2.859 9.6 3.115 24.875 3.584 245.205l0.512 234.923 20.011 0.597c24.149 0.683 31.019 3.456 38.571 15.573 3.064 4.726 4.885 10.505 4.885 16.709 0 11.627-6.398 21.761-15.865 27.071l-0.156 0.081-7.424 4.267-420.693 0.256c-231.381 0.128-423.125-0.299-426.069-1.024zM718.507 663.808c10.251-5.505 17.102-16.151 17.102-28.398 0-5.913-1.598-11.453-4.385-16.212l0.082 0.152c-3.371-5.717-8.405-9.856-23.467-19.243-52.139-32.512-94.037-70.912-132.736-121.557-16.427-21.547-22.101-25.728-34.773-25.728-13.525 0-18.731 3.84-56.363 41.216l-35.968 35.755-54.741-54.528c-35.627-35.499-56.875-55.381-60.928-57.088-3.763-1.728-8.164-2.736-12.801-2.736-9.509 0-18.028 4.238-23.772 10.929l-0.035 0.042c-5.589 6.357-9.771 17.792-8.405 22.955 0.427 1.579 1.28 5.205 1.92 8.021 0.811 3.755 19.328 23.424 70.571 74.795 38.187 38.315 71.723 70.869 74.496 72.363 6.784 3.584 20.864 3.413 28.245-0.384 3.243-1.664 21.291-18.261 40.107-36.864l34.133-33.835 8.533 10.539c13.696 16.981 51.371 53.845 71.637 70.059 29.995 24.021 69.632 50.005 80 52.48 1.972 0.392 4.239 0.616 6.558 0.616 5.443 0 10.598-1.234 15.201-3.438l-0.212 0.092zM659.072 193.749c5.461-16.427 9.941-30.805 9.941-32 0-1.749-31.232-2.176-157.739-2.176h-157.739l10.112 30.293c5.547 16.64 10.453 31.275 10.923 32.427 0.64 1.707 29.056 2.048 137.643 1.707l136.875-0.427 9.984-29.824z" />
 <glyph unicode="&#xe949;" glyph-name="presIconOutline" data-tags="presIconOutline" d="M88.875 863.189c-7.467-1.408-17.067-8.875-20.779-16.128-2.193-4.311-3.478-9.402-3.478-14.793 0-11.633 5.984-21.869 15.042-27.796l0.127-0.078c5.589-3.456 8.96-4.053 27.264-4.565l20.864-0.597 0.939-471.552 4.053-11.947c8.661-25.685 22.4-46.336 41.045-61.739 14.421-11.947 25.003-17.92 41.941-23.808 13.056-4.565 15.317-4.779 52.608-5.419 28.459-0.469 38.741-1.195 38.187-2.645-10.539-28.459-50.688-154.112-50.688-158.72 0-13.141 10.837-26.581 24.405-30.293 12.843-3.499 28.971 3.157 34.773 14.379 1.536 2.987 6.016 15.019 9.941 26.752l7.125 21.333h359.509l7.125-21.333c3.925-11.733 8.405-23.765 9.941-26.752 5.803-11.221 21.931-17.877 34.773-14.379 13.568 3.712 24.405 17.152 24.405 30.293 0 4.608-40.149 130.261-50.688 158.72-0.555 1.451 9.728 2.176 38.187 2.645 37.248 0.64 39.552 0.896 52.608 5.376 39.723 13.781 69.077 43.989 83.029 85.589l4.011 11.947 0.939 471.552 20.864 0.597c18.304 0.512 21.675 1.109 27.264 4.565 9.175 5.743 15.186 15.795 15.186 27.251 0 11.736-6.309 21.998-15.721 27.58l-0.148 0.081-7.424 4.267-421.547 0.213c-231.851 0.085-423.381-0.171-425.685-0.597zM830.72 567.040l-0.427-232.533-4.395-9.387c-9.042-17.976-25.456-31.113-45.165-35.542l-0.446-0.084c-12.843-2.731-523.733-2.731-536.576 0-20.154 4.513-36.569 17.651-45.436 35.243l-0.175 0.383-4.395 9.387-0.427 232.533-0.469 232.533h638.379l-0.469-232.533zM697.899 666.411c-10.923-1.835-51.968-28.715-85.205-55.723-18.219-14.805-54.485-50.688-67.371-66.688l-8.533-10.539-34.133 33.835c-18.816 18.603-36.864 35.2-40.107 36.864-4.31 1.864-9.328 2.948-14.6 2.948-5.233 0-10.216-1.068-14.744-2.998l0.246 0.093c-6.571-3.328-132.309-127.701-139.349-137.899-3.424-5.43-5.456-12.037-5.456-19.118 0-3.555 0.512-6.991 1.467-10.237l-0.065 0.256c4.139-12.587 21.931-23.339 34.645-20.949 10.453 1.92 19.968 10.197 72.064 62.336l51.157 51.243 35.883-35.584c19.712-19.541 38.443-36.864 41.515-38.443 4.167-1.809 9.021-2.862 14.121-2.862 5.363 0 10.454 1.164 15.034 3.253l-0.227-0.093c4.267 2.176 11.093 9.472 20.48 21.931 36.456 48.658 80.549 89.3 130.896 120.893l2.010 1.177c20.736 12.928 25.899 18.645 27.477 30.464 1.365 10.069-0.853 18.261-6.656 24.875-5.668 7.128-14.34 11.657-24.070 11.657-2.296 0-4.532-0.252-6.684-0.73l0.204 0.038zM659.072 193.749c5.461-16.427 9.941-30.805 9.941-32 0-1.749-31.104-2.176-157.013-2.176-126.677 0-157.013 0.427-157.013 2.176 0 1.707 15.573 49.835 19.584 60.544 0.64 1.707 29.056 2.048 137.643 1.707l136.875-0.427 9.984-29.824z" />
+<glyph unicode="&#xe94a;" d="M1011.798 438.421c0 41.953-3.404 72.567-10.772 104.315h-479.060v-189.354h281.197c-5.667-47.057-36.282-117.924-104.315-165.544l-0.954-6.339 151.47-117.342 10.494-1.047c96.377 89.010 151.939 219.972 151.939 375.312z" />
+<glyph unicode="&#xe94b;" d="M521.966-60.482c137.763 0 253.417 45.357 337.893 123.591l-161.010 124.729c-43.086-30.048-100.915-51.024-176.882-51.024-134.93 0-249.45 89.006-290.273 212.031l-5.984-0.508-157.501-121.891-2.060-5.726c83.905-166.677 256.254-281.201 455.817-281.201z" />
+<glyph unicode="&#xe94c;" d="M231.694 348.844c-10.772 31.748-17.005 65.767-17.005 100.915 0 35.152 6.234 69.167 16.439 100.915l-0.285 6.762-159.474 123.849-5.218-2.482c-34.581-69.167-54.424-146.838-54.424-229.044s19.843-159.873 54.424-229.040l165.544 128.125z" />
+<glyph unicode="&#xe94d;" d="M521.966 762.708c95.81 0 160.44-41.386 197.292-75.971l144.001 140.601c-88.439 82.205-203.53 132.663-341.293 132.663-199.563 0-371.911-114.52-455.817-281.197l164.977-128.129c41.39 123.025 155.91 212.034 290.839 212.034z" />
+<glyph unicode="&#xe94e;" glyph-name="apple" data-tags="apple" d="M798.293 128c-35.413-52.907-72.96-104.533-130.133-105.387-57.173-1.28-75.52 33.707-140.373 33.707-65.28 0-85.333-32.853-139.521-34.987-55.893-2.133-98.133 56.32-133.973 107.947-72.96 105.387-128.853 299.52-53.76 430.080 37.12 64.853 103.68 105.813 175.787 107.093 54.615 0.853 106.668-37.12 140.375-37.12 33.28 0 96.427 45.653 162.56 38.827 27.733-1.28 105.387-11.093 155.307-84.48-3.84-2.56-92.587-54.613-91.733-162.56 1.28-128.853 113.067-171.947 114.347-172.373-1.28-2.987-17.92-61.44-58.88-120.747zM554.667 810.667c31.147 35.413 82.773 62.293 125.44 64 5.547-49.92-14.507-100.267-44.373-136.107-29.44-36.267-78.080-64.427-125.867-60.587-6.4 49.067 17.493 100.267 44.8 132.693z" />
+<glyph unicode="&#xe94f;" glyph-name="linkedin" data-tags="linkedin" d="M1024-64h-204.8v358.349c0 98.304-43.366 153.139-121.139 153.139-84.634 0-134.861-57.139-134.861-153.139v-358.349h-204.8v665.6h204.8v-74.854c0 0 64.256 112.742 209.050 112.742 144.845 0 251.75-88.371 251.75-271.258v-432.23zM125.030 708.045c-69.069 0-125.030 56.422-125.030 126.003 0 69.53 55.962 125.952 125.030 125.952 69.018 0 124.979-56.422 124.979-125.952 0.051-69.581-55.962-126.003-124.979-126.003v0zM0-64h256v665.6h-256v-665.6z" />
 </font></defs></svg>

package/dist/components/atoms/buttons/ActionCircleButton.css

@@ -0,0 +1,143 @@
+.approved-circle {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  border: 1px solid var(--Tags-Vert, #29a36a);
+  background: var(--tag-green-light, #daf6e9);
+  cursor: pointer;
+}
+
+.approved-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: var(--Tags-Vert, #29a36a);
+  font-size: 14px;
+  transition: transform 0.15s ease;
+}
+
+.approved-circle:hover .approved-icon {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.approved-circle:active .approved-icon {
+  transform: scale(1.2);
+  transform-origin: center;
+}
+
+/* Styles pour le bouton rejeté */
+.rejected-circle {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  border: 1px solid var(--red-tag-dark, #e15151);
+  background: var(--red-tag-light, #fdf2f2);
+  cursor: pointer;
+}
+
+.rejected-icon {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: var(--red-tag-dark, #e15151);
+  font-size: 9px;
+  transition: transform 0.15s ease;
+}
+
+.rejected-circle:hover .rejected-icon {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.rejected-circle:active .rejected-icon {
+  transform: scale(1.2);
+  transform-origin: center;
+}
+
+/* Styles pour le bouton dual */
+.dual-button {
+  display: flex;
+  height: 32px;
+  width: 64px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background: var(--secondary-light-grey, #f4f7fb);
+}
+
+.dual-rejected-icon {
+  width: 24px;
+  height: 24px;
+  color: #e15151;
+  background: none;
+  font-size: 9px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-right: 4px;
+  transition: transform 0.15s ease;
+}
+
+.dual-rejected-icon:hover {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.dual-rejected-icon:active {
+  transform: scale(1.2);
+  transform-origin: center;
+}
+
+.separator {
+  width: 1px;
+  height: 18px;
+  background-color: var(--light-grey, #728ea7);
+  opacity: 0.4;
+}
+
+.dual-approved-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--Tags-Vert, #29a36a);
+  background: none;
+  padding-left: 4px;
+  transition: transform 0.15s ease;
+}
+
+.dual-approved-icon:hover {
+  transform: scale(1.1);
+  transform-origin: center;
+  cursor: pointer;
+}
+
+.dual-approved-icon:active {
+  transform: scale(1.2);
+  transform-origin: center;
+}

package/dist/components/atoms/buttons/ActionCircleButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./ActionCircleButton.css";
+interface ActionCircleButtonProps {
+    status: "approved" | "rejected" | "dual";
+    onApprove?: () => void;
+    onReject?: () => void;
+}
+declare const ActionCircleButton: React.FC<ActionCircleButtonProps>;
+export default ActionCircleButton;

package/dist/components/atoms/buttons/ActionCircleButton.js

@@ -0,0 +1,23 @@
+import React from "react";
+import "./ActionCircleButton.css";
+var ActionCircleButton = function (_a) {
+    var status = _a.status, onApprove = _a.onApprove, onReject = _a.onReject;
+    if (status === "approved") {
+        return (React.createElement("button", { className: "approved-circle", onClick: onApprove },
+            React.createElement("span", { className: "allaw-icon-check approved-icon" })));
+    }
+    if (status === "rejected") {
+        return (React.createElement("button", { className: "rejected-circle", onClick: onReject },
+            React.createElement("span", { className: "allaw-icon-close rejected-icon" })));
+    }
+    if (status === "dual") {
+        return (React.createElement("div", { className: "dual-button" },
+            React.createElement("button", { className: "dual-rejected-icon", onClick: onReject },
+                React.createElement("span", { className: "allaw-icon-close" })),
+            React.createElement("span", { className: "separator" }),
+            React.createElement("button", { className: "dual-approved-icon", onClick: onApprove },
+                React.createElement("span", { className: "allaw-icon-check" }))));
+    }
+    return null;
+};
+export default ActionCircleButton;

package/dist/components/atoms/buttons/AgendaSlot.css

@@ -0,0 +1,116 @@
+.agenda-slot {
+  display: flex;
+  width: 149.333px;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  text-align: center;
+}
+
+.agenda-slot.pro {
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.agenda-slot.pro:hover {
+  background: #cfdeec;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.agenda-slot.pro:active {
+  background: #cfdeec;
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+}
+
+.agenda-slot.pro.disabled {
+  background: var(--venom-grey, #e6edf5);
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-weight: 700;
+  cursor: not-allowed;
+}
+
+.agenda-slot.hybride {
+  width: 104px;
+  height: 48px;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.agenda-slot.hybride:active {
+  background: var(--tag-blue, #1985e8);
+  color: var(--Tags-Bleu-clair, var(--tag-blue-light, #daebfb));
+}
+
+.agenda-slot.hybride.disabled {
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: #bfd5e9;
+  cursor: not-allowed;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.agenda-slot.user {
+  width: 64px;
+  height: 40px;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  background: var(--tag-blue-light, #daebfb);
+  color: var(--Tags-Bleu-fonc, var(--tag-blue, #1985e8));
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 21px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.agenda-slot.user:active {
+  background: var(--tag-blue, #1985e8);
+  color: var(--Tags-Bleu-clair, var(--tag-blue-light, #daebfb));
+}
+
+.agenda-slot.user.disabled {
+  background: var(--secondary-light-grey, #f4f7fb);
+  color: var(--Tags-Mid-grey, var(--light-grey, #728ea7));
+  cursor: not-allowed;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 21px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.agenda-slot.disabled {
+  background-color: var(--disabled-bg, #e0e0e0);
+  color: #a0a0a0;
+  cursor: not-allowed;
+}

package/dist/components/atoms/buttons/AgendaSlot.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./AgendaSlot.css";
+interface AgendaSlotProps {
+    time: string;
+    appearance: "pro" | "hybride" | "user";
+    isDisabled?: boolean;
+    onClick?: () => void;
+}
+declare const AgendaSlot: React.FC<AgendaSlotProps>;
+export default AgendaSlot;

package/dist/components/atoms/buttons/AgendaSlot.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./AgendaSlot.css";
+var AgendaSlot = function (_a) {
+    var time = _a.time, appearance = _a.appearance, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick;
+    return (React.createElement("div", { className: "agenda-slot ".concat(appearance, " ").concat(isDisabled ? "disabled" : ""), onClick: !isDisabled ? onClick : undefined }, time));
+};
+export default AgendaSlot;

package/dist/components/atoms/buttons/FavoriteToggle.css

@@ -0,0 +1,35 @@
+@import "../../../styles/colors.css";
+
+.favorite-toggle {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.favorite-toggle .icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  font-size: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.15s ease;
+}
+
+.favorite-toggle .icon.favorite {
+  color: #fcc812;
+}
+
+.favorite-toggle .icon.not-favorite {
+  color: #000000;
+}
+
+.favorite-toggle .icon:active {
+  transform: scale(1.05);
+}

package/dist/components/atoms/buttons/FavoriteToggle.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./FavoriteToggle.css";
+export interface FavoriteToggleProps {
+    isFavorite: boolean;
+    onToggle: (isFavorite: boolean) => void;
+}
+declare const FavoriteToggle: React.FC<FavoriteToggleProps>;
+export default FavoriteToggle;

package/dist/components/atoms/buttons/FavoriteToggle.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./FavoriteToggle.css";
+var FavoriteToggle = function (_a) {
+    var isFavorite = _a.isFavorite, onToggle = _a.onToggle;
+    var handleToggle = function () {
+        onToggle(!isFavorite);
+    };
+    return (React.createElement("div", { className: "favorite-toggle", onClick: handleToggle },
+        React.createElement("i", { className: "icon ".concat(isFavorite ? "favorite allaw-icon-star-fill" : "not-favorite allaw-icon-star-unfill") })));
+};
+export default FavoriteToggle;

package/dist/components/atoms/buttons/FilterButton.css

@@ -0,0 +1,55 @@
+@import "../../../styles/colors.css";
+
+/* Styles pour le bouton actif */
+.filter-button-active {
+  display: inline-flex;
+  height: 35px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 56px;
+  background: var(--dark-grey, #456073);
+}
+
+.filter-button-active .filter-button-label {
+  color: var(--Primary-Blanc, #fff);
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+/* Styles pour le bouton inactif */
+.filter-button-inactive {
+  display: inline-flex;
+  height: 35px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  border-radius: 56px;
+  border: 1px solid var(--venom-grey, #e6edf5);
+  background: var(--secondary-light-grey, #f4f7fb);
+}
+
+.filter-button-inactive:hover {
+  background: var(--grey-venom, #e6edf5);
+  cursor: pointer;
+}
+
+.filter-button-inactive:active {
+  background: #d8e1eb;
+}
+
+.filter-button-inactive .filter-button-label {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}

package/dist/components/atoms/buttons/FilterButton.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./FilterButton.css";
+import "../../../styles/global.css";
+export interface FilterButtonProps {
+    label: string;
+    isActive: boolean;
+}
+declare const FilterButton: React.FC<FilterButtonProps>;
+export default FilterButton;

package/dist/components/atoms/buttons/FilterButton.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./FilterButton.css";
+import "../../../styles/global.css";
+var FilterButton = function (_a) {
+    var label = _a.label, isActive = _a.isActive;
+    return (React.createElement("button", { className: "filter-button ".concat(isActive ? "filter-button-active" : "filter-button-inactive") },
+        React.createElement("span", { className: "filter-button-label" }, label)));
+};
+export default FilterButton;

package/dist/components/atoms/buttons/FilterButtonPrimary.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type FilterButtonPrimaryProps = {
+    onClick: any;
+    zIndex?: string;
+    children: any;
+    props?: any;
+};
+declare function FilterButtonPrimary({ onClick, zIndex, children, ...props }: FilterButtonPrimaryProps | any): React.JSX.Element;
+export default FilterButtonPrimary;

package/dist/components/atoms/buttons/FilterButtonPrimary.js

@@ -0,0 +1,46 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+function FilterButtonPrimary(_a) {
+    var onClick = _a.onClick, _b = _a.zIndex, zIndex = _b === void 0 ? "100" : _b, children = _a.children, props = __rest(_a, ["onClick", "zIndex", "children"]);
+    return (React.createElement("button", __assign({ style: {
+            fontWeight: "600",
+            backgroundColor: "var(--primary-light-grey, #F4F7FB)",
+            padding: "10px",
+            borderRadius: "5px",
+            fontSize: "14px",
+            textWrap: "nowrap",
+            border: "1px solid var(--primary-venom-grey, #E6EDF5)",
+            position: "sticky",
+            color: "#000",
+            display: "flex",
+            cursor: "pointer",
+            flexDirection: "row",
+            gap: "0.5rem",
+            alignItems: "center",
+            zIndex: zIndex,
+        }, onClick: function () { return onClick && onClick(); } }, props),
+        React.createElement("i", { className: "allaw-icon-filter", style: { fontSize: "14px", color: "#25BEEB" } }),
+        children));
+}
+export default FilterButtonPrimary;