Site Search

1'use client'
2 
3import { Autocomplete } from '@base-ui/react/autocomplete'
4import { Dialog } from '@base-ui/react/dialog'
5import React from 'react'
6 
7import { IconSearch } from '@/icons/search'
8import { cn } from '@/lib/utils'
9 
10import { Button } from '@/components/button'
11 
12/** A single searchable destination. `keywords` extend matching beyond the title. */
13type SiteSearchItem = {
14  title: string
15  href: string
16  keywords?: string[]
17}
18 
19/** A titled section of results, rendered with a muted group heading. */
20type SiteSearchGroup = {
21  title: string
22  items: SiteSearchItem[]
23}
24 
25type SiteSearchProps = {
26  /** The searchable site map, as titled groups of items. */
27  groups: SiteSearchGroup[]
28  /**
29   * Called with the chosen item on click or Enter, after the palette closes.
30   * Navigation is the APP's job — call your router here (e.g. next/navigation's
31   * `router.push(item.href)`). The design system ships no framework code, so it
32   * never navigates itself; this mirrors the DS-wide framework-free rule
33   * (see `Link` / `LinkProvider`).
34   */
35  onSelect: (item: SiteSearchItem) => void
36  /** Whether the palette is open. Use when controlled. */
37  open?: boolean
38  /** Called whenever the palette asks to open or close. */
39  onOpenChange?: (open: boolean) => void
40  /** Whether the palette is initially open (uncontrolled). */
41  defaultOpen?: boolean
42  /**
43   * Wire the global Cmd/Ctrl-K toggle on `document`, with cleanup on unmount.
44   * Defaults to true. Only one shortcut-enabled SiteSearch should be mounted
45   * per page, or each press toggles all of them.
46   */
47  shortcut?: boolean
48  /**
49   * Accessible name for the palette, applied as `aria-label` to the dialog
50   * panel, the search input and the default trigger. Defaults to
51   * `'Search site'`. Mirrors ExpandableSearch's `label` prop — localise it
52   * rather than hardcoding English into consumers' pages.
53   */
54  label?: string
55  /** Placeholder for the search input. */
56  placeholder?: string
57  /** Message shown when no items match the query. */
58  emptyMessage?: string
59  /**
60   * The element that opens the palette. Defaults to a ghost icon `Button`
61   * named by `label`. Pass an element to replace it — it is composed via Base
62   * UI's `render` prop, so it inherits the trigger behaviour and ARIA — or
63   * `null` to render no trigger at all (open via `open` or the shortcut).
64   * A custom trigger owns its own accessible name — `label` is applied as
65// … truncated