@intentface/ui 0.0.0 → 0.7.0

package/dist/internal/render/resolveStyle.d.ts

@@ -0,0 +1,8 @@
+/**
+ * If the provided style is an object, it will be returned as is.
+ * Otherwise, the function will call the style function with the state as the first argument.
+ *
+ * @param style
+ * @param state
+ */
+export declare function resolveStyle<State>(style: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined, state: State): import("react").CSSProperties | undefined;

package/dist/internal/render/resolveStyle.js

@@ -0,0 +1,12 @@
+// Vendored from @base-ui/react v1.6.0 (MIT) — packages/react/src/utils/resolveStyle.ts
+// https://github.com/mui/base-ui — exact copy.
+/**
+ * If the provided style is an object, it will be returned as is.
+ * Otherwise, the function will call the style function with the state as the first argument.
+ *
+ * @param style
+ * @param state
+ */
+export function resolveStyle(style, state) {
+    return typeof style === 'function' ? style(state) : style;
+}

package/dist/internal/render/transition.d.ts

@@ -0,0 +1,47 @@
+import { type RefObject } from "react";
+export type TransitionStatus = "starting" | "ending" | "idle" | undefined;
+/**
+ * A status string for CSS open/close animations.
+ * @param open - whether the element is open.
+ * @param enableIdleState - enables the `'idle'` state between `'starting'` and settled.
+ * @param deferEndingState - defer the `'ending'` state by a frame (avoids a same-commit flip).
+ */
+export declare const useTransitionStatus: (open: boolean, enableIdleState?: boolean, deferEndingState?: boolean) => {
+    mounted: boolean;
+    setMounted: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    transitionStatus: TransitionStatus;
+};
+/**
+ * Returns a function that runs `fn` once all animations on the element finish (or immediately
+ * if none / unsupported). Flushes synchronously so the browser can't paint a settled frame
+ * before the component unmounts (mui/base-ui#979).
+ */
+export declare const useAnimationsFinished: (elementOrRef: RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean, treatAbortedAsFinished?: boolean, 
+/**
+ * Wait on descendants too — for when the element that animates is not the one being
+ * unmounted, such as a collapsible whose wrapper carries the transition.
+ */
+subtree?: boolean) => (fnToExecute: () => void, signal?: AbortSignal | null | undefined) => void | undefined;
+export type UseOpenChangeCompleteParameters = {
+    /** Whether the hook is enabled. @default true */
+    enabled?: boolean;
+    /** Whether the element is open. */
+    open?: boolean;
+    /** Ref to the animating element. */
+    ref: RefObject<HTMLElement | null>;
+    /** Called once the open/close animation completes (or there is no animation). */
+    onComplete: () => void;
+};
+/** Calls `onComplete` when the CSS open/close animation or transition completes. */
+export declare const useOpenChangeComplete: ({ enabled, open, ref, onComplete: onCompleteParam, }: UseOpenChangeCompleteParameters) => void;
+export type UseOpenTransitionOptions = {
+    /** Measure the element's natural height into `height` (for a height-collapse CSS var). */
+    measureHeight?: boolean;
+    /** Called when the close animation completes, alongside the internal unmount. */
+    onClosed?: () => void;
+};
+export declare const useOpenTransition: (open: boolean, ref: RefObject<HTMLElement | null>, { measureHeight, onClosed }?: UseOpenTransitionOptions) => {
+    mounted: boolean;
+    transitionStatus: TransitionStatus;
+    height: number | null;
+};

package/dist/internal/render/transition.js

