import { TNode, Value } from '@tempots/dom';
import { ControlSize } from '../theme';
/**
 * Describes a single item in an {@link Accordion}.
 *
 * Each item has a unique key, a header (rendered as the clickable trigger),
 * and body content revealed when the item is expanded.
 */
export interface AccordionItem {
    /** Unique key identifying this item within the accordion */
    key: string;
    /** Content rendered in the clickable header area */
    header: TNode;
    /** Content revealed when the item is expanded */
    body: TNode;
    /** Whether this item is initially open. @default false */
    defaultOpen?: boolean;
    /** Whether this item is disabled and cannot be toggled. @default false */
    disabled?: boolean;
}
/**
 * Configuration options for the {@link Accordion} component.
 */
export interface AccordionOptions {
    /** The accordion items to render */
    items: AccordionItem[];
    /**
     * Whether multiple items can be open simultaneously.
     * When false, opening an item closes all others.
     * @default false
     */
    multiple?: Value<boolean>;
    /** Visual size of the accordion. @default 'md' */
    size?: Value<ControlSize>;
    /**
     * Visual variant of the accordion.
     * - `'default'` has visible borders between items
     * - `'separated'` renders each item as a standalone card with gaps between
     * @default 'default'
     */
    variant?: Value<'default' | 'separated'>;
}
/**
 * An accordion component that renders a list of collapsible sections.
 *
 * Each section has a clickable header that toggles the visibility of its content.
 * Supports single-expand mode (default) where opening one item closes others,
 * and multi-expand mode where any combination of items can be open.
 *
 * Includes full keyboard accessibility with `Enter` and `Space` to toggle,
 * and proper ARIA attributes for `role="region"` and `aria-expanded`.
 *
 * @param options - Configuration for the accordion
 * @returns An accordion element with collapsible sections
 *
 * @example
 * ```ts
 * Accordion({
 *   items: [
 *     { key: '1', header: 'Section 1', body: html.p('Content 1') },
 *     { key: '2', header: 'Section 2', body: html.p('Content 2') },
 *   ],
 * })
 * ```
 *
 * @example
 * ```ts
 * // Multiple items open at once
 * Accordion({
 *   items: [...],
 *   multiple: true,
 *   variant: 'separated',
 *   size: 'lg',
 * })
 * ```
 */
export declare function Accordion({ items, multiple, size, variant, }: AccordionOptions): import("@tempots/dom").Renderable;
