import { InputHTMLAttributes } from 'react'; import { BreakpointCustomizable, SelectedAriaAttributes, Theme } from '../../types'; import { InputSize } from '../Input/Input.utils'; import { InputSearchAriaAttribute } from './InputSearch.utils'; export interface InputSearchProps extends Omit, 'defaultValue' | 'size'> { /** Unique id for the input. */ id: string; /** Label text displayed above the input. */ label: string; /** ARIA attributes to enhance accessibility. * `{'aria-describedby'?: string; 'aria-labelledby'?: string;}` * * The ids are appended to the ids the component generates internally, e.g. for the label, hint and system feedback. * */ aria?: SelectedAriaAttributes; /** Accessibility label for the clear button. * @default 'Clear search field' */ clearButtonLabel?: 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; /** 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; }; /** Enables the readonly state of the input. * @default false */ readonly?: boolean; /** Indicates that the input is required. * @default false */ required?: boolean; /** Submit button props: * * `data-*`: Custom data attributes. * * `label`: Accessibility label for the submit button. * (default) 'Search' * * `onClick`: Callback function called when the submit button is clicked. */ submitButtonProps?: { [key: `data-${string}`]: string | undefined; label?: string; onClick?: (event: React.MouseEvent) => void; }; /** Defines a system feedback message, shown when `invalid={true}`. */ systemFeedback?: string; /** Size of the input. * @default 'medium' */ size?: InputSize; /** Value of the input. */ value?: string; } /** @internal Props including theme — not exported to consumers. */ export interface InputSearchPropsWithTheme extends InputSearchProps { /** Defines the theme. * @default 'light' */ theme?: Theme; } /** * The `` component can be used as a dedicated search field input. * It comes in two sizes (medium & small) and supports various customizations including a label, * a hint and a system feedback message. * * A search button is always available on the right to submit the search request. * Additionally when the input is filled, a button to clear the input value becomes visible. * * Design in Figma: [Input Search](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6712&t=UBsmFURFENnuYSW1-11) */ export declare const DSInputSearch: import('react').ForwardRefExoticComponent>;