@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/toolbar/index.jsx

@@ -0,0 +1,67 @@
+// Ported from react-aria-components `Toolbar` (packages/react-aria-components/src/Toolbar.tsx), Apache-2.0, © Adobe.
+// A toolbar is a container for a set of interactive controls with arrow key navigation (also across `Group`s and
+// separators); Tab leaves the toolbar.
+// Rivet:
+// - keyboard handling = `./behaviour.ts` (RA useToolbar port; bubbling listeners, see its header); `data-rk`
+//   holds the arrow keys while the handler chunk loads.
+// - a Toolbar inside another Toolbar renders `role="group"` from the server on (RA decides in a layout effect).
+// - render props are accessors (`class={({ orientation }) => …}`); `class` = RAC `className` (default `rv-Toolbar`).
+// `render` (RAC DOMRenderProps): given, the attributes object (handlers included) goes to `render(attrs, ToolbarRenderProps)` instead of the default `<div>`.
+import { createContext, provide, useContext } from "@rivetjs/reactivity";
+import { Provider } from "@rivetjs/runtime/dom";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { contextProps, resumableContext } from "../slots/index.jsx";
+import { useLocale } from "../i18n/index.js";
+import { toolbarBlur, toolbarFocus, toolbarKeyDown, toolbarKeys, toolbarProps } from "./behaviour.js";
+import { renderPropsOf } from "../slots/index.jsx";
+/** RAC `ToolbarContext`. */
+export const ToolbarContext = resumableContext(createContext({}, { id: "rv-toolbar" }));
+/** Rivet: set inside a toolbar, so a nested one renders `role="group"` (RA `isInToolbar`). */
+const InToolbarContext = resumableContext(createContext(false, { id: "rv-in-toolbar" }));
+/** A toolbar is a container for a set of interactive controls with arrow key navigation (RAC `Toolbar`). */
+export function Toolbar(inProps) {
+    const [props, ref] = contextProps(inProps, inProps.ref, ToolbarContext);
+    const orientation = props.orientation || "horizontal";
+    const isInToolbar = useContext(InToolbarContext);
+    const aria = toolbarProps(props, isInToolbar);
+    // Options hoisted: no function in the `rp` initializer (spread sites capture `rp.class` /
+    // `rp.style`, not the children accessor: per-key live views).
+    const rpOptions = {
+        values: { orientation: () => orientation },
+        defaultClassName: "rv-Toolbar",
+    };
+    const rp = renderPropsOf(props, rpOptions);
+    const keyProps = { orientation, direction: useLocale().direction };
+    // Read every prop up front: an element with a spread resumes as one binding over all its attributes.
+    const dom = globalDOMProps(props, ["style"]);
+    const slot = props.slot || undefined;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            id: aria.id,
+            role: aria.role,
+            "aria-orientation": orientation,
+            "aria-label": aria["aria-label"],
+            "aria-labelledby": aria["aria-labelledby"],
+            "aria-describedby": aria["aria-describedby"],
+            "aria-details": aria["aria-details"],
+            slot: slot,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-orientation": orientation,
+            "data-rk": isInToolbar ? undefined : toolbarKeys(orientation),
+            onKeyDown: (event) => toolbarKeyDown(event, keyProps),
+            onFocusIn: (event) => toolbarFocus(event),
+            onFocusOut: (event) => toolbarBlur(event),
+            children: () => (<Provider token={InToolbarContext} value={true}>
+          {rp.children()}
+        </Provider>),
+        };
+        return props.render(attrs, { orientation: () => orientation });
+    }
+    return (<div {...dom} ref={ref} id={aria.id} role={aria.role} aria-orientation={orientation} aria-label={aria["aria-label"]} aria-labelledby={aria["aria-labelledby"]} aria-describedby={aria["aria-describedby"]} aria-details={aria["aria-details"]} slot={slot} class={rp.class()} style={rp.style()} data-orientation={orientation} data-rk={isInToolbar ? undefined : toolbarKeys(orientation)} onKeyDown={(event) => toolbarKeyDown(event, keyProps)} onFocusIn={(event) => toolbarFocus(event)} onFocusOut={(event) => toolbarBlur(event)}>
+      {provide(InToolbarContext, true, () => rp.children())}
+    </div>);
+}

