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

package/toggle-button/index.jsx

@@ -0,0 +1,206 @@
+// Ported from react-aria-components `ToggleButton` + react-aria `useToggleButton`
+// (packages/react-aria-components/src/ToggleButton.tsx, packages/react-aria/src/button/useToggleButton.ts), Apache-2.0, © Adobe.
+// <button type="button" aria-pressed>. Style the pressed state with `[aria-pressed="true"]` /
+// `[data-selected]` (Tailwind `aria-pressed:`); `data-pressed` while pressed (press.ts).
+// Rivet:
+// - `ToggleButtonContext` (RAC): props for the ToggleButtons inside a component, optionally per `slot` (`contextProps`),
+//   resumable token `rv-toggle-button`.
+// - render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`; RAC `ToggleButtonRenderProps`:
+//   `isHovered` / `isPressed` / `isFocused` / `isFocusVisible` / `isDisabled` / `isSelected` + `state`); hover / focus / press
+//   state signals exist only when a `class` / `style` / `children` function asks for them. `data-hovered` / `data-focused` /
+//   `data-focus-visible` are written by the handlers on the element (`../utils/data-attrs.tsx`; zero cost before interaction),
+//   `data-pressed` by `../button/press.ts`.
+// - `render` (RAC DOMRenderProps): given, the attributes object goes to `render(attrs, ToggleButtonRenderProps)` instead of
+//   the default `<button>` (early return before the compiled element).
+// - `excludeFromTabOrder` may be an accessor (a roving tab stop: `@rivetjs/ui/segment` keeps only the selected item tabbable).
+// - `class` = RAC `className` (default `rv-ToggleButton`). `isSelected` = a two-way `Signal<boolean>` (`controllable`).
+// - In a `ToggleButtonGroup`, disabled = own `isDisabled` || the group's live `isDisabled` (`isGroupDisabled(groupState)`),
+//   read where it is used (`isGroupDisabled`: bindings, render prop, hover switch, press handlers), so a live group `isDisabled` disables / enables
+//   the buttons in place (React re-renders them with the new group state).
+import { createContext, provide, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { read } from "../interactions/utils.js";
+import { hasLive, liveAt, liveOptions, liveView } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { isSlot } from "@rivetjs/runtime/slot";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { createToggleState } from "../state/toggle.js";
+import { toggleButtonClick, toggleButtonKeyDown, toggleButtonPointerDown } from "./behaviour.js";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { isGroupDisabled, isKeySelected, setSelected as setGroupSelected } from "../state/toggle-group.js";
+import { ToggleGroupStateContext } from "../toggle-button-group/context.js";
+import { toggleButtonGroupItemClick, toggleButtonGroupItemKeyDown, toggleButtonGroupItemPointerDown } from "../toggle-button-group/item.jsx";
+import { focusStateIn, hoverStateOver } from "../utils/data-attrs.jsx";
+import {} from "../utils/render.js";
+import { contextProps, renderProps as resolveRenderProps, resumableContext, } from "../slots/index.jsx";
+/** Global DOM events ToggleButton handles itself (the user's run from its own handler) + the `style` render prop. */
+const OWNED = ["render", "onPointerDown", "onClick", "onPointerEnter", "onPointerLeave", "onPointerOver", "style"];
+const isFn = (v) => typeof v === "function" && !isSlot(v);
+const str = (v) => (v === undefined ? undefined : String(v));
+/** Props read through the live view when one is live (live props P5). */
+const LIVE_KEYS = [
+    "isDisabled",
+    "excludeFromTabOrder",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-controls",
+    "aria-expanded",
+    "aria-haspopup",
+];
+/** RAC `ToggleButtonContext`: props for the ToggleButtons inside a component, optionally per `slot`. */
+export const ToggleButtonContext = resumableContext(createContext({}, { id: "rv-toggle-button" }));
+export function ToggleButton(inProps) {
+    const [props, ref] = contextProps(inProps, inProps.ref, ToggleButtonContext);
+    // RAC: inside a ToggleButtonGroup (and with an `id`) the group state owns the selection (useToggleButtonGroupItem).
+    const groupState = useContext(ToggleGroupStateContext);
+    const groupId = props.id;
+    const inGroup = groupState != null && groupId != null;
+    // In a group the state follows the group's selection (RAC `useToggleState({ isSelected: selectedKeys.has(id), onChange: setSelected })`).
+    const state = inGroup
+        ? createToggleState({ isSelected: () => isKeySelected(groupState, groupId), onChange: (isSelected) => setGroupSelected(groupState, groupId, isSelected) })
+        : createToggleState(liveOptions(props, ["isDisabled"], ["isSelected"]));
+    // Live props (P5): state / ARIA props through a narrow view when one is live (read in bindings / at event time).
+    const lv = hasLive(props) ? liveView(props, LIVE_KEYS) : undefined;
+    const ownIsDisabled = (lv ? liveAt(lv, "isDisabled") : props.isDisabled);
+    // Untracked: a live class / style / children read in the body would re-create the button on a resumed page.
+    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,
+        onPressChange: (isPressed) => {
+            pressed?.set(isPressed);
+            userPressChange?.(isPressed);
+        },
+    };
+    const { onKeyDown, onKeyUp, onPointerDown, onClick, onPointerEnter, onPointerLeave, onPointerOver } = props;
+    const dom = globalDOMProps(props, OWNED);
+    const idProp = inGroup || groupId == null ? undefined : String(groupId);
+    const radio = inGroup && groupState.selectionMode === "single";
+    const ownDisabled = state.disabled;
+    const stateDisabled = state.isDisabled;
+    // In a group: read at use (the group's `isDisabled` is live); standalone: the state's value (its accessor when live).
+    const isDisabled = () => (inGroup ? !!(read(ownIsDisabled) || isGroupDisabled(groupState)) : stateDisabled ? !!stateDisabled() : ownDisabled);
+    const isSelected = () => (inGroup ? isKeySelected(groupState, groupId) : state.selected());
+    const interaction = {
+        isDisabled: () => isDisabled(),
+        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: () => !!pressed?.(),
+        isFocused: () => !!focused?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        isDisabled: () => isDisabled(),
+        isSelected,
+        state,
+    };
+    const renderProps = lv
+        ? resolveRenderProps({ values, defaultClassName: "rv-ToggleButton" }, liveRenderProps(props))
+        : resolveRenderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-ToggleButton" });
+    const slot = props.slot || undefined;
+    const autoFocus = props.autoFocus;
+    const excludeFromTabOrder = lv ? liveAt(lv, "excludeFromTabOrder") : props.excludeFromTabOrder;
+    // Live: an accessor read in the attribute binding; static: the value.
+    const ariaLabel = (lv ? liveAt(lv, "aria-label") : props["aria-label"]);
+    const ariaLabelledby = (lv ? liveAt(lv, "aria-labelledby") : props["aria-labelledby"]);
+    const ariaDescribedby = (lv ? liveAt(lv, "aria-describedby") : props["aria-describedby"]);
+    const ariaControls = (lv ? liveAt(lv, "aria-controls") : props["aria-controls"]);
+    const ariaExpanded = (lv ? liveAt(lv, "aria-expanded") : props["aria-expanded"]);
+    const ariaHaspopup = (lv ? liveAt(lv, "aria-haspopup") : props["aria-haspopup"]);
+    // `render`: the same attributes as one object (reactive entries are accessors, read by the element spread). Built only when given.
+    if (props.render)
+        return props.render({
+            ...dom,
+            type: "button",
+            id: idProp,
+            ref: ref,
+            class: () => renderProps.class(),
+            style: () => renderProps.style(),
+            slot,
+            autoFocus,
+            tabindex: () => ((typeof excludeFromTabOrder === "function" ? excludeFromTabOrder() : excludeFromTabOrder) ? -1 : undefined),
+            "aria-label": () => read(ariaLabel),
+            "aria-labelledby": () => read(ariaLabelledby),
+            "aria-describedby": () => read(ariaDescribedby),
+            "aria-controls": () => read(ariaControls),
+            "aria-expanded": () => str(read(ariaExpanded)),
+            "aria-haspopup": () => str(read(ariaHaspopup)),
+            role: radio ? "radio" : undefined,
+            "aria-checked": () => (radio ? (isSelected() ? "true" : "false") : undefined),
+            "aria-pressed": () => (radio ? undefined : isSelected() ? "true" : "false"),
+            "data-selected": () => (isSelected() ? "true" : undefined),
+            "data-disabled": () => isDisabled() || undefined,
+            disabled: () => isDisabled() || undefined,
+            // Unconditional inline arrows (a resumed spread only takes inline functions in an object literal, not a conditional).
+            onPointerDown: (event) => {
+                if (inGroup)
+                    toggleButtonGroupItemPointerDown(event, { ...press, isDisabled: !!read(ownIsDisabled), id: groupId }, groupState);
+                else
+                    toggleButtonPointerDown(state, press, event);
+                onPointerDown?.(event);
+            },
+            onKeyDown: (event) => {
+                if (inGroup)
+                    toggleButtonGroupItemKeyDown(event, { ...press, isDisabled: !!read(ownIsDisabled), id: groupId }, groupState);
+                else
+                    toggleButtonKeyDown(state, press, event);
+                onKeyDown?.(event);
+            },
+            onKeyUp: (event) => onKeyUp?.(event),
+            onClick: (event) => {
+                if (inGroup)
+                    toggleButtonGroupItemClick(event, { ...press, isDisabled: !!read(ownIsDisabled), id: groupId }, groupState);
+                else
+                    toggleButtonClick(state, press, event);
+                onClick?.(event);
+            },
+            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),
+            children: () => provide(SelectionIndicatorContext, { isSelected }, () => renderProps.children()),
+        }, values);
+    return (<button {...dom} type="button" id={idProp} ref={ref} class={renderProps.class()} style={renderProps.style()} slot={slot} autoFocus={autoFocus} tabIndex={(typeof excludeFromTabOrder === "function" ? excludeFromTabOrder() : excludeFromTabOrder) ? -1 : undefined} aria-label={read(ariaLabel)} aria-labelledby={read(ariaLabelledby)} aria-describedby={read(ariaDescribedby)} aria-controls={read(ariaControls)} aria-expanded={str(read(ariaExpanded))} aria-haspopup={str(read(ariaHaspopup))} role={radio ? "radio" : undefined} aria-checked={radio ? (isSelected() ? "true" : "false") : undefined} aria-pressed={radio ? undefined : isSelected() ? "true" : "false"} data-selected={isSelected() ? "true" : undefined} data-disabled={isDisabled() || undefined} disabled={isDisabled() || undefined} onPointerDown={(event) => {
+            if (inGroup)
+                toggleButtonGroupItemPointerDown(event, { ...press, isDisabled: !!read(ownIsDisabled), id: groupId }, groupState);
+            else
+                toggleButtonPointerDown(state, press, event);
+            onPointerDown?.(event);
+        }} onKeyDown={(event) => {
+            if (inGroup)
+                toggleButtonGroupItemKeyDown(event, { ...press, isDisabled: !!read(ownIsDisabled), id: groupId }, groupState);
+            else
+                toggleButtonKeyDown(state, press, event);
+            onKeyDown?.(event);
+        }} onKeyUp={onKeyUp ? (event) => onKeyUp(event) : undefined} onClick={(event) => {
+            if (inGroup)
+                toggleButtonGroupItemClick(event, { ...press, isDisabled: !!read(ownIsDisabled), id: groupId }, groupState);
+            else
+                toggleButtonClick(state, press, event);
+            onClick?.(event);
+        }} 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)}>
+      {/* RAC ToggleButton: `SelectionIndicatorContext` around the content (`isSelected` an accessor). */}
+      {provide(SelectionIndicatorContext, { isSelected }, () => renderProps.children())}
+    </button>);
+}

