{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "Auto-scrolling text ticker with neubrutalism styling - a common brutalist design element",
  "dependencies": [],
  "registryDependencies": [
    "@boldkit/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/marquee.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\ninterface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Content to display in the marquee */\n  children: React.ReactNode\n  /** Direction of the marquee animation */\n  direction?: 'left' | 'right'\n  /** Speed of the animation: 'slow' | 'normal' | 'fast' */\n  speed?: 'slow' | 'normal' | 'fast'\n  /** Pause animation on hover */\n  pauseOnHover?: boolean\n  /** Show neubrutalism border styling */\n  bordered?: boolean\n  /** Number of times to repeat the content (for seamless loop) */\n  repeat?: number\n}\n\nconst speedClasses = {\n  slow: 'animate-marquee-slow',\n  normal: 'animate-marquee',\n  fast: 'animate-marquee-fast',\n}\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  (\n    {\n      className,\n      children,\n      direction = 'left',\n      speed = 'normal',\n      pauseOnHover = true,\n      bordered = true,\n      repeat = 4,\n      ...props\n    },\n    ref\n  ) => {\n    // Use the speed-based class for both directions so `speed` is always\n    // honored; flip to a right-scroll via animation-direction (the dedicated\n    // *-reverse speed classes were never defined in the CSS).\n    const animationClass = speedClasses[speed]\n    const animationDirection = direction === 'right' ? 'reverse' : undefined\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex overflow-hidden',\n          bordered && 'border-3 border-foreground bg-background',\n          className\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            'marquee-content flex shrink-0 items-center gap-8 py-3',\n            animationClass,\n            pauseOnHover && 'hover:[animation-play-state:paused]'\n          )}\n          style={{ animationDirection }}\n        >\n          {Array.from({ length: repeat }).map((_, i) => (\n            <React.Fragment key={i}>{children}</React.Fragment>\n          ))}\n        </div>\n        <div\n          className={cn(\n            'marquee-content flex shrink-0 items-center gap-8 py-3',\n            animationClass,\n            pauseOnHover && 'hover:[animation-play-state:paused]'\n          )}\n          style={{ animationDirection }}\n          aria-hidden=\"true\"\n        >\n          {Array.from({ length: repeat }).map((_, i) => (\n            <React.Fragment key={i}>{children}</React.Fragment>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\nMarquee.displayName = 'Marquee'\n\ninterface MarqueeItemProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode\n}\n\nconst MarqueeItem = React.forwardRef<HTMLSpanElement, MarqueeItemProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          'inline-flex items-center gap-2 whitespace-nowrap px-4 text-lg font-bold uppercase tracking-wide',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  }\n)\nMarqueeItem.displayName = 'MarqueeItem'\n\ninterface MarqueeSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Separator character or element */\n  children?: React.ReactNode\n}\n\nconst MarqueeSeparator = React.forwardRef<HTMLSpanElement, MarqueeSeparatorProps>(\n  ({ className, children = '/', ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn('text-2xl font-black text-muted-foreground', className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  }\n)\nMarqueeSeparator.displayName = 'MarqueeSeparator'\n\nexport { Marquee, MarqueeItem, MarqueeSeparator }\n",
      "type": "registry:ui",
      "target": "components/ui/marquee.tsx"
    }
  ],
  "type": "registry:ui"
}