import React from 'react';
type BuiltinFlavor = 'primary' | 'success' | 'danger' | 'warning' | 'neutral';
type ShadedFlavor = BuiltinFlavor | `${BuiltinFlavor}+` | `${BuiltinFlavor}-`;
type Placement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
export interface TySelectItem {
    value: string;
    label: string;
    flavor: string | null;
}
export interface TySelectEventDetail {
    /** Scalar for single select, array when `multiple` */
    value: string | string[] | null;
    /** Always the array form of the selection */
    values: string[];
    /** Rich info per selected value — enough to render chips out-of-band */
    items: TySelectItem[];
    /** Action that triggered the change */
    action: 'add' | 'remove' | 'clear' | 'set' | 'create';
    /** The specific value that changed */
    item: string | null;
}
export interface TySelectProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'style'> {
    style?: import('./TyInput').TyInputCSSProperties;
    /** Selected value(s) — string, comma-separated string, or array */
    value?: string | string[];
    /** Multi select (native <select multiple> semantics). Default: single. */
    multiple?: boolean;
    /** Compact content-hugging trigger (toolbars, filter bars) instead of the full-width field look */
    compact?: boolean;
    /** Placeholder shown while nothing is selected */
    placeholder?: string;
    /** Label text above the field */
    label?: string;
    /** Form field name — single submits one entry, multiple submits repeated entries */
    name?: string;
    /** Disable the select */
    disabled?: boolean;
    /** Read-only */
    readonly?: boolean;
    /** Mark the field as required */
    required?: boolean;
    /**
     * Search row visibility: 'auto' (default) shows it only for 8+ options,
     * 'always' / 'never' force it. external-search always shows it.
     */
    searchable?: 'auto' | 'always' | 'never' | boolean;
    /**
     * External (remote) search mode — the component stops filtering and emits
     * debounced `search` events; replace the option children in response.
     */
    externalSearch?: boolean;
    /** Debounce for the search event in ms (0-5000) */
    debounce?: number;
    /**
     * Enter on unmatched search text mints a new <ty-option> (forces the
     * search row on, same as externalSearch). Listen to onCreate to mutate
     * the value before it's created, or preventDefault() to take over
     * entirely (e.g. after a server round-trip).
     */
    allowCreate?: boolean;
    /**
     * Opt-in normalizer for the value allowCreate mints — the display label
     * is always kept verbatim. 'slug': lowercase, spaces → '_', strips
     * everything else non-alphanumeric. Default: value === typed text.
     */
    createTransform?: 'slug';
    /** Loading state — shows a spinner in the options area (external search in flight) */
    loading?: boolean;
    /** Size variant */
    /** Field size — fields come in exactly three; legacy xs/xl map to sm/lg */
    size?: 'sm' | 'md' | 'lg';
    /** Horizontal popup anchor: "start" (default, trigger's left edge), "center", or "end" (trigger's right edge) — clamped into the viewport either way. Useful with a custom slot="trigger" element. Ignored when `placement` is set. */
    align?: 'start' | 'center' | 'end';
    /** Full placement, same vocabulary as ty-popup/ty-tooltip: a side plus an optional cross-axis alignment (e.g. "bottom-end"). Takes precedence over `align` when set. */
    placement?: Placement;
    /** Built-in x clear button in the default/compact trigger, shown once something is selected. Default true. Not shown with slot="trigger" — use the ref's clear() method there instead. */
    clearable?: boolean;
    /** Visual flavor for the field border — built-in semantic, +/- shade, or a custom flavor backed by --ty-*-X tokens */
    flavor?: ShadedFlavor | (string & {});
    /** Callback when selection changes */
    onChange?: (event: CustomEvent<TySelectEventDetail>) => void;
    /** Callback fired on each search input change (debounced). Use for external/server-side filtering. */
    onSearch?: (event: CustomEvent<{
        query: string;
        element: HTMLElement;
    }>) => void;
    onOpen?: (event: CustomEvent) => void;
    onClose?: (event: CustomEvent) => void;
    /**
     * Fired before allowCreate mints a new option — cancelable. Mutate
     * `event.detail.value` to change the id that gets created (e.g. slugify
     * it yourself), or call `event.preventDefault()` to create it yourself.
     */
    onCreate?: (event: CustomEvent<{
        value: string;
        label: string;
    }>) => void;
    /** TyOption children (plus optional slot="trigger" / slot="start" / slot="end" elements) */
    children?: React.ReactNode;
}
/** The underlying custom element, typed with its imperative clear() method — useful with a ref, e.g. for slot="trigger" custom triggers that call it directly instead of relying on the built-in clear button. */
export interface TySelectElement extends HTMLElement {
    clear(): void;
}
export declare const TySelect: React.ForwardRefExoticComponent<TySelectProps & React.RefAttributes<TySelectElement>>;
export interface TySelectedTagsProps extends React.HTMLAttributes<HTMLElement> {
    /** id of the ty-select to display. Falls back to the previous element sibling. */
    htmlFor?: string;
    /** Optional <template> child as chip blueprint ({value}/{label}/{flavor}/{data-*} placeholders) */
    children?: React.ReactNode;
}
/** React wrapper for the ty-selected-options web component. */
export declare const TySelectedOptions: React.ForwardRefExoticComponent<TySelectedTagsProps & React.RefAttributes<HTMLElement>>;
/** @deprecated Use `TySelectedOptions` — kept for backward compatibility. */
export declare const TySelectedTags: React.ForwardRefExoticComponent<TySelectedTagsProps & React.RefAttributes<HTMLElement>>;
export {};
//# sourceMappingURL=TySelect.d.ts.map