@codeleap/web 2.0.1 → 2.3.12

package/dist/components/TextInput.js

@@ -1,125 +1,125 @@
-"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 __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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputLabel = exports.InputIcon = exports.FormError = exports.TextInput = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var common_1 = require("@codeleap/common");
-var react_1 = require("react");
-var react_autosize_textarea_1 = __importDefault(require("react-autosize-textarea"));
-var Text_1 = require("./Text");
-var View_1 = require("./View");
-var Button_1 = require("./Button");
-var Touchable_1 = require("./Touchable");
-var _1 = require(".");
-exports.TextInput = (0, react_1.forwardRef)(function (rawprops, inputRef) {
-    var onChange = rawprops.onChange, value = rawprops.value, onChangeText = rawprops.onChangeText, disabled = rawprops.disabled, edited = rawprops.edited, onFocus = rawprops.onFocus, onBlur = rawprops.onBlur, multiline = rawprops.multiline, variants = rawprops.variants, label = rawprops.label, leftIcon = rawprops.leftIcon, rightIcon = rawprops.rightIcon, styles = rawprops.styles, validate = rawprops.validate, password = rawprops.password, visibilityToggle = rawprops.visibilityToggle, touchableWrapper = rawprops.touchableWrapper, innerWrapperProps = rawprops.innerWrapperProps, debugName = rawprops.debugName, props = __rest(rawprops, ["onChange", "value", "onChangeText", "disabled", "edited", "onFocus", "onBlur", "multiline", "variants", "label", "leftIcon", "rightIcon", "styles", "validate", "password", "visibilityToggle", "touchableWrapper", "innerWrapperProps", "debugName"]);
-    var _a = (0, react_1.useState)(false), isFocused = _a[0], setFocus = _a[1];
-    var _b = (0, react_1.useState)(edited), editedState = _b[0], setEdited = _b[1];
-    var input = (0, react_1.useRef)(null);
-    var _c = (0, common_1.useBooleanToggle)(false), textIsVisible = _c[0], setTextVisible = _c[1];
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('TextInput', {
-        variants: variants,
-        styles: styles,
-    });
-    var InputElement = multiline ? react_autosize_textarea_1.default : 'input';
-    var handleBlur = function (e) {
-        if (!editedState && value)
-            setEdited(true);
-        setFocus(false);
-        if (onBlur) {
-            onBlur(e);
-        }
-    };
-    var handleFocus = function (e) {
-        setFocus(true);
-        if (onFocus) {
-            onFocus(e);
-        }
-    };
-    var handleChange = function (event) {
-        var text = event.target.value;
-        if (onChange)
-            onChange(event);
-        if (onChangeText)
-            onChangeText(text);
-    };
-    (0, react_1.useImperativeHandle)(inputRef, function () { return (__assign(__assign({}, input.current), { focus: function () {
-            var _a, _b;
-            (_b = (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }, isTextInput: true })); });
-    var _d = (0, common_1.useValidate)(value, validate), showError = _d.showError, error = _d.error;
-    function getStyles(key) {
-        var requestedStyles = __assign(__assign(__assign({}, variantStyles[key]), (isFocused ? variantStyles[key + ':focus'] : {})), (showError ? variantStyles[key + ':error'] : {}));
-        return requestedStyles;
-    }
-    var iconStyle = getStyles('icon');
-    var leftIconStyle = __assign(__assign({}, iconStyle), getStyles('leftIcon'));
-    var rightIconStyle = __assign(__assign({}, iconStyle), getStyles('rightIcon'));
-    var InnerWrapper = touchableWrapper ? Touchable_1.Touchable : View_1.View;
-    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ css: getStyles('wrapper') }, { children: [(0, jsx_runtime_1.jsx)(exports.InputLabel, { label: label, style: getStyles('label') }), (0, jsx_runtime_1.jsxs)(InnerWrapper, __assign({ debugName: debugName, css: getStyles('innerWrapper') }, innerWrapperProps, { children: [(0, jsx_runtime_1.jsx)(exports.InputIcon, __assign({}, leftIcon, { style: leftIconStyle })), (0, jsx_runtime_1.jsx)(InputElement, __assign({ ref: input, type: password && !textIsVisible ? 'password' : 'text', onChange: function (e) { return handleChange(e); }, value: value, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur }, props, { css: [
-                            getStyles('textField'),
-                            {
-                                '&:placeholder': __assign({}, getStyles('placeholder')),
-                            },
-                        ] })), visibilityToggle ?
-                        (0, jsx_runtime_1.jsx)(exports.InputIcon, { name: (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden'), action: function () { return setTextVisible(); }, style: rightIconStyle })
-                        :
-                            (0, jsx_runtime_1.jsx)(exports.InputIcon, __assign({}, rightIcon, { style: rightIconStyle }))] })), (0, jsx_runtime_1.jsx)(exports.FormError, { message: error.message, style: __assign({}, variantStyles.error) })] })));
-});
-var FormError = function (_a) {
-    var message = _a.message, props = __rest(_a, ["message"]);
-    if (['number', 'string', 'undefined'].includes(typeof message)) {
-        return ((0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ text: "".concat(message || ' '), variants: ['p2', 'marginTop:1'] }, props)));
-    }
-    return message;
-};
-exports.FormError = FormError;
-var InputIcon = function (_a) {
-    var name = _a.name, style = _a.style, action = _a.action;
-    if (!name)
-        return null;
-    if (action) {
-        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: name, onPress: function () { return action(); }, styles: { icon: style, wrapper: { height: 'auto' } }, variants: ['icon'] }));
-    }
-    return (0, jsx_runtime_1.jsx)(_1.Icon, { name: name, style: style });
-};
-exports.InputIcon = InputIcon;
-var InputLabel = function (_a) {
-    var label = _a.label, style = _a.style;
-    if (!label)
-        return null;
-    switch (typeof label) {
-        case 'string':
-            return (0, jsx_runtime_1.jsx)(Text_1.Text, { css: style, text: label, component: 'label' });
-        case 'object':
-            return label;
-        default:
-            return null;
-    }
-};
-exports.InputLabel = InputLabel;
+"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 __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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputLabel = exports.InputIcon = exports.FormError = exports.TextInput = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var react_1 = require("react");
+var react_autosize_textarea_1 = __importDefault(require("react-autosize-textarea"));
+var Text_1 = require("./Text");
+var View_1 = require("./View");
+var Button_1 = require("./Button");
+var Touchable_1 = require("./Touchable");
+var _1 = require(".");
+exports.TextInput = (0, react_1.forwardRef)(function (rawprops, inputRef) {
+    var onChange = rawprops.onChange, value = rawprops.value, onChangeText = rawprops.onChangeText, disabled = rawprops.disabled, edited = rawprops.edited, onFocus = rawprops.onFocus, onBlur = rawprops.onBlur, multiline = rawprops.multiline, variants = rawprops.variants, label = rawprops.label, leftIcon = rawprops.leftIcon, rightIcon = rawprops.rightIcon, styles = rawprops.styles, validate = rawprops.validate, password = rawprops.password, visibilityToggle = rawprops.visibilityToggle, touchableWrapper = rawprops.touchableWrapper, innerWrapperProps = rawprops.innerWrapperProps, debugName = rawprops.debugName, props = __rest(rawprops, ["onChange", "value", "onChangeText", "disabled", "edited", "onFocus", "onBlur", "multiline", "variants", "label", "leftIcon", "rightIcon", "styles", "validate", "password", "visibilityToggle", "touchableWrapper", "innerWrapperProps", "debugName"]);
+    var _a = (0, react_1.useState)(false), isFocused = _a[0], setFocus = _a[1];
+    var _b = (0, react_1.useState)(edited), editedState = _b[0], setEdited = _b[1];
+    var input = (0, react_1.useRef)(null);
+    var _c = (0, common_1.useBooleanToggle)(false), textIsVisible = _c[0], setTextVisible = _c[1];
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('TextInput', {
+        variants: variants,
+        styles: styles,
+    });
+    var InputElement = multiline ? react_autosize_textarea_1.default : 'input';
+    var handleBlur = function (e) {
+        if (!editedState && value)
+            setEdited(true);
+        setFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    };
+    var handleFocus = function (e) {
+        setFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    };
+    var handleChange = function (event) {
+        var text = event.target.value;
+        if (onChange)
+            onChange(event);
+        if (onChangeText)
+            onChangeText(text);
+    };
+    (0, react_1.useImperativeHandle)(inputRef, function () { return (__assign(__assign({}, input.current), { focus: function () {
+            var _a, _b;
+            (_b = (_a = input.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }, isTextInput: true })); });
+    var _d = (0, common_1.useValidate)(value, validate), showError = _d.showError, error = _d.error;
+    function getStyles(key) {
+        var requestedStyles = __assign(__assign(__assign({}, variantStyles[key]), (isFocused ? variantStyles[key + ':focus'] : {})), (showError ? variantStyles[key + ':error'] : {}));
+        return requestedStyles;
+    }
+    var iconStyle = getStyles('icon');
+    var leftIconStyle = __assign(__assign({}, iconStyle), getStyles('leftIcon'));
+    var rightIconStyle = __assign(__assign({}, iconStyle), getStyles('rightIcon'));
+    var InnerWrapper = touchableWrapper ? Touchable_1.Touchable : View_1.View;
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ css: getStyles('wrapper') }, { children: [(0, jsx_runtime_1.jsx)(exports.InputLabel, { label: label, style: getStyles('label') }), (0, jsx_runtime_1.jsxs)(InnerWrapper, __assign({ debugName: debugName, css: getStyles('innerWrapper') }, innerWrapperProps, { children: [(0, jsx_runtime_1.jsx)(exports.InputIcon, __assign({}, leftIcon, { style: leftIconStyle })), (0, jsx_runtime_1.jsx)(InputElement, __assign({ ref: input, type: password && !textIsVisible ? 'password' : 'text', onChange: function (e) { return handleChange(e); }, value: value, disabled: disabled, onFocus: handleFocus, onBlur: handleBlur }, props, { css: [
+                            getStyles('textField'),
+                            {
+                                '&:placeholder': __assign({}, getStyles('placeholder')),
+                            },
+                        ] })), visibilityToggle ?
+                        (0, jsx_runtime_1.jsx)(exports.InputIcon, { name: (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden'), action: function () { return setTextVisible(); }, style: rightIconStyle })
+                        :
+                            (0, jsx_runtime_1.jsx)(exports.InputIcon, __assign({}, rightIcon, { style: rightIconStyle }))] })), (0, jsx_runtime_1.jsx)(exports.FormError, { message: error.message, style: __assign({}, variantStyles.error) })] })));
+});
+var FormError = function (_a) {
+    var message = _a.message, props = __rest(_a, ["message"]);
+    if (['number', 'string', 'undefined'].includes(typeof message)) {
+        return ((0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ text: "".concat(message || ' '), variants: ['p2', 'marginTop:1'] }, props)));
+    }
+    return message;
+};
+exports.FormError = FormError;
+var InputIcon = function (_a) {
+    var name = _a.name, style = _a.style, action = _a.action;
+    if (!name)
+        return null;
+    if (action) {
+        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { icon: name, onPress: function () { return action(); }, styles: { icon: style, wrapper: { height: 'auto' } }, variants: ['icon'] }));
+    }
+    return (0, jsx_runtime_1.jsx)(_1.Icon, { name: name, style: style });
+};
+exports.InputIcon = InputIcon;
+var InputLabel = function (_a) {
+    var label = _a.label, style = _a.style;
+    if (!label)
+        return null;
+    switch (typeof label) {
+        case 'string':
+            return (0, jsx_runtime_1.jsx)(Text_1.Text, { css: style, text: label, component: 'label' });
+        case 'object':
+            return label;
+        default:
+            return null;
+    }
+};
+exports.InputLabel = InputLabel;
 //# sourceMappingURL=TextInput.js.map

