"use client"; /** * @author: @kokonutui * @description: A modern search bar component with action buttons and suggestions * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { AudioLines, BarChart2, LayoutGrid, PlaneTakeoff, Search, Send, Video, } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import { useCallback, useEffect, useMemo, useState } from "react"; import { Input } from "@/components/ui/input"; import useDebounce from "@/hooks/use-debounce"; interface Action { id: string; label: string; icon: React.ReactNode; description?: string; short?: string; end?: string; } interface SearchResult { actions: Action[]; } const ANIMATION_VARIANTS = { container: { hidden: { opacity: 0, height: 0 }, show: { opacity: 1, height: "auto", transition: { height: { duration: 0.4 }, staggerChildren: 0.1, }, }, exit: { opacity: 0, height: 0, transition: { height: { duration: 0.3 }, opacity: { duration: 0.2 }, }, }, }, item: { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { duration: 0.3 }, }, exit: { opacity: 0, y: -10, transition: { duration: 0.2 }, }, }, } as const; const allActionsSample = [ { id: "1", label: "Book tickets", icon: , description: "Operator", short: "⌘K", end: "Agent", }, { id: "2", label: "Summarize", icon: , description: "gpt-5", short: "⌘cmd+p", end: "Command", }, { id: "3", label: "Screen Studio", icon:

Action Search Bar

Instalação

Dependências

Registry dependencies