50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2137,"use client"; import { cn } from "cn"; import * as React from "react"; type MarqueeProps = React.ComponentPropsWithoutRef<"div"> & { /** * Duration of one complete loop, in seconds. Lower values move faster. */ speed?: number; /** * Direction in which the content travels. */ direction?: "left" | "right"; /** * Pause the loop while the pointer is over the marquee. */ pauseOnHover?: boolean; /** * Gap between items and repeated content groups. Accepts a CSS length or a * number of pixels. */ gap?: number | string; /** * Add a soft fade at the edges of the viewport while content is moving. */ fade?: boolean; /** * Optional CSS color used by the edge fades. When omitted, the fade uses a * mask so it automatically blends into the surface behind the marquee. Set * it to use an explicitly painted fade instead. */ fadeColor?: string; /** * Only animate when the natural content width is wider than the viewport. */ onlyOnOverflow?: boolean; }; type MarqueeDirection = NonNullable; type MarqueeStyle = React.CSSProperties & { "--marquee-duration"?: string; "--marquee-fade-color"?: string; "--marquee-gap"?: string; "--marquee-distance"?: string; }; type MarqueeMetrics = { copyCount: number; distance: number; isOverflowing: boolean; measured: boolean; }; const defaultMetrics: MarqueeMetrics = { copyCount: 2, distance: 0, isOverflowing: false, measured: false, }; const MARQUEE_STYLES = ` @keyframes tw-marquee-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--marquee-distance, 0px) * -1), 0, 0); } } @keyframes tw-marquee-right { from { transform: translate3d(calc(var(--marquee-distance, 0px) * -1), 0, 0); } to { transform: translate3d(0, 0, 0); } } [data-slot="marquee-track"] { display: flex; gap: var(--marquee-gap, 2rem); min-width: max-content; width: max-content; } [data-slot="marquee"][data-animating="true"] [data-slot="marquee-track"] { animation-duration: var(--marquee-duration, 30s); animation-iteration-count: infinite; animation-name: tw-marquee-left; animation-play-state: running; animation-timing-function: linear; will-change: transform; } [data-slot="marquee"][data-direction="right"][data-animating="true"] [data-slot="marquee-track"] { animation-name: tw-marquee-right; } [data-slot="marquee"][data-animating="false"] [data-slot="marquee-track"] { animation: none; transform: none; } [data-slot="marquee"][data-pause-on-hover="true"][data-animating="true"]:hover [data-slot="marquee-track"] { animation-play-state: paused; } [data-slot="marquee"][data-animating="false"] [data-copy="true"] { visibility: hidden; } [data-slot="marquee"][data-fade="true"][data-fade-mode="auto"][data-animating="true"] { -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } [data-slot="marquee"][data-fade="true"][data-fade-mode="custom"][data-animating="true"]::before, [data-slot="marquee"][data-fade="true"][data-fade-mode="custom"][data-animating="true"]::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 2rem; pointer-events: none; } [data-slot="marquee"][data-fade="true"][data-fade-mode="custom"][data-animating="true"]::before { left: 0; background: linear-gradient(to right, var(--marquee-fade-color, var(--background)), transparent); } [data-slot="marquee"][data-fade="true"][data-fade-mode="custom"][data-animating="true"]::after { right: 0; background: linear-gradient(to left, var(--marquee-fade-color, var(--background)), transparent); } @media (prefers-reduced-motion: reduce) { [data-slot="marquee"] [data-slot="marquee-track"] { animation: none !important; transform: none !important; } [data-slot="marquee"] [data-copy="true"] { visibility: hidden; } [data-slot="marquee"][data-fade="true"][data-fade-mode="auto"] { -webkit-mask-image: none !important; mask-image: none !important; } [data-slot="marquee"][data-fade="true"][data-fade-mode="custom"]::before, [data-slot="marquee"][data-fade="true"][data-fade-mode="custom"]::after { display: none; } } `; const getCssLength = (value: number | string) => typeof value === "number" ? `${Math.max(0, value)}px` : value; const Marquee = React.forwardRef(function Marquee( { children, className, direction = "left", fade = true, fadeColor, gap = "2rem", onlyOnOverflow = true, pauseOnHover = false, speed = 30, style, ...props }, forwardedRef ) { const viewportRef = React.useRef(null); const firstGroupRef = React.useRef(null); const secondGroupRef = React.useRef(null); const [metrics, setMetrics] = React.useState(defaultMetrics); const gapValue = getCssLength(gap); const duration = `${Math.max(0.1, speed)}s`; const setViewportRef = React.useCallback( (node: HTMLDivElement | null) => { viewportRef.current = node; if (typeof forwardedRef === "function") { forwardedRef(node); } else if (forwardedRef) { forwardedRef.current = node; } }, [forwardedRef] ); const measure = React.useCallback(() => { const viewport = viewportRef.current; const firstGroup = firstGroupRef.current; const secondGroup = secondGroupRef.current; if (!viewport || !firstGroup || !secondGroup) { return; } const firstRect = firstGroup.getBoundingClientRect(); const secondRect = secondGroup.getBoundingClientRect(); const distance = Math.max(1, Math.ceil(secondRect.left - firstRect.left)); const isOverflowing = firstRect.width > viewport.clientWidth + 1; const copyCount = onlyOnOverflow ? 2 : Math.max(2, Math.ceil(viewport.clientWidth / distance) + 2); setMetrics((current) => { if ( current.copyCount === copyCount && current.distance === distance && current.isOverflowing === isOverflowing && current.measured ) { return current; } return { copyCount, distance, isOverflowing, measured: true, }; }); }, [onlyOnOverflow]); React.useEffect(() => { const viewport = viewportRef.current; const firstGroup = firstGroupRef.current; if (!viewport || !firstGroup || typeof ResizeObserver === "undefined") { return; } const observer = new ResizeObserver(measure); observer.observe(viewport); observer.observe(firstGroup); measure(); return () => observer.disconnect(); }, [gapValue, measure]); const isAnimating = metrics.measured && (!onlyOnOverflow || metrics.isOverflowing); const marqueeStyle: MarqueeStyle = { ...style, "--marquee-distance": `${metrics.distance}px`, "--marquee-duration": duration, ...(fadeColor === undefined ? {} : { "--marquee-fade-color": fadeColor }), "--marquee-gap": gapValue, }; return (

{Array.from({ length: metrics.copyCount }, (_, index) => (

0 ? true : undefined} className="flex shrink-0 items-center gap-[var(--marquee-gap)] whitespace-nowrap" data-copy={index > 0 ? "true" : undefined} data-slot="marquee-group" key={index} ref={ index === 0 ? firstGroupRef : index === 1 ? secondGroupRef : undefined } > {children}

))}

); }); Marquee.displayName = "Marquee"; export { Marquee }; export type { MarqueeDirection, MarqueeProps }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/marquee.tsx","content":"$52","type":"registry:ui","target":"components/ui/marquee.tsx"}],"className":"h-[70svh] min-h-80"}]]}]