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

package/color-slider/behaviour.jsx

@@ -0,0 +1,234 @@
+// Ported from react-aria `useColorSlider` (packages/react-aria/src/color/useColorSlider.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - `useColorSlider(opts, state)` → `colorSliderProps(opts, state)`: RA's bags (`trackProps`, `thumbProps`,
+//   `inputProps`, `labelProps`, `outputProps`) over `sliderProps` / `sliderThumbProps` (`../slider/behaviour.tsx`)
+//   with the transient `sliderView(state)` (`@rivetjs/cdk/color`; upstream spreads useSliderState into the color
+//   slider state). Bags read the state when built (custom markup: build them inside a binding); the component binds
+//   the parts below (`colorSliderTrackStyle`, `colorSliderThumbStyle`, `colorSliderInputValueText`, …) as accessors.
+// - RA's handlers (useSlider track: mouse / pointer / touch down + useMove; useSliderThumb thumb: useKeyboard +
+//   useMove + down handlers; input change / focus / blur) are free functions `colorSlider<Part><Event>(e, opts,
+//   state)` building `sliderView(state)` inside (this module is `.tsx`: resumable); the useMove bookkeeping is JSON in
+//   `opts.interaction` (`createColorSliderInteraction()`).
+// - `trackRef` / `inputRef` are accessors (`ref()` from `@rivetjs/runtime/dom`).
+// - `inputProps['aria-valuetext'] += …` → `colorSliderInputValueText` (channel value + hue / color name).
+// - Deviation (`ColorSliderProps.snap`, default `"release"`, the Slider decision): the thumb follows the pointer freely
+//   and animates to the channel step on release (`getThumbPositionPercent`, `Motion1D` in `../slider/state.ts`).
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { getDisplayColor, getThumbValueLabel, getValue, sliderView } from "@rivetjs/cdk/color";
+import { getThumbMaxValue, getThumbMinValue, getThumbPositionPercent } from "../slider/state.js";
+import { sliderProps, sliderThumbBlur, sliderThumbFocus, sliderThumbInputChange, sliderThumbKeyDown, sliderThumbMove, sliderThumbMoveEnd, sliderThumbMoveStart, sliderThumbPointerDown, sliderThumbProps, sliderTrackMove, sliderTrackMoveEnd, sliderTrackMoveStart, sliderTrackPointerDown, } from "../slider/behaviour.jsx";
+import { moveKeyDown, movePointerDown } from "../interactions/move.jsx";
+import { colorAreaInputStyle } from "../color-area/behaviour.jsx";
+import { read } from "../interactions/utils.js";
+export const createColorSliderInteraction = () => ({
+    track: { didMove: false, lastPosition: null, id: null },
+    thumb: { didMove: false, lastPosition: null, id: null },
+});
+/** The slider props RA passes to useSlider (default aria-label: the channel name). */
+export function colorSliderAriaLabel(opts, state) {
+    // Provide a default aria-label if there is no other label provided.
+    if (!opts.label && !opts["aria-label"] && !opts["aria-labelledby"]) {
+        return getValue(state).getChannelName(state.channel, opts.locale);
+    }
+    return opts["aria-label"];
+}
+/** The thumb options RA passes to useSliderThumb. */
+export function colorSliderThumbOptions(opts) {
+    return {
+        index: 0,
+        orientation: opts.orientation,
+        isDisabled: opts.isDisabled,
+        name: opts.name,
+        form: opts.form,
+        trackRef: opts.trackRef,
+        inputRef: opts.inputRef,
+        direction: opts.direction,
+    };
+}
+/** RA `generateBackground`: the channel gradient of the track. */
+export function colorSliderTrackBackground(opts, state) {
+    const value = getDisplayColor(state);
+    const channel = state.channel;
+    const view = sliderView(state);
+    let to;
+    if (opts.orientation === "vertical") {
+        to = "top";
+    }
+    else if (opts.direction === "ltr") {
+        to = "right";
+    }
+    else {
+        to = "left";
+    }
+    switch (channel) {
+        case "hue": {
+            const stops = [0, 60, 120, 180, 240, 300, 360].map((hue) => value.withChannelValue("hue", hue).toString("css")).join(", ");
+            return `linear-gradient(to ${to}, ${stops})`;
+        }
+        case "lightness": {
+            // We have to add an extra color stop in the middle so that the hue shows up at all.
+            // Otherwise it will always just be black to white.
+            const min = getThumbMinValue(view, 0);
+            const max = getThumbMaxValue(view, 0);
+            const start = value.withChannelValue(channel, min).toString("css");
+            const middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
+            const end = value.withChannelValue(channel, max).toString("css");
+            return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+        }
+        case "saturation":
+        case "brightness":
+        case "red":
+        case "green":
+        case "blue":
+        case "alpha": {
+            const start = value.withChannelValue(channel, getThumbMinValue(view, 0)).toString("css");
+            const end = value.withChannelValue(channel, getThumbMaxValue(view, 0)).toString("css");
+            return `linear-gradient(to ${to}, ${start}, ${end})`;
+        }
+        default:
+            throw new Error("Unknown color channel: " + channel);
+    }
+}
+/** Inline style of the track: useSlider's track style + forced colors off + the gradient. */
+export function colorSliderTrackStyle(opts, state) {
+    return { position: "relative", touchAction: "none", forcedColorAdjust: "none", background: colorSliderTrackBackground(opts, state) };
+}
+/** Inline style of the thumb: useSliderThumb's position + forced colors off (Rivet: the free / snapping position, `snap`). */
+export function colorSliderThumbStyle(opts, state) {
+    const view = sliderView(state);
+    const vertical = (opts.orientation ?? view.orientation) === "vertical";
+    let thumbPosition = getThumbPositionPercent(view, 0);
+    if (vertical || opts.direction === "rtl") {
+        thumbPosition = 1 - thumbPosition;
+    }
+    return {
+        position: "absolute",
+        [vertical ? "top" : "left"]: `${thumbPosition * 100}%`,
+        transform: "translate(-50%, -50%)",
+        touchAction: "none",
+        forcedColorAdjust: "none",
+    };
+}
+/** Visually hidden style of the range input (useVisuallyHidden + opacity / full size / no pointer events). */
+export const colorSliderInputStyle = colorAreaInputStyle;
+/** `aria-valuetext` of the input: the channel value, then the hue name (hue) or color name (not alpha). */
+export function colorSliderInputValueText(opts, state) {
+    const value = getDisplayColor(state);
+    let text = getThumbValueLabel(state);
+    if (state.channel === "hue") {
+        text += `, ${value.getHueName(opts.locale)}`;
+    }
+    else if (state.channel !== "alpha") {
+        text += `, ${value.getColorName(opts.locale)}`;
+    }
+    return text;
+}
+/**
+ * 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 function colorSliderProps(opts, state) {
+    const view = sliderView(state);
+    const { groupProps, trackProps, labelProps, outputProps } = sliderProps({ ...opts, "aria-label": colorSliderAriaLabel(opts, state) }, view);
+    const thumb = sliderThumbProps(colorSliderThumbOptions(opts), view);
+    // A live `isDisabled` (accessor) keeps the handlers: they check the current value.
+    const isDisabled = typeof opts.isDisabled !== "function" && !!opts.isDisabled;
+    return {
+        trackProps: {
+            ...groupProps,
+            ...trackProps,
+            ...(isDisabled
+                ? {}
+                : {
+                    onPointerDown: (e) => colorSliderTrackPointerDown(e, opts, state),
+                }),
+            style: colorSliderTrackStyle(opts, state),
+        },
+        inputProps: {
+            ...thumb.inputProps,
+            "aria-valuetext": colorSliderInputValueText(opts, state),
+            onChange: (e) => colorSliderInputChange(e, opts, state),
+            onFocus: (e) => colorSliderInputFocus(e, opts, state),
+            onBlur: (e) => colorSliderInputBlur(e, opts, state),
+            style: colorSliderInputStyle,
+        },
+        thumbProps: {
+            ...(isDisabled
+                ? {}
+                : {
+                    onKeyDown: (e) => colorSliderThumbKeyDown(e, opts, state),
+                    onPointerDown: (e) => colorSliderThumbPointerDown(e, opts, state),
+                }),
+            style: colorSliderThumbStyle(opts, state),
+        },
+        labelProps,
+        outputProps,
+    };
+}
+// ---- handlers (RA merged props, in mergeProps order) ----
+function trackMove(opts, state) {
+    const track = opts.trackRef() ?? null;
+    return {
+        props: {
+            onMoveStart: () => sliderTrackMoveStart({}, sliderView(state)),
+            onMove: (e) => sliderTrackMove(e, { orientation: opts.orientation, direction: opts.direction }, sliderView(state), track),
+            onMoveEnd: () => sliderTrackMoveEnd({}, sliderView(state)),
+        },
+        state: opts.interaction.track,
+    };
+}
+function thumbMove(opts, state) {
+    const thumbOpts = colorSliderThumbOptions(opts);
+    return {
+        props: {
+            onMoveStart: () => sliderThumbMoveStart({}, thumbOpts, sliderView(state)),
+            onMove: (e) => sliderThumbMove(e, thumbOpts, sliderView(state)),
+            onMoveEnd: () => sliderThumbMoveEnd({}, thumbOpts, sliderView(state)),
+        },
+        state: opts.interaction.thumb,
+    };
+}
+/** Track `pointerdown` (useSlider: the closest thumb jumps to the press, then useMove drags it). */
+export function colorSliderTrackPointerDown(e, opts, state) {
+    if (read(opts.isDisabled))
+        return;
+    const track = e.currentTarget;
+    sliderTrackPointerDown(e, { orientation: opts.orientation, direction: opts.direction, isDisabled: opts.isDisabled }, sliderView(state), track);
+    movePointerDown(trackMove(opts, state), e);
+}
+/** Thumb `keydown` (useSliderThumb: useKeyboard PageUp / PageDown / Home / End, then useMove arrows). */
+export function colorSliderThumbKeyDown(e, opts, state) {
+    if (read(opts.isDisabled))
+        return;
+    sliderThumbKeyDown(e, colorSliderThumbOptions(opts), sliderView(state));
+    moveKeyDown(thumbMove(opts, state), e);
+}
+/** Thumb `pointerdown` (useMove, then useSliderThumb's onPointerDown: focus the input, dragging). */
+export function colorSliderThumbPointerDown(e, opts, state) {
+    if (read(opts.isDisabled))
+        return;
+    movePointerDown(thumbMove(opts, state), e);
+    sliderThumbPointerDown(e, colorSliderThumbOptions(opts), sliderView(state));
+}
+/** Range input `change` / `input`. */
+export function colorSliderInputChange(e, opts, state) {
+    sliderThumbInputChange(e, colorSliderThumbOptions(opts), sliderView(state));
+}
+/** Range input `focus`. */
+export function colorSliderInputFocus(e, opts, state) {
+    sliderThumbFocus(e, colorSliderThumbOptions(opts), sliderView(state));
+}
+/** Range input `blur`. */
+export function colorSliderInputBlur(e, opts, state) {
+    sliderThumbBlur(e, colorSliderThumbOptions(opts), sliderView(state));
+}

