@nucleux/alert-dialog 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @nucleux/alert-dialog
+
+Modal confirmation dialog — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/alert-dialog @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { AlertDialog } from "@nucleux/alert-dialog";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,115 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+function AlertDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  destructive = false,
+  children,
+  className
+}) {
+  const baseId = React__namespace.useId();
+  const cancelRef = React__namespace.useRef(null);
+  const cancel = React__namespace.useCallback(() => {
+    onCancel?.();
+    onOpenChange(false);
+  }, [onCancel, onOpenChange]);
+  const confirm = () => {
+    onConfirm?.();
+    onOpenChange(false);
+  };
+  React__namespace.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") cancel();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, cancel]);
+  React__namespace.useEffect(() => {
+    if (open) cancelRef.current?.focus();
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "absolute inset-0 animate-nx-fade-in bg-foreground/50" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": `${baseId}-title`,
+        "aria-describedby": description ? `${baseId}-desc` : void 0,
+        className: utils.cn(
+          "relative z-10 flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg outline-none animate-nx-fade-in",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { id: `${baseId}-title`, className: "text-lg font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${baseId}-desc`, className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          children,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ref: cancelRef,
+                type: "button",
+                onClick: cancel,
+                className: "inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: confirm,
+                className: utils.cn(
+                  "inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                  destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive" : "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring"
+                ),
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.AlertDialog = AlertDialog;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","jsx","cn"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface AlertDialogProps {\n  /** Whether the alert dialog is open. */\n  open: boolean;\n  /** Called when the dialog requests to close (Escape / a button). */\n  onOpenChange: (open: boolean) => void;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Confirm button label. */\n  confirmLabel?: string;\n  /** Cancel button label. */\n  cancelLabel?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  /** Style the confirm action as destructive. */\n  destructive?: boolean;\n  /** Extra content between the description and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A modal confirmation dialog for consequential actions. Unlike Dialog, it uses\n * role=\"alertdialog\", does not close on overlay click, and focuses Cancel by\n * default. Escape triggers cancel.\n */\nexport function AlertDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = \"Continue\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  destructive = false,\n  children,\n  className,\n}: AlertDialogProps) {\n  const baseId = React.useId();\n  const cancelRef = React.useRef<HTMLButtonElement>(null);\n\n  const cancel = React.useCallback(() => {\n    onCancel?.();\n    onOpenChange(false);\n  }, [onCancel, onOpenChange]);\n\n  const confirm = () => {\n    onConfirm?.();\n    onOpenChange(false);\n  };\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") cancel();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, cancel]);\n\n  React.useEffect(() => {\n    if (open) cancelRef.current?.focus();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div aria-hidden className=\"absolute inset-0 animate-nx-fade-in bg-foreground/50\" />\n      <div\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={`${baseId}-title`}\n        aria-describedby={description ? `${baseId}-desc` : undefined}\n        className={cn(\n          \"relative z-10 flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg outline-none animate-nx-fade-in\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col gap-1\">\n          <h2 id={`${baseId}-title`} className=\"text-lg font-semibold text-foreground\">\n            {title}\n          </h2>\n          {description && (\n            <p id={`${baseId}-desc`} className=\"text-sm text-muted-foreground\">\n              {description}\n            </p>\n          )}\n        </div>\n        {children}\n        <div className=\"flex items-center justify-end gap-2 pt-2\">\n          <button\n            ref={cancelRef}\n            type=\"button\"\n            onClick={cancel}\n            className=\"inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={confirm}\n            className={cn(\n              \"inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n              destructive\n                ? \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive\"\n                : \"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring\",\n            )}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+interface AlertDialogProps {
+    /** Whether the alert dialog is open. */
+    open: boolean;
+    /** Called when the dialog requests to close (Escape / a button). */
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Confirm button label. */
+    confirmLabel?: string;
+    /** Cancel button label. */
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    /** Style the confirm action as destructive. */
+    destructive?: boolean;
+    /** Extra content between the description and the actions. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A modal confirmation dialog for consequential actions. Unlike Dialog, it uses
+ * role="alertdialog", does not close on overlay click, and focuses Cancel by
+ * default. Escape triggers cancel.
+ */
+declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, destructive, children, className, }: AlertDialogProps): React.JSX.Element | null;
+
+export { AlertDialog, type AlertDialogProps };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+interface AlertDialogProps {
+    /** Whether the alert dialog is open. */
+    open: boolean;
+    /** Called when the dialog requests to close (Escape / a button). */
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Confirm button label. */
+    confirmLabel?: string;
+    /** Cancel button label. */
+    cancelLabel?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    /** Style the confirm action as destructive. */
+    destructive?: boolean;
+    /** Extra content between the description and the actions. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A modal confirmation dialog for consequential actions. Unlike Dialog, it uses
+ * role="alertdialog", does not close on overlay click, and focuses Cancel by
+ * default. Escape triggers cancel.
+ */
+declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, destructive, children, className, }: AlertDialogProps): React.JSX.Element | null;
+
+export { AlertDialog, type AlertDialogProps };

package/dist/index.js

@@ -0,0 +1,93 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+function AlertDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Continue",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  destructive = false,
+  children,
+  className
+}) {
+  const baseId = React.useId();
+  const cancelRef = React.useRef(null);
+  const cancel = React.useCallback(() => {
+    onCancel?.();
+    onOpenChange(false);
+  }, [onCancel, onOpenChange]);
+  const confirm = () => {
+    onConfirm?.();
+    onOpenChange(false);
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") cancel();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, cancel]);
+  React.useEffect(() => {
+    if (open) cancelRef.current?.focus();
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 animate-nx-fade-in bg-foreground/50" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": `${baseId}-title`,
+        "aria-describedby": description ? `${baseId}-desc` : void 0,
+        className: cn(
+          "relative z-10 flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg outline-none animate-nx-fade-in",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("h2", { id: `${baseId}-title`, className: "text-lg font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { id: `${baseId}-desc`, className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          children,
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: cancelRef,
+                type: "button",
+                onClick: cancel,
+                className: "inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: confirm,
+                className: cn(
+                  "inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                  destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive" : "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring"
+                ),
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { AlertDialog };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;AA4BO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe,UAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,EAAA,MAAM,SAAA,GAAkB,aAA0B,IAAI,CAAA;AAEtD,EAAA,MAAM,MAAA,GAAe,kBAAY,MAAM;AACrC,IAAA,QAAA,IAAW;AACX,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,EACpB,CAAA,EAAG,CAAC,QAAA,EAAU,YAAY,CAAC,CAAA;AAE3B,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,SAAA,IAAY;AACZ,IAAA,YAAA,CAAa,KAAK,CAAA;AAAA,EACpB,CAAA;AAEA,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,KAAA,GAAQ,CAAC,CAAA,KAAqB;AAClC,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU,MAAA,EAAO;AAAA,IACjC,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,KAAK,CAAA;AAC1C,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,KAAK,CAAA;AAAA,EAC5D,CAAA,EAAG,CAAC,IAAA,EAAM,MAAM,CAAC,CAAA;AAEjB,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,IAAA,EAAM,SAAA,CAAU,OAAA,EAAS,KAAA,EAAM;AAAA,EACrC,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,sDAAA,EAAuD,CAAA;AAAA,oBAClF,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,GAAG,MAAM,CAAA,MAAA,CAAA;AAAA,QAC1B,kBAAA,EAAkB,WAAA,GAAc,CAAA,EAAG,MAAM,CAAA,KAAA,CAAA,GAAU,MAAA;AAAA,QACnD,SAAA,EAAW,EAAA;AAAA,UACT,+IAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,qBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,QAAG,EAAA,EAAI,CAAA,EAAG,MAAM,CAAA,MAAA,CAAA,EAAU,SAAA,EAAU,yCAClC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,YACC,WAAA,wBACE,GAAA,EAAA,EAAE,EAAA,EAAI,GAAG,MAAM,CAAA,KAAA,CAAA,EAAS,SAAA,EAAU,+BAAA,EAChC,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,QAAA;AAAA,0BACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,SAAA;AAAA,gBACL,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAA;AAAA,gBACT,SAAA,EAAU,uTAAA;AAAA,gBAET,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BACA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,OAAA;AAAA,gBACT,SAAA,EAAW,EAAA;AAAA,kBACT,8NAAA;AAAA,kBACA,cACI,mGAAA,GACA;AAAA,iBACN;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EACF;AAAA;AAAA;AAAA;AACF,GAAA,EACF,CAAA;AAEJ","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface AlertDialogProps {\n  /** Whether the alert dialog is open. */\n  open: boolean;\n  /** Called when the dialog requests to close (Escape / a button). */\n  onOpenChange: (open: boolean) => void;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Confirm button label. */\n  confirmLabel?: string;\n  /** Cancel button label. */\n  cancelLabel?: string;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n  /** Style the confirm action as destructive. */\n  destructive?: boolean;\n  /** Extra content between the description and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A modal confirmation dialog for consequential actions. Unlike Dialog, it uses\n * role=\"alertdialog\", does not close on overlay click, and focuses Cancel by\n * default. Escape triggers cancel.\n */\nexport function AlertDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = \"Continue\",\n  cancelLabel = \"Cancel\",\n  onConfirm,\n  onCancel,\n  destructive = false,\n  children,\n  className,\n}: AlertDialogProps) {\n  const baseId = React.useId();\n  const cancelRef = React.useRef<HTMLButtonElement>(null);\n\n  const cancel = React.useCallback(() => {\n    onCancel?.();\n    onOpenChange(false);\n  }, [onCancel, onOpenChange]);\n\n  const confirm = () => {\n    onConfirm?.();\n    onOpenChange(false);\n  };\n\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") cancel();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, cancel]);\n\n  React.useEffect(() => {\n    if (open) cancelRef.current?.focus();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div aria-hidden className=\"absolute inset-0 animate-nx-fade-in bg-foreground/50\" />\n      <div\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={`${baseId}-title`}\n        aria-describedby={description ? `${baseId}-desc` : undefined}\n        className={cn(\n          \"relative z-10 flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-background p-6 shadow-lg outline-none animate-nx-fade-in\",\n          className,\n        )}\n      >\n        <div className=\"flex flex-col gap-1\">\n          <h2 id={`${baseId}-title`} className=\"text-lg font-semibold text-foreground\">\n            {title}\n          </h2>\n          {description && (\n            <p id={`${baseId}-desc`} className=\"text-sm text-muted-foreground\">\n              {description}\n            </p>\n          )}\n        </div>\n        {children}\n        <div className=\"flex items-center justify-end gap-2 pt-2\">\n          <button\n            ref={cancelRef}\n            type=\"button\"\n            onClick={cancel}\n            className=\"inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\"\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={confirm}\n            className={cn(\n              \"inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n              destructive\n                ? \"bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive\"\n                : \"bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring\",\n            )}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nucleux/alert-dialog",
+  "version": "0.2.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Modal confirmation dialog — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "alert-dialog"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/alert-dialog"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}