{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sonner",
  "title": "Sonner",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/sonner/Sonner.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { ToasterProps as SvelteSonnerToasterProps } from 'svelte-sonner'\n\n  // Type intersection, not `interface extends`: ToasterProps carries mapped\n  // helper types that an interface heritage clause silently drops members from.\n  export type SonnerProps = SvelteSonnerToasterProps & {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { CircleCheck, Info, LoaderCircle, OctagonX, TriangleAlert, X } from '@lucide/svelte'\n  import { Toaster as Sonner } from 'svelte-sonner'\n  import { cn } from '$lib/utils'\n\n  // Sonner cadence — UX_MICROINTERACTIONS.md research:\n  // 4000ms default, bottom-right position so swipe-right dismiss reads\n  // naturally, max 3 visible (older stack with scale offset), rich colors\n  // so success/error/info/warning each get distinct variants.\n  let {\n    class: className,\n    position = 'bottom-right',\n    duration = 4000,\n    visibleToasts = 3,\n    richColors = true,\n    closeButton = false,\n    expand = false,\n    ...restProps\n  }: SonnerProps = $props()\n</script>\n\n{#snippet successIcon()}\n  <CircleCheck class=\"size-4\" aria-hidden=\"true\" />\n{/snippet}\n\n{#snippet infoIcon()}\n  <Info class=\"size-4\" aria-hidden=\"true\" />\n{/snippet}\n\n{#snippet warningIcon()}\n  <TriangleAlert class=\"size-4\" aria-hidden=\"true\" />\n{/snippet}\n\n{#snippet errorIcon()}\n  <OctagonX class=\"size-4\" aria-hidden=\"true\" />\n{/snippet}\n\n{#snippet loadingIcon()}\n  <LoaderCircle class=\"size-4 motion-safe:animate-spin\" aria-hidden=\"true\" />\n{/snippet}\n\n{#snippet closeIcon()}\n  <X class=\"size-4\" aria-hidden=\"true\" />\n{/snippet}\n\n<Sonner\n  class={cn('toaster group', className)}\n  style=\"--normal-bg:var(--popover);--normal-text:var(--popover-foreground);--normal-border:var(--border);--border-radius:var(--radius)\"\n  {position}\n  {duration}\n  {visibleToasts}\n  {richColors}\n  {closeButton}\n  {expand}\n  {successIcon}\n  {infoIcon}\n  {warningIcon}\n  {errorIcon}\n  {loadingIcon}\n  {closeIcon}\n  {...restProps}\n/>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sonner/Sonner.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sonner/index.ts",
      "content": "export { default as Toaster, type SonnerProps } from './Sonner.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sonner/index.ts"
    }
  ],
  "dependencies": [
    "@lucide/svelte",
    "svelte-sonner"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `svelte-sonner` library with the registry’s tokens applied. Fire toasts with `toast()` from `svelte-sonner`.",
  "categories": [
    "feedback"
  ]
}