{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/marquee.tsx",
      "content": "import { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@workspace/ui/lib/utils\"\n\ninterface MarqueeProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Optional CSS class name to apply custom styles\n   */\n  className?: string\n  /**\n   * Whether to reverse the animation direction\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * Whether to pause the animation on hover\n   * @default false\n   */\n  pauseOnHover?: boolean\n  /**\n   * Content to be displayed in the marquee\n   */\n  children: React.ReactNode\n  /**\n   * Whether to animate vertically instead of horizontally\n   * @default false\n   */\n  vertical?: boolean\n  /**\n   * Number of times to repeat the content\n   * @default 5\n   */\n  repeat?: number\n  /**\n   * Animation speed variant or custom duration in seconds\n   * @default \"normal\"\n   */\n  speed?: \"slow\" | \"normal\" | \"fast\" | number\n  /**\n   * Gap between repeated items (in pixels or any CSS unit)\n   * @default \"6px\"\n   */\n  gap?: string | number\n  /**\n   * Apply fade effect at edges for smoother visual experience\n   * @default true\n   */\n  fade?: boolean\n  /**\n   * Delay before animation starts (in seconds)\n   * @default 0\n   */\n  delay?: number\n  /**\n   * Whether to apply auto-fill to calculate optimal repeat count\n   * @default false\n   */\n  autoFill?: boolean\n}\n\nexport function Marquee({\n  className,\n  reverse = false,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 5,\n  speed = \"normal\",\n  gap = \"6px\",\n  fade = false,\n  delay = 0,\n  autoFill = false,\n  ...props\n}: MarqueeProps) {\n  const speedVariants = {\n    slow: \"[--duration:120s]\",\n    normal: \"[--duration:40s]\",\n    fast: \"[--duration:10s]\",\n  }\n\n  const gapValue = typeof gap === \"number\" ? `${gap}px` : gap\n  const duration = typeof speed === \"number\" ? `${speed}s` : undefined\n  const repeatCount = autoFill ? 10 : repeat\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"group relative flex overflow-hidden p-1\",\n        typeof speed === \"string\" ? speedVariants[speed] : \"\",\n        {\n          \"flex-row\": !vertical,\n          \"flex-col\": vertical,\n        },\n        className\n      )}\n      style={\n        {\n          \"--gap\": gapValue,\n          ...(duration && { \"--duration\": duration }),\n          ...(delay && { \"--delay\": `${delay}s` }),\n        } as React.CSSProperties\n      }\n    >\n      {fade && (\n        <>\n          <div\n            className={cn(\n              \"pointer-events-none absolute z-10\",\n              vertical\n                ? \"inset-x-0 top-0 h-1/6 bg-gradient-to-b from-background\"\n                : \"inset-y-0 left-0 w-1/6 bg-gradient-to-r from-background\"\n            )}\n          />\n          <div\n            className={cn(\n              \"pointer-events-none absolute z-10\",\n              vertical\n                ? \"inset-x-0 bottom-0 h-1/6 bg-gradient-to-t from-background\"\n                : \"inset-y-0 right-0 w-1/6 bg-gradient-to-l from-background\"\n            )}\n          />\n        </>\n      )}\n      {Array(repeatCount)\n        .fill(0)\n        .map((_, i) => (\n          <div\n            key={i}\n            className={cn(\"flex shrink-0 justify-around [gap:var(--gap)]\", {\n              \"animate-marquee flex-row\": !vertical,\n              \"animate-marquee-vertical flex-col\": vertical,\n              \"group-hover:[animation-play-state:paused]\": pauseOnHover,\n              \"[animation-direction:reverse]\": reverse,\n              \"[animation-delay:var(--delay)]\": delay > 0,\n            })}\n          >\n            {children}\n          </div>\n        ))}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}