{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sonner",
  "title": "Sonner",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/sonner/Sonner.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { ToasterProps } from 'vue-sonner'\nimport { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'\nimport { Toaster as Sonner } from 'vue-sonner'\nimport { 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.\nconst props = withDefaults(defineProps<ToasterProps>(), {\n  position: 'bottom-right',\n  duration: 4000,\n  visibleToasts: 3,\n  richColors: true,\n  closeButton: false,\n  expand: false,\n})\n</script>\n\n<template>\n  <Sonner\n    :class=\"cn('toaster group', props.class)\"\n    :style=\"{\n      '--normal-bg': 'var(--popover)',\n      '--normal-text': 'var(--popover-foreground)',\n      '--normal-border': 'var(--border)',\n      '--border-radius': 'var(--radius)',\n    }\"\n    v-bind=\"props\"\n  >\n    <template #success-icon>\n      <CircleCheckIcon class=\"size-4\" aria-hidden=\"true\" />\n    </template>\n    <template #info-icon>\n      <InfoIcon class=\"size-4\" aria-hidden=\"true\" />\n    </template>\n    <template #warning-icon>\n      <TriangleAlertIcon class=\"size-4\" aria-hidden=\"true\" />\n    </template>\n    <template #error-icon>\n      <OctagonXIcon class=\"size-4\" aria-hidden=\"true\" />\n    </template>\n    <template #loading-icon>\n      <div>\n        <Loader2Icon class=\"size-4 animate-spin\" aria-hidden=\"true\" />\n      </div>\n    </template>\n    <template #close-icon>\n      <XIcon class=\"size-4\" aria-hidden=\"true\" />\n    </template>\n  </Sonner>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sonner/Sonner.vue"
    },
    {
      "path": "packages/registry-vue/components/sonner/index.ts",
      "content": "export { default as Toaster } from './Sonner.vue'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/sonner/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next",
    "vue-sonner"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `vue-sonner` library with the registry’s tokens applied.",
  "categories": [
    "feedback"
  ]
}