/**
 * @typedef { object } PopoverProps
 * @property { Theme } [theme]
 * @property { Size } [size]
 * @property { Radius } [radius]
 * @property { Spacing } [spacing]
 */
/**
 * Creates state and (functional) component to manage a Popover.
 *
 * @param { object } [options = {}]
 * @param { boolean | { border: number } } [options.arrow] - Whether to show an arrow in the floating element pointing toward the reference element. As an object, the `border` option defines the arrow's border width in `px`.
 * @param { MaybeRefOrGetter<'unmount' | 'hide'> } [options.closeBehavior = 'unmount'] - Popover closing method: unmount (`v-if`) or hide (`v-show`). Defaults to `'unmount'`.
 * @param { MaybeRefOrGetter<number> } [options.delay = 400] - Popover opening delay in milliseconds. If `trigger === 'hover'`, defaults to `400`.
 * @param { number } [options.offset] - Distance in `px` of gap between reference and floating elements. See [offset](https://floating-ui.com/docs/offset#options).
 * @param { number } [options.padding] - [Shift axis](https://floating-ui.com/docs/shift#mainaxis) virtual padding in `px` left when the floating element shifts. Defaults to `6`.
 * @param { MaybeRefOrGetter<Placement> } [options.placement = 'bottom'] - Floating element's placement relative to reference element. Defaults to `'bottom'`. See [placement](https://floating-ui.com/docs/computePosition#placement).
 * @param { MaybeRefOrGetter<'absolute' | 'fixed'> } [options.position = 'absolute'] - Floating element's CSS `position` property. Defaults to `'absolute'`. See [strategy](https://floating-ui.com/docs/computeposition#strategy).
 * @param { MaybeRefOrGetter<boolean> } [options.resize] - Whether to update floating element's position when itself or the reference element are resized. See [`elementResize`](https://floating-ui.com/docs/autoupdate#elementresize).
 * @param { MaybeRefOrGetter<'click' | 'hover'> } [options.trigger] - If specified, event handlers are automatically attached to the reference and floating elements to toggle the popover on click or hover.
 *
 * @returns { {
 * 		Popover: FunctionalComponent<PopoverProps>,
 * 		openPopover(waitUntilOpened?: boolean): Promise<boolean>;
 * 		closePopover(): void;
 * 		togglePopover(): void;
 * 		isOpen: Readonly<ShallowRef<boolean>>;
 * } }
 * - `Popover`: Functional component with `default` and `portal` slots to manage and render the Popover's *reference* and *floating* elements, respectively.
 * - `openPopover`: Opens `Popover`. Returns a Promise that resolves to `false` if the opening operation gets aborted by calling `closePopover`, and to `true` otherwise.
 * Returns (or resolves to) `false` if already opened and `true` otherwise.
 * - `closePopover`: Closes `Popover`.
 * - `togglePopover`: Toggle `Popover`'s open state.
 * - `isOpen`: Boolean ref indicating whether the `Popover` is open.
 *
 * @example
 *  ```vue
 * 	<script setup>
 * 	const { Popover, togglePopover } = usePopover({ offset: 5 })
 * 	</script>
 *
 * 	<template>
 * 		<Popover class="popover-demo">
 * 			<Button v-on:click="togglePopover" label="Toggle Popover"/>
 * 			<template #portal>
 * 				<Placeholder/>
 * 			</template>
 * 		</Popover>
 * 	</template>
 *
 * 	<style scoped>
 * 	#popover-portal > .popover-wrapper > .popover-demo {
 * 		width: 200px;
 * 		height: 80px;
 * 		padding: 10px;
 * 		border: 1px solid var(--c-grey-border-subtle);
 * 		border-radius: var(--g-radius);
 * 		background-color: var(--c-bg);
 * 		& > .placeholder {
 * 			width: 100%;
 * 			height: 100%;
 * 		}
 * 	}
 * 	</style>
 *  ```
 */
export function usePopover(options?: {
    arrow?: boolean | {
        border: number;
    } | undefined;
    closeBehavior?: MaybeRefOrGetter<"unmount" | "hide"> | undefined;
    delay?: MaybeRefOrGetter<number> | undefined;
    offset?: number | undefined;
    padding?: number | undefined;
    placement?: MaybeRefOrGetter<Placement> | undefined;
    position?: MaybeRefOrGetter<"fixed" | "absolute"> | undefined;
    resize?: MaybeRefOrGetter<boolean> | undefined;
    trigger?: MaybeRefOrGetter<"click" | "hover"> | undefined;
}): {
    Popover: FunctionalComponent<PopoverProps>;
    openPopover(waitUntilOpened?: boolean): Promise<boolean>;
    closePopover(): void;
    togglePopover(): void;
    isOpen: Readonly<ShallowRef<boolean>>;
};
export type PopoverProps = {
    theme?: "brand" | "user" | "ok" | "info" | "warn" | "danger" | "neutral" | undefined;
    size?: Size | undefined;
    radius?: Radius | undefined;
    spacing?: Spacing | undefined;
};
export type Arrow = {
    border?: number | undefined;
    show: boolean;
    element: ShallowRef<HTMLElement | null>;
    height: number;
};
import type { MaybeRefOrGetter } from 'vue';
import type { Placement } from '@floating-ui/vue';
import type { FunctionalComponent } from 'vue';
import type { ShallowRef } from 'vue';
import type { Size } from '#utilities';
import type { Radius } from '#utilities';
import type { Spacing } from '#utilities';
//# sourceMappingURL=usePopover.d.ts.map