@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Marketing/MarketingNav.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useId, useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { iconButtonClass } from "../Button/button-class.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { type MarketingNavProps } from "./Marketing.types.ts";
+
+function NavLinks({ links }: { links: MarketingNavProps["links"] }): ReactElement {
+  return (
+    <ul>
+      {links.map((link) => (
+        <li key={link.label}>
+          <a href={link.href} aria-current={link.current ? "page" : undefined}>
+            {link.label}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * The sticky header of a public page: skip link, brand, section links and the primary call to
+ * action. From bp-lg the links sit in the bar; below it they move into a panel opened by a labeled
+ * toggle. `actions` stays visible at every width.
+ */
+export function MarketingNav({
+  brand,
+  homeHref = "/",
+  label,
+  links,
+  actions,
+  secondaryActions,
+  skipHref = "#main",
+}: MarketingNavProps): ReactElement {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const panelId = useId();
+  return (
+    <header className="xos-mkt-nav">
+      <a className="xos-mkt-skip" href={skipHref}>
+        {t("mk.skip")}
+      </a>
+      <div className="xos-mkt-wrap xos-mkt-nav-bar">
+        <a className="xos-mkt-nav-brand" href={homeHref}>
+          {brand}
+        </a>
+        <nav className="xos-mkt-nav-links" aria-label={label ?? t("nav.main")}>
+          <NavLinks links={links} />
+        </nav>
+        <div className="xos-mkt-nav-actions">
+          {secondaryActions ? (
+            <div className="xos-mkt-nav-secondary">{secondaryActions}</div>
+          ) : null}
+          {actions}
+          <button
+            type="button"
+            className={cx(iconButtonClass("ghost"), "xos-mkt-nav-toggle")}
+            aria-expanded={open}
+            aria-controls={panelId}
+            aria-label={t(open ? "mk.nav.close" : "mk.nav.menu")}
+            onClick={() => setOpen(!open)}
+          >
+            <Icon name={open ? "X" : "Menu"} />
+          </button>
+        </div>
+      </div>
+      <nav id={panelId} className="xos-mkt-nav-panel" hidden={!open} aria-label={t("mk.nav.menu")}>
+        <NavLinks links={links} />
+        {secondaryActions ? <div className="xos-mkt-actions">{secondaryActions}</div> : null}
+      </nav>
+    </header>
+  );
+}

package/src/Marketing/MarketingPoints.tsx

@@ -0,0 +1,16 @@
+import { type ReactElement } from "react";
+import { Icon } from "../Icon/Icon.tsx";
+
+/** A checked list of short claims, shared by the persona, surface and plan cards. */
+export function MarketingPoints({ points }: { points: string[] }): ReactElement {
+  return (
+    <ul className="xos-mkt-points">
+      {points.map((point) => (
+        <li key={point}>
+          <Icon name="Check" size={16} />
+          <span>{point}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/Marketing/MarketingSection.tsx

@@ -0,0 +1,52 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { type MarketingSectionProps } from "./Marketing.types.ts";
+
+/**
+ * One section of a public page: eyebrow, heading, the direct answer that opens it, then its
+ * content. The heading labels the section when the section has an id.
+ */
+export function MarketingSection({
+  id,
+  eyebrow,
+  glyph,
+  title,
+  lead,
+  badge,
+  tone = "canvas",
+  align = "start",
+  headingLevel = 2,
+  children,
+}: MarketingSectionProps): ReactElement {
+  const Heading = `h${headingLevel}` as const;
+  const titleId = id ? `${id}-title` : undefined;
+  return (
+    <section
+      id={id}
+      aria-labelledby={titleId}
+      className={cx(
+        "xos-mkt-section",
+        tone === "surface" && "xos-mkt-section-surface",
+        align === "center" && "xos-mkt-center",
+      )}
+    >
+      <div className="xos-mkt-wrap">
+        <header className="xos-mkt-section-head">
+          {eyebrow ? (
+            <p className="xos-mkt-eyebrow">
+              {glyph ? <Icon name={glyph} size={14} /> : null}
+              {eyebrow}
+            </p>
+          ) : null}
+          <Heading id={titleId} className="xos-mkt-display-40">
+            {title}
+          </Heading>
+          {lead ? <p className="xos-mkt-lead">{lead}</p> : null}
+          {badge ?? null}
+        </header>
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/Marketing/PersonaSwitcher.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { cardClass } from "../Surface/Surface.tsx";
+import { ButtonLink } from "./ButtonLink.tsx";
+import { MarketingPoints } from "./MarketingPoints.tsx";
+import { type PersonaSwitcherProps } from "./Marketing.types.ts";
+
+/**
+ * Tabs by audience. Every panel is rendered, so each audience's copy is in the document; the hash
+ * keeps the choice linkable (#for-finance). Arrow keys, Home and End move between tabs.
+ */
+export function PersonaSwitcher({
+  label,
+  personas,
+  value,
+  hash = true,
+  hashPrefix = "for-",
+  onChange,
+}: PersonaSwitcherProps): ReactElement {
+  const base = useId();
+  const [current, setCurrent] = useState(value ?? personas[0]?.value ?? "");
+  const tabs = useRef(new Map<string, HTMLButtonElement>());
+  const values = personas.map((persona) => persona.value).join("\n");
+
+  useEffect(() => {
+    if (!hash) return undefined;
+    const read = () => {
+      const target = decodeURIComponent(window.location.hash.replace(/^#/, ""));
+      const match = values.split("\n").find((v) => hashPrefix + v === target);
+      if (match !== undefined) setCurrent(match);
+    };
+    read();
+    window.addEventListener("hashchange", read);
+    return () => window.removeEventListener("hashchange", read);
+  }, [hash, hashPrefix, values]);
+
+  const pick = (next: string, focus: boolean) => {
+    setCurrent(next);
+    if (hash) {
+      try {
+        window.history.replaceState(null, "", `#${hashPrefix}${next}`);
+      } catch {
+        // A sandboxed frame refuses history writes; the tab still changes.
+      }
+    }
+    onChange?.(next);
+    if (focus) tabs.current.get(next)?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {
+    const count = personas.length;
+    const rtl = event.currentTarget.closest("[dir]")?.getAttribute("dir") === "rtl";
+    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? count - 1
+          : step !== 0
+            ? (index + (rtl ? -step : step) + count) % count
+            : -1;
+    const persona = personas[next];
+    if (persona === undefined) return;
+    event.preventDefault();
+    pick(persona.value, true);
+  };
+
+  return (
+    <div className="xos-mkt-persona">
+      <div className="xos-mkt-persona-tabs" role="tablist" aria-label={label}>
+        {personas.map((persona, index) => {
+          const on = current === persona.value;
+          return (
+            <button
+              key={persona.value}
+              type="button"
+              role="tab"
+              id={`${base}t${index}`}
+              className="xos-mkt-persona-tab"
+              aria-selected={on}
+              aria-controls={`${base}p${index}`}
+              tabIndex={on ? 0 : -1}
+              ref={(el) => {
+                if (el) tabs.current.set(persona.value, el);
+                else tabs.current.delete(persona.value);
+              }}
+              onClick={() => pick(persona.value, false)}
+              onKeyDown={(event) => onKeyDown(event, index)}
+            >
+              {persona.icon ? <Icon name={persona.icon} size={14} /> : null}
+              {persona.label}
+            </button>
+          );
+        })}
+      </div>
+      {personas.map((persona, index) => (
+        <div
+          key={persona.value}
+          role="tabpanel"
+          id={`${base}p${index}`}
+          aria-labelledby={`${base}t${index}`}
+          className="xos-mkt-persona-panel"
+          hidden={current !== persona.value}
+          tabIndex={0}
+        >
+          <div className="xos-mkt-persona-copy">
+            <h3>{persona.title}</h3>
+            <p>{persona.body}</p>
+            {persona.primary || persona.secondary ? (
+              <div className="xos-mkt-actions">
+                {persona.primary ? (
+                  <ButtonLink href={persona.primary.href} variant="primary" size="xl">
+                    {persona.primary.label}
+                  </ButtonLink>
+                ) : null}
+                {persona.secondary ? (
+                  <ButtonLink href={persona.secondary.href} size="xl">
+                    {persona.secondary.label}
+                  </ButtonLink>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          {persona.points ? (
+            <div className={cx(cardClass, "xos-mkt-persona-points")}>
+              {persona.pointsTitle ? <p className="xos-mkt-label">{persona.pointsTitle}</p> : null}
+              <MarketingPoints points={persona.points} />
+            </div>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/Marketing/PriceDisplay.tsx

@@ -0,0 +1,56 @@
+import { type ReactElement } from "react";
+import { marketingCopy } from "./marketing-copy.ts";
+import { type PriceDisplayProps } from "./Marketing.types.ts";
+
+/**
+ * One price with its billing period and tax label. A null amount is unpriced and renders Quoted,
+ * never zero; a plan sold by quote shows its starting price with "From". Whole amounts print
+ * without decimals.
+ */
+export function PriceDisplay({
+  amount,
+  currency = "USD",
+  period,
+  taxMode,
+  from = false,
+  locale,
+  messages,
+}: PriceDisplayProps): ReactElement {
+  const copy = marketingCopy({ locale, messages });
+  const { t } = copy;
+  const unpriced = amount === null || amount === undefined;
+  const digits = unpriced || Math.round(amount) === amount ? 0 : 2;
+  const money = unpriced
+    ? null
+    : new Intl.NumberFormat(copy.locale, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
+      }).format(amount);
+  return (
+    <p className="xos-mkt-price">
+      <span className="xos-mkt-price-amount tabular-nums">
+        {money === null ? (
+          <span className="text-text-secondary not-italic">{t("mk.price.quoted")}</span>
+        ) : from ? (
+          t("mk.price.from", { price: money })
+        ) : (
+          money
+        )}
+      </span>
+      {money !== null && period ? (
+        <span className="xos-mkt-price-period">
+          {t(period === "year" ? "mk.price.perYear" : "mk.price.perMonth")}
+        </span>
+      ) : null}
+      {taxMode ? (
+        <span className="xos-mkt-price-tax">
+          {t(taxMode === "inclusive" ? "mk.price.taxInclusive" : "mk.price.taxExclusive", {
+            currency,
+          })}
+        </span>
+      ) : null}
+    </p>
+  );
+}

package/src/Marketing/PricingTable.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState, type CSSProperties, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useLocale, useMessages, useT } from "../lib/context.tsx";
+import { SegmentedControl } from "../Navigation/SegmentedControl.tsx";
+import { cardClass } from "../Surface/Surface.tsx";
+import { ButtonLink } from "./ButtonLink.tsx";
+import { MarketingPoints } from "./MarketingPoints.tsx";
+import { PriceDisplay } from "./PriceDisplay.tsx";
+import { type PricingTableProps } from "./Marketing.types.ts";
+
+/**
+ * Plans side by side. The billing toggle announces its change, the terms sit with the plans, and
+ * no plan is preselected. A plan with no price for the period is unpriced and reads Quoted.
+ */
+export function PricingTable({
+  periods,
+  period,
+  currency,
+  taxMode,
+  plans,
+  terms,
+  onChange,
+}: PricingTableProps): ReactElement {
+  const t = useT();
+  const locale = useLocale();
+  const messages = useMessages();
+  const [selected, setSelected] = useState(period ?? periods[0]?.value ?? "");
+  const [announcement, setAnnouncement] = useState("");
+  const current = periods.find((p) => p.value === selected) ?? periods[0];
+
+  const change = (next: string) => {
+    setSelected(next);
+    const chosen = periods.find((p) => p.value === next);
+    if (chosen) setAnnouncement(t("mk.pricing.changed", { period: chosen.label }));
+    onChange?.(next);
+  };
+
+  return (
+    <div className="xos-mkt-pricing">
+      <div className="xos-mkt-pricing-bar">
+        <SegmentedControl
+          label={t("mk.pricing.period")}
+          value={selected}
+          options={periods.map((p) => ({ value: p.value, label: p.label }))}
+          onChange={change}
+        />
+        {periods.map((p) =>
+          p.note ? (
+            <span key={p.value} className="xos-mkt-note">
+              {p.note}
+            </span>
+          ) : null,
+        )}
+        <span className="sr-only" role="status" aria-live="polite">
+          {announcement}
+        </span>
+      </div>
+      <ul className="xos-mkt-plans" style={{ "--xos-mkt-n": plans.length } as CSSProperties}>
+        {plans.map((plan) => {
+          const quoted = plan.quoteFrom !== undefined;
+          const amount = plan.quoteFrom ?? plan.prices?.[selected] ?? null;
+          const free = amount === 0;
+          return (
+            <li
+              key={plan.name}
+              className={cx(cardClass, "xos-mkt-plan", plan.recommended && "xos-mkt-plan-rec")}
+            >
+              <div className="xos-mkt-plan-head">
+                <h3>{plan.name}</h3>
+                {plan.recommended ? (
+                  <span className="xos-mkt-tag">{t("mk.pricing.recommended")}</span>
+                ) : null}
+              </div>
+              <p className="xos-mkt-plan-blurb">{plan.blurb}</p>
+              <PriceDisplay
+                amount={amount}
+                from={quoted}
+                period={free ? null : quoted ? "month" : (current?.unit ?? null)}
+                taxMode={free ? null : (taxMode ?? null)}
+                locale={locale}
+                messages={messages}
+                {...(currency === undefined ? {} : { currency })}
+              />
+              {plan.note ? <p className="xos-mkt-note">{plan.note}</p> : null}
+              {plan.cta ? (
+                <ButtonLink
+                  href={plan.cta.href}
+                  variant={plan.recommended ? "primary" : "secondary"}
+                  size="xl"
+                  className="xos-mkt-plan-cta"
+                >
+                  {plan.cta.label}
+                </ButtonLink>
+              ) : null}
+              {plan.limits ? (
+                <dl className="xos-mkt-plan-limits">
+                  {plan.limits.map((limit) => (
+                    <div key={limit.label}>
+                      <dt>{limit.label}</dt>
+                      <dd className="tabular-nums">{limit.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              ) : null}
+              {plan.features ? (
+                <div className="xos-mkt-plan-features">
+                  {plan.featuresTitle ? (
+                    <p className="xos-mkt-label">{plan.featuresTitle}</p>
+                  ) : null}
+                  <MarketingPoints points={plan.features} />
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+      {terms ? <p className="xos-mkt-note xos-mkt-pricing-terms">{terms}</p> : null}
+    </div>
+  );
+}

package/src/Marketing/ProofStatStrip.tsx

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactElement } from "react";
+import { formatNumber } from "../lib/format.ts";
+import { marketingCopy } from "./marketing-copy.ts";
+import { type ProofStatStripProps } from "./Marketing.types.ts";
+
+/** Verifiable figures. Each one links to the file that proves it. */
+export function ProofStatStrip({
+  label,
+  items,
+  locale,
+  messages,
+}: ProofStatStripProps): ReactElement {
+  const copy = marketingCopy({ locale, messages });
+  return (
+    <ul
+      className="xos-mkt-proof"
+      aria-label={label}
+      style={{ "--xos-mkt-n": items.length } as CSSProperties}
+    >
+      {items.map((item) => (
+        <li key={item.label}>
+          <strong className="xos-mkt-proof-value tabular-nums">
+            {typeof item.value === "number" ? formatNumber(copy.locale, item.value) : item.value}
+          </strong>
+          <span className="xos-mkt-proof-label">{item.label}</span>
+          {item.source ? (
+            <a className="xos-mkt-proof-src" href={item.source.href}>
+              {copy.t("mk.proof.source", { label: item.source.label })}
+            </a>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/Marketing/ScreenshotFrame.tsx

@@ -0,0 +1,56 @@
+import { type ReactElement } from "react";
+import { type ScreenshotFrameProps } from "./Marketing.types.ts";
+
+/**
+ * A product image in a window frame, or live XOS components standing in for one. Live content is
+ * inert and exposed as one image named by `alt`, so it adds no tab stops and reads as a picture.
+ */
+export function ScreenshotFrame({
+  src,
+  alt,
+  width,
+  height,
+  ratio = "16 / 10",
+  title,
+  chrome = true,
+  eager = false,
+  caption,
+  children,
+}: ScreenshotFrameProps): ReactElement {
+  return (
+    <figure className="xos-mkt-shot">
+      {chrome ? (
+        <div className="xos-mkt-shot-bar" aria-hidden="true">
+          <i />
+          <i />
+          <i />
+          {title ? <span>{title}</span> : null}
+        </div>
+      ) : null}
+      {src ? (
+        <div className="xos-mkt-shot-view" style={{ aspectRatio: ratio }}>
+          <img
+            src={src}
+            alt={alt}
+            width={width}
+            height={height}
+            loading={eager ? "eager" : "lazy"}
+            decoding="async"
+          />
+        </div>
+      ) : (
+        <div
+          className="xos-mkt-shot-view xos-mkt-shot-live"
+          role="img"
+          aria-label={alt}
+          style={height === undefined ? undefined : { blockSize: height }}
+        >
+          <div inert aria-hidden="true">
+            {children}
+          </div>
+        </div>
+      )}
+      {caption ? <figcaption>{caption}</figcaption> : null}
+    </figure>
+  );
+}

package/src/Marketing/SurfaceTriptych.tsx

@@ -0,0 +1,43 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Tag } from "../Chips/Tag.tsx";
+import { cardClass } from "../Surface/Surface.tsx";
+import { linkClass } from "../Link/link-class.ts";
+import { MarketingPoints } from "./MarketingPoints.tsx";
+import { type SurfaceTriptychProps } from "./Marketing.types.ts";
+
+/** The three surfaces side by side, each with its audience, its status and what it covers. */
+export function SurfaceTriptych({ items }: SurfaceTriptychProps): ReactElement {
+  return (
+    <ul className="xos-mkt-grid xos-mkt-grid-3">
+      {items.map((item) => (
+        <li key={item.name} className={cx(cardClass, "xos-mkt-feature")}>
+          <div className="xos-mkt-feature-head">
+            {item.icon ? (
+              <span className="xos-mkt-tile" aria-hidden="true">
+                <Icon name={item.icon} size={16} />
+              </span>
+            ) : null}
+            <h3>{item.name}</h3>
+            {item.status ? (
+              <span className="xos-mkt-feature-status">
+                <Tag {...(item.status.tone === undefined ? {} : { tone: item.status.tone })}>
+                  {item.status.label}
+                </Tag>
+              </span>
+            ) : null}
+          </div>
+          {item.audience ? <p className="xos-mkt-feature-aud">{item.audience}</p> : null}
+          <p>{item.body}</p>
+          {item.points ? <MarketingPoints points={item.points} /> : null}
+          {item.link ? (
+            <a href={item.link.href} className={cx(linkClass, "xos-mkt-feature-link")}>
+              {item.link.label}
+            </a>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/Marketing/Testimonial.tsx

@@ -0,0 +1,45 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { avatarClass, initials } from "../Avatar/avatar-class.ts";
+import { cardClass } from "../Surface/Surface.tsx";
+import { type TestimonialProps } from "./Marketing.types.ts";
+
+/**
+ * A customer's words. The disclosure line is required: it states the speaker's connection to the
+ * publisher.
+ */
+export function Testimonial({
+  quote,
+  name,
+  role,
+  org,
+  disclosure,
+}: TestimonialProps): ReactElement {
+  return (
+    <figure className={cx(cardClass, "xos-mkt-quote")}>
+      <blockquote>
+        <p>{quote}</p>
+      </blockquote>
+      <figcaption>
+        <span
+          role="img"
+          aria-label={name}
+          title={name}
+          className={cx(avatarClass, "size-(--ui-avatar) text-text-11")}
+        >
+          {initials(name)}
+        </span>
+        <span className="xos-mkt-quote-who">
+          <strong>{name}</strong>
+          <span>{role}</span>
+          {org ? <span>{org}</span> : null}
+        </span>
+      </figcaption>
+      <p className="xos-mkt-quote-disclosure">
+        <Icon name="Info" size={12} />
+        <span>{disclosure}</span>
+      </p>
+    </figure>
+  );
+}

package/src/Marketing/marketing-copy.ts

@@ -0,0 +1,25 @@
+import { currentConfig, translate, type Messages, type MessageVars } from "../lib/i18n.ts";
+
+/** A locale and a `t` bound to it, for components that render without hooks or context. */
+export interface MarketingCopy {
+  locale: string;
+  t: (key: string, vars?: MessageVars) => string;
+}
+
+/**
+ * Resolves the shared Marketing strings without a provider: the `locale` and `messages` props when
+ * the page gives them, otherwise what `configure` set. It reads no context, so a server component
+ * can call it (ADR 0027).
+ */
+export function marketingCopy({
+  locale,
+  messages,
+}: {
+  locale: string | undefined;
+  messages: Messages | undefined;
+}): MarketingCopy {
+  const config = currentConfig();
+  const resolved = locale ?? config.locale;
+  const merged = messages === undefined ? config.messages : { ...config.messages, ...messages };
+  return { locale: resolved, t: (key, vars) => translate(resolved, key, vars, merged) };
+}