@mirai/ui 1.0.118 → 1.0.120

package/build/primitives/Text/Text.module.css

@@ -18,22 +18,22 @@
   font-weight: var(--mirai-ui-font-bold-weight);
 }
 
-.headline-1 {
+h1.headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   line-height: var(--mirai-ui-line-height-headline-1);
 }
 
-.headline-2 {
+h2.headline-2 {
   font-size: var(--mirai-ui-font-size-headline-2);
   line-height: var(--mirai-ui-line-height-headline-2);
 }
 
-.headline-3 {
+h3.headline-3 {
   font-size: var(--mirai-ui-font-size-headline-3);
   line-height: var(--mirai-ui-line-height-headline-3);
 }
 
-.headline-4 {
+h4.headline-4 {
   font-size: var(--mirai-ui-font-size-headline-4);
   line-height: var(--mirai-ui-line-height-headline-4);
 }

package/build/primitives/View/View.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _ViewModule = _interopRequireDefault(require("./View.module.css"));
-var _excluded = ["children", "fit", "row", "tag", "wide"];
+var _excluded = ["children", "fit", "forceRow", "row", "tag", "wide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -21,13 +21,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var View = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     fit = _ref.fit,
+    _ref$forceRow = _ref.forceRow,
+    forceRow = _ref$forceRow === void 0 ? false : _ref$forceRow,
     row = _ref.row,
     _ref$tag = _ref.tag,
     tag = _ref$tag === void 0 ? 'div' : _ref$tag,
     wide = _ref.wide,
     others = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(tag, _objectSpread(_objectSpread({}, others), {}, {
-    className: (0, _helpers.styles)(_ViewModule.default.view, fit && _ViewModule.default.fit, row && _ViewModule.default.row, wide && _ViewModule.default.wide, others.className),
+    className: (0, _helpers.styles)(_ViewModule.default.view, fit && _ViewModule.default.fit, row && !forceRow && _ViewModule.default.row, forceRow && _ViewModule.default.forceRow, wide && _ViewModule.default.wide, others.className),
     ref: ref
   }), children);
 });
@@ -36,6 +38,7 @@ View.displayName = 'Primitive:View';
 View.propTypes = {
   children: _propTypes.default.node,
   fit: _propTypes.default.bool,
+  forceRow: _propTypes.default.bool,
   row: _propTypes.default.bool,
   tag: _propTypes.default.string,
   wide: _propTypes.default.bool

package/build/primitives/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","names":["View","React","forwardRef","ref","children","fit","row","tag","wide","others","createElement","className","styles","style","view","displayName","propTypes","PropTypes","node","bool","string"],"sources":["../../../src/primitives/View/View.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './View.module.css';\n\nconst View = React.forwardRef(({ children, fit, row, tag = 'div', wide, ...others }, ref) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(style.view, fit && style.fit, row && style.row, wide && style.wide, others.className),\n      ref: ref,\n    },\n    children,\n  ),\n);\n\nView.displayName = 'Primitive:View';\n\nView.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  row: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n};\n\nexport { View };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAAuDC,GAAG;EAAA,IAAvDC,QAAQ,QAARA,QAAQ;IAAEC,GAAG,QAAHA,GAAG;IAAEC,GAAG,QAAHA,GAAG;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAKC,MAAM;EAAA,oBAC/ER,cAAK,CAACS,aAAa,CACjBH,GAAG,kCAEEE,MAAM;IACTE,SAAS,EAAE,IAAAC,eAAM,EAACC,mBAAK,CAACC,IAAI,EAAET,GAAG,IAAIQ,mBAAK,CAACR,GAAG,EAAEC,GAAG,IAAIO,mBAAK,CAACP,GAAG,EAAEE,IAAI,IAAIK,mBAAK,CAACL,IAAI,EAAEC,MAAM,CAACE,SAAS,CAAC;IACvGR,GAAG,EAAEA;EAAG,IAEVC,QAAQ,CACT;AAAA,EACF;AAAC;AAEFJ,IAAI,CAACe,WAAW,GAAG,gBAAgB;AAEnCf,IAAI,CAACgB,SAAS,GAAG;EACfZ,QAAQ,EAAEa,kBAAS,CAACC,IAAI;EACxBb,GAAG,EAAEY,kBAAS,CAACE,IAAI;EACnBb,GAAG,EAAEW,kBAAS,CAACE,IAAI;EACnBZ,GAAG,EAAEU,kBAAS,CAACG,MAAM;EACrBZ,IAAI,EAAES,kBAAS,CAACE;AAClB,CAAC"}
+{"version":3,"file":"View.js","names":["View","React","forwardRef","ref","children","fit","forceRow","row","tag","wide","others","createElement","className","styles","style","view","displayName","propTypes","PropTypes","node","bool","string"],"sources":["../../../src/primitives/View/View.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './View.module.css';\n\nconst View = React.forwardRef(({ children, fit, forceRow = false, row, tag = 'div', wide, ...others }, ref) =>\n  React.createElement(\n    tag,\n    {\n      ...others,\n      className: styles(\n        style.view,\n        fit && style.fit,\n        row && !forceRow && style.row,\n        forceRow && style.forceRow,\n        wide && style.wide,\n        others.className,\n      ),\n      ref: ref,\n    },\n    children,\n  ),\n);\n\nView.displayName = 'Primitive:View';\n\nView.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  forceRow: PropTypes.bool,\n  row: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n};\n\nexport { View };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAAyEC,GAAG;EAAA,IAAzEC,QAAQ,QAARA,QAAQ;IAAEC,GAAG,QAAHA,GAAG;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,GAAG,QAAHA,GAAG;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAKC,MAAM;EAAA,oBACjGT,cAAK,CAACU,aAAa,CACjBH,GAAG,kCAEEE,MAAM;IACTE,SAAS,EAAE,IAAAC,eAAM,EACfC,mBAAK,CAACC,IAAI,EACVV,GAAG,IAAIS,mBAAK,CAACT,GAAG,EAChBE,GAAG,IAAI,CAACD,QAAQ,IAAIQ,mBAAK,CAACP,GAAG,EAC7BD,QAAQ,IAAIQ,mBAAK,CAACR,QAAQ,EAC1BG,IAAI,IAAIK,mBAAK,CAACL,IAAI,EAClBC,MAAM,CAACE,SAAS,CACjB;IACDT,GAAG,EAAEA;EAAG,IAEVC,QAAQ,CACT;AAAA,EACF;AAAC;AAEFJ,IAAI,CAACgB,WAAW,GAAG,gBAAgB;AAEnChB,IAAI,CAACiB,SAAS,GAAG;EACfb,QAAQ,EAAEc,kBAAS,CAACC,IAAI;EACxBd,GAAG,EAAEa,kBAAS,CAACE,IAAI;EACnBd,QAAQ,EAAEY,kBAAS,CAACE,IAAI;EACxBb,GAAG,EAAEW,kBAAS,CAACE,IAAI;EACnBZ,GAAG,EAAEU,kBAAS,CAACG,MAAM;EACrBZ,IAAI,EAAES,kBAAS,CAACE;AAClB,CAAC"}

package/build/primitives/View/View.module.css

@@ -1,9 +1,9 @@
 .view {
-  display: flex;
   box-sizing: border-box;
+  display: flex;
 }
 
-.view:not(.row) {
+.view:not(.row):not(.forceRow) {
   flex-direction: column;
 }
 
@@ -11,11 +11,19 @@
   width: fit-content;
 }
 
-.row {
+.row,
+.forceRow {
   align-items: center;
+}
+
+.row {
   flex-direction: var(--mirai-ui-row-direction);
 }
 
+.forceRow {
+  flex-direction: row;
+}
+
 .wide {
   width: 100%;
 }

package/build/primitives/View/View.stories.js

@@ -27,6 +27,7 @@ exports.Story = Story;
 Story.storyName = 'View';
 Story.args = (_Story$args = {
   fit: false,
+  forceRow: false,
   row: false,
   tag: 'div',
   wide: false

package/build/primitives/View/View.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.stories.js","names":["title","Story","props","storyName","args","fit","row","tag","wide","argTypes"],"sources":["../../../src/primitives/View/View.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { View } from './View';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n  <View {...props}>\n    <span className=\"children\">child:1</span>\n    <span className=\"children\">child:2</span>\n  </View>\n);\n\nStory.storyName = 'View';\n\nStory.args = {\n  fit: false,\n  row: false,\n  tag: 'div',\n  wide: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,UAAI,EAAKA,KAAK,eACb;IAAM,SAAS,EAAC;EAAU,aAAe,eACzC;IAAM,SAAS,EAAC;EAAU,aAAe,CACpC;AAAA,CACR;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,MAAM;AAExBF,KAAK,CAACG,IAAI;EACRC,GAAG,EAAE,KAAK;EACVC,GAAG,EAAE,KAAK;EACVC,GAAG,EAAE,KAAK;EACVC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDP,KAAK,CAACQ,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"View.stories.js","names":["title","Story","props","storyName","args","fit","forceRow","row","tag","wide","argTypes"],"sources":["../../../src/primitives/View/View.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { View } from './View';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n  <View {...props}>\n    <span className=\"children\">child:1</span>\n    <span className=\"children\">child:2</span>\n  </View>\n);\n\nStory.storyName = 'View';\n\nStory.args = {\n  fit: false,\n  forceRow: false,\n  row: false,\n  tag: 'div',\n  wide: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,UAAI,EAAKA,KAAK,eACb;IAAM,SAAS,EAAC;EAAU,aAAe,eACzC;IAAM,SAAS,EAAC;EAAU,aAAe,CACpC;AAAA,CACR;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,MAAM;AAExBF,KAAK,CAACG,IAAI;EACRC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,KAAK;EACfC,GAAG,EAAE,KAAK;EACVC,GAAG,EAAE,KAAK;EACVC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDR,KAAK,CAACS,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -28,6 +28,14 @@ exports[`primitive:<View> prop:fit 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<View> prop:forceRow 1`] = `
+<DocumentFragment>
+  <div
+    class="view forceRow"
+  />
+</DocumentFragment>
+`;
+
 exports[`primitive:<View> prop:row 1`] = `
 <DocumentFragment>
   <div

package/build/theme/default.theme.css

@@ -183,7 +183,7 @@
 
   /* Calendar */
   --mirai-ui-calendar-caption-font-size: 10px;
-  --mirai-ui-calendar-caption-line-height: var(--mirai-ui-calendar-caption-font-size) * 1.5;
+  --mirai-ui-calendar-caption-line-height: calc(var(--mirai-ui-calendar-caption-font-size) * 1.5);
   --mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
   --mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
   --mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);

package/build/theme/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  DIRECTION_TYPE: true
+};
+Object.defineProperty(exports, "DIRECTION_TYPE", {
+  enumerable: true,
+  get: function get() {
+    return _theme2.DIRECTION_TYPE;
+  }
+});
 var _theme = require("./theme");
 Object.keys(_theme).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _theme[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -14,4 +24,5 @@ Object.keys(_theme).forEach(function (key) {
     }
   });
 });
