@antimatter-audio/antimatter-ui 9.3.0 → 9.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -34,8 +34,8 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- var css_248z$7 = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n --color-brand: #bb68d9;\n --color-alert: #8a0101;\n --color-text: #bab6cf;\n --color-gray-100: #c7c3de;\n --color-gray-200: #9a96ab;\n --color-gray-300: #838091;\n --color-gray-400: #595763;\n --color-gray-500: #4c4a54;\n --color-gray-600: #2e2c33;\n --color-gray-700: #1e1d21;\n --color-gray-800: #101012;\n\n --color-VFDBlue-100: #0d3814;\n --color-VFDBlue-200: #234e4a;\n --color-VFDBlue-300: #128073;\n --color-VFDBlue-400: #138c6e;\n --color-VFDBlue-500: #1abe95;\n --color-VFDBlue-600: #23d8a4;\n --color-VFDBlue-700: #4aeea4;\n --color-VFDBlue-1000: #35edb4;\n --spacing-none: 0px;\n --spacing-xs: 2px;\n --spacing-sm: 4px;\n --spacing-ms: 6px;\n --spacing-md: 8px;\n --spacing-ml: 12px;\n --spacing-lg: 16px;\n --spacing-xl: 20px;\n --m-none: 0px;\n --m-xs: 2px;\n --m-sm: 4px;\n --m-ms: 6px;\n --m-md: 8px;\n --m-ml: 12px;\n --m-lg: 16px;\n --m-xl: 20px;\n --mt-none: 0px;\n --mt-xs: 2px;\n --mt-sm: 4px;\n --mt-ms: 6px;\n --mt-md: 8px;\n --mt-ml: 12px;\n --mt-lg: 16px;\n --mt-xl: 20px;\n --mr-none: 0px;\n --mr-xs: 2px;\n --mr-sm: 4px;\n --mr-ms: 6px;\n --mr-md: 8px;\n --mr-ml: 12px;\n --mr-lg: 16px;\n --mr-xl: 20px;\n --mb-none: 0px;\n --mb-xs: 2px;\n --mb-sm: 4px;\n --mb-ms: 6px;\n --mb-md: 8px;\n --mb-ml: 12px;\n --mb-lg: 16px;\n --mb-xl: 20px;\n --ml-none: 0px;\n --ml-xs: 2px;\n --ml-sm: 4px;\n --ml-ms: 6px;\n --ml-md: 8px;\n --ml-ml: 12px;\n --ml-lg: 16px;\n --ml-xl: 20px;\n --p-none: 0px;\n --p-xs: 2px;\n --p-sm: 4px;\n --p-ms: 6px;\n --p-md: 8px;\n --p-ml: 12px;\n --p-lg: 16px;\n --p-xl: 20px;\n --pt-none: 0px;\n --pt-xs: 2px;\n --pt-sm: 4px;\n --pt-ms: 6px;\n --pt-md: 8px;\n --pt-ml: 12px;\n --pt-lg: 16px;\n --pt-xl: 20px;\n --pr-none: 0px;\n --pr-xs: 2px;\n --pr-sm: 4px;\n --pr-ms: 6px;\n --pr-md: 8px;\n --pr-ml: 12px;\n --pr-lg: 16px;\n --pr-xl: 20px;\n --pb-none: 0px;\n --pb-xs: 2px;\n --pb-sm: 4px;\n --pb-ms: 6px;\n --pb-md: 8px;\n --pb-ml: 12px;\n --pb-lg: 16px;\n --pb-xl: 20px;\n --pl-none: 0px;\n --pl-xs: 2px;\n --pl-sm: 4px;\n --pl-ms: 6px;\n --pl-md: 8px;\n --pl-ml: 12px;\n --pl-lg: 16px;\n --pl-xl: 20px;\n --bg-page: #1e1d21;\n --bg-section: #1e1d21;\n --bg-popover: #1e1d21;\n --bg-highlighted: #838091;\n --bg-muted: #595763;\n --bg-selected: #999999;\n --bg-input: #1e1d21;\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xs: 0.625rem;\n --text-sm: 0.75rem;\n --text-md: 0.875rem;\n --text-lg: 1rem;\n --text-xl: 1.25rem;\n --text-title: 1.75rem;\n --gap-none: 0px;\n --gap-xs: 2px;\n --gap-sm: 4px;\n --gap-ms: 6px;\n --gap-md: 8px;\n --gap-ml: 12px;\n --gap-lg: 16px;\n --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n background: transparent;\n border: none;\n outline: none;\n appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n border: none;\n outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n cursor: not-allowed;\n}\n\n@font-face {\n font-family: LeagueSpartan;\n src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
38
- styleInject(css_248z$7);
37
+ var css_248z$8 = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n --color-brand: #bb68d9;\n --color-alert: #8a0101;\n --color-text: #bab6cf;\n --color-gray-100: #c7c3de;\n --color-gray-200: #9a96ab;\n --color-gray-300: #838091;\n --color-gray-400: #595763;\n --color-gray-500: #4c4a54;\n --color-gray-600: #2e2c33;\n --color-gray-700: #1e1d21;\n --color-gray-800: #101012;\n\n --color-VFDBlue-100: #0d3814;\n --color-VFDBlue-200: #234e4a;\n --color-VFDBlue-300: #128073;\n --color-VFDBlue-400: #138c6e;\n --color-VFDBlue-500: #1abe95;\n --color-VFDBlue-600: #23d8a4;\n --color-VFDBlue-700: #4aeea4;\n --color-VFDBlue-1000: #35edb4;\n --spacing-none: 0px;\n --spacing-xs: 2px;\n --spacing-sm: 4px;\n --spacing-ms: 6px;\n --spacing-md: 8px;\n --spacing-ml: 12px;\n --spacing-lg: 16px;\n --spacing-xl: 20px;\n --m-none: 0px;\n --m-xs: 2px;\n --m-sm: 4px;\n --m-ms: 6px;\n --m-md: 8px;\n --m-ml: 12px;\n --m-lg: 16px;\n --m-xl: 20px;\n --mt-none: 0px;\n --mt-xs: 2px;\n --mt-sm: 4px;\n --mt-ms: 6px;\n --mt-md: 8px;\n --mt-ml: 12px;\n --mt-lg: 16px;\n --mt-xl: 20px;\n --mr-none: 0px;\n --mr-xs: 2px;\n --mr-sm: 4px;\n --mr-ms: 6px;\n --mr-md: 8px;\n --mr-ml: 12px;\n --mr-lg: 16px;\n --mr-xl: 20px;\n --mb-none: 0px;\n --mb-xs: 2px;\n --mb-sm: 4px;\n --mb-ms: 6px;\n --mb-md: 8px;\n --mb-ml: 12px;\n --mb-lg: 16px;\n --mb-xl: 20px;\n --ml-none: 0px;\n --ml-xs: 2px;\n --ml-sm: 4px;\n --ml-ms: 6px;\n --ml-md: 8px;\n --ml-ml: 12px;\n --ml-lg: 16px;\n --ml-xl: 20px;\n --p-none: 0px;\n --p-xs: 2px;\n --p-sm: 4px;\n --p-ms: 6px;\n --p-md: 8px;\n --p-ml: 12px;\n --p-lg: 16px;\n --p-xl: 20px;\n --pt-none: 0px;\n --pt-xs: 2px;\n --pt-sm: 4px;\n --pt-ms: 6px;\n --pt-md: 8px;\n --pt-ml: 12px;\n --pt-lg: 16px;\n --pt-xl: 20px;\n --pr-none: 0px;\n --pr-xs: 2px;\n --pr-sm: 4px;\n --pr-ms: 6px;\n --pr-md: 8px;\n --pr-ml: 12px;\n --pr-lg: 16px;\n --pr-xl: 20px;\n --pb-none: 0px;\n --pb-xs: 2px;\n --pb-sm: 4px;\n --pb-ms: 6px;\n --pb-md: 8px;\n --pb-ml: 12px;\n --pb-lg: 16px;\n --pb-xl: 20px;\n --pl-none: 0px;\n --pl-xs: 2px;\n --pl-sm: 4px;\n --pl-ms: 6px;\n --pl-md: 8px;\n --pl-ml: 12px;\n --pl-lg: 16px;\n --pl-xl: 20px;\n --bg-page: #1e1d21;\n --bg-section: #1e1d21;\n --bg-popover: #1e1d21;\n --bg-highlighted: #838091;\n --bg-muted: #595763;\n --bg-selected: #999999;\n --bg-input: #1e1d21;\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xs: 0.625rem;\n --text-sm: 0.75rem;\n --text-md: 0.875rem;\n --text-lg: 1rem;\n --text-xl: 1.25rem;\n --text-title: 1.75rem;\n --gap-none: 0px;\n --gap-xs: 2px;\n --gap-sm: 4px;\n --gap-ms: 6px;\n --gap-md: 8px;\n --gap-ml: 12px;\n --gap-lg: 16px;\n --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n background: transparent;\n border: none;\n outline: none;\n appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n border: none;\n outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n cursor: not-allowed;\n}\n\n@font-face {\n font-family: LeagueSpartan;\n src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
38
+ styleInject(css_248z$8);
39
39
 