package/toggle-button-group/behaviour.d.ts

@@ -0,0 +1,19 @@
+import type { Orientation } from "../collections/types.js";
+import { type ToggleGroupProps, type ToggleGroupState } from "../state/toggle-group.js";
+export interface AriaToggleButtonGroupProps extends ToggleGroupProps {
+    /**
+     * The orientation of the the toggle button group.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+/** Props for the toggle button group container (RA `useToggleButtonGroup` → `groupProps`). */
+export declare function toggleButtonGroupProps(props: AriaToggleButtonGroupProps, state: ToggleGroupState, live?: {
+    readonly orientation?: Orientation;
+}): Record<string, unknown>;
+export { toggleButtonGroupItemProps, toggleButtonGroupItemPressOptions, toggleButtonGroupItemPointerDown, toggleButtonGroupItemKeyDown, toggleButtonGroupItemClick, type AriaToggleButtonGroupItemProps, type ToggleButtonGroupItemAria, } from "./item.jsx";

package/toggle-button-group/behaviour.jsx

@@ -0,0 +1,13 @@
+import { isGroupDisabled } from "../state/toggle-group.js";
+import { toolbarProps as ariaToolbarProps } from "../toolbar/behaviour.js";
+/** Props for the toggle button group container (RA `useToggleButtonGroup` → `groupProps`). */
+export function toggleButtonGroupProps(props, state, live) {
+    const toolbarProps = ariaToolbarProps({ orientation: props.orientation, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] });
+    return {
+        ...toolbarProps,
+        role: state.selectionMode === "single" ? "radiogroup" : toolbarProps.role,
+        "aria-orientation": () => (live ?? props).orientation ?? "horizontal",
+        "aria-disabled": () => (isGroupDisabled(state) ? "true" : undefined),
+    };
+}
+export { toggleButtonGroupItemProps, toggleButtonGroupItemPressOptions, toggleButtonGroupItemPointerDown, toggleButtonGroupItemKeyDown, toggleButtonGroupItemClick, } from "./item.jsx";

