@mirohq/design-system-switch 3.0.5 → 3.0.7-use-press.2

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.
Files changed (6) hide show
  1. package/dist/main.js +33 -91
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +33 -91
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +9 -9
  6. package/package.json +6 -5
package/dist/main.js CHANGED
@@ -2,12 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var React = require('react');
6
7
  var designSystemUtils = require('@mirohq/design-system-utils');
8
+ var designSystemBaseSwitch = require('@mirohq/design-system-base-switch');
7
9
  var designSystemStitches = require('@mirohq/design-system-stitches');
8
10
  var RadixSwitch = require('@radix-ui/react-switch');
9
11
  var designSystemStyles = require('@mirohq/design-system-styles');
10
- var designSystemPrimitive = require('@mirohq/design-system-primitive');
11
12
 
12
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
14
 
@@ -32,81 +33,18 @@ function _interopNamespace(e) {
32
33
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
33
34
  var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
34
35
 
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
36
  const StyledSwitch = designSystemStitches.styled(RadixSwitch__namespace.Root, {
54
- all: "unset",
37
+ ...designSystemBaseSwitch.styles.default,
55
38
  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
39
  ...designSystemStyles.focus.css({
63
40
  boxShadow: "$focus-controls"
64
41
  }),
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
- }
42
+ '&[data-state="checked"]': designSystemBaseSwitch.styles.checked,
43
+ '&:hover:not([disabled]):not([aria-disabled="true"])': {
44
+ ...designSystemBaseSwitch.styles.hovered,
45
+ '&[data-state="checked"]': designSystemBaseSwitch.styles.checkedHovered
109
46
  },
47
+ '&[disabled], &[aria-disabled="true"]': designSystemBaseSwitch.styles.disabled,
110
48
  variants: {
111
49
  size: {
112
50
  medium: {
@@ -131,28 +69,32 @@ const Switch = React__default["default"].forwardRef(
131
69
  onUnchecked,
132
70
  onClick,
133
71
  ...restProps
134
- }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledSwitch, {
135
- ...restProps,
136
- ref: forwardRef,
137
- size,
138
- disabled,
139
- required,
140
- "aria-disabled": ariaDisabled,
141
- onClick: (e) => {
142
- if (designSystemUtils.booleanify(ariaDisabled)) {
143
- e.preventDefault();
144
- } else {
145
- onClick == null ? void 0 : onClick(e);
146
- }
147
- },
148
- onCheckedChange: (value) => {
149
- if (value) {
150
- onChecked == null ? void 0 : onChecked();
151
- } else {
152
- onUnchecked == null ? void 0 : onUnchecked();
153
- }
72
+ }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
73
+ StyledSwitch,
74
+ {
75
+ ...restProps,
76
+ ref: forwardRef,
77
+ size,
78
+ disabled,
79
+ required,
80
+ "aria-disabled": ariaDisabled,
81
+ onClick: (e) => {
82
+ if (designSystemUtils.booleanify(ariaDisabled)) {
83
+ e.preventDefault();
84
+ } else {
85
+ onClick == null ? void 0 : onClick(e);
86
+ }
87
+ },
88
+ onCheckedChange: (value) => {
89
+ if (value) {
90
+ onChecked == null ? void 0 : onChecked();
91
+ } else {
92
+ onUnchecked == null ? void 0 : onUnchecked();
93
+ }
94
+ },
95
+ children: /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseSwitch.Thumb, {})
154
96
  }
155
- }, /* @__PURE__ */ React__default["default"].createElement(StyledThumbWrapper, null, /* @__PURE__ */ React__default["default"].createElement(StyledThumb, null)))
97
+ )
156
98
  );
157
99
 
158
100
  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 { 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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"}
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","jsx","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,IACA,GAAG,SAAA;AAAA,KAEL,UAEA,qBAAAC,cAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAe,EAAA,YAAA;AAAA,MACf,SAAS,CAAK,CAAA,KAAA;AACZ,QAAI,IAAAC,4BAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,SACZ,MAAA;AACL,UAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA,iBAAiB,CAAS,KAAA,KAAA;AACxB,QAAA,IAAI,KAAO,EAAA;AACT,UAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,SACK,MAAA;AACL,UAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,EAAA,CAAA;AAAA,SACF;AAAA,OACF;AAAA,MAEA,yCAACC,4BAAM,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACT;AAEJ;;;;"}
package/dist/module.js CHANGED
@@ -1,85 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
1
2
  import React from 'react';
2
3
  import { booleanify } from '@mirohq/design-system-utils';
4
+ import { styles, Thumb } from '@mirohq/design-system-base-switch';
3
5
  import { styled } from '@mirohq/design-system-stitches';
4
6
  import * as RadixSwitch from '@radix-ui/react-switch';
5
7
  import { focus } from '@mirohq/design-system-styles';
6
- import { Primitive } from '@mirohq/design-system-primitive';
7
8
 
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
9
  const StyledSwitch = styled(RadixSwitch.Root, {
27
- all: "unset",
10
+ ...styles.default,
28
11
  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
12
  ...focus.css({
36
13
  boxShadow: "$focus-controls"
37
14
  }),
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
- }
15
+ '&[data-state="checked"]': styles.checked,
16
+ '&:hover:not([disabled]):not([aria-disabled="true"])': {
17
+ ...styles.hovered,
18
+ '&[data-state="checked"]': styles.checkedHovered
82
19
  },
20
+ '&[disabled], &[aria-disabled="true"]': styles.disabled,
83
21
  variants: {
84
22
  size: {
85
23
  medium: {
@@ -104,28 +42,32 @@ const Switch = React.forwardRef(
104
42
  onUnchecked,
105
43
  onClick,
106
44
  ...restProps
107
- }, forwardRef) => /* @__PURE__ */ React.createElement(StyledSwitch, {
108
- ...restProps,
109
- ref: forwardRef,
110
- size,
111
- disabled,
112
- required,
113
- "aria-disabled": ariaDisabled,
114
- onClick: (e) => {
115
- if (booleanify(ariaDisabled)) {
116
- e.preventDefault();
117
- } else {
118
- onClick == null ? void 0 : onClick(e);
119
- }
120
- },
121
- onCheckedChange: (value) => {
122
- if (value) {
123
- onChecked == null ? void 0 : onChecked();
124
- } else {
125
- onUnchecked == null ? void 0 : onUnchecked();
126
- }
45
+ }, forwardRef) => /* @__PURE__ */ jsx(
46
+ StyledSwitch,
47
+ {
48
+ ...restProps,
49
+ ref: forwardRef,
50
+ size,
51
+ disabled,
52
+ required,
53
+ "aria-disabled": ariaDisabled,
54
+ onClick: (e) => {
55
+ if (booleanify(ariaDisabled)) {
56
+ e.preventDefault();
57
+ } else {
58
+ onClick == null ? void 0 : onClick(e);
59
+ }
60
+ },
61
+ onCheckedChange: (value) => {
62
+ if (value) {
63
+ onChecked == null ? void 0 : onChecked();
64
+ } else {
65
+ onUnchecked == null ? void 0 : onUnchecked();
66
+ }
67
+ },
68
+ children: /* @__PURE__ */ jsx(Thumb, {})
127
69
  }
128
- }, /* @__PURE__ */ React.createElement(StyledThumbWrapper, null, /* @__PURE__ */ React.createElement(StyledThumb, null)))
70
+ )
129
71
  );
130
72
 
131
73
  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 { 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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"}
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,IACA,GAAG,SAAA;AAAA,KAEL,UAEA,qBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAK,EAAA,UAAA;AAAA,MACL,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAe,EAAA,YAAA;AAAA,MACf,SAAS,CAAK,CAAA,KAAA;AACZ,QAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,UAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,SACZ,MAAA;AACL,UAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA,iBAAiB,CAAS,KAAA,KAAA;AACxB,QAAA,IAAI,KAAO,EAAA;AACT,UAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,EAAA,CAAA;AAAA,SACK,MAAA;AACL,UAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,EAAA,CAAA;AAAA,SACF;AAAA,OACF;AAAA,MAEA,8BAAC,KAAM,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GACT;AAEJ;;;;"}
package/dist/types.d.ts CHANGED
@@ -7,7 +7,7 @@ import * as _stitches_react_types_css_util from '@stitches/react/types/css-util'
7
7
  import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
8
8
  import * as RadixSwitch from '@radix-ui/react-switch';
9
9
 
10
- declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
10
+ declare const StyledSwitch: react.ForwardRefExoticComponent<Omit<Omit<{
11
11
  size?: "medium" | "large" | undefined;
12
12
  }, "size"> & _stitches_react_types_styled_component.TransformProps<{
13
13
  size?: "medium" | "large" | undefined;
@@ -211,28 +211,28 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
211
211
  readonly 'icon-400': "32px";
212
212
  };
213
213
  space: {
214
- readonly none: 0;
214
+ readonly 0: 0;
215
215
  readonly 50: "4px";
216
216
  readonly 100: "8px";
217
217
  readonly 150: "12px";
218
218
  readonly 200: "16px";
219
219
  readonly 300: "24px";
220
220
  readonly 400: "32px";
221
- readonly 500: "64px";
221
+ readonly 500: "40px";
222
222
  readonly 600: "48px";
223
223
  readonly 800: "64px";
224
224
  readonly 1200: "96px";
225
225
  readonly 1600: "128px";
226
226
  };
227
227
  'space-gap': {
228
- readonly none: any;
228
+ readonly 0: any;
229
229
  readonly 50: any;
230
230
  readonly 100: any;
231
231
  readonly 200: any;
232
232
  readonly 300: any;
233
233
  };
234
234
  'space-inset': {
235
- readonly none: any;
235
+ readonly 0: any;
236
236
  readonly 50: any;
237
237
  readonly 100: any;
238
238
  readonly 150: any;
@@ -245,7 +245,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
245
245
  readonly 1600: any;
246
246
  };
247
247
  'space-offset': {
248
- readonly none: any;
248
+ readonly 0: any;
249
249
  readonly 50: any;
250
250
  readonly 100: any;
251
251
  readonly 150: any;
@@ -256,7 +256,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
256
256
  readonly 800: any;
257
257
  readonly 1200: any;
258
258
  readonly 1600: any;
259
- readonly 'stacking-none': any;
259
+ readonly 'stacking-0': any;
260
260
  readonly 'stacking-100': any;
261
261
  readonly 'stacking-200': any;
262
262
  readonly 'stacking-300': any;
@@ -458,7 +458,7 @@ declare const StyledSwitch: react.ForwardRefExoticComponent<Pick<Omit<{
458
458
  }> | undefined;
459
459
  }> & {
460
460
  children?: react.ReactNode;
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>>, {
461
+ } & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixSwitch.SwitchProps & react.RefAttributes<HTMLButtonElement>>, {
462
462
  size?: "medium" | "large" | undefined;
463
463
  }, {}>;
464
464
  declare type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>;
@@ -507,6 +507,6 @@ interface SwitchProps extends StyledSwitchProps {
507
507
  */
508
508
  'aria-disabled'?: Booleanish;
509
509
  }
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>>;
510
+ declare const Switch: react__default.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
511
511
 
512
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.5",
3
+ "version": "3.0.7-use-press.2",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,10 +28,11 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@radix-ui/react-switch": "^1.0.0",
31
- "@mirohq/design-system-stitches": "^2.3.2",
32
- "@mirohq/design-system-utils": "^0.14.0",
33
- "@mirohq/design-system-types": "^0.5.0",
34
- "@mirohq/design-system-styles": "^1.0.24"
31
+ "@mirohq/design-system-base-switch": "^0.1.1",
32
+ "@mirohq/design-system-utils": "^0.14.0-use-press.2",
33
+ "@mirohq/design-system-styles": "^1.1.0-use-press.0",
34
+ "@mirohq/design-system-stitches": "^2.3.4-use-press.0",
35
+ "@mirohq/design-system-types": "^0.6.0-use-press.0"
35
36
  },
36
37
  "scripts": {
37
38
  "build": "rollup -c ../../../rollup.config.js",