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

package/color-swatch-picker/index.d.ts

@@ -0,0 +1,62 @@
+import { type Color, type ColorInput } from "@rivetjs/cdk/color";
+import { type ListBoxItemRenderProps, type ListBoxRenderProps } from "../listbox/index.jsx";
+import { type ChildrenOrFunction, type ContextValue, type RefValue, type SlotProps, type StyleRenderProps } from "../slots/index.jsx";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type DOMRenderProps } from "../utils/render.js";
+import type { HoverEvents, PressEvents } from "../utils/types.js";
+export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, "isDropTarget"> {
+}
+export interface ColorSwatchPickerProps extends StyleRenderProps<ColorSwatchPickerRenderProps>, DOMRenderProps<"div", ColorSwatchPickerRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The current value (controlled): a two-way Signal, an accessor or a fixed value. */
+    value?: ColorInput;
+    /** The default value (uncontrolled). */
+    defaultValue?: string | Color;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: Color) => void;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-ColorSwatchPicker'
+     */
+    class?: StyleRenderProps<ColorSwatchPickerRenderProps>["class"];
+    /** The children of the ColorSwatchPicker. */
+    children?: unknown;
+    /**
+     * Whether the items are arranged in a stack or grid.
+     *
+     * @default 'grid'
+     */
+    layout?: "grid" | "stack";
+    /** The element's id. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `ColorSwatchPickerContext`. */
+export declare const ColorSwatchPickerContext: import("@rivetjs/reactivity").Context<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>;
+/** A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them. */
+export declare function ColorSwatchPicker(props: ColorSwatchPickerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRenderProps, "selectionMode" | "selectionBehavior"> {
+    /** The color of the swatch. */
+    color: () => Color;
+}
+export interface ColorSwatchPickerItemProps extends StyleRenderProps<ColorSwatchPickerItemRenderProps>, DOMRenderProps<"div", ColorSwatchPickerItemRenderProps>, HoverEvents, PressEvents, 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-ColorSwatchPickerItem'
+     */
+    class?: StyleRenderProps<ColorSwatchPickerItemRenderProps>["class"];
+    /** The children of the item. A function may be provided to alter the children based on component state. */
+    children?: ChildrenOrFunction<ColorSwatchPickerItemRenderProps>;
+    /** The color of the swatch. */
+    color: string | Color;
+    /** Whether the color swatch is disabled. */
+    isDisabled?: boolean;
+    ref?: RefValue<HTMLElement>;
+}
+/** An item in a ColorSwatchPicker (RAC `ColorSwatchPickerItem`). */
+export declare function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/color-swatch-picker/index.jsx

