@mirohq/design-system-icon-button 3.3.0-new-focus-keyboard.1 → 4.0.0-pdl-removing-ffs.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +11 -53
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +11 -53
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +38 -25
  6. package/package.json +8 -9
package/dist/main.js CHANGED
@@ -7,7 +7,6 @@ var React = require('react');
7
7
  var designSystemBadge = require('@mirohq/design-system-badge');
8
8
  var designSystemUtils = require('@mirohq/design-system-utils');
9
9
  var designSystemUseId = require('@mirohq/design-system-use-id');
10
- var designSystemExperiments = require('@mirohq/design-system-experiments');
11
10
  var designSystemBaseButton = require('@mirohq/design-system-base-button');
12
11
  var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
13
12
  var designSystemStitches = require('@mirohq/design-system-stitches');
@@ -23,13 +22,9 @@ const iconSelector = "& svg, & img";
23
22
  const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
24
23
  justifyContent: "center",
25
24
  ...designSystemStyles.focus.css({
26
- boxShadow: "$focus-keyboard"
25
+ boxShadow: "$focus"
27
26
  }),
28
27
  variants: {
29
- v1: {
30
- false: {},
31
- true: {}
32
- },
33
28
  variant: {
34
29
  primary: {
35
30
  backgroundColor: "$background-primary-prominent",
@@ -54,6 +49,9 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
54
49
  [disabledSelector]: {
55
50
  backgroundColor: "$background-neutrals-disabled",
56
51
  color: "$icon-neutrals-disabled"
52
+ },
53
+ [activeSelector]: {
54
+ backgroundColor: "$background-neutrals-subtle-pressed"
57
55
  }
58
56
  },
59
57
  outline: {
@@ -77,9 +75,15 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
77
75
  ghost: {
78
76
  color: "$icon-neutrals",
79
77
  backgroundColor: "transparent",
78
+ _hover: {
79
+ backgroundColor: "$background-neutrals-hover"
80
+ },
80
81
  [disabledSelector]: {
81
82
  color: "$icon-neutrals-disabled",
82
83
  backgroundColor: "$transparent"
84
+ },
85
+ [activeSelector]: {
86
+ backgroundColor: "$background-neutrals-pressed"
83
87
  }
84
88
  },
85
89
  danger: {
@@ -125,51 +129,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
125
129
  }
126
130
  }
127
131
  }
128
- },
129
- compoundVariants: [
130
- {
131
- variant: "secondary",
132
- v1: false,
133
- css: {
134
- [activeSelector]: {
135
- backgroundColor: "$background-neutrals-subtle-active"
136
- }
137
- }
138
- },
139
- {
140
- variant: "secondary",
141
- v1: true,
142
- css: {
143
- [activeSelector]: {
144
- backgroundColor: "$background-neutrals-subtle-pressed"
145
- }
146
- }
147
- },
148
- {
149
- variant: "ghost",
150
- v1: false,
151
- css: {
152
- _hover: {
153
- backgroundColor: "$background-neutrals-subtle-hover"
154
- },
155
- [activeSelector]: {
156
- backgroundColor: "$background-neutrals-subtle-active"
157
- }
158
- }
159
- },
160
- {
161
- variant: "ghost",
162
- v1: true,
163
- css: {
164
- _hover: {
165
- backgroundColor: "$background-neutrals-hover"
166
- },
167
- [activeSelector]: {
168
- backgroundColor: "$background-neutrals-pressed"
169
- }
170
- }
171
- }
172
- ]
132
+ }
173
133
  });
174
134
 
