{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "files": [
    {
      "path": "src/components/ui/marquee/marquee.astro",
      "content": "---\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = {\n  direction?: \"left\" | \"right\" | \"top\" | \"bottom\"\n  duration?: number | string\n  gap?: string\n  infinite?: boolean\n  pauseOnHover?: boolean\n  time?: number | string\n  variant?: \"gradient\" | \"solid\"\n  class?: string\n  style?: string\n}\n\nconst {\n  class: className = \"\",\n  direction = \"left\",\n  duration,\n  gap = \"1rem\",\n  infinite = true,\n  pauseOnHover = false,\n  style,\n  time = 30,\n  variant = \"gradient\",\n  ...props\n} = Astro.props\n\nconst resolvedDuration = duration ?? time\nconst styleValue = `--duration:${\n  typeof resolvedDuration === \"number\"\n    ? `${resolvedDuration}s`\n    : resolvedDuration\n}; --gap:${gap}; ${style ?? \"\"}`\nconst contentClass = cn(\n  \"marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]\",\n  infinite &&\n    \"animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]\",\n  direction === \"top\" && \"flex-col\",\n  direction === \"bottom\" && \"flex-col\"\n)\n\nconst marqueeVariants = cva(\"relative w-full\", {\n  variants: {\n    variant: {\n      gradient:\n        \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]\",\n      solid: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"gradient\",\n  },\n})\n---\n\n<div\n  data-marquee\n  data-direction={direction}\n  data-pause-on-hover={pauseOnHover ? \"true\" : undefined}\n  class={cn(\n    \"\",\n    // container utilities\n    \"group flex w-full gap-[var(--gap)] overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col\",\n    marqueeVariants({ variant }),\n    className\n  )}\n  style={styleValue}\n  {...props}\n>\n  <div class={contentClass}>\n    <slot />\n  </div>\n  {\n    infinite && (\n      <div class={contentClass} aria-hidden=\"true\">\n        <slot />\n      </div>\n    )\n  }\n</div>\n\n<style>\n  @keyframes marquee-x {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-100% - var(--gap)));\n    }\n  }\n  @keyframes marquee-y {\n    from {\n      transform: translateY(0);\n    }\n    to {\n      transform: translateY(calc(-100% - var(--gap)));\n    }\n  }\n\n  [data-marquee][data-pause-on-hover=\"true\"]:hover .marquee-content {\n    animation-play-state: paused;\n  }\n</style>\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/marquee/index.ts",
      "content": "export { default as Marquee } from \"./marquee.astro\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}