npm - @tecsinapse/react-core - Versions diffs - 1.17.4 → 1.18.0 - Mend

@tecsinapse/react-core 1.17.4 → 1.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/dist/styles/definitions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/styles/definitions.ts"],"names":["statusColor","error","xlight","light","medium","dark","xdark","warning","success","info","hex2rgba","hex","alpha","r","g","b","match","map","x","parseInt","miscellaneous","shadow","overlay","bodyColor","surfaceColor","spacing","nano","micro","mili","centi","deca","kilo","mega","giga","tera","peta","hexa","iconSize","borderRadius","pill","borderWidth","pico","typography","h5","fontSize","lineHeight","h4","h3","h2","h1","base","sub","label","fontStack","default","mono","fontWeight","regular","bold","black","fontFiles","fontColor","orange","zIndex","absolute","select","input","popover","tooltip","header","backdrop","drawer","sidebar","modal"],"mappings":";;;;;~~AAYA~~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","sourcesContent":["import {\n BorderRadius,\n BorderWidth,\n FontColor,\n FontStack,\n FontWeight,\n IconSize,\n Miscellaneous,\n Spacing,\n TypographyVariation,\n ZIndex\n} from '../types/defaults';\nimport { RFValueStr } from '../utils';\n\nexport const statusColor = {\n error: {\n xlight: '#fdf3f2',\n light: '#ee9891',\n medium: '#e04638',\n dark: '#9b2318',\n xdark: '#58240e',\n },\n warning: {\n xlight: '#fffcf0',\n light: '#ffe380',\n medium: '#ffc700',\n dark: '#cc9f00',\n xdark: '#665000',\n },\n success: {\n xlight: '#f3fcf8',\n light: '#99e6c9',\n medium: '#2db783',\n dark: '#238f67',\n xdark: '#14523b',\n },\n info: {\n xlight: '#f0f8fe',\n light: '#85c7fa',\n medium: '#239bf6',\n dark: '#0873c4',\n xdark: '#043962',\n },\n};\n\nexport const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {\n const [r, g, b] = hex.match(/\\w\\w/g).map(x => parseInt(x, 16));\n return `rgba(${r},${g},${b},${alpha})`;\n};\n\nexport const miscellaneous: Miscellaneous = {\n shadow: '#000000', // black\n overlay: '#282625', // rgba(40, 38, 37, 0.5)\n bodyColor: '#f8f7f7',\n surfaceColor: '#ffffff', //input, group button, cards\n};\n\nexport const spacing: Spacing = {\n nano: RFValueStr('2px'),\n micro: RFValueStr('4px'),\n mili: RFValueStr('8px'),\n centi: RFValueStr('12px'),\n deca: RFValueStr('16px'),\n kilo: RFValueStr('24px'),\n mega: RFValueStr('32px'),\n giga: RFValueStr('40px'),\n tera: RFValueStr('48px'),\n peta: RFValueStr('56px'),\n hexa: RFValueStr('64px'),\n};\n\nexport const iconSize: IconSize = {\n micro: RFValueStr('12px'),\n mili: RFValueStr('14px'),\n centi: RFValueStr('16px'), // '1rem'\n deca: RFValueStr('18px'), // '1.5rem'\n kilo: RFValueStr('24px'), // '1.6rem'\n mega: RFValueStr('32px'), // '2rem'\n};\n\nexport const borderRadius: BorderRadius = {\n nano: RFValueStr('2px'),\n micro: RFValueStr('4px'),\n mili: RFValueStr('8px'),\n centi: RFValueStr('16px'),\n deca: RFValueStr('24px'),\n pill: RFValueStr('999999px'), // also circle\n};\n\nexport const borderWidth: BorderWidth = {\n pico: RFValueStr('1px'),\n nano: RFValueStr('2px'),\n};\n\nexport const typography: TypographyVariation = {\n h5: {\n fontSize: RFValueStr('16px'), // '1rem'\n lineHeight: RFValueStr('24px'), // '1.5rem'\n },\n h4: {\n fontSize: RFValueStr('18px'), // '1.125rem'\n lineHeight: RFValueStr('27px'), // '1.688rem'\n },\n h3: {\n fontSize: RFValueStr('20px'), // '1.25rem'\n lineHeight: RFValueStr('32px'), // '2rem'\n },\n h2: {\n fontSize: RFValueStr('26px'), // '1.625rem'\n lineHeight: RFValueStr('38px'), // '2.375rem'\n },\n h1: {\n fontSize: RFValueStr('32px'), // '2rem'\n lineHeight: RFValueStr('42px'), // '2.625rem'\n },\n base: {\n fontSize: RFValueStr('14px'), // '0.875rem'\n lineHeight: RFValueStr('21px'), // '1.313rem'\n },\n sub: {\n fontSize: RFValueStr('12px'), // '0.75rem'\n lineHeight: RFValueStr('18px'), // '1.125rem'\n },\n label: {\n fontSize: RFValueStr('10px'),\n lineHeight: RFValueStr('12px'),\n },\n};\n\nexport const fontStack: FontStack = {\n default: 'Lato',\n mono: 'Consolas, monaco, monospace',\n};\n\nexport const fontWeight: FontWeight = {\n regular: '400',\n bold: '700',\n black: '900',\n};\n\nexport const fontFiles: FontWeight = {\n black: '{0}-Black',\n bold: '{0}-Bold',\n regular: '{0}-Regular',\n};\n\nexport const fontColor: FontColor = {\n light: '#fff',\n medium: '#85807a',\n dark: '#353231', // default\n orange: '#f89907',\n};\n\nexport const zIndex: ZIndex = {\n default: 0,\n absolute: 1,\n select: 20,\n input: 20,\n popover: 30,\n tooltip: 40,\n header: 600,\n backdrop: 700,\n drawer: 700,\n sidebar: 800,\n modal: 1000,\n};\n\nexport type IconType =\n \| 'material'\n \| 'material-community'\n \| 'simple-line-icon'\n \| 'zocial'\n \| 'font-awesome'\n \| 'octicon'\n \| 'ionicon'\n \| 'foundation'\n \| 'evilicon'\n \| 'entypo'\n \| 'antdesign'\n \| 'font-awesome-5'\n \| string;\n"],"file":"definitions.js"}
1	+ {"version":3,"sources":["../../src/styles/definitions.ts"],"names":["statusColor","error","xlight","light","medium","dark","xdark","warning","success","info","hex2rgba","hex","alpha","r","g","b","match","map","x","parseInt","miscellaneous","shadow","overlay","bodyColor","surfaceColor","spacing","nano","micro","mili","centi","deca","kilo","mega","giga","tera","peta","hexa","iconSize","borderRadius","pill","borderWidth","pico","typography","h5","fontSize","lineHeight","h4","h3","h2","h1","base","sub","label","fontStack","default","mono","fontWeight","regular","bold","black","fontFiles","fontColor","orange","zIndex","absolute","select","input","popover","tooltip","header","backdrop","drawer","sidebar","modal","breakpoints","sm","md","lg"],"mappings":"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","sourcesContent":["import {\n BorderRadius,\n BorderWidth,\n Breakpoints,\n FontColor,\n FontStack,\n FontWeight,\n IconSize,\n Miscellaneous,\n Spacing,\n TypographyVariation,\n ZIndex,\n} from '../types/defaults';\nimport { RFValueStr } from '../utils';\n\nexport const statusColor = {\n error: {\n xlight: '#fdf3f2',\n light: '#ee9891',\n medium: '#e04638',\n dark: '#9b2318',\n xdark: '#58240e',\n },\n warning: {\n xlight: '#fffcf0',\n light: '#ffe380',\n medium: '#ffc700',\n dark: '#cc9f00',\n xdark: '#665000',\n },\n success: {\n xlight: '#f3fcf8',\n light: '#99e6c9',\n medium: '#2db783',\n dark: '#238f67',\n xdark: '#14523b',\n },\n info: {\n xlight: '#f0f8fe',\n light: '#85c7fa',\n medium: '#239bf6',\n dark: '#0873c4',\n xdark: '#043962',\n },\n};\n\nexport const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {\n const [r, g, b] = hex.match(/\\w\\w/g).map(x => parseInt(x, 16));\n return `rgba(${r},${g},${b},${alpha})`;\n};\n\nexport const miscellaneous: Miscellaneous = {\n shadow: '#000000', // black\n overlay: '#282625', // rgba(40, 38, 37, 0.5)\n bodyColor: '#f8f7f7',\n surfaceColor: '#ffffff', //input, group button, cards\n};\n\nexport const spacing: Spacing = {\n nano: RFValueStr('2px'),\n micro: RFValueStr('4px'),\n mili: RFValueStr('8px'),\n centi: RFValueStr('12px'),\n deca: RFValueStr('16px'),\n kilo: RFValueStr('24px'),\n mega: RFValueStr('32px'),\n giga: RFValueStr('40px'),\n tera: RFValueStr('48px'),\n peta: RFValueStr('56px'),\n hexa: RFValueStr('64px'),\n};\n\nexport const iconSize: IconSize = {\n micro: RFValueStr('12px'),\n mili: RFValueStr('14px'),\n centi: RFValueStr('16px'), // '1rem'\n deca: RFValueStr('18px'), // '1.5rem'\n kilo: RFValueStr('24px'), // '1.6rem'\n mega: RFValueStr('32px'), // '2rem'\n};\n\nexport const borderRadius: BorderRadius = {\n nano: RFValueStr('2px'),\n micro: RFValueStr('4px'),\n mili: RFValueStr('8px'),\n centi: RFValueStr('16px'),\n deca: RFValueStr('24px'),\n pill: RFValueStr('999999px'), // also circle\n};\n\nexport const borderWidth: BorderWidth = {\n pico: RFValueStr('1px'),\n nano: RFValueStr('2px'),\n};\n\nexport const typography: TypographyVariation = {\n h5: {\n fontSize: RFValueStr('16px'), // '1rem'\n lineHeight: RFValueStr('24px'), // '1.5rem'\n },\n h4: {\n fontSize: RFValueStr('18px'), // '1.125rem'\n lineHeight: RFValueStr('27px'), // '1.688rem'\n },\n h3: {\n fontSize: RFValueStr('20px'), // '1.25rem'\n lineHeight: RFValueStr('32px'), // '2rem'\n },\n h2: {\n fontSize: RFValueStr('26px'), // '1.625rem'\n lineHeight: RFValueStr('38px'), // '2.375rem'\n },\n h1: {\n fontSize: RFValueStr('32px'), // '2rem'\n lineHeight: RFValueStr('42px'), // '2.625rem'\n },\n base: {\n fontSize: RFValueStr('14px'), // '0.875rem'\n lineHeight: RFValueStr('21px'), // '1.313rem'\n },\n sub: {\n fontSize: RFValueStr('12px'), // '0.75rem'\n lineHeight: RFValueStr('18px'), // '1.125rem'\n },\n label: {\n fontSize: RFValueStr('10px'),\n lineHeight: RFValueStr('12px'),\n },\n};\n\nexport const fontStack: FontStack = {\n default: 'Lato',\n mono: 'Consolas, monaco, monospace',\n};\n\nexport const fontWeight: FontWeight = {\n regular: '400',\n bold: '700',\n black: '900',\n};\n\nexport const fontFiles: FontWeight = {\n black: '{0}-Black',\n bold: '{0}-Bold',\n regular: '{0}-Regular',\n};\n\nexport const fontColor: FontColor = {\n light: '#fff',\n medium: '#85807a',\n dark: '#353231', // default\n orange: '#f89907',\n};\n\nexport const zIndex: ZIndex = {\n default: 0,\n absolute: 1,\n select: 20,\n input: 20,\n popover: 30,\n tooltip: 40,\n header: 600,\n backdrop: 700,\n drawer: 700,\n sidebar: 800,\n modal: 1000,\n};\n\nexport type IconType =\n \| 'material'\n \| 'material-community'\n \| 'simple-line-icon'\n \| 'zocial'\n \| 'font-awesome'\n \| 'octicon'\n \| 'ionicon'\n \| 'foundation'\n \| 'evilicon'\n \| 'entypo'\n \| 'antdesign'\n \| 'font-awesome-5'\n \| string;\n\nexport const breakpoints: Breakpoints = {\n sm: 480,\n md: 768,\n lg: 1366,\n};\n"],"file":"definitions.js"}

package/dist/styles/light.js CHANGED Viewed

@@ -39,7 +39,8 @@ const lightTheme = {
     weight: _definitions.fontWeight,
     files: _definitions.fontFiles
   },
-  zIndex: _definitions.zIndex
+  zIndex: _definitions.zIndex,
+  breakpoints: _definitions.breakpoints
 };
 exports.lightTheme = lightTheme;
 //# sourceMappingURL=light.js.map

