@chrono-os/lp-react

<SectionRenderer /> + 12 section components React do sistema LP-as-data Chrono.

yarn add @chrono-os/lp-react @chrono-os/lp-schema
# opcional, pra ícones reais (fallback inline aplica se ausente):
yarn add lucide-react

Uso básico

import { SectionRenderer } from "@chrono-os/lp-react";
import type { LP } from "@chrono-os/lp-schema";

export default function Page({ lp }: { lp: LP }) {
  return (
    <SectionRenderer
      sections={lp.sections}
      lpSlug={lp.slug}
      FormComponent={LeadCaptureForm}
    />
  );
}

Icons

A partir da 0.5.0 o pacote usa ícones Lucide-style nos 8 components que antes mostravam glyphs Unicode (→, ✓, ▾, ⚠, ▶, 🛡).

• lucide-react é peer optional (>=0.400.0). Se o consumer instalar, o resolver em src/icons/index.ts detecta via require e usa o ícone real (tree-shakeável no bundle do consumer).
• Se não estiver instalado, cai automaticamente nos SVGs inline locais em src/icons/local.tsx — paths Lucide originais (~600 bytes cada), visualmente idênticos.

Override fino por section

A API overrides continua sendo a forma mais flexível de customizar:

import { SectionRenderer } from "@chrono-os/lp-react";
import { MyHero } from "./my-hero";

<SectionRenderer sections={lp.sections} lpSlug={lp.slug} overrides={{ hero: MyHero }} />

Útil quando o consumer quer trocar a iconografia completa de uma section sem substituir o resolver global.

Tokens Tailwind assumidos

Os components consomem classes como container-page, section-pad, bg-brand-blue, text-brand-blue, rounded-pill, shadow-navy-glow. Use o preset @chrono-os/ui-shared/tailwind no tailwind.config.ts do consumer pra ter tudo aplicado.

Sections suportadas

hero, problema, qualificacao-interativa, beneficios, depoimentos, faq, pricing, form, video, countdown, garantia, footer. Schema + validações em @chrono-os/lp-schema.