import type React from 'react';
import type { CxTagData, InputDetail, TagDismissDetail, TagInputChangeDetail } from './types.js';
export interface TagInputRef extends HTMLElement {
    /** Adds a tag. Fires cx-change. */
    addTag(tag: CxTagData): void;
    /** Removes a tag by value. Fires cx-change. */
    removeTag(value: string): void;
    /** Removes all tags. Fires cx-change. */
    clearTags(): void;
    /** Returns the current tag list. */
    getTags(): CxTagData[];
}
/**
 * Pass `tags` as a typed CxTagData[] property, not as children or JSON text.
 * Each tag has `value` (unique key), `label` (display text, defaults to value).
 * The component renders tokenized pills with remove buttons inside Shadow DOM.
 * `onChange` fires with the full `{ tags: CxTagData[] }` array after every add/remove.
 * `onInput` fires on the text input keystroke with `{ value }`.
 * `onDismiss` fires when a specific tag's remove button is clicked with `{ value }`.
 * Keyboard: Enter/comma adds a tag from input value, Backspace on empty input removes the last tag.
 * Imperative: `addTag(tag)`, `removeTag(value)`, `clearTags()`, `getTags()` — see the framework access note below.
 * Style zones via `::part(base)`, `::part(tag)`, `::part(input)`.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TagInputRef>(null)`, pass `ref={api}`, then `api.current?.addTag()`.
 * Available: addTag(), removeTag(), clearTags(), +1 more.
 *
 * @csspart base, tag, input
 */
export interface TagInputOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Visual style variant. Allowed values: `outline`, `filled`, `ghost`.
     * @example 'outline'
     */
    variant?: 'outline' | 'filled' | 'ghost';
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`, `pill`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded' | 'pill';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Semantic color intent (e.g. primary, success, danger). Allowed values: `neutral`, `primary`, `info`, `success`, `warning`, `danger`.
     * @example 'neutral'
     */
    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
    /**
     * Placeholder text for the input field.
     * @example 'Enter a value'
     */
    placeholder?: string;
    /**
     * Helper text displayed below the input.
     * @example 'example'
     */
    helperText?: string;
    /**
     * Error message text. When set, shows validation error styling.
     * @example 'This field is invalid'
     */
    error?: string;
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Makes the component read-only.
     * @defaultValue false
     * @example true
     */
    readonly?: boolean;
    /**
     * Marks the field as required for form validation.
     * @defaultValue false
     * @example true
     */
    required?: boolean;
    /**
     * Form field name for submission.
     * @example 'fieldName'
     */
    name?: string;
    /**
     * Maximum number of tags allowed. Input becomes readonly at capacity.
     * @example 1
     */
    maxTags?: number;
    /**
     * Array of tags. Each tag has value, label, optional icon and disabled flag.
     * @example [{ value: 'rust', label: 'Rust' }]
     */
    tags?: CxTagData[];
    /**
     * Fires on each user edit before the value is committed. Detail: `InputDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onInput?: (event: CustomEvent<InputDetail>) => void;
    /**
     * Fires when the committed component value or state changes. Detail: `TagInputChangeDetail`.
     * @example (event) => console.log(event.detail.tags)
     */
    onChange?: (event: CustomEvent<TagInputChangeDetail>) => void;
    /**
     * Fires when the user dismisses the component. Detail: `TagDismissDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onDismiss?: (event: CustomEvent<TagDismissDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<TagInput>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-tag-input>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TagInputProps = TagInputOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TagInputOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const TagInput: React.ForwardRefExoticComponent<TagInputOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TagInputOwnProps> & React.RefAttributes<TagInputRef>>;