{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding",
  "type": "registry:ui",
  "title": "Onboarding Dialog",
  "description": "A responsive multi-step onboarding dialog with progress indicators - drawer on mobile, modal on desktop.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/onboarding/onboarding.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport Image from \"next/image\";\n\nimport { ArrowRightIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogClose,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\nimport { cn } from \"@/lib/utils\";\n\nexport default function OnboardingDialog() {\n  const [step, setStep] = useState(1);\n\n  const stepContent = [\n    {\n      title: \"Welcome to Revola\",\n      description:\n        \"A modern React component library built with Radix UI and Tailwind CSS, designed for building beautiful and accessible user interfaces.\",\n    },\n    {\n      title: \"Built for Developers\",\n      description:\n        \"Revola provides a comprehensive set of pre-built components that are fully accessible, customizable, and ready for production use.\",\n    },\n    {\n      title: \"Modern & Accessible\",\n      description:\n        \"Every component follows modern web standards with built-in accessibility features, keyboard navigation, and screen reader support.\",\n    },\n    {\n      title: \"Start Building Today\",\n      description:\n        \"Jumpstart your next project with Revola's component library. Check out our documentation and examples to get started quickly.\",\n    },\n  ];\n\n  const totalSteps = stepContent.length;\n\n  const handleContinue = () => {\n    if (step < totalSteps) {\n      setStep(step + 1);\n    }\n  };\n\n  return (\n    <ResponsiveDialog\n      onOpenChange={(open) => {\n        if (open) setStep(1);\n      }}\n    >\n      <ResponsiveDialogTrigger asChild>\n        <Button variant=\"outline\" className=\"h-12 rounded-full px-6 capitalize\">\n          Onboarding\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent\n        closeButtonClassName=\"text-black bg-yellow-500/5\"\n        className=\"flex flex-col max-sm:max-h-[85%] sm:max-w-[400px]\"\n      >\n        <div className=\"p-2\">\n          <Image\n            width={382}\n            height={216}\n            alt=\"dialog\"\n            src=\"/extended-gradient.png\"\n            className=\"w-full rounded-md object-cover\"\n          />\n        </div>\n        <div className=\"space-y-6 p-6 pt-3\">\n          <ResponsiveDialogHeader>\n            <ResponsiveDialogTitle>{stepContent[step - 1].title}</ResponsiveDialogTitle>\n            <ResponsiveDialogDescription>{stepContent[step - 1].description}</ResponsiveDialogDescription>\n          </ResponsiveDialogHeader>\n\n          <div className=\"flex flex-col justify-between gap-4 sm:flex-row sm:items-center\">\n            <div className=\"flex justify-center space-x-1.5 max-sm:order-1\">\n              {[...Array(totalSteps)].map((_, index) => (\n                <div\n                  key={index}\n                  className={cn(\"size-1.5 rounded-full\", index + 1 === step ? \"bg-primary\" : \"bg-primary/20\")}\n                />\n              ))}\n            </div>\n            <ResponsiveDialogFooter>\n              <ResponsiveDialogClose asChild>\n                <Button type=\"button\" variant=\"ghost\">\n                  Skip\n                </Button>\n              </ResponsiveDialogClose>\n\n              {step < totalSteps ? (\n                <Button className=\"group\" type=\"button\" onClick={handleContinue}>\n                  Next\n                  <ArrowRightIcon\n                    className=\"-me-1 opacity-60 transition-transform group-hover:translate-x-0.5\"\n                    size={16}\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              ) : (\n                <ResponsiveDialogClose asChild>\n                  <Button type=\"button\">Okay</Button>\n                </ResponsiveDialogClose>\n              )}\n            </ResponsiveDialogFooter>\n          </div>\n        </div>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}