import type React from 'react';
import type { CloseDetail, CommandSelectDetail, CxCommandGroup } from './types.js';
export interface CommandPaletteRef extends HTMLElement {
    /** Opens the command palette as a modal dialog. */
    open(): void;
    /** Closes the command palette. */
    close(): void;
    /** Toggles the command palette open/closed. */
    toggle(): void;
}
/**
 * Pass commands via the typed `groups` property (CxCommandGroup[]), not as children or JSON text.
 * Each group has a `label` and `items` array. Each item has `id`, `label`, optional `icon`, `shortcut`, `description`, `disabled`, `href`.
 * The palette renders as a `<dialog>` — open it imperatively (see the framework access note below), with the `open` boolean prop, or with the built-in Ctrl+K / Cmd+K shortcut.
 * `onSelect` fires when a command is activated with `{ id, label }`. Items with `href` navigate directly instead of firing the event.
 * `onClose` fires when the palette is dismissed with `{ reason }` (escape, backdrop, close-button).
 * Keyboard: ↑↓ navigate options, Enter selects, Escape closes, Home/End jump. Type to filter.
 * Imperative: `open()`, `close()`, `toggle()` — see the framework access note below.
 * Style zones via `::part(base)`, `::part(panel)`, `::part(search)`, `::part(results)`, `::part(footer)`.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<CommandPaletteRef>(null)`, pass `ref={api}`, then `api.current?.open()`.
 * Available: open(), close(), toggle().
 *
 * @csspart base, panel, search, results, footer
 */
export interface CommandPaletteOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Placeholder text for the search input.
     * @example 'Enter a value'
     */
    placeholder?: string;
    /**
     * Corner radius style. Allowed values: `sharp`, `rounded`.
     * @example 'sharp'
     */
    shape?: 'sharp' | 'rounded';
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Array of command groups. Each group has a label and array of items with id, label, optional icon/shortcut/description/disabled/href.
     * @example [{ label: 'Actions', items: [{ id: 'save', label: 'Save' }] }]
     */
    groups?: CxCommandGroup[];
    /**
     * Boolean. When set, opens the palette as a modal dialog. Remove to close.
     * @defaultValue false
     * @example true
     */
    open?: boolean;
    /**
     * Fires when the component closes. Detail: `CloseDetail`.
     * @example (event) => console.log(event.detail.reason)
     */
    onClose?: (event: CustomEvent<CloseDetail>) => void;
    /**
     * Fires when the user selects an item or data node. Detail: `CommandSelectDetail`.
     * @example (event) => console.log(event.detail.id)
     */
    onSelect?: (event: CustomEvent<CommandSelectDetail>) => 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 `<CommandPalette>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-command-palette>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type CommandPaletteProps = CommandPaletteOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof CommandPaletteOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const CommandPalette: React.ForwardRefExoticComponent<CommandPaletteOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof CommandPaletteOwnProps> & React.RefAttributes<CommandPaletteRef>>;