{
  "name": "card",
  "type": "registry:component",
  "files": [
    {
      "name": "card.component.ts",
      "content": "import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  type TemplateRef,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardStringTemplateOutletDirective } from '@/shared/core';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  cardActionVariants,\n  cardContentVariants,\n  cardDescriptionVariant,\n  cardFooterVariants,\n  cardHeaderVariants,\n  cardTitleVariant,\n  cardVariants,\n  type ZardCardSizeType,\n} from './card.variants';\n\n@Component({\n  selector: 'z-card-title, [z-card-title]',\n  imports: [ZardStringTemplateOutletDirective],\n  template: `\n    @let title = zTitle();\n    <ng-container *zStringTemplateOutlet=\"title\">{{ title }}</ng-container>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card-title',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCardTitle',\n})\nexport class ZardCardTitleComponent {\n  readonly class = input<ClassValue>('');\n  readonly zTitle = input<string | TemplateRef<void>>();\n\n  protected readonly classes = computed(() => mergeClasses(cardTitleVariant(), this.class()));\n}\n\n@Component({\n  selector: 'z-card-description, [z-card-description]',\n  imports: [ZardStringTemplateOutletDirective],\n  template: `\n    @let description = zDescription();\n    <ng-container *zStringTemplateOutlet=\"description\">{{ description }}</ng-container>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card-description',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCardDescription',\n})\nexport class ZardCardDescriptionComponent {\n  readonly class = input<ClassValue>('');\n  readonly zDescription = input<string | TemplateRef<void>>();\n\n  protected readonly classes = computed(() => mergeClasses(cardDescriptionVariant(), this.class()));\n}\n\n@Component({\n  selector: 'z-card-action, [z-card-action]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card-action',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCardAction',\n})\nexport class ZardCardActionComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(cardActionVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-card-header, [z-card-header]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card-header',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCardHeader',\n})\nexport class ZardCardHeaderComponent {\n  readonly class = input<ClassValue>('');\n  readonly zHeaderBorder = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    mergeClasses(cardHeaderVariants(), this.zHeaderBorder() ? 'border-b' : '', this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-card-content, [z-card-content]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card-content',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCardContent',\n})\nexport class ZardCardContentComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(cardContentVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-card-footer, [z-card-footer]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card-footer',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCardFooter',\n})\nexport class ZardCardFooterComponent {\n  readonly class = input<ClassValue>('');\n  readonly zFooterBorder = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() =>\n    mergeClasses(cardFooterVariants(), this.zFooterBorder() ? 'border-t' : '', this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-card, [z-card]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'card',\n    '[attr.data-size]': 'zSize()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zCard',\n})\nexport class ZardCardComponent {\n  readonly class = input<ClassValue>('');\n  readonly zSize = input<ZardCardSizeType>('default');\n\n  protected readonly classes = computed(() => mergeClasses(cardVariants(), this.class()));\n}\n"
    },
    {
      "name": "card.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const cardVariants = cva(\n  'group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n  {\n    variants: {\n      zSize: {\n        default: '',\n        sm: '',\n      },\n    },\n  },\n);\n\nexport type ZardCardSizeType = NonNullable<VariantProps<typeof cardVariants>['zSize']>;\n\nexport const cardHeaderVariants = cva(\n  'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [&.border-b]:pb-4 group-data-[size=sm]/card:[&.border-b]:pb-3',\n);\n\nexport const cardTitleVariant = cva('text-base/snug font-medium group-data-[size=sm]/card:text-sm');\n\nexport const cardDescriptionVariant = cva('text-sm text-muted-foreground');\n\nexport const cardActionVariants = cva('col-start-2 row-span-2 row-start-1 self-start justify-self-end');\n\nexport const cardContentVariants = cva('px-4 group-data-[size=sm]/card:px-3');\n\nexport const cardFooterVariants = cva('flex items-center rounded-b-xl bg-muted/50 p-4 group-data-[size=sm]/card:p-3');\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './card.component';\nexport * from './card.variants';\n"
    }
  ],
  "registryDependencies": [
    "button"
  ],
  "demos": [
    {
      "name": "default.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardCardImports } from '@/shared/components/card/card.imports';\nimport { ZardIdDirective } from '@/shared/core';\n\n@Component({\n  selector: 'z-demo-card-default',\n  imports: [ZardCardImports, ZardButtonComponent, ZardIdDirective],\n  template: `\n    <z-card class=\"w-full md:w-94\">\n      <div z-card-header>\n        <z-card-title zTitle=\"Login to your account\" />\n        <z-card-description zDescription=\"Enter your email below to login to your account\" />\n        <z-card-action>\n          <button z-button type=\"button\" zType=\"link\" (click)=\"onSignUp()\">Sign up</button>\n        </z-card-action>\n      </div>\n      <div z-card-content>\n        <div class=\"space-y-4\">\n          <div class=\"space-y-2\" zardId=\"email\" #e=\"zardId\">\n            <label\n              [for]=\"e.id()\"\n              class=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n              Email\n            </label>\n            <input\n              [id]=\"e.id()\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              class=\"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n              required\n            />\n          </div>\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center\" zardId=\"password\" #p=\"zardId\">\n              <label\n                [for]=\"p.id()\"\n                class=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n              >\n                Password\n              </label>\n              <a href=\"#\" class=\"ml-auto text-sm underline-offset-4 hover:underline\">Forgot your password?</a>\n            </div>\n            <input\n              [id]=\"p.id()\"\n              type=\"password\"\n              class=\"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n              required\n            />\n          </div>\n        </div>\n      </div>\n      <div z-card-footer class=\"flex-col gap-2\">\n        <z-button zType=\"default\" class=\"w-full\">Login</z-button>\n        <z-button zType=\"outline\" class=\"w-full\">Login with Google</z-button>\n      </div>\n    </z-card>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoCardDefaultComponent {\n  protected onSignUp(): void {\n    alert('Redirect to Sign Up');\n  }\n}\n"
    },
    {
      "name": "image.ts",
      "content": "import { NgOptimizedImage } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardBadgeComponent } from '@/shared/components/badge';\nimport { ZardButtonComponent } from '@/shared/components/button';\nimport { ZardCardImports } from '@/shared/components/card/card.imports';\n\n@Component({\n  selector: 'z-demo-card-image',\n  imports: [ZardCardImports, ZardButtonComponent, ZardBadgeComponent, NgOptimizedImage],\n  template: `\n    <z-card class=\"relative mx-auto w-full min-w-sm pt-0\">\n      <div class=\"absolute inset-0 z-30 aspect-video bg-black/35\"></div>\n      <img\n        ngSrc=\"https://avatar.vercel.sh/shadcn1\"\n        alt=\"Event cover\"\n        class=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40\"\n        width=\"120\"\n        height=\"120\"\n      />\n      <z-card-header>\n        <z-card-action>\n          <z-badge zType=\"secondary\">Featured</z-badge>\n        </z-card-action>\n        <z-card-title zTitle=\"Design systems meetup\" />\n        <z-card-description\n          zDescription=\"A practical talk on component APIs, accessibility, and shipping\n          faster.\"\n        />\n      </z-card-header>\n      <z-card-footer>\n        <z-button class=\"w-full\">View Event</z-button>\n      </z-card-footer>\n    </z-card>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoCardImageComponent {}\n"
    },
    {
      "name": "size.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button';\nimport { ZardCardImports } from '@/shared/components/card/card.imports';\n\n@Component({\n  selector: 'z-demo-card-small',\n  imports: [ZardCardImports, ZardButtonComponent],\n  template: `\n    <z-card zSize=\"sm\" class=\"mx-auto w-full max-w-sm\">\n      <z-card-header>\n        <z-card-title zTitle=\"Small Card\" />\n        <z-card-description zDescription=\"This card uses the small size variant.\" />\n      </z-card-header>\n      <z-card-content>\n        <p>\n          The card component supports a zSize input that can be set to &quot;sm&quot; for a more compact appearance.\n        </p>\n      </z-card-content>\n      <z-card-footer>\n        <z-button zType=\"outline\" zSize=\"sm\" class=\"w-full\">Action</z-button>\n      </z-card-footer>\n    </z-card>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoCardSmallComponent {}\n"
    }
  ]
}