Autocomplete

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'use client';

import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
import type * as React from 'react';

/**
 * Groups all parts of the autocomplete.
 * Doesn't render its own HTML element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#root)
 */
export namespace Root {
  export type State = AutocompletePrimitive.Root.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Root>;
  export type Actions = AutocompletePrimitive.Root.Actions;
  export type ChangeEventDetails = AutocompletePrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = AutocompletePrimitive.Root.ChangeEventReason;
  export type HighlightEventDetails = AutocompletePrimitive.Root.HighlightEventDetails;
  export type HighlightEventReason = AutocompletePrimitive.Root.HighlightEventReason;
}

export function Root({ ...props }: Root.Props) {
  return <AutocompletePrimitive.Root data-slot="autocomplete" {...props} />;
}

/**
 * The current value of the autocomplete.
 * Doesn't render its own HTML element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#value)
 */
export namespace Value {
  export type State = AutocompletePrimitive.Value.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Value>;
}

export function Value({ ...props }: Value.Props) {
  return <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />;
}

/**
 * A text input to search for items in the list.
 * Renders an `<input>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#input)
 */
export namespace Input {
  export type State = AutocompletePrimitive.Input.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Input>;
}

export function Input({ ...props }: Input.Props) {
  return <AutocompletePrimitive.Input data-slot="autocomplete-input" {...props} />;
}

/**
 * A wrapper for the input and its associated controls.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#input-group)
 */
export namespace InputGroup {
  export type State = AutocompletePrimitive.InputGroup.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.InputGroup>;
}

export function InputGroup({ ...props }: InputGroup.Props) {
  return <AutocompletePrimitive.InputGroup data-slot="autocomplete-input-group" {...props} />;
}

/**
 * A button that opens the popup.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#trigger)
 */
export namespace Trigger {
  export type State = AutocompletePrimitive.Trigger.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Trigger>;
}

export function Trigger({ ...props }: Trigger.Props) {
  return <AutocompletePrimitive.Trigger data-slot="autocomplete-trigger" {...props} />;
}

/**
 * An icon that indicates that the trigger button opens the popup.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#icon)
 */
export namespace Icon {
  export type State = AutocompletePrimitive.Icon.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Icon>;
}

export function Icon({ ...props }: Icon.Props) {
  return <AutocompletePrimitive.Icon data-slot="autocomplete-icon" {...props} />;
}

/**
 * Clears the value when clicked.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#clear)
 */
export namespace Clear {
  export type State = AutocompletePrimitive.Clear.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Clear>;
}

export function Clear({ ...props }: Clear.Props) {
  return <AutocompletePrimitive.Clear data-slot="autocomplete-clear" {...props} />;
}

/**
 * A list container for the items.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#list)
 */
export namespace List {
  export type State = AutocompletePrimitive.List.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.List>;
}

export function List({ ...props }: List.Props) {
  return <AutocompletePrimitive.List data-slot="autocomplete-list" {...props} />;
}

/**
 * A portal element that moves the popup to a different part of the DOM.
 * By default, the portal element is appended to `<body>`.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#portal)
 */
export namespace Portal {
  export type State = AutocompletePrimitive.Portal.State;
  export interface Props extends React.ComponentProps<typeof AutocompletePrimitive.Portal> {}
}

export function Portal({ ...props }: Portal.Props) {
  return <AutocompletePrimitive.Portal data-slot="autocomplete-portal" {...props} />;
}

/**
 * An overlay displayed beneath the popup.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#backdrop)
 */
export namespace Backdrop {
  export type State = AutocompletePrimitive.Backdrop.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Backdrop>;
}

export function Backdrop({ ...props }: Backdrop.Props) {
  return <AutocompletePrimitive.Backdrop data-slot="autocomplete-backdrop" {...props} />;
}

/**
 * Positions the popup against the trigger.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#positioner)
 */
export namespace Positioner {
  export type State = AutocompletePrimitive.Positioner.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Positioner>;
}

export function Positioner({ ...props }: Positioner.Props) {
  return <AutocompletePrimitive.Positioner data-slot="autocomplete-positioner" {...props} />;
}

