{"_id":"@aladinbs/react-guided-tour","_rev":"6-2b880fe7b741f14b11e2ed8ed0b9e391","name":"@aladinbs/react-guided-tour","dist-tags":{"latest":"1.3.0"},"versions":{"1.0.1":{"name":"@aladinbs/react-guided-tour","version":"1.0.1","keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"license":"MIT","_id":"@aladinbs/react-guided-tour@1.0.1","maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"dist":{"shasum":"8b1b01a036963de71899eb41ab657522f9eed14d","tarball":"https://registry.npmjs.org/@aladinbs/react-guided-tour/-/react-guided-tour-1.0.1.tgz","fileCount":37,"integrity":"sha512-byN+9VmSianf9ckW6s7QRD3IPJDt60or7GF/Gu5JkhHBAvp8rVxY8h5ss/ITJ8s9ZiUVL9dq2NTBJYu5t/+D8Q==","signatures":[{"sig":"MEUCIGknVixeik2VXFR7Bu9P85YnFn6jK5DQjsTcOe7D16DrAiEAhkZNJMtFJOojhhim4/IcjnNzPHyFfu3kDm5PVrbFwyM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":488515},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","example":"cd example && npm start","prepare":"npm run build","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepublishOnly":"npm run lint && npm run type-check && npm run build"},"_npmUser":{"name":"aladinbs","email":"aladin.bensassi@gmail.com"},"repository":{"url":"git+https://github.com/Aladinbensassi/react-guided-tour.git","type":"git"},"_npmVersion":"11.1.0","description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","directories":{},"_nodeVersion":"22.9.0","dependencies":{"clsx":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.0.0","tslib":"^2.6.2","eslint":"^8.54.0","rollup":"^4.5.0","postcss":"^8.5.6","ts-jest":"^29.1.1","react-dom":"^19.0.0","typescript":"^5.2.2","@types/jest":"^29.5.8","tailwindcss":"^4.1.18","@types/react":"^18.3.27","autoprefixer":"^10.4.23","@types/react-dom":"^18.2.17","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.33.2","@rollup/plugin-commonjs":"^25.0.7","@tailwindcss/typography":"^0.5.19","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/parser":"^6.12.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^6.12.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-guided-tour_1.0.1_1767653958578_0.2553804476422339","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aladinbs/react-guided-tour","version":"1.0.2","keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"license":"MIT","_id":"@aladinbs/react-guided-tour@1.0.2","maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"dist":{"shasum":"de9dd3fb41866b89fcc8f46591f3f76fc8e62449","tarball":"https://registry.npmjs.org/@aladinbs/react-guided-tour/-/react-guided-tour-1.0.2.tgz","fileCount":37,"integrity":"sha512-6HpyT1rkZ5w1kAJhetvH8gu22/yHOrPUjjdcunekjfLehvPvapWehOrZ8BLHdQ1gWiTzSgS9SH5gEmi/whJJ3A==","signatures":[{"sig":"MEYCIQDI2yV8UQ1k31x3MFLAgDz+cevHYtvNGrbFjV0zgx+w+QIhAJmen7TAAlJvrFNl4rplk3BUrnettkJugZW2khkFJCEB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":488306},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"6b480ae6e0d59b8e268cc52547f6f4c699297e84","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","example":"cd example && npm start","prepare":"npm run build","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepublishOnly":"npm run lint && npm run type-check && npm run build"},"_npmUser":{"name":"aladinbs","email":"aladin.bensassi@gmail.com"},"repository":{"url":"git+https://github.com/Aladinbensassi/react-guided-tour.git","type":"git"},"_npmVersion":"11.1.0","description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","directories":{},"_nodeVersion":"22.9.0","dependencies":{"clsx":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.0.0","tslib":"^2.6.2","eslint":"^8.54.0","rollup":"^4.5.0","postcss":"^8.5.6","ts-jest":"^29.1.1","react-dom":"^19.0.0","typescript":"^5.2.2","@types/jest":"^29.5.8","tailwindcss":"^4.1.18","@types/react":"^18.3.27","autoprefixer":"^10.4.23","@types/react-dom":"^18.2.17","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.33.2","@rollup/plugin-commonjs":"^25.0.7","@tailwindcss/typography":"^0.5.19","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/parser":"^6.12.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^6.12.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-guided-tour_1.0.2_1767663532813_0.2062713514939385","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aladinbs/react-guided-tour","version":"1.0.3","keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"license":"MIT","_id":"@aladinbs/react-guided-tour@1.0.3","maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"dist":{"shasum":"32d08062f821d074d3e4e7430b734b4d989e0be0","tarball":"https://registry.npmjs.org/@aladinbs/react-guided-tour/-/react-guided-tour-1.0.3.tgz","fileCount":47,"integrity":"sha512-SWJM7BBt16oJvf5Aq4lXc1oqp4t5M6UTzrk9IAX8TRZwb1uuKMOmxqLIxnW6H3jvB6HGyH02/v8sdOtJKLdx0Q==","signatures":[{"sig":"MEUCIQCPXAd1hDcRYtsGoKL0abWKxKkcgj6khTORxgNK/npu+AIgPAv6AuYVWUQH5qp7Y6hKnq/tuERZhTHtJNd8iCJHFQs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":571240},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"56f9a96d9b8d021efa53605e9925f04472394994","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","example":"cd example && npm start","prepare":"npm run build","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepublishOnly":"npm run lint && npm run type-check && npm run build"},"_npmUser":{"name":"aladinbs","email":"aladin.bensassi@gmail.com"},"repository":{"url":"git+https://github.com/Aladinbensassi/react-guided-tour.git","type":"git"},"_npmVersion":"10.2.4","description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","directories":{},"_nodeVersion":"20.11.0","dependencies":{"clsx":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.0.0","tslib":"^2.6.2","eslint":"^8.54.0","rollup":"^4.5.0","postcss":"^8.5.6","ts-jest":"^29.1.1","react-dom":"^19.0.0","typescript":"^5.2.2","@types/jest":"^29.5.8","tailwindcss":"^4.1.18","@types/react":"^18.3.27","autoprefixer":"^10.4.23","@types/react-dom":"^18.2.17","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.33.2","@rollup/plugin-commonjs":"^25.0.7","@tailwindcss/typography":"^0.5.19","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/parser":"^6.12.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^6.12.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-guided-tour_1.0.3_1767669420575_0.34831310217555633","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@aladinbs/react-guided-tour","version":"1.1.0","keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"license":"MIT","_id":"@aladinbs/react-guided-tour@1.1.0","maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"dist":{"shasum":"250fb64a2176c0fa241c4bd99faa145f2aa0ade8","tarball":"https://registry.npmjs.org/@aladinbs/react-guided-tour/-/react-guided-tour-1.1.0.tgz","fileCount":47,"integrity":"sha512-JQQ96P/2RUA/buETH3/fgZa8+aIXtyNHSF1PLVtm8bK4naVfy6+booUwVSGZ4bMBRYydMp7/5zvJxJrXLkjpFg==","signatures":[{"sig":"MEUCIGq6OTIUMAjv5MBbd67837UStzSjBJDblLOe50MBLHtpAiEA2XNgp2zUTDUoMhrXWaXbThn3fypRcgFOmYYMSKQfhxE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":627053},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"f7e50f5a50cb6fb63c4b6246d045eb3d62082c1e","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","example":"cd example && npm start","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepublishOnly":"npm run lint && npm run type-check && npm run build"},"_npmUser":{"name":"aladinbs","email":"aladin.bensassi@gmail.com"},"repository":{"url":"git+https://github.com/Aladinbensassi/react-guided-tour.git","type":"git"},"_npmVersion":"10.2.4","description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","directories":{},"_nodeVersion":"20.11.0","dependencies":{"clsx":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.0.0","tslib":"^2.6.2","eslint":"^8.54.0","rollup":"^4.5.0","postcss":"^8.5.6","ts-jest":"^29.1.1","react-dom":"^19.0.0","typescript":"^5.2.2","@types/jest":"^29.5.8","tailwindcss":"^4.1.18","@types/react":"^18.3.27","autoprefixer":"^10.4.23","@types/react-dom":"^18.2.17","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.33.2","@rollup/plugin-commonjs":"^25.0.7","@tailwindcss/typography":"^0.5.19","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/parser":"^6.12.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^6.12.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-guided-tour_1.1.0_1768778456989_0.3974402070394749","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@aladinbs/react-guided-tour","version":"1.2.0","keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"license":"MIT","_id":"@aladinbs/react-guided-tour@1.2.0","maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"dist":{"shasum":"4a08609de098b094fb775353479f3c9aeb7a0996","tarball":"https://registry.npmjs.org/@aladinbs/react-guided-tour/-/react-guided-tour-1.2.0.tgz","fileCount":47,"integrity":"sha512-T+Cp1dC2Slx2PllEYgMHzKpkvhkYJC8elWU6ZsMzHXv9wwaU2f4ClwolzVuoa/YgInuhIWoGOxY8cat873fceA==","signatures":[{"sig":"MEQCIFzGBXdPba/RNwdK/SGnpIcRRJ/MYpUp7ISBUmgClcjNAiAYGrZoJIhAA7gIA4pv8O/feox6YQF9AF3mEHy7f5bWzw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":631160},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"e0be069833759260f083dcaf95b139247e8be5b9","scripts":{"dev":"rollup -c -w","lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","example":"cd example && npm start","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","prepublishOnly":"npm run lint && npm run type-check && npm run build"},"_npmUser":{"name":"aladinbs","email":"aladin.bensassi@gmail.com"},"repository":{"url":"git+https://github.com/Aladinbensassi/react-guided-tour.git","type":"git"},"_npmVersion":"10.2.4","description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","directories":{},"_nodeVersion":"20.11.0","dependencies":{"clsx":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^19.0.0","tslib":"^2.6.2","eslint":"^8.54.0","rollup":"^4.5.0","postcss":"^8.5.6","ts-jest":"^29.1.1","react-dom":"^19.0.0","typescript":"^5.2.2","@types/jest":"^29.5.8","tailwindcss":"^4.1.18","@types/react":"^18.3.27","autoprefixer":"^10.4.23","@types/react-dom":"^18.2.17","rollup-plugin-dts":"^6.1.0","eslint-plugin-react":"^7.33.2","@rollup/plugin-commonjs":"^25.0.7","@tailwindcss/typography":"^0.5.19","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/parser":"^6.12.0","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^6.12.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-guided-tour_1.2.0_1768790603889_0.2786344859218337","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@aladinbs/react-guided-tour","version":"1.3.0","description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","type":"module","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","lint":"eslint src --ext .ts,.tsx","lint:fix":"eslint src --ext .ts,.tsx --fix","type-check":"tsc --noEmit","example":"cd example && npm start","prepublishOnly":"npm run lint && npm run type-check && npm run build"},"keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","repository":{"type":"git","url":"git+https://github.com/Aladinbensassi/react-guided-tour.git"},"bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"license":"MIT","peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@tailwindcss/typography":"^0.5.19","@types/jest":"^29.5.8","@types/react":"^18.3.27","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.12.0","@typescript-eslint/parser":"^6.12.0","autoprefixer":"^10.4.23","eslint":"^8.54.0","eslint-plugin-react":"^7.33.2","eslint-plugin-react-hooks":"^4.6.0","jest":"^29.7.0","postcss":"^8.5.6","react":"^19.0.0","react-dom":"^19.0.0","rollup":"^4.5.0","rollup-plugin-dts":"^6.1.0","tailwindcss":"^4.1.18","ts-jest":"^29.1.1","tslib":"^2.6.2","typescript":"^5.2.2"},"dependencies":{"clsx":"^2.0.0"},"_id":"@aladinbs/react-guided-tour@1.3.0","gitHead":"9754859fa25dc8555ea207c93552b7a319d8ea8e","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-YNqdOE8ebzU6CaOHxZr7WC/zijfS/TOVmr9cDj7cL+mx4RkQ2LuAlJnEgnxqWSvTnTnir5BI6qqADm0vkx/uJw==","shasum":"8de90c5214065a1ad215ea81d323d72031661ba8","tarball":"https://registry.npmjs.org/@aladinbs/react-guided-tour/-/react-guided-tour-1.3.0.tgz","fileCount":47,"unpackedSize":637094,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCbwIadMVDOwgOQhwJ3ONuXd7RlCNARVUI68Eta32FuuAIgNr9KjI7sYBVuWP/eWTHDMeBm1ljO3ZNwQrOH95uFjqM="}]},"_npmUser":{"name":"aladinbs","email":"aladin.bensassi@gmail.com"},"directories":{},"maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-guided-tour_1.3.0_1768854923637_0.831968230176467"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-05T22:59:18.510Z","modified":"2026-01-19T20:35:23.925Z","1.0.1":"2026-01-05T22:59:18.725Z","1.0.2":"2026-01-06T01:38:53.013Z","1.0.3":"2026-01-06T03:17:00.725Z","1.1.0":"2026-01-18T23:20:57.160Z","1.2.0":"2026-01-19T02:43:24.065Z","1.3.0":"2026-01-19T20:35:23.825Z"},"bugs":{"url":"https://github.com/Aladinbensassi/react-guided-tour/issues"},"author":{"name":"Aladin Bensassi","email":"aladin.bensassi@gmail.com"},"license":"MIT","homepage":"https://github.com/Aladinbensassi/react-guided-tour#readme","keywords":["react","tour","guide","onboarding","tutorial","typescript","ui","highlight"],"repository":{"type":"git","url":"git+https://github.com/Aladinbensassi/react-guided-tour.git"},"description":"A modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities","maintainers":[{"name":"aladinbs","email":"aladin.bensassi@gmail.com"}],"readme":"# React Guided Tour\n\nA modern, flexible React TypeScript tour guide library with advanced highlighting and interaction capabilities. Built for React 19 with a clean, modular architecture that supports complex user onboarding flows.\n\n## Features\n\n- **Smart Element Targeting** - Flexible element selection with CSS selectors or direct element references\n- **Modern UI Design** - Beautiful, customizable popover with smooth animations\n- **Pluggable Architecture** - Extensible integration system for tabs, wizards, and navigation\n- **Responsive Positioning** - Intelligent popover placement that adapts to viewport constraints\n- **Theme Support** - Comprehensive theming with light/dark mode compatibility\n- **State Persistence** - localStorage integration to remember tour completion and progress\n- **Performance Optimized** - Framework-agnostic core with efficient React integration\n- **Action System** - Automated interactions (clicks, navigation, tab switching)\n- **Interaction Blocking** - Prevent user interactions outside the tour target for focused guidance\n- **Click-to-Advance** - Allow users to click target elements directly to advance tour steps\n- **Event System** - Rich event hooks for tour lifecycle management\n- **TypeScript First** - Full type safety with comprehensive type definitions\n\n## Quick Start\n\n### Installation\n\n```bash\nnpm install react-guided-tour\n# or\nyarn add react-guided-tour\n```\n\n### Running the Example\n\nTo see the tour library in action with a complete demo:\n\n```bash\n# Clone or navigate to the project\ncd react-guided-tour\n\n# Install dependencies for the main library\nnpm install\n\n# Build the library\nnpm run build\n\n# Navigate to the example directory\ncd example\n\n# Install example dependencies\nnpm install\n\n# Start the development server\nnpm run dev\n```\n\nThe example will be available at `http://localhost:3000` and includes:\n- Interactive tour with multiple steps\n- Tab switching demonstrations\n- Wizard navigation examples\n- Sidebar interactions\n- Modern UI showcase\n\n### Basic Usage\n\n```tsx\nimport React from 'react';\nimport { TourProvider, TourRunner, TourConfig } from 'react-guided-tour';\n\nconst tourConfig: TourConfig = {\n  id: 'welcome-tour',\n  steps: [\n    {\n      id: 'welcome',\n      title: 'Welcome!',\n      content: 'Let\\'s take a quick tour of the application.',\n      placement: 'center',\n    },\n    {\n      id: 'header',\n      title: 'Navigation',\n      content: 'This is the main navigation header.',\n      target: '[data-tour=\"header\"]',\n      placement: 'bottom',\n    },\n    {\n      id: 'sidebar',\n      title: 'Sidebar Menu',\n      content: 'Access different sections from here.',\n      target: '.sidebar',\n      placement: 'right',\n      action: {\n        type: 'click',\n        target: '.sidebar-toggle',\n      },\n    },\n  ],\n};\n\nfunction App() {\n  return (\n    <TourProvider config={tourConfig}>\n      <div className=\"app\">\n        <header data-tour=\"header\">My App</header>\n        <aside className=\"sidebar\">...</aside>\n        <main>...</main>\n        \n        {/* Tour UI */}\n        <TourRunner />\n      </div>\n    </TourProvider>\n  );\n}\n```\n\n### Starting a Tour\n\n```tsx\nimport { useTour } from 'react-guided-tour';\n\nfunction StartTourButton() {\n  const { start, state } = useTour();\n  \n  return (\n    <button onClick={start} disabled={state.isRunning}>\n      Start Tour\n    </button>\n  );\n}\n```\n\n## 📖 API Reference\n\n### TourConfig\n\nThe main configuration object for defining your tour:\n\n```tsx\ninterface TourConfig {\n  id: string;                    // Unique tour identifier\n  steps: TourStep[];            // Array of tour steps\n  theme?: TourTheme;            // Custom theme configuration\n  onStart?: () => void;         // Called when tour starts\n  onComplete?: () => void;      // Called when tour completes\n  onSkip?: () => void;          // Called when tour is skipped\n  onStepChange?: (step: TourStep, index: number) => void;\n  allowKeyboardNavigation?: boolean;  // Enable keyboard controls\n  allowClickOutside?: boolean;        // Allow clicking outside to close\n  blockInteractions?: boolean;        // Block interactions outside tour target\n  clickToAdvance?: boolean;           // Enable click-to-advance globally\n  showProgress?: boolean;             // Show step progress indicator\n  storage?: {\n    key?: string;               // localStorage key (default: 'tour-{id}')\n    remember?: boolean;         // Persist tour progress and completion state\n  };\n}\n```\n\n### TourStep\n\nIndividual step configuration:\n\n```tsx\ninterface TourStep {\n  id: string;                   // Unique step identifier\n  title: string;                // Step title\n  content?: string;             // Step description (optional if contentHtml provided)\n  contentHtml?: string;         // Rich HTML content (takes precedence over content)\n  target?: string;              // CSS selector for target element\n  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  action?: TourAction;          // Automated action to perform\n  highlight?: HighlightConfig;  // Custom highlight styling\n  popover?: PopoverConfig;      // Custom popover configuration\n  beforeStep?: () => Promise<void> | void;  // Pre-step hook\n  afterStep?: () => Promise<void> | void;   // Post-step hook\n  canSkip?: boolean;            // Allow skipping this step\n  waitForElement?: boolean;     // Wait for target element to appear\n  waitTimeout?: number;         // Timeout for element waiting (ms)\n  blockInteractions?: boolean;  // Override global interaction blocking for this step\n  clickToAdvance?: boolean;     // Override global click-to-advance for this step\n  previousButton?: PreviousButtonConfig;  // Configure previous button behavior\n}\n```\n\n### TourAction\n\nAutomated actions that can be performed during tour steps:\n\n```tsx\ninterface TourAction {\n  type: 'click' | 'navigate' | 'highlight' | 'tab-switch' | 'wizard-step' | 'custom';\n  target?: string;              // Target selector or URL\n  value?: any;                  // Action-specific value\n  handler?: () => Promise<void> | void;  // Custom action handler\n  delay?: number;               // Delay before action (ms)\n}\n```\n\n### PreviousButtonConfig\n\nConfigure the previous button behavior for individual steps:\n\n```tsx\ninterface PreviousButtonConfig {\n  show?: boolean;               // Show/hide the previous button (default: true)\n  label?: string;               // Custom button label (default: \"Previous\")\n  handler?: () => Promise<void> | void;  // Custom click handler\n}\n```\n\n### TourTheme\n\nComprehensive theming options:\n\n```tsx\ninterface TourTheme {\n  primaryColor?: string;        // Primary brand color\n  backgroundColor?: string;     // Popover background\n  textColor?: string;          // Text color\n  borderRadius?: string;       // Border radius\n  fontFamily?: string;         // Font family\n  fontSize?: string;           // Font size\n  zIndex?: number;             // Z-index for tour elements\n  overlay?: {\n    backgroundColor?: string;   // Overlay background\n    opacity?: number;          // Overlay opacity\n  };\n  highlight?: {\n    borderColor?: string;      // Highlight border color\n    borderWidth?: string;      // Highlight border width\n    glowColor?: string;        // Highlight glow color\n    animation?: string;        // Highlight animation\n  };\n  popover?: {\n    backgroundColor?: string;   // Popover background\n    borderColor?: string;      // Popover border\n    shadow?: string;           // Popover shadow\n    maxWidth?: string;         // Maximum width\n  };\n}\n```\n\n## 🎯 Advanced Usage\n\n### Custom Actions\n\nCreate custom actions for complex interactions:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: 'advanced-tour',\n  steps: [\n    {\n      id: 'custom-action',\n      title: 'Custom Action',\n      content: 'This step performs a custom action.',\n      action: {\n        type: 'custom',\n        handler: async () => {\n          // Custom logic here\n          await someAsyncOperation();\n          updateApplicationState();\n        },\n      },\n    },\n  ],\n};\n```\n\n### Tab Integration\n\nAutomatically switch between tabs:\n\n```tsx\n{\n  id: 'tab-demo',\n  title: 'Switch Tabs',\n  content: 'Watch as we switch to the Projects tab.',\n  target: '[data-tab=\"projects\"]',\n  action: {\n    type: 'tab-switch',\n    target: '[data-tab=\"projects\"]',\n  },\n}\n```\n\n### Wizard Integration\n\nNavigate through multi-step wizards:\n\n```tsx\n{\n  id: 'wizard-step',\n  title: 'Wizard Navigation',\n  content: 'Navigate to step 2 of the wizard.',\n  target: '.wizard',\n  action: {\n    type: 'wizard-step',\n    target: '.wizard',\n    value: 2, // Step index\n  },\n}\n```\n\n### Interaction Blocking\n\nControl user interactions during the tour to create focused guidance experiences:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: 'focused-tour',\n  blockInteractions: true,  // Block interactions globally\n  steps: [\n    {\n      id: 'step1',\n      title: 'Focused Step',\n      content: 'Users can only interact with the highlighted element.',\n      target: '#important-button',\n      blockInteractions: true,  // Enforce blocking for this step\n    },\n    {\n      id: 'step2', \n      title: 'Free Interaction',\n      content: 'Users can click anywhere during this step.',\n      target: '#another-element',\n      blockInteractions: false, // Override global setting for this step\n    },\n  ],\n};\n```\n\n**Features:**\n- **Global Control**: Set `blockInteractions: true` in tour config to block interactions for all steps\n- **Per-Step Override**: Use `blockInteractions` in individual steps to override the global setting\n- **Visual Feedback**: Shows a \"🔒 Interactions blocked\" indicator when active\n- **Smart Targeting**: Only the highlighted element and tour UI remain interactive\n- **Keyboard Blocking**: Prevents keyboard interactions except tour navigation keys\n\n**When to use:**\n- Complex interfaces where users might get distracted\n- Critical onboarding flows that must be completed in order\n- Preventing accidental clicks that could break the tour flow\n- Ensuring users focus on specific elements\n\n### Click-to-Advance\n\nEnable users to interact directly with tour target elements to advance to the next step:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: \"interactive-tour\",\n  clickToAdvance: true,  // Enable globally\n  steps: [\n    {\n      id: \"button-interaction\",\n      title: \"Try the Button\",\n      content: \"Click the button below to continue the tour!\",\n      target: \"#my-button\",\n      clickToAdvance: true,  // Enable for this step\n    },\n    {\n      id: \"form-interaction\", \n      title: \"Fill the Form\",\n      content: \"Complete this form field to proceed.\",\n      target: \"#email-input\",\n      clickToAdvance: false, // Disable for this step (use Next button)\n    },\n  ],\n};\n```\n\n**Features:**\n- **Global Control**: Set `clickToAdvance: true` in tour config to enable for all steps\n- **Per-Step Override**: Use `clickToAdvance` in individual steps to override the global setting\n- **Smart UI**: Next button is automatically hidden when click-to-advance is active\n- **Visual Guidance**: Shows \"👆 Click the highlighted element to continue\" instruction\n- **Event Handling**: Automatically captures clicks on target elements and advances tour\n\n**When to use:**\n- Interactive tutorials where users need to practice using actual UI elements\n- Onboarding flows for buttons, forms, and interactive components\n- Training scenarios where clicking the real element is part of the learning\n- Reducing cognitive load by eliminating the need to find the Next button\n\n**Best practices:**\n- Use for clickable elements like buttons, links, and form controls\n- Combine with `blockInteractions: true` to ensure users click the right element\n- Provide clear instructions in the step content about what to click\n- Consider accessibility - ensure target elements are keyboard accessible\n\n### Configurable Previous Button\n\nControl the previous button's visibility, label, and behavior for each step:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: \"custom-navigation-tour\",\n  steps: [\n    {\n      id: \"welcome\",\n      title: \"Welcome\",\n      content: \"Welcome to our tour!\",\n      placement: \"center\",\n      // No previous button configuration - uses defaults\n    },\n    {\n      id: \"first-step\",\n      title: \"Getting Started\",\n      content: \"This is the first step with no previous button.\",\n      target: \"#first-element\",\n      previousButton: {\n        show: false, // Hide previous button completely\n      },\n    },\n    {\n      id: \"custom-previous\",\n      title: \"Custom Previous\",\n      content: \"This step has a custom previous button.\",\n      target: \"#second-element\",\n      previousButton: {\n        label: \"Go Back\",\n        handler: async () => {\n          // Custom logic - could navigate to a different step,\n          // show a confirmation dialog, save data, etc.\n          const confirmed = confirm(\"Are you sure you want to go back?\");\n          if (confirmed) {\n            // You can access tour methods here if needed\n            console.log(\"Custom previous action executed\");\n          }\n        },\n      },\n    },\n    {\n      id: \"normal-step\",\n      title: \"Normal Step\",\n      content: \"This step uses the default previous button behavior.\",\n      target: \"#third-element\",\n      // previousButton not specified - uses default behavior\n    },\n  ],\n};\n```\n\n**Configuration Options:**\n\n- **`show: boolean`** - Control visibility of the previous button\n  - `true` (default): Show the previous button\n  - `false`: Hide the previous button completely\n\n- **`label: string`** - Customize the button text\n  - Default: \"Previous\"\n  - Examples: \"Go Back\", \"← Back\", \"Return\", etc.\n\n- **`handler: () => Promise<void> | void`** - Custom click behavior\n  - When provided, overrides the default previous step navigation\n  - Can be async for complex operations\n  - Useful for confirmations, data saving, custom navigation logic\n\n**Use Cases:**\n- **Hide on first content step**: Prevent users from going back to welcome screen\n- **Custom confirmations**: Ask users to confirm before losing progress\n- **Data validation**: Save or validate data before allowing navigation\n- **Custom navigation**: Jump to specific steps instead of sequential navigation\n- **Analytics tracking**: Log user navigation patterns\n- **Conditional logic**: Show different behavior based on user state\n\n**Default Behavior:**\n- Previous button is automatically shown on all steps except the first step\n- Clicking previous navigates to the immediately preceding step\n- Button is disabled when navigation is not possible (e.g., during step transitions)\n\n### Rich HTML Content\n\nCreate engaging tour content with HTML formatting, links, and interactive elements:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: \"html-content-tour\",\n  steps: [\n    {\n      id: \"welcome\",\n      title: \"Welcome!\",\n      contentHtml: `\n        <p>Welcome to our <strong>amazing</strong> application!</p>\n        <p>This tour will show you:</p>\n        <ul>\n          <li>🎯 <strong>Key features</strong></li>\n          <li>📚 <a href=\"https://docs.example.com\" target=\"_blank\" style=\"color: #3b82f6;\">Documentation</a></li>\n          <li>💡 <em>Pro tips</em> and best practices</li>\n        </ul>\n        <blockquote style=\"border-left: 3px solid #3b82f6; padding-left: 12px; margin: 12px 0; font-style: italic;\">\n          \"Great onboarding creates loyal users!\"\n        </blockquote>\n        <p><small>💡 Try selecting this text or clicking the link above!</small></p>\n      `,\n      placement: \"center\",\n    },\n    {\n      id: \"features\",\n      title: \"Rich Content Features\",\n      contentHtml: `\n        <div style=\"background: #f8fafc; padding: 12px; border-radius: 8px; margin: 8px 0;\">\n          <h4 style=\"margin: 0 0 8px 0; color: #1e293b;\">✨ What you can include:</h4>\n          <ul style=\"margin: 0; padding-left: 20px;\">\n            <li><strong>Bold</strong> and <em>italic</em> text</li>\n            <li><a href=\"#\" onclick=\"alert('Link clicked!')\">Interactive links</a></li>\n            <li><code style=\"background: #e2e8f0; padding: 2px 4px; border-radius: 4px;\">Code snippets</code></li>\n            <li>Lists, quotes, and custom styling</li>\n          </ul>\n        </div>\n        <p>All content is <span style=\"background: yellow; padding: 2px;\">selectable</span> and interactive!</p>\n      `,\n      target: \"#my-element\",\n    },\n  ],\n};\n```\n\n**HTML Content Features:**\n\n- **Rich Formatting**: Use HTML tags for bold, italic, lists, quotes, and more\n- **Clickable Links**: External links open in new tabs, internal links work normally\n- **Text Selection**: Users can select and copy text from tour content\n- **Interactive Elements**: Buttons, forms, and other interactive HTML elements work\n- **Custom Styling**: Apply inline styles or CSS classes for custom appearance\n- **Code Snippets**: Include formatted code examples with syntax highlighting\n- **Media Content**: Embed images, videos, or other media (ensure proper sizing)\n\n**Content Priority:**\n- If both `content` and `contentHtml` are provided, `contentHtml` takes precedence\n- Either `content` or `contentHtml` is required (at least one must be provided)\n- HTML content is rendered using `dangerouslySetInnerHTML` - ensure content is safe\n\n**Security Considerations:**\n- Only use trusted HTML content to prevent XSS attacks\n- Sanitize user-generated content before using in `contentHtml`\n- Consider using a library like DOMPurify for content sanitization in production\n\n**Best Practices:**\n- Keep HTML content concise and focused\n- Use semantic HTML elements for better accessibility\n- Test links and interactive elements thoroughly\n- Ensure content is responsive and works on different screen sizes\n- Use consistent styling that matches your application's design system\n\n### Custom Integrations\n\nExtend the tour system with custom integrations:\n\n```tsx\nimport { Integration, TourAction } from 'react-guided-tour';\n\nclass CustomIntegration implements Integration {\n  name = 'custom-integration';\n\n  canHandle(action: TourAction): boolean {\n    return action.type === 'my-custom-action';\n  }\n\n  async execute(action: TourAction, element?: HTMLElement): Promise<void> {\n    // Custom integration logic\n  }\n}\n\n// Register the integration\nconst { engine } = useTourEngine(config);\nengine.actions.registerIntegration(new CustomIntegration());\n```\n\n### State Persistence with localStorage\n\nThe tour system automatically saves completion and progress state to localStorage when enabled:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: 'my-app-tour',\n  storage: {\n    remember: true,                    // Enable localStorage persistence\n    key: 'my-custom-tour-key',        // Optional custom key\n  },\n  steps: [\n    // ... your steps\n  ],\n};\n```\n\n**What gets saved:**\n- Tour completion status (`isCompleted: true`)\n- Tour skip status (`isSkipped: true`) \n- Completion/skip timestamps\n- Current step progress\n- Completed and skipped step IDs\n\n**Checking tour state:**\n```tsx\nfunction MyComponent() {\n  const { engine, state } = useTour();\n  \n  // Check if user has completed or skipped the tour\n  const shouldShowTour = engine.shouldShowTour();\n  const isCompleted = state.isCompleted;\n  const isSkipped = state.isSkipped;\n  \n  return (\n    <div>\n      {shouldShowTour ? (\n        <button onClick={() => engine.start()}>\n          Start Tour\n        </button>\n      ) : (\n        <div>\n          {isCompleted && <span>✓ Tour Completed</span>}\n          {isSkipped && <span>Tour Skipped</span>}\n          <button onClick={() => engine.resetTourState()}>\n            Reset Tour\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n```\n\n**Resetting tour state:**\n```tsx\n// Clear localStorage and reset tour state\nengine.resetTourState();\n\n// Or manually clear just the localStorage\nengine.storage.clearState();\n```\n\n### Event Handling\n\nListen to tour events:\n\n```tsx\nfunction MyTourComponent() {\n  const { engine } = useTour();\n\n  useEffect(() => {\n    const handleStepChange = (data: { step: TourStep; index: number }) => {\n      console.log('Step changed:', data.step.id);\n      // Analytics tracking\n      analytics.track('tour_step_viewed', {\n        step_id: data.step.id,\n        step_index: data.index,\n      });\n    };\n\n    engine.on('step-change', handleStepChange);\n    \n    return () => {\n      engine.off('step-change', handleStepChange);\n    };\n  }, [engine]);\n\n  return <TourRunner />;\n}\n```\n\n### Conditional Steps\n\nShow steps based on conditions:\n\n```tsx\nconst tourConfig: TourConfig = {\n  id: 'conditional-tour',\n  steps: [\n    {\n      id: 'conditional-step',\n      title: 'Conditional Step',\n      content: 'This step only shows if condition is met.',\n      target: '.feature',\n      beforeStep: async () => {\n        const hasFeature = await checkFeatureAvailability();\n        if (!hasFeature) {\n          throw new Error('Feature not available'); // Skip step\n        }\n      },\n    },\n  ],\n};\n```\n\n## 🎨 Styling\n\n### CSS Custom Properties\n\nThe tour system uses CSS custom properties for easy theming:\n\n```css\n:root {\n  --tour-primary-color: #3b82f6;\n  --tour-background-color: #ffffff;\n  --tour-text-color: #1f2937;\n  --tour-border-radius: 12px;\n  --tour-highlight-color: #3b82f6;\n  --tour-overlay-color: rgba(0, 0, 0, 0.5);\n  --tour-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n```\n\n### Custom CSS Classes\n\nAdd custom styling with CSS classes:\n\n```css\n.tour-popover {\n  /* Custom popover styles */\n}\n\n.tour-popover[data-placement=\"top\"] {\n  /* Top placement specific styles */\n}\n\n.tour-highlight {\n  /* Custom highlight styles */\n}\n\n@keyframes custom-highlight-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.7; }\n}\n```\n\n## 🔧 Integration Examples\n\n### React Router Integration\n\n```tsx\nimport { useNavigate } from 'react-router-dom';\n\nconst tourConfig: TourConfig = {\n  steps: [\n    {\n      id: 'navigate-to-page',\n      title: 'Navigation',\n      content: 'Let\\'s go to the dashboard.',\n      action: {\n        type: 'navigate',\n        target: '/dashboard',\n      },\n    },\n  ],\n};\n```\n\n### Material-UI Integration\n\n```tsx\n// Works automatically with Material-UI components\n{\n  id: 'mui-tab',\n  title: 'Material-UI Tab',\n  content: 'Switch to the second tab.',\n  target: '.MuiTab-root[aria-selected=\"false\"]',\n  action: {\n    type: 'tab-switch',\n    target: '.MuiTab-root[aria-selected=\"false\"]',\n  },\n}\n```\n\n### Ant Design Integration\n\n```tsx\n// Works with Ant Design components\n{\n  id: 'antd-step',\n  title: 'Ant Design Stepper',\n  content: 'Navigate through the steps.',\n  target: '.ant-steps-item',\n  action: {\n    type: 'wizard-step',\n    target: '.ant-steps',\n    value: 1,\n  },\n}\n```\n\n## 📱 Responsive Design\n\nThe tour system automatically adapts to different screen sizes:\n\n- **Mobile**: Popovers adjust to smaller screens\n- **Tablet**: Optimized touch interactions\n- **Desktop**: Full feature set with keyboard navigation\n\n## ♿ Accessibility\n\nBuilt with accessibility in mind:\n\n- **Keyboard Navigation**: Arrow keys, Enter, Escape\n- **Screen Reader Support**: ARIA labels and descriptions\n- **Focus Management**: Proper focus trapping and restoration\n- **High Contrast**: Respects user color preferences\n\n## 🔍 Troubleshooting\n\n### Common Issues\n\n**Tour doesn't start:**\n- Ensure `TourProvider` wraps your app\n- Check that `TourRunner` is rendered\n- Verify tour configuration is valid\n\n**Elements not highlighting:**\n- Check CSS selectors are correct\n- Ensure target elements exist in DOM\n- Use `waitForElement: true` for dynamic content\n\n**Actions not working:**\n- Verify action type is supported\n- Check target selectors\n- Register custom integrations if needed\n\n### Debug Mode\n\nEnable debug logging:\n\n```tsx\nconst tourConfig: TourConfig = {\n  // ... other config\n  debug: true, // Enable debug logging\n};\n```\n\n## 🤝 Contributing\n\nWe welcome contributions from the community! Whether you're fixing bugs, adding new features, improving documentation, or helping with testing, your contributions are valuable.\n\n### Quick Start for Contributors\n\n1. **Fork the repository** and clone it locally\n2. **Install dependencies**: `npm install`\n3. **Build the library**: `npm run build`\n4. **Run the example**: `npm run example`\n5. **Make your changes** and test thoroughly\n6. **Submit a pull request**\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n# react-guided-tour\n","readmeFilename":"README.md"}