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

package/toast/index.d.ts

@@ -0,0 +1,94 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ContextValue, type RefValue, type RenderProps, type StyleRenderProps, type ClassNameOrFunction } from "../slots/index.jsx";
+import { ToastQueue, type QueuedToast, type ToastState, type ToastOptions, type ToastStateProps } from "../state/toast.js";
+import { type AriaToastProps, type AriaToastRegionProps } from "./behaviour.jsx";
+export { toastProps, toastRegionProps, type AriaToastProps, type AriaToastRegionProps, type ToastAria } from "./behaviour.jsx";
+export type { QueuedToast, ToastOptions, ToastState, ToastStateProps };
+/** RAC `ToastStateContext`: the region's toast state (browser-only value). */
+declare const ToastStateContext: import("@rivetjs/reactivity").Context<ToastState<any> | null>;
+export interface ToastRegionRenderProps<T> {
+    /** A list of all currently visible toasts. */
+    visibleToasts: () => QueuedToast<T>[];
+    /**
+     * Whether the toast region is currently hovered with a mouse.
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+    /**
+     * Whether the toast region is currently focused.
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the toast region is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+}
+export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>>, DOMRenderProps<"div", ToastRegionRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     * @default 'rv-ToastRegion'
+     */
+    class?: ClassNameOrFunction<ToastRegionRenderProps<T>>;
+    /** The queue of toasts to display. */
+    queue: ToastQueue<T>;
+    /** A function to render each toast, or children containing a `<ToastList>`. */
+    children: Content | ((renderProps: {
+        toast: QueuedToast<T>;
+    }) => Content);
+}
+/** A ToastRegion displays one or more toast notifications. */
+declare function ToastRegion<T>(props: ToastRegionProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ToastListProps<T> extends Omit<StyleRenderProps<ToastRegionRenderProps<T>>, "class">, DOMRenderProps<"ol", ToastRegionRenderProps<T>>, GlobalDOMAttributes<HTMLOListElement> {
+    /** @default 'rv-ToastList' */
+    class?: ClassNameOrFunction<ToastRegionRenderProps<T>>;
+    /** A function to render each toast. */
+    children: (renderProps: {
+        toast: QueuedToast<T>;
+    }) => Content;
+}
+/** RAC `ToastList`: an `<ol>` of the visible toasts (each in an `<li style="display:contents">`). */
+declare function ToastList<T>(props: ToastListProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ToastRenderProps<T> {
+    /** The toast object to display. */
+    toast: QueuedToast<T>;
+    /**
+     * Whether the toast is currently focused.
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the toast is keyboard focused.
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+}
+export interface ToastProps<T> extends Omit<AriaToastProps<T>, "locale">, RenderProps<ToastRenderProps<T>>, DOMRenderProps<"div", ToastRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     * @default 'rv-Toast'
+     */
+    class?: ClassNameOrFunction<ToastRenderProps<T>>;
+    id?: string;
+}
+/**
+ * A Toast displays a brief, temporary notification of actions, errors, or other events in an
+ * application.
+ */
+declare function Toast<T>(props: ToastProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ToastContentProps extends DOMRenderProps<"div", undefined>, GlobalDOMAttributes<HTMLDivElement> {
+    id?: string;
+    class?: string;
+    style?: Record<string, string | number | undefined>;
+    role?: string;
+    ref?: RefValue<HTMLDivElement>;
+    children?: Content;
+}
+/** RAC `ToastContentContext` (Toast provides the alert's props). */
+export declare const ToastContentContext: import("@rivetjs/reactivity").Context<ContextValue<ToastContentProps, HTMLDivElement>>;
+/** ToastContent wraps the main content of a toast notification. */
+export declare function ToastContent(props: ToastContentProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export { Toast as UNSTABLE_Toast, ToastList as UNSTABLE_ToastList, ToastRegion as UNSTABLE_ToastRegion, ToastContent as UNSTABLE_ToastContent, ToastStateContext as UNSTABLE_ToastStateContext, ToastQueue as UNSTABLE_ToastQueue, };

package/toast/index.jsx

@@ -0,0 +1,256 @@
+// Ported from react-aria-components (packages/react-aria-components/src/Toast.tsx: ToastRegion, ToastList,
+// Toast, ToastContent, ToastStateContext, ToastContentContext), Apache-2.0, © Adobe.
+// Rivet:
+// - The region renders nothing on the server (RA: `useIsSSR` → no portal) and only while toasts are
+//   visible, in the shared div overlay layer (`<Portal>`: the nearest PortalProvider's container, else
+//   `document.body`). Browser-rendered: subscribes to `queue` at once. Resumed page: the region listens
+//   for the queue's `rv-toast-queue` document event (a resumable `clientEvent`, chunk fetched on the
+//   first toast, `preload: "interaction"`), connects to the queue named like its own (`queue.name`) and
+//   renders the toasts. Nothing of the region loads before the first toast.
+// - The queue (a class instance) is never captured by a resumable closure: bindings capture its
+//   `name` and a signal of the visible toasts; the browser-created content finds the queue through a
+//   module WeakMap keyed by that signal.
+// - Render props are accessors (`class={({ isFocused }) => …}`); RAC `className` → `class`; `data-*`
+//   state values are `"true"`. Toast children may be a function of `{ toast, isFocused, isFocusVisible }`.
+// - `<Button slot="close">` gets the toast's close button props (`aria-label`, `onPress`) through
+//   ButtonContext; `<Text slot="title|description">` its ids through TextContext.
+// Deviations: `render` (RAC DOMRenderProps) on ToastRegion / ToastList / Toast / ToastContent (their element is replaced; the portal host stays); the region sits in a `<div data-rivet-portal>` host.
+import { createContext, onCleanup, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Provider as ContextProvider, Show, clientEvent, ref as createRef } from "@rivetjs/runtime/dom";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { PortalContext, Portal } from "../portal/index.jsx";
+import { useLocale } from "../i18n/index.js";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { slotChildren } from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { hasLive, isLive, liveClass, liveOmit, liveView } from "../utils/live.jsx";
+import { liveRenderProps, renderPropsOf } from "../slots/index.jsx";
+import { DEFAULT_SLOT, Provider, resumableContext, contextProps, renderProps, } from "../slots/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { ButtonContext } from "../button/index.jsx";
+import { ToastQueue } from "../state/toast.js";
+import { toastProps as ariaToastProps, toastRegionProps } from "./behaviour.jsx";
+export { toastProps, toastRegionProps } from "./behaviour.jsx";
+/** Props handled by the parts themselves (render-prop `style`), not forwarded by `globalDOMProps`. */
+const OWNED = ["style"];
+/** RAC `ToastStateContext`: the region's toast state (browser-only value). */
+const ToastStateContext = resumableContext(createContext(null, { id: "rv-toast-state" }));
+// Visible-toasts signal → the queue it mirrors (browser only, never serialized).
+const regionQueues = new WeakMap();
+/** Mirror `queue` into `toasts` (once per signal); unsubscribes with the calling owner. */
+function connectToastRegion(queue, toasts) {
+    if (regionQueues.has(toasts))
+        return;
+    regionQueues.set(toasts, queue);
+    const unsubscribe = queue.subscribe(() => toasts.set(queue.visibleToasts));
+    onCleanup(() => {
+        unsubscribe();
+        regionQueues.delete(toasts);
+    });
+    toasts.set(queue.visibleToasts);
+}
+/** The region's ToastState over the mirrored signal. */
+function regionState(toasts) {
+    const queue = () => regionQueues.get(toasts);
+    return {
+        visibleToasts: toasts,
+        add: (content, options) => queue().add(content, options),
+        close: (key) => queue()?.close(key),
+        pauseAll: () => queue()?.pauseAll(),
+        resumeAll: () => queue()?.resumeAll(),
+    };
+}
+/** A ToastRegion displays one or more toast notifications. */
+function ToastRegion(props) {
+    const queue = props.queue;
+    const name = queue.name;
+    const toasts = signal([]);
+    if (typeof document !== "undefined")
+        connectToastRegion(queue, toasts);
+    // Resumed page: the queue wakes the server-rendered region with its first toast.
+    clientEvent(document, "rv-toast-queue", (event) => {
+        const detail = event.detail;
+        if (detail && detail.name === name)
+            connectToastRegion(detail, toasts);
+    }, { preload: "interaction" });
+    const mount = useContext(PortalContext);
+    const content = {
+        dom: globalDOMProps(props, OWNED),
+        ariaLabel: props["aria-label"],
+        ariaLabelledby: props["aria-labelledby"],
+        ariaDescribedby: props["aria-describedby"],
+        className: props.class,
+        style: props.style,
+        children: props.children,
+        render: props.render,
+        // Live props (P5): a live class / style through a narrow live view (read in the region's bindings).
+        live: hasLive(props) ? liveRenderProps(props, ["class", "style"]) : undefined,
+    };
+    // Rivet: an empty `display: contents` anchor gives the Show a server-rendered branch region to resume
+    // (a component-root Show leaves nothing to wake on a resumed page).
+    return (<span data-rv-toast-anchor="" style={{ display: "contents" }}>
+      <Show when={() => toasts().length > 0}>
+        {() => (<Portal mount={mount}>
+            <ToastRegionContent toasts={toasts} content={content}/>
+          </Portal>)}
+      </Show>
+    </span>);
+}
+function ToastRegionContent(props) {
+    const { toasts, content } = props;
+    const state = regionState(toasts);
+    const element = createRef();
+    const { direction, locale } = useLocale();
+    const regionProps = toastRegionProps({ "aria-label": content.ariaLabel, "aria-labelledby": content.ariaLabelledby, "aria-describedby": content.ariaDescribedby, locale }, state, element);
+    const { focusProps, isFocused, isFocusVisible } = useFocusRing();
+    const { hoverProps: regionHover, isHovered } = hoverProps({}, content.dom);
+    // No function in the `rp` initializer: spread sites capture `rp.class` / `rp.style` (per-key live views).
+    const rp = renderProps({
+        class: content.className,
+        style: content.style,
+        defaultClassName: "rv-ToastRegion",
+        values: { visibleToasts: toasts, isHovered, isFocused, isFocusVisible },
+    }, content.live);
+    const merged = mergeProps(content.dom, regionProps, focusProps, regionHover);
+    const { role, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...rest } = merged;
+    const label = ariaLabel;
+    const children = content.children;
+    const renderToast = typeof children === "function" && !isSlot(children) ? children : null;
+    if (content.render) {
+        const attrs = {
+            ...rest,
+            ref: element,
+            role: role,
+            tabindex: tabIndex,
+            "aria-label": () => (typeof label === "function" ? label() : label),
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            dir: direction,
+            "data-hovered": () => dataBool(isHovered()),
+            "data-focused": () => dataBool(isFocused()),
+            "data-focus-visible": () => dataBool(isFocusVisible()),
+            children: () => (renderToast ? <ToastList style={{ display: "contents" }}>{renderToast}</ToastList> : renderSlot(children)),
+        };
+        return (<ContextProvider token={ToastStateContext} value={state}>
+        {content.render(attrs, { visibleToasts: toasts, isHovered, isFocused, isFocusVisible })}
+      </ContextProvider>);
+    }
+    return (<ContextProvider token={ToastStateContext} value={state}>
+      <div {...rest} ref={element} role={role} tabIndex={tabIndex} aria-label={typeof label === "function" ? label() : label} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} class={rp.class()} style={rp.style()} dir={direction} data-hovered={dataBool(isHovered())} data-focused={dataBool(isFocused())} data-focus-visible={dataBool(isFocusVisible())}>
+        {renderToast ? <ToastList style={{ display: "contents" }}>{renderToast}</ToastList> : renderSlot(children)}
+      </div>
+    </ContextProvider>);
+}
+/** RAC `ToastList`: an `<ol>` of the visible toasts (each in an `<li style="display:contents">`). */
+function ToastList(props) {
+    const state = useContext(ToastStateContext);
+    const { hoverProps: listHover, isHovered } = hoverProps({}, props);
+    // Options hoisted: no function in the `rp` initializer (spread sites capture `rp.class` / `rp.style`: per-key live views).
+    const rpOptions = {
+        defaultClassName: "rv-ToastList",
+        values: { visibleToasts: state.visibleToasts, isFocused: () => false, isFocusVisible: () => false, isHovered },
+    };
+    const rp = renderPropsOf(props, rpOptions, ["class", "style"]);
+    const dom = mergeProps(globalDOMProps(props, OWNED), listHover);
+    const render = props.children;
+    if (props.render) {
+        const attrs = {
+            ...dom,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            children: () => (<For each={state.visibleToasts} by={(toast) => toast.key}>
+          {(toast) => <li style={{ display: "contents" }}>{render({ toast: toast() })}</li>}
+        </For>),
+        };
+        return props.render(attrs, { visibleToasts: state.visibleToasts, isFocused: () => false, isFocusVisible: () => false, isHovered });
+    }
+    return (<ol {...dom} class={rp.class()} style={rp.style()}>
+      <For each={state.visibleToasts} by={(toast) => toast.key}>
+        {(toast) => <li style={{ display: "contents" }}>{render({ toast: toast() })}</li>}
+      </For>
+    </ol>);
+}
+/**
+ * A Toast displays a brief, temporary notification of actions, errors, or other events in an
+ * application.
+ */
+function Toast(props) {
+    const state = useContext(ToastStateContext);
+    const { locale } = useLocale();
+    const aria = ariaToastProps({ ...props, locale }, state);
+    const { focusProps, isFocused, isFocusVisible } = useFocusRing();
+    const toast = props.toast;
+    const rp = renderPropsOf(props, { defaultClassName: "rv-Toast", values: { toast, isFocused, isFocusVisible } });
+    const merged = mergeProps(globalDOMProps(props, OWNED), aria.toastProps, focusProps);
+    const { "aria-describedby": describedBy, ...rest } = merged;
+    const titleProps = aria.titleProps;
+    const descriptionProps = aria.descriptionProps;
+    const contentProps = aria.contentProps;
+    const closeButtonProps = aria.closeButtonProps;
+    if (props.render) {
+        const attrs = {
+            ...rest,
+            "aria-describedby": () => (typeof describedBy === "function" ? describedBy() : describedBy),
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-focused": () => dataBool(isFocused()),
+            "data-focus-visible": () => dataBool(isFocusVisible()),
+            children: () => (<Provider values={[
+                    [ToastContentContext, contentProps],
+                    [TextContext, { slots: { [DEFAULT_SLOT]: {}, title: titleProps, description: descriptionProps } }],
+                    [ButtonContext, { slots: { [DEFAULT_SLOT]: {}, close: closeButtonProps } }],
+                ]}>
+          {rp.children()}
+        </Provider>),
+        };
+        return props.render(attrs, { toast, isFocused, isFocusVisible });
+    }
+    return (<div {...rest} aria-describedby={typeof describedBy === "function" ? describedBy() : describedBy} class={rp.class()} style={rp.style()} data-focused={dataBool(isFocused())} data-focus-visible={dataBool(isFocusVisible())}>
+      <Provider values={[
+            [ToastContentContext, contentProps],
+            [TextContext, { slots: { [DEFAULT_SLOT]: {}, title: titleProps, description: descriptionProps } }],
+            [ButtonContext, { slots: { [DEFAULT_SLOT]: {}, close: closeButtonProps } }],
+        ]}>
+        {rp.children()}
+      </Provider>
+    </div>);
+}
+/** RAC `ToastContentContext` (Toast provides the alert's props). */
+export const ToastContentContext = resumableContext(createContext({}, { id: "rv-toast-content" }));
+/** ToastContent wraps the main content of a toast notification. */
+export function ToastContent(props) {
+    const [merged, ref] = contextProps(props, props.ref, ToastContentContext);
+    // Live props (P5): a live `class` / children go through the spread / a binding (rest forwarded unread); body untracked.
+    if (hasLive(merged))
+        return untrack(() => liveToastContent(merged, ref));
+    const { children, "aria-hidden": hidden, class: className, render, ...rest } = merged;
+    if (render)
+        return render({
+            ...rest,
+            ref: ref,
+            class: className ?? "rv-ToastContent",
+            "aria-hidden": () => (typeof hidden === "function" ? hidden() : hidden),
+            children: slotChildren(children),
+        }, undefined);
+    return (<div {...rest} ref={ref} class={className ?? "rv-ToastContent"} aria-hidden={typeof hidden === "function" ? hidden() : hidden}>
+      {children}
+    </div>);
+}
+function liveToastContent(merged, ref) {
+    const rest = liveOmit(merged, ["children", "class", "render", "ref"]);
+    const view = liveView(merged, ["children"]);
+    const render = merged.render;
+    // `class` is an accessor the spread binds.
+    const attrs = { ...rest, class: liveClass(merged, "rv-ToastContent") };
+    if (render)
+        return render({ ...attrs, ref: ref, children: () => renderSlot(view.children) }, undefined);
+    return (<div {...attrs} ref={ref}>
+      {() => renderSlot(view.children)}
+    </div>);
+}
+export { Toast as UNSTABLE_Toast, ToastList as UNSTABLE_ToastList, ToastRegion as UNSTABLE_ToastRegion, ToastContent as UNSTABLE_ToastContent, ToastStateContext as UNSTABLE_ToastStateContext, ToastQueue as UNSTABLE_ToastQueue, };

package/toast/intl.d.ts

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

package/toast/intl.js

@@ -0,0 +1,36 @@
+export const strings = {
+    "ar-AE": { close: "إغلاق", notifications: "{count, plural, one {# إشعار} other {# إشعارات}}." },
+    "bg-BG": { close: "Затвори", notifications: "{count, plural, one {# известие} other {# известия}}." },
+    "cs-CZ": { close: "Zavřít", notifications: "{count, plural, one {# oznámení} other {# oznámení}}." },
+    "da-DK": { close: "Luk", notifications: "{count, plural, one {# besked} other {# beskeder}}." },
+    "de-DE": { close: "Schließen", notifications: "{count, plural, one {# Benachrichtigung} other {# Benachrichtigungen}}." },
+    "el-GR": { close: "Κλείσιμο", notifications: "{count, plural, one {# ειδοποίηση} other {# ειδοποιήσεις}}." },
+    "en-US": { close: "Close", notifications: "{count, plural, one {# notification} other {# notifications}}." },
+    "es-ES": { close: "Cerrar", notifications: "{count, plural, one {# notificación} other {# notificaciones}}." },
+    "et-EE": { close: "Sule", notifications: "{count, plural, one {# teatis} other {# teatist}}." },
+    "fi-FI": { close: "Sulje", notifications: "{count, plural, one {# ilmoitus} other {# ilmoitusta}}." },
+    "fr-FR": { close: "Fermer", notifications: "{count, plural, one {# notification} other {# notifications}}." },
+    "he-IL": { close: "סגור", notifications: "{count, plural, one {# התראה} other {# התראות}}." },
+    "hr-HR": { close: "Zatvori", notifications: "{count, plural, one {# obavijest} other {# obavijesti}}." },
+    "hu-HU": { close: "Bezárás", notifications: "{count, plural, one {# értesítés} other {# értesítés}}." },
+    "it-IT": { close: "Chiudi", notifications: "{count, plural, one {# notifica} other {# notifiche}}." },
+    "ja-JP": { close: "閉じる", notifications: "{count, plural, one {# 個の通知} other {# 個の通知}}。" },
+    "ko-KR": { close: "닫기", notifications: "{count, plural, one {#개 알림} other {#개 알림}}." },
+    "lt-LT": { close: "Uždaryti", notifications: "{count, plural, one {# pranešimas} other {# pranešimai}}." },
+    "lv-LV": { close: "Aizvērt", notifications: "{count, plural, one {# paziņojums} other {# paziņojumi}}." },
+    "nb-NO": { close: "Lukk", notifications: "{count, plural, one {# varsling} other {# varsler}}." },
+    "nl-NL": { close: "Sluiten", notifications: "{count, plural, one {# melding} other {# meldingen}}." },
+    "pl-PL": { close: "Zamknij", notifications: "{count, plural, one {# powiadomienie} few {# powiadomienia} many {# powiadomień} other {# powiadomienia}}." },
+    "pt-BR": { close: "Fechar", notifications: "{count, plural, one {# notificação} other {# notificações}}." },
+    "pt-PT": { close: "Fechar", notifications: "{count, plural, one {# notificação} other {# notificações}}." },
+    "ro-RO": { close: "Închideţi", notifications: "{count, plural, one {# notificare} other {# notificări}}." },
+    "ru-RU": { close: "Закрыть", notifications: "{count, plural, one {# уведомление} other {# уведомления}}." },
+    "sk-SK": { close: "Zatvoriť", notifications: "{count, plural, one {# oznámenie} few {# oznámenia} other {# oznámení}}." },
+    "sl-SI": { close: "Zapri", notifications: "{count, plural, one {# obvestilo} two {# obvestili} few {# obvestila} other {# obvestil}}." },
+    "sr-SP": { close: "Zatvori", notifications: "{count, plural, one {# obaveštenje} other {# obaveštenja}}." },
+    "sv-SE": { close: "Stäng", notifications: "{count, plural, one {# meddelande} other {# meddelanden}}." },
+    "tr-TR": { close: "Kapat", notifications: "{count, plural, one {# bildirim} other {# bildirim}}." },
+    "uk-UA": { close: "Закрити", notifications: "{count, plural, one {# сповіщення} other {# сповіщення}}." },
+    "zh-CN": { close: "关闭", notifications: "{count, plural, one {# 个通知} other {# 个通知}}。" },
+    "zh-TW": { close: "關閉", notifications: "{count, plural, one {# 個通知} other {# 個通知}}。" },
+};

package/toggle-button/behaviour.d.ts

@@ -0,0 +1,15 @@
+import { type ToggleState } from "../state/toggle.js";
+import { type PressOptions } from "../button/press.js";
+/** Attributes for custom markup (`<button {...toggleButtonAttrs(s)} onClick={() => toggleButtonPress(s)}>`). */
+export declare function toggleButtonAttrs(state: ToggleState): Record<string, unknown>;
+/** Press handler body: toggle (RA chains `state.toggle` before `onPress`). */
+export declare function toggleButtonPress(state: ToggleState): void;
+/**
+ * Press options of a toggle button: `onPress` toggles first, then calls the caller's `onPress`.
+ * Build it inside handlers (functions created in .ts modules are not resumable).
+ */
+export declare function toggleButtonPressOptions(state: ToggleState, options: PressOptions): PressOptions;
+export declare const toggleButtonPointerDown: (state: ToggleState, options: PressOptions, e: PointerEvent) => void;
+export declare const toggleButtonKeyDown: (state: ToggleState, options: PressOptions, e: KeyboardEvent) => void;
+export declare const toggleButtonClick: (state: ToggleState, options: PressOptions, e: MouseEvent) => void;
+export declare const isToggleSelected: (state: ToggleState) => boolean;

package/toggle-button/behaviour.js

@@ -0,0 +1,37 @@
+// Ported from react-aria `useToggleButton` (packages/react-aria/src/button/useToggleButton.ts), Apache-2.0, © Adobe.
+// ToggleButton behaviour: a native <button type="button"> with aria-pressed; presses toggle the state.
+import { untrack } from "@rivetjs/reactivity";
+import { toggle } from "../state/toggle.js";
+import { pressClick, pressKeyDown, pressPointerDown } from "../button/press.js";
+/** Attributes for custom markup (`<button {...toggleButtonAttrs(s)} onClick={() => toggleButtonPress(s)}>`). */
+export function toggleButtonAttrs(state) {
+    return {
+        type: "button",
+        "aria-pressed": () => (state.selected() ? "true" : "false"),
+        "data-selected": () => (state.selected() ? "true" : undefined),
+        disabled: state.disabled || undefined,
+    };
+}
+/** Press handler body: toggle (RA chains `state.toggle` before `onPress`). */
+export function toggleButtonPress(state) {
+    toggle(state);
+}
+/**
+ * Press options of a toggle button: `onPress` toggles first, then calls the caller's `onPress`.
+ * Build it inside handlers (functions created in .ts modules are not resumable).
+ */
+export function toggleButtonPressOptions(state, options) {
+    const { onPress } = options;
+    return {
+        ...options,
+        isDisabled: state.disabled,
+        onPress: (event) => {
+            toggle(state);
+            onPress?.(event);
+        },
+    };
+}
+export const toggleButtonPointerDown = (state, options, e) => pressPointerDown(toggleButtonPressOptions(state, options), e);
+export const toggleButtonKeyDown = (state, options, e) => pressKeyDown(toggleButtonPressOptions(state, options), e);
+export const toggleButtonClick = (state, options, e) => pressClick(toggleButtonPressOptions(state, options), e);
+export const isToggleSelected = (state) => untrack(state.selected);

package/toggle-button/index.d.ts

@@ -0,0 +1,59 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type ToggleState } from "../state/toggle.js";
+import type { PressEvent } from "../button/press.js";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+import type { Key } from "../collections/types.js";
+import { type DOMRenderProps } from "../utils/render.js";
+import type { HoverEvents } from "../utils/types.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+/** Render props of `ToggleButton` (RAC `ToggleButtonRenderProps`; accessors, `@selector` = the matching attribute). */
+export interface ToggleButtonRenderProps {
+    /** 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;
+    /** Selected. @selector [data-selected] */
+    isSelected: () => boolean;
+    /** State of the toggle button. */
+    state: ToggleState;
+}
+export interface ToggleButtonProps extends HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps>, DOMRenderProps<"button", ToggleButtonRenderProps>, Omit<GlobalDOMAttributes<HTMLButtonElement>, "style"> {
+    /** Selection (RA `isSelected`): a value (controlled; a live value-form prop updates in place) or a two-way Signal. */
+    isSelected?: boolean | Signal<boolean>;
+    defaultSelected?: boolean;
+    onChange?: (isSelected: boolean) => void;
+    onPress?: (event: PressEvent) => void;
+    onPressStart?: (event: PressEvent) => void;
+    onPressEnd?: (event: PressEvent) => void;
+    onPressChange?: (isPressed: boolean) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    isDisabled?: boolean;
+    /** RA `excludeFromTabOrder` (Rivet: also an accessor, read in the `tabindex` binding — a roving tab stop). */
+    excludeFromTabOrder?: boolean | (() => boolean);
+    autoFocus?: boolean;
+    /**
+     * Inside a `ToggleButtonGroup`: the item's key in the group's `selectedKeys` (not rendered as the DOM id).
+     * Standalone: the element's id (`String(id)`).
+     */
+    id?: Key;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-controls"?: string;
+    "aria-expanded"?: boolean;
+    "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    ref?: RefValue<HTMLButtonElement>;
+}
+/** RAC `ToggleButtonContext`: props for the ToggleButtons inside a component, optionally per `slot`. */
+export declare const ToggleButtonContext: import("@rivetjs/reactivity").Context<ContextValue<ToggleButtonProps, HTMLButtonElement>>;
+export declare function ToggleButton(inProps: ToggleButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;