@vamos-ui/react 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,111 @@
+// Contact-form contract: field config, the action state, and a validator the app's server action
+// calls with the same config the form was rendered from. React-free, zod-free, server-safe.
+import { formatMessage } from "../../../lib/message-format.js";
+import { site2Labels } from "./labels-2.js";
+/** Name of the honeypot input. Real visitors never see or fill it. */
+export const HONEYPOT_FIELD = "website";
+/** Hidden render timestamp for the time trap. */
+export const TIMESTAMP_FIELD = "_ts";
+export const PRIVACY_FIELD = "privacy";
+export const MARKETING_FIELD = "marketing";
+const LABEL_KEY = {
+    name: "fieldName",
+    email: "fieldEmail",
+    phone: "fieldPhone",
+    company: "fieldCompany",
+    subject: "fieldSubject",
+    budget: "fieldBudget",
+    message: "fieldMessage",
+    date: "fieldDate",
+};
+/** The label shown for a field: config label → `labels` → English. */
+export function contactFieldLabel(field, labels) {
+    if (field.label)
+        return field.label;
+    const k = LABEL_KEY[field.name];
+    const v = labels ? labels[k] : undefined;
+    return typeof v === "string" ? v : site2Labels[k];
+}
+/** True for honeypot hits and submits faster than `minMs` after render (bots). */
+export function isSpam(data, opts = {}) {
+    const trap = data.get(HONEYPOT_FIELD);
+    if (typeof trap === "string" && trap.trim() !== "")
+        return true;
+    const ts = Number(data.get(TIMESTAMP_FIELD));
+    if (ts > 0 && (opts.now ?? Date.now()) - ts < (opts.minMs ?? 2500))
+        return true;
+    return false;
+}
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
+const PHONE_RE = /^\+?[\d\s().-]{7,20}$/;
+/**
+ * Validates a submission against the field config the form was rendered with. Call it first in
+ * the app's server action — the browser runs it too, but only the server's verdict counts.
+ *
+ * ```ts
+ * "use server";
+ * export async function contact(prev: SiteFormState, data: FormData) {
+ *   const v = validateContactForm(fields, data, { privacyCheckbox: true });
+ *   if (v.spam) return { status: "success" };
+ *   if (!v.ok) return v.state;
+ *   await crm.createLead(v.values);
+ *   return { status: "success" };
+ * }
+ * ```
+ */
+export function validateContactForm(fields, data, opts = {}) {
+    const merged = { ...site2Labels };
+    if (opts.labels)
+        for (const [k, v] of Object.entries(opts.labels))
+            if (typeof v === "string")
+                merged[k] = v;
+    const t = (k, vars) => formatMessage(merged[k] ?? k, vars, opts.locale ?? "en-US");
+    const values = {};
+    const errors = {};
+    for (const f of fields) {
+        const raw = data.get(f.name);
+        const v = typeof raw === "string" ? raw.trim() : "";
+        values[f.name] = v;
+        const label = contactFieldLabel(f, merged);
+        const max = f.max ?? (f.name === "message" ? 2000 : 160);
+        if (!v) {
+            if (f.required)
+                errors[f.name] = t("errorRequired", { field: label.toLowerCase() });
+            continue;
+        }
+        if (v.length > max)
+            errors[f.name] = t("errorTooLong", { field: label.toLowerCase(), max });
+        else if (f.name === "email" && !EMAIL_RE.test(v))
+            errors[f.name] = t("errorEmail");
+        else if (f.name === "phone" && !PHONE_RE.test(v))
+            errors[f.name] = t("errorPhone");
+        else if (f.options?.length && !f.options.includes(v))
+            errors[f.name] = t("errorRequired", { field: label.toLowerCase() });
+    }
+    const privacy = data.get(PRIVACY_FIELD) === "on" || data.get(PRIVACY_FIELD) === "true";
+    const marketing = data.get(MARKETING_FIELD) === "on" || data.get(MARKETING_FIELD) === "true";
+    if (opts.privacyCheckbox && !privacy)
+        errors[PRIVACY_FIELD] = t("privacyRequired");
+    const spam = isSpam(data, { minMs: opts.spamMinMs });
+    const ok = Object.keys(errors).length === 0;
+    const state = spam ? { status: "success", ts: Date.now() } : ok ? { status: "success", ts: Date.now() } : { status: "invalid", errors, values, ts: Date.now() };
+    return { ok, spam, values, errors, privacy, marketing, state };
+}
+/** HTML constraints for a field (the no-JS path relies on these). */
+export function fieldConstraints(f) {
+    const maxLength = f.max ?? (f.name === "message" ? 2000 : 160);
+    switch (f.name) {
+        case "name":
+            return { type: "text", autoComplete: "name", maxLength };
+        case "email":
+            return { type: "email", autoComplete: "email", inputMode: "email", maxLength };
+        case "phone":
+            return { type: "tel", autoComplete: "tel", inputMode: "tel", maxLength };
+        case "company":
+            return { type: "text", autoComplete: "organization", maxLength };
+        case "date":
+            return { type: "date", maxLength };
+        default:
+            return { type: "text", maxLength };
+    }
+}

