@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/blocks/BlockWizardDialog.tsx

@@ -1,101 +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>
-  );
-});
+"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

@@ -1,31 +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>
-  );
-});
+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

@@ -1,39 +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} />;
-}
+// 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

@@ -1,47 +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>
-  );
-});
+// 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

@@ -1,24 +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>
-  );
-});
+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

@@ -1,60 +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>
-  );
-});
+"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>
+  );
+});