package/dist/styles/light.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/styles/light.ts"],"names":["primaryGradation","xlight","light","medium","dark","xdark","secondaryGradation","lightTheme","color","primary","secondary","statusColor","miscellaneous","spacing","iconSize","borderRadius","borderWidth","typography","font","fontColor","stack","fontStack","weight","fontWeight","files","fontFiles","zIndex"],"mappings":";;;;;AACA;;~~AAeA~~,MAAMA,gBAAgB,GAAG;AACvBC,EAAAA,MAAM,EAAE,SADe;AAEvBC,EAAAA,KAAK,EAAE,SAFgB;AAGvBC,EAAAA,MAAM,EAAE,SAHe;AAIvBC,EAAAA,IAAI,EAAE,SAJiB;AAKvBC,EAAAA,KAAK,EAAE;AALgB,CAAzB;AAQA,MAAMC,kBAAkB,GAAG;AACzBL,EAAAA,MAAM,EAAE,SADiB;AAEzBC,EAAAA,KAAK,EAAE,SAFkB;AAGzBC,EAAAA,MAAM,EAAE,SAHiB;AAIzBC,EAAAA,IAAI,EAAE,SAJmB;AAKzBC,EAAAA,KAAK,EAAE;AALkB,CAA3B;AAQO,MAAME,UAAqB,GAAG;AACnCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,EACP,GAAGT;AADI,KADJ;AAILU,IAAAA,SAAS,EAAE,EAAE,GAAGJ;AAAL,KAJN;AAKL,OAAGK;AALE,GAD4B;AAQnCC,EAAAA,aAAa,EAAbA,0BARmC;AASnCC,EAAAA,OAAO,EAAPA,oBATmC;AAUnCC,EAAAA,QAAQ,EAARA,qBAVmC;AAWnCC,EAAAA,YAAY,EAAZA,yBAXmC;AAYnCC,EAAAA,WAAW,EAAXA,wBAZmC;AAanCC,EAAAA,UAAU,EAAVA,uBAbmC;AAcnCC,EAAAA,IAAI,EAAE;AACJV,IAAAA,KAAK,EAAEW,sBADH;AAEJC,IAAAA,KAAK,EAAEC,sBAFH;AAGJC,IAAAA,MAAM,EAAEC,uBAHJ;AAIJC,IAAAA,KAAK,EAAEC;AAJH,GAd6B;AAoBnCC,EAAAA,MAAM,EAANA;~~AApBmC~~,CAA9B","sourcesContent":["import { ThemeProp } from '../types/defaults';\nimport {\n borderRadius,\n borderWidth,\n fontColor,\n fontFiles,\n fontStack,\n fontWeight,\n iconSize,\n miscellaneous,\n spacing,\n statusColor,\n typography,\n zIndex,\n} from './definitions';\n\nconst primaryGradation = {\n xlight: '#fef9f0',\n light: '#fccb83',\n medium: '#f89907',\n dark: '#ae6b05',\n xdark: '#633d03',\n};\n\nconst secondaryGradation = {\n xlight: '#f8f7f7',\n light: '#c2bfbc',\n medium: '#85807a',\n dark: '#5d5955',\n xdark: '#353231',\n};\n\nexport const lightTheme: ThemeProp = {\n color: {\n primary: {\n ...primaryGradation,\n },\n secondary: { ...secondaryGradation },\n ...statusColor,\n },\n miscellaneous,\n spacing,\n iconSize,\n borderRadius,\n borderWidth,\n typography,\n font: {\n color: fontColor,\n stack: fontStack,\n weight: fontWeight,\n files: fontFiles,\n },\n zIndex,\n};\n"],"file":"light.js"}
1	+ {"version":3,"sources":["../../src/styles/light.ts"],"names":["primaryGradation","xlight","light","medium","dark","xdark","secondaryGradation","lightTheme","color","primary","secondary","statusColor","miscellaneous","spacing","iconSize","borderRadius","borderWidth","typography","font","fontColor","stack","fontStack","weight","fontWeight","files","fontFiles","zIndex","breakpoints"],"mappings":";;;;;AACA;;AAgBA,MAAMA,gBAAgB,GAAG;AACvBC,EAAAA,MAAM,EAAE,SADe;AAEvBC,EAAAA,KAAK,EAAE,SAFgB;AAGvBC,EAAAA,MAAM,EAAE,SAHe;AAIvBC,EAAAA,IAAI,EAAE,SAJiB;AAKvBC,EAAAA,KAAK,EAAE;AALgB,CAAzB;AAQA,MAAMC,kBAAkB,GAAG;AACzBL,EAAAA,MAAM,EAAE,SADiB;AAEzBC,EAAAA,KAAK,EAAE,SAFkB;AAGzBC,EAAAA,MAAM,EAAE,SAHiB;AAIzBC,EAAAA,IAAI,EAAE,SAJmB;AAKzBC,EAAAA,KAAK,EAAE;AALkB,CAA3B;AAQO,MAAME,UAAqB,GAAG;AACnCC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,EACP,GAAGT;AADI,KADJ;AAILU,IAAAA,SAAS,EAAE,EAAE,GAAGJ;AAAL,KAJN;AAKL,OAAGK;AALE,GAD4B;AAQnCC,EAAAA,aAAa,EAAbA,0BARmC;AASnCC,EAAAA,OAAO,EAAPA,oBATmC;AAUnCC,EAAAA,QAAQ,EAARA,qBAVmC;AAWnCC,EAAAA,YAAY,EAAZA,yBAXmC;AAYnCC,EAAAA,WAAW,EAAXA,wBAZmC;AAanCC,EAAAA,UAAU,EAAVA,uBAbmC;AAcnCC,EAAAA,IAAI,EAAE;AACJV,IAAAA,KAAK,EAAEW,sBADH;AAEJC,IAAAA,KAAK,EAAEC,sBAFH;AAGJC,IAAAA,MAAM,EAAEC,uBAHJ;AAIJC,IAAAA,KAAK,EAAEC;AAJH,GAd6B;AAoBnCC,EAAAA,MAAM,EAANA,mBApBmC;AAqBnCC,EAAAA,WAAW,EAAXA;AArBmC,CAA9B","sourcesContent":["import { ThemeProp } from '../types/defaults';\nimport {\n borderRadius,\n borderWidth,\n breakpoints,\n fontColor,\n fontFiles,\n fontStack,\n fontWeight,\n iconSize,\n miscellaneous,\n spacing,\n statusColor,\n typography,\n zIndex,\n} from './definitions';\n\nconst primaryGradation = {\n xlight: '#fef9f0',\n light: '#fccb83',\n medium: '#f89907',\n dark: '#ae6b05',\n xdark: '#633d03',\n};\n\nconst secondaryGradation = {\n xlight: '#f8f7f7',\n light: '#c2bfbc',\n medium: '#85807a',\n dark: '#5d5955',\n xdark: '#353231',\n};\n\nexport const lightTheme: ThemeProp = {\n color: {\n primary: {\n ...primaryGradation,\n },\n secondary: { ...secondaryGradation },\n ...statusColor,\n },\n miscellaneous,\n spacing,\n iconSize,\n borderRadius,\n borderWidth,\n typography,\n font: {\n color: fontColor,\n stack: fontStack,\n weight: fontWeight,\n files: fontFiles,\n },\n zIndex,\n breakpoints,\n};\n"],"file":"light.js"}

