import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
import { type InteractableBaseProps } from '../system/Interactable';
export type InputStackBaseProps = SharedProps &
  Pick<InteractableBaseProps, 'blendStyles'> & {
    /** Width of the border.
     * @default 100
     */
    borderWidth?: ThemeVars.BorderWidth;
    /**
     * Additional border width when focused.
     * @default borderWidth
     */
    focusedBorderWidth?: ThemeVars.BorderWidth;
    /**
     * Determines the sentiment of the input. Because
     * we allow startContent and endContent to be custom ReactNode,
     * the content placed inside these slots will not change colors according
     * to the variant. You will have to add that yourself
     * @default foregroundMuted
     */
    variant?: InputVariant;
    /**
     * Width of input as a percentage string.
     * @default 100%
     * */
    width?: BoxBaseProps['width'];
    /**
     * Height of input
     */
    height?: BoxBaseProps['height'];
    /**
     * Toggles input interactability and opacity
     * @default false
     */
    disabled?: boolean;
    /** Prepends custom content to the start. Content is not part of input */
    prependNode?: React.ReactNode;
    /** Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component */
    startNode?: React.ReactNode;
    /** Appends custom content to the end. Content is not part of input */
    appendNode?: React.ReactNode;
    /** Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component */
    endNode?: React.ReactNode;
    /** Editable area of the Input */
    inputNode: React.ReactNode;
    /** Text shown below input. Used for when label is not enough to indicate what this input does */
    helperTextNode?: React.ReactNode;
    /** A message indicating the purpose of this input */
    labelNode?: React.ReactNode;
    /** This should only be used when focused styles need to be persisted */
    focused?: boolean;
    /**
     * Leverage one of the borderRadius styles we offer to round the corners of the input.
     * @default 200
     */
    borderRadius?: BoxBaseProps['borderRadius'];
    /**
     * Disable default focus styles
     */
    disableFocusedStyle?: boolean;
    /**
     * Enable Color Surge motion
     */
    enableColorSurge?: boolean;
    /**
     * The variant of the label. Only used when compact is not true.
     * @default 'outside'
     */
    labelVariant?: 'inside' | 'outside';
    /**
     * Background color of the input.
     * @default 'bg'
     */
    inputBackground?: ThemeVars.Color;
  };
export type InputStackProps = Omit<
  BoxProps<BoxDefaultElement>,
  'width' | 'height' | 'borderRadius'
> &
  InputStackBaseProps;
export declare const InputStack: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<Omit<InputStackProps, 'ref'> & React.RefAttributes<HTMLElement>>
>;
//# sourceMappingURL=InputStack.d.ts.map