52: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"] 53: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"] 54:T5201,"use client" import React, { useCallback, useState, useSyncExternalStore, useEffect, useLayoutEffect, isValidElement, useRef, } from "react" import { createPortal } from "react-dom" import { createRoot } from "react-dom/client" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon, } from "lucide-react" type ToastType = | "default" | "success" | "error" | "info" | "warning" | "loading" type ToastPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" type ToastMessage = React.ReactNode type ToastCustomRender = (id: string) => ToastMessage interface ToastAction { label: React.ReactNode onClick: (event: React.MouseEvent) => void dismiss?: boolean } interface ToastOptions { id?: string type?: ToastType title?: ToastMessage description?: ToastMessage custom?: ToastMessage | ToastCustomRender duration?: number position?: ToastPosition action?: ToastAction cancel?: ToastAction icon?: React.ReactNode closeButton?: boolean dismissible?: boolean onDismiss?: (id: string) => void className?: string } interface ToastData extends Omit { id: string type: ToastType custom?: ToastMessage createdAt: number } interface ToasterProps { position?: ToastPosition duration?: number gap?: number offset?: number | Partial> closeButton?: boolean dismissible?: boolean icons?: Partial, React.ReactNode>> toastOptions?: Omit className?: string autoMount?: boolean } interface PromiseToastData { loading?: ToastMessage | Omit success?: | ToastMessage | Omit | ((result: Value) => ToastMessage | Omit) error?: | ToastMessage | Omit | ((error: unknown) => ToastMessage | Omit) } type ToastCustom = ToastMessage | ((id: string) => ToastMessage) const defaultIcons: Record< Exclude, React.ReactNode > = { success: , info: , warning: , error: , loading: , } const MAX_VISIBLE_TOASTS = 3 const COLLAPSED_PEEK = 14 const SCALE_STEP = 0.06 const TOAST_WIDTH = 380 let toastCounter = 0 let defaultOptions: Partial = {} let inheritPosition: ToastOptions["position"] | undefined let toastState: ToastData[] = [] let registeredToasters = 0 let autoRoot: ReturnType | null = null let autoContainer: HTMLDivElement | null = null let autoMounted = false let autoConfig: ToasterProps = {} const listeners = new Set<() => void>() function emit() { for (const listener of listeners) listener() } function subscribe(listener: () => void) { listeners.add(listener) return () => { listeners.delete(listener) } } function getSnapshot() { return toastState } function ensureMount() { if (typeof document === "undefined") return if (registeredToasters > 0 || autoMounted) return autoMounted = true const container = document.createElement("div") autoContainer = container document.body.appendChild(container) autoRoot = createRoot(container) autoRoot.render() } function configure(options: ToasterProps) { autoConfig = options defaultOptions = { position: options.position, duration: options.duration, closeButton: options.closeButton, dismissible: options.dismissible, ...options.toastOptions, } if (autoRoot && autoMounted) { autoRoot.render() } } function generateId() { toastCounter += 1 return `toast-${toastCounter}` } function isToastMessage( value: ToastMessage | ToastOptions ): boolean { return ( typeof value === "string" || typeof value === "number" || isValidElement(value as React.ReactNode) ) } function removeToast(id: string) { const item = toastState.find((toastItem) => toastItem.id === id) item?.onDismiss?.(id) toastState = toastState.filter((toastItem) => toastItem.id !== id) emit() } function resolveData( value: ToastMessage | Omit ): ToastOptions { return isToastMessage(value as ToastMessage) ? { title: value as ToastMessage } : (value as ToastOptions) } function add( input: ToastMessage | ToastOptions, options?: ToastOptions ): string { ensureMount() const isMessage = isToastMessage(input) const resolved = isMessage ? { title: input as ToastMessage } : (input as ToastOptions) const merged: ToastOptions = { ...defaultOptions, ...resolved, ...(isMessage ? options : undefined), } const explicitPosition = isMessage ? options?.position : resolved.position const position = explicitPosition ?? inheritPosition if (position !== undefined) merged.position = position inheritPosition = undefined const id = merged.id ?? generateId() const existing = toastState.find((toastItem) => toastItem.id === id) const next: ToastData = { id, type: merged.type ?? "default", title: merged.title, description: merged.description, custom: typeof merged.custom === "function" ? (merged.custom as (id: string) => ToastMessage)(id) : merged.custom, duration: merged.duration, position: merged.position, action: merged.action, cancel: merged.cancel, icon: merged.icon, closeButton: merged.closeButton, dismissible: merged.dismissible, onDismiss: merged.onDismiss, className: merged.className, createdAt: existing ? existing.createdAt : Date.now(), } toastState = existing ? toastState.map((toastItem) => toastItem.id === id ? { ...toastItem, ...next, createdAt: toastItem.createdAt } : toastItem ) : [...toastState, next] emit() return id } function update(id: string, options: Omit) { const existing = toastState.find((toastItem) => toastItem.id === id) if (!existing) return toastState = toastState.map((toastItem) => toastItem.id === id ? { ...toastItem, ...options, id, type: options.type ?? toastItem.type, custom: typeof options.custom === "function" ? (options.custom as ToastCustomRender)(id) : (options.custom ?? toastItem.custom), } : toastItem ) emit() } function dismiss(id?: string) { if (!id) { toastState = [] emit() return } removeToast(id) } function promise( promise: Promise, data: PromiseToastData, options?: Omit ): Promise { const loading = resolveData(data.loading ?? "Loading...") const id = add({ ...options, ...loading, type: "loading", duration: loading.duration ?? options?.duration ?? Infinity, }) promise .then((result) => { const resolved = resolveData( typeof data.success === "function" ? data.success(result) : (data.success ?? "Done") ) update(id, { ...options, ...resolved, type: "success", duration: resolved.duration ?? options?.duration ?? defaultOptions.duration ?? 5000, }) }) .catch((error) => { const resolved = resolveData( typeof data.error === "function" ? data.error(error) : (data.error ?? "Something went wrong") ) update(id, { ...options, ...resolved, type: "error", duration: resolved.duration ?? options?.duration ?? defaultOptions.duration ?? 5000, }) }) return promise } function success( message: ToastMessage, options?: Omit ) { return add(message, { ...options, type: "success" }) } function error(message: ToastMessage, options?: Omit) { return add(message, { ...options, type: "error" }) } function info(message: ToastMessage, options?: Omit) { return add(message, { ...options, type: "info" }) } function warning(message: ToastMessage, options?: Omit) { return add(message, { ...options, type: "warning" }) } function loading(message: ToastMessage, options?: Omit) { return add(message, { ...options, type: "loading", duration: options?.duration ?? Infinity, }) } function custom( content: ToastCustom, options?: Omit ) { return add({ custom: content, ...options }) } const toast = { add, update, dismiss, close: dismiss, promise, success, error, info, warning, loading, custom, configure, } function getOffsetStyle( position: ToastPosition, offset: NonNullable ): React.CSSProperties { const resolved = typeof offset === "number" ? { top: offset, right: offset, bottom: offset, left: offset } : { top: 16, right: 16, bottom: 16, left: 16, ...offset } const style: React.CSSProperties = {} if (position.startsWith("top")) style.top = resolved.top else style.bottom = resolved.bottom if (position.endsWith("left")) style.left = resolved.left else if (position.endsWith("right")) style.right = resolved.right else { style.left = "50%" style.transform = "translateX(-50%)" } return style } function groupToasts( toasts: ToastData[], defaultPosition: ToastPosition ): Map { const groups = new Map() for (const item of toasts) { const pos = item.position ?? defaultPosition const group = groups.get(pos) if (group) group.push(item) else groups.set(pos, [item]) } return groups } function ToastCard({ item, position, icons, y, scale, zIndex, hidden, onHeightChange, onUnmount, }: { item: ToastData position: ToastPosition icons?: ToasterProps["icons"] y: number scale: number zIndex: number hidden: boolean onHeightChange: (id: string, height: number) => void onUnmount: (id: string) => void }) { const duration = item.duration ?? defaultOptions.duration ?? 5000 const autoDismiss = duration > 0 && duration !== Infinity const closeButton = item.closeButton ?? defaultOptions.closeButton ?? false const dismissible = item.dismissible ?? defaultOptions.dismissible ?? true const pausedRef = useRef(false) const timerRef = useRef | null>(null) const cardRef = useRef(null) const clearTimer = useCallback(() => { if (timerRef.current) { clearTimeout(timerRef.current) timerRef.current = null } }, []) const armTimer = useCallback(() => { clearTimer() if (!autoDismiss || pausedRef.current) return timerRef.current = setTimeout(() => removeToast(item.id), duration) }, [autoDismiss, clearTimer, duration, item.id]) useEffect(() => { armTimer() return clearTimer }, [armTimer, clearTimer]) const pause = useCallback(() => { pausedRef.current = true clearTimer() }, [clearTimer]) const resume = useCallback(() => { pausedRef.current = false armTimer() }, [armTimer]) useLayoutEffect(() => { const node = cardRef.current if (!node) return const report = () => onHeightChange(item.id, node.offsetHeight) report() if (typeof ResizeObserver === "undefined") return const observer = new ResizeObserver(report) observer.observe(node) return () => observer.disconnect() }, [item.id, onHeightChange]) useEffect(() => { return () => onUnmount(item.id) }, [item.id, onUnmount]) const isTop = position.startsWith("top") const isLeft = position.endsWith("left") const isCenter = position.endsWith("center") const restY = isTop ? y : -y // Left/right toasts slide in from their edge of the screen; center toasts // slide in from the top/bottom edge instead, since they have no side. const offScreenY = isTop ? "-100%" : "100%" const enterY = isCenter ? `calc(${offScreenY} + ${restY}px)` : restY const exitY = enterY const restYValue = isCenter ? `calc(0% + ${restY}px)` : restY const enterX = isCenter ? 0 : isLeft ? "-100%" : "100%" const exitX = enterX const icon = item.icon ?? (item.type !== "default" ? (icons?.[item.type] ?? defaultIcons[item.type]) : null) return ( { if (dismissible && Math.abs(info.offset.x) > 120) { removeToast(item.id) } }} onMouseEnter={pause} onMouseLeave={resume} onFocus={pause} onBlur={resume} style={{ position: "absolute", left: 0, width: "100%", [isTop ? "top" : "bottom"]: 0, pointerEvents: hidden ? "none" : "auto", }} className={cn( "cursor-default select-none outline-none", item.custom ? "overflow-visible" : "flex items-start gap-3 overflow-hidden rounded-2xl border bg-popover p-4 text-popover-foreground shadow-lg", item.className )} > {item.custom ? ( item.custom ) : ( <> {icon ? ( {icon} ) : null}

