@tremolo-ui/react 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": false,
@@ -22,18 +22,18 @@
     "clean:sb": "rimraf ./storybook-static"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "10.6.0",
-    "@storybook/addon-docs": "10.6.0",
-    "@storybook/addon-links": "10.6.0",
-    "@storybook/react-vite": "10.6.0",
+    "@storybook/addon-a11y": "10.6.1",
+    "@storybook/addon-docs": "10.6.1",
+    "@storybook/addon-links": "10.6.1",
+    "@storybook/react-vite": "10.6.1",
     "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "jotai": "3.0.0",
+    "jotai": "3.0.1",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "storybook": "10.6.0",
+    "storybook": "10.6.1",
     "tone": "15.1.22"
   },
   "peerDependencies": {
@@ -41,8 +41,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/dom": "^0.7.0",
-    "@tremolo-ui/functions": "^0.7.0"
+    "@tremolo-ui/dom": "0.9.0",
+    "@tremolo-ui/functions": "^0.9.0"
   },
   "files": [
     "dist",

package/src/components/AnimationCanvas/index.tsx

@@ -9,26 +9,12 @@ import {
 import {
   createAnimationCanvas,
   type AnimationCanvasInstance,
-  type AnimationFrame,
+  type CanvasDrawFunction,
+  type CanvasInitFunction,
 } from '@tremolo-ui/dom'
 
 import { useComposedRefs } from '../../compose-refs'
 
-export type InitFunction = (
-  context: CanvasRenderingContext2D,
-  option: {
-    /** current canvas width */
-    width: number
-    /** current canvas height */
-    height: number
-  },
-) => void
-
-export type DrawFunction = (
-  context: CanvasRenderingContext2D,
-  option: AnimationFrame,
-) => void
-
 export interface AnimationCanvasCommonProps {
   /**
    * Draw one frame. It is given the 2D context and the frame: the size in CSS
@@ -37,12 +23,12 @@ export interface AnimationCanvasCommonProps {
    * A new function replaces the old one in place, so writing it inline does
    * not restart anything.
    */
-  draw: DrawFunction
+  draw: CanvasDrawFunction
   /**
    * Called once before the first frame, with the context and the size in CSS
    * pixels. Set up what every frame shares here.
    */
-  init?: InitFunction
+  init?: CanvasInitFunction
   /**
    * Redraw on every animation frame. Turn it off to draw only when there is a
    * reason to: when the canvas mounts, when it is resized, and when the

package/src/components/DropZone/index.tsx

@@ -39,7 +39,8 @@ export interface DropZoneProps {
   onDrop?: (files: File[], event: DragEvent) => void
   /**
    * Called with the dropped files that do not match `accept`, so that the
-   * reason can be shown.
+   * 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
 

package/src/components/FileInput/index.tsx

@@ -7,9 +7,10 @@ import {
   useMemo,
 } from 'react'
 
-import { matchesAccept } from '@tremolo-ui/dom'
-
-import { visuallyHiddenStyle } from '../_util/visually-hidden'
+import {
+  partitionByAccept,
+  visuallyHiddenStyle,
+} from '@tremolo-ui/dom/internal'
 
 import { FileInputProvider } from './context'
 import { Trigger } from './Trigger'
@@ -47,7 +48,8 @@ export interface FileInputProps {
   /**
    * 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.
+   * both, and after it, so a list of rejected files can be cleared in
+   * `onChange` and filled here.
    */
   onReject?: (files: File[]) => void
 
@@ -92,22 +94,18 @@ export const Root = /* @__PURE__ */ forwardRef<HTMLDivElement, Props>(
     const context = useMemo(() => ({ inputId, disabled }), [inputId, disabled])
 
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
-      const picked = Array.from(event.target.files ?? [])
+      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 = ''
 
-      const accepted: File[] = []
-      const rejected: File[] = []
-      for (const file of picked) {
-        if (matchesAccept(file, accept)) accepted.push(file)
-        else rejected.push(file)
-      }
-
-      if (rejected.length > 0) onReject?.(rejected)
       if (accepted.length > 0) onChange?.(accepted)
+      if (rejected.length > 0) onReject?.(rejected)
     }
 
     return (

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,56 +1,57 @@
 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 {
   /**
    * Fill colour of the circle.
    * @default 'currentColor'
    */
-  thumb?: string
+  color?: string
   /**
    * Colour of the line that points at the value.
    * @default 'currentColor'
    */
-  thumbLine?: string
+  lineColor?: string
   /**
    * Diameter of the circle, as a percentage of the knob.
    * @default 84
    */
-  thumbSize?: number
+  size?: number
   /**
    * Thickness of the line, as a percentage of the knob.
    * @default 6
    */
-  thumbLineWeight?: number
+  lineWeight?: number
   /**
    * How far down the line reaches, as a percentage of the knob from its top.
    * The line starts at the edge of the circle.
    * @default 35
    */
-  thumbLineLength?: number
+  lineLength?: number
 
   /**
-   * Classes for what the thumb draws inside itself: `thumbLine` is the line
-   * that points at the value.
+   * Classes for what the thumb draws inside itself: `line` is the line that
+   * points at the value.
    */
   classes?: {
-    thumbLine?: string
+    line?: string
   }
 }
 
 export function Thumb({
   className,
 
-  thumb = 'currentColor',
-  thumbLine = 'currentColor',
-  thumbSize = 84,
-  thumbLineWeight = 6,
-  thumbLineLength = 35,
+  color = 'currentColor',
+  lineColor = 'currentColor',
+  size = 84,
+  lineWeight = 6,
+  lineLength = 35,
   classes,
 
   ...props
@@ -64,15 +65,15 @@ export function Thumb({
 
   return (
     <svg className={className} {...props}>
-      <circle cx="50%" cy="50%" r={`${thumbSize / 2}%`} fill={thumb} />
+      <circle cx="50%" cy="50%" r={`${size / 2}%`} fill={color} />
       <line
-        className={classes?.thumbLine}
+        className={classes?.line}
         x1="50%"
-        y1={`${(viewBoxSize - clamp(thumbSize, 0, 100)) / 2}%`}
+        y1={`${(KNOB_VIEWBOX_SIZE - clamp(size, 0, 100)) / 2}%`}
         x2="50%"
-        y2={`${thumbLineLength}%`}
-        stroke={thumbLine}
-        strokeWidth={`${thumbLineWeight}%`}
+        y2={`${lineLength}%`}
+        stroke={lineColor}
+        strokeWidth={`${lineWeight}%`}
         // 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

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)