{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "section-card",
  "title": "Section Card",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/section-card/section-card.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { cardVariants } from '@/ui/card/card.variants'\nimport {\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\n\n/**\n * Angular port of UIPKGE SectionCard (React `SectionCard`): a Card with a title/description\n * header, a content well and an optional footer. The host is the Card itself (same classes and\n * data-slot as React's `<Card>`). React's `headerAction` / `footer` props are the\n * `[slot=header-action]` / `[slot=footer]` projections, rendered verbatim with no wrapper.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-section-card, [ui-section-card]',\n  standalone: true,\n  imports: [UiCardHeaderComponent, UiCardTitleComponent, UiCardDescriptionComponent, UiCardContentComponent],\n  host: {\n    '[attr.data-slot]': 'dataSlot',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<div ui-card-header class=\"pb-4\">\n      <div class=\"flex flex-wrap items-center justify-between gap-2\">\n        <div class=\"min-w-0\">\n          <h3 ui-card-title class=\"text-base font-semibold\">{{ title }}</h3>\n          @if (description) {\n            <p ui-card-description class=\"mt-0.5\">{{ description }}</p>\n          }\n        </div>\n        <ng-content select=\"[slot=header-action]\" />\n      </div>\n    </div>\n    <div ui-card-content [class]=\"contentClass\"><ng-content /></div>\n    <ng-content select=\"[slot=footer]\" />`,\n})\nexport class UiSectionCardComponent {\n  @Input() title = ''\n  /** A consumer's data-slot wins, as React spreads its props after data-slot=\"card\". */\n  @Input('data-slot') dataSlot = 'card'\n  @Input() description?: string\n  @Input() contentClassName?: string\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn(cardVariants({ variant: 'default' }), 'overflow-hidden', 'flex flex-col', this.className)\n  }\n\n  get contentClass(): string {\n    return cn('flex-1', this.contentClassName)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/section-card/section-card.component.ts"
    },
    {
      "path": "packages/registry-angular/components/section-card/index.ts",
      "content": "export { UiSectionCardComponent } from './section-card.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/section-card/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/card.json"
  ],
  "description": "Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.",
  "categories": [
    "layout"
  ]
}