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

package/button/behaviour.js

@@ -0,0 +1,90 @@
+// Ported from react-aria `useButton` (packages/react-aria/src/button/useButton.ts) and the RAC Button's
+// `useDisableInteractions` (packages/react-aria-components/src/Button.tsx), Apache-2.0, © Adobe.
+// Rivet (naming convention): `useButton(props, ref)` → `buttonProps(props)` (the attribute bag); the press
+// handlers are free functions `button<Event>(event, options, isPending)` called from inline arrows (resumable)
+// over THE press port (press.ts → ../interactions/press.tsx). `isPressed` is not returned: the handlers write
+// `data-pressed` on the element (zero-cost state, see press.ts).
+import { read } from "../interactions/utils.js";
+import { pressClick, pressDragStart, pressKeyDown, pressMouseDown, pressPointerDown, pressPointerUp } from "./press.js";
+// Accessors (context-provided `aria-expanded={() => state.isOpen()}`) stay accessors: read them in bindings.
+const str = (v) => (typeof v === "function" ? v : v == null ? undefined : String(v));
+/**
+ * RA `useButton` attributes (without handlers: wire `buttonPointerDown` / `buttonKeyDown` / `buttonClick` /
+ * … as inline arrows). Includes `useFocusable` attributes (`tabIndex` for `excludeFromTabOrder`,
+ * `autoFocus`) and the labelable DOM props (`id`, `aria-label*`, `aria-describedby`, `aria-details`).
+ */
+export function buttonProps(props) {
+    const { elementType = "button", type = "button" } = props;
+    const isDisabled = read(props.isDisabled);
+    const out = elementType === "button"
+        ? {
+            type,
+            disabled: isDisabled || undefined,
+            form: props.form,
+            formAction: props.formAction,
+            formEncType: props.formEncType,
+            formMethod: props.formMethod,
+            formNoValidate: props.formNoValidate,
+            formTarget: props.formTarget,
+            name: props.name,
+            value: props.value,
+        }
+        : {
+            role: "button",
+            // RA useFocusable: non-native elements are focusable unless disabled.
+            tabIndex: isDisabled ? undefined : 0,
+            href: elementType === "a" && !isDisabled ? props.href : undefined,
+            target: elementType === "a" ? props.target : undefined,
+            type: elementType === "input" ? type : undefined,
+            disabled: elementType === "input" ? isDisabled || undefined : undefined,
+            "aria-disabled": !isDisabled || elementType === "input" ? undefined : "true",
+            rel: elementType === "a" ? props.rel : undefined,
+        };
+    if (props.allowFocusWhenDisabled && isDisabled)
+        out.tabIndex = -1;
+    if (props.excludeFromTabOrder)
+        out.tabIndex = -1;
+    if (props.autoFocus)
+        out.autoFocus = true;
+    out.id = props.id;
+    out["aria-label"] = props["aria-label"];
+    out["aria-labelledby"] = props["aria-labelledby"];
+    out["aria-describedby"] = props["aria-describedby"];
+    out["aria-details"] = props["aria-details"];
+    out["aria-haspopup"] = str(props["aria-haspopup"]);
+    out["aria-expanded"] = str(props["aria-expanded"]);
+    out["aria-controls"] = props["aria-controls"];
+    out["aria-pressed"] = str(props["aria-pressed"]);
+    out["aria-current"] = str(props["aria-current"]);
+    out["aria-disabled"] = str(props["aria-disabled"]) ?? out["aria-disabled"];
+    return out;
+}
+/** Press options with `isPending` (RAC `useDisableInteractions`: pending buttons ignore presses, keep focus / hover). */
+export function pendingOptions(options, isPending) {
+    return isPending !== undefined && read(isPending) ? { ...options, isDisabled: true } : options;
+}
+/** Whether `isPending` is set and true now. */
+export const isPendingNow = (isPending) => isPending !== undefined && !!read(isPending);
+// RAC `useDisableInteractions`: while pending the press handlers are removed (not merely disabled: a disabled
+// usePress prevents the pointerdown default, which would keep the pending button from taking focus).
+export const buttonKeyDown = (e, o, pending) => {
+    if (!isPendingNow(pending))
+        pressKeyDown(o, e);
+};
+export const buttonClick = (e, o, pending) => {
+    // Pending submit buttons render `type="button"`; other pending clicks are swallowed.
+    if (isPendingNow(pending))
+        e.preventDefault();
+    else
+        pressClick(o, e);
+};
+export const buttonPointerDown = (e, o, pending) => {
+    if (!isPendingNow(pending))
+        pressPointerDown(o, e);
+};
+export const buttonPointerUp = (e, o, pending) => {
+    if (!isPendingNow(pending))
+        pressPointerUp(o, e);
+};
+export const buttonMouseDown = (e, o) => pressMouseDown(o, e);
+export const buttonDragStart = (e, o) => pressDragStart(o, e);

