ColorArea

let saturation = 80;
let brightness = 70;

<div mix={[vstack({ gap: 3, align: "start" })]}>
	<ColorArea
		aria-label="Saturation and brightness"
		hue={HUE}
		saturation={saturation}
		value={brightness}
		mix={[
			colorAreaDrag(),
			on<HTMLDivElement, "ui:color-area-change">("ui:color-area-change", (event) => {
				saturation = event.x;
				brightness = event.y;
				void handle.update();
			}),
		]}
	>
		<ColorArea.SaturationThumb data-color-area-axis="x" aria-label="Saturation" />
		<ColorArea.ValueThumb data-color-area-axis="y" aria-label="Brightness" />
	</ColorArea>

	<div mix={[hstack({ gap: 3, align: "center" })]}>
		<ColorSwatch
			size="lg"
			shape="rounded"
			value={formatHex({ ...hsvToRgb({ h: HUE, s: saturation, v: brightness }), a: 1 })}
		/>
		<div mix={[vstack({ gap: 0, align: "start" })]}>
			<span mix={[font("mono"), text("sm"), weight("medium")]}>
				{formatHex({ ...hsvToRgb({ h: HUE, s: saturation, v: brightness }), a: 1 })}
			</span>
			<span mix={[text("xs"), fg("neutral")]}>
				hue {HUE}° · saturation {Math.round(saturation)}% · brightness {Math.round(brightness)}%
			</span>
		</div>
	</div>
</div>