mautourco-components 0.2.0 → 0.2.2

package/README.md

@@ -14,11 +14,14 @@ npm install mautourco-components
 ### 1. Importer les styles
 ```tsx
 // Dans votre index.tsx ou App.tsx
-import 'mautourco-components/src/styles/tokens/tokens.css';
-import 'mautourco-components/src/styles/components/forms.css';
-import 'mautourco-components/src/styles/components/typography.css';
-import 'mautourco-components/src/styles/components/organism/topnavigation.css';
-import 'mautourco-components/src/styles/components/organism/footer.css';
+// Utilisez les fichiers CSS compilés depuis dist/styles (recommandé)
+import 'mautourco-components/dist/styles/tokens/tokens.css';
+import 'mautourco-components/dist/styles/components/forms.css';
+import 'mautourco-components/dist/styles/components/typography.css';
+import 'mautourco-components/dist/styles/components/organism/topnavigation.css';
+import 'mautourco-components/dist/styles/components/organism/footer.css';
+
+// Note: Les CSS sont précompilés avec Tailwind v3, donc compatibles avec Tailwind v3 et v4
 ```
 
 ### 2. Utiliser les composants
@@ -176,7 +179,8 @@ npm publish             # Publication sur npm (après login)
 
 ## Notes importantes
 
-- **Styles** : Les composants nécessitent l'import des fichiers CSS correspondants
+- **Styles** : Les composants nécessitent l'import des fichiers CSS correspondants depuis `dist/styles/`
+- **CSS compilés** : Les CSS sont précompilés avec Tailwind v3 lors du build, donc compatibles avec Tailwind v3 et v4
 - **TypeScript** : Tous les composants sont typés
 - **Design tokens** : Générés automatiquement depuis le dossier `tokens/`
 

package/dist/components/atoms/Button/Button.css

