react-product-tour-guide 0.2.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.
- package/CHANGELOG.md +67 -0
- package/LICENSE +21 -0
- package/README.md +454 -0
- package/dist/index.css +291 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +166 -0
- package/dist/index.d.ts +166 -0
- package/dist/index.js +1320 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1311 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +116 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
/* src/styles/theme.css */
|
|
2
|
+
@layer react-product-tour {
|
|
3
|
+
:root {
|
|
4
|
+
--tour--overlay--background: rgba(0, 0, 0, 0.5);
|
|
5
|
+
--tour--tooltip--background: white;
|
|
6
|
+
--tour--tooltip--border: #e5e7eb;
|
|
7
|
+
--tour--tooltip--text: black;
|
|
8
|
+
--tour--tooltip--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
9
|
+
--tour--tooltip--padding: 1rem;
|
|
10
|
+
--tour--tooltip--gap: 0.5rem;
|
|
11
|
+
--tour--tooltip--radius: 0.5rem;
|
|
12
|
+
--tour--tooltip--border-width: 1px;
|
|
13
|
+
--tour--tooltip--transition: all 0.2s ease-in-out;
|
|
14
|
+
--tour--highlight--padding: 8px;
|
|
15
|
+
--tour--highlight--radius: 10px;
|
|
16
|
+
--tour--button--primary--background: #646cff;
|
|
17
|
+
--tour--button--primary--text: white;
|
|
18
|
+
--tour--button--secondary--background: #e5e7eb;
|
|
19
|
+
--tour--button--secondary--text: #374151;
|
|
20
|
+
--tour--tooltip--max-width: 300px;
|
|
21
|
+
--tour--progress--background: #e5e7eb;
|
|
22
|
+
--tour--progress--fill: #f43f5e;
|
|
23
|
+
}
|
|
24
|
+
.dark {
|
|
25
|
+
--tour--tooltip--background: #1f2937;
|
|
26
|
+
--tour--tooltip--border: #374151;
|
|
27
|
+
--tour--tooltip--text: #f9fafb;
|
|
28
|
+
}
|
|
29
|
+
.sr-only {
|
|
30
|
+
position: absolute;
|
|
31
|
+
width: 1px;
|
|
32
|
+
height: 1px;
|
|
33
|
+
padding: 0;
|
|
34
|
+
margin: -1px;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
clip: rect(0, 0, 0, 0);
|
|
37
|
+
white-space: nowrap;
|
|
38
|
+
border: 0;
|
|
39
|
+
}
|
|
40
|
+
.tour-button:focus-visible {
|
|
41
|
+
outline: 2px solid #3b82f6;
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
}
|
|
44
|
+
.tour-button:focus:not(:focus-visible) {
|
|
45
|
+
outline: none;
|
|
46
|
+
}
|
|
47
|
+
@media (forced-colors: active) {
|
|
48
|
+
.tour-button {
|
|
49
|
+
border: 2px solid currentColor;
|
|
50
|
+
}
|
|
51
|
+
.tour-tooltip {
|
|
52
|
+
border: 2px solid currentColor;
|
|
53
|
+
}
|
|
54
|
+
.tour-highlight {
|
|
55
|
+
border: 2px solid currentColor;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
@media (prefers-reduced-motion: reduce) {
|
|
59
|
+
.tour-tooltip,
|
|
60
|
+
.tour-highlight,
|
|
61
|
+
.tour-overlay,
|
|
62
|
+
.tour-button {
|
|
63
|
+
animation: none !important;
|
|
64
|
+
transition: none !important;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
.tour-tooltip {
|
|
68
|
+
position: absolute;
|
|
69
|
+
background-color: var(--tour--tooltip--background);
|
|
70
|
+
color: var(--tour--tooltip--text);
|
|
71
|
+
padding: var(--tour--tooltip--padding);
|
|
72
|
+
border-radius: var(--tour--tooltip--radius);
|
|
73
|
+
box-shadow: var(--tour--tooltip--shadow);
|
|
74
|
+
max-width: var(--tour--tooltip--max-width);
|
|
75
|
+
z-index: 1001;
|
|
76
|
+
opacity: 0;
|
|
77
|
+
border: var(--tour--tooltip--border-width) solid var(--tour--tooltip--border);
|
|
78
|
+
}
|
|
79
|
+
.tour-tooltip[class*=bg-] {
|
|
80
|
+
background-color: inherit;
|
|
81
|
+
}
|
|
82
|
+
.tour-tooltip[class*=text-] {
|
|
83
|
+
color: inherit;
|
|
84
|
+
}
|
|
85
|
+
.tour-tooltip[class*=border-] {
|
|
86
|
+
border-color: inherit;
|
|
87
|
+
}
|
|
88
|
+
.tour-tooltip[class*=rounded-] {
|
|
89
|
+
border-radius: inherit;
|
|
90
|
+
}
|
|
91
|
+
.tour-tooltip[class*=shadow-] {
|
|
92
|
+
box-shadow: inherit;
|
|
93
|
+
}
|
|
94
|
+
.tour-tooltip[class*=p-] {
|
|
95
|
+
padding: inherit;
|
|
96
|
+
}
|
|
97
|
+
.tour-tooltip[data-animation=slide] {
|
|
98
|
+
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
99
|
+
transform-origin: center;
|
|
100
|
+
transform: scale(0.95);
|
|
101
|
+
}
|
|
102
|
+
.tour-tooltip[data-animation=slide][data-placement=top] {
|
|
103
|
+
transform: translateY(10px) scale(0.95);
|
|
104
|
+
}
|
|
105
|
+
.tour-tooltip[data-animation=slide][data-placement=bottom] {
|
|
106
|
+
transform: translateY(-10px) scale(0.95);
|
|
107
|
+
}
|
|
108
|
+
.tour-tooltip[data-animation=slide][data-placement=left] {
|
|
109
|
+
transform: translateX(10px) scale(0.95);
|
|
110
|
+
}
|
|
111
|
+
.tour-tooltip[data-animation=slide][data-placement=right] {
|
|
112
|
+
transform: translateX(-10px) scale(0.95);
|
|
113
|
+
}
|
|
114
|
+
.tour-tooltip[data-animation=slide].visible {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
transform: scale(1) translate(0, 0);
|
|
117
|
+
}
|
|
118
|
+
.tour-tooltip[data-animation=bounce] {
|
|
119
|
+
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease-in-out;
|
|
120
|
+
transform-origin: center;
|
|
121
|
+
transform: scale(0.3);
|
|
122
|
+
}
|
|
123
|
+
.tour-tooltip[data-animation=bounce][data-placement=top] {
|
|
124
|
+
transform: translateY(20px) scale(0.3);
|
|
125
|
+
}
|
|
126
|
+
.tour-tooltip[data-animation=bounce][data-placement=bottom] {
|
|
127
|
+
transform: translateY(-20px) scale(0.3);
|
|
128
|
+
}
|
|
129
|
+
.tour-tooltip[data-animation=bounce][data-placement=left] {
|
|
130
|
+
transform: translateX(20px) scale(0.3);
|
|
131
|
+
}
|
|
132
|
+
.tour-tooltip[data-animation=bounce][data-placement=right] {
|
|
133
|
+
transform: translateX(-20px) scale(0.3);
|
|
134
|
+
}
|
|
135
|
+
.tour-tooltip[data-animation=bounce].visible {
|
|
136
|
+
opacity: 1;
|
|
137
|
+
transform: scale(1) translate(0, 0);
|
|
138
|
+
}
|
|
139
|
+
.tour-tooltip[data-animation=fade] {
|
|
140
|
+
transition: all 0.4s ease-out;
|
|
141
|
+
transform: translateY(10px);
|
|
142
|
+
opacity: 0;
|
|
143
|
+
}
|
|
144
|
+
.tour-tooltip[data-animation=fade].visible {
|
|
145
|
+
opacity: 1;
|
|
146
|
+
transform: translateY(0);
|
|
147
|
+
}
|
|
148
|
+
.tour-tooltip-title {
|
|
149
|
+
margin: 0 0 0.5rem 0;
|
|
150
|
+
font-size: 1rem;
|
|
151
|
+
font-weight: 600;
|
|
152
|
+
color: var(--tour--tooltip--text);
|
|
153
|
+
line-height: 1.3;
|
|
154
|
+
}
|
|
155
|
+
.tour-tooltip-content {
|
|
156
|
+
margin-bottom: 1rem;
|
|
157
|
+
}
|
|
158
|
+
.tour-buttons {
|
|
159
|
+
display: flex;
|
|
160
|
+
gap: var(--tour--tooltip--gap);
|
|
161
|
+
justify-content: flex-end;
|
|
162
|
+
}
|
|
163
|
+
.tour-tooltip::before {
|
|
164
|
+
content: "";
|
|
165
|
+
position: absolute;
|
|
166
|
+
width: 0.75rem;
|
|
167
|
+
height: 0.75rem;
|
|
168
|
+
background-color: var(--tour--tooltip--background);
|
|
169
|
+
border: var(--tour--tooltip--border-width) solid var(--tour--tooltip--border);
|
|
170
|
+
transform: rotate(45deg);
|
|
171
|
+
}
|
|
172
|
+
.tour-tooltip[data-placement=top]::before {
|
|
173
|
+
bottom: -0.375rem;
|
|
174
|
+
border-right: none;
|
|
175
|
+
border-bottom: none;
|
|
176
|
+
}
|
|
177
|
+
.tour-tooltip[data-placement=bottom]::before {
|
|
178
|
+
top: -0.375rem;
|
|
179
|
+
border-left: none;
|
|
180
|
+
border-top: none;
|
|
181
|
+
}
|
|
182
|
+
.tour-tooltip[data-placement=left]::before {
|
|
183
|
+
right: -0.375rem;
|
|
184
|
+
border-top: none;
|
|
185
|
+
border-right: none;
|
|
186
|
+
}
|
|
187
|
+
.tour-tooltip[data-placement=right]::before {
|
|
188
|
+
left: -0.375rem;
|
|
189
|
+
border-bottom: none;
|
|
190
|
+
border-left: none;
|
|
191
|
+
}
|
|
192
|
+
.tour-button {
|
|
193
|
+
border-radius: var(--tour--tooltip--radius);
|
|
194
|
+
font-weight: 500;
|
|
195
|
+
font-family: inherit;
|
|
196
|
+
cursor: pointer;
|
|
197
|
+
padding: 0.5rem 1rem;
|
|
198
|
+
border: none;
|
|
199
|
+
transition: var(--tour--tooltip--transition);
|
|
200
|
+
}
|
|
201
|
+
.tour-button-primary {
|
|
202
|
+
background-color: var(--tour--button--primary--background);
|
|
203
|
+
color: var(--tour--button--primary--text);
|
|
204
|
+
}
|
|
205
|
+
.tour-button-secondary {
|
|
206
|
+
background-color: var(--tour--button--secondary--background);
|
|
207
|
+
color: var(--tour--button--secondary--text);
|
|
208
|
+
}
|
|
209
|
+
.tour-button[class*=bg-] {
|
|
210
|
+
background-color: inherit;
|
|
211
|
+
}
|
|
212
|
+
.tour-button[class*=text-] {
|
|
213
|
+
color: inherit;
|
|
214
|
+
}
|
|
215
|
+
.tour-button[class*=rounded-] {
|
|
216
|
+
border-radius: inherit;
|
|
217
|
+
}
|
|
218
|
+
.tour-button[class*=p-] {
|
|
219
|
+
padding: inherit;
|
|
220
|
+
}
|
|
221
|
+
.tour-button[class*=font-] {
|
|
222
|
+
font-weight: inherit;
|
|
223
|
+
}
|
|
224
|
+
.tour-button:disabled {
|
|
225
|
+
opacity: 0.5;
|
|
226
|
+
cursor: not-allowed;
|
|
227
|
+
}
|
|
228
|
+
.dark .tour-button-secondary {
|
|
229
|
+
background-color: #4b5563;
|
|
230
|
+
}
|
|
231
|
+
.tour-overlay {
|
|
232
|
+
position: fixed;
|
|
233
|
+
top: 0;
|
|
234
|
+
left: 0;
|
|
235
|
+
right: 0;
|
|
236
|
+
bottom: 0;
|
|
237
|
+
background-color: var(--tour--overlay--background);
|
|
238
|
+
z-index: 1000;
|
|
239
|
+
}
|
|
240
|
+
.tour-overlay[class*=bg-] {
|
|
241
|
+
background-color: inherit;
|
|
242
|
+
}
|
|
243
|
+
.tour-overlay-blur {
|
|
244
|
+
-webkit-backdrop-filter: blur(2px);
|
|
245
|
+
backdrop-filter: blur(2px);
|
|
246
|
+
}
|
|
247
|
+
.tour-highlight {
|
|
248
|
+
position: absolute;
|
|
249
|
+
border-radius: var(--tour--highlight--radius);
|
|
250
|
+
box-shadow: 0 0 0 9999px var(--tour--overlay--background);
|
|
251
|
+
z-index: 1001;
|
|
252
|
+
opacity: 0;
|
|
253
|
+
}
|
|
254
|
+
.tour-highlight[class*=rounded-] {
|
|
255
|
+
border-radius: inherit;
|
|
256
|
+
}
|
|
257
|
+
.tour-highlight[class*=shadow-] {
|
|
258
|
+
box-shadow: inherit;
|
|
259
|
+
}
|
|
260
|
+
.tour-highlight[data-animation=slide] {
|
|
261
|
+
transition: all 0.3s ease-in-out;
|
|
262
|
+
transform: scale(0.98);
|
|
263
|
+
}
|
|
264
|
+
.tour-highlight[data-animation=slide].visible {
|
|
265
|
+
opacity: 1;
|
|
266
|
+
transform: scale(1);
|
|
267
|
+
}
|
|
268
|
+
.tour-highlight[data-animation=bounce] {
|
|
269
|
+
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
270
|
+
transform: translateY(20px) scale(0.95);
|
|
271
|
+
opacity: 0;
|
|
272
|
+
}
|
|
273
|
+
.tour-highlight[data-animation=bounce].visible {
|
|
274
|
+
opacity: 1;
|
|
275
|
+
transform: translateY(0) scale(1);
|
|
276
|
+
}
|
|
277
|
+
.tour-highlight[data-animation=fade] {
|
|
278
|
+
transition: all 0.4s ease-out;
|
|
279
|
+
transform: translateY(10px);
|
|
280
|
+
opacity: 0;
|
|
281
|
+
}
|
|
282
|
+
.tour-highlight[data-animation=fade].visible {
|
|
283
|
+
opacity: 1;
|
|
284
|
+
transform: translateY(0);
|
|
285
|
+
}
|
|
286
|
+
.dark .tour-highlight {
|
|
287
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
288
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/styles/theme.css"],"sourcesContent":["@layer react-product-tour {\n\n:root {\n /* Tour Component Colors */\n --tour--overlay--background: rgba(0, 0, 0, 0.5);\n --tour--tooltip--background: white;\n --tour--tooltip--border: #e5e7eb;\n --tour--tooltip--text: black;\n --tour--tooltip--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n\n /* Tour Component Spacing */\n --tour--tooltip--padding: 1rem;\n --tour--tooltip--gap: 0.5rem;\n\n /* Tour Component Border */\n --tour--tooltip--radius: 0.5rem;\n --tour--tooltip--border-width: 1px;\n\n /* Tour Component Animation */\n --tour--tooltip--transition: all 0.2s ease-in-out;\n\n /* Tour Highlight */\n --tour--highlight--padding: 8px;\n --tour--highlight--radius: 10px;\n\n /* Tour Button Colors */\n --tour--button--primary--background: #646cff;\n --tour--button--primary--text: white;\n --tour--button--secondary--background: #e5e7eb;\n --tour--button--secondary--text: #374151;\n\n /* Tour Tooltip Size */\n --tour--tooltip--max-width: 300px;\n\n /* Tour Progress Bar */\n --tour--progress--background: #e5e7eb;\n --tour--progress--fill: #f43f5e;\n}\n\n/* Dark mode variables */\n.dark {\n --tour--tooltip--background: #1f2937;\n --tour--tooltip--border: #374151;\n --tour--tooltip--text: #f9fafb;\n}\n\n/* Screen reader utilities */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* Focus styles */\n.tour-button:focus-visible {\n outline: 2px solid #3b82f6;\n outline-offset: 2px;\n}\n\n.tour-button:focus:not(:focus-visible) {\n outline: none;\n}\n\n/* High contrast mode support */\n@media (forced-colors: active) {\n .tour-button {\n border: 2px solid currentColor;\n }\n\n .tour-tooltip {\n border: 2px solid currentColor;\n }\n\n .tour-highlight {\n border: 2px solid currentColor;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .tour-tooltip,\n .tour-highlight,\n .tour-overlay,\n .tour-button {\n animation: none !important;\n transition: none !important;\n }\n}\n\n/* Base tooltip styles */\n.tour-tooltip {\n position: absolute;\n background-color: var(--tour--tooltip--background);\n color: var(--tour--tooltip--text);\n padding: var(--tour--tooltip--padding);\n border-radius: var(--tour--tooltip--radius);\n box-shadow: var(--tour--tooltip--shadow);\n max-width: var(--tour--tooltip--max-width);\n z-index: 1001;\n opacity: 0;\n border: var(--tour--tooltip--border-width) solid var(--tour--tooltip--border);\n}\n\n/* Allow Tailwind classes to override base styles */\n.tour-tooltip[class*=\"bg-\"] {\n background-color: inherit;\n}\n\n.tour-tooltip[class*=\"text-\"] {\n color: inherit;\n}\n\n.tour-tooltip[class*=\"border-\"] {\n border-color: inherit;\n}\n\n.tour-tooltip[class*=\"rounded-\"] {\n border-radius: inherit;\n}\n\n.tour-tooltip[class*=\"shadow-\"] {\n box-shadow: inherit;\n}\n\n.tour-tooltip[class*=\"p-\"] {\n padding: inherit;\n}\n\n/* Animation variants */\n.tour-tooltip[data-animation=\"slide\"] {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform-origin: center;\n transform: scale(0.95);\n}\n\n.tour-tooltip[data-animation=\"slide\"][data-placement=\"top\"] {\n transform: translateY(10px) scale(0.95);\n}\n\n.tour-tooltip[data-animation=\"slide\"][data-placement=\"bottom\"] {\n transform: translateY(-10px) scale(0.95);\n}\n\n.tour-tooltip[data-animation=\"slide\"][data-placement=\"left\"] {\n transform: translateX(10px) scale(0.95);\n}\n\n.tour-tooltip[data-animation=\"slide\"][data-placement=\"right\"] {\n transform: translateX(-10px) scale(0.95);\n}\n\n.tour-tooltip[data-animation=\"slide\"].visible {\n opacity: 1;\n transform: scale(1) translate(0, 0);\n}\n\n.tour-tooltip[data-animation=\"bounce\"] {\n transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease-in-out;\n transform-origin: center;\n transform: scale(0.3);\n}\n\n.tour-tooltip[data-animation=\"bounce\"][data-placement=\"top\"] {\n transform: translateY(20px) scale(0.3);\n}\n\n.tour-tooltip[data-animation=\"bounce\"][data-placement=\"bottom\"] {\n transform: translateY(-20px) scale(0.3);\n}\n\n.tour-tooltip[data-animation=\"bounce\"][data-placement=\"left\"] {\n transform: translateX(20px) scale(0.3);\n}\n\n.tour-tooltip[data-animation=\"bounce\"][data-placement=\"right\"] {\n transform: translateX(-20px) scale(0.3);\n}\n\n.tour-tooltip[data-animation=\"bounce\"].visible {\n opacity: 1;\n transform: scale(1) translate(0, 0);\n}\n\n.tour-tooltip[data-animation=\"fade\"] {\n transition: all 0.4s ease-out;\n transform: translateY(10px);\n opacity: 0;\n}\n\n.tour-tooltip[data-animation=\"fade\"].visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.tour-tooltip-title {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n color: var(--tour--tooltip--text);\n line-height: 1.3;\n}\n\n.tour-tooltip-content {\n margin-bottom: 1rem;\n}\n\n.tour-buttons {\n display: flex;\n gap: var(--tour--tooltip--gap);\n justify-content: flex-end;\n}\n\n/* Tooltip arrow */\n.tour-tooltip::before {\n content: '';\n position: absolute;\n width: 0.75rem;\n height: 0.75rem;\n background-color: var(--tour--tooltip--background);\n border: var(--tour--tooltip--border-width) solid var(--tour--tooltip--border);\n transform: rotate(45deg);\n}\n\n/* Tooltip arrow positions */\n.tour-tooltip[data-placement=\"top\"]::before {\n bottom: -0.375rem;\n border-right: none;\n border-bottom: none;\n}\n\n.tour-tooltip[data-placement=\"bottom\"]::before {\n top: -0.375rem;\n border-left: none;\n border-top: none;\n}\n\n.tour-tooltip[data-placement=\"left\"]::before {\n right: -0.375rem;\n border-top: none;\n border-right: none;\n}\n\n.tour-tooltip[data-placement=\"right\"]::before {\n left: -0.375rem;\n border-bottom: none;\n border-left: none;\n}\n\n/* Button styles */\n.tour-button {\n border-radius: var(--tour--tooltip--radius);\n font-weight: 500;\n font-family: inherit;\n cursor: pointer;\n padding: 0.5rem 1rem;\n border: none;\n transition: var(--tour--tooltip--transition);\n}\n\n.tour-button-primary {\n background-color: var(--tour--button--primary--background);\n color: var(--tour--button--primary--text);\n}\n\n.tour-button-secondary {\n background-color: var(--tour--button--secondary--background);\n color: var(--tour--button--secondary--text);\n}\n\n/* Allow Tailwind classes to override button styles */\n.tour-button[class*=\"bg-\"] {\n background-color: inherit;\n}\n\n.tour-button[class*=\"text-\"] {\n color: inherit;\n}\n\n.tour-button[class*=\"rounded-\"] {\n border-radius: inherit;\n}\n\n.tour-button[class*=\"p-\"] {\n padding: inherit;\n}\n\n.tour-button[class*=\"font-\"] {\n font-weight: inherit;\n}\n\n.tour-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.dark .tour-button-secondary {\n background-color: #4b5563;\n}\n\n/* Overlay styles */\n.tour-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--tour--overlay--background);\n z-index: 1000;\n}\n\n.tour-overlay[class*=\"bg-\"] {\n background-color: inherit;\n}\n\n.tour-overlay-blur {\n -webkit-backdrop-filter: blur(2px);\n backdrop-filter: blur(2px);\n}\n\n/* Highlight styles */\n.tour-highlight {\n position: absolute;\n border-radius: var(--tour--highlight--radius);\n box-shadow: 0 0 0 9999px var(--tour--overlay--background);\n z-index: 1001;\n opacity: 0;\n}\n\n.tour-highlight[class*=\"rounded-\"] {\n border-radius: inherit;\n}\n\n.tour-highlight[class*=\"shadow-\"] {\n box-shadow: inherit;\n}\n\n.tour-highlight[data-animation=\"slide\"] {\n transition: all 0.3s ease-in-out;\n transform: scale(0.98);\n}\n\n.tour-highlight[data-animation=\"slide\"].visible {\n opacity: 1;\n transform: scale(1);\n}\n\n.tour-highlight[data-animation=\"bounce\"] {\n transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n transform: translateY(20px) scale(0.95);\n opacity: 0;\n}\n\n.tour-highlight[data-animation=\"bounce\"].visible {\n opacity: 1;\n transform: translateY(0) scale(1);\n}\n\n.tour-highlight[data-animation=\"fade\"] {\n transition: all 0.4s ease-out;\n transform: translateY(10px);\n opacity: 0;\n}\n\n.tour-highlight[data-animation=\"fade\"].visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.dark .tour-highlight {\n background-color: rgba(255, 255, 255, 0.05);\n border-color: rgba(255, 255, 255, 0.2);\n}\n\n} /* end @layer react-product-tour */\n"],"mappings":"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","names":[]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import React, { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
|
|
3
|
+
type Placement = 'top' | 'bottom' | 'left' | 'right';
|
|
4
|
+
type MediaSource = {
|
|
5
|
+
type: 'remote' | 'local';
|
|
6
|
+
src: string;
|
|
7
|
+
};
|
|
8
|
+
interface ContentType {
|
|
9
|
+
type: 'text' | 'image' | 'video' | 'custom';
|
|
10
|
+
value: ReactNode | MediaSource;
|
|
11
|
+
alt?: string;
|
|
12
|
+
props?: Record<string, unknown>;
|
|
13
|
+
}
|
|
14
|
+
interface TourStep {
|
|
15
|
+
selector: string;
|
|
16
|
+
title?: string;
|
|
17
|
+
content: ReactNode | ContentType;
|
|
18
|
+
placement?: Placement;
|
|
19
|
+
waitFor?: () => Promise<void>;
|
|
20
|
+
}
|
|
21
|
+
interface TourContextValue {
|
|
22
|
+
steps: TourStep[];
|
|
23
|
+
currentStep: number;
|
|
24
|
+
isActive: boolean;
|
|
25
|
+
start: () => void;
|
|
26
|
+
stop: () => void;
|
|
27
|
+
next: () => void;
|
|
28
|
+
back: () => void;
|
|
29
|
+
skip: () => void;
|
|
30
|
+
}
|
|
31
|
+
interface AccessibilityConfig {
|
|
32
|
+
enableScreenReader?: boolean;
|
|
33
|
+
announcements?: {
|
|
34
|
+
start?: string;
|
|
35
|
+
end?: string;
|
|
36
|
+
step?: string;
|
|
37
|
+
};
|
|
38
|
+
focusManagement?: 'auto' | 'manual';
|
|
39
|
+
focusTrap?: boolean;
|
|
40
|
+
}
|
|
41
|
+
interface TourProviderProps {
|
|
42
|
+
steps: TourStep[];
|
|
43
|
+
children: ReactNode;
|
|
44
|
+
defaultActive?: boolean;
|
|
45
|
+
onComplete?: () => void;
|
|
46
|
+
onSkip?: () => void;
|
|
47
|
+
onStepChange?: (stepIndex: number, step: TourStep) => void;
|
|
48
|
+
onStepEnter?: (stepIndex: number, step: TourStep) => void;
|
|
49
|
+
onStepExit?: (stepIndex: number, step: TourStep) => void;
|
|
50
|
+
}
|
|
51
|
+
interface HighlightConfig {
|
|
52
|
+
className?: string;
|
|
53
|
+
style?: CSSProperties;
|
|
54
|
+
}
|
|
55
|
+
interface ButtonRenderProps {
|
|
56
|
+
onNext: () => void;
|
|
57
|
+
onBack: () => void;
|
|
58
|
+
onSkip: () => void;
|
|
59
|
+
onComplete: () => void;
|
|
60
|
+
isFirstStep: boolean;
|
|
61
|
+
isLastStep: boolean;
|
|
62
|
+
currentStep?: number;
|
|
63
|
+
totalSteps?: number;
|
|
64
|
+
}
|
|
65
|
+
interface ButtonConfig {
|
|
66
|
+
/** Custom content for the button */
|
|
67
|
+
content?: ReactNode;
|
|
68
|
+
/** Custom class for the button */
|
|
69
|
+
className?: string;
|
|
70
|
+
/** Custom style for the button */
|
|
71
|
+
style?: CSSProperties;
|
|
72
|
+
/** Custom render function for the button */
|
|
73
|
+
render?: (props: ButtonRenderProps) => ReactNode;
|
|
74
|
+
}
|
|
75
|
+
interface ButtonLayoutConfig {
|
|
76
|
+
/** Custom class for the button container */
|
|
77
|
+
className?: string;
|
|
78
|
+
/** Custom style for the button container */
|
|
79
|
+
style?: CSSProperties;
|
|
80
|
+
/** Whether to show buttons in a row (default) or column */
|
|
81
|
+
direction?: 'row' | 'column';
|
|
82
|
+
/** Alignment of buttons */
|
|
83
|
+
align?: 'start' | 'center' | 'end' | 'space-between';
|
|
84
|
+
/** Gap between buttons */
|
|
85
|
+
gap?: string;
|
|
86
|
+
/** Custom render function for the entire button container */
|
|
87
|
+
render?: (props: ButtonRenderProps) => ReactNode;
|
|
88
|
+
}
|
|
89
|
+
interface TourProps {
|
|
90
|
+
/** Custom class for the overlay */
|
|
91
|
+
overlayClassName?: string;
|
|
92
|
+
/** Custom class for the tooltip */
|
|
93
|
+
tooltipClassName?: string;
|
|
94
|
+
/** Custom class for the buttons */
|
|
95
|
+
buttonClassName?: string;
|
|
96
|
+
/** Custom class for the button container */
|
|
97
|
+
buttonContainerClassName?: string;
|
|
98
|
+
/** Whether to highlight the target element */
|
|
99
|
+
highlightTarget?: boolean | HighlightConfig;
|
|
100
|
+
/** Whether to show skip button */
|
|
101
|
+
skip?: boolean;
|
|
102
|
+
/** Whether to show progress indicator */
|
|
103
|
+
showProgress?: boolean;
|
|
104
|
+
/** Animation type for the tooltip and highlight */
|
|
105
|
+
animation?: 'slide' | 'bounce' | 'fade';
|
|
106
|
+
/** Distance in pixels between the tooltip and its target element (default: 10) */
|
|
107
|
+
tooltipOffset?: number;
|
|
108
|
+
/** Close the tour when the overlay is clicked (default: true) */
|
|
109
|
+
dismissOnOverlayClick?: boolean;
|
|
110
|
+
/** Custom button configuration */
|
|
111
|
+
buttonConfig?: {
|
|
112
|
+
primary?: ButtonConfig;
|
|
113
|
+
secondary?: ButtonConfig;
|
|
114
|
+
container?: ButtonLayoutConfig;
|
|
115
|
+
};
|
|
116
|
+
/** Accessibility configuration */
|
|
117
|
+
accessibility?: {
|
|
118
|
+
/** Whether to enable screen reader announcements */
|
|
119
|
+
enableScreenReader?: boolean;
|
|
120
|
+
/** Custom screen reader announcements */
|
|
121
|
+
announcements?: {
|
|
122
|
+
/** Announcement when tour starts */
|
|
123
|
+
start?: string;
|
|
124
|
+
/** Announcement when tour ends */
|
|
125
|
+
end?: string;
|
|
126
|
+
/** Announcement for each step (use {step} and {total} as placeholders) */
|
|
127
|
+
step?: string;
|
|
128
|
+
};
|
|
129
|
+
/** Focus management strategy */
|
|
130
|
+
focusManagement?: 'auto' | 'manual';
|
|
131
|
+
/** Whether to trap focus within the tour */
|
|
132
|
+
focusTrap?: boolean;
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
declare const TourProvider: React.FC<TourProviderProps>;
|
|
137
|
+
|
|
138
|
+
declare const useTour: () => TourContextValue;
|
|
139
|
+
|
|
140
|
+
interface TourState {
|
|
141
|
+
steps: TourStep[];
|
|
142
|
+
currentStep: number;
|
|
143
|
+
isActive: boolean;
|
|
144
|
+
}
|
|
145
|
+
type TourListener = (state: TourState) => void;
|
|
146
|
+
declare class TourManager {
|
|
147
|
+
private static instance;
|
|
148
|
+
private state;
|
|
149
|
+
private listeners;
|
|
150
|
+
private constructor();
|
|
151
|
+
static getInstance(): TourManager;
|
|
152
|
+
getState(): TourState;
|
|
153
|
+
initialize(steps: TourStep[]): void;
|
|
154
|
+
start(): void;
|
|
155
|
+
stop(): void;
|
|
156
|
+
next(): void;
|
|
157
|
+
back(): void;
|
|
158
|
+
skip(): void;
|
|
159
|
+
subscribe(listener: TourListener): () => void;
|
|
160
|
+
private notifyListeners;
|
|
161
|
+
}
|
|
162
|
+
declare const tourManager: TourManager;
|
|
163
|
+
|
|
164
|
+
declare const Tour: React.FC<TourProps>;
|
|
165
|
+
|
|
166
|
+
export { type AccessibilityConfig, type ButtonConfig, type ButtonLayoutConfig, type ButtonRenderProps, type ContentType, type HighlightConfig, type MediaSource, type Placement, Tour, type TourContextValue, type TourProps, TourProvider, type TourProviderProps, type TourStep, tourManager, useTour };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import React, { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
|
|
3
|
+
type Placement = 'top' | 'bottom' | 'left' | 'right';
|
|
4
|
+
type MediaSource = {
|
|
5
|
+
type: 'remote' | 'local';
|
|
6
|
+
src: string;
|
|
7
|
+
};
|
|
8
|
+
interface ContentType {
|
|
9
|
+
type: 'text' | 'image' | 'video' | 'custom';
|
|
10
|
+
value: ReactNode | MediaSource;
|
|
11
|
+
alt?: string;
|
|
12
|
+
props?: Record<string, unknown>;
|
|
13
|
+
}
|
|
14
|
+
interface TourStep {
|
|
15
|
+
selector: string;
|
|
16
|
+
title?: string;
|
|
17
|
+
content: ReactNode | ContentType;
|
|
18
|
+
placement?: Placement;
|
|
19
|
+
waitFor?: () => Promise<void>;
|
|
20
|
+
}
|
|
21
|
+
interface TourContextValue {
|
|
22
|
+
steps: TourStep[];
|
|
23
|
+
currentStep: number;
|
|
24
|
+
isActive: boolean;
|
|
25
|
+
start: () => void;
|
|
26
|
+
stop: () => void;
|
|
27
|
+
next: () => void;
|
|
28
|
+
back: () => void;
|
|
29
|
+
skip: () => void;
|
|
30
|
+
}
|
|
31
|
+
interface AccessibilityConfig {
|
|
32
|
+
enableScreenReader?: boolean;
|
|
33
|
+
announcements?: {
|
|
34
|
+
start?: string;
|
|
35
|
+
end?: string;
|
|
36
|
+
step?: string;
|
|
37
|
+
};
|
|
38
|
+
focusManagement?: 'auto' | 'manual';
|
|
39
|
+
focusTrap?: boolean;
|
|
40
|
+
}
|
|
41
|
+
interface TourProviderProps {
|
|
42
|
+
steps: TourStep[];
|
|
43
|
+
children: ReactNode;
|
|
44
|
+
defaultActive?: boolean;
|
|
45
|
+
onComplete?: () => void;
|
|
46
|
+
onSkip?: () => void;
|
|
47
|
+
onStepChange?: (stepIndex: number, step: TourStep) => void;
|
|
48
|
+
onStepEnter?: (stepIndex: number, step: TourStep) => void;
|
|
49
|
+
onStepExit?: (stepIndex: number, step: TourStep) => void;
|
|
50
|
+
}
|
|
51
|
+
interface HighlightConfig {
|
|
52
|
+
className?: string;
|
|
53
|
+
style?: CSSProperties;
|
|
54
|
+
}
|
|
55
|
+
interface ButtonRenderProps {
|
|
56
|
+
onNext: () => void;
|
|
57
|
+
onBack: () => void;
|
|
58
|
+
onSkip: () => void;
|
|
59
|
+
onComplete: () => void;
|
|
60
|
+
isFirstStep: boolean;
|
|
61
|
+
isLastStep: boolean;
|
|
62
|
+
currentStep?: number;
|
|
63
|
+
totalSteps?: number;
|
|
64
|
+
}
|
|
65
|
+
interface ButtonConfig {
|
|
66
|
+
/** Custom content for the button */
|
|
67
|
+
content?: ReactNode;
|
|
68
|
+
/** Custom class for the button */
|
|
69
|
+
className?: string;
|
|
70
|
+
/** Custom style for the button */
|
|
71
|
+
style?: CSSProperties;
|
|
72
|
+
/** Custom render function for the button */
|
|
73
|
+
render?: (props: ButtonRenderProps) => ReactNode;
|
|
74
|
+
}
|
|
75
|
+
interface ButtonLayoutConfig {
|
|
76
|
+
/** Custom class for the button container */
|
|
77
|
+
className?: string;
|
|
78
|
+
/** Custom style for the button container */
|
|
79
|
+
style?: CSSProperties;
|
|
80
|
+
/** Whether to show buttons in a row (default) or column */
|
|
81
|
+
direction?: 'row' | 'column';
|
|
82
|
+
/** Alignment of buttons */
|
|
83
|
+
align?: 'start' | 'center' | 'end' | 'space-between';
|
|
84
|
+
/** Gap between buttons */
|
|
85
|
+
gap?: string;
|
|
86
|
+
/** Custom render function for the entire button container */
|
|
87
|
+
render?: (props: ButtonRenderProps) => ReactNode;
|
|
88
|
+
}
|
|
89
|
+
interface TourProps {
|
|
90
|
+
/** Custom class for the overlay */
|
|
91
|
+
overlayClassName?: string;
|
|
92
|
+
/** Custom class for the tooltip */
|
|
93
|
+
tooltipClassName?: string;
|
|
94
|
+
/** Custom class for the buttons */
|
|
95
|
+
buttonClassName?: string;
|
|
96
|
+
/** Custom class for the button container */
|
|
97
|
+
buttonContainerClassName?: string;
|
|
98
|
+
/** Whether to highlight the target element */
|
|
99
|
+
highlightTarget?: boolean | HighlightConfig;
|
|
100
|
+
/** Whether to show skip button */
|
|
101
|
+
skip?: boolean;
|
|
102
|
+
/** Whether to show progress indicator */
|
|
103
|
+
showProgress?: boolean;
|
|
104
|
+
/** Animation type for the tooltip and highlight */
|
|
105
|
+
animation?: 'slide' | 'bounce' | 'fade';
|
|
106
|
+
/** Distance in pixels between the tooltip and its target element (default: 10) */
|
|
107
|
+
tooltipOffset?: number;
|
|
108
|
+
/** Close the tour when the overlay is clicked (default: true) */
|
|
109
|
+
dismissOnOverlayClick?: boolean;
|
|
110
|
+
/** Custom button configuration */
|
|
111
|
+
buttonConfig?: {
|
|
112
|
+
primary?: ButtonConfig;
|
|
113
|
+
secondary?: ButtonConfig;
|
|
114
|
+
container?: ButtonLayoutConfig;
|
|
115
|
+
};
|
|
116
|
+
/** Accessibility configuration */
|
|
117
|
+
accessibility?: {
|
|
118
|
+
/** Whether to enable screen reader announcements */
|
|
119
|
+
enableScreenReader?: boolean;
|
|
120
|
+
/** Custom screen reader announcements */
|
|
121
|
+
announcements?: {
|
|
122
|
+
/** Announcement when tour starts */
|
|
123
|
+
start?: string;
|
|
124
|
+
/** Announcement when tour ends */
|
|
125
|
+
end?: string;
|
|
126
|
+
/** Announcement for each step (use {step} and {total} as placeholders) */
|
|
127
|
+
step?: string;
|
|
128
|
+
};
|
|
129
|
+
/** Focus management strategy */
|
|
130
|
+
focusManagement?: 'auto' | 'manual';
|
|
131
|
+
/** Whether to trap focus within the tour */
|
|
132
|
+
focusTrap?: boolean;
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
declare const TourProvider: React.FC<TourProviderProps>;
|
|
137
|
+
|
|
138
|
+
declare const useTour: () => TourContextValue;
|
|
139
|
+
|
|
140
|
+
interface TourState {
|
|
141
|
+
steps: TourStep[];
|
|
142
|
+
currentStep: number;
|
|
143
|
+
isActive: boolean;
|
|
144
|
+
}
|
|
145
|
+
type TourListener = (state: TourState) => void;
|
|
146
|
+
declare class TourManager {
|
|
147
|
+
private static instance;
|
|
148
|
+
private state;
|
|
149
|
+
private listeners;
|
|
150
|
+
private constructor();
|
|
151
|
+
static getInstance(): TourManager;
|
|
152
|
+
getState(): TourState;
|
|
153
|
+
initialize(steps: TourStep[]): void;
|
|
154
|
+
start(): void;
|
|
155
|
+
stop(): void;
|
|
156
|
+
next(): void;
|
|
157
|
+
back(): void;
|
|
158
|
+
skip(): void;
|
|
159
|
+
subscribe(listener: TourListener): () => void;
|
|
160
|
+
private notifyListeners;
|
|
161
|
+
}
|
|
162
|
+
declare const tourManager: TourManager;
|
|
163
|
+
|
|
164
|
+
declare const Tour: React.FC<TourProps>;
|
|
165
|
+
|
|
166
|
+
export { type AccessibilityConfig, type ButtonConfig, type ButtonLayoutConfig, type ButtonRenderProps, type ContentType, type HighlightConfig, type MediaSource, type Placement, Tour, type TourContextValue, type TourProps, TourProvider, type TourProviderProps, type TourStep, tourManager, useTour };
|