{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-stack-base",
  "type": "registry:component",
  "title": "Dialog Stack (base)",
  "description": "Theme-ready base variant of A layered modal component that stacks multiple dialogs with smooth spring-weighted transitions..",
  "dependencies": [
    "@hugeicons/react",
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/dialog-stack.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { X, ArrowRight, ThumbsUp } from 'lucide-react';\nimport { HugeiconsIcon } from '@hugeicons/react';\n\nexport interface StackItem {\n  id: string;\n  title: string;\n  type: 'form' | 'steps';\n  steps?: { icon: any; text: string }[];\n  buttonText?: string;\n}\n\ninterface DialogStackProps {\n  stack: StackItem[];\n  trigger: {\n    label: string;\n    icon: any;\n  };\n}\n\nexport const DialogStack: React.FC<DialogStackProps> = ({ stack, trigger }) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(0);\n\n  const handleNext = () => {\n    if (activeIndex < stack.length - 1) setActiveIndex((prev) => prev + 1);\n  };\n\n  const handleBack = () => {\n    if (activeIndex > 0) setActiveIndex((prev) => prev - 1);\n  };\n\n  const resetAndClose = () => {\n    setIsOpen(false);\n    setTimeout(() => setActiveIndex(0), 300);\n  };\n\n  const handleHeaderClose = () => {\n    if (activeIndex > 0) {\n      handleBack();\n    } else {\n      resetAndClose();\n    }\n  };\n\n  return (\n    <div className=\"theme-injected font-sans relative flex min-h-[450px] flex-col items-center justify-center sm:min-h-[600px]\">\n      <motion.button\n        onClick={() => setIsOpen(true)}\n        whileTap={{ scale: 0.96 }}\n        transition={{ ease: [0.25, 0.1, 0.25, 1], duration: 0.3 }}\n        className={`flex transform items-center gap-2 rounded-4xl border-2 border-border bg-card px-6 py-3 text-lg font-semibold text-foreground shadow-lg transition-all hover:-translate-y-2.5 sm:gap-3 sm:px-8 sm:py-4 sm:text-xl ${isOpen ? '-translate-y-2.5' : ''}`}\n      >\n        <div className=\"text-foreground\">\n          <HugeiconsIcon\n            icon={trigger.icon}\n            size={\n              typeof window !== 'undefined' && window.innerWidth < 640 ? 24 : 28\n            }\n            strokeWidth={1.5}\n          />\n        </div>\n        <span>{trigger.label}</span>\n      </motion.button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            initial={{ opacity: 1, y: 100 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 100 }}\n            transition={{ ease: 'easeOut', duration: 0.25 }}\n            className=\"absolute top-1/2 left-1/2 z-50 flex w-160 -translate-x-1/2 -translate-y-1/2 items-center justify-center p-4\"\n          >\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={resetAndClose}\n              className=\"absolute inset-0 backdrop-blur-sm\"\n            />\n\n            <div className=\"relative flex min-h-[450px] w-xs items-center justify-center sm:min-h-[600px] sm:w-sm\">\n              <AnimatePresence mode=\"popLayout\" initial={false}>\n                {stack.map((item, index) => {\n                  const isUnder = index < activeIndex;\n                  if (index > activeIndex) return null;\n\n                  return (\n                    <motion.div\n                      key={item.id}\n                      initial={{ y: 50, opacity: 0, scale: 0.95 }}\n                      animate={{\n                        y: isUnder ? -35 : 0,\n                        scale: isUnder ? 0.94 : 1,\n                        opacity: isUnder ? 0.5 : 1,\n                        zIndex: index,\n                      }}\n                      exit={{ y: 50, opacity: 0, scale: 0.95 }}\n                      transition={{\n                        type: 'spring',\n                        stiffness: 300,\n                        damping: 28,\n                      }}\n                      className=\"absolute inset-x-0 top-0 flex h-fit flex-col overflow-hidden rounded-xl border-2 border-border bg-card shadow-2xl transition-colors sm:rounded-2xl\"\n                    >\n                      {/* Header */}\n                      <div className=\"flex items-center justify-between border-b border-border bg-muted/60 px-4 py-3 transition-colors sm:px-5 sm:py-3\">\n                        <h3 className=\"text-base font-medium text-muted-foreground sm:text-lg\">\n                          {item.title}\n                        </h3>\n                        <button\n                          title=\"close\"\n                          onClick={handleHeaderClose}\n                          className=\"rounded-full p-1 transition-colors hover:bg-muted\"\n                        >\n                          <X\n                            size={20}\n                            className=\"text-muted-foreground sm:size-5.5\"\n                          />\n                        </button>\n                      </div>\n\n                      {/* Content */}\n                      <div className=\"flex-1 px-5 pt-4 pb-8 sm:px-6 sm:pt-6 sm:pb-10\">\n                        {item.type === 'form' ? (\n                          <div className=\"space-y-4 sm:space-y-5\">\n                            <div className=\"space-y-3\">\n                              <label className=\"block text-sm font-normal text-muted-foreground sm:text-base\">\n                                Email Address\n                              </label>\n                              <input\n                                title=\"email\"\n                                type=\"text\"\n                                className=\"w-full rounded-lg border border-input bg-background px-3 py-3 text-foreground transition-colors focus:outline-none focus:border-ring sm:rounded-xl sm:px-4 sm:py-3\"\n                              />\n                              <p className=\"text-xs text-muted-foreground sm:text-sm\">\n                                Use commas to add multiple emails.\n                              </p>\n                            </div>\n\n                            <div className=\"space-y-3\">\n                              <label className=\"block text-sm font-normal text-muted-foreground sm:text-base\">\n                                Message\n                              </label>\n                              <textarea\n                                title=\"message\"\n                                rows={\n                                  typeof window !== 'undefined' &&\n                                  window.innerWidth < 640\n                                    ? 3\n                                    : 4\n                                }\n                                className=\"w-full rounded-lg border border-input bg-background px-3 py-3 text-foreground transition-colors focus:outline-none focus:border-ring sm:rounded-xl sm:px-4 sm:py-3\"\n                              />\n                            </div>\n\n                            <button className=\"flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-colors active:scale-[0.98] sm:rounded-2xl sm:py-4 hover:bg-primary/90\">\n                              {item.buttonText || 'Send'}{' '}\n                              <ArrowRight size={18} />\n                            </button>\n\n                            <button\n                              onClick={handleNext}\n                              className=\"w-full text-sm font-medium text-muted-foreground transition-colors hover:text-foreground\"\n                            >\n                              How it works?\n                            </button>\n                          </div>\n                        ) : (\n                          <div className=\"space-y-6 sm:space-y-8\">\n                            <h4 className=\"text-xl font-bold text-foreground sm:text-2xl\">\n                              3 easy steps\n                            </h4>\n\n                            <div className=\"space-y-5 sm:space-y-6\">\n                              {item.steps?.map((step, i) => (\n                                <div\n                                  key={i}\n                                  className=\"group flex items-start gap-3 sm:gap-4\"\n                                >\n                                  <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-border bg-muted text-foreground transition-colors sm:h-12 sm:w-12 sm:rounded-xl\">\n                                    <HugeiconsIcon\n                                      icon={step.icon}\n                                      size={\n                                        typeof window !== 'undefined' &&\n                                        window.innerWidth < 640\n                                          ? 22\n                                          : 27\n                                      }\n                                      strokeWidth={1.5}\n                                    />\n                                  </div>\n                                  <p className=\"pt-1 text-sm leading-snug text-muted-foreground sm:text-base\">\n                                    {step.text}\n                                  </p>\n                                </div>\n                              ))}\n                            </div>\n\n                            <button\n                              onClick={handleBack}\n                              className=\"flex w-full items-center justify-center gap-3 rounded-xl bg-primary py-3 text-base font-medium text-primary-foreground transition-all active:scale-[0.98] sm:gap-4 sm:rounded-2xl sm:py-4 sm:text-lg hover:bg-primary/90\"\n                            >\n                              Got It{' '}\n                              <ThumbsUp size={20} className=\"sm:size-5.5\" />\n                            </button>\n                          </div>\n                        )}\n                      </div>\n                    </motion.div>\n                  );\n                })}\n              </AnimatePresence>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n"
    }
  ]
}