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

package/menu/intl.d.ts

@@ -0,0 +1,2 @@
+import type { LocalizedStrings } from "../_adapters/intl.js";
+export declare const strings: LocalizedStrings;

package/menu/intl.js

@@ -0,0 +1,36 @@
+export const strings = {
+    "ar-AE": { "longPressMessage": "اضغط مطولاً أو اضغط على Alt + السهم لأسفل لفتح القائمة" },
+    "bg-BG": { "longPressMessage": "Натиснете продължително или натиснете Alt+ стрелка надолу, за да отворите менюто" },
+    "cs-CZ": { "longPressMessage": "Dlouhým stiskem nebo stisknutím kláves Alt + šipka dolů otevřete nabídku" },
+    "da-DK": { "longPressMessage": "Langt tryk eller tryk på Alt + pil ned for at åbne menuen" },
+    "de-DE": { "longPressMessage": "Drücken Sie lange oder drücken Sie Alt + Nach-unten, um das Menü zu öffnen" },
+    "el-GR": { "longPressMessage": "Πιέστε παρατεταμένα ή πατήστε Alt + κάτω βέλος για να ανοίξετε το μενού" },
+    "en-US": { "longPressMessage": "Long press or press Alt + ArrowDown to open menu" },
+    "es-ES": { "longPressMessage": "Mantenga pulsado o pulse Alt + flecha abajo para abrir el menú" },
+    "et-EE": { "longPressMessage": "Menüü avamiseks vajutage pikalt või vajutage klahve Alt + allanool" },
+    "fi-FI": { "longPressMessage": "Avaa valikko painamalla pohjassa tai näppäinyhdistelmällä Alt + Alanuoli" },
+    "fr-FR": { "longPressMessage": "Appuyez de manière prolongée ou appuyez sur Alt + Flèche vers le bas pour ouvrir le menu." },
+    "he-IL": { "longPressMessage": "לחץ לחיצה ארוכה או הקש Alt + ArrowDown כדי לפתוח את התפריט" },
+    "hr-HR": { "longPressMessage": "Dugo pritisnite ili pritisnite Alt + strelicu prema dolje za otvaranje izbornika" },
+    "hu-HU": { "longPressMessage": "Nyomja meg hosszan, vagy nyomja meg az Alt + lefele nyíl gombot a menü megnyitásához" },
+    "it-IT": { "longPressMessage": "Premi a lungo o premi Alt + Freccia giù per aprire il menu" },
+    "ja-JP": { "longPressMessage": "長押しまたは Alt+下矢印キーでメニューを開く" },
+    "ko-KR": { "longPressMessage": "길게 누르거나 Alt + 아래쪽 화살표를 눌러 메뉴 열기" },
+    "lt-LT": { "longPressMessage": "Norėdami atidaryti meniu, nuspaudę palaikykite arba paspauskite „Alt + ArrowDown“." },
+    "lv-LV": { "longPressMessage": "Lai atvērtu izvēlni, turiet nospiestu vai nospiediet taustiņu kombināciju Alt + lejupvērstā bultiņa" },
+    "nb-NO": { "longPressMessage": "Langt trykk eller trykk Alt + PilNed for å åpne menyen" },
+    "nl-NL": { "longPressMessage": "Druk lang op Alt + pijl-omlaag of druk op Alt om het menu te openen" },
+    "pl-PL": { "longPressMessage": "Naciśnij i przytrzymaj lub naciśnij klawisze Alt + Strzałka w dół, aby otworzyć menu" },
+    "pt-BR": { "longPressMessage": "Pressione e segure ou pressione Alt + Seta para baixo para abrir o menu" },
+    "pt-PT": { "longPressMessage": "Prima continuamente ou prima Alt + Seta Para Baixo para abrir o menu" },
+    "ro-RO": { "longPressMessage": "Apăsați lung sau apăsați pe Alt + săgeată în jos pentru a deschide meniul" },
+    "ru-RU": { "longPressMessage": "Нажмите и удерживайте или нажмите Alt + Стрелка вниз, чтобы открыть меню" },
+    "sk-SK": { "longPressMessage": "Ponuku otvoríte dlhým stlačením alebo stlačením klávesu Alt + klávesu so šípkou nadol" },
+    "sl-SI": { "longPressMessage": "Za odprtje menija pritisnite in držite gumb ali pritisnite Alt+puščica navzdol" },
+    "sr-SP": { "longPressMessage": "Dugo pritisnite ili pritisnite Alt + strelicu prema dole da otvorite meni" },
+    "sv-SE": { "longPressMessage": "Håll nedtryckt eller tryck på Alt + pil nedåt för att öppna menyn" },
+    "tr-TR": { "longPressMessage": "Menüyü açmak için uzun basın veya Alt + Aşağı Ok tuşuna basın" },
+    "uk-UA": { "longPressMessage": "Довго або звичайно натисніть комбінацію клавіш Alt і стрілка вниз, щоб відкрити меню" },
+    "zh-CN": { "longPressMessage": "长按或按 Alt + 向下方向键以打开菜单" },
+    "zh-TW": { "longPressMessage": "長按或按 Alt+向下鍵以開啟功能表" },
+};

