Suggestions

1"use client";
2 
3import * as React from "react";
4import { Presence } from "@radix-ui/react-presence";
5import { Slot } from "@radix-ui/react-slot";
6 
7import { cva, type VariantProps } from "class-variance-authority";
8 
9import { cn } from "@/lib/utils";
10import { Button } from "@/components/ui/button";
11 
12const suggestionVariants = cva(
13  "h-8 gap-1.5 rounded-full px-4 text-sm font-normal shadow-none outline-0 transition-all duration-150 focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.99]",
14  {
15    variants: {
16      variant: {
17        filled:
18          "border-none bg-muted text-primary hover:bg-border",
19        outline:
20          "border border-input bg-transparent text-primary hover:bg-muted",
21        ghost:
22          "border-none bg-transparent text-muted-foreground hover:bg-muted hover:text-primary",
23      },
24    },
25    defaultVariants: {
26      variant: "filled",
27    },
28  },
29);
30 
31type SuggestionsContextValue = {
32  onSelect?: (value: string) => void;
33};
34 
35const SuggestionsContext = React.createContext<SuggestionsContextValue>({});
36 
37type SuggestionsProps = Omit<
38  React.HTMLAttributes<HTMLDivElement>,
39  "onSelect"
40> & {
41  onSelect?: (value: string) => void;
42};
43 
44function Suggestions({ className, onSelect, ...props }: SuggestionsProps) {
45  return (
46    <SuggestionsContext.Provider value={{ onSelect }}>
47      <div
48        data-slot="suggestions"
49        role="group"
50        aria-label="Suggestions"
51        className={cn("flex flex-col gap-2", className)}
52        {...props}
53      />
54    </SuggestionsContext.Provider>
55  );
56}
57 
58type SuggestionListProps = React.HTMLAttributes<HTMLDivElement> & {
59  orientation?: "horizontal" | "vertical";
60};
61 
62function SuggestionList({
63  className,
64  orientation = "horizontal",
65  ...props
66}: SuggestionListProps) {
67  return (
68    <div
69      data-slot="suggestion-list"
70      role="group"
71      aria-label="Suggestions"
72      className={cn(
73        "flex gap-2 duration-150",
74        orientation === "horizontal"
75          ? "flex-row flex-wrap items-center justify-center"
76          : "flex-col items-start",
77        className,
78      )}
79      {...props}
80    />
81  );
82}
83 
84type SuggestionProps = Omit<React.ComponentProps<typeof Button>, "variant"> &
85  VariantProps<typeof suggestionVariants> & {
86    value?: string;
87    highlight?: string | string[];
88  };
89 
90function highlightText(
91  text: string,
92  terms: string | string[],
93): React.ReactNode {
94  const termList = Array.isArray(terms) ? terms : [terms];
95// … truncated