@mirai/ui 1.1.2 → 1.1.3

package/build/theme/helpers/index.js

@@ -14,14 +14,14 @@ Object.keys(_camelcase).forEach(function (key) {
     }
   });
 });
-var _colorShade = require("./colorShade");
-Object.keys(_colorShade).forEach(function (key) {
+var _palette = require("./palette");
+Object.keys(_palette).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _colorShade[key]) return;
+  if (key in exports && exports[key] === _palette[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _colorShade[key];
+      return _palette[key];
     }
   });
 });

package/build/theme/helpers/index.js.map

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

package/build/theme/helpers/palette.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.palette = void 0;
+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 _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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+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; }
+var HEXCOLOR_REGEX = /^#([0-9A-F]{3}){1,2}$/i;
+
+// -- parsers
+var hexToRgb = function hexToRgb(hex) {
+  var bigint = parseInt(hex.replace(/^#/, ''), 16);
+  var r = bigint >> 16 & 255;
+  var g = bigint >> 8 & 255;
+  var b = bigint & 255;
+  return [r, g, b];
+};
+var rgbToHex = function rgbToHex() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [],
+    _ref2 = _slicedToArray(_ref, 3),
+    r = _ref2[0],
+    g = _ref2[1],
+    b = _ref2[2];
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+};
+
+// -- color modifiers
+var lighten = function lighten(rgb) {
+  var factor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return rgb.map(function (color) {
+    return Math.max(0, Math.min(255, Math.round(color + factor * (255 - color))));
+  });
+};
+var darken = function darken(rgb) {
+  var factor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return rgb.map(function (color) {
+    return Math.max(0, Math.min(255, Math.round(color * (1 - factor))));
+  });
+};
+var palette = function palette() {
+  var hexColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#3978c5';
+  if (!HEXCOLOR_REGEX.test(hexColor)) return;
+  var rgbColor = hexToRgb(hexColor);
+  return {
+    dark: rgbToHex(darken(rgbColor, 0.4)),
+    base: hexColor,
+    light: rgbToHex(lighten(rgbColor, 0.4)),
+    border: rgbToHex(lighten(rgbColor, 0.6)),
+    background: rgbToHex(lighten(rgbColor, 0.9))
+  };
+};
+exports.palette = palette;
+//# sourceMappingURL=palette.js.map

package/build/theme/helpers/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","names":["HEXCOLOR_REGEX","hexToRgb","hex","bigint","parseInt","replace","r","g","b","rgbToHex","toString","slice","toUpperCase","lighten","rgb","factor","map","color","Math","max","min","round","darken","palette","hexColor","test","rgbColor","dark","base","light","border","background"],"sources":["../../../src/theme/helpers/palette.js"],"sourcesContent":["const HEXCOLOR_REGEX = /^#([0-9A-F]{3}){1,2}$/i;\n\n// -- parsers\nconst hexToRgb = (hex) => {\n  const bigint = parseInt(hex.replace(/^#/, ''), 16);\n\n  const r = (bigint >> 16) & 255;\n  const g = (bigint >> 8) & 255;\n  const b = bigint & 255;\n\n  return [r, g, b];\n};\n\nconst rgbToHex = ([r, g, b] = []) => {\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n};\n\n// -- color modifiers\nconst lighten = (rgb, factor = 0) => {\n  return rgb.map((color) => Math.max(0, Math.min(255, Math.round(color + factor * (255 - color)))));\n};\n\nconst darken = (rgb, factor = 0) => {\n  return rgb.map((color) => Math.max(0, Math.min(255, Math.round(color * (1 - factor)))));\n};\n\nexport const palette = (hexColor = '#3978c5') => {\n  if (!HEXCOLOR_REGEX.test(hexColor)) return;\n\n  const rgbColor = hexToRgb(hexColor);\n\n  return {\n    dark: rgbToHex(darken(rgbColor, 0.4)),\n    base: hexColor,\n    light: rgbToHex(lighten(rgbColor, 0.4)),\n    border: rgbToHex(lighten(rgbColor, 0.6)),\n    background: rgbToHex(lighten(rgbColor, 0.9)),\n  };\n};\n"],"mappings":";;;;;;;;;;;;AAAA,IAAMA,cAAc,GAAG,wBAAwB;;AAE/C;AACA,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,GAAG,EAAK;EACxB,IAAMC,MAAM,GAAGC,QAAQ,CAACF,GAAG,CAACG,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;EAElD,IAAMC,CAAC,GAAIH,MAAM,IAAI,EAAE,GAAI,GAAG;EAC9B,IAAMI,CAAC,GAAIJ,MAAM,IAAI,CAAC,GAAI,GAAG;EAC7B,IAAMK,CAAC,GAAGL,MAAM,GAAG,GAAG;EAEtB,OAAO,CAACG,CAAC,EAAEC,CAAC,EAAEC,CAAC,CAAC;AAClB,CAAC;AAED,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,GAAuB;EAAA,+EAAP,EAAE;IAAA;IAAbH,CAAC;IAAEC,CAAC;IAAEC,CAAC;EACxB,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAKF,CAAC,IAAI,EAAE,CAAC,IAAIC,CAAC,IAAI,CAAC,CAAC,GAAGC,CAAC,EAAEE,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,CAAC,CAACC,WAAW,EAAE;AACzF,CAAC;;AAED;AACA,IAAMC,OAAO,GAAG,SAAVA,OAAO,CAAIC,GAAG,EAAiB;EAAA,IAAfC,MAAM,uEAAG,CAAC;EAC9B,OAAOD,GAAG,CAACE,GAAG,CAAC,UAACC,KAAK;IAAA,OAAKC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,GAAG,EAAEF,IAAI,CAACG,KAAK,CAACJ,KAAK,GAAGF,MAAM,IAAI,GAAG,GAAGE,KAAK,CAAC,CAAC,CAAC,CAAC;EAAA,EAAC;AACnG,CAAC;AAED,IAAMK,MAAM,GAAG,SAATA,MAAM,CAAIR,GAAG,EAAiB;EAAA,IAAfC,MAAM,uEAAG,CAAC;EAC7B,OAAOD,GAAG,CAACE,GAAG,CAAC,UAACC,KAAK;IAAA,OAAKC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAAC,GAAG,EAAEF,IAAI,CAACG,KAAK,CAACJ,KAAK,IAAI,CAAC,GAAGF,MAAM,CAAC,CAAC,CAAC,CAAC;EAAA,EAAC;AACzF,CAAC;AAEM,IAAMQ,OAAO,GAAG,SAAVA,OAAO,GAA6B;EAAA,IAAzBC,QAAQ,uEAAG,SAAS;EAC1C,IAAI,CAACxB,cAAc,CAACyB,IAAI,CAACD,QAAQ,CAAC,EAAE;EAEpC,IAAME,QAAQ,GAAGzB,QAAQ,CAACuB,QAAQ,CAAC;EAEnC,OAAO;IACLG,IAAI,EAAElB,QAAQ,CAACa,MAAM,CAACI,QAAQ,EAAE,GAAG,CAAC,CAAC;IACrCE,IAAI,EAAEJ,QAAQ;IACdK,KAAK,EAAEpB,QAAQ,CAACI,OAAO,CAACa,QAAQ,EAAE,GAAG,CAAC,CAAC;IACvCI,MAAM,EAAErB,QAAQ,CAACI,OAAO,CAACa,QAAQ,EAAE,GAAG,CAAC,CAAC;IACxCK,UAAU,EAAEtB,QAAQ,CAACI,OAAO,CAACa,QAAQ,EAAE,GAAG,CAAC;EAC7C,CAAC;AACH,CAAC;AAAC"}

package/build/theme/theme.constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAGNITUDES = exports.DOMAIN = exports.DIRECTION_TYPE = exports.DIRECTION = exports.DEBOUNCE_TIMEOUT_CACHE = exports.COLORS = void 0;
+exports.DOMAIN = exports.DIRECTION_TYPE = exports.DIRECTION = exports.DEBOUNCE_TIMEOUT_CACHE = 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; }
@@ -30,6 +30,4 @@ var DIRECTION = (_DIRECTION = {}, _defineProperty(_DIRECTION, DIRECTION_TYPE.LEF
 exports.DIRECTION = DIRECTION;
 var DOMAIN = '--mirai-ui-';
 exports.DOMAIN = DOMAIN;
-var MAGNITUDES = [400, 300, 200];
-exports.MAGNITUDES = MAGNITUDES;
 //# sourceMappingURL=theme.constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.constants.js","names":["COLORS","DEBOUNCE_TIMEOUT_CACHE","DIRECTION_TYPE","LEFT","RIGHT","DIRECTION","DOMAIN","MAGNITUDES"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DEBOUNCE_TIMEOUT_CACHE = 2000;\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, DEBOUNCE_TIMEOUT_CACHE, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES };\n"],"mappings":";;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,sBAAsB,GAAG,IAAI;AAAC;AAEpC,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"}
+{"version":3,"file":"theme.constants.js","names":["COLORS","DEBOUNCE_TIMEOUT_CACHE","DIRECTION_TYPE","LEFT","RIGHT","DIRECTION","DOMAIN"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DEBOUNCE_TIMEOUT_CACHE = 2000;\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\nexport { COLORS, DEBOUNCE_TIMEOUT_CACHE, DIRECTION, DIRECTION_TYPE, DOMAIN };\n"],"mappings":";;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,sBAAsB,GAAG,IAAI;AAAC;AAEpC,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"}

package/build/theme/theme.js

@@ -71,20 +71,27 @@ var Theme = {
       style = _document$querySelect.style;
     style.setProperty("".concat(domain).concat(variable), value);
     Theme.clearCache();
-
-    // ! TODO: Should revisit this "algo"
-    // Theme.shadeColors();
   },
-
-  shadeColors: function shadeColors() {
-    var theme = Theme.get();
-    _theme.COLORS.filter(function (color) {
-      return theme[color] !== undefined;
-    }).forEach(function (color) {
-      return _theme.MAGNITUDES.forEach(function (magnitude) {
-        return Theme.setVariable("".concat(color, "-").concat(magnitude), (0, _helpers.colorShade)(theme[color], magnitude));
-      });
+  generatePalette: function generatePalette(variable, value) {
+    var _ref4 = (0, _helpers.palette)(value) || {},
+      dark = _ref4.dark,
+      base = _ref4.base,
+      light = _ref4.light,
+      border = _ref4.border,
+      background = _ref4.background;
+    Object.entries({
+      dark: dark,
+      base: base,
+      light: light,
+      border: border,
+      background: background
+    }).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        value = _ref6[1];
+      Theme.setVariable("".concat(variable, "-").concat(key), value);
     });
+    Theme.clearCache();
   },
   getDirection: function getDirection() {
     var _Theme$get = Theme.get(),
@@ -95,10 +102,10 @@ var Theme = {
     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 (_ref4) {
-      var _ref5 = _slicedToArray(_ref4, 2),
-        key = _ref5[0],
-        value = _ref5[1];
+    Object.entries(variables).map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+        key = _ref8[0],
+        value = _ref8[1];
       return Theme.setVariable(key, value);
     });
     return direction;

package/build/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["Theme","get","domain","DOMAIN","window","Mirai","themeCache","style","getComputedStyle","document","querySelector","variables","keys","Array","from","styleSheets","filter","stylesheet","href","startsWith","location","origin","cssRules","reduce","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","trim","setTimeout","clearCache","DEBOUNCE_TIMEOUT_CACHE","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, DEBOUNCE_TIMEOUT_CACHE, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES } from './theme.constants';\n\nexport const Theme = {\n  get: (domain = DOMAIN) => {\n    const { Mirai: { themeCache } = {} } = window || {};\n    if (themeCache) return themeCache;\n\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    window.Mirai = { ...window.Mirai, themeCache: variables };\n    setTimeout(() => Theme.clearCache(), DEBOUNCE_TIMEOUT_CACHE);\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    Theme.clearCache();\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  clearCache: () => {\n    if (!window?.Mirai) return;\n\n    window.Mirai.themeCache = undefined;\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":["Theme","get","domain","DOMAIN","window","Mirai","themeCache","style","getComputedStyle","document","querySelector","variables","keys","Array","from","styleSheets","filter","stylesheet","href","startsWith","location","origin","cssRules","reduce","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","trim","setTimeout","clearCache","DEBOUNCE_TIMEOUT_CACHE","setVariable","variable","setProperty","generatePalette","palette","dark","base","light","border","background","Object","entries","getDirection","textDirection","DIRECTION","DIRECTION_TYPE","RIGHT","LEFT","setDirection","direction","values","includes","map","undefined"],"sources":["../../src/theme/theme.js"],"sourcesContent":["import { camelcase, palette } from './helpers';\nimport { DEBOUNCE_TIMEOUT_CACHE, DIRECTION, DIRECTION_TYPE, DOMAIN } from './theme.constants';\n\nexport const Theme = {\n  get: (domain = DOMAIN) => {\n    const { Mirai: { themeCache } = {} } = window || {};\n    if (themeCache) return themeCache;\n\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    window.Mirai = { ...window.Mirai, themeCache: variables };\n    setTimeout(() => Theme.clearCache(), DEBOUNCE_TIMEOUT_CACHE);\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    Theme.clearCache();\n  },\n\n  generatePalette: (variable, value) => {\n    const { dark, base, light, border, background } = palette(value) || {};\n\n    Object.entries({ dark, base, light, border, background }).forEach(([key, value]) => {\n      Theme.setVariable(`${variable}-${key}`, value);\n    });\n    Theme.clearCache();\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  clearCache: () => {\n    if (!window?.Mirai) return;\n\n    window.Mirai.themeCache = undefined;\n  },\n};\n"],"mappings":"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"}

package/build/theme/theme.stories.js

@@ -1,2 +1,85 @@
 "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 _ = require("..");
+var _theme = require("./theme");
+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 _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 _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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+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; }
+var _default = {
+  title: 'Hooks'
+};
+exports.default = _default;
+var Story = function Story() {
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    accent = _useState2[0],
+    setAccent = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    setTimestamp = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var _Theme$get = _theme.Theme.get(),
+      accent = _Theme$get.accent;
+    setAccent(accent);
+  }, []);
+  (0, _react.useEffect)(function () {
+    _theme.Theme.generatePalette('accent', accent);
+    setTimestamp(new Date().getTime());
+  }, [accent]);
+  var _Theme$get2 = _theme.Theme.get(),
+    dark = _Theme$get2.accentDark,
+    light = _Theme$get2.accentLight,
+    border = _Theme$get2.accentBorder,
+    background = _Theme$get2.accentBackground;
+  var palette = {
+    dark: dark,
+    accent: accent,
+    light: light,
+    border: border,
+    background: background
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.View, null, /*#__PURE__*/_react.default.createElement(_.InputText, {
+    label: "Accent",
+    name: "accent",
+    value: accent,
+    onChange: setAccent
+  })), /*#__PURE__*/_react.default.createElement(_.View, {
+    row: true,
+    wide: true
+  }, Object.entries(palette).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return /*#__PURE__*/_react.default.createElement(_.View, {
+      key: key,
+      row: true,
+      wide: true,
+      style: {
+        backgroundColor: !!value ? value : '#cccccc',
+        padding: '1rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_.Text, {
+      align: "center",
+      tiny: true,
+      style: {
+        color: ['dark', 'accent'].includes(key) ? '#fff' : '#000'
+      }
+    }, key, " ", value));
+  })));
+};
+exports.Story = Story;
+Story.storyName = 'Theme';
+Story.args = {};
+Story.argTypes = {};
 //# sourceMappingURL=theme.stories.js.map

