import React from 'react';
import { View } from 'react-native';
import type { Animated, PressableProps, ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { ElevationLevels } from '@coinbase/cds-common/types/ElevationLevels';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import type { InteractableBaseProps } from '../system/Interactable';
import type { TextProps } from '../typography/Text';
export type ControlIconProps = SharedProps & {
  pressed: boolean;
  checked?: boolean;
  indeterminate?: boolean;
  disabled?: boolean;
  controlColor?: ThemeVars.Color;
  background?: ThemeVars.Color;
  borderColor?: ThemeVars.Color;
  borderRadius?: ThemeVars.BorderRadius;
  borderWidth?: ThemeVars.BorderWidth;
  elevation?: ElevationLevels;
  controlSize?: number;
  dotSize?: number;
  animatedScaleValue: Animated.Value;
  animatedOpacityValue: Animated.Value;
  accessible?: boolean;
};
export type ControlBaseProps<ControlValue extends string> = Omit<
  PressableProps,
  'disabled' | 'children' | 'style'
> &
  Partial<
    Pick<
      InteractableBaseProps,
      'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'color'
    >
  > & {
    /** 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;
    /** Toggle control selected state. */
    onChange?: (value: ControlValue | undefined, checked?: boolean) => void;
    /** Sets the checked/active color of the control.
     * @default bgPrimary
     */
    controlColor?: ThemeVars.Color;
    /** Sets the elevation/drop shadow of the control. */
    elevation?: ElevationLevels;
    /**
     * Sets the control size in pixels.
     */
    controlSize?: number;
    /**
     * Sets the inner dot size in pixels.
     * @default 2/3 of controlSize
     */
    dotSize?: number;
    style?: ViewStyle;
  };
export type ControlProps<ControlValue extends string> = Omit<
  ControlBaseProps<ControlValue>,
  'children'
> & {
  /** Control icon to show. */
  children: React.ComponentType<React.PropsWithChildren<ControlIconProps>>;
  /** Label associated with the multiple choice option control. */
  label?: TextProps['children'];
  /** If control is a switch. This will use switch motion token. */
  shouldUseSwitchTransition?: boolean;
};
declare const ControlWithRef: <ControlValue extends string>({
  ref,
  ..._props
}: ControlProps<ControlValue> & {
  ref?: React.Ref<View>;
}) => import('react/jsx-runtime').JSX.Element;
export declare const Control: typeof ControlWithRef &
  React.MemoExoticComponent<typeof ControlWithRef>;
export {};
//# sourceMappingURL=Control.d.ts.map