@mirohq/design-system-base-switch 0.1.1 → 0.1.3-themes.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +10 -12
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +10 -12
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +120 -109
  6. package/package.json +2 -2
package/dist/main.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
6
6
  var designSystemStitches = require('@mirohq/design-system-stitches');
7
+ var jsxRuntime = require('react/jsx-runtime');
7
8
  var React = require('react');
8
9
 
9
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,7 +23,7 @@ const StyledThumbWrapper = designSystemStitches.styled(designSystemPrimitive.Pri
22
23
  display: "block",
23
24
  width: "50%",
24
25
  height: "100%",
25
- transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,
26
+ transition: "transform ".concat(TRANSITION_TIME, ", padding ").concat(TRANSITION_TIME),
26
27
  willChange: "transform",
27
28
  boxSizing: "border-box",
28
29
  padding: 1
@@ -36,12 +37,12 @@ const styles = {
36
37
  borderRadius: "$half",
37
38
  display: "inline-flex",
38
39
  padding: 2,
39
- transition: `background ${TRANSITION_TIME}`,
40
+ transition: "background ".concat(TRANSITION_TIME),
40
41
  "@media (forced-colors: active)": {
41
42
  border: "1px solid ButtonText",
42
43
  padding: 1,
43
44
  backgroundColor: "ButtonFace",
44
- [`& ${StyledThumb}`]: {
45
+ ["& ".concat(StyledThumb)]: {
45
46
  borderColor: "ButtonFace",
46
47
  border: "1px solid ButtonText",
47
48
  margin: -1
@@ -50,20 +51,20 @@ const styles = {
50
51
  },
51
52
  checked: {
52
53
  background: "$background-primary-prominent-selected",
53
- [`& ${StyledThumbWrapper}`]: {
54
+ ["& ".concat(StyledThumbWrapper)]: {
54
55
  transform: "translateX(100%)"
55
56
  },
56
57
  "@media (forced-colors: active)": {
57
58
  backgroundColor: "Highlight",
58
59
  borderColor: "Highlight",
59
- [`& ${StyledThumb}`]: {
60
+ ["& ".concat(StyledThumb)]: {
60
61
  borderColor: "Highlight"
61
62
  }
62
63
  }
63
64
  },
64
65
  hovered: {
65
66
  backgroundColor: "$background-neutrals-inactive-hover",
66
- [`& ${StyledThumbWrapper}`]: {
67
+ ["& ".concat(StyledThumbWrapper)]: {
67
68
  padding: 0
68
69
  },
69
70
  "@media (forced-colors: active)": {
@@ -79,22 +80,19 @@ const styles = {
79
80
  disabled: {
80
81
  cursor: "default",
81
82
  background: "$background-neutrals-controls-disabled",
82
- [`& ${StyledThumb}`]: {
83
+ ["& ".concat(StyledThumb)]: {
83
84
  background: "$background-neutrals-disabled"
84
85
  },
85
86
  "@media (forced-colors: active)": {
86
87
  borderColor: "GrayText",
87
- [`& ${StyledThumb}`]: {
88
+ ["& ".concat(StyledThumb)]: {
88
89
  borderColor: "GrayText"
89
90
  }
90
91
  }
91
92
  }
92
93
  };
93
94
 
94
- const Thumb = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledThumbWrapper, null, /* @__PURE__ */ React__default["default"].createElement(StyledThumb, {
95
- ref: forwardRef,
96
- ...props
97
- })));
95
+ const Thumb = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledThumbWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledThumb, { ref: forwardRef, ...props }) }));
98
96
 
99
97
  exports.Thumb = Thumb;
100
98
  exports.styles = styles;
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\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 type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\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 '@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 },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":["styled","Primitive","React"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\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 type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\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 '@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 },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":["styled","Primitive","React","jsx"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Primitive } from '@mirohq/design-system-primitive';
2
2
  import { styled } from '@mirohq/design-system-stitches';
3
+ import { jsx } from 'react/jsx-runtime';
3
4
  import React from 'react';
4
5
 
5
6
  const TRANSITION_TIME = "100ms";
@@ -14,7 +15,7 @@ const StyledThumbWrapper = styled(Primitive.span, {
14
15
  display: "block",
15
16
  width: "50%",
16
17
  height: "100%",
17
- transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,
18
+ transition: "transform ".concat(TRANSITION_TIME, ", padding ").concat(TRANSITION_TIME),
18
19
  willChange: "transform",
19
20
  boxSizing: "border-box",
20
21
  padding: 1
@@ -28,12 +29,12 @@ const styles = {
28
29
  borderRadius: "$half",
29
30
  display: "inline-flex",
30
31
  padding: 2,
31
- transition: `background ${TRANSITION_TIME}`,
32
+ transition: "background ".concat(TRANSITION_TIME),
32
33
  "@media (forced-colors: active)": {
33
34
  border: "1px solid ButtonText",
34
35
  padding: 1,
35
36
  backgroundColor: "ButtonFace",
36
- [`& ${StyledThumb}`]: {
37
+ ["& ".concat(StyledThumb)]: {
37
38
  borderColor: "ButtonFace",
38
39
  border: "1px solid ButtonText",
39
40
  margin: -1
@@ -42,20 +43,20 @@ const styles = {
42
43
  },
43
44
  checked: {
44
45
  background: "$background-primary-prominent-selected",
45
- [`& ${StyledThumbWrapper}`]: {
46
+ ["& ".concat(StyledThumbWrapper)]: {
46
47
  transform: "translateX(100%)"
47
48
  },
48
49
  "@media (forced-colors: active)": {
49
50
  backgroundColor: "Highlight",
50
51
  borderColor: "Highlight",
51
- [`& ${StyledThumb}`]: {
52
+ ["& ".concat(StyledThumb)]: {
52
53
  borderColor: "Highlight"
53
54
  }
54
55
  }
55
56
  },
56
57
  hovered: {
57
58
  backgroundColor: "$background-neutrals-inactive-hover",
58
- [`& ${StyledThumbWrapper}`]: {
59
+ ["& ".concat(StyledThumbWrapper)]: {
59
60
  padding: 0
60
61
  },
61
62
  "@media (forced-colors: active)": {
@@ -71,22 +72,19 @@ const styles = {
71
72
  disabled: {
72
73
  cursor: "default",
73
74
  background: "$background-neutrals-controls-disabled",
74
- [`& ${StyledThumb}`]: {
75
+ ["& ".concat(StyledThumb)]: {
75
76
  background: "$background-neutrals-disabled"
76
77
  },
77
78
  "@media (forced-colors: active)": {
78
79
  borderColor: "GrayText",
79
- [`& ${StyledThumb}`]: {
80
+ ["& ".concat(StyledThumb)]: {
80
81
  borderColor: "GrayText"
81
82
  }
82
83
  }
83
84
  }
84
85
  };
85
86
 
86
- const Thumb = React.forwardRef((props, forwardRef) => /* @__PURE__ */ React.createElement(StyledThumbWrapper, null, /* @__PURE__ */ React.createElement(StyledThumb, {
87
- ref: forwardRef,
88
- ...props
89
- })));
87
+ const Thumb = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledThumbWrapper, { children: /* @__PURE__ */ jsx(StyledThumb, { ref: forwardRef, ...props }) }));
90
88
 
91
89
  export { Thumb, styles };
92
90
  //# sourceMappingURL=module.js.map
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\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 type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\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 '@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 },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\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 type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\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 '@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 },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -86,7 +86,7 @@ declare const styles: {
86
86
  };
87
87
  };
88
88
 
89
- declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
89
+ declare const Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<{}, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
90
90
  ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
91
91
  } & {
92
92
  asChild?: boolean | undefined;
@@ -99,6 +99,7 @@ declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> &
99
99
  readonly lg: "4px";
100
100
  };
101
101
  colors: {
102
+ readonly black: any;
102
103
  readonly 'blue-100': any;
103
104
  readonly 'blue-200': any;
104
105
  readonly 'blue-300': any;
@@ -118,6 +119,15 @@ declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> &
118
119
  readonly 'gray-700': any;
119
120
  readonly 'gray-800': any;
120
121
  readonly 'gray-900': any;
122
+ readonly 'green-100': any;
123
+ readonly 'green-200': any;
124
+ readonly 'green-300': any;
125
+ readonly 'green-400': any;
126
+ readonly 'green-500': any;
127
+ readonly 'green-600': any;
128
+ readonly 'green-700': any;
129
+ readonly 'green-800': any;
130
+ readonly 'green-900': any;
121
131
  readonly 'indigo-100': any;
122
132
  readonly 'indigo-200': any;
123
133
  readonly 'indigo-300': any;
@@ -136,6 +146,8 @@ declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> &
136
146
  readonly 'red-700': any;
137
147
  readonly 'red-800': any;
138
148
  readonly 'red-900': any;
149
+ readonly transparent: any;
150
+ readonly white: any;
139
151
  readonly 'yellow-100': any;
140
152
  readonly 'yellow-200': any;
141
153
  readonly 'yellow-300': any;
@@ -145,113 +157,112 @@ declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> &
145
157
  readonly 'yellow-700': any;
146
158
  readonly 'yellow-800': any;
147
159
  readonly 'yellow-900': any;
148
- readonly 'green-100': any;
149
- readonly 'green-200': any;
150
- readonly 'green-300': any;
151
- readonly 'green-400': any;
152
- readonly 'green-500': any;
153
- readonly 'green-600': any;
154
- readonly 'green-700': any;
155
- readonly 'green-800': any;
156
- readonly 'green-900': any;
157
- readonly black: any;
158
- readonly white: any;
159
- readonly transparent: any;
160
- readonly 'background-danger'?: any;
161
- readonly 'background-danger-hover'?: any;
162
- readonly 'background-danger-prominent'?: any;
163
- readonly 'background-danger-prominent-active'?: any;
164
- readonly 'background-danger-prominent-hover'?: any;
165
- readonly 'background-neutrals'?: any;
166
- readonly 'background-neutrals-container'?: any;
167
- readonly 'background-neutrals-controls-disabled'?: any;
168
- readonly 'background-neutrals-disabled'?: any;
169
- readonly 'background-neutrals-inactive'?: any;
170
- readonly 'background-neutrals-inactive-hover'?: any;
171
- readonly 'background-neutrals-inverted'?: any;
172
- readonly 'background-neutrals-inverted-subtle'?: any;
173
- readonly 'background-neutrals-page'?: any;
174
- readonly 'background-neutrals-page-subtle'?: any;
175
- readonly 'background-neutrals-scrolls'?: any;
176
- readonly 'background-neutrals-scrolls-hover'?: any;
177
- readonly 'background-neutrals-subtle'?: any;
178
- readonly 'background-neutrals-subtle-active'?: any;
179
- readonly 'background-neutrals-subtle-hover'?: any;
180
- readonly 'background-primary-prominent'?: any;
181
- readonly 'background-primary-prominent-active'?: any;
182
- readonly 'background-primary-prominent-hover'?: any;
183
- readonly 'background-primary-prominent-selected'?: any;
184
- readonly 'background-primary-subtle'?: any;
185
- readonly 'background-primary-subtle-active'?: any;
186
- readonly 'background-primary-subtle-hover'?: any;
187
- readonly 'background-primary-subtle-selected'?: any;
188
- readonly 'background-success'?: any;
189
- readonly 'background-warning-prominent'?: any;
190
- readonly 'background-warning-subtle'?: any;
191
- readonly 'text-danger'?: any;
192
- readonly 'text-danger-active'?: any;
193
- readonly 'text-danger-hover'?: any;
194
- readonly 'text-danger-inverted'?: any;
195
- readonly 'text-neutrals'?: any;
196
- readonly 'text-neutrals-disabled'?: any;
197
- readonly 'text-neutrals-inverted'?: any;
198
- readonly 'text-neutrals-placeholder'?: any;
199
- readonly 'text-neutrals-placeholder-only'?: any;
200
- readonly 'text-neutrals-subtle'?: any;
201
- readonly 'text-neutrals-subtle-active'?: any;
202
- readonly 'text-neutrals-subtle-hover'?: any;
203
- readonly 'text-primary'?: any;
204
- readonly 'text-primary-active'?: any;
205
- readonly 'text-primary-hover'?: any;
206
- readonly 'text-primary-inverted'?: any;
207
- readonly 'text-primary-inverted-subtle'?: any;
208
- readonly 'text-primary-selected'?: any;
209
- readonly 'text-success'?: any;
210
- readonly 'text-warning'?: any;
211
- readonly 'icon-danger'?: any;
212
- readonly 'icon-danger-active'?: any;
213
- readonly 'icon-danger-hover'?: any;
214
- readonly 'icon-danger-inverted'?: any;
215
- readonly 'icon-neutrals'?: any;
216
- readonly 'icon-neutrals-disabled'?: any;
217
- readonly 'icon-neutrals-inactive'?: any;
218
- readonly 'icon-neutrals-inactive-hover'?: any;
219
- readonly 'icon-neutrals-inverted'?: any;
220
- readonly 'icon-neutrals-search'?: any;
221
- readonly 'icon-neutrals-subtle'?: any;
222
- readonly 'icon-neutrals-text'?: any;
223
- readonly 'icon-primary'?: any;
224
- readonly 'icon-primary-active'?: any;
225
- readonly 'icon-primary-hover'?: any;
226
- readonly 'icon-primary-inverted'?: any;
227
- readonly 'icon-primary-selected'?: any;
228
- readonly 'icon-success'?: any;
229
- readonly 'icon-success-inverted'?: any;
230
- readonly 'icon-warning'?: any;
231
- readonly 'icon-warning-prominent'?: any;
232
- readonly 'border-danger'?: any;
233
- readonly 'border-danger-active'?: any;
234
- readonly 'border-danger-hover'?: any;
235
- readonly 'border-focus-inner'?: any;
236
- readonly 'border-focus-middle'?: any;
237
- readonly 'border-focus-outer'?: any;
238
- readonly 'border-neutrals'?: any;
239
- readonly 'border-neutrals-active'?: any;
240
- readonly 'border-neutrals-controls'?: any;
241
- readonly 'border-neutrals-controls-disabled'?: any;
242
- readonly 'border-neutrals-disabled'?: any;
243
- readonly 'border-neutrals-hover'?: any;
244
- readonly 'border-neutrals-inverted'?: any;
245
- readonly 'border-neutrals-subtle'?: any;
246
- readonly 'border-neutrals-text-subtle'?: any;
247
- readonly 'border-neutrals-text-subtle-active'?: any;
248
- readonly 'border-neutrals-text-subtle-hover'?: any;
249
- readonly 'border-primary'?: any;
250
- readonly 'border-primary-active'?: any;
251
- readonly 'border-primary-hover'?: any;
252
- readonly 'border-primary-inverted'?: any;
253
- readonly 'border-success'?: any;
254
- readonly 'border-warning'?: any;
160
+ "background-alpha-active"?: any;
161
+ "background-alpha-hover"?: any;
162
+ "background-danger-prominent"?: any;
163
+ "background-danger-prominent-active"?: any;
164
+ "background-danger-prominent-hover"?: any;
165
+ "background-danger-subtle"?: any;
166
+ "background-danger-subtle-active"?: any;
167
+ "background-danger-subtle-hover"?: any;
168
+ "background-neutrals"?: any;
169
+ "background-neutrals-active"?: any;
170
+ "background-neutrals-container"?: any;
171
+ "background-neutrals-controls-disabled"?: any;
172
+ "background-neutrals-disabled"?: any;
173
+ "background-neutrals-hover"?: any;
174
+ "background-neutrals-inactive"?: any;
175
+ "background-neutrals-inactive-hover"?: any;
176
+ "background-neutrals-inverted"?: any;
177
+ "background-neutrals-inverted-subtle"?: any;
178
+ "background-neutrals-page"?: any;
179
+ "background-neutrals-page-subtle"?: any;
180
+ "background-neutrals-scrolls"?: any;
181
+ "background-neutrals-scrolls-hover"?: any;
182
+ "background-neutrals-subtle"?: any;
183
+ "background-neutrals-subtle-active"?: any;
184
+ "background-neutrals-subtle-hover"?: any;
185
+ "background-primary-prominent"?: any;
186
+ "background-primary-prominent-active"?: any;
187
+ "background-primary-prominent-hover"?: any;
188
+ "background-primary-prominent-selected"?: any;
189
+ "background-primary-subtle"?: any;
190
+ "background-primary-subtle-active"?: any;
191
+ "background-primary-subtle-hover"?: any;
192
+ "background-primary-subtle-selected"?: any;
193
+ "background-success"?: any;
194
+ "background-warning-prominent"?: any;
195
+ "background-warning-subtle"?: any;
196
+ "border-danger"?: any;
197
+ "border-danger-active"?: any;
198
+ "border-danger-hover"?: any;
199
+ "border-focus-inner"?: any;
200
+ "border-focus-middle"?: any;
201
+ "border-focus-outer"?: any;
202
+ "border-neutrals"?: any;
203
+ "border-neutrals-active"?: any;
204
+ "border-neutrals-controls"?: any;
205
+ "border-neutrals-controls-disabled"?: any;
206
+ "border-neutrals-disabled"?: any;
207
+ "border-neutrals-hover"?: any;
208
+ "border-neutrals-inverted"?: any;
209
+ "border-neutrals-subtle"?: any;
210
+ "border-neutrals-text"?: any;
211
+ "border-neutrals-text-active"?: any;
212
+ "border-neutrals-text-hover"?: any;
213
+ "border-neutrals-text-subtle"?: any;
214
+ "border-neutrals-text-subtle-active"?: any;
215
+ "border-neutrals-text-subtle-hover"?: any;
216
+ "border-neutrals-transparent"?: any;
217
+ "border-primary"?: any;
218
+ "border-primary-active"?: any;
219
+ "border-primary-hover"?: any;
220
+ "border-primary-inverted"?: any;
221
+ "border-success"?: any;
222
+ "border-warning"?: any;
223
+ "icon-danger"?: any;
224
+ "icon-danger-active"?: any;
225
+ "icon-danger-hover"?: any;
226
+ "icon-danger-inverted"?: any;
227
+ "icon-neutrals"?: any;
228
+ "icon-neutrals-disabled"?: any;
229
+ "icon-neutrals-inactive"?: any;
230
+ "icon-neutrals-inactive-hover"?: any;
231
+ "icon-neutrals-inverted"?: any;
232
+ "icon-neutrals-search"?: any;
233
+ "icon-neutrals-subtle"?: any;
234
+ "icon-neutrals-text"?: any;
235
+ "icon-primary"?: any;
236
+ "icon-primary-active"?: any;
237
+ "icon-primary-hover"?: any;
238
+ "icon-primary-inverted"?: any;
239
+ "icon-primary-selected"?: any;
240
+ "icon-success"?: any;
241
+ "icon-success-inverted"?: any;
242
+ "icon-warning"?: any;
243
+ "icon-warning-prominent"?: any;
244
+ "text-danger"?: any;
245
+ "text-danger-active"?: any;
246
+ "text-danger-hover"?: any;
247
+ "text-danger-inverted"?: any;
248
+ "text-neutrals"?: any;
249
+ "text-neutrals-active"?: any;
250
+ "text-neutrals-disabled"?: any;
251
+ "text-neutrals-hover"?: any;
252
+ "text-neutrals-inverted"?: any;
253
+ "text-neutrals-placeholder"?: any;
254
+ "text-neutrals-placeholder-only"?: any;
255
+ "text-neutrals-subtle"?: any;
256
+ "text-neutrals-subtle-active"?: any;
257
+ "text-neutrals-subtle-hover"?: any;
258
+ "text-primary"?: any;
259
+ "text-primary-active"?: any;
260
+ "text-primary-hover"?: any;
261
+ "text-primary-inverted"?: any;
262
+ "text-primary-inverted-subtle"?: any;
263
+ "text-primary-selected"?: any;
264
+ "text-success"?: any;
265
+ "text-warning"?: any;
255
266
  };
256
267
  'font-sizes': {
257
268
  readonly 150: "0.75rem";
@@ -537,6 +548,6 @@ declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> &
537
548
  }> | undefined;
538
549
  }> & {
539
550
  children?: React.ReactNode;
540
- } & _mirohq_design_system_stitches.CustomStylesProps, "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "children" | "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" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps> & React.RefAttributes<HTMLSpanElement>, "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "children" | "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" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps> & React.RefAttributes<HTMLSpanElement>>;
551
+ } & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
541
552
 
542
553
  export { Thumb, styles };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-switch",
3
- "version": "0.1.1",
3
+ "version": "0.1.3-themes.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-primitive": "^1.1.0",
30
- "@mirohq/design-system-stitches": "^2.3.3"
30
+ "@mirohq/design-system-stitches": "^2.3.5-themes.0"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "rollup -c ../../../../rollup.config.js",