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

package/platform/index.d.ts

@@ -0,0 +1,100 @@
+/** Browser features with a progressive / fallback path in cdk and aria. */
+export type Feature = "field-sizing" | "base-select";
+/** Whether the browser supports `feature`; `undefined` on the server. */
+export declare function supports(feature: Feature): boolean | undefined;
+/** Test hook: force a feature on / off (`undefined` re-detects). */
+export declare function _setSupports(feature: Feature, value: boolean | undefined): void;
+/** macOS. Server: undefined. */
+export declare const isMac: () => boolean | undefined;
+/** iPhone. */
+export declare const isIPhone: () => boolean | undefined;
+/** iPad, incl. iPadOS 13+ reporting as Mac (told apart by touch support). */
+export declare const isIPad: () => boolean | undefined;
+/** iPhone / iPad. */
+export declare const isIOS: () => boolean | undefined;
+/** macOS or iOS. */
+export declare const isAppleDevice: () => boolean | undefined;
+/** Chrome (incl. Chrome on iOS, `CriOS`). */
+export declare const isChrome: () => boolean | undefined;
+/** WebKit engine: every iOS browser, or AppleWebKit without Chrome. */
+export declare const isWebKit: () => boolean | undefined;
+export declare const isFirefox: () => boolean | undefined;
+/** Safari: WebKit, not Chrome or Firefox. */
+export declare const isSafari: () => boolean | undefined;
+export declare const isAndroid: () => boolean | undefined;
+/** The platform's "command" modifier: Meta on Apple platforms, else Control. */
+export declare const isCtrlKeyPressed: (event: {
+    metaKey: boolean;
+    ctrlKey: boolean;
+}) => boolean;
+/**
+ * A "virtual" click: produced by a keyboard, assistive technology or `element.click()` rather than a
+ * pointer (JAWS/NVDA + Firefox: empty `pointerType`; Android TalkBack: `buttons === 1`; else `detail === 0`).
+ */
+export declare function isVirtualClick(event: MouseEvent | PointerEvent): boolean;
+/** A pointer event from a screen reader (zero-size pointer; TalkBack's 1×1 mouse with no pressure). */
+export declare function isVirtualPointerEvent(event: PointerEvent): boolean;
+/** Angular CDK `Platform`: engine / browser flags (all `false` on the server, `isBrowser` false). */
+export interface Platform {
+    /** Whether the code runs in a browser. */
+    readonly isBrowser: boolean;
+    /** Microsoft Edge (EdgeHTML). */
+    readonly EDGE: boolean;
+    /** Microsoft Trident. */
+    readonly TRIDENT: boolean;
+    /** Blink. */
+    readonly BLINK: boolean;
+    /** WebKit (standalone: not Blink, EdgeHTML or Trident). */
+    readonly WEBKIT: boolean;
+    /** Apple iOS. */
+    readonly IOS: boolean;
+    /** Firefox. */
+    readonly FIREFOX: boolean;
+    /** Android. */
+    readonly ANDROID: boolean;
+    /** Safari. */
+    readonly SAFARI: boolean;
+}
+/** Compute the `Platform` flags for a user agent (pure; `getPlatform()` uses the browser's). */
+export declare function detectPlatform(env: {
+    isBrowser: boolean;
+    userAgent?: string;
+    chrome?: boolean;
+    v8BreakIterator?: boolean;
+    hasCSS?: boolean;
+    msStream?: boolean;
+}): Platform;
+/** The current platform (Angular CDK `inject(Platform)`), memoized in the browser. */
+export declare function getPlatform(): Platform;
+/** Whether the browser supports passive event listeners (always true in Baseline browsers). */
+export declare function supportsPassiveEventListeners(): boolean;
+/** Listener options as-is where options objects work, else only the capture flag. */
+export declare function normalizePassiveListenerOptions(options: AddEventListenerOptions): AddEventListenerOptions | boolean;
+/** Whether `scrollTo({ behavior })` is supported (or polyfilled). False on the server. */
+export declare function supportsScrollBehavior(): boolean;
+/** Test hook: forget memoized feature checks (scroll behaviour, RTL axis, input types, shadow DOM, platform). */
+export declare function _resetPlatformMemo(): void;
+/** How the browser reports `scrollLeft` in RTL containers. */
+export declare const RtlScrollAxisType: {
+    /** 0 at the far left, (scrollWidth - clientWidth) at the far right. */
+    readonly NORMAL: 0;
+    /** -(scrollWidth - clientWidth) at the far left, 0 at the far right. Current spec, all Baseline browsers. */
+    readonly NEGATED: 1;
+    /** (scrollWidth - clientWidth) at the far left, 0 at the far right (old IE / Edge). */
+    readonly INVERTED: 2;
+};
+export type RtlScrollAxisType = (typeof RtlScrollAxisType)[keyof typeof RtlScrollAxisType];
+/** Measures the browser's RTL scroll axis type (1px container, 2px content). NORMAL on the server. */
+export declare function getRtlScrollAxisType(): RtlScrollAxisType;
+/** The `<input type>` values this browser supports (all candidates on the server). */
+export declare function getSupportedInputTypes(): Set<string>;
+/** Whether the browser supports Shadow DOM. */
+export declare function _supportsShadowDom(): boolean;
+/** The shadow root `element` is in, or null (light DOM / unsupported). */
+export declare function _getShadowRoot(element: Node): ShadowRoot | null;
+/** The focused element, piercing open shadow roots. Null on the server. */
+export declare function _getFocusedElementPierceShadowDom(doc?: Document): HTMLElement | null;
+/** An event's real target (first `composedPath()` entry: the node inside a shadow root). */
+export declare function _getEventTarget<T extends EventTarget>(event: Event): T | null;
+/** Whether the code runs under a known JS test runner (karma, jasmine, jest, mocha, Vitest) or `node --test`. */
+export declare function _isTestEnvironment(): boolean;

