@antimatter-audio/antimatter-ui 2.0.1 → 2.2.0

package/README.md

@@ -44,6 +44,8 @@ NOTE: You will not see any _local_ changes you have made to this library yet. To
 
 4. Run `npm run start` in **antimatter-plugin-template** to start (or restart) your development server.
 
+5. Run `npm run start` in **this project** to build your local changes.
+
 You should now see your local changes to these components at [http://localhost:3000](http://localhost:3000).
 
 ### Adding new components

package/dist/index.js

@@ -3,7 +3,7 @@ import React__default, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
 import * as Juce from 'juce-framework-frontend';
-import { KnobHeadless } from 'react-knob-headless';
+import { useDrag } from '@use-gesture/react';
 import ReactSlider from 'react-slider';
 
 function styleInject(css, ref) {
@@ -223,7 +223,7 @@ function Button(param) {
 Button.TYPE = BUTTON_TYPE;
 Button.SIZE = BUTTON_SIZE;
 
-function _define_property$2(obj, key, value) {
+function _define_property$3(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -236,7 +236,7 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$2(target) {
+function _object_spread$3(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -246,12 +246,12 @@ function _object_spread$2(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$2(target, key, source[key]);
+            _define_property$3(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$2(object, enumerableOnly) {
+function ownKeys$3(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -259,12 +259,12 @@ function ownKeys$2(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$2(target, source) {
+function _object_spread_props$3(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$2(Object(source)).forEach(function(key) {
+        ownKeys$3(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -275,7 +275,7 @@ function Col(param) {
         SPACING.NONE
     ] : _param_padding, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
     return /*#__PURE__*/ React.createElement("div", {
-        style: _object_spread_props$2(_object_spread$2({}, style), {
+        style: _object_spread_props$3(_object_spread$3({}, style), {
             border: border ? '2px solid #888' : ''
         }),
         onClick: onClick,
@@ -298,7 +298,7 @@ var FLEX_DIRECTION;
     FLEX_DIRECTION[FLEX_DIRECTION["COLUMN"] = 1] = "COLUMN";
 })(FLEX_DIRECTION || (FLEX_DIRECTION = {}));
 
-function _define_property$1(obj, key, value) {
+function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -311,7 +311,7 @@ function _define_property$1(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$1(target) {
+function _object_spread$2(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -321,12 +321,12 @@ function _object_spread$1(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$1(target, key, source[key]);
+            _define_property$2(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys$1(object, enumerableOnly) {
+function ownKeys$2(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -334,12 +334,12 @@ function ownKeys$1(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$1(target, source) {
+function _object_spread_props$2(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$1(Object(source)).forEach(function(key) {
+        ownKeys$2(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -352,7 +352,7 @@ function Row(param) {
     ] : _param_padding, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FLEX_DIRECTION.ROW : _param_flexDirection, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
     var isColumn = flexDirection === FLEX_DIRECTION.COLUMN;
     return /*#__PURE__*/ React.createElement("div", {
-        style: _object_spread_props$1(_object_spread$1({}, style), {
+        style: _object_spread_props$2(_object_spread$2({}, style), {
             border: border ? '2px solid #888' : ''
         }),
         onClick: onClick,
@@ -452,7 +452,7 @@ function Dropdown(param) {
     })));
 }
 
-var css_248z$4 = ".Knob {\n  height: 50px;\n  background-color: #737373;\n  width: 50px;\n  border-radius: 100%;\n  position: relative;\n  aspect-ratio: 1/1;\n}\n\n.Knob-inner {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.Knob-marker {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: 2px;\n  height: 50%;\n  border-radius: 125rem;\n  background-color: #fff;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}";
+var css_248z$4 = ".Knob {\n  height: 50px;\n  background-color: #737373;\n  width: 50px;\n  border-radius: 100%;\n  position: relative;\n  aspect-ratio: 1/1;\n}\n\n.Knob-inner {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.Knob-marker {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: 2px;\n  height: 50%;\n  border-radius: 125rem;\n  background-color: #fff;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.Knob-center-marker {\n  width: 0px;\n  height: 0px;\n  border-style: solid;\n  border-width: 0 7px 10px 7px;\n  border-color: transparent transparent #737373 transparent;\n  transform: rotate(180deg);\n  padding-bottom: 2px;\n}";
 styleInject(css_248z$4);
 
 var css_248z$3 = ".TextLabel {\n  font-family: \"Arial\", sans-serif;\n  font-size: 14px;\n  text-align: center;\n}";
@@ -485,6 +485,19 @@ function _array_like_to_array$1(arr, len) {
 function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _define_property$1(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterable_to_array_limit$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -512,6 +525,40 @@ function _iterable_to_array_limit$1(arr, i) {
 function _non_iterable_rest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread$1(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$1(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$1(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$1(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _sliced_to_array$1(arr, i) {
     return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
 }
@@ -523,23 +570,54 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
+var KNOB_TYPE;
+(function(KNOB_TYPE) {
+    KNOB_TYPE["STANDARD"] = "STANDARD";
+    KNOB_TYPE["BIPOLAR"] = "BIPOLAR";
+})(KNOB_TYPE || (KNOB_TYPE = {}));
 function Knob(param) {
-    var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, id = param.id, className = param.className;
-    var _useState = _sliced_to_array$1(useState(0), 2), min = _useState[0], setMin = _useState[1];
-    var _useState1 = _sliced_to_array$1(useState(0), 2), max = _useState1[0], setMax = _useState1[1];
+    var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, _param_knobType = param.knobType, knobType = _param_knobType === void 0 ? "STANDARD" : _param_knobType, id = param.id, className = param.className;
+    var _useState = _sliced_to_array$1(useState(knobType === "STANDARD" ? 0 : -100), 2), min = _useState[0], setMin = _useState[1];
+    var _useState1 = _sliced_to_array$1(useState(knobType === "STANDARD" ? 0 : 100), 2), max = _useState1[0], setMax = _useState1[1];
+    var _useState2 = _sliced_to_array$1(useState(1), 2); _useState2[0]; var setInterval = _useState2[1];
+    var _useState3 = _sliced_to_array$1(useState(0), 2), value = _useState3[0], setValue = _useState3[1];
+    var _useState4 = _sliced_to_array$1(useState(false), 2); _useState4[0]; var setHasStoreData = _useState4[1];
     useEffect(function() {
-        var _sliderState_properties, _sliderState_properties1;
-        var sliderState = Juce.getSliderState(id);
-        setMin(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start);
-        setMax(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
+        var knobState = Juce.getSliderState(id);
+        if (!!knobState) {
+            var _knobState_properties, _knobState_properties1, _knobState_properties2;
+            setMin(knobType === "STANDARD" ? (knobState === null || knobState === void 0 ? void 0 : (_knobState_properties = knobState.properties) === null || _knobState_properties === void 0 ? void 0 : _knobState_properties.start) * 100 : -100);
+            setMax(knobType === "STANDARD" ? (knobState === null || knobState === void 0 ? void 0 : (_knobState_properties1 = knobState.properties) === null || _knobState_properties1 === void 0 ? void 0 : _knobState_properties1.end) * 100 : 100);
+            setInterval(knobState === null || knobState === void 0 ? void 0 : (_knobState_properties2 = knobState.properties) === null || _knobState_properties2 === void 0 ? void 0 : _knobState_properties2.interval);
+            setValue(parseInt(Number(knobState === null || knobState === void 0 ? void 0 : knobState.scaledValue).toFixed(1), 10));
+            setHasStoreData(true);
+        }
     }, []);
-    var _useState2 = _sliced_to_array$1(useState(0), 2), value = _useState2[0], setValue = _useState2[1];
     useEffect(function() {
         var knobState = Juce.getSliderState(id);
         knobState.setNormalisedValue(Math.round(value) / 100);
     }, [
         value
     ]);
+    var bindDrag = useDrag(function(param) {
+        var down = param.down, delta = param.delta;
+        setValue(function() {
+            var newValue = value + delta[1] * -1;
+            if (down) {
+                if (newValue >= max) {
+                    return max;
+                } else if (newValue <= min) {
+                    return min;
+                } else {
+                    return newValue;
+                }
+            } else {
+                return value;
+            }
+        });
+    }, {
+        delay: 1000
+    });
     return /*#__PURE__*/ React__default.createElement("div", {
         style: {
             display: 'flex',
@@ -556,26 +634,22 @@ function Knob(param) {
             SPACING.NONE
         ],
         text: label
-    }), /*#__PURE__*/ React__default.createElement(KnobHeadless, {
-        className: classnames('Knob', className),
-        id: id !== null && id !== void 0 ? id : 'Knob',
-        "aria-labelledby": "Knob",
-        valueMin: min,
-        valueMax: max,
-        valueRaw: value,
-        valueRawRoundFn: Math.round,
-        valueRawDisplayFn: function(valueRaw) {
-            return "".concat(Math.round(valueRaw), "%");
+    }), knobType === "BIPOLAR" && /*#__PURE__*/ React__default.createElement("div", {
+        className: "Knob-center-marker"
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
+        onPointerDown: function(e) {
+            return e.currentTarget.focus();
         },
-        dragSensitivity: 0.009,
-        orientation: 'vertical',
-        onValueRawChange: function(val) {
-            return setValue(Math.round(val));
+        className: classnames('Knob', className)
+    }, bindDrag()), {
+        style: {
+            transform: knobType === "STANDARD" ? '' : ')',
+            touchAction: 'none'
         }
-    }, /*#__PURE__*/ React__default.createElement("div", {
+    }), /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-inner",
         style: {
-            rotate: "".concat(360 * value / 100, "deg")
+            rotate: knobType === "STANDARD" ? "".concat(360 * value / 100, "deg") : "".concat(270 * value / 200, "deg")
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-marker"
@@ -588,6 +662,7 @@ function Knob(param) {
     }));
 }
 Knob.LABEL_POSITION = POSITION;
+Knob.KNOB_TYPE = KNOB_TYPE;
 
 var css_248z$2 = ".Slider {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.track {\n  background-color: #737373;\n}\n.horizontal .track {\n  height: 12px;\n}\n.vertical .track {\n  width: 12px;\n}\n\n.thumb {\n  height: 12px;\n  width: 12px;\n  background-color: #404040;\n}";
 styleInject(css_248z$2);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antimatter-audio/antimatter-ui",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "React UI component library for Antimatter Audio.",
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
   "license": "ISC",
   "dependencies": {
     "@headlessui/react": "^2.0.4",
+    "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
     "juce-framework-frontend": "file:src/assets/juce-framework-frontend",
     "node-sass": "^9.0.0",