@grida/number-input
Headless React hooks for editor-grade number inputs — the input behaviors of the Grida editor's properties panel, extracted as a package. Typed parsing, step precision, commit safety, mixed-value state, scrub gestures, snapping sliders, and hex color input.
Number input
Type a value — ↑/↓ steps, Shift for ×10, Enter or blur commits. Invalid input never commits.
Suffix + display scale
Stored as 0–1, displayed as a percentage. Type 50 or 50% — the commit is 0.5.
Mixed value (multi-selection)
Two objects with different widths show as mixed — the multi-selection state in a properties panel. Commit a number to set both.
Scrub label (virtual slider)
Drag the W label horizontally to change the value — pointer lock keeps the drag going past screen edges.
Slider with mark snapping
Drag near a mark (0, 25, 50, 75, 100) and the value snaps to it.
Hex color input
Place the caret on a channel and press ↑/↓ to step it. Or click the swatch to pick with the native color picker.
- Fuzzy expansion —
8→888888,F80→FF8800; the first hex run is extracted,#and stray characters are ignored. - Alpha extraction — 4-digit (
RGBA) and 8-digit (RRGGBBAA) input commit the RGB plus a separate 0–1 opacity, shown in the readout when present. - Channel-aware stepping — a selection spanning channels steps them together, and the selection is restored after each step.
- Shift for coarse steps — unit-aware:
u8(0–255, shown here) orf32(0–1). - Free typing while focused — invalid input reverts to the last valid color on commit.