{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-marquee",
  "title": "Marquee",
  "description": "Carrossel de rolagem contínua para logos de clientes, depoimentos ou cartões de dados.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ds/ds-marquee.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// ── Types ──\n\nexport interface MarqueeProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof marqueeVariants> {\n  pauseOnHover?: boolean\n  fadeEdges?: boolean\n  repeat?: number\n}\n\n// ── Variants ──\n\nexport const marqueeVariants = cva(\"group relative flex overflow-hidden p-2\", {\n  variants: {\n    direction: {\n      left: \"flex-row\",\n      right: \"flex-row\",\n      up: \"flex-col\",\n      down: \"flex-col\",\n    },\n    speed: {\n      slow: \"[--duration:40s]\",\n      normal: \"[--duration:25s]\",\n      fast: \"[--duration:15s]\",\n    },\n  },\n  defaultVariants: {\n    direction: \"left\",\n    speed: \"normal\",\n  },\n})\n\n// ── Component ──\n\nexport const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  (\n    {\n      className,\n      direction = \"left\",\n      speed = \"normal\",\n      pauseOnHover = true,\n      fadeEdges = true,\n      repeat = 4,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const isVertical = direction === \"up\" || direction === \"down\"\n    const isReverse = direction === \"right\" || direction === \"down\"\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label=\"Marquee\"\n        className={cn(\n          marqueeVariants({ direction, speed }),\n          fadeEdges &&\n            (isVertical\n              ? \"[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]\"\n              : \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]\"),\n          className\n        )}\n        {...props}\n      >\n        {Array.from({ length: repeat }).map((_, i) => (\n          <div\n            key={i}\n            aria-hidden={i > 0}\n            className={cn(\n              \"flex shrink-0 justify-around gap-4 [animation-duration:var(--duration)] [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]\",\n              isVertical\n                ? \"flex-col [animation-name:marquee-y]\"\n                : \"flex-row [animation-name:marquee-x]\",\n              isReverse && \"[animation-direction:reverse]\",\n              pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n            )}\n          >\n            {children}\n          </div>\n        ))}\n      </div>\n    )\n  }\n)\nMarquee.displayName = \"Marquee\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}