@obolnetwork/obol-ui 1.0.29 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/atoms/Tooltip/Tooltip.d.ts +2 -1
  2. package/dist/index.es.js +18 -18
  3. package/dist/index.js +17 -17
  4. package/package.json +1 -1
package/dist/components/atoms/Tooltip/Tooltip.d.ts CHANGED
@@ -6,8 +6,9 @@ export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrim
6
6
  export declare const TooltipContent: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
7
7
  export declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
8
8
  export interface TooltipComponentProps extends TooltipPrimitive.TooltipProps {
9
+ content: React.ReactNode | string;
9
10
  side?: "top" | "bottom" | "right" | "left";
10
11
  sideOffset?: number;
11
- content: React.ReactNode | string;
12
+ showOnClick?: boolean;
12
13
  }
13
14
  export declare const TooltipComponent: React.FC<TooltipComponentProps>;
package/dist/index.es.js CHANGED
@@ -2,7 +2,7 @@ import { createStitches } from '@stitches/react';
2
2
  import * as TabsPrimitive from '@radix-ui/react-tabs';
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
5
- import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
5
+ import React, { useState, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
6
6
  import * as TooltipPrimitive from '@radix-ui/react-tooltip';
7
7
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
8
8
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -1134,11 +1134,10 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
1134
1134
  borderRadius: "$3",
1135
1135
  backgroundColor: "$bg04",
1136
1136
  alignItems: "center",
1137
- justifyItems: "center",
1138
1137
  width: "288px",
1139
1138
  gap: "$lg",
1140
1139
  py: "$xl",
1141
- "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
1140
+ "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm", height: "116px" },
1142
1141
  } }, { children: [jsx(Box, __assign({ css: {
1143
1142
  $$size: "160px",
1144
1143
  width: "$$size",
@@ -1160,7 +1159,7 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ className:
1160
1159
  } }, { children: jsx(Image, { placeholder: "blur", alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxs(Box, __assign({ css: {
1161
1160
  display: "grid",
1162
1161
  justifyContent: "center",
1163
- "@sm": { justifyContent: "start" },
1162
+ "@sm": { justifyContent: "start", gridTemplateRows: "3fr 1fr" },
1164
1163
  gap: "$sm",
1165
1164
  } }, { children: [jsxs(Box, __assign({ css: {
1166
1165
  display: "flex",
@@ -1316,8 +1315,10 @@ var TooltipTrigger = TooltipPrimitive.Trigger;
1316
1315
  var TooltipContent = TooltipPrimitive.Content;
1317
1316
  var TooltipArrow = TooltipPrimitive.Arrow;
1318
1317
  var TooltipComponent = function (_a) {
1319
- 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"]);
1320
- 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" })] }))] })));
1318
+ 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"]);
1319
+ var _d = useState(false), open = _d[0], setOpen = _d[1];
1320
+ var StyledContentComp = (jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsx(StyledArrow, { className: "arrow" })] })));
1321
+ 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] }))) })));
1321
1322
  };
1322
1323
  TooltipComponent.displayName = "Tooltip";
1323
1324
 
@@ -1612,24 +1613,23 @@ var AdvisoryToggleBullet = function (props) {
1612
1613
  }
1613
1614
  return (jsxs(Box, __assign({ className: "advisory-bullet", css: {
1614
1615
  display: "flex",
1615
- flexWrap: "wrap",
1616
1616
  alignItems: "center",
1617
1617
  gap: "$xs",
1618
1618
  minHeight: "$2xl",
1619
1619
  pl: "calc($2xl - 2px)",
1620
1620
  ml: "-2px",
1621
1621
  borderLeft: "2px solid transparent"
1622
- } }, { children: [props.state === "completed" ? (jsx(BulletCheckIcon, {})) : (jsx(Box, __assign({ css: {
1623
- display: "grid",
1624
- placeItems: "center",
1625
- width: "$lg",
1626
- height: "$lg",
1627
- backgroundColor: props.state === "upcoming" ? "$bg03" : "$obolMidGreen",
1628
- borderRadius: "$round",
1629
- fontSize: "$3",
1630
- fontWeight: "$bold",
1631
- color: props.state === "upcoming" ? "$muted" : "$obolGreen",
1632
- } }, { children: props.rank }))), jsx(Text, __assign({ color: color }, { children: props.children }))] })));
1622
+ } }, { children: [props.state === "completed" ? (jsx(Box, { children: jsx(BulletCheckIcon, {}) })) : (jsx(Box, { children: jsx(Box, __assign({ css: {
1623
+ display: "grid",
1624
+ placeItems: "center",
1625
+ width: "$lg",
1626
+ height: "$lg",
1627
+ backgroundColor: props.state === "upcoming" ? "$bg03" : "$obolMidGreen",
1628
+ borderRadius: "$round",
1629
+ fontSize: "$3",
1630
+ fontWeight: "$bold",
1631
+ color: props.state === "upcoming" ? "$muted" : "$obolGreen",
1632
+ } }, { children: props.rank })) })), jsx(Text, __assign({ color: color }, { children: props.children }))] })));
1633
1633
  };