40
40
  var Spacing = /*#__PURE__*/ function(Spacing) {
41
41
  Spacing["none"] = "none";
@@ -84,8 +84,8 @@ var FontSizes = /*#__PURE__*/ function(FontSizes) {
84
84
  return FontSizes;
85
85
  }({});
86
86
 
87
- var css_248z$6 = ".Tabs {\n display: flex;\n font-size: 1rem;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.Tabs-Item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n &:hover,\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.Tabs-Item::-moz-selection {\n background: transparent;\n}\n.Tabs-Item::selection {\n background: transparent;\n}\n";
88
- styleInject(css_248z$6);
87
+ var css_248z$7 = ".Tabs {\n display: flex;\n font-size: 1rem;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.Tabs-Item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n &:hover,\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.Tabs-Item::-moz-selection {\n background: transparent;\n}\n.Tabs-Item::selection {\n background: transparent;\n}\n";
88
+ styleInject(css_248z$7);
89
89
 
90
90
  function _array_like_to_array$6(arr, len) {
91
91
  if (len == null || len > arr.length) len = arr.length;
@@ -181,8 +181,8 @@ function Tabs(param) {
181
181
  Tabs.padding = Spacing;
182
182
  Tabs.margin = Spacing;
183
183
 
184
- var css_248z$5 = ".Button {\n font-size: var(--text-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: var(--spacing-ms);\n padding-left: var(--spacing-ms);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-align: enter;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n &.xSmall {\n width: var(--spacing-ml);\n height: var(--spacing-ml);\n }\n &.small {\n height: var(--spacing-l);\n font-size: var(--text-xs);\n min-width: '1rem';\n min-height: '1rem';\n border-radius: var(--radius-sm);\n }\n &.large {\n border-radius: var(--radius-sm);\n height: var(--spacing-xl);\n min-width: '1rem';\n min-height: '1rem';\n }\n}\n";
185
- styleInject(css_248z$5);
184
+ var css_248z$6 = ".Button {\n font-size: var(--text-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: var(--spacing-ms);\n padding-left: var(--spacing-ms);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-align: enter;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n &.xSmall {\n width: var(--spacing-ml);\n height: var(--spacing-ml);\n }\n &.small {\n font-size: var(--text-xs);\n min-width: 1rem;\n min-height: var(--spacing-sm);\n }\n &.large {\n border-radius: var(--radius-sm);\n min-width: 1rem;\n min-height: var(--spacing-xl);\n }\n}\n";
185
+ styleInject(css_248z$6);
186
186
 
187
187
  var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
188
188
  ButtonSize["xSmall"] = "xSmall";
@@ -271,7 +271,9 @@ function _unsupported_iterable_to_array$5(o, minLen) {
271
271
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
272
272
  }
273
273
  function Button(param) {
274
- var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, children = param.children, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
274
+ var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
275
+ Spacing.small
276
+ ] : _param_padding, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
275
277
  var _React_useState = _sliced_to_array$5(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
276
278
  var buttonState = Juce.getToggleState(id);
277
279
  var isLocalhost = window.location.hostname === 'localhost';
@@ -283,7 +285,7 @@ function Button(param) {
283
285
  ]);
284
286
  // Sets up listeners to handle changes on the backend
285
287
  useEffect(function() {
286
- if (!isLocalhost) {
288
+ if (!isLocalhost && !onClick) {
287
289
  var valueListenerId = buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.addListener(function() {
288
290
  setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
289
291
  });
@@ -295,21 +297,25 @@ function Button(param) {
295
297
  }
296
298
  });
297
299
  var handleMouseDown = function(e) {
298
- e.preventDefault();
299
- if (type === ButtonType.momentary) {
300
- setIsSelected(true);
301
- buttonState.setValue(true);
302
- } else {
303
- setIsSelected(!isSelected);
304
- buttonState.setValue(!isSelected);
300
+ if (!onClick) {
301
+ e.preventDefault();
302
+ if (type === ButtonType.momentary) {
303
+ setIsSelected(true);
304
+ buttonState.setValue(true);
305
+ } else {
306
+ setIsSelected(!isSelected);
307
+ buttonState.setValue(!isSelected);
308
+ }
305
309
  }
306
310
  };
307
311
  var handleMouseUp = function() {
308
- setIsSelected(false);
309
- buttonState.setValue(false);
312
+ if (!onClick) {
313
+ setIsSelected(false);
314
+ buttonState.setValue(false);
315
+ }
310
316
  };
311
317
  React__default.useEffect(function() {
312
- if (type === ButtonType.momentary) {
318
+ if (type === ButtonType.momentary && !onClick) {
313
319
  window.addEventListener('mouseup', handleMouseUp);
314
320
  return function() {
315
321
  window.removeEventListener('mouseup', handleMouseUp);
@@ -319,19 +325,27 @@ function Button(param) {
319
325
  }, [
320
326
  isSelected
321
327
  ]);
328
+ var _padding_, _padding_1, _padding_2, _ref;
322
329
  return /*#__PURE__*/ React__default.createElement("button", {
323
330
  id: id,
324
331
  onMouseDown: handleMouseDown,
325
332
  disabled: disabled,
326
- style: _object_spread$b({}, style),
333
+ onClick: onClick && onClick,
334
+ style: _object_spread$b({
335
+ paddingTop: "var(--p-".concat(padding[0], ")"),
336
+ paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
337
+ paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
338
+ paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")")
339
+ }, style),
327
340
  className: classnames('Button', isSelected && 'selected', "".concat(size), className)
328
341
  }, size !== ButtonSize.xSmall && (text ? text : children));
329
342
  }
343
+ Button.padding = Spacing;
330
344
  Button.type = ButtonType;
331
345
  Button.size = ButtonSize;
332
346
 
333
- var css_248z$4 = ".Dropdown-button {\n font-size: var(--text-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-lg);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n border-radius: var(--radius-sm);\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n height: var(--spacing-xl);\n background: var(--bg-input);\n &:hover,\n &:focus,\n &:active {\n outline: none;\n background-color: var(--bg-highlighted);\n }\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.Dropdown-item {\n background-color: var(--bg-popover);\n padding: var(--spacing-l);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n &:hover {\n background-color: var(--bg-highlighted);\n }\n &[data-selected] {\n background-color: var(--bg-selected);\n }\n}\n";
334
- styleInject(css_248z$4);
347
+ var css_248z$5 = ".Dropdown-button {\n font-size: var(--text-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-lg);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n border-radius: var(--radius-sm);\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n height: var(--spacing-xl);\n background: var(--bg-input);\n &:hover,\n &:focus,\n &:active {\n outline: none;\n background-color: var(--bg-highlighted);\n }\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.Dropdown-item {\n background-color: var(--bg-popover);\n padding: var(--spacing-l);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n &:hover {\n background-color: var(--bg-highlighted);\n }\n &[data-selected] {\n background-color: var(--bg-selected);\n }\n}\n";
348
+ styleInject(css_248z$5);
335
349
 
336
350
  function _array_like_to_array$4(arr, len) {
337
351
  if (len == null || len > arr.length) len = arr.length;
@@ -463,8 +477,8 @@ var validate = function(param) {
463
477
  };
464
478
  };
465
479
 
466
- var css_248z$3 = ".TextInput {\n user-select: none;\n -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n";
467
- styleInject(css_248z$3);
480
+ var css_248z$4 = ".TextInput {\n user-select: none;\n -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n";
481
+ styleInject(css_248z$4);
468
482
 
469
483
  function _array_like_to_array$3(arr, len) {
470
484
  if (len == null || len > arr.length) len = arr.length;
@@ -965,8 +979,8 @@ var useSlider = function(param) {
965
979
  };
966
980
  };
967
981
 
968
- var css_248z$2 = ".RotarySlider {\n position: relative;\n height: 50px;\n width: 50px;\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n height: 100%;\n width: 100%;\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n background-color: var(--bg-popover);\n border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n width: var(--spacing-xs);\n height: 50%;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 7px 10px 7px;\n transform: rotate(180deg);\n padding-bottom: var(--spacing-sm);\n}\n";
969
- styleInject(css_248z$2);
982
+ var css_248z$3 = ".RotarySlider {\n position: relative;\n height: 50px;\n width: 50px;\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n height: 100%;\n width: 100%;\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n background-color: var(--bg-popover);\n border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n width: var(--spacing-xs);\n height: 50%;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 7px 10px 7px;\n transform: rotate(180deg);\n padding-bottom: var(--spacing-sm);\n}\n";
983
+ styleInject(css_248z$3);
970
984
 
971
985
  function _define_property$9(obj, key, value) {
972
986
  if (key in obj) {
@@ -1584,6 +1598,83 @@ function IndicatorLight(param) {
1584
1598
  }) : null);
1585
1599
  }
1586
1600
 
1601
+ var css_248z$2 = ".IconButton {\n height: 28px;\n background: var(--bg-page);\n &:hover {\n filter: brightness(80%);\n }\n}\n";
1602
+ styleInject(css_248z$2);
1603
+
1604
+ var ButtonIcon = /*#__PURE__*/ function(ButtonIcon) {
1605
+ ButtonIcon["undo"] = "UndoIcon";
1606
+ ButtonIcon["redo"] = "RedoIcon";
1607
+ return ButtonIcon;
1608
+ }(ButtonIcon || {});
1609
+ var UndoIcon = function(param) {
1610
+ var color = param.color;
1611
+ return /*#__PURE__*/ React__default.createElement("svg", {
1612
+ width: "24px",
1613
+ height: "24px",
1614
+ viewBox: "0 0 24 24",
1615
+ "stroke-width": "1.5",
1616
+ fill: "none",
1617
+ xmlns: "http://www.w3.org/2000/svg",
1618
+ color: color
1619
+ }, /*#__PURE__*/ React__default.createElement("path", {
1620
+ d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
1621
+ stroke: color,
1622
+ "stroke-width": "1.5",
1623
+ "stroke-linecap": "round",
1624
+ "stroke-linejoin": "round"
1625
+ }), /*#__PURE__*/ React__default.createElement("path", {
1626
+ d: "M7.5 11.5C6.13317 10.1332 5.36683 9.36683 4 8C5.36683 6.63317 6.13317 5.86683 7.5 4.5",
1627
+ stroke: color,
1628
+ "stroke-width": "1.5",
1629
+ "stroke-linecap": "round",
1630
+ "stroke-linejoin": "round"
1631
+ }));
1632
+ };
1633
+ var RedoIcon = function(param) {
1634
+ var color = param.color;
1635
+ return /*#__PURE__*/ React__default.createElement("svg", {
1636
+ width: "24px",
1637
+ height: "24px",
1638
+ viewBox: "0 0 24 24",
1639
+ "stroke-width": "1.5",
1640
+ fill: "none",
1641
+ xmlns: "http://www.w3.org/2000/svg",
1642
+ color: color
1643
+ }, /*#__PURE__*/ React__default.createElement("path", {
1644
+ d: "M19.5 8C15.5 8 13 8 9 8C9 8 9 8 9 8C9 8 4 8 4 12.7059C4 18 9 18 9 18C12.4286 18 14.2857 18 17.7143 18",
1645
+ stroke: color,
1646
+ "stroke-width": "1.5",
1647
+ "stroke-linecap": "round",
1648
+ "stroke-linejoin": "round"
1649
+ }), /*#__PURE__*/ React__default.createElement("path", {
1650
+ d: "M16.5 11.5C17.8668 10.1332 18.6332 9.36683 20 8C18.6332 6.63317 17.8668 5.86683 16.5 4.5",
1651
+ stroke: color,
1652
+ "stroke-width": "1.5",
1653
+ "stroke-linecap": "round",
1654
+ "stroke-linejoin": "round"
1655
+ }));
1656
+ };
1657
+ var icons = {
1658
+ UndoIcon: UndoIcon,
1659
+ RedoIcon: RedoIcon
1660
+ };
1661
+ function IconButton(param) {
1662
+ var id = param.id, icon = param.icon, onClick = param.onClick; param.className; var style = param.style;
1663
+ var Icon = icons[icon];
1664
+ return /*#__PURE__*/ React__default.createElement(Button, {
1665
+ id: id,
1666
+ className: 'IconButton className',
1667
+ onClick: onClick,
1668
+ padding: [
1669
+ Button.padding.medium
1670
+ ],
1671
+ style: style
1672
+ }, /*#__PURE__*/ React__default.createElement(Icon, {
1673
+ color: "var(--color-text)"
1674
+ }));
1675
+ }
1676
+ IconButton.icon = ButtonIcon;
1677
+
1587
1678
  function _define_property$3(obj, key, value) {
1588
1679
  if (key in obj) {
1589
1680
  Object.defineProperty(obj, key, {
@@ -1865,6 +1956,8 @@ function _object_spread$1(target) {
1865
1956
  }
1866
1957
  function ModuleHeader(param) {
1867
1958
  var title = param.title, subtitle = param.subtitle, activeItem = param.activeItem, className = param.className, style = param.style;
1959
+ var undo = Juce.getNativeFunction('undo');
1960
+ var redo = Juce.getNativeFunction('redo');
1868
1961
  return /*#__PURE__*/ React__default.createElement(Box, {
1869
1962
  gap: Box.gap.medium,
1870
1963
  tag: Box.tag.header,
@@ -1878,11 +1971,10 @@ function ModuleHeader(param) {
1878
1971
  style: {
1879
1972
  width: '1000px'
1880
1973
  },
1881
- justifyContent: Box.justifyContent.flexStart,
1882
- gap: Box.gap.xLarge
1974
+ justifyContent: Box.justifyContent.flexStart
1883
1975
  }, /*#__PURE__*/ React__default.createElement(Box, {
1884
1976
  flexDirection: Box.flexDirection.column,
1885
- flex: "0 1 200px",
1977
+ flex: "0 0 170px",
1886
1978
  alignItems: Box.alignItems.flexStart
1887
1979
  }, /*#__PURE__*/ React__default.createElement(Heading, {
1888
1980
  fontSize: Heading.fontSize.title,
@@ -1892,12 +1984,31 @@ function ModuleHeader(param) {
1892
1984
  className: 'ModuleHeader-Subheading',
1893
1985
  tag: Heading.tag.h2
1894
1986
  }, subtitle)), /*#__PURE__*/ React__default.createElement(Box, {
1895
- alignItems: Box.alignItems.flexStart
1987
+ alignItems: Box.alignItems.flexStart,
1988
+ flex: "0 0 250px"
1896
1989
  }, /*#__PURE__*/ React__default.createElement(KeyValueDisplayScreen, {
1897
1990
  data: {
1898
1991
  key: activeItem === null || activeItem === void 0 ? void 0 : activeItem.key,
1899
1992
  value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value
1900
1993
  }
1994
+ })), /*#__PURE__*/ React__default.createElement(Box, {
1995
+ flex: "0"
1996
+ }, /*#__PURE__*/ React__default.createElement(IconButton, {
1997
+ id: "undo",
1998
+ icon: IconButton.icon.undo,
1999
+ onClick: function() {
2000
+ return undo().then(function() {
2001
+ console.log('undo');
2002
+ });
2003
+ }
2004
+ }), /*#__PURE__*/ React__default.createElement(IconButton, {
2005
+ id: "redo",
2006
+ onClick: function() {
2007
+ return redo().then(function() {
2008
+ console.log('redo');
2009
+ });
2010
+ },
2011
+ icon: IconButton.icon.redo
1901
2012
  }))));
1902
2013
  }
1903
2014
 
@@ -1945,5 +2056,5 @@ function ModuleFooter(param) {
1945
2056
  });
1946
2057
  }
1947
2058
 
1948
- export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledToNormalised as scaledTonormalised, useSlider };
2059
+ export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledToNormalised as scaledTonormalised, useSlider };
1949
2060
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +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,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO;;AAExD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,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;AAC/C,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AACA,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;AAEA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
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,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO;;AAExD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,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;AAC/C,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AACA,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;AAEA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antimatter-audio/antimatter-ui",
3
- "version": "9.3.0",
3
+ "version": "9.4.0",
4
4
  "description": "React UI component library for Antimatter Audio.",
5
5
  "repository": {
6
6
  "type": "git",