@mirai/ui 1.0.63 → 1.0.64

package/README.md

@@ -580,6 +580,7 @@ This component helps you to create a menu over a determinate component receiving
 - `children:node` The element which we will use as reference for display the menu.
 - `options:arrayOf(Option:shape)`
 - `Template:node` if you don't want use the default option scaffold.
+- `title:string` shows a title for the modal
 - `visible:boolean` showing or hiding the menu
 - `onPress:func` callback when we click on a determinate _option_.
 
@@ -633,8 +634,9 @@ const MyComponent = () => {
 A modal component receiving the following props:
 
 - `children:node`
-- `portal:bool` if you want use _portal feature_ of React API
+- `fit:bool` if you want use fit width with the content
 - `overflow:bool` wraps all modal in a semi-transparent layer
+- `portal:bool` if you want use _portal feature_ of React API
 - `title:string` shows a title for the modal
 - `visible:boolean` if true modal is shown
 - `onBack:function` executed once back button is clicked
@@ -812,6 +814,11 @@ Theme.shadeColors()
 --mirai-ui-space-XL: 48px;
 --mirai-ui-space-XXL: 64px;
 
+/* breakpoints */
+--mirai-ui-breakpoint-S: 430px;
+--mirai-ui-breakpoint-M: 768px;
+--mirai-ui-breakpoint-content: 1280px;
+
 /* motion */
 --mirai-ui-motion-collapse: 200ms;
 --mirai-ui-motion-expand: 300ms;

package/build/components/InputDate/InputDate.js

@@ -17,9 +17,12 @@ var _primitives = require("../../primitives");
 
 var _InputText = require("../InputText");
 
+var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
+
 var _InputDateModule = _interopRequireDefault(require("./InputDate.module.css"));
 
-var _excluded = ["disabled", "error", "format", "label", "labels", "max", "min", "name", "required", "value", "onChange", "onError", "onEnter", "onLeave"];
+var _excluded = ["disabled", "error", "format", "hint", "label", "labels", "max", "min", "name", "placeholder", "required", "value", "onChange", "onError", "onEnter", "onLeave"],
+    _excluded2 = ["className", "data-testid"];
 
 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); }
 
@@ -27,6 +30,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -48,12 +53,15 @@ var InputDate = function InputDate(_ref) {
       error = _ref.error,
       _ref$format = _ref.format,
       format = _ref$format === void 0 ? 'DD/MM/YYYY' : _ref$format,
+      hint = _ref.hint,
       label = _ref.label,
       _ref$labels = _ref.labels,
       labels = _ref$labels === void 0 ? [] : _ref$labels,
       max = _ref.max,
       min = _ref.min,
       name = _ref.name,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? true : _ref$placeholder,
       required = _ref.required,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value,
@@ -82,6 +90,7 @@ var InputDate = function InputDate(_ref) {
     var nextValue = parts.map(function (part, index) {
       return part !== partKey ? values[index] || '' : partValue;
     }).join('/');
+    onChange(nextValue, event);
     var errors = (0, _helpers.getInputDateErrors)({
       format: format,
       max: max,
@@ -90,7 +99,6 @@ var InputDate = function InputDate(_ref) {
       required: required
     });
     if (Object.keys(errors).length > 0) onError(errors);
-    onChange(nextValue, event);
   };
 
   var handleEnter = function handleEnter(event) {
@@ -103,23 +111,28 @@ var InputDate = function InputDate(_ref) {
     onLeave(event);
   };
 
-  var testId = others['data-testid'];
+  var className = others.className,
+      testId = others['data-testid'],
+      rest = _objectWithoutProperties(others, _excluded2);
+
   return /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: others.className,
+    className: (0, _helpers.styles)(_InputTextModule.default.inputContainer, className),
     "data-testid": testId
   }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    className: (0, _helpers.styles)(_InputDateModule.default.label, disabled && _InputDateModule.default.disabled, focus && _InputDateModule.default.focus, error && _InputDateModule.default.error)
+    small: true,
+    className: (0, _helpers.styles)(_InputDateModule.default.label, _InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, focus && _InputTextModule.default.focus, error && _InputTextModule.default.error)
   }, label), /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true
   }, parts.map(function (part, index) {
-    return /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+    return /*#__PURE__*/_react.default.createElement(_InputText.InputText, _extends({}, rest, {
       disabled: disabled,
       error: error,
-      hint: labels[index] || part,
+      hint: !placeholder ? labels[index] || part : undefined,
       key: index,
       maxLength: part.length,
       name: "".concat(name, ":").concat(part),
-      showState: false,
+      placeholder: placeholder ? labels[index] || part : undefined,
+      showState: index === parts.length - 1,
       value: values[index],
       onChange: function onChange(value) {
         for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -130,10 +143,13 @@ var InputDate = function InputDate(_ref) {
       },
       onEnter: handleEnter,
       onLeave: handleLeave,
-      className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)]),
+      className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)], index === parts.length - 1 && _InputDateModule.default.state),
       "data-testid": testId ? "".concat(testId, "-").concat(part) : undefined
