zds-pickers 4.0.5 → 4.0.6

package/dist/types/index.d.ts

@@ -1,2 +1,266 @@
-export * from '../main'
-export {}
+import { default as default_2 } from 'soundfont-player';
+import { ForwardRefExoticComponent } from 'react';
+import { GroupBase } from 'react-select';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX as JSX_3 } from 'react';
+import { JSXElementConstructor } from 'react';
+import { Mapping } from 'zds-mappings';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SelectInstance } from 'react-select';
+
+export declare const CCPicker: ForwardRefExoticComponent<CCPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type CCPickerProps = SelectProps<number>;
+
+export declare const ccValues: Option_2<number>[];
+
+declare type Channel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
+
+export declare const ChannelMappingPicker: ForwardRefExoticComponent<ChannelMappingPickerProps & RefAttributes<SelectInstance<Option_2<InternalValue>, false, GroupBase<Option_2<InternalValue>>>>>;
+
+declare interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
+    channels: Option_2<number>[];
+    className?: string;
+    filterOptions?: (candidate: Option_2<InternalValue>, inputValue: string) => boolean;
+    value: number;
+    onChange: (value: InternalValue) => void;
+}
+
+export declare const ChannelPicker: ForwardRefExoticComponent<ChannelPickerProps & RefAttributes<SelectInstance<Option_2<Channel>, false, GroupBase<Option_2<Channel>>>>>;
+
+declare type ChannelPickerProps = SelectProps<Channel>;
+
+export declare const combineStatusWithChannel: (channel: number, status: Status_2) => number;
+
+declare 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;
+
+export declare const extractStatusAndChannel: (status: number) => {
+    status: Status_2;
+    channel: number;
+};
+
+export declare const getStatusLabel: (val: Status_2) => string | number | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode>;
+
+declare type InternalValue = number | 'separator';
+
+export declare const Knob: (props: KnobProps) => JSX_2.Element;
+
+export declare const KnobPicker: ForwardRefExoticComponent<SelectProps<number> & {
+highToLow?: boolean;
+includeLabel?: boolean;
+includePicker?: boolean;
+knobProps?: Partial<KnobPickerProps>;
+max?: number;
+min?: number;
+wheelEnabled?: boolean;
+wheelSensitivity?: number;
+value: number;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type KnobPickerProps = SelectProps<number> & {
+    highToLow?: boolean;
+    includeLabel?: boolean;
+    includePicker?: boolean;
+    knobProps?: Partial<KnobPickerProps>;
+    max?: number;
+    min?: number;
+    wheelEnabled?: boolean;
+    wheelSensitivity?: number;
+    value: number;
+};
+
+declare type KnobProps = {
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    onChange?: (value: number) => void;
+    value?: number;
+    wheelEnabled?: boolean;
+    wheelSensitivity?: number;
+};
+
+export declare const LatchPicker: ForwardRefExoticComponent<LatchPickerProps & RefAttributes<SelectInstance<Option_2<Polarity>, false, GroupBase<Option_2<Polarity>>>>>;
+
+declare type LatchPickerProps = SelectProps<Polarity>;
+
+export declare const MappingPicker: ForwardRefExoticComponent<SelectProps<string> & {
+allowClearing: boolean;
+} & RefAttributes<SelectInstance<Option_2<string>, false, GroupBase<Option_2<string>>>>>;
+
+export declare const MASK_CHANNEL = 15;
+
+export declare const MASK_STATUS = 240;
+
+export declare const NotePicker: ForwardRefExoticComponent<SelectProps<number> & {
+channel: number;
+disabled?: boolean;
+isMelodicMode?: boolean;
+mapping?: Mapping;
+onChange: (value: number) => void;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+export declare const OctavePlayer: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => JSX_2.Element;
+
+declare type Option_2<T> = {
+    label: React.ReactNode;
+    value: T;
+};
+
+export declare const PianoPicker: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }: WithProviderProps) => JSX_2.Element;
+
+declare type Polarity = 0 | 1;
+
+export declare const PolarityPicker: ForwardRefExoticComponent<SelectProps<Polarity> & {
+labelOff?: string;
+labelOn?: string;
+} & RefAttributes<SelectInstance<Option_2<Polarity>, false, GroupBase<Option_2<Polarity>>>>>;
+
+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;
+
+export declare const RESPONSE_CURVES: Option_2<Curve>[];
+
+export declare type ResponseCurve = {
+    value: Curve;
+    label: React.ReactNode;
+    c1: number;
+    c2: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    labelX: number;
+    labelY: number;
+};
+
+export declare const ResponseCurve: (props: ResponseCurveProps) => JSX_2.Element;
+
+export declare const ResponseCurvePicker: ForwardRefExoticComponent<SelectProps<Curve> & {
+inverted?: boolean;
+Tooltip?: React.FC<TooltipProps>;
+} & RefAttributes<SelectInstance<Option_2<Curve>, false, GroupBase<Option_2<Curve>>>>>;
+
+declare type ResponseCurveProps = {
+    autosize: boolean;
+    disabled?: boolean;
+    inverted: boolean;
+    onChange: (event: {
+        target: {
+            value: Curve;
+        };
+    }) => void;
+    Tooltip: React.FC<TooltipProps>;
+    value: Curve;
+};
+
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: React.ForwardedRef<SelectInstance<Option_2<T>, false, GroupBase<Option_2<T>>>>;
+}) => JSX_3.Element;
+
+declare type SelectProps<T> = {
+    className?: string;
+    components?: object;
+    disabled?: boolean;
+    filterOptions?: (candidate: Option_2<T>, inputValue: string) => boolean;
+    formatOptionLabel?: (option: Option_2<unknown>, { context }: {
+        context: 'menu' | 'value';
+    }) => React.ReactNode;
+    isSearchable?: boolean;
+    label?: string;
+    onChange: (value: Option_2<T>['value']) => void;
+    options: Option_2<T>[] | {
+        entries: Option_2<T>[];
+    }[];
+    preserveMenuWidth?: boolean;
+    shrinkLabel?: boolean;
+    value: Option_2<T>['value'];
+};
+
+declare type Status = (typeof Statuses_2)[keyof typeof Statuses_2]
+
+declare type Status_2 = (typeof Statuses)[keyof typeof Statuses];
+
+export declare const Statuses: {
+    noteOff: number;
+    noteOn: number;
+    aftertouch: number;
+    controlChange: number;
+    programChange: number;
+    channelPressure: number;
+    pitchWheel: number;
+};
+
+declare const Statuses_2 = {
+    noteOff: 8, // 1000
+    noteOn: 9, // 1001
+    aftertouch: 10, // 1010
+    controlChange: 11, // 1011
+    programChange: 12, // 1100
+    channelPressure: 13, // 1101
+    pitchWheel: 14, // 1110
+};
+
+export declare const StatusPicker: ForwardRefExoticComponent<SelectProps<number> & {
+statuses: Option_2<Status>[];
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+export declare const SVGText: (props: TextProps) => JSX_2.Element;
+
+declare type TextProps = Partial<HTMLOrSVGElement> & {
+    className?: string;
+    dx?: number;
+    dy?: number;
+    maxHeight?: number;
+    maxWidth?: number;
+    transform?: string;
+    text: string;
+    textAnchor?: React.CSSProperties['textAnchor'];
+    verticalAnchor?: 'start' | 'middle' | 'end';
+    x?: number;
+    y?: number;
+};
+
+declare type TooltipProps = {
+    children?: React.ReactNode;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    title: React.ReactNode;
+};
+
+export declare const ValuePicker: ForwardRefExoticComponent<SelectProps<number> & {
+highToLow?: boolean;
+max?: number;
+min?: number;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type WithProviderProps = {
+    format?: 'mp3' | 'ogg';
+    height: number;
+    hostname?: string;
+    instrumentName: default_2.InstrumentName;
+    octave?: number;
+    onChange?: (note: number) => void;
+    onClick?: (note: number) => void;
+    onDoubleClick?: (note: number) => void;
+    onKeyMouseEnter?: (note: number) => void;
+    onKeyMouseLeave?: (note: number) => void;
+    soundfont?: 'MusyngKite' | 'FluidR3_GM';
+    Tooltip?: TooltipProps;
+    width: number;
+};
+
+export { }

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