@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/motions/motion-search-bar.tsx

@@ -0,0 +1,1013 @@
+import React, { useState, useEffect, useMemo, useCallback, createContext, useContext } from "react"
+import { motion, AnimatePresence } from "motion/react"
+import { Search, Send } from "lucide-react"
+import { Calendar, Smile, Calculator, User, CreditCard, Settings, PlaneTakeoff, BarChart2, Video, AudioLines, LayoutGrid } from "lucide-react"
+
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface CommandContextType {
+  query: string
+  setQuery: (query: string) => void
+  activeIndex: number
+  setActiveIndex: (index: number) => void
+  selectedValue: string | null
+  setSelectedValue: (value: string | null) => void
+  items: CommandItemData[]
+  registerItem: (item: CommandItemData) => void
+  unregisterItem: (id: string) => void
+}
+
+interface CommandItemData {
+  id: string
+  value: string
+  keywords?: string[]
+  disabled?: boolean
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const MotionSearchBarContext = createContext<CommandContextType | null>(null)
+
+const useMotionSearchBar = () => {
+  const context = useContext(MotionSearchBarContext)
+  if (!context) {
+    throw new Error("MotionSearchBar components must be used within <MotionSearchBar>")
+  }
+  return context
+}
+
+// ============================================================================
+// Animation Variants
+// ============================================================================
+
+const VARIANTS = {
+  container: {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: { staggerChildren: 0.05 },
+    },
+  },
+  item: {
+    hidden: { opacity: 0, y: 4 },
+    show: { opacity: 1, y: 0 },
+  },
+}
+
+// ============================================================================
+// MotionSearchBar (Root)
+// ============================================================================
+
+interface CommandProps {
+  children: React.ReactNode
+  className?: string
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export function MotionSearchBar({ children, className = "", value, onValueChange }: CommandProps) {
+  const [query, setQuery] = useState("")
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [selectedValue, setSelectedValue] = useState<string | null>(value || null)
+  const [items, setItems] = useState<CommandItemData[]>([])
+
+  const registerItem = useCallback((item: CommandItemData) => {
+    setItems((prev) => {
+      if (prev.find((i) => i.id === item.id)) return prev
+      return [...prev, item]
+    })
+  }, [])
+
+  const unregisterItem = useCallback((id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id))
+  }, [])
+
+  useEffect(() => {
+    if (selectedValue && onValueChange) {
+      onValueChange(selectedValue)
+    }
+  }, [selectedValue, onValueChange])
+
+  const contextValue: CommandContextType = {
+    query,
+    setQuery,
+    activeIndex,
+    setActiveIndex,
+    selectedValue,
+    setSelectedValue,
+    items,
+    registerItem,
+    unregisterItem,
+  }
+
+  return (
+    <MotionSearchBarContext.Provider value={contextValue}>
+      <div
+        className={`flex flex-col overflow-hidden rounded-lg border bg-white dark:bg-zinc-950 ${className}`}
+        cmdk-root=""
+      >
+        {children}
+      </div>
+    </MotionSearchBarContext.Provider>
+  )
+}
+
+// ============================================================================
+// MotionSearchBarInput
+// ============================================================================
+
+interface CommandInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
+  showIcon?: boolean
+}
+
+export function MotionSearchBarInput({ placeholder = "Type a command or search...", showIcon = true, className = "", ...props }: CommandInputProps) {
+  const { query, setQuery, activeIndex, setActiveIndex, items, setSelectedValue } = useMotionSearchBar()
+
+  const filteredItems = useMemo(() => {
+    if (!query) return items
+    const normalizedQuery = query.toLowerCase()
+    return items.filter((item) => {
+      const searchText = [item.value, ...(item.keywords || [])].join(" ").toLowerCase()
+      return searchText.includes(normalizedQuery)
+    })
+  }, [query, items])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!filteredItems.length) return
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault()
+          setActiveIndex((prev) => (prev < filteredItems.length - 1 ? prev + 1 : 0))
+          break
+        case "ArrowUp":
+          e.preventDefault()
+          setActiveIndex((prev) => (prev > 0 ? prev - 1 : filteredItems.length - 1))
+          break
+        case "Enter":
+          e.preventDefault()
+          if (filteredItems[activeIndex] && !filteredItems[activeIndex].disabled) {
+            setSelectedValue(filteredItems[activeIndex].value)
+          }
+          break
+        case "Escape":
+          setQuery("")
+          setActiveIndex(0)
+          break
+      }
+    },
+    [filteredItems, activeIndex, setActiveIndex, setSelectedValue, setQuery]
+  )
+
+  return (
+    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+      {showIcon && (
+        <div className="mr-2 h-4 w-4 shrink-0">
+          <AnimatePresence mode="wait">
+            {query ? (
+              <motion.div
+                key="send"
+                initial={{ scale: 0, rotate: -180 }}
+                animate={{ scale: 1, rotate: 0 }}
+                exit={{ scale: 0, rotate: 180 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Send className="h-4 w-4 text-muted-foreground" />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="search"
+                initial={{ scale: 0, rotate: -180 }}
+                animate={{ scale: 1, rotate: 0 }}
+                exit={{ scale: 0, rotate: 180 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Search className="h-4 w-4 text-muted-foreground" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
+      <input
+        className={`flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value)
+          setActiveIndex(0)
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        cmdk-input=""
+        autoComplete="off"
+        {...props}
+      />
+    </div>
+  )
+}
+
+// ============================================================================
+// MotionSearchBarList
+// ============================================================================
+
+interface CommandListProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function MotionSearchBarList({ children, className = "" }: CommandListProps) {
+  return (
+    <motion.div
+      className={`max-h-[300px] overflow-y-auto overflow-x-hidden ${className}`}
+      cmdk-list=""
+      variants={VARIANTS.container}
+      initial="hidden"
+      animate="show"
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+// ============================================================================
+// MotionSearchBarEmpty
+// ============================================================================
+
+interface CommandEmptyProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function MotionSearchBarEmpty({ children, className = "" }: CommandEmptyProps) {
+  const { query, items } = useMotionSearchBar()
+  
+  const filteredItems = useMemo(() => {
+    if (!query) return items
+    const normalizedQuery = query.toLowerCase()
+    return items.filter((item) => {
+      const searchText = [item.value, ...(item.keywords || [])].join(" ").toLowerCase()
+      return searchText.includes(normalizedQuery)
+    })
+  }, [query, items])
+
+  if (filteredItems.length > 0) return null
+
+  return (
+    <div className={`py-6 text-center text-sm text-muted-foreground ${className}`} cmdk-empty="">
+      {children}
+    </div>
+  )
+}
+
+// ============================================================================
+// MotionSearchBarGroup
+// ============================================================================
+
+interface CommandGroupProps {
+  children: React.ReactNode
+  heading?: string
+  className?: string
+}
+
+export function MotionSearchBarGroup({ children, heading, className = "" }: CommandGroupProps) {
+  return (
+    <div className={`overflow-hidden p-1 ${className}`} cmdk-group="">
+      {heading && (
+        <div
+          className="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+          cmdk-group-heading=""
+        >
+          {heading}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+// ============================================================================
+// MotionSearchBarItem
+// ============================================================================
+
+interface CommandItemProps {
+  children: React.ReactNode
+  value?: string
+  keywords?: string[]
+  onSelect?: (value: string) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function MotionSearchBarItem({
+  children,
+  value,
+  keywords = [],
+  onSelect,
+  disabled = false,
+  className = "",
+}: CommandItemProps) {
+  const { query, activeIndex, setSelectedValue, registerItem, unregisterItem, items } = useMotionSearchBar()
+  const id = React.useId()
+  const itemValue = value || (typeof children === "string" ? children : id)
+
+  useEffect(() => {
+    registerItem({ id, value: itemValue, keywords, disabled })
+    return () => unregisterItem(id)
+  }, [id, itemValue, keywords, disabled, registerItem, unregisterItem])
+
+  const filteredItems = useMemo(() => {
+    if (!query) return items
+    const normalizedQuery = query.toLowerCase()
+    return items.filter((item) => {
+      const searchText = [item.value, ...(item.keywords || [])].join(" ").toLowerCase()
+      return searchText.includes(normalizedQuery)
+    })
+  }, [query, items])
+
+  const itemIndex = filteredItems.findIndex((item) => item.id === id)
+  const isActive = itemIndex === activeIndex && itemIndex !== -1
+  const isVisible = itemIndex !== -1
+
+  if (!isVisible) return null
+
+  const handleSelect = () => {
+    if (disabled) return
+    setSelectedValue(itemValue)
+    if (onSelect) onSelect(itemValue)
+  }
+
+  return (
+    <motion.div
+      className={`relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none ${
+        isActive ? "bg-accent text-accent-foreground" : ""
+      } ${disabled ? "pointer-events-none opacity-50" : ""} ${className}`}
+      onClick={handleSelect}
+      cmdk-item=""
+      data-disabled={disabled}
+      variants={VARIANTS.item}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+// ============================================================================
+// MotionSearchBarSeparator
+// ============================================================================
+
+interface CommandSeparatorProps {
+  className?: string
+}
+
+export function MotionSearchBarSeparator({ className = "" }: CommandSeparatorProps) {
+  return (
+    <div
+      className={`-mx-1 h-px bg-border ${className}`}
+      cmdk-separator=""
+      role="separator"
+    />
+  )
+}
+
+// ============================================================================
+// MotionSearchBarShortcut
+// ============================================================================
+
+interface MotionSearchBarShortcutProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function MotionSearchBarShortcut({ children, className = "" }: MotionSearchBarShortcutProps) {
+  return (
+    <span className={`ml-auto text-xs tracking-widest text-muted-foreground ${className}`}>
+      {children}
+    </span>
+  )
+}
+
+// ============================================================================
+// Demo
+// ============================================================================
+
+
+export function MotionSearchBarDemo() {
+  const [selectedValue, setSelectedValue] = useState<string | null>(null)
+
+  return (
+    <div className="space-y-8 p-6 max-w-2xl mx-auto">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Basic MotionSearchBar</h2>
+        <MotionSearchBar className="rounded-lg border shadow-md">
+          <MotionSearchBarInput placeholder="Type a command or search..." />
+          <MotionSearchBarList>
+            <MotionSearchBarEmpty>No results found.</MotionSearchBarEmpty>
+            <MotionSearchBarGroup heading="Suggestions">
+              <MotionSearchBarItem onSelect={() => console.log("Calendar selected")}>
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Calendar</span>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem onSelect={() => console.log("Search Emoji selected")}>
+                <Smile className="mr-2 h-4 w-4" />
+                <span>Search Emoji</span>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem onSelect={() => console.log("Calculator selected")}>
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Calculator</span>
+              </MotionSearchBarItem>
+            </MotionSearchBarGroup>
+            <MotionSearchBarSeparator />
+            <MotionSearchBarGroup heading="Settings">
+              <MotionSearchBarItem>
+                <User className="mr-2 h-4 w-4" />
+                <span>Profile</span>
+                <MotionSearchBarShortcut>⌘P</MotionSearchBarShortcut>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem>
+                <CreditCard className="mr-2 h-4 w-4" />
+                <span>Billing</span>
+                <MotionSearchBarShortcut>⌘B</MotionSearchBarShortcut>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Settings</span>
+                <MotionSearchBarShortcut>⌘S</MotionSearchBarShortcut>
+              </MotionSearchBarItem>
+            </MotionSearchBarGroup>
+          </MotionSearchBarList>
+        </MotionSearchBar>
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">With Value Tracking</h2>
+        <MotionSearchBar
+          className="rounded-lg border shadow-md"
+          onValueChange={(value) => setSelectedValue(value)}
+        >
+          <MotionSearchBarInput placeholder="Search actions..." />
+          <MotionSearchBarList>
+            <MotionSearchBarEmpty>No actions found.</MotionSearchBarEmpty>
+            <MotionSearchBarGroup heading="Actions">
+              <MotionSearchBarItem value="book-tickets" keywords={["travel", "flight"]}>
+                <PlaneTakeoff className="mr-2 h-4 w-4 text-blue-500" />
+                <span>Book tickets</span>
+                <MotionSearchBarShortcut>⌘K</MotionSearchBarShortcut>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem value="summarize" keywords={["ai", "gpt"]}>
+                <BarChart2 className="mr-2 h-4 w-4 text-orange-500" />
+                <span>Summarize</span>
+                <MotionSearchBarShortcut>⌘⇧P</MotionSearchBarShortcut>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem value="screen-studio" keywords={["video", "record"]}>
+                <Video className="mr-2 h-4 w-4 text-purple-500" />
+                <span>Screen Studio</span>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem value="talk-to-jarvis" keywords={["voice", "ai"]}>
+                <AudioLines className="mr-2 h-4 w-4 text-green-500" />
+                <span>Talk to Jarvis</span>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem value="kokonut-ui">
+                <LayoutGrid className="mr-2 h-4 w-4 text-blue-500" />
+                <span>Kokonut UI - Pro</span>
+              </MotionSearchBarItem>
+            </MotionSearchBarGroup>
+          </MotionSearchBarList>
+        </MotionSearchBar>
+
+        {selectedValue && (
+          <div className="mt-4 p-4 border rounded-md bg-muted">
+            <p className="text-sm font-medium">Selected: {selectedValue}</p>
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">With Disabled Items</h2>
+        <MotionSearchBar className="rounded-lg border shadow-md">
+          <MotionSearchBarInput placeholder="Search..." />
+          <MotionSearchBarList>
+            <MotionSearchBarEmpty>No results found.</MotionSearchBarEmpty>
+            <MotionSearchBarGroup heading="Available">
+              <MotionSearchBarItem>
+                <span>Available Item 1</span>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem>
+                <span>Available Item 2</span>
+              </MotionSearchBarItem>
+            </MotionSearchBarGroup>
+            <MotionSearchBarSeparator />
+            <MotionSearchBarGroup heading="Disabled">
+              <MotionSearchBarItem disabled>
+                <span>Disabled Item 1</span>
+              </MotionSearchBarItem>
+              <MotionSearchBarItem disabled>
+                <span>Disabled Item 2</span>
+              </MotionSearchBarItem>
+            </MotionSearchBarGroup>
+          </MotionSearchBarList>
+        </MotionSearchBar>
+      </div>
+    </div>
+  )
+}
+
+
+/**
+
+import React, { useState, useEffect, useMemo, useCallback, createContext, useContext } from "react"
+import { Input, cn, useDebounce } from "~/components/catalyst-ui"
+import { motion, AnimatePresence } from "motion/react"
+import { Search, Send, BarChart2, Video, PlaneTakeoff, AudioLines, LayoutGrid } from "lucide-react"
+
+interface Motion {
+  id: string
+  label: string
+  icon: React.ReactNode
+  description?: string
+  short?: string
+  end?: string
+}
+
+interface SearchResult {
+  actions: Motion[]
+}
+
+interface MotionSearchContextType {
+  query: string
+  setQuery: (query: string) => void
+  isFocused: boolean
+  setIsFocused: (focused: boolean) => void
+  result: SearchResult | null
+  setResult: (result: SearchResult | null) => void
+  selectedAction: Motion | null
+  setSelectedAction: (action: Motion | null) => void
+  activeIndex: number
+  setActiveIndex: (index: number) => void
+}
+
+const MotionSearchContext = createContext<MotionSearchContextType | null>(null)
+
+const useMotionSearch = () => {
+  const context = useContext(MotionSearchContext)
+  if (!context) {
+    throw new Error("useMotionSearch must be used within MotionSearch")
+  }
+  return context
+}
+
+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
+
+interface MotionSearchProps {
+  children: React.ReactNode
+  actions?: Motion[]
+  defaultOpen?: boolean
+  onActionSelect?: (action: Motion) => void
+  debounceDelay?: number
+  className?: string
+}
+
+export function MotionSearch({
+  children,
+  actions = [],
+  defaultOpen = false,
+  onActionSelect,
+  debounceDelay = 200,
+  className,
+}: MotionSearchProps) {
+  const [query, setQuery] = useState("")
+  const [result, setResult] = useState<SearchResult | null>(null)
+  const [isFocused, setIsFocused] = useState(defaultOpen)
+  const [selectedAction, setSelectedAction] = useState<Motion | null>(null)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const debouncedQuery = useDebounce(query, debounceDelay)
+
+  const filteredActions = useMemo(() => {
+    if (!debouncedQuery) return actions
+
+    const normalizedQuery = debouncedQuery.toLowerCase().trim()
+    return actions.filter((action) => {
+      const searchableText = `${action.label} ${action.description || ""}`.toLowerCase()
+      return searchableText.includes(normalizedQuery)
+    })
+  }, [debouncedQuery, actions])
+
+  useEffect(() => {
+    if (!isFocused) {
+      setResult(null)
+      setActiveIndex(-1)
+      return
+    }
+
+    setResult({ actions: filteredActions })
+    setActiveIndex(-1)
+  }, [filteredActions, isFocused])
+
+  useEffect(() => {
+    if (selectedAction && onActionSelect) {
+      onActionSelect(selectedAction)
+    }
+  }, [selectedAction, onActionSelect])
+
+  const contextValue: MotionSearchContextType = {
+    query,
+    setQuery,
+    isFocused,
+    setIsFocused,
+    result,
+    setResult,
+    selectedAction,
+    setSelectedAction,
+    activeIndex,
+    setActiveIndex,
+  }
+
+  return (
+    <MotionSearchContext.Provider value={contextValue}>
+      <div className={cn("w-full max-w-xl mx-auto", className)}>{children}</div>
+    </MotionSearchContext.Provider>
+  )
+}
+
+interface ActionSearchContainerProps {
+  children: React.ReactNode
+  className?: string
+  minHeight?: string
+}
+
+export function MotionSearchContainer({
+  children,
+  className,
+  minHeight = "min-h-[300px]",
+}: ActionSearchContainerProps) {
+  return (
+    <div className={cn("relative flex flex-col justify-start items-center", minHeight, className)}>{children}</div>
+  )
+}
+
+interface MotionSearchInputProps extends Omit<React.ComponentProps<typeof Input>, "value" | "onChange"> {
+  label?: string
+  showLabel?: boolean
+  showIcon?: boolean
+  iconPosition?: "left" | "right"
+}
+
+export function MotionSearchInput({
+  label = "Search Commands",
+  showLabel = true,
+  showIcon = true,
+  iconPosition = "right",
+  className,
+  ...props
+}: MotionSearchInputProps) {
+  const { query, setQuery, isFocused, setIsFocused, result, setSelectedAction, activeIndex, setActiveIndex } =
+    useMotionSearch()
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setQuery(e.target.value)
+      setActiveIndex(-1)
+    },
+    [setQuery, setActiveIndex]
+  )
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!result?.actions.length) return
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault()
+          setActiveIndex((prev) => (prev < result.actions.length - 1 ? prev + 1 : 0))
+          break
+        case "ArrowUp":
+          e.preventDefault()
+          setActiveIndex((prev) => (prev > 0 ? prev - 1 : result.actions.length - 1))
+          break
+        case "Enter":
+          e.preventDefault()
+          if (activeIndex >= 0 && result.actions[activeIndex]) {
+            setSelectedAction(result.actions[activeIndex])
+          }
+          break
+        case "Escape":
+          setIsFocused(false)
+          setActiveIndex(-1)
+          break
+      }
+    },
+    [result?.actions, activeIndex, setActiveIndex, setIsFocused, setSelectedAction]
+  )
+
+  const handleFocus = useCallback(() => {
+    setSelectedAction(null)
+    setIsFocused(true)
+    setActiveIndex(-1)
+  }, [setIsFocused, setSelectedAction, setActiveIndex])
+
+  const handleBlur = useCallback(() => {
+    setTimeout(() => {
+      setIsFocused(false)
+      setActiveIndex(-1)
+    }, 200)
+  }, [setIsFocused, setActiveIndex])
+
+  return (
+    <div className="w-full max-w-sm sticky top-0 bg-background z-10 pt-4 pb-1">
+      {showLabel && (
+        <label className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 block" htmlFor="action-search">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <Input
+          type="text"
+          value={query}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          role="combobox"
+          aria-expanded={isFocused && !!result}
+          aria-autocomplete="list"
+          aria-activedescendant={activeIndex >= 0 ? `action-${result?.actions[activeIndex]?.id}` : undefined}
+          id="action-search"
+          autoComplete="off"
+          className={cn("pl-3 pr-9 py-1.5 h-9 text-sm rounded-lg focus-visible:ring-offset-0", className)}
+          {...props}
+        />
+        {showIcon && (
+          <div className={cn("absolute top-1/2 -translate-y-1/2 h-4 w-4", iconPosition === "left" ? "left-3" : "right-3")}>
+            <AnimatePresence mode="popLayout">
+              {query.length > 0 ? (
+                <motion.div
+                  key="send"
+                  initial={{ y: -20, opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  exit={{ y: 20, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <Send className="w-4 h-4 text-gray-400 dark:text-gray-500" />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="search"
+                  initial={{ y: -20, opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  exit={{ y: 20, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <Search className="w-4 h-4 text-gray-400 dark:text-gray-500" />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+interface MotionSearchResultsProps {
+  className?: string
+  showFooter?: boolean
+  footerText?: string
+  footerHint?: string
+}
+
+export function MotionSearchResults({
+  className,
+  showFooter = true,
+  footerText = "Press ⌘K to open commands",
+  footerHint = "ESC to cancel",
+}: MotionSearchResultsProps) {
+  const { isFocused, result, selectedAction, activeIndex, setSelectedAction } = useMotionSearch()
+
+  const handleActionClick = useCallback(
+    (action: Motion) => {
+      setSelectedAction(action)
+    },
+    [setSelectedAction]
+  )
+
+  return (
+    <div className="w-full max-w-sm">
+      <AnimatePresence>
+        {isFocused && result && !selectedAction && (
+          <motion.div
+            className={cn(
+              "w-full border rounded-md shadow-xs overflow-hidden dark:border-gray-800 bg-white dark:bg-black mt-1",
+              className
+            )}
+            variants={ANIMATION_VARIANTS.container}
+            role="listbox"
+            aria-label="Search results"
+            initial="hidden"
+            animate="show"
+            exit="exit"
+          >
+            <motion.ul role="none">
+              {result.actions.map((action, index) => (
+                <MotionSearchResultsItem
+                  key={action.id}
+                  action={action}
+                  isActive={activeIndex === index}
+                  onClick={() => handleActionClick(action)}
+                />
+              ))}
+            </motion.ul>
+            {showFooter && (
+              <div className="mt-2 px-3 py-2 border-t border-gray-100 dark:border-gray-800">
+                <div className="flex items-center justify-between text-xs text-gray-500">
+                  <span>{footerText}</span>
+                  <span>{footerHint}</span>
+                </div>
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+interface MotionSearchResultsItemProps {
+  action: Motion
+  isActive: boolean
+  onClick: () => void
+  className?: string
+}
+
+export function MotionSearchResultsItem({ action, isActive, onClick, className }: MotionSearchResultsItemProps) {
+  return (
+    <motion.li
+      id={`action-${action.id}`}
+      className={cn(
+        "px-3 py-2 flex items-center justify-between hover:bg-gray-200 dark:hover:bg-zinc-900 cursor-pointer rounded-md",
+        isActive && "bg-gray-100 dark:bg-zinc-800",
+        className
+      )}
+      variants={ANIMATION_VARIANTS.item}
+      layout
+      onClick={onClick}
+      role="option"
+      aria-selected={isActive}
+    >
+      <div className="flex items-center gap-2 justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-gray-500" aria-hidden="true">
+            {action.icon}
+          </span>
+          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{action.label}</span>
+          {action.description && <span className="text-xs text-gray-400">{action.description}</span>}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {action.short && (
+          <span className="text-xs text-gray-400" aria-label={`Keyboard shortcut: ${action.short}`}>
+            {action.short}
+          </span>
+        )}
+        {action.end && <span className="text-xs text-gray-400 text-right">{action.end}</span>}
+      </div>
+    </motion.li>
+  )
+}
+
+const allMotionsSample = [
+  {
+    id: "1",
+    label: "Book tickets",
+    icon: <PlaneTakeoff className="h-4 w-4 text-blue-500" />,
+    description: "Operator",
+    short: "⌘K",
+    end: "Agent",
+  },
+  {
+    id: "2",
+    label: "Summarize",
+    icon: <BarChart2 className="h-4 w-4 text-orange-500" />,
+    description: "gpt-5",
+    short: "⌘cmd+p",
+    end: "MotionSearchBar",
+  },
+  {
+    id: "3",
+    label: "Screen Studio",
+    icon: <Video className="h-4 w-4 text-purple-500" />,
+    description: "Claude 4.1",
+    short: "",
+    end: "Application",
+  },
+  {
+    id: "4",
+    label: "Talk to Jarvis",
+    icon: <AudioLines className="h-4 w-4 text-green-500" />,
+    description: "gpt-5 voice",
+    short: "",
+    end: "Active",
+  },
+  {
+    id: "5",
+    label: "Kokonut UI - Pro",
+    icon: <LayoutGrid className="h-4 w-4 text-blue-500" />,
+    description: "Components",
+    short: "",
+    end: "Link",
+  },
+]
+
+export function MotionSearchDemo() {
+  const [selectedAction, setSelectedAction] = useState<Motion | null>(null)
+
+  return (
+    <div className="space-y-8 p-6">
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Motion Search Bar</h2>
+        <p className="text-muted-foreground mb-4">Search through actions with keyboard navigation</p>
+        
+        <MotionSearch
+          actions={allMotionsSample}
+          defaultOpen={false}
+          onActionSelect={(action) => {
+            setSelectedAction(action)
+            console.log("Selected:", action)
+          }}
+        >
+          <MotionSearchContainer>
+            <MotionSearchInput placeholder="What's up?" />
+            <MotionSearchResults />
+          </MotionSearchContainer>
+        </MotionSearch>
+
+        {selectedAction && (
+          <div className="mt-4 p-4 border rounded-md bg-muted">
+            <p className="text-sm font-medium">Selected Motion:</p>
+            <p className="text-sm text-muted-foreground">{selectedAction.label}</p>
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h2 className="text-2xl font-bold mb-4">Custom Styled Search</h2>
+        <MotionSearch
+          actions={allMotionsSample}
+          defaultOpen={true}
+          debounceDelay={300}
+        >
+          <MotionSearchContainer minHeight="min-h-[400px]">
+            <MotionSearchInput
+              placeholder="Search commands..."
+              showLabel={false}
+              className="border-primary/50"
+            />
+            <MotionSearchResults
+              showFooter={true}
+              footerText="Use arrow keys to navigate"
+            />
+          </MotionSearchContainer>
+        </MotionSearch>
+      </div>
+    </div>
+  )
+}
+
+export { useMotionSearch }
+export type { Motion, SearchResult, MotionSearchProps } */