hazo_ui 2.4.2 → 2.4.4

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, ...props }, ref) => {
+var CommandItem = React27.forwardRef(({ className, onSelect, value, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -313,9 +313,15 @@ var CommandItem = React27.forwardRef(({ className, onSelect, value, ...props },
     {
       ref,
       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",
         className
       ),
+      style: {
+        // Ensure items have opaque background (inherit from popover container)
+        backgroundColor: "inherit",
+        ...style
+      },
       onClick: handleClick,
       ...props
     }
@@ -4450,28 +4456,34 @@ var create_suggestion_config = (prefix_config, on_suggestion_change, on_insert_c
     render: () => {
       return {
         onStart: (props) => {
-          on_suggestion_change({
-            is_active: true,
-            query: props.query,
-            prefix: prefix_config.char,
-            client_rect: props.clientRect,
-            commands: prefix_config.commands,
-            range: props.range
+          queueMicrotask(() => {
+            on_suggestion_change({
+              is_active: true,
+              query: props.query,
+              prefix: prefix_config.char,
+              client_rect: props.clientRect,
+              commands: prefix_config.commands,
+              range: props.range
+            });
           });
         },
         onUpdate: (props) => {
-          on_suggestion_change({
-            is_active: true,
-            query: props.query,
-            prefix: prefix_config.char,
-            client_rect: props.clientRect,
-            commands: prefix_config.commands,
-            range: props.range
+          queueMicrotask(() => {
+            on_suggestion_change({
+              is_active: true,
+              query: props.query,
+              prefix: prefix_config.char,
+              client_rect: props.clientRect,
+              commands: prefix_config.commands,
+              range: props.range
+            });
           });
         },
         onKeyDown: (props) => {
           if (props.event.key === "Escape") {
-            on_suggestion_change(null);
+            queueMicrotask(() => {
+              on_suggestion_change(null);
+            });
             return true;
           }
           if (props.event.key === "ArrowUp" || props.event.key === "ArrowDown" || props.event.key === "Enter") {
@@ -4480,7 +4492,9 @@ var create_suggestion_config = (prefix_config, on_suggestion_change, on_insert_c
           return false;
         },
         onExit: () => {
-          on_suggestion_change(null);
+          queueMicrotask(() => {
+            on_suggestion_change(null);
+          });
         }
       };
     },
@@ -4633,7 +4647,11 @@ var CommandPopover = ({
         position: "fixed",
         top: position.top,
         left: position.left,
-        zIndex: 9999
+        zIndex: 9999,
+        // Fallback background for consuming apps that may use hex CSS variables
+        // (Tailwind's bg-popover generates hsl(var(--popover)) which fails with hex values)
+        backgroundColor: "var(--popover, hsl(0 0% 100%))",
+        color: "var(--popover-foreground, hsl(222.2 84% 4.9%))"
       },
       children: /* @__PURE__ */ jsxs(Command, { className: "rounded-md", children: [
         query && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: [
@@ -5797,7 +5815,10 @@ var HazoUiTextarea = ({
                 position: "fixed",
                 top: edit_context.rect.y,
                 left: edit_context.rect.x,
-                zIndex: 9999
+                zIndex: 9999,
+                // Fallback background for consuming apps that may use hex CSS variables
+                backgroundColor: "var(--popover, #ffffff)",
+                color: "var(--popover-foreground, #0f172a)"
               },
               children: /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
                 /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
@@ -5811,6 +5832,10 @@ var HazoUiTextarea = ({
                         idx === edit_selected_index && "bg-accent",
                         cmd.action === edit_context.command.action && "font-medium"
                       ),
+                      style: {
+                        // Inherit background from parent, use accent color when selected
+                        backgroundColor: idx === edit_selected_index ? "var(--accent, #f1f5f9)" : "inherit"
+                      },
                       onClick: () => handle_command_update(cmd),
                       children: [
                         cmd.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
@@ -5834,6 +5859,10 @@ var HazoUiTextarea = ({
                         "hover:bg-destructive/10",
                         edit_selected_index === edit_commands.length && "bg-destructive/10"
                       ),
+                      style: {
+                        // Inherit background from parent, use light destructive color when selected
+                        backgroundColor: edit_selected_index === edit_commands.length ? "rgba(239, 68, 68, 0.1)" : "inherit"
+                      },
                       onClick: handle_command_remove,
                       children: /* @__PURE__ */ jsx("span", { children: "Remove" })
                     }