@codeleap/mobile 1.3.1 → 1.4.0

package/dist/modules/types/fileTypes.d.ts

@@ -0,0 +1,138 @@
+declare const mimeTypes: Readonly<{
+    readonly allFiles: '*/*';
+    readonly audio: 'audio/*';
+    readonly csv: 'text/csv';
+    readonly doc: 'application/msword';
+    readonly docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+    readonly images: 'image/*';
+    readonly pdf: 'application/pdf';
+    readonly plainText: 'text/plain';
+    readonly ppt: 'application/vnd.ms-powerpoint';
+    readonly pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+    readonly video: 'video/*';
+    readonly xls: 'application/vnd.ms-excel';
+    readonly xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+    readonly zip: 'application/zip';
+}>;
+declare const utis: Readonly<{
+    readonly allFiles: 'public.item';
+    readonly audio: 'public.audio';
+    readonly csv: 'public.comma-separated-values-text';
+    readonly doc: 'com.microsoft.word.doc';
+    readonly docx: 'org.openxmlformats.wordprocessingml.document';
+    readonly images: 'public.image';
+    readonly pdf: 'com.adobe.pdf';
+    readonly plainText: 'public.plain-text';
+    readonly ppt: 'com.microsoft.powerpoint.ppt';
+    readonly pptx: 'org.openxmlformats.presentationml.presentation';
+    readonly video: 'public.movie';
+    readonly xls: 'com.microsoft.excel.xls';
+    readonly xlsx: 'org.openxmlformats.spreadsheetml.sheet';
+    readonly zip: 'public.zip-archive';
+}>;
+declare const extensions: Readonly<{
+    readonly allFiles: '*';
+    readonly audio: '.3g2 .3gp .aac .adt .adts .aif .aifc .aiff .asf .au .m3u .m4a .m4b .mid .midi .mp2 .mp3 .mp4 .rmi .snd .wav .wax .wma';
+    readonly csv: '.csv';
+    readonly doc: '.doc';
+    readonly docx: '.docx';
+    readonly images: '.jpeg .jpg .png';
+    readonly pdf: '.pdf';
+    readonly plainText: '.txt';
+    readonly ppt: '.ppt';
+    readonly pptx: '.pptx';
+    readonly video: '.mp4';
+    readonly xls: '.xls';
+    readonly xlsx: '.xlsx';
+    readonly zip: '.zip .gz';
+}>;
+export declare type PlatformTypes = {
+    android: typeof mimeTypes;
+    ios: typeof utis;
+    windows: typeof extensions;
+};
+export declare type SupportedPlatforms = 'ios' | 'android' | 'windows';
+export declare const perPlatformTypes: {
+    android: Readonly<{
+        readonly allFiles: '*/*';
+        readonly audio: 'audio/*';
+        readonly csv: 'text/csv';
+        readonly doc: 'application/msword';
+        readonly docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+        readonly images: 'image/*';
+        readonly pdf: 'application/pdf';
+        readonly plainText: 'text/plain';
+        readonly ppt: 'application/vnd.ms-powerpoint';
+        readonly pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+        readonly video: 'video/*';
+        readonly xls: 'application/vnd.ms-excel';
+        readonly xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        readonly zip: 'application/zip';
+    }>;
+    ios: Readonly<{
+        readonly allFiles: 'public.item';
+        readonly audio: 'public.audio';
+        readonly csv: 'public.comma-separated-values-text';
+        readonly doc: 'com.microsoft.word.doc';
+        readonly docx: 'org.openxmlformats.wordprocessingml.document';
+        readonly images: 'public.image';
+        readonly pdf: 'com.adobe.pdf';
+        readonly plainText: 'public.plain-text';
+        readonly ppt: 'com.microsoft.powerpoint.ppt';
+        readonly pptx: 'org.openxmlformats.presentationml.presentation';
+        readonly video: 'public.movie';
+        readonly xls: 'com.microsoft.excel.xls';
+        readonly xlsx: 'org.openxmlformats.spreadsheetml.sheet';
+        readonly zip: 'public.zip-archive';
+    }>;
+    windows: Readonly<{
+        readonly allFiles: '*';
+        readonly audio: '.3g2 .3gp .aac .adt .adts .aif .aifc .aiff .asf .au .m3u .m4a .m4b .mid .midi .mp2 .mp3 .mp4 .rmi .snd .wav .wax .wma';
+        readonly csv: '.csv';
+        readonly doc: '.doc';
+        readonly docx: '.docx';
+        readonly images: '.jpeg .jpg .png';
+        readonly pdf: '.pdf';
+        readonly plainText: '.txt';
+        readonly ppt: '.ppt';
+        readonly pptx: '.pptx';
+        readonly video: '.mp4';
+        readonly xls: '.xls';
+        readonly xlsx: '.xlsx';
+        readonly zip: '.zip .gz';
+    }>;
+    macos: Readonly<{
+        readonly allFiles: '*';
+        readonly audio: '.3g2 .3gp .aac .adt .adts .aif .aifc .aiff .asf .au .m3u .m4a .m4b .mid .midi .mp2 .mp3 .mp4 .rmi .snd .wav .wax .wma';
+        readonly csv: '.csv';
+        readonly doc: '.doc';
+        readonly docx: '.docx';
+        readonly images: '.jpeg .jpg .png';
+        readonly pdf: '.pdf';
+        readonly plainText: '.txt';
+        readonly ppt: '.ppt';
+        readonly pptx: '.pptx';
+        readonly video: '.mp4';
+        readonly xls: '.xls';
+        readonly xlsx: '.xlsx';
+        readonly zip: '.zip .gz';
+    }>;
+    web: Readonly<{
+        readonly allFiles: '*';
+        readonly audio: '.3g2 .3gp .aac .adt .adts .aif .aifc .aiff .asf .au .m3u .m4a .m4b .mid .midi .mp2 .mp3 .mp4 .rmi .snd .wav .wax .wma';
+        readonly csv: '.csv';
+        readonly doc: '.doc';
+        readonly docx: '.docx';
+        readonly images: '.jpeg .jpg .png';
+        readonly pdf: '.pdf';
+        readonly plainText: '.txt';
+        readonly ppt: '.ppt';
+        readonly pptx: '.pptx';
+        readonly video: '.mp4';
+        readonly xls: '.xls';
+        readonly xlsx: '.xlsx';
+        readonly zip: '.zip .gz';
+    }>;
+};
+export declare const typesAreEqual: true;
+export {};