package/dist/types/defaults.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export declare type Color = {
     primary: ColorGradation;
     secondary: ColorGradation;
@@ -95,6 +95,11 @@ export declare type FontWeight = {
     bold: string;
     black: string;
 };
+export declare type Breakpoints = {
+    sm: number;
+    md: number;
+    lg: number;
+};
 export declare type ThemeProp = {
     color: Color;
     miscellaneous: Miscellaneous;
@@ -110,9 +115,10 @@ export declare type ThemeProp = {
         files: FontWeight;
     };
     zIndex: ZIndex;
+    breakpoints: Breakpoints;
 };
 export interface ThemeProviderProps {
-    children?: React.ReactNode;
+    children?: ReactNode;
     theme: ThemeProp;
 }
 export declare type StyleProps = ThemeProviderProps;

package/dist/utils/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-export { lightenDarkenColor } from './lightenDarkenColor';
-export { extractNumbersFromString, extractDigitsFromString, } from './extractNumbersFromString';
+export { extractDigitsFromString, extractNumbersFromString, } from './extractNumbersFromString';
+export * from './formatWithMask';
 export * from './IPhoneXHelper';
-export * from './ResponsiveFontSize';
+export { lightenDarkenColor } from './lightenDarkenColor';
 export * from './masks';
-export * from './formatWithMask';
+export * from './ResponsiveFontSize';
+export * from './variantComplement';

package/dist/utils/index.js CHANGED Viewed

@@ -2,20 +2,25 @@
 exports.__esModule = true;
 var _exportNames = {
-  lightenDarkenColor: true,
+  extractDigitsFromString: true,
   extractNumbersFromString: true,
-  extractDigitsFromString: true
+  lightenDarkenColor: true
 };
-exports.extractDigitsFromString = exports.extractNumbersFromString = exports.lightenDarkenColor = void 0;
-var _lightenDarkenColor = require("./lightenDarkenColor");
-exports.lightenDarkenColor = _lightenDarkenColor.lightenDarkenColor;
+exports.lightenDarkenColor = exports.extractNumbersFromString = exports.extractDigitsFromString = void 0;
 var _extractNumbersFromString = require("./extractNumbersFromString");
-exports.extractNumbersFromString = _extractNumbersFromString.extractNumbersFromString;
 exports.extractDigitsFromString = _extractNumbersFromString.extractDigitsFromString;
+exports.extractNumbersFromString = _extractNumbersFromString.extractNumbersFromString;
+var _formatWithMask = require("./formatWithMask");
+Object.keys(_formatWithMask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _formatWithMask[key]) return;
+  exports[key] = _formatWithMask[key];
+});
 var _IPhoneXHelper = require("./IPhoneXHelper");
