@mirai/ui 1.0.4 → 1.0.7

package/build/primitives/Layer/helpers/getLayerPosition.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLayerPosition = void 0;
+
+var getLayerPosition = function getLayerPosition() {
+  var componentLayout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var contentLayout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var device = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _componentLayout$left = componentLayout.left,
+      componentLeft = _componentLayout$left === void 0 ? 0 : _componentLayout$left,
+      _componentLayout$top = componentLayout.top,
+      componentTop = _componentLayout$top === void 0 ? 0 : _componentLayout$top,
+      _componentLayout$widt = componentLayout.width,
+      componentWidth = _componentLayout$widt === void 0 ? 0 : _componentLayout$widt,
+      _componentLayout$heig = componentLayout.height,
+      componentHeight = _componentLayout$heig === void 0 ? 0 : _componentLayout$heig;
+  var _contentLayout$width = contentLayout.width,
+      contentWidth = _contentLayout$width === void 0 ? 0 : _contentLayout$width,
+      _contentLayout$height = contentLayout.height,
+      contentHeight = _contentLayout$height === void 0 ? 0 : _contentLayout$height;
+  var _device$height = device.height,
+      height = _device$height === void 0 ? 0 : _device$height,
+      _device$width = device.width,
+      width = _device$width === void 0 ? 0 : _device$width;
+  var top = componentTop + componentHeight;
+  var gapTop = componentTop;
+  var gapBottom = height - top;
+  if (gapTop > gapBottom) top = componentTop - contentHeight;
+  var left = componentLeft;
+  var gapLeft = componentLeft + componentWidth;
+  var gapRight = width - componentLeft;
+  if (gapLeft > gapRight) left = componentLeft - contentWidth + componentWidth;
+  return {
+    left: left,
+    top: top
+  };
+};
+
+exports.getLayerPosition = getLayerPosition;
+//# sourceMappingURL=getLayerPosition.js.map

package/build/primitives/Layer/helpers/getLayerPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/primitives/Layer/helpers/getLayerPosition.js"],"names":["getLayerPosition","componentLayout","contentLayout","device","left","componentLeft","top","componentTop","width","componentWidth","height","componentHeight","contentWidth","contentHeight","gapTop","gapBottom","gapLeft","gapRight"],"mappings":";;;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAA2D;AAAA,MAA1DC,eAA0D,uEAAxC,EAAwC;AAAA,MAApCC,aAAoC,uEAApB,EAAoB;AAAA,MAAhBC,MAAgB,uEAAP,EAAO;AACzF,8BAKIF,eALJ,CACEG,IADF;AAAA,MACQC,aADR,sCACwB,CADxB;AAAA,6BAKIJ,eALJ,CAEEK,GAFF;AAAA,MAEOC,YAFP,qCAEsB,CAFtB;AAAA,8BAKIN,eALJ,CAGEO,KAHF;AAAA,MAGSC,cAHT,sCAG0B,CAH1B;AAAA,8BAKIR,eALJ,CAIES,MAJF;AAAA,MAIUC,eAJV,sCAI4B,CAJ5B;AAMA,6BAA+DT,aAA/D,CAAQM,KAAR;AAAA,MAAeI,YAAf,qCAA8B,CAA9B;AAAA,8BAA+DV,aAA/D,CAAiCQ,MAAjC;AAAA,MAAyCG,aAAzC,sCAAyD,CAAzD;AACA,uBAAkCV,MAAlC,CAAQO,MAAR;AAAA,MAAQA,MAAR,+BAAiB,CAAjB;AAAA,sBAAkCP,MAAlC,CAAoBK,KAApB;AAAA,MAAoBA,KAApB,8BAA4B,CAA5B;AAEA,MAAIF,GAAG,GAAGC,YAAY,GAAGI,eAAzB;AACA,MAAMG,MAAM,GAAGP,YAAf;AACA,MAAMQ,SAAS,GAAGL,MAAM,GAAGJ,GAA3B;AACA,MAAIQ,MAAM,GAAGC,SAAb,EAAwBT,GAAG,GAAGC,YAAY,GAAGM,aAArB;AAExB,MAAIT,IAAI,GAAGC,aAAX;AACA,MAAMW,OAAO,GAAGX,aAAa,GAAGI,cAAhC;AACA,MAAMQ,QAAQ,GAAGT,KAAK,GAAGH,aAAzB;AACA,MAAIW,OAAO,GAAGC,QAAd,EAAwBb,IAAI,GAAGC,aAAa,GAAGO,YAAhB,GAA+BH,cAAtC;AAExB,SAAO;AAAEL,IAAAA,IAAI,EAAJA,IAAF;AAAQE,IAAAA,GAAG,EAAHA;AAAR,GAAP;AACD,CArBM","sourcesContent":["export const getLayerPosition = (componentLayout = {}, contentLayout = {}, device = {}) => {\n  const {\n    left: componentLeft = 0,\n    top: componentTop = 0,\n    width: componentWidth = 0,\n    height: componentHeight = 0,\n  } = componentLayout;\n  const { width: contentWidth = 0, height: contentHeight = 0 } = contentLayout;\n  const { height = 0, width = 0 } = device;\n\n  let top = componentTop + componentHeight;\n  const gapTop = componentTop;\n  const gapBottom = height - top;\n  if (gapTop > gapBottom) top = componentTop - contentHeight;\n\n  let left = componentLeft;\n  const gapLeft = componentLeft + componentWidth;\n  const gapRight = width - componentLeft;\n  if (gapLeft > gapRight) left = componentLeft - contentWidth + componentWidth;\n\n  return { left, top };\n};\n"],"file":"getLayerPosition.js"}

