@tremolo-ui/react 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "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,70 @@
   overflow: visible;
   outline: 0;
 
-  &:focus,
-  &:hover {
-    > .tremolo-knob-active-line {
-      color: #4e76e6;
-    }
-
-    > .tremolo-knob-inactive-line {
-      color: #ddd;
-    }
-
-    > .tremolo-knob-thumb {
-      color: #ccc;
-    }
-  }
-
   &[aria-readonly='true'] {
     cursor: not-allowed;
   }
-
-  &[aria-disabled='true'] {
-    > .tremolo-knob-active-line {
-      color: #5d6478;
-    }
-  }
 }
 
 .tremolo-knob-active-line {
   overflow: visible;
-  color: #7998ec;
+  color: oklch(69.2% 0.17548 266.373);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(59.5% 0.17548 266.373);
+  }
+
+  :where(.tremolo-knob[aria-disabled='true']) & {
+    color: oklch(50.5% 0.03307 270.021);
+  }
 }
 
 .tremolo-knob-inactive-line {
-  color: #eee;
+  color: oklch(95% 0 0);
+
+  :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+    color: oklch(90% 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);
+  }
 }
 
 .tremolo-knob-thumb-line {
-  color: #eee;
+  color: oklch(94.2% 0 0);
+}
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-knob-active-line {
+    color: oklch(59.5% 0.17548 266.373);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(65.2% 0.17548 266.373);
+    }
+  }
+
+  .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: oklch(48.6% 0 0);
+
+    :where(.tremolo-knob:focus, .tremolo-knob:hover) & {
+      color: oklch(51.7% 0 0);
+    }
+  }
+
+  .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(
@@ -281,13 +286,6 @@ export const Knob = forwardRef<KnobMethods, Props>(
             strokeWidth={lineWeight}
           />
         )}
