51: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"] 52: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"] 53:T2c07,"use client"; import { motion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; const controlCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; const FILL_DURATION = 0.5; const FILL_EASE = [0.16, 1, 0.3, 1] as const; type ButtonHTMLAttributesForMotion = Omit< React.ButtonHTMLAttributes, | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" >; function getCoverDiameter(width: number, height: number, x: number, y: number) { return Math.ceil( 2 * Math.max( Math.hypot(x, y), Math.hypot(width - x, y), Math.hypot(x, height - y), Math.hypot(width - x, height - y) ) ); } function assignRef(ref: React.ForwardedRef, value: T | null) { if (typeof ref === "function") { ref(value); return; } if (ref) { ref.current = value; } } function hasTextContent(node: React.ReactNode): boolean { if (typeof node === "string" || typeof node === "number") { return String(node).trim().length > 0; } if (Array.isArray(node)) { return node.some(hasTextContent); } if (React.isValidElement<{ children?: React.ReactNode }>(node)) { return hasTextContent(node.props.children); } return false; } type RadialButtonProps = ButtonHTMLAttributesForMotion & { children?: React.ReactNode; loading?: boolean; }; const RadialButton = React.forwardRef( ( { children, className, disabled = false, loading = false, type = "button", onBlur, onClick, onFocus, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerEnter, onPointerLeave, onPointerUp, ...props }, ref ) => { const buttonRef = React.useRef(null); const isDisabled = Boolean(disabled || loading); const [hovered, setHovered] = React.useState(false); const [isPressed, setIsPressed] = React.useState(false); const [origin, setOrigin] = React.useState({ x: 0, y: 0 }); const [coverSize, setCoverSize] = React.useState(0); const ariaLabel = props["aria-label"]; const ariaLabelledBy = props["aria-labelledby"]; React.useEffect(() => { if (process.env.NODE_ENV === "production") { return; } if ( hasTextContent(children) || ariaLabel?.trim() || ariaLabelledBy?.trim() ) { return; } console.warn( "RadialButton: provide visible label text or aria-label / aria-labelledby so the control has an accessible name." ); }, [ariaLabel, ariaLabelledBy, children]); const updateOrigin = React.useCallback((x: number, y: number) => { const node = buttonRef.current; if (!node) return; const rect = node.getBoundingClientRect(); setOrigin({ x, y }); setCoverSize(getCoverDiameter(rect.width, rect.height, x, y)); }, []); const updateOriginFromPointer = React.useCallback( (event: React.PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect(); updateOrigin(event.clientX - rect.left, event.clientY - rect.top); }, [updateOrigin] ); const updateOriginFromCenter = React.useCallback(() => { const node = buttonRef.current; if (!node) return; const rect = node.getBoundingClientRect(); updateOrigin(rect.width / 2, rect.height / 2); }, [updateOrigin]); const showFill = !isDisabled && (hovered || isPressed); React.useLayoutEffect(() => { const node = buttonRef.current; if (!(node && showFill)) return; const measure = () => { const rect = node.getBoundingClientRect(); setCoverSize( getCoverDiameter(rect.width, rect.height, origin.x, origin.y) ); }; measure(); const observer = new ResizeObserver(measure); observer.observe(node); const fonts = document.fonts; if (fonts?.ready) { fonts.ready.then(measure).catch(() => undefined); } return () => observer.disconnect(); }, [showFill, origin.x, origin.y]); const fillTransition = { duration: FILL_DURATION, ease: FILL_EASE }; const setMergedRef = React.useCallback( (node: HTMLButtonElement | null) => { buttonRef.current = node; assignRef(ref, node); }, [ref] ); return ( { onBlur?.(event); setIsPressed(false); if (!event.defaultPrevented) { setHovered(false); } }} onClick={onClick} onFocus={(event) => { onFocus?.(event); if (isDisabled || event.defaultPrevented) return; if (event.currentTarget.matches(":focus-visible")) { updateOriginFromCenter(); setHovered(true); } }} onKeyDown={(event) => { onKeyDown?.(event); if ( event.defaultPrevented || isDisabled || event.repeat || (event.key !== " " && event.key !== "Enter") ) { return; } if (event.key === " ") { event.preventDefault(); } updateOriginFromCenter(); setIsPressed(true); setHovered(true); }} onKeyUp={(event) => { onKeyUp?.(event); if (event.key === " " || event.key === "Enter") { setIsPressed(false); if (!event.currentTarget.matches(":focus-visible")) { setHovered(false); } } }} onPointerCancel={(event) => { onPointerCancel?.(event); setIsPressed(false); }} onPointerDown={(event) => { onPointerDown?.(event); if (event.defaultPrevented || isDisabled || event.button !== 0) { return; } updateOriginFromPointer(event); setIsPressed(true); setHovered(true); }} onPointerEnter={(event) => { onPointerEnter?.(event); if (isDisabled || event.defaultPrevented) return; updateOriginFromPointer(event); setHovered(true); }} onPointerLeave={(event) => { onPointerLeave?.(event); setHovered(false); setIsPressed(false); }} onPointerUp={(event) => { onPointerUp?.(event); setIsPressed(false); }} ref={setMergedRef} type={type} whileTap={isDisabled ? undefined : { scale: 0.96 }} > 0 ? 1 : 0 }} aria-hidden className="pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground dark:bg-neutral-50" initial={false} style={{ height: coverSize, left: origin.x, top: origin.y, width: coverSize, }} transition={fillTransition} /> {children} ); } ); RadialButton.displayName = "RadialButton"; export { RadialButton }; export type { RadialButtonProps }; 50:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"radial-button.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]