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/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"] 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/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"] 52:T4282,/** * Spectrum UI — ShareButton * * A share trigger that fans out into a row of action buttons. Opening springs * each action out from behind the trigger with a 30ms stagger while the share * icon morphs into an X; closing reverses the stagger. Ships an optional * copy-link action with emerald success feedback, tooltip labels on hover, * keyboard support (focus moves to the first action, Tab and arrow keys * cycle, Escape closes and restores focus) and honors prefers-reduced-motion * with a fade-only expansion. * * Dependencies: framer-motion, lucide-react, @/lib/utils * * @example * , label: "Share on X", onSelect: shareOnX }, * ]} * /> */ "use client" import React, { useCallback, useEffect, useRef, useState } from "react" import { AnimatePresence, motion, useReducedMotion, type Transition, } from "framer-motion" import { Check, Link, X } from "lucide-react" import { cn } from "@/lib/utils" // ─── Types ─────────────────────────────────────────────────────────────────── export interface ShareAction { /** Icon rendered inside the action button, e.g. a lucide icon element */ icon: React.ReactNode /** Tooltip text and accessible name of the action */ label: string /** Fires when the action is clicked */ onSelect: () => void } export interface ShareButtonProps { /** Custom actions fanned out after the built-in copy action. Default [] */ actions?: ShareAction[] /** URL or text for the built-in copy-link first action; omit to hide it */ copyValue?: string /** Side the actions fan out toward. Default "right" */ direction?: "left" | "right" /** Visual size of the trigger; actions are one step smaller. Default "md" */ size?: "sm" | "md" | "lg" /** Accessible name of the trigger. Default "Share" */ label?: string /** Collapse the row shortly after a custom action is selected. Default true */ closeOnSelect?: boolean /** Additional classes merged onto the root element */ className?: string } // ─── Constants ─────────────────────────────────────────────────────────────── /** Snappy micro spring for icon morphs and tooltip pops */ const MICRO_SPRING: Transition = { type: "spring", stiffness: 500, damping: 30 } /** Softer spring for the actions traveling out of / back behind the trigger */ const MOVE_SPRING: Transition = { type: "spring", stiffness: 260, damping: 22 } /** Fade used for everything when prefers-reduced-motion is set */ const REDUCED_FADE: Transition = { duration: 0.15, ease: "easeOut" } /** Delay between neighboring actions while fanning out (seconds) */ const STAGGER_SECONDS = 0.03 /** How long the copy action shows the emerald check (ms) */ const COPY_FEEDBACK_MS = 1500 /** Beat between selecting an action and the row collapsing (ms) */ const CLOSE_ON_SELECT_MS = 150 const SIZES = { sm: { trigger: "h-8 w-8", triggerIcon: 15, action: "h-7 w-7", actionIcon: 13, gap: "gap-1.5", inset: "ml-1.5 mr-1.5", step: 34 }, md: { trigger: "h-10 w-10", triggerIcon: 18, action: "h-9 w-9", actionIcon: 15, gap: "gap-2", inset: "ml-2 mr-2", step: 44 }, lg: { trigger: "h-12 w-12", triggerIcon: 21, action: "h-10 w-10", actionIcon: 17, gap: "gap-2", inset: "ml-2 mr-2", step: 48 }, } as const /** Shared neutral round icon-button look for the trigger and every action */ const BUTTON_BASE_CLASSES = cn( "relative inline-flex touch-manipulation select-none items-center justify-center rounded-full border transition-colors", "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-100", "dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800", "shadow-[0px_1px_2px_0px_rgba(0,0,0,0.04),0px_2px_4px_0px_rgba(0,0,0,0.04)] dark:shadow-none", "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 dark:focus-visible:ring-neutral-300", ) /** Inline share-nodes glyph so the collapsed trigger has zero icon deps */ function ShareIcon({ size }: { size: number }) { return ( ) } // ─── Component ─────────────────────────────────────────────────────────────── export function ShareButton({ actions = [], copyValue, direction = "right", size = "md", label = "Share", closeOnSelect = true, className, }: ShareButtonProps) { const shouldReduceMotion = useReducedMotion() const [open, setOpen] = useState(false) const [copied, setCopied] = useState(false) const [hoveredIndex, setHoveredIndex] = useState(null) const [focusedIndex, setFocusedIndex] = useState(null) const rootRef = useRef(null) const triggerRef = useRef(null) const actionRefs = useRef>([]) const copyTimerRef = useRef | null>(null) const closeTimerRef = useRef | null>(null) const sizes = SIZES[size] // +1 slot for the built-in copy action when copyValue is provided const itemCount = actions.length + (copyValue !== undefined ? 1 : 0) // Fanning right means actions travel +x away from the trigger (and back -x) const directionSign = direction === "right" ? 1 : -1 const closeMenu = useCallback((restoreFocus: boolean) => { setOpen(false) setHoveredIndex(null) setFocusedIndex(null) if (restoreFocus) triggerRef.current?.focus() }, []) const handleTriggerClick = useCallback(() => { if (open) { closeMenu(false) return } // Fresh copy state on every open so reopening shows the link icon again if (copyTimerRef.current) clearTimeout(copyTimerRef.current) setCopied(false) setOpen(true) }, [open, closeMenu]) const handleCopy = useCallback(async () => { if (copyValue === undefined) return try { await navigator.clipboard.writeText(copyValue) setCopied(true) if (copyTimerRef.current) clearTimeout(copyTimerRef.current) copyTimerRef.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS) } catch { // Clipboard unavailable (permissions, insecure context): fail silently } }, [copyValue]) const handleActionSelect = useCallback( (action: ShareAction) => { action.onSelect() if (!closeOnSelect) return if (closeTimerRef.current) clearTimeout(closeTimerRef.current) closeTimerRef.current = setTimeout( () => closeMenu(true), CLOSE_ON_SELECT_MS, ) }, [closeOnSelect, closeMenu], ) // Escape closes from anywhere inside the component and returns focus const handleRootKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key !== "Escape" || !open) return event.stopPropagation() closeMenu(true) }, [open, closeMenu], ) // Tab / Shift+Tab cycle the actions; arrow keys follow the visual order const handleMenuKeyDown = useCallback( (event: React.KeyboardEvent) => { const nodes = actionRefs.current.filter( (node): node is HTMLButtonElement => node !== null, ) if (nodes.length === 0) return const currentIndex = nodes.indexOf( document.activeElement as HTMLButtonElement, ) let nextIndex: number | null = null if (event.key === "Tab") { nextIndex = currentIndex + (event.shiftKey ? -1 : 1) } else if (event.key === "ArrowRight" || event.key === "ArrowLeft") { const forward = (event.key === "ArrowRight") === (direction === "right") nextIndex = currentIndex + (forward ? 1 : -1) } if (nextIndex === null) return event.preventDefault() nodes[((nextIndex % nodes.length) + nodes.length) % nodes.length].focus() }, [direction], ) // Move focus to the first action once the row has mounted useEffect(() => { if (!open) return const frame = requestAnimationFrame(() => { actionRefs.current.find((node) => node !== null)?.focus() }) return () => cancelAnimationFrame(frame) }, [open]) // Outside click closes; listener only exists while open, so nothing leaks useEffect(() => { if (!open) return const handlePointerDown = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) closeMenu(false) } document.addEventListener("pointerdown", handlePointerDown) return () => document.removeEventListener("pointerdown", handlePointerDown) }, [open, closeMenu]) // Never leave feedback / collapse timers running after unmount useEffect(() => { return () => { if (copyTimerRef.current) clearTimeout(copyTimerRef.current) if (closeTimerRef.current) clearTimeout(closeTimerRef.current) } }, []) const renderAction = ( index: number, ariaLabel: string, tooltip: string, onClick: () => void, children: React.ReactNode, ) => { const showTooltip = hoveredIndex === index || focusedIndex === index // Each action starts stacked behind the trigger and springs to its slot; // the exit runs the same path in reverse, farthest action leaving first const stackedOffset = -directionSign * sizes.step * (index + 1) const enterDelay = index * STAGGER_SECONDS const exitDelay = (itemCount - 1 - index) * STAGGER_SECONDS return ( { actionRefs.current[index] = node }} type="button" role="menuitem" aria-label={ariaLabel} onClick={onClick} onMouseEnter={() => setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex((current) => (current === index ? null : current)) } onFocus={() => setFocusedIndex(index)} onBlur={() => setFocusedIndex((current) => (current === index ? null : current)) } style={{ transformOrigin: direction === "right" ? "left center" : "right center", }} initial={ shouldReduceMotion ? { opacity: 0 } : { x: stackedOffset, scale: 0.5, opacity: 0 } } animate={ shouldReduceMotion ? { opacity: 1 } : { x: 0, scale: 1, opacity: 1 } } exit={ shouldReduceMotion ? { opacity: 0, transition: REDUCED_FADE } : { x: stackedOffset, scale: 0.5, opacity: 0, transition: { ...MOVE_SPRING, delay: exitDelay }, } } transition={ shouldReduceMotion ? REDUCED_FADE : { ...MOVE_SPRING, delay: enterDelay } } whileTap={shouldReduceMotion ? undefined : { scale: 0.92 }} className={cn(BUTTON_BASE_CLASSES, sizes.action)} > {children} {showTooltip && ( )} ) } return ( {open && itemCount > 0 && ( )} ) } 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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app/registry/share-button/share-button.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/share-button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]