package/dist/modules/types/fileTypes.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=fileTypes.js.map

package/dist/modules/types/fileTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileTypes.js","sourceRoot":"","sources":["../../../src/modules/types/fileTypes.ts"],"names":[],"mappings":""}

package/dist/types/utility.d.ts

@@ -1,2 +1,2 @@
-import { StyleProp } from "react-native";
+import { StyleProp } from 'react-native';
 export declare type StylesOf<C extends string> = Partial<Record<C, StyleProp<any>>>;

package/dist/utils/OSAlert.d.ts

@@ -19,9 +19,9 @@ declare type OSAlertArgs = {
 declare type AlertEvent = AlertButton['onPress'];
 declare type NamedEvents<E extends string> = Partial<Record<E, AlertEvent>>;
 declare function ask({ title, body, options }: OSAlertArgs): void;
-declare function warn({ title, body, onAccept, onReject }: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>): void;
-declare function info({ title, body, onDismiss }: OSAlertArgs & NamedEvents<'onDismiss'>): void;
-declare function OSError({ title, body, onDismiss }: OSAlertArgs & NamedEvents<'onDismiss'>): void;
+declare function warn({ title, body, onAccept, onReject, }: OSAlertArgs & NamedEvents<'onReject' | 'onAccept'>): void;
+declare function info({ title, body, onDismiss, }: OSAlertArgs & NamedEvents<'onDismiss'>): void;
+declare function OSError({ title, body, onDismiss, }: OSAlertArgs & NamedEvents<'onDismiss'>): void;
 declare const _default: {
     ask: typeof ask;
     warn: typeof warn;

package/dist/utils/OSAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"OSAlert.js","sourceRoot":"","sources":["../../src/utils/OSAlert.ts"],"names":[],"mappings":";;AAAA,yCAAyC;AACzC,6CAAiD;AA0BjD,SAAS,GAAG,CAAC,EAA2C;QAAzC,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA;IAExC,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,eAAe,CAAA;KACxB;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,SAAA;KACR,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,IAAI,CAAC,EAAoF;QAAlF,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAE7C,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,SAAS,CAAA;KAClB;IACD,IAAI,CAAC,IAAI,EAAE;QACT,IAAI,GAAG,eAAe,CAAA;KACvB;IACD,IAAI,CAAC,QAAQ,EAAE;QACb,QAAQ,GAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAA;KACtB;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAC,QAAQ;aACjB;YACD;gBACE,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,aAAa;gBACpB,OAAO,EAAE,QAAQ;aAClB;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,IAAI,CAAC,EAA8E;QAA5E,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,iBAAsB,EAAtB,SAAS,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA;IAEjD,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,KAAK,CAAA;KACd;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI;gBACV,OAAO,EAAC,SAAS;aAClB;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,EAA8E;QAA5E,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,iBAAsB,EAAtB,SAAS,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA;IACpD,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,SAAS,CAAA;KAClB;IACD,IAAI,CAAC,IAAI,EAAE;QACT,IAAI,GAAG,sBAAsB,CAAA;KAC9B;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI;gBACV,OAAO,EAAE,cAAM,OAAA,SAAS,EAAE,EAAX,CAAW;aAC3B;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,MAAkB;IACjC,oBAAK,CAAC,KAAK,CACT,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,OAAO,EACd;QACE,UAAU,EAAE,KAAK;KAClB,CACF,CAAA;AACH,CAAC;AAGD,kBAAe;IACX,GAAG,KAAA;IACH,IAAI,MAAA;IACJ,IAAI,MAAA;IACJ,KAAK,EAAE,OAAO;CACf,CAAA"}
+{"version":3,"file":"OSAlert.js","sourceRoot":"","sources":["../../src/utils/OSAlert.ts"],"names":[],"mappings":";;AAAA,yCAAyC;AACzC,6CAAiD;AAyBjD,SAAS,GAAG,CAAC,EAA4C;QAA1C,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA;IACxC,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,eAAe,CAAA;KACxB;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,SAAA;KACR,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,IAAI,CAAC,EAKuC;QAJnD,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA;IAER,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,SAAS,CAAA;KAClB;IACD,IAAI,CAAC,IAAI,EAAE;QACT,IAAI,GAAG,eAAe,CAAA;KACvB;IACD,IAAI,CAAC,QAAQ,EAAE;QACb,QAAQ,GAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAA;KACtB;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,QAAQ;aAClB;YACD;gBACE,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,aAAa;gBACpB,OAAO,EAAE,QAAQ;aAClB;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,IAAI,CAAC,EAI2B;QAHvC,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,iBAAsB,EAAtB,SAAS,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA;IAEtB,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,KAAK,CAAA;KACd;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI;gBACV,OAAO,EAAE,SAAS;aACnB;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,EAIwB;QAHvC,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,iBAAsB,EAAtB,SAAS,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA;IAEtB,IAAI,CAAC,KAAK,EAAE;QACV,KAAK,GAAG,SAAS,CAAA;KAClB;IACD,IAAI,CAAC,IAAI,EAAE;QACT,IAAI,GAAG,sBAAsB,CAAA;KAC9B;IACD,OAAO,CAAC;QACN,KAAK,OAAA;QACL,IAAI,MAAA;QACJ,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI;gBACV,OAAO,EAAE,cAAM,OAAA,SAAS,EAAE,EAAX,CAAW;aAC3B;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,OAAO,CAAC,MAAmB;IAClC,oBAAK,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,EAAE;QACrD,UAAU,EAAE,KAAK;KAClB,CAAC,CAAA;AACJ,CAAC;AAED,kBAAe;IACb,GAAG,KAAA;IACH,IAAI,MAAA;IACJ,IAAI,MAAA;IACJ,KAAK,EAAE,OAAO;CACf,CAAA"}

package/dist/utils/misc.d.ts

@@ -0,0 +1,2 @@
+import { MobileInputFile } from '@codeleap/common';
+export declare const stringToFile: (str: string) => MobileInputFile;

package/dist/utils/misc.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringToFile = void 0;
+var common_1 = require("@codeleap/common");
+var stringToFile = function (str) {
+    if (!str) {
+        return {
+            file: null,
+            preview: null,
+        };
+    }
+    var fileData = (0, common_1.parseFilePathData)(str);
+    var data = {
+        name: fileData.name,
+        type: 'image/' + fileData.extension,
+        size: 1000,
+        uri: str,
+        fileCopyUri: str,
+    };
+    return {
+        file: data,
+        preview: data.uri,
+    };
+};
+exports.stringToFile = stringToFile;
+//# sourceMappingURL=misc.js.map

package/dist/utils/misc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"misc.js","sourceRoot":"","sources":["../../src/utils/misc.ts"],"names":[],"mappings":";;;AAAA,2CAAqE;AAE9D,IAAM,YAAY,GAAG,UAAC,GAAW;IACtC,IAAI,CAAC,GAAG,EAAE;QACR,OAAO;YACL,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,IAAI;SACd,CAAA;KACF;IACD,IAAM,QAAQ,GAAG,IAAA,0BAAiB,EAAC,GAAG,CAAC,CAAA;IAEvC,IAAM,IAAI,GAA4B;QACpC,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC,SAAS;QACnC,IAAI,EAAE,IAAI;QACV,GAAG,EAAE,GAAG;QACR,WAAW,EAAE,GAAG;KACjB,CAAA;IAED,OAAO;QACL,IAAI,EAAE,IAAI;QACV,OAAO,EAAE,IAAI,CAAC,GAAG;KAClB,CAAA;AACH,CAAC,CAAA;AArBY,QAAA,YAAY,gBAqBxB"}

