@mirohq/design-system-button 2.1.2-button.0 → 2.1.2-changelog-1.0

package/dist/module.js

@@ -1,289 +1,297 @@
-import React, { Children } 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 { 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.svg, {});
-const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ React.createElement(StyledIconSlot, {
-  ...restProps,
-  ref: forwardRef,
-  "aria-hidden": true,
-  asChild: true
-}, children));
-
-const activeSelector = "&:active, &[data-pressed]";
-const disabledSelector = '&[disabled], &[aria-disabled="true"]';
-const iconSlotSelector = `& ${StyledIconSlot}`;
-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, ${focus.defaults["&:focus-visible"].boxShadow}`
   }
 };
-const outlineDisabled = {
-  [disabledSelector]: {
-    backgroundColor: "$background-neutrals",
-    borderColor: "$border-neutrals-disabled",
-    color: "$text-neutrals-disabled",
-    [iconSlotSelector]: {
-      color: "$icon-neutrals-disabled"
-    }
+const focusOutline = {
+  "&[data-focused]": {
+    ...focus.defaults,
+    borderColor: "transparent"
   }
 };
-const ghostDisabled = {
-  [disabledSelector]: {
-    color: "$text-neutrals-disabled",
-    backgroundColor: "$transparent",
-    [iconSlotSelector]: {
-      color: "$icon-neutrals-disabled"
-    }
-  }
+const focusDefault = {
+  "&[data-focused]": focus.defaults
 };
-const LABEL_OFFSET = 2;
-const StyledButton = styled(BaseButton, {
-  userSelect: "none",
+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",
-  "&[data-focused]": {
-    boxShadow: "$focus-small-outline",
-    borderColor: "$blue-500 !important"
-  },
-  [`& ${StyledIconSlot}:first-child`]: {
-    marginLeft: -LABEL_OFFSET,
-    marginRight: `calc($50 + ${LABEL_OFFSET}px)`
-  },
-  [`& ${StyledIconSlot}:last-child`]: {
-    marginRight: -LABEL_OFFSET,
-    marginLeft: `calc($50 + ${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"
-        },
-        "&:hover": {
-          backgroundColor: "$background-primary-prominent-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-primary-prominent-active"
-        },
-        ...solidDisabled
+      primary: {},
+      secondary: {},
+      danger: {}
+    },
+    appearance: {
+      filled: {},
+      outlined: {},
+      flat: {}
+    },
+    size: {
+      large: {
+        padding: "14px 32px 18px 32px",
+        fontSize: "20px",
+        lineHeight: "28px",
+        height: "60px"
       },
-      "outline-prominent": {
-        backgroundColor: "$background-neutrals",
-        borderColor: "$border-primary",
-        color: "$text-primary",
-        [iconSlotSelector]: {
-          color: "$icon-primary"
-        },
-        "&:hover": {
-          backgroundColor: "$background-primary-subtle-hover",
-          borderColor: "$border-primary-hover",
-          color: "$text-primary-hover",
-          [iconSlotSelector]: {
-            color: "$icon-primary-hover"
-          }
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-primary-subtle-active",
-          borderColor: "$border-primary-active",
-          color: "$text-primary-active",
-          [iconSlotSelector]: {
-            color: "$icon-primary-active"
-          }
-        },
-        ...outlineDisabled
+      medium: {
+        padding: "11px 24px 13px 24px",
+        fontSize: "16px",
+        lineHeight: "24px",
+        height: "48px"
       },
-      "ghost-prominent": {
-        backgroundColor: "transparent",
-        color: "$text-primary",
-        "&:hover": {
-          backgroundColor: "$background-primary-subtle-hover",
-          color: "$text-primary-hover",
-          [iconSlotSelector]: {
-            color: "$icon-primary-hover"
-          }
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-primary-subtle-active",
-          color: "$text-primary-active",
-          [iconSlotSelector]: {
-            color: "$icon-primary-active"
-          }
-        },
-        ...ghostDisabled
+      small: {
+        padding: "7px 16px 9px 16px",
+        fontSize: "14px",
+        lineHeight: "20px",
+        height: "36px"
       },
-      "solid-subtle": {
-        backgroundColor: "$background-neutrals-subtle",
-        color: "$text-neutrals",
-        [iconSlotSelector]: {
-          color: "$icon-neutrals"
-        },
-        "&:hover": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
-        ...solidDisabled
+      "x-small": {
+        padding: "5px 12px 7px",
+        fontSize: "14px",
+        lineHeight: "20px",
+        height: "32px"
       },
-      "outline-subtle": {
-        backgroundColor: "$background-neutrals",
-        border: "1px solid $border-neutrals",
-        color: "$text-neutrals",
-        [iconSlotSelector]: {
-          color: "$icon-neutrals"
-        },
+      "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: "$white",
+        backgroundColor: "$blue-600",
+        ...focusFilled,
         "&:hover": {
-          backgroundColor: "$background-neutrals-subtle-hover",
-          borderColor: "$border-neutrals-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active",
-          borderColor: "$border-neutrals-active"
-        },
-        ...outlineDisabled
-      },
-      "ghost-subtle": {
-        backgroundColor: "transparent",
-        color: "$text-neutrals",
-        [iconSlotSelector]: {
-          color: "$icon-neutrals"
+          color: "$white",
+          backgroundColor: "$blue-700"
         },
+        [pressedSelector]: {
+          backgroundColor: "$blue-900"
+        }
+      }
+    },
+    {
+      variant: "primary",
+      appearance: "outlined",
+      css: {
+        color: "rgba(66, 98, 255, 1)",
+        border: "1px solid rgba(66, 98, 255, 1)",
+        ...focusOutline,
         "&:hover": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
-        ...ghostDisabled
-      },
-      "solid-danger": {
-        backgroundColor: "$background-danger-prominent",
-        color: "$text-danger-inverted",
-        [iconSlotSelector]: {
-          color: "$icon-danger-inverted"
+          color: "rgba(66, 98, 255, 1)",
+          backgroundColor: "rgba(244, 246, 255, 1)"
         },
+        [pressedSelector]: {
+          backgroundColor: "rgba(240, 242, 255, 1)"
+        }
+      }
+    },
+    {
+      variant: "primary",
+      appearance: "flat",
+      css: {
+        color: "rgba(66, 98, 255, 1)",
+        ...focusDefault,
         "&:hover": {
-          backgroundColor: "$background-danger-prominent-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-danger-prominent-active"
-        },
-        ...solidDisabled
-      },
-      "outline-danger": {
-        backgroundColor: "$background-neutrals",
-        borderColor: "$border-danger",
-        color: "$text-danger",
-        [iconSlotSelector]: {
-          color: "$icon-danger"
+          color: "rgba(69, 91, 237, 1)",
+          backgroundColor: "rgba(245, 245, 247, 1)"
         },
+        [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": {
-          backgroundColor: "$background-danger",
-          color: "$text-danger-hover",
-          [iconSlotSelector]: {
-            color: "$icon-danger-hover"
-          }
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-danger-hover",
-          color: "$text-danger-active",
-          [iconSlotSelector]: {
-            color: "$icon-danger-active"
-          }
-        },
-        ...outlineDisabled
-      },
-      "ghost-danger": {
-        backgroundColor: "transparent",
-        color: "$text-danger",
-        [iconSlotSelector]: {
-          color: "$icon-danger"
+          color: "rgba(5, 0, 56, 1)",
+          backgroundColor: "rgba(240, 240, 243, 1)"
         },
+        [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": {
-          backgroundColor: "$background-danger",
-          color: "$text-danger-hover",
-          [iconSlotSelector]: {
-            color: "$icon-danger-hover"
-          }
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-danger-hover",
-          color: "$text-danger-active",
-          [iconSlotSelector]: {
-            color: "$icon-danger-active"
-          }
+          color: "rgba(5, 0, 56, 1)",
+          backgroundColor: "rgba(245, 245, 247, 1)"
         },
-        ...ghostDisabled
+        [pressedSelector]: {
+          backgroundColor: "rgba(235, 235, 239, 1)"
+        }
       }
     },
-    size: {
-      "x-large": {
-        height: sizes.xLarge,
-        fontSize: "$200",
-        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,
-        [iconSlotSelector]: {
-          width: "$icon-300",
-          height: "$icon-300"
-        }
-      },
-      large: {
-        height: sizes.large,
-        fontSize: "$200",
-        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,
-        [iconSlotSelector]: {
-          width: "$icon-300",
-          height: "$icon-300"
-        }
-      },
-      medium: {
-        height: sizes.medium,
-        fontSize: "$175",
-        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,
-        [iconSlotSelector]: {
-          width: "$icon-200",
-          height: "$icon-200"
+    {
+      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 + ${LABEL_OFFSET}px)`,
-        [iconSlotSelector]: {
-          width: "$icon-200",
-          height: "$icon-200"
+      }
+    },
+    {
+      variant: "danger",
+      appearance: "filled",
+      css: {
+        color: "$white",
+        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: {
-        width: "100%",
-        display: "block"
+    {
+      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",
@@ -299,44 +307,84 @@ const StyledSpinnerBox = styled(Primitive.div, {
 
 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 = ariaDisabled === "true" || ariaDisabled === true || loading;
-    const formattedChildren = Children.map(
-      Children.toArray(children),
-      (child) => {
-        if (typeof child === "string" || typeof child === "boolean" || typeof child === "number") {
-          return /* @__PURE__ */ React.createElement(Primitive.span, null, child);
-        }
-        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,
+        allowFocusWhenDisabled: false,
+        ...restProps
+      },
+      refWithFallback
+    );
+    const { linkProps } = useLink(
+      {
+        isDisabled: disabled,
+        onPress: onPress != null ? onPress : onClick,
+        ...restProps
+      },
+      refWithFallback
     );
-    const Content = loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledSpinnerBox, null, /* @__PURE__ */ React.createElement(Spinner, {
+    const Content = /* @__PURE__ */ React.createElement(React.Fragment, null, _loading && /* @__PURE__ */ React.createElement(StyledSpinnerBox, null, /* @__PURE__ */ React.createElement(Spinner, {
       size: spinnerSize
-    })), /* @__PURE__ */ React.createElement(StyledHiddenContent, null, formattedChildren)) : formattedChildren;
+    })), /* @__PURE__ */ React.createElement("span", null, children));
+    const tabIndexProp = shouldBeDisabled && {
+      tabIndex: -1
+    };
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const elementProps = mergeProps(
+      restProps,
+      asLink ? linkProps : buttonProps,
+      focusProps
+    );
     return /* @__PURE__ */ React.createElement(StyledButton, {
-      ...restProps,
+      ...elementProps,
       variant,
+      appearance,
+      size,
+      loading,
       rounded,
       fluid,
-      size,
-      "aria-disabled": shouldHaveAriaDisabled ? true : void 0,
-      ref: forwardRef
-    }, Content);
+      disabled: shouldBeDisabled,
+      asChild: asLink || asChild,
+      ...tabIndexProp,
+      "data-pressed": isPressed ? "" : void 0,
+      "data-focused": isFocusVisible ? "" : void 0,
+      ref: refWithFallback
+    }, asLink ? /* @__PURE__ */ React.createElement("a", {
+      href,
+      target,
+      rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
+    }, Content) : Content);
   }
 );
-Button.IconSlot = IconSlot;
 
 export { Button };
 //# sourceMappingURL=module.js.map