package/dist/blocks/site/shared/site-routing.d.ts

@@ -0,0 +1,54 @@
+/**
+ * URL helpers of the Site shell: which page and locale a URL (or a link's href) points to,
+ * and the href for a page. Pure and server-safe, so server components can build links.
+ *
+ *   ?page=pricing            → page "pricing" (search routing, the default)
+ *   ?page=home#faq           → page "home", then scroll to #faq
+ *   #page=pricing            → page "pricing" (hash routing)
+ *   ?lang=tr                 → locale "tr", page unchanged
+ */
+export type SiteRouting = "search" | "hash" | "memory";
+export interface SiteLocation {
+    page?: string;
+    locale?: string;
+    /** In-page anchor after the page switch (`faq` for `#faq`). */
+    anchor?: string;
+}
+export interface SiteRouteParams {
+    /** Query/hash key for the page. Default `"page"`. */
+    pageParam?: string;
+    /** Query key for the locale. Default `"lang"`. */
+    localeParam?: string;
+}
+/**
+ * The href for an inner page, merged into nothing (relative to the current URL):
+ * `sitePageHref("pricing")` → `"?page=pricing"`, `sitePageHref("home", "faq")` → `"?page=home#faq"`.
+ */
+export declare function sitePageHref(page: string, anchor?: string, options?: SiteRouteParams & {
+    routing?: SiteRouting;
+}): string;
+/** The href that switches the locale: `siteLocaleHref("tr")` → `"?lang=tr"`. */
+export declare const siteLocaleHref: (locale: string, options?: SiteRouteParams) => string;
+/**
+ * Reads a link's href as a site location, or `null` when it is not a shell link (a path, an
+ * external URL, a plain `#anchor`). Only relative hrefs that start with `?` or `#<pageParam>=`.
+ */
+export declare function parseSiteHref(href: string | null | undefined, options?: SiteRouteParams): SiteLocation | null;
+/** Reads the current location (`search` + `hash`) as page and locale. */
+export declare function readSiteLocation(search: string, hash: string, routing: SiteRouting, options?: SiteRouteParams): SiteLocation;
+/**
+ * The URL after a change: other query params are kept, the default page and locale are left out
+ * so the home page stays at a clean URL.
+ */
+export declare function writeSiteLocation(current: {
+    pathname: string;
+    search: string;
+    hash: string;
+}, next: {
+    page: string;
+    locale: string;
+    anchor?: string;
+}, defaults: {
+    page: string;
+    locale: string;
+}, routing: SiteRouting, options?: SiteRouteParams): string;

package/dist/blocks/site/shared/site-routing.js

