zds-pickers 4.0.5 → 4.0.7

package/dist/types/index.d.ts

@@ -1,2 +1,34 @@
-export * from '../main'
-export {}
+export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker';
+export { default as ChannelPicker } from './pickers/ChannelPicker';
+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';
+export type * from './pickers/ChannelMappingPicker';
+export type * from './pickers/ChannelPicker';
+export type * from './pickers/Knob';
+export type * from './pickers/KnobPicker';
+export type * from './pickers/LatchPicker';
+export type * from './pickers/MappingPicker';
+export type * from './pickers/NotePicker';
+export type * from './other/OctavePlayer';
+export type * from './pickers/PianoPicker';
+export type * from './pickers/PolarityPicker';
+export type * from './pickers/ResponseCurvePicker';
+export type * from './pickers/Select';
+export type * from './pickers/StatusPicker';
+export type * from './other/SVGText';
+export type * from './pickers/ValuePicker';
+export type * from './midi/export';
+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/dist/types/pickers/CCPicker.d.ts

@@ -1,6 +1,7 @@
 import type { GroupBase, SelectInstance } from 'react-select';
 import type { Option, SelectProps } from './Select';
 type CCPickerProps = SelectProps<number>;
+type CCPickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const CCPicker: import("react").ForwardRefExoticComponent<CCPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
 export default CCPicker;
-export type { CCPickerProps };
+export type { CCPickerProps, CCPickerRef };

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

@@ -8,6 +8,7 @@ interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
     value: number;
     onChange: (value: InternalValue) => void;
 }
+type ChannelMappingPickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const ChannelMappingPicker: import("react").ForwardRefExoticComponent<ChannelMappingPickerProps & import("react").RefAttributes<SelectInstance<Option<InternalValue>, false, GroupBase<Option<InternalValue>>>>>;
 export default ChannelMappingPicker;
-export type { ChannelMappingPickerProps };
+export type { ChannelMappingPickerProps, ChannelMappingPickerRef };

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

@@ -1,6 +1,8 @@
 import type { GroupBase, SelectInstance } from 'react-select';
 import type { Option, SelectProps } from './Select';
-type ChannelPickerProps = SelectProps<number>;
-declare const ChannelPicker: import("react").ForwardRefExoticComponent<ChannelPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
+type Channel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
+type ChannelPickerProps = SelectProps<Channel>;
+type ChannelPickerRef = SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>;
+declare const ChannelPicker: import("react").ForwardRefExoticComponent<ChannelPickerProps & import("react").RefAttributes<SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>>>;
 export default ChannelPicker;
-export type { ChannelPickerProps };
+export type { Channel, ChannelPickerProps, ChannelPickerRef };

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

@@ -1,6 +1,8 @@
 import type { GroupBase, SelectInstance } from 'react-select';
+import type { Polarity } from './PolarityPicker';
 import type { Option, SelectProps } from './Select';
-type LatchPickerProps = SelectProps<number>;
-declare const LatchPicker: import("react").ForwardRefExoticComponent<LatchPickerProps & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
+type LatchPickerProps = SelectProps<Polarity>;
+type LatchPickerRef = SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>;
+declare const LatchPicker: import("react").ForwardRefExoticComponent<LatchPickerProps & import("react").RefAttributes<SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>>>;
 export default LatchPicker;
-export type { LatchPickerProps };
+export type { LatchPickerProps, LatchPickerRef };

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

@@ -3,8 +3,9 @@ import type { Option, SelectProps } from './Select';
 type MappingPickerProps = SelectProps<string> & {
     allowClearing: boolean;
 };
+type MappingPickerRef = SelectInstance<Option<string>, false, GroupBase<Option<string>>>;
 declare const MappingPicker: import("react").ForwardRefExoticComponent<SelectProps<string> & {
     allowClearing: boolean;
 } & import("react").RefAttributes<SelectInstance<Option<string>, false, GroupBase<Option<string>>>>>;
 export default MappingPicker;
-export type { MappingPickerProps };
+export type { MappingPickerProps, MappingPickerRef };

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

@@ -8,6 +8,7 @@ type NotePickerProps = SelectProps<number> & {
     mapping?: Mapping;
     onChange: (value: number) => void;
 };
+type NotePickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const NotePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
     channel: number;
     disabled?: boolean;
@@ -16,4 +17,4 @@ declare const NotePicker: import("react").ForwardRefExoticComponent<SelectProps<
     onChange: (value: number) => void;
 } & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
 export default NotePicker;
-export type { NotePickerProps };
+export type { NotePickerProps, NotePickerRef };

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

@@ -1,12 +1,14 @@
 import type { GroupBase, SelectInstance } from 'react-select';
 import type { Option, SelectProps } from './Select';
-type PolarityPickerProps = SelectProps<number> & {
+type Polarity = 0 | 1;
+type PolarityPickerProps = SelectProps<Polarity> & {
     labelOff?: string;
     labelOn?: string;
 };
-declare const PolarityPicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
+type PolarityPickerRef = SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>;
+declare const PolarityPicker: import("react").ForwardRefExoticComponent<SelectProps<Polarity> & {
     labelOff?: string;
     labelOn?: string;
-} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
+} & import("react").RefAttributes<SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>>>;
 export default PolarityPicker;
