chore(deps): Migrate to react 19

docs/package.json

@@ -26,8 +26,8 @@
     "docusaurus-theme-openapi-docs": "4.3.1",
     "ethers": "6.13.4",
     "prism-react-renderer": "2.4.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-icons": "5.4.0"
   },
   "scripts": {

locksmith/package.json

@@ -82,7 +82,7 @@
     "pdfmake": "0.2.17",
     "pg": "8.13.1",
     "rate-limiter-flexible": "5.0.4",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "remark-html": "16.0.1",
     "remark-parse": "11.0.0",
     "satori": "0.12.0",

packages/crypto-icon/package.json

@@ -21,8 +21,8 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "repository": {
     "type": "git",
@@ -36,11 +36,11 @@
     "@storybook/addon-links": "8.4.7",
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@vitejs/plugin-react": "4.3.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storybook": "8.4.7",
     "tsup": "8.3.5",
     "tsx": "4.19.2",

packages/ui/lib/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, ForwardedRef } from 'react'
+import type { ReactNode } from 'react'
 import type { SizeStyleProp } from '../../types'
 import { twMerge } from 'tailwind-merge'
 import { forwardRef } from 'react'
@@ -45,8 +45,8 @@ const VARIANTS_STYLES: Record<Variant, string> = {
     'bg-transparent text-black transition ease-in-out duration-300 text-brand-ui-primary disabled:text-brand-gray disabled:hover:text-brand-gray disabled:hover:bg-opacity-75 font-medium p-0',
 }
 
-export const Button = forwardRef(
-  (props: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  function Button(props, ref) {
     let {
       children,
       size = 'medium',
@@ -84,14 +84,16 @@ export const Button = forwardRef(
           <Icon
             icon={SpinnerIcon}
             size={size}
-            className="animate-spin motion-reduce:invisible "
+            className="animate-spin motion-reduce:invisible"
           />
         ) : (
           iconLeft
         )}
-        <span> {children}</span>
+        {children && <span>{children}</span>}
         {!loading && iconRight}
       </Box>
     )
   }
 )
+
+Button.displayName = 'Button'

packages/ui/lib/components/Disclosure/Disclosure.tsx

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react'
+import { ReactNode, ReactElement } from 'react'
 import { FiChevronDown as ArrowDownIcon } from 'react-icons/fi'
 import { Disclosure as HeadlessDisclosure } from '@headlessui/react'
 import { Card } from '../Card/Card'
 
 export interface DisclosureProps {
   label: string
-  description?: ReactNode
+  description?: string | ReactElement
   children?: ReactNode
   isLoading?: boolean
   disabled?: boolean
@@ -31,10 +31,11 @@ export const Disclosure = ({
   }
 
   return (
-    <HeadlessDisclosure defaultOpen={defaultOpen}>
+    <HeadlessDisclosure as="div" defaultOpen={defaultOpen}>
       {({ open }) => (
         <Card variant="primary">
           <HeadlessDisclosure.Button
+            as="div"
             className="flex flex-col w-full gap-2 outline-none"
             disabled={disabled}
           >
@@ -53,8 +54,8 @@ export const Disclosure = ({
             )}
           </HeadlessDisclosure.Button>
           {open && (
-            <HeadlessDisclosure.Panel unmount={false} className="pt-6">
-              {children}
+            <HeadlessDisclosure.Panel as="div" unmount={false} className="pt-6">
+              <div>{children}</div>
             </HeadlessDisclosure.Panel>
           )}
         </Card>

packages/ui/lib/components/Drawer/Drawer.tsx

@@ -29,10 +29,10 @@ export const Drawer = ({
   description,
 }: DrawerProps) => {
   return (
-    <Transition show={isOpen} as={React.Fragment}>
+    <Transition show={isOpen} as="div">
       <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
         <TransitionChild
-          as={React.Fragment}
+          as="div"
           enter="ease-in-out duration-500"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -47,7 +47,7 @@ export const Drawer = ({
           <div className="absolute inset-0 overflow-hidden">
             <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
               <TransitionChild
-                as={React.Fragment}
+                as="div"
                 enter="transform transition ease-in-out duration-500 sm:duration-700"
                 enterFrom="translate-x-full"
                 enterTo="translate-x-0"

packages/ui/lib/components/Form/Combobox.tsx

@@ -354,7 +354,9 @@ export function Combobox({
                           {displayedOptions.map((option, index) => (
                             <li
                               key={`${option.value}-${index}`}
-                              ref={(el) => (optionsRef.current[index] = el)}
+                              ref={(el) => {
+                                optionsRef.current[index] = el
+                              }}
                               className={clsx(
                                 'flex cursor-pointer mx-2 rounded-sm items-center gap-2 py-2 px-3 text-base min-w-0',
                                 'hover:bg-ui-main-50',
@@ -402,10 +404,10 @@ export function Combobox({
                             query === '' &&
                             moreOptions.length > 0 && (
                               <li
-                                ref={(el) =>
-                                  (optionsRef.current[displayedOptions.length] =
-                                    el)
-                                }
+                                ref={(el) => {
+                                  optionsRef.current[displayedOptions.length] =
+                                    el
+                                }}
                                 className={clsx(
                                   'flex cursor-pointer mx-2 rounded-sm items-center justify-center gap-2 py-3 px-3 text-base font-semibold min-w-0',
                                   'hover:bg-ui-main-50 text-brand-ui-primary',

packages/ui/lib/components/HeaderNav/HeaderNav.tsx

@@ -1,5 +1,5 @@
-import { Popover, Transition } from '@headlessui/react'
-import { Fragment, ReactNode, useEffect, useState } from 'react'
+import { Popover, Transition, Dialog, TransitionChild } from '@headlessui/react'
+import { ReactNode, useEffect, useState } from 'react'
 import { Button } from '../Button/Button'
 import { SOCIAL_LINKS } from '../constants'
 import { Icon } from '../Icon/Icon'
@@ -272,7 +272,7 @@ const NavSectionDesktop = (section: MenuSectionProps) => {
               <Title title={title} open={open} />
             </Popover.Button>
             <Transition
-              as={Fragment}
+              as="div"
               enter="transition ease-out duration-200"
               enterFrom="opacity-0 translate-y-1"
               enterTo="opacity-100 translate-y-0"
@@ -512,19 +512,39 @@ export const HeaderNav = ({
         </div>
       </div>
 
-      {/* mobile menu */}
-      {menuExpanded && (
-        <div
-          className={`fixed bottom-0 left-0 right-0 z-10 block overflow-scroll pb-20 top-24 lg:hidden ${
-            extraClass?.mobile ?? ''
-          }`}
+      {/* Mobile menu */}
+      <Transition show={menuExpanded} as="div">
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          onClose={setMenuExpanded}
         >
-          <div className="flex flex-col gap-10">
-            <NavSectionMobile menuSections={menuSections} />
-            {showSocialIcons && <SocialIcons />}
+          <div className="min-h-screen px-4 text-center">
+            <TransitionChild
+              as="div"
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-black bg-opacity-75" />
+            </TransitionChild>
+
+            <div className="fixed inset-0 overflow-y-auto">
+              <div className="flex items-center justify-center min-h-full p-4">
+                <div className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <div className="flex flex-col gap-10">
+                    <NavSectionMobile menuSections={menuSections} />
+                    {showSocialIcons && <SocialIcons />}
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      )}
+        </Dialog>
+      </Transition>
     </div>
   )
 }

packages/ui/lib/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import {
   Dialog,
   DialogBackdrop,
@@ -81,7 +81,7 @@ export function Modal({
   }
 
   return (
-    <Transition show={isOpen} as={React.Fragment}>
+    <Transition show={isOpen} as="div">
       <Dialog
         as="div"
         className="fixed inset-0 z-10 overflow-y-auto"
@@ -94,7 +94,7 @@ export function Modal({
           } justify-center`}
         >
           <TransitionChild
-            as={React.Fragment}
+            as="div"
             enter="ease-out duration-300"
             enterFrom={`opacity-0 ${disableBottomSheet ? 'translate-y-4 sm:translate-y-4' : 'translate-y-[100%] sm:translate-y-4'} sm:scale-95`}
             enterTo="opacity-100 translate-y-0 sm:scale-100"

packages/ui/lib/components/Select/Select.tsx

@@ -226,8 +226,9 @@ export const Select = <T extends unknown>({
       }
     >
       <Listbox
+        as="div"
         disabled={fieldDisabled}
-        value={selected?.value || ''}
+        value={selected?.value ?? ''}
         onChange={onChangeOption}
       >
         <div className="relative">

packages/ui/package.json

@@ -11,16 +11,22 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "default": "./dist/index.es.js"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
-      "require": "./dist/style.css"
+      "require": "./dist/style.css",
+      "default": "./dist/style.css"
     },
     "./dist/unlock-tailwind-preset": {
-      "require": "./dist/unlock-tailwind-preset.js"
+      "require": "./dist/unlock-tailwind-preset.js",
+      "default": "./dist/unlock-tailwind-preset.js"
     }
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "version": "0.4.8",
   "scripts": {
     "preview": "yarn build && vite --config ./vite.config.ts src",
@@ -48,8 +54,13 @@
   },
   "peerDependencies": {
     "@headlessui/react": "2.2.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@headlessui/react": {
+      "optional": true
+    }
   },
   "repository": {
     "type": "git",
@@ -65,14 +76,14 @@
     "@storybook/addon-links": "8.4.7",
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@unlock-protocol/unlock-js": "workspace:./packages/unlock-js",
     "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "10.4.20",
     "postcss": "8.4.49",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storybook": "8.4.7",
     "tailwindcss": "3.4.17",
     "tsup": "8.3.5",

packages/ui/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { Button } from './..'
+import { Button } from '../lib/components/Button/Button'
 import '../dist/style.css'
 
 function App() {