-    });
-  })));
+    }));
+  })), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    small: true,
+    className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
+  }, hint));
 };
 
 exports.InputDate = InputDate;
@@ -143,12 +159,12 @@ InputDate.propTypes = {
   error: _propTypes.default.bool,
   format: _propTypes.default.string,
   hint: _propTypes.default.string,
-  // !TODO
   label: _propTypes.default.string,
   labels: _propTypes.default.arrayOf(_propTypes.default.string),
   max: _propTypes.default.string,
   min: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,
+  placeholder: _propTypes.default.bool,
   required: _propTypes.default.bool,
   value: _propTypes.default.string,
   onChange: _propTypes.default.func,

package/build/components/InputDate/InputDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","label","labels","max","min","name","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","testId","className","style","rest","input","substring","undefined","displayName","propTypes","PropTypes","bool","string","hint","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from './InputDate.module.css';\n\nconst InputDate = ({\n  disabled,\n  error,\n  format = 'DD/MM/YYYY',\n  label,\n  labels = [],\n  max,\n  min,\n  name,\n  required,\n  value = '',\n  onChange = () => {},\n  onError = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const parts = format.split('/');\n  const values = value?.split('/') || [];\n\n  const handleChange = (partValue = '', partKey, event) => {\n    const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n    const errors = getInputDateErrors({ format, max, min, value, required });\n    if (Object.keys(errors).length > 0) onError(errors);\n\n    onChange(nextValue, event);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const { ['data-testid']: testId } = others;\n\n  return (\n    <View className={others.className} data-testid={testId}>\n      <Text className={styles(style.label, disabled && style.disabled, focus && style.focus, error && style.error)}>\n        {label}\n      </Text>\n\n      <View row>\n        {parts.map((part, index) => (\n          <InputText\n            disabled={disabled}\n            error={error}\n            hint={labels[index] || part}\n            key={index}\n            maxLength={part.length}\n            name={`${name}:${part}`}\n            showState={false}\n            value={values[index]}\n            onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n            className={styles(style.input, style[part.substring(0, 1)])}\n            data-testid={testId ? `${testId}-${part}` : undefined}\n          />\n        ))}\n      </View>\n    </View>\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  format: PropTypes.string,\n  hint: PropTypes.string, // !TODO\n  label: PropTypes.string,\n  labels: PropTypes.arrayOf(PropTypes.string),\n  max: PropTypes.string,\n  min: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAgBZ;EAAA,IAfJC,QAeI,QAfJA,QAeI;EAAA,IAdJC,KAcI,QAdJA,KAcI;EAAA,uBAbJC,MAaI;EAAA,IAbJA,MAaI,4BAbK,YAaL;EAAA,IAZJC,KAYI,QAZJA,KAYI;EAAA,uBAXJC,MAWI;EAAA,IAXJA,MAWI,4BAXK,EAWL;EAAA,IAVJC,GAUI,QAVJA,GAUI;EAAA,IATJC,GASI,QATJA,GASI;EAAA,IARJC,IAQI,QARJA,IAQI;EAAA,IAPJC,QAOI,QAPJA,QAOI;EAAA,sBANJC,KAMI;EAAA,IANJA,KAMI,2BANI,EAMJ;EAAA,yBALJC,QAKI;EAAA,IALJA,QAKI,8BALO,YAAM,CAAE,CAKf;EAAA,wBAJJC,OAII;EAAA,IAJJA,OAII,6BAJM,YAAM,CAAE,CAId;EAAA,wBAHJC,OAGI;EAAA,IAHJA,OAGI,6BAHM,YAAM,CAAE,CAGd;EAAA,wBAFJC,OAEI;EAAA,IAFJA,OAEI,6BAFM,YAAM,CAAE,CAEd;EAAA,IADDC,MACC;;EACJ,gBAA0B,qBAAS,KAAT,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,KAAK,GAAGf,MAAM,CAACgB,KAAP,CAAa,GAAb,CAAd;EACA,IAAMC,MAAM,GAAG,CAAAV,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAES,KAAP,CAAa,GAAb,MAAqB,EAApC;;EAEA,IAAME,YAAY,GAAG,SAAfA,YAAe,GAAoC;IAAA,IAAnCC,SAAmC,uEAAvB,EAAuB;IAAA,IAAnBC,OAAmB;IAAA,IAAVC,KAAU;IACvD,IAAMC,SAAS,GAAGP,KAAK,CAACQ,GAAN,CAAU,UAACC,IAAD,EAAOC,KAAP;MAAA,OAAkBD,IAAI,KAAKJ,OAAT,GAAmBH,MAAM,CAACQ,KAAD,CAAN,IAAiB,EAApC,GAAyCN,SAA3D;IAAA,CAAV,EAAiFO,IAAjF,CAAsF,GAAtF,CAAlB;IACA,IAAMC,MAAM,GAAG,iCAAmB;MAAE3B,MAAM,EAANA,MAAF;MAAUG,GAAG,EAAHA,GAAV;MAAeC,GAAG,EAAHA,GAAf;MAAoBG,KAAK,EAALA,KAApB;MAA2BD,QAAQ,EAARA;IAA3B,CAAnB,CAAf;IACA,IAAIsB,MAAM,CAACC,IAAP,CAAYF,MAAZ,EAAoBG,MAApB,GAA6B,CAAjC,EAAoCrB,OAAO,CAACkB,MAAD,CAAP;IAEpCnB,QAAQ,CAACc,SAAD,EAAYD,KAAZ,CAAR;EACD,CAND;;EAQA,IAAMU,WAAW,GAAG,SAAdA,WAAc,CAACV,KAAD,EAAW;IAC7BP,QAAQ,CAAC,IAAD,CAAR;IACAJ,OAAO,CAACW,KAAD,CAAP;EACD,CAHD;;EAKA,IAAMW,WAAW,GAAG,SAAdA,WAAc,CAACX,KAAD,EAAW;IAC7BP,QAAQ,CAAC,KAAD,CAAR;IACAH,OAAO,CAACU,KAAD,CAAP;EACD,CAHD;;EAKA,IAAyBY,MAAzB,GAAoCrB,MAApC,CAAS,aAAT;EAEA,oBACE,6BAAC,gBAAD;IAAM,SAAS,EAAEA,MAAM,CAACsB,SAAxB;IAAmC,eAAaD;EAAhD,gBACE,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOE,yBAAMlC,KAAb,EAAoBH,QAAQ,IAAIqC,yBAAMrC,QAAtC,EAAgDe,KAAK,IAAIsB,yBAAMtB,KAA/D,EAAsEd,KAAK,IAAIoC,yBAAMpC,KAArF;EAAjB,GACGE,KADH,CADF,eAKE,6BAAC,gBAAD;IAAM,GAAG;EAAT,GACGc,KAAK,CAACQ,GAAN,CAAU,UAACC,IAAD,EAAOC,KAAP;IAAA,oBACT,6BAAC,oBAAD;MACE,QAAQ,EAAE3B,QADZ;MAEE,KAAK,EAAEC,KAFT;MAGE,IAAI,EAAEG,MAAM,CAACuB,KAAD,CAAN,IAAiBD,IAHzB;MAIE,GAAG,EAAEC,KAJP;MAKE,SAAS,EAAED,IAAI,CAACM,MALlB;MAME,IAAI,YAAKzB,IAAL,cAAamB,IAAb,CANN;MAOE,SAAS,EAAE,KAPb;MAQE,KAAK,EAAEP,MAAM,CAACQ,KAAD,CARf;MASE,QAAQ,EAAE,kBAAClB,KAAD;QAAA,kCAAW6B,IAAX;UAAWA,IAAX;QAAA;;QAAA,OAAoBlB,YAAY,MAAZ,UAAaX,KAAb,EAAoBiB,IAApB,SAA6BY,IAA7B,EAApB;MAAA,CATZ;MAUE,OAAO,EAAEL,WAVX;MAWE,OAAO,EAAEC,WAXX;MAYE,SAAS,EAAE,qBAAOG,yBAAME,KAAb,EAAoBF,yBAAMX,IAAI,CAACc,SAAL,CAAe,CAAf,EAAkB,CAAlB,CAAN,CAApB,CAZb;MAaE,eAAaL,MAAM,aAAMA,MAAN,cAAgBT,IAAhB,IAAyBe;IAb9C,EADS;EAAA,CAAV,CADH,CALF,CADF;AA2BD,CArED;;;AAuEA1C,SAAS,CAAC2C,WAAV,GAAwB,qBAAxB;AAEA3C,SAAS,CAAC4C,SAAV,GAAsB;EACpB3C,QAAQ,EAAE4C,mBAAUC,IADA;EAEpB5C,KAAK,EAAE2C,mBAAUC,IAFG;EAGpB3C,MAAM,EAAE0C,mBAAUE,MAHE;EAIpBC,IAAI,EAAEH,mBAAUE,MAJI;EAII;EACxB3C,KAAK,EAAEyC,mBAAUE,MALG;EAMpB1C,MAAM,EAAEwC,mBAAUI,OAAV,CAAkBJ,mBAAUE,MAA5B,CANY;EAOpBzC,GAAG,EAAEuC,mBAAUE,MAPK;EAQpBxC,GAAG,EAAEsC,mBAAUE,MARK;EASpBvC,IAAI,EAAEqC,mBAAUE,MAAV,CAAiBG,UATH;EAUpBzC,QAAQ,EAAEoC,mBAAUC,IAVA;EAWpBpC,KAAK,EAAEmC,mBAAUE,MAXG;EAYpBpC,QAAQ,EAAEkC,mBAAUM,IAZA;EAapBvC,OAAO,EAAEiC,mBAAUM,IAbC;EAcpBtC,OAAO,EAAEgC,mBAAUM,IAdC;EAepBrC,OAAO,EAAE+B,mBAAUM;AAfC,CAAtB"}
+{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","hint","label","labels","max","min","name","placeholder","required","value","onChange","onError","onEnter","onLeave","others","focus","setFocus","parts","split","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","Object","keys","length","handleEnter","handleLeave","className","testId","rest","style","inputContainer","styleDate","text","undefined","input","substring","state","displayName","propTypes","PropTypes","bool","string","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from '../InputText/InputText.module.css';\nimport styleDate from './InputDate.module.css';\n\nconst InputDate = ({\n  disabled,\n  error,\n  format = 'DD/MM/YYYY',\n  hint,\n  label,\n  labels = [],\n  max,\n  min,\n  name,\n  placeholder = true,\n  required,\n  value = '',\n  onChange = () => {},\n  onError = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const parts = format.split('/');\n  const values = value?.split('/') || [];\n\n  const handleChange = (partValue = '', partKey, event) => {\n    const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n    onChange(nextValue, event);\n\n    const errors = getInputDateErrors({ format, max, min, value, required });\n    if (Object.keys(errors).length > 0) onError(errors);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const { className, ['data-testid']: testId, ...rest } = others;\n\n  return (\n    <View className={styles(style.inputContainer, className)} data-testid={testId}>\n      <Text\n        small\n        className={styles(\n          styleDate.label,\n          style.text,\n          style.hint,\n          disabled && style.disabled,\n          focus && style.focus,\n          error && style.error,\n        )}\n      >\n        {label}\n      </Text>\n\n      <View row>\n        {parts.map((part, index) => (\n          <InputText\n            {...rest}\n            disabled={disabled}\n            error={error}\n            hint={!placeholder ? labels[index] || part : undefined}\n            key={index}\n            maxLength={part.length}\n            name={`${name}:${part}`}\n            placeholder={placeholder ? labels[index] || part : undefined}\n            showState={index === parts.length - 1}\n            value={values[index]}\n            onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n            className={styles(\n              styleDate.input,\n              styleDate[part.substring(0, 1)],\n              index === parts.length - 1 && styleDate.state,\n            )}\n            data-testid={testId ? `${testId}-${part}` : undefined}\n          />\n        ))}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  format: PropTypes.string,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  labels: PropTypes.arrayOf(PropTypes.string),\n  max: PropTypes.string,\n  min: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  placeholder: PropTypes.bool,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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"}

package/build/components/InputDate/InputDate.module.css

@@ -1,29 +1,22 @@
 .input {
   max-width: calc(calc(var(--mirai-ui-input-font-size) * 2.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
+  margin-bottom: 0;
+  margin-top: 0;
 }
 
 .input:not(:last-child) {
-  margin-right: var(--mirai-ui-space-S);
+  margin-right: var(--mirai-ui-input-text-padding-x);
 }
 
-.input.Y {
+.input.Y,
+.input.state:not(.Y) {
   max-width: calc(calc(var(--mirai-ui-input-font-size) * 3.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
 }
 
-.label {
-  font-size: var(--mirai-ui-font-size-small);
-  margin-bottom: calc(var(--mirai-ui-font-size-small) * -1);
-  padding: 0 calc(var(--mirai-ui-input-text-padding-x) / 2);
-}
-
-.label.disabled {
-  color: var(--mirai-ui-input-text-disabled);
+.input.state.Y {
+  max-width: calc(calc(var(--mirai-ui-input-font-size) * 4.25) + calc(var(--mirai-ui-input-text-padding-x) * 2));
 }
 
-.label.focus {
-  color: var(--mirai-ui-input-text-focus);
-}
-
-.label.error {
-  color: var(--mirai-ui-error);
+.label {
+  margin-top: calc(var(--mirai-ui-font-size-small) * -0.5);
 }

package/build/components/InputDate/InputDate.stories.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _InputDate = require("./InputDate");
 
+var _InputText = require("../InputText");
+
 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; }
@@ -23,7 +25,14 @@ var _default = {
 exports.default = _default;
 
 var Story = function Story(props) {
-  return /*#__PURE__*/React.createElement(_InputDate.InputDate, props);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InputText.InputText, {
+    label: "name",
+    hint: true
+  }), /*#__PURE__*/React.createElement(_InputDate.InputDate, props), /*#__PURE__*/React.createElement(_InputText.InputText, {
+    label: "password",
+    type: "password",
+    hint: true
+  }));
 };
 
 exports.Story = Story;
@@ -37,6 +46,7 @@ Story.args = _defineProperty({
   max: '10/04/2080',
   min: '10/04/1980',
   name: 'name',
+  placeholder: true,
   required: false,
   value: '06/05/2020',
   onChange: function onChange() {

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

@@ -1 +1 @@
-{"version":3,"file":"InputDate.stories.js","names":["title","Story","props","storyName","args","disabled","error","format","hint","label","max","min","name","required","value","onChange","console","log","onError","onEnter","onLeave","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputDate } from './InputDate';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <InputDate {...props} />;\n\nStory.storyName = 'InputDate';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  format: 'DD/MM/YYYY',\n  hint: 'hint',\n  label: 'label',\n  max: '10/04/2080',\n  min: '10/04/1980',\n  name: 'name',\n  required: false,\n  value: '06/05/2020',\n  onChange: (...props) => console.log('<InputDate>::onBlur', ...props),\n  onError: (...props) => console.log('<InputDate>::onError', ...props),\n  onEnter: (...props) => console.log('<InputDate>::onEnter', ...props),\n  onLeave: (...props) => console.log('<InputDate>::onLeave', ...props),\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBAAW,oBAAC,oBAAD,EAAeA,KAAf,CAAX;AAAA,CAAd;;;AAEPD,KAAK,CAACE,SAAN,GAAkB,WAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,QAAQ,EAAE,KADZ;EAEEC,KAAK,EAAE,KAFT;EAGEC,MAAM,EAAE,YAHV;EAIEC,IAAI,EAAE,MAJR;EAKEC,KAAK,EAAE,OALT;EAMEC,GAAG,EAAE,YANP;EAOEC,GAAG,EAAE,YAPP;EAQEC,IAAI,EAAE,MARR;EASEC,QAAQ,EAAE,KATZ;EAUEC,KAAK,EAAE,YAVT;EAWEC,QAAQ,EAAE;IAAA;;IAAA,kCAAIb,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAc,OAAO,EAACC,GAAR,kBAAY,qBAAZ,SAAsCf,KAAtC,EAAd;EAAA,CAXZ;EAYEgB,OAAO,EAAE;IAAA;;IAAA,mCAAIhB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAc,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCf,KAAvC,EAAd;EAAA,CAZX;EAaEiB,OAAO,EAAE;IAAA;;IAAA,mCAAIjB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAc,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCf,KAAvC,EAAd;EAAA,CAbX;EAcEkB,OAAO,EAAE;IAAA;;IAAA,mCAAIlB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAc,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuCf,KAAvC,EAAd;EAAA;AAdX,GAeG,aAfH,EAemB,YAfnB;AAkBAD,KAAK,CAACoB,QAAN,GAAiB,EAAjB"}
+{"version":3,"file":"InputDate.stories.js","names":["title","Story","props","storyName","args","disabled","error","format","hint","label","max","min","name","placeholder","required","value","onChange","console","log","onError","onEnter","onLeave","argTypes"],"sources":["../../../src/components/InputDate/InputDate.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { InputDate } from './InputDate';\nimport { InputText } from '../InputText';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <>\n    <InputText label=\"name\" hint />\n    <InputDate {...props} />\n    <InputText label=\"password\" type=\"password\" hint />\n  </>\n);\n\nStory.storyName = 'InputDate';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  format: 'DD/MM/YYYY',\n  hint: 'hint',\n  label: 'label',\n  max: '10/04/2080',\n  min: '10/04/1980',\n  name: 'name',\n  placeholder: true,\n  required: false,\n  value: '06/05/2020',\n  onChange: (...props) => console.log('<InputDate>::onBlur', ...props),\n  onError: (...props) => console.log('<InputDate>::onError', ...props),\n  onEnter: (...props) => console.log('<InputDate>::onEnter', ...props),\n  onLeave: (...props) => console.log('<InputDate>::onLeave', ...props),\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;;;eAEe;EAAEA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;EAAA,oBACnB,uDACE,oBAAC,oBAAD;IAAW,KAAK,EAAC,MAAjB;IAAwB,IAAI;EAA5B,EADF,eAEE,oBAAC,oBAAD,EAAeA,KAAf,CAFF,eAGE,oBAAC,oBAAD;IAAW,KAAK,EAAC,UAAjB;IAA4B,IAAI,EAAC,UAAjC;IAA4C,IAAI;EAAhD,EAHF,CADmB;AAAA,CAAd;;;AAQPD,KAAK,CAACE,SAAN,GAAkB,WAAlB;AAEAF,KAAK,CAACG,IAAN;EACEC,QAAQ,EAAE,KADZ;EAEEC,KAAK,EAAE,KAFT;EAGEC,MAAM,EAAE,YAHV;EAIEC,IAAI,EAAE,MAJR;EAKEC,KAAK,EAAE,OALT;EAMEC,GAAG,EAAE,YANP;EAOEC,GAAG,EAAE,YAPP;EAQEC,IAAI,EAAE,MARR;EASEC,WAAW,EAAE,IATf;EAUEC,QAAQ,EAAE,KAVZ;EAWEC,KAAK,EAAE,YAXT;EAYEC,QAAQ,EAAE;IAAA;;IAAA,kCAAId,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,YAAAe,OAAO,EAACC,GAAR,kBAAY,qBAAZ,SAAsChB,KAAtC,EAAd;EAAA,CAZZ;EAaEiB,OAAO,EAAE;IAAA;;IAAA,mCAAIjB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAe,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuChB,KAAvC,EAAd;EAAA,CAbX;EAcEkB,OAAO,EAAE;IAAA;;IAAA,mCAAIlB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAe,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuChB,KAAvC,EAAd;EAAA,CAdX;EAeEmB,OAAO,EAAE;IAAA;;IAAA,mCAAInB,KAAJ;MAAIA,KAAJ;IAAA;;IAAA,OAAc,aAAAe,OAAO,EAACC,GAAR,mBAAY,sBAAZ,SAAuChB,KAAvC,EAAd;EAAA;AAfX,GAgBG,aAhBH,EAgBmB,YAhBnB;AAmBAD,KAAK,CAACqB,QAAN,GAAiB,EAAjB"}