@tecsinapse/react-web-kit 1.16.1 → 1.17.2

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.17.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.17.1...@tecsinapse/react-web-kit@1.17.2) (2022-05-13)
+
+
+### Bug Fixes
+
+* error render, added ternary  ([#163902](https://github.com/tecsinapse/design-system/issues/163902)) ([fd52d5c](https://github.com/tecsinapse/design-system/commit/fd52d5cfe7ca7f56c0b721ad17d8bac589295bf5))
+
+
+
+
+
+## [1.17.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.17.0...@tecsinapse/react-web-kit@1.17.1) (2022-05-13)
+
+
+### Features
+
+* standardizing input label and placeholder ([#163902](https://github.com/tecsinapse/design-system/issues/163902)) ([225a57b](https://github.com/tecsinapse/design-system/commit/225a57b8c5f8b6a7ae1058a56590a3f0dd294d55))
+
+
+
+
+
+# [1.17.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.16.1...@tecsinapse/react-web-kit@1.17.0) (2022-05-10)
+
+
+### Bug Fixes
+
+* inputMask accepting undefined. ([6037162](https://github.com/tecsinapse/design-system/commit/6037162a564c118c8faed8359418ff7eda6d1645))
+* wrong storybook title ([c421df4](https://github.com/tecsinapse/design-system/commit/c421df46fec3d8c9119af9ca70c4efad693921dd))
+
+
+
+
+
 ## [1.16.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.16.0...@tecsinapse/react-web-kit@1.16.1) (2022-04-01)
 
 

package/dist/components/atoms/Input/Input.js

@@ -37,6 +37,8 @@ const Input = _react.default.forwardRef(({
   hint,
   onFocus,
   onBlur,
+  placeholder,
+  value,
   ...rest
 }, ref) => {
   const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
@@ -49,10 +51,11 @@ const Input = _react.default.forwardRef(({
     handleBlur,
     handleFocus
   } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
+  const onlyLabel = label && !placeholder;
   return _react.default.createElement(_reactNativeWeb.View, {
     style: style
   }, _react.default.createElement(_reactCore.InputContainer, {
-    label: label,
+    label: value ? label : undefined,
     labelColor: labelColor,
     labelColorVariant: labelColorVariant,
     labelColorTone: labelColorTone,
@@ -68,6 +71,8 @@ const Input = _react.default.forwardRef(({
     disabled: disabled,
     variant: variant
   }, _react.default.createElement(_styled.StyledWebTextInput, _extends({}, rest, {
+    placeholder: onlyLabel ? label : placeholder,
+    value: value,
     ref: ref,
     disabled: disabled,
     onFocus: handleFocus,

package/dist/components/atoms/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":["Input","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","rest","ref","_hint","focused","handleBlur","handleFocus","displayName"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;AACA;;;;;;AAMA,MAAMA,KAAwB,GAAGC,eAAMC,UAAN,CAC/B,CACE;AACEC,EAAAA,KADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,iBAHF;AAIEC,EAAAA,cAJF;AAKEC,EAAAA,eALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,WAPF;AAQEC,EAAAA,aARF;AASEC,EAAAA,cATF;AAUEC,EAAAA,QAVF;AAWEC,EAAAA,KAXF;AAYEC,EAAAA,WAZF;AAaEC,EAAAA,oBAbF;AAcEC,EAAAA,mBAdF;AAeEC,EAAAA,OAAO,GAAG,SAfZ;AAgBEC,EAAAA,aAhBF;AAiBEC,EAAAA,IAjBF;AAkBEC,EAAAA,OAlBF;AAmBEC,EAAAA,MAnBF;AAoBE,KAAGC;AApBL,CADF,EAuBEC,GAvBF,KAwBK;AACH,QAAMC,KAAK,GAAGN,aAAa,IAAI,6BAAC,eAAD;AAAM,IAAA,IAAI,EAAEC,IAAZ;AAAkB,IAAA,OAAO,EAAEF;AAA3B,IAA/B;;AACA,QAAM;AAAEQ,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CP,OAD2C,EAE3CC,MAF2C,EAG3C,CAACT,QAH0C,CAA7C;AAMA,SACE,6BAAC,oBAAD;AAAM,IAAA,KAAK,EAAEC;AAAb,KACE,6BAAC,yBAAD;AACE,IAAA,KAAK,EAAEV,KADT;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,cAAc,EAAEC,cATlB;AAUE,IAAA,WAAW,EAAEG,WAVf;AAWE,IAAA,oBAAoB,EAAEC,oBAXxB;AAYE,IAAA,mBAAmB,EAAEC,mBAZvB;AAaE,IAAA,OAAO,EAAES,OAbX;AAcE,IAAA,QAAQ,EAAEb,QAdZ;AAeE,IAAA,OAAO,EAAEK;AAfX,KAiBE,6BAAC,0BAAD,eACMK,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,QAAQ,EAAEX,QAHZ;AAIE,IAAA,OAAO,EAAEe,WAJX;AAKE,IAAA,MAAM,EAAED;AALV,KAjBF,CADF,EA0BGP,IAAI,IAAIK,KA1BX,CADF;AA8BD,CA/D8B,CAAjC;;AAkEAxB,KAAK,CAAC4B,WAAN,GAAoB,OAApB;eAEe5B,K","sourcesContent":["import {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { StyledWebTextInput } from './styled';\n\nexport interface InputWebProps\n  extends Omit<InputElementProps, 'style'>,\n    InputContainerProps {}\n\nconst Input: FC<InputWebProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || <Hint text={hint} variant={variant} />;\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    return (\n      <View style={style}>\n        <InputContainer\n          label={label}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledWebTextInput\n            {...rest}\n            ref={ref}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"Input.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Input/Input.tsx"],"names":["Input","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","placeholder","value","rest","ref","_hint","focused","handleBlur","handleFocus","onlyLabel","undefined","displayName"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;AACA;;;;;;AAMA,MAAMA,KAAwB,GAAGC,eAAMC,UAAN,CAC/B,CACE;AACEC,EAAAA,KADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,iBAHF;AAIEC,EAAAA,cAJF;AAKEC,EAAAA,eALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,WAPF;AAQEC,EAAAA,aARF;AASEC,EAAAA,cATF;AAUEC,EAAAA,QAVF;AAWEC,EAAAA,KAXF;AAYEC,EAAAA,WAZF;AAaEC,EAAAA,oBAbF;AAcEC,EAAAA,mBAdF;AAeEC,EAAAA,OAAO,GAAG,SAfZ;AAgBEC,EAAAA,aAhBF;AAiBEC,EAAAA,IAjBF;AAkBEC,EAAAA,OAlBF;AAmBEC,EAAAA,MAnBF;AAoBEC,EAAAA,WApBF;AAqBEC,EAAAA,KArBF;AAsBE,KAAGC;AAtBL,CADF,EAyBEC,GAzBF,KA0BK;AACH,QAAMC,KAAK,GAAGR,aAAa,IAAI,6BAAC,eAAD;AAAM,IAAA,IAAI,EAAEC,IAAZ;AAAkB,IAAA,OAAO,EAAEF;AAA3B,IAA/B;;AACA,QAAM;AAAEU,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CT,OAD2C,EAE3CC,MAF2C,EAG3C,CAACT,QAH0C,CAA7C;AAMA,QAAMkB,SAAS,GAAG3B,KAAK,IAAI,CAACmB,WAA5B;AAEA,SACE,6BAAC,oBAAD;AAAM,IAAA,KAAK,EAAET;AAAb,KACE,6BAAC,yBAAD;AACE,IAAA,KAAK,EAAEU,KAAK,GAAGpB,KAAH,GAAW4B,SADzB;AAEE,IAAA,UAAU,EAAE3B,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,cAAc,EAAEC,cATlB;AAUE,IAAA,WAAW,EAAEG,WAVf;AAWE,IAAA,oBAAoB,EAAEC,oBAXxB;AAYE,IAAA,mBAAmB,EAAEC,mBAZvB;AAaE,IAAA,OAAO,EAAEW,OAbX;AAcE,IAAA,QAAQ,EAAEf,QAdZ;AAeE,IAAA,OAAO,EAAEK;AAfX,KAiBE,6BAAC,0BAAD,eACMO,IADN;AAEE,IAAA,WAAW,EAAEM,SAAS,GAAG3B,KAAH,GAAWmB,WAFnC;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,GAAG,EAAEE,GAJP;AAKE,IAAA,QAAQ,EAAEb,QALZ;AAME,IAAA,OAAO,EAAEiB,WANX;AAOE,IAAA,MAAM,EAAED;AAPV,KAjBF,CADF,EA4BGT,IAAI,IAAIO,KA5BX,CADF;AAgCD,CArE8B,CAAjC;;AAwEA1B,KAAK,CAACgC,WAAN,GAAoB,OAApB;eAEehC,K","sourcesContent":["import {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { StyledWebTextInput } from './styled';\n\nexport interface InputWebProps\n  extends Omit<InputElementProps, 'style'>,\n    InputContainerProps {}\n\nconst Input: FC<InputWebProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || <Hint text={hint} variant={variant} />;\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <InputContainer\n          label={value ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledWebTextInput\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"Input.js"}

package/dist/components/atoms/InputMask/InputMask.d.ts

@@ -0,0 +1,6 @@
+import { InputContainerProps, InputMaskElementProps } from '@tecsinapse/react-core';
+import { FC } from 'react';
+export interface InputMaskWebProps extends Omit<InputMaskElementProps, 'style'>, InputContainerProps {
+}
+declare const InputMask: FC<InputMaskWebProps>;
+export default InputMask;

package/dist/components/atoms/InputMask/InputMask.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNativeWeb = require("react-native-web");
+
+var _styled = require("./styled");
+
+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); }
+
+const InputMask = _react.default.forwardRef(({
+  label,
+  labelColor,
+  labelColorVariant,
+  labelColorTone,
+  labelTypography,
+  labelStack,
+  labelWeight,
+  leftComponent,
+  rightComponent,
+  disabled,
+  style,
+  borderColor,
+  borderColorGradation,
+  inputContainerStyle,
+  variant = 'default',
+  hintComponent,
+  hint,
+  onFocus,
+  onBlur,
+  value,
+  placeholder,
+  ...rest
+}, ref) => {
+  const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
+    text: hint,
+    variant: variant
+  });
+
+  const {
+    focused,
+    handleBlur,
+    handleFocus
+  } = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
+  const onlyLabel = label && !placeholder;
+  return _react.default.createElement(_reactNativeWeb.View, {
+    style: style
+  }, _react.default.createElement(_reactCore.InputContainer, {
+    label: String(value) ? label : undefined,
+    labelColor: labelColor,
+    labelColorVariant: labelColorVariant,
+    labelColorTone: labelColorTone,
+    labelTypography: labelTypography,
+    labelStack: labelStack,
+    labelWeight: labelWeight,
+    leftComponent: leftComponent,
+    rightComponent: rightComponent,
+    borderColor: borderColor,
+    borderColorGradation: borderColorGradation,
+    inputContainerStyle: inputContainerStyle,
+    focused: focused,
+    disabled: disabled,
+    variant: variant
+  }, _react.default.createElement(_styled.StyledWebTextInputMask, _extends({}, rest, {
+    placeholder: onlyLabel ? label : placeholder,
+    value: value,
+    ref: ref,
+    disabled: disabled,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }))), hint && _hint);
+});
+
+InputMask.displayName = 'InputMask';
+var _default = InputMask;
+exports.default = _default;
+//# sourceMappingURL=InputMask.js.map

package/dist/components/atoms/InputMask/InputMask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/InputMask/InputMask.tsx"],"names":["InputMask","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","value","placeholder","rest","ref","_hint","focused","handleBlur","handleFocus","onlyLabel","String","undefined","displayName"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;AACA;;;;;;AAMA,MAAMA,SAAgC,GAAGC,eAAMC,UAAN,CACvC,CACE;AACEC,EAAAA,KADF;AAEEC,EAAAA,UAFF;AAGEC,EAAAA,iBAHF;AAIEC,EAAAA,cAJF;AAKEC,EAAAA,eALF;AAMEC,EAAAA,UANF;AAOEC,EAAAA,WAPF;AAQEC,EAAAA,aARF;AASEC,EAAAA,cATF;AAUEC,EAAAA,QAVF;AAWEC,EAAAA,KAXF;AAYEC,EAAAA,WAZF;AAaEC,EAAAA,oBAbF;AAcEC,EAAAA,mBAdF;AAeEC,EAAAA,OAAO,GAAG,SAfZ;AAgBEC,EAAAA,aAhBF;AAiBEC,EAAAA,IAjBF;AAkBEC,EAAAA,OAlBF;AAmBEC,EAAAA,MAnBF;AAoBEC,EAAAA,KApBF;AAqBEC,EAAAA,WArBF;AAsBE,KAAGC;AAtBL,CADF,EAyBEC,GAzBF,KA0BK;AACH,QAAMC,KAAK,GAAGR,aAAa,IAAI,6BAAC,eAAD;AAAM,IAAA,IAAI,EAAEC,IAAZ;AAAkB,IAAA,OAAO,EAAEF;AAA3B,IAA/B;;AACA,QAAM;AAAEU,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CT,OAD2C,EAE3CC,MAF2C,EAG3C,CAACT,QAH0C,CAA7C;AAMA,QAAMkB,SAAS,GAAG3B,KAAK,IAAI,CAACoB,WAA5B;AAEA,SACE,6BAAC,oBAAD;AAAM,IAAA,KAAK,EAAEV;AAAb,KACE,6BAAC,yBAAD;AACE,IAAA,KAAK,EAAEkB,MAAM,CAACT,KAAD,CAAN,GAAgBnB,KAAhB,GAAwB6B,SADjC;AAEE,IAAA,UAAU,EAAE5B,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,cAAc,EAAEC,cATlB;AAUE,IAAA,WAAW,EAAEG,WAVf;AAWE,IAAA,oBAAoB,EAAEC,oBAXxB;AAYE,IAAA,mBAAmB,EAAEC,mBAZvB;AAaE,IAAA,OAAO,EAAEW,OAbX;AAcE,IAAA,QAAQ,EAAEf,QAdZ;AAeE,IAAA,OAAO,EAAEK;AAfX,KAiBE,6BAAC,8BAAD,eACMO,IADN;AAEE,IAAA,WAAW,EAAEM,SAAS,GAAG3B,KAAH,GAAWoB,WAFnC;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,GAAG,EAAEG,GAJP;AAKE,IAAA,QAAQ,EAAEb,QALZ;AAME,IAAA,OAAO,EAAEiB,WANX;AAOE,IAAA,MAAM,EAAED;AAPV,KAjBF,CADF,EA4BGT,IAAI,IAAIO,KA5BX,CADF;AAgCD,CArEsC,CAAzC;;AAwEA1B,SAAS,CAACiC,WAAV,GAAwB,WAAxB;eAEejC,S","sourcesContent":["import {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputMaskElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { StyledWebTextInputMask } from './styled';\n\nexport interface InputMaskWebProps\n  extends Omit<InputMaskElementProps, 'style'>,\n    InputContainerProps {}\n\nconst InputMask: FC<InputMaskWebProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      value,\n      placeholder,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || <Hint text={hint} variant={variant} />;\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <InputContainer\n          label={String(value) ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledWebTextInputMask\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInputMask.displayName = 'InputMask';\n\nexport default InputMask;\n"],"file":"InputMask.js"}

package/dist/components/atoms/InputMask/index.d.ts

@@ -0,0 +1 @@
+export { default as InputMask, InputMaskWebProps } from './InputMask';

package/dist/components/atoms/InputMask/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InputMask", {
+  enumerable: true,
+  get: function () {
+    return _InputMask.default;
+  }
+});
+Object.defineProperty(exports, "InputMaskWebProps", {
+  enumerable: true,
+  get: function () {
+    return _InputMask.InputMaskWebProps;
+  }
+});
+
+var _InputMask = _interopRequireWildcard(require("./InputMask"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/InputMask/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/InputMask/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as InputMask, InputMaskWebProps } from './InputMask';\n"],"file":"index.js"}

package/dist/components/atoms/InputMask/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledWebTextInputMask: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;

package/dist/components/atoms/InputMask/styled.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledWebTextInputMask = void 0;
+
+var _native = _interopRequireDefault(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledWebTextInputMask = (0, _native.default)(_reactCore.InputMaskElement)`
+  &:focus-visible {
+    outline-width: 0;
+  }
+`;
+exports.StyledWebTextInputMask = StyledWebTextInputMask;
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/InputMask/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/InputMask/styled.ts"],"names":["StyledWebTextInputMask","InputMaskElement"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,sBAAsB,GAAG,qBAAOC,2BAAP,CAEpC;AACF;AACA;AACA;AACA,CANO","sourcesContent":["import styled from '@emotion/native';\nimport { InputMaskElement, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledWebTextInputMask = styled(InputMaskElement)<\n  Partial<StyleProps>\n>`\n  &:focus-visible {\n    outline-width: 0;\n  }\n`;\n"],"file":"styled.js"}

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -4,6 +4,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: number;
     height?: number;
     animation?: 'pulse' | 'wave';
+    active?: boolean;
     radius?: BorderRadiusType;
 }
 declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/atoms/Skeleton/Skeleton.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
+var _reactNativeWeb = require("react-native-web");
+
 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); }
@@ -18,6 +20,7 @@ const Skeleton = ({
   width,
   height,
   animation = 'wave',
+  active = true,
   radius,
   ...rest
 }) => {
@@ -29,8 +32,14 @@ const Skeleton = ({
     width: width,
     height: height,
     animation: animation,
+    active: active,
     radius: radius
-  }, rest), children);
+  }, rest), _react.default.createElement(_reactNativeWeb.View, {
+    style: {
+      opacity: active ? 0 : 1
+    },
+    pointerEvents: active ? 'none' : 'auto'
+  }, children));
 };
 
 var _default = Skeleton;

package/dist/components/atoms/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":["Skeleton","children","width","height","animation","radius","rest","Error"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAUA,MAAMA,QAAiC,GAAG,CAAC;AACzCC,EAAAA,QADyC;AAEzCC,EAAAA,KAFyC;AAGzCC,EAAAA,MAHyC;AAIzCC,EAAAA,SAAS,GAAG,MAJ6B;AAKzCC,EAAAA,MALyC;AAMzC,KAAGC;AANsC,CAAD,KAOpC;AACJ,MAAI,CAACJ,KAAD,IAAU,CAACC,MAAX,IAAqB,CAACF,QAA1B,EAAoC;AAClC,UAAM,IAAIM,KAAJ,CACJ,oEADI,CAAN;AAGD;;AAED,SACE,6BAAC,eAAD;AACE,IAAA,KAAK,EAAEL,KADT;AAEE,IAAA,MAAM,EAAEC,MAFV;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,MAAM,EAAEC;AAJV,KAKMC,IALN,GAOGL,QAPH,CADF;AAWD,CAzBD;;eA2BeD,Q","sourcesContent":["import React from 'react';\nimport { Wrapper } from './styled';\nimport { BorderRadiusType } from '@tecsinapse/react-core';\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number;\n  height?: number;\n  animation?: 'pulse' | 'wave';\n  radius?: BorderRadiusType;\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n  children,\n  width,\n  height,\n  animation = 'wave',\n  radius,\n  ...rest\n}) => {\n  if (!width && !height && !children) {\n    throw new Error(\n      '[Skeleton] You should provide children or specify width and height'\n    );\n  }\n\n  return (\n    <Wrapper\n      width={width}\n      height={height}\n      animation={animation}\n      radius={radius}\n      {...rest}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n\nexport default Skeleton;\n"],"file":"Skeleton.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":["Skeleton","children","width","height","animation","active","radius","rest","Error","opacity"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAUA,MAAMA,QAAiC,GAAG,CAAC;AACzCC,EAAAA,QADyC;AAEzCC,EAAAA,KAFyC;AAGzCC,EAAAA,MAHyC;AAIzCC,EAAAA,SAAS,GAAG,MAJ6B;AAKzCC,EAAAA,MAAM,GAAG,IALgC;AAMzCC,EAAAA,MANyC;AAOzC,KAAGC;AAPsC,CAAD,KAQpC;AACJ,MAAI,CAACL,KAAD,IAAU,CAACC,MAAX,IAAqB,CAACF,QAA1B,EAAoC;AAClC,UAAM,IAAIO,KAAJ,CACJ,oEADI,CAAN;AAGD;;AAED,SACE,6BAAC,eAAD;AACE,IAAA,KAAK,EAAEN,KADT;AAEE,IAAA,MAAM,EAAEC,MAFV;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,MAAM,EAAEC;AALV,KAMMC,IANN,GAQE,6BAAC,oBAAD;AACE,IAAA,KAAK,EAAE;AAAEE,MAAAA,OAAO,EAAEJ,MAAM,GAAG,CAAH,GAAO;AAAxB,KADT;AAEE,IAAA,aAAa,EAAEA,MAAM,GAAG,MAAH,GAAY;AAFnC,KAIGJ,QAJH,CARF,CADF;AAiBD,CAhCD;;eAkCeD,Q","sourcesContent":["import React from 'react';\nimport { Wrapper } from './styled';\nimport { BorderRadiusType } from '@tecsinapse/react-core';\nimport { View } from 'react-native';\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number;\n  height?: number;\n  animation?: 'pulse' | 'wave';\n  active?: boolean;\n  radius?: BorderRadiusType;\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n  children,\n  width,\n  height,\n  animation = 'wave',\n  active = true,\n  radius,\n  ...rest\n}) => {\n  if (!width && !height && !children) {\n    throw new Error(\n      '[Skeleton] You should provide children or specify width and height'\n    );\n  }\n\n  return (\n    <Wrapper\n      width={width}\n      height={height}\n      animation={animation}\n      active={active}\n      radius={radius}\n      {...rest}\n    >\n      <View\n        style={{ opacity: active ? 0 : 1 }}\n        pointerEvents={active ? 'none' : 'auto'}\n      >\n        {children}\n      </View>\n    </Wrapper>\n  );\n};\n\nexport default Skeleton;\n"],"file":"Skeleton.js"}

package/dist/components/atoms/Skeleton/styled.js

@@ -16,7 +16,7 @@ const pulseKf = (0, _react.keyframes)`
     opacity: 1;
   }
   50% {
-    opacity: 0.4;
+    opacity: 0.1;
   }
   100% {
     opacity: 1;
@@ -59,8 +59,9 @@ const pulseAnim = (0, _react.css)`
 const Wrapper = (0, _styled.default)('div')`
   background-color: ${({
   theme,
-  animation
-}) => animation === 'pulse' ? theme.miscellaneous.bodyColor : theme.miscellaneous.surfaceColor};
+  animation,
+  active
+}) => !active ? undefined : animation === 'pulse' ? theme.miscellaneous.bodyColor : theme.miscellaneous.surfaceColor};
   width: ${({
   width
 }) => `${width}px` ?? '100%'};
@@ -72,8 +73,9 @@ const Wrapper = (0, _styled.default)('div')`
   radius
 }) => radius ? theme.borderRadius[radius] : 'unset'};
   ${({
-  animation
-}) => animation === 'pulse' ? pulseAnim : waveAnim};
+  animation,
+  active
+}) => !active ? undefined : animation === 'pulse' ? pulseAnim : waveAnim};
 `;
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=styled.js.map

package/dist/components/atoms/Skeleton/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Skeleton/styled.ts"],"names":["pulseKf","waveKf","waveAnim","pulseAnim","Wrapper","theme","animation","miscellaneous","bodyColor","surfaceColor","width","height","radius","borderRadius"],"mappings":";;;;;;;AAAA;;AACA;;;;AAIA,MAAMA,OAAO,GAAG,qBAAU;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAVA;AAYA,MAAMC,MAAM,GAAG,qBAAU;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAVA;AAYA,MAAMC,QAAQ,GAAG,eAAI;AACrB;AACA;AACA;AACA,iBAAiBD,MAAO;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAME,SAAS,GAAG,eAAI;AACtB,eAAeH,OAAQ;AACvB,CAFA;AAIO,MAAMI,OAAO,GAAG,qBAAO,KAAP,CAAmD;AAC1E,sBAAsB,CAAC;AACnBC,EAAAA,KADmB;AAEnBC,EAAAA;AAFmB,CAAD,KAIlBA,SAAS,KAAK,OAAd,GACID,KAAK,CAACE,aAAN,CAAoBC,SADxB,GAEIH,KAAK,CAACE,aAAN,CAAoBE,YAAa;AACzC,WAAW,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAM,IAAT,IAAgB,MAAO;AACjD,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAEA,MAAO,IAAV,IAAiB,MAAO;AACpD,mBAAmB,CAAC;AAAEN,EAAAA,KAAF;AAASO,EAAAA;AAAT,CAAD,KACfA,MAAM,GAAGP,KAAK,CAACQ,YAAN,CAAmBD,MAAnB,CAAH,GAAgC,OAAQ;AAClD,IAAI,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAAoBA,SAAS,KAAK,OAAd,GAAwBH,SAAxB,GAAoCD,QAAU;AACtE,CAbO","sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { SkeletonProps } from './Skeleton';\n\nconst pulseKf = keyframes`\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst waveKf = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  50% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n`;\n\nconst waveAnim = css`\n  position: relative;\n  overflow: hidden;\n  &::after {\n    animation: ${waveKf} 1.6s linear 0.5s infinite;\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(0, 0, 0, 0.04),\n      transparent\n    );\n    content: '';\n    position: absolute;\n    transform: translateX(-100%);\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: 0;\n  }\n`;\n\nconst pulseAnim = css`\n  animation: ${pulseKf} 1.5s ease-in-out 0.5s infinite;\n`;\n\nexport const Wrapper = styled('div')<Partial<StyleProps & SkeletonProps>>`\n  background-color: ${({\n    theme,\n    animation,\n  }: StyleProps & Partial<SkeletonProps>) =>\n    animation === 'pulse'\n      ? theme.miscellaneous.bodyColor\n      : theme.miscellaneous.surfaceColor};\n  width: ${({ width }) => `${width}px` ?? '100%'};\n  height: ${({ height }) => `${height}px` ?? 'auto'};\n  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>\n    radius ? theme.borderRadius[radius] : 'unset'};\n  ${({ animation }) => (animation === 'pulse' ? pulseAnim : waveAnim)};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Skeleton/styled.ts"],"names":["pulseKf","waveKf","waveAnim","pulseAnim","Wrapper","theme","animation","active","undefined","miscellaneous","bodyColor","surfaceColor","width","height","radius","borderRadius"],"mappings":";;;;;;;AAAA;;AACA;;;;AAIA,MAAMA,OAAO,GAAG,qBAAU;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAVA;AAYA,MAAMC,MAAM,GAAG,qBAAU;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAVA;AAYA,MAAMC,QAAQ,GAAG,eAAI;AACrB;AACA;AACA;AACA,iBAAiBD,MAAO;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAnBA;AAqBA,MAAME,SAAS,GAAG,eAAI;AACtB,eAAeH,OAAQ;AACvB,CAFA;AAIO,MAAMI,OAAO,GAAG,qBAAO,KAAP,CAAmD;AAC1E,sBAAsB,CAAC;AACnBC,EAAAA,KADmB;AAEnBC,EAAAA,SAFmB;AAGnBC,EAAAA;AAHmB,CAAD,KAKlB,CAACA,MAAD,GACIC,SADJ,GAEIF,SAAS,KAAK,OAAd,GACAD,KAAK,CAACI,aAAN,CAAoBC,SADpB,GAEAL,KAAK,CAACI,aAAN,CAAoBE,YAAa;AACzC,WAAW,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAM,IAAT,IAAgB,MAAO;AACjD,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAEA,MAAO,IAAV,IAAiB,MAAO;AACpD,mBAAmB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA;AAAT,CAAD,KACfA,MAAM,GAAGT,KAAK,CAACU,YAAN,CAAmBD,MAAnB,CAAH,GAAgC,OAAQ;AAClD,IAAI,CAAC;AAAER,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAD,KACA,CAACA,MAAD,GAAUC,SAAV,GAAsBF,SAAS,KAAK,OAAd,GAAwBH,SAAxB,GAAoCD,QAAS;AACvE,CAjBO","sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { SkeletonProps } from './Skeleton';\n\nconst pulseKf = keyframes`\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.1;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst waveKf = keyframes`\n  0% {\n    transform: translateX(-100%);\n  }\n  50% {\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n`;\n\nconst waveAnim = css`\n  position: relative;\n  overflow: hidden;\n  &::after {\n    animation: ${waveKf} 1.6s linear 0.5s infinite;\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(0, 0, 0, 0.04),\n      transparent\n    );\n    content: '';\n    position: absolute;\n    transform: translateX(-100%);\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: 0;\n  }\n`;\n\nconst pulseAnim = css`\n  animation: ${pulseKf} 1.5s ease-in-out 0.5s infinite;\n`;\n\nexport const Wrapper = styled('div')<Partial<StyleProps & SkeletonProps>>`\n  background-color: ${({\n    theme,\n    animation,\n    active,\n  }: StyleProps & Partial<SkeletonProps>) =>\n    !active\n      ? undefined\n      : animation === 'pulse'\n      ? theme.miscellaneous.bodyColor\n      : theme.miscellaneous.surfaceColor};\n  width: ${({ width }) => `${width}px` ?? '100%'};\n  height: ${({ height }) => `${height}px` ?? 'auto'};\n  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>\n    radius ? theme.borderRadius[radius] : 'unset'};\n  ${({ animation, active }) =>\n    !active ? undefined : animation === 'pulse' ? pulseAnim : waveAnim};\n`;\n"],"file":"styled.js"}

package/dist/components/molecules/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","value","type","rest","visible","setVisible","show","close","getYear","lowest","undefined","Date","getFullYear","getMonth","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;;;AAUO,MAAMA,UAAU,GAAG,CAA0B;AAClDC,EAAAA,KADkD;AAElDC,EAAAA,IAFkD;AAGlD,KAAGC;AAH+C,CAA1B,KAIgB;AACxC,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,qBAAS,KAAT,CAA9B;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,QAAMG,OAAO,GAAG,oBAAQ,MAAM;AAC5B,QAAIP,KAAJ,EAAW;AACT,UAAIC,IAAI,KAAK,OAAb,EAAsB;AACpB,YAAKD,KAAD,CAAqBQ,MAArB,KAAgCC,SAApC,EACE,OAAO,IAAIC,IAAJ,CAAUV,KAAD,CAAqBQ,MAA9B,EAAsCG,WAAtC,EAAP;AACH,OAHD,MAGO;AACL,eAAO,IAAID,IAAJ,CAASV,KAAT,EAAwBW,WAAxB,EAAP;AACD;AACF;;AACD,WAAOF,SAAP;AACD,GAVe,EAUb,CAACT,KAAD,CAVa,CAAhB;AAYA,QAAMY,QAAQ,GAAG,oBAAQ,MAAM;AAC7B,QAAIZ,KAAJ,EAAW;AACT,UAAIC,IAAI,KAAK,OAAb,EAAsB;AACpB,YAAKD,KAAD,CAAqBQ,MAArB,KAAgCC,SAApC,EACE,OAAO,IAAIC,IAAJ,CAAUV,KAAD,CAAqBQ,MAA9B,EAAsCI,QAAtC,EAAP;AACH,OAHD,MAGO;AACL,eAAO,IAAIF,IAAJ,CAASV,KAAT,EAAwBY,QAAxB,EAAP;AACD;AACF;;AACD,WAAOH,SAAP;AACD,GAVgB,EAUd,CAACT,KAAD,CAVc,CAAjB;AAYA,SACE,6BAAC,qBAAD,eACME,IADN;AAEE,IAAA,iBAAiB,EAAEW,mBAFrB;AAGE,IAAA,KAAK,EAAEb,KAHT;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,IAAI,EAAEM,OALR;AAME,IAAA,KAAK,EAAEK,QANT;AAOE,IAAA,mBAAmB,EAAEP,IAPvB;AAQE,IAAA,oBAAoB,EAAEC,KARxB;AASE,IAAA,cAAc,EAAEQ,QAAQ,IACtB,6BAAC,kBAAD;AAAU,MAAA,OAAO,EAAEX,OAAnB;AAA4B,MAAA,UAAU,EAAEC;AAAxC,OACGU,QADH;AAVJ,KADF;AAiBD,CAlDM","sourcesContent":["import {\n  Calendar,\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n DateRange,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n  DatePickerProps<T>,\n  | 'CalendarComponent'\n  | 'renderCalendar'\n  | 'requestCloseCalendar'\n  | 'requestShowCalendar'\n>;\n\nexport const DatePicker = <T extends SelectionType>({\n  value,\n  type,\n  ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n  const [visible, setVisible] = useState(false);\n  const show = useCallback(() => setVisible(true), []);\n  const close = useCallback(() => setVisible(false), []);\n\n  const getYear = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getFullYear();\n      } else {\n        return new Date(value as Date).getFullYear();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const getMonth = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getMonth();\n      } else {\n        return new Date(value as Date).getMonth();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  return (\n    <DatePickerCore\n      {...rest}\n      CalendarComponent={Calendar}\n      value={value}\n      type={type}\n      year={getYear}\n      month={getMonth}\n      requestShowCalendar={show}\n      requestCloseCalendar={close}\n      renderCalendar={calendar => (\n        <Dropdown visible={visible} setVisible={setVisible}>\n          {calendar}\n        </Dropdown>\n      )}\n    />\n  );\n};\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","value","type","rest","visible","setVisible","show","close","getYear","lowest","undefined","Date","getFullYear","getMonth","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;;;;;;;AAUO,MAAMA,UAAU,GAAG,CAA0B;AAClDC,EAAAA,KADkD;AAElDC,EAAAA,IAFkD;AAGlD,KAAGC;AAH+C,CAA1B,KAIgB;AACxC,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,qBAAS,KAAT,CAA9B;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,QAAMG,OAAO,GAAG,oBAAQ,MAAM;AAC5B,QAAIP,KAAJ,EAAW;AACT,UAAIC,IAAI,KAAK,OAAb,EAAsB;AACpB,YAAKD,KAAD,CAAqBQ,MAArB,KAAgCC,SAApC,EACE,OAAO,IAAIC,IAAJ,CAAUV,KAAD,CAAqBQ,MAA9B,EAAsCG,WAAtC,EAAP;AACH,OAHD,MAGO;AACL,eAAO,IAAID,IAAJ,CAASV,KAAT,EAAwBW,WAAxB,EAAP;AACD;AACF;;AACD,WAAOF,SAAP;AACD,GAVe,EAUb,CAACT,KAAD,CAVa,CAAhB;AAYA,QAAMY,QAAQ,GAAG,oBAAQ,MAAM;AAC7B,QAAIZ,KAAJ,EAAW;AACT,UAAIC,IAAI,KAAK,OAAb,EAAsB;AACpB,YAAKD,KAAD,CAAqBQ,MAArB,KAAgCC,SAApC,EACE,OAAO,IAAIC,IAAJ,CAAUV,KAAD,CAAqBQ,MAA9B,EAAsCI,QAAtC,EAAP;AACH,OAHD,MAGO;AACL,eAAO,IAAIF,IAAJ,CAASV,KAAT,EAAwBY,QAAxB,EAAP;AACD;AACF;;AACD,WAAOH,SAAP;AACD,GAVgB,EAUd,CAACT,KAAD,CAVc,CAAjB;AAYA,SACE,6BAAC,qBAAD,eACME,IADN;AAEE,IAAA,iBAAiB,EAAEW,mBAFrB;AAGE,IAAA,KAAK,EAAEb,KAHT;AAIE,IAAA,IAAI,EAAEC,IAJR;AAKE,IAAA,IAAI,EAAEM,OALR;AAME,IAAA,KAAK,EAAEK,QANT;AAOE,IAAA,mBAAmB,EAAEP,IAPvB;AAQE,IAAA,oBAAoB,EAAEC,KARxB;AASE,IAAA,cAAc,EAAEQ,QAAQ,IACtB,6BAAC,kBAAD;AAAU,MAAA,OAAO,EAAEX,OAAnB;AAA4B,MAAA,UAAU,EAAEC;AAAxC,OACGU,QADH;AAVJ,KADF;AAiBD,CAlDM","sourcesContent":["import {\n  Calendar,\n  DatePicker as DatePickerCore,\n  DatePickerProps,\n  DateRange,\n  SelectionType,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n  DatePickerProps<T>,\n  | 'CalendarComponent'\n  | 'renderCalendar'\n  | 'requestCloseCalendar'\n  | 'requestShowCalendar'\n>;\n\nexport const DatePicker = <T extends SelectionType>({\n  value,\n  type,\n  ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n  const [visible, setVisible] = useState(false);\n  const show = useCallback(() => setVisible(true), []);\n  const close = useCallback(() => setVisible(false), []);\n\n  const getYear = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getFullYear();\n      } else {\n        return new Date(value as Date).getFullYear();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  const getMonth = useMemo(() => {\n    if (value) {\n      if (type === 'range') {\n        if ((value as DateRange).lowest !== undefined)\n          return new Date((value as DateRange).lowest).getMonth();\n      } else {\n        return new Date(value as Date).getMonth();\n      }\n    }\n    return undefined;\n  }, [value]);\n\n  return (\n    <DatePickerCore\n      {...rest}\n      CalendarComponent={Calendar}\n      value={value}\n      type={type}\n      year={getYear}\n      month={getMonth}\n      requestShowCalendar={show}\n      requestCloseCalendar={close}\n      renderCalendar={calendar => (\n        <Dropdown visible={visible} setVisible={setVisible}>\n          {calendar}\n        </Dropdown>\n      )}\n    />\n  );\n};\n"],"file":"DatePicker.js"}

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { Button, useMouseHover, WebButtonProps, } from './components/atoms/Butto
 export { Input, InputWebProps } from './components/atoms/Input';
 export { Tag, TagProps } from './components/atoms/Tag';
 export { InputPassword, InputPasswordWebProps, } from './components/molecules/InputPassword';
+export { InputMask, InputMaskWebProps } from './components/atoms/InputMask';
 export { Menubar, MenubarProps, MenubarOptionsType, MenubarItemsOptions, MenubarMostUsedType, } from './components/molecules/Menubar';
 export { Drawer, DrawerProps } from './components/molecules/Drawer';
 export { Select, SelectProps } from './components/molecules/Select';
@@ -16,5 +17,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
-export { DatePicker, WebDatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker';
+export { DatePicker, WebDatePickerProps, } from './components/molecules/DatePicker';
+export { DateTimePicker, WebDateTimePickerProps, } from './components/molecules/DateTimePicker';

package/dist/index.js

@@ -15,6 +15,8 @@ var _exportNames = {
   TagProps: true,
   InputPassword: true,
   InputPasswordWebProps: true,
+  InputMask: true,
+  InputMaskWebProps: true,
   Menubar: true,
   MenubarProps: true,
   MenubarOptionsType: true,
@@ -113,6 +115,18 @@ Object.defineProperty(exports, "InputPasswordWebProps", {
     return _InputPassword.InputPasswordWebProps;
   }
 });
+Object.defineProperty(exports, "InputMask", {
+  enumerable: true,
+  get: function () {
+    return _InputMask.InputMask;
+  }
+});
+Object.defineProperty(exports, "InputMaskWebProps", {
+  enumerable: true,
+  get: function () {
+    return _InputMask.InputMaskWebProps;
+  }
+});
 Object.defineProperty(exports, "Menubar", {
   enumerable: true,
   get: function () {
@@ -324,6 +338,8 @@ var _Tag = require("./components/atoms/Tag");
 
 var _InputPassword = require("./components/molecules/InputPassword");
 
+var _InputMask = require("./components/atoms/InputMask");
+
 var _Menubar = require("./components/molecules/Menubar");
 
 var _Drawer = require("./components/molecules/Drawer");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport { DatePicker, WebDatePickerProps } from './components/molecules/DatePicker'\nexport { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker'"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport { InputMask, InputMaskWebProps } from './components/atoms/InputMask';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport {\n  DatePicker,\n  WebDatePickerProps,\n} from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  WebDateTimePickerProps,\n} from './components/molecules/DateTimePicker';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.16.1",
+  "version": "1.17.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.15.1",
+    "@tecsinapse/react-core": "^1.16.0",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^9.1.0",
     "react-transition-group": "^4.4.2"
@@ -33,5 +33,5 @@
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "0cb88258820a3029580021c04ab65fc62563fff3"
+  "gitHead": "6ca09ace6c0df4a67383ee165bd592512aa3c0ac"
 }

package/src/components/atoms/Input/Input.stories.tsx

@@ -2,8 +2,6 @@ import { action } from '@storybook/addon-actions';
 import { Story } from '@storybook/react';
 import React, { useState } from 'react';
 import Input, { InputWebProps } from './Input';
-import { Masks } from '@tecsinapse/react-core/src';
-import { CurrencyOptions } from '@tecsinapse/react-core/src/components/atoms/Input/hooks/useNumberMask';
 
 export default {
   title: 'Hybrid/Input',
@@ -39,72 +37,3 @@ Base.args = {
   disabled: false,
   label: 'Login',
 };
-
-const TemplateStringMask: Story<InputWebProps> = args => {
-  const [value, setValue] = useState<string>('');
-
-  const onChange = text => {
-    setValue(text);
-    if (args.onChange) {
-      args.onChange(text);
-    }
-  };
-
-  return (
-    <Input
-      {...args}
-      label={args.label}
-      value={value}
-      onChange={onChange}
-      placeholder={args.placeholder}
-      mask={Masks.COMBINED_PHONE}
-    />
-  );
-};
-
-export const StringMask = TemplateStringMask.bind({});
-
-StringMask.args = {
-  onChange: value => action('onChange')(value),
-  placeholder: 'Type your phone',
-  disabled: false,
-  label: 'Phone',
-};
-
-const TemplateNumberMask: Story<InputWebProps> = args => {
-  const [value, setValue] = useState<number>(1200.2);
-
-  const onChange = text => {
-    setValue(text);
-    if (args.onChange) {
-      args.onChange(text);
-    }
-  };
-
-  const numberMaskExample: CurrencyOptions = {
-    symbol: 'R$ ',
-    separator: '.',
-    decimal: ',',
-    precision: 2,
-  };
-
-  return (
-    <Input
-      {...args}
-      label={args.label}
-      value={value}
-      onChange={onChange}
-      placeholder={args.placeholder}
-      mask={numberMaskExample}
-    />
-  );
-};
-
-export const NumberMask = TemplateNumberMask.bind({});
-
-NumberMask.args = {
-  onChange: value => action('onChange')(value),
-  placeholder: 'Type the price in R$',
-  disabled: false,
-  label: 'Price',
-};

package/src/components/atoms/Input/Input.tsx

@@ -35,6 +35,8 @@ const Input: FC<InputWebProps> = React.forwardRef(
       hint,
       onFocus,
       onBlur,
+      placeholder,
+      value,
       ...rest
     },
     ref
@@ -46,10 +48,12 @@ const Input: FC<InputWebProps> = React.forwardRef(
       !disabled
     );
 
+    const onlyLabel = label && !placeholder;
+
     return (
       <View style={style}>
         <InputContainer
-          label={label}
+          label={value ? label : undefined}
           labelColor={labelColor}
           labelColorVariant={labelColorVariant}
           labelColorTone={labelColorTone}
@@ -67,6 +71,8 @@ const Input: FC<InputWebProps> = React.forwardRef(
         >
           <StyledWebTextInput
             {...rest}
+            placeholder={onlyLabel ? label : placeholder}
+            value={value}
             ref={ref}
             disabled={disabled}
             onFocus={handleFocus}

package/src/components/atoms/InputMask/InputMask.stories.tsx

@@ -0,0 +1,80 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React, { useState } from 'react';
+import InputMask, { InputMaskWebProps } from './InputMask';
+import { Masks } from '@tecsinapse/react-core/src';
+import { CurrencyOptions } from '@tecsinapse/react-core/dist/components/atoms/Input';
+
+export default {
+  title: 'Hybrid/InputMask',
+  component: InputMask,
+};
+
+const TemplateStringMask: Story<InputMaskWebProps> = args => {
+  const [value, setValue] = useState<string>();
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  return (
+    <InputMask
+      {...args}
+      label={args.label}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      mask={Masks.COMBINED_PHONE}
+    />
+  );
+};
+
+export const StringMask = TemplateStringMask.bind({});
+
+StringMask.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type your phone',
+  disabled: false,
+  label: 'Phone',
+};
+
+const TemplateNumberMask: Story<InputMaskWebProps> = args => {
+  const [value, setValue] = useState<number>(1200.2);
+
+  const onChange = text => {
+    setValue(text);
+    if (args.onChange) {
+      args.onChange(text);
+    }
+  };
+
+  const numberMaskExample: CurrencyOptions = {
+    symbol: 'R$ ',
+    separator: '.',
+    decimal: ',',
+    precision: 2,
+  };
+
+  return (
+    <InputMask
+      {...args}
+      label={args.label}
+      value={value}
+      onChange={onChange}
+      placeholder={args.placeholder}
+      mask={numberMaskExample}
+    />
+  );
+};
+
+export const NumberMask = TemplateNumberMask.bind({});
+
+NumberMask.args = {
+  onChange: value => action('onChange')(value),
+  placeholder: 'Type the price in R$',
+  disabled: false,
+  label: 'Price',
+};

package/src/components/atoms/InputMask/InputMask.tsx

@@ -0,0 +1,90 @@
+import {
+  Hint,
+  InputContainer,
+  InputContainerProps,
+  InputMaskElementProps,
+  useInputFocus,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+import { View } from 'react-native';
+import { StyledWebTextInputMask } from './styled';
+
+export interface InputMaskWebProps
+  extends Omit<InputMaskElementProps, 'style'>,
+    InputContainerProps {}
+
+const InputMask: FC<InputMaskWebProps> = React.forwardRef(
+  (
+    {
+      label,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      disabled,
+      style,
+      borderColor,
+      borderColorGradation,
+      inputContainerStyle,
+      variant = 'default',
+      hintComponent,
+      hint,
+      onFocus,
+      onBlur,
+      value,
+      placeholder,
+      ...rest
+    },
+    ref
+  ) => {
+    const _hint = hintComponent || <Hint text={hint} variant={variant} />;
+    const { focused, handleBlur, handleFocus } = useInputFocus(
+      onFocus,
+      onBlur,
+      !disabled
+    );
+
+    const onlyLabel = label && !placeholder;
+
+    return (
+      <View style={style}>
+        <InputContainer
+          label={String(value) ? label : undefined}
+          labelColor={labelColor}
+          labelColorVariant={labelColorVariant}
+          labelColorTone={labelColorTone}
+          labelTypography={labelTypography}
+          labelStack={labelStack}
+          labelWeight={labelWeight}
+          leftComponent={leftComponent}
+          rightComponent={rightComponent}
+          borderColor={borderColor}
+          borderColorGradation={borderColorGradation}
+          inputContainerStyle={inputContainerStyle}
+          focused={focused}
+          disabled={disabled}
+          variant={variant}
+        >
+          <StyledWebTextInputMask
+            {...rest}
+            placeholder={onlyLabel ? label : placeholder}
+            value={value}
+            ref={ref}
+            disabled={disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </InputContainer>
+        {hint && _hint}
+      </View>
+    );
+  }
+);
+
+InputMask.displayName = 'InputMask';
+
+export default InputMask;

package/src/components/atoms/InputMask/index.ts

@@ -0,0 +1 @@
+export { default as InputMask, InputMaskWebProps } from './InputMask';

package/src/components/atoms/InputMask/styled.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/native';
+import { InputMaskElement, StyleProps } from '@tecsinapse/react-core';
+
+export const StyledWebTextInputMask = styled(InputMaskElement)<
+  Partial<StyleProps>
+>`
+  &:focus-visible {
+    outline-width: 0;
+  }
+`;

package/src/components/atoms/Skeleton/Skeleton.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Story } from '@storybook/react';
 import Skeleton from './Skeleton';
 import { SkeletonProps } from './Skeleton';
+import { Text, Card } from '@tecsinapse/react-web-kit';
 
 export default {
   title: 'Web/Skeleton',
@@ -13,3 +14,25 @@ const Template: Story<SkeletonProps> = args => <Skeleton {...args} />;
 export const Base = Template.bind({});
 
 Base.args = { width: 100, height: 50 };
+
+const ChildrenTemplate: Story<SkeletonProps> = args => {
+  return (
+    <Skeleton {...args}>
+      <Card
+        elevated
+        style={{
+          height: '100px',
+          width: '200px',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text>Skeleton card!</Text>
+      </Card>
+    </Skeleton>
+  );
+};
+
+export const Children = ChildrenTemplate.bind({});
+
+Children.args = { animation: 'pulse' };

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Wrapper } from './styled';
 import { BorderRadiusType } from '@tecsinapse/react-core';
+import { View } from 'react-native';
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   width?: number;
   height?: number;
   animation?: 'pulse' | 'wave';
+  active?: boolean;
   radius?: BorderRadiusType;
 }
 
@@ -14,6 +16,7 @@ const Skeleton: React.FC<SkeletonProps> = ({
   width,
   height,
   animation = 'wave',
+  active = true,
   radius,
   ...rest
 }) => {
@@ -28,10 +31,16 @@ const Skeleton: React.FC<SkeletonProps> = ({
       width={width}
       height={height}
       animation={animation}
+      active={active}
       radius={radius}
       {...rest}
     >
-      {children}
+      <View
+        style={{ opacity: active ? 0 : 1 }}
+        pointerEvents={active ? 'none' : 'auto'}
+      >
+        {children}
+      </View>
     </Wrapper>
   );
 };

package/src/components/atoms/Skeleton/styled.ts

@@ -8,7 +8,7 @@ const pulseKf = keyframes`
     opacity: 1;
   }
   50% {
-    opacity: 0.4;
+    opacity: 0.1;
   }
   100% {
     opacity: 1;
@@ -56,13 +56,17 @@ export const Wrapper = styled('div')<Partial<StyleProps & SkeletonProps>>`
   background-color: ${({
     theme,
     animation,
+    active,
   }: StyleProps & Partial<SkeletonProps>) =>
-    animation === 'pulse'
+    !active
+      ? undefined
+      : animation === 'pulse'
       ? theme.miscellaneous.bodyColor
       : theme.miscellaneous.surfaceColor};
   width: ${({ width }) => `${width}px` ?? '100%'};
   height: ${({ height }) => `${height}px` ?? 'auto'};
   border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>
     radius ? theme.borderRadius[radius] : 'unset'};
-  ${({ animation }) => (animation === 'pulse' ? pulseAnim : waveAnim)};
+  ${({ animation, active }) =>
+    !active ? undefined : animation === 'pulse' ? pulseAnim : waveAnim};
 `;

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -2,7 +2,7 @@ import {
   Calendar,
   DatePicker as DatePickerCore,
   DatePickerProps,
- DateRange,
+  DateRange,
   SelectionType,
 } from '@tecsinapse/react-core';
 import React, { useCallback, useMemo, useState } from 'react';

package/src/index.ts

@@ -14,6 +14,7 @@ export {
   InputPassword,
   InputPasswordWebProps,
 } from './components/molecules/InputPassword';
+export { InputMask, InputMaskWebProps } from './components/atoms/InputMask';
 export {
   Menubar,
   MenubarProps,
@@ -40,5 +41,11 @@ export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
-export { DatePicker, WebDatePickerProps } from './components/molecules/DatePicker'
-export { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker'
+export {
+  DatePicker,
+  WebDatePickerProps,
+} from './components/molecules/DatePicker';
+export {
+  DateTimePicker,
+  WebDateTimePickerProps,
+} from './components/molecules/DateTimePicker';