{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-steps",
  "title": "Feature Steps",
  "description": "A dynamic feature showcase with auto-playing steps and synchronized image transitions.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/feature-steps/feature-steps.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { LazyMotion, domMax, m } from \"motion/react\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Feature {\n  step?: string;\n  title: string;\n  content: string;\n  image: string;\n}\n\ninterface FeatureStepsProps {\n  features: Feature[];\n  className?: string;\n  autoPlayInterval?: number;\n  imageClassName?: string;\n}\n\nexport default function FeatureSteps({\n  features,\n  className,\n  autoPlayInterval = 3000,\n  imageClassName = \"h-[400px]\",\n}: FeatureStepsProps) {\n  const [state, setState] = useState({ feature: 0, tick: 0 });\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setState((prev) => ({\n        feature: (prev.feature + 1) % features.length,\n        tick: prev.tick + 1,\n      }));\n    }, autoPlayInterval);\n\n    return () => clearInterval(timer);\n  }, [autoPlayInterval, state.feature, features.length]);\n\n  const currentFeature = state.feature;\n  const progressKey = state.tick;\n\n  return (\n    <LazyMotion features={domMax}>\n      <div\n        className={cn(\n          \"flex flex-col md:flex-row w-full md:items-stretch max-w-[1440px] mx-auto\",\n          className\n        )}\n      >\n        {/* Left Column: Feature List */}\n        <div className=\"flex flex-col w-full md:w-1/2 border border-black/10 dark:border-white/10 divide-y divide-black/10 dark:divide-white/10\">\n          {features.map((feature, index) => (\n            <m.div\n              key={feature.title}\n              layoutId={feature.title}\n              onClick={() => {\n                setState((prev) => ({ feature: index, tick: prev.tick + 1 }));\n              }}\n              className=\"p-4 md:p-10 relative cursor-pointer\"\n            >\n              <h3 className=\"text-base md:text-lg leading-none text-black dark:text-white\">\n                {feature.title}\n              </h3>\n              <p className=\"mt-2 text-sm  text-neutral-500\">\n                {feature.content}\n              </p>\n              {index === currentFeature && (\n                <m.div\n                  key={progressKey}\n                  className=\"absolute h-[1px] bottom-0 left-0 bg-black dark:bg-white\"\n                  initial={{ width: \"0%\" }}\n                  animate={{ width: \"100%\" }}\n                  transition={{\n                    duration: autoPlayInterval / 1000,\n                    ease: \"easeIn\",\n                  }}\n                />\n              )}\n            </m.div>\n          ))}\n        </div>\n\n        {/* Right Column: Image Display */}\n        <div\n          className={cn(\n            \"w-full md:w-1/2 border border-black/10 dark:border-white/10 md:border-l-0 border-t-0 md:border-t relative p-4 md:p-5 overflow-hidden\",\n            imageClassName\n          )}\n        >\n          <m.div\n            key={currentFeature}\n            initial={{ y: \"100%\" }}\n            animate={{ y: 0 }}\n            transition={{ duration: 0.3, ease: \"easeInOut\" }}\n            className=\"relative w-full h-full\"\n          >\n            <Image\n              src={features[currentFeature].image}\n              alt={features[currentFeature].title}\n              fill\n              sizes=\"(max-width: 768px) 100vw, 50vw\"\n              className=\"rounded object-cover\"\n            />\n          </m.div>\n        </div>\n      </div>\n    </LazyMotion>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}