hazo_ui 2.6.0 → 2.6.2

package/README.md

@@ -1707,6 +1707,27 @@ function CustomHeightExample() {
 
 A flexible, standardized dialog component with customizable animations, sizes, and theming. Built on Radix UI Dialog primitives with a consistent header/body/footer layout.
 
+### Two Usage Patterns
+
+HazoUiDialog offers two approaches depending on your needs:
+
+1. **Props-based API (HazoUiDialog)** - For simple confirmations, alerts, and standard forms with predefined header/body/footer layout
+2. **Compositional API (Primitives)** - For complex layouts with custom headers, tabs, avatars, and full layout control
+
+#### When to Use Each Approach
+
+**Use HazoUiDialog (props-based) when:**
+- You need a standard confirmation dialog
+- Your content fits a simple header/body/footer layout
+- You want quick implementation with minimal code
+- Examples: confirmations, alerts, simple forms
+
+**Use Compositional API (primitives) when:**
+- You need custom headers with avatars, icons, or complex layouts
+- Your dialog has tabs or multi-section content
+- You want full control over the dialog structure
+- Examples: client details with tabs, complex forms, custom workflows
+
 #### Features
 
 - **Flexible Sizing**: 5 size presets from small (400px) to full-width (98vw), plus custom sizing
@@ -1743,6 +1764,14 @@ interface HazoUiDialogProps {
   cancelButtonText?: string;           // default: "Cancel"
   showCancelButton?: boolean;          // default: true
 
+  // Action Button Enhancement
+  actionButtonLoading?: boolean;       // default: false - Shows spinner, disables button
+  actionButtonDisabled?: boolean;      // default: false - Disables action button
+  actionButtonIcon?: React.ReactNode;  // Icon before button text (replaced by spinner when loading)
+
+  // Custom Footer
+  footerContent?: React.ReactNode;     // Custom footer content (replaces default buttons)
+
   // Size Configuration
   sizeWidth?: string;                  // default: "min(90vw, 600px)"
   sizeHeight?: string;                 // default: "min(80vh, 800px)"
@@ -1776,7 +1805,9 @@ type AnimationPreset = 'zoom' | 'slide' | 'fade' | 'bounce' | 'scale-up' | 'flip
 type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
 ```
 
-#### Basic Usage
+#### Pattern 1: Basic Usage (Props-based API)
+
+For simple dialogs with standard layout:
 
 ```tsx
 import { HazoUiDialog } from 'hazo_ui';
@@ -1811,6 +1842,384 @@ function ConfirmDialog() {
 }
 ```
 
+#### Pattern 2: Compositional API (Complex Layouts)
+
+For dialogs with custom headers, tabs, or complex layouts:
+
+```tsx
+import {
+  HazoUiDialogRoot,
+  HazoUiDialogContent,
+  HazoUiDialogHeader,
+  HazoUiDialogTitle,
+  HazoUiDialogDescription,
+  HazoUiDialogFooter,
+} from 'hazo_ui';
+import { useState } from 'react';
+import { User } from 'lucide-react';
+
+function ClientDetailsDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('personal');
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>
+        Open Client Details
+      </button>
+
+      <HazoUiDialogRoot open={isOpen} onOpenChange={setIsOpen}>
+        <HazoUiDialogContent className="sm:max-w-2xl w-[90vw] h-[80vh] flex flex-col p-0">
+          {/* Custom Header with Avatar */}
+          <HazoUiDialogHeader className="bg-navbar text-navbar-foreground p-6 rounded-t-lg">
+            <div className="flex items-center gap-3">
+              <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
+                <User className="h-6 w-6 text-primary-foreground" />
+              </div>
+              <div>
+                <HazoUiDialogTitle className="text-white text-left">
+                  John Doe
+                </HazoUiDialogTitle>
+                <HazoUiDialogDescription className="text-white/80 text-left">
+                  john.doe@example.com
+                </HazoUiDialogDescription>
+              </div>
+            </div>
+          </HazoUiDialogHeader>
+
+          {/* Tabs Navigation */}
+          <div className="border-b px-6">
+            <div className="flex gap-4">
+              <button
+                onClick={() => setActiveTab('personal')}
+                className={`py-3 px-1 text-sm font-medium border-b-2 ${
+                  activeTab === 'personal'
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-muted-foreground'
+                }`}
+              >
+                Personal
+              </button>
+              <button
+                onClick={() => setActiveTab('address')}
+                className={`py-3 px-1 text-sm font-medium border-b-2 ${
+                  activeTab === 'address'
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-muted-foreground'
+                }`}
+              >
+                Address
+              </button>
+              <button
+                onClick={() => setActiveTab('contact')}
+                className={`py-3 px-1 text-sm font-medium border-b-2 ${
+                  activeTab === 'contact'
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-muted-foreground'
+                }`}
+              >
+                Contact
+              </button>
+            </div>
+          </div>
+
+          {/* Scrollable Tab Content */}
+          <div className="flex-1 overflow-y-auto p-6">
+            {activeTab === 'personal' && (
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium">Full Name</label>
+                  <input
+                    type="text"
+                    className="w-full px-3 py-2 border rounded-md mt-1"
+                  />
+                </div>
+                {/* More personal fields */}
+              </div>
+            )}
+            {activeTab === 'address' && (
+              <div className="space-y-4">
+                {/* Address fields */}
+              </div>
+            )}
+            {activeTab === 'contact' && (
+              <div className="space-y-4">
+                {/* Contact fields */}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <HazoUiDialogFooter className="p-6 border-t">
+            <button
+              onClick={() => setIsOpen(false)}
+              className="px-4 py-2 border rounded-md hover:bg-accent"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
+            >
+              Save Changes
+            </button>
+          </HazoUiDialogFooter>
+        </HazoUiDialogContent>
+      </HazoUiDialogRoot>
+    </>
+  );
+}
+```
+
+**Available Compositional Components:**
+
+```tsx
+import {
+  HazoUiDialogRoot,        // Root dialog container (replaces Dialog)
+  HazoUiDialogTrigger,     // Trigger button (optional)
+  HazoUiDialogContent,     // Dialog content wrapper
+  HazoUiDialogHeader,      // Header section
+  HazoUiDialogTitle,       // Title text
+  HazoUiDialogDescription, // Description text
+  HazoUiDialogFooter,      // Footer section
+  HazoUiDialogPortal,      // Portal wrapper
+  HazoUiDialogOverlay,     // Backdrop overlay
+  HazoUiDialogClose,       // Close button
+} from 'hazo_ui';
+```
+
+**Key Differences:**
+
+| Feature | Props-based API | Compositional API |
+|---------|----------------|-------------------|
+| **Layout** | Predefined header/body/footer | Build your own structure |
+| **Configuration** | Via props | Via component composition |
+| **Complexity** | Simple, quick | Flexible, powerful |
+| **Best for** | Confirmations, alerts | Tabs, avatars, custom layouts |
+| **Code** | Minimal | More verbose |
+
+**Compositional API Tips:**
+
+- Use `flex flex-col` on `HazoUiDialogContent` for layouts with headers/footers
+- Set `p-0` on `HazoUiDialogContent` and add padding to individual sections
+- Use `overflow-y-auto` on the scrollable content area
+- Apply `bg-navbar text-navbar-foreground` for dark headers
+- Use `border-t` on footer for visual separation
+
+#### Action Button States and Custom Footers
+
+The dialog supports enhanced action buttons with loading states, icons, and fully custom footers for complex UX scenarios.
+
+##### 1. Form Dialog with Loading State
+
+```tsx
+import { HazoUiDialog } from 'hazo_ui';
+import { useState } from 'react';
+
+function SaveFormDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await saveFormData();
+      setIsOpen(false);
+    } catch (error) {
+      console.error('Save failed:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <HazoUiDialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      title="Save Changes"
+      description="Your changes will be saved to the server."
+      actionButtonText={isSaving ? "Saving..." : "Save"}
+      actionButtonLoading={isSaving}
+      onConfirm={handleSave}
+    >
+      <p>Click Save to see the loading spinner and disabled button.</p>
+    </HazoUiDialog>
+  );
+}
+```
+
+##### 2. Confirmation Dialog with Icon
+
+```tsx
+import { HazoUiDialog } from 'hazo_ui';
+import { Send } from 'lucide-react';
+import { useState } from 'react';
+
+function SendEmailDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <HazoUiDialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      title="Send Email"
+      description="This will send the email to all recipients."
+      actionButtonText="Send Email"
+      actionButtonIcon={<Send className="h-4 w-4" />}
+      onConfirm={() => {
+        sendEmail();
+        setIsOpen(false);
+      }}
+    >
+      <p>The Send icon appears before the button text.</p>
+    </HazoUiDialog>
+  );
+}
+```
+
+##### 3. Destructive Action with Loading
+
+```tsx
+import { HazoUiDialog } from 'hazo_ui';
+import { Lock } from 'lucide-react';
+import { useState } from 'react';
+
+function CloseAccountDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  const handleClose = async () => {
+    setIsClosing(true);
+    try {
+      await closeAccount();
+      setIsOpen(false);
+    } catch (error) {
+      console.error('Close failed:', error);
+    } finally {
+      setIsClosing(false);
+    }
+  };
+
+  return (
+    <HazoUiDialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      title="Close Account"
+      description="This will permanently close your account."
+      actionButtonText={isClosing ? "Closing..." : "Close"}
+      actionButtonIcon={<Lock className="h-4 w-4" />}
+      actionButtonLoading={isClosing}
+      onConfirm={handleClose}
+    >
+      <p>Lock icon is replaced by spinner when loading.</p>
+    </HazoUiDialog>
+  );
+}
+```
+
+##### 4. Complex Footer with Stats
+
+```tsx
+import { HazoUiDialog } from 'hazo_ui';
+import { useState } from 'react';
+
+function ReviewItemsDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [stats, setStats] = useState({ keep: 0, accept: 0, skip: 0 });
+
+  return (
+    <HazoUiDialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      title="Review Items"
+      description="Review and process the items below."
+      footerContent={
+        <div className="flex items-center justify-between w-full">
+          <div className="text-sm text-muted-foreground">
+            Keep: {stats.keep} | Accept: {stats.accept} | Skip: {stats.skip}
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setStats({ ...stats, skip: stats.skip + 1 })}
+              className="px-3 py-1.5 text-sm border rounded-md hover:bg-muted"
+            >
+              Skip
+            </button>
+            <button
+              onClick={() => setStats({ ...stats, keep: stats.keep + 1 })}
+              className="px-3 py-1.5 text-sm bg-blue-500 text-white rounded-md"
+            >
+              Keep
+            </button>
+            <button
+              onClick={() => {
+                setStats({ ...stats, accept: stats.accept + 1 });
+                setIsOpen(false);
+              }}
+              className="px-3 py-1.5 text-sm bg-green-500 text-white rounded-md"
+            >
+              Accept
+            </button>
+          </div>
+        </div>
+      }
+    >
+      <p>Custom footer shows stats and multiple action buttons.</p>
+    </HazoUiDialog>
+  );
+}
+```
+
+##### 5. Progress Dialog with No Footer
+
+```tsx
+import { HazoUiDialog } from 'hazo_ui';
+import { useState, useEffect } from 'react';
+
+function ProgressDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (isOpen) {
+      const interval = setInterval(() => {
+        setProgress((prev) => {
+          const next = prev + 10;
+          if (next >= 100) {
+            clearInterval(interval);
+            setTimeout(() => setIsOpen(false), 500);
+            return 100;
+          }
+          return next;
+        });
+      }, 300);
+      return () => clearInterval(interval);
+    }
+  }, [isOpen]);
+
+  return (
+    <HazoUiDialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      title="Processing..."
+      description="Please wait while we process your request."
+      showCloseButton={false}
+      footerContent={<div />}
+    >
+      <div className="space-y-4">
+        <div className="w-full bg-muted rounded-full h-2">
+          <div
+            className="bg-primary h-2 rounded-full transition-all"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+        <p className="text-sm text-center">{progress}% complete</p>
+      </div>
+    </HazoUiDialog>
+  );
+}
+```
+
 #### Size Variants
 
 ```tsx
