Gooey Notification

4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 51:T3f5f,import { type CSSProperties, type MouseEventHandler, memo, type ReactNode, type TransitionEventHandler, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; import type { GooeyButton, GooeyState, GooeyStyles } from "./toast-gooey-types"; import "./toast-gooey.css"; import { ArrowRight, Check, CircleAlert, LifeBuoy, LoaderCircle, X, } from "./toast-gooey-icons"; /* --------------------------------- Config --------------------------------- */ const HEIGHT = 40; const WIDTH = 350; const DEFAULT_ROUNDNESS = 18; const BLUR_RATIO = 0.5; const PILL_PADDING = 10; const MIN_EXPAND_RATIO = 2.25; const SWAP_COLLAPSE_MS = 200; const HEADER_EXIT_MS = 150; type State = GooeyState; interface View { title?: string; description?: ReactNode | string; state: State; icon?: ReactNode | null; styles?: GooeyStyles; button?: GooeyButton; fill?: string; } interface GooeyProps { id: string; fill?: string; state?: State; title?: string; description?: ReactNode | string; position?: "left" | "center" | "right"; expand?: "top" | "bottom"; className?: string; icon?: ReactNode | null; styles?: GooeyStyles; button?: GooeyButton; roundness?: number; exiting?: boolean; autoExpandDelayMs?: number; autoCollapseDelayMs?: number; canExpand?: boolean; interruptKey?: string; refreshKey?: string; onMouseEnter?: MouseEventHandler; onMouseLeave?: MouseEventHandler; onDismiss?: () => void; } /* ---------------------------------- Icons --------------------------------- */ const STATE_ICON: Record = { success: , loading: , error: , warning: , info: , action: , }; /* ----------------------------- Memoised Defs ------------------------------ */ const GooeyDefs = memo(function GooeyDefs({ filterId, blur, }: { filterId: string; blur: number; }) { return ( ); }); /* ------------------------------- Component -------------------------------- */ export const Gooey = memo(function Gooey({ id, fill, state = "success", title = state, description, position = "left", expand = "bottom", className, icon, styles, button, roundness, exiting = false, autoExpandDelayMs, autoCollapseDelayMs, canExpand, interruptKey, refreshKey, onMouseEnter, onMouseLeave, onDismiss, }: GooeyProps) { const next: View = useMemo( () => ({ title, description, state, icon, styles, button, fill }), [title, description, state, icon, styles, button, fill], ); const [view, setView] = useState(next); const [applied, setApplied] = useState(refreshKey); const [isExpanded, setIsExpanded] = useState(false); const [ready, setReady] = useState(false); const [pillWidth, setPillWidth] = useState(0); const [contentHeight, setContentHeight] = useState(0); const hasDesc = Boolean(view.description) || Boolean(view.button); const isLoading = view.state === "loading"; const open = hasDesc && isExpanded && !isLoading; const allowExpand = isLoading ? false : (canExpand ?? (!interruptKey || interruptKey === id)); const headerKey = `${view.state}-${view.title}`; const filterId = `gooey-gooey-${id}`; const resolvedRoundness = Math.max(0, roundness ?? DEFAULT_ROUNDNESS); const blur = resolvedRoundness * BLUR_RATIO; const headerRef = useRef(null); const contentRef = useRef(null); const headerExitRef = useRef(null); const autoExpandRef = useRef(null); const autoCollapseRef = useRef(null); const swapTimerRef = useRef(null); const lastRefreshKeyRef = useRef(refreshKey); const pendingRef = useRef<{ key?: string; payload: View } | null>(null); const [headerLayer, setHeaderLayer] = useState<{ current: { key: string; view: View }; prev: { key: string; view: View } | null; }>({ current: { key: headerKey, view }, prev: null }); /* ------------------------------ Measurements ------------------------------ */ const innerRef = useRef(null); const headerPadRef = useRef(null); // biome-ignore lint/correctness/useExhaustiveDependencies: headerLayer.current.key is used to force a re-render useLayoutEffect(() => { const el = innerRef.current; const header = headerRef.current; if (!el || !header) return; if (headerPadRef.current === null) { const cs = getComputedStyle(header); headerPadRef.current = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight); } const px = headerPadRef.current; const measure = () => { const w = el.scrollWidth + px + PILL_PADDING; if (w > PILL_PADDING) { setPillWidth((prev) => (prev === w ? prev : w)); } }; measure(); let rafId = 0; const ro = new ResizeObserver(() => { cancelAnimationFrame(rafId); rafId = requestAnimationFrame(measure); }); ro.observe(el); return () => { cancelAnimationFrame(rafId); ro.disconnect(); }; }, [headerLayer.current.key]); useLayoutEffect(() => { if (!hasDesc) { setContentHeight(0); return; } const el = contentRef.current; if (!el) return; const measure = () => { const h = el.scrollHeight; setContentHeight((prev) => (prev === h ? prev : h)); }; measure(); let rafId = 0; const ro = new ResizeObserver(() => { cancelAnimationFrame(rafId); rafId = requestAnimationFrame(measure); }); ro.observe(el); return () => { cancelAnimationFrame(rafId); ro.disconnect(); }; }, [hasDesc]); useEffect(() => { const raf = requestAnimationFrame(() => setReady(true)); return () => cancelAnimationFrame(raf); }, []); useLayoutEffect(() => { setHeaderLayer((state) => { if (state.current.key === headerKey) { if (state.current.view === view) return state; return { ...state, current: { key: headerKey, view } }; } return { prev: state.current, current: { key: headerKey, view }, }; }); }, [headerKey, view]); useEffect(() => { if (!headerLayer.prev) return; if (headerExitRef.current) { clearTimeout(headerExitRef.current); } headerExitRef.current = window.setTimeout(() => { headerExitRef.current = null; setHeaderLayer((state) => ({ ...state, prev: null })); }, HEADER_EXIT_MS); return () => { if (headerExitRef.current) { clearTimeout(headerExitRef.current); headerExitRef.current = null; } }; }, [headerLayer.prev]); /* ----------------------------- Refresh logic ------------------------------ */ useEffect(() => { if (refreshKey === undefined) { setView(next); setApplied(undefined); pendingRef.current = null; lastRefreshKeyRef.current = refreshKey; return; } if (lastRefreshKeyRef.current === refreshKey) return; lastRefreshKeyRef.current = refreshKey; if (swapTimerRef.current) { clearTimeout(swapTimerRef.current); swapTimerRef.current = null; } if (open) { pendingRef.current = { key: refreshKey, payload: next }; setIsExpanded(false); swapTimerRef.current = window.setTimeout(() => { swapTimerRef.current = null; const pending = pendingRef.current; if (!pending) return; setView(pending.payload); setApplied(pending.key); pendingRef.current = null; }, SWAP_COLLAPSE_MS); } else { pendingRef.current = null; setView(next); setApplied(refreshKey); } }, [open, refreshKey, next]); /* ----------------------------- Auto expand/collapse ----------------------- */ // biome-ignore lint/correctness/useExhaustiveDependencies: applied is used to force a re-render useEffect(() => { if (!hasDesc) return; if (autoExpandRef.current) clearTimeout(autoExpandRef.current); if (autoCollapseRef.current) clearTimeout(autoCollapseRef.current); if (exiting || !allowExpand) { setIsExpanded(false); return; } if (autoExpandDelayMs == null && autoCollapseDelayMs == null) return; const expandDelay = autoExpandDelayMs ?? 0; const collapseDelay = autoCollapseDelayMs ?? 0; if (expandDelay > 0) { autoExpandRef.current = window.setTimeout( () => setIsExpanded(true), expandDelay, ); } else { setIsExpanded(true); } if (collapseDelay > 0) { autoCollapseRef.current = window.setTimeout( () => setIsExpanded(false), collapseDelay, ); } return () => { if (autoExpandRef.current) clearTimeout(autoExpandRef.current); if (autoCollapseRef.current) clearTimeout(autoCollapseRef.current); }; }, [ autoCollapseDelayMs, autoExpandDelayMs, hasDesc, allowExpand, exiting, applied, ]); /* ------------------------------ Derived values ---------------------------- */ const minExpanded = HEIGHT * MIN_EXPAND_RATIO; const rawExpanded = hasDesc ? Math.max(minExpanded, HEIGHT + contentHeight) : minExpanded; const frozenExpandedRef = useRef(rawExpanded); if (open) { frozenExpandedRef.current = rawExpanded; } const expanded = open ? rawExpanded : frozenExpandedRef.current; const svgHeight = hasDesc ? Math.max(expanded, minExpanded) : HEIGHT; const expandedContent = Math.max(0, expanded - HEIGHT); const resolvedPillWidth = Math.max(pillWidth || HEIGHT, HEIGHT); const pillHeight = HEIGHT + blur * 3; const pillX = position === "right" ? WIDTH - resolvedPillWidth : position === "center" ? (WIDTH - resolvedPillWidth) / 2 : 0; /* ------------------------------- Inline styles ---------------------------- */ const rootStyle = useMemo>( () => ({ "--_h": `${open ? expanded : HEIGHT}px`, "--_pw": `${resolvedPillWidth}px`, "--_px": `${pillX}px`, "--_sy": `${open ? 1 : HEIGHT / pillHeight}`, "--_ph": `${pillHeight}px`, "--_by": `${open ? 1 : 0}`, "--_ht": `translateY(${open ? (expand === "bottom" ? 3 : -3) : 0}px) scale(${open ? 0.9 : 1})`, "--_co": `${open ? 1 : 0}`, }), [open, expanded, resolvedPillWidth, pillX, expand, pillHeight], ); /* -------------------------------- Handlers -------------------------------- */ const handleEnter: MouseEventHandler = useCallback( (e) => { onMouseEnter?.(e); if (hasDesc) setIsExpanded(true); }, [hasDesc, onMouseEnter], ); const handleLeave: MouseEventHandler = useCallback( (e) => { onMouseLeave?.(e); setIsExpanded(false); }, [onMouseLeave], ); const handleTransitionEnd: TransitionEventHandler = useCallback( (e) => { if (e.propertyName !== "height" && e.propertyName !== "transform") return; if (open) return; const pending = pendingRef.current; if (!pending) return; if (swapTimerRef.current) { clearTimeout(swapTimerRef.current); swapTimerRef.current = null; } setView(pending.payload); setApplied(pending.key); pendingRef.current = null; }, [open], ); /* -------------------------------- Swipe ----------------------------------- */ const SWIPE_DISMISS = 30; const SWIPE_MAX = 20; const buttonRef = useRef(null); const pointerStartRef = useRef(null); const onDismissRef = useRef(onDismiss); onDismissRef.current = onDismiss; useEffect(() => { const el = buttonRef.current; if (!el) return; const onMove = (e: PointerEvent) => { if (pointerStartRef.current === null) return; const dy = e.clientY - pointerStartRef.current; const sign = dy > 0 ? 1 : -1; const clamped = Math.min(Math.abs(dy), SWIPE_MAX) * sign; el.style.transform = `translateY(${clamped}px)`; }; const onUp = (e: PointerEvent) => { if (pointerStartRef.current === null) return; const dy = e.clientY - pointerStartRef.current; pointerStartRef.current = null; el.style.transform = ""; if (Math.abs(dy) > SWIPE_DISMISS) { onDismissRef.current?.(); } }; el.addEventListener("pointermove", onMove, { passive: true }); el.addEventListener("pointerup", onUp, { passive: true }); return () => { el.removeEventListener("pointermove", onMove); el.removeEventListener("pointerup", onUp); }; }, []); const handlePointerDown = useCallback( (e: React.PointerEvent) => { if (exiting || !onDismiss) return; const target = e.target as HTMLElement; if (target.closest("[data-gooey-button]")) return; pointerStartRef.current = e.clientY; e.currentTarget.setPointerCapture(e.pointerId); }, [exiting, onDismiss], ); /* --------------------------------- Render --------------------------------- */ return ( ); });4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":["https://www.honestui.com/r/toast-gooey-icons.json","https://www.honestui.com/r/toast-gooey-types.json","https://www.honestui.com/r/toast-gooey.css.json"]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.honestui.com/r/toast-gooey-renderer.json","proxyUrl":"https://shadcnregistry.com/r/honestui/toast-gooey-renderer","itemId":"@honestui/toast-gooey-renderer"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"toast-gooey-renderer.tsx","content":"$51","type":"registry:ui","target":"components/ui/toast-gooey-renderer.tsx"}]}]]}],"$L52"]}]

Toast Gooey Renderer

Installation

Files

components

Styles