@mirai/ui 1.0.9 → 1.0.12

package/build/components/InputText/InputText.module.css

@@ -1,89 +0,0 @@
-:root {
-  --mirai-ui-input-field-border: solid 1px var(--mirai-ui-lighten);
-  --mirai-ui-input-field-focus: var(--mirai-ui-accent);
-  --mirai-ui-input-field-padding-x: var(--mirai-ui-space-S);
-  --mirai-ui-input-field-padding-y: var(--mirai-ui-space-S);
-  --mirai-ui-input-field-radius: var(--mirai-ui-border-radius);
-}
-
-.inputContainer {
-  position: relative;
-  margin-bottom: var(--mirai-ui-input-field-padding-y);
-}
-
-.inputBorder {
-  border: var(--mirai-ui-input-field-border);
-  border-radius: var(--mirai-ui-input-field-radius);
-}
-
-.inputBorder.error {
-  border-color: var(--mirai-ui-error);
-}
-
-.inputBorder.focus {
-  border-color: var(--mirai-ui-input-field-focus);
-}
-
-.input {
-  padding: var(--mirai-ui-input-field-padding-y) var(--mirai-ui-input-field-padding-x);
-}
-
-.input.iconLeft {
-  padding-left: calc(var(--mirai-ui-input-field-padding-x) * 3);
-}
-
-.input::placeholder {
-  color: var(--mirai-ui-base);
-}
-
-.hint {
-  margin: calc(var(--mirai-ui-input-field-padding-x) / 4) var(--mirai-ui-input-field-padding-x);
-}
-
-.icon {
-  color: var(--mirai-ui-lighten);
-  pointer-events: none;
-  position: absolute;
-}
-
-.pressable {
-  position: absolute;
-  right: var(--mirai-ui-input-field-padding-x);
-}
-
-.icon.left {
-  left: var(--mirai-ui-input-field-padding-x);
-}
-
-.icon.right {
-  right: var(--mirai-ui-input-field-padding-x);
-}
-
-.label {
-  background-color: var(--mirai-ui-base);
-  font-size: var(--mirai-ui-input-font-size);
-  margin: 0 calc(var(--mirai-ui-input-field-padding-x) / 2);
-  padding: 0 calc(var(--mirai-ui-input-field-padding-x) / 2);
-  pointer-events: none;
-  position: absolute;
-  top: var(--mirai-ui-input-field-padding-y);
-  transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
-  z-index: 1;
-}
-
-.label.value {
-  font-size: var(--mirai-ui-font-size-small);
-  top: calc(calc(var(--mirai-ui-input-field-padding-y) * -1) + calc(var(--mirai-ui-input-field-padding-y) / 2));
-}
-
-.text {
-  color: var(--mirai-ui-lighten);
-}
-
-.text.focus {
-  color: var(--mirai-ui-input-field-focus);
-}
-
-.text.error {
-  color: var(--mirai-ui-error);
-}

package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap

