hazo_ui 2.4.4 → 2.5.0

package/dist/index.cjs

@@ -361,7 +361,7 @@ var CommandGroup = React27__namespace.forwardRef(({ className, heading, children
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, style, ...props }, ref) => {
+var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -374,13 +374,16 @@ var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, s
       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
     }
@@ -4335,8 +4338,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: {
@@ -4350,6 +4366,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__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -4362,17 +4380,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__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground opacity-70", children: prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(!use_custom_colors && "text-muted-foreground opacity-70"), style: use_custom_colors ? { opacity: 0.7 } : void 0, children: prefix }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: action_label })
       ]
     }
@@ -4424,6 +4444,27 @@ var CommandNodeExtension = core.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
+        })
       }
     };
   },
@@ -4454,11 +4495,15 @@ var CommandNodeExtension = core.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 }
           }
         });
       },
@@ -4583,12 +4628,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") => {
@@ -4602,6 +4648,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,
@@ -4609,8 +4665,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__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -4622,10 +4681,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,
@@ -4639,7 +4700,7 @@ var CommandPill = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground opacity-70", children: prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(!use_custom_colors && "text-muted-foreground opacity-70"), style: use_custom_colors ? { opacity: 0.7 } : void 0, children: prefix }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: action_label })
       ]
     }
@@ -4666,7 +4727,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__namespace.useRef(null);
   const grouped_commands = React27__namespace.useMemo(
@@ -4740,10 +4802,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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                      prefix_color && (prefix_color.bg || prefix_color.fg) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium truncate", children: [
@@ -4776,7 +4846,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
       });
     }
   }
@@ -4795,7 +4866,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
       });
     }
   }
@@ -4834,7 +4906,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;
@@ -5077,19 +5152,22 @@ var HazoUiTextbox = ({
   const handle_command_select = React27__namespace.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__namespace.useCallback(() => {
     set_suggestion_state(null);
@@ -5311,7 +5389,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 && reactDom.createPortal(
@@ -5617,19 +5696,22 @@ var HazoUiTextarea = ({
   const handle_command_select = React27__namespace.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__namespace.useCallback(() => {
     set_suggestion_state(null);
@@ -5855,7 +5937,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 && reactDom.createPortal(