chore: update packages

.gitignore

@@ -8,6 +8,9 @@ node_modules
 # testing
 coverage
 
+# astro
+.astro
+
 # next.js
 .next/
 out/
@@ -43,6 +46,7 @@ yarn-error.log*
 
 # turbo
 .turbo
+.cache
 
 # cf
 .wrangler

.npmrc

@@ -5,9 +5,10 @@ save-workspace-protocol=false
 prefer-workspace-packages=true
 link-workspace-packages=true
 
-# Expo doesn't play nice with pnpm by default.
-# The symbolic links of pnpm break the rules of Expo monorepos.
-# @link https://docs.expo.dev/guides/monorepos/#common-issues
-node-linker=hoisted
-
 engine-strict=true
+
+public-hoist-pattern[]=*expo*
+public-hoist-pattern[]=*react*
+public-hoist-pattern[]=*react-native-gradle-plugin*
+public-hoist-pattern[]=*@react-native-community/cli-platform-android*
+public-hoist-pattern[]=*@react-native-community/cli-platform-ios*

.nvmrc

@@ -1 +1 @@
-20.11
+22.12

docs/next.config.js

@@ -30,6 +30,8 @@ const nextConfig = {
     { source: "/regions-and-acl", destination: "/concepts/regions-acl" },
     { source: "/theming", destination: "/concepts/theming" },
   ],
+  typescript: { ignoreBuildErrors: true },
+  eslint: { ignoreDuringBuilds: true },
 };
 
 export default withSearch(withMDX(nextConfig));

docs/package.json

@@ -4,69 +4,64 @@
   "private": true,
   "scripts": {
     "dev": "next dev --port 3030",
-    "clean": "git clean -xdf dist node_modules",
+    "clean": "git clean -xdf .cache .next .turbo node_modules",
     "build": "next build && next-sitemap",
     "start": "next start",
+    "typecheck": "tsc --noEmit",
     "debug": "NODE_OPTIONS='--inspect' next dev"
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
     "@algolia/autocomplete-core": "^1.17.4",
-    "@headlessui/react": "^2.1.8",
-    "@headlessui/tailwindcss": "^0.2.0",
-    "@heroicons/react": "^2.1.3",
-    "@mdx-js/loader": "^3.0.1",
-    "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.11",
-    "@scalar/api-reference-react": "^0.3.37",
+    "@headlessui/react": "^2.2.0",
+    "@headlessui/tailwindcss": "^0.2.1",
+    "@heroicons/react": "^2.2.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "npm:@next/mdx@14.2.20",
+    "@scalar/api-reference-react": "0.3.37",
+    "@shikijs/transformers": "^1.24.0",
     "@sindresorhus/slugify": "^2.1.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/mdast": "^4.0.4",
     "@types/mdx": "^2.0.13",
-    "@types/node": "^20.14.0",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/node": "^22.10.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "@types/react-highlight-words": "^0.20.0",
     "@uploadthing/react": "workspace:*",
     "acorn": "^8.12.1",
     "autoprefixer": "^10.4.19",
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.2",
     "flexsearch": "^0.7.43",
-    "framer-motion": "^11.5.4",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
-    "next": "14.2.11",
+    "motion": "^12.0.0-alpha.2",
+    "next": "npm:next@14.2.20",
     "next-sitemap": "^4.2.3",
-    "next-themes": "^0.3.0",
-    "next-view-transitions": "^0.3.0",
+    "next-themes": "^0.4.4",
+    "next-view-transitions": "^0.3.4",
     "npm-to-yarn": "^3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "npm:react@18.3.1",
+    "react-dom": "npm:react-dom@18.3.1",
     "react-highlight-words": "^0.20.0",
     "recma-import-images": "^0.0.3",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",
     "remark-unwrap-images": "^4.0.0",
-    "shiki": "^1.17.5",
+    "sharp": "0.33.1",
+    "shiki": "^1.24.0",
     "simple-functional-loader": "^1.2.1",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.5.2",
+    "typescript": "^5.7.2",
     "unified": "^11.0.5",
     "unist-util-filter": "^5.0.1",
     "unist-util-visit": "^5.0.0",
     "uploadthing": "workspace:*",
     "zod": "^3.23.8",
     "zustand": "^4.3.2"
   },
-  "devDependencies": {
-    "@shikijs/transformers": "^1.17.5",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.1",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "sharp": "0.33.1"
-  },
   "packageManager": "pnpm@9.6.0"
 }

