@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/components/PageHeader.tsx

@@ -0,0 +1,43 @@
+// File: packages/react/src/components/PageHeader.tsx
+// Map: PageHeader = header -> back row -> main (text: title, subtitle, meta | actions)
+// The header is a size container: the actions move next to the title from a 36rem header width.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** Meta row items (owner, updated, ...). */
+  meta?: ReactNode;
+  /** Back link, e.g. `<BackLink href="/projects">Projects</BackLink>`. */
+  back?: ReactNode;
+  actions?: ReactNode;
+  /** Heading level of the title (default 1). */
+  level?: 1 | 2 | 3;
+  bordered?: boolean;
+  sticky?: boolean;
+  size?: "sm";
+}
+
+/** `.oc-page-header`: title row of an app page. */
+export const PageHeader = forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(
+  { title, subtitle, meta, back, actions, level = 1, bordered, sticky, size, className, ...rest },
+  ref,
+) {
+  const Heading = `h${level}` as "h1";
+  const cls = cx("oc-page-header", bordered && "oc-page-header--bordered", sticky && "oc-page-header--sticky", size && `oc-page-header--${size}`, className);
+  return (
+    <header ref={ref} className={cls} {...rest}>
+      {back != null && <div className="oc-page-header-back">{back}</div>}
+      <div className="oc-page-header-main">
+        <div className="oc-page-header-text">
+          <Heading className="oc-page-header-title">{title}</Heading>
+          {subtitle != null && <p className="oc-page-header-subtitle">{subtitle}</p>}
+          {meta != null && <div className="oc-page-header-meta">{meta}</div>}
+        </div>
+        {actions != null && <div className="oc-page-header-actions">{actions}</div>}
+      </div>
+    </header>
+  );
+});

package/src/components/Pagination.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  /** Current page (1-based). */
+  page: number;
+  pageCount: number;
+  /** Called with the new page; when set, link navigation is prevented. */
+  onPageChange?: (page: number) => void;
+  /** Builds the href of a page (default `?page=n`). */
+  hrefFor?: (page: number) => string;
+}
+
+/** `<nav class="oc-pagination">` with numbered links and `aria-current="page"`. */
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
+  { page, pageCount, onPageChange, hrefFor = (n) => `?page=${n}`, className, "aria-label": ariaLabel = "Pagination", ...rest },
+  ref,
+) {
+  return (
+    <nav ref={ref} className={cx("oc-pagination", className)} aria-label={ariaLabel} {...rest}>
+      {Array.from({ length: pageCount }, (_, i) => i + 1).map((n) => (
+        <a
+          key={n}
+          className="oc-pagination-item"
+          href={hrefFor(n)}
+          aria-current={n === page ? "page" : undefined}
+          onClick={
+            onPageChange
+              ? (e) => {
+                  e.preventDefault();
+                  onPageChange(n);
+                }
+              : undefined
+          }
+        >
+          {n}
+        </a>
+      ))}
+    </nav>
+  );
+});

package/src/components/PasswordInput.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  showLabel?: string;
+  hideLabel?: string;
+  /** Accessible name of the toggle button. */
+  toggleLabel?: string;
+  error?: boolean;
+}
+
+/** Password field with a show / hide button (`aria-pressed`), inside `.oc-input-reveal`. */
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(function PasswordInput(
+  { showLabel = "Show", hideLabel = "Hide", toggleLabel = "Toggle password visibility", error, className, ...rest },
+  ref,
+) {
+  const [shown, setShown] = useState(false);
+  return (
+    <div className="oc-input-reveal">
+      <input
+        ref={ref}
+        className={cx("oc-input", error && "oc-input--error", className)}
+        type={shown ? "text" : "password"}
+        autoComplete="current-password"
+        aria-invalid={error ? true : undefined}
+        {...rest}
+      />
+      <button className="oc-input-reveal-button" type="button" aria-pressed={shown} aria-label={toggleLabel} onClick={() => setShown((s) => !s)}>
+        {shown ? hideLabel : showLabel}
+      </button>
+    </div>
+  );
+});

