@intentface/chat 0.1.0

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

@@ -0,0 +1,48 @@
+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) => (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;
+};
+/**
+ * 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.
+ */
+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,203 @@
+"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.
+//
+// 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) => {
+    const frame = useAnimationFrame();
+    return useStableCallback((fnToExecute, signal = null) => {
+        frame.cancel();
+        const element = resolveRef(elementOrRef);
+        if (element == null)
+            return;
+        const resolvedElement = element;
+        const done = () => flushSync(fnToExecute);
+        if (typeof resolvedElement.getAnimations !== "function") {
+            fnToExecute();
+            return;
+        }
+        const exec = () => {
+            Promise.all(resolvedElement.getAnimations().map((animation) => animation.finished))
+                .then(() => {
+                if (!signal?.aborted)
+                    done();
+            })
+                .catch(() => {
+                if (treatAbortedAsFinished) {
+                    if (!signal?.aborted)
+                        done();
+                    return;
+                }
+                const current = resolvedElement.getAnimations();
+                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.
+ */
+export const useOpenTransition = (open, ref, { measureHeight = false, onClosed } = {}) => {
+    const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+    const [height, setHeight] = useState(null);
+    // Measure on the transitional frames (before the CSS transition runs). scrollHeight is the
+    // natural content height regardless of any clamp the data-starting/ending-style sets.
+    useIsoLayoutEffect(() => {
+        if (!measureHeight)
+            return;
+        if (transitionStatus === "starting" || transitionStatus === "ending") {
+            const element = ref.current;
+            if (element)
+                setHeight(element.scrollHeight);
+        }
+    }, [measureHeight, transitionStatus, ref]);
+    useOpenChangeComplete({
+        open,
+        ref,
+        enabled: !open && mounted,
+        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 { BaseUIEvent, ComponentRenderFn, HTMLProps } from './baseTypes';
+export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
+export type MaybeBaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & Partial<Pick<BaseUIEvent<E>, 'preventBaseUIHandler' | 'baseUIHandlerPrevented'>>;
+export interface FloatingUIOpenChangeDetails {
+    open: boolean;
+    reason: string;
+    nativeEvent: Event;
+    nested: boolean;
+    triggerElement?: Element | undefined;
+}
+type WithPreventBaseUIHandler<T> = T extends (event: infer E) => any ? E extends React.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+export type WithBaseUIEvent<T> = {
+    [K in keyof T]: WithPreventBaseUIHandler<T[K]>;
+};
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<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 — exact copy; only import specifiers rewired.
+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';
+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';
+import type { HTMLProps } from './types';
+import type { StateAttributesMapping } from './getStateAttributesProps';
+/**
+ * Renders a Base UI 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 — exact copy; only import specifiers rewired.
+import * as React from 'react';
+import { useRenderElement } from './useRenderElement';
+/**
+ * Renders a Base UI element.
+ *
+ * @public
+ */
+export function useRender(params) {
+    return useRenderElement(params.defaultTagName ?? 'div', params, params);
+}

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { ComponentRenderFn, HTMLProps } from './types';
+import type { WithDataAttributes } from './baseTypes';
+import { type StateAttributesMapping } from './getStateAttributesProps';
+type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
+/**
+ * Renders a Base UI element.
+ *
+ * @param element The default HTML element to render. Can be overridden by the `render` prop.
+ * @param componentProps An object containing the `render` and `className` props to be used for element customization. Other props are ignored.
+ * @param params Additional parameters for rendering the element.
+ */
+export declare function useRenderElement<State extends Record<string, any>, RenderedElementType extends Element, TagName extends IntrinsicTagName | undefined, Enabled extends boolean | undefined = undefined>(element: TagName, componentProps: UseRenderElementComponentProps<State>, params?: UseRenderElementParameters<State, RenderedElementType, TagName, Enabled>): Enabled extends false ? null : React.ReactElement;
+type RenderFunctionProps<TagName> = TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<any>;
+export type UseRenderElementParameters<State, RenderedElementType extends Element, TagName, Enabled extends boolean | 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;
+    /**
+     * @deprecated
+     */
+    propGetter?: ((externalProps: HTMLProps) => HTMLProps) | undefined;
+    /**
+     * The ref to apply to the rendered element.
+     */
+    ref?: React.Ref<RenderedElementType> | (React.Ref<RenderedElementType> | undefined)[] | undefined;
+    /**
+     * The state of the component.
+     */
+    state?: State | undefined;
+    /**
+     * Intrinsic props to be spread on the rendered element. Accepts bespoke
+     * data-* part attributes in plain object literals (WithDataAttributes).
+     */
+    props?: WithDataAttributes<RenderFunctionProps<TagName>> | Array<WithDataAttributes<RenderFunctionProps<TagName>> | undefined | ((props: RenderFunctionProps<TagName>) => RenderFunctionProps<TagName>)> | undefined;
+    /**
+     * A mapping of state to `data-*` attributes.
+     */
+    stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+};
+export interface UseRenderElementComponentProps<State> {
+    /**
+     * The class name to apply to the rendered element.
+     * Can be a string or a function that accepts the state and returns a string.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * The render prop or React element to override the default element.
+     */
+    render?: undefined | React.ReactElement | ComponentRenderFn<React.HTMLAttributes<any>, State>;
+    /**
+     * The style to apply to the rendered element.
+     * Can be a style object or a function that accepts the state and returns a style object.
+     */
+    style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
+}
+export interface UseRenderElementState {
+}
+export {};