@ayseaistudio/ui-components 3.2.2 → 3.2.3

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./style.css";
+type InfoTooltipProps = {
+    text: string;
+    className?: string;
+    icon?: React.JSX.Element;
+    withIcon?: boolean;
+};
+export declare const InfoTooltip: React.FC<InfoTooltipProps>;
+export default InfoTooltip;

package/dist/InfoTooltip/InfoTooltip.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./style.css";
+import { IconInfoCircle } from "@tabler/icons-react";
+export const InfoTooltip = ({ text, className, icon, withIcon = true }) => {
+    return (_jsxs("div", { className: `info ${className || ""}`.trim(), children: [withIcon ? (icon || _jsx(IconInfoCircle, { className: "icons", size: 16, color: "#5D5D5D" })) : null, _jsx("p", { className: "text-wrapper", children: text })] }));
+};
+export default InfoTooltip;

package/dist/InfoTooltip/index.d.ts

@@ -0,0 +1 @@
+export { InfoTooltip } from "./InfoTooltip";

package/dist/InfoTooltip/index.js

@@ -0,0 +1 @@
+export { InfoTooltip } from "./InfoTooltip";

package/dist/InfoTooltip/style.css

@@ -0,0 +1,35 @@
+.info {
+  align-items: flex-start;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: var(--drop-shadow-mid);
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  position: relative;
+  width: auto;
+  max-width: 276px;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.info .icons {
+  height: 16px !important;
+  position: relative !important;
+  width: 16px !important;
+}
+
+.info .text-wrapper {
+  color: #5d5d5d;
+  flex: 1;
+  font-family: var(--b2-medium-font-family);
+  font-size: var(--b2-medium-font-size);
+  font-style: var(--b2-medium-font-style);
+  font-weight: var(--b2-medium-font-weight);
+  letter-spacing: var(--b2-medium-letter-spacing);
+  line-height: var(--b2-medium-line-height);
+  margin-top: -1.00px;
+  position: relative;
+}
+
+

package/dist/Label/Label.d.ts

@@ -14,15 +14,17 @@ interface Props {
     spacing?: "off" | "on";
     className: any;
     divClassName?: string;
+    onClick?: () => void;
+    hover?: boolean;
+    tooltip?: string;
+    useInfoTooltip?: boolean;
+    tooltipWithIcon?: boolean;
 }
 export declare const Label: {
-    ({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, divClassName, }: Props): React.JSX.Element;
+    ({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, divClassName, onClick, hover, tooltip, useInfoTooltip, tooltipWithIcon, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
         title: PropTypes.Requireable<string>;
-        withLeftIcon: PropTypes.Requireable<boolean>;
-        withRightIcon: PropTypes.Requireable<boolean>;
-        withText: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         version: PropTypes.Requireable<string>;
@@ -30,6 +32,10 @@ export declare const Label: {
         bold: PropTypes.Requireable<string>;
         spacing: PropTypes.Requireable<string>;
         divClassName: PropTypes.Requireable<string>;
+        hover: PropTypes.Requireable<boolean>;
+        tooltip: PropTypes.Requireable<string>;
+        useInfoTooltip: PropTypes.Requireable<boolean>;
+        tooltipWithIcon: PropTypes.Requireable<boolean>;
     };
 };
 export {};

package/dist/Label/Label.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { createPortal } from "react-dom";
 import "./style.css";
+import { InfoTooltip } from "../InfoTooltip";
 const getIconColor = (version, color) => {
     if (version === "primary" && color === "black") {
         return "#5D5D5D";
@@ -32,21 +34,58 @@ const getIconClassName = (size) => {
     };
     return sizeClassMap[size] || "";
 };
-export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, divClassName, }) => {
-    return (_jsxs("div", { className: `label ${size} ${stroke} ${spacing} ${color} ${className}`, title: title, children: [leftIcon && (React.cloneElement(leftIcon, {
-                className: getIconClassName(size),
-                color: getIconColor(version, color)
-            })), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color} ${divClassName || ""}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
-                className: getIconClassName(size),
-                color: getIconColor(version, color)
-            }))] }));
+export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, divClassName, onClick, hover = false, tooltip = "", useInfoTooltip = false, tooltipWithIcon = true, }) => {
+    const strokeClass = stroke === "on" ? "stroke-on" : "stroke-off";
+    const tooltipTimerRef = useRef(undefined);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+    const labelRef = useRef(null);
+    const [anchorPos, setAnchorPos] = useState({ left: 0, top: 0 });
+    const hasLabelText = typeof text === "string" && text.trim().length > 0;
+    const tooltipText = hasLabelText ? (tooltip || text || "") : (tooltip || "");
+    useEffect(() => {
+        return () => {
+            if (tooltipTimerRef.current) {
+                window.clearTimeout(tooltipTimerRef.current);
+            }
+        };
+    }, []);
+    const handleMouseEnter = () => {
+        if (!tooltipText)
+            return;
+        const rect = labelRef.current?.getBoundingClientRect();
+        if (rect) {
+            setAnchorPos({ left: rect.left, top: rect.bottom });
+        }
+        tooltipTimerRef.current = window.setTimeout(() => {
+            setIsTooltipVisible(true);
+        }, 150);
+    };
+    const handleMouseLeave = () => {
+        if (tooltipTimerRef.current) {
+            window.clearTimeout(tooltipTimerRef.current);
+            tooltipTimerRef.current = undefined;
+        }
+        setIsTooltipVisible(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `label ${size} ${strokeClass} ${spacing} ${color} ${className} ${hover ? "hover-move" : ""}`, title: title, onClick: onClick, "data-testid": "label", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { cursor: hover ? "pointer" : "default" }, ref: labelRef, children: [leftIcon && (React.cloneElement(leftIcon, {
+                        className: getIconClassName(size),
+                        color: getIconColor(version, color)
+                    })), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color} ${divClassName || ""}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
+                        className: getIconClassName(size),
+                        color: getIconColor(version, color)
+                    }))] }), isTooltipVisible && useInfoTooltip
+                ? createPortal(_jsx("div", { style: {
+                        position: "fixed",
+                        top: Math.min(anchorPos.top + 6, (typeof window !== "undefined" ? window.innerHeight : 0) - 100),
+                        left: Math.max(8, Math.min(anchorPos.left, (typeof window !== "undefined" ? window.innerWidth : 0) - 300)),
+                        zIndex: 9999,
+                        pointerEvents: "none",
+                    }, children: _jsx(InfoTooltip, { text: tooltipText, withIcon: tooltipWithIcon }) }), document.body)
+                : null] }));
 };
 Label.propTypes = {
     text: PropTypes.string,
     title: PropTypes.string,
-    withLeftIcon: PropTypes.bool,
-    withRightIcon: PropTypes.bool,
-    withText: PropTypes.bool,
     size: PropTypes.oneOf(["large", "x-large", "medium", "small"]),
     color: PropTypes.oneOf([
         "mauve",
@@ -65,4 +104,8 @@ Label.propTypes = {
     bold: PropTypes.oneOf(["off", "on"]),
     spacing: PropTypes.oneOf(["off", "on"]),
     divClassName: PropTypes.string,
+    hover: PropTypes.bool,
+    tooltip: PropTypes.string,
+    useInfoTooltip: PropTypes.bool,
+    tooltipWithIcon: PropTypes.bool,
 };

package/dist/SecondaryButton/style.css

@@ -29,7 +29,6 @@
   align-items: center;
   display: flex;
   justify-content: center;
-  margin-top: -1.00px;
   position: relative;
   text-align: center;
   white-space: nowrap;

package/dist/TabButton/style.css

@@ -70,13 +70,20 @@
   display: flex;
   top: 272px;
   width: 107px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
 .tab-button.small.left-align {
   display: flex;
   width: 95px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 
+
 .tab-button.large .button {
   font-family: var(--h6-medium-font-family);
   font-size: var(--h6-medium-font-size);
@@ -125,6 +132,7 @@
   width: fit-content;
   display: flex;
   justify-content: flex-start;
+  align-items: center;
 }
 
 .tab-button.large.selected .button {

package/dist/index.d.ts

@@ -36,3 +36,4 @@ export { Flag } from "./Flag/Flag";
 export { MessageInputField } from "./MessageInputField/MessageInputField";
 export { TimeSelector } from "./TimeSelector/TimeSelector";
 export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";
+export { InfoTooltip } from "./InfoTooltip/InfoTooltip";

package/dist/index.js

@@ -36,3 +36,4 @@ export { Flag } from "./Flag/Flag";
 export { MessageInputField } from "./MessageInputField/MessageInputField";
 export { TimeSelector } from "./TimeSelector/TimeSelector";
 export { TabButtonForSidebar } from "./TabButtonForSidebar/TabButtonForSidebar";
+export { InfoTooltip } from "./InfoTooltip/InfoTooltip";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",