{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flip-sentences",
  "title": "Flip Sentences",
  "author": "ramanak <ramanak.dev@gmail.com>",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ramanak/utils"
  ],
  "files": [
    {
      "path": "src/registry/flip-sentences/flip-sentences.tsx",
      "content": "\"use client\"\r\n\r\nimport type { Transition, Variants } from \"motion/react\"\r\nimport { AnimatePresence, motion } from \"motion/react\"\r\nimport * as React 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 = \"p\" | \"span\" | \"code\" | typeof motion.p\r\n\r\ntype Props = {\r\n  as?: MotionElement\r\n  className?: string\r\n  children: React.ReactNode[]\r\n\r\n  interval?: number\r\n  transition?: Transition\r\n  variants?: Variants\r\n\r\n  onIndexChange?: (index: number) => void\r\n}\r\n\r\nexport function FlipSentences({\r\n  as = \"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}: Props) {\r\n  const [isClient, setIsClient] = React.useState(false)\r\n  React.useEffect(() => setIsClient(true), [])\r\n\r\n  const [currentIndex, setCurrentIndex] = React.useState(0)\r\n\r\n  const items = React.Children.toArray(children)\r\n\r\n  React.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  const Component = isClient\r\n    ? typeof as === \"string\"\r\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n      ? (motion as any)[as]\r\n      : as\r\n    : typeof as === \"string\"\r\n      ? as\r\n      : \"p\"\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"
    }
  ],
  "type": "registry:component"
}