@stacksjs/stx/dist/composables/use-resize-observer.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Observe element size changes
 */
export declare function useResizeObserver(target: Element | (() => Element | null) | null, callback?: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions): ResizeObserverRef;
/**
 * Observe multiple elements
 */
export declare function useResizeObserverMultiple(targets: Element[] | (() => Element[]), callback?: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions): ResizeObserverRef & { states: () => Map<Element, ResizeObserverState> };
/**
 * Get element dimensions reactively
 */
export declare function useElementSize(target: Element | (() => Element | null) | null): {
  get: () => { width: number; height: number }
  subscribe: (fn: (size: { width: number; height: number }) => void) => () => void
  isSupported: () => boolean
};
/**
 * Check if ResizeObserver is supported (standalone function)
 */
export declare function hasResizeObserver(): boolean;
/**
 * useResizeObserver - Resize Observer API wrapper
 *
 * Monitor element size changes reactively.
 *
 * @example
 * ```ts
 * const observer = useResizeObserver(element)
 * observer.subscribe(entries => {
 *   console.log('Size changed:', entries[0].contentRect)
 * })
 *
 * // With callback
 * useResizeObserver(element, (entries) => {
 *   console.log('Width:', entries[0].contentRect.width)
 * })
 * ```
 */
export declare interface ResizeObserverSize {
  width: number
  height: number
  inlineSize: number
  blockSize: number
}
export declare interface ResizeObserverState {
  contentRect: DOMRectReadOnly | null
  contentBoxSize: ResizeObserverSize | null
  borderBoxSize: ResizeObserverSize | null
  devicePixelContentBoxSize: ResizeObserverSize | null
}
export declare interface ResizeObserverOptions {
  box?: 'content-box' | 'border-box' | 'device-pixel-content-box'
}
export declare interface ResizeObserverRef {
  get: () => ResizeObserverState
  subscribe: (fn: (entries: ResizeObserverEntry[]) => void) => () => void
  observe: () => void
  disconnect: () => void
  isSupported: () => boolean
}