import * as react from 'react';
import { ComponentProps } from 'react';
import { FileProps } from './file.js';
import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
import { Tree } from './tree.js';

/**
 * A built-in component to visually represent a file tree.
 *
 * @example
 * Click the folder to test the dynamic functionality of the file tree.
 *
 * <FileTree>
 *   <FileTree.Folder name="content" defaultOpen>
 *     <FileTree.File name="_meta.js" />
 *     <FileTree.File name="contact.md" />
 *     <FileTree.File name="index.mdx" />
 *     <FileTree.Folder name="about">
 *       <FileTree.File name="_meta.js" />
 *       <FileTree.File name="legal.md" />
 *       <FileTree.File name="index.mdx" />
 *     </FileTree.Folder>
 *   </FileTree.Folder>
 * </FileTree>
 *
 * @usage
 * Create the file tree structure by nesting `<FileTree.Folder>` and
 * `<FileTree.File>` components within a `<FileTree>`. Name each file or folder
 * with the `name` attribute. Use `defaultOpen` to set the folder to open on load.
 *
 * ```mdx filename="MDX"
 * import { FileTree } from 'nextra/components'
 *
 * <FileTree>
 *   <FileTree.Folder name="content" defaultOpen>
 *     <FileTree.File name="_meta.js" />
 *     <FileTree.File name="contact.md" />
 *     <FileTree.File name="index.mdx" />
 *     <FileTree.Folder name="about">
 *       <FileTree.File name="_meta.js" />
 *       <FileTree.File name="legal.md" />
 *       <FileTree.File name="index.mdx" />
 *     </FileTree.Folder>
 *   </FileTree.Folder>
 * </FileTree>
 * ```
 */
declare const FileTree: ((props: ComponentProps<typeof Tree>) => react_jsx_runtime_js.JSX.Element) & {
    Folder: react.FC<FileProps & {
        open?: boolean;
        defaultOpen?: boolean;
        children: react.ReactNode;
    }>;
    File: react.FC<FileProps>;
};

export { FileTree };