@tremolo-ui/react 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -46,7 +46,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/functions": "^0.1.5",
+    "@tremolo-ui/functions": "^0.1.6",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },

package/src/components/Knob/index.css

@@ -4,45 +4,76 @@
   overflow: visible;
   outline: 0;
 
-  &:focus,
-  &:hover {
-    > .tremolo-knob-active-line {
-      color: #4e76e6;
-    }
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
+}
 
-    > .tremolo-knob-inactive-line {
-      color: #ddd;
-    }
+.tremolo-knob-active-line {
+  overflow: visible;
+  color: oklch(69.2% 0.17548 266.373);
 
-    > .tremolo-knob-thumb {
-      color: #ccc;
-    }
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: var(--tremolo-theme-color);
   }
 
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
+  :where(.tremolo-knob[aria-disabled='true']) & {
+    color: oklch(50.5% 0.03307 270.021);
   }
+}
 
-  &[aria-disabled='true'] {
-    > .tremolo-knob-active-line {
-      color: #5d6478;
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-active-line {
+    color: var(--tremolo-theme-color);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(65.2% 0.17548 266.373);
     }
   }
 }
 
-.tremolo-knob-active-line {
-  overflow: visible;
-  color: #7998ec;
+.tremolo-knob-inactive-line {
+  color: oklch(95% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 0 0);
+  }
 }
 
-.tremolo-knob-inactive-line {
-  color: #eee;
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-inactive-line {
+    color: oklch(41.7% 0 0);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(44.59% 0 0);
+    }
+  }
 }
 
 .tremolo-knob-thumb {
-  color: #d0d0d0;
+  color: oklch(85.7% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(84.5% 0 0);
+  }
+}
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-thumb {
+    color: oklch(48.6% 0 0);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(51.7% 0 0);
+    }
+  }
 }
 
 .tremolo-knob-thumb-line {
-  color: #eee;
+  color: oklch(94.2% 0 0);
+}
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-thumb-line {
+    color: oklch(84.2% 0 0);
+  }
 }

package/src/components/Knob/index.tsx

