{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-vertical-tabs-pane",
  "title": "Features — Vertical Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/feature-vertical-tabs-pane/feature-vertical-tabs-pane.component.ts",
      "content": "// Vertical feature tabs where each trigger carries a title and one-line summary,\n// swapping a wide preview pane built from primitives without changing the panel\n// height. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { 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 { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiTabsComponent,\n  UiTabsContentComponent,\n  UiTabsListComponent,\n  UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\nexport interface VerticalFeature {\n  id: string\n  title: string\n  summary: string\n  body: string\n  points: string[]\n  rows: { name: string; detail: string }[]\n}\n\nconst features: VerticalFeature[] = [\n  {\n    id: 'definitions',\n    title: 'Versioned definitions',\n    summary: 'Reviewed like code',\n    body: 'Every metric is a file with an owner. Changing one opens a pull request carrying a diff, a reviewer, and a revert path — the same workflow the rest of your repo already uses.',\n    points: ['Branch per change', 'Required review', 'One-click revert'],\n    rows: [\n      { name: 'revenue_net', detail: 'v128 · finance' },\n      { name: 'margin_by_channel', detail: 'v41 · finance' },\n      { name: 'pipeline_weighted', detail: 'v12 · revops' },\n    ],\n  },\n  {\n    id: 'access',\n    title: 'Query-time access',\n    summary: 'Scope per identity',\n    body: 'Row-level scope resolves from your identity provider on every query. A dashboard link shared outside its audience renders the sender’s scope, never the recipient’s.',\n    points: ['SCIM group sync', 'Per-query evaluation', 'Audited'],\n    rows: [\n      { name: 'EMEA analyst', detail: 'region-scoped' },\n      { name: 'Finance lead', detail: 'full ledger' },\n      { name: 'Contractor', detail: 'no payroll' },\n    ],\n  },\n  {\n    id: 'cost',\n    title: 'Budgeted queries',\n    summary: 'Capped at run time',\n    body: 'Each team gets a budget the query planner enforces before execution, so warehouse spend is bounded rather than explained after the invoice arrives.',\n    points: ['Per-team ceilings', 'Materialised hot paths', 'Cost per dashboard'],\n    rows: [\n      { name: 'Finance', detail: '62% of budget' },\n      { name: 'RevOps', detail: '38% of budget' },\n      { name: 'Product', detail: '81% of budget' },\n    ],\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-feature-vertical-tabs-pane, [ui-feature-vertical-tabs-pane]',\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    UiSeparatorComponent,\n    UiTabsComponent,\n    UiTabsContentComponent,\n    UiTabsListComponent,\n    UiTabsTriggerComponent,\n  ],\n  template: `\n    <section data-slot=\"feature-vertical-tabs-pane\" [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\">Platform</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Three things worth the detail</h2>\n        </div>\n\n        <ui-tabs [value]=\"activeTab()\" (valueChange)=\"setActiveTab($event)\" orientation=\"vertical\" class=\"mt-10\">\n          <div class=\"grid gap-8 lg:grid-cols-[20rem_1fr] lg:gap-12\">\n            <ui-tabs-list variant=\"underline\" orientation=\"vertical\" class=\"h-auto w-full flex-col items-stretch\">\n              @for (feature of allFeatures; track feature.id) {\n                <button\n                  ui-tabs-trigger\n                  [value]=\"feature.id\"\n                  variant=\"underline\"\n                  orientation=\"vertical\"\n                  class=\"h-auto flex-col items-start gap-0.5 py-3 text-left\"\n                >\n                  <span class=\"text-sm font-medium\">{{ feature.title }}</span>\n                  <span class=\"text-muted-foreground text-xs\">{{ feature.summary }}</span>\n                </button>\n              }\n            </ui-tabs-list>\n\n            @for (feature of allFeatures; track feature.id) {\n              <ui-tabs-content [value]=\"feature.id\" class=\"mt-0\">\n                <!-- min-h holds the pane at the tallest panel so switching tabs\n                     never resizes the section. -->\n                <div class=\"grid min-h-[19rem] gap-6 sm:grid-cols-[1.2fr_1fr]\">\n                  <div>\n                    <h3 class=\"text-xl font-semibold tracking-tight\">{{ feature.title }}</h3>\n                    <p class=\"text-muted-foreground mt-3 leading-relaxed\">{{ feature.body }}</p>\n                    <ul class=\"mt-5 space-y-2\">\n                      @for (point of feature.points; track point) {\n                        <li class=\"flex items-start gap-2.5 text-sm\">\n                          <lucide-icon [img]=\"Check\" class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                          <span>{{ point }}</span>\n                        </li>\n                      }\n                    </ul>\n                    <button ui-button variant=\"link\" class=\"mt-5 h-auto p-0\">Read the reference</button>\n                  </div>\n\n                  <div ui-card class=\"self-start\">\n                    <div ui-card-content class=\"p-0\">\n                      <div class=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                        {{ feature.summary }}\n                      </div>\n                      <ul class=\"divide-border divide-y\">\n                        @for (row of feature.rows; track row.name) {\n                          <li class=\"flex items-center justify-between gap-3 px-4 py-2.5\">\n                            <span class=\"min-w-0 truncate font-mono text-xs\">{{ row.name }}</span>\n                            <span class=\"text-muted-foreground shrink-0 text-xs\">{{ row.detail }}</span>\n                          </li>\n                        }\n                      </ul>\n                      <ui-separator />\n                      <p class=\"text-muted-foreground px-4 py-2.5 text-xs\">Live values from your workspace.</p>\n                    </div>\n                  </div>\n                </div>\n              </ui-tabs-content>\n            }\n          </div>\n        </ui-tabs>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeatureVerticalTabsPaneComponent {\n  protected readonly Check = Check\n  protected readonly allFeatures = features\n\n  @Input() set defaultTab(v: string) {\n    if (features.some((f) => f.id === v)) this.activeTab.set(v)\n  }\n  @Input('class') className?: string\n\n  readonly activeTab = signal('definitions')\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  setActiveTab(value: string): void {\n    if (features.some((f) => f.id === value)) this.activeTab.set(value)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-vertical-tabs-pane/feature-vertical-tabs-pane.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/feature-vertical-tabs-pane/index.ts",
      "content": "export { UiFeatureVerticalTabsPaneComponent, type VerticalFeature } from './feature-vertical-tabs-pane.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-vertical-tabs-pane/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/separator.json",
    "https://uipkge.dev/r/angular/tabs.json"
  ],
  "description": "Vertical feature tabs where each trigger carries a title and one-line summary, swapping a wide preview pane built from primitives without changing the panel height.",
  "categories": [
    "marketing"
  ]
}