@@ -1,255 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`component:<InputText> inherit:className 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer mirai"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:disabled 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        disabled=""
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:error 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder error"
-    >
-      <input
-        class="input input"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:hint 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-    <span
-      class="text small text hint"
-    >
-      hint
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:icon 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <span
-        class="icon icon left"
-      >
-        <svg
-          fill="none"
-          height="1em"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            r="3"
-          />
-        </svg>
-      </span>
-      <input
-        class="input input iconLeft"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:label 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <span
-      class="text paragraph text label"
-    >
-      label
-    </span>
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:multiLine 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <textarea
-        class="input input"
-        name="name"
-        type="text"
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> prop:type 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        name="name"
-        type="password"
-        value=""
-      />
-      <button
-        class="pressable pressable"
-      >
-        <span
-          class="icon"
-        >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-            />
-            <line
-              x1="1"
-              x2="23"
-              y1="1"
-              y2="23"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> renders 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<InputText> testID 1`] = `
-<DocumentFragment>
-  <div
-    class="view inputContainer"
-  >
-    <div
-      class="view row inputBorder"
-    >
-      <input
-        class="input input"
-        data-testid="mirai"
-        name="name"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/build/components/InputText/index.js

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

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

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

package/build/components/Modal/Modal.js

@@ -1,50 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Modal = void 0;
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _helpers = require("../../helpers");
-
-var _hooks = require("../../hooks");
-
-var _primitives = require("../../primitives");
-
-var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-
-var _excluded = ["children", "visible", "onClose"];
-
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-      visible = _ref.visible,
-      onClose = _ref.onClose,
-      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useDevice = (0, _hooks.useDevice)(),
-      isDesktop = _useDevice.isDesktop;
-
-  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    row: true,
-    className: (0, _helpers.styles)(_ModalModule.default.overflow, visible && _ModalModule.default.visible)
-  }, /*#__PURE__*/_react.default.createElement(_primitives.View, Object.assign({}, others, {
-    fit: true,
-    className: (0, _helpers.styles)(_ModalModule.default.modal, visible && _ModalModule.default.visible, others.className)
-  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, onClose && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    className: _ModalModule.default.pressable,
-    onPress: onClose
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    name: isDesktop ? 'Close' : 'CloseArrow',
-    className: _ModalModule.default.icon
-  })), children)));
-};
-
-exports.Modal = Modal;
-Modal.displayName = 'Component:Modal';
-//# sourceMappingURL=Modal.js.map

package/build/components/Modal/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.js","names":["Modal","children","visible","onClose","others","isDesktop","style","overflow","modal","className","pressable","icon","displayName"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({ children, visible, onClose, ...others }) => {\n  const { isDesktop } = useDevice();\n\n  return (\n    <View row className={styles(style.overflow, visible && style.visible)}>\n      <View {...others} fit className={styles(style.modal, visible && style.visible, others.className)}>\n        <>\n          {onClose && (\n            <Pressable className={style.pressable} onPress={onClose}>\n              <Icon name={isDesktop ? 'Close' : 'CloseArrow'} className={style.icon} />\n            </Pressable>\n          )}\n          {children}\n        </>\n      </View>\n    </View>\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  children: PropTypes.node,\n  visible: PropTypes.bool,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAA+C;EAAA,IAA5CC,QAA4C,QAA5CA,QAA4C;EAAA,IAAlCC,OAAkC,QAAlCA,OAAkC;EAAA,IAAzBC,OAAyB,QAAzBA,OAAyB;EAAA,IAAbC,MAAa;;EAC3D,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EAEA,oBACE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAE,qBAAOC,qBAAMC,QAAb,EAAuBL,OAAO,IAAII,qBAAMJ,OAAxC;EAArB,gBACE,6BAAC,gBAAD,oBAAUE,MAAV;IAAkB,GAAG,MAArB;IAAsB,SAAS,EAAE,qBAAOE,qBAAME,KAAb,EAAoBN,OAAO,IAAII,qBAAMJ,OAArC,EAA8CE,MAAM,CAACK,SAArD;EAAjC,iBACE,4DACGN,OAAO,iBACN,6BAAC,qBAAD;IAAW,SAAS,EAAEG,qBAAMI,SAA5B;IAAuC,OAAO,EAAEP;EAAhD,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAEE,SAAS,GAAG,OAAH,GAAa,YAAlC;IAAgD,SAAS,EAAEC,qBAAMK;EAAjE,EADF,CAFJ,EAMGV,QANH,CADF,CADF,CADF;AAcD,CAjBD;;;AAmBAD,KAAK,CAACY,WAAN,GAAoB,iBAApB"}

package/build/components/Modal/Modal.module.css

@@ -1,70 +0,0 @@
-:root {
-  --mirai-ui-modal-background: var(--mirai-ui-base);
-  --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.2);
-  --mirai-ui-modal-icon: var(--mirai-ui-space-L);
-}
-
-.modal {
-  background-color: var(--mirai-ui-modal-background);
-  opacity: 0;
-  pointer-events: none;
-  transform: scale(0.9);
-  transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
-}
-
-.modal.visible {
-  opacity: 1;
-  pointer-events: all;
-  transform: scale(1);
-}
-
-.overflow {
-  align-items: center;
-  background-color: var(--mirai-ui-modal-overflow);
-  height: 100vh;
-  justify-content: center;
-  left: 0;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
-  top: 0;
-  width: 100vw;
-  z-index: 1000;
-}
-
-.overflow.visible {
-  opacity: 1;
-}
-
-.pressable {
-  align-self: flex-end;
-  padding: var(--mirai-ui-space-XS);
-}
-
-.icon {
-  font-size: var(--mirai-ui-modal-icon);
-  line-height: var(--mirai-ui-modal-icon);
-  height: var(--mirai-ui-modal-icon);
-  width: var(--mirai-ui-modal-icon);
-}
-
-@media only screen and (max-width: 600px) {
-  .overflow {
-    align-items: flex-end;
-    align-content: flex-end;
-  }
-
-  .modal {
-    opacity: 1;
-    transform: translateY(110%);
-  }
-
-  .modal.visible {
-    transform: translateY(0%);
-  }
-
-  .pressable {
-    align-self: center;
-  }
-}

package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -1,150 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow visible"
-  >
-    <div
-      class="view fit modal visible"
-    >
-      <button
-        class="pressable pressable"
-      >
-        <span
-          class="icon icon"
-        >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> Mobile environment prop:visible 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow visible"
-  >
-    <div
-      class="view fit modal visible"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> inherit:className 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow"
-  >
-    <div
-      class="view fit modal mirai"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> prop:children 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow"
-  >
-    <div
-      class="view fit modal"
-    >
-      <span>
-        children
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> prop:onClose 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow visible"
-  >
-    <div
-      class="view fit modal visible"
-    >
-      <button
-        class="pressable pressable"
-      >
-        <span
-          class="icon icon"
-        >
-          <svg
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <polyline
-              points="6 9 12 15 18 9"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> prop:visible 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow visible"
-  >
-    <div
-      class="view fit modal visible"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> renders 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow"
-  >
-    <div
-      class="view fit modal"
-    />
-  </div>
-</DocumentFragment>
-`;
-
-exports[`component:<Modal> testID 1`] = `
-<DocumentFragment>
-  <div
-    class="view row overflow"
-  >
-    <div
-      class="view fit modal"
-      data-testid="mirai"
-    />
-  </div>
-</DocumentFragment>
-`;

package/build/components/Modal/index.js

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

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

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