docs/src/app/(docs)/api-reference/openapi-spec/scalar-client.tsx

@@ -9,7 +9,7 @@ const specUrl = "https://api.uploadthing.com/openapi-spec.json";
 // const specUrl = "https://api.ut-staging.com/openapi-spec.json";
 
 const useMutationObserver = (
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   callback: (...args: Parameters<MutationCallback>) => boolean,
   options = {
     attributes: true,
@@ -49,7 +49,7 @@ export default function ScalarApiRef() {
 
   const [loaded, setLoaded] = useState(false);
 
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
   useMutationObserver(ref, (args) => {
     if (
       args.filter(

docs/src/app/(docs)/client-layout.tsx

@@ -8,7 +8,7 @@ import { LogoBlob, LogoText } from "@/components/Logo";
 import { Navigation } from "@/components/Navigation";
 import { SectionProvider, type Section } from "@/components/SectionProvider";
 import { XMarkIcon } from "@heroicons/react/20/solid";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { Link } from "next-view-transitions";
 
 const PreviewBanner = (props: {

docs/src/app/blog/_components/layouts.tsx

@@ -18,12 +18,7 @@ import {
 } from "@/components/SectionProvider";
 import { type ArticleWithSlug } from "@/lib/articles";
 import { formatDate } from "@/lib/utils";
-import {
-  AnimatePresence,
-  motion,
-  useScroll,
-  useTransform,
-} from "framer-motion";
+import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
 import { Link, useTransitionRouter } from "next-view-transitions";
 
 function ArrowLeftIcon(props: React.ComponentPropsWithoutRef<"svg">) {

docs/src/app/blog/category/[category]/page.tsx

@@ -13,10 +13,11 @@ export async function generateStaticParams() {
   return allTags.map((tag) => ({ category: tag }));
 }
 
-export default function ArticlesIndex(
+export default async function ArticlesIndex(
   props: Readonly<{
-    params: { category: string };
+    params: Promise<{ category: string }>;
   }>,
 ) {
-  return <ArticlesPage tag={props.params.category} />;
+  const category = (await props.params).category;
+  return <ArticlesPage tag={category} />;
 }

docs/src/app/providers.tsx

@@ -1,17 +1,19 @@
 "use client";
 
-import { createContext, useEffect, useRef } from "react";
+import { createContext, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { ThemeProvider, useTheme } from "next-themes";
 
 function usePrevious<T>(value: T) {
-  let ref = useRef<T>();
+  const [current, setCurrent] = useState(value);
+  const [previous, setPrevious] = useState(current);
 
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
+  if (value !== current) {
+    setPrevious(current);
+    setCurrent(value);
+  }
 
-  return ref.current;
+  return previous;
 }
 
 function ThemeWatcher() {
@@ -42,7 +44,7 @@ export const AppContext = createContext<{ previousPathname?: string }>({});
 
 export function Providers({ children }: { children: React.ReactNode }) {
   let pathname = usePathname();
-  let previousPathname = usePrevious(pathname);
+  const previousPathname = usePrevious(pathname);
 
   return (
     <AppContext.Provider value={{ previousPathname }}>

docs/src/components/Code.tsx

@@ -132,9 +132,9 @@ function CodePanel({
   let child = Children.only(children);
 
   if (isValidElement(child)) {
-    tag = child.props.tag ?? tag;
-    label = child.props.label ?? label;
-    code = child.props.code ?? code;
+    tag = (child as any).props.tag ?? tag;
+    label = (child as any).props.label ?? label;
+    code = (child as any).props.code ?? code;
   }
 
   if (!code) {
@@ -187,7 +187,9 @@ function CodeGroupHeader({
                   : "border-transparent text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300",
               )}
             >
-              {getPanelTitle(isValidElement(child) ? child.props : {})}
+              {getPanelTitle(
+                isValidElement(child as any) ? (child as any).props : {},
+              )}
             </Tab>
           ))}
         </TabList>
@@ -218,12 +220,12 @@ function CodeGroupPanels({
 }
 
 function usePreventLayoutShift() {
-  let positionRef = useRef<HTMLElement>(null);
-  let rafRef = useRef<number>();
+  let positionRef = useRef<HTMLElement | null>(null);
+  let rafRef = useRef<number | null>(null);
 
   useEffect(() => {
     return () => {
-      if (typeof rafRef.current !== "undefined") {
+      if (rafRef.current) {
         window.cancelAnimationFrame(rafRef.current);
       }
     };
@@ -301,7 +303,7 @@ export function CodeGroup({
 }: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
   let languages =
     Children.map(children, (child) =>
-      getPanelTitle(isValidElement(child) ? child.props : {}),
+      getPanelTitle(isValidElement(child as any) ? (child as any).props : {}),
     ) ?? [];
   let tabGroupProps = useTabGroupProps(languages);
   let hasTabs = Children.count(children) > 1;

docs/src/components/Header.tsx

@@ -10,7 +10,7 @@ import { MobileSearch, Search } from "@/components/Search";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import { socials } from "@/site-config";
 import clsx from "clsx";
-import { motion, MotionValue, useScroll, useTransform } from "framer-motion";
+import { motion, useScroll, useTransform } from "motion/react";
 import { Link } from "next-view-transitions";
 
 function TopLevelNavItem({

docs/src/components/Heading.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import { useSectionStore } from "@/components/SectionProvider";
 import { Tag, TagColor } from "@/components/Tag";
 import { remToPx } from "@/lib/remToPx";
-import { useInView } from "framer-motion";
+import { useInView } from "motion/react";
 import { Link } from "next-view-transitions";
 
 import { AnchorIcon } from "./icons";
@@ -89,7 +89,7 @@ export function Heading<Level extends 2 | 3>({
 }) {
   level = level ?? (2 as Level);
   let Component = `h${level}` as "h2" | "h3";
-  let ref = useRef<HTMLHeadingElement>(null);
+  let ref = useRef<HTMLHeadingElement | null>(null);
   let registerHeading = useSectionStore((s) => s.registerHeading);
 
   let inView = useInView(ref, {

docs/src/components/MobileNavigation.tsx

@@ -11,7 +11,7 @@ import {
   TransitionChild,
 } from "@headlessui/react";
 import { Bars2Icon, XMarkIcon } from "@heroicons/react/24/outline";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { create } from "zustand";
 
 const IsInsideMobileNavigationContext = createContext(false);

docs/src/components/Navigation.tsx

@@ -8,7 +8,7 @@ import { Tag } from "@/components/Tag";
 import { remToPx } from "@/lib/remToPx";
 import { NavGroup, navigation } from "@/site-config";
 import clsx from "clsx";
-import { AnimatePresence, motion, useIsPresent } from "framer-motion";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { Link } from "next-view-transitions";
 
 function useInitialValue<T>(value: T, condition = true) {

docs/src/components/SectionProvider.tsx

@@ -15,7 +15,7 @@ export interface Section {
   title: string;
   offsetRem?: number;
   tag?: string;
-  headingRef?: React.RefObject<HTMLHeadingElement>;
+  headingRef?: React.RefObject<HTMLHeadingElement | null>;
 }
 
 interface SectionState {
@@ -28,7 +28,7 @@ interface SectionState {
     offsetRem,
   }: {
     id: string;
-    ref: React.RefObject<HTMLHeadingElement>;
+    ref: React.RefObject<HTMLHeadingElement | null>;
     offsetRem: number;
   }) => void;
 }

docs/src/components/mdx.tsx

@@ -72,6 +72,7 @@ export const img = function Img(props: ImagePropsWithOptionalAlt) {
         alt=""
         sizes="(min-width: 1280px) 56rem, (min-width: 1024px) 45vw, (min-width: 640px) 32rem, 95vw"
         {...props}
+        src={props.src}
       />
       <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10 dark:ring-white/10" />
     </div>

docs/src/mdx/rehype.js

@@ -31,6 +31,8 @@ function rehypeShiki() {
         "bash",
         "typescript",
         "javascript",
+        "tsx",
+        "jsx",
         "astro",
         "vue",
         "svelte",

docs/tsconfig.json

@@ -19,6 +19,7 @@
     "jsx": "preserve",
     "plugins": [{ "name": "next" }],
     "incremental": true,
+    "tsBuildInfoFile": ".cache/tsbuildinfo.json",
 
     /* Path Aliases */
     "baseUrl": ".",

examples/backend-adapters/client-react/package.json

@@ -5,19 +5,20 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "start": "vite preview"
+    "start": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@uploadthing/react": "7.1.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "uploadthing": "7.4.0"
   },
   "devDependencies": {
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "typescript": "^5.5.2",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "typescript": "^5.7.2",
     "vite": "^5.4.8"
   }
 }