@tecsinapse/react-core 1.6.2 → 1.7.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 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)
+
+
+### Bug Fixes
+
+* **switch:** add onChange to switch callback dependency array ([6e46d20](https://github.com/tecsinapse/design-system/commit/6e46d2033b66f9bc351b38647f3097317d3e15d8))
+
+
+
+
+
+## [1.6.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.3...@tecsinapse/react-core@1.6.4) (2021-09-16)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
+## [1.6.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.2...@tecsinapse/react-core@1.6.3) (2021-09-16)
+
+
+### Bug Fixes
+
+* **menubar:** fixing toggle for search items ([330e6b8](https://github.com/tecsinapse/design-system/commit/330e6b8467945c55bbcbaa4876cd160224ef509d))
+* **menubar:** fixing toggle for search items ([3aefce8](https://github.com/tecsinapse/design-system/commit/3aefce867cab7a12bafdef181148fc48654044ff))
+
+
+
+
+
 ## [1.6.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.6.1...@tecsinapse/react-core@1.6.2) (2021-09-15)
 
 

package/dist/components/atoms/Switch/Switch.js

@@ -51,7 +51,7 @@ const Switch = ({
   const handleChange = (0, _react2.useCallback)(() => {
     onChange(!active);
     (0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
-  }, [active]);
+  }, [active, onChange]);
   const stylesDefaut = {
     borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
     paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","interpolateColor","interpolate","inputRange","outputRange","color","animatedStyle","backgroundColor","handleChange","stylesDefaut","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/B,KAAGC;AAR4B,CAAD,KASb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBS,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBS,OADH;;AAGA,QAAME,gBAAgB,GAAGD,aAAa,CAACE,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXX,KAAK,CAACY,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CADW,EAEXI,KAAK,CAACY,KAAN,CAAYnB,WAAZ,EAAyBC,eAAzB,CAFW;AAFoC,GAA1B,CAAzB;AAQA,QAAMmB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEN;AADG,GAAtB;AAIA,QAAMO,YAAY,GAAG,yBAAY,MAAM;AACrCvB,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBI,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACV,MAAD,CAHkB,CAArB;AAKA,QAAMmB,YAAuB,GAAG;AAC9BC,IAAAA,YAAY,EAAE,qCAAyBjB,KAAK,CAACiB,YAAN,CAAmBC,IAA5C,CADgB;AAE9BC,IAAAA,iBAAiB,EAAE,qCAAyBnB,KAAK,CAACoB,OAAN,CAAcC,KAAvC,CAFW;AAG9BC,IAAAA,eAAe,EAAE,CAHa;AAI9BC,IAAAA,cAAc,EAAE,QAJc;AAK9BC,IAAAA,KAAK,EAAE,EALuB;AAM9BC,IAAAA,MAAM,EAAE;AANsB,GAAhC;AASA,SACE,8BAAC,kCAAD,eAAsB1B,IAAtB;AAA4B,IAAA,OAAO,EAAEgB,YAArC;AAAmD,IAAA,MAAM,EAAC;AAA1D,MACE,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGF,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAAClB,QAAD,EAAW;AAAE4B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE1B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CADF,CADF;AASD,CArDD;;eAuDeV,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      theme.color[inactiveColor][inactiveColorTone],\n      theme.color[activeColor][activeColorTone],\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n    transitionSwitch(active, transitionValue, animatedColor);\n  }, [active]);\n\n  const stylesDefaut: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n    <PressableSurface {...rest} onPress={handleChange} effect=\"none\">\n      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </Animated.View>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","interpolateColor","interpolate","inputRange","outputRange","color","animatedStyle","backgroundColor","handleChange","stylesDefaut","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/B,KAAGC;AAR4B,CAAD,KASb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBS,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBS,OADH;;AAGA,QAAME,gBAAgB,GAAGD,aAAa,CAACE,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXX,KAAK,CAACY,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CADW,EAEXI,KAAK,CAACY,KAAN,CAAYnB,WAAZ,EAAyBC,eAAzB,CAFW;AAFoC,GAA1B,CAAzB;AAQA,QAAMmB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEN;AADG,GAAtB;AAIA,QAAMO,YAAY,GAAG,yBAAY,MAAM;AACrCvB,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBI,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACV,MAAD,EAASL,QAAT,CAHkB,CAArB;AAKA,QAAMwB,YAAuB,GAAG;AAC9BC,IAAAA,YAAY,EAAE,qCAAyBjB,KAAK,CAACiB,YAAN,CAAmBC,IAA5C,CADgB;AAE9BC,IAAAA,iBAAiB,EAAE,qCAAyBnB,KAAK,CAACoB,OAAN,CAAcC,KAAvC,CAFW;AAG9BC,IAAAA,eAAe,EAAE,CAHa;AAI9BC,IAAAA,cAAc,EAAE,QAJc;AAK9BC,IAAAA,KAAK,EAAE,EALuB;AAM9BC,IAAAA,MAAM,EAAE;AANsB,GAAhC;AASA,SACE,8BAAC,kCAAD,eAAsB1B,IAAtB;AAA4B,IAAA,OAAO,EAAEgB,YAArC;AAAmD,IAAA,MAAM,EAAC;AAA1D,MACE,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGF,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAAClB,QAAD,EAAW;AAAE4B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE1B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CADF,CADF;AASD,CArDD;;eAuDeV,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      theme.color[inactiveColor][inactiveColorTone],\n      theme.color[activeColor][activeColorTone],\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n    transitionSwitch(active, transitionValue, animatedColor);\n  }, [active, onChange]);\n\n  const stylesDefaut: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n    <PressableSurface {...rest} onPress={handleChange} effect=\"none\">\n      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </Animated.View>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}

package/dist/components/atoms/shared/PaperAndCard.js

@@ -13,6 +13,7 @@ const baseStyles = ({
   padding: ${theme.spacing.deca};
   border-radius: ${theme.borderRadius.mili};
   background-color: ${theme.miscellaneous.surfaceColor};
+  overflow: hidden;
 `;
 
 exports.baseStyles = baseStyles;

package/dist/components/atoms/shared/PaperAndCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/shared/PaperAndCard.ts"],"names":["baseStyles","theme","spacing","deca","borderRadius","mili","miscellaneous","surfaceColor","elevatedStyles","elevated","shadowColor","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation"],"mappings":";;;;;;;AAAA;;AAIO,MAAMA,UAAU,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgC,gBAAI;AAC9D,aAAaA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAChC,mBAAmBF,KAAK,CAACG,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBJ,KAAK,CAACK,aAAN,CAAoBC,YAAa;AACvD,CAJO;;;;AAOA,MAAMC,cAAc,GAAG,CAAC;AAC7BP,EAAAA,KAD6B;AAE7BQ,EAAAA,QAAQ,GAAG;AAFkB,CAAD,KAI5BA,QAAQ,IAAI,CACV,iBAAI;AACFC,EAAAA,WAAW,EAAET,KAAK,CAACK,aAAN,CAAoBK,MAD/B;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,GAHb;AAIFC,EAAAA,YAAY,EAAE,GAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADU,CAJP","sourcesContent":["import { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const baseStyles = ({ theme }: StyleProps): any => css`\n  padding: ${theme.spacing.deca};\n  border-radius: ${theme.borderRadius.mili};\n  background-color: ${theme.miscellaneous.surfaceColor};\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const elevatedStyles = ({\n  theme,\n  elevated = false,\n}: { elevated?: boolean } & StyleProps): any =>\n  elevated && [\n    css({\n      shadowColor: theme.miscellaneous.shadow,\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 0.2,\n      shadowRadius: 1.4,\n      elevation: 2,\n    }),\n  ];\n/* eslint-enable @typescript-eslint/no-explicit-any */\n"],"file":"PaperAndCard.js"}
+{"version":3,"sources":["../../../../src/components/atoms/shared/PaperAndCard.ts"],"names":["baseStyles","theme","spacing","deca","borderRadius","mili","miscellaneous","surfaceColor","elevatedStyles","elevated","shadowColor","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation"],"mappings":";;;;;;;AAAA;;AAIO,MAAMA,UAAU,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgC,gBAAI;AAC9D,aAAaA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAChC,mBAAmBF,KAAK,CAACG,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBJ,KAAK,CAACK,aAAN,CAAoBC,YAAa;AACvD;AACA,CALO;;;;AAQA,MAAMC,cAAc,GAAG,CAAC;AAC7BP,EAAAA,KAD6B;AAE7BQ,EAAAA,QAAQ,GAAG;AAFkB,CAAD,KAI5BA,QAAQ,IAAI,CACV,iBAAI;AACFC,EAAAA,WAAW,EAAET,KAAK,CAACK,aAAN,CAAoBK,MAD/B;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,GAHb;AAIFC,EAAAA,YAAY,EAAE,GAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADU,CAJP","sourcesContent":["import { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const baseStyles = ({ theme }: StyleProps): any => css`\n  padding: ${theme.spacing.deca};\n  border-radius: ${theme.borderRadius.mili};\n  background-color: ${theme.miscellaneous.surfaceColor};\n  overflow: hidden;\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const elevatedStyles = ({\n  theme,\n  elevated = false,\n}: { elevated?: boolean } & StyleProps): any =>\n  elevated && [\n    css({\n      shadowColor: theme.miscellaneous.shadow,\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 0.2,\n      shadowRadius: 1.4,\n      elevation: 2,\n    }),\n  ];\n/* eslint-enable @typescript-eslint/no-explicit-any */\n"],"file":"PaperAndCard.js"}

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/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useDebouncedState } from './useDebouncedState';
+export { useTheme } from './useTheme';

package/dist/hooks/index.js

@@ -9,6 +9,14 @@ Object.defineProperty(exports, "useDebouncedState", {
     return _useDebouncedState.useDebouncedState;
   }
 });
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.useTheme;
+  }
+});
 
 var _useDebouncedState = require("./useDebouncedState");
+
+var _useTheme = require("./useTheme");
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { useDebouncedState } from './useDebouncedState';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { useDebouncedState } from './useDebouncedState';\nexport { useTheme } from './useTheme';\n"],"file":"index.js"}

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProp } from '../types/defaults';
+export declare const useTheme: () => ThemeProp;

package/dist/hooks/useTheme.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = void 0;
+
+var _react = require("@emotion/react");
+
+const useTheme = () => (0, _react.useTheme)();
+
+exports.useTheme = useTheme;
+//# sourceMappingURL=useTheme.js.map

package/dist/hooks/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useTheme.ts"],"names":["useTheme"],"mappings":";;;;;;;AAAA;;AAGO,MAAMA,QAAQ,GAAG,MAAM,sBAAvB","sourcesContent":["import { useTheme as useEmotionTheme } from '@emotion/react';\nimport { ThemeProp } from '../types/defaults';\n\nexport const useTheme = () => useEmotionTheme() as ThemeProp;\n"],"file":"useTheme.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.2",
+  "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": "c6e0bda48b1a9e8bba9fa372553bd1276f1e5ffe"
+  "gitHead": "bf5441b7a5f34f14ad2bfd3becc7bcfa78a508da"
 }

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

@@ -3,7 +3,7 @@ import { Avatar, AvatarProps } from './Avatar';
 import { Story } from '@storybook/react';
 
 export default {
-  title: 'Components/Avatar',
+  title: 'Hybrid/Avatar',
   component: Avatar,
 };
 

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

@@ -5,7 +5,7 @@ import { BoxContent, BoxContentProps } from '.';
 import { Text } from '../Text';
 
 export default {
-  title: 'Components/Box Content',
+  title: 'Hybrid/Box Content',
   component: BoxContent,
 };
 

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

@@ -13,7 +13,7 @@ const StyledCard = styled(Card)<Partial<StyleProps>>`
 `;
 
 export default {
-  title: 'Components/Card',
+  title: 'Hybrid/Card',
   component: Card,
 };
 

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

@@ -4,7 +4,7 @@ import { default as Checkbox, CheckboxProps } from './Checkbox';
 import { Text } from '../Text';
 
 export default {
-  title: 'Components/Checkbox',
+  title: 'Hybrid/Checkbox',
   component: Checkbox,
 };
 

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

@@ -1,13 +1,11 @@
-import styled from '@emotion/native';
 import { Story } from '@storybook/react';
 import React from 'react';
-import { StyleProps } from '../../../../dist';
 import { Card } from '../Card';
 import { Text } from '../Text';
 import Divider, { DividerProps } from './Divider';
 
 export default {
-  title: 'Components/Divider',
+  title: 'Hybrid/Divider',
   component: Divider,
 };
 

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

@@ -8,7 +8,7 @@ import {
 } from '../GroupButton';
 
 export default {
-  title: 'Components/Group Button',
+  title: 'Hybrid/Group Button',
   component: GroupButton,
 };
 

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

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import Icon, { IconProps } from './Icon';
 
 export default {
-  title: 'Components/Icon',
+  title: 'Hybrid/Icon',
   component: Icon,
 };
 

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

@@ -5,7 +5,7 @@ import Paper, { PaperProps } from './Paper';
 import { StyleProps } from '../../../types/defaults';
 
 export default {
-  title: 'Components/Paper',
+  title: 'Hybrid/Paper',
   component: Paper,
 };
 

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

@@ -4,7 +4,7 @@ import { ProgressBar, ProgressBarProps } from './index';
 import { Card } from '../Card';
 
 export default {
-  title: 'Components/Progress Bar',
+  title: 'Hybrid/Progress Bar',
   component: ProgressBar,
 };
 

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

@@ -4,7 +4,7 @@ import { Text } from '../Text';
 import { Story } from '@storybook/react';
 
 export default {
-  title: 'Components/Radio Button',
+  title: 'Hybrid/Radio Button',
   component: RadioButton,
 };
 

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

@@ -4,7 +4,7 @@ import { SwitchProps, default as Switch } from './Switch';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Components/Switch',
+  title: 'Hybrid/Switch',
   component: Switch,
 };
 

