@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/cjs/components/overlays/Modal/Modal.js

@@ -0,0 +1,86 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = exports.OVERLAY_WRAPPER_STYLES = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-spectrum/utils");
+const utils_2 = require("@react-aria/utils");
+const Overlay_1 = require("./Overlay");
+const react_1 = require("react");
+const Underlay_1 = require("./Underlay");
+const overlays_1 = require("@react-aria/overlays");
+const Base_1 = require("../../Base");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const react_2 = require("../../../utils/react");
+exports.OVERLAY_WRAPPER_STYLES = {
+    position: 'fixed',
+    display: 'grid',
+    left: 0,
+    top: 0,
+    placeItems: {
+        '': 'center',
+        '[data-type="fullscreen"]': 'center',
+        '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'stretch',
+    },
+    boxSizing: 'border-box',
+    width: '100vw',
+    height: '@cube-visual-viewport-height',
+    pointerEvents: 'none',
+    zIndex: 2,
+    transition: 'visibility 0ms linear .13s',
+};
+const MODAL_STYLES = {
+    display: 'grid',
+    zIndex: 2,
+    height: {
+        '': 'max (@cube-visual-viewport-height * .9)',
+        '[data-type="fullscreenTakeover"] | [data-type="panel"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+        '[data-type="fullscreen"]': '(@cube-visual-viewport-height * .9) (@cube-visual-viewport-height * .9)',
+        '[data-type="fullscreenTakeover"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+    },
+    width: {
+        width: '288px 90vw',
+    },
+    pointerEvents: 'none',
+    transition: 'opacity .25s linear, visibility 0ms linear, transform .25s ease-in-out',
+    transform: {
+        '': 'translate(0, 0) scale(1, 1)',
+        '[data-type="modal"] & !open': 'translate(0, -3x) scale(1, 1)',
+        '[data-type^="fullscreen"] & !open': 'translate(0, 0) scale(1.02, 1.02)',
+    },
+    opacity: {
+        '': 0,
+        open: 0.9999,
+    },
+};
+function Modal(props, ref) {
+    let { qa, children, onClose, type, styles, ...otherProps } = props;
+    let domRef = (0, utils_1.useDOMRef)(ref);
+    let { overlayProps, underlayProps } = (0, overlays_1.useOverlay)(props, domRef);
+    return ((0, jsx_runtime_1.jsxs)(Overlay_1.Overlay, { ...otherProps, children: [type !== 'fullscreenTakeover' && (0, jsx_runtime_1.jsx)(Underlay_1.Underlay, { ...underlayProps }, void 0), (0, jsx_runtime_1.jsx)(ModalWrapper, { qa: qa, onClose: onClose, type: type, ref: domRef, overlayProps: overlayProps, styles: styles, children: children }, void 0)] }, void 0));
+}
+let ModalWrapper = (0, react_1.forwardRef)(function ModalWrapper(props, ref) {
+    let { qa, children, isOpen, type, placement, styles, overlayProps, ...otherProps } = props;
+    styles = {
+        ...MODAL_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Modal', props),
+        ...styles,
+    };
+    (0, overlays_1.usePreventScroll)();
+    let { modalProps } = (0, overlays_1.useModal)();
+    let viewport = (0, utils_2.useViewportSize)();
+    let style = {
+        '--cube-visual-viewport-height': viewport.height + 'px',
+    };
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "ModalWrapper", mods: { open: isOpen }, "data-type": type, "data-placement": placement, styles: exports.OVERLAY_WRAPPER_STYLES, style: style, children: (0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...(0, react_2.mergeProps)(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
+});
+let _Modal = (0, react_1.forwardRef)(Modal);
+exports.Modal = _Modal;
+
+        

package/dist/cjs/components/overlays/Modal/OpenTransition.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Transition_1 = __importDefault(require("react-transition-group/Transition"));
+const OPEN_STATES = {
+    entering: false,
+    entered: true,
+};
+function OpenTransition(props) {
+    return ((0, jsx_runtime_1.jsx)(Transition_1.default, { timeout: { enter: 0, exit: 350 }, ...props, children: (state) => react_1.Children.map(props.children, (child) => child && (0, react_1.cloneElement)(child, { isOpen: !!OPEN_STATES[state] })) }, void 0));
+}
+exports.OpenTransition = OpenTransition;
+
+        

package/dist/cjs/components/overlays/Modal/Overlay.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const OpenTransition_1 = require("./OpenTransition");
+const react_1 = require("react");
+const provider_1 = require("../../../provider");
+const portal_1 = require("../../portal");
+function Overlay(props, ref) {
+    let { children, isOpen, container = null, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
+    let [exited, setExited] = (0, react_1.useState)(!isOpen);
+    let containerRef = (0, react_1.useRef)(container);
+    let handleEntered = (0, react_1.useCallback)(() => {
+        setExited(false);
+        onEntered?.();
+    }, [onEntered]);
+    let handleExited = (0, react_1.useCallback)(() => {
+        setExited(true);
+        onExited?.();
+    }, [onExited]);
+    // Don't un-render the overlay while it's transitioning out.
+    let mountOverlay = isOpen || !exited;
+    if (!mountOverlay) {
+        // Don't bother showing anything if we don't have to.
+        return null;
+    }
+    // UNSAFE_style={{background: 'transparent', isolation: 'isolate'}}
+    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { root: containerRef, children: (0, jsx_runtime_1.jsx)(provider_1.Provider, { ref: ref, children: (0, jsx_runtime_1.jsx)(OpenTransition_1.OpenTransition, { in: isOpen, appear: true, onExit: onExit, onExiting: onExiting, onExited: handleExited, onEnter: onEnter, onEntering: onEntering, onEntered: handleEntered, children: children }, void 0) }, void 0) }, void 0));
+}
+let _Overlay = (0, react_1.forwardRef)(Overlay);
+exports.Overlay = _Overlay;
+
+        

package/dist/cjs/components/overlays/Modal/Popover.js

@@ -0,0 +1,59 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("../../../utils/react");
+const Overlay_1 = require("./Overlay");
+const react_2 = require("react");
+const overlays_1 = require("@react-aria/overlays");
+const Base_1 = require("../../Base");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const POPOVER_STYLES = {
+    pointerEvents: 'auto',
+    position: 'absolute',
+    transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
+    transform: {
+        '': 'scale(1, .9)',
+        open: 'scale(1, 1)',
+    },
+    opacity: {
+        '': 0,
+        open: '.9999',
+    },
+    transformOrigin: {
+        '': 'top center',
+        '[data-placement="top"]': 'bottom center',
+    },
+};
+function Popover(props, ref) {
+    let { qa, style, styles, children, placement, arrowProps, onClose, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable = true, ...otherProps } = props;
+    return ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { ...otherProps, children: (0, jsx_runtime_1.jsx)(PopoverWrapper, { qa: qa, ref: ref, style: style, styles: styles, placement: placement, arrowProps: arrowProps, onClose: onClose, shouldCloseOnBlur: shouldCloseOnBlur, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isNonModal: isNonModal, isDismissable: isDismissable, children: children }, void 0) }, void 0));
+}
+const PopoverWrapper = (0, react_2.forwardRef)((props, ref) => {
+    let { qa, children, placement = 'bottom', arrowProps, isOpen, style, styles, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable, ...otherProps } = props;
+    let { overlayProps } = (0, overlays_1.useOverlay)({ ...props, isDismissable: isDismissable && isOpen }, 
+    // @ts-ignore
+    ref);
+    let { modalProps } = (0, overlays_1.useModal)({
+        isDisabled: isNonModal,
+    });
+    styles = {
+        ...POPOVER_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Popover', props),
+        ...styles,
+    };
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'Popover', ...(0, react_1.mergeProps)(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
+            open: isOpen,
+        }, "data-placement": placement, role: "presentation", style: style, children: children }, void 0));
+});
+let _Popover = (0, react_2.forwardRef)(Popover);
+exports.Popover = _Popover;
+
+        

