@mirai/ui 1.0.3 → 1.0.6

package/build/components/Table/helpers/index.js

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

package/build/components/Table/helpers/index.js.map

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

package/build/components/Table/helpers/select.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.select = void 0;
+
+var select = function select() {
+  var dataSource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      search = _ref.search,
+      _ref$sort = _ref.sort,
+      sort = _ref$sort === void 0 ? {} : _ref$sort;
+
+  var values = dataSource.filter(function (row) {
+    return search ? JSON.stringify(row).includes(search) : true;
+  });
+  Object.keys(sort).forEach(function (key) {
+    var order = sort[key] ? 1 : -1;
+    values.sort(function (a, b) {
+      return a[key] >= b[key] ? 1 * order : -1 * order;
+    });
+  });
+  return values;
+};
+
+exports.select = select;
+//# sourceMappingURL=select.js.map

package/build/components/Table/helpers/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Table/helpers/select.js"],"names":["select","dataSource","search","sort","values","filter","row","JSON","stringify","includes","Object","keys","forEach","key","order","a","b"],"mappings":";;;;;;;AAAO,IAAMA,MAAM,GAAG,SAATA,MAAS,GAAiD;AAAA,MAAhDC,UAAgD,uEAAnC,EAAmC;;AAAA,iFAAP,EAAO;AAAA,MAA7BC,MAA6B,QAA7BA,MAA6B;AAAA,uBAArBC,IAAqB;AAAA,MAArBA,IAAqB,0BAAd,EAAc;;AACrE,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB,UAACC,GAAD;AAAA,WAAUJ,MAAM,GAAGK,IAAI,CAACC,SAAL,CAAeF,GAAf,EAAoBG,QAApB,CAA6BP,MAA7B,CAAH,GAA0C,IAA1D;AAAA,GAAlB,CAAf;AAEAQ,EAAAA,MAAM,CAACC,IAAP,CAAYR,IAAZ,EAAkBS,OAAlB,CAA0B,UAACC,GAAD,EAAS;AACjC,QAAMC,KAAK,GAAGX,IAAI,CAACU,GAAD,CAAJ,GAAY,CAAZ,GAAgB,CAAC,CAA/B;AAEAT,IAAAA,MAAM,CAACD,IAAP,CAAY,UAACY,CAAD,EAAIC,CAAJ;AAAA,aAAWD,CAAC,CAACF,GAAD,CAAD,IAAUG,CAAC,CAACH,GAAD,CAAX,GAAmB,IAAIC,KAAvB,GAA+B,CAAC,CAAD,GAAKA,KAA/C;AAAA,KAAZ;AACD,GAJD;AAMA,SAAOV,MAAP;AACD,CAVM","sourcesContent":["export const select = (dataSource = [], { search, sort = {} } = {}) => {\n  const values = dataSource.filter((row) => (search ? JSON.stringify(row).includes(search) : true));\n\n  Object.keys(sort).forEach((key) => {\n    const order = sort[key] ? 1 : -1;\n\n    values.sort((a, b) => (a[key] >= b[key] ? 1 * order : -1 * order));\n  });\n\n  return values;\n};\n"],"file":"select.js"}

package/build/components/Table/index.js

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

package/build/components/Table/index.js.map

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

package/build/components/index.js

@@ -56,6 +56,19 @@ Object.keys(_InputNumber).forEach(function (key) {
   });
 });
 
+var _InputOption = require("./InputOption");
+
+Object.keys(_InputOption).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputOption[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputOption[key];
+    }
+  });
+});
+
 var _InputSelect = require("./InputSelect");
 
 Object.keys(_InputSelect).forEach(function (key) {
@@ -94,4 +107,17 @@ Object.keys(_Modal).forEach(function (key) {
     }
   });
 });
