@tremolo-ui/react 0.0.5 → 0.0.6

package/dist/esm/types/components/Slider/Thumb.d.ts

@@ -1,11 +1,26 @@
 import { CSSObject } from '@emotion/react';
 import { ReactNode } from 'react';
 interface SliderThumbProps {
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
     color?: string;
+    hoverColor?: string;
+    disabledColor?: string;
+    disabledHoverColor?: string;
+    zIndex?: number;
+    className?: string;
     style?: CSSObject;
-    __css?: CSSObject;
     children?: ReactNode;
+    /** @internal */
+    __disabled?: boolean;
+    /** @internal */
+    __css?: CSSObject;
+}
+export interface SliderThumbMethods {
+    focus: () => void;
+    blur: () => void;
 }
-export declare function SliderThumb({ color, children, style, __css, }: SliderThumbProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SliderThumb: import("react").ForwardRefExoticComponent<SliderThumbProps & import("react").RefAttributes<SliderThumbMethods>>;
 export {};
 //# sourceMappingURL=Thumb.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/Thumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,gBAAgB,oDAsClB"}
+{"version":3,"file":"Thumb.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/Thumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAc,SAAS,EAA+B,MAAM,OAAO,CAAA;AAG1E,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IAEpB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,gBAAgB;IAChB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAEA,eAAO,MAAM,WAAW,iHAiEvB,CAAA"}

package/dist/esm/types/components/Slider/Track.d.ts

@@ -1,10 +1,29 @@
 import { CSSObject } from '@emotion/react';
 import { ReactElement } from 'react';
+import { Direction } from './type';
 interface SliderTrackProps {
+    length?: number | string;
+    thickness?: number | string;
+    activeBg?: string;
+    inactiveBg?: string;
+    activeHoverBg?: string;
+    inactiveHoverBg?: string;
+    disabledActiveBg?: string;
+    disabledInactiveBg?: string;
+    disabledActiveHoverBg?: string;
+    disabledInactiveHoverBg?: string;
+    className?: string;
     style?: CSSObject;
     children?: ReactElement;
-    __css?: CSSObject;
+    /** inherit */
+    __thumb?: ReactElement;
+    /** inherit */
+    __direction?: Direction;
+    /** inherit */
+    __disabled?: boolean;
+    /** internal */
+    __percent?: number;
 }
-export declare function SliderTrack({ children, style, __css, }: SliderTrackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SliderTrack({ length, thickness, activeBg, inactiveBg, activeHoverBg, inactiveHoverBg, disabledActiveBg, disabledInactiveBg, disabledActiveHoverBg, disabledInactiveHoverBg, children, className, style, __thumb, __direction, __disabled, __percent, }: SliderTrackProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Track.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Track.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/Track.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,gBAAgB,oDAMlB"}
+{"version":3,"file":"Track.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/Track.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKpC,OAAO,EAAE,SAAS,EAAqB,MAAM,QAAQ,CAAA;AAErD,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAE3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAEhC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAA;IAEvB,cAAc;IACd,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,cAAc;IACd,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,cAAc;IACd,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAY,EACZ,SAAc,EACd,QAAoB,EACpB,UAAmB,EACnB,aAAyB,EACzB,eAA2B,EAC3B,gBAA4B,EAC5B,kBAA2B,EAC3B,qBAAwC,EACxC,uBAA4C,EAC5C,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,SAAS,GACV,EAAE,gBAAgB,oDAwBlB"}

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

@@ -1,33 +1,41 @@
 import { CSSObject } from '@emotion/react';
 import { Direction, ScaleOrderList, ScaleType } from '@tremolo-ui/functions/Slider';
-import { WheelOption } from '@tremolo-ui/functions';
-import { ReactElement } from 'react';
-import { UserActionPseudoProps } from '../../system/pseudo';
+import { InputEventOption } from '@tremolo-ui/functions';
+import React, { ReactElement } from 'react';
 import { ScaleOption } from './type';
-interface SliderProps {
+export interface SliderProps {
     value: number;
     min: number;
     max: number;
     step?: number;
     skew?: number;
-    length?: number | string;
-    thickness?: number | string;
     direction?: Direction;
     scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[];
     scaleOption?: ScaleOption;
-    color?: string;
-    bg?: string;
     bodyNoSelect?: boolean;
-    enableWheel?: WheelOption;
+    /**
+     * wheel control option
+     */
+    wheel?: InputEventOption;
+    /**
+     * keyboard control option
+     */
+    keyboard?: InputEventOption;
+    disabled?: boolean;
+    readonly?: boolean;
     className?: string;
     style?: CSSObject;
     onChange?: (value: number) => void;
     children?: ReactElement | ReactElement[];
 }
+export interface SliderMethods {
+    focus: () => void;
+    blur: () => void;
+}
 /**
  * Customizable slider
  */
-export declare function Slider({ value, min, max, step, skew, length, thickness, direction, scale, scaleOption, color, bg, className, style, bodyNoSelect, enableWheel, onChange, children, ...pseudo }: SliderProps & UserActionPseudoProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderMethods>>;
 export * from './Thumb';
 export * from './Track';
 export * from './type';

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":"AAAA,OAAO,EAAO,SAAS,EAAU,MAAM,gBAAgB,CAAA;AACvD,OAAO,EACL,SAAS,EAMT,cAAc,EACd,SAAS,EACV,MAAM,8BAA8B,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAA;AAKnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEpC,UAAU,WAAW;IAEnB,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,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,cAAc,EAAE,CAAA;IACpE,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAQ,EACR,IAAQ,EACR,MAAY,EACZ,SAAc,EACd,SAAmB,EACnB,KAAK,EACL,WAAW,EACX,KAAiB,EACjB,EAAW,EACX,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,GAAG,MAAM,EACV,EAAE,WAAW,GAAG,qBAAqB,oDAwPrC;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAU,MAAM,gBAAgB,CAAA;AAEvD,OAAO,EACL,SAAS,EAKT,cAAc,EACd,SAAS,EACV,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAuD,gBAAgB,EAAe,MAAM,uBAAuB,CAAA;AAC1H,OAAO,KAAK,EAAE,EAAc,YAAY,EAA4C,MAAM,OAAO,CAAA;AASjG,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEpC,MAAM,WAAW,WAAW;IAG1B,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,SAAS,CAAC,EAAE,SAAS,CAAA;IAErB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,cAAc,EAAE,CAAA;IACpE,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAED;;GAEG;AACF,eAAO,MAAM,MAAM,mFAsSlB,CAAA;AAEF,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}

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

@@ -0,0 +1,4 @@
+export declare function addNoSelect(): void;
+export declare function removeNoSelect(): void;
+export declare function toggleNoSelect(): void;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/_util/index.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,SAE1B;AAED,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,cAAc,SAE7B"}

package/dist/styles/{variables.css → index.css}

@@ -2,3 +2,7 @@
   --tremolo-theme-color: #4e76e6;
   --tremolo-theme-color-rgb: 78, 118, 230;
 }
+
+.tremolo-no-select {
+  user-select: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -21,12 +21,12 @@
   "exports": {
     ".": {
       "require": {
-        "default": "./dist/cjs/index.js",
-        "types": "./dist/cjs/types/index.d.ts"
+        "types": "./dist/cjs/types/index.d.ts",
+        "default": "./dist/cjs/index.js"
       },
       "import": {
-        "default": "./dist/esm/index.js",
-        "types": "./dist/esm/types/index.d.ts"
+        "types": "./dist/esm/types/index.d.ts",
+        "default": "./dist/esm/index.js"
       }
     },
     "./styles": "./src/styles"
@@ -58,7 +58,6 @@
     "emotion"
   ],
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
     "@emotion/react": "^11.13.0",
     "@storybook/addon-essentials": "^8.3.3",
     "@storybook/addon-interactions": "^8.3.3",
@@ -72,7 +71,8 @@
     "react": "^18.3.1",
     "react-component-benchmark": "^2.0.0",
     "react-dom": "^18.3.1",
-    "storybook": "^8.3.3"
+    "storybook": "^8.3.3",
+    "tone": "^15.0.4"
   },
   "peerDependencies": {
     "@emotion/react": "11.x",

package/src/components/AnimationCanvas/index.tsx

@@ -1,5 +1,5 @@
 import { css, CSSObject } from '@emotion/react'
-import { MutableRefObject, useEffect, useRef } from 'react'
+import { ComponentPropsWithRef, MutableRefObject, useEffect, useRef } from 'react'
 import clsx from 'clsx'
 
 import { DrawingContext, drawingState, DrawingStateValue } from './canvas'
@@ -25,7 +25,7 @@ export type DrawFunction = (
   count: number,
 ) => void
 
-interface AnimationCanvasProps {
+export interface AnimationCanvasProps {
   width?: number
   height?: number
   relativeSize?: boolean
@@ -52,11 +52,7 @@ export function AnimationCanvas({
   className,
   ...props
 }: AnimationCanvasProps &
-  Omit<
-    React.ClassAttributes<HTMLCanvasElement> &
-      React.CanvasHTMLAttributes<HTMLCanvasElement>,
-    'ref' | 'width' | 'height' | 'style'
-  >) {
+  Omit<ComponentPropsWithRef<'canvas'>, keyof AnimationCanvasProps>) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const memoCanvasRef = useRef<HTMLCanvasElement>(null)
   const reqIdRef = useRef<number>()

package/src/components/Knob/index.tsx

@@ -1,15 +1,15 @@
 import { css, CSSObject, Global } from '@emotion/react'
-import { clamp, normalizeValue, radian, rawValue, stepValue } from '@tremolo-ui/functions'
-import { WheelOption } from '@tremolo-ui/functions'
-import React, { useRef } from 'react'
+import { clamp, normalizeValue, radian, rawValue, stepValue, InputEventOption } from '@tremolo-ui/functions'
+import React, { ComponentPropsWithRef, useRef } from 'react'
 import clsx from 'clsx'
 
 import { useEventListener } from '../../hooks/useEventListener'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { UserActionPseudoProps } from '../../system/pseudo'
 import { AnimationCanvas, DrawFunction } from '../AnimationCanvas'
+import { addNoSelect, removeNoSelect } from '../_util'
 
-interface KnobProps {
+export interface KnobProps {
   // required
   value: number
   min: number
@@ -46,13 +46,13 @@ interface KnobProps {
     lineWeight?: number // line color
     thumbWeight?: number // thumb weight
   }
-  // TODO: need?
+
   draw?: DrawFunction
 
-  /** Whether to apply {use-select: none} when dragging */
+  /** Whether to apply `{use-select: none}` when dragging */
   bodyNoSelect?: boolean
 
-  enableWheel?: WheelOption
+  wheel?: InputEventOption
   enableDoubleClickDefault?: boolean
   style?: CSSObject
   onChange?: (value: number) => void
@@ -84,7 +84,7 @@ export function Knob({
   options = defaultOptions,
   draw,
   bodyNoSelect = true,
-  enableWheel,
+  wheel,
   enableDoubleClickDefault = true,
   style,
   className,
@@ -95,11 +95,7 @@ export function Knob({
   ...props
 }: KnobProps &
   UserActionPseudoProps &
-  Omit<
-    React.ClassAttributes<HTMLDivElement> &
-      React.HTMLAttributes<HTMLDivElement>,
-    'onChange'
-  >) {
+  Omit<ComponentPropsWithRef<'div'>, keyof KnobProps>) {
   // -- state and ref ---
   // const [privateValue, setPrivateValue] = useState(value);
   const dragOffsetY = useRef<number | undefined>(undefined)
@@ -126,7 +122,7 @@ export function Knob({
     const isTouch = event instanceof TouchEvent
     if (isTouch && event.cancelable) event.preventDefault()
     if (dragOffsetY.current) {
-      if (bodyNoSelect) document.body.classList.add('no-select')
+      if (bodyNoSelect) addNoSelect()
       const screenY = isTouch ? event.touches[0].screenY : event.screenY
       const delta = dragOffsetY.current - screenY
       dragOffsetY.current = screenY
@@ -141,11 +137,11 @@ export function Knob({
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
     (event) => {
-      if (!enableWheel) return
+      if (!wheel) return
       event.preventDefault()
-      const x = event.deltaY > 0 ? -enableWheel[1] : enableWheel[1]
+      const x = event.deltaY > 0 ? -wheel[1] : wheel[1]
       let v
-      if (enableWheel[0] == 'normalized') {
+      if (wheel[0] == 'normalized') {
         const n = normalizeValue(value, min, max, skew)
         v = rawValue(n + x, min, max, skew)
       } else {
@@ -154,7 +150,7 @@ export function Knob({
       if (onChange) onChange(clamp(stepValue(v, step), min, max))
     },
     { passive: false },
-    [enableWheel, value, min, max, skew, step, onChange],
+    [wheel, value, min, max, skew, step, onChange],
   )
 
   const touchMoveRefCallback = useRefCallbackEvent(
@@ -168,7 +164,7 @@ export function Knob({
 
   useEventListener(window, 'pointerup', () => {
     dragOffsetY.current = undefined
-    if (bodyNoSelect) document.body.classList.remove('no-select')
+    if (bodyNoSelect) removeNoSelect()
   })
 
   return (

package/src/components/NumberInput/index.tsx

@@ -1,12 +1,12 @@
 import { css, CSSObject } from '@emotion/react'
 import { clamp } from '@tremolo-ui/functions'
 import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, ComponentPropsWithoutRef, useState } from 'react'
 import clsx from 'clsx'
 
 import { InputPseudoProps, UserActionPseudoProps } from '../../system/pseudo'
 
-interface NumberInputProps {
+export interface NumberInputProps {
   value: number | string
 
   min?: number
@@ -31,12 +31,16 @@ interface NumberInputProps {
   /**
    * NOTE: If units is specified, it is forced to `false`
    */
-  strict?: boolean
+  typeNumber?: boolean // TODO: rename typeNumber
 
   /**
+   * Digits for rounding numbers.
    * @example
-   * with units-{[['Hz', 1], ['kHz', 1000]]}
-   * 3 ... 100Hz, 1.60Hz
+   * with:
+   * units={[['Hz', 1], ['kHz', 1000]]}
+   * digit={3}
+   * results:
+   * value=100 -> 100Hz, value=1600 -> 1.60Hz
    */
   digit?: number
   selectWithFocus?: 'all' | 'number' | 'none'
@@ -68,7 +72,7 @@ export function NumberInput({
   placeholder,
   readOnly,
   tabIndex,
-  strict = false,
+  typeNumber = false,
   digit,
   selectWithFocus = 'none',
   blurWithEnter = true,
@@ -77,13 +81,15 @@ export function NumberInput({
   onChange,
   onFocus,
   onBlur,
-  ...pseudo
-}: NumberInputProps & UserActionPseudoProps & InputPseudoProps) {
+  ...props
+}: NumberInputProps & UserActionPseudoProps & InputPseudoProps &
+  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps>
+) {
   const [showValue, setShowValue] = useState(
     parseValue(String(value), units, digit, defaultValue).formatValue,
   )
-  const calculatedStrict = units ? false : strict
-  const { _active, _focus, _hover } = pseudo
+  const calculatedTypeNumber = units ? false : typeNumber
+  const { _active, _focus, _hover, ...rest } = props
 
   return (
     <input
@@ -92,7 +98,7 @@ export function NumberInput({
       min={min}
       max={max}
       step={step}
-      type={calculatedStrict ? 'number' : 'text'}
+      type={calculatedTypeNumber ? 'number' : 'text'}
       spellCheck={'false'}
       disabled={disabled}
       placeholder={placeholder}
@@ -160,6 +166,7 @@ export function NumberInput({
           event.currentTarget.blur()
         }
       }}
+      {...rest}
     />
   )
 }

package/src/components/Piano/BlackKey.tsx

@@ -0,0 +1,108 @@
+import { css } from "@emotion/react"
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react"
+
+import { KeyLabel } from "./KeyLabel"
+import { KeyMethods, KeyProps } from "./key"
+
+export const BlackKey = forwardRef<KeyMethods, KeyProps>(({
+  width = 40 * 0.65,
+  height = '60%',
+  bg = '#333',
+  activeBg = '#666',
+  style,
+  children,
+  __glissando,
+  __position,
+  __note,
+  __disabled,
+  __index,
+  __fill,
+  __width,
+  __playNote,
+  __stopNote,
+  __label,
+}: KeyProps, ref) => {
+  const [played, setPlayed] = useState(false)
+
+  useImperativeHandle(ref, () => {
+    return {
+      play() {
+        if (__disabled) return
+        setPlayed(true)
+        if (__playNote) __playNote(__note!)
+      },
+      stop() {
+        setPlayed(false)
+        if (__stopNote) __stopNote(__note!)
+      },
+      played() {
+        return played
+      }
+    }
+  }, [])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let keyLabelProps: any
+  if (children != undefined) {
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type == KeyLabel) {
+          keyLabelProps = child.props
+        } else {
+          throw new Error('only <KeyLabel>')
+        }
+      } else {
+        throw new Error('children is an invalid element.')
+      }
+    })
+  }
+
+  return (
+    <div
+      className={`tremolo-piano-black-key`}
+      aria-disabled={__disabled}
+      css={css({
+        position: 'absolute',
+        backgroundColor: played ? activeBg : bg,
+        color: 'white',
+        left: __position,
+        width: __fill ? __width : (width ?? __width),
+        height: height,
+        border: '1px solid #555',
+        borderRadius: '0 0 8px 8px',
+        cursor: __disabled ? 'not-allowed' : 'pointer',
+        zIndex: 2,
+        ...style,
+      })}
+      onPointerDown={() => {
+        if (__disabled) return
+        setPlayed(true)
+        if (__playNote) __playNote(__note!)
+      }}
+      onPointerEnter={() => {
+        if (__disabled) return
+        if (__glissando) {
+          setPlayed(true)
+          if (__playNote) __playNote(__note!)
+        }
+      }}
+      onPointerUp={() => {
+        if (__disabled) return
+        setPlayed(false)
+        if (__stopNote) __stopNote(__note!)
+      }}
+      onPointerLeave={() => {
+        if (__disabled) return
+        setPlayed(false)
+        if (__stopNote) __stopNote(__note!)
+      }}
+    >
+      <KeyLabel
+        __note={__note}
+        __label={__label}
+        __index={__index}
+        {...keyLabelProps}
+      />
+    </div>
+  )
+})

package/src/components/Piano/KeyLabel.tsx

@@ -0,0 +1,69 @@
+import { css, CSSObject } from "@emotion/react"
+import clsx from "clsx"
+import { ReactNode } from "react"
+
+interface Props {
+  /**
+   * override Piano.label
+   */
+  label?: (note: number, index: number) => ReactNode
+
+  className?: string
+  style?: CSSObject
+  wrapperStyle?: CSSObject
+
+  /** @internal */
+  __note?: number
+  /** @internal */
+  __index?: number
+  /** @internal */
+  __label?: (note: number, index: number) => ReactNode
+}
+
+export function KeyLabel({
+  label,
+  className,
+  style,
+  wrapperStyle,
+  __note,
+  __index,
+  __label,
+}: Props) {
+  const content = label ? label(__note!, __index!) : __label && __label(__note!, __index!)
+
+  return (
+    (content != undefined || content != null) &&
+    <div
+      className='tremolo-piano-key-label-wrapper'
+      css={css({
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'end',
+        height: '100%',
+        ...wrapperStyle
+      })}
+    >
+      <div
+        className={clsx('tremolo-piano-key-label', className)}
+        css={css({
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '0.6rem',
+          height: 10,
+          marginBottom: 10,
+          padding: 4,
+          borderRadius: 4,
+          borderStyle: 'solid',
+          borderWidth: 1,
+          borderColor: '#888',
+          aspectRatio: 1,
+          maxWidth: 'calc(100% - 16px)',
+          ...style
+        })}
+      >
+        {content}
+      </div>
+    </div>
+  )
+}