import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
import { AsChildProp } from '../../utils/misc';
/**
 * Primitive component for collapsible content. Root provides state.
 *
 * Renders fully accessible and animated collapsible, with no styles besides necessary.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <CollapsibleRoot>
 *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
 *   <CollapsibleContent>Content to collapse</CollapsibleContent>
 * </CollapsibleRoot>
 * ```
 *
 * @example
 * ```tsx
 * // With button and content styles
 * <CollapsibleRoot>
 *   <CollapsibleTrigger asChild>
 *     <Button>Trigger me</Button>
 *   </CollapsibleTrigger>
 *   <CollapsibleContent>
 *     <div className="p-5 bg-primary">Content to collapse</div>
 *   </CollapsibleContent>
 * </CollapsibleRoot>
 * ```
 */
export declare const CollapsibleRoot: (props: ComponentProps<typeof CollapsiblePrimitive.Root>) => import("react").JSX.Element;
/**
 * Button that toggles the collapsible.
 *
 * @example
 * ```tsx
 * <CollapsibleTrigger asChild>
 *   <Button>Trigger me</Button>
 * </CollapsibleTrigger>
 * ```
 */
export declare const CollapsibleTrigger: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
export interface CollapsibleRootProps extends ComponentProps<"div"> {
    asChild?: AsChildProp;
}
/**
 * Primitive component providing collapsing animation.
 * Mostly unstyled, provided just essential styles for collapsing.
 *
 * Collapse relies on animating `grid-template-rows`.
 * `1fr` when visible, `0fr` when hidden.
 * This approach guarantees performant transition and animation from 0 to max height.
 *
 * @example
 * ```tsx
 * <CollapsibleContentRoot>
 *   <CollapsibleContentInner>
 *     Content to collapse
 *   </CollapsibleContentInner>
 * </CollapsibleContentRoot>
 * ```
 */
export declare const CollapsibleContentRoot: ({ className, asChild, ...props }: CollapsibleRootProps) => import("react").JSX.Element;
export interface CollapsibleContentProps extends ComponentProps<"div"> {
    asChild?: AsChildProp;
}
/**
 * Content container for CollapsibleContentRoot.
 * It just renders div with hidden overflow, but this structure
 * is necessary for collapsing to work.
 *
 * @remarks
 * If you want to add padding or margin to the content,
 * make sure to add it to the children of `CollapsibleContentInner`.
 *
 * @example
 * ```tsx
 * <CollapsibleContentRoot>
 *   <CollapsibleContentInner>
 *     <div className="p-5">Content to collapse</div>
 *   </CollapsibleContentInner>
 * </CollapsibleContentRoot>
 * ```
 */
export declare const CollapsibleContentInner: ({ className, asChild, ...props }: CollapsibleContentProps) => import("react").JSX.Element;
/**
 * Shows collapsed content. Has to be used within CollapsibleRoot.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <CollapsibleContent>Content to collapse</CollapsibleContent>
 * ```
 *
 * @example
 * ```tsx
 * // With content styles
 * <CollapsibleContent>
 *   <div className="p-5 bg-primary">Content to collapse</div>
 * </CollapsibleContent>
 * ```
 */
export declare const CollapsibleContent: ({ children, ...props }: ComponentProps<typeof CollapsiblePrimitive.Content>) => import("react").JSX.Element;