package/src/components/PasswordRequirements.tsx

@@ -0,0 +1,46 @@
+// File: packages/react/src/components/PasswordRequirements.tsx
+// Map: rule type + default rules -> component (live list, --met per rule)
+// Same markup as packages/ui/snippets/password-requirements.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface PasswordRule {
+  label: ReactNode;
+  /** True when the password meets the rule. */
+  test: (password: string) => boolean;
+}
+
+/** Common rules: length, uppercase, number, symbol. Pass your own list to change them. */
+export const defaultPasswordRules: PasswordRule[] = [
+  { label: "At least 8 characters", test: (p) => p.length >= 8 },
+  { label: "One uppercase letter", test: (p) => /[A-Z]/.test(p) },
+  { label: "One number", test: (p) => /[0-9]/.test(p) },
+  { label: "One symbol", test: (p) => /[^A-Za-z0-9]/.test(p) },
+];
+
+export interface PasswordRequirementsProps extends HTMLAttributes<HTMLUListElement> {
+  password: string;
+  rules?: PasswordRule[];
+  /** Rules side by side. */
+  inline?: boolean;
+  /** Render nothing until the user types. */
+  hideWhenEmpty?: boolean;
+}
+
+/** `.oc-password-requirements`: each rule turns green (--met) as soon as it passes. */
+export const PasswordRequirements = forwardRef<HTMLUListElement, PasswordRequirementsProps>(function PasswordRequirements(
+  { password, rules = defaultPasswordRules, inline, hideWhenEmpty, className, ...rest },
+  ref,
+) {
+  if (hideWhenEmpty && !password) return null;
+  return (
+    <ul ref={ref} className={cx("oc-password-requirements", inline && "oc-password-requirements--inline", className)} aria-live="polite" {...rest}>
+      {rules.map((rule, i) => (
+        <li key={i} className={cx("oc-password-requirement", rule.test(password) && "oc-password-requirement--met")}>
+          {rule.label}
+        </li>
+      ))}
+    </ul>
+  );
+});

package/src/components/PhoneInput.tsx

