@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/blocks/site/blog-list.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockImage } from "../block-image.js";
+import { BlockLink } from "../block-link.js";
+import { site2Text } from "./shared/labels-2.js";
+import { fieldAttr, formatDate2, isoDay, useBlockIds2 } from "./shared/kit-2.js";
+/**
+ * Latest posts and category archives. Receives posts as data (`PostSummary`); fetching is the
+ * app's job (or the renderer's `resolvers.posts`). Each post is an `article` with one link on the
+ * title that covers the card. Server component.
+ *
+ * ```tsx
+ * <BlogList variant="editorial" title="From the *studio*" posts={posts} pagination={{ page: 1, total: 4, hrefTemplate: "/blog?page={page}" }} />
+ * ```
+ */
+export function BlogList({ variant = "editorial", eyebrow, title, lead, allLink, posts, categories, pagination, showCovers = true, empty, postHeadingLevel, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { headingId } = useBlockIds2(id, "blog");
+    const level = postHeadingLevel ?? (title ? 3 : 2);
+    const ctx = { t, locale, components, labels, editMode, level, covers: showCovers && variant !== "compact" };
+    const actions = allLink ? (_jsxs(BlockLink, { href: allLink.href, appearance: "link", components: components, labels: labels, locale: locale, children: [allLink.label, _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[1em] rtl:-scale-x-100" })] })) : undefined;
+    const compact = variant === "compact";
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "blog-list", editMode: editMode, className: cn("vb-blog", className), "data-variant": variant, children: _jsxs(Container, { className: cn("flex flex-col", compact ? "gap-6" : "gap-10 @4xl:gap-14"), children: [title || eyebrow || lead || actions ? (compact ? (_jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [title ? (_jsx("h2", { id: headingId, className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", ...fieldAttr(editMode, "title"), children: title })) : null, actions] })) : (_jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, align: actions ? "split" : "start", actions: actions, editMode: editMode, labels: labels, locale: locale }))) : null, categories?.length ? (_jsx("nav", { "aria-label": t("categories"), className: "-mx-1 overflow-x-auto scrollbar-none", children: _jsx("ul", { className: "flex gap-1 px-1", children: categories.map((c, i) => (_jsx("li", { children: _jsx(BlockLink, { href: c.href, "aria-current": c.active ? "page" : undefined, components: components, labels: labels, locale: locale, className: cn("inline-flex h-9 items-center whitespace-nowrap rounded-full px-3.5 text-sm transition-colors focus-ring", c.active ? "bg-fg text-scene" : "text-fg-muted hover:bg-hover hover:text-fg"), children: c.label }) }, i))) }) })) : null, posts.length === 0 ? (_jsxs("div", { className: "flex flex-col items-start gap-3 border-t border-line pt-8", children: [_jsx("p", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", children: empty?.title ?? t("noPosts") }), _jsx("p", { className: "max-w-(--measure) text-fg-muted", children: empty?.text ?? t("noPostsHint") }), empty?.action ? _jsx("div", { className: "pt-3", children: empty.action }) : null] })) : variant === "editorial" ? (_jsx(Editorial, { posts: posts, ctx: ctx })) : variant === "list" ? (_jsx("ul", { className: "flex flex-col border-b border-line", children: posts.map((p, i) => (_jsx("li", { className: "border-t border-line", children: _jsx(ListPost, { post: p, ctx: ctx }) }, p.href + i))) })) : variant === "grid" ? (_jsx("ul", { className: "grid gap-x-(--gutter) gap-y-12 @2xl:grid-cols-2 @4xl:grid-cols-3", children: posts.map((p, i) => (_jsx("li", { children: _jsx(GridPost, { post: p, ctx: ctx }) }, p.href + i))) })) : (_jsx("ul", { className: "flex flex-col", children: posts.slice(0, 5).map((p, i) => (_jsx("li", { className: "border-t border-line first:border-t-0", children: _jsx(CompactPost, { post: p, ctx: ctx }) }, p.href + i))) })), pagination && pagination.total > 1 ? _jsx(Pager, { pagination: pagination, ctx: ctx }) : null] }) }));
+}
+function PostTitle({ post, ctx, className }) {
+    const H = `h${ctx.level}`;
+    return (_jsx(H, { className: cn("text-fg text-balance", className), children: _jsx(BlockLink, { href: post.href, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "vb-post-link rounded-[2px] focus-ring after:absolute after:inset-0 after:content-['']", children: post.title }) }));
+}
+function PostDate({ post, ctx, className }) {
+    return (_jsx("time", { dateTime: isoDay(post.publishedAt), className: cn("font-mono text-eyebrow tabular uppercase tracking-[0.06em] text-fg-muted", className), children: formatDate2(isoDay(post.publishedAt), ctx.locale, "medium") }));
+}
+function Meta({ post, ctx }) {
+    return (_jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: [_jsx(PostDate, { post: post, ctx: ctx }), post.readingMinutes ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: ctx.t("minRead", { count: post.readingMinutes }) })] })) : null, post.author ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: ctx.t("by", { name: post.author.name }) })] })) : null] }));
+}
+function Category({ post }) {
+    if (!post.category)
+        return null;
+    // Text only (the card link covers the article; a nested link would steal its click area).
+    return _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-accent-ink", children: post.category.label });
+}
+function Cover({ post, ctx, sizes, priority, className }) {
+    if (!ctx.covers || !post.cover?.src)
+        return null;
+    return _jsx(BlockImage, { ...post.cover, alt: post.cover.alt ?? "", decorative: !post.cover.alt, aspect: "3:2", sizes: sizes, priority: priority, className: cn("vb-post-cover rounded-ui", className), components: ctx.components });
+}
+function Editorial({ posts, ctx }) {
+    const [first, ...rest] = posts;
+    return (_jsxs("div", { className: "flex flex-col gap-12", children: [_jsxs("article", { className: "vb-post group/post relative grid gap-x-(--gutter) gap-y-6 @4xl:grid-cols-12 @4xl:items-end", children: [ctx.covers && first.cover ? (_jsx("div", { className: "@4xl:col-span-7", children: _jsx(Cover, { post: first, ctx: ctx, sizes: "(min-width: 56rem) 58vw, 100vw" }) })) : null, _jsxs("div", { className: cn("flex flex-col gap-4", ctx.covers && first.cover ? "@4xl:col-span-5" : "@4xl:col-span-9"), children: [_jsx(Category, { post: first }), _jsx(PostTitle, { post: first, ctx: ctx, className: "font-display text-display-m" }), first.excerpt ? _jsx("p", { className: "max-w-[52ch] text-fg-muted text-pretty", children: first.excerpt }) : null, _jsx(Meta, { post: first, ctx: ctx })] })] }), rest.length ? (_jsx("ul", { className: "grid gap-x-(--gutter) @2xl:grid-cols-2", children: rest.map((p, i) => (_jsx("li", { className: "border-t border-line", children: _jsxs("article", { className: "vb-post group/post relative flex flex-col gap-2 py-6", children: [_jsx(PostDate, { post: p, ctx: ctx }), _jsx(PostTitle, { post: p, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), p.category ? _jsx("p", { className: "text-small text-fg-muted", children: p.category.label }) : null] }) }, p.href + i))) })) : null] }));
+}
+function ListPost({ post, ctx }) {
+    return (_jsxs("article", { className: "vb-post group/post relative grid gap-x-(--gutter) gap-y-2 py-6 @2xl:grid-cols-12 @2xl:items-baseline", children: [_jsx(PostDate, { post: post, ctx: ctx, className: "@2xl:col-span-2" }), _jsxs("div", { className: "flex flex-col gap-1.5 @2xl:col-span-8", children: [_jsx(PostTitle, { post: post, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), post.excerpt ? _jsx("p", { className: "line-clamp-1 text-small text-fg-muted", children: post.excerpt }) : null] }), _jsx("p", { className: "text-small text-fg-muted @2xl:col-span-2 @2xl:text-end", children: post.readingMinutes ? ctx.t("minRead", { count: post.readingMinutes }) : null })] }));
+}
+function GridPost({ post, ctx }) {
+    return (_jsxs("article", { className: "vb-post group/post relative flex flex-col gap-4", children: [ctx.covers ? post.cover ? _jsx(Cover, { post: post, ctx: ctx, sizes: "(min-width: 56rem) 33vw, (min-width: 42rem) 50vw, 100vw" }) : _jsx("span", { "aria-hidden": true, className: "block aspect-[3/2] rounded-ui bg-surface-2" }) : null, _jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx(Category, { post: post }), _jsx(PostTitle, { post: post, ctx: ctx, className: "text-h3 font-semibold tracking-[-0.012em]" }), _jsx(Meta, { post: post, ctx: ctx })] })] }));
+}
+function CompactPost({ post, ctx }) {
+    return (_jsxs("article", { className: "vb-post group/post relative flex flex-col gap-1 py-4", children: [_jsx(PostTitle, { post: post, ctx: ctx, className: "text-body font-medium" }), _jsx(PostDate, { post: post, ctx: ctx })] }));
+}
+function pageHref(p, page) {
+    if (p.href)
+        return p.href(page);
+    const tpl = p.hrefTemplate ?? "?page={page}";
+    if (page === 1 && /[?&]page=\{page\}$/.test(tpl))
+        return tpl.replace(/[?&]page=\{page\}$/, "") || "?";
+    return tpl.replace("{page}", String(page));
+}
+function Pager({ pagination, ctx }) {
+    const { page, total } = pagination;
+    const linkClass = "inline-flex h-11 items-center gap-2 rounded-ui px-1 text-sm font-medium text-fg underline decoration-line underline-offset-[0.3em] hover:decoration-current focus-ring";
+    return (_jsxs("nav", { "aria-label": ctx.t("pagination"), className: "flex items-center justify-between gap-4 border-t border-line pt-6", children: [page > 1 ? (_jsxs(BlockLink, { href: pageHref(pagination, page - 1), rel: "prev", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: linkClass, children: [_jsx(ArrowLeft, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4 rtl:-scale-x-100" }), ctx.t("previousPage")] })) : (_jsx("span", {})), _jsx("p", { className: "font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", "aria-current": "page", children: ctx.t("pageOf", { page, total }) }), page < total ? (_jsxs(BlockLink, { href: pageHref(pagination, page + 1), rel: "next", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: linkClass, children: [ctx.t("nextPage"), _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-4 rtl:-scale-x-100" })] })) : (_jsx("span", {}))] }));
+}
+/** Streaming fallback for `<Suspense fallback={<BlogListSkeleton />}>`. */
+export function BlogListSkeleton({ variant = "grid", count = 3, className }) {
+    return (_jsxs("div", { "aria-hidden": true, className: cn("vb-container py-(--section-y)", className), "data-skeleton": "", children: [_jsx("div", { className: "mb-10 h-10 w-2/5 rounded-ui-sm bg-skeleton" }), _jsx("div", { className: cn("grid gap-x-(--gutter) gap-y-10", variant === "grid" ? "@2xl:grid-cols-2 @4xl:grid-cols-3" : ""), children: Array.from({ length: count }, (_, i) => (_jsxs("div", { className: "flex flex-col gap-3", children: [variant === "grid" ? _jsx("div", { className: "aspect-[3/2] rounded-ui bg-skeleton" }) : null, _jsx("div", { className: "h-3 w-24 rounded-ui-sm bg-skeleton" }), _jsx("div", { className: "h-5 w-4/5 rounded-ui-sm bg-skeleton" }), variant !== "compact" ? _jsx("div", { className: "h-4 w-3/5 rounded-ui-sm bg-skeleton" }) : null] }, i))) })] }));
+}

