{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-01",
  "title": "Conversion CTA",
  "type": "registry:block",
  "description": "Interactive developer CTA section with live framework switcher, interactive CLI installation terminal, 1-click clipboard copy, and production guarantees.",
  "categories": [
    "marketing"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/cta-01/cta-01.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport {\n  ArrowRight,\n  Check,\n  CheckCircle2,\n  Code2,\n  Copy,\n  Download,\n  Globe,\n  Layers,\n  ShieldCheck,\n  Zap,\n} from 'lucide'\nimport { cn } from '../../lib/utils'\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/badge/badge'\nimport '../../components/button/button'\n\ntype Framework = 'vue' | 'react' | 'nuxt'\n\nconst installCommands: Record<Framework, { command: string; subtitle: string }> = {\n  vue: {\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json -y',\n    subtitle: 'Zero-config Vue 3.5 + Tailwind v4 + Reka UI primitives',\n  },\n  react: {\n    command: 'npx shadcn@latest add https://uipkge.dev/r/react/init.json -y',\n    subtitle: 'Production-ready React 19 + Radix primitives + CVA variants',\n  },\n  nuxt: {\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json -y',\n    subtitle: 'Nuxt 4 auto-imports, SSR hydration-safe, unbundled ownership',\n  },\n}\n\n// Card chrome follows the registry Card verbatim (see the login-01 block):\n// cardVariants default + Card's overflow-hidden + the block's className, with\n// cn() losers (bg-card, text-card-foreground) dropped.\nconst terminalCardClass =\n  'rounded-xl border transition-colors duration-150 mx-auto max-w-2xl overflow-hidden border-zinc-800 bg-zinc-950 text-left text-zinc-100 shadow-sm'\n\n/**\n * <uip-cta-01> — the registry Cta01 block as a web component.\n *\n * Class strings are React's Cta01 verbatim. React state (useState) becomes\n * @state fields; the copy-label timeout is cleared in\n * `disconnectedCallback`. The registry link button is a <uip-button> with\n * `href` (React's `asChild` anchor; `rel` has no Lit equivalent and is\n * dropped).\n */\nexport class UipCta01 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    activeFramework: { state: true },\n    copied: { state: true },\n  }\n\n  private activeFramework: Framework = 'vue'\n  private copied = false\n  private readonly pingMs = 14\n  private timer?: number\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', 'cta-01')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this.timer) window.clearTimeout(this.timer)\n  }\n\n  private copyCommand() {\n    try {\n      navigator.clipboard?.writeText(installCommands[this.activeFramework].command)?.catch(() => {})\n    } catch {\n      // Clipboard unavailable (insecure context): still flash the label.\n    }\n    this.copied = true\n    if (this.timer) window.clearTimeout(this.timer)\n    this.timer = window.setTimeout(() => {\n      this.copied = false\n    }, 2000)\n  }\n\n  render() {\n    return html`\n      <section\n        data-slot=\"cta-01\"\n        class=\"bg-background border-border relative w-full overflow-hidden border-y py-16 lg:py-24\"\n      >\n        <div class=\"mx-auto max-w-5xl space-y-10 px-4 text-center sm:px-6 lg:px-8\">\n          <div class=\"inline-flex items-center gap-2\">\n            <uip-badge\n              variant=\"outline\"\n              class=\"border-primary/30 text-primary bg-primary/5 gap-1.5 px-3 py-1 font-mono text-xs tracking-wide uppercase\"\n            >\n              ${icon(Zap, 'zap', 'size-3.5')} Unbundled Registry Distribution\n            </uip-badge>\n            <div class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs\">\n              <span class=\"bg-success size-2 rounded-full\"></span>\n              <span>CDN Edge: ${this.pingMs}ms P99</span>\n            </div>\n          </div>\n\n          <div class=\"mx-auto max-w-3xl space-y-4\">\n            <h2 class=\"text-foreground text-3xl leading-[1.15] font-bold tracking-tight sm:text-5xl\">\n              Own Your UI. No Semver Lock-in. Zero Bloat.\n            </h2>\n            <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n              The components are the product. Source files are copied directly into your workspace. Modify, compose, and\n              refactor without fighting external package boundaries.\n            </p>\n          </div>\n\n          <div data-uipkge=\"\" data-slot=\"card\" class=${terminalCardClass}>\n            <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/70 px-4 py-3\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"flex gap-1.5\">\n                  <div class=\"bg-destructive/80 size-3 rounded-full\"></div>\n                  <div class=\"bg-warning/80 size-3 rounded-full\"></div>\n                  <div class=\"bg-success/80 size-3 rounded-full\"></div>\n                </div>\n                <span class=\"text-muted-foreground ml-2 font-mono text-xs\">terminal — bootstrap workspace</span>\n              </div>\n\n              <div class=\"flex items-center gap-1 rounded-md border border-zinc-800 bg-zinc-950 p-0.5\">\n                ${[\n                  { id: 'vue', label: 'Vue 3.5' },\n                  { id: 'react', label: 'React 19' },\n                  { id: 'nuxt', label: 'Nuxt 4' },\n                ].map(\n                  (fw) => html`<button\n                    type=\"button\"\n                    class=${cn(\n                      'rounded px-2 py-0.5 font-mono text-xs transition-colors',\n                      this.activeFramework === fw.id\n                        ? 'bg-zinc-800 font-semibold text-zinc-100 shadow-xs'\n                        : 'text-muted-foreground hover:text-zinc-200',\n                    )}\n                    @click=${() => {\n                      this.activeFramework = fw.id as Framework\n                    }}\n                  >\n                    ${fw.label}\n                  </button>`,\n                )}\n              </div>\n            </div>\n\n            <div class=\"space-y-3 p-4 font-mono text-xs sm:p-5\">\n              <div class=\"flex items-center justify-between gap-3 rounded-lg border border-zinc-800 bg-zinc-900/90 p-3\">\n                <div class=\"text-success flex items-center gap-2.5 overflow-x-auto select-all\">\n                  <span class=\"text-muted-foreground shrink-0\">$</span>\n                  <span class=\"whitespace-nowrap\">${installCommands[this.activeFramework].command}</span>\n                </div>\n                <uip-button\n                  size=\"sm\"\n                  variant=\"outline\"\n                  class=\"h-7 shrink-0 gap-1.5 border-zinc-700 bg-zinc-800 px-2.5 font-mono text-xs text-zinc-200 hover:bg-zinc-700 [&::part(base)]:h-7 [&::part(base)]:border-zinc-700 [&::part(base)]:bg-zinc-800 [&::part(base)]:px-2.5 [&::part(base)]:text-xs hover:[&::part(base)]:bg-zinc-700\"\n                  @click=${this.copyCommand}\n                >\n                  ${this.copied ? icon(Check, 'check', 'text-success size-3.5') : icon(Copy, 'copy', 'size-3.5')}\n                  <span>${this.copied ? 'Copied' : 'Copy'}</span>\n                </uip-button>\n              </div>\n\n              <p class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                <span>${installCommands[this.activeFramework].subtitle}</span>\n              </p>\n            </div>\n          </div>\n\n          <div class=\"flex flex-wrap items-center justify-center gap-3.5 pt-2\">\n            <uip-button size=\"lg\" class=\"h-11 gap-2 px-6 font-semibold shadow-sm\" @click=${this.copyCommand}>\n              ${icon(Download, 'download', 'size-4')}\n              ${this.copied ? 'Command Copied to Clipboard' : 'Install Components'}\n            </uip-button>\n            <uip-button\n              size=\"lg\"\n              variant=\"outline\"\n              class=\"h-11 gap-2 px-6 font-semibold\"\n              href=\"https://github.com/uday-a/uipkge-registry\"\n              target=\"_blank\"\n            >\n              ${icon(Code2, 'code-2', 'size-4')} Explore Source Registry ${icon(ArrowRight, 'arrow-right', 'size-4')}\n            </uip-button>\n          </div>\n\n          <div class=\"border-border grid grid-cols-2 gap-4 border-t pt-8 text-left sm:grid-cols-4\">\n            <div class=\"flex items-start gap-2.5\">\n              ${icon(CheckCircle2, 'circle-check-big', 'text-success mt-0.5 size-4 shrink-0')}\n              <div>\n                <p class=\"text-foreground text-xs font-semibold\">100% Code Ownership</p>\n                <p class=\"text-muted-foreground mt-0.5 text-xs\">Files live in your repository</p>\n              </div>\n            </div>\n            <div class=\"flex items-start gap-2.5\">\n              ${icon(ShieldCheck, 'shield-check', 'text-success mt-0.5 size-4 shrink-0')}\n              <div>\n                <p class=\"text-foreground text-xs font-semibold\">Zero Runtime Bloat</p>\n                <p class=\"text-muted-foreground mt-0.5 text-xs\">No opaque wrapper dependencies</p>\n              </div>\n            </div>\n            <div class=\"flex items-start gap-2.5\">\n              ${icon(Layers, 'layers', 'text-success mt-0.5 size-4 shrink-0')}\n              <div>\n                <p class=\"text-foreground text-xs font-semibold\">Tailwind CSS v4</p>\n                <p class=\"text-muted-foreground mt-0.5 text-xs\">OKLCH color system & tokens</p>\n              </div>\n            </div>\n            <div class=\"flex items-start gap-2.5\">\n              ${icon(Globe, 'globe', 'text-success mt-0.5 size-4 shrink-0')}\n              <div>\n                <p class=\"text-foreground text-xs font-semibold\">Dual Framework</p>\n                <p class=\"text-muted-foreground mt-0.5 text-xs\">Strict Vue 3.5 & React 19 parity</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-cta-01') || customElements.define('uip-cta-01', UipCta01)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-cta-01': UipCta01\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/cta-01/cta-01.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}