@molecule/app-ui-react 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -3,7 +3,7 @@ AUTO-GENERATED — DO NOT EDIT THIS FILE.
3
3
  Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
4
4
  Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
5
5
  To change this document, edit the module-level JSDoc in src/index.ts.
6
- Generated: 2026-09-24T08:01:39.991Z
6
+ Generated: 2026-09-24T21:35:36.593Z
7
7
  -->
8
8
 
9
9
  # @molecule/app-ui-react
@@ -471,6 +471,35 @@ interface ConfirmButtonProps extends Omit<
471
471
  }
472
472
  ```
473
473
 
474
+ #### `ConfirmDialogProps`
475
+
476
+ Props for {@link ConfirmDialog}.
477
+
478
+ ```typescript
479
+ interface ConfirmDialogProps {
480
+ /** Whether the dialog is open. */
481
+ open: boolean
482
+ /** Called when the dialog should close (escape, backdrop, cancel). */
483
+ onClose: () => void
484
+ /** Title. */
485
+ title: ReactNode
486
+ /** Body / warning text. */
487
+ description: ReactNode
488
+ /** Confirm-button label (e.g. "Delete"). */
489
+ confirmLabel?: ReactNode
490
+ /** Cancel-button label. */
491
+ cancelLabel?: ReactNode
492
+ /** Called when the user confirms. */
493
+ onConfirm: () => void | Promise<void>
494
+ /** Is the confirm action destructive? Defaults to true. */
495
+ destructive?: boolean
496
+ /** Extra body content between description and footer. */
497
+ children?: ReactNode
498
+ /** Disables both buttons. Set it yourself while your `onConfirm` promise is pending — the dialog does not track it and does not auto-close. */
499
+ loading?: boolean
500
+ }
501
+ ```
502
+
474
503
  #### `ContainerProps`
475
504
 
476
505
  Props for the Container layout component.
@@ -826,6 +855,31 @@ interface LanguagePickerProps extends Omit<
826
855
  }
827
856
  ```
828
857
 
858
+ #### `LoadErrorBannerProps`
859
+
860
+ Props for {@link LoadErrorBanner}.
861
+
862
+ ```typescript
863
+ interface LoadErrorBannerProps extends HTMLElementProps {
864
+ /** The primary error line (e.g. the localized "Could not load X."). */
865
+ message: React.ReactNode
866
+ /** Secondary line under the message (status code, hint). */
867
+ detail?: React.ReactNode
868
+ /**
869
+ * Called when Retry is clicked. Return the promise; while pending, the
870
+ * button is disabled and shows "Retrying…". Omit for a display-only
871
+ * banner.
872
+ */
873
+ onRetry?: () => void | Promise<void>
874
+ /** Retry-button label. Falls back to a localized "Retry". */
875
+ retryLabel?: React.ReactNode
876
+ /** `data-mol-id` for the retry button (default `load-error-retry`). */
877
+ retryMolId?: string
878
+ /** Extra content between message and retry row (e.g. an error code). */
879
+ children?: React.ReactNode
880
+ }
881
+ ```
882
+
829
883
  #### `ModalProps`
830
884
 
831
885
  Props for the Modal/Dialog component.
@@ -992,6 +1046,46 @@ interface ProgressProps extends BaseProps {
992
1046
  }
