zds-pickers 4.0.8 → 4.0.9

package/dist/types/midi/export.d.ts

@@ -1,12 +1,12 @@
 import type { Option } from 'lib/pickers/Select';
 declare const Statuses: {
-    noteOff: number;
-    noteOn: number;
-    aftertouch: number;
-    controlChange: number;
-    programChange: number;
-    channelPressure: number;
-    pitchWheel: number;
+    readonly noteOff: 8;
+    readonly noteOn: 9;
+    readonly aftertouch: 10;
+    readonly controlChange: 11;
+    readonly programChange: 12;
+    readonly channelPressure: 13;
+    readonly pitchWheel: 14;
 };
 type Status = (typeof Statuses)[keyof typeof Statuses];
 declare const MASK_CHANNEL = 15;
@@ -18,5 +18,4 @@ declare const extractStatusAndChannel: (status: number) => {
     status: Status;
     channel: number;
 };
-export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, statusOptions, Statuses, };
-export type { Status };
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, statusOptions, Statuses, type Status, };

package/dist/types/pickers/StatusPicker.d.ts

@@ -5,8 +5,8 @@ type StatusPickerProps = SelectProps<Status> & {
     statuses: Option<Status>[];
 };
 type StatusPickerRef = SelectInstance<Option<Status>, false, GroupBase<Option<Status>>>;
-declare const StatusPicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
+declare const StatusPicker: import("react").ForwardRefExoticComponent<SelectProps<Status> & {
     statuses: Option<Status>[];
-} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
+} & import("react").RefAttributes<SelectInstance<Option<Status>, false, GroupBase<Option<Status>>>>>;
 export default StatusPicker;
 export type { StatusPickerProps, StatusPickerRef };

package/lib/hooks/useComponentSize.js

