@mirohq/design-system-switch 2.1.5 → 3.0.0-switch.0
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 +62 -44
- package/dist/main.js.map +1 -1
- package/dist/module.js +62 -44
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +28 -13
- package/package.json +5 -5
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
|
|
|
@@ -31,63 +33,66 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
31
33
|
var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
|
|
32
34
|
|
|
33
35
|
const TRANSITION_TIME = "250ms";
|
|
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 100ms`,
|
|
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
87
|
variants: {
|
|
63
88
|
size: {
|
|
64
89
|
medium: {
|
|
65
|
-
width:
|
|
66
|
-
height:
|
|
90
|
+
width: "$7",
|
|
91
|
+
height: "$4"
|
|
67
92
|
},
|
|
68
93
|
large: {
|
|
69
|
-
width:
|
|
70
|
-
height:
|
|
71
|
-
}
|
|
72
|
-
}
|
|
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%)" },
|
|
82
|
-
variants: {
|
|
83
|
-
size: {
|
|
84
|
-
medium: {
|
|
85
|
-
width: 12,
|
|
86
|
-
height: 12
|
|
87
|
-
},
|
|
88
|
-
large: {
|
|
89
|
-
width: 16,
|
|
90
|
-
height: 16
|
|
94
|
+
width: "$9",
|
|
95
|
+
height: "$5"
|
|
91
96
|
}
|
|
92
97
|
}
|
|
93
98
|
}
|
|
@@ -96,22 +101,35 @@ const StyledThumb = designSystemStitches.styled(RadixSwitch__namespace.Thumb, {
|
|
|
96
101
|
const Switch = React__default["default"].forwardRef(
|
|
97
102
|
({
|
|
98
103
|
size = "medium",
|
|
99
|
-
checked = false,
|
|
100
104
|
disabled = false,
|
|
101
105
|
required = false,
|
|
102
|
-
|
|
106
|
+
"aria-disabled": ariaDisabled,
|
|
107
|
+
onChecked,
|
|
108
|
+
onUnchecked,
|
|
109
|
+
onClick,
|
|
103
110
|
...restProps
|
|
104
111
|
}, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, {
|
|
105
112
|
...restProps,
|
|
106
113
|
ref: forwardRef,
|
|
107
114
|
size,
|
|
108
|
-
checked,
|
|
109
115
|
disabled,
|
|
110
116
|
required,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
117
|
+
"aria-disabled": ariaDisabled,
|
|
118
|
+
onClick: (e) => {
|
|
119
|
+
if (designSystemUtils.booleanify(ariaDisabled)) {
|
|
120
|
+
e.preventDefault();
|
|
121
|
+
} else {
|
|
122
|
+
onClick == null ? void 0 : onClick(e);
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
onCheckedChange: (value) => {
|
|
126
|
+
if (value) {
|
|
127
|
+
onChecked == null ? void 0 : onChecked();
|
|
128
|
+
} else {
|
|
129
|
+
onUnchecked == null ? void 0 : onUnchecked();
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}, /* @__PURE__ */ React__default["default"].createElement(StyledThumbWrapper, null, /* @__PURE__ */ React__default["default"].createElement(StyledThumb, null)))
|
|
115
133
|
);
|
|
116
134
|
|
|
117
135
|
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 = '250ms'\n\nexport const
|
|
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 = '250ms'\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 100ms`,\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 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,71 @@
|
|
|
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
8
|
const TRANSITION_TIME = "250ms";
|
|
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 100ms`,
|
|
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
60
|
variants: {
|
|
36
61
|
size: {
|
|
37
62
|
medium: {
|
|
38
|
-
width:
|
|
39
|
-
height:
|
|
63
|
+
width: "$7",
|
|
64
|
+
height: "$4"
|
|
40
65
|
},
|
|
41
66
|
large: {
|
|
42
|
-
width:
|
|
43
|
-
height:
|
|
44
|
-
}
|
|
45
|
-
}
|
|
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%)" },
|
|
55
|
-
variants: {
|
|
56
|
-
size: {
|
|
57
|
-
medium: {
|
|
58
|
-
width: 12,
|
|
59
|
-
height: 12
|
|
60
|
-
},
|
|
61
|
-
large: {
|
|
62
|
-
width: 16,
|
|
63
|
-
height: 16
|
|
67
|
+
width: "$9",
|
|
68
|
+
height: "$5"
|
|
64
69
|
}
|
|
65
70
|
}
|
|
66
71
|
}
|
|
@@ -69,22 +74,35 @@ const StyledThumb = styled(RadixSwitch.Thumb, {
|
|
|
69
74
|
const Switch = React.forwardRef(
|
|
70
75
|
({
|
|
71
76
|
size = "medium",
|
|
72
|
-
checked = false,
|
|
73
77
|
disabled = false,
|
|
74
78
|
required = false,
|
|
75
|
-
|
|
79
|
+
"aria-disabled": ariaDisabled,
|
|
80
|
+
onChecked,
|
|
81
|
+
onUnchecked,
|
|
82
|
+
onClick,
|
|
76
83
|
...restProps
|
|
77
84
|
}, forwardRef) => /* @__PURE__ */ React.createElement(StyledSwitch, {
|
|
78
85
|
...restProps,
|
|
79
86
|
ref: forwardRef,
|
|
80
87
|
size,
|
|
81
|
-
checked,
|
|
82
88
|
disabled,
|
|
83
89
|
required,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
90
|
+
"aria-disabled": ariaDisabled,
|
|
91
|
+
onClick: (e) => {
|
|
92
|
+
if (booleanify(ariaDisabled)) {
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
} else {
|
|
95
|
+
onClick == null ? void 0 : onClick(e);
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
onCheckedChange: (value) => {
|
|
99
|
+
if (value) {
|
|
100
|
+
onChecked == null ? void 0 : onChecked();
|
|
101
|
+
} else {
|
|
102
|
+
onUnchecked == null ? void 0 : onUnchecked();
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}, /* @__PURE__ */ React.createElement(StyledThumbWrapper, null, /* @__PURE__ */ React.createElement(StyledThumb, null)))
|
|
88
106
|
);
|
|
89
107
|
|
|
90
108
|
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 = '250ms'\n\nexport const
|
|
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 = '250ms'\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 100ms`,\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 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,YAAY,CAAa,UAAA,EAAA,eAAA,CAAA,eAAA,CAAA;AAAA,EACzB,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,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;;AChBM,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';
|
|
@@ -436,41 +437,55 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
436
437
|
readonly [$$PropertyValue]: "width";
|
|
437
438
|
};
|
|
438
439
|
};
|
|
439
|
-
}>>> & _mirohq_design_system_stitches.CustomStylesProps, "
|
|
440
|
+
}>>> & _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>>, {
|
|
440
441
|
size?: "medium" | "large" | undefined;
|
|
441
442
|
}, {}>;
|
|
442
443
|
declare type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>;
|
|
443
444
|
|
|
444
|
-
interface SwitchProps extends
|
|
445
|
+
interface SwitchProps extends StyledSwitchProps {
|
|
445
446
|
/**
|
|
446
|
-
* Change the size of the switch
|
|
447
|
+
* Change the size of the switch.
|
|
447
448
|
*/
|
|
448
449
|
size?: StyledSwitchProps['size'];
|
|
449
450
|
/**
|
|
450
|
-
* The state of the switch
|
|
451
|
+
* The state of the switch.
|
|
451
452
|
*/
|
|
452
|
-
checked
|
|
453
|
+
checked?: boolean;
|
|
453
454
|
/**
|
|
454
|
-
*
|
|
455
|
+
* The checked state of the checkbox when it is initially rendered. Use when
|
|
456
|
+
* you do not need to control its checked state.
|
|
455
457
|
*/
|
|
456
|
-
|
|
458
|
+
defaultChecked?: boolean;
|
|
457
459
|
/**
|
|
458
|
-
*
|
|
460
|
+
* Event handler called when the checked state equals true.
|
|
461
|
+
*/
|
|
462
|
+
onChecked?: () => void;
|
|
463
|
+
/**
|
|
464
|
+
* Event handler called when the checked state equals false.
|
|
465
|
+
*/
|
|
466
|
+
onUnchecked?: () => void;
|
|
467
|
+
/**
|
|
468
|
+
* Prevents the user from interacting with the switch.
|
|
459
469
|
*/
|
|
460
470
|
disabled?: boolean;
|
|
461
471
|
/**
|
|
462
|
-
* Indicates that the user must check the switch
|
|
472
|
+
* Indicates that the user must check the switch.
|
|
463
473
|
*/
|
|
464
474
|
required?: boolean;
|
|
465
475
|
/**
|
|
466
|
-
* The name of the switch used in the form
|
|
476
|
+
* The name of the switch used in the form.
|
|
467
477
|
*/
|
|
468
478
|
name?: string;
|
|
469
479
|
/**
|
|
470
|
-
* The data when accessing the switch by its name in the form
|
|
480
|
+
* The data when accessing the switch by its name in the form.
|
|
481
|
+
*/
|
|
482
|
+
value?: string;
|
|
483
|
+
/**
|
|
484
|
+
* When true, prevents the user from interacting with the switch but focus
|
|
485
|
+
* is still possible.
|
|
471
486
|
*/
|
|
472
|
-
|
|
487
|
+
'aria-disabled'?: Booleanish;
|
|
473
488
|
}
|
|
474
|
-
declare const Switch: react__default.ForwardRefExoticComponent<Pick<SwitchProps, "
|
|
489
|
+
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>>;
|
|
475
490
|
|
|
476
491
|
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.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@radix-ui/react-switch": "^1.0.0",
|
|
31
|
-
"@mirohq/design-system-stitches": "^2.2.
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-types": "^0.4.
|
|
34
|
-
"@mirohq/design-system-
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.2.0",
|
|
32
|
+
"@mirohq/design-system-styles": "^1.0.16",
|
|
33
|
+
"@mirohq/design-system-types": "^0.4.0",
|
|
34
|
+
"@mirohq/design-system-utils": "^0.13.0"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "rollup -c ../../../rollup.config.js",
|