993
1047
  ```
994
1048
 
1049
+ #### `PromptDialogProps`
1050
+
1051
+ Props for {@link PromptDialog}.
1052
+
1053
+ ```typescript
1054
+ interface PromptDialogProps {
1055
+ /** Whether the dialog is open. */
1056
+ open: boolean
1057
+ /** Called when the dialog should close (escape, backdrop, cancel, or a fulfilled {@link PromptDialogProps.onSubmit}). */
1058
+ onClose: () => void
1059
+ /** Dialog heading. */
1060
+ title: React.ReactNode
1061
+ /** Explanatory line under the title. */
1062
+ description?: React.ReactNode
1063
+ /** Input placeholder. */
1064
+ placeholder?: string
1065
+ /** Value the input starts from every time the dialog opens. */
1066
+ initialValue?: string
1067
+ /**
1068
+ * Called with the entered value on confirm. Resolve to close the dialog;
1069
+ * reject or throw to keep it open (show the error via {@link PromptDialogProps.children}).
1070
+ */
1071
+ onSubmit: (value: string) => void | Promise<void>
1072
+ /** Confirm-button label. Falls back to a localized "Confirm". */
1073
+ confirmLabel?: React.ReactNode
1074
+ /** Cancel-button label. Falls back to a localized "Cancel". */
1075
+ cancelLabel?: React.ReactNode
1076
+ /** Render the confirm button in the error color (e.g. an irreversible reset). */
1077
+ destructive?: boolean
1078
+ /** `data-mol-id` for the text input. */
1079
+ inputMolId?: string
1080
+ /** `data-mol-id` for the confirm button. */
1081
+ confirmMolId?: string
1082
+ /** `data-mol-id` for the cancel button. */
1083
+ cancelMolId?: string
1084
+ /** Extra body content under the input (error banners, hints). */
1085
+ children?: React.ReactNode
1086
+ }
1087
+ ```
1088
+
995
1089
  #### `RadioGroupProps`
996
1090
 
997
1091
  Props for the RadioGroup component.
@@ -1059,6 +1153,151 @@ interface RadioOption<T = string> {
1059
1153
  }
1060
1154
  ```
1061
1155
 
