@mirohq/design-system-base-button 0.3.0-button.1 → 0.3.1

package/dist/main.js

@@ -15,11 +15,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const sizes = {
-  medium: "$8",
-  large: "$10",
-  xLarge: "$12"
+const focusFilled = {
+  "&[data-focused]": {
+    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,
+    outline: "none"
+  }
+};
+const focusOutline = {
+  "&[data-focused]": {
+    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,
+    outline: "none",
+    borderColor: "$blue-500"
+  }
 };
+const activeSelector = "&:active, &[data-pressed]";
 const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
   all: "unset",
   display: "inline-flex",
@@ -30,21 +39,94 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
   "&[disabled]": {
     pointerEvents: "none"
   },
-  '&[aria-disabled="true"]': {
-    cursor: "default"
+  variants: {
+    variant: {
+      "solid-prominent": {
+        backgroundColor: "$background-primary-prominent",
+        color: "$icon-primary-inverted",
+        ...focusFilled,
+        "&:hover": {
+          backgroundColor: "$background-primary-prominent-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-primary-prominent-active"
+        },
+        "&[disabled]": {
+          backgroundColor: "$background-neutrals-disabled",
+          color: "$icon-neutrals-disabled"
+        }
+      },
+      "solid-subtle": {
+        backgroundColor: "$background-neutrals-subtle",
+        color: "$icon-neutrals",
+        ...focusFilled,
+        "&:hover": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-active"
+        },
+        "&[disabled]": {
+          backgroundColor: "$background-neutrals-disabled",
+          color: "$icon-neutrals-disabled"
+        }
+      },
+      outline: {
+        backgroundColor: "$background-neutrals",
+        color: "$icon-neutrals",
+        border: "1px solid $border-neutrals",
+        "&:hover": {
+          backgroundColor: "$background-neutrals-subtle-hover",
+          borderColor: "$border-neutrals-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-active",
+          borderColor: "$border-neutrals-active"
+        },
+        "&[disabled]": {
+          backgroundColor: "$background-neutrals-disabled",
+          color: "$icon-neutrals-disabled",
+          borderColor: "$border-neutrals-disabled"
+        },
+        ...focusOutline
+      },
+      ghost: {
+        color: "$icon-neutrals",
+        backgroundColor: "transparent",
+        ...focusFilled,
+        "&:hover": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-active"
+        },
+        "&[disabled]": {
+          color: "$icon-neutrals-disabled"
+        }
+      }
+    },
+    size: {
+      medium: {
+        height: "$8",
+        paddingX: "$50"
+      },
+      large: {
+        height: "$10",
+        paddingX: "$100"
+      },
+      "x-large": {
+        height: "$12",
+        paddingX: "$150"
+      }
+    }
   }
 });
 
