hazo_ui 2.6.6 → 2.7.1

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,33 @@ 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.
+
+### shadcn/ui Primitive Re-exports
+
+All shadcn/ui base components are re-exported from hazo_ui, so sibling hazo_* packages (and consumers) can import UI primitives from a single source without installing shadcn/ui separately:
+
+```tsx
+import { Button, Input, Label, Checkbox, Switch, Tabs, TabsList, TabsTrigger, TabsContent } from 'hazo_ui';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'hazo_ui';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'hazo_ui';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'hazo_ui';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from 'hazo_ui';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from 'hazo_ui';
+import { Popover, PopoverTrigger, PopoverContent } from 'hazo_ui';
+import { RadioGroup, RadioGroupItem } from 'hazo_ui';
+import { Calendar, Textarea } from 'hazo_ui';
+```
+
+### Animation Utilities
+
+Shared animation presets and resolver function are exported for use in custom dialog implementations:
+
+```tsx
+import { ANIMATION_PRESETS, resolve_animation_classes } from 'hazo_ui';
+import type { AnimationPreset } from 'hazo_ui';
+```
+
 ---
 
 ## HazoUiMultiFilterDialog
@@ -1801,6 +1829,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.
@@ -1832,7 +1987,7 @@ HazoUiDialog offers two approaches depending on your needs:
 - **9 Animation Presets**: Zoom, slide (bottom/top/left/right), fade, bounce, scale-up, and flip animations
 - **Header Bar Option**: Full-width colored header bar for modern modal designs
 - **Color Customization**: Override header, body, footer, border, and accent colors via props
-- **Themed Variants**: Pre-built themes for success, warning, danger, and info states
+- **Themed Variants**: Pre-built themes for success, warning, destructive, and info states
 - **Responsive Design**: Viewport-relative sizing with maximum constraints
 - **Controlled Component**: Fully controlled open/close state
 - **Callback Support**: Separate callbacks for confirm and cancel actions
@@ -1905,7 +2060,7 @@ interface HazoUiDialogProps {
   showCloseButton?: boolean;           // default: true
 }
 
-type DialogVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
+type DialogVariant = 'default' | 'info' | 'success' | 'warning' | 'destructive';
 type AnimationPreset = 'zoom' | 'slide' | 'fade' | 'bounce' | 'scale-up' | 'flip' | 'slide-left' | 'slide-right' | 'slide-top' | 'none';
 type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
 ```
@@ -2447,9 +2602,9 @@ function ProgressDialog() {
 
 #### Themed Dialogs (Variant Prop)
 
-Use the `variant` prop to apply preset color themes with a single prop instead of specifying individual colors. Available variants: `info`, `success`, `warning`, `danger`.
+Use the `variant` prop to apply preset color themes with a single prop instead of specifying individual colors. Available variants: `info`, `success`, `warning`, `destructive`.
 
-Each variant auto-applies: header background tint, header text color, border color, accent color, tinted overlay, and (for `danger`) destructive button variant.
+Each variant auto-applies: header background tint, header text color, border color, accent color, tinted overlay, and (for `destructive`) destructive button variant.
 
 **Override chain:** Individual prop > Variant preset > Global config. You can use a variant and still override specific colors via props.
 
@@ -2465,7 +2620,7 @@ Each variant auto-applies: header background tint, header text color, border col
 </HazoUiDialog>
 
 // Danger variant (auto-sets destructive button)
-<HazoUiDialog variant="danger" title="⛔ Delete" actionButtonText="Delete Permanently" {...props}>
+<HazoUiDialog variant="destructive" title="⛔ Delete" actionButtonText="Delete Permanently" {...props}>
   <p>All data will be permanently deleted.</p>
 </HazoUiDialog>
 
@@ -2486,7 +2641,7 @@ By default (`splitHeader={true}`), variant dialogs render the title and descript
 </HazoUiDialog>
 
 // Merged header - single background, italic description
-<HazoUiDialog variant="danger" splitHeader={false} title="Delete" description="This is permanent." {...props}>
+<HazoUiDialog variant="destructive" splitHeader={false} title="Delete" description="This is permanent." {...props}>
   <p>One red header background with italic description text.</p>
 </HazoUiDialog>
 ```
@@ -2506,7 +2661,7 @@ By default (`splitHeader={true}`), variant dialogs render the title and descript
 </HazoUiDialog>
 
 // Danger variant with non-destructive button override
-<HazoUiDialog variant="danger" actionButtonVariant="default" title="Acknowledge" {...props}>
+<HazoUiDialog variant="destructive" actionButtonVariant="default" title="Acknowledge" {...props}>
   <p>Red colors from variant, default button from prop override.</p>
 </HazoUiDialog>
 ```