{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-metric-growth-stepper", "title": "Feature Metric Growth Stepper", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-metric-growth-stepper/feature-metric-growth-stepper.component.ts", "content": "// Scale progression workbench: a milestone stepper bar across growth stages plus an\n// active-stage deep dive (architecture capacity checklist + infrastructure telemetry).\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n CheckCircle2,\n Cpu,\n Globe,\n LucideAngularModule,\n ShieldCheck,\n TrendingUp,\n Zap,\n} 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'\n\nexport interface GrowthStage {\n id: string\n name: string\n stageLabel: string\n mrrRange: string\n description: string\n users: string\n qps: string\n nodes: number\n sla: string\n features: string[]\n}\n\nconst DEFAULT_STAGES: GrowthStage[] = [\n {\n id: 'seed',\n name: 'Seed & Validation',\n stageLabel: 'Stage 01',\n mrrRange: '$0 – $10k / mo',\n description:\n 'Instant zero-dependency UI primitives copied directly into your repository. Zero lock-in, zero build overhead.',\n users: '1k – 25k MAU',\n qps: '500 req/s',\n nodes: 3,\n sla: '99.9% Best Effort',\n features: [\n 'Unbundled component source ownership',\n 'Tailwind v4 theme variables',\n 'Single-command CLI installation',\n ],\n },\n {\n id: 'series-a',\n name: 'Series A Product-Market Fit',\n stageLabel: 'Stage 02',\n mrrRange: '$10k – $100k / mo',\n description: 'Scale complex dashboards and interactive blocks with full Reka UI/Radix headless accessibility.',\n users: '25k – 250k MAU',\n qps: '4,500 req/s',\n nodes: 12,\n sla: '99.95% Standard SLA',\n features: [\n 'Complex KPI grids & interactive charts',\n 'RBAC permission workspace switchers',\n 'Dual-framework Astro preview integration',\n ],\n },\n {\n id: 'scale',\n name: 'Hypergrowth Expansion',\n stageLabel: 'Stage 03',\n mrrRange: '$100k – $1M / mo',\n description:\n 'High-throughput global edge deployment with sub-millisecond component compilation and dedicated design system sync.',\n users: '250k – 2.5M MAU',\n qps: '35,000 req/s',\n nodes: 48,\n sla: '99.99% High Availability',\n features: [\n 'Global edge caching mesh',\n 'Automated cross-framework AST parity tests',\n 'Custom token preset distribution',\n ],\n },\n {\n id: 'enterprise',\n name: 'Global Enterprise Scale',\n stageLabel: 'Stage 04',\n mrrRange: '$1M+ / mo',\n description:\n 'Mission-critical resilience with multi-region failover, custom compliance SLAs, and dedicated design engineering support.',\n users: '10M+ MAU',\n qps: '250,000 req/s',\n nodes: 310,\n sla: '99.999% Fault Tolerant',\n features: [\n 'SOC2 & HIPAA compliant architecture',\n 'Sub-10ms global TTFB guarantees',\n '24/7 dedicated incident commander',\n ],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-metric-growth-stepper, [ui-feature-metric-growth-stepper]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Scale-Ready Architecture Stepper\n \n \n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n
\n\n \n
\n
\n @for (stage of activeStages(); track stage.id) {\n \n }\n
\n
\n\n \n
\n \n
\n
\n
\n
\n \n {{ currentStage().stageLabel }} • {{ currentStage().name }}\n \n
Architecture Capacity
\n
\n
\n
Target Growth Band
\n
{{ currentStage().mrrRange }}
\n
\n
\n\n

\n {{ currentStage().description }}\n

\n\n \n
\n
\n Verified Infrastructure Benchmarks\n
\n
\n @for (feature of currentStage().features; track feature) {\n \n \n {{ feature }}\n
\n }\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n \n Infrastructure Profile\n
\n \n {{ currentStage().sla }}\n \n
\n\n \n
\n
\n
\n \n Monthly Active Users\n
\n
{{ currentStage().users }}
\n
\n\n
\n
\n \n Throughput (QPS)\n
\n
{{ currentStage().qps }}
\n
\n\n
\n
\n \n Edge PoP Nodes\n
\n
{{ currentStage().nodes }} PoPs
\n
\n\n
\n
\n \n Uptime Guarantee\n
\n
\n {{ currentStage().sla.split(' ')[0] }}\n
\n
\n
\n\n \n
\n
\n
\n \n
\n `,\n})\nexport class UiFeatureMetricGrowthStepperComponent {\n protected readonly cn = cn\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Cpu = Cpu\n protected readonly Globe = Globe\n protected readonly ShieldCheck = ShieldCheck\n protected readonly TrendingUp = TrendingUp\n protected readonly Zap = Zap\n\n @Input() title = 'Scale your frontend architecture directly as your traffic expands.'\n @Input() description =\n 'From single-developer seed prototypes to global multi-region enterprise platforms, unbundled components adapt to your infrastructure requirements.'\n @Input() set stages(v: GrowthStage[] | undefined) {\n this.customStages.set(v ? v.map((s) => ({ ...s, features: [...s.features] })) : undefined)\n }\n @Input('class') className?: string\n\n private readonly customStages = signal(undefined)\n\n readonly activeStages = computed(() => this.customStages() ?? DEFAULT_STAGES)\n readonly selectedStageId = signal('seed')\n\n readonly currentStage = computed(\n () => this.activeStages().find((s) => s.id === this.selectedStageId()) ?? this.activeStages()[0]!,\n )\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n stepperButtonClass(id: string): string {\n return cn(\n 'group relative flex flex-col items-start rounded-xl border p-4 text-left transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-[0.98] active:duration-100',\n this.selectedStageId() === id\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40 text-muted-foreground hover:text-foreground',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-metric-growth-stepper/feature-metric-growth-stepper.component.ts" }, { "path": "packages/registry-angular/blocks/feature-metric-growth-stepper/index.ts", "content": "export { UiFeatureMetricGrowthStepperComponent, type GrowthStage } from './feature-metric-growth-stepper.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-metric-growth-stepper/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" ], "description": "Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.", "categories": [ "feature", "marketing" ] }