@@ -26,14 +31,9 @@ Object.keys(_IPhoneXHelper).forEach(function (key) {
   exports[key] = _IPhoneXHelper[key];
 });
-var _ResponsiveFontSize = require("./ResponsiveFontSize");
+var _lightenDarkenColor = require("./lightenDarkenColor");
-Object.keys(_ResponsiveFontSize).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ResponsiveFontSize[key]) return;
-  exports[key] = _ResponsiveFontSize[key];
-});
+exports.lightenDarkenColor = _lightenDarkenColor.lightenDarkenColor;
 var _masks = require("./masks");
@@ -44,12 +44,21 @@ Object.keys(_masks).forEach(function (key) {
   exports[key] = _masks[key];
 });
-var _formatWithMask = require("./formatWithMask");
+var _ResponsiveFontSize = require("./ResponsiveFontSize");
-Object.keys(_formatWithMask).forEach(function (key) {
+Object.keys(_ResponsiveFontSize).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _formatWithMask[key]) return;
-  exports[key] = _formatWithMask[key];
+  if (key in exports && exports[key] === _ResponsiveFontSize[key]) return;
+  exports[key] = _ResponsiveFontSize[key];
+});
+var _variantComplement = require("./variantComplement");
+Object.keys(_variantComplement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _variantComplement[key]) return;
+  exports[key] = _variantComplement[key];
 });
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA~~;;;;AACA~~;;;;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { ~~lightenDarkenColor } from './lightenDarkenColor';\nexport {~~\n ~~extractNumbersFromString~~,\n ~~extractDigitsFromString~~,\n} from './extractNumbersFromString';\nexport * from './~~IPhoneXHelper~~';\nexport * from './~~ResponsiveFontSize~~';\nexport * from './masks';\nexport * from './~~formatWithMask~~';\n"],"file":"index.js"}
1	+ {"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {\n extractDigitsFromString,\n extractNumbersFromString,\n} from './extractNumbersFromString';\nexport * from './formatWithMask';\nexport * from './IPhoneXHelper';\nexport { lightenDarkenColor } from './lightenDarkenColor';\nexport * from './masks';\nexport * from './ResponsiveFontSize';\nexport * from './variantComplement';\n"],"file":"index.js"}