package/menu/safely-mouse-to-submenu.d.ts

@@ -0,0 +1,12 @@
+export interface SafelyMouseToSubmenuOptions {
+    /** Whether this feature is disabled. */
+    isDisabled?: boolean;
+    /** Capture `pointerdown` over the safe triangle (default true). */
+    preventPointerDown?: boolean;
+}
+/**
+ * Allows the user to move their pointer to the submenu without it closing when their mouse leaves
+ * the trigger element. Prevents pointer events from going to the underlying menu if the user is
+ * moving their pointer towards the sub-menu. Returns the cleanup.
+ */
+export declare function safelyMouseToSubmenu(menu: HTMLElement | null, submenu: HTMLElement | null, options?: SafelyMouseToSubmenuOptions): () => void;

package/menu/safely-mouse-to-submenu.js

@@ -0,0 +1,128 @@
+// Ported from react-aria menu/useSafelyMouseToSubmenu.ts (packages/react-aria/src/menu), Apache-2.0, © Adobe.
+//
+// Lets the user move the pointer to an open submenu without the submenu closing when the pointer
+// leaves its trigger: while the pointer moves towards the submenu, `pointer-events: none` is set on
+// the parent menu so the items it crosses do not take hover / focus.
+// Rivet:
+// - the hook's effect → `safelyMouseToSubmenu(menu, submenu, options)`: attach while the submenu is
+//   open (browser only, from the submenu's open path), returns the cleanup. No load-time JS.
+// - `useResizeObserver` on the submenu → one ResizeObserver while attached; `useInteractionModality` →
+//   `getInteractionModality()` read at attach time (upstream re-runs the effect on modality change:
+//   the cleanup + re-attach happens on the next open).
+// - the `NODE_ENV === "test"` guard of the capture pointerdown listener → `options.preventPointerDown`
+//   (default true; tests without hit testing pass false).
+import { getInteractionModality } from "../interactions/focus-visible.jsx";
+import { nodeContains } from "../interactions/utils.js";
+const ALLOWED_INVALID_MOVEMENTS = 2;
+const THROTTLE_TIME = 50;
+const TIMEOUT_TIME = 1000;
+const ANGLE_PADDING = Math.PI / 12; // 15°
+/**
+ * Allows the user to move their pointer to the submenu without it closing when their mouse leaves
+ * the trigger element. Prevents pointer events from going to the underlying menu if the user is
+ * moving their pointer towards the sub-menu. Returns the cleanup.
+ */
+export function safelyMouseToSubmenu(menu, submenu, options = {}) {
+    let prevPointerPos;
+    let submenuRect;
+    let lastProcessedTime = 0;
+    let timeout;
+    let autoCloseTimeout;
+    let submenuSide;
+    let movementsTowardsSubmenuCount = ALLOWED_INVALID_MOVEMENTS;
+    let preventPointerEvents = false;
+    const setPreventPointerEvents = (value) => {
+        preventPointerEvents = value;
+        if (menu)
+            menu.style.pointerEvents = value ? "none" : "";
+    };
+    const reset = () => {
+        setPreventPointerEvents(false);
+        movementsTowardsSubmenuCount = ALLOWED_INVALID_MOVEMENTS;
+        prevPointerPos = undefined;
+    };
+    if (options.isDisabled || !submenu || !menu || getInteractionModality() !== "pointer") {
+        reset();
+        return () => { };
+    }
+    submenuRect = submenu.getBoundingClientRect();
+    const updateSubmenuRect = () => {
+        submenuRect = submenu.getBoundingClientRect();
+        submenuSide = undefined;
+    };
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(updateSubmenuRect) : null;
+    observer?.observe(submenu);
+    // Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied
+    // will cause focus to move unexpectedly since it will go to an element behind the menu.
+    const onPointerDown = (e) => {
+        if (preventPointerEvents)
+            e.preventDefault();
+    };
+    const onPointerMove = (e) => {
+        if (e.pointerType === "touch" || e.pointerType === "pen")
+            return;
+        const currentTime = Date.now();
+        // Throttle
+        if (currentTime - lastProcessedTime < THROTTLE_TIME)
+            return;
+        clearTimeout(timeout);
+        clearTimeout(autoCloseTimeout);
+        const { clientX: mouseX, clientY: mouseY } = e;
+        if (!prevPointerPos) {
+            prevPointerPos = { x: mouseX, y: mouseY };
+            return;
+        }
+        if (!submenuRect)
+            return;
+        if (!submenuSide)
+            submenuSide = mouseX > submenuRect.right ? "left" : "right";
+        // Pointer is outside of parent menu
+        const menuRect = menu.getBoundingClientRect();
+        if (mouseX < menuRect.left || mouseX > menuRect.right || mouseY < menuRect.top || mouseY > menuRect.bottom) {
+            reset();
+            return;
+        }
+        // Check if pointer is moving towards submenu (2-argument arctangent of the previous pointer
+        // against the submenu's top / bottom corners and the pointer delta).
+        const prevMouseX = prevPointerPos.x;
+        const prevMouseY = prevPointerPos.y;
+        const toSubmenuX = submenuSide === "right" ? submenuRect.left - prevMouseX : prevMouseX - submenuRect.right;
+        const angleTop = Math.atan2(prevMouseY - submenuRect.top, toSubmenuX) + ANGLE_PADDING;
+        const angleBottom = Math.atan2(prevMouseY - submenuRect.bottom, toSubmenuX) - ANGLE_PADDING;
+        const anglePointer = Math.atan2(prevMouseY - mouseY, submenuSide === "left" ? -(mouseX - prevMouseX) : mouseX - prevMouseX);
+        const isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
+        movementsTowardsSubmenuCount = isMovingTowardsSubmenu
+            ? Math.min(movementsTowardsSubmenuCount + 1, ALLOWED_INVALID_MOVEMENTS)
+            : Math.max(movementsTowardsSubmenuCount - 1, 0);
+        setPreventPointerEvents(movementsTowardsSubmenuCount >= ALLOWED_INVALID_MOVEMENTS);
+        lastProcessedTime = currentTime;
+        prevPointerPos = { x: mouseX, y: mouseY };
+        // If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
+        if (isMovingTowardsSubmenu) {
+            timeout = setTimeout(() => {
+                reset();
+                autoCloseTimeout = setTimeout(() => {
+                    // Fire a pointerover event to trigger the menu to close.
+                    // Wait until pointer-events:none is no longer applied
+                    const target = document.elementFromPoint(mouseX, mouseY);
+                    if (target && nodeContains(menu, target))
+                        target.dispatchEvent(new PointerEvent("pointerover", { bubbles: true, cancelable: true }));
+                }, 100);
+            }, TIMEOUT_TIME);
+        }
+    };
+    const preventDown = options.preventPointerDown ?? true;
+    window.addEventListener("pointermove", onPointerMove);
+    if (preventDown)
+        window.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+        window.removeEventListener("pointermove", onPointerMove);
+        if (preventDown)
+            window.removeEventListener("pointerdown", onPointerDown, true);
+        clearTimeout(timeout);
+        clearTimeout(autoCloseTimeout);
+        observer?.disconnect();
+        movementsTowardsSubmenuCount = ALLOWED_INVALID_MOVEMENTS;
+        setPreventPointerEvents(false);
+    };
+}

