@nucleux/action-confirmation 0.1.1

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/action-confirmation
+
+ActionConfirmation — a guardrail before an agent takes a consequential action — 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/action-confirmation @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { ActionConfirmation } from "@nucleux/action-confirmation";
+```
+
+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,109 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var lucideReact = require('lucide-react');
+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
+var ActionConfirmation = React__namespace.forwardRef(
+  ({
+    title,
+    description,
+    variant = "destructive",
+    badge = "AI action",
+    icon,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const destructive = variant === "destructive";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alertdialog",
+        "aria-label": typeof title === "string" ? title : void 0,
+        className: utils.cn(
+          "flex flex-col gap-3 rounded-xl border bg-background p-5",
+          destructive ? "border-destructive/50" : "border-border",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: utils.cn(
+                  "mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4",
+                  destructive ? "bg-destructive/10 text-destructive" : "bg-warning/10 text-warning"
+                ),
+                children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex w-fit items-center rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground", children: badge }),
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground", children: title }),
+              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description }),
+              children
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                className: "inline-flex items-center rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onConfirm,
+                className: utils.cn(
+                  "inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-info text-info-foreground hover:bg-info/90"
+                ),
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ActionConfirmation.displayName = "ActionConfirmation";
+
+exports.ActionConfirmation = ActionConfirmation;
+//# 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","cn","jsx","AlertTriangle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,IAAM,kBAAA,GAA2BA,gBAAA,CAAA,UAAA;AAAA,EACtC,CACE;AAAA,IACE,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA,GAAU,aAAA;AAAA,IACV,KAAA,GAAQ,WAAA;AAAA,IACR,IAAA;AAAA,IACA,YAAA,GAAe,SAAA;AAAA,IACf,WAAA,GAAc,QAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,cAAc,OAAA,KAAY,aAAA;AAChC,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAY,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,MAAA;AAAA,QAChD,SAAA,EAAWC,QAAA;AAAA,UACT,yDAAA;AAAA,UACA,cAAc,uBAAA,GAA0B,eAAA;AAAA,UACxC;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWD,QAAA;AAAA,kBACT,0FAAA;AAAA,kBACA,cAAc,oCAAA,GAAuC;AAAA,iBACvD;AAAA,gBAEC,QAAA,EAAA,IAAA,oBAAQC,cAAA,CAACC,yBAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA,aAC7C;AAAA,4BACAH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EACZ,QAAA,EAAA;AAAA,cAAA,KAAA,oBACCE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6IAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,8BAEFA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,yCAAA,EAA2C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC9D,WAAA,oBAAeA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iCAAiC,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,cACzE;AAAA,aAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,0BACAF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,EAAA;AAAA,4BAAAE,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,QAAA;AAAA,gBACT,SAAA,EAAU,gOAAA;AAAA,gBAET,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BACAA,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAWD,QAAA;AAAA,kBACT,6JAAA;AAAA,kBACA,cACI,oEAAA,GACA;AAAA,iBACN;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport { AlertTriangle } from \"lucide-react\";\n\nexport type ActionConfirmationVariant = \"default\" | \"destructive\";\n\nexport interface ActionConfirmationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The action in question, e.g. `\"Send 18 emails?\"`. */\n  title: React.ReactNode;\n  /** What will happen / why it matters. */\n  description?: React.ReactNode;\n  /** Risk styling. `destructive` for irreversible/high-impact actions. */\n  variant?: ActionConfirmationVariant;\n  /** Badge text marking this as an agent action. Defaults to `\"AI action\"`. */\n  badge?: React.ReactNode;\n  /** Leading icon. Defaults to a warning triangle. */\n  icon?: React.ReactNode;\n  confirmLabel?: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n}\n\n/**\n * A guardrail shown before an agent performs a consequential or irreversible\n * action — states the action, its impact, and requires explicit confirmation.\n * Source: Figma \"Recovery / Verification\".\n */\nexport const ActionConfirmation = React.forwardRef<HTMLDivElement, ActionConfirmationProps>(\n  (\n    {\n      title,\n      description,\n      variant = \"destructive\",\n      badge = \"AI action\",\n      icon,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const destructive = variant === \"destructive\";\n    return (\n      <div\n        ref={ref}\n        role=\"alertdialog\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"flex flex-col gap-3 rounded-xl border bg-background p-5\",\n          destructive ? \"border-destructive/50\" : \"border-border\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-start gap-3\">\n          <span\n            className={cn(\n              \"mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4\",\n              destructive ? \"bg-destructive/10 text-destructive\" : \"bg-warning/10 text-warning\",\n            )}\n          >\n            {icon ?? <AlertTriangle aria-hidden=\"true\" />}\n          </span>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n            {badge && (\n              <span className=\"inline-flex w-fit items-center rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground\">\n                {badge}\n              </span>\n            )}\n            <h3 className=\"text-base font-semibold text-foreground\">{title}</h3>\n            {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n            {children}\n          </div>\n        </div>\n        <div className=\"flex items-center justify-end gap-2\">\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"inline-flex items-center rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            className={cn(\n              \"inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              destructive\n                ? \"bg-destructive text-destructive-foreground hover:bg-destructive/90\"\n                : \"bg-info text-info-foreground hover:bg-info/90\",\n            )}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    );\n  },\n);\nActionConfirmation.displayName = \"ActionConfirmation\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+type ActionConfirmationVariant = "default" | "destructive";
+interface ActionConfirmationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The action in question, e.g. `"Send 18 emails?"`. */
+    title: React.ReactNode;
+    /** What will happen / why it matters. */
+    description?: React.ReactNode;
+    /** Risk styling. `destructive` for irreversible/high-impact actions. */
+    variant?: ActionConfirmationVariant;
+    /** Badge text marking this as an agent action. Defaults to `"AI action"`. */
+    badge?: React.ReactNode;
+    /** Leading icon. Defaults to a warning triangle. */
+    icon?: React.ReactNode;
+    confirmLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+/**
+ * A guardrail shown before an agent performs a consequential or irreversible
+ * action — states the action, its impact, and requires explicit confirmation.
+ * Source: Figma "Recovery / Verification".
+ */
+declare const ActionConfirmation: React.ForwardRefExoticComponent<ActionConfirmationProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ActionConfirmation, type ActionConfirmationProps, type ActionConfirmationVariant };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+type ActionConfirmationVariant = "default" | "destructive";
+interface ActionConfirmationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The action in question, e.g. `"Send 18 emails?"`. */
+    title: React.ReactNode;
+    /** What will happen / why it matters. */
+    description?: React.ReactNode;
+    /** Risk styling. `destructive` for irreversible/high-impact actions. */
+    variant?: ActionConfirmationVariant;
+    /** Badge text marking this as an agent action. Defaults to `"AI action"`. */
+    badge?: React.ReactNode;
+    /** Leading icon. Defaults to a warning triangle. */
+    icon?: React.ReactNode;
+    confirmLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+/**
+ * A guardrail shown before an agent performs a consequential or irreversible
+ * action — states the action, its impact, and requires explicit confirmation.
+ * Source: Figma "Recovery / Verification".
+ */
+declare const ActionConfirmation: React.ForwardRefExoticComponent<ActionConfirmationProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ActionConfirmation, type ActionConfirmationProps, type ActionConfirmationVariant };

