import React from 'react';
import type { SharedProps } from '@coinbase/cds-common/types';
import { type BoxBaseProps, type BoxProps } from '../layout';
export type ControlGroupOption<P> = Omit<P, 'onChange' | 'checked' | 'value'>;
export type ControlGroupBaseProps<
  ControlValue extends string = string,
  ControlComponentProps extends {
    value?: ControlValue;
  } = {
    value?: ControlValue;
  },
> = Omit<BoxBaseProps, 'children' | 'onChange'> &
  SharedProps & {
    /** The control component to render for each option. */
    ControlComponent: React.ComponentType<ControlComponentProps>;
    /** Control options for the group. */
    options: (ControlGroupOption<ControlComponentProps> & {
      value: ControlValue;
    })[];
    /** Set a label for the group. */
    label?: React.ReactNode;
    /** Current selected value(s). Use a string for single-select (e.g., RadioGroup) and an array of strings for multi-select (e.g., CheckboxGroup). */
    value: ControlValue | ControlValue[];
    /** Handle change events. */
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    /** The role for the group. Use 'radiogroup' for radio buttons, 'group' for other controls. */
    role?: 'group' | 'radiogroup';
    /** The direction of the group. */
    direction?: 'horizontal' | 'vertical';
    /** The name of the group. */
    name?: string;
  };
export type ControlGroupProps<
  ControlValue extends string,
  ControlComponentProps extends {
    value?: ControlValue;
  },
> = ControlGroupBaseProps<ControlValue, ControlComponentProps> &
  Omit<BoxProps<'div'>, 'children' | 'onChange' | 'as'>;
declare const ControlGroupWithRef: <
  ControlValue extends string,
  ControlComponentProps extends {
    value?: ControlValue;
  },
>(
  props: ControlGroupProps<ControlValue, ControlComponentProps> & {
    ref?: React.Ref<HTMLDivElement>;
  },
) => React.ReactElement;
export declare const ControlGroup: typeof ControlGroupWithRef &
  React.MemoExoticComponent<typeof ControlGroupWithRef>;
export {};
//# sourceMappingURL=ControlGroup.d.ts.map