@@ -0,0 +1,95 @@
+// Ported from react-aria-components `ColorSwatchPicker` (packages/react-aria-components/src/ColorSwatchPicker.tsx), Apache-2.0, © Adobe.
+// A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+// Rivet:
+// - built on the RAC ListBox port (`../listbox/index.tsx`, live collection: the rendered options are the collection).
+// - the selection is the color state, not a copy: the listbox gets the single-key backing `selectedKey` = an accessor of
+//   `getColor(state).toString("hexa")` with `selectedKeyControlled` (never written); `onSelectionChange` sets the color.
+// - RAC's `Map<string, Color>` (filled from item effects) is a plain record key → color string (`ColorMapContext`):
+//   items register while rendering (server included), so it serializes; a missing entry falls back to `parseColor(key)`.
+// - `ColorSwatchContext` gets the item's color as a string (Color instances are not serializable); item render props
+//   carry `color` as an accessor.
+// `render` (RAC DOMRenderProps) on the picker (`<div>`) and item (`<div>`): passed to ListBox / ListBoxItem (render props of the list parts; the item's lack `color`).
+import { createContext, onCleanup, provide, useContext } from "@rivetjs/reactivity";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { createColorPickerState, getColor, parseColor, setColor, toColor } from "@rivetjs/cdk/color";
+import { getStringsForLocale, useLocale } from "@rivetjs/cdk/i18n";
+import { ColorSwatchContext } from "../color-swatch/index.jsx";
+import { ListBox, ListBoxItem } from "../listbox/index.jsx";
+import { contextProps, resumableContext, } from "../slots/index.jsx";
+import { globalDOMProps } from "../utils/dom-props.js";
+import {} from "../utils/render.js";
+import { colorSwatchPickerMessages } from "./intl.js";
+/** RAC `ColorSwatchPickerContext`. */
+export const ColorSwatchPickerContext = resumableContext(createContext(null, { id: "rv-color-swatch-picker" }));
+/** RAC `ColorMapContext` (internal): `toString("hexa")` key → the item's color string. */
+const ColorMapContext = resumableContext(createContext(null, { id: "rv-color-swatch-picker-map" }));
+/** A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them. */
+export function ColorSwatchPicker(props) {
+    const [merged, ref] = contextProps(props, props.ref, ColorSwatchPickerContext);
+    const state = createColorPickerState(merged);
+    const colorMap = {};
+    const { locale } = useLocale();
+    const ariaLabel = merged["aria-label"] || (!merged["aria-labelledby"] ? getStringsForLocale(colorSwatchPickerMessages, locale).colorSwatchPicker : undefined);
+    const dom = globalDOMProps(merged, ["style"]);
+    const children = merged.children;
+    const listProps = {
+        ...dom,
+        ref,
+        id: merged.id,
+        slot: merged.slot,
+        render: merged.render,
+        class: merged.class || "rv-ColorSwatchPicker",
+        style: merged.style,
+        "aria-label": ariaLabel,
+        "aria-labelledby": merged["aria-labelledby"],
+        "aria-describedby": merged["aria-describedby"],
+        "aria-details": merged["aria-details"],
+        children,
+        layout: merged.layout || "grid",
+        selectionMode: "single",
+        disallowEmptySelection: true,
+        selectedKey: () => getColor(state).toString("hexa"),
+        selectedKeyControlled: true,
+        onSelectionChange: (keys) => {
+            // single select, 'all' cannot occur. appease typescript.
+            if (keys !== "all") {
+                const key = [...keys][0];
+                if (key != null)
+                    setColor(state, toColor(colorMap[key] ?? null) ?? parseColor(String(key)));
+            }
+        },
+    };
+    return provide(ColorMapContext, colorMap, () => <ListBox {...listProps}/>);
+}
+/** An item in a ColorSwatchPicker (RAC `ColorSwatchPickerItem`). */
+export function ColorSwatchPickerItem(props) {
+    const propColor = props.color || "#0000";
+    const color = typeof propColor === "string" ? parseColor(propColor) : propColor;
+    const key = color.toString("hexa");
+    const colorString = color.toString();
+    const { locale } = useLocale();
+    const map = useContext(ColorMapContext);
+    if (map) {
+        map[key] = colorString;
+        onCleanup(() => {
+            if (map[key] === colorString)
+                delete map[key];
+        });
+    }
+    const colorOf = () => parseColor(colorString);
+    const className = props.class || "rv-ColorSwatchPickerItem";
+    const style = props.style;
+    const children = props.children;
+    const itemProps = {
+        ...props,
+        // ColorSwatchPickerItem is never a link.
+        id: key,
+        textValue: color.getColorName(locale),
+        // Unconditional arrows (resumable): RAC `wrap` adds `color` to the render props.
+        class: (v) => (typeof className === "function" ? className({ ...v, color: colorOf }) : className),
+        style: (v) => (typeof style === "function" ? style({ ...v, color: colorOf }) : style),
+        children: (v) => provide(ColorSwatchContext, { color: colorString }, () => typeof children === "function" && !isSlot(children) ? children({ ...v, color: colorOf }) : renderSlot(children)),
+    };
+    delete itemProps.color;
+    return <ListBoxItem {...itemProps}/>;
+}

package/color-swatch-picker/intl.d.ts

@@ -0,0 +1,3 @@
+import type { LocalizedStrings } from "@rivetjs/cdk/i18n";
+export type ColorSwatchPickerMessageKey = "colorSwatchPicker";
+export declare const colorSwatchPickerMessages: LocalizedStrings<ColorSwatchPickerMessageKey>;

package/color-swatch-picker/intl.js

