@antimatter-audio/antimatter-ui 6.0.0 → 7.0.0

package/README.md

@@ -74,7 +74,7 @@ If you add a new component to this library, make sure to also add the component
 
 If your new component controls an `AudioProcessorValueTreeState` paramater in Juce, you will need to handle getting and setting that state in your React component, and you will also need to set up a parameter for that state in the demo Juce app in [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-ui).
 
-See `components/Buttons/Button.tsx`, `components/Input/Dropdown.tsx`, and `components/Input/Slider.tsx` for examples of how to get and set Juce's `ToggleState`, `ComboBoxState`, and `SliderState`.
+See `core/Buttons/Button.tsx`, `core/Input/Dropdown.tsx`, and `core/Input/Slider.tsx` for examples of how to get and set Juce's `ToggleState`, `ComboBoxState`, and `SliderState`.
 
 See the README file in the `/juce` directory in the [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-ui) repo for more information on setting up an `AudioProcessorValueTreeState` parameter in the demo app.
 

package/dist/index.d.ts

@@ -1,130 +1,84 @@
 import * as React from 'react';
 import React__default from 'react';
-import { GLOBAL_NAMED_COLORS as GLOBAL_NAMED_COLORS$1, SPACING as SPACING$1 } from 'common/types';
+import { Spacing as Spacing$1, FlexWrap as FlexWrap$1 } from 'common/types';
+import { FlexDirection as FlexDirection$1, AlignItems, JustifyContent as JustifyContent$1 } from 'core/Layout/types';
+export { defaultTheme, root, themeValues } from 'styles.css';
+import * as _use_gesture_react_dist_declarations_src_types from '@use-gesture/react/dist/declarations/src/types';
+import { SliderOrientation as SliderOrientation$1, JuceSliderProperties as JuceSliderProperties$1 } from 'core/Slider/types';
 
 interface TabsProps {
     items: Array<string>;
     onChange: (index: number) => void;
-    componentTheme?: {
-        textColor: GLOBAL_NAMED_COLORS$1 | string;
-        backgroundColor: GLOBAL_NAMED_COLORS$1 | string;
-        backgroundImage: string;
-    };
-    padding?: Array<SPACING$1>;
+    padding?: Array<Spacing$1>;
     className?: string;
     style?: object;
 }
 declare function Tabs({ items, className, padding, onChange, }: React__default.PropsWithChildren<TabsProps>): React__default.JSX.Element;
-declare namespace Tabs {
-    var TEXT_COLOR: typeof GLOBAL_NAMED_COLORS$1;
-    var BACKGROUND_COLOR: typeof GLOBAL_NAMED_COLORS$1;
-}
 
