hazo_ui 2.6.2 → 2.6.4

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var React27 = require('react');
@@ -172,6 +173,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 tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -200,13 +232,36 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
+var variant_styles = {
+  default: {
+    backgroundColor: "var(--primary)",
+    color: "var(--primary-foreground)",
+    border: "1px solid var(--primary)"
+  },
+  destructive: {
+    backgroundColor: "var(--destructive)",
+    color: "white",
+    border: "1px solid var(--destructive)"
+  },
+  outline: {
+    backgroundColor: "var(--background)",
+    color: "var(--foreground)",
+    border: "1px solid var(--border)"
+  },
+  secondary: {
+    backgroundColor: "var(--secondary)",
+    color: "var(--secondary-foreground)"
+  }
+};
 var Button = React27__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, style, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
+    const fallback_styles = variant_styles[variant ?? "default"] ?? {};
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
+        style: { ...fallback_styles, ...style },
         ref,
         ...props
       }
@@ -787,8 +842,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] = React27.useState(false);
   const [filterFields, setFilterFields] = React27.useState(initialFilters);
   const [isComboboxOpen, setIsComboboxOpen] = React27.useState(false);
@@ -908,7 +1002,7 @@ function HazoUiMultiFilterDialog({
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_filter_dialog_content max-w-lg w-full max-h-[90vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { style: headerStyles, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
       ] }),
@@ -978,6 +1072,7 @@ function HazoUiMultiFilterDialog({
             variant: "outline",
             onClick: handleClearAll,
             className: "cls_clear_all_btn",
+            style: clearButtonStyles,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
               "Clear All"
@@ -989,6 +1084,7 @@ function HazoUiMultiFilterDialog({
           {
             onClick: handleApply,
             className: "cls_apply_btn",
+            style: submitButtonStyles,
             children: "Apply"
           }
         ),
@@ -998,6 +1094,7 @@ function HazoUiMultiFilterDialog({
             variant: "outline",
             onClick: handleCancel,
             className: "cls_cancel_btn",
+            style: cancelButtonStyles,
             children: "Cancel"
           }
         )
@@ -1109,8 +1206,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] = React27.useState(false);
   const [sortFields, setSortFields] = React27.useState(initialSortFields);
   const [isComboboxOpen, setIsComboboxOpen] = React27.useState(false);
@@ -1212,7 +1348,7 @@ function HazoUiMultiSortDialog({
       /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: tooltipContent })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "cls_sort_dialog_content max-w-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { style: headerStyles, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
         /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
       ] }),
@@ -1292,6 +1428,7 @@ function HazoUiMultiSortDialog({
             variant: "outline",
             onClick: handleClearAll,
             className: "cls_clear_all_btn",
+            style: clearButtonStyles,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "cls_clear_all_icon h-4 w-4 mr-2" }),
               "Clear All"
@@ -1303,6 +1440,7 @@ function HazoUiMultiSortDialog({
           {
             onClick: handleApply,
             className: "cls_apply_btn",
+            style: submitButtonStyles,
             children: "Apply"
           }
         ),
@@ -1312,6 +1450,7 @@ function HazoUiMultiSortDialog({
             variant: "outline",
             onClick: handleCancel,
             className: "cls_cancel_btn",
+            style: cancelButtonStyles,
             children: "Cancel"
           }
         )
@@ -6032,6 +6171,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",
@@ -6085,7 +6259,7 @@ function HazoUiDialog({
   title = "Action required",
   description,
   actionButtonText = "Confirm",
-  actionButtonVariant = "default",
+  actionButtonVariant,
   cancelButtonText = "Cancel",
   showCancelButton = true,
   actionButtonLoading = false,
@@ -6096,7 +6270,10 @@ function HazoUiDialog({
   sizeHeight = "min(80vh, 800px)",
   openAnimation = "zoom",
   closeAnimation = "zoom",
+  variant = "default",
+  splitHeader = true,
   headerBackgroundColor,
+  descriptionBackgroundColor,
   headerTextColor,
   bodyBackgroundColor,
   footerBackgroundColor,
@@ -6111,6 +6288,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?.();
   };
@@ -6119,27 +6299,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",
@@ -6155,17 +6336,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__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       DialogOverlay,
       {
-        className: cn("cls_hazo_dialog_overlay", overlayClassName)
+        className: cn("cls_hazo_dialog_overlay", overlayClassName ?? variant_preset?.overlay_class_name)
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6185,27 +6379,69 @@ function HazoUiDialog({
         ),
         style: contentStyles,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            DialogHeader,
-            {
-              className: cn(
-                "cls_dialog_header",
-                !headerBar && "p-6 pb-4",
-                headerClassName
-              ),
-              style: headerStyles,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: titleClassName, children: title }),
-                description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: descriptionClassName, children: description })
-              ]
-            }
+          has_split_header ? (
+            /* Split header: two rows with different backgrounds */
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              DialogHeader,
+              {
+                className: cn(
+                  "cls_dialog_header shrink-0 p-0 space-y-0",
+                  headerClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "cls_dialog_header_title px-6 pt-6 pb-3",
+                      style: {
+                        ...finalHeaderBackgroundColor && { backgroundColor: finalHeaderBackgroundColor },
+                        ...finalHeaderTextColor && { color: finalHeaderTextColor }
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: titleClassName, children: title })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "cls_dialog_header_description px-6 py-1.5",
+                      style: {
+                        backgroundColor: finalDescriptionBgColor,
+                        ...finalHeaderTextColor && { color: finalHeaderTextColor }
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: cn(descriptionClassName, "italic text-xs"), children: description })
+                    }
+                  )
+                ]
+              }
+            )
+          ) : (
+            /* Single header: one background, italic description when variant is active */
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DialogTitle, { className: titleClassName, children: title }),
+                  description && /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: cn(
+                    descriptionClassName,
+                    has_merged_variant_header && "italic text-xs mt-1"
+                  ), children: description })
+                ]
+              }
+            )
           ),
           /* @__PURE__ */ jsxRuntime.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,
@@ -6215,7 +6451,7 @@ function HazoUiDialog({
           /* @__PURE__ */ jsxRuntime.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
@@ -6230,6 +6466,7 @@ function HazoUiDialog({
                       className: "cls_cancel_button",
                       variant: "outline",
                       onClick: handleCancel,
+                      style: cancelButtonStyles,
                       children: cancelButtonText
                     }
                   ),
@@ -6238,7 +6475,7 @@ function HazoUiDialog({
                     {
                       type: "button",
                       className: "cls_confirm_button",
-                      variant: actionButtonVariant,
+                      variant: resolved_action_button_variant,
                       onClick: handleConfirm,
                       style: actionButtonStyles,
                       disabled: actionButtonLoading || actionButtonDisabled,
@@ -6256,7 +6493,7 @@ function HazoUiDialog({
             DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
@@ -6291,7 +6528,10 @@ exports.HazoUiRte = HazoUiRte;
 exports.HazoUiTextarea = HazoUiTextarea;
 exports.HazoUiTextbox = HazoUiTextbox;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
+exports.get_hazo_ui_config = get_hazo_ui_config;
 exports.parse_commands_from_text = parse_commands_from_text;
+exports.reset_hazo_ui_config = reset_hazo_ui_config;
+exports.set_hazo_ui_config = set_hazo_ui_config;
 exports.text_to_tiptap_content = text_to_tiptap_content;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map