package/button/index.d.ts

@@ -0,0 +1,38 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import type { HoverEvents } from "../utils/types.js";
+import { type AriaButtonProps } from "./behaviour.js";
+export type { PressEvent, PointerType } from "./press.js";
+/** Render props of `Button` (accessors; `@selector` = the matching attribute). */
+export interface ButtonRenderProps {
+    /** Hovered with a mouse. @selector [data-hovered] */
+    isHovered: () => boolean;
+    /** Pressed. @selector [data-pressed] */
+    isPressed: () => boolean;
+    /** Focused (mouse or keyboard). @selector [data-focused] */
+    isFocused: () => boolean;
+    /** Keyboard focused. @selector [data-focus-visible] */
+    isFocusVisible: () => boolean;
+    /** Disabled. @selector [data-disabled] */
+    isDisabled: () => boolean;
+    /** Pending. @selector [data-pending] */
+    isPending: () => boolean;
+}
+export interface ButtonProps extends Omit<AriaButtonProps, "elementType" | "href" | "target" | "rel">, HoverEvents, SlotProps, RenderProps<ButtonRenderProps>, DOMRenderProps<"button", ButtonRenderProps>, Omit<GlobalDOMAttributes<HTMLButtonElement>, "onClick"> {
+    /**
+     * Pending: press and hover disabled, focus kept, announced to screen readers; a submit button stops
+     * submitting. A boolean, or an accessor / signal (changes without re-creating the button).
+     */
+    isPending?: MaybeAccessor<boolean | undefined>;
+    ref?: RefValue<HTMLButtonElement>;
+}
+/** Value of `ButtonContext` (RAC `ButtonContextValue`): Button props + a controlled `isPressed` (trigger of an open overlay). */
+export interface ButtonContextValue extends ButtonProps {
+    isPressed?: MaybeAccessor<boolean | undefined>;
+}
+/** RAC `ButtonContext`: props for the Buttons inside a component, optionally per `slot`. */
+export declare const ButtonContext: import("@rivetjs/reactivity").Context<ContextValue<ButtonContextValue, HTMLButtonElement>>;
+/** A button: press, hover, focus ring, pending (RAC `Button`). */
+export declare function Button(inProps: ButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;

package/button/index.jsx

@@ -0,0 +1,376 @@
+// Ported from react-aria-components `Button` (packages/react-aria-components/src/Button.tsx) + react-aria
+// `useButton` (packages/react-aria/src/button/useButton.ts), Apache-2.0, © Adobe.
+// A native <button>: press events (THE usePress port via press.ts), hover / focus ring (data-attrs.ts), pending
+// state, form attributes, `ButtonContext` (slots: `<Button slot="close">`, MenuTrigger / DialogTrigger / Select /
+// NumberField triggers).
+// Rivet:
+// - render props are accessors (`class={({ isPressed }) => (isPressed() ? "on" : "")}`); the states are signals
+//   only when a `class` / `style` / `children` function asks for them. `data-hovered` / `data-pressed` /
+//   `data-focused` / `data-focus-visible` are written by the handlers on the element (zero cost before
+//   interaction: no effect, no signal at render).
+// - `isPending` (and the context's `isPressed`) may be accessors / signals: they change without re-creating the
+//   button. The pending announcement (RAC `useEffect` + `announce`) runs from a reactive effect created in the
+//   focus handler and disposed on blur (RAC announces only while focused); `announce` loads on first use.
+// - `class` = RAC `className` (default `rv-Button`).
+// - RAC createHideableComponent: renders nothing in the collection build pass (`isHiddenPart`, `../collections/hidden.ts`).
+// - RA usePress `isDisabled` effect: an accessor `isDisabled` turning true mid-press cancels the press; the watcher
+//   starts at press start (pointerdown / keydown), not at render.
+// `render` (RAC DOMRenderProps): given, the attributes object goes to `render(attrs, ButtonRenderProps)` instead of the default `<button>`. Deviations: while pending only the press and the chained owned
+// handlers (`onPointerDown`, `onPointerUp`, `onMouseDown`, `onClick`, `onKeyDown`, `onKeyUp`) are disabled
+// (RAC drops every non-hover/focus `on*` prop) — other forwarded DOM event props keep firing; the progress
+// element joins `aria-labelledby` through `ProgressBarContext` (`{ id: <id>-progress }`, RAC: a second `useId()`).
+import { createContext, createRoot, effect, provide, runWithOwner, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { isSlot } from "@rivetjs/runtime/slot";
+import {} from "../utils/render.js";
+import { createId } from "../utils/id.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool, readAttrs, mergeFocusableContext, focusStateIn, hoverStateOver } from "../utils/data-attrs.jsx";
+import { keyboardKeyDown, keyboardKeyUp } from "../interactions/keyboard.jsx";
+import { read } from "../interactions/utils.js";
+import { contextProps, mergeRefValues, renderProps as resolveRenderProps, resumableContext, } from "../slots/index.jsx";
+import { PressResponderContext } from "../interactions/press.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { mergeProps as mergeLive } from "@rivetjs/runtime/props";
+import { hasLive, isLive, liveAt, liveView } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { ProgressBarContext } from "../progress-bar/context.js";
+import { FocusableContext } from "../focus/focusable.jsx";
+import { buttonClick, buttonKeyDown, buttonMouseDown, buttonPointerDown, buttonPointerUp, buttonProps as ariaButtonProps, isPendingNow, } from "./behaviour.js";
+import { cancelPress, isPressed as isPressedNow } from "./press.js";
+import { isHiddenPart } from "../collections/hidden.js";
+import { slotProbing } from "#server";
+/** RAC `ButtonContext`: props for the Buttons inside a component, optionally per `slot`. */
+export const ButtonContext = resumableContext(createContext({}, { id: "rv-button" }));
+/** Global DOM events Button handles itself (the user's run from its own handler) + the `style` render prop. */
+const OWNED = ["render", "onPointerDown", "onPointerUp", "onMouseDown", "onClick", "onPointerEnter", "onPointerLeave", "onPointerOver", "style"];
+const isFn = (v) => typeof v === "function" && !isSlot(v);
+/** Props read through the live view (bindings / event time) when a prop is live. */
+const LIVE_KEYS = [
+    "isDisabled",
+    "isPending",
+    "isPressed",
+    "excludeFromTabOrder",
+    "allowFocusWhenDisabled",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-details",
+    "aria-expanded",
+    "aria-haspopup",
+    "aria-controls",
+    "aria-pressed",
+    "aria-current",
+    "aria-disabled",
+    "type",
+    "name",
+    "value",
+    "form",
+    "formAction",
+    "formNoValidate",
+    "formEncType",
+    "formMethod",
+    "formTarget",
+];
+// Pending announcement while focused (RAC: `announce` when isPending flips on the focused button).
+const watchers = new WeakMap();
+function watchPending(el, isPending, labelledBy) {
+    if (typeof isPending !== "function")
+        return; // a constant cannot flip while focused
+    // Dropped on blur (a native listener bound for this focus only).
+    if (!watchers.has(el))
+        el.addEventListener("blur", () => unwatchPending(el), { once: true });
+    watchers.get(el)?.();
+    let was = !!read(isPending);
+    // Detached: with `render` the handlers run under the element spread effect's owner, which disposes a root created there on its next run.
+    const root = runWithOwner(null, () => createRoot((dispose) => {
+        effect(() => {
+            const now = !!read(isPending);
+            if (now !== was) {
+                const message = { "aria-labelledby": labelledBy() };
+                void import("../announcer/live-announcer.js").then((m) => m.announce(message, "assertive"));
+            }
+            was = now;
+        });
+        return dispose;
+    }));
+    watchers.set(el, root.value);
+}
+function unwatchPending(el) {
+    watchers.get(el)?.();
+    watchers.delete(el);
+}
+// RA usePress `isDisabled` effect: an accessor `isDisabled` turning true while pressed cancels the press. Rivet
+// watches only from press start (zero cost at render); the watcher ends at the next run after the press is over.
+const disabledWatchers = new WeakMap();
+function watchDisabled(el, press, isDisabled) {
+    if (typeof isDisabled !== "function" || !isPressedNow(el))
+        return;
+    disabledWatchers.get(el)?.();
+    const root = runWithOwner(null, () => createRoot((dispose) => {
+        let first = true;
+        effect(() => {
+            const disabled = !!read(isDisabled);
+            if (first)
+                return void (first = false);
+            untrack(() => {
+                if (disabled && isPressedNow(el))
+                    cancelPress(press, el);
+                if (disabled || !isPressedNow(el))
+                    queueMicrotask(() => unwatchDisabled(el, dispose));
+            });
+        });
+        return dispose;
+    }));
+    disabledWatchers.set(el, root.value);
+}
+function unwatchDisabled(el, dispose) {
+    dispose();
+    if (disabledWatchers.get(el) === dispose)
+        disabledWatchers.delete(el);
+}
+/** Attribute value of a prop that may be an accessor (context-provided `aria-expanded={() => state.isOpen()}`). */
+const val = (v) => {
+    const x = typeof v === "function" ? v() : v;
+    return x == null ? undefined : String(x);
+};
+/** A button: press, hover, focus ring, pending (RAC `Button`). */
+export function Button(inProps) {
+    // RAC createHideableComponent: nothing in the collection build pass (before any context is read).
+    if (slotProbing || isHiddenPart())
+        return null;
+    let [props, ref] = contextProps(inProps, inProps.ref, ButtonContext);
+    // RA usePress: a PressResponder above (DialogTrigger, MenuTrigger, Select…) passes its trigger props, `isPressed`
+    // and its ref through context; they merge under the button's own props (handlers chain, responder first).
+    const responder = useContext(PressResponderContext);
+    if (responder) {
+        const { register, ref: responderRef, ...responderProps } = responder;
+        props = mergeProps(responderProps, props);
+        register?.();
+        ref = mergeRefValues(ref, responderRef);
+    }
+    // RA useButton → useFocusable: FocusableContext (TooltipTrigger) props / handlers / ref reach the <button>.
+    // `isDisabled` is never read here: an accessor / live one goes to the merge as an accessor (gated at event time and
+    // in the attribute binding). A read here would make the Button's enclosing region re-create it on its first change
+    // on a resumed page (Calendar page buttons dropped focus; a live `isDisabled` under a TooltipTrigger threw).
+    const focusable = useContext(FocusableContext);
+    const disabledAt = focusable ? liveAt(props, "isDisabled") : undefined;
+    const [focusableMerged, focusableRef, focusAttrs] = mergeFocusableContext(props, focusable, typeof disabledAt === "function" ? disabledAt : !!disabledAt);
+    props = focusableMerged;
+    ref = mergeRefValues(ref, focusableRef);
+    // Live props (P5): with a live prop the state / ARIA props are read through a narrow view (getters unread, read in
+    // bindings and at event time); without one every value is taken as given (static path unchanged). Handlers, `slot`,
+    // `id`, `elementType` and the render-prop form of `class` / `style` / `children` are read once (identity props).
+    const lv = hasLive(props) ? liveView(props, LIVE_KEYS) : undefined;
+    const { onPointerDown, onPointerUp, onMouseDown, onKeyDown, onKeyUp, onPointerEnter, onPointerLeave, onPointerOver } = props;
+    const isPending = (lv ? liveAt(lv, "isPending") : props.isPending);
+    const ctxPressed = (lv ? liveAt(lv, "isPressed") : props.isPressed);
+    // May be an accessor (Calendar previous / next at min / max): read in bindings and at event time.
+    const isDisabled = (lv ? liveAt(lv, "isDisabled") : props.isDisabled);
+    // Untracked: a live `class` / `style` / `children` read in the body would make a resumed page re-create the Button.
+    const wantsStates = untrack(() => isFn(props.class) || isFn(props.style) || isFn(props.children));
+    const hovered = wantsStates ? signal(false) : undefined;
+    const pressed = wantsStates ? signal(false) : undefined;
+    const focused = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const userPressChange = props.onPressChange;
+    const press = {
+        onPress: props.onPress,
+        onPressStart: props.onPressStart,
+        onPressEnd: props.onPressEnd,
+        onPressUp: props.onPressUp,
+        onPressChange: (isPressed) => {
+            pressed?.set(isPressed);
+            userPressChange?.(isPressed);
+        },
+        onClick: props.onClick,
+        isDisabled,
+        isPressed: ctxPressed,
+        preventFocusOnPress: props.preventFocusOnPress,
+    };
+    const interaction = {
+        isDisabled: () => !!read(isDisabled) || isPendingNow(isPending),
+        onHoverStart: props.onHoverStart,
+        onHoverEnd: props.onHoverEnd,
+        onHoverChange: props.onHoverChange,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onFocusChange: props.onFocusChange,
+        states: wantsStates ? { isHovered: hovered, isFocused: focused, isFocusVisible: focusVisible } : undefined,
+    };
+    const values = {
+        isHovered: () => !!hovered?.(),
+        isPressed: () => (!!read(ctxPressed) || !!pressed?.()) && !isPendingNow(isPending),
+        isFocused: () => !!focused?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        isDisabled: () => !!read(isDisabled),
+        isPending: () => isPendingNow(isPending),
+    };
+    const renderProps = lv
+        ? resolveRenderProps({ values, defaultClassName: "rv-Button" }, liveRenderProps(props))
+        : resolveRenderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Button" });
+    // Untracked: its `isDisabled`-derived fields (`disabled`) are bound below from the accessor; a tracked read
+    // here would re-render the whole Button on the first change of a resumed page (Calendar page buttons).
+    const ariaBag = untrack(() => ariaButtonProps(props));
+    // Live: ARIA / form keys forward to the props (runtime mergeProps: a defined live value wins per read).
+    const aria = lv ? mergeLive(ariaBag, lv) : ariaBag;
+    // RAC: `useId(buttonProps.id)` + `useId()` for the progress bar (Rivet derives it: one id per button).
+    const id = aria.id ?? createId();
+    const progressId = id + "-progress";
+    // Accessor rule: aria-label / aria-labelledby may be accessors (Tree chevron Expand ↔ Collapse): read in bindings.
+    const labelledByProp = (lv ? liveAt(lv, "aria-labelledby") : aria["aria-labelledby"]);
+    const ariaLabelProp = (lv ? liveAt(lv, "aria-label") : aria["aria-label"]);
+    // aria-labelledby wins over aria-label (accname): the pending name is label + progress.
+    const labelledBy = () => {
+        const lb = read(labelledByProp);
+        if (!isPendingNow(isPending))
+            return lb;
+        return lb ? `${lb} ${progressId}` : read(ariaLabelProp) ? `${id} ${progressId}` : undefined;
+    };
+    const announceLabel = () => labelledBy() || id;
+    // `type` is live (a submit ↔ button switch updates in place); a pending submit renders `type="button"`.
+    const typeProp = (lv ? liveAt(aria, "type") : aria.type);
+    const buttonType = () => {
+        const type = read(typeProp);
+        return type === "submit" && isPendingNow(isPending) ? "button" : type;
+    };
+    const ariaDisabled = (lv ? liveAt(aria, "aria-disabled") : aria["aria-disabled"]);
+    const slot = props.slot || undefined;
+    const excludeFromTabOrder = (lv ? liveAt(lv, "excludeFromTabOrder") : props.excludeFromTabOrder);
+    const allowFocusWhenDisabled = (lv ? liveAt(lv, "allowFocusWhenDisabled") : props.allowFocusWhenDisabled);
+    // Read every prop up front: an element with a spread resumes as one binding over all its attributes, and
+    // reading `props` there would capture the whole props object (children included).
+    const dom = globalDOMProps(props, OWNED);
+    // Form attributes the JSX typings lack go through the spread (HTML attribute names are case-insensitive).
+    // A live one is an accessor (undefined renders no attribute); a static one only when given.
+    if (isLive(props, "formEncType"))
+        dom.formenctype = liveAt(aria, "formEncType");
+    else if (aria.formEncType !== undefined)
+        dom.formenctype = aria.formEncType;
+    if (isLive(props, "formMethod"))
+        dom.formmethod = liveAt(aria, "formMethod");
+    else if (aria.formMethod !== undefined)
+        dom.formmethod = aria.formMethod;
+    if (isLive(props, "formTarget"))
+        dom.formtarget = liveAt(aria, "formTarget");
+    else if (aria.formTarget !== undefined)
+        dom.formtarget = aria.formTarget;
+    // `render`: the same attributes as one object (reactive entries are accessors, read by the element spread). Built only when given: the default path below is the compiled `<button>`.
+    if (props.render) {
+        const provideChildren = () => provide(ProgressBarContext, { id: progressId }, () => renderProps.children());
+        const attrs = {
+            ...dom,
+            ...focusAttrs,
+            type: () => buttonType(),
+            id,
+            ref: ref,
+            name: aria.name,
+            value: aria.value,
+            form: aria.form,
+            formAction: aria.formAction,
+            formNoValidate: aria.formNoValidate,
+            disabled: () => read(isDisabled) || undefined,
+            tabindex: () => (read(excludeFromTabOrder) || (read(allowFocusWhenDisabled) && read(isDisabled)) ? -1 : undefined),
+            autoFocus: aria.autoFocus,
+            class: () => renderProps.class(),
+            style: () => renderProps.style(),
+            slot: slot,
+            "aria-label": () => read(ariaLabelProp),
+            "aria-labelledby": () => labelledBy(),
+            "aria-describedby": aria["aria-describedby"],
+            "aria-details": aria["aria-details"],
+            "aria-expanded": () => val(aria["aria-expanded"]),
+            "aria-haspopup": () => val(aria["aria-haspopup"]),
+            "aria-controls": () => val(aria["aria-controls"]),
+            "aria-pressed": () => val(aria["aria-pressed"]),
+            "aria-current": () => val(aria["aria-current"]),
+            "aria-disabled": () => (isPendingNow(isPending) ? "true" : val(read(ariaDisabled))),
+            "data-disabled": () => dataBool(read(isDisabled)),
+            "data-pressed": () => dataBool(values.isPressed()),
+            "data-pending": () => dataBool(isPendingNow(isPending)),
+            onPointerDown: (event) => {
+                buttonPointerDown(event, press, isPending);
+                watchDisabled(event.currentTarget, press, isDisabled);
+                if (!isPendingNow(isPending))
+                    onPointerDown?.(event);
+            },
+            // Unconditional inline arrows (a resumed spread only takes inline functions in an object literal, not a conditional).
+            onPointerUp: (event) => {
+                if (press.onPressUp)
+                    buttonPointerUp(event, press, isPending);
+                if (!isPendingNow(isPending))
+                    onPointerUp?.(event);
+            },
+            onMouseDown: (event) => {
+                if (press.preventFocusOnPress)
+                    buttonMouseDown(event, press);
+                if (!isPendingNow(isPending))
+                    onMouseDown?.(event);
+            },
+            onKeyDown: (event) => {
+                buttonKeyDown(event, press, isPending);
+                watchDisabled(event.currentTarget, press, isDisabled);
+                if (onKeyDown && !isPendingNow(isPending))
+                    keyboardKeyDown({ onKeyDown }, event);
+            },
+            onKeyUp: (event) => {
+                if (onKeyUp && !isPendingNow(isPending))
+                    keyboardKeyUp({ onKeyUp }, event);
+            },
+            onClick: (event) => buttonClick(event, press, isPending),
+            // Hover / focus: delegated (`pointerover` / `focusin`); the leave / blur bind while hovered / focused.
+            onPointerOver: (event) => {
+                // The user's pointerover first: React Aria starts the hover on pointerenter, after it.
+                onPointerOver?.(event);
+                hoverStateOver(interaction, event);
+            },
+            // A user enter / leave binds natively (conditional object literals: resumable inline arrows).
+            ...(onPointerEnter ? { onPointerEnter: (event) => onPointerEnter(event) } : {}),
+            ...(onPointerLeave ? { onPointerLeave: (event) => onPointerLeave(event) } : {}),
+            onFocusIn: (event) => {
+                focusStateIn(interaction, event);
+                if (event.target === event.currentTarget)
+                    watchPending(event.currentTarget, isPending, announceLabel);
+            },
+            children: provideChildren,
+        };
+        return props.render(attrs, values);
+    }
+    return (<button {...dom} {...readAttrs(focusAttrs)} type={buttonType()} id={id} ref={ref} name={aria.name} value={aria.value} form={aria.form} formAction={aria.formAction} formNoValidate={aria.formNoValidate} disabled={read(isDisabled) || undefined} tabIndex={read(excludeFromTabOrder) || (read(allowFocusWhenDisabled) && read(isDisabled)) ? -1 : undefined} autoFocus={aria.autoFocus} class={renderProps.class()} style={renderProps.style()} slot={slot} aria-label={read(ariaLabelProp)} aria-labelledby={labelledBy()} aria-describedby={aria["aria-describedby"]} aria-details={aria["aria-details"]} aria-expanded={val(aria["aria-expanded"])} aria-haspopup={val(aria["aria-haspopup"])} aria-controls={val(aria["aria-controls"])} aria-pressed={val(aria["aria-pressed"])} aria-current={val(aria["aria-current"])} aria-disabled={isPendingNow(isPending) ? "true" : val(read(ariaDisabled))} data-disabled={dataBool(read(isDisabled))} data-pressed={dataBool(values.isPressed())} data-pending={dataBool(isPendingNow(isPending))} onPointerDown={(event) => {
+            buttonPointerDown(event, press, isPending);
+            watchDisabled(event.currentTarget, press, isDisabled);
+            if (!isPendingNow(isPending))
+                onPointerDown?.(event);
+        }} onPointerUp={press.onPressUp || onPointerUp
+            ? (event) => {
+                if (press.onPressUp)
+                    buttonPointerUp(event, press, isPending);
+                if (!isPendingNow(isPending))
+                    onPointerUp?.(event);
+            }
+            : undefined} onMouseDown={press.preventFocusOnPress || onMouseDown
+            ? (event) => {
+                if (press.preventFocusOnPress)
+                    buttonMouseDown(event, press);
+                if (!isPendingNow(isPending))
+                    onMouseDown?.(event);
+            }
+            : undefined} onKeyDown={(event) => {
+            buttonKeyDown(event, press, isPending);
+            watchDisabled(event.currentTarget, press, isDisabled);
+            if (onKeyDown && !isPendingNow(isPending))
+                keyboardKeyDown({ onKeyDown }, event);
+        }} onKeyUp={onKeyUp ? (event) => (isPendingNow(isPending) ? undefined : keyboardKeyUp({ onKeyUp }, event)) : undefined} onClick={(event) => buttonClick(event, press, isPending)} 
+    // Hover / focus: delegated (`pointerover` / `focusin`, no listener per button); the leave / blur bind on
+    // the element while hovered / focused (data-attrs.tsx). A user `onPointerEnter` / `onPointerLeave` binds natively.
+    onPointerOver={(event) => {
+            // The user's pointerover first: React Aria starts the hover on pointerenter, after it.
+            onPointerOver?.(event);
+            hoverStateOver(interaction, event);
+        }} onPointerEnter={onPointerEnter ? (event) => onPointerEnter(event) : undefined} onPointerLeave={onPointerLeave ? (event) => onPointerLeave(event) : undefined} onFocusIn={(event) => {
+            focusStateIn(interaction, event);
+            if (event.target === event.currentTarget)
+                watchPending(event.currentTarget, isPending, announceLabel);
+        }}>
+      {provide(ProgressBarContext, { id: progressId }, () => renderProps.children())}
+    </button>);
+}

package/button/press.d.ts

@@ -0,0 +1,25 @@
+import { type PressProps } from "../interactions/press.jsx";
+export type { PointerType, PressEvent, PressEvents, PressProps } from "../interactions/press.jsx";
+export { isVirtualClick, isVirtualPointerEvent } from "../platform/index.js";
+/** Press options of the explicit-handler style (react-aria `PressProps`). */
+export type PressOptions = PressProps;
+/** keydown */
+export declare const pressKeyDown: (o: PressOptions, e: KeyboardEvent) => void;
+/** click (virtual clicks and the end of pointer / native keyboard presses) */
+export declare const pressClick: (o: PressOptions, e: MouseEvent) => void;
+/** pointerdown */
+export declare const pressPointerDown: (o: PressOptions, e: PointerEvent) => void;
+/** mousedown: `preventFocusOnPress` keeps focus where it is (react-aria `preventFocus`). */
+export declare const pressMouseDown: (o: PressOptions, e: MouseEvent) => void;
+/** pointerup on the element (press up without a press start, e.g. dragged in). */
+export declare const pressPointerUp: (o: PressOptions, e: PointerEvent) => void;
+/** pointerenter: re-press when the active pointer comes back. */
+export declare const pressPointerEnter: (o: PressOptions, e: PointerEvent) => void;
+/** pointerleave: un-press (and cancel with `shouldCancelOnPointerExit`). */
+export declare const pressPointerLeave: (o: PressOptions, e: PointerEvent) => void;
+/** dragstart cancels the press (bound by `pressPointerDown` on the element while pressed; for explicit wiring). */
+export declare const pressDragStart: (o: PressOptions, e: DragEvent) => void;
+/** Cancel an active press of `el` (react-aria: `isDisabled` while pressed). */
+export declare const cancelPress: (o: PressOptions, el: Element) => void;
+/** Whether `el` is pressed right now. */
+export declare const isPressed: (el: Element) => boolean;

package/button/press.js

@@ -0,0 +1,54 @@
+// Press handlers for elements that wire explicit `onX` attributes (Button, ToggleButton): a thin
+// layer over THE usePress port in `../interactions/press.tsx` (react-aria `usePress`, Apache-2.0,
+// © Adobe). Press state is per element (module WeakMap, transient, never serialized) and the
+// pressed render state is written as `data-pressed="true"` on the element instead of a signal.
+// All press semantics (keyboard / pointer / virtual clicks, resumability deviations) live in the
+// shared implementation; this file only adapts `(options, event)` calls to a `Press` instance.
+import { cancelPress as cancelPressInstance, createPressState, pressClick as click, pressDragStart as dragStart, pressKeyDown as keyDown, pressMouseDown as mouseDown, pressPointerDown as pointerDown, pressPointerEnter as pointerEnter, pressPointerLeave as pointerLeave, pressPointerUp as pointerUp, PRESS_TRACK_DRAG, } from "../interactions/press.jsx";
+import { read } from "../interactions/utils.js";
+export { isVirtualClick, isVirtualPointerEvent } from "../platform/index.js";
+const states = new WeakMap();
+const stateOf = (el) => {
+    let s = states.get(el);
+    if (!s)
+        states.set(el, (s = createPressState()));
+    return s;
+};
+const setPressed = (el, pressed) => {
+    if (pressed)
+        el.setAttribute("data-pressed", "true");
+    else
+        el.removeAttribute("data-pressed");
+};
+/** The `Press` instance of `el` for `options` (options are read per event: build them in the handler). */
+function pressOf(el, options) {
+    // A controlled `isPressed` (RAC: MenuTrigger / DialogTrigger keep the trigger pressed while open) holds the attribute.
+    // `dragstart` cancels a pointer press: bound on the element while pressed only (no listener at render).
+    return {
+        props: options,
+        state: stateOf(el),
+        pressed: { set: (value) => setPressed(el, value || !!read(options.isPressed)) },
+        track: PRESS_TRACK_DRAG,
+    };
+}
+const target = (e) => e.currentTarget;
+/** keydown */
+export const pressKeyDown = (o, e) => keyDown(pressOf(target(e), o), e);
+/** click (virtual clicks and the end of pointer / native keyboard presses) */
+export const pressClick = (o, e) => click(pressOf(target(e), o), e);
+/** pointerdown */
+export const pressPointerDown = (o, e) => pointerDown(pressOf(target(e), o), e);
+/** mousedown: `preventFocusOnPress` keeps focus where it is (react-aria `preventFocus`). */
+export const pressMouseDown = (o, e) => mouseDown(pressOf(target(e), o), e);
+/** pointerup on the element (press up without a press start, e.g. dragged in). */
+export const pressPointerUp = (o, e) => pointerUp(pressOf(target(e), o), e);
+/** pointerenter: re-press when the active pointer comes back. */
+export const pressPointerEnter = (o, e) => pointerEnter(pressOf(target(e), o), e);
+/** pointerleave: un-press (and cancel with `shouldCancelOnPointerExit`). */
+export const pressPointerLeave = (o, e) => pointerLeave(pressOf(target(e), o), e);
+/** dragstart cancels the press (bound by `pressPointerDown` on the element while pressed; for explicit wiring). */
+export const pressDragStart = (o, e) => dragStart(pressOf(target(e), o), e);
+/** Cancel an active press of `el` (react-aria: `isDisabled` while pressed). */
+export const cancelPress = (o, el) => cancelPressInstance(pressOf(el, o));
+/** Whether `el` is pressed right now. */
+export const isPressed = (el) => states.get(el)?.didFirePressStart ?? false;