@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/blocks/BlockSiteFooter.tsx

@@ -0,0 +1,60 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import type { FooterLink } from "./BlockFooter";
+
+export interface SiteFooterColumn {
+  title: ReactNode;
+  /** Link list column. */
+  links?: FooterLink[];
+  /** Address column: children are rendered in an `<address class="oc-site-footer__list">`. */
+  address?: ReactNode;
+}
+
+export interface BlockSiteFooterProps extends Omit<HTMLAttributes<HTMLElement>, "about"> {
+  /** Brand link content, e.g. icon tile + name (rendered in `oc-site-header__brand`). */
+  brand: ReactNode;
+  brandHref?: string;
+  about?: ReactNode;
+  columns: SiteFooterColumn[];
+  copyright?: ReactNode;
+  credit?: ReactNode;
+}
+
+/** `.oc-site-footer`: brand column, link columns and a bottom bar. */
+export const BlockSiteFooter = forwardRef<HTMLElement, BlockSiteFooterProps>(function BlockSiteFooter(
+  { brand, brandHref = "/", about, columns, copyright, credit, className, ...rest },
+  ref,
+) {
+  return (
+    <footer ref={ref} className={cx("oc-site-footer", className)} {...rest}>
+      <div className="oc-container">
+        <div className="oc-site-footer__grid">
+          <div className="oc-site-footer__about">
+            <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
+            {about != null && <p>{about}</p>}
+          </div>
+          {columns.map((col, i) => (
+            <div key={i}>
+              <h2 className="oc-site-footer__title">{col.title}</h2>
+              {col.links && (
+                <ul className="oc-site-footer__list">
+                  {col.links.map((l, j) => (
+                    <li key={j}><a href={l.href}>{l.label}</a></li>
+                  ))}
+                </ul>
+              )}
+              {col.address != null && <address className="oc-site-footer__list">{col.address}</address>}
+            </div>
+          ))}
+        </div>
+        {(copyright != null || credit != null) && (
+          <div className="oc-site-footer__bottom">
+            <span>{copyright}</span>
+            <span>{credit}</span>
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+});

package/src/blocks/BlockSiteHeader.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface SiteHeaderLink {
+  label: ReactNode;
+  href: string;
+  current?: boolean;
+}
+
+export interface BlockSiteHeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Brand link content, e.g. icon tile + name. */
+  brand: ReactNode;
+  brandHref?: string;
+  links: SiteHeaderLink[];
+  /** Trailing call to action inside the nav (e.g. a `ButtonLink` with `variant="gradient"`). */
+  cta?: ReactNode;
+  /** Accessible name of the mobile menu button. */
+  menuLabel?: string;
+}
+
+/** `.oc-site-header`: sticky header, mobile menu on a native popover (no JavaScript). */
+export const BlockSiteHeader = forwardRef<HTMLElement, BlockSiteHeaderProps>(function BlockSiteHeader(
+  { brand, brandHref = "/", links, cta, menuLabel = "Menu", className, ...rest },
+  ref,
+) {
+  const navId = `oc-site-nav-${useId().replace(/:/g, "")}`;
+  return (
+    <header ref={ref} className={cx("oc-site-header", className)} {...rest}>
+      <div className="oc-container oc-site-header__inner">
+        <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
+        <button className="oc-site-header__toggle" type="button" aria-label={menuLabel} {...attrs({ popovertarget: navId })}>&#9776;</button>
+        <nav className="oc-site-header__nav" id={navId} aria-label="Main" {...attrs({ popover: "" })}>
+          {links.map((l, i) => (
+            <a key={i} href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a>
+          ))}
+          {cta}
+        </nav>
+      </div>
+    </header>
+  );
+});

package/src/blocks/BlockSpotlight.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface SpotlightModule {
+  icon?: ReactNode;
+  label: ReactNode;
+}
+
+export interface BlockSpotlightProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Accent name (`green`, `violet`...), applied as `oc-accent--{accent}`. */
+  accent?: string;
+  /** Pill text (with a status dot). */
+  badge?: ReactNode;
+  /** Glyph or SVG in the big icon tile. */
+  icon?: ReactNode;
+  title: ReactNode;
+  tagline?: ReactNode;
+  lead?: ReactNode;
+  /** Call to action (e.g. a `ButtonLink` with `variant="gradient" size="lg"`). */
+  action?: ReactNode;
+  modules?: SpotlightModule[];
+}
+
+/** `.oc-spotlight`: highlighted flagship product with a module list. */
+export const BlockSpotlight = forwardRef<HTMLElement, BlockSpotlightProps>(function BlockSpotlight(
+  { accent, badge, icon, title, tagline, lead, action, modules, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        <div className={cx("oc-spotlight", accent && `oc-accent--${accent}`)}>
+          <div>
+            {badge != null && <span className="oc-pill oc-pill--accent"><span className="oc-status-dot" />{badge}</span>}
+            <h2 className="oc-spotlight__title">
+              {icon != null && <span className="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">{icon}</span>}
+              {title}
+            </h2>
+            {tagline != null && <p className="oc-spotlight__tagline">{tagline}</p>}
+            {lead != null && <p className="oc-lead">{lead}</p>}
+            {action}
+          </div>
+          {modules && (
+            <ul className="oc-spotlight__modules">
+              {modules.map((m, i) => (
+                <li key={i}>
+                  {m.icon != null && <span className="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">{m.icon}</span>}
+                  {m.label}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockStats.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface Stat {
+  value: ReactNode;
+  label: ReactNode;
+}
+
+export interface BlockStatsProps extends HTMLAttributes<HTMLDivElement> {
+  stats: Stat[];
+}
+
+/** `.oc-block-stats`: key figures row. */
+export const BlockStats = forwardRef<HTMLDivElement, BlockStatsProps>(function BlockStats({ stats, className, ...rest }, ref) {
+  return (
+    <div ref={ref} className={cx("oc-block-stats", className)} {...rest}>
+      {stats.map((s, i) => (
+        <div className="oc-block-stat" key={i}>
+          <div className="oc-block-stat-value">{s.value}</div>
+          <div className="oc-block-stat-label">{s.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/blocks/BlockStatsCounter.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Counter } from "../components/Counter";
+
+export interface CounterStat {
+  to: number;
+  suffix?: string;
+  label: ReactNode;
+}
+
+export interface BlockStatsCounterProps extends HTMLAttributes<HTMLDivElement> {
+  stats: CounterStat[];
+}
+
+/** `.oc-block-stats` whose values count up when scrolled into view (CSS only). */
+export const BlockStatsCounter = forwardRef<HTMLDivElement, BlockStatsCounterProps>(function BlockStatsCounter(
+  { stats, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-stats", className)} {...rest}>
+      {stats.map((s, i) => (
+        <div className="oc-block-stat" key={i}>
+          <Counter className="oc-block-stat-value" to={s.to} suffix={s.suffix} />
+          <span className="oc-block-stat-label">{s.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/blocks/BlockTeamList.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Badge } from "../components/Badge";
+import type { BadgeVariant } from "../components/Badge";
+import { Dropdown } from "../components/Dropdown";
+import { User } from "../components/User";
+
+export interface TeamMember {
+  name: ReactNode;
+  email?: ReactNode;
+  initials?: string;
+  avatarSrc?: string;
+  /** Role / status badge text. */
+  role?: ReactNode;
+  roleVariant?: BadgeVariant;
+  /** Row action menu content (`DropdownItem`s). Adds a "..." trigger when set. */
+  menu?: ReactNode;
+  menuLabel?: string;
+}
+
+export interface BlockTeamListProps extends HTMLAttributes<HTMLDivElement> {
+  members: TeamMember[];
+}
+
+/** `.oc-block-team`: member rows with avatar, role badge and a row action menu. */
+export const BlockTeamList = forwardRef<HTMLDivElement, BlockTeamListProps>(function BlockTeamList(
+  { members, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-team", className)} {...rest}>
+      {members.map((m, i) => (
+        <div className="oc-block-team-row" key={i}>
+          <User name={m.name} email={m.email} initials={m.initials} avatarSrc={m.avatarSrc} />
+          <div className="oc-block-team-meta">
+            {m.role != null && <Badge variant={m.roleVariant}>{m.role}</Badge>}
+            {m.menu != null && (
+              <Dropdown trigger={<>&hellip;</>} triggerProps={{ variant: "ghost", icon: true, size: "sm", type: "button", "aria-label": m.menuLabel ?? "Member actions" }}>
+                {m.menu}
+              </Dropdown>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/blocks/BlockTwoFactor.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { forwardRef, useId, useState } from "react";
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { CopyField } from "../components/CopyField";
+import { Heading } from "../components/Heading";
+import { OtpInput } from "../components/OtpInput";
+import { RecoveryCodes } from "../components/RecoveryCodes";
+
+export interface BlockTwoFactorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+  /** QR code image / svg; a labelled placeholder box is rendered when omitted. */
+  qr?: ReactNode;
+  setupKey: string;
+  recoveryCodes?: string[];
+  codeLength?: number;
+  /** Called with the entered code when the form is submitted. */
+  onSubmit?: (code: string) => void;
+  submitLabel?: ReactNode;
+}
+
+/** `.oc-block-twofactor`: authenticator setup with QR, copyable key, OTP input and recovery codes. */
+export const BlockTwoFactor = forwardRef<HTMLDivElement, BlockTwoFactorProps>(function BlockTwoFactor(
+  { qr, setupKey, recoveryCodes, codeLength = 6, onSubmit, submitLabel = "Enable two-factor", className, ...rest },
+  ref,
+) {
+  const id = `oc-twofactor-${useId().replace(/:/g, "")}`;
+  const [code, setCode] = useState("");
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    onSubmit?.(code);
+  };
+  return (
+    <div ref={ref} className={cx("oc-block-twofactor", className)} {...rest}>
+      <section className="oc-block-twofactor-step">
+        <Heading size="sm" title="1. Scan the QR code" description="Use an authenticator app, or enter the key manually." />
+        <div className="oc-block-twofactor-center">
+          {qr ?? <div className="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div>}
+          <CopyField value={setupKey} label="Setup key" />
+        </div>
+      </section>
+      <form className="oc-block-twofactor-step" onSubmit={submit}>
+        <Heading size="sm" title="2. Confirm with a code" />
+        <div className="oc-field">
+          <label className="oc-field-label" htmlFor={id}>Authentication code</label>
+          <OtpInput id={id} name="code" length={codeLength} value={code} onChange={setCode} />
+        </div>
+        <button className="oc-btn" type="submit">{submitLabel}</button>
+      </form>
+      {recoveryCodes && (
+        <section className="oc-block-twofactor-step">
+          <RecoveryCodes codes={recoveryCodes} />
+        </section>
+      )}
+    </div>
+  );
+});

package/src/blocks/BlockWizardDialog.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { DialogContext, useControllable, useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+import { Stepper } from "../components/Stepper";
+
+export interface WizardStep {
+  label: ReactNode;
+  /** Step content (only the active step is rendered). */
+  content: ReactNode;
+}
+
+export interface BlockWizardDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "onClose" | "title">, DialogState {
+  steps: WizardStep[];
+  /** Active step (0-based, controlled). */
+  step?: number;
+  defaultStep?: number;
+  onStepChange?: (step: number) => void;
+  /** Called when "Finish" is pressed on the last step. */
+  onFinish?: () => void;
+  backLabel?: ReactNode;
+  nextLabel?: ReactNode;
+  finishLabel?: ReactNode;
+  /** Text under the title; defaults to `Step {n} of {total}`. */
+  description?: ReactNode;
+  stepperLabel?: string;
+}
+
+/** `dialog.oc-modal` wizard: stepper rail on the left, step content and Back / Next footer. */
+export const BlockWizardDialog = forwardRef<HTMLDialogElement, BlockWizardDialogProps>(function BlockWizardDialog(
+  {
+    open,
+    defaultOpen,
+    onOpenChange,
+    steps,
+    step,
+    defaultStep = 0,
+    onStepChange,
+    onFinish,
+    backLabel = "Back",
+    nextLabel = "Next",
+    finishLabel = "Finish",
+    description,
+    stepperLabel = "Setup steps",
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const titleId = `oc-wizard-${useId().replace(/:/g, "")}-title`;
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  const [current, setCurrent] = useControllable<number>(step, defaultStep, onStepChange);
+  const last = current >= steps.length - 1;
+  const active = steps[current];
+
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-modal", className)}
+      aria-labelledby={titleId}
+      {...attrs({ closedby: "closerequest" })}
+      {...rest}
+      onClose={dlg.onClose}
+    >
+      <DialogContext.Provider value={{ close: dlg.close }}>
+        <div className="oc-modal-content oc-modal-content--xl">
+          <div className="oc-block-wizard">
+            <div className="oc-block-wizard-rail">
+              <Stepper steps={steps.map((s) => ({ label: s.label }))} current={current} onStepChange={setCurrent} aria-label={stepperLabel} />
+            </div>
+            <div className="oc-block-wizard-main">
+              <div className="oc-modal-header">
+                <h2 className="oc-modal-title" id={titleId}>{active?.label}</h2>
+                <p className="oc-modal-description">{description ?? `Step ${current + 1} of ${steps.length}`}</p>
+              </div>
+              <div className="oc-block-wizard-step">{active?.content}</div>
+              <div className="oc-modal-footer">
+                <button className="oc-btn oc-btn--outline" type="button" disabled={current === 0} onClick={() => setCurrent(current - 1)}>{backLabel}</button>
+                <button
+                  className="oc-btn"
+                  type="button"
+                  onClick={() => {
+                    if (last) onFinish?.();
+                    else setCurrent(current + 1);
+                  }}
+                >
+                  {last ? finishLabel : nextLabel}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </DialogContext.Provider>
+    </dialog>
+  );
+});

package/src/components/Accordion.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import type { DetailsHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+/** `<div class="oc-accordion">` */
+export const Accordion = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function Accordion(
+  { className, ...rest },
+  ref,
+) {
+  return <div ref={ref} className={cx("oc-accordion", className)} {...rest} />;
+});
+
+export interface AccordionItemProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+  /** Trigger text (`summary.oc-accordion-trigger`). */
+  title: ReactNode;
+  /** Items with the same `name` open one at a time (native exclusive details). */
+  name?: string;
+}
+
+/** `<details class="oc-accordion-item" name>` */
+export const AccordionItem = forwardRef<HTMLDetailsElement, AccordionItemProps>(function AccordionItem(
+  { title, className, children, ...rest },
+  ref,
+) {
+  return (
+    <details ref={ref} className={cx("oc-accordion-item", className)} {...(rest as object)}>
+      <summary className="oc-accordion-trigger">{title}</summary>
+      <div className="oc-accordion-content">{children}</div>
+    </details>
+  );
+});

package/src/components/AccordionAccent.tsx

@@ -0,0 +1,39 @@
+// File: packages/react/src/components/AccordionAccent.tsx
+// Map: AccordionAccent = div.oc-accordion.oc-accordion--accent (+ color) -> AccordionItem children
+// Use the existing <AccordionItem> inside. Color an item with className "oc-accent--violet"
+// or "oc-accordion-item--warning". AccordionAccentMeta is the small label at the end of a title.
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type AccordionAccentPreset = "blue" | "cyan" | "green" | "orange" | "red" | "violet" | "yellow";
+export type AccordionAccentTone = "success" | "warning" | "danger";
+
+export interface AccordionAccentProps extends HTMLAttributes<HTMLDivElement> {
+  /** Color preset for all items (an `.oc-accent--*` class). */
+  accent?: AccordionAccentPreset;
+  /** Semantic color for all items. */
+  tone?: AccordionAccentTone;
+  /** Only the accent edge, no card frame. */
+  flush?: boolean;
+}
+
+/** `.oc-accordion--accent`: accordion with separate cards and a colored start edge. */
+export const AccordionAccent = forwardRef<HTMLDivElement, AccordionAccentProps>(function AccordionAccent(
+  { accent, tone, flush, className, ...rest },
+  ref,
+) {
+  const cls = cx(
+    "oc-accordion oc-accordion--accent",
+    flush && "oc-accordion--flush",
+    accent && `oc-accent--${accent}`,
+    tone && `oc-accordion--${tone}`,
+    className,
+  );
+  return <div ref={ref} className={cls} {...rest} />;
+});
+
+/** `.oc-accordion-accent-meta`: short accent-colored label inside an item title. */
+export function AccordionAccentMeta({ className, ...rest }: HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cx("oc-accordion-accent-meta", className)} {...rest} />;
+}

package/src/components/AffixInput.tsx

@@ -0,0 +1,47 @@
+// File: packages/react/src/components/AffixInput.tsx
+// Map: variant presets (currency / percent / email) -> component (input group --affix with inline symbol)
+// Same markup as packages/ui/snippets/affix-input.html. No state: a plain input with a symbol inside the frame.
+import { forwardRef } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type AffixInputVariant = "currency" | "percent" | "email";
+
+export interface AffixInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /** Preset: symbol, input type, inputmode and alignment. */
+  variant?: AffixInputVariant;
+  /** Symbol before the value (overrides the preset). */
+  prefix?: ReactNode;
+  /** Symbol after the value (overrides the preset). */
+  suffix?: ReactNode;
+  /** Right-aligned tabular digits. Off by default: the value sits next to the symbol column. */
+  alignEnd?: boolean;
+  error?: boolean;
+  /** Class for the wrapper (`className` goes to the input). */
+  groupClassName?: string;
+}
+
+// Preset per variant. Email uses type="email" so :user-invalid checks the address.
+const PRESETS: Record<AffixInputVariant, { prefix?: string; suffix?: string; end: boolean; input: InputHTMLAttributes<HTMLInputElement> }> = {
+  currency: { prefix: "\u20AC", end: false, input: { type: "text", inputMode: "decimal" } },
+  percent: { prefix: "%", end: false, input: { type: "text", inputMode: "decimal" } },
+  email: { prefix: "@", end: false, input: { type: "email", autoComplete: "email" } },
+};
+
+/** `.oc-input-group.oc-input-group--affix`: symbol (€, %, @) inside the field. */
+export const AffixInput = forwardRef<HTMLInputElement, AffixInputProps>(function AffixInput(
+  { variant, prefix, suffix, alignEnd, error, groupClassName, className, ...rest },
+  ref,
+) {
+  const preset = variant ? PRESETS[variant] : undefined;
+  const before = prefix ?? preset?.prefix;
+  const after = suffix ?? preset?.suffix;
+  const end = alignEnd ?? preset?.end ?? false;
+  return (
+    <div className={cx("oc-input-group", "oc-input-group--affix", end && "oc-input-group--end", error && "oc-input-group--error", groupClassName)}>
+      {before != null && <span className="oc-input-addon" aria-hidden="true">{before}</span>}
+      <input ref={ref} className={cx("oc-input", className)} aria-invalid={error ? true : undefined} {...preset?.input} {...rest} />
+      {after != null && <span className="oc-input-addon" aria-hidden="true">{after}</span>}
+    </div>
+  );
+});

package/src/components/Alert.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  variant?: AlertVariant;
+  /** Heading (`oc-alert-title`). */
+  title?: ReactNode;
+}
+
+/** `<div class="oc-alert oc-alert--{variant}" role="status">`; children render inside `oc-alert-description`. */
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  { variant = "info", title, children, className, role = "status", ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} role={role} className={cx("oc-alert", `oc-alert--${variant}`, className)} {...rest}>
+      {title != null && <h4 className="oc-alert-title">{title}</h4>}
+      {children != null && <p className="oc-alert-description">{children}</p>}
+    </div>
+  );
+});

package/src/components/AlertDialog.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { DialogContext, useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+
+export type AlertDialogType = "success" | "error" | "warning" | "info" | "question";
+
+const GLYPHS: Record<AlertDialogType, string> = {
+  success: "✓",
+  error: "×",
+  warning: "!",
+  info: "i",
+  question: "?",
+};
+
+export interface AlertDialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  /** Type modifier on the content box (sets the icon color). Default `warning`. */
+  type?: AlertDialogType;
+  /** Custom icon glyph or SVG (defaults to a glyph for the type). */
+  icon?: ReactNode;
+  title: ReactNode;
+  /** Message (`oc-modal-body`): pass as `message` or as children. */
+  message?: ReactNode;
+  /** Secondary + primary buttons (`oc-modal-footer`), e.g. `<ModalClose>`s. */
+  footer?: ReactNode;
+}
+
+/** Confirmation `<dialog class="oc-modal">` with a status icon. */
+export const AlertDialog = forwardRef<HTMLDialogElement, AlertDialogProps>(function AlertDialog(
+  { open, defaultOpen, onOpenChange, type = "warning", icon, title, message, footer, className, children, ...rest },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const id = useId();
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-modal", className)}
+      aria-labelledby={`${id}-title`}
+      aria-describedby={`${id}-text`}
+      {...attrs({ closedby: "closerequest" })}
+      {...rest}
+      onClose={dlg.onClose}
+    >
+      <DialogContext.Provider value={{ close: dlg.close }}>
+        <div className={`oc-modal-content oc-modal-content--sm oc-alert-dialog oc-alert-dialog--${type}`}>
+          <span className="oc-alert-dialog-icon" aria-hidden="true">{icon ?? GLYPHS[type]}</span>
+          <h2 className="oc-modal-title" id={`${id}-title`}>{title}</h2>
+          <div className="oc-modal-body" id={`${id}-text`}>{message ?? children}</div>
+          {footer != null && <div className="oc-modal-footer">{footer}</div>}
+        </div>
+      </DialogContext.Provider>
+    </dialog>
+  );
+});