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

package/checkbox/behaviour.jsx

@@ -0,0 +1,412 @@
+// Ported from react-aria `useToggle`, `useCheckbox`, `useCheckboxGroup`, `useCheckboxGroupItem`
+// (packages/react-aria/src/toggle/useToggle.ts, src/checkbox/useCheckbox.ts, useCheckboxGroup.ts,
+// useCheckboxGroupItem.ts, utils.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - RA hooks → `toggleProps(props, state, inputRef?)`, `checkboxProps` (`switchProps`: ../switch/behaviour.tsx), `checkboxGroupProps(props, state)`,
+//   `checkboxGroupItemProps(props, groupState, inputRef?)`; bags keep RA's keys. Values that change are
+//   accessors (`checked`, `aria-invalid`, `aria-describedby`, `disabled`, `indeterminate`…): spread the bags,
+//   the runtime spread reads them in bindings. Result flags are accessors (`isSelected()`, `isPressed()`…).
+// - RA handlers → free functions `toggle<Event>(event, props, ctx)` (`toggleChange`, `toggleInvalid`,
+//   `toggleFocus`); the label press handlers come from `pressProps` (RA usePress) like upstream.
+// - No layout effect before interaction: the native custom validity is synced from the input's handlers
+//   (change / focus / invalid) and by `<Form>` submit from `data-rv-error` (see form/behaviour.ts); the form
+//   reset listener attaches from the first handler that sees the input (RA `useFormReset`).
+// - `checkboxGroupData` (RA module WeakMap) → the group state's `data` field (serializes with the state).
+// - `.tsx` (no JSX): the bags hold closures a resumed binding / context captures.
+// Deviations: a read-only checkbox's native `checked` is restored after the browser toggled it (RA re-renders
+// the controlled input); group native validation is applied to every checkbox of the group at once.
+import { signal, untrack } from "@rivetjs/reactivity";
+import { ref as createRef } from "@rivetjs/runtime/dom";
+import { DEV, devWhere } from "#dev";
+import { createToggleState, isToggleReadOnly, isToggleSelected, setSelected, toggle } from "../state/toggle.js";
+import { DEFAULT_VALIDATION_RESULT, clearServerErrors, commitValidation, createFormValidationState, displayValidation, mergeValidation, read, realtimeValidation, updateValidation, } from "../state/form-validation.js";
+import { addValue, isCheckboxGroupRequired, isRequiredNow, removeValue, setInvalid, setValue } from "../state/checkbox-group.js";
+import { commit, nativeValidity, onFormReset, syncValidity, validationInvalid, validityError } from "../form/behaviour.js";
+import { focusableProps } from "../focus/focusable.jsx";
+import { pressProps } from "../interactions/press.jsx";
+import { mergeDefined, mergeProps } from "../interactions/merge-props.jsx";
+import { fieldProps } from "../label/behaviour.js";
+import { focusWithinProps } from "../interactions/focus.jsx";
+import { createSlotId, slotIdRef } from "../slots/index.jsx";
+/**
+ * One input ref from the component's own ref and the user's (`inputRef` prop, context `inputRef`): a
+ * callback ref for the element that is also readable (`ref()` → the element), like RA `useObjectRef(mergeRefs(…))`.
+ */
+export function mergeInputRefs(...refs) {
+    const own = createRef();
+    const targets = refs.filter((r) => r != null);
+    if (!targets.length)
+        return own;
+    const merged = (...args) => {
+        if (!args.length)
+            return own();
+        const el = args[0];
+        own.set(el ?? undefined);
+        for (const target of targets) {
+            if (typeof target === "function") {
+                const signalRef = target;
+                if (signalRef.set)
+                    signalRef.set(el ?? undefined);
+                else
+                    target(el);
+            }
+            else
+                target.current = el;
+        }
+    };
+    return merged;
+}
+/** RA `useToggle`. */
+export function toggleProps(props, state, inputRef = createRef(), item) {
+    const { value, name, form, isRequired, validationBehavior = "aria", onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick } = props;
+    const isDisabledProp = props.isDisabled;
+    // May be accessors (live props P5: `liveOptions` at the part boundary): read at use.
+    const isReadOnlyProp = props.isReadOnly;
+    const readOnly = () => !!read(isReadOnlyProp);
+    const ariaDescribedby = props["aria-describedby"];
+    // Create validation state here because it doesn't make sense to add to general useToggleState.
+    const validation = createFormValidationState({ ...props, validationBehavior, value: state.selected });
+    const display = () => (item ? itemDisplay(item) : displayValidation(validation));
+    const isInvalid = () => display().isInvalid;
+    const isDisabled = () => !!read(isDisabledProp);
+    const ctx = { state, validation, item };
+    if (props.children == null && props["aria-label"] == null && props["aria-labelledby"] == null && DEV && isDev())
+        console.warn("[rivet:cdk] checkbox: If you do not provide children, you must specify an aria-label for accessibility" + devWhere());
+    // Handle press state for keyboard interactions and cases where labelProps is not used.
+    const { pressProps: inputPressProps, isPressed: inputPressed } = pressProps({
+        onPressStart,
+        onPressEnd,
+        onPressChange,
+        onPress,
+        onPressUp,
+        onClick,
+        isDisabled,
+    });
+    // Handle press state on the label.
+    const labelPressed = signal(false);
+    const labelPress = pressProps({
+        onPressStart: (e) => {
+            // Keyboard interactions are handled directly on the input.
+            if (e.pointerType === "keyboard" || e.pointerType === "virtual")
+                return e.continuePropagation();
+            onPressStart?.(e);
+            onPressChange?.(true);
+            labelPressed.set(true);
+        },
+        onPressEnd: (e) => {
+            if (e.pointerType === "keyboard" || e.pointerType === "virtual")
+                return e.continuePropagation();
+            onPressEnd?.(e);
+            onPressChange?.(false);
+            labelPressed.set(false);
+        },
+        onPressUp: (e) => {
+            if (e.pointerType === "keyboard" || e.pointerType === "virtual")
+                return e.continuePropagation();
+            onPressUp?.(e);
+        },
+        onClick,
+        onPress: (e) => {
+            if (e.pointerType === "keyboard" || e.pointerType === "virtual")
+                return e.continuePropagation();
+            onPress?.(e);
+            toggleLabelPress(ctx, inputRef);
+        },
+        isDisabled: () => isDisabled() || readOnly(),
+    });
+    const focusable = focusableProps({ ...props, isDisabled: untrack(isDisabled) }, inputRef);
+    // Copied from useField because we don't want the label behavior that provides.
+    // With an explicit `id`, the part ids derive from it (byte-stable HTML, like `fieldProps`).
+    const descriptionId = createSlotId(props.id ? props.id + "-description" : undefined);
+    const errorMessageId = createSlotId(props.id ? props.id + "-error" : undefined, isInvalid);
+    // RA `mergeProps(domProps, {…}, mergeProps(pressProps, focusableProps))` in one pass (same result: the first two
+    // bags share no key, and mergeProps is associative). `mergeDefined`: the literal is merged into in place, and the
+    // static result drops its unset entries (same attributes; the spread / merges downstream walk only set keys).
+    const inputProps = mergeDefined({
+        id: props.id,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-details": props["aria-details"],
+        tabIndex: props.excludeFromTabOrder ? -1 : undefined,
+        ref: inputRef,
+        checked: () => state.selected(),
+        "aria-required": requiredAttr(isRequired, validationBehavior === "aria"),
+        required: requiredAttr(isRequired, validationBehavior === "native"),
+        "aria-invalid": () => isInvalid() || undefined,
+        "aria-errormessage": props["aria-errormessage"],
+        "aria-controls": props["aria-controls"],
+        "aria-readonly": () => readOnly() || undefined,
+        "aria-describedby": () => 
+        // Server: the field's slot probe (`CheckboxField`) marked the parts that render; a lone Checkbox has none.
+        [slotIdRef(descriptionId, false), slotIdRef(errorMessageId, isInvalid()), read(ariaDescribedby)].filter(Boolean).join(" ") || undefined,
+        onChange: (e) => toggleChange(e, {}, ctx),
+        onInvalid: (e) => toggleInvalid(e, {}, ctx),
+        // Delegated focusin (the input's own focus).
+        onFocusIn: (e) => (e.target === e.currentTarget ? toggleFocus(e, {}, ctx) : undefined),
+        disabled: () => isDisabled() || undefined,
+        value,
+        name,
+        form,
+        type: "checkbox",
+        // Rivet: the realtime error for `<Form>`'s cold submit (fields never interacted with).
+        "data-rv-error": () => (item ? undefined : validityError(validation)),
+    }, inputPressProps, focusable);
+    return {
+        labelProps: mergeProps(labelPress.pressProps, { onClick: (e) => e.preventDefault() }),
+        inputProps,
+        descriptionProps: { id: descriptionId },
+        errorMessageProps: { id: errorMessageId },
+        isSelected: () => state.selected(),
+        isPressed: () => inputPressed() || labelPressed(),
+        isDisabled,
+        isReadOnly: readOnly,
+        isInvalid,
+        validationErrors: () => display().validationErrors,
+        validationDetails: () => display().validationDetails,
+        state,
+        inputRef,
+    };
+}
+/** RA `useCheckbox`: `toggleProps` + the label `onMouseDown` (keep focus off the label) + `indeterminate`. */
+export function checkboxProps(props, state, inputRef, item) {
+    const res = toggleProps(props, state, inputRef, item);
+    // indeterminate is a property, but it can only be set via javascript: the component binds
+    // `prop:indeterminate={read(props.isIndeterminate)}` on the input (RA: an effect).
+    return {
+        ...res,
+        labelProps: mergeProps(res.labelProps, {
+            // Prevent label from being focused when mouse down on it.
+            // Note, this does not prevent the input from being focused in the `click` event.
+            onMouseDown: (e) => e.preventDefault(),
+        }),
+    };
+}
+/** RA `useCheckboxGroup`. */
+export function checkboxGroupProps(props, state) {
+    const { isDisabled, name, form, validationBehavior = "aria" } = props;
+    const display = () => displayValidation(state.validation);
+    const isInvalid = () => display().isInvalid;
+    // Checkbox group is not an HTML input element so it shouldn't be labeled by a <label> element.
+    const ids = fieldProps({ ...props, labelElementType: "span" });
+    const descriptionId = createSlotId(props.id ? props.id + "-description" : undefined);
+    const errorMessageId = createSlotId(ids.errorMessageId, isInvalid);
+    state.data = { name, form, descriptionId, errorMessageId, validationBehavior };
+    const describedBy = props["aria-describedby"];
+    const { onBlur, onFocus, onFocusChange } = props;
+    const focusWithin = focusWithinProps({ onBlurWithin: onBlur, onFocusWithin: onFocus, onFocusWithinChange: onFocusChange });
+    // RA filterDOMProps(props, { labelable: true }): `data-*` attributes (id / aria-* come from fieldProps).
+    const dataAttrs = {};
+    for (const key in props)
+        if (key.startsWith("data-"))
+            dataAttrs[key] = props[key];
+    return {
+        groupProps: mergeProps(dataAttrs, {
+            role: "group",
+            "aria-disabled": typeof isDisabled === "function" ? trueWhen(isDisabled) : isDisabled || undefined,
+            ...ids.fieldProps,
+            "aria-details": props["aria-details"],
+            "aria-describedby": () => [slotIdRef(descriptionId, false), slotIdRef(errorMessageId, isInvalid()), describedBy].filter(Boolean).join(" ") || undefined,
+        }, focusWithin.focusWithinProps),
+        labelProps: { ...ids.labelProps },
+        descriptionProps: { id: descriptionId },
+        errorMessageProps: { id: errorMessageId },
+        isInvalid,
+        validationErrors: () => display().validationErrors,
+        validationDetails: () => display().validationDetails,
+    };
+}
+/** RA `useCheckboxGroupItem`. */
+export function checkboxGroupItemProps(props, state, inputRef) {
+    const itemValue = props.value;
+    const userOnChange = props.onChange;
+    const selected = () => state.value().includes(itemValue);
+    // Live props: the item's and the group's `isReadOnly` / `isDisabled` / `isRequired` stay live when either is an
+    // accessor (static path: the creation values, as before).
+    const isReadOnly = itemFlag(props.isReadOnly, state.isReadOnly, state.readOnly);
+    const toggleState = createToggleState({
+        isReadOnly,
+        isSelected: selected,
+        defaultSelected: state.defaultValue.includes(itemValue),
+        onChange: (isSelected) => {
+            if (isSelected)
+                addValue(state, itemValue);
+            else
+                removeValue(state, itemValue);
+            if (userOnChange)
+                userOnChange(isSelected);
+        },
+    });
+    const data = state.data ?? { validationBehavior: "aria" };
+    const validationBehavior = props.validationBehavior ?? data.validationBehavior;
+    // Local validation for this checkbox (server validation is handled at the group level).
+    const own = createFormValidationState({ ...props, value: selected, name: undefined, validationBehavior: "aria" });
+    const item = { group: state, value: itemValue, own, behavior: validationBehavior };
+    const res = checkboxProps({
+        ...props,
+        isReadOnly,
+        isDisabled: itemFlag(props.isDisabled, state.isDisabled, state.disabled),
+        name: props.name || data.name,
+        form: props.form || data.form,
+        isRequired: state.requiredNow ? groupRequired(props.isRequired, state) : (props.isRequired ?? state.required),
+        validationBehavior,
+    }, toggleState, inputRef, item);
+    // RA: `isRequired: props.isRequired ?? state.isRequired` (the group's is live: required while nothing is selected).
+    const native = validationBehavior === "native";
+    const ownRequired = props.isRequired;
+    const own_ = res.inputProps["aria-describedby"];
+    const groupInvalid = () => displayValidation(state.validation).isInvalid;
+    return {
+        ...res,
+        inputProps: {
+            ...res.inputProps,
+            // Native `required`: the item's own `isRequired`, else the group's (required while nothing is selected).
+            // One arrow (a conditional around a closure is not resumable).
+            required: () => (native && (read(ownRequired) ?? isRequiredNow(state))) || undefined,
+            "aria-describedby": () => [own_(), groupInvalid() ? slotIdRef(data.errorMessageId) : null, slotIdRef(data.descriptionId, false)].filter(Boolean).join(" ") || undefined,
+        },
+    };
+}
+/** An item flag (RA `props.x || state.x`): the static value, or a returned accessor while the item's or the group's flag
+ *  is live (returned arrows: resumable). */
+function itemFlag(own, group, live) {
+    if (!live && typeof own !== "function")
+        return group ? true : own;
+    return flagEither(own, group, live);
+}
+function flagEither(own, group, live) {
+    return () => !!(live ? live() : group) || !!read(own);
+}
+/** RA `props.isRequired ?? state.isRequired` with a live group `isRequired`. */
+function groupRequired(own, state) {
+    return () => {
+        const mine = read(own);
+        return mine ?? isCheckboxGroupRequired(state);
+    };
+}
+/** `true | undefined` of a live flag (a returned arrow: resumable). */
+function trueWhen(flag) {
+    return () => !!flag() || undefined;
+}
+/** A required attribute (`aria-required` / `required`): the static value, or an accessor while `isRequired` is live. */
+function requiredAttr(isRequired, applies) {
+    if (!applies)
+        return undefined;
+    return typeof isRequired === "function" ? trueWhen(isRequired) : isRequired || undefined;
+}
+/** Combined group + item validation shown by a group item (RA `combinedRealtimeValidation` / `displayValidation`). */
+function itemDisplay(item) {
+    const groupRealtime = realtimeValidation(item.group.validation);
+    const combined = groupRealtime.isInvalid ? groupRealtime : realtimeValidation(item.own);
+    return item.behavior === "native" ? displayValidation(item.group.validation) : combined;
+}
+/** Report the item's own realtime validation (or its native validity) to the group (RA `updateValidation` effect). */
+function reportItem(item, native = DEFAULT_VALIDATION_RESULT) {
+    const realtime = untrack(() => realtimeValidation(item.own));
+    setInvalid(item.group, item.value, realtime.isInvalid ? realtime : native);
+}
+/** Label press (mouse / touch): toggle, focus the input, commit validation (RA `useToggle` label `onPress`). */
+export function toggleLabelPress(ctx, inputRef) {
+    const { state } = ctx;
+    if (isToggleReadOnly(state))
+        return;
+    toggle(state);
+    const input = inputRef();
+    // The `checked` binding may not have flushed yet: the native validity below reads the element.
+    if (input)
+        input.checked = isToggleSelected(state);
+    input?.focus();
+    afterToggle(ctx, input);
+}
+function afterToggle(ctx, input) {
+    const { item, validation } = ctx;
+    if (item) {
+        reportItem(item);
+        clearServerErrors(item.group.validation);
+        if (input)
+            syncGroupValidity(item.group, input, item.behavior);
+        commitValidation(item.group.validation);
+    }
+    else
+        commit(validation, input);
+}
+/** `change` on the input (RA `onChange`: `setSelected(checked)`; useFormValidation commits). */
+export function toggleChange(event, _props, ctx) {
+    const input = event.currentTarget;
+    // since we spread props on label, onChange will end up there as well as in here.
+    // so we have to stop propagation at the lowest level that we care about
+    event.stopPropagation();
+    attachReset(ctx, input);
+    const { state } = ctx;
+    if (isToggleReadOnly(state)) {
+        // Read-only: the native control toggled; keep it in sync with the state (RA is controlled).
+        input.checked = isToggleSelected(state);
+        return;
+    }
+    setSelected(state, input.checked);
+    // A controlled value that did not change keeps the native control in sync (RA re-renders).
+    if (state.controlled.isControlled && !state.controlled.isSignal)
+        queueMicrotask(() => (input.checked = untrack(state.selected)));
+    afterToggle(ctx, input);
+}
+/** `focus` on the input: sync the custom validity (server / validate errors) before a submit. */
+export function toggleFocus(event, _props, ctx) {
+    const input = event.currentTarget;
+    attachReset(ctx, input);
+    if (ctx.item)
+        syncGroupValidity(ctx.item.group, input, ctx.item.behavior);
+    else
+        syncValidity(ctx.validation, input);
+}
+/** `invalid` on the input (RA useFormValidation `onInvalid`). */
+export function toggleInvalid(event, _props, ctx) {
+    const input = event.currentTarget;
+    if (ctx.item) {
+        syncGroupValidity(ctx.item.group, input, ctx.item.behavior);
+        validationInvalid(ctx.item.group.validation, event);
+    }
+    else
+        validationInvalid(ctx.validation, event);
+}
+function attachReset(ctx, input) {
+    const { state, item } = ctx;
+    if (item)
+        onFormReset(item.group, input, () => setValue(item.group, [...item.group.defaultValue]));
+    else
+        onFormReset(state, input, () => setSelected(state, state.defaultSelected));
+}
+/** Inputs of the group the checkbox belongs to. */
+const groupInputs = (input) => {
+    const group = input.closest('[role="group"]');
+    return group ? [...group.querySelectorAll('input[type="checkbox"]')] : [input];
+};
+/**
+ * Native group validation (RA useCheckboxGroupItem → useFormValidation layout effect with the group's
+ * validation): the group's realtime error is the custom validity of every checkbox; native validities
+ * (required) merge into the group's next result.
+ */
+export function syncGroupValidity(group, input, behavior = group.validation.behavior) {
+    const { validation } = group;
+    // RA: the item's own `validationBehavior` decides (useFormValidation runs per checkbox input).
+    if (behavior !== "native")
+        return;
+    const realtime = untrack(() => realtimeValidation(validation));
+    const message = realtime.isInvalid ? realtime.validationErrors.join(" ") || "Invalid value." : "";
+    const inputs = groupInputs(input);
+    // The `required` binding may not have flushed yet: apply it before reading native validity.
+    const required = untrack(() => isRequiredNow(group));
+    for (const el of inputs) {
+        if (el.disabled)
+            continue;
+        if (isCheckboxGroupRequired(group))
+            el.required = required;
+        el.setCustomValidity(message);
+        if (!el.hasAttribute("title"))
+            el.title = "";
+    }
+    if (!realtime.isInvalid) {
+        const invalid = inputs.filter((el) => !el.disabled && !el.validity.valid).map(nativeValidity);
+        updateValidation(validation, invalid.length ? mergeValidation(...invalid) : DEFAULT_VALIDATION_RESULT);
+    }
+}
+const isDev = () => globalThis.process?.env?.NODE_ENV === "development";
+export { createToggleState };

