@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.11.0",
+  "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniaui.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaUI.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaUI/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "css",
+    "omniaui",
+    "tsx"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./src/*": "./src/*",
+    "./manifest.json": "./manifest.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "manifest.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "node scripts/build-manifest.mjs && tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/blocks/BlockAboutTimeline.tsx

@@ -0,0 +1,46 @@
+// File: packages/react/src/blocks/BlockAboutTimeline.tsx | Map: props -> BlockAboutTimeline (media + badge -> copy -> timeline)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Timeline } from "../components/Timeline";
+import type { TimelineEntry } from "../components/Timeline";
+
+export interface BlockAboutTimelineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Heading; wrap a part in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  /** Paragraphs (or any content) below the title. */
+  children?: ReactNode;
+  timeline?: TimelineEntry[];
+  /** Picture URL; without it the media is an accent gradient. */
+  image?: string;
+  imageAlt?: string;
+  /** Badge on the picture (e.g. <><strong>12+</strong>years</>). */
+  badge?: ReactNode;
+  /** Picture on the right. */
+  reverse?: boolean;
+}
+
+/** `.oc-block-about`: picture next to the company story with a year timeline. */
+export const BlockAboutTimeline = forwardRef<HTMLElement, BlockAboutTimelineProps>(function BlockAboutTimeline(
+  { eyebrow, title, children, timeline = [], image, imageAlt = "", badge, reverse = false, className, ...rest },
+  ref,
+) {
+  const titleId = `oc-about-title-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <section ref={ref} className={cx("oc-block-about", reverse && "oc-block-about--reverse", className)} aria-labelledby={titleId} {...rest}>
+      <div className="oc-block-about-inner">
+        <figure className="oc-block-about-media" aria-hidden={image ? undefined : true}>
+          {image && <img src={image} alt={imageAlt} loading="lazy" />}
+          {badge != null && <span className="oc-block-about-badge">{badge}</span>}
+        </figure>
+        <div className="oc-block-about-copy">
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h2 className="oc-block-about-title" id={titleId}>{title}</h2>
+          {children}
+          {timeline.length > 0 && <Timeline items={timeline} />}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockAppHeader.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Icon } from "../components/Icon";
+import { Navmenu, NavmenuItem, NavmenuLink } from "../components/Navmenu";
+
+export interface AppHeaderNavItem {
+  label: ReactNode;
+  href: string;
+  current?: boolean;
+}
+
+export interface BlockAppHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Id of the sidebar toggle checkbox (see BlockAppShell). Omit to hide the toggle button. */
+  toggleFor?: string;
+  toggleLabel?: string;
+  /** Module navigation links. */
+  nav?: AppHeaderNavItem[];
+  navLabel?: string;
+  /** Right-aligned actions: theme switch, switchers, user menu. */
+  actions?: ReactNode;
+  /** Optional page title (`oc-block-appbar-title`). */
+  title?: ReactNode;
+}
+
+/** `.oc-block-appbar`: top bar with sidebar toggle, module navigation and actions. */
+export const BlockAppHeader = forwardRef<HTMLElement, BlockAppHeaderProps>(function BlockAppHeader(
+  { toggleFor, toggleLabel = "Toggle sidebar", nav, navLabel = "Module navigation", actions, title, className, ...rest },
+  ref,
+) {
+  return (
+    <header ref={ref} className={cx("oc-block-appbar", className)} {...rest}>
+      {toggleFor && (
+        <label className="oc-btn oc-btn--ghost oc-btn--icon" htmlFor={toggleFor} title={toggleLabel}>
+          <Icon d="M4 6h16M4 12h16M4 18h16" />
+          <span className="oc-visually-hidden">{toggleLabel}</span>
+        </label>
+      )}
+      {title != null && <span className="oc-block-appbar-title">{title}</span>}
+      {nav && (
+        <Navmenu label={navLabel} navClassName="oc-block-appbar-nav">
+          {nav.map((item, i) => (
+            <NavmenuItem key={i}>
+              <NavmenuLink href={item.href} current={item.current}>{item.label}</NavmenuLink>
+            </NavmenuItem>
+          ))}
+        </Navmenu>
+      )}
+      {actions != null && <div className="oc-block-appbar-actions">{actions}</div>}
+    </header>
+  );
+});

package/src/blocks/BlockAppShell.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, useId } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import type { BreadcrumbItemData } from "../components/Breadcrumb";
+
+export interface BlockAppShellProps extends HTMLAttributes<HTMLDivElement> {
+  /** A `<Sidebar>`; rendered as the first grid child. */
+  sidebar: ReactNode;
+  /** A `<BlockAppHeader toggleFor={toggleId}>`. */
+  header?: ReactNode;
+  /** Breadcrumb strip under the header bar. */
+  breadcrumbs?: BreadcrumbItemData[];
+  /** Id of the collapse checkbox; pass the same value to `BlockAppHeader`'s `toggleFor`. */
+  toggleId?: string;
+  /** Shell height (`--oc-block-shell-height`, default 100dvh). */
+  height?: string;
+}
+
+/** `.oc-block-shell`: sidebar, header bar, breadcrumb strip and the scrolling content. */
+export const BlockAppShell = forwardRef<HTMLDivElement, BlockAppShellProps>(function BlockAppShell(
+  { sidebar, header, breadcrumbs, toggleId, height, className, style, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const id = toggleId ?? `oc-shell-toggle-${auto.replace(/:/g, "")}`;
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-block-shell", className)}
+      style={height ? ({ "--oc-block-shell-height": height, ...style } as CSSProperties) : style}
+      {...rest}
+    >
+      <input className="oc-block-shell-toggle" type="checkbox" id={id} aria-label="Collapse sidebar" />
+      {sidebar}
+      <div className="oc-block-shell-main">
+        {header}
+        {breadcrumbs && (
+          <div className="oc-block-shell-breadcrumbs">
+            <nav aria-label="Breadcrumb">
+              <ol className="oc-breadcrumb">
+                {breadcrumbs.map((item, i) =>
+                  item.href && i < breadcrumbs.length - 1 ? (
+                    <li className="oc-breadcrumb-item" key={i}><a href={item.href}>{item.label}</a></li>
+                  ) : (
+                    <li className="oc-breadcrumb-item" aria-current="page" key={i}>{item.label}</li>
+                  ),
+                )}
+              </ol>
+            </nav>
+          </div>
+        )}
+        <main className="oc-block-shell-content">{children}</main>
+      </div>
+    </div>
+  );
+});

package/src/blocks/BlockAuth.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, useId } from "react";
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockAuthProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  submitLabel?: ReactNode;
+  /** Label of the secondary (social) button; omit to hide it together with the divider. */
+  socialLabel?: ReactNode;
+  dividerLabel?: ReactNode;
+  /** Text under the card, e.g. `Don't have an account? <a href="#">Sign up</a>`. */
+  footer?: ReactNode;
+  onSubmit?: (values: { email: string; password: string }) => void;
+  onSocial?: () => void;
+}
+
+/** `.oc-block-auth`: sign-in card with e-mail, password and an optional social button. */
+export const BlockAuth = forwardRef<HTMLDivElement, BlockAuthProps>(function BlockAuth(
+  { title = "Sign in", subtitle, submitLabel = "Sign in", socialLabel, dividerLabel = "or continue with", footer, onSubmit, onSocial, className, ...rest },
+  ref,
+) {
+  const id = useId().replace(/:/g, "");
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    onSubmit?.({ email: String(data.get("email") ?? ""), password: String(data.get("password") ?? "") });
+  };
+  return (
+    <div ref={ref} className={cx("oc-block-auth", className)} {...rest}>
+      <form className="oc-block-auth-card" onSubmit={submit}>
+        <h2>{title}</h2>
+        {subtitle != null && <p className="oc-block-subtitle">{subtitle}</p>}
+        <div className="oc-form-group">
+          <label className="oc-label" htmlFor={`${id}-email`}>Email</label>
+          <input className="oc-input" id={`${id}-email`} name="email" type="email" placeholder="name@company.com" />
+        </div>
+        <div className="oc-form-group">
+          <label className="oc-label" htmlFor={`${id}-password`}>Password</label>
+          <input className="oc-input" id={`${id}-password`} name="password" type="password" placeholder="********" />
+        </div>
+        <button className="oc-btn" type="submit" style={{ width: "100%" }}>{submitLabel}</button>
+        {socialLabel != null && (
+          <>
+            <div className="oc-block-auth-divider">{dividerLabel}</div>
+            <button className="oc-btn oc-btn--outline" type="button" style={{ width: "100%" }} onClick={onSocial}>{socialLabel}</button>
+          </>
+        )}
+      </form>
+      {footer != null && <div className="oc-block-auth-footer">{footer}</div>}
+    </div>
+  );
+});