package/toggle-button-group/context.d.ts

@@ -0,0 +1,7 @@
+import type { ToggleGroupState } from "../state/toggle-group.js";
+import type { ContextValue } from "../slots/index.jsx";
+import type { ToggleButtonGroupProps } from "./index.jsx";
+/** RAC `ToggleButtonGroupContext`: props for a `ToggleButtonGroup` (slots supported). */
+export declare const ToggleButtonGroupContext: import("@rivetjs/reactivity").Context<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>;
+/** RAC `ToggleGroupStateContext`: the group state, read by each `ToggleButton` with an `id`. */
+export declare const ToggleGroupStateContext: import("@rivetjs/reactivity").Context<ToggleGroupState | null>;

package/toggle-button-group/context.js

@@ -0,0 +1,9 @@
+// Ported from react-aria-components `ToggleButtonGroup` contexts (packages/react-aria-components/src/ToggleButtonGroup.tsx), Apache-2.0, © Adobe.
+// Rivet: the two contexts live in their own module so `ToggleButton` (which consumes `ToggleGroupStateContext`)
+// does not pull the group component; both registered for resume (`rv-toggle-button-group`, `rv-toggle-group-state`).
+import { createContext } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+/** RAC `ToggleButtonGroupContext`: props for a `ToggleButtonGroup` (slots supported). */
+export const ToggleButtonGroupContext = resumableContext(createContext({}, { id: "rv-toggle-button-group" }));
+/** RAC `ToggleGroupStateContext`: the group state, read by each `ToggleButton` with an `id`. */
+export const ToggleGroupStateContext = resumableContext(createContext(null, { id: "rv-toggle-group-state" }));

