(null);\n const [run, setRun] = useState(false);\n\n const steps = [\n {\n target: buttonRef,\n content: This button does something special!
,\n },\n ];\n\n return (\n <>\n \n \n \n );\n}\n```\n\n### Customization\n\n```tsx\n\n```\n\n### Advanced: Step Configuration\n\n```tsx\nconst steps = [\n {\n target: \"#element-1\",\n content: Step 1
,\n placement: \"auto\", // Auto-detect best position\n disableSpotlight: false,\n disableScroll: false,\n offset: {\n top: 10,\n left: 20,\n },\n },\n {\n target: \"#element-2\",\n content: Step 2
,\n placement: \"center\", // Center in viewport\n disableSpotlight: true, // No highlight\n },\n];\n```\n\n### Callback Handling\n\n```tsx\n {\n switch (data.type) {\n case \"tour:start\":\n console.log(\"Tour started\");\n break;\n case \"tour:end\":\n console.log(`Tour ${data.status}`);\n break;\n case \"step:after\":\n console.log(`Moved to step ${data.index}`);\n break;\n case \"target:notfound\":\n console.warn(`Target not found for step ${data.index}`);\n break;\n }\n }}\n/>\n```\n\n## 🎨 Styling\n\n### Using Default Styles\n\n```tsx\nimport \"@tour-guide/react/styles\";\n```\n\n### Custom Styling\n\nThe component uses semantic class names that you can override:\n\n- `.tour-overlay` - Overlay backdrop\n- `.tour-tooltip` - Tooltip container\n- `.tour-progress` - Progress indicator\n- `.tour-content` - Step content\n- `.tour-actions` - Action buttons container\n- `.tour-button-primary` - Primary button (Next/Finish)\n- `.tour-button-back` - Back button\n- `.tour-button-skip` - Skip button\n\n```css\n.tour-tooltip {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border-radius: 12px;\n}\n\n.tour-button-primary {\n background: white;\n color: #667eea;\n}\n```\n\n## 📖 API Reference\n\n### `Tour` Component Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `steps` | `TourStep[]` | **required** | Array of tour steps |\n| `run` | `boolean` | `false` | Whether the tour is running |\n| `stepIndex` | `number` | `0` | Initial step index |\n| `continuous` | `boolean` | `true` | Auto-proceed to next step |\n| `showProgress` | `boolean` | `true` | Show progress indicator |\n| `showSkipButton` | `boolean` | `true` | Show skip button |\n| `showBackButton` | `boolean` | `true` | Show back button |\n| `callback` | `(data: TourCallbackProps) => void` | - | Callback for tour events |\n| `primaryColor` | `string` | `\"#0F6CBD\"` | Primary color for buttons/highlights |\n| `zIndex` | `number` | `10000` | Z-index for overlay and tooltip |\n| `overlayOpacity` | `number` | `0.5` | Overlay opacity (0-1) |\n| `disableOverlayClose` | `boolean` | `false` | Disable closing on overlay click |\n| `className` | `object` | - | Custom class names |\n| `labels` | `object` | - | Custom button labels |\n| `keyboardNavigation` | `boolean` | `true` | Enable keyboard navigation |\n| `scrollPadding` | `number` | `20` | Scroll padding when scrolling to target |\n| `disableBodyScroll` | `boolean` | `false` | Disable body scroll when tour is active |\n| `spotlightPadding` | `number` | `8` | Spotlight padding around element |\n| `spotlightBorderRadius` | `number` | `8` | Spotlight border radius |\n\n### `TourStep` Interface\n\n| Property | Type | Default | Description |\n|----------|------|---------|-------------|\n| `target` | `string \\| RefObject` | **required** | CSS selector or React ref |\n| `content` | `ReactNode` | **required** | Step content |\n| `placement` | `Placement` | `\"bottom\"` | Tooltip placement |\n| `disableSpotlight` | `boolean` | `false` | Disable spotlight for this step |\n| `disableScroll` | `boolean` | `false` | Disable scrolling to target |\n| `offset` | `{ top?: number; left?: number }` | - | Custom tooltip offset |\n| `data` | `Record` | - | Custom data attributes |\n\n### `Placement` Type\n\n```tsx\ntype Placement = \"top\" | \"bottom\" | \"left\" | \"right\" | \"center\" | \"auto\";\n```\n\n### `TourCallbackProps` Interface\n\n```tsx\ninterface TourCallbackProps {\n status: \"idle\" | \"running\" | \"paused\" | \"finished\" | \"skipped\";\n type: \"tour:start\" | \"tour:end\" | \"step:before\" | \"step:after\" | \"target:notfound\";\n index?: number;\n step?: TourStep;\n}\n```\n\n## 🎯 Comparison with react-joyride\n\n| Feature | @bilalmohib7896/react-tour-guide | react-joyride |\n|---------|------------------|---------------|\n| Modern Dependencies | ✅ Yes | ❌ Requires --legacy-peer-deps |\n| TypeScript Support | ✅ Full | ⚠️ Partial |\n| React 18+ Support | ✅ Yes | ⚠️ Issues |\n| Bundle Size | ✅ Smaller | ⚠️ Larger |\n| Accessibility | ✅ Built-in | ⚠️ Limited |\n| Customization | ✅ Extensive | ⚠️ Moderate |\n| Performance | ✅ Optimized | ⚠️ Can be slow |\n| Maintenance | ✅ Active | ⚠️ Slower updates |\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📝 License\n\nMIT © bilalmohib\n\n## 🙏 Acknowledgments\n\nBuilt with ❤️ for the React community. Inspired by the need for a modern, dependency-free tour library.\n","readmeFilename":"README.md"}