@mirohq/design-system-icon-button 2.1.36 → 3.0.0-button-api-changes.0

package/dist/main.js

@@ -8,8 +8,8 @@ var designSystemBadge = require('@mirohq/design-system-badge');
 var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 var designSystemUseId = require('@mirohq/design-system-use-id');
-var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
+var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemStyles = require('@mirohq/design-system-styles');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,7 +23,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
   justifyContent: "center",
   variants: {
     variant: {
-      "solid-prominent": {
+      primary: {
         backgroundColor: "$background-primary-prominent",
         color: "$icon-primary-inverted",
         ...designSystemStyles.focus.css({
@@ -40,7 +40,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
           color: "$icon-neutrals-disabled"
         }
       },
-      "solid-subtle": {
+      secondary: {
         backgroundColor: "$background-neutrals-subtle",
         color: "$icon-neutrals",
         ...designSystemStyles.focus.css({
@@ -57,28 +57,6 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
           color: "$icon-neutrals-disabled"
         }
       },
-      outline: {
-        backgroundColor: "$background-neutrals",
-        color: "$icon-neutrals",
-        border: "1px solid $border-neutrals",
-        ...designSystemStyles.focus.css({
-          boxShadow: "$focus-small-outline",
-          borderColor: "$blue-400 !important"
-        }),
-        _hover: {
-          backgroundColor: "$background-neutrals-subtle-hover",
-          borderColor: "$border-neutrals-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active",
-          borderColor: "$border-neutrals-active"
-        },
-        [disabledSelector]: {
-          backgroundColor: "$background-neutrals",
-          color: "$icon-neutrals-disabled",
-          borderColor: "$border-neutrals-disabled"
-        }
-      },
       ghost: {
         color: "$icon-neutrals",
         backgroundColor: "transparent",
@@ -171,7 +149,7 @@ const IconButton = React__default["default"].forwardRef(
             ...badgeOffset,
             show: showBadge,
             content: badgeContent,
-            inverted: variant === "solid-prominent",
+            inverted: variant === "primary",
             children: formattedChildren
           }
         )

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n  justifyContent: 'center',\n  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        [disabledSelector]: {\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\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\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        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-400 !important',\n        }),\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        [disabledSelector]: {\n          backgroundColor: '$background-neutrals',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\n          color: '$icon-neutrals-disabled',\n          backgroundColor: '$transparent',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: sizes.medium,\n        width: sizes.medium,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      large: {\n        height: sizes.large,\n        width: sizes.large,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      'x-large': {\n        height: sizes.xLarge,\n        width: sizes.xLarge,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n  typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport {\n  addPropsToChildren,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n  /**\n   * Icon button label used to provide a description.\n   */\n  'aria-label': string\n\n  /**\n   * Change the Icon button style\n   * @default 'ghost'\n   */\n  variant?: StyledIconButtonProps['variant']\n\n  /**\n   * Change the Icon button size.\n   * @default 'large'\n   */\n  size?: StyledIconButtonProps['size']\n\n  /**\n   * Wraps the Icon button with a badge.\n   * @default false\n   */\n  showBadge?: boolean\n\n  /**\n   * The content to be displayed inside of the badge.\n   */\n  badgeContent?: string\n\n  /**\n   * Badge label used to make Badge recognizable by the screen readers.\n   */\n  badgeAriaLabel?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n  ElementRef<typeof StyledIconButton>,\n  IconButtonProps\n>(\n  (\n    {\n      children,\n      showBadge = false,\n      badgeContent,\n      badgeAriaLabel,\n      variant = 'ghost',\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const isIcon = isIconComponent(children as IconReactElement)\n    const iconComponentProps = {\n      'data-icon-component': '',\n      size: size === 'medium' ? 'small' : 'medium',\n      weight: size === 'medium' ? 'thin' : 'normal',\n    }\n\n    const badgeId = useId()\n\n    const formattedChildren = addPropsToChildren(children, () => true, {\n      'aria-hidden': 'true',\n      ...(isIcon && iconComponentProps),\n    })\n\n    let badgeOffset = {}\n    if (size === 'medium') {\n      badgeOffset =\n        badgeContent !== undefined && badgeContent !== ''\n          ? { offsetX: -7, offsetY: -5 }\n          : { offsetX: 3, offsetY: -3 }\n    }\n\n    return (\n      <StyledIconButton\n        {...restProps}\n        variant={variant}\n        size={size}\n        ref={forwardRef}\n        aria-describedby={stringAttrValue(\n          ariaDescribedBy,\n          showBadge && badgeAriaLabel !== undefined && badgeId\n        )}\n      >\n        <Badge\n          id={badgeId}\n          aria-label={badgeAriaLabel}\n          {...badgeOffset}\n          show={showBadge}\n          content={badgeContent}\n          inverted={variant === 'solid-prominent'}\n        >\n          {formattedChildren}\n        </Badge>\n      </StyledIconButton>\n    )\n  }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","isIconComponent","useId","addPropsToChildren","jsx","stringAttrValue","Badge"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n  justifyContent: 'center',\n  variants: {\n    variant: {\n      primary: {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        [disabledSelector]: {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      secondary: {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\n          color: '$icon-neutrals-disabled',\n          backgroundColor: '$transparent',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: sizes.medium,\n        width: sizes.medium,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      large: {\n        height: sizes.large,\n        width: sizes.large,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      'x-large': {\n        height: sizes.xLarge,\n        width: sizes.xLarge,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n  typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport {\n  addPropsToChildren,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n  /**\n   * Icon button label used to provide a description.\n   */\n  'aria-label': string\n\n  /**\n   * Change the Icon button style\n   * @default 'ghost'\n   */\n  variant?: StyledIconButtonProps['variant']\n\n  /**\n   * Change the Icon button size.\n   * @default 'large'\n   */\n  size?: StyledIconButtonProps['size']\n\n  /**\n   * Wraps the Icon button with a badge.\n   * @default false\n   */\n  showBadge?: boolean\n\n  /**\n   * The content to be displayed inside of the badge.\n   */\n  badgeContent?: string\n\n  /**\n   * Badge label used to make Badge recognizable by the screen readers.\n   */\n  badgeAriaLabel?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n  ElementRef<typeof StyledIconButton>,\n  IconButtonProps\n>(\n  (\n    {\n      children,\n      showBadge = false,\n      badgeContent,\n      badgeAriaLabel,\n      variant = 'ghost',\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const isIcon = isIconComponent(children as IconReactElement)\n    const iconComponentProps = {\n      'data-icon-component': '',\n      size: size === 'medium' ? 'small' : 'medium',\n      weight: size === 'medium' ? 'thin' : 'normal',\n    }\n\n    const badgeId = useId()\n\n    const formattedChildren = addPropsToChildren(children, () => true, {\n      'aria-hidden': 'true',\n      ...(isIcon && iconComponentProps),\n    })\n\n    let badgeOffset = {}\n    if (size === 'medium') {\n      badgeOffset =\n        badgeContent !== undefined && badgeContent !== ''\n          ? { offsetX: -7, offsetY: -5 }\n          : { offsetX: 3, offsetY: -3 }\n    }\n\n    return (\n      <StyledIconButton\n        {...restProps}\n        variant={variant}\n        size={size}\n        ref={forwardRef}\n        aria-describedby={stringAttrValue(\n          ariaDescribedBy,\n          showBadge && badgeAriaLabel !== undefined && badgeId\n        )}\n      >\n        <Badge\n          id={badgeId}\n          aria-label={badgeAriaLabel}\n          {...badgeOffset}\n          show={showBadge}\n          content={badgeContent}\n          inverted={variant === 'primary'}\n        >\n          {formattedChildren}\n        </Badge>\n      </StyledIconButton>\n    )\n  }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","isIconComponent","useId","addPropsToChildren","jsx","stringAttrValue","Badge"],"mappings":"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"}

package/dist/module.js

@@ -4,8 +4,8 @@ import { Badge } from '@mirohq/design-system-badge';
 import { addPropsToChildren, stringAttrValue } from '@mirohq/design-system-utils';
 import { styles, isIconComponent } from '@mirohq/design-system-base-icon';
 import { useId } from '@mirohq/design-system-use-id';
-import { styled } from '@mirohq/design-system-stitches';
 import { BaseButton, sizes } from '@mirohq/design-system-base-button';
+import { styled } from '@mirohq/design-system-stitches';
 import { focus } from '@mirohq/design-system-styles';
 
 const activeSelector = "&:active, &[data-pressed]";
@@ -15,7 +15,7 @@ const StyledIconButton = styled(BaseButton, {
   justifyContent: "center",
   variants: {
     variant: {
-      "solid-prominent": {
+      primary: {
         backgroundColor: "$background-primary-prominent",
         color: "$icon-primary-inverted",
         ...focus.css({
@@ -32,7 +32,7 @@ const StyledIconButton = styled(BaseButton, {
           color: "$icon-neutrals-disabled"
         }
       },
-      "solid-subtle": {
+      secondary: {
         backgroundColor: "$background-neutrals-subtle",
         color: "$icon-neutrals",
         ...focus.css({
@@ -49,28 +49,6 @@ const StyledIconButton = styled(BaseButton, {
           color: "$icon-neutrals-disabled"
         }
       },
-      outline: {
-        backgroundColor: "$background-neutrals",
-        color: "$icon-neutrals",
-        border: "1px solid $border-neutrals",
-        ...focus.css({
-          boxShadow: "$focus-small-outline",
-          borderColor: "$blue-400 !important"
-        }),
-        _hover: {
-          backgroundColor: "$background-neutrals-subtle-hover",
-          borderColor: "$border-neutrals-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active",
-          borderColor: "$border-neutrals-active"
-        },
-        [disabledSelector]: {
-          backgroundColor: "$background-neutrals",
-          color: "$icon-neutrals-disabled",
-          borderColor: "$border-neutrals-disabled"
-        }
-      },
       ghost: {
         color: "$icon-neutrals",
         backgroundColor: "transparent",
@@ -163,7 +141,7 @@ const IconButton = React.forwardRef(
             ...badgeOffset,
             show: showBadge,
             content: badgeContent,
-            inverted: variant === "solid-prominent",
+            inverted: variant === "primary",
             children: formattedChildren
           }
         )

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n  justifyContent: 'center',\n  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        [disabledSelector]: {\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\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\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        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-400 !important',\n        }),\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        [disabledSelector]: {\n          backgroundColor: '$background-neutrals',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\n          color: '$icon-neutrals-disabled',\n          backgroundColor: '$transparent',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: sizes.medium,\n        width: sizes.medium,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      large: {\n        height: sizes.large,\n        width: sizes.large,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      'x-large': {\n        height: sizes.xLarge,\n        width: sizes.xLarge,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n  typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport {\n  addPropsToChildren,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n  /**\n   * Icon button label used to provide a description.\n   */\n  'aria-label': string\n\n  /**\n   * Change the Icon button style\n   * @default 'ghost'\n   */\n  variant?: StyledIconButtonProps['variant']\n\n  /**\n   * Change the Icon button size.\n   * @default 'large'\n   */\n  size?: StyledIconButtonProps['size']\n\n  /**\n   * Wraps the Icon button with a badge.\n   * @default false\n   */\n  showBadge?: boolean\n\n  /**\n   * The content to be displayed inside of the badge.\n   */\n  badgeContent?: string\n\n  /**\n   * Badge label used to make Badge recognizable by the screen readers.\n   */\n  badgeAriaLabel?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n  ElementRef<typeof StyledIconButton>,\n  IconButtonProps\n>(\n  (\n    {\n      children,\n      showBadge = false,\n      badgeContent,\n      badgeAriaLabel,\n      variant = 'ghost',\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const isIcon = isIconComponent(children as IconReactElement)\n    const iconComponentProps = {\n      'data-icon-component': '',\n      size: size === 'medium' ? 'small' : 'medium',\n      weight: size === 'medium' ? 'thin' : 'normal',\n    }\n\n    const badgeId = useId()\n\n    const formattedChildren = addPropsToChildren(children, () => true, {\n      'aria-hidden': 'true',\n      ...(isIcon && iconComponentProps),\n    })\n\n    let badgeOffset = {}\n    if (size === 'medium') {\n      badgeOffset =\n        badgeContent !== undefined && badgeContent !== ''\n          ? { offsetX: -7, offsetY: -5 }\n          : { offsetX: 3, offsetY: -3 }\n    }\n\n    return (\n      <StyledIconButton\n        {...restProps}\n        variant={variant}\n        size={size}\n        ref={forwardRef}\n        aria-describedby={stringAttrValue(\n          ariaDescribedBy,\n          showBadge && badgeAriaLabel !== undefined && badgeId\n        )}\n      >\n        <Badge\n          id={badgeId}\n          aria-label={badgeAriaLabel}\n          {...badgeOffset}\n          show={showBadge}\n          content={badgeContent}\n          inverted={variant === 'solid-prominent'}\n        >\n          {formattedChildren}\n        </Badge>\n      </StyledIconButton>\n    )\n  }\n)\n"],"names":["baseIconStyles"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n  justifyContent: 'center',\n  variants: {\n    variant: {\n      primary: {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        [disabledSelector]: {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      secondary: {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n\n        ...focus.css({\n          boxShadow: '$focus-small',\n        }),\n\n        _hover: {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        [disabledSelector]: {\n          color: '$icon-neutrals-disabled',\n          backgroundColor: '$transparent',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: sizes.medium,\n        width: sizes.medium,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      large: {\n        height: sizes.large,\n        width: sizes.large,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      'x-large': {\n        height: sizes.xLarge,\n        width: sizes.xLarge,\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n    },\n  },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n  typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { Badge } from '@mirohq/design-system-badge'\nimport {\n  addPropsToChildren,\n  stringAttrValue,\n} from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n  /**\n   * Icon button label used to provide a description.\n   */\n  'aria-label': string\n\n  /**\n   * Change the Icon button style\n   * @default 'ghost'\n   */\n  variant?: StyledIconButtonProps['variant']\n\n  /**\n   * Change the Icon button size.\n   * @default 'large'\n   */\n  size?: StyledIconButtonProps['size']\n\n  /**\n   * Wraps the Icon button with a badge.\n   * @default false\n   */\n  showBadge?: boolean\n\n  /**\n   * The content to be displayed inside of the badge.\n   */\n  badgeContent?: string\n\n  /**\n   * Badge label used to make Badge recognizable by the screen readers.\n   */\n  badgeAriaLabel?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n  ElementRef<typeof StyledIconButton>,\n  IconButtonProps\n>(\n  (\n    {\n      children,\n      showBadge = false,\n      badgeContent,\n      badgeAriaLabel,\n      variant = 'ghost',\n      size = 'large',\n      'aria-describedby': ariaDescribedBy,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const isIcon = isIconComponent(children as IconReactElement)\n    const iconComponentProps = {\n      'data-icon-component': '',\n      size: size === 'medium' ? 'small' : 'medium',\n      weight: size === 'medium' ? 'thin' : 'normal',\n    }\n\n    const badgeId = useId()\n\n    const formattedChildren = addPropsToChildren(children, () => true, {\n      'aria-hidden': 'true',\n      ...(isIcon && iconComponentProps),\n    })\n\n    let badgeOffset = {}\n    if (size === 'medium') {\n      badgeOffset =\n        badgeContent !== undefined && badgeContent !== ''\n          ? { offsetX: -7, offsetY: -5 }\n          : { offsetX: 3, offsetY: -3 }\n    }\n\n    return (\n      <StyledIconButton\n        {...restProps}\n        variant={variant}\n        size={size}\n        ref={forwardRef}\n        aria-describedby={stringAttrValue(\n          ariaDescribedBy,\n          showBadge && badgeAriaLabel !== undefined && badgeId\n        )}\n      >\n        <Badge\n          id={badgeId}\n          aria-label={badgeAriaLabel}\n          {...badgeOffset}\n          show={showBadge}\n          content={badgeContent}\n          inverted={variant === 'primary'}\n        >\n          {formattedChildren}\n        </Badge>\n      </StyledIconButton>\n    )\n  }\n)\n"],"names":["baseIconStyles"],"mappings":"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"}

package/dist/types.d.ts

@@ -10,19 +10,19 @@ import { BaseButtonProps } from '@mirohq/design-system-base-button';
 declare const StyledIconButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
     children?: react.ReactNode;
 }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
-    variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
     children?: react.ReactNode;
 }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
-    variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>, {
-    variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
+    variant?: "primary" | "secondary" | "ghost" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}>;
 declare type StyledIconButtonProps = ComponentPropsWithRef<typeof StyledIconButton>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-icon-button",
-  "version": "2.1.36",
+  "version": "3.0.0-button-api-changes.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,12 +26,12 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-system-badge": "^0.3.49",
-    "@mirohq/design-system-base-icon": "^0.1.33",
+    "@mirohq/design-system-badge": "^0.4.0-button-api-changes.0",
     "@mirohq/design-system-styles": "^1.2.19",
     "@mirohq/design-system-stitches": "^2.6.19",
-    "@mirohq/design-system-base-button": "^0.4.56",
     "@mirohq/design-system-use-id": "^0.1.2",
+    "@mirohq/design-system-base-button": "^0.4.56",
+    "@mirohq/design-system-base-icon": "^0.1.33",
     "@mirohq/design-system-utils": "^0.15.4"
   },
   "scripts": {