+
+var _Table = require("./Table");
+
+Object.keys(_Table).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Table[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Table[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/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;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Modal';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/components/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;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './Button';\nexport * from './Calendar';\nexport * from './Form';\nexport * from './InputNumber';\nexport * from './InputOption';\nexport * from './InputSelect';\nexport * from './InputText';\nexport * from './Modal';\nexport * from './Table';\n"],"file":"index.js"}

package/build/primitives/Checkbox/Checkbox.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.css"));
+
+var _excluded = ["checked", "children", "disabled", "name", "value", "onChange"];
+
+var Checkbox = function Checkbox(_ref) {
+  var checked = _ref.checked,
+      children = _ref.children,
+      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) {
+    var _event$target = event.target,
+        value = _event$target.value,
+        checked = _event$target.checked;
+    onChange && onChange(value, checked, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers.styles)(_CheckboxModule.default.checkbox, others.className)
+  }, /*#__PURE__*/_react.default.createElement("input", Object.assign({}, others, {
+    checked: checked,
+    disabled: disabled,
+    name: name,
+    type: "checkbox",
+    value: value,
+    className: (0, _helpers.styles)(checked && _CheckboxModule.default.checked),
+    onChange: !disabled ? handleChange : undefined
+  })), children);
+};
+
+exports.Checkbox = Checkbox;
+Checkbox.displayName = 'Primitive:Checkbox';
+//# sourceMappingURL=Checkbox.js.map

package/build/primitives/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Checkbox/Checkbox.jsx"],"names":["Checkbox","checked","children","disabled","name","value","onChange","others","handleChange","event","target","style","checkbox","className","undefined","displayName"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAA4E;AAAA,MAAzEC,OAAyE,QAAzEA,OAAyE;AAAA,MAAhEC,QAAgE,QAAhEA,QAAgE;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;;AAC3F,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;AAC9B,wBAEIA,KAFJ,CACEC,MADF;AAAA,QACYL,KADZ,iBACYA,KADZ;AAAA,QACmBJ,OADnB,iBACmBA,OADnB;AAIAK,IAAAA,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQJ,OAAR,EAAiBQ,KAAjB,CAApB;AACD,GAND;;AAQA,sBACE;AAAK,IAAA,SAAS,EAAE,qBAAOE,wBAAMC,QAAb,EAAuBL,MAAM,CAACM,SAA9B;AAAhB,kBACE,wDACMN,MADN;AAEE,IAAA,OAAO,EAAEN,OAFX;AAGE,IAAA,QAAQ,EAAEE,QAHZ;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,IAAI,EAAC,UALP;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,SAAS,EAAE,qBAAOJ,OAAO,IAAIU,wBAAMV,OAAxB,CAPb;AAQE,IAAA,QAAQ,EAAE,CAACE,QAAD,GAAYK,YAAZ,GAA2BM;AARvC,KADF,EAWGZ,QAXH,CADF;AAeD,CAxBD;;;AA0BAF,QAAQ,CAACe,WAAT,GAAuB,oBAAvB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Checkbox.module.css';\n\nconst Checkbox = ({ checked, children, disabled, name, value = '', onChange, ...others }) => {\n  const handleChange = (event) => {\n    const {\n      target: { value, checked },\n    } = event;\n\n    onChange && onChange(value, checked, event);\n  };\n\n  return (\n    <div className={styles(style.checkbox, others.className)}>\n      <input\n        {...others}\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        type=\"checkbox\"\n        value={value}\n        className={styles(checked && style.checked)}\n        onChange={!disabled ? handleChange : undefined}\n      />\n      {children}\n    </div>\n  );\n};\n\nCheckbox.displayName = 'Primitive:Checkbox';\n\nCheckbox.propTypes = {\n  checked: PropTypes.bool,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { Checkbox };\n"],"file":"Checkbox.js"}

package/build/primitives/Checkbox/Checkbox.module.css