package/dist/cjs/components/overlays/Modal/Tray.js

@@ -0,0 +1,95 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tray = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-spectrum/utils");
+const utils_2 = require("@react-aria/utils");
+const Overlay_1 = require("./Overlay");
+const react_1 = require("react");
+const Underlay_1 = require("./Underlay");
+const overlays_1 = require("@react-aria/overlays");
+const Modal_1 = require("./Modal");
+const Base_1 = require("../../Base");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const react_2 = require("../../../utils/react");
+const TRAY_STYLES = {
+    zIndex: 2,
+    height: 'max (@cube-visual-viewport-height * .9)',
+    width: '288px 90vw',
+    pointerEvents: 'auto',
+    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+    opacity: {
+        '': 0,
+        open: '.9999',
+    },
+};
+function Tray(props, ref) {
+    let { qa, children, onClose, isFixedHeight, isNonModal, styles, ...otherProps } = props;
+    let domRef = (0, utils_1.useDOMRef)(ref);
+    let { overlayProps, underlayProps } = (0, overlays_1.useOverlay)({ ...props, isDismissable: true }, domRef);
+    return ((0, jsx_runtime_1.jsxs)(Overlay_1.Overlay, { ...otherProps, children: [(0, jsx_runtime_1.jsx)(Underlay_1.Underlay, { ...underlayProps }, void 0), (0, jsx_runtime_1.jsx)(TrayWrapper, { qa: qa, onClose: onClose, ref: domRef, overlayProps: overlayProps, isFixedHeight: isFixedHeight, isNonModal: isNonModal, styles: styles, children: children }, void 0)] }, void 0));
+}
+let TrayWrapper = (0, react_1.forwardRef)(function (props, ref) {
+    let { qa, children, isOpen, styles, isFixedHeight, isNonModal, overlayProps, ...otherProps } = props;
+    (0, overlays_1.usePreventScroll)();
+    let { modalProps } = (0, overlays_1.useModal)({
+        isDisabled: isNonModal,
+    });
+    styles = {
+        ...TRAY_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Tray', props),
+        ...styles,
+    };
+    // We need to measure the window's height in JS rather than using percentages in CSS
+    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
+    // does not work properly because there is nothing to base the percentage on.
+    // We cannot use vh units because mobile browsers adjust the window height dynamically
+    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
+    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
+    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
+    let viewport = (0, utils_2.useViewportSize)();
+    let [height, setHeight] = (0, react_1.useState)(viewport.height);
+    let timeoutRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // When the height is decreasing, and the keyboard is visible
+        // (visual viewport smaller than layout viewport), delay setting
+        // the new max height until after the animation is complete
+        // so that there isn't an empty space under the tray briefly.
+        if (viewport.height < height && viewport.height < window.innerHeight) {
+            timeoutRef.current = setTimeout(() => {
+                setHeight(viewport.height);
+            }, 500);
+        }
+        else {
+            setHeight(viewport.height);
+        }
+    }, [height, viewport.height]);
+    let wrapperStyle = {
+        '--cube-visual-viewport-height': height + 'px',
+    };
+    let domProps = (0, react_2.mergeProps)(otherProps, overlayProps);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "TrayWrapper", mods: {
+            open: isOpen,
+        }, styles: {
+            ...Modal_1.OVERLAY_WRAPPER_STYLES,
+            placeContent: 'end center',
+            placeItems: 'end center',
+        }, style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'Tray', styles: styles, mods: {
+                open: isOpen,
+                'fixed-height': isFixedHeight,
+            }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));
+});
+let _Tray = (0, react_1.forwardRef)(Tray);
+exports.Tray = _Tray;
+
+        

