@mirai/ui 1.0.221 → 1.1.0-beta

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

@@ -2,21 +2,21 @@
 
 exports[`primitive:<Layer> inherit:className 1`] = `
 <DocumentFragment>
-  <span />
-  <div
+  <ui_layer />
+  <ui_layer_content
     class="layer hidden"
   >
     <div
       class="mirai"
     />
-  </div>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> renders 1`] = `
 <DocumentFragment>
-  <span />
-  <div
+  <ui_layer />
+  <ui_layer_content
     class="layer hidden"
   />
 </DocumentFragment>
@@ -24,10 +24,10 @@ exports[`primitive:<Layer> renders 1`] = `
 
 exports[`primitive:<Layer> testId 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     data-testid="mirai"
   />
-  <div
+  <ui_layer_content
     class="layer hidden"
   />
 </DocumentFragment>
@@ -35,58 +35,61 @@ exports[`primitive:<Layer> testId 1`] = `
 
 exports[`primitive:<Layer> w/ centered && visible 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ component & <LayerContent> 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ component 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   />
@@ -95,56 +98,59 @@ exports[`primitive:<Layer> w/ component 1`] = `
 
 exports[`primitive:<Layer> w/ fixed 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer fixed hidden"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
+  </ui_layer>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ visible 1`] = `
 <DocumentFragment>
-  <span>
+  <ui_layer>
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;

package/build/primitives/Pressable/Pressable.constants.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.KEY_ENTER = void 0;
-var KEY_ENTER = 13;
+var KEY_ENTER = 'Enter';
 exports.KEY_ENTER = KEY_ENTER;
 //# sourceMappingURL=Pressable.constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pressable.constants.js","names":["KEY_ENTER"],"sources":["../../../src/primitives/Pressable/Pressable.constants.js"],"sourcesContent":["const KEY_ENTER = 13;\n\nexport { KEY_ENTER };\n"],"mappings":";;;;;;AAAA,IAAMA,SAAS,GAAG,EAAE;AAAC"}
+{"version":3,"file":"Pressable.constants.js","names":["KEY_ENTER"],"sources":["../../../src/primitives/Pressable/Pressable.constants.js"],"sourcesContent":["const KEY_ENTER = 'Enter';\n\nexport { KEY_ENTER };\n"],"mappings":";;;;;;AAAA,IAAMA,SAAS,GAAG,OAAO;AAAC"}

package/build/primitives/Pressable/Pressable.js

@@ -10,8 +10,10 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _Pressable = require("./Pressable.constants");
-var _PressableModule = _interopRequireDefault(require("./Pressable.module.css"));
-var _excluded = ["children", "disabled", "preventDefault", "tag", "onEnter", "onLeave", "onPress"];
+var style = _interopRequireWildcard(require("./Pressable.module.css"));
+var _excluded = ["children", "disabled", "preventDefault", "tabIndex", "tag", "onEnter", "onLeave", "onPress"];
+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 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; }
@@ -25,8 +27,10 @@ var Pressable = function Pressable(_ref) {
     disabled = _ref.disabled,
     _ref$preventDefault = _ref.preventDefault,
     preventDefault = _ref$preventDefault === void 0 ? true : _ref$preventDefault,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
     _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+    tag = _ref$tag === void 0 ? 'pressable' : _ref$tag,
     onEnter = _ref.onEnter,
     onLeave = _ref.onLeave,
     _ref$onPress = _ref.onPress,
@@ -37,6 +41,7 @@ var Pressable = function Pressable(_ref) {
     role: others.role || 'pressable',
     tag: tag
   }, !disabled ? {
+    tabIndex: tabIndex,
     onClick: function onClick(event) {
       if (preventDefault) {
         event.preventDefault();
@@ -45,7 +50,7 @@ var Pressable = function Pressable(_ref) {
       onPress(event);
     },
     onKeyPress: function onKeyPress(event) {
-      if (event.keyCode === _Pressable.KEY_ENTER) {
+      if (event.key === _Pressable.KEY_ENTER) {
         if (preventDefault) {
           event.preventDefault();
           event.stopPropagation();
@@ -56,7 +61,7 @@ var Pressable = function Pressable(_ref) {
     onMouseEnter: onEnter,
     onMouseLeave: onLeave
   } : {}), {}, {
-    className: (0, _helpers.styles)(_PressableModule.default.pressable, disabled && _PressableModule.default.disabled, others.className)
+    className: (0, _helpers.styles)(style.pressable, disabled && style.disabled, others.className)
   }), children);
 };
 exports.Pressable = Pressable;
@@ -65,6 +70,7 @@ Pressable.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
   preventDefault: _propTypes.default.bool,
+  tabIndex: _propTypes.default.number,
   tag: _propTypes.default.string,
   onEnter: _propTypes.default.func,
   onLeave: _propTypes.default.func,

package/build/primitives/Pressable/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.js","names":["Pressable","children","disabled","preventDefault","tag","onEnter","onLeave","onPress","others","React","createElement","Primitive","role","onClick","event","stopPropagation","onKeyPress","keyCode","KEY_ENTER","onMouseEnter","onMouseLeave","className","styles","style","pressable","displayName","propTypes","PropTypes","oneOfType","string","node","bool","func"],"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({\n  children,\n  disabled,\n  preventDefault = true,\n  tag = 'div',\n  onEnter,\n  onLeave,\n  onPress = () => {},\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      disabled,\n      role: others.role || 'pressable',\n      tag,\n      ...(!disabled\n        ? {\n            onClick: (event) => {\n              if (preventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n              onPress(event);\n            },\n            onKeyPress: (event) => {\n              if (event.keyCode === KEY_ENTER) {\n                if (preventDefault) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n                onPress(event);\n              }\n            },\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n      className: styles(style.pressable, disabled && style.disabled, others.className),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,2BACRC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IAAA,gBACrBC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IACXC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,gDAEJH,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRU,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,WAAW;IAChCR,GAAG,EAAHA;EAAG,GACC,CAACF,QAAQ,GACT;IACEW,OAAO,EAAE,iBAACC,KAAK,EAAK;MAClB,IAAIX,cAAc,EAAE;QAClBW,KAAK,CAACX,cAAc,EAAE;QACtBW,KAAK,CAACC,eAAe,EAAE;MACzB;MACAR,OAAO,CAACO,KAAK,CAAC;IAChB,CAAC;IACDE,UAAU,EAAE,oBAACF,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACG,OAAO,KAAKC,oBAAS,EAAE;QAC/B,IAAIf,cAAc,EAAE;UAClBW,KAAK,CAACX,cAAc,EAAE;UACtBW,KAAK,CAACC,eAAe,EAAE;QACzB;QACAR,OAAO,CAACO,KAAK,CAAC;MAChB;IACF,CAAC;IACDK,YAAY,EAAEd,OAAO;IACrBe,YAAY,EAAEd;EAChB,CAAC,GACD,CAAC,CAAC;IACNe,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,SAAS,EAAEtB,QAAQ,IAAIqB,wBAAK,CAACrB,QAAQ,EAAEM,MAAM,CAACa,SAAS;EAAC,IAElFpB,QAAQ,CACT;AAAA;AAAC;AAEJD,SAAS,CAACyB,WAAW,GAAG,qBAAqB;AAE7CzB,SAAS,CAAC0B,SAAS,GAAG;EACpBzB,QAAQ,EAAE0B,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjE5B,QAAQ,EAAEyB,kBAAS,CAACI,IAAI;EACxB5B,cAAc,EAAEwB,kBAAS,CAACI,IAAI;EAC9B3B,GAAG,EAAEuB,kBAAS,CAACE,MAAM;EACrBxB,OAAO,EAAEsB,kBAAS,CAACK,IAAI;EACvB1B,OAAO,EAAEqB,kBAAS,CAACK,IAAI;EACvBzB,OAAO,EAAEoB,kBAAS,CAACK;AACrB,CAAC"}
+{"version":3,"file":"Pressable.js","names":["Pressable","children","disabled","preventDefault","tabIndex","tag","onEnter","onLeave","onPress","others","React","createElement","Primitive","role","onClick","event","stopPropagation","onKeyPress","key","KEY_ENTER","onMouseEnter","onMouseLeave","className","styles","style","pressable","displayName","propTypes","PropTypes","oneOfType","string","node","bool","number","func"],"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { KEY_ENTER } from './Pressable.constants';\nimport * as style from './Pressable.module.css';\n\nconst Pressable = ({\n  children,\n  disabled,\n  preventDefault = true,\n  tabIndex = 0,\n  tag = 'pressable',\n  onEnter,\n  onLeave,\n  onPress = () => {},\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      disabled,\n      role: others.role || 'pressable',\n      tag,\n      ...(!disabled\n        ? {\n            tabIndex,\n            onClick: (event) => {\n              if (preventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n              onPress(event);\n            },\n            onKeyPress: (event) => {\n              if (event.key === KEY_ENTER) {\n                if (preventDefault) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n                onPress(event);\n              }\n            },\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n      className: styles(style.pressable, disabled && style.disabled, others.className),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  tabIndex: PropTypes.number,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEhD,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,2BACRC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IAAA,qBACrBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IAAA,gBACZC,GAAG;IAAHA,GAAG,yBAAG,WAAW;IACjBC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,gDAEJH,MAAM;IACTP,QAAQ,EAARA,QAAQ;IACRW,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,WAAW;IAChCR,GAAG,EAAHA;EAAG,GACC,CAACH,QAAQ,GACT;IACEE,QAAQ,EAARA,QAAQ;IACRU,OAAO,EAAE,iBAACC,KAAK,EAAK;MAClB,IAAIZ,cAAc,EAAE;QAClBY,KAAK,CAACZ,cAAc,EAAE;QACtBY,KAAK,CAACC,eAAe,EAAE;MACzB;MACAR,OAAO,CAACO,KAAK,CAAC;IAChB,CAAC;IACDE,UAAU,EAAE,oBAACF,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACG,GAAG,KAAKC,oBAAS,EAAE;QAC3B,IAAIhB,cAAc,EAAE;UAClBY,KAAK,CAACZ,cAAc,EAAE;UACtBY,KAAK,CAACC,eAAe,EAAE;QACzB;QACAR,OAAO,CAACO,KAAK,CAAC;MAChB;IACF,CAAC;IACDK,YAAY,EAAEd,OAAO;IACrBe,YAAY,EAAEd;EAChB,CAAC,GACD,CAAC,CAAC;IACNe,SAAS,EAAE,IAAAC,eAAM,EAACC,KAAK,CAACC,SAAS,EAAEvB,QAAQ,IAAIsB,KAAK,CAACtB,QAAQ,EAAEO,MAAM,CAACa,SAAS;EAAC,IAElFrB,QAAQ,CACT;AAAA;AAAC;AAEJD,SAAS,CAAC0B,WAAW,GAAG,qBAAqB;AAE7C1B,SAAS,CAAC2B,SAAS,GAAG;EACpB1B,QAAQ,EAAE2B,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjE7B,QAAQ,EAAE0B,kBAAS,CAACI,IAAI;EACxB7B,cAAc,EAAEyB,kBAAS,CAACI,IAAI;EAC9B5B,QAAQ,EAAEwB,kBAAS,CAACK,MAAM;EAC1B5B,GAAG,EAAEuB,kBAAS,CAACE,MAAM;EACrBxB,OAAO,EAAEsB,kBAAS,CAACM,IAAI;EACvB3B,OAAO,EAAEqB,kBAAS,CAACM,IAAI;EACvB1B,OAAO,EAAEoB,kBAAS,CAACM;AACrB,CAAC"}

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

@@ -2,52 +2,56 @@
 
 exports[`primitive:<Pressable> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable mirai"
+    tabindex="0"
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Pressable> prop:disabled 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable disabled"
     disabled=""
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Pressable> prop:tag 1`] = `
 <DocumentFragment>
-  <a
+  <ui_tag
     class="pressable"
+    tabindex="0"
   >
     children
-  </a>
+  </ui_tag>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Pressable> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable"
+    tabindex="0"
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Pressable> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable"
     data-testid="mirai"
+    tabindex="0"
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;

package/build/primitives/Primitive/Primitive.js

@@ -20,9 +20,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Primitive = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+    tag = _ref$tag === void 0 ? 'primitive' : _ref$tag,
     others = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(tag, _objectSpread(_objectSpread({}, (0, _helpers.getProps)(others)), {}, {
+  return /*#__PURE__*/_react.default.createElement((0, _helpers.getTag)(tag, others), _objectSpread(_objectSpread({}, (0, _helpers.getProps)(others)), {}, {
     ref: ref
   }), children);
 });

package/build/primitives/Primitive/Primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Primitive.js","names":["Primitive","React","forwardRef","ref","children","tag","others","createElement","getProps","displayName","propTypes","PropTypes","any","role","string","testId"],"sources":["../../../src/primitives/Primitive/Primitive.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getProps } from './helpers';\n\nconst Primitive = React.forwardRef(({ children, tag = 'div', ...others }, ref) =>\n  React.createElement(tag, { ...getProps(others), ref }, children),\n);\n\nPrimitive.displayName = 'Primitive';\n\nPrimitive.propTypes = {\n  children: PropTypes.any,\n  role: PropTypes.string,\n  tag: PropTypes.string,\n  testId: PropTypes.string,\n};\n\nexport { Primitive };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAErC,IAAMA,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAAuCC,GAAG;EAAA,IAAvCC,QAAQ,QAARA,QAAQ;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAKC,MAAM;EAAA,oBACpEL,cAAK,CAACM,aAAa,CAACF,GAAG,kCAAO,IAAAG,iBAAQ,EAACF,MAAM,CAAC;IAAEH,GAAG,EAAHA;EAAG,IAAIC,QAAQ,CAAC;AAAA,EACjE;AAAC;AAEFJ,SAAS,CAACS,WAAW,GAAG,WAAW;AAEnCT,SAAS,CAACU,SAAS,GAAG;EACpBN,QAAQ,EAAEO,kBAAS,CAACC,GAAG;EACvBC,IAAI,EAAEF,kBAAS,CAACG,MAAM;EACtBT,GAAG,EAAEM,kBAAS,CAACG,MAAM;EACrBC,MAAM,EAAEJ,kBAAS,CAACG;AACpB,CAAC"}
+{"version":3,"file":"Primitive.js","names":["Primitive","React","forwardRef","ref","children","tag","others","createElement","getTag","getProps","displayName","propTypes","PropTypes","any","role","string","testId"],"sources":["../../../src/primitives/Primitive/Primitive.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getProps, getTag } from './helpers';\n\nconst Primitive = React.forwardRef(({ children, tag = 'primitive', ...others }, ref) =>\n  React.createElement(getTag(tag, others), { ...getProps(others), ref }, children),\n);\n\nPrimitive.displayName = 'Primitive';\n\nPrimitive.propTypes = {\n  children: PropTypes.any,\n  role: PropTypes.string,\n  tag: PropTypes.string,\n  testId: PropTypes.string,\n};\n\nexport { Primitive };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAA6CC,GAAG;EAAA,IAA7CC,QAAQ,QAARA,QAAQ;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,WAAW;IAAKC,MAAM;EAAA,oBAC1EL,cAAK,CAACM,aAAa,CAAC,IAAAC,eAAM,EAACH,GAAG,EAAEC,MAAM,CAAC,kCAAO,IAAAG,iBAAQ,EAACH,MAAM,CAAC;IAAEH,GAAG,EAAHA;EAAG,IAAIC,QAAQ,CAAC;AAAA,EACjF;AAAC;AAEFJ,SAAS,CAACU,WAAW,GAAG,WAAW;AAEnCV,SAAS,CAACW,SAAS,GAAG;EACpBP,QAAQ,EAAEQ,kBAAS,CAACC,GAAG;EACvBC,IAAI,EAAEF,kBAAS,CAACG,MAAM;EACtBV,GAAG,EAAEO,kBAAS,CAACG,MAAM;EACrBC,MAAM,EAAEJ,kBAAS,CAACG;AACpB,CAAC"}

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

@@ -0,0 +1,241 @@
+/* -- 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);
+}

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

@@ -2,7 +2,7 @@
 
 exports[`<Primitive> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_primitive
     class="mirai"
   />
 </DocumentFragment>
@@ -10,29 +10,29 @@ exports[`<Primitive> inherit:className 1`] = `
 
 exports[`<Primitive> prop:children 1`] = `
 <DocumentFragment>
-  <div>
+  <ui_primitive>
     <span>
       mirai
     </span>
-  </div>
+  </ui_primitive>
 </DocumentFragment>
 `;
 
 exports[`<Primitive> prop:role 1`] = `
 <DocumentFragment>
-  <div />
+  <ui_primitive />
 </DocumentFragment>
 `;
 
 exports[`<Primitive> prop:tag 1`] = `
 <DocumentFragment>
-  <section />
+  <ui_tag />
 </DocumentFragment>
 `;
 
 exports[`<Primitive> prop:testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_primitive
     data-testid="mirai"
   />
 </DocumentFragment>
@@ -40,6 +40,6 @@ exports[`<Primitive> prop:testId 1`] = `
 
 exports[`<Primitive> renders 1`] = `
 <DocumentFragment>
-  <div />
+  <ui_primitive />
 </DocumentFragment>
 `;