+var _theme2 = require("./theme.constants");
 //# sourceMappingURL=index.js.map

package/build/theme/index.js.map

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

package/build/theme/theme.constants.js

@@ -3,9 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAGNITUDES = exports.DOMAIN = exports.COLORS = void 0;
+exports.MAGNITUDES = exports.DOMAIN = exports.DIRECTION_TYPE = exports.DIRECTION = exports.COLORS = void 0;
+var _DIRECTION;
+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); }
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var COLORS = ['accent'];
 exports.COLORS = COLORS;
+var DIRECTION_TYPE = {
+  LEFT: 0,
+  RIGHT: 1
+};
+exports.DIRECTION_TYPE = DIRECTION_TYPE;
+var DIRECTION = (_DIRECTION = {}, _defineProperty(_DIRECTION, DIRECTION_TYPE.LEFT, {
+  'text-align': 'left',
+  'text-direction': 'ltr',
+  'row-direction': 'row'
+}), _defineProperty(_DIRECTION, DIRECTION_TYPE.RIGHT, {
+  'text-align': 'right',
+  'text-direction': 'rtl',
+  'row-direction': 'row-reverse'
+}), _DIRECTION);
+exports.DIRECTION = DIRECTION;
 var DOMAIN = '--mirai-ui-';
 exports.DOMAIN = DOMAIN;
 var MAGNITUDES = [400, 300, 200];

