@codeleap/web 2.0.0 → 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,124 +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 wrapperId = (0, hooks_1.useClickOutside)(function () {
-        if (isVisible) {
-            setVisible(false);
-        }
-    }, {
-        deps: [setVisible, isVisible],
-    });
-    if (showOn === 'click') {
-        return ((0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, __assign({ onPress: function () { return setVisible(); }, id: wrapperId, 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, id: wrapperId, 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/Tooltip.js.map

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

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;