package/platform/index.js

@@ -0,0 +1,304 @@
+// Platform and feature detection.
+// Ported from angular/components src/cdk/platform (MIT, © Google LLC) and react-spectrum
+// packages/react-aria/src/utils/{platform,isVirtualEvent}.ts + shadowdom/DOMFunctions.ts (Apache-2.0, © Adobe).
+//
+// Server: the Rivet-specific probes (`supports`, `isMac`, …) return `undefined` — never branch markup
+// on the user agent (HTML is cached and shared); Angular's `getPlatform()` flags are `false` there,
+// as in the original. Browser: lazy (nothing runs at import), memoized where the original memoizes.
+const memo = {};
+const css = (declaration) => typeof CSS !== "undefined" && CSS.supports(declaration);
+const detect = {
+    "field-sizing": () => css("field-sizing: content"),
+    "base-select": () => css("appearance: base-select"),
+};
+/** Whether the browser supports `feature`; `undefined` on the server. */
+export function supports(feature) {
+    if (typeof document === "undefined" && !(feature in memo))
+        return undefined;
+    return (memo[feature] ??= detect[feature]());
+}
+/** Test hook: force a feature on / off (`undefined` re-detects). */
+export function _setSupports(feature, value) {
+    if (value === undefined)
+        delete memo[feature];
+    else
+        memo[feature] = value;
+}
+const nav = () => 
+// `document`, not `navigator`: Node has a global `navigator` too.
+typeof document === "undefined" ? undefined : navigator;
+/** react-aria `testPlatform`: `userAgentData.platform`, else `navigator.platform`. */
+const testPlatform = (re) => {
+    const n = nav();
+    return n === undefined ? undefined : re.test(n.userAgentData?.platform || n.platform || "");
+};
+/** react-aria `testUserAgent`: any `userAgentData` brand, else `navigator.userAgent`. */
+const testUserAgent = (re) => {
+    const n = nav();
+    if (n === undefined)
+        return undefined;
+    const brands = n.userAgentData?.brands;
+    return (Array.isArray(brands) && brands.some((brand) => re.test(brand.brand))) || re.test(n.userAgent);
+};
+/** macOS. Server: undefined. */
+export const isMac = () => testPlatform(/^Mac/i);
+/** iPhone. */
+export const isIPhone = () => testPlatform(/^iPhone/i);
+/** iPad, incl. iPadOS 13+ reporting as Mac (told apart by touch support). */
+export const isIPad = () => {
+    const ipad = testPlatform(/^iPad/i);
+    if (ipad === undefined)
+        return undefined;
+    return ipad || (!!isMac() && navigator.maxTouchPoints > 1);
+};
+/** iPhone / iPad. */
+export const isIOS = () => {
+    const iphone = isIPhone();
+    return iphone === undefined ? undefined : iphone || !!isIPad();
+};
+/** macOS or iOS. */
+export const isAppleDevice = () => {
+    const mac = isMac();
+    return mac === undefined ? undefined : mac || !!isIOS();
+};
+/** Chrome (incl. Chrome on iOS, `CriOS`). */
+export const isChrome = () => testUserAgent(/Chrome|CriOS|CrMo/i);
+/** WebKit engine: every iOS browser, or AppleWebKit without Chrome. */
+export const isWebKit = () => {
+    const webkit = testUserAgent(/AppleWebKit/i);
+    return webkit === undefined ? undefined : webkit && (!!isIOS() || !isChrome());
+};
+export const isFirefox = () => testUserAgent(/(Firefox|FxiOS)/i);
+/** Safari: WebKit, not Chrome or Firefox. */
+export const isSafari = () => {
+    const webkit = isWebKit();
+    return webkit === undefined ? undefined : webkit && !isChrome() && !isFirefox();
+};
+export const isAndroid = () => testUserAgent(/Android/i);
+/** The platform's "command" modifier: Meta on Apple platforms, else Control. */
+export const isCtrlKeyPressed = (event) => (isMac() ? event.metaKey : event.ctrlKey);
+/**
+ * A "virtual" click: produced by a keyboard, assistive technology or `element.click()` rather than a
+ * pointer (JAWS/NVDA + Firefox: empty `pointerType`; Android TalkBack: `buttons === 1`; else `detail === 0`).
+ */
+export function isVirtualClick(event) {
+    if (event.pointerType === "" && event.isTrusted)
+        return true;
+    if (isAndroid() && event.pointerType)
+        return event.type === "click" && event.buttons === 1;
+    return event.detail === 0 && !event.pointerType;
+}
+/** A pointer event from a screen reader (zero-size pointer; TalkBack's 1×1 mouse with no pressure). */
+export function isVirtualPointerEvent(event) {
+    return ((!isAndroid() && event.width === 0 && event.height === 0) ||
+        (!!isAndroid() && event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse"));
+}
+let platformMemo;
+/** Compute the `Platform` flags for a user agent (pure; `getPlatform()` uses the browser's). */
+export function detectPlatform(env) {
+    const ua = env.userAgent ?? "";
+    const isBrowser = env.isBrowser;
+    const EDGE = isBrowser && /(edge)/i.test(ua);
+    const TRIDENT = isBrowser && /(msie|trident)/i.test(ua);
+    // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
+    const BLINK = isBrowser && !!(env.chrome || env.v8BreakIterator) && !!env.hasCSS && !EDGE && !TRIDENT;
+    // Webkit is part of the userAgent in EdgeHTML, Blink and Trident: it must run standalone.
+    const WEBKIT = isBrowser && /AppleWebKit/i.test(ua) && !BLINK && !EDGE && !TRIDENT;
+    const IOS = isBrowser && /iPad|iPhone|iPod/.test(ua) && !env.msStream;
+    const FIREFOX = isBrowser && /(firefox|minefield)/i.test(ua);
+    // Trident on mobile adds the android platform to the userAgent to trick detections.
+    const ANDROID = isBrowser && /android/i.test(ua) && !TRIDENT;
+    // Every Safari browser should also use WebKit as its layout engine.
+    const SAFARI = isBrowser && /safari/i.test(ua) && WEBKIT;
+    return { isBrowser, EDGE, TRIDENT, BLINK, WEBKIT, IOS, FIREFOX, ANDROID, SAFARI };
+}
+/** The current platform (Angular CDK `inject(Platform)`), memoized in the browser. */
+export function getPlatform() {
+    if (typeof document !== "object" || !document)
+        return detectPlatform({ isBrowser: false });
+    if (platformMemo)
+        return platformMemo;
+    let v8BreakIterator = false;
+    try {
+        v8BreakIterator = typeof Intl !== "undefined" && !!Intl.v8BreakIterator;
+    }
+    catch { }
+    return (platformMemo = detectPlatform({
+        isBrowser: true,
+        userAgent: navigator.userAgent,
+        chrome: !!window.chrome,
+        v8BreakIterator,
+        hasCSS: typeof CSS !== "undefined",
+        msStream: "MSStream" in window,
+    }));
+}
+// --- features: passive listeners, scroll behaviour, RTL scroll axis, input types ------------------
+let passive;
+/** Whether the browser supports passive event listeners (always true in Baseline browsers). */
+export function supportsPassiveEventListeners() {
+    if (passive == null && typeof window !== "undefined") {
+        try {
+            window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: () => (passive = true) }));
+        }
+        finally {
+            passive = passive || false;
+        }
+    }
+    return !!passive;
+}
+/** Listener options as-is where options objects work, else only the capture flag. */
+export function normalizePassiveListenerOptions(options) {
+    return supportsPassiveEventListeners() ? options : !!options.capture;
+}
+let scrollBehavior;
+/** Whether `scrollTo({ behavior })` is supported (or polyfilled). False on the server. */
+export function supportsScrollBehavior() {
+    if (scrollBehavior == null) {
+        if (typeof document !== "object" || !document || typeof Element !== "function" || !Element)
+            return (scrollBehavior = false);
+        if (document.documentElement?.style && "scrollBehavior" in document.documentElement.style)
+            scrollBehavior = true;
+        else {
+            // `scrollTo` missing, native without behaviour, or polyfilled (non-native source counts as support).
+            const scrollTo = Element.prototype.scrollTo;
+            scrollBehavior = scrollTo ? !/\{\s*\[native code\]\s*\}/.test(scrollTo.toString()) : false;
+        }
+    }
+    return scrollBehavior;
+}
+/** Test hook: forget memoized feature checks (scroll behaviour, RTL axis, input types, shadow DOM, platform). */
+export function _resetPlatformMemo() {
+    scrollBehavior = rtlAxis = supportedInputTypes = shadowDom = platformMemo = undefined;
+}
+/** How the browser reports `scrollLeft` in RTL containers. */
+export const RtlScrollAxisType = {
+    /** 0 at the far left, (scrollWidth - clientWidth) at the far right. */
+    NORMAL: 0,
+    /** -(scrollWidth - clientWidth) at the far left, 0 at the far right. Current spec, all Baseline browsers. */
+    NEGATED: 1,
+    /** (scrollWidth - clientWidth) at the far left, 0 at the far right (old IE / Edge). */
+    INVERTED: 2,
+};
+let rtlAxis;
+/** Measures the browser's RTL scroll axis type (1px container, 2px content). NORMAL on the server. */
+export function getRtlScrollAxisType() {
+    if (typeof document !== "object" || !document)
+        return RtlScrollAxisType.NORMAL;
+    if (rtlAxis == null) {
+        const container = document.createElement("div");
+        const s = container.style;
+        container.dir = "rtl";
+        s.width = "1px";
+        s.overflow = "auto";
+        s.visibility = "hidden";
+        s.pointerEvents = "none";
+        s.position = "absolute";
+        const content = document.createElement("div");
+        content.style.width = "2px";
+        content.style.height = "1px";
+        container.appendChild(content);
+        document.body.appendChild(container);
+        rtlAxis = RtlScrollAxisType.NORMAL;
+        // A NORMAL browser starts an RTL container scrolled fully right (scrollLeft 1); 0 means NEGATED
+        // or INVERTED: setting 1 is past the max of a NEGATED one, which reads back 0.
+        if (container.scrollLeft === 0) {
+            container.scrollLeft = 1;
+            rtlAxis = container.scrollLeft === 0 ? RtlScrollAxisType.NEGATED : RtlScrollAxisType.INVERTED;
+        }
+        container.remove();
+    }
+    return rtlAxis;
+}
+let supportedInputTypes;
+const candidateInputTypes = [
+    // `color` must come first (Chrome warns when switching to `color` after another type).
+    "color",
+    "button",
+    "checkbox",
+    "date",
+    "datetime-local",
+    "email",
+    "file",
+    "hidden",
+    "image",
+    "month",
+    "number",
+    "password",
+    "radio",
+    "range",
+    "reset",
+    "search",
+    "submit",
+    "tel",
+    "text",
+    "time",
+    "url",
+    "week",
+];
+/** The `<input type>` values this browser supports (all candidates on the server). */
+export function getSupportedInputTypes() {
+    if (supportedInputTypes)
+        return supportedInputTypes;
+    if (typeof document !== "object" || !document)
+        return (supportedInputTypes = new Set(candidateInputTypes));
+    const input = document.createElement("input");
+    return (supportedInputTypes = new Set(candidateInputTypes.filter((value) => {
+        input.setAttribute("type", value);
+        return input.type === value;
+    })));
+}
+// --- shadow DOM ----------------------------------------------------------------------------------
+let shadowDom;
+/** Whether the browser supports Shadow DOM. */
+export function _supportsShadowDom() {
+    if (shadowDom == null) {
+        const head = typeof document !== "undefined" ? document.head : null;
+        shadowDom = !!(head && (head.createShadowRoot || head.attachShadow));
+    }
+    return shadowDom;
+}
+/** The shadow root `element` is in, or null (light DOM / unsupported). */
+export function _getShadowRoot(element) {
+    if (_supportsShadowDom()) {
+        const root = element.getRootNode ? element.getRootNode() : null;
+        if (typeof ShadowRoot !== "undefined" && ShadowRoot && root instanceof ShadowRoot)
+            return root;
+    }
+    return null;
+}
+/** The focused element, piercing open shadow roots. Null on the server. */
+export function _getFocusedElementPierceShadowDom(doc) {
+    let active = doc
+        ? doc.activeElement
+        : typeof document !== "undefined" && document
+            ? document.activeElement
+            : null;
+    while (active && active.shadowRoot) {
+        const next = active.shadowRoot.activeElement;
+        if (next === active || !next)
+            break;
+        active = next;
+    }
+    return active;
+}
+/** An event's real target (first `composedPath()` entry: the node inside a shadow root). */
+export function _getEventTarget(event) {
+    // `composedPath` can throw during event replay.
+    if (event.composedPath) {
+        try {
+            return event.composedPath()[0];
+        }
+        catch { }
+    }
+    return event.target;
+}
+/** Whether the code runs under a known JS test runner (karma, jasmine, jest, mocha, Vitest) or `node --test`. */
+export function _isTestEnvironment() {
+    const g = globalThis;
+    return !!(g.__karma__ ||
+        g.jasmine ||
+        g.jest ||
+        g.Mocha ||
+        g.__vitest_worker__ ||
+        (typeof process !== "undefined" && (process.env?.NODE_TEST_CONTEXT || process.env?.VITEST)));
+}