175
135
  const IconButton = React__default["default"].forwardRef(
@@ -184,7 +144,6 @@ const IconButton = React__default["default"].forwardRef(
184
144
  asChild = false,
185
145
  ...restProps
186
146
  }, forwardRef) => {
187
- const [v1] = designSystemExperiments.useNewDesignLanguage();
188
147
  const badgeId = designSystemUseId.useId();
189
148
  let badgeOffset = {};
190
149
  if (size === "medium") {
@@ -228,7 +187,6 @@ const IconButton = React__default["default"].forwardRef(
228
187
  StyledIconButton,
229
188
  {
230
189
  ...restProps,
231
- v1,
232
190
  variant,
233
191
  size,
234
192
  asChild,
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"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 iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus-keyboard',\n }),\n variants: {\n v1: {\n false: {},\n true: {},\n },\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\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 _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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'secondary',\n v1: false,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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 { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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 asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n v1={v1}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useNewDesignLanguage","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}
1
+ {"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 iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\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 [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 _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\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 { stringAttrValue } from '@mirohq/design-system-utils'\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 asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -3,7 +3,6 @@ import React from 'react';
3
3
  import { Badge } from '@mirohq/design-system-badge';
4
4
  import { stringAttrValue } from '@mirohq/design-system-utils';
5
5
  import { useId } from '@mirohq/design-system-use-id';
6
- import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
7
6
  import { BaseButton, sizes } from '@mirohq/design-system-base-button';
8
7
  import { styles } from '@mirohq/design-system-base-icon';
9
8
  import { styled } from '@mirohq/design-system-stitches';
@@ -15,13 +14,9 @@ const iconSelector = "& svg, & img";
15
14
  const StyledIconButton = styled(BaseButton, {
16
15
  justifyContent: "center",
17
16
  ...focus.css({
18
- boxShadow: "$focus-keyboard"
17
+ boxShadow: "$focus"
19
18
  }),
20
19
  variants: {
21
- v1: {
22
- false: {},
23
- true: {}
24
- },
25
20
  variant: {
26
21
  primary: {
27
22
  backgroundColor: "$background-primary-prominent",
@@ -46,6 +41,9 @@ const StyledIconButton = styled(BaseButton, {
46
41
  [disabledSelector]: {
47
42
  backgroundColor: "$background-neutrals-disabled",
48
43
  color: "$icon-neutrals-disabled"
44
+ },
45
+ [activeSelector]: {
46
+ backgroundColor: "$background-neutrals-subtle-pressed"
49
47
  }
50
48
  },
51
49
  outline: {
@@ -69,9 +67,15 @@ const StyledIconButton = styled(BaseButton, {
69
67
  ghost: {
70
68
  color: "$icon-neutrals",
71
69
  backgroundColor: "transparent",
70
+ _hover: {
71
+ backgroundColor: "$background-neutrals-hover"
72
+ },
72
73
  [disabledSelector]: {
73
74
  color: "$icon-neutrals-disabled",
74
75
  backgroundColor: "$transparent"
76
+ },
77
+ [activeSelector]: {
78
+ backgroundColor: "$background-neutrals-pressed"
75
79
  }
76
80
  },
77
81
  danger: {
@@ -117,51 +121,7 @@ const StyledIconButton = styled(BaseButton, {
117
121
  }
118
122
  }
119
123
  }
120
- },
121
- compoundVariants: [
122
- {
123
- variant: "secondary",
124
- v1: false,
125
- css: {
126
- [activeSelector]: {
127
- backgroundColor: "$background-neutrals-subtle-active"
128
- }
129
- }
130
- },
131
- {
132
- variant: "secondary",
133
- v1: true,
134
- css: {
135
- [activeSelector]: {
136
- backgroundColor: "$background-neutrals-subtle-pressed"
137
- }
138
- }
139
- },
140
- {
141
- variant: "ghost",
142
- v1: false,
143
- css: {
144
- _hover: {
145
- backgroundColor: "$background-neutrals-subtle-hover"
146
- },
147
- [activeSelector]: {
148
- backgroundColor: "$background-neutrals-subtle-active"
149
- }
150
- }
151
- },
152
- {
153
- variant: "ghost",
154
- v1: true,
155
- css: {
156
- _hover: {
157
- backgroundColor: "$background-neutrals-hover"
158
- },
159
- [activeSelector]: {
160
- backgroundColor: "$background-neutrals-pressed"
161
- }
162
- }
163
- }
164
- ]
124
+ }
165
125
  });
166
126
 
167
127
  const IconButton = React.forwardRef(
@@ -176,7 +136,6 @@ const IconButton = React.forwardRef(
176
136
  asChild = false,
177
137
  ...restProps
178
138
  }, forwardRef) => {
179
- const [v1] = useNewDesignLanguage();
180
139
  const badgeId = useId();
181
140
  let badgeOffset = {};
182
141
  if (size === "medium") {
@@ -220,7 +179,6 @@ const IconButton = React.forwardRef(
220
179
  StyledIconButton,
221
180
  {
222
181
  ...restProps,
223
- v1,
224
182
  variant,
225
183
  size,
226
184
  asChild,
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"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 iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus-keyboard',\n }),\n variants: {\n v1: {\n false: {},\n true: {},\n },\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\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 _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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'secondary',\n v1: false,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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 { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\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 asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n v1={v1}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":"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"}
1
+ {"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 iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\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 [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 _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\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 { stringAttrValue } from '@mirohq/design-system-utils'\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 asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":";;;;;;;;;;AAMA,MAAM,cAAiB,GAAA,2BAAA,CAAA;AACvB,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AACzB,MAAM,YAAe,GAAA,cAAA,CAAA;AAER,MAAA,gBAAA,GAAmB,OAAO,UAAY,EAAA;AAAA,EACjD,cAAgB,EAAA,QAAA;AAAA,EAChB,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA;AAAA,EACD,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,QAEP,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,qCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,sCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,QAEP,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,qCAAA;AAAA,SACnB;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,sBAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,QACP,MAAQ,EAAA,4BAAA;AAAA,QAER,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,UACjB,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,UACjB,WAAa,EAAA,yBAAA;AAAA,SACf;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,sBAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,UACP,WAAa,EAAA,2BAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,gBAAA;AAAA,QACP,eAAiB,EAAA,aAAA;AAAA,QAEjB,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,4BAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,KAAO,EAAA,yBAAA;AAAA,UACP,eAAiB,EAAA,cAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,8BAAA;AAAA,SACnB;AAAA,OACF;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,gBAAA;AAAA,QACP,eAAiB,EAAA,cAAA;AAAA,QAEjB,MAAQ,EAAA;AAAA,UACN,KAAO,EAAA,oBAAA;AAAA,UACP,eAAiB,EAAA,iCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,KAAO,EAAA,sBAAA;AAAA,UACP,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,KAAO,EAAA,yBAAA;AAAA,UACP,eAAiB,EAAA,+BAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,OAAO,KAAM,CAAA,MAAA;AAAA,QACb,CAAC,YAAY,GAAG;AAAA,UACd,GAAGA,OAAe,IAAK,CAAA,KAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,IAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQ,KAAM,CAAA,KAAA;AAAA,QACd,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,CAAC,YAAY,GAAG;AAAA,UACd,GAAGA,OAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,OAAO,KAAM,CAAA,MAAA;AAAA,QACb,CAAC,YAAY,GAAG;AAAA,UACd,GAAGA,OAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjFM,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,cAAA;AAAA,IACA,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACP,kBAAoB,EAAA,eAAA;AAAA,IACpB,OAAU,GAAA,KAAA;AAAA,IACV,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,IAAA,IAAI,cAAc,EAAC,CAAA;AACnB,IAAA,IAAI,SAAS,QAAU,EAAA;AACrB,MAAA,WAAA,GACE,YAAiB,KAAA,KAAA,CAAA,IAAa,YAAiB,KAAA,EAAA,GAC3C,EAAE,OAAS,EAAA,CAAA,CAAA,EAAI,OAAS,EAAA,CAAA,CAAA,EACxB,GAAA,EAAE,OAAS,EAAA,CAAA,EAAG,SAAS,CAAG,CAAA,EAAA,CAAA;AAAA,KAClC;AAEA,IAAA,IAAI,iBAAoB,GAAA,QAAA,CAAA;AACxB,IAAM,MAAA,gBAAA,GACJ,OACA,IAAA,KAAA,CAAM,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAM,KAAA,CAAA,IACnC,KAAM,CAAA,cAAA,CAAe,QAAQ,CAAA,CAAA;AAE/B,IAAA,IAAI,gBAAkB,EAAA;AAEpB,MAAA,MAAM,eAAkB,GAAA,KAAA,CAAM,QAAS,CAAA,IAAA,CAAK,QAAQ,CAAA,CAAA;AACpD,MAAA,MAAM,EAAE,QAAU,EAAA,mBAAA,EAAqB,GAAG,UAAA,KACxC,eAAgB,CAAA,KAAA,CAAA;AAElB,MAAoB,iBAAA,GAAA,KAAA,CAAM,aAAa,eAAiB,EAAA;AAAA,QACtD,GAAG,UAAA;AAAA,QACH,QAAA,kCAEK,QACC,EAAA,SAAA,mBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,OAAA;AAAA,YACJ,YAAY,EAAA,cAAA;AAAA,YACX,GAAG,WAAA;AAAA,YACJ,IAAM,EAAA,SAAA;AAAA,YACN,OAAS,EAAA,YAAA;AAAA,YACT,UAAU,OAAY,KAAA,SAAA;AAAA,YAErB,QAAA,EAAA,mBAAA;AAAA,WAAA;AAAA,YAGH,mBAEJ,EAAA,CAAA;AAAA,OAEH,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,iBAAA,mBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,OAAA;AAAA,UACJ,YAAY,EAAA,cAAA;AAAA,UACX,GAAG,WAAA;AAAA,UACJ,IAAM,EAAA,SAAA;AAAA,UACN,OAAS,EAAA,YAAA;AAAA,UACT,UAAU,OAAY,KAAA,SAAA;AAAA,UAErB,QAAA;AAAA,SAAA;AAAA,OAEL,EAAA,CAAA,CAAA;AAAA,KAEJ;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,OAAA;AAAA,QACA,IAAA;AAAA,QACA,OAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACL,kBAAkB,EAAA,eAAA;AAAA,UAChB,eAAA;AAAA,UACA,SAAA,IAAa,mBAAmB,KAAa,CAAA,IAAA,OAAA;AAAA,SAC/C;AAAA,QAEC,QAAA,EAAA,iBAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GAEJ;AACF;;;;"}
package/dist/types.d.ts CHANGED
@@ -7,30 +7,39 @@ import * as react from 'react';
7
7
  import react__default, { ComponentPropsWithRef } from 'react';
8
8
  import { BaseButtonProps } from '@mirohq/design-system-base-button';
9
9
 
10
- 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> & {
11
- children?: react.ReactNode;
12
- }, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
13
- v1?: boolean | "true" | "false" | undefined;
10
+ declare const StyledIconButton: react.ForwardRefExoticComponent<(Omit<Omit<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>, "ref"> & {
11
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
12
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
13
+ ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
14
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
15
+ children?: React.ReactNode;
16
+ }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
14
17
  variant?: "outline" | "primary" | "secondary" | "ghost" | "danger" | undefined;
15
18
  size?: "medium" | "large" | "x-large" | undefined;
16
- }, {}> & _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"> & {
19
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<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>, "ref"> & {
20
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
21
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
17
22
  href: string;
18
- }, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
19
- children?: react.ReactNode;
20
- }, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
21
- v1?: boolean | "true" | "false" | undefined;
23
+ }, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
24
+ ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
25
+ }, _mirohq_design_system_stitches.ForbiddenProps> & {
26
+ children?: React.ReactNode;
27
+ }, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
22
28
  variant?: "outline" | "primary" | "secondary" | "ghost" | "danger" | undefined;
23
29
  size?: "medium" | "large" | "x-large" | undefined;
24
- }, {}> & _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"> & {
30
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(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>, "ref"> & {
31
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
32
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | 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>, "ref"> & {
33
+ ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
34
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
25
35
  href: string;
26
36
  }, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>, {
27
- v1?: boolean | "true" | "false" | undefined;
28
37
  variant?: "outline" | "primary" | "secondary" | "ghost" | "danger" | undefined;
29
38
  size?: "medium" | "large" | "x-large" | undefined;
30
39
  }, {}>;
31
- declare type StyledIconButtonProps = ComponentPropsWithRef<typeof StyledIconButton>;
40
+ type StyledIconButtonProps = ComponentPropsWithRef<typeof StyledIconButton>;
32
41
 
33
- declare type IconButtonProps = {
42
+ type IconButtonProps = {
34
43
  /**
35
44
  * Icon button label used to provide a description.
36
45
  */
@@ -68,26 +77,28 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
68
77
  * Change the Icon button style
69
78
  * @default 'ghost'
70
79
  */
71
- variant?: StyledIconButtonProps['variant'];
80
+ variant?: StyledIconButtonProps["variant"];
72
81
  /**
73
82
  * Change the Icon button size.
74
83
  * @default 'large'
75
84
  */
76
- size?: StyledIconButtonProps['size'];
85
+ size?: StyledIconButtonProps["size"];
77
86
  /**
78
87
  * Wraps the Icon button with a badge.
79
88
  * @default false
80
89
  */
81
- showBadge?: boolean | undefined;
90
+ showBadge?: boolean;
82
91
  /**
83
92
  * The content to be displayed inside of the badge.
84
93
  */
85
- badgeContent?: string | undefined;
94
+ badgeContent?: string;
86
95
  /**
87
96
  * Badge label used to make Badge recognizable by the screen readers.
88
97
  */
89
- badgeAriaLabel?: string | undefined;
90
- } & Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<{
98
+ badgeAriaLabel?: string;
99
+ } & Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>, "ref"> & {
100
+ ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
101
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<{
91
102
  /**
92
103
  * Icon button label used to provide a description.
93
104
  */
@@ -96,26 +107,28 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
96
107
  * Change the Icon button style
97
108
  * @default 'ghost'
98
109
  */
99
- variant?: StyledIconButtonProps['variant'];
110
+ variant?: StyledIconButtonProps["variant"];
100
111
  /**
101
112
  * Change the Icon button size.
102
113
  * @default 'large'
103
114
  */
104
- size?: StyledIconButtonProps['size'];
115
+ size?: StyledIconButtonProps["size"];
105
116
  /**
106
117
  * Wraps the Icon button with a badge.
107
118
  * @default false
108
119
  */
109
- showBadge?: boolean | undefined;
120
+ showBadge?: boolean;
110
121
  /**
111
122
  * The content to be displayed inside of the badge.
112
123
  */
113
- badgeContent?: string | undefined;
124
+ badgeContent?: string;
114
125
  /**
115
126
  * Badge label used to make Badge recognizable by the screen readers.
116
127
  */
117
- badgeAriaLabel?: string | undefined;
118
- } & Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
128
+ badgeAriaLabel?: string;
129
+ } & Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>, "ref"> & {
130
+ ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
131
+ } & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
119
132
  href: string;
120
133
  }, "ref">) & react__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
121
134
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-icon-button",
3
- "version": "3.3.0-new-focus-keyboard.1",
3
+ "version": "4.0.0-pdl-removing-ffs.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,14 +26,13 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-badge": "^0.4.9-new-focus-keyboard.1",
30
- "@mirohq/design-system-base-button": "^0.4.69-new-focus-keyboard.1",
31
- "@mirohq/design-system-base-icon": "^0.1.33",
32
- "@mirohq/design-system-experiments": "^0.2.0",
33
- "@mirohq/design-system-stitches": "^2.6.31-new-focus-keyboard.1",
34
- "@mirohq/design-system-styles": "^1.2.31-new-focus-keyboard.1",
35
- "@mirohq/design-system-utils": "^0.15.5",
36
- "@mirohq/design-system-use-id": "^0.1.2"
29
+ "@mirohq/design-system-badge": "^1.0.0-pdl-removing-ffs.1",
30
+ "@mirohq/design-system-base-button": "^1.0.0-pdl-removing-ffs.1",
31
+ "@mirohq/design-system-styles": "^2.0.0-pdl-removing-ffs.1",
32
+ "@mirohq/design-system-base-icon": "^1.0.0-pdl-removing-ffs.1",
33
+ "@mirohq/design-system-use-id": "^1.0.0-pdl-removing-ffs.1",
34
+ "@mirohq/design-system-stitches": "^3.0.0-pdl-removing-ffs.1",
35
+ "@mirohq/design-system-utils": "^1.0.0-pdl-removing-ffs.1"
37
36
  },
38
37
  "scripts": {
39
38
  "build": "rollup -c ../../../rollup.config.js",