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;