{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "features-icon-list-dense",
  "title": "Features — Dense Icon List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/features-icon-list-dense/features-icon-list-dense.component.ts",
      "content": "// Compact three-column list of twelve capabilities with small icons and one-line\n// descriptions, for the lower half of a landing page where breadth matters more than\n// depth. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n  ArrowRight,\n  Bell,\n  Boxes,\n  Clock,\n  Download,\n  FileSearch,\n  GitBranch,\n  Globe,\n  KeyRound,\n  Lock,\n  LucideAngularModule,\n  Receipt,\n  Share2,\n  Terminal,\n  type LucideIconData,\n} 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 DenseCapability {\n  icon: LucideIconData\n  title: string\n  body: string\n}\n\nconst defaultCapabilities: DenseCapability[] = [\n  { icon: GitBranch, title: 'Version control', body: 'Every definition change is a reviewable diff.' },\n  { icon: Lock, title: 'Row-level scope', body: 'Resolved per query from your IdP.' },\n  { icon: KeyRound, title: 'SSO + SCIM', body: 'Okta, Entra ID, and Google Workspace.' },\n  { icon: Clock, title: 'Freshness policy', body: 'Per-metric materialisation schedules.' },\n  { icon: Receipt, title: 'Cost ceilings', body: 'Query budgets enforced per team.' },\n  { icon: Bell, title: 'Drift alerts', body: 'Threshold and anomaly triggers.' },\n  { icon: FileSearch, title: 'Audit export', body: 'Generated from change history.' },\n  { icon: Share2, title: 'Scoped sharing', body: 'Signed links that respect permissions.' },\n  { icon: Boxes, title: 'Embedding', body: 'Same dashboards inside your product.' },\n  { icon: Terminal, title: 'CLI + API', body: 'Everything the UI does, scriptable.' },\n  { icon: Download, title: 'Exports', body: 'CSV, Parquet, and scheduled delivery.' },\n  { icon: Globe, title: 'Data residency', body: 'EU, US, and AU regions available.' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-features-icon-list-dense, [ui-features-icon-list-dense]',\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-icon-list-dense\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-24\">\n        <div class=\"flex flex-wrap items-end justify-between gap-6\">\n          <div class=\"max-w-2xl\">\n            <span ui-badge variant=\"secondary\">Also included</span>\n            <h2 class=\"mt-4 text-2xl font-semibold tracking-tight sm:text-3xl\">The rest of the surface area</h2>\n            <p class=\"text-muted-foreground mt-2\">\n              The detail sections above cover the hard parts. This is everything else, in one pass.\n            </p>\n          </div>\n          <button ui-button variant=\"ghost\">\n            Full feature list\n            <lucide-icon [img]=\"ArrowRight\" class=\"ml-2 size-4\" aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        <ui-separator class=\"my-10\" />\n\n        <ul class=\"grid gap-x-10 gap-y-7 sm:grid-cols-2 lg:grid-cols-3\">\n          @for (capability of capabilities; track capability.title) {\n            <li class=\"flex gap-3\">\n              <lucide-icon\n                [img]=\"capability.icon\"\n                class=\"text-muted-foreground mt-0.5 size-4 shrink-0\"\n                aria-hidden=\"true\"\n              />\n              <div class=\"min-w-0\">\n                <p class=\"text-sm font-medium\">{{ capability.title }}</p>\n                <p class=\"text-muted-foreground mt-0.5 text-xs leading-relaxed\">{{ capability.body }}</p>\n              </div>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeaturesIconListDenseComponent {\n  protected readonly ArrowRight = ArrowRight\n\n  @Input() capabilities: DenseCapability[] = 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-icon-list-dense/features-icon-list-dense.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/features-icon-list-dense/index.ts",
      "content": "export { UiFeaturesIconListDenseComponent, type DenseCapability } from './features-icon-list-dense.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/features-icon-list-dense/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": "Compact three-column list of twelve capabilities with small icons and one-line descriptions, for the lower half of a landing page where breadth matters more than depth.",
  "categories": [
    "marketing"
  ]
}