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:T3c66,"use client" import { useState, useEffect, useMemo, memo } from "react" import { useTheme } from "next-themes" import { Toaster as Sonner, useSonner, toast, type ToasterProps, type ToastT, } from "sonner" import { X } from "lucide-react" import { motion, AnimatePresence } from "motion/react" type ToastPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" const POSITION_CLASSES: Record = { "top-left": "top-6 left-6", "top-center": "top-6 left-1/2 -translate-x-1/2", "top-right": "top-6 right-6", "bottom-left": "bottom-6 left-6", "bottom-center": "bottom-6 left-1/2 -translate-x-1/2", "bottom-right": "bottom-6 right-6", } const ALL_POSITIONS: ToastPosition[] = [ "top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right", ] const TOAST_GRADIENTS: Record = { success: "radial-gradient(circle at center, #34d399, #047857)", warning: "radial-gradient(circle at center, #fbbf24, #b45309)", error: "radial-gradient(circle at center, #f43f5e, #be123c)", info: "radial-gradient(circle at center, #38bdf8, #1d4ed8)", default: "radial-gradient(circle at center, #a1a1aa, #3f3f46)", normal: "radial-gradient(circle at center, #a1a1aa, #3f3f46)", loading: "radial-gradient(circle at center, #818cf8, #4338ca)", } const getGradient = (t: ToastT) => TOAST_GRADIENTS[t.type || "default"] || TOAST_GRADIENTS.default const getTitle = (t: ToastT) => { const title = t.title if (typeof title === "function") { const res = title() return typeof res === "string" ? res : "Notification" } return typeof title === "string" ? title : "Notification" } const getDescription = (t: ToastT) => { const desc = t.description if (typeof desc === "function") { const res = desc() return typeof res === "string" ? res : null } return typeof desc === "string" ? desc : null } interface ToastStackProps { position: ToastPosition items: ToastT[] } const ToastStack = memo( ({ position, items }: ToastStackProps) => { const [hoveredId, setHoveredId] = useState(null) const [fullyExpandedId, setFullyExpandedId] = useState(null) useEffect(() => { if (hoveredId !== null && !items.some((t) => t.id === hoveredId)) { setHoveredId(null) setFullyExpandedId(null) } }, [items, hoveredId]) const displayedItems = useMemo(() => [...items].reverse(), [items]) const positionClass = POSITION_CLASSES[position] || POSITION_CLASSES["bottom-right"] const isLeftAligned = position.includes("left") const initialX = isLeftAligned ? -12 : 12 return (

{displayedItems.map((item, idx) => { const isFirst = idx === 0 const isHovered = hoveredId === item.id const isExpanded = hoveredId !== null ? isHovered : idx === displayedItems.length - 1 const isFullyExpanded = fullyExpandedId === item.id const hoveredIndex = displayedItems.findIndex((i) => i.id === hoveredId) const isRightOfHovered = hoveredIndex !== -1 && idx === hoveredIndex + 1 const marginLeft = isHovered || isRightOfHovered ? 6 : -12 const gradient = getGradient(item) return ( setHoveredId(item.id)} onMouseLeave={() => { setHoveredId(null) setFullyExpandedId(null) }} onAnimationComplete={() => isExpanded && setFullyExpandedId(item.id)} initial={{ width: 40, scale: 1, marginLeft: isFirst ? 0 : -24, opacity: 0, x: initialX, filter: "blur(2px)", }} animate={{ width: isExpanded ? "auto" : 40, scale: isExpanded ? 1.05 : 1, marginLeft: isFirst ? 0 : marginLeft, opacity: 1, x: 0, filter: "blur(0px)", }} exit={{ width: 0, scale: 0.8, opacity: 0, marginLeft: 0, x: initialX, filter: "blur(2px)", }} transition={{ type: "spring", stiffness: 180, damping: 25, filter: { ease: "easeOut", duration: 0.3 }, opacity: { ease: "easeOut", duration: 0.3 }, }} style={{ zIndex: isHovered ? 50 : idx + 1 }} className="relative h-10 p-0.75 pr-3 flex items-center justify-start border bg-card rounded-4xl cursor-pointer overflow-hidden shrink-0 select-none shadow-sm hover:shadow-lg transition-shadow duration-300 pointer-events-auto" >

{item.type === "loading" && (

{Array(12).fill(0).map((_, i) => (

))}

)} {isFullyExpanded && (

{ e.stopPropagation() setHoveredId(null) setFullyExpandedId(null) toast.dismiss(item.id) }} className="absolute inset-0 bg-background/60 flex items-center justify-center cursor-pointer opacity-0 group-hover/avatar:opacity-100 transition-opacity duration-200 z-30" >

)}

{isExpanded && (

{getTitle(item)}

{getDescription(item) && (

{getDescription(item)}

)} )} ) })}

) }, (prev, next) => prev.position === next.position && prev.items.length === next.items.length && prev.items.every((item, i) => { const nextItem = next.items[i] return ( item.id === nextItem?.id && item.type === nextItem?.type && item.title === nextItem?.title && item.description === nextItem?.description ) }) ) const Toaster = ({ duration = 6000, position = "bottom-right", ...props }: ToasterProps) => { const { theme = "system" } = useTheme() const { toasts: rawToasts } = useSonner() const groups = useMemo(() => { const items = rawToasts.filter((t): t is ToastT => "title" in t || !("dismiss" in t)) return items.reduce((acc, item) => { const pos = (item.position || position || "bottom-right") as ToastPosition if (!acc[pos]) acc[pos] = [] acc[pos].push(item) return acc }, {} as Record) }, [rawToasts, position]) return ( <> {ALL_POSITIONS.map((pos) => ( ))} ) } export { Toaster }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","sonner",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","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":"sonner"}]]}]}],["$","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"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@grootstudio","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/radix-nova/pebble-toast/pebble-toast.tsx","content":"$52","type":"registry:component","target":"@components/grootstudio/pebble-toast.tsx"}],"className":"h-[70svh] min-h-80"}]]}]