import { ReactElement } from 'react';

/**
 * TagInput — WealthX Design System
 *
 * A tokenized, free-form contact-tag input: selected tags render as removable
 * {@link Chip}s, and an inline text field autocompletes against existing tags
 * with a "Create '<x>'" affordance for new ones. Multi-select, de-duplicated
 * (case-insensitive), with an optional `maxTags` cap.
 *
 * Pure & controlled — the host owns the value (`value` / `onChange`) and the
 * autocomplete source (`suggestions`). No data fetching here.
 *
 * Used to tag a contact (ManageContactTagsDialog), tag an imported batch
 * (CSV import) and pick a campaign audience by tag.
 */

interface TagInputProps {
    /** Currently selected tags (controlled). */
    value: string[];
    /** Called with the next selection whenever a tag is added or removed. */
    onChange: (next: string[]) => void;
    /** Existing tags to autocomplete against (e.g. the broker's tag library). */
    suggestions?: string[];
    placeholder?: string;
    /** Cap the number of tags. When reached, the field stops accepting input. */
    maxTags?: number;
    /** Allow creating a brand-new tag from the typed text. Defaults to true. */
    allowCreate?: boolean;
    disabled?: boolean;
    /** Accessible label for the text field (falls back to "Add a tag"). */
    "aria-label"?: string;
    id?: string;
    className?: string;
}
declare function TagInput({ value, onChange, suggestions, placeholder, maxTags, allowCreate, disabled, "aria-label": ariaLabel, id, className, }: TagInputProps): ReactElement;

export { TagInput, type TagInputProps };