import { MasterDetailLayout as _MasterDetailLayout } from './generated/MasterDetailLayout.js';
import React from 'react';
export * from './generated/MasterDetailLayout.js';
type MasterProps = React.PropsWithChildren<{}>;
type DetailProps = React.PropsWithChildren<{}>;
type DetailPlaceholderProps = React.PropsWithChildren<{}>;
declare const MasterDetailLayoutWithValidation: React.FC<React.ComponentProps<typeof _MasterDetailLayout>>;
/**
 * `MasterDetailLayout` is a React component for building UIs with a master
 * (or primary) area and a detail (or secondary) area that is displayed next to, or
 * overlaid on top of, the master area, depending on configuration and viewport size.
 *
 * Content for each area should be wrapped into the respective
 * `MasterDetailLayout.Master`, `MasterDetailLayout.Detail`, and optionally
 * `MasterDetailLayout.DetailPlaceholder` wrapper components.
 * Using any other component as a child will throw an error. To ensure that view
 * transitions are run properly, details content should be rendered conditionally
 * into the `MasterDetailLayout.Detail` component. The `DetailPlaceholder` is shown
 * in the detail area when no detail is selected, and is hidden when the viewport
 * is too narrow (unlike detail, it does not become an overlay).
 *
 * @example
 * ```tsx
 * const selectedProduct = useSignal<Product | null>(null);
 *
 * <MasterDetailLayout>
 *   <MasterDetailLayout.Master>
 *     <ProductList onSelect={(product) => { selectedProduct.value = product }} />
 *   </MasterDetailLayout.Master>
 *   <MasterDetailLayout.Detail>
 *     { selectedProduct.value && <ProductDetail product={selectedProduct.value} /> }
 *   </MasterDetailLayout.Detail>
 * </MasterDetailLayout>
 * ```
 */
declare const MasterDetailLayout: typeof MasterDetailLayoutWithValidation & {
    Master: React.FC<MasterProps>;
    Detail: React.FC<DetailProps>;
    DetailPlaceholder: React.FC<DetailPlaceholderProps>;
};
export { MasterDetailLayout };
//# sourceMappingURL=MasterDetailLayout.d.ts.map