package/dist/utils/variantComplement.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { ColorGradationType, ColorType, FontColorType, VariantType } from '../types/defaults';
+export declare const fontColorVC: Record<VariantType, FontColorType>;
+export declare const colorVC: Record<VariantType, ColorType>;
+export declare const colorGradationVC: Record<VariantType, ColorGradationType>;
+export declare const borderColorVC: Record<VariantType, ColorType>;
+export declare const borderColorGradationVC: Record<VariantType, ColorGradationType>;

package/dist/utils/variantComplement.js ADDED Viewed

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.borderColorGradationVC = exports.borderColorVC = exports.colorGradationVC = exports.colorVC = exports.fontColorVC = void 0;
+const fontColorVC = {
+  filled: 'light',
+  outlined: 'orange',
+  text: 'orange'
+};
+exports.fontColorVC = fontColorVC;
+const colorVC = {
+  filled: 'primary',
+  outlined: 'primary',
+  text: 'primary'
+};
+exports.colorVC = colorVC;
+const colorGradationVC = {
+  filled: 'dark',
+  outlined: 'dark',
+  text: 'dark'
+};
+exports.colorGradationVC = colorGradationVC;
+const borderColorVC = {
+  filled: 'primary',
+  outlined: 'primary',
+  text: 'primary'
+};
+exports.borderColorVC = borderColorVC;
+const borderColorGradationVC = {
+  filled: 'dark',
+  outlined: 'dark',
+  text: 'dark'
+};
+exports.borderColorGradationVC = borderColorGradationVC;
+//# sourceMappingURL=variantComplement.js.map