package/checkbox/index.d.ts

@@ -0,0 +1,168 @@
+import { type CheckboxGroupState, type CheckboxGroupStateOptions } from "../state/checkbox-group.js";
+import { type HoverEvents } from "../interactions/hover.jsx";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ContextValue, type RACValidation, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { type AriaCheckboxGroupProps, type AriaCheckboxProps, type InputRef } from "./behaviour.jsx";
+export type { CheckboxGroupState } from "../state/checkbox-group.js";
+export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, "label" | "validationBehavior">, Omit<CheckboxGroupStateOptions, "validationBehavior" | "validationErrors">, RACValidation, RenderProps<CheckboxGroupRenderProps>, DOMRenderProps<"div", CheckboxGroupRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-CheckboxGroup'
+     */
+    class?: RenderProps<CheckboxGroupRenderProps>["class"];
+    ref?: RefValue<HTMLDivElement>;
+}
+export interface CheckboxProps extends Omit<AriaCheckboxProps, "children" | "validationBehavior" | "validationErrors">, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, DOMRenderProps<"label", CheckboxRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, "onClick" | "style"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-Checkbox'
+     */
+    class?: RenderProps<CheckboxRenderProps>["class"];
+    /** A ref for the HTML input element. */
+    inputRef?: InputRef;
+    ref?: RefValue<HTMLLabelElement>;
+}
+export interface CheckboxFieldProps extends Omit<AriaCheckboxProps, "children" | "validationBehavior" | "validationErrors">, RACValidation, RenderProps<CheckboxFieldRenderProps>, DOMRenderProps<"div", CheckboxFieldRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "onClick" | "style"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-CheckboxField'
+     */
+    class?: RenderProps<CheckboxFieldRenderProps>["class"];
+    /** A ref for the HTML input element. */
+    inputRef?: InputRef;
+    ref?: RefValue<HTMLDivElement>;
+}
+export interface CheckboxButtonProps extends HoverEvents, RenderProps<CheckboxButtonRenderProps>, DOMRenderProps<"label", CheckboxButtonRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, "style"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-CheckboxButton'
+     */
+    class?: RenderProps<CheckboxButtonRenderProps>["class"];
+    ref?: RefValue<HTMLLabelElement>;
+}
+export interface CheckboxGroupRenderProps {
+    /**
+     * Whether the checkbox group is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the checkbox group is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: () => boolean;
+    /**
+     * Whether the checkbox group is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+    /**
+     * Whether the checkbox group is invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /** State of the checkbox group. */
+    state: CheckboxGroupState;
+}
+export interface CheckboxFieldRenderProps {
+    /**
+     * Whether the checkbox is selected.
+     *
+     * @selector [data-selected]
+     */
+    isSelected: () => boolean;
+    /**
+     * Whether the checkbox is indeterminate.
+     *
+     * @selector [data-indeterminate]
+     */
+    isIndeterminate: () => boolean;
+    /**
+     * Whether the checkbox is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the checkbox is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: () => boolean;
+    /**
+     * Whether the checkbox invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /**
+     * Whether the checkbox is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+}
+export interface CheckboxRenderProps extends CheckboxFieldRenderProps {
+    /**
+     * Whether the checkbox is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+    /**
+     * Whether the checkbox is currently in a pressed state.
+     *
+     * @selector [data-pressed]
+     */
+    isPressed: () => boolean;
+    /**
+     * Whether the checkbox is focused, either via a mouse or keyboard.
+     *
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the checkbox is keyboard focused.
+     *
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+}
+export interface CheckboxButtonRenderProps extends CheckboxRenderProps {
+}
+/** RAC `CheckboxContext`. */
+export declare const CheckboxContext: import("@rivetjs/reactivity").Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
+/** RAC `CheckboxFieldContext`. */
+export declare const CheckboxFieldContext: import("@rivetjs/reactivity").Context<ContextValue<CheckboxFieldProps, HTMLDivElement>>;
+/** RAC `CheckboxGroupContext`. */
+export declare const CheckboxGroupContext: import("@rivetjs/reactivity").Context<ContextValue<CheckboxGroupProps, HTMLDivElement>>;
+/** RAC `CheckboxGroupStateContext`. */
+export declare const CheckboxGroupStateContext: import("@rivetjs/reactivity").Context<CheckboxGroupState | null>;
+/**
+ * A checkbox group allows a user to select multiple items from a list of options.
+ */
+export declare function CheckboxGroup(props: CheckboxGroupProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+/**
+ * A checkbox allows a user to select an item, with support for validation and help text.
+ */
+export declare function CheckboxField(props: CheckboxFieldProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items, or
+ * to mark one individual item as selected.
+ *
+ * @deprecated Use CheckboxField + CheckboxButton instead.
+ */
+export declare function Checkbox(props: CheckboxProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/**
+ * A checkbox button is the clickable area of a checkbox, including the indicator and label.
+ */
+export declare function CheckboxButton(props: CheckboxButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;