hazo_ui 2.4.3 → 2.4.5

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, ...props }, ref) => {
+var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, selected, style, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -372,9 +372,18 @@ var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, .
     {
       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",
+        // 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: 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
     }
@@ -4700,7 +4709,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__ */ jsxRuntime.jsxs(Command, { className: "rounded-md", children: [
         query && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: [
@@ -4730,9 +4743,7 @@ 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: [
                       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: [
@@ -5864,7 +5875,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__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
@@ -5878,6 +5892,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__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
@@ -5901,6 +5919,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__ */ jsxRuntime.jsx("span", { children: "Remove" })
                     }