@@ -0,0 +1,259 @@
+"use client";
+// Adapted from @base-ui/react master (MIT) — the open/close transition lifecycle hooks
+// (internals/useTransitionStatus, useAnimationsFinished, useOpenChangeComplete). Consolidated
+// into one self-contained module and trimmed of the @base-ui/utils runtime dep (the tiny
+// AnimationFrame / useStableCallback / resolveRef helpers are inlined), mirroring how this
+// package already vendors useRenderElement. Behavior is preserved bar two deliberate
+// departures in useAnimationsFinished: a `subtree` option (the animating element is not always
+// the one unmounting), and running the callback when there is no element instead of returning
+// silently, which otherwise strands whoever unmounts from it.
+//
+// Model: presence is the `mounted` boolean; `transitionStatus` is a CSS-animation status
+// ('starting' | 'ending' | 'idle' | undefined). Pair with data-starting-style/data-ending-style
+// (see state-mappings.ts) and drive unmount off `mounted`, cleared once animations finish.
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState, } from "react";
+import { flushSync } from "react-dom";
+import { useRefWithInit } from "./useRefWithInit.js";
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+// ---------------------------------------------------------------------------
+// Small helpers (inlined from @base-ui/utils)
+// ---------------------------------------------------------------------------
+// Stable callback: identity-stable trampoline over the latest callback. Must only be called
+// from effects/handlers, never during render.
+const useStableCallback = (callback) => {
+    const latest = useRef(callback);
+    useInsertionEffect(() => {
+        latest.current = callback;
+    });
+    return useRefWithInit(() => (...args) => latest.current?.(...args)).current;
+};
+const resolveRef = (elementOrRef) => elementOrRef && "current" in elementOrRef ? elementOrRef.current : elementOrRef;
+// requestAnimationFrame handle with auto-cancel on unmount and single-in-flight semantics.
+class AnimationFrameHandle {
+    id = null;
+    request(fn) {
+        this.cancel();
+        this.id = requestAnimationFrame(() => {
+            this.id = null;
+            fn();
+        });
+    }
+    cancel = () => {
+        if (this.id !== null) {
+            cancelAnimationFrame(this.id);
+            this.id = null;
+        }
+    };
+}
+const useAnimationFrame = () => {
+    const handle = useRefWithInit(() => new AnimationFrameHandle()).current;
+    useEffect(() => handle.cancel, [handle]);
+    return handle;
+};
+/**
+ * A status string for CSS open/close animations.
+ * @param open - whether the element is open.
+ * @param enableIdleState - enables the `'idle'` state between `'starting'` and settled.
+ * @param deferEndingState - defer the `'ending'` state by a frame (avoids a same-commit flip).
+ */
+export const useTransitionStatus = (open, enableIdleState = false, deferEndingState = false) => {
+    const [transitionStatus, setTransitionStatus] = useState(open && enableIdleState ? "idle" : undefined);
+    const [mounted, setMounted] = useState(open);
+    if (open && !mounted) {
+        setMounted(true);
+        setTransitionStatus("starting");
+    }
+    if (!open && mounted && transitionStatus !== "ending" && !deferEndingState) {
+        setTransitionStatus("ending");
+    }
+    if (!open && !mounted && transitionStatus === "ending") {
+        setTransitionStatus(undefined);
+    }
+    useIsoLayoutEffect(() => {
+        if (!open && mounted && transitionStatus !== "ending" && deferEndingState) {
+            const frame = requestAnimationFrame(() => setTransitionStatus("ending"));
+            return () => cancelAnimationFrame(frame);
+        }
+        return undefined;
+    }, [open, mounted, transitionStatus, deferEndingState]);
+    useIsoLayoutEffect(() => {
+        if (!open || enableIdleState)
+            return undefined;
+        // Avoid flushSync here (Firefox). See mui/base-ui#3424.
+        const frame = requestAnimationFrame(() => setTransitionStatus(undefined));
+        return () => cancelAnimationFrame(frame);
+    }, [enableIdleState, open]);
+    useIsoLayoutEffect(() => {
+        if (!open || !enableIdleState)
+            return undefined;
+        if (open && mounted && transitionStatus !== "idle") {
+            setTransitionStatus("starting");
+        }
+        const frame = requestAnimationFrame(() => setTransitionStatus("idle"));
+        return () => cancelAnimationFrame(frame);
+    }, [enableIdleState, open, mounted, transitionStatus]);
+    return { mounted, setMounted, transitionStatus };
+};
+// ---------------------------------------------------------------------------
+// useAnimationsFinished
+// ---------------------------------------------------------------------------
+/**
+ * Returns a function that runs `fn` once all animations on the element finish (or immediately
+ * if none / unsupported). Flushes synchronously so the browser can't paint a settled frame
+ * before the component unmounts (mui/base-ui#979).
+ */
+export const useAnimationsFinished = (elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true, 
+/**
+ * Wait on descendants too — for when the element that animates is not the one being
+ * unmounted, such as a collapsible whose wrapper carries the transition.
+ */
+subtree = false) => {
+    const frame = useAnimationFrame();
+    return useStableCallback((fnToExecute, signal = null) => {
+        frame.cancel();
+        const element = resolveRef(elementOrRef);
+        // No element means there is nothing to wait for. Run the callback rather than returning,
+        // or a caller that unmounts from it (setMounted(false)) is stranded and the surface stays
+        // mounted for good.
+        if (element == null) {
+            fnToExecute();
+            return;
+        }
+        const resolvedElement = element;
+        const done = () => flushSync(fnToExecute);
+        if (typeof resolvedElement.getAnimations !== "function") {
+            fnToExecute();
+            return;
+        }
+        const exec = () => {
+            Promise.all(resolvedElement.getAnimations({ subtree }).map((animation) => animation.finished))
+                .then(() => {
+                if (!signal?.aborted)
+                    done();
+            })
+                .catch(() => {
+                if (treatAbortedAsFinished) {
+                    if (!signal?.aborted)
+                        done();
+                    return;
+                }
+                const current = resolvedElement.getAnimations({ subtree });
+                if (!signal?.aborted &&
+                    current.length > 0 &&
+                    current.some((animation) => animation.pending || animation.playState !== "finished")) {
+                    // A dependency changed mid-animation and aborted it; re-check for new animations.
+                    exec();
+                }
+            });
+        };
+        if (waitForStartingStyleRemoved) {
+            const startingStyleAttribute = "data-starting-style";
+            // Not present yet → wait a frame so "open" animations can register.
+            if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+                frame.request(exec);
+                return;
+            }
+            // Wait for [data-starting-style] to be removed, then check.
+            const observer = new MutationObserver(() => {
+                if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+                    observer.disconnect();
+                    exec();
+                }
+            });
+            observer.observe(resolvedElement, {
+                attributes: true,
+                attributeFilter: [startingStyleAttribute],
+            });
+            signal?.addEventListener("abort", () => observer.disconnect(), { once: true });
+            return;
+        }
+        frame.request(exec);
+    });
+};
+/** Calls `onComplete` when the CSS open/close animation or transition completes. */
+export const useOpenChangeComplete = ({ enabled = true, open, ref, onComplete: onCompleteParam, }) => {
+    const onComplete = useStableCallback(onCompleteParam);
+    const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `open` isn't read in the body but re-arms the finalize when it flips — runOnceAnimationsFinish is identity-stable, so without it the effect wouldn't re-run on open/close (matches Base UI).
+    useEffect(() => {
+        if (!enabled)
+            return undefined;
+        const abortController = new AbortController();
+        runOnceAnimationsFinish(onComplete, abortController.signal);
+        return () => abortController.abort();
+    }, [enabled, open, onComplete, runOnceAnimationsFinish]);
+};
+/**
+ * Drives a Base UI-style open/close for an element: keeps it `mounted` through the exit,
+ * reports `transitionStatus` (feed it to a stateAttributesMapping for data-open/closed/
+ * starting-style/ending-style), optionally measures its natural `height`, and unmounts once
+ * `element.getAnimations()` resolve. Composes useTransitionStatus + useOpenChangeComplete.
+ */
+// Inline alignment can distort a scroll-based measurement, so it is neutralized for the read
+// and restored immediately after (Base UI does the same before measuring a collapsible).
+const ALIGNMENT_PROPERTIES = ["justify-content", "align-items", "align-content", "justify-items"];
+const measureNaturalHeight = (element) => {
+    const saved = ALIGNMENT_PROPERTIES.map((property) => [
+        property,
+        element.style.getPropertyValue(property),
+        element.style.getPropertyPriority(property),
+    ]);
+    for (const [property] of saved) {
+        element.style.setProperty(property, "initial", "important");
+    }
+    const naturalHeight = element.scrollHeight;
+    for (const [property, value, priority] of saved) {
+        if (value)
+            element.style.setProperty(property, value, priority);
+        else
+            element.style.removeProperty(property);
+    }
+    return naturalHeight;
+};
+export const useOpenTransition = (open, ref, { measureHeight = false, onClosed } = {}) => {
+    // Both flags on: `idle` is the settled-open status the height release gates on, and
+    // deferring `ending` by a frame leaves one frame where a closing panel is still at its
+    // open size — which is where the close has to be measured.
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open, true, true);
+    const [height, setHeight] = useState(null);
+    useIsoLayoutEffect(() => {
+        if (!measureHeight)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        // Closing: measure on the deferred frame. By the `ending` frame the consumer's closed
+        // styles have landed, so we would measure the clamped box instead of the natural one.
+        if (!open && mounted && (transitionStatus === "idle" || transitionStatus === "starting")) {
+            setHeight(measureNaturalHeight(element));
+            return;
+        }
+        // Opening: measure on the first frame, before the transition runs.
+        if (open && transitionStatus === "starting") {
+            setHeight(measureNaturalHeight(element));
+        }
+    }, [measureHeight, open, mounted, transitionStatus, ref]);
+    // Release the measurement once the open transition settles, so the panel tracks content
+    // that grows while it is open. With `height` null the custom property is never written, so
+    // a consumer's `height: var(--…)` is invalid at computed-value time and falls back to
+    // `auto`. The close re-measures a pixel value first, so it still animates from a number.
+    useOpenChangeComplete({
+        open: true,
+        ref,
+        enabled: measureHeight && open && mounted && transitionStatus === "idle",
+        onComplete: () => setHeight(null),
+    });
+    useOpenChangeComplete({
+        open,
+        ref,
+        // Gated on `ending`, not merely `!open`: with the ending state deferred by a frame, an
+        // earlier check would call getAnimations() before the closed styles applied, find
+        // nothing running, and cut the exit off.
+        enabled: !open && mounted && transitionStatus === "ending",
+        onComplete: () => {
+            setMounted(false);
+            onClosed?.();
+        },
+    });
+    return { mounted, transitionStatus, height };
+};

