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>;