{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "alert",
  "type": "registry:ui",
  "files": [
    {
      "path": "ui/alert.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\n\nimport { computed, Directive, input } from '@angular/core'\n\nimport { cva } from 'class-variance-authority'\nimport { cn } from '~/lib/utils'\n\nconst alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>[ubAlertIcon]+div]:translate-y-[-3px] [&>[ubAlertIcon]]:absolute [&>[ubAlertIcon]]:left-4 [&>[ubAlertIcon]]:top-4 [&>[ubAlertIcon]]:text-foreground [&>[ubAlertIcon]~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>[ubAlertIcon]]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype AlertProps = VariantProps<typeof alertVariants>\ntype UbAlertVariant = NonNullable<AlertProps['variant']>\n\n@Directive({\n  selector: 'div[ubAlert]',\n  standalone: true,\n  host: {\n    'role': 'alert',\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbAlertDirective {\n  readonly class = input<string>()\n  readonly variant = input<UbAlertVariant>('default')\n\n  protected computedClass = computed(() =>\n    cn(alertVariants({ variant: this.variant(), class: this.class() })),\n  )\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubAlertIcon]',\n})\nexport class UbAlertIconDirective {}\n\n@Directive({\n  selector: 'h5[ubAlertTitle]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbAlertTitleDirective {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('mb-1 font-medium leading-none tracking-tight', this.class()),\n  )\n}\n\n@Directive({\n  selector: 'div[ubAlertDescription]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbAlertDescriptionDirective {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('text-sm [&_p]:leading-relaxed', this.class()),\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}