package/dist/utils/variantComplement.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/utils/variantComplement.ts"],"names":["fontColorVC","filled","outlined","text","colorVC","colorGradationVC","borderColorVC","borderColorGradationVC"],"mappings":";;;;AAOO,MAAMA,WAA+C,GAAG;AAC7DC,EAAAA,MAAM,EAAE,OADqD;AAE7DC,EAAAA,QAAQ,EAAE,QAFmD;AAG7DC,EAAAA,IAAI,EAAE;AAHuD,CAAxD;;AAMA,MAAMC,OAAuC,GAAG;AACrDH,EAAAA,MAAM,EAAE,SAD6C;AAErDC,EAAAA,QAAQ,EAAE,SAF2C;AAGrDC,EAAAA,IAAI,EAAE;AAH+C,CAAhD;;AAMA,MAAME,gBAAyD,GAAG;AACvEJ,EAAAA,MAAM,EAAE,MAD+D;AAEvEC,EAAAA,QAAQ,EAAE,MAF6D;AAGvEC,EAAAA,IAAI,EAAE;AAHiE,CAAlE;;AAMA,MAAMG,aAA6C,GAAG;AAC3DL,EAAAA,MAAM,EAAE,SADmD;AAE3DC,EAAAA,QAAQ,EAAE,SAFiD;AAG3DC,EAAAA,IAAI,EAAE;AAHqD,CAAtD;;AAMA,MAAMI,sBAA+D,GAAG;AAC7EN,EAAAA,MAAM,EAAE,MADqE;AAE7EC,EAAAA,QAAQ,EAAE,MAFmE;AAG7EC,EAAAA,IAAI,EAAE;AAHuE,CAAxE","sourcesContent":["import {\n ColorGradationType,\n ColorType,\n FontColorType,\n VariantType,\n} from '../types/defaults';\n\nexport const fontColorVC: Record<VariantType, FontColorType> = {\n filled: 'light',\n outlined: 'orange',\n text: 'orange',\n};\n\nexport const colorVC: Record<VariantType, ColorType> = {\n filled: 'primary',\n outlined: 'primary',\n text: 'primary',\n};\n\nexport const colorGradationVC: Record<VariantType, ColorGradationType> = {\n filled: 'dark',\n outlined: 'dark',\n text: 'dark',\n};\n\nexport const borderColorVC: Record<VariantType, ColorType> = {\n filled: 'primary',\n outlined: 'primary',\n text: 'primary',\n};\n\nexport const borderColorGradationVC: Record<VariantType, ColorGradationType> = {\n filled: 'dark',\n outlined: 'dark',\n text: 'dark',\n};\n"],"file":"variantComplement.js"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.17.4",
+  "version": "1.18.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,10 @@
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.4.1",
+    "@emotion/native": "^11.10.0",
+    "@emotion/react": "^11.10.0",
     "currency.js": "^2.0.4",
-    "date-fns": "^2.22.1"
+    "date-fns": "^2.29.1"
   },
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "03c2dd15a8e489f803bcb0aab01ec83a3cd7f277"
+  "gitHead": "7014df32d2de88a1f42259b56599d7fc10d794a9"
 }

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

@@ -1,12 +1,21 @@
 import { useTheme } from '@emotion/react';
 import React, { FC, useCallback, useEffect } from 'react';