@@ -0,0 +1,86 @@
+/**
+ * URL helpers of the Site shell: which page and locale a URL (or a link's href) points to,
+ * and the href for a page. Pure and server-safe, so server components can build links.
+ *
+ *   ?page=pricing            → page "pricing" (search routing, the default)
+ *   ?page=home#faq           → page "home", then scroll to #faq
+ *   #page=pricing            → page "pricing" (hash routing)
+ *   ?lang=tr                 → locale "tr", page unchanged
+ */
+/**
+ * The href for an inner page, merged into nothing (relative to the current URL):
+ * `sitePageHref("pricing")` → `"?page=pricing"`, `sitePageHref("home", "faq")` → `"?page=home#faq"`.
+ */
+export function sitePageHref(page, anchor, options = {}) {
+    const key = options.pageParam ?? "page";
+    const enc = encodeURIComponent(page);
+    if (options.routing === "hash")
+        return `#${key}=${enc}`;
+    return `?${key}=${enc}${anchor ? `#${anchor}` : ""}`;
+}
+/** The href that switches the locale: `siteLocaleHref("tr")` → `"?lang=tr"`. */
+export const siteLocaleHref = (locale, options = {}) => `?${options.localeParam ?? "lang"}=${encodeURIComponent(locale)}`;
+/**
+ * Reads a link's href as a site location, or `null` when it is not a shell link (a path, an
+ * external URL, a plain `#anchor`). Only relative hrefs that start with `?` or `#<pageParam>=`.
+ */
+export function parseSiteHref(href, options = {}) {
+    if (!href)
+        return null;
+    const pageKey = options.pageParam ?? "page";
+    const langKey = options.localeParam ?? "lang";
+    if (href.startsWith(`#${pageKey}=`)) {
+        const page = decodeURIComponent(href.slice(pageKey.length + 2));
+        return page ? { page } : null;
+    }
+    if (!href.startsWith("?"))
+        return null;
+    const hashAt = href.indexOf("#");
+    const query = new URLSearchParams(hashAt === -1 ? href.slice(1) : href.slice(1, hashAt));
+    const anchor = hashAt === -1 ? undefined : href.slice(hashAt + 1) || undefined;
+    const page = query.get(pageKey) ?? undefined;
+    const locale = query.get(langKey) ?? undefined;
+    if (!page && !locale)
+        return null;
+    return { page, locale, anchor };
+}
+/** Reads the current location (`search` + `hash`) as page and locale. */
+export function readSiteLocation(search, hash, routing, options = {}) {
+    const pageKey = options.pageParam ?? "page";
+    const q = new URLSearchParams(search);
+    const locale = q.get(options.localeParam ?? "lang") ?? undefined;
+    let page;
+    if (routing === "hash") {
+        const m = new RegExp(`^#${pageKey}=([^&]*)`).exec(hash);
+        page = m?.[1] ? decodeURIComponent(m[1]) : undefined;
+    }
+    else if (routing === "search") {
+        page = q.get(pageKey) ?? undefined;
+    }
+    return { page, locale };
+}
+/**
+ * The URL after a change: other query params are kept, the default page and locale are left out
+ * so the home page stays at a clean URL.
+ */
+export function writeSiteLocation(current, next, defaults, routing, options = {}) {
+    const pageKey = options.pageParam ?? "page";
+    const langKey = options.localeParam ?? "lang";
+    const q = new URLSearchParams(current.search);
+    if (next.locale === defaults.locale)
+        q.delete(langKey);
+    else
+        q.set(langKey, next.locale);
+    let hash = next.anchor ? `#${next.anchor}` : "";
+    if (routing === "search") {
+        if (next.page === defaults.page)
+            q.delete(pageKey);
+        else
+            q.set(pageKey, next.page);
+    }
+    else if (routing === "hash") {
+        hash = next.page === defaults.page ? "" : `#${pageKey}=${encodeURIComponent(next.page)}`;
+    }
+    const qs = q.toString();
+    return `${current.pathname}${qs ? `?${qs}` : ""}${hash}`;
+}

