{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-setup",
  "type": "registry:component",
  "title": "Onboarding Setup",
  "description": "Onboarding setup card guiding users through initial configuration steps.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/onboarding-setup.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { CheckCircle2, ChevronDown, Check } from 'lucide-react';\n\ntype FocusOption = {\n  id: string;\n  label: string;\n};\n\ninterface OnboardingSetupProps {\n  title: string;\n  subtitle: string;\n  focusOptions: FocusOption[];\n  selectedFocus: string;\n  onFocusChange: (id: string) => void;\n  revenue: string;\n  onRevenueChange: (value: string) => void;\n  role: string;\n  onRoleChange: (value: string) => void;\n  step: number;\n  totalSteps: number;\n  onContinue: () => void;\n  imageUrl: string;\n}\n\nconst spring = {\n  type: 'spring',\n  stiffness: 320,\n  damping: 30,\n  mass: 0.7,\n} as const;\n\nexport const OnboardingSetup: React.FC<OnboardingSetupProps> = ({\n  title,\n  subtitle,\n  focusOptions,\n  selectedFocus,\n  onFocusChange,\n  revenue,\n  onRevenueChange,\n  role,\n  onRoleChange,\n  step,\n  totalSteps,\n  onContinue,\n  imageUrl,\n}) => {\n  const [isRevenueOpen, setIsRevenueOpen] = useState(false);\n  const revenueRef = useRef<HTMLDivElement>(null);\n\n  const revenueOptions = ['$100k – $200k', '$200k – $500k', '$500k+'];\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        revenueRef.current &&\n        !revenueRef.current.contains(event.target as Node)\n      ) {\n        setIsRevenueOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  return (\n    <div\n      className={`relative flex w-full flex-col items-center justify-center bg-transparent py-0 transition-all duration-500`}\n    >\n      <motion.div\n        initial={{ opacity: 0, scale: 0.96 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={spring}\n        className=\"relative z-10 grid w-full max-w-5xl grid-cols-1 rounded-[24px] border-2 border-[#EFEDF5] bg-[#F5F5F7] shadow-xl lg:grid-cols-[1.2fr_0.8fr] dark:border-[#1a1a1a] dark:bg-[#0A0A0A]\"\n      >\n        {/* LEFT CONTENT */}\n        <div className=\"inter order-2 flex flex-col lg:order-1\">\n          <div className=\"m-1.5 flex h-full flex-col rounded-[18px] bg-white p-5 shadow-sm sm:p-8 dark:bg-[#111]\">\n            <h1 className=\"text-[22px] font-medium text-[#111] sm:text-[24px] dark:text-[#EEE]\">\n              {title}\n            </h1>\n            <p className=\"mt-1 text-[12px] text-[#99999B] dark:text-[#666]\">\n              {subtitle}\n            </p>\n\n            <div className=\"my-5 border-t-[1.6px] border-dashed border-gray-200 dark:border-[#222]\" />\n\n            {/* Focus Options */}\n            <div className=\"grow\">\n              <p className=\"mb-4 text-[13px] font-normal tracking-tight text-[#8F8E92]\">\n                Your main focus\n              </p>\n\n              <div className=\"flex flex-wrap gap-2\">\n                {focusOptions.map((option) => {\n                  const active = option.id === selectedFocus;\n                  return (\n                    <motion.button\n                      key={option.id}\n                      whileTap={{ scale: 0.97 }}\n                      onClick={() => onFocusChange(option.id)}\n                      className={`relative flex grow items-center justify-center gap-2 rounded-xl border-[1.5px] px-4 py-2.5 text-[12px] font-medium transition-all duration-200 sm:grow-0 sm:justify-start ${\n                        active\n                          ? 'border-[#F87742]/40 bg-[#FFF0E9] text-[#F87742] dark:border-[#F87742]/50 dark:bg-[#2A1A14]'\n                          : 'border-[#E5E7EB] bg-white text-[#4B5563] hover:border-[#D1D5DB] dark:border-[#222] dark:bg-[#111] dark:text-[#999] dark:hover:border-[#333]'\n                      } `}\n                    >\n                      {active && (\n                        <CheckCircle2\n                          size={18}\n                          fill=\"#FA692E\"\n                          className=\"text-white dark:text-[#2A1A14]\"\n                        />\n                      )}\n                      {option.label}\n                    </motion.button>\n                  );\n                })}\n              </div>\n            </div>\n\n            {/* Revenue & Role Row */}\n            <div className=\"mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2\">\n              <div>\n                <label className=\"text-[13px] font-normal text-[#979799]\">\n                  Monthly revenue\n                </label>\n                <div className=\"relative mt-2\" ref={revenueRef}>\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsRevenueOpen(!isRevenueOpen)}\n                    className=\"relative h-10 w-full rounded-full border border-[#EEEDF3] bg-white pr-12 pl-6 text-left text-[13px] whitespace-nowrap text-[#111] transition-all outline-none focus:ring-1 focus:ring-[#d6d5db] dark:border-[#222] dark:bg-[#111] dark:text-[#999] dark:focus:ring-[#333]\"\n                  >\n                    <span className=\"block truncate\">\n                      {revenue || 'Select revenue'}\n                    </span>\n                    <motion.div\n                      animate={{ rotate: isRevenueOpen ? 180 : 0 }}\n                      transition={{ duration: 0.2 }}\n                      className=\"absolute top-1/2 right-5 flex -translate-y-1/2 items-center\"\n                    >\n                      <ChevronDown size={14} className=\"text-[#979799]\" />\n                    </motion.div>\n                  </button>\n\n                  <AnimatePresence>\n                    {isRevenueOpen && (\n                      <motion.div\n                        initial={{ opacity: 0, y: -10, scale: 0.95 }}\n                        animate={{ opacity: 1, y: 0, scale: 1 }}\n                        exit={{ opacity: 0, y: -10, scale: 0.95 }}\n                        transition={{ duration: 0.15, ease: 'easeOut' }}\n                        className=\"absolute z-[100] mt-1.5 w-full overflow-hidden rounded-xl border border-[#EEEDF3] bg-white py-1 shadow-2xl dark:border-[#222] dark:bg-[#111]\"\n                      >\n                        {revenueOptions.map((option) => (\n                          <button\n                            key={option}\n                            type=\"button\"\n                            onClick={() => {\n                              onRevenueChange(option);\n                              setIsRevenueOpen(false);\n                            }}\n                            className=\"group flex w-full items-center justify-between px-4 py-2.5 text-left text-[13px] transition-colors hover:bg-[#F5F5F7] dark:hover:bg-[#1a1a1a]\"\n                          >\n                            <span\n                              className={\n                                revenue === option\n                                  ? 'font-medium text-[#111] dark:text-[#EEE]'\n                                  : 'text-[#666] dark:text-[#999]'\n                              }\n                            >\n                              {option}\n                            </span>\n                            {revenue === option && (\n                              <Check\n                                size={14}\n                                className=\"text-[#111] dark:text-[#EEE]\"\n                              />\n                            )}\n                          </button>\n                        ))}\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </div>\n              </div>\n\n              <div>\n                <label className=\"text-[13px] font-normal text-[#979799]\">\n                  Your role\n                </label>\n                <input\n                  value={role}\n                  onChange={(e) => onRoleChange(e.target.value)}\n                  placeholder=\"e.g. Sales Manager\"\n                  className=\"mt-2 h-10 w-full rounded-full border border-[#EEEDF3] bg-white px-6 text-left text-[13px] text-[#111] transition-all outline-none placeholder:text-[#A2A2A4] focus:ring-1 focus:ring-[#d6d5db] dark:border-[#222] dark:bg-[#111] dark:text-[#EEE] dark:placeholder:text-[#444] dark:focus:ring-[#333]\"\n                />\n              </div>\n            </div>\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-auto flex flex-wrap items-center justify-between gap-4 p-5 pt-2 sm:px-8 sm:pb-8\">\n            <div className=\"flex items-center gap-2 text-[11px] font-medium text-[#8B8B8D]\">\n              <span className=\"whitespace-nowrap\">\n                STEP {step} / {totalSteps}\n              </span>\n              <div className=\"ml-2 flex gap-1\">\n                {Array.from({ length: 5 }).map((_, i) => (\n                  <span\n                    key={i}\n                    className={`h-4 w-1 rounded-full transition-colors ${i < Math.ceil((step / totalSteps) * 5) ? 'bg-[#ff6a32]' : 'bg-[#E5E5ED] dark:bg-[#222]'}`}\n                  />\n                ))}\n              </div>\n            </div>\n\n            <motion.button\n              whileHover={{ scale: 1.04 }}\n              whileTap={{ scale: 0.96 }}\n              transition={spring}\n              onClick={onContinue}\n              className=\"xs:w-auto h-10 w-full rounded-full bg-[#0F0F0F] px-8 text-[13px] font-medium text-[#D7D7D7] shadow-lg transition-all active:shadow-sm sm:w-auto dark:bg-[#EEE] dark:text-black\"\n            >\n              Continue\n            </motion.button>\n          </div>\n        </div>\n\n        {/* RIGHT IMAGE SECTION */}\n        <div className=\"relative order-1 h-48 overflow-hidden rounded-t-[24px] sm:h-64 md:h-auto md:min-h-full lg:order-2 lg:rounded-t-none lg:rounded-r-[24px]\">\n          <AnimatePresence mode=\"popLayout\">\n            <motion.img\n              key={imageUrl}\n              src={imageUrl}\n              initial={{ opacity: 0, scale: 1.03 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.98 }}\n              transition={spring}\n              className=\"absolute inset-0 h-full w-full object-cover\"\n            />\n            <div className=\"pointer-events-none absolute inset-0 bg-black/5 dark:bg-black/20\" />\n          </AnimatePresence>\n        </div>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}