Popover

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 };

import { Popover } from '@base-ui/react/popover';

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

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

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

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

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

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

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

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

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

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

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

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

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

/**
 * A heading that labels the popover.
 * Renders an `<h2>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#title)
 */
export namespace Title {
  export type State = Popover.Title.State;
  export type Props = React.ComponentProps<typeof Popover.Title>;
}

export function Title({ ...props }: Title.Props) {
  return <Popover.Title data-slot="popover-title" {...props} />;
}

/**
 * A paragraph with additional information about the popover.
 * Renders a `<p>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#description)
 */
export namespace Description {
  export type State = Popover.Description.State;
  export type Props = React.ComponentProps<typeof Popover.Description>;
}

export function Description({ ...props }: Description.Props) {
  return <Popover.Description data-slot="popover-description" {...props} />;
}

/**
 * A button that closes the popover.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Popover](https://caprice-ui.com/docs/components/popover)
 *
 * API Reference: [Base UI Popover](https://base-ui.com/react/components/popover#close)
 */
export namespace Close {
  export type State = Popover.Close.State;
  export type Props = React.ComponentProps<typeof Popover.Close>;
}

export function Close({ ...props }: Close.Props) {
  return <Popover.Close data-slot="popover-close" {...props} />;
}