Autocomplete

1"use client";
2 
3import "./autocomplete.css";
4import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { AutocompleteContext, useAutocompleteContext } from "./autocomplete.context";
9import { autocompleteVariants, type AutocompleteVariants } from "./autocomplete.variants";
10 
11export type AutocompleteProps = AutocompleteVariants &
12  React.ComponentProps<typeof BaseAutocomplete.Root>;
13 
14export function AutocompleteRoot({ children, size, variant, ...props }: AutocompleteProps) {
15  const slots = autocompleteVariants({ size, variant });
16 
17  return (
18    <AutocompleteContext.Provider value={{ slots }}>
19      <BaseAutocomplete.Root {...props}>{children}</BaseAutocomplete.Root>
20    </AutocompleteContext.Provider>
21  );
22}
23 
24export type AutocompleteInputProps = React.ComponentProps<typeof BaseAutocomplete.Input>;
25 
26export const AutocompleteInput = ({
27  className,
28  children: _children,
29  dangerouslySetInnerHTML: _dangerouslySetInnerHTML,
30  ...props
31}: AutocompleteInputProps & { children?: React.ReactNode; dangerouslySetInnerHTML?: any }) => {
32  const { slots } = useAutocompleteContext();
33  return <BaseAutocomplete.Input className={cn(slots.input(), className)} {...props} />;
34};
35 
36export type AutocompletePortalProps = React.ComponentProps<typeof BaseAutocomplete.Portal>;
37 
38export const AutocompletePortal = (props: AutocompletePortalProps) => {
39  return <BaseAutocomplete.Portal {...props} />;
40};
41 
42export type AutocompletePositionerProps = React.ComponentProps<typeof BaseAutocomplete.Positioner>;
43 
44export const AutocompletePositioner = ({
45  className,
46  sideOffset = 4,
47  ...props
48}: AutocompletePositionerProps) => {
49  const { slots } = useAutocompleteContext();
50  return (
51    <BaseAutocomplete.Positioner
52      className={cn(slots.positioner(), className)}
53      sideOffset={sideOffset}
54      {...props}
55    />
56  );
57};
58 
59export type AutocompletePopupProps = React.ComponentProps<typeof BaseAutocomplete.Popup>;
60 
61export const AutocompletePopup = ({ className, ...props }: AutocompletePopupProps) => {
62  const { slots } = useAutocompleteContext();
63  return <BaseAutocomplete.Popup className={cn(slots.popup(), className)} {...props} />;
64};
65 
66export type AutocompleteListProps = React.ComponentProps<typeof BaseAutocomplete.List>;
67 
68export function AutocompleteList({ className, ...props }: AutocompleteListProps) {
69  const { slots } = useAutocompleteContext();
70// … truncated