@tremolo-ui/react 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": false,
@@ -30,7 +30,7 @@
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "jotai": "2.20.3",
+    "jotai": "3.0.0",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.6.0",
@@ -41,8 +41,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/dom": "^0.6.0",
-    "@tremolo-ui/functions": "^0.6.0"
+    "@tremolo-ui/dom": "^0.8.0",
+    "@tremolo-ui/functions": "^0.8.0"
   },
   "files": [
     "dist",

package/src/components/DropZone/index.tsx

@@ -0,0 +1,101 @@
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+
+import { useComposedRefs } from '../../compose-refs'
+import { useDropZone } from '../../hooks/useDropZone'
+
+export interface DropZoneProps {
+  /**
+   * Which files to take, written the way the `accept` attribute of a file
+   * input is: a comma separated list of extensions (`.wav`), MIME types
+   * (`audio/wav`) and type groups (`audio/*`).
+   *
+   * What does not match goes to `onReject` rather than `onDrop`. While the
+   * drag is still in the air the element is marked `[data-invalid]`, as far as
+   * the browser lets it be told apart — a rule written as an extension cannot
+   * be decided until the drop.
+   */
+  accept?: string
+  /**
+   * Take more than one file from a single drop. With it off, only the first
+   * accepted file is reported, as a file input without `multiple` does.
+   *
+   * @default false
+   */
+  multiple?: boolean
+  /**
+   * Refuse the drop. The drag is still swallowed rather than let through: an
+   * unhandled drop makes the browser leave the page and open the file.
+   *
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Called with the dropped files that match `accept`.
+   *
+   * @param event the drop, for anything the files leave out — where on the
+   * element it landed, most of all.
+   */
+  onDrop?: (files: File[], event: DragEvent) => void
+  /**
+   * Called with the dropped files that do not match `accept`, so that the
+   * reason can be shown. It comes after `onDrop` for the same drop, so a list
+   * of rejected files can be cleared in `onDrop` and filled here.
+   */
+  onReject?: (files: File[], event: DragEvent) => void
+
+  /** What the zone shows. */
+  children: ReactNode
+}
+
+type Props = DropZoneProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof DropZoneProps>
+
+/**
+ * An area that takes files dropped onto it.
+ *
+ * To make an element you already have into a drop target, without wrapping it
+ * in anything, use the `useDropZone` hook this is built on.
+ */
+export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      accept,
+      multiple = false,
+      disabled = false,
+      onDrop,
+      onReject,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { refCallback, over, invalid } = useDropZone<HTMLDivElement>({
+      accept,
+      multiple,
+      disabled,
+      onDrop,
+      onReject,
+    })
+    const composedRef = useComposedRefs<HTMLDivElement>(ref, refCallback)
+
+    return (
+      <div
+        ref={composedRef}
+        data-dragover={over ? '' : undefined}
+        data-invalid={invalid ? '' : undefined}
+        data-disabled={disabled ? '' : undefined}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+
+/**
+ * An area that takes files dropped onto it.
+ */
+export const DropZone = {
+  Root,
+}

package/src/components/FileInput/Trigger.tsx

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+
+import { useFileInputContext } from './context'
+
+export interface FileInputTriggerProps {
+  /** What the trigger reads. It is the accessible name of the file input. */
+  children: ReactNode
+}
+
+type Props = FileInputTriggerProps &
+  Omit<
+    ComponentPropsWithoutRef<'label'>,
+    keyof FileInputTriggerProps | 'htmlFor'
+  >
+
+/**
+ * Opens the file picker, and names the input for a screen reader.
+ *
+ * A `<label>` rather than a `<button>`: the browser forwards the click to the
+ * input on its own, the input stays the one thing in the tab order, and its
+ * accessible name comes from this text without an `aria-label` to keep in
+ * step. A disabled input ignores the click, so nothing has to be intercepted.
+ */
+export const Trigger = /* @__PURE__ */ forwardRef<HTMLLabelElement, Props>(
+  ({ children, ...props }, ref) => {
+    const { inputId, disabled } = useFileInputContext()
+
+    return (
+      <label
+        ref={ref}
+        htmlFor={inputId}
+        data-disabled={disabled ? '' : undefined}
+        {...props}
+      >
+        {children}
+      </label>
+    )
+  },
+)

package/src/components/FileInput/context.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react'
+
+export type FileInputContextValue = {
+  /** The id of the hidden `<input type="file">`, for `Trigger`'s `htmlFor`. */
+  inputId: string
+  disabled: boolean
+}
+
+const FileInputContext =
+  /* @__PURE__ */ createContext<FileInputContextValue | null>(null)
+
+export const FileInputProvider = FileInputContext.Provider
+
+export function useFileInputContext(): FileInputContextValue
+export function useFileInputContext<T>(
+  selector: (state: FileInputContextValue) => T,
+): T
+export function useFileInputContext<T>(
+  selector?: (state: FileInputContextValue) => T,
+) {
+  const context = useContext(FileInputContext)
+  if (!context) throw new Error('Missing FileInputContext.Provider in the tree')
+  return selector ? selector(context) : context
+}

package/src/components/FileInput/index.tsx

@@ -0,0 +1,139 @@
+import {
+  ChangeEvent,
+  ComponentPropsWithoutRef,
+  forwardRef,
+  ReactNode,
+  useId,
+  useMemo,
+} from 'react'
+
+import { partitionByAccept, visuallyHiddenStyle } from '@tremolo-ui/dom'
+
+import { FileInputProvider } from './context'
+import { Trigger } from './Trigger'
+
+export interface FileInputProps {
+  /**
+   * Which files to take, written the way the HTML attribute is: a comma
+   * separated list of extensions (`.wav`), MIME types (`audio/wav`) and type
+   * groups (`audio/*`).
+   *
+   * **The browser treats it as a hint to the picker, not a rule.** A person
+   * can switch the picker to "All Files", so what arrives is checked again
+   * here, and anything that does not match goes to `onReject` instead.
+   */
+  accept?: string
+  /**
+   * Let more than one file be picked at a time.
+   * @default false
+   */
+  multiple?: boolean
+  /**
+   * Refuse to open the picker, and mark every part with `[data-disabled]`.
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Called with the files that were picked and match `accept`.
+   *
+   * It is not called at all when the picker is dismissed, or when every file
+   * picked was rejected — an empty array never arrives, so there is no need to
+   * tell "nothing was chosen" from "the choice was cleared".
+   */
+  onChange?: (files: File[]) => void
+  /**
+   * Called with the files that were picked and do not match `accept`, so that
+   * the reason can be shown. Given alongside `onChange` when a selection held
+   * both, and after it, so a list of rejected files can be cleared in
+   * `onChange` and filled here.
+   */
+  onReject?: (files: File[]) => void
+
+  /** Normally a `FileInput.Trigger`, and whatever shows what was picked. */
+  children: ReactNode
+}
+
+type Props = FileInputProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof FileInputProps>
+
+/**
+ * Hands over the files a person picked.
+ *
+ * The `<input type="file">` is here, kept out of sight but in the tab order,
+ * because it is the control: it takes the focus, opens the picker on Enter,
+ * and carries the accessible name. What is on screen is whatever the children
+ * draw.
+ */
+export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      accept,
+      multiple = false,
+      disabled = false,
+      onChange,
+      onReject,
+      children,
+      // Pulled out of `props` so that they land on the input rather than on
+      // the wrapper: it is the control, and a description is only announced
+      // from the element that takes the focus. No declaration in
+      // `FileInputProps` is needed for this — they are already on the div
+      // attributes it is merged with, with the same types.
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      'aria-describedby': ariaDescribedby,
+      ...props
+    },
+    ref,
+  ) => {
+    const inputId = useId()
+
+    const context = useMemo(() => ({ inputId, disabled }), [inputId, disabled])
+
+    function handleChange(event: ChangeEvent<HTMLInputElement>) {
+      const { accepted, rejected } = partitionByAccept(
+        Array.from(event.target.files ?? []),
+        accept,
+      )
+
+      // Picking the same file twice fires no second change event while the
+      // value is still on the input, so it is cleared as soon as it is read.
+      // Nothing is lost: the files are already in hand.
+      event.target.value = ''
+
+      if (accepted.length > 0) onChange?.(accepted)
+      if (rejected.length > 0) onReject?.(rejected)
+    }
+
+    return (
+      <FileInputProvider value={context}>
+        <div ref={ref} data-disabled={disabled ? '' : undefined} {...props}>
+          <input
+            id={inputId}
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            style={visuallyHiddenStyle}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            onChange={handleChange}
+          />
+          {children}
+        </div>
+      </FileInputProvider>
+    )
+  },
+)
+
+/**
+ * Picks files, and hands them over as `File`s.
+ */
+export const FileInput = {
+  Root,
+  Trigger,
+}
+
+export { useFileInputContext, type FileInputContextValue } from './context'
+export { type FileInputTriggerProps } from './Trigger'