package/dist/cjs/components/overlays/Modal/Underlay.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Underlay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Base_1 = require("../../Base");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const UNDERLAY_STYLES = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+    transitionDelay: '0ms',
+    // visibility: {
+    //   '': 'hidden',
+    //   open: 'visible',
+    // },
+    opacity: {
+        '': 0,
+        open: 0.9999,
+    },
+    pointerEvents: {
+        '': 'none',
+        open: 'auto',
+    },
+    fill: '#dark.30',
+    overflow: 'hidden',
+    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+};
+const Underlay = ({ isOpen, ...otherProps }, ref) => {
+    const styles = {
+        ...UNDERLAY_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Underlay'),
+    };
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ref: ref, "data-qa": "Underlay", styles: styles, mods: {
+            open: isOpen,
+        }, ...otherProps }, void 0));
+};
+let _Underlay = (0, react_1.forwardRef)(Underlay);
+exports.Underlay = _Underlay;
+
+        

package/dist/cjs/components/overlays/Modal/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = exports.Underlay = exports.Overlay = exports.Modal = exports.Tray = void 0;
+var Tray_1 = require("./Tray");
+Object.defineProperty(exports, "Tray", { enumerable: true, get: function () { return Tray_1.Tray; } });
+var Modal_1 = require("./Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.Modal; } });
+var Overlay_1 = require("./Overlay");
+Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return Overlay_1.Overlay; } });
+var Underlay_1 = require("./Underlay");
+Object.defineProperty(exports, "Underlay", { enumerable: true, get: function () { return Underlay_1.Underlay; } });
+var Popover_1 = require("./Popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
+
+        

package/dist/cjs/components/overlays/Notification/Notification.js

@@ -0,0 +1,44 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Action_1 = require("../../actions/Action");
+const Card_1 = require("../../content/Card/Card");
+const Block_1 = require("../../Block");
+const Flex_1 = require("../../layout/Flex");
+const themes_1 = __importDefault(require("../../../data/themes"));
+const icons_1 = require("@ant-design/icons");
+function Notification(allProps) {
+    let { type, children, onClose, ...props } = allProps;
+    type = type || 'note';
+    let Icon;
+    switch (type) {
+        case 'success':
+            Icon = icons_1.CheckOutlined;
+            break;
+        case 'danger':
+            Icon = icons_1.ExclamationOutlined;
+            break;
+        default:
+            Icon = icons_1.InfoOutlined;
+            break;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { display: "grid", role: "region", color: "#dark", padding: ".5x", shadow: "0 5px 15px #dark.10", border: false, margin: "1x bottom", radius: "1.5r", styles: {
+            gridColumns: 'auto 1fr auto',
+            placeItems: 'center start',
+            gap: '2x',
+        }, ...props, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { radius: "1r", width: "5x", height: "5x", placeContent: "center", placeItems: "center", fill: themes_1.default[type] ? themes_1.default[type].fill : '#clear', color: themes_1.default[type] ? themes_1.default[type].color : '#dark.75', children: (0, jsx_runtime_1.jsx)(Icon, { style: { fontSize: 16 } }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { children: children }, void 0), (0, jsx_runtime_1.jsx)(Action_1.Action, { color: { '': '#dark.75', hovered: '#purple' }, width: "5x", height: "5x", onPress: onClose, label: "Close", children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0) }, void 0)] }, void 0));
+}
+exports.Notification = Notification;
+
+        