-declare enum BUTTON_SIZE {
-    SMALL = "small",
-    LARGE = "large"
+declare enum ButtonSize {
+    small = "small",
+    large = "large"
 }
-declare enum BUTTON_TYPE {
-    MOMENTARY = "MOMENTARY",
-    LATCH = "LATCH"
+declare enum ButtonType {
+    momentary = "momentary",
+    latch = "latch"
 }
 
 interface TextButtonProps {
     id: any;
     disabled?: boolean;
-    size?: BUTTON_SIZE;
-    type?: BUTTON_TYPE;
-    componentTheme?: {
-        textColor?: GLOBAL_NAMED_COLORS$1 | string;
-        backgroundColor?: GLOBAL_NAMED_COLORS$1 | string;
-        backgroundImage?: string;
-    };
+    size?: ButtonSize;
+    type?: ButtonType;
     text?: string;
     className?: string;
     style?: object;
     children?: React.ReactNode;
 }
-declare function Button({ disabled, text, id, className, componentTheme, style, children, type, size, }: React.PropsWithChildren<TextButtonProps>): React.JSX.Element;
+declare function Button({ disabled, text, id, className, style, children, type, size, }: React.PropsWithChildren<TextButtonProps>): React.JSX.Element;
 declare namespace Button {
-    var TYPE: typeof BUTTON_TYPE;
-    var SIZE: typeof BUTTON_SIZE;
-    var BACKGROUND: typeof GLOBAL_NAMED_COLORS$1;
-    var TEXT_COLOR: typeof GLOBAL_NAMED_COLORS$1;
+    var type: typeof ButtonType;
+    var size: typeof ButtonSize;
 }
 
-declare enum FLEX_DIRECTION {
-    ROW = 0,
-    COLUMN = 1
+interface DropdownProps {
+    id: string;
+    items: Array<string>;
+    className?: string;
+    onChange?: (event: any) => {};
 }
+declare function Dropdown({ items, className, id }: DropdownProps): React__default.JSX.Element;
+
+declare function TextInput({ onChange, value, min, max, minLength, maxLength, style, className, textColor, }: {
+    onChange: ({ scaledValue }: {
+        scaledValue: number;
+    }) => any;
+    value: number;
+    min: number;
+    max: number;
+    minLength?: number;
+    maxLength?: number;
+    textColor?: string;
+    style?: React__default.CSSProperties;
+    className?: string;
+}): React__default.JSX.Element;
 
-/**
- * @typedef SPACING
- * @property {string} NONE "0px"
- * @property {string} X_SMALL "2px"
- * @property {string} SMALL "4px"
- * @property {string} MEDIUM_SMALL "8px"
- * @property {string} MEDIUM "12px"
- * @property {string} MEDIUM_LARGE "16px"
- * @property {string} LARGE "20px"
- * @property {string} X_LARGE "24px"
- */
-declare enum SPACING {
-    NONE = "",
-    X_SMALL = "xsmall",
-    SMALL = "small",
-    MEDIUM_SMALL = "mediumsmall",
-    MEDIUM = "medium",
-    MEDIUM_LARGE = "mediumlarge",
-    LARGE = "large",
-    X_LARGE = "xlarge"
-}
-declare enum POSITION {
-    TOP = "top",
-    BOTTOM = "bottom"
-}
-declare enum DIRECTION {
-    VERTICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
-declare enum ALIGN {
-    FLEX_START = "flex-start",
-    FLEX_END = "flex-end",
-    CENTER = "center"
-}
-declare enum JUSTIFY {
-    FLEX_START = "flex-start",
-    FLEX_END = "flex-end",
-    CENTER = "center"
-}
-declare enum HEIGHT {
-    FULL = "100%",
-    AUTO = "auto"
-}
-declare enum WIDTH {
-    FULL = "100%",
-    AUTO = "auto"
-}
-declare enum TEXT_SIZES {
-    X_SMALL = "xsmall",
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large",
-    X_LARGE = "xlarge"
-}
-declare enum GLOBAL_DEFAULT_THEMES {
-    LIGHT = "light",
-    MED = "med",
-    DARK = "dark"
-}
-declare enum GLOBAL_NAMED_COLORS {
-    GLOBAL_ACCENT_DEFAULT = "global-accent-default",
-    LIGHT_TEXT = "light-text",
-    DARK_TEXT = "dark-text",
-    BG_LIGHT = "bg-light",
-    BG_MED_LIGHT = "bg-med-light",
-    BG_MED = "bg-med",
-    BG_MED_DARK = "bg-med-dark",
-    BG_DARK = "bg-dark"
+declare enum SliderPolarity {
+    linear = "linear",
+    bipolar = "bipolar"
+}
+declare enum SliderType {
+    bar = "bar",
+    rotary = "rotary",
+    custom = "custom"
+}
+declare enum SliderRotationBehavior {
+    rotateIndicator = "rotateIndicator",
+    rotateKnob = "rotateKnob",
+    noRotation = "noRotation"
+}
+declare enum SliderOrientation {
+    horizontal = "horizontal",
+    vertical = "vertical"
 }
 interface JuceSliderProperties {
     name?: string;
@@ -136,100 +90,66 @@ interface JuceSliderProperties {
     numSteps?: number;
 }
 
-declare enum LAYOUT_ROLES$2 {
-    MAIN = "main",
-    SECTION = "section"
-}
-interface GridColProps {
-    span?: number;
-    offset?: number;
-    padding?: Array<SPACING>;
-    centerContentHorizontal?: boolean;
-    centerContentVertical?: boolean;
-    alignContentRight?: boolean;
-    flexDirection?: FLEX_DIRECTION;
-    gap?: SPACING;
-    componentTheme?: {
-        backgroundColor: GLOBAL_NAMED_COLORS;
-        backgroundImage: string;
-    };
-    role?: LAYOUT_ROLES$2;
+interface RotarySliderProps {
+    id: any;
+    polarity?: SliderPolarity;
+    rotationBehavior?: SliderRotationBehavior;
+    onMouseEnter?: (label: string, scaledValue: number) => void;
+    onChange?: (newValue: any) => void;
     className?: string;
-    style?: React.CSSProperties;
-    border?: boolean;
-    onClick?: () => void;
+    style?: object;
+    /**
+     * Returns the scaled value of the parameter. This corresponds to the return value of
+     * NormalisableRange::convertFrom0to1() (C++). This value will differ from a linear
+     * [0, 1] range if a non-default NormalisableRange was set for the parameter.
+     */
+    mockInitialScaledValue?: number;
+    mockProperties?: JuceSliderProperties;
 }
-declare function Col({ offset, centerContentHorizontal, centerContentVertical, alignContentRight, className, role, flexDirection, gap, children, onClick, span, componentTheme, padding, style, border, }: React.PropsWithChildren<GridColProps>): React.JSX.Element;
-declare namespace Col {
-    var PADDING: typeof SPACING;
-    var ROLE: typeof LAYOUT_ROLES$2;
-    var FLEX_DIRECTION: typeof FLEX_DIRECTION;
-    var GAP: typeof SPACING;
+declare function RotarySlider({ polarity, className, id, onMouseEnter, onChange, rotationBehavior, mockInitialScaledValue, mockProperties, style, }: React__default.PropsWithChildren<RotarySliderProps>): React__default.JSX.Element;
+declare namespace RotarySlider {
+    var sliderPolarity: typeof SliderPolarity;
 }
 
-declare enum LAYOUT_ROLES$1 {
-    MAIN = "main",
-    SECTION = "section"
-}
-interface GridRowProps {
+interface SliderProps {
+    id: any;
+    polarity?: SliderPolarity;
+    sliderOrientation?: SliderOrientation;
+    onMouseEnter?: (label: string, scaledValue: number) => void;
+    onChange?: (newValue: any) => any;
     className?: string;
-    id?: string;
     style?: object;
-    background?: GLOBAL_NAMED_COLORS$1;
-    padding?: Array<SPACING$1>;
-    gap?: SPACING$1;
-    wrap?: boolean;
-    flexDirection?: FLEX_DIRECTION;
-    componentTheme?: {
-        backgroundColor: GLOBAL_NAMED_COLORS$1;
-        backgroundImage: string;
-    };
-    role?: LAYOUT_ROLES$1;
-    border?: boolean;
-    onClick?: () => void;
+    /**
+     * Returns the scaled value of the parameter. This corresponds to the return value of
+     * NormalisableRange::convertFrom0to1() (C++). This value will differ from a linear
+     * [0, 1] range if a non-default NormalisableRange was set for the parameter.
+     */
+    mockInitialScaledValue?: number;
+    mockProperties?: JuceSliderProperties;
 }
-declare function Row({ className, id, children, onClick, background, gap, style, role, wrap, padding, flexDirection, border, }: React.PropsWithChildren<GridRowProps>): React.JSX.Element;
-declare namespace Row {
-    var PADDING: typeof SPACING$1;
-    var FLEX_DIRECTION: typeof FLEX_DIRECTION;
-    var ROLE: typeof LAYOUT_ROLES$1;
-    var GAP: typeof SPACING$1;
+declare function Slider({ polarity, sliderOrientation, className, id, onMouseEnter, onChange, style, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
+declare namespace Slider {
+    var sliderType: typeof SliderType;
+    var sliderPolarity: typeof SliderPolarity;
+    var sliderOrientation: typeof SliderOrientation;
 }
 
-interface DropdownProps {
-    id: string;
-    items: Array<string>;
-    className?: string;
-    onChange?: (event: any) => {};
-}
-declare function Dropdown({ items, className, id }: DropdownProps): React__default.JSX.Element;
+declare function SliderValue({ value, min, max, minLength, maxLength, isEditable, onChange, className, style, }: {
+    value: number;
+    min: number;
+    max: number;
+    minLength: number;
+    maxLength: number;
+    isEditable: boolean;
+    onChange: (...args: any) => any;
+    className: string;
+    style: React__default.CSSProperties;
+}): React__default.JSX.Element;
 
-declare enum SLIDER_POLARITY {
-    LINEAR = "LINEAR",
-    BIPOLAR = "BIPOLAR"
-}
-declare enum SLIDER_TYPE {
-    BAR = "BAR",
-    ROTARY = "ROTARY",
-    ROTARY_LARGE = "ROTARY_LARGE"
-}
-declare enum SLIDER_ORIENTATION {
-    HORIZONTAL = "HORIZONTAL",
-    VERTICAL = "VERTICAL"
-}
-interface SliderProps {
+interface CustomSliderProps {
     id: any;
-    label?: string;
-    labelPosition?: POSITION;
-    showValue?: boolean;
-    sliderPolarity?: SLIDER_POLARITY;
-    sliderType?: SLIDER_TYPE;
-    sliderOrientation?: SLIDER_ORIENTATION;
-    onMouseEnter?: (label: string, scaledValue: number) => void;
-    onChange?: (newValue: any) => void;
-    componentTheme?: {
-        backgroundImage?: string;
-    };
+    onMouseEnter?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
     className?: string;
     style?: object;
     /**
@@ -240,91 +160,74 @@ interface SliderProps {
     mockInitialScaledValue?: number;
     mockProperties?: JuceSliderProperties;
 }
-declare function Slider({ label, labelPosition, sliderPolarity, sliderOrientation, sliderType, componentTheme, className, id, onMouseEnter, onChange, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
-declare namespace Slider {
-    var LABEL_POSITION: typeof POSITION;
-    var SLIDER_TYPE: typeof SLIDER_TYPE;
-    var SLIDER_POLARITY: typeof SLIDER_POLARITY;
-    var SLIDER_ORIENTATION: typeof SLIDER_ORIENTATION;
+declare function CustomSlider({ className, id, onMouseEnter, onChange, mockInitialScaledValue, mockProperties, style, children, }: React__default.PropsWithChildren<CustomSliderProps>): React__default.JSX.Element;
+
+declare enum Spacing {
+    none = "none",
+    xSmall = "xSmall",
+    small = "small",
+    mediumSmall = "mediumSmall",
+    medium = "medium",
+    mediumLarge = "mediumLarge",
+    large = "large",
+    xLarge = "xLarge"
+}
+declare enum FlexDirection {
+    row = "row",
+    column = "column"
+}
+declare enum FlexAlign {
+    flexStart = "flex-start",
+    flexEnd = "flex-end",
+    center = "center"
+}
+declare enum FlexWrap {
+    wrap = "wrap",
+    noWrap = "nowrap"
+}
+declare enum JustifyContent {
+    flexStart = "flex-start",
+    flexEnd = "flex-end",
+    center = "center"
+}
+declare enum Height {
+    full = "100%",
+    auto = "auto"
+}
+declare enum Width {
+    full = "100%",
+    auto = "auto"
 }
 
-declare enum HEADER_LEVELS {
-    H1 = "h1",
-    H2 = "h2"
+declare enum HeaderLevels {
+    h1 = "h1",
+    h2 = "h2"
 }
 
 interface TextHeaderProps {
-    level?: HEADER_LEVELS;
-    padding?: Array<SPACING>;
-    componentTheme?: {
-        fontFamily?: string;
-        textColor?: GLOBAL_NAMED_COLORS | string;
-    };
-    text?: string;
+    level?: HeaderLevels;
+    padding?: Array<Spacing>;
+    value?: string;
     id?: any;
     className?: string;
     style?: object;
 }
-declare function TextHeader({ text, id, className, style, componentTheme, level, padding, children, }: React.PropsWithChildren<TextHeaderProps>): React.JSX.Element;
+declare function TextHeader({ value, id, className, style, level, padding, children, }: React.PropsWithChildren<TextHeaderProps>): React.JSX.Element;
 declare namespace TextHeader {
-    var HEADER_LEVELS: typeof HEADER_LEVELS;
-    var SPACING: typeof SPACING;
-    var THEME: typeof GLOBAL_DEFAULT_THEMES;
+    var headerLevels: typeof HeaderLevels;
+    var spacing: typeof Spacing;
 }
 
-interface TextLabelProps {
-    text?: string;
-    padding?: Array<SPACING>;
-    customTheme?: {
-        textColor?: GLOBAL_NAMED_COLORS;
-        fontFamily?: string;
-    };
-    size?: TEXT_SIZES;
+interface LabelProps {
+    padding?: Array<Spacing>;
+    value?: string | number;
     id?: any;
     className?: string;
     style?: object;
 }
-declare function TextLabel({ text, id, className, style, padding, customTheme, size, children, }: React.PropsWithChildren<TextLabelProps>): React.JSX.Element;
-declare namespace TextLabel {
-    var SIZE: typeof TEXT_SIZES;
-    var COLOR: typeof GLOBAL_NAMED_COLORS;
-}
-
-declare enum LAYOUT_ROLES {
-    MAIN = "main",
-    SECTION = "section"
-}
-interface LayoutProps {
-    className?: string;
-    style?: React__default.CSSProperties;
-    alignItems?: ALIGN;
-    justifyContent?: JUSTIFY;
-    gap?: SPACING;
-    wrap?: boolean;
-    direction?: DIRECTION;
-    globalTheme?: GLOBAL_DEFAULT_THEMES | string;
-    componentTheme?: {
-        backgroundColor?: GLOBAL_NAMED_COLORS | string;
-        backgroundImage?: string;
-    };
-    role?: LAYOUT_ROLES;
-    width?: WIDTH | string;
-    height?: HEIGHT | string;
-    border?: boolean;
-    padding?: Array<SPACING>;
-}
-declare function Layout({ alignItems, justifyContent, className, style, children, componentTheme, globalTheme, role, width, wrap, height, border, direction, padding, gap, }: React__default.PropsWithChildren<LayoutProps>): React__default.JSX.Element;
-declare namespace Layout {
-    var ALIGN_ITEMS: typeof ALIGN;
-    var JUSTIFY_CONTENT: typeof JUSTIFY;
-    var GAP: typeof SPACING;
-    var DIRECTION: typeof DIRECTION;
-    var WIDTH: typeof WIDTH;
-    var HEIGHT: typeof HEIGHT;
-    var PADDING: typeof SPACING;
-    var GLOBAL_THEME: typeof GLOBAL_DEFAULT_THEMES;
-    var BACKGROUND_COLOR: typeof GLOBAL_NAMED_COLORS;
-    var ROLE: typeof LAYOUT_ROLES;
+declare function Label({ value, id, className, style, padding, children, }: React.PropsWithChildren<LabelProps>): React.JSX.Element;
+declare namespace Label {
+    var spacing: typeof Spacing;
 }
 
 interface MatrixProps {
@@ -338,20 +241,84 @@ interface MatrixProps {
 }
 declare const Matrix: React__default.FC<React__default.PropsWithChildren<MatrixProps>>;
 
-declare enum INDICATOR_LIGHT_TYPE {
-    SMALL = "SMALL",
-    LARGE = "LARGE"
+declare enum IndicatorLightType {
+    small = "small",
+    large = "large"
 }
 interface IndicatorLightProps {
     id?: string;
     isActive: boolean;
-    type?: INDICATOR_LIGHT_TYPE;
+    type?: IndicatorLightType;
     label?: string;
     className?: string;
 }
 declare function IndicatorLight({ isActive, className, label, type, id, }: IndicatorLightProps): React__default.JSX.Element;
 declare namespace IndicatorLight {
-    var TYPE: typeof INDICATOR_LIGHT_TYPE;
+    var type: typeof IndicatorLightType;
+}
+
+interface LayoutProps {
+    className?: string;
+    style?: React__default.CSSProperties;
+    alignItems?: FlexAlign;
+    justifyContent?: JustifyContent;
+    gap?: Spacing;
+    flexWrap?: FlexWrap;
+    flexDirection?: FlexDirection;
+    width?: Width | string;
+    height?: Height | string;
+    border?: boolean;
+    padding?: Array<Spacing>;
+}
+declare function Layout({ alignItems, justifyContent, className, style, children, width, flexWrap, height, border, flexDirection, padding, gap, }: React__default.PropsWithChildren<LayoutProps>): React__default.JSX.Element;
+declare namespace Layout {
+    var alignItems: typeof FlexAlign;
+    var justifyContent: typeof JustifyContent;
+    var gap: typeof Spacing;
+    var flexDirection: typeof FlexDirection;
+    var width: typeof Width;
+    var height: typeof Height;
+    var padding: typeof Spacing;
+    var flexWrap: typeof FlexWrap;
+}
+
+interface LayoutFlexItemProps {
+    span?: number;
+    offset?: number;
+    padding?: Array<Spacing$1>;
+    justifyContent?: JustifyContent$1;
+    alignItems?: AlignItems;
+    flexDirection?: FlexDirection$1;
+    flexWrap?: FlexWrap$1;
+    flex?: string;
+    gap?: Spacing$1;
+    className?: string;
+    style?: React.CSSProperties;
+    border?: boolean;
+    onClick?: () => void;
+}
+declare function LayoutFlexItem({ justifyContent, alignItems, flexDirection, className, children, onClick, flex, padding, style, border, gap, }: React.PropsWithChildren<LayoutFlexItemProps>): React.JSX.Element;
+declare namespace LayoutFlexItem {
+    var padding: typeof Spacing$1;
+    var flexDirection: typeof FlexDirection$1;
+    var alignItems: typeof AlignItems;
+    var justifyContent: typeof JustifyContent$1;
+    var gap: typeof Spacing$1;
+    var flexWrap: typeof FlexWrap$1;
+}
+
+interface LayoutBlockItemProps {
+    span?: number;
+    offset?: number;
+    padding?: Array<Spacing$1>;
+    className?: string;
+    style?: React.CSSProperties;
+    border?: boolean;
+    onClick?: () => void;
+}
+declare function LayoutBlockItem({ className, children, onClick, padding, style, border, }: React.PropsWithChildren<LayoutBlockItemProps>): React.JSX.Element;
+declare namespace LayoutBlockItem {
+    var padding: typeof Spacing$1;
 }
 
 interface KeyValueDisplayScreenProps {
@@ -373,4 +340,72 @@ interface OscilloscopeProps {
 }
 declare function Oscilloscope({ width, height, className, style, id, }: OscilloscopeProps): React__default.JSX.Element;
 
-export { Button, Col, Dropdown, IndicatorLight, KeyValueDisplayScreen, Layout, Matrix, Oscilloscope, Row, Slider, Tabs, TextHeader, TextLabel };
+declare const clamp: (val: number, min?: number, max?: number) => number;
+declare function normalizedToScaledValue({ normalizedValue, skew, end, start, }: {
+    normalizedValue: number;
+    skew?: number;
+    end: number;
+    start: number;
+}): number;
+declare function getNormalizedValue({ scaledValue, start, end, skew, }: {
+    scaledValue: number;
+    start: number;
+    end: number;
+    skew?: number;
+}): number;
+declare const decimalToPercent: (decimal: number | string) => number;
+declare const percentToDecimal: (percent: number | string) => number;
+declare const getTransformString: ({ sliderType, sliderOrientation, polarity, normalizedValue, scaledValue, }: {
+    sliderType: SliderType;
+    sliderOrientation?: SliderOrientation;
+    polarity: SliderPolarity;
+    normalizedValue: number;
+    scaledValue: number;
+}) => {
+    transform: string;
+    transformOrigin: string;
+} | {
+    transform: string;
+    transformOrigin?: undefined;
+};
+declare const getPosition: ({ sliderType, sliderOrientation, polarity, }: {
+    sliderType: SliderType;
+    sliderOrientation?: SliderOrientation;
+    polarity: SliderPolarity;
+}) => {
+    top: string;
+    bottom: string;
+    left: string;
+    right?: undefined;
+} | {
+    right: string;
+    bottom: string;
+    left: string;
+    top?: undefined;
+} | {
+    top?: undefined;
+    bottom?: undefined;
+    left?: undefined;
+    right?: undefined;
+};
+
+declare const useSlider: ({ id, mockProperties, mockInitialScaledValue, sliderOrientation, onChange, }: {
+    id: string;
+    sliderOrientation?: SliderOrientation$1;
+    mockProperties: JuceSliderProperties$1;
+    mockInitialScaledValue: number;
+    onChange?: (newValue: any) => any;
+}) => {
+    handleChange: ({ normalizedValue, scaledValue, }: {
+        normalizedValue?: number;
+        scaledValue?: number;
+    }) => void;
+    bindDrag: (...args: any[]) => _use_gesture_react_dist_declarations_src_types.ReactDOMAttributes;
+    normalizedValue: number;
+    setNormalizedValue: React.Dispatch<React.SetStateAction<number>>;
+    scaledValue: number;
+    setScaledValue: React.Dispatch<React.SetStateAction<number>>;
+    properties: JuceSliderProperties$1 | null;
+};
+
+export { Slider as BarSlider, Button, CustomSlider, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Layout, LayoutBlockItem, LayoutFlexItem, Matrix, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, useSlider };