package/src/components/Knob/ActiveLine.tsx

@@ -1,8 +1,10 @@
 import { SVGProps } from 'react'
 
+import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
 import { useCheckPlacement } from '../_util/Placement'
 
-import { arcPath, arcRadius, useKnobContext } from './context'
+import { useKnobContext } from './context'
 
 export function ActiveLine({
   stroke = 'currentColor',
@@ -15,12 +17,12 @@ export function ActiveLine({
   const r2 = useKnobContext((s) => s.r2)
   const r3 = useKnobContext((s) => s.r3)
 
-  const radius = arcRadius(strokeWidth)
+  const radius = knobArcRadius(strokeWidth)
 
   return (
     <path
       className={className}
-      d={arcPath(r2, r3, radius)}
+      d={knobArcPath(r2, r3, radius)}
       fill="none"
       stroke={stroke}
       strokeWidth={strokeWidth}

package/src/components/Knob/InactiveLine.tsx

@@ -1,8 +1,10 @@
 import { SVGProps } from 'react'
 
+import { knobArcPath, knobArcRadius } from '@tremolo-ui/dom'
+
 import { useCheckPlacement } from '../_util/Placement'
 
-import { arcPath, arcRadius, useKnobContext } from './context'
+import { useKnobContext } from './context'
 
 export function InactiveLine({
   stroke = 'currentColor',
@@ -21,14 +23,14 @@ export function InactiveLine({
   const r3 = useKnobContext((s) => s.r3)
   const r4 = useKnobContext((s) => s.r4)
 
-  const radius = arcRadius(strokeWidth)
+  const radius = knobArcRadius(strokeWidth)
 
   return (
     <>
       {startValue > min && (
         <path
           className={className}
-          d={arcPath(r1, r2, radius)}
+          d={knobArcPath(r1, r2, radius)}
           fill="none"
           stroke={stroke}
           strokeWidth={strokeWidth}
@@ -38,7 +40,7 @@ export function InactiveLine({
       {startValue < max && (
         <path
           className={className}
-          d={arcPath(r3, r4, radius)}
+          d={knobArcPath(r3, r4, radius)}
           fill="none"
           stroke={stroke}
           strokeWidth={strokeWidth}

package/src/components/Knob/SVGRoot.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, SVGProps } from 'react'
 
-import { Placement } from '../_util/Placement'
+import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
 
-import { viewBoxSize } from './context'
+import { Placement } from '../_util/Placement'
 
 export interface KnobSVGRootProps {
   /**
@@ -19,7 +19,7 @@ export function SVGRoot({
 }: KnobSVGRootProps & Omit<SVGProps<SVGSVGElement>, keyof KnobSVGRootProps>) {
   return (
     <svg
-      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      viewBox={`0 0 ${KNOB_VIEWBOX_SIZE} ${KNOB_VIEWBOX_SIZE}`}
       style={{
         display: 'block',
         ...style,

package/src/components/Knob/Thumb.tsx

@@ -1,10 +1,11 @@
 import { SVGProps } from 'react'
 
+import { KNOB_VIEWBOX_SIZE } from '@tremolo-ui/dom'
 import { clamp } from '@tremolo-ui/functions'
 
 import { useCheckPlacement } from '../_util/Placement'
 
-import { useKnobContext, viewBoxSize } from './context'
+import { useKnobContext } from './context'
 
 export interface KnobThumbProps {
   /**
@@ -68,7 +69,7 @@ export function Thumb({
       <line
         className={classes?.thumbLine}
         x1="50%"
-        y1={`${(viewBoxSize - clamp(thumbSize, 0, 100)) / 2}%`}
+        y1={`${(KNOB_VIEWBOX_SIZE - clamp(thumbSize, 0, 100)) / 2}%`}
         x2="50%"
         y2={`${thumbLineLength}%`}
         stroke={thumbLine}

package/src/components/Knob/context.tsx

@@ -1,9 +1,7 @@
 import { createContext, useContext } from 'react'
 
-import { radian, type Scale } from '@tremolo-ui/functions'
-
-export const viewBoxSize = 100
-export const center = viewBoxSize / 2
+import { type KnobAngles } from '@tremolo-ui/dom'
+import { type Scale } from '@tremolo-ui/functions'
 
 export type KnobConfig = {
   value: number
@@ -16,76 +14,7 @@ export type KnobConfig = {
   angleRange: number
 }
 
-export type KnobContextValue = KnobConfig & {
-  /** normalized value */
-  p: number
-  /** ロータリー開始位置 */
-  r1: number
-  /** activeLine の開始位置 */
-  r2: number
-  /** activeLine の終了位置 */
-  r3: number
-  /** ロータリー終了位置 */
-  r4: number
-}
-
-/**
- * 角度から円弧上の点を求める。
- *
- * 半径は線の太さの分だけ内側に取る必要があるが、太さは ActiveLine / InactiveLine が
- * それぞれ持つため、座標はストアで先に計算せず各コンポーネント側で求める。
- */
-export function pointOnArc(angle: number, radius: number) {
-  return {
-    x: center + radius * Math.cos(radian(angle - 90)),
-    y: center + radius * Math.sin(radian(angle - 90)),
-  }
-}
-
-/** 線の太さが viewBox からはみ出さないようにした半径 */
-export function arcRadius(strokeWidth: number | string | undefined) {
-  const width =
-    typeof strokeWidth === 'number'
-      ? strokeWidth
-      : Number.parseFloat(String(strokeWidth))
-  return Number.isFinite(width) ? center - width / 2 : center
-}
-
-/** Build an SVG path for an arc, splitting full turns into drawable segments. */
-export function arcPath(startAngle: number, endAngle: number, radius: number) {
-  const start = pointOnArc(startAngle, radius)
-  const sweep = endAngle - startAngle
-  const segmentCount = Math.max(1, Math.ceil(Math.abs(sweep) / 180))
-  const segmentSweep = sweep / segmentCount
-  let path = `M ${start.x} ${start.y}`
-
-  for (let i = 1; i <= segmentCount; i += 1) {
-    const end = pointOnArc(startAngle + segmentSweep * i, radius)
-    path += ` A ${radius} ${radius} 0 0 ${segmentSweep >= 0 ? 1 : 0} ${end.x} ${end.y}`
-  }
-
-  return path
-}
-
-/** 設定から描画に必要な角度を導出する。レンダー中に呼ぶ。 */
-export function calcAngles({
-  value,
-  min,
-  max,
-  scale,
-  startValue,
-  angleRange,
-}: KnobConfig) {
-  const p = scale.normalize(value, min, max)
-  const s = scale.normalize(startValue, min, max)
-
-  const r1 = -angleRange / 2
-  const r2 = r1 + Math.min(p, s) * angleRange
-  const r3 = r1 + Math.max(p, s) * angleRange
-  const r4 = angleRange / 2
-
-  return { p, r1, r2, r3, r4 }
-}
+export type KnobContextValue = KnobConfig & KnobAngles
 
 const KnobContext = /* @__PURE__ */ createContext<KnobContextValue | null>(null)
 

package/src/components/Knob/index.tsx

@@ -9,34 +9,36 @@ import {
   useRef,
 } from 'react'
 
-import type { AxisOptions, XY } from '@tremolo-ui/dom'
 import {
   applyDelta,
+  arrowKeyDirection,
+  type AxisOptions,
+  cssLength,
+  DEFAULT_DRAG_SENSITIVITY,
+  DEFAULT_KEYBOARD_OPTIONS,
+  DEFAULT_WHEEL_OPTIONS,
   type InputEventOption,
+  knobAngles,
   type ModifierValue,
   selectModifier,
-  linearScale,
-  type Scale,
-  type ValueRange,
-} from '@tremolo-ui/functions'
+  wheelDirection,
+  type XY,
+} from '@tremolo-ui/dom'
+import { linearScale, type Scale, type ValueRange } from '@tremolo-ui/functions'
 
 import { useComposedRefs } from '../../compose-refs'
 import { useCheckSteps } from '../../hooks/_internal/useCheckSteps'
 import { useDragValue } from '../../hooks/useDragValue'
 import { useWheel } from '../../hooks/useWheel'
-import {
-  DEFAULT_DRAG_SENSITIVITY,
-  DEFAULT_KEYBOARD_OPTIONS,
-  DEFAULT_WHEEL_OPTIONS,
-} from '../../input-event'
-import { cssLength } from '../_util/css-length'
 
 import { ActiveLine } from './ActiveLine'
-import { calcAngles, KnobProvider } from './context'
+import { KnobProvider } from './context'
 import { InactiveLine } from './InactiveLine'
 import { SVGRoot } from './SVGRoot'
 import { Thumb } from './Thumb'
 
+import type { CSSVariables } from '../../css-variables'
+
 const defaultExternalStyles: KnobProps['externalStyles'] = {
   cursor: 'grabbing',
 }
@@ -200,6 +202,8 @@ export interface KnobProps {
    * </Knob.Root>
    */
   children: ReactNode
+
+  style?: CSSProperties & CSSVariables<'knob-size'>
 }
 
 export interface KnobMethods {
@@ -262,12 +266,10 @@ export const Root = /* @__PURE__ */ forwardRef<KnobMethods, Props>(
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLOrSVGElement>) => {
         if (!keyboard || !onChange || inactive) return
-        const key = event.key
-        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
-          event.preventDefault()
-          const direction = key === 'ArrowRight' || key === 'ArrowUp' ? 1 : -1
-          onChange(applyDelta(value, direction, keyboard, range, event))
-        }
+        const direction = arrowKeyDirection(event.key)
+        if (direction === null) return
+        event.preventDefault()
+        onChange(applyDelta(value, direction, keyboard, range, event))
       },
       [keyboard, onChange, inactive, value, range],
     )
@@ -301,9 +303,13 @@ export const Root = /* @__PURE__ */ forwardRef<KnobMethods, Props>(
 
     const wheelRefCallback = useWheel<HTMLElement>((event) => {
       if (!wheel || inactive) return
+      // A notch the knob does not read — a sideways scroll — is left to the
+      // page rather than swallowed.
+      const direction = wheelDirection(event)
+      if (direction === null) return
       event.preventDefault()
-      if (!onChange || event.deltaY === 0) return
-      onChange(applyDelta(value, -Math.sign(event.deltaY), wheel, range, event))
+      if (!onChange) return
+      onChange(applyDelta(value, direction, wheel, range, event))
     }, WHEEL_OPTIONS)
 
     // Composed once, so React attaches the refs a single time instead of
@@ -316,7 +322,7 @@ export const Root = /* @__PURE__ */ forwardRef<KnobMethods, Props>(
 
     const context = useMemo(() => {
       const config = { value, min, max, step, scale, startValue, angleRange }
-      return { ...config, ...calcAngles(config) }
+      return { ...config, ...knobAngles(config) }
     }, [value, min, max, step, scale, startValue, angleRange])
 
     useImperativeHandle(forwardedRef, () => {

package/src/components/NumberInput/DecrementStepper.tsx

@@ -1,22 +1,11 @@
-import { ComponentPropsWithoutRef } from 'react'
-
 import {
   StepperArrow,
   StepperButton,
-  StepperButtonProps,
+  type StepperButtonProps,
 } from './StepperButton'
 
-// An interface rather than an alias; see `NumberInputIncrementStepperProps`.
-export interface NumberInputDecrementStepperProps extends StepperButtonProps {}
-
 /** Lowers the value by one `step`, repeating while held. */
-export function DecrementStepper(
-  props: NumberInputDecrementStepperProps &
-    Omit<
-      ComponentPropsWithoutRef<'div'>,
-      keyof NumberInputDecrementStepperProps
-    >,
-) {
+export function DecrementStepper(props: StepperButtonProps) {
   return (
     <StepperButton
       direction={-1}

package/src/components/NumberInput/IncrementStepper.tsx

@@ -1,23 +1,11 @@
-import { ComponentPropsWithoutRef } from 'react'
-
 import {
   StepperArrow,
   StepperButton,
-  StepperButtonProps,
+  type StepperButtonProps,
 } from './StepperButton'
 
-// An interface rather than an alias, so that typedoc lists the props: the
-// shared `StepperButtonProps` is not exported for it to follow.
-export interface NumberInputIncrementStepperProps extends StepperButtonProps {}
-
 /** Raises the value by one `step`, repeating while held. */
-export function IncrementStepper(
-  props: NumberInputIncrementStepperProps &
-    Omit<
-      ComponentPropsWithoutRef<'div'>,
-      keyof NumberInputIncrementStepperProps
-    >,
-) {
+export function IncrementStepper(props: StepperButtonProps) {
   return (
     <StepperButton
       direction={1}