package/build/theme/theme.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.constants.js","names":["COLORS","DOMAIN","MAGNITUDES"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DOMAIN = '--mirai-ui-';\n\nconst MAGNITUDES = [400, 300, 200];\n\nexport { COLORS, DOMAIN, MAGNITUDES };\n"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,MAAM,GAAG,aAAa;AAAC;AAE7B,IAAMC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAAC"}
+{"version":3,"file":"theme.constants.js","names":["COLORS","DIRECTION_TYPE","LEFT","RIGHT","DIRECTION","DOMAIN","MAGNITUDES"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DIRECTION_TYPE = {\n  LEFT: 0,\n  RIGHT: 1,\n};\nconst DIRECTION = {\n  [DIRECTION_TYPE.LEFT]: {\n    'text-align': 'left',\n    'text-direction': 'ltr',\n    'row-direction': 'row',\n  },\n  [DIRECTION_TYPE.RIGHT]: {\n    'text-align': 'right',\n    'text-direction': 'rtl',\n    'row-direction': 'row-reverse',\n  },\n};\nconst DOMAIN = '--mirai-ui-';\n\nconst MAGNITUDES = [400, 300, 200];\n\nexport { COLORS, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES };\n"],"mappings":";;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE;AACT,CAAC;AAAC;AACF,IAAMC,SAAS,iDACZH,cAAc,CAACC,IAAI,EAAG;EACrB,YAAY,EAAE,MAAM;EACpB,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE;AACnB,CAAC,+BACAD,cAAc,CAACE,KAAK,EAAG;EACtB,YAAY,EAAE,OAAO;EACrB,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE;AACnB,CAAC,cACF;AAAC;AACF,IAAME,MAAM,GAAG,aAAa;AAAC;AAE7B,IAAMC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAAC"}

package/build/theme/theme.js

@@ -6,6 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.Theme = void 0;
 var _helpers = require("./helpers");
 var _theme = require("./theme.constants");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -39,7 +43,8 @@ var Theme = {
       }, [])));
     }, []);
     keys.forEach(function (key) {
-      return variables[(0, _helpers.camelcase)(key.replace(domain, ''))] = style.getPropertyValue(key);
+      var _style$getPropertyVal;
+      return variables[(0, _helpers.camelcase)(key.replace(domain, ''))] = (_style$getPropertyVal = style.getPropertyValue(key)) === null || _style$getPropertyVal === void 0 ? void 0 : _style$getPropertyVal.trim();
     });
     return variables;
   },