@@ -0,0 +1,40 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+const getSize = (el) => el
+    ? {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+    }
+    : {
+        width: 0,
+        height: 0,
+    };
+const useComponentSize = (ref) => {
+    const [componentSize, setComponentSize] = useState(getSize(ref ? ref.current : null));
+    const handleResize = useCallback(() => {
+        if (ref.current) {
+            setComponentSize(getSize(ref.current));
+        }
+    }, [ref]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useLayoutEffect(() => {
+        if (!ref.current)
+            return;
+        handleResize();
+        if (typeof ResizeObserver === 'function') {
+            const resizeObserver = new ResizeObserver(() => {
+                handleResize();
+            });
+            resizeObserver.observe(ref.current);
+            return () => {
+                resizeObserver.disconnect();
+                // resizeObserver = null
+            };
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [ref.current]);
+    return componentSize;
+};
+export default useComponentSize;

package/lib/hooks/useStateWithDynamicDefault.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+const useStateWithDynamicDefault = (defaultVal) => {
+    const [state, setState] = useState(defaultVal);
+    useEffect(() => {
+        setState(defaultVal);
+    }, [defaultVal]);
+    return [state, setState];
+};
+export default useStateWithDynamicDefault;

package/lib/index.js

@@ -0,0 +1,21 @@
+// Components
+export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker';
+export { default as ChannelPicker } from './pickers/ChannelPicker';
+export { default as DefaultTooltip } from './other/DefaultTooltip';
+export { default as Knob } from './pickers/Knob';
+export { default as KnobPicker } from './pickers/KnobPicker';
+export { default as LatchPicker } from './pickers/LatchPicker';
+export { default as MappingPicker } from './pickers/MappingPicker';
+export { default as NotePicker } from './pickers/NotePicker';
+export { default as OctavePlayer } from './other/OctavePlayer';
+export { default as PianoPicker } from './pickers/PianoPicker';
+export { default as PolarityPicker } from './pickers/PolarityPicker';
+export { default as ResponseCurvePicker } from './pickers/ResponseCurvePicker';
+export { default as Select } from './pickers/Select';
+export { default as StatusPicker } from './pickers/StatusPicker';
+export { default as SVGText } from './other/SVGText';
+export { default as ValuePicker } from './pickers/ValuePicker';
+// MIDI Values & Functions
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, Statuses, } from './midi/export';
+export { default as ResponseCurve, RESPONSE_CURVES, } from './pickers/ResponseCurve';
+export { default as ccValues } from './midi/ccValues';

package/lib/midi/ccValues.js

@@ -0,0 +1,134 @@
+const CC_NAMES = [
+    'Bank Select',
+    'Modulation Wheel',
+    'Breath Controller',
+    '',
+    'Foot Control',
+    'Portamento Time',
+    'Data Entry Slider',
+    'Volume',
+    'Balance',
+    '',
+    'Pan',
+    'Expression',
+    'Effect Control 1',
+    'Effect Control 2',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    'Controller 0',
+    'Controller 1',
+    'Controller 2',
+    'Controller 3',
+    'Controller 4',
+    'Controller 5',
+    'Controller 6',
+    'Controller 7',
+    'Controller 8',
+    'Controller 9',
+    'Controller 10',
+    'Controller 11',
+    'Controller 12',
+    'Controller 13',
+    'Controller 14',
+    'Controller 15',
+    'Controller 16',
+    'Controller 17',
+    'Controller 18',
+    'Controller 19',
+    'Controller 20',
+    'Controller 21',
+    'Controller 22',
+    'Controller 23',
+    'Controller 24',
+    'Controller 25',
+    'Controller 26',
+    'Controller 27',
+    'Controller 28',
+    'Controller 29',
+    'Controller 30',
+    'Controller 31',
+    'Sustain',
+    'Portamento',
+    'Sostenuto',
+    'Soft Pedal',
+    'Legato Pedal',
+    'Sustain 2',
+    'Sound Variation',
+    'Resonance/Timbre',
+    'Sound Release Time',
+    'Sound Attack Time',
+    'Frequency Cutoff',
+    'Sound Control 6',
+    'Sound Control 7',
+    'Sound Control 8',
+    'Sound Control 9',
+    'Sound Control 10',
+    'Decay or General 1',
+    'Hi-Pass or General 2',
+    'General 3',
+    'General 4',
+    'Portamento Amount',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    'Reverb Level',
+    'Tremolo Depth',
+    'Chorus Level',
+    'Detune',
+    'Phaser Depth',
+    'Data Entry +1',
+    'Data Entry -1',
+    'Non-registered LSB',
+    'Non-registered MSB',
+    'Registered msb',
+    'Registered lsb',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    '',
+    'Shift 1',
+    'Shift 2',
+    'Shift 3',
+    'Shift 4',
+    'Shift 5',
+    'Shift 6',
+    '',
+    '',
+    '',
+    '',
+    'All Sound Off',
+    'All Controllers Off',
+    'Local Mode',
+    'All Notes Off',
+    'Omni Mode Off',
+    'Omni Mode On',
+    'Mono Mode On',
+    'Poly Mode',
+].map((label, value) => ({
+    label: String(label).length ? `${value} - ${label}` : String(value),
+    value,
+}));
+export default CC_NAMES;

package/lib/midi/export.js

@@ -0,0 +1,27 @@
+const Statuses = {
+    noteOff: 8, // 1000
+    noteOn: 9, // 1001
+    aftertouch: 10, // 1010
+    controlChange: 11, // 1011
+    programChange: 12, // 1100
+    channelPressure: 13, // 1101
+    pitchWheel: 14, // 1110
+};
+const MASK_CHANNEL = 15; // 00001111
+const MASK_STATUS = 240; // 01110000
+const statusOptions = [
+    { value: Statuses.noteOn, label: 'Note On' },
+    { value: Statuses.noteOff, label: 'Note Stack' },
+    { value: Statuses.controlChange, label: 'Control Change' },
+    { value: Statuses.programChange, label: 'Program Change' },
+    { value: Statuses.aftertouch, label: 'Aftertouch' },
+    { value: Statuses.channelPressure, label: 'Channel Pressure' },
+    { value: Statuses.pitchWheel, label: 'Pitch Wheel' },
+];
+const getStatusLabel = (val) => statusOptions.filter(({ value }) => value === val)[0]?.label || '???';
+const combineStatusWithChannel = (channel, status) => channel | (status << 4);
+const extractStatusAndChannel = (status) => ({
+    status: (((status & MASK_STATUS) >> 4) | 8),
+    channel: status & MASK_CHANNEL,
+});
+export { combineStatusWithChannel, extractStatusAndChannel, getStatusLabel, MASK_CHANNEL, MASK_STATUS, statusOptions, Statuses, };

package/lib/midi/export.ts

@@ -8,7 +8,7 @@ const Statuses = {
   programChange: 12, // 1100
   channelPressure: 13, // 1101
   pitchWheel: 14, // 1110
-}
+} as const
 
 type Status = (typeof Statuses)[keyof typeof Statuses]
 
@@ -49,6 +49,5 @@ export {
   MASK_STATUS,
   statusOptions,
   Statuses,
+  type Status,
 }
-
-export type { Status }

package/lib/other/DefaultTooltip.js

@@ -0,0 +1,3 @@
+import { Fragment, createElement } from 'react';
+const DefaultTooltip = ({ children }) => createElement(Fragment, null, children);
+export default DefaultTooltip;

package/lib/other/OctavePlayer.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { /* Midi, */ Note } from 'tonal';
+import { Piano as ReactPiano } from 'zds-react-piano';
+import SoundfontProvider from './SoundFontProvider';
+const baseNotes = [
+    'C',
+    'C#',
+    'D',
+    'D#',
+    'E',
+    'F',
+    'F#',
+    'G',
+    'G#',
+    'A',
+    'A#',
+    'B',
+];
+// const { midiToFreq, midiToNoteName } = Midi
+// console.log(Note.names(), Note.midi('C4'))
+// const firstNote = 21
+// const lastNote = 108
+const numNotes = 12;
+const whiteNotes = numNotes * 0.7; // approx
+const audioContext = new window.AudioContext();
+const OctavePlayer = ({ octave, height, width, ...rest }) => {
+    const keyWidth = width / whiteNotes + 2;
+    const keyWidthToHeight = keyWidth / height;
+    const firstNote = Note.midi(baseNotes[0] + String(octave)) || 0;
+    const lastNote = Note.midi(baseNotes[baseNotes.length - 1] + String(octave)) || 0;
+    return (_jsx("div", { children: _jsx(ReactPiano, { keyWidthToHeight: keyWidthToHeight, noteRange: { first: firstNote, last: lastNote }, width: width, ...rest }) }));
+};
+const WithProvider = ({ format, height, hostname, instrumentName, octave = 4, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }) => (_jsx(SoundfontProvider, { audioContext,
+    format,
+    hostname,
+    instrumentName,
+    onChange,
+    soundfont, render: ({ isLoading, playNote, stopNote, }) => (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsxs("h2", { children: ["Octave: ", octave] }) }), _jsx(OctavePlayer, { disabled: isLoading, height,
+                octave,
+                onClick,
+                onDoubleClick,
+                onKeyMouseEnter,
+                onKeyMouseLeave,
+                playNote,
+                stopNote,
+                Tooltip,
+                width })] })) }));
+export default WithProvider;

