@mirohq/design-system-switch 4.1.3-aria-label-icon-button.2 → 4.2.0-fix-stitches-types.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 (5) hide show
  1. package/dist/main.js +4 -10
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js.map +1 -1
  4. package/dist/types.d.ts +27 -7
  5. package/package.json +6 -6
package/dist/main.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var jsxRuntime = require('react/jsx-runtime');
6
4
  var React = require('react');
7
5
  var designSystemUtils = require('@mirohq/design-system-utils');
@@ -10,10 +8,7 @@ var designSystemStitches = require('@mirohq/design-system-stitches');
10
8
  var RadixSwitch = require('@radix-ui/react-switch');
11
9
  var designSystemStyles = require('@mirohq/design-system-styles');
12
10
 
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- function _interopNamespace(e) {
16
- if (e && e.__esModule) return e;
11
+ function _interopNamespaceDefault(e) {
17
12
  var n = Object.create(null);
18
13
  if (e) {
19
14
  Object.keys(e).forEach(function (k) {
@@ -26,12 +21,11 @@ function _interopNamespace(e) {
26
21
  }
27
22
  });
28
23
  }
29
- n["default"] = e;
24
+ n.default = e;
30
25
  return Object.freeze(n);
31
26
  }
32
27
 
33
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
34
- var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
28
+ var RadixSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixSwitch);
35
29
 
