react-product-tour-guide 0.2.1 → 0.3.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/CHANGELOG.md +14 -0
  2. package/README.md +16 -9
  3. package/dist/index.css +24 -0
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +3 -0
  6. package/dist/index.d.ts +3 -0
  7. package/dist/index.js +57 -26
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +57 -26
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +18 -12
package/CHANGELOG.md CHANGED
@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.3.0] - 2026-03-27
9
+
10
+ ### Added
11
+
12
+ - **React 19 support.** Peer dependencies now accept `react: ^18.0.0 || ^19.0.0` and `react-dom: ^18.0.0 || ^19.0.0`.
13
+ - **`buttonConfig.back` and `buttonConfig.skip`** — dedicated config keys for the Back and Skip buttons. `secondary` is preserved as a backward-compatible fallback that applies to both when neither specific key is present.
14
+ - **Tag-based publishing.** The GitHub Actions workflow now triggers on `v*` tags instead of every push to `main`, giving explicit control over npm releases.
15
+
16
+ ### Fixed
17
+
18
+ - **Two "Back" buttons appearing** when `buttonConfig.secondary.content` was customised: the `secondary` config was shared by both the Back and Skip buttons. Back and Skip now each resolve their own config key first, falling back to `secondary` only when not set.
19
+ - **Styles not loading in apps that don't use Tailwind CSS.** The library's own layout (button container, button group, progress bar header, content spacing) was relying on Tailwind utility classes that are only generated when the consumer's Tailwind config scans the library source. All internal layout styles are now defined in the library's injected CSS, so styles work out-of-the-box regardless of whether the consuming app uses Tailwind.
20
+ - **Style injection tree-shaken away** by esbuild during the library build. The `sideEffects` field in `package.json` now correctly marks both the source injection file and the dist entry points, preventing bundlers from dropping the style injection code.
21
+
8
22
  ## [0.2.0] - 2026-03-09
9
23
 
10
24
  ### Fixed
package/README.md CHANGED
@@ -14,6 +14,8 @@ A flexible and accessible product tour component for React applications.
14
14
  - Customizable styling via CSS variables, class names, or fully custom button renders
15
15
  - Error boundaries for graceful media failure degradation
16
16
  - Debounced scroll/resize handling for smooth repositioning
17
+ - Works without Tailwind CSS — base styles are injected automatically; Tailwind classes still accepted for customisation
18
+ - React 18 and React 19 compatible
17
19
 
18
20
  ## Installation
19
21
 
