{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marquee",
  "files": [
    {
      "path": "ui/marquee/Marquee.astro",
      "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/marquee/Marquee.astro directly.\n/**\n * @component Marquee\n * @title Marquee\n * @description A horizontally auto-scrolling container for repeating content like logos or messages.\n * @status stable\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-7717&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n *\n * <Marquee class=\"dark:invert\">\n *   <img src=\"/demo/logo/sonos.svg\" alt=\"Netflix\" class=\"h-5 self-center mx-10\"/>\n *   <img src=\"/demo/logo/uber.svg\" alt=\"Uber\" class=\"h-5 self-center mx-10\"/>\n *   <img src=\"/demo/logo/visa.svg\" alt=\"Visa\" class=\"h-5 self-center mx-10\"/>\n *   <img src=\"/demo/logo/coca-cola.svg\" alt=\"Coca-Cola\" class=\"h-6 self-center mx-10\"/>\n *   <img src=\"/demo/logo/nike.svg\" alt=\"Nike\" class=\"h-5 self-center mx-10\"/>\n * </Marquee>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Marquee } from '@bejamas/ui/components/marquee';\n * ---\n * <Marquee>\n *   <!-- Your content here -->\n * </Marquee>\n * ```\n *\n * @examples\n *\n * ### Direction\n *\n * <div class=\"flex gap-6 h-60\">\n *   <Marquee class=\"[&_.marquee-content]:space-y-8 space-y-8\" direction=\"top\">\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/sonos.svg\" alt=\"Sonos\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/uber.svg\" alt=\"Uber\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/visa.svg\" alt=\"Visa\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/coca-cola.svg\" alt=\"Coca-Cola\" class=\"h-6 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/nike.svg\" alt=\"Nike\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *   </Marquee>\n *   <Marquee class=\"[&_.marquee-content]:space-y-8 space-y-8\" direction=\"bottom\">\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/sonos.svg\" alt=\"Sonos\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/uber.svg\" alt=\"Uber\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/visa.svg\" alt=\"Visa\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/coca-cola.svg\" alt=\"Coca-Cola\" class=\"h-6 self-center mx-10 dark:invert\"/></div>\n *     <div class=\"bg-muted px-10 py-7 rounded-lg flex items-center justify-center\"><img src=\"/demo/logo/nike.svg\" alt=\"Nike\" class=\"h-5 self-center mx-10 dark:invert\"/></div>\n *   </Marquee>\n * </div>\n */\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props {\n  direction?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  time?: number | string;\n  variant?: \"gradient\" | \"solid\";\n  class?: string;\n}\n\nconst {\n  class: className = \"\",\n  direction = \"left\",\n  time = 30,\n  variant = \"gradient\",\n  ...props\n} = Astro.props as Props;\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=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)] [&[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)]\",\n      solid: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"gradient\",\n  },\n});\n---\n\n<div\n  data-marquee\n  data-direction={direction}\n  class={cn(\n    \"\",\n    // container utilities\n    \"group flex overflow-hidden w-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col\",\n    marqueeVariants({ variant }),\n    className,\n  )}\n  style={` --duration:${typeof time === \"number\" ? `${time}s` : time};`}\n  {...props}\n>\n  <div\n    class={cn(\n      \"\",\n      \"marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]\",\n      direction === \"top\" && \"flex-col\",\n      direction === \"bottom\" && \"flex-col\",\n    )}\n  >\n    <slot />\n  </div>\n  <div\n    class={cn(\n      \"\",\n      \"marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]\",\n      direction === \"top\" && \"flex-col\",\n      direction === \"bottom\" && \"flex-col\",\n    )}\n    aria-hidden=\"true\"\n  >\n    <slot />\n  </div>\n</div>\n",
      "type": "registry:ui"
    },
    {
      "path": "ui/marquee/index.ts",
      "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/marquee/index.ts directly.\nexport { default as Marquee } from \"./Marquee.astro\";\n\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}