@mirohq/design-system-switch 2.1.7 → 3.0.0-switch.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 +83 -42
- package/dist/main.js.map +1 -1
- package/dist/module.js +83 -42
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +28 -13
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
+
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
6
7
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
7
8
|
var RadixSwitch = require('@radix-ui/react-switch');
|
|
8
9
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
10
|
+
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
9
11
|
|
|
10
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
13
|
|
|
@@ -30,64 +32,90 @@ function _interopNamespace(e) {
|
|
|
30
32
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
33
|
var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
|
|
32
34
|
|
|
33
|
-
const TRANSITION_TIME = "
|
|
35
|
+
const TRANSITION_TIME = "100ms";
|
|
36
|
+
const nonDisabledSelector = '&:not([disabled]):not([aria-disabled="true"])';
|
|
37
|
+
const StyledThumb = designSystemStitches.styled(RadixSwitch__namespace.Thumb, {
|
|
38
|
+
display: "block",
|
|
39
|
+
backgroundColor: "$background-neutrals",
|
|
40
|
+
borderRadius: "$half",
|
|
41
|
+
width: "100%",
|
|
42
|
+
height: "100%"
|
|
43
|
+
});
|
|
44
|
+
const StyledThumbWrapper = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
|
|
45
|
+
display: "block",
|
|
46
|
+
width: "50%",
|
|
47
|
+
height: "100%",
|
|
48
|
+
transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,
|
|
49
|
+
willChange: "transform",
|
|
50
|
+
boxSizing: "border-box",
|
|
51
|
+
padding: 1
|
|
52
|
+
});
|
|
34
53
|
const StyledSwitch = designSystemStitches.styled(RadixSwitch__namespace.Root, {
|
|
35
54
|
all: "unset",
|
|
36
55
|
cursor: "pointer",
|
|
37
56
|
boxSizing: "border-box",
|
|
38
|
-
backgroundColor: "
|
|
57
|
+
backgroundColor: "$background-neutrals-inactive",
|
|
39
58
|
borderRadius: "$half",
|
|
40
|
-
position: "relative",
|
|
41
59
|
display: "inline-flex",
|
|
42
|
-
verticalAlign: "middle",
|
|
43
60
|
padding: 2,
|
|
44
|
-
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
|
|
45
61
|
transition: `background ${TRANSITION_TIME}`,
|
|
46
|
-
...designSystemStyles.focus.
|
|
62
|
+
...designSystemStyles.focus.css({
|
|
63
|
+
boxShadow: "$focus-controls"
|
|
64
|
+
}),
|
|
47
65
|
"&:hover": {
|
|
48
|
-
|
|
66
|
+
backgroundColor: "$background-neutrals-inactive-hover",
|
|
67
|
+
[`${nonDisabledSelector} ${StyledThumbWrapper}`]: {
|
|
68
|
+
padding: 0
|
|
69
|
+
}
|
|
49
70
|
},
|
|
50
71
|
'&[data-state="checked"]': {
|
|
51
|
-
background: "
|
|
52
|
-
|
|
53
|
-
background: "
|
|
72
|
+
background: "$background-primary-prominent-selected",
|
|
73
|
+
[`${nonDisabledSelector}:hover`]: {
|
|
74
|
+
background: "$background-primary-prominent-hover"
|
|
75
|
+
},
|
|
76
|
+
[`& ${StyledThumbWrapper}`]: {
|
|
77
|
+
transform: "translateX(100%)"
|
|
54
78
|
}
|
|
55
79
|
},
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
80
|
+
'&[disabled], &[aria-disabled="true"]': {
|
|
81
|
+
cursor: "default",
|
|
82
|
+
background: "$background-neutrals-controls-disabled",
|
|
83
|
+
[`& ${StyledThumb}`]: {
|
|
84
|
+
background: "$background-neutrals-disabled"
|
|
60
85
|
}
|
|
61
86
|
},
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
87
|
+
"@media (forced-colors: active)": {
|
|
88
|
+
border: "1px solid ButtonText",
|
|
89
|
+
padding: 1,
|
|
90
|
+
backgroundColor: "ButtonFace",
|
|
91
|
+
[`& ${StyledThumb}`]: {
|
|
92
|
+
borderColor: "ButtonFace",
|
|
93
|
+
border: "1px solid ButtonText",
|
|
94
|
+
margin: -1
|
|
95
|
+
},
|
|
96
|
+
"&:hover": {
|
|
97
|
+
backgroundColor: "ButtonFace"
|
|
98
|
+
},
|
|
99
|
+
[`${nonDisabledSelector}[data-state="checked"]`]: {
|
|
100
|
+
backgroundColor: "Highlight",
|
|
101
|
+
borderColor: "Highlight",
|
|
102
|
+
"&:hover": {
|
|
103
|
+
backgroundColor: "Highlight"
|
|
67
104
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
height: 20
|
|
105
|
+
[`& ${StyledThumb}`]: {
|
|
106
|
+
borderColor: "Highlight"
|
|
71
107
|
}
|
|
72
108
|
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
const StyledThumb = designSystemStitches.styled(RadixSwitch__namespace.Thumb, {
|
|
76
|
-
display: "block",
|
|
77
|
-
backgroundColor: "white",
|
|
78
|
-
borderRadius: "$half",
|
|
79
|
-
transition: `transform ${TRANSITION_TIME}`,
|
|
80
|
-
willChange: "transform",
|
|
81
|
-
'&[data-state="checked"]': { transform: "translateX(100%)" },
|
|
109
|
+
},
|
|
82
110
|
variants: {
|
|
83
111
|
size: {
|
|
84
112
|
medium: {
|
|
85
|
-
width:
|
|
86
|
-
height:
|
|
113
|
+
width: "$7",
|
|
114
|
+
height: "$4"
|
|
87
115
|
},
|
|
88
116
|
large: {
|
|
89
|
-
width:
|
|
90
|
-
height:
|
|
117
|
+
width: "$9",
|
|
118
|
+
height: "$5"
|
|
91
119
|
}
|
|
92
120
|
}
|
|
93
121
|
}
|
|
@@ -96,22 +124,35 @@ const StyledThumb = designSystemStitches.styled(RadixSwitch__namespace.Thumb, {
|
|
|
96
124
|
const Switch = React__default["default"].forwardRef(
|
|
97
125
|
({
|
|
98
126
|
size = "medium",
|
|
99
|
-
checked = false,
|
|
100
127
|
disabled = false,
|
|
101
128
|
required = false,
|
|
102
|
-
|
|
129
|
+
"aria-disabled": ariaDisabled,
|
|
130
|
+
onChecked,
|
|
131
|
+
onUnchecked,
|
|
132
|
+
onClick,
|
|
103
133
|
...restProps
|
|
104
134
|
}, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, {
|
|
105
135
|
...restProps,
|
|
106
136
|
ref: forwardRef,
|
|
107
137
|
size,
|
|
108
|
-
checked,
|
|
109
138
|
disabled,
|
|
110
139
|
required,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
140
|
+
"aria-disabled": ariaDisabled,
|
|
141
|
+
onClick: (e) => {
|
|
142
|
+
if (designSystemUtils.booleanify(ariaDisabled)) {
|
|
143
|
+
e.preventDefault();
|
|
144
|
+
} else {
|
|
145
|
+
onClick == null ? void 0 : onClick(e);
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
onCheckedChange: (value) => {
|
|
149
|
+
if (value) {
|
|
150
|
+
onChecked == null ? void 0 : onChecked();
|
|
151
|
+
} else {
|
|
152
|
+
onUnchecked == null ? void 0 : onUnchecked();
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}, /* @__PURE__ */ React__default["default"].createElement(StyledThumbWrapper, null, /* @__PURE__ */ React__default["default"].createElement(StyledThumb, null)))
|
|
115
156
|
);
|
|
116
157
|
|
|
117
158
|
exports.Switch = Switch;
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/switch.styled.ts","../src/switch.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixSwitch from '@radix-ui/react-switch'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst TRANSITION_TIME = '
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/switch.styled.ts","../src/switch.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixSwitch from '@radix-ui/react-switch'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nconst TRANSITION_TIME = '100ms'\nconst nonDisabledSelector = '&:not([disabled]):not([aria-disabled=\"true\"])'\n\nexport const StyledThumb = styled(RadixSwitch.Thumb, {\n display: 'block',\n backgroundColor: '$background-neutrals',\n borderRadius: '$half',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport const StyledSwitch = styled(RadixSwitch.Root, {\n all: 'unset',\n cursor: 'pointer',\n boxSizing: 'border-box',\n backgroundColor: '$background-neutrals-inactive',\n borderRadius: '$half',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n ...focus.css({\n boxShadow: '$focus-controls',\n }),\n '&:hover': {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`${nonDisabledSelector} ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n },\n '&[data-state=\"checked\"]': {\n background: '$background-primary-prominent-selected',\n\n [`${nonDisabledSelector}:hover`]: {\n background: '$background-primary-prominent-hover',\n },\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n },\n '&[disabled], &[aria-disabled=\"true\"]': {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n },\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n\n '&:hover': {\n backgroundColor: 'ButtonFace',\n },\n\n [`${nonDisabledSelector}[data-state=\"checked\"]`]: {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n '&:hover': {\n backgroundColor: 'Highlight',\n },\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n variants: {\n size: {\n medium: {\n width: '$7',\n height: '$4',\n },\n large: {\n width: '$9',\n height: '$5',\n },\n },\n },\n})\n\nexport type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport type { StyledSwitchProps } from './switch.styled'\nimport { StyledThumb, StyledSwitch, StyledThumbWrapper } from './switch.styled'\n\nexport interface SwitchProps extends StyledSwitchProps {\n /**\n * Change the size of the switch.\n */\n size?: StyledSwitchProps['size']\n\n /**\n * The state of the switch.\n */\n checked?: boolean\n\n /**\n * The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n */\n defaultChecked?: boolean\n\n /**\n * Event handler called when the checked state equals true.\n */\n onChecked?: () => void\n\n /**\n * Event handler called when the checked state equals false.\n */\n onUnchecked?: () => void\n\n /**\n * Prevents the user from interacting with the switch.\n */\n disabled?: boolean\n\n /**\n * Indicates that the user must check the switch.\n */\n required?: boolean\n\n /**\n * The name of the switch used in the form.\n */\n name?: string\n\n /**\n * The data when accessing the switch by its name in the form.\n */\n value?: string\n\n /**\n * When true, prevents the user from interacting with the switch but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Switch = React.forwardRef<\n ElementRef<typeof StyledSwitch>,\n SwitchProps\n>(\n (\n {\n size = 'medium',\n disabled = false,\n required = false,\n 'aria-disabled': ariaDisabled,\n onChecked,\n onUnchecked,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledSwitch\n {...restProps}\n ref={forwardRef}\n size={size}\n disabled={disabled}\n required={required}\n aria-disabled={ariaDisabled}\n onClick={e => {\n if (booleanify(ariaDisabled)) {\n e.preventDefault()\n } else {\n onClick?.(e)\n }\n }}\n onCheckedChange={value => {\n if (value) {\n onChecked?.()\n } else {\n onUnchecked?.()\n }\n }}\n >\n <StyledThumbWrapper>\n <StyledThumb />\n </StyledThumbWrapper>\n </StyledSwitch>\n )\n)\n"],"names":["styled","RadixSwitch","Primitive","focus","React","booleanify"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -1,66 +1,94 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { booleanify } from '@mirohq/design-system-utils';
|
|
2
3
|
import { styled } from '@mirohq/design-system-stitches';
|
|
3
4
|
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
4
5
|
import { focus } from '@mirohq/design-system-styles';
|
|
6
|
+
import { Primitive } from '@mirohq/design-system-primitive';
|
|
5
7
|
|
|
6
|
-
const TRANSITION_TIME = "
|
|
8
|
+
const TRANSITION_TIME = "100ms";
|
|
9
|
+
const nonDisabledSelector = '&:not([disabled]):not([aria-disabled="true"])';
|
|
10
|
+
const StyledThumb = styled(RadixSwitch.Thumb, {
|
|
11
|
+
display: "block",
|
|
12
|
+
backgroundColor: "$background-neutrals",
|
|
13
|
+
borderRadius: "$half",
|
|
14
|
+
width: "100%",
|
|
15
|
+
height: "100%"
|
|
16
|
+
});
|
|
17
|
+
const StyledThumbWrapper = styled(Primitive.span, {
|
|
18
|
+
display: "block",
|
|
19
|
+
width: "50%",
|
|
20
|
+
height: "100%",
|
|
21
|
+
transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,
|
|
22
|
+
willChange: "transform",
|
|
23
|
+
boxSizing: "border-box",
|
|
24
|
+
padding: 1
|
|
25
|
+
});
|
|
7
26
|
const StyledSwitch = styled(RadixSwitch.Root, {
|
|
8
27
|
all: "unset",
|
|
9
28
|
cursor: "pointer",
|
|
10
29
|
boxSizing: "border-box",
|
|
11
|
-
backgroundColor: "
|
|
30
|
+
backgroundColor: "$background-neutrals-inactive",
|
|
12
31
|
borderRadius: "$half",
|
|
13
|
-
position: "relative",
|
|
14
32
|
display: "inline-flex",
|
|
15
|
-
verticalAlign: "middle",
|
|
16
33
|
padding: 2,
|
|
17
|
-
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
|
|
18
34
|
transition: `background ${TRANSITION_TIME}`,
|
|
19
|
-
...focus.
|
|
35
|
+
...focus.css({
|
|
36
|
+
boxShadow: "$focus-controls"
|
|
37
|
+
}),
|
|
20
38
|
"&:hover": {
|
|
21
|
-
|
|
39
|
+
backgroundColor: "$background-neutrals-inactive-hover",
|
|
40
|
+
[`${nonDisabledSelector} ${StyledThumbWrapper}`]: {
|
|
41
|
+
padding: 0
|
|
42
|
+
}
|
|
22
43
|
},
|
|
23
44
|
'&[data-state="checked"]': {
|
|
24
|
-
background: "
|
|
25
|
-
|
|
26
|
-
background: "
|
|
45
|
+
background: "$background-primary-prominent-selected",
|
|
46
|
+
[`${nonDisabledSelector}:hover`]: {
|
|
47
|
+
background: "$background-primary-prominent-hover"
|
|
48
|
+
},
|
|
49
|
+
[`& ${StyledThumbWrapper}`]: {
|
|
50
|
+
transform: "translateX(100%)"
|
|
27
51
|
}
|
|
28
52
|
},
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
53
|
+
'&[disabled], &[aria-disabled="true"]': {
|
|
54
|
+
cursor: "default",
|
|
55
|
+
background: "$background-neutrals-controls-disabled",
|
|
56
|
+
[`& ${StyledThumb}`]: {
|
|
57
|
+
background: "$background-neutrals-disabled"
|
|
33
58
|
}
|
|
34
59
|
},
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
60
|
+
"@media (forced-colors: active)": {
|
|
61
|
+
border: "1px solid ButtonText",
|
|
62
|
+
padding: 1,
|
|
63
|
+
backgroundColor: "ButtonFace",
|
|
64
|
+
[`& ${StyledThumb}`]: {
|
|
65
|
+
borderColor: "ButtonFace",
|
|
66
|
+
border: "1px solid ButtonText",
|
|
67
|
+
margin: -1
|
|
68
|
+
},
|
|
69
|
+
"&:hover": {
|
|
70
|
+
backgroundColor: "ButtonFace"
|
|
71
|
+
},
|
|
72
|
+
[`${nonDisabledSelector}[data-state="checked"]`]: {
|
|
73
|
+
backgroundColor: "Highlight",
|
|
74
|
+
borderColor: "Highlight",
|
|
75
|
+
"&:hover": {
|
|
76
|
+
backgroundColor: "Highlight"
|
|
40
77
|
},
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
height: 20
|
|
78
|
+
[`& ${StyledThumb}`]: {
|
|
79
|
+
borderColor: "Highlight"
|
|
44
80
|
}
|
|
45
81
|
}
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
const StyledThumb = styled(RadixSwitch.Thumb, {
|
|
49
|
-
display: "block",
|
|
50
|
-
backgroundColor: "white",
|
|
51
|
-
borderRadius: "$half",
|
|
52
|
-
transition: `transform ${TRANSITION_TIME}`,
|
|
53
|
-
willChange: "transform",
|
|
54
|
-
'&[data-state="checked"]': { transform: "translateX(100%)" },
|
|
82
|
+
},
|
|
55
83
|
variants: {
|
|
56
84
|
size: {
|
|
57
85
|
medium: {
|
|
58
|
-
width:
|
|
59
|
-
height:
|
|
86
|
+
width: "$7",
|
|
87
|
+
height: "$4"
|
|
60
88
|
},
|
|
61
89
|
large: {
|
|
62
|
-
width:
|
|
63
|
-
height:
|
|
90
|
+
width: "$9",
|
|
91
|
+
height: "$5"
|
|
64
92
|
}
|
|
65
93
|
}
|
|
66
94
|
}
|
|
@@ -69,22 +97,35 @@ const StyledThumb = styled(RadixSwitch.Thumb, {
|
|
|
69
97
|
const Switch = React.forwardRef(
|
|
70
98
|
({
|
|
71
99
|
size = "medium",
|
|
72
|
-
checked = false,
|
|
73
100
|
disabled = false,
|
|
74
101
|
required = false,
|
|
75
|
-
|
|
102
|
+
"aria-disabled": ariaDisabled,
|
|
103
|
+
onChecked,
|
|
104
|
+
onUnchecked,
|
|
105
|
+
onClick,
|
|
76
106
|
...restProps
|
|
77
107
|
}, forwardRef) => /* @__PURE__ */ React.createElement(StyledSwitch, {
|
|
78
108
|
...restProps,
|
|
79
109
|
ref: forwardRef,
|
|
80
110
|
size,
|
|
81
|
-
checked,
|
|
82
111
|
disabled,
|
|
83
112
|
required,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
113
|
+
"aria-disabled": ariaDisabled,
|
|
114
|
+
onClick: (e) => {
|
|
115
|
+
if (booleanify(ariaDisabled)) {
|
|
116
|
+
e.preventDefault();
|
|
117
|
+
} else {
|
|
118
|
+
onClick == null ? void 0 : onClick(e);
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
onCheckedChange: (value) => {
|
|
122
|
+
if (value) {
|
|
123
|
+
onChecked == null ? void 0 : onChecked();
|
|
124
|
+
} else {
|
|
125
|
+
onUnchecked == null ? void 0 : onUnchecked();
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}, /* @__PURE__ */ React.createElement(StyledThumbWrapper, null, /* @__PURE__ */ React.createElement(StyledThumb, null)))
|
|
88
129
|
);
|
|
89
130
|
|
|
90
131
|
export { Switch };
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/switch.styled.ts","../src/switch.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixSwitch from '@radix-ui/react-switch'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst TRANSITION_TIME = '
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/switch.styled.ts","../src/switch.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixSwitch from '@radix-ui/react-switch'\nimport { focus } from '@mirohq/design-system-styles'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nconst TRANSITION_TIME = '100ms'\nconst nonDisabledSelector = '&:not([disabled]):not([aria-disabled=\"true\"])'\n\nexport const StyledThumb = styled(RadixSwitch.Thumb, {\n display: 'block',\n backgroundColor: '$background-neutrals',\n borderRadius: '$half',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport const StyledSwitch = styled(RadixSwitch.Root, {\n all: 'unset',\n cursor: 'pointer',\n boxSizing: 'border-box',\n backgroundColor: '$background-neutrals-inactive',\n borderRadius: '$half',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n ...focus.css({\n boxShadow: '$focus-controls',\n }),\n '&:hover': {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`${nonDisabledSelector} ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n },\n '&[data-state=\"checked\"]': {\n background: '$background-primary-prominent-selected',\n\n [`${nonDisabledSelector}:hover`]: {\n background: '$background-primary-prominent-hover',\n },\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n },\n '&[disabled], &[aria-disabled=\"true\"]': {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n },\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n\n '&:hover': {\n backgroundColor: 'ButtonFace',\n },\n\n [`${nonDisabledSelector}[data-state=\"checked\"]`]: {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n '&:hover': {\n backgroundColor: 'Highlight',\n },\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n variants: {\n size: {\n medium: {\n width: '$7',\n height: '$4',\n },\n large: {\n width: '$9',\n height: '$5',\n },\n },\n },\n})\n\nexport type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\nimport { booleanify } from '@mirohq/design-system-utils'\n\nimport type { StyledSwitchProps } from './switch.styled'\nimport { StyledThumb, StyledSwitch, StyledThumbWrapper } from './switch.styled'\n\nexport interface SwitchProps extends StyledSwitchProps {\n /**\n * Change the size of the switch.\n */\n size?: StyledSwitchProps['size']\n\n /**\n * The state of the switch.\n */\n checked?: boolean\n\n /**\n * The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n */\n defaultChecked?: boolean\n\n /**\n * Event handler called when the checked state equals true.\n */\n onChecked?: () => void\n\n /**\n * Event handler called when the checked state equals false.\n */\n onUnchecked?: () => void\n\n /**\n * Prevents the user from interacting with the switch.\n */\n disabled?: boolean\n\n /**\n * Indicates that the user must check the switch.\n */\n required?: boolean\n\n /**\n * The name of the switch used in the form.\n */\n name?: string\n\n /**\n * The data when accessing the switch by its name in the form.\n */\n value?: string\n\n /**\n * When true, prevents the user from interacting with the switch but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Switch = React.forwardRef<\n ElementRef<typeof StyledSwitch>,\n SwitchProps\n>(\n (\n {\n size = 'medium',\n disabled = false,\n required = false,\n 'aria-disabled': ariaDisabled,\n onChecked,\n onUnchecked,\n onClick,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledSwitch\n {...restProps}\n ref={forwardRef}\n size={size}\n disabled={disabled}\n required={required}\n aria-disabled={ariaDisabled}\n onClick={e => {\n if (booleanify(ariaDisabled)) {\n e.preventDefault()\n } else {\n onClick?.(e)\n }\n }}\n onCheckedChange={value => {\n if (value) {\n onChecked?.()\n } else {\n onUnchecked?.()\n }\n }}\n >\n <StyledThumbWrapper>\n <StyledThumb />\n </StyledThumbWrapper>\n </StyledSwitch>\n )\n)\n"],"names":[],"mappings":";;;;;;;AAMA,MAAM,eAAkB,GAAA,OAAA,CAAA;AACxB,MAAM,mBAAsB,GAAA,+CAAA,CAAA;AAEf,MAAA,WAAA,GAAc,MAAO,CAAA,WAAA,CAAY,KAAO,EAAA;AAAA,EACnD,OAAS,EAAA,OAAA;AAAA,EACT,eAAiB,EAAA,sBAAA;AAAA,EACjB,YAAc,EAAA,OAAA;AAAA,EACd,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AACV,CAAC,CAAA,CAAA;AAEY,MAAA,kBAAA,GAAqB,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EACvD,OAAS,EAAA,OAAA;AAAA,EACT,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,UAAA,EAAY,aAAa,eAA4B,CAAA,UAAA,EAAA,eAAA,CAAA,CAAA;AAAA,EACrD,UAAY,EAAA,WAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,OAAS,EAAA,CAAA;AACX,CAAC,CAAA,CAAA;AAEY,MAAA,YAAA,GAAe,MAAO,CAAA,WAAA,CAAY,IAAM,EAAA;AAAA,EACnD,GAAK,EAAA,OAAA;AAAA,EACL,MAAQ,EAAA,SAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,eAAiB,EAAA,+BAAA;AAAA,EACjB,YAAc,EAAA,OAAA;AAAA,EACd,OAAS,EAAA,aAAA;AAAA,EACT,OAAS,EAAA,CAAA;AAAA,EACT,YAAY,CAAc,WAAA,EAAA,eAAA,CAAA,CAAA;AAAA,EAE1B,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,iBAAA;AAAA,GACZ,CAAA;AAAA,EACD,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,qCAAA;AAAA,IAEjB,CAAC,CAAG,EAAA,mBAAA,CAAA,CAAA,EAAuB,kBAAuB,CAAA,CAAA,GAAA;AAAA,MAChD,OAAS,EAAA,CAAA;AAAA,KACX;AAAA,GACF;AAAA,EACA,yBAA2B,EAAA;AAAA,IACzB,UAAY,EAAA,wCAAA;AAAA,IAEZ,CAAC,GAAG,mBAA8B,CAAA,MAAA,CAAA,GAAA;AAAA,MAChC,UAAY,EAAA,qCAAA;AAAA,KACd;AAAA,IAEA,CAAC,KAAK,kBAAuB,CAAA,CAAA,GAAA;AAAA,MAC3B,SAAW,EAAA,kBAAA;AAAA,KACb;AAAA,GACF;AAAA,EACA,sCAAwC,EAAA;AAAA,IACtC,MAAQ,EAAA,SAAA;AAAA,IACR,UAAY,EAAA,wCAAA;AAAA,IAEZ,CAAC,KAAK,WAAgB,CAAA,CAAA,GAAA;AAAA,MACpB,UAAY,EAAA,+BAAA;AAAA,KACd;AAAA,GACF;AAAA,EAEA,gCAAkC,EAAA;AAAA,IAChC,MAAQ,EAAA,sBAAA;AAAA,IACR,OAAS,EAAA,CAAA;AAAA,IACT,eAAiB,EAAA,YAAA;AAAA,IAEjB,CAAC,KAAK,WAAgB,CAAA,CAAA,GAAA;AAAA,MACpB,WAAa,EAAA,YAAA;AAAA,MACb,MAAQ,EAAA,sBAAA;AAAA,MACR,MAAQ,EAAA,CAAA,CAAA;AAAA,KACV;AAAA,IAEA,SAAW,EAAA;AAAA,MACT,eAAiB,EAAA,YAAA;AAAA,KACnB;AAAA,IAEA,CAAC,GAAG,mBAA8C,CAAA,sBAAA,CAAA,GAAA;AAAA,MAChD,eAAiB,EAAA,WAAA;AAAA,MACjB,WAAa,EAAA,WAAA;AAAA,MAEb,SAAW,EAAA;AAAA,QACT,eAAiB,EAAA,WAAA;AAAA,OACnB;AAAA,MAEA,CAAC,KAAK,WAAgB,CAAA,CAAA,GAAA;AAAA,QACpB,WAAa,EAAA,WAAA;AAAA,OACf;AAAA,KACF;AAAA,GACF;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,IAAA;AAAA,QACP,MAAQ,EAAA,IAAA;AAAA,OACV;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC7CM,MAAM,SAAS,KAAM,CAAA,UAAA;AAAA,EAI1B,CACE;AAAA,IACE,IAAO,GAAA,QAAA;AAAA,IACP,QAAW,GAAA,KAAA;AAAA,IACX,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACL,EACA,+BAEC,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,GAAK,EAAA,UAAA;AAAA,IACL,IAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAe,EAAA,YAAA;AAAA,IACf,SAAS,CAAK,CAAA,KAAA;AACZ,MAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,OACZ,MAAA;AACL,QAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA,iBAAiB,CAAS,KAAA,KAAA;AACxB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,OACK,MAAA;AACL,QAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,EAAA,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAY,CACf,CACF,CAAA;AAEJ;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default from 'react';
|
|
3
|
+
import { Booleanish } from '@mirohq/design-system-types';
|
|
3
4
|
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
4
5
|
import { StrictComponentProps } from '@mirohq/design-system-stitches';
|
|
5
6
|
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
|
|
@@ -441,41 +442,55 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
441
442
|
}> | undefined;
|
|
442
443
|
}> & {
|
|
443
444
|
children?: react.ReactNode;
|
|
444
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "
|
|
445
|
+
} & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "prefix" | "asChild" | "autoFocus" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "required" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "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" | "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 | "onCheckedChange"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixSwitch.SwitchProps & react.RefAttributes<HTMLButtonElement>>, {
|
|
445
446
|
size?: "medium" | "large" | undefined;
|
|
446
447
|
}, {}>;
|
|
447
448
|
declare type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>;
|
|
448
449
|
|
|
449
|
-
interface SwitchProps extends
|
|
450
|
+
interface SwitchProps extends StyledSwitchProps {
|
|
450
451
|
/**
|
|
451
|
-
* Change the size of the switch
|
|
452
|
+
* Change the size of the switch.
|
|
452
453
|
*/
|
|
453
454
|
size?: StyledSwitchProps['size'];
|
|
454
455
|
/**
|
|
455
|
-
* The state of the switch
|
|
456
|
+
* The state of the switch.
|
|
456
457
|
*/
|
|
457
|
-
checked
|
|
458
|
+
checked?: boolean;
|
|
458
459
|
/**
|
|
459
|
-
*
|
|
460
|
+
* The checked state of the checkbox when it is initially rendered. Use when
|
|
461
|
+
* you do not need to control its checked state.
|
|
460
462
|
*/
|
|
461
|
-
|
|
463
|
+
defaultChecked?: boolean;
|
|
462
464
|
/**
|
|
463
|
-
*
|
|
465
|
+
* Event handler called when the checked state equals true.
|
|
466
|
+
*/
|
|
467
|
+
onChecked?: () => void;
|
|
468
|
+
/**
|
|
469
|
+
* Event handler called when the checked state equals false.
|
|
470
|
+
*/
|
|
471
|
+
onUnchecked?: () => void;
|
|
472
|
+
/**
|
|
473
|
+
* Prevents the user from interacting with the switch.
|
|
464
474
|
*/
|
|
465
475
|
disabled?: boolean;
|
|
466
476
|
/**
|
|
467
|
-
* Indicates that the user must check the switch
|
|
477
|
+
* Indicates that the user must check the switch.
|
|
468
478
|
*/
|
|
469
479
|
required?: boolean;
|
|
470
480
|
/**
|
|
471
|
-
* The name of the switch used in the form
|
|
481
|
+
* The name of the switch used in the form.
|
|
472
482
|
*/
|
|
473
483
|
name?: string;
|
|
474
484
|
/**
|
|
475
|
-
* The data when accessing the switch by its name in the form
|
|
485
|
+
* The data when accessing the switch by its name in the form.
|
|
486
|
+
*/
|
|
487
|
+
value?: string;
|
|
488
|
+
/**
|
|
489
|
+
* When true, prevents the user from interacting with the switch but focus
|
|
490
|
+
* is still possible.
|
|
476
491
|
*/
|
|
477
|
-
|
|
492
|
+
'aria-disabled'?: Booleanish;
|
|
478
493
|
}
|
|
479
|
-
declare const Switch: react__default.ForwardRefExoticComponent<Pick<SwitchProps, "
|
|
494
|
+
declare const Switch: react__default.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "css" | "prefix" | "asChild" | "UNSAFE_style" | "autoFocus" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "placeholder" | "required" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "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" | "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" | "onChecked" | "onUnchecked"> & react__default.RefAttributes<HTMLButtonElement>>;
|
|
480
495
|
|
|
481
496
|
export { Switch, SwitchProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-switch",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-switch.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@radix-ui/react-switch": "^1.0.0",
|
|
31
31
|
"@mirohq/design-system-stitches": "^2.2.4",
|
|
32
|
-
"@mirohq/design-system-styles": "^1.0.20",
|
|
33
32
|
"@mirohq/design-system-types": "^0.4.1",
|
|
34
|
-
"@mirohq/design-system-utils": "^0.13.1"
|
|
33
|
+
"@mirohq/design-system-utils": "^0.13.1",
|
|
34
|
+
"@mirohq/design-system-styles": "^1.0.20"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "rollup -c ../../../rollup.config.js",
|