package/meter/behaviour.d.ts

@@ -0,0 +1,18 @@
+import { type AriaProgressBarBaseProps, type ProgressBarAttrs, type ProgressBarBaseProps } from "../progress-bar/behaviour.jsx";
+export { percentageOf, percentageOfProps } from "../progress-bar/behaviour.jsx";
+export type MeterProps = ProgressBarBaseProps;
+export interface AriaMeterProps extends AriaProgressBarBaseProps {
+}
+export interface MeterAria {
+    /** Props for the meter container element. */
+    meterProps: ProgressBarAttrs;
+    /** Props for the meter's visual label (if any). */
+    labelProps: {
+        id?: string;
+    };
+}
+/**
+ * Provides the accessibility implementation for a meter component.
+ * Meters represent a quantity within a known range, or a fractional value.
+ */
+export declare function meterProps(props: AriaMeterProps, locale?: string): MeterAria;

package/meter/behaviour.jsx

@@ -0,0 +1,17 @@
+// Ported from react-aria `useMeter` (packages/react-aria/src/meter/useMeter.ts), Apache-2.0, © Adobe.
+// Rivet: `meterProps(props, locale?)` (RA `useMeter`) over `progressBarProps` (call while rendering: reads the locale context,
+// creates ids; value attributes are accessors, see `../progress-bar/behaviour.tsx`). `.tsx`: resumable closures.
+import { progressBarProps } from "../progress-bar/behaviour.jsx";
+export { percentageOf, percentageOfProps } from "../progress-bar/behaviour.jsx";
+/**
+ * Provides the accessibility implementation for a meter component.
+ * Meters represent a quantity within a known range, or a fractional value.
+ */
+export function meterProps(props, locale) {
+    const bags = progressBarProps(props, locale);
+    const labelProps = bags.labelProps;
+    return {
+        meterProps: { ...bags.progressBarProps, role: "meter" },
+        labelProps,
+    };
+}

