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:T55f2,"use client" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { SmilePlusIcon } from "lucide-react" import { cn } from "@/lib/utils" type Reaction = { /** The emoji itself. Also the reaction's identity, so keep it unique. */ emoji: string /** Its accessible name, such as "Heart". Screen readers hear this, not the emoji. */ label: string /** How many people reacted with it. */ count?: number /** Whether the current person is one of them. */ active?: boolean } // Used when neither `choices` nor any existing reaction gives the picker // something to offer. Escaped so the source stays plain ASCII. const DEFAULT_CHOICES: Reaction[] = [ { emoji: "\u{1F44D}", label: "Thumbs up" }, { emoji: "\u2764\uFE0F", label: "Heart" }, { emoji: "\u{1F602}", label: "Laughing" }, { emoji: "\u{1F389}", label: "Celebrate" }, { emoji: "\u{1F62E}", label: "Surprised" }, { emoji: "\u{1F525}", label: "Fire" }, ] const compact = new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1, }) function formatCount(count: number) { return count < 1000 ? String(count) : compact.format(count) } function describeCount(count: number) { return `${count} ${count === 1 ? "reaction" : "reactions"}` } const ANCHOR = "pointer-events-none fixed z-50 flex [--edge:1rem] [--gap:0.5rem] sm:[--edge:1.5rem] sm:[--gap:1rem] lg:[--edge:2rem] lg:[--gap:2rem]" const reactionsVariants = cva("group/reactions", { variants: { variant: { inline: "relative flex flex-wrap items-center gap-1.5", floating: ANCHOR, }, position: { "bottom-right": "", "bottom-left": "", "top-right": "", "top-left": "", }, }, compoundVariants: [ { variant: "floating", position: "bottom-right", class: "right-[var(--edge)] bottom-[calc(var(--gap)+env(safe-area-inset-bottom,0px))]", }, { variant: "floating", position: "bottom-left", class: "bottom-[calc(var(--gap)+env(safe-area-inset-bottom,0px))] left-[var(--edge)]", }, { variant: "floating", position: "top-right", class: "top-[calc(var(--gap)+env(safe-area-inset-top,0px))] right-[var(--edge)]", }, { variant: "floating", position: "top-left", class: "top-[calc(var(--gap)+env(safe-area-inset-top,0px))] left-[var(--edge)]", }, ], defaultVariants: { variant: "inline", position: "bottom-right", }, }) /* * One translucent surface for every floating piece: the bar that holds the * trigger and the panel that opens off it. `inset-ring` rather than `border` * so the ring sits inside the blur instead of drawing a hard edge around it. */ const SURFACE = "shadow-lg backdrop-blur-md inset-ring-1 inset-ring-border" const RISE_EASING = "cubic-bezier(0.22, 0.61, 0.36, 1)" const SPRING_EASING = "cubic-bezier(0.34, 1.56, 0.64, 1)" const PANEL_EXIT_MS = 220 type PanelState = "closed" | "open" | "exiting" function prefersReducedMotion() { return ( typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ) } /* * Particles are thrown into a body-level layer rather than the component tree: * they outlive the click that spawned them, never affect layout, and escape * any ancestor that clips overflow or creates a containing block. */ function getParticleLayer() { const existing = document.querySelector( '[data-slot="reactions-particles"]' ) if (existing) return existing const layer = document.createElement("div") layer.setAttribute("data-slot", "reactions-particles") layer.setAttribute("aria-hidden", "true") layer.style.cssText = "position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none" document.body.append(layer) return layer } function launchParticle( layer: HTMLElement, emoji: string, x: number, y: number ) { const node = document.createElement("span") node.textContent = emoji const size = 1.4 + Math.random() * 0.8 const rise = window.innerHeight * (0.55 + Math.random() * 0.35) const sway = 24 + Math.random() * 28 const spin = (Math.random() - 0.5) * 40 // A trigger pinned to a corner would otherwise throw half its particles // straight into the clip boundary, so drift leans back toward the center in // proportion to how close the origin sits to an edge. const inward = (window.innerWidth / 2 - x) / (window.innerWidth / 2) const drift = (Math.random() - 0.5) * 90 + inward * 70 const lean = Math.abs(inward) > 0.5 ? Math.sign(inward) : Math.random() < 0.5 ? -1 : 1 node.style.cssText = `position:absolute;left:${x}px;top:${y}px;font-size:${size}rem;line-height:1;will-change:transform,opacity;filter:drop-shadow(0 2px 6px rgb(0 0 0 / 0.18))` layer.append(node) // Sway alternates sides on the way up so the path reads as an S-curve // rather than a straight line with jitter. const animation = node.animate( [ { offset: 0, transform: "translate3d(0, 0, 0) scale(0.35) rotate(0deg)", opacity: 0, }, { offset: 0.12, transform: `translate3d(${lean * sway * 0.35}px, ${-rise * 0.12}px, 0) scale(1.08) rotate(${spin * 0.4}deg)`, opacity: 1, }, { offset: 0.38, transform: `translate3d(${-lean * sway}px, ${-rise * 0.38}px, 0) scale(1) rotate(${-spin * 0.6}deg)`, opacity: 1, }, { offset: 0.66, transform: `translate3d(${lean * sway * 0.8 + drift * 0.5}px, ${-rise * 0.66}px, 0) scale(0.95) rotate(${spin * 0.8}deg)`, opacity: 0.85, }, { offset: 1, transform: `translate3d(${drift}px, ${-rise}px, 0) scale(0.6) rotate(${-spin * 0.3}deg)`, opacity: 0, }, ], { duration: 2200 + Math.random() * 1600, easing: RISE_EASING, fill: "forwards", } ) const cleanup = () => node.remove() animation.finished.then(cleanup, cleanup) } function burst(emoji: string, origin: HTMLElement | null, count: number) { if (!origin || count < 1 || prefersReducedMotion()) return const layer = getParticleLayer() const rect = origin.getBoundingClientRect() const x = rect.left + rect.width / 2 const y = rect.top + rect.height / 2 for (let index = 0; index < count; index += 1) { const jitterX = x + (Math.random() - 0.5) * 36 const jitterY = y + (Math.random() - 0.5) * 12 window.setTimeout( () => launchParticle(layer, emoji, jitterX, jitterY), index * 55 ) } } function animatePill(pill: HTMLElement) { if (prefersReducedMotion()) return pill .querySelector('[data-slot="reactions-pill-emoji"]') ?.animate( [ { transform: "scale(1) rotate(0deg)" }, { transform: "scale(1.45) rotate(-9deg)", offset: 0.35 }, { transform: "scale(0.93) rotate(5deg)", offset: 0.62 }, { transform: "scale(1) rotate(0deg)" }, ], { duration: 420, easing: SPRING_EASING } ) pill .querySelector('[data-slot="reactions-pill-count"]') ?.animate( [ { transform: "translateY(65%)", opacity: 0 }, { transform: "translateY(0)", opacity: 1 }, ], { duration: 260, easing: RISE_EASING } ) } function pop(element: HTMLElement) { if (prefersReducedMotion()) return element.animate( [ { transform: "scale(1)" }, { transform: "scale(1.4)", offset: 0.5 }, { transform: "scale(1)" }, ], { duration: 380, easing: SPRING_EASING } ) } type ReactionsProps = Omit, "onChange"> & VariantProps & { /** The reactions on the item. Pass it to control the state yourself. */ reactions?: Reaction[] /** The starting reactions when uncontrolled. */ defaultReactions?: Reaction[] /** * What the picker offers. Defaults to six common reactions plus any * already on the item. */ choices?: Reaction[] /** Fires with the whole new list after every change. */ onReactionsChange?: (reactions: Reaction[]) => void /** Fires with the reaction that changed and whether it is now on. */ onReact?: (reaction: Reaction, active: boolean) => void /** Show the count on each pill. */ showCounts?: boolean /** Emoji thrown up on each new reaction. `0` turns the burst off. */ particles?: number /** Accessible name of the button that opens the picker. */ triggerLabel?: string /** Accessible name of the group of choices. */ panelLabel?: string } function Reactions({ className, variant = "inline", position = "bottom-right", reactions: reactionsProp, defaultReactions = [], choices, onReactionsChange, onReact, showCounts = true, particles = 7, triggerLabel = "Add reaction", panelLabel = "Pick a reaction", "aria-label": ariaLabel = "Reactions", onKeyDown, onBlur, ...props }: ReactionsProps) { const rootRef = React.useRef(null) const panelRef = React.useRef(null) const triggerRef = React.useRef(null) const badgeRef = React.useRef(null) const pulseNonce = React.useRef(0) const timerRef = React.useRef(0) const panelId = React.useId() const [uncontrolled, setUncontrolled] = React.useState(defaultReactions) const [pulse, setPulse] = React.useState<{ emoji: string; nonce: number }>() const [panel, setPanel] = React.useState("closed") const [announcement, setAnnouncement] = React.useState("") const [alignEnd, setAlignEnd] = React.useState(false) const [dropDown, setDropDown] = React.useState(false) const isControlled = reactionsProp !== undefined const items = isControlled ? reactionsProp : uncontrolled // Without `choices`, the picker offers the defaults plus anything already // reacted with that isn't among them. const palette = choices ?? DEFAULT_CHOICES.concat( items.filter( (item) => !DEFAULT_CHOICES.some((choice) => choice.emoji === item.emoji) ) ) const total = items.reduce((sum, item) => sum + (item.count ?? 0), 0) const open = panel === "open" const rendered = panel !== "closed" React.useEffect(() => () => window.clearTimeout(timerRef.current), []) // Entry rides on @starting-style, so the panel can mount straight into its // open state. Exit has no such affordance and keeps the node mounted for the // length of the transition. function openPanel() { window.clearTimeout(timerRef.current) setPanel("open") } function closePanel() { window.clearTimeout(timerRef.current) setPanel("exiting") timerRef.current = window.setTimeout( () => setPanel("closed"), PANEL_EXIT_MS ) } React.useEffect(() => { if (!open) return panelRef.current ?.querySelector('[data-slot="reactions-choice"]') ?.focus() }, [open]) // The inline panel opens above the picker, from its start edge. Near the top // of the viewport it drops below instead, and near the right it opens from // the end. Both are decided from the picker's position and the panel's // layout size, which the flip itself never changes, so it settles at once. React.useLayoutEffect(() => { if (!open || variant !== "inline") return const node = panelRef.current const anchor = node?.parentElement if (!node || !anchor) return const box = anchor.getBoundingClientRect() const width = node.offsetWidth const fitsStart = box.left + width <= window.innerWidth - 8 const fitsEnd = box.right - width >= 8 setAlignEnd(!fitsStart && fitsEnd) setDropDown(box.top - node.offsetHeight - 16 < 0) }, [open, variant]) React.useEffect(() => { if (!open) return function onPointerDown(event: PointerEvent) { if (!rootRef.current?.contains(event.target as Node)) closePanel() } document.addEventListener("pointerdown", onPointerDown) return () => document.removeEventListener("pointerdown", onPointerDown) }, [open]) React.useEffect(() => { if (!pulse) return const pill = rootRef.current?.querySelector( `[data-slot="reactions-pill"][data-emoji="${CSS.escape(pulse.emoji)}"]` ) if (pill) animatePill(pill) if (badgeRef.current) pop(badgeRef.current) }, [pulse]) function commit(next: Reaction[]) { if (!isControlled) setUncontrolled(next) onReactionsChange?.(next) } function toggle(reaction: Reaction, origin: HTMLElement | null) { const existing = items.find((item) => item.emoji === reaction.emoji) const nowActive = !existing?.active // A reaction nobody holds any more leaves the list instead of lingering // as a zero. commit( existing ? items .map((item) => item.emoji === reaction.emoji ? { ...item, active: nowActive, count: Math.max( 0, (item.count ?? 0) + (nowActive ? 1 : -1) ), } : item ) .filter((item) => item.active || (item.count ?? 0) > 0) : [ ...items, { ...reaction, active: true, count: (reaction.count ?? 0) + 1 }, ] ) onReact?.(reaction, nowActive) setAnnouncement(`${nowActive ? "Added" : "Removed"} ${reaction.label}`) pulseNonce.current += 1 setPulse({ emoji: reaction.emoji, nonce: pulseNonce.current }) if (nowActive) burst(reaction.emoji, origin, particles) } function rove(event: React.KeyboardEvent) { const targets = Array.from( panelRef.current?.querySelectorAll( '[data-slot="reactions-choice"]' ) ?? [] ) if (targets.length === 0) return const current = targets.indexOf(document.activeElement as HTMLElement) const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0 if (step !== 0) { event.preventDefault() targets[(current + step + targets.length) % targets.length]?.focus() return } if (event.key === "Home" || event.key === "End") { event.preventDefault() const target = event.key === "Home" ? targets[0] : targets[targets.length - 1] target?.focus() } } const isBar = variant === "floating" const opensDown = isBar ? position === "top-right" || position === "top-left" : dropDown const alignsEnd = isBar && (position === "bottom-right" || position === "top-right") const totalChip = total > 0 && ( ) const trigger = ( ) return (

{ onKeyDown?.(event) if (event.defaultPrevented || event.key !== "Escape" || !open) return event.stopPropagation() closePanel() triggerRef.current?.focus() }} onBlur={(event) => { onBlur?.(event) // Tabbing out of an open picker closes it, the way a click outside does. const next = event.relatedTarget as Node | null if (open && next && !event.currentTarget.contains(next)) closePanel() }} > {announcement} {variant === "inline" && items.map((item) => ( ))} <> {rendered && (

{palette.map((choice, index) => { const picked = items.find( (entry) => entry.emoji === choice.emoji )?.active return ( ) })}

)} {variant === "floating" && totalChip} {trigger}

) } export { Reactions, reactionsVariants, type Reaction } 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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":"@fibo","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/reactions.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]