@evinvest/kitstart 0.13.0 → 0.14.0

package/dist/react/LeadCaptureEstimate.js

@@ -1,19 +1,45 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@evinvest/uikit";
 import { useEffect, useMemo, useState } from "react";
 import { formatCents } from "../core/lead-capture-format.js";
-import { estimateField } from "../core/pricing/flow.js";
+import { ESTIMATE_UNKNOWN, estimateField } from "../core/pricing/flow.js";
 import { priceOf } from "../core/pricing/price.js";
 import { labelOf } from "../core/pricing/validate.js";
+import { TileGroup } from "./LeadCaptureTiles.js";
+/**
+ * The screens an estimate's questions take in `steps`, in order: one each,
+ * or those sharing a `step` number together, where the first of them stands.
+ */
+export function screensOf(inputs, questions) {
+    const out = [];
+    const byStep = new Map();
+    for (const id of inputs) {
+        const step = questions?.[id]?.step;
+        const shared = step === undefined ? undefined : byStep.get(step);
+        if (shared) {
+            shared.push(id);
+            continue;
+        }
+        const screen = [id];
+        if (step !== undefined)
+            byStep.set(step, screen);
+        out.push(screen);
+    }
+    return out;
+}
+const isUnknown = (answers, ids) => ids.some(id => answers[id] === ESTIMATE_UNKNOWN);
 /**
  * The live price of the need on screen: its answers, as the visitor taps
  * them, and the price `priceOf` makes of them — the same function the server
  * stores the lead's price with. A full set of answers is reported once per
- * band (`onShown`), never the price itself.
+ * band (`onShown`), never the price itself. An answer "I don't know" makes
+ * the need a `quote` for this lead (`flow`), as the server will.
  */
