{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-flip",
  "title": "Text Flip",
  "author": "shakil-ahmed-billal <shakil.dev99@gmail.com>",
  "description": "Animated text that cycles through items with a smooth flip transition.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/text-flip/text-flip.tsx",
      "content": "\"use client\"\r\n\r\nimport type { Transition, Variants } from \"motion/react\"\r\nimport { AnimatePresence, motion } from \"motion/react\"\r\nimport { Children, useEffect, useState } from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst defaultVariants: Variants = {\r\n  initial: { y: -8, opacity: 0 },\r\n  animate: { y: 0, opacity: 1 },\r\n  exit: { y: 8, opacity: 0 },\r\n}\r\n\r\ntype MotionElement = typeof motion.p | typeof motion.span | typeof motion.code\r\n\r\nexport type TextFlipProps = {\r\n  /**\r\n   * Motion element to render.\r\n   * @defaultValue motion.p\r\n   * */\r\n  as?: MotionElement\r\n  className?: string\r\n  /** Array of children to cycle through. */\r\n  children: React.ReactNode[]\r\n\r\n  /**\r\n   * Time in seconds between each flip.\r\n   * @defaultValue 2\r\n   * */\r\n  interval?: number\r\n  /**\r\n   * Motion transition configuration.\r\n   * @defaultValue { duration: 0.3 }\r\n   * */\r\n  transition?: Transition\r\n  /** Motion variants for enter/exit animations. */\r\n  variants?: Variants\r\n\r\n  /** Called with the new index after each flip. */\r\n  onIndexChange?: (index: number) => void\r\n}\r\n\r\nexport function TextFlip({\r\n  as: Component = motion.p,\r\n  className,\r\n  children,\r\n\r\n  interval = 2,\r\n  transition = { duration: 0.3 },\r\n  variants = defaultVariants,\r\n\r\n  onIndexChange,\r\n}: TextFlipProps) {\r\n  const [currentIndex, setCurrentIndex] = useState(0)\r\n\r\n  const items = Children.toArray(children)\r\n\r\n  useEffect(() => {\r\n    const timer = setInterval(() => {\r\n      setCurrentIndex((prev) => {\r\n        const next = (prev + 1) % items.length\r\n        onIndexChange?.(next)\r\n        return next\r\n      })\r\n    }, interval * 1000)\r\n\r\n    return () => clearInterval(timer)\r\n  }, [items.length, interval, onIndexChange])\r\n\r\n  return (\r\n    <AnimatePresence mode=\"wait\" initial={false}>\r\n      <Component\r\n        key={currentIndex}\r\n        className={cn(\"inline-block\", className)}\r\n        initial=\"initial\"\r\n        animate=\"animate\"\r\n        exit=\"exit\"\r\n        transition={transition}\r\n        variants={variants}\r\n      >\r\n        {items[currentIndex]}\r\n      </Component>\r\n    </AnimatePresence>\r\n  )\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "docs": "https://xhakil.vercel.app/components/text-flip",
  "type": "registry:component"
}