{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-carousel",
  "type": "registry:ui",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "feature-carousel.tsx",
      "target": "components/ui/feature-carousel.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FeatureCard {\n  title: string;\n  body?: React.ReactNode;\n  id?: string;\n}\n\nexport interface FeatureCarouselProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  cards: FeatureCard[];\n  /** Auto-advance interval in ms. Defaults to 4600. */\n  autoAdvanceMs?: number;\n}\n\nexport const FeatureCarousel = React.forwardRef<\n  HTMLDivElement,\n  FeatureCarouselProps\n>(({ cards, autoAdvanceMs = 4600, className, ...props }, ref) => {\n  const reduce = useReducedMotion() ?? false;\n  const [index, setIndex] = React.useState(0);\n  const active = cards[index];\n\n  const advance = React.useCallback(() => {\n    if (cards.length < 2) return;\n    setIndex((i) => (i + 1) % cards.length);\n  }, [cards.length]);\n\n  if (!active) return null;\n\n  return (\n    <div ref={ref} className={cn(\"group grid gap-4\", className)} {...props}>\n      <motion.article\n        key={active.id ?? active.title}\n        initial={{ opacity: reduce ? 1 : 0.7, y: reduce ? 0 : 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: reduce ? 0.01 : 0.32, ease: [0.16, 1, 0.3, 1] }}\n        className=\"wash-accent rim-light relative flex h-[clamp(18rem,28vw,22rem)] flex-col justify-end overflow-hidden rounded-2xl border border-border bg-surface p-[clamp(1.5rem,3vw,2.25rem)] shadow-floating\"\n      >\n        <span className=\"absolute top-[clamp(1.5rem,3vw,2.25rem)] left-[clamp(1.5rem,3vw,2.25rem)] font-mono text-sm font-bold tracking-[0.12em] text-accent-alt\">\n          {String(index + 1).padStart(2, \"0\")}\n        </span>\n        <h3 className=\"relative max-w-[24rem] text-balance text-[clamp(1.6rem,3vw,2.4rem)] font-bold leading-[1.05] text-ink\">\n          {active.title}\n        </h3>\n        {active.body != null && (\n          <p className=\"relative mt-4 max-w-prose text-pretty leading-relaxed text-muted\">\n            {active.body}\n          </p>\n        )}\n      </motion.article>\n\n      <div className=\"grid grid-cols-2 gap-2\">\n        {cards.map((card, i) => {\n          const isActive = i === index;\n          return (\n            <motion.button\n              key={card.id ?? card.title}\n              type=\"button\"\n              aria-label={`Show ${card.title}`}\n              aria-current={isActive}\n              onClick={() => setIndex(i)}\n              whileTap={reduce ? undefined : { scale: 0.97 }}\n              className={cn(\n                \"relative grid min-h-[3.1rem] grid-cols-[auto_minmax(0,1fr)] items-center gap-2.5 overflow-hidden rounded-lg border px-3.5 py-3 text-left outline-none\",\n                \"transition-tint duration-fast ease-soft focus-visible:ring-focus\",\n                isActive\n                  ? \"border-accent-alt/30 bg-accent-alt/8 text-ink\"\n                  : \"border-border bg-surface text-muted hover:border-border-strong hover:text-ink\",\n              )}\n            >\n              {isActive && cards.length > 1 && !reduce && (\n                <span\n                  key={index}\n                  aria-hidden=\"true\"\n                  onAnimationEnd={advance}\n                  style={\n                    {\n                      \"--usva-progress-duration\": `${autoAdvanceMs}ms`,\n                    } as React.CSSProperties\n                  }\n                  className=\"absolute inset-x-0 bottom-0 h-px bg-accent-alt glow-accent animate-progress-fill group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused]\"\n                />\n              )}\n              <span className=\"font-mono text-xs font-bold tracking-[0.08em] text-accent-alt/70\">\n                {String(i + 1).padStart(2, \"0\")}\n              </span>\n              <strong className=\"truncate text-sm font-semibold\">\n                {card.title}\n              </strong>\n            </motion.button>\n          );\n        })}\n      </div>\n    </div>\n  );\n});\nFeatureCarousel.displayName = \"FeatureCarousel\";\n"
    }
  ]
}