36
30
  const StyledSwitch = designSystemStitches.styled(RadixSwitch__namespace.Root, {
37
31
  ...designSystemBaseSwitch.styles.default,
@@ -59,7 +53,7 @@ const StyledSwitch = designSystemStitches.styled(RadixSwitch__namespace.Root, {
59
53
  }
60
54
  });
61
55
 
62
- const Switch = React__default["default"].forwardRef(
56
+ const Switch = React.forwardRef(
63
57
  ({
64
58
  size = "medium",
65
59
  disabled = false,
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 { 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',\n }),\n\n '&[aria-checked=true]': styles.checked,\n\n '&:hover:not([disabled]):not([aria-disabled=true])': {\n ...styles.hovered,\n\n '&[aria-checked=true]': 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, booleanishAttrValue } 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 * @default 'medium'\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 * @default false\n */\n disabled?: boolean\n\n /**\n * Indicates that the user must check the switch.\n * @default false\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 data-form-element='switch'\n size={size}\n disabled={disabled}\n required={required}\n aria-disabled={ariaDisabled}\n aria-required={undefined}\n data-required={booleanishAttrValue(required)}\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","booleanishAttrValue","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,QAAA;AAAA,GACZ,CAAA;AAAA,EAED,wBAAwBD,6BAAO,CAAA,OAAA;AAAA,EAE/B,mDAAqD,EAAA;AAAA,IACnD,GAAGA,6BAAO,CAAA,OAAA;AAAA,IAEV,wBAAwBA,6BAAO,CAAA,cAAA;AAAA,GACjC;AAAA,EACA,sCAAsCA,6BAAO,CAAA,QAAA;AAAA,EAE7C,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;;AC+BM,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,mBAAkB,EAAA,QAAA;AAAA,MAClB,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAe,EAAA,YAAA;AAAA,MACf,eAAe,EAAA,KAAA,CAAA;AAAA,MACf,eAAA,EAAeC,sCAAoB,QAAQ,CAAA;AAAA,MAC3C,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;;;;"}
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',\n }),\n\n '&[aria-checked=true]': styles.checked,\n\n '&:hover:not([disabled]):not([aria-disabled=true])': {\n ...styles.hovered,\n\n '&[aria-checked=true]': 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, booleanishAttrValue } 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 * @default 'medium'\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 * @default false\n */\n disabled?: boolean\n\n /**\n * Indicates that the user must check the switch.\n * @default false\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 data-form-element='switch'\n size={size}\n disabled={disabled}\n required={required}\n aria-disabled={ariaDisabled}\n aria-required={undefined}\n data-required={booleanishAttrValue(required)}\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","jsx","booleanishAttrValue","booleanify","Thumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,MAAM,YAAA,GAAeA,2BAAA,CAAOC,sBAAA,CAAY,IAAA,EAAM;AAAA,EACnD,GAAGC,6BAAA,CAAO,OAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EAER,GAAGC,yBAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EAED,wBAAwBD,6BAAA,CAAO,OAAA;AAAA,EAE/B,mDAAA,EAAqD;AAAA,IACnD,GAAGA,6BAAA,CAAO,OAAA;AAAA,IAEV,wBAAwBA,6BAAA,CAAO;AAAA,GACjC;AAAA,EACA,sCAAsCA,6BAAA,CAAO,QAAA;AAAA,EAE7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ;AAAA;AACV;AACF;AAEJ,CAAC,CAAA;;AC+BM,MAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAI1B,CACE;AAAA,IACE,IAAA,GAAO,QAAA;AAAA,IACP,QAAA,GAAW,KAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,EAAiB,YAAA;AAAA,IACjB,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,qBAEAE,cAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA,EAAK,UAAA;AAAA,MACL,mBAAA,EAAkB,QAAA;AAAA,MAClB,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA,EAAe,YAAA;AAAA,MACf,eAAA,EAAe,MAAA;AAAA,MACf,eAAA,EAAeC,sCAAoB,QAAQ,CAAA;AAAA,MAC3C,SAAS,CAAA,CAAA,KAAK;AACZ,QAAA,IAAIC,4BAAA,CAAW,YAAY,CAAA,EAAG;AAC5B,UAAA,CAAA,CAAE,cAAA,EAAe;AAAA,QACnB,CAAA,MAAO;AACL,UAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,CAAA,CAAA;AAAA,QACZ;AAAA,MACF,CAAA;AAAA,MACA,iBAAiB,CAAA,KAAA,KAAS;AACxB,QAAA,IAAI,KAAA,EAAO;AACT,UAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,EAAA;AAAA,QACF,CAAA,MAAO;AACL,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,EAAA;AAAA,QACF;AAAA,MACF,CAAA;AAAA,MAEA,yCAACC,4BAAA,EAAA,EAAM;AAAA;AAAA;AAGb;;;;"}
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 { 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',\n }),\n\n '&[aria-checked=true]': styles.checked,\n\n '&:hover:not([disabled]):not([aria-disabled=true])': {\n ...styles.hovered,\n\n '&[aria-checked=true]': 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, booleanishAttrValue } 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 * @default 'medium'\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 * @default false\n */\n disabled?: boolean\n\n /**\n * Indicates that the user must check the switch.\n * @default false\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 data-form-element='switch'\n size={size}\n disabled={disabled}\n required={required}\n aria-disabled={ariaDisabled}\n aria-required={undefined}\n data-required={booleanishAttrValue(required)}\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,QAAA;AAAA,GACZ,CAAA;AAAA,EAED,wBAAwB,MAAO,CAAA,OAAA;AAAA,EAE/B,mDAAqD,EAAA;AAAA,IACnD,GAAG,MAAO,CAAA,OAAA;AAAA,IAEV,wBAAwB,MAAO,CAAA,cAAA;AAAA,GACjC;AAAA,EACA,sCAAsC,MAAO,CAAA,QAAA;AAAA,EAE7C,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;;AC+BM,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,mBAAkB,EAAA,QAAA;AAAA,MAClB,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAe,EAAA,YAAA;AAAA,MACf,eAAe,EAAA,KAAA,CAAA;AAAA,MACf,eAAA,EAAe,oBAAoB,QAAQ,CAAA;AAAA,MAC3C,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;;;;"}
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',\n }),\n\n '&[aria-checked=true]': styles.checked,\n\n '&:hover:not([disabled]):not([aria-disabled=true])': {\n ...styles.hovered,\n\n '&[aria-checked=true]': 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, booleanishAttrValue } 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 * @default 'medium'\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 * @default false\n */\n disabled?: boolean\n\n /**\n * Indicates that the user must check the switch.\n * @default false\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 data-form-element='switch'\n size={size}\n disabled={disabled}\n required={required}\n aria-disabled={ariaDisabled}\n aria-required={undefined}\n data-required={booleanishAttrValue(required)}\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":";;;;;;;;AAMO,MAAM,YAAA,GAAe,MAAA,CAAO,WAAA,CAAY,IAAA,EAAM;AAAA,EACnD,GAAG,MAAA,CAAO,OAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EAER,GAAG,MAAM,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EAED,wBAAwB,MAAA,CAAO,OAAA;AAAA,EAE/B,mDAAA,EAAqD;AAAA,IACnD,GAAG,MAAA,CAAO,OAAA;AAAA,IAEV,wBAAwB,MAAA,CAAO;AAAA,GACjC;AAAA,EACA,sCAAsC,MAAA,CAAO,QAAA;AAAA,EAE7C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,KAAA,EAAO;AAAA,QACL,KAAA,EAAO,IAAA;AAAA,QACP,MAAA,EAAQ;AAAA;AACV;AACF;AAEJ,CAAC,CAAA;;AC+BM,MAAM,SAAS,KAAA,CAAM,UAAA;AAAA,EAI1B,CACE;AAAA,IACE,IAAA,GAAO,QAAA;AAAA,IACP,QAAA,GAAW,KAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,eAAA,EAAiB,YAAA;AAAA,IACjB,SAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,UAAA,qBAEA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA,EAAK,UAAA;AAAA,MACL,mBAAA,EAAkB,QAAA;AAAA,MAClB,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA,EAAe,YAAA;AAAA,MACf,eAAA,EAAe,MAAA;AAAA,MACf,eAAA,EAAe,oBAAoB,QAAQ,CAAA;AAAA,MAC3C,SAAS,CAAA,CAAA,KAAK;AACZ,QAAA,IAAI,UAAA,CAAW,YAAY,CAAA,EAAG;AAC5B,UAAA,CAAA,CAAE,cAAA,EAAe;AAAA,QACnB,CAAA,MAAO;AACL,UAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,CAAA,CAAA;AAAA,QACZ;AAAA,MACF,CAAA;AAAA,MACA,iBAAiB,CAAA,KAAA,KAAS;AACxB,QAAA,IAAI,KAAA,EAAO;AACT,UAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,EAAA;AAAA,QACF,CAAA,MAAO;AACL,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,EAAA;AAAA,QACF;AAAA,MACF,CAAA;AAAA,MAEA,8BAAC,KAAA,EAAA,EAAM;AAAA;AAAA;AAGb;;;;"}
package/dist/types.d.ts CHANGED
@@ -1,14 +1,33 @@
1
- import * as react from 'react';
2
- import react__default from 'react';
1
+ import * as React from 'react';
2
+ import React__default from 'react';
3
3
  import { Booleanish } from '@mirohq/design-system-types';
4
- import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
5
4
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
6
5
  import { StrictComponentProps } from '@mirohq/design-system-stitches';
7
6
  import * as RadixSwitch from '@radix-ui/react-switch';
8
7
 
9
- declare const StyledSwitch: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<RadixSwitch.SwitchProps & react.RefAttributes<HTMLButtonElement>>>, "size"> & _stitches_react_types_styled_component.TransformProps<{
8
+ /* Utilities */
9
+ /* ========================================================================== */
10
+
11
+ /** Returns a string with the given prefix followed by the given values. */
12
+ type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
13
+
14
+ type TransformProps<Props, Media> = {
15
+ [K in keyof Props]: (
16
+ | Props[K]
17
+ | (
18
+ & {
19
+ [KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
20
+ }
21
+ & {
22
+ [KMedia in string]: Props[K]
23
+ }
24
+ )
25
+ )
26
+ }
27
+
28
+ declare const StyledSwitch: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>>>, "size"> & TransformProps<{
10
29
  size?: "medium" | "large" | undefined;
11
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<RadixSwitch.SwitchProps & react.RefAttributes<HTMLButtonElement>>, {
30
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>>, {
12
31
  size?: "medium" | "large" | undefined;
13
32
  }, {}>;
14
33
  type StyledSwitchProps = StrictComponentProps<typeof StyledSwitch>;
@@ -60,6 +79,7 @@ interface SwitchProps extends StyledSwitchProps {
60
79
  */
61
80
  'aria-disabled'?: Booleanish;
62
81
  }
63
- declare const Switch: react__default.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
82
+ declare const Switch: React__default.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
64
83
 
65
- export { Switch, SwitchProps };
84
+ export { Switch };
85
+ export type { SwitchProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-switch",
3
- "version": "4.1.3-aria-label-icon-button.2",
3
+ "version": "4.2.0-fix-stitches-types.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -28,11 +28,11 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@radix-ui/react-switch": "^1.0.0",
31
- "@mirohq/design-system-base-switch": "^1.1.2-aria-label-icon-button.2",
32
- "@mirohq/design-system-stitches": "^3.1.2-aria-label-icon-button.2",
33
- "@mirohq/design-system-styles": "^3.0.1-aria-label-icon-button.2",
34
- "@mirohq/design-system-types": "^1.0.1-aria-label-icon-button.2",
35
- "@mirohq/design-system-utils": "^1.2.1-aria-label-icon-button.2"
31
+ "@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.0",
32
+ "@mirohq/design-system-base-switch": "^1.2.0-fix-stitches-types.0",
33
+ "@mirohq/design-system-styles": "^3.1.0-fix-stitches-types.0",
34
+ "@mirohq/design-system-types": "^1.0.1",
35
+ "@mirohq/design-system-utils": "^1.2.1"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "rollup -c ../../../rollup.config.js",