@homecode/ui 4.24.4 → 4.25.1

package/dist/esm/index.js

@@ -37,6 +37,7 @@ export { Shimmer } from './src/components/Shimmer/Shimmer.js';
 export { Spinner } from './src/components/Spinner/Spinner.js';
 export { Table } from './src/components/Table/Table.js';
 export { Tabs } from './src/components/Tabs/Tabs.js';
+export { Tooltip } from './src/components/Tooltip/Tooltip.js';
 export { H1, H2, H3, H4, H5, H6 } from './src/components/Text/Text.js';
 export { Theme } from './src/components/Theme/Theme.js';
 export { VH } from './src/components/VH/VH.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -54,6 +54,7 @@ import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
+import '../Tooltip/Tooltip.styl.js';
 import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';

package/dist/esm/src/components/Icon/icons/index.js

@@ -75,6 +75,7 @@ var ICONS = {
     soundWave: () => import('./soundWave.svg.js'),
     sparks: () => import('./sparks.svg.js'),
     star: () => import('./star.svg.js'),
+    stopInCircle: () => import('./stopInCircle.svg.js'),
     syncArrows: () => import('./syncArrows.svg.js'),
     table: () => import('./table.svg.js'),
     telegram: () => import('./telegram.svg.js'),

package/dist/esm/src/components/Icon/icons/stopInCircle.svg.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgStopInCircle = function SvgStopInCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.119.373a11.746 11.746 0 1 0 11.745 11.746A11.746 11.746 0 0 0 12.12.373m5.034 15.102a1.68 1.68 0 0 1-1.678 1.678H8.763a1.68 1.68 0 0 1-1.678-1.678V8.763a1.68 1.68 0 0 1 1.678-1.678h6.712a1.68 1.68 0 0 1 1.678 1.678z",
+    style: {
+      strokeWidth: 0.838985
+    }
+  }));
+};
+
+export { SvgStopInCircle as default };

package/dist/esm/src/components/Input/Input.js

@@ -52,6 +52,7 @@ import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
+import '../Tooltip/Tooltip.styl.js';
 import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -52,6 +52,7 @@ import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
+import '../Tooltip/Tooltip.styl.js';
 import '../Text/Text.js';
 import '../Virtualized/Virtualized.styl.js';
 import '../Virtualized/List/List.styl.js';

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

@@ -0,0 +1,72 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import S from './Tooltip.styl.js';
+import cn from 'classnames';
+
+const Tooltip = ({ children, content, delay = 0, direction = 'top', blur = false, }) => {
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timeoutRef = useRef();
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const positionTooltip = () => {
+            const rect = trigger.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            let top = 0;
+            let left = 0;
+            switch (direction) {
+                case 'top':
+                    top = rect.top - tooltipRect.height - 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'left':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.left - tooltipRect.width - 8;
+                    break;
+                case 'right':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.right + 8;
+                    break;
+            }
+            // Ensure tooltip stays within viewport
+            const padding = 10;
+            left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
+            top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
+            tooltip.style.left = `${left}px`;
+            tooltip.style.top = `${top}px`;
+        };
+        const showTooltip = () => {
+            timeoutRef.current = window.setTimeout(() => {
+                tooltip.showPopover?.();
+                positionTooltip();
+            }, delay);
+        };
+        const hideTooltip = () => {
+            clearTimeout(timeoutRef.current);
+            tooltip.hidePopover?.();
+        };
+        trigger.addEventListener('mouseenter', showTooltip);
+        trigger.addEventListener('mouseleave', hideTooltip);
+        trigger.addEventListener('focus', showTooltip);
+        trigger.addEventListener('blur', hideTooltip);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            trigger.removeEventListener('mouseenter', showTooltip);
+            trigger.removeEventListener('mouseleave', hideTooltip);
+            trigger.removeEventListener('focus', showTooltip);
+            trigger.removeEventListener('blur', hideTooltip);
+        };
+    }, [content, delay, direction]);
+    if (!content)
+        return jsx(Fragment, { children: children });
+    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, className: S.trigger, children: children }), jsx("div", { ref: tooltipRef, popover: "manual", className: cn(S.tooltip, blur && S.blur), "data-direction": direction, children: content })] }));
+};
+
+export { Tooltip };

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:\"\";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}";
+var S = {"trigger":"Tooltip_trigger__9GSNV","tooltip":"Tooltip_tooltip__tzL8q","blur":"Tooltip_blur__SQYHW","fadeIn":"Tooltip_fadeIn__Buhx4"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -75,6 +75,7 @@ declare const _default: {
     soundWave: () => Promise<any>;
     sparks: () => Promise<any>;
     star: () => Promise<any>;
+    stopInCircle: () => Promise<any>;
     syncArrows: () => Promise<any>;
     table: () => Promise<any>;
     telegram: () => Promise<any>;

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

@@ -0,0 +1,14 @@
+/// <reference types="uilib/components/tooltip/types" />
+export interface TooltipProps {
+    children: React.ReactNode;
+    content?: React.ReactNode;
+    delay?: number;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    blur?: boolean;
+}
+declare module 'react' {
+    interface HTMLAttributes<T> {
+        popover?: string;
+    }
+}
+export declare const Tooltip: ({ children, content, delay, direction, blur, }: TooltipProps) => JSX.Element;

package/dist/esm/types/src/components/Tooltip/TooltipProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="uilib/components/tooltip/types" />
+export declare function TooltipProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;

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

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export { TooltipProvider } from './TooltipProvider';
+export type { TooltipProps } from './Tooltip';

package/dist/esm/types/src/components/index.d.ts

@@ -37,6 +37,7 @@ export * from './Shimmer/Shimmer';
 export * from './Spinner/Spinner';
 export * from './Table/Table';
 export * from './Tabs/Tabs';
+export * from './Tooltip/Tooltip';
 export * from './Text/Text';
 export * from './Theme/Theme';
 export * from './VH/VH';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.24.4",
+  "version": "4.25.1",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",