{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "like-button", "title": "Like Button", "description": "A heart like button micro-interaction with a spring pop, ring pulse, radial particle burst, and a rolling odometer count", "dependencies": [ "framer-motion" ], "files": [ { "path": "app/registry/like-button/like-button.tsx", "content": "/**\n * Spectrum UI — LikeButton\n *\n * A heart like-button micro-interaction. Liking pops the heart with a spring\n * scale, fires a ring pulse plus a radial particle burst, and rolls the count\n * up like an odometer; unliking rolls it back down. Works controlled or\n * uncontrolled, honors prefers-reduced-motion, and exposes its state to\n * screen readers via aria-pressed.\n *\n * Dependencies: framer-motion, @/lib/utils\n *\n * @example\n * save(liked)} />\n */\n\n\"use client\"\n\nimport React, { useCallback, useRef, useState } from \"react\"\nimport {\n AnimatePresence,\n motion,\n useReducedMotion,\n type Transition,\n} from \"framer-motion\"\nimport { cn } from \"@/lib/utils\"\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface LikeButtonProps {\n /** Controlled liked state. Leave undefined for uncontrolled usage */\n liked?: boolean\n /** Initial liked state when uncontrolled. Default false */\n defaultLiked?: boolean\n /** Fires with the next liked state on every toggle */\n onLikedChange?: (liked: boolean) => void\n /** Like total excluding the current user; +1 is shown while liked */\n count?: number\n /** Hide the rolling counter even when count is provided. Default true */\n showCount?: boolean\n /** Visual size of the button. Default \"md\" */\n size?: \"sm\" | \"md\" | \"lg\"\n /** Colors cycled across the burst particles */\n particleColors?: string[]\n /** Disables pointer and keyboard interaction */\n disabled?: boolean\n /** Accessible name of the action. Default \"Like\" */\n label?: string\n className?: string\n}\n\n// ─── Constants ───────────────────────────────────────────────────────────────\n\nconst PARTICLE_COUNT = 8\nconst BURST_DURATION = 0.55\n\n/** Snappy micro spring for the heart fill scaling in */\nconst FILL_SPRING: Transition = { type: \"spring\", stiffness: 500, damping: 30 }\n/** Tight tween for the un-fill so the heart never overshoots past zero scale */\nconst UNFILL_TWEEN: Transition = { duration: 0.15, ease: \"easeOut\" }\n/** Spring for the rolling odometer digits */\nconst COUNT_SPRING: Transition = { type: \"spring\", stiffness: 400, damping: 30 }\n/** Celebratory squash-and-stretch pop when liking */\nconst POP_KEYFRAMES = [1, 0.6, 1.3, 1]\nconst POP_TRANSITION: Transition = {\n duration: 0.45,\n times: [0, 0.25, 0.6, 1],\n ease: \"easeOut\",\n}\n/** The heart's visual mass sits below center, so pops anchor slightly low */\nconst HEART_ORIGIN = \"50% 60%\"\n\nconst DEFAULT_PARTICLE_COLORS = [\n \"#f43f5e\",\n \"#fb923c\",\n \"#facc15\",\n \"#4ade80\",\n \"#38bdf8\",\n \"#a78bfa\",\n]\n\nconst SIZES = {\n sm: { button: \"h-8 gap-1.5 px-3 text-xs\", icon: 14 },\n md: { button: \"h-10 gap-2 px-4 text-sm\", icon: 17 },\n lg: { button: \"h-12 gap-2.5 px-5 text-base\", icon: 20 },\n} as const\n\nconst HEART_PATH =\n \"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"\n\nconst countVariants = {\n enter: (direction: number) => ({ y: direction * 12, opacity: 0 }),\n center: { y: 0, opacity: 1 },\n exit: (direction: number) => ({ y: direction * -12, opacity: 0 }),\n}\n\nfunction formatCount(value: number) {\n return value >= 1000\n ? new Intl.NumberFormat(\"en\", {\n notation: \"compact\",\n maximumFractionDigits: 1,\n }).format(value)\n : String(value)\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport function LikeButton({\n liked: likedProp,\n defaultLiked = false,\n onLikedChange,\n count,\n showCount = true,\n size = \"md\",\n particleColors = DEFAULT_PARTICLE_COLORS,\n disabled = false,\n label = \"Like\",\n className,\n}: LikeButtonProps) {\n const shouldReduceMotion = useReducedMotion()\n const [internalLiked, setInternalLiked] = useState(defaultLiked)\n // Monotonic id per burst; null while idle so unmount/cleanup can't race a re-click\n const [burst, setBurst] = useState(null)\n const burstIdRef = useRef(0)\n\n const liked = likedProp ?? internalLiked\n const { button: sizeClasses, icon } = SIZES[size]\n const displayCount = count !== undefined ? count + (liked ? 1 : 0) : undefined\n // While liked the count just went up, so digits roll upward (and vice versa)\n const direction = liked ? 1 : -1\n // Reserve the wider of the liked/unliked renderings so toggling never\n // shifts the pill width (tabular-nums keeps digit widths uniform)\n const countWidthCh =\n count !== undefined\n ? Math.max(formatCount(count).length, formatCount(count + 1).length)\n : 0\n\n const handleClick = useCallback(() => {\n const next = !liked\n if (likedProp === undefined) setInternalLiked(next)\n onLikedChange?.(next)\n if (next && !shouldReduceMotion) {\n burstIdRef.current += 1\n setBurst(burstIdRef.current)\n }\n }, [liked, likedProp, onLikedChange, shouldReduceMotion])\n\n return (\n \n \n \n \n \n \n \n \n \n \n\n {burst !== null && !shouldReduceMotion && (\n \n \n setBurst((current) => (current === burst ? null : current))\n }\n />\n {Array.from({ length: PARTICLE_COUNT }).map((_, index) => {\n const angle = (index / PARTICLE_COUNT) * Math.PI * 2 - Math.PI / 2\n const distance = icon * (index % 2 === 0 ? 1.9 : 1.5)\n const dotSize = Math.max(3, Math.round(icon * 0.26))\n return (\n \n )\n })}\n \n )}\n \n\n {displayCount !== undefined && showCount && (\n \n \n \n {formatCount(displayCount)}\n \n \n \n )}\n \n )\n}\n", "type": "registry:component", "target": "components/spectrumui/like-button.tsx" } ], "type": "registry:component" }