package/dist/internal/render/types.d.ts

@@ -0,0 +1,74 @@
+import type * as React from 'react';
+import type { PreventableEvent, ComponentRenderFn, HTMLProps } from './baseTypes.js';
+export type { HTMLProps, PreventableEvent, ComponentRenderFn };
+export type MaybePreventableEvent<E extends React.SyntheticEvent<Element, Event>> = E & Partial<Pick<PreventableEvent<E>, 'preventPrimitiveHandler' | 'primitiveHandlerPrevented'>>;
+export interface FloatingUIOpenChangeDetails {
+    open: boolean;
+    reason: string;
+    nativeEvent: Event;
+    nested: boolean;
+    triggerElement?: Element | undefined;
+}
+type WithPreventableHandler<T> = T extends (event: infer E) => any ? E extends React.SyntheticEvent<Element, Event> ? (event: PreventableEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
+/**
+ * Adds a `preventPrimitiveHandler` method to all event handlers.
+ */
+export type WithPreventableEvents<T> = {
+    [K in keyof T]: WithPreventableHandler<T[K]>;
+};
+/**
+ * Props shared by all primitive parts.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+export type RenderComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithPreventableEvents<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
+    /**
+     * CSS class applied to the element, or a function that
+     * returns a class based on the component's state.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+    /**
+     * Style applied to the element, or a function that
+     * returns a style object based on the component's state.
+     */
+    style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
+};
+export interface NativeButtonProps {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `false` if the rendered element is not a button (for example, `<div>`).
+     * @default true
+     */
+    nativeButton?: boolean | undefined;
+}
+export interface NonNativeButtonProps {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `true` if the rendered element is a native button.
+     * @default false
+     */
+    nativeButton?: boolean | undefined;
+}
+/**
+ * Simplifies the display of a type (without modifying it).
+ * Taken from https://effectivetypescript.com/2022/02/25/gentips-4-display/
+ */
+export type Simplify<T> = T extends Function ? T : {
+    [K in keyof T]: T[K];
+};
+/**
+ * Makes specified keys in a type required.
+ *
+ * @template T - The original type.
+ * @template K - The keys to make required.
+ */
+export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+export type Orientation = 'horizontal' | 'vertical';