package/color-slider/index.d.ts

@@ -0,0 +1,40 @@
+import { type ColorSliderState } from "@rivetjs/cdk/color";
+import { type Orientation } from "../slider/state.js";
+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 AriaColorSliderProps } from "./behaviour.jsx";
+export * from "./behaviour.jsx";
+export interface ColorSliderRenderProps {
+    /**
+     * The orientation of the color slider.
+     *
+     * @selector [data-orientation="horizontal | vertical"]
+     */
+    orientation: () => Orientation;
+    /**
+     * Whether the color slider is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /** State of the color slider. */
+    state: ColorSliderState;
+}
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, "label">, RenderProps<ColorSliderRenderProps>, DOMRenderProps<"div", ColorSliderRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "onChange"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-ColorSlider'
+     */
+    class?: RenderProps<ColorSliderRenderProps>["class"];
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `ColorSliderContext`. */
+export declare const ColorSliderContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>;
+/** RAC `ColorSliderStateContext`. */
+export declare const ColorSliderStateContext: import("@rivetjs/reactivity").Context<ColorSliderState | null>;
+/**
+ * A color slider allows users to adjust an individual channel of a color value.
+ */
+export declare function ColorSlider(props: ColorSliderProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/color-slider/index.jsx

@@ -0,0 +1,162 @@
+// Ported from react-aria-components `ColorSlider` (packages/react-aria-components/src/ColorSlider.tsx), Apache-2.0, © Adobe.
+// A color slider allows users to adjust an individual channel of a color value.
+// Children: `<Label />`, `<SliderOutput />`, `<SliderTrack><ColorThumb /></SliderTrack>` (Slider parts, `../slider`).
+// Rivet:
+// - state = `createColorSliderState` (`@rivetjs/cdk/color`: plain signals + JSON); `value` = plain value, read-only
+//   accessor (ColorPicker) or two-way Signal (string | Color); `SliderStateContext` gets `sliderView(state)` (the
+//   transient slider view over the channel; RAC passes the color slider state, a slider state superset).
+// - the track gradient, thumb position and input value text are bindings (`colorSliderTrackStyle`, …); handlers are
+//   inline arrows over the `./behaviour.tsx` free functions (resumable).
+// - the `<Label>` children default to the channel name (RAC `LabelContext` `children`).
+// - render props are accessors (`isDisabled()`, `orientation()`); `state` is the serializable state object.
+// `render` (RAC DOMRenderProps): given, the attributes object (reactive entries are accessors) goes to `render(attrs, renderProps)` instead of the default element.
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { ref as createRef } from "@rivetjs/runtime/dom";
+import { createColorSliderState, getDisplayColor, getValue, sliderView } from "@rivetjs/cdk/color";
+import { isThumbSnapping } from "../slider/state.js";
+import { isColorSliderDragging } from "../color/slider-state.jsx";
+import { useLocale } from "@rivetjs/cdk/i18n";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { LabelContext } from "../label/index.jsx";
+import { sliderProps, sliderThumbProps } from "../slider/behaviour.jsx";
+import { SliderOutputContext, SliderStateContext, SliderTrackContext } from "../slider/index.jsx";
+import { Provider, contextProps, createSlot, renderPropsOf, resumableContext, } from "../slots/index.jsx";
+import { InternalColorThumbContext } from "../color-thumb/index.jsx";
+import { colorSliderAriaLabel, colorSliderInputBlur, colorSliderInputChange, colorSliderInputFocus, colorSliderInputStyle, colorSliderInputValueText, colorSliderThumbKeyDown, colorSliderThumbOptions, colorSliderThumbPointerDown, colorSliderThumbStyle, colorSliderTrackPointerDown, colorSliderTrackStyle, createColorSliderInteraction, } from "./behaviour.jsx";
+import { liveAssign, liveOptions } from "../utils/live.jsx";
+import { read } from "../interactions/utils.js";
+export * from "./behaviour.jsx";
+/** RAC `ColorSliderContext`. */
+export const ColorSliderContext = resumableContext(createContext(null, { id: "rv-color-slider" }));
+/** RAC `ColorSliderStateContext`. */
+export const ColorSliderStateContext = resumableContext(createContext(null, { id: "rv-color-slider-state" }));
+const OWNED = ["style", "id", "render"];
+/** `data-disabled` of a live `isDisabled` (a returned arrow: resumable symbol; goes into the spread bag). */
+function liveDisabledAttr(flag) {
+    return () => !!flag() || undefined;
+}
+/**
+ * A color slider allows users to adjust an individual channel of a color value.
+ */
+export function ColorSlider(props) {
+    const [ctxMerged, ref] = contextProps(props, props.ref, ColorSliderContext);
+    // Live props (P5): `isDisabled` and a controlled `value={c()}` become accessors (the slider state / handlers read
+    // them; the value is never written); the rest of the body is read once (untracked: a prop change never re-creates).
+    const merged = liveOptions(ctxMerged, ["isDisabled"], ["value"]);
+    return untrack(() => colorSlider(merged, ref));
+}
+function colorSlider(merged, ref) {
+    const { locale, direction } = useLocale();
+    const state = createColorSliderState({ ...merged, locale });
+    const trackRef = createRef();
+    const inputRef = createRef();
+    const initialLabel = !merged["aria-label"] && !merged["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    // A live `isDisabled` is an accessor: the handlers stay attached and check it at event time.
+    const isDisabled = merged.isDisabled;
+    const disabledFlag = typeof isDisabled === "function" ? liveDisabledAttr(isDisabled) : undefined;
+    const dropHandlers = !disabledFlag && !!isDisabled;
+    const orientation = merged.orientation ?? "horizontal";
+    const opts = {
+        channel: merged.channel,
+        orientation,
+        isDisabled,
+        id: merged.id,
+        name: merged.name,
+        form: merged.form,
+        label: initialLabel,
+        "aria-label": merged["aria-label"],
+        "aria-labelledby": merged["aria-labelledby"],
+        "aria-describedby": merged["aria-describedby"],
+        "aria-details": merged["aria-details"],
+        trackRef,
+        inputRef,
+        locale,
+        direction,
+        interaction: createColorSliderInteraction(),
+    };
+    const view = sliderView(state);
+    const { groupProps, trackProps, labelProps, outputProps } = sliderProps({ ...opts, "aria-label": untrack(() => colorSliderAriaLabel(opts, state)) }, view);
+    const thumb = sliderThumbProps(colorSliderThumbOptions(opts), view);
+    // RA re-renders with `label: false` when no Label renders: the group then gets the channel name as aria-label.
+    const labelledBy = groupProps["aria-labelledby"];
+    const ownLabelledBy = merged["aria-labelledby"];
+    const ownLabel = merged["aria-label"];
+    const channelName = untrack(() => getValue(state)).getChannelName(merged.channel, locale);
+    const { style: _trackStyle, ...trackAttrs } = trackProps;
+    const track = {
+        ...groupProps,
+        ...trackAttrs,
+        // Unconditional arrows (a conditional arrow is not resume-compiled).
+        "aria-labelledby": () => (!initialLabel || hasLabel() ? labelledBy : ownLabelledBy),
+        "aria-label": () => (!initialLabel ? ownLabel : hasLabel() ? undefined : channelName),
+        style: () => colorSliderTrackStyle(opts, state),
+        ...(dropHandlers ? {} : { onPointerDown: (e) => colorSliderTrackPointerDown(e, opts, state) }),
+        ref: trackRef,
+    };
+    const inputAttrs = thumb.inputProps;
+    const xInputProps = () => ({
+        ...inputAttrs,
+        "aria-valuetext": colorSliderInputValueText(opts, state),
+        onChange: (e) => colorSliderInputChange(e, opts, state),
+        onFocus: (e) => colorSliderInputFocus(e, opts, state),
+        onBlur: (e) => colorSliderInputBlur(e, opts, state),
+    });
+    const thumbProps = dropHandlers
+        ? { role: "presentation" }
+        : {
+            role: "presentation",
+            onKeyDown: (e) => colorSliderThumbKeyDown(e, opts, state),
+            onPointerDown: (e) => colorSliderThumbPointerDown(e, opts, state),
+        };
+    const thumbContext = {
+        displayColor: () => getDisplayColor(state),
+        isDragging: () => isColorSliderDragging(state),
+        isSnapping: () => isThumbSnapping(state.slider, 0),
+        thumbProps,
+        thumbStyle: () => colorSliderThumbStyle(opts, state),
+        inputXRef: inputRef,
+        inputStyle: colorSliderInputStyle,
+        xInputProps,
+        isDisabled,
+    };
+    const values = { orientation: () => orientation, isDisabled: () => !!read(isDisabled), state };
+    const rp = renderPropsOf(merged, { values, defaultClassName: "rv-ColorSlider" });
+    // `data-disabled` goes through the spread bag (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 (static).
+    const disabledAttr = disabledFlag ?? (isDisabled || undefined);
+    const dom = disabledAttr ? liveAssign(globalDOMProps(merged, OWNED), { "data-disabled": disabledAttr }) : globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const label = {
+        ...labelProps,
+        ref: labelRef,
+        children: channelName,
+    };
+    const providers = [
+        [ColorSliderStateContext, state],
+        [SliderStateContext, view],
+        [SliderTrackContext, track],
+        [SliderOutputContext, outputProps],
+        // RA label onClick (Safari focus) as an inline arrow here: a handler assigned onto the bag does not resume.
+        [LabelContext, label],
+        [InternalColorThumbContext, thumbContext],
+    ];
+    const children = rp.children;
+    if (merged.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-orientation": orientation,
+            "data-disabled": disabledAttr,
+            children: () => <Provider values={providers}>{children()}</Provider>,
+        };
+        return merged.render(attrs, values);
+    }
+    return (<div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-orientation={orientation}>
+      <Provider values={providers}>{children()}</Provider>
+    </div>);
+}

package/color-swatch/behaviour.d.ts

@@ -0,0 +1,40 @@
+import { type Color } from "@rivetjs/cdk/color";
+export interface AriaColorSwatchProps {
+    /** The color value to display in the swatch. */
+    color?: string | Color;
+    /**
+     * A localized accessible name for the color. By default, a description is generated from the color
+     * value, but this can be overridden if you have a more specific color name (e.g. Pantone colors).
+     */
+    colorName?: string;
+    /** The element's unique identifier. */
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+export interface ColorSwatchAria {
+    /** Props for the color swatch element. */
+    colorSwatchProps: {
+        role: "img";
+        "aria-roledescription": string;
+        "aria-label": string;
+        "aria-labelledby": string | undefined;
+        "aria-describedby": string | undefined;
+        "aria-details": string | undefined;
+        id: string;
+        style: {
+            backgroundColor: string;
+            forcedColorAdjust: "none";
+        };
+    };
+    /** The parsed color value of the swatch. */
+    color: Color;
+}
+/** The swatch color (`'#fff0'` — transparent — when none is given). */
+export declare function colorSwatchColor(value: string | Color | undefined): Color;
+/** react-aria `useColorSwatch`: attributes of the swatch element (role img, localized name, background). */
+export declare function colorSwatchProps(props: AriaColorSwatchProps & {
+    locale: string;
+}): ColorSwatchAria;

package/color-swatch/behaviour.js

@@ -0,0 +1,36 @@
+// Ported from react-aria `useColorSwatch` (packages/react-aria/src/color/useColorSwatch.ts), Apache-2.0, © Adobe.
+// Rivet: `useColorSwatch(props)` → `colorSwatchProps(props)` (RA's `{colorSwatchProps, color}`); `locale` is
+// passed in (resolved at render); `useId(props.id)` → `createId()` when no id is given. Pure: no handlers.
+import { createId } from "@rivetjs/cdk/id";
+import { getStringsForLocale } from "@rivetjs/cdk/i18n";
+import { parseColor } from "@rivetjs/cdk/color";
+import { colorAriaMessages } from "../color/aria-intl.js";
+/** The swatch color (`'#fff0'` — transparent — when none is given). */
+export function colorSwatchColor(value) {
+    const nonNullValue = value || "#fff0";
+    return typeof nonNullValue === "string" ? parseColor(nonNullValue) : nonNullValue;
+}
+/** react-aria `useColorSwatch`: attributes of the swatch element (role img, localized name, background). */
+export function colorSwatchProps(props) {
+    const color = colorSwatchColor(props.color);
+    const { locale } = props;
+    const strings = getStringsForLocale(colorAriaMessages, locale);
+    const id = props.id || createId();
+    let colorName = props.colorName;
+    if (!colorName) {
+        colorName = color.getChannelValue("alpha") === 0 ? strings.transparent : color.getColorName(locale);
+    }
+    return {
+        colorSwatchProps: {
+            role: "img",
+            "aria-roledescription": strings.colorSwatch,
+            "aria-label": [colorName, props["aria-label"] || ""].filter(Boolean).join(", "),
+            "aria-labelledby": props["aria-labelledby"] ? `${id} ${props["aria-labelledby"]}` : undefined,
+            "aria-describedby": props["aria-describedby"],
+            "aria-details": props["aria-details"],
+            id,
+            style: { backgroundColor: color.toString("css"), forcedColorAdjust: "none" },
+        },
+        color,
+    };
+}

package/color-swatch/index.d.ts

@@ -0,0 +1,29 @@
+import type { Color } from "@rivetjs/cdk/color";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ChildrenOrFunction, type ContextValue, type RefValue, type SlotProps, type StyleRenderProps } from "../slots/index.jsx";
+import { type AriaColorSwatchProps } from "./behaviour.js";
+export * from "./behaviour.js";
+export interface ColorSwatchRenderProps {
+    /** The color of the swatch. */
+    color: () => Color;
+}
+export interface ColorSwatchProps extends Omit<AriaColorSwatchProps, "color">, StyleRenderProps<ColorSwatchRenderProps>, DOMRenderProps<"div", ColorSwatchRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The color value to display in the swatch (Rivet: or an accessor of it). */
+    color?: string | Color | (() => string | Color | undefined);
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-ColorSwatch'
+     */
+    class?: StyleRenderProps<ColorSwatchRenderProps>["class"];
+    /** Rivet: RAC renders `children` through useRenderProps at runtime (untyped upstream); a function of the render props. */
+    children?: ChildrenOrFunction<ColorSwatchRenderProps>;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `ColorSwatchContext`. */
+export declare const ColorSwatchContext: import("@rivetjs/reactivity").Context<ContextValue<ColorSwatchProps, HTMLDivElement>>;
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export declare function ColorSwatch(props: ColorSwatchProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/color-swatch/index.jsx

@@ -0,0 +1,82 @@
+// Ported from react-aria-components `ColorSwatch` (packages/react-aria-components/src/ColorSwatch.tsx), Apache-2.0, © Adobe.
+// A ColorSwatch displays a preview of a selected color.
+// Rivet:
+// - `color` may be an accessor (`() => string | Color`, e.g. from ColorPicker / ColorSwatchPickerItem via
+//   `ColorSwatchContext`): name, label and background are bindings over it.
+// - render props are accessors (`color()`); `style` may be a function of them (`({ color, defaultStyle }) => …`).
+// `render` (RAC DOMRenderProps): given, the attributes object (reactive entries are accessors) goes to `render(attrs, renderProps)` instead of the default element.
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { useLocale } from "@rivetjs/cdk/i18n";
+import { createId } from "@rivetjs/cdk/id";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { contextProps, renderProps, resumableContext, } from "../slots/index.jsx";
+import { colorSwatchColor, colorSwatchProps } from "./behaviour.js";
+import { hasLive, liveOptions } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { read } from "../interactions/utils.js";
+export * from "./behaviour.js";
+/** RAC `ColorSwatchContext`. */
+export const ColorSwatchContext = resumableContext(createContext(null, { id: "rv-color-swatch" }));
+const OWNED = ["style", "id", "children", "render"];
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export function ColorSwatch(props) {
+    // Live props (P5): `color` / `colorName` become accessors (read in the attribute / style bindings), class / style /
+    // children from a live view; the rest of the body is read once (untracked).
+    return untrack(() => colorSwatch(props));
+}
+function colorSwatch(props) {
+    const [ctxMerged, ref] = contextProps(props, props.ref, ColorSwatchContext);
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, ["color", "colorName"]) : ctxMerged;
+    const { locale } = useLocale();
+    const colorProp = merged.color;
+    const id = merged.id || createId();
+    const colorName = merged.colorName;
+    const ariaLabel = merged["aria-label"];
+    const labelledBy = merged["aria-labelledby"];
+    const describedBy = merged["aria-describedby"];
+    const details = merged["aria-details"];
+    const value = () => (typeof colorProp === "function" ? colorProp() : colorProp);
+    const aria = () => colorSwatchProps({ color: value(), colorName: read(colorName), id, locale, "aria-label": ariaLabel, "aria-labelledby": labelledBy }).colorSwatchProps;
+    const color = () => colorSwatchColor(value());
+    const values = { color };
+    const rp = renderProps({
+        class: merged.class,
+        style: merged.style,
+        children: merged.children,
+        defaultClassName: "rv-ColorSwatch",
+        values,
+    }, hasLive(merged) ? liveRenderProps(merged) : undefined);
+    const ownStyle = merged.style;
+    const style = () => {
+        const defaultStyle = { ...aria().style };
+        const computed = typeof ownStyle === "function" ? ownStyle({ color, defaultStyle }) : ownStyle;
+        return { ...defaultStyle, ...computed };
+    };
+    const dom = globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const children = rp.children;
+    if (merged.render) {
+        const attrs = {
+            ...dom,
+            ref: ref,
+            id,
+            role: "img",
+            "aria-roledescription": () => aria()["aria-roledescription"],
+            "aria-label": () => aria()["aria-label"],
+            "aria-labelledby": () => aria()["aria-labelledby"],
+            "aria-describedby": describedBy,
+            "aria-details": details,
+            class: () => rp.class(),
+            style,
+            slot,
+            children: () => children(),
+        };
+        return merged.render(attrs, values);
+    }
+    return (<div {...dom} ref={ref} id={id} role="img" aria-roledescription={aria()["aria-roledescription"]} aria-label={aria()["aria-label"]} aria-labelledby={aria()["aria-labelledby"]} aria-describedby={describedBy} aria-details={details} class={rp.class()} style={style()} slot={slot}>
+      {children()}
+    </div>);
+}