"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { Search, Command, ChevronRight, LucideIcon, PlusCircle, Users, CreditCard, Settings, FileText } from "lucide-react"; // --- TYPES --- export type CommandAccentColor = "orange" | "indigo" | "emerald"; export interface CommandItem { id: string; icon: LucideIcon; label: string; shortcut?: string; onClick?: () => void; } export interface CommandGroup { id: string; title: string; items: CommandItem[]; } export interface SearchBarCommandProps extends Omit, "ref" | "children"> { groups: CommandGroup[]; accent?: CommandAccentColor; placeholder?: string; /** React 19 native ref support */ ref?: React.Ref; } /** * Command Menu Pro (v2.1 Ultra) * A premium, bimodal command palette with real-time filtering and tactile feedback. * Optimized for React 19, fully reusable, and JIT-safe. */ export const SearchBarCommand = ({ groups, accent = "orange", placeholder = "Search components, docs, or actions...", className, ref, ...props }: SearchBarCommandProps) => { const [query, setQuery] = useState(""); // Real-time filtering logic const filteredGroups = useMemo(() => { if (!query.trim()) return groups; return groups.map(group => ({ ...group, items: group.items.filter(item => item.label.toLowerCase().includes(query.toLowerCase()) ) })).filter(group => group.items.length > 0); // Remove empty groups }, [query, groups]); // Safe Color Mapping for Tailwind JIT const themeMaps: Record = { orange: { ringBorder: "focus-within:ring-orange-500/10 focus-within:border-orange-500/50", iconHover: "group-hover:text-orange-500", textHover: "text-orange-500" }, indigo: { ringBorder: "focus-within:ring-indigo-500/10 focus-within:border-indigo-500/50", iconHover: "group-hover:text-indigo-500", textHover: "text-indigo-500" }, emerald: { ringBorder: "focus-within:ring-emerald-500/10 focus-within:border-emerald-500/50", iconHover: "group-hover:text-emerald-500", textHover: "text-emerald-500" } }; const current = themeMaps[accent]; return (

{/* SEARCH INPUT HEADER */}

setQuery(e.target.value)} placeholder={placeholder} className="flex-1 bg-transparent px-4 text-base font-medium text-neutral-900 dark:text-white placeholder:text-neutral-400 dark:placeholder:text-neutral-600 appearance-none outline-none border-none shadow-none ring-0 focus:ring-0" autoFocus />

{/* RESULTS AREA */}

{filteredGroups.length > 0 ? ( filteredGroups.map((group) => (

{group.title}

{group.items.map((item) => (

{item.label}

{item.shortcut && ( CMD + {item.shortcut} )}

))}

)) ) : ( // EMPTY STATE

No results found.

Try searching for something else.

)}

{/* FOOTER */}

Navigate ↑↓ Open ↵

Uixtra Command

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function SearchBarCommandDemo() { const mockGroups: CommandGroup[] = [ { id: "quick-actions", title: "Quick Actions", items: [ { id: "create-project", icon: PlusCircle, label: "Create new project", shortcut: "P" }, { id: "invite-team", icon: Users, label: "Invite team members", shortcut: "I" }, { id: "billing", icon: CreditCard, label: "Billing & Subscriptions", shortcut: "B" }, { id: "settings", icon: Settings, label: "Workspace settings", shortcut: "S" }, ] }, { id: "recent-docs", title: "Recent Searches", items: [ { id: "doc-auth", icon: FileText, label: "Authentication integration guide" }, { id: "doc-framer", icon: FileText, label: "Framer Motion physics tutorial" }, ] } ]; return (

); }