package/dist/blocks/site/comparison-table.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { CtaStyle } from "../schema/types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type SiteLink2 } from "./shared/kit-2.js";
+export type ComparisonVariant = "table" | "versus";
+/** `true` = yes, `false` = no, a string = the value ("5 GB"), `null` = not applicable (—). */
+export type ComparisonValue = boolean | string | null;
+export interface ComparisonColumn {
+    name: React.ReactNode;
+    /** Small line under the name ("$49 / mo"). */
+    note?: React.ReactNode;
+    cta?: {
+        link: SiteLink2;
+        style?: CtaStyle;
+    };
+    /** Faint accent band down the column. */
+    highlight?: boolean;
+}
+export interface ComparisonRow {
+    feature: React.ReactNode;
+    /** Small text under the feature — never a "?" tooltip. */
+    hint?: React.ReactNode;
+    /** One value per column. */
+    values: ComparisonValue[];
+}
+export interface ComparisonGroup {
+    title?: React.ReactNode;
+    rows: ComparisonRow[];
+}
+export interface ComparisonTableProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /** table: plans × features with sticky header and a mobile plan picker. versus: "Us" vs "Template site", two columns everywhere. */
+    variant?: ComparisonVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** 2–5 columns. */
+    columns: ComparisonColumn[];
+    groups: ComparisonGroup[];
+    /** Table caption for screen readers. Default: the title. */
+    caption?: string;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Plan × feature detail table, or a two-column "us vs. them" comparison. A real `<table>` with
+ * scoped headers and a caption; booleans carry hidden Yes/No text. On narrow containers a radio
+ * plan picker shows one column at a time (0 JS). Server component.
+ *
+ * ```tsx
+ * <ComparisonTable columns={[{ name: "Starter" }, { name: "Studio", highlight: true }]}
+ *   groups={[{ title: "Publishing", rows: [{ feature: "Pages", values: ["10", "Unlimited"] }] }]} />
+ * ```
+ */
+export declare function ComparisonTable({ variant, eyebrow, title, lead, columns: columnsProp, groups, caption, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: ComparisonTableProps): React.JSX.Element;

package/dist/blocks/site/comparison-table.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, Minus } from "lucide-react";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { BlockLink } from "../block-link.js";
+import { site2Text } from "./shared/labels-2.js";
+import { fieldAttr, textOf, useBlockIds2 } from "./shared/kit-2.js";
+/**
+ * Plan × feature detail table, or a two-column "us vs. them" comparison. A real `<table>` with
+ * scoped headers and a caption; booleans carry hidden Yes/No text. On narrow containers a radio
+ * plan picker shows one column at a time (0 JS). Server component.
+ *
+ * ```tsx
+ * <ComparisonTable columns={[{ name: "Starter" }, { name: "Studio", highlight: true }]}
+ *   groups={[{ title: "Publishing", rows: [{ feature: "Pages", values: ["10", "Unlimited"] }] }]} />
+ * ```
+ */
+export function ComparisonTable({ variant = "table", eyebrow, title, lead, columns: columnsProp, groups, caption, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { base, headingId } = useBlockIds2(id, "comparison");
+    const versus = variant === "versus";
+    const columns = versus ? columnsProp.slice(0, 2) : columnsProp.slice(0, 5);
+    if (process.env.NODE_ENV !== "production" && columnsProp.length > 5)
+        console.warn("[vamos-ui] ComparisonTable: more than 5 columns are not supported; extra columns were dropped.");
+    const picked = Math.max(0, columns.findIndex((c) => c.highlight));
+    const pickerName = `${base}-plan`;
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "comparison", editMode: editMode, className: cn("vb-cmp", className), "data-variant": variant, "data-cols": columns.length, children: _jsxs(Container, { className: "flex flex-col gap-10 @4xl:gap-14", children: [title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, editMode: editMode, labels: labels, locale: locale }) : null, !versus && columns.length > 1 ? (_jsxs("fieldset", { className: "vb-cmp-pick flex flex-col gap-2 @2xl:hidden", children: [_jsx("legend", { className: "mb-2 font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("showPlan") }), _jsx("div", { className: "flex flex-wrap gap-2", children: columns.map((c, i) => (_jsxs("label", { className: "vb-cmp-option inline-flex h-11 cursor-pointer items-center rounded-ui border border-line px-4 text-sm font-medium text-fg-muted", children: [_jsx("input", { type: "radio", name: pickerName, value: i, defaultChecked: i === picked, className: "sr-only" }), c.name] }, i))) })] })) : null, _jsxs("table", { className: "vb-cmp-table w-full table-fixed border-collapse text-small", children: [_jsx("caption", { className: "sr-only", children: caption ?? (textOf(title).replace(/\*/g, "") || t("comparePlans")) }), _jsxs("colgroup", { children: [_jsx("col", { className: versus ? "w-[34%]" : "w-[40%] @4xl:w-[34%]" }), columns.map((c, i) => (_jsx("col", { "data-col": i }, i)))] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "vb-cmp-head pb-5 text-start align-bottom font-mono text-eyebrow font-normal uppercase tracking-[0.08em] text-fg-muted", children: t("feature") }), columns.map((c, i) => (_jsx("th", { scope: "col", "data-col": i, "data-highlight": c.highlight ? "" : undefined, className: cn("vb-cmp-head px-3 pb-5 text-start align-bottom font-normal @4xl:px-5", versus && i === 1 && "text-fg-muted"), children: _jsxs("span", { className: "flex flex-col items-start gap-1.5", children: [_jsx("span", { className: cn("text-h3 font-semibold tracking-[-0.012em]", versus && i === 1 ? "text-fg-muted" : "text-fg"), ...fieldAttr(editMode, `columns.${i}.name`), children: c.name }), c.note ? _jsx("span", { className: "text-small text-fg-muted", children: c.note }) : null, c.cta ? (_jsx(BlockLink, { href: c.cta.link.href, newTab: c.cta.link.newTab, appearance: c.cta.style === "primary" && c.highlight ? "primary" : c.cta.style === "link" ? "link" : "secondary", size: "md", components: components, labels: labels, locale: locale, className: "mt-2", "data-track": `comparison:${i}`, children: c.cta.link.label })) : null] }) }, i)))] }) }), groups.map((g, gi) => (_jsxs("tbody", { children: [g.title ? (_jsx("tr", { children: _jsx("th", { scope: "colgroup", colSpan: columns.length + 1, className: "bg-surface-2 px-3 py-2.5 text-start font-mono text-eyebrow font-normal uppercase tracking-[0.08em] text-fg-muted @4xl:px-4", children: g.title }) })) : null, g.rows.map((r, ri) => (_jsxs("tr", { className: "border-b border-line", children: [_jsxs("th", { scope: "row", className: "py-4 pe-4 text-start align-top font-normal", children: [_jsx("span", { className: "block text-fg", children: r.feature }), r.hint ? _jsx("span", { className: "mt-1 block text-xs text-fg-muted text-pretty", children: r.hint }) : null] }), columns.map((c, ci) => (_jsx("td", { "data-col": ci, "data-highlight": c.highlight ? "" : undefined, className: cn("px-3 py-4 align-top @4xl:px-5", versus && ci === 1 ? "text-fg-muted" : "text-fg"), children: _jsx(ValueCell, { value: r.values[ci] ?? null, t: t }) }, ci)))] }, ri)))] }, gi)))] })] }) }));
+}
+function ValueCell({ value, t }) {
+    if (value === true)
+        return (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px] text-fg" }), _jsx("span", { className: "sr-only", children: t("yes") })] }));
+    if (value === false)
+        return (_jsxs(_Fragment, { children: [_jsx(Minus, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px] text-fg-subtle" }), _jsx("span", { className: "sr-only", children: t("no") })] }));
+    if (value === null || value === "")
+        return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "\u2014" }), _jsx("span", { className: "sr-only", children: t("no") })] }));
+    return _jsx("span", { className: "tabular", children: value });
+}

package/dist/blocks/site/consent-banner.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { consentDefaultsScript, type ConsentCategory } from "./shared/consent.js";
+export type ConsentVariant = "bar" | "box";
+export interface ConsentBannerProps extends Omit<BlockBaseProps, "variant" | "labels" | "headingLevel"> {
+    /** bar: a thin full-width strip at the bottom. box: a 360px panel in the bottom-start corner. */
+    variant?: ConsentVariant;
+    /** The notice. Rich text may contain links. Default: a neutral template — review with counsel. */
+    text?: React.ReactNode | RichDoc;
+    /** Cookie policy. */
+    policyLink?: {
+        href: string;
+        label?: string;
+    };
+    /** Categories offered. `necessary` is always on. Default all four. */
+    categories?: ConsentCategory[];
+    /** Bump when the text or categories change — visitors are asked again. Default 1. */
+    version?: number;
+    /** Default `"bottom"` (bar) / `"bottom-start"` (box). */
+    position?: "bottom" | "bottom-start";
+    /** `opt-in` (GDPR, KVKK — default): nothing non-essential before a choice. `notice` where the law allows. */
+    regionMode?: "opt-in" | "notice";
+    /** Render inside its parent instead of fixed to the viewport (docs, builder canvas). */
+    contained?: boolean;
+    /** Show even when a choice is stored (previews). */
+    forceShow?: boolean;
+    /** Open the preferences dialog at once (previews). */
+    defaultPreferencesOpen?: boolean;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Cookie consent for GDPR / ePrivacy and Turkey's KVKK, with Google Consent Mode v2. Not a modal:
+ * a labelled region with "Reject all" and "Accept all" at equal weight, preferences per category,
+ * a first-party `vb_consent` cookie (6 months) and `getConsent` / `onConsent` helpers. Server
+ * wrapper around a ~3 KB island. Pair it with `consentDefaultsScript()` in `<head>`.
+ *
+ * ```tsx
+ * <head><script dangerouslySetInnerHTML={{ __html: consentDefaultsScript() }} /></head>
+ * …
+ * <ConsentBanner policyLink={{ href: "/cookies" }} version={2} />
+ * ```
+ */
+export declare function ConsentBanner({ variant, text, policyLink, categories, version, position, regionMode, contained, forceShow, defaultPreferencesOpen, className, labels, locale, components, }: ConsentBannerProps): React.JSX.Element;
+/**
+ * The Consent Mode v2 defaults as a `<script>` for `<head>` (server component). Renders before any
+ * Google tag so ads and analytics wait for the visitor's choice.
+ */
+export declare function ConsentDefaults(props: Parameters<typeof consentDefaultsScript>[0] & {
+    nonce?: string;
+}): React.JSX.Element;

package/dist/blocks/site/consent-banner.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichText } from "../rich-text.js";
+import { labelTemplates, site2Text } from "./shared/labels-2.js";
+import { consentLabelKeys } from "./shared/island-keys.js";
+import { ConsentBannerIsland } from "./shared/consent-island.js";
+import { CONSENT_CATEGORIES, consentDefaultsScript } from "./shared/consent.js";
+const isRichDoc = (v) => !!v && typeof v === "object" && v.type === "doc";
+/**
+ * Cookie consent for GDPR / ePrivacy and Turkey's KVKK, with Google Consent Mode v2. Not a modal:
+ * a labelled region with "Reject all" and "Accept all" at equal weight, preferences per category,
+ * a first-party `vb_consent` cookie (6 months) and `getConsent` / `onConsent` helpers. Server
+ * wrapper around a ~3 KB island. Pair it with `consentDefaultsScript()` in `<head>`.
+ *
+ * ```tsx
+ * <head><script dangerouslySetInnerHTML={{ __html: consentDefaultsScript() }} /></head>
+ * …
+ * <ConsentBanner policyLink={{ href: "/cookies" }} version={2} />
+ * ```
+ */
+export function ConsentBanner({ variant = "bar", text, policyLink, categories = [...CONSENT_CATEGORIES], version = 1, position, regionMode = "opt-in", contained, forceShow, defaultPreferencesOpen, className, labels, locale = "en-US", components, }) {
+    const t = site2Text(labels, locale);
+    const cats = ["necessary", ...categories.filter((c) => c !== "necessary")];
+    const body = text === undefined ? t("cookieText") : isRichDoc(text) ? _jsx(RichText, { doc: text, size: "sm", components: components, labels: labels, locale: locale, className: "[&>p]:m-0" }) : text;
+    return (_jsx(ConsentBannerIsland, { variant: variant, text: body, policyLink: policyLink ? { href: policyLink.href, label: policyLink.label ?? t("cookiePolicy") } : undefined, categories: cats, version: version, position: position ?? (variant === "box" ? "bottom-start" : "bottom"), regionMode: regionMode, labels: labelTemplates(labels, consentLabelKeys), contained: contained, forceShow: forceShow, defaultPreferencesOpen: defaultPreferencesOpen, className: className }));
+}
+/**
+ * The Consent Mode v2 defaults as a `<script>` for `<head>` (server component). Renders before any
+ * Google tag so ads and analytics wait for the visitor's choice.
+ */
+export function ConsentDefaults(props) {
+    const { nonce, ...opts } = props;
+    return _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: consentDefaultsScript(opts) } });
+}

package/dist/blocks/site/contact-dock.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { OpeningHours } from "../schema/types.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+export type ContactDockVariant = "fab" | "bar" | "both";
+export type DockAction = "call" | "whatsapp" | "directions" | "booking" | "email";
+export type MessagingProvider = "whatsapp" | "telegram" | "messenger";
+export interface ContactDockProps extends Omit<BlockBaseProps, "variant" | "labels" | "headingLevel"> {
+    /** fab: a round message button in the bottom-end corner. bar: a mobile bottom bar of 2–4 actions. both: fab on desktop, bar on mobile. */
+    variant?: ContactDockVariant;
+    /** Messaging network of the fab. Default `"whatsapp"`. */
+    provider?: MessagingProvider;
+    /** E.164 WhatsApp number. */
+    whatsapp?: string;
+    /** Telegram username (without @). */
+    telegram?: string;
+    /** Facebook page username for Messenger (`m.me/<page>`). */
+    messenger?: string;
+    /** Prefilled WhatsApp text ("Hi, I’d like to book a table."). */
+    message?: string;
+    /** Fab label on desktop. Default "Message us". */
+    label?: string;
+    /** E.164 phone for "Call". */
+    phone?: string;
+    directionsHref?: string;
+    bookingHref?: string;
+    email?: string;
+    /** Bar actions, in order (max 4). Default: call · whatsapp · directions (those configured). */
+    actions?: DockAction[];
+    /** Logical side. Default `"end"`. */
+    position?: "end" | "start";
+    /** Opening hours for off-hours behaviour. */
+    hours?: OpeningHours;
+    /** show (default): nothing changes. label: "We’re closed — we’ll reply in the morning". hide: no dock while closed. */
+    offHours?: "show" | "label" | "hide";
+    /** Fixed "now" (ISO) for previews. */
+    now?: string;
+    /** Render inside the parent instead of fixed to the viewport (docs, builder canvas). */
+    contained?: boolean;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Floating messaging button and mobile action bar ("Call · Directions · WhatsApp") — the main
+ * conversion channel for local businesses in Turkey and many other markets. Plain links with
+ * `data-track` for the app's analytics, last in DOM order, ≥ 44px targets, safe-area aware.
+ * Server component; off-hours behaviour is a ~0.4 KB island.
+ *
+ * ```tsx
+ * <ContactDock variant="both" whatsapp="+902160000000" message="Hi, I’d like to book a table." phone="+902160000000" directionsHref="https://maps.app.goo.gl/…" />
+ * ```
+ */
+export declare function ContactDock(props: ContactDockProps): React.JSX.Element;

package/dist/blocks/site/contact-dock.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarCheck, Mail, Navigation, Phone } from "lucide-react";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { site2Text } from "./shared/labels-2.js";
+import { telHref } from "./shared/kit-2.js";
+import { BrandIcon, BRAND_NAMES, waLink } from "./shared/brand-icons.js";
+import { DockHours } from "./shared/dock-hours.js";
+import { DockAvoid } from "./shared/dock-avoid.js";
+function actionSpec(a, p, t) {
+    const iconClass = "size-5";
+    switch (a) {
+        case "call":
+            return p.phone ? { href: telHref(p.phone), label: t("call"), aria: t("callNumber", { phone: p.phone }), icon: _jsx(Phone, { "aria-hidden": true, strokeWidth: 1.5, className: iconClass }) } : null;
+        case "whatsapp":
+            return p.whatsapp
+                ? { href: waLink(p.whatsapp, p.message), label: "WhatsApp", aria: `${t("messageUsOn", { network: "WhatsApp" })}, ${t("opensInNewTab").replace(/[()]/g, "")}`, icon: _jsx(BrandIcon, { name: "whatsapp", className: iconClass }), external: true }
+                : null;
+        case "directions":
+            return p.directionsHref ? { href: p.directionsHref, label: t("directionsShort"), aria: t("directions"), icon: _jsx(Navigation, { "aria-hidden": true, strokeWidth: 1.5, className: iconClass }), external: true } : null;
+        case "booking":
+            return p.bookingHref ? { href: p.bookingHref, label: t("booking"), aria: t("booking"), icon: _jsx(CalendarCheck, { "aria-hidden": true, strokeWidth: 1.5, className: iconClass }) } : null;
+        case "email":
+            return p.email ? { href: `mailto:${p.email}`, label: t("emailShort"), aria: `${t("email")}: ${p.email}`, icon: _jsx(Mail, { "aria-hidden": true, strokeWidth: 1.5, className: iconClass }) } : null;
+    }
+}
+function messagingHref(p) {
+    const provider = p.provider ?? "whatsapp";
+    if (provider === "telegram")
+        return p.telegram ? `https://t.me/${p.telegram.replace(/^@/, "")}` : undefined;
+    if (provider === "messenger")
+        return p.messenger ? `https://m.me/${p.messenger}` : undefined;
+    return p.whatsapp ? waLink(p.whatsapp, p.message) : undefined;
+}
+/**
+ * Floating messaging button and mobile action bar ("Call · Directions · WhatsApp") — the main
+ * conversion channel for local businesses in Turkey and many other markets. Plain links with
+ * `data-track` for the app's analytics, last in DOM order, ≥ 44px targets, safe-area aware.
+ * Server component; off-hours behaviour is a ~0.4 KB island.
+ *
+ * ```tsx
+ * <ContactDock variant="both" whatsapp="+902160000000" message="Hi, I’d like to book a table." phone="+902160000000" directionsHref="https://maps.app.goo.gl/…" />
+ * ```
+ */
+export function ContactDock(props) {
+    const { variant = "both", provider = "whatsapp", label, position = "end", hours, offHours = "show", now, contained, className, labels, locale = "en-US", id, editMode } = props;
+    const t = site2Text(labels, locale);
+    const network = BRAND_NAMES[provider];
+    const href = messagingHref(props);
+    const defaultActions = ["call", "whatsapp", "directions", "booking", "email"];
+    const actions = (props.actions ?? defaultActions).map((a) => [a, actionSpec(a, props, t)]).filter((x) => !!x[1]).slice(0, 4);
+    const showFab = variant !== "bar" && href;
+    const showBar = variant !== "fab" && actions.length >= 2;
+    const hoursIsland = hours && offHours !== "show" ? _jsx(DockHours, { hours: hours, mode: offHours, text: t("offHours"), now: now, className: "vb-dock-offhours" }) : null;
+    return (_jsxs("div", { "data-contact-dock": "", "data-variant": variant, "data-position": position, "data-contained": contained ? "" : undefined, "data-block-id": editMode ? id : undefined, className: cn("vb-dock", className), children: [showFab ? (_jsxs("div", { className: cn("vb-dock-fab", variant === "both" && "vb-dock-desktop", position === "start" && "flex-row-reverse"), children: [hoursIsland ? _jsx("span", { className: "vb-dock-note surface-popover max-w-[16rem] rounded-ui px-3 py-2 text-xs text-fg empty:hidden [&:has(>span:empty)]:hidden", children: hoursIsland }) : null, _jsx("span", { "aria-hidden": true, className: "vb-dock-label surface-popover rounded-full px-3.5 py-2 text-sm font-medium text-fg", children: label ?? t("messageUs") }), _jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "data-track": provider, "aria-label": `${t("messageUsOn", { network })}, ${t("opensInNewTab").replace(/[()]/g, "")}`, className: "vb-dock-button inline-flex size-[52px] shrink-0 items-center justify-center rounded-full bg-fg text-scene transition-opacity hover:opacity-90 focus-ring", children: _jsx(BrandIcon, { name: provider, className: "size-6" }) })] })) : null, showBar ? (_jsxs("nav", { "aria-label": t("contactActions"), className: cn("vb-dock-bar surface-bar border-t border-line", variant === "both" && "vb-dock-mobile"), children: [hoursIsland && !showFab ? _jsx("p", { className: "px-4 pt-2 text-center text-xs text-fg-muted empty:hidden", children: hoursIsland }) : null, _jsx("ul", { className: "grid", style: { gridTemplateColumns: `repeat(${actions.length}, minmax(0, 1fr))` }, children: actions.map(([a, s]) => (_jsx("li", { children: _jsxs("a", { href: s.href, target: s.external ? "_blank" : undefined, rel: s.external ? "noopener noreferrer" : undefined, "data-track": a, "aria-label": s.aria, className: "flex h-14 flex-col items-center justify-center gap-1 text-[11px] font-medium text-fg transition-colors hover:bg-hover focus-ring", children: [s.icon, _jsx("span", { "aria-hidden": true, children: s.label })] }) }, a))) })] })) : null, !contained && (showFab || showBar) ? _jsx(DockAvoid, {}) : null] }));
+}

package/dist/blocks/site/contact-form.d.ts

@@ -0,0 +1,60 @@
+import * as React from "react";
+import type { BlockBaseProps } from "../types.js";
+import type { AddressValue, OpeningHours } from "../schema/types.js";
+import type { RichDoc } from "../schema/rich-doc.js";
+import { type Site2BlockLabels } from "./shared/labels-2.js";
+import { type ContactFieldConfig, type SiteFormAction, type SiteFormState } from "./shared/site-form.js";
+export type ContactFormVariant = "split" | "stacked" | "minimal";
+export interface ContactInfo {
+    address?: AddressValue | string;
+    /** E.164 ("+902160000000"); shown large and used as the fallback on server errors. */
+    phone?: string;
+    email?: string;
+    /** Opening hours (summarised "Mon–Fri 09:00–18:00") or a free text line. */
+    hours?: OpeningHours | string;
+}
+export interface ContactFormProps extends Omit<BlockBaseProps, "variant" | "labels"> {
+    /**
+     * split: contact details as a typographic list beside the form. stacked: title + form in one
+     * 42rem column. minimal: name, contact, message and the button in one row — under a CTA.
+     */
+    variant?: ContactFormVariant;
+    eyebrow?: React.ReactNode;
+    title?: React.ReactNode;
+    lead?: React.ReactNode;
+    /** 2–8 fields. Default: name, email, message. */
+    fields?: ContactFieldConfig[];
+    /** The app's server action (`useActionState` signature), or a URL for a plain POST. */
+    action?: SiteFormAction | string;
+    submitLabel?: string;
+    /** Replaces the form after success; focus moves to it. */
+    successMessage?: React.ReactNode | RichDoc;
+    /** Privacy notice (KVKK requires a linked notice). */
+    privacyLink?: {
+        href: string;
+        label?: string;
+    };
+    /** A required, never pre-checked "I have read the notice" checkbox. */
+    privacyCheckbox?: boolean;
+    /** A separate, optional marketing consent checkbox. */
+    marketingConsent?: boolean;
+    /** Contact details column (`split`). Default true when `info` is given. */
+    showInfo?: boolean;
+    info?: ContactInfo;
+    /** Render a given state (docs, tests, a server-rendered result). */
+    initialState?: SiteFormState;
+    labels?: Site2BlockLabels;
+}
+/**
+ * Contact and quote requests feeding whatever lead store the app uses. Server component around a
+ * ~2 KB `useActionState` island: native constraints without JS, the same validation in the
+ * browser and in the app's action (`validateContactForm`), honeypot + time trap, an error
+ * summary linking to fields, KVKK/GDPR-correct consent boxes.
+ *
+ * ```tsx
+ * <ContactForm variant="split" title="Tell us about the *project*" action={sendLead}
+ *   fields={[{ name: "name", required: true }, { name: "email", required: true }, { name: "budget", options: ["< $5k", "$5–15k"] }, { name: "message", required: true }]}
+ *   privacyLink={{ href: "/privacy" }} privacyCheckbox info={{ phone: "+902160000000", email: "hello@vamos.ist" }} />
+ * ```
+ */
+export declare function ContactForm({ variant, eyebrow, title, lead, fields, action, submitLabel, successMessage, privacyLink, privacyCheckbox, marketingConsent, showInfo, info, initialState, id, anchor, theme, headingLevel, className, labels, locale, components, editMode, }: ContactFormProps): React.JSX.Element;

package/dist/blocks/site/contact-form.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn2 as cn } from "./shared/kit-2.js";
+import { Section, Container } from "../section.js";
+import { SectionHeader } from "../section-header.js";
+import { RichText } from "../rich-text.js";
+import { labelTemplates, site2Text } from "./shared/labels-2.js";
+import { addressLines, fieldAttr, prettyPhone, telHref, useBlockIds2 } from "./shared/kit-2.js";
+import { contactFieldLabel } from "./shared/site-form.js";
+import { ContactFormIsland } from "./shared/contact-form-island.js";
+import { contactIslandLabelKeys } from "./shared/island-keys.js";
+import { summarizeHours } from "./shared/opening-hours.js";
+const DEFAULT_FIELDS = [
+    { name: "name", required: true },
+    { name: "email", required: true },
+    { name: "message", required: true },
+];
+const isRichDoc = (v) => !!v && typeof v === "object" && v.type === "doc";
+/**
+ * Contact and quote requests feeding whatever lead store the app uses. Server component around a
+ * ~2 KB `useActionState` island: native constraints without JS, the same validation in the
+ * browser and in the app's action (`validateContactForm`), honeypot + time trap, an error
+ * summary linking to fields, KVKK/GDPR-correct consent boxes.
+ *
+ * ```tsx
+ * <ContactForm variant="split" title="Tell us about the *project*" action={sendLead}
+ *   fields={[{ name: "name", required: true }, { name: "email", required: true }, { name: "budget", options: ["< $5k", "$5–15k"] }, { name: "message", required: true }]}
+ *   privacyLink={{ href: "/privacy" }} privacyCheckbox info={{ phone: "+902160000000", email: "hello@vamos.ist" }} />
+ * ```
+ */
+export function ContactForm({ variant = "split", eyebrow, title, lead, fields = DEFAULT_FIELDS, action, submitLabel, successMessage, privacyLink, privacyCheckbox, marketingConsent, showInfo, info, initialState, id, anchor, theme, headingLevel = 2, className, labels, locale = "en-US", components, editMode, }) {
+    const t = site2Text(labels, locale);
+    const { base, headingId } = useBlockIds2(id, "contact");
+    const resolved = fields.slice(0, 8).map((f) => ({ ...f, label: contactFieldLabel(f, labels) }));
+    const minimal = variant === "minimal";
+    const islandFields = minimal ? resolved.filter((f) => f.name === "name" || f.name === "email" || f.name === "phone" || f.name === "message").slice(0, 3) : resolved;
+    const split = variant === "split" && (showInfo ?? !!info) && info;
+    const form = (_jsx(ContactFormIsland, { action: action, fields: islandFields, labels: labelTemplates(labels, contactIslandLabelKeys), locale: locale, layout: variant, submitLabel: submitLabel, successMessage: isRichDoc(successMessage) ? _jsx(RichText, { doc: successMessage, components: components, labels: labels, locale: locale }) : successMessage, privacy: privacyLink ? { href: privacyLink.href, label: privacyLink.label, checkbox: privacyCheckbox } : undefined, marketingConsent: marketingConsent, fallbackPhone: info?.phone ? { href: telHref(info.phone), label: prettyPhone(info.phone) } : undefined, initialState: initialState, idBase: base }));
+    const header = title || eyebrow || lead ? _jsx(SectionHeader, { eyebrow: eyebrow, title: title, lead: lead, headingId: headingId, headingLevel: headingLevel, size: minimal ? "m" : "m", editMode: editMode, labels: labels, locale: locale }) : null;
+    return (_jsx(Section, { theme: theme, anchor: anchor, headingId: title ? headingId : undefined, blockId: id, blockType: "contact-form", editMode: editMode, className: cn("vb-contact", className), "data-variant": variant, children: split ? (_jsxs(Container, { className: "grid gap-x-(--gutter) gap-y-14 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-10 @4xl:col-span-5", children: [header, _jsx(InfoList, { info: info, t: t, locale: locale, editMode: editMode })] }), _jsx("div", { className: "@4xl:col-span-6 @4xl:col-start-7 @4xl:pt-2", children: form })] })) : (_jsxs(Container, { size: minimal ? "content" : "prose", className: cn("flex flex-col", minimal ? "gap-8" : "gap-10"), children: [header, form] })) }));
+}
+function InfoList({ info, t, locale, editMode }) {
+    const hours = typeof info.hours === "object" ? summarizeHours(info.hours, locale) : undefined;
+    const linkClass = "text-fg underline decoration-line underline-offset-[0.25em] transition-colors hover:decoration-current focus-ring rounded-[2px]";
+    return (_jsxs("dl", { className: "flex flex-col border-t border-line", children: [info.phone ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("phone") }), _jsx("dd", { ...fieldAttr(editMode, "info.phone"), children: _jsx("a", { href: telHref(info.phone), className: "font-display text-display-m tabular text-fg transition-colors hover:text-accent-ink focus-ring rounded-[2px]", "data-track": "call", children: prettyPhone(info.phone) }) })] })) : null, info.email ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("email") }), _jsx("dd", { children: _jsx("a", { href: `mailto:${info.email}`, className: cn(linkClass, "text-lead"), "data-track": "email", children: info.email }) })] })) : null, info.address ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("address") }), _jsx("dd", { className: "not-italic text-fg", children: _jsx("address", { className: "not-italic", children: (typeof info.address === "string" ? info.address.split("\n") : addressLines(info.address, { locale })).map((l, i) => (_jsx("span", { className: "block", children: l }, i))) }) })] })) : null, info.hours ? (_jsxs("div", { className: "flex flex-col gap-2 border-b border-line py-5", children: [_jsx("dt", { className: "font-mono text-eyebrow uppercase tracking-[0.08em] text-fg-muted", children: t("hours") }), _jsx("dd", { className: "text-fg", children: hours ? (_jsx("ul", { className: "flex flex-col gap-1", children: hours.map((h, i) => (_jsxs("li", { className: "flex justify-between gap-6 tabular", children: [_jsx("span", { children: h.days }), _jsx("span", { className: h.closed ? "text-fg-subtle" : undefined, children: h.closed ? t("closedDay") : h.text })] }, i))) })) : info.hours })] })) : null] }));
+}

