venice-ui 3.0.47 → 3.0.49

package/dist/cjs/components/Icon/Icon.js

@@ -39,9 +39,9 @@ const styled_components_1 = require("styled-components");
 const Icon_styles_1 = require("./Icon.styles");
 const IconsPath_1 = require("./IconsPath");
 const config_1 = require("../../config");
+const Tooltip_1 = require("../Tooltip");
 const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActive = false, isError = false, onClick, tooltip, color, background, hoverColor, hoverBackground, theme, themeVariant = 'default', }) => {
     const iconRef = (0, react_1.useRef)(null);
-    // const [showTooltip, setShowTooltip] = useState(false)
     const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -56,7 +56,7 @@ const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActive = fal
         }
     };
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
-        react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Tooltip_1.Tooltip, { content: tooltip, disabled: !tooltip },
             react_1.default.createElement(Icon_styles_1.IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize, 
                 // onMouseEnter={() => setShowTooltip(true)}
                 // onMouseLeave={() => setShowTooltip(false)}

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

@@ -1 +1,143 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const config_1 = require("../../config");
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const styled_components_1 = require("styled-components");
+const Tooltip_styles_1 = require("./Tooltip.styles");
+const Tooltip = ({ children, content, position = 'top', disabled = false, delay = 200, theme, themeVariant = 'default', }) => {
+    const { resolvedTheme, componentsConfig } = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const tooltipConfig = componentsConfig.tooltip;
+    const triggerRef = (0, react_1.useRef)(null);
+    const tooltipRef = (0, react_1.useRef)(null);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [coords, setCoords] = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+    });
+    (0, react_1.useEffect)(() => {
+        if (!visible)
+            return;
+        const trigger = triggerRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        let nextPosition = position;
+        if (position === 'top' && triggerRect.top - tooltipRect.height < 8) {
+            nextPosition = 'bottom';
+        }
+        if (position === 'bottom' &&
+            triggerRect.bottom + tooltipRect.height > window.innerHeight - 8) {
+            nextPosition = 'top';
+        }
+        if (position === 'left' && triggerRect.left - tooltipRect.width < 8) {
+            nextPosition = 'right';
+        }
+        if (position === 'right' &&
+            triggerRect.right + tooltipRect.width > window.innerWidth - 8) {
+            nextPosition = 'left';
+        }
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        switch (nextPosition) {
+            case 'top':
+                top = triggerRect.top + window.scrollY - tooltipRect.height - gap;
+                left =
+                    triggerRect.left +
+                        window.scrollX +
+                        triggerRect.width / 2 -
+                        tooltipRect.width / 2;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + window.scrollY + gap;
+                left =
+                    triggerRect.left +
+                        window.scrollX +
+                        triggerRect.width / 2 -
+                        tooltipRect.width / 2;
+                break;
+            case 'left':
+                top =
+                    triggerRect.top +
+                        window.scrollY +
+                        triggerRect.height / 2 -
+                        tooltipRect.height / 2;
+                left = triggerRect.left + window.scrollX - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top =
+                    triggerRect.top +
+                        window.scrollY +
+                        triggerRect.height / 2 -
+                        tooltipRect.height / 2;
+                left = triggerRect.right + window.scrollX + gap;
+                break;
+        }
+        setCoords({ top, left });
+    }, [visible, position]);
+    (0, react_1.useEffect)(() => {
+        const close = () => setVisible(false);
+        window.addEventListener('scroll', close, true);
+        window.addEventListener('resize', close);
+        return () => {
+            window.removeEventListener('scroll', close, true);
+            window.removeEventListener('resize', close);
+        };
+    }, []);
+    let timer;
+    const show = () => {
+        timer = setTimeout(() => {
+            setVisible(true);
+        }, delay);
+    };
+    const hide = () => {
+        clearTimeout(timer);
+        setVisible(false);
+    };
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Tooltip_styles_1.TooltipTriger, { ref: triggerRef, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }, children),
+        !disabled &&
+            visible &&
+            (0, react_dom_1.createPortal)(react_1.default.createElement(Tooltip_styles_1.TooltipRoot, { ref: tooltipRef, top: coords.top, left: coords.left, config: tooltipConfig, theme: resolvedTheme }, content), document.body)));
+};
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipRoot = exports.TooltipTriger = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.TooltipTriger = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: inline-flex;
+`;
+exports.TooltipRoot = styled_components_1.default.div `
+  box-sizing: border-box;
+  position: absolute;
+  z-index: ${({ config }) => config.size.zIndex};
+  background-color: ${({ config }) => config.color.background};
+  padding: ${({ config }) => `${config.size.paddingX}px ${config.size.paddingY}px`};
+  border-radius: ${({ config }) => `${config.size.radius}px`};
+  box-shadow: ${({ config }) => config.color.shadow};
+  color: ${({ config }) => config.color.text};
+  font-size: ${({ config }) => `${config.size.fontSize}px`};
+  line-height: ${({ config }) => `${config.size.lineHeight}px`};
+  top: ${({ top }) => `${top}px`};
+  left: ${({ left }) => `${left}px`};
+  white-space: nowrap;
+  pointer-events: none;
+`;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });

package/dist/cjs/config/config.js

@@ -95,6 +95,7 @@ const createTheme = (theme = 'default') => {
             inner: 'inset 0 1px 2px rgba(0,0,0,0.06)',
             card: ' 0px 1px 2px rgba(16, 24, 40, 0.04),0px 1px 3px rgba(16, 24, 40, 0.10);',
             modal: '0px 24px 48px rgba(15, 23, 42, 0.18),0px 8px 16px rgba(15, 23, 42, 0.12),0px 2px 4px rgba(15, 23, 42, 0.08)',
+            tooltip: '0 4px 12px rgba(0,0,0,.15)',
         },
         divider: {
             default: 'rgba(17,24,39,0.06)',
@@ -104,6 +105,7 @@ const createTheme = (theme = 'default') => {
         },
         other: {
             transparent: 'transparent',
+            almostBlack: p.neutral[800],
         },
     };
 };
@@ -235,6 +237,7 @@ exports.measurements = {
         modal: 1001,
         sidepanel: 900,
         sidepanelOverlayer: 850,
+        tooltip: 9999,
         uperModal: 1100,
     },
 };
@@ -1408,7 +1411,7 @@ const createComponentsConfig = (theme = 'default') => {
                         },
                         icon: {
                             width: exports.measurements.space.xl3,
-                        }
+                        },
                     },
                 },
             },
@@ -1440,6 +1443,21 @@ const createComponentsConfig = (theme = 'default') => {
                 },
             },
         },
+        tooltip: {
+            size: {
+                fontSize: exports.measurements.font.size.xs,
+                lineHeight: exports.measurements.font.lineHeight.xs,
+                paddingX: exports.measurements.space.sm,
+                paddingY: exports.measurements.space.md,
+                radius: exports.measurements.size.radius.sm,
+                zIndex: exports.measurements.zIndex.tooltip,
+            },
+            color: {
+                background: Theme.other.almostBlack, // or #111827
+                text: Theme.text.inverse,
+                shadow: Theme.shadow.tooltip,
+            },
+        },
     };
 };
 exports.createComponentsConfig = createComponentsConfig;

package/dist/cjs/index.js

@@ -47,5 +47,6 @@ __exportStar(require("./components/Table"), exports);
 __exportStar(require("./components/Tag"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Toggle"), exports);
+__exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/Typography"), exports);
 __exportStar(require("./types"), exports);

package/dist/esm/components/Icon/Icon.js

@@ -3,9 +3,9 @@ import { ThemeProvider } from 'styled-components';
 import { IconElement } from './Icon.styles';
 import { iconsPath } from './IconsPath';
 import { resolveThemeWithComponentsConfig } from '../../config';
+import { Tooltip } from '../Tooltip';
 export const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActive = false, isError = false, onClick, tooltip, color, background, hoverColor, hoverBackground, theme, themeVariant = 'default', }) => {
     const iconRef = useRef(null);
-    // const [showTooltip, setShowTooltip] = useState(false)
     const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -20,7 +20,7 @@ export const Icon = ({ name = 'person', size = 'lg', isDisabled = false, isActiv
         }
     };
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
-        React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { content: tooltip, disabled: !tooltip },
             React.createElement(IconElement, { ref: iconRef, config: componentsConfig, onClick: handleClick, isDisabled: isDisabled, isError: isError, isActive: isActive, color: color, background: background, hoverColor: hoverColor, hoverBackground: hoverBackground, resolvedSize: resolvedSize, 
                 // onMouseEnter={() => setShowTooltip(true)}
                 // onMouseLeave={() => setShowTooltip(false)}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1 +1,106 @@
-"use strict";
+import { resolveThemeWithComponentsConfig, } from '../../config';
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+import { TooltipRoot, TooltipTriger } from './Tooltip.styles';
+export const Tooltip = ({ children, content, position = 'top', disabled = false, delay = 200, theme, themeVariant = 'default', }) => {
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const tooltipConfig = componentsConfig.tooltip;
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState({
+        top: 0,
+        left: 0,
+    });
+    useEffect(() => {
+        if (!visible)
+            return;
+        const trigger = triggerRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        let nextPosition = position;
+        if (position === 'top' && triggerRect.top - tooltipRect.height < 8) {
+            nextPosition = 'bottom';
+        }
+        if (position === 'bottom' &&
+            triggerRect.bottom + tooltipRect.height > window.innerHeight - 8) {
+            nextPosition = 'top';
+        }
+        if (position === 'left' && triggerRect.left - tooltipRect.width < 8) {
+            nextPosition = 'right';
+        }
+        if (position === 'right' &&
+            triggerRect.right + tooltipRect.width > window.innerWidth - 8) {
+            nextPosition = 'left';
+        }
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        switch (nextPosition) {
+            case 'top':
+                top = triggerRect.top + window.scrollY - tooltipRect.height - gap;
+                left =
+                    triggerRect.left +
+                        window.scrollX +
+                        triggerRect.width / 2 -
+                        tooltipRect.width / 2;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + window.scrollY + gap;
+                left =
+                    triggerRect.left +
+                        window.scrollX +
+                        triggerRect.width / 2 -
+                        tooltipRect.width / 2;
+                break;
+            case 'left':
+                top =
+                    triggerRect.top +
+                        window.scrollY +
+                        triggerRect.height / 2 -
+                        tooltipRect.height / 2;
+                left = triggerRect.left + window.scrollX - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top =
+                    triggerRect.top +
+                        window.scrollY +
+                        triggerRect.height / 2 -
+                        tooltipRect.height / 2;
+                left = triggerRect.right + window.scrollX + gap;
+                break;
+        }
+        setCoords({ top, left });
+    }, [visible, position]);
+    useEffect(() => {
+        const close = () => setVisible(false);
+        window.addEventListener('scroll', close, true);
+        window.addEventListener('resize', close);
+        return () => {
+            window.removeEventListener('scroll', close, true);
+            window.removeEventListener('resize', close);
+        };
+    }, []);
+    let timer;
+    const show = () => {
+        timer = setTimeout(() => {
+            setVisible(true);
+        }, delay);
+    };
+    const hide = () => {
+        clearTimeout(timer);
+        setVisible(false);
+    };
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(TooltipTriger, { ref: triggerRef, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide }, children),
+        !disabled &&
+            visible &&
+            createPortal(React.createElement(TooltipRoot, { ref: tooltipRef, top: coords.top, left: coords.left, config: tooltipConfig, theme: resolvedTheme }, content), document.body)));
+};

package/dist/esm/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const TooltipTriger = styled.div `
+  box-sizing: border-box;
+  display: inline-flex;
+`;
+export const TooltipRoot = styled.div `
+  box-sizing: border-box;
+  position: absolute;
+  z-index: ${({ config }) => config.size.zIndex};
+  background-color: ${({ config }) => config.color.background};
+  padding: ${({ config }) => `${config.size.paddingX}px ${config.size.paddingY}px`};
+  border-radius: ${({ config }) => `${config.size.radius}px`};
+  box-shadow: ${({ config }) => config.color.shadow};
+  color: ${({ config }) => config.color.text};
+  font-size: ${({ config }) => `${config.size.fontSize}px`};
+  line-height: ${({ config }) => `${config.size.lineHeight}px`};
+  top: ${({ top }) => `${top}px`};
+  left: ${({ left }) => `${left}px`};
+  white-space: nowrap;
+  pointer-events: none;
+`;

package/dist/esm/components/Tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/dist/esm/config/config.js

@@ -92,6 +92,7 @@ export const createTheme = (theme = 'default') => {
             inner: 'inset 0 1px 2px rgba(0,0,0,0.06)',
             card: ' 0px 1px 2px rgba(16, 24, 40, 0.04),0px 1px 3px rgba(16, 24, 40, 0.10);',
             modal: '0px 24px 48px rgba(15, 23, 42, 0.18),0px 8px 16px rgba(15, 23, 42, 0.12),0px 2px 4px rgba(15, 23, 42, 0.08)',
+            tooltip: '0 4px 12px rgba(0,0,0,.15)',
         },
         divider: {
             default: 'rgba(17,24,39,0.06)',
@@ -101,6 +102,7 @@ export const createTheme = (theme = 'default') => {
         },
         other: {
             transparent: 'transparent',
+            almostBlack: p.neutral[800],
         },
     };
 };
@@ -231,6 +233,7 @@ export const measurements = {
         modal: 1001,
         sidepanel: 900,
         sidepanelOverlayer: 850,
+        tooltip: 9999,
         uperModal: 1100,
     },
 };
@@ -1403,7 +1406,7 @@ export const createComponentsConfig = (theme = 'default') => {
                         },
                         icon: {
                             width: measurements.space.xl3,
-                        }
+                        },
                     },
                 },
             },
@@ -1435,6 +1438,21 @@ export const createComponentsConfig = (theme = 'default') => {
                 },
             },
         },
+        tooltip: {
+            size: {
+                fontSize: measurements.font.size.xs,
+                lineHeight: measurements.font.lineHeight.xs,
+                paddingX: measurements.space.sm,
+                paddingY: measurements.space.md,
+                radius: measurements.size.radius.sm,
+                zIndex: measurements.zIndex.tooltip,
+            },
+            color: {
+                background: Theme.other.almostBlack, // or #111827
+                text: Theme.text.inverse,
+                shadow: Theme.shadow.tooltip,
+            },
+        },
     };
 };
 export const Theme = createTheme('default');

package/dist/esm/index.js

@@ -31,5 +31,6 @@ export * from './components/Table';
 export * from './components/Tag';
 export * from './components/Tile';
 export * from './components/Toggle';
+export * from './components/Tooltip';
 export * from './components/Typography';
 export * from './types';

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { AppTheme, ThemeName } from '../../config';
+import { FC, ReactNode } from 'react';
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface ITooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    position?: TooltipPosition;
+    disabled?: boolean;
+    delay?: number;
+    theme?: AppTheme;
+    themeVariant?: ThemeName;
+}
+export declare const Tooltip: FC<ITooltipProps>;
+export {};

package/dist/types/components/Tooltip/Tooltip.styles.d.ts

@@ -0,0 +1,10 @@
+import { AppTheme } from 'config';
+export declare const TooltipTriger: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ITooltipRootProps {
+    theme: AppTheme;
+    config: any;
+    top: number;
+    left: number;
+}
+export declare const TooltipRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITooltipRootProps, never>;
+export {};

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

package/dist/types/config/config.d.ts

@@ -89,6 +89,7 @@ export declare const createTheme: (theme?: ThemeName | AppTheme) => {
         inner: string;
         card: string;
         modal: string;
+        tooltip: string;
     };
     divider: {
         default: string;
@@ -98,6 +99,7 @@ export declare const createTheme: (theme?: ThemeName | AppTheme) => {
     };
     other: {
         transparent: string;
+        almostBlack: "#1F2937";
     };
 };
 export type ThemeConfig = ReturnType<typeof createTheme>;
@@ -228,6 +230,7 @@ export declare const measurements: {
         readonly modal: 1001;
         readonly sidepanel: 900;
         readonly sidepanelOverlayer: 850;
+        readonly tooltip: 9999;
         readonly uperModal: 1100;
     };
 };
@@ -1478,6 +1481,21 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
             };
         };
     };
+    tooltip: {
+        size: {
+            fontSize: 12;
+            lineHeight: 16;
+            paddingX: 8;
+            paddingY: 12;
+            radius: 8;
+            zIndex: 9999;
+        };
+        color: {
+            background: "#1F2937";
+            text: "#FFFFFF";
+            shadow: string;
+        };
+    };
 };
 export type ComponentsConfig = ReturnType<typeof createComponentsConfig>;
 export declare const Theme: {
@@ -1570,6 +1588,7 @@ export declare const Theme: {
         inner: string;
         card: string;
         modal: string;
+        tooltip: string;
     };
     divider: {
         default: string;
@@ -1579,6 +1598,7 @@ export declare const Theme: {
     };
     other: {
         transparent: string;
+        almostBlack: "#1F2937";
     };
 };
 export declare const componentsConfig: {
@@ -2800,6 +2820,21 @@ export declare const componentsConfig: {
             };
         };
     };
+    tooltip: {
+        size: {
+            fontSize: 12;
+            lineHeight: 16;
+            paddingX: 8;
+            paddingY: 12;
+            radius: 8;
+            zIndex: 9999;
+        };
+        color: {
+            background: "#1F2937";
+            text: "#FFFFFF";
+            shadow: string;
+        };
+    };
 };
 export declare const createConfig: (theme?: ThemeName | AppTheme) => {
     Theme: {
@@ -2892,6 +2927,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
             inner: string;
             card: string;
             modal: string;
+            tooltip: string;
         };
         divider: {
             default: string;
@@ -2901,6 +2937,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
         };
         other: {
             transparent: string;
+            almostBlack: "#1F2937";
         };
     };
     measurements: {
@@ -3030,6 +3067,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
             readonly modal: 1001;
             readonly sidepanel: 900;
             readonly sidepanelOverlayer: 850;
+            readonly tooltip: 9999;
             readonly uperModal: 1100;
         };
     };
@@ -4266,5 +4304,20 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                 };
             };
         };
+        tooltip: {
+            size: {
+                fontSize: 12;
+                lineHeight: 16;
+                paddingX: 8;
+                paddingY: 12;
+                radius: 8;
+                zIndex: 9999;
+            };
+            color: {
+                background: "#1F2937";
+                text: "#FFFFFF";
+                shadow: string;
+            };
+        };
     };
 };

package/dist/types/index.d.ts

@@ -31,5 +31,6 @@ export * from './components/Table';
 export * from './components/Tag';
 export * from './components/Tile';
 export * from './components/Toggle';
+export * from './components/Tooltip';
 export * from './components/Typography';
 export * from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.47",
+  "version": "3.0.49",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",