@@ -0,0 +1,93 @@
+// File: packages/react/src/components/PhoneInput.tsx
+// Map: types -> helpers (split value, group digits) -> component (dial select + tel input)
+// Same markup as packages/ui/snippets/phone-input.html. The only JS: digit grouping and joining dial + number.
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface PhoneCountry {
+  /** Dial code with plus sign, e.g. "+32". */
+  dial: string;
+  /** Text in the select, e.g. "BE +32". */
+  label: string;
+}
+
+export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> {
+  /** Full value without spaces, e.g. "+32470123456" (empty string = no number). */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  countries?: PhoneCountry[];
+  /** Dial code used while the value is empty. */
+  defaultDial?: string;
+  size?: "sm" | "md";
+  error?: boolean;
+  /** Accessible name of the dial code select. */
+  dialLabel?: string;
+}
+
+const DEFAULT_COUNTRIES: PhoneCountry[] = [
+  { dial: "+32", label: "BE +32" },
+  { dial: "+31", label: "NL +31" },
+  { dial: "+33", label: "FR +33" },
+  { dial: "+49", label: "DE +49" },
+];
+
+/** "470123456" -> "470 12 34 56": a group of 3, then pairs (readable for most European numbers). */
+export function formatPhoneNational(digits: string): string {
+  const clean = digits.replace(/\D/g, "");
+  const head = clean.slice(0, 3);
+  const pairs = clean.slice(3).match(/.{1,2}/g) ?? [];
+  return [head, ...pairs].filter(Boolean).join(" ");
+}
+
+/** Split "+32470..." into the known dial code (longest match) and the national digits. */
+function splitPhone(full: string, countries: PhoneCountry[]) {
+  const match = [...countries].sort((a, b) => b.dial.length - a.dial.length).find((c) => full.startsWith(c.dial));
+  return match ? { dial: match.dial, national: full.slice(match.dial.length) } : { dial: "", national: full.replace(/^\+/, "") };
+}
+
+/** `.oc-phone-input`: country dial code + national number. Emits one value: dial + digits. */
+export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(
+  { value, defaultValue, onChange, countries = DEFAULT_COUNTRIES, defaultDial, size = "md", error, dialLabel = "Country code", className, disabled, ...rest },
+  ref,
+) {
+  const [full, setFull] = useControllable<string>(value, defaultValue ?? "", onChange);
+  const parsed = splitPhone(full, countries);
+  // Remember the chosen dial code, also while the number is still empty.
+  const [dialState, setDialState] = useState(parsed.dial || defaultDial || countries[0]?.dial || "");
+  const dial = parsed.dial || dialState;
+
+  const emit = (nextDial: string, national: string) => {
+    setDialState(nextDial);
+    const digits = national.replace(/\D/g, "");
+    setFull(digits ? nextDial + digits : "");
+  };
+
+  return (
+    <div className={cx("oc-phone-input", size === "sm" && "oc-phone-input--sm", error && "oc-phone-input--error", className)}>
+      <select className="oc-phone-input-dial" aria-label={dialLabel} value={dial} disabled={disabled} onChange={(e) => emit(e.target.value, parsed.national)}>
+        {countries.map((c) => (
+          <option key={c.dial} value={c.dial}>
+            {c.label}
+          </option>
+        ))}
+      </select>
+      <input
+        ref={ref}
+        className="oc-phone-input-number"
+        type="tel"
+        inputMode="tel"
+        autoComplete="tel-national"
+        aria-invalid={error ? true : undefined}
+        disabled={disabled}
+        value={formatPhoneNational(parsed.national)}
+        onChange={(e) => emit(dial, e.target.value)}
+        {...rest}
+      />
+    </div>
+  );
+});

package/src/components/Popover.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { Button } from "./Button";
+import type { ButtonProps } from "./Button";
+
+export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Content of the trigger button. */
+  trigger: ReactNode;
+  triggerProps?: ButtonProps;
+  size?: "sm" | "md" | "lg";
+  title?: ReactNode;
+  /** Short body text (`oc-popover-text`). */
+  text?: ReactNode;
+}
+
+/** Trigger + `<div class="oc-popover" popover>` floating panel. */
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(
+  { trigger, triggerProps, size = "md", title, text, className, id, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const panelId = id ?? `oc-popover-${auto.replace(/:/g, "")}`;
+  return (
+    <>
+      <Button variant="outline" type="button" {...triggerProps} {...attrs({ popovertarget: panelId })}>{trigger}</Button>
+      <div ref={ref} className={cx("oc-popover", size !== "md" && `oc-popover--${size}`, className)} id={panelId} {...attrs({ popover: "" })} {...rest}>
+        {title != null && <h3 className="oc-popover-title">{title}</h3>}
+        {text != null && <p className="oc-popover-text">{text}</p>}
+        {children}
+      </div>
+    </>
+  );
+});

package/src/components/PriceCard.tsx

