@molecule/app-danger-zone-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/ConfirmDialog.d.ts

@@ -0,0 +1,33 @@
+import type { JSX, ReactNode } from 'react';
+/** Props for {@link ConfirmDialog}. */
+export interface ConfirmDialogProps {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the dialog should close (escape, backdrop, cancel). */
+    onClose: () => void;
+    /** Title. */
+    title: ReactNode;
+    /** Body / warning text. */
+    description: ReactNode;
+    /** Confirm-button label (e.g. "Delete"). */
+    confirmLabel?: ReactNode;
+    /** Cancel-button label. */
+    cancelLabel?: ReactNode;
+    /** Called when the user confirms. */
+    onConfirm: () => void | Promise<void>;
+    /** Is the confirm action destructive? Defaults to true. */
+    destructive?: boolean;
+    /** Extra body content between description and footer. */
+    children?: ReactNode;
+    /** Disables both buttons. Set it yourself while your `onConfirm` promise is pending — the dialog does not track it and does not auto-close. */
+    loading?: boolean;
+}
+/**
+ * Are-you-sure-style confirmation modal for destructive actions.
+ *
+ * Use standalone (around delete buttons, revoke tokens, irreversible
+ * migrations) or wrap DangerZoneSection's action with this dialog.
+ * @param props - Component props (see {@link ConfirmDialogProps}).
+ */
+export declare function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, onConfirm, destructive, children, loading, }: ConfirmDialogProps): JSX.Element;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../src/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAM3C,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"}

package/dist/ConfirmDialog.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { Button, Modal } from '@molecule/app-ui-react';
+/**
+ * Are-you-sure-style confirmation modal for destructive actions.
+ *
+ * Use standalone (around delete buttons, revoke tokens, irreversible
+ * migrations) or wrap DangerZoneSection's action with this dialog.
+ * @param props - Component props (see {@link ConfirmDialogProps}).
+ */
+export function ConfirmDialog({ open, onClose, title, description, confirmLabel, cancelLabel, onConfirm, destructive = true, children, loading, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    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
+                                ? '…'
+                                : (confirmLabel ?? t('confirm.confirm', {}, { defaultValue: 'Confirm' })) })] })] }) }));
+}

package/dist/DangerZoneSection.d.ts

@@ -0,0 +1,30 @@
+import type { JSX, ReactNode } from 'react';
+/** Props for {@link DangerZoneSection}. */
+export interface DangerZoneSectionProps {
+    /** Section title. */
+    title: ReactNode;
+    /** Explanation of the destructive action. */
+    description: ReactNode;
+    /** Label on the action button (e.g. "Delete account"). */
+    actionLabel: ReactNode;
+    /** Called when the button is clicked. */
+    onAction: () => void;
+    /** When true, the button disables and shows a loading label. */
+    loading?: boolean;
+    /** When true, the button is disabled without loading. */
+    disabled?: boolean;
+    /** Additional content between description and button (e.g. a confirm-text input). */
+    children?: ReactNode;
+    /** Extra classes on the Card. */
+    className?: string;
+    /** `data-mol-id` for AI-agent selectors. */
+    dataMolId?: string;
+}
+/**
+ * Card-wrapped section for destructive actions — delete account,
+ * reset data, revoke access. Uses the error/danger accent color and
+ * puts the action on the right.
+ * @param props - Component props (see {@link DangerZoneSectionProps}).
+ */
+export declare function DangerZoneSection({ title, description, actionLabel, onAction, loading, disabled, children, className, dataMolId, }: DangerZoneSectionProps): JSX.Element;
+//# sourceMappingURL=DangerZoneSection.d.ts.map

package/dist/DangerZoneSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DangerZoneSection.d.ts","sourceRoot":"","sources":["../src/DangerZoneSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3C,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAA;IAChB,6CAA6C;IAC7C,WAAW,EAAE,SAAS,CAAA;IACtB,0DAA0D;IAC1D,WAAW,EAAE,SAAS,CAAA;IACtB,yCAAyC;IACzC,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAkBtC"}

