@codeleap/mobile 1.9.33 → 2.0.0

package/dist/components/{TextInput.js → TextInput/index.js}

@@ -33,6 +33,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -45,26 +48,31 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputLabel = exports.InputIcon = exports.FormError = exports.TextInput = void 0;
+exports.InputIcon = exports.FormError = exports.TextInput = exports.InputLabel = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@codeleap/common");
 var react_1 = require("react");
-var Text_1 = require("./Text");
-var View_1 = require("./View");
-var Icon_1 = require("./Icon");
+var Text_1 = require("../Text");
+var View_1 = require("../View");
 var react_native_1 = require("react-native");
-var Touchable_1 = require("./Touchable");
-var textInputMask_1 = require("../modules/textInputMask");
+var Touchable_1 = require("../Touchable");
+var textInputMask_1 = require("../../modules/textInputMask");
+var Label_1 = require("./Label");
+var Label_2 = require("./Label");
+Object.defineProperty(exports, "InputLabel", { enumerable: true, get: function () { return Label_2.InputLabel; } });
+__exportStar(require("./styles"), exports);
+var ActionIcon_1 = require("../ActionIcon");
 exports.TextInput = (0, react_1.forwardRef)(function (rawprops, inputRef) {
     var _a, _b;
-    var onChange = rawprops.onChange, type = rawprops.type, value = rawprops.value, onChangeText = rawprops.onChangeText, disabled = rawprops.disabled, edited = rawprops.edited, onFocus = rawprops.onFocus, onBlur = rawprops.onBlur, variants = rawprops.variants, label = rawprops.label, wrapperProps = rawprops.wrapperProps, leftIcon = rawprops.leftIcon, rightIcon = rawprops.rightIcon, styles = rawprops.styles, validate = rawprops.validate, password = rawprops.password, visibilityToggle = rawprops.visibilityToggle, touchableWrapper = rawprops.touchableWrapper, innerWrapperProps = rawprops.innerWrapperProps, _c = rawprops.masking, masking = _c === void 0 ? null : _c, onChangeMask = rawprops.onChangeMask, debugName = rawprops.debugName, _d = rawprops.required, required = _d === void 0 ? false : _d, props = __rest(rawprops, ["onChange", "type", "value", "onChangeText", "disabled", "edited", "onFocus", "onBlur", "variants", "label", "wrapperProps", "leftIcon", "rightIcon", "styles", "validate", "password", "visibilityToggle", "touchableWrapper", "innerWrapperProps", "masking", "onChangeMask", "debugName", "required"]);
+    var onChange = rawprops.onChange, value = rawprops.value, onChangeText = rawprops.onChangeText, disabled = rawprops.disabled, edited = rawprops.edited, onFocus = rawprops.onFocus, onBlur = rawprops.onBlur, variants = rawprops.variants, label = rawprops.label, wrapperProps = rawprops.wrapperProps, leftIcon = rawprops.leftIcon, rightIcon = rawprops.rightIcon, styles = rawprops.styles, validate = rawprops.validate, password = rawprops.password, visibilityToggle = rawprops.visibilityToggle, innerWrapperProps = rawprops.innerWrapperProps, _c = rawprops.masking, masking = _c === void 0 ? null : _c, onChangeMask = rawprops.onChangeMask, debugName = rawprops.debugName, _d = rawprops.required, required = _d === void 0 ? false : _d, props = __rest(rawprops, ["onChange", "value", "onChangeText", "disabled", "edited", "onFocus", "onBlur", "variants", "label", "wrapperProps", "leftIcon", "rightIcon", "styles", "validate", "password", "visibilityToggle", "innerWrapperProps", "masking", "onChangeMask", "debugName", "required"]);
     var _e = (0, react_1.useState)(false), isFocused = _e[0], setFocus = _e[1];
     var _f = (0, react_1.useState)(edited), editedState = _f[0], setEdited = _f[1];
     var input = (0, react_1.useRef)(null);
     var _g = (0, common_1.useBooleanToggle)(false), textIsVisible = _g[0], setTextVisible = _g[1];
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('TextInput', {
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:TextInput', {
         variants: variants,
         styles: styles,
+        transform: react_native_1.StyleSheet.flatten,
     });
     var InputElement = masking ? textInputMask_1.MaskedTextInput : react_native_1.TextInput;
     var handleBlur = function (e) {
@@ -99,9 +107,9 @@ exports.TextInput = (0, react_1.forwardRef)(function (rawprops, inputRef) {
             (_b = (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
         }, isTextInput: true })); });
     var _h = (0, common_1.useValidate)(value, validate), showError = _h.showError, error = _h.error;
-    var leftIconStyle = __assign(__assign(__assign(__assign(__assign(__assign({}, variantStyles.icon), (isFocused ? variantStyles['icon:focus'] : {})), (showError ? variantStyles['icon:error'] : {})), variantStyles.leftIcon), (isFocused ? variantStyles['leftIcon:focus'] : {})), (showError ? variantStyles['leftIcon:error'] : {}));
-    var rightIconStyle = __assign(__assign(__assign(__assign(__assign(__assign({}, variantStyles.icon), (isFocused ? variantStyles['icon:focus'] : {})), (showError ? variantStyles['icon:error'] : {})), variantStyles.rightIcon), (isFocused ? variantStyles['rightIcon:focus'] : {})), (showError ? variantStyles['rightIcon:error'] : {}));
-    var buttonIconWrapperStyle = __assign(__assign(__assign({}, variantStyles.buttonIconWrapper), (isFocused ? variantStyles['buttonIconWrapper:focus'] : {})), (showError ? variantStyles['buttonIconWrapper:error'] : {}));
+    var commonIconStyles = (0, common_1.getNestedStylesByKey)('icon', variantStyles);
+    var leftIconStyles = (0, common_1.getNestedStylesByKey)('leftIcon', variantStyles);
+    var rightIconStyles = (0, common_1.getNestedStylesByKey)('rightIcon', variantStyles);
     function getStyles(key) {
         var requestedStyles = [
             variantStyles[key],
@@ -119,18 +127,21 @@ exports.TextInput = (0, react_1.forwardRef)(function (rawprops, inputRef) {
             (_b = (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
     }
-    return (<Touchable_1.Touchable style={getStyles('wrapper')} debugName={debugName} onPress={handlePress} {...wrapperProps}>
-      <exports.InputLabel label={label} style={getStyles('label')} asteriskStyle={getStyles('requiredAsterisk')} wrapperStyle={getStyles('labelWrapper')} required={required}/>
+    var visibilityToggleProps = visibilityToggle ? {
+        onPress: function () { return setTextVisible(); },
+        icon: (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden'),
+        debugName: "".concat(debugName, " toggle visibility"),
+    } : {};
+    return (<Touchable_1.Touchable style={getStyles('wrapper')} debugName={debugName} onPress={handlePress} {...wrapperProps} android_ripple={null}>
+      <Label_1.InputLabel label={label} style={getStyles('label')} asteriskStyle={getStyles('requiredAsterisk')} wrapperStyle={getStyles('labelWrapper')} required={required}/>
       <View_1.View style={getStyles('innerWrapper')} {...innerWrapperProps}>
-        <exports.InputIcon {...leftIcon} style={leftIconStyle} wrapperStyle={buttonIconWrapperStyle}/>
+        <exports.InputIcon isFocused={isFocused} showError={showError} styles={leftIconStyles} commonStyles={commonIconStyles} debugName={"".concat(debugName, " left icon")} {...leftIcon}/>
         {/* @ts-ignore */}
         <InputElement ref={input} secureTextEntry={password && !textIsVisible} onChange={function (e) { return masking ? onChange === null || onChange === void 0 ? void 0 : onChange(e) : handleChange(e); }} value={value} editable={disabled} onFocus={handleFocus} onBlur={handleBlur} placeholderTextColor={(_a = react_native_1.StyleSheet.flatten(getStyles('placeholder'))) === null || _a === void 0 ? void 0 : _a.color} selectionColor={(_b = react_native_1.StyleSheet.flatten(getStyles('selection'))) === null || _b === void 0 ? void 0 : _b.color} includeRawValueInChangeText={true} {...props} {...(masking ? { onChangeText: handleMaskChange, type: masking === null || masking === void 0 ? void 0 : masking.type, refInput: function (inputRef) {
             input.current = inputRef;
         } } : {})} style={getStyles('textField')}/>
-        {visibilityToggle ?
-            <exports.InputIcon name={(textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden')} action={function () { return setTextVisible(); }} style={rightIconStyle} wrapperStyle={buttonIconWrapperStyle}/>
-            :
-                <exports.InputIcon {...rightIcon} style={rightIconStyle} wrapperStyle={buttonIconWrapperStyle}/>}
+        <exports.InputIcon isFocused={isFocused} showError={showError} styles={rightIconStyles} commonStyles={commonIconStyles} debugName={"".concat(debugName, " right icon")} {...rightIcon} {...visibilityToggleProps}/>
+
       </View_1.View>
       <exports.FormError message={error.message} style={getStyles('error')}/>
     </Touchable_1.Touchable>);
@@ -145,37 +156,29 @@ var FormError = function (_a) {
 };
 exports.FormError = FormError;
 var InputIcon = function (_a) {
-    var name = _a.name, style = _a.style, action = _a.action, _b = _a.wrapperStyle, wrapperStyle = _b === void 0 ? {} : _b;
-    if (!name)
+    var styles = _a.styles, commonStyles = _a.commonStyles, isFocused = _a.isFocused, showError = _a.showError, props = __rest(_a, ["styles", "commonStyles", "isFocused", "showError"]);
+    if (!props.icon)
         return null;
-    if (action) {
-        return <Touchable_1.Touchable debugName={"".concat(name, " icon button")} onPress={function () { return action(); }} style={wrapperStyle}>
-      <Icon_1.Icon name={name} style={style}/>
-    </Touchable_1.Touchable>;
+    function getStyles(key) {
+        if (key === 'icon')
+            key = '';
+        var requestedStyles = [
+            commonStyles[key],
+            isFocused ? commonStyles[key + ':focus'] : {},
+            showError ? commonStyles[key + ':error'] : {},
+            styles[key],
+            isFocused ? styles[key + ':focus'] : {},
+            showError ? styles[key + ':error'] : {},
+        ];
+        return react_native_1.StyleSheet.flatten(requestedStyles);
     }
-    return <Icon_1.Icon name={name} style={style}/>;
+    var iconStyles = {
+        icon: getStyles('icon'),
+        touchablePressable: getStyles('touchablePressable'),
+        touchableWrapper: getStyles('touchableWrapper'),
+        touchableRipple: getStyles('touchableRipple'),
+    };
+    return <ActionIcon_1.ActionIcon styles={iconStyles} {...props}/>;
 };
 exports.InputIcon = InputIcon;
-var InputLabel = function (_a) {
-    var label = _a.label, _b = _a.variants, variants = _b === void 0 ? [] : _b, _c = _a.styles, styles = _c === void 0 ? {} : _c, style = _a.style, _d = _a.asteriskStyle, asteriskStyle = _d === void 0 ? null : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.wrapperStyle, wrapperStyle = _f === void 0 ? null : _f;
-    var labelStyles = (0, common_1.useDefaultComponentStyle)('TextInput', {
-        variants: variants,
-        styles: styles,
-        transform: react_native_1.StyleSheet.flatten,
-    });
-    if (!label)
-        return null;
-    switch (typeof label) {
-        case 'string':
-            return <View_1.View style={wrapperStyle || labelStyles.labelWrapper}>
-        <Text_1.Text style={style || labelStyles.label} text={label}/>
-        {required && <Text_1.Text style={asteriskStyle || labelStyles.requiredAsterisk} text={' *'}/>}
-      </View_1.View>;
-        case 'object':
-            return label;
-        default:
-            return null;
-    }
-};
-exports.InputLabel = InputLabel;
-//# sourceMappingURL=TextInput.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/TextInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TextInput/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,2CASyB;AACzB,+BAAmG;AACnG,gCAA8B;AAC9B,gCAAyC;AAGzC,6CAAuH;AACvH,0CAAwD;AACxD,6DAAiF;AACjF,iCAAoC;AAEpC,iCAAoC;AAA3B,mGAAA,UAAU,OAAA;AAEnB,2CAAwB;AAOxB,4CAA4E;AAkC/D,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAkC,UAAC,QAAQ,EAAE,QAAQ;;IAEpF,IAAA,QAAQ,GAsBN,QAAQ,SAtBF,EACR,KAAK,GAqBH,QAAQ,MArBL,EACL,YAAY,GAoBV,QAAQ,aApBE,EACZ,QAAQ,GAmBN,QAAQ,SAnBF,EACR,MAAM,GAkBJ,QAAQ,OAlBJ,EACN,OAAO,GAiBL,QAAQ,QAjBH,EACP,MAAM,GAgBJ,QAAQ,OAhBJ,EACN,QAAQ,GAeN,QAAQ,SAfF,EACR,KAAK,GAcH,QAAQ,MAdL,EACL,YAAY,GAaV,QAAQ,aAbE,EACZ,QAAQ,GAYN,QAAQ,SAZF,EACR,SAAS,GAWP,QAAQ,UAXD,EACT,MAAM,GAUJ,QAAQ,OAVJ,EACN,QAAQ,GASN,QAAQ,SATF,EACR,QAAQ,GAQN,QAAQ,SARF,EACR,gBAAgB,GAOd,QAAQ,iBAPM,EAChB,iBAAiB,GAMf,QAAQ,kBANO,EACjB,KAKE,QAAQ,QALI,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,YAAY,GAIV,QAAQ,aAJE,EACZ,SAAS,GAGP,QAAQ,UAHD,EACT,KAEE,QAAQ,SAFM,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EACb,KAAK,UACN,QAAQ,EAvBN,6QAuBL,CADS,CACE;IAEN,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,SAAS,QAAA,EAAE,QAAQ,QAAmB,CAAA;IACvC,IAAA,KAA2B,IAAA,gBAAQ,EAAC,MAAM,CAAC,EAA1C,WAAW,QAAA,EAAE,SAAS,QAAoB,CAAA;IAEjD,IAAM,KAAK,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAA;IACzB,IAAA,KAAkC,IAAA,yBAAgB,EAAC,KAAK,CAAC,EAAxD,aAAa,QAAA,EAAE,cAAc,QAA2B,CAAA;IAC/D,IAAM,aAAa,GAAG,IAAA,iCAAwB,EAAwC,aAAa,EAAE;QACnG,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,SAAS,EAAE,yBAAU,CAAC,OAAO;KAC9B,CAAC,CAAA;IACF,IAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,+BAAe,CAAC,CAAC,CAAC,wBAAe,CAAA;IAEhE,IAAM,UAAU,GAA6B,UAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,IAAI,KAAK;YAAE,SAAS,CAAC,IAAI,CAAC,CAAA;QAC1C,QAAQ,CAAC,KAAK,CAAC,CAAA;QAEf,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,CAAC,CAAC,CAAA;SACV;IACH,CAAC,CAAA;IAED,IAAM,WAAW,GAA8B,UAAC,CAAC;QAC/C,QAAQ,CAAC,IAAI,CAAC,CAAA;QACd,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,CAAC,CAAC,CAAA;SACX;IACH,CAAC,CAAA;IACD,IAAM,gBAAgB,GAAG,UAAC,MAAM,EAAE,QAAQ;QACxC,IAAI,YAAY;YAAE,YAAY,CAAC,CAAC,OAAO,OAAO,KAAK,QAAQ,KAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,CAAA,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;QAC3G,IAAI,YAAY;YAAE,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAClD,CAAC,CAAA;IACD,IAAM,YAAY,GAAG,UAAC,KAAqD;QACzE,IAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;QAEnC,IAAI,QAAQ;YAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC7B,IAAI,YAAY;YAAE,YAAY,CAAC,IAAI,CAAC,CAAA;IACtC,CAAC,CAAA;IAED,IAAA,2BAAmB,EAAC,QAAQ,EAAE,cAAM,OAAA,uBAAM,KAAK,CAAC,OAAO,KAAE,KAAK,EAAE;;YAC9D,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAA;QAC1B,CAAC,EAAE,WAAW,EAAE,IAAI,IAAG,EAFa,CAEb,CAAC,CAAA;IAElB,IAAA,KAAuB,IAAA,oBAAW,EAAC,KAAK,EAAE,QAAQ,CAAC,EAAjD,SAAS,eAAA,EAAE,KAAK,WAAiC,CAAA;IAEzD,IAAM,gBAAgB,GAAG,IAAA,6BAAoB,EAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAEpE,IAAM,cAAc,GAAG,IAAA,6BAAoB,EAAC,UAAU,EAAE,aAAa,CAAC,CAAA;IAEtE,IAAM,eAAe,GAAG,IAAA,6BAAoB,EAAC,WAAW,EAAE,aAAa,CAAC,CAAA;IAExE,SAAS,SAAS,CAAC,GAAyB;QAC1C,IAAM,eAAe,GAAG;YACtB,aAAa,CAAC,GAAG,CAAC;YAClB,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YAC9C,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;SAC/C,CAAA;QACD,OAAO,eAAe,CAAA;IACxB,CAAC;IAED,SAAS,WAAW;;QAClB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,KAAK,CAAC,OAAO,EAAE,CAAA;SAChB;aAAM;YACL,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,kDAAI,CAAA;SACzB;IACH,CAAC;IAED,IAAM,qBAAqB,GAAG,gBAAgB,CAAC,CAAC,CAAC;QAC/C,OAAO,EAAE,cAAM,OAAA,cAAc,EAAE,EAAhB,CAAgB;QAC/B,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,wBAAwB,CAAoB;QAC/F,SAAS,EAAE,UAAG,SAAS,uBAAoB;KAC5C,CAAC,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO,CACL,CAAC,qBAAS,CACR,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAC5B,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,IAAI,YAAY,CAAC,CACjB,cAAc,CAAC,CAAC,IAAI,CAAC,CAErB;MAAA,CAAC,kBAAU,CACT,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAC1B,aAAa,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAC7C,YAAY,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CACxC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAErB;MAAA,CAAC,WAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAC5D;QAAA,CAAC,iBAAS,CACR,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,SAAS,CAAC,CAAC,UAAG,SAAS,eAAY,CAAC,CACpC,IAAI,QAAQ,CAAC,EAEf;QAAA,CAAC,gBAAgB,CACjB;QAAA,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,eAAe,CAAC,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,CAC5C,QAAQ,CAAC,CAAC,UAAC,CAAC,IAAK,OAAA,OAAO,CAAC,CAAC,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAzC,CAAyC,CAAC,CAC3D,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,oBAAoB,CAAC,CAAC,MAAA,yBAAU,CAAC,OAAO,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,0CAAE,KAAK,CAAC,CAC1E,cAAc,CAAC,CAAC,MAAA,yBAAU,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,0CAAE,KAAK,CAAC,CAClE,2BAA2B,CAAC,CAAC,IAAI,CAAC,CAClC,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAAE,QAAQ,EAAE,UAAC,QAAQ;YACvF,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAA;QAC1B,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CACV,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,EAEhC;QAAA,CAAC,iBAAS,CACR,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,MAAM,CAAC,CAAC,eAAe,CAAC,CACxB,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,SAAS,CAAC,CAAC,UAAG,SAAS,gBAAa,CAAC,CACrC,IAAI,SAAS,CAAC,CACd,IAAI,qBAAqB,CAAC,EAG9B;;MAAA,EAAE,WAAI,CACN;MAAA,CAAC,iBAAS,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAC/D;IAAA,EAAE,qBAAS,CAAC,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,SAAS,GAAG,UAAC,EAAqB;IAAnB,IAAA,OAAO,aAAA,EAAK,KAAK,cAAnB,WAAqB,CAAF;IAC3C,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,OAAO,OAAO,CAAC,EAAE;QAC9D,IAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,UAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,GAAG,CAAA;QACpF,OAAO,CAAC,WAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAA;KACxE;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AANY,QAAA,SAAS,aAMrB;AASM,IAAM,SAAS,GAA4B,UAAC,EAAwD;IAAtD,IAAA,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAAtD,oDAAwD,CAAF;IACvG,IAAI,CAAC,KAAK,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAE5B,SAAS,SAAS,CAAC,GAAyB;QAC1C,IAAI,GAAG,KAAK,MAAM;YAAE,GAAG,GAAG,EAAE,CAAA;QAC5B,IAAM,eAAe,GAAG;YACtB,YAAY,CAAC,GAAG,CAAC;YACjB,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YAC7C,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YAC7C,MAAM,CAAC,GAAG,CAAC;YACX,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YACvC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;SACxC,CAAA;QACD,OAAO,yBAAU,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;IAC5C,CAAC;IACD,IAAM,UAAU,GAAG;QACjB,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC;QACvB,kBAAkB,EAAE,SAAS,CAAC,oBAAoB,CAAC;QACnD,gBAAgB,EAAE,SAAS,CAAC,kBAAkB,CAAC;QAC/C,eAAe,EAAE,SAAS,CAAC,iBAAiB,CAAC;KAC9C,CAAA;IAED,OAAO,CAAC,uBAAU,CAChB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,IAAI,KAAK,CAAC,EACV,CAAA;AACJ,CAAC,CAAA;AA1BY,QAAA,SAAS,aA0BrB"}

package/dist/components/TextInput/styles.d.ts

@@ -0,0 +1,62 @@
+import { ActionIconParts } from '../ActionIcon';
+export declare type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>;
+declare type InputIcons = 'icon' | 'leftIcon' | 'rightIcon';
+export declare type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}` | InputIcons;
+declare type TextInputParts = 'wrapper' | InputIconComposition | 'textField' | 'label' | 'innerWrapper' | 'error' | 'placeholder' | 'selection' | 'requiredAsterisk' | 'labelWrapper';
+export declare type TextInputComposition = `${TextInputParts}:error` | `${TextInputParts}:focus` | TextInputParts;
+export declare const TextInputStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    line: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    box: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    pill: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TextInputComposition, any>>;
+};
+export {};

package/dist/components/TextInput/styles.js

@@ -0,0 +1,60 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInputStyles = void 0;
+var common_1 = require("@codeleap/common");
+var createTextInputStyle = (0, common_1.createDefaultVariantFactory)();
+var presets = (0, common_1.includePresets)(function (styles) { return createTextInputStyle(function () { return ({ wrapper: styles }); }); });
+exports.TextInputStyles = __assign(__assign({}, presets), { default: createTextInputStyle(function (theme) { return ({
+        textField: __assign(__assign(__assign(__assign({}, theme.spacing.padding(0)), theme.spacing.paddingHorizontal(1)), (0, common_1.assignTextStyle)('p1')(theme).text), { minWidth: 1, backgroundColor: 'transparent', flex: 1 }),
+        placeholder: {
+            color: theme.colors.lightGray,
+        },
+        selection: {
+            color: theme.colors.primary,
+        },
+        wrapper: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        innerWrapper: __assign(__assign(__assign(__assign(__assign({}, theme.spacing.paddingVertical(0.5)), theme.spacing.paddingHorizontal(1)), theme.presets.row), theme.border.neutral(1)), { display: 'flex', alignItems: 'center' }),
+        label: __assign(__assign({}, theme.spacing.marginBottom(1)), (0, common_1.assignTextStyle)('h5')(theme).text),
+        'icon': {
+            color: theme.colors.neutral,
+        },
+        'icon:error': {
+            color: theme.colors.negative,
+        },
+        'icon:focus': {
+            color: theme.colors.primary,
+        },
+        leftIconTouchableWrapper: __assign({}, theme.spacing.marginRight(1)),
+        rightIconTouchableWrapper: __assign({}, theme.spacing.marginLeft(1)),
+        error: __assign({ color: theme.colors.negative }, theme.spacing.marginTop(0.5)),
+        'label:error': {
+            color: theme.colors.negative,
+        },
+        'innerWrapper:error': __assign({}, theme.border.negative(1)),
+        'innerWrapper:focus': __assign({}, theme.border.primary(1)),
+        requiredAsterisk: {
+            color: theme.colors.negative,
+        },
+        labelWrapper: __assign({}, theme.presets.row),
+    }); }), line: createTextInputStyle(function (theme) { return ({
+        innerWrapper: __assign({}, theme.border.neutral({ width: 1, directions: ['bottom'] })),
+    }); }), box: createTextInputStyle(function (theme) { return ({
+        innerWrapper: __assign({}, theme.border.neutral(1)),
+    }); }), pill: createTextInputStyle(function (theme) { return ({
+        innerWrapper: __assign(__assign({}, theme.border.neutral(1)), { borderRadius: 15 }),
+    }); }) });
+//# sourceMappingURL=styles.js.map

package/dist/components/TextInput/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/TextInput/styles.ts"],"names":[],"mappings":"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"}

package/dist/components/{Touchable.d.ts → Touchable/index.d.ts}

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { ComponentPropsWithoutRef } from 'react';
-import { ComponentVariants, BaseViewProps, ViewStyles, AnyFunction } from '@codeleap/common';
-import { Pressable, View } from 'react-native';
+import { ComponentVariants, BaseViewProps, AnyFunction } from '@codeleap/common';
+import { Pressable, View as RNView } from 'react-native';
+import { TouchableComposition, TouchableStyles } from './styles';
+import { StylesOf } from '../../types';
 export declare type TouchableProps = Omit<ComponentPropsWithoutRef<typeof Pressable>, 'onPress'> & {
-    variants?: ComponentVariants<typeof ViewStyles>['variants'];
+    variants?: ComponentVariants<typeof TouchableStyles>['variants'];
     component?: any;
-    ref?: React.Ref<View>;
+    ref?: React.Ref<RNView>;
     debugName: string;
     activeOpacity?: number;
     debugComponent?: string;
     feedbackVariant?: 'opacity' | 'none' | 'highlight';
     onPress?: AnyFunction;
+    styles?: StylesOf<TouchableComposition>;
 } & BaseViewProps;
+export * from './styles';
 export declare const Touchable: React.FC<TouchableProps>;
 export declare const AnimatedTouchable: React.FC<TouchableProps>;

package/dist/components/{Touchable.js → Touchable/index.js}

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -22,6 +33,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -40,10 +54,34 @@ var react_1 = require("react");
 var common_1 = require("@codeleap/common");
 var react_native_1 = require("react-native");
 var react_native_animatable_1 = require("react-native-animatable");
+var View_1 = require("../View");
+__exportStar(require("./styles"), exports);
+var rippleStyles = {
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingBottom: 0,
+    overflow: 'hidden',
+};
+var defaultPressableStyles = {
+    marginTop: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginBottom: 0,
+    // height: '100%',
+    minWidth: '100%',
+    // minHeight: '100%',
+    // maxHeight: '100%',
+    maxWidth: '100%',
+};
 exports.Touchable = (0, react_1.forwardRef)(function (touchableProps, ref) {
-    var _a = touchableProps.variants, variants = _a === void 0 ? [] : _a, children = touchableProps.children, onPress = touchableProps.onPress, style = touchableProps.style, _b = touchableProps.activeOpacity, activeOpacity = _b === void 0 ? 0.5 : _b, debugName = touchableProps.debugName, debugComponent = touchableProps.debugComponent, _c = touchableProps.feedbackVariant, feedbackVariant = _c === void 0 ? 'opacity' : _c, props = __rest(touchableProps, ["variants", "children", "onPress", "style", "activeOpacity", "debugName", "debugComponent", "feedbackVariant"]);
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('View', {
+    var _a = touchableProps.variants, variants = _a === void 0 ? [] : _a, children = touchableProps.children, onPress = touchableProps.onPress, style = touchableProps.style, _b = touchableProps.activeOpacity, activeOpacity = _b === void 0 ? 0.5 : _b, debugName = touchableProps.debugName, debugComponent = touchableProps.debugComponent, styles = touchableProps.styles, _c = touchableProps.feedbackVariant, feedbackVariant = _c === void 0 ? 'opacity' : _c, props = __rest(touchableProps, ["variants", "children", "onPress", "style", "activeOpacity", "debugName", "debugComponent", "styles", "feedbackVariant"]);
+    var _feedbackVariant = onPress ? feedbackVariant : 'none';
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('u:Touchable', {
         variants: variants,
+        transform: react_native_1.StyleSheet.flatten,
+        rootElement: 'wrapper',
+        styles: styles,
     });
     var logger = (0, common_1.useCodeleapContext)().logger;
     var press = function () {
@@ -53,9 +91,12 @@ exports.Touchable = (0, react_1.forwardRef)(function (touchableProps, ref) {
         logger.log("<".concat(debugComponent || 'Touchable', "/>  pressed"), debugName || variants, 'User interaction');
         onPress && onPress();
     };
-    var styles = [variantStyles.wrapper, style];
-    function getFeedbackStyle(pressed, variant) {
-        switch (variant) {
+    var _styles = react_native_1.StyleSheet.flatten([variantStyles.wrapper, style]);
+    var hasRipple = (!!variantStyles.ripple || !!props.android_ripple) && _feedbackVariant !== 'none';
+    function getFeedbackStyle(pressed) {
+        if (react_native_1.Platform.OS === 'android' && hasRipple)
+            return {};
+        switch (_feedbackVariant) {
             case 'highlight':
                 return {
                     backgroundColor: pressed ? '#e0e0e0' : 'transparent',
@@ -69,15 +110,21 @@ exports.Touchable = (0, react_1.forwardRef)(function (touchableProps, ref) {
                 return {};
         }
     }
-    return (<react_native_1.Pressable onPress={press} style={function (_a) {
+    var rippleConfig = hasRipple ? __assign(__assign({}, (variantStyles.ripple || {})), (props.android_ripple || {})) : null;
+    var Wrapper = View_1.View;
+    return (<Wrapper style={[_styles, rippleStyles]}>
+      <react_native_1.Pressable onPress={press} style={function (_a) {
             var pressed = _a.pressed;
             return ([
-                getFeedbackStyle(pressed, feedbackVariant),
-                styles,
+                getFeedbackStyle(pressed),
+                variantStyles.pressable,
+                _styles,
+                defaultPressableStyles,
             ]);
-        }} {...props} ref={ref}>
-      {children}
-    </react_native_1.Pressable>);
+        }} android_ripple={rippleConfig} {...props} ref={ref}>
+        {children}
+      </react_native_1.Pressable>
+    </Wrapper>);
 });
 exports.AnimatedTouchable = (0, react_native_animatable_1.createAnimatableComponent)(exports.Touchable);
-//# sourceMappingURL=Touchable.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/Touchable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Touchable/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Touchable/styles.d.ts

@@ -0,0 +1,53 @@
+export declare type TouchableComposition = 'wrapper' | 'ripple' | 'pressable';
+export declare const TouchableStyles: {
+    default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+    debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<TouchableComposition, any>>;
+};

package/dist/components/Touchable/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TouchableStyles = void 0;
+var common_1 = require("@codeleap/common");
+var createTouchableStyle = (0, common_1.createDefaultVariantFactory)();
+var presets = (0, common_1.includePresets)(function (styles) { return createTouchableStyle(function () { return ({ wrapper: styles, pressable: styles }); }); });
+exports.TouchableStyles = __assign(__assign({}, presets), { default: createTouchableStyle(function (t) { return ({}); }) });
+//# sourceMappingURL=styles.js.map

package/dist/components/Touchable/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Touchable/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAA8E;AAI9E,IAAM,oBAAoB,GAAG,IAAA,oCAA2B,GAAwB,CAAA;AAEhF,IAAM,OAAO,GAAG,IAAA,uBAAc,EAAC,UAAC,MAAM,IAAK,OAAA,oBAAoB,CAAC,cAAM,OAAA,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAxC,CAAwC,CAAC,EAApE,CAAoE,CAC9G,CAAA;AAEY,QAAA,eAAe,yBACvB,OAAO,KACV,OAAO,EAAE,oBAAoB,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,EAErC,CAAC,EAFmC,CAEnC,CAAC,IAEJ"}

package/dist/components/{View.d.ts → View/index.d.ts}

@@ -3,6 +3,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ComponentVariants, ViewStyles, BaseViewProps } from '@codeleap/common';
 import { View as NativeView } from 'react-native';
 import { MotiProps } from 'moti';
+export * from './styles';
 export declare type ViewProps = ComponentPropsWithoutRef<typeof NativeView> & ComponentVariants<typeof ViewStyles> & {
     ref?: any;
     component?: any;
@@ -121,3 +122,8 @@ export declare const AnimatedView: React.ForwardRefExoticComponent<{
     component?: any;
     animated?: boolean;
 } & BaseViewProps>;
+declare type GapProps = ViewProps & {
+    value: number;
+    defaultProps?: any;
+};
+export declare const Gap: React.FC<GapProps>;