import { ComponentPropsWithoutRef } from 'react';
import { LayoutUtilProps } from '../../types';
export type DetailsContextProps = {
    id: string;
    isExpanded: boolean;
    expanded: () => void;
    close: () => void;
    toggle: () => void;
};
export declare const DetailsContext: import('react').Context<DetailsContextProps>;
/**
 * Props for the Details component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends LayoutUtilProps
 */
export type DetailsProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
    /**
     * Determines the controlled expanded state of the details.
     * @remarks Use this to make the details expanded state controlled.
     * @default false
     */
    expanded?: boolean;
    /**
     * Determines the default expanded state of the details.
     * @remarks Use this to make the details expanded state uncontrolled.
     * @default false
     */
    defaultExpanded?: boolean;
};
/**
 * Details component for creating expandable/collapsible content sections.
 *
 * Features:
 * - Expandable and collapsible content sections
 * - Controlled and uncontrolled state management
 * - Accessible with proper ARIA attributes
 * - Smooth animations for expand/collapse
 * - Keyboard navigation support
 * - Layout utility props for positioning and spacing
 * - Compound component pattern with Summary, Content, and Arrow sub-components
 *
 * @example
 * <Details defaultExpanded>
 *   <Details.Summary>Click to expand</Details.Summary>
 *   <Details.Content>This content is now visible</Details.Content>
 * </Details>
 */
export declare const Details: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
    /**
     * Determines the controlled expanded state of the details.
     * @remarks Use this to make the details expanded state controlled.
     * @default false
     */
    expanded?: boolean;
    /**
     * Determines the default expanded state of the details.
     * @remarks Use this to make the details expanded state uncontrolled.
     * @default false
     */
    defaultExpanded?: boolean;
} & import('react').RefAttributes<HTMLDivElement>> & {
    /**
     * DetailsSummary component for the clickable header of a Details section.
     *
     * Features:
     * - Clickable button that toggles the Details expanded state
     * - Automatic ARIA attributes for accessibility
     * - Includes animated arrow indicator
     * - Supports custom onClick handlers
     * - Keyboard navigation support (Enter, Space)
     * - Styled with consistent typography and spacing
     *
     * @example
     * <Details.Summary onClick={() => console.log('Summary clicked')}>
     *   Click to expand content
     * </Details.Summary>
     */
    Summary: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * DetailsContent component for the expandable content area of a Details section.
     *
     * Features:
     * - Expandable and collapsible content area
     * - Smooth animations for height transitions
     * - Configurable height and maxHeight constraints
     * - Automatic overflow handling when height is constrained
     * - Proper ARIA associations with the summary
     * - Responsive design with flexible layout
     *
     * @example
     * <Details.Content maxHeight={300}>
     *   <p>This content will be constrained to 300px max height</p>
     * </Details.Content>
     */
    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
        height?: string | number;
        maxHeight?: string | number;
    } & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * DetailsArrow component for the animated arrow indicator in DetailsSummary.
     *
     * Features:
     * - Animated chevron icon that rotates on expand/collapse
     * - Automatically reflects the current expanded state
     * - Uses consistent icon sizing and styling
     * - Smooth transition animations
     * - Accessible with proper ARIA context
     *
     * @example
     * <DetailsArrow className="custom-arrow" />
     */
    Arrow: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
};