{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "onboarding-setup-base",
  "type": "registry:component",
  "title": "Onboarding Setup (base)",
  "description": "Theme-ready base variant of 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={`theme-injected relative flex w-full flex-col items-center justify-center bg-transparent py-0 font-sans 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=\"border-border bg-background relative z-10 grid w-full max-w-5xl grid-cols-1 rounded-2xl border-2 shadow-xl lg:grid-cols-[1.2fr_0.8fr]\"\n      >\n        {/* LEFT CONTENT */}\n        <div className=\"order-2 flex flex-col lg:order-1\">\n          <div className=\"bg-card m-1 flex h-full flex-col rounded-lg p-6 shadow-sm sm:p-8\">\n            <h1 className=\"text-foreground text-xl font-semibold sm:text-2xl\">\n              {title}\n            </h1>\n            <p className=\"text-muted-foreground mt-2 text-xs\">{subtitle}</p>\n\n            <div className=\"border-border my-4 border-t border-dashed\" />\n\n            {/* Focus Options */}\n            <div className=\"grow\">\n              <p className=\"text-muted-foreground mb-3 text-xs font-medium tracking-tight\">\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-md border px-4 py-2 text-xs font-medium transition-all duration-200 sm:grow-0 sm:justify-start ${\n                        active\n                          ? 'bg-primary/10 border-primary/40 text-primary'\n                          : 'bg-card border-border text-foreground/70 hover:border-border/80'\n                      } `}\n                    >\n                      {active && (\n                        <CheckCircle2\n                          size={18}\n                          fill=\"currentColor\"\n                          className=\"text-primary\"\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-muted-foreground text-xs font-medium\">\n                  Monthly revenue\n                </label>\n                <div className=\"relative mt-2\" ref={revenueRef}>\n                  <button\n                    type=\"button\"\n                    onClick={() => setIsRevenueOpen(!isRevenueOpen)}\n                    className=\"border-border bg-card text-foreground focus-visible:ring-ring relative h-10 w-full rounded-full border pr-12 pl-6 text-left text-sm whitespace-nowrap transition-all outline-none focus-visible:ring-1\"\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\n                        size={14}\n                        className=\"text-muted-foreground\"\n                      />\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=\"bg-card border-border absolute z-[100] mt-1.5 w-full overflow-hidden rounded-xl border py-1 shadow-2xl\"\n                      >\n                        {revenueOptions.map((option) => (\n                          <button\n                            key={option}\n                            type=\"button\"\n                            onClick={() => {\n                              onRevenueChange(option);\n                              setIsRevenueOpen(false);\n                            }}\n                            className=\"hover:bg-muted/50 group flex w-full items-center justify-between px-4 py-2.5 text-left text-[13px] transition-colors\"\n                          >\n                            <span\n                              className={\n                                revenue === option\n                                  ? 'text-foreground font-medium'\n                                  : 'text-muted-foreground'\n                              }\n                            >\n                              {option}\n                            </span>\n                            {revenue === option && (\n                              <Check size={14} className=\"text-foreground\" />\n                            )}\n                          </button>\n                        ))}\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n                </div>\n              </div>\n\n              <div>\n                <label className=\"text-muted-foreground text-xs font-medium\">\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=\"border-border bg-card text-foreground placeholder:text-muted-foreground/50 focus-visible:ring-ring mt-2 h-10 w-full rounded-full border px-6 text-left text-sm transition-all outline-none focus-visible:ring-1\"\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-6 pt-4 sm:px-8 sm:pb-8\">\n            <div className=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\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-3 w-1 rounded-full transition-colors ${i < Math.ceil((step / totalSteps) * 5) ? 'bg-primary' : 'bg-border'}`}\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 bg-foreground text-background h-9 w-full rounded-full px-6 text-sm font-medium shadow-lg transition-all active:shadow-sm sm:w-auto\"\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-2xl sm:h-64 md:h-auto md:min-h-full lg:order-2 lg:rounded-t-none lg:rounded-r-2xl\">\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"
    }
  ]
}