@tremolo-ui/react 0.1.6 → 0.2.1

package/src/components/Knob/index.tsx

@@ -5,22 +5,38 @@ import {
   useCallback,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react'
 
 import {
   clamp,
   InputEventOption,
   normalizeValue,
-  radian,
   rawValue,
   stepValue,
 } from '@tremolo-ui/functions'
 
 import { useDrag } from '../../hooks/useDrag'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { addNoSelect, removeNoSelect } from '../_util'
+import {
+  addUserSelectNone,
+  Cursor,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
+
+import { ActiveLine } from './ActiveLine'
+import { KnobProvider } from './context'
+import { InactiveLine } from './InactiveLine'
+import { SVGRoot } from './SVGRoot'
+import { Thumb } from './Thumb'
+
+const defaultExternalStyles: KnobProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'grabbing',
+}
 
-/** @category Knob */
 export interface KnobProps {
   // required
   value: number
@@ -29,9 +45,10 @@ export interface KnobProps {
 
   // optional
   step?: number
-  skew?: number // | SkewFunction
+  skew?: number // | SkewFunction // TODO
   /**
    * value set when double-clicking
+   * restriction: enableDoubleClickDefault = true
    * @default min
    * @see enableDoubleClickDefault
    */
@@ -46,14 +63,22 @@ export interface KnobProps {
   /** width and height */
   size?: number | string
 
-  /** Whether to apply `{use-select: none}` when dragging */
-  bodyNoSelect?: boolean
+  /**
+   * Global style to apply when dragged
+   * @default defaultExternalStyles
+   */
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null
   enableDoubleClickDefault?: boolean
@@ -61,51 +86,20 @@ 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
-  /** line weight [px] */
-  lineWeight?: number
   /** angle range [degree] */
   angleRange?: number
 
-  classes?: {
-    activeLine?: string
-    inactiveLine?: string
-    thumb?: string
-    thumbLine?: string
-  }
-
   onChange?: (value: number) => void
 }
 
-/**
- * @category Knob
- */
 export interface KnobMethods {
   focus: () => void
   blur: () => void
 }
 
-type Props = KnobProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof KnobProps>
+type Props = KnobProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KnobProps>
 
-/**
- * Interactive rotary knob component implemented in SVG.
- *
- * @category Knob
- */
-export const Knob = forwardRef<KnobMethods, Props>(
+const Root = forwardRef<KnobMethods, Props>(
   (
     {
       value,
@@ -115,34 +109,30 @@ export const Knob = forwardRef<KnobMethods, Props>(
       skew = 1,
       defaultValue = min,
       startValue = min,
-      size = 50,
-      bodyNoSelect = true,
+      size,
+      externalStyles: _externalStyles,
       wheel = ['raw', 1],
       keyboard = ['raw', 1],
       enableDoubleClickDefault = true,
       disabled = false,
       readonly = false,
-      activeLine,
-      inactiveLine,
-      thumb,
-      thumbLine,
-      thumbSize = 84,
-      thumbLineWeight = 6,
-      thumbLineLength = 35,
-      lineWeight = 6,
       angleRange = 270,
       onChange,
       onKeyDown,
       onPointerDown,
       onDoubleClick,
       className,
-      classes,
+      style,
+      children,
       ...props
     }: Props,
     forwardedRef,
   ) => {
+    const [dragging, setDragging] = useState(false)
     const valueRef = useRef(0)
-    const elmRef = useRef<HTMLOrSVGElement>(null)
+    const elmRef = useRef<HTMLElement | SVGElement>(null)
+
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
 
     // --- internal functions ---
     const onDrag = useCallback(
@@ -184,14 +174,20 @@ export const Knob = forwardRef<KnobMethods, Props>(
     )
 
     // --- hooks ---
-    const [touchMoveRefCallback, pointerDownHandler] = useDrag<SVGElement>({
+    const [touchMoveRefCallback, pointerDownHandler] = useDrag<
+      HTMLElement | SVGElement
+    >({
       onDrag: onDrag,
       onDragStart: () => {
+        setDragging(true)
         valueRef.current = normalizeValue(value, min, max, skew)
-        if (bodyNoSelect) addNoSelect()
+        if (externalStyles.userSelectNone) addUserSelectNone()
+        if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
       },
       onDragEnd: () => {
-        if (bodyNoSelect) removeNoSelect()
+        setDragging(false)
+        if (externalStyles.userSelectNone) removeUserSelectNone()
+        if (externalStyles.cursor) resetCursorStyle()
       },
     })
 
@@ -219,118 +215,68 @@ export const Knob = forwardRef<KnobMethods, Props>(
       }
     }, [])
 
-    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))
-    const y2 = center + center * Math.sin(radian(r2 - 90))
-    const x3 = center + center * Math.cos(radian(r3 - 90))
-    const y3 = center + center * Math.sin(radian(r3 - 90))
-    const x4 = center + center * Math.cos(radian(r4 - 90))
-    const y4 = center + center * Math.sin(radian(r4 - 90))
-
     return (
-      <svg
-        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}
-        role="slider"
-        aria-valuenow={value}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-disabled={disabled}
-        aria-readonly={readonly}
-        onPointerDown={(event) => {
-          pointerDownHandler(event)
-          onPointerDown?.(event)
-        }}
-        onDoubleClick={(event) => {
-          if (enableDoubleClickDefault && onChange) {
-            onChange(defaultValue)
-          }
-          onDoubleClick?.(event)
-        }}
-        onKeyDown={(event) => {
-          handleKeyDown(event)
-          onKeyDown?.(event)
-        }}
-        {...props}
+      <KnobProvider
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        skew={skew}
+        startValue={startValue}
+        angleRange={angleRange}
       >
-        {/* lines */}
-        {startValue > min && (
-          <path
-            className={clsx(
-              'tremolo-knob-inactive-line',
-              classes?.inactiveLine,
-            )}
-            d={`M ${x1} ${y1} A ${center} ${center} -135 ${r2 - r1 > 180 ? 1 : 0} 1 ${x2}, ${y2}`}
-            fill="none"
-            stroke={inactiveLine || 'currentColor'}
-            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(
-              'tremolo-knob-inactive-line',
-              classes?.inactiveLine,
-            )}
-            d={`M ${x3} ${y3} A ${center} ${center} -135 ${r4 - r3 > 180 ? 1 : 0} 1 ${x4}, ${y4}`}
-            fill="none"
-            stroke={inactiveLine || 'currentColor'}
-            strokeWidth={lineWeight}
-          />
-        )}
-        {/* thumb */}
-        <svg className={clsx('tremolo-knob-thumb', classes?.thumb)}>
-          <circle
-            cx="50%"
-            cy="50%"
-            r={`${thumbSize / 2}%`}
-            fill={thumb || 'currentColor'}
-          />
-          <line
-            className={clsx('tremolo-knob-thumb-line', classes?.thumbLine)}
-            x1="50%"
-            y1={`${padding}%`}
-            x2="50%"
-            y2={`${thumbLineLength}%`}
-            stroke={thumbLine || 'currentColor'}
-            strokeWidth={`${thumbLineWeight}%`}
-            // NOTE
-            // 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(${r1 + p * angleRange}deg)`,
-              transformOrigin: '50% 50%',
-            }}
-          />
-        </svg>
-      </svg>
+        <div
+          ref={(elm) => {
+            elmRef.current = elm
+            wheelRefCallback(elm)
+            touchMoveRefCallback(elm)
+          }}
+          className={clsx('tremolo-knob', className)}
+          tabIndex={0}
+          role="slider"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-disabled={disabled}
+          aria-readonly={readonly}
+          data-dragging={dragging}
+          style={{
+            width: size,
+            height: size,
+            ...style,
+          }}
+          onPointerDown={(event) => {
+            pointerDownHandler(event)
+            onPointerDown?.(event)
+          }}
+          onDoubleClick={(event) => {
+            if (enableDoubleClickDefault && onChange) {
+              onChange(defaultValue)
+            }
+            onDoubleClick?.(event)
+          }}
+          onKeyDown={(event) => {
+            handleKeyDown(event)
+            onKeyDown?.(event)
+          }}
+          {...props}
+        >
+          {children || <SVGRoot />}
+        </div>
+      </KnobProvider>
     )
   },
 )
