version bump

.changeset/grumpy-days-care.md

@@ -0,0 +1,5 @@
+---
+"vision-pro-ui": patch
+---
+
+version bump for next, fumadocs, and framer motion

README.md

@@ -21,10 +21,10 @@ However, you are more than welcome to use this for your own projects.
 
 This project assumes you already have `shadcn/ui` configured in your project.
 
-Install `framer-motion` in your project.
+Install `motion/react` in your project.
 
 ```bash
-npm install framer-motion
+npm install motion/react
 ```
 
 Then `copy/paste` the component you want to use into your project.

app/docs/[[...slug]]/page.tsx

@@ -1,4 +1,4 @@
-import { getPage, getPages } from "@/app/source";
+import { source } from "@/app/source";
 import {
   DocsPage,
   DocsBody,
@@ -7,20 +7,18 @@ import {
   DocsCategory,
 } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
-import defaultComponents from "fumadocs-ui/mdx";
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-import { AutoTypeTable } from "fumadocs-typescript/ui";
 import { Metadata } from "next";
 import { ComponentWrapper } from "@/components/component-wrapper";
 import { getGithubLastEdit } from "fumadocs-core/server";
 
-export default async function Page({
-  params,
-}: {
-  params: { slug?: string[] };
+import { createTypeTable } from "fumadocs-typescript/ui";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
 }) {
-  const page = getPage(params.slug);
-
+  const params = await props.params;
+  const page = source.getPage(params.slug);
   if (!page) notFound();
 
   const time = await getGithubLastEdit({
@@ -29,6 +27,8 @@ export default async function Page({
     path: `content/docs/${page.file.path}`,
   });
 
+  const { AutoTypeTable } = createTypeTable();
+
   const MDX = page.data.body;
 
   return (
@@ -51,29 +51,28 @@ export default async function Page({
       <DocsBody>
         <MDX
           components={{
-            ...defaultComponents,
+            ...defaultMdxComponents,
             AutoTypeTable,
             ComponentWrapper,
             Tab,
             Tabs,
           }}
         />
-        {page.data.index ? (
-          <DocsCategory page={page} pages={getPages()} />
-        ) : null}
+        {page.data.index ? <DocsCategory page={page} from={source} /> : null}
       </DocsBody>
     </DocsPage>
   );
 }
 
 export async function generateStaticParams() {
-  return getPages().map((page) => ({
-    slug: page.slugs,
-  }));
+  return source.generateParams();
 }
 
-export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-  const page = getPage(params.slug);
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
 
   if (page == null) notFound();
 

app/docs/layout.tsx

@@ -1,6 +1,6 @@
-import { DocsLayout } from 'fumadocs-ui/layout';
-import type { ReactNode } from 'react';
-import { docsOptions } from '../layout.config';
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+import { docsOptions } from "../layout.config";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return <DocsLayout {...docsOptions}>{children}</DocsLayout>;

app/layout.config.tsx

@@ -1,6 +1,6 @@
-import { type DocsLayoutProps } from "fumadocs-ui/layout";
-import { type HomeLayoutProps } from "fumadocs-ui/home-layout";
-import { pageTree } from "@/app/source";
+import { type DocsLayoutProps } from "fumadocs-ui/layouts/docs";
+import { type HomeLayoutProps } from "fumadocs-ui/layouts/home";
+import { source } from "@/app/source";
 
 // shared configuration
 export const baseOptions: HomeLayoutProps = {
@@ -20,5 +20,5 @@ export const baseOptions: HomeLayoutProps = {
 // docs layout configuration
 export const docsOptions: DocsLayoutProps = {
   ...baseOptions,
-  tree: pageTree,
+  tree: source.pageTree,
 };

app/layout.tsx

@@ -19,7 +19,13 @@ export const metadata = {
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body>
+      <body
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100vh",
+        }}
+      >
         <RootProvider
           theme={{
             themes: ["dark"],

app/page.tsx

@@ -8,7 +8,6 @@ import { AspectRatio } from "@/components/ui/aspect-ratio";
 const Hero = dynamic(
   () => import("../components/landing/hero").then((mod) => mod.Hero),
   {
-    ssr: false,
     loading: () => (
       <Skeleton className="rounded-[--tile-radius]">
         <AspectRatio ratio={2610 / 1468} />
@@ -41,8 +40,7 @@ export default function HomePage() {
             className="font-semibold text-fd-foreground underline"
           >
             Oliver
-          </Link>
-          {" "}
+          </Link>{" "}
           Powered by{" "}
           <Link
             href="https://fumadocs.vercel.app/"

app/source.ts

@@ -5,8 +5,8 @@ import { loader } from "fumadocs-core/source";
 import { icons } from "lucide-react";
 import { createElement } from "react";
 
-export const { getPage, getPages, pageTree } = loader({
-  baseUrl: "/docs",
+export const source = loader({
+  baseUrl: "docs",
   source: createMDXSource(docs, meta),
   icon(icon) {
     if (!icon) return undefined;

components/core/cursor.tsx

@@ -10,7 +10,7 @@ import {
   useMotionValue,
   useSpring,
   useTransform,
-} from "framer-motion";
+} from "motion/react";
 
 const CONSTANTS = {
   TEXT_ELEMENT_TAGS: ["P", "SPAN", "H1", "H2", "H3", "H4", "TEXTAREA"],

components/core/dropdown-menu.tsx

@@ -11,7 +11,7 @@ import {
 import * as RadixDropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { AnimatePresence } from "framer-motion";
+import { AnimatePresence } from "motion/react";
 import {
   DropdownMenuContentProps,
   DropdownMenuProps,

components/core/navigation-bar.tsx

@@ -3,7 +3,7 @@
 import { cn } from "@/lib/utils";
 import { Text } from "../ui/typography";
 import { useWindowScroll } from "./window";
-import { motion, useTransform } from "framer-motion";
+import { motion, useTransform } from "motion/react";
 import { cva, VariantProps } from "class-variance-authority";
 
 const navigationBarTitleVariants = cva(

components/core/ornament.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@radix-ui/react-tabs";
 import { Window, WindowProps } from "./window";
 import { Text } from "../ui/typography";

components/core/sidebar.tsx

@@ -9,7 +9,7 @@ import {
   MotionValue,
   useScroll,
   useTransform,
-} from "framer-motion";
+} from "motion/react";
 import View from "./view";
 
 interface HeaderProps extends HTMLAttributes<HTMLDivElement> {}

components/core/text-effects.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { motion, Variants } from "framer-motion";
+import { motion, Variants } from "motion/react";
 import React from "react";
 
 type PresetType = "blur" | "shake" | "scale" | "fade" | "slide";

components/core/window.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { HTMLMotionProps, motion, MotionValue } from "framer-motion";
-import { useScroll } from "framer-motion";
+import { HTMLMotionProps, motion, MotionValue } from "motion/react";
+import { useScroll } from "motion/react";
 import React, { useImperativeHandle, useRef } from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { ScrollBar } from "@/components/ui/scroll-area";

components/landing/app-store.client.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useWindowScroll } from "../core/window";
-import { motion, useMotionTemplate, useTransform } from "framer-motion";
+import { motion, useMotionTemplate, useTransform } from "motion/react";
 import { AppStoreView } from "./app-store.server";
 export const LibraryView = () => {
   const { scrollY } = useWindowScroll();

components/landing/hero-background.tsx

@@ -6,7 +6,7 @@ import bg_day from "@/public/assets/background-day.png";
 import Image from "next/image";
 
 import { useAtom, atom } from "jotai";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@/lib/utils";
 
 export const isDayAtom = atom(false);

content/docs/index.mdx

@@ -27,10 +27,10 @@ However, you are more than welcome to use this for your own projects.
 
 This project assumes you already have `shadcn/ui` configured in your project.
 
-Install `framer-motion` in your project.
+Install `motion/react` in your project.
 
 ```bash
-npm install framer-motion
+npm install motion/react
 ```
 
 Then `copy/paste` the component you want to use into your project.

next.config.mjs

@@ -5,6 +5,9 @@ const withMDX = createMDX({});
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
+  experimental: {
+    reactCompiler: true,
+  },
 };
 
 export default withMDX(config);

package.json

@@ -1,52 +1,55 @@
 {
   "name": "vision-pro-ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "build": "next build",
     "dev": "next dev -p 3080",
-    "start": "next start",
     "postinstall": "fumadocs-mdx",
+    "start": "next start",
     "ver": "changeset version",
     "release": "changeset version"
   },
   "dependencies": {
-    "@radix-ui/react-aspect-ratio": "^1.1.0",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-scroll-area": "^1.2.0",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@tabler/icons-react": "^3.19.0",
-    "class-variance-authority": "^0.7.0",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@tabler/icons-react": "^3.26.0",
+    "babel-plugin-react-compiler": "^19.0.0-beta-201e55d-20241215",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.11.9",
-    "fumadocs-core": "13.4.5",
-    "fumadocs-docgen": "^1.2.0",
-    "fumadocs-mdx": "^10.0.1",
-    "fumadocs-ui": "13.4.5",
-    "jotai": "^2.10.1",
-    "lucide-react": "^0.453.0",
-    "next": "^14.2.15",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "fumadocs-core": "^14.6.3",
+    "fumadocs-docgen": "^1.3.4",
+    "fumadocs-mdx": "^11.2.0",
+    "fumadocs-typescript": "^3.0.2",
+    "fumadocs-ui": "^14.6.3",
+    "jotai": "^2.10.4",
+    "lucide-react": "^0.469.0",
+    "motion": "^11.15.0",
+    "next": "^15.1.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.9",
+    "@changesets/cli": "^2.27.11",
     "@types/mdx": "^2.0.13",
-    "@types/node": "22.7.7",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3"
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.2"
   }
 }