package/dist/blocks/site/cta-booking.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+export type BookingField = "date" | "time" | "guests" | "service";
+export type BookingWeekday = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+export interface CtaBookingStrings {
+    date: string;
+    time: string;
+    guests: string;
+    service: string;
+    guestsCount: string;
+    submit: string;
+    opensWhatsApp: string;
+    closedOn: string;
+    message: string;
+    messageService: string;
+}
+export interface CtaBookingProps {
+    provider: "whatsapp" | "url";
+    /** whatsapp: digits only (`902160000000`). url: the booking page that receives the fields as query params. */
+    target: string;
+    fields: BookingField[];
+    services?: string[];
+    /** Selectable times ("18:00"…). Default every 30 min from 12:00 to 22:00. */
+    times?: string[];
+    /** Largest party size. Default 8. */
+    maxGuests?: number;
+    /** Weekdays the business is closed (date picks on these are refused). */
+    closedDays?: BookingWeekday[];
+    /** IANA zone of the business (for "today"). */
+    timeZone?: string;
+    locale: string;
+    strings: CtaBookingStrings;
+    /** No-JS fallback text sent to WhatsApp. */
+    fallbackMessage: string;
+    className?: string;
+}
+/** Today as `YYYY-MM-DD` in the business's time zone (never toISOString). */
+export declare function todayIn(timeZone?: string, now?: Date): string;
+/**
+ * Booking bar island of the CTA `booking` variant (~2 KB). Native date/select fields; on submit
+ * it builds a prefilled WhatsApp message (Intl-formatted date and time) or sends the fields to a
+ * booking URL. Without JS the form still posts to the same target.
+ */
+export declare function CtaBooking({ provider, target, fields, services, times, maxGuests, closedDays, timeZone, locale, strings, fallbackMessage, className }: CtaBookingProps): React.JSX.Element;