@obolnetwork/obol-ui 1.0.30 → 1.0.31

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

@@ -6,8 +6,9 @@ export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrim
 export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
 export interface TooltipComponentProps extends TooltipPrimitive.TooltipProps {
+    content: React.ReactNode | string;
     side?: "top" | "bottom" | "right" | "left";
     sideOffset?: number;
-    content: React.ReactNode | string;
+    showOnClick?: boolean;
 }
 export declare const TooltipComponent: React.FC<TooltipComponentProps>;

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { createStitches } from '@stitches/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
+import React, { useState, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -1134,11 +1134,10 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
         borderRadius: "$3",
         backgroundColor: "$bg04",
         alignItems: "center",
-        justifyItems: "center",
         width: "288px",
         gap: "$lg",
         py: "$xl",
-        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
+        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm", height: "116px" },
     } }, { children: [jsx(Box, __assign({ css: {
                 $$size: "160px",
                 width: "$$size",
@@ -1160,7 +1159,7 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
             } }, { children: jsx(Image, { placeholder: "blur", alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxs(Box, __assign({ css: {
                 display: "grid",
                 justifyContent: "center",
-                "@sm": { justifyContent: "start" },
+                "@sm": { justifyContent: "start", gridTemplateRows: "3fr 1fr" },
                 gap: "$sm",
             } }, { children: [jsxs(Box, __assign({ css: {
                         display: "flex",
@@ -1316,8 +1315,10 @@ var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = TooltipPrimitive.Content;
 var TooltipArrow = TooltipPrimitive.Arrow;
 var TooltipComponent = function (_a) {
-    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, props = __rest(_a, ["side", "sideOffset", "children", "content"]);
-    return (jsxs(Tooltip, __assign({}, props, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsx(StyledArrow, { className: "arrow" })] }))] })));
+    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, showOnClick = _a.showOnClick, props = __rest(_a, ["side", "sideOffset", "children", "content", "showOnClick"]);
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    var StyledContentComp = (jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsx(StyledArrow, { className: "arrow" })] })));
+    return (jsx(Provider, __assign({ delayDuration: 0, skipDelayDuration: 100 }, { children: showOnClick ? (jsxs(Tooltip, __assign({}, props, { open: open, onOpenChange: function () { return setOpen(false); } }, { children: [jsx(TooltipTrigger, __assign({ onClick: function () { return setOpen(true); }, asChild: true }, { children: children })), StyledContentComp] }))) : (jsxs(Tooltip, __assign({}, props, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), StyledContentComp] }))) })));
 };
 TooltipComponent.displayName = "Tooltip";
 

package/dist/index.js

@@ -1166,11 +1166,10 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
         borderRadius: "$3",
         backgroundColor: "$bg04",
         alignItems: "center",
-        justifyItems: "center",
         width: "288px",
         gap: "$lg",
         py: "$xl",
-        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
+        "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm", height: "116px" },
     } }, { children: [jsxRuntime.jsx(Box, __assign({ css: {
                 $$size: "160px",
                 width: "$$size",
@@ -1192,7 +1191,7 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
             } }, { children: jsxRuntime.jsx(Image, { placeholder: "blur", alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxRuntime.jsxs(Box, __assign({ css: {
                 display: "grid",
                 justifyContent: "center",
-                "@sm": { justifyContent: "start" },
+                "@sm": { justifyContent: "start", gridTemplateRows: "3fr 1fr" },
                 gap: "$sm",
             } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
                         display: "flex",
@@ -1348,8 +1347,10 @@ var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
 var TooltipContent = TooltipPrimitive__namespace.Content;
 var TooltipArrow = TooltipPrimitive__namespace.Arrow;
 var TooltipComponent = function (_a) {
-    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, props = __rest(_a, ["side", "sideOffset", "children", "content"]);
-    return (jsxRuntime.jsxs(Tooltip, __assign({}, props, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), jsxRuntime.jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsxRuntime.jsx(StyledArrow, { className: "arrow" })] }))] })));
+    var _b = _a.side, side = _b === void 0 ? "bottom" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 5 : _c, children = _a.children, content = _a.content, showOnClick = _a.showOnClick, props = __rest(_a, ["side", "sideOffset", "children", "content", "showOnClick"]);
+    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
+    var StyledContentComp = (jsxRuntime.jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsxRuntime.jsx(StyledArrow, { className: "arrow" })] })));
+    return (jsxRuntime.jsx(Provider, __assign({ delayDuration: 0, skipDelayDuration: 100 }, { children: showOnClick ? (jsxRuntime.jsxs(Tooltip, __assign({}, props, { open: open, onOpenChange: function () { return setOpen(false); } }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ onClick: function () { return setOpen(true); }, asChild: true }, { children: children })), StyledContentComp] }))) : (jsxRuntime.jsxs(Tooltip, __assign({}, props, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: children })), StyledContentComp] }))) })));
 };
 TooltipComponent.displayName = "Tooltip";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",