@tremolo-ui/react 0.0.12 → 0.1.0-alpha.0

package/dist/esm/types/components/Knob/index.d.ts

@@ -31,10 +31,22 @@ export interface KnobProps {
     enableDoubleClickDefault?: boolean;
     disabled?: boolean;
     readonly?: boolean;
+    /** color */
     activeLine?: string;
+    /** color */
     inactiveLine?: string;
+    /** color */
     thumb?: string;
+    /** color */
     thumbLine?: string;
+    /** percent (0-100) */
+    thumbSize?: number;
+    /** percent (0-100) */
+    thumbLineWeight?: number;
+    /** percent (0-100) */
+    thumbLineLength?: number;
+    /** percent (0-100) */
+    lineWeight?: number;
     classes?: {
         activeLine?: string;
         inactiveLine?: string;

package/dist/esm/types/components/Knob/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Knob/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,gBAAgB,EAKjB,MAAM,uBAAuB,CAAA;AAM9B,qBAAqB;AACrB,MAAM,WAAW,SAAS;IAExB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAElC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,OAAO,CAAC,EAAE;QACR,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IAED,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAID;;;;GAIG;AACH,eAAO,MAAM,IAAI,iLA+NhB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Knob/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,gBAAgB,EAKjB,MAAM,uBAAuB,CAAA;AAM9B,qBAAqB;AACrB,MAAM,WAAW,SAAS;IAExB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAElC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,YAAY;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY;IACZ,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sBAAsB;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,OAAO,CAAC,EAAE;QACR,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IAED,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAID;;;;GAIG;AACH,eAAO,MAAM,IAAI,iLAgOhB,CAAA"}

package/dist/esm/types/components/Piano/KeyLabel.d.ts

@@ -10,10 +10,8 @@ export interface KeyLabelProps {
     /** @internal */
     __note?: number;
     /** @internal */
-    __index?: number;
-    /** @internal */
     __label?: (note: number, index: number) => ReactNode;
 }
 /** @category Piano */
-export declare function KeyLabel({ label, className, wrapperClassName, wrapperStyle, __note, __index, __label, ...props }: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | import("react/jsx-runtime").JSX.Element;
+export declare function KeyLabel({ label, className, wrapperClassName, wrapperStyle, __note, __label, ...props }: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>): false | import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=KeyLabel.d.ts.map

package/dist/esm/types/components/Piano/KeyLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeyLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/KeyLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1E,sBAAsB;AACtB,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAElD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,aAAa,CAAA;IAE5B,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CACrD;AAED,sBAAsB;AACtB,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAa,CAAC,mDAiB5E"}
+{"version":3,"file":"KeyLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/KeyLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAM1E,sBAAsB;AACtB,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAElD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,aAAa,CAAA;IAE5B,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CACrD;AAED,sBAAsB;AACtB,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,aAAa,CAAC,mDAoB5E"}

package/dist/esm/types/components/Piano/context.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/** @category Piano */
+export type NoteRange = {
+    first: number;
+    last: number;
+};
+type State = {
+    noteRange: NoteRange;
+    glissando: boolean;
+    midiMax: number;
+    fill: boolean;
+    onPlayNote: (noteNumber: number) => void;
+    onStopNote: (noteNumber: number) => void;
+    label: (note: number, index: number) => ReactNode;
+};
+type Action = {
+    notePosition: (note: number) => number;
+};
+type PianoProviderProps = React.PropsWithChildren<Partial<State>>;
+export declare function PianoProvider({ children, ...props }: PianoProviderProps): import("react/jsx-runtime").JSX.Element;
+/** @category Piano */
+export declare function usePianoContext<T>(selector: (state: State & Action) => T): T;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/esm/types/components/Piano/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAiC,MAAM,OAAO,CAAA;AAO/E,sBAAsB;AACtB,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,SAAS,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CAClD,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC,CAAA;AAsDD,KAAK,kBAAkB,GAAG,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAA;AAEjE,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAmBvE;AAED,sBAAsB;AACtB,wBAAgB,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAI5E"}

package/dist/esm/types/components/Piano/index.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from 'react';
+import { NoteRange } from './context';
 import { KeyboardShortcuts } from './keyboardShortcuts';
 /**
  * Piano component
@@ -7,16 +8,17 @@ import { KeyboardShortcuts } from './keyboardShortcuts';
  * - add scale highlight
  */
 /** @category Piano */
+export declare function getNoteRangeArray(noteRange: NoteRange): number[];
+/** @category Piano */
 export interface PianoProps {
-    noteRange: {
-        first: number;
-        last: number;
-    };
-    height?: number | string;
+    noteRange: NoteRange;
     glissando?: boolean;
     midiMax?: number;
     keyboardShortcuts?: KeyboardShortcuts;
     fill?: boolean;
+    whiteNoteWidth?: number;
+    blackNoteWidth?: number;
+    height?: number | string;
     style?: CSSProperties;
     onPlayNote?: (noteNumber: number) => void;
     onStopNote?: (noteNumber: number) => void;
@@ -30,10 +32,8 @@ export interface PianoProps {
  * Customizable piano component.
  * @category Piano
  */
-export declare function Piano({ noteRange, glissando, midiMax, keyboardShortcuts, fill, height, style, className, onPlayNote, onStopNote, label, children, onPointerUp, onPointerDown, ...props }: PianoProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>): import("react/jsx-runtime").JSX.Element;
-export * from './key';
+export declare function Piano({ noteRange, glissando, midiMax, keyboardShortcuts, fill, height, whiteNoteWidth: _whiteNoteWidth, style, className, onPlayNote, onStopNote, label, children, onPointerDown, ...props }: PianoProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>): import("react/jsx-runtime").JSX.Element;
 export * from './keyboardShortcuts';
-export { WhiteKey } from './WhiteKey';
-export { BlackKey } from './BlackKey';
+export { WhiteKey, BlackKey, type KeyProps, type KeyMethods } from './key';
 export { KeyLabel, type KeyLabelProps } from './KeyLabel';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/types/components/Piano/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/index.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,wBAAwB,EAExB,aAAa,EACb,YAAY,EACZ,SAAS,EAKV,MAAM,OAAO,CAAA;AAQd,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAGvD;;;;;GAKG;AAEH,sBAAsB;AACtB,MAAM,WAAW,UAAU;IAEzB,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IAG1C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAElD;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,SAAgB,EAChB,OAAa,EACb,iBAAiB,EACjB,IAAY,EACZ,MAA4B,EAC5B,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,WAAW,EACX,aAAa,EACb,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,CAAC,2CA4JtE;AAED,cAAc,OAAO,CAAA;AACrB,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/index.tsx"],"names":[],"mappings":"AACA,OAAc,EACZ,wBAAwB,EAExB,aAAa,EACb,YAAY,EACZ,SAAS,EAOV,MAAM,OAAO,CAAA;AAad,OAAO,EAAE,SAAS,EAAiB,MAAM,WAAW,CAAA;AAQpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD;;;;;GAKG;AAEH,sBAAsB;AACtB,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,YAKrD;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IAEzB,SAAS,EAAE,SAAS,CAAA;IAGpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;IAElD;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,SAAgB,EAChB,OAAa,EACb,iBAAiB,EACjB,IAAY,EACZ,MAA4B,EAC5B,cAAc,EAAE,eAAsC,EACtD,KAAK,EACL,SAAS,EACT,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,UAAU,CAAC,2CA+MtE;AAED,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,OAAO,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/esm/types/components/Piano/key.d.ts

@@ -1,8 +1,9 @@
-import { CSSProperties, ReactElement, ReactNode } from 'react';
+import React, { CSSProperties, ReactElement } from 'react';
 /**
  * @category Piano
  */
 export interface KeyProps {
+    noteNumber: number;
     width?: number;
     height?: number | `${number}%`;
     bg?: string;
@@ -15,25 +16,7 @@ export interface KeyProps {
      */
     children?: ReactElement;
     /** @internal */
-    __glissando?: boolean;
-    /** @internal */
-    __position?: number;
-    /** @internal */
-    __note?: number;
-    /** @internal */
-    __disabled?: boolean;
-    /** @internal */
-    __index?: number;
-    /** @internal */
-    __fill?: boolean;
-    /** @internal */
     __width?: number;
-    /** @internal */
-    __onPlayNote?: (noteNumber: number) => void;
-    /** @internal */
-    __onStopNote?: (noteNumber: number) => void;
-    /** @internal */
-    __label?: (note: number, index: number) => ReactNode;
 }
 /**
  * @category Piano
@@ -43,4 +26,12 @@ export interface KeyMethods {
     stop: () => void;
     played: () => boolean;
 }
+/** @category Piano */
+export declare const defaultWhiteKeyWidth = 40;
+/** @category Piano */
+export declare const defaultBlackKeyWidth = 26;
+/** @category Piano */
+export declare const WhiteKey: React.ForwardRefExoticComponent<KeyProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React.RefAttributes<KeyMethods>>;
+/** @category Piano */
+export declare const BlackKey: React.ForwardRefExoticComponent<KeyProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof KeyProps> & React.RefAttributes<KeyMethods>>;
 //# sourceMappingURL=key.d.ts.map

package/dist/esm/types/components/Piano/key.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"key.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/key.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE9D;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE9B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAA;IAEvB,gBAAgB;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gBAAgB;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gBAAgB;IAChB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gBAAgB;IAChB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,gBAAgB;IAChB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAA;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,EAAE,MAAM,OAAO,CAAA;CACtB"}
+{"version":3,"file":"key.d.ts","sourceRoot":"","sources":["../../../../../src/components/Piano/key.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAKb,YAAY,EACb,MAAM,OAAO,CAAA;AAKd;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAA;IAElB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,GAAG,CAAA;IAE9B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB,KAAK,CAAC,EAAE,aAAa,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAA;IAEvB,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,EAAE,MAAM,OAAO,CAAA;CACtB;AAKD,sBAAsB;AACtB,eAAO,MAAM,oBAAoB,KAAK,CAAA;AACtC,sBAAsB;AACtB,eAAO,MAAM,oBAAoB,KAAK,CAAA;AAmHtC,sBAAsB;AACtB,eAAO,MAAM,QAAQ,gMAqBpB,CAAA;AAED,sBAAsB;AACtB,eAAO,MAAM,QAAQ,gMAqBpB,CAAA"}

package/dist/esm/types/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,aAAa,EAEb,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAGjB,MAAM,uBAAuB,CAAA;AAW9B,uBAAuB;AACvB,MAAM,WAAW,WAAW;IAE1B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAKD;;;GAGG;AACH,eAAO,MAAM,MAAM,yMAiQlB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EACL,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,aAAa,EAEb,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAGjB,MAAM,uBAAuB,CAAA;AAW9B,uBAAuB;AACvB,MAAM,WAAW,WAAW;IAE1B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAKD;;;GAGG;AACH,eAAO,MAAM,MAAM,yMAqPlB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EACL,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/esm/types/components/XYPad/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/XYPad/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAGZ,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAS9B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACnC;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,YAAY,CAAA;IACf,CAAC,EAAE,YAAY,CAAA;IAEf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,sMAqPjB,CAAA;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/XYPad/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAGZ,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAS9B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACnC;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,YAAY,CAAA;IACf,CAAC,EAAE,YAAY,CAAA;IAEf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,sMA+PjB,CAAA;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}

package/dist/esm/types/hooks/useDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,GAAG;IACT,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAmEA"}
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,GAAG;IACT,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkEA"}

package/dist/esm/types/hooks/useDragWithElement.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+interface Props<T extends Element> {
+    baseElementRef: RefObject<T | null>;
+    onDrag: (normalizedX: number, normalizedY: number) => void;
+    onDragStart?: (normalizedX: number, normalizedY: number) => void;
+    onDragEnd?: (normalizedX: number, normalizedY: number) => void;
+}
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+export declare function useDragWithElement<T extends Element>({ baseElementRef, onDrag, onDragStart, onDragEnd, }: Props<T>): [
+    (div: EventTarget | null) => void,
+    (event: React.PointerEvent<T>) => void
+];
+export {};
+//# sourceMappingURL=useDragWithElement.d.ts.map

package/dist/esm/types/hooks/useDragWithElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragWithElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDragWithElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtD,UAAU,KAAK,CAAC,CAAC,SAAS,OAAO;IAC/B,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IACnC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1D,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,OAAO,EAAE,EACpD,cAAc,EACd,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;IACZ,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkDA"}

package/dist/styles/index.css

@@ -238,6 +238,7 @@
   --active-bg: #ccc;
   --active-color: black;
 
+  box-sizing: border-box;
   position: absolute;
   background-color: var(--bg);
   -webkit-tap-highlight-color: transparent;
@@ -263,6 +264,7 @@
   --active-color: white;
   --active-bg: #666;
 
+  box-sizing: border-box;
   position: absolute;
   background-color: var(--bg);
   -webkit-tap-highlight-color: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.12",
+  "version": "0.1.0-alpha.0",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -20,6 +20,7 @@
     "clean:sb": "rimraf ./storybook-static"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.7",
     "@storybook/addon-essentials": "^8.6.7",
     "@storybook/addon-interactions": "^8.6.7",
     "@storybook/addon-links": "^8.6.7",

package/src/components/Knob/index.tsx

@@ -61,11 +61,24 @@ export interface KnobProps {
   disabled?: boolean
   readonly?: boolean
 
+  /** color */
   activeLine?: string
+  /** color */
   inactiveLine?: string
+  /** color */
   thumb?: string
+  /** color */
   thumbLine?: string
 
+  /** percent (0-100) */
+  thumbSize?: number
+  /** percent (0-100) */
+  thumbLineWeight?: number
+  /** percent (0-100) */
+  thumbLineLength?: number
+  /** percent (0-100) */
+  lineWeight?: number
+
   classes?: {
     activeLine?: string
     inactiveLine?: string
@@ -233,6 +246,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
         width={size}
         height={size}
         tabIndex={0}
+        role="slider"
         aria-valuenow={value}
         aria-valuemin={min}
         aria-valuemax={max}

package/src/components/Piano/KeyLabel.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
 
+import { usePianoContext } from './context'
+
+import { getNoteRangeArray } from '.'
+
 /** @category Piano */
 export interface KeyLabelProps {
   /**
@@ -14,8 +18,6 @@ export interface KeyLabelProps {
   /** @internal */
   __note?: number
   /** @internal */
-  __index?: number
-  /** @internal */
   __label?: (note: number, index: number) => ReactNode
 }
 
@@ -26,13 +28,15 @@ export function KeyLabel({
   wrapperClassName,
   wrapperStyle,
   __note,
-  __index,
   __label,
   ...props
 }: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>) {
+  const noteRange = usePianoContext((s) => s.noteRange)
+  const noteRangeArray = getNoteRangeArray(noteRange)
+  const index = noteRangeArray.indexOf(__note!)
   const content = label
-    ? label(__note!, __index!)
-    : __label && __label(__note!, __index!)
+    ? label(__note!, index)
+    : __label && __label(__note!, index)
 
   return (
     (content != undefined || content != null) && (

package/src/components/Piano/context.tsx

@@ -0,0 +1,108 @@
+import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { isBlackKey, noteKey, NoteKey, noteKeys } from '@tremolo-ui/functions'
+
+import { defaultBlackKeyWidth, defaultWhiteKeyWidth } from './key'
+
+/** @category Piano */
+export type NoteRange = {
+  first: number
+  last: number
+}
+
+type State = {
+  noteRange: NoteRange
+  glissando: boolean
+  midiMax: number
+  fill: boolean
+  onPlayNote: (noteNumber: number) => void
+  onStopNote: (noteNumber: number) => void
+  label: (note: number, index: number) => ReactNode
+}
+
+type Action = {
+  notePosition: (note: number) => number
+}
+
+type PianoStore = ReturnType<typeof createPianoStore>
+
+const createPianoStore = (initProps?: Partial<State>) => {
+  const noteRange = initProps?.noteRange || { first: 0, last: 127 }
+  const DEFAULT_PROPS: State = {
+    noteRange: { first: 0, last: 127 },
+    glissando: true,
+    midiMax: 127,
+    fill: false,
+    label: () => undefined,
+    onPlayNote: () => {},
+    onStopNote: () => {},
+  }
+
+  return createStore<State & Action>()(() => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+    notePosition: (note: number) => {
+      const pitchPositions: Record<NoteKey, number> = {
+        C: 0,
+        'C#': 1,
+        D: 1,
+        'D#': 2,
+        E: 2,
+        F: 3,
+        'F#': 4,
+        G: 4,
+        'G#': 5,
+        A: 5,
+        'A#': 6,
+        B: 6,
+      }
+
+      const whiteNoteWidth = defaultWhiteKeyWidth
+      const blackNoteWidth = defaultBlackKeyWidth
+      const padding = 1
+
+      const targetNoteKey = noteKey(note)
+      const firstNoteKey = noteKey(noteRange.first)
+      const octave = Math.floor((note - noteRange.first) / 12)
+      const octaveOffset =
+        noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0
+      const w = whiteNoteWidth + padding
+      const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey]
+      const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0
+      return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset
+    },
+  }))
+}
+
+const PianoContext = createContext<PianoStore | null>(null)
+
+type PianoProviderProps = React.PropsWithChildren<Partial<State>>
+
+export function PianoProvider({ children, ...props }: PianoProviderProps) {
+  const storeRef = useRef<PianoStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createPianoStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.setState(props)
+    } else {
+      storeRef.current = createPianoStore(props)
+    }
+  }, [props])
+
+  return (
+    <PianoContext.Provider value={storeRef.current}>
+      {children}
+    </PianoContext.Provider>
+  )
+}
+
+/** @category Piano */
+export function usePianoContext<T>(selector: (state: State & Action) => T): T {
+  const store = useContext(PianoContext)
+  if (!store) throw new Error('Missing PianoContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/Piano/index.css

@@ -12,6 +12,7 @@
   --active-bg: #ccc;
   --active-color: black;
 
+  box-sizing: border-box;
   position: absolute;
   background-color: var(--bg);
   -webkit-tap-highlight-color: transparent;
@@ -37,6 +38,7 @@
   --active-color: white;
   --active-bg: #666;
 
+  box-sizing: border-box;
   position: absolute;
   background-color: var(--bg);
   -webkit-tap-highlight-color: transparent;