@@ -0,0 +1,45 @@
+:root {
+  --mirai-ui-checkbox-base: var(--mirai-ui-base);
+  --mirai-ui-checkbox-border-color: var(--mirai-ui-lighten);
+  --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-checkbox-checked-color: var(--mirai-ui-accent);
+  --mirai-ui-checkbox-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-checkbox-size: var(--mirai-ui-space-L);
+}
+
+.checkbox {
+  cursor: pointer;
+  height: var(--mirai-ui-checkbox-size);
+  width: var(--mirai-ui-checkbox-size);
+}
+
+.checkbox input {
+  background-color: var(--mirai-ui-checkbox-base);
+  border: 2px solid var(--mirai-ui-checkbox-border-color);
+  border-radius: var(--mirai-ui-checkbox-border-radius);
+  box-sizing: border-box;
+  height: var(--mirai-ui-checkbox-size);
+  margin: 0;
+  outline: none;
+  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
+    border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  user-select: none;
+  width: var(--mirai-ui-checkbox-size);
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.checkbox input:disabled {
+  border-color: var(--mirai-ui-checkbox-disabled);
+}
+
+.checkbox input:disabled.checked {
+  background-color: var(--mirai-ui-checkbox-disabled);
+}
+
+.checkbox input:not(:disabled).checked {
+  background-color: var(--mirai-ui-checkbox-checked-color);
+  border-color: var(--mirai-ui-checkbox-checked-color);
+}

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

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

package/build/primitives/Checkbox/index.js

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

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

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

package/build/primitives/Icon/Icon.constants.js

@@ -21,7 +21,9 @@ var ICONS = {
   Minus: _fi.FiMinus,
   // Eye
   EyeOpen: _fi.FiEye,
-  EyeClose: _fi.FiEyeOff
+  EyeClose: _fi.FiEyeOff,
+  // Check
+  Check: _fi.FiCheck
 };
 exports.ICONS = ICONS;
 //# sourceMappingURL=Icon.constants.js.map

package/build/primitives/Icon/Icon.constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/primitives/Icon/Icon.constants.js"],"names":["ICONS","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose"],"mappings":";;;;;;;AAAA;;AAaA,IAAMA,KAAK,GAAG;AACZ;AACAC,EAAAA,IAAI,EAAJA,eAFY;AAGZC,EAAAA,KAAK,EAALA,gBAHY;AAIZC,EAAAA,EAAE,EAAFA,aAJY;AAKZC,EAAAA,IAAI,EAAJA,eALY;AAMZ;AACAC,EAAAA,KAAK,EAALA,OAPY;AAQZC,EAAAA,UAAU,EAAVA,iBARY;AASZ;AACAC,EAAAA,IAAI,EAAJA,UAVY;AAWZC,EAAAA,KAAK,EAALA,WAXY;AAYZ;AACAC,EAAAA,OAAO,EAAPA,SAbY;AAcZC,EAAAA,QAAQ,EAARA;AAdY,CAAd","sourcesContent":["import {\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  FiPlus as Plus,\n  FiMinus as Minus,\n} from 'react-icons/fi';\n\nconst ICONS = {\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n};\n\nexport { ICONS };\n"],"file":"Icon.constants.js"}
+{"version":3,"sources":["../../../src/primitives/Icon/Icon.constants.js"],"names":["ICONS","Left","Right","Up","Down","Close","CloseArrow","Plus","Minus","EyeOpen","EyeClose","Check"],"mappings":";;;;;;;AAAA;;AAcA,IAAMA,KAAK,GAAG;AACZ;AACAC,EAAAA,IAAI,EAAJA,eAFY;AAGZC,EAAAA,KAAK,EAALA,gBAHY;AAIZC,EAAAA,EAAE,EAAFA,aAJY;AAKZC,EAAAA,IAAI,EAAJA,eALY;AAMZ;AACAC,EAAAA,KAAK,EAALA,OAPY;AAQZC,EAAAA,UAAU,EAAVA,iBARY;AASZ;AACAC,EAAAA,IAAI,EAAJA,UAVY;AAWZC,EAAAA,KAAK,EAALA,WAXY;AAYZ;AACAC,EAAAA,OAAO,EAAPA,SAbY;AAcZC,EAAAA,QAAQ,EAARA,YAdY;AAeZ;AACAC,EAAAA,KAAK,EAALA;AAhBY,CAAd","sourcesContent":["import {\n  FiArrowUp as Up,\n  FiArrowDown as Down,\n  FiArrowLeft as Left,\n  FiArrowRight as Right,\n  FiChevronDown as CloseArrow,\n  FiX as Close,\n  FiEye as EyeOpen,\n  FiEyeOff as EyeClose,\n  FiPlus as Plus,\n  FiMinus as Minus,\n  FiCheck as Check,\n} from 'react-icons/fi';\n\nconst ICONS = {\n  // directions\n  Left,\n  Right,\n  Up,\n  Down,\n  // Close\n  Close,\n  CloseArrow,\n  // Calc\n  Plus,\n  Minus,\n  // Eye\n  EyeOpen,\n  EyeClose,\n  // Check\n  Check,\n};\n\nexport { ICONS };\n"],"file":"Icon.constants.js"}

package/build/primitives/Input/Input.module.css

@@ -9,6 +9,10 @@
   margin: 0;
   outline: none;
   user-select: none;
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 .input:disabled {

package/build/primitives/Layer/Layer.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Layer = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _hooks = require("../../hooks");
+
+var _helpers2 = require("./helpers");
+
+var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
+
+var _LayerContent = require("./LayerContent");
+
+var _excluded = ["visible"];
+
+var Layer = function Layer(_ref) {
+  var visible = _ref.visible,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var device = (0, _hooks.useDevice)();
+  var componentRef = (0, _react.useRef)(null);
+  var contentRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      position = _useState2[0],
+      setPosition = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      var _componentRef$current = componentRef.current;
+      _componentRef$current = _componentRef$current === void 0 ? {} : _componentRef$current;
+      var componentEl = _componentRef$current.firstChild;
+      var _contentRef$current = contentRef.current;
+      _contentRef$current = _contentRef$current === void 0 ? {} : _contentRef$current;
+      var contentEl = _contentRef$current.firstChild;
+      if (!componentEl || !contentEl) return;
+
+      var _getLayerPosition = (0, _helpers2.getLayerPosition)((0, _helpers2.getElementLayout)(componentEl), (0, _helpers2.getElementLayout)(contentEl), device),
+          _getLayerPosition$lef = _getLayerPosition.left,
+          left = _getLayerPosition$lef === void 0 ? 0 : _getLayerPosition$lef,
+          _getLayerPosition$top = _getLayerPosition.top,
+          top = _getLayerPosition$top === void 0 ? 0 : _getLayerPosition$top;
+
+      setPosition({
+        left: "".concat(left, "px"),
+        top: "".concat(top, "px")
+      });
+    }
+  }, [device, visible]);
+
+  var children = _react.default.Children.map(others.children || [], function (child) {
+    return child;
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: componentRef
+  }, children.find(function (_ref2) {
+    var name = _ref2.type.name;
+    return name !== _LayerContent.LayerContent.name;
+  })), visible && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers.styles)(_LayerModule.default.layerContent, others.className),
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others.style), position)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: contentRef
+  }, children.find(function (_ref3) {
+    var name = _ref3.type.name;
+    return name === _LayerContent.LayerContent.name;
+  }))));
+};
+
+exports.Layer = Layer;
+Layer.displayName = 'Primitive:Layer';
+//# sourceMappingURL=Layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Layer/Layer.jsx"],"names":["Layer","visible","others","device","componentRef","contentRef","position","setPosition","current","componentEl","firstChild","contentEl","left","top","children","React","Children","map","child","find","name","type","LayerContent","style","layerContent","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA4B;AAAA,MAAzBC,OAAyB,QAAzBA,OAAyB;AAAA,MAAbC,MAAa;AACxC,MAAMC,MAAM,GAAG,uBAAf;AACA,MAAMC,YAAY,GAAG,mBAAO,IAAP,CAArB;AACA,MAAMC,UAAU,GAAG,mBAAO,IAAP,CAAnB;;AAEA,kBAAgC,qBAAS,EAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,wBAAU,YAAM;AACd,QAAIN,OAAJ,EAAa;AACX,kCAAsDG,YAAtD,CAAQI,OAAR;AAAA,iEAA+C,EAA/C;AAAA,UAA+BC,WAA/B,yBAAmBC,UAAnB;AACA,gCAAoDL,UAApD,CAAQG,OAAR;AAAA,6DAA6C,EAA7C;AAAA,UAA+BG,SAA/B,uBAAmBD,UAAnB;AAEA,UAAI,CAACD,WAAD,IAAgB,CAACE,SAArB,EAAgC;;AAEhC,8BAA8B,gCAC5B,gCAAiBF,WAAjB,CAD4B,EAE5B,gCAAiBE,SAAjB,CAF4B,EAG5BR,MAH4B,CAA9B;AAAA,oDAAQS,IAAR;AAAA,UAAQA,IAAR,sCAAe,CAAf;AAAA,oDAAkBC,GAAlB;AAAA,UAAkBA,GAAlB,sCAAwB,CAAxB;;AAKAN,MAAAA,WAAW,CAAC;AAAEK,QAAAA,IAAI,YAAKA,IAAL,OAAN;AAAqBC,QAAAA,GAAG,YAAKA,GAAL;AAAxB,OAAD,CAAX;AACD;AACF,GAdD,EAcG,CAACV,MAAD,EAASF,OAAT,CAdH;;AAgBA,MAAMa,QAAQ,GAAGC,eAAMC,QAAN,CAAeC,GAAf,CAAmBf,MAAM,CAACY,QAAP,IAAmB,EAAtC,EAA0C,UAACI,KAAD;AAAA,WAAWA,KAAX;AAAA,GAA1C,CAAjB;;AAEA,sBACE,yEACG;AAAK,IAAA,GAAG,EAAEd;AAAV,KAAyBU,QAAQ,CAACK,IAAT,CAAc;AAAA,QAAWC,IAAX,SAAGC,IAAH,CAAWD,IAAX;AAAA,WAAwBA,IAAI,KAAKE,2BAAaF,IAA9C;AAAA,GAAd,CAAzB,CADH,EAEGnB,OAAO,iBACN;AAAK,IAAA,SAAS,EAAE,qBAAOsB,qBAAMC,YAAb,EAA2BtB,MAAM,CAACuB,SAAlC,CAAhB;AAA8D,IAAA,KAAK,8DAAOvB,MAAM,CAACqB,KAAd,GAAwBjB,QAAxB;AAAnE,kBACG;AAAK,IAAA,GAAG,EAAED;AAAV,KAAuBS,QAAQ,CAACK,IAAT,CAAc;AAAA,QAAWC,IAAX,SAAGC,IAAH,CAAWD,IAAX;AAAA,WAAwBA,IAAI,KAAKE,2BAAaF,IAA9C;AAAA,GAAd,CAAvB,CADH,CAHJ,CADF;AAUD,CAnCD;;;AAqCApB,KAAK,CAAC0B,WAAN,GAAoB,iBAApB","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { getElementLayout, getLayerPosition } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({ visible, ...others }) => {\n  const device = useDevice();\n  const componentRef = useRef(null);\n  const contentRef = useRef(null);\n\n  const [position, setPosition] = useState({});\n\n  useEffect(() => {\n    if (visible) {\n      const { current: { firstChild: componentEl } = {} } = componentRef;\n      const { current: { firstChild: contentEl } = {} } = contentRef;\n\n      if (!componentEl || !contentEl) return;\n\n      const { left = 0, top = 0 } = getLayerPosition(\n        getElementLayout(componentEl),\n        getElementLayout(contentEl),\n        device,\n      );\n      setPosition({ left: `${left}px`, top: `${top}px` });\n    }\n  }, [device, visible]);\n\n  const children = React.Children.map(others.children || [], (child) => child);\n\n  return (\n    <>\n      {<div ref={componentRef}>{children.find(({ type: { name } }) => name !== LayerContent.name)}</div>}\n      {visible && (\n        <div className={styles(style.layerContent, others.className)} style={{ ...others.style, ...position }}>\n          {<div ref={contentRef}>{children.find(({ type: { name } }) => name === LayerContent.name)}</div>}\n        </div>\n      )}\n    </>\n  );\n};\n\nLayer.displayName = 'Primitive:Layer';\n\nLayer.propTypes = {\n  children: PropTypes.node,\n  visible: PropTypes.bool,\n};\n\nexport { Layer };\n"],"file":"Layer.js"}

