"use client"; import { useEffect, useState } from "react"; import { Button } from "@/components/registry/primitives/core/button"; import { cn } from "@/lib/registry/cn"; import { CardViewSwitcher } from "./card-view-switcher"; import type { FacetListVariant } from "./facet-list"; import { FacetFilterControl } from "./facet-list"; import { QueryResultsSummary } from "./query-results-summary"; import type { QuickSearchListItem } from "./quick-search-list"; import { ResultsPerPage } from "./results-per-page"; import { SearchBar } from "./search-bar"; import { SortOrder } from "./sort-order"; import type { SearchFacet, SearchSortOption } from "./types"; export type ResultControlsSurface = "card" | "muted" | "inner" | "none"; export type ResultControlsDensity = "comfortable" | "compact"; export interface ResultControlsSearchConfig { enabled?: boolean; value?: string; placeholder?: string; onChange?: (value: string) => void; } export interface ResultControlsSortConfig { enabled?: boolean; value?: string; options?: SearchSortOption[]; onChange?: (value: string) => void; showLabel?: boolean; label?: string; surface?: "plain" | "field"; } export interface ResultControlsFiltersConfig { enabled?: boolean; placement?: "inline" | "sidebar"; buttonLabel?: string; facetListVariant?: FacetListVariant; chips?: Array<{ id: string; label: string }>; facets?: SearchFacet[]; selectedValues?: Record>; selectedRanges?: Record; onValueToggle?: ( facetId: string, valueId: string, nextChecked: boolean, ) => void; onRangeChange?: ( facetId: string, nextRange: { min: number; max: number }, ) => void; onOpen?: () => void; onRemoveChip?: (id: string) => void; onClear?: () => void; quickSearch?: { enabled?: boolean; title?: string; items?: QuickSearchListItem[]; selectedQuery?: string; onSelect?: (query: string, item: QuickSearchListItem) => void; className?: string; }; } export interface ResultControlsViewConfig { enabled?: boolean; value?: "list" | "grid"; defaultValue?: "list" | "grid"; onChange?: (value: "list" | "grid") => void; } export interface ResultControlsResultCountConfig { enabled?: boolean; label?: string; currentPage?: number; itemsPerPage?: number; totalItemsReturned?: number; totalItems?: number; className?: string; } export interface ResultControlsResultsPerPageConfig { enabled?: boolean; defaultItemsPerPage?: number; options?: number[]; onChange?: (value: number) => void; showLabel?: boolean; label?: string; surface?: "plain" | "field"; className?: string; } export interface ResultControlsProps { surface?: ResultControlsSurface; density?: ResultControlsDensity; search?: ResultControlsSearchConfig; sort?: ResultControlsSortConfig; filters?: ResultControlsFiltersConfig; view?: ResultControlsViewConfig; resultCount?: ResultControlsResultCountConfig; resultsPerPage?: ResultControlsResultsPerPageConfig; className?: string; } type FilterChip = { id: string; label: string }; /** Either the detailed page/total summary, or a plain results label. */ function renderResultsSummary( resultCount: ResultControlsResultCountConfig | undefined, density: ResultControlsDensity, ) { const hasFullCounts = resultCount?.currentPage != null && resultCount?.itemsPerPage != null && resultCount?.totalItemsReturned != null && resultCount?.totalItems != null; if (hasFullCounts && resultCount) { return ( ); } return (

{resultCount?.label ?? "24 results"}

); } /** Resolve the container's surface/background classes. */ function resolveSurfaceClassName(surface: ResultControlsSurface): string { if (surface === "inner" || surface === "none") return "bg-transparent p-0"; if (surface === "muted") return "bg-muted/30 p-3"; return "border border-border bg-card p-3"; } interface InlineFiltersSectionProps { filters: ResultControlsFiltersConfig | undefined; hasFacetFilters: boolean; activeFilterChips: FilterChip[]; setActiveFilterChips: React.Dispatch>; } /** The inline filter control: faceted control, or a Filter button + chips. */ function InlineFiltersSection({ filters, hasFacetFilters, activeFilterChips, setActiveFilterChips, }: InlineFiltersSectionProps) { if (hasFacetFilters) { return (

); } const removeChip = (chip: FilterChip) => { setActiveFilterChips((prev) => prev.filter((item) => item.id !== chip.id)); filters?.onRemoveChip?.(chip.id); }; const clearChips = () => { setActiveFilterChips([]); filters?.onClear?.(); }; return (

{activeFilterChips.map((chip) => ( ))} {activeFilterChips.length > 0 ? ( ) : null}

); } interface TrailingControlsSectionProps { view: ResultControlsViewConfig | undefined; viewEnabled: boolean; viewValue: "list" | "grid"; setViewValue: React.Dispatch>; sort: ResultControlsSortConfig | undefined; sortEnabled: boolean; sortValue: string; setSortValue: React.Dispatch>; resultsPerPage: ResultControlsResultsPerPageConfig | undefined; resultsPerPageEnabled: boolean; density: ResultControlsDensity; } /** The right-aligned cluster: view switcher, sort, and results-per-page. */ function TrailingControlsSection({ view, viewEnabled, viewValue, setViewValue, sort, sortEnabled, sortValue, setSortValue, resultsPerPage, resultsPerPageEnabled, density, }: TrailingControlsSectionProps) { return (

{viewEnabled ? ( { const next = nextValue === "list" ? "list" : "grid"; setViewValue(next); view?.onChange?.(next); }} /> ) : null} {sortEnabled ? ( { setSortValue(value); sort?.onChange?.(value); }} showLabel={sort?.showLabel ?? true} label={sort?.label ?? "Sort"} surface={sort?.surface ?? "plain"} density={density} /> ) : null} {resultsPerPageEnabled ? ( ) : null}

); } interface SearchSectionProps { search: ResultControlsSearchConfig | undefined; searchValue: string; setSearchValue: React.Dispatch>; isCompact: boolean; } /** The leading search input column (only rendered when search is enabled). */ function SearchSection({ search, searchValue, setSearchValue, isCompact, }: SearchSectionProps) { return (

{ setSearchValue(nextValue); search?.onChange?.(nextValue); }} onSubmit={() => {}} placeholder={search?.placeholder ?? "Search"} className={cn( "w-full", "@[560px]:min-w-56 @[560px]:max-w-80", "@[960px]:w-72", isCompact && "[&_input]:h-8", )} />

); } interface ControlsRowProps { inlineFiltersEnabled: boolean; filters: ResultControlsFiltersConfig | undefined; hasFacetFilters: boolean; activeFilterChips: FilterChip[]; setActiveFilterChips: React.Dispatch>; trailing: TrailingControlsSectionProps; resultsSummaryNode: React.ReactNode; } /** Inline-filters + trailing-controls row, with an optional summary line. */ function ControlsRow({ inlineFiltersEnabled, filters, hasFacetFilters, activeFilterChips, setActiveFilterChips, trailing, resultsSummaryNode, }: ControlsRowProps) { return (

{inlineFiltersEnabled ? ( ) : null}

{resultsSummaryNode ? (

{resultsSummaryNode}

) : null}

); } /** * Shared controls row for collection UIs (grid, listing, carousel) with * optional search, sort, filter, and result count sections. */ export function ResultControls({ surface = "card", density = "comfortable", search, sort, filters, view, resultCount, resultsPerPage, className, }: ResultControlsProps) { const searchEnabled = search?.enabled ?? false; const sortEnabled = sort?.enabled ?? false; const filtersEnabled = filters?.enabled ?? false; const filtersPlacement = filters?.placement ?? "inline"; const inlineFiltersEnabled = filtersEnabled && filtersPlacement === "inline"; const viewEnabled = view?.enabled ?? false; const countEnabled = resultCount?.enabled ?? false; const resultsPerPageEnabled = resultsPerPage?.enabled ?? false; const shouldShowResultsSummary = countEnabled && resultsPerPageEnabled; const resultsSummaryNode = shouldShowResultsSummary ? renderResultsSummary(resultCount, density) : null; const [searchValue, setSearchValue] = useState(search?.value ?? ""); const [sortValue, setSortValue] = useState( sort?.value ?? sort?.options?.[0]?.value ?? "", ); const [viewValue, setViewValue] = useState<"list" | "grid">( view?.value ?? view?.defaultValue ?? "grid", ); const [activeFilterChips, setActiveFilterChips] = useState( filters?.chips ?? [], ); useEffect(() => { setSearchValue(search?.value ?? ""); }, [search?.value]); useEffect(() => { setSortValue(sort?.value ?? sort?.options?.[0]?.value ?? ""); }, [sort?.value, sort?.options]); useEffect(() => { setViewValue(view?.value ?? view?.defaultValue ?? "grid"); }, [view?.defaultValue, view?.value]); useEffect(() => { setActiveFilterChips(filters?.chips ?? []); }, [filters?.chips]); const hasFacetFilters = (filters?.facets?.length ?? 0) > 0; const anySectionEnabled = searchEnabled || sortEnabled || filtersEnabled || viewEnabled || countEnabled || resultsPerPageEnabled; if (!anySectionEnabled) { return null; } const isCompact = density === "compact"; const surfaceClassName = resolveSurfaceClassName(surface); const containerLayoutClassName = searchEnabled ? "flex flex-col gap-2 @[960px]:grid @[960px]:grid-cols-[auto_minmax(0,1fr)] @[960px]:items-start @[960px]:gap-3" : "flex flex-col gap-2"; return (

{searchEnabled ? ( ) : null}

); }

Result Controls

Showcase

Result Controls