# XYPad

Two parameters under one finger: press anywhere and the puck springs there, then sweep both at once with a trail behind it.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/xypad
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Controls.tsx

## Usage

```tsx
import { XYPad } from "mizu-ui";

export function Example() {
  return (
    <XYPad
      label="Balance"
      x={{ label: "Temp", min: -100, max: 100 }}
      y={{ label: "Tint", min: -100, max: 100 }}
      defaultValue={{ x: 0, y: 0 }}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/xypad
```

## Props

- `label / value / defaultValue / onValueChange / onValueCommit`: `string / { x, y }`. The pad's name and point.
- `x / y`: `{ label, min, max, step, taper, format }`. Each axis's name, range and readout.
- `size / resetValue`: `number / { x, y }`. Side length (200); where a reset returns.
- `name / disabled`: `string / boolean`. Submits name-x and name-y with a form; switch off.

## Keyboard

- ← →: Move along X
- ↑ ↓: Move along Y
- Shift+arrows PageUp PageDown: A tenth of the range
- Backspace Delete: Return home

## Accessibility

Each axis is its own native slider, named after the pad and the axis, so assistive technology reads and sets them separately. From either one, left and right move X and up and down move Y; Shift steps a tenth, Backspace returns home, and the focused axis's crosshair lights in the accent.

## Motion

The puck springs to where you press and then follows your finger exactly, drawing a short comet trail that fades when you let go. Keys and resets glide. Reduced motion jumps and skips the trail.