@tecsinapse/react-core 1.16.1 → 1.16.4

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.16.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.3...@tecsinapse/react-core@1.16.4) (2022-06-24)
+
+
+### Bug Fixes
+
+* added verification number extended without mask ([#177465](https://github.com/tecsinapse/design-system/issues/177465)) ([27ef33c](https://github.com/tecsinapse/design-system/commit/27ef33cb5fe25bd0a6ef00370650e81f71188f06))
+
+
+
+
+
+## [1.16.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.2...@tecsinapse/react-core@1.16.3) (2022-06-22)
+
+
+### Features
+
+* automation yalc for develop local ([9c6f1bb](https://github.com/tecsinapse/design-system/commit/9c6f1bbf0ea4bbacd194e4cf5c338405b94a9686))
+
+
+
+
+
+## [1.16.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.1...@tecsinapse/react-core@1.16.2) (2022-06-19)
+
+
+### Features
+
+* add capital option to text component ([56821ee](https://github.com/tecsinapse/design-system/commit/56821ee96eefc13a0b93d9b8b2d61af1be65e705))
+
+
+
+
+
 ## [1.16.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.0...@tecsinapse/react-core@1.16.1) (2022-05-24)
 
 **Note:** Version bump only for package @tecsinapse/react-core

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { ColorGradationType, ColorType, FontColorType, FontStackType, FontWeightType, TypographyVariationType } from '@tecsinapse/react-core';
 import { StyleProp, TextStyle } from 'react-native';
 export interface TextProps {
@@ -10,7 +10,10 @@ export interface TextProps {
     colorTone?: ColorGradationType;
     numberOfLines?: number;
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    capitalFirst?: boolean;
     style?: StyleProp<TextStyle>;
+    children?: React.ReactNode;
 }
 declare const Text: FC<TextProps>;
 export default Text;

package/dist/components/atoms/Text/Text.js

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
+var _functions = require("./functions");
+
 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); }
@@ -21,6 +23,8 @@ const Text = ({
   typography = 'base',
   numberOfLines,
   ellipsizeMode,
+  textTransform = 'none',
+  capitalFirst = false,
   ...rest
 }) => {
   return _react.default.createElement(_styled.StyledColoredText, _extends({}, rest, {
@@ -31,8 +35,9 @@ const Text = ({
     fontWeight: fontWeight,
     typography: typography,
     numberOfLines: numberOfLines,
-    ellipsizeMode: ellipsizeMode
-  }), children);
+    ellipsizeMode: ellipsizeMode,
+    textTransform: textTransform
+  }), (0, _functions.getLabel)(children, capitalFirst));
 };
 
 var _default = Text;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Text/Text.tsx"],"names":["Text","children","style","fontColor","colorTone","colorVariant","fontWeight","typography","numberOfLines","ellipsizeMode","rest"],"mappings":";;;;;AAAA;;AAUA;;;;;;AAqBA,MAAMA,IAAmB,GAAG,CAAC;AAC3BC,EAAAA,QAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,SAAS,GAAG,MAHe;AAI3BC,EAAAA,SAAS,GAAG,QAJe;AAK3BC,EAAAA,YAL2B;AAM3BC,EAAAA,UAAU,GAAG,SANc;AAO3BC,EAAAA,UAAU,GAAG,MAPc;AAQ3BC,EAAAA,aAR2B;AAS3BC,EAAAA,aAT2B;AAU3B,KAAGC;AAVwB,CAAD,KAWT;AACjB,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,KAAK,EAAER,KAFT;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,YAAY,EAAEC,YALhB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,UAAU,EAAEC,UAPd;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,aAAa,EAAEC;AATjB,MAWGR,QAXH,CADF;AAeD,CA3BD;;eA6BeD,I","sourcesContent":["import React, { FC } from 'react';\nimport {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  FontStackType,\n  FontWeightType,\n  TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { StyledColoredText } from './styled';\n\nexport interface TextProps {\n  /** Font theme text color */\n  fontColor?: FontColorType;\n  /** Font theme weight */\n  fontWeight?: FontWeightType;\n  /** Font theme sizes */\n  typography?: TypographyVariationType;\n  /** Font theme stack */\n  fontStack?: FontStackType;\n  /** Palette theme colors. You can specify this prop to override theme fontColor */\n  colorVariant?: ColorType;\n  /** Palette theme colors gradation */\n  colorTone?: ColorGradationType;\n  numberOfLines?: number;\n  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n  style?: StyleProp<TextStyle>;\n}\n\n/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */\nconst Text: FC<TextProps> = ({\n  children,\n  style,\n  fontColor = 'dark',\n  colorTone = 'medium',\n  colorVariant,\n  fontWeight = 'regular',\n  typography = 'base',\n  numberOfLines,\n  ellipsizeMode,\n  ...rest\n}): JSX.Element => {\n  return (\n    <StyledColoredText\n      {...rest}\n      style={style}\n      fontColor={fontColor}\n      colorTone={colorTone}\n      colorVariant={colorVariant}\n      fontWeight={fontWeight}\n      typography={typography}\n      numberOfLines={numberOfLines}\n      ellipsizeMode={ellipsizeMode}\n    >\n      {children}\n    </StyledColoredText>\n  );\n};\n\nexport default Text;\n"],"file":"Text.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Text/Text.tsx"],"names":["Text","children","style","fontColor","colorTone","colorVariant","fontWeight","typography","numberOfLines","ellipsizeMode","textTransform","capitalFirst","rest"],"mappings":";;;;;AAAA;;AAUA;;AACA;;;;;;AAwBA,MAAMA,IAAmB,GAAG,CAAC;AAC3BC,EAAAA,QAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,SAAS,GAAG,MAHe;AAI3BC,EAAAA,SAAS,GAAG,QAJe;AAK3BC,EAAAA,YAL2B;AAM3BC,EAAAA,UAAU,GAAG,SANc;AAO3BC,EAAAA,UAAU,GAAG,MAPc;AAQ3BC,EAAAA,aAR2B;AAS3BC,EAAAA,aAT2B;AAU3BC,EAAAA,aAAa,GAAG,MAVW;AAW3BC,EAAAA,YAAY,GAAG,KAXY;AAY3B,KAAGC;AAZwB,CAAD,KAaT;AACjB,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,KAAK,EAAEV,KAFT;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,YAAY,EAAEC,YALhB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,UAAU,EAAEC,UAPd;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,aAAa,EAAEC,aATjB;AAUE,IAAA,aAAa,EAAEC;AAVjB,MAYG,yBAAST,QAAT,EAAmBU,YAAnB,CAZH,CADF;AAgBD,CA9BD;;eAgCeX,I","sourcesContent":["import React, { FC } from 'react';\nimport {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  FontStackType,\n  FontWeightType,\n  TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { StyledColoredText } from './styled';\nimport { getLabel } from './functions';\n\nexport interface TextProps {\n  /** Font theme text color */\n  fontColor?: FontColorType;\n  /** Font theme weight */\n  fontWeight?: FontWeightType;\n  /** Font theme sizes */\n  typography?: TypographyVariationType;\n  /** Font theme stack */\n  fontStack?: FontStackType;\n  /** Palette theme colors. You can specify this prop to override theme fontColor */\n  colorVariant?: ColorType;\n  /** Palette theme colors gradation */\n  colorTone?: ColorGradationType;\n  numberOfLines?: number;\n  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';\n  capitalFirst?: boolean;\n  style?: StyleProp<TextStyle>;\n  children?: React.ReactNode;\n}\n\n/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */\nconst Text: FC<TextProps> = ({\n  children,\n  style,\n  fontColor = 'dark',\n  colorTone = 'medium',\n  colorVariant,\n  fontWeight = 'regular',\n  typography = 'base',\n  numberOfLines,\n  ellipsizeMode,\n  textTransform = 'none',\n  capitalFirst = false,\n  ...rest\n}): JSX.Element => {\n  return (\n    <StyledColoredText\n      {...rest}\n      style={style}\n      fontColor={fontColor}\n      colorTone={colorTone}\n      colorVariant={colorVariant}\n      fontWeight={fontWeight}\n      typography={typography}\n      numberOfLines={numberOfLines}\n      ellipsizeMode={ellipsizeMode}\n      textTransform={textTransform}\n    >\n      {getLabel(children, capitalFirst)}\n    </StyledColoredText>\n  );\n};\n\nexport default Text;\n"],"file":"Text.js"}

package/dist/components/atoms/Text/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const getFirstCapitalCharacter: (value: string) => string;
+export declare const getLabel: (children: any, capitalFirst: boolean) => any;

package/dist/components/atoms/Text/functions.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLabel = exports.getFirstCapitalCharacter = void 0;
+
+const getFirstCapitalCharacter = value => value.charAt(0).toUpperCase().concat(value.slice(1));
+
+exports.getFirstCapitalCharacter = getFirstCapitalCharacter;
+
+const getLabel = (children, capitalFirst) => typeof children === 'string' && capitalFirst ? getFirstCapitalCharacter(children) : children;
+
+exports.getLabel = getLabel;
+//# sourceMappingURL=functions.js.map

package/dist/components/atoms/Text/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Text/functions.ts"],"names":["getFirstCapitalCharacter","value","charAt","toUpperCase","concat","slice","getLabel","children","capitalFirst"],"mappings":";;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCA,KAAK,CAACC,MAAN,CAAa,CAAb,EAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCH,KAAK,CAACI,KAAN,CAAY,CAAZ,CAArC,CADK;;;;AAIA,MAAMC,QAAQ,GAAG,CAACC,QAAD,EAAWC,YAAX,KACtB,OAAOD,QAAP,KAAoB,QAApB,IAAgCC,YAAhC,GACIR,wBAAwB,CAACO,QAAD,CAD5B,GAEIA,QAHC","sourcesContent":["export const getFirstCapitalCharacter = (value: string): string =>\n  value.charAt(0).toUpperCase().concat(value.slice(1));\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport const getLabel = (children, capitalFirst: boolean) =>\n  typeof children === 'string' && capitalFirst\n    ? getFirstCapitalCharacter(children)\n    : children;\n"],"file":"functions.js"}

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

@@ -32,6 +32,9 @@ const StyledText = (0, _native.default)(_reactNative.Text)`
   theme,
   fontStack = 'default'
 }) => `'${theme.font.stack[fontStack]}'`};
+  text-transform: ${({
+  textTransform = 'none'
+}) => `${textTransform}`};
 `;
 exports.StyledText = StyledText;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["StyledText","RNText","theme","fontColor","font","color","fontWeight","weight","typography","fontSize","lineHeight","fontStack","stack","colorStyles","colorVariant","colorTone","StyledColoredText"],"mappings":";;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAgD;AAC1E,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAS,GAAG;AAArB,CAAD,KAAmCD,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBF,SAAjB,CAA4B;AAC1E,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbJ,KAAK,CAACE,IAAN,CAAWG,MAAX,CAAkBD,UAAlB,CAA8B;AAClC,eAAe,CAAC;AAAEJ,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACXN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BC,QAAS;AAC1C,iBAAiB,CAAC;AAAEP,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BE,UAAW;AAC5C,iBAAiB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGT,KAAK,CAACE,IAAN,CAAWQ,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC,CAVO;;;AAYP,MAAME,WAAW,GAAG,CAAC;AACnBC,EAAAA,YADmB;AAEnBC,EAAAA,SAFmB;AAGnBb,EAAAA;AAHmB,CAAD,KAKlBY,YAAY,IACZC,SADA,IAEA,gBAAI;AACN,aAAab,KAAK,CAACG,KAAN,CAAYS,YAAZ,EAA0BC,SAA1B,CAAqC;AAClD,GATA;;AAWO,MAAMC,iBAAiB,GAAG,qBAAOhB,UAAP,EAE/Ba,WAF+B,CAA1B","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps, TextProps } from '@tecsinapse/react-core';\nimport { Text as RNText } from 'react-native';\n\nexport const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`\n  color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};\n  font-weight: ${({ theme, fontWeight = 'regular' }) =>\n    theme.font.weight[fontWeight]};\n  font-size: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].fontSize};\n  line-height: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].lineHeight};\n  font-family: ${({ theme, fontStack = 'default' }) =>\n    `'${theme.font.stack[fontStack]}'`};\n`;\n\nconst colorStyles = ({\n  colorVariant,\n  colorTone,\n  theme,\n}: TextProps & StyleProps) =>\n  colorVariant &&\n  colorTone &&\n  css`\n    color: ${theme.color[colorVariant][colorTone]};\n  `;\n\nexport const StyledColoredText = styled(StyledText)<\n  TextProps & Partial<StyleProps>\n>(colorStyles);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["StyledText","RNText","theme","fontColor","font","color","fontWeight","weight","typography","fontSize","lineHeight","fontStack","stack","textTransform","colorStyles","colorVariant","colorTone","StyledColoredText"],"mappings":";;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAgD;AAC1E,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAS,GAAG;AAArB,CAAD,KAAmCD,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBF,SAAjB,CAA4B;AAC1E,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbJ,KAAK,CAACE,IAAN,CAAWG,MAAX,CAAkBD,UAAlB,CAA8B;AAClC,eAAe,CAAC;AAAEJ,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACXN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BC,QAAS;AAC1C,iBAAiB,CAAC;AAAEP,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BE,UAAW;AAC5C,iBAAiB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGT,KAAK,CAACE,IAAN,CAAWQ,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC,oBAAoB,CAAC;AAAEE,EAAAA,aAAa,GAAG;AAAlB,CAAD,KAAiC,GAAEA,aAAc,EAAE;AACvE,CAXO;;;AAaP,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,YADmB;AAEnBC,EAAAA,SAFmB;AAGnBd,EAAAA;AAHmB,CAAD,KAKlBa,YAAY,IACZC,SADA,IAEA,gBAAI;AACN,aAAad,KAAK,CAACG,KAAN,CAAYU,YAAZ,EAA0BC,SAA1B,CAAqC;AAClD,GATA;;AAWO,MAAMC,iBAAiB,GAAG,qBAAOjB,UAAP,EAE/Bc,WAF+B,CAA1B","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps, TextProps } from '@tecsinapse/react-core';\nimport { Text as RNText } from 'react-native';\n\nexport const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`\n  color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};\n  font-weight: ${({ theme, fontWeight = 'regular' }) =>\n    theme.font.weight[fontWeight]};\n  font-size: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].fontSize};\n  line-height: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].lineHeight};\n  font-family: ${({ theme, fontStack = 'default' }) =>\n    `'${theme.font.stack[fontStack]}'`};\n  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};\n`;\n\nconst colorStyles = ({\n  colorVariant,\n  colorTone,\n  theme,\n}: TextProps & StyleProps) =>\n  colorVariant &&\n  colorTone &&\n  css`\n    color: ${theme.color[colorVariant][colorTone]};\n  `;\n\nexport const StyledColoredText = styled(StyledText)<\n  TextProps & Partial<StyleProps>\n>(colorStyles);\n"],"file":"styled.js"}

package/dist/types/defaults.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type Color = {
     primary: ColorGradation;
     secondary: ColorGradation;
@@ -111,6 +112,7 @@ export declare type ThemeProp = {
     zIndex: ZIndex;
 };
 export interface ThemeProviderProps {
+    children?: React.ReactNode;
     theme: ThemeProp;
 }
 export declare type StyleProps = ThemeProviderProps;

package/dist/utils/masks.js

@@ -2,6 +2,9 @@
 
 exports.__esModule = true;
 exports.Masks = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
 const Masks = {
   CPF: ['999.999.999-99'],
   CNPJ: ['99.999.999/9999-99'],
@@ -10,7 +13,11 @@ const Masks = {
   CEP: ['99999-999'],
   PHONE: ['(99) 9999-9999'],
   PHONE_EXTENDED: ['(99) 99999-9999'],
-  COMBINED_PHONE: value => (value == null ? void 0 : value.length) <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+  COMBINED_PHONE: value => {
+    const onlyNumbers = (0, _reactCore.extractDigitsFromString)(value);
+    const isCellPhoneExtended = onlyNumbers.length === 11;
+    return (value == null ? void 0 : value.length) <= 14 && !isCellPhoneExtended ? Masks.PHONE : Masks.PHONE_EXTENDED;
+  },
   COMBINED_CPF_CNPJ: value => (value == null ? void 0 : value.length) <= 14 ? Masks.CPF : Masks.CNPJ
 };
 exports.Masks = Masks;

package/dist/utils/masks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/masks.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length","COMBINED_CPF_CNPJ"],"mappings":";;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,CAAC,gBAAD,CADc;AAEnBC,EAAAA,IAAI,EAAE,CAAC,oBAAD,CAFa;AAGnBC,EAAAA,IAAI,EAAE,CAAC,YAAD,CAHa;AAInBC,EAAAA,UAAU,EAAE,CAAC,SAAD,CAJO;AAKnBC,EAAAA,GAAG,EAAE,CAAC,WAAD,CALc;AAMnBC,EAAAA,KAAK,EAAE,CAAC,gBAAD,CANY;AAOnBC,EAAAA,cAAc,EAAE,CAAC,iBAAD,CAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IAEd,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO,cAVzB;AAWnBI,EAAAA,iBAAiB,EAAGF,KAAD,IACjB,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACC,GAA5B,GAAkCD,KAAK,CAACE;AAZvB,CAAd","sourcesContent":["// NOTE: Add here all individually utils, then you can use it on input components everywhere.\nexport const Masks = {\n  CPF: ['999.999.999-99'],\n  CNPJ: ['99.999.999/9999-99'],\n  DATE: ['99/99/9999'],\n  MONTH_YEAR: ['99/9999'],\n  CEP: ['99999-999'],\n  PHONE: ['(99) 9999-9999'],\n  PHONE_EXTENDED: ['(99) 99999-9999'],\n  COMBINED_PHONE: (value: string) =>\n    // Value in formatted mode\n    value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n  COMBINED_CPF_CNPJ: (value: string) =>\n    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,\n};\n"],"file":"masks.js"}
+{"version":3,"sources":["../../src/utils/masks.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","onlyNumbers","isCellPhoneExtended","length","COMBINED_CPF_CNPJ"],"mappings":";;;;;AACA;;AAEO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,CAAC,gBAAD,CADc;AAEnBC,EAAAA,IAAI,EAAE,CAAC,oBAAD,CAFa;AAGnBC,EAAAA,IAAI,EAAE,CAAC,YAAD,CAHa;AAInBC,EAAAA,UAAU,EAAE,CAAC,SAAD,CAJO;AAKnBC,EAAAA,GAAG,EAAE,CAAC,WAAD,CALc;AAMnBC,EAAAA,KAAK,EAAE,CAAC,gBAAD,CANY;AAOnBC,EAAAA,cAAc,EAAE,CAAC,iBAAD,CAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IAAmB;AACjC,UAAMC,WAAW,GAAG,wCAAwBD,KAAxB,CAApB;AAEA,UAAME,mBAAmB,GAAGD,WAAW,CAACE,MAAZ,KAAuB,EAAnD;AAGA,WAAO,CAAAH,KAAK,QAAL,YAAAA,KAAK,CAAEG,MAAP,KAAiB,EAAjB,IAAuB,CAACD,mBAAxB,GACHX,KAAK,CAACM,KADH,GAEHN,KAAK,CAACO,cAFV;AAGD,GAjBkB;AAkBnBM,EAAAA,iBAAiB,EAAGJ,KAAD,IACjB,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEG,MAAP,KAAiB,EAAjB,GAAsBZ,KAAK,CAACC,GAA5B,GAAkCD,KAAK,CAACE;AAnBvB,CAAd","sourcesContent":["// NOTE: Add here all individually utils, then you can use it on input components everywhere.\nimport { extractDigitsFromString } from '@tecsinapse/react-core';\n\nexport const Masks = {\n  CPF: ['999.999.999-99'],\n  CNPJ: ['99.999.999/9999-99'],\n  DATE: ['99/99/9999'],\n  MONTH_YEAR: ['99/9999'],\n  CEP: ['99999-999'],\n  PHONE: ['(99) 9999-9999'],\n  PHONE_EXTENDED: ['(99) 99999-9999'],\n  COMBINED_PHONE: (value: string) => {\n    const onlyNumbers = extractDigitsFromString(value);\n    // Value is number extended, but without mask.\n    const isCellPhoneExtended = onlyNumbers.length === 11;\n\n    // Value in formatted mode\n    return value?.length <= 14 && !isCellPhoneExtended\n      ? Masks.PHONE\n      : Masks.PHONE_EXTENDED;\n  },\n  COMBINED_CPF_CNPJ: (value: string) =>\n    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,\n};\n"],"file":"masks.js"}

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.16.1",
+  "version": "1.16.4",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "start": "yarn build:es --watch",
+    "build:es": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
     "build:declaration": "tsc --project tsconfig.build.json",
-    "build:es": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
+    "yalc:push": "yalc push --changed",
+    "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
     "@emotion/native": "^11.0.0",
@@ -31,5 +34,5 @@
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "f4d635a35883748ec2594557606c00e2822a1ad6"
+  "gitHead": "ab944cad9dc3a840ebf3ebc9ed525926ebe3a436"
 }

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

@@ -9,6 +9,7 @@ import {
 } from '@tecsinapse/react-core';
 import { StyleProp, TextStyle } from 'react-native';
 import { StyledColoredText } from './styled';
+import { getLabel } from './functions';
 
 export interface TextProps {
   /** Font theme text color */
@@ -25,7 +26,10 @@ export interface TextProps {
   colorTone?: ColorGradationType;
   numberOfLines?: number;
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+  capitalFirst?: boolean;
   style?: StyleProp<TextStyle>;
+  children?: React.ReactNode;
 }
 
 /** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */
@@ -39,6 +43,8 @@ const Text: FC<TextProps> = ({
   typography = 'base',
   numberOfLines,
   ellipsizeMode,
+  textTransform = 'none',
+  capitalFirst = false,
   ...rest
 }): JSX.Element => {
   return (
@@ -52,8 +58,9 @@ const Text: FC<TextProps> = ({
       typography={typography}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}
+      textTransform={textTransform}
     >
-      {children}
+      {getLabel(children, capitalFirst)}
     </StyledColoredText>
   );
 };

package/src/components/atoms/Text/functions.ts

@@ -0,0 +1,8 @@
+export const getFirstCapitalCharacter = (value: string): string =>
+  value.charAt(0).toUpperCase().concat(value.slice(1));
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const getLabel = (children, capitalFirst: boolean) =>
+  typeof children === 'string' && capitalFirst
+    ? getFirstCapitalCharacter(children)
+    : children;

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

@@ -12,6 +12,7 @@ export const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`
     theme.typography[typography].lineHeight};
   font-family: ${({ theme, fontStack = 'default' }) =>
     `'${theme.font.stack[fontStack]}'`};
+  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};
 `;
 
 const colorStyles = ({

package/src/types/defaults.ts

@@ -125,6 +125,7 @@ export type ThemeProp = {
 };
 
 export interface ThemeProviderProps {
+  children?: React.ReactNode;
   theme: ThemeProp;
 }
 

package/src/utils/masks.ts

@@ -1,4 +1,6 @@
 // NOTE: Add here all individually utils, then you can use it on input components everywhere.
+import { extractDigitsFromString } from '@tecsinapse/react-core';
+
 export const Masks = {
   CPF: ['999.999.999-99'],
   CNPJ: ['99.999.999/9999-99'],
@@ -7,9 +9,16 @@ export const Masks = {
   CEP: ['99999-999'],
   PHONE: ['(99) 9999-9999'],
   PHONE_EXTENDED: ['(99) 99999-9999'],
-  COMBINED_PHONE: (value: string) =>
+  COMBINED_PHONE: (value: string) => {
+    const onlyNumbers = extractDigitsFromString(value);
+    // Value is number extended, but without mask.
+    const isCellPhoneExtended = onlyNumbers.length === 11;
+
     // Value in formatted mode
-    value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+    return value?.length <= 14 && !isCellPhoneExtended
+      ? Masks.PHONE
+      : Masks.PHONE_EXTENDED;
+  },
   COMBINED_CPF_CNPJ: (value: string) =>
     value?.length <= 14 ? Masks.CPF : Masks.CNPJ,
 };