@@ -43,8 +43,8 @@ export interface KnobProps {
    */
   startValue?: number
 
-  // TODO: relative size (Lower priority)
-  size?: number
+  /** width and height */
+  size?: number | string
 
   /** Whether to apply `{use-select: none}` when dragging */
   bodyNoSelect?: boolean
@@ -69,15 +69,16 @@ export interface KnobProps {
   thumb?: string
   /** color */
   thumbLine?: string
-
   /** percent (0-100) */
   thumbSize?: number
   /** percent (0-100) */
   thumbLineWeight?: number
   /** percent (0-100) */
   thumbLineLength?: number
-  /** percent (0-100) */
+  /** line weight [px] */
   lineWeight?: number
+  /** angle range [degree] */
+  angleRange?: number
 
   classes?: {
     activeLine?: string
@@ -125,6 +126,11 @@ export const Knob = forwardRef<KnobMethods, Props>(
       inactiveLine,
       thumb,
       thumbLine,
+      thumbSize = 84,
+      thumbLineWeight = 6,
+      thumbLineLength = 35,
+      lineWeight = 6,
+      angleRange = 270,
       onChange,
       onKeyDown,
       onPointerDown,
@@ -133,26 +139,18 @@ export const Knob = forwardRef<KnobMethods, Props>(
       classes,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
     const valueRef = useRef(0)
     const elmRef = useRef<HTMLOrSVGElement>(null)
 
-    // --- interpret props ---
-    const padding = 8 // %
-    const thumbLineWeight = 6 // %
-    const thumbLineLength = 35 // %
-    const lineWeight = size * 0.06 // px
-    const p = normalizeValue(value, min, max, skew)
-    const s = normalizeValue(startValue, min, max, skew)
-
     // --- internal functions ---
     const onDrag = useCallback(
       (_x: number, y: number) => {
         if (!onChange || readonly) return
         const v = rawValue(valueRef.current - y / 100, min, max, skew)
-        const v2 = clamp(stepValue(v, step), min, max)
-        onChange(v2)
+        const clamped = clamp(stepValue(v, step), min, max)
+        onChange(clamped)
       },
       [max, min, onChange, readonly, skew, step],
     )
@@ -210,7 +208,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
       [wheel, onChange, readonly, updateValueByEvent],
     )
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
           elmRef.current?.focus()
@@ -221,11 +219,17 @@ export const Knob = forwardRef<KnobMethods, Props>(
       }
     }, [])
 
-    const center = size / 2
-    const r1 = -135
-    const r2 = -135 + Math.min(p, s) * 270
-    const r3 = -135 + Math.max(p, s) * 270
-    const r4 = 135
+    const viewBoxSize = 100
+    const center = viewBoxSize / 2
+    const padding = (viewBoxSize - clamp(thumbSize, 0, 100)) / 2 // %
+    const p = normalizeValue(value, min, max, skew)
+    const s = normalizeValue(startValue, min, max, skew)
+
+    // 時計回りで描画していく
+    const r1 = -angleRange / 2 // ロータリー開始位置
+    const r2 = r1 + Math.min(p, s) * angleRange // activeLineの開始位置
+    const r3 = r1 + Math.max(p, s) * angleRange // activeLineの終了位置
+    const r4 = angleRange / 2 // ロータリー終了位置
     const x1 = center + center * Math.cos(radian(r1 - 90))
     const y1 = center + center * Math.sin(radian(r1 - 90))
     const x2 = center + center * Math.cos(radian(r2 - 90))
@@ -237,12 +241,13 @@ export const Knob = forwardRef<KnobMethods, Props>(
 
     return (
       <svg
-        className={clsx('tremolo-knob', className)}
         ref={(div) => {
           elmRef.current = div
           wheelRefCallback(div)
           touchMoveRefCallback(div)
         }}
+        className={clsx('tremolo-knob', className)}
+        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
         width={size}
         height={size}
         tabIndex={0}
@@ -268,7 +273,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
         }}
         {...props}
       >
-        {/* rotary meter */}
+        {/* lines */}
         {startValue > min && (
           <path
             className={clsx(
@@ -305,7 +310,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
           <circle
             cx="50%"
             cy="50%"
-            r={`${50 - padding}%`}
+            r={`${thumbSize / 2}%`}
             fill={thumb || 'currentColor'}
           />
           <line
@@ -320,7 +325,7 @@ export const Knob = forwardRef<KnobMethods, Props>(
             // https://bugs.webkit.org/show_bug.cgi?id=201854
             // https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/transform-origin#browser_compatibility
             style={{
-              transform: `rotate(${-135 + p * 270}deg)`,
+              transform: `rotate(${r1 + p * angleRange}deg)`,
               transformOrigin: '50% 50%',
             }}
           />

package/src/components/NumberInput/index.tsx

@@ -55,7 +55,6 @@ export interface NumberInputProps {
   keepWithinRange?: boolean
   clampValueOnBlur?: boolean
 
-  // TODO
   /**
    * wheel control option
    */
@@ -126,9 +125,9 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
       children,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
-    const colors: { [key: string]: string | undefined } = {
+    const colors: Record<string, string | undefined> = {
       '--active-color': activeColor,
     }
     return (
@@ -154,7 +153,7 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
           data-variant={variant}
         >
           <InternalInput
-            ref={ref}
+            ref={forwardedRef}
             readonly={readonly}
             disabled={disabled}
             selectWithFocus={selectWithFocus}

package/src/components/Piano/context.tsx

@@ -12,7 +12,7 @@ type State = {
   glissando: boolean
   midiMax: number
   fill: boolean
-  onPlayNote: (noteNumber: number) => void
+  onPlayNote: (noteNumber: number, velocity?: number) => void
   onStopNote: (noteNumber: number) => void
   label: (note: number, index: number) => ReactNode
 }

package/src/components/Piano/index.css

@@ -7,10 +7,10 @@
 }
 
 .tremolo-piano-white-key {
-  --bg: white;
-  --color: black;
-  --active-bg: #ccc;
-  --active-color: black;
+  --bg: oklch(100% 0 0);
+  --color: oklch(0% 0 0);
+  --active-bg: oklch(90% 0 0);
+  --active-color: oklch(0% 0 0);
 
   box-sizing: border-box;
   position: absolute;
@@ -33,10 +33,10 @@
 }
 
 .tremolo-piano-black-key {
-  --color: white;
-  --bg: #333;
-  --active-color: white;
-  --active-bg: #666;
+  --color: oklch(100% 0 0);
+  --bg: oklch(32.109% 0.00004 271.152);
+  --active-color: oklch(100% 0 0);
+  --active-bg: oklch(47.836% 0.00005 271.152);
 
   box-sizing: border-box;
   position: absolute;
@@ -79,3 +79,19 @@
   aspect-ratio: 1;
   max-width: calc(100% - 16px);
 }
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-piano-white-key {
+    --bg: oklch(48.193% 0.00005 271.152);
+    --color: oklch(100% 0 0);
+    --active-bg: oklch(52.78% 0.00006 271.152);
+    --active-color: oklch(100% 0 0);
+  }
+
+  .tremolo-piano-black-key {
+    --color: oklch(100% 0 0);
+    --bg: oklch(32.109% 0 0);
+    --active-color: oklch(100% 0 0);
+    --active-bg: oklch(38.666% 0.00004 271.152);
+  }
+}