release: 1.4.0

Feat/rc 1.4.0

Author: joshxfi

.github/workflows/ci.yml

@@ -5,10 +5,26 @@ on: [push, pull_request]
 jobs:
   build-and-test:
     name: Build and Test
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ~/.bun/install/cache
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lock') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lock') }}-
+
       - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
 
       - name: Install dependencies
         run: bun install

bun.lock

@@ -1,9 +1,5 @@
 import createMDX from "@next/mdx";
-import remarkGfm from "remark-gfm";
-import rehypeSlug from "rehype-slug";
-import rehypePrettyCode from "rehype-pretty-code";
 
-/** @type {import('rehype-pretty-code').Options} */
 const options = {
   theme: "ayu-dark",
   bypassInlineCode: false,
@@ -12,12 +8,11 @@ const options = {
 const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [[rehypePrettyCode, options], rehypeSlug],
+    remarkPlugins: ["remark-gfm"],
+    rehypePlugins: [["rehype-pretty-code", options], "rehype-slug"],
   },
 });
 
-/** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   reactStrictMode: true,

bun.lockb

@@ -3,33 +3,38 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.11",
+    "@next/mdx": "15.5.3",
     "@omsimos/react-highlight-popover": "*",
     "@types/mdx": "^2.0.13",
-    "next": "^14.2.11",
+    "next": "15.5.3",
     "nextjs-toploader": "^3.6.15",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",
-    "shiki": "^1.17.5"
+    "shiki": "^3.13.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5"
+  },
+  "overrides": {
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9"
   }
 }

docs/next.config.mjs docs/next.config.tsdocs/next.config.mjs renamed to docs/next.config.ts

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

docs/package.json

@@ -1,6 +1,6 @@
 export default function MdxLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="prose prose-zinc max-w-screen-md mx-auto py-24">
+    <div className="prose prose-zinc max-w-(--breakpoint-md) mx-auto py-24">
       {children}
     </div>
   );

docs/postcss.config.mjs

@@ -28,7 +28,7 @@ import { HighlightPopover } from '@omsimos/react-highlight-popover';
 
 function App() {
   const renderPopover = ({ selection }) => (
-    <div className="bg-white border rounded p-2 shadow-lg select-none">
+    <div className="bg-white border rounded-sm p-2 shadow-lg select-none">
       You selected: {selection}
     </div>
   );

docs/src/app/docs/layout.tsx

@@ -1,28 +1,50 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
-:root {
-  --background: #ffffff;
-  --foreground: #242424;
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-}
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-pre {
-  overflow-x: auto;
-  padding: 1rem 0;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
 }
 
-pre [data-line] {
-  padding: 0 1rem;
+@utility text-balance {
+  text-wrap: balance;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --background: #ffffff;
+    --foreground: #242424;
+  }
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+  }
+
+  pre {
+    overflow-x: auto;
+    padding: 1rem 0;
+  }
+
+  pre [data-line] {
+    padding: 0 1rem;
   }
 }

docs/src/app/docs/page.mdx

@@ -14,7 +14,7 @@ export default function Home() {
           Documentation
         </Link>
 
-        <div className="text-zinc-800 bg-zinc-50/50 rounded-lg shadow-sm border px-4 py-3 ">
+        <div className="text-zinc-800 bg-zinc-50/50 rounded-lg shadow-xs border px-4 py-3 ">
           <p>
             npm install{" "}
             <span className="font-semibold">