Combobox

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

export type { VariantProps };
export { getSchema };

'use client';

import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
import type * as React from 'react';

/**
 * Creates a collection for the root's `items` prop. Values and labels are derived on first use.
 *
 * Accepts either a flat item array or an array of groups. The `getValue` and `getLabel` accessors
 * receive items, not groups.
 *
 * Items cannot have an `items` array property because they would be interpreted as groups.
 * Rename that field or cast the data when the runtime values are known not to contain arrays.
 *
 * The data must not contain nullish entries: remove them before creating the collection, as for
 * the root's `items` prop.
 *
 * Create static collections at module scope. Wrap dynamic collections in `React.useMemo()` keyed
 * by their data.
 *
 * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
 *
 * @param data The flat or grouped source items, or `undefined` while they are loading.
 * @param options Functions that derive each source item's selection value and display label.
 * @returns A collection whose selection value is the `getValue` accessor's return value.
 */
export const createItems = ComboboxPrimitive.createItems;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * A container for the chips in a multiselectable input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chips)
 */
export namespace Chips {
  export type State = ComboboxPrimitive.Chips.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chips>;
}

export function Chips({ ...props }: Chips.Props) {
  return <ComboboxPrimitive.Chips data-slot="combobox-chips" {...props} />;
}

/**
 * An individual chip that represents a value in a multiselectable input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip)
 */
export namespace Chip {
  export type State = ComboboxPrimitive.Chip.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Chip>;
}

/**
 * An individual chip that represents a value in a multiselectable input.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip)
 */
export function Chip({ ...props }: Chip.Props) {
  return <ComboboxPrimitive.Chip data-slot="combobox-chip" {...props} />;
}

/**
 * A button to remove a chip.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#chip-remove)
 */
export namespace ChipRemove {
  export type State = ComboboxPrimitive.ChipRemove.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>;
}

export function ChipRemove({ ...props }: ChipRemove.Props) {
  return <ComboboxPrimitive.ChipRemove data-slot="combobox-chip-remove" {...props} />;
}

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

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

/**
 * An accessible label that is automatically associated with the combobox trigger.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#label)
 */
export namespace Label {
  export type State = ComboboxPrimitive.Label.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Label>;
}

export function Label({ ...props }: Label.Props) {
  return <ComboboxPrimitive.Label data-slot="combobox-label" {...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 Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#portal)
 */
export namespace Portal {
  export interface State extends ComboboxPrimitive.Portal.State {}
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Portal>;
}

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

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

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

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

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

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

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

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

export function Arrow({ ...props }: Arrow.Props) {
  return <ComboboxPrimitive.Arrow data-slot="combobox-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 Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#status)
 */
export namespace Status {
  export type State = ComboboxPrimitive.Status.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Status>;
}

export function Status({ ...props }: Status.Props) {
  return <ComboboxPrimitive.Status data-slot="combobox-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 Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#empty)
 */
export namespace Empty {
  export type State = ComboboxPrimitive.Empty.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Empty>;
}

export function Empty({ ...props }: Empty.Props) {
  return <ComboboxPrimitive.Empty data-slot="combobox-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 Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#collection)
 */
export namespace Collection {
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Collection>;
}

export function Collection({ ...props }: Collection.Props) {
  return <ComboboxPrimitive.Collection data-slot="combobox-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 Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#row)
 */
export namespace Row {
  export type State = ComboboxPrimitive.Row.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.Row>;
}

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

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

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

/**
 * Indicates whether the item is selected.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Combobox](https://caprice-ui.com/docs/components/combobox)
 *
 * API Reference: [Base UI Combobox](https://base-ui.com/react/components/combobox#item-indicator)
 */
export namespace ItemIndicator {
  export type State = ComboboxPrimitive.ItemIndicator.State;
  export type Props = React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>;
}

export function ItemIndicator({ ...props }: ItemIndicator.Props) {
  return <ComboboxPrimitive.ItemIndicator data-slot="combobox-item-indicator" {...props} />;
}

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

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

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

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

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

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

export const useFilter = ComboboxPrimitive.useFilter;