@godxjp/ui 23.4.8 → 23.4.9

package/dist/components/feedback/dialog.d.ts

@@ -142,7 +142,8 @@ declare const AlertDialogAction: typeof DialogAction;
 declare const AlertDialogCancel: typeof DialogCancel;
 /**
  * Preset: confirm / destructive / typed-challenge / step-up without compound markup. Both flows
- * force the destructive tone (button + soft header band).
+ * force the destructive shape: the confirm button plus antd's leading status glyph. The header
+ * surface stays untinted — see the note on `showDangerIcon` below.
  */
 declare function AlertDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, confirmPhrase, challenge, onConfirm, stepUp, keepOpenOnConfirm, pending, }: AlertDialogProp): React.JSX.Element;
 export declare const Dialog: typeof DialogRoot & {

package/dist/components/feedback/dialog.js

@@ -4,7 +4,7 @@ import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
-import { X } from "lucide-react";
+import { AlertCircle, X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
@@ -392,7 +392,7 @@ function AlertDialog({
   const needsPhrase = phrase != null && phrase.length > 0;
   const phraseMatches = !needsPhrase || typed === phrase;
   const effectiveVariant = needsPhrase ? "destructive" : variant;
-  const headerTone = effectiveVariant === "destructive" ? "destructive" : "default";
+  const showDangerIcon = effectiveVariant === "destructive";
   const resolvedConfirm = confirmLabel ?? (needsPhrase ? t("common.delete") : t("common.continue"));
   const resolvedCancel = cancelLabel ?? t("common.cancel");
   const busy = pending || verifying;
@@ -429,10 +429,13 @@ function AlertDialog({
     })();
   };
   return /* @__PURE__ */ jsx(AlertDialogRoot, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { tone: headerTone, children: [
-      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
-      description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
-    ] }),
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "ui-dialog-confirm-body", children: [
+      showDangerIcon && /* @__PURE__ */ jsx(AlertCircle, { className: "ui-dialog-confirm-icon", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("div", { className: "ui-dialog-confirm-text", children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+        description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
+      ] })
+    ] }) }),
     needsPhrase && /* @__PURE__ */ jsx(FormField, { id: inputId, label: t("common.typeToConfirm", { phrase }), children: /* @__PURE__ */ jsx(
       Input,
       {

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "23.4.8",
+  "version": "23.4.9",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/control.css

@@ -470,6 +470,10 @@
     fill: currentColor;
   }
 
+  .ui-radio[data-state="unchecked"] .ui-radio-icon {
+    visibility: hidden;
+  }
+
   .ui-switch:has(input[aria-invalid="true"]) {
     --tw-ring-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
     box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));

package/dist/styles/dialog-layout.css

@@ -123,7 +123,8 @@
     }
   }
 
-  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"] {
+  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"],
+  [data-slot="dialog-header"]:not([data-tone="default"]) {
     margin-inline: calc(-1 * var(--dialog-space-x));
     margin-block-start: calc(-1 * var(--dialog-space-y));
     padding: var(--dialog-space-y) var(--dialog-space-x);
@@ -222,6 +223,26 @@
   [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
     color: hsl(var(--foreground));
   }
+
+  .ui-dialog-confirm-body {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dialog-confirm-space-gap);
+  }
+
+  .ui-dialog-confirm-icon {
+    flex: none;
+    inline-size: var(--dialog-confirm-icon-size);
+    block-size: var(--dialog-confirm-icon-size);
+    color: hsl(var(--text-error));
+  }
+
+  .ui-dialog-confirm-text {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+    gap: var(--dialog-title-block-space-gap);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles/layout.css

@@ -716,6 +716,11 @@
     width: 100%;
   }
 
+  .ui-page-header-extra > .ui-flex[data-direction="row"] {
+    flex-wrap: wrap;
+    max-inline-size: 100%;
+  }
+
   .ui-page-header-title-row {
     display: flex;
     flex-wrap: wrap;
@@ -762,11 +767,6 @@
     .ui-page-header .ui-page-subtitle {
       font-size: var(--page-subtitle-font-size-compact);
     }
-
-    .ui-page-header-extra > .ui-flex[data-direction="row"] {
-      flex-wrap: wrap;
-      max-width: 100%;
-    }
   }
 
   @media (max-width: 639.98px) {

package/dist/tokens/components/feedback.css

@@ -36,6 +36,9 @@
   --dialog-title-block-space-gap: var(--space-1);
   --dialog-extra-space-gap: var(--space-2);
 
+  --dialog-confirm-icon-size: var(--icon-size-xl);
+  --dialog-confirm-space-gap: var(--space-3);
+
   --dialog-header-close-space-inline-end: var(--space-8);
 
   --dialog-close-rest-alpha: 0.7;

package/docs/feedback/danger-confirm.tsx

@@ -7,7 +7,8 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
 /**
  * DangerConfirm recipe (godxui#193) — high-stakes deletion built on the AlertDialog preset.
  * No new component: `challenge` gates the confirm button behind an exact typed slug, and `stepUp`
- * runs an async passkey / 2FA re-auth before onConfirm fires. Both force the destructive tone.
+ * runs an async passkey / 2FA re-auth before onConfirm fires. Both force the destructive shape
+ * (button + leading status glyph, untinted surface — antd `Modal.confirm` parity).
  * Mirrors DXS SCR-203 (org delete by slug) and SCR-209 (refund with step-up).
  */
 export default function Demo() {
@@ -25,8 +26,10 @@ export default function Demo() {
             <CardTitle level={2}>Organization delete · typed slug challenge</CardTitle>
             <CardDescription>
               The confirm button stays disabled until the operator types the exact organization slug
-              (<code>acme-inc</code>). A typed challenge always forces the destructive tone and a
-              soft danger header band.
+              (<code>acme-inc</code>). A typed challenge always forces the destructive shape: the
+              destructive confirm button and antd&rsquo;s leading status glyph. The header surface
+              stays untinted — the glyph is the signal, exactly as <code>Modal.confirm</code> does
+              it.
             </CardDescription>
           </CardHeader>
           <CardContent>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.8",
-  "godxUiMcp": "23.4.8",
+  "version": "23.4.9",
+  "godxUiMcp": "23.4.9",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",