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

package/dist/module.js

@@ -1,290 +1,299 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useRef } from 'react';
+import { useButton } from '@react-aria/button';
+import { mergeProps } from '@react-aria/utils';
 import { Spinner } from '@mirohq/design-system-spinner';
-import { booleanify, addPropsToChildren } from '@mirohq/design-system-utils';
-import { styles, isIconComponent } from '@mirohq/design-system-base-icon';
+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 { focus } from '@mirohq/design-system-styles';
 
-const StyledIconSlot = styled(Primitive.div, {});
-const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children }));
-
-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 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 outlineDisabled = {
-  [disabledSelector]: {
-    backgroundColor: "$background-neutrals",
-    borderColor: "$border-neutrals-disabled",
-    color: "$text-neutrals-disabled",
-    [iconSlotSelector]: {
-      color: "$icon-neutrals-disabled"
-    }
+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 ghostDisabled = {
-  [disabledSelector]: {
-    color: "$text-neutrals-disabled",
-    backgroundColor: "$transparent",
-    [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 LABEL_OFFSET = 2;
-const StyledButton = styled(BaseButton, {
+const pressedSelector = "&:active, &[data-pressed]";
+const StyledButton = styled(Primitive.button, {
+  boxSizing: "border-box",
+  display: "inline-block",
+  outline: "none",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   textAlign: "center",
+  verticalAlign: "middle",
+  userSelect: "none",
+  fontFamily: "inherit",
+  fontStyle: "normal",
+  fontStretch: "normal",
+  letterSpacing: "normal",
+  fontWeight: "normal",
   position: "relative",
-  width: "fit-content",
-  maxWidth: "100%",
-  lineHeight: 1.5,
-  border: "1px solid transparent",
-  // to make outline and solid/ghost variants the same width
-  ...focus.css({
-    boxShadow: "$focus-small-outline",
-    borderColor: "$blue-400 !important"
-  }),
-  ["& ".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)")
+  cursor: "pointer",
+  border: "none",
+  textDecoration: "none",
+  backgroundColor: "transparent",
+  "&[disabled]": {
+    pointerEvents: "none",
+    opacity: 0.4
   },
   variants: {
     variant: {
-      "solid-prominent": {
-        backgroundColor: "$background-primary-prominent",
-        color: "$text-primary-inverted",
-        [iconSlotSelector]: {
-          color: "$icon-primary-inverted"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-primary-prominent-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-primary-prominent-active"
-        },
-        ...solidDisabled
-      },
-      "outline-prominent": {
-        backgroundColor: "$background-neutrals",
-        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-prominent": {
-        backgroundColor: "transparent",
-        color: "$text-primary",
-        "&[data-hovered]": {
-          backgroundColor: "$background-primary-subtle-hover",
-          color: "$text-primary-hover",
-          [iconSlotSelector]: {
-            color: "$icon-primary-hover"
-          }
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-primary-subtle-active",
-          color: "$text-primary-active",
-          [iconSlotSelector]: {
-            color: "$icon-primary-active"
-          }
-        },
-        ...ghostDisabled
-      },
-      "solid-subtle": {
-        backgroundColor: "$background-neutrals-subtle",
-        color: "$text-neutrals",
-        [iconSlotSelector]: {
-          color: "$icon-neutrals"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
-        ...solidDisabled
+      primary: {},
+      secondary: {},
+      danger: {}
+    },
+    appearance: {
+      filled: {},
+      outlined: {},
+      flat: {}
+    },
+    size: {
+      large: {
+        padding: "14px 32px 18px 32px",
+        fontSize: "20px",
+        lineHeight: "28px",
+        height: "60px"
       },
-      "outline-subtle": {
-        backgroundColor: "$background-neutrals",
-        border: "1px solid $border-neutrals",
-        color: "$text-neutrals",
-        [iconSlotSelector]: {
-          color: "$icon-neutrals"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-neutrals-subtle-hover",
-          borderColor: "$border-neutrals-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-neutrals-subtle-active",
-          borderColor: "$border-neutrals-active"
-        },
-        ...outlineDisabled
+      medium: {
+        padding: "11px 24px 13px 24px",
+        fontSize: "16px",
+        lineHeight: "24px",
+        height: "48px"
       },
-      "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
+      small: {
+        padding: "7px 16px 9px 16px",
+        fontSize: "14px",
+        lineHeight: "20px",
+        height: "36px"
       },
-      "solid-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
+      "x-small": {
+        padding: "5px 12px 7px",
+        fontSize: "14px",
+        lineHeight: "20px",
+        height: "32px"
       },
-      "outline-danger": {
-        backgroundColor: "$background-neutrals",
-        borderColor: "$border-danger",
-        color: "$text-danger",
-        [iconSlotSelector]: {
-          color: "$icon-danger"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-danger-subtle",
-          color: "$text-danger-hover",
-          [iconSlotSelector]: {
-            color: "$icon-danger-hover"
-          }
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-danger-subtle-hover",
-          color: "$text-danger-active",
-          [iconSlotSelector]: {
-            color: "$icon-danger-active"
+      "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"
           }
+        }
+      }
+    },
+    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"
         },
-        ...outlineDisabled
-      },
-      "ghost-danger": {
-        backgroundColor: "transparent",
-        color: "$text-danger",
-        [iconSlotSelector]: {
-          color: "$icon-danger"
-        },
-        "&[data-hovered]": {
-          backgroundColor: "$background-danger-subtle",
-          color: "$text-danger-hover",
-          [iconSlotSelector]: {
-            color: "$icon-danger-hover"
-          }
+        [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-hover",
-          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)"
         },
-        ...ghostDisabled
+        [pressedSelector]: {
+          color: "rgba(61, 81, 212, 1)"
+        }
       }
     },
-    size: {
-      "x-large": {
-        height: sizes.xLarge,
-        fontSize: "$200",
-        paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
-        [externalIconSelector]: {
-          ...styles.size.medium,
-          ...styles.weight.normal
+    {
+      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)"
+        },
+        [pressedSelector]: {
+          backgroundColor: "rgba(235, 235, 239, 1)"
         }
-      },
-      large: {
-        height: sizes.large,
-        fontSize: "$200",
-        paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
-        [externalIconSelector]: {
-          ...styles.size.medium,
-          ...styles.weight.normal
+      }
+    },
+    {
+      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)"
+        },
+        [pressedSelector]: {
+          backgroundColor: "rgba(235, 235, 239, 1)"
         }
-      },
-      medium: {
-        height: sizes.medium,
-        fontSize: "$175",
-        paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
-        [externalIconSelector]: {
-          ...styles.size.small,
-          ...styles.weight.thin
+      }
+    },
+    {
+      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)"
         }
-      },
-      small: {
-        fontSize: "$175",
-        height: "$6",
-        paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
-        [externalIconSelector]: {
-          ...styles.size.small,
-          ...styles.weight.thin
+      }
+    },
+    {
+      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)"
         }
       }
     },
-    rounded: {
-      true: {
-        borderRadius: "$half"
+    {
+      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)"
+        }
       }
     },
-    fluid: {
-      true: {
-        display: "flex",
-        justifyContent: "center",
-        maxWidth: "100%",
-        width: "100%"
+    {
+      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)"
+        }
       }
     }
-  }
-});
-const StyledHiddenContent = styled(Primitive.span, {
-  visibility: "hidden"
+  ]
 });
 const StyledSpinnerBox = styled(Primitive.div, {
   display: "flex",
@@ -298,76 +307,97 @@ const StyledSpinnerBox = styled(Primitive.div, {
   margin: "auto"
 });
 
-const Label = Primitive.span;
-Label.displayName = "Label";
-
-const buttonIconSizes = {
-  small: "small",
-  medium: "small",
-  large: "medium",
-  "x-large": "medium"
-};
-const buttonIconWeights = {
-  small: "thin",
-  medium: "thin",
-  large: "normal",
-  "x-large": "normal"
-};
 const Button = React.forwardRef(
   ({
-    variant = "solid-prominent",
-    size = "large",
+    variant = "primary",
+    appearance = "filled",
+    size = "medium",
     loading = false,
     rounded = false,
     fluid = false,
-    "aria-disabled": ariaDisabled,
+    disabled = false,
+    href,
+    target,
+    rel,
     children,
+    onPress,
+    onClick,
+    asChild,
     ...restProps
   }, forwardRef) => {
-    let spinnerSize = "medium";
-    if (typeof size === "string" && ["small", "medium"].includes(size)) {
-      spinnerSize = "small";
+    let spinnerSize;
+    if (typeof size === "string") {
+      spinnerSize = ["x-small", "xx-small"].includes(size) ? "small" : "medium";
+    } else {
+      spinnerSize = "medium";
     }
-    const shouldHaveAriaDisabled = booleanify(ariaDisabled) || loading;
-    const formattedChildren = React.Children.map(
-      React.Children.toArray(children),
-      (child) => {
-        if (React.isValidElement(child) && child.type === IconSlot) {
-          const iconSlotChildren = addPropsToChildren(
-            child.props.children,
-            (innerChild) => isIconComponent(innerChild),
-            {
-              "data-icon-component": "",
-              size: buttonIconSizes[size],
-              weight: buttonIconWeights[size]
-            }
-          );
-          return React.cloneElement(child, { ...child.props }, iconSlotChildren);
-        }
-        return child;
-      }
+    const _loading = loading === "true" || loading === true;
+    const shouldBeDisabled = disabled || _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,
+        // @ts-expect-error
+        allowFocusWhenDisabled: false,
+        ...restProps
+      },
+      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
     );
-    const Content = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(StyledSpinnerBox, { children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize }) }),
-      /* @__PURE__ */ jsx(StyledHiddenContent, { children: formattedChildren })
-    ] }) : formattedChildren;
     return /* @__PURE__ */ jsx(
       StyledButton,
       {
-        ...restProps,
+        ...elementProps,
         variant,
+        appearance,
+        size,
+        loading,
         rounded,
         fluid,
-        size,
-        "aria-disabled": shouldHaveAriaDisabled ? true : void 0,
-        ref: forwardRef,
-        children: Content
+        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
       }
     );
   }
 );
-Button.IconSlot = IconSlot;
-Button.Label = Label;
 
 export { Button };
 //# sourceMappingURL=module.js.map