package/src/blocks/BlockAuthSplit.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, useId } from "react";
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { PasswordInput } from "../components/PasswordInput";
+
+export interface BlockAuthSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+  /** Brand link content (icon + name). */
+  logo?: ReactNode;
+  logoHref?: string;
+  quote?: ReactNode;
+  quoteAuthor?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  submitLabel?: ReactNode;
+  forgotHref?: string;
+  forgotLabel?: ReactNode;
+  rememberLabel?: ReactNode;
+  onSubmit?: (values: { email: string; password: string; remember: boolean }) => void;
+}
+
+/** `.oc-block-authsplit`: brand panel (logo, quote) next to the sign-in form. */
+export const BlockAuthSplit = forwardRef<HTMLDivElement, BlockAuthSplitProps>(function BlockAuthSplit(
+  {
+    logo,
+    logoHref = "#",
+    quote,
+    quoteAuthor,
+    title = "Welcome back",
+    subtitle,
+    submitLabel = "Sign in",
+    forgotHref = "#",
+    forgotLabel = "Forgot password?",
+    rememberLabel = "Remember me",
+    onSubmit,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const id = useId().replace(/:/g, "");
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    onSubmit?.({
+      email: String(data.get("email") ?? ""),
+      password: String(data.get("password") ?? ""),
+      remember: data.get("remember") != null,
+    });
+  };
+  return (
+    <div ref={ref} className={cx("oc-block-authsplit", className)} {...rest}>
+      <aside className="oc-block-authsplit-brand">
+        {logo != null && <a className="oc-block-authsplit-logo" href={logoHref}>{logo}</a>}
+        {quote != null && (
+          <blockquote className="oc-block-authsplit-quote">
+            <p>{quote}</p>
+            {quoteAuthor != null && <footer>{quoteAuthor}</footer>}
+          </blockquote>
+        )}
+      </aside>
+      <div className="oc-block-authsplit-form">
+        <form className="oc-block-authsplit-card" onSubmit={submit}>
+          <h1 className="oc-block-authsplit-title">{title}</h1>
+          {subtitle != null && <p className="oc-block-authsplit-subtitle">{subtitle}</p>}
+          <div className="oc-block-authsplit-fields">
+            <div className="oc-field">
+              <label className="oc-field-label" htmlFor={`${id}-email`}>E-mail</label>
+              <input className="oc-input" id={`${id}-email`} name="email" type="email" autoComplete="username" placeholder="name@company.com" required />
+            </div>
+            <div className="oc-field">
+              <label className="oc-field-label" htmlFor={`${id}-password`}>Password</label>
+              <PasswordInput id={`${id}-password`} name="password" required />
+            </div>
+            <div className="oc-block-authsplit-row">
+              <label><input className="oc-checkbox" type="checkbox" name="remember" /> {rememberLabel}</label>
+              <a className="oc-link" href={forgotHref}>{forgotLabel}</a>
+            </div>
+            <button className="oc-btn" type="submit" style={{ width: "100%" }}>{submitLabel}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+});

package/src/blocks/BlockContactGrid.tsx

@@ -0,0 +1,71 @@
+// File: packages/react/src/blocks/BlockContactGrid.tsx | Map: types -> BlockContactGrid (head -> grid of cards (mark, title, lines))
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ContactGridLine {
+  text: ReactNode;
+  /** Makes the line a link (mailto:, tel:, https:). */
+  href?: string;
+}
+
+export interface ContactGridCard {
+  title: ReactNode;
+  lines: ContactGridLine[];
+  /** Glyph in a soft product mark. */
+  icon?: ReactNode;
+  /** Accent preset of the mark (green, violet, ...). */
+  accent?: string;
+  /** Renders the card as <address>. */
+  address?: boolean;
+}
+
+export interface BlockContactGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  lead?: ReactNode;
+  cards: ContactGridCard[];
+  /** No card frames. */
+  plain?: boolean;
+}
+
+/** `.oc-block-contact`: contact info cards (e-mail, phone, address, hours). */
+export const BlockContactGrid = forwardRef<HTMLElement, BlockContactGridProps>(function BlockContactGrid(
+  { eyebrow, title, lead, cards, plain = false, className, ...rest },
+  ref,
+) {
+  const titleId = `oc-contact-title-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <section ref={ref} className={cx("oc-block-contact", plain && "oc-block-contact--plain", className)} aria-labelledby={title != null ? titleId : undefined} {...rest}>
+      {(eyebrow != null || title != null || lead != null) && (
+        <div className="oc-block-contact-head">
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          {title != null && <h2 className="oc-block-contact-heading" id={titleId}>{title}</h2>}
+          {lead != null && <p className="oc-block-contact-lead">{lead}</p>}
+        </div>
+      )}
+      <div className="oc-block-contact-grid">
+        {cards.map((card, i) => {
+          const Card = card.address ? "address" : "article";
+          const Title = card.address ? "span" : "h3";
+          const Line = card.address ? "span" : "p";
+          return (
+            <Card className="oc-block-contact-card" key={i}>
+              {card.icon != null && (
+                <span className={cx("oc-product-mark oc-product-mark--sm oc-product-mark--soft", card.accent && `oc-accent--${card.accent}`)} aria-hidden="true">{card.icon}</span>
+              )}
+              <Title className="oc-block-contact-title">{card.title}</Title>
+              {card.lines.map((line, j) =>
+                line.href ? (
+                  <a className="oc-block-contact-line" href={line.href} key={j}>{line.text}</a>
+                ) : (
+                  <Line className="oc-block-contact-line" key={j}>{line.text}</Line>
+                ),
+              )}
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockCta.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockCtaProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+/** `.oc-block-cta`: call to action banner. */
+export const BlockCta = forwardRef<HTMLDivElement, BlockCtaProps>(function BlockCta(
+  { title, description, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-cta", className)} {...rest}>
+      <h2>{title}</h2>
+      {description != null && <p>{description}</p>}
+      {actions != null && <div className="oc-block-hero-actions">{actions}</div>}
+    </div>
+  );
+});

package/src/blocks/BlockDataTable.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockDataTableProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Header buttons (export, new...). */
+  actions?: ReactNode;
+  /** Search + filters row (`oc-table-toolbar`). Use `BlockDataTableSpacer` to push items right. */
+  toolbar?: ReactNode;
+  /** Selection bar, shown by you when rows are selected (`oc-block-datatable-bulk`). */
+  bulk?: ReactNode;
+  /** Entries text, page-size select and pagination (`oc-table-footer`). */
+  footer?: ReactNode;
+  /** The `<Table>`. */
+  children?: ReactNode;
+}
+
+/** `.oc-card.oc-block-datatable`: card with header, toolbar, table, bulk bar and footer. */
+export const BlockDataTable = forwardRef<HTMLElement, BlockDataTableProps>(function BlockDataTable(
+  { title, description, actions, toolbar, bulk, footer, className, children, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-card oc-block-datatable", className)} {...rest}>
+      <header className="oc-block-datatable-head">
+        <div>
+          {title != null && <h2 className="oc-block-datatable-title">{title}</h2>}
+          {description != null && <p className="oc-block-datatable-description">{description}</p>}
+        </div>
+        {actions != null && <div>{actions}</div>}
+      </header>
+      <div className="oc-block-datatable-body">
+        {toolbar != null && <div className="oc-table-toolbar">{toolbar}</div>}
+        {bulk != null && <div className="oc-block-datatable-bulk">{bulk}</div>}
+        {children}
+        {footer != null && <div className="oc-table-footer">{footer}</div>}
+      </div>
+    </section>
+  );
+});
+
+/** `.oc-table-toolbar-spacer`: pushes the following toolbar items to the right. */
+export function BlockDataTableSpacer() {
+  return <span className="oc-table-toolbar-spacer" />;
+}
+
+/** `.oc-filter-pills` group. */
+export function FilterPills({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-filter-pills", className)} role="group" {...rest} />;
+}
+
+/** `a.oc-filter-pill` (set `current` for the active filter). */
+export function FilterPill({ current, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & { current?: boolean }) {
+  return <a className={cx("oc-filter-pill", className)} aria-current={current ? "true" : undefined} {...rest} />;
+}

package/src/blocks/BlockFaq.tsx

@@ -0,0 +1,55 @@
+// File: packages/react/src/blocks/BlockFaq.tsx | Map: types -> BlockFaq (head -> accordion on details name -> more line)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface FaqItem {
+  question: ReactNode;
+  answer: ReactNode;
+}
+
+export interface BlockFaqProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  lead?: ReactNode;
+  items: FaqItem[];
+  /** Index of the item that starts open (default 0, -1 = none). */
+  openIndex?: number;
+  /** Closing line, e.g. "Still have questions?" + a link. */
+  more?: ReactNode;
+  /** Head left, questions right. */
+  split?: boolean;
+  /** Name of the details group (one open at a time). Generated when empty. */
+  name?: string;
+}
+
+/** `.oc-block-faq`: title + exclusive accordion on native <details name>. */
+export const BlockFaq = forwardRef<HTMLElement, BlockFaqProps>(function BlockFaq(
+  { eyebrow, title, lead, items, openIndex = 0, more, split = false, name, className, ...rest },
+  ref,
+) {
+  const auto = useId().replace(/[^\w-]/g, "");
+  const group = name ?? `oc-faq-${auto}`;
+  const titleId = `oc-faq-title-${auto}`;
+  return (
+    <section ref={ref} className={cx("oc-block-faq", split && "oc-block-faq--split", className)} aria-labelledby={titleId} {...rest}>
+      <div className="oc-block-faq-inner">
+        <div className="oc-block-faq-head">
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h2 className="oc-block-faq-title" id={titleId}>{title}</h2>
+          {lead != null && <p className="oc-block-faq-lead">{lead}</p>}
+        </div>
+        <div className="oc-accordion oc-block-faq-list">
+          {items.map((item, i) => (
+            // "name" groups the items; React 19 passes it through, older versions too (unknown attribute on details).
+            <details key={i} className="oc-accordion-item" {...{ name: group }} open={i === openIndex || undefined}>
+              <summary className="oc-accordion-trigger">{item.question}</summary>
+              <div className="oc-accordion-content">{item.answer}</div>
+            </details>
+          ))}
+        </div>
+        {more != null && <p className="oc-block-faq-more">{more}</p>}
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockFeatures.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface Feature {
+  /** Glyph, emoji or inline SVG. */
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+}
+
+export interface BlockFeaturesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  features: Feature[];
+}
+
+/** `.oc-block-features`: heading plus a grid of feature cards. */
+export const BlockFeatures = forwardRef<HTMLDivElement, BlockFeaturesProps>(function BlockFeatures(
+  { title, description, features, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-features", className)} {...rest}>
+      {title != null && <h2>{title}</h2>}
+      {description != null && <p>{description}</p>}
+      <div className="oc-block-features-grid">
+        {features.map((f, i) => (
+          <div className="oc-block-feature-card" key={i}>
+            {f.icon != null && <div className="oc-block-feature-icon">{f.icon}</div>}
+            <h3>{f.title}</h3>
+            {f.description != null && <p>{f.description}</p>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/blocks/BlockFooter.tsx

@@ -0,0 +1,50 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface FooterLink {
+  label: ReactNode;
+  href: string;
+}
+
+export interface FooterColumn {
+  title: ReactNode;
+  links: FooterLink[];
+}
+
+export interface BlockFooterProps extends HTMLAttributes<HTMLDivElement> {
+  columns: FooterColumn[];
+  /** Left text of the bottom bar. */
+  copyright?: ReactNode;
+  /** Right text of the bottom bar. */
+  credit?: ReactNode;
+}
+
+/** `.oc-block-footer`: multi-column site footer. */
+export const BlockFooter = forwardRef<HTMLDivElement, BlockFooterProps>(function BlockFooter(
+  { columns, copyright, credit, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-footer", className)} {...rest}>
+      <div className="oc-block-footer-grid">
+        {columns.map((col, i) => (
+          <div className="oc-block-footer-col" key={i}>
+            <h4>{col.title}</h4>
+            <ul>
+              {col.links.map((l, j) => (
+                <li key={j}><a href={l.href}>{l.label}</a></li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {(copyright != null || credit != null) && (
+        <div className="oc-block-footer-bottom">
+          <span>{copyright}</span>
+          <span>{credit}</span>
+        </div>
+      )}
+    </div>
+  );
+});