52: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/3j06ow7w40nxu.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"] 53: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/3j06ow7w40nxu.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"] 54:T20e1,"use client"; import { useEffect, useRef, useState, type ComponentProps, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { useMediaQuery } from "@/registry/default/hooks/use-media-query"; import { cn } from "@/registry/default/lib/utils"; const INTERACTIVE = "a[href], button, [role=button], input, select, textarea, label, summary, [data-cursor]"; const HIDE_NATIVE_CURSOR = "html[data-custom-cursor], html[data-custom-cursor] * { cursor: none !important; }"; type CustomCursorState = "default" | "hover" | "pressed" | "hidden"; interface CustomCursorProps extends Omit, "children"> { /** Diameter of the ring at rest, in px. */ size?: number; /** Diameter of the ring over something interactive, in px. */ hoverSize?: number; /** Diameter of the dot that sits exactly on the pointer, in px. 0 leaves it out. */ dotSize?: number; /** From 0 to 1: how much of the way to the pointer the ring catches up each frame. 1 sticks to it. */ smoothing?: number; /** Invert what is underneath (`mix-blend-difference`), so it shows on light and dark alike. */ blend?: boolean; /** Hide the system cursor while this one is shown. */ hideNativeCursor?: boolean; /** What counts as interactive: the ring grows over it. */ interactiveSelector?: string; /** Content shown inside the ring over an element with `data-cursor=""`. */ labels?: Record; } /** * A cursor of your own: a dot that sits on the pointer and a ring that * trails it, growing over links and buttons and showing a label over * elements marked `data-cursor`. It only appears for a mouse or trackpad * (`(hover: hover) and (pointer: fine)`) without `prefers-reduced-motion`; * everyone else keeps the system cursor, untouched. It is decorative and * hidden from screen readers, never takes pointer events, and moves by * writing transforms once per frame, stopping when the pointer rests. * `data-state` is "default", "hover", "pressed", or "hidden" while the * pointer is outside the window. * * @example * * … */ function CustomCursor(props: CustomCursorProps) { const fine = useMediaQuery("(hover: hover) and (pointer: fine)"); const reduced = useMediaQuery("(prefers-reduced-motion: reduce)"); if (!fine || reduced) return null; return ; } function CursorFollower({ size = 12, hoverSize = 40, dotSize = 4, smoothing = 0.2, blend = true, hideNativeCursor = true, interactiveSelector = INTERACTIVE, labels, className, ...props }: CustomCursorProps) { const dot = useRef(null); const ring = useRef(null); const [visible, setVisible] = useState(false); const [hovering, setHovering] = useState(false); const [pressed, setPressed] = useState(false); const [labelKey, setLabelKey] = useState(null); const settings = useRef({ smoothing, interactiveSelector }); useEffect(() => { settings.current = { smoothing, interactiveSelector }; }); useEffect(() => { if (!hideNativeCursor) return; const html = document.documentElement; html.setAttribute("data-custom-cursor", ""); return () => html.removeAttribute("data-custom-cursor"); }, [hideNativeCursor]); useEffect(() => { const target = { x: 0, y: 0 }; const trail = { x: 0, y: 0 }; let seen = false; let frame = 0; const place = () => { if (dot.current) { dot.current.style.transform = `translate3d(${target.x}px, ${target.y}px, 0) translate(-50%, -50%)`; } if (ring.current) { ring.current.style.transform = `translate3d(${trail.x}px, ${trail.y}px, 0) translate(-50%, -50%)`; } }; const tick = () => { const factor = Math.min(Math.max(settings.current.smoothing, 0.01), 1); trail.x += (target.x - trail.x) * factor; trail.y += (target.y - trail.y) * factor; const resting = Math.abs(target.x - trail.x) < 0.1 && Math.abs(target.y - trail.y) < 0.1; if (resting) { trail.x = target.x; trail.y = target.y; } place(); frame = resting ? 0 : requestAnimationFrame(tick); }; const onMove = (event: PointerEvent) => { if (event.pointerType === "touch") { setVisible(false); return; } target.x = event.clientX; target.y = event.clientY; if (!seen) { // Start on the pointer instead of flying in from the corner. seen = true; trail.x = target.x; trail.y = target.y; } setVisible(true); if (!frame) frame = requestAnimationFrame(tick); }; const onOver = (event: PointerEvent) => { const element = event.target instanceof Element ? event.target : null; setHovering(Boolean(element?.closest(settings.current.interactiveSelector))); setLabelKey(element?.closest("[data-cursor]")?.getAttribute("data-cursor") ?? null); }; const onOut = (event: PointerEvent) => { // No element to go to: the pointer left the window. if (!event.relatedTarget) setVisible(false); }; const onDown = () => setPressed(true); const onUp = () => setPressed(false); const onBlur = () => { setVisible(false); setPressed(false); }; window.addEventListener("pointermove", onMove, { passive: true }); window.addEventListener("pointerdown", onDown, { passive: true }); window.addEventListener("pointerup", onUp, { passive: true }); window.addEventListener("pointercancel", onUp, { passive: true }); document.addEventListener("pointerover", onOver, { passive: true }); document.addEventListener("pointerout", onOut, { passive: true }); window.addEventListener("blur", onBlur); return () => { cancelAnimationFrame(frame); window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerdown", onDown); window.removeEventListener("pointerup", onUp); window.removeEventListener("pointercancel", onUp); document.removeEventListener("pointerover", onOver); document.removeEventListener("pointerout", onOut); window.removeEventListener("blur", onBlur); }; }, []); const state: CustomCursorState = !visible ? "hidden" : pressed ? "pressed" : hovering ? "hover" : "default"; const label = labelKey !== null ? labels?.[labelKey] : undefined; // The ring is drawn at its hover size and scaled down, so it grows with a // transform; the border is scaled back up to stay 1px. const scale = (hovering ? 1 : size / Math.max(hoverSize, 1)) * (pressed ? 0.8 : 1); return createPortal(

{hideNativeCursor ? : null}

{label !== undefined ? ( {label} ) : null}

{dotSize > 0 ? (

) : null}

, document.body ); } export { CustomCursor, type CustomCursorProps, type CustomCursorState }; 51:["$","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":[null,["$","$L52",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-media-query"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/custom-cursor.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]