@moontra/moonui-pro 2.5.7 → 2.5.8

package/dist/index.mjs

@@ -56430,6 +56430,10 @@ function Sidebar({
       }
     }
   }, [onNavigate, isMobile]);
+  const handleSearchChange = useCallback((value) => {
+    setSearchQuery(value);
+    onSearchChange?.(value);
+  }, [onSearchChange]);
   const filterItems = useCallback((items, query) => {
     if (!query)
       return items;
@@ -56561,21 +56565,18 @@ function Sidebar({
     showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
-        MoonUIInputPro,
+        "input",
         {
           ref: searchInputRef,
           type: "search",
           placeholder: searchPlaceholder,
           value: searchQuery,
-          onChange: (e) => {
-            setSearchQuery(e.target.value);
-            onSearchChange?.(e.target.value);
-          },
+          onChange: (e) => handleSearchChange(e.target.value),
           autoComplete: "off",
           autoCorrect: "off",
           autoCapitalize: "off",
           spellCheck: "false",
-          className: "pl-9 pr-9"
+          className: "w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
         },
         "sidebar-search-input"
       ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/sidebar/index.tsx

@@ -28,7 +28,6 @@ import {
   Sparkles,
   Command
 } from 'lucide-react'
-import { Input } from '../ui/input'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -258,6 +257,11 @@ export function Sidebar({
     }
   }, [onNavigate, isMobile])
 
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchQuery(value)
+    onSearchChange?.(value)
+  }, [onSearchChange])
+
   const filterItems = useCallback((items: SidebarItem[], query: string): SidebarItem[] => {
     if (!query) return items
     
@@ -435,21 +439,18 @@ export function Sidebar({
         <div className="p-4 border-b">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input
+            <input
               key="sidebar-search-input"
               ref={searchInputRef}
               type="search"
               placeholder={searchPlaceholder}
               value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value)
-                onSearchChange?.(e.target.value)
-              }}
+              onChange={(e) => handleSearchChange(e.target.value)}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck="false"
-              className="pl-9 pr-9"
+              className="w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             />
             {keyboardShortcuts && (
               <kbd className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex">