{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/card/card.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { cardVariants, type CardVariants } from './card.variants'\n\nexport type CardVariant = NonNullable<CardVariants['variant']>\n\n/**\n * Angular port of UIPKGE Card. Standalone, signals-ready.\n * Class strings come from shared `cardVariants` — identical to Vue/React.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card, [ui-card]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': 'dataSlot',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardComponent {\n  @Input() variant: CardVariant = 'default'\n  /** A consumer's data-slot wins, as React spreads its props after data-slot=\"card\". */\n  @Input('data-slot') dataSlot = 'card'\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block', cardVariants({ variant: this.variant }), 'overflow-hidden', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card-header, [ui-card-header]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"card-header\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardHeaderComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn(\n      'grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]',\n      this.className,\n    )\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card-title, [ui-card-title]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"card-title\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardTitleComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block leading-none font-semibold tracking-tight', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card-description, [ui-card-description]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"card-description\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardDescriptionComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block text-muted-foreground text-sm', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card-content, [ui-card-content]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"card-content\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardContentComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block p-6 pt-0', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card-footer, [ui-card-footer]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"card-footer\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardFooterComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex items-center p-6 pt-0', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-card-action, [ui-card-action]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"card-action\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiCardActionComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block col-start-2 row-span-2 row-start-1 self-start justify-self-end', this.className)\n  }\n}\n\nexport { cardVariants, type CardVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/card/card.component.ts"
    },
    {
      "path": "packages/registry-angular/components/card/card.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 `Card.vue` can `import { cardVariants } from './card.variants'`\n * without creating a circular dependency back through the index. The circular\n * form caused intermittent `$setup.cardVariants is not a function` errors\n * during dev SSR when several `<Card>` instances rendered in a v-for before\n * the module graph had fully resolved.\n */\nexport const cardVariants = cva(\n  'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150',\n  {\n    variants: {\n      variant: {\n        default: 'border-border',\n        elevated: 'border-transparent shadow-md hover:shadow-md',\n        outline: 'border-2',\n        ghost: 'border-transparent shadow-none hover:bg-muted/50',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type CardVariants = VariantProps<typeof cardVariants>\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/card/card.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/card/index.ts",
      "content": "export {\n  UiCardComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n  UiCardDescriptionComponent,\n  UiCardContentComponent,\n  UiCardFooterComponent,\n  UiCardActionComponent,\n  cardVariants,\n  type CardVariants,\n  type CardVariant,\n} from './card.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/card/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Bordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.",
  "categories": [
    "layout"
  ]
}