hazo_ui 2.6.2 → 2.6.3

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 import * as React27 from 'react';
 import React27__default, { useRef, useState, useCallback, useEffect, useMemo, Fragment } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -113,6 +114,37 @@ var require_objectWithoutPropertiesLoose = __commonJS({
     module.exports = _objectWithoutPropertiesLoose10, module.exports.__esModule = true, module.exports["default"] = module.exports;
   }
 });
+
+// src/lib/hazo_ui_config.ts
+var default_config = {
+  // Headers use default theme colors by default (no override)
+  header_background_color: void 0,
+  header_text_color: void 0,
+  // Submit buttons use primary/default variant (no override needed for default styling)
+  submit_button_background_color: void 0,
+  submit_button_text_color: void 0,
+  submit_button_hover_color: void 0,
+  // Cancel buttons use outline variant (no override needed for default styling)
+  cancel_button_background_color: void 0,
+  cancel_button_text_color: void 0,
+  cancel_button_border_color: void 0,
+  cancel_button_hover_color: void 0,
+  // Clear buttons use outline variant (no override needed for default styling)
+  clear_button_background_color: void 0,
+  clear_button_text_color: void 0,
+  clear_button_border_color: void 0,
+  clear_button_hover_color: void 0
+};
+var global_config = { ...default_config };
+function get_hazo_ui_config() {
+  return { ...global_config };
+}
+function set_hazo_ui_config(config) {
+  global_config = { ...global_config, ...config };
+}
+function reset_hazo_ui_config() {
+  global_config = { ...default_config };
+}
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -728,8 +760,47 @@ function HazoUiMultiFilterDialog({
   onFilterChange,
   initialFilters = [],
   title = "Filter",
-  description = "Add multiple fields to filter by. Select a field and set its filter value."
+  description = "Add multiple fields to filter by. Select a field and set its filter value.",
+  headerBackgroundColor,
+  headerTextColor,
+  submitButtonBackgroundColor,
+  submitButtonTextColor,
+  cancelButtonBackgroundColor,
+  cancelButtonTextColor,
+  cancelButtonBorderColor,
+  clearButtonBackgroundColor,
+  clearButtonTextColor,
+  clearButtonBorderColor
 }) {
+  const config = get_hazo_ui_config();
+  const finalSubmitBgColor = submitButtonBackgroundColor ?? config.submit_button_background_color;
+  const finalSubmitTextColor = submitButtonTextColor ?? config.submit_button_text_color;
+  const finalCancelBgColor = cancelButtonBackgroundColor ?? config.cancel_button_background_color;
+  const finalCancelTextColor = cancelButtonTextColor ?? config.cancel_button_text_color;
+  const finalCancelBorderColor = cancelButtonBorderColor ?? config.cancel_button_border_color;
+  const finalClearBgColor = clearButtonBackgroundColor ?? config.clear_button_background_color;
+  const finalClearTextColor = clearButtonTextColor ?? config.clear_button_text_color;
+  const finalClearBorderColor = clearButtonBorderColor ?? config.clear_button_border_color;
+  const submitButtonStyles = {
+    ...finalSubmitBgColor && { backgroundColor: finalSubmitBgColor, borderColor: finalSubmitBgColor },
+    ...finalSubmitTextColor && { color: finalSubmitTextColor }
+  };
+  const cancelButtonStyles = {
+    ...finalCancelBgColor && { backgroundColor: finalCancelBgColor },
+    ...finalCancelTextColor && { color: finalCancelTextColor },
+    ...finalCancelBorderColor && { borderColor: finalCancelBorderColor }
+  };
+  const clearButtonStyles = {
+    ...finalClearBgColor && { backgroundColor: finalClearBgColor },
+    ...finalClearTextColor && { color: finalClearTextColor },
+    ...finalClearBorderColor && { borderColor: finalClearBorderColor }
+  };
+  const finalHeaderBgColor = headerBackgroundColor ?? config.header_background_color;
+  const finalHeaderTextColor = headerTextColor ?? config.header_text_color;
+  const headerStyles = {
+    ...finalHeaderBgColor && { backgroundColor: finalHeaderBgColor },
+    ...finalHeaderTextColor && { color: finalHeaderTextColor }
+  };
   const [isOpen, setIsOpen] = useState(false);
   const [filterFields, setFilterFields] = useState(initialFilters);
   const [isComboboxOpen, setIsComboboxOpen] = useState(false);
@@ -849,7 +920,7 @@ function HazoUiMultiFilterDialog({
       /* @__PURE__ */ jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
     /* @__PURE__ */ jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg w-full max-h-[90vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { style: headerStyles, children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: title }),
         /* @__PURE__ */ jsx(DialogDescription, { children: description })
       ] }),