package/dist/DangerZoneSection.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+import { Button, Card } from '@molecule/app-ui-react';
+/**
+ * Card-wrapped section for destructive actions — delete account,
+ * reset data, revoke access. Uses the error/danger accent color and
+ * puts the action on the right.
+ * @param props - Component props (see {@link DangerZoneSectionProps}).
+ */
+export function DangerZoneSection({ title, description, actionLabel, onAction, loading, disabled, children, className, dataMolId, }) {
+    const cm = getClassMap();
+    return (_jsx(Card, { className: className, "data-mol-id": dataMolId, children: _jsxs("div", { className: cm.stack(3), children: [_jsxs("header", { className: cm.stack(1), children: [_jsx("h3", { className: cm.cn(cm.textSize('base'), cm.fontWeight('semibold')), children: title }), _jsx("p", { className: cm.textSize('sm'), children: description })] }), children, _jsx("div", { className: cm.flex({ justify: 'end' }), children: _jsx(Button, { variant: "solid", color: "error", onClick: onAction, disabled: disabled || loading, children: loading ? '…' : actionLabel }) })] }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * React destructive-action primitives.
+ *
+ * Exports:
+ * - `<DangerZoneSection>` — Card with title/description/button for delete/reset/revoke.
+ * - `<ConfirmDialog>` — standalone "Are you sure?" modal.
+ *
+ * @example
+ * ```tsx
+ * import { ConfirmDialog, DangerZoneSection } from '@molecule/app-danger-zone-react'
+ *
+ * <DangerZoneSection
+ *   title="Delete account"
+ *   description="This permanently removes your account and all data."
+ *   actionLabel="Delete account"
+ *   onAction={() => setConfirmOpen(true)}
+ * />
+ *
+ * <ConfirmDialog
+ *   open={confirmOpen}
+ *   onClose={() => setConfirmOpen(false)}
+ *   title="Delete account?"
+ *   description="This action cannot be undone."
+ *   confirmLabel="Delete"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ *
+ * @remarks
+ * `<ConfirmDialog>` does NOT track `onConfirm`'s promise and does NOT close
+ * itself on confirm: set `loading` yourself while the action runs, then call
+ * `onClose()` when it settles — otherwise users can double-fire the
+ * destructive action or be left staring at an open dialog. Cancel/Confirm
+ * fall back to the `confirm.*` i18n keys (companion bond:
+ * `@molecule/app-locales-danger-zone`); pass `confirmLabel`/`cancelLabel`
+ * for action-specific wording ("Delete", "Revoke"). `destructive` (default
+ * true) only switches the confirm button color.
+ *
+ * @module
+ */
+export * from './ConfirmDialog.js';
+export * from './DangerZoneSection.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA"}

package/dist/index.js

@@ -0,0 +1,42 @@
+/**
+ * React destructive-action primitives.
+ *
+ * Exports:
+ * - `<DangerZoneSection>` — Card with title/description/button for delete/reset/revoke.
+ * - `<ConfirmDialog>` — standalone "Are you sure?" modal.
+ *
+ * @example
+ * ```tsx
+ * import { ConfirmDialog, DangerZoneSection } from '@molecule/app-danger-zone-react'
+ *
+ * <DangerZoneSection
+ *   title="Delete account"
+ *   description="This permanently removes your account and all data."
+ *   actionLabel="Delete account"
+ *   onAction={() => setConfirmOpen(true)}
+ * />
+ *
+ * <ConfirmDialog
+ *   open={confirmOpen}
+ *   onClose={() => setConfirmOpen(false)}
+ *   title="Delete account?"
+ *   description="This action cannot be undone."
+ *   confirmLabel="Delete"
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ *
+ * @remarks
+ * `<ConfirmDialog>` does NOT track `onConfirm`'s promise and does NOT close
+ * itself on confirm: set `loading` yourself while the action runs, then call
+ * `onClose()` when it settles — otherwise users can double-fire the
+ * destructive action or be left staring at an open dialog. Cancel/Confirm
+ * fall back to the `confirm.*` i18n keys (companion bond:
+ * `@molecule/app-locales-danger-zone`); pass `confirmLabel`/`cancelLabel`
+ * for action-specific wording ("Delete", "Revoke"). `destructive` (default
+ * true) only switches the confirm button color.
+ *
+ * @module
+ */
+export * from './ConfirmDialog.js';
+export * from './DangerZoneSection.js';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@molecule/app-danger-zone-react",
+  "version": "1.0.0",
+  "description": "DangerZoneSection + ConfirmDialog for destructive actions (delete account, reset, revoke)",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "danger-zone",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}