@tremolo-ui/react 0.0.10 → 0.0.12

package/dist/styles/index.css

@@ -1,6 +1,5 @@
 :root {
   --tremolo-theme-color: #4e76e6;
-  --tremolo-theme-color-rgb: 78, 118, 230;
 }
 
 .tremolo-no-select {
@@ -57,42 +56,80 @@
 }
 
 .tremolo-number-input-wrapper {
-  --tremolo-number-input-border-radius: 4px;
-  --tremolo-number-input-stepper-width: 20px;
+  --border-radius: 4px;
+  --stepper-width: 20px;
+  --active-color: var(--tremolo-theme-color);
 
   display: inline-flex;
   flex-direction: row;
   position: relative;
-
-  border-style: solid;
-  border-width: 1px;
-  border-color: #bbb;
-  border-radius: var(--tremolo-number-input-border-radius);
-
   width: 140px;
   height: min-content;
-
-  &:hover {
-    border-color: var(--tremolo-theme-color);
-  }
+  border-style: solid;
+  border-color: #c1c1c1;
+  border-width: 0px;
+  outline: none;
+  transition: all 0.1s;
 
   &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
     border-color: #f34343;
   }
 
-  &:focus-within {
-    border-color: var(--tremolo-theme-color);
-    box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
+  &[data-variant='outline'] {
+    border-width: 1px;
+    border-radius: var(--border-radius);
+
+    &:hover {
+      border-color: #909090;
+    }
+
+    &:focus-within {
+      border-color: var(--active-color);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
+  }
+
+  &[data-variant='filled'] {
+    border-width: 1px;
+    border-radius: var(--border-radius);
+    border-color: transparent;
+    background-color: #edf2f7;
+
+    &:hover {
+      background-color: #e4e9ee;
+    }
+
+    &:focus-within {
+      background-color: inherit;
+      border-color: var(--active-color);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
+  }
+
+  &[data-variant='flushed'] {
+    border-bottom-width: 1px;
+
+    &:hover {
+      border-color: #909090;
+    }
+
+    &:focus-within {
+      border-color: var(--active-color);
+      box-shadow: 0px 2px 0px 0px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
   }
 
   &[data-stepper='false'] {
-    --tremolo-number-input-stepper-width: 0px;
+    --stepper-width: 0px;
   }
 }
 
 .tremolo-number-input {
   display: block;
-  width: calc(100% - 20px - var(--tremolo-number-input-stepper-width));
+  width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
   font: inherit;
   padding: 6px 10px;
@@ -100,7 +137,11 @@
   margin: 0;
   border: none;
   outline: none;
-  appearance: textfield;
+  appearance: none;
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-number-input-stepper {
@@ -110,7 +151,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: var(--tremolo-number-input-stepper-width);
+  width: var(--stepper-width);
   transition: all 0.1s linear;
 
   &[data-dynamic='true'] {
@@ -119,7 +160,11 @@
   }
 }
 
-.tremolo-number-input-wrapper:hover .tremolo-number-input-stepper {
+:is(
+    .tremolo-number-input-wrapper:hover,
+    .tremolo-number-input-wrapper:focus-within
+  )
+  .tremolo-number-input-stepper {
   opacity: 1;
   transform: translateX(0);
 }
@@ -136,7 +181,7 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-top-right-radius: var(--tremolo-number-input-border-radius);
+  border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: #3443560e;
@@ -145,6 +190,10 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-number-input-decrement-stepper {
@@ -160,7 +209,7 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-bottom-right-radius: var(--tremolo-number-input-border-radius);
+  border-bottom-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: #3443560e;
@@ -169,26 +218,38 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-piano {
   display: inline-block;
   box-sizing: border-box;
   user-select: none;
+  touch-action: none;
   position: relative;
 }
 
 .tremolo-piano-white-key {
+  --bg: white;
+  --color: black;
+  --active-bg: #ccc;
+  --active-color: black;
+
   position: absolute;
-  background-color: white;
-  color: black;
+  background-color: var(--bg);
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color);
   border: 1px solid #555;
   border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 1;
 
   &[data-active='true'] {
-    background-color: #ccc;
+    background-color: var(--active-bg);
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
@@ -197,16 +258,23 @@
 }
 
 .tremolo-piano-black-key {
+  --color: white;
+  --bg: #333;
+  --active-color: white;
+  --active-bg: #666;
+
   position: absolute;
-  background-color: #333;
-  color: white;
+  background-color: var(--bg);
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color);
   border: 1px solid #555;
   border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 2;
 
   &[data-active='true'] {
-    background-color: #666;
+    background-color: var(--active-bg);
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
@@ -222,6 +290,7 @@
 }
 
 .tremolo-piano-key-label {
+  box-sizing: content-box;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -253,7 +322,9 @@
 }
 
 .tremolo-slider-thumb {
-  background: #4e76e6;
+  --color: var(--tremolo-theme-color);
+
+  background: var(--color);
   border-radius: 50%;
   outline: none;
 
@@ -262,7 +333,8 @@
   }
 
   &[aria-readonly='false']:focus {
-    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+    box-shadow: 0px 0px 0px 3px
+      color-mix(in srgb, var(--color) 20%, transparent);
   }
 }
 
@@ -325,6 +397,13 @@
   cursor: pointer;
 }
 
+.tremolo-xy-pad-area {
+  --color: #eee;
+
+  position: relative;
+  background-color: var(--color);
+}
+
 .tremolo-xy-pad-thumb-wrapper {
   position: absolute;
   translate: -50% -50%;
@@ -332,15 +411,18 @@
 }
 
 .tremolo-xy-pad-thumb {
+  --color: var(--tremolo-theme-color);
+
   border-radius: 50%;
   outline: none;
-  background-color: #4e76e6;
+  background-color: var(--color);
 
   &[aria-disabled='true'] {
     background-color: #5d6478;
   }
 
   &:focus {
-    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+    box-shadow: 0px 0px 0px 3px
+      color-mix(in srgb, var(--color) 20%, transparent);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -8,28 +8,43 @@
   "types": "dist/cjs/types/index.d.ts",
   "scripts": {
     "sb": "storybook dev -p 6006",
+    "typecheck": "tsc",
     "build:sb": "storybook build",
     "serve": "http-server ./storybook-static",
     "lint": "eslint --fix --ext .ts,.tsx .",
     "format": "prettier --write .",
     "test": "echo 'No test yet.'",
-    "build:package": "rollup -c",
+    "build:package": "tsc && rollup -c",
     "clean": "npm run clean:build && npm run clean:sb",
     "clean:build": "rimraf ./dist .rollup.cache",
     "clean:sb": "rimraf ./storybook-static"
   },
-  "exports": {
-    ".": {
-      "require": {
-        "types": "./dist/cjs/types/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      },
-      "import": {
-        "types": "./dist/esm/types/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
-    },
-    "./styles/index.css": "./dist/styles/index.css"
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-vite": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "jest-environment-jsdom": "^29.7.0",
+    "jotai": "^2.12.1",
+    "react": "19.x",
+    "react-dom": "19.x",
+    "storybook": "^8.6.7",
+    "tone": "^15.0.4"
+  },
+  "peerDependencies": {
+    "react": "^18 ||^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@tremolo-ui/functions": "0.0.12",
+    "clsx": "^2.1.1",
+    "zustand": "^5.0.3"
   },
   "files": [
     "dist",
@@ -56,31 +71,17 @@
     "components",
     "web-audio"
   ],
-  "devDependencies": {
-    "@storybook/addon-essentials": "^8.3.3",
-    "@storybook/addon-interactions": "^8.3.3",
-    "@storybook/addon-links": "^8.3.3",
-    "@storybook/blocks": "^8.3.3",
-    "@storybook/react": "^8.3.3",
-    "@storybook/react-vite": "^8.3.3",
-    "@storybook/test": "^8.3.3",
-    "@testing-library/react": "^16.0.1",
-    "jest-environment-jsdom": "^29.7.0",
-    "jotai": "^2.12.1",
-    "react": "^18.3.1",
-    "react-component-benchmark": "^2.0.0",
-    "react-dom": "^18.3.1",
-    "storybook": "^8.3.3",
-    "tone": "^15.0.4"
-  },
-  "peerDependencies": {
-    "@tremolo-ui/functions": "0.0.10",
-    "react": "18.x || 19.x",
-    "react-dom": "18.x || 19.x"
-  },
-  "dependencies": {
-    "@tremolo-ui/functions": "file:../functions",
-    "clsx": "^2.1.1",
-    "zustand": "^5.0.3"
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/cjs/types/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./styles/index.css": "./dist/styles/index.css"
   }
 }

package/src/components/AnimationCanvas/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
 import {
   ComponentPropsWithoutRef,
-  MutableRefObject,
   ReactElement,
+  RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -29,8 +29,8 @@ export type DrawFunction = (
   // TODO: saving scale and translate
   // context: Omit<CanvasRenderingContext2D, 'save' | 'restore' | 'scale'>,
   context: CanvasRenderingContext2D,
-  width: MutableRefObject<number>,
-  height: MutableRefObject<number>,
+  width: RefObject<number>,
+  height: RefObject<number>,
   count: number,
 ) => void
 
@@ -84,6 +84,7 @@ export function AnimationCanvas({
   init,
   draw,
   className,
+  onContextMenu = (event) => event.preventDefault(),
   ...props
 }: AnimationCanvasProps &
   Omit<
@@ -92,15 +93,15 @@ export function AnimationCanvas({
   >): ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const memoCanvasRef = useRef<HTMLCanvasElement>(null)
-  const reqIdRef = useRef<number>()
+  const reqIdRef = useRef(-1)
   const widthRef = useRef(0)
   const heightRef = useRef(0)
 
   const loop = useCallback(
     (
       context: CanvasRenderingContext2D,
-      width: MutableRefObject<number>,
-      height: MutableRefObject<number>,
+      width: RefObject<number>,
+      height: RefObject<number>,
       count: number,
     ) => {
       reqIdRef.current = requestAnimationFrame(() =>
@@ -154,7 +155,13 @@ export function AnimationCanvas({
             ;(context[prop] as DrawingStateValue) = contextMemo[prop]
           }
 
-          if (reduceFlickering && memoContext) {
+          if (
+            reduceFlickering &&
+            memoContext &&
+            memoCanvas &&
+            memoCanvas.width > 0 &&
+            memoCanvas.height > 0
+          ) {
             context.drawImage(memoContext.canvas, 0, 0)
           }
         }
@@ -194,6 +201,7 @@ export function AnimationCanvas({
         width={relativeSize ? 0 : width}
         height={relativeSize ? 0 : height}
         ref={canvasRef}
+        onContextMenu={onContextMenu}
         {...props}
       ></canvas>
       {relativeSize && reduceFlickering && (