package/toggle-button-group/index.d.ts

@@ -0,0 +1,39 @@
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type RefValue, type ClassNameOrFunction, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import type { Orientation } from "../collections/types.js";
+import { type ToggleGroupState } from "../state/toggle-group.js";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type AriaToggleButtonGroupProps } from "./behaviour.jsx";
+export { ToggleButtonGroupContext, ToggleGroupStateContext } from "./context.js";
+export type { ToggleGroupState } from "../state/toggle-group.js";
+export interface ToggleButtonGroupRenderProps {
+    /**
+     * The orientation of the toggle button group.
+     *
+     * @selector [data-orientation="horizontal | vertical"]
+     */
+    orientation: () => Orientation;
+    /**
+     * Whether the toggle button group is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /** State of the toggle button group. */
+    state: ToggleGroupState;
+}
+export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, DOMRenderProps<"div", ToggleButtonGroupRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    id?: string;
+    ref?: RefValue<HTMLDivElement>;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-ToggleButtonGroup'
+     */
+    class?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;
+}
+/**
+ * A toggle button group allows a user to toggle multiple options, with single or multiple
+ * selection.
+ */
+export declare function ToggleButtonGroup(props: ToggleButtonGroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/toggle-button-group/index.jsx

@@ -0,0 +1,85 @@
+// Ported from react-aria-components `ToggleButtonGroup` (packages/react-aria-components/src/ToggleButtonGroup.tsx), Apache-2.0, © Adobe.
+// A group of `ToggleButton`s (each with an `id`) with single (`role="radiogroup"`) or multiple (`role="toolbar"`)
+// selection; arrow keys move focus between the buttons (useToolbar).
+// Rivet:
+// - state = `createToggleGroupState` (`../state/toggle-group.ts`, region state); `selectedKeys` is a plain
+//   iterable (controlled) or a two-way `Signal` (decision 2).
+// - render props are accessors (`class={({ isDisabled }) => (isDisabled() ? … : …)}`); `state` is the state object.
+// - toolbar keyboard handling = `../toolbar/behaviour.ts` (bubbling keydown / focusin / focusout, see its header).
+// `render` (RAC DOMRenderProps): given, the attributes go to `render(attrs, ToggleButtonGroupRenderProps)` instead of the default `<div>`.
+// - Live props: `isDisabled` / `orientation` are read lazily from the own props (a live getter: `isDisabled={d()}`), the
+//   `ToggleButtonGroupContext` value when the own prop is `undefined` (RA mergeProps: last defined wins; `contextProps`
+//   snapshots, so the own getter is read directly). React re-renders with the new prop: here the group state's live source
+//   (`isGroupDisabled(state)`), `data-disabled` / `aria-disabled`, `data-orientation` / `aria-orientation` / `data-rk` and the toolbar arrow
+//   keys follow the change in place, and every `ToggleButton` reads the group's `isDisabled` where it is used.
+// Deviations: no `ref` forwarding to the toolbar hook (handlers use
+// `event.currentTarget`).
+import { untrack } from "@rivetjs/reactivity";
+import { Provider } from "@rivetjs/runtime/dom";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { contextProps, renderPropsOf, slottedContext } from "../slots/index.jsx";
+import { createToggleGroupState } from "../state/toggle-group.js";
+import { toolbarBlur, toolbarFocus, toolbarKeyDown, toolbarKeys } from "../toolbar/behaviour.js";
+import { SharedElementTransition } from "../shared-element-transition/transition.jsx";
+import {} from "../utils/render.js";
+import { toggleButtonGroupProps } from "./behaviour.jsx";
+import { ToggleButtonGroupContext, ToggleGroupStateContext } from "./context.js";
+import { liveOptions } from "../utils/live.jsx";
+export { ToggleButtonGroupContext, ToggleGroupStateContext } from "./context.js";
+/** Global DOM events / attributes the group handles itself. */
+const OWNED = ["style", "render"];
+/**
+ * A toggle button group allows a user to toggle multiple options, with single or multiple
+ * selection.
+ */
+export function ToggleButtonGroup(props) {
+    const [merged, ref] = contextProps(props, props.ref, ToggleButtonGroupContext);
+    // Context props (`contextProps` already resolved the slot) for the live fallbacks below.
+    const ctx = slottedContext(ToggleButtonGroupContext, props.slot);
+    const isDisabled = () => !!(props.isDisabled !== undefined ? props.isDisabled : ctx?.isDisabled);
+    const orientation = () => (props.orientation !== undefined ? props.orientation : ctx?.orientation) || "horizontal";
+    // Object-literal getters (registered with their captures): the state, the group props and the toolbar handlers read the live values.
+    const live = {
+        get isDisabled() {
+            return isDisabled();
+        },
+        get orientation() {
+            return orientation();
+        },
+        get disallowEmptySelection() {
+            return props.disallowEmptySelection !== undefined ? props.disallowEmptySelection : ctx?.disallowEmptySelection;
+        },
+    };
+    // Live props: a controlled `selectedKeys={k()}` / `selectedKey={k()}` stays live (accessor; never written).
+    const state = createToggleGroupState(liveOptions(merged, [], ["selectedKeys", "selectedKey"]), live);
+    const groupProps = toggleButtonGroupProps(merged, state, live);
+    const renderValues = { orientation: () => orientation(), isDisabled: () => isDisabled(), state };
+    const rp = untrack(() => renderPropsOf(merged, { values: renderValues, defaultClassName: "rv-ToggleButtonGroup" }));
+    const dom = globalDOMProps(merged, OWNED);
+    const id = merged.id;
+    const slot = merged.slot || undefined;
+    if (merged.render)
+        return merged.render({
+            ...dom,
+            ...groupProps,
+            id,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-orientation": () => orientation(),
+            "data-disabled": () => (isDisabled() ? "true" : undefined),
+            "data-rk": () => toolbarKeys(orientation()),
+            onKeyDown: (event) => toolbarKeyDown(event, live),
+            onFocusIn: (event) => toolbarFocus(event),
+            onFocusOut: (event) => toolbarBlur(event),
+            children: () => (<Provider token={ToggleGroupStateContext} value={state}>
+            <SharedElementTransition>{rp.children()}</SharedElementTransition>
+          </Provider>),
+        }, renderValues);
+    return (<div {...dom} {...groupProps} id={id} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-orientation={orientation()} data-disabled={isDisabled() ? "true" : undefined} data-rk={toolbarKeys(orientation())} onKeyDown={(event) => toolbarKeyDown(event, live)} onFocusIn={(event) => toolbarFocus(event)} onFocusOut={(event) => toolbarBlur(event)}>
+      <Provider token={ToggleGroupStateContext} value={state}>
+        <SharedElementTransition>{rp.children()}</SharedElementTransition>
+      </Provider>
+    </div>);
+}

package/toggle-button-group/item.d.ts

@@ -0,0 +1,30 @@
+import type { Key } from "../collections/types.js";
+import { type ToggleGroupState } from "../state/toggle-group.js";
+import { type PressOptions } from "../button/press.js";
+export interface AriaToggleButtonGroupItemProps extends PressOptions {
+    /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */
+    id: Key;
+    /** Whether the item is disabled (the group's `isDisabled` disables every item). */
+    isDisabled?: boolean;
+}
+export interface ToggleButtonGroupItemAria {
+    /** Props for the button element. */
+    buttonProps: Record<string, unknown>;
+    /** Whether the button is selected (accessor, tracked). */
+    isSelected: () => boolean;
+    /** Whether the button is disabled. */
+    isDisabled: boolean;
+}
+/** Accessibility attributes of a toggle button inside a group (RA `useToggleButtonGroupItem`). */
+export declare function toggleButtonGroupItemProps(props: AriaToggleButtonGroupItemProps, state: ToggleGroupState): ToggleButtonGroupItemAria;
+/**
+ * Press options of a group item: `onPress` toggles the item's key first, then calls the item's `onPress`
+ * (RA `useToggleButton` chains `state.toggle`). Built per event (functions created in .ts modules are not resumable).
+ */
+export declare function toggleButtonGroupItemPressOptions(props: AriaToggleButtonGroupItemProps, state: ToggleGroupState): PressOptions;
+/** pointerdown on a group item. */
+export declare const toggleButtonGroupItemPointerDown: (e: PointerEvent, props: AriaToggleButtonGroupItemProps, state: ToggleGroupState) => void;
+/** keydown on a group item. */
+export declare const toggleButtonGroupItemKeyDown: (e: KeyboardEvent, props: AriaToggleButtonGroupItemProps, state: ToggleGroupState) => void;
+/** click on a group item. */
+export declare const toggleButtonGroupItemClick: (e: MouseEvent, props: AriaToggleButtonGroupItemProps, state: ToggleGroupState) => void;

package/toggle-button-group/item.jsx

@@ -0,0 +1,37 @@
+import { isGroupDisabled, isKeySelected, toggleKey } from "../state/toggle-group.js";
+import { pressClick, pressKeyDown, pressPointerDown } from "../button/press.js";
+/** Accessibility attributes of a toggle button inside a group (RA `useToggleButtonGroupItem`). */
+export function toggleButtonGroupItemProps(props, state) {
+    const id = props.id;
+    const isDisabled = !!(props.isDisabled || isGroupDisabled(state));
+    const isSelected = () => isKeySelected(state, id);
+    const selection = state.selectionMode === "single"
+        ? { role: "radio", "aria-checked": () => (isSelected() ? "true" : "false") }
+        : { "aria-pressed": () => (isSelected() ? "true" : "false") };
+    return {
+        buttonProps: { type: "button", ...selection, "data-selected": () => (isSelected() ? "true" : undefined), disabled: isDisabled || undefined },
+        isSelected,
+        isDisabled,
+    };
+}
+/**
+ * Press options of a group item: `onPress` toggles the item's key first, then calls the item's `onPress`
+ * (RA `useToggleButton` chains `state.toggle`). Built per event (functions created in .ts modules are not resumable).
+ */
+export function toggleButtonGroupItemPressOptions(props, state) {
+    const { id, onPress } = props;
+    return {
+        ...props,
+        isDisabled: !!(props.isDisabled || isGroupDisabled(state)),
+        onPress: (event) => {
+            toggleKey(state, id);
+            onPress?.(event);
+        },
+    };
+}
+/** pointerdown on a group item. */
+export const toggleButtonGroupItemPointerDown = (e, props, state) => pressPointerDown(toggleButtonGroupItemPressOptions(props, state), e);
+/** keydown on a group item. */
+export const toggleButtonGroupItemKeyDown = (e, props, state) => pressKeyDown(toggleButtonGroupItemPressOptions(props, state), e);
+/** click on a group item. */
+export const toggleButtonGroupItemClick = (e, props, state) => pressClick(toggleButtonGroupItemPressOptions(props, state), e);

package/toolbar/behaviour.d.ts

@@ -0,0 +1,22 @@
+import type { AriaLabelingProps, Direction, Orientation } from "../utils/types.js";
+/** RA `AriaToolbarProps`. */
+export interface AriaToolbarProps extends AriaLabelingProps {
+    /**
+     * The orientation of the entire toolbar.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    id?: string;
+}
+/** RA `useToolbar` `toolbarProps` attributes (`role="group"` inside another toolbar). */
+export declare function toolbarProps(props: AriaToolbarProps, isInToolbar?: boolean): Record<string, unknown>;
+/** Keys held by the loader while the chunk loads (`data-rk`). */
+export declare const toolbarKeys: (orientation?: Orientation) => string;
+/** keydown on the toolbar (`props.orientation`, `props.direction` = the locale's, from `useLocale()`). */
+export declare function toolbarKeyDown(e: KeyboardEvent, props: Pick<AriaToolbarProps, "orientation"> & {
+    direction?: Direction;
+}): void;
+/** focusout: remember the control focus left from. */
+export declare function toolbarBlur(e: FocusEvent): void;
+/** focusin: focus entering the toolbar returns to the last focused control. */
+export declare function toolbarFocus(e: FocusEvent): void;

package/toolbar/behaviour.js

@@ -0,0 +1,89 @@
+// Ported from react-aria `useToolbar` (packages/react-aria/src/toolbar/useToolbar.ts), Apache-2.0, © Adobe.
+// Arrow keys move focus between the toolbar's focusable controls (across groups and separators), Tab leaves the
+// toolbar, focus returns to the last focused control.
+// Rivet (naming convention): `useToolbar(props, ref)` → `toolbarProps(props, isInToolbar?)` (the attribute bag) +
+// handlers `toolbarKeyDown(event, props)`, `toolbarFocus(event)`, `toolbarBlur(event)` wired as inline arrows on
+// `onKeyDown` / `onFocusIn` / `onFocusOut`; the last focused control lives in a module WeakMap (transient).
+// Deviations: bubbling keydown / focusin / focusout instead of capture listeners (capture handlers are not
+// resumable yet), so a descendant that stops propagation of an arrow key keeps it; `isInToolbar` (RA: a layout
+// effect reading the DOM) is known at render from the enclosing `<Toolbar>` (correct server markup) and checked
+// again at event time.
+import { direction } from "@rivetjs/cdk/bidi";
+import { createFocusManager } from "@rivetjs/cdk/focus";
+/** Last control focused before focus left each toolbar (transient, browser only). */
+const lastFocused = new WeakMap();
+const isNested = (toolbar) => !!toolbar.parentElement?.closest('[role="toolbar"]');
+/** RA `useToolbar` `toolbarProps` attributes (`role="group"` inside another toolbar). */
+export function toolbarProps(props, isInToolbar = false) {
+    const orientation = props.orientation ?? "horizontal";
+    const ariaLabel = props["aria-label"];
+    return {
+        id: props.id,
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        role: !isInToolbar ? "toolbar" : "group",
+        "aria-orientation": orientation,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabel == null ? props["aria-labelledby"] : undefined,
+    };
+}
+/** Keys held by the loader while the chunk loads (`data-rk`). */
+export const toolbarKeys = (orientation = "horizontal") => (orientation === "vertical" ? "ArrowUp ArrowDown" : "ArrowLeft ArrowRight");
+/** keydown on the toolbar (`props.orientation`, `props.direction` = the locale's, from `useLocale()`). */
+export function toolbarKeyDown(e, props) {
+    const toolbar = e.currentTarget;
+    if (isNested(toolbar) || !toolbar.contains(e.target))
+        return;
+    const orientation = props.orientation ?? "horizontal";
+    // RA: the locale's direction (`useLocale()`, passed as `props.direction`); Rivet also honours a DOM `dir="rtl"`.
+    const shouldReverse = (props.direction === "rtl" || direction(toolbar) === "rtl") && orientation === "horizontal";
+    const fm = createFocusManager(() => toolbar);
+    if ((orientation === "horizontal" && e.key === "ArrowRight") || (orientation === "vertical" && e.key === "ArrowDown")) {
+        if (shouldReverse)
+            fm.focusPrevious();
+        else
+            fm.focusNext();
+    }
+    else if ((orientation === "horizontal" && e.key === "ArrowLeft") || (orientation === "vertical" && e.key === "ArrowUp")) {
+        if (shouldReverse)
+            fm.focusNext();
+        else
+            fm.focusPrevious();
+    }
+    else if (e.key === "Tab") {
+        // Move to the first / last control and let the browser's Tab leave the toolbar from there.
+        const active = toolbar.ownerDocument.activeElement;
+        if (active)
+            lastFocused.set(toolbar, active);
+        if (e.shiftKey)
+            fm.focusFirst();
+        else
+            fm.focusLast();
+        return;
+    }
+    else
+        return;
+    // Arrow keys are not handled by nested action groups.
+    e.stopPropagation();
+    e.preventDefault();
+}
+/** focusout: remember the control focus left from. */
+export function toolbarBlur(e) {
+    const toolbar = e.currentTarget;
+    if (isNested(toolbar))
+        return;
+    if (!toolbar.contains(e.relatedTarget) && !lastFocused.has(toolbar))
+        lastFocused.set(toolbar, e.target);
+}
+/** focusin: focus entering the toolbar returns to the last focused control. */
+export function toolbarFocus(e) {
+    const toolbar = e.currentTarget;
+    if (isNested(toolbar))
+        return;
+    const last = lastFocused.get(toolbar);
+    if (last && !toolbar.contains(e.relatedTarget) && toolbar.contains(e.target)) {
+        lastFocused.delete(toolbar);
+        if (last.isConnected && last !== e.target)
+            last.focus();
+    }
+}

package/toolbar/index.d.ts

@@ -0,0 +1,16 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import type { Orientation } from "../utils/types.js";
+import { type AriaToolbarProps } from "./behaviour.js";
+export interface ToolbarRenderProps {
+    /** The current orientation of the toolbar. `[data-orientation]` */
+    orientation: () => Orientation;
+}
+export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps>, DOMRenderProps<"div", ToolbarRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `ToolbarContext`. */
+export declare const ToolbarContext: import("@rivetjs/reactivity").Context<ContextValue<ToolbarProps, HTMLDivElement>>;
+/** A toolbar is a container for a set of interactive controls with arrow key navigation (RAC `Toolbar`). */
+export declare function Toolbar(inProps: ToolbarProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;