import { type Ref } from 'vue';
/**
 * Vue has no built-in equivalent of React's `forwardRef`: a `ref` attached to
 * a component (e.g. `<Button ref="x" />`) always resolves to the component's
 * public instance proxy, never to the DOM node it renders.
 *
 * This helper reads the `ref` the *parent* attached to the current component
 * instance and keeps it in sync with `elementRef` -- the component's own ref
 * to its rendered root element -- so the parent's ref ends up pointing at the
 * real DOM node instead, matching React Mantine's `factory()` behavior.
 *
 * It relies on a documented-but-internal detail of Vue 3: whenever a `ref`
 * prop is a string, a `Ref`, or a function, Vue normalizes `vnode.ref` into
 * an `{ i, r, k, f }` descriptor before the component ever sees it, where `r`
 * is the original value the parent passed (see `normalizeRef` in
 * `@vue/runtime-core`'s `vnode.ts`). This shape has been stable across Vue
 * 3.x, but it isn't public API, so treat this as a best-effort forwarder --
 * if a future Vue version changes it, this degrades to a no-op (the ref
 * simply won't forward), not a crash.
 *
 * Usage inside a component's `setup()`, once `elementRef` is bound to the
 * component's real root element:
 *
 * ```ts
 * setup(props, { attrs }) {
 *   const elementRef = ref<HTMLDivElement | null>(null)
 *   useForwardedRef(elementRef)
 *   return () => h('div', { ...attrs, ref: elementRef })
 * }
 * ```
 *
 * For multi-layer components (e.g. `Button` renders `UnstyledButton`, which
 * renders `Box`, which renders the native element), every layer needs to
 * call `useForwardedRef` and attach its own `elementRef` to whatever it
 * renders -- each layer intercepts the ref passed by its parent and
 * re-targets it one level down, the same way React's `forwardRef` calls are
 * threaded explicitly through each wrapper.
 */
export declare function useForwardedRef<T extends Element>(elementRef: Ref<T | null>): void;
