{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ticker-tape",
  "title": "Ticker Tape",
  "description": "Marquee-style scrolling symbol tape with price and change badges.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/ticker-tape/ticker-tape.tsx",
      "content": "import * as React from \"react\";\n\nimport { ArrowDownRight, ArrowUpRight, Dot } from \"lucide-react\";\n\nimport { formatChange } from \"@vllnt/ui\";\nimport { cn } from \"@vllnt/ui\";\nimport { Badge } from \"@vllnt/ui\";\n\nexport type TickerTapeItem = {\n  change: number;\n  price: number | string;\n  symbol: string;\n  volume?: string;\n};\n\nexport type TickerTapeProps = {\n  items: TickerTapeItem[];\n  pauseOnHover?: boolean;\n  speedSeconds?: number;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst tickerTapeKeyframes = `\n@keyframes ticker-tape-scroll {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(-50%);\n  }\n}\n`;\n\nfunction formatPrice(price: number | string) {\n  return typeof price === \"number\" ? price.toLocaleString() : price;\n}\n\nfunction TickerTapeRow({ items }: { items: TickerTapeItem[] }) {\n  return (\n    <div className=\"flex min-w-max items-center gap-3 p-3\">\n      {items.map((item) => {\n        const isPositive = item.change >= 0;\n        const TrendIcon = isPositive ? ArrowUpRight : ArrowDownRight;\n\n        return (\n          <div\n            className=\"flex min-w-[12rem] items-center gap-3 rounded-full border border-border/70 bg-background/80 px-3 py-2 shadow-sm\"\n            key={`${item.symbol}-${item.price}-${item.change}`}\n          >\n            <div className=\"flex min-w-0 flex-col\">\n              <span className=\"text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground\">\n                {item.symbol}\n              </span>\n              <span className=\"truncate text-sm font-semibold text-foreground\">\n                {formatPrice(item.price)}\n              </span>\n            </div>\n            <Badge\n              className={cn(\n                \"ml-auto gap-1 rounded-full border px-2 py-0.5 text-[11px] tabular-nums\",\n                isPositive\n                  ? \"border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\"\n                  : \"border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400\",\n              )}\n              variant=\"outline\"\n            >\n              <TrendIcon className=\"size-3\" />\n              {formatChange(item.change)}\n            </Badge>\n            {item.volume ? (\n              <span className=\"hidden items-center text-xs text-muted-foreground sm:inline-flex\">\n                <Dot className=\"size-3.5\" />\n                {item.volume}\n              </span>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport const TickerTape = ({\n  className,\n  items,\n  pauseOnHover = true,\n  ref: reference,\n  speedSeconds = 28,\n  ...props\n}: TickerTapeProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-label=\"TickerTape\"\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border bg-card/70 backdrop-blur-sm\",\n        className,\n      )}\n      ref={reference}\n      role=\"region\"\n      {...props}\n    >\n      <style>{tickerTapeKeyframes}</style>\n      <div\n        className={cn(\n          \"flex w-max items-stretch\",\n          pauseOnHover && \"hover:[animation-play-state:paused]\",\n        )}\n        style={{\n          animationDuration: `${speedSeconds}s`,\n          animationIterationCount: \"infinite\",\n          animationName: \"ticker-tape-scroll\",\n          animationTimingFunction: \"linear\",\n        }}\n      >\n        <TickerTapeRow items={items} />\n        <div aria-hidden=\"true\">\n          <TickerTapeRow items={items} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nTickerTape.displayName = \"TickerTape\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}