@versini/ui-tooltip 2.1.1 → 2.1.2

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/README.md +35 -2
  2. package/dist/components/Tooltip/Tooltip.js +77 -78
  3. package/dist/index.js +3 -3
  4. package/package.json +6 -5
package/README.md CHANGED
@@ -1,3 +1,36 @@
1
- # @versini/ui-card
1
+ # @versini/ui-tooltip
2
2
 
3
- A simple tooltip component for React.
3
+ [![npm version](https://img.shields.io/npm/v/@versini/ui-tooltip?style=flat-square)](https://www.npmjs.com/package/@versini/ui-tooltip)
4
+
5
+ > An accessible React tooltip component built with TypeScript and TailwindCSS.
6
+
7
+ The Tooltip component provides contextual help and information with proper accessibility support and customizable positioning.
8
+
9
+
10
+ ## Table of Contents
11
+
12
+ - [Features](#features)
13
+ - [Installation](#installation)
14
+ - [Usage](#usage)
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install @versini/ui-tooltip
20
+ ```
21
+
22
+ > **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
23
+
24
+ ## Usage
25
+
26
+ ```tsx
27
+ import { Tooltip } from "@versini/ui-tooltip";
28
+
29
+ function App() {
30
+ return (
31
+ <Tooltip content="This is a helpful tooltip">
32
+ <button>Hover me</button>
33
+ </Tooltip>
34
+ );
35
+ }
36
+ ```
package/dist/components/Tooltip/Tooltip.js CHANGED
@@ -1,73 +1,73 @@
1
- import { jsxs as O, jsx as z } from "react/jsx-runtime";
2
- import { computePosition as F, offset as H, flip as U, shift as V, arrow as W } from "@floating-ui/react";
3
- import { useRef as f, useEffect as T, useState as w, useCallback as x } from "react";
4
- import p from "clsx";
5
- const Y = "av-tooltip", q = "av-tooltip-arrow", I = ["mousedown", "touchstart"];
6
- function G(t, n, s) {
7
- const a = f(null);
1
+ import { jsxs as E, jsx as _ } from "react/jsx-runtime";
2
+ import { computePosition as j, offset as B, flip as $, shift as z, arrow as F } from "@floating-ui/react";
3
+ import { useRef as p, useEffect as T, useState as h, useCallback as x } from "react";
4
+ import i from "clsx";
5
+ const H = "av-tooltip", U = "av-tooltip-arrow", L = ["mousedown", "touchstart"];
6
+ function V(t, n, s) {
7
+ const a = p(null);
8
8
  return T(() => {
9
9
  const r = (e) => {
10
10
  const o = e ? e.target : void 0;
11
11
  if (Array.isArray(s)) {
12
- const l = !document.body.contains(o) && o.tagName !== "HTML";
12
+ const c = !document.body.contains(o) && o.tagName !== "HTML";
13
13
  s.every(
14
- (c) => !!c && !e.composedPath().includes(c)
15
- ) && !l && t();
14
+ (l) => !!l && !e.composedPath().includes(l)
15
+ ) && !c && t();
16
16
  } else a.current && !a.current.contains(o) && t();
17
17
  };
18
- return I.forEach(
18
+ return L.forEach(
19
19
  (e) => document.addEventListener(e, r)
20
20
  ), () => {
21
- I.forEach(
21
+ L.forEach(
22
22
  (e) => document.removeEventListener(e, r)
23
23
  );
24
24
  };
25
25
  }, [t, s, n]), a;
26
26
  }
27
- function J(t, n) {
28
- const [s, a] = w(!1), r = f(null), e = f(null), o = x(() => {
29
- a((c) => (!c && (!r.current || r.current === -1) && (r.current = window.setInterval(e.current, n)), !0));
30
- }, [n]), l = x(() => {
27
+ function W(t, n) {
28
+ const [s, a] = h(!1), r = p(null), e = p(null), o = x(() => {
29
+ a((l) => (!l && (!r.current || r.current === -1) && (r.current = window.setInterval(e.current, n)), !0));
30
+ }, [n]), c = x(() => {
31
31
  a(!1), window.clearInterval(r.current || -1), r.current = -1;
32
32
  }, []);
33
- return T(() => (e.current = t, s && o(), l), [t, s, o, l]), { start: o, stop: l, active: s };
33
+ return T(() => (e.current = t, s && o(), c), [t, s, o, c]), { start: o, stop: c, active: s };
34
34
  }
35
- const d = (t, n = "px") => typeof t > "u" ? "" : `${Math.round(t)}${n}`, K = () => p("absolute top-0 left-0 w-max py-1 px-2 rounded-sm text-sm z-50"), N = ({
35
+ const d = (t, n = "px") => typeof t > "u" ? "" : `${Math.round(t)}${n}`, Y = () => i("absolute top-0 left-0 w-max py-1 px-2 rounded-sm text-sm z-50"), S = ({
36
36
  mode: t
37
- }) => p({
37
+ }) => i({
38
38
  "bg-surface-darker": t === "dark" || t === "system",
39
39
  "bg-surface-light": t === "light" || t === "alt-system",
40
40
  "dark:bg-surface-light": t === "system",
41
41
  "dark:bg-surface-darker": t === "alt-system"
42
- }), Q = ({
42
+ }), q = ({
43
43
  mode: t
44
- }) => p({
44
+ }) => i({
45
45
  "text-copy-light": t === "dark" || t === "system",
46
46
  "text-copy-dark": t === "light" || t === "alt-system",
47
47
  "dark:text-copy-dark": t === "system",
48
48
  "dark:text-copy-light": t === "alt-system"
49
- }), X = () => p("absolute", "size-2", "transform rotate-45"), Z = ({
49
+ }), G = () => i("absolute", "size-2", "transform rotate-45"), J = ({
50
50
  mode: t,
51
51
  className: n,
52
52
  tooltipClassName: s,
53
53
  arrowClassName: a
54
54
  }) => {
55
- const r = p("relative inline-block", n), e = p(
56
- Y,
57
- K(),
58
- N({ mode: t }),
59
- Q({ mode: t }),
55
+ const r = i("relative inline-block", n), e = i(
56
+ H,
57
+ Y(),
58
+ S({ mode: t }),
59
+ q({ mode: t }),
60
60
  s
61
- ), o = p(
62
- q,
63
- X(),
64
- N({ mode: t }),
61
+ ), o = i(
62
+ U,
63
+ G(),
64
+ S({ mode: t }),
65
65
  a
66
66
  );
67
67
  return { tooltip: e, arrow: o, wrapper: r };
68
- }, tt = ({ delay: t = 300 }) => ({
68
+ }, K = ({ delay: t = 300 }) => ({
69
69
  animation: `av-tooltip-fade-in ${t}ms ease-in-out`
70
- }), et = 5e3, at = ({
70
+ }), Q = 5e3, st = ({
71
71
  trigger: t,
72
72
  label: n,
73
73
  placement: s = "top",
@@ -75,86 +75,85 @@ const d = (t, n = "px") => typeof t > "u" ? "" : `${Math.round(t)}${n}`, K = ()
75
75
  delay: r = 300,
76
76
  className: e,
77
77
  tooltipClassName: o,
78
- arrowClassName: l
78
+ arrowClassName: c
79
79
  }) => {
80
- const c = G(() => {
80
+ const l = V(() => {
81
81
  k.stop(), g(!1);
82
- }), i = f(null), u = f(null), [y, m] = w(!1), [b, g] = w(!1), k = J(() => {
82
+ }), u = p(null), f = p(null), [y, m] = h(!1), [b, g] = h(!1), k = W(() => {
83
83
  g(!1);
84
- }, et), h = Z({
84
+ }, Q), w = J({
85
85
  mode: a,
86
86
  className: e,
87
87
  tooltipClassName: o,
88
- arrowClassName: l
89
- }), v = tt({ delay: r }), C = x(async () => {
90
- var A, E, L, S;
91
- if (c.current && i.current && u.current) {
88
+ arrowClassName: c
89
+ }), v = K({ delay: r }), A = x(async () => {
90
+ if (l.current && u.current && f.current) {
92
91
  const {
93
- x: j,
94
- y: B,
95
- middlewareData: M,
96
- placement: R
97
- } = await F(c.current, i.current, {
92
+ x: N,
93
+ y: R,
94
+ middlewareData: C,
95
+ placement: D
96
+ } = await j(l.current, u.current, {
98
97
  placement: s,
99
98
  middleware: [
100
- H(10),
101
- U({
99
+ B(10),
100
+ $({
102
101
  crossAxis: s.includes("-"),
103
102
  fallbackAxisSideDirection: "start"
104
103
  }),
105
- V({ padding: 5 }),
106
- W({ element: u.current })
104
+ z({ padding: 5 }),
105
+ F({ element: f.current })
107
106
  ]
108
107
  });
109
- (A = i == null ? void 0 : i.current) != null && A.style && Object.assign(i.current.style, {
110
- left: d(j),
111
- top: d(B),
108
+ u?.current?.style && Object.assign(u.current.style, {
109
+ left: d(N),
110
+ top: d(R),
112
111
  ...v
113
112
  });
114
- const $ = {
113
+ const P = {
115
114
  top: "bottom",
116
115
  right: "left",
117
116
  bottom: "top",
118
117
  left: "right"
119
- }[R.split("-")[0]];
120
- (E = u == null ? void 0 : u.current) != null && E.style && Object.assign(u.current.style, {
121
- left: d((L = M.arrow) == null ? void 0 : L.x),
122
- top: d((S = M.arrow) == null ? void 0 : S.y),
118
+ }[D.split("-")[0]];
119
+ f?.current?.style && Object.assign(f.current.style, {
120
+ left: d(C.arrow?.x),
121
+ top: d(C.arrow?.y),
123
122
  right: "",
124
123
  bottom: "",
125
- [$]: "-4px"
124
+ [P]: "-4px"
126
125
  });
127
126
  }
128
- }, [s, v, c]);
127
+ }, [s, v, l]);
129
128
  T(() => {
130
- (async () => y && await C())();
131
- }, [C, y]);
132
- const D = () => {
129
+ (async () => y && await A())();
130
+ }, [A, y]);
131
+ const M = () => {
133
132
  m(!1), g(!0), k.start();
134
- }, P = () => {
133
+ }, O = () => {
135
134
  b || m(!0);
136
- }, _ = () => {
135
+ }, I = () => {
137
136
  b || m(!1);
138
137
  };
139
- return /* @__PURE__ */ O(
138
+ return /* @__PURE__ */ E(
140
139
  "div",
141
140
  {
142
- className: h.wrapper,
143
- ref: c,
144
- onMouseEnter: P,
145
- onMouseLeave: _,
146
- onClick: D,
141
+ className: w.wrapper,
142
+ ref: l,
143
+ onMouseEnter: O,
144
+ onMouseLeave: I,
145
+ onClick: M,
147
146
  children: [
148
147
  t,
149
- y && /* @__PURE__ */ O(
148
+ y && /* @__PURE__ */ E(
150
149
  "div",
151
150
  {
152
151
  role: "tooltip",
153
- ref: i,
154
- className: h.tooltip,
152
+ ref: u,
153
+ className: w.tooltip,
155
154
  children: [
156
155
  n,
157
- /* @__PURE__ */ z("div", { ref: u, className: h.arrow })
156
+ /* @__PURE__ */ _("div", { ref: f, className: w.arrow })
158
157
  ]
159
158
  }
160
159
  )
@@ -163,7 +162,7 @@ const d = (t, n = "px") => typeof t > "u" ? "" : `${Math.round(t)}${n}`, K = ()
163
162
  );
164
163
  };
165
164
  export {
166
- q as TOOLTIP_ARROW_CLASSNAME,
167
- Y as TOOLTIP_CLASSNAME,
168
- at as Tooltip
165
+ U as TOOLTIP_ARROW_CLASSNAME,
166
+ H as TOOLTIP_CLASSNAME,
167
+ st as Tooltip
169
168
  };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { TOOLTIP_ARROW_CLASSNAME as T, TOOLTIP_CLASSNAME as I, Tooltip as e } from "./components/Tooltip/Tooltip.js";
2
2
  /*!
3
- @versini/ui-tooltip v2.1.1
3
+ @versini/ui-tooltip v2.1.2
4
4
  © 2025 gizmette.com
5
5
  */
6
6
  try {
7
7
  window.__VERSINI_UI_TOOLTIP__ || (window.__VERSINI_UI_TOOLTIP__ = {
8
- version: "2.1.1",
9
- buildTime: "07/14/2025 12:05 PM EDT",
8
+ version: "2.1.2",
9
+ buildTime: "08/07/2025 04:12 PM EDT",
10
10
  homepage: "https://github.com/aversini/ui-components",
11
11
  license: "MIT"
12
12
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-tooltip",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -27,6 +27,7 @@
27
27
  "dev:types": "tsup --watch src",
28
28
  "dev": "npm-run-all clean --parallel dev:js dev:types",
29
29
  "lint": "biome lint src",
30
+ "lint:fix": "biome check src --write --no-errors-on-unmatched",
30
31
  "prettier": "biome check --write --no-errors-on-unmatched",
31
32
  "start": "static-server dist --port 5173",
32
33
  "test:coverage:ui": "vitest --coverage --ui",
@@ -39,11 +40,11 @@
39
40
  "react-dom": "^18.3.1 || ^19.0.0"
40
41
  },
41
42
  "devDependencies": {
42
- "@testing-library/jest-dom": "6.6.3",
43
- "@versini/ui-types": "5.0.5"
43
+ "@testing-library/jest-dom": "6.6.4",
44
+ "@versini/ui-types": "5.0.6"
44
45
  },
45
46
  "dependencies": {
46
- "@floating-ui/react": "0.27.13",
47
+ "@floating-ui/react": "0.27.15",
47
48
  "@tailwindcss/typography": "0.5.16",
48
49
  "@versini/ui-hooks": "4.7.5",
49
50
  "clsx": "2.1.1",
@@ -52,5 +53,5 @@
52
53
  "sideEffects": [
53
54
  "**/*.css"
54
55
  ],
55
- "gitHead": "097e81ba959c30dc2ee37ff9050981a02420360b"
56
+ "gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
56
57
  }