{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layered-progressive-disclosure",
  "type": "registry:component",
  "title": "Layered Progressive Disclosure",
  "description": "A premium layered progressive disclosure panel with animated feature toggles, asymmetric controls, and tabbed micro-interactions for advanced configuration workflows.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/layered-progressive-disclosure.tsx",
      "type": "registry:component",
      "content": "import { ArrowRight04Icon, PlusSignIcon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface LayeredProgressiveDisclosureProps {\n  title?: string;\n  configOptions?: { label: string; value: string | number }[];\n  primaryFeatureName?: string;\n  secondaryFeatureName?: string;\n  asymmetricOptionsName?: string;\n  tabs?: [string, string];\n  onAddProperty?: () => void;\n  onFeatureToggle?: (isActive: boolean) => void;\n  onAsymmetricToggle?: (isActive: boolean) => void;\n  onTabChange?: (tab: string) => void;\n}\n\nexport default function LayeredProgressiveDisclosure({\n  title = 'Configuration',\n  configOptions = [\n    { label: 'Width', value: '300' },\n    { label: 'Height', value: '300' },\n  ],\n  primaryFeatureName = 'Visual Change',\n  secondaryFeatureName = 'Transition',\n  asymmetricOptionsName = 'Asymmetric',\n  tabs = ['Insertion', 'Removal'],\n  onAddProperty,\n  onFeatureToggle,\n  onAsymmetricToggle,\n  onTabChange,\n}: LayeredProgressiveDisclosureProps) {\n  const [isAsymmetric, setIsAsymmetric] = useState(false);\n  const [isTransition, setIsTransition] = useState(false);\n  const [activeTab, setActiveTab] = useState<string>(tabs[0]);\n\n  const handleFeatureToggle = () => {\n    const newState = !isTransition;\n    setIsTransition(newState);\n    onFeatureToggle?.(newState);\n  };\n\n  const handleAsymmetricToggle = () => {\n    const newState = !isAsymmetric;\n    setIsAsymmetric(newState);\n    onAsymmetricToggle?.(newState);\n  };\n\n  const handleTabChange = (tab: string) => {\n    setActiveTab(tab);\n    onTabChange?.(tab);\n  };\n\n  return (\n    <div className=\"flex min-w-[300px] flex-col gap-3 rounded-3xl bg-neutral-100 p-3 transition-colors duration-300 dark:bg-neutral-900/50\">\n      <p className=\"ml-2 font-semibold tracking-tight text-neutral-500 dark:text-neutral-400\">\n        {title}\n      </p>\n      <div className=\"flex w-full flex-col items-center gap-3 rounded-3xl bg-neutral-200 p-3 transition-colors duration-300 dark:bg-neutral-900\">\n        <div className=\"flex w-full items-center gap-12\">\n          {configOptions.slice(0, 2).map((option, idx) => (\n            <div\n              key={idx}\n              className=\"flex w-full items-center justify-between gap-3 rounded-2xl bg-neutral-100 px-4 py-3 transition-colors duration-300 dark:bg-neutral-800\"\n            >\n              <p className=\"font-semibold tracking-tight text-neutral-500 dark:text-neutral-400\">\n                {option.label}\n              </p>\n              <p className=\"font-semibold tracking-tight text-neutral-500 dark:text-neutral-300\">\n                {option.value}\n              </p>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex w-full flex-col items-center gap-3 rounded-3xl bg-neutral-200 p-1 transition-colors duration-300 dark:bg-neutral-900\">\n        <div className=\"flex w-full flex-col items-center p-3\">\n          <div\n            onClick={handleFeatureToggle}\n            className=\"relative z-30 flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl bg-neutral-100 px-4 py-3 transition-colors duration-300 dark:bg-neutral-800\"\n          >\n            <div className=\"relative flex h-6 flex-1 items-center\">\n              <AnimatePresence mode=\"popLayout\">\n                <motion.div\n                  key={isTransition ? secondaryFeatureName : primaryFeatureName}\n                  className=\"absolute flex font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"exit\"\n                  variants={{\n                    visible: {\n                      transition: { staggerChildren: 0.02 },\n                    },\n                    exit: {\n                      transition: { staggerChildren: 0.005 },\n                    },\n                  }}\n                >\n                  {(isTransition ? secondaryFeatureName : primaryFeatureName)\n                    .split('')\n                    .map((char, index) => (\n                      <motion.span\n                        key={index}\n                        variants={{\n                          hidden: { opacity: 0, y: 10, filter: 'blur(1px)' },\n                          visible: { opacity: 1, y: 0, filter: 'blur(0px)' },\n                          exit: { opacity: 0, y: -10, filter: 'blur(1px)' },\n                        }}\n                        className=\"whitespace-pre\"\n                      >\n                        {char}\n                      </motion.span>\n                    ))}\n                </motion.div>\n              </AnimatePresence>\n            </div>\n            <UnfoldMore />\n          </div>\n\n          <AnimatePresence>\n            {isTransition && (\n              <motion.div\n                key=\"asymmetric-toggle-container\"\n                initial={{ height: 0, opacity: 0, filter: 'blur(4px)', y: -50 }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                  y: 0,\n                }}\n                exit={{ height: 0, opacity: 0, filter: 'blur(4px)', y: -50 }}\n                transition={{ duration: 0.3, ease: 'easeOut' }}\n                className=\"w-full overflow-hidden\"\n              >\n                <div className=\"mt-3 flex w-full items-center justify-between gap-3 rounded-2xl bg-neutral-100 px-4 py-3 transition-colors duration-300 dark:bg-neutral-800\">\n                  <p className=\"font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\">\n                    {asymmetricOptionsName}\n                  </p>\n                  <button\n                    onClick={handleAsymmetricToggle}\n                    className={`flex h-7 w-12 cursor-pointer rounded-full p-0.5 shadow-inner transition-colors duration-300 ease-in-out ${\n                      isAsymmetric\n                        ? 'bg-neutral-800 dark:bg-neutral-100'\n                        : 'bg-neutral-300 dark:bg-neutral-600'\n                    }`}\n                  >\n                    <motion.div\n                      layout\n                      initial={{ x: 0 }}\n                      animate={{ x: isAsymmetric ? 20 : 0 }}\n                      transition={{ duration: 0.2, ease: 'easeInOut' }}\n                      className=\"size-6 rounded-full bg-white shadow-sm dark:bg-neutral-900\"\n                    />\n                  </button>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n\n        <div className=\"flex w-full flex-col items-center rounded-2xl bg-neutral-100 p-3 transition-colors duration-300 dark:bg-neutral-800\">\n          <AnimatePresence>\n            {isAsymmetric && (\n              <motion.div\n                key=\"asymmetric-tabs-container\"\n                initial={{ height: 0, opacity: 0, filter: 'blur(4px)', y: -50 }}\n                animate={{\n                  height: 'auto',\n                  opacity: 1,\n                  filter: 'blur(0px)',\n                  y: 0,\n                }}\n                exit={{ height: 0, opacity: 0, filter: 'blur(4px)', y: -50 }}\n                transition={{ type: 'spring', bounce: 0.45, duration: 0.8 }}\n                className=\"w-full overflow-hidden\"\n              >\n                <div className=\"relative z-20 mb-3 flex w-full items-center justify-between rounded-2xl bg-neutral-200 p-0.5 transition-colors duration-300 dark:bg-neutral-900\">\n                  <button\n                    onClick={() => handleTabChange(tabs[0])}\n                    className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {tabs[0]}\n                    {activeTab === tabs[0] && (\n                      <motion.span\n                        layoutId=\"progressive-disclosure-tab\"\n                        className=\"absolute inset-0 -z-10 rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800\"\n                        transition={{\n                          type: 'spring',\n                          bounce: 0.4,\n                          duration: 0.5,\n                        }}\n                      />\n                    )}\n                  </button>\n                  <button\n                    onClick={() => handleTabChange(tabs[1])}\n                    className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {tabs[1]}\n                    {activeTab === tabs[1] && (\n                      <motion.span\n                        layoutId=\"progressive-disclosure-tab\"\n                        className=\"absolute inset-0 -z-10 rounded-xl bg-neutral-100 shadow-sm dark:bg-neutral-800\"\n                        transition={{\n                          type: 'spring',\n                          bounce: 0.4,\n                          duration: 0.5,\n                        }}\n                      />\n                    )}\n                  </button>\n                </div>\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          <div className=\"mb-3 flex w-full items-center justify-between px-1\">\n            <p className=\"font-semibold tracking-tight text-zinc-500 dark:text-zinc-400\">\n              Opacity\n            </p>\n            <div className=\"flex h-full w-[175px] items-center justify-around rounded-2xl bg-neutral-200 px-5 py-2 transition-colors duration-300 dark:bg-neutral-900\">\n              <div className=\"relative flex h-6 w-6 items-center justify-center\">\n                <AnimatePresence mode=\"popLayout\">\n                  <motion.p\n                    key={activeTab === tabs[0] ? '0' : '1'}\n                    initial={{ opacity: 0, y: -10 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    exit={{ opacity: 0, y: 10 }}\n                    transition={{ duration: 0.2 }}\n                    className=\"absolute font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {activeTab === tabs[0] ? '0' : '1'}\n                  </motion.p>\n                </AnimatePresence>\n              </div>\n\n              <HugeiconsIcon\n                icon={ArrowRight04Icon}\n                className=\"text-neutral-700 dark:text-neutral-400\"\n              />\n\n              <div className=\"relative flex h-6 w-6 items-center justify-center\">\n                <AnimatePresence mode=\"popLayout\">\n                  <motion.p\n                    key={activeTab === tabs[0] ? '1' : '0'}\n                    initial={{ opacity: 0, y: -10 }}\n                    animate={{ opacity: 1, y: 0 }}\n                    exit={{ opacity: 0, y: 10 }}\n                    transition={{ duration: 0.2 }}\n                    className=\"absolute font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {activeTab === tabs[0] ? '1' : '0'}\n                  </motion.p>\n                </AnimatePresence>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"mb-3 flex w-full items-center justify-between px-1\">\n            <p className=\"font-semibold tracking-tight text-zinc-500 dark:text-zinc-400\">\n              {' '}\n              Blur\n            </p>\n            <div className=\"flex h-full w-[175px] items-center justify-around rounded-2xl bg-neutral-200 px-5 py-2 transition-colors duration-300 dark:bg-neutral-900\">\n              <div className=\"relative flex h-6 w-6 items-center justify-center\">\n                <AnimatePresence mode=\"popLayout\">\n                  <motion.p\n                    key={activeTab === tabs[0] ? '16' : '0'}\n                    initial={{ opacity: 0, filter: 'blur(4px)' }}\n                    animate={{ opacity: 1, filter: 'blur(0px)' }}\n                    exit={{ opacity: 0, filter: 'blur(4px)' }}\n                    transition={{ duration: 0.2 }}\n                    className=\"absolute font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {activeTab === tabs[0] ? '16' : '0'}\n                  </motion.p>\n                </AnimatePresence>\n              </div>\n\n              <HugeiconsIcon\n                icon={ArrowRight04Icon}\n                className=\"text-neutral-700 dark:text-neutral-400\"\n              />\n\n              <div className=\"relative flex h-6 w-6 items-center justify-center\">\n                <AnimatePresence mode=\"popLayout\">\n                  <motion.p\n                    key={activeTab === tabs[0] ? '0' : '16'}\n                    initial={{ opacity: 0, filter: 'blur(4px)' }}\n                    animate={{ opacity: 1, filter: 'blur(0px)' }}\n                    exit={{ opacity: 0, filter: 'blur(4px)' }}\n                    transition={{ duration: 0.2 }}\n                    className=\"absolute font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n                  >\n                    {activeTab === tabs[0] ? '0' : '16'}\n                  </motion.p>\n                </AnimatePresence>\n              </div>\n            </div>\n          </div>\n\n          <button\n            onClick={onAddProperty}\n            className=\"mt-2 flex w-full items-center justify-center gap-2 rounded-2xl bg-neutral-900 px-5 py-2.5 text-center font-semibold tracking-tight text-neutral-100 transition-colors duration-300 dark:bg-neutral-100 dark:text-neutral-900\"\n          >\n            <HugeiconsIcon\n              icon={PlusSignIcon}\n              className=\"inline-block size-5\"\n            />{' '}\n            Add Property\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst UnfoldMore = ({ onClick }: { onClick?: () => void }) => {\n  return (\n    <svg\n      onClick={onClick}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down cursor-pointer text-neutral-700 dark:text-neutral-400\"\n    >\n      <path d=\"m7 15 5 5 5-5\" />\n      <path d=\"m7 9 5-5 5 5\" />\n    </svg>\n  );\n};\n"
    }
  ]
}