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

package/color-field/index.jsx

@@ -0,0 +1,309 @@
+// Ported from react-aria-components `ColorField` (packages/react-aria-components/src/ColorField.tsx), Apache-2.0, © Adobe.
+// A color field allows users to edit a hex color or individual color channel value.
+// Children: `<Label />`, `<Input />`, `<Text slot="description" />`, `<FieldError />`.
+// Rivet:
+// - `channel` set → channel field (`createColorChannelFieldState` + `colorChannelFieldProps`, a number field over the
+//   channel); else hex field (`createColorFieldState` + `colorFieldProps`). Both provide `InputContext` with the input
+//   bag (accessors read in bindings; handlers = inline arrows over the `./behaviour.tsx` free functions: resumable).
+// - `value` = plain value, read-only accessor (ColorPicker) or two-way Signal (string | Color | null).
+// - description / error ids are slot ids (RA `useSlotId`): part of `aria-describedby` while that part renders.
+// - render props are accessors (`isInvalid()`); `state` is the serializable state object.
+// `render` (RAC DOMRenderProps): given, the attributes go to `render(attrs, ColorFieldRenderProps)` instead of the default `<div>` (the hidden form input stays a sibling).
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { createColorChannelFieldState, numberFieldView, } from "@rivetjs/cdk/color";
+import { useLocale } from "@rivetjs/cdk/i18n";
+import { channelFieldColorValue } from "../color/channel-field-state.jsx";
+// Direct .tsx import: the resume build walks .tsx imports only (not through the .ts barrel), and the state's
+// `validate` accessor is a resumable symbol of that module.
+import { createColorFieldState } from "../color/field-state.jsx";
+import { formValidationBehavior, formValidationErrors } from "../form/index.jsx";
+import { FieldErrorContext } from "../form/field-error.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { InputContext } from "../input/index.jsx";
+import { GroupContext } from "../group/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { probeSlots, slotProbing } from "#server";
+import { globalDOMProps } from "../utils/dom-props.js";
+import {} from "../utils/render.js";
+import { numberValue } from "../number/number-field-state.jsx";
+import { numberFieldBeforeInput, numberFieldBlur, numberFieldChange, numberFieldCompositionEnd, numberFieldCompositionStart, numberFieldFocus, numberFieldGroupFocusIn, numberFieldGroupFocusOut, numberFieldInput, numberFieldInvalid, numberFieldKeyDown, numberFieldKeyUp, numberFieldPaste, } from "../number-field/behaviour.jsx";
+import { Provider, contextProps, createSlot, createSlotId, resumableContext, renderPropsOf, slotIdRef, } from "../slots/index.jsx";
+import { colorChannelFieldNumberProps, colorChannelFieldProps, colorFieldBeforeInput, colorFieldBlur, colorFieldChange, colorFieldCompositionEnd, colorFieldCompositionStart, colorFieldFocus, colorFieldInput, colorFieldInvalid, colorFieldKeyDown, colorFieldKeyUp, colorFieldProps, } from "./behaviour.jsx";
+import { hasLive, liveAssign, liveOptions } from "../utils/live.jsx";
+import { read } from "../interactions/utils.js";
+export * from "./behaviour.jsx";
+/** RAC `ColorFieldContext`. */
+export const ColorFieldContext = resumableContext(createContext(null, { id: "rv-color-field" }));
+/** RAC `ColorFieldStateContext`. */
+export const ColorFieldStateContext = resumableContext(createContext(null, { id: "rv-color-field-state" }));
+const OWNED = ["style", "id", "render"];
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export function ColorField(props) {
+    // Live props (P5): `isDisabled` / `isReadOnly` / `isInvalid` (+ `isRequired` on a hex field) and a controlled `value`
+    // become accessors (state / behaviour / attributes read them); the rest of the body is read once (untracked: a prop
+    // change never re-creates the field). `channel` / `colorSpace` are read once.
+    return untrack(() => colorField(props));
+}
+/** Live keys (channel field: the number field reads `isRequired` once, as NumberField). */
+const CHANNEL_LIVE = ["isDisabled", "isReadOnly", "isInvalid"];
+const HEX_LIVE = ["isDisabled", "isReadOnly", "isInvalid", "isRequired"];
+function colorField(props) {
+    const [ctxMerged, ref] = contextProps(props, props.ref, ColorFieldContext);
+    const channel = ctxMerged.channel;
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, (channel ? CHANNEL_LIVE : HEX_LIVE), ["value"]) : ctxMerged;
+    return channel ? ColorChannelField(merged, ref) : HexColorField(merged, ref);
+}
+/** `true` while a live flag is set (a returned arrow: resumable symbol). */
+function liveFlag(flag) {
+    return () => !!flag() || undefined;
+}
+/** A flag attribute: `true` / `undefined`, or an accessor of it while the flag is live. */
+const flagAttr = (flag) => typeof flag === "function" ? liveFlag(flag) : flag || undefined;
+function labelSetup(merged) {
+    const initialLabel = !merged["aria-label"] && !merged["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    return { initialLabel, labelRef, hasLabel };
+}
+function HexColorField(merged, ref) {
+    const validationBehavior = formValidationBehavior(merged.validationBehavior);
+    const { initialLabel, labelRef, hasLabel } = labelSetup(merged);
+    const { locale } = useLocale();
+    // `merged` (live props: accessors for the live keys, other getters forwarded) is read untracked here.
+    const state = createColorFieldState({
+        value: merged.value,
+        defaultValue: merged.defaultValue,
+        onChange: merged.onChange,
+        isInvalid: merged.isInvalid,
+        validate: merged.validate,
+        validationBehavior,
+        validationErrors: formValidationErrors(),
+        name: merged.name,
+    });
+    const ariaProps = { ...merged, label: initialLabel, validationBehavior, locale };
+    const aria = colorFieldProps(ariaProps, state);
+    // Handlers capture only the plain props they need (a resumed handler serializes its captures).
+    const hp = {
+        isDisabled: merged.isDisabled,
+        isReadOnly: merged.isReadOnly,
+        isRequired: merged.isRequired,
+        isWheelDisabled: merged.isWheelDisabled,
+        locale,
+        onFocus: merged.onFocus,
+        onBlur: merged.onBlur,
+        onFocusChange: merged.onFocusChange,
+        onKeyDown: merged.onKeyDown,
+        onKeyUp: merged.onKeyUp,
+        onBeforeInput: merged.onBeforeInput,
+        onCompositionStart: merged.onCompositionStart,
+        onCompositionEnd: merged.onCompositionEnd,
+        onInput: merged.onInput,
+    };
+    const input = {
+        ...aria.inputProps,
+        onCopy: merged.onCopy,
+        onCut: merged.onCut,
+        onPaste: merged.onPaste,
+        onSelect: merged.onSelect,
+        onCompositionUpdate: merged.onCompositionUpdate,
+        onInput: (e) => colorFieldInput(e, hp, state, aria),
+        onChange: (e) => colorFieldChange(e, hp, state),
+        onInvalid: (e) => colorFieldInvalid(e, hp, state),
+        onBeforeInput: (e) => colorFieldBeforeInput(e, hp, state),
+        onCompositionStart: (e) => colorFieldCompositionStart(e, hp, state),
+        onCompositionEnd: (e) => colorFieldCompositionEnd(e, hp, state),
+        onKeyDown: (e) => colorFieldKeyDown(e, hp, state, aria),
+        onKeyUp: (e) => colorFieldKeyUp(e, hp, state, aria),
+        onFocus: (e) => colorFieldFocus(e, hp, state, aria),
+        onBlur: (e) => colorFieldBlur(e, hp, state, aria),
+    };
+    return renderField({ merged, state, ref, labelRef, ...wire(merged, aria, input, initialLabel, hasLabel) });
+}
+function ColorChannelField(merged, ref) {
+    const validationBehavior = formValidationBehavior(merged.validationBehavior);
+    const { initialLabel, labelRef, hasLabel } = labelSetup(merged);
+    const { locale } = useLocale();
+    const state = createColorChannelFieldState({
+        value: merged.value,
+        defaultValue: merged.defaultValue,
+        onChange: merged.onChange,
+        channel: merged.channel,
+        colorSpace: merged.colorSpace,
+        isDisabled: merged.isDisabled,
+        isReadOnly: merged.isReadOnly,
+        locale,
+    });
+    // Explicit fields, no `...merged`: number-field closures capture this bag (a resumed handler serializes its captures).
+    const base = {
+        isDisabled: merged.isDisabled,
+        isReadOnly: merged.isReadOnly,
+        isRequired: merged.isRequired,
+        isInvalid: merged.isInvalid,
+        isWheelDisabled: merged.isWheelDisabled,
+        validationBehavior,
+        locale,
+        label: initialLabel,
+        "aria-label": merged["aria-label"],
+        "aria-labelledby": merged["aria-labelledby"],
+        onFocus: merged.onFocus,
+        onBlur: merged.onBlur,
+        onFocusChange: merged.onFocusChange,
+        onKeyDown: merged.onKeyDown,
+        onKeyUp: merged.onKeyUp,
+        onPaste: merged.onPaste,
+        onBeforeInput: merged.onBeforeInput,
+        onCompositionStart: merged.onCompositionStart,
+        onCompositionEnd: merged.onCompositionEnd,
+        onInput: merged.onInput,
+    };
+    const ext = merged;
+    const channelProps = {
+        ...base,
+        "aria-describedby": ext["aria-describedby"],
+        "aria-details": ext["aria-details"],
+        "aria-errormessage": ext["aria-errormessage"],
+        placeholder: ext.placeholder,
+        autoFocus: ext.autoFocus,
+        excludeFromTabOrder: ext.excludeFromTabOrder,
+        description: ext.description,
+        errorMessage: ext.errorMessage,
+    };
+    const aria = colorChannelFieldProps(channelProps, state);
+    const np = colorChannelFieldNumberProps(base, state);
+    // RA: the channel name is the default aria-label while no Label renders (`useSlot` re-renders with `label: false`).
+    const channelName = initialLabel ? untrack(() => channelFieldColorValue(state)).getChannelName(merged.channel, locale) : undefined;
+    const ownAriaLabel = aria.inputProps["aria-label"];
+    const input = {
+        ...aria.inputProps,
+        // In the literal (a closure assigned onto an object afterwards is not resume-compiled).
+        "aria-label": () => (initialLabel && !hasLabel() ? channelName : ownAriaLabel),
+        // RA: `name` goes on the hidden input (the number), not the text input.
+        name: undefined,
+        form: merged.form,
+        onCopy: merged.onCopy,
+        onCut: merged.onCut,
+        onSelect: merged.onSelect,
+        onCompositionUpdate: merged.onCompositionUpdate,
+        onInput: (e) => numberFieldInput(e, np, numberFieldView(state), aria),
+        onChange: (e) => numberFieldChange(e, np, numberFieldView(state)),
+        onInvalid: (e) => numberFieldInvalid(e, np, numberFieldView(state)),
+        onBeforeInput: (e) => numberFieldBeforeInput(e, np, numberFieldView(state)),
+        onCompositionStart: (e) => numberFieldCompositionStart(e, np, numberFieldView(state)),
+        onCompositionEnd: (e) => numberFieldCompositionEnd(e, np, numberFieldView(state)),
+        onPaste: (e) => numberFieldPaste(e, np, numberFieldView(state)),
+        onKeyDown: (e) => numberFieldKeyDown(e, np, numberFieldView(state), aria),
+        onKeyUp: (e) => numberFieldKeyUp(e, np, numberFieldView(state), aria),
+        // RA useNumberField: the group's focus-within enables the wheel; RAC ColorField has no group, so the input is it.
+        onFocus: (e) => {
+            numberFieldGroupFocusIn(e, np, numberFieldView(state), aria);
+            numberFieldFocus(e, np, numberFieldView(state), aria);
+        },
+        onBlur: (e) => {
+            numberFieldBlur(e, np, numberFieldView(state), aria);
+            numberFieldGroupFocusOut(e, np, numberFieldView(state), aria);
+        },
+    };
+    const name = merged.name;
+    const hidden = name
+        ? {
+            name,
+            form: merged.form,
+            value: () => {
+                const v = numberValue(numberFieldView(state));
+                return isNaN(v) ? "" : String(v);
+            },
+        }
+        : undefined;
+    return renderField({ merged, state, ref, labelRef, hidden, ...wire(merged, aria, input, initialLabel, hasLabel) });
+}
+function wire(merged, aria, input, initialLabel, hasLabel) {
+    const { isInvalid, validationErrors, validationDetails } = aria;
+    // RA useSlotId: the description / error ids are described-by while their part renders.
+    // RA useField deps: the parts re-check when the validity changes (FieldError renders only while invalid).
+    const descriptionId = createSlotId(aria.descriptionProps.id ?? undefined, isInvalid);
+    const errorId = createSlotId(aria.errorMessageProps.id, isInvalid);
+    const extraDescribedBy = merged["aria-describedby"];
+    const labelledBy = aria.ids.fieldProps["aria-labelledby"];
+    const ownLabelledBy = merged["aria-labelledby"];
+    return {
+        labelProps: aria.labelProps,
+        input: {
+            ...input,
+            // Unconditional arrow (a conditional arrow is not resume-compiled).
+            "aria-labelledby": () => (!initialLabel || hasLabel() ? labelledBy : ownLabelledBy),
+            "aria-describedby": () => [slotIdRef(descriptionId, false), slotIdRef(errorId, isInvalid()), extraDescribedBy].filter(Boolean).join(" ") || undefined,
+        },
+        descriptionId,
+        errorId,
+        isInvalid,
+        validation: () => ({ isInvalid: isInvalid(), validationErrors: validationErrors(), validationDetails: validationDetails() }),
+    };
+}
+function renderField(parts) {
+    // Inside another field's server slot probe (`probeSlots`): this field's subtree holds none of that field's slots.
+    if (slotProbing)
+        return null;
+    const { merged, state, ref, labelProps, labelRef, input, descriptionId, errorId, isInvalid, validation, hidden } = parts;
+    // Live props (P5): a live flag is an accessor (read in bindings).
+    const isDisabled = merged.isDisabled || false;
+    const isReadOnly = merged.isReadOnly || false;
+    const isRequired = merged.isRequired || false;
+    const channel = merged.channel || "hex";
+    const renderValues = {
+        state,
+        channel,
+        isDisabled: () => !!read(isDisabled),
+        isInvalid,
+        isReadOnly: () => !!read(isReadOnly),
+        isRequired: () => !!read(isRequired),
+    };
+    const rp = renderPropsOf(merged, { values: renderValues, defaultClassName: "rv-ColorField" });
+    // The flags go through the spread bag (an accessor while live: a function attribute value outside a spread is not a
+    // server binding, and an explicit attribute after the spread would override the bag's key); none is added while
+    // all are off (static).
+    const disabledAttr = flagAttr(isDisabled);
+    const readOnlyAttr = flagAttr(isReadOnly);
+    const requiredAttr = flagAttr(isRequired);
+    const flags = disabledAttr || readOnlyAttr || requiredAttr ? { "data-disabled": disabledAttr, "data-readonly": readOnlyAttr, "data-required": requiredAttr } : undefined;
+    const dom = flags ? liveAssign(globalDOMProps(merged, OWNED), flags) : globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const values = [
+        [ColorFieldStateContext, state],
+        [InputContext, input],
+        [LabelContext, { ...labelProps, ref: labelRef }],
+        [GroupContext, { role: "presentation", isInvalid, isDisabled }],
+        [TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorId } } }],
+        [FieldErrorContext, validation],
+    ];
+    const children = rp.children;
+    // Rivet (server): the input renders before its Description / FieldError: probe which slotted parts render (as TextField).
+    if (typeof document === "undefined")
+        probeSlots(values, () => children());
+    const hiddenName = hidden?.name;
+    const hiddenForm = hidden?.form;
+    const hiddenValue = hidden?.value;
+    if (merged.render)
+        return (<>
+        {merged.render({
+                ...dom,
+                ref: ref,
+                class: () => rp.class(),
+                style: () => rp.style(),
+                slot,
+                "data-channel": channel,
+                "data-disabled": disabledAttr,
+                "data-invalid": () => isInvalid() || undefined,
+                "data-readonly": readOnlyAttr,
+                "data-required": requiredAttr,
+                children: () => <Provider values={values}>{children()}</Provider>,
+            }, renderValues)}
+        {hiddenValue ? <input type="hidden" name={hiddenName} form={hiddenForm} value={hiddenValue()}/> : null}
+      </>);
+    return (<>
+      <div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-channel={channel} data-invalid={isInvalid() || undefined}>
+        <Provider values={values}>{children()}</Provider>
+      </div>
+      {hiddenValue ? <input type="hidden" name={hiddenName} form={hiddenForm} value={hiddenValue()}/> : null}
+    </>);
+}

