Settings row for a direction: a dial you drag round, reading in degrees the way CSS does (zero up, growing clockwise), with a range input underneath carrying the keyboard and the form.
The import and the props worth knowing about, in one place.
import { InspectorAngle } from "@/components/beste/component/inspector-angle";
// Uncontrolled
<InspectorAngle label="Angle" defaultValue={135} />
// Controlled, with a separate commit for expensive work
<InspectorAngle
label="Rotation"
value={angle}
onValueChange={setAngle} // every frame of the drag
onValueCommit={(value) => console.log("persist", value)} // on release
/>
<InspectorAngle
label="Direction"
icon={Compass} // optional leading icon
snapStep={45} // degrees the drag snaps to while Shift is held; 15 by default
step={1} // what one arrow key moves
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
value={angle}
onValueChange={setAngle}
/>
// Values wrap, so 370 arrives as 10, and the row takes part in a form
<InspectorAngle label="Sweep" name="sweep" defaultValue={0} />Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Arrow keys | One step around the dial. Up and Right turn it clockwise, Down and Left back. |
|---|---|
| Shift + Arrow | Ten steps, for crossing a quadrant without dragging. |
| Page Up / Page Down | One `snapStep`, so a dial that snaps to 15° moves a notch at a time. |
| Home / End | Zero, or one step short of a full turn. |
| Drag the dial | Follows the pointer; the readout stays a field you can type into. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | number | — | Controlled angle in degrees, measured the way CSS measures a gradient: zero points up, and the value grows clockwise. Values wrap, so 370 is 10. |
defaultValue | number | — | Initial angle in uncontrolled mode. |
onValueChange | (value: number) => void | — | Fires on every frame of a drag, and on every key press. |
onValueCommit | (value: number) => void | — | Fires once a change is finished — the dial released, a key released. Use it for work too expensive to run per frame. |
step | number | 1 | Smallest increment a key press moves. |
snapStep | number | 15 | Degrees the dial snaps to while Shift is held during a drag. |
disabled | boolean | — | Block interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
name | string | — | Name of the underlying range input, so the row can take part in a form. |
id | string | — | Id of the underlying range input, for an external `<label htmlFor>`. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |