import { Value } from '@tempots/dom';
import { InputOptions } from './input-options';
import { DropdownOption } from './option';
import { BaseControllerOptions, ControllerOptions } from '../control';
/**
 * Options for the {@link SelectTagsInput} component.
 * Combines tag selection with a click-to-open dropdown menu.
 *
 * @typeParam T - The type of tag values.
 */
export type SelectTagsOptions<T> = {
    /** The available dropdown options to choose from. */
    options: Value<DropdownOption<T>[]>;
    /**
     * Custom equality function for comparing option values.
     * @default (a, b) => a === b
     */
    equality?: (a: T, b: T) => boolean;
    /** Placeholder text shown when no tags are selected. */
    placeholder?: Value<string>;
} & InputOptions<T[]>;
/**
 * Renders selected values as removable tag chips with labels resolved from
 * dropdown options. Shows a placeholder when no values are selected.
 *
 * @typeParam T - The type of tag values.
 * @param opts - Options for the chips display.
 * @returns A renderable chips component.
 *
 * @example
 * ```ts
 * Chips({
 *   values: prop(['react']),
 *   options: [{ type: 'value', value: 'react', label: 'React' }],
 *   equality: (a, b) => a === b,
 *   onRemove: v => console.log('Remove:', v),
 * })
 * ```
 */
export declare function Chips<T>(opts: {
    values: Value<T[]>;
    placeholder?: Value<string>;
    options: Value<DropdownOption<T>[]>;
    equality: (a: T, b: T) => boolean;
    disabled?: Value<boolean>;
    onRemove: (v: T) => void;
}): import("@tempots/dom").Renderable;
/**
 * A multi-select tag input with a click-to-open dropdown menu.
 *
 * Selected values are displayed as removable chips. Clicking the input area
 * opens a dropdown menu where items can be toggled on/off. Supports grouped
 * options and custom equality comparisons.
 *
 * @typeParam T - The type of tag values.
 * @param options - Configuration options for the select tags input.
 * @returns A renderable select tags input component.
 *
 * @example
 * ```ts
 * SelectTagsInput({
 *   value: prop<string[]>([]),
 *   options: [
 *     { type: 'value', value: 'red', label: 'Red' },
 *     { type: 'value', value: 'blue', label: 'Blue' },
 *     { type: 'value', value: 'green', label: 'Green' },
 *   ],
 *   placeholder: 'Select colors...',
 *   onChange: tags => console.log('Selected:', tags),
 * })
 * ```
 */
export declare function SelectTagsInput<T>(options: SelectTagsOptions<T>): import("@tempots/dom").Renderable;
/**
 * A base form control wrapper for {@link SelectTagsInput} using a raw controller.
 *
 * @typeParam T - The type of tag values.
 * @param options - Base controller options for the select tags control.
 * @returns A renderable form control component.
 */
export declare function BaseSelectTagsControl<T>(options: BaseControllerOptions<T[], SelectTagsOptions<T>>): any;
/**
 * A full form control wrapper for {@link SelectTagsInput} with label, error, and description support.
 *
 * @typeParam T - The type of tag values.
 * @param options - Controller options for the select tags control.
 * @returns A renderable form control component with wrapper.
 */
export declare function SelectTagsControl<T>(options: ControllerOptions<T[], SelectTagsOptions<T>>): import("@tempots/dom").Renderable;