package/dist/internal/render/types.js

@@ -0,0 +1,3 @@
+// Vendored from @base-ui/react v1.6.0 (MIT) — packages/react/src/internals/types.ts
+// https://github.com/mui/base-ui — import specifiers rewired and names made neutral; otherwise an exact copy.
+export {};

package/dist/internal/render/useMergedRefs.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+type Empty = null | undefined;
+type InputRef<I> = React.Ref<I> | Empty;
+type Result<I> = React.RefCallback<I> | null;
+/**
+ * Merges refs into a single memoized callback ref or `null`.
+ * This makes sure multiple refs are updated together and have the same value.
+ *
+ * This function accepts up to four refs. If you need to merge more, or have an unspecified number of refs to merge,
+ * use `useMergedRefsN` instead.
+ */
+export declare function useMergedRefs<I>(a: InputRef<I>, b: InputRef<I>): Result<I>;
+export declare function useMergedRefs<I>(a: InputRef<I>, b: InputRef<I>, c: InputRef<I>): Result<I>;
+export declare function useMergedRefs<I>(a: InputRef<I>, b: InputRef<I>, c: InputRef<I>, d: InputRef<I>): Result<I>;
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ *
+ * If you need to merge a fixed number (up to four) of refs, use `useMergedRefs` instead for better performance.
+ */
+export declare function useMergedRefsN<I>(refs: InputRef<I>[]): Result<I>;
+export {};

