@mirohq/design-system-switch 3.0.2 → 3.0.3-dropdown.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 +8 -71
- package/dist/main.js.map +1 -1
- package/dist/module.js +8 -71
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +8 -8
- package/package.json +7 -5
package/dist/main.js
CHANGED
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var designSystemUtils = require('@mirohq/design-system-utils');
|
|
7
|
+
var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
|
|
7
8
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
8
9
|
var RadixSwitch = require('@radix-ui/react-switch');
|
|
9
10
|
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
10
|
-
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
13
|
|
|
@@ -32,81 +32,18 @@ function _interopNamespace(e) {
|
|
|
32
32
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
33
33
|
var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
|
|
34
34
|
|
|
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
|
-
});
|
|
53
35
|
const StyledSwitch = designSystemStitches.styled(RadixSwitch__namespace.Root, {
|
|
54
|
-
|
|
36
|
+
...designSystemBaseSwitch.styles.default,
|
|
55
37
|
cursor: "pointer",
|
|
56
|
-
boxSizing: "border-box",
|
|
57
|
-
backgroundColor: "$background-neutrals-inactive",
|
|
58
|
-
borderRadius: "$half",
|
|
59
|
-
display: "inline-flex",
|
|
60
|
-
padding: 2,
|
|
61
|
-
transition: `background ${TRANSITION_TIME}`,
|
|
62
38
|
...designSystemStyles.focus.css({
|
|
63
39
|
boxShadow: "$focus-controls"
|
|
64
40
|
}),
|
|
65
|
-
"
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
'&[data-state="checked"]': {
|
|
72
|
-
background: "$background-primary-prominent-selected",
|
|
73
|
-
[`${nonDisabledSelector}:hover`]: {
|
|
74
|
-
background: "$background-primary-prominent-hover"
|
|
75
|
-
},
|
|
76
|
-
[`& ${StyledThumbWrapper}`]: {
|
|
77
|
-
transform: "translateX(100%)"
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
'&[disabled], &[aria-disabled="true"]': {
|
|
81
|
-
cursor: "default",
|
|
82
|
-
background: "$background-neutrals-controls-disabled",
|
|
83
|
-
[`& ${StyledThumb}`]: {
|
|
84
|
-
background: "$background-neutrals-disabled"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
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"
|
|
104
|
-
},
|
|
105
|
-
[`& ${StyledThumb}`]: {
|
|
106
|
-
borderColor: "Highlight"
|
|
107
|
-
}
|
|
108
|
-
}
|
|
41
|
+
'&[data-state="checked"]': designSystemBaseSwitch.styles.checked,
|
|
42
|
+
'&:hover:not([disabled]):not([aria-disabled="true"])': {
|
|
43
|
+
...designSystemBaseSwitch.styles.hovered,
|
|
44
|
+
'&[data-state="checked"]': designSystemBaseSwitch.styles.checkedHovered
|
|
109
45
|
},
|
|
46
|
+
'&[disabled], &[aria-disabled="true"]': designSystemBaseSwitch.styles.disabled,
|
|
110
47
|
variants: {
|
|
111
48
|
size: {
|
|
112
49
|
medium: {
|
|
@@ -152,7 +89,7 @@ const Switch = React__default["default"].forwardRef(
|
|
|
152
89
|
onUnchecked == null ? void 0 : onUnchecked();
|
|
153
90
|
}
|
|
154
91
|
}
|
|
155
|
-
}, /* @__PURE__ */ React__default["default"].createElement(
|
|
92
|
+
}, /* @__PURE__ */ React__default["default"].createElement(designSystemBaseSwitch.Thumb, null))
|
|
156
93
|
);
|
|
157
94
|
|
|
158
95
|
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'\nimport {
|
|
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 { styles } from '@mirohq/design-system-base-switch'\n\nexport const StyledSwitch = styled(RadixSwitch.Root, {\n ...styles.default,\n cursor: 'pointer',\n\n ...focus.css({\n boxShadow: '$focus-controls',\n }),\n\n '&[data-state=\"checked\"]': styles.checked,\n\n '&:hover:not([disabled]):not([aria-disabled=\"true\"])': {\n ...styles.hovered,\n\n '&[data-state=\"checked\"]': styles.checkedHovered,\n },\n '&[disabled], &[aria-disabled=\"true\"]': styles.disabled,\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'\nimport { Thumb } from '@mirohq/design-system-base-switch'\n\nimport type { StyledSwitchProps } from './switch.styled'\nimport { StyledSwitch } 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 <Thumb />\n </StyledSwitch>\n )\n)\n"],"names":["styled","RadixSwitch","styles","focus","React","booleanify","Thumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMa,MAAA,YAAA,GAAeA,2BAAO,CAAAC,sBAAA,CAAY,IAAM,EAAA;AAAA,EACnD,GAAGC,6BAAO,CAAA,OAAA;AAAA,EACV,MAAQ,EAAA,SAAA;AAAA,EAER,GAAGC,yBAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,iBAAA;AAAA,GACZ,CAAA;AAAA,EAED,2BAA2BD,6BAAO,CAAA,OAAA;AAAA,EAElC,qDAAuD,EAAA;AAAA,IACrD,GAAGA,6BAAO,CAAA,OAAA;AAAA,IAEV,2BAA2BA,6BAAO,CAAA,cAAA;AAAA,GACpC;AAAA,EACA,wCAAwCA,6BAAO,CAAA,QAAA;AAAA,EAE/C,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;;AC4BM,MAAM,SAASE,yBAAM,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,+BAECA,yBAAA,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,IAAAC,4BAAA,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,GAEA,kBAAAD,yBAAA,CAAA,aAAA,CAACE,kCAAM,CACT,CAAA;AAEJ;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -1,85 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { booleanify } from '@mirohq/design-system-utils';
|
|
3
|
+
import { styles, Thumb } from '@mirohq/design-system-base-switch';
|
|
3
4
|
import { styled } from '@mirohq/design-system-stitches';
|
|
4
5
|
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
5
6
|
import { focus } from '@mirohq/design-system-styles';
|
|
6
|
-
import { Primitive } from '@mirohq/design-system-primitive';
|
|
7
7
|
|
|
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
|
-
});
|
|
26
8
|
const StyledSwitch = styled(RadixSwitch.Root, {
|
|
27
|
-
|
|
9
|
+
...styles.default,
|
|
28
10
|
cursor: "pointer",
|
|
29
|
-
boxSizing: "border-box",
|
|
30
|
-
backgroundColor: "$background-neutrals-inactive",
|
|
31
|
-
borderRadius: "$half",
|
|
32
|
-
display: "inline-flex",
|
|
33
|
-
padding: 2,
|
|
34
|
-
transition: `background ${TRANSITION_TIME}`,
|
|
35
11
|
...focus.css({
|
|
36
12
|
boxShadow: "$focus-controls"
|
|
37
13
|
}),
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
'&[data-state="checked"]': {
|
|
45
|
-
background: "$background-primary-prominent-selected",
|
|
46
|
-
[`${nonDisabledSelector}:hover`]: {
|
|
47
|
-
background: "$background-primary-prominent-hover"
|
|
48
|
-
},
|
|
49
|
-
[`& ${StyledThumbWrapper}`]: {
|
|
50
|
-
transform: "translateX(100%)"
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
'&[disabled], &[aria-disabled="true"]': {
|
|
54
|
-
cursor: "default",
|
|
55
|
-
background: "$background-neutrals-controls-disabled",
|
|
56
|
-
[`& ${StyledThumb}`]: {
|
|
57
|
-
background: "$background-neutrals-disabled"
|
|
58
|
-
}
|
|
59
|
-
},
|
|
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"
|
|
77
|
-
},
|
|
78
|
-
[`& ${StyledThumb}`]: {
|
|
79
|
-
borderColor: "Highlight"
|
|
80
|
-
}
|
|
81
|
-
}
|
|
14
|
+
'&[data-state="checked"]': styles.checked,
|
|
15
|
+
'&:hover:not([disabled]):not([aria-disabled="true"])': {
|
|
16
|
+
...styles.hovered,
|
|
17
|
+
'&[data-state="checked"]': styles.checkedHovered
|
|
82
18
|
},
|
|
19
|
+
'&[disabled], &[aria-disabled="true"]': styles.disabled,
|
|
83
20
|
variants: {
|
|
84
21
|
size: {
|
|
85
22
|
medium: {
|
|
@@ -125,7 +62,7 @@ const Switch = React.forwardRef(
|
|
|
125
62
|
onUnchecked == null ? void 0 : onUnchecked();
|
|
126
63
|
}
|
|
127
64
|
}
|
|
128
|
-
}, /* @__PURE__ */ React.createElement(
|
|
65
|
+
}, /* @__PURE__ */ React.createElement(Thumb, null))
|
|
129
66
|
);
|
|
130
67
|
|
|
131
68
|
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'\nimport {
|
|
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 { styles } from '@mirohq/design-system-base-switch'\n\nexport const StyledSwitch = styled(RadixSwitch.Root, {\n ...styles.default,\n cursor: 'pointer',\n\n ...focus.css({\n boxShadow: '$focus-controls',\n }),\n\n '&[data-state=\"checked\"]': styles.checked,\n\n '&:hover:not([disabled]):not([aria-disabled=\"true\"])': {\n ...styles.hovered,\n\n '&[data-state=\"checked\"]': styles.checkedHovered,\n },\n '&[disabled], &[aria-disabled=\"true\"]': styles.disabled,\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'\nimport { Thumb } from '@mirohq/design-system-base-switch'\n\nimport type { StyledSwitchProps } from './switch.styled'\nimport { StyledSwitch } 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 <Thumb />\n </StyledSwitch>\n )\n)\n"],"names":[],"mappings":";;;;;;;AAMa,MAAA,YAAA,GAAe,MAAO,CAAA,WAAA,CAAY,IAAM,EAAA;AAAA,EACnD,GAAG,MAAO,CAAA,OAAA;AAAA,EACV,MAAQ,EAAA,SAAA;AAAA,EAER,GAAG,MAAM,GAAI,CAAA;AAAA,IACX,SAAW,EAAA,iBAAA;AAAA,GACZ,CAAA;AAAA,EAED,2BAA2B,MAAO,CAAA,OAAA;AAAA,EAElC,qDAAuD,EAAA;AAAA,IACrD,GAAG,MAAO,CAAA,OAAA;AAAA,IAEV,2BAA2B,MAAO,CAAA,cAAA;AAAA,GACpC;AAAA,EACA,wCAAwC,MAAO,CAAA,QAAA;AAAA,EAE/C,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;;AC4BM,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,GAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAM,CACT,CAAA;AAEJ;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -205,28 +205,28 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
205
205
|
readonly 'icon-400': "32px";
|
|
206
206
|
};
|
|
207
207
|
space: {
|
|
208
|
-
readonly
|
|
208
|
+
readonly 0: 0;
|
|
209
209
|
readonly 50: "4px";
|
|
210
210
|
readonly 100: "8px";
|
|
211
211
|
readonly 150: "12px";
|
|
212
212
|
readonly 200: "16px";
|
|
213
213
|
readonly 300: "24px";
|
|
214
214
|
readonly 400: "32px";
|
|
215
|
-
readonly 500: "
|
|
215
|
+
readonly 500: "40px";
|
|
216
216
|
readonly 600: "48px";
|
|
217
217
|
readonly 800: "64px";
|
|
218
218
|
readonly 1200: "96px";
|
|
219
219
|
readonly 1600: "128px";
|
|
220
220
|
};
|
|
221
221
|
'space-gap': {
|
|
222
|
-
readonly
|
|
222
|
+
readonly 0: any;
|
|
223
223
|
readonly 50: any;
|
|
224
224
|
readonly 100: any;
|
|
225
225
|
readonly 200: any;
|
|
226
226
|
readonly 300: any;
|
|
227
227
|
};
|
|
228
228
|
'space-inset': {
|
|
229
|
-
readonly
|
|
229
|
+
readonly 0: any;
|
|
230
230
|
readonly 50: any;
|
|
231
231
|
readonly 100: any;
|
|
232
232
|
readonly 150: any;
|
|
@@ -239,7 +239,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
239
239
|
readonly 1600: any;
|
|
240
240
|
};
|
|
241
241
|
'space-offset': {
|
|
242
|
-
readonly
|
|
242
|
+
readonly 0: any;
|
|
243
243
|
readonly 50: any;
|
|
244
244
|
readonly 100: any;
|
|
245
245
|
readonly 150: any;
|
|
@@ -250,7 +250,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
250
250
|
readonly 800: any;
|
|
251
251
|
readonly 1200: any;
|
|
252
252
|
readonly 1600: any;
|
|
253
|
-
readonly 'stacking-
|
|
253
|
+
readonly 'stacking-0': any;
|
|
254
254
|
readonly 'stacking-100': any;
|
|
255
255
|
readonly 'stacking-200': any;
|
|
256
256
|
readonly 'stacking-300': any;
|
|
@@ -452,7 +452,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
452
452
|
}> | undefined;
|
|
453
453
|
}> & {
|
|
454
454
|
children?: react.ReactNode;
|
|
455
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "
|
|
455
|
+
} & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "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" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "checked" | "required" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps | "onCheckedChange"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixSwitch.SwitchProps & react.RefAttributes<HTMLButtonElement>>, {
|
|
456
456
|
size?: "medium" | "large" | undefined;
|
|
457
457
|
}, {}>;
|
|
458
458
|
declare type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>;
|
|
@@ -501,6 +501,6 @@ interface SwitchProps extends StyledSwitchProps {
|
|
|
501
501
|
*/
|
|
502
502
|
'aria-disabled'?: Booleanish;
|
|
503
503
|
}
|
|
504
|
-
declare const Switch: react__default.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "
|
|
504
|
+
declare const Switch: react__default.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "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" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "checked" | "required" | "asChild" | "css" | "UNSAFE_style" | "onChecked" | "onUnchecked"> & react__default.RefAttributes<HTMLButtonElement>>;
|
|
505
505
|
|
|
506
506
|
export { Switch, SwitchProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-switch",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3-dropdown.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,10 +28,12 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@radix-ui/react-switch": "^1.0.0",
|
|
31
|
-
"@
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-
|
|
34
|
-
"@mirohq/design-system-
|
|
31
|
+
"@react-aria/interactions": "^3.13.0",
|
|
32
|
+
"@mirohq/design-system-base-switch": "^0.1.0-dropdown.1",
|
|
33
|
+
"@mirohq/design-system-utils": "^0.13.2",
|
|
34
|
+
"@mirohq/design-system-types": "^0.5.0",
|
|
35
|
+
"@mirohq/design-system-styles": "^1.0.24-dropdown.0",
|
|
36
|
+
"@mirohq/design-system-stitches": "^2.3.2-dropdown.0"
|
|
35
37
|
},
|
|
36
38
|
"scripts": {
|
|
37
39
|
"build": "rollup -c ../../../rollup.config.js",
|