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:T1cf8,"use client" import * as React from "react" import { Toaster as Sonner, useSonner, type ToasterProps as SonnerProps } from "sonner" import { AlertTriangleIcon, InfoIcon, OctagonAlertIcon } from "lucide-react" import { cn } from "@/lib/utils" import { statusTint } from "@/lib/status" import { buttonVariants } from "@/components/ui/button" import { Spinner } from "@/components/ui/spinner" import { AnimatedCheckIcon } from "@/components/ikas/animated-check" type ToasterProps = SonnerProps & { /** * surface: popover card, the status in the icon (plus a thin leading accent for * warning and error). soft: tinted with the status like a soft Banner; use sparingly. */ variant?: "surface" | "soft" /** 2px bar that counts down each toast's duration. Pauses on hover, hidden with reduced motion. */ progress?: boolean } const DEFAULT_DURATION = 4000 /** Follows the `dark` class on , so toasts match the app without a theme provider. */ function subscribeTheme(onChange: () => void) { const observer = new MutationObserver(onChange) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }) return () => observer.disconnect() } const getTheme = () => (document.documentElement.classList.contains("dark") ? "dark" : "light") const getServerTheme = () => "light" as const /** * Progress bar: a gradient on the content's ::after, which spans the whole toast. * Sonner keeps a toast's duration out of the DOM, so each toast gets its duration * through its place in the list (data-index), read from the toast store. */ function useProgressCss(scope: string, enabled: boolean, props: ToasterProps) { const { toasts } = useSonner() if (!enabled) return null const fallback = props.toastOptions?.duration ?? props.duration ?? DEFAULT_DURATION const position = props.position ?? "bottom-right" const indexes = new Map() const rules: string[] = [] for (const t of toasts) { if (props.id ? t.toasterId !== props.id : t.toasterId) continue const at = t.position ?? position const index = indexes.get(at) ?? 0 indexes.set(at, index + 1) const duration = t.duration ?? fallback if (t.type === "loading" || !Number.isFinite(duration)) continue const [y, x] = at.split("-") rules.push( `.${scope}[data-y-position="${y}"][data-x-position="${x}"]>[data-index="${index}"]:not([data-type="loading"])>[data-content]::after{display:block;animation-duration:${duration}ms}` ) } return [ `.${scope} [data-content]::after{content:"";display:none;position:absolute;inset:0;border-radius:calc(var(--radius) * 1.4);pointer-events:none;background:linear-gradient(var(--s-icon),var(--s-icon)) left bottom / 0 2px no-repeat;animation:ikas-toast-progress 0ms linear forwards}`, `.${scope}:hover [data-content]::after{animation-play-state:paused}`, `@keyframes ikas-toast-progress{from{background-size:100% 2px}to{background-size:0 2px}}`, `@media (prefers-reduced-motion:no-preference){${rules.join("")}}`, ].join("\n") } /** * Sonner, unstyled and dressed in ikas tokens with the same status recipe as * Banner (@/lib/status). Use it for confirmations that need no follow-up * ("Kaydedildi"); anything the store owner must act on belongs in a Banner. */ function Toaster({ variant = "surface", progress = false, className, theme, toastOptions, ...props }: ToasterProps) { const documentTheme = React.useSyncExternalStore(subscribeTheme, getTheme, getServerTheme) const scope = `ikas-toaster-${React.useId().replace(/[^\w-]/g, "")}` const progressCss = useProgressCss(scope, progress, { ...props, toastOptions }) const soft = variant === "soft" // Surface only: warning and error get a 3px accent on the leading edge. const accent = soft ? undefined : "[--t-accent:var(--s)]" return ( <> {progressCss && } ), info: , warning: , error: , loading: , }} toastOptions={{ ...toastOptions, unstyled: true, classNames: { toast: cn( "group/toast flex w-full items-start gap-3 rounded-xl py-3 pr-3 pl-3.5 text-sm sm:w-[360px]", soft ? "bg-(--s-subtle) text-(--s-title) shadow-[inset_0_0_0_1px_var(--s-border),0_12px_32px_-8px_var(--shade-3),0_4px_10px_-4px_var(--shade-2)]" : "bg-popover text-popover-foreground shadow-[inset_3px_0_0_0_var(--t-accent,transparent),0_0_0_1px_var(--shade-border),0_12px_32px_-8px_var(--shade-3),0_4px_10px_-4px_var(--shade-2)]", // Plain toast(): no icon, keep the text aligned with the surface edge. "has-[[data-icon]:empty]:pl-4", // Collapsed stack: the toasts behind the front one show only their edge. "data-[expanded=false]:data-[front=false]:[&>*]:opacity-0" ), default: statusTint.neutral, loading: statusTint.neutral, success: statusTint.success, info: statusTint.info, warning: cn(statusTint.warning, accent), error: cn(statusTint.danger, accent), icon: "relative mt-px flex size-4.5 shrink-0 items-center justify-center [&:empty]:hidden", content: "flex min-w-0 flex-1 flex-col gap-0.5 py-px", title: "font-medium leading-5", // `!`: Sonner's dark theme sets its own description color with a stronger selector. description: cn("text-[13px] leading-5", soft ? "text-(--s-body)!" : "text-muted-foreground!"), // Like Banner actions: a neutral outline on the card, a tinted raised surface on soft. actionButton: soft ? cn( buttonVariants({ variant: "ghost", size: "xs" }), "ml-1 shrink-0 self-center bg-tint-surface shadow-[inset_0_0_0_1px_var(--s-border),0_1px_2px_0_var(--shade-1)] [--c-text:var(--s-title)] hover:bg-tint-surface-hover focus-visible:ring-(--s-icon)/50" ) : cn(buttonVariants({ variant: "outline", size: "xs" }), "ml-1 shrink-0 self-center"), cancelButton: cn( buttonVariants({ variant: "ghost", size: "xs" }), "shrink-0 self-center", soft ? "[--c-subtle:var(--s-hover)] [--c-text:var(--s-body)]" : "text-muted-foreground" ), closeButton: "absolute top-2 right-2 flex size-6 items-center justify-center rounded-md border-0! bg-transparent! text-icon! transition-colors hover:bg-(--s-hover)! hover:text-foreground! [&_svg]:size-3.5", ...toastOptions?.classNames, }, }} {...props} /> ) } export { Toaster, type ToasterProps } 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","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@ikas","registryDependencies":["@ikas/animated-check","@ikas/button","@ikas/spinner","@ikas/status","@ikas/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/sonner.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]