@mirai/ui 1.0.54 → 1.0.56

package/README.md

@@ -131,6 +131,11 @@ const MyComponent = () => {
 
 ```css
 --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
+/* position (z-index) */
+--mirai-ui-layer-S: 0;
+--mirai-ui-layer-M: 1;
+--mirai-ui-layer-L: 10;
+--mirai-ui-layer-XL: 100;
 ```
 
 ### Pressable
@@ -227,8 +232,8 @@ A primitive for displaying text. It receives the following props:
 - `bold:boolean` modifying font-weight
 - `children:string`
 - `headline:boolean` modifying font-size
+- `level:number` assign the level of heading (1, 2, 3 or 4)
 - `small:boolean` modifying font-size
-- `subheadline:boolean` modifying font-size
 - `tag:string` html tag of resulting element
 - `upperCase:boolean` switching text to upper case
 
@@ -278,7 +283,7 @@ A button component that receives the following props:
 - `children:node|string`
 - `disabled:boolean` applying 'disabled' attribute
 - `large:boolean` modifying the button size
-- `outlined:boolean` modifying the button appearance using an outlined line
+- `secondary:boolean` modifying the button appearance using a secondary _variant_.
 - `rounded:boolean` if true will use the theme border-radius variable for round the corners
 - `small:boolean` modifying the button size
 - `squared:boolean` if true gives rectangular shape to the button (false by default)
@@ -315,7 +320,7 @@ const MyComponent = (props) => {
 --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
 --mirai-ui-button-font: var(--mirai-ui-font);
 --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
---mirai-ui-button-outlined-background: var(--mirai-ui-base);
+--mirai-ui-button-secondary-background: var(--mirai-ui-base);
 --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
 --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
 --mirai-ui-button-radius: var(--mirai-ui-border-radius);
@@ -520,7 +525,7 @@ const MyComponent = (props) => {
 --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
 --mirai-ui-input-text-error: var(--mirai-ui-error);
 --mirai-ui-input-text-focus: var(--mirai-ui-accent);
---mirai-ui-input-text-icon: var(--mirai-ui-icon);
+--mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-4);
 --mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
 --mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
 --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
@@ -561,7 +566,7 @@ const MyComponent = () => {
     visible={visible}
     onPress={(value, event) => console.log('<Menu>::onPress', value, event)}
   >
-    <Button squared outlined onPress={() => setVisible(!visible)}>
+    <Button squared secondary onPress={() => setVisible(!visible)}>
       <Icon name="Plus" />
     </Button>
   </Menu>;
@@ -612,7 +617,7 @@ const MyComponent = (props) => {
 ```css
 --mirai-ui-modal-background: var(--mirai-ui-base);
 --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
---mirai-ui-modal-icon: var(--mirai-ui-space-L);
+--mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
 --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
 --mirai-ui-modal-overflow: rgba(0, 0, 0, 0.15);
 --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
@@ -707,24 +712,31 @@ Theme.shadeColors()
 --mirai-ui-font-weight: 400;
 --mirai-ui-font-bold: Arial, Regular;
 --mirai-ui-font-bold-weight: 700;
---mirai-ui-font-size-headline: 18px;
---mirai-ui-font-size-subheadline: 16px;
+--mirai-ui-font-size-headline-1: 32px;
+--mirai-ui-line-height-headline-1: 38px;
+--mirai-ui-font-size-headline-2: 24px;
+--mirai-ui-line-height-headline-2: 25px;
+--mirai-ui-font-size-headline-3: 18px;
+--mirai-ui-line-height-headline-3: 22px;
+--mirai-ui-font-size-headline-4: 16px;
+--mirai-ui-line-height-headline-4: 19px;
 --mirai-ui-font-size-paragraph: 14px;
+--mirai-ui-line-height-paragraph: 22px;
 --mirai-ui-font-size-action: 14px;
+--mirai-ui-line-height-action: 20px;
 --mirai-ui-font-size-small: 12px;
---mirai-ui-line-height: 24px;
+--mirai-ui-line-height-small: 18px;
 --mirai-ui-text-direction: ltr;
 --mirai-ui-text-align: left;
 
 /* palette */
 --mirai-ui-base: #ffffff;
-/* !TODO: Change to -text ------------------------------------------------- */
+
 --mirai-ui-content: #484848;
 --mirai-ui-content-background: #f6f6f6;
 --mirai-ui-content-border: #e4e4e4;
 --mirai-ui-content-dark: #202020;
 --mirai-ui-content-light: #999999;
-/* !TODO ------------------------------------------------------------------ */
 
 --mirai-ui-accent: #3978c5;
 --mirai-ui-accent-background: #e9f1fc;
@@ -758,12 +770,6 @@ Theme.shadeColors()
 --mirai-ui-space-XL: 48px;
 --mirai-ui-space-XXL: 64px;
 
-/* layer */
---mirai-ui-layer-S: 0;
---mirai-ui-layer-M: 1;
---mirai-ui-layer-L: 10;
---mirai-ui-layer-XL: 100;
-
 /* motion */
 --mirai-ui-motion-collapse: 200ms;
 --mirai-ui-motion-expand: 300ms;
@@ -773,8 +779,11 @@ Theme.shadeColors()
 --mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
 --mirai-ui-input-min-height: var(--mirai-ui-space-XL);
 
-/* defaults */
+/* border */
 --mirai-ui-border-radius: 4px;
+--mirai-ui-border-width: 1px;
+
+/* shadow */
 --mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
 ```
 

package/build/components/Button/Button.js

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 
-var _excluded = ["busy", "children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag", "wide", "onPress"];
+var _excluded = ["busy", "children", "disabled", "large", "rounded", "secondary", "small", "squared", "tag", "wide", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,8 +34,8 @@ var Button = function Button(_ref) {
       children = _ref.children,
       disabled = _ref.disabled,
       large = _ref.large,
-      outlined = _ref.outlined,
       rounded = _ref.rounded,
+      secondary = _ref.secondary,
       small = _ref.small,
       _ref$squared = _ref.squared,
       squared = _ref$squared === void 0 ? false : _ref$squared,
@@ -48,7 +48,7 @@ var Button = function Button(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled || busy,
     tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && _ButtonModule.default.outlined, outlined && (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
+    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && _ButtonModule.default.secondary, secondary && (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
     onPress: !disabled && !busy ? onPress : undefined
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, busy !== undefined && /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: (0, _helpers.styles)(_ButtonModule.default.busyProgress, busy && _ButtonModule.default.active)
@@ -62,8 +62,8 @@ Button.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
   large: _propTypes.default.bool,
-  outlined: _propTypes.default.bool,
   rounded: _propTypes.default.bool,
+  secondary: _propTypes.default.bool,
   small: _propTypes.default.bool,
   squared: _propTypes.default.bool,
   tag: _propTypes.default.string,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","outlined","rounded","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  outlined,\n  rounded,\n  small,\n  squared = false,\n  tag = 'button',\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && style.outlined,\n        outlined && (disabled || busy) && style.disabled,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\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  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,QALa,QAKbA,QALa;EAAA,IAMbC,OANa,QAMbA,OANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,IAVa,QAUbA,IAVa;EAAA,IAWbC,OAXa,QAWbA,OAXa;EAAA,IAYVC,MAZU;;EAAA,oBAcbC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIT,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIO,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETjB,IAAI,IAAIgB,sBAAMhB,IAFL,EAGTG,KAAK,IAAIa,sBAAMb,KAHN,EAITG,KAAK,IAAIU,sBAAMV,KAJN,EAKTD,OAAO,IAAIW,sBAAMX,OALR,EAMTE,OAAO,IAAIS,sBAAMT,OANR,EAOTH,QAAQ,IAAIY,sBAAMZ,QAPT,EAQTA,QAAQ,KAAKF,QAAQ,IAAIF,IAAjB,CAAR,IAAkCgB,sBAAMd,QAR/B,EASTO,IAAI,IAAIO,sBAAMP,IATL,EAUTE,MAAM,CAACI,SAVE,CANf;IAkBIL,OAAO,EAAE,CAACR,QAAD,IAAa,CAACF,IAAd,GAAqBU,OAArB,GAA+BQ;EAlB5C,iBAoBE,4DACGlB,IAAI,KAAKkB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BnB,IAAI,IAAIgB,sBAAMI,MAAzC;EAAjB,EADzB,EAEGnB,QAFH,CApBF,CAda;AAAA,CAAf;;;AAwCAF,MAAM,CAACsB,WAAP,GAAqB,kBAArB;AAEAtB,MAAM,CAACuB,SAAP,GAAmB;EACjBtB,IAAI,EAAEuB,mBAAUC,IADC;EAEjBvB,QAAQ,EAAEsB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBzB,QAAQ,EAAEqB,mBAAUC,IAHH;EAIjBrB,KAAK,EAAEoB,mBAAUC,IAJA;EAKjBpB,QAAQ,EAAEmB,mBAAUC,IALH;EAMjBnB,OAAO,EAAEkB,mBAAUC,IANF;EAOjBlB,KAAK,EAAEiB,mBAAUC,IAPA;EAQjBjB,OAAO,EAAEgB,mBAAUC,IARF;EASjBhB,GAAG,EAAEe,mBAAUG,MATE;EAUjBjB,IAAI,EAAEc,mBAAUC,IAVC;EAWjBI,OAAO,EAAEL,mBAAUM,IAXF;EAYjBC,OAAO,EAAEP,mBAAUM,IAZF;EAajBnB,OAAO,EAAEa,mBAAUM;AAbF,CAAnB"}
+{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  rounded,\n  secondary,\n  small,\n  squared = false,\n  tag = 'button',\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        secondary && style.secondary,\n        secondary && (disabled || busy) && style.disabled,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  rounded: PropTypes.bool,\n  secondary: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,OALa,QAKbA,OALa;EAAA,IAMbC,SANa,QAMbA,SANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,IAVa,QAUbA,IAVa;EAAA,IAWbC,OAXa,QAWbA,OAXa;EAAA,IAYVC,MAZU;;EAAA,oBAcbC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIT,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIO,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETjB,IAAI,IAAIgB,sBAAMhB,IAFL,EAGTG,KAAK,IAAIa,sBAAMb,KAHN,EAITG,KAAK,IAAIU,sBAAMV,KAJN,EAKTF,OAAO,IAAIY,sBAAMZ,OALR,EAMTG,OAAO,IAAIS,sBAAMT,OANR,EAOTF,SAAS,IAAIW,sBAAMX,SAPV,EAQTA,SAAS,KAAKH,QAAQ,IAAIF,IAAjB,CAAT,IAAmCgB,sBAAMd,QARhC,EASTO,IAAI,IAAIO,sBAAMP,IATL,EAUTE,MAAM,CAACI,SAVE,CANf;IAkBIL,OAAO,EAAE,CAACR,QAAD,IAAa,CAACF,IAAd,GAAqBU,OAArB,GAA+BQ;EAlB5C,iBAoBE,4DACGlB,IAAI,KAAKkB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BnB,IAAI,IAAIgB,sBAAMI,MAAzC;EAAjB,EADzB,EAEGnB,QAFH,CApBF,CAda;AAAA,CAAf;;;AAwCAF,MAAM,CAACsB,WAAP,GAAqB,kBAArB;AAEAtB,MAAM,CAACuB,SAAP,GAAmB;EACjBtB,IAAI,EAAEuB,mBAAUC,IADC;EAEjBvB,QAAQ,EAAEsB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBzB,QAAQ,EAAEqB,mBAAUC,IAHH;EAIjBrB,KAAK,EAAEoB,mBAAUC,IAJA;EAKjBpB,OAAO,EAAEmB,mBAAUC,IALF;EAMjBnB,SAAS,EAAEkB,mBAAUC,IANJ;EAOjBlB,KAAK,EAAEiB,mBAAUC,IAPA;EAQjBjB,OAAO,EAAEgB,mBAAUC,IARF;EASjBhB,GAAG,EAAEe,mBAAUG,MATE;EAUjBjB,IAAI,EAAEc,mBAAUC,IAVC;EAWjBI,OAAO,EAAEL,mBAAUM,IAXF;EAYjBC,OAAO,EAAEP,mBAAUM,IAZF;EAajBnB,OAAO,EAAEa,mBAAUM;AAbF,CAAnB"}

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

@@ -1,21 +1,3 @@
-:root {
-  --mirai-ui-button-background: var(--mirai-ui-accent);
-  --mirai-ui-button-busy-width: 0%;
-  --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
-  --mirai-ui-button-color: var(--mirai-ui-base);
-  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
-  --mirai-ui-button-color-focus: var(--mirai-ui-content);
-  --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
-  --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
-  --mirai-ui-button-font: var(--mirai-ui-font);
-  --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
-  --mirai-ui-button-outlined-background: var(--mirai-ui-base);
-  --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
-  --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
-  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
-}
-
 .button {
   align-items: center;
   background-color: var(--mirai-ui-button-background);
@@ -48,7 +30,7 @@
   }
 }
 
-.outlined .busyProgress {
+.secondary .busyProgress {
   background-color: var(--mirai-ui-button-background);
 }
 
@@ -68,24 +50,30 @@
   animation-timing-function: var(--mirai-ui-motion-easing);
 }
 
-.button:not(:disabled):active {
+.button:not(.secondary):not(:disabled):active {
   box-shadow: inset 0 0 var(--mirai-ui-space-XL) var(--mirai-ui-space-XL) var(--mirai-ui-button-color-active);
 }
 
+.button.secondary:not(:disabled):active {
+  background-color: var(--mirai-ui-button-color-focus);
+  box-shadow: none;
+  color: var(--mirai-ui-button-color);
+}
+
 .large:not(.squared) {
   font-size: var(--mirai-ui-font-size-headline);
   padding: var(--mirai-ui-button-padding-y)
     calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
 }
 
-.outlined {
-  background-color: var(--mirai-ui-button-outlined-background);
-  border: solid var(--mirai-ui-border-width) var(--mirai-ui-button-background);
+.secondary {
+  background-color: var(--mirai-ui-button-secondary-background);
+  box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-background);
   color: var(--mirai-ui-button-background);
 }
 
-.outlined.disabled:not(.busy) {
-  border-color: var(--mirai-ui-button-disabled-background);
+.secondary.disabled:not(.busy) {
+  box-shadow: none;
 }
 
 .rounded {
@@ -109,12 +97,12 @@
 }
 
 @media only screen and (min-width: 600px) {
-  .button:not(:disabled).outlined:hover {
-    border-color: var(--mirai-ui-button-color-hover);
+  .button:not(:disabled).secondary:hover:not(:active) {
+    box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-color-focus);
     color: var(--mirai-ui-button-color-focus);
   }
 
-  .button:not(:disabled):not(.outlined):hover {
+  .button:not(:disabled):not(.secondary):hover {
     background-color: var(--mirai-ui-button-color-focus);
   }
 }

package/build/components/Button/Button.stories.js

@@ -31,8 +31,8 @@ Story.args = {
   children: 'children',
   disabled: false,
   large: false,
-  outlined: false,
   rounded: false,
+  secondary: false,
   small: false,
   squared: false,
   tag: 'button',

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","names":["title","Story","props","storyName","args","busy","children","disabled","large","outlined","rounded","small","squared","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Button {...props} />;\n\nStory.storyName = 'Button';\n\nStory.args = {\n  busy: false,\n  children: 'children',\n  disabled: false,\n  large: false,\n  outlined: false,\n  rounded: false,\n  small: false,\n  squared: false,\n  tag: 'button',\n  wide: false,\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,cAAD,EAAYA,KAAZ,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,QAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,IAAI,EAAE,KADK;EAEXC,QAAQ,EAAE,UAFC;EAGXC,QAAQ,EAAE,KAHC;EAIXC,KAAK,EAAE,KAJI;EAKXC,QAAQ,EAAE,KALC;EAMXC,OAAO,EAAE,KANE;EAOXC,KAAK,EAAE,KAPI;EAQXC,OAAO,EAAE,KARE;EASXC,GAAG,EAAE,QATM;EAUXC,IAAI,EAAE;AAVK,CAAb;AAaAb,KAAK,CAACc,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAV,CADM;EAEfC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAV,CAFM;EAGfE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAV;AAHM,CAAjB"}
+{"version":3,"file":"Button.stories.js","names":["title","Story","props","storyName","args","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Button {...props} />;\n\nStory.storyName = 'Button';\n\nStory.args = {\n  busy: false,\n  children: 'children',\n  disabled: false,\n  large: false,\n  rounded: false,\n  secondary: false,\n  small: false,\n  squared: false,\n  tag: 'button',\n  wide: false,\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,cAAD,EAAYA,KAAZ,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,QAAlB;AAEAF,KAAK,CAACG,IAAN,GAAa;EACXC,IAAI,EAAE,KADK;EAEXC,QAAQ,EAAE,UAFC;EAGXC,QAAQ,EAAE,KAHC;EAIXC,KAAK,EAAE,KAJI;EAKXC,OAAO,EAAE,KALE;EAMXC,SAAS,EAAE,KANA;EAOXC,KAAK,EAAE,KAPI;EAQXC,OAAO,EAAE,KARE;EASXC,GAAG,EAAE,QATM;EAUXC,IAAI,EAAE;AAVK,CAAb;AAaAb,KAAK,CAACc,QAAN,GAAiB;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAV,CADM;EAEfC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAV,CAFM;EAGfE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAV;AAHM,CAAjB"}

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

@@ -45,10 +45,10 @@ exports[`component:<Button> prop:large 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Button> prop:outlined && prop:busy 1`] = `
+exports[`component:<Button> prop:secondary && prop:busy 1`] = `
 <DocumentFragment>
   <button
-    class="pressable button busy outlined disabled"
+    class="pressable button busy secondary disabled"
     disabled=""
   >
     <div
@@ -59,10 +59,10 @@ exports[`component:<Button> prop:outlined && prop:busy 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Button> prop:outlined 1`] = `
+exports[`component:<Button> prop:secondary 1`] = `
 <DocumentFragment>
   <button
-    class="pressable button outlined"
+    class="pressable button secondary"
   >
     children
   </button>

package/build/components/Calendar/Calendar.Month.js

@@ -74,15 +74,20 @@ var Month = function Month(_ref) {
     onPress: onPrevious,
     "data-testid": testID ? "".concat(testID, "-previous") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    headline: true,
+    level: 4,
     name: "Left"
   })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    subheadline: true,
+    headline: true,
+    level: 4,
     className: _CalendarModule.default.title
   }, (0, _helpers2.getHeader)(instance, locale)), onNext && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: onNext,
     className: _CalendarModule.default.pressable,
     "data-testid": testID ? "".concat(testID, "-next") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    headline: true,
+    level: 4,
     name: "Right"
   }))), isDesktop && /*#__PURE__*/_react.default.createElement(_Calendar3.Weekdays, {
     locale: locale

package/build/components/Calendar/Calendar.Month.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","isDesktop","weekNumber","testID","style","month","className","header","undefined","title","pressable","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","value","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n  focus,\n  instance,\n  selected,\n  disabledPast,\n  format,\n  from,\n  locale,\n  range = false,\n  to,\n  onChange = () => {},\n  onFocus = () => {},\n  onNext,\n  onPrevious,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const weekNumber = getWeekNumber(instance);\n\n  const { ['data-testid']: testID } = others;\n\n  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious} data-testid={testID ? `${testID}-previous` : undefined}>\n            <Icon name=\"Left\" />\n          </Pressable>\n        )}\n        <Text subheadline className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext} className={style.pressable} data-testid={testID ? `${testID}-next` : undefined}>\n            <Icon name=\"Right\" />\n          </Pressable>\n        )}\n      </View>\n\n      {isDesktop && <Weekdays locale={locale} />}\n\n      {VISIBLE_WEEKS.map((week) => (\n        <Week\n          {...{\n            ...others,\n            disabledPast,\n            focus,\n            format,\n            from,\n            locale,\n            to,\n            range,\n            selected,\n          }}\n          key={week}\n          month={instance.getMonth()}\n          number={weekNumber + week}\n          year={instance.getFullYear()}\n          onFocus={onFocus}\n          onPress={onChange}\n        />\n      ))}\n    </View>\n  );\n};\n\nMonth.displayName = 'Component:Calendar:Month';\n\nMonth.propTypes = {\n  captions: PropTypes.shape({}),\n  focus: PropTypes.any,\n  instance: PropTypes.any,\n  selected: PropTypes.any,\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.instanceOf(Date),\n  locale: PropTypes.string,\n  range: PropTypes.bool,\n  to: PropTypes.instanceOf(Date),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onNext: PropTypes.func,\n  onPrevious: PropTypes.func,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","isDesktop","weekNumber","testID","style","month","className","header","undefined","title","pressable","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName","propTypes","captions","PropTypes","shape","any","disabledDates","arrayOf","string","bool","instanceOf","Date","value","oneOfType","func"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n  focus,\n  instance,\n  selected,\n  disabledPast,\n  format,\n  from,\n  locale,\n  range = false,\n  to,\n  onChange = () => {},\n  onFocus = () => {},\n  onNext,\n  onPrevious,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const weekNumber = getWeekNumber(instance);\n\n  const { ['data-testid']: testID } = others;\n\n  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious} data-testid={testID ? `${testID}-previous` : undefined}>\n            <Icon headline level={4} name=\"Left\" />\n          </Pressable>\n        )}\n        <Text headline level={4} className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext} className={style.pressable} data-testid={testID ? `${testID}-next` : undefined}>\n            <Icon headline level={4} name=\"Right\" />\n          </Pressable>\n        )}\n      </View>\n\n      {isDesktop && <Weekdays locale={locale} />}\n\n      {VISIBLE_WEEKS.map((week) => (\n        <Week\n          {...{\n            ...others,\n            disabledPast,\n            focus,\n            format,\n            from,\n            locale,\n            to,\n            range,\n            selected,\n          }}\n          key={week}\n          month={instance.getMonth()}\n          number={weekNumber + week}\n          year={instance.getFullYear()}\n          onFocus={onFocus}\n          onPress={onChange}\n        />\n      ))}\n    </View>\n  );\n};\n\nMonth.displayName = 'Component:Calendar:Month';\n\nMonth.propTypes = {\n  captions: PropTypes.shape({}),\n  focus: PropTypes.any,\n  instance: PropTypes.any,\n  selected: PropTypes.any,\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.instanceOf(Date),\n  locale: PropTypes.string,\n  range: PropTypes.bool,\n  to: PropTypes.instanceOf(Date),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onNext: PropTypes.func,\n  onPrevious: PropTypes.func,\n};\n"],"mappings":"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"}

package/build/components/Calendar/Calendar.module.css

@@ -1,15 +1,3 @@
-:root {
-  --mirai-ui-calendar-caption-color: var(--mirai-ui-content-light);
-  --mirai-ui-calendar-cell: var(--mirai-ui-space-XL);
-  --mirai-ui-calendar-highlight-color: var(--mirai-ui-accent);
-  --mirai-ui-calendar-padding: var(--mirai-ui-space-XS);
-  --mirai-ui-calendar-range-background: var(--mirai-ui-content-background);
-  --mirai-ui-calendar-selected-background: var(--mirai-ui-accent);
-  --mirai-ui-calendar-selected-color: var(--mirai-ui-base);
-  --mirai-ui-calendar-weekday-color: var(--mirai-ui-content-light);
-  --mirai-ui-calendar-week-margin: 2px;
-}
-
 .month {
   justify-content: flex-start;
   padding: var(--mirai-ui-calendar-padding);

package/build/components/Calendar/Calendar.stories.js

@@ -0,0 +1,125 @@
+"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 _locale = require("@mirai/locale");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Calendar = require("./Calendar");
+
+var _captions;
+
+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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = {
+  title: 'Components'
+};
+exports.default = _default;
+
+var Story = function Story(props) {
+  return /*#__PURE__*/React.createElement(_Calendar.Calendar, props);
+};
+
+exports.Story = Story;
+var format = 'DD/MM/YYYY';
+var today = new Date();
+Story.storyName = 'Calendar';
+Story.args = {
+  captions: (_captions = {}, _defineProperty(_captions, (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 6, 'days'), {
+    format: format
+  }), '10.95$'), _defineProperty(_captions, (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 8, 'days'), {
+    format: format
+  }), '129510.95$'), _defineProperty(_captions, (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 16, 'days'), {
+    format: format
+  }), '10.95$'), _defineProperty(_captions, (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 18, 'days'), {
+    format: format
+  }), '9.95$'), _captions),
+  disabledDates: [(0, _locale.dateFormat)((0, _locale.dateCalc)(today, 20, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 21, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 22, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 23, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 24, 'days'), {
+    format: format
+  })],
+  disabledPast: true,
+  format: format,
+  from: '',
+  highlights: [(0, _locale.dateFormat)((0, _locale.dateCalc)(today, 6, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 10, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 12, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 14, 'days'), {
+    format: format
+  }), (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 16, 'days'), {
+    format: format
+  })],
+  locale: 'es-ES',
+  months: 2,
+  range: true,
+  rangeMaxDays: 7,
+  rangeMinDays: 3,
+  to: (0, _locale.dateFormat)((0, _locale.dateCalc)(today, 6, 'months')),
+  value: [],
+  onChange: function onChange() {
+    var _console;
+
+    for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+      props[_key] = arguments[_key];
+    }
+
+    return (_console = console).log.apply(_console, ['<Calendar>::onChange'].concat(props));
+  },
+  onFocus: function onFocus() {
+    var _console2;
+
+    for (var _len2 = arguments.length, props = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      props[_key2] = arguments[_key2];
+    }
+
+    return (_console2 = console).log.apply(_console2, ['<Calendar>::onFocus'].concat(props));
+  },
+  onNavigation: function onNavigation() {
+    var _console3;
+
+    for (var _len3 = arguments.length, props = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      props[_key3] = arguments[_key3];
+    }
+
+    return (_console3 = console).log.apply(_console3, ['<Calendar>::onNavigation'].concat(props));
+  },
+  onScroll: function onScroll() {
+    var _console4;
+
+    for (var _len4 = arguments.length, props = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      props[_key4] = arguments[_key4];
+    }
+
+    return (_console4 = console).log.apply(_console4, ['<Calendar>::onScroll'].concat(props));
+  }
+};
+Story.argTypes = {
+  locale: {
+    options: ['es-ES', 'en-GB', 'ja-JP', 'it-IT', 'pt-PT'],
+    control: {
+      type: 'select'
+    },
+    defaultValue: 'es-ES'
+  }
+};
+//# sourceMappingURL=Calendar.stories.js.map

package/build/components/Calendar/Calendar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.stories.js","names":["title","Story","props","format","today","Date","storyName","args","captions","disabledDates","disabledPast","from","highlights","locale","months","range","rangeMaxDays","rangeMinDays","to","value","onChange","console","log","onFocus","onNavigation","onScroll","argTypes","options","control","type","defaultValue"],"sources":["../../../src/components/Calendar/Calendar.stories.jsx"],"sourcesContent":["import { dateCalc, dateFormat } from '@mirai/locale';\nimport * as React from 'react';\n\nimport { Calendar } from './Calendar';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Calendar {...props} />;\n\nconst format = 'DD/MM/YYYY';\nconst today = new Date();\n\nStory.storyName = 'Calendar';\n\nStory.args = {\n  captions: {\n    [dateFormat(dateCalc(today, 6, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 8, 'days'), { format })]: '129510.95$',\n    [dateFormat(dateCalc(today, 16, 'days'), { format })]: '10.95$',\n    [dateFormat(dateCalc(today, 18, 'days'), { format })]: '9.95$',\n  },\n  disabledDates: [\n    dateFormat(dateCalc(today, 20, 'days'), { format }),\n    dateFormat(dateCalc(today, 21, 'days'), { format }),\n    dateFormat(dateCalc(today, 22, 'days'), { format }),\n    dateFormat(dateCalc(today, 23, 'days'), { format }),\n    dateFormat(dateCalc(today, 24, 'days'), { format }),\n  ],\n  disabledPast: true,\n  format,\n  from: '',\n  highlights: [\n    dateFormat(dateCalc(today, 6, 'days'), { format }),\n    dateFormat(dateCalc(today, 10, 'days'), { format }),\n    dateFormat(dateCalc(today, 12, 'days'), { format }),\n    dateFormat(dateCalc(today, 14, 'days'), { format }),\n    dateFormat(dateCalc(today, 16, 'days'), { format }),\n  ],\n  locale: 'es-ES',\n  months: 2,\n  range: true,\n  rangeMaxDays: 7,\n  rangeMinDays: 3,\n  to: dateFormat(dateCalc(today, 6, 'months')),\n  value: [],\n  onChange: (...props) => console.log('<Calendar>::onChange', ...props),\n  onFocus: (...props) => console.log('<Calendar>::onFocus', ...props),\n  onNavigation: (...props) => console.log('<Calendar>::onNavigation', ...props),\n  onScroll: (...props) => console.log('<Calendar>::onScroll', ...props),\n};\n\nStory.argTypes = {\n  locale: {\n    options: ['es-ES', 'en-GB', 'ja-JP', 'it-IT', 'pt-PT'],\n    control: { type: 'select' },\n    defaultValue: 'es-ES',\n  },\n};\n"],"mappings":"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"}