@@ -0,0 +1,104 @@
+export const colorSwatchPickerMessages = {
+    "ar-AE": {
+        colorSwatchPicker: "تغييرات الألوان",
+    },
+    "bg-BG": {
+        colorSwatchPicker: "Цветови мостри",
+    },
+    "cs-CZ": {
+        colorSwatchPicker: "Vzorky barev",
+    },
+    "da-DK": {
+        colorSwatchPicker: "Farveprøver",
+    },
+    "de-DE": {
+        colorSwatchPicker: "Farbfelder",
+    },
+    "el-GR": {
+        colorSwatchPicker: "Χρωματικά δείγματα",
+    },
+    "en-US": {
+        colorSwatchPicker: "Color swatches",
+    },
+    "es-ES": {
+        colorSwatchPicker: "Muestras de colores",
+    },
+    "et-EE": {
+        colorSwatchPicker: "Värvinäidised",
+    },
+    "fi-FI": {
+        colorSwatchPicker: "Värimallit",
+    },
+    "fr-FR": {
+        colorSwatchPicker: "Échantillons de couleurs",
+    },
+    "he-IL": {
+        colorSwatchPicker: "דוגמיות צבע",
+    },
+    "hr-HR": {
+        colorSwatchPicker: "Uzorci boja",
+    },
+    "hu-HU": {
+        colorSwatchPicker: "Színtárak",
+    },
+    "it-IT": {
+        colorSwatchPicker: "Campioni di colore",
+    },
+    "ja-JP": {
+        colorSwatchPicker: "カラースウォッチ",
+    },
+    "ko-KR": {
+        colorSwatchPicker: "색상 견본",
+    },
+    "lt-LT": {
+        colorSwatchPicker: "Spalvų pavyzdžiai",
+    },
+    "lv-LV": {
+        colorSwatchPicker: "Krāsu paraugi",
+    },
+    "nb-NO": {
+        colorSwatchPicker: "Fargekart",
+    },
+    "nl-NL": {
+        colorSwatchPicker: "kleurstalen",
+    },
+    "pl-PL": {
+        colorSwatchPicker: "Próbki kolorów",
+    },
+    "pt-BR": {
+        colorSwatchPicker: "Amostras de cores",
+    },
+    "pt-PT": {
+        colorSwatchPicker: "Amostras de cores",
+    },
+    "ro-RO": {
+        colorSwatchPicker: "Specimene de culoare",
+    },
+    "ru-RU": {
+        colorSwatchPicker: "Цветовые образцы",
+    },
+    "sk-SK": {
+        colorSwatchPicker: "Vzorkovníky farieb",
+    },
+    "sl-SI": {
+        colorSwatchPicker: "Barvne palete",
+    },
+    "sr-SP": {
+        colorSwatchPicker: "Uzorci boje",
+    },
+    "sv-SE": {
+        colorSwatchPicker: "Färgrutor",
+    },
+    "tr-TR": {
+        colorSwatchPicker: "Renk örnekleri",
+    },
+    "uk-UA": {
+        colorSwatchPicker: "Зразки кольорів",
+    },
+    "zh-CN": {
+        colorSwatchPicker: "颜色色板",
+    },
+    "zh-TW": {
+        colorSwatchPicker: "色票",
+    },
+};

package/color-thumb/index.d.ts

