import type React from 'react';
import type { FocusDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
/**
 * Like Select but always-visible (no dropdown). Items via `items` or `groups` props.
 * Supports single and multi-select via `mode` prop.
 * Keyboard navigation follows WAI-ARIA Listbox pattern.
 *
 * @csspart base
 */
export interface ListboxOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * 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';
    /**
     * Selection behavior: none (display only), single (one item), or multiple (checkboxes). Allowed values: `none`, `single`, `multiple`.
     * @example 'none'
     */
    selectionMode?: 'none' | 'single' | 'multiple';
    /**
     * Currently selected item ID(s).
     * @example ['item-1']
     */
    selected?: string[];
    /**
     * Typed array of item data objects. Bind as a property; do not stringify it or use children for list items.
     * @example [{ value: 'a', label: 'Option A' }]
     */
    items?: SelectOption[];
    /**
     * Typed array of grouped item data. Bind as a property; do not stringify it or use children for groups.
     * @example [{ label: 'Group', options: [{ value: 'a', label: 'Option A' }] }]
     */
    groups?: OptionGroup[];
    /**
     * Fires when the committed component value or state changes. Detail: `SelectDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onChange?: (event: CustomEvent<SelectDetail>) => void;
    /**
     * Fires when focus enters the component. Detail: `FocusDetail`.
     * @example (event) => console.log(event.detail.relatedTarget)
     */
    onFocus?: (event: CustomEvent<FocusDetail>) => void;
    /**
     * Fires when focus leaves the component. Detail: `FocusDetail`.
     * @example (event) => console.log(event.detail.relatedTarget)
     */
    onBlur?: (event: CustomEvent<FocusDetail>) => void;
    /**
     * Fires when a key is pressed inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeydown?: (event: CustomEvent<KeyboardDetail>) => void;
    /**
     * Fires when a key is released inside the component. Detail: `KeyboardDetail`.
     * @example (event) => console.log(event.detail.key)
     */
    onKeyup?: (event: CustomEvent<KeyboardDetail>) => 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 `<Listbox>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-listbox>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type ListboxProps = ListboxOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof ListboxOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Listbox: React.ForwardRefExoticComponent<ListboxOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof ListboxOwnProps> & React.RefAttributes<HTMLElement>>;