Dreamodus
e9e52e43ed
- valueBubble/bubbleFormat: floating readout above knobs while dragging
(Knob-based skins + ImageKnob)
- animateChanges: rAF ease-out tween of the pointer on programmatic
value changes; user gestures snap; prefers-reduced-motion disables
- wrap: endless encoder mode — values and relative drags roll around
min↔max; pairs with angleOffset={0} angleRange={360}
- XYPad: two-parameter pad with absolute drag, arrow keys (Shift
coarse), Escape cancel, double-click reset, grid/crosshair, focus
ring, hidden form inputs, change meta
- AlphaDisplay: fourteen-segment alphanumeric LED (A-Z, 0-9, symbols,
decimal points, chars padding/align, glow/skew)
- PushButton: studio panel button with LED strip — toggle or momentary,
controlled/uncontrolled, aria-pressed, hidden form input
- Docs: five new gallery cards incl. animated preset demo, API rows,
README
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import type * as React from 'react';
|
|
import type { KnobCoreProps } from '../core/types';
|
|
|
|
export { MONO_FONT, UI_FONT } from '../core/theme';
|
|
|
|
/** Props common to every prebuilt knob skin. */
|
|
export interface SkinProps extends KnobCoreProps {
|
|
/** Square canvas size in px. */
|
|
size?: number;
|
|
/** Caption drawn in the travel gap at the bottom of the knob. */
|
|
label?: string;
|
|
/** Show the numeric readout. Default varies per skin. */
|
|
showValue?: boolean;
|
|
/** Unit suffix for the readout, e.g. "dB", "Hz", "%". */
|
|
unit?: string;
|
|
/** Custom readout formatter (takes precedence over unit/decimals). */
|
|
format?: (value: number) => string;
|
|
/** Keyboard focus ring color, or false to disable. Defaults to the theme's. */
|
|
focusRing?: string | false;
|
|
/**
|
|
* Type-in editing: double-click (knobs) or click the readout (faders) to
|
|
* enter an exact value. Enter/blur commits, Escape cancels, "1.2k" works.
|
|
*/
|
|
editable?: boolean;
|
|
/** Custom parser for typed input when `editable` is set. */
|
|
parseValue?: (text: string) => number | null;
|
|
/** Render a hidden form input carrying the current value. */
|
|
name?: string;
|
|
/** Show a floating value bubble above the knob while dragging. */
|
|
valueBubble?: boolean;
|
|
/** Formatter for the bubble text (defaults to the trimmed value). */
|
|
bubbleFormat?: (value: number) => string;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|