hazo_ui 2.6.5 → 2.7.0

package/dist/index.d.cts

@@ -693,6 +693,34 @@ interface HazoUiDialogProps {
  */
 declare function HazoUiDialog({ open, onOpenChange, children, onConfirm, onCancel, title, description, actionButtonText, actionButtonVariant, cancelButtonText, showCancelButton, actionButtonLoading, actionButtonDisabled, actionButtonIcon, footerContent, sizeWidth, sizeHeight, fixedSize, openAnimation, closeAnimation, variant, splitHeader, headerBackgroundColor, descriptionBackgroundColor, headerTextColor, bodyBackgroundColor, footerBackgroundColor, borderColor, accentColor, headerBar, headerBarColor, className, contentClassName, overlayClassName, headerClassName, footerClassName, showCloseButton, }: HazoUiDialogProps): react_jsx_runtime.JSX.Element;
 
+type ConfirmDialogVariant = 'default' | 'destructive' | 'warning' | 'info' | 'success';
+interface HazoUiConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+    variant?: ConfirmDialogVariant;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    showCancelButton?: boolean;
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    accentColor?: string;
+    confirmButtonColor?: string;
+    openAnimation?: AnimationPreset | string;
+    closeAnimation?: AnimationPreset | string;
+}
+/**
+ * HazoUiConfirmDialog Component
+ *
+ * A compact, opinionated confirmation dialog with variant-driven styling,
+ * accent top border, and async loading support.
+ */
+declare function HazoUiConfirmDialog({ open, onOpenChange, title, description, children, variant, confirmLabel, cancelLabel, showCancelButton, onConfirm, onCancel, loading: external_loading, disabled, accentColor, confirmButtonColor, openAnimation, closeAnimation, }: HazoUiConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -710,4 +738,4 @@ declare const DialogFooter: {
 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>>;
 
-export { type AnimationPreset, type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type DialogVariant, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, type InsertedCommand, type PrefixColor, type PrefixConfig, type RteAttachment, type RteOutput, type RteVariable, type SortConfig, type SortField, type SuggestionState, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, set_hazo_ui_config, text_to_tiptap_content };
+export { type AnimationPreset, type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type ConfirmDialogVariant, type DialogVariant, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiConfirmDialog, type HazoUiConfirmDialogProps, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, type InsertedCommand, type PrefixColor, type PrefixConfig, type RteAttachment, type RteOutput, type RteVariable, type SortConfig, type SortField, type SuggestionState, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, set_hazo_ui_config, text_to_tiptap_content };

package/dist/index.d.ts

@@ -693,6 +693,34 @@ interface HazoUiDialogProps {
  */
 declare function HazoUiDialog({ open, onOpenChange, children, onConfirm, onCancel, title, description, actionButtonText, actionButtonVariant, cancelButtonText, showCancelButton, actionButtonLoading, actionButtonDisabled, actionButtonIcon, footerContent, sizeWidth, sizeHeight, fixedSize, openAnimation, closeAnimation, variant, splitHeader, headerBackgroundColor, descriptionBackgroundColor, headerTextColor, bodyBackgroundColor, footerBackgroundColor, borderColor, accentColor, headerBar, headerBarColor, className, contentClassName, overlayClassName, headerClassName, footerClassName, showCloseButton, }: HazoUiDialogProps): react_jsx_runtime.JSX.Element;
 
+type ConfirmDialogVariant = 'default' | 'destructive' | 'warning' | 'info' | 'success';
+interface HazoUiConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+    variant?: ConfirmDialogVariant;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    showCancelButton?: boolean;
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    accentColor?: string;
+    confirmButtonColor?: string;
+    openAnimation?: AnimationPreset | string;
+    closeAnimation?: AnimationPreset | string;
+}
+/**
+ * HazoUiConfirmDialog Component
+ *
+ * A compact, opinionated confirmation dialog with variant-driven styling,
+ * accent top border, and async loading support.
+ */
+declare function HazoUiConfirmDialog({ open, onOpenChange, title, description, children, variant, confirmLabel, cancelLabel, showCancelButton, onConfirm, onCancel, loading: external_loading, disabled, accentColor, confirmButtonColor, openAnimation, closeAnimation, }: HazoUiConfirmDialogProps): react_jsx_runtime.JSX.Element;
+
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -710,4 +738,4 @@ declare const DialogFooter: {
 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>>;
 
-export { type AnimationPreset, type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type DialogVariant, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, type InsertedCommand, type PrefixColor, type PrefixConfig, type RteAttachment, type RteOutput, type RteVariable, type SortConfig, type SortField, type SuggestionState, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, set_hazo_ui_config, text_to_tiptap_content };
+export { type AnimationPreset, type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type ConfirmDialogVariant, type DialogVariant, type FilterConfig, type FilterField, type HazoUiConfig, HazoUiConfirmDialog, type HazoUiConfirmDialogProps, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, type HazoUiDialogProps, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, type InsertedCommand, type PrefixColor, type PrefixConfig, type RteAttachment, type RteOutput, type RteVariable, type SortConfig, type SortField, type SuggestionState, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, set_hazo_ui_config, text_to_tiptap_content };

package/dist/index.js

@@ -282,6 +282,7 @@ var DialogTitle = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ref,
     className: cn(
       "text-lg font-semibold leading-none tracking-tight",
+      "break-words [overflow-wrap:anywhere]",
       className
     ),
     ...props
@@ -6334,7 +6335,7 @@ function HazoUiDialog({
                   /* @__PURE__ */ 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 }
@@ -6365,6 +6366,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,
@@ -6447,7 +6449,179 @@ 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.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.useRef(null);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(
+      DialogOverlay,
+      {
+        className: cn(
+          "cls_confirm_dialog_overlay",
+          variant_preset?.overlay_class_name
+        ),
+        style: { backdropFilter: "blur(4px)" }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.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__ */ jsxs("div", { className: "cls_confirm_dialog_body px-6 pt-7 pb-5", children: [
+            /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "cls_confirm_dialog_title text-[17px] font-semibold text-foreground mb-2.5", children: title }),
+            children ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "cls_confirm_dialog_children text-sm text-muted-foreground leading-relaxed", children }) }) : description ? /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: "cls_confirm_dialog_description text-sm text-muted-foreground leading-relaxed", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "cls_confirm_dialog_separator border-t border-border" }),
+          /* @__PURE__ */ jsxs("div", { className: "cls_confirm_dialog_actions px-6 py-4 flex justify-end gap-3", children: [
+            showCancelButton && /* @__PURE__ */ 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__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                className: "cls_confirm_action_button",
+                onClick: handle_confirm,
+                disabled: is_loading || disabled,
+                style: confirm_button_styles,
+                children: [
+                  is_loading && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                  resolved_confirm_label
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
 
-export { CommandNodeExtension, CommandPill, CommandPopover, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, HazoUiTextarea, HazoUiTextbox, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, set_hazo_ui_config, text_to_tiptap_content };
+export { CommandNodeExtension, CommandPill, CommandPopover, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, HazoUiTextarea, HazoUiTextbox, create_command_suggestion_extension, get_hazo_ui_config, parse_commands_from_text, reset_hazo_ui_config, set_hazo_ui_config, text_to_tiptap_content };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map