package/lib/other/SVGText.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+const MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id';
+const calculateWordsByLines = (text, wordWidths, maxWidth, maxHeight) => {
+    const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths;
+    return text.split(/\s+/).reduce((result, word) => {
+        const wordWidth = wordsWithComputedWidth[word];
+        const currentLine = result[result.length - 1];
+        if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {
+            // Word can be added to an existing line
+            currentLine.words.push(word);
+            currentLine.width += wordWidth + spaceWidth;
+        }
+        else {
+            // Add first word to line or word is too long to scaleToFit on existing line
+            const newLine = {
+                words: [word],
+                width: wordWidth,
+                showLine: maxHeight
+                    ? lineHeight * (result.length + 1) < maxHeight
+                    : true,
+            };
+            result.push(newLine);
+        }
+        return result;
+    }, []);
+};
+const calculateWordWidths = (style, textNode, text) => {
+    if (style && textNode) {
+        // biome-ignore lint/complexity/noForEach: <explanation>
+        Array.from(style).forEach(key => textNode.style.setProperty(key, style.getPropertyValue(key), style.getPropertyPriority(key)));
+        const wordArray = [...new Set(String(text).split(/\s+/))];
+        const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {
+            textNode.textContent = word;
+            // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
+            return { ...wordMap, [word]: textNode.getBBox().width };
+        }, {});
+        textNode.textContent = '\u00A0';
+        const spaceWidth = textNode?.getComputedTextLength?.() || 8;
+        const lineHeight = textNode.getBBox().height;
+        textNode.setAttribute('style', '');
+        return { wordsWithComputedWidth, spaceWidth, lineHeight };
+    }
+    return undefined;
+};
+const Text = (props) => {
+    const { className = '', dx = 0, dy = 0, maxHeight = 1000, maxWidth = 1000, 
+    // textAnchor = 'start',
+    text = '', verticalAnchor = 'start', x = 0, y = 0, transform = '', ...rest } = props;
+    const [wordWidths, setWordWidths] = useState();
+    const [textLines, setTextLines] = useState([]);
+    const [style, setComputedStyle] = useState();
+    const measureRef = useRef({});
+    const displayedLines = useMemo(() => {
+        const result = textLines.filter(({ showLine }) => showLine);
+        return result.length
+            ? result
+            : text
+                .split(/\n/)
+                .map(line => ({ words: [line], width: 0, showLine: true }));
+    }, [textLines, text]);
+    const ref = useCallback((node) => {
+        setComputedStyle(node !== null ? window.getComputedStyle(node) : undefined);
+    }, []);
+    useEffect(() => {
+        const el = document.getElementById(MEASUREMENT_ELEMENT_ID);
+        if (el === null) {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('id', MEASUREMENT_ELEMENT_ID);
+            document.body.appendChild(svg);
+            svg.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'text'));
+            measureRef.current = svg;
+            return () => {
+                document.body.removeChild(svg);
+            };
+        }
+        measureRef.current = el;
+    }, []);
+    useEffect(() => {
+        const wordWithWidths = calculateWordWidths(style, measureRef.current, text);
+        setWordWidths(wordWithWidths);
+    }, [text, style]);
+    useEffect(() => {
+        if (maxWidth && wordWidths) {
+            const lines = text
+                .split(/\n/)
+                .flatMap(line => calculateWordsByLines(line, wordWidths, maxWidth, maxHeight));
+            setTextLines(lines);
+        }
+    }, [maxHeight, maxWidth, wordWidths, text]);
+    const startDy = useMemo(() => {
+        if (wordWidths?.lineHeight) {
+            switch (verticalAnchor) {
+                case 'start':
+                    return wordWidths.lineHeight;
+                case 'middle':
+                    return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2);
+                default:
+                    return -(displayedLines.length - 1) * wordWidths.lineHeight;
+            }
+        }
+        return 0;
+    }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight]);
+    return (_jsx("text", { className: className, ref: ref, dx: dx, dy: dy, x: x, y: y, 
+        // textAnchor={textAnchor}
+        transform: transform, ...rest, children: _jsxs(_Fragment, { children: [displayedLines.map((line, idx) => (_jsx("tspan", { dx: x + dx, dy: idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0, x: 0, children: line.words.join(' ') }, idx))), textLines.length && displayedLines.length !== textLines.length && (_jsxs(_Fragment, { children: [_jsx("tspan", { children: "..." }), _jsx("title", { children: text })] }))] }) }));
+};
+export default Text;
+export { MEASUREMENT_ELEMENT_ID };

