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[544296,["/_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"],"ItemStyles"] 52:I[8513,["/_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"],"ScrollArea"] 53:I[8513,["/_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"],"ScrollBar"] 54: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"] 55:T1ad4,"use client"; import * as React from "react"; import { Button as ButtonPrimitive } from "@base-ui/react/button"; import { HeartIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import "./like.css"; /** Keep in sync with the nth-child choreography in like.css. */ const LIKE_PARTICLE_COUNT = 8; type ButtonProps = React.ComponentProps; type LikeClickEvent = Parameters>[0]; export type LikeProps = Omit< ButtonProps, "aria-pressed" | "children" | "duration" | "onClick" | "size" > & { /** Controlled liked state. */ liked?: boolean; /** Initial liked state for uncontrolled usage. */ defaultLiked?: boolean; /** Called when the control requests a liked-state change. */ onLikedChange?: (liked: boolean) => void; /** Called before the liked state changes. Prevent default to cancel the change. */ onClick?: (event: LikeClickEvent) => void; /** Accessible action label while unliked. Applied only when icon-only. */ likeLabel?: string; /** Accessible action label while liked. Applied only when icon-only. */ unlikeLabel?: string; /** Optional content placed after the heart. */ children?: React.ReactNode; /** * Heart size. Numbers are interpreted as pixels; CSS lengths are also * accepted. Defaults to 32px via the `--like-size` custom property, which * can also be set in CSS. */ iconSize?: number | string; /** * Base particle travel duration in milliseconds. Defaults to 350ms via the * `--like-duration` custom property, which can also be set in CSS. */ duration?: number; /** * CSS `` the fill circle grows from, relative to the heart, e.g. * `"50% 100%"` or `"left top"`. Defaults to the heart's visual center * (`50% 45%`) via the `--like-fill-origin` custom property, which can also * be set in CSS. */ fillOrigin?: string; /** Classes applied to the heart and scatter wrapper. */ iconClassName?: string; }; type LikeStyle = React.CSSProperties & { "--like-duration"?: string; "--like-fill-origin"?: string; "--like-size"?: string; }; export function Like({ liked, defaultLiked = false, onLikedChange, onClick, likeLabel = "Like", unlikeLabel = "Unlike", children, iconSize, duration, fillOrigin, className, iconClassName, disabled, ref, style, ...props }: LikeProps) { const [internalLiked, setInternalLiked] = React.useState(defaultLiked); const controlled = liked !== undefined; const isLiked = controlled ? liked : internalLiked; const previousLikedRef = React.useRef(isLiked); const likeIntentRef = React.useRef(false); const [scatterId, setScatterId] = React.useState(0); const [scatterActive, setScatterActive] = React.useState(false); const settledParticlesRef = React.useRef(0); const likeStyle: LikeStyle = { ...style }; if (duration !== undefined) { likeStyle["--like-duration"] = `${duration}ms`; } if (fillOrigin !== undefined) { likeStyle["--like-fill-origin"] = fillOrigin; } if (iconSize !== undefined) { likeStyle["--like-size"] = typeof iconSize === "number" ? `${iconSize}px` : iconSize; } // A scatter only belongs to a liked heart, so unliking mid-scatter drops it. if (scatterActive && !isLiked) { setScatterActive(false); } // The scatter celebrates user intent: it plays when `isLiked` turns true after // a click asked for it — immediately for optimistic parents, or once a // non-optimistic parent commits the result — but never for controlled state // arriving from a fetch or a realtime update. React.useEffect(() => { if (!previousLikedRef.current && isLiked && likeIntentRef.current) { settledParticlesRef.current = 0; setScatterId((current) => current + 1); setScatterActive(true); } if (previousLikedRef.current !== isLiked) { likeIntentRef.current = false; } previousLikedRef.current = isLiked; }, [isLiked]); const handleClick = React.useCallback( (event: LikeClickEvent) => { onClick?.(event); if (event.defaultPrevented || disabled) { return; } const nextLiked = !isLiked; if (!controlled) { setInternalLiked(nextLiked); } likeIntentRef.current = nextLiked; onLikedChange?.(nextLiked); }, [controlled, disabled, isLiked, onClick, onLikedChange], ); // The scatter leaves the DOM once every particle has finished, so long-lived // liked items don't keep 8 idle SVGs mounted. const handleScatterAnimationEnd = React.useCallback( (event: React.AnimationEvent) => { if (event.animationName !== "like-particle") return; settledParticlesRef.current += 1; if (settledParticlesRef.current >= LIKE_PARTICLE_COUNT) { setScatterActive(false); } }, [], ); return ( {children ? {children} : null} ); } 56:T1743,/* Defaults are layered for customization. Normal unlayered styles and utilities in a later layer can override them. */ @layer components { .like { /* Like's heart colour, which Like Button inherits. A dedicated token rather than --destructive: a like is not an error. */ --like-color: var(--ericts-like); --like-size: 32px; --like-duration: 350ms; /* Where the fill circle grows from. 45% sits on the heart's visual center: its mass is in the two lobes, not the bottom point. */ --like-fill-origin: 50% 45%; --like-ease-out: cubic-bezier(0.23, 1, 0.32, 1); } .like-icon { position: relative; display: inline-flex; width: var(--like-size); height: var(--like-size); flex: none; font-size: var(--like-size); transform: scale(1); transition: transform 160ms var(--like-ease-out); } .like[data-icon-only] { width: max(2rem, calc(var(--like-size) + 0.5rem)); height: max(2rem, calc(var(--like-size) + 0.5rem)); } .like:active .like-icon { transform: scale(0.97); } .like-heart { position: absolute; inset: 0; width: 100%; height: 100%; stroke-width: 1.75; } .like-heart-outline { color: currentColor; transition: color 150ms var(--like-ease-out); } .like-heart-fill { color: var(--like-color); clip-path: circle(0% at var(--like-fill-origin)); transition: clip-path 160ms var(--like-ease-out); } .like[data-liked="true"] .like-heart-outline { color: var(--like-color); transition-delay: 60ms; } .like[data-liked="true"] .like-heart-fill { clip-path: circle(150% at var(--like-fill-origin)); } .like-scatter { position: absolute; inset: 0; pointer-events: none; color: var(--like-color); } .like-particle { --like-particle-delay: 0ms; --like-particle-duration-scale: 1; position: absolute; top: 50%; left: 50%; width: var(--like-particle-size, 0.25em); height: var(--like-particle-size, 0.25em); opacity: 0; animation: like-particle calc(var(--like-duration) * var(--like-particle-duration-scale)) linear calc(24ms + var(--like-particle-delay)) both; } /* Only 8 particles are choreographed below (LIKE_PARTICLE_COUNT in like.tsx); anything past them has no travel vector, so hide it. */ .like-particle:nth-child(n + 9) { display: none; } .like-particle-heart { display: block; stroke: none; } /* Three compact radial waves. Every heart travels the same 1.05em radius. */ .like-particle:nth-child(1) { --like-particle-size: 0.3em; --like-particle-x: -0.602em; --like-particle-y: -0.86em; --like-particle-rotate: -28deg; } .like-particle:nth-child(2) { --like-particle-size: 0.125em; --like-particle-x: 0.128em; --like-particle-y: -1.042em; --like-particle-rotate: 14deg; --like-particle-delay: 44ms; --like-particle-duration-scale: 1.125; } .like-particle:nth-child(3) { --like-particle-size: 0.2em; --like-particle-x: 0.78em; --like-particle-y: -0.703em; --like-particle-rotate: 31deg; --like-particle-delay: 0ms; --like-particle-duration-scale: 0.9; } .like-particle:nth-child(4) { --like-particle-size: 0.34em; --like-particle-x: 1.049em; --like-particle-y: 0.037em; --like-particle-rotate: -17deg; --like-particle-delay: 88ms; --like-particle-duration-scale: 0.975; } .like-particle:nth-child(5) { --like-particle-size: 0.225em; --like-particle-x: 0.703em; --like-particle-y: 0.78em; --like-particle-rotate: 24deg; --like-particle-delay: 44ms; --like-particle-duration-scale: 1.05; } .like-particle:nth-child(6) { --like-particle-size: 0.36em; --like-particle-x: -0.128em; --like-particle-y: 1.042em; --like-particle-rotate: -12deg; --like-particle-delay: 0ms; --like-particle-duration-scale: 1.1; } .like-particle:nth-child(7) { --like-particle-size: 0.175em; --like-particle-x: -0.839em; --like-particle-y: 0.632em; --like-particle-rotate: -34deg; --like-particle-delay: 88ms; --like-particle-duration-scale: 1.0875; } .like-particle:nth-child(8) { --like-particle-size: 0.125em; --like-particle-x: -1.047em; --like-particle-y: -0.073em; --like-particle-rotate: 18deg; --like-particle-delay: 44ms; --like-particle-duration-scale: 0.9375; } @keyframes like-particle { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.95); } 8% { opacity: 1; } 40% { opacity: 0.9; } 70% { opacity: 0.65; } 90% { opacity: 0.25; } 100% { opacity: 0; transform: translate( calc(-50% + var(--like-particle-x, 0px)), calc(-50% + var(--like-particle-y, 0px)) ) rotate(var(--like-particle-rotate, 0deg)) scale(0.95); } } @media (hover: hover) and (pointer: fine) { .like[data-icon-only]:hover .like-heart-outline { color: var(--foreground); } .like[data-icon-only][data-liked="true"]:hover .like-heart-outline { color: var(--like-color); } } } /* Motion guards override ordinary customization, including inline timing. Keep these outside the defaults layer; only motion declarations are important. */ @media (prefers-reduced-motion: reduce) { .like-icon, .like:active .like-icon { transform: none !important; } .like-heart-fill { clip-path: none; opacity: 0; transition: opacity 120ms var(--like-ease-out) !important; } .like[data-liked="true"] .like-heart-fill { opacity: 1; } /* Zero duration instead of `none` so animationend still fires and the component can unmount the scatter. `both` fill ends at opacity 0. */ .like-particle { animation-duration: 0ms !important; animation-delay: 0ms !important; } } 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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":"@ericts","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ericts-like",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ericts-like",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.65 0.17 23)"}}],["$","p",null,{"children":"oklch(0.65 0.17 23)"}]]}]}]]}]]}],["$","$L53",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ericts-like",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ericts-like",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.65 0.17 23)"}}],["$","p",null,{"children":"oklch(0.65 0.17 23)"}]]}]}]]}]]}],["$","$L53",null,{"orientation":"horizontal"}]]}]}]]}],null,null]}]}]}]]}],["$","$L54",null,{"files":[{"path":"registry/base/ui/like.tsx","content":"$55","type":"registry:ui","target":"@ui/like.tsx"},{"path":"registry/base/ui/like.css","content":"$56","type":"registry:file","target":"@ui/like.css"}],"className":"h-[70svh] min-h-80"}]]}]