@tecsinapse/react-core 1.6.5 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.7.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.5...@tecsinapse/react-core@1.7.0) (2021-09-21)
+
+
+### Features
+
+* text area ([35ce0ba](https://github.com/tecsinapse/design-system/commit/35ce0ba36aeb9c3d90db19d077e0741e417c65e0))
+* text area hybrid ([f16d074](https://github.com/tecsinapse/design-system/commit/f16d074a71bbea3b1bbc4c4e3933a124b0f1e064))
+
+
+
+
+
 ## [1.6.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.4...@tecsinapse/react-core@1.6.5) (2021-09-20)
 
 

package/dist/components/molecules/TextArea/TextArea.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FontStackType, FontWeightType, InputContainerProps, InputElementProps, TextProps } from '@tecsinapse/react-core';
+export interface TextAreaProps extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>, InputContainerProps {
+    inputFontStack?: FontStackType;
+    inputFontWeight?: FontWeightType;
+    maxCharCount?: number;
+    value: string;
+    TextComponent?: FC<TextProps>;
+    focused?: boolean;
+}
+declare const TextArea: FC<TextAreaProps>;
+export default TextArea;

package/dist/components/molecules/TextArea/TextArea.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNative = require("react-native");
+
+var _styled = require("./styled");
+
+var _Text = require("../../atoms/Text");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TextArea = ({
+  label,
+  labelColor,
+  labelColorVariant,
+  labelColorTone,
+  labelTypography,
+  labelStack,
+  labelWeight,
+  leftComponent,
+  rightComponent,
+  disabled,
+  style,
+  borderColor,
+  borderColorGradation,
+  inputContainerStyle,
+  variant = 'default',
+  hintComponent,
+  hint,
+  TextComponent = _Text.Text,
+  focused,
+  children,
+  maxLength: _maxLenght,
+  value: _value
+}) => {
+  let length = _value.length;
+  const maxLength = _maxLenght;
+
+  if (maxLength && length > maxLength) {
+    length = maxLength;
+  }
+
+  const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
+    TextComponent: TextComponent,
+    text: hint,
+    variant: variant
+  });
+
+  return _react.default.createElement(_reactNative.View, {
+    style: style
+  }, _react.default.createElement(_styled.StyledInputContainer, {
+    label: label,
+    labelColor: labelColor,
+    labelColorVariant: labelColorVariant,
+    labelColorTone: labelColorTone,
+    labelTypography: labelTypography,
+    labelStack: labelStack,
+    labelWeight: labelWeight,
+    LabelComponent: TextComponent,
+    leftComponent: leftComponent,
+    rightComponent: rightComponent,
+    borderColor: borderColor,
+    borderColorGradation: borderColorGradation,
+    inputContainerStyle: inputContainerStyle,
+    focused: focused,
+    disabled: disabled,
+    variant: variant
+  }, children, maxLength && _react.default.createElement(TextComponent, {
+    colorVariant: 'secondary',
+    colorTone: 'medium',
+    typography: 'label',
+    fontStack: 'default',
+    fontWeight: 'bold',
+    style: {
+      textAlign: 'right'
+    }
+  }, `${length}/${maxLength}`)), hint && _hint);
+};
+
+var _default = TextArea;
+exports.default = _default;
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","TextComponent","Text","focused","children","maxLength","_maxLenght","value","_value","length","_hint","textAlign"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;AACA;;;;AAcA,MAAMA,QAA2B,GAAG,CAAC;AACnCC,EAAAA,KADmC;AAEnCC,EAAAA,UAFmC;AAGnCC,EAAAA,iBAHmC;AAInCC,EAAAA,cAJmC;AAKnCC,EAAAA,eALmC;AAMnCC,EAAAA,UANmC;AAOnCC,EAAAA,WAPmC;AAQnCC,EAAAA,aARmC;AASnCC,EAAAA,cATmC;AAUnCC,EAAAA,QAVmC;AAWnCC,EAAAA,KAXmC;AAYnCC,EAAAA,WAZmC;AAanCC,EAAAA,oBAbmC;AAcnCC,EAAAA,mBAdmC;AAenCC,EAAAA,OAAO,GAAG,SAfyB;AAgBnCC,EAAAA,aAhBmC;AAiBnCC,EAAAA,IAjBmC;AAkBnCC,EAAAA,aAAa,GAAGC,UAlBmB;AAmBnCC,EAAAA,OAnBmC;AAoBnCC,EAAAA,QApBmC;AAqBnCC,EAAAA,SAAS,EAAEC,UArBwB;AAsBnCC,EAAAA,KAAK,EAAEC;AAtB4B,CAAD,KAuB9B;AACJ,MAAIC,MAAM,GAAGD,MAAM,CAACC,MAApB;AACA,QAAMJ,SAAS,GAAGC,UAAlB;;AACA,MAAID,SAAS,IAAII,MAAM,GAAGJ,SAA1B,EAAqC;AACnCI,IAAAA,MAAM,GAAGJ,SAAT;AACD;;AAED,QAAMK,KAAK,GAAGX,aAAa,IACzB,6BAAC,eAAD;AAAM,IAAA,aAAa,EAAEE,aAArB;AAAoC,IAAA,IAAI,EAAED,IAA1C;AAAgD,IAAA,OAAO,EAAEF;AAAzD,IADF;;AAIA,SACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEJ;AAAb,KACE,6BAAC,4BAAD;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,cAAc,EAAEW,aARlB;AASE,IAAA,aAAa,EAAEV,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEC,mBAbvB;AAcE,IAAA,OAAO,EAAEM,OAdX;AAeE,IAAA,QAAQ,EAAEV,QAfZ;AAgBE,IAAA,OAAO,EAAEK;AAhBX,KAkBGM,QAlBH,EAmBGC,SAAS,IACR,6BAAC,aAAD;AACE,IAAA,YAAY,EAAE,WADhB;AAEE,IAAA,SAAS,EAAE,QAFb;AAGE,IAAA,UAAU,EAAE,OAHd;AAIE,IAAA,SAAS,EAAE,SAJb;AAKE,IAAA,UAAU,EAAE,MALd;AAME,IAAA,KAAK,EAAE;AAAEM,MAAAA,SAAS,EAAE;AAAb;AANT,KAQI,GAAEF,MAAO,IAAGJ,SAAU,EAR1B,CApBJ,CADF,EAiCGL,IAAI,IAAIU,KAjCX,CADF;AAqCD,CAvED;;eAyEe3B,Q","sourcesContent":["import React, { FC } from 'react';\nimport {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainerProps,\n  InputElementProps,\n  TextProps,\n} from '@tecsinapse/react-core';\nimport { View } from 'react-native';\nimport { StyledInputContainer } from './styled';\nimport { Text } from '../../atoms/Text';\n\nexport interface TextAreaProps\n  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n  maxCharCount?: number;\n  value: string;\n  // Omit below\n  TextComponent?: FC<TextProps>;\n  focused?: boolean;\n}\n\nconst TextArea: FC<TextAreaProps> = ({\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  TextComponent = Text,\n  focused,\n  children,\n  maxLength: _maxLenght,\n  value: _value,\n}) => {\n  let length = _value.length;\n  const maxLength = _maxLenght;\n  if (maxLength && length > maxLength) {\n    length = maxLength;\n  }\n\n  const _hint = hintComponent || (\n    <Hint TextComponent={TextComponent} text={hint} variant={variant} />\n  );\n\n  return (\n    <View style={style}>\n      <StyledInputContainer\n        label={label}\n        labelColor={labelColor}\n        labelColorVariant={labelColorVariant}\n        labelColorTone={labelColorTone}\n        labelTypography={labelTypography}\n        labelStack={labelStack}\n        labelWeight={labelWeight}\n        LabelComponent={TextComponent}\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        {children}\n        {maxLength && (\n          <TextComponent\n            colorVariant={'secondary'}\n            colorTone={'medium'}\n            typography={'label'}\n            fontStack={'default'}\n            fontWeight={'bold'}\n            style={{ textAlign: 'right' }}\n          >\n            {`${length}/${maxLength}`}\n          </TextComponent>\n        )}\n      </StyledInputContainer>\n      {hint && _hint}\n    </View>\n  );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}

package/dist/components/molecules/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextArea, TextAreaProps } from './TextArea';
+export { TextAreaInputBase } from './styled';

package/dist/components/molecules/TextArea/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.default;
+  }
+});
+Object.defineProperty(exports, "TextAreaProps", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.TextAreaProps;
+  }
+});
+Object.defineProperty(exports, "TextAreaInputBase", {
+  enumerable: true,
+  get: function () {
+    return _styled.TextAreaInputBase;
+  }
+});
+
+var _TextArea = _interopRequireWildcard(require("./TextArea"));
+
+var _styled = require("./styled");
+
+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/molecules/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/TextArea/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { default as TextArea, TextAreaProps } from './TextArea';\nexport { TextAreaInputBase } from './styled';\n"],"file":"index.js"}

