[pull] master from supabase:master

apps/design-system/.gitignore

@@ -39,3 +39,4 @@ next-env.d.ts
 
 # Generated by `pnpm generate:registry` (`scripts/build-registry.mts`)
 /__registry__
+.velite

apps/design-system/app/(app)/docs/[[...slug]]/page.tsx

@@ -9,14 +9,15 @@ import { absoluteUrl } from '@/lib/utils'
 import '@/styles/code-block-variables.css'
 import '@/styles/mdx.css'
 
-import { allDocs } from 'contentlayer/generated'
 import { ChevronRight } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import Balancer from 'react-wrap-balancer'
 import { ScrollArea, Separator } from 'ui'
 
+import { allDocs } from '@/.velite'
+
 interface DocPageProps {
   params: Promise<{
     slug: string[]
@@ -83,7 +84,7 @@ export default async function DocPage(props: DocPageProps) {
     notFound()
   }
 
-  const toc = await getTableOfContents(doc.body.raw)
+  const toc = await getTableOfContents(doc.raw)
   const breadcrumbSegments = getBreadcrumbSegments(doc)
 
   return (
@@ -128,7 +129,7 @@ export default async function DocPage(props: DocPageProps) {
         <Separator className="mb-6" />
         <SourcePanel doc={doc} />
         <div className="pb-12">
-          <Mdx code={doc.body.code} />
+          <Mdx code={doc.code} />
         </div>
         <DocsPager doc={doc} />
       </div>

apps/design-system/components/mdx-components.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useMDXComponent } from 'next-contentlayer2/hooks'
 import Image from 'next/image'
 import Link from 'next/link'
 import * as React from 'react'
@@ -43,6 +42,7 @@ import {
 import { Icons } from '@/components/icons'
 import { ThemeSettings } from '@/components/theme-settings'
 import { useConfig } from '@/hooks/use-config'
+import { useMDXComponent } from '@/lib/use-mdx-component'
 import { Style } from '@/registry/styles'
 
 const components = {

apps/design-system/components/pager.tsx

@@ -1,7 +1,7 @@
-import { Doc } from 'contentlayer/generated'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 
+import { Doc } from '@/.velite'
 import { docsConfig } from '@/config/docs'
 import { cn } from '@/lib/utils'
 import { NavItem, NavItemWithChildren } from '@/types/nav'

apps/design-system/components/source-panel.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { forwardRef } from 'react'
 import { Button, cn } from 'ui'
 
-import { Doc } from '@/.contentlayer/generated'
+import { Doc } from '@/.velite'
 
 const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & { doc: Doc }>(
   ({ doc, children, ...props }, ref) => {

apps/design-system/content/docs/components/card.mdx

@@ -4,8 +4,6 @@ description: Displays a card with header, content, and footer.
 component: true
 ---
 
-<ComponentPreview name="card-with-form" />
-
 ## Installation
 
 <Tabs defaultValue="cli">
@@ -65,7 +63,3 @@ import {
   </CardFooter>
 </Card>
 ```
-
-## Examples
-
-<ComponentPreview name="card-demo" peekCode wide />

apps/design-system/content/docs/components/carousel.mdx

@@ -7,8 +7,6 @@ links:
   api: https://www.embla-carousel.com/api
 ---
 
-<ComponentPreview name="carousel-demo" peekCode wide />
-
 ## About
 
 The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
@@ -42,7 +40,7 @@ npm install embla-carousel-react
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource name="carousel" />
+{/* <ComponentSource name="carousel" /> */}
 
 <Step>Update the import paths to match your project setup.</Step>
 
@@ -82,8 +80,6 @@ import {
 
 To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
 
-<ComponentPreview name="carousel-size" />
-
 ```tsx title="Example" showLineNumbers {4-6}
 // 33% of the carousel width.
 <Carousel>
@@ -120,8 +116,6 @@ You can always adjust this in your own project if you need to.
 
 </Callout>
 
-<ComponentPreview name="carousel-spacing" />
-
 ```tsx title="Example" showLineNumbers /-ml-4/ /pl-4/
 <Carousel>
   <CarouselContent className="-ml-4">
@@ -146,8 +140,6 @@ You can always adjust this in your own project if you need to.
 
 Use the `orientation` prop to set the orientation of the carousel.
 
-<ComponentPreview name="carousel-orientation" />
-
 ```tsx showLineNumbers /vertical | horizontal/
 <Carousel orientation="vertical | horizontal">
   <CarouselContent>
@@ -181,8 +173,6 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
 
 Use a state and the `setApi` props to get an instance of the carousel API.
 
-<ComponentPreview name="carousel-api" />
-
 ```tsx showLineNumbers {1,4,22}
 import { type CarouselApi } from '@/components/ui/carousel'
 
@@ -272,6 +262,4 @@ export function Example() {
 }
 ```
 
-<ComponentPreview name="carousel-plugin" />
-
 See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.

apps/design-system/content/docs/components/pagination.mdx

@@ -6,8 +6,6 @@ source:
   shadcn: true
 ---
 
-<ComponentPreview name="pagination-demo" peekCode wide />
-
 ## Installation
 
 <Tabs defaultValue="cli">
@@ -30,7 +28,7 @@ npx shadcn-ui@latest add pagination
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource name="pagination" />
+{/* <ComponentSource name="pagination" /> */}
 
 <Step>Update the import paths to match your project setup.</Step>