import React from 'react';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type InteractableBaseProps } from '../system/Interactable';
import type { FilteredHTMLAttributes } from '../types';
export type ControlBaseProps<ControlValue extends string> = FilteredHTMLAttributes<
  React.InputHTMLAttributes<HTMLInputElement>,
  'value' | 'color'
> &
  SharedProps &
  Partial<
    Pick<
      InteractableBaseProps,
      'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'color' | 'elevation'
    >
  > & {
    /** Label for the control option. */
    children?: React.ReactNode;
    /** Set the control to selected/on. */
    checked?: boolean;
    /** Disable user interaction. */
    disabled?: boolean;
    /** Set the control to ready-only. Similar effect as disabled. */
    readOnly?: boolean;
    /** Value of the option. Useful for multiple choice. */
    value?: ControlValue;
    /** Accessibility label describing the element. */
    accessibilityLabel?: string;
    /** Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. */
    indeterminate?: boolean;
    /** Style for the icon element */
    iconStyle?: React.CSSProperties;
    /** Style for the label element */
    labelStyle?: React.CSSProperties;
  };
export type ControlProps<ControlValue extends string> = ControlBaseProps<ControlValue> & {
  label?: React.ReactNode;
  children: React.ReactNode;
};
declare const ControlWithRef: <ControlValue extends string>(
  props: ControlProps<ControlValue> & {
    ref?: React.Ref<HTMLInputElement>;
  },
) => React.ReactElement;
export declare const Control: typeof ControlWithRef &
  React.MemoExoticComponent<typeof ControlWithRef>;
export {};
//# sourceMappingURL=Control.d.ts.map