/**
 * A container for the list.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#popup)
 */
export namespace Popup {
  export type State = AutocompletePrimitive.Popup.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Popup>;
}

export function Popup({ ...props }: Popup.Props) {
  return <AutocompletePrimitive.Popup data-slot="autocomplete-popup" {...props} />;
}

/**
 * Displays an element positioned against the anchor.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#arrow)
 */
export namespace Arrow {
  export type State = AutocompletePrimitive.Arrow.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Arrow>;
}

export function Arrow({ ...props }: Arrow.Props) {
  return <AutocompletePrimitive.Arrow data-slot="autocomplete-arrow" {...props} />;
}

/**
 * Displays a status message whose content changes are announced politely to screen readers.
 * Useful for conveying the status of an asynchronously loaded list.
 * This component's root element must remain mounted in the DOM to announce
 * changes consistently across screen readers. Avoid hiding or removing the
 * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
 * rendering. Prefer updating or conditionally rendering its children instead.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#status)
 */
export namespace Status {
  export type State = AutocompletePrimitive.Status.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Status>;
}

export function Status({ ...props }: Status.Props) {
  return <AutocompletePrimitive.Status data-slot="autocomplete-status" {...props} />;
}

/**
 * Renders its children only when the list is empty.
 * Requires the `items` prop on the root component.
 * Announces changes politely to screen readers.
 * This component's root element must remain mounted in the DOM to announce
 * changes consistently across screen readers. Avoid hiding or removing the
 * component itself with `display: none`, `hidden`, `aria-hidden`, or conditional
 * rendering. Prefer updating or conditionally rendering its children instead.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#empty)
 */
export namespace Empty {
  export type State = AutocompletePrimitive.Empty.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Empty>;
}

export function Empty({ ...props }: Empty.Props) {
  return <AutocompletePrimitive.Empty data-slot="autocomplete-empty" {...props} />;
}

/**
 * Renders filtered list items.
 * Doesn't render its own HTML element.
 *
 * If rendering a flat list, pass a function child to the `List` component instead, which implicitly wraps it.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#collection)
 */
export namespace Collection {
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Collection>;
}

export function Collection({ ...props }: Collection.Props) {
  return <AutocompletePrimitive.Collection data-slot="autocomplete-collection" {...props} />;
}

/**
 * Displays a single row of items in a grid list.
 * Enable `grid` on the root component to turn the listbox into a grid.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#row)
 */
export namespace Row {
  export type State = AutocompletePrimitive.Row.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Row>;
}

export function Row({ ...props }: Row.Props) {
  return <AutocompletePrimitive.Row data-slot="autocomplete-row" {...props} />;
}

/**
 * An individual item in the list.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#item)
 */
export namespace Item {
  export type State = AutocompletePrimitive.Item.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Item>;
}

export function Item({ ...props }: Item.Props) {
  return <AutocompletePrimitive.Item data-slot="autocomplete-item" {...props} />;
}

/**
 * Groups related items with the corresponding label.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#group)
 */
export namespace Group {
  export type State = AutocompletePrimitive.Group.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Group>;
}

export function Group({ ...props }: Group.Props) {
  return <AutocompletePrimitive.Group data-slot="autocomplete-group" {...props} />;
}

/**
 * An accessible label that is automatically associated with its parent group.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#group-label)
 */
export namespace GroupLabel {
  export type State = AutocompletePrimitive.GroupLabel.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>;
}

export function GroupLabel({ ...props }: GroupLabel.Props) {
  return <AutocompletePrimitive.GroupLabel data-slot="autocomplete-group-label" {...props} />;
}

/**
 * A visual separator between items or groups.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Autocomplete](https://caprice-ui.com/docs/components/autocomplete)
 *
 * API Reference: [Base UI Autocomplete](https://base-ui.com/react/components/autocomplete#separator)
 */
export namespace Separator {
  export type State = AutocompletePrimitive.Separator.State;
  export type Props = React.ComponentProps<typeof AutocompletePrimitive.Separator>;
}

export function Separator({ ...props }: Separator.Props) {
  return <AutocompletePrimitive.Separator data-slot="autocomplete-separator" {...props} />;
}