@mirohq/design-system-base-switch 0.1.0 → 0.1.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 +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 +2 -2
  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;
@@ -537,6 +537,6 @@ declare const Thumb: React.ForwardRefExoticComponent<Pick<Pick<Omit<{}, never> &
537
537
  }> | undefined;
538
538
  }> & {
539
539
  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>>;
540
+ } & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
541
541
 
542
542
  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.0",
3
+ "version": "0.1.2",
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.2"
30
+ "@mirohq/design-system-stitches": "^2.3.4"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "rollup -c ../../../../rollup.config.js",