@godxjp/ui 18.15.3 → 19.0.0

package/dist/components/data-entry/tree-select.js

@@ -189,14 +189,14 @@ function TreeSelectRoot({
           disabled,
           className: cn(
             "w-full justify-between font-normal",
-            allowClear && displayKeys.length > 0 && !disabled && "pe-10",
+            allowClear && displayKeys.length > 0 && !disabled && "ui-tree-select-trigger-affixed",
             controlOpenRingClass,
             !displayKeys.length && "text-muted-foreground",
             className
           ),
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: displayKeys.length ? displayLabel : resolvedPlaceholder }),
-            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: !(allowClear && displayKeys.length > 0 && !disabled) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 opacity-50", "aria-hidden": "true" }) })
+            /* @__PURE__ */ jsx("span", { className: "ms-2 flex shrink-0 items-center", children: !(allowClear && displayKeys.length > 0 && !disabled) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ui-tree-select-chevron", "aria-hidden": "true" }) })
           ]
         }
       ) }),
@@ -205,13 +205,13 @@ function TreeSelectRoot({
         {
           type: "button",
           "aria-label": t("dataEntry.treeSelect.clear"),
-          className: "absolute end-3 top-1/2 z-10 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+          className: "ui-tree-select-clear",
           onClick: clearValue,
-          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(X, { className: "ui-control-affix-icon", "aria-hidden": "true" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: [
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "ui-tree-select-popover", align: "start", children: [
       showSearch && /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
         CommandInput,
         {
@@ -220,14 +220,14 @@ function TreeSelectRoot({
           onValueChange: setSearch
         }
       ) }),
-      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ScrollArea, { className: "ui-tree-select-list", children: /* @__PURE__ */ jsx(
         "div",
         {
           id: treeId,
           role: "tree",
           "aria-multiselectable": Boolean(checkable) || Boolean(multiple),
-          className: "p-1",
-          children: visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.treeSelect.empty") }) : visible.map(({ node, depth, hasChildren }) => {
+          className: "ui-tree-select-panel",
+          children: visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ui-tree-select-empty", children: t("dataEntry.treeSelect.empty") }) : visible.map(({ node, depth, hasChildren }) => {
             const expanded = expandedKeys.has(node.value);
             const isSelected = selected.includes(node.value);
             return /* @__PURE__ */ jsxs(
@@ -242,14 +242,10 @@ function TreeSelectRoot({
                 "aria-selected": isSelected,
                 onFocus: () => setActiveKey(node.value),
                 onKeyDown: (event) => onTreeItemKeyDown(event, node, hasChildren, expanded),
-                className: cn(
-                  "flex items-center rounded-sm py-1.5 pe-2 text-sm outline-none",
-                  "hover:bg-accent hover:text-accent-foreground",
-                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-1",
-                  isSelected && "bg-accent/60",
-                  node.disabled && "pointer-events-none opacity-50"
-                ),
-                style: { paddingInlineStart: `${depth * 1.25 + 0.5}rem` },
+                "data-selected": isSelected ? "true" : "false",
+                "data-disabled": node.disabled ? "" : void 0,
+                className: "ui-tree-select-row ui-focus-ring",
+                style: { "--tree-select-depth": depth },
                 children: [
                   /* @__PURE__ */ jsx(
                     "button",
@@ -257,15 +253,13 @@ function TreeSelectRoot({
                       type: "button",
                       tabIndex: -1,
                       "aria-label": expanded ? t("dataEntry.treeSelect.collapse") : t("dataEntry.treeSelect.expand"),
-                      className: cn(
-                        "me-1 flex size-5 shrink-0 items-center justify-center rounded-sm",
-                        !hasChildren && "invisible"
-                      ),
+                      "data-leaf": hasChildren ? void 0 : "",
+                      className: "ui-tree-select-toggle",
                       onClick: () => toggleExpand(node.value),
-                      children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+                      children: expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ui-tree-select-toggle-icon", "aria-hidden": "true" })
                     }
                   ),
-                  checkable ? /* @__PURE__ */ jsxs("label", { className: "flex flex-1 cursor-pointer items-center gap-2", children: [
+                  checkable ? /* @__PURE__ */ jsxs("label", { className: "ui-tree-select-label", children: [
                     /* @__PURE__ */ jsx(
                       Checkbox,
                       {

package/dist/components/data-entry/upload-crop-dialog.js

@@ -52,7 +52,7 @@ function UploadCropDialog({ open, onOpenChange, file, onConfirm }) {
     onConfirm(cropped);
     onOpenChange(false);
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-sm", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[var(--upload-crop-dialog-max-width)]", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsx(DialogTitle, { children: t("dataEntry.upload.cropTitle") }),
       /* @__PURE__ */ jsx(DialogDescription, { children: t("dataEntry.upload.cropDescription") })
@@ -62,7 +62,7 @@ function UploadCropDialog({ open, onOpenChange, file, onConfirm }) {
         "div",
         {
           className: cn(
-            "bg-muted relative mx-auto size-48 overflow-hidden rounded-full border",
+            "bg-muted relative mx-auto size-[var(--upload-crop-preview-size)] overflow-hidden rounded-[var(--upload-crop-preview-radius)] border",
             "flex items-center justify-center"
           ),
           children: src ? /* @__PURE__ */ jsx(
@@ -71,13 +71,13 @@ function UploadCropDialog({ open, onOpenChange, file, onConfirm }) {
               ref: imgRef,
               src,
               alt: "",
-              className: "size-full object-cover transition-transform duration-150",
+              className: "size-full object-cover transition-transform duration-[var(--duration-fast)]",
               style: { transform: `scale(${scale})` }
             }
           ) : null
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs px-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs px-[var(--upload-crop-zoom-space-inline)]", children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: t("dataEntry.upload.cropZoom") }),
         /* @__PURE__ */ jsx(
           Slider,

package/dist/components/data-entry/upload.d.ts

@@ -4,4 +4,4 @@ export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadV
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, triggerSize, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;

package/dist/components/data-entry/upload.js

@@ -76,6 +76,7 @@ async function runUpload(file, item, onUpload, setItems) {
 function Upload({
   variant = "dropzone",
   triggerSize,
+  triggerVariant = "outline",
   value,
   defaultValue,
   onValueChange,
@@ -197,15 +198,13 @@ function Upload({
             setDragActive(false);
             pickFiles(e.dataTransfer.files);
           },
-          className: cn(
-            "cursor-pointer rounded-lg border-2 border-dashed p-10 text-center transition-colors",
-            dragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/50",
-            disabled && "pointer-events-none opacity-50"
-          ),
+          "data-drag-active": dragActive ? "" : void 0,
+          "data-disabled": disabled ? "" : void 0,
+          className: "ui-upload-dropzone",
           children: [
-            /* @__PURE__ */ jsx(UploadIcon, { className: "text-muted-foreground mx-auto size-10", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: t("dataEntry.upload.dropzoneHint") }),
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: t("dataEntry.upload.dropzoneMeta") })
+            /* @__PURE__ */ jsx(UploadIcon, { className: "ui-upload-dropzone-icon", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-hint", children: t("dataEntry.upload.dropzoneHint") }),
+            /* @__PURE__ */ jsx("p", { className: "ui-upload-dropzone-meta", children: t("dataEntry.upload.dropzoneMeta") })
           ]
         }
       ),
@@ -222,13 +221,20 @@ function Upload({
         Button,
         {
           type: "button",
-          variant: "outline",
+          variant: triggerVariant,
           size: triggerSize,
           disabled,
           onClick: openPicker,
           "aria-label": iconOnly ? typeof label === "string" ? label : void 0 : void 0,
           children: [
-            /* @__PURE__ */ jsx(UploadIcon, { className: iconOnly ? "size-4" : "me-2 size-4", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx(
+              UploadIcon,
+              {
+                className: "ui-upload-trigger-icon",
+                "data-with-label": iconOnly ? void 0 : "",
+                "aria-hidden": "true"
+              }
+            ),
             iconOnly ? null : label
           ]
         }
@@ -238,7 +244,7 @@ function Upload({
   }
   if (variant === "picture-card") {
     const canAdd = maxCount == null || items.length < maxCount;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-3", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-upload-grid", className), children: [
       hiddenInput,
       liveRegion,
       items.map((item2) => /* @__PURE__ */ jsx(
@@ -255,15 +261,12 @@ function Upload({
           type: "button",
           disabled,
           onClick: openPicker,
-          className: cn(
-            "flex size-24 flex-col items-center justify-center rounded-md border border-dashed",
-            "text-muted-foreground hover:border-primary hover:text-primary transition-colors",
-            disabled && "pointer-events-none opacity-50"
-          ),
+          "data-disabled": disabled ? "" : void 0,
+          className: "ui-upload-tile-add",
           "aria-label": t("dataEntry.upload.addImage"),
           children: [
-            /* @__PURE__ */ jsx(ImagePlus, { className: "size-6", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs", children: t("dataEntry.upload.addImage") })
+            /* @__PURE__ */ jsx(ImagePlus, { className: "ui-upload-tile-add-icon", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "ui-upload-tile-add-label", children: t("dataEntry.upload.addImage") })
           ]
         }
       )
@@ -271,23 +274,23 @@ function Upload({
   }
   if (variant === "picture") {
     const item2 = draft.state.display;
-    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm max-w-xs", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm ui-upload-picture", className), children: [
       hiddenInput,
       liveRegion,
-      item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-md border", children: [
-        /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "max-h-48 w-full object-cover" }),
-        item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-sm", children: t("dataEntry.upload.uploading") }),
-        item2.pendingReplace && /* @__PURE__ */ jsx("div", { className: "bg-warning text-warning-foreground absolute start-2 top-2 rounded px-2 py-0.5 text-xs", children: t("dataEntry.upload.pendingReplace") })
+      item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "ui-upload-picture-frame", children: [
+        /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "ui-upload-picture-img" }),
+        item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay ui-upload-picture-overlay", children: t("dataEntry.upload.uploading") }),
+        item2.pendingReplace && /* @__PURE__ */ jsx("div", { className: "ui-upload-picture-badge", children: t("dataEntry.upload.pendingReplace") })
       ] }) : /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           disabled,
           onClick: openPicker,
-          className: "text-muted-foreground hover:border-primary flex h-32 w-full flex-col items-center justify-center rounded-md border border-dashed",
+          className: "ui-upload-picture-empty",
           children: [
             /* @__PURE__ */ jsx(ImagePlus, { className: controlIconClass, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: "mt-2 text-sm", children: t("dataEntry.upload.addImage") })
+            /* @__PURE__ */ jsx("span", { className: "ui-upload-picture-empty-label", children: t("dataEntry.upload.addImage") })
           ]
         }
       ),
@@ -324,16 +327,13 @@ function Upload({
           type: "button",
           disabled,
           onClick: openPicker,
-          className: cn(
-            "border-border bg-muted relative size-24 overflow-hidden rounded-full border-2",
-            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
-            item?.pendingDelete && "opacity-40",
-            disabled && "pointer-events-none opacity-50"
-          ),
+          "data-pending-delete": item?.pendingDelete ? "" : void 0,
+          "data-disabled": disabled ? "" : void 0,
+          className: "ui-upload-avatar ui-focus-ring",
           "aria-label": t("dataEntry.upload.avatarLabel"),
           children: [
-            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex size-full items-center justify-center", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
-            !disabled && /* @__PURE__ */ jsx("span", { className: "text-2xs absolute inset-x-0 bottom-0 bg-black/70 py-1 text-center text-white", children: t("dataEntry.upload.change") })
+            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-placeholder", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
+            !disabled && /* @__PURE__ */ jsx("span", { className: "ui-upload-avatar-change", children: t("dataEntry.upload.change") })
           ]
         }
       ),
@@ -343,9 +343,9 @@ function Upload({
           type: "button",
           disabled,
           onClick: () => draft.markRemove(),
-          className: "bg-background hover:bg-destructive hover:text-destructive-foreground absolute -end-1 -top-1 rounded-full border p-1 shadow-sm",
+          className: "ui-upload-avatar-remove",
           "aria-label": t("dataEntry.upload.removeAvatar"),
-          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5", "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx(Trash2, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
         }
       )
     ] }),
@@ -360,16 +360,16 @@ function UploadDraftActions({
   const { t } = useTranslation();
   const { state, undoRemove, undoReplace } = draft;
   if (state.canUndoRemove) {
-    return /* @__PURE__ */ jsxs("div", { className: "border-destructive/40 bg-destructive/5 flex flex-wrap items-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "ui-upload-draft-undo", children: [
       /* @__PURE__ */ jsx("span", { className: "text-destructive", children: t("dataEntry.upload.markedForDelete") }),
       /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: undoRemove, children: [
-        /* @__PURE__ */ jsx(RotateCcw, { className: "me-1 size-3.5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(RotateCcw, { className: "ui-upload-draft-icon", "aria-hidden": "true" }),
         t("dataEntry.upload.undo")
       ] })
     ] });
   }
   if (state.canUndoReplace) {
-    return /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-2 text-sm", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "ui-upload-draft-hint", children: [
       /* @__PURE__ */ jsx("span", { children: t("dataEntry.upload.pendingReplaceHint") }),
       /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled, onClick: undoReplace, children: t("dataEntry.upload.undo") }),
       /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: onPick, children: t("dataEntry.upload.change") })
@@ -379,17 +379,17 @@ function UploadDraftActions({
 }
 function UploadPictureCard({ item, onRemove }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxs("div", { className: "bg-muted relative size-24 overflow-hidden rounded-md border", children: [
-    item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex size-full items-center justify-center text-xs", children: "\u2026" }),
-    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-xs", children: "\u2026" }),
+  return /* @__PURE__ */ jsxs("div", { className: "ui-upload-tile", children: [
+    item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "ui-upload-avatar-image" }) : /* @__PURE__ */ jsx("div", { className: "ui-upload-tile-placeholder", children: "\u2026" }),
+    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ui-upload-overlay", children: "\u2026" }),
     onRemove && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: onRemove,
-        className: "bg-background/90 hover:bg-destructive hover:text-destructive-foreground absolute end-1 top-1 rounded-full p-0.5 shadow",
+        className: "ui-upload-tile-remove",
         "aria-label": t("dataEntry.upload.removeImage"),
-        children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-upload-remove-icon", "aria-hidden": "true" })
       }
     )
   ] });
@@ -399,8 +399,8 @@ function UploadFileList({
   onRemove
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 rounded-md border px-3 py-2 text-sm", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "ui-upload-row", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-upload-row-main", children: [
       /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
       /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
         formatBytes(item.size),
@@ -424,7 +424,7 @@ function UploadFileList({
         variant: "ghost",
         "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
         onClick: () => onRemove(item.uid),
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(X, { className: "ui-upload-row-icon", "aria-hidden": "true" })
       }
     )
   ] }, item.uid)) });

package/dist/components/feedback/alert.js

@@ -12,7 +12,6 @@ import {
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { humanError } from "../../lib/format.js";
-import { cn } from "../../lib/utils.js";
 import { Flex } from "../layout/flex.js";
 import { Button } from "../general/button.js";
 const AlertContext = React.createContext("default");
@@ -52,9 +51,9 @@ const AlertBase = React.forwardRef(
                 void onDismiss();
               },
               "data-slot": "alert-dismiss",
-              className: "ring-offset-background focus-visible:ring-ring transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+              className: "ui-focus-ring",
               "aria-label": t("feedback.alert.dismiss"),
-              children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx(X, { className: "ui-alert-dismiss-icon", "aria-hidden": "true" })
             }
           )
         ]
@@ -71,15 +70,9 @@ const AlertTitle = React.forwardRef(
 );
 AlertTitle.displayName = "AlertTitle";
 const AlertContent = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-content",
-      className: cn("min-w-0 flex-1", className),
-      ...props
-    }
-  )
+  // `min-w-0 flex-1` moved to alert-layout.css [data-slot="alert-content"] — same box, but a
+  // consumer className now overrides it from the utilities layer instead of tying with it.
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "alert-content", className, ...props })
 );
 AlertContent.displayName = "AlertContent";
 const AlertDescription = React.forwardRef(
@@ -110,7 +103,7 @@ function RetryButton({ onRetry }) {
         void onRetry();
       },
       children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
         t("common.retry")
       ] })
     }
@@ -144,7 +137,7 @@ function AlertQueryError({
           void onAuthAction();
         },
         children: /* @__PURE__ */ jsxs(Flex, { direction: "row", wrap: true, align: "center", gap: "xs", children: [
-          /* @__PURE__ */ jsx(LogIn, { className: "size-4", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(LogIn, { "aria-hidden": "true" }),
           t("query.error.action.signIn")
         ] })
       }

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

@@ -21,18 +21,18 @@ interface DialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     extra?: React.ReactNode;
     tone?: ToneProp;
 }
-declare const DialogHeader: {
-    ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-declare const DialogBody: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
-declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
+declare function DialogHeader({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
+declare namespace DialogHeader {
+    var displayName: string;
+}
+declare function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace DialogBody {
+    var displayName: string;
+}
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace DialogFooter {
+    var displayName: string;
+}
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 type AlertDialogRootProps = React.ComponentProps<typeof AlertDialogPrimitive.Root> & {};
@@ -55,14 +55,14 @@ declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDial
     showClose?: boolean;
     showCloseButton?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const AlertDialogHeader: {
-    ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
-    displayName: string;
-};
-declare const AlertDialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    displayName: string;
-};
+declare function AlertDialogHeader({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
+declare namespace AlertDialogHeader {
+    var displayName: string;
+}
+declare function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare namespace AlertDialogFooter {
+    var displayName: string;
+}
 declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 /** Confirm mode — primary action (maps to Radix AlertDialogAction). */
@@ -89,18 +89,9 @@ export declare const Dialog: typeof DialogRoot & {
         showCloseButton?: boolean;
         overlayClassName?: string;
     } & React.RefAttributes<HTMLDivElement>>;
-    Header: {
-        ({ className, title, subtitle, extra, tone, children, ...props }: DialogHeaderProps): React.JSX.Element;
-        displayName: string;
-    };
-    Body: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-        displayName: string;
-    };
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
     Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
     Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
     Close: typeof DialogClose;

package/dist/components/feedback/dialog.js

@@ -65,9 +65,9 @@ const DialogContent = React.forwardRef(
               DialogPrimitive.Close,
               {
                 "data-slot": "dialog-close",
-                className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+                className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
                 children: [
-                  /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("feedback.alert.dismiss") })
                 ]
               }
@@ -95,12 +95,14 @@ const DialogHeader = ({
       "data-tone": tone,
       className: cn(overlayHeaderToneClass[tone], className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--space-3)] pe-[var(--space-8)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+      children: children ?? // Chrome rhythm lives in dialog-layout.css (`.ui-dialog-*`, mirroring `.ui-sheet-*`), so
+      // the two overlay siblings retune from one --dialog-*/--sheet-* set instead of literals.
+      /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-block", children: [
           title != null && /* @__PURE__ */ jsx(DialogTitle, { children: title }),
           subtitle != null && /* @__PURE__ */ jsx(DialogDescription, { children: subtitle })
         ] }),
-        extra != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-[var(--space-2)] whitespace-nowrap", children: extra })
+        extra != null && /* @__PURE__ */ jsx("div", { className: "ui-dialog-extra", children: extra })
       ] })
     }
   );
@@ -169,9 +171,10 @@ const AlertDialogContent = React.forwardRef(({ className, children, showClose, s
           "button",
           {
             type: "button",
-            className: "ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
+            "data-slot": "dialog-close",
+            className: "ui-focus-ring transition-opacity focus:outline-hidden disabled:pointer-events-none",
             "aria-label": t("feedback.alert.dismiss"),
-            children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx(X, { className: "ui-dialog-close-icon", "aria-hidden": "true" })
           }
         ) }) : null
       ]
@@ -195,12 +198,12 @@ const AlertDialogHeader = ({
       "data-tone": tone,
       className: cn(overlayHeaderToneClass[tone], className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-[var(--space-3)] pe-[var(--space-8)]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-[var(--space-1)]", children: [
+      children: children ?? /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-dialog-title-block", children: [
           title != null && /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
           subtitle != null && /* @__PURE__ */ jsx(AlertDialogDescription, { children: subtitle })
         ] }),
-        extra != null && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-[var(--space-2)] whitespace-nowrap", children: extra })
+        extra != null && /* @__PURE__ */ jsx("div", { className: "ui-dialog-extra", children: extra })
       ] })
     }
   );
@@ -289,7 +292,7 @@ function AlertDialog({
       if (stepUp) {
         setStepUpFailed(false);
         setVerifying(true);
-        let ok = false;
+        let ok;
         try {
           ok = await stepUp();
         } catch {
@@ -324,7 +327,7 @@ function AlertDialog({
             description ? /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, { "data-slot": "dialog-description", children: description }) : null
           ] }),
           needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "text-sm", children: t("common.typeToConfirm", { phrase }) }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("common.typeToConfirm", { phrase }) }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -341,7 +344,7 @@ function AlertDialog({
               }
             )
           ] }),
-          stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "text-destructive text-sm", children: t("feedback.alert.stepUpFailed") }),
+          stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "ui-dialog-step-up-error", children: t("feedback.alert.stepUpFailed") }),
           /* @__PURE__ */ jsxs(DialogFooter, { children: [
             /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),
             /* @__PURE__ */ jsx(

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

@@ -21,7 +21,7 @@ export declare function SheetClose(props: React.ComponentProps<typeof DialogPrim
 export declare function SheetPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 export declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     showCloseButton?: boolean;