mautourco-components 0.2.4 → 0.2.7

package/src/components/atoms/Button/Button.css

@@ -1,200 +1,200 @@
-.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;
-  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);
-}
-
+.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;
+  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/src/components/atoms/Button/Button.tsx

@@ -1,82 +1,82 @@
-import React from 'react';
-import Icon, { IconName } from '../Icon/Icon';
-import './Button.css';
-
-export interface ButtonProps {
-  /** Variant du bouton */
-  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
-  /** Taille du bouton */
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  /** Contenu du bouton */
-  children: React.ReactNode;
-  /** Icône affichée avant le libellé */
-  leadingIcon?: IconName;
-  /** Icône affichée après le libellé */
-  trailingIcon?: IconName;
-  /** Taille des icônes */
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  /** État désactivé */
-  disabled?: boolean;
-  /** Handler de clic */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Type de bouton */
-  type?: 'button' | 'submit' | 'reset';
-  /** Classes CSS supplémentaires */
-  className?: string;
-}
-
-const Button: React.FC<ButtonProps> = ({
-  variant = 'primary',
-  size = 'md',
-  children,
-  leadingIcon,
-  trailingIcon,
-  iconSize = 'sm',
-  disabled = false,
-  onClick,
-  type = 'button',
-  className = '',
-}) => {
-  const baseClasses = 'button';
-  const normalizedVariant =
-    variant === 'outline' ? 'outline-primary' : variant;
-  const variantClass = `button--${normalizedVariant}`;
-  const sizeClass = `button--${size}`;
-  const disabledClass = disabled ? 'button--disabled' : '';
-
-  const buttonClasses = [
-    baseClasses,
-    variantClass,
-    sizeClass,
-    disabledClass,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const hasLeadingIcon = Boolean(leadingIcon);
-  const hasTrailingIcon = Boolean(trailingIcon);
-
-  return (
-    <button
-      type={type}
-      className={buttonClasses}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {hasLeadingIcon && (
-        <span className="button__icon button__icon--leading">
-          <Icon name={leadingIcon!} size={iconSize} />
-        </span>
-      )}
-      <span className="button__label">{children}</span>
-      {hasTrailingIcon && (
-        <span className="button__icon button__icon--trailing">
-          <Icon name={trailingIcon!} size={iconSize} />
-        </span>
-      )}
-    </button>
-  );
-};
-
-export default Button;
+import React from 'react';
+import Icon, { IconName } from '../Icon/Icon';
+import './Button.css';
+
+export interface ButtonProps {
+  /** Variant du bouton */
+  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
+  /** Taille du bouton */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  /** Contenu du bouton */
+  children: React.ReactNode;
+  /** Icône affichée avant le libellé */
+  leadingIcon?: IconName;
+  /** Icône affichée après le libellé */
+  trailingIcon?: IconName;
+  /** Taille des icônes */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** État désactivé */
+  disabled?: boolean;
+  /** Handler de clic */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Type de bouton */
+  type?: 'button' | 'submit' | 'reset';
+  /** Classes CSS supplémentaires */
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  children,
+  leadingIcon,
+  trailingIcon,
+  iconSize = 'sm',
+  disabled = false,
+  onClick,
+  type = 'button',
+  className = '',
+}) => {
+  const baseClasses = 'button';
+  const normalizedVariant =
+    variant === 'outline' ? 'outline-primary' : variant;
+  const variantClass = `button--${normalizedVariant}`;
+  const sizeClass = `button--${size}`;
+  const disabledClass = disabled ? 'button--disabled' : '';
+
+  const buttonClasses = [
+    baseClasses,
+    variantClass,
+    sizeClass,
+    disabledClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const hasLeadingIcon = Boolean(leadingIcon);
+  const hasTrailingIcon = Boolean(trailingIcon);
+
+  return (
+    <button
+      type={type}
+      className={buttonClasses}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {hasLeadingIcon && (
+        <span className="button__icon button__icon--leading">
+          <Icon name={leadingIcon!} size={iconSize} />
+        </span>
+      )}
+      <span className="button__label">{children}</span>
+      {hasTrailingIcon && (
+        <span className="button__icon button__icon--trailing">
+          <Icon name={trailingIcon!} size={iconSize} />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Button;