feat: migrated to chakra v3

package.json

@@ -40,7 +40,6 @@
     "rollup-plugin-node-externals": "^8.0.0",
     "rxjs": "*",
     "serve": "^14.2.0",
-    "tailwindcss": "^3.4.1",
     "ts-node": "^10.4.0",
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.0.3",

packages/demo/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.0.0",
-    "@chakra-ui/react": "^3.3.1",
+    "@chakra-ui/react": "^3.4.0",
     "@chakra-ui/styled-system": "2.12.0",
     "@chakra-ui/system": "^2.5.1",
     "@emotion/react": "^11.14.0",
@@ -35,8 +35,8 @@
     "next-themes": "^0.4.4",
     "pdfjs-dist": "^4.7.76",
     "rc-slider": "^11.1.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.2.2",
     "react-icons": "^5.4.0",
     "react-router": "^7.1.1",

packages/demo/src/books/BookTable.tsx

@@ -42,3 +42,4 @@ export const BookTable = ({
     </Table.Root>
   </Box>
 );
+

packages/demo/src/books/BooksScreen.tsx

@@ -62,7 +62,7 @@ export const BooksScreen = () => {
                 </Table.Cell>
                 <Table.Cell textAlign="right">
                   <IconButton
-                    variant="surface"
+                    variant="outline"
                     aria-label="Remove"
                     onClick={async () => {
                       await localforage.removeItem(name);

packages/demo/src/common/AppBar.tsx

@@ -1,14 +1,14 @@
 import type React from "react"
 import { type ComponentProps, memo } from "react"
-import { type Box, Stack, Text } from "@chakra-ui/react"
+import { Stack, Text } from "@chakra-ui/react"
 
 export const AppBar = memo(
   ({
     leftElement,
     middleElement,
     rightElement,
     ...rest
-  }: ComponentProps<typeof Box> & {
+  }: ComponentProps<typeof Stack> & {
     leftElement?: React.ReactElement
     middleElement?: React.ReactElement | string
     rightElement?: React.ReactElement
@@ -25,7 +25,7 @@ export const AppBar = memo(
     >
       {leftElement}
       {typeof middleElement === "string" ? (
-        <Text as="h1" noOfLines={1}>
+        <Text as="h1" lineClamp={1}>
           {middleElement}
         </Text>
       ) : (

packages/demo/src/common/FullScreenDialog.tsx

@@ -0,0 +1,51 @@
+import { IoMdClose } from "react-icons/io"
+import { IconButton, Box } from "@chakra-ui/react"
+import type { FC, ReactNode } from "react"
+import { AppBar } from "./AppBar"
+import {
+  DialogBackdrop,
+  DialogContent,
+  DialogRoot,
+} from "../components/ui/dialog"
+
+export const FullScreenDialog: FC<{
+  onClose: () => void
+  isOpen: boolean
+  title: string
+  children: ReactNode
+}> = ({ onClose, isOpen, children, title }) => {
+  return (
+    <DialogRoot
+      lazyMount
+      open={isOpen}
+      size="full"
+      onOpenChange={(e) => {
+        if (!e.open) {
+          onClose()
+        }
+      }}
+    >
+      <DialogBackdrop />
+      <DialogContent height="100%">
+        <Box
+          style={{
+            height: "100%",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <AppBar
+            leftElement={
+              <IconButton aria-label="back" onClick={onClose}>
+                <IoMdClose />
+              </IconButton>
+            }
+            middleElement={title}
+          />
+          {children}
+        </Box>
+      </DialogContent>
+    </DialogRoot>
+  )
+}