Tour

import { Tour, TourProvider, useTour } from 'fxui-core';

// Wrap your app
<TourProvider>
  <App />
</TourProvider>

// Inside any child:
function Navbar() {
  const { start } = useTour();
  return <Button onClick={start}>Take a Tour</Button>;
}

// Render Tour once at layout level:
const steps = [
  { target: '#sidebar', title: 'Navigation', content: 'Browse all components here.', placement: 'right' },
  { target: '#preview', title: 'Live Preview', content: 'See the component in action.', placement: 'bottom' },
  { title: 'Done!', content: 'You\'re all set.' },  // no target = centered
];

<Tour steps={steps} showProgress showSkip />

const [open, setOpen] = React.useState(false);

<Tour
  steps={steps}
  open={open}
  onOpenChange={setOpen}
  onComplete={() => markTourSeen()}
/>

interface TourStep {
  target?: string;        // CSS selector — omit for centered modal
  title: string;
  content: React.ReactNode;
  placement?: 'top' | 'bottom' | 'left' | 'right';
}

const { start, stop, isOpen } = useTour();