package/lib/other/SoundFontProvider.js

@@ -0,0 +1,87 @@
+// See https://github.com/danigb/soundfont-player
+// for more documentation on prop options.
+import { useCallback, useEffect, useState } from 'react';
+import Soundfont from 'soundfont-player';
+// import '../temp/acoustic_grand_piano-mp3'
+const isDefined = (item) => item !== undefined && item !== null && !Number.isNaN(item);
+const SoundfontProvider = (props) => {
+    const { audioContext, format, hostname, instrumentName, onChange, render, soundfont, } = props;
+    const [isLoading, setIsLoading] = useState(true);
+    const [activeAudioNodes, setActiveAudioNodes] = useState({});
+    const [instrument, setInstrument] = useState(null);
+    const loadInstrument = useCallback((nm) => {
+        // Re-trigger loading state
+        setInstrument(null);
+        if (isDefined(hostname)) {
+            // pull from an url
+            Soundfont.instrument(audioContext, nm, {
+                format,
+                soundfont,
+                nameToUrl: (name, sf, fmt) => `${hostname}/${sf}/${name}-${fmt}.js`,
+            }).then(newInstrument => {
+                setInstrument(newInstrument);
+            });
+        }
+        else if (isDefined(instrumentName)) {
+            // the host app has already injected the soundfont into global space
+            Soundfont.instrument(audioContext, instrumentName).then(newInstrument => {
+                setInstrument(newInstrument);
+            });
+        }
+        else {
+            // sound must be disabled
+            setIsLoading(false);
+        }
+    }, [audioContext, format, hostname, instrumentName, soundfont]);
+    useEffect(() => {
+        loadInstrument(instrumentName);
+    }, [instrumentName, loadInstrument]);
+    useEffect(() => {
+        if (isDefined(instrumentName)) {
+            setIsLoading(!instrument);
+        }
+    }, [instrument, instrumentName]);
+    const playNote = (midiNumber) => {
+        if (instrument) {
+            audioContext.resume().then(() => {
+                const audioNode = instrument.play(String(midiNumber));
+                setActiveAudioNodes(prev => ({ ...prev, [midiNumber]: audioNode }));
+            });
+        }
+    };
+    const stopNote = (midiNumber) => {
+        audioContext.resume().then(() => {
+            if (!activeAudioNodes[midiNumber]) {
+                return;
+            }
+            const audioNode = activeAudioNodes[midiNumber];
+            audioNode.stop();
+            setActiveAudioNodes(prev => {
+                const { [midiNumber]: _, ...rest } = prev;
+                return rest;
+            });
+        });
+        onChange?.(midiNumber);
+    };
+    // Clear any residual notes that don't get called with stopNote
+    const stopAllNotes = () => {
+        audioContext.resume().then(() => {
+            const nodes = Object.values(activeAudioNodes);
+            for (const node of nodes) {
+                if (node) {
+                    node.stop();
+                }
+            }
+            setActiveAudioNodes(nodes);
+        });
+    };
+    return render({
+        isLoading,
+        playNote,
+        stopNote,
+        stopAllNotes,
+    });
+};
+// https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_grand_piano-mp3.js
+// https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/.js
+export default SoundfontProvider;

