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

type ChoiceChipProps = {
    onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
    isChecked?: boolean;
    defaultChecked?: boolean;
    /** The button text */
    children: React.ReactNode;
    icon?: {
        default: React.ReactNode;
        checked: React.ReactNode;
    };
    size?: "sm" | "md" | "lg" | "xl";
    variant?: "icon" | "choice" | "filter";
};
/**
 * Choice chips are checkboxes that look like selectable buttons.
 *
 * Choice chips are available in four different sizes - `sm`, `md`, `lg` and `xl`.
 *
 * ```tsx
 * <Stack flexDirection="row">
 *   <ChoiceChip size="lg">Bus</ChoiceChip>
 *   <ChoiceChip size="lg">Train</ChoiceChip>
 * </Stack>
 * ```
 *
 * There are also three different variants - `icon`, `choice` and `filter`.
 *
 * ```tsx
 * <Stack flexDirection="row">
 *  <ChoiceChip variant="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
 *  <ChoiceChip variant="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
 *  <ChoiceChip variant="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
 * </Stack>
 *
 * You can add an icon as well, if you want to!
 *
 * ```tsx
 * <Stack flexDirection="row">
 *   <ChoiceChip size="md" icon={<BusIcon />}>Bus</ChoiceChip>
 *   <ChoiceChip size="lg" icon={<TrainIcon />}>Train</ChoiceChip>
 * </Stack>
 * ```
 */
declare const ChoiceChip: _chakra_ui_system_dist_system_types.ComponentWithAs<_chakra_ui_system_dist_system_types.As<any>, ChoiceChipProps>;

export { ChoiceChip, ChoiceChipProps };