package/dist/cjs/components/overlays/OverlayWrapper.js

@@ -0,0 +1,35 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_transition_group_1 = require("react-transition-group");
+const react_1 = require("react");
+const portal_1 = require("../portal");
+function OverlayWrapper({ isOpen, placement, minOffset, minScale, children, container = null, }) {
+    const containerRef = (0, react_1.useRef)(container);
+    const options = {};
+    if (typeof minOffset === 'number') {
+        minOffset = `${minOffset}px`;
+    }
+    if (placement != null) {
+        options.placement = placement;
+    }
+    if (minScale != null) {
+        options.minScale = minScale;
+    }
+    if (minOffset != null) {
+        options.minOffset = minOffset;
+    }
+    const contents = ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { in: isOpen, unmountOnExit: true, timeout: 180, classNames: "cube-overlay-transition", children: children }, void 0));
+    return (0, jsx_runtime_1.jsx)(portal_1.Portal, { root: containerRef, children: contents }, void 0);
+}
+exports.OverlayWrapper = OverlayWrapper;
+
+        

package/dist/cjs/components/overlays/Tooltip/Tooltip.js

@@ -0,0 +1,100 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("../../../utils/react");
+const utils_1 = require("@react-spectrum/utils");
+const context_1 = require("./context");
+const tooltip_1 = require("@react-aria/tooltip");
+const Base_1 = require("../../Base");
+const styles_1 = require("../../../utils/styles");
+const list_1 = require("../../../styles/list");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const transitions_1 = require("../../../utils/transitions");
+const TOOLTIP_STYLES = {
+    display: 'block',
+    fill: '#dark.85',
+    color: '#white',
+    width: 'initial 36x max-content',
+    radius: true,
+    padding: '.75x 1x',
+    preset: 't3',
+    backdropFilter: 'blur(.5x)',
+    whiteSpace: 'pre-line',
+};
+const TIP_STYLES = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    border: '.5x #clear',
+    borderTop: '.5x solid #dark.85',
+    borderBottom: '0',
+    top: {
+        '': 'initial',
+        '[data-placement="left"] | [data-placement="right"]': '50%',
+        '[data-placement="top"]': '100%',
+    },
+    left: {
+        '': 'initial',
+        '[data-placement="top"] | [data-placement="bottom"]': '50%',
+        '[data-placement="left"]': '100%',
+    },
+    right: {
+        '': 'initial',
+        '[data-placement="right"]': '100%',
+    },
+    bottom: {
+        '': 'initial',
+        '[data-placement="bottom"]': '100%',
+    },
+    transform: {
+        '': 'translate((-.375x - 1px), 0)',
+        '[data-placement="bottom"]': 'translate((-.375x - 1px), 0) rotate(180deg)',
+        '[data-placement="left"]': 'translate(-.375x, (-.375x - 1px)) rotate(270deg)',
+        '[data-placement="right"]': 'translate(.375x, (-.375x - 1px)) rotate(90deg)',
+    },
+};
+function Tooltip(props, ref) {
+    let { ref: overlayRef, arrowProps, state, overlayProps, minOffset, minScale, ...tooltipProviderProps } = (0, react_1.useContext)(context_1.TooltipContext);
+    let defaultRef = (0, react_1.useRef)(null);
+    overlayRef = overlayRef || defaultRef;
+    props = (0, react_2.mergeProps)(props, tooltipProviderProps);
+    let { placement = 'top', isOpen, tipStyles, showIcon, isMaterial, ...otherProps } = props;
+    const styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES, {
+        ...TOOLTIP_STYLES,
+        pointerEvents: isMaterial ? 'auto' : 'none',
+        ...(0, StylesProvider_1.useContextStyles)('Tooltip', props),
+    });
+    tipStyles = {
+        ...TIP_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Tooltip_Tip'),
+        ...tipStyles,
+    };
+    let { tooltipProps } = (0, tooltip_1.useTooltip)(props, state);
+    // Sync ref with overlayRef from context.
+    (0, react_1.useImperativeHandle)(ref, () => overlayRef ? (0, utils_1.createDOMRef)(overlayRef) : null);
+    if (typeof minOffset === 'number') {
+        minOffset = `${minOffset}px`;
+    }
+    if (typeof minScale === 'number') {
+        minScale = String(minScale);
+    }
+    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ...tooltipProps, ...overlayProps, css: (0, transitions_1.getOverlayTransitionCSS)({ placement, minOffset, minScale }), styles: styles, mods: {
+            open: isOpen,
+        }, "data-placement": placement, ref: overlayRef, children: [props.children, (0, jsx_runtime_1.jsx)(Base_1.Base, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+}
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */
+let _Tooltip = (0, react_1.forwardRef)(Tooltip);
+exports.Tooltip = _Tooltip;
+
+        

package/dist/cjs/components/overlays/Tooltip/TooltipProvider.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TooltipTrigger_1 = require("./TooltipTrigger");
+const Tooltip_1 = require("./Tooltip");
+const react_1 = require("react");
+function TooltipProvider(props) {
+    const [rendered, setRendered] = (0, react_1.useState)(false);
+    const { title, children, tooltipStyles, width, ...otherProps } = props;
+    (0, react_1.useEffect)(() => {
+        setRendered(true);
+    });
+    return rendered ? ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { ...otherProps, children: [children, (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "children" }, void 0));
+}
+let _TooltipProvider = TooltipProvider;
+exports.TooltipProvider = _TooltipProvider;
+
+        

package/dist/cjs/components/overlays/Tooltip/TooltipTrigger.js

@@ -0,0 +1,71 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const focus_1 = require("@react-aria/focus");
+const react_1 = require("react");
+const context_1 = require("./context");
+const overlays_1 = require("@react-aria/overlays");
+const tooltip_1 = require("@react-aria/tooltip");
+const tooltip_2 = require("@react-stately/tooltip");
+const OverlayWrapper_1 = require("../OverlayWrapper");
+const ActiveZone_1 = require("../../content/ActiveZone/ActiveZone");
+const Block_1 = require("../../Block");
+const DEFAULT_OFFSET = 8; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
+const DEFAULT_CROSS_OFFSET = 0;
+function TooltipTrigger(props) {
+    let { children, activeWrap, crossOffset = DEFAULT_CROSS_OFFSET, isDisabled, isMaterial, offset = DEFAULT_OFFSET, trigger: triggerAction, } = props;
+    let [trigger, tooltip] = react_1.Children.toArray(children);
+    let state = (0, tooltip_2.useTooltipTriggerState)({
+        delay: 750,
+        ...props,
+    });
+    let tooltipTriggerRef = (0, react_1.useRef)(null);
+    let overlayRef = (0, react_1.useRef)(null);
+    let { triggerProps, tooltipProps } = (0, tooltip_1.useTooltipTrigger)({
+        isDisabled,
+        trigger: triggerAction,
+    }, state, tooltipTriggerRef);
+    let { overlayProps, arrowProps, placement } = (0, overlays_1.useOverlayPosition)({
+        placement: props.placement || 'top',
+        targetRef: tooltipTriggerRef,
+        overlayRef,
+        offset,
+        crossOffset,
+        isOpen: state.isOpen,
+    });
+    if (!activeWrap && typeof trigger === 'string') {
+        console.warn('CubeUIKit: Tooltips are only supported on elements that are both focusable and hoverable. To solve this issue you can: 1) Use active element as a trigger (`Button`, `Link`, etc); 2) Use `activeWrap` attribute to automatically wrap the content; 3) Use `ActiveZone` component to manually wrap the content.');
+        return (0, jsx_runtime_1.jsx)(Block_1.Block, { children: trigger }, void 0);
+    }
+    function onClick(e) {
+        e?.currentTarget?.parentNode.click();
+    }
+    return ((0, jsx_runtime_1.jsxs)(focus_1.FocusableProvider, { ...triggerProps, ref: tooltipTriggerRef, children: [activeWrap ? ((0, jsx_runtime_1.jsx)(ActiveZone_1.ActiveZone, { onClick: onClick, children: trigger }, void 0)) : (trigger), (0, jsx_runtime_1.jsx)(context_1.TooltipContext.Provider, { value: {
+                    state,
+                    placement,
+                    ref: overlayRef,
+                    overlayProps,
+                    arrowProps,
+                    minOffset: 'var(--gap)',
+                    minScale: '1',
+                    isMaterial,
+                    ...tooltipProps,
+                }, children: (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen, placement: props.placement || 'top', children: tooltip }, void 0) }, void 0)] }, void 0));
+}
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+let _TooltipTrigger = TooltipTrigger;
+exports.TooltipTrigger = _TooltipTrigger;
+
+