{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "title": "Marquee",
  "description": "A ruled band of display type that pauses on hover or focus.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/marquee.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst SPEED_SECONDS = 22\nconst SEPARATOR = \"✶\"\n\ntype MarqueeProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  items: string[]\n  /** Seconds for one full loop. */\n  speed?: number\n}\n\nexport function Marquee({ items, speed = SPEED_SECONDS, className, style, ...props }: MarqueeProps) {\n  const loop = [...items, ...items]\n\n  return (\n    <div\n      tabIndex={0}\n      role=\"group\"\n      aria-label={items.join(\", \")}\n      className={cn(\n        \"group spotcheck-focus border-ink overflow-hidden border-y-(length:--rule) font-(family-name:--f-body) whitespace-nowrap\",\n        className,\n      )}\n      style={style}\n      {...props}\n    >\n      <div\n        aria-hidden\n        className=\"inline-flex [animation:spotcheck-marquee_var(--marquee-speed)_linear_infinite] group-hover:[animation-play-state:paused] group-focus:[animation-play-state:paused] motion-reduce:animate-none\"\n        style={{ \"--marquee-speed\": `${speed}s` } as React.CSSProperties}\n      >\n        {loop.map((item, index) => (\n          <span\n            key={index}\n            className=\"spotcheck-heading even:text-accent-ink px-4.5 py-2 text-[34px] leading-none\"\n          >\n            {item} {SEPARATOR}\n          </span>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "motion"
  ],
  "type": "registry:component"
}