{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "features-checklist-split",
  "title": "Features — Checklist Split",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/features-checklist-split/features-checklist-split.component.ts",
      "content": "// Two-column feature section pairing a sticky pitch column with a dense two-up\n// checklist of capabilities, each line carrying a short qualifier rather than a\n// marketing adjective. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, Check, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface ChecklistCapability {\n  label: string\n  detail: string\n}\n\nconst defaultCapabilities: ChecklistCapability[] = [\n  { label: 'Versioned metric definitions', detail: 'Git-backed, reviewable' },\n  { label: 'Row-level access control', detail: 'Evaluated per query' },\n  { label: 'Warehouse pass-through', detail: 'No data copied out' },\n  { label: 'Scheduled materialisation', detail: 'Per-metric freshness' },\n  { label: 'SCIM + SAML provisioning', detail: 'Okta, Entra, Google' },\n  { label: 'Audit log export', detail: 'Generated from history' },\n  { label: 'Cost ceilings per team', detail: 'Enforced at query time' },\n  { label: 'Embedded dashboards', detail: 'Signed URLs, scoped' },\n  { label: 'Period locking', detail: 'Restatements tracked' },\n  { label: 'Alerting on drift', detail: 'Threshold or anomaly' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-features-checklist-split, [ui-features-checklist-split]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiSeparatorComponent],\n  template: `\n    <section data-slot=\"features-checklist-split\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"grid gap-12 lg:grid-cols-[1fr_1.4fr] lg:gap-16\">\n          <!-- Sticky pitch: stays put while the longer checklist scrolls past. -->\n          <div class=\"lg:sticky lg:top-24 lg:self-start\">\n            <span ui-badge variant=\"secondary\">Capabilities</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n              Everything the reporting layer needs, nothing it doesn’t\n            </h2>\n            <p class=\"text-muted-foreground mt-3 leading-relaxed\">\n              No add-on tiers and no feature gates between plans. The list on the right is the product.\n            </p>\n            <button ui-button class=\"mt-6\">\n              Compare plans\n              <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n            </button>\n          </div>\n\n          <div>\n            <ul class=\"grid gap-x-8 sm:grid-cols-2\">\n              @for (capability of capabilities; track capability.label) {\n                <li class=\"py-3\">\n                  <div class=\"flex items-start gap-3\">\n                    <lucide-icon [img]=\"Check\" class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                    <div class=\"min-w-0\">\n                      <p class=\"text-sm font-medium\">{{ capability.label }}</p>\n                      <p class=\"text-muted-foreground mt-0.5 text-xs\">{{ capability.detail }}</p>\n                    </div>\n                  </div>\n                  <ui-separator class=\"mt-3\" />\n                </li>\n              }\n            </ul>\n            <p class=\"text-muted-foreground mt-6 text-xs\">\n              Every capability is available on every plan. Limits differ, features do not.\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeaturesChecklistSplitComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n\n  @Input() capabilities: ChecklistCapability[] = defaultCapabilities.map((c) => ({ ...c }))\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/features-checklist-split/features-checklist-split.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/features-checklist-split/index.ts",
      "content": "export { UiFeaturesChecklistSplitComponent, type ChecklistCapability } from './features-checklist-split.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/features-checklist-split/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Two-column feature section pairing a sticky pitch column with a dense two-up checklist of capabilities, each line carrying a short qualifier rather than a marketing adjective.",
  "categories": [
    "marketing"
  ]
}