package/dist/internal/render/useMergedRefs.js

@@ -0,0 +1,102 @@
+// Vendored from @base-ui/utils v1.6.0 (MIT) — packages/utils/src/useMergedRefs.ts
+// https://github.com/mui/base-ui — exact copy.
+import * as React from 'react';
+import { useRefWithInit } from './useRefWithInit.js';
+export function useMergedRefs(a, b, c, d) {
+    const forkRef = useRefWithInit((createForkRef)).current;
+    if (didChange(forkRef, a, b, c, d)) {
+        update(forkRef, [a, b, c, d]);
+    }
+    return forkRef.callback;
+}
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ *
+ * If you need to merge a fixed number (up to four) of refs, use `useMergedRefs` instead for better performance.
+ */
+export function useMergedRefsN(refs) {
+    const forkRef = useRefWithInit((createForkRef)).current;
+    if (didChangeN(forkRef, refs)) {
+        update(forkRef, refs);
+    }
+    return forkRef.callback;
+}
+function createForkRef() {
+    return {
+        callback: null,
+        cleanup: null,
+        refs: [],
+    };
+}
+function didChange(forkRef, a, b, c, d) {
+    // prettier-ignore
+    return (forkRef.refs[0] !== a ||
+        forkRef.refs[1] !== b ||
+        forkRef.refs[2] !== c ||
+        forkRef.refs[3] !== d);
+}
+function didChangeN(forkRef, newRefs) {
+    return (forkRef.refs.length !== newRefs.length ||
+        forkRef.refs.some((ref, index) => ref !== newRefs[index]));
+}
+function update(forkRef, refs) {
+    forkRef.refs = refs;
+    if (refs.every((ref) => ref == null)) {
+        forkRef.callback = null;
+        return;
+    }
+    forkRef.callback = (instance) => {
+        if (forkRef.cleanup) {
+            forkRef.cleanup();
+            forkRef.cleanup = null;
+        }
+        if (instance != null) {
+            const cleanupCallbacks = Array(refs.length).fill(null);
+            for (let i = 0; i < refs.length; i += 1) {
+                const ref = refs[i];
+                if (ref == null) {
+                    continue;
+                }
+                switch (typeof ref) {
+                    case 'function': {
+                        const refCleanup = ref(instance);
+                        if (typeof refCleanup === 'function') {
+                            cleanupCallbacks[i] = refCleanup;
+                        }
+                        break;
+                    }
+                    case 'object': {
+                        ref.current = instance;
+                        break;
+                    }
+                    default:
+                }
+            }
+            forkRef.cleanup = () => {
+                for (let i = 0; i < refs.length; i += 1) {
+                    const ref = refs[i];
+                    if (ref == null) {
+                        continue;
+                    }
+                    switch (typeof ref) {
+                        case 'function': {
+                            const cleanupCallback = cleanupCallbacks[i];
+                            if (typeof cleanupCallback === 'function') {
+                                cleanupCallback();
+                            }
+                            else {
+                                ref(null);
+                            }
+                            break;
+                        }
+                        case 'object': {
+                            ref.current = null;
+                            break;
+                        }
+                        default:
+                    }
+                }
+            };
+        }
+    };
+}