package/dist/blocks/site/shared/testimonials-carousel.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { CarouselLabels } from "./island-keys.js";
+export interface TestimonialsCarouselProps {
+    /** Section header, rendered beside the arrows. */
+    header?: React.ReactNode;
+    count: number;
+    labels: CarouselLabels;
+    locale?: string;
+    /** One child per slide (server-rendered quotes). */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Scroll-snap carousel island (~1 KB): native swipe/scroll, arrow buttons, a "3 / 8" counter,
+ * ←/→ keys on the track. No autoplay. Slides are labelled groups (WAI-ARIA carousel pattern).
+ */
+export declare function TestimonialsCarousel({ header, count, labels, locale, children, className }: TestimonialsCarouselProps): React.JSX.Element;

package/dist/blocks/site/shared/testimonials-carousel.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { cn2 as cn } from "./kit-2.js";
+import { formatMessage } from "../../../lib/message-format.js";
+/**
+ * Scroll-snap carousel island (~1 KB): native swipe/scroll, arrow buttons, a "3 / 8" counter,
+ * ←/→ keys on the track. No autoplay. Slides are labelled groups (WAI-ARIA carousel pattern).
+ */
+export function TestimonialsCarousel({ header, count, labels, locale = "en-US", children, className }) {
+    const track = React.useRef(null);
+    const [current, setCurrent] = React.useState(0);
+    const f = (k, v) => formatMessage(labels[k], v, locale);
+    const slides = React.Children.toArray(children);
+    const slideEls = () => Array.from(track.current?.children ?? []);
+    const go = React.useCallback((i) => {
+        const el = track.current;
+        const target = Array.from(el?.children ?? [])[Math.max(0, Math.min(count - 1, i))];
+        if (!el || !target)
+            return;
+        const rtl = getComputedStyle(el).direction === "rtl";
+        const left = rtl ? target.offsetLeft + target.offsetWidth - el.clientWidth : target.offsetLeft - el.offsetLeft;
+        const reduce = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (typeof el.scrollTo === "function")
+            el.scrollTo({ left, behavior: reduce ? "auto" : "smooth" });
+        setCurrent(Math.max(0, Math.min(count - 1, i)));
+    }, [count]);
+    React.useEffect(() => {
+        const el = track.current;
+        if (!el || typeof IntersectionObserver === "undefined")
+            return;
+        const io = new IntersectionObserver((entries) => {
+            const visible = entries.filter((e) => e.isIntersecting && e.intersectionRatio > 0.6);
+            if (visible.length) {
+                const first = visible.map((e) => slideEls().indexOf(e.target)).sort((a, b) => a - b)[0];
+                if (first !== undefined && first >= 0)
+                    setCurrent(first);
+            }
+        }, { root: el, threshold: [0.6] });
+        for (const s of slideEls())
+            io.observe(s);
+        return () => io.disconnect();
+    }, [count]);
+    return (_jsxs("div", { role: "region", "aria-roledescription": labels.carousel, "aria-label": labels.carousel, className: cn("vb-carousel flex flex-col gap-10", className), children: [_jsxs("div", { className: "flex flex-col gap-6 @2xl:flex-row @2xl:items-end @2xl:justify-between", children: [header ?? _jsx("span", {}), _jsxs("div", { className: "flex shrink-0 items-center gap-4", children: [_jsx("span", { className: "font-mono text-eyebrow tabular uppercase tracking-[0.08em] text-fg-muted", "aria-live": "polite", children: f("slideCounter", { index: current + 1, total: count }) }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { type: "button", "aria-label": labels.previous, disabled: current === 0, onClick: () => go(current - 1), className: "vb-carousel-btn", children: _jsx(ArrowLeft, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px] rtl:-scale-x-100" }) }), _jsx("button", { type: "button", "aria-label": labels.next, disabled: current >= count - 1, onClick: () => go(current + 1), className: "vb-carousel-btn", children: _jsx(ArrowRight, { "aria-hidden": true, strokeWidth: 1.5, className: "size-[18px] rtl:-scale-x-100" }) })] })] })] }), _jsx("div", { ref: track, tabIndex: 0, "aria-label": labels.carousel, onKeyDown: (e) => {
+                    const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+                    if (e.key === (rtl ? "ArrowLeft" : "ArrowRight")) {
+                        e.preventDefault();
+                        go(current + 1);
+                    }
+                    else if (e.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+                        e.preventDefault();
+                        go(current - 1);
+                    }
+                    else if (e.key === "Home") {
+                        e.preventDefault();
+                        go(0);
+                    }
+                    else if (e.key === "End") {
+                        e.preventDefault();
+                        go(count - 1);
+                    }
+                }, className: "vb-carousel-track scrollbar-none -mx-1 flex snap-x snap-mandatory gap-(--gutter) overflow-x-auto px-1 pb-1 focus-ring rounded-ui-sm", children: slides.map((child, i) => (_jsx("div", { role: "group", "aria-roledescription": labels.slide, "aria-label": f("slideLabel", { index: i + 1, total: count }), className: "w-full shrink-0 snap-start border-t border-line pt-6 @2xl:w-[calc((100%-var(--gutter))/2)]", children: child }, i))) })] }));
+}

package/dist/blocks/site/site-shell.d.ts

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { type SiteLocation, type SiteRouting } from "./shared/site-routing.js";
+export interface SiteShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "dir"> {
+    /**
+     * The site's accent: a built-in preset (`"lime"`, `"ocean"`, `"ember"`, `"rose"`, `"graphite"`)
+     * or one brand colour (`"#B4532A"`, `rgb()`, `oklch()`). A colour becomes the four accent
+     * variables on the site root, contrast-checked (text on the fill and accent ink ≥ 4.5:1).
+     */
+    accent?: string;
+    /** Explicit dark-mode fill for a custom accent. Derived when the colour is too dark. */
+    accentDark?: string;
+    /** Type pairing → `data-font` (editorial, grotesk, corporate, system or your own). */
+    font?: string;
+    /** Surface material → `data-material`. */
+    material?: "glass" | "solid";
+    /** → `data-density`. */
+    density?: "comfortable" | "compact" | "spacious";
+    /** Force a mode for the whole site. Default: inherit the page's. */
+    theme?: "light" | "dark";
+    dir?: "ltr" | "rtl";
+    /** Locale codes, default first. Default `["en", "tr"]`. */
+    locales?: string[];
+    /** Controlled locale. */
+    locale?: string;
+    defaultLocale?: string;
+    onLocaleChange?: (locale: string) => void;
+    /** Page ids, home first. Default `["home"]`. */
+    pages?: string[];
+    /** Controlled page. */
+    page?: string;
+    defaultPage?: string;
+    onPageChange?: (page: string) => void;
+    /** Where the page lives in the URL: `?page=` (default), `#page=`, or nowhere. The locale always uses `?lang=`. */
+    routing?: SiteRouting;
+    /** Query/hash key for the page. Default `"page"`. */
+    pageParam?: string;
+    /** Query key for the locale. Default `"lang"`. */
+    localeParam?: string;
+    /**
+     * Motion level for the whole site → `data-motion`. subtle (default): short fades and small
+     * rises, count-ups, the logo ticker. full: longer, wider, a wiping hero title, magnetic
+     * calls-to-action. off: final state everywhere. Reduced motion always wins. Page and
+     * language switches cross-fade (View Transitions where available, a fade otherwise).
+     */
+    motion?: "full" | "subtle" | "off";
+}
+export interface SiteShellContextValue {
+    page: string;
+    locale: string;
+    pages: readonly string[];
+    locales: readonly string[];
+    /** Go to a page and/or locale (and optionally an anchor on it). */
+    navigate: (to: SiteLocation) => void;
+    /** The href for a page (respects `routing` and `pageParam`). */
+    hrefFor: (page: string, anchor?: string) => string;
+    /** The shell's motion level. */
+    motion: "full" | "subtle" | "off";
+    /** True after a switch that should fade the new page in (no View Transitions available). */
+    pageEnter: boolean;
+}
+/** Page, locale and navigation of the closest Site shell. Throws outside one. */
+export declare function useSiteShell(): SiteShellContextValue;
+/**
+ * The frame of a demo or single-route website: EN/TR switch, inner-page switching and the
+ * site's own look (accent from one colour, font, material, density), scoped to its root.
+ *
+ * Every language and page is rendered on the server as plain blocks; the shell shows one of
+ * each and swaps on links like `?page=pricing`, `?page=home#faq` or `?lang=tr` inside it —
+ * so server-rendered Navbar and Footer links work as they are. On a page change it scrolls to
+ * the top of the site, moves focus to the page's `h1` and marks matching links
+ * `aria-current="page"`. Back/forward follow the URL. Overlays opened inside keep its theme.
+ *
+ * ```tsx
+ * <SiteShell accent="#B4532A" font="editorial" material="solid" pages={["home", "shop"]}>
+ *   <Navbar items={[{ label: "Shop", href: "?page=shop" }]} … />
+ *   <SiteShellPage id="home"><Hero … /></SiteShellPage>
+ *   <SiteShellPage id="shop"><PageIntro title="Shop" … /></SiteShellPage>
+ * </SiteShell>
+ * ```
+ */
+export declare const SiteShell: React.ForwardRefExoticComponent<SiteShellProps & React.RefAttributes<HTMLDivElement>>;
+export interface SiteShellPageProps {
+    /** Page id from the shell's `pages`. */
+    id: string;
+    /** Document title while this page is shown (set after navigating, not on first load). */
+    title?: string;
+    children?: React.ReactNode;
+}
+/** One inner page: rendered only while it is the shell's current page. */
+export declare function SiteShellPage({ id, title, children }: SiteShellPageProps): React.JSX.Element | null;
+export interface SiteShellLocaleProps {
+    /** Locale code from the shell's `locales`. */
+    code: string;
+    children?: React.ReactNode;
+}
+/** One language version: rendered only while it is the shell's current locale (with `lang`). */
+export declare function SiteShellLocale({ code, children }: SiteShellLocaleProps): React.JSX.Element | null;
+export interface SiteShellLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    /** Target page id. */
+    page: string;
+    /** In-page anchor on that page (`"faq"`). */
+    anchor?: string;
+}
+/**
+ * A link to an inner page for client code. Server components can use a plain
+ * `href={sitePageHref("pricing")}` instead; the shell handles both.
+ */
+export declare const SiteShellLink: React.ForwardRefExoticComponent<SiteShellLinkProps & React.RefAttributes<HTMLAnchorElement>>;