@mirai/ui 1.1.0-beta → 1.1.0-c

package/build/components/Action/Action.module.css

@@ -8,54 +8,55 @@
   justify-content: center;
   position: relative;
   width: fit-content;
+}
+
+.action:not(.disabled):hover {
+  color: var(--mirai-ui-content);
+}
+
+.action.bold {
+  font-family: var(--mirai-ui-font-bold);
+  font-weight: var(--mirai-ui-font-bold-weight);
+}
+
+.action.disabled,
+.action.disabled * {
+  color: var(--mirai-ui-action-color-disabled);
+}
+
+.action:not(.disabled):active {
+  color: var(--mirai-ui-action-color-active);
+}
+
+.action:not(.inline):not(.large):not(.small) {
+  padding: var(--mirai-ui-button-padding-y) 0;
+}
+
+.large {
+  font-size: var(--mirai-ui-font-size-paragraph);
+}
+
+.large:not(.inline) {
+  padding: var(--mirai-ui-button-padding-y) 0;
+}
+
+.small {
+  font-size: var(--mirai-ui-font-size-small);
+}
+
+.small:not(.inline) {
+  padding: var(--mirai-ui-button-padding-y) 0;
+}
+
+.underline,
+.underline * {
+  text-decoration: underline;
+}
+
+.wide {
+  width: 100%;
+}
 
-  &.bold {
-    font-family: var(--mirai-ui-font-bold);
-    font-weight: var(--mirai-ui-font-bold-weight);
-  }
-
-  &.disabled,
-  &.disabled * {
-    color: var(--mirai-ui-action-color-disabled);
-  }
-
-  &.large {
-    font-size: var(--mirai-ui-font-size-paragraph);
-
-    &:not(.inline) {
-      padding: var(--mirai-ui-button-padding-y) 0;
-    }
-  }
-
-  &.small {
-    font-size: var(--mirai-ui-font-size-small);
-    &:not(.inline) {
-      padding: var(--mirai-ui-button-padding-y) 0;
-    }
-  }
-
-  &.underline,
-  &.underline * {
-    text-decoration: underline;
-  }
-
-  &.wide {
-    width: 100%;
-  }
-
-  & * {
-    margin-right: calc(var(--mirai-ui-space-XS) / 2);
-  }
-
-  &:not(.disabled):active {
-    color: var(--mirai-ui-action-color-active);
-  }
-
-  &:not(.disabled):hover {
-    color: var(--mirai-ui-content);
-  }
-
-  &:not(.inline):not(.large):not(.small) {
-    padding: var(--mirai-ui-button-padding-y) 0;
-  }
+.action * {
+  margin-right: calc(var(--mirai-ui-space-XS) / 2);
 }

package/build/components/Action/Action.stories.js

@@ -1,27 +1,24 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Story = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Action = require("./Action");
 var _Icon = require("../../primitives/Icon");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// import React from 'react';
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: 'Components'
 };
 exports.default = _default;
 var Story = function Story(props) {
-  return /*#__PURE__*/React.createElement(_Action.Action, props);
+  return /*#__PURE__*/_react.default.createElement(_Action.Action, props);
 };
 exports.Story = Story;
 Story.storyName = 'Action';
 Story.args = {
-  children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Icon.Icon, {
+  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     value: _Icon.ICON.INFO
   }), "children"),
   disabled: false,

