From 5db57f5d6c5c1515f41a7dd0106dfd6ec6a9cf19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Fri, 17 Jan 2025 16:04:55 +0100
Subject: [PATCH 1/8] feat: add component

---
 components/ALinearBreadCrumb.vue              | 96 +++++++++++++++++++
 .../components/ALinearBreadCrumb.story.vue    | 37 +++++++
 2 files changed, 133 insertions(+)
 create mode 100644 components/ALinearBreadCrumb.vue
 create mode 100644 stories/components/ALinearBreadCrumb.story.vue

diff --git a/components/ALinearBreadCrumb.vue b/components/ALinearBreadCrumb.vue
new file mode 100644
index 0000000..a42e5fa
--- /dev/null
+++ b/components/ALinearBreadCrumb.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+  pathSegments: {
+    type: Array as () => string[],
+    required: true,
+  },
+  root: {
+    type: String,
+    default: "Home",
+  },
+  path: {
+    type: String,
+    required: true,
+  },
+  separator: {
+    type: String,
+    default: ">",
+  },
+});
+
+const emit = defineEmits(["updatePath"]);
+
+const goToFolderLevel = (level: number) => {
+  const newPath = props.pathSegments.slice(0, level + 1).join("/");
+  emit("updatePath", level);
+};
+
+const isBreadcrumbEmpty = computed(() => props.pathSegments?.length === 0);
+</script>
+
+<template>
+  <div class="breadcrumb-container">
+    <button
+      :class="{ 'empty-breadcrumb': isBreadcrumbEmpty }"
+      @click="goToFolderLevel(-1)"
+    >
+      {{ root }}
+    </button>
+
+    <span
+      v-for="(segment, index) in pathSegments"
+      :key="index"
+      class="breadcrumb-content"
+    >
+      <p class="separator">{{ separator }}</p>
+      <button class="breadcrumb" @click="goToFolderLevel(index)">
+        {{ segment }}
+      </button>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.breadcrumb-container {
+  display: flex;
+
+  button {
+    font-size: 12px;
+    height: 20px;
+    color: var(--a-secondary);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    &.empty-breadcrumb {
+      color: var(--a-black);
+    }
+  }
+
+  .breadcrumb-content {
+    display: flex;
+    color: var(--a-secondary);
+
+    button {
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--a-secondary);
+    }
+
+    &:nth-last-child(1) {
+      color: var(--a-black);
+
+      button {
+        color: var(--a-black);
+      }
+    }
+
+    .separator {
+      margin: 1px 3px 0 3px;
+    }
+  }
+}
+</style>
diff --git a/stories/components/ALinearBreadCrumb.story.vue b/stories/components/ALinearBreadCrumb.story.vue
new file mode 100644
index 0000000..889d257
--- /dev/null
+++ b/stories/components/ALinearBreadCrumb.story.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import ALinearBreadCrumb from "../../components/ALinearBreadCrumb.vue";
+import "../../index.scss";
+import { ref, computed } from "vue";
+
+const path = ref("Step I/Step II/Step III");
+const pathSegments = computed(() => path.value.split("/").filter(Boolean));
+
+// Méthode appelée lors de la mise à jour du chemin
+const updatePath = (newPath: string) => {
+  path.value = newPath;
+};
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 400 }">
+    <Variant title="default">
+      <ALinearBreadCrumb
+        :pathSegments="pathSegments"
+        :path="path"
+        @update:path="updatePath"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# ATabs
+
+The `ATabs` component allows you to create a set of tabs with customizable styling.
+
+## Usage
+
+The `ATabs` component offers the following options:
+
+- `tabs` (array, required): A list of objects representing the tabs. Each object should have a `label` (string) and a `value` (string). The `icon` (string) option is optional.
+</docs>

From b3dee94fbb5c00847bea20cd1aa34f6614a69d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Fri, 24 Jan 2025 11:59:04 +0100
Subject: [PATCH 2/8] feat: update path, separator  and story

---
 components/ALinearBreadCrumb.vue              | 20 +++++++++++--------
 .../components/ALinearBreadCrumb.story.vue    | 19 ++++++++++++------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/components/ALinearBreadCrumb.vue b/components/ALinearBreadCrumb.vue