@@ -300,6 +302,8 @@ Without Tailwind, plain CSS classes work when your rules are unlayered (unlayere
300
302
 
301
303
  ### Custom Button Rendering
302
304
 
305
+ Use `back` and `skip` to configure each secondary button independently. `secondary` is still accepted as a fallback for both when neither specific key is set.
306
+
303
307
  ```tsx
304
308
  <Tour
305
309
  buttonConfig={{
@@ -307,21 +311,24 @@ Without Tailwind, plain CSS classes work when your rules are unlayered (unlayere
307
311
  content: "Continue →",
308
312
  className: "bg-indigo-500 text-white px-6 py-2 rounded-lg",
309
313
  },
310
- secondary: {
314
+ back: {
311
315
  content: "← Back",
312
316
  },
313
- // Or full custom render:
314
- primary: {
315
- render: ({ onNext, onComplete, isLastStep, currentStep, totalSteps }) => (
316
- <button onClick={isLastStep ? onComplete : onNext}>
317
- {isLastStep ? "Finish" : `Next (${currentStep + 1}/${totalSteps})`}
318
- </button>
319
- ),
317
+ skip: {
318
+ content: "Skip tour",
320
319
  },
320
+ // Or a full custom render per button:
321
+ // primary: {
322
+ // render: ({ onNext, onComplete, isLastStep, currentStep, totalSteps }) => (
323
+ // <button onClick={isLastStep ? onComplete : onNext}>
324
+ // {isLastStep ? "Finish" : `Next (${currentStep + 1}/${totalSteps})`}
325
+ // </button>
326
+ // ),
327
+ // },
321
328
  // Custom container layout:
322
329
  container: {
323
330
  render: (props) => (
324
- <div className="flex flex-col gap-3 mt-4 pt-4 border-t">
331
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
325
332
  <button onClick={props.isLastStep ? props.onComplete : props.onNext}>
326
333
  {props.isLastStep ? "Done" : "Next"}
327
334
  </button>
package/dist/index.css CHANGED
@@ -160,6 +160,30 @@
160
160
  gap: var(--tour--tooltip--gap);
161
161
  justify-content: flex-end;
162
162
  }
163
+ .tour-button-nav {
164
+ display: flex;
165
+ justify-content: space-between;
166
+ align-items: center;
167
+ gap: 0.5rem;
168
+ }
169
+ .tour-button-group {
170
+ display: flex;
171
+ gap: 0.5rem;
172
+ }
173
+ .tour-progress-section {
174
+ margin-bottom: 1rem;
175
+ }
176
+ .tour-progress-header {
177
+ display: flex;
178
+ justify-content: space-between;
179
+ align-items: center;
180
+ margin-bottom: 0.25rem;
181
+ }
182
+ .tour-step-counter {
183
+ font-size: 0.75rem;
184
+ line-height: 1rem;
185
+ opacity: 0.6;
186
+ }
163
187
  .tour-tooltip::before {
164
188
  content: "";
165
189
  position: absolute;
package/dist/index.css.map CHANGED
@@ -1 +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":[]}
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/* Button navigation bar */\n.tour-button-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 0.5rem;\n}\n\n/* Back/Skip group */\n.tour-button-group {\n display: flex;\n gap: 0.5rem;\n}\n\n/* Progress section */\n.tour-progress-section {\n margin-bottom: 1rem;\n}\n\n.tour-progress-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.25rem;\n}\n\n.tour-step-counter {\n font-size: 0.75rem;\n line-height: 1rem;\n opacity: 0.6;\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 CHANGED
@@ -110,7 +110,10 @@ interface TourProps {
110
110
  /** Custom button configuration */
111
111
  buttonConfig?: {
112
112
  primary?: ButtonConfig;
113
+ /** @deprecated Use `back` and `skip` instead. Applies to both back and skip buttons when the specific key is absent. */
113
114
  secondary?: ButtonConfig;
115
+ back?: ButtonConfig;
116
+ skip?: ButtonConfig;
114
117
  container?: ButtonLayoutConfig;
115
118
  };
116
119
  /** Accessibility configuration */
package/dist/index.d.ts CHANGED
@@ -110,7 +110,10 @@ interface TourProps {
110
110
  /** Custom button configuration */
111
111
  buttonConfig?: {
112
112
  primary?: ButtonConfig;
113
+ /** @deprecated Use `back` and `skip` instead. Applies to both back and skip buttons when the specific key is absent. */
113
114
  secondary?: ButtonConfig;
115
+ back?: ButtonConfig;
116
+ skip?: ButtonConfig;
114
117
  container?: ButtonLayoutConfig;
115
118
  };
116
119
  /** Accessibility configuration */
package/dist/index.js CHANGED
@@ -233,6 +233,38 @@ var __tourStyles__ = `@layer react-product-tour {
233
233
  justify-content: flex-end;
234
234
  }
235
235
 
236
+ /* Button navigation bar */
237
+ .tour-button-nav {
238
+ display: flex;
239
+ justify-content: space-between;
240
+ align-items: center;
241
+ gap: 0.5rem;
242
+ }
243
+
244
+ /* Back/Skip group */
245
+ .tour-button-group {
246
+ display: flex;
247
+ gap: 0.5rem;
248
+ }
249
+
250
+ /* Progress section */
251
+ .tour-progress-section {
252
+ margin-bottom: 1rem;
253
+ }
254
+
255
+ .tour-progress-header {
256
+ display: flex;
257
+ justify-content: space-between;
258
+ align-items: center;
259
+ margin-bottom: 0.25rem;
260
+ }
261
+
262
+ .tour-step-counter {
263
+ font-size: 0.75rem;
264
+ line-height: 1rem;
265
+ opacity: 0.6;
266
+ }
267
+
236
268
  /* Tooltip arrow */
237
269
  .tour-tooltip::before {
238
270
  content: '';
@@ -584,9 +616,9 @@ var ProgressBar = ({
584
616
  ) });
585
617
  };