package/build/primitives/Layer/Layer.module.css

@@ -0,0 +1,10 @@
+:root {
+  --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
+}
+
+.layerContent {
+  position: fixed;
+  transition: left var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  z-index: var(--mirai-ui-layer-content);
+}

package/build/primitives/Layer/LayerContent.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LayerContent = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var LayerContent = function LayerContent(_ref) {
+  var children = _ref.children;
+  return children;
+};
+
+exports.LayerContent = LayerContent;
+LayerContent.displayName = 'Primitive:LayerContent';
+LayerContent.propTypes = {
+  children: _propTypes.default.node
+};
+//# sourceMappingURL=LayerContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/primitives/Layer/LayerContent.jsx"],"names":["LayerContent","children","displayName","propTypes","PropTypes","node"],"mappings":";;;;;;;;;AAAA;;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAe;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,SAAkBA,QAAlB;AAAA,CAArB;;;AAEAD,YAAY,CAACE,WAAb,GAA2B,wBAA3B;AAEAF,YAAY,CAACG,SAAb,GAAyB;AACvBF,EAAAA,QAAQ,EAAEG,mBAAUC;AADG,CAAzB","sourcesContent":["import PropTypes from 'prop-types';\n\nconst LayerContent = ({ children }) => children;\n\nLayerContent.displayName = 'Primitive:LayerContent';\n\nLayerContent.propTypes = {\n  children: PropTypes.node,\n};\n\nexport { LayerContent };\n"],"file":"LayerContent.js"}

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

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<Layer> renders 1`] = `
+<DocumentFragment>
+  <div />
+</DocumentFragment>
+`;
+
+exports[`primitive:<Layer> w/ component & <LayerContent> 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Layer> w/ component 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Layer> w/ visible 1`] = `
+<DocumentFragment>
+  <div>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </div>
+  <div
+    class="layerContent"
+    style="left: 0px; top: 0px;"
+  >
+    <div>
+      <span
+        class="text paragraph"
+      >
+        Mirai
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getElementLayout = void 0;
+
+var getElementLayout = function getElementLayout() {
+  var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var left = element.offsetLeft,
+      top = element.offsetTop,
+      height = element.offsetHeight,
+      width = element.offsetWidth;
+  return {
+    left: left,
+    top: top,
+    height: height,
+    width: width
+  };
+};
+
+exports.getElementLayout = getElementLayout;
+//# sourceMappingURL=getElementLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/primitives/Layer/helpers/getElementLayout.js"],"names":["getElementLayout","element","left","offsetLeft","top","offsetTop","height","offsetHeight","width","offsetWidth"],"mappings":";;;;;;;AAAO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAkB;AAAA,MAAjBC,OAAiB,uEAAP,EAAO;AAChD,MAAoBC,IAApB,GAAuFD,OAAvF,CAAQE,UAAR;AAAA,MAAqCC,GAArC,GAAuFH,OAAvF,CAA0BI,SAA1B;AAAA,MAAwDC,MAAxD,GAAuFL,OAAvF,CAA0CM,YAA1C;AAAA,MAA6EC,KAA7E,GAAuFP,OAAvF,CAAgEQ,WAAhE;AAEA,SAAO;AAAEP,IAAAA,IAAI,EAAJA,IAAF;AAAQE,IAAAA,GAAG,EAAHA,GAAR;AAAaE,IAAAA,MAAM,EAANA,MAAb;AAAqBE,IAAAA,KAAK,EAALA;AAArB,GAAP;AACD,CAJM","sourcesContent":["export const getElementLayout = (element = {}) => {\n  const { offsetLeft: left, offsetTop: top, offsetHeight: height, offsetWidth: width } = element;\n\n  return { left, top, height, width };\n};\n"],"file":"getElementLayout.js"}