package/build/theme/theme.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.stories.js","names":[],"sources":["../../src/theme/theme.stories.jsx"],"sourcesContent":[""],"mappings":""}
+{"version":3,"file":"theme.stories.js","names":["title","Story","useState","accent","setAccent","setTimestamp","useEffect","Theme","get","generatePalette","Date","getTime","dark","accentDark","light","accentLight","border","accentBorder","background","accentBackground","palette","Object","entries","map","key","value","backgroundColor","padding","color","includes","storyName","args","argTypes"],"sources":["../../src/theme/theme.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { InputText, Text, View } from '..';\nimport { Theme } from './theme';\n\nexport default { title: 'Hooks' };\n\nexport const Story = () => {\n  const [accent, setAccent] = useState();\n  const [, setTimestamp] = useState();\n\n  useEffect(() => {\n    const { accent } = Theme.get();\n    setAccent(accent);\n  }, []);\n\n  useEffect(() => {\n    Theme.generatePalette('accent', accent);\n    setTimestamp(new Date().getTime());\n  }, [accent]);\n\n  const { accentDark: dark, accentLight: light, accentBorder: border, accentBackground: background } = Theme.get();\n  const palette = { dark, accent, light, border, background };\n\n  return (\n    <>\n      <View>\n        <InputText label=\"Accent\" name=\"accent\" value={accent} onChange={setAccent} />\n      </View>\n\n      <View row wide>\n        {Object.entries(palette).map(([key, value]) => (\n          <View key={key} row wide style={{ backgroundColor: !!value ? value : '#cccccc', padding: '1rem' }}>\n            <Text align=\"center\" tiny style={{ color: ['dark', 'accent'].includes(key) ? '#fff' : '#000' }}>\n              {key} {value}\n            </Text>\n          </View>\n        ))}\n      </View>\n    </>\n  );\n};\n\nStory.storyName = 'Theme';\n\nStory.args = {};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAQ,CAAC;AAAA;AAE1B,IAAMC,KAAK,GAAG,SAARA,KAAK,GAAS;EACzB,gBAA4B,IAAAC,eAAQ,GAAE;IAAA;IAA/BC,MAAM;IAAEC,SAAS;EACxB,iBAAyB,IAAAF,eAAQ,GAAE;IAAA;IAA1BG,YAAY;EAErB,IAAAC,gBAAS,EAAC,YAAM;IACd,iBAAmBC,YAAK,CAACC,GAAG,EAAE;MAAtBL,MAAM,cAANA,MAAM;IACdC,SAAS,CAACD,MAAM,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAG,gBAAS,EAAC,YAAM;IACdC,YAAK,CAACE,eAAe,CAAC,QAAQ,EAAEN,MAAM,CAAC;IACvCE,YAAY,CAAC,IAAIK,IAAI,EAAE,CAACC,OAAO,EAAE,CAAC;EACpC,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEZ,kBAAqGI,YAAK,CAACC,GAAG,EAAE;IAA5FI,IAAI,eAAhBC,UAAU;IAAqBC,KAAK,eAAlBC,WAAW;IAAuBC,MAAM,eAApBC,YAAY;IAA4BC,UAAU,eAA5BC,gBAAgB;EACpF,IAAMC,OAAO,GAAG;IAAER,IAAI,EAAJA,IAAI;IAAET,MAAM,EAANA,MAAM;IAAEW,KAAK,EAALA,KAAK;IAAEE,MAAM,EAANA,MAAM;IAAEE,UAAU,EAAVA;EAAW,CAAC;EAE3D,oBACE,yEACE,6BAAC,MAAI,qBACH,6BAAC,WAAS;IAAC,KAAK,EAAC,QAAQ;IAAC,IAAI,EAAC,QAAQ;IAAC,KAAK,EAAEf,MAAO;IAAC,QAAQ,EAAEC;EAAU,EAAG,CACzE,eAEP,6BAAC,MAAI;IAAC,GAAG;IAAC,IAAI;EAAA,GACXiB,MAAM,CAACC,OAAO,CAACF,OAAO,CAAC,CAACG,GAAG,CAAC;IAAA;MAAEC,GAAG;MAAEC,KAAK;IAAA,oBACvC,6BAAC,MAAI;MAAC,GAAG,EAAED,GAAI;MAAC,GAAG;MAAC,IAAI;MAAC,KAAK,EAAE;QAAEE,eAAe,EAAE,CAAC,CAACD,KAAK,GAAGA,KAAK,GAAG,SAAS;QAAEE,OAAO,EAAE;MAAO;IAAE,gBAChG,6BAAC,MAAI;MAAC,KAAK,EAAC,QAAQ;MAAC,IAAI;MAAC,KAAK,EAAE;QAAEC,KAAK,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAACC,QAAQ,CAACL,GAAG,CAAC,GAAG,MAAM,GAAG;MAAO;IAAE,GAC5FA,GAAG,OAAGC,KAAK,CACP,CACF;EAAA,CACR,CAAC,CACG,CACN;AAEP,CAAC;AAAC;AAEFxB,KAAK,CAAC6B,SAAS,GAAG,OAAO;AAEzB7B,KAAK,CAAC8B,IAAI,GAAG,CAAC,CAAC;AAEf9B,KAAK,CAAC+B,QAAQ,GAAG,CAAC,CAAC"}

package/package.json

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

package/build/theme/helpers/colorShade.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.colorShade = void 0;
-var R = 0;
-var G = 8;
-var B = 16;
-var SCALE = {
-  400: 40,
-  300: 80,
-  200: 180
-};
-var colorShade = function colorShade() {
-  var hexColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000';
-  var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  if (!hexColor.charAt(0) === '#' || hexColor.length !== 7) return hexColor;
-  var decimalColor = parseInt(hexColor.slice(1), 16);
-  var range = function range(value) {
-    return value < 0 ? 0 : value > 255 ? 255 : value;
-  };
-  return '#' + [R, G, B].map(function (item) {
-    return range((decimalColor >> item & 0xff) + (SCALE[magnitude] || 0)) << item;
-  }).reduce(function (previous, current) {
-    return previous + current;
-  }, 0).toString(16).padStart(6, '0');
-};
-exports.colorShade = colorShade;
-//# sourceMappingURL=colorShade.js.map

package/build/theme/helpers/colorShade.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colorShade.js","names":["R","G","B","SCALE","colorShade","hexColor","magnitude","charAt","length","decimalColor","parseInt","slice","range","value","map","item","reduce","previous","current","toString","padStart"],"sources":["../../../src/theme/helpers/colorShade.js"],"sourcesContent":["const R = 0;\nconst G = 8;\nconst B = 16;\n\nconst SCALE = {\n  400: 40,\n  300: 80,\n  200: 180,\n};\n\nexport const colorShade = (hexColor = '#000000', magnitude = 0) => {\n  if (!hexColor.charAt(0) === '#' || hexColor.length !== 7) return hexColor;\n\n  const decimalColor = parseInt(hexColor.slice(1), 16);\n  const range = (value) => (value < 0 ? 0 : value > 255 ? 255 : value);\n\n  return (\n    '#' +\n    [R, G, B]\n      .map((item) => range(((decimalColor >> item) & 0xff) + (SCALE[magnitude] || 0)) << item)\n      .reduce((previous, current) => previous + current, 0)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAMA,CAAC,GAAG,CAAC;AACX,IAAMC,CAAC,GAAG,CAAC;AACX,IAAMC,CAAC,GAAG,EAAE;AAEZ,IAAMC,KAAK,GAAG;EACZ,GAAG,EAAE,EAAE;EACP,GAAG,EAAE,EAAE;EACP,GAAG,EAAE;AACP,CAAC;AAEM,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAA4C;EAAA,IAAxCC,QAAQ,uEAAG,SAAS;EAAA,IAAEC,SAAS,uEAAG,CAAC;EAC5D,IAAI,CAACD,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,IAAIF,QAAQ,CAACG,MAAM,KAAK,CAAC,EAAE,OAAOH,QAAQ;EAEzE,IAAMI,YAAY,GAAGC,QAAQ,CAACL,QAAQ,CAACM,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EACpD,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;IAAA,OAAMA,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK,GAAG,GAAG,GAAG,GAAG,GAAGA,KAAK;EAAA,CAAC;EAEpE,OACE,GAAG,GACH,CAACb,CAAC,EAAEC,CAAC,EAAEC,CAAC,CAAC,CACNY,GAAG,CAAC,UAACC,IAAI;IAAA,OAAKH,KAAK,CAAC,CAAEH,YAAY,IAAIM,IAAI,GAAI,IAAI,KAAKZ,KAAK,CAACG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,IAAIS,IAAI;EAAA,EAAC,CACvFC,MAAM,CAAC,UAACC,QAAQ,EAAEC,OAAO;IAAA,OAAKD,QAAQ,GAAGC,OAAO;EAAA,GAAE,CAAC,CAAC,CACpDC,QAAQ,CAAC,EAAE,CAAC,CACZC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AAEvB,CAAC;AAAC"}