-export type { PolarityPickerProps };
+export type { Polarity, PolarityPickerProps, PolarityPickerRef };

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

@@ -1,7 +1,16 @@
 import { type TooltipProps } from '../other/DefaultTooltip';
 import type { Option } from './Select';
+declare const RESPONSE_CURVE_0 = 0;
+declare const RESPONSE_CURVE_1 = 1;
+declare const RESPONSE_CURVE_2 = 2;
+declare const RESPONSE_CURVE_3 = 3;
+declare const RESPONSE_CURVE_4 = 4;
+declare const RESPONSE_CURVE_5 = 5;
+declare const RESPONSE_CURVE_6 = 6;
+declare const RESPONSE_CURVE_7 = 7;
+type Curve = typeof RESPONSE_CURVE_0 | typeof RESPONSE_CURVE_1 | typeof RESPONSE_CURVE_2 | typeof RESPONSE_CURVE_3 | typeof RESPONSE_CURVE_4 | typeof RESPONSE_CURVE_5 | typeof RESPONSE_CURVE_6 | typeof RESPONSE_CURVE_7;
 type ResponseCurve = {
-    value: string | number;
+    value: Curve;
     label: React.ReactNode;
     c1: number;
     c2: number;
@@ -12,20 +21,20 @@ type ResponseCurve = {
     labelX: number;
     labelY: number;
 };
-declare const RESPONSE_CURVES: Option<number>[];
+declare const RESPONSE_CURVES: Option<Curve>[];
 type ResponseCurveProps = {
     autosize: boolean;
     disabled?: boolean;
     inverted: boolean;
     onChange: (event: {
         target: {
-            value: number;
+            value: Curve;
         };
     }) => void;
     Tooltip: React.FC<TooltipProps>;
-    value: number;
+    value: Curve;
 };
 declare const ResponseCurve: (props: ResponseCurveProps) => import("react/jsx-runtime").JSX.Element;
 export default ResponseCurve;
 export { RESPONSE_CURVES };
-export type { ResponseCurveProps };
+export type { Curve, ResponseCurve, ResponseCurveProps };

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

@@ -1,13 +1,15 @@
 import type { GroupBase, SelectInstance } from 'react-select';
 import { type TooltipProps } from '../other/DefaultTooltip';
+import { type Curve } from './ResponseCurve';
 import type { Option, SelectProps } from './Select';
-type ResponseCurvePickerProps = SelectProps<number> & {
+type ResponseCurvePickerProps = SelectProps<Curve> & {
     inverted?: boolean;
     Tooltip?: React.FC<TooltipProps>;
 };
-declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
+type ResponseCurvePickerRef = SelectInstance<Option<Curve>, false, GroupBase<Option<Curve>>>;
+declare const ResponseCurvePicker: import("react").ForwardRefExoticComponent<SelectProps<Curve> & {
     inverted?: boolean;
     Tooltip?: React.FC<TooltipProps>;
-} & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
+} & import("react").RefAttributes<SelectInstance<Option<Curve>, false, GroupBase<Option<Curve>>>>>;
 export default ResponseCurvePicker;
-export type { ResponseCurvePickerProps };
+export type { ResponseCurvePickerProps, ResponseCurvePickerRef };

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

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

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

@@ -5,10 +5,11 @@ type ValuePickerProps = SelectProps<number> & {
     max?: number;
     min?: number;
 };
+type ValuePickerRef = SelectInstance<Option<number>, false, GroupBase<Option<number>>>;
 declare const ValuePicker: import("react").ForwardRefExoticComponent<SelectProps<number> & {
     highToLow?: boolean;
     max?: number;
     min?: number;
 } & import("react").RefAttributes<SelectInstance<Option<number>, false, GroupBase<Option<number>>>>>;
 export default ValuePicker;
-export type { ValuePickerProps };
+export type { ValuePickerProps, ValuePickerRef };

package/lib/@types/nebiru-react-rotary-knob.d.ts

@@ -0,0 +1,20 @@
+declare module 'nebiru-react-rotary-knob' {
+  const Knob: React.ComponentType<{
+    clampMax: number
+    clampMin: number
+    className: string
+    disabled: boolean
+    max: number
+    min: number
+    onChange: (value: number) => void
+    onWheel?: (event: WheelEvent) => void
+    preciseMode: boolean
+    rotateDegrees: number
+    skin: typeof import('./knobSkin10').default
+    style: React.CSSProperties
+    unlockDistance: number
+    value: number
+  }>
+
+  export { Knob }
+}

package/lib/@types/react-svgmt.d.ts

@@ -0,0 +1,74 @@
+declare module 'react-svgmt' {
+  import React from 'react'
+
+  type DrawCircleProps = React.SVGProps<SVGCircleElement> & {
+    r: number
+    borderColor?: string
+    fillColor?: string
+    borderWidth?: number
+    fillOpacity: number
+    cx: number
+    cy: number
+  }
+
+  class DrawCircle extends React.Component<DrawCircleProps> {
+    render(): React.JSX.Element
+  }
+
+  type InternalInputProps = {
+    min: number
+    max: number
+    value: number
+    step?: number
+    inputRef: React.RefObject<HTMLInputElement>
+    onChange: (val: number) => void
+    style?: React.CSSProperties
+  }
+
+  class InternalInput extends React.Component<InternalInputProps> {
+    static defaultProps: {
+      step: number
+    }
+    render(): React.JSX.Element
+  }
+
+  type Point = {
+    x: number
+    y: number
+  }
+
+  type DrawLineProps = React.SVGProps<SVGLineElement> & {
+    width?: number
+    color?: string
+    p1: Point
+    p2: Point
+  }
+
+  class DrawLine extends React.Component<DrawLineProps> {
+    render(): React.JSX.Element
+  }
+
+  type SvgLoaderProps = {
+    svg?: string
+    svgXML?: string
+    width?: string | number
+    height?: string | number
+    style?: React.CSSProperties
+    onSVGReady?: (svg: SVGElement) => void
+    children?: React.ReactNode
+  }
+
+  type SvgProxyProps = {
+    children?: React.ReactNode
+    selector: string
+    transform?: string
+  }
+
+  class SvgLoader extends React.Component<SvgLoaderProps> {
+    render(): React.JSX.Element
+  }
+
+  class SvgProxy extends React.Component<SvgProxyProps> {
+    render(): React.JSX.Element
+  }
+}

package/lib/@types/zds-mappings.d.ts

@@ -0,0 +1,55 @@
+declare module 'zds-mappings' {
+  function cloneMapping(mappingName: string): Mapping
+  function createUserMapping(mappingName: string): Mapping
+  function editUserMapping(
+    mappingName: string,
+    noteNum: number,
+    field: string,
+    value: string | number,
+  ): Mapping
+
+  function getMapping(mappingName: string): Mapping
+
+  function emptyMapping(): Mapping
+
+  function getNextAvailableMappingName(path: string): string
+  function reverse(mapping: Mapping): string
+  function storeMapping(mappingName: string, rawContent: string): void
+  function validateContent(content: string): boolean
+
+  function getAvailableGroups(): { label: string; value: string }[]
+  function getStockNames(): string[]
+  function getUserMappingNames(): string[]
+  function removeMapping(mappingName: string): void
+  function renameUserMapping(
+    oldKey: string,
+    newKey: string,
+  ): { [key: string]: string | number }
+
+  interface MapItem {
+    note: number
+    group: string
+    name: string
+  }
+
+  type Mapping = MapItem[]
+
+  export {
+    cloneMapping,
+    createUserMapping,
+    emptyMapping,
+    editUserMapping,
+    getAvailableGroups,
+    getMapping,
+    getNextAvailableMappingName,
+    getStockNames,
+    getUserMappingNames,
+    removeMapping,
+    renameUserMapping,
+    reverse,
+    storeMapping,
+    validateContent,
+  }
+
+  export type { MapItem, Mapping }
+}

package/lib/@types/zds-react-piano.d.ts

@@ -0,0 +1,17 @@
+declare module 'zds-react-piano' {
+  type NoteRange = {
+    first: number
+    last: number
+  }
+
+  const ReactPiano: React.ComponentType<{
+    disabled?: boolean
+    keyWidthToHeight: number
+    noteRange: NoteRange
+    width: number
+  }>
+
+  export { ReactPiano as Piano }
+
+  export type { NoteRange }
+}

package/lib/hooks/useComponentSize.ts

@@ -0,0 +1,52 @@
+import { useCallback, useLayoutEffect, useState } from 'react'
+
+const getSize = (el: HTMLDivElement | null) =>
+  el
+    ? {
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+      }
+    : {
+        width: 0,
+        height: 0,
+      }
+
+const useComponentSize = (ref: React.RefObject<HTMLDivElement>) => {
+  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.ts

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

package/lib/index.ts

@@ -0,0 +1,51 @@
+// Components
+export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker'
+export { default as ChannelPicker } from './pickers/ChannelPicker'
+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'
+
+// Types
+export type * from './pickers/ChannelMappingPicker'
+export type * from './pickers/ChannelPicker'
+export type * from './pickers/Knob'
+export type * from './pickers/KnobPicker'
+export type * from './pickers/LatchPicker'
+export type * from './pickers/MappingPicker'
+export type * from './pickers/NotePicker'
+export type * from './other/OctavePlayer'
+export type * from './pickers/PianoPicker'
+export type * from './pickers/PolarityPicker'
+export type * from './pickers/ResponseCurvePicker'
+export type * from './pickers/Select'
+export type * from './pickers/StatusPicker'
+export type * from './other/SVGText'
+export type * from './pickers/ValuePicker'
+export type * from './midi/export'
+
+// 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.ts

@@ -0,0 +1,139 @@
+import type { Option } from '../pickers/Select'
+
+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): Option<number> => ({
+    label: String(label).length ? `${value} - ${label}` : String(value),
+    value,
+  }),
+)
+
+export default CC_NAMES