package/meter/index.d.ts

@@ -0,0 +1,30 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ContextValue, type RefValue, type ClassNameOrFunction, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { type AriaMeterProps } from "./behaviour.jsx";
+export { meterProps, type AriaMeterProps, type MeterAria } from "./behaviour.jsx";
+export interface MeterRenderProps {
+    /** The value as a percentage between the minimum and maximum. */
+    percentage: () => number;
+    /**
+     * A formatted version of the value.
+     *
+     * @selector [aria-valuetext]
+     */
+    valueText: () => string | undefined;
+}
+export interface MeterProps extends Omit<AriaMeterProps, "label">, RenderProps<MeterRenderProps>, DOMRenderProps<"div", MeterRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    ref?: RefValue<HTMLDivElement>;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-Meter'
+     */
+    class?: ClassNameOrFunction<MeterRenderProps>;
+}
+/** RAC `MeterContext`. */
+export declare const MeterContext: import("@rivetjs/reactivity").Context<ContextValue<MeterProps, HTMLDivElement>>;
+/**
+ * A meter represents a quantity within a known range, or a fractional value.
+ */
+export declare function Meter(props: MeterProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/meter/index.jsx

@@ -0,0 +1,85 @@
+// Ported from react-aria-components `Meter` (packages/react-aria-components/src/Meter.tsx), Apache-2.0, © Adobe.
+// A meter represents a quantity within a known range, or a fractional value.
+// Rivet:
+// - render props are accessors (`{({ percentage, valueText }) => <div style={{ width: percentage() + "%" }} />}`);
+//   `class` / `style` may be functions of them (RAC `className` → `class`).
+// - the label: `<Label>` inside gets `{ id, elementType: "span" }` from `LabelContext`; `aria-labelledby` points
+//   at it while it is attached (`createSlot`: server render assumes it is, when no `aria-label` / `aria-labelledby`).
+// - `value` / `minValue` / `maxValue` / `valueLabel` accept accessors (`value={() => progress()}`):
+//   the aria attributes and render props update in their bindings (the component runs once).
+// `render` (RAC DOMRenderProps): given, the attributes object (reactive entries are accessors) goes to `render(attrs, renderProps)` instead of the default element.
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { hasLive, liveOptions, liveView } from "../utils/live.jsx";
+import { Provider } from "@rivetjs/runtime/dom";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { resumableContext, contextProps, createSlot, renderPropsOf, } from "../slots/index.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { meterProps, percentageOfProps } from "./behaviour.jsx";
+export { meterProps } from "./behaviour.jsx";
+const OWNED = ["style", "render"];
+/** RAC `MeterContext`. */
+export const MeterContext = resumableContext(createContext(null, { id: "rv-meter" }));
+/**
+ * A meter represents a quantity within a known range, or a fractional value.
+ */
+export function Meter(props) {
+    // Live props (P5): the value props become accessors (the bag reads them with `read` in bindings), class / style /
+    // children from a live view; the rest of the body is read once (untracked).
+    return untrack(() => meter(props));
+}
+const LIVE_KEYS = ["value", "minValue", "maxValue", "valueLabel", "isIndeterminate", "formatOptions"];
+function meter(props) {
+    const [ctxMerged, ref] = contextProps(props, props.ref, MeterContext);
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, LIVE_KEYS) : ctxMerged;
+    const initialLabel = !merged["aria-label"] && !merged["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    // `children` left out: the bag's accessors (`aria-valuetext`, a render prop) must not capture them (resumed pages).
+    const { meterProps: attrs, labelProps } = meterProps({ ...merged, children: undefined, label: initialLabel });
+    const labelledBy = attrs["aria-labelledby"];
+    // Calculate the width of the progress bar as a percentage
+    // A narrow view of the range keys (not `merged`: the render props' `percentage` would capture the children too).
+    const range = liveView(merged, ["value", "minValue", "maxValue"]);
+    const percentage = () => percentageOfProps(range);
+    const valueText = attrs["aria-valuetext"];
+    const values = { percentage, valueText };
+    const rp = renderPropsOf(merged, { defaultClassName: "rv-Meter", values });
+    const dom = globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const { id, role } = attrs;
+    const ariaLabel = attrs["aria-label"];
+    const describedBy = attrs["aria-describedby"];
+    const details = attrs["aria-details"];
+    const valueNow = attrs["aria-valuenow"];
+    const valueMin = attrs["aria-valuemin"];
+    const valueMax = attrs["aria-valuemax"];
+    const labelValue = { id: labelProps.id, ref: labelRef, elementType: "span" };
+    if (merged.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            id,
+            role,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "aria-label": ariaLabel,
+            "aria-labelledby": () => (initialLabel ? (hasLabel() ? labelledBy : undefined) : labelledBy),
+            "aria-describedby": describedBy,
+            "aria-details": details,
+            "aria-valuenow": valueNow,
+            "aria-valuemin": valueMin,
+            "aria-valuemax": valueMax,
+            "aria-valuetext": valueText,
+            children: () => (<Provider token={LabelContext} value={labelValue}>
+          {rp.children()}
+        </Provider>),
+        };
+        return merged.render(attrs, values);
+    }
+    return (<div {...dom} ref={ref} id={id} role={role} class={rp.class()} style={rp.style()} slot={slot} aria-label={ariaLabel} aria-labelledby={initialLabel ? (hasLabel() ? labelledBy : undefined) : labelledBy} aria-describedby={describedBy} aria-details={details} aria-valuenow={valueNow()} aria-valuemin={valueMin()} aria-valuemax={valueMax()} aria-valuetext={valueText()}>
+      <Provider token={LabelContext} value={labelValue}>
+        {rp.children()}
+      </Provider>
+    </div>);
+}