package/dist/components/Tooltip.d.ts

@@ -1,12 +1,12 @@
-import { ComponentVariants, TooltipComposition, TooltipStyles } from '@codeleap/common';
-import { ReactNode } from 'react';
-import { StylesOf } from '../types/utility';
-declare type TooltipPosition = 'left' | 'top' | 'bottom' | 'right';
-export declare type TooltipProps = {
-    position: TooltipPosition;
-    styles?: StylesOf<TooltipComposition>;
-    showOn?: 'click' | 'hover';
-    content?: string | ReactNode;
-} & ComponentVariants<typeof TooltipStyles>;
-export declare const Tooltip: React.FC<TooltipProps>;
-export {};
+import { ComponentVariants, TooltipComposition, TooltipStyles } from '@codeleap/common';
+import { ReactNode } from 'react';
+import { StylesOf } from '../types/utility';
+declare type TooltipPosition = 'left' | 'top' | 'bottom' | 'right';
+export declare type TooltipProps = {
+    position: TooltipPosition;
+    styles?: StylesOf<TooltipComposition>;
+    showOn?: 'click' | 'hover';
+    content?: string | ReactNode;
+} & ComponentVariants<typeof TooltipStyles>;
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/components/Tooltip.js

@@ -1,122 +1,122 @@
-"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.Tooltip = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var common_1 = require("@codeleap/common");
-var View_1 = require("./View");
-var Touchable_1 = require("./Touchable");
-var hooks_1 = require("../lib/hooks");
-var arrowPositionStyles = {
-    left: {
-        right: "100%",
-        top: '50%',
-        transform: 'translate(50%,-50%)',
-        borderRight: 'none',
-        borderTop: 'none',
-    },
-    right: {
-        left: "100%",
-        top: '50%',
-        transform: 'translate(-50%,-50%)',
-        borderLeft: 'none',
-        borderBottom: 'none',
-    },
-    bottom: {
-        left: '50%',
-        top: "100%",
-        transform: 'translate(-50%,-50%)',
-        borderTop: 'none',
-        borderLeft: 'none',
-    },
-    top: {
-        left: '50%',
-        bottom: "100%",
-        transform: 'translate(-50%,50%)',
-        borderBottom: 'none',
-        borderRight: 'none',
-    },
-};
-var tooltipPositionStyles = {
-    left: function (arrow, visible) {
-        if (arrow === void 0) { arrow = 0; }
-        if (visible === void 0) { visible = false; }
-        return ({
-            right: "calc(100% + ".concat(arrow, "px)"),
-            top: '50%',
-            transform: "translate(0%,-50%) scale(".concat(visible ? '1' : '0', ")"),
-        });
-    },
-    right: function (arrow, visible) {
-        if (arrow === void 0) { arrow = 0; }
-        if (visible === void 0) { visible = false; }
-        return ({
-            left: "calc(100% + ".concat(arrow, "px)"),
-            top: '50%',
-            transform: "translate(0%,-50%) scale(".concat(visible ? '1' : '0', ")"),
-        });
-    },
-    bottom: function (arrow, visible) {
-        if (arrow === void 0) { arrow = 0; }
-        if (visible === void 0) { visible = false; }
-        return ({
-            left: '50%',
-            top: "calc(100% + ".concat(arrow, "px)"),
-            transform: "translate(-50%,0%) scale(".concat(visible ? '1' : '0', ")"),
-        });
-    },
-    top: function (arrow, visible) {
-        if (arrow === void 0) { arrow = 0; }
-        if (visible === void 0) { visible = false; }
-        return ({
-            left: '50%',
-            bottom: "calc(100% + ".concat(arrow, "px)"),
-            transform: "translate(-50%,0%) scale(".concat(visible ? '1' : '0', ")"),
-        });
-    },
-};
-var invert = function (pos) {
-    switch (pos) {
-        case 'left':
-            return 'right';
-        case 'right':
-            return 'left';
-        case 'top':
-            return 'bottom';
-        case 'bottom':
-            return 'top';
-    }
-};
-var Tooltip = function (props) {
-    var children = props.children, _a = props.position, position = _a === void 0 ? 'top' : _a, styles = props.styles, variants = props.variants, responsiveVariants = props.responsiveVariants, showOn = props.showOn, content = props.content;
-    var _b = (0, common_1.useBooleanToggle)(false), isVisible = _b[0], setVisible = _b[1];
-    var debouncedVisible = (0, common_1.useDebounce)(isVisible, 100)[0];
-    var arrowPos = arrowPositionStyles[invert(position)];
-    var variantStyles = (0, common_1.useDefaultComponentStyle)('Tooltip', {
-        responsiveVariants: responsiveVariants,
-        variants: variants,
-        styles: styles,
-    });
-    var style = __assign(__assign({ transition: 'transform 0.2s ease', '&:after': __assign(__assign(__assign({}, variantStyles.arrow), arrowPos), { transform: arrowPos.transform + ' rotate(45deg)' }) }, tooltipPositionStyles[position](10, debouncedVisible)), variantStyles.bubble);
-    var wrapperRef = (0, hooks_1.useClickOutside)(function () {
-        if (isVisible) {
-            setVisible(false);
-        }
-    });
-    if (showOn === 'click') {
-        return ((0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, __assign({ onPress: function () { return setVisible(); }, ref: wrapperRef, css: variantStyles.wrapper }, { children: [(0, jsx_runtime_1.jsx)(View_1.View, __assign({ css: style }, { children: content })), children] })));
-    }
-    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ onHover: setVisible, ref: wrapperRef, css: variantStyles.wrapper }, { children: [(0, jsx_runtime_1.jsx)(View_1.View, __assign({ css: style }, { children: content })), children] })));
-};
-exports.Tooltip = Tooltip;
+"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.Tooltip = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var common_1 = require("@codeleap/common");
+var View_1 = require("./View");
+var Touchable_1 = require("./Touchable");
+var hooks_1 = require("../lib/hooks");
+var arrowPositionStyles = {
+    left: {
+        right: "100%",
+        top: '50%',
+        transform: 'translate(50%,-50%)',
+        borderRight: 'none',
+        borderTop: 'none',
+    },
+    right: {
+        left: "100%",
+        top: '50%',
+        transform: 'translate(-50%,-50%)',
+        borderLeft: 'none',
+        borderBottom: 'none',
+    },
+    bottom: {
+        left: '50%',
+        top: "100%",
+        transform: 'translate(-50%,-50%)',
+        borderTop: 'none',
+        borderLeft: 'none',
+    },
+    top: {
+        left: '50%',
+        bottom: "100%",
+        transform: 'translate(-50%,50%)',
+        borderBottom: 'none',
+        borderRight: 'none',
+    },
+};
+var tooltipPositionStyles = {
+    left: function (arrow, visible) {
+        if (arrow === void 0) { arrow = 0; }
+        if (visible === void 0) { visible = false; }
+        return ({
+            right: "calc(100% + ".concat(arrow, "px)"),
+            top: '50%',
+            transform: "translate(0%,-50%) scale(".concat(visible ? '1' : '0', ")"),
+        });
+    },
+    right: function (arrow, visible) {
+        if (arrow === void 0) { arrow = 0; }
+        if (visible === void 0) { visible = false; }
+        return ({
+            left: "calc(100% + ".concat(arrow, "px)"),
+            top: '50%',
+            transform: "translate(0%,-50%) scale(".concat(visible ? '1' : '0', ")"),
+        });
+    },
+    bottom: function (arrow, visible) {
+        if (arrow === void 0) { arrow = 0; }
+        if (visible === void 0) { visible = false; }
+        return ({
+            left: '50%',
+            top: "calc(100% + ".concat(arrow, "px)"),
+            transform: "translate(-50%,0%) scale(".concat(visible ? '1' : '0', ")"),
+        });
+    },
+    top: function (arrow, visible) {
+        if (arrow === void 0) { arrow = 0; }
+        if (visible === void 0) { visible = false; }
+        return ({
+            left: '50%',
+            bottom: "calc(100% + ".concat(arrow, "px)"),
+            transform: "translate(-50%,0%) scale(".concat(visible ? '1' : '0', ")"),
+        });
+    },
+};
+var invert = function (pos) {
+    switch (pos) {
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+    }
+};
+var Tooltip = function (props) {
+    var children = props.children, _a = props.position, position = _a === void 0 ? 'top' : _a, styles = props.styles, variants = props.variants, responsiveVariants = props.responsiveVariants, showOn = props.showOn, content = props.content;
+    var _b = (0, common_1.useBooleanToggle)(false), isVisible = _b[0], setVisible = _b[1];
+    var debouncedVisible = (0, common_1.useDebounce)(isVisible, 100)[0];
+    var arrowPos = arrowPositionStyles[invert(position)];
+    var variantStyles = (0, common_1.useDefaultComponentStyle)('Tooltip', {
+        responsiveVariants: responsiveVariants,
+        variants: variants,
+        styles: styles,
+    });
+    var style = __assign(__assign({ transition: 'transform 0.2s ease', '&:after': __assign(__assign(__assign({}, variantStyles.arrow), arrowPos), { transform: arrowPos.transform + ' rotate(45deg)' }) }, tooltipPositionStyles[position](10, debouncedVisible)), variantStyles.bubble);
+    var wrapperRef = (0, hooks_1.useClickOutside)(function () {
+        if (isVisible) {
+            setVisible(false);
+        }
+    });
+    if (showOn === 'click') {
+        return ((0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, __assign({ onPress: function () { return setVisible(); }, ref: wrapperRef, css: variantStyles.wrapper }, { children: [(0, jsx_runtime_1.jsx)(View_1.View, __assign({ css: style }, { children: content })), children] })));
+    }
+    return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({ onHover: setVisible, ref: wrapperRef, css: variantStyles.wrapper }, { children: [(0, jsx_runtime_1.jsx)(View_1.View, __assign({ css: style }, { children: content })), children] })));
+};
+exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/Touchable.d.ts