package/dist/index.js

@@ -0,0 +1,87 @@
+"use client";
+import * as React from 'react';
+import { cn } from '@nucleux/utils';
+import { AlertTriangle } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var ActionConfirmation = React.forwardRef(
+  ({
+    title,
+    description,
+    variant = "destructive",
+    badge = "AI action",
+    icon,
+    confirmLabel = "Confirm",
+    cancelLabel = "Cancel",
+    onConfirm,
+    onCancel,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const destructive = variant === "destructive";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alertdialog",
+        "aria-label": typeof title === "string" ? title : void 0,
+        className: cn(
+          "flex flex-col gap-3 rounded-xl border bg-background p-5",
+          destructive ? "border-destructive/50" : "border-border",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4",
+                  destructive ? "bg-destructive/10 text-destructive" : "bg-warning/10 text-warning"
+                ),
+                children: icon ?? /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+              badge && /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit items-center rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground", children: badge }),
+              /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-foreground", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }),
+              children
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                className: "inline-flex items-center rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onConfirm,
+                className: cn(
+                  "inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-info text-info-foreground hover:bg-info/90"
+                ),
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ActionConfirmation.displayName = "ActionConfirmation";
+
+export { ActionConfirmation };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AA6BO,IAAM,kBAAA,GAA2B,KAAA,CAAA,UAAA;AAAA,EACtC,CACE;AAAA,IACE,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA,GAAU,aAAA;AAAA,IACV,KAAA,GAAQ,WAAA;AAAA,IACR,IAAA;AAAA,IACA,YAAA,GAAe,SAAA;AAAA,IACf,WAAA,GAAc,QAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,cAAc,OAAA,KAAY,aAAA;AAChC,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,YAAA,EAAY,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,MAAA;AAAA,QAChD,SAAA,EAAW,EAAA;AAAA,UACT,yDAAA;AAAA,UACA,cAAc,uBAAA,GAA0B,eAAA;AAAA,UACxC;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,EAAA;AAAA,kBACT,0FAAA;AAAA,kBACA,cAAc,oCAAA,GAAuC;AAAA,iBACvD;AAAA,gBAEC,QAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA,aAC7C;AAAA,4BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EACZ,QAAA,EAAA;AAAA,cAAA,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6IAAA,EACb,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,8BAEF,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,yCAAA,EAA2C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC9D,WAAA,oBAAe,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iCAAiC,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,cACzE;AAAA,aAAA,EACH;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qCAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,QAAA;AAAA,gBACT,SAAA,EAAU,gOAAA;AAAA,gBAET,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BACA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAW,EAAA;AAAA,kBACT,6JAAA;AAAA,kBACA,cACI,oEAAA,GACA;AAAA,iBACN;AAAA,gBAEC,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EACF;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport { AlertTriangle } from \"lucide-react\";\n\nexport type ActionConfirmationVariant = \"default\" | \"destructive\";\n\nexport interface ActionConfirmationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The action in question, e.g. `\"Send 18 emails?\"`. */\n  title: React.ReactNode;\n  /** What will happen / why it matters. */\n  description?: React.ReactNode;\n  /** Risk styling. `destructive` for irreversible/high-impact actions. */\n  variant?: ActionConfirmationVariant;\n  /** Badge text marking this as an agent action. Defaults to `\"AI action\"`. */\n  badge?: React.ReactNode;\n  /** Leading icon. Defaults to a warning triangle. */\n  icon?: React.ReactNode;\n  confirmLabel?: React.ReactNode;\n  cancelLabel?: React.ReactNode;\n  onConfirm?: () => void;\n  onCancel?: () => void;\n}\n\n/**\n * A guardrail shown before an agent performs a consequential or irreversible\n * action — states the action, its impact, and requires explicit confirmation.\n * Source: Figma \"Recovery / Verification\".\n */\nexport const ActionConfirmation = React.forwardRef<HTMLDivElement, ActionConfirmationProps>(\n  (\n    {\n      title,\n      description,\n      variant = \"destructive\",\n      badge = \"AI action\",\n      icon,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const destructive = variant === \"destructive\";\n    return (\n      <div\n        ref={ref}\n        role=\"alertdialog\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"flex flex-col gap-3 rounded-xl border bg-background p-5\",\n          destructive ? \"border-destructive/50\" : \"border-border\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-start gap-3\">\n          <span\n            className={cn(\n              \"mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4\",\n              destructive ? \"bg-destructive/10 text-destructive\" : \"bg-warning/10 text-warning\",\n            )}\n          >\n            {icon ?? <AlertTriangle aria-hidden=\"true\" />}\n          </span>\n          <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n            {badge && (\n              <span className=\"inline-flex w-fit items-center rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-medium uppercase tracking-wide text-muted-foreground\">\n                {badge}\n              </span>\n            )}\n            <h3 className=\"text-base font-semibold text-foreground\">{title}</h3>\n            {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n            {children}\n          </div>\n        </div>\n        <div className=\"flex items-center justify-end gap-2\">\n          <button\n            type=\"button\"\n            onClick={onCancel}\n            className=\"inline-flex items-center rounded-lg border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            {cancelLabel}\n          </button>\n          <button\n            type=\"button\"\n            onClick={onConfirm}\n            className={cn(\n              \"inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              destructive\n                ? \"bg-destructive text-destructive-foreground hover:bg-destructive/90\"\n                : \"bg-info text-info-foreground hover:bg-info/90\",\n            )}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n    );\n  },\n);\nActionConfirmation.displayName = \"ActionConfirmation\";\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nucleux/action-confirmation",
+  "version": "0.1.1",
+  "type": "module",
+  "sideEffects": false,
+  "description": "ActionConfirmation — a guardrail before an agent takes a consequential action — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "action-confirmation"
+  ],
+  "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": {
+    "lucide-react": "^0.469.0",
+    "@nucleux/utils": "0.1.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/action-confirmation"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}