hazo_ui 2.4.4 → 2.5.0

package/dist/index.d.cts

@@ -170,6 +170,17 @@ declare const HazoUiRte: React.FC<HazoUiRteProps>;
  * prefix-triggered command menus (e.g., @mentions, /commands, #tags).
  */
 
+/**
+ * Custom color configuration for prefix styling
+ */
+interface PrefixColor {
+    /** Background color (e.g., "#E0F2FE", "hsl(200, 95%, 90%)") */
+    bg?: string;
+    /** Text/foreground color (e.g., "#0369A1", "hsl(200, 70%, 30%)") */
+    fg?: string;
+    /** Border color (e.g., "#7DD3FC", "hsl(200, 80%, 70%)") */
+    border?: string;
+}
 /**
  * Individual command item that can be selected from the command menu
  */
@@ -195,6 +206,8 @@ interface PrefixConfig {
     commands: CommandItem[];
     /** Allow free text entries that don't match existing commands */
     allow_free_text?: boolean;
+    /** Custom color styling for this prefix's pills */
+    color?: PrefixColor;
 }
 /**
  * Represents a command that has been inserted into the text
@@ -251,6 +264,8 @@ interface CommandPopoverProps {
     on_close: () => void;
     /** Called when selection changes via keyboard */
     on_selection_change: (index: number) => void;
+    /** Custom color for the prefix (shows color indicator dot) */
+    prefix_color?: PrefixColor;
 }
 /**
  * Props for the command pill component
@@ -268,6 +283,8 @@ interface CommandPillProps {
     selected?: boolean;
     /** Pill style variant */
     variant?: "default" | "outline" | "subtle";
+    /** Custom color styling (overrides variant when provided) */
+    color?: PrefixColor;
     /** Called when the pill is clicked (to open edit popover) */
     on_click?: () => void;
 }
@@ -368,6 +385,7 @@ declare module "@tiptap/core" {
                 action: string;
                 action_label: string;
                 variant?: "default" | "outline" | "subtle";
+                color?: PrefixColor;
             }) => ReturnType;
             /**
              * Update an existing command node by ID
@@ -452,24 +470,30 @@ declare const CommandPopover: React.FC<CommandPopoverProps>;
  */
 
 /**
- * Utility to parse plain text with commands into structured format
- *
- * @param text - Plain text with prefix + action format (e.g., "Hello @user_123")
- * @param prefixes - Prefix configurations to detect
- * @returns Parsed commands with positions
+ * Extended prefix configuration type for internal parsing
  */