package/lib/pickers/CCPicker.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import ccValues from '../midi/ccValues';
+import Select from './Select';
+const CCPicker = forwardRef((props, ref) => (_jsx(Select, { ...props, options: ccValues, ref: ref })));
+export default CCPicker;

package/lib/pickers/ChannelMappingPicker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cl from 'classnames';
+import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { arraySequence } from '../utils';
+import Select from './Select';
+const defaultOptions = arraySequence(16).map(value => ({
+    value,
+    label: value,
+}));
+const ChannelMappingPicker = forwardRef(({ channels, className, ...rest }, ref) => {
+    const [options, setOptions] = useState([]);
+    const formatOptionLabel = useCallback(({ value, label }, { context }) => {
+        if (value === 'separator') {
+            return _jsx("span", { className: "zds-mappings-user-mapping", children: label });
+        }
+        if (typeof value !== 'number')
+            return null;
+        const mapping = channels[value];
+        return mapping ? (_jsxs("span", { className: "mapping-entry", children: [_jsxs("b", { children: [value + 1, context === 'value' && ' -'] }), _jsx("span", { className: "mapping-entry-label", children: mapping.label })] })) : (_jsxs("span", { className: "mapping-entry empty-mapping-entry", children: [_jsxs("b", { children: [value + 1, context === 'value' && ' -'] }), _jsx("span", { className: "mapping-entry-label", children: "no mapping" })] }));
+    }, [channels]);
+    useEffect(() => {
+        const result = defaultOptions.sort((a, b) => {
+            if (typeof a.value === 'number' &&
+                typeof b.value === 'number' &&
+                channels[a.value] &&
+                !channels[b.value]) {
+                return -1;
+            }
+            if (typeof a.value === 'number' &&
+                typeof b.value === 'number' &&
+                !channels[a.value] &&
+                channels[b.value]) {
+                return 1;
+            }
+            if (typeof a.value === 'number' && typeof b.value === 'number') {
+                return a.value - b.value;
+            }
+            return 0;
+        });
+        const numFilled = result.filter(({ value }) => typeof value === 'number' && !!channels[value]).length;
+        const separatorExists = result.some(({ value }) => value === 'separator');
+        if (numFilled && numFilled < 16 && !separatorExists) {
+            // insert a separator after the count of filled items
+            result.splice(numFilled, 0, { label: _jsx("hr", {}), value: 'separator' });
+        }
+        setOptions(result);
+    }, [channels]);
+    return (_jsx(Select, { ...rest, className: cl(className, 'channel-mapping-picker'), formatOptionLabel: formatOptionLabel, options: options, ref: ref }));
+});
+export default ChannelMappingPicker;

