{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/alert/Alert.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AlertCircle, CheckCircle, Info, TriangleAlert } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { alertVariants } from './alert.variants'\n\n// Inlined union: SFC compiler can't extract runtime props from\n// `AlertVariants['variant']`.\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  variant?: 'default' | 'destructive'\n  icon?: 'info' | 'warning' | 'error' | 'success'\n  title?: string\n  text?: string\n}>()\n</script>\n\n<template>\n  <div role=\"alert\" data-uipkge data-slot=\"alert\" :class=\"cn(alertVariants({ variant }), props.class)\">\n    <div v-if=\"icon\" data-uipkge data-slot=\"alert-icon\" class=\"absolute top-4 left-4\">\n      <AlertCircle v-if=\"icon === 'error'\" class=\"size-4\" aria-hidden=\"true\" />\n      <CheckCircle v-else-if=\"icon === 'success'\" class=\"size-4\" aria-hidden=\"true\" />\n      <TriangleAlert v-else-if=\"icon === 'warning'\" class=\"size-4\" aria-hidden=\"true\" />\n      <Info v-else class=\"size-4\" aria-hidden=\"true\" />\n    </div>\n    <div data-uipkge data-slot=\"alert-content\" class=\"[&_p]:text-sm [&_p]:leading-relaxed\">\n      <p v-if=\"title\" class=\"text-sm font-medium\">{{ title }}</p>\n      <p v-if=\"text\" class=\"text-muted-foreground text-sm\">{{ text }}</p>\n      <slot />\n    </div>\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/alert/Alert.vue"
    },
    {
      "path": "packages/registry-vue/components/alert/AlertDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div\n    data-uipkge\n    data-slot=\"alert-description\"\n    :class=\"cn('text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/alert/AlertDescription.vue"
    },
    {
      "path": "packages/registry-vue/components/alert/AlertTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <component\n    :is=\"props.as ?? 'h5'\"\n    data-uipkge\n    data-slot=\"alert-title\"\n    :class=\"cn('mb-1 text-sm leading-none font-medium tracking-tight', props.class)\"\n  >\n    <slot />\n  </component>\n</template>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/alert/AlertTitle.vue"
    },
    {
      "path": "packages/registry-vue/components/alert/alert.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so `Alert.vue` can `import { alertVariants } from\n * './alert.variants'` without creating a circular dependency through the\n * index. See card.variants.ts for the same pattern + the SSR symptom that\n * motivated the split.\n */\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg]:text-foreground [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has([data-slot=alert-icon])]:pl-12 [&:has([data-slot=alert-description])]:pt-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground border-border',\n        destructive: 'border-destructive/20 text-destructive bg-destructive/5 [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/alert/alert.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/alert/index.ts",
      "content": "export { default as Alert } from './Alert.vue'\nexport { default as AlertDescription } from './AlertDescription.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Alert.vue <-> index.ts circular import that broke dev SSR for Card).\nexport { alertVariants, type AlertVariants } from './alert.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/alert/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Static, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.",
  "categories": [
    "feedback"
  ]
}