🐛 fix(cli): ensure tailwindcss-animate is installed

Author: Luizgomess

apps/web/public/r/accordion.json

@@ -4,25 +4,25 @@
   "files": [
     {
       "name": "alert.component.ts",
-      "content": "import { ChangeDetectionStrategy, Component, computed, input, TemplateRef, ViewEncapsulation } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert } from '@ng-icons/lucide';\nimport type { ClassValue } from 'clsx';\n\nimport { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  alertDescriptionVariants,\n  alertIconVariants,\n  alertTitleVariants,\n  alertVariants,\n  type ZardAlertTypeVariants,\n} from './alert.variants';\n\n@Component({\n  selector: 'z-alert, [z-alert]',\n  imports: [NgIcon, ZardStringTemplateOutletDirective],\n  template: `\n    @if (zIcon() || iconName()) {\n      <span [class]=\"iconClasses()\" data-slot=\"alert-icon\">\n        <ng-container *zStringTemplateOutlet=\"zIcon()\">\n          <ng-icon [name]=\"iconName()\" class=\"size-4!\" />\n        </ng-container>\n      </span>\n    }\n\n    <div class=\"flex-1\">\n      @if (zTitle()) {\n        <div [class]=\"titleClasses()\" data-slot=\"alert-title\">\n          <ng-container *zStringTemplateOutlet=\"zTitle()\">{{ zTitle() }}</ng-container>\n        </div>\n      }\n\n      @if (zDescription()) {\n        <div [class]=\"descriptionClasses()\" data-slot=\"alert-description\">\n          <ng-container *zStringTemplateOutlet=\"zDescription()\">{{ zDescription() }}</ng-container>\n        </div>\n      }\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideCircleAlert })],\n  host: {\n    role: 'alert',\n    '[class]': 'classes()',\n    '[attr.data-slot]': '\"alert\"',\n  },\n  exportAs: 'zAlert',\n})\nexport class ZardAlertComponent {\n  readonly class = input<ClassValue>('');\n  readonly zTitle = input<string | TemplateRef<void>>('');\n  readonly zDescription = input<string | TemplateRef<void>>('');\n  readonly zIcon = input<TemplateRef<void> | string>();\n  readonly zType = input<ZardAlertTypeVariants>('default');\n\n  protected readonly classes = computed(() => mergeClasses(alertVariants({ zType: this.zType() }), this.class()));\n\n  protected readonly iconClasses = computed(() => alertIconVariants());\n\n  protected readonly titleClasses = computed(() => alertTitleVariants());\n\n  protected readonly descriptionClasses = computed(() => alertDescriptionVariants({ zType: this.zType() }));\n\n  protected readonly shouldShowIcon = computed(() => this.zIcon() !== undefined || this.zType() === 'destructive');\n\n  protected readonly iconName = computed((): string | undefined => {\n    const customIcon = this.zIcon();\n    if (customIcon && !(customIcon instanceof TemplateRef)) {\n      return customIcon;\n    }\n\n    if (this.zType() === 'destructive') {\n      return 'lucideCircleAlert';\n    }\n\n    return undefined;\n  });\n}\n"
+      "content": "import { ChangeDetectionStrategy, Component, computed, input, TemplateRef, ViewEncapsulation } from '@angular/core';\r\n\r\nimport { NgIcon, provideIcons } from '@ng-icons/core';\r\nimport { lucideCircleAlert } from '@ng-icons/lucide';\r\nimport type { ClassValue } from 'clsx';\r\n\r\nimport { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';\r\nimport { mergeClasses } from '@/shared/utils/merge-classes';\r\n\r\nimport {\r\n  alertDescriptionVariants,\r\n  alertIconVariants,\r\n  alertTitleVariants,\r\n  alertVariants,\r\n  type ZardAlertTypeVariants,\r\n} from './alert.variants';\r\n\r\n@Component({\r\n  selector: 'z-alert, [z-alert]',\r\n  imports: [NgIcon, ZardStringTemplateOutletDirective],\r\n  template: `\r\n    @if (zIcon() || iconName()) {\r\n      <span [class]=\"iconClasses()\" data-slot=\"alert-icon\">\r\n        <ng-container *zStringTemplateOutlet=\"zIcon()\">\r\n          <ng-icon [name]=\"iconName()\" class=\"size-4!\" />\r\n        </ng-container>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"flex-1\">\r\n      @if (zTitle()) {\r\n        <div [class]=\"titleClasses()\" data-slot=\"alert-title\">\r\n          <ng-container *zStringTemplateOutlet=\"zTitle()\">{{ zTitle() }}</ng-container>\r\n        </div>\r\n      }\r\n\r\n      @if (zDescription()) {\r\n        <div [class]=\"descriptionClasses()\" data-slot=\"alert-description\">\r\n          <ng-container *zStringTemplateOutlet=\"zDescription()\">{{ zDescription() }}</ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  `,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  viewProviders: [provideIcons({ lucideCircleAlert })],\r\n  host: {\r\n    role: 'alert',\r\n    '[class]': 'classes()',\r\n    '[attr.data-slot]': '\"alert\"',\r\n  },\r\n  exportAs: 'zAlert',\r\n})\r\nexport class ZardAlertComponent {\r\n  readonly class = input<ClassValue>('');\r\n  readonly zTitle = input<string | TemplateRef<void>>('');\r\n  readonly zDescription = input<string | TemplateRef<void>>('');\r\n  readonly zIcon = input<TemplateRef<void> | string>();\r\n  readonly zType = input<ZardAlertTypeVariants>('default');\r\n\r\n  protected readonly classes = computed(() => mergeClasses(alertVariants({ zType: this.zType() }), this.class()));\r\n\r\n  protected readonly iconClasses = computed(() => alertIconVariants());\r\n\r\n  protected readonly titleClasses = computed(() => alertTitleVariants());\r\n\r\n  protected readonly descriptionClasses = computed(() => alertDescriptionVariants({ zType: this.zType() }));\r\n\r\n  protected readonly shouldShowIcon = computed(() => this.zIcon() !== undefined || this.zType() === 'destructive');\r\n\r\n  protected readonly iconName = computed((): string | undefined => {\r\n    const customIcon = this.zIcon();\r\n    if (customIcon && !(customIcon instanceof TemplateRef)) {\r\n      return customIcon;\r\n    }\r\n\r\n    if (this.zType() === 'destructive') {\r\n      return 'lucideCircleAlert';\r\n    }\r\n\r\n    return undefined;\r\n  });\r\n}\r\n"
     },
     {
       "name": "alert.variants.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm flex items-center gap-3', {\n  variants: {\n    zType: {\n      default: 'bg-card text-card-foreground',\n      destructive: 'text-destructive bg-card',\n    },\n  },\n  defaultVariants: {\n    zType: 'default',\n  },\n});\n\nexport const alertIconVariants = cva('shrink-0 self-start text-base!');\n\nexport const alertTitleVariants = cva('font-medium tracking-tight leading-none');\n\nexport const alertDescriptionVariants = cva('text-sm/relaxed mt-1', {\n  variants: {\n    zType: {\n      default: 'text-muted-foreground',\n      destructive: 'text-destructive/90',\n    },\n  },\n  defaultVariants: {\n    zType: 'default',\n  },\n});\n\nexport type ZardAlertTypeVariants = NonNullable<VariantProps<typeof alertVariants>['zType']>;\n"
+      "content": "import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm flex items-center gap-3', {\r\n  variants: {\r\n    zType: {\r\n      default: 'bg-card text-card-foreground',\r\n      destructive: 'text-destructive bg-card',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    zType: 'default',\r\n  },\r\n});\r\n\r\nexport const alertIconVariants = cva('shrink-0 self-start text-base!');\r\n\r\nexport const alertTitleVariants = cva('font-medium tracking-tight leading-none');\r\n\r\nexport const alertDescriptionVariants = cva('text-sm/relaxed mt-1', {\r\n  variants: {\r\n    zType: {\r\n      default: 'text-muted-foreground',\r\n      destructive: 'text-destructive/90',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    zType: 'default',\r\n  },\r\n});\r\n\r\nexport type ZardAlertTypeVariants = NonNullable<VariantProps<typeof alertVariants>['zType']>;\r\n"
     },
     {
       "name": "index.ts",
-      "content": "export * from './alert.component';\nexport * from './alert.variants';\n"
+      "content": "export * from './alert.component';\r\nexport * from './alert.variants';\r\n"
     }
   ],
   "docs": {
-    "overview": "# Alert\n\nDisplays a callout for user attention.\n",
-    "api": "# API Reference\n\n[z-alert] Component\n\n| Property         | Description       | Type                          | Default   |\n| ---------------- | ----------------- | ----------------------------- | --------- |\n| `[zTitle]`       | Alert title       | `string \\| TemplateRef<void>` | `-`       |\n| `[zDescription]` | Alert description | `string \\| TemplateRef<void>` | `-`       |\n| `[zIcon]`        | Alert icon        | `TemplateRef<void> \\| string` | `-`       |\n| `[zType]`        | Alert variant     | `default \\| destructive`      | `default` |\n\n**zIcon:** if not specified, default icon will be `lucideCircleAlert`\n"
+    "overview": "# Alert\r\n\r\nDisplays a callout for user attention.\r\n",
+    "api": "# API Reference\r\n\r\n[z-alert] Component\r\n\r\n| Property         | Description       | Type                          | Default   |\r\n| ---------------- | ----------------- | ----------------------------- | --------- |\r\n| `[zTitle]`       | Alert title       | `string \\| TemplateRef<void>` | `-`       |\r\n| `[zDescription]` | Alert description | `string \\| TemplateRef<void>` | `-`       |\r\n| `[zIcon]`        | Alert icon        | `TemplateRef<void> \\| string` | `-`       |\r\n| `[zType]`        | Alert variant     | `default \\| destructive`      | `default` |\r\n\r\n**zIcon:** if not specified, default icon will be `lucideCircleAlert`\r\n"
   },
   "demos": [
     {
       "name": "basic.ts",
-      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck, lucidePopcorn } from '@ng-icons/lucide';\n\nimport { ZardAlertComponent } from '../alert.component';\n\n@Component({\n  selector: 'z-demo-alert-basic',\n  imports: [ZardAlertComponent, NgIcon],\n  template: `\n    <div class=\"grid w-full max-w-xl items-start gap-4\">\n      <z-alert\n        [zIcon]=\"successIcon\"\n        zTitle=\"Success! Your changes have been saved\"\n        zDescription=\"This is an alert with icon, title and description.\"\n      />\n\n      <z-alert [zIcon]=\"customIcon\" zTitle=\"This Alert has a title and an icon. No description.\" />\n\n      <ng-template #customIcon>\n        <ng-icon name=\"lucidePopcorn\" />\n      </ng-template>\n\n      <z-alert zType=\"destructive\" zTitle=\"Unable to process your payment.\" [zDescription]=\"customDescription\" />\n\n      <ng-template #customDescription>\n        <p>Please verify your billing information and try again.</p>\n        <ul class=\"list-disc pl-5\">\n          <li>Check your card details</li>\n          <li>Ensure sufficient funds</li>\n          <li>Verify billing address</li>\n        </ul>\n      </ng-template>\n\n      <ng-template #successIcon><ng-icon name=\"lucideCircleCheck\" /></ng-template>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideCircleCheck, lucidePopcorn })],\n})\nexport class ZardDemoAlertBasicComponent {}\n"
+      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\r\n\r\nimport { NgIcon, provideIcons } from '@ng-icons/core';\r\nimport { lucideCircleCheck, lucidePopcorn } from '@ng-icons/lucide';\r\n\r\nimport { ZardAlertComponent } from '../alert.component';\r\n\r\n@Component({\r\n  selector: 'z-demo-alert-basic',\r\n  imports: [ZardAlertComponent, NgIcon],\r\n  template: `\r\n    <div class=\"grid w-full max-w-xl items-start gap-4\">\r\n      <z-alert\r\n        [zIcon]=\"successIcon\"\r\n        zTitle=\"Success! Your changes have been saved\"\r\n        zDescription=\"This is an alert with icon, title and description.\"\r\n      />\r\n\r\n      <z-alert [zIcon]=\"customIcon\" zTitle=\"This Alert has a title and an icon. No description.\" />\r\n\r\n      <ng-template #customIcon>\r\n        <ng-icon name=\"lucidePopcorn\" />\r\n      </ng-template>\r\n\r\n      <z-alert zType=\"destructive\" zTitle=\"Unable to process your payment.\" [zDescription]=\"customDescription\" />\r\n\r\n      <ng-template #customDescription>\r\n        <p>Please verify your billing information and try again.</p>\r\n        <ul class=\"list-disc pl-5\">\r\n          <li>Check your card details</li>\r\n          <li>Ensure sufficient funds</li>\r\n          <li>Verify billing address</li>\r\n        </ul>\r\n      </ng-template>\r\n\r\n      <ng-template #successIcon><ng-icon name=\"lucideCircleCheck\" /></ng-template>\r\n    </div>\r\n  `,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  viewProviders: [provideIcons({ lucideCircleCheck, lucidePopcorn })],\r\n})\r\nexport class ZardDemoAlertBasicComponent {}\r\n"
     }
   ]
 }