@mirai/ui 1.0.3 → 1.0.4

package/build/components/Button/Button.js

@@ -19,13 +19,14 @@ var _primitives = require("../../primitives");
 
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 
-var _excluded = ["children", "disabled", "large", "outlined", "small", "squared", "tag"];
+var _excluded = ["children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag"];
 
 var Button = function Button(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
       large = _ref.large,
       outlined = _ref.outlined,
+      rounded = _ref.rounded,
       small = _ref.small,
       _ref$squared = _ref.squared,
       squared = _ref$squared === void 0 ? false : _ref$squared,
@@ -35,7 +36,7 @@ var Button = function Button(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
     disabled: disabled,
     tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, large && _ButtonModule.default.large, small && _ButtonModule.default.small, squared && _ButtonModule.default.squared, outlined && !disabled && _ButtonModule.default.outlined, disabled && _ButtonModule.default.disabled, others.className)
+    className: (0, _helpers.styles)(_ButtonModule.default.button, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && !disabled && _ButtonModule.default.outlined, others.className)
   }), children);
 };
 

package/build/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.jsx"],"names":["Button","children","disabled","large","outlined","small","squared","tag","others","React","createElement","Pressable","className","style","button","displayName"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,QAAb,QAAaA,QAAb;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,QAA9B,QAA8BA,QAA9B;AAAA,MAAwCC,KAAxC,QAAwCA,KAAxC;AAAA,0BAA+CC,OAA/C;AAAA,MAA+CA,OAA/C,6BAAyD,KAAzD;AAAA,sBAAgEC,GAAhE;AAAA,MAAgEA,GAAhE,yBAAsE,QAAtE;AAAA,MAAmFC,MAAnF;AAAA,sBACbC,eAAMC,aAAN,CACEC,qBADF,8DAGOH,MAHP;AAIIN,IAAAA,QAAQ,EAARA,QAJJ;AAKIK,IAAAA,GAAG,EAAHA,GALJ;AAMIK,IAAAA,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETX,KAAK,IAAIU,sBAAMV,KAFN,EAGTE,KAAK,IAAIQ,sBAAMR,KAHN,EAITC,OAAO,IAAIO,sBAAMP,OAJR,EAKTF,QAAQ,IAAI,CAACF,QAAb,IAAyBW,sBAAMT,QALtB,EAMTF,QAAQ,IAAIW,sBAAMX,QANT,EAOTM,MAAM,CAACI,SAPE;AANf,MAgBEX,QAhBF,CADa;AAAA,CAAf;;;AAoBAD,MAAM,CAACe,WAAP,GAAqB,kBAArB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({ children, disabled, large, outlined, small, squared = false, tag = 'button', ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.button,\n        large && style.large,\n        small && style.small,\n        squared && style.squared,\n        outlined && !disabled && style.outlined,\n        disabled && style.disabled,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../src/components/Button/Button.jsx"],"names":["Button","children","disabled","large","outlined","rounded","small","squared","tag","others","React","createElement","Pressable","className","style","button","displayName"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaC,QAAb,QAAaA,QAAb;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,QAA9B,QAA8BA,QAA9B;AAAA,MAAwCC,OAAxC,QAAwCA,OAAxC;AAAA,MAAiDC,KAAjD,QAAiDA,KAAjD;AAAA,0BAAwDC,OAAxD;AAAA,MAAwDA,OAAxD,6BAAkE,KAAlE;AAAA,sBAAyEC,GAAzE;AAAA,MAAyEA,GAAzE,yBAA+E,QAA/E;AAAA,MAA4FC,MAA5F;AAAA,sBACbC,eAAMC,aAAN,CACEC,qBADF,8DAGOH,MAHP;AAIIP,IAAAA,QAAQ,EAARA,QAJJ;AAKIM,IAAAA,GAAG,EAAHA,GALJ;AAMIK,IAAAA,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETZ,KAAK,IAAIW,sBAAMX,KAFN,EAGTG,KAAK,IAAIQ,sBAAMR,KAHN,EAITD,OAAO,IAAIS,sBAAMT,OAJR,EAKTE,OAAO,IAAIO,sBAAMP,OALR,EAMTH,QAAQ,IAAI,CAACF,QAAb,IAAyBY,sBAAMV,QANtB,EAOTK,MAAM,CAACI,SAPE;AANf,MAgBEZ,QAhBF,CADa;AAAA,CAAf;;;AAoBAD,MAAM,CAACgB,WAAP,GAAqB,kBAArB","sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({ children, disabled, large, outlined, rounded, small, squared = false, tag = 'button', ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.button,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && !disabled && style.outlined,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"file":"Button.js"}

package/build/components/Button/Button.module.css

@@ -23,7 +23,7 @@
   width: fit-content;
 }
 
-.disabled {
+.button:disabled {
   background-color: var(--mirai-ui-disabled);
   color: var(--mirai-ui-lighten);
 }
@@ -34,7 +34,7 @@
   color: var(--mirai-ui-button-color);
 }
 
-.button:not(.disabled):active {
+.button:not(:disabled):active {
   box-shadow: inset 0 0 var(--mirai-ui-space-XXL) var(--mirai-ui-space-XXL) var(--mirai-ui-button-color-active);
 }
 
@@ -48,6 +48,10 @@
   padding: var(--mirai-ui-space-XS) var(--mirai-ui-space-S);
 }
 
+.rounded {
+  border-radius: 50%;
+}
+
 .squared {
   padding: 0;
   height: var(--mirai-ui-space-XL);
@@ -68,12 +72,12 @@
 }
 
 @media only screen and (min-width: 600px) {
-  .button:not(.disabled).outlined:hover {
+  .button:not(:disabled).outlined:hover {
     border-color: var(--mirai-ui-button-color-hover);
     color: var(--mirai-ui-button-color-focus);
   }
 
-  .button:not(.disabled):not(.outlined):hover {
+  .button:not(:disabled):not(.outlined):hover {
     background-color: var(--mirai-ui-button-color-focus);
   }
 }

package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap

@@ -23,7 +23,7 @@ exports[`component:<Button> inherit:className 1`] = `
 exports[`component:<Button> prop:disabled 1`] = `
 <DocumentFragment>
   <button
-    class="pressable disabled button disabled"
+    class="pressable button"
     disabled=""
   >
     children