-export function useEstimate(model, need, flow, onShown) {
+export function useEstimate(model, need, wanted, onShown) {
     const [answers, setAnswers] = useState({});
+    const pricing = model && need !== undefined && Object.hasOwn(model.needs, need) ? model.needs[need] : undefined;
+    const flow = wanted === "estimate" && pricing?.kind === "estimate" && isUnknown(answers, pricing.inputs) ? "quote" : wanted;
     const price = useMemo(() => (flow === "quote" || !model || need === undefined ? null : priceOf(model, need, flow === "estimate" ? answers : {})), [model, need, flow, answers]);
     const cents = flow === "estimate" ? price?.cents : undefined;
     useEffect(() => {
@@ -21,49 +47,63 @@ export function useEstimate(model, need, flow, onShown) {
             onShown(need, cents);
     }, [need, cents, onShown]);
     const answer = (input, option) => setAnswers(prev => ({ ...prev, [input]: option }));
-    return { answers, answer, price };
+    return { answers, answer, price, flow };
+}
+/** Every question a need's estimate asks, by input id, in order: none for a need not priced so. */
+export function estimatePlan(model, need) {
+    const pricing = Object.hasOwn(model.needs, need) ? model.needs[need] : undefined;
+    return pricing?.kind === "estimate" ? pricing.inputs : [];
 }
 /**
- * An estimate's questions, a tile per answer — touch-sized radios, so the
- * answers post without a script too (the server prices them; the live price
- * needs the script). Required once the script runs: a price needs every
- * answer, and without the script an unanswered estimate is still a lead, a
- * quote.
+ * The questions an estimate asks now, in order: all of them, or — once one
+ * is answered "I don't know" — up to that one. The rest would price nothing.
  */
-export function EstimateInputs(props) {
-    const { model, need, locale, answers, classNames: c } = props;
-    const pricing = model.needs[need];
+export function askedInputs(model, need, answers) {
+    const pricing = Object.hasOwn(model.needs, need) ? model.needs[need] : undefined;
     if (pricing?.kind !== "estimate")
-        return null;
-    const inputs = pricing.inputs.map(id => model.inputs.find(i => i.id === id)).filter((i) => i !== undefined);
-    return (_jsx("div", { className: cn("flex flex-col gap-5", c?.estimate), children: inputs.map(input => (_jsxs("fieldset", { className: cn("flex flex-col gap-2", c?.estimateInput), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.estimateLegend), children: labelOf(input.labels, locale) }), _jsx("div", { className: cn("grid grid-cols-2 gap-2 sm:grid-cols-3", c?.estimateGrid), children: input.options.map(option => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: estimateField(input.id), value: option.id, required: props.required, checked: answers[input.id] === option.id, onChange: () => props.onAnswer(input.id, option.id), className: "peer absolute inset-0 opacity-0", "data-lead-field": estimateField(input.id) }), _jsx("span", { className: cn("flex h-full min-h-11 items-center rounded-[var(--control-radius)] border border-input px-3 py-2 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.estimateOption), children: labelOf(option.labels, locale) })] }, option.id))) })] }, input.id))) }));
-}
-function lineLabel(line, model, locale, text) {
-    switch (line.kind) {
-        case "base":
-            return text.priceBase;
-        case "rounding":
-            return text.priceRounding;
-        case "minimum":
-            return text.priceMinimum;
-        case "add":
-        case "multiply":
-        case "discount": {
-            // The answer names itself ("2 chambres", "Toutes les 2 semaines"); the question would only repeat it.
-            const option = model.inputs.find(i => i.id === line.input)?.options.find(o => o.id === line.option);
-            return option ? labelOf(option.labels, locale) : line.option;
-        }
+        return [];
+    const out = [];
+    for (const id of pricing.inputs) {
+        const input = model.inputs.find(i => i.id === id);
+        if (!input)
+            continue;
+        out.push(input);
+        if (answers[id] === ESTIMATE_UNKNOWN)
+            break;
     }
+    return out;
 }
 /**
- * The price, read out as it changes (`aria-live`): an estimate's total and
- * how it was reached, or — until every question is answered — what is
- * missing; a fixed need's price, as is. Never "from": it is the price for
- * these answers.
+ * One question, a tile per answer — touch-sized radios, so the answers post
+ * without a script too (the server prices them; the live price needs the
+ * script). As `cards`, each answer shows the total it would make with the
+ * others given, once they are.
  */
-export function PriceBox(props) {
-    const { model, flow, price, locale, text, classNames: c } = props;
-    // A line that changed nothing (an answer worth 0) is not worth reading out.
-    const lines = price?.breakdown.filter((line, i) => i === 0 || line.cents !== 0) ?? [];
-    return (_jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: cn("flex flex-col gap-2 rounded-[var(--control-radius)] border border-border bg-card p-4", c?.price), children: [_jsx("p", { className: "text-sm text-ink-soft", children: text.priceTitle }), price ? (_jsx("p", { className: cn("font-display text-3xl font-bold text-ink", c?.priceTotal), "data-price-cents": price.cents, children: formatCents(price.cents, locale) })) : (_jsx("p", { className: "text-ink", children: text.pricePending })), flow === "estimate" && lines.length > 1 && (_jsx("ul", { className: cn("flex flex-col gap-1 text-sm text-ink-soft", c?.breakdown), children: lines.map((line, i) => (_jsxs("li", { className: "flex justify-between gap-3", children: [_jsx("span", { children: lineLabel(line, model, locale, text) }), _jsx("span", { className: "tabular-nums", children: formatCents(line.cents, locale, i > 0) })] }, i))) })), _jsx("p", { className: cn("text-sm text-ink-soft", c?.priceNote), children: text.priceNote })] }));
+export function EstimateQuestionField(props) {
+    const { model, need, input, question, locale, answers, classNames: c } = props;
+    const cards = question?.display === "cards";
+    const totalWith = (option) => {
+        const price = cards ? priceOf(model, need, { ...answers, [input.id]: option }) : null;
+        return price ? formatCents(price.cents, locale) : null;
+    };
+    const options = input.options.map(o => ({ value: o.id, label: labelOf(o.labels, locale), shortLabel: question?.shortLabels?.[o.id], badge: question?.badges?.[o.id], aside: totalWith(o.id) }));
+    if (question?.unknown)
+        options.push({ value: ESTIMATE_UNKNOWN, label: props.unknownLabel, span: question.unknownSpan === 2 ? 2 : undefined, className: c?.estimateUnknown });
+    return (_jsx(TileGroup, { name: estimateField(input.id), legend: labelOf(input.labels, locale), options: options, value: answers[input.id], required: props.required, field: estimateField(input.id), enterPicks: props.enterPicks, onPick: (option, radio) => props.onPick(input.id, option, radio), onSelect: option => props.onSelect(input.id, option), classNames: {
+            field: c?.estimateInput,
+            legend: c?.estimateLegend,
+            // The column count is the brand's (`estimateGrid`): a denser grid makes a shorter card, and the tile keeps its touch height in any.
+            grid: cn(cards ? "grid grid-cols-1 gap-2" : "grid grid-cols-2 gap-2 sm:grid-cols-3", c?.estimateGrid),
+            tile: cn(cards ? "h-full gap-3 px-4 py-3" : "h-full px-3 py-2", c?.estimateOption),
+            badge: c?.badge,
+            aside: c?.optionPrice,
+        } }));
+}
+/** An estimate's questions on one screen: `EstimateQuestionField` each, in order. */
+export function EstimateInputs(props) {
+    const { model, need, answers, questions, classNames: c, ...rest } = props;
+    const inputs = askedInputs(model, need, answers);
+    if (inputs.length === 0)
+        return null;
+    return (_jsx("div", { className: cn("flex flex-col gap-5", c?.estimate), children: inputs.map(input => (_jsx(EstimateQuestionField, { model: model, need: need, input: input, question: questions?.[input.id], answers: answers, classNames: c, ...rest }, input.id))) }));
 }

package/dist/react/LeadCaptureFields.d.ts

@@ -14,6 +14,8 @@ export declare function LocalityField(props: {
     /** The server's refusal of this field, in the page's words. */
     error: string | null;
     hydrated: boolean;
+    /** The postcode the page already knows (`?postcode=`), over the one the place fills in. */
+    preset?: string | undefined;
     classNames?: PartClassNames<FieldPart> | undefined;
 }): import("react").JSX.Element;
 export type PhoneText = Pick<LeadCaptureText, "phoneLabel" | "phoneHint" | "phoneInvalid" | "required" | "phonePlaceholder">;

package/dist/react/LeadCaptureFields.js

@@ -35,7 +35,7 @@ export function LocalityField(props) {
     // keypad has no letters, so the keypad follows what the field is offered.
     // A list too long for chips offers nothing — the visitor types a postcode.
     const numeric = served.length > MAX_CHIPS || served.every(s => POSTCODE.test(s));
-    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, props.required ? null : optional) }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", inputMode: numeric ? "numeric" : "text", autoComplete: "postal-code", placeholder: props.placeholder, enterKeyHint: "next", required: props.required, defaultValue: served.length === 1 ? served[0] : undefined, "data-lead-field": "locality", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: c?.control }), chips && (_jsx("div", { role: "group", "aria-label": servedLabel, className: cn("flex flex-wrap gap-2", c?.chips), children: served.map(commune => (_jsx(Button, { type: "button", variant: "outline", size: "touch", className: cn("px-3", c?.chip), onClick: () => {
+    return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: optionalLabel(label, props.required ? null : optional) }), _jsx(Input, { ref: validity.ref, name: name, size: "lg", inputMode: numeric ? "numeric" : "text", autoComplete: "postal-code", placeholder: props.placeholder, enterKeyHint: "next", required: props.required, defaultValue: props.preset ?? (served.length === 1 ? served[0] : undefined), "data-lead-field": "locality", "aria-invalid": error ? true : undefined, "aria-describedby": error ? messageId : undefined, onInvalid: validity.onInvalid, onChange: validity.onChange, className: c?.control }), chips && (_jsx("div", { role: "group", "aria-label": servedLabel, className: cn("flex flex-wrap gap-2", c?.chips), children: served.map(commune => (_jsx(Button, { type: "button", variant: "outline", size: "touch", className: cn("px-3", c?.chip), onClick: () => {
                         const el = validity.ref.current;
                         if (!el)
                             return;

package/dist/react/LeadCaptureNeed.d.ts

@@ -1,11 +1,29 @@
+import type { ReactNode } from "react";
 import { type FormSelectOption } from "./FormSelect.js";
 import type { PartClassNames } from "./parts.js";
-export type LeadCaptureLayout = "single" | "qualify-first";
-type NeedPart = "field" | "label" | "control" | "need" | "needs" | "summary";
+/**
+ * `single`: one screen. `steps`: one question per screen. `qualify-first`:
+ * the two-screen form `steps` grew from — the need, then everything else —
+ * kept as it was for the sites that run it.
+ */
+export type LeadCaptureLayout = "single" | "steps" | "qualify-first";
+/** How the need is asked: the kit's select, a tile per need, or a card per need with the brand's icon. */
+export type LeadNeedDisplay = "select" | "tiles" | "cards";
+/** A need as the form offers it; `icon` is drawn on its card (`needDisplay="cards"`), the brand's own. */
+export interface LeadNeedOption extends FormSelectOption {
+    icon?: ReactNode;
+    /** On a tile or card, on a phone (under `sm`): a shorter label; the select and assistive technology keep `label`. */
+    shortLabel?: string | undefined;
+}
+type NeedPart = "field" | "label" | "control" | "need" | "needs" | "summary" | "icon";
+/** The need's tiles or cards: a list, or a grid of cards with an icon each. */
+export declare const needGrid: (display: LeadNeedDisplay) => "grid grid-cols-2 gap-2 sm:grid-cols-3" | "grid grid-cols-1 gap-2 sm:grid-cols-2";
+export declare const needTile: (display: LeadNeedDisplay) => "h-full flex-col justify-center gap-2 px-3 py-4 text-center" | "px-4 py-3";
 export interface NeedFieldProps {
-    layout: LeadCaptureLayout;
+    /** The select on one screen by default, tiles on two. */
+    display: LeadNeedDisplay;
     name: string;
-    needs: readonly FormSelectOption[];
+    needs: readonly LeadNeedOption[];
     need: string | undefined;
     /** Showing the choice again after it was made for the visitor. */
     editing: boolean;
@@ -14,8 +32,10 @@ export interface NeedFieldProps {
     changeLabel: string;
     /** Blocks the submit while no tile is chosen, in the page's words. */
     requiredText: string;
+    /** Enter on a tile answers it rather than submitting the form. */
+    enterPicks: boolean;
     /** The visitor's answer: a tap, Enter or Space — `qualify-first` moves on. */
-    onPick: (need: string) => void;
+    onPick: (need: string, from: HTMLElement | null) => void;
     /** An arrow key moved the choice: chosen, but the visitor is still choosing. */
     onSelect: (need: string) => void;
     onEdit: () => void;
@@ -26,7 +46,8 @@ export interface NeedFieldProps {
  * tapped — is not asked again: it is a line with its label and, once the
  * script runs, a way to change it. Otherwise `single` asks with the kit's
  * select (first need by default, as before) and `qualify-first` with a tile
- * per need: one tap answers it.
+ * per need: one tap answers it. `display` may ask either with tiles, or with
+ * cards that carry the brand's icon.
  */
 export declare function NeedField(props: NeedFieldProps): import("react").JSX.Element;
 export {};

package/dist/react/LeadCaptureNeed.js

@@ -1,58 +1,27 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, cn, Field, FieldLabel } from "@evinvest/uikit";
-import { useEffect, useRef } from "react";
 import { FormSelect } from "./FormSelect.js";
+import { TileGroup } from "./LeadCaptureTiles.js";
+/** The need's tiles or cards: a list, or a grid of cards with an icon each. */
+export const needGrid = (display) => (display === "cards" ? "grid grid-cols-2 gap-2 sm:grid-cols-3" : "grid grid-cols-1 gap-2 sm:grid-cols-2");
+export const needTile = (display) => (display === "cards" ? "h-full flex-col justify-center gap-2 px-3 py-4 text-center" : "px-4 py-3");
 /**
  * What the job is. A need already known — from the page, `?need=` or the card
  * tapped — is not asked again: it is a line with its label and, once the
  * script runs, a way to change it. Otherwise `single` asks with the kit's
  * select (first need by default, as before) and `qualify-first` with a tile
- * per need: one tap answers it.
+ * per need: one tap answers it. `display` may ask either with tiles, or with
+ * cards that carry the brand's icon.
  */
 export function NeedField(props) {
-    const { layout, name, needs, need, editing, hydrated, label, changeLabel, onPick, onSelect, onEdit, classNames: c } = props;
-    const group = useRef(null);
-    // A radio group answers arrows with a click (`detail` 0) and a change, the
-    // same events a tap makes: what moves on is told apart by its key or pointer.
-    const pointer = useRef(false);
-    const answered = useRef(false);
-    useEffect(() => {
-        for (const radio of group.current?.querySelectorAll("input[type=radio]") ?? [])
-            radio.setCustomValidity(need === undefined ? props.requiredText : "");
-    });
+    const { display, name, needs, need, editing, hydrated, label, changeLabel, onPick, onSelect, onEdit, classNames: c } = props;
     const chosen = needs.find(n => n.value === need);
     if (chosen && !editing) {
         return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1 text-ink", c?.summary), children: [_jsx("input", { type: "hidden", name: name, value: chosen.value }), _jsx("span", { className: "text-sm text-ink-soft", children: label }), _jsx("span", { className: "font-medium", children: chosen.label }), hydrated && (_jsx(Button, { type: "button", variant: "link", size: "touch", className: "px-1", onClick: onEdit, children: changeLabel }))] }));
     }
-    if (layout === "single") {
-        return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: label }), _jsx(FormSelect, { name: name, size: "lg", defaultValue: need ?? needs[0]?.value, options: needs, onValueChange: onPick, classNames: c?.control ? { trigger: c.control } : undefined })] }));
+    if (display === "select") {
+        return (_jsxs(Field, { className: cn("flex flex-col gap-2", c?.field), children: [_jsx(FieldLabel, { className: c?.label, children: label }), _jsx(FormSelect, { name: name, size: "lg", defaultValue: need ?? needs[0]?.value, options: needs, onValueChange: v => onPick(v, null), classNames: c?.control ? { trigger: c.control } : undefined })] }));
     }
-    return (_jsxs("fieldset", { ref: group, className: cn("flex flex-col gap-2", c?.field), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c?.label), children: label }), _jsx("div", { className: cn("grid grid-cols-1 gap-2 sm:grid-cols-2", c?.needs), children: needs.map(n => (_jsxs("label", { className: "relative block cursor-pointer", children: [_jsx("input", { type: "radio", name: name, value: n.value, required: true, checked: need === n.value, onPointerDown: () => {
-                                pointer.current = true;
-                            }, onKeyDown: (e) => {
-                                pointer.current = false;
-                                answered.current = false;
-                                if (e.key !== "Enter")
-                                    return;
-                                // From a radio, Enter would submit the form half filled.
-                                e.preventDefault();
-                                answered.current = true;
-                                onPick(n.value);
-                            }, onKeyUp: (e) => {
-                                if (e.key !== " ")
-                                    return;
-                                answered.current = true;
-                                onPick(n.value);
-                            }, onClick: (e) => {
-                                if (e.detail === 0 && !pointer.current)
-                                    return;
-                                pointer.current = false;
-                                answered.current = true;
-                                onPick(n.value);
-                            }, onChange: () => {
-                                if (!answered.current)
-                                    onSelect(n.value);
-                                answered.current = false;
-                            }, className: "peer absolute inset-0 opacity-0", "data-need-option": "", "data-lead-field": "need" }), _jsx("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input px-4 py-3 text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c?.need), children: n.label })] }, n.value))) })] }));
+    return (_jsx(TileGroup, { name: name, legend: label, options: needs.map(n => ({ value: n.value, label: n.label, shortLabel: n.shortLabel, ...(display === "cards" && n.icon !== undefined ? { icon: n.icon } : {}) })), value: need, required: true, requiredText: props.requiredText, field: "need", marker: "data-need-option", enterPicks: props.enterPicks, onPick: onPick, onSelect: onSelect, classNames: { field: c?.field, legend: c?.label, grid: cn(needGrid(display), c?.needs), tile: cn(needTile(display), c?.need), icon: c?.icon } }));
 }

package/dist/react/LeadCapturePrice.d.ts

@@ -0,0 +1,36 @@
+import type { LeadCaptureFlowText } from "../core/lead-capture-text.js";
+import type { LeadFlow } from "../core/pricing/flow.js";
+import type { Price, PricingModel } from "../core/pricing/model.js";
+import type { PartClassNames } from "./parts.js";
+export type PricePart = "price" | "priceTotal" | "breakdown" | "priceNote" | "priceLine" | "priceTaxCredit" | "priceDetail";
+/**
+ * The price, read out as it changes (`aria-live`): an estimate's total and
+ * how it was reached, or — until every question is answered — what is
+ * missing; a fixed need's price, as is. Never "from": it is the price for
+ * these answers.
+ */
+export declare function PriceBox(props: {
+    model: PricingModel;
+    flow: Exclude<LeadFlow, "quote">;
+    price: Price | null;
+    locale: string;
+    text: LeadCaptureFlowText;
+    classNames?: PartClassNames<PricePart> | undefined;
+}): import("react").JSX.Element;
+/** What is left to pay once a tax credit of `ratio` (0.5 for half) is taken off, to the cent. */
+export declare const afterCredit: (cents: number, ratio: number) => number;
+/**
+ * `price="compact"`: the price on one line (`priceLine`), what is left after
+ * the brand's tax credit when it has one (`taxCredit`, a ratio), and how it
+ * was reached behind a disclosure — a `<details>`, so it opens without a
+ * script. Read out as it changes, the line only.
+ */
+export declare function PriceCompact(props: {
+    model: PricingModel;
+    flow: Exclude<LeadFlow, "quote">;
+    price: Price | null;
+    locale: string;
+    taxCredit: number | undefined;
+    text: LeadCaptureFlowText;
+    classNames?: PartClassNames<PricePart> | undefined;
+}): import("react").JSX.Element;

package/dist/react/LeadCapturePrice.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { fillText, formatCents } from "../core/lead-capture-format.js";
+import { labelOf } from "../core/pricing/validate.js";
+function lineLabel(line, model, locale, text) {
+    switch (line.kind) {
+        case "base":
+            return text.priceBase;
+        case "rounding":
+            return text.priceRounding;
+        case "minimum":
+            return text.priceMinimum;
+        case "add":
+        case "multiply":
+        case "discount": {
+            // The answer names itself ("2 chambres", "Toutes les 2 semaines"); the question would only repeat it.
+            const option = model.inputs.find(i => i.id === line.input)?.options.find(o => o.id === line.option);
+            return option ? labelOf(option.labels, locale) : line.option;
+        }
+    }
+}
+/**
+ * The price, read out as it changes (`aria-live`): an estimate's total and
+ * how it was reached, or — until every question is answered — what is
+ * missing; a fixed need's price, as is. Never "from": it is the price for
+ * these answers.
+ */
+export function PriceBox(props) {
+    const { model, flow, price, locale, text, classNames: c } = props;
+    // A line that changed nothing (an answer worth 0) is not worth reading out.
+    const lines = price?.breakdown.filter((line, i) => i === 0 || line.cents !== 0) ?? [];
+    return (_jsxs("div", { "aria-live": "polite", "aria-atomic": "true", className: cn("flex flex-col gap-2 rounded-[var(--control-radius)] border border-border bg-card p-4", c?.price), children: [_jsx("p", { className: "text-sm text-ink-soft", children: text.priceTitle }), price ? (_jsx("p", { className: cn("font-display text-3xl font-bold text-ink", c?.priceTotal), "data-price-cents": price.cents, children: formatCents(price.cents, locale) })) : (_jsx("p", { className: "text-ink", children: text.pricePending })), flow === "estimate" && lines.length > 1 && (_jsx("ul", { className: cn("flex flex-col gap-1 text-sm text-ink-soft", c?.breakdown), children: lines.map((line, i) => (_jsxs("li", { className: "flex justify-between gap-3", children: [_jsx("span", { children: lineLabel(line, model, locale, text) }), _jsx("span", { className: "tabular-nums", children: formatCents(line.cents, locale, i > 0) })] }, i))) })), _jsx("p", { className: cn("text-sm text-ink-soft", c?.priceNote), children: text.priceNote })] }));
+}
+/** What is left to pay once a tax credit of `ratio` (0.5 for half) is taken off, to the cent. */
+export const afterCredit = (cents, ratio) => cents - Math.round(cents * ratio);
+/**
+ * `price="compact"`: the price on one line (`priceLine`), what is left after
+ * the brand's tax credit when it has one (`taxCredit`, a ratio), and how it
+ * was reached behind a disclosure — a `<details>`, so it opens without a
+ * script. Read out as it changes, the line only.
+ */
+export function PriceCompact(props) {
+    const { model, flow, price, locale, taxCredit, text, classNames: c } = props;
+    const lines = price?.breakdown.filter((line, i) => i === 0 || line.cents !== 0) ?? [];
+    const credit = price && taxCredit !== undefined && taxCredit > 0 && taxCredit < 1 ? afterCredit(price.cents, taxCredit) : null;
+    return (_jsxs("div", { className: cn("flex flex-col gap-1", c?.price), children: [_jsx("p", { "aria-live": "polite", "aria-atomic": "true", className: cn("flex flex-wrap items-baseline gap-x-2 text-ink", c?.priceLine), children: price ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("font-semibold", c?.priceTotal), "data-price-cents": price.cents, children: fillText(text.priceLine, { price: formatCents(price.cents, locale) }) }), credit !== null && (_jsxs("span", { className: cn("text-sm text-ink-soft", c?.priceTaxCredit), "data-credit-cents": credit, children: [_jsx("span", { "aria-hidden": "true", children: "\u00B7 " }), fillText(text.priceTaxCredit, { price: formatCents(credit, locale) })] }))] })) : (_jsx("span", { className: "text-sm text-ink-soft", children: text.pricePending })) }), flow === "estimate" && lines.length > 1 && (_jsxs("details", { className: cn("text-sm text-ink-soft", c?.priceDetail), children: [_jsx("summary", { className: "inline-flex min-h-11 cursor-pointer items-center underline underline-offset-4", children: text.priceDetail }), _jsx("ul", { className: cn("flex flex-col gap-1 pb-2", c?.breakdown), children: lines.map((line, i) => (_jsxs("li", { className: "flex justify-between gap-3", children: [_jsx("span", { children: lineLabel(line, model, locale, text) }), _jsx("span", { className: "tabular-nums", children: formatCents(line.cents, locale, i > 0) })] }, i))) }), _jsx("p", { className: c?.priceNote, children: text.priceNote })] }))] }));
+}

package/dist/react/LeadCaptureSteps.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import type { LeadIntro, StepId } from "./lead-steps.js";
+import type { PartClassNames } from "./parts.js";
+export type StepsPart = "progress" | "stepBack" | "step" | "answers" | "answer" | "intro" | "introOption" | "icon" | "label";
+/** One screen: what it asks (the chip's label), what was answered (`null` while open), and the screen. */
+export interface StepView {
+    id: StepId;
+    label: string;
+    value: string | null;
+    node: ReactNode;
+}
+/** The mark of a screen that is off, for a selector of the focus's. */
+export declare const STEP_OFF = "data-lead-off";
+/**
+ * `layout="steps"`: one question per screen. Over it a thin bar (the screen,
+ * read out as `stepProgress`), the way back, and the screens already
+ * answered as chips — each a tap back to it. Every screen stays in the form,
+ * hidden but posted, so what was answered three screens ago still goes with
+ * the lead.
+ */
+export declare function LeadSteps(props: {
+    steps: readonly StepView[];
+    current: StepId;
+    /**
+     * How many screens the bar counts: at least those known, more while an
+     * answer to come may add some — so it only ever moves forward as the
+     * visitor answers. `null`: not said yet (the intro decides the branch).
+     */
+    total: number | null;
+    onBack: () => void;
+    onEdit: (id: StepId) => void;
+    text: {
+        stepProgress: string;
+        stepProgressOpen: string;
+        stepBack: string;
+        change: string;
+    };
+    classNames?: PartClassNames<StepsPart> | undefined;
+}): import("react").JSX.Element;
+/** The intro question: a tile per answer, the brand's icon on it, posted under its `field`. Not required: a lead without it is still a lead. */
+export declare function IntroField(props: {
+    intro: LeadIntro;
+    value: string | undefined;
+    onPick: (value: string, radio: HTMLInputElement) => void;
+    onSelect: (value: string) => void;
+    classNames?: PartClassNames<StepsPart> | undefined;
+}): import("react").JSX.Element;

package/dist/react/LeadCaptureSteps.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, cn, Progress } from "@evinvest/uikit";
+import { Fragment } from "react";
+import { fillText } from "../core/lead-capture-format.js";
+import { TileGroup } from "./LeadCaptureTiles.js";
+/**
+ * Without a script every screen is there at once — the form posts as one —
+ * and the bar, the back link and the chips, which need one, are not.
+ * Unscoped on purpose: the attributes are the steps' own. A screen off is
+ * hidden by an inline style, not the `hidden` attribute: Tailwind's preflight
+ * hides `[hidden]` with `!important` in a layer, which no unlayered rule
+ * overrides, and an inline style yields to this one.
+ */
+const NO_SCRIPT = "<style>[data-lead-step]{display:flex!important}[data-lead-chrome]{display:none!important}</style>";
+/** The mark of a screen that is off, for a selector of the focus's. */
+export const STEP_OFF = "data-lead-off";
+const OFF = { display: "none" };
+/**
+ * `layout="steps"`: one question per screen. Over it a thin bar (the screen,
+ * read out as `stepProgress`), the way back, and the screens already
+ * answered as chips — each a tap back to it. Every screen stays in the form,
+ * hidden but posted, so what was answered three screens ago still goes with
+ * the lead.
+ */
+export function LeadSteps(props) {
+    const { steps, current, text, classNames: c } = props;
+    const index = Math.max(0, steps.findIndex(s => s.id === current));
+    const n = String(index + 1);
+    const progress = props.total === null ? fillText(text.stepProgressOpen, { n }) : fillText(text.stepProgress, { n, total: String(props.total) });
+    const bar = Math.round(((index + 1) / Math.max(props.total ?? steps.length, steps.length)) * 100);
+    const answered = steps.slice(0, index).filter(s => s.value !== null);
+    return (_jsxs(_Fragment, { children: [_jsx("noscript", { dangerouslySetInnerHTML: { __html: NO_SCRIPT } }), _jsxs("div", { "data-lead-chrome": "", className: cn("flex flex-col gap-2", c?.progress), children: [_jsx(Progress, { value: bar, "aria-hidden": "true", className: "h-1" }), _jsx("p", { "aria-live": "polite", className: "sr-only", children: progress }), index > 0 && (_jsx(Button, { type: "button", variant: "link", size: "touch", className: cn("self-start px-0", c?.stepBack), onClick: props.onBack, children: text.stepBack }))] }), answered.length > 0 && (_jsx("ul", { "data-lead-chrome": "", className: cn("flex flex-wrap gap-2", c?.answers), children: answered.map(s => (_jsx("li", { children: _jsxs(Button, { type: "button", variant: "outline", size: "touch", className: cn("h-auto gap-2 px-3 text-sm", c?.answer), onClick: () => props.onEdit(s.id), children: [_jsx("span", { className: "sr-only", children: `${s.label}, ` }), _jsx("span", { className: "font-medium text-ink", children: s.value }), _jsx("span", { className: "text-ink-soft underline underline-offset-4", children: text.change })] }) }, s.id))) })), steps.map(s => (_jsx("div", { "data-lead-step": s.id, ...(s.id === current ? {} : { [STEP_OFF]: "", style: OFF }), className: cn("flex flex-col gap-5", c?.step), children: _jsx(Fragment, { children: s.node }, "screen") }, s.id)))] }));
+}
+/** The intro question: a tile per answer, the brand's icon on it, posted under its `field`. Not required: a lead without it is still a lead. */
+export function IntroField(props) {
+    const { intro, classNames: c } = props;
+    return (_jsx(TileGroup, { name: intro.field, legend: intro.label, options: intro.options.map(o => ({ value: o.value, label: o.label, ...(o.icon !== undefined ? { icon: o.icon } : {}) })), value: props.value, required: false, field: intro.field, enterPicks: true, onPick: props.onPick, onSelect: props.onSelect, classNames: { field: c?.intro, legend: c?.label, grid: "grid grid-cols-1 gap-2", tile: cn("gap-3 px-4 py-3", c?.introOption), icon: c?.icon } }));
+}

package/dist/react/LeadCaptureTiles.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+/** One answer as a tile: its words, and what a brand or the price adds to them. */
+export interface TileOption {
+    value: string;
+    label: string;
+    /** Drawn instead of `label` on a phone (under `sm`); the radio is still named by the whole `label`. */
+    shortLabel?: string | undefined;
+    /** Two columns of the grid (an "I don't know" under a row of answers). */
+    span?: 2 | undefined;
+    /** More classes for this tile alone, after the group's. */
+    className?: string | undefined;
+    /** Above the label, the brand's (a need's icon). */
+    icon?: ReactNode;
+    /** A short tag beside the label ("Le plus choisi"). */
+    badge?: string | undefined;
+    /** At the end of the tile: what this answer would cost. */
+    aside?: string | null | undefined;
+}
+export interface TileGroupProps {
+    name: string;
+    legend: string;
+    options: readonly TileOption[];
+    value: string | undefined;
+    required: boolean;
+    /** Blocks the submit while nothing is chosen, in the page's words; none → the browser's own. */
+    requiredText?: string | undefined;
+    /** `data-lead-field` on each radio: the role events and the focus read. */
+    field: string;
+    /** A bare attribute on each radio, for a selector of the caller's (`data-need-option`). */
+    marker?: string | undefined;
+    /** Enter on a tile answers it, instead of submitting a form half filled. Off: Enter is the form's. */
+    enterPicks: boolean;
+    /** The visitor's answer — a tap, Enter or Space — with the radio it came from. */
+    onPick: (value: string, radio: HTMLInputElement) => void;
+    /** An arrow key moved the choice: chosen, but the visitor is still choosing. */
+    onSelect: (value: string) => void;
+    classNames: {
+        field?: string | undefined;
+        legend?: string | undefined;
+        grid?: string | undefined;
+        tile?: string | undefined;
+        icon?: string | undefined;
+        badge?: string | undefined;
+        aside?: string | undefined;
+    };
+}
+/**
+ * A question answered by a tap: touch-sized native radios, so the answer
+ * posts without a script, over a tile the brand dresses. A radio group
+ * answers arrows with a click (`detail` 0) and a change, the same events a
+ * tap makes: what moves on is told apart by its key or pointer.
+ */
+export declare function TileGroup(props: TileGroupProps): import("react").JSX.Element;

package/dist/react/LeadCaptureTiles.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@evinvest/uikit";
+import { useEffect, useRef } from "react";
+/**
+ * A question answered by a tap: touch-sized native radios, so the answer
+ * posts without a script, over a tile the brand dresses. A radio group
+ * answers arrows with a click (`detail` 0) and a change, the same events a
+ * tap makes: what moves on is told apart by its key or pointer.
+ */
+export function TileGroup(props) {
+    const { name, legend, options, value, required, field, marker, enterPicks, onPick, onSelect, classNames: c } = props;
+    const group = useRef(null);
+    const pointer = useRef(false);
+    const answered = useRef(false);
+    const requiredText = props.requiredText;
+    useEffect(() => {
+        if (requiredText === undefined)
+            return;
+        for (const radio of group.current?.querySelectorAll("input[type=radio]") ?? [])
+            radio.setCustomValidity(value === undefined ? requiredText : "");
+    });
+    const markerProps = marker ? { [marker]: "" } : {};
+    return (_jsxs("fieldset", { ref: group, className: cn("flex flex-col gap-2", c.field), children: [_jsx("legend", { className: cn("mb-2 text-sm font-medium text-ink", c.legend), children: legend }), _jsx("div", { className: c.grid, children: options.map(o => (_jsxs("label", { className: cn("relative block cursor-pointer", o.span === 2 && "col-span-2"), children: [_jsx("input", { type: "radio", name: name, value: o.value, required: required, checked: value === o.value, onPointerDown: () => {
+                                pointer.current = true;
+                            }, onKeyDown: (e) => {
+                                pointer.current = false;
+                                answered.current = false;
+                                if (e.key !== "Enter" || !enterPicks)
+                                    return;
+                                e.preventDefault();
+                                answered.current = true;
+                                onPick(o.value, e.currentTarget);
+                            }, onKeyUp: (e) => {
+                                if (e.key !== " ")
+                                    return;
+                                answered.current = true;
+                                onPick(o.value, e.currentTarget);
+                            }, onClick: (e) => {
+                                if (e.detail === 0 && !pointer.current)
+                                    return;
+                                pointer.current = false;
+                                answered.current = true;
+                                onPick(o.value, e.currentTarget);
+                            }, onChange: () => {
+                                if (!answered.current)
+                                    onSelect(o.value);
+                                answered.current = false;
+                            }, className: "peer absolute inset-0 opacity-0", "data-lead-field": field, "aria-label": o.shortLabel !== undefined ? [o.label, o.badge, o.aside].filter(Boolean).join(", ") : undefined, ...markerProps }), _jsxs("span", { className: cn("flex min-h-11 items-center rounded-[var(--control-radius)] border border-input text-ink transition-colors", "peer-checked:border-primary peer-checked:bg-hover peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50", c.tile, o.className), children: [o.icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 items-center justify-center [&_svg]:size-6", c.icon), children: o.icon })), o.shortLabel !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "min-w-0 sm:hidden", children: o.shortLabel }), _jsx("span", { className: "min-w-0 max-sm:hidden", children: o.label })] })) : (_jsx("span", { className: "min-w-0", children: o.label })), o.badge && _jsx("span", { className: cn("rounded-full bg-hover px-2 py-0.5 text-xs font-medium text-ink", c.badge), children: o.badge }), o.aside && _jsx("span", { className: cn("ms-auto shrink-0 font-medium tabular-nums", c.aside), children: o.aside })] })] }, o.value))) })] }));
+}

package/dist/react/QuoteFormShell.d.ts

@@ -1,4 +1,4 @@
-import type { FormEventHandler, ReactNode } from "react";
+import type { FormEventHandler, KeyboardEventHandler, ReactNode } from "react";
 /**
  * The quote form's frame: a plain `<form method="post" action="/quote">`
  * answered with a 303, so it works before any JavaScript arrives — which is
@@ -27,6 +27,10 @@ export interface QuoteFormShellProps {
     className?: string;
     /** A script's own submit (an in-place success); the 303 stays the path without one. */
     onSubmit?: FormEventHandler<HTMLFormElement> | undefined;
+    /** A key in any field — `LeadCapture`'s Enter that moves to the next field. */
+    onKeyDown?: KeyboardEventHandler<HTMLFormElement> | undefined;
+    /** Bare `data-*` attributes on the form, for a stylesheet of the caller's. */
+    data?: Readonly<Record<`data-${string}`, string>> | undefined;
     children: ReactNode;
 }
 /** The mobile field's attributes: the numeric keypad and the phone's autofill. */