-declare const parse_commands_from_text: (text: string, prefixes: {
+type PrefixConfigForParsing = {
     char: string;
     commands: {
         action: string;
         action_label: string;
     }[];
-}[]) => {
+    color?: PrefixColor;
+};
+/**
+ * Utility to parse plain text with commands into structured format
+ *
+ * @param text - Plain text with prefix + action format (e.g., "Hello @user_123")
+ * @param prefixes - Prefix configurations to detect
+ * @returns Parsed commands with positions
+ */
+declare const parse_commands_from_text: (text: string, prefixes: PrefixConfigForParsing[]) => {
     action: string;
     action_label: string;
     prefix: string;
     position: number;
     length: number;
+    color?: PrefixColor;
 }[];
 /**
  * Convert parsed commands to TipTap content structure
@@ -479,13 +503,7 @@ declare const parse_commands_from_text: (text: string, prefixes: {
  * @param variant - Pill variant style
  * @returns TipTap JSON content structure
  */
-declare const text_to_tiptap_content: (text: string, prefixes: {
-    char: string;
-    commands: {
-        action: string;
-        action_label: string;
-    }[];
-}[], variant?: "default" | "outline" | "subtle") => Record<string, unknown>;
+declare const text_to_tiptap_content: (text: string, prefixes: PrefixConfigForParsing[], variant?: "default" | "outline" | "subtle") => Record<string, unknown>;
 
 /**
  * HazoUiTextbox - Single-line Input with Command Support
@@ -511,4 +529,4 @@ declare const HazoUiTextbox: React.FC<HazoUiTextboxProps>;
  */
 declare const HazoUiTextarea: React.FC<HazoUiTextareaProps>;
 
-export { type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type FilterConfig, type FilterField, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, type InsertedCommand, type PrefixConfig, type RteAttachment, type RteOutput, type RteVariable, type SortConfig, type SortField, type SuggestionState, create_command_suggestion_extension, parse_commands_from_text, text_to_tiptap_content };
+export { type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type FilterConfig, type FilterField, 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, parse_commands_from_text, text_to_tiptap_content };

package/dist/index.d.ts

@@ -170,6 +170,17 @@ declare const HazoUiRte: React.FC<HazoUiRteProps>;
  * prefix-triggered command menus (e.g., @mentions, /commands, #tags).
  */
 
+/**
+ * Custom color configuration for prefix styling
+ */
+interface PrefixColor {
+    /** Background color (e.g., "#E0F2FE", "hsl(200, 95%, 90%)") */
+    bg?: string;
+    /** Text/foreground color (e.g., "#0369A1", "hsl(200, 70%, 30%)") */
+    fg?: string;
+    /** Border color (e.g., "#7DD3FC", "hsl(200, 80%, 70%)") */
+    border?: string;
+}
 /**
  * Individual command item that can be selected from the command menu
  */
@@ -195,6 +206,8 @@ interface PrefixConfig {
     commands: CommandItem[];
     /** Allow free text entries that don't match existing commands */
     allow_free_text?: boolean;
+    /** Custom color styling for this prefix's pills */
+    color?: PrefixColor;
 }
 /**
  * Represents a command that has been inserted into the text
@@ -251,6 +264,8 @@ interface CommandPopoverProps {
     on_close: () => void;
     /** Called when selection changes via keyboard */
     on_selection_change: (index: number) => void;
+    /** Custom color for the prefix (shows color indicator dot) */
+    prefix_color?: PrefixColor;
 }
 /**
  * Props for the command pill component
@@ -268,6 +283,8 @@ interface CommandPillProps {
     selected?: boolean;
     /** Pill style variant */
     variant?: "default" | "outline" | "subtle";
+    /** Custom color styling (overrides variant when provided) */
+    color?: PrefixColor;
     /** Called when the pill is clicked (to open edit popover) */
     on_click?: () => void;
 }
@@ -368,6 +385,7 @@ declare module "@tiptap/core" {
                 action: string;
                 action_label: string;
                 variant?: "default" | "outline" | "subtle";
+                color?: PrefixColor;
             }) => ReturnType;
             /**
              * Update an existing command node by ID
@@ -452,24 +470,30 @@ declare const CommandPopover: React.FC<CommandPopoverProps>;
  */
 
 /**
- * Utility to parse plain text with commands into structured format
- *
- * @param text - Plain text with prefix + action format (e.g., "Hello @user_123")
- * @param prefixes - Prefix configurations to detect
- * @returns Parsed commands with positions
+ * Extended prefix configuration type for internal parsing
  */