{item.title ? (

{item.title}

) : null} {item.description ? (

{item.description}

) : null}

{item.action || item.cancel ? (

{item.cancel ? ( ) : null} {item.action ? ( ) : null}

) : null} {closeButton ? ( ) : null} )} ) } function ToastGroup({ position, items, icons, offset, gap, }: { position: ToastPosition items: ToastData[] icons?: ToasterProps["icons"] offset: NonNullable gap: number }) { const [expanded, setExpanded] = useState(false) const [heights, setHeights] = useState>({}) const setHeight = useCallback((id: string, height: number) => { setHeights((prev) => (prev[id] === height ? prev : { ...prev, [id]: height })) }, []) const removeHeight = useCallback((id: string) => { setHeights((prev) => { if (!(id in prev)) return prev const next = { ...prev } delete next[id] return next }) }, []) // Newest toast first: it sits at the front of the stack. const ordered = [...items].reverse() let cumulative = 0 const offsets = ordered.map((item, index) => { const y = expanded ? cumulative : Math.min(index, MAX_VISIBLE_TOASTS - 1) * COLLAPSED_PEEK cumulative += (heights[item.id] ?? 0) + gap return y }) const frontHeight = heights[ordered[0]?.id ?? ""] ?? 0 const expandedHeight = cumulative > 0 ? cumulative - gap : 0 return (

setExpanded(true)} onMouseLeave={() => setExpanded(false)} onFocus={() => setExpanded(true)} onBlur={() => setExpanded(false)} aria-live="polite" className="pointer-events-none fixed" style={{ ...getOffsetStyle(position, offset), width: `min(${TOAST_WIDTH}px, calc(100vw - 2rem))`, height: expanded ? expandedHeight : frontHeight, transition: "height 300ms cubic-bezier(0.22, 1, 0.36, 1)", }} > {ordered.map((item, index) => (

) } function Toaster({ position = "bottom-right", duration = 5000, gap = 12, offset = 16, closeButton = false, dismissible = true, icons, toastOptions, className, autoMount = false, }: ToasterProps) { const [mounted, setMounted] = useState(false) const toasts = useSyncExternalStore( subscribe, getSnapshot, () => [] ) useEffect(() => { setMounted(true) registeredToasters += 1 defaultOptions = { position, duration, closeButton, dismissible, ...toastOptions } if (!autoMount && autoRoot && autoMounted) { autoRoot.unmount() autoRoot = null autoMounted = false autoContainer?.remove() autoContainer = null } return () => { registeredToasters -= 1 } }, [autoMount, position, duration, closeButton, dismissible, toastOptions]) if (!mounted) return null const groups = groupToasts(toasts, position) return createPortal(

{[...groups.entries()].map(([pos, items]) => ( ))}

, document.body ) } export { Toaster, toast, configure, type ToasterProps, type ToastAction, type ToastData, type ToastMessage, type ToastOptions, type ToastPosition, type ToastType, } 55:Ta64,'use client' import { toast } from "@/components/ui/toast" import { Button } from "@/components/ui/button" import { Separator } from "@/components/ui/separator" import { ExternalLink, GitBranch, Settings } from 'lucide-react' const ToastComponent = () => { const showToast = () => { toast.custom(() => (

Repository Synced

github.com/shadcn-space/pro

Active

main branch Last sync: 2m ago

), { position: "top-center" }) } return (

) } export default ToastComponent 51:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@shadcn-space","registryDependencies":["button","separator"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/components/ui/toast.tsx","content":"$54","type":"registry:component","target":"components/ui/toast.tsx"},{"path":"src/components/shadcn-space/sonner/sonner-05.tsx","content":"$55","type":"registry:component","target":"components/shadcn-space/sonner/sonner-05.tsx"}],"className":"h-[70svh] min-h-80"}]]}]