package/dist/utils/styles.js

@@ -4,7 +4,7 @@ exports.useLogStyles = void 0;
 var common_1 = require("@codeleap/common");
 var react_native_1 = require("react-native");
 function useLogStyles() {
-    var logger = (0, common_1.useStyle)().logger;
+    var logger = (0, common_1.useCodeleapContext)().logger;
     return function (name, styles) {
         logger.debug.blue(name, JSON.stringify(react_native_1.StyleSheet.flatten(styles), null, 2), 'Component Styles');
     };

package/dist/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":";;;AAAA,2CAA4C;AAC5C,6CAA0C;AAE1C,SAAgB,YAAY;IAEjB,IAAA,MAAM,GAAI,IAAA,iBAAQ,GAAE,OAAd,CAAc;IAG3B,OAAO,UAAC,IAAI,EAAC,MAAM;QACf,MAAM,CAAC,KAAK,CAAC,IAAI,CACb,IAAI,EACJ,IAAI,CAAC,SAAS,CAAC,yBAAU,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EACnD,kBAAkB,CACrB,CAAA;IACL,CAAC,CAAA;AAEL,CAAC;AAbD,oCAaC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":";;;AAAA,2CAAqD;AACrD,6CAAyC;AAEzC,SAAgB,YAAY;IAClB,IAAA,MAAM,GAAK,IAAA,2BAAkB,GAAE,OAAzB,CAAyB;IAEvC,OAAO,UAAC,IAAI,EAAE,MAAM;QAClB,MAAM,CAAC,KAAK,CAAC,IAAI,CACf,IAAI,EACJ,IAAI,CAAC,SAAS,CAAC,yBAAU,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EACnD,kBAAkB,CACnB,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAVD,oCAUC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "main": "src/index.ts",
   "repository": "git@github.com:codeleap-uk/codeleap-lib.git",
   "author": "Paulo Henrique De Souza <paulosouza300272@gmail.com>",
@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build": "tsc --build",
-    "lint": "./node_modules/.bin/eslint -c .eslintrc.js \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
     "publish": "npm publish"
   },
   "peerDependencies": {
@@ -22,9 +22,12 @@
     "@react-navigation/drawer": "^6.1.8",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",
+    "@react-navigation/stack": "^6.1.1",
     "react": "*",
     "react-native": "*",
-    "react-native-fast-image": "^8.5.11"
+    "react-native-fast-image": "^8.5.11",
+    "react-native-gesture-handler": "^2.2.0",
+    "react-native-image-crop-picker": "*"
   },
   "dependencies": {
     "@miblanchard/react-native-slider": "^2.1.0",

package/src/components/ActivityIndicator.tsx

@@ -1,37 +1,47 @@
 import * as React from 'react'
 import { ComponentPropsWithoutRef, forwardRef } from 'react'
 import { ActivityIndicator as Indicator, StyleSheet } from 'react-native'
-import { ActivityIndicatorComposition, ActivityIndicatorStyles,
-  useComponentStyle, ComponentVariants, useStyle } from '@codeleap/common'
+import {
+  ActivityIndicatorComposition,
+  ActivityIndicatorStyles,
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCodeleapContext,
+} from '@codeleap/common'
 import { StylesOf } from '../types/utility'
 
-export type ActivityIndicatorProps =
-  ComponentPropsWithoutRef<typeof Indicator> & 
-  {
-    variants?: ComponentVariants <typeof ActivityIndicatorStyles>['variants'],
-    styles?: StylesOf<ActivityIndicatorComposition>
-  }
+export type ActivityIndicatorProps = ComponentPropsWithoutRef<
+  typeof Indicator
+> & {
+  variants?: ComponentVariants<typeof ActivityIndicatorStyles>['variants'];
+  styles?: StylesOf<ActivityIndicatorComposition>;
+};
 
-export const ActivityIndicator =
-  forwardRef<Indicator, ActivityIndicatorProps>((activityIndicatorProps, ref) => {
+export const ActivityIndicator = forwardRef<Indicator, ActivityIndicatorProps>(
+  (activityIndicatorProps, ref) => {
+    const { variants = [], style, styles: propStyles, ...props } = activityIndicatorProps
 
-  const { 
-    variants = [], 
-    style,
-    ...props
-  } = activityIndicatorProps
+    const variantStyles = useDefaultComponentStyle('ActivityIndicator', {
+      variants,
+      transform: StyleSheet.flatten,
+      styles: propStyles,
+    })
 
-  const variantStyles = useComponentStyle('ActivityIndicator', {
-    variants
-  })
+    const { Theme } = useCodeleapContext()
 
-  const { Theme } = useStyle()
-
-  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
-  const color = styles?.color || Theme.colors.gray
-  const size = styles?.height || styles?.width || 'large'
-  return (  
-    <Indicator size={size} ref={ref} color={color} style={styles} {...props} />
-  )
-
-})
+    const color = variantStyles.wrapper?.color || Theme.colors.gray
+    const size = variantStyles.wrapper?.height || variantStyles.wrapper?.width || 'large'
+    
+    const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+    
+    return (
+      <Indicator
+        size={size}
+        ref={ref}
+        color={color}
+        style={styles}
+        {...props}
+      />
+    )
+  },
+)

package/src/components/Animated.tsx

@@ -2,30 +2,33 @@ import { onUpdate } from '@codeleap/common'
 import React, { useRef } from 'react'
 
 import posed from 'react-native-pose'
-import {Touchable} from './Touchable'
-import {View} from './View'
+import { Touchable } from './Touchable'
+import { View } from './View'
 const Components = {
-    Touchable,
-    View
+  Touchable,
+  View,
 }
 
+const PosedComponents = Object.fromEntries(
+  Object.entries(Components).map(([key, Render]) => [key, posed(Render)]),
+)
 
-const PosedComponents = Object.fromEntries(Object.entries(Components).map(([key,Render]) => [key, posed(Render)]))
+type AnimatedComponents = typeof Components;
+type CP = keyof AnimatedComponents;
 
-type AnimatedComponents = typeof Components
-type CP = keyof AnimatedComponents
+type AnimatedProps<T extends CP, CFG = Record<string, any>> = {
+  component: T;
+  config: CFG;
+  pose: keyof CFG;
+  initialPose?: keyof CFG;
+} & Omit<Parameters<AnimatedComponents[T]>[0], 'component'>;
 
-type AnimatedProps<T extends CP, CFG = Record<string,any>>  = {
-    component: T
-    config: CFG
-    pose: keyof CFG
-    initialPose?: keyof CFG
-} & Omit<Parameters<AnimatedComponents[T]>[0],'component'>
+export const Animated = <T extends CP, CFG = any>({
+  config,
+  component,
+  ...props
+}: AnimatedProps<T, CFG>) => {
+  const Component = useRef(PosedComponents[component](config)).current
 
-export const Animated = <T extends CP, CFG = any>({config,component, ...props}:AnimatedProps<T, CFG>) => {
-
-    const Component = useRef(PosedComponents[component](config)).current
-
-    return <Component {...props} />
+  return <Component withParent={false} {...props} />
 }
-

package/src/components/Button.tsx

@@ -1,62 +1,95 @@
 import * as React from 'react'
-import { useComponentStyle, ButtonStyles, ComponentVariants, ButtonComposition } from '@codeleap/common';
-import {  forwardRef } from 'react'
-import { StylesOf } from '../types/utility'; 
-import { Text } from './Text';
-import { Touchable, TouchableProps } from './Touchable';
-import { Icon } from './Icon';
-import { ActivityIndicator } from './ActivityIndicator';
-import { IconPlaceholder } from '@codeleap/common';
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import {
+  useDefaultComponentStyle,
+  ButtonStyles,
+  ComponentVariants,
+  ButtonComposition,
+  ButtonParts,
+  IconPlaceholder,
+} from '@codeleap/common'
+import { forwardRef } from 'react'
+import { StylesOf } from '../types/utility'
+import { Text } from './Text'
+import { Touchable, TouchableProps } from './Touchable'
+import { Icon } from './Icon'
+import { ActivityIndicator } from './ActivityIndicator'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 
 
+export type ButtonProps = Omit<TouchableProps, 'variants'> &
+  ComponentVariants<typeof ButtonStyles> & {
+    text?: string;
+    rightIcon?: IconPlaceholder;
+    icon?: IconPlaceholder;
+    styles?: StylesOf<ButtonComposition>; 
+    loading?: boolean;
+    debounce?: number
+    debugName?: string; // NOTE this should not be optional
+  };
 
-
-export type ButtonProps = Omit<TouchableProps,'variants'> & ComponentVariants<typeof ButtonStyles>  & {  
-  text?:string
-  rightIcon?: IconPlaceholder
-  icon?: IconPlaceholder
-  styles?: StylesOf<ButtonComposition>
-  loading?: boolean
-} 
-
-export const Button = forwardRef<TouchableOpacity, ButtonProps>( (buttonProps,ref) => {
-  const { 
+export const Button = forwardRef<TouchableOpacity, ButtonProps>((buttonProps, ref) => {
+  const {
     variants = [],
-    responsiveVariants = {},
     children,
     icon,
     text,
     loading,
     styles = {},
     onPress,
+    disabled,
     rightIcon,
-    ...props 
+    debounce = 600,
+    ...props
   } = buttonProps
-  
-  
-  const variantStyles = useComponentStyle('Button', {
+  const [pressed, setPressed] = React.useState(false)
+
+
+  const variantStyles = useDefaultComponentStyle('Button', {
     variants,
-  })  
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  function handlePress() {
+    if (!pressed){
+      setPressed(true) 
 
+      setTimeout(() => setPressed(false), debounce)
+      
+      onPress && onPress()
+    }
+  }
 
-  function handlePress(e:Parameters<ButtonProps['onPress']>[0]){
-    onPress && onPress(e)
+  function getStyles(key: ButtonParts) {
+    return [
+      variantStyles[key],
+      disabled && variantStyles[key + ':disabled'],
+      styles[key],
+      disabled && styles[key + ':disabled'],
+    ]
   }
 
- 
+  const iconStyle = getStyles('icon')
+
+  const leftIconStyle = StyleSheet.flatten([iconStyle, getStyles('leftIcon')])
+  const rightIconStyle = StyleSheet.flatten([iconStyle, getStyles('rightIcon')])
+  
+  const hasText = !!(text || children)
   return (
     <Touchable
-      style={[variantStyles.wrapper, styles.wrapper]}
+      style={getStyles('wrapper')}
       onPress={handlePress}
       ref={ref}
+      disabled={disabled}
+      debugComponent={'Button'}
       {...props}
     >
-      {loading && <ActivityIndicator style={[variantStyles.loader, styles.loader]} />}
-      {!loading && <Icon name={icon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.leftIcon, styles.leftIcon])}/>}
-      {text ? <Text text={text} style={[variantStyles.text, styles.text]}/> : null}
+     
+      {loading && <ActivityIndicator style={getStyles('loader')} />}
+      {!loading && <Icon name={icon} style={leftIconStyle} renderEmptySpace={hasText}/>}
+      {text ? <Text text={text} style={getStyles('text')} /> : null}
       {children}
-      <Icon name={rightIcon} style={StyleSheet.flatten([variantStyles.icon, styles.icon, variantStyles.rightIcon, styles.rightIcon])}/>
+      <Icon name={rightIcon} style={rightIconStyle} renderEmptySpace={hasText} />
     </Touchable>
   )
 })

package/src/components/Checkbox/index.tsx

@@ -1,68 +1,80 @@
 import * as React from 'react'
-import {  ComponentVariants, useComponentStyle, StylesOf,  Form, useValidate } from '@codeleap/common'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  Form,
+  useValidate,
+} from '@codeleap/common'
 import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
 import { Switch as NativeCheckbox } from 'react-native'
 import { InputLabel, FormError } from '../TextInput'
 import { View } from '../View'
 import { Touchable } from '../Touchable'
 import {
-   MobileCheckboxStyles as CheckboxStyles, MobileCheckboxComposition as CheckboxComposition
-} from './styles' 
+  MobileCheckboxStyles as CheckboxStyles,
+  MobileCheckboxComposition as CheckboxComposition,
+} from './styles'
 export * from './styles'
 
 type NativeCheckboxProps = Omit<
-    ComponentPropsWithRef<typeof NativeCheckbox>, 
-    'thumbColor'|'trackColor'
->
+  ComponentPropsWithRef<typeof NativeCheckbox>,
+  'thumbColor' | 'trackColor'
+>;
 type CheckboxProps = NativeCheckboxProps & {
-    variants?: ComponentVariants<typeof CheckboxStyles>['variants']
-    label?: ReactNode
-    styles?: StylesOf<CheckboxComposition>
-    validate?: Form.ValidatorFunction | string
-} 
+  variants?: ComponentVariants<typeof CheckboxStyles>['variants'];
+  label?: ReactNode;
+  styles?: StylesOf<CheckboxComposition>;
+  validate?: Form.ValidatorFunctionWithoutForm | string;
+};
 
-export const Checkbox = forwardRef<NativeCheckbox,CheckboxProps>((checkboxProps,ref) => {
-    const  {
-        variants = [],
-        style = {},
-        styles = {},
-        label,
-        value,
-        onValueChange,
-        validate,
-        ...props
+export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
+  (checkboxProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      label,
+      value,
+      onValueChange,
+      validate,
+      ...props
     } = checkboxProps
-   
-    const variantStyles = useComponentStyle('Checkbox', {
-        // @ts-ignore
-        variants,
-    })
 
-    const {error, showError} = useValidate(value,validate)
+    const variantStyles = useDefaultComponentStyle('Checkbox', {
+      // @ts-ignore
+      variants,
+    })
 
+    const { error, showError } = useValidate(value, validate)
 
-    function getStyles(key:CheckboxComposition){
-        return [
-            variantStyles[key],
-            variantStyles[key],
-            key === 'wrapper' ? style : {},
-            value ? variantStyles[key + ':checked'] : {},
-            value ? styles[key + ':checked'] : {},
-            showError ? variantStyles[key + ':error'] : {},
-            showError ? styles[key + ':error'] : {},
-            checkboxProps.disabled ? variantStyles[key + ':disabled'] : {},
-            checkboxProps.disabled ? styles[key + ':disabled'] : {},
-        ]
+    function getStyles(key: CheckboxComposition) {
+      return [
+        variantStyles[key],
+        variantStyles[key],
+        key === 'wrapper' ? style : {},
+        value ? variantStyles[key + ':checked'] : {},
+        value ? styles[key + ':checked'] : {},
+        showError ? variantStyles[key + ':error'] : {},
+        showError ? styles[key + ':error'] : {},
+        checkboxProps.disabled ? variantStyles[key + ':disabled'] : {},
+        checkboxProps.disabled ? styles[key + ':disabled'] : {},
+      ]
     }
 
-    return <View style={getStyles('wrapper')} {...props}>
-        <Touchable style={getStyles('input')}  onPress={() => onValueChange(!value)}>
-            <View style={getStyles('checkmarkWrapper')}>
-                <View style={getStyles('checkmark')}/>
-            </View>
-            <InputLabel label={label} style={getStyles('label')}/>
-
+    return (
+      <View style={getStyles('wrapper')} {...props}>
+        <Touchable
+          style={getStyles('input')}
+          onPress={() => onValueChange(!value)}
+        >
+          <View style={getStyles('checkmarkWrapper')}>
+            <View style={getStyles('checkmark')} />
+          </View>
+          <InputLabel label={label} style={getStyles('label')} />
         </Touchable>
         <FormError message={error.message} style={getStyles('error')} />
-    </View>
-})
+      </View>
+    )
+  },
+)