import { OnboardingProvider, OnboardingSidebar } from '@acme/onboarding-guide';

const steps = [
  {
    id: 'welcome',
    title: 'Welcome',
    description: 'Get started with our app',
    component: <WelcomeStep />,
  },
  {
    id: 'profile',
    title: 'Complete Profile',
    description: 'Set up your profile',
    component: <ProfileStep />,
  },
  {
    id: 'preferences',
    title: 'Preferences',
    description: 'Configure your preferences',
    component: <PreferencesStep />,
  },
];

function App() {
  return (
    <OnboardingProvider steps={steps}>
      <div className="flex h-screen">
        <OnboardingSidebar />
        <main className="flex-1 p-8">
          {/* Your app content */}
        </main>
      </div>
    </OnboardingProvider>
  );
}

import { ThemeProvider } from '@acme/onboarding-guide';

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <OnboardingProvider steps={steps}>
        {/* Your app */}
      </OnboardingProvider>
    </ThemeProvider>
  );
}

import { useOnboarding } from '@acme/onboarding-guide';

function MyComponent() {
  const {
    currentStep,
    goToNextStep,
    goToPreviousStep,
    goToStep,
    skipOnboarding,
    completeOnboarding,
    isFirstStep,
    isLastStep,
    isCompleted,
    isSkipped,
  } = useOnboarding();

  return (
    <div>
      <h1>Current Step: {currentStep + 1}</h1>
      <button onClick={goToPreviousStep} disabled={isFirstStep}>
        Previous
      </button>
      <button onClick={goToNextStep}>
        {isLastStep ? 'Finish' : 'Next'}
      </button>
      <button onClick={skipOnboarding}>
        Skip
      </button>
    </div>
  );
}