1156
+ #### `ResponsiveAppShellContentProps`
1157
+
1158
+ Props for the {@link ResponsiveAppShellContent} sub-component.
1159
+
1160
+ ```typescript
1161
+ interface ResponsiveAppShellContentProps {
1162
+ /** The routed page content — typically an `<Outlet />`. */
1163
+ children: ReactNode
1164
+ /** Extra classes on the `<main>`. */
1165
+ className?: string
1166
+ /** Inline styles on the `<main>` (rarely needed — layout is owned). */
1167
+ style?: React.CSSProperties
1168
+ /** `data-mol-id` override. Default: `'shell-content'`. */
1169
+ dataMolId?: string
1170
+ /** `data-testid` override. */
1171
+ testId?: string
1172
+ }
1173
+ ```
1174
+
1175
+ #### `ResponsiveAppShellDrawerProps`
1176
+
1177
+ Props for the {@link ResponsiveAppShellDrawer} sub-component.
1178
+
1179
+ ```typescript
1180
+ interface ResponsiveAppShellDrawerProps {
1181
+ /**
1182
+ * Nav content — the links, same as (or adapted from) the Sidebar's. Only
1183
+ * mounted while the drawer is open on a below-breakpoint viewport.
1184
+ */
1185
+ children: ReactNode
1186
+ /**
1187
+ * Header row content (typically the brand), rendered next to the close
1188
+ * button.
1189
+ */
1190
+ header?: ReactNode
1191
+ /**
1192
+ * Accessible name for the dialog and its `<nav>` landmark. Defaults to the
1193
+ * `appShell.primaryNav` translation (English fallback `"Primary
1194
+ * navigation"`).
1195
+ */
1196
+ navLabel?: string
1197
+ /** Below-nav content (user card, sign-out), after the `<nav>`. */
1198
+ footer?: ReactNode
1199
+ /** Whether the panel shows a close (X) button. Default: `true`. */
1200
+ showCloseButton?: boolean
1201
+ /** Extra classes on the dialog panel. */
1202
+ className?: string
1203
+ /** `data-mol-id` override for the panel. Default: `'shell-drawer'`. */
1204
+ dataMolId?: string
1205
+ /** `data-mol-id` override for the close button. Default: `'shell-drawer-close'`. */
1206
+ closeDataMolId?: string
1207
+ /** `data-testid` override for the panel. */
1208
+ testId?: string
1209
+ }
1210
+ ```
1211
+
1212
+ #### `ResponsiveAppShellProps`
1213
+
1214
+ Props for the {@link ResponsiveAppShell} root.
1215
+
1216
+ ```typescript
1217
+ interface ResponsiveAppShellProps {
1218
+ /**
1219
+ * The shell sub-components — `<ResponsiveAppShell.TopBar />`,
1220
+ * `<ResponsiveAppShell.Sidebar />`, `<ResponsiveAppShell.Drawer />` and
1221
+ * `<ResponsiveAppShell.Content />`.
1222
+ */
1223
+ children: ReactNode
1224
+ /**
1225
+ * Sidebar (and drawer) width: `'sm'` (208px), `'md'` (240px, default),
1226
+ * `'lg'` (256px) or an exact pixel number.
1227
+ */
1228
+ sidebarWidth?: ShellSidebarWidth
1229
+ /** Extra classes on the root flex-row container. */
1230
+ className?: string
1231
+ /**
1232
+ * `data-mol-id` for the root container. Defaults to `'shell-root'`.
1233
+ */
1234
+ dataMolId?: string
1235
+ }
1236
+ ```
1237
+
1238
+ #### `ResponsiveAppShellSidebarProps`
1239
+
1240
+ Props for the {@link ResponsiveAppShellSidebar} sub-component.
1241
+
1242
+ ```typescript
1243
+ interface ResponsiveAppShellSidebarProps {
1244
+ /**
1245
+ * Nav content — the links (they land inside the sidebar's `<nav>` landmark;
1246
+ * pass `aria-current="page"` from the active one yourself). Typically the
1247
+ * SAME element variable the Drawer receives, so only the mounted
1248
+ * breakpoint's copy ever instantiates.
1249
+ */
1250
+ children: ReactNode
1251
+ /**
1252
+ * Accessible name for the sidebar's `<nav>` landmark. Defaults to the
1253
+ * `appShell.primaryNav` translation (English fallback `"Primary
1254
+ * navigation"`).
1255
+ */
1256
+ navLabel?: string
1257
+ /**
1258
+ * Below-nav content (user card, quick action) — rendered after the `<nav>`
1259
+ * in a bordered footer row, so it does not sit inside the nav landmark.
1260
+ */
1261
+ footer?: ReactNode
1262
+ /** Extra classes on the `<aside>`. */
1263
+ className?: string
1264
+ /** `data-mol-id` override. Default: `'shell-sidebar'`. */
1265
+ dataMolId?: string
1266
+ /** `data-testid` override. */
1267
+ testId?: string
1268
+ }
1269
+ ```
1270
+
1271
+ #### `ResponsiveAppShellTopBarProps`
1272
+
1273
+ Props for the {@link ResponsiveAppShellTopBar} sub-component.
1274
+
1275
+ ```typescript
1276
+ interface ResponsiveAppShellTopBarProps {
1277
+ /**
1278
+ * Brand/title node, rendered after the menu trigger — typically a
1279
+ * `<Link to="/…">` with the app name or logo. The shell wraps it in a
1280
+ * flex row; style the node itself.
1281
+ */
1282
+ brand?: ReactNode
1283
+ /** Trailing actions — user menu, theme toggle, search, etc. */
1284
+ actions?: ReactNode
1285
+ /**
1286
+ * Render the top bar only below the breakpoint (mount-conditioned, not
1287
+ * CSS-hidden — no dead DOM on desktop). For apps whose desktop shell has
1288
+ * no top bar (e.g. the sidebar carries everything). Default: `false`
1289
+ * (top bar on every breakpoint).
1290
+ */
1291
+ mobileOnly?: boolean
1292
+ /** Extra classes on the `<header>`. */
1293
+ className?: string
1294
+ /** `data-mol-id` override. Default: `'shell-topbar'`. */
1295
+ dataMolId?: string
1296
+ /** `data-testid` override. */
1297
+ testId?: string
1298
+ }
1299
+ ```
1300
+
1062
1301
  #### `SelectElementProps`
1063
1302
 
1064
1303
  Base props for select elements.
@@ -1853,6 +2092,19 @@ Framework-agnostic mouse event handler.
1853
2092
  type MouseEventHandler = EventHandler<MouseEvent>
1854
2093
  ```
1855
2094
 