586
618
  var MediaFallback = ({ type, className = "" }) => {
587
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex items-center justify-center p-4 bg-gray-100 rounded-lg ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
588
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-400 mb-2", children: type === "image" ? "\u{1F5BC}\uFE0F" : "\u{1F3A5}" }),
589
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: type === "image" ? "Image failed to load" : "Video failed to load" })
619
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem", background: "#f3f4f6", borderRadius: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
620
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#9ca3af", marginBottom: "0.5rem" }, children: type === "image" ? "\u{1F5BC}\uFE0F" : "\u{1F3A5}" }),
621
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: type === "image" ? "Image failed to load" : "Video failed to load" })
590
622
  ] }) });
591
623
  };
592
624
  var ErrorBoundary = class extends React5.Component {
@@ -645,13 +677,13 @@ var filterProps = (props, allowList) => {
645
677
  };
646
678
  var ImageContent = ({ src, alt = "Tour content", props }) => {
647
679
  const [hasError, setHasError] = React5.useState(false);
648
- if (hasError) return /* @__PURE__ */ jsxRuntime.jsx(MediaFallback, { type: "image", className: "w-full h-auto" });
680
+ if (hasError) return /* @__PURE__ */ jsxRuntime.jsx(MediaFallback, { type: "image" });
649
681
  return /* @__PURE__ */ jsxRuntime.jsx(
650
682
  "img",
651
683
  {
652
684
  src,
653
685
  alt,
654
- className: "w-full h-auto rounded-lg",
686
+ style: { width: "100%", height: "auto", borderRadius: "0.5rem" },
655
687
  onError: () => setHasError(true),
656
688
  ...filterProps(props, SAFE_IMG_ATTRS)
657
689
  }
@@ -659,7 +691,7 @@ var ImageContent = ({ src, alt = "Tour content", props }) => {
659
691
  };
660
692
  var VideoContent = ({ src, props }) => {
661
693
  const [hasError, setHasError] = React5.useState(false);
662
- if (hasError) return /* @__PURE__ */ jsxRuntime.jsx(MediaFallback, { type: "video", className: "w-full h-auto" });
694
+ if (hasError) return /* @__PURE__ */ jsxRuntime.jsx(MediaFallback, { type: "video" });
663
695
  return /* @__PURE__ */ jsxRuntime.jsx(
664
696
  "video",
665
697
  {
@@ -705,16 +737,15 @@ var renderButtons = (props, config) => {
705
737
  isLastStep,
706
738
  skip
707
739
  } = props;
740
+ const backCfg = config?.back ?? config?.secondary;
741
+ const skipCfg = config?.skip ?? config?.secondary;
708
742
  if (config?.container?.render) {
709
743
  return config.container.render(props);
710
744
  }
711
745
  return /* @__PURE__ */ jsxRuntime.jsxs(
712
746
  "div",
713
747
  {
714
- className: clsx.clsx(
715
- "flex justify-between items-center gap-2",
716
- config?.container?.className
717
- ),
748
+ className: clsx.clsx("tour-button-nav", config?.container?.className),
718
749
  style: {
719
750
  flexDirection: config?.container?.direction || "row",
720
751
  alignItems: config?.container?.align || "center",
@@ -724,25 +755,25 @@ var renderButtons = (props, config) => {
724
755
  role: "toolbar",
725
756
  "aria-label": "Tour navigation",
726
757
  children: [
727
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
728
- !isFirstStep && (config?.secondary?.render ? config.secondary.render(props) : /* @__PURE__ */ jsxRuntime.jsx(
758
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tour-button-group", children: [
759
+ !isFirstStep && (backCfg?.render ? backCfg.render(props) : /* @__PURE__ */ jsxRuntime.jsx(
729
760
  "button",
730
761
  {
731
762
  onClick: onBack,
732
- className: clsx.clsx("tour-button tour-button-secondary", config?.secondary?.className),
733
- style: config?.secondary?.style,
763
+ className: clsx.clsx("tour-button tour-button-secondary", backCfg?.className),
764
+ style: backCfg?.style,
734
765
  "aria-label": "Go to previous step",
735
- children: config?.secondary?.content || "Back"
766
+ children: backCfg?.content || "Back"
736
767
  }
737
768
  )),
738
- skip && (config?.secondary?.render ? config.secondary.render(props) : /* @__PURE__ */ jsxRuntime.jsx(
769
+ skip && (skipCfg?.render ? skipCfg.render(props) : /* @__PURE__ */ jsxRuntime.jsx(
739
770
  "button",
740
771
  {
741
772
  onClick: onSkip,
742
- className: clsx.clsx("tour-button tour-button-secondary", config?.secondary?.className),
743
- style: config?.secondary?.style,
773
+ className: clsx.clsx("tour-button tour-button-secondary", skipCfg?.className),
774
+ style: skipCfg?.style,
744
775
  "aria-label": "Skip tour",
745
- children: config?.secondary?.content || "Skip"
776
+ children: skipCfg?.content || "Skip"
746
777
  }
747
778
  ))
748
779
  ] }),
@@ -798,7 +829,7 @@ var TourTooltip = ({
798
829
  {
799
830
  ref: setFloating,
800
831
  style: floatingStyles,
801
- className: clsx.clsx("tour-tooltip z-50", tooltipClassName, { visible: isVisible }),
832
+ className: clsx.clsx("tour-tooltip", tooltipClassName, { visible: isVisible }),
802
833
  role: "dialog",
803
834
  "aria-modal": "true",
804
835
  "aria-labelledby": "tour-step-title",
@@ -807,16 +838,16 @@ var TourTooltip = ({
807
838
  "data-animation": animation,
808
839
  children: [
809
840
  title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { id: "tour-step-title", className: "tour-tooltip-title", children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { id: "tour-step-title", className: "sr-only", children: `Tour Step: ${targetLabel}` }),
810
- showProgress && currentStep !== void 0 && totalSteps !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
811
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between items-center mb-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", style: { opacity: 0.6 }, "aria-hidden": "true", children: `Step ${currentStep + 1} of ${totalSteps}` }) }),
841
+ showProgress && currentStep !== void 0 && totalSteps !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tour-progress-section", children: [
842
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tour-progress-header", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tour-step-counter", "aria-hidden": "true", children: `Step ${currentStep + 1} of ${totalSteps}` }) }),
812
843
  /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { currentStep, totalSteps })
813
844
  ] }),
814
- /* @__PURE__ */ jsxRuntime.jsx("div", { id: "tour-step-content", className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
845
+ /* @__PURE__ */ jsxRuntime.jsx("div", { id: "tour-step-content", className: "tour-tooltip-content", children: /* @__PURE__ */ jsxRuntime.jsx(
815
846
  ErrorBoundary,
816
847
  {
817
- fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg", children: [
818
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600 mb-2", children: "Content Error" }),
819
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: "Failed to render tour content" })
848
+ fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "1rem", background: "#f9fafb", border: "1px solid #e5e7eb", borderRadius: "0.5rem" }, children: [
849
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#4b5563", marginBottom: "0.5rem" }, children: "Content Error" }),
850
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: "Failed to render tour content" })
820
851
  ] }),
821
852
  children: renderContent(content)
822
853
  }