@maboussoleaidant/design-system 0.1.5 → 0.1.7

package/README.md

@@ -23,24 +23,23 @@ Ou en import CSS :
 @import "@maboussoleaidant/design-system";
 ```
 
-### Option 2 : Avec Tailwind JIT (recommandé pour les apps)
+### Option 2 : Avec Tailwind v4 (recommandé pour les apps)
 
-Pour les applications Angular/React/Astro qui utilisent Tailwind, **utilisez le JIT** pour avoir accès à toutes les classes Tailwind avec les tokens MBA :
+Pour les applications Angular/React/Astro qui utilisent Tailwind v4, importez le **preset** pour avoir accès à toutes les classes Tailwind JIT avec les tokens MBA :
 
 ```css
 /* styles.css */
 @import "@maboussoleaidant/design-system";
 @import "tailwindcss";
-
-@theme {
-  /* Copier le mapping depuis src/tailwind.css ou voir la doc Storybook */
-  --color-primary-500: var(--mba-color-primary-500);
-  --spacing-sm: var(--mba-space-sm);
-  /* ... */
-}
+@import "@maboussoleaidant/design-system/preset";
 ```
 
-> **Note :** Le fichier `mba-tailwind.css` pré-compilé ne contient que les classes Tailwind utilisées dans le Storybook du DS. Pour un projet réel, utilisez le JIT ci-dessus.
+Cela vous donne accès à :
+- Toutes les classes Tailwind générées par le JIT (h-screen, animate-spin, etc.)
+- Les tokens MBA mappés : `bg-primary-500`, `p-sm`, `rounded-xs`, `shadow-md`, etc.
+- Les composants `.mba-*` du Design System
+
+> **Note :** Le fichier `mba-tailwind.css` est pré-compilé pour le Storybook uniquement. Utilisez le preset ci-dessus pour vos projets.
 
 ### Option 3 : Tokens uniquement
 

package/dist/mba-tailwind.css

@@ -1841,6 +1841,7 @@ button.mba-input-icon__icon:hover {
     --radius-sm: var(--mba-radius-sm);
     --radius-md: var(--mba-radius-md);
     --radius-lg: var(--mba-radius-lg);
+    --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -2241,6 +2242,9 @@ button.mba-input-icon__icon:hover {
   .h-32 {
     height: var(--spacing-32);
   }
+  .h-screen {
+    height: 100vh;
+  }
   .w-4 {
     width: var(--spacing-4);
   }
@@ -2327,6 +2331,9 @@ button.mba-input-icon__icon:hover {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -2553,6 +2560,9 @@ button.mba-input-icon__icon:hover {
   .px-sm {
     padding-inline: var(--spacing-sm);
   }
+  .px-xs {
+    padding-inline: var(--spacing-xs);
+  }
   .px-xxs {
     padding-inline: var(--spacing-xxs);
   }
@@ -2571,6 +2581,9 @@ button.mba-input-icon__icon:hover {
   .pb-sm {
     padding-bottom: var(--spacing-sm);
   }
+  .pl-md {
+    padding-left: var(--spacing-md);
+  }
   .text-center {
     text-align: center;
   }
@@ -2917,6 +2930,11 @@ button.mba-input-icon__icon:hover {
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {