import React from 'react';
import type { View } from 'react-native';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type BoxBaseProps } from '../layout/Box';
import { type GroupBaseProps, type GroupProps } from '../layout/Group';
export type ControlGroupOption<ControlComponentProps> = Omit<
  ControlComponentProps,
  'onChange' | 'checked' | 'value'
>;
export type ControlGroupBaseProps<
  ControlValue extends string = string,
  ControlComponentProps extends {
    value?: ControlValue;
  } = {
    value?: ControlValue;
  },
> = Omit<GroupBaseProps<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?: (value: ControlValue | undefined, checked?: boolean) => void;
  };
export type ControlGroupProps<
  ControlValue extends string,
  ControlComponentProps extends {
    value?: ControlValue;
  },
> = ControlGroupBaseProps<ControlValue, ControlComponentProps> &
  Omit<GroupProps, 'children' | 'onChange'>;
declare const ControlGroupWithRef: <
  ControlValue extends string,
  ControlComponentProps extends {
    value?: ControlValue;
  },
>({
  ref,
  ..._props
}: ControlGroupProps<ControlValue, ControlComponentProps> & {
  ref?: React.Ref<View>;
}) => import('react/jsx-runtime').JSX.Element;
export declare const ControlGroup: typeof ControlGroupWithRef &
  React.MemoExoticComponent<typeof ControlGroupWithRef>;
export {};
//# sourceMappingURL=ControlGroup.d.ts.map