# ColorArea

> A two-dimensional saturation/brightness picking square for a given hue, built from two overlaid native `<input type="range">` elements — one horizontal for saturation, one rotated vertical for brightness — whose native thumbs, each reshaped into a thin line, cross at the picked point.

```ts
import { ColorArea } from "@sdxc/ui";
```

Renders the root `<div>`'s picking-square background: literal `black`/`white`
gradient stops are the fixed brightness/saturation math primaries, and the
hue's `hsl()` composes through `bg()`, since it passes `(`-values unchanged.

## Examples

```tsx
<ColorArea aria-label={t("colorPicker.area")} hue={210} defaultSaturation={80} defaultValue={70}>
	<ColorArea.SaturationThumb aria-label={t("colorPicker.saturation")} />
	<ColorArea.ValueThumb aria-label={t("colorPicker.brightness")} />
</ColorArea>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `hue?` | `number` | Hue, in degrees `0`–`360`, the square's background renders every reachable saturation/brightness combination for. Defaults to DEFAULT_HUE. Typically driven by a hue control alongside this one, re-rendering on change. |
| `saturation?` | `number` | Current saturation (x-axis position), `0`–`100`, for a square whose position the consumer tracks itself. |
| `defaultSaturation?` | `number` | Starting saturation (x-axis position), `0`–`100`, for a square that never tracks its own position. |
| `value?` | `number` | Current brightness (y-axis position), `0`–`100`, for a square whose position the consumer tracks itself. |
| `defaultValue?` | `number` | Starting brightness (y-axis position), `0`–`100`, for a square that never tracks its own position. |

Also accepts everything in `TagProps<"div">`.


### ColorArea.SaturationThumb

`direction` stays fixed left-to-right regardless of the page's own `dir`, matching the root gradient's physical axes; only this thumb's own line accepts pointer input, so elsewhere a click reaches the axis line beneath it.

Also accepts everything in `Omit<TagProps<"input">, "type" | "role">`.


### ColorArea.ValueThumb

`writing-mode`/`direction` stay fixed regardless of the page's own `dir`, so this line travels block-end (black) to block-start, the low-at-the- bottom convention; pointer layering matches ColorArea.SaturationThumb.

Also accepts everything in `Omit<TagProps<"input">, "type" | "role">`.