package/build/primitives/Layer/helpers/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getElementLayout = require("./getElementLayout");
+
+Object.keys(_getElementLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getElementLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getElementLayout[key];
+    }
+  });
+});
+
+var _getLayerPosition = require("./getLayerPosition");
+
+Object.keys(_getLayerPosition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getLayerPosition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getLayerPosition[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Layer/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/primitives/Layer/helpers/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './getElementLayout';\nexport * from './getLayerPosition';\n"],"file":"index.js"}

package/build/primitives/Layer/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Layer = require("./Layer");
+
+Object.keys(_Layer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Layer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Layer[key];
+    }
+  });
+});
+
+var _LayerContent = require("./LayerContent");
+
+Object.keys(_LayerContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LayerContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LayerContent[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Layer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Layer/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Layer';\nexport * from './LayerContent';\n"],"file":"index.js"}

package/build/primitives/Radio/Radio.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
+
+var _excluded = ["checked", "disabled", "name", "value", "onChange"];
+
+var Radio = function Radio(_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled,
+      name = _ref.name,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      onChange = _ref.onChange,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var handleChange = function handleChange(event) {
+    onChange && onChange(value, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers.styles)(_RadioModule.default.radio, others.className)
+  }, /*#__PURE__*/_react.default.createElement("input", Object.assign({}, others, {
+    checked: checked,
+    disabled: disabled,
+    name: name,
+    type: "radio",
+    value: value,
+    onChange: !disabled ? handleChange : undefined
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: _RadioModule.default.checkmark
+  }));
+};
+
+exports.Radio = Radio;
+Radio.displayName = 'Primitive:Radio';
+//# sourceMappingURL=Radio.js.map

package/build/primitives/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Radio/Radio.jsx"],"names":["Radio","checked","disabled","name","value","onChange","others","handleChange","event","style","radio","className","undefined","checkmark","displayName"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAkE;AAAA,MAA/DC,OAA+D,QAA/DA,OAA+D;AAAA,MAAtDC,QAAsD,QAAtDA,QAAsD;AAAA,MAA5CC,IAA4C,QAA5CA,IAA4C;AAAA,wBAAtCC,KAAsC;AAAA,MAAtCA,KAAsC,2BAA9B,EAA8B;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAbC,MAAa;;AAC9E,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;AAC9BH,IAAAA,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQI,KAAR,CAApB;AACD,GAFD;;AAIA,sBACE;AAAK,IAAA,SAAS,EAAE,qBAAOC,qBAAMC,KAAb,EAAoBJ,MAAM,CAACK,SAA3B;AAAhB,kBACE,wDACML,MADN;AAEE,IAAA,OAAO,EAAEL,OAFX;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,IAAI,EAAC,OALP;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,QAAQ,EAAE,CAACF,QAAD,GAAYK,YAAZ,GAA2BK;AAPvC,KADF,eAUE;AAAM,IAAA,SAAS,EAAEH,qBAAMI;AAAvB,IAVF,CADF;AAcD,CAnBD;;;AAqBAb,KAAK,CAACc,WAAN,GAAoB,iBAApB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Radio.module.css';\n\nconst Radio = ({ checked, disabled, name, value = '', onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(value, event);\n  };\n\n  return (\n    <div className={styles(style.radio, others.className)}>\n      <input\n        {...others}\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        type=\"radio\"\n        value={value}\n        onChange={!disabled ? handleChange : undefined}\n      />\n      <span className={style.checkmark} />\n    </div>\n  );\n};\n\nRadio.displayName = 'Primitive:Radio';\n\nRadio.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { Radio };\n"],"file":"Radio.js"}