-import { Animated, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import {
   ColorGradationType,
   ColorType,
-  ThemeProp
+  ThemeProp,
 } from '../../../types/defaults';
-import { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';
+import {
+  extractNumbersFromString,
+  lightenDarkenColor,
+  RFValueStr,
+} from '../../../utils';
 import { PressableSurface } from '../PressableSurface';
 import { transitionSwitch } from './animation';
 import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
@@ -36,19 +45,25 @@ const Switch: FC<SwitchProps> = ({
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
-  const width = React.useRef(0)
-  const transitionValue = React.useRef(new Animated.Value(0)).current
-  const animatedColor = React.useRef(new Animated.Value(0)).current
+  const width = React.useRef(0);
+  const transitionValue = React.useRef(new Animated.Value(0)).current;
+  const animatedColor = React.useRef(new Animated.Value(0)).current;
   const calculateTranslate = () => {
     if (width.current > 0) {
-      return width.current - (extractNumbersFromString(theme.spacing.micro) * 2) - (extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH)))
+      return (
+        width.current -
+        extractNumbersFromString(theme.spacing.micro) * 2 -
+        extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH))
+      );
     }
-    return 0
-  }
+    return 0;
+  };
   const getBackgroundColor = (color: string) => {
-    return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
+    return disabled
+      ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)
+      : color;
   };
   const interpolateColor = animatedColor.interpolate({
@@ -56,11 +71,11 @@ const Switch: FC<SwitchProps> = ({
     outputRange: [
       getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
       getBackgroundColor(theme.color[activeColor][activeColorTone]),
-    ]
+    ],
   });
   useEffect(() => {
-    const translate = calculateTranslate()
+    const translate = calculateTranslate();
     transitionSwitch(active, translate, transitionValue, animatedColor);
   }, [active]);
@@ -69,10 +84,10 @@ const Switch: FC<SwitchProps> = ({
   }, [active, onChange]);
   const handleSwitchLayout = (lce: LayoutChangeEvent) => {
-    width.current = lce.nativeEvent.layout.width
-    const translate = calculateTranslate()
+    width.current = lce.nativeEvent.layout.width;
+    const translate = calculateTranslate();
     transitionSwitch(active, translate, transitionValue, animatedColor);
-  }
+  };
   return (
     <PressableSurface
@@ -81,8 +96,13 @@ const Switch: FC<SwitchProps> = ({
       effect="none"
       disabled={disabled}
     >
-      <StyledSwitchContent onLayout={handleSwitchLayout} style={{ backgroundColor: interpolateColor }}>
-        <StyledSwitch style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}/>
+      <StyledSwitchContent
+        onLayout={handleSwitchLayout}
+        style={{ backgroundColor: interpolateColor }}
+      >
+        <StyledSwitch
+          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
+        />
       </StyledSwitchContent>
     </PressableSurface>
   );

package/src/components/molecules/Grid/functions.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import {
+  extractNumbersFromString,
+  GridSpacing,
+  PaddingPosition,
+  Spacing,
+} from '@tecsinapse/react-core';
+export const getGridItemPadding = (
+  pos: PaddingPosition,
+  _spacing: GridSpacing | undefined,
+  themeSpacing: Spacing
+): number | undefined => {
+  if (_spacing) {
+    if (typeof _spacing === 'string')
+      return extractNumbersFromString(themeSpacing[_spacing]);
+    else if (typeof _spacing === 'object' && _spacing[pos]) {
+      return extractNumbersFromString(themeSpacing[_spacing[pos] ?? '0']);
+    } else return undefined;
+  } else return undefined;
+};
+/**
+ * Calc the basis width percentage for a given item
+ * @param columns - number of grid columns
+ * @param span - number of columns to merge
+ * @returns {number} - value in %
+ */
+export const getGridItemColumSpan = (columns: number, span: number): number =>
+  100 / (columns / span);

package/src/components/molecules/Grid/index.ts CHANGED Viewed

@@ -1,2 +1,66 @@
-export { GridItem, IGridItem } from './Item';
-export { default as Grid, IGrid } from './Grid';
+import React from 'react';
+import { SpacingType } from '@tecsinapse/react-core';
+export interface IGrid {
+  children: JSX.Element[];
+  /** Layout should represent the multiplier of columns to fill the rows properly.
+   * Example:
+   * const layout = [
+   *   [6, 6], // Two elements on row
+   *   [4, 4, 4], // Three elements on row
+   *   [12], // One element on row
+   * ];
+   * */
+  layout?: number[][];
+  /** Number of grid columns to be considered (not the number of elements per row) */
+  columns?: number;
+  spacing?:
+    | SpacingType
+    | {
+        top?: SpacingType;
+        right?: SpacingType;
+        bottom?: SpacingType;
+        left?: SpacingType;
+      };
+}
+export type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
+export type FlexAlignBase = FlexPositioning | 'stretch';
+export type FlexAlignType = FlexAlignBase | 'baseline';
+export type FlexSpacing = 'space-between' | 'space-around';
+export type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
+export type GridSpacing =
+  | SpacingType
+  | {
+      top?: SpacingType;
+      right?: SpacingType;
+      bottom?: SpacingType;
+      left?: SpacingType;
+    };
+export interface IGridItem {
+  children: React.ReactElement;
+  /** Number of columns to fill */
+  span: number;
+  /** You don't have to give this property since is inherited from Grid */
+  columns?: number;
+  loading?: boolean;
+  /** If your GridItem has a loading state, specify the component here (Skeleton) */
+  loadingComponent?: React.ReactElement;
+  /** Flex properties below */
+  alignContent?: FlexAlignBase | FlexSpacing;
+  alignItems?: FlexAlignType;
+  alignSelf?: 'auto' | FlexAlignType;
+  flex?: number;
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  flexGrow?: number;
+  flexShrink?: number;
+  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
+  /** You don't have to give this property since is inherited from Grid */
+  spacing?: GridSpacing;
+  /** Used to wrap children in a View when its style extrapolates the dimensions*/
+  wrapper?: boolean;
+}
+export * from './functions';

package/src/components/molecules/IconTextButton/IconComponent.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import {
+  ButtonSizeType,
+  FontColor,
+  Icon,
+  IconProps,
+} from '@tecsinapse/react-core';
+import React, { FC } from 'react';
+interface IconComponentProps {
+  iconProps?: IconProps;
+  size?: ButtonSizeType;
+  defaultFontColor: keyof FontColor;
+}
+const IconComponent: FC<IconComponentProps> = ({
+  iconProps,
+  size = 'default',
+  defaultFontColor,
+}) => {
+  return iconProps ? (
+    <Icon
+      size={iconProps.size ?? size === 'small' ? 'deca' : 'kilo'}
+      fontColor={iconProps.fontColor ?? defaultFontColor}
+      {...iconProps}
+    />
+  ) : (
+    <></>
+  );
+};
+export default React.memo(IconComponent);

package/src/components/molecules/IconTextButton/IconTextButton.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { ButtonProps } from '../../atoms/Button';
+import { IconProps } from '../../atoms/Icon';
+import { TextProps } from '../../atoms/Text';
+export type IconPositionOptions = 'left' | 'right';
+export interface IconTextButtonProps extends ButtonProps {
+  iconProps?: IconProps;
+  iconPosition?: IconPositionOptions;
+  textProps?: TextProps;
+  label?: string;
+}

package/src/components/molecules/IconTextButton/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as IconComponent } from './IconComponent';
2	+ export { IconPositionOptions, IconTextButtonProps } from './IconTextButton';