@@ -2141,6 +2550,10 @@ function FormDialog() {
 | `actionButtonVariant` | `ButtonVariant` | `"default"` | Action button style |
 | `cancelButtonText` | `string` | `"Cancel"` | Cancel button label |
 | `showCancelButton` | `boolean` | `true` | Show cancel button |
+| `actionButtonLoading` | `boolean` | `false` | Shows loading spinner and disables action button |
+| `actionButtonDisabled` | `boolean` | `false` | Disables the action button |
+| `actionButtonIcon` | `React.ReactNode` | - | Icon element rendered before action button text |
+| `footerContent` | `React.ReactNode` | - | Custom footer content that replaces default buttons |
 | `sizeWidth` | `string` | `"min(90vw, 600px)"` | Dialog width |
 | `sizeHeight` | `string` | `"min(80vh, 800px)"` | Dialog max height |
 | `openAnimation` | `AnimationPreset \| string` | `"zoom"` | Open animation |

package/dist/index.cjs

@@ -217,6 +217,7 @@ Button.displayName = "Button";
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogClose = DialogPrimitive__namespace.Close;
 var DialogOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
@@ -6087,6 +6088,10 @@ function HazoUiDialog({
   actionButtonVariant = "default",
   cancelButtonText = "Cancel",
   showCancelButton = true,
+  actionButtonLoading = false,
+  actionButtonDisabled = false,
+  actionButtonIcon,
+  footerContent,
   sizeWidth = "min(90vw, 600px)",
   sizeHeight = "min(80vh, 800px)",
   openAnimation = "zoom",
@@ -6207,34 +6212,44 @@ function HazoUiDialog({
               children
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             DialogFooter,
             {
               className: cn("cls_dialog_footer p-6 pt-4", footerClassName),
               style: footerStyles,
-              children: [
-                showCancelButton && /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    className: "cls_cancel_button",
-                    variant: "outline",
-                    onClick: handleCancel,
-                    children: cancelButtonText
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    type: "button",
-                    className: "cls_confirm_button",
-                    variant: actionButtonVariant,
-                    onClick: handleConfirm,
-                    style: actionButtonStyles,
-                    children: actionButtonText
-                  }
-                )
-              ]
+              children: footerContent ? (
+                // Custom footer content replaces default buttons
+                footerContent
+              ) : (
+                // Default footer with action and cancel buttons
+                /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  showCancelButton && /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
+                    {
+                      type: "button",
+                      className: "cls_cancel_button",
+                      variant: "outline",
+                      onClick: handleCancel,
+                      children: cancelButtonText
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Button,
+                    {
+                      type: "button",
+                      className: "cls_confirm_button",
+                      variant: actionButtonVariant,
+                      onClick: handleConfirm,
+                      style: actionButtonStyles,
+                      disabled: actionButtonLoading || actionButtonDisabled,
+                      children: [
+                        actionButtonLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }) : actionButtonIcon,
+                        actionButtonText
+                      ]
+                    }
+                  )
+                ] })
+              )
             }
           ),
           showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6258,6 +6273,16 @@ exports.CommandNodeExtension = CommandNodeExtension;
 exports.CommandPill = CommandPill;
 exports.CommandPopover = CommandPopover;
 exports.HazoUiDialog = HazoUiDialog;
+exports.HazoUiDialogClose = DialogClose;
+exports.HazoUiDialogContent = DialogContent;
+exports.HazoUiDialogDescription = DialogDescription;
+exports.HazoUiDialogFooter = DialogFooter;
+exports.HazoUiDialogHeader = DialogHeader;
+exports.HazoUiDialogOverlay = DialogOverlay;
+exports.HazoUiDialogPortal = DialogPortal;
+exports.HazoUiDialogRoot = Dialog;
+exports.HazoUiDialogTitle = DialogTitle;
+exports.HazoUiDialogTrigger = DialogTrigger;
 exports.HazoUiFlexInput = HazoUiFlexInput;
 exports.HazoUiFlexRadio = HazoUiFlexRadio;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;