Tier 2: drag feel, wheel overhaul, refs/meta/forms, Meter, gradients
- rotaryMode: 'absolute' | 'relative' (angle deltas, no grab jump) |
'pickup' (MIDI-style: engages when the pointer sweeps past the value)
- dragAcceleration: velocity gain for relative drags (Shift bypasses);
hideCursorOnDrag hides the cursor mid-gesture
- Wheel: trackpad delta accumulation (flicks can't rocket the value,
one notch per wheel click), wheelStep override, wheelRequiresFocus
opt-out of the hover scroll-trap
- onChange/onChangeStart/onChangeEnd now receive { source: 'drag' |
'wheel' | 'keyboard' | 'reset' | 'api' }
- Every component forwards a ref to its root; name prop renders a
hidden form input; SVG primitives carry data-part attributes
- Arc gradient: position-anchored color stops rendered as sliced arcs
(mixColors/sampleGradient exported, unit-tested)
- New read-only Meter: LED level meter with peak hold, zones, readout
- Fader capColor/capLength for custom handle styling
- Docs: Meter/gradient/drag-feel gallery cards, white-cap fader demo,
API rows, README
This commit is contained in:
parent
804a85cca6
commit
0aee48b749
27 changed files with 756 additions and 134 deletions
|
|
@ -64,7 +64,15 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
|
|||
- `detents={[0]}` + `detentSize` — magnetic snap points while dragging.
|
||||
- `editable` — double-click (knobs) or click the readout (faders) to type an exact
|
||||
value; `parseValue` customizes parsing (`"1.2k"` → 1200 out of the box).
|
||||
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks.
|
||||
- `rotaryMode` — `'absolute'` (rc-knob feel), `'relative'` (no grab jump), or
|
||||
`'pickup'` (MIDI-style: engages when the pointer sweeps past the value).
|
||||
- `dragAcceleration` — velocity gain for relative drags; `hideCursorOnDrag` hides
|
||||
the cursor mid-gesture.
|
||||
- `wheelStep` / `wheelRequiresFocus` — tune wheel notches, or keep hover-scroll free.
|
||||
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks with
|
||||
`meta.source` (`'drag' | 'wheel' | 'keyboard' | 'reset' | 'api'`).
|
||||
- `name` — hidden form input for plain `<form>` posts; every component forwards a
|
||||
ref to its root element, and SVG parts carry `data-part` attributes for CSS.
|
||||
|
||||
## Prebuilt skins
|
||||
|
||||
|
|
@ -80,6 +88,7 @@ import {
|
|||
Fader, // linear channel fader, vertical or horizontal
|
||||
LEDFader, // segmented LED meter-fader with color zones
|
||||
ImageKnob, // film-strip sprite knob (KnobMan-style PNG strips)
|
||||
Meter, // read-only LED level meter with peak hold
|
||||
SegmentDisplay, // standalone seven-segment numeric display
|
||||
} from 'dreamknob'
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue