React 19 support, migrate to @react-spring/web and @use-gesture/react

.gitignore

@@ -136,4 +136,5 @@ yarn-error.log*
 .env.production.local
 
 # vercel
-.vercel
+.vercel
+.claude/

README.md

@@ -1,4 +1,4 @@
-# React Spring Bottom Sheet (React 18)
+# React Spring Bottom Sheet (React 18 & 19)
 
 [![npm stat](https://img.shields.io/npm/dm/@nipe-solutions/react-spring-bottom-sheet.svg?style=flat-square)](https://npm-stat.com/charts.html?package=@nipe-solutions/react-spring-bottom-sheet)
 [![npm version](https://img.shields.io/npm/v/@nipe-solutions/react-spring-bottom-sheet.svg?style=flat-square)](https://www.npmjs.com/package/@nipe-solutions/react-spring-bottom-sheet)
@@ -12,7 +12,7 @@
 
 ### ✨ Updated Version
 
-This project is an updated version of the original, which was authored by Cody Olsen. I have forked this repository from Jasmine GH to include significant updates and enhancements. Notably, this version has been updated to fully support React 18 and incorporates the latest features and improvements from XState v5.
+This project is an updated version of the original, which was authored by Cody Olsen. I have forked this repository from Jasmine GH to include significant updates and enhancements. Notably, this version has been updated to fully support React 18 and 19 (including StrictMode), runs on [@react-spring/web] and [@use-gesture/react], and incorporates the latest features and improvements from XState v5.
 
 ### 📝 Attribution
 
@@ -23,7 +23,7 @@ I am not the original author of this software. The original creation was by Cody
 - Original Author's Repository: [Cody Olsen's GitHub](https://github.com/stipsan/react-spring-bottom-sheet)
 - Forked Version I Based My Work On: [Jasmine GH's GitHub](https://github.com/JasGH/react-spring-bottom-sheet)
 
-**react-spring-bottom-sheet** is built on top of **[react-spring]** and **[react-use-gesture]**. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.
+**react-spring-bottom-sheet** is built on top of **[react-spring]** and **[@use-gesture/react]**. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.
 
 ## Installation
 
@@ -450,4 +450,5 @@ export default function Example() {
 [unpkg-dist]: https://unpkg.com/@nipe-solutions/react-spring-bottom-sheet/dist/
 [module-formats-badge]: https://img.shields.io/badge/module%20formats-cjs%2C%20es%2C%20modern-green.svg?style=flat-square
 [react-spring]: https://github.com/pmndrs/react-spring
-[react-use-gesture]: https://github.com/pmndrs/react-use-gesture
+[@react-spring/web]: https://github.com/pmndrs/react-spring
+[@use-gesture/react]: https://github.com/pmndrs/use-gesture

docs/Footer.tsx

@@ -41,8 +41,8 @@ export default function Footer({
         )}
       />
       <Badge name="react-spring-bottom-sheet" version={version} />
-      <Badge name="react-spring" version={reactSpringVersion} />
-      <Badge name="react-use-gesture" version={reactUseGestureVersion} />
+      <Badge name="@react-spring/web" version={reactSpringVersion} />
+      <Badge name="@use-gesture/react" version={reactUseGestureVersion} />
     </footer>
   )
 }

docs/Hero.tsx

@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import { forwardRef, useEffect, useRef, useState } from 'react'
-import { animated, config, useSpring } from 'react-spring'
+import { animated, config, useSpring } from '@react-spring/web'
 import styles from './Hero.module.css'
 
 const subtitle = 'Accessible, Delightful, and Performant'
@@ -79,7 +79,7 @@ export default function Hero({ className }: { className?: string }) {
       y: open ? '0px' : '208px',
       state: open ? 1 : 0,
     },
-    onFrame: ({ state }) => {
+    onChange: ({ value: { state } }) => {
       if (state > 0) {
         if (!openClassRef.current) {
           classNameRef.current.classList.add(
@@ -128,7 +128,7 @@ export default function Hero({ className }: { className?: string }) {
             />
             <animated.path
               style={{
-                fill: state.interpolate({ output: ['#fed7e6', '#FC9EC2'] }),
+                fill: state.to({ output: ['#fed7e6', '#FC9EC2'] }),
               }}
               fillRule="evenodd"
               clipRule="evenodd"
@@ -141,10 +141,10 @@ export default function Hero({ className }: { className?: string }) {
               style={{
                 ['--tw-translate-y' as any]: y,
                 /*
-                ['--tw-scale-x' as any]: state.interpolate({
+                ['--tw-scale-x' as any]: state.to({
                   output: [0.9, 1],
                 }),
-                ['--tw-scale-y' as any]: state.interpolate({
+                ['--tw-scale-y' as any]: state.to({
                   output: [0.9, 1],
                 }),
                 // */

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}