import React from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

interface CheckboxTagGroupItem {
    label: string;
    value: string;
    disabled?: boolean;
}
type CheckboxTagGroupSize = "xl" | "lg" | "md" | "sm";
/** Visual emphasis of the selected tags. */
type CheckboxTagGroupVariant = "primary" | "secondary";
/** Color palette applied to the selected tags (used by the `primary` variant). */
type CheckboxTagGroupTone = "brand" | "brandExtra" | "alert" | "mono";
/**
 * Selection mode for the tag group.
 * - `"multiple"` (default) — any number of tags can be selected.
 * - `"single"` — at most one tag is selected at a time; selecting a new tag
 *   deselects the previously selected one, and clicking the active tag clears it.
 */
type CheckboxTagGroupSelectionMode = "single" | "multiple";
interface CheckboxTagGroupProps extends ThemeOverrideProps {
    /** Array of options */
    options: CheckboxTagGroupItem[];
    /** Controlled selected values */
    value?: string[];
    /** Default selected values (uncontrolled) */
    defaultValue?: string[];
    /** Callback when selection changes */
    onChange?: (values: string[]) => void;
    /** Size variant */
    size?: CheckboxTagGroupSize;
    /**
     * Visual emphasis of the selected tags.
     * - `secondary` (default): subtle, low-emphasis fill — the original monotone
     *   look. The `tone` prop has no visual effect on this variant.
     * - `primary`: solid, high-emphasis fill colored by `tone`.
     * @default "secondary"
     */
    variant?: CheckboxTagGroupVariant;
    /**
     * Color palette applied to the selected tags when `variant="primary"`.
     * Mirrors the tone vocabulary used across the toolkit (e.g. `Button`). Has no
     * visual effect on the `secondary` variant.
     * @default "brand"
     */
    tone?: CheckboxTagGroupTone;
    /**
     * Selection mode. Defaults to `"multiple"`.
     * - `"multiple"` — any number of tags can be selected.
     * - `"single"` — at most one tag is selected at a time; selecting a new tag
     *   deselects the previous one. The `value` / `onChange` contract stays
     *   `string[]` in both modes (single mode emits an array of length 0 or 1).
     */
    selectionMode?: CheckboxTagGroupSelectionMode;
    /** Disable all options */
    disabled?: boolean;
    /** Error message to display */
    errorMessage?: string;
    /** Accessible label for the group */
    "aria-label"?: string;
    testID?: string;
}

declare const CheckboxTagGroup: React.FC<CheckboxTagGroupProps>;

export { CheckboxTagGroup, type CheckboxTagGroupItem, type CheckboxTagGroupProps, type CheckboxTagGroupSelectionMode, type CheckboxTagGroupSize, type CheckboxTagGroupTone, type CheckboxTagGroupVariant };