import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
import { IconProps } from '../Icon/Icon';
import { InputActionButtonProps, InputAriaAttribute, InputSize, SupportedInputTypes } from './Input.utils';
export interface InputProps extends Omit, 'size'> {
/** Unique id for the input. */
id: string;
/** Label text displayed above the input. */
label: string;
/** Action button props:
*
* `label`: Accessibility label for the action button or icon.
*
* `data-*`: Custom data attributes.
*
* `iconName`: Name of the icon used in the action button.
*
* `iconSource`: Custom source URL for the action button icon.
*
* `onClick`: Callback function called when the action button is clicked.
*/
actionButtonProps?: InputActionButtonProps;
/** ARIA attributes to enhance accessibility
* `{'aria-describedby'?: string; 'aria-labelledby'?: string;}`
*
* `aria-describedby` ids are appended to the ids the component generates internally, e.g. for the system feedback.
* */
aria?: SelectedAriaAttributes;
/**
* Provides hints to the browser for what type of data the input expects.
* Use standardized values from the W3C specification for input purposes:
* https://www.w3.org/TR/WCAG21/#input-purposes.
*/
autoComplete?: string;
/** Disables the input, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Hides the input label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
hideLabel?: BreakpointCustomizable;
/** Short descriptive text displayed beneath the label. */
hint?: string;
/** Name of the leading icon. */
leadingIconName?: IconName;
/** URL or path for a custom leading icon. */
leadingIconSource?: IconProps['source'];
/** Marks the input as invalid, typically used for form validation.
* @default false
*/
invalid?: boolean;
/** Shows an info button next to the label that triggers a popover with the passed content. */
popoverContent?: React.ReactNode;
/** Popover info button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the default anchor button.
* (default) 'Toggle popover'
*/
popoverInfoButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
/** Text displayed as a prefix inside the input, maximum 8 characters. */
prefix?: string;
/** Enables the readonly state of the input.
* @default false
*/
readonly?: boolean;
/** Indicates that the input is required.
* @default false
*/
required?: boolean;
/** Text displayed as a suffix inside the input, maximum 5 characters. */
suffix?: string;
/** Defines a system feedback message, shown when `invalid={true}`. */
systemFeedback?: string;
/** Size of the input.
* @default 'medium'
*/
size?: InputSize;
/** Type of the input.
* @default 'text'
*/
type?: SupportedInputTypes;
}
/** @internal Props including theme — not exported to consumers. */
export interface InputPropsWithTheme extends InputProps {
/** Defines the theme.
* @default 'light'
*/
theme?: Theme;
}
/**
* The `` component is a versatile input field that allows users to enter and edit text.
* It comes in two sizes (medium & small) and supports various customizations including an action button,
* a leading icon, prefix and suffix.
*
* Depending on the `type` prop it expects different input types.
*
* Design in Figma: [Input](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1744-7211&t=UBsmFURFENnuYSW1-4)
*/
export declare const DSInput: import('react').ForwardRefExoticComponent>;