import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
import { BoxProps } from '@chakra-ui/react';
import React from 'react';
import { AriaPositionProps } from 'react-aria';

type CardSelectProps = BoxProps & {
    /** The design of the trigger button.
     *
     * - `ghost` is a transparent button with text
     * - `outline` is a button with a border and text
     * - `card` is a button with a drop shadow (like a card) and text
     */
    variant: "ghost" | "outline" | "card";
    /** The size of the trigger button */
    size: "sm" | "md" | "lg";
    /** Whether the card select is open / active, if controlled */
    isOpen?: boolean;
    /** The default state of the card select. Defaults to false (closed) */
    defaultOpen?: boolean;
    /** Callback for when the card select opens or closes. */
    onToggle?: (isOpen: boolean) => void;
    /** The text of the trigger button */
    label: string;
    /** An optional trigger button icon, rendered to the left of the label */
    icon?: React.ReactNode;
    /** The content of the card select */
    children: React.ReactNode;
    /** The horizontalOffset of the popover card */
    crossOffset?: number;
    /** The position of the popover card */
    placement?: AriaPositionProps["placement"];
    /** Whether or not to show the chevron. Defaults to true */
    withChevron?: boolean;
};
/**
 * A card select component.
 *
 * This component consists of a trigger button and a card select popover. The trigger button has several different variants and sizes, and can have an optional icon.
 *
 * ```tsx
 * <CardSelect label="Languages" variant="card" size="md">
 *   <LanguageSettings />
 * </CardSelect>
 * ```
 *
 * @see https://spor.vy.no/komponenter/card-select
 */
declare const CardSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CardSelectProps>;

export { CardSelect };