package/build/primitives/Radio/Radio.module.css

@@ -0,0 +1,59 @@
+:root {
+  --mirai-ui-checkbox-base: var(--mirai-ui-base);
+  --mirai-ui-radio-border-color: var(--mirai-ui-lighten);
+  --mirai-ui-radio-checked-color: var(--mirai-ui-accent);
+  --mirai-ui-radio-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-radio-size: var(--mirai-ui-space-L);
+}
+
+.radio {
+  cursor: pointer;
+  position: relative;
+  height: var(--mirai-ui-radio-size);
+  width: var(--mirai-ui-radio-size);
+}
+
+.radio input {
+  background-color: var(--mirai-ui-radio-base);
+  border: 2px solid var(--mirai-ui-radio-border-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: var(--mirai-ui-radio-size);
+  margin: 0;
+  outline: none;
+  user-select: none;
+  transition: border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-radio-size);
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.radio .checkmark {
+  border-radius: 50%;
+  margin: calc(var(--mirai-ui-radio-size) / 4);
+  height: calc(var(--mirai-ui-radio-size) / 2);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: calc(var(--mirai-ui-radio-size) / 2);
+}
+
+.radio input:disabled {
+  border-color: var(--mirai-ui-checkbox-disabled);
+}
+
+.radio input:checked:not(:disabled) {
+  border-color: var(--mirai-ui-radio-checked-color);
+}
+
+.radio input:checked:disabled ~ .checkmark {
+  background-color: var(--mirai-ui-checkbox-disabled);
+}
+
+.radio input:checked:not(:disabled) ~ .checkmark {
+  background-color: var(--mirai-ui-radio-checked-color);
+}

package/build/primitives/Radio/__tests__/__snapshots__/Radio.test.js.snap

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<Radio> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="radio mirai"
+  >
+    <input
+      class="mirai"
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:checked && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      checked=""
+      disabled=""
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:checked 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      checked=""
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      disabled=""
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:value 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      name="name"
+      type="radio"
+      value="value"
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> render 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      data-testid="mirai"
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;

package/build/primitives/Radio/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Radio = require("./Radio");
+
+Object.keys(_Radio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Radio[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Radio[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Radio/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Radio';\n"],"file":"index.js"}

package/build/primitives/Select/Select.module.css

@@ -10,6 +10,7 @@
   outline: none;
   user-select: none;
 
+  appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 }

package/build/primitives/Switch/Switch.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Switch = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
+
+var _excluded = ["checked", "disabled", "name", "onChange"];
+
+var Switch = function Switch(_ref) {
+  var _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      disabled = _ref.disabled,
+      name = _ref.name,
+      onChange = _ref.onChange,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var handleChange = function handleChange(event) {
+    onChange && onChange(!checked, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, others, {
+    className: (0, _helpers.styles)(_SwitchModule.default.switch, others.className),
+    onClick: !disabled ? handleChange : undefined
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    checked: checked,
+    disabled: disabled,
+    name: name,
+    type: "checkbox",
+    className: _SwitchModule.default.input
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _SwitchModule.default.area
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _SwitchModule.default.toggle
+  })));
+};
+
+exports.Switch = Switch;
+Switch.displayName = 'Primitive:Switch';
+//# sourceMappingURL=Switch.js.map

package/build/primitives/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Switch/Switch.jsx"],"names":["Switch","checked","disabled","name","onChange","others","handleChange","event","style","switch","className","undefined","input","area","toggle","displayName"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAA8D;AAAA,0BAA3DC,OAA2D;AAAA,MAA3DA,OAA2D,6BAAjD,KAAiD;AAAA,MAA1CC,QAA0C,QAA1CA,QAA0C;AAAA,MAAhCC,IAAgC,QAAhCA,IAAgC;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAbC,MAAa;;AAC3E,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;AAC9BH,IAAAA,QAAQ,IAAIA,QAAQ,CAAC,CAACH,OAAF,EAAWM,KAAX,CAApB;AACD,GAFD;;AAIA,sBACE,sDAASF,MAAT;AAAiB,IAAA,SAAS,EAAE,qBAAOG,sBAAMC,MAAb,EAAqBJ,MAAM,CAACK,SAA5B,CAA5B;AAAoE,IAAA,OAAO,EAAE,CAACR,QAAD,GAAYI,YAAZ,GAA2BK;AAAxG,mBACE;AAAO,IAAA,OAAO,EAAEV,OAAhB;AAAyB,IAAA,QAAQ,EAAEC,QAAnC;AAA6C,IAAA,IAAI,EAAEC,IAAnD;AAAyD,IAAA,IAAI,EAAC,UAA9D;AAAyE,IAAA,SAAS,EAAEK,sBAAMI;AAA1F,IADF,eAEE;AAAK,IAAA,SAAS,EAAEJ,sBAAMK;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEL,sBAAMM;AAAvB,IADF,CAFF,CADF;AAQD,CAbD;;;AAeAd,MAAM,CAACe,WAAP,GAAqB,kBAArB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked = false, disabled, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <div {...others} className={styles(style.switch, others.className)} onClick={!disabled ? handleChange : undefined}>\n      <input checked={checked} disabled={disabled} name={name} type=\"checkbox\" className={style.input} />\n      <div className={style.area}>\n        <span className={style.toggle}></span>\n      </div>\n    </div>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"file":"Switch.js"}

package/build/primitives/Switch/Switch.module.css

@@ -0,0 +1,57 @@
+:root {
+  --mirai-ui-switch-border: 2px;
+  --mirai-ui-switch-radius: var(--mirai-ui-space-L);
+  --mirai-ui-switch-size: var(--mirai-ui-space-L);
+}
+
+.switch {
+  align-self: flex-start;
+  box-sizing: border-box;
+}
+
+.switch .input {
+  height: 0;
+  pointer-events: none;
+  visibility: hidden;
+  width: 0;
+  position: absolute;
+  outline: none;
+  user-select: none;
+}
+
+.switch .area {
+  align-items: center;
+  justify-content: center;
+  background-color: var(--mirai-ui-lighten);
+  border-radius: var(--mirai-ui-switch-radius);
+  cursor: pointer;
+  display: flex;
+  height: calc(var(--mirai-ui-switch-size) + calc(var(--mirai-ui-switch-border) * 2));
+  position: relative;
+  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: calc(var(--mirai-ui-switch-size) * 2);
+}
+
+.switch .toggle {
+  background-color: var(--mirai-ui-base);
+  border-radius: calc(var(--mirai-ui-switch-radius) - var(--mirai-ui-switch-border));
+  height: var(--mirai-ui-switch-size);
+  left: var(--mirai-ui-switch-border);
+  position: absolute;
+  top: var(--mirai-ui-switch-border);
+  transition: var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-switch-size);
+}
+
+.switch .input:disabled + .area {
+  background-color: var(--mirai-ui-lighten);
+}
+
+.switch .input:checked + .area {
+  background-color: var(--mirai-ui-accent);
+}
+
+.switch .input:checked + .area .toggle {
+  left: calc(100% - var(--mirai-ui-switch-border));
+  transform: translateX(-100%);
+}

package/build/primitives/Switch/__tests__/__snapshots__/Switch.test.js.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<Switch> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="switch mirai"
+  >
+    <input
+      class="input"
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> prop:checked 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      checked=""
+      class="input"
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> prop:disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      class="input"
+      disabled=""
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> render 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      class="input"
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+    data-testid="mirai"
+  >
+    <input
+      class="input"
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/build/primitives/Switch/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Switch = require("./Switch.jsx");
+
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Switch[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Switch/index.js"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Switch.jsx';\n"],"file":"index.js"}