@tremolo-ui/react 0.0.10 → 0.0.11

package/dist/esm/types/components/Slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,aAAa,EAEb,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAGjB,MAAM,uBAAuB,CAAA;AAW9B,uBAAuB;AACvB,MAAM,WAAW,WAAW;IAE1B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED,uBAAuB;AACvB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAKD;;;GAGG;AACH,eAAO,MAAM,MAAM,yMA2OlB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EACL,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,aAAa,EAEb,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAGjB,MAAM,uBAAuB,CAAA;AAW9B,uBAAuB;AACvB,MAAM,WAAW,WAAW;IAE1B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CAEzC;AAED,uBAAuB;AACvB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAKD;;;GAGG;AACH,eAAO,MAAM,MAAM,yMA4OlB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,EACL,WAAW,EACX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/esm/types/hooks/useAnimationFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimationFrame.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimationFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAA;AAEtE,eAAO,MAAM,iBAAiB,iCAEtB,cAAc,SAarB,CAAA"}
+{"version":3,"file":"useAnimationFrame.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAnimationFrame.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAkC,MAAM,OAAO,CAAA;AAEtE,eAAO,MAAM,iBAAiB,GAC5B,qBAAmB,EACnB,OAAM,cAAmB,SAa1B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "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.11",
+    "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

@@ -92,7 +92,7 @@ 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)
 

package/src/components/NumberInput/context.tsx

@@ -109,7 +109,7 @@ export function NumberInputProvider({
   children,
   ...props
 }: NumberInputProviderProps) {
-  const storeRef = useRef<NumberInputStore>()
+  const storeRef = useRef<NumberInputStore>(null)
   if (!storeRef.current) {
     storeRef.current = createNumberInputStore(props)
   }

package/src/components/Piano/index.tsx

@@ -78,7 +78,7 @@ export function Piano({
   // -- state and ref ---
   const [pressed, setPressed] = useState(false)
   const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1)
-  const keyRefs = useRef<RefObject<KeyMethods>[]>([])
+  const keyRefs = useRef<RefObject<KeyMethods | null>[]>([])
   for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
     keyRefs.current[i] = createRef<KeyMethods>()
   }

package/src/components/Slider/Thumb.tsx

@@ -49,6 +49,7 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
     const wrapperRef = useRef<HTMLDivElement>(null)
     const vertical = useSliderContext((s) => s.vertical)
     const disabled = useSliderContext((s) => s.disabled)
+    const readonly = useSliderContext((s) => s.readonly)
 
     useImperativeHandle(ref, () => {
       return {
@@ -79,6 +80,7 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
             aria-disabled={disabled}
+            aria-readonly={readonly}
             style={{
               width: size ?? width,
               height: size ?? height,

package/src/components/Slider/Track.tsx

@@ -5,9 +5,7 @@ import { styleHelper, xor } from '@tremolo-ui/functions'
 
 import { useSliderContext } from './context'
 
-/** @category Slider */
 export const defaultLength = 140
-/** @category Slider */
 export const defaultThickness = 10
 
 /** @category Slider */

package/src/components/Slider/context.tsx

@@ -9,16 +9,7 @@ type State = {
   vertical: boolean
   reverse: boolean
   disabled: boolean
-}
-
-type Action = {
-  updateMin: (min: State['min']) => void
-  updateMax: (max: State['max']) => void
-  updateStep: (step: State['step']) => void
-  updateSkew: (skew: State['skew']) => void
-  updateVertical: (vertical: State['vertical']) => void
-  updateReverse: (reverse: State['reverse']) => void
-  updateDisabled: (disabled: State['disabled']) => void
+  readonly: boolean
 }
 
 type SliderStore = ReturnType<typeof createSliderStore>
@@ -32,18 +23,12 @@ const createSliderStore = (initProps?: Partial<State>) => {
     vertical: false,
     reverse: false,
     disabled: false,
+    readonly: false,
   }
 
-  return createStore<State & Action>()((set) => ({
+  return createStore<State>()(() => ({
     ...DEFAULT_PROPS,
     ...initProps,
-    updateMin: (min) => set(() => ({ min: min })),
-    updateMax: (max) => set(() => ({ max: max })),
-    updateStep: (step) => set(() => ({ step: step })),
-    updateSkew: (skew) => set(() => ({ skew: skew })),
-    updateVertical: (vertical) => set(() => ({ vertical: vertical })),
-    updateReverse: (reverse) => set(() => ({ reverse: reverse })),
-    updateDisabled: (disabled) => set(() => ({ disabled: disabled })),
   }))
 }
 
@@ -52,7 +37,7 @@ const SliderContext = createContext<SliderStore | null>(null)
 type SliderProviderProps = React.PropsWithChildren<Partial<State>>
 
 export function SliderProvider({ children, ...props }: SliderProviderProps) {
-  const storeRef = useRef<SliderStore>()
+  const storeRef = useRef<SliderStore>(null)
   if (!storeRef.current) {
     storeRef.current = createSliderStore(props)
   }
@@ -73,7 +58,7 @@ export function SliderProvider({ children, ...props }: SliderProviderProps) {
 }
 
 /** @category Slider */
-export function useSliderContext<T>(selector: (state: State & Action) => T): T {
+export function useSliderContext<T>(selector: (state: State) => T): T {
   const store = useContext(SliderContext)
   if (!store) throw new Error('Missing SliderContext.Provider in the tree')
   return useStore(store, selector)

package/src/components/Slider/index.tsx

@@ -261,6 +261,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
         vertical={vertical}
         reverse={reverse}
         disabled={disabled}
+        readonly={readonly}
       >
         <div
           className={clsx('tremolo-slider', className)}