2095
+ #### `ShellSidebarWidth`
2096
+
2097
+ Semantic sidebar width — the same stack-agnostic presets
2098
+ `@molecule/app-sidebar-layout-react` uses, so both shells render the same
2099
+ fleet geometry: `sm` → 208px, `md` → 240px (default), `lg` → 256px. A raw
2100
+ `number` is an exact pixel width. Applied via inline style (a specific
2101
+ pixel width is the documented "value a swappable ClassMap cannot express
2102
+ as a token" case).
2103
+
2104
+ ```typescript
2105
+ type ShellSidebarWidth = 'sm' | 'md' | 'lg' | number
2106
+ ```
2107
+
1856
2108
  #### `Size`
1857
2109
 
1858
2110
  Standard size scale used across all molecule UI components (buttons, inputs, badges, etc.).
@@ -1912,6 +2164,30 @@ function cn(inputs?: (string | false | null | undefined)[]): string
1912
2164
 
1913
2165
  **Returns:** A single space-separated class string.
1914
2166
 
2167
+ #### `ConfirmDialog(props)`
2168
+
2169
+ Are-you-sure-style confirmation modal for destructive actions.
2170
+
2171
+ Use standalone (around delete buttons, revoke tokens, irreversible
2172
+ migrations) or with a DangerZoneSection action.
2173
+
2174
+ ```typescript
2175
+ function ConfirmDialog({
2176
+ open,
2177
+ onClose,
2178
+ title,
2179
+ description,
2180
+ confirmLabel,
2181
+ cancelLabel,
2182
+ onConfirm,
2183
+ destructive = true,
2184
+ children,
2185
+ loading,
2186
+ }: ConfirmDialogProps): JSX.Element
2187
+ ```
2188
+
2189
+ - `props` — Component props (see {@link ConfirmDialogProps}).
2190
+
1915
2191
  #### `Icon(props)`
1916
2192
 
1917
2193
  Renders an SVG glyph looked up by `name` from the bonded
@@ -1978,6 +2254,24 @@ function LanguagePicker({
1978
2254
 
1979
2255
  - `props` — {@link LanguagePickerProps}
1980
2256
 
2257
+ #### `LoadErrorBanner(props)`
2258
+
2259
+ Error banner with an owned pending-state Retry button.
2260
+
2261
+ ```typescript
2262
+ function LoadErrorBanner({
2263
+ message,
2264
+ detail,
2265
+ onRetry,
2266
+ retryLabel,
2267
+ retryMolId = 'load-error-retry',
2268
+ children,
2269
+ ...rest
2270
+ }: LoadErrorBannerProps): JSX.Element
2271
+ ```
2272
+
2273
+ - `props` — Component props (see {@link LoadErrorBannerProps}).
2274
+
1981
2275
  #### `PanelCloseProvider(props)`
1982
2276
 
1983
2277
  Provides the panel-close callback to descendants. Rendered internally
@@ -1992,6 +2286,127 @@ function PanelCloseProvider({ close, children }: PanelCloseProviderProps): JSX.E
1992
2286
 
1993
2287
  **Returns:** The children wrapped in the close-context provider.
1994
2288
 
2289
+ #### `PromptDialog(props)`
2290
+
2291
+ Modal that asks the user for a short string, replacing `window.prompt`.
2292
+
2293
+ ```typescript
2294
+ function PromptDialog({
2295
+ open,
2296
+ onClose,
2297
+ title,
2298
+ description,
2299
+ placeholder,
2300
+ initialValue = '',
2301
+ onSubmit,
2302
+ confirmLabel,
2303
+ cancelLabel,
2304
+ destructive = false,
2305
+ inputMolId,
2306
+ confirmMolId,
2307
+ cancelMolId,
2308
+ children,
2309
+ }: PromptDialogProps): JSX.Element
2310
+ ```
2311
+
2312
+ - `props` — Component props (see {@link PromptDialogProps}).
2313
+
2314
+ #### `ResponsiveAppShellContent(props)`
2315
+
2316
+ The shell's `<main>` landmark. Grows to fill the row and may shrink below
2317
+ its content width, so page-level `overflow-x` strips scroll inside the
2318
+ page instead of widening the whole shell.
2319
+
2320
+ ```typescript
2321
+ function ResponsiveAppShellContent({
2322
+ children,
2323
+ className,
2324
+ style,
2325
+ dataMolId = 'shell-content',
2326
+ testId,
2327
+ }: ResponsiveAppShellContentProps): JSX.Element
2328
+ ```
2329
+
2330
+ - `props` — The page content and class/id overrides.
2331
+
2332
+ **Returns:** The main landmark.
2333
+
2334
+ #### `ResponsiveAppShellDrawer(props)`
2335
+
2336
+ The mobile nav drawer (<768px): a left-anchored dialog panel over a
2337
+ backdrop, opened by the menu trigger the TopBar renders.
2338
+
2339
+ Implements the WAI-ARIA APG dialog pattern — focus moves into the panel on
2340
+ open and returns to the previously focused element (the trigger) on close,
2341
+ Tab is trapped inside, Escape and backdrop clicks close, body scroll locks
2342
+ (reference-counted with any stacked `<Modal>`), and the shell closes it on
2343
+ SPA navigation. Renders nothing on desktop or while closed.
2344
+
2345
+ ```typescript
2346
+ function ResponsiveAppShellDrawer({
2347
+ children,
2348
+ header,
2349
+ navLabel,
2350
+ footer,
2351
+ showCloseButton = true,
2352
+ className,
2353
+ dataMolId = 'shell-drawer',
2354
+ closeDataMolId = 'shell-drawer-close',
2355
+ testId,
2356
+ }: ResponsiveAppShellDrawerProps): JSX.Element | null
2357
+ ```
2358
+
2359
+ - `props` — Nav children, header/nav-label/footer slots, close-button and class/id overrides.
2360
+
2361
+ **Returns:** The drawer portal while open on mobile, otherwise `null`.
2362
+
2363
+ #### `ResponsiveAppShellSidebar(props)`
2364
+
2365
+ The desktop sidebar (`<aside>` + `<nav>` landmarks). Renders NOTHING below
2366
+ 768px — the {@link ResponsiveAppShellDrawer} carries the nav there.
2367
+
2368
+ Full viewport height, sticky at the top edge, scrolls internally when its
2369
+ content outgrows the viewport.
2370
+
2371
+ ```typescript
2372
+ function ResponsiveAppShellSidebar({
2373
+ children,
2374
+ navLabel,
2375
+ footer,
2376
+ className,
2377
+ dataMolId = 'shell-sidebar',
2378
+ testId,
2379
+ }: ResponsiveAppShellSidebarProps): JSX.Element | null
2380
+ ```
2381
+
2382
+ - `props` — Nav children, nav label, footer slot, class/id overrides.
2383
+
2384
+ **Returns:** The sidebar landmarks, or `null` below the breakpoint.
2385
+
2386
+ #### `ResponsiveAppShellTopBar(props)`
2387
+
2388
+ The shell's `<header>` landmark: menu trigger (mobile, when a Drawer is
2389
+ composed), brand, and trailing actions.
2390
+
2391
+ Sticks to the top of the viewport by default. The menu trigger renders
2392
+ only while a `ResponsiveAppShell.Drawer` is part of the composition AND
2393
+ the viewport is below the breakpoint.
2394
+
2395
+ ```typescript
2396
+ function ResponsiveAppShellTopBar({
2397
+ brand,
2398
+ actions,
2399
+ mobileOnly = false,
2400
+ className,
2401
+ dataMolId = 'shell-topbar',
2402
+ testId,
2403
+ }: ResponsiveAppShellTopBarProps): JSX.Element | null
2404
+ ```
2405
+
2406
+ - `props` — Brand/actions slots, `mobileOnly`, and class/id overrides.
2407
+
2408
+ **Returns:** The header landmark, or `null` when `mobileOnly` is set on desktop.
2409
+
1995
2410
  #### `SidebarUserCard(props)`
1996
2411
 
1997
2412
  Sidebar-resident user-account card: avatar + name + status line, opens
@@ -2069,6 +2484,27 @@ function ToastProvider({
2069
2484
 
2070
2485
  **Returns:** The rendered provider with toast container.
2071
2486
 
2487
+ #### `useIsDesktop(query)`
2488
+
2489
+ Whether the viewport is at least 768px wide (the fleet's `md` breakpoint).
2490
+
2491
+ Reads `window.matchMedia` synchronously in the state initializer, so the
2492
+ FIRST client render is already correct — no mobile-then-desktop swap frame
2493
+ (this is time-tracking's QA-hardened version; the naive
2494
+ "state starts false, sync in an effect" variant mounts the wrong shell for
2495
+ one frame and double-fetches route data on desktop). Subscribes to
2496
+ `change` events afterwards. Guarded for non-browser environments
2497
+ (SSR/node): returns `false` (the mobile shell) when no `window.matchMedia`
2498
+ exists.
2499
+
2500
+ ```typescript
2501
+ function useIsDesktop(query?: string): boolean
2502
+ ```
2503
+
2504
+ - `query` — Override the media query. Defaults to `(min-width: 768px)`.
2505
+
2506
+ **Returns:** Whether the desktop shell should mount.
2507
+
2072
2508
  #### `usePanelClose()`
2073
2509
 
2074
2510
  Returns the callback that dismisses the drawer the current panel is
@@ -2583,6 +3019,24 @@ const RadioGroup: React.ForwardRefExoticComponent<
2583
3019
  >
2584
3020
  ```
2585
3021
 
3022
+ #### `ResponsiveAppShell`
3023
+
3024
+ The responsive app shell family — see the {@link ResponsiveAppShellBase |
3025
+ root component} and the module docs for the full contract.
3026
+
3027
+ Consumed as `<ResponsiveAppShell.TopBar />`, `.Sidebar`, `.Drawer` and
3028
+ `.Content` inside `<ResponsiveAppShell>`; each is also exported as a named
3029
+ component (`ResponsiveAppShellTopBar`, …) for star-import consumers.
3030
+
3031
+ ```typescript
3032
+ const ResponsiveAppShell: typeof ResponsiveAppShellBase & {
3033
+ TopBar: typeof ResponsiveAppShellTopBar
3034
+ Sidebar: typeof ResponsiveAppShellSidebar
3035
+ Drawer: typeof ResponsiveAppShellDrawer
3036
+ Content: typeof ResponsiveAppShellContent
3037
+ }
3038
+ ```
3039
+
2586
3040
  #### `Select`
2587
3041
 
2588
3042
  Select component.
@@ -0,0 +1,71 @@
1
+ /**
2
+ * ConfirmDialog component — the shared "Are you sure?" modal.
3
+ *
4
+ * Promoted from `@molecule/app-danger-zone-react` (2026-09-24) so every app
5
+ * confirms destructive actions through the framework bundle instead of
6
+ * hand-rolling `window.confirm` (broken headless + on touch) or reaching for
7
+ * the danger-zone feature package just to render one dialog. For an INLINE
8
+ * two-click arm/commit affordance use {@link ConfirmButton}; for a dialog
9
+ * that also collects text use {@link PromptDialog}.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * import { ConfirmDialog } from '@molecule/app-ui-react'
14
+ *
15
+ * <ConfirmDialog
16
+ * open={confirmOpen}
17
+ * onClose={() => setConfirmOpen(false)}
18
+ * title="Delete vault?"
19
+ * description="This action cannot be undone."
20
+ * confirmLabel={t('vault.delete', {}, { defaultValue: 'Delete' })}
21
+ * onConfirm={handleDelete}
22
+ * />
23
+ * ```
24
+ *
25
+ * @remarks
26
+ * Does NOT track `onConfirm`'s promise and does NOT close itself on confirm:
27
+ * set `loading` yourself while the action runs, then call `onClose()` when it
28
+ * settles — otherwise users can double-fire the destructive action or be left
29
+ * staring at an open dialog. Cancel/Confirm fall back to the `confirm.*`
30
+ * i18n keys (companion bond: `@molecule/app-locales-danger-zone`); pass
31
+ * `confirmLabel`/`cancelLabel` for action-specific wording ("Delete",
32
+ * "Revoke"). `destructive` (default true) only switches the confirm button
33
+ * color. `data-mol-id` for e2e locators goes on YOUR trigger button; the
34
+ * dialog's own buttons are text-labeled ("Cancel"/confirm label) so
35
+ * `getByRole('button', { name })` reaches them.
36
+ *
37
+ * @module
38
+ */
39
+ import type { JSX, ReactNode } from 'react';
40
+ /** Props for {@link ConfirmDialog}. */
41
+ export interface ConfirmDialogProps {
42
+ /** Whether the dialog is open. */
43
+ open: boolean;
44
+ /** Called when the dialog should close (escape, backdrop, cancel). */
45
+ onClose: () => void;
46
+ /** Title. */
47
+ title: ReactNode;
48
+ /** Body / warning text. */
49
+ description: ReactNode;
50
+ /** Confirm-button label (e.g. "Delete"). */
51
+ confirmLabel?: ReactNode;
52
+ /** Cancel-button label. */
53
+ cancelLabel?: ReactNode;
54
+ /** Called when the user confirms. */
55
+ onConfirm: () => void | Promise<void>;
56
+ /** Is the confirm action destructive? Defaults to true. */
57
+ destructive?: boolean;
58
+ /** Extra body content between description and footer. */
59
+ children?: ReactNode;
60
+ /** Disables both buttons. Set it yourself while your `onConfirm` promise is pending — the dialog does not track it and does not auto-close. */
61
+ loading?: boolean;
62
+ }
63
+ /**
64
+ * Are-you-sure-style confirmation modal for destructive actions.
65
+ *
66
+ * Use standalone (around delete buttons, revoke tokens, irreversible
67
+ * migrations) or with a DangerZoneSection action.
68
+ * @param props - Component props (see {@link ConfirmDialogProps}).
69
+ */
70
+ export declare function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, onConfirm, destructive, children, loading, }: ConfirmDialogProps): JSX.Element;
71
+ //# sourceMappingURL=ConfirmDialog.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ3C,uCAAuC;AACvC,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAA;IACb,sEAAsE;IACtE,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,aAAa;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,2BAA2B;IAC3B,WAAW,EAAE,SAAS,CAAA;IACtB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAkB,EAClB,QAAQ,EACR,OAAO,GACR,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA2BlC"}
@@ -0,0 +1,20 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useTranslation } from '@molecule/app-react';
3
+ import { getClassMap } from '@molecule/app-ui';
4
+ import { Button } from './Button.js';
5
+ import { Modal } from './Modal.js';
6
+ /**
7
+ * Are-you-sure-style confirmation modal for destructive actions.
8
+ *
9
+ * Use standalone (around delete buttons, revoke tokens, irreversible
10
+ * migrations) or with a DangerZoneSection action.
11
+ * @param props - Component props (see {@link ConfirmDialogProps}).
12
+ */
13
+ export function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, onConfirm, destructive = true, children, loading, }) {
14
+ const cm = getClassMap();
15
+ const { t } = useTranslation();
16
+ return (_jsx(Modal, { open: open, onClose: onClose, children: _jsxs("div", { className: cm.stack(3), children: [_jsx("h2", { className: cm.cn(cm.textSize('lg'), cm.fontWeight('bold')), children: title }), _jsx("p", { className: cm.textSize('sm'), children: description }), children, _jsxs("div", { className: cm.flex({ justify: 'end', gap: 'sm' }), children: [_jsx(Button, { variant: "ghost", onClick: onClose, disabled: loading, children: cancelLabel ?? t('confirm.cancel', {}, { defaultValue: 'Cancel' }) }), _jsx(Button, { variant: "solid", color: destructive ? 'error' : 'primary', onClick: () => void onConfirm(), disabled: loading, children: loading
17
+ ? '…'
18
+ : (confirmLabel ?? t('confirm.confirm', {}, { defaultValue: 'Confirm' })) })] })] }) }));
19
+ }
20
+ //# sourceMappingURL=ConfirmDialog.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/components/ConfirmDialog.tsx"],"names":[],"mappings":";AAyCA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AA0BlC;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,GAAG,IAAI,EAClB,QAAQ,EACR,OAAO,GACY;IACnB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,OAAO,CACL,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YACjC,eAAK,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,aACzB,aAAI,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,YAAG,KAAK,GAAM,EAC5E,YAAG,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAG,WAAW,GAAK,EACjD,QAAQ,EACT,eAAK,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,aACpD,KAAC,MAAM,IAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,YACxD,WAAW,IAAI,CAAC,CAAC,gBAAgB,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,GAC5D,EACT,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,SAAS,EAAE,EAC/B,QAAQ,EAAE,OAAO,YAEhB,OAAO;gCACN,CAAC,CAAC,GAAG;gCACL,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,iBAAiB,EAAE,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,GACpE,IACL,IACF,GACA,CACT,CAAA;AACH,CAAC"}