@@ -0,0 +1,203 @@
+@import "src/styles/tokens/tokens.css";
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--component-button-spacing-sm-gap, 4rem);
+  padding: 0;
+  border: none;
+  border-radius: var(--border-radius-rounded-full, 9999rem);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-user-select: none;
+          user-select: none;
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-bold, 700);
+  font-size: var(--font-size-text-sm, 14rem);
+  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.15s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.button--sm {
+  padding: var(--component-button-spacing-sm-padding-y, 8rem)
+    var(--component-button-spacing-sm-padding-x, 12rem);
+  gap: var(--component-button-spacing-sm-gap, 4rem);
+  font-size: var(--font-size-text-sm, 14rem);
+  line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
+}
+
+.button--md {
+  padding: var(--component-button-spacing-md-padding-y, 10rem)
+    var(--component-button-spacing-md-padding-x, 14rem);
+  gap: var(--component-button-spacing-md-gap, 10rem);
+  font-size: var(--font-size-text-base, 16rem);
+  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+}
+
+.button--lg {
+  padding: var(--component-button-spacing-lg-padding-y, 10rem)
+    var(--component-button-spacing-lg-padding-x, 64rem);
+  gap: var(--component-button-spacing-lg-gap, 6rem);
+  font-size: var(--font-size-text-lg, 18rem);
+  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+}
+
+.button--xl {
+  padding: var(--component-button-spacing-xl-padding-y, 12rem)
+    var(--component-button-spacing-xl-padding-x, 16rem);
+  gap: var(--component-button-spacing-xl-gap, 6rem);
+  font-size: var(--font-size-text-base, 16rem);
+  line-height: calc(var(--font-leading-leading-md, 24)* 1rem);
+  letter-spacing: calc(var(--font-tracking-tracking-normal, 0rem)* 1rem);
+}
+
+.button__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.button--primary {
+  background-color: var(--color-button-brand-background-primary-default, #fe8839);
+  color: var(--color-button-brand-foreground-primary-default, #ffffff);
+}
+
+.button--primary:hover:not(:disabled) {
+  background-color: var(--color-button-brand-background-primary-hover, #fc6613);
+}
+
+.button--primary:active:not(:disabled) {
+  background-color: var(--color-button-brand-background-primary-pressed, #ed4c09);
+}
+
+.button--primary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--color-button-brand-background-primary-focused, #ed4c09);
+}
+
+.button--primary:disabled {
+  background-color: var(--color-button-brand-background-primary-disabled, #f5f5f5);
+  color: var(--color-button-brand-foreground-primary-disabled, #a3a3a3);
+}
+
+.button--secondary {
+  background-color: var(--color-button-brand-background-secondary-default, #0d9394);
+  color: var(--color-button-brand-foreground-secondary-default, #ffffff);
+}
+
+.button--outline-primary {
+  background-color: var(--component-button-color-outline-primary-background-default, #ffffff);
+  color: var(--component-button-color-outline-primary-foreground-default, #fe8839);
+  border: var(--border-width-input, 1rem) solid
+    var(--component-button-color-outline-primary-border-default, #fe8839);
+}
+
+.button--outline-primary:hover:not(:disabled) {
+  background-color: var(--component-button-color-outline-primary-background-hover, #fff6ed);
+  border-color: var(--component-button-color-outline-primary-border-hover, #fc6613);
+}
+
+.button--outline-primary:active:not(:disabled) {
+  background-color: var(--component-button-color-outline-primary-background-pressed, #ffebd4);
+  border-color: var(--component-button-color-outline-primary-border-pressed, #ed4c09);
+}
+
+.button--outline-primary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--component-button-color-outline-primary-background-focused, #ffebd4);
+}
+
+.button--outline-primary:disabled {
+  background-color: var(--component-button-color-outline-primary-background-disabled, #ffffff);
+  color: var(--component-button-color-outline-primary-foreground-disabled, #a3a3a3);
+  border-color: var(--component-button-color-outline-primary-border-default, #fe8839);
+}
+
+.button--outline-secondary {
+  background-color: var(--component-button-color-outline-secondary-background-default, #ffffff);
+  color: var(--component-button-color-outline-secondary-foreground-default, #0d9394);
+  border: var(--border-width-input, 1rem) solid
+    var(
+      --component-button-color-outline-secondary-border-default,
+      var(--component-button-color-outline-secondary-foreground-default, #0d9394)
+    );
+}
+
+.button--outline-secondary:hover:not(:disabled) {
+  background-color: var(
+    --component-button-color-outline-secondary-background-hover,
+    var(--button-color-outline-secondary-background-hover, #f0fdfb)
+  );
+  border-color: var(
+    --component-button-color-outline-secondary-border-hover,
+    #0f7173
+  );
+}
+
+.button--outline-secondary:active:not(:disabled) {
+  background-color: var(
+    --component-button-color-outline-secondary-background-pressed,
+    var(--button-color-outline-secondary-background-pressed, #ccfbf6)
+  );
+  border-color: var(
+    --component-button-color-outline-secondary-border-pressed,
+    #115b5e
+  );
+}
+
+.button--outline-secondary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--component-button-color-outline-secondary-background-focused, #ffffff);
+}
+
+.button--outline-secondary:disabled {
+  background-color: var(--component-button-color-outline-secondary-background-disabled, #ffffff);
+  color: var(--component-button-color-outline-secondary-foreground-disabled, #a3a3a3);
+  border-color: var(--component-button-color-outline-secondary-border-default, var(--component-button-color-outline-secondary-foreground-default, #0d9394));
+}
+
+.button--secondary:hover:not(:disabled) {
+  background-color: var(--color-button-brand-background-secondary-hover, #0f7173);
+}
+
+.button--secondary:active:not(:disabled) {
+  background-color: var(--color-button-brand-background-secondary-pressed, #042c2f);
+}
+
+.button--secondary:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem
+    var(--color-button-brand-background-secondary-focused, #042c2f);
+}
+
+.button--secondary:disabled {
+  background-color: var(--color-button-brand-background-secondary-disabled, #f5f5f5);
+  color: var(--color-button-brand-foreground-secondary-disabled, #a3a3a3);
+}
+

package/dist/components/atoms/Tab/Tab.css

@@ -0,0 +1,149 @@
+@import "src/styles/tokens/tokens.css";
+
+.tab {
+  --tab-width: var(--tab-inline-lg-width, 124rem);
+  --tab-height: var(--tab-inline-lg-height, 78rem);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: calc(var(--tab-width) / 16);
+  height: calc(var(--tab-height) / 16);
+  gap: calc(var(--tab-spacing-container-gap, 0) / 16);
+  padding-top: calc(var(--tab-spacing-container-padding-y, 8rem) / 16);
+  padding-bottom: calc(var(--tab-spacing-container-padding-y, 8rem) / 16);
+  padding-left: calc(var(--tab-spacing-container-padding-x, 8rem) / 16);
+  padding-right: calc(var(--tab-spacing-container-padding-x, 8rem) / 16);
+  border: none;
+  border-radius: calc(var(--tab-border-radius-default, 0) / 16);
+  border-bottom-style: solid;
+  border-bottom-width: calc(var(--tab-border-width-default, 4rem) / 16);
+  border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
+  background-color: var(--tab-color-normal-default-background, #ffffff);
+  color: var(--color-text-state-default, #737373);
+  opacity: calc(var(--opacity-opacity-100, 100) / 100);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    transform 0.15s ease-in-out;
+}
+
+.tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--tab-color-normal-focused-border, #e5e5e5);
+  background-color: var(--tab-color-normal-focused-background, #ffffff);
+}
+
+.tab:hover:not(:disabled):not(.tab--active) {
+  background-color: var(--tab-color-normal-hover-background, #ededed);
+  border-bottom-color: var(--tab-color-normal-hover-border, #e5e5e5);
+  color: var(--color-text-state-hover, #404040);
+}
+
+.tab:active:not(:disabled):not(.tab--active) {
+  background-color: var(--tab-color-normal-pressed-background, #d9d9d9);
+  border-bottom-color: var(--tab-color-normal-pressed-border, #e5e5e5);
+  transform: translateY(calc(1rem / 16 * 1));
+  color: var(--color-text-state-hover, #404040);
+}
+
+.tab--active {
+  background-color: var(--tab-color-active-default-background, #ffffff);
+  border-bottom-color: var(--tab-color-active-default-border, #0f7173);
+  color: var(--color-text-state-filled, #262626);
+}
+
+.tab--active:hover:not(:disabled) {
+  border-bottom-color: var(--tab-color-active-hover-border, #115b5e);
+  background-color: var(--tab-color-active-hover-background, #ffffff);
+}
+
+.tab--active:active:not(:disabled) {
+  border-bottom-color: var(--tab-color-active-pressed-border, #042c2f);
+  background-color: var(--tab-color-active-pressed-background, #ffffff);
+}
+
+.tab--active:focus-visible {
+  box-shadow: 0 0 0 calc(2rem / 16)
+    var(--tab-color-active-focused-border, #042c2f);
+  background-color: var(--tab-color-active-focused-background, #ffffff);
+}
+
+.tab--disabled,
+.tab:disabled {
+  cursor: not-allowed;
+  color: var(--color-text-state-disabled, #a3a3a3);
+  background-color: var(--tab-color-normal-default-background, #ffffff);
+  border-bottom-color: var(--tab-color-normal-default-border, #e5e5e5);
+  opacity: 1;
+}
+
+.tab__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.tab--variant-inline.tab--size-lg {
+  --tab-width: var(--tab-inline-lg-width, 124rem);
+  --tab-height: var(--tab-inline-lg-height, 78rem);
+}
+
+.tab--variant-inline.tab--size-sm {
+  --tab-width: var(--tab-inline-sm-width, 115rem);
+  --tab-height: var(--tab-inline-sm-height, 56rem);
+}
+
+.tab--variant-outline.tab--size-sm {
+  --tab-width: var(--tab-outline-sm-width, 119rem);
+  --tab-height: var(--tab-outline-sm-height, 56rem);
+  border-bottom-color: var(--tab-color-active-default-border, #0f7173);
+}
+
+.tab--variant-outline.tab--size-lg {
+  --tab-width: var(--tab-outline-lg-width, 129rem);
+  --tab-height: var(--tab-outline-lg-height, 78rem);
+  border-bottom-color: var(--tab-color-active-default-border, #0f7173);
+}
+
+.tab--variant-outline {
+  background-color: var(--tab-color-active-default-background, #ffffff);
+}
+
+.tab--variant-outline:hover:not(:disabled):not(.tab--active),
+.tab--variant-outline:active:not(:disabled):not(.tab--active) {
+  background-color: var(--tab-color-active-hover-background, #ffffff);
+}
+
+.tab--variant-outline.tab--size-sm:hover:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-hover-border, #115b5e);
+}
+
+.tab--variant-outline.tab--size-sm:active:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-pressed-border, #042c2f);
+}
+
+.tab--variant-outline.tab--size-lg:hover:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-hover-border, #115b5e);
+}
+
+.tab--variant-outline.tab--size-lg:active:not(:disabled):not(.tab--active) {
+  border-bottom-color: var(--tab-color-active-pressed-border, #042c2f);
+}
+
+.tab--variant-outline.tab--size-sm:focus-visible {
+  outline: none;
+  box-shadow: none;
+  --tab-width: var(--tab-outline-sm-focus-width, 121rem);
+  --tab-height: var(--tab-outline-sm-focus-height, 59rem);
+  border-radius: calc(var(--border-radius-rounded-sm, 4rem) / 16);
+  border-top: calc(var(--border-border, 1rem) / 16)
+    solid var(--color-atoll-green-800, #0f7173);
+}
+