{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "An infinite scrolling marquee with configurable speed and direction.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/wise-ui/components/marquee.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/wise-ui/lib/utils\"\n\ninterface MarqueeProps {\n  speed?: number\n  direction?: \"left\" | \"right\"\n  pauseOnHover?: boolean\n  children: React.ReactNode\n  className?: string\n}\n\nfunction Marquee({\n  speed = 40,\n  direction = \"left\",\n  pauseOnHover = false,\n  children,\n  className,\n}: MarqueeProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [contentWidth, setContentWidth] = React.useState(0)\n  const scopedId = React.useId().replace(/:/g, \"\")\n  const [paused, setPaused] = React.useState(false)\n\n  React.useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const measure = () => {\n      const first = el.firstElementChild as HTMLElement | null\n      if (first) setContentWidth(first.scrollWidth)\n    }\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [children])\n\n  const duration = contentWidth > 0 ? contentWidth / speed : 0\n  const keyframeName = `marquee-${scopedId}`\n\n  const from = direction === \"left\" ? \"0%\" : \"-50%\"\n  const to = direction === \"left\" ? \"-50%\" : \"0%\"\n\n  return (\n    <div className={cn(\"overflow-hidden\", className)}>\n      <style>{`\n        @keyframes ${keyframeName} {\n          from { transform: translateX(${from}); }\n          to { transform: translateX(${to}); }\n        }\n      `}</style>\n      <div\n        ref={containerRef}\n        className=\"flex w-max\"\n        style={{\n          animationName: keyframeName,\n          animationDuration: `${duration}s`,\n          animationTimingFunction: \"linear\",\n          animationIterationCount: \"infinite\",\n          animationPlayState: paused ? \"paused\" : \"running\",\n        }}\n        onMouseEnter={() => pauseOnHover && setPaused(true)}\n        onMouseLeave={() => pauseOnHover && setPaused(false)}\n      >\n        <div className=\"flex shrink-0\">{children}</div>\n        <div className=\"flex shrink-0\" aria-hidden>\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\nMarquee.displayName = \"Marquee\"\n\nexport { Marquee }\nexport type { MarqueeProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}