package/popover/behaviour.d.ts

@@ -0,0 +1,23 @@
+import type { Placement } from "../overlay/position.js";
+import type { OverlayTriggerState } from "../state/overlays.js";
+export * from "./use-popover.js";
+export type { Placement };
+/** @internal Options of the legacy `PopoverOverlay` shim. */
+export interface PopoverOverlayOptions {
+    /** Id of the element the popover is anchored to (its trigger). */
+    triggerId: string;
+    placement?: Placement;
+    offset?: number;
+    crossOffset?: number;
+    containerPadding?: number;
+    shouldFlip?: boolean;
+    maxHeight?: number;
+    arrowBoundaryOffset?: number;
+    /** Id of the boundary element. */
+    boundaryId?: string;
+    isNonModal?: boolean;
+    isKeyboardDismissDisabled?: boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
+}
+/** @internal Client effect body of `PopoverOverlay`: popoverProps while open + dialog focus + `onOpened`. */
+export declare function attachPopoverOverlay(element: HTMLElement | undefined, state: OverlayTriggerState, options: PopoverOverlayOptions, isDialog: boolean, onOpened?: (element: HTMLElement) => void): (() => void) | undefined;

package/popover/behaviour.js

@@ -0,0 +1,39 @@
+// Ported from React Aria (@react-aria/overlays usePopover) and React Aria Components (Popover.tsx),
+// Apache-2.0, © Adobe.
+// `@rivetjs/cdk/popover/behaviour`: the usePopover port (`popoverProps`, ./use-popover.ts) plus the
+// client-effect body of the legacy `PopoverOverlay` shim (`attachPopoverOverlay`).
+// Rivet: `attachPopoverOverlay` is internal glue for menu / select / date-picker until they render
+// `<Popover>` through `PopoverContext`; it is not an upstream API.
+import { untrack } from "@rivetjs/reactivity";
+import { focusSafely } from "../focus/index.js";
+import { popoverProps } from "./use-popover.js";
+export * from "./use-popover.js";
+/** @internal Client effect body of `PopoverOverlay`: popoverProps while open + dialog focus + `onOpened`. */
+export function attachPopoverOverlay(element, state, options, isDialog, onOpened) {
+    if (!element || !state.isOpen())
+        return;
+    return untrack(() => {
+        const doc = element.ownerDocument;
+        const boundary = options.boundaryId ? doc.getElementById(options.boundaryId) : null;
+        const aria = popoverProps({
+            triggerRef: doc.getElementById(options.triggerId),
+            popoverRef: element,
+            arrowRef: element.querySelector(":scope > [data-slot=arrow]"),
+            placement: options.placement ?? "bottom",
+            offset: options.offset ?? 8,
+            crossOffset: options.crossOffset ?? 0,
+            containerPadding: options.containerPadding ?? 12,
+            shouldFlip: options.shouldFlip ?? true,
+            maxHeight: options.maxHeight,
+            arrowBoundaryOffset: options.arrowBoundaryOffset ?? 0,
+            boundaryElement: boundary ?? undefined,
+            isNonModal: options.isNonModal,
+            isKeyboardDismissDisabled: options.isKeyboardDismissDisabled,
+            shouldCloseOnInteractOutside: options.shouldCloseOnInteractOutside,
+        }, state);
+        if (isDialog && !element.contains(doc.activeElement))
+            focusSafely(element.querySelector("[autofocus]") ?? element);
+        onOpened?.(element);
+        return () => aria.dispose();
+    });
+}