@@ -0,0 +1,85 @@
+import type { Ref } from "@rivetjs/runtime/jsx-runtime";
+import type { Color } from "@rivetjs/cdk/color";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type RefValue, type RenderProps, type StyleObject } from "../slots/index.jsx";
+import type { HoverEvents } from "../utils/types.js";
+import { type MaybeAccessor } from "../interactions/utils.js";
+/** @internal Value of `InternalColorThumbContext` (provided by ColorArea / ColorSlider / ColorWheel). */
+export interface InternalColorThumbContextValue {
+    /** `state.getDisplayColor()` (accessor). */
+    displayColor: () => Color;
+    /** `state.isDragging` (accessor). */
+    isDragging: () => boolean;
+    /** Rivet: whether the thumb animates to its step after a free drag (ColorSlider; accessor). */
+    isSnapping?: () => boolean;
+    /** Thumb handlers (static, R2 arrows) + `role`. */
+    thumbProps: Record<string, unknown>;
+    /** `thumbProps.style` (accessor). */
+    thumbStyle: () => StyleObject;
+    inputXRef: Ref<HTMLInputElement>;
+    inputYRef?: Ref<HTMLInputElement>;
+    /** Style of the visually hidden input(s) (a spread cannot carry `style`). */
+    inputStyle: StyleObject;
+    /** Attributes + handlers of the (x) input (accessor; read inside a spread binding; no `style`). */
+    xInputProps: () => Record<string, unknown>;
+    yInputProps?: () => Record<string, unknown>;
+    /** The parent's `isDisabled`: a value, or an accessor while the parent's prop is live (live props P5). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+}
+/** @internal RAC `InternalColorThumbContext`. */
+export declare const InternalColorThumbContext: import("@rivetjs/reactivity").Context<InternalColorThumbContextValue | null>;
+export interface ColorThumbRenderProps {
+    /** The selected color, excluding the alpha channel. */
+    color: () => Color;
+    /**
+     * Whether this thumb is currently being dragged.
+     *
+     * @selector [data-dragging]
+     */
+    isDragging: () => boolean;
+    /**
+     * Rivet: whether the thumb is animating to its stepped position after a free drag (ColorSlider `snap="release"`).
+     *
+     * @selector [data-snapping]
+     */
+    isSnapping: () => boolean;
+    /**
+     * Whether the thumb is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+    /**
+     * Whether the thumb is currently focused.
+     *
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the thumb is keyboard focused.
+     *
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+    /**
+     * Whether the thumb is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+}
+export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, DOMRenderProps<"div", ColorThumbRenderProps>, 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-ColorThumb'
+     */
+    class?: RenderProps<ColorThumbRenderProps>["class"];
+    ref?: RefValue<HTMLDivElement>;
+}
+/**
+ * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust
+ * the color value.
+ */
+export declare function ColorThumb(props: ColorThumbProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/color-thumb/index.jsx

@@ -0,0 +1,93 @@
+// Ported from react-aria-components `ColorThumb` (packages/react-aria-components/src/ColorThumb.tsx), Apache-2.0, © Adobe.
+// A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust
+// the color value. It renders the parent's visually hidden range input(s).
+// Rivet:
+// - `InternalColorThumbContext` carries accessors instead of per-render values: `displayColor()`,
+//   `isDragging()`, `thumbStyle()`, `xInputProps()` / `yInputProps()` (bags of attribute values + R2 handler
+//   arrows built by the parent `.tsx`, spread inside a binding), static `thumbProps` handlers, `ref()` input refs.
+// - render props are accessors (`isDragging()`, `color()`); `class` / `style` may be functions of them.
+// - Rivet addition: `isSnapping()` render prop + `data-snapping` (ColorSlider: the thumb animates to its step after a
+//   free drag, `@rivetjs/cdk/slider` `snap="release"`; always false in ColorArea / ColorWheel).
+// - hover / focus ring: react-aria useHover on the thumb, useFocusRing on the inputs (signals; nothing runs
+//   before the first interaction).
+// `render` (RAC DOMRenderProps): given, the attributes object (reactive entries are accessors) goes to `render(attrs, renderProps)` instead of the default element.
+import { createContext, useContext, untrack } from "@rivetjs/reactivity";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { resumableContext, renderPropsOf } from "../slots/index.jsx";
+import { read } from "../interactions/utils.js";
+/** @internal RAC `InternalColorThumbContext`. */
+export const InternalColorThumbContext = resumableContext(createContext(null, { id: "rv-color-thumb" }));
+/** Global events the thumb handles itself (chained through `mergeProps`). */
+const OWNED = ["style", "id", "render"];
+/** `data-disabled` of a live parent `isDisabled` (a returned arrow: resumable symbol; goes into the spread bag). */
+function liveDisabledAttr(flag) {
+    return () => (flag() ? "true" : undefined);
+}
+/**
+ * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust
+ * the color value.
+ */
+export function ColorThumb(props) {
+    const ctx = useContext(InternalColorThumbContext);
+    if (!ctx)
+        throw new Error("ColorThumb must be rendered inside a ColorArea, ColorSlider or ColorWheel.");
+    const { displayColor, isDragging, isSnapping: snapping, thumbProps, thumbStyle, inputStyle, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false, } = ctx;
+    const { onHoverStart, onHoverEnd, onHoverChange } = props;
+    const { focusProps, isFocused, isFocusVisible } = useFocusRing();
+    const { hoverProps: hover, isHovered } = hoverProps({ onHoverStart, onHoverEnd, onHoverChange }, props);
+    const values = {
+        color: displayColor,
+        isHovered,
+        isDragging,
+        // Rivet: an inline arrow (a destructuring-default arrow is not resume-compiled); ColorArea / ColorWheel give none.
+        isSnapping: () => (snapping ? snapping() : false),
+        isFocused,
+        isFocusVisible,
+        isDisabled: () => !!read(isDisabled),
+    };
+    const rp = untrack(() => renderPropsOf(props, { defaultClassName: "rv-ColorThumb", values }));
+    // RAC defaultStyle = thumbProps.style + backgroundColor: both change while dragging, so resolved per binding run.
+    const ownStyle = props.style;
+    const style = () => {
+        const defaultStyle = { ...thumbStyle(), backgroundColor: displayColor().toString() };
+        const computed = typeof ownStyle === "function" ? ownStyle({ ...values, defaultStyle }) : ownStyle;
+        return { ...defaultStyle, ...computed };
+    };
+    const dom = globalDOMProps(props, OWNED);
+    // `data-disabled` goes through the spread bag (an accessor while the parent's `isDisabled` is 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 enabled.
+    const disabledAttr = typeof isDisabled === "function" ? liveDisabledAttr(isDisabled) : isDisabled ? "true" : undefined;
+    const merged = disabledAttr ? mergeProps(thumbProps, hover, dom, { "data-disabled": disabledAttr }) : mergeProps(thumbProps, hover, dom);
+    const ref = props.ref;
+    const children = rp.children;
+    if (props.render) {
+        const attrs = {
+            ...merged,
+            ref: ref,
+            class: () => rp.class(),
+            style,
+            "data-hovered": () => (isHovered() ? "true" : undefined),
+            "data-dragging": () => (isDragging() ? "true" : undefined),
+            "data-snapping": () => (values.isSnapping() ? "true" : undefined),
+            "data-focused": () => (isFocused() ? "true" : undefined),
+            "data-focus-visible": () => (isFocusVisible() ? "true" : undefined),
+            "data-disabled": disabledAttr,
+            children: () => [
+                <input ref={inputXRef} style={inputStyle} {...mergeProps(xInputProps(), focusProps)}/>,
+                yInputProps && inputYRef ? <input ref={inputYRef} style={inputStyle} {...mergeProps(yInputProps(), focusProps)}/> : null,
+                children(),
+            ],
+        };
+        return props.render(attrs, values);
+    }
+    return (<div {...merged} ref={ref} class={rp.class()} style={style()} data-hovered={isHovered() ? "true" : undefined} data-dragging={isDragging() ? "true" : undefined} data-snapping={values.isSnapping() ? "true" : undefined} data-focused={isFocused() ? "true" : undefined} data-focus-visible={isFocusVisible() ? "true" : undefined}>
+      <input ref={inputXRef} style={inputStyle} {...mergeProps(xInputProps(), focusProps)}/>
+      {yInputProps && inputYRef ? <input ref={inputYRef} style={inputStyle} {...mergeProps(yInputProps(), focusProps)}/> : null}
+      {children()}
+    </div>);
+}

package/color-wheel/behaviour.d.ts

@@ -0,0 +1,123 @@
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { type ColorWheelProps, type ColorWheelState } from "@rivetjs/cdk/color";
+export interface AriaColorWheelProps extends ColorWheelProps {
+    /** The element's unique identifier. */
+    id?: string;
+    /** The name of the input element, used when submitting an HTML form. */
+    name?: string;
+    /** The `<form>` element to associate the input with (id of a `<form>` in the same document). */
+    form?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    "aria-errormessage"?: string;
+}
+export interface AriaColorWheelOptions extends AriaColorWheelProps {
+    /** The outer radius of the color wheel. */
+    outerRadius: number;
+    /** The inner radius of the color wheel. */
+    innerRadius: number;
+}
+interface MoveState {
+    didMove: boolean;
+    lastPosition: {
+        pageX: number;
+        pageY: number;
+    } | null;
+    id: number | null;
+}
+/** Rivet: the hook's `useRef` values (JSON, resumable). */
+export interface ColorWheelInteraction {
+    readonly refs: {
+        /** `currentPosition` ref. */
+        position: {
+            x: number;
+            y: number;
+        } | null;
+        /** `currentPointer` ref: `active` false = `undefined` upstream. */
+        pointer: {
+            active: boolean;
+            id: number | null;
+        };
+        /** `isOnTrack` ref. */
+        onTrack: boolean;
+        moveThumb: MoveState;
+        moveTrack: MoveState;
+        formReset: boolean;
+    };
+}
+/** Rivet options of the free functions: hook props + refs + render-time locale. */
+export interface ColorWheelAriaOptions extends Omit<AriaColorWheelOptions, "isDisabled"> {
+    /** Whether the color wheel is disabled: a value, or an accessor that stays live (live props P5; handlers read it at event time). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+    /** The visually hidden range input (`inputRef`). */
+    inputRef: () => HTMLInputElement | undefined;
+    /** Rivet: locale (`useLocale().locale`, resolved at render). */
+    locale: string;
+    /** Rivet: the hook-local state (`createColorWheelInteraction()`). */
+    interaction: ColorWheelInteraction;
+}
+export interface ColorWheelAria {
+    /** Props for the track element. */
+    trackProps: Record<string, unknown>;
+    /** Props for the thumb element. */
+    thumbProps: Record<string, unknown>;
+    /** Props for the visually hidden range input element. */
+    inputProps: Record<string, unknown>;
+}
+/** Rivet: the hook-local state of one color wheel. */
+export declare function createColorWheelInteraction(): ColorWheelInteraction;
+/** Track `pointerdown` (RA trackInteractions: track down + track useMove). No-op when disabled. */
+export declare function colorWheelTrackPointerDown(e: PointerEvent, props: ColorWheelAriaOptions, state: ColorWheelState): void;
+/** Thumb `pointerdown` (RA thumbInteractions: thumb down + thumb useMove). No-op when disabled. */
+export declare function colorWheelThumbPointerDown(e: PointerEvent, props: ColorWheelAriaOptions, state: ColorWheelState): void;
+/** Thumb `keydown` (RA useKeyboard shortcuts PageUp / PageDown + useMove arrow keys). */
+export declare function colorWheelThumbKeyDown(e: KeyboardEvent, props: ColorWheelAriaOptions, state: ColorWheelState): void;
+/** Input `change`. */
+export declare function colorWheelInputChange(e: Event, _props: ColorWheelAriaOptions, state: ColorWheelState): void;
+/** Rivet: input `focus` installs `useFormReset` once. */
+export declare function colorWheelInputFocus(_e: FocusEvent, props: ColorWheelAriaOptions, state: ColorWheelState): void;
+/** Track style: size, conic hue gradient, ring clip path. */
+export declare function colorWheelTrackStyle(props: Omit<AriaColorWheelOptions, "isDisabled">): Record<string, string>;
+/** Thumb style: absolute position on the ring (reads the state). */
+export declare function colorWheelThumbStyle(props: Omit<AriaColorWheelOptions, "isDisabled">, state: ColorWheelState): Record<string, string>;
+/** Input labelling (`useLabels`; default `aria-label` = the localized hue channel name). */
+export declare function colorWheelInputLabels(props: ColorWheelAriaOptions, state: ColorWheelState): {
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+/** Input range attributes (strings, as upstream). */
+export declare function colorWheelInputRange(state: ColorWheelState): {
+    min: string;
+    max: string;
+    step: string;
+};
+/** Input `aria-valuetext` ("<hue>°, <hue name>"). */
+export declare function colorWheelInputValueText(props: {
+    locale: string;
+}, state: ColorWheelState): string;
+/** Input value. */
+export declare const colorWheelInputValue: (state: ColorWheelState) => string;
+/** The visually hidden input style (same as the color area inputs). */
+export declare const colorWheelInputStyle: {
+    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";
+};
+/**
+ * react-aria `useColorWheel`: the three attribute bags (values read now; handler closures not resumable —
+ * components wire the exported handler functions from inline arrows instead).
+ */
+export declare function colorWheelProps(props: ColorWheelAriaOptions, state: ColorWheelState): ColorWheelAria;
+export {};