package/src/components/molecules/IconTextButton/styled.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import styled, { css } from '@emotion/native';
+import { IconPositionOptions, StyleProps, Text } from '@tecsinapse/react-core';
+export const StyledText = styled(Text)<
+  Partial<StyleProps> & {
+    iconPosition: IconPositionOptions;
+    hasIcon?: boolean;
+  }
+>`
+  ${({ theme, iconPosition, hasIcon = false }) => {
+    if (hasIcon && iconPosition === 'left')
+      return css`
+        margin-left: ${theme?.spacing.mili};
+      `;
+    else if (hasIcon && iconPosition === 'right')
+      return css`
+        margin-right: ${theme?.spacing.mili};
+      `;
+  }}
+`;

package/src/components/molecules/LabeledSwitch/LabeledSwitch.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import { SwitchProps } from '../../atoms/Switch';
+export type LabelPositionOptions = 'left' | 'right';
+export interface LabeledSwitchProps extends SwitchProps {
+  label: string;
+  labelPosition?: LabelPositionOptions;
+  pressableLabel?: boolean;
+}

package/src/components/molecules/LabeledSwitch/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { LabeledSwitchProps, LabelPositionOptions } from './LabeledSwitch';

package/src/index.ts CHANGED Viewed

@@ -25,6 +25,7 @@ export {
 } from './components/atoms/GroupButton';
 export { Icon, IconProps } from './components/atoms/Icon';
 export {
+  disabledInputStyles,
   Hint,
   InputContainer,
   InputContainerProps,
@@ -39,7 +40,6 @@ export {
   useInputFocus,
   useNumberMask,
   useStringMask,
-  disabledInputStyles,
 } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export {
@@ -68,21 +68,30 @@ export {
   DateTimeSelectorMode,
   DateTimeSelectorProps,
 } from './components/molecules/DateTimeSelector';
-export { InputPasswordIcon } from './components/molecules/InputPassword';
-export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
+export * from './components/molecules/Grid';
 export {
   HintInputContainer,
   HintInputContainerProps,
 } from './components/molecules/HintInputContainer';
+export {
+  IconComponent,
+  IconPositionOptions,
+  IconTextButtonProps,
+} from './components/molecules/IconTextButton';
+export { InputPasswordIcon } from './components/molecules/InputPassword';
+export {
+  LabeledSwitchProps,
+  LabelPositionOptions,
+} from './components/molecules/LabeledSwitch';
+export { Snackbar, SnackbarProps } from './components/molecules/Snackbar';
 export {
   TextArea,
-  TextAreaProps,
   TextAreaInputBase,
+  TextAreaProps,
 } from './components/molecules/TextArea';
-export { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';
+export * from './hooks';
 export * from './styles/definitions';
 export * from './styles/light';
 export { default as ThemeProvider } from './styles/ThemeProvider';
 export * from './types/defaults';
 export * from './utils';
-export * from './hooks';

package/src/styles/definitions.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import {
   BorderRadius,
   BorderWidth,
+  Breakpoints,
   FontColor,
   FontStack,
   FontWeight,
@@ -8,7 +9,7 @@ import {
   Miscellaneous,
   Spacing,
   TypographyVariation,
-  ZIndex
+  ZIndex,
 } from '../types/defaults';
 import { RFValueStr } from '../utils';
@@ -179,3 +180,9 @@ export type IconType =
   | 'antdesign'
   | 'font-awesome-5'
   | string;
+export const breakpoints: Breakpoints = {
+  sm: 480,
+  md: 768,
+  lg: 1366,
+};