ExploreComponents 3D architecture Observability

DocumentationDocs home Installation CLI Theming API reference Contributing

DeveloperRegistry API OpenAPI MCP server

nyuchimzizi

Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.

mukoko — consumermukoko.com weather news lingo nhimbe shamwari

nyuchi — enterprisenyuchi.com bushtrade

Built by Nyuchi Africav4.0.39

Source Code

View the full component source code below.

"use client"

import * as React from "react"
import { Loader2 } from "@/lib/icons"

import { cn } from "@/lib/utils"

interface AutocompleteProps extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
  value: string
  onChange: (value: string) => void
  onSearch?: (query: string) => void | Promise<void>
  suggestions?: string[]
  loading?: boolean
}

function Autocomplete({
  className,
  value,
  onChange,
  onSearch,
  suggestions = [],
  loading = false,
  placeholder,
  ...props
}: AutocompleteProps) {
  const [open, setOpen] = React.useState(false)
  const [activeIndex, setActiveIndex] = React.useState(-1)
  const inputRef = React.useRef<HTMLInputElement>(null)
  const listRef = React.useRef<HTMLUListElement>(null)

  React.useEffect(() => {
    if (value) {
      onSearch?.(value)
      setOpen(true)
    } else {
      setOpen(false)
    }
    setActiveIndex(-1)
  }, [value, onSearch])

  const handleSelect = React.useCallback(
    (suggestion: string) => {
      onChange(suggestion)
      setOpen(false)
      inputRef.current?.focus()
    },
    [onChange]
  )

  const handleKeyDown = React.useCallback(
    (e: React.KeyboardEvent) => {
      if (!open || suggestions.length === 0) return

      if (e.key === "ArrowDown") {
        e.preventDefault()
        setActiveIndex((prev) => (prev + 1) % suggestions.length)
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        setActiveIndex((prev) => (prev <= 0 ? suggestions.length - 1 : prev - 1))
      } else if (e.key === "Enter" && activeIndex >= 0) {
        e.preventDefault()
        handleSelect(suggestions[activeIndex])
      } else if (e.key === "Escape") {
        setOpen(false)
      }
    },
    [open, suggestions, activeIndex, handleSelect]
  )

  const showDropdown = open && (suggestions.length > 0 || loading)

  return (
    <div data-slot="autocomplete" data-portal="https://design.nyuchi.com/components/autocomplete" className={cn("relative", className)}>
      <div className="relative">
        <input
          ref={inputRef}
          type="text"
          data-slot="autocomplete-input"
          role="combobox"
          aria-expanded={showDropdown}
          aria-autocomplete="list"
          aria-controls="autocomplete-list"
          aria-activedescendant={
            activeIndex >= 0 ? `autocomplete-option-${activeIndex}` : undefined
          }
          className={cn(
            "h-12 w-full min-w-0 rounded-full border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:text-sm"
          )}
          placeholder={placeholder}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={handleKeyDown}
          onFocus={() => value && suggestions.length > 0 && setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 200)}
          {...props}
        />
        {loading && (
          <Loader2 className="absolute top-1/2 right-3 size-4 -translate-y-1/2 animate-spin text-muted-foreground" />
        )}
      </div>
      {showDropdown && (
        <ul
          ref={listRef}
          id="autocomplete-list"
          role="listbox"
          className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-[var(--radius-xl,17px)] bg-popover p-1 text-sm shadow-lg ring-1 ring-foreground/10"
        >
          {suggestions.map((suggestion, index) => (
            <li
              key={suggestion}
              id={`autocomplete-option-${index}`}
              role="option"
              aria-selected={index === activeIndex}
              className={cn(
                "cursor-pointer rounded-[var(--radius-md,12px)] px-3 py-2 transition-colors",
                index === activeIndex
                  ? "bg-muted text-foreground"
                  : "text-foreground hover:bg-muted/50"
              )}
              onMouseDown={() => handleSelect(suggestion)}
              onMouseEnter={() => setActiveIndex(index)}
            >
              {suggestion}
            </li>
          ))}
          {loading && suggestions.length === 0 && (
            <li className="px-3 py-2 text-muted-foreground">Searching...</li>
          )}
        </ul>
      )}
    </div>
  )
}