+
+/**
+ * Interactive rotary knob component implemented in SVG.
+ */
+export const Knob = {
+  Root,
+  SVGRoot,
+  InactiveLine,
+  ActiveLine,
+  Thumb,
+}
+
+export { useKnobContext } from './context'

package/src/components/NumberInput/DecrementStepper.tsx

@@ -5,13 +5,11 @@ import { useLongPress } from '../../hooks/useLongPress'
 
 import { useNumberInputContext } from './context'
 
-/** @category NumberInput */
 export interface DecrementStepperProps {
   size?: number
   children?: ReactNode
 }
 
-/** @category NumberInput */
 export function DecrementStepper({
   size = 12,
   children,

package/src/components/NumberInput/IncrementStepper.tsx

@@ -5,13 +5,11 @@ import { useLongPress } from '../../hooks/useLongPress'
 
 import { useNumberInputContext } from './context'
 
-/** @category NumberInput */
 export interface IncrementStepperProps {
   size?: number
   children?: ReactNode
 }
 
-/** @category NumberInput */
 export function IncrementStepper({
   size = 12,
   children,

package/src/components/NumberInput/InternalInput.tsx

@@ -96,7 +96,9 @@ export const InternalInput = forwardRef<
         let newValue
         if (eventType == 'normalized') {
           if (!min || !max) {
-            throw new Error('required parameter: min, max') // TODO
+            throw new Error(
+              '[NumberInput] "min" and "max" are required when InputEventOption[0] is set to "normalized".',
+            )
           }
           const n = normalizeValue(valueAsNumber, min, max)
           newValue = rawValue(n + x, min, max)

package/src/components/NumberInput/Stepper.tsx

@@ -1,14 +1,12 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
 
-/** @category NumberInput */
 export interface StepperProps {
   /** Display only when hovering. */
   dynamic?: boolean
   children?: ReactNode
 }
 
-/** @category NumberInput */
 export function Stepper({
   dynamic = true,
   children,

package/src/components/NumberInput/context.tsx

@@ -153,7 +153,6 @@ export function NumberInputProvider({
   )
 }
 
-/** @category NumberInput */
 export function useNumberInputContext<T>(
   selector: (state: State & Action) => T,
 ): T {

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'
 
 /*
@@ -13,16 +16,15 @@ TODO
 - skew
 */
 
-/** @category NumberInput */
 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
@@ -57,10 +59,12 @@ export interface NumberInputProps {
 
   /**
    * wheel control option
+   * If null, no event will be triggered
    */
   wheel?: InputEventOption | null
   /**
    * keyboard control option
+   * If null, no event will be triggered
    */
   keyboard?: InputEventOption | null
 
@@ -83,9 +87,6 @@ export interface NumberInputProps {
   children?: ReactNode
 }
 
-/**
- * @category NumberInput
- */
 export interface NumberInputMethods {
   focus: () => void
   blur: () => void
@@ -94,11 +95,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 Root = forwardRef<NumberInputMethods, Props>(
   (
     {
       value,
@@ -174,7 +171,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.
+ */
+export const NumberInput = {
+  Root,
+  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/KeyLabel.tsx

@@ -5,7 +5,6 @@ import { usePianoContext } from './context'
 
 import { getNoteRangeArray } from '.'
 
-/** @category Piano */
 export interface KeyLabelProps {
   /**
    * override Piano.label
@@ -21,7 +20,6 @@ export interface KeyLabelProps {
   __label?: (note: number, index: number) => ReactNode
 }
 
-/** @category Piano */
 export function KeyLabel({
   label,
   className,

package/src/components/Piano/context.tsx

@@ -1,7 +1,6 @@
 import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
 import { createStore, useStore } from 'zustand'
 
-/** @category Piano */
 export type NoteRange = {
   first: number
   last: number
@@ -67,7 +66,6 @@ export function PianoProvider({ children, ...props }: PianoProviderProps) {
   )
 }
 
-/** @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')