package/dist/components/molecules/TextArea/styled.d.ts

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

package/dist/components/molecules/TextArea/styled.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextAreaInputBase = exports.StyledInputContainer = 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 StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
+  min-height: 50px;
+`;
+exports.StyledInputContainer = StyledInputContainer;
+const TextAreaInputBase = (0, _native.default)(_reactCore.InputElement)`
+  max-height: ${({
+  theme,
+  numberOfLines
+}) => `${(0, _reactCore.extractNumbersFromString)(theme.typography.h5.lineHeight) * (numberOfLines || 1)}px`};
+  width: 100%;
+  padding: 0;
+  margin: 3px 0;
+`;
+exports.TextAreaInputBase = TextAreaInputBase;
+//# sourceMappingURL=styled.js.map

package/dist/components/molecules/TextArea/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/TextArea/styled.ts"],"names":["StyledInputContainer","InputContainer","TextAreaInputBase","InputElement","theme","numberOfLines","typography","h5","lineHeight"],"mappings":";;;;;;;AAAA;;AACA;;;;AAQO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF;AACA,CAFO;;AAIA,MAAMC,iBAAiB,GAAG,qBAAOC,uBAAP,CAE/B;AACF,gBAAgB,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAD,KACX,GACC,yCAAyBD,KAAK,CAACE,UAAN,CAAiBC,EAAjB,CAAoBC,UAA7C,KACCH,aAAa,IAAI,CADlB,CAED,IAAI;AACT;AACA;AACA;AACA,CAXO","sourcesContent":["import styled from '@emotion/native';\nimport {\n  extractNumbersFromString,\n  InputContainer,\n  InputElement,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { TextAreaProps } from './TextArea';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: 50px;\n`;\n\nexport const TextAreaInputBase = styled(InputElement)<\n  Partial<TextAreaProps> & Partial<StyleProps>\n>`\n  max-height: ${({ theme, numberOfLines }) =>\n    `${\n      extractNumbersFromString(theme.typography.h5.lineHeight) *\n      (numberOfLines || 1)\n    }px`};\n  width: 100%;\n  padding: 0;\n  margin: 3px 0;\n`;\n"],"file":"styled.js"}

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { DateTimeSelector, DateTimeSelectorMode, DateTimeSelectorProps, } from '
 export { InputPasswordIcon } from './components/molecules/InputPassword';
 export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
 export { HintInputContainer, HintInputContainerProps, } from './components/molecules/HintInputContainer';