package/tooltip/behaviour.d.ts

@@ -0,0 +1,93 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type ElementSource, type Placement, type PlacementAxis } from "../overlay/position.js";
+import { type TooltipTriggerState } from "../state/tooltip.js";
+export type { Placement, PlacementAxis };
+/** Trigger options (react-aria `TooltipTriggerProps` beyond the state's). */
+export interface TooltipTriggerOptions {
+    /** Whether the tooltip should be disabled, independent from the trigger. A boolean, or an accessor read at event time (Rivet). */
+    isDisabled?: boolean | (() => boolean | undefined);
+    /** By default, opens for both focus and hover. Can be made to open only for focus (or an accessor read at event time). @default 'hover' */
+    trigger?: "hover" | "focus" | (() => "hover" | "focus" | undefined);
+    /** Whether the tooltip should close when the trigger is pressed (or an accessor read at event time). @default true */
+    shouldCloseOnPress?: boolean | (() => boolean | undefined);
+}
+/** Positioning options (RAC `Tooltip` PositionProps + `arrowBoundaryOffset`). */
+export interface TooltipPositionOptions {
+    /** The placement of the tooltip with respect to the trigger. @default 'top' */
+    placement?: Placement;
+    /** The additional offset applied along the main axis between the element and its anchor element. @default 0 */
+    offset?: number;
+    /** The additional offset applied along the cross axis between the element and its anchor element. @default 0 */
+    crossOffset?: number;
+    /** The placement padding that should be applied between the element and its surrounding container. @default 12 */
+    containerPadding?: number;
+    /** Whether the element should flip its orientation when there is insufficient room for it to render completely. @default true */
+    shouldFlip?: boolean;
+    /** The minimum distance the arrow's edge should be from the edge of the overlay element. @default 0 */
+    arrowBoundaryOffset?: number;
+}
+/** useTooltipTrigger `onHoverStart`. */
+export declare function tooltipTriggerHoverStart(options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** useTooltipTrigger `onHoverEnd`. */
+export declare function tooltipTriggerHoverEnd(options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** useTooltipTrigger `onPressStart` (pointerdown / keydown on the trigger). */
+export declare function tooltipTriggerPressStart(options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** The trigger's `onPointerEnter` (useHover start). */
+export declare function tooltipTriggerPointerEnter(e: PointerEvent, options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** The trigger's `onPointerLeave` (useHover end). */
+export declare function tooltipTriggerPointerLeave(e: PointerEvent, options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** The trigger's `onFocus` (useFocusable). */
+export declare function tooltipTriggerFocus(e: FocusEvent, options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** The trigger's `onBlur` (useFocusable). */
+export declare function tooltipTriggerBlur(e: FocusEvent, options: TooltipTriggerOptions, state: TooltipTriggerState): void;
+/** pointerenter on the tooltip: hovering it keeps it open. */
+export declare function tooltipPointerEnter(e: PointerEvent, props: TooltipOptions, state: TooltipTriggerState | undefined): void;
+/** pointerleave on the tooltip. */
+export declare function tooltipPointerLeave(e: PointerEvent, props: TooltipOptions, state: TooltipTriggerState | undefined): void;
+/** useTooltip props (react-aria `AriaTooltipProps`). */
+export interface TooltipOptions {
+    /** Whether the tooltip opens on focus only (hovering the tooltip then does not keep it open; or an accessor read at event time). */
+    trigger?: "hover" | "focus" | (() => "hover" | "focus" | undefined);
+    id?: string;
+    isOpen?: boolean;
+}
+export interface TooltipAria {
+    /** Props for the tooltip element. */
+    tooltipProps: Record<string, unknown>;
+}
+/** Provides the accessibility implementation for a Tooltip component (react-aria `useTooltip`). */
+export declare function tooltipProps(props: TooltipOptions, state?: TooltipTriggerState): TooltipAria;
+export interface TooltipTriggerAria {
+    /** Props for the trigger element (TooltipTrigger passes them to its child through FocusableProvider). */
+    triggerProps: Record<string, unknown>;
+    /** Props for the overlay container element. */
+    tooltipProps: {
+        id: string;
+    };
+}
+/**
+ * Handles the behavior and accessibility for an element that has an overlay tooltip that opens on
+ * hover or focus (react-aria `useTooltipTrigger`). Rivet: press start (close on press) is a document
+ * capture listener while the trigger is hovered or focused (a pressable child stops pointerdown);
+ * `aria-describedby` is set on the trigger while open (`attachTooltip`).
+ */
+export declare function tooltipTriggerProps(props: TooltipTriggerOptions & {
+    tooltipId: string;
+}, state: TooltipTriggerState): TooltipTriggerAria;
+export interface AttachTooltipOptions extends TooltipPositionOptions {
+    /** The trigger element (or an accessor of it). */
+    triggerRef: ElementSource;
+    /** The OverlayArrow element (RAC `arrowRef`). */
+    arrowRef?: ElementSource<HTMLElement>;
+    /** Receives the placement after flipping (render props, `data-placement`). */
+    placement$?: Signal<PlacementAxis | null>;
+    /** Receives RA's `arrowProps.style` offset; given: the arrow element's position is left to `<OverlayArrow>`. */
+    arrowOffset$?: Signal<{
+        left?: number;
+        top?: number;
+    } | null>;
+    /** z-index written by the positioning; `null`: none (the tooltip's own `style` sets it). */
+    zIndex?: number | null;
+}
+/** Client effect body: while `state` is open — position, Escape, `aria-describedby`. Returns the release. */
+export declare function attachTooltip(element: HTMLElement | undefined, state: TooltipTriggerState, options: AttachTooltipOptions): (() => void) | undefined;

package/tooltip/behaviour.jsx

@@ -0,0 +1,299 @@
+// Ported from @react-aria/tooltip (useTooltipTrigger.ts, useTooltip.ts) and React Aria Components
+// (Tooltip.tsx: TooltipInner's useOverlayPosition), Apache-2.0, © Adobe.
+//
+// Rivet: the hooks are resumable event handlers over serializable state; names follow the cdk
+// convention (`useTooltipTrigger` → `tooltipTriggerProps(props, state)`, `useTooltip` →
+// `tooltipProps(props, state)`, handlers `tooltipTrigger<Event>(event, props, state)` /
+// `tooltip<Event>(event, props, state)`). `.tsx`: the bags' closures may be captured by resumed bindings.
+// - Trigger (`useTooltipTrigger`): handlers of the trigger element (TooltipTrigger passes them through
+//   FocusableProvider): hover via pointerenter / pointerleave (useHover: mouse / pen only, emulated mouse
+//   after touch ignored, hover ends when the hovered element is removed), focus / blur (useFocusable),
+//   press start via document pointerdown / keydown (capture) while hovered or focused. The per-trigger
+//   `isHovered` / `isFocused` refs live in a browser-side WeakMap keyed by the state. Nothing runs at
+//   import or load.
+// - Tooltip (`useTooltip`): hovering the tooltip keeps it open (pointerenter / pointerleave).
+// - `attachTooltip`: while open (a client effect of the open tooltip) — position (useOverlayPosition,
+//   closes on scroll of a scroll parent of the trigger), Escape closes (document keydown, capture),
+//   `aria-describedby` on the trigger.
+import { effect, untrack } from "@rivetjs/reactivity";
+import { getInteractionModality, isFocusVisible, setInteractionModality, setupGlobalFocusEvents, syncModalityFromFocus, } from "../interactions/focus-visible.jsx";
+import { getEventTarget, getOwnerDocument, nodeContains, read } from "../interactions/utils.js";
+import { overlayPosition } from "../overlay/position.js";
+import { closeTooltip, openTooltip } from "../state/tooltip.js";
+const triggerRefs = new WeakMap();
+const refs = (state) => {
+    let r = triggerRefs.get(state);
+    if (!r)
+        triggerRefs.set(state, (r = { isHovered: false, isFocused: false, hoverTarget: null, removeGlobal: null, focusTarget: null, removePress: null }));
+    return r;
+};
+// useHover's global touch tracking: iOS fires an emulated mouse pointer event right after a touch.
+const touch = { ignoreEmulatedMouse: false, tracking: false };
+function setupTouchTracking(doc) {
+    if (touch.tracking)
+        return;
+    touch.tracking = true;
+    doc.addEventListener("pointerup", (e) => {
+        if (e.pointerType !== "touch")
+            return;
+        touch.ignoreEmulatedMouse = true;
+        setTimeout(() => (touch.ignoreEmulatedMouse = false), 500);
+    });
+}
+// --- useTooltipTrigger ---------------------------------------------------------------------------
+const handleShow = (state, r) => {
+    if (r.isHovered || r.isFocused)
+        openTooltip(state, r.isFocused);
+};
+const handleHide = (state, r, immediate) => {
+    if (!r.isHovered && !r.isFocused)
+        closeTooltip(state, immediate);
+};
+/** useTooltipTrigger `onHoverStart`. */
+export function tooltipTriggerHoverStart(options, state) {
+    if (read(options.trigger) === "focus")
+        return;
+    const r = refs(state);
+    // In chrome, if you hover a trigger, then another element obscures it, due to keyboard
+    // interactions for example, hover will end. When hover is restored after that element disappears,
+    // focus moves on for example, then the tooltip will reopen. We check the modality to know if the
+    // hover is the result of moving the mouse.
+    r.isHovered = getInteractionModality() === "pointer";
+    handleShow(state, r);
+}
+/** useTooltipTrigger `onHoverEnd`. */
+export function tooltipTriggerHoverEnd(options, state) {
+    if (read(options.trigger) === "focus")
+        return;
+    const r = refs(state);
+    // no matter how the trigger is left, we should close the tooltip
+    r.isFocused = false;
+    r.isHovered = false;
+    handleHide(state, r);
+}
+/** useTooltipTrigger `onPressStart` (pointerdown / keydown on the trigger). */
+export function tooltipTriggerPressStart(options, state) {
+    // if shouldCloseOnPress is false, we should not close the tooltip
+    if (read(options.shouldCloseOnPress) === false)
+        return;
+    const r = refs(state);
+    // no matter how the trigger is pressed, we should close the tooltip
+    r.isFocused = false;
+    r.isHovered = false;
+    handleHide(state, r, true);
+}
+/** useTooltipTrigger `onFocus` (state part). */
+function triggerFocus(options, state) {
+    if (read(options.isDisabled))
+        return; // useFocusable({isDisabled})
+    if (isFocusVisible()) {
+        const r = refs(state);
+        r.isFocused = true;
+        handleShow(state, r);
+    }
+}
+/** useTooltipTrigger `onBlur` (state part). */
+function triggerBlur(options, state) {
+    if (read(options.isDisabled))
+        return;
+    const r = refs(state);
+    r.isFocused = false;
+    r.isHovered = false;
+    handleHide(state, r, true);
+}
+// Event handlers of the trigger element (RAC: passed to it through FocusableProvider).
+const inside = (wrapper, node) => node instanceof Node && nodeContains(wrapper, node);
+// The trigger's onPointerDown / onKeyDown: a document capture listener (a pressable child such as
+// Button stops pointerdown propagation; capture-phase JSX handlers are not resumable), installed while
+// the trigger is hovered or holds focus — the only times a press can close or cancel a tooltip.
+function engage(state, wrapper, options) {
+    const r = refs(state);
+    if (r.removePress)
+        return;
+    const doc = getOwnerDocument(wrapper);
+    const onPress = (e) => {
+        if (inside(wrapper, getEventTarget(e)))
+            tooltipTriggerPressStart(options, state);
+    };
+    doc.addEventListener("pointerdown", onPress, true);
+    doc.addEventListener("keydown", onPress, true);
+    r.removePress = () => {
+        doc.removeEventListener("pointerdown", onPress, true);
+        doc.removeEventListener("keydown", onPress, true);
+    };
+}
+function disengage(r) {
+    if (r.hoverTarget || r.focusTarget)
+        return;
+    r.removePress?.();
+    r.removePress = null;
+}
+function endHover(state, options) {
+    const r = refs(state);
+    if (!r.hoverTarget)
+        return;
+    r.hoverTarget = null;
+    r.removeGlobal?.();
+    r.removeGlobal = null;
+    disengage(r);
+    tooltipTriggerHoverEnd(options, state);
+}
+/** The trigger's `onPointerEnter` (useHover start). */
+export function tooltipTriggerPointerEnter(e, options, state) {
+    const wrapper = e.currentTarget;
+    const doc = getOwnerDocument(wrapper);
+    setupTouchTracking(doc);
+    // Resumed page: modality tracking installs on first use; the hover's own pointer event is the evidence.
+    setupGlobalFocusEvents(wrapper);
+    if (getInteractionModality() === null && e.pointerType !== "touch")
+        setInteractionModality("pointer");
+    const r = refs(state);
+    if (read(options.isDisabled) || e.pointerType === "touch" || r.hoverTarget || inside(wrapper, e.relatedTarget))
+        return;
+    if (touch.ignoreEmulatedMouse && e.pointerType === "mouse")
+        return;
+    r.hoverTarget = wrapper;
+    // A removed hovered element fires no pointerout; the next pointerover elsewhere ends the hover.
+    const onOver = (event) => {
+        if (r.hoverTarget && !inside(r.hoverTarget, getEventTarget(event)))
+            endHover(state, options);
+    };
+    doc.addEventListener("pointerover", onOver, { capture: true });
+    r.removeGlobal = () => doc.removeEventListener("pointerover", onOver, { capture: true });
+    engage(state, wrapper, options);
+    tooltipTriggerHoverStart(options, state);
+}
+/** The trigger's `onPointerLeave` (useHover end). */
+export function tooltipTriggerPointerLeave(e, options, state) {
+    if (e.pointerType === "touch" || inside(e.currentTarget, e.relatedTarget))
+        return;
+    endHover(state, options);
+}
+/** The trigger's `onFocus` (useFocusable). */
+export function tooltipTriggerFocus(e, options, state) {
+    const wrapper = e.currentTarget;
+    if (inside(wrapper, e.relatedTarget))
+        return;
+    refs(state).focusTarget = wrapper;
+    engage(state, wrapper, options);
+    syncModalityFromFocus(getEventTarget(e));
+    triggerFocus(options, state);
+}
+/** The trigger's `onBlur` (useFocusable). */
+export function tooltipTriggerBlur(e, options, state) {
+    if (inside(e.currentTarget, e.relatedTarget))
+        return;
+    const r = refs(state);
+    r.focusTarget = null;
+    disengage(r);
+    triggerBlur(options, state);
+}
+// --- useTooltip ----------------------------------------------------------------------------------
+/** pointerenter on the tooltip: hovering it keeps it open. */
+export function tooltipPointerEnter(e, props, state) {
+    if (e.target !== e.currentTarget || e.pointerType === "touch")
+        return;
+    if (touch.ignoreEmulatedMouse && e.pointerType === "mouse")
+        return;
+    if (read(props.trigger) !== "focus" && state)
+        openTooltip(state, true);
+}
+/** pointerleave on the tooltip. */
+export function tooltipPointerLeave(e, props, state) {
+    if (e.target !== e.currentTarget || e.pointerType === "touch")
+        return;
+    if (read(props.trigger) !== "focus" && state)
+        closeTooltip(state);
+}
+/** Provides the accessibility implementation for a Tooltip component (react-aria `useTooltip`). */
+export function tooltipProps(props, state) {
+    return {
+        tooltipProps: {
+            role: "tooltip",
+            id: props.id,
+            onPointerEnter: (e) => tooltipPointerEnter(e, props, state),
+            onPointerLeave: (e) => tooltipPointerLeave(e, props, state),
+        },
+    };
+}
+/**
+ * Handles the behavior and accessibility for an element that has an overlay tooltip that opens on
+ * hover or focus (react-aria `useTooltipTrigger`). Rivet: press start (close on press) is a document
+ * capture listener while the trigger is hovered or focused (a pressable child stops pointerdown);
+ * `aria-describedby` is set on the trigger while open (`attachTooltip`).
+ */
+export function tooltipTriggerProps(props, state) {
+    return {
+        triggerProps: {
+            onPointerEnter: (e) => tooltipTriggerPointerEnter(e, props, state),
+            onPointerLeave: (e) => tooltipTriggerPointerLeave(e, props, state),
+            onFocus: (e) => tooltipTriggerFocus(e, props, state),
+            onBlur: (e) => tooltipTriggerBlur(e, props, state),
+        },
+        tooltipProps: { id: props.tooltipId },
+    };
+}
+// --- RAC TooltipInner + useTooltipTrigger's Escape effect + aria-describedby -----------------------
+/** Add / remove an id in an idref list attribute. */
+function toggleIdRef(element, name, id, add) {
+    const ids = (element.getAttribute(name) ?? "").split(/\s+/).filter((token) => token && token !== id);
+    if (add)
+        ids.push(id);
+    if (ids.length)
+        element.setAttribute(name, ids.join(" "));
+    else
+        element.removeAttribute(name);
+}
+const readSource = (source) => (typeof source === "function" ? source() : source) ?? null;
+/** Client effect body: while `state` is open — position, Escape, `aria-describedby`. Returns the release. */
+export function attachTooltip(element, state, options) {
+    if (!element || !state.isOpen())
+        return;
+    return untrack(() => {
+        const doc = element.ownerDocument;
+        const trigger = readSource(options.triggerRef);
+        const cleanups = [];
+        if (trigger && element.id) {
+            toggleIdRef(trigger, "aria-describedby", element.id, true);
+            cleanups.push(() => toggleIdRef(trigger, "aria-describedby", element.id, false));
+        }
+        const position = overlayPosition({
+            placement: options.placement ?? "top",
+            target: trigger,
+            overlay: element,
+            arrow: () => readSource(options.arrowRef),
+            arrowStyle: !options.arrowOffset$,
+            offset: options.offset,
+            crossOffset: options.crossOffset,
+            containerPadding: options.containerPadding,
+            shouldFlip: options.shouldFlip,
+            arrowBoundaryOffset: options.arrowBoundaryOffset,
+            isOpen: true,
+            zIndex: options.zIndex,
+            onClose: () => closeTooltip(state, true),
+        });
+        const placement$ = options.placement$;
+        if (placement$)
+            cleanups.push(effect(() => placement$.set(position.placement())));
+        const arrowOffset$ = options.arrowOffset$;
+        if (arrowOffset$)
+            cleanups.push(effect(() => {
+                const result = position.position();
+                arrowOffset$.set(result ? { left: result.arrowOffsetLeft, top: result.arrowOffsetTop } : null);
+            }));
+        cleanups.push(() => position.dispose());
+        // Escape after clicking something can give it keyboard focus: dismiss the tooltip on Escape.
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                e.stopPropagation();
+                closeTooltip(state, true);
+            }
+        };
+        doc.addEventListener("keydown", onKeyDown, true);
+        cleanups.push(() => doc.removeEventListener("keydown", onKeyDown, true));
+        return () => {
+            for (const cleanup of cleanups.splice(0).reverse())
+                cleanup();
+        };
+    });
+}

package/tooltip/index.d.ts

@@ -0,0 +1,59 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import type { Content, Ref } from "@rivetjs/runtime/jsx-runtime";
+import { type ClassNameOrFunction, type ContextValue, type RefValue, type RenderProps, type StyleOrFunction } from "../slots/index.jsx";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type TooltipTriggerProps, type TooltipTriggerState } from "../state/tooltip.js";
+import type { OverlayTriggerProps } from "../state/overlays.js";
+import { type Placement, type PlacementAxis, type TooltipPositionOptions } from "./behaviour.jsx";
+export type { Placement, PlacementAxis, TooltipTriggerState, TooltipTriggerProps };
+export { createTooltipTriggerState, openTooltip, closeTooltip } from "../state/tooltip.js";
+export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
+    /** The trigger (a cdk Button / Link, or a custom element in `<Focusable>`) and its `<Tooltip>`. */
+    children?: Content;
+}
+export interface TooltipRenderProps {
+    /** The placement of the tooltip relative to the trigger. @selector [data-placement="left | right | top | bottom"] */
+    placement: () => PlacementAxis | null;
+    /** Whether the tooltip is currently entering. Use this to apply animations. @selector [data-entering] */
+    isEntering: () => boolean;
+    /** Whether the tooltip is currently exiting. Use this to apply animations. @selector [data-exiting] */
+    isExiting: () => boolean;
+    /** State of the tooltip. */
+    state: TooltipTriggerState;
+}
+export interface TooltipProps extends TooltipPositionOptions, Pick<OverlayTriggerProps, "isOpen" | "defaultOpen" | "onOpenChange">, RenderProps<TooltipRenderProps>, DOMRenderProps<"div", TooltipRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The CSS class for the element. A function may be provided to compute the class based on component state. @default 'rv-Tooltip' */
+    class?: ClassNameOrFunction<TooltipRenderProps>;
+    /** The inline style for the element. A function may be provided to compute the style based on component state. */
+    style?: StyleOrFunction<TooltipRenderProps>;
+    /**
+     * The ref for the element which the tooltip positions itself with respect to.
+     *
+     * When used within a TooltipTrigger this is set automatically. It is only required when used standalone.
+     */
+    triggerRef?: Ref<Element> | (() => Element | null | undefined);
+    /** Whether the tooltip is currently performing an entry animation. */
+    isEntering?: MaybeAccessor<boolean | undefined>;
+    /** Whether the tooltip is currently performing an exit animation. */
+    isExiting?: MaybeAccessor<boolean | undefined>;
+    /** By default, opens for both focus and hover. Can be made to open only for focus. Live (read at event time). */
+    trigger?: "hover" | "focus";
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `TooltipTriggerStateContext`: the state of the nearest TooltipTrigger. */
+export declare const TooltipTriggerStateContext: import("@rivetjs/reactivity").Context<TooltipTriggerState | null>;
+/** RAC `TooltipContext`: props for the Tooltip inside a TooltipTrigger (`triggerRef`, the tooltip `id`). */
+export declare const TooltipContext: import("@rivetjs/reactivity").Context<ContextValue<TooltipProps, HTMLDivElement>>;
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the
+ * Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to
+ * the trigger.
+ */
+export declare function TooltipTrigger(props: TooltipTriggerComponentProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** A tooltip displays a description of an element on hover or focus. */
+export declare function Tooltip(props: TooltipProps): string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined)[] | (() => string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | readonly (string | number | bigint | boolean | import("@rivetjs/runtime/jsx-runtime").CompiledElement | /*elided*/ any | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined)[] | /*elided*/ any | null | undefined) | null | undefined;