package/dist/internal/render/useRefWithInit.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * A React.useRef() that is initialized with a function. Note that it accepts an optional
+ * initialization argument, so the initialization function doesn't need to be an inline closure.
+ *
+ * @usage
+ *   const ref = useRefWithInit(sortColumns, columns)
+ */
+export declare function useRefWithInit<T>(init: () => T): React.RefObject<T>;
+export declare function useRefWithInit<T, U>(init: (arg: U) => T, initArg: U): React.RefObject<T>;

package/dist/internal/render/useRefWithInit.js

@@ -0,0 +1,12 @@
+// Vendored from @base-ui/utils v1.6.0 (MIT) — packages/utils/src/useRefWithInit.ts
+// https://github.com/mui/base-ui — exact copy.
+'use client';
+import * as React from 'react';
+const UNINITIALIZED = {};
+export function useRefWithInit(init, initArg) {
+    const ref = React.useRef(UNINITIALIZED);
+    if (ref.current === UNINITIALIZED) {
+        ref.current = init(initArg);
+    }
+    return ref;
+}

package/dist/internal/render/useRender.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { ComponentRenderFn } from './types.js';
+import type { HTMLProps } from './types.js';
+import type { StateAttributesMapping } from './getStateAttributesProps.js';
+/**
+ * Renders a primitive part's element.
+ *
+ * @public
+ */
+export declare function useRender<State extends Record<string, unknown>, RenderedElementType extends Element, Enabled extends boolean | undefined = undefined>(params: useRender.Parameters<State, RenderedElementType, Enabled>): useRender.ReturnValue<Enabled>;
+export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactElement | ComponentRenderFn<React.HTMLAttributes<any>, State>;
+export type UseRenderElementProps<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>;
+export type UseRenderComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = React.ComponentPropsWithRef<ElementType> & {
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+};
+export interface UseRenderParameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> {
+    /**
+     * The React element or a function that returns one to override the default element.
+     */
+    render?: UseRenderRenderProp<State> | undefined;
+    /**
+     * The ref to apply to the rendered element.
+     */
+    ref?: React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[] | undefined;
+    /**
+     * The state of the component, passed as the second argument to the `render` callback.
+     * State properties are automatically converted to data-* attributes.
+     */
+    state?: State | undefined;
+    /**
+     * Custom mapping for converting state properties to data-* attributes.
+     * @example
+     * { isActive: (value) => (value ? { 'data-is-active': '' } : null) }
+     */
+    stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+    /**
+     * Props to be spread on the rendered element.
+     * They are merged with the internal props of the component, so that event handlers
+     * are merged, `className` strings and `style` properties are joined, while other external props overwrite the
+     * internal ones.
+     */
+    props?: Record<string, unknown> | undefined;
+    /**
+     * If `false`, the hook will skip most of its internal logic and return `null`.
+     * This is useful for rendering a component conditionally.
+     * @default true
+     */
+    enabled?: Enabled | undefined;
+    /**
+     * The default tag name to use for the rendered element when `render` is not provided.
+     * @default 'div'
+     */
+    defaultTagName?: keyof React.JSX.IntrinsicElements | undefined;
+}
+export type UseRenderReturnValue<Enabled extends boolean | undefined> = Enabled extends false ? null : React.ReactElement;
+export interface UseRenderState {
+}
+export declare namespace useRender {
+    type State = UseRenderState;
+    type RenderProp<TState = Record<string, unknown>> = UseRenderRenderProp<TState>;
+    type ElementProps<ElementType extends React.ElementType> = UseRenderElementProps<ElementType>;
+    type ComponentProps<ElementType extends React.ElementType, TState = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, TState, RenderFunctionProps>;
+    type Parameters<TState, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<TState, RenderedElementType, Enabled>;
+    type ReturnValue<Enabled extends boolean | undefined> = UseRenderReturnValue<Enabled>;
+}

package/dist/internal/render/useRender.js

@@ -0,0 +1,12 @@
+// Vendored from @base-ui/react v1.6.0 (MIT) — packages/react/src/use-render/useRender.ts
+// https://github.com/mui/base-ui — import specifiers rewired and comments made neutral; otherwise an exact copy.
+import * as React from 'react';
+import { useRenderElement } from './useRenderElement.js';
+/**
+ * Renders a primitive part's element.
+ *
+ * @public
+ */
+export function useRender(params) {
+    return useRenderElement(params.defaultTagName ?? 'div', params, params);
+}