@@ -62,6 +67,23 @@ var Theme = {
         return Theme.setVariable("".concat(color, "-").concat(magnitude), (0, _helpers.colorShade)(theme[color], magnitude));
       });
     });
+  },
+  getDirection: function getDirection() {
+    var _Theme$get = Theme.get(),
+      textDirection = _Theme$get.textDirection;
+    return textDirection !== _theme.DIRECTION[_theme.DIRECTION_TYPE.RIGHT]['text-direction'] ? _theme.DIRECTION_TYPE.LEFT : _theme.DIRECTION_TYPE.RIGHT;
+  },
+  setDirection: function setDirection() {
+    var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _theme.DIRECTION_TYPE.LEFT;
+    if (!Object.values(_theme.DIRECTION_TYPE).includes(direction)) return;
+    var variables = _theme.DIRECTION[direction] || {};
+    Object.entries(variables).map(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      return Theme.setVariable(key, value);
+    });
+    return direction;
   }
 };
 exports.Theme = Theme;

package/build/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["Theme","get","domain","DOMAIN","style","getComputedStyle","document","querySelector","variables","keys","Array","from","styleSheets","filter","stylesheet","href","startsWith","window","location","origin","cssRules","reduce","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","setVariable","variable","setProperty","shadeColors","theme","COLORS","color","undefined","MAGNITUDES","magnitude","colorShade"],"sources":["../../src/theme/theme.js"],"sourcesContent":["import { camelcase, colorShade } from './helpers';\nimport { COLORS, DOMAIN, MAGNITUDES } from './theme.constants';\n\nexport const Theme = {\n  get: (domain = DOMAIN) => {\n    const style = getComputedStyle(document.querySelector(':root'));\n    const variables = {};\n\n    const keys = Array.from(document.styleSheets)\n      .filter((stylesheet) => {\n        try {\n          return (\n            (stylesheet.href === null || stylesheet.href.startsWith(window.location.origin)) &&\n            (stylesheet.cssRules ?? {})\n          );\n        } catch {\n          return false;\n        }\n      })\n      .reduce(\n        (stylesheet, { cssRules } = {}) => [\n          ...stylesheet,\n          ...Array.from(cssRules).reduce(\n            (value, { selectorText = '', style = [] } = {}) =>\n              selectorText === ':root'\n                ? [...value, ...Array.from(style).filter((name) => name.startsWith(domain))]\n                : value,\n            [],\n          ),\n        ],\n        [],\n      );\n\n    keys.forEach((key) => (variables[camelcase(key.replace(domain, ''))] = style.getPropertyValue(key)));\n\n    return variables;\n  },\n\n  setVariable: (variable, value, domain = DOMAIN) => {\n    const { style } = document.querySelector(':root');\n\n    style.setProperty(`${domain}${variable}`, value);\n\n    // ! TODO: Should revisit this \"algo\"\n    // Theme.shadeColors();\n  },\n\n  shadeColors: () => {\n    const theme = Theme.get();\n\n    COLORS.filter((color) => theme[color] !== undefined).forEach((color) =>\n      MAGNITUDES.forEach((magnitude) =>\n        Theme.setVariable(`${color}-${magnitude}`, colorShade(theme[color], magnitude)),\n      ),\n    );\n  },\n};\n"],"mappings":";;;;;;AAAA;AACA;AAA+D;AAAA;AAAA;AAAA;AAAA;AAAA;AAExD,IAAMA,KAAK,GAAG;EACnBC,GAAG,EAAE,eAAqB;IAAA,IAApBC,MAAM,uEAAGC,aAAM;IACnB,IAAMC,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/D,IAAMC,SAAS,GAAG,CAAC,CAAC;IAEpB,IAAMC,IAAI,GAAGC,KAAK,CAACC,IAAI,CAACL,QAAQ,CAACM,WAAW,CAAC,CAC1CC,MAAM,CAAC,UAACC,UAAU,EAAK;MACtB,IAAI;QAAA;QACF,OACE,CAACA,UAAU,CAACC,IAAI,KAAK,IAAI,IAAID,UAAU,CAACC,IAAI,CAACC,UAAU,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,8BAC9EL,UAAU,CAACM,QAAQ,uEAAI,CAAC,CAAC,CAAC;MAE/B,CAAC,CAAC,gBAAM;QACN,OAAO,KAAK;MACd;IACF,CAAC,CAAC,CACDC,MAAM,CACL,UAACP,UAAU;MAAA,+EAAiB,CAAC,CAAC;QAAfM,QAAQ,QAARA,QAAQ;MAAA,oCAClBN,UAAU,sBACVJ,KAAK,CAACC,IAAI,CAACS,QAAQ,CAAC,CAACC,MAAM,CAC5B,UAACC,KAAK;QAAA,gFAAsC,CAAC,CAAC;UAAA,2BAApCC,YAAY;UAAZA,YAAY,mCAAG,EAAE;UAAA,oBAAEnB,KAAK;UAALA,KAAK,4BAAG,EAAE;QAAA,OACrCmB,YAAY,KAAK,OAAO,gCAChBD,KAAK,sBAAKZ,KAAK,CAACC,IAAI,CAACP,KAAK,CAAC,CAACS,MAAM,CAAC,UAACW,IAAI;UAAA,OAAKA,IAAI,CAACR,UAAU,CAACd,MAAM,CAAC;QAAA,EAAC,KACzEoB,KAAK;MAAA,GACX,EAAE,CACH;IAAA,CACF,EACD,EAAE,CACH;IAEHb,IAAI,CAACgB,OAAO,CAAC,UAACC,GAAG;MAAA,OAAMlB,SAAS,CAAC,IAAAmB,kBAAS,EAACD,GAAG,CAACE,OAAO,CAAC1B,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,GAAGE,KAAK,CAACyB,gBAAgB,CAACH,GAAG,CAAC;IAAA,CAAC,CAAC;IAEpG,OAAOlB,SAAS;EAClB,CAAC;EAEDsB,WAAW,EAAE,qBAACC,QAAQ,EAAET,KAAK,EAAsB;IAAA,IAApBpB,MAAM,uEAAGC,aAAM;IAC5C,4BAAkBG,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;MAAzCH,KAAK,yBAALA,KAAK;IAEbA,KAAK,CAAC4B,WAAW,WAAI9B,MAAM,SAAG6B,QAAQ,GAAIT,KAAK,CAAC;;IAEhD;IACA;EACF,CAAC;;EAEDW,WAAW,EAAE,uBAAM;IACjB,IAAMC,KAAK,GAAGlC,KAAK,CAACC,GAAG,EAAE;IAEzBkC,aAAM,CAACtB,MAAM,CAAC,UAACuB,KAAK;MAAA,OAAKF,KAAK,CAACE,KAAK,CAAC,KAAKC,SAAS;IAAA,EAAC,CAACZ,OAAO,CAAC,UAACW,KAAK;MAAA,OACjEE,iBAAU,CAACb,OAAO,CAAC,UAACc,SAAS;QAAA,OAC3BvC,KAAK,CAAC8B,WAAW,WAAIM,KAAK,cAAIG,SAAS,GAAI,IAAAC,mBAAU,EAACN,KAAK,CAACE,KAAK,CAAC,EAAEG,SAAS,CAAC,CAAC;MAAA,EAChF;IAAA,EACF;EACH;AACF,CAAC;AAAC"}
+{"version":3,"file":"theme.js","names":["Theme","get","domain","DOMAIN","style","getComputedStyle","document","querySelector","variables","keys","Array","from","styleSheets","filter","stylesheet","href","startsWith","window","location","origin","cssRules","reduce","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","trim","setVariable","variable","setProperty","shadeColors","theme","COLORS","color","undefined","MAGNITUDES","magnitude","colorShade","getDirection","textDirection","DIRECTION","DIRECTION_TYPE","RIGHT","LEFT","setDirection","direction","Object","values","includes","entries","map"],"sources":["../../src/theme/theme.js"],"sourcesContent":["import { camelcase, colorShade } from './helpers';\nimport { COLORS, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES } from './theme.constants';\n\nexport const Theme = {\n  get: (domain = DOMAIN) => {\n    const style = getComputedStyle(document.querySelector(':root'));\n    const variables = {};\n\n    const keys = Array.from(document.styleSheets)\n      .filter((stylesheet) => {\n        try {\n          return (\n            (stylesheet.href === null || stylesheet.href.startsWith(window.location.origin)) &&\n            (stylesheet.cssRules ?? {})\n          );\n        } catch {\n          return false;\n        }\n      })\n      .reduce(\n        (stylesheet, { cssRules } = {}) => [\n          ...stylesheet,\n          ...Array.from(cssRules).reduce(\n            (value, { selectorText = '', style = [] } = {}) =>\n              selectorText === ':root'\n                ? [...value, ...Array.from(style).filter((name) => name.startsWith(domain))]\n                : value,\n            [],\n          ),\n        ],\n        [],\n      );\n\n    keys.forEach((key) => (variables[camelcase(key.replace(domain, ''))] = style.getPropertyValue(key)?.trim()));\n\n    return variables;\n  },\n\n  setVariable: (variable, value, domain = DOMAIN) => {\n    const { style } = document.querySelector(':root');\n\n    style.setProperty(`${domain}${variable}`, value);\n\n    // ! TODO: Should revisit this \"algo\"\n    // Theme.shadeColors();\n  },\n\n  shadeColors: () => {\n    const theme = Theme.get();\n\n    COLORS.filter((color) => theme[color] !== undefined).forEach((color) =>\n      MAGNITUDES.forEach((magnitude) =>\n        Theme.setVariable(`${color}-${magnitude}`, colorShade(theme[color], magnitude)),\n      ),\n    );\n  },\n\n  getDirection: () => {\n    const { textDirection } = Theme.get();\n\n    return textDirection !== DIRECTION[DIRECTION_TYPE.RIGHT]['text-direction']\n      ? DIRECTION_TYPE.LEFT\n      : DIRECTION_TYPE.RIGHT;\n  },\n\n  setDirection: (direction = DIRECTION_TYPE.LEFT) => {\n    if (!Object.values(DIRECTION_TYPE).includes(direction)) return;\n\n    const variables = DIRECTION[direction] || {};\n    Object.entries(variables).map(([key, value]) => Theme.setVariable(key, value));\n\n    return direction;\n  },\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.118",
+  "version": "1.0.120",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",