@ssaprt/tooltip 1.0.0

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 (11) hide show
  1. package/LICENCE +5 -0
  2. package/README.md +1071 -0
  3. package/dist/index.css +344 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.d.mts +117 -0
  6. package/dist/index.d.ts +117 -0
  7. package/dist/index.js +2364 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/index.mjs +2355 -0
  10. package/dist/index.mjs.map +1 -0
  11. package/package.json +48 -0
package/dist/index.css ADDED
@@ -0,0 +1,344 @@
1
+ /* src/css/tooltip.css */
2
+ .tooltip-container {
3
+ position: fixed;
4
+ display: inline-block;
5
+ z-index: 99999999999;
6
+ pointer-events: none;
7
+ max-width: calc(100vw - 16px);
8
+ background: transparent;
9
+ --tooltip-bg: var(--global-color-link);
10
+ --tooltip-color: var(--global-bg-color);
11
+ --tooltip-arrow-size: 6px;
12
+ --tooltip-arrow-width: calc(var(--tooltip-arrow-size) * 2);
13
+ --tooltip-arrow-offset: 50%;
14
+ --tooltip-gap: 10px;
15
+ --tooltip-animation-speed: 120ms;
16
+ --tooltip-animation-easing: ease-in-out;
17
+ --tooltip-animation-x: 0px;
18
+ --tooltip-animation-y: 0px;
19
+ --tooltip-rotate-x: 0deg;
20
+ --tooltip-rotate-y: 0deg;
21
+ --tooltip-transform-origin: center;
22
+ }
23
+ .tooltip-body {
24
+ position: relative;
25
+ display: block;
26
+ box-sizing: border-box;
27
+ max-width: calc(100vw - 16px);
28
+ isolation: isolate;
29
+ overflow: visible;
30
+ background: transparent;
31
+ border: 0;
32
+ transform-origin: var(--tooltip-transform-origin);
33
+ animation-duration: var(--tooltip-animation-speed);
34
+ animation-timing-function: var(--tooltip-animation-easing);
35
+ animation-fill-mode: both;
36
+ }
37
+ .tooltip-body__content {
38
+ position: relative;
39
+ z-index: 1;
40
+ display: block;
41
+ box-sizing: border-box;
42
+ max-width: calc(100vw - 16px);
43
+ white-space: pre-line;
44
+ text-align: center;
45
+ color: var(--tooltip-color);
46
+ }
47
+ .tooltip-surface {
48
+ position: absolute;
49
+ z-index: 0;
50
+ display: block;
51
+ overflow: visible;
52
+ pointer-events: none;
53
+ }
54
+ .tooltip-surface__fill {
55
+ position: absolute;
56
+ inset: 0;
57
+ display: block;
58
+ width: 100%;
59
+ height: 100%;
60
+ background: var(--tooltip-bg);
61
+ }
62
+ .tooltip-surface__stroke {
63
+ position: absolute;
64
+ inset: 0;
65
+ display: block;
66
+ width: 100%;
67
+ height: 100%;
68
+ overflow: visible;
69
+ pointer-events: none;
70
+ }
71
+ .tooltip-surface-probe {
72
+ position: absolute;
73
+ z-index: -1;
74
+ display: block;
75
+ visibility: hidden;
76
+ pointer-events: none;
77
+ box-sizing: border-box;
78
+ }
79
+ .tooltip-arrow-probe {
80
+ position: absolute;
81
+ z-index: -1;
82
+ width: var(--tooltip-arrow-width);
83
+ height: var(--tooltip-arrow-size);
84
+ visibility: hidden;
85
+ pointer-events: none;
86
+ }
87
+ .tooltip-container--top {
88
+ --tooltip-animation-y: 8px;
89
+ --tooltip-rotate-x: -18deg;
90
+ --tooltip-transform-origin: bottom center;
91
+ }
92
+ .tooltip-container--bottom {
93
+ --tooltip-animation-y: -8px;
94
+ --tooltip-rotate-x: 18deg;
95
+ --tooltip-transform-origin: top center;
96
+ }
97
+ .tooltip-container--left {
98
+ --tooltip-animation-x: 8px;
99
+ --tooltip-rotate-y: -18deg;
100
+ --tooltip-transform-origin: right center;
101
+ }
102
+ .tooltip-container--right {
103
+ --tooltip-animation-x: -8px;
104
+ --tooltip-rotate-y: 18deg;
105
+ --tooltip-transform-origin: left center;
106
+ }
107
+ .tooltip-container--phase-hidden .tooltip-body,
108
+ .tooltip-container--phase-preparing .tooltip-body {
109
+ opacity: 0;
110
+ animation: none;
111
+ }
112
+ .tooltip-container--phase-visible .tooltip-body {
113
+ opacity: 1;
114
+ filter: none;
115
+ transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg);
116
+ animation: none;
117
+ }
118
+ .tooltip-container--phase-entering .tooltip-body,
119
+ .tooltip-container--phase-leaving .tooltip-body {
120
+ animation-duration: var(--tooltip-animation-speed);
121
+ animation-timing-function: var(--tooltip-animation-easing);
122
+ animation-fill-mode: both;
123
+ }
124
+ .tooltip-container--phase-entering.tooltip-container--show-fade .tooltip-body {
125
+ animation-name: tooltip-fade-in;
126
+ }
127
+ .tooltip-container--phase-leaving.tooltip-container--hide-fade .tooltip-body {
128
+ animation-name: tooltip-fade-out;
129
+ }
130
+ .tooltip-container--phase-entering.tooltip-container--show-slide .tooltip-body {
131
+ animation-name: tooltip-slide-in;
132
+ }
133
+ .tooltip-container--phase-leaving.tooltip-container--hide-slide .tooltip-body {
134
+ animation-name: tooltip-slide-out;
135
+ }
136
+ .tooltip-container--phase-entering.tooltip-container--show-scale .tooltip-body {
137
+ animation-name: tooltip-scale-in;
138
+ }
139
+ .tooltip-container--phase-leaving.tooltip-container--hide-scale .tooltip-body {
140
+ animation-name: tooltip-scale-out;
141
+ }
142
+ .tooltip-container--phase-entering.tooltip-container--show-zoom .tooltip-body {
143
+ animation-name: tooltip-zoom-in;
144
+ }
145
+ .tooltip-container--phase-leaving.tooltip-container--hide-zoom .tooltip-body {
146
+ animation-name: tooltip-zoom-out;
147
+ }
148
+ .tooltip-container--phase-entering.tooltip-container--show-blur .tooltip-body {
149
+ animation-name: tooltip-blur-in;
150
+ }
151
+ .tooltip-container--phase-leaving.tooltip-container--hide-blur .tooltip-body {
152
+ animation-name: tooltip-blur-out;
153
+ }
154
+ .tooltip-container--phase-entering.tooltip-container--show-flip .tooltip-body {
155
+ animation-name: tooltip-flip-in;
156
+ }
157
+ .tooltip-container--phase-leaving.tooltip-container--hide-flip .tooltip-body {
158
+ animation-name: tooltip-flip-out;
159
+ }
160
+ .tooltip-container--phase-entering.tooltip-container--show-bounce .tooltip-body {
161
+ animation-name: tooltip-bounce-in;
162
+ }
163
+ .tooltip-container--phase-leaving.tooltip-container--hide-bounce .tooltip-body {
164
+ animation-name: tooltip-bounce-out;
165
+ }
166
+ .tooltip-container--phase-entering.tooltip-container--show-none .tooltip-body {
167
+ animation-name: tooltip-none-in;
168
+ animation-duration: 1ms;
169
+ }
170
+ .tooltip-container--phase-leaving.tooltip-container--hide-none .tooltip-body {
171
+ animation-name: tooltip-none-out;
172
+ animation-duration: 1ms;
173
+ }
174
+ @keyframes tooltip-fade-in {
175
+ from {
176
+ opacity: 0;
177
+ }
178
+ to {
179
+ opacity: 1;
180
+ }
181
+ }
182
+ @keyframes tooltip-fade-out {
183
+ from {
184
+ opacity: 1;
185
+ }
186
+ to {
187
+ opacity: 0;
188
+ }
189
+ }
190
+ @keyframes tooltip-slide-in {
191
+ from {
192
+ opacity: 0;
193
+ transform: translate(var(--tooltip-animation-x), var(--tooltip-animation-y));
194
+ }
195
+ to {
196
+ opacity: 1;
197
+ transform: translate(0, 0);
198
+ }
199
+ }
200
+ @keyframes tooltip-slide-out {
201
+ from {
202
+ opacity: 1;
203
+ transform: translate(0, 0);
204
+ }
205
+ to {
206
+ opacity: 0;
207
+ transform: translate(var(--tooltip-animation-x), var(--tooltip-animation-y));
208
+ }
209
+ }
210
+ @keyframes tooltip-scale-in {
211
+ from {
212
+ opacity: 0;
213
+ transform: scale(0.88);
214
+ }
215
+ to {
216
+ opacity: 1;
217
+ transform: scale(1);
218
+ }
219
+ }
220
+ @keyframes tooltip-scale-out {
221
+ from {
222
+ opacity: 1;
223
+ transform: scale(1);
224
+ }
225
+ to {
226
+ opacity: 0;
227
+ transform: scale(0.88);
228
+ }
229
+ }
230
+ @keyframes tooltip-zoom-in {
231
+ from {
232
+ opacity: 0;
233
+ transform: scale(0.55);
234
+ }
235
+ to {
236
+ opacity: 1;
237
+ transform: scale(1);
238
+ }
239
+ }
240
+ @keyframes tooltip-zoom-out {
241
+ from {
242
+ opacity: 1;
243
+ transform: scale(1);
244
+ }
245
+ to {
246
+ opacity: 0;
247
+ transform: scale(0.55);
248
+ }
249
+ }
250
+ @keyframes tooltip-blur-in {
251
+ from {
252
+ opacity: 0;
253
+ filter: blur(8px);
254
+ transform: scale(0.96);
255
+ }
256
+ to {
257
+ opacity: 1;
258
+ filter: blur(0);
259
+ transform: scale(1);
260
+ }
261
+ }
262
+ @keyframes tooltip-blur-out {
263
+ from {
264
+ opacity: 1;
265
+ filter: blur(0);
266
+ transform: scale(1);
267
+ }
268
+ to {
269
+ opacity: 0;
270
+ filter: blur(8px);
271
+ transform: scale(0.96);
272
+ }
273
+ }
274
+ @keyframes tooltip-flip-in {
275
+ from {
276
+ opacity: 0;
277
+ transform: perspective(500px) rotateX(var(--tooltip-rotate-x)) rotateY(var(--tooltip-rotate-y)) scale(0.94);
278
+ }
279
+ to {
280
+ opacity: 1;
281
+ transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale(1);
282
+ }
283
+ }
284
+ @keyframes tooltip-flip-out {
285
+ from {
286
+ opacity: 1;
287
+ transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale(1);
288
+ }
289
+ to {
290
+ opacity: 0;
291
+ transform: perspective(500px) rotateX(var(--tooltip-rotate-x)) rotateY(var(--tooltip-rotate-y)) scale(0.94);
292
+ }
293
+ }
294
+ @keyframes tooltip-bounce-in {
295
+ 0% {
296
+ opacity: 0;
297
+ transform: translate(var(--tooltip-animation-x), var(--tooltip-animation-y)) scale(0.84);
298
+ }
299
+ 65% {
300
+ opacity: 1;
301
+ transform: translate(0, 0) scale(1.06);
302
+ }
303
+ 82% {
304
+ transform: translate(0, 0) scale(0.98);
305
+ }
306
+ 100% {
307
+ opacity: 1;
308
+ transform: translate(0, 0) scale(1);
309
+ }
310
+ }
311
+ @keyframes tooltip-bounce-out {
312
+ 0% {
313
+ opacity: 1;
314
+ transform: translate(0, 0) scale(1);
315
+ }
316
+ 25% {
317
+ transform: translate(0, 0) scale(1.04);
318
+ }
319
+ 100% {
320
+ opacity: 0;
321
+ transform: translate(var(--tooltip-animation-x), var(--tooltip-animation-y)) scale(0.84);
322
+ }
323
+ }
324
+ @keyframes tooltip-none-in {
325
+ from, to {
326
+ opacity: 1;
327
+ }
328
+ }
329
+ @keyframes tooltip-none-out {
330
+ from, to {
331
+ opacity: 0;
332
+ }
333
+ }
334
+ @media (prefers-reduced-motion: reduce) {
335
+ .tooltip-container .tooltip-body {
336
+ animation-duration: 1ms;
337
+ }
338
+ }
339
+ .tooltip-container--interactive.tooltip-container--phase-entering,
340
+ .tooltip-container--interactive.tooltip-container--phase-visible,
341
+ .tooltip-container--interactive.tooltip-container--phase-leaving {
342
+ pointer-events: auto;
343
+ }
344
+ /*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/css/tooltip.css"],"sourcesContent":[".tooltip-container {\n position: fixed;\n display: inline-block;\n z-index: 99999999999;\n pointer-events: none;\n max-width: calc(100vw - 16px);\n background: transparent;\n\n --tooltip-bg: var(--global-color-link);\n --tooltip-color: var(--global-bg-color);\n --tooltip-arrow-size: 6px;\n --tooltip-arrow-width: calc(var(--tooltip-arrow-size) * 2);\n --tooltip-arrow-offset: 50%;\n --tooltip-gap: 10px;\n --tooltip-animation-speed: 120ms;\n --tooltip-animation-easing: ease-in-out;\n --tooltip-animation-x: 0px;\n --tooltip-animation-y: 0px;\n --tooltip-rotate-x: 0deg;\n --tooltip-rotate-y: 0deg;\n --tooltip-transform-origin: center;\n}\n\n.tooltip-body {\n position: relative;\n display: block;\n box-sizing: border-box;\n max-width: calc(100vw - 16px);\n isolation: isolate;\n overflow: visible;\n background: transparent;\n border: 0;\n transform-origin: var(--tooltip-transform-origin);\n animation-duration: var(--tooltip-animation-speed);\n animation-timing-function: var(--tooltip-animation-easing);\n animation-fill-mode: both;\n}\n\n.tooltip-body__content {\n position: relative;\n z-index: 1;\n display: block;\n box-sizing: border-box;\n max-width: calc(100vw - 16px);\n white-space: pre-line;\n text-align: center;\n color: var(--tooltip-color);\n}\n\n.tooltip-surface {\n position: absolute;\n z-index: 0;\n display: block;\n overflow: visible;\n pointer-events: none;\n}\n\n.tooltip-surface__fill {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n background: var(--tooltip-bg);\n}\n\n.tooltip-surface__stroke {\n position: absolute;\n inset: 0;\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n}\n\n.tooltip-surface-probe {\n position: absolute;\n z-index: -1;\n display: block;\n visibility: hidden;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.tooltip-arrow-probe {\n position: absolute;\n z-index: -1;\n width: var(--tooltip-arrow-width);\n height: var(--tooltip-arrow-size);\n visibility: hidden;\n pointer-events: none;\n}\n\n.tooltip-container--top {\n --tooltip-animation-y: 8px;\n --tooltip-rotate-x: -18deg;\n --tooltip-transform-origin: bottom center;\n}\n\n.tooltip-container--bottom {\n --tooltip-animation-y: -8px;\n --tooltip-rotate-x: 18deg;\n --tooltip-transform-origin: top center;\n}\n\n.tooltip-container--left {\n --tooltip-animation-x: 8px;\n --tooltip-rotate-y: -18deg;\n --tooltip-transform-origin: right center;\n}\n\n.tooltip-container--right {\n --tooltip-animation-x: -8px;\n --tooltip-rotate-y: 18deg;\n --tooltip-transform-origin: left center;\n}\n\n.tooltip-container--phase-hidden .tooltip-body,\n.tooltip-container--phase-preparing .tooltip-body {\n opacity: 0;\n animation: none;\n}\n\n.tooltip-container--phase-visible .tooltip-body {\n opacity: 1;\n filter: none;\n transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg);\n animation: none;\n}\n\n.tooltip-container--phase-entering .tooltip-body,\n.tooltip-container--phase-leaving .tooltip-body {\n animation-duration: var(--tooltip-animation-speed);\n animation-timing-function: var(--tooltip-animation-easing);\n animation-fill-mode: both;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-fade\n .tooltip-body {\n animation-name: tooltip-fade-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-fade\n .tooltip-body {\n animation-name: tooltip-fade-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-slide\n .tooltip-body {\n animation-name: tooltip-slide-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-slide\n .tooltip-body {\n animation-name: tooltip-slide-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-scale\n .tooltip-body {\n animation-name: tooltip-scale-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-scale\n .tooltip-body {\n animation-name: tooltip-scale-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-zoom\n .tooltip-body {\n animation-name: tooltip-zoom-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-zoom\n .tooltip-body {\n animation-name: tooltip-zoom-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-blur\n .tooltip-body {\n animation-name: tooltip-blur-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-blur\n .tooltip-body {\n animation-name: tooltip-blur-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-flip\n .tooltip-body {\n animation-name: tooltip-flip-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-flip\n .tooltip-body {\n animation-name: tooltip-flip-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-bounce\n .tooltip-body {\n animation-name: tooltip-bounce-in;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-bounce\n .tooltip-body {\n animation-name: tooltip-bounce-out;\n}\n\n.tooltip-container--phase-entering.tooltip-container--show-none\n .tooltip-body {\n animation-name: tooltip-none-in;\n animation-duration: 1ms;\n}\n\n.tooltip-container--phase-leaving.tooltip-container--hide-none\n .tooltip-body {\n animation-name: tooltip-none-out;\n animation-duration: 1ms;\n}\n\n@keyframes tooltip-fade-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes tooltip-fade-out {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes tooltip-slide-in {\n from {\n opacity: 0;\n transform: translate(\n var(--tooltip-animation-x),\n var(--tooltip-animation-y)\n );\n }\n\n to {\n opacity: 1;\n transform: translate(0, 0);\n }\n}\n\n@keyframes tooltip-slide-out {\n from {\n opacity: 1;\n transform: translate(0, 0);\n }\n\n to {\n opacity: 0;\n transform: translate(\n var(--tooltip-animation-x),\n var(--tooltip-animation-y)\n );\n }\n}\n\n@keyframes tooltip-scale-in {\n from {\n opacity: 0;\n transform: scale(0.88);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes tooltip-scale-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.88);\n }\n}\n\n@keyframes tooltip-zoom-in {\n from {\n opacity: 0;\n transform: scale(0.55);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes tooltip-zoom-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.55);\n }\n}\n\n@keyframes tooltip-blur-in {\n from {\n opacity: 0;\n filter: blur(8px);\n transform: scale(0.96);\n }\n\n to {\n opacity: 1;\n filter: blur(0);\n transform: scale(1);\n }\n}\n\n@keyframes tooltip-blur-out {\n from {\n opacity: 1;\n filter: blur(0);\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n filter: blur(8px);\n transform: scale(0.96);\n }\n}\n\n@keyframes tooltip-flip-in {\n from {\n opacity: 0;\n transform: perspective(500px) rotateX(var(--tooltip-rotate-x))\n rotateY(var(--tooltip-rotate-y)) scale(0.94);\n }\n\n to {\n opacity: 1;\n transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale(1);\n }\n}\n\n@keyframes tooltip-flip-out {\n from {\n opacity: 1;\n transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale(1);\n }\n\n to {\n opacity: 0;\n transform: perspective(500px) rotateX(var(--tooltip-rotate-x))\n rotateY(var(--tooltip-rotate-y)) scale(0.94);\n }\n}\n\n@keyframes tooltip-bounce-in {\n 0% {\n opacity: 0;\n transform: translate(\n var(--tooltip-animation-x),\n var(--tooltip-animation-y)\n )\n scale(0.84);\n }\n\n 65% {\n opacity: 1;\n transform: translate(0, 0) scale(1.06);\n }\n\n 82% {\n transform: translate(0, 0) scale(0.98);\n }\n\n 100% {\n opacity: 1;\n transform: translate(0, 0) scale(1);\n }\n}\n\n@keyframes tooltip-bounce-out {\n 0% {\n opacity: 1;\n transform: translate(0, 0) scale(1);\n }\n\n 25% {\n transform: translate(0, 0) scale(1.04);\n }\n\n 100% {\n opacity: 0;\n transform: translate(\n var(--tooltip-animation-x),\n var(--tooltip-animation-y)\n )\n scale(0.84);\n }\n}\n\n@keyframes tooltip-none-in {\n from,\n to {\n opacity: 1;\n }\n}\n\n@keyframes tooltip-none-out {\n from,\n to {\n opacity: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .tooltip-container .tooltip-body {\n animation-duration: 1ms;\n }\n}\n\n.tooltip-container--interactive.tooltip-container--phase-entering,\n.tooltip-container--interactive.tooltip-container--phase-visible,\n.tooltip-container--interactive.tooltip-container--phase-leaving {\n pointer-events: auto;\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.mts ADDED
@@ -0,0 +1,117 @@
1
+ import * as react from 'react';
2
+ import { CSSProperties, ReactNode, ReactElement } from 'react';
3
+
4
+ type TooltipAnimationType = "fade" | "slide" | "scale" | "zoom" | "blur" | "flip" | "bounce" | "none";
5
+ type TooltipAnimationSpeed = `${number}ms` | `${number}s`;
6
+ type TooltipAnimationOptions = {
7
+ show?: TooltipAnimationType;
8
+ hide?: TooltipAnimationType;
9
+ speed?: TooltipAnimationSpeed;
10
+ easing?: CSSProperties["animationTimingFunction"];
11
+ };
12
+
13
+ type TooltipSize = `${number}px` | `${number}rem` | `${number}em` | `calc(${string})`;
14
+ type ThemeType = {
15
+ body?: {
16
+ background?: CSSProperties["background"];
17
+ filter?: CSSProperties["filter"];
18
+ style?: CSSProperties;
19
+ className?: string;
20
+ };
21
+ arrow?: {
22
+ size?: TooltipSize;
23
+ width?: TooltipSize;
24
+ };
25
+ animation?: TooltipAnimationOptions;
26
+ };
27
+
28
+ declare const presets: {
29
+ primary: ThemeType;
30
+ secondary: ThemeType;
31
+ dark: ThemeType;
32
+ light: ThemeType;
33
+ comic: ThemeType;
34
+ manga: ThemeType;
35
+ newspaper: ThemeType;
36
+ stickyNote: ThemeType;
37
+ blueprint: ThemeType;
38
+ terminal: ThemeType;
39
+ crt: ThemeType;
40
+ pixel: ThemeType;
41
+ arcade: ThemeType;
42
+ cyberpunk: ThemeType;
43
+ synthwave: ThemeType;
44
+ vaporwave: ThemeType;
45
+ hologram: ThemeType;
46
+ glass: ThemeType;
47
+ frost: ThemeType;
48
+ clay: ThemeType;
49
+ bubblegum: ThemeType;
50
+ candy: ThemeType;
51
+ watermelon: ThemeType;
52
+ lemon: ThemeType;
53
+ lava: ThemeType;
54
+ ember: ThemeType;
55
+ toxic: ThemeType;
56
+ radioactive: ThemeType;
57
+ hazard: ThemeType;
58
+ policeTape: ThemeType;
59
+ construction: ThemeType;
60
+ parchment: ThemeType;
61
+ pirateMap: ThemeType;
62
+ royal: ThemeType;
63
+ noir: ThemeType;
64
+ detective: ThemeType;
65
+ dossier: ThemeType;
66
+ medical: ThemeType;
67
+ laboratory: ThemeType;
68
+ circuit: ThemeType;
69
+ galaxy: ThemeType;
70
+ aurora: ThemeType;
71
+ oceanDepths: ThemeType;
72
+ coralReef: ThemeType;
73
+ forest: ThemeType;
74
+ moss: ThemeType;
75
+ desert: ThemeType;
76
+ snow: ThemeType;
77
+ chrome: ThemeType;
78
+ goldFoil: ThemeType;
79
+ bronze: ThemeType;
80
+ brutalist: ThemeType;
81
+ chalkboard: ThemeType;
82
+ };
83
+ type PresetsThemeType$1 = keyof typeof presets;
84
+
85
+ type PresetsThemeType = keyof typeof presets;
86
+
87
+ type TooltipPlacement = "top" | "bottom" | "left" | "right";
88
+ interface TooltipProviderInterface {
89
+ defaultRenderPosition?: TooltipPlacement;
90
+ selectTheme?: PresetsThemeType;
91
+ customTheme?: ThemeType;
92
+ animation?: TooltipAnimationOptions;
93
+ }
94
+ interface TooltipInterface {
95
+ content: ReactNode;
96
+ children?: ReactElement;
97
+ position?: TooltipPlacement;
98
+ selectTheme?: PresetsThemeType;
99
+ customTheme?: ThemeType;
100
+ animation?: TooltipAnimationOptions;
101
+ disabled?: boolean;
102
+ interactive?: boolean;
103
+ hideDelay?: number;
104
+ }
105
+
106
+ declare const Tooltip: ({ content, children, position, selectTheme, customTheme, animation, disabled, interactive, hideDelay, }: TooltipInterface) => react.JSX.Element;
107
+
108
+ type TooltipProviderProps = {
109
+ children: ReactNode;
110
+ defaultRenderPosition?: TooltipPlacement;
111
+ selectTheme?: PresetsThemeType$1;
112
+ customTheme?: ThemeType;
113
+ animation?: TooltipAnimationOptions;
114
+ };
115
+ declare const TooltipProvider: ({ children, defaultRenderPosition, selectTheme, customTheme, animation, }: TooltipProviderProps) => react.JSX.Element;
116
+
117
+ export { type PresetsThemeType, type ThemeType, Tooltip, type TooltipAnimationOptions, type TooltipAnimationSpeed, type TooltipAnimationType, type TooltipInterface, type TooltipPlacement, TooltipProvider, type TooltipProviderInterface, type TooltipSize };
package/dist/index.d.ts ADDED
@@ -0,0 +1,117 @@
1
+ import * as react from 'react';
2
+ import { CSSProperties, ReactNode, ReactElement } from 'react';
3
+
4
+ type TooltipAnimationType = "fade" | "slide" | "scale" | "zoom" | "blur" | "flip" | "bounce" | "none";
5
+ type TooltipAnimationSpeed = `${number}ms` | `${number}s`;
6
+ type TooltipAnimationOptions = {
7
+ show?: TooltipAnimationType;
8
+ hide?: TooltipAnimationType;
9
+ speed?: TooltipAnimationSpeed;
10
+ easing?: CSSProperties["animationTimingFunction"];
11
+ };
12
+
13
+ type TooltipSize = `${number}px` | `${number}rem` | `${number}em` | `calc(${string})`;
14
+ type ThemeType = {
15
+ body?: {
16
+ background?: CSSProperties["background"];
17
+ filter?: CSSProperties["filter"];
18
+ style?: CSSProperties;
19
+ className?: string;
20
+ };
21
+ arrow?: {
22
+ size?: TooltipSize;
23
+ width?: TooltipSize;
24
+ };
25
+ animation?: TooltipAnimationOptions;
26
+ };
27
+
28
+ declare const presets: {
29
+ primary: ThemeType;
30
+ secondary: ThemeType;
31
+ dark: ThemeType;
32
+ light: ThemeType;
33
+ comic: ThemeType;
34
+ manga: ThemeType;
35
+ newspaper: ThemeType;
36
+ stickyNote: ThemeType;
37
+ blueprint: ThemeType;
38
+ terminal: ThemeType;
39
+ crt: ThemeType;
40
+ pixel: ThemeType;
41
+ arcade: ThemeType;
42
+ cyberpunk: ThemeType;
43
+ synthwave: ThemeType;
44
+ vaporwave: ThemeType;
45
+ hologram: ThemeType;
46
+ glass: ThemeType;
47
+ frost: ThemeType;
48
+ clay: ThemeType;
49
+ bubblegum: ThemeType;
50
+ candy: ThemeType;
51
+ watermelon: ThemeType;
52
+ lemon: ThemeType;
53
+ lava: ThemeType;
54
+ ember: ThemeType;
55
+ toxic: ThemeType;
56
+ radioactive: ThemeType;
57
+ hazard: ThemeType;
58
+ policeTape: ThemeType;
59
+ construction: ThemeType;
60
+ parchment: ThemeType;
61
+ pirateMap: ThemeType;
62
+ royal: ThemeType;
63
+ noir: ThemeType;
64
+ detective: ThemeType;
65
+ dossier: ThemeType;
66
+ medical: ThemeType;
67
+ laboratory: ThemeType;
68
+ circuit: ThemeType;
69
+ galaxy: ThemeType;
70
+ aurora: ThemeType;
71
+ oceanDepths: ThemeType;
72
+ coralReef: ThemeType;
73
+ forest: ThemeType;
74
+ moss: ThemeType;
75
+ desert: ThemeType;
76
+ snow: ThemeType;
77
+ chrome: ThemeType;
78
+ goldFoil: ThemeType;
79
+ bronze: ThemeType;
80
+ brutalist: ThemeType;
81
+ chalkboard: ThemeType;
82
+ };
83
+ type PresetsThemeType$1 = keyof typeof presets;
84
+
85
+ type PresetsThemeType = keyof typeof presets;
86
+
87
+ type TooltipPlacement = "top" | "bottom" | "left" | "right";
88
+ interface TooltipProviderInterface {
89
+ defaultRenderPosition?: TooltipPlacement;
90
+ selectTheme?: PresetsThemeType;
91
+ customTheme?: ThemeType;
92
+ animation?: TooltipAnimationOptions;
93
+ }
94
+ interface TooltipInterface {
95
+ content: ReactNode;
96
+ children?: ReactElement;
97
+ position?: TooltipPlacement;
98
+ selectTheme?: PresetsThemeType;
99
+ customTheme?: ThemeType;
100
+ animation?: TooltipAnimationOptions;
101
+ disabled?: boolean;
102
+ interactive?: boolean;
103
+ hideDelay?: number;
104
+ }
105
+
106
+ declare const Tooltip: ({ content, children, position, selectTheme, customTheme, animation, disabled, interactive, hideDelay, }: TooltipInterface) => react.JSX.Element;
107
+
108
+ type TooltipProviderProps = {
109
+ children: ReactNode;
110
+ defaultRenderPosition?: TooltipPlacement;
111
+ selectTheme?: PresetsThemeType$1;
112
+ customTheme?: ThemeType;
113
+ animation?: TooltipAnimationOptions;
114
+ };
115
+ declare const TooltipProvider: ({ children, defaultRenderPosition, selectTheme, customTheme, animation, }: TooltipProviderProps) => react.JSX.Element;
116
+
117
+ export { type PresetsThemeType, type ThemeType, Tooltip, type TooltipAnimationOptions, type TooltipAnimationSpeed, type TooltipAnimationType, type TooltipInterface, type TooltipPlacement, TooltipProvider, type TooltipProviderInterface, type TooltipSize };