@mirohq/design-system-switch 3.0.3-dropdown.1 → 3.0.4
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 +71 -8
- package/dist/main.js.map +1 -1
- package/dist/module.js +71 -8
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +19 -13
- package/package.json +4 -6
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');
|
|
8
7
|
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
9
8
|
var RadixSwitch = require('@radix-ui/react-switch');
|
|
10
9
|
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,18 +32,81 @@ 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
|
+
});
|
|
35
53
|
const StyledSwitch = designSystemStitches.styled(RadixSwitch__namespace.Root, {
|
|
36
|
-
|
|
54
|
+
all: "unset",
|
|
37
55
|
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}`,
|
|
38
62
|
...designSystemStyles.focus.css({
|
|
39
63
|
boxShadow: "$focus-controls"
|
|
40
64
|
}),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
65
|
+
"&:hover": {
|
|
66
|
+
backgroundColor: "$background-neutrals-inactive-hover",
|
|
67
|
+
[`${nonDisabledSelector} ${StyledThumbWrapper}`]: {
|
|
68
|
+
padding: 0
|
|
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
|
+
}
|
|
45
109
|
},
|
|
46
|
-
'&[disabled], &[aria-disabled="true"]': designSystemBaseSwitch.styles.disabled,
|
|
47
110
|
variants: {
|
|
48
111
|
size: {
|
|
49
112
|
medium: {
|
|
@@ -89,7 +152,7 @@ const Switch = React__default["default"].forwardRef(
|
|
|
89
152
|
onUnchecked == null ? void 0 : onUnchecked();
|
|
90
153
|
}
|
|
91
154
|
}
|
|
92
|
-
}, /* @__PURE__ */ React__default["default"].createElement(
|
|
155
|
+
}, /* @__PURE__ */ React__default["default"].createElement(StyledThumbWrapper, null, /* @__PURE__ */ React__default["default"].createElement(StyledThumb, null)))
|
|
93
156
|
);
|
|
94
157
|
|
|
95
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'\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 { 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,22 +1,85 @@
|
|
|
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';
|
|
4
3
|
import { styled } from '@mirohq/design-system-stitches';
|
|
5
4
|
import * as RadixSwitch from '@radix-ui/react-switch';
|
|
6
5
|
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
|
+
});
|
|
8
26
|
const StyledSwitch = styled(RadixSwitch.Root, {
|
|
9
|
-
|
|
27
|
+
all: "unset",
|
|
10
28
|
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}`,
|
|
11
35
|
...focus.css({
|
|
12
36
|
boxShadow: "$focus-controls"
|
|
13
37
|
}),
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
38
|
+
"&:hover": {
|
|
39
|
+
backgroundColor: "$background-neutrals-inactive-hover",
|
|
40
|
+
[`${nonDisabledSelector} ${StyledThumbWrapper}`]: {
|
|
41
|
+
padding: 0
|
|
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
|
+
}
|
|
18
82
|
},
|
|
19
|
-
'&[disabled], &[aria-disabled="true"]': styles.disabled,
|
|
20
83
|
variants: {
|
|
21
84
|
size: {
|
|
22
85
|
medium: {
|
|
@@ -62,7 +125,7 @@ const Switch = React.forwardRef(
|
|
|
62
125
|
onUnchecked == null ? void 0 : onUnchecked();
|
|
63
126
|
}
|
|
64
127
|
}
|
|
65
|
-
}, /* @__PURE__ */ React.createElement(
|
|
128
|
+
}, /* @__PURE__ */ React.createElement(StyledThumbWrapper, null, /* @__PURE__ */ React.createElement(StyledThumb, null)))
|
|
66
129
|
);
|
|
67
130
|
|
|
68
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'\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 { 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":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -84,7 +84,6 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
84
84
|
readonly 'background-danger-prominent-active'?: any;
|
|
85
85
|
readonly 'background-danger-prominent-hover'?: any;
|
|
86
86
|
readonly 'background-neutrals'?: any;
|
|
87
|
-
readonly 'background-neutrals-body'?: any;
|
|
88
87
|
readonly 'background-neutrals-container'?: any;
|
|
89
88
|
readonly 'background-neutrals-controls-disabled'?: any;
|
|
90
89
|
readonly 'background-neutrals-disabled'?: any;
|
|
@@ -92,6 +91,8 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
92
91
|
readonly 'background-neutrals-inactive-hover'?: any;
|
|
93
92
|
readonly 'background-neutrals-inverted'?: any;
|
|
94
93
|
readonly 'background-neutrals-inverted-subtle'?: any;
|
|
94
|
+
readonly 'background-neutrals-page'?: any;
|
|
95
|
+
readonly 'background-neutrals-page-subtle'?: any;
|
|
95
96
|
readonly 'background-neutrals-scrolls'?: any;
|
|
96
97
|
readonly 'background-neutrals-scrolls-hover'?: any;
|
|
97
98
|
readonly 'background-neutrals-subtle'?: any;
|
|
@@ -115,12 +116,11 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
115
116
|
readonly 'text-neutrals'?: any;
|
|
116
117
|
readonly 'text-neutrals-disabled'?: any;
|
|
117
118
|
readonly 'text-neutrals-inverted'?: any;
|
|
118
|
-
readonly 'text-neutrals-link'?: any;
|
|
119
|
-
readonly 'text-neutrals-link-active'?: any;
|
|
120
|
-
readonly 'text-neutrals-link-hover'?: any;
|
|
121
119
|
readonly 'text-neutrals-placeholder'?: any;
|
|
122
120
|
readonly 'text-neutrals-placeholder-only'?: any;
|
|
123
121
|
readonly 'text-neutrals-subtle'?: any;
|
|
122
|
+
readonly 'text-neutrals-subtle-active'?: any;
|
|
123
|
+
readonly 'text-neutrals-subtle-hover'?: any;
|
|
124
124
|
readonly 'text-primary'?: any;
|
|
125
125
|
readonly 'text-primary-active'?: any;
|
|
126
126
|
readonly 'text-primary-hover'?: any;
|
|
@@ -140,7 +140,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
140
140
|
readonly 'icon-neutrals-inverted'?: any;
|
|
141
141
|
readonly 'icon-neutrals-search'?: any;
|
|
142
142
|
readonly 'icon-neutrals-subtle'?: any;
|
|
143
|
-
readonly 'icon-neutrals-
|
|
143
|
+
readonly 'icon-neutrals-text'?: any;
|
|
144
144
|
readonly 'icon-primary'?: any;
|
|
145
145
|
readonly 'icon-primary-active'?: any;
|
|
146
146
|
readonly 'icon-primary-hover'?: any;
|
|
@@ -149,7 +149,10 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
149
149
|
readonly 'icon-success'?: any;
|
|
150
150
|
readonly 'icon-success-inverted'?: any;
|
|
151
151
|
readonly 'icon-warning'?: any;
|
|
152
|
+
readonly 'icon-warning-prominent'?: any;
|
|
152
153
|
readonly 'border-danger'?: any;
|
|
154
|
+
readonly 'border-danger-active'?: any;
|
|
155
|
+
readonly 'border-danger-hover'?: any;
|
|
153
156
|
readonly 'border-focus-inner'?: any;
|
|
154
157
|
readonly 'border-focus-middle'?: any;
|
|
155
158
|
readonly 'border-focus-outer'?: any;
|
|
@@ -161,6 +164,9 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
161
164
|
readonly 'border-neutrals-hover'?: any;
|
|
162
165
|
readonly 'border-neutrals-inverted'?: any;
|
|
163
166
|
readonly 'border-neutrals-subtle'?: any;
|
|
167
|
+
readonly 'border-neutrals-text-subtle'?: any;
|
|
168
|
+
readonly 'border-neutrals-text-subtle-active'?: any;
|
|
169
|
+
readonly 'border-neutrals-text-subtle-hover'?: any;
|
|
164
170
|
readonly 'border-primary'?: any;
|
|
165
171
|
readonly 'border-primary-active'?: any;
|
|
166
172
|
readonly 'border-primary-hover'?: any;
|
|
@@ -205,28 +211,28 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
205
211
|
readonly 'icon-400': "32px";
|
|
206
212
|
};
|
|
207
213
|
space: {
|
|
208
|
-
readonly
|
|
214
|
+
readonly none: 0;
|
|
209
215
|
readonly 50: "4px";
|
|
210
216
|
readonly 100: "8px";
|
|
211
217
|
readonly 150: "12px";
|
|
212
218
|
readonly 200: "16px";
|
|
213
219
|
readonly 300: "24px";
|
|
214
220
|
readonly 400: "32px";
|
|
215
|
-
readonly 500: "
|
|
221
|
+
readonly 500: "64px";
|
|
216
222
|
readonly 600: "48px";
|
|
217
223
|
readonly 800: "64px";
|
|
218
224
|
readonly 1200: "96px";
|
|
219
225
|
readonly 1600: "128px";
|
|
220
226
|
};
|
|
221
227
|
'space-gap': {
|
|
222
|
-
readonly
|
|
228
|
+
readonly none: any;
|
|
223
229
|
readonly 50: any;
|
|
224
230
|
readonly 100: any;
|
|
225
231
|
readonly 200: any;
|
|
226
232
|
readonly 300: any;
|
|
227
233
|
};
|
|
228
234
|
'space-inset': {
|
|
229
|
-
readonly
|
|
235
|
+
readonly none: any;
|
|
230
236
|
readonly 50: any;
|
|
231
237
|
readonly 100: any;
|
|
232
238
|
readonly 150: any;
|
|
@@ -239,7 +245,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
239
245
|
readonly 1600: any;
|
|
240
246
|
};
|
|
241
247
|
'space-offset': {
|
|
242
|
-
readonly
|
|
248
|
+
readonly none: any;
|
|
243
249
|
readonly 50: any;
|
|
244
250
|
readonly 100: any;
|
|
245
251
|
readonly 150: any;
|
|
@@ -250,7 +256,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
250
256
|
readonly 800: any;
|
|
251
257
|
readonly 1200: any;
|
|
252
258
|
readonly 1600: any;
|
|
253
|
-
readonly 'stacking-
|
|
259
|
+
readonly 'stacking-none': any;
|
|
254
260
|
readonly 'stacking-100': any;
|
|
255
261
|
readonly 'stacking-200': any;
|
|
256
262
|
readonly 'stacking-300': any;
|
|
@@ -452,7 +458,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
452
458
|
}> | undefined;
|
|
453
459
|
}> & {
|
|
454
460
|
children?: react.ReactNode;
|
|
455
|
-
} & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "
|
|
461
|
+
} & _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>>, {
|
|
456
462
|
size?: "medium" | "large" | undefined;
|
|
457
463
|
}, {}>;
|
|
458
464
|
declare type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>;
|
|
@@ -501,6 +507,6 @@ interface SwitchProps extends StyledSwitchProps {
|
|
|
501
507
|
*/
|
|
502
508
|
'aria-disabled'?: Booleanish;
|
|
503
509
|
}
|
|
504
|
-
declare const Switch: react__default.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "slot" | "title" | "children" | "color" | "translate" | "hidden" | "size" | "
|
|
510
|
+
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>>;
|
|
505
511
|
|
|
506
512
|
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.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -28,12 +28,10 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@radix-ui/react-switch": "^1.0.0",
|
|
31
|
-
"@
|
|
32
|
-
"@mirohq/design-system-
|
|
33
|
-
"@mirohq/design-system-utils": "^0.13.2",
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.3.2",
|
|
32
|
+
"@mirohq/design-system-styles": "^1.0.24",
|
|
34
33
|
"@mirohq/design-system-types": "^0.5.0",
|
|
35
|
-
"@mirohq/design-system-
|
|
36
|
-
"@mirohq/design-system-stitches": "^2.3.2-dropdown.0"
|
|
34
|
+
"@mirohq/design-system-utils": "^0.13.2"
|
|
37
35
|
},
|
|
38
36
|
"scripts": {
|
|
39
37
|
"build": "rollup -c ../../../rollup.config.js",
|