import type React from 'react';
import type { CollapsibleDetail } from './types.js';
export interface CollapsibleRef extends HTMLElement {
    /** Expands the collapsible content. */
    open(): void;
    /** Collapses the content. */
    close(): void;
    /** Toggles the collapsible state. */
    toggle(): void;
}
/**
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<CollapsibleRef>(null)`, pass `ref={api}`, then `api.current?.open()`.
 * Available: open(), close(), toggle().
 *
 * @csspart base, panel, trigger
 */
export interface CollapsibleOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label?: string;
    /**
     * Pre-rendered HTML for the trigger element that toggles the panel.
     * @example 'example'
     */
    triggerHtml?: string;
    /**
     * Whether the collapsible panel is expanded.
     * @defaultValue false
     * @example true
     */
    open?: boolean;
    /**
     * Icon name to display.
     * @example 'example'
     */
    icon?: string;
    /**
     * Hides the expand/collapse chevron icon.
     * @defaultValue false
     * @example true
     */
    noIcon?: boolean;
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Disables the component, preventing interaction.
     * @defaultValue false
     * @example true
     */
    disabled?: boolean;
    /**
     * Fires when the committed component value or state changes. Detail: `CollapsibleDetail`.
     * @example (event) => console.log(event.detail.open)
     */
    onChange?: (event: CustomEvent<CollapsibleDetail>) => void;
    /** Default slot content.
     * @example <span>Content</span>
     */
    children?: React.ReactNode;
    /** Content for the `trigger` slot.
     * @example <span>Content</span>
     */
    trigger?: React.ReactNode;
    /** 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 `<Collapsible>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-collapsible>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type CollapsibleProps = CollapsibleOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof CollapsibleOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "dangerouslySetInnerHTML" | keyof CollapsibleOwnProps> & React.RefAttributes<CollapsibleRef>>;