hazo_ui 2.6.5 → 2.7.0

package/README.md

@@ -158,6 +158,7 @@ interface HazoUiConfig {
 
 The following components support both global config and prop-level color overrides:
 - `HazoUiDialog` - via `headerBackgroundColor`, `headerTextColor`, `accentColor` props
+- `HazoUiConfirmDialog` - via `accentColor`, `confirmButtonColor` props
 - `HazoUiMultiFilterDialog` - via header/submit/cancel/clear color props
 - `HazoUiMultiSortDialog` - via header/submit/cancel/clear color props
 
@@ -183,6 +184,8 @@ The following components support both global config and prop-level color overrid
 
 - **[HazoUiDialog](#hazouidialog)** - A standardized dialog component with customizable animations, sizes, and theming. Features header/body/footer layout, color customization props, multiple size variants, and distinct animation presets (zoom, slide, fade).
 
+- **[HazoUiConfirmDialog](#hazouiconfirmdialog)** - A compact, opinionated confirmation dialog with accent top border, variant system (destructive, warning, info, success), async loading support, and configurable buttons. Perfect for delete confirmations, unsaved changes warnings, and simple acknowledgments.
+
 ---
 
 ## HazoUiMultiFilterDialog
@@ -1801,6 +1804,133 @@ function CustomHeightExample() {
 
 ---
 
+## HazoUiConfirmDialog
+
+A compact, opinionated confirmation dialog for destructive actions, warnings, and simple acknowledgments. Features an accent top border colored by variant, configurable buttons, and automatic async loading state management.
+
+### Basic Usage
+
+```tsx
+import { HazoUiConfirmDialog } from 'hazo_ui';
+
+// Destructive confirmation with two buttons
+<HazoUiConfirmDialog
+  open={showClear}
+  onOpenChange={setShowClear}
+  variant="destructive"
+  title="Clear Form Data"
+  description="This will permanently delete all uploaded files and reset the status. This action cannot be undone."
+  confirmLabel="Yes, clear everything"
+  onConfirm={handleClear}
+/>
+
+// OK-only acknowledgment
+<HazoUiConfirmDialog
+  open={showSuccess}
+  onOpenChange={setShowSuccess}
+  variant="info"
+  title="Upload Complete"
+  description="Your files have been uploaded successfully."
+  showCancelButton={false}
+  onConfirm={() => setShowSuccess(false)}
+/>
+
+// Async with auto-loading spinner
+<HazoUiConfirmDialog
+  open={showDelete}
+  onOpenChange={setShowDelete}
+  variant="destructive"
+  title="Delete Account"
+  description="This will permanently delete your account."
+  confirmLabel="Delete My Account"
+  onConfirm={async () => {
+    await deleteAccount();
+    // dialog auto-closes on resolve
+  }}
+/>
+
+// Custom children content
+<HazoUiConfirmDialog
+  open={showConfirm}
+  onOpenChange={setShowConfirm}
+  title="Confirm Submission"
+  onConfirm={handleSubmit}
+>
+  <div>
+    <p>You are about to submit:</p>
+    <ul>
+      <li>3 documents</li>
+      <li>2 images</li>
+    </ul>
+  </div>
+</HazoUiConfirmDialog>
+```
+
+### Variants
+
+| Variant | Top Border | Button Color | Use Case |
+|---------|-----------|-------------|----------|
+| `default` | Slate | Primary | General confirmations |
+| `destructive` | Red | Red | Delete, clear, remove |
+| `warning` | Amber | Amber | Unsaved changes, caution |
+| `info` | Blue | Blue | Notices, acknowledgments |
+| `success` | Green | Green | Completions, confirmations |
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | - | **Required.** Controls dialog visibility |
+| `onOpenChange` | `(open: boolean) => void` | - | **Required.** Called when dialog open state changes |
+| `title` | `string` | - | **Required.** Dialog title text |
+| `description` | `string` | - | Simple text description (alternative to children) |
+| `children` | `ReactNode` | - | Custom content (overrides description if both provided) |
+| `variant` | `ConfirmDialogVariant` | `'default'` | Color variant preset |
+| `confirmLabel` | `string` | `'Confirm'` / `'OK'` | Confirm button text. Defaults to "OK" when `showCancelButton={false}` |
+| `cancelLabel` | `string` | `'Cancel'` | Cancel button text |
+| `showCancelButton` | `boolean` | `true` | Whether to show the cancel button |
+| `onConfirm` | `() => void \| Promise<void>` | - | **Required.** Called on confirm. If returns Promise, auto-shows loading spinner |
+| `onCancel` | `() => void` | - | Called on cancel (before dialog closes) |
+| `loading` | `boolean` | - | External loading state (overrides async auto-detection) |
+| `disabled` | `boolean` | `false` | Disable confirm button |
+| `accentColor` | `string` | - | Override top border color |
+| `confirmButtonColor` | `string` | - | Override confirm button background color |
+| `openAnimation` | `AnimationPreset \| string` | `'zoom'` | Dialog open animation |
+| `closeAnimation` | `AnimationPreset \| string` | `'zoom'` | Dialog close animation |
+
+### Async Loading
+
+When `onConfirm` returns a Promise, the component automatically:
+1. Shows a spinner on the confirm button
+2. Disables both buttons
+3. Closes dialog on resolve
+4. Restores buttons on reject (dialog stays open)
+
+Use the `loading` prop to override this behavior with external control.
+
+### Custom Colors
+
+```tsx
+<HazoUiConfirmDialog
+  accentColor="#7c3aed"
+  confirmButtonColor="#7c3aed"
+  title="Custom Styled"
+  description="Purple accent and button colors."
+  onConfirm={handleConfirm}
+  open={open}
+  onOpenChange={setOpen}
+/>
+```
+
+### Accessibility
+
+- Focus trap within dialog (Radix)
+- ESC closes dialog
+- Cancel button receives initial focus for destructive/warning variants (prevents accidental confirmation)
+- Proper `aria-labelledby` and `aria-describedby` via Radix primitives
+
+---
+
 ## HazoUiDialog
 
 A flexible, standardized dialog component with customizable animations, sizes, and theming. Built on Radix UI Dialog primitives with a consistent header/body/footer layout.

package/dist/index.cjs

@@ -341,6 +341,7 @@ var DialogTitle = React27__namespace.forwardRef(({ className, ...props }, ref) =
     ref,
     className: cn(
       "text-lg font-semibold leading-none tracking-tight",
+      "break-words [overflow-wrap:anywhere]",
       className
     ),
     ...props
@@ -6393,7 +6394,7 @@ function HazoUiDialog({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "cls_dialog_header_title px-6 pt-6 pb-3",
+                      className: cn("cls_dialog_header_title px-6 pt-6 pb-3", showCloseButton && "pr-10"),
                       style: {
                         ...finalHeaderBackgroundColor && { backgroundColor: finalHeaderBackgroundColor },
                         ...finalHeaderTextColor && { color: finalHeaderTextColor }
@@ -6424,6 +6425,7 @@ function HazoUiDialog({
                   "cls_dialog_header shrink-0",
                   !headerBar && "p-6 pb-4",
                   has_merged_variant_header && "pb-3",
+                  showCloseButton && "pr-10",
                   headerClassName
                 ),
                 style: headerStyles,
@@ -6506,10 +6508,183 @@ function HazoUiDialog({
     )
   ] }) });
 }
+var CONFIRM_VARIANT_PRESETS = {
+  destructive: {
+    accent_color: "rgb(220, 38, 38)",
+    confirm_button_color: "rgb(220, 38, 38)",
+    overlay_class_name: "bg-red-950/50"
+  },
+  warning: {
+    accent_color: "rgb(245, 158, 11)",
+    confirm_button_color: "rgb(245, 158, 11)",
+    overlay_class_name: "bg-yellow-950/50"
+  },
+  info: {
+    accent_color: "rgb(37, 99, 235)",
+    confirm_button_color: "rgb(37, 99, 235)",
+    overlay_class_name: "bg-blue-950/50"
+  },
+  success: {
+    accent_color: "rgb(22, 163, 74)",
+    confirm_button_color: "rgb(22, 163, 74)",
+    overlay_class_name: "bg-green-950/50"
+  }
+};
+var ANIMATION_PRESETS2 = {
+  zoom: { open: "animate-dialog-zoom", close: "animate-dialog-zoom" },
+  slide: { open: "animate-dialog-slide-bottom", close: "animate-dialog-slide-bottom" },
+  fade: { open: "animate-dialog-fade", close: "animate-dialog-fade" },
+  bounce: { open: "animate-dialog-bounce", close: "animate-dialog-bounce" },
+  "scale-up": { open: "animate-dialog-scale", close: "animate-dialog-scale" },
+  flip: { open: "animate-dialog-flip", close: "animate-dialog-flip" },
+  "slide-left": { open: "animate-dialog-slide-left", close: "animate-dialog-slide-left" },
+  "slide-right": { open: "animate-dialog-slide-right", close: "animate-dialog-slide-right" },
+  "slide-top": { open: "animate-dialog-slide-top", close: "animate-dialog-slide-top" },
+  none: { open: "", close: "" }
+};
+function resolve_animation_classes(open_anim = "zoom", close_anim = "zoom") {
+  const open_classes = open_anim in ANIMATION_PRESETS2 ? ANIMATION_PRESETS2[open_anim].open : open_anim;
+  const close_classes = close_anim in ANIMATION_PRESETS2 ? ANIMATION_PRESETS2[close_anim].close : close_anim;
+  return `${open_classes} ${close_classes}`;
+}
+function HazoUiConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  variant = "default",
+  confirmLabel,
+  cancelLabel = "Cancel",
+  showCancelButton = true,
+  onConfirm,
+  onCancel,
+  loading: external_loading,
+  disabled = false,
+  accentColor,
+  confirmButtonColor,
+  openAnimation = "zoom",
+  closeAnimation = "zoom"
+}) {
+  const [internal_loading, set_internal_loading] = React27__namespace.useState(false);
+  const config = get_hazo_ui_config();
+  const variant_preset = variant !== "default" ? CONFIRM_VARIANT_PRESETS[variant] : void 0;
+  const is_loading = external_loading ?? internal_loading;
+  const resolved_confirm_label = confirmLabel ?? (showCancelButton ? "Confirm" : "OK");
+  const resolved_accent_color = accentColor ?? variant_preset?.accent_color ?? "rgb(148, 163, 184)";
+  const resolved_confirm_button_color = confirmButtonColor ?? variant_preset?.confirm_button_color ?? config.submit_button_background_color;
+  const cancel_button_styles = {
+    ...config.cancel_button_background_color && { backgroundColor: config.cancel_button_background_color },
+    ...config.cancel_button_text_color && { color: config.cancel_button_text_color },
+    ...config.cancel_button_border_color && { borderColor: config.cancel_button_border_color }
+  };
+  const confirm_button_styles = {
+    ...resolved_confirm_button_color && {
+      backgroundColor: resolved_confirm_button_color,
+      borderColor: resolved_confirm_button_color,
+      color: "white"
+    }
+  };
+  const animation_classes = resolve_animation_classes(openAnimation, closeAnimation);
+  const handle_confirm = async () => {
+    try {
+      const result = onConfirm();
+      if (result instanceof Promise) {
+        set_internal_loading(true);
+        await result;
+      }
+      onOpenChange(false);
+    } catch {
+    } finally {
+      set_internal_loading(false);
+    }
+  };
+  const handle_cancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+  const cancel_ref = React27__namespace.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogOverlay,
+      {
+        className: cn(
+          "cls_confirm_dialog_overlay",
+          variant_preset?.overlay_class_name
+        ),
+        style: { backdropFilter: "blur(4px)" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        className: cn(
+          "cls_confirm_dialog_content",
+          "fixed left-[50%] top-[50%] z-50",
+          "translate-x-[-50%] translate-y-[-50%]",
+          "bg-background shadow-lg",
+          "duration-200",
+          animation_classes,
+          "overflow-hidden",
+          "focus:outline-none"
+        ),
+        style: {
+          width: "min(90vw, 420px)",
+          borderRadius: "12px",
+          borderTop: `4px solid ${resolved_accent_color}`,
+          boxShadow: "0 20px 60px rgba(0,0,0,0.15)"
+        },
+        onOpenAutoFocus: (e) => {
+          if ((variant === "destructive" || variant === "warning") && showCancelButton && cancel_ref.current) {
+            e.preventDefault();
+            cancel_ref.current.focus();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_confirm_dialog_body px-6 pt-7 pb-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "cls_confirm_dialog_title text-[17px] font-semibold text-foreground mb-2.5", children: title }),
+            children ? /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_confirm_dialog_children text-sm text-muted-foreground leading-relaxed", children }) }) : description ? /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Description, { className: "cls_confirm_dialog_description text-sm text-muted-foreground leading-relaxed", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cls_confirm_dialog_separator border-t border-border" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cls_confirm_dialog_actions px-6 py-4 flex justify-end gap-3", children: [
+            showCancelButton && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                ref: cancel_ref,
+                type: "button",
+                className: "cls_confirm_cancel_button",
+                variant: "outline",
+                onClick: handle_cancel,
+                disabled: is_loading,
+                style: cancel_button_styles,
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                type: "button",
+                className: "cls_confirm_action_button",
+                onClick: handle_confirm,
+                disabled: is_loading || disabled,
+                style: confirm_button_styles,
+                children: [
+                  is_loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                  resolved_confirm_label
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
 
 exports.CommandNodeExtension = CommandNodeExtension;
 exports.CommandPill = CommandPill;
 exports.CommandPopover = CommandPopover;
+exports.HazoUiConfirmDialog = HazoUiConfirmDialog;
 exports.HazoUiDialog = HazoUiDialog;
 exports.HazoUiDialogClose = DialogClose;
 exports.HazoUiDialogContent = DialogContent;