{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-bento-preview-grid", "title": "Hero Bento Preview Grid", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-bento-preview-grid/hero-bento-preview-grid.component.ts", "content": "// Asymmetric 3-column bento hero with an interactive OKLCH palette customizer,\n// a dual-framework parity toggle, a bundle bloat calculator, and edge latency\n// telemetry. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n CheckCircle2,\n Code2,\n Cpu,\n Layers,\n LucideAngularModule,\n Moon,\n Palette,\n Play,\n Sun,\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 } from '@/ui/card/card.component'\n\ninterface ColorTheme {\n name: string\n hue: string\n hex: string\n}\n\nconst colorThemes: ColorTheme[] = [\n { name: 'Emerald', hue: 'oklch(0.65 0.22 145)', hex: '#10b981' },\n { name: 'Indigo', hue: 'oklch(0.60 0.24 275)', hex: '#6366f1' },\n { name: 'Amber', hue: 'oklch(0.75 0.18 70)', hex: '#f59e0b' },\n { name: 'Rose', hue: 'oklch(0.65 0.24 15)', hex: '#f43f5e' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-bento-preview-grid, [ui-hero-bento-preview-grid]',\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],\n template: `\n
\n \n \n\n
\n \n
\n \n \n The Unbundled Design Engineering Platform\n \n\n

\n Everything design engineers need to build at lightspeed.\n

\n\n

\n Tactile workbenches, OKLCH fluid color palettes, and guaranteed cross-framework parity—composed right in\n your hero.\n

\n\n \n
\n \n Explore 300+ Workbenches\n \n \n\n \n \n View Architecture\n \n
\n
\n\n \n
\n \n \n
\n
\n \n OKLCH Dynamic Theme Engine\n \n Zero Runtime CSS\n
\n

Interactive Palette & Contrast Synthesizer

\n

\n Select a brand accent and watch UI components dynamically adjust perceptual contrast.\n

\n
\n\n \n
\n
\n
\n @for (c of themes; track c.name; let idx = $index) {\n \n }\n
\n\n
\n Mode:\n \n @if (!isDarkPreview()) {\n \n } @else {\n \n }\n \n
\n
\n\n \n
\n \n Synthesized Action Button\n \n \n Secondary Token\n \n
\n
\n
\n\n \n
\n
\n
\n \n 100% Mirror Parity\n \n
\n

Vue 3.5 & React 19

\n

\n Identical CVA variant matrix and AST output across both frameworks.\n

\n
\n\n \n
\n
\n \n \n
\n\n \n
\n >\n <Button variant=\"primary\">\n
✓ CVA Type Contract Validated
\n
\n
\n
\n\n \n
\n
\n \n Zero NPM Overhead\n \n

Own Your Source Code

\n

\n Slide to calculate bundle weight saved compared to monolithic packages.\n

\n
\n\n \n
\n
\n Installed Blocks:\n {{ componentCount() }}\n
\n \n
\n Bundle Saved:\n ~{{ estimatedSavings() }} kB\n
\n
\n
\n\n \n \n
\n
\n \n Instant Hydration & Zero Latency\n \n

Edge Optimized Architecture

\n
\n \n @if (!isRunningQuery()) {\n \n } @else {\n \n }\n Ping Edge\n \n
\n\n \n
\n
\n

Round-Trip Latency

\n

{{ queryLatency() }}

\n
\n
\n

DOM Mutation Time

\n

< 1.2ms

\n
\n
\n

Accessibility Score

\n

100 / 100

\n
\n
\n
\n \n \n
\n `,\n})\nexport class UiHeroBentoPreviewGridComponent {\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Code2 = Code2\n protected readonly Cpu = Cpu\n protected readonly Layers = Layers\n protected readonly Moon = Moon\n protected readonly Palette = Palette\n protected readonly Play = Play\n protected readonly Sun = Sun\n protected readonly Zap = Zap\n\n protected readonly themes = colorThemes\n\n @Input('class') className?: string\n\n readonly activeColorIndex = signal(0)\n readonly isDarkPreview = signal(true)\n readonly activeFramework = signal<'vue' | 'react'>('vue')\n readonly componentCount = signal(12)\n readonly isRunningQuery = signal(false)\n readonly queryLatency = signal('12ms')\n\n private queryTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.queryTimer))\n }\n\n readonly estimatedSavings = computed(() => (this.componentCount() * 42).toFixed(0))\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n colorDotClass(idx: number): string {\n return cn(\n 'size-6 rounded-full border-2 transition-transform active:scale-90',\n this.activeColorIndex() === idx\n ? 'border-foreground scale-125 shadow-xs'\n : 'border-transparent opacity-70 hover:opacity-100',\n )\n }\n\n frameworkTabClass(framework: 'vue' | 'react'): string {\n const active = framework === 'vue' ? 'text-success' : 'text-info'\n return cn(\n 'rounded-md py-1.5 font-mono text-xs font-semibold transition-[color,background-color,transform] duration-150 active:scale-95',\n this.activeFramework() === framework ? `bg-background shadow-xs ${active}` : 'text-muted-foreground',\n )\n }\n\n setComponentCount(event: Event): void {\n const value = Number((event.target as HTMLInputElement).value)\n if (!Number.isNaN(value)) this.componentCount.set(value)\n }\n\n triggerQuery(): void {\n this.isRunningQuery.set(true)\n clearTimeout(this.queryTimer)\n this.queryTimer = setTimeout(() => {\n this.queryLatency.set(`${Math.floor(Math.random() * 8) + 8}ms`)\n this.isRunningQuery.set(false)\n }, 400)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-bento-preview-grid/hero-bento-preview-grid.component.ts" }, { "path": "packages/registry-angular/blocks/hero-bento-preview-grid/index.ts", "content": "export { UiHeroBentoPreviewGridComponent } from './hero-bento-preview-grid.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-bento-preview-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" ], "description": "Asymmetric 3-column bento hero section with interactive OKLCH palette customizer, dual-framework parity toggle, bundle bloat calculator, and edge latency telemetry.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "hero" }