-declare const parse_commands_from_text: (text: string, prefixes: {
+type PrefixConfigForParsing = {
     char: string;
     commands: {
         action: string;
         action_label: string;
     }[];
-}[]) => {
+    color?: PrefixColor;
+};
+/**
+ * Utility to parse plain text with commands into structured format
+ *
+ * @param text - Plain text with prefix + action format (e.g., "Hello @user_123")
+ * @param prefixes - Prefix configurations to detect
+ * @returns Parsed commands with positions
+ */
+declare const parse_commands_from_text: (text: string, prefixes: PrefixConfigForParsing[]) => {
     action: string;
     action_label: string;
     prefix: string;
     position: number;
     length: number;
+    color?: PrefixColor;
 }[];
 /**
  * Convert parsed commands to TipTap content structure
@@ -479,13 +503,7 @@ declare const parse_commands_from_text: (text: string, prefixes: {
  * @param variant - Pill variant style
  * @returns TipTap JSON content structure
  */
-declare const text_to_tiptap_content: (text: string, prefixes: {
-    char: string;
-    commands: {
-        action: string;
-        action_label: string;
-    }[];
-}[], variant?: "default" | "outline" | "subtle") => Record<string, unknown>;
+declare const text_to_tiptap_content: (text: string, prefixes: PrefixConfigForParsing[], variant?: "default" | "outline" | "subtle") => Record<string, unknown>;
 
 /**
  * HazoUiTextbox - Single-line Input with Command Support
@@ -511,4 +529,4 @@ declare const HazoUiTextbox: React.FC<HazoUiTextboxProps>;
  */
 declare const HazoUiTextarea: React.FC<HazoUiTextareaProps>;
 
-export { type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type FilterConfig, type FilterField, HazoUiFlexInput, type HazoUiFlexInputProps, HazoUiFlexRadio, type HazoUiFlexRadioItem, type HazoUiFlexRadioProps, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte, type HazoUiRteProps, HazoUiTextarea, type HazoUiTextareaProps, HazoUiTextbox, type HazoUiTextboxProps, type InsertedCommand, type PrefixConfig, type RteAttachment, type RteOutput, type RteVariable, type SortConfig, type SortField, type SuggestionState, create_command_suggestion_extension, parse_commands_from_text, text_to_tiptap_content };
+export { type BaseCommandInputProps, type CommandEditContext, type CommandItem, CommandNodeExtension, CommandPill, type CommandPillProps, CommandPopover, type CommandPopoverProps, type CommandTextOutput, type FilterConfig, type FilterField, 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, parse_commands_from_text, text_to_tiptap_content };

package/dist/index.js

@@ -302,7 +302,7 @@ var CommandGroup = React27.forwardRef(({ className, heading, children, ...props
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React27.forwardRef(({ className, onSelect, value, style, ...props }, ref) => {
+var CommandItem = React27.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -315,13 +315,16 @@ var CommandItem = React27.forwardRef(({ className, onSelect, value, style, ...pr
       className: cn(
         "cls_command_item",
         "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        // When selected, apply accent background and ensure all text is visible
+        selected && "bg-accent text-accent-foreground [&_.text-muted-foreground]:text-accent-foreground/70",
         className
       ),
-      style: {
-        // Ensure items have opaque background (inherit from popover container)
-        backgroundColor: "inherit",
+      style: selected ? {
+        // Explicit inline styles as fallback for consumers with non-HSL CSS variables
+        backgroundColor: "var(--accent, #f1f5f9)",
+        color: "var(--accent-foreground, #0f172a)",
         ...style
-      },
+      } : style,
       onClick: handleClick,
       ...props
     }
@@ -4276,8 +4279,21 @@ var get_variant_classes = (variant = "default") => {
       return "bg-primary/10 text-primary border-primary/20";
   }
 };
+var get_custom_color_styles = (color_bg, color_fg, color_border) => {
+  if (!color_bg && !color_fg && !color_border) {
+    return {};
+  }
+  return {
+    ...color_bg && { backgroundColor: color_bg },
+    ...color_fg && { color: color_fg },
+    ...color_border && { borderColor: color_border }
+  };
+};
+var has_custom_colors = (color_bg, color_fg, color_border) => {
+  return Boolean(color_bg || color_fg || color_border);
+};
 var CommandPillView = ({ node, selected, editor }) => {
-  const { prefix, action, action_label, id, variant } = node.attrs;
+  const { prefix, action, action_label, id, variant, color_bg, color_fg, color_border } = node.attrs;
   const handle_click = () => {
     const event = new CustomEvent("command-pill-click", {
       detail: {
@@ -4291,6 +4307,8 @@ var CommandPillView = ({ node, selected, editor }) => {
     });
     document.dispatchEvent(event);
   };
+  const use_custom_colors = has_custom_colors(color_bg, color_fg, color_border);
+  const custom_styles = get_custom_color_styles(color_bg, color_fg, color_border);
   return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsxs(
     "span",
     {
@@ -4303,17 +4321,19 @@ var CommandPillView = ({ node, selected, editor }) => {
         "border",
         "cursor-pointer select-none",
         "transition-all duration-150",
-        get_variant_classes(variant),
+        // Only apply variant classes if no custom colors
+        !use_custom_colors && get_variant_classes(variant),
         selected && "ring-2 ring-ring ring-offset-1",
         "hover:opacity-80"
       ),
+      style: custom_styles,
       contentEditable: false,
       "data-command-id": id,
       "data-command-prefix": prefix,
       "data-command-action": action,
       onClick: handle_click,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground opacity-70", children: prefix }),
+        /* @__PURE__ */ jsx("span", { className: cn(!use_custom_colors && "text-muted-foreground opacity-70"), style: use_custom_colors ? { opacity: 0.7 } : void 0, children: prefix }),
         /* @__PURE__ */ jsx("span", { children: action_label })
       ]
     }
@@ -4365,6 +4385,27 @@ var CommandNodeExtension = Node.create({
         renderHTML: (attributes) => ({
           "data-command-variant": attributes.variant
         })
+      },
+      color_bg: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-command-color-bg"),
+        renderHTML: (attributes) => ({
+          "data-command-color-bg": attributes.color_bg
+        })
+      },
+      color_fg: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-command-color-fg"),
+        renderHTML: (attributes) => ({
+          "data-command-color-fg": attributes.color_fg
+        })
+      },
+      color_border: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-command-color-border"),
+        renderHTML: (attributes) => ({
+          "data-command-color-border": attributes.color_border
+        })
       }
     };
   },
@@ -4395,11 +4436,15 @@ var CommandNodeExtension = Node.create({
   addCommands() {
     return {
       insertCommand: (attrs) => ({ commands }) => {
+        const { color: color2, ...rest_attrs } = attrs;
         return commands.insertContent({
           type: this.name,
           attrs: {
-            ...attrs,
-            id: generate_command_id()
+            ...rest_attrs,
+            id: generate_command_id(),
+            ...color2?.bg && { color_bg: color2.bg },
+            ...color2?.fg && { color_fg: color2.fg },
+            ...color2?.border && { color_border: color2.border }
           }
         });
       },
@@ -4524,12 +4569,13 @@ var create_command_suggestion_extension = (config) => {
     });
   });
 };
-var insert_command_at_position = (editor, command, prefix, range, variant = "default") => {
+var insert_command_at_position = (editor, command, prefix, range, variant = "default", color2) => {
   editor.chain().focus().deleteRange(range).insertCommand({
     prefix,
     action: command.action,
     action_label: command.action_label,
-    variant
+    variant,
+    color: color2
   }).run();
 };
 var get_variant_classes2 = (variant = "default") => {
@@ -4543,6 +4589,16 @@ var get_variant_classes2 = (variant = "default") => {
       return "bg-primary/10 text-primary border-primary/20 hover:bg-primary/15";
   }
 };
+var get_custom_color_styles2 = (color2) => {
+  if (!color2) {
+    return {};
+  }
+  return {
+    ...color2.bg && { backgroundColor: color2.bg },
+    ...color2.fg && { color: color2.fg },
+    ...color2.border && { borderColor: color2.border }
+  };
+};
 var CommandPill = ({
   prefix,
   action,
@@ -4550,8 +4606,11 @@ var CommandPill = ({
   id,
   selected = false,
   variant = "default",
+  color: color2,
   on_click
 }) => {
+  const use_custom_colors = Boolean(color2?.bg || color2?.fg || color2?.border);
+  const custom_styles = get_custom_color_styles2(color2);
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -4563,10 +4622,12 @@ var CommandPill = ({
         "text-sm font-medium",
         "border",
         "transition-all duration-150",
-        get_variant_classes2(variant),
+        // Only apply variant classes if no custom colors
+        !use_custom_colors && get_variant_classes2(variant),
         selected && "ring-2 ring-ring ring-offset-1",
         on_click && "cursor-pointer"
       ),
+      style: custom_styles,
       "data-command-id": id,
       "data-command-prefix": prefix,
       "data-command-action": action,
@@ -4580,7 +4641,7 @@ var CommandPill = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground opacity-70", children: prefix }),
+        /* @__PURE__ */ jsx("span", { className: cn(!use_custom_colors && "text-muted-foreground opacity-70"), style: use_custom_colors ? { opacity: 0.7 } : void 0, children: prefix }),
         /* @__PURE__ */ jsx("span", { children: action_label })
       ]
     }
@@ -4607,7 +4668,8 @@ var CommandPopover = ({
   position,
   on_select,
   on_close,
-  on_selection_change: _on_selection_change
+  on_selection_change: _on_selection_change,
+  prefix_color
 }) => {
   const container_ref = React27.useRef(null);
   const grouped_commands = React27.useMemo(
@@ -4681,10 +4743,18 @@ var CommandPopover = ({
                   {
                     value: cmd.action,
                     onSelect: () => on_select(cmd),
-                    className: cn(
-                      flat_idx === selected_index && "bg-accent"
-                    ),
+                    selected: flat_idx === selected_index,
                     children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                      prefix_color && (prefix_color.bg || prefix_color.fg) && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "flex-shrink-0 w-2 h-2 rounded-full",
+                          style: {
+                            backgroundColor: prefix_color.bg || prefix_color.fg,
+                            border: prefix_color.border ? `1px solid ${prefix_color.border}` : void 0
+                          }
+                        }
+                      ),
                       cmd.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
                       /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                         /* @__PURE__ */ jsxs("div", { className: "font-medium truncate", children: [
@@ -4717,7 +4787,8 @@ var parse_commands_from_text = (text, prefixes) => {
     for (const cmd of prefix_config.commands) {
       action_to_label.set(`${prefix_config.char}${cmd.action}`, {
         label: cmd.action_label,
-        prefix: prefix_config.char
+        prefix: prefix_config.char,
+        color: prefix_config.color
       });
     }
   }
@@ -4736,7 +4807,8 @@ var parse_commands_from_text = (text, prefixes) => {
         action_label: info.label,
         prefix,
         position: match.index,
-        length: full_match.length
+        length: full_match.length,
+        color: info.color
       });
     }
   }
@@ -4775,7 +4847,10 @@ var text_to_tiptap_content = (text, prefixes, variant = "default") => {
         prefix: cmd.prefix,
         action: cmd.action,
         action_label: cmd.action_label,
-        variant
+        variant,
+        ...cmd.color?.bg && { color_bg: cmd.color.bg },
+        ...cmd.color?.fg && { color_fg: cmd.color.fg },
+        ...cmd.color?.border && { color_border: cmd.color.border }
       }
     });
     last_end = cmd.position + cmd.length;
@@ -5018,19 +5093,22 @@ var HazoUiTextbox = ({
   const handle_command_select = React27.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
+      const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
+      const prefix_color = prefix_config?.color;
       insert_command_at_position(
         editor,
         command,
         suggestion_state.prefix,
         suggestion_state.range,
-        pill_variant
+        pill_variant,
+        prefix_color
       );
       if (on_command_insert) {
         on_command_insert(command, suggestion_state.prefix);
       }
       set_suggestion_state(null);
     },
-    [editor, suggestion_state, pill_variant, on_command_insert]
+    [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
   const handle_popover_close = React27.useCallback(() => {
     set_suggestion_state(null);
@@ -5252,7 +5330,8 @@ var HazoUiTextbox = ({
             },
             on_select: handle_command_select,
             on_close: handle_popover_close,
-            on_selection_change: set_selected_index
+            on_selection_change: set_selected_index,
+            prefix_color: prefixes.find((p) => p.char === suggestion_state.prefix)?.color
           }
         ),
         edit_context && mounted && createPortal(
@@ -5558,19 +5637,22 @@ var HazoUiTextarea = ({
   const handle_command_select = React27.useCallback(
     (command) => {
       if (!editor || !suggestion_state) return;
+      const prefix_config = prefixes.find((p) => p.char === suggestion_state.prefix);
+      const prefix_color = prefix_config?.color;
       insert_command_at_position(
         editor,
         command,
         suggestion_state.prefix,
         suggestion_state.range,
-        pill_variant
+        pill_variant,
+        prefix_color
       );
       if (on_command_insert) {
         on_command_insert(command, suggestion_state.prefix);
       }
       set_suggestion_state(null);
     },
-    [editor, suggestion_state, pill_variant, on_command_insert]
+    [editor, suggestion_state, pill_variant, on_command_insert, prefixes]
   );
   const handle_popover_close = React27.useCallback(() => {
     set_suggestion_state(null);
@@ -5796,7 +5878,8 @@ var HazoUiTextarea = ({
             },
             on_select: handle_command_select,
             on_close: handle_popover_close,
-            on_selection_change: set_selected_index
+            on_selection_change: set_selected_index,
+            prefix_color: prefixes.find((p) => p.char === suggestion_state.prefix)?.color
           }
         ),
         edit_context && mounted && createPortal(