nalarx-uiComponents
App dialog
In-app alert, confirm, type-to-confirm and prompt that resolve as promises.
bunx shadcn@latest add @nalarx/app-dialogUsage
Mount the provider once near the root, then call the hook anywhere below it. confirm and prompt resolve to false and null on cancel, like the browser's own functions.
<AppDialogProvider renderDebug={(debug) => <ErrorDebugDetails debug={debug as ErrorDebugInfo} />}>
{children}
</AppDialogProvider>
const dialog = useAppDialog();
if (await dialog.confirm({ title: "Leave without saving?", okLabel: "Leave" })) router.back();
const name = await dialog.prompt({ title: "Rename view", initial: view.name });Every kind, plus an alert carrying debug details. Each preview has its own provider; the result of the last call shows under the buttons.
States
- alert: one OK button,
alertdialogrole, focus on OK. - confirm: Cancel and an accent OK (
Confirmby default).variant: "danger"makes OK destructive. - confirmTyped / confirmName: OK stays disabled until the name is typed exactly; the field turns red once it matches. Focus starts in the field.
- prompt: a 40px field with
initialselected on open; focus starts there. - Two at once: a second call settles the open one as cancelled, so no caller waits forever.
Keyboard
| Key | |
|---|---|
Enter in the prompt or type-to-confirm field | Submits (only once the name matches). |
Enter / Space on OK or Cancel | Activates it. |
Escape | Cancels and returns focus to where it was. |
Tab | Cycles inside the dialog. |
API
| Method | Resolves to |
|---|---|
alert({ title, message?, okLabel?, debug? }) | void |
confirm({ title, message?, okLabel?, cancelLabel?, variant?, confirmName?, debug? }) | boolean |
confirmTyped({ …confirm, confirmName }) | the typed string, or null |
prompt({ title, message?, initial?, placeholder?, okLabel?, cancelLabel? }) | string, or null |
AppDialogProvider takes renderDebug?: (debug: unknown) => ReactNode. Labels default to the ok, cancel, confirm, close and typeToConfirm* UI strings.
Replaces
AppDialog.tsx in both apps (web's base/Dialog.tsx and AppDialog.legacy.tsx, the Platform's own implementation) and the zustand dialogStore.