@@ -1,15 +1,15 @@
-/** @jsx jsx */
-import { AnyFunction } from '@codeleap/common';
-import { CSSObject } from '@emotion/react';
-import React, { ComponentPropsWithRef, ElementType, ReactElement } from 'react';
-export declare type TouchableProps<T extends ElementType> = ComponentPropsWithRef<T> & {
-    css?: CSSObject;
-    component?: T;
-    disabled?: boolean;
-    propagate?: boolean;
-    onPress?: AnyFunction;
-    debugComponent?: string;
-    debugName?: string;
-};
-export declare const TouchableCP: <T extends React.ElementType<any> = <T_1 extends React.ElementType<any> = "div">(props: import("./View").ViewProps<T_1>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>(touchableProps: TouchableProps<T>, ref: any) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Touchable: <T extends React.ElementType<any> = <T_1 extends React.ElementType<any> = "div">(props: import("./View").ViewProps<T_1>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>(touchableProps: TouchableProps<T>) => ReactElement;
+/** @jsx jsx */
+import { AnyFunction } from '@codeleap/common';
+import { CSSObject } from '@emotion/react';
+import React, { ComponentPropsWithRef, ElementType, ReactElement } from 'react';
+export declare type TouchableProps<T extends ElementType> = ComponentPropsWithRef<T> & {
+    css?: CSSObject;
+    component?: T;
+    disabled?: boolean;
+    propagate?: boolean;
+    onPress?: AnyFunction;
+    debugComponent?: string;
+    debugName?: string;
+};
+export declare const TouchableCP: <T extends React.ElementType<any> = <T_1 extends React.ElementType<any> = "div">(props: import("./View").ViewProps<T_1>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>(touchableProps: TouchableProps<T>, ref: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Touchable: <T extends React.ElementType<any> = <T_1 extends React.ElementType<any> = "div">(props: import("./View").ViewProps<T_1>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>>(touchableProps: TouchableProps<T>) => ReactElement;