package/lib/pickers/ChannelPicker.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cl from 'classnames';
+import { forwardRef } from 'react';
+import { arraySequence } from '../utils';
+import Select from './Select';
+const options = arraySequence(16).map(value => ({
+    value: value,
+    label: `Channel ${value + 1}`,
+}));
+const formatOptionLabel = (option, { context }) => context === 'value' ? option.label : Number.parseInt(String(option.value)) + 1; // menu, e.g. the list of options
+const filterOptions = (option, input) => {
+    // console.log(option, input)
+    if (input) {
+        return String(option.label).toLowerCase().includes(input.toLowerCase());
+    }
+    return true;
+};
+const ChannelPicker = forwardRef(({ className, ...rest }, ref) => {
+    return (_jsx(Select, { ...rest, className: cl(className, 'channel-picker'), filterOptions: filterOptions, formatOptionLabel: formatOptionLabel, options: options, ref: ref }));
+});
+export default ChannelPicker;

package/lib/pickers/Knob.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault';
+import RotaryKnob from '../rotaryKnob';
+import { assertRange } from '../utils';
+import knobSkin10 from './knobSkin10';
+const Knob = (props) => {
+    const { disabled = false, max = 127, min = 0, onChange, value: initialValue = 0, wheelEnabled = false, wheelSensitivity = 0.1, ...rest } = props;
+    const [value, setValue] = useStateWithDynamicDefault(initialValue);
+    const handleChange = (val) => {
+        if (disabled)
+            return;
+        const newValue = assertRange(Number.parseInt(String(val), 10), max, min);
+        setValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    };
+    const handleWheel = useCallback((event) => {
+        if (!wheelEnabled || disabled)
+            return;
+        event.preventDefault();
+        const delta = -event.deltaY * wheelSensitivity;
+        const newValue = assertRange(value + delta, max, min);
+        setValue(newValue);
+        if (onChange) {
+            onChange(newValue);
+        }
+    }, [
+        wheelEnabled,
+        disabled,
+        wheelSensitivity,
+        value,
+        max,
+        min,
+        onChange,
+        setValue,
+    ]);
+    return (_jsx(RotaryKnob, { clampMax: 320, clampMin: 40, className: "zds-pickers__knob-container", disabled: disabled, onChange: handleChange, onWheel: wheelEnabled ? handleWheel : undefined, preciseMode: false, rotateDegrees: 180, 
+        /**
+         * To see all skins:
+         * http://react-rotary-knob-skins-preview.surge.sh/
+         *
+         * NOTE: we've copied the one we use into this package because the skins
+         * pack package does not work in Electron.
+         */
+        skin: knobSkin10, style: { opacity: disabled ? 0.4 : 1 }, unlockDistance: 0, defaultValue: value, max, min, value, ...rest }));
+};
+export default Knob;