@mirai/ui 1.0.7 → 1.0.11

package/build/components/Menu/Menu.module.css

@@ -0,0 +1,50 @@
+:root {
+  --mirai-ui-menu-base: var(--mirai-ui-base);
+  --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-menu-min-width: 200px;
+  --mirai-ui-menu-shadow: 0 1px calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-lighten);
+  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
+  --mirai-ui-menu-option-disabled: var(--mirai-ui-disabled);
+  --mirai-ui-menu-option-hover: var(--mirai-ui-accent-lighten);
+}
+
+.menu {
+  background-color: var(--mirai-ui-menu-base);
+  border-radius: var(--mirai-ui-menu-border-radius);
+  box-shadow: var(--mirai-ui-menu-shadow);
+  min-width: var(--mirai-ui-menu-min-width);
+  overflow: hidden;
+}
+
+.menu .option {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  padding: var(--mirai-ui-menu-option-padding);
+  align-items: center;
+  flex: 1;
+  width: 100%;
+}
+
+.menu .option:hover:not(.disabled) {
+  background-color: var(--mirai-ui-menu-option-hover);
+}
+
+.menu .icon {
+  margin-right: var(--mirai-ui-menu-option-padding);
+}
+
+.menu .label {
+  flex: 1;
+  text-align: left;
+  padding-right: var(--mirai-ui-menu-option-padding);
+}
+
+.menu .divider {
+  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
+}
+
+.menu .disabled {
+  color: var(--mirai-ui-menu-option-disabled);
+  cursor: default;
+}

package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Menu> inherit:className 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> renders 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> testID 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="mirai"
+  />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ Template 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ children 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ options & visible 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+  <span
+    class="layer menu visible"
+    style="left: 0px; top: 0px;"
+  >
+    <div
+      class="pressable option"
+      value="one"
+    >
+      <span
+        class="icon icon"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="12"
+            x2="12"
+            y1="5"
+            y2="19"
+          />
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </span>
+      <span
+        class="text paragraph label"
+      >
+        Item 1
+      </span>
+    </div>
+    <div
+      class="pressable option disabled"
+      value="two"
+    >
+      <span
+        class="icon icon disabled"
+      >
+        <svg
+          fill="none"
+          height="1em"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <line
+            x1="12"
+            x2="12"
+            y1="5"
+            y2="19"
+          />
+          <line
+            x1="5"
+            x2="19"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </span>
+      <span
+        class="text paragraph label disabled"
+      >
+        Item 2
+      </span>
+    </div>
+    <div
+      class="pressable option divider"
+      value="three"
+    >
+      <span
+        class="icon icon"
+      />
+      <span
+        class="text paragraph label"
+      >
+        Item 3
+      </span>
+    </div>
+    <div
+      class="pressable option"
+      value="four"
+    >
+      <span
+        class="text paragraph label"
+      >
+        Item 4
+      </span>
+      <button
+        class="pressable button small"
+      >
+        Add
+      </button>
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> w/ options 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;

package/build/components/Menu/index.js

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

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

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

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

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

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

@@ -9,8 +9,9 @@
   background-color: var(--mirai-ui-modal-background);
   opacity: 0;
   pointer-events: none;
