{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "newsletter", "title": "Newsletter", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/newsletter/newsletter-inline-band.component.ts", "content": "// Slim inline signup band (quartet member): inline field, submit, and a status row reserved\n// from first paint so confirming never shifts the page. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Check, LucideAngularModule, Mail } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-newsletter-inline-band, [ui-newsletter-inline-band]',\n standalone: true,\n // The block renders its own root
: keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiInputComponent],\n template: `\n
\n
\n
\n
\n \n Monthly\n
\n

\n Engineering notes on metric modelling, access control, and warehouse cost.\n

\n

\n Read by 8,400 data and finance engineers. One email a month, no product announcements.\n

\n
\n\n
\n
\n \n \n
\n \n

\n @if (submitted()) {\n \n \n Check your inbox to confirm.\n \n } @else {\n Unsubscribe in one click. We never share the list.\n }\n

\n
\n
\n
\n `,\n})\nexport class UiNewsletterInlineBandComponent {\n protected readonly Check = Check\n protected readonly Mail = Mail\n\n @Input('class') className?: string\n\n readonly email = signal('')\n readonly submitted = signal(false)\n\n subscribe(event: Event): void {\n event.preventDefault()\n if (!this.email().trim()) return\n this.submitted.set(true)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter/newsletter-inline-band.component.ts" }, { "path": "packages/registry-angular/blocks/newsletter/newsletter-issue-archive.component.ts", "content": "// Substack/Beehiiv style publication archive: hero subscribe form, featured issue\n// spotlight, category pills with counts, live search, edition cards, and an RSS footer.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Bookmark,\n Calendar,\n Check,\n Clock,\n Heart,\n LucideAngularModule,\n MessageSquare,\n Newspaper,\n Rss,\n Search,\n Users,\n X,\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 {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\nexport interface NewsletterIssue {\n id: string\n issueNumber: number\n volumeDate: string\n title: string\n excerpt: string\n category: 'Architecture' | 'Design Tokens' | 'Performance' | 'Interviews'\n tags: string[]\n readTime: string\n date: string\n commentsCount: number\n likesCount: number\n featured?: boolean\n}\n\nconst categories = ['All Issues', 'Architecture', 'Design Tokens', 'Performance', 'Interviews'] as const\n\nconst featuredIssue: NewsletterIssue = {\n id: 'issue-43',\n issueNumber: 43,\n volumeDate: 'Aug 2026',\n title: 'The Death of npm Component Libraries: Why Unbundled Registry Architecture Won',\n excerpt:\n 'How unbundled UI registries replaced monolithic node_modules packages, eliminated dependency hell, and gave full code ownership back to frontend engineering teams across the industry.',\n category: 'Architecture',\n tags: ['#architecture', '#registries', '#future-of-web', '#tooling'],\n readTime: '9 min read',\n date: 'Aug 25, 2026',\n commentsCount: 128,\n likesCount: 1420,\n featured: true,\n}\n\nconst archiveIssues: NewsletterIssue[] = [\n {\n id: 'issue-42',\n issueNumber: 42,\n volumeDate: 'Aug 2026',\n title: 'Why Zero-Dependency Registries Are Winning',\n excerpt:\n 'A deep dive into why enterprise engineering teams are abandoning monolithic UI packages in favor of composable own-your-code registry models that eliminate breaking upgrade cascades.',\n category: 'Architecture',\n tags: ['#architecture', '#web-performance', '#dx'],\n readTime: '6 min read',\n date: 'Aug 18, 2026',\n commentsCount: 84,\n likesCount: 642,\n },\n {\n id: 'issue-41',\n issueNumber: 41,\n volumeDate: 'Aug 2026',\n title: 'Mastering Tailwind v4: OKLCH Colors & Dynamic Themes',\n excerpt:\n 'How modern CSS color spaces and inline theme definitions unlock mathematically perceptually uniform light/dark transitions without CSS variables explosion.',\n category: 'Design Tokens',\n tags: ['#design-tokens', '#css', '#theming'],\n readTime: '8 min read',\n date: 'Aug 11, 2026',\n commentsCount: 56,\n likesCount: 519,\n },\n {\n id: 'issue-40',\n issueNumber: 40,\n volumeDate: 'Aug 2026',\n title: 'Zero-CLS Island Hydration in Modern Web Frameworks',\n excerpt:\n 'Eliminating Cumulative Layout Shift when server-rendered islands hydrate in Astro and Nuxt. Practical patterns distilled from serving 1M+ monthly pageviews.',\n category: 'Performance',\n tags: ['#performance', '#core-web-vitals', '#astro'],\n readTime: '5 min read',\n date: 'Aug 04, 2026',\n commentsCount: 92,\n likesCount: 730,\n },\n {\n id: 'issue-39',\n issueNumber: 39,\n volumeDate: 'Jul 2026',\n title: 'Interview: Building High-Craft Interfaces with Paco Coursey',\n excerpt:\n 'The creator of cmdk and sonner breaks down spring physics, popover placement math, and why 60fps micro-interactions define software brand trust.',\n category: 'Interviews',\n tags: ['#interviews', '#craft', '#animation'],\n readTime: '11 min read',\n date: 'Jul 28, 2026',\n commentsCount: 147,\n likesCount: 1205,\n },\n {\n id: 'issue-38',\n issueNumber: 38,\n volumeDate: 'Jul 2026',\n title: 'Building Resilient Component APIs with Polymorphic Slots',\n excerpt:\n 'Why the asChild composition pattern beat standard prop drilling for accessible primitives, and how Reka UI implements headless polymorphism without DOM overhead.',\n category: 'Architecture',\n tags: ['#architecture', '#vue', '#reka-ui'],\n readTime: '7 min read',\n date: 'Jul 21, 2026',\n commentsCount: 63,\n likesCount: 488,\n },\n {\n id: 'issue-37',\n issueNumber: 37,\n volumeDate: 'Jul 2026',\n title: 'Designing for Multi-Tenant White-Labeling at Scale',\n excerpt:\n 'Architecting a headless token graph that dynamically maps corporate brand identities and custom color palettes across 500+ enterprise subdomains in real time.',\n category: 'Design Tokens',\n tags: ['#design-tokens', '#architecture', '#enterprise'],\n readTime: '9 min read',\n date: 'Jul 14, 2026',\n commentsCount: 71,\n likesCount: 610,\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-newsletter-issue-archive, [ui-newsletter-issue-archive]',\n standalone: true,\n // The block renders its own root
: keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n ],\n template: `\n \n
\n \n
\n \n \n {{ subscriberCount }}\n
\n\n

{{ publicationName }}

\n\n

{{ subtitle }}

\n\n \n
\n @if (!isSubscribed()) {\n
\n
\n \n \n \n \n Free weekly issues\n Zero spam\n 1-click unsubscribe\n

\n
\n } @else {\n \n \n You’re subscribed! Check your inbox for confirmation.\n
\n }\n
\n \n\n \n
\n
\n \n Pinned Spotlight Edition\n \n \n Latest Release\n \n
\n\n \n
\n \n
\n
\n
\n \n Issue #{{ featured().issueNumber }} · {{ featured().volumeDate }}\n \n {{ featured().category }}\n \n \n {{ featured().readTime }}\n \n
\n\n \n {{ featured().title }}\n \n\n

{{ featured().excerpt }}

\n
\n\n
\n
\n @for (tag of featured().tags; track tag) {\n \n {{ tag }}\n \n }\n
\n\n
\n
\n \n \n {{ featured().date }}\n \n \n \n {{ featured().commentsCount }} comments\n \n \n \n {{ featured().likesCount }}\n \n
\n\n \n
\n
\n
\n\n \n
\n
\n
\n
\n \n \n \n
\n registry-teardown.ts\n
\n
\n
// Own your component code
\n
$ npx shadcn@latest add @uipkge/card
\n
✓ Fetched raw TypeScript TSX
\n
✓ Merged local Tailwind v4 tokens
\n
// Zero runtime package lock-in
\n
\n
\n \n Zero npm deps\n \n \n Tailwind v4\n \n OKLCH\n
\n
\n
\n
\n \n
\n\n \n
\n
\n \n
\n \n
\n\n \n
\n Showing {{ filteredIssues().length }} {{ filteredIssues().length === 1 ? 'edition' : 'editions' }}\n @if (searchQuery() || selectedCategory() !== 'All Issues') {\n \n Reset filters\n \n \n }\n
\n
\n\n \n
\n @for (cat of categories; track cat) {\n \n {{ cat }}\n {{ categoryCount(cat) }}\n \n }\n
\n
\n\n \n
\n @if (filteredIssues().length > 0) {\n
\n @for (issue of filteredIssues(); track issue.id) {\n \n
\n
\n \n Issue #{{ issue.issueNumber }} · {{ issue.volumeDate }}\n \n \n \n {{ issue.readTime }}\n \n
\n\n \n {{ issue.title }}\n \n\n

\n {{ issue.excerpt }}\n

\n
\n\n
\n
\n @for (tag of issue.tags; track tag) {\n {{ tag }}\n }\n
\n
\n\n \n
\n \n \n {{ issue.date }}\n \n \n \n {{ issue.commentsCount }}\n \n \n \n {{ issue.likesCount }}\n \n
\n\n \n Read Issue\n \n \n
\n \n }\n \n } @else {\n \n
\n \n

No issues found

\n

\n No newsletter issues matched “{{ searchQuery() }}” in {{ selectedCategory() }}.\n

\n
\n \n
\n
\n }\n
\n\n \n \n
\n

Never miss a teardown

\n

\n Published every Tuesday morning. Zero sponsor promotions, purely deep technical architecture.\n

\n
\n\n
\n \n \n
\n \n \n `,\n})\nexport class UiNewsletterIssueArchiveComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Bookmark = Bookmark\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Heart = Heart\n protected readonly MessageSquare = MessageSquare\n protected readonly Newspaper = Newspaper\n protected readonly Rss = Rss\n protected readonly Search = Search\n protected readonly Users = Users\n protected readonly X = X\n protected readonly Zap = Zap\n\n protected readonly categories = categories\n protected readonly featured = signal(featuredIssue)\n\n @Input() publicationName = 'The Unbundled Engineer'\n @Input() subtitle =\n 'Weekly architectural teardowns of modern design systems, web performance, and component registries.'\n @Input() subscriberCount = '42,500+ Subscribers · Top 1% on Substack'\n @Input('class') className?: string\n\n readonly email = signal('')\n readonly isSubscribed = signal(false)\n readonly searchQuery = signal('')\n readonly selectedCategory = signal('All Issues')\n\n readonly filteredIssues = computed(() => {\n const query = this.searchQuery().trim().toLowerCase()\n const selected = this.selectedCategory()\n return archiveIssues.filter((issue) => {\n const matchesCategory = selected === 'All Issues' || issue.category === selected\n const matchesSearch =\n !query ||\n issue.title.toLowerCase().includes(query) ||\n issue.excerpt.toLowerCase().includes(query) ||\n issue.tags.some((tag) => tag.toLowerCase().includes(query)) ||\n `issue #${issue.issueNumber}`.toLowerCase().includes(query)\n return matchesCategory && matchesSearch\n })\n })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-5xl space-y-12 px-4 py-8 sm:px-6 sm:py-12', this.className)\n }\n\n pillClass(cat: string): string {\n const isSelected = this.selectedCategory() === cat\n return cn(\n 'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none',\n isSelected\n ? 'bg-primary text-primary-foreground font-medium shadow-xs'\n : 'bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n pillCountClass(cat: string): string {\n const isSelected = this.selectedCategory() === cat\n return cn(\n 'py-0.2 rounded-full px-1.5 text-xs',\n isSelected ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-background/80 text-muted-foreground',\n )\n }\n\n categoryCount(cat: string): number {\n if (cat === 'All Issues') return archiveIssues.length\n return archiveIssues.filter((issue) => issue.category === cat).length\n }\n\n clearFilters(): void {\n this.searchQuery.set('')\n this.selectedCategory.set('All Issues')\n }\n\n handleSubscribe(event: Event): void {\n event.preventDefault()\n if (!this.email() || !this.email().includes('@')) return\n this.isSubscribed.set(true)\n }\n\n focusEmail(): void {\n document.getElementById('newsletter-archive-email-angular')?.focus()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter/newsletter-issue-archive.component.ts" }, { "path": "packages/registry-angular/blocks/newsletter/newsletter-signup.component.ts", "content": "// Engineering dispatch signup: channel radio cards, live email form with a submitting\n// beat, a success view, and an archive sampler with clickable issues. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { ArrowRight, BellRing, BookOpen, Check, LucideAngularModule, Mail, Send } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type NewsletterSignupVariant = 'centered' | 'split'\n\ninterface ChannelOption {\n id: string\n title: string\n frequency: string\n description: string\n badge: string\n}\n\ninterface RecentIssue {\n id: number\n date: string\n title: string\n reads: string\n tags: string[]\n snippet: string\n}\n\nconst channels: ChannelOption[] = [\n {\n id: 'architecture',\n title: 'Architecture & Token Deep Dives',\n frequency: 'Bi-Weekly',\n description: 'Technical breakdowns on OKLCH color science, headless AST transformers, and zero-lockin paradigms.',\n badge: 'Flagship',\n },\n {\n id: 'releases',\n title: 'Registry Ship Notes & RFCs',\n frequency: 'Monthly',\n description: 'Direct changelogs, new workbench releases, breaking primitive refactors, and roadmap discussions.',\n badge: 'Changelog',\n },\n {\n id: 'security',\n title: 'Security & Dependency Bulletins',\n frequency: 'As-Needed',\n description: 'Zero-day vulnerability alerts, upstream headless primitive fixes, and patch notifications.',\n badge: 'Critical',\n },\n]\n\nconst recentIssues: RecentIssue[] = [\n {\n id: 48,\n date: 'Aug 2026',\n title: 'The Death of Monolithic npm UI Packages',\n reads: '4 min read',\n tags: ['Architecture', 'Registry', 'AST'],\n snippet:\n 'Why the next decade of frontend engineering belongs to unbundled registries where the consumer owns the source code.',\n },\n {\n id: 47,\n date: 'Jul 2026',\n title: 'OKLCH Theming in Tailwind CSS v4',\n reads: '6 min read',\n tags: ['Tailwind v4', 'Color Science', 'Tokens'],\n snippet:\n 'Mastering perceptual lightness, chroma gamut mapping, and dynamic theme switching without runtime CSS bloat.',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-newsletter-signup, [ui-newsletter-signup]',\n standalone: true,\n // The block renders its own root
: keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n \n \n Engineering Dispatch & Architecture Radar\n \n

\n Ship notes, not marketing fluff.\n

\n

\n Join 18,400+ frontend architects, design engineers, and systems builders. Plain-text insights into component\n architecture, token systems, and dual-framework engineering.\n

\n
\n\n \n
\n \n
\n
\n
\n
\n

\n \n Select Dispatch Track\n

\n Zero Spam Guarantee\n
\n

\n Choose the telemetry streams you want delivered to your inbox.\n

\n
\n\n
\n \n
\n @for (ch of channels; track ch.id) {\n \n
\n
\n
\n @if (selectedChannel() === ch.id) {\n
\n }\n
\n {{ ch.title }}\n
\n {{ ch.frequency }}\n
\n

{{ ch.description }}

\n
\n }\n
\n\n \n\n \n @if (!submitted()) {\n
\n
\n \n \n Subscribe to Stream\n \n \n
\n
\n Plain text • 1-click unsubscribe\n 18,412 Active Subscribers\n
\n
\n } @else {\n
\n \n \n
\n

Dispatches Activated!

\n

\n Verification sent to {{ email() }}. Check your inbox to confirm delivery.\n

\n
\n }\n
\n
\n
\n\n \n
\n
\n

\n Archive Sampler\n

\n Issue #{{ activeIssue().id }}\n
\n\n \n
\n @for (issue of recentIssues; track issue.id; let idx = $index) {\n
\n
\n {{ issue.date }} • Issue #{{ issue.id }}\n {{ issue.reads }}\n
\n

{{ issue.title }}

\n

{{ issue.snippet }}

\n\n
\n @for (tag of issue.tags; track tag) {\n #{{ tag }}\n }\n
\n
\n }\n
\n\n \n \n Prefer RSS feeds?\n \n uipkge.dev/rss.xml \n \n
\n \n \n \n
\n `,\n})\nexport class UiNewsletterSignupComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly BellRing = BellRing\n protected readonly BookOpen = BookOpen\n protected readonly Check = Check\n protected readonly Mail = Mail\n protected readonly Send = Send\n\n protected readonly channels = channels\n protected readonly recentIssues = recentIssues\n\n @Input() variant: NewsletterSignupVariant = 'split'\n @Input('class') className?: string\n\n readonly email = signal('')\n readonly selectedChannel = signal('architecture')\n readonly submitted = signal(false)\n readonly activePreviewIssue = signal(0)\n readonly isSubmitting = signal(false)\n\n activeIssue(): RecentIssue {\n return this.recentIssues[this.activePreviewIssue()] ?? this.recentIssues[0]!\n }\n\n channelClass(id: string): string {\n return cn(\n 'group cursor-pointer rounded-xl border p-3.5 transition-colors',\n this.selectedChannel() === id\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-background hover:bg-muted/40',\n )\n }\n\n radioClass(id: string): string {\n return cn(\n 'flex size-3.5 items-center justify-center rounded-full border transition-colors',\n this.selectedChannel() === id ? 'border-primary bg-primary' : 'border-muted-foreground/40',\n )\n }\n\n issueClass(idx: number): string {\n return cn(\n 'bg-card cursor-pointer rounded-xl border p-4 transition-colors',\n this.activePreviewIssue() === idx ? 'border-primary/50 shadow-xs' : 'border-border hover:border-border/80',\n )\n }\n\n handleSubmit(event: Event): void {\n event.preventDefault()\n if (!this.email() || !this.email().includes('@')) return\n this.isSubmitting.set(true)\n setTimeout(() => {\n this.isSubmitting.set(false)\n this.submitted.set(true)\n }, 400)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter/newsletter-signup.component.ts" }, { "path": "packages/registry-angular/blocks/newsletter/newsletter-split-preview.component.ts", "content": "// Split pitch + last-issue preview: the offer is legible before anyone types an address.\n// Showing the last issue is the point — nobody should have to subscribe to find out\n// what they are subscribing to. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Check, LucideAngularModule, Mail } from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nconst lastIssue = {\n subject: 'Why we version metric definitions instead of dashboards',\n date: 'Feb 18, 2026',\n readTime: '9 min',\n opening:\n 'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path. This issue walks through what changed when we moved ours into the repo.',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-newsletter-split-preview, [ui-newsletter-split-preview]',\n standalone: true,\n // The block renders its own root
: keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n
\n \n \n Monthly\n \n

\n Notes from the people who build it\n

\n

\n One email a month on metric modelling, access control, and warehouse cost. No product announcements.\n

\n\n
\n
\n \n \n
\n

\n @if (submitted()) {\n \n \n Check your inbox to confirm.\n \n } @else {\n 8,400 subscribers · unsubscribe in one click.\n }\n

\n
\n
\n\n \n
\n
\n
\n Last issue\n {{ lastIssue.date }} · {{ lastIssue.readTime }}\n
\n\n

\n {{ lastIssue.subject }}\n

\n\n \n\n

{{ lastIssue.opening }}

\n\n \n
\n
\n
\n
\n
\n `,\n})\nexport class UiNewsletterSplitPreviewComponent {\n protected readonly Check = Check\n protected readonly Mail = Mail\n\n protected readonly lastIssue = lastIssue\n\n @Input('class') className?: string\n\n readonly email = signal('')\n readonly submitted = signal(false)\n\n subscribe(event: Event): void {\n event.preventDefault()\n if (!this.email().trim()) return\n this.submitted.set(true)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter/newsletter-split-preview.component.ts" }, { "path": "packages/registry-angular/blocks/newsletter/index.ts", "content": "export { UiNewsletterInlineBandComponent } from './newsletter-inline-band.component'\nexport { UiNewsletterIssueArchiveComponent, type NewsletterIssue } from './newsletter-issue-archive.component'\nexport { UiNewsletterSignupComponent, type NewsletterSignupVariant } from './newsletter-signup.component'\nexport { UiNewsletterSplitPreviewComponent } from './newsletter-split-preview.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/newsletter/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/input.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Newsletter growth quartet: a slim inline signup band, a filterable issue archive with featured spotlight, centered and split signup forms, and a split section pairing the pitch with a preview of the last issue.", "categories": [ "marketing", "media", "app" ] }