-        <path
-          className={clsx('tremolo-knob-active-line', classes?.activeLine)}
-          d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`}
-          fill="none"
-          stroke={activeLine || 'currentColor'}
-          strokeWidth={lineWeight}
-        />
         {startValue < max && (
           <path
             className={clsx(
@@ -300,12 +298,19 @@ export const Knob = forwardRef<KnobMethods, Props>(
             strokeWidth={lineWeight}
           />
         )}
+        <path
+          className={clsx('tremolo-knob-active-line', classes?.activeLine)}
+          d={`M ${x2} ${y2} A ${center} ${center} -135 ${r3 - r2 > 180 ? 1 : 0} 1 ${x3}, ${y3}`}
+          fill="none"
+          stroke={activeLine || 'currentColor'}
+          strokeWidth={lineWeight}
+        />
         {/* thumb */}
         <svg className={clsx('tremolo-knob-thumb', classes?.thumb)}>
           <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.css

@@ -1,7 +1,8 @@
 .tremolo-number-input-wrapper {
   --border-radius: 4px;
   --stepper-width: 20px;
-  --active-color: var(--tremolo-theme-color);
+  --active-color: oklch(59.5% 0.17548 266.373);
+  --border-color: oklch(81% 0 0);
 
   display: inline-flex;
   flex-direction: row;
@@ -9,13 +10,13 @@
   width: 140px;
   height: min-content;
   border-style: solid;
-  border-color: #c1c1c1;
+  border-color: var(--border-color);
   border-width: 0px;
   outline: none;
   transition: all 0.1s;
 
   &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
-    border-color: #f34343;
+    border-color: oklch(64.245% 0.21266 25.499);
   }
 
   &[data-variant='outline'] {
@@ -23,29 +24,30 @@
     border-radius: var(--border-radius);
 
     &:hover {
-      border-color: #909090;
+      --border-color: oklch(65.335% 0 0);
     }
 
     &:focus-within {
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 0px 0px 2px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
   }
 
   &[data-variant='filled'] {
+    --bg: oklch(95.88% 0 0);
     border-width: 1px;
     border-radius: var(--border-radius);
     border-color: transparent;
-    background-color: #edf2f7;
+    background-color: var(--bg);
 
     &:hover {
-      background-color: #e4e9ee;
+      --bg: oklch(93.166% 0 0);
     }
 
     &:focus-within {
       background-color: inherit;
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 0px 0px 2px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
@@ -55,11 +57,11 @@
     border-bottom-width: 1px;
 
     &:hover {
-      border-color: #909090;
+      --border-color: oklch(65.335% 0 0);
     }
 
     &:focus-within {
-      border-color: var(--active-color);
+      --border-color: var(--active-color);
       box-shadow: 0px 2px 0px 0px
         color-mix(in srgb, var(--active-color) 10%, transparent);
     }
@@ -116,7 +118,7 @@
 .tremolo-number-input-increment-stepper {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
+  border-inline-start-color: oklch(84.522% 0 0);
   font-size: calc(0.75rem);
   display: flex;
   justify-content: center;
@@ -128,7 +130,7 @@
   border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
-    background-color: #3443560e;
+    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
   &[aria-disabled='true'] {
@@ -143,8 +145,8 @@
 .tremolo-number-input-decrement-stepper {
   border-inline-start-width: 1px;
   border-inline-start-style: solid;
-  border-inline-start-color: #ccc;
-  border-top: 1px solid #ccc;
+  border-inline-start-color: oklch(84.522% 0 0);
+  border-top: 1px solid oklch(84.522% 0 0);
   font-size: calc(0.75rem);
   display: flex;
   justify-content: center;
@@ -156,7 +158,7 @@
   border-bottom-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
-    background-color: #3443560e;
+    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
   }
 
   &[aria-disabled='true'] {
@@ -167,3 +169,17 @@
     cursor: not-allowed;
   }
 }
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-number-input-wrapper {
+    --border-color: oklch(52% 0 0);
+
+    &[data-variant='filled'] {
+      --bg: oklch(43.5% 0 0);
+
+      &:hover {
+        --bg: oklch(46.6% 0 0);
+      }
+    }
+  }
+}

package/src/components/NumberInput/index.tsx

@@ -4,7 +4,10 @@ import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
 import { InputEventOption } from '@tremolo-ui/functions'
 
 import { NumberInputProvider } from './context'
+import { DecrementStepper } from './DecrementStepper'
+import { IncrementStepper } from './IncrementStepper'
 import { InternalInput } from './InternalInput'
+import { Stepper } from './Stepper'
 import { Units } from './type'
 
 /*
@@ -18,11 +21,11 @@ export interface NumberInputProps {
   value: number | string
 
   /**
-   * @default Number.MIN_SAFE_INTEGER
+   * Number.MIN_SAFE_INTEGER
    */
   min?: number
   /**
-   * @default Number.MAX_SAFE_INTEGER
+   * Number.MAX_SAFE_INTEGER
    */
   max?: number
   step?: number
@@ -55,7 +58,6 @@ export interface NumberInputProps {
   keepWithinRange?: boolean
   clampValueOnBlur?: boolean
 
-  // TODO
   /**
    * wheel control option
    */
@@ -95,11 +97,7 @@ export interface NumberInputMethods {
 type Props = NumberInputProps &
   Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>
 
-/**
- * Input with some useful functions for entering numerical values.
- * @category NumberInput
- */
-export const NumberInput = forwardRef<NumberInputMethods, Props>(
+const NumberInputImpl = forwardRef<NumberInputMethods, Props>(
   (
     {
       value,
@@ -126,9 +124,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 +152,7 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
           data-variant={variant}
         >
           <InternalInput
-            ref={ref}
+            ref={forwardedRef}
             readonly={readonly}
             disabled={disabled}
             selectWithFocus={selectWithFocus}
@@ -175,7 +173,17 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
   },
 )
 
-export * from './Stepper'
-export * from './IncrementStepper'
-export * from './DecrementStepper'
+/**
+ * Input with some useful functions for entering numerical values.
+ * @category NumberInput
+ */
+export const NumberInput = Object.assign(NumberInputImpl, {
+  Stepper,
+  IncrementStepper,
+  DecrementStepper,
+})
+
+export { type StepperProps } from './Stepper'
+export { type IncrementStepperProps } from './IncrementStepper'
+export { type DecrementStepperProps } from './DecrementStepper'
 export { type Units } from './type'

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(92% 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% 0 0);
+  --active-color: oklch(100% 0 0);
+  --active-bg: oklch(44% 0 0);
 
   box-sizing: border-box;
   position: absolute;
@@ -79,3 +79,12 @@
   aspect-ratio: 1;
   max-width: calc(100% - 16px);
 }
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-piano-white-key {
+    --bg: oklch(80% 0 0);
+    --color: oklch(0% 0 0);
+    --active-bg: oklch(72% 0 0);
+    --active-color: oklch(0% 0 0);
+  }
+}