-  transform: scale(0.9);
-  transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  transform: scale(1.1);
+  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
 .modal.visible {

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

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

package/build/components/Table/Table.Row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Table/Table.Row.jsx"],"names":["TableRow","dataSource","schema","selected","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","style","className","React","createElement","select","checkbox","map","field","head","label","hideIcon","displayName"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAAuF;AAAA,MAApFC,UAAoF,QAApFA,UAAoF;AAAA,MAAxEC,MAAwE,QAAxEA,MAAwE;AAAA,MAAhEC,QAAgE,QAAhEA,QAAgE;AAAA,uBAAtDC,IAAsD;AAAA,MAAtDA,IAAsD,0BAA/C,EAA+C;AAAA,MAA3CC,OAA2C,QAA3CA,OAA2C;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;AAAA,MAAxBC,MAAwB,QAAxBA,MAAwB;AAAA,MAAbC,MAAa;AACtG,MAAMC,MAAM,GAAGR,UAAU,KAAKS,SAA9B;AACA,MAAMC,MAAM,GAAGC,MAAM,CAACC,IAAP,CAAYX,MAAZ,CAAf;AACA,MAAMY,GAAG,GAAGL,MAAM,GAAG,IAAH,GAAU,IAA5B;AACA,MAAyBM,MAAzB,GAAoCP,MAApC,CAAS,aAAT;AAEA,sBACE,qDACMA,MADN;AAEE,IAAA,IAAI,EAAC,IAFP;AAGE,IAAA,SAAS,EAAE,qBAAOL,QAAQ,IAAIa,qBAAMb,QAAzB,EAAmCE,OAAO,IAAIW,qBAAMX,OAApD,EAA6DG,MAAM,CAACS,SAApE;AAHb,MAKGX,QAAQ,iBACPY,eAAMC,aAAN,CACEL,GADF,EAEE;AAAEG,IAAAA,SAAS,EAAED,qBAAMI;AAAnB,GAFF,eAGE,6BAAC,gBAAD;AAAM,IAAA,GAAG;AAAT,KACG,CAACX,MAAD,iBACC,6BAAC,wBAAD;AACE,IAAA,OAAO,EAAEN,QADX;AAEE,mBAAaY,MAAM,aAAMA,MAAN,iBAA0BL,SAF/C;AAGE,IAAA,IAAI,EAAC,UAHP;AAIE,IAAA,SAAS,EAAEM,qBAAMK,QAJnB;AAKE,IAAA,QAAQ,EAAE;AAAA,aAAMf,QAAQ,CAACL,UAAD,CAAd;AAAA;AALZ,IAFJ,CAHF,CANJ,EAqBGU,MAAM,CAACW,GAAP,CAAW,UAACC,KAAD;AAAA;;AAAA,wBACVL,eAAMC,aAAN,CACEL,GADF,kFAGK,aAHL,EAGqBC,MAAM,aAAMA,MAAN,cAAgBQ,KAAhB,IAA0Bb,SAHrD,8DAISa,KAJT,kEAKa,CAACd,MAAD,IAAWJ,OAAX,GAAqB;AAAA,aAAMA,OAAO,CAACJ,UAAD,CAAb;AAAA,KAArB,GAAiDS,SAL9D,uCAOE,6BAAC,gBAAD;AAAM,MAAA,GAAG,MAAT;AAAU,MAAA,GAAG,EAAC,MAAd;AAAqB,MAAA,SAAS,EAAED,MAAM,IAAIO,qBAAMQ,IAAhD;AAAsD,MAAA,OAAO,EAAEf,MAAM,GAAG;AAAA,eAAMF,MAAM,CAACgB,KAAD,CAAZ;AAAA,OAAH,GAAyBb;AAA9F,oBACE,4DACGD,MAAM,GAAGP,MAAM,CAACqB,KAAD,CAAN,CAAcE,KAAjB,GAAyBxB,UAAU,CAACsB,KAAD,CAD5C,EAEGd,MAAM,IAAIF,MAAV,iBACC,6BAAC,gBAAD;AAAM,MAAA,IAAI,EAAEH,IAAI,CAACmB,KAAD,CAAJ,GAAc,MAAd,GAAuB,IAAnC;AAAyC,MAAA,SAAS,EAAEnB,IAAI,CAACmB,KAAD,CAAJ,KAAgBb,SAAhB,IAA6BM,qBAAMU;AAAvF,MAHJ,CADF,CAPF,CADU;AAAA,GAAX,CArBH,CADF;AA0CD,CAhDD;;;AAkDA1B,QAAQ,CAAC2B,WAAT,GAAuB,WAAvB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport style from './Table.module.css';\n\nconst TableRow = ({ dataSource, schema, selected, sort = {}, onPress, onSelect, onSort, ...others }) => {\n  const isHead = dataSource === undefined;\n  const fields = Object.keys(schema);\n  const tag = isHead ? 'th' : 'td';\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <tr\n      {...others}\n      role=\"tr\"\n      className={styles(selected && style.selected, onPress && style.onPress, others.className)}\n    >\n      {onSelect &&\n        React.createElement(\n          tag,\n          { className: style.select },\n          <View row>\n            {!isHead && (\n              <InputOption\n                checked={selected}\n                data-testid={testId ? `${testId}-checkbox` : undefined}\n                name=\"checkbox\"\n                className={style.checkbox}\n                onChange={() => onSelect(dataSource)}\n              />\n            )}\n          </View>,\n        )}\n      {fields.map((field) =>\n        React.createElement(\n          tag,\n          {\n            ['data-testid']: testId ? `${testId}-${field}` : undefined,\n            key: field,\n            onClick: !isHead && onPress ? () => onPress(dataSource) : undefined,\n          },\n          <View row tag=\"span\" className={isHead && style.head} onClick={isHead ? () => onSort(field) : undefined}>\n            <>\n              {isHead ? schema[field].label : dataSource[field]}\n              {isHead && onSort && (\n                <Icon name={sort[field] ? 'Down' : 'Up'} className={sort[field] === undefined && style.hideIcon} />\n              )}\n            </>\n          </View>,\n        ),\n      )}\n    </tr>\n  );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n  dataSource: PropTypes.shape({}),\n  schema: PropTypes.shape({}).isRequired,\n  selected: PropTypes.bool,\n  sort: PropTypes.shape({}),\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { TableRow };\n"],"file":"Table.Row.js"}
+{"version":3,"file":"Table.Row.js","names":["TableRow","dataSource","schema","selected","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","style","className","React","createElement","select","checkbox","map","field","head","label","hideIcon","displayName"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport style from './Table.module.css';\n\nconst TableRow = ({ dataSource, schema, selected, sort = {}, onPress, onSelect, onSort, ...others }) => {\n  const isHead = dataSource === undefined;\n  const fields = Object.keys(schema);\n  const tag = isHead ? 'th' : 'td';\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <tr\n      {...others}\n      role=\"tr\"\n      className={styles(selected && style.selected, onPress && style.onPress, others.className)}\n    >\n      {onSelect &&\n        React.createElement(\n          tag,\n          { className: style.select },\n          <View row>\n            {!isHead && (\n              <InputOption\n                checked={selected}\n                data-testid={testId ? `${testId}-checkbox` : undefined}\n                name=\"checkbox\"\n                className={style.checkbox}\n                onChange={() => onSelect(dataSource)}\n              />\n            )}\n          </View>,\n        )}\n      {fields.map((field) =>\n        React.createElement(\n          tag,\n          {\n            ['data-testid']: testId ? `${testId}-${field}` : undefined,\n            key: field,\n            onClick: !isHead && onPress ? () => onPress(dataSource) : undefined,\n          },\n          <View row tag=\"span\" className={isHead && style.head} onClick={isHead ? () => onSort(field) : undefined}>\n            <>\n              {isHead ? schema[field].label : dataSource[field]}\n              {isHead && onSort && (\n                <Icon name={sort[field] ? 'Down' : 'Up'} className={sort[field] === undefined && style.hideIcon} />\n              )}\n            </>\n          </View>,\n        ),\n      )}\n    </tr>\n  );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n  dataSource: PropTypes.shape({}),\n  schema: PropTypes.shape({}).isRequired,\n  selected: PropTypes.bool,\n  sort: PropTypes.shape({}),\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { TableRow };\n"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAAuF;EAAA,IAApFC,UAAoF,QAApFA,UAAoF;EAAA,IAAxEC,MAAwE,QAAxEA,MAAwE;EAAA,IAAhEC,QAAgE,QAAhEA,QAAgE;EAAA,qBAAtDC,IAAsD;EAAA,IAAtDA,IAAsD,0BAA/C,EAA+C;EAAA,IAA3CC,OAA2C,QAA3CA,OAA2C;EAAA,IAAlCC,QAAkC,QAAlCA,QAAkC;EAAA,IAAxBC,MAAwB,QAAxBA,MAAwB;EAAA,IAAbC,MAAa;EACtG,IAAMC,MAAM,GAAGR,UAAU,KAAKS,SAA9B;EACA,IAAMC,MAAM,GAAGC,MAAM,CAACC,IAAP,CAAYX,MAAZ,CAAf;EACA,IAAMY,GAAG,GAAGL,MAAM,GAAG,IAAH,GAAU,IAA5B;EACA,IAAyBM,MAAzB,GAAoCP,MAApC,CAAS,aAAT;EAEA,oBACE,qDACMA,MADN;IAEE,IAAI,EAAC,IAFP;IAGE,SAAS,EAAE,qBAAOL,QAAQ,IAAIa,qBAAMb,QAAzB,EAAmCE,OAAO,IAAIW,qBAAMX,OAApD,EAA6DG,MAAM,CAACS,SAApE;EAHb,IAKGX,QAAQ,iBACPY,eAAMC,aAAN,CACEL,GADF,EAEE;IAAEG,SAAS,EAAED,qBAAMI;EAAnB,CAFF,eAGE,6BAAC,gBAAD;IAAM,GAAG;EAAT,GACG,CAACX,MAAD,iBACC,6BAAC,wBAAD;IACE,OAAO,EAAEN,QADX;IAEE,eAAaY,MAAM,aAAMA,MAAN,iBAA0BL,SAF/C;IAGE,IAAI,EAAC,UAHP;IAIE,SAAS,EAAEM,qBAAMK,QAJnB;IAKE,QAAQ,EAAE;MAAA,OAAMf,QAAQ,CAACL,UAAD,CAAd;IAAA;EALZ,EAFJ,CAHF,CANJ,EAqBGU,MAAM,CAACW,GAAP,CAAW,UAACC,KAAD;IAAA;;IAAA,oBACVL,eAAMC,aAAN,CACEL,GADF,kFAGK,aAHL,EAGqBC,MAAM,aAAMA,MAAN,cAAgBQ,KAAhB,IAA0Bb,SAHrD,8DAISa,KAJT,kEAKa,CAACd,MAAD,IAAWJ,OAAX,GAAqB;MAAA,OAAMA,OAAO,CAACJ,UAAD,CAAb;IAAA,CAArB,GAAiDS,SAL9D,uCAOE,6BAAC,gBAAD;MAAM,GAAG,MAAT;MAAU,GAAG,EAAC,MAAd;MAAqB,SAAS,EAAED,MAAM,IAAIO,qBAAMQ,IAAhD;MAAsD,OAAO,EAAEf,MAAM,GAAG;QAAA,OAAMF,MAAM,CAACgB,KAAD,CAAZ;MAAA,CAAH,GAAyBb;IAA9F,gBACE,4DACGD,MAAM,GAAGP,MAAM,CAACqB,KAAD,CAAN,CAAcE,KAAjB,GAAyBxB,UAAU,CAACsB,KAAD,CAD5C,EAEGd,MAAM,IAAIF,MAAV,iBACC,6BAAC,gBAAD;MAAM,IAAI,EAAEH,IAAI,CAACmB,KAAD,CAAJ,GAAc,MAAd,GAAuB,IAAnC;MAAyC,SAAS,EAAEnB,IAAI,CAACmB,KAAD,CAAJ,KAAgBb,SAAhB,IAA6BM,qBAAMU;IAAvF,EAHJ,CADF,CAPF,CADU;EAAA,CAAX,CArBH,CADF;AA0CD,CAhDD;;;AAkDA1B,QAAQ,CAAC2B,WAAT,GAAuB,WAAvB"}

package/build/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Table/Table.jsx"],"names":["Table","dataSource","schema","search","onPress","onSelect","others","selected","setSelected","sort","setSort","handleSelect","row","exists","includes","next","filter","item","push","handleSort","field","undefined","testId","style","table","className","map","index"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAuE;AAAA,6BAApEC,UAAoE;AAAA,MAApEA,UAAoE,gCAAvD,EAAuD;AAAA,MAAnDC,MAAmD,QAAnDA,MAAmD;AAAA,MAA3CC,MAA2C,QAA3CA,MAA2C;AAAA,MAAnCC,OAAmC,QAAnCA,OAAmC;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAbC,MAAa;;AAC1F,kBAAgC,qBAAS,EAAT,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAAwB,qBAAS,EAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAS;AAC5BJ,IAAAA,WAAW,CAAC,YAAM;AAChB,UAAMK,MAAM,GAAGN,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CAAf;AACA,UAAMG,IAAI,GAAGR,QAAQ,CAACS,MAAT,CAAgB,UAACC,IAAD;AAAA,eAAUA,IAAI,KAAKL,GAAnB;AAAA,OAAhB,CAAb;AACA,UAAI,CAACC,MAAL,EAAaE,IAAI,CAACG,IAAL,CAAUN,GAAV;AAEbP,MAAAA,QAAQ,CAACU,IAAD,CAAR;AAEA,aAAOA,IAAP;AACD,KARU,CAAX;AASD,GAVD;;AAYA,MAAMI,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;AAC5BV,IAAAA,OAAO,CAACD,IAAI,CAACW,KAAD,CAAJ,KAAgBC,SAAhB,qCAA+BD,KAA/B,EAAuC,IAAvC,IAAgDX,IAAI,CAACW,KAAD,CAAJ,qCAAiBA,KAAjB,EAAyB,KAAzB,IAAmC,EAApF,CAAP;AACD,GAFD;;AAIA,MAAyBE,MAAzB,GAAoChB,MAApC,CAAS,aAAT;AAEA,sBACE,wDAAWA,MAAX;AAAmB,IAAA,SAAS,EAAE,qBAAOiB,qBAAMC,KAAb,EAAoBlB,MAAM,CAACmB,SAA3B;AAA9B,mBACE,yDACE,6BAAC,eAAD;AAAU,IAAA,MAAM,EAAEvB,MAAlB;AAA0B,IAAA,IAAI,EAAEO,IAAhC;AAAsC,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,YAAM,CAAE,CAAX,GAAcgB,SAAtE;AAAiF,IAAA,MAAM,EAAEF;AAAzF,IADF,CADF,eAIE,4CACG,oBAAQ;AAAA,WAAM,sBAAOlB,UAAP,EAAmB;AAAEE,MAAAA,MAAM,EAANA,MAAF;AAAUM,MAAAA,IAAI,EAAJA;AAAV,KAAnB,CAAN;AAAA,GAAR,EAAoD,CAACR,UAAD,EAAaE,MAAb,EAAqBM,IAArB,CAApD,EAAgFiB,GAAhF,CAAoF,UAACd,GAAD,EAAMe,KAAN;AAAA,wBACnF,6BAAC,eAAD;AACE,qBAAaL,MAAM,aAAMA,MAAN,cAAgBK,KAAhB,IAA0BN,SAD/C;AAEE,MAAA,UAAU,EAAET,GAFd;AAGE,MAAA,GAAG,EAAEe,KAHP;AAIE,MAAA,MAAM,EAAEzB,MAJV;AAKE,MAAA,QAAQ,EAAEK,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CALZ;AAME,MAAA,OAAO,EAAER,OANX;AAOE,MAAA,QAAQ,EAAEC,QAAQ,GAAGM,YAAH,GAAkBU;AAPtC,MADmF;AAAA,GAApF,CADH,CAJF,CADF;AAoBD,CA1CM","sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({ dataSource = [], schema, search, onPress, onSelect, ...others }) => {\n  const [selected, setSelected] = useState([]);\n  const [sort, setSort] = useState({});\n\n  const handleSelect = (row) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n\n      onSelect(next);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <table {...others} className={styles(style.table, others.className)}>\n      <thead>\n        <TableRow schema={schema} sort={sort} onSelect={onSelect ? () => {} : undefined} onSort={handleSort} />\n      </thead>\n      <tbody>\n        {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n          <TableRow\n            data-testid={testId ? `${testId}-${index}` : undefined}\n            dataSource={row}\n            key={index}\n            schema={schema}\n            selected={selected.includes(row)}\n            onPress={onPress}\n            onSelect={onSelect ? handleSelect : undefined}\n          />\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"file":"Table.js"}
+{"version":3,"file":"Table.js","names":["Table","dataSource","schema","search","onPress","onSelect","others","selected","setSelected","sort","setSort","handleSelect","row","exists","includes","next","filter","item","push","handleSort","field","undefined","testId","style","table","className","map","index"],"sources":["../../../src/components/Table/Table.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { select } from './helpers';\nimport style from './Table.module.css';\nimport { TableRow } from './Table.Row';\n\nexport const Table = ({ dataSource = [], schema, search, onPress, onSelect, ...others }) => {\n  const [selected, setSelected] = useState([]);\n  const [sort, setSort] = useState({});\n\n  const handleSelect = (row) => {\n    setSelected(() => {\n      const exists = selected.includes(row);\n      const next = selected.filter((item) => item !== row);\n      if (!exists) next.push(row);\n\n      onSelect(next);\n\n      return next;\n    });\n  };\n\n  const handleSort = (field) => {\n    setSort(sort[field] === undefined ? { [field]: true } : sort[field] ? { [field]: false } : {});\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <table {...others} className={styles(style.table, others.className)}>\n      <thead>\n        <TableRow schema={schema} sort={sort} onSelect={onSelect ? () => {} : undefined} onSort={handleSort} />\n      </thead>\n      <tbody>\n        {useMemo(() => select(dataSource, { search, sort }), [dataSource, search, sort]).map((row, index) => (\n          <TableRow\n            data-testid={testId ? `${testId}-${index}` : undefined}\n            dataSource={row}\n            key={index}\n            schema={schema}\n            selected={selected.includes(row)}\n            onPress={onPress}\n            onSelect={onSelect ? handleSelect : undefined}\n          />\n        ))}\n      </tbody>\n    </table>\n  );\n};\n\nTable.propTypes = {\n  dataSource: PropTypes.arrayOf(PropTypes.shape({})),\n  schema: PropTypes.shape({}).isRequired,\n  search: PropTypes.string,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAuE;EAAA,2BAApEC,UAAoE;EAAA,IAApEA,UAAoE,gCAAvD,EAAuD;EAAA,IAAnDC,MAAmD,QAAnDA,MAAmD;EAAA,IAA3CC,MAA2C,QAA3CA,MAA2C;EAAA,IAAnCC,OAAmC,QAAnCA,OAAmC;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EAC1F,gBAAgC,qBAAS,EAAT,CAAhC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EACA,iBAAwB,qBAAS,EAAT,CAAxB;EAAA;EAAA,IAAOC,IAAP;EAAA,IAAaC,OAAb;;EAEA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAS;IAC5BJ,WAAW,CAAC,YAAM;MAChB,IAAMK,MAAM,GAAGN,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CAAf;MACA,IAAMG,IAAI,GAAGR,QAAQ,CAACS,MAAT,CAAgB,UAACC,IAAD;QAAA,OAAUA,IAAI,KAAKL,GAAnB;MAAA,CAAhB,CAAb;MACA,IAAI,CAACC,MAAL,EAAaE,IAAI,CAACG,IAAL,CAAUN,GAAV;MAEbP,QAAQ,CAACU,IAAD,CAAR;MAEA,OAAOA,IAAP;IACD,CARU,CAAX;EASD,CAVD;;EAYA,IAAMI,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAW;IAC5BV,OAAO,CAACD,IAAI,CAACW,KAAD,CAAJ,KAAgBC,SAAhB,qCAA+BD,KAA/B,EAAuC,IAAvC,IAAgDX,IAAI,CAACW,KAAD,CAAJ,qCAAiBA,KAAjB,EAAyB,KAAzB,IAAmC,EAApF,CAAP;EACD,CAFD;;EAIA,IAAyBE,MAAzB,GAAoChB,MAApC,CAAS,aAAT;EAEA,oBACE,wDAAWA,MAAX;IAAmB,SAAS,EAAE,qBAAOiB,qBAAMC,KAAb,EAAoBlB,MAAM,CAACmB,SAA3B;EAA9B,iBACE,yDACE,6BAAC,eAAD;IAAU,MAAM,EAAEvB,MAAlB;IAA0B,IAAI,EAAEO,IAAhC;IAAsC,QAAQ,EAAEJ,QAAQ,GAAG,YAAM,CAAE,CAAX,GAAcgB,SAAtE;IAAiF,MAAM,EAAEF;EAAzF,EADF,CADF,eAIE,4CACG,oBAAQ;IAAA,OAAM,sBAAOlB,UAAP,EAAmB;MAAEE,MAAM,EAANA,MAAF;MAAUM,IAAI,EAAJA;IAAV,CAAnB,CAAN;EAAA,CAAR,EAAoD,CAACR,UAAD,EAAaE,MAAb,EAAqBM,IAArB,CAApD,EAAgFiB,GAAhF,CAAoF,UAACd,GAAD,EAAMe,KAAN;IAAA,oBACnF,6BAAC,eAAD;MACE,eAAaL,MAAM,aAAMA,MAAN,cAAgBK,KAAhB,IAA0BN,SAD/C;MAEE,UAAU,EAAET,GAFd;MAGE,GAAG,EAAEe,KAHP;MAIE,MAAM,EAAEzB,MAJV;MAKE,QAAQ,EAAEK,QAAQ,CAACO,QAAT,CAAkBF,GAAlB,CALZ;MAME,OAAO,EAAER,OANX;MAOE,QAAQ,EAAEC,QAAQ,GAAGM,YAAH,GAAkBU;IAPtC,EADmF;EAAA,CAApF,CADH,CAJF,CADF;AAoBD,CA1CM"}

package/build/components/Table/Table.module.css

@@ -1,10 +1,13 @@
 :root {
   --mirai-ui-table-base: var(--mirai-ui-base);
-  --mirai-ui-table-border-color: var(--mirai-ui-disabled);
+  --mirai-ui-table-border-color: var(--mirai-ui-content-300);
   --mirai-ui-table-content: var(--mirai-ui-content);
-  --mirai-ui-table-lighten: var(--mirai-ui-lighten);
-  --mirai-ui-table-color-selected: var(--mirai-ui-accent);
-  --mirai-ui-table-color-selected-lighten: var(--mirai-ui-accent-lighten);
+  --mirai-ui-table-hover-background: var(--mirai-ui-accent-300);
+  --mirai-ui-table-head-color: var(--mirai-ui-content-400);
+  --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
+  --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
+  --mirai-ui-table-selected-background: var(--mirai-ui-accent-200);
+  --mirai-ui-table-selected-color: var(--mirai-ui-accent);
 }
 
 .table {
@@ -18,29 +21,15 @@
 }
 
 .table thead tr {
-  color: var(--mirai-ui-table-lighten);
+  color: var(--mirai-ui-table-head-color);
   font-family: var(--mirai-ui-font-bold);
   font-size: var(--mirai-ui-font-size-small);
   font-weight: var(--mirai-ui-font-bold-weight);
 }
 
-.table thead tr th {
-  height: var(--mirai-ui-space-M);
-}
-
-.table thead tr th:hover {
-  color: var(--mirai-ui-table-content);
-  cursor: pointer;
-}
-
 .table tbody tr.selected {
-  background-color: var(--mirai-ui-table-color-selected-lighten);
-  color: var(--mirai-ui-table-color-selected);
-}
-
-.table tbody tr:hover.onPress {
-  background-color: var(--mirai-ui-table-border-color);
-  cursor: pointer;
+  background-color: var(--mirai-ui-table-selected-background);
+  color: var(--mirai-ui-table-selected-color);
 }
 
 .table tr:not(:last-child) {
@@ -49,22 +38,23 @@
 
 .table th,
 .table td {
-  padding: var(--mirai-ui-space-S) 0;
+  padding: var(--mirai-ui-table-padding-y) 0;
 }
 
 .table th:first-child,
 .table td:first-child {
-  padding-left: var(--mirai-ui-space-M);
+  padding-left: var(--mirai-ui-table-padding-x);
 }
 
 .table th:last-child,
 .table td:last-child {
-  padding-right: var(--mirai-ui-space-M);
+  padding-right: var(--mirai-ui-table-padding-x);
 }
 
 .table th.select,
 .table td.select {
-  width: calc(var(--mirai-ui-space-XL) + var(--mirai-ui-space-S));
+  width: var(--mirai-ui-checkbox-size);
+  padding-right: var(--mirai-ui-table-padding-x);
 }
 
 .table th .hideIcon {
@@ -74,3 +64,15 @@
 .table .checkbox {
   margin: 0;
 }
+
+@media only screen and (min-width: 600px) {
+  .table thead tr th:hover {
+    color: var(--mirai-ui-table-content);
+    cursor: pointer;
+  }
+
+  .table tbody tr:hover.onPress {
+    background-color: var(--mirai-ui-table-hover-background);
+    cursor: pointer;
+  }
+}

package/build/components/Table/helpers/index.js.map

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

package/build/components/Table/helpers/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Table/helpers/select.js"],"names":["select","dataSource","search","sort","values","filter","row","JSON","stringify","includes","Object","keys","forEach","key","order","a","b"],"mappings":";;;;;;;AAAO,IAAMA,MAAM,GAAG,SAATA,MAAS,GAAiD;AAAA,MAAhDC,UAAgD,uEAAnC,EAAmC;;AAAA,iFAAP,EAAO;AAAA,MAA7BC,MAA6B,QAA7BA,MAA6B;AAAA,uBAArBC,IAAqB;AAAA,MAArBA,IAAqB,0BAAd,EAAc;;AACrE,MAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB,UAACC,GAAD;AAAA,WAAUJ,MAAM,GAAGK,IAAI,CAACC,SAAL,CAAeF,GAAf,EAAoBG,QAApB,CAA6BP,MAA7B,CAAH,GAA0C,IAA1D;AAAA,GAAlB,CAAf;AAEAQ,EAAAA,MAAM,CAACC,IAAP,CAAYR,IAAZ,EAAkBS,OAAlB,CAA0B,UAACC,GAAD,EAAS;AACjC,QAAMC,KAAK,GAAGX,IAAI,CAACU,GAAD,CAAJ,GAAY,CAAZ,GAAgB,CAAC,CAA/B;AAEAT,IAAAA,MAAM,CAACD,IAAP,CAAY,UAACY,CAAD,EAAIC,CAAJ;AAAA,aAAWD,CAAC,CAACF,GAAD,CAAD,IAAUG,CAAC,CAACH,GAAD,CAAX,GAAmB,IAAIC,KAAvB,GAA+B,CAAC,CAAD,GAAKA,KAA/C;AAAA,KAAZ;AACD,GAJD;AAMA,SAAOV,MAAP;AACD,CAVM","sourcesContent":["export const select = (dataSource = [], { search, sort = {} } = {}) => {\n  const values = dataSource.filter((row) => (search ? JSON.stringify(row).includes(search) : true));\n\n  Object.keys(sort).forEach((key) => {\n    const order = sort[key] ? 1 : -1;\n\n    values.sort((a, b) => (a[key] >= b[key] ? 1 * order : -1 * order));\n  });\n\n  return values;\n};\n"],"file":"select.js"}
+{"version":3,"file":"select.js","names":["select","dataSource","search","sort","values","filter","row","JSON","stringify","includes","Object","keys","forEach","key","order","a","b"],"sources":["../../../../src/components/Table/helpers/select.js"],"sourcesContent":["export const select = (dataSource = [], { search, sort = {} } = {}) => {\n  const values = dataSource.filter((row) => (search ? JSON.stringify(row).includes(search) : true));\n\n  Object.keys(sort).forEach((key) => {\n    const order = sort[key] ? 1 : -1;\n\n    values.sort((a, b) => (a[key] >= b[key] ? 1 * order : -1 * order));\n  });\n\n  return values;\n};\n"],"mappings":";;;;;;;AAAO,IAAMA,MAAM,GAAG,SAATA,MAAS,GAAiD;EAAA,IAAhDC,UAAgD,uEAAnC,EAAmC;;EAAA,+EAAP,EAAO;EAAA,IAA7BC,MAA6B,QAA7BA,MAA6B;EAAA,qBAArBC,IAAqB;EAAA,IAArBA,IAAqB,0BAAd,EAAc;;EACrE,IAAMC,MAAM,GAAGH,UAAU,CAACI,MAAX,CAAkB,UAACC,GAAD;IAAA,OAAUJ,MAAM,GAAGK,IAAI,CAACC,SAAL,CAAeF,GAAf,EAAoBG,QAApB,CAA6BP,MAA7B,CAAH,GAA0C,IAA1D;EAAA,CAAlB,CAAf;EAEAQ,MAAM,CAACC,IAAP,CAAYR,IAAZ,EAAkBS,OAAlB,CAA0B,UAACC,GAAD,EAAS;IACjC,IAAMC,KAAK,GAAGX,IAAI,CAACU,GAAD,CAAJ,GAAY,CAAZ,GAAgB,CAAC,CAA/B;IAEAT,MAAM,CAACD,IAAP,CAAY,UAACY,CAAD,EAAIC,CAAJ;MAAA,OAAWD,CAAC,CAACF,GAAD,CAAD,IAAUG,CAAC,CAACH,GAAD,CAAX,GAAmB,IAAIC,KAAvB,GAA+B,CAAC,CAAD,GAAKA,KAA/C;IAAA,CAAZ;EACD,CAJD;EAMA,OAAOV,MAAP;AACD,CAVM"}

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

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

package/build/components/Tooltip/Tooltip.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
+
+var _excluded = ["children", "Template", "text"];
+
+var Tooltip = function Tooltip(_ref) {
+  var children = _ref.children,
+      Template = _ref.Template,
+      text = _ref.text,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(others.visible || false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, Object.assign({}, others, {
+    centered: true,
+    visible: visible
+  }), _react.default.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, child.props), {}, {
+      key: index,
+      'data-testid': others['data-testid'] ? "".concat(others['data-testid'], "-dispatcher") : undefined,
+      className: (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className),
+      onMouseEnter: function onMouseEnter() {
+        return setVisible(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setVisible(false);
+      }
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: _TooltipModule.default.tooltip
+  }, Template ? /*#__PURE__*/_react.default.createElement(Template, null) : /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    bold: true,
+    small: true,
+    className: _TooltipModule.default.text
+  }, text))));
+};
+
+exports.Tooltip = Tooltip;
+Tooltip.displayName = 'Component:Tooltip';
+//# sourceMappingURL=Tooltip.js.map

package/build/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["Tooltip","children","Template","text","others","visible","setVisible","React","Children","map","child","index","cloneElement","props","key","undefined","className","style","dispatcher","onMouseEnter","onMouseLeave","tooltip","displayName"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({ children, Template, text, ...others }) => {\n  const [visible, setVisible] = useState(others.visible || false);\n\n  return (\n    <Layer {...others} centered visible={visible}>\n      {React.Children.map(children, (child, index) =>\n        React.cloneElement(child, {\n          ...child.props,\n          key: index,\n          'data-testid': others['data-testid'] ? `${others['data-testid']}-dispatcher` : undefined,\n          className: styles(style.dispatcher, child.props.className),\n          onMouseEnter: () => setVisible(true),\n          onMouseLeave: () => setVisible(false),\n        }),\n      )}\n\n      <LayerContent>\n        <View className={style.tooltip}>\n          {Template ? (\n            <Template />\n          ) : (\n            <Text bold small className={style.text}>\n              {text}\n            </Text>\n          )}\n        </View>\n      </LayerContent>\n    </Layer>\n  );\n};\n\nTooltip.displayName = 'Component:Tooltip';\n\nTooltip.propTypes = {\n  children: PropTypes.node,\n  Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n  text: PropTypes.string,\n  visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAA6C;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAAhCC,QAAgC,QAAhCA,QAAgC;EAAA,IAAtBC,IAAsB,QAAtBA,IAAsB;EAAA,IAAbC,MAAa;;EAC3D,gBAA8B,qBAASA,MAAM,CAACC,OAAP,IAAkB,KAA3B,CAA9B;EAAA;EAAA,IAAOA,OAAP;EAAA,IAAgBC,UAAhB;;EAEA,oBACE,6BAAC,iBAAD,oBAAWF,MAAX;IAAmB,QAAQ,MAA3B;IAA4B,OAAO,EAAEC;EAArC,IACGE,eAAMC,QAAN,CAAeC,GAAf,CAAmBR,QAAnB,EAA6B,UAACS,KAAD,EAAQC,KAAR;IAAA,oBAC5BJ,eAAMK,YAAN,CAAmBF,KAAnB,8DACKA,KAAK,CAACG,KADX;MAEEC,GAAG,EAAEH,KAFP;MAGE,eAAeP,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,mBAAgEW,SAHjF;MAIEC,SAAS,EAAE,qBAAOC,uBAAMC,UAAb,EAAyBR,KAAK,CAACG,KAAN,CAAYG,SAArC,CAJb;MAKEG,YAAY,EAAE;QAAA,OAAMb,UAAU,CAAC,IAAD,CAAhB;MAAA,CALhB;MAMEc,YAAY,EAAE;QAAA,OAAMd,UAAU,CAAC,KAAD,CAAhB;MAAA;IANhB,GAD4B;EAAA,CAA7B,CADH,eAYE,6BAAC,wBAAD,qBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEW,uBAAMI;EAAvB,GACGnB,QAAQ,gBACP,6BAAC,QAAD,OADO,gBAGP,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,KAAK,MAAhB;IAAiB,SAAS,EAAEe,uBAAMd;EAAlC,GACGA,IADH,CAJJ,CADF,CAZF,CADF;AA0BD,CA7BD;;;AA+BAH,OAAO,CAACsB,WAAR,GAAsB,mBAAtB"}

package/build/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,26 @@
+:root {
+  --mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+  --mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-tooltip-color: var(--mirai-ui-base);
+  --mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
+  --mirai-ui-tooltip-max-width: calc(var(--mirai-ui-space-XXL) * 4);
+}
+
+.dispatcher {
+  cursor: pointer;
+}
+
+.tooltip {
+  background-color: var(--mirai-ui-tooltip-background);
+  border-radius: var(--mirai-ui-tooltip-border-radius);
+  margin-bottom: calc(var(--mirai-ui-tooltip-space) / 2);
+  margin-top: calc(var(--mirai-ui-tooltip-space) / 2);
+  max-width: var(--mirai-ui-tooltip-max-width);
+  padding: var(--mirai-ui-tooltip-space);
+  pointer-events: none;
+}
+
+.tooltip .text {
+  color: var(--mirai-ui-tooltip-color);
+  text-align: center;
+}

package/build/components/Tooltip/__tests__/__snapshots__/Tooltip.test.jsx.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[` 2`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> inherit:className 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> renders 1`] = `
+<DocumentFragment>
+  <span />
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> simulate behavior: onEnter & onLeave w/ Template 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> simulate behavior: onEnter & onLeave w/ Template 2`] = `
+<DocumentFragment>
+  <span
+    data-testid="onEnter"
+  >
+    <button
+      class="pressable button dispatcher"
+      data-testid="onEnter-dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> testID 1`] = `
+<DocumentFragment>
+  <span
+    data-testid="mirai"
+  />
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> w/ children + Template 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> w/ children + text 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component:<Tooltip> w/ children 1`] = `
+<DocumentFragment>
+  <span>
+    <button
+      class="pressable button dispatcher"
+    >
+      Action
+    </button>
+  </span>
+</DocumentFragment>
+`;