{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-screen",
  "type": "registry:component",
  "title": "Onboarding Screen",
  "description": "Clean onboarding screen guiding users through setup with visual steps.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/onboarding-screen.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion } from 'motion/react';\nimport { ChevronLeft, Info, ImagePlus } from 'lucide-react';\nimport { HiBadgeCheck } from 'react-icons/hi';\n\ninterface OnboardingProps {\n  title?: string;\n  subtitle?: string;\n  businessNameLabel?: string;\n  businessNamePlaceholder?: string;\n  legalNameLabel?: string;\n  legalNamePlaceholder?: string;\n  nextButtonText?: string;\n  finishButtonText?: string;\n  tooltipMainText?: string;\n  tooltipSubText?: string;\n  rightSectionDescription?: string;\n  onComplete?: (data: any) => void;\n}\n\nexport const OnboardingScreen: React.FC<OnboardingProps> = ({\n  title = 'Business Details',\n  subtitle = 'Tell us about your brand to start creating campaigns.',\n  businessNameLabel = 'Business name',\n  businessNamePlaceholder = 'Enter your name',\n  legalNameLabel = 'Business Legal name',\n  legalNamePlaceholder = 'Enter your business legal name',\n  nextButtonText = 'Create business account',\n  finishButtonText = 'Finish Setup',\n  tooltipMainText = 'Click here to add your profile image.',\n  tooltipSubText = 'You can always do this later.',\n  rightSectionDescription = \"With your creator profile ready, it's time to set up your business account.\",\n  onComplete,\n}) => {\n  const [businessName, setBusinessName] = useState('Acme Inc');\n  const [legalName, setLegalName] = useState('');\n  const [currentStep, setCurrentStep] = useState(1);\n\n  const totalSteps = 3;\n  const spring = { type: 'spring', stiffness: 300, damping: 30 } as const;\n  const progressSpring = {\n    type: 'spring',\n    stiffness: 100,\n    damping: 20,\n  } as const;\n\n  const handleNext = () => {\n    if (currentStep < totalSteps) setCurrentStep((prev) => prev + 1);\n    else onComplete?.({ businessName, legalName });\n  };\n\n  const handleBack = () => {\n    if (currentStep > 1) setCurrentStep((prev) => prev - 1);\n  };\n\n  return (\n    <div className=\"flex min-h-full w-full flex-col items-center justify-center bg-transparent transition-colors duration-500\">\n      <motion.div\n        initial={{ opacity: 0, scale: 0.95 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={spring}\n        className=\"flex w-full max-w-sm flex-col overflow-hidden rounded-[32px] border bg-white p-2 shadow-xl transition-colors duration-500 md:h-150 md:max-w-5xl md:flex-row dark:bg-[#0A0A0A]\"\n      >\n        {/* Left Section */}\n        <div className=\"flex flex-[1.2] flex-col justify-center rounded-[26px] border border-black/5 bg-[#FAFAFA] px-8 py-10 transition-colors duration-500 md:rounded-l-[26px] md:rounded-r-none md:border-r-0 md:px-16 dark:border-white/10 dark:bg-[#131313]\">\n          <div className=\"mx-auto w-full max-w-sm\">\n            <div className=\"mb-8 flex justify-center md:justify-start\">\n              <div className=\"rounded-xl bg-black/5 p-2 dark:bg-white/5\">\n                <svg\n                  width=\"28\"\n                  height=\"28\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  className=\"text-black dark:text-white\"\n                >\n                  <path\n                    d=\"M7 8H5C3.34315 8 2 9.34315 2 11V13C2 14.6569 3.34315 16 5 16H7M17 8H19C20.6569 8 22 9.34315 22 11V13C22 14.6569 20.6569 16 19 16H17M8 12H16\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2.5\"\n                    strokeLinecap=\"round\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            <h1 className=\"mb-2 text-2xl font-semibold tracking-tight text-[#1A1A1A] transition-colors dark:text-[#d8d8d8]\">\n              {title}\n            </h1>\n            <p className=\"mb-8 text-sm text-gray-500 transition-colors dark:text-gray-400\">\n              {subtitle}\n            </p>\n\n            {/* Stepper */}\n            <div className=\"mb-10 flex gap-2\">\n              {[1, 2, 3].map((i) => (\n                <div\n                  key={i}\n                  className=\"relative h-1 flex-1 overflow-hidden rounded-full bg-black/5 dark:bg-white/10\"\n                >\n                  <motion.div\n                    animate={{ width: i <= currentStep ? '100%' : '0%' }}\n                    transition={progressSpring}\n                    className=\"absolute top-0 left-0 h-full bg-emerald-400\"\n                  />\n                </div>\n              ))}\n            </div>\n\n            <div className=\"mb-10 space-y-6 text-left\">\n              <div className=\"space-y-2\">\n                <label className=\"flex items-center gap-2 text-xs font-semibold tracking-wider whitespace-nowrap text-[#808080] uppercase transition-colors dark:text-[#6C6C6C]\">\n                  {businessNameLabel} <Info size={14} className=\"opacity-50\" />\n                </label>\n                <input\n                  placeholder={businessNamePlaceholder}\n                  value={businessName}\n                  onChange={(e) => setBusinessName(e.target.value)}\n                  className=\"w-full rounded-2xl border-[1.5px] border-black/20 bg-white px-5 py-3.5 text-sm text-black transition-all outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-[#1D1D1D] dark:bg-[#121212] dark:text-white\"\n                />\n              </div>\n\n              <div className=\"space-y-2\">\n                <label className=\"flex items-center gap-2 text-xs font-semibold tracking-wider whitespace-nowrap text-[#808080] uppercase transition-colors dark:text-[#6C6C6C]\">\n                  {legalNameLabel} <Info size={14} className=\"opacity-50\" />\n                </label>\n                <input\n                  placeholder={legalNamePlaceholder}\n                  value={legalName}\n                  onChange={(e) => setLegalName(e.target.value)}\n                  className=\"w-full rounded-2xl border-[1.5px] border-black/20 bg-white px-5 py-3.5 text-sm text-black transition-all outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-[#1D1D1D] dark:bg-[#121212] dark:text-white\"\n                />\n              </div>\n            </div>\n\n            <div className=\"flex flex-nowrap items-center gap-2 md:gap-4\">\n              <motion.button\n                onClick={handleBack}\n                whileTap={{ scale: 0.95 }}\n                className=\"shrink-0 rounded-2xl border border-black/10 bg-white p-4 text-[#666666] transition-colors dark:border-[#282828] dark:bg-[#121212] dark:text-[#999999]\"\n              >\n                <ChevronLeft size={20} />\n              </motion.button>\n              <motion.button\n                onClick={handleNext}\n                whileTap={{ scale: 0.98 }}\n                className=\"flex min-w-fit flex-1 items-center justify-center rounded-2xl bg-[#1A1A1A] px-8 py-4 text-sm font-bold whitespace-nowrap text-white shadow-xl transition-colors dark:bg-[#EDEDED] dark:text-[#101010]\"\n              >\n                {currentStep === totalSteps ? finishButtonText : nextButtonText}\n              </motion.button>\n            </div>\n          </div>\n        </div>\n\n        {/* Right Section */}\n        <div className=\"relative hidden flex-1 flex-col items-center justify-center rounded-[26px] border border-black/5 bg-[#F4F4F4] p-12 transition-colors duration-500 md:flex md:rounded-l-none md:rounded-r-[26px] md:border-l-0 dark:border-white/5 dark:bg-[#1C1C1C]\">\n          <motion.div\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            className=\"z-10 -mb-5 rounded-2xl border border-[#E5E5E5] bg-white px-4 py-2 text-center text-xs font-medium whitespace-nowrap text-black shadow-lg transition-colors dark:border-[#2D2D2D] dark:bg-[#2B292E] dark:text-white\"\n          >\n            <p>{tooltipMainText}</p>\n            <p className=\"text-[10px] font-normal whitespace-nowrap opacity-60\">\n              {tooltipSubText}\n            </p>\n          </motion.div>\n\n          <motion.div\n            layout\n            className=\"relative my-8 flex aspect-square w-full max-w-72 flex-col items-center justify-center rounded-[32px] border-2 border-[#E5E5E5] bg-white p-8 shadow-sm transition-all dark:border-[#303030] dark:bg-zinc-900/50\"\n          >\n            <div className=\"mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-400 shadow-inner dark:bg-zinc-800\">\n              <ImagePlus size={24} strokeWidth={1.5} />\n            </div>\n\n            <div className=\"mb-6 flex items-center gap-2 whitespace-nowrap\">\n              <span className=\"text-sm font-bold text-[#1A1A1A] transition-colors dark:text-white\">\n                {businessName || 'Your Brand'}\n              </span>\n              <HiBadgeCheck size={18} className=\"shrink-0 text-orange-400\" />\n            </div>\n\n            <div className=\"w-full space-y-2 opacity-20\">\n              <div className=\"h-1.5 w-full rounded-full bg-black dark:bg-white\" />\n              <div className=\"mx-auto h-1.5 w-2/3 rounded-full bg-black dark:bg-white\" />\n            </div>\n          </motion.div>\n\n          <p className=\"max-w-64 text-center text-xs leading-relaxed text-gray-500 transition-colors dark:text-gray-400\">\n            {rightSectionDescription}\n          </p>\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}