+export { TextArea, TextAreaProps, TextAreaInputBase, } from './components/molecules/TextArea';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';

package/dist/index.js

@@ -79,6 +79,9 @@ var _exportNames = {
   SnackbarProps: true,
   HintInputContainer: true,
   HintInputContainerProps: true,
+  TextArea: true,
+  TextAreaProps: true,
+  TextAreaInputBase: true,
   ThemeProvider: true
 };
 Object.defineProperty(exports, "Avatar", {
@@ -531,6 +534,24 @@ Object.defineProperty(exports, "HintInputContainerProps", {
     return _HintInputContainer.HintInputContainerProps;
   }
 });
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.TextArea;
+  }
+});
+Object.defineProperty(exports, "TextAreaProps", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.TextAreaProps;
+  }
+});
+Object.defineProperty(exports, "TextAreaInputBase", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.TextAreaInputBase;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -590,6 +611,8 @@ var _Snackbar = require("./components/molecules/Snackbar");
 
 var _HintInputContainer = require("./components/molecules/HintInputContainer");
 
+var _TextArea = require("./components/molecules/TextArea");
+
 var _definitions = require("./styles/definitions");
 
 Object.keys(_definitions).forEach(function (key) {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAgBA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n  Button,\n  ButtonProps,\n  ButtonSizeType,\n  ButtonStateProps,\n  ButtonStateType,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n  GroupButton,\n  GroupButtonOption,\n  GroupButtonOptionProps,\n  GroupButtonProps,\n  GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElement,\n  InputElementProps,\n  InputVariantType,\n  Masks,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  StyledBorderKeeper,\n  useCurrencyMask,\n  useInputFocus,\n  useMask,\n  disabledInputStyles,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n  PressableSurface,\n  PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n  Calendar,\n  CalendarProps,\n  DateRange,\n  SelectionType,\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n  DateTimeSelector,\n  DateTimeSelectorMode,\n  DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n  HintInputContainer,\n  HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAgBA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAKA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n  Button,\n  ButtonProps,\n  ButtonSizeType,\n  ButtonStateProps,\n  ButtonStateType,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n  GroupButton,\n  GroupButtonOption,\n  GroupButtonOptionProps,\n  GroupButtonProps,\n  GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElement,\n  InputElementProps,\n  InputVariantType,\n  Masks,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  StyledBorderKeeper,\n  useCurrencyMask,\n  useInputFocus,\n  useMask,\n  disabledInputStyles,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n  PressableSurface,\n  PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n  Calendar,\n  CalendarProps,\n  DateRange,\n  SelectionType,\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n  DateTimeSelector,\n  DateTimeSelectorMode,\n  DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n  HintInputContainer,\n  HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport {\n  TextArea,\n  TextAreaProps,\n  TextAreaInputBase,\n} from './components/molecules/TextArea';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "eaf7b5bb177a5ed25f3b63840b385878c9858479"
+  "gitHead": "bf5441b7a5f34f14ad2bfd3becc7bcfa78a508da"
 }

package/src/components/molecules/TextArea/TextArea.tsx

@@ -0,0 +1,99 @@
+import React, { FC } from 'react';
+import {
+  FontStackType,
+  FontWeightType,
+  Hint,
+  InputContainerProps,
+  InputElementProps,
+  TextProps,
+} from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import { StyledInputContainer } from './styled';
+import { Text } from '../../atoms/Text';
+
+export interface TextAreaProps
+  extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,
+    InputContainerProps {
+  inputFontStack?: FontStackType;
+  inputFontWeight?: FontWeightType;
+  maxCharCount?: number;
+  value: string;
+  // Omit below
+  TextComponent?: FC<TextProps>;
+  focused?: boolean;
+}
+
+const TextArea: FC<TextAreaProps> = ({
+  label,
+  labelColor,
+  labelColorVariant,
+  labelColorTone,
+  labelTypography,
+  labelStack,
+  labelWeight,
+  leftComponent,
+  rightComponent,
+  disabled,
+  style,
+  borderColor,
+  borderColorGradation,
+  inputContainerStyle,
+  variant = 'default',
+  hintComponent,
+  hint,
+  TextComponent = Text,
+  focused,
+  children,
+  maxLength: _maxLenght,
+  value: _value,
+}) => {
+  let length = _value.length;
+  const maxLength = _maxLenght;
+  if (maxLength && length > maxLength) {
+    length = maxLength;
+  }
+
+  const _hint = hintComponent || (
+    <Hint TextComponent={TextComponent} text={hint} variant={variant} />
+  );
+
+  return (
+    <View style={style}>
+      <StyledInputContainer
+        label={label}
+        labelColor={labelColor}
+        labelColorVariant={labelColorVariant}
+        labelColorTone={labelColorTone}
+        labelTypography={labelTypography}
+        labelStack={labelStack}
+        labelWeight={labelWeight}
+        LabelComponent={TextComponent}
+        leftComponent={leftComponent}
+        rightComponent={rightComponent}
+        borderColor={borderColor}
+        borderColorGradation={borderColorGradation}
+        inputContainerStyle={inputContainerStyle}
+        focused={focused}
+        disabled={disabled}
+        variant={variant}
+      >
+        {children}
+        {maxLength && (
+          <TextComponent
+            colorVariant={'secondary'}
+            colorTone={'medium'}
+            typography={'label'}
+            fontStack={'default'}
+            fontWeight={'bold'}
+            style={{ textAlign: 'right' }}
+          >
+            {`${length}/${maxLength}`}
+          </TextComponent>
+        )}
+      </StyledInputContainer>
+      {hint && _hint}
+    </View>
+  );
+};
+
+export default TextArea;

package/src/components/molecules/TextArea/index.ts

@@ -0,0 +1,2 @@
+export { default as TextArea, TextAreaProps } from './TextArea';
+export { TextAreaInputBase } from './styled';

package/src/components/molecules/TextArea/styled.ts

@@ -0,0 +1,25 @@
+import styled from '@emotion/native';
+import {
+  extractNumbersFromString,
+  InputContainer,
+  InputElement,
+  StyleProps,
+} from '@tecsinapse/react-core';
+import { TextAreaProps } from './TextArea';
+
+export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
+  min-height: 50px;
+`;
+
+export const TextAreaInputBase = styled(InputElement)<
+  Partial<TextAreaProps> & Partial<StyleProps>
+>`
+  max-height: ${({ theme, numberOfLines }) =>
+    `${
+      extractNumbersFromString(theme.typography.h5.lineHeight) *
+      (numberOfLines || 1)
+    }px`};
+  width: 100%;
+  padding: 0;
+  margin: 3px 0;
+`;

package/src/index.ts

@@ -72,6 +72,11 @@ export {
   HintInputContainer,
   HintInputContainerProps,
 } from './components/molecules/HintInputContainer';
+export {
+  TextArea,
+  TextAreaProps,
+  TextAreaInputBase,
+} from './components/molecules/TextArea';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';