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

package/preview-trigger/behaviour.jsx

@@ -0,0 +1,258 @@
+// Ported from @react-aria/tooltip (usePreviewTrigger.ts; react-aria/src/tooltip/usePreviewTrigger.ts), Apache-2.0, © Adobe.
+// A preview trigger displays a popover on hover, focus, or long press. Unlike a tooltip, the popover
+// may contain interactive content (React Aria `usePreviewTrigger` → `previewTriggerProps`).
+// Rivet:
+// - the hook's handlers are free functions over the serializable `TooltipTriggerState` (resumable:
+//   call them from inline arrows); the hook's refs (`ignoreFocus`, `shouldFocusOnOpen`,
+//   `pointerInSafeArea`) live in a browser-side WeakMap keyed by the state; `isFocusVisible` is read
+//   from the global modality at event time (RA keeps it in sync with `useFocusVisibleListener`).
+// - RA's effects become `attachPreviewTrigger(state, options)`: call while open (from the popover's
+//   client effect) — the safe area (`../overlay/safe-area.ts`) and the focus move after a long press.
+// - RA's `useEvent(triggerRef, 'react-aria-focus-scope-restore')` → `previewTriggerFocusScopeRestore`,
+//   the trigger's `on:rv-focus-scope-restore` handler (cdk FocusScope's restore event).
+// - `useHover` → `previewTriggerPointerEnter` / `Leave` (useHover semantics: mouse / pen only,
+//   emulated mouse after touch ignored); the touch long press is `previewTriggerTouchStart` (delegated
+//   RA useLongPress `{ pointerType: "touch" }`, threshold 500 ms) calling `previewTriggerLongPress`.
+// - `aria-expanded` / `aria-controls` / `aria-describedby` are accessors.
+// Deviation: `isDisabled` also stops keyboard focus from opening (upstream gates only hover / long press).
+import { untrack } from "@rivetjs/reactivity";
+import { focusWithoutScrolling, getActiveElement, getOwnerDocument, nodeContains, read as readValue } from "../interactions/utils.js";
+import { getInteractionModality, isFocusVisible, setInteractionModality, setupGlobalFocusEvents } from "../interactions/focus-visible.jsx";
+import { hoverPointerEnter, hoverPointerLeave } from "../interactions/hover.jsx";
+import { getFocusableTreeWalker } from "../focus/index.js";
+import { safeArea } from "../overlay/safe-area.js";
+import { closeTooltip, openTooltip } from "../state/tooltip.js";
+const refsByState = new WeakMap();
+const refsOf = (state) => {
+    let r = refsByState.get(state);
+    if (!r)
+        refsByState.set(state, (r = { ignoreFocus: false, shouldFocusOnOpen: false, longPress: null, pointerInSafeArea: false, hover: null }));
+    return r;
+};
+const read = (source) => (typeof source === "function" ? untrack(source) : source) ?? null;
+/** Cancel a pending close and keep the preview open. */
+export function previewTriggerKeepOpen(state) {
+    openTooltip(state, true);
+}
+/**
+ * Close the preview unless something is still keeping it open: the pointer is within the safe area, or
+ * focus is within the trigger or popover. During focus transitions the active element may briefly be
+ * the body; the popover's focusin handler re-opens in that case (focus moving in).
+ */
+export function previewTriggerCheckClose(state, options) {
+    const r = refsOf(state);
+    if (r.pointerInSafeArea)
+        return;
+    const trigger = read(options.triggerRef), popover = read(options.popoverRef);
+    const active = trigger ? getActiveElement(getOwnerDocument(trigger)) : null;
+    if (isFocusVisible() && ((trigger && nodeContains(trigger, active)) || (popover && nodeContains(popover, active))))
+        return;
+    closeTooltip(state);
+}
+/** useHover `onHoverStart`. */
+export function previewTriggerHoverStart(state) {
+    // Match useTooltipTrigger: only treat as hovered when the modality is actually a pointer.
+    if (getInteractionModality() === "pointer") {
+        refsOf(state).pointerInSafeArea = true;
+        openTooltip(state);
+    }
+}
+/** useHover `onHoverEnd`. */
+export function previewTriggerHoverEnd(state) {
+    // Before the preview opens, cancel a pending warmup if the pointer leaves the trigger. Once
+    // open, the safe-area polygon governs closing as the pointer moves to the popover.
+    if (!untrack(state.isOpen)) {
+        refsOf(state).pointerInSafeArea = false;
+        closeTooltip(state);
+    }
+}
+function hoverOf(state, isDisabled) {
+    const r = refsOf(state);
+    if (!r.hover)
+        r.hover = {
+            props: { isDisabled, onHoverStart: () => previewTriggerHoverStart(state), onHoverEnd: () => previewTriggerHoverEnd(state) },
+            state: { isHovered: false, pointerType: "", target: null, globals: [] },
+            hovered: { set: () => undefined },
+        };
+    return r.hover;
+}
+/** The trigger's `onPointerEnter` (useHover). */
+export function previewTriggerPointerEnter(e, props, state) {
+    // Resumed page: modality tracking installs on first use; the hover's own pointer event is the evidence.
+    setupGlobalFocusEvents(e.currentTarget);
+    if (getInteractionModality() === null && e.pointerType !== "touch")
+        setInteractionModality("pointer");
+    installTriggerListeners(e.currentTarget, props, state);
+    hoverPointerEnter(hoverOf(state, readValue(props.isDisabled)), e);
+}
+/** The trigger's `onPointerLeave` (useHover). */
+export function previewTriggerPointerLeave(e, props, state) {
+    hoverPointerLeave(hoverOf(state, readValue(props.isDisabled)), e);
+}
+/** The trigger's `onFocus`. */
+export function previewTriggerFocus(e, options, state) {
+    installTriggerListeners(e.currentTarget, options, state);
+    // Rivet: a disabled preview trigger never opens on focus either (RA usePreviewTrigger passes
+    // `isDisabled` only to useHover / useLongPress; useTooltipTrigger gates focus through useFocusable).
+    if (readValue(options.isDisabled))
+        return;
+    const r = refsOf(state);
+    if (r.ignoreFocus) {
+        r.ignoreFocus = false;
+        return;
+    }
+    const popover = read(options.popoverRef);
+    // Prevent browser focusing the link on long press when focus is already in the popover.
+    if (untrack(state.isOpen) && popover && e.relatedTarget === popover) {
+        focusWithoutScrolling(popover);
+        return;
+    }
+    if (isFocusVisible()) {
+        // Open after the warmup delay on keyboard focus, not immediately like a tooltip. This way
+        // tabbing quickly through the page doesn't open previews (and add their tab stops); the
+        // delay ensures the user is actually interested in the link's details.
+        openTooltip(state);
+    }
+}
+/** The trigger's `onBlur`. */
+export function previewTriggerBlur(_e, options, state) {
+    previewTriggerCheckClose(state, options);
+}
+/** The trigger's `on:rv-focus-scope-restore` (RA `react-aria-focus-scope-restore`): restore focus without reopening. */
+export function previewTriggerFocusScopeRestore(e, state) {
+    e.preventDefault();
+    refsOf(state).ignoreFocus = true;
+    e.currentTarget?.focus();
+}
+/**
+ * The trigger's `onKeyDown`: move focus from the link into the preview when the user presses Tab while
+ * it is open (tabbing back out of the popover is handled by the popover's own FocusScope); Escape closes.
+ */
+export function previewTriggerKeyDown(e, options, state) {
+    const popover = read(options.popoverRef);
+    if (e.key === "Tab" && !e.shiftKey && untrack(state.isOpen) && popover) {
+        const walker = getFocusableTreeWalker(popover, { tabbable: true });
+        const first = walker.nextNode();
+        if (first) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    else if (e.key === "Escape") {
+        e.preventDefault();
+        closeTooltip(state, true);
+    }
+}
+/** useLongPress `onLongPress` (touch): open the preview and move focus into it once it opens. */
+export function previewTriggerLongPress(state) {
+    refsOf(state).shouldFocusOnOpen = true;
+    openTooltip(state, true);
+}
+const LONG_PRESS_THRESHOLD = 500;
+/**
+ * Rivet (delegated useLongPress `{ pointerType: "touch" }`): the wrapper's `onPointerDown` — a touch held
+ * for 500 ms opens the preview (no click / context menu after it), released earlier it does nothing.
+ */
+export function previewTriggerTouchStart(e, props, state) {
+    if (e.pointerType !== "touch" || readValue(props.isDisabled))
+        return;
+    const r = refsOf(state);
+    const target = e.target;
+    const win = target.ownerDocument;
+    const cancel = () => {
+        if (r.longPress)
+            clearTimeout(r.longPress);
+        r.longPress = null;
+        win.removeEventListener("pointerup", cancel, true);
+        win.removeEventListener("pointercancel", cancel, true);
+    };
+    cancel();
+    win.addEventListener("pointerup", cancel, true);
+    win.addEventListener("pointercancel", cancel, true);
+    r.longPress = setTimeout(() => {
+        cancel();
+        // No default click action (e.g. following a link) and no context menu after a long press.
+        const prevent = (event) => event.preventDefault();
+        target.addEventListener("click", prevent, { once: true });
+        target.addEventListener("contextmenu", prevent, { once: true });
+        setTimeout(() => {
+            target.removeEventListener("click", prevent);
+            target.removeEventListener("contextmenu", prevent);
+        }, 600);
+        previewTriggerLongPress(state);
+    }, LONG_PRESS_THRESHOLD);
+}
+const installed = new WeakSet();
+/**
+ * Rivet: listeners RA puts on the trigger element (`useEvent(triggerRef, 'react-aria-focus-scope-restore')`,
+ * useLongPress's pointerdown), installed once at its first pointerenter (touch fires it before
+ * pointerdown) or focus — nothing at load on a resumed page.
+ */
+function installTriggerListeners(trigger, props, state) {
+    if (!trigger || installed.has(trigger))
+        return;
+    installed.add(trigger);
+    trigger.addEventListener("rv-focus-scope-restore", (e) => previewTriggerFocusScopeRestore(e, state));
+    trigger.addEventListener("pointerdown", (e) => previewTriggerTouchStart(e, props, state));
+}
+/**
+ * RA's effects while open (call from the popover's client effect; returns the release): the safe area
+ * connecting the link and the popover keeps the preview open while the pointer moves between them (even
+ * diagonally, any placement, even with closeDelay 0); after a long press, focus moves to the popover.
+ */
+export function attachPreviewTrigger(state, options) {
+    const r = refsOf(state);
+    const popover = read(options.popoverRef);
+    if (popover && r.shouldFocusOnOpen) {
+        // When opened via long press, move focus to the popover itself so touch screen readers move
+        // their virtual cursor into the preview.
+        r.shouldFocusOnOpen = false;
+        focusWithoutScrolling(popover);
+    }
+    const release = safeArea({
+        triggerRef: options.triggerRef,
+        overlayRef: options.popoverRef,
+        isDisabled: readValue(options.isDisabled),
+        onSafeAreaChange: (isInSafeArea) => {
+            if (isInSafeArea === r.pointerInSafeArea)
+                return;
+            r.pointerInSafeArea = isInSafeArea;
+            if (isInSafeArea)
+                previewTriggerKeepOpen(state);
+            else
+                previewTriggerCheckClose(state, options);
+        },
+    });
+    return () => {
+        release();
+    };
+}
+/**
+ * Provides the behavior and accessibility implementation for a preview trigger (React Aria
+ * `usePreviewTrigger`). The bag's closures are created in this `.tsx` module, so resumed bindings may
+ * capture them. Long press: wire
+ * `previewTriggerTouchStart` on the trigger's `onPointerDown`.
+ */
+export function previewTriggerProps(options, state) {
+    const popoverId = options.popoverId;
+    return {
+        triggerProps: {
+            onFocus: (e) => previewTriggerFocus(e, options, state),
+            onBlur: (e) => previewTriggerBlur(e, options, state),
+            onKeyDown: (e) => previewTriggerKeyDown(e, options, state),
+            onPointerEnter: (e) => previewTriggerPointerEnter(e, options, state),
+            onPointerLeave: (e) => previewTriggerPointerLeave(e, options, state),
+            "on:rv-focus-scope-restore": (e) => previewTriggerFocusScopeRestore(e, state),
+            "aria-haspopup": "dialog",
+            "aria-expanded": () => state.isOpen(),
+            "aria-controls": () => (state.isOpen() ? popoverId : undefined),
+            "aria-describedby": () => (state.isOpen() ? popoverId : undefined),
+            style: { WebkitTouchCallout: "none", WebkitUserDrag: "none" },
+        },
+        popoverProps: {
+            id: popoverId,
+            onFocusWithin: () => previewTriggerKeepOpen(state),
+            onBlurWithin: () => previewTriggerCheckClose(state, options),
+        },
+    };
+}

package/preview-trigger/index.d.ts

@@ -0,0 +1,12 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type TooltipTriggerProps } from "../state/tooltip.js";
+export interface PreviewTriggerProps extends Omit<TooltipTriggerProps, "trigger" | "shouldCloseOnPress"> {
+    /** The delay time for the preview to show up (ms). @default 600 */
+    delay?: number;
+    /** The delay time for the preview to close (ms). @default 200 */
+    closeDelay?: number;
+    /** The trigger (e.g. a Link) and its `<Popover>`. */
+    children?: Content;
+}
+/** A PreviewTrigger displays a popover preview on hover, focus or long press of its trigger. */
+export declare function PreviewTrigger(props: PreviewTriggerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/preview-trigger/index.jsx

@@ -0,0 +1,82 @@
+// Ported from React Aria Components (PreviewTrigger.tsx), Apache-2.0, © Adobe.
+// A PreviewTrigger displays a popover with a preview of a link's destination (or any rich content) on
+// hover, keyboard focus, or touch long press: `<PreviewTrigger><Link/><Popover>…</Popover></PreviewTrigger>`.
+// Unlike a tooltip, the popover may contain interactive content (Tab from the trigger moves into it).
+// Rivet:
+// - state: `createTooltipTriggerState({ delay: 600, closeDelay: 200 })` (shared warmup with tooltips),
+//   provided as `OverlayTriggerStateContext`; the Popover gets `PopoverContext` `{ trigger:
+//   "PreviewTrigger", triggerRef, ref, isNonModal: true, shouldSkipAnimation, id, onFocusWithin,
+//   onBlurWithin }` (RAC).
+// - the trigger props reach the child (a cdk Link / Button, or a custom element in `<Focusable>`) through
+//   FocusableProvider (RAC); `aria-haspopup="dialog"` is server-rendered, `aria-expanded` /
+//   `aria-controls` / `aria-describedby` are set on the trigger while the preview is open; the touch long
+//   press and the FocusScope restore listener are installed on the trigger at its first pointerenter /
+//   focus (delegated useLongPress / RA `useEvent(triggerRef, …)`).
+// - RA's effects (safe area, focus after long press, ARIA) run from a client effect in an own binding
+//   site (`span[data-rv-overlay-anchor]`) only while open — nothing at load.
+// Not yet supported: the long press accessibility description ("Long press to open preview").
+import { untrack } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { FocusableProvider } from "../focus/focusable.jsx";
+import { Provider } from "../slots/index.jsx";
+import { idSignal } from "../utils/id.js";
+import { OverlayTriggerStateContext, PopoverContext } from "../overlay/contexts.js";
+import { createTooltipTriggerState } from "../state/tooltip.js";
+import { attachPreviewTrigger, previewTriggerBlur, previewTriggerCheckClose, previewTriggerFocus, previewTriggerKeepOpen, previewTriggerKeyDown, previewTriggerPointerEnter, previewTriggerPointerLeave, } from "./behaviour.jsx";
+import { liveOptions } from "../utils/live.jsx";
+/** A PreviewTrigger displays a popover preview on hover, focus or long press of its trigger. */
+export function PreviewTrigger(props) {
+    const state = createTooltipTriggerState({
+        ...liveOptions(props, [], ["isOpen"]),
+        delay: props.delay ?? 600,
+        closeDelay: props.closeDelay ?? 200,
+    });
+    const triggerRef = createRef();
+    const popoverRef = createRef();
+    // RA mergeIds: a user `id` on the Popover replaces the generated one (the signal travels as `idRef`).
+    const popoverIdRef = idSignal();
+    const popoverId = untrack(popoverIdRef);
+    const isDisabled = props.isDisabled;
+    const options = {
+        isDisabled,
+        triggerRef: () => triggerRef(),
+        popoverRef: () => popoverRef(),
+        popoverId,
+    };
+    const children = props.children;
+    const popover = {
+        trigger: "PreviewTrigger",
+        triggerRef,
+        ref: popoverRef,
+        isNonModal: true,
+        shouldSkipAnimation: () => state.shouldSkipAnimation(),
+        id: popoverId,
+        idRef: popoverIdRef,
+        onFocusWithin: () => previewTriggerKeepOpen(state),
+        onBlurWithin: () => previewTriggerCheckClose(state, options),
+    };
+    return (<>
+      <Provider values={[
+            [OverlayTriggerStateContext, state],
+            [PopoverContext, popover],
+        ]}>
+        {() => (<FocusableProvider ref={triggerRef} aria-haspopup="dialog" aria-expanded={() => state.isOpen()} aria-controls={() => (state.isOpen() ? popoverIdRef() : undefined)} aria-describedby={() => (state.isOpen() ? popoverIdRef() : undefined)} onPointerEnter={(event) => previewTriggerPointerEnter(event, options, state)} onPointerLeave={(event) => previewTriggerPointerLeave(event, options, state)} onFocus={(event) => previewTriggerFocus(event, options, state)} onBlur={(event) => previewTriggerBlur(event, options, state)} onKeyDown={(event) => previewTriggerKeyDown(event, options, state)}>
+            {children}
+          </FocusableProvider>)}
+      </Provider>
+      <span data-rv-overlay-anchor="" style={{ display: "contents" }}>
+        <Show when={() => state.isOpen()}>{() => <PreviewEffects state={state} options={options}/>}</Show>
+      </span>
+    </>);
+}
+/** RA usePreviewTrigger's effects while open (safe area, focus after long press, the trigger's ARIA). */
+function PreviewEffects(props) {
+    const { state, options } = props;
+    clientEffect(() => {
+        // Wait for the popover (RA: effects after the popover rendered).
+        if (!options.popoverRef || !(typeof options.popoverRef === "function" ? options.popoverRef() : options.popoverRef))
+            return;
+        return attachPreviewTrigger(state, options);
+    });
+    return null;
+}

package/progress-bar/behaviour.d.ts

@@ -0,0 +1,77 @@
+import { type NumberFormatOptions } from "../number/NumberFormatter.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+export interface ProgressBarBaseProps {
+    /**
+     * The current value (controlled; a number or an accessor).
+     *
+     * @default 0
+     */
+    value?: MaybeAccessor<number | undefined>;
+    /**
+     * The smallest value allowed for the input.
+     *
+     * @default 0
+     */
+    minValue?: MaybeAccessor<number | undefined>;
+    /**
+     * The largest value allowed for the input.
+     *
+     * @default 100
+     */
+    maxValue?: MaybeAccessor<number | undefined>;
+    /** The content to display as the label (here: whether a visible label renders). */
+    label?: unknown;
+    /**
+     * The display format of the value label (live: a value or an accessor, read inside `aria-valuetext`).
+     *
+     * @default { style: 'percent' }
+     */
+    formatOptions?: MaybeAccessor<NumberFormatOptions | undefined>;
+    /** The content to display as the value's label (e.g. 1 of 4). */
+    valueLabel?: MaybeAccessor<string | undefined>;
+}
+export interface AriaProgressBarBaseProps extends ProgressBarBaseProps {
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+export interface ProgressBarProps extends ProgressBarBaseProps {
+    /** Whether presentation is indeterminate when progress isn't known. */
+    isIndeterminate?: MaybeAccessor<boolean | undefined>;
+}
+export interface AriaProgressBarProps extends ProgressBarProps, AriaProgressBarBaseProps {
+}
+export interface ProgressBarAttrs {
+    id: string;
+    role: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    /** Accessor: the clamped value, `undefined` while indeterminate. */
+    "aria-valuenow": () => number | undefined;
+    "aria-valuemin": () => number;
+    "aria-valuemax": () => number;
+    /** Accessor: `valueLabel` or the formatted value, `undefined` while indeterminate. */
+    "aria-valuetext": () => string | undefined;
+}
+export interface ProgressBarAria {
+    /** Props for the progress bar container element. */
+    progressBarProps: ProgressBarAttrs;
+    /** Props for the progress bar's visual label element (if any). */
+    labelProps: {
+        id?: string;
+    };
+}
+/**
+ * Provides the accessibility implementation for a progress bar component.
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+export declare function progressBarProps(props: AriaProgressBarProps, locale?: string): ProgressBarAria;
+/** RAC ProgressBar / Meter render value: the value as a percentage (0–100) of the range; 0 for an empty range. */
+export declare function percentageOf(value?: number, minValue?: number, maxValue?: number): number;
+/** `percentageOf` over `MaybeAccessor` props (tracked when they are accessors). */
+export declare function percentageOfProps(props: ProgressBarBaseProps): number;

package/progress-bar/behaviour.jsx

@@ -0,0 +1,75 @@
+// Ported from react-aria `useProgressBar` (packages/react-aria/src/progress/useProgressBar.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - `progressBarProps(props, locale?)` (RA `useProgressBar`) returns `{ progressBarProps, labelProps }`; call it
+//   while rendering (it reads the locale context and creates ids, like the hook).
+// - value props are `MaybeAccessor`s (a number or `() => number`), and the value-dependent attributes of the bag
+//   (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-valuetext`) are accessors: read them inside bindings
+//   so a changing value updates the attributes only (accessor rule). `.tsx`: the accessors are resumable closures.
+// - The visual label (`label`) only decides whether a label id is created (RA `useLabel` with
+//   `labelElementType: 'span'`); RAC passes `createSlot`'s "a Label rendered" flag.
+// - `useNumberFormatter` → `NumberFormatter` (`@rivetjs/cdk/number`, cached Intl formatter per locale + options),
+//   created inside the `aria-valuetext` accessor so the accessor only captures plain data (locale, options).
+import { clamp } from "../utils/index.js";
+import { NumberFormatter } from "../number/NumberFormatter.js";
+import { useLocale } from "../i18n/index.js";
+import { labelAria } from "../label/behaviour.js";
+import { read } from "../interactions/utils.js";
+/** The resolved range of `props`: `[value (clamped), minValue, maxValue]`. */
+function rangeOf(props) {
+    const minValue = read(props.minValue) ?? 0;
+    const maxValue = read(props.maxValue) ?? 100;
+    return [clamp(read(props.value) ?? 0, minValue, maxValue), minValue, maxValue];
+}
+/**
+ * Provides the accessibility implementation for a progress bar component.
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+export function progressBarProps(props, locale = useLocale().locale) {
+    const { labelProps, fieldProps } = labelAria({
+        id: props.id,
+        label: props.label,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        // Progress bar is not an HTML input element so it shouldn't be labeled by a <label> element.
+        labelElementType: "span",
+    });
+    const isIndeterminate = () => !!read(props.isIndeterminate);
+    const valueText = () => {
+        if (isIndeterminate())
+            return undefined;
+        const valueLabel = read(props.valueLabel);
+        if (valueLabel)
+            return valueLabel;
+        const [value, minValue, maxValue] = rangeOf(props);
+        const range = maxValue - minValue;
+        const percentage = range === 0 ? 0 : (value - minValue) / range;
+        const formatOptions = read(props.formatOptions) ?? { style: "percent" };
+        // Created per read (the Intl formatter is cached per locale + options): a captured NumberFormatter
+        // instance would not serialize into the resumable accessor.
+        return new NumberFormatter(locale, formatOptions).format(formatOptions.style === "percent" ? percentage : value);
+    };
+    const barProps = {
+        ...fieldProps,
+        role: "progressbar",
+        "aria-valuenow": () => (isIndeterminate() ? undefined : rangeOf(props)[0]),
+        "aria-valuemin": () => read(props.minValue) ?? 0,
+        "aria-valuemax": () => read(props.maxValue) ?? 100,
+        "aria-valuetext": valueText,
+    };
+    if (props["aria-describedby"])
+        barProps["aria-describedby"] = props["aria-describedby"];
+    if (props["aria-details"])
+        barProps["aria-details"] = props["aria-details"];
+    return { progressBarProps: barProps, labelProps: { id: labelProps.id } };
+}
+/** RAC ProgressBar / Meter render value: the value as a percentage (0–100) of the range; 0 for an empty range. */
+export function percentageOf(value = 0, minValue = 0, maxValue = 100) {
+    value = clamp(value, minValue, maxValue);
+    const range = maxValue - minValue;
+    return range === 0 ? 0 : ((value - minValue) / range) * 100;
+}
+/** `percentageOf` over `MaybeAccessor` props (tracked when they are accessors). */
+export function percentageOfProps(props) {
+    return percentageOf(read(props.value) ?? 0, read(props.minValue) ?? 0, read(props.maxValue) ?? 100);
+}

package/progress-bar/context.d.ts

@@ -0,0 +1,4 @@
+import { type ContextValue } from "../slots/index.jsx";
+import type { ProgressBarProps } from "./index.jsx";
+/** RAC `ProgressBarContext` (Button provides `{ id }` to its pending ProgressBar). */
+export declare const ProgressBarContext: import("@rivetjs/reactivity").Context<ContextValue<ProgressBarProps, HTMLDivElement>>;

package/progress-bar/context.js

@@ -0,0 +1,7 @@
+// RAC `ProgressBarContext` (react-aria-components ProgressBar.tsx), Apache-2.0, © Adobe. Its own module so a Button
+// (which provides `{ id }` to its pending ProgressBar) does not load the ProgressBar part, its behaviour and the
+// number formatter on pages without a ProgressBar.
+import { createContext } from "@rivetjs/reactivity";
+import { resumableContext } from "../slots/index.jsx";
+/** RAC `ProgressBarContext` (Button provides `{ id }` to its pending ProgressBar). */
+export const ProgressBarContext = resumableContext(createContext(null, { id: "rv-progress-bar" }));

package/progress-bar/index.d.ts

@@ -0,0 +1,38 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type RefValue, type ClassNameOrFunction, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { ProgressBarContext } from "./context.js";
+import { type AriaProgressBarProps } from "./behaviour.jsx";
+export { progressBarProps, percentageOf, type AriaProgressBarProps, type ProgressBarAria } from "./behaviour.jsx";
+export interface ProgressBarRenderProps {
+    /** The value as a percentage between the minimum and maximum (undefined while indeterminate). */
+    percentage: () => number | undefined;
+    /**
+     * A formatted version of the value.
+     *
+     * @selector [aria-valuetext]
+     */
+    valueText: () => string | undefined;
+    /**
+     * Whether the progress bar is indeterminate.
+     *
+     * @selector :not([aria-valuenow])
+     */
+    isIndeterminate: () => boolean;
+}
+export interface ProgressBarProps extends Omit<AriaProgressBarProps, "label">, RenderProps<ProgressBarRenderProps>, DOMRenderProps<"div", ProgressBarRenderProps>, 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-ProgressBar'
+     */
+    class?: ClassNameOrFunction<ProgressBarRenderProps>;
+}
+/** RAC `ProgressBarContext`: `./context.ts` (Button imports it from there). */
+export { ProgressBarContext };
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+export declare function ProgressBar(props: ProgressBarProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/progress-bar/index.jsx

@@ -0,0 +1,90 @@
+// Ported from react-aria-components `ProgressBar` (packages/react-aria-components/src/ProgressBar.tsx), Apache-2.0, © Adobe.
+// Progress bars show either determinate or indeterminate progress of an operation over time.
+// 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` / `isIndeterminate` 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 { 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 { contextProps, createSlot, renderPropsOf, } from "../slots/index.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { read } from "../interactions/utils.js";
+import { ProgressBarContext } from "./context.js";
+import { percentageOfProps, progressBarProps } from "./behaviour.jsx";
+export { progressBarProps, percentageOf } from "./behaviour.jsx";
+const OWNED = ["style", "render"];
+/** RAC `ProgressBarContext`: `./context.ts` (Button imports it from there). */
+export { ProgressBarContext };
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ */
+export function ProgressBar(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(() => progressBar(props));
+}
+const LIVE_KEYS = ["value", "minValue", "maxValue", "valueLabel", "isIndeterminate", "formatOptions"];
+function progressBar(props) {
+    const [ctxMerged, ref] = contextProps(props, props.ref, ProgressBarContext);
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, LIVE_KEYS) : ctxMerged;
+    const indeterminate = merged.isIndeterminate;
+    const isIndeterminate = () => !!read(indeterminate);
+    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 { progressBarProps: barProps, labelProps } = progressBarProps({ ...merged, children: undefined, label: initialLabel });
+    const labelledBy = barProps["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 = () => (isIndeterminate() ? undefined : percentageOfProps(range));
+    const valueText = barProps["aria-valuetext"];
+    const values = { percentage, valueText, isIndeterminate };
+    const rp = renderPropsOf(merged, { defaultClassName: "rv-ProgressBar", values });
+    const dom = globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const { id, role } = barProps;
+    const ariaLabel = barProps["aria-label"];
+    const describedBy = barProps["aria-describedby"];
+    const details = barProps["aria-details"];
+    const valueNow = barProps["aria-valuenow"];
+    const valueMin = barProps["aria-valuemin"];
+    const valueMax = barProps["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>);
+}