@@ -0,0 +1,83 @@
+// File: packages/react/src/components/PriceCard.tsx | Map: types -> PriceCard (head -> toggle (radios) -> prices -> features -> cta)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface PriceCardFeature {
+  label: ReactNode;
+  /** Shown with a cross and muted text. */
+  excluded?: boolean;
+}
+
+export interface PriceCardPrice {
+  amount: ReactNode;
+  period?: ReactNode;
+  /** Old price (struck through). */
+  was?: ReactNode;
+  note?: ReactNode;
+}
+
+export interface PriceCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  name: ReactNode;
+  description?: ReactNode;
+  /** Badge such as "Save 20%". */
+  discount?: ReactNode;
+  monthly: PriceCardPrice;
+  /** Without a yearly price the toggle is not rendered. */
+  yearly?: PriceCardPrice;
+  /** Period that is selected first (uncontrolled radio). */
+  defaultPeriod?: "monthly" | "yearly";
+  features?: PriceCardFeature[];
+  /** Call to action, e.g. <a className="oc-btn oc-price-card__cta">. */
+  cta?: ReactNode;
+  featured?: boolean;
+  /** Labels of the toggle. */
+  monthlyLabel?: ReactNode;
+  yearlyLabel?: ReactNode;
+}
+
+function Price({ kind, price }: { kind: "monthly" | "yearly"; price: PriceCardPrice }) {
+  return (
+    <p className={`oc-price-card__price oc-price-card__price--${kind}`}>
+      <span className="oc-price-card__amount">{price.amount}</span>
+      {price.period != null && <span className="oc-price-card__period">{price.period}</span>}
+      {price.was != null && <s className="oc-price-card__was">{price.was}</s>}
+      {price.note != null && <span className="oc-price-card__note">{price.note}</span>}
+    </p>
+  );
+}
+
+/** `<article class="oc-price-card">`: plan card with a CSS-only monthly / yearly switch. */
+export const PriceCard = forwardRef<HTMLElement, PriceCardProps>(function PriceCard(
+  { name, description, discount, monthly, yearly, defaultPeriod = "monthly", features = [], cta, featured = false,
+    monthlyLabel = "Monthly", yearlyLabel = "Yearly", className, ...rest },
+  ref,
+) {
+  // Every card needs its own radio group name.
+  const group = `oc-price-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <article ref={ref} className={cx("oc-price-card", featured && "oc-price-card--featured", className)} {...rest}>
+      <div className="oc-price-card__head">
+        <h3 className="oc-price-card__name">{name}</h3>
+        {discount != null && <span className="oc-price-card__discount">{discount}</span>}
+      </div>
+      {description != null && <p className="oc-price-card__desc">{description}</p>}
+      {yearly && (
+        <div className="oc-segmented oc-price-card__toggle" role="radiogroup" aria-label="Billing period">
+          <label className="oc-segmented-item"><input type="radio" name={group} value="monthly" defaultChecked={defaultPeriod === "monthly"} /> {monthlyLabel}</label>
+          <label className="oc-segmented-item"><input type="radio" name={group} value="yearly" defaultChecked={defaultPeriod === "yearly"} /> {yearlyLabel}</label>
+        </div>
+      )}
+      <Price kind="monthly" price={monthly} />
+      {yearly && <Price kind="yearly" price={yearly} />}
+      {features.length > 0 && (
+        <ul className="oc-price-card__features">
+          {features.map((f, i) => (
+            <li key={i} className={cx("oc-price-card__feature", f.excluded && "oc-price-card__feature--excluded")}>{f.label}</li>
+          ))}
+        </ul>
+      )}
+      {cta}
+    </article>
+  );
+});

package/src/components/ProductMark.tsx

@@ -0,0 +1,35 @@
+// File: packages/react/src/components/ProductMark.tsx | Map: types -> ProductMark (span.oc-product-mark + modifiers)
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type ProductMarkSize = "sm" | "default" | "lg" | "xl";
+export type ProductMarkAccent = "blue" | "cyan" | "green" | "orange" | "red" | "violet" | "yellow";
+
+export interface ProductMarkProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: ProductMarkSize;
+  /** Accent preset (adds .oc-accent--{accent}). */
+  accent?: ProductMarkAccent;
+  /** Tinted background with an accent glyph. */
+  soft?: boolean;
+  glow?: boolean;
+  /** Full-bleed image inside. */
+  cover?: boolean;
+}
+
+/** `<span class="oc-product-mark">`: squircle app-icon tile. Decorative by default (aria-hidden). */
+export const ProductMark = forwardRef<HTMLSpanElement, ProductMarkProps>(function ProductMark(
+  { size = "default", accent, soft = false, glow = false, cover = false, className, ...rest },
+  ref,
+) {
+  const classes = cx(
+    "oc-product-mark",
+    size !== "default" && `oc-product-mark--${size}`,
+    soft && "oc-product-mark--soft",
+    glow && "oc-product-mark--glow",
+    cover && "oc-product-mark--cover",
+    accent && `oc-accent--${accent}`,
+    className,
+  );
+  return <span ref={ref} className={classes} aria-hidden="true" {...rest} />;
+});

package/src/components/Progress.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  /** Maximum (default 100). */
+  max?: number;
+  /** Bar color. */
+  variant?: "default" | "success" | "warning" | "danger";
+}
+
+/** `<div class="oc-progress" role="progressbar">` with an `oc-progress-bar` sized in percent. */
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
+  { value, max = 100, variant = "default", className, ...rest },
+  ref,
+) {
+  const pct = max > 0 ? Math.min(100, Math.max(0, Math.round((value / max) * 100))) : 0;
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-progress", className)}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      {...rest}
+    >
+      <div className={cx("oc-progress-bar", variant !== "default" && `oc-progress-bar--${variant}`)} style={{ width: `${pct}%` }} />
+    </div>
+  );
+});

package/src/components/ProjectCard.tsx

@@ -0,0 +1,46 @@
+// File: packages/react/src/components/ProjectCard.tsx | Map: props -> ProjectCard (a -> frame (bar + shot) -> body)
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+// The native anchor "type" (MIME hint) is replaced by the badge text prop below.
+export interface ProjectCardProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
+  name: ReactNode;
+  /** Badge text ("Website"). */
+  type?: ReactNode;
+  /** Sector / location line. */
+  meta?: ReactNode;
+  /** Text of the arrow link (default "View project"). */
+  more?: ReactNode;
+  /** Screenshot URL; without it the preview is an accent gradient. */
+  image?: string;
+  /** Accessible description of the screenshot. */
+  imageAlt?: string;
+  /** Edge-to-edge preview. */
+  flat?: boolean;
+}
+
+/** `<a class="oc-project-card">`: portfolio card with a browser-like preview. */
+export const ProjectCard = forwardRef<HTMLAnchorElement, ProjectCardProps>(function ProjectCard(
+  { name, type, meta, more = "View project", image, imageAlt = "", flat = false, className, ...rest },
+  ref,
+) {
+  return (
+    <a ref={ref} className={cx("oc-project-card", flat && "oc-project-card--flat", className)} {...rest}>
+      <span className="oc-project-card__frame">
+        <span className="oc-project-card__bar" aria-hidden="true"><i /><i /><i /></span>
+        {image ? (
+          <img className="oc-project-card__shot" src={image} alt={imageAlt} loading="lazy" />
+        ) : (
+          <span className="oc-project-card__shot" role="img" aria-label={imageAlt || undefined} aria-hidden={imageAlt ? undefined : true} />
+        )}
+      </span>
+      <span className="oc-project-card__body">
+        {type != null && <span className="oc-project-card__type">{type}</span>}
+        <span className="oc-project-card__name">{name}</span>
+        {meta != null && <span className="oc-project-card__meta">{meta}</span>}
+        {more != null && <span className="oc-project-card__more">{more}</span>}
+      </span>
+    </a>
+  );
+});

package/src/components/Prose.tsx

@@ -0,0 +1,79 @@
+// File: packages/react/src/components/Prose.tsx
+// Map: types -> demo article (same text as the snippet) -> Prose (wrapper with size modifiers) -> ProseLead
+// Same markup as packages/ui/snippets/prose.html. Put plain HTML (h1-h4, p, lists, blockquote, table, figure, pre) inside.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+  /** All spacing scales along. */
+  size?: "sm" | "md" | "lg";
+  /** No max width (default 68ch). */
+  full?: boolean;
+  as?: "article" | "div" | "section";
+  /** The text; the snippet's demo article when empty. */
+  children?: ReactNode;
+}
+
+/** `p.oc-prose-lead`: larger intro paragraph. */
+export function ProseLead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("oc-prose-lead", className)} {...rest} />;
+}
+
+const DEMO = (
+  <>
+    <h1>Planning a kitchen renovation</h1>
+    <ProseLead>A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</ProseLead>
+    <h2>Before the first visit</h2>
+    <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
+    <ul>
+      <li>The <strong>budget range</strong> you have in mind, including appliances</li>
+      <li>Which walls, doors and windows can move, and which cannot
+        <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
+      </li>
+      <li>Appliances you want to keep</li>
+    </ul>
+    <figure>
+      <div className="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop" />
+      <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+    </figure>
+    <h3>From design to installation</h3>
+    <ol>
+      <li>Site visit and measurements (week 1)</li>
+      <li>Design and quote, with two revision rounds (weeks 2–3)</li>
+      <li>Order and production of the cabinets (weeks 4–9)</li>
+      <li>Installation, worktop and finishing (weeks 10–11)</li>
+    </ol>
+    <blockquote>
+      <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
+      <footer>— Ann Dewitte, client in Ghent</footer>
+    </blockquote>
+    <h2>Worktop materials compared</h2>
+    <table>
+      <caption>Prices per running metre, 60 cm deep, installed.</caption>
+      <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
+      <tbody>
+        <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
+        <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
+        <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
+      </tbody>
+    </table>
+    <h3>Sharing your floor plan</h3>
+    <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
+    <pre><code>{"Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)"}</code></pre>
+    <hr />
+    <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
+  </>
+);
+
+/** `.oc-prose`: typography for long-form text written without classes. */
+export const Prose = forwardRef<HTMLElement, ProseProps>(function Prose(
+  { size = "md", full, as: Tag = "article", className, children, ...rest },
+  ref,
+) {
+  return (
+    <Tag ref={ref as React.Ref<HTMLElement & HTMLDivElement>} className={cx("oc-prose", size !== "md" && `oc-prose--${size}`, full && "oc-prose--full", className)} {...rest}>
+      {children ?? DEMO}
+    </Tag>
+  );
+});

package/src/components/RecoveryCodes.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface RecoveryCodesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
+  codes: string[];
+  title?: ReactNode;
+  warning?: ReactNode;
+  copyLabel?: string;
+  downloadLabel?: string;
+  /** File name of the download (default `recovery-codes.txt`). */
+  fileName?: string;
+  onCopy?: (codes: string[]) => void;
+  onDownload?: (codes: string[]) => void;
+}
+
+/** `.oc-recovery-codes`: warning panel with a code grid, "Copy all" and "Download .txt". */
+export const RecoveryCodes = forwardRef<HTMLDivElement, RecoveryCodesProps>(function RecoveryCodes(
+  {
+    codes,
+    title = "Recovery codes",
+    warning = "Store these codes somewhere safe. Each code works once.",
+    copyLabel = "Copy all",
+    downloadLabel = "Download .txt",
+    fileName = "recovery-codes.txt",
+    onCopy,
+    onDownload,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(codes.join("\n"));
+      onCopy?.(codes);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+  const download = () => {
+    const url = URL.createObjectURL(new Blob([codes.join("\n") + "\n"], { type: "text/plain" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    URL.revokeObjectURL(url);
+    onDownload?.(codes);
+  };
+  return (
+    <div ref={ref} className={cx("oc-recovery-codes", className)} {...rest}>
+      <h3 className="oc-recovery-codes-title">{title}</h3>
+      <p className="oc-recovery-codes-warning">{warning}</p>
+      <ul className="oc-recovery-codes-list">
+        {codes.map((code) => <li key={code}>{code}</li>)}
+      </ul>
+      <div className="oc-recovery-codes-actions">
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" onClick={copy}>{copyLabel}</button>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" onClick={download}>{downloadLabel}</button>
+      </div>
+    </div>
+  );
+});