{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "bento-asymmetric-grid",
  "title": "Bento — Asymmetric Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/bento-asymmetric-grid/bento-asymmetric-grid.component.ts",
      "content": "// Five-tile asymmetric bento anchored by one tall tile, the rest carrying a metric,\n// a budget breakdown, and a customer quote. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowUpRight, LucideAngularModule, Quote } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nconst capabilities = ['Versioned definitions', 'Row-level access', 'Query budgets', 'Drift alerting', 'Audit export']\n\nconst budgets = [\n  { team: 'Finance', used: 62 },\n  { team: 'RevOps', used: 38 },\n  { team: 'Product', used: 81 },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-bento-asymmetric-grid, [ui-bento-asymmetric-grid]',\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: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiProgressComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"bento-asymmetric-grid\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">The shape of it</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">One layer, five jobs</h2>\n        </div>\n\n        <!-- Spans are explicit rather than auto-flowed, so rearranging the\n             composition is a class change and not a reshuffle of the markup. -->\n        <div class=\"mt-10 grid gap-3 sm:grid-cols-3 lg:grid-rows-2\">\n          <div ui-card class=\"sm:row-span-2\">\n            <div ui-card-content class=\"flex h-full flex-col p-6\">\n              <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Everything included</p>\n              <h3 class=\"mt-3 text-xl font-semibold tracking-tight text-balance\">No feature gates between plans</h3>\n              <p class=\"text-muted-foreground mt-3 text-sm leading-relaxed\">\n                Limits differ; capabilities do not. The list below is on every plan from the first day of a trial.\n              </p>\n\n              <ui-separator class=\"my-5\" />\n\n              <ul class=\"space-y-2.5\">\n                @for (capability of capabilities; track capability) {\n                  <li class=\"flex items-center gap-2.5 text-sm\">\n                    <span class=\"bg-primary size-1.5 shrink-0 rounded-full\" aria-hidden=\"true\"></span>\n                    <span>{{ capability }}</span>\n                  </li>\n                }\n              </ul>\n\n              <button ui-button variant=\"outline\" size=\"sm\" class=\"mt-auto self-start pt-0 [&]:mt-6\">\n                Compare plans\n              </button>\n            </div>\n          </div>\n\n          <div ui-card class=\"sm:col-span-2\">\n            <div ui-card-content class=\"flex h-full flex-wrap items-center justify-between gap-4 p-6\">\n              <div>\n                <p class=\"font-display text-4xl font-bold tracking-tight\">4.2 days</p>\n                <p class=\"text-muted-foreground mt-1 text-sm\">median time to close, down from 9.4</p>\n              </div>\n              <span ui-badge variant=\"secondary\" class=\"shrink-0\">240 rollouts</span>\n            </div>\n          </div>\n\n          <div ui-card>\n            <div ui-card-content class=\"p-6\">\n              <p class=\"text-muted-foreground text-xs tracking-wide uppercase\">Query budgets</p>\n              <div class=\"mt-4 space-y-3\">\n                @for (budget of budgetRows; track budget.team) {\n                  <div>\n                    <div class=\"flex items-baseline justify-between gap-3\">\n                      <span class=\"text-xs font-medium\">{{ budget.team }}</span>\n                      <span class=\"text-muted-foreground font-mono text-xs\">{{ budget.used }}%</span>\n                    </div>\n                    <ui-progress\n                      [value]=\"budget.used\"\n                      class=\"mt-1.5 h-1.5\"\n                      [attr.aria-label]=\"budget.team + ' budget used'\"\n                    />\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n\n          <div ui-card class=\"group\">\n            <div ui-card-content class=\"flex h-full flex-col p-6\">\n              <lucide-icon [img]=\"Quote\" class=\"text-muted-foreground/60 size-4\" aria-hidden=\"true\" />\n              <blockquote class=\"mt-3 text-sm leading-relaxed\">\n                “We stopped arguing about whose number was right.”\n              </blockquote>\n              <p class=\"text-muted-foreground mt-auto pt-4 text-xs\">Erin Walsh · VP Finance, Northwind</p>\n              <button ui-button variant=\"ghost\" size=\"sm\" class=\"mt-2 h-auto justify-start px-0 text-xs\">\n                Read the story\n                <lucide-icon\n                  [img]=\"ArrowUpRight\"\n                  class=\"ml-1 size-3 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  aria-hidden=\"true\"\n                />\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiBentoAsymmetricGridComponent {\n  protected readonly ArrowUpRight = ArrowUpRight\n  protected readonly Quote = Quote\n\n  protected readonly capabilities = capabilities\n  protected readonly budgetRows = budgets\n\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/bento-asymmetric-grid/bento-asymmetric-grid.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/bento-asymmetric-grid/index.ts",
      "content": "export { UiBentoAsymmetricGridComponent } from './bento-asymmetric-grid.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/bento-asymmetric-grid/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/card.json",
    "https://uipkge.dev/r/angular/progress.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Asymmetric bento where one tall tile anchors the composition and three shorter tiles carry a headline metric, a budget breakdown, and a customer quote.",
  "categories": [
    "marketing"
  ]
}