package/build/components/Action/Action.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","inline","large","small","tag","target","underline","wide","testId","style","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["// import React from 'react';\nimport * as React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'action',\n  target: '',\n  underline: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAmD;AAAA;AAJnD;AAAA,eAMe;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,uDACE,oBAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","inline","large","small","tag","target","underline","wide","testId","style","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'action',\n  target: '',\n  underline: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,yEACE,6BAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

package/build/components/Modal/Modal.js

@@ -66,6 +66,7 @@ var Modal = function Modal(_ref) {
     return function () {
       return document.removeEventListener('keydown', handleKeydown);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   (0, _react.useEffect)(function () {
     if (visible && !dataset) {

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","height","ref","useRef","useState","dataset","setDataset","useEffect","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport * as style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Button transparent small squared onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                transparent\n                small\n                squared\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","height","ref","useRef","useState","dataset","setDataset","useEffect","handleKeydown","event","key","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport * as style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n\n    const handleKeydown = (event) => event.key === 'Escape' && onClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Button transparent small squared onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                transparent\n                small\n                squared\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/primitives/Text/Text.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Text = void 0;
+exports.default = exports.Text = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
@@ -15,6 +15,19 @@ var _excluded = ["accent", "action", "bold", "children", "headline", "level", "l
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -65,4 +78,33 @@ Text.propTypes = {
   upperCase: _propTypes.default.bool,
   wide: _propTypes.default.bool
 };
+var TextElement = /*#__PURE__*/function (_HTMLElement) {
+  _inherits(TextElement, _HTMLElement);
+  var _super = _createSuper(TextElement);
+  function TextElement() {
+    _classCallCheck(this, TextElement);
+    return _super.apply(this, arguments);
+  }
+  return _createClass(TextElement);
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement)); // window.customElements.define('ui-text', TextElement);
+// window.customElements.define('ui-h2', TextElement);
+exports.default = TextElement;
+var HelloWorldComponent = /*#__PURE__*/function (_HTMLElement2) {
+  _inherits(HelloWorldComponent, _HTMLElement2);
+  var _super2 = _createSuper(HelloWorldComponent);
+  function HelloWorldComponent() {
+    _classCallCheck(this, HelloWorldComponent);
+    return _super2.call(this);
+  }
+  _createClass(HelloWorldComponent, [{
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      this.innerHTML = "<h1>Hello world!</h1>";
+    }
+  }]);
+  return HelloWorldComponent;
+}( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
+customElements.define('ui-text', HelloWorldComponent);
+// customElements.define('ui-view', HelloWorldComponent);
+// customElements.define('ui-span', HelloWorldComponent);
 //# sourceMappingURL=Text.js.map

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","accent","action","bold","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport * as style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  action,\n  bold,\n  children,\n  headline,\n  level = 3,\n  lighten,\n  markdown = true,\n  small,\n  tag = 'text',\n  tiny,\n  underline,\n  upperCase,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: headline ? `h${level}` : tag,\n      className: styles(\n        style.text,\n        accent && style.accent,\n        bold && style.bold,\n        headline\n          ? style[`h${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        lighten && style.lighten,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,IAAI,GAAG,SAAPA,IAAI;EAAA,IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,kBACRC,KAAK;IAALA,KAAK,2BAAG,CAAC;IACTC,OAAO,QAAPA,OAAO;IAAA,qBACPC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IACfC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,MAAM;IACZC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,kCAEJH,MAAM;IACTI,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,MAAM;IAC3BT,GAAG,EAAEL,QAAQ,cAAOC,KAAK,IAAKI,GAAG;IACjCU,SAAS,EAAE,IAAAC,eAAM,EACfC,KAAK,CAACC,IAAI,EACVtB,MAAM,IAAIqB,KAAK,CAACrB,MAAM,EACtBE,IAAI,IAAImB,KAAK,CAACnB,IAAI,EAClBE,QAAQ,GACJiB,KAAK,YAAKhB,KAAK,EAAG,GAClBJ,MAAM,GACNoB,KAAK,CAACpB,MAAM,GACZO,KAAK,GACLa,KAAK,CAACb,KAAK,GACXE,IAAI,GACJW,KAAK,CAACX,IAAI,GACVW,KAAK,CAACE,SAAS,EACnBjB,OAAO,IAAIe,KAAK,CAACf,OAAO,EACxBK,SAAS,IAAIU,KAAK,CAACV,SAAS,EAC5BC,SAAS,IAAIS,KAAK,CAACT,SAAS,EAC5BC,IAAI,IAAIQ,KAAK,CAACR,IAAI,EAClBC,MAAM,CAACK,SAAS;EACjB,IAEHZ,QAAQ,GAAG,IAAAiB,uBAAa,EAACrB,QAAQ,CAAC,GAAGA,QAAQ,CAC9C;AAAA;AAAC;AAEJJ,IAAI,CAAC0B,WAAW,GAAG,gBAAgB;AAEnC1B,IAAI,CAAC2B,SAAS,GAAG;EACf1B,MAAM,EAAE2B,kBAAS,CAACC,IAAI;EACtB3B,MAAM,EAAE0B,kBAAS,CAACC,IAAI;EACtB1B,IAAI,EAAEyB,kBAAS,CAACC,IAAI;EACpBzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACK,KAAK,CAAC,CAAC;EACpF5B,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,KAAK,EAAEsB,kBAAS,CAACI,MAAM;EACvBzB,OAAO,EAAEqB,kBAAS,CAACC,IAAI;EACvBrB,QAAQ,EAAEoB,kBAAS,CAACC,IAAI;EACxBpB,KAAK,EAAEmB,kBAAS,CAACC,IAAI;EACrBnB,GAAG,EAAEkB,kBAAS,CAACG,MAAM;EACrBpB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBjB,SAAS,EAAEgB,kBAAS,CAACC,IAAI;EACzBhB,SAAS,EAAEe,kBAAS,CAACC,IAAI;EACzBf,IAAI,EAAEc,kBAAS,CAACC;AAClB,CAAC"}
+{"version":3,"file":"Text.js","names":["Text","accent","action","bold","children","headline","level","lighten","markdown","small","tag","tiny","underline","upperCase","wide","others","React","createElement","Primitive","role","className","styles","style","text","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array","TextElement","HTMLElement","HelloWorldComponent","innerHTML","customElements","define"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseMarkdown } from './helpers';\nimport * as style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  action,\n  bold,\n  children,\n  headline,\n  level = 3,\n  lighten,\n  markdown = true,\n  small,\n  tag = 'text',\n  tiny,\n  underline,\n  upperCase,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag: headline ? `h${level}` : tag,\n      className: styles(\n        style.text,\n        accent && style.accent,\n        bold && style.bold,\n        headline\n          ? style[`h${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        lighten && style.lighten,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  headline: PropTypes.bool,\n  level: PropTypes.number,\n  lighten: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n\nexport default class TextElement extends HTMLElement {}\n\n// window.customElements.define('ui-text', TextElement);\n// window.customElements.define('ui-h2', TextElement);\n\nclass HelloWorldComponent extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    this.innerHTML = `<h1>Hello world!</h1>`;\n  }\n}\n\ncustomElements.define('ui-text', HelloWorldComponent);\n// customElements.define('ui-view', HelloWorldComponent);\n// customElements.define('ui-span', HelloWorldComponent);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.1.0-beta",
+  "version": "1.1.0-c",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",
@@ -62,9 +62,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "parcel": {
-    "extends": "@parcel/config-default",
-    "localIdentName": "[local]"
   }
 }

package/build/primitives/Primitive/Primitive.module.css

@@ -1,241 +0,0 @@
-/* -- MARGIN ---------------------------------------------------------------- */
-.marginXS {
-  margin: var(--mirai-ui-space-XS);
-}
-
-.marginS {
-  margin: var(--mirai-ui-space-S);
-}
-
-.marginM {
-  margin: var(--mirai-ui-space-M);
-}
-
-.marginL {
-  margin: var(--mirai-ui-space-L);
-}
-
-.marginXL {
-  margin: var(--mirai-ui-space-XL);
-}
-
-.marginXXL {
-  margin: var(--mirai-ui-space-XXL);
-}
-
-.marginTopXS {
-  margin-top: var(--mirai-ui-space-XS);
-}
-
-.marginTopS {
-  margin-top: var(--mirai-ui-space-S);
-}
-
-.marginTopM {
-  margin-top: var(--mirai-ui-space-M);
-}
-
-.marginTopL {
-  margin-top: var(--mirai-ui-space-L);
-}
-
-.marginTopXL {
-  margin-top: var(--mirai-ui-space-XL);
-}
-
-.marginTopXXL {
-  margin-top: var(--mirai-ui-space-XXL);
-}
-
-.marginRightXS {
-  margin-right: var(--mirai-ui-space-XS);
-}
-
-.marginRightS {
-  margin-right: var(--mirai-ui-space-S);
-}
-
-.marginRightM {
-  margin-right: var(--mirai-ui-space-M);
-}
-
-.marginRightL {
-  margin-right: var(--mirai-ui-space-L);
-}
-
-.marginRightXL {
-  margin-right: var(--mirai-ui-space-XL);
-}
-
-.marginRightXXL {
-  margin-right: var(--mirai-ui-space-XXL);
-}
-
-.marginBottomXS {
-  margin-bottom: var(--mirai-ui-space-XS);
-}
-
-.marginBottomS {
-  margin-bottom: var(--mirai-ui-space-S);
-}
-
-.marginBottomM {
-  margin-bottom: var(--mirai-ui-space-M);
-}
-
-.marginBottomL {
-  margin-bottom: var(--mirai-ui-space-L);
-}
-
-.marginBottomXL {
-  margin-bottom: var(--mirai-ui-space-XL);
-}
-
-.marginBottomXXL {
-  margin-bottom: var(--mirai-ui-space-XXL);
-}
-
-.marginLeftXS {
-  margin-left: var(--mirai-ui-space-XS);
-}
-
-.marginLeftS {
-  margin-left: var(--mirai-ui-space-S);
-}
-
-.marginLeftM {
-  margin-left: var(--mirai-ui-space-M);
-}
-
-.marginLeftL {
-  margin-left: var(--mirai-ui-space-L);
-}
-
-.marginLeftXL {
-  margin-left: var(--mirai-ui-space-XL);
-}
-
-.marginLeftXXL {
-  margin-left: var(--mirai-ui-space-XXL);
-}
-
-/* -- PADDING --------------------------------------------------------------- */
-.paddingXS {
-  padding: var(--mirai-ui-space-XS);
-}
-
-.paddingS {
-  padding: var(--mirai-ui-space-S);
-}
-
-.paddingM {
-  padding: var(--mirai-ui-space-M);
-}
-
-.paddingL {
-  padding: var(--mirai-ui-space-L);
-}
-
-.paddingXL {
-  padding: var(--mirai-ui-space-XL);
-}
-
-.paddingXXL {
-  padding: var(--mirai-ui-space-XXL);
-}
-
-.paddingTopXS {
-  padding-top: var(--mirai-ui-space-XS);
-}
-
-.paddingTopS {
-  padding-top: var(--mirai-ui-space-S);
-}
-
-.paddingTopM {
-  padding-top: var(--mirai-ui-space-M);
-}
-
-.paddingTopL {
-  padding-top: var(--mirai-ui-space-L);
-}
-
-.paddingTopXL {
-  padding-top: var(--mirai-ui-space-XL);
-}
-
-.paddingTopXXL {
-  padding-top: var(--mirai-ui-space-XXL);
-}
-
-.paddingRightXS {
-  padding-right: var(--mirai-ui-space-XS);
-}
-
-.paddingRightS {
-  padding-right: var(--mirai-ui-space-S);
-}
-
-.paddingRightM {
-  padding-right: var(--mirai-ui-space-M);
-}
-
-.paddingRightL {
-  padding-right: var(--mirai-ui-space-L);
-}
-
-.paddingRightXL {
-  padding-right: var(--mirai-ui-space-XL);
-}
-
-.paddingRightXXL {
-  padding-right: var(--mirai-ui-space-XXL);
-}
-
-.paddingBottomXS {
-  padding-bottom: var(--mirai-ui-space-XS);
-}
-
-.paddingBottomS {
-  padding-bottom: var(--mirai-ui-space-S);
-}
-
-.paddingBottomM {
-  padding-bottom: var(--mirai-ui-space-M);
-}
-
-.paddingBottomL {
-  padding-bottom: var(--mirai-ui-space-L);
-}
-
-.paddingBottomXL {
-  padding-bottom: var(--mirai-ui-space-XL);
-}
-
-.paddingBottomXXL {
-  padding-bottom: var(--mirai-ui-space-XXL);
-}
-
-.paddingLeftXS {
-  padding-left: var(--mirai-ui-space-XS);
-}
-
-.paddingLeftS {
-  padding-left: var(--mirai-ui-space-S);
-}
-
-.paddingLeftM {
-  padding-left: var(--mirai-ui-space-M);
-}
-
-.paddingLeftL {
-  padding-left: var(--mirai-ui-space-L);
-}
-
-.paddingLeftXL {
-  padding-left: var(--mirai-ui-space-XL);
-}
-
-.paddingLeftXXL {
-  padding-left: var(--mirai-ui-space-XXL);
-}