1634
1634
 
1635
1635
  var CardImage = styled(Image, {
package/dist/index.js CHANGED
@@ -1166,11 +1166,10 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
1166
1166
  borderRadius: "$3",
1167
1167
  backgroundColor: "$bg04",
1168
1168
  alignItems: "center",
1169
- justifyItems: "center",
1170
1169
  width: "288px",
1171
1170
  gap: "$lg",
1172
1171
  py: "$xl",
1173
- "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
1172
+ "@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm", height: "116px" },
1174
1173
  } }, { children: [jsxRuntime.jsx(Box, __assign({ css: {
1175
1174
  $$size: "160px",
1176
1175
  width: "$$size",
@@ -1192,7 +1191,7 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
1192
1191
  } }, { children: jsxRuntime.jsx(Image, { placeholder: "blur", alt: props.heading, css: { borderRadius: "$round" }, src: props.image, width: 160, height: 160 }) })), jsxRuntime.jsxs(Box, __assign({ css: {
1193
1192
  display: "grid",
1194
1193
  justifyContent: "center",
1195
- "@sm": { justifyContent: "start" },
1194
+ "@sm": { justifyContent: "start", gridTemplateRows: "3fr 1fr" },
1196
1195
  gap: "$sm",
1197
1196
  } }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
1198
1197
  display: "flex",
@@ -1348,8 +1347,10 @@ var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
1348
1347
  var TooltipContent = TooltipPrimitive__namespace.Content;
1349
1348
  var TooltipArrow = TooltipPrimitive__namespace.Arrow;
1350
1349
  var TooltipComponent = function (_a) {
1351
- 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"]);
1352
- 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" })] }))] })));
1350
+ 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"]);
1351
+ var _d = React.useState(false), open = _d[0], setOpen = _d[1];
1352
+ var StyledContentComp = (jsxRuntime.jsxs(StyledContent$1, __assign({ className: "tooltip-content", side: side, sideOffset: sideOffset }, { children: [content, jsxRuntime.jsx(StyledArrow, { className: "arrow" })] })));
1353
+ 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] }))) })));
1353
1354
  };
1354
1355
  TooltipComponent.displayName = "Tooltip";
1355
1356
 
@@ -1644,24 +1645,23 @@ var AdvisoryToggleBullet = function (props) {
1644
1645
  }
1645
1646
  return (jsxRuntime.jsxs(Box, __assign({ className: "advisory-bullet", css: {
1646
1647
  display: "flex",
1647
- flexWrap: "wrap",
1648
1648
  alignItems: "center",
1649
1649
  gap: "$xs",
1650
1650
  minHeight: "$2xl",
1651
1651
  pl: "calc($2xl - 2px)",
1652
1652
  ml: "-2px",
1653
1653
  borderLeft: "2px solid transparent"
1654
- } }, { children: [props.state === "completed" ? (jsxRuntime.jsx(BulletCheckIcon, {})) : (jsxRuntime.jsx(Box, __assign({ css: {
1655
- display: "grid",
1656
- placeItems: "center",
1657
- width: "$lg",
1658
- height: "$lg",
1659
- backgroundColor: props.state === "upcoming" ? "$bg03" : "$obolMidGreen",
1660
- borderRadius: "$round",
1661
- fontSize: "$3",
1662
- fontWeight: "$bold",
1663
- color: props.state === "upcoming" ? "$muted" : "$obolGreen",
1664
- } }, { children: props.rank }))), jsxRuntime.jsx(Text, __assign({ color: color }, { children: props.children }))] })));
1654
+ } }, { children: [props.state === "completed" ? (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(BulletCheckIcon, {}) })) : (jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Box, __assign({ css: {
1655
+ display: "grid",
1656
+ placeItems: "center",
1657
+ width: "$lg",
1658
+ height: "$lg",
1659
+ backgroundColor: props.state === "upcoming" ? "$bg03" : "$obolMidGreen",
1660
+ borderRadius: "$round",
1661
+ fontSize: "$3",
1662
+ fontWeight: "$bold",
1663
+ color: props.state === "upcoming" ? "$muted" : "$obolGreen",
1664
+ } }, { children: props.rank })) })), jsxRuntime.jsx(Text, __assign({ color: color }, { children: props.children }))] })));
1665
1665
  };
1666
1666
 
1667
1667
  var CardImage = styled(Image, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obolnetwork/obol-ui",
3
- "version": "1.0.29",
3
+ "version": "1.0.31",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.es.js",
6
6
  "license": "MIT",