{"_id":"@allem-ui/onboarding","name":"@allem-ui/onboarding","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@allem-ui/onboarding","version":"0.0.2","description":"Onboarding wizard and spotlight tour components for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/onboarding"},"keywords":["allem-ui","onboarding","wizard","tour","spotlight","product-tour","react","components"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/onboarding@0.0.2","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-SahtmwIsREp+D8Y+FU1P0NYgGiRst76q/hIgiybHAIRRjksaRfcPE0jxMUFjOUpoTu8NSSbzNBq3jJWtqJ95IA==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/d0caf044008f59fd49acded5e9b9e22c/allem-ui-onboarding-0.0.2.tgz","_from":"file:allem-ui-onboarding-0.0.2.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-SahtmwIsREp+D8Y+FU1P0NYgGiRst76q/hIgiybHAIRRjksaRfcPE0jxMUFjOUpoTu8NSSbzNBq3jJWtqJ95IA==","shasum":"8126661abd1f85c069fee3ad35821fc59709f4da","tarball":"https://registry.npmjs.org/@allem-ui/onboarding/-/onboarding-0.0.2.tgz","fileCount":8,"unpackedSize":73639,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA7Vvgs7SOXaNUsE2+IDWeIU9TJE0ugQN9Z/Dpt/2fGaAiEAywZmnBfkRYUDiTT5jIBg7h+GnZOTG+z9f7Fo8QXTEZc="}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/onboarding_0.0.2_1779581028442_0.955413007031535"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-24T00:03:48.247Z","0.0.2":"2026-05-24T00:03:48.609Z","modified":"2026-05-24T00:03:48.851Z"},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"description":"Onboarding wizard and spotlight tour components for Allem UI","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","onboarding","wizard","tour","spotlight","product-tour","react","components"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/onboarding"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"license":"MIT","readme":"# @allem-ui/onboarding\n\nOnboarding wizard and spotlight product tour components for [Allem UI](https://github.com/kingofmit/allem-ui) — step-by-step wizards with progress indicators and guided tours that highlight DOM elements.\n\n## Install\n\n```bash\nnpm install @allem-ui/onboarding @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/onboarding\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Onboarding Wizard\n\nMulti-step wizard with slide transitions and progress indicators.\n\n```tsx\nimport {\n  OnboardingWizard,\n  OnboardingStep,\n  useOnboarding,\n} from \"@allem-ui/onboarding\";\n\nfunction App() {\n  const onboarding = useOnboarding({\n    totalSteps: 3,\n    onComplete: () => console.log(\"Done!\"),\n  });\n\n  if (onboarding.isComplete) return <Dashboard />;\n\n  return (\n    <OnboardingWizard\n      {...onboarding}\n      progressVariant=\"dots\" // \"dots\" | \"bar\" | \"numbers\"\n    >\n      <OnboardingStep\n        title=\"Welcome\"\n        description=\"Let's get you set up in just a few steps.\"\n        icon={<WaveIcon />}\n      >\n        <img src=\"/onboarding-1.png\" alt=\"Welcome\" />\n      </OnboardingStep>\n\n      <OnboardingStep\n        title=\"Connect your account\"\n        description=\"Link your existing services.\"\n        icon={<LinkIcon />}\n      >\n        <AccountForm />\n      </OnboardingStep>\n\n      <OnboardingStep\n        title=\"You're all set!\"\n        description=\"Start exploring your dashboard.\"\n        icon={<CheckIcon />}\n      >\n        <p>Everything is ready to go.</p>\n      </OnboardingStep>\n    </OnboardingWizard>\n  );\n}\n```\n\n## Spotlight Tour\n\nGuided tour that highlights DOM elements with a spotlight overlay.\n\n```tsx\nimport { SpotlightTour, useTour } from \"@allem-ui/onboarding\";\n\nfunction App() {\n  const tour = useTour({\n    steps: [\n      {\n        target: \"#sidebar-nav\",\n        title: \"Navigation\",\n        content: \"Use the sidebar to navigate between sections.\",\n        placement: \"right\",\n      },\n      {\n        target: \"#search-bar\",\n        title: \"Search\",\n        content: \"Find anything with the search bar.\",\n        placement: \"bottom\",\n      },\n      {\n        target: \"#profile-menu\",\n        title: \"Your Profile\",\n        content: \"Manage your account settings here.\",\n        placement: \"left\",\n      },\n    ],\n    onComplete: () => console.log(\"Tour finished\"),\n  });\n\n  return (\n    <>\n      <button onClick={tour.start}>Start Tour</button>\n      <SpotlightTour {...tour} />\n    </>\n  );\n}\n```\n\n## Components\n\n### OnboardingWizard\n\nMulti-step container with slide transitions and navigation controls.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `currentStep` | `number` | — | Current step index |\n| `totalSteps` | `number` | — | Total number of steps |\n| `onNext` | `() => void` | — | Next step callback |\n| `onPrev` | `() => void` | — | Previous step callback |\n| `onSkip` | `() => void` | — | Skip callback |\n| `isFirst` | `boolean` | — | Whether on first step |\n| `isLast` | `boolean` | — | Whether on last step |\n| `progressVariant` | `\"dots\" \\| \"bar\" \\| \"numbers\"` | `\"dots\"` | Progress indicator style |\n| `nextLabel` | `string` | `\"Next\"` | Next button label |\n| `finishLabel` | `string` | `\"Get Started\"` | Finish button label |\n\n### OnboardingStep\n\nIndividual step content with optional icon, title, and description.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `title` | `string` | — | Step title |\n| `description` | `string` | — | Step description |\n| `icon` | `ReactNode` | — | Step icon |\n\n### OnboardingProgress\n\nStandalone progress indicator (also used internally by OnboardingWizard).\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `currentStep` | `number` | — | Current step index |\n| `totalSteps` | `number` | — | Total steps |\n| `variant` | `\"dots\" \\| \"bar\" \\| \"numbers\"` | `\"dots\"` | Visual style |\n\n### SpotlightTour\n\nOverlay that highlights target elements with a spotlight cutout and positioned tooltip.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `isActive` | `boolean` | — | Whether the tour is active |\n| `step` | `TourStep` | — | Current step configuration |\n| `targetRect` | `TargetRect` | — | Target element position |\n| `currentStep` | `number` | — | Current step index |\n| `totalSteps` | `number` | — | Total steps |\n| `onNext` | `() => void` | — | Next step callback |\n| `onPrev` | `() => void` | — | Previous step callback |\n| `onSkip` | `() => void` | — | Skip/dismiss callback |\n| `padding` | `number` | `8` | Spotlight padding around target |\n\n### useOnboarding\n\nHook for wizard state management.\n\n```tsx\nconst {\n  currentStep, totalSteps, isFirst, isLast, isComplete,\n  next, prev, goTo, skip, reset,\n} = useOnboarding({ totalSteps: 5, onComplete, onSkip });\n```\n\n### useTour\n\nHook for spotlight tour state with element tracking.\n\n```tsx\nconst {\n  isActive, currentStep, totalSteps, step, targetRect,\n  isFirst, isLast, start, stop, next, prev, skip,\n} = useTour({ steps, onComplete, onSkip });\n```\n\n## Features\n\n- Animated slide transitions between wizard steps\n- 3 progress indicator styles (dots, bar, numbers)\n- Spotlight overlay with box-shadow cutout\n- Auto-positioned tooltips (top, bottom, left, right)\n- Smooth scroll to target elements\n- ResizeObserver tracking for layout changes\n- Keyboard navigation (← → Esc for tours)\n- Skip and back controls\n- Dark mode support\n- Zero dependencies\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-eac59352acfedab5dacfe8d6058e253f"}