export { Autocomplete, type AutocompleteProps }

Source Code

View the full component source code below.

"use client"

import * as React from "react"
import { Loader2 } from "@/lib/icons"

import { cn } from "@/lib/utils"

interface AutocompleteProps extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
  value: string
  onChange: (value: string) => void
  onSearch?: (query: string) => void | Promise<void>
  suggestions?: string[]
  loading?: boolean
}

function Autocomplete({
  className,
  value,
  onChange,
  onSearch,
  suggestions = [],
  loading = false,
  placeholder,
  ...props
}: AutocompleteProps) {
  const [open, setOpen] = React.useState(false)
  const [activeIndex, setActiveIndex] = React.useState(-1)
  const inputRef = React.useRef<HTMLInputElement>(null)
  const listRef = React.useRef<HTMLUListElement>(null)

  React.useEffect(() => {
    if (value) {
      onSearch?.(value)
      setOpen(true)
    } else {
      setOpen(false)
    }
    setActiveIndex(-1)
  }, [value, onSearch])

  const handleSelect = React.useCallback(
    (suggestion: string) => {
      onChange(suggestion)
      setOpen(false)
      inputRef.current?.focus()
    },
    [onChange]
  )

  const handleKeyDown = React.useCallback(
    (e: React.KeyboardEvent) => {
      if (!open || suggestions.length === 0) return

      if (e.key === "ArrowDown") {
        e.preventDefault()
        setActiveIndex((prev) => (prev + 1) % suggestions.length)
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        setActiveIndex((prev) => (prev <= 0 ? suggestions.length - 1 : prev - 1))
      } else if (e.key === "Enter" && activeIndex >= 0) {
        e.preventDefault()
        handleSelect(suggestions[activeIndex])
      } else if (e.key === "Escape") {
        setOpen(false)
      }
    },
    [open, suggestions, activeIndex, handleSelect]
  )

  const showDropdown = open && (suggestions.length > 0 || loading)

  return (
    <div data-slot="autocomplete" data-portal="https://design.nyuchi.com/components/autocomplete" className={cn("relative", className)}>
      <div className="relative">
        <input
          ref={inputRef}
          type="text"
          data-slot="autocomplete-input"
          role="combobox"
          aria-expanded={showDropdown}
          aria-autocomplete="list"
          aria-controls="autocomplete-list"
          aria-activedescendant={
            activeIndex >= 0 ? `autocomplete-option-${activeIndex}` : undefined
          }
          className={cn(
            "h-12 w-full min-w-0 rounded-full border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:text-sm"
          )}
          placeholder={placeholder}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={handleKeyDown}
          onFocus={() => value && suggestions.length > 0 && setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 200)}
          {...props}
        />
        {loading && (
          <Loader2 className="absolute top-1/2 right-3 size-4 -translate-y-1/2 animate-spin text-muted-foreground" />
        )}
      </div>
      {showDropdown && (
        <ul
          ref={listRef}
          id="autocomplete-list"
          role="listbox"
          className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-[var(--radius-xl,17px)] bg-popover p-1 text-sm shadow-lg ring-1 ring-foreground/10"
        >
          {suggestions.map((suggestion, index) => (
            <li
              key={suggestion}
              id={`autocomplete-option-${index}`}
              role="option"
              aria-selected={index === activeIndex}
              className={cn(
                "cursor-pointer rounded-[var(--radius-md,12px)] px-3 py-2 transition-colors",
                index === activeIndex
                  ? "bg-muted text-foreground"
                  : "text-foreground hover:bg-muted/50"
              )}
              onMouseDown={() => handleSelect(suggestion)}
              onMouseEnter={() => setActiveIndex(index)}
            >
              {suggestion}
            </li>
          ))}
          {loading && suggestions.length === 0 && (
            <li className="px-3 py-2 text-muted-foreground">Searching...</li>
          )}
        </ul>
      )}
    </div>
  )
}

export { Autocomplete, type AutocompleteProps }