@@ -919,6 +990,7 @@ function HazoUiMultiFilterDialog({
             variant: "outline",
             onClick: handleClearAll,
             className: "cls_clear_all_btn",
+            style: clearButtonStyles,
             children: [
               /* @__PURE__ */ jsx(X, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
               "Clear All"
@@ -930,6 +1002,7 @@ function HazoUiMultiFilterDialog({
           {
             onClick: handleApply,
             className: "cls_apply_btn",
+            style: submitButtonStyles,
             children: "Apply"
           }
         ),
@@ -939,6 +1012,7 @@ function HazoUiMultiFilterDialog({
             variant: "outline",
             onClick: handleCancel,
             className: "cls_cancel_btn",
+            style: cancelButtonStyles,
             children: "Cancel"
           }
         )
@@ -1050,8 +1124,47 @@ function HazoUiMultiSortDialog({
   onSortChange,
   initialSortFields = [],
   title = "Sort",
-  description = "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending."
+  description = "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending.",
+  headerBackgroundColor,
+  headerTextColor,
+  submitButtonBackgroundColor,
+  submitButtonTextColor,
+  cancelButtonBackgroundColor,
+  cancelButtonTextColor,
+  cancelButtonBorderColor,
+  clearButtonBackgroundColor,
+  clearButtonTextColor,
+  clearButtonBorderColor
 }) {
+  const config = get_hazo_ui_config();
+  const finalSubmitBgColor = submitButtonBackgroundColor ?? config.submit_button_background_color;
+  const finalSubmitTextColor = submitButtonTextColor ?? config.submit_button_text_color;
+  const finalCancelBgColor = cancelButtonBackgroundColor ?? config.cancel_button_background_color;
+  const finalCancelTextColor = cancelButtonTextColor ?? config.cancel_button_text_color;
+  const finalCancelBorderColor = cancelButtonBorderColor ?? config.cancel_button_border_color;
+  const finalClearBgColor = clearButtonBackgroundColor ?? config.clear_button_background_color;
+  const finalClearTextColor = clearButtonTextColor ?? config.clear_button_text_color;
+  const finalClearBorderColor = clearButtonBorderColor ?? config.clear_button_border_color;
+  const submitButtonStyles = {
+    ...finalSubmitBgColor && { backgroundColor: finalSubmitBgColor, borderColor: finalSubmitBgColor },
+    ...finalSubmitTextColor && { color: finalSubmitTextColor }
+  };
+  const cancelButtonStyles = {
+    ...finalCancelBgColor && { backgroundColor: finalCancelBgColor },
+    ...finalCancelTextColor && { color: finalCancelTextColor },
+    ...finalCancelBorderColor && { borderColor: finalCancelBorderColor }
+  };
+  const clearButtonStyles = {
+    ...finalClearBgColor && { backgroundColor: finalClearBgColor },
+    ...finalClearTextColor && { color: finalClearTextColor },
+    ...finalClearBorderColor && { borderColor: finalClearBorderColor }
+  };
+  const finalHeaderBgColor = headerBackgroundColor ?? config.header_background_color;
+  const finalHeaderTextColor = headerTextColor ?? config.header_text_color;
+  const headerStyles = {
+    ...finalHeaderBgColor && { backgroundColor: finalHeaderBgColor },
+    ...finalHeaderTextColor && { color: finalHeaderTextColor }
+  };
   const [isOpen, setIsOpen] = useState(false);
   const [sortFields, setSortFields] = useState(initialSortFields);
   const [isComboboxOpen, setIsComboboxOpen] = useState(false);
@@ -1153,7 +1266,7 @@ function HazoUiMultiSortDialog({
       /* @__PURE__ */ jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
     /* @__PURE__ */ jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { style: headerStyles, children: [
         /* @__PURE__ */ jsx(DialogTitle, { children: title }),
         /* @__PURE__ */ jsx(DialogDescription, { children: description })
       ] }),
@@ -1233,6 +1346,7 @@ function HazoUiMultiSortDialog({
             variant: "outline",
             onClick: handleClearAll,
             className: "cls_clear_all_btn",
+            style: clearButtonStyles,
             children: [
               /* @__PURE__ */ jsx(Trash2, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
               "Clear All"
@@ -1244,6 +1358,7 @@ function HazoUiMultiSortDialog({
           {
             onClick: handleApply,
             className: "cls_apply_btn",
+            style: submitButtonStyles,
             children: "Apply"
           }
         ),
@@ -1253,6 +1368,7 @@ function HazoUiMultiSortDialog({
             variant: "outline",
             onClick: handleCancel,
             className: "cls_cancel_btn",
+            style: cancelButtonStyles,
             children: "Cancel"
           }
         )
@@ -5973,6 +6089,41 @@ var HazoUiTextarea = ({
   );
 };
 HazoUiTextarea.displayName = "HazoUiTextarea";
+var VARIANT_PRESETS = {
+  info: {
+    header_background_color: "rgb(191, 219, 254)",
+    description_background_color: "rgb(219, 234, 254)",
+    header_text_color: "rgb(30, 58, 138)",
+    border_color: "rgb(59, 130, 246)",
+    accent_color: "rgb(59, 130, 246)",
+    overlay_class_name: "bg-blue-950/50"
+  },
+  success: {
+    header_background_color: "rgb(187, 247, 208)",
+    description_background_color: "rgb(220, 252, 231)",
+    header_text_color: "rgb(22, 101, 52)",
+    border_color: "rgb(34, 197, 94)",
+    accent_color: "rgb(34, 197, 94)",
+    overlay_class_name: "bg-green-950/50"
+  },
+  warning: {
+    header_background_color: "rgb(253, 230, 138)",
+    description_background_color: "rgb(254, 249, 195)",
+    header_text_color: "rgb(113, 63, 18)",
+    border_color: "rgb(234, 179, 8)",
+    accent_color: "rgb(234, 179, 8)",
+    overlay_class_name: "bg-yellow-950/50"
+  },
+  danger: {
+    header_background_color: "rgb(254, 202, 202)",
+    description_background_color: "rgb(254, 226, 226)",
+    header_text_color: "rgb(127, 29, 29)",
+    border_color: "rgb(239, 68, 68)",
+    accent_color: "rgb(239, 68, 68)",
+    overlay_class_name: "bg-red-950/50",
+    action_button_variant: "destructive"
+  }
+};
 var ANIMATION_PRESETS = {
   zoom: {
     open: "animate-dialog-zoom",
@@ -6026,7 +6177,7 @@ function HazoUiDialog({
   title = "Action required",
   description,
   actionButtonText = "Confirm",
-  actionButtonVariant = "default",
+  actionButtonVariant,
   cancelButtonText = "Cancel",
   showCancelButton = true,
   actionButtonLoading = false,
@@ -6037,7 +6188,10 @@ function HazoUiDialog({
   sizeHeight = "min(80vh, 800px)",
   openAnimation = "zoom",
   closeAnimation = "zoom",
+  variant = "default",
+  splitHeader = true,
   headerBackgroundColor,
+  descriptionBackgroundColor,
   headerTextColor,
   bodyBackgroundColor,
   footerBackgroundColor,
@@ -6052,6 +6206,9 @@ function HazoUiDialog({
   footerClassName,
   showCloseButton = true
 }) {
+  const config = get_hazo_ui_config();
+  const variant_preset = variant !== "default" ? VARIANT_PRESETS[variant] : void 0;
+  const resolved_action_button_variant = actionButtonVariant ?? variant_preset?.action_button_variant ?? "default";
   const handleConfirm = () => {
     onConfirm?.();
   };
@@ -6060,27 +6217,28 @@ function HazoUiDialog({
     onOpenChange?.(false);
   };
   const animationClasses = resolveAnimationClasses(openAnimation, closeAnimation);
+  const resolved_border_color = borderColor ?? variant_preset?.border_color;
   const contentStyles = {
     width: sizeWidth,
     maxHeight: sizeHeight,
-    ...borderColor && { borderColor }
+    ...resolved_border_color && { borderColor: resolved_border_color }
   };
+  const finalHeaderBackgroundColor = headerBackgroundColor ?? variant_preset?.header_background_color ?? config.header_background_color;
+  const finalDescriptionBgColor = descriptionBackgroundColor ?? variant_preset?.description_background_color;
+  const finalHeaderTextColor = headerTextColor ?? variant_preset?.header_text_color ?? config.header_text_color;
+  const is_variant_active = variant !== "default";
+  const has_split_header = splitHeader && !headerBar && !!finalDescriptionBgColor && !!description;
+  const has_merged_variant_header = !splitHeader && is_variant_active && !headerBar && !!description;
   const headerStyles = {
     ...headerBar && {
       backgroundColor: headerBarColor,
-      marginLeft: "-1.5rem",
-      marginRight: "-1.5rem",
-      marginTop: "0",
-      marginBottom: "0",
       paddingTop: "1.5rem",
       paddingBottom: "1.5rem",
       paddingLeft: "1.5rem",
-      paddingRight: "1.5rem",
-      borderTopLeftRadius: "inherit",
-      borderTopRightRadius: "inherit"
+      paddingRight: "1.5rem"
     },
-    ...headerBackgroundColor && !headerBar && { backgroundColor: headerBackgroundColor },
-    ...headerTextColor && { color: headerTextColor }
+    ...!has_split_header && finalHeaderBackgroundColor && !headerBar && { backgroundColor: finalHeaderBackgroundColor },
+    ...!has_split_header && finalHeaderTextColor && { color: finalHeaderTextColor }
   };
   const titleClassName = cn(
     "cls_dialog_title",
@@ -6096,17 +6254,30 @@ function HazoUiDialog({
   const footerStyles = {
     ...footerBackgroundColor && { backgroundColor: footerBackgroundColor }
   };
+  const finalSubmitBgColor = accentColor ?? variant_preset?.accent_color ?? config.submit_button_background_color;
+  const finalSubmitTextColor = config.submit_button_text_color;
+  const finalCancelBgColor = config.cancel_button_background_color;
+  const finalCancelTextColor = config.cancel_button_text_color;
+  const finalCancelBorderColor = config.cancel_button_border_color;
   const actionButtonStyles = {
-    ...accentColor && actionButtonVariant === "default" && {
-      backgroundColor: accentColor,
-      borderColor: accentColor
+    ...finalSubmitBgColor && resolved_action_button_variant === "default" && {
+      backgroundColor: finalSubmitBgColor,
+      borderColor: finalSubmitBgColor
+    },
+    ...finalSubmitTextColor && resolved_action_button_variant === "default" && {
+      color: finalSubmitTextColor
     }
   };
+  const cancelButtonStyles = {
+    ...finalCancelBgColor && { backgroundColor: finalCancelBgColor },
+    ...finalCancelTextColor && { color: finalCancelTextColor },
+    ...finalCancelBorderColor && { borderColor: finalCancelBorderColor }
+  };
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(
       DialogOverlay,
       {
-        className: cn("cls_hazo_dialog_overlay", overlayClassName)
+        className: cn("cls_hazo_dialog_overlay", overlayClassName ?? variant_preset?.overlay_class_name)
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -6126,27 +6297,69 @@ function HazoUiDialog({
         ),
         style: contentStyles,
         children: [
-          /* @__PURE__ */ jsxs(
-            DialogHeader,
-            {
-              className: cn(
-                "cls_dialog_header",
-                !headerBar && "p-6 pb-4",
-                headerClassName
-              ),
-              style: headerStyles,
-              children: [
-                /* @__PURE__ */ jsx(DialogTitle, { className: titleClassName, children: title }),
-                description && /* @__PURE__ */ jsx(DialogDescription, { className: descriptionClassName, children: description })
-              ]
-            }
+          has_split_header ? (
+            /* Split header: two rows with different backgrounds */
+            /* @__PURE__ */ jsxs(
+              DialogHeader,
+              {
+                className: cn(
+                  "cls_dialog_header shrink-0 p-0 space-y-0",
+                  headerClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "cls_dialog_header_title px-6 pt-6 pb-3",
+                      style: {
+                        ...finalHeaderBackgroundColor && { backgroundColor: finalHeaderBackgroundColor },
+                        ...finalHeaderTextColor && { color: finalHeaderTextColor }
+                      },
+                      children: /* @__PURE__ */ jsx(DialogTitle, { className: titleClassName, children: title })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "cls_dialog_header_description px-6 py-1.5",
+                      style: {
+                        backgroundColor: finalDescriptionBgColor,
+                        ...finalHeaderTextColor && { color: finalHeaderTextColor }
+                      },
+                      children: /* @__PURE__ */ jsx(DialogDescription, { className: cn(descriptionClassName, "italic text-xs"), children: description })
+                    }
+                  )
+                ]
+              }
+            )
+          ) : (
+            /* Single header: one background, italic description when variant is active */
+            /* @__PURE__ */ jsxs(
+              DialogHeader,
+              {
+                className: cn(
+                  "cls_dialog_header shrink-0",
+                  !headerBar && "p-6 pb-4",
+                  has_merged_variant_header && "pb-3",
+                  headerClassName
+                ),
+                style: headerStyles,
+                children: [
+                  /* @__PURE__ */ jsx(DialogTitle, { className: titleClassName, children: title }),
+                  description && /* @__PURE__ */ jsx(DialogDescription, { className: cn(
+                    descriptionClassName,
+                    has_merged_variant_header && "italic text-xs mt-1"
+                  ), children: description })
+                ]
+              }
+            )
           ),
           /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
                 "cls_dialog_body",
-                "px-6 py-4 overflow-y-auto flex-1",
+                "px-6 py-4 overflow-y-auto flex-1 min-h-0",
                 contentClassName
               ),
               style: bodyStyles,
@@ -6156,7 +6369,7 @@ function HazoUiDialog({
           /* @__PURE__ */ jsx(
             DialogFooter,
             {
-              className: cn("cls_dialog_footer p-6 pt-4", footerClassName),
+              className: cn("cls_dialog_footer shrink-0 p-6 pt-4", footerClassName),
               style: footerStyles,
               children: footerContent ? (
                 // Custom footer content replaces default buttons
@@ -6171,6 +6384,7 @@ function HazoUiDialog({
                       className: "cls_cancel_button",
                       variant: "outline",
                       onClick: handleCancel,
+                      style: cancelButtonStyles,
                       children: cancelButtonText
                     }
                   ),
@@ -6179,7 +6393,7 @@ function HazoUiDialog({
                     {
                       type: "button",
                       className: "cls_confirm_button",
-                      variant: actionButtonVariant,
+                      variant: resolved_action_button_variant,
                       onClick: handleConfirm,
                       style: actionButtonStyles,
                       disabled: actionButtonLoading || actionButtonDisabled,
@@ -6197,7 +6411,7 @@ function HazoUiDialog({
             DialogPrimitive.Close,
             {
               className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-              style: headerBar ? { color: "white" } : headerTextColor ? { color: headerTextColor } : void 0,
+              style: headerBar ? { color: "white" } : finalHeaderTextColor ? { color: finalHeaderTextColor } : void 0,
               children: [
                 /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
@@ -6210,6 +6424,6 @@ function HazoUiDialog({
   ] }) });
 }
 
-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, parse_commands_from_text, text_to_tiptap_content };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map