{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/alert/alert.component.ts",
      "content": "import { Component, ElementRef, Input, inject, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { alertVariants, type AlertVariants } from './alert.variants'\n\nexport type AlertVariant = NonNullable<AlertVariants['variant']>\nexport type AlertIcon = 'info' | 'warning' | 'error' | 'success'\nexport type AlertTitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n\n/**\n * Angular port of UIPKGE Alert (React `Alert`). `icon` renders the built-in Lucide glyph\n * (error / success / warning / info) as the first direct child so the `[&>svg]` absolute\n * layout in `alertVariants` positions and pads it; `title` / `text` render the shorthand\n * title + description. Composition children (a projected `<svg>`, `ui-alert-title`,\n * `ui-alert-description`) project straight into the host, so they stay direct children too.\n * `title` is consumed like the React prop: it never leaks into a native tooltip attribute.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-alert, [ui-alert]',\n  standalone: true,\n  host: {\n    '[attr.role]': '\"alert\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"alert\"',\n    '[attr.title]': 'null',\n    '[class]': 'hostClass',\n  },\n  template: `\n    @switch (icon) {\n      @case ('error') {\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-circle-alert size-4\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" />\n          <line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" />\n        </svg>\n      }\n      @case ('success') {\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-circle-check-big size-4\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M21.801 10A10 10 0 1 1 17 3.335\" />\n          <path d=\"m9 11 3 3L22 4\" />\n        </svg>\n      }\n      @case ('warning') {\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-triangle-alert size-4\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n          <path d=\"M12 9v4\" />\n          <path d=\"M12 17h.01\" />\n        </svg>\n      }\n      @case ('info') {\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-info size-4\"\n          aria-hidden=\"true\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <path d=\"M12 16v-4\" />\n          <path d=\"M12 8h.01\" />\n        </svg>\n      }\n    }\n    @if (title) {\n      <p data-uipkge=\"\" data-slot=\"alert-title\" class=\"mb-1 text-sm leading-none font-medium tracking-tight\">\n        {{ title }}\n      </p>\n    }\n    @if (text) {\n      <div\n        data-uipkge=\"\"\n        data-slot=\"alert-description\"\n        class=\"text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed\"\n      >\n        {{ text }}\n      </div>\n    }\n    <ng-content />\n  `,\n})\nexport class UiAlertComponent {\n  @Input() variant: AlertVariant = 'default'\n  @Input() icon?: AlertIcon\n  @Input() title?: string\n  @Input() text?: string\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block', alertVariants({ variant: this.variant }), this.className)\n  }\n}\n\n/**\n * React `AlertTitle` renders an `<h5>` (or the `as` element). Put it on a heading\n * (`<h5 ui-alert-title>`) for the native element; the `<ui-alert-title>` custom element\n * gets the same heading semantics via role=\"heading\" + aria-level from `as`.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-alert-title, [ui-alert-title]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"alert-title\"',\n    '[attr.role]': 'ariaLevel ? \"heading\" : null',\n    '[attr.aria-level]': 'ariaLevel',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiAlertTitleComponent {\n  private readonly isCustom = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement.tagName === 'UI-ALERT-TITLE'\n  @Input() as: AlertTitleAs = 'h5'\n  @Input('class') className?: string\n\n  get ariaLevel(): number | null {\n    return this.isCustom && this.as !== 'div' ? Number(this.as.slice(1)) : null\n  }\n\n  get hostClass(): string {\n    return cn('block mb-1 text-sm leading-none font-medium tracking-tight', this.className)\n  }\n}\n\n/** React `AlertDescription` (a `<div>`). */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-alert-description, [ui-alert-description]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"alert-description\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiAlertDescriptionComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', this.className)\n  }\n}\n\nexport { alertVariants, type AlertVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/alert/alert.component.ts"
    },
    {
      "path": "packages/registry-angular/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 *\n * Layout: composition children (svg + AlertTitle + AlertDescription) are\n * direct descendants of the root so `[&>svg]` absolute positioning works.\n */\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-foreground [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]',\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": "~/src/app/components/ui/alert/alert.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/alert/index.ts",
      "content": "export {\n  UiAlertComponent,\n  UiAlertTitleComponent,\n  UiAlertDescriptionComponent,\n  alertVariants,\n  type AlertVariants,\n  type AlertVariant,\n  type AlertIcon,\n  type AlertTitleAs,\n} from './alert.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/alert/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "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"
  ]
}