package/modal/index.d.ts

@@ -0,0 +1,79 @@
+import { type Ref } from "@rivetjs/runtime/dom";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { type AriaModalOverlayProps } from "../overlay/modal-overlay.js";
+import { setOpen, type OverlayTriggerProps, type OverlayTriggerState } from "../state/overlays.js";
+import { type ClassNameOrFunction, type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+export type { OverlayTriggerState };
+export interface ModalRenderProps {
+    /**
+     * Whether the modal is currently entering. Use this to apply animations.
+     * @selector [data-entering]
+     */
+    isEntering: () => boolean;
+    /**
+     * Whether the modal is currently exiting. Use this to apply animations.
+     * @selector [data-exiting]
+     */
+    isExiting: () => boolean;
+    /** State of the modal. */
+    state: OverlayTriggerState;
+}
+export interface ModalOverlayProps extends Omit<AriaModalOverlayProps, "isEntering" | "overrideFocus">, OverlayTriggerProps, RenderProps<ModalRenderProps>, DOMRenderProps<"div", ModalRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /**
+     * The CSS class of the element. A function may be provided to compute the class based on component state.
+     * @default 'rv-ModalOverlay' (ModalOverlay) / 'rv-Modal' (Modal)
+     */
+    class?: ClassNameOrFunction<ModalRenderProps>;
+    /** Whether the modal is currently performing an entry animation (a value or an accessor). */
+    isEntering?: MaybeAccessor<boolean | undefined>;
+    /** Whether the modal is currently performing an exit animation (a value or an accessor). */
+    isExiting?: MaybeAccessor<boolean | undefined>;
+    /** Callback when the modal starts entering. Return a promise to indicate when the entry animation has completed. */
+    onEnter?: (element: HTMLElement) => void | Promise<void>;
+    /** Callback when the modal starts exiting. Return a promise to indicate when the exit animation has completed. */
+    onExit?: (element: HTMLElement) => void | Promise<void>;
+    /**
+     * Whether to wait until the entry animation completes before hiding content outside the modal and moving focus into it.
+     * @private
+     */
+    UNSTABLE_deferUntilEntered?: boolean;
+    /** @private Patch focus() so it does not scroll the page (RA `UNSTABLE_overrideFocus`). */
+    UNSTABLE_overrideFocus?: boolean;
+    id?: string;
+    ref?: RefValue<HTMLDivElement>;
+}
+export type ModalProps = ModalOverlayProps;
+interface InternalModalContextValue {
+    modalRef: Ref<HTMLDivElement>;
+    /** Whether the modal is revealed (RA `isOpen` of ModalOverlayInner: after the keyboard check). */
+    isOpen: () => boolean;
+    isExiting: () => boolean;
+    isDismissable?: boolean | (() => boolean | undefined);
+    /** The Modal's `onExit` (RA `onExitRef`): the overlay's exit animation of the modal element calls it. */
+    onExit: {
+        current?: (element: HTMLElement) => void | Promise<void>;
+    };
+    state: OverlayTriggerState;
+}
+/** Props for the nearest `<ModalOverlay>` / `<Modal>` from a parent (RAC `ModalContext`). */
+export declare const ModalContext: import("@rivetjs/reactivity").Context<ContextValue<ModalOverlayProps, HTMLDivElement>>;
+/** @private What a ModalOverlay passes to its Modal (RAC `InternalModalContext`). */
+export declare const InternalModalContext: import("@rivetjs/reactivity").Context<InternalModalContextValue | null>;
+/**
+ * Opt-in work per open (a styled layer registers it, e.g. @rivetjs/ui's overlays: the motion token): `open(overlay,
+ * modal)` runs once per open, the overlay in the document. Unset (cdk alone): nothing runs, nothing ships.
+ */
+export declare const modalHooks: {
+    open?(overlay: HTMLElement, modal: HTMLElement): void;
+};
+/** The motion token (`--rv-motion-spring` → inline spring timing; motion spec D17) for `modalHooks.open`. */
+export { applyMotionToken } from "../utils/motion-token.js";
+/** A modal is an overlay element which blocks interaction with elements outside it (RAC `Modal`). */
+export declare function Modal(props: ModalOverlayProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element (RAC `ModalOverlay`). */
+export declare function ModalOverlay(props: ModalOverlayProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** @internal Opens / closes a modal state (re-exported for callers of the old API). */
+export { setOpen };
+export * from "./provider.jsx";