@microbit/ui 0.4.0 → 0.5.0

package/lang/ui.en.json

@@ -3,6 +3,10 @@
     "defaultMessage": "Breadcrumb",
     "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
   },
+  "ui.cancel-action": {
+    "defaultMessage": "Cancel",
+    "description": "Cancel button in dialogs"
+  },
   "ui.close-action": {
     "defaultMessage": "Close",
     "description": "Close button text or label"

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@microbit/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microbit-foundation/ui.git",
+    "directory": "packages/ui"
+  },
   "type": "module",
   "exports": {
     ".": "./src/index.ts",

package/src/ConfirmDialog.tsx

@@ -0,0 +1,66 @@
+/**
+ * (c) 2026, Micro:bit Educational Foundation and contributors
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactNode, RefObject } from "react";
+import { FormattedMessage } from "react-intl";
+import { Button } from "./Button";
+import { uiMessage } from "./messages";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "./Modal";
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  heading: ReactNode;
+  body: ReactNode;
+  onConfirm: () => void;
+  onCancel: () => void;
+  /**
+   * The verb for what confirming does ("Delete", "Reset"). Required: there
+   * is always a better label than "Confirm".
+   */
+  confirmText: ReactNode;
+  /** Defaults to "Cancel". */
+  cancelText?: ReactNode;
+  finalFocusRef?: RefObject<HTMLElement>;
+  onCloseComplete?: () => void;
+}
+
+/**
+ * An alert dialog for a destructive action. Cancel takes initial focus, as
+ * the least destructive choice, and confirm is styled as dangerous.
+ */
+export const ConfirmDialog = ({
+  isOpen,
+  heading,
+  body,
+  onConfirm,
+  onCancel,
+  confirmText,
+  cancelText,
+  finalFocusRef,
+  onCloseComplete,
+}: ConfirmDialogProps) => (
+  <Modal
+    isOpen={isOpen}
+    onClose={onCancel}
+    role="alertdialog"
+    size="md"
+    isCentered
+    finalFocusRef={finalFocusRef}
+    onCloseComplete={onCloseComplete}
+  >
+    <ModalHeader css={{ fontWeight: "bold", lineHeight: 1.2 }}>
+      {heading}
+    </ModalHeader>
+    <ModalBody>{body}</ModalBody>
+    <ModalFooter css={{ gap: 3 }}>
+      <Button autoFocus onPress={onCancel}>
+        {cancelText ?? <FormattedMessage {...uiMessage("ui.cancel-action")} />}
+      </Button>
+      <Button variant="solid" tone="danger" onPress={onConfirm}>
+        {confirmText}
+      </Button>
+    </ModalFooter>
+  </Modal>
+);

package/src/index.ts

@@ -57,6 +57,7 @@ export * from "./ListBox";
 export * from "./ComboBox";
 export * from "./Menu";
 export * from "./Modal";
+export * from "./ConfirmDialog";
 export * from "./PopoverArrow";
 export * from "./SharedUIProvider";
 export * from "./Tooltip";