index a42e5fa..e64d796 100644
--- a/components/ALinearBreadCrumb.vue
+++ b/components/ALinearBreadCrumb.vue
@@ -2,32 +2,36 @@
 import { computed } from "vue";
 
 const props = defineProps({
-  pathSegments: {
-    type: Array as () => string[],
+  path: {
+    type: String,
     required: true,
   },
   root: {
     type: String,
     default: "Home",
   },
-  path: {
+  splitChar: {
     type: String,
-    required: true,
+    default: "/",
   },
   separator: {
     type: String,
-    default: ">",
+    default: "/",
   },
 });
 
 const emit = defineEmits(["updatePath"]);
 
+const pathSegments = computed(() =>
+  props.path.split(props.splitChar).filter(Boolean)
+);
+
 const goToFolderLevel = (level: number) => {
-  const newPath = props.pathSegments.slice(0, level + 1).join("/");
-  emit("updatePath", level);
+  const newPath = pathSegments.value.slice(0, level + 1).join(props.splitChar);
+  emit("updatePath", newPath);
 };
 
-const isBreadcrumbEmpty = computed(() => props.pathSegments?.length === 0);
+const isBreadcrumbEmpty = computed(() => pathSegments.value.length === 0);
 </script>
 
 <template>
diff --git a/stories/components/ALinearBreadCrumb.story.vue b/stories/components/ALinearBreadCrumb.story.vue
index 889d257..bf7f252 100644
--- a/stories/components/ALinearBreadCrumb.story.vue
+++ b/stories/components/ALinearBreadCrumb.story.vue
@@ -1,24 +1,31 @@
 <script setup lang="ts">
 import ALinearBreadCrumb from "../../components/ALinearBreadCrumb.vue";
 import "../../index.scss";
-import { ref, computed } from "vue";
+import { ref } from "vue";
 
 const path = ref("Step I/Step II/Step III");
-const pathSegments = computed(() => path.value.split("/").filter(Boolean));
+const path2 = ref("Step I-Step II-Step III-Step IV");
 
-// Méthode appelée lors de la mise à jour du chemin
 const updatePath = (newPath: string) => {
   path.value = newPath;
 };
+
+const updatePath2 = (newPath: string) => {
+  path2.value = newPath;
+};
 </script>
 
 <template>
   <Story :layout="{ type: 'grid', width: 400 }">
     <Variant title="default">
+      <ALinearBreadCrumb :path="path" @updatePath="updatePath" />
+    </Variant>
+    <Variant title="splitChar/separator">
       <ALinearBreadCrumb
-        :pathSegments="pathSegments"
-        :path="path"
-        @update:path="updatePath"
+        :path="path2"
+        splitChar="-"
+        separator="*"
+        @updatePath="updatePath2"
       />
     </Variant>
   </Story>

From f7bd57635d72cd57432def4f3524668df05bac0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Tue, 28 Jan 2025 12:01:25 +0100
Subject: [PATCH 3/8] feat: update story

---
 stories/components/ALinearBreadCrumb.story.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/stories/components/ALinearBreadCrumb.story.vue b/stories/components/ALinearBreadCrumb.story.vue
index bf7f252..36c38c4 100644
--- a/stories/components/ALinearBreadCrumb.story.vue
+++ b/stories/components/ALinearBreadCrumb.story.vue
@@ -32,13 +32,17 @@ const updatePath2 = (newPath: string) => {
 </template>
 
 <docs lang="md">
-# ATabs
+# ALinearBreadCrumb
 
-The `ATabs` component allows you to create a set of tabs with customizable styling.
+The `ALinearBreadCrumb` component is a simple breadcrumb component that allows users to navigate through a hierarchy of tabs.
 
 ## Usage
 
-The `ATabs` component offers the following options:
+The `ALinearBreadCrumb` component offers the following options:
 
 - `tabs` (array, required): A list of objects representing the tabs. Each object should have a `label` (string) and a `value` (string). The `icon` (string) option is optional.
+- `path` (string, required): The value of the currently selected tab.
+- `updatePath` (function, required): A function that updates the value of the currently selected tab.
+- `splitChar` (string, optional, default: "/"): The character used to split the path into segments.
+- `separator` (string, optional, default: "/"): The character used visualy to separate the segments in the breadcrumb.
 </docs>

From c1bc5cd69a5d3b7100f64a636f54e5e4bbe5dad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Tue, 28 Jan 2025 12:02:26 +0100
Subject: [PATCH 4/8] feat: update story

---
 stories/components/ALinearBreadCrumb.story.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/stories/components/ALinearBreadCrumb.story.vue b/stories/components/ALinearBreadCrumb.story.vue
index 36c38c4..787be69 100644
--- a/stories/components/ALinearBreadCrumb.story.vue
+++ b/stories/components/ALinearBreadCrumb.story.vue
@@ -40,7 +40,6 @@ The `ALinearBreadCrumb` component is a simple breadcrumb component that allows u
 
 The `ALinearBreadCrumb` component offers the following options:
 
-- `tabs` (array, required): A list of objects representing the tabs. Each object should have a `label` (string) and a `value` (string). The `icon` (string) option is optional.
 - `path` (string, required): The value of the currently selected tab.
 - `updatePath` (function, required): A function that updates the value of the currently selected tab.
 - `splitChar` (string, optional, default: "/"): The character used to split the path into segments.

From 57b0f4f0c6d99b3efd3b779b1b01949e792152fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Thu, 13 Feb 2025 11:04:38 +0100
Subject: [PATCH 5/8] feat: update modal select tabs notif typo

---
 components/AModal.vue                 | 58 +++++++++++-------
 components/ASelect.vue                |  2 +-
 components/ATabs.vue                  | 15 ++++-
 index.scss                            |  1 +
 scss/notyf.scss                       | 58 ++++++++++++++++++
 scss/typography.scss                  | 24 ++++++++
 stores/notification.ts                | 84 ++++++++++++---------------
 stories/components/A Typography.vue   | 41 +++++++++++++
 stories/components/ATabs.story.vue    | 21 +++++--
 stories/stores/notification.story.vue | 53 +++++++++++++----
 10 files changed, 269 insertions(+), 88 deletions(-)
 create mode 100644 scss/notyf.scss
 create mode 100644 scss/typography.scss
 create mode 100644 stories/components/A Typography.vue

diff --git a/components/AModal.vue b/components/AModal.vue
index fb513c6..b18ee37 100644
--- a/components/AModal.vue
+++ b/components/AModal.vue
@@ -131,13 +131,15 @@ defineExpose({
             'no-padding': !hasBodyPadding,
           }"
         >
-          <ACard
-            :has-header="hasHeader"
-            :has-footer="hasFooter"
-            :title-alignement="titleAlignement"
-            :action-alignement="actionAlignement"
-          >
-            <template #header>
+          <div class="a-card">
+            <header
+              class="a-card-head"
+              v-if="hasHeader"
+              :class="[
+                titleAlignement === 'center' && 'is-centered',
+                titleAlignement === 'right' && 'is-end',
+              ]"
+            >
               <div class="header-content">
                 <slot name="icon">
                   <AIcon v-if="icon" :icon="icon" color="black"></AIcon>
@@ -149,9 +151,9 @@ defineExpose({
                     </slot>
                   </h3>
                   <p>
-                    <slot name="sub-title"
-                      ><Translate>{{ subTitle }}</Translate></slot
-                    >
+                    <slot name="sub-title">
+                      <Translate>{{ subTitle }}</Translate>
+                    </slot>
                   </p>
                 </div>
                 <div class="right-content">
@@ -168,8 +170,8 @@ defineExpose({
                   <AIcon icon="close" color="black"></AIcon>
                 </AButton>
               </div>
-            </template>
-            <template #content>
+            </header>
+            <div class="a-card-body">
               <div class="body-container">
                 <AButton
                   v-if="!hasHeader"
@@ -189,11 +191,18 @@ defineExpose({
                 ></slot>
                 <slot name="content"></slot>
               </div>
-            </template>
-            <template #action>
+            </div>
+            <div
+              class="a-card-foot"
+              v-if="hasFooter"
+              :class="[
+                actionAlignement === 'center' && 'is-centered',
+                actionAlignement === 'right' && 'is-end',
+              ]"
+            >
               <slot name="action" :close="() => close()"></slot>
-            </template>
-          </ACard>
+            </div>
+          </div>
         </div>
       </div>
     </transition>
@@ -219,9 +228,12 @@ defineExpose({
   }
 
   .a-card {
+    position: relative;
     width: 100%;
     border-radius: 5px;
     max-height: 100vh;
+    background: var(--a-white);
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
 
     > .a-card-body {
       overflow: auto;
@@ -398,6 +410,8 @@ defineExpose({
 
       // FOOTER
       .a-card-foot {
+        display: flex;
+        gap: 10px;
         margin: 0;
         padding: 16px;
         border-top: 1px solid var(--a-grey-light);
@@ -458,8 +472,8 @@ defineExpose({
         height: 100%;
 
         .a-card-body {
-          height: 100%;
-          max-height: 100%;
+          height: calc(100% - 162px);
+          max-height: calc(100% - 162px);
         }
       }
     }
@@ -575,8 +589,8 @@ defineExpose({
         height: 100%;
 
         .a-card-body {
-          height: 100%;
-          max-height: 100%;
+          height: calc(100% - 162px);
+          max-height: calc(100% - 162px);
         }
       }
     }
@@ -616,8 +630,8 @@ defineExpose({
         height: 100%;
 
         .a-card-body {
-          height: 100%;
-          max-height: 100%;
+          height: calc(100% - 162px);
+          max-height: calc(100% - 162px);
         }
       }
     }
diff --git a/components/ASelect.vue b/components/ASelect.vue
index 7553cb8..f048d3d 100644
--- a/components/ASelect.vue
+++ b/components/ASelect.vue
@@ -30,7 +30,7 @@ const props = defineProps({
   },
   color: {
     type: String as PropType<Colors>,
-    default: "grey-light",
+    default: "grey-dark",
   },
   tagColor: {
     type: String as PropType<Colors>,
diff --git a/components/ATabs.vue b/components/ATabs.vue
index 166ab5c..3a9d53a 100644
--- a/components/ATabs.vue
+++ b/components/ATabs.vue
@@ -165,6 +165,10 @@ function toggle(value: string) {
           bottom: -2px;
           left: 0;
           animation: appear 0.25s ease-in-out forwards;
+
+          @media screen and (max-width: 767px) {
+            animation: appearM 0.25s ease-in-out forwards;
+          }
         }
 
         @keyframes appear {
@@ -176,6 +180,15 @@ function toggle(value: string) {
           }
         }
 
+        @keyframes appearM {
+          0% {
+            width: 0%;
+          }
+          100% {
+            width: calc(100% - 9px);
+          }
+        }
+
         @keyframes appearLast {
           0% {
             width: 0%;
@@ -231,7 +244,7 @@ function toggle(value: string) {
   @media screen and (max-width: 767px) {
     .a-tab {
       a {
-        padding: 2px 9px 2px 9px;
+        padding: 2px 9px 2px 0;
         font-size: 10px;
 
         span {
diff --git a/index.scss b/index.scss
index 89fda90..0f646d4 100644
--- a/index.scss
+++ b/index.scss
@@ -4,3 +4,4 @@
 @import "./scss/_font.scss";
 @import "./scss/layout.scss";
 @import "./scss/scrollbar.scss";
+@import "./scss/notyf.scss";
diff --git a/scss/notyf.scss b/scss/notyf.scss
new file mode 100644
index 0000000..a447045
--- /dev/null
+++ b/scss/notyf.scss
@@ -0,0 +1,58 @@
+.notyf {
+  .notyf__toast {
+    border-radius: 5px;
+    font-size: 12px;
+
+    &.notyf__toast--default {
+      color: var(--a-grey-darker);
+      border: 1px solid var(--a-grey-light);
+    }
+
+    &.notyf__toast--warning {
+      color: var(--a-warning-darker);
+      border: 1px solid var(--a-warning-light);
+    }
+
+    &.notyf__toast--success {
+      color: var(--a-success-darker);
+      border: 1px solid var(--a-success-light);
+    }
+
+    &.notyf__toast--info {
+      color: var(--a-info-darker);
+      border: 1px solid var(--a-info-light);
+    }
+
+    &.notyf__toast--error {
+      color: var(--a-danger-darker);
+      border: 1px solid var(--a-danger-light);
+    }
+
+    .notyf__wrapper {
+      padding: 15px 20px;
+
+      .notyf__dismiss {
+        .notyf__dismiss-btn {
+          background-color: transparent;
+          opacity: 1;
+
+          &:hover {
+            opacity: 0.5;
+          }
+
+          &::before {
+            background: var(--a-black);
+            width: 1px;
+            height: 10px;
+          }
+
+          &::after {
+            background: var(--a-black);
+            width: 1px;
+            height: 10px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/scss/typography.scss b/scss/typography.scss
new file mode 100644
index 0000000..f14bb92
--- /dev/null
+++ b/scss/typography.scss
@@ -0,0 +1,24 @@
+h1 {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 32px;
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 28px;
+  font-weight: 700;
+}
+
+h4 {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+h5 {
+  font-size: 20px;
+  font-weight: 700;
+}
diff --git a/stores/notification.ts b/stores/notification.ts
index e0f6869..da62886 100644
--- a/stores/notification.ts
+++ b/stores/notification.ts
@@ -4,18 +4,19 @@ import "notyf/notyf.min.css";
 import { Notyf } from "notyf";
 import { useColor } from "./color";
 
-const getNotyf = () : Notyf => {
-  if((window as any).notyf === undefined) {
+const getNotyf = (): Notyf => {
+  if ((window as any).notyf === undefined) {
     (window as any).notyf = new Notyf({
       duration: 5000,
+      dismissible: true,
       position: {
         x: "right",
         y: "top",
-      }
+      },
     });
   }
   return (window as any).notyf;
-}
+};
 
 class Notification {
   private options: Partial<INotyfNotificationOptions>;
@@ -37,52 +38,39 @@ class Notification {
 }
 
 export const useNotification = createGlobalState(() => {
-  const colorInfo = useColor("info");
-  const colorSuccess = useColor("success");
-  const colorError = useColor("danger");
-  return {
-    dismissAll: () => getNotyf().dismissAll(),
-    success(payload: MaybeRef<string | Partial<INotyfNotificationOptions>>) {
-      let payloadValue = toValue(payload);
-
-      if (typeof payloadValue === "string") 
-        payloadValue = {
-          message: payloadValue
-        };
-      
-      payloadValue.type = "success";
-      payloadValue.background = colorSuccess.value;
-      const notification = new Notification(payloadValue)
-      notification.show();
-      return notification;
-    },
-    error: (payload: MaybeRef<string | Partial<INotyfNotificationOptions>>) => {
-      let payloadValue = toValue(payload);
+  const colors = {
+    default: useColor("grey-lightest"),
+    warning: useColor("warning-lightest"),
+    success: useColor("success-lightest"),
+    info: useColor("info-lightest"),
+    error: useColor("danger-lightest"),
+  };
 
-      if (typeof payloadValue === "string") 
-        payloadValue = {
-          message: payloadValue
-        };
-      
-      payloadValue.type = "error";
-      payloadValue.background = colorError.value;
-      const notification = new Notification(payloadValue)
-      notification.show();
-      return notification;
-    },
-    info: (payload: MaybeRef<string | Partial<INotyfNotificationOptions>>) => {
-      let payloadValue = toValue(payload);
+  const createNotification = (
+    type: keyof typeof colors,
+    payload: MaybeRef<string | Partial<INotyfNotificationOptions>>
+  ) => {
+    let payloadValue = toValue(payload);
 
-      if (typeof payloadValue === "string") 
-        payloadValue = {
-          message: payloadValue
-        };
-      
-      payloadValue.type = "info";
-      payloadValue.background = colorInfo.value;
-      const notification = new Notification(payloadValue)
-      notification.show();
-      return notification;
+    if (typeof payloadValue === "string") {
+      payloadValue = { message: payloadValue };
     }
+
+    // payloadValue.type = type;
+    payloadValue.className = `notyf__toast--${type}`;
+    payloadValue.background = colors[type].value;
+
+    const notification = new Notification(payloadValue);
+    notification.show();
+    return notification;
+  };
+
+  return {
+    dismissAll: () => getNotyf().dismissAll(),
+    default: (payload) => createNotification("default", payload),
+    warning: (payload) => createNotification("warning", payload),
+    success: (payload) => createNotification("success", payload),
+    info: (payload) => createNotification("info", payload),
+    error: (payload) => createNotification("error", payload),
   };
 });
diff --git a/stories/components/A Typography.vue b/stories/components/A Typography.vue
new file mode 100644
index 0000000..c70f682
--- /dev/null
+++ b/stories/components/A Typography.vue	
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import "../../index.scss";
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 400 }">
+    <Variant title="default">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+
+      <p>Subhead 1</p>
+      <p>Subhead 2</p>
+      <p>Subhead 3</p>
+      <p>Subhead 4</p>
+      <p>Subhead 5</p>
+
+      <p>Body medium 1</p>
+      <p>Body medium 2</p>
+      <p>Body medium 3</p>
+      <p>Body medium 4</p>
+      <p>Body medium 5</p>
+
+      <p>Body regular 1</p>
+      <p>Body regular 2</p>
+      <p>Body regular 3</p>
+      <p>Body regular 4</p>
+      <p>Body regular 5</p>
+
+      <p>Body bold</p>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# ATabs
+
+The `ATabs` component allows you to create a set of tabs with customizable styling.
+</docs>
diff --git a/stories/components/ATabs.story.vue b/stories/components/ATabs.story.vue
index 9094e88..8513703 100644
--- a/stories/components/ATabs.story.vue
+++ b/stories/components/ATabs.story.vue
@@ -3,7 +3,13 @@ import ATabs from "../../components/ATabs.vue";
 import AIcon from "../../components/AIcon.vue";
 import "../../index.scss";
 
-const tabs = [
+const tabs1 = [
+  { label: "Home", value: "home" },
+  { label: "Profile", value: "profile" },
+  { label: "Settings", value: "settings" },
+  { label: "About", value: "about" },
+];
+const tabs2 = [
   { label: "Home", value: "home", icon: "home", notif: "8" },
   { label: "Profile", value: "profile", icon: "account_circle", notif: "27" },
   { label: "Settings", value: "settings", icon: "settings", notif: "10" },
@@ -14,16 +20,19 @@ const tabs = [
 <template>
   <Story :layout="{ type: 'grid', width: 400 }">
     <Variant title="default">
-      <ATabs :tabs="tabs" />
+      <ATabs :tabs="tabs1" />
     </Variant>
     <Variant title="with initial selection">
-      <ATabs :tabs="tabs" modelValue="profile" />
+      <ATabs :tabs="tabs1" modelValue="profile" />
     </Variant>
     <Variant title="custom color">
-      <ATabs :tabs="tabs" color="primary" modelValue="settings" />
+      <ATabs :tabs="tabs1" color="primary" modelValue="settings" />
+    </Variant>
+    <Variant title="with notif">
+      <ATabs :tabs="tabs2" />
     </Variant>
-    <Variant title="slow transition">
-      <ATabs :tabs="tabs" color="success" modelValue="home" slow>
+    <Variant title="with icon">
+      <ATabs :tabs="tabs2" color="success" modelValue="home" slow>
         <template #tab> </template>
         <template #tab-link-label="{ tab }">
           <AIcon :icon="tab.icon" type="rounded" />
diff --git a/stories/stores/notification.story.vue b/stories/stores/notification.story.vue
index 2986244..683c6ba 100644
--- a/stories/stores/notification.story.vue
+++ b/stories/stores/notification.story.vue
@@ -4,32 +4,65 @@ import "../../index.scss";
 import { useNotification } from "../../stores/notification";
 
 const notification = useNotification();
-
 </script>
 <template>
   <Story :layout="{ type: 'grid', width: 200 }">
+    <Variant title="default">
+      <AButton @click="notification.default('Default Text')" color="grey-light"
+        >Default</AButton
+      >
+    </Variant>
+    <Variant title="warning">
+      <AButton
+        @click="notification.warning('Warning Text')"
+        color="warning-light"
+        >Warning</AButton
+      >
+    </Variant>
     <Variant title="success">
-      <AButton @click="notification.success('Success')" color="success">Success</AButton>
+      <AButton
+        @click="notification.success('Success Text')"
+        color="success-light"
+        >Success</AButton
+      >
+    </Variant>
+    <Variant title="info">
+      <AButton @click="notification.info('Info Text')" color="info-light"
+        >Info</AButton
+      >
     </Variant>
     <Variant title="error">
-      <AButton @click="notification.error('Success')" color="danger">Error</AButton>
+      <AButton @click="notification.error('Error Text')" color="danger"
+        >Error</AButton
+      >
     </Variant>
   </Story>
 </template>
 
 <docs lang="md">
-  ## useNotification
+## useNotification
+
+The `useNotification` function is a custom hook that provides methods for displaying success and error notifications.
+
+### Methods
+
+### default(message: string)
+
+Displays a default notification with the specified message.
+
+#### warning(message: string)
 
-  The `useNotification` function is a custom hook that provides methods for displaying success and error notifications.
+Displays a warning notification with the specified message.
 
-  ### Methods
+#### success(message: string)
 
-  #### success(message: string)
+Displays a success notification with the specified message.
 
-  Displays a success notification with the specified message.
+#### info(message: string)
 
-  #### error(message: string)
+Displays an info notification with the specified message.
 
-  Displays an error notification with the specified message.
+#### error(message: string)
 
+Displays an error notification with the specified message.
 </docs>

From fa29134556e5719c234084514aba31bb80b5e858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Tue, 4 Mar 2025 15:58:00 +0100
Subject: [PATCH 6/8] feat: fix adropdown

---
 components/ADropdown.vue | 35 +++++++++++++----------------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/components/ADropdown.vue b/components/ADropdown.vue
index 96fd6a9..6581e78 100644
--- a/components/ADropdown.vue
+++ b/components/ADropdown.vue
@@ -3,30 +3,21 @@ import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
 import AButton from "./AButton.vue";
 import ACard from "./ACard.vue";
 import { useColor } from "../stores/color";
-import { defineProps, computed, PropType } from "vue";
-import type { Colors } from "../stores/color";
+import { defineProps, computed, withDefaults } from "vue";
 import { useElementBounding, onClickOutside } from "@vueuse/core";
 
-const props = defineProps({
-  position: {
-    type: String,
-    default: "auto",
-    validator: (value: string) => {
-      return ["left", "right", "auto"].includes(value);
-    },
-  },
-  color: {
-    type: String,
-    default: "primary",
-  },
-  above: {
-    type: Boolean,
-    default: false,
-  },
-  preventCloseOutside: {
-    type: Boolean,
-    default: false,
-  },
+interface DropdownProps {
+  position: string;
+  color: string;
+  above: boolean;
+  preventCloseOutside: boolean;
+}
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  position: "auto",
+  color: "primary",
+  above: false,
+  preventCloseOutside: false,
 });
 
 const isOpen = defineModel("isOpen");

From c11a09b211163e98e6f45d79a4311765ccd0ffea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc?= <loicbere@gmail.com>
Date: Fri, 4 Apr 2025 17:47:26 +0200
Subject: [PATCH 7/8] =?UTF-8?q?feat:=20last=20update=20gallery=20input=20m?=
 =?UTF-8?q?odal=20tabs=20notif=20=E2=9C=8C=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AGallery.vue |   4 +-
 components/AInput.vue   |  26 +++-
 components/AModal.vue   |  10 +-
 components/ATabs.vue    | 274 +++++++++++++++++++++-------------------
 scss/notyf.scss         |  27 +++-
 stores/notification.ts  |   2 +-
 6 files changed, 200 insertions(+), 143 deletions(-)

diff --git a/components/AGallery.vue b/components/AGallery.vue
index 015328c..723ed0a 100644
--- a/components/AGallery.vue
+++ b/components/AGallery.vue
@@ -404,7 +404,7 @@ const mediasAndInspirations = computed((): string[] => {
         :slotted(img) {
           height: 100%;
           width: 100%;
-          object-fit: cover;
+          object-fit: contain;
         }
 
         :slotted(video) {
@@ -421,7 +421,7 @@ const mediasAndInspirations = computed((): string[] => {
           img {
             height: 100%;
             width: 100%;
-            object-fit: cover;
+            object-fit: contain;
           }
 
           video {
diff --git a/components/AInput.vue b/components/AInput.vue
index 8a4dd12..d54475d 100644
--- a/components/AInput.vue
+++ b/components/AInput.vue
@@ -14,7 +14,15 @@ export interface AInputProps {
   label?: string | null;
   full?: boolean;
   required?: boolean;
-  type?: "text" | "phone" | "password" | "time" | "search" | "number" | "email" | "color";
+  type?:
+    | "text"
+    | "phone"
+    | "password"
+    | "time"
+    | "search"
+    | "number"
+    | "email"
+    | "color";
   modelValue?: Array<string> | string;
 }
 
@@ -426,5 +434,21 @@ const preventClear = (event: KeyboardEvent) => {
     align-items: center;
     padding: 0 16px 0 0;
   }
+
+  @media screen and (max-width: 768px) {
+    height: 50px;
+
+    // PHONE
+    &.a-input-phone {
+      .phone-label {
+        top: 7px;
+      }
+    }
+
+    // LABEL
+    label {
+      top: 7px;
+    }
+  }
 }
 </style>
diff --git a/components/AModal.vue b/components/AModal.vue
index 471c6dc..16516aa 100644
--- a/components/AModal.vue
+++ b/components/AModal.vue
@@ -277,6 +277,10 @@ defineExpose({
       animation: upScale 0.25s cubic-bezier(0.23, 1, 0.32, 1) forwards;
       transform-origin: center;
 
+      @media screen and (max-width: 768px) {
+        max-height: 100svh !important;
+      }
+
       @keyframes upScale {
         0% {
           transform: scale(0.95);
@@ -296,7 +300,7 @@ defineExpose({
       // HEADER
       .a-card-head {
         display: flex;
-        padding: 16px;
+        padding: 16px 44px 16px 16px;
         border-bottom: 1px solid var(--a-grey-light);
         min-height: 87px;
 
@@ -367,6 +371,10 @@ defineExpose({
         position: relative;
         overscroll-behavior: contain;
 
+        @media screen and (max-width: 768px) {
+          max-height: calc(100svh - 141px) !important;
+        }
+
         .body-container {
           .a-modal-close {
             position: absolute;
diff --git a/components/ATabs.vue b/components/ATabs.vue
index 3a9d53a..f9daf2a 100644
--- a/components/ATabs.vue
+++ b/components/ATabs.vue
@@ -15,6 +15,7 @@ export interface ATabsProps {
   slow?: boolean;
   modelValue?: string | number;
   color?: Colors;
+  shadow?: string;
 }
 
 export interface ATabsEmits {
@@ -28,12 +29,13 @@ const props = withDefaults(defineProps<ATabsProps>(), {
   selected: undefined,
   modelValue: undefined,
   color: "tertiary",
+  shadow: "#fafafa",
 });
 
 const mainColor = computed(() => props.color);
 
 const color = useColor(mainColor);
-const colorLight = useColor(mainColor, "lightest");
+// const colorLight = useColor(mainColor, "lightest");
 
 const activeValue = computed({
   get() {
@@ -51,7 +53,7 @@ function toggle(value: string) {
 </script>
 
 <template>
-  <div class="a-tabs">
+  <div class="a-tabs" :style="{ '--shadow': shadow }">
     <div class="a-tabs-container">
       <div
         v-for="(tab, key) in tabs"
@@ -100,177 +102,185 @@ function toggle(value: string) {
 </template>
 
 <style scoped lang="scss">
-.a-tabs-container {
-  display: flex;
-  flex-wrap: wrap;
-
-  .a-tab {
+.a-tabs {
+  .a-tabs-container {
+    position: relative;
     display: flex;
-    outline-offset: 10px;
-    border-bottom: 2px solid var(--a-grey-light);
-    /* transition: background 0.25s ease-in-out; */
-
-    &:nth-last-child(1) {
-      a {
-        padding-right: 0;
-      }
-    }
+    overflow-x: scroll;
+    flex-wrap: wrap;
 
-    a {
-      position: relative;
-      padding: 15px 20px 15px 0;
-      color: var(--a-grey);
-      font-size: 16px;
-      font-weight: 500;
-      transition: color 0.25s ease-in-out;
-
-      //IF IMG OR SVG ADD
-      span {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-
-        :slotted(img),
-        :slotted(svg) {
-          width: 15px;
-
-          path {
-            fill: var(--a-grey);
-            transition: fill 0.25s ease-in-out;
-          }
-        }
-      }
-    }
+    .a-tab {
+      display: flex;
+      outline-offset: 10px;
+      border-bottom: 2px solid var(--a-grey-light);
 
-    &.is-active {
       &:nth-last-child(1) {
         a {
           padding-right: 0;
-
-          &:after {
-            animation: appearLast 0.25s ease-in-out forwards;
-          }
         }
       }
 
       a {
-        color: var(--a-black);
-
-        &:after {
-          content: "";
-          position: absolute;
-          width: 0%;
-          height: 2px;
-          background: v-bind(color);
-          bottom: -2px;
-          left: 0;
-          animation: appear 0.25s ease-in-out forwards;
-
-          @media screen and (max-width: 767px) {
-            animation: appearM 0.25s ease-in-out forwards;
+        position: relative;
+        padding: 15px 20px 15px 0;
+        color: var(--a-grey);
+        font-size: 16px;
+        font-weight: 500;
+        transition: color 0.25s ease-in-out;
+        white-space: nowrap;
+
+        //IF IMG OR SVG ADD
+        span {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          :slotted(img),
+          :slotted(svg) {
+            width: 15px;
+
+            path {
+              fill: var(--a-grey);
+              transition: fill 0.25s ease-in-out;
+            }
           }
         }
+      }
 
-        @keyframes appear {
-          0% {
-            width: 0%;
-          }
-          100% {
-            width: calc(100% - 20px);
+      &.is-active {
+        &:nth-last-child(1) {
+          a {
+            padding-right: 0;
+
+            &:after {
+              animation: appearLast 0.25s ease-in-out forwards;
+            }
           }
         }
 
-        @keyframes appearM {
-          0% {
+        a {
+          color: var(--a-black);
+
+          &:after {
+            content: "";
+            position: absolute;
             width: 0%;
+            height: 2px;
+            background: v-bind(color);
+            bottom: -2px;
+            left: 0;
+            animation: appear 0.25s ease-in-out forwards;
+
+            @media screen and (max-width: 767px) {
+              animation: appearM 0.25s ease-in-out forwards;
+            }
           }
-          100% {
-            width: calc(100% - 9px);
+
+          @keyframes appear {
+            0% {
+              width: 0%;
+            }
+            100% {
+              width: calc(100% - 20px);
+            }
           }
-        }
 
-        @keyframes appearLast {
-          0% {
-            width: 0%;
+          @keyframes appearM {
+            0% {
+              width: 0%;
+            }
+            100% {
+              width: calc(100% - 9px);
+            }
           }
-          100% {
-            width: calc(100%);
+
+          @keyframes appearLast {
+            0% {
+              width: 0%;
+            }
+            100% {
+              width: calc(100%);
+            }
           }
-        }
 
-        //IF IMG OR SVG ADD
-        span {
-          :slotted(img),
-          :slotted(svg) {
-            path {
-              fill: v-bind(color);
+          //IF IMG OR SVG ADD
+          span {
+            :slotted(img),
+            :slotted(svg) {
+              path {
+                fill: v-bind(color);
+              }
             }
           }
         }
       }
-    }
 
-    &:hover {
-      /* background: v-bind(colorLight); */
+      &:hover {
+        /* background: v-bind(colorLight); */
 
-      a {
-        color: v-bind(color);
-
-        //IF IMG OR SVG ADD
-        span {
-          :slotted(img),
-          :slotted(svg) {
-            path {
-              fill: v-bind(color);
+        a {
+          color: v-bind(color);
+
+          //IF IMG OR SVG ADD
+          span {
+            :slotted(img),
+            :slotted(svg) {
+              path {
+                fill: v-bind(color);
+              }
             }
           }
         }
       }
-    }
 
-    &:focus {
-      /* background: v-bind(colorLight); */
+      &:focus {
+        /* background: v-bind(colorLight); */
 
-      a {
-        -webkit-box-shadow: inset 0px 0px 0px 1px var(--a-info);
-        -moz-box-shadow: inset 0px 0px 0px 1px var(--a-info);
-        box-shadow: inset 0px 0px 0px 1px var(--a-info);
-        border-radius: 5px;
-        color: v-bind(color);
+        a {
+          -webkit-box-shadow: inset 0px 0px 0px 1px var(--a-info);
+          -moz-box-shadow: inset 0px 0px 0px 1px var(--a-info);
+          box-shadow: inset 0px 0px 0px 1px var(--a-info);
+          border-radius: 5px;
+          color: v-bind(color);
+        }
       }
     }
-  }
-
-  @media screen and (max-width: 767px) {
-    .a-tab {
-      a {
-        padding: 2px 9px 2px 0;
-        font-size: 10px;
-
-        span {
-          height: 14px;
-          gap: 5px;
 
-          :slotted(img),
-          :slotted(svg) {
-            width: 9px;
-          }
-        }
-      }
+    .tab-notif {
+      margin-top: 3px;
+      height: 15px;
+      width: 22px;
+      background: var(--a-primary-lightest);
+      color: var(--a-primary);
+      font-size: 8px;
+      border-radius: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 
-  .tab-notif {
-    margin-top: 3px;
-    height: 15px;
-    width: 22px;
-    background: var(--a-primary-lightest);
-    color: var(--a-primary);
-    font-size: 8px;
-    border-radius: 50px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  @media screen and (max-width: 1024px) {
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 20px;
+      height: 56px;
+      background: linear-gradient(
+        to right,
+        var(--a-transparent),
+        var(--shadow) 100%
+      );
+      top: 0;
+      right: 0;
+    }
+
+    .a-tabs-container {
+      flex-wrap: nowrap;
+      padding-right: 20px;
+    }
   }
 }
 </style>
diff --git a/scss/notyf.scss b/scss/notyf.scss
index a447045..88702dd 100644
--- a/scss/notyf.scss
+++ b/scss/notyf.scss
@@ -4,28 +4,43 @@
     font-size: 12px;
 
     &.notyf__toast--default {
-      color: var(--a-grey-darker);
-      border: 1px solid var(--a-grey-light);
+      border: 1px solid var(--a-grey-light) !important;
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-grey-darker) !important;
+      }
     }
 
     &.notyf__toast--warning {
-      color: var(--a-warning-darker);
       border: 1px solid var(--a-warning-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-warning-darker) !important;
+      }
     }
 
     &.notyf__toast--success {
-      color: var(--a-success-darker);
       border: 1px solid var(--a-success-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-success-darker) !important;
+      }
     }
 
     &.notyf__toast--info {
-      color: var(--a-info-darker);
       border: 1px solid var(--a-info-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-info-darker) !important;
+      }
     }
 
     &.notyf__toast--error {
-      color: var(--a-danger-darker);
       border: 1px solid var(--a-danger-light);
+
+      .notyf__wrapper .notyf__message {
+        color: var(--a-danger-darker) !important;
+      }
     }
 
     .notyf__wrapper {
diff --git a/stores/notification.ts b/stores/notification.ts
index da62886..c3a0f96 100644
--- a/stores/notification.ts
+++ b/stores/notification.ts
@@ -7,7 +7,7 @@ import { useColor } from "./color";
 const getNotyf = (): Notyf => {
   if ((window as any).notyf === undefined) {
     (window as any).notyf = new Notyf({
-      duration: 5000,
+      duration: 50000,
       dismissible: true,
       position: {
         x: "right",

From d6902ec1e5d55385796205b2fa376b52b6f1f76e Mon Sep 17 00:00:00 2001
From: PierreGAMEN <pierre.gamen@gmail.com>
Date: Fri, 18 Apr 2025 09:49:58 +0200
Subject: [PATCH 8/8] feat: update ACheckbox and ATextarea styles for better
 accessibility

---
 components/ACheckbox.vue | 11 +++++++++++
 components/ATextarea.vue |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/ACheckbox.vue b/components/ACheckbox.vue
index a3ec5f0..5b6c884 100644
--- a/components/ACheckbox.vue
+++ b/components/ACheckbox.vue
@@ -290,4 +290,15 @@ watch(
     }
   }
 }
+
+.custom-checkbox input:checked:disabled ~ .checkmark-lab {
+  background-color: var(--a-grey-dark) !important;
+
+  &:after {
+    display: block;
+    border-color: var(--a-white) !important;
+  }
+}
+
+
 </style>
diff --git a/components/ATextarea.vue b/components/ATextarea.vue
index 55cadf1..8c04d39 100644
--- a/components/ATextarea.vue
+++ b/components/ATextarea.vue
@@ -81,6 +81,7 @@ const color = useColor(mainColor);
 
     .textarea {
       font-family: inherit;
+      background-color: inherit;
     }
 
     &::after {
@@ -90,7 +91,7 @@ const color = useColor(mainColor);
       left: 0;
       width: 100%;
       height: 30px;
-      background: var(--a-white);
+      background-color: inherit;
       pointer-events: none;
       border-radius: 10px;
     }