{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/marquee/Marquee.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Scroll axis. */\n  orientation?: 'horizontal' | 'vertical'\n  /** Travel direction. */\n  direction?: 'left' | 'right' | 'up' | 'down'\n  /** Animation duration in seconds. Lower = faster. */\n  speed?: number\n  /** Pause the animation on hover. */\n  pauseOnHover?: boolean\n  /** Gap between repeated content groups (px). */\n  gap?: number\n  /** Number of times the slot content is duplicated for a seamless loop. */\n  repeat?: number\n  /** Hard pause the animation. */\n  paused?: boolean\n}\n\n/* ------------------------------------------------------------------ */\n/* Marquee keyframes                                                   */\n/* Ported from Marquee.vue's non-scoped <style> block. Injected as a   */\n/* global <style> so the inline animationName can resolve the          */\n/* @keyframes (scoped hashes would break the name lookup).             */\n/* ------------------------------------------------------------------ */\nconst marqueeCss = `\n@keyframes uipkge-marquee-x {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes uipkge-marquee-y {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-slot='marquee-track'] {\n    animation: none !important;\n  }\n}\n`\n\nfunction MarqueeStyle() {\n  return <style dangerouslySetInnerHTML={{ __html: marqueeCss }} />\n}\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  (\n    {\n      className,\n      orientation = 'horizontal',\n      direction = 'left',\n      speed = 20,\n      pauseOnHover = false,\n      gap = 16,\n      repeat = 2,\n      paused = false,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const isVertical = orientation === 'vertical'\n    const reverse = direction === 'right' || direction === 'down'\n\n    const containerClass = React.useMemo(\n      () =>\n        cn(\n          'group flex overflow-hidden',\n          isVertical ? 'flex-col' : 'flex-row',\n          pauseOnHover ? 'hover:[&>[data-slot=marquee-track]]:[animation-play-state:paused]' : '',\n          className,\n        ),\n      [isVertical, pauseOnHover, className],\n    )\n\n    const trackClass = React.useMemo(\n      () => cn('flex shrink-0', isVertical ? 'flex-col' : 'flex-row', paused ? '![animation-play-state:paused]' : ''),\n      [isVertical, paused],\n    )\n\n    const trackStyle = React.useMemo<React.CSSProperties>(\n      () => ({\n        gap: 'var(--marquee-gap)',\n        animationName: isVertical ? 'uipkge-marquee-y' : 'uipkge-marquee-x',\n        animationDuration: `${speed}s`,\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n        animationDirection: reverse ? 'reverse' : 'normal',\n      }),\n      [isVertical, speed, reverse],\n    )\n\n    const containerStyle = React.useMemo<React.CSSProperties>(\n      () => ({ '--marquee-gap': `${gap}px`, ...style }) as React.CSSProperties,\n      [gap, style],\n    )\n\n    return (\n      <>\n        <MarqueeStyle />\n        <div\n          ref={ref}\n          data-uipkge=\"\"\n          data-slot=\"marquee\"\n          data-orientation={orientation}\n          data-direction={direction}\n          className={containerClass}\n          style={containerStyle}\n          {...props}\n        >\n          {Array.from({ length: repeat }, (_, i) => (\n            <div\n              key={i}\n              data-slot=\"marquee-track\"\n              className={trackClass}\n              style={trackStyle}\n              aria-hidden={i > 1 ? true : undefined}\n            >\n              {children}\n            </div>\n          ))}\n        </div>\n      </>\n    )\n  },\n)\nMarquee.displayName = 'Marquee'\n\nexport { Marquee }\n",
      "type": "registry:ui",
      "target": "~/components/ui/marquee/Marquee.tsx"
    },
    {
      "path": "packages/registry-react/components/marquee/index.ts",
      "content": "export { Marquee, type MarqueeProps } from './Marquee'\n",
      "type": "registry:ui",
      "target": "~/components/ui/marquee/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Continuously auto-scrolling content. Scrolls horizontally or vertically in any direction, with configurable speed, gap, repeat count for a seamless loop, pause-on-hover, and a hard pause prop. Respects prefers-reduced-motion.",
  "categories": [
    "display"
  ]
}