// Generated by dts-bundle-generator v7.2.0

import React from 'react';
import { HTMLAttributes, ReactNode } from 'react';

export interface Conditions<T> {
	xs?: T;
	md?: T;
	lg?: T;
	xl?: T;
	xxl?: T;
}
export type Overflow = "visible" | "hidden" | "scroll" | "auto";
declare const propertiesPopover: {
	backgroundColor: {
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	color: {
		"primary-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"primary-interactiveHover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"success-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	padding: {
		base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		none: string;
	};
	zIndex: {
		"100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1000": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
		"1100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
	};
	overflow: Overflow[];
};
export type PopoverColorProperties = keyof typeof propertiesPopover.color;
export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
export interface PopoverSprinkle {
	/**
	 * The width property specifies the width of a popover's content area.
	 * @default fit-content
	 */
	width?: string | Conditions<string>;
	/**
	 * The maxWidth property specifies the maximum width of a popover's content area.
	 */
	maxWidth?: string | Conditions<string>;
	/**
	 * The height property specifies the height of a popover's content area.
	 */
	height?: string | Conditions<string>;
	/**
	 * The zIndex property specifies the stack order of the popover.
	 */
	zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
	/**
	 * The backgroundColor property sets the background color of the popover.
	 * @default neutral-background
	 * @examples ["neutral-interactive", { xs: "neutral-surface", md: "neutral-interactive" }]
	 */
	backgroundColor?: PopoverBackgroundColorProperties | Conditions<PopoverBackgroundColorProperties>;
	/**
	 * The color property is used to set the color of the popover.
	 * @default neutral-background
	 */
	color?: PopoverColorProperties | Conditions<PopoverColorProperties>;
	/**
	 * The padding properties are used to generate space around an popover's content area.
	 * @default base
	 */
	padding?: PopoverPaddingProperties | Conditions<PopoverPaddingProperties>;
	/**
	 * The overflow shorthand property sets the desired behavior for an popover's content overflow.
	 */
	overflow?: Overflow | Conditions<Overflow>;
}
export type PopoverPlacement = "top" | "right" | "bottom" | "left" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end";
export interface PopoverProperties extends PopoverSprinkle {
	/**
	 * An HTML element, or a function that returns one. It's used to set the position of the popover.
	 * @TJS-type React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode);
	 */
	children: ReactNode | ((data: {
		open: boolean;
		setVisibility: (visibility: boolean) => void;
	}) => ReactNode);
	/**
	 * The content of the popover.
	 * @TJS-type React.ReactNode
	 */
	content: ReactNode;
	/**
	 * If true, the component is shown.
	 */
	visible?: boolean;
	/**
	 * Function to control popover opening and closing.
	 * @TJS-type (visible: boolean) => void;
	 */
	onVisibility?: (visible: boolean) => void;
	/**
	 * Conditional for displaying the popover arrow.
	 * @default true
	 */
	arrow?: boolean;
	/**
	 * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
	 * @default false
	 */
	matchReferenceWidth?: boolean;
	/**
	 * Position of the popover.
	 * @default bottom
	 */
	position?: PopoverPlacement;
	/**
	 * Adds hover event listeners that change the open state, like CSS :hover.
	 * @default false
	 */
	enabledHover?: boolean;
	/**
	 * Adds click event listeners that change the open state.
	 * @default true
	 */
	enabledClick?: boolean;
	/**
	 * Adds listeners that dismiss (close) the floating element.
	 * @default true
	 */
	enabledDismiss?: boolean;
	/**
	 * Offest displaces the floating element from its core placement along the specified axes.
	 * @default 10
	 */
	offset?: number;
	/**
	 * When enabled, renders an invisible overlay that prevents accidental clicks on elements behind the popover.
	 * @default false
	 */
	renderOverlay?: boolean;
}
export type PopoverProps = PopoverProperties & Omit<HTMLAttributes<HTMLDivElement>, "children" | "content">;
export declare const Popover: React.FC<PopoverProps>;

export {
	Popover as default,
};

export {};