mautourco-components 0.2.9 → 0.2.11

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

@@ -2115,6 +2115,11 @@
   line-height: calc(var(--font-leading-leading-sm, 20)* 1rem);
 }
 
+.button--sm.button--with-icon {
+  /* Figma button/md gap is 10px even when used with 14px text + icon */
+  gap: var(--component-button-spacing-md-gap, 10px);
+}
+
 .button--md {
   padding: var(--component-button-spacing-md-padding-y, 10rem)
     var(--component-button-spacing-md-padding-x, 14rem);
@@ -2184,6 +2189,29 @@
   color: var(--color-button-brand-foreground-secondary-default, #ffffff);
 }
 
+.button--destructive {
+  background-color: var(--color-button-destructive-background-default, #dc2626);
+  color: var(--color-button-destructive-foreground-default, #ffffff);
+}
+
+.button--destructive:hover:not(:disabled) {
+  background-color: var(--color-button-destructive-background-hover, #991b1b);
+}
+
+.button--destructive:active:not(:disabled) {
+  background-color: var(--color-button-destructive-background-pressed, #450a0a);
+}
+
+.button--destructive:focus-visible:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 2rem var(--color-button-destructive-background-hover, #991b1b);
+}
+
+.button--destructive:disabled {
+  background-color: var(--color-button-destructive-background-disabled, #f5f5f5);
+  color: var(--color-button-destructive-foreground-disabled, #a3a3a3);
+}
+
 .button--outline-primary {
   background-color: var(--component-button-color-outline-primary-background-default, #ffffff);
   color: var(--component-button-color-outline-primary-foreground-default, #fe8839);

package/dist/components/atoms/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { IconName } from '../Icon/Icon';
 import './Button.css';
 export interface ButtonProps {
     /** Variant du bouton */
-    variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
+    variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary' | 'destructive';
     /** Taille du bouton */
     size?: 'sm' | 'md' | 'lg' | 'xl';
     /** Contenu du bouton */

package/dist/components/atoms/Button/Button.js

@@ -30,6 +30,7 @@ var Button = function (_a) {
         .join(' ');
     var hasLeadingIcon = Boolean(leadingIcon);
     var hasTrailingIcon = Boolean(trailingIcon);
-    return (_jsxs("button", __assign({ type: type, className: buttonClasses, disabled: disabled, onClick: onClick }, { children: [hasLeadingIcon && (_jsx("span", __assign({ className: "button__icon button__icon--leading" }, { children: _jsx(Icon, { name: leadingIcon, size: iconSize }) }))), _jsx("span", __assign({ className: "button__label" }, { children: children })), hasTrailingIcon && (_jsx("span", __assign({ className: "button__icon button__icon--trailing" }, { children: _jsx(Icon, { name: trailingIcon, size: iconSize }) })))] })));
+    var withIconClass = hasLeadingIcon || hasTrailingIcon ? 'button--with-icon' : '';
+    return (_jsxs("button", __assign({ type: type, className: [buttonClasses, withIconClass].filter(Boolean).join(' '), disabled: disabled, onClick: onClick }, { children: [hasLeadingIcon && (_jsx("span", __assign({ className: "button__icon button__icon--leading" }, { children: _jsx(Icon, { name: leadingIcon, size: iconSize }) }))), _jsx("span", __assign({ className: "button__label" }, { children: children })), hasTrailingIcon && (_jsx("span", __assign({ className: "button__icon button__icon--trailing" }, { children: _jsx(Icon, { name: trailingIcon, size: iconSize }) })))] })));
 };
 export default Button;