@mirohq/design-system-button 3.2.0-deprecated-button.1 → 4.0.0-button.0

package/dist/module.js

@@ -1,299 +1,313 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
-import { useButton } from '@react-aria/button';
-import { mergeProps } from '@react-aria/utils';
+import React, { createContext, useContext } from 'react';
+import { addPropsToChildren, booleanify } from '@mirohq/design-system-utils';
 import { Spinner } from '@mirohq/design-system-spinner';
-import { useLink } from '@react-aria/link';
-import { useFocusRing } from '@react-aria/focus';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
+import { BaseButton, sizes } from '@mirohq/design-system-base-button';
+import { isIconComponent, styles } from '@mirohq/design-system-base-icon';
+import { focus } from '@mirohq/design-system-styles';
 
-const focusFilled = {
-  "&[data-focused]": {
-    boxShadow: "inset 0 0 0 1px white, 0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)"
+const ButtonContext = createContext({});
+const ButtonProvider = ({
+  children,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  ButtonContext.Provider,
+  {
+    value: {
+      ...restProps
+    },
+    children
   }
+);
+const useButtonContext = () => useContext(ButtonContext);
+
+const StyledIconSlot = styled(Primitive.div, {});
+const buttonIconSizes = {
+  small: "small",
+  medium: "small",
+  large: "medium",
+  "x-large": "medium"
 };
-const focusOutline = {
-  "&[data-focused]": {
-    boxShadow: "0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)",
-    borderColor: "transparent"
+const buttonIconWeights = {
+  small: "thin",
+  medium: "thin",
+  large: "normal",
+  "x-large": "normal"
+};
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { size } = useButtonContext();
+  const formattedChildren = addPropsToChildren(
+    children,
+    (child) => isIconComponent(child),
+    {
+      "data-icon-component": "",
+      size: buttonIconSizes[size],
+      weight: buttonIconWeights[size]
+    }
+  );
+  return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
+});
+
+const disabledSelector = '&[disabled], &[aria-disabled="true"]';
+const iconSlotSelector = "& ".concat(StyledIconSlot);
+const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
+const solidDisabled = {
+  [disabledSelector]: {
+    backgroundColor: "$background-neutrals-disabled",
+    color: "$text-neutrals-disabled",
+    [iconSlotSelector]: {
+      color: "$icon-neutrals-disabled"
+    }
+  }
+};
+const outlineDisabled = {
+  [disabledSelector]: {
+    backgroundColor: "$background-neutrals",
+    borderColor: "$border-neutrals-disabled",
+    color: "$text-neutrals-disabled",
+    [iconSlotSelector]: {
+      color: "$icon-neutrals-disabled"
+    }
   }
 };
-const focusDefault = {
-  "&[data-focused]": {
-    boxShadow: "0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)"
+const ghostDisabled = {
+  [disabledSelector]: {
+    color: "$text-neutrals-disabled",
+    backgroundColor: "$transparent",
+    [iconSlotSelector]: {
+      color: "$icon-neutrals-disabled"
+    }
   }
 };
-const pressedSelector = "&:active, &[data-pressed]";
-const StyledButton = styled(Primitive.button, {
-  boxSizing: "border-box",
-  display: "inline-block",
-  outline: "none",
+const LABEL_OFFSET = 2;
+const StyledButton = styled(BaseButton, {
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   textAlign: "center",
-  verticalAlign: "middle",
-  userSelect: "none",
-  fontFamily: "inherit",
-  fontStyle: "normal",
-  fontStretch: "normal",
-  letterSpacing: "normal",
-  fontWeight: "normal",
   position: "relative",
-  cursor: "pointer",
-  border: "none",
-  textDecoration: "none",
-  backgroundColor: "transparent",
-  "&[disabled]": {
-    pointerEvents: "none",
-    opacity: 0.4
+  width: "fit-content",
+  maxWidth: "100%",
+  lineHeight: 1,
+  fontWeight: "$semibold",
+  border: "1px solid transparent",
+  // to make outline and solid/ghost variants the same width
+  ...focus.css({
+    //  TODO https://miro.atlassian.net/browse/MDS-1284 use `$focus-small` token after updating themes/web/local/shadows.ts :oliver.l 2024-09-05
+    boxShadow: "0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard"
+  }),
+  ["& ".concat(StyledIconSlot, ":first-child")]: {
+    marginLeft: -LABEL_OFFSET,
+    marginRight: "calc($50 + ".concat(LABEL_OFFSET, "px)")
+  },
+  ["& ".concat(StyledIconSlot, ":last-child")]: {
+    marginRight: -LABEL_OFFSET,
+    marginLeft: "calc($50 + ".concat(LABEL_OFFSET, "px)")
   },
   variants: {
     variant: {
-      primary: {},
-      secondary: {},
-      danger: {}
-    },
-    appearance: {
-      filled: {},
-      outlined: {},
-      flat: {}
-    },
-    size: {
-      large: {
-        padding: "14px 32px 18px 32px",
-        fontSize: "20px",
-        lineHeight: "28px",
-        height: "60px"
+      primary: {
+        backgroundColor: "$background-primary-prominent",
+        color: "$text-neutrals-inverted",
+        [iconSlotSelector]: {
+          color: "$icon-primary-inverted"
+        },
+        "&[data-hovered]": {
+          backgroundColor: "$background-primary-prominent-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-primary-prominent-active"
+        },
+        ...solidDisabled
       },
-      medium: {
-        padding: "11px 24px 13px 24px",
-        fontSize: "16px",
-        lineHeight: "24px",
-        height: "48px"
+      secondary: {
+        backgroundColor: "$button-background-secondary",
+        color: "$text-neutrals",
+        [iconSlotSelector]: {
+          color: "$icon-neutrals"
+        },
+        "&[data-hovered]": {
+          color: "$text-neutrals-hover",
+          backgroundColor: "$button-background-secondary-hover"
+        },
+        "&[data-pressed]": {
+          color: "$text-neutrals-active",
+          backgroundColor: "$button-background-secondary-pressed"
+        },
+        ...solidDisabled
       },
-      small: {
-        padding: "7px 16px 9px 16px",
-        fontSize: "14px",
-        lineHeight: "20px",
-        height: "36px"
+      tertiary: {
+        borderColor: "$border-primary",
+        color: "$text-primary",
+        [iconSlotSelector]: {
+          color: "$icon-primary"
+        },
+        "&[data-hovered]": {
+          backgroundColor: "$background-primary-subtle-hover",
+          borderColor: "$border-primary-hover",
+          color: "$text-primary-hover",
+          [iconSlotSelector]: {
+            color: "$icon-primary-hover"
+          }
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-primary-subtle-active",
+          borderColor: "$border-primary-active",
+          color: "$text-primary-active",
+          [iconSlotSelector]: {
+            color: "$icon-primary-active"
+          }
+        },
+        ...outlineDisabled
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        color: "$text-neutrals",
+        "&[data-hovered]": {
+          backgroundColor: "$button-background-secondary-hover",
+          color: "$text-neutrals-hover",
+          [iconSlotSelector]: {
+            color: "$icon-primary-hover"
+          }
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$button-background-secondary-pressed",
+          color: "$text-neutrals-active",
+          [iconSlotSelector]: {
+            color: "$icon-primary-active"
+          }
+        },
+        ...ghostDisabled
       },
-      "x-small": {
-        padding: "5px 12px 7px",
-        fontSize: "14px",
-        lineHeight: "20px",
-        height: "32px"
+      "ghost-subtle": {
+        backgroundColor: "transparent",
+        color: "$text-neutrals",
+        [iconSlotSelector]: {
+          color: "$icon-neutrals"
+        },
+        "&[data-hovered]": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-neutrals-subtle-active"
+        },
+        ...ghostDisabled
       },
-      "xx-small": {
-        padding: "3px 12px",
-        fontSize: "12px",
-        lineHeight: "18px",
-        height: "24px"
-      }
-    },
-    rounded: {
-      true: {
-        borderRadius: "$half"
-      }
-    },
-    loading: {
-      true: {
-        "&[disabled]": {
-          cursor: "default",
-          opacity: 1,
-          pointerEvents: "none",
-          "& > span": {
-            visibility: "hidden"
+      danger: {
+        backgroundColor: "$background-danger-prominent",
+        color: "$text-danger-inverted",
+        [iconSlotSelector]: {
+          color: "$icon-danger-inverted"
+        },
+        "&[data-hovered]": {
+          backgroundColor: "$background-danger-prominent-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-danger-prominent-active"
+        },
+        ...solidDisabled
+      },
+      "danger-secondary": {
+        borderColor: "$border-danger",
+        color: "$text-danger",
+        [iconSlotSelector]: {
+          color: "$icon-danger"
+        },
+        "&[data-hovered]": {
+          backgroundColor: "$background-danger-subtle-hover",
+          color: "$text-danger-hover",
+          [iconSlotSelector]: {
+            color: "$icon-danger-hover"
           }
-        }
-      }
-    },
-    fluid: {
-      true: {
-        width: "100%",
-        display: "block"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      size: "small",
-      rounded: true,
-      css: {
-        padding: "10px 16px",
-        height: "40px"
-      }
-    },
-    {
-      size: "large",
-      rounded: false,
-      css: {
-        borderRadius: "$50"
-      }
-    },
-    {
-      size: "medium",
-      rounded: false,
-      css: {
-        borderRadius: "$50"
-      }
-    },
-    {
-      size: "small",
-      rounded: false,
-      css: {
-        borderRadius: "$50"
-      }
-    },
-    {
-      size: "x-small",
-      rounded: false,
-      css: {
-        borderRadius: "$50"
-      }
-    },
-    {
-      size: "xx-small",
-      rounded: false,
-      css: {
-        borderRadius: "$25"
-      }
-    },
-    {
-      variant: "primary",
-      appearance: "filled",
-      css: {
-        color: "#FFFFFF",
-        backgroundColor: "#3859FF",
-        ...focusFilled,
-        "&:hover": {
-          color: "#FFFFFF",
-          backgroundColor: "#3F53D9"
         },
-        [pressedSelector]: {
-          backgroundColor: "#122277"
-        }
-      }
-    },
-    {
-      variant: "primary",
-      appearance: "outlined",
-      css: {
-        color: "rgba(66, 98, 255, 1)",
-        border: "1px solid rgba(66, 98, 255, 1)",
-        ...focusOutline,
-        "&:hover": {
-          color: "rgba(66, 98, 255, 1)",
-          backgroundColor: "rgba(244, 246, 255, 1)"
+        "&[data-pressed]": {
+          backgroundColor: "$background-danger-subtle-active",
+          color: "$text-danger-active",
+          [iconSlotSelector]: {
+            color: "$icon-danger-active"
+          }
         },
-        [pressedSelector]: {
-          backgroundColor: "rgba(240, 242, 255, 1)"
-        }
-      }
-    },
-    {
-      variant: "primary",
-      appearance: "flat",
-      css: {
-        color: "rgba(66, 98, 255, 1)",
-        ...focusDefault,
-        "&:hover": {
-          color: "rgba(69, 91, 237, 1)",
-          backgroundColor: "rgba(245, 245, 247, 1)"
+        ...outlineDisabled
+      },
+      "ghost-danger": {
+        backgroundColor: "transparent",
+        color: "$text-danger",
+        [iconSlotSelector]: {
+          color: "$icon-danger"
         },
-        [pressedSelector]: {
-          color: "rgba(61, 81, 212, 1)"
-        }
-      }
-    },
-    {
-      variant: "secondary",
-      appearance: "filled",
-      css: {
-        color: "rgba(5, 0, 56, 1)",
-        backgroundColor: "rgba(245, 245, 247, 1)",
-        ...focusFilled,
-        "&:hover": {
-          color: "rgba(5, 0, 56, 1)",
-          backgroundColor: "rgba(240, 240, 243, 1)"
+        "&[data-hovered]": {
+          backgroundColor: "$background-danger-subtle",
+          color: "$text-danger-hover",
+          [iconSlotSelector]: {
+            color: "$icon-danger-hover"
+          }
         },
-        [pressedSelector]: {
-          backgroundColor: "rgba(235, 235, 239, 1)"
-        }
-      }
-    },
-    {
-      variant: "secondary",
-      appearance: "outlined",
-      css: {
-        color: "rgba(5, 0, 56, 1)",
-        border: "1px solid rgba(205, 204, 215, 1)",
-        ...focusOutline,
-        "&:hover": {
-          color: "rgba(5, 0, 56, 1)",
-          backgroundColor: "rgba(245, 245, 247, 1)"
+        "&[data-pressed]": {
+          backgroundColor: "$background-danger-subtle-hover",
+          color: "$text-danger-active",
+          [iconSlotSelector]: {
+            color: "$icon-danger-active"
+          }
         },
-        [pressedSelector]: {
-          backgroundColor: "rgba(235, 235, 239, 1)"
-        }
+        ...ghostDisabled
       }
     },
-    {
-      variant: "secondary",
-      appearance: "flat",
-      css: {
-        color: "rgba(5, 0, 56, 1)",
-        ...focusDefault,
-        "&:hover": {
-          color: "rgba(5, 0, 56, 1)",
-          backgroundColor: "rgba(245, 245, 247, 1)"
+    size: {
+      "x-large": {
+        height: sizes.xLarge,
+        fontSize: "$200",
+        paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
+        [externalIconSelector]: {
+          ...styles.size.medium,
+          ...styles.weight.normal
         }
-      }
-    },
-    {
-      variant: "danger",
-      appearance: "filled",
-      css: {
-        color: "#FFFFFF",
-        backgroundColor: "rgba(217, 41, 41, 1)",
-        ...focusFilled,
-        "&:hover": {
-          backgroundColor: "rgba(199, 20, 20, 1)"
-        },
-        [pressedSelector]: {
-          backgroundColor: "rgba(184, 13, 13, 1)"
+      },
+      large: {
+        height: sizes.large,
+        fontSize: "$200",
+        paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
+        [externalIconSelector]: {
+          ...styles.size.medium,
+          ...styles.weight.normal
+        }
+      },
+      medium: {
+        height: sizes.medium,
+        fontSize: "$175",
+        paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
+        [externalIconSelector]: {
+          ...styles.size.small,
+          ...styles.weight.thin
+        }
+      },
+      small: {
+        fontSize: "$175",
+        height: "$6",
+        paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
+        [externalIconSelector]: {
+          ...styles.size.small,
+          ...styles.weight.thin
         }
       }
     },
-    {
-      variant: "danger",
-      appearance: "outlined",
-      css: {
-        color: "rgba(217, 41, 41, 1)",
-        border: "1px solid rgba(217, 41, 41, 1)",
-        ...focusOutline,
-        "&:hover": {
-          color: "rgba(217, 41, 41, 1)",
-          backgroundColor: "rgba(254, 247, 247, 1)"
-        },
-        [pressedSelector]: {
-          backgroundColor: "rgba(253, 242, 242, 1)"
-        }
+    rounded: {
+      true: {
+        borderRadius: "$round"
       }
     },
-    {
-      variant: "danger",
-      appearance: "flat",
-      css: {
-        color: "rgba(217, 41, 41, 1)",
-        ...focusDefault,
-        "&:hover": {
-          color: "rgba(217, 41, 41, 1)",
-          backgroundColor: "rgba(245, 245, 247, 1)"
-        }
+    fluid: {
+      true: {
+        display: "flex",
+        justifyContent: "center",
+        maxWidth: "100%",
+        width: "100%"
       }
     }
-  ]
+  }
+});
+const StyledHiddenContent = styled(Primitive.span, {
+  visibility: "hidden"
 });
 const StyledSpinnerBox = styled(Primitive.div, {
   display: "flex",
@@ -307,97 +321,64 @@ const StyledSpinnerBox = styled(Primitive.div, {
   margin: "auto"
 });
 
+const Label = Primitive.span;
+Label.displayName = "Label";
+
 const Button = React.forwardRef(
   ({
     variant = "primary",
-    appearance = "filled",
-    size = "medium",
+    size = "large",
     loading = false,
     rounded = false,
     fluid = false,
-    disabled = false,
-    href,
-    target,
-    rel,
+    "aria-disabled": ariaDisabled,
+    asChild = false,
     children,
-    onPress,
-    onClick,
-    asChild,
     ...restProps
   }, forwardRef) => {
-    let spinnerSize;
-    if (typeof size === "string") {
-      spinnerSize = ["x-small", "xx-small"].includes(size) ? "small" : "medium";
-    } else {
-      spinnerSize = "medium";
+    let spinnerSize = "medium";
+    if (typeof size === "string" && ["small", "medium"].includes(size)) {
+      spinnerSize = "small";
     }
-    const _loading = loading === "true" || loading === true;
-    const shouldBeDisabled = disabled === true || _loading;
-    const asLink = href != null;
-    const ref = useRef(null);
-    const refWithFallback = forwardRef != null ? forwardRef : ref;
-    const { buttonProps, isPressed } = useButton(
-      {
-        isDisabled: shouldBeDisabled,
-        href,
-        onPress: onPress != null ? onPress : onClick,
-        allowFocusWhenDisabled: false,
-        ...restProps
-      },
-      // @ts-expect-error
-      refWithFallback
-    );
-    const { linkProps } = useLink(
-      {
-        isDisabled: disabled,
-        onPress: onPress != null ? onPress : onClick,
-        ...restProps
-      },
-      // @ts-expect-error
-      refWithFallback
-    );
-    const Content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      _loading && /* @__PURE__ */ jsx(StyledSpinnerBox, { children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize }) }),
-      /* @__PURE__ */ jsx("span", { children })
-    ] });
-    const tabIndexProp = shouldBeDisabled && {
-      tabIndex: -1
-    };
-    const { isFocusVisible, focusProps } = useFocusRing();
-    const elementProps = mergeProps(
-      restProps,
-      asLink ? linkProps : buttonProps,
-      focusProps
-    );
-    return /* @__PURE__ */ jsx(
+    const shouldHaveAriaDisabled = booleanify(ariaDisabled) || loading;
+    let formattedChildren = children;
+    if (loading) {
+      const spinnerTestId = process.env.NODE_ENV === "test" ? "button-spinner" : void 0;
+      if (asChild && React.Children.toArray(children).length === 1 && React.isValidElement(children)) {
+        const firstLevelChild = React.Children.only(children);
+        const { children: secondLevelChildren, ...childProps } = firstLevelChild.props;
+        formattedChildren = React.cloneElement(firstLevelChild, {
+          ...childProps,
+          children: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(StyledSpinnerBox, { "data-testid": spinnerTestId, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize }) }),
+            /* @__PURE__ */ jsx(StyledHiddenContent, { children: secondLevelChildren })
+          ] })
+        });
+      } else {
+        formattedChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(StyledSpinnerBox, { "data-testid": spinnerTestId, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize }) }),
+          /* @__PURE__ */ jsx(StyledHiddenContent, { children })
+        ] });
+      }
+    }
+    return /* @__PURE__ */ jsx(ButtonProvider, { size, children: /* @__PURE__ */ jsx(
       StyledButton,
       {
-        ...elementProps,
+        ...restProps,
+        asChild,
         variant,
-        appearance,
-        size,
-        loading,
         rounded,
         fluid,
-        disabled: shouldBeDisabled,
-        asChild: asLink || asChild,
-        ...tabIndexProp,
-        "data-pressed": isPressed ? "" : void 0,
-        "data-focused": isFocusVisible ? "" : void 0,
-        ref: refWithFallback,
-        children: asLink ? /* @__PURE__ */ jsx(
-          "a",
-          {
-            href,
-            target,
-            rel: target === "_blank" ? "noopener noreferrer ".concat(rel) : rel,
-            children: Content
-          }
-        ) : Content
+        size,
+        "aria-disabled": shouldHaveAriaDisabled ? true : void 0,
+        ref: forwardRef,
+        children: formattedChildren
       }
-    );
+    ) });
   }
 );
+Button.IconSlot = IconSlot;
+Button.Label = Label;
 
 export { Button };
 //# sourceMappingURL=module.js.map