{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "waitlist", "title": "Waitlist", "type": "registry:page", "description": "Pre-launch signup page. Split layout with product pitch, logo mark, three benefit bullets on the left and an email capture card on the right that flips to a queue-position confirmation with referral hint after submit.", "categories": [ "marketing" ], "files": [ { "path": "packages/elements-lit/src/blocks/waitlist/waitlist.ts", "content": "import { LitElement, css, html } from 'lit'\nimport { Check, Layers, Link2, ShieldCheck, Zap } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\n\nconst benefits = [\n { iconName: 'zap', title: 'Ships in minutes', copy: 'Drop-in blocks and primitives, not boilerplate to rewrite.' },\n {\n iconName: 'shield-check',\n title: 'Own the code',\n copy: 'Every file is copied into your repo. Edit it freely, no lock-in.',\n },\n {\n iconName: 'layers',\n title: 'Dual framework',\n copy: 'Vue and React mirrors stay in lockstep across every component.',\n },\n] as const\n\n/**\n * — the registry Waitlist block as a web component.\n *\n * Class strings are React's Waitlist verbatim. React state (useState) becomes\n * @state fields. React has no submit callback; the form dispatches a\n * `subscribe` CustomEvent (detail: { email }, bubbles, composed). The benefit\n * icons resolve by name (React renders component references; lucide nodes\n * don't carry their kebab-case name, which icon() needs).\n */\nexport class UipWaitlist extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n email: { state: true },\n submitted: { state: true },\n position: { state: true },\n }\n\n private email = ''\n private submitted = false\n private position = 214\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'waitlist')\n }\n\n private benefitIcon(name: string, className: string) {\n // Mirrors React's : Zap / ShieldCheck / Layers in row order.\n if (name === 'shield-check') return icon(ShieldCheck, 'shield-check', className)\n if (name === 'layers') return icon(Layers, 'layers', className)\n return icon(Zap, 'zap', className)\n }\n\n private handleSubmit(e: Event) {\n e.preventDefault()\n if (!this.email.includes('@')) return\n this.submitted = true\n this.dispatchEvent(new CustomEvent('subscribe', { detail: { email: this.email }, bubbles: true, composed: true }))\n }\n\n render() {\n return html`\n
\n
\n
\n
\n
\n ${icon(Layers, 'layers', 'size-5')}\n
\n Northwind\n
\n\n

Be first in line when we launch

\n

\n We’re onboarding a small cohort of teams each week. Join the waitlist and we’ll save your\n spot.\n

\n\n
    \n ${benefits.map(\n (benefit) => html`\n
  • \n
    \n ${this.benefitIcon(benefit.iconName, 'size-4.5')}\n
    \n
    \n

    ${benefit.title}

    \n

    ${benefit.copy}

    \n
    \n
    • \n `,\n )}\n
\n
\n
\n\n
\n \n ${!this.submitted\n ? html`\n \n Join the waitlist\n \n Early access rolls out weekly. No spam — one email when it’s your turn.\n \n \n \n
\n {\n this.email = (e.target as UipInput).value\n }}\n >\n Request access\n \n

2,300+ teams already in line

\n
\n `\n : html`\n \n
\n ${icon(Check, 'check', 'size-6')}\n
\n

You’re #${this.position} in line

\n

\n We’ll email ${this.email} as soon as your spot opens up.\n

\n
\n ${icon(Link2, 'link-2', 'text-muted-foreground mt-0.5 size-4 shrink-0')}\n

\n Want to skip the queue? Share your invite link after launch — every friend who signs up\n moves you up 5 spots.\n

\n
\n \n `}\n \n
\n
\n `\n }\n}\n\ncustomElements.get('uip-waitlist') || customElements.define('uip-waitlist', UipWaitlist)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-waitlist': UipWaitlist\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/waitlist/waitlist.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json" ] }