@mirohq/design-system-icon-button 1.2.3-changelog-1.0 → 1.2.3-checkbox.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.
- package/dist/main.js +127 -19
- package/dist/main.js.map +1 -1
- package/dist/module.js +128 -20
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +454 -4
- package/package.json +7 -7
package/dist/main.js
CHANGED
|
@@ -5,12 +5,113 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var designSystemTooltip = require('@mirohq/design-system-tooltip');
|
|
7
7
|
var designSystemBadge = require('@mirohq/design-system-badge');
|
|
8
|
+
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
9
|
+
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
8
10
|
var designSystemBaseButton = require('@mirohq/design-system-base-button');
|
|
9
11
|
|
|
10
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
13
|
|
|
12
14
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
15
|
|
|
16
|
+
const activeSelector = "&:active, &[data-pressed]";
|
|
17
|
+
const disabledSelector = '&[disabled], &[aria-disabled="true"]';
|
|
18
|
+
const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
|
|
19
|
+
variants: {
|
|
20
|
+
variant: {
|
|
21
|
+
"solid-prominent": {
|
|
22
|
+
backgroundColor: "$background-primary-prominent",
|
|
23
|
+
color: "$icon-primary-inverted",
|
|
24
|
+
"&[data-focused]": {
|
|
25
|
+
boxShadow: "$focus-small"
|
|
26
|
+
},
|
|
27
|
+
"&:hover": {
|
|
28
|
+
backgroundColor: "$background-primary-prominent-hover"
|
|
29
|
+
},
|
|
30
|
+
[activeSelector]: {
|
|
31
|
+
backgroundColor: "$background-primary-prominent-active"
|
|
32
|
+
},
|
|
33
|
+
[disabledSelector]: {
|
|
34
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
35
|
+
color: "$icon-neutrals-disabled"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"solid-subtle": {
|
|
39
|
+
backgroundColor: "$background-neutrals-subtle",
|
|
40
|
+
color: "$icon-neutrals",
|
|
41
|
+
"&[data-focused]": {
|
|
42
|
+
boxShadow: "$focus-small"
|
|
43
|
+
},
|
|
44
|
+
"&:hover": {
|
|
45
|
+
backgroundColor: "$background-neutrals-subtle-hover"
|
|
46
|
+
},
|
|
47
|
+
[activeSelector]: {
|
|
48
|
+
backgroundColor: "$background-neutrals-subtle-active"
|
|
49
|
+
},
|
|
50
|
+
[disabledSelector]: {
|
|
51
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
52
|
+
color: "$icon-neutrals-disabled"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
outline: {
|
|
56
|
+
backgroundColor: "$background-neutrals",
|
|
57
|
+
color: "$icon-neutrals",
|
|
58
|
+
border: "1px solid $border-neutrals",
|
|
59
|
+
"&[data-focused]": {
|
|
60
|
+
boxShadow: "$focus-small-outline",
|
|
61
|
+
borderColor: "$blue-500 !important"
|
|
62
|
+
},
|
|
63
|
+
"&:hover": {
|
|
64
|
+
backgroundColor: "$background-neutrals-subtle-hover",
|
|
65
|
+
borderColor: "$border-neutrals-hover"
|
|
66
|
+
},
|
|
67
|
+
[activeSelector]: {
|
|
68
|
+
backgroundColor: "$background-neutrals-subtle-active",
|
|
69
|
+
borderColor: "$border-neutrals-active"
|
|
70
|
+
},
|
|
71
|
+
[disabledSelector]: {
|
|
72
|
+
backgroundColor: "$background-neutrals",
|
|
73
|
+
color: "$icon-neutrals-disabled",
|
|
74
|
+
borderColor: "$border-neutrals-disabled"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
ghost: {
|
|
78
|
+
color: "$icon-neutrals",
|
|
79
|
+
backgroundColor: "transparent",
|
|
80
|
+
"&[data-focused]": {
|
|
81
|
+
boxShadow: "$focus-small"
|
|
82
|
+
},
|
|
83
|
+
"&:hover": {
|
|
84
|
+
backgroundColor: "$background-neutrals-subtle-hover"
|
|
85
|
+
},
|
|
86
|
+
[activeSelector]: {
|
|
87
|
+
backgroundColor: "$background-neutrals-subtle-active"
|
|
88
|
+
},
|
|
89
|
+
[disabledSelector]: {
|
|
90
|
+
color: "$icon-neutrals-disabled",
|
|
91
|
+
backgroundColor: "$transparent"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
size: {
|
|
96
|
+
medium: {
|
|
97
|
+
height: designSystemBaseButton.sizes.medium,
|
|
98
|
+
width: designSystemBaseButton.sizes.medium,
|
|
99
|
+
paddingX: "$50"
|
|
100
|
+
},
|
|
101
|
+
large: {
|
|
102
|
+
height: designSystemBaseButton.sizes.large,
|
|
103
|
+
width: designSystemBaseButton.sizes.large,
|
|
104
|
+
paddingX: "$100"
|
|
105
|
+
},
|
|
106
|
+
"x-large": {
|
|
107
|
+
height: designSystemBaseButton.sizes.xLarge,
|
|
108
|
+
width: designSystemBaseButton.sizes.xLarge,
|
|
109
|
+
paddingX: "$150"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
|
|
14
115
|
const IconButton = React__default["default"].forwardRef(
|
|
15
116
|
({
|
|
16
117
|
children,
|
|
@@ -23,26 +124,33 @@ const IconButton = React__default["default"].forwardRef(
|
|
|
23
124
|
tooltipSide = "bottom",
|
|
24
125
|
variant = "ghost",
|
|
25
126
|
size = "large",
|
|
127
|
+
"aria-label": ariaLabel,
|
|
26
128
|
...restProps
|
|
27
|
-
}, forwardRef) =>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
129
|
+
}, forwardRef) => {
|
|
130
|
+
const formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
|
|
131
|
+
"aria-hidden": "true"
|
|
132
|
+
});
|
|
133
|
+
return /* @__PURE__ */ React__default["default"].createElement(designSystemTooltip.Tooltip, {
|
|
134
|
+
delayDuration: tooltipDelayDuration,
|
|
135
|
+
skipDelayDuration: tooltipSkipDelayDuration
|
|
136
|
+
}, /* @__PURE__ */ React__default["default"].createElement(designSystemTooltip.Tooltip.Trigger, {
|
|
137
|
+
asChild: true
|
|
138
|
+
}, /* @__PURE__ */ React__default["default"].createElement(StyledIconButton, {
|
|
139
|
+
...restProps,
|
|
140
|
+
variant,
|
|
141
|
+
size,
|
|
142
|
+
ref: forwardRef,
|
|
143
|
+
"aria-label": ariaLabel != null ? ariaLabel : label
|
|
144
|
+
}, /* @__PURE__ */ React__default["default"].createElement(designSystemBadge.Badge, {
|
|
145
|
+
show: showBadge,
|
|
146
|
+
content: badgeContent,
|
|
147
|
+
inverted: variant === "solid-prominent"
|
|
148
|
+
}, formattedChildren))), /* @__PURE__ */ React__default["default"].createElement(designSystemTooltip.Tooltip.Content, {
|
|
149
|
+
align: tooltipAlign,
|
|
150
|
+
side: tooltipSide,
|
|
151
|
+
hideWhenDetached: true
|
|
152
|
+
}, label));
|
|
153
|
+
}
|
|
46
154
|
);
|
|
47
155
|
|
|
48
156
|
exports.IconButton = IconButton;
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/icon-button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport
|
|
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 type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledIconButton = styled(BaseButton, {\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n '&[data-focused]': {\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 '&[data-focused]': {\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 '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !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 '&[data-focused]': {\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 paddingX: '$50',\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport interface IconButtonProps extends StyledIconButtonProps {\n /**\n * Change the Icon button style\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n })\n\n return (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["styled","BaseButton","sizes","React","addPropsToChildren","Tooltip","Badge"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,7 +1,108 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Tooltip } from '@mirohq/design-system-tooltip';
|
|
3
3
|
import { Badge } from '@mirohq/design-system-badge';
|
|
4
|
-
import {
|
|
4
|
+
import { addPropsToChildren } from '@mirohq/design-system-utils';
|
|
5
|
+
import { styled } from '@mirohq/design-system-stitches';
|
|
6
|
+
import { BaseButton, sizes } from '@mirohq/design-system-base-button';
|
|
7
|
+
|
|
8
|
+
const activeSelector = "&:active, &[data-pressed]";
|
|
9
|
+
const disabledSelector = '&[disabled], &[aria-disabled="true"]';
|
|
10
|
+
const StyledIconButton = styled(BaseButton, {
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
"solid-prominent": {
|
|
14
|
+
backgroundColor: "$background-primary-prominent",
|
|
15
|
+
color: "$icon-primary-inverted",
|
|
16
|
+
"&[data-focused]": {
|
|
17
|
+
boxShadow: "$focus-small"
|
|
18
|
+
},
|
|
19
|
+
"&:hover": {
|
|
20
|
+
backgroundColor: "$background-primary-prominent-hover"
|
|
21
|
+
},
|
|
22
|
+
[activeSelector]: {
|
|
23
|
+
backgroundColor: "$background-primary-prominent-active"
|
|
24
|
+
},
|
|
25
|
+
[disabledSelector]: {
|
|
26
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
27
|
+
color: "$icon-neutrals-disabled"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"solid-subtle": {
|
|
31
|
+
backgroundColor: "$background-neutrals-subtle",
|
|
32
|
+
color: "$icon-neutrals",
|
|
33
|
+
"&[data-focused]": {
|
|
34
|
+
boxShadow: "$focus-small"
|
|
35
|
+
},
|
|
36
|
+
"&:hover": {
|
|
37
|
+
backgroundColor: "$background-neutrals-subtle-hover"
|
|
38
|
+
},
|
|
39
|
+
[activeSelector]: {
|
|
40
|
+
backgroundColor: "$background-neutrals-subtle-active"
|
|
41
|
+
},
|
|
42
|
+
[disabledSelector]: {
|
|
43
|
+
backgroundColor: "$background-neutrals-disabled",
|
|
44
|
+
color: "$icon-neutrals-disabled"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
outline: {
|
|
48
|
+
backgroundColor: "$background-neutrals",
|
|
49
|
+
color: "$icon-neutrals",
|
|
50
|
+
border: "1px solid $border-neutrals",
|
|
51
|
+
"&[data-focused]": {
|
|
52
|
+
boxShadow: "$focus-small-outline",
|
|
53
|
+
borderColor: "$blue-500 !important"
|
|
54
|
+
},
|
|
55
|
+
"&:hover": {
|
|
56
|
+
backgroundColor: "$background-neutrals-subtle-hover",
|
|
57
|
+
borderColor: "$border-neutrals-hover"
|
|
58
|
+
},
|
|
59
|
+
[activeSelector]: {
|
|
60
|
+
backgroundColor: "$background-neutrals-subtle-active",
|
|
61
|
+
borderColor: "$border-neutrals-active"
|
|
62
|
+
},
|
|
63
|
+
[disabledSelector]: {
|
|
64
|
+
backgroundColor: "$background-neutrals",
|
|
65
|
+
color: "$icon-neutrals-disabled",
|
|
66
|
+
borderColor: "$border-neutrals-disabled"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
ghost: {
|
|
70
|
+
color: "$icon-neutrals",
|
|
71
|
+
backgroundColor: "transparent",
|
|
72
|
+
"&[data-focused]": {
|
|
73
|
+
boxShadow: "$focus-small"
|
|
74
|
+
},
|
|
75
|
+
"&:hover": {
|
|
76
|
+
backgroundColor: "$background-neutrals-subtle-hover"
|
|
77
|
+
},
|
|
78
|
+
[activeSelector]: {
|
|
79
|
+
backgroundColor: "$background-neutrals-subtle-active"
|
|
80
|
+
},
|
|
81
|
+
[disabledSelector]: {
|
|
82
|
+
color: "$icon-neutrals-disabled",
|
|
83
|
+
backgroundColor: "$transparent"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
size: {
|
|
88
|
+
medium: {
|
|
89
|
+
height: sizes.medium,
|
|
90
|
+
width: sizes.medium,
|
|
91
|
+
paddingX: "$50"
|
|
92
|
+
},
|
|
93
|
+
large: {
|
|
94
|
+
height: sizes.large,
|
|
95
|
+
width: sizes.large,
|
|
96
|
+
paddingX: "$100"
|
|
97
|
+
},
|
|
98
|
+
"x-large": {
|
|
99
|
+
height: sizes.xLarge,
|
|
100
|
+
width: sizes.xLarge,
|
|
101
|
+
paddingX: "$150"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
});
|
|
5
106
|
|
|
6
107
|
const IconButton = React.forwardRef(
|
|
7
108
|
({
|
|
@@ -15,26 +116,33 @@ const IconButton = React.forwardRef(
|
|
|
15
116
|
tooltipSide = "bottom",
|
|
16
117
|
variant = "ghost",
|
|
17
118
|
size = "large",
|
|
119
|
+
"aria-label": ariaLabel,
|
|
18
120
|
...restProps
|
|
19
|
-
}, forwardRef) =>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
121
|
+
}, forwardRef) => {
|
|
122
|
+
const formattedChildren = addPropsToChildren(children, () => true, {
|
|
123
|
+
"aria-hidden": "true"
|
|
124
|
+
});
|
|
125
|
+
return /* @__PURE__ */ React.createElement(Tooltip, {
|
|
126
|
+
delayDuration: tooltipDelayDuration,
|
|
127
|
+
skipDelayDuration: tooltipSkipDelayDuration
|
|
128
|
+
}, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
|
|
129
|
+
asChild: true
|
|
130
|
+
}, /* @__PURE__ */ React.createElement(StyledIconButton, {
|
|
131
|
+
...restProps,
|
|
132
|
+
variant,
|
|
133
|
+
size,
|
|
134
|
+
ref: forwardRef,
|
|
135
|
+
"aria-label": ariaLabel != null ? ariaLabel : label
|
|
136
|
+
}, /* @__PURE__ */ React.createElement(Badge, {
|
|
137
|
+
show: showBadge,
|
|
138
|
+
content: badgeContent,
|
|
139
|
+
inverted: variant === "solid-prominent"
|
|
140
|
+
}, formattedChildren))), /* @__PURE__ */ React.createElement(Tooltip.Content, {
|
|
141
|
+
align: tooltipAlign,
|
|
142
|
+
side: tooltipSide,
|
|
143
|
+
hideWhenDetached: true
|
|
144
|
+
}, label));
|
|
145
|
+
}
|
|
38
146
|
);
|
|
39
147
|
|
|
40
148
|
export { IconButton };
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/icon-button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport
|
|
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 type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledIconButton = styled(BaseButton, {\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n '&[data-focused]': {\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 '&[data-focused]': {\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 '&[data-focused]': {\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !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 '&[data-focused]': {\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 paddingX: '$50',\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport interface IconButtonProps extends StyledIconButtonProps {\n /**\n * Change the Icon button style\n */\n variant?: StyledIconButtonProps['variant']\n\n /**\n * Change the Icon button size\n */\n size?: StyledIconButtonProps['size']\n\n /**\n * Icon button label used to provide a description.\n */\n label: string\n\n /**\n * The duration of a the delay before a tooltip is shown.\n */\n tooltipDelayDuration?: number\n\n /**\n * \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n */\n tooltipSkipDelayDuration?: number\n\n /**\n * The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n */\n tooltipSide?: TooltipContentProps['side']\n\n /**\n * The preferred alignment against the trigger. May change when collisions\n * occur.\n */\n tooltipAlign?: TooltipContentProps['align']\n\n /**\n * Wraps the Icon button with a badge.\n */\n showBadge?: boolean\n\n /**\n * The content to be displayed inside of the badge.\n */\n badgeContent?: string\n}\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n })\n\n return (\n <Tooltip\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,8 +1,458 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import react__default, { ComponentPropsWithRef } from 'react';
|
|
2
3
|
import { TooltipContentProps } from '@mirohq/design-system-tooltip';
|
|
3
|
-
import
|
|
4
|
+
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
5
|
+
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
6
|
+
import * as _mirohq_design_system_base_button from '@mirohq/design-system-base-button';
|
|
7
|
+
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
declare const StyledIconButton: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
10
|
+
variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
|
|
11
|
+
size?: "medium" | "large" | "x-large" | undefined;
|
|
12
|
+
}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
|
|
13
|
+
variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
|
|
14
|
+
size?: "medium" | "large" | "x-large" | undefined;
|
|
15
|
+
}, {}> & _mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<Pick<_mirohq_design_system_base_button.BaseButtonProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "form" | "slot" | "title" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "name" | "placeholder" | "rel" | "target" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
|
|
16
|
+
'border-widths': {
|
|
17
|
+
readonly none: 0;
|
|
18
|
+
readonly sm: "1px";
|
|
19
|
+
readonly md: "2px";
|
|
20
|
+
readonly lg: "4px";
|
|
21
|
+
};
|
|
22
|
+
colors: {
|
|
23
|
+
readonly 'blue-100': any;
|
|
24
|
+
readonly 'blue-200': any;
|
|
25
|
+
readonly 'blue-300': any;
|
|
26
|
+
readonly 'blue-400': any;
|
|
27
|
+
readonly 'blue-500': any;
|
|
28
|
+
readonly 'blue-600': any;
|
|
29
|
+
readonly 'blue-700': any;
|
|
30
|
+
readonly 'blue-800': any;
|
|
31
|
+
readonly 'blue-900': any;
|
|
32
|
+
readonly 'blue-1000': any;
|
|
33
|
+
readonly 'gray-100': any;
|
|
34
|
+
readonly 'gray-200': any;
|
|
35
|
+
readonly 'gray-300': any;
|
|
36
|
+
readonly 'gray-400': any;
|
|
37
|
+
readonly 'gray-500': any;
|
|
38
|
+
readonly 'gray-600': any;
|
|
39
|
+
readonly 'gray-700': any;
|
|
40
|
+
readonly 'gray-800': any;
|
|
41
|
+
readonly 'gray-900': any;
|
|
42
|
+
readonly 'indigo-100': any;
|
|
43
|
+
readonly 'indigo-200': any;
|
|
44
|
+
readonly 'indigo-300': any;
|
|
45
|
+
readonly 'indigo-400': any;
|
|
46
|
+
readonly 'indigo-500': any;
|
|
47
|
+
readonly 'indigo-600': any;
|
|
48
|
+
readonly 'indigo-700': any;
|
|
49
|
+
readonly 'indigo-800': any;
|
|
50
|
+
readonly 'indigo-900': any;
|
|
51
|
+
readonly 'red-100': any;
|
|
52
|
+
readonly 'red-200': any;
|
|
53
|
+
readonly 'red-300': any;
|
|
54
|
+
readonly 'red-400': any;
|
|
55
|
+
readonly 'red-500': any;
|
|
56
|
+
readonly 'red-600': any;
|
|
57
|
+
readonly 'red-700': any;
|
|
58
|
+
readonly 'red-800': any;
|
|
59
|
+
readonly 'red-900': any;
|
|
60
|
+
readonly 'yellow-100': any;
|
|
61
|
+
readonly 'yellow-200': any;
|
|
62
|
+
readonly 'yellow-300': any;
|
|
63
|
+
readonly 'yellow-400': any;
|
|
64
|
+
readonly 'yellow-500': any;
|
|
65
|
+
readonly 'yellow-600': any;
|
|
66
|
+
readonly 'yellow-700': any;
|
|
67
|
+
readonly 'yellow-800': any;
|
|
68
|
+
readonly 'yellow-900': any;
|
|
69
|
+
readonly 'green-100': any;
|
|
70
|
+
readonly 'green-200': any;
|
|
71
|
+
readonly 'green-300': any;
|
|
72
|
+
readonly 'green-400': any;
|
|
73
|
+
readonly 'green-500': any;
|
|
74
|
+
readonly 'green-600': any;
|
|
75
|
+
readonly 'green-700': any;
|
|
76
|
+
readonly 'green-800': any;
|
|
77
|
+
readonly 'green-900': any;
|
|
78
|
+
readonly black: any;
|
|
79
|
+
readonly white: any;
|
|
80
|
+
readonly transparent: any;
|
|
81
|
+
readonly 'background-neutrals'?: any;
|
|
82
|
+
readonly 'background-neutrals-body'?: any;
|
|
83
|
+
readonly 'background-neutrals-container'?: any;
|
|
84
|
+
readonly 'background-neutrals-inverted'?: any;
|
|
85
|
+
readonly 'background-neutrals-inverted-subtle'?: any;
|
|
86
|
+
readonly 'background-neutrals-subtle'?: any;
|
|
87
|
+
readonly 'background-neutrals-subtle-hover'?: any;
|
|
88
|
+
readonly 'background-neutrals-subtle-active'?: any;
|
|
89
|
+
readonly 'background-neutrals-disabled'?: any;
|
|
90
|
+
readonly 'background-neutrals-controls-disabled'?: any;
|
|
91
|
+
readonly 'background-neutrals-scrolls'?: any;
|
|
92
|
+
readonly 'background-neutrals-inactive'?: any;
|
|
93
|
+
readonly 'background-neutrals-inactive-hover'?: any;
|
|
94
|
+
readonly 'background-primary-prominent'?: any;
|
|
95
|
+
readonly 'background-primary-prominent-hover'?: any;
|
|
96
|
+
readonly 'background-primary-prominent-active'?: any;
|
|
97
|
+
readonly 'background-primary-prominent-selected'?: any;
|
|
98
|
+
readonly 'background-primary-subtle'?: any;
|
|
99
|
+
readonly 'background-primary-subtle-hover'?: any;
|
|
100
|
+
readonly 'background-primary-subtle-active'?: any;
|
|
101
|
+
readonly 'background-primary-subtle-selected'?: any;
|
|
102
|
+
readonly 'background-danger-prominent'?: any;
|
|
103
|
+
readonly 'background-danger-prominent-hover'?: any;
|
|
104
|
+
readonly 'background-danger-prominent-active'?: any;
|
|
105
|
+
readonly 'background-danger'?: any;
|
|
106
|
+
readonly 'background-danger-hover'?: any;
|
|
107
|
+
readonly 'background-success'?: any;
|
|
108
|
+
readonly 'background-warning-subtle'?: any;
|
|
109
|
+
readonly 'background-warning-prominent'?: any;
|
|
110
|
+
readonly 'text-neutrals-inverted'?: any;
|
|
111
|
+
readonly 'text-neutrals'?: any;
|
|
112
|
+
readonly 'text-neutrals-subtle'?: any;
|
|
113
|
+
readonly 'text-neutrals-placeholder-only'?: any;
|
|
114
|
+
readonly 'text-neutrals-placeholder'?: any;
|
|
115
|
+
readonly 'text-neutrals-disabled'?: any;
|
|
116
|
+
readonly 'text-primary-inverted'?: any;
|
|
117
|
+
readonly 'text-primary'?: any;
|
|
118
|
+
readonly 'text-primary-hover'?: any;
|
|
119
|
+
readonly 'text-primary-active'?: any;
|
|
120
|
+
readonly 'text-primary-selected'?: any;
|
|
121
|
+
readonly 'text-primary-inverted-subtle'?: any;
|
|
122
|
+
readonly 'text-danger-inverted'?: any;
|
|
123
|
+
readonly 'text-danger'?: any;
|
|
124
|
+
readonly 'text-danger-hover'?: any;
|
|
125
|
+
readonly 'text-danger-active'?: any;
|
|
126
|
+
readonly 'text-success'?: any;
|
|
127
|
+
readonly 'text-warning'?: any;
|
|
128
|
+
readonly 'icon-neutrals-inverted'?: any;
|
|
129
|
+
readonly 'icon-neutrals'?: any;
|
|
130
|
+
readonly 'icon-neutrals-with-text'?: any;
|
|
131
|
+
readonly 'icon-neutrals-subtle'?: any;
|
|
132
|
+
readonly 'icon-neutrals-disabled'?: any;
|
|
133
|
+
readonly 'icon-neutrals-search'?: any;
|
|
134
|
+
readonly 'icon-neutrals-inactive'?: any;
|
|
135
|
+
readonly 'icon-neutrals-inactive-hover'?: any;
|
|
136
|
+
readonly 'icon-primary-inverted'?: any;
|
|
137
|
+
readonly 'icon-primary'?: any;
|
|
138
|
+
readonly 'icon-primary-hover'?: any;
|
|
139
|
+
readonly 'icon-primary-active'?: any;
|
|
140
|
+
readonly 'icon-primary-selected'?: any;
|
|
141
|
+
readonly 'icon-danger-inverted'?: any;
|
|
142
|
+
readonly 'icon-danger'?: any;
|
|
143
|
+
readonly 'icon-danger-hover'?: any;
|
|
144
|
+
readonly 'icon-danger-active'?: any;
|
|
145
|
+
readonly 'icon-success-inverted'?: any;
|
|
146
|
+
readonly 'icon-success'?: any;
|
|
147
|
+
readonly 'icon-warning'?: any;
|
|
148
|
+
readonly 'border-focus-outer'?: any;
|
|
149
|
+
readonly 'border-focus-middle'?: any;
|
|
150
|
+
readonly 'border-focus-inner'?: any;
|
|
151
|
+
readonly 'border-neutrals'?: any;
|
|
152
|
+
readonly 'border-neutrals-hover'?: any;
|
|
153
|
+
readonly 'border-neutrals-active'?: any;
|
|
154
|
+
readonly 'border-neutrals-disabled'?: any;
|
|
155
|
+
readonly 'border-neutrals-controls'?: any;
|
|
156
|
+
readonly 'border-neutrals-controls-disabled'?: any;
|
|
157
|
+
readonly 'border-neutrals-subtle'?: any;
|
|
158
|
+
readonly 'border-neutrals-inverted'?: any;
|
|
159
|
+
readonly 'border-primary'?: any;
|
|
160
|
+
readonly 'border-primary-hover'?: any;
|
|
161
|
+
readonly 'border-primary-active'?: any;
|
|
162
|
+
readonly 'border-primary-inverted'?: any;
|
|
163
|
+
readonly 'border-danger'?: any;
|
|
164
|
+
readonly 'border-success'?: any;
|
|
165
|
+
readonly 'border-warning'?: any;
|
|
166
|
+
};
|
|
167
|
+
'font-sizes': {
|
|
168
|
+
readonly 150: "0.75rem";
|
|
169
|
+
readonly 175: "0.875rem";
|
|
170
|
+
readonly 200: "1rem";
|
|
171
|
+
readonly 225: "1.125rem";
|
|
172
|
+
readonly 250: "1.25rem";
|
|
173
|
+
readonly 300: "1.5rem";
|
|
174
|
+
readonly 400: "2rem";
|
|
175
|
+
readonly 500: "2.5rem";
|
|
176
|
+
readonly 600: "3rem";
|
|
177
|
+
readonly 800: "4rem";
|
|
178
|
+
readonly 900: "4.5rem";
|
|
179
|
+
};
|
|
180
|
+
radii: {
|
|
181
|
+
readonly none: 0;
|
|
182
|
+
readonly half: "999em";
|
|
183
|
+
readonly 25: "2px";
|
|
184
|
+
readonly 50: "4px";
|
|
185
|
+
readonly 75: "6px";
|
|
186
|
+
readonly 100: "8px";
|
|
187
|
+
readonly 200: "16px";
|
|
188
|
+
};
|
|
189
|
+
shadows: {
|
|
190
|
+
readonly 50: "0 4px 16px #05003812";
|
|
191
|
+
readonly 100: "0 8px 32px #05003808";
|
|
192
|
+
readonly 'focus-small': "0 0 0 2px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
193
|
+
readonly 'focus-large': "0 0 0 4px $colors$border-focus-inner, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-outer";
|
|
194
|
+
readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
|
|
195
|
+
};
|
|
196
|
+
sizes: {
|
|
197
|
+
readonly number: string;
|
|
198
|
+
readonly 'icon-200': "16px";
|
|
199
|
+
readonly 'icon-300': "24px";
|
|
200
|
+
readonly 'icon-400': "32px";
|
|
201
|
+
};
|
|
202
|
+
space: {
|
|
203
|
+
readonly none: 0;
|
|
204
|
+
readonly 50: "4px";
|
|
205
|
+
readonly 100: "8px";
|
|
206
|
+
readonly 150: "12px";
|
|
207
|
+
readonly 200: "16px";
|
|
208
|
+
readonly 300: "24px";
|
|
209
|
+
readonly 400: "32px";
|
|
210
|
+
readonly 500: "64px";
|
|
211
|
+
readonly 600: "48px";
|
|
212
|
+
readonly 800: "64px";
|
|
213
|
+
readonly 1200: "96px";
|
|
214
|
+
readonly 1600: "128px";
|
|
215
|
+
};
|
|
216
|
+
'space-gap': {
|
|
217
|
+
readonly none: any;
|
|
218
|
+
readonly 50: any;
|
|
219
|
+
readonly 100: any;
|
|
220
|
+
readonly 200: any;
|
|
221
|
+
readonly 300: any;
|
|
222
|
+
};
|
|
223
|
+
'space-inset': {
|
|
224
|
+
readonly none: any;
|
|
225
|
+
readonly 50: any;
|
|
226
|
+
readonly 100: any;
|
|
227
|
+
readonly 150: any;
|
|
228
|
+
readonly 200: any;
|
|
229
|
+
readonly 300: any;
|
|
230
|
+
readonly 400: any;
|
|
231
|
+
readonly 600: any;
|
|
232
|
+
readonly 800: any;
|
|
233
|
+
readonly 1200: any;
|
|
234
|
+
readonly 1600: any;
|
|
235
|
+
};
|
|
236
|
+
'space-offset': {
|
|
237
|
+
readonly none: any;
|
|
238
|
+
readonly 50: any;
|
|
239
|
+
readonly 100: any;
|
|
240
|
+
readonly 150: any;
|
|
241
|
+
readonly 200: any;
|
|
242
|
+
readonly 300: any;
|
|
243
|
+
readonly 400: any;
|
|
244
|
+
readonly 600: any;
|
|
245
|
+
readonly 800: any;
|
|
246
|
+
readonly 1200: any;
|
|
247
|
+
readonly 1600: any;
|
|
248
|
+
readonly 'stacking-none': any;
|
|
249
|
+
readonly 'stacking-100': any;
|
|
250
|
+
readonly 'stacking-200': any;
|
|
251
|
+
readonly 'stacking-300': any;
|
|
252
|
+
readonly 'stacking-400': any;
|
|
253
|
+
readonly 'stacking-500': any;
|
|
254
|
+
readonly 'stacking-800': any;
|
|
255
|
+
};
|
|
256
|
+
'z-indices': {
|
|
257
|
+
readonly dropdownMenu: 100;
|
|
258
|
+
readonly popover: 200;
|
|
259
|
+
readonly tooltip: 300;
|
|
260
|
+
};
|
|
261
|
+
}, {
|
|
262
|
+
readonly background: "colors";
|
|
263
|
+
readonly backgroundColor: "colors";
|
|
264
|
+
readonly backgroundImage: "colors";
|
|
265
|
+
readonly blockSize: "sizes";
|
|
266
|
+
readonly border: "colors";
|
|
267
|
+
readonly borderBlock: "colors";
|
|
268
|
+
readonly borderBlockEnd: "colors";
|
|
269
|
+
readonly borderBlockStart: "colors";
|
|
270
|
+
readonly borderBottom: "colors";
|
|
271
|
+
readonly borderBottomColor: "colors";
|
|
272
|
+
readonly borderBottomLeftRadius: "radii";
|
|
273
|
+
readonly borderBottomRightRadius: "radii";
|
|
274
|
+
readonly borderBottomStyle: "border-styles";
|
|
275
|
+
readonly borderBottomWidth: "border-widths";
|
|
276
|
+
readonly borderColor: "colors";
|
|
277
|
+
readonly borderImage: "colors";
|
|
278
|
+
readonly borderInline: "colors";
|
|
279
|
+
readonly borderInlineEnd: "colors";
|
|
280
|
+
readonly borderInlineStart: "colors";
|
|
281
|
+
readonly borderLeft: "colors";
|
|
282
|
+
readonly borderLeftColor: "colors";
|
|
283
|
+
readonly borderLeftStyle: "border-styles";
|
|
284
|
+
readonly borderLeftWidth: "border-widths";
|
|
285
|
+
readonly borderRadius: "radii";
|
|
286
|
+
readonly borderRight: "colors";
|
|
287
|
+
readonly borderRightColor: "colors";
|
|
288
|
+
readonly borderRightStyle: "border-styles";
|
|
289
|
+
readonly borderRightWidth: "border-widths";
|
|
290
|
+
readonly borderStyle: "border-styles";
|
|
291
|
+
readonly borderTop: "colors";
|
|
292
|
+
readonly borderTopColor: "colors";
|
|
293
|
+
readonly borderTopLeftRadius: "radii";
|
|
294
|
+
readonly borderTopRightRadius: "radii";
|
|
295
|
+
readonly borderTopStyle: "border-styles";
|
|
296
|
+
readonly borderTopWidth: "border-widths";
|
|
297
|
+
readonly borderWidth: "border-widths";
|
|
298
|
+
readonly bottom: "space";
|
|
299
|
+
readonly boxShadow: "shadows";
|
|
300
|
+
readonly caretColor: "colors";
|
|
301
|
+
readonly color: "colors";
|
|
302
|
+
readonly columnGap: "space-gap";
|
|
303
|
+
readonly columnRuleColor: "colors";
|
|
304
|
+
readonly fill: "colors";
|
|
305
|
+
readonly flexBasis: "sizes";
|
|
306
|
+
readonly fontFamily: "fonts";
|
|
307
|
+
readonly fontSize: "font-sizes";
|
|
308
|
+
readonly fontWeight: "font-weights";
|
|
309
|
+
readonly gap: "space-gap";
|
|
310
|
+
readonly gridColumnGap: "space-gap";
|
|
311
|
+
readonly gridGap: "space-gap";
|
|
312
|
+
readonly gridRowGap: "space-gap";
|
|
313
|
+
readonly gridTemplateColumns: "sizes";
|
|
314
|
+
readonly gridTemplateRows: "sizes";
|
|
315
|
+
readonly height: "sizes";
|
|
316
|
+
readonly inlineSize: "sizes";
|
|
317
|
+
readonly inset: "space-inset";
|
|
318
|
+
readonly insetBlock: "space-inset";
|
|
319
|
+
readonly insetBlockEnd: "space-inset";
|
|
320
|
+
readonly insetBlockStart: "space-inset";
|
|
321
|
+
readonly insetInline: "space-inset";
|
|
322
|
+
readonly insetInlineEnd: "space-inset";
|
|
323
|
+
readonly insetInlineStart: "space-inset";
|
|
324
|
+
readonly left: "space";
|
|
325
|
+
readonly letterSpacing: "letter-spacings";
|
|
326
|
+
readonly lineHeight: "line-heights";
|
|
327
|
+
readonly margin: "space-offset";
|
|
328
|
+
readonly marginBlock: "space-offset";
|
|
329
|
+
readonly marginBlockEnd: "space-offset";
|
|
330
|
+
readonly marginBlockStart: "space-offset";
|
|
331
|
+
readonly marginBottom: "space-offset";
|
|
332
|
+
readonly marginInline: "space-offset";
|
|
333
|
+
readonly marginInlineEnd: "space-offset";
|
|
334
|
+
readonly marginInlineStart: "space-offset";
|
|
335
|
+
readonly marginLeft: "space-offset";
|
|
336
|
+
readonly marginRight: "space-offset";
|
|
337
|
+
readonly marginTop: "space-offset";
|
|
338
|
+
readonly maxBlockSize: "sizes";
|
|
339
|
+
readonly maxHeight: "sizes";
|
|
340
|
+
readonly maxInlineSize: "sizes";
|
|
341
|
+
readonly maxWidth: "sizes";
|
|
342
|
+
readonly minBlockSize: "sizes";
|
|
343
|
+
readonly minHeight: "sizes";
|
|
344
|
+
readonly minInlineSize: "sizes";
|
|
345
|
+
readonly minWidth: "sizes";
|
|
346
|
+
readonly outline: "colors";
|
|
347
|
+
readonly outlineColor: "colors";
|
|
348
|
+
readonly padding: "space-inset";
|
|
349
|
+
readonly paddingBlock: "space-inset";
|
|
350
|
+
readonly paddingBlockEnd: "space-inset";
|
|
351
|
+
readonly paddingBlockStart: "space-inset";
|
|
352
|
+
readonly paddingBottom: "space-inset";
|
|
353
|
+
readonly paddingInline: "space-inset";
|
|
354
|
+
readonly paddingInlineEnd: "space-inset";
|
|
355
|
+
readonly paddingInlineStart: "space-inset";
|
|
356
|
+
readonly paddingLeft: "space-inset";
|
|
357
|
+
readonly paddingRight: "space-inset";
|
|
358
|
+
readonly paddingTop: "space-inset";
|
|
359
|
+
readonly right: "space";
|
|
360
|
+
readonly rowGap: "space-gap";
|
|
361
|
+
readonly scrollMargin: "space-offset";
|
|
362
|
+
readonly scrollMarginBlock: "space-offset";
|
|
363
|
+
readonly scrollMarginBlockEnd: "space-offset";
|
|
364
|
+
readonly scrollMarginBlockStart: "space-offset";
|
|
365
|
+
readonly scrollMarginBottom: "space-offset";
|
|
366
|
+
readonly scrollMarginInline: "space-offset";
|
|
367
|
+
readonly scrollMarginInlineEnd: "space-offset";
|
|
368
|
+
readonly scrollMarginInlineStart: "space-offset";
|
|
369
|
+
readonly scrollMarginLeft: "space-offset";
|
|
370
|
+
readonly scrollMarginRight: "space-offset";
|
|
371
|
+
readonly scrollMarginTop: "space-offset";
|
|
372
|
+
readonly scrollPadding: "space-inset";
|
|
373
|
+
readonly scrollPaddingBlock: "space-inset";
|
|
374
|
+
readonly scrollPaddingBlockEnd: "space-inset";
|
|
375
|
+
readonly scrollPaddingBlockStart: "space-inset";
|
|
376
|
+
readonly scrollPaddingBottom: "space-inset";
|
|
377
|
+
readonly scrollPaddingInline: "space-inset";
|
|
378
|
+
readonly scrollPaddingInlineEnd: "space-inset";
|
|
379
|
+
readonly scrollPaddingInlineStart: "space-inset";
|
|
380
|
+
readonly scrollPaddingLeft: "space-inset";
|
|
381
|
+
readonly scrollPaddingRight: "space-inset";
|
|
382
|
+
readonly scrollPaddingTop: "space-inset";
|
|
383
|
+
readonly stroke: "colors";
|
|
384
|
+
readonly textDecorationColor: "colors";
|
|
385
|
+
readonly textShadow: "shadows";
|
|
386
|
+
readonly top: "space";
|
|
387
|
+
readonly transition: "transitions";
|
|
388
|
+
readonly width: "sizes";
|
|
389
|
+
readonly zIndex: "z-indices";
|
|
390
|
+
}, {
|
|
391
|
+
paddingX: (value: {
|
|
392
|
+
readonly [$$PropertyValue]: "padding";
|
|
393
|
+
}) => {
|
|
394
|
+
paddingLeft: {
|
|
395
|
+
readonly [$$PropertyValue]: "padding";
|
|
396
|
+
};
|
|
397
|
+
paddingRight: {
|
|
398
|
+
readonly [$$PropertyValue]: "padding";
|
|
399
|
+
};
|
|
400
|
+
};
|
|
401
|
+
paddingY: (value: {
|
|
402
|
+
readonly [$$PropertyValue]: "padding";
|
|
403
|
+
}) => {
|
|
404
|
+
paddingTop: {
|
|
405
|
+
readonly [$$PropertyValue]: "padding";
|
|
406
|
+
};
|
|
407
|
+
paddingBottom: {
|
|
408
|
+
readonly [$$PropertyValue]: "padding";
|
|
409
|
+
};
|
|
410
|
+
};
|
|
411
|
+
marginX: (value: {
|
|
412
|
+
readonly [$$PropertyValue]: "margin";
|
|
413
|
+
}) => {
|
|
414
|
+
marginLeft: {
|
|
415
|
+
readonly [$$PropertyValue]: "margin";
|
|
416
|
+
};
|
|
417
|
+
marginRight: {
|
|
418
|
+
readonly [$$PropertyValue]: "margin";
|
|
419
|
+
};
|
|
420
|
+
};
|
|
421
|
+
marginY: (value: {
|
|
422
|
+
readonly [$$PropertyValue]: "margin";
|
|
423
|
+
}) => {
|
|
424
|
+
marginTop: {
|
|
425
|
+
readonly [$$PropertyValue]: "margin";
|
|
426
|
+
};
|
|
427
|
+
marginBottom: {
|
|
428
|
+
readonly [$$PropertyValue]: "margin";
|
|
429
|
+
};
|
|
430
|
+
};
|
|
431
|
+
square: (value: {
|
|
432
|
+
readonly [$$PropertyValue]: "width";
|
|
433
|
+
}) => {
|
|
434
|
+
width: {
|
|
435
|
+
readonly [$$PropertyValue]: "width";
|
|
436
|
+
};
|
|
437
|
+
height: {
|
|
438
|
+
readonly [$$PropertyValue]: "width";
|
|
439
|
+
};
|
|
440
|
+
};
|
|
441
|
+
}>>> & _mirohq_design_system_stitches.CustomStylesProps, "color" | "translate" | "prefix" | "asChild" | "form" | "slot" | "title" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "name" | "placeholder" | "rel" | "size" | "target" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | keyof _mirohq_design_system_stitches.CustomStylesProps | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "variant"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<Pick<_mirohq_design_system_base_button.BaseButtonProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "form" | "slot" | "title" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "name" | "placeholder" | "rel" | "target" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
|
|
442
|
+
variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
|
|
443
|
+
size?: "medium" | "large" | "x-large" | undefined;
|
|
444
|
+
}, {}>;
|
|
445
|
+
declare type StyledIconButtonProps = ComponentPropsWithRef<typeof StyledIconButton>;
|
|
446
|
+
|
|
447
|
+
interface IconButtonProps extends StyledIconButtonProps {
|
|
448
|
+
/**
|
|
449
|
+
* Change the Icon button style
|
|
450
|
+
*/
|
|
451
|
+
variant?: StyledIconButtonProps['variant'];
|
|
452
|
+
/**
|
|
453
|
+
* Change the Icon button size
|
|
454
|
+
*/
|
|
455
|
+
size?: StyledIconButtonProps['size'];
|
|
6
456
|
/**
|
|
7
457
|
* Icon button label used to provide a description.
|
|
8
458
|
*/
|
|
@@ -35,6 +485,6 @@ interface IconButtonProps extends BaseButtonProps {
|
|
|
35
485
|
*/
|
|
36
486
|
badgeContent?: string;
|
|
37
487
|
}
|
|
38
|
-
declare const IconButton:
|
|
488
|
+
declare const IconButton: react__default.ForwardRefExoticComponent<Pick<IconButtonProps, "color" | "translate" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "form" | "label" | "slot" | "title" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "name" | "placeholder" | "rel" | "size" | "target" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "key" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onFocusChange" | "excludeFromTabOrder" | "onHoverStart" | "onHoverEnd" | "onHoverChange" | "variant" | "showBadge" | "badgeContent" | "tooltipDelayDuration" | "tooltipSkipDelayDuration" | "tooltipAlign" | "tooltipSide"> & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
39
489
|
|
|
40
490
|
export { IconButton, IconButtonProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-icon-button",
|
|
3
|
-
"version": "1.2.3-
|
|
3
|
+
"version": "1.2.3-checkbox.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,14 +26,14 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-badge": "^0.3.1-
|
|
30
|
-
"@mirohq/design-system-base-button": "^0.
|
|
31
|
-
"@mirohq/design-system-
|
|
29
|
+
"@mirohq/design-system-badge": "^0.3.1-checkbox.1",
|
|
30
|
+
"@mirohq/design-system-base-button": "^0.4.2-checkbox.1",
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.2.0-checkbox.0",
|
|
32
|
+
"@mirohq/design-system-tooltip": "^3.2.2-checkbox.1"
|
|
32
33
|
},
|
|
33
34
|
"devDependencies": {
|
|
34
|
-
"@mirohq/design-system-flex": "^2.1.3-
|
|
35
|
-
"@mirohq/design-system-icons": "^0.
|
|
36
|
-
"@mirohq/design-system-stitches": "^2.1.2-changelog-1.0"
|
|
35
|
+
"@mirohq/design-system-flex": "^2.1.3-checkbox.1",
|
|
36
|
+
"@mirohq/design-system-icons": "^0.12.1-checkbox.1"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "rollup -c ../../../rollup.config.js",
|