package/color-picker/index.d.ts

@@ -0,0 +1,19 @@
+import { type Color, type ColorPickerState, type ColorPickerProps as StatelyColorPickerProps } from "@rivetjs/cdk/color";
+import { type ChildrenOrFunction, type SlotProps, type SlottedContextValue } from "../slots/index.jsx";
+export interface ColorPickerRenderProps {
+    /** The currently selected color. */
+    color: () => Color;
+}
+export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps {
+    /** The children of the component. A function may be provided to alter the children based on component state. */
+    children: ChildrenOrFunction<ColorPickerRenderProps>;
+}
+/** RAC `ColorPickerContext`. */
+export declare const ColorPickerContext: import("@rivetjs/reactivity").Context<SlottedContextValue<Partial<ColorPickerProps>>>;
+/** RAC `ColorPickerStateContext`. */
+export declare const ColorPickerStateContext: import("@rivetjs/reactivity").Context<ColorPickerState | null>;
+/**
+ * A ColorPicker synchronizes a color value between multiple React Aria color components.
+ * It simplifies building color pickers with customizable layouts via composition.
+ */
+export declare function ColorPicker(props: ColorPickerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/color-picker/index.jsx

@@ -0,0 +1,49 @@
+// Ported from react-aria-components `ColorPicker` (packages/react-aria-components/src/ColorPicker.tsx), Apache-2.0, © Adobe.
+// A ColorPicker synchronizes a color value between multiple React Aria color components (ColorArea, ColorSlider,
+// ColorWheel, ColorField, ColorSwatch, ColorSwatchPicker). It renders no element of its own.
+// Rivet:
+// - state = `createColorPickerState` (`@rivetjs/cdk/color`); `value` = plain value or two-way Signal (string | Color).
+// - the child contexts get `value: () => color` (a read-only accessor: the child only calls `onChange`, RAC's
+//   `value={state.color} onChange={state.setColor}`) and `onChange` = inline arrow over `setColor`.
+// - render props are accessors (`({ color }) => … color() …`).
+import { createContext } from "@rivetjs/reactivity";
+import { createColorPickerState, getColor, setColor, } from "@rivetjs/cdk/color";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { Provider, renderProps, resumableContext, slottedContext } from "../slots/index.jsx";
+import { ColorAreaContext } from "../color-area/index.jsx";
+import { ColorFieldContext } from "../color-field/index.jsx";
+import { ColorSliderContext } from "../color-slider/index.jsx";
+import { ColorSwatchContext } from "../color-swatch/index.jsx";
+import { ColorSwatchPickerContext } from "../color-swatch-picker/index.jsx";
+import { ColorWheelContext } from "../color-wheel/index.jsx";
+import { liveOptions } from "../utils/live.jsx";
+/** RAC `ColorPickerContext`. */
+export const ColorPickerContext = resumableContext(createContext(null, { id: "rv-color-picker" }));
+/** RAC `ColorPickerStateContext`. */
+export const ColorPickerStateContext = resumableContext(createContext(null, { id: "rv-color-picker-state" }));
+/**
+ * A ColorPicker synchronizes a color value between multiple React Aria color components.
+ * It simplifies building color pickers with customizable layouts via composition.
+ */
+export function ColorPicker(props) {
+    const ctx = slottedContext(ColorPickerContext, props.slot);
+    const merged = mergeProps(ctx, props);
+    // Live props: a controlled `value={c()}` stays live (accessor; the state reads it, never writes it).
+    const state = createColorPickerState(liveOptions(merged, [], ["value"]));
+    const color = () => getColor(state);
+    const rp = renderProps({ children: merged.children, values: { color } });
+    const onChange = (value) => setColor(state, value);
+    const shared = { value: color, onChange };
+    const children = rp.children;
+    return (<Provider values={[
+            [ColorPickerStateContext, state],
+            [ColorSliderContext, shared],
+            [ColorAreaContext, shared],
+            [ColorWheelContext, shared],
+            [ColorFieldContext, shared],
+            [ColorSwatchContext, { color }],
+            [ColorSwatchPickerContext, shared],
+        ]}>
+      {children()}
+    </Provider>);
+}

package/color-slider/behaviour.d.ts

@@ -0,0 +1,103 @@
+import { type ColorSliderProps, type ColorSliderState } from "@rivetjs/cdk/color";
+import { type AriaSliderThumbOptions } from "../slider/behaviour.jsx";
+import { type MaybeAccessor } from "../interactions/utils.js";
+type Bag = Record<string, unknown>;
+export interface AriaColorSliderProps extends ColorSliderProps {
+    id?: string;
+    /** The content of the visible label (RA `label`; truthy = a label renders). */
+    label?: unknown;
+    /** The name of the input element, used when submitting an HTML form. */
+    name?: string;
+    /** The `<form>` element to associate the input with. */
+    form?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+/** useMove bookkeeping of one move target (JSON). */
+interface MoveState {
+    didMove: boolean;
+    lastPosition: {
+        pageX: number;
+        pageY: number;
+    } | null;
+    id: number | null;
+}
+/** Rivet: the hook-local state of a color slider (plain JSON). */
+export interface ColorSliderInteraction {
+    track: MoveState;
+    thumb: MoveState;
+}
+export declare const createColorSliderInteraction: () => ColorSliderInteraction;
+export interface AriaColorSliderOptions extends Omit<AriaColorSliderProps, "isDisabled"> {
+    /** Whether the slider is disabled: a value, or an accessor that stays live (live props P5; handlers read it at event time). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+    /** The track element (RA `trackRef`). */
+    trackRef: () => Element | null | undefined;
+    /** The input element (RA `inputRef`). */
+    inputRef: () => HTMLInputElement | null | undefined;
+    /** Rivet: the locale (RA `useLocale()`). */
+    locale: string;
+    /** Rivet: the text direction (RA `useLocale()`). */
+    direction: "ltr" | "rtl";
+    /** Rivet: the hook-local JSON state (`createColorSliderInteraction()`). */
+    interaction: ColorSliderInteraction;
+}
+export interface ColorSliderAria {
+    /** Props for the label element. */
+    labelProps: Bag;
+    /** Props for the track element. */
+    trackProps: Bag;
+    /** Props for the thumb element. */
+    thumbProps: Bag;
+    /** Props for the visually hidden range input element. */
+    inputProps: Bag;
+    /** Props for the output element, displaying the value of the color slider. */
+    outputProps: Bag;
+}
+/** The slider props RA passes to useSlider (default aria-label: the channel name). */
+export declare function colorSliderAriaLabel(opts: AriaColorSliderOptions, state: ColorSliderState): string | undefined;
+/** The thumb options RA passes to useSliderThumb. */
+export declare function colorSliderThumbOptions(opts: AriaColorSliderOptions): AriaSliderThumbOptions;
+/** RA `generateBackground`: the channel gradient of the track. */
+export declare function colorSliderTrackBackground(opts: Pick<AriaColorSliderOptions, "orientation" | "direction">, state: ColorSliderState): string;
+/** Inline style of the track: useSlider's track style + forced colors off + the gradient. */
+export declare function colorSliderTrackStyle(opts: Pick<AriaColorSliderOptions, "orientation" | "direction">, state: ColorSliderState): Record<string, string>;
+/** Inline style of the thumb: useSliderThumb's position + forced colors off (Rivet: the free / snapping position, `snap`). */
+export declare function colorSliderThumbStyle(opts: Pick<AriaColorSliderOptions, "orientation" | "direction">, state: ColorSliderState): Record<string, string>;
+/** Visually hidden style of the range input (useVisuallyHidden + opacity / full size / no pointer events). */
+export declare const colorSliderInputStyle: {
+    readonly border: "0";
+    readonly clip: "rect(0 0 0 0)";
+    readonly clipPath: "inset(50%)";
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly padding: "0";
+    readonly position: "absolute";
+    readonly whiteSpace: "nowrap";
+    readonly opacity: "0.0001";
+    readonly width: "100%";
+    readonly height: "100%";
+    readonly pointerEvents: "none";
+};
+/** `aria-valuetext` of the input: the channel value, then the hue name (hue) or color name (not alpha). */
+export declare function colorSliderInputValueText(opts: Pick<AriaColorSliderOptions, "locale">, state: ColorSliderState): string;
+/**
+ * Provides the behavior and accessibility implementation for a color slider component.
+ * Color sliders allow users to adjust an individual channel of a color value.
+ */
+export declare function colorSliderProps(opts: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria;
+/** Track `pointerdown` (useSlider: the closest thumb jumps to the press, then useMove drags it). */
+export declare function colorSliderTrackPointerDown(e: PointerEvent, opts: AriaColorSliderOptions, state: ColorSliderState): void;
+/** Thumb `keydown` (useSliderThumb: useKeyboard PageUp / PageDown / Home / End, then useMove arrows). */
+export declare function colorSliderThumbKeyDown(e: KeyboardEvent, opts: AriaColorSliderOptions, state: ColorSliderState): void;
+/** Thumb `pointerdown` (useMove, then useSliderThumb's onPointerDown: focus the input, dragging). */
+export declare function colorSliderThumbPointerDown(e: PointerEvent, opts: AriaColorSliderOptions, state: ColorSliderState): void;
+/** Range input `change` / `input`. */
+export declare function colorSliderInputChange(e: Event, opts: AriaColorSliderOptions, state: ColorSliderState): void;
+/** Range input `focus`. */
+export declare function colorSliderInputFocus(e: FocusEvent, opts: AriaColorSliderOptions, state: ColorSliderState): void;
+/** Range input `blur`. */
+export declare function colorSliderInputBlur(e: FocusEvent, opts: AriaColorSliderOptions, state: ColorSliderState): void;
+export {};