Chakra v3 update

example/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "next-themes": "^0.3.0",
     "react-app-polyfill": "^1.0.6",
     "react-github-btn": "^1.4.0"
   },
@@ -20,8 +21,8 @@
     "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
   },
   "devDependencies": {
-    "@types/react": "^17.0.15",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "typescript": "^4",
     "vite": "latest",
     "vite-preset-react": "latest"

example/snippets/color-mode.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import React from "react"
+import type { IconButtonProps } from "@chakra-ui/react"
+// import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
+import { ThemeProvider, useTheme } from "next-themes"
+import type { ThemeProviderProps } from "next-themes/dist/types"
+// import { forwardRef } from "react"
+// import { LuMoon, LuSun } from "react-icons/lu"
+
+export function ColorModeProvider(props: ThemeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  )
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light")
+  }
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode()
+  return colorMode === "light" ? light : dark
+}
+
+// export function ColorModeIcon() {
+//   const { colorMode } = useColorMode()
+//   return colorMode === "light" ? <LuSun /> : <LuMoon />
+// }
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+// export const ColorModeButton = forwardRef<
+//   HTMLButtonElement,
+//   ColorModeButtonProps
+// >(function ColorModeButton(props, ref) {
+//   const { toggleColorMode } = useColorMode()
+//   return (
+//     <ClientOnly fallback={<Skeleton boxSize="8" />}>
+//       <IconButton
+//         onClick={toggleColorMode}
+//         variant="ghost"
+//         aria-label="Toggle color mode"
+//         size="sm"
+//         ref={ref}
+//         {...props}
+//         css={{
+//           _icon: {
+//             width: "5",
+//             height: "5",
+//           },
+//         }}
+//       >
+//         <ColorModeIcon />
+//       </IconButton>
+//     </ClientOnly>
+//   )
+// })

example/snippets/dialog.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { CloseButton } from "../../src/components/snippets/close-button"
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  backdrop?: boolean
+}
+
+export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
+  function DialogContent(props, ref) {
+    const {
+      children,
+      portalled = true,
+      portalRef,
+      backdrop = true,
+      ...rest
+    } = props
+
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        {backdrop && <ChakraDialog.Backdrop />}
+        <ChakraDialog.Positioner>
+          <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+            {children}
+          </ChakraDialog.Content>
+        </ChakraDialog.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const DialogCloseTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraDialog.CloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  return (
+    <ChakraDialog.CloseTrigger
+      position="absolute"
+      top="2"
+      insetEnd="2"
+      {...props}
+      asChild
+    >
+      <CloseButton size="sm" ref={ref}>
+        {props.children}
+      </CloseButton>
+    </ChakraDialog.CloseTrigger>
+  )
+})
+
+export const DialogRoot = ChakraDialog.Root
+export const DialogFooter = ChakraDialog.Footer
+export const DialogHeader = ChakraDialog.Header
+export const DialogBody = ChakraDialog.Body
+export const DialogBackdrop = ChakraDialog.Backdrop
+export const DialogTitle = ChakraDialog.Title
+export const DialogDescription = ChakraDialog.Description
+export const DialogTrigger = ChakraDialog.Trigger
+export const DialogActionTrigger = ChakraDialog.ActionTrigger

example/snippets/provider.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
+import { ColorModeProvider } from "./color-mode"
+
+export function Provider(props: React.PropsWithChildren) {
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <ColorModeProvider>{props.children}</ColorModeProvider>
+    </ChakraProvider>
+  )
+}