package/src/components/atoms/Switch/Switch.tsx

@@ -55,7 +55,7 @@ const Switch: FC<SwitchProps> = ({
   const handleChange = useCallback(() => {
     onChange(!active);
     transitionSwitch(active, transitionValue, animatedColor);
-  }, [active]);
+  }, [active, onChange]);
 
   const stylesDefaut: ViewStyle = {
     borderRadius: extractNumbersFromString(theme.borderRadius.pill),

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Text, TextProps } from './index';
 
 export default {
-  title: 'Components/Text',
+  title: 'Hybrid/Text',
   component: Text,
 };
 

package/src/components/atoms/shared/PaperAndCard.ts

@@ -6,6 +6,7 @@ export const baseStyles = ({ theme }: StyleProps): any => css`
   padding: ${theme.spacing.deca};
   border-radius: ${theme.borderRadius.mili};
   background-color: ${theme.miscellaneous.surfaceColor};
+  overflow: hidden;
 `;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

package/src/components/molecules/Calendar/Calendar.stories.tsx

@@ -5,7 +5,7 @@ import { DateRange } from './Calendar';
 import { ptBR } from 'date-fns/locale';
 
 export default {
-  title: 'Components/Calendar',
+  title: 'Hybrid/Calendar',
   component: Calendar,
 };
 

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

@@ -5,7 +5,7 @@ import DatePicker, { DatePickerProps } from './DatePicker';
 import { DateRange } from '../Calendar';
 
 export default {
-  title: 'Components/Date Picker',
+  title: 'Hybrid/Date Picker',
   component: DatePicker,
 };
 

package/src/components/molecules/DateTimePicker/DateTimePicker.stories.tsx

@@ -4,7 +4,7 @@ import { ptBR } from 'date-fns/locale';
 import { DateTimePicker, DateTimePickerProps } from './index';
 
 export default {
-  title: 'Components/Date Time Picker',
+  title: 'Hybrid/Date Time Picker',
   component: DateTimePicker,
 };
 

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/hooks/index.ts

@@ -1 +1,2 @@
 export { useDebouncedState } from './useDebouncedState';
+export { useTheme } from './useTheme';

package/src/hooks/useTheme.ts

@@ -0,0 +1,4 @@
+import { useTheme as useEmotionTheme } from '@emotion/react';
+import { ThemeProp } from '../types/defaults';
+
+export const useTheme = () => useEmotionTheme() as ThemeProp;

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';