@mirohq/design-system-button 2.1.0 → 2.1.2-button.0

package/dist/module.js

@@ -1,297 +1,289 @@
-import React, { useRef } from 'react';
-import { useButton } from '@react-aria/button';
-import { mergeProps } from '@react-aria/utils';
+import React, { Children } from 'react';
 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 { focus } from '@mirohq/design-system-styles';
+import { BaseButton, sizes } from '@mirohq/design-system-base-button';
 
-const focusFilled = {
-  "&[data-focused]": {
-    boxShadow: `inset 0 0 0 1px white, ${focus.defaults["&:focus-visible"].boxShadow}`
+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 focusOutline = {
-  "&[data-focused]": {
-    ...focus.defaults,
-    borderColor: "transparent"
+const outlineDisabled = {
+  [disabledSelector]: {
+    backgroundColor: "$background-neutrals",
+    borderColor: "$border-neutrals-disabled",
+    color: "$text-neutrals-disabled",
+    [iconSlotSelector]: {
+      color: "$icon-neutrals-disabled"
+    }
   }
 };
-const focusDefault = {
-  "&[data-focused]": focus.defaults
+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, {
+  userSelect: "none",
   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.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)`
   },
   variants: {
     variant: {
-      primary: {},
-      secondary: {},
-      danger: {}
-    },
-    appearance: {
-      filled: {},
-      outlined: {},
-      flat: {}
-    },
-    size: {
-      large: {
-        padding: "14px 32px 18px 32px",
-        fontSize: "20px",
-        lineHeight: "28px",
-        height: "60px"
+      "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
       },
-      medium: {
-        padding: "11px 24px 13px 24px",
-        fontSize: "16px",
-        lineHeight: "24px",
-        height: "48px"
+      "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
       },
-      small: {
-        padding: "7px 16px 9px 16px",
-        fontSize: "14px",
-        lineHeight: "20px",
-        height: "36px"
+      "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
       },
-      "x-small": {
-        padding: "5px 12px 7px",
-        fontSize: "14px",
-        lineHeight: "20px",
-        height: "32px"
+      "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
       },
-      "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,
+      "outline-subtle": {
+        backgroundColor: "$background-neutrals",
+        border: "1px solid $border-neutrals",
+        color: "$text-neutrals",
+        [iconSlotSelector]: {
+          color: "$icon-neutrals"
+        },
         "&:hover": {
-          color: "$white",
-          backgroundColor: "$blue-700"
+          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"
         },
-        [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": {
-          color: "rgba(66, 98, 255, 1)",
-          backgroundColor: "rgba(244, 246, 255, 1)"
+          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"
         },
-        [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)"
+          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"
         },
-        [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)"
+          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"
         },
-        [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)"
+          backgroundColor: "$background-danger",
+          color: "$text-danger-hover",
+          [iconSlotSelector]: {
+            color: "$icon-danger-hover"
+          }
         },
-        [pressedSelector]: {
-          backgroundColor: "rgba(235, 235, 239, 1)"
-        }
+        [activeSelector]: {
+          backgroundColor: "$background-danger-hover",
+          color: "$text-danger-active",
+          [iconSlotSelector]: {
+            color: "$icon-danger-active"
+          }
+        },
+        ...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 + ${LABEL_OFFSET}px)`,
+        [iconSlotSelector]: {
+          width: "$icon-300",
+          height: "$icon-300"
         }
-      }
-    },
-    {
-      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)"
+      },
+      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"
+        }
+      },
+      small: {
+        fontSize: "$175",
+        height: "$6",
+        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,
+        [iconSlotSelector]: {
+          width: "$icon-200",
+          height: "$icon-200"
         }
       }
     },
-    {
-      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: "$half"
       }
     },
-    {
-      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: {
+        width: "100%",
+        display: "block"
       }
     }
-  ]
+  }
+});
+const StyledHiddenContent = styled(Primitive.span, {
+  visibility: "hidden"
 });
 const StyledSpinnerBox = styled(Primitive.div, {
   display: "flex",
@@ -307,84 +299,44 @@ const StyledSpinnerBox = styled(Primitive.div, {
 
 const Button = React.forwardRef(
   ({
-    variant = "primary",
-    appearance = "filled",
-    size = "medium",
+    variant = "solid-prominent",
+    size = "large",
     loading = false,
     rounded = false,
     fluid = false,
-    disabled = false,
-    href,
-    target,
-    rel,
+    "aria-disabled": ariaDisabled,
     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 || _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 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 Content = /* @__PURE__ */ React.createElement(React.Fragment, null, _loading && /* @__PURE__ */ React.createElement(StyledSpinnerBox, null, /* @__PURE__ */ React.createElement(Spinner, {
+    const Content = loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledSpinnerBox, null, /* @__PURE__ */ React.createElement(Spinner, {
       size: spinnerSize
-    })), /* @__PURE__ */ React.createElement("span", null, children));
-    const tabIndexProp = shouldBeDisabled && {
-      tabIndex: -1
-    };
-    const { isFocusVisible, focusProps } = useFocusRing();
-    const elementProps = mergeProps(
-      restProps,
-      asLink ? linkProps : buttonProps,
-      focusProps
-    );
+    })), /* @__PURE__ */ React.createElement(StyledHiddenContent, null, formattedChildren)) : formattedChildren;
     return /* @__PURE__ */ React.createElement(StyledButton, {
-      ...elementProps,
+      ...restProps,
       variant,
-      appearance,
-      size,
-      loading,
       rounded,
       fluid,
-      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);
+      size,
+      "aria-disabled": shouldHaveAriaDisabled ? true : void 0,
+      ref: forwardRef
+    }, Content);
   }
 );
+Button.IconSlot = IconSlot;
 
 export { Button };
 //# sourceMappingURL=module.js.map