-function eventHandler(callback, allowEvent) {
-  if (allowEvent) {
-    return void 0;
-  }
-  return callback;
-}
 const BaseButton = React__default["default"].forwardRef(
   ({
+    variant,
+    size,
     disabled = false,
-    "aria-disabled": ariaDisabled,
     href,
     target,
     rel,
@@ -66,14 +148,13 @@ const BaseButton = React__default["default"].forwardRef(
     const asLink = href != null;
     const ref = React.useRef(null);
     const refWithFallback = forwardRef != null ? forwardRef : ref;
-    const allowPressEvents = ariaDisabled === "true" || ariaDisabled === true;
     const commonProps = {
       isDisabled: disabled,
-      onPress: eventHandler(onPress != null ? onPress : onClick, allowPressEvents),
-      onPressStart: eventHandler(onPressStart, allowPressEvents),
-      onPressEnd: eventHandler(onPressEnd, allowPressEvents),
-      onPressChange: eventHandler(onPressChange, allowPressEvents),
-      onFocusChange: eventHandler(onFocusChange, allowPressEvents),
+      onPress: onPress != null ? onPress : onClick,
+      onPressStart,
+      onPressEnd,
+      onPressChange,
+      onFocusChange,
       onFocus,
       onBlur
     };
@@ -107,13 +188,14 @@ const BaseButton = React__default["default"].forwardRef(
     );
     return /* @__PURE__ */ React__default["default"].createElement(StyledBaseButton, {
       ...elementProps,
+      variant,
+      size,
       disabled,
       asChild: asLink || asChild,
       ...tabIndexProp,
       "data-pressed": isPressed ? "" : void 0,
       "data-focused": isFocusVisible ? "" : void 0,
       "data-hovered": isHovered ? "" : void 0,
-      "aria-disabled": ariaDisabled,
       ref: refWithFallback
     }, asLink ? /* @__PURE__ */ React__default["default"].createElement("a", {
       href,
@@ -124,5 +206,4 @@ const BaseButton = React__default["default"].forwardRef(
 );
 
 exports.BaseButton = BaseButton;
-exports.sizes = sizes;
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n  medium: '$8',\n  large: '$10',\n  xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n  all: 'unset',\n  display: 'inline-flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&[disabled]': {\n    pointerEvents: 'none',\n  },\n\n  '&[aria-disabled=\"true\"]': {\n    cursor: 'default',\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nfunction eventHandler<T>(\n  callback: ((e: T) => void) | undefined,\n  allowEvent: boolean\n): ((e: T) => void) | undefined {\n  if (allowEvent) {\n    return undefined\n  }\n\n  return callback\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      disabled = false,\n      'aria-disabled': ariaDisabled,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    // we cannot rely on useButton with ariaDisabled, because it doesn't support onFocus when isDisabled\n    const allowPressEvents = ariaDisabled === 'true' || ariaDisabled === true\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: eventHandler(onPress ?? onClick, allowPressEvents),\n      onPressStart: eventHandler(onPressStart, allowPressEvents),\n      onPressEnd: eventHandler(onPressEnd, allowPressEvents),\n      onPressChange: eventHandler(onPressChange, allowPressEvents),\n      onFocusChange: eventHandler(onFocusChange, allowPressEvents),\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        aria-disabled={ariaDisabled}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n    outline: 'none',\n  },\n}\n\nconst focusOutline = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n    outline: 'none',\n    borderColor: '$blue-500',\n  },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\n\nexport const StyledBaseButton = styled(Primitive.button, {\n  all: 'unset',\n  display: 'inline-flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&[disabled]': {\n    pointerEvents: 'none',\n  },\n\n  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      outline: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals',\n        border: '1px solid $border-neutrals',\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n\n        // order is important because of borderColor\n        ...focusOutline,\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: '$8',\n        paddingX: '$50',\n      },\n      large: {\n        height: '$10',\n        paddingX: '$100',\n      },\n      'x-large': {\n        height: '$12',\n        paddingX: '$150',\n      },\n    },\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Change the button style\n   */\n  variant?: StyledBaseButtonProps['variant']\n\n  /**\n   * Change the button size\n   */\n  size?: StyledBaseButtonProps['size']\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      variant,\n      size,\n      disabled = false,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: onPress ?? onClick,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocusChange,\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps"],"mappings":"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"}

package/dist/module.js

@@ -7,11 +7,20 @@ import { useFocusRing } from '@react-aria/focus';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
 
-const sizes = {
-  medium: "$8",
-  large: "$10",
-  xLarge: "$12"
+const focusFilled = {
+  "&[data-focused]": {
+    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,
+    outline: "none"
+  }
+};
+const focusOutline = {
+  "&[data-focused]": {
+    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,
+    outline: "none",
+    borderColor: "$blue-500"
+  }
 };
+const activeSelector = "&:active, &[data-pressed]";
 const StyledBaseButton = styled(Primitive.button, {
   all: "unset",
   display: "inline-flex",
@@ -22,21 +31,94 @@ const StyledBaseButton = styled(Primitive.button, {
   "&[disabled]": {
     pointerEvents: "none"
   },
-  '&[aria-disabled="true"]': {
-    cursor: "default"
+  variants: {
+    variant: {
+      "solid-prominent": {
+        backgroundColor: "$background-primary-prominent",
+        color: "$icon-primary-inverted",
+        ...focusFilled,
+        "&:hover": {
+          backgroundColor: "$background-primary-prominent-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-primary-prominent-active"
+        },
+        "&[disabled]": {
+          backgroundColor: "$background-neutrals-disabled",
+          color: "$icon-neutrals-disabled"
+        }
+      },
+      "solid-subtle": {
+        backgroundColor: "$background-neutrals-subtle",
+        color: "$icon-neutrals",
+        ...focusFilled,
+        "&:hover": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-active"
+        },
+        "&[disabled]": {
+          backgroundColor: "$background-neutrals-disabled",
+          color: "$icon-neutrals-disabled"
+        }
+      },
+      outline: {
+        backgroundColor: "$background-neutrals",
+        color: "$icon-neutrals",
+        border: "1px solid $border-neutrals",
+        "&:hover": {
+          backgroundColor: "$background-neutrals-subtle-hover",
+          borderColor: "$border-neutrals-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-active",
+          borderColor: "$border-neutrals-active"
+        },
+        "&[disabled]": {
+          backgroundColor: "$background-neutrals-disabled",
+          color: "$icon-neutrals-disabled",
+          borderColor: "$border-neutrals-disabled"
+        },
+        ...focusOutline
+      },
+      ghost: {
+        color: "$icon-neutrals",
+        backgroundColor: "transparent",
+        ...focusFilled,
+        "&:hover": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-active"
+        },
+        "&[disabled]": {
+          color: "$icon-neutrals-disabled"
+        }
+      }
+    },
+    size: {
+      medium: {
+        height: "$8",
+        paddingX: "$50"
+      },
+      large: {
+        height: "$10",
+        paddingX: "$100"
+      },
+      "x-large": {
+        height: "$12",
+        paddingX: "$150"
+      }
+    }
   }
 });
 
-function eventHandler(callback, allowEvent) {
-  if (allowEvent) {
-    return void 0;
-  }
-  return callback;
-}
 const BaseButton = React.forwardRef(
   ({
+    variant,
+    size,
     disabled = false,
-    "aria-disabled": ariaDisabled,
     href,
     target,
     rel,
@@ -58,14 +140,13 @@ const BaseButton = React.forwardRef(
     const asLink = href != null;
     const ref = useRef(null);
     const refWithFallback = forwardRef != null ? forwardRef : ref;
-    const allowPressEvents = ariaDisabled === "true" || ariaDisabled === true;
     const commonProps = {
       isDisabled: disabled,
-      onPress: eventHandler(onPress != null ? onPress : onClick, allowPressEvents),
-      onPressStart: eventHandler(onPressStart, allowPressEvents),
-      onPressEnd: eventHandler(onPressEnd, allowPressEvents),
-      onPressChange: eventHandler(onPressChange, allowPressEvents),
-      onFocusChange: eventHandler(onFocusChange, allowPressEvents),
+      onPress: onPress != null ? onPress : onClick,
+      onPressStart,
+      onPressEnd,
+      onPressChange,
+      onFocusChange,
       onFocus,
       onBlur
     };
@@ -99,13 +180,14 @@ const BaseButton = React.forwardRef(
     );
     return /* @__PURE__ */ React.createElement(StyledBaseButton, {
       ...elementProps,
+      variant,
+      size,
       disabled,
       asChild: asLink || asChild,
       ...tabIndexProp,
       "data-pressed": isPressed ? "" : void 0,
       "data-focused": isFocusVisible ? "" : void 0,
       "data-hovered": isHovered ? "" : void 0,
-      "aria-disabled": ariaDisabled,
       ref: refWithFallback
     }, asLink ? /* @__PURE__ */ React.createElement("a", {
       href,
@@ -115,5 +197,5 @@ const BaseButton = React.forwardRef(
   }
 );
 
-export { BaseButton, sizes };
+export { BaseButton };
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n  medium: '$8',\n  large: '$10',\n  xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n  all: 'unset',\n  display: 'inline-flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&[disabled]': {\n    pointerEvents: 'none',\n  },\n\n  '&[aria-disabled=\"true\"]': {\n    cursor: 'default',\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nfunction eventHandler<T>(\n  callback: ((e: T) => void) | undefined,\n  allowEvent: boolean\n): ((e: T) => void) | undefined {\n  if (allowEvent) {\n    return undefined\n  }\n\n  return callback\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      disabled = false,\n      'aria-disabled': ariaDisabled,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    // we cannot rely on useButton with ariaDisabled, because it doesn't support onFocus when isDisabled\n    const allowPressEvents = ariaDisabled === 'true' || ariaDisabled === true\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: eventHandler(onPress ?? onClick, allowPressEvents),\n      onPressStart: eventHandler(onPressStart, allowPressEvents),\n      onPressEnd: eventHandler(onPressEnd, allowPressEvents),\n      onPressChange: eventHandler(onPressChange, allowPressEvents),\n      onFocusChange: eventHandler(onFocusChange, allowPressEvents),\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        aria-disabled={ariaDisabled}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n    outline: 'none',\n  },\n}\n\nconst focusOutline = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n    outline: 'none',\n    borderColor: '$blue-500',\n  },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\n\nexport const StyledBaseButton = styled(Primitive.button, {\n  all: 'unset',\n  display: 'inline-flex',\n  alignItems: 'center',\n  boxSizing: 'border-box',\n  borderRadius: '$50',\n  cursor: 'pointer',\n\n  '&[disabled]': {\n    pointerEvents: 'none',\n  },\n\n  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      outline: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals',\n        border: '1px solid $border-neutrals',\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n\n        // order is important because of borderColor\n        ...focusOutline,\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: '$8',\n        paddingX: '$50',\n      },\n      large: {\n        height: '$10',\n        paddingX: '$100',\n      },\n      'x-large': {\n        height: '$12',\n        paddingX: '$150',\n      },\n    },\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Change the button style\n   */\n  variant?: StyledBaseButtonProps['variant']\n\n  /**\n   * Change the button size\n   */\n  size?: StyledBaseButtonProps['size']\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      variant,\n      size,\n      disabled = false,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: onPress ?? onClick,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocusChange,\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -7,12 +7,13 @@ import * as _stitches_react_types_css_util from '@stitches/react/types/css-util'
 import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 
-declare const sizes: {
-    medium: string;
-    large: string;
-    xLarge: string;
-};
-declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
+declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{
+    variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    size?: "medium" | "large" | "x-large" | undefined;
+}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    size?: "medium" | "large" | "x-large" | undefined;
+}, {}> & _mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -186,6 +187,9 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
     shadows: {
         readonly 50: "0 4px 16px #05003812";
         readonly 100: "0 8px 32px #05003808";
+        readonly 'focus-small': "0 0 0 2px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
+        readonly 'focus-large': "0 0 0 4px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
+        readonly 'focus-controls': "0 0 0 1px $colors$white, 0 0 0 3px $colors$blue-500, 0 0 0 5px $colors$blue-200";
     };
     sizes: {
         readonly number: string;
@@ -422,7 +426,10 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{}, ne
             readonly [$$PropertyValue]: "margin";
         };
     };
-}>>> & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {}, {}>;
+}>>> & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "size" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps | "variant"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {
+    variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    size?: "medium" | "large" | "x-large" | undefined;
+}, {}>;
 declare type StyledBaseButtonProps = ComponentPropsWithRef<typeof StyledBaseButton>;
 
 declare type ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>;
@@ -431,6 +438,14 @@ interface BaseButtonProps extends FocusEvents, HoverEvents, Omit<ButtonPropsA11y
      * The content
      */
     children: ReactNode;
+    /**
+     * Change the button style
+     */
+    variant?: StyledBaseButtonProps['variant'];
+    /**
+     * Change the button size
+     */
+    size?: StyledBaseButtonProps['size'];
     /**
      * Prevent pointer events
      */
@@ -452,6 +467,6 @@ interface BaseButtonProps extends FocusEvents, HoverEvents, Omit<ButtonPropsA11y
      */
     onClick?: AriaButtonProps['onPress'];
 }
-declare const BaseButton: react__default.ForwardRefExoticComponent<Pick<BaseButtonProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "target" | "href" | "rel" | "asChild" | "css" | "UNSAFE_style" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const BaseButton: react__default.ForwardRefExoticComponent<Pick<BaseButtonProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "size" | "target" | "href" | "rel" | "asChild" | "css" | "UNSAFE_style" | "variant" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange"> & react__default.RefAttributes<HTMLButtonElement>>;
 
-export { BaseButton, BaseButtonProps, sizes };
+export { BaseButton, BaseButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-button",
-  "version": "0.3.0-button.1",
+  "version": "0.3.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "@stitches/react": "^1.2.8",
-    "react": "^16.14 || ^17"
+    "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
     "@react-aria/button": "^3.5.0",
@@ -33,11 +33,11 @@
     "@react-aria/utils": "^3.13.0",
     "@react-types/button": "^3.5.0",
     "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-primitive": "^1.0.4",
-    "@mirohq/design-system-stitches": "^2.0.11"
+    "@mirohq/design-system-primitive": "^1.1.0",
+    "@mirohq/design-system-stitches": "^2.1.1"
   },
   "devDependencies": {
-    "@mirohq/design-system-icons": "^0.5.1-button.0"
+    "@mirohq/design-system-icons": "^0.10.1"
   },
   "scripts": {
     "build": "rollup -c ../../../../rollup.config.js",