package/popover/index.d.ts

@@ -0,0 +1,60 @@
+import { type MaybeAccessor } from "../interactions/utils.js";
+import type { Ref } from "@rivetjs/runtime/jsx-runtime";
+import { type ClassNameOrFunction, type RenderProps, type RefValue, type SlotProps, type StyleObject, type StyleOrFunction } from "../slots/index.jsx";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import type { AriaLabelingProps } from "../utils/types.js";
+import { OverlayTriggerStateContext, PopoverContext, type PopoverContextValue } from "../overlay/contexts.js";
+import type { Placement, PlacementAxis, PositionProps } from "../overlay/position.js";
+import { type OverlayTriggerProps, type OverlayTriggerState } from "../state/overlays.js";
+import { type AriaPopoverProps } from "./use-popover.js";
+export type { Placement, PlacementAxis, OverlayTriggerState, PopoverContextValue };
+export { PopoverContext, OverlayTriggerStateContext };
+export interface PopoverRenderProps {
+    /** The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox". @selector [data-trigger="..."] */
+    trigger: string | null;
+    /** The placement of the popover relative to the trigger. @selector [data-placement="left | right | top | bottom"] */
+    placement: () => PlacementAxis | null;
+    /** Whether the popover is currently entering. Use this to apply animations. @selector [data-entering] */
+    isEntering: () => boolean;
+    /** Whether the popover is currently exiting. Use this to apply animations. @selector [data-exiting] */
+    isExiting: () => boolean;
+}
+export interface PopoverProps extends Omit<PositionProps, "isOpen">, Omit<AriaPopoverProps, "popoverRef" | "triggerRef" | "groupRef" | "arrowRef" | "offset" | "arrowSize" | "trigger" | "target" | "overlay">, OverlayTriggerProps, RenderProps<PopoverRenderProps>, DOMRenderProps<"div", PopoverRenderProps>, SlotProps, AriaLabelingProps, 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-Popover' */
+    class?: ClassNameOrFunction<PopoverRenderProps>;
+    /** The inline style for the element. A function may be provided to compute the style based on component state. */
+    style?: StyleOrFunction<PopoverRenderProps>;
+    /**
+     * The name of the component that triggered the popover. This is reflected on the element as the
+     * `data-trigger` attribute, and can be used to provide specific styles for the popover depending on
+     * which element triggered it.
+     */
+    trigger?: string;
+    /**
+     * The ref for the element which the popover positions itself with respect to.
+     *
+     * When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set
+     * automatically. It is only required when used standalone.
+     */
+    triggerRef?: Ref<Element> | (() => Element | null | undefined);
+    /** Whether the popover is currently performing an entry animation. */
+    isEntering?: MaybeAccessor<boolean | undefined>;
+    /** Whether the popover is currently performing an exit animation. */
+    isExiting?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Whether the popover should appear and disappear without an entry or exit animation. This is used by
+     * components such as PreviewTrigger to skip animations when quickly swapping between overlays.
+     */
+    shouldSkipAnimation?: boolean | (() => boolean);
+    /** The additional offset applied along the main axis between the element and its anchor element. @default 8 */
+    offset?: number;
+    /** The element's unique identifier (set while the popover is a dialog). */
+    id?: string;
+    ref?: RefValue<HTMLElement>;
+}
+/** A popover is an overlay element positioned relative to a trigger. */
+export declare function Popover(props: PopoverProps): 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;
+export type { StyleObject };
+export { PopoverOverlay, type PopoverOverlayProps } from "./popover-overlay.jsx";
+export * from "./use-popover.js";