import { LayoutAncestor, UseLayoutAncestryReturn } from '../types';
/**
* Hook to access layout ancestry information.
*
* @remarks
* This hook provides information about the parent layout chain,
* making it easy to build layout-aware components.
*
* @returns Layout ancestry information and utility functions
*
* @example
* ```tsx
* function MyComponent() {
* const {
* ancestors,
* findAncestor,
* isInLayout,
* constraints,
* depth,
* } = useLayoutAncestry();
*
* const flexParent = findAncestor('flex');
* const isInGrid = isInLayout('grid');
*
* return (
*
* {flexParent && In flex container}
* {isInGrid && In grid container}
* {constraints && (
*
* Max width: {constraints.width.max}px
*
* )}
*
* );
* }
* ```
*/
export declare function useLayoutAncestry(): UseLayoutAncestryReturn;
/**
* Hook to get the nearest flex container ancestor.
*
* @returns Flex ancestor or undefined
*
* @example
* ```tsx
* function FlexChild() {
* const flexParent = useFlexAncestor();
*
* if (flexParent) {
* console.log('Flex direction:', flexParent.flexProperties?.direction);
* }
*
* return ...
;
* }
* ```
*/
export declare function useFlexAncestor(): LayoutAncestor | undefined;
/**
* Hook to get the nearest grid container ancestor.
*
* @returns Grid ancestor or undefined
*
* @example
* ```tsx
* function GridChild() {
* const gridParent = useGridAncestor();
*
* if (gridParent) {
* console.log('Grid columns:', gridParent.gridProperties?.templateColumns);
* }
*
* return ...
;
* }
* ```
*/
export declare function useGridAncestor(): LayoutAncestor | undefined;
/**
* Hook to get the nearest scroll container ancestor.
*
* @returns Scroll container ancestor or undefined
*
* @example
* ```tsx
* function ScrollChild() {
* const scrollContainer = useScrollContainerAncestor();
*
* if (scrollContainer) {
* console.log('Scroll container bounds:', scrollContainer.bounds);
* }
*
* return ...
;
* }
* ```
*/
export declare function useScrollContainerAncestor(): LayoutAncestor | undefined;
/**
* Hook to get the nearest containing block ancestor.
*
* @returns Containing block ancestor or undefined
*
* @example
* ```tsx
* function AbsoluteChild() {
* const containingBlock = useContainingBlockAncestor();
*
* if (containingBlock) {
* console.log('Containing block:', containingBlock.bounds);
* }
*
* return ...
;
* }
* ```
*/
export declare function useContainingBlockAncestor(): LayoutAncestor | undefined;
/**
* Hook to check if element is in a flex context.
*
* @returns Whether in flex context
*
* @example
* ```tsx
* function MyComponent() {
* const isInFlex = useIsInFlex();
*
* return (
*
* Content
*
* );
* }
* ```
*/
export declare function useIsInFlex(): boolean;
/**
* Hook to check if element is in a grid context.
*
* @returns Whether in grid context
*/
export declare function useIsInGrid(): boolean;
/**
* Hook to check if element is in an inline context.
*
* @returns Whether in inline context
*/
export declare function useIsInInline(): boolean;
/**
* Hook to get available width from constraints.
*
* @returns Available width in pixels or null
*
* @example
* ```tsx
* function ResponsiveComponent() {
* const availableWidth = useAvailableWidth();
*
* if (availableWidth !== null && availableWidth < 300) {
* return ;
* }
*
* return ;
* }
* ```
*/
export declare function useAvailableWidth(): number | null;
/**
* Hook to get available height from constraints.
*
* @returns Available height in pixels or null
*/
export declare function useAvailableHeight(): number | null;
/**
* Hook to get the parent aspect ratio constraint.
*
* @returns Aspect ratio or null
*/
export declare function useParentAspectRatio(): number | null;