{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-sentences",
  "type": "registry:component",
  "title": "Flip Sentences",
  "author": "ncdai <dai@chanhdai.com>",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ncdai/utils"
  ],
  "files": [
    {
      "path": "src/registry/flip-sentences/flip-sentences.tsx",
      "content": "\"use client\";\n\nimport type { Transition, Variants } from \"motion/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { Children, useEffect, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst defaultVariants: Variants = {\n  initial: { y: -8, opacity: 0 },\n  animate: { y: 0, opacity: 1 },\n  exit: { y: 8, opacity: 0 },\n};\n\ntype MotionElement = typeof motion.p | typeof motion.span | typeof motion.code;\n\ntype Props = {\n  as?: MotionElement;\n  className?: string;\n  children: React.ReactNode[];\n\n  interval?: number;\n  transition?: Transition;\n  variants?: Variants;\n\n  onIndexChange?: (index: number) => void;\n};\n\nexport function FlipSentences({\n  as: Component = motion.p,\n  className,\n  children,\n\n  interval = 2,\n  transition = { duration: 0.3 },\n  variants = defaultVariants,\n\n  onIndexChange,\n}: Props) {\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const items = Children.toArray(children);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setCurrentIndex((prev) => {\n        const next = (prev + 1) % items.length;\n        onIndexChange?.(next);\n        return next;\n      });\n    }, interval * 1000);\n\n    return () => clearInterval(timer);\n  }, [items.length, interval, onIndexChange]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Component\n        key={currentIndex}\n        className={cn(\"inline-block\", className)}\n        initial=\"initial\"\n        animate=\"animate\"\n        exit=\"exit\"\n        transition={transition}\n        variants={variants}\n      >\n        {items[currentIndex]}\n      </Component>\n    </AnimatePresence>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}