import type { FocusEvent, KeyboardEvent, ReactNode } from "react";
import type { BoxProps } from "@chakra-ui/react";
import type { PaletteProps } from "../../Theme/tokens/types";
type GroupState = {
    value: string | undefined;
    tabStop: string | undefined;
    select: (value: string) => void;
};
export declare const useSelectableGroup: () => GroupState | null;
/** Single-select radio group; controlled via `value`, uncontrolled via `defaultValue`. */
export type SelectableGroupProps = {
    value?: string;
    defaultValue?: string;
    onValueChange?: (value: string) => void;
    gap?: number;
    columns?: number;
    children: ReactNode;
    "aria-label"?: string;
    "aria-labelledby"?: string;
    "data-testid"?: string;
};
/** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
export declare const SelectableGroup: ({ value, defaultValue, onValueChange, gap, columns, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }: SelectableGroupProps) => import("react/jsx-runtime").JSX.Element;
/** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
export declare const selectableSurface: (colors: PaletteProps, { selected, disabled, interactive, ringed }: {
    selected: boolean;
    disabled: boolean;
    interactive: boolean;
    ringed: boolean;
}) => BoxProps;
type RadioIndicatorProps = {
    selected: boolean;
};
/** The 20px circle that carries selection state beside the text. */
export declare const RadioIndicator: ({ selected }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
export type SelectableSemantics = {
    role: "radio" | "button" | undefined;
    "aria-checked"?: boolean;
    "aria-pressed"?: boolean;
    tabIndex: number | undefined;
    "data-value"?: string;
    onClick: () => void;
    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
    onFocus: (event: FocusEvent<HTMLElement>) => void;
    onBlur: () => void;
};
/** Radio inside a group, toggle button when only `onSelect` is given, inert otherwise. */
export declare const useSelectable: ({ value, selected, disabled, onSelect, }: {
    value?: string;
    selected?: boolean;
    disabled: boolean;
    onSelect?: () => void;
}) => {
    isSelected: boolean;
    interactive: boolean;
    inGroup: boolean;
    ringed: boolean;
    props: SelectableSemantics;
};
export {};