{faq.question}
+ +{faq.answer}
+
----
-
# Supabase
[Supabase](https://supabase.com) is an open source Firebase alternative. We're building the features of Firebase using enterprise-grade open source tools.
@@ -12,9 +10,9 @@
- [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
- [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
- [x] Auto-generated APIs.
- - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
- - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
- - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
+ - [x] REST. [Docs](https://supabase.com/docs/guides/api)
+ - [x] GraphQL. [Docs](https://supabase.com/docs/guides/graphql)
+ - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/realtime)
- [x] Functions.
- [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
- [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
@@ -24,6 +22,10 @@
+Watch "releases" of this repo to get notified of major updates.
+
+
+
## Documentation
For full documentation, visit [supabase.com/docs](https://supabase.com/docs)
@@ -37,19 +39,6 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)
- [Email Support](https://supabase.com/docs/support#business-support). Best for: problems with your database or infrastructure.
- [Discord](https://discord.supabase.com). Best for: sharing your applications and hanging out with the community.
-## Status
-
-- [x] Alpha: We are testing Supabase with a closed set of customers
-- [x] Public Alpha: Anyone can sign up over at [supabase.com/dashboard](https://supabase.com/dashboard). But go easy on us, there are a few kinks
-- [x] Public Beta: Stable enough for most non-enterprise use-cases
-- [ ] Public: General Availability [[status](https://supabase.com/docs/guides/getting-started/features#feature-status)]
-
-We are currently in Public Beta. Watch "releases" of this repo to get notified of major updates.
-
-
-
----
-
## How it works
Supabase is a combination of open source tools. We’re building the features of Firebase using enterprise-grade, open source products. If the tools and communities exist, with an MIT, Apache 2, or equivalent open license, we will use and support that tool. If the tool doesn't exist, we build and open source it ourselves. Supabase is not a 1-to-1 mapping of Firebase. Our aim is to give developers a Firebase-like developer experience using open source tools.
@@ -59,15 +48,15 @@ Supabase is a combination of open source tools. We’re building the features of
Supabase is a [hosted platform](https://supabase.com/dashboard). You can sign up and start using Supabase without installing anything.
You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and [develop locally](https://supabase.com/docs/guides/local-development).
-
+
-- [PostgreSQL](https://www.postgresql.org/) is an object-relational database system with over 30 years of active development that has earned it a strong reputation for reliability, feature robustness, and performance.
+- [Postgres](https://www.postgresql.org/) is an object-relational database system with over 30 years of active development that has earned it a strong reputation for reliability, feature robustness, and performance.
- [Realtime](https://github.com/supabase/realtime) is an Elixir server that allows you to listen to PostgreSQL inserts, updates, and deletes using websockets. Realtime polls Postgres' built-in replication functionality for database changes, converts changes to JSON, then broadcasts the JSON over websockets to authorized clients.
- [PostgREST](http://postgrest.org/) is a web server that turns your PostgreSQL database directly into a RESTful API
-- [pg_graphql](http://github.com/supabase/pg_graphql/) a PostgreSQL extension that exposes a GraphQL API
-- [Storage](https://github.com/supabase/storage-api) provides a RESTful interface for managing Files stored in S3, using Postgres to manage permissions.
-- [postgres-meta](https://github.com/supabase/postgres-meta) is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
- [GoTrue](https://github.com/supabase/gotrue) is a JWT based API for managing users and issuing JWT tokens.
+- [Storage](https://github.com/supabase/storage-api) provides a RESTful interface for managing Files stored in S3, using Postgres to manage permissions.
+- [pg_graphql](http://github.com/supabase/pg_graphql/) a PostgreSQL extension that exposes a GraphQL API
+- [postgres-meta](https://github.com/supabase/postgres-meta) is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
- [Kong](https://github.com/Kong/kong) is a cloud-native API gateway.
#### Client libraries
@@ -122,6 +111,15 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
+ {
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+ if (!user) {
+ snap.setLoginDialogOpen(true)
+ return false
+ }
+ return true
+ }}
+ placeholder="e.g Create a Telegram-like chat application"
+ />
+
+
+ )
+}
+
+export default NewThreadInput
diff --git a/apps/database-new/app/[thread_id]/[message_id]/BottomMarker.tsx b/apps/database-new/app/[thread_id]/[message_id]/BottomMarker.tsx
new file mode 100644
index 00000000000..1231218a54c
--- /dev/null
+++ b/apps/database-new/app/[thread_id]/[message_id]/BottomMarker.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { createRef, useEffect } from 'react'
+
+const BottomMarker = () => {
+ const ref = createRef
+ {children}
+
+ )
+}
+
+export { CodeEditorContainer }
diff --git a/apps/database-new/app/[thread_id]/[message_id]/MessageItem.tsx b/apps/database-new/app/[thread_id]/[message_id]/MessageItem.tsx
new file mode 100644
index 00000000000..18291f04464
--- /dev/null
+++ b/apps/database-new/app/[thread_id]/[message_id]/MessageItem.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import type { Message as MessageItem } from 'ai/react'
+import Link from 'next/link'
+import { useParams, usePathname } from 'next/navigation'
+import { cn } from 'ui'
+
+interface MessageItemProps {
+ message: MessageItem
+ isLatest: boolean
+ times: {
+ hoursFromNow: number
+ formattedTimeFromNow: string
+ formattedCreatedAt: string
+ }
+}
+
+const MessageItem = ({ message, isLatest, times }: MessageItemProps) => {
+ const { thread_id } = useParams()
+ // using the local state for run loading
+ const isLoading = false
+
+ const { hoursFromNow, formattedTimeFromNow, formattedCreatedAt } = times
+
+ // chat shown as selected when url matches
+ const isSelected = usePathname().includes(message.id)
+
+ return (
+
+
+
+
+ {isLoading && (
+
+
+
+ )}
+
+ {/* Node line*/}
+ {!isLatest && }
+
+
+
+
+
+ )
+}
+
+export default MessageItem
diff --git a/apps/database-new/app/[thread_id]/[message_id]/Messages.tsx b/apps/database-new/app/[thread_id]/[message_id]/Messages.tsx
new file mode 100644
index 00000000000..6954b2b1957
--- /dev/null
+++ b/apps/database-new/app/[thread_id]/[message_id]/Messages.tsx
@@ -0,0 +1,62 @@
+import { ScrollArea } from 'ui'
+
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { BottomMarker } from './BottomMarker'
+import { getMessages } from './getMessages'
+
+import MessageItem from './MessageItem'
+
+dayjs.extend(relativeTime)
+
+export const Messages = async ({ threadId }: { threadId: string }) => {
+ const { data: messages, error } = await getMessages(threadId)
+
+ if (error) {
+ return <>Error happened
+ }
+
+ const initialMessages = messages.flatMap((m) => [
+ {
+ id: m.message_id,
+ content: m.message_input,
+ role: 'user' as const,
+ createdAt: new Date(m.created_at),
+ },
+ {
+ id: m.message_id,
+ content: m.message_content,
+ role: 'assistant' as const,
+ createdAt: new Date(m.created_at),
+ },
+ ])
+
+ const userMessages = initialMessages.filter((m) => m.role === 'user')
+
+ return (
+
+
+
+
+
+ {isSelected && (
+
+
+ + {message.content} +
+ {isLoading && } ++ Sent {hoursFromNow > 6 ? `on ${formattedCreatedAt}` : formattedTimeFromNow} +
+ )} +
+ {userMessages.map((message, idx) => {
+ const createdAtTimestamp = dayjs(message.createdAt)
+ const isLatest = Array.isArray(messages) && idx === messages.length - 1
+
+ const hoursFromNow = dayjs().diff(createdAtTimestamp, 'hour')
+ const formattedTimeFromNow = dayjs(createdAtTimestamp).fromNow()
+
+ const formattedCreatedAt = dayjs(createdAtTimestamp).format('DD MMM YYYY, HH:mm')
+
+ const times = {
+ hoursFromNow,
+ formattedTimeFromNow,
+ formattedCreatedAt,
+ }
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/database-new/app/actions.ts b/apps/database-new/app/actions.ts
new file mode 100644
index 00000000000..d680c2f6a64
--- /dev/null
+++ b/apps/database-new/app/actions.ts
@@ -0,0 +1,234 @@
+'use server'
+
+import { createClient } from '@/lib/supabase/server'
+import { Message } from 'ai'
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+import { z } from 'zod'
+
+export async function logout() {
+ const supabase = createClient()
+
+ const { error } = await supabase.auth.signOut()
+
+ if (error) {
+ console.log('Error logging out:', error.message)
+ return
+ }
+
+ revalidatePath('/', 'layout')
+ redirect('/')
+}
+
+//export async function createThread(prevState: any, formData: FormData) {
+export async function createThread(input: string, message: Message, currentThread?: string) {
+ const supabase = createClient()
+
+ let thread_id = currentThread ?? ''
+ let message_id = ''
+
+ try {
+ const {
+ data: { user },
+ error: userError,
+ } = await supabase.auth.getUser()
+
+ if (userError || !user) {
+ return {
+ success: false,
+ message: 'Failed to get user',
+ data: undefined,
+ }
+ }
+
+ // create a new thread
+ if (!thread_id) {
+ try {
+ const { data, error } = await supabase
+ .from('threads')
+ .insert({ user_id: user.id, thread_title: input })
+ .select()
+
+ if (error) throw error
+
+ if (data) {
+ console.log({ data })
+ thread_id = data[0].id
+ // message_id = data[0].message_id
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ //insert the message from the completion
+ try {
+ const { data, error } = await supabase
+ .from('messages')
+ .insert({
+ thread_id,
+ message_content: message.content,
+ message_input: input,
+ message_role: 'assistant',
+ user_id: user.id,
+ })
+ .select()
+
+ if (error) throw error
+ if (data) {
+ message_id = data[0].message_id
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ } catch (error: any) {
+ console.error(error)
+ return {
+ success: false,
+ message: 'Failed to update title to update title',
+ data: undefined,
+ }
+ }
+ redirect(`/${thread_id}/${message_id}`)
+}
+
+export async function upsertThreadMessage(input: string, currentThread?: string) {
+ const supabase = createClient()
+
+ let thread_id = currentThread ?? ''
+ let message_id = ''
+
+ try {
+ const {
+ data: { user },
+ error: userError,
+ } = await supabase.auth.getUser()
+
+ if (userError || !user) {
+ return {
+ success: false,
+ message: 'Failed to get user',
+ data: undefined,
+ }
+ }
+
+ // create a new thread
+ if (!thread_id) {
+ try {
+ const { data, error } = await supabase
+ .from('threads')
+ .insert({ user_id: user.id, thread_title: input })
+ .select()
+
+ if (error) throw error
+
+ if (data) {
+ console.log({ data })
+ thread_id = data[0].id
+ // message_id = data[0].message_id
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ //insert the message from the completion
+ try {
+ const { data, error } = await supabase
+ .from('messages')
+ .insert({
+ thread_id,
+ message_content: '',
+ message_input: input,
+ message_role: 'assistant',
+ user_id: user.id,
+ })
+ .select()
+
+ if (error) throw error
+ if (data) {
+ message_id = data[0].message_id
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ } catch (error: any) {
+ console.error(error)
+ return {
+ success: false,
+ message: 'Failed to update title to update title',
+ data: undefined,
+ }
+ }
+ redirect(`/${thread_id}/${message_id}`)
+}
+
+export async function deleteThread(prevState: any, formData: FormData) {
+ const supabase = createClient()
+
+ try {
+ const schema = z.object({
+ thread_id: z.string(),
+ })
+
+ const data = schema.parse({
+ thread_id: formData.get('thread_id'),
+ })
+
+ await supabase.from('threads').delete().eq('id', data.thread_id)
+
+ revalidatePath('/profile')
+
+ return {
+ success: true,
+ data,
+ }
+ } catch (error: any) {
+ console.error(error)
+ return {
+ success: false,
+ message: 'Failed to delete the thread',
+ data: undefined,
+ }
+ }
+}
+
+export async function updateThreadName(prevState: any, formData: FormData) {
+ const supabase = createClient()
+
+ try {
+ const schema = z.object({
+ thread_title: z.string(),
+ thread_id: z.string(),
+ })
+
+ const data = schema.parse({
+ thread_title: formData.get('thread_title'),
+ thread_id: formData.get('thread_id'),
+ })
+
+ const { error } = await supabase
+ .from('threads')
+ .update({ thread_title: data.thread_title })
+ .eq('id', data.thread_id)
+ if (error) {
+ throw error
+ }
+ revalidatePath('/profile')
+
+ return {
+ message: 'Thread name updated to ' + data.thread_title,
+ success: true,
+ data,
+ }
+ } catch (error: any) {
+ console.error(error)
+ return {
+ success: false,
+ message: 'Failed to update title to update title',
+ data: undefined,
+ }
+ }
+}
diff --git a/apps/database-new/app/auth/callback/route.ts b/apps/database-new/app/auth/callback/route.ts
new file mode 100644
index 00000000000..6790b4af710
--- /dev/null
+++ b/apps/database-new/app/auth/callback/route.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+import { createClient } from '@/lib/supabase/server'
+
+export async function GET(request: Request) {
+ // The `/auth/callback` route is required for the server-side auth flow implemented
+ // by the Auth Helpers package. It exchanges an auth code for the user's session.
+ // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
+ const requestUrl = new URL(request.url)
+ const code = requestUrl.searchParams.get('code')
+
+ if (code) {
+ const supabase = createClient()
+ await supabase.auth.exchangeCodeForSession(code)
+ }
+
+ // URL to redirect to after sign in process completes
+ return NextResponse.redirect(requestUrl.origin)
+}
diff --git a/apps/database-new/app/faq/page.tsx b/apps/database-new/app/faq/page.tsx
new file mode 100644
index 00000000000..ae38bd7cba9
--- /dev/null
+++ b/apps/database-new/app/faq/page.tsx
@@ -0,0 +1,39 @@
+import { FAQS, faq } from '@/data/faqs'
+import { slugify } from '@/lib/utils'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+ title: 'database.design | Faq',
+}
+
+const FAQ = async () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FAQ
diff --git a/apps/database-new/app/favicon.ico b/apps/database-new/app/favicon.ico
new file mode 100644
index 00000000000..718d6fea483
Binary files /dev/null and b/apps/database-new/app/favicon.ico differ
diff --git a/apps/database-new/app/globals.css b/apps/database-new/app/globals.css
new file mode 100644
index 00000000000..11c393d6b2d
--- /dev/null
+++ b/apps/database-new/app/globals.css
@@ -0,0 +1,199 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import '~ui/build/css/source/global.css';
+@import '~ui/build/css/themes/dark.css';
+@import '~ui/build/css/themes/light.css';
+
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-Book.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-Book.woff) format('woff');
+ font-weight: 400;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-BookItalic.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-BookItalic.woff) format('woff');
+ font-weight: 400;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-Medium.woff) format('woff');
+ font-weight: 500;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-MediumItalic.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-MediumItalic.woff) format('woff');
+ font-weight: 500;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-Bold.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-Bold.woff) format('woff');
+ font-weight: 700;
+ font-style: 600;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-BoldItalic.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-BoldItalic.woff) format('woff');
+ font-style: 600;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-Black.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-Black.woff) format('woff');
+ font-weight: 800;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'circular';
+ src:
+ url(/fonts/custom/CustomFont-BlackItalic.woff2) format('woff2'),
+ url(/fonts/custom/CustomFont-BlackItalic.woff) format('woff');
+ font-weight: 800;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: 'source code pro';
+ src: url('/fonts/source-code-pro/SourceCodePro-Regular.eot');
+ src:
+ url('/fonts/source-code-pro/SourceCodePro-Regular.woff2') format('woff2'),
+ url('/fonts/source-code-pro/SourceCodePro-Regular.woff') format('woff'),
+ url('/fonts/source-code-pro/SourceCodePro-Regular.ttf') format('truetype'),
+ url('/fonts/source-code-pro/SourceCodePro-Regular.svg#SourceCodePro-Regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+html,
+body,
+main {
+ /* @apply bg-background;
+ @apply text-foreground;
+ height: 100%;
+ width: 100%; */
+ padding: 0;
+ margin: 0;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+
+.chat-shimmering-loader {
+ animation: shimmer 1.5s infinite linear;
+ background: linear-gradient(
+ to right,
+ hsl(var(--background-default)) 0%,
+ hsl(var(--brand-default)) 25%,
+ hsl(var(--brand-300)) 35%,
+ hsl(var(--background-default)) 45%,
+ hsl(var(--background-surface-100)) 75%
+ );
+ background-size: 3000px 100%;
+}
+
+.shimmering-loader {
+ animation: shimmer 2s infinite linear;
+ background: linear-gradient(
+ to right,
+ hsl(var(--border-default)) 4%,
+ hsl(var(--background-surface-200)) 25%,
+ hsl(var(--border-default)) 36%
+ );
+ background-size: 1000px 100%;
+}
+
+.dark .shimmering-loader {
+ animation: shimmer 2s infinite linear;
+ background: linear-gradient(
+ to right,
+ hsl(var(--border-default)) 4%,
+ hsl(var(--border-control)) 25%,
+ hsl(var(--border-default)) 36%
+ );
+ background-size: 1000px 100%;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+.monaco-editor,
+.monaco-diff-editor {
+ --vscode-editor-background: hsl(var(--background-alternative)) !important;
+ --vscode-editorGutter-background: hsl(var(--background-alternative)) !important;
+ padding-top: 12px;
+}
+
+/* .monaco-editor .overflow-guard */
+
+.shimmering-loader {
+ animation: shimmer 2s infinite linear;
+ background: linear-gradient(
+ to right,
+ hsl(var(--border-default)) 4%,
+ hsl(var(--background-surface-100)) 25%,
+ hsl(var(--border-default)) 36%
+ );
+ background-size: 1000px 100%;
+}
+
+.dark .shimmering-loader {
+ animation: shimmer 2s infinite linear;
+ background: linear-gradient(
+ to right,
+ hsl(var(--background-surface-100)) 4%,
+ hsl(var(--border-default)) 25%,
+ hsl(var(--background-surface-100)) 36%
+ );
+ background-size: 1000px 100%;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+.fade-in {
+ opacity: 0;
+ animation-name: fadeIn;
+ animation-duration: 500ms;
+ animation-timing-function: ease-in-out;
+ animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
diff --git a/apps/database-new/app/layout.tsx b/apps/database-new/app/layout.tsx
new file mode 100644
index 00000000000..2935c8b68ea
--- /dev/null
+++ b/apps/database-new/app/layout.tsx
@@ -0,0 +1,37 @@
+import '@ui/layout/ai-icon-animation/ai-icon-animation-style.module.css'
+import './globals.css'
+
+import Footer from '@/components/Footer'
+import Header from '@/components/Header/Header'
+import { ThemeProvider } from '@/components/providers'
+import type { Metadata } from 'next'
+import { LoadingLine } from './LoadingLine'
+
+const defaultUrl = process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : 'http://localhost:3000'
+
+export const metadata: Metadata = {
+ metadataBase: new URL(defaultUrl),
+ title: 'database.design',
+ description: 'Generate schemas from your ideas',
+}
+
+// suppressHydrationWarning:
+// https://github.com/pacocoursey/next-themes#with-app
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+
+ + Frequently Asked Questions +
++ Everything you have ever wondered about database.design +
+
+ {FAQS.map((faq: faq, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ )
+}
+
+export default EmptyState
diff --git a/apps/database-new/app/profile/Thread.tsx b/apps/database-new/app/profile/Thread.tsx
new file mode 100644
index 00000000000..d876d11bb78
--- /dev/null
+++ b/apps/database-new/app/profile/Thread.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { timeAgo } from '@/lib/utils'
+import Link from 'next/link'
+import { useState } from 'react'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ IconEdit2,
+ IconMoreVertical,
+ IconTrash2,
+} from 'ui'
+import ConfirmDeleteThreadModal from './ConfirmDeleteThreadModal'
+import EditThreadModal from './EditThreadModal'
+import { ThreadType } from './Threads'
+
+const Thread = ({ thread }: { thread: ThreadType }) => {
+ const { created_at, thread_id, thread_title } = thread
+ const formattedTimeAgo = timeAgo(created_at!)
+
+ const [editOpen, setEditOpen] = useState(false)
+ const [deleteOpen, setDeleteOpen] = useState(false)
+
+ return (
+ <>
+ No conversations created yet
+ +
+
+
+
+ {thread_title}
+
+
+ Last updated {formattedTimeAgo}
+
+
+
+
+
+
+
+
+ {
+ console.log('trying to edit thread')
+ setEditOpen(true)
+ }}
+ >
+
+ setDeleteOpen(true)}>
+
+
+
+
+ Edit name
+Delete thread
+Error fetching user details
+ + const { data } = await supabase + .from('profile_threads') + .select() + .eq('user_id', user.id) + .order('created_at', { ascending: false }) + const threads = data ?? [] + + return ( +
+ {threads.length > 0 ? (
+ threads
+ .sort()
+ .map((thread) =>
+ )
+}
+
+export default Threads
diff --git a/apps/database-new/app/profile/layout.tsx b/apps/database-new/app/profile/layout.tsx
new file mode 100644
index 00000000000..89d3d8e6058
--- /dev/null
+++ b/apps/database-new/app/profile/layout.tsx
@@ -0,0 +1,3 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return {children}
+}
diff --git a/apps/database-new/app/profile/page.tsx b/apps/database-new/app/profile/page.tsx
new file mode 100644
index 00000000000..96046ff681e
--- /dev/null
+++ b/apps/database-new/app/profile/page.tsx
@@ -0,0 +1,81 @@
+import { createClient } from '@/lib/supabase/server'
+import { default as dayjs, default as relativeTime } from 'dayjs'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import Threads from './Threads'
+import { Suspense } from 'react'
+import ShimmeringLoader from '@/components/Shimmer'
+import type { Metadata } from 'next'
+
+dayjs.extend(relativeTime)
+export const metadata: Metadata = {
+ title: 'database.design | Profile',
+}
+
+// revalidatePath not working in the create route handler
+// force-dynamic to refetch every time if needed
+// just a hack for now
+// export const dynamic = 'force-dynamic'
+
+const Profile = async () => {
+ return (
+
+
+
+ )
+}
+
+async function ProfileDetails() {
+ const supabase = createClient()
+
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
+
+ if (!user) redirect('/')
+
+ return !user ? (
+ // make this better!
+
+
+
+
+ Loading user...}>
+
+
+
+
+
+ }
+ >
+ Past conversations
+ + + +No user found
+ ) : ( + <> + +
+
+
+ )
+}
+
+export default Profile
diff --git a/apps/database-new/components/AllThreadsModal/AllThreadsModal.constants.ts b/apps/database-new/components/AllThreadsModal/AllThreadsModal.constants.ts
new file mode 100644
index 00000000000..f194beb54a5
--- /dev/null
+++ b/apps/database-new/components/AllThreadsModal/AllThreadsModal.constants.ts
@@ -0,0 +1,2 @@
+export const NODE_WIDTH = 700
+export const NODE_HEIGHT = 200
diff --git a/apps/database-new/components/AllThreadsModal/AllThreadsModal.tsx b/apps/database-new/components/AllThreadsModal/AllThreadsModal.tsx
new file mode 100644
index 00000000000..ad988bf4164
--- /dev/null
+++ b/apps/database-new/components/AllThreadsModal/AllThreadsModal.tsx
@@ -0,0 +1,127 @@
+// 'use client'
+
+// import { useQuery } from '@tanstack/react-query'
+// import { Modal } from 'ui'
+// import { useParams } from 'next/navigation'
+// import { AssistantMessage, ReadThreadAPIResult, UserMessage } from '@/lib/types'
+// import { useEffect, useMemo } from 'react'
+// import { sortBy } from 'lodash'
+// import ReactFlow, {
+// Background,
+// BackgroundVariant,
+// ReactFlowProvider,
+// useReactFlow,
+// MiniMap,
+// } from 'reactflow'
+// import { getGraphDataFromMessages } from './AllThreadsModal.utils'
+// import MessageNode from './MessageNode'
+
+// interface AllThreadsProps {
+// visible: boolean
+// onClose: () => void
+// onSelectMessage: (messageId: string, replyId: string) => void
+// }
+
+// // [Joshen] POC idea for forking/branching - not for phase 1
+
+// const AllThreads = ({ visible, onClose, onSelectMessage }: AllThreadsProps) => {
+// const params = useParams()
+// const reactFlowInstance = useReactFlow()
+// const nodeTypes = useMemo(() => ({ message: MessageNode }), [])
+
+// // [Joshen] Scaffolding a query cause im presuming we need a different endpoint to retrieve _all_ threads
+// const { data, isSuccess } = useQuery{user.user_metadata.full_name}
+@{user.user_metadata.user_name}
+
+//
+//
+//
+// onSelectMessage()}
+// >
+//
+// {!isEnd && (
+// {id}
+//{text}
+//
+
+ )
+}
+
+export default ChatLoadingAnimation
diff --git a/apps/database-new/components/AssistantChatForm/ChatSuggestions.tsx b/apps/database-new/components/AssistantChatForm/ChatSuggestions.tsx
new file mode 100644
index 00000000000..d38d09f5fbe
--- /dev/null
+++ b/apps/database-new/components/AssistantChatForm/ChatSuggestions.tsx
@@ -0,0 +1,31 @@
+import { CHAT_EXAMPLES } from '@/data/chat-examples'
+import { cn } from '@ui/lib/utils/cn'
+import { ExternalLink } from 'lucide-react'
+
+export const ChatSuggestions = ({ setInput }: { setInput: (s: string) => void }) => {
+ const suggestions = CHAT_EXAMPLES
+ return (
+ {currentText}
+
+ {suggestions.map((suggestion, idx) => (
+
+ ))}
+
+ )
+}
diff --git a/apps/database-new/components/AssistantChatForm/action.ts b/apps/database-new/components/AssistantChatForm/action.ts
new file mode 100644
index 00000000000..546532e2e45
--- /dev/null
+++ b/apps/database-new/components/AssistantChatForm/action.ts
@@ -0,0 +1,10 @@
+'use server'
+
+import { upsertThreadMessage } from '@/app/actions'
+
+export async function upsertMessageFormAction(formData: FormData) {
+ const threadId = formData.get('threadId') as string | undefined
+ const prompt = formData.get('prompt') as string
+
+ return upsertThreadMessage(prompt, threadId)
+}
diff --git a/apps/database-new/components/AssistantChatForm/index.tsx b/apps/database-new/components/AssistantChatForm/index.tsx
new file mode 100644
index 00000000000..df77176b4cd
--- /dev/null
+++ b/apps/database-new/components/AssistantChatForm/index.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import { Loader2 } from 'lucide-react'
+import { useParams } from 'next/navigation'
+import { ChangeEvent, FormHTMLAttributes, ReactNode, forwardRef, useRef } from 'react'
+import { useFormStatus } from 'react-dom'
+import { TextArea_Shadcn_, cn } from 'ui'
+
+import { ChatSuggestions } from './ChatSuggestions'
+import { upsertMessageFormAction } from './action'
+
+export interface FormProps extends FormHTMLAttributes
+ {pending && (
+
+ )
+ }
+)
+
+SubmitButton.displayName = 'SubmitButton'
+
+interface AssistantChatFormProps {
+ chatContext: string
+ placeholder: string
+ canSubmit?: () => Promise
+
+
+ )
+}
diff --git a/apps/database-new/components/Footer.tsx b/apps/database-new/components/Footer.tsx
new file mode 100644
index 00000000000..c6d8cdb8665
--- /dev/null
+++ b/apps/database-new/components/Footer.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import ThemeSwitcher from './Header/ThemeSwitcher'
+
+export const links = [
+ { title: ` © Supabase`, url: 'https://supabase.com/' },
+ { title: 'FAQs', url: '/faq' },
+ { title: 'Open Source', url: 'https://supabase.com/open-source' },
+ { title: 'Privacy Settings', url: 'https://supabase.com/privacy' },
+]
+
+const Footer = () => (
+
+)
+
+export default Footer
diff --git a/apps/database-new/components/Header/AvatarDropdown.tsx b/apps/database-new/components/Header/AvatarDropdown.tsx
new file mode 100644
index 00000000000..93ac5737b52
--- /dev/null
+++ b/apps/database-new/components/Header/AvatarDropdown.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { logout } from '@/app/actions'
+import { User } from '@supabase/supabase-js'
+import { HelpCircle, LogOut } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, IconUser } from 'ui'
+
+interface AvatarDropdownProps {
+ user: User
+}
+
+export default function AvatarDropdown({ user }: AvatarDropdownProps) {
+ return (
+ <>
+
+
+ {user.user_metadata.full_name}
+{user.user_metadata.email}
+Profile
+FAQs
+Supabase
+
+ {segment && segment.includes('thread') && (
+
+ )
+}
+
+export default HeaderActions
diff --git a/apps/database-new/components/Header/NoUserDropdown.tsx b/apps/database-new/components/Header/NoUserDropdown.tsx
new file mode 100644
index 00000000000..b7e5c3b6729
--- /dev/null
+++ b/apps/database-new/components/Header/NoUserDropdown.tsx
@@ -0,0 +1,32 @@
+import { LogIn } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { DropdownMenuItem, DropdownMenuSeparator } from 'ui'
+
+const NoUserDropdown = () => {
+ return (
+ <>
+
+
+ )}
+
+
+
+
+
+
+ Sign in to database.design to save your database
+ designs!
+
+ Sign in
+Supabase
+Copy SQL
+Download SQL
+Load SQL in Supabase
+
+
+ )
+}
+
+export default GraphLoader
+
+const LineNumbers = () => {
+ const lines = [1, 2, 3, 4, 5, 6]
+ return (
+
+
+
+
+
+
+
+ {lines.map((line) => (
+ {line}
+ ))}
+
+ )
+}
diff --git a/apps/database-new/components/Loaders/SchemaLoader.tsx b/apps/database-new/components/Loaders/SchemaLoader.tsx
new file mode 100644
index 00000000000..c8abf5ae796
--- /dev/null
+++ b/apps/database-new/components/Loaders/SchemaLoader.tsx
@@ -0,0 +1,14 @@
+import { Loader2 } from 'lucide-react'
+
+const SchemaLoader = () => {
+ return (
+
+
+ )
+}
+
+export default SchemaLoader
diff --git a/apps/database-new/components/MonacoEditor/CodeEditor.utils.ts b/apps/database-new/components/MonacoEditor/CodeEditor.utils.ts
new file mode 100644
index 00000000000..493ae713ea0
--- /dev/null
+++ b/apps/database-new/components/MonacoEditor/CodeEditor.utils.ts
@@ -0,0 +1,20 @@
+export const getTheme = (theme: string) => {
+ const isDarkMode = theme.includes('dark')
+
+ return {
+ base: isDarkMode ? 'vs-dark' : 'vs', // can also be vs-dark or hc-black
+ inherit: true, // can also be false to completely replace the builtin rules
+ rules: [
+ { token: '', background: isDarkMode ? '1f1f1f' : 'f0f0f0' },
+ {
+ token: '',
+ background: isDarkMode ? '1f1f1f' : 'f0f0f0',
+ foreground: isDarkMode ? 'd4d4d4' : '444444',
+ },
+ { token: 'string.sql', foreground: '24b47e' },
+ { token: 'comment', foreground: '666666' },
+ { token: 'predefined.sql', foreground: isDarkMode ? 'D4D4D4' : '444444' },
+ ],
+ colors: { 'editor.background': isDarkMode ? '#1f1f1f' : '#f0f0f0' },
+ }
+}
diff --git a/apps/database-new/components/MonacoEditor/index.tsx b/apps/database-new/components/MonacoEditor/index.tsx
new file mode 100644
index 00000000000..f7cf4421cc4
--- /dev/null
+++ b/apps/database-new/components/MonacoEditor/index.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import Editor, { BeforeMount, EditorProps } from '@monaco-editor/react'
+import { merge } from 'lodash'
+
+interface MonacoEditorProps {
+ id: string
+ language: 'pgsql' | 'json' | 'html'
+ autofocus?: boolean
+ defaultValue?: string
+ isReadOnly?: boolean
+ onInputChange?: (value?: string) => void
+ onInputRun?: (value: string) => void
+ hideLineNumbers?: boolean
+ loading?: boolean
+ options?: EditorProps['options']
+ value?: string
+}
+
+const MonacoEditor = ({
+ id,
+ language,
+ defaultValue,
+ hideLineNumbers = false,
+ options,
+ value,
+}: MonacoEditorProps) => {
+ // const monacoRef = useRef
+
+
+ {
+ instance.fitView()
+ }}
+ >
+ {mounted && (
+
+
+
+ )
+}
+
+const ExportedSchemaGraph = ({ content }: SchemaGraphProps) => {
+ return (
+
+
+)
+
+export { GenericSkeletonLoader }
+export default ShimmeringLoader
diff --git a/apps/database-new/components/providers.tsx b/apps/database-new/components/providers.tsx
new file mode 100644
index 00000000000..e87743ca16a
--- /dev/null
+++ b/apps/database-new/components/providers.tsx
@@ -0,0 +1,11 @@
+'use client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { PropsWithChildren } from 'react'
+
+const queryClient = new QueryClient()
+
+export function ReactQueryProvider({ children }: PropsWithChildren) {
+ return
+
+ {doc.toc && (
+
+
+ Docs
+ {doc.title}
+
+
+ {doc.title}
+ {doc.description && ( +
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {/* main content */}
+
+ {/* {children} */}
+
+
+
+
+
+
+ {children}
+
+
+
+
+ {/*
+
+ {/* Homepage items */}
+
+
+
*/}
+
+
+ Supabase Design System
++ Design resources for building consistent user experiences +
+
+
+
+
+
+
+
+
+
+ Atom components
+Building blocks of User interfaces
+
+
+
+
+
+
+ Fragment components
+Components assembled from Atoms
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Colors
+Building blocks of User interfaces
+
+
+
+
+
+
+
+ Theming
+Components assembled from Atoms
+
+
+
+
+
+ Icons
+Components assembled from Atoms
+
+
+ {children}
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+ Code fragment{' '}
+
+ {name}
+ {' '}
+ not found in registry.
+
+ Loading...
+ }
+ >
+ {Preview}
+
+
+
+ )
+ }, [Preview, align])
+
+ const wideClasses = wide ? '2xl:-ml-12 2xl:-mr-12' : ''
+
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/components/colors.tsx b/apps/design-system/components/colors.tsx
new file mode 100644
index 00000000000..e1d63267d0f
--- /dev/null
+++ b/apps/design-system/components/colors.tsx
@@ -0,0 +1,155 @@
+import { cn } from 'ui/src/lib/utils/cn'
+// import { Card } from '@ui/components/shadcn/ui/card'
+import color from 'ui/src/lib/tailwind-demo-classes'
+import { Grid, GridItem } from './grid'
+
+const Colors = ({
+ definition,
+}: {
+ definition: 'background' | 'border' | 'text' | 'colors' | 'palletes'
+}) => {
+ const Example = ({ x }: { x: string }) => {
+ switch (definition) {
+ case 'background':
+ return (
+
+ )
+ break
+
+ case 'border':
+ return
+ break
+
+ case 'text':
+ return (
+
+ Postgres
+
+ )
+ break
+
+ case 'colors':
+ return (
+
+ )
+ break
+
+ case 'palletes':
+ return (
+
+ )
+ break
+
+ default:
+ break
+ }
+ }
+
+ return (
+ <>
+
+ {showGrid && (
+
+ )}
+ {showDottedGrid && (
+
+ )}
+
+ {ComponentPreview}
+
+
*/
+}
+
+export { Colors }
diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx
new file mode 100644
index 00000000000..1276f2db264
--- /dev/null
+++ b/apps/design-system/components/command-menu.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { DialogProps } from '@radix-ui/react-alert-dialog'
+import { CircleIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { docsConfig } from '@/config/docs'
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import {
+ CommandDialog,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ CommandSeparator_Shadcn_,
+} from 'ui'
+
+export function CommandMenu({ ...props }: DialogProps) {
+ const router = useRouter()
+ const [open, setOpen] = React.useState(false)
+ const { setTheme } = useTheme()
+
+ React.useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+ if (
+ (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+ e.target instanceof HTMLInputElement ||
+ e.target instanceof HTMLTextAreaElement ||
+ e.target instanceof HTMLSelectElement
+ ) {
+ return
+ }
+
+ e.preventDefault()
+ setOpen((open) => !open)
+ }
+ }
+
+ document.addEventListener('keydown', down)
+ return () => document.removeEventListener('keydown', down)
+ }, [])
+
+ const runCommand = React.useCallback((command: () => unknown) => {
+ setOpen(false)
+ command()
+ }, [])
+
+ return (
+ <>
+
+
+
+
+
+ Background
+
+ {color.background.map((x: string, i) => {
+ return (
+
+
+
+
+ )
+ })}
+
+ {x}
+
+
+
+ Border
+
+ {color.border.map((x, i) => {
+ return (
+
+
+
+
+ )
+ })}
+
+ {x}
+
+
+
+ texts
+
+ {color.text.map((x, i) => {
+ return (
+
+
+
+ ###
+
+
+ )
+ })}
+
+ {x}
+
+
+
+
+
+ Colors
+
+ {color.colors.map((x: string, i) => {
+ return (
+
+
+
+
+ )
+ })}
+
+ {x}
+
+
+
+ Palletes
+
+ {color.palletes.map((x, i) => {
+ return (
+
+
+
+
+ )
+ })}
+
+ {x}
+
+
+
+ {navItem.title}
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/components/component-preview.tsx b/apps/design-system/components/component-preview.tsx
new file mode 100644
index 00000000000..c1304ec5986
--- /dev/null
+++ b/apps/design-system/components/component-preview.tsx
@@ -0,0 +1,258 @@
+'use client'
+
+import * as React from 'react'
+import { Index } from '@/__registry__'
+
+import {
+ Button,
+ CollapsibleContent_Shadcn_,
+ CollapsibleTrigger_Shadcn_,
+ Collapsible_Shadcn_,
+ cn,
+} from 'ui'
+import { useConfig } from '@/hooks/use-config'
+import {
+ // CopyButton,
+ CopyWithClassNames,
+} from '@/components/copy-button'
+// import { Icons } from '@/components/icons'
+// import { StyleSwitcher } from '@/components/style-switcher'
+// import { ThemeWrapper } from '@/components/theme-wrapper'
+import {
+ Tabs_Shadcn_ as Tabs,
+ TabsContent_Shadcn_ as TabsContent,
+ TabsList_Shadcn_ as TabsList,
+ TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+
+// import { LoaderCircle } from 'lucide-react'
+
+import { styles } from '@/registry/styles'
+import { ChevronRight, Expand } from 'lucide-react'
+
+interface ComponentPreviewProps extends React.HTMLAttributes
+
+
+ Preview
+
+
+ Code
+
+
+ {
+ extractedClassNames ? (
+
+
+ {Example}
+
+
+
+
+ {Code}
+
+ {Children?.length ? (
+
+ {Children}
+
+ ) : null}
+
+ Component{' '}
+
+ {name}
+ {' '}
+ not found in registry.
+
+
+ {/*
+ }
+ >
+ {Preview}
+
+
+ {/*
+
+ )
+ }
+
+ return (
+
+ {showGrid && (
+
+ )}
+ {showDottedGrid && (
+
+ )}
+
+ {ComponentPreview}
+ {/* */}
+
+
+
+ {Code}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+ return (
+
+ {showGrid && (
+
+ )}
+ {showDottedGrid && (
+
+ )}
+
+ {ComponentPreview}
+ {/* */}
+
+ {Code}
+
+
+
+
+ {ComponentPreview}
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/components/component-props.tsx b/apps/design-system/components/component-props.tsx
new file mode 100644
index 00000000000..de41a1ac42e
--- /dev/null
+++ b/apps/design-system/components/component-props.tsx
@@ -0,0 +1,58 @@
+import fs from 'fs'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+// import { parse } from 'react-docgen'
+
+export function ComponentProps(props: any) {
+ // map through all props types for this component DropdownMenu
+ // return a table with the prop name, type, default value, and description
+
+ // const code = `
+ // /** My first component */
+ // export default ({ name }: { name: string }) =>
+
+
+ Preview
+
+
+ Code
+
+
+
+
+
+
+ {Code}
+
+ {{name}}
;
+ // `
+
+ // const documentation = parse(code)
+ //
+ // console.log(documentation)
+
+ // console.log('from the component props', JSON.parse(props.docs))
+
+ const docs = JSON.parse(props.docs)
+
+ // console.log(docs.props)
+
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/design-system/components/component-source.tsx b/apps/design-system/components/component-source.tsx
new file mode 100644
index 00000000000..c63d4e49313
--- /dev/null
+++ b/apps/design-system/components/component-source.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from 'ui'
+import { CodeBlockWrapper } from '@/components/code-block-wrapper'
+
+interface ComponentSourceProps extends React.HTMLAttributes{props.children}
+ +
+ {children}
+
+ )
+ }
+)
+
+Grid.displayName = 'Grid'
+
+const GridItem = forwardRef
+
+ {children}
+
+ )
+ }
+)
+
+GridItem.displayName = 'GridItem'
+
+export { Grid, GridItem }
diff --git a/apps/design-system/components/homepage-svg-handler.tsx b/apps/design-system/components/homepage-svg-handler.tsx
new file mode 100644
index 00000000000..e359eb0e83b
--- /dev/null
+++ b/apps/design-system/components/homepage-svg-handler.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import SVG from 'react-inlinesvg'
+import { useTheme } from 'next-themes'
+
+const HomepageSvgHandler = ({ name }: { name: string }) => {
+ const { resolvedTheme } = useTheme()
+
+ return (
+
+
+
+ )
+}
+
+export { HomepageSvgHandler }
diff --git a/apps/design-system/components/icons.tsx b/apps/design-system/components/icons.tsx
new file mode 100644
index 00000000000..8642a9d17c4
--- /dev/null
+++ b/apps/design-system/components/icons.tsx
@@ -0,0 +1,70 @@
+import { Index } from 'icons/__registry__/index'
+import { Copy } from 'lucide-react'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ IconCopy,
+} from 'ui'
+import { Grid, GridItem } from './grid'
+
+function Icons() {
+ return (
+ <>
+ + ), + table: ({ className, ...props }: React.HTMLAttributes
+
+
+ ),
+ tr: ({ className, ...props }: React.HTMLAttributes
+
+ )
+}
diff --git a/apps/design-system/components/pager.tsx b/apps/design-system/components/pager.tsx
new file mode 100644
index 00000000000..9dd476b33d2
--- /dev/null
+++ b/apps/design-system/components/pager.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link'
+import { Doc } from 'contentlayer/generated'
+import { NavItem, NavItemWithChildren } from '@/types/nav'
+
+import { docsConfig } from '@/config/docs'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from 'ui'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface DocsPagerProps {
+ doc: Doc
+}
+
+export function DocsPager({ doc }: DocsPagerProps) {
+ const pager = getPagerForDoc(doc)
+
+ if (!pager) {
+ return null
+ }
+
+ return (
+
+ {pager?.prev?.href && (
+
+
+ )
+}
+
+export function getPagerForDoc(doc: Doc) {
+ const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
+ const activeIndex = flattenedLinks.findIndex((link) => doc.slug === link?.href)
+ const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
+ const next = activeIndex !== flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null
+ return {
+ prev,
+ next,
+ }
+}
+
+export function flatten(links: NavItemWithChildren[]): NavItem[] {
+ return links
+ .reduce
+
+ Previous
+
+ {pager.prev.title}
+
+
+ )}
+ {pager?.next?.href && (
+
+
+
+ Next
+
+ {pager.next.title}
+
+
+
+ )
+ }
+ }
+
+ const VaulPanel = () => {
+ if (doc.source?.vaul) {
+ return (
+
+
+ shadcn/ui
+
+
+ This component is based on ui.shadcn
+
+
+
+ )
+ }
+ }
+
+ const ReactAccesibleTreeViewPanel = () => {
+ if (doc.source?.reactAccessibleTreeview) {
+ return (
+
+
+
+ This component is based on vaul by emilkowalski
+
+
+
+ )
+ }
+ }
+
+ const InputOtp = () => {
+ if (doc.source?.inputOtp) {
+ return (
+
+
+ {doc.links ? (
+
+ {doc.links?.doc && (
+ }
+ >
+
+ Docs
+
+
+ )}
+ {doc.links?.api && (
+ }
+ >
+
+ API Reference
+
+
+ )}
+
+ ) : null}
+
+
+ )
+ }
+ }
+
+ const RadixPanel = () => {
+ if (doc.source?.radix) {
+ return (
+
+
+
+ This component is based on input-otp by guilhermerodz
+
+
+
+
+ )
+ }
+ }
+
+ return (
+
+ This component uses Radix UI
+ {doc.links ? (
+
+
+ {doc.links?.doc && (
+ }
+ >
+
+ Docs
+
+
+ )}
+ {doc.links?.api && (
+ }
+ >
+
+ API Reference
+
+
+ )}
+
+ ) : null}
+
+
+ )
+ }
+)
+
+SourcePanel.displayName = 'SourcePanel'
+
+export { SourcePanel }
diff --git a/apps/design-system/components/style-wrapper.tsx b/apps/design-system/components/style-wrapper.tsx
new file mode 100644
index 00000000000..4937cad099e
--- /dev/null
+++ b/apps/design-system/components/style-wrapper.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import * as React from 'react'
+
+import { useConfig } from '@/hooks/use-config'
+import { Style } from '@/registry/styles'
+
+interface StyleWrapperProps extends React.HTMLAttributes
+
+ )
+}
+
+function useActiveItem(itemIds: string[]) {
+ const [activeId, setActiveId] = React.useState(null)
+
+ React.useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ setActiveId(entry.target.id)
+ }
+ })
+ },
+ { rootMargin: `0% 0% -80% 0%` }
+ )
+
+ itemIds?.forEach((id) => {
+ const element = document.getElementById(id)
+ if (element) {
+ observer.observe(element)
+ }
+ })
+
+ return () => {
+ itemIds?.forEach((id) => {
+ const element = document.getElementById(id)
+ if (element) {
+ observer.unobserve(element)
+ }
+ })
+ }
+ }, [itemIds])
+
+ return activeId
+}
+
+interface TreeProps {
+ tree: TableOfContents
+ level?: number
+ activeItem?: string
+}
+
+function Tree({ tree, level = 1, activeItem }: TreeProps) {
+ return tree?.items?.length && level < 3 ? (
+ On This Page
+-
+ {tree.items.map((item, index) => {
+ return (
+
-
+
+ {item.title}
+
+ {item.items?.length ? (
+
+ ) : null} +
+ )
+ })}
+
+
+
+
+```
diff --git a/apps/design-system/content/docs/components/atom-components.mdx b/apps/design-system/content/docs/components/atom-components.mdx
new file mode 100644
index 00000000000..8952b428085
--- /dev/null
+++ b/apps/design-system/content/docs/components/atom-components.mdx
@@ -0,0 +1,4 @@
+---
+title: Atom components
+description:
+---
diff --git a/apps/design-system/content/docs/components/avatar.mdx b/apps/design-system/content/docs/components/avatar.mdx
new file mode 100644
index 00000000000..f6fda6a3d8b
--- /dev/null
+++ b/apps/design-system/content/docs/components/avatar.mdx
@@ -0,0 +1,64 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+component: true
+links:
+ doc: https://www.radix-ui.com/docs/primitives/components/avatar
+ api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
+source:
+ radix: true
+ shadcn: true
+---
+
+Card Content
+Card Footer
+
+
+
+
+ )
+}
+```
+
+
+
+ )
+}
+```
+
+Amount
,
+ cell: ({ row }) => {
+ const amount = parseFloat(row.getValue('amount'))
+ const formatted = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(amount)
+
+ return {formatted}
+ },
+ },
+]
+```
+
+You can use the same approach to format other cells and headers.
+
+
+
+ )
+}
+```
+
+See [Reusable Components](#reusable-components) section for a more advanced pagination component.
+
+
+
+ { // .... }
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+### Make header cell sortable
+
+We can now update the `email` header cell to add sorting controls.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4,9-19}
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react'
+
+export const columns: ColumnDef
+ { ... }
+
+
+
+ )
+}
+```
+
+Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters.
+
+
+
+ table.getColumn("email")?.setFilterValue(event.target.value)
+ }
+ className="max-w-sm"
+ />
+
+
+ { ... }
+
+
+
+ )
+}
+```
+
+This adds a dropdown menu that you can use to toggle column visibility.
+
+
+
+ table.getColumn("email")?.setFilterValue(event.target.value)
+ }
+ className="max-w-sm"
+ />
+
+
+
+
+
+ {table
+ .getAllColumns()
+ .filter(
+ (column) => column.getCanHide()
+ )
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ )
+ })}
+
+
+
+
+ { ... }
+
+
+
+ )
+}
+```
+
+This adds a checkbox to each row and a checkbox in the header to select all rows.
+
+### Show selected rows
+
+You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
+
+```tsx
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{' '}
+ row(s) selected.
+
+```
+
+
+
+
+
+Add to library
+
+ I have the same color background as the left example
+
+```
+
+## Opacity support
+
+All the colors are generated using tailwind opacity, like `hsl(--background-default) / var(--tw-bg-opacity)`.
+This means all the color options in our themes can support opacity rules. For example:
+
+```jsx
+
+
+
+
+
+
+
+```
+
+## Usage
+
+The following tailwind classes are a combination of tailwind utilities and our primitives. They're under development and are likely to change but most are now in use and will probably be permanent fixtures.
+
+### Foreground (Text)
+
+| Value | Usage |
+| ---------------------- | -------------------------------------- |
+| `foreground-{DEFAULT}` | Default text (**DEFAULT** is optional) |
+| `foreground-light` | Light text |
+| `foreground-lighter` | Lighter text |
+| `foreground-muted` | Muted text |
+
+Examples:
+
+```jsx
+/div>
+
/div>
+
/div>
+
/div>
+
/div>
+```
+
+---
+
+### Background
+
+| Value | Usage |
+| ----------------------------- | ------------------------------------------------------------ |
+| `background-{DEFAULT}` | Main body background (**DEFAULT** is optional) |
+| `background-surface-100` | Panels and surfaces on the same level of the main background |
+| `background-surface-200` | Surfaces that overlap the main content (ex. dropdowns) |
+| `background-surface-300` | Surfaces that are stacked above background-surface-200 |
+| `background-alternative` | Alternative background (inverted) |
+| `background-overlay` | Overlays, Dropdowns, Popovers |
+| `background-control` | Inputs, Radios, Checkboxes |
+| `background-button-{DEFAULT}` | Button default |
+
+The `background` part can be omitted when used on the `bg` tailwind utility.
+
+Examples:
+
+```
+bg-surface-100
+bg-overlay
+bg-alternative
+text-background-surface-100
+```
+
+---
+
+### Border
+
+| Value | Usage |
+| ------------------------- | ---------------------------------------- |
+| `border-{DEFAULT}` | Default border (**DEFAULT** is optional) |
+| `border-secondary` | Secondary border |
+| `border-alternative` | Alternative border (inverted) |
+| `border-overlay` | Overlays, Dropdowns, Popovers |
+| `border-control` | Inputs, Radios, Checkboxes |
+| `border-strong` | Hover, Focus |
+| `border-stronger` | Highlighted border |
+| `border-button-{DEFAULT}` | Button default border |
+| `border-button-hover` | Button default border hover |
+
+Examples:
+
+```
+border-overlay
+border-alternative
+text-border-control
+```
+
+### Brand
+
+| Value |
+| --------- |
+| `200` |
+| `300` |
+| `400` |
+| `500` |
+| `DEFAULT` |
+| `600` |
+| `button` |
+
+### Destructive
+
+| Value |
+| --------- |
+| `200` |
+| `300` |
+| `400` |
+| `500` |
+| `DEFAULT` |
+| `600` |
+
+### Warning
+
+| Value |
+| --------- |
+| `200` |
+| `300` |
+| `400` |
+| `500` |
+| `DEFAULT` |
+| `600` |
+
+## Storybook
+
+The current colors are also auto documented in Storybook
+
+[Storybook Colors](https://ui-storybook-pre-release.vercel.app/)
diff --git a/apps/design-system/content/docs/theming.mdx b/apps/design-system/content/docs/theming.mdx
new file mode 100644
index 00000000000..91b144803c9
--- /dev/null
+++ b/apps/design-system/content/docs/theming.mdx
@@ -0,0 +1,30 @@
+---
+title: Themes
+description: Themes used in Supabase
+---
+
+Design System currently takes into account varying themes.
+
+Themes currently in development:
+
+- Light
+- Dark (Classic dark)
+- Deep dark
+
+We also support a system theme, which will automatically switch between light and dark themes based on the user's system settings.
+
+- System
+
+## Try a theme
+
+You can set the theme of this website using the radio buttons below
+
+('config', {
+ style: 'default',
+ // backendProvider: 'nextjs-auth',
+ theme: 'zinc',
+ radius: 0.5,
+})
+
+export function useConfig() {
+ return useAtom(configAtom)
+}
diff --git a/apps/design-system/hooks/use-media-query.tsx b/apps/design-system/hooks/use-media-query.tsx
new file mode 100644
index 00000000000..1f02308ba76
--- /dev/null
+++ b/apps/design-system/hooks/use-media-query.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export function useMediaQuery(query: string) {
+ const [value, setValue] = React.useState(false)
+
+ React.useEffect(() => {
+ function onChange(event: MediaQueryListEvent) {
+ setValue(event.matches)
+ }
+
+ const result = matchMedia(query)
+ result.addEventListener('change', onChange)
+ setValue(result.matches)
+
+ return () => result.removeEventListener('change', onChange)
+ }, [query])
+
+ return value
+}
diff --git a/apps/design-system/hooks/use-mounted.ts b/apps/design-system/hooks/use-mounted.ts
new file mode 100644
index 00000000000..13256dce0c1
--- /dev/null
+++ b/apps/design-system/hooks/use-mounted.ts
@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export function useMounted() {
+ const [mounted, setMounted] = React.useState(false)
+
+ React.useEffect(() => {
+ setMounted(true)
+ }, [])
+
+ return mounted
+}
diff --git a/apps/design-system/lib/rehype-component.ts b/apps/design-system/lib/rehype-component.ts
new file mode 100644
index 00000000000..adc038328ea
--- /dev/null
+++ b/apps/design-system/lib/rehype-component.ts
@@ -0,0 +1,406 @@
+import fs from 'fs'
+import path from 'path'
+import { UnistNode, UnistTree } from 'types/unist'
+import { u } from 'unist-builder'
+import { visit } from 'unist-util-visit'
+
+import { Index } from '../__registry__'
+import { styles } from '../registry/styles'
+
+// import { parse } from 'react-docgen'
+
+// import * as reactDocgenTypescript from 'react-docgen-typescript'
+
+// import { Column, IColumnProps } from './sample-component'
+import React from 'react' // ComponentType
+
+function inspectComponentProps(component: React.ComponentType): void {
+ // Assert the component's props type
+ const defaultProps = (component as React.ComponentType).defaultProps || {}
+
+ // console.log('Component props:')
+ // console.log('----------------')
+
+ for (const propName in defaultProps) {
+ const propType = typeof defaultProps[propName]
+ console.log(`${propName}: ${propType}`)
+ }
+}
+
+export function rehypeComponent() {
+ return async (tree: UnistTree) => {
+ visit(tree, (node: UnistNode) => {
+ // src prop overrides both name and fileName.
+ const { value: srcPath, name: componentName } =
+ (getNodeAttributeByName(node, 'src') as {
+ name: string
+ value?: string
+ type?: string
+ }) || {}
+
+ // console.log(srcPath, componentName)
+
+ // inspectComponentProps(Column)
+
+ // console.log('NEW NODE: ', node.name)
+
+ // if (node.name === 'ComponentProps') {
+ // // Parse a file for docgen info
+ // const options = {
+ // // savePropValueAsString: true,
+ // }
+
+ // // const parser = reactDocgenTypescript.parse('./sample-component.tsx', options)
+
+ // // console.log('PARSER', parser)
+
+ // const code = `
+ // /** My first component */
+ // export default ({ name, title }: {
+ // /** My first component */
+ // name: string,
+ // /** My first component */
+ // title: string
+ // }) => {
+ render() {
+ return {
+ const result = await remark().use(getToc).process(content)
+
+ return result.data
+}
diff --git a/apps/design-system/lib/utils.ts b/apps/design-system/lib/utils.ts
new file mode 100644
index 00000000000..8be9377c7ea
--- /dev/null
+++ b/apps/design-system/lib/utils.ts
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
+
+export function formatDate(input: string | number): string {
+ const date = new Date(input)
+ return date.toLocaleDateString('en-US', {
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ })
+}
+
+export function absoluteUrl(path: string) {
+ return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+}
diff --git a/apps/design-system/next.config.mjs b/apps/design-system/next.config.mjs
new file mode 100644
index 00000000000..3c67b4ac18e
--- /dev/null
+++ b/apps/design-system/next.config.mjs
@@ -0,0 +1,39 @@
+import { withContentlayer } from 'next-contentlayer2'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ transpilePackages: ['ui', 'common', 'shared-data', 'icons', 'tsconfig'],
+ basePath: process.env.NEXT_PUBLIC_BASE_PATH || '/design-system',
+ images: {
+ remotePatterns: [
+ {
+ protocol: 'https',
+ hostname: 'avatars.githubusercontent.com',
+ },
+ {
+ protocol: 'https',
+ hostname: 'images.unsplash.com',
+ },
+ {
+ protocol: 'https',
+ hostname: 'pbs.twimg.com',
+ },
+ ],
+ },
+ async redirects() {
+ return [
+ ...(process.env.NEXT_PUBLIC_BASE_PATH?.length
+ ? [
+ {
+ source: '/',
+ destination: process.env.NEXT_PUBLIC_BASE_PATH,
+ basePath: false,
+ permanent: false,
+ },
+ ]
+ : []),
+ ]
+ },
+}
+
+export default withContentlayer(nextConfig)
diff --git a/apps/design-system/package.json b/apps/design-system/package.json
new file mode 100644
index 00000000000..bdd27eba449
--- /dev/null
+++ b/apps/design-system/package.json
@@ -0,0 +1,58 @@
+{
+ "name": "design-system",
+ "version": "0.1.0",
+ "private": true,
+ "type": "module",
+ "scripts": {
+ "dev": "next dev --port 3003",
+ "build": "npm run content:build && npm run build:registry && next build",
+ "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
+ "start": "next start",
+ "lint": "next lint",
+ "content:build": "contentlayer2 build",
+ "typecheck": "contentlayer2 build && tsc --noEmit -p tsconfig.json"
+ },
+ "dependencies": {
+ "@radix-ui/react-alert-dialog": "^1.0.5",
+ "contentlayer2": "0.4.5",
+ "eslint-config-supabase": "*",
+ "fs": "^0.0.1-security",
+ "jotai": "^2.8.0",
+ "lodash.template": "4.5.0",
+ "lucide-react": "^0.338.0",
+ "markdown-wasm": "^1.2.0",
+ "next": "^14.2.3",
+ "next-contentlayer2": "0.4.5",
+ "react": "^18.2.0",
+ "react-docgen": "^7.0.3",
+ "react-dom": "^18.2.0",
+ "react-inlinesvg": "^4.0.4",
+ "react-wrap-balancer": "^1.1.0",
+ "rehype-autolink-headings": "^7.1.0",
+ "rehype-pretty-code": "^0.6.0",
+ "rehype-slug": "^6.0.0",
+ "remark": "^14.0.3",
+ "remark-code-import": "^1.2.0",
+ "remark-gfm": "^4.0.0",
+ "ts-morph": "^22.0.0",
+ "ui": "*",
+ "unist-util-visit": "^5.0.0"
+ },
+ "devDependencies": {
+ "@shikijs/compat": "^1.1.7",
+ "@types/lodash.template": "4.5.0",
+ "@types/node": "^20",
+ "@types/react": "^18.2.65",
+ "@types/react-dom": "^18.2.22",
+ "autoprefixer": "^10.0.1",
+ "config": "*",
+ "mdast-util-toc": "^6.1.1",
+ "postcss": "^8",
+ "rimraf": "^4.1.3",
+ "shiki": "^1.1.7",
+ "tailwindcss": "^3.3.0",
+ "tsconfig": "*",
+ "typescript": "^5",
+ "unist-builder": "3.0.0"
+ }
+}
diff --git a/apps/design-system/postcss.config.cjs b/apps/design-system/postcss.config.cjs
new file mode 100644
index 00000000000..12a703d900d
--- /dev/null
+++ b/apps/design-system/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/apps/design-system/public/img/design-system-marks/atoms-illustration--deep-dark.svg b/apps/design-system/public/img/design-system-marks/atoms-illustration--deep-dark.svg
new file mode 100644
index 00000000000..fae400998e3
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/atoms-illustration--deep-dark.svg
@@ -0,0 +1,100 @@
+
diff --git a/apps/design-system/public/img/design-system-marks/atoms-illustration--light.svg b/apps/design-system/public/img/design-system-marks/atoms-illustration--light.svg
new file mode 100644
index 00000000000..a2189389763
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/atoms-illustration--light.svg
@@ -0,0 +1,100 @@
+
diff --git a/apps/design-system/public/img/design-system-marks/design-system-marks--dark.svg b/apps/design-system/public/img/design-system-marks/design-system-marks--dark.svg
new file mode 100644
index 00000000000..928eafbfc38
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/design-system-marks--dark.svg
@@ -0,0 +1,61 @@
+
diff --git a/apps/design-system/public/img/design-system-marks/design-system-marks--light.svg b/apps/design-system/public/img/design-system-marks/design-system-marks--light.svg
new file mode 100644
index 00000000000..26fff33c64f
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/design-system-marks--light.svg
@@ -0,0 +1,61 @@
+
diff --git a/apps/design-system/public/img/design-system-marks/fragments-illustration--deep-dark.svg b/apps/design-system/public/img/design-system-marks/fragments-illustration--deep-dark.svg
new file mode 100644
index 00000000000..01331d3d8de
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/fragments-illustration--deep-dark.svg
@@ -0,0 +1,104 @@
+
diff --git a/apps/design-system/public/img/design-system-marks/fragments-illustration--light.svg b/apps/design-system/public/img/design-system-marks/fragments-illustration--light.svg
new file mode 100644
index 00000000000..e65e5c2e91a
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/fragments-illustration--light.svg
@@ -0,0 +1,104 @@
+
diff --git a/apps/design-system/public/img/themes/dark.svg b/apps/design-system/public/img/themes/dark.svg
new file mode 100644
index 00000000000..ea74324a835
--- /dev/null
+++ b/apps/design-system/public/img/themes/dark.svg
@@ -0,0 +1,39 @@
+
diff --git a/apps/design-system/public/img/themes/deep-dark.svg b/apps/design-system/public/img/themes/deep-dark.svg
new file mode 100644
index 00000000000..05bab64b78d
--- /dev/null
+++ b/apps/design-system/public/img/themes/deep-dark.svg
@@ -0,0 +1,39 @@
+
diff --git a/apps/design-system/public/img/themes/light.svg b/apps/design-system/public/img/themes/light.svg
new file mode 100644
index 00000000000..0ef07743552
--- /dev/null
+++ b/apps/design-system/public/img/themes/light.svg
@@ -0,0 +1,39 @@
+
diff --git a/apps/design-system/public/img/themes/system.svg b/apps/design-system/public/img/themes/system.svg
new file mode 100644
index 00000000000..386cd717702
--- /dev/null
+++ b/apps/design-system/public/img/themes/system.svg
@@ -0,0 +1,62 @@
+
diff --git a/apps/design-system/public/next.svg b/apps/design-system/public/next.svg
new file mode 100644
index 00000000000..5174b28c565
--- /dev/null
+++ b/apps/design-system/public/next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/design-system/public/vercel.svg b/apps/design-system/public/vercel.svg
new file mode 100644
index 00000000000..d2f84222734
--- /dev/null
+++ b/apps/design-system/public/vercel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/design-system/registry/.eslintrc.json b/apps/design-system/registry/.eslintrc.json
new file mode 100644
index 00000000000..6579e1b264d
--- /dev/null
+++ b/apps/design-system/registry/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+ "$schema": "https://json.schemastore.org/eslintrc",
+ "rules": {
+ "react/no-unescaped-entities": "off"
+ }
+}
diff --git a/apps/design-system/registry/colors.ts b/apps/design-system/registry/colors.ts
new file mode 100644
index 00000000000..2589cf4f69f
--- /dev/null
+++ b/apps/design-system/registry/colors.ts
@@ -0,0 +1,1556 @@
+export const colors = {
+ inherit: 'inherit',
+ current: 'currentColor',
+ transparent: 'transparent',
+ black: {
+ hex: '#000000',
+ rgb: 'rgb(0,0,0)',
+ hsl: 'hsl(0,0%,0%)',
+ },
+ white: {
+ hex: '#ffffff',
+ rgb: 'rgb(255,255,255)',
+ hsl: 'hsl(0,0%,100%)',
+ },
+ slate: [
+ {
+ scale: 50,
+ hex: '#f8fafc',
+ rgb: 'rgb(248,250,252)',
+ hsl: 'hsl(210,40%,98%)',
+ },
+ {
+ scale: 100,
+ hex: '#f1f5f9',
+ rgb: 'rgb(241,245,249)',
+ hsl: 'hsl(210,40%,96.1%)',
+ },
+ {
+ scale: 200,
+ hex: '#e2e8f0',
+ rgb: 'rgb(226,232,240)',
+ hsl: 'hsl(214.3,31.8%,91.4%)',
+ },
+ {
+ scale: 300,
+ hex: '#cbd5e1',
+ rgb: 'rgb(203,213,225)',
+ hsl: 'hsl(212.7,26.8%,83.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#94a3b8',
+ rgb: 'rgb(148,163,184)',
+ hsl: 'hsl(215,20.2%,65.1%)',
+ },
+ {
+ scale: 500,
+ hex: '#64748b',
+ rgb: 'rgb(100,116,139)',
+ hsl: 'hsl(215.4,16.3%,46.9%)',
+ },
+ {
+ scale: 600,
+ hex: '#475569',
+ rgb: 'rgb(71,85,105)',
+ hsl: 'hsl(215.3,19.3%,34.5%)',
+ },
+ {
+ scale: 700,
+ hex: '#334155',
+ rgb: 'rgb(51,65,85)',
+ hsl: 'hsl(215.3,25%,26.7%)',
+ },
+ {
+ scale: 800,
+ hex: '#1e293b',
+ rgb: 'rgb(30,41,59)',
+ hsl: 'hsl(217.2,32.6%,17.5%)',
+ },
+ {
+ scale: 900,
+ hex: '#0f172a',
+ rgb: 'rgb(15,23,42)',
+ hsl: 'hsl(222.2,47.4%,11.2%)',
+ },
+ {
+ scale: 950,
+ hex: '#020617',
+ rgb: 'rgb(2,6,23)',
+ hsl: 'hsl(222.2,84%,4.9%)',
+ },
+ ],
+ gray: [
+ {
+ scale: 50,
+ hex: '#f9fafb',
+ rgb: 'rgb(249,250,251)',
+ hsl: 'hsl(210,20%,98%)',
+ },
+ {
+ scale: 100,
+ hex: '#f3f4f6',
+ rgb: 'rgb(243,244,246)',
+ hsl: 'hsl(220,14.3%,95.9%)',
+ },
+ {
+ scale: 200,
+ hex: '#e5e7eb',
+ rgb: 'rgb(229,231,235)',
+ hsl: 'hsl(220,13%,91%)',
+ },
+ {
+ scale: 300,
+ hex: '#d1d5db',
+ rgb: 'rgb(209,213,219)',
+ hsl: 'hsl(216,12.2%,83.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#9ca3af',
+ rgb: 'rgb(156,163,175)',
+ hsl: 'hsl(217.9,10.6%,64.9%)',
+ },
+ {
+ scale: 500,
+ hex: '#6b7280',
+ rgb: 'rgb(107,114,128)',
+ hsl: 'hsl(220,8.9%,46.1%)',
+ },
+ {
+ scale: 600,
+ hex: '#4b5563',
+ rgb: 'rgb(75,85,99)',
+ hsl: 'hsl(215,13.8%,34.1%)',
+ },
+ {
+ scale: 700,
+ hex: '#374151',
+ rgb: 'rgb(55,65,81)',
+ hsl: 'hsl(216.9,19.1%,26.7%)',
+ },
+ {
+ scale: 800,
+ hex: '#1f2937',
+ rgb: 'rgb(31,41,55)',
+ hsl: 'hsl(215,27.9%,16.9%)',
+ },
+ {
+ scale: 900,
+ hex: '#111827',
+ rgb: 'rgb(17,24,39)',
+ hsl: 'hsl(220.9,39.3%,11%)',
+ },
+ {
+ scale: 950,
+ hex: '#030712',
+ rgb: 'rgb(3,7,18)',
+ hsl: 'hsl(224,71.4%,4.1%)',
+ },
+ ],
+ zinc: [
+ {
+ scale: 50,
+ hex: '#fafafa',
+ rgb: 'rgb(250,250,250)',
+ hsl: 'hsl(0,0%,98%)',
+ },
+ {
+ scale: 100,
+ hex: '#f4f4f5',
+ rgb: 'rgb(244,244,245)',
+ hsl: 'hsl(240,4.8%,95.9%)',
+ },
+ {
+ scale: 200,
+ hex: '#e4e4e7',
+ rgb: 'rgb(228,228,231)',
+ hsl: 'hsl(240,5.9%,90%)',
+ },
+ {
+ scale: 300,
+ hex: '#d4d4d8',
+ rgb: 'rgb(212,212,216)',
+ hsl: 'hsl(240,4.9%,83.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#a1a1aa',
+ rgb: 'rgb(161,161,170)',
+ hsl: 'hsl(240,5%,64.9%)',
+ },
+ {
+ scale: 500,
+ hex: '#71717a',
+ rgb: 'rgb(113,113,122)',
+ hsl: 'hsl(240,3.8%,46.1%)',
+ },
+ {
+ scale: 600,
+ hex: '#52525b',
+ rgb: 'rgb(82,82,91)',
+ hsl: 'hsl(240,5.2%,33.9%)',
+ },
+ {
+ scale: 700,
+ hex: '#3f3f46',
+ rgb: 'rgb(63,63,70)',
+ hsl: 'hsl(240,5.3%,26.1%)',
+ },
+ {
+ scale: 800,
+ hex: '#27272a',
+ rgb: 'rgb(39,39,42)',
+ hsl: 'hsl(240,3.7%,15.9%)',
+ },
+ {
+ scale: 900,
+ hex: '#18181b',
+ rgb: 'rgb(24,24,27)',
+ hsl: 'hsl(240,5.9%,10%)',
+ },
+ {
+ scale: 950,
+ hex: '#09090b',
+ rgb: 'rgb(9,9,11)',
+ hsl: 'hsl(240,10%,3.9%)',
+ },
+ ],
+ neutral: [
+ {
+ scale: 50,
+ hex: '#fafafa',
+ rgb: 'rgb(250,250,250)',
+ hsl: 'hsl(0,0%,98%)',
+ },
+ {
+ scale: 100,
+ hex: '#f5f5f5',
+ rgb: 'rgb(245,245,245)',
+ hsl: 'hsl(0,0%,96.1%)',
+ },
+ {
+ scale: 200,
+ hex: '#e5e5e5',
+ rgb: 'rgb(229,229,229)',
+ hsl: 'hsl(0,0%,89.8%)',
+ },
+ {
+ scale: 300,
+ hex: '#d4d4d4',
+ rgb: 'rgb(212,212,212)',
+ hsl: 'hsl(0,0%,83.1%)',
+ },
+ {
+ scale: 400,
+ hex: '#a3a3a3',
+ rgb: 'rgb(163,163,163)',
+ hsl: 'hsl(0,0%,63.9%)',
+ },
+ {
+ scale: 500,
+ hex: '#737373',
+ rgb: 'rgb(115,115,115)',
+ hsl: 'hsl(0,0%,45.1%)',
+ },
+ {
+ scale: 600,
+ hex: '#525252',
+ rgb: 'rgb(82,82,82)',
+ hsl: 'hsl(0,0%,32.2%)',
+ },
+ {
+ scale: 700,
+ hex: '#404040',
+ rgb: 'rgb(64,64,64)',
+ hsl: 'hsl(0,0%,25.1%)',
+ },
+ {
+ scale: 800,
+ hex: '#262626',
+ rgb: 'rgb(38,38,38)',
+ hsl: 'hsl(0,0%,14.9%)',
+ },
+ {
+ scale: 900,
+ hex: '#171717',
+ rgb: 'rgb(23,23,23)',
+ hsl: 'hsl(0,0%,9%)',
+ },
+ {
+ scale: 950,
+ hex: '#0a0a0a',
+ rgb: 'rgb(10,10,10)',
+ hsl: 'hsl(0,0%,3.9%)',
+ },
+ ],
+ stone: [
+ {
+ scale: 50,
+ hex: '#fafaf9',
+ rgb: 'rgb(250,250,249)',
+ hsl: 'hsl(60,9.1%,97.8%)',
+ },
+ {
+ scale: 100,
+ hex: '#f5f5f4',
+ rgb: 'rgb(245,245,244)',
+ hsl: 'hsl(60,4.8%,95.9%)',
+ },
+ {
+ scale: 200,
+ hex: '#e7e5e4',
+ rgb: 'rgb(231,229,228)',
+ hsl: 'hsl(20,5.9%,90%)',
+ },
+ {
+ scale: 300,
+ hex: '#d6d3d1',
+ rgb: 'rgb(214,211,209)',
+ hsl: 'hsl(24,5.7%,82.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#a8a29e',
+ rgb: 'rgb(168,162,158)',
+ hsl: 'hsl(24,5.4%,63.9%)',
+ },
+ {
+ scale: 500,
+ hex: '#78716c',
+ rgb: 'rgb(120,113,108)',
+ hsl: 'hsl(25,5.3%,44.7%)',
+ },
+ {
+ scale: 600,
+ hex: '#57534e',
+ rgb: 'rgb(87,83,78)',
+ hsl: 'hsl(33.3,5.5%,32.4%)',
+ },
+ {
+ scale: 700,
+ hex: '#44403c',
+ rgb: 'rgb(68,64,60)',
+ hsl: 'hsl(30,6.3%,25.1%)',
+ },
+ {
+ scale: 800,
+ hex: '#292524',
+ rgb: 'rgb(41,37,36)',
+ hsl: 'hsl(12,6.5%,15.1%)',
+ },
+ {
+ scale: 900,
+ hex: '#1c1917',
+ rgb: 'rgb(28,25,23)',
+ hsl: 'hsl(24,9.8%,10%)',
+ },
+ {
+ scale: 950,
+ hex: '#0c0a09',
+ rgb: 'rgb(12,10,9)',
+ hsl: 'hsl(20,14.3%,4.1%)',
+ },
+ ],
+ red: [
+ {
+ scale: 50,
+ hex: '#fef2f2',
+ rgb: 'rgb(254,242,242)',
+ hsl: 'hsl(0,85.7%,97.3%)',
+ },
+ {
+ scale: 100,
+ hex: '#fee2e2',
+ rgb: 'rgb(254,226,226)',
+ hsl: 'hsl(0,93.3%,94.1%)',
+ },
+ {
+ scale: 200,
+ hex: '#fecaca',
+ rgb: 'rgb(254,202,202)',
+ hsl: 'hsl(0,96.3%,89.4%)',
+ },
+ {
+ scale: 300,
+ hex: '#fca5a5',
+ rgb: 'rgb(252,165,165)',
+ hsl: 'hsl(0,93.5%,81.8%)',
+ },
+ {
+ scale: 400,
+ hex: '#f87171',
+ rgb: 'rgb(248,113,113)',
+ hsl: 'hsl(0,90.6%,70.8%)',
+ },
+ {
+ scale: 500,
+ hex: '#ef4444',
+ rgb: 'rgb(239,68,68)',
+ hsl: 'hsl(0,84.2%,60.2%)',
+ },
+ {
+ scale: 600,
+ hex: '#dc2626',
+ rgb: 'rgb(220,38,38)',
+ hsl: 'hsl(0,72.2%,50.6%)',
+ },
+ {
+ scale: 700,
+ hex: '#b91c1c',
+ rgb: 'rgb(185,28,28)',
+ hsl: 'hsl(0,73.7%,41.8%)',
+ },
+ {
+ scale: 800,
+ hex: '#991b1b',
+ rgb: 'rgb(153,27,27)',
+ hsl: 'hsl(0,70%,35.3%)',
+ },
+ {
+ scale: 900,
+ hex: '#7f1d1d',
+ rgb: 'rgb(127,29,29)',
+ hsl: 'hsl(0,62.8%,30.6%)',
+ },
+ {
+ scale: 950,
+ hex: '#450a0a',
+ rgb: 'rgb(69,10,10)',
+ hsl: 'hsl(0,74.7%,15.5%)',
+ },
+ ],
+ orange: [
+ {
+ scale: 50,
+ hex: '#fff7ed',
+ rgb: 'rgb(255,247,237)',
+ hsl: 'hsl(33.3,100%,96.5%)',
+ },
+ {
+ scale: 100,
+ hex: '#ffedd5',
+ rgb: 'rgb(255,237,213)',
+ hsl: 'hsl(34.3,100%,91.8%)',
+ },
+ {
+ scale: 200,
+ hex: '#fed7aa',
+ rgb: 'rgb(254,215,170)',
+ hsl: 'hsl(32.1,97.7%,83.1%)',
+ },
+ {
+ scale: 300,
+ hex: '#fdba74',
+ rgb: 'rgb(253,186,116)',
+ hsl: 'hsl(30.7,97.2%,72.4%)',
+ },
+ {
+ scale: 400,
+ hex: '#fb923c',
+ rgb: 'rgb(251,146,60)',
+ hsl: 'hsl(27,96%,61%)',
+ },
+ {
+ scale: 500,
+ hex: '#f97316',
+ rgb: 'rgb(249,115,22)',
+ hsl: 'hsl(24.6,95%,53.1%)',
+ },
+ {
+ scale: 600,
+ hex: '#ea580c',
+ rgb: 'rgb(234,88,12)',
+ hsl: 'hsl(20.5,90.2%,48.2%)',
+ },
+ {
+ scale: 700,
+ hex: '#c2410c',
+ rgb: 'rgb(194,65,12)',
+ hsl: 'hsl(17.5,88.3%,40.4%)',
+ },
+ {
+ scale: 800,
+ hex: '#9a3412',
+ rgb: 'rgb(154,52,18)',
+ hsl: 'hsl(15,79.1%,33.7%)',
+ },
+ {
+ scale: 900,
+ hex: '#7c2d12',
+ rgb: 'rgb(124,45,18)',
+ hsl: 'hsl(15.3,74.6%,27.8%)',
+ },
+ {
+ scale: 950,
+ hex: '#431407',
+ rgb: 'rgb(67,20,7)',
+ hsl: 'hsl(13,81.1%,14.5%)',
+ },
+ ],
+ amber: [
+ {
+ scale: 50,
+ hex: '#fffbeb',
+ rgb: 'rgb(255,251,235)',
+ hsl: 'hsl(48,100%,96.1%)',
+ },
+ {
+ scale: 100,
+ hex: '#fef3c7',
+ rgb: 'rgb(254,243,199)',
+ hsl: 'hsl(48,96.5%,88.8%)',
+ },
+ {
+ scale: 200,
+ hex: '#fde68a',
+ rgb: 'rgb(253,230,138)',
+ hsl: 'hsl(48,96.6%,76.7%)',
+ },
+ {
+ scale: 300,
+ hex: '#fcd34d',
+ rgb: 'rgb(252,211,77)',
+ hsl: 'hsl(45.9,96.7%,64.5%)',
+ },
+ {
+ scale: 400,
+ hex: '#fbbf24',
+ rgb: 'rgb(251,191,36)',
+ hsl: 'hsl(43.3,96.4%,56.3%)',
+ },
+ {
+ scale: 500,
+ hex: '#f59e0b',
+ rgb: 'rgb(245,158,11)',
+ hsl: 'hsl(37.7,92.1%,50.2%)',
+ },
+ {
+ scale: 600,
+ hex: '#d97706',
+ rgb: 'rgb(217,119,6)',
+ hsl: 'hsl(32.1,94.6%,43.7%)',
+ },
+ {
+ scale: 700,
+ hex: '#b45309',
+ rgb: 'rgb(180,83,9)',
+ hsl: 'hsl(26,90.5%,37.1%)',
+ },
+ {
+ scale: 800,
+ hex: '#92400e',
+ rgb: 'rgb(146,64,14)',
+ hsl: 'hsl(22.7,82.5%,31.4%)',
+ },
+ {
+ scale: 900,
+ hex: '#78350f',
+ rgb: 'rgb(120,53,15)',
+ hsl: 'hsl(21.7,77.8%,26.5%)',
+ },
+ {
+ scale: 950,
+ hex: '#451a03',
+ rgb: 'rgb(69,26,3)',
+ hsl: 'hsl(20.9,91.7%,14.1%)',
+ },
+ ],
+ yellow: [
+ {
+ scale: 50,
+ hex: '#fefce8',
+ rgb: 'rgb(254,252,232)',
+ hsl: 'hsl(54.5,91.7%,95.3%)',
+ },
+ {
+ scale: 100,
+ hex: '#fef9c3',
+ rgb: 'rgb(254,249,195)',
+ hsl: 'hsl(54.9,96.7%,88%)',
+ },
+ {
+ scale: 200,
+ hex: '#fef08a',
+ rgb: 'rgb(254,240,138)',
+ hsl: 'hsl(52.8,98.3%,76.9%)',
+ },
+ {
+ scale: 300,
+ hex: '#fde047',
+ rgb: 'rgb(253,224,71)',
+ hsl: 'hsl(50.4,97.8%,63.5%)',
+ },
+ {
+ scale: 400,
+ hex: '#facc15',
+ rgb: 'rgb(250,204,21)',
+ hsl: 'hsl(47.9,95.8%,53.1%)',
+ },
+ {
+ scale: 500,
+ hex: '#eab308',
+ rgb: 'rgb(234,179,8)',
+ hsl: 'hsl(45.4,93.4%,47.5%)',
+ },
+ {
+ scale: 600,
+ hex: '#ca8a04',
+ rgb: 'rgb(202,138,4)',
+ hsl: 'hsl(40.6,96.1%,40.4%)',
+ },
+ {
+ scale: 700,
+ hex: '#a16207',
+ rgb: 'rgb(161,98,7)',
+ hsl: 'hsl(35.5,91.7%,32.9%)',
+ },
+ {
+ scale: 800,
+ hex: '#854d0e',
+ rgb: 'rgb(133,77,14)',
+ hsl: 'hsl(31.8,81%,28.8%)',
+ },
+ {
+ scale: 900,
+ hex: '#713f12',
+ rgb: 'rgb(113,63,18)',
+ hsl: 'hsl(28.4,72.5%,25.7%)',
+ },
+ {
+ scale: 950,
+ hex: '#422006',
+ rgb: 'rgb(66,32,6)',
+ hsl: 'hsl(26,83.3%,14.1%)',
+ },
+ ],
+ lime: [
+ {
+ scale: 50,
+ hex: '#f7fee7',
+ rgb: 'rgb(247,254,231)',
+ hsl: 'hsl(78.3,92%,95.1%)',
+ },
+ {
+ scale: 100,
+ hex: '#ecfccb',
+ rgb: 'rgb(236,252,203)',
+ hsl: 'hsl(79.6,89.1%,89.2%)',
+ },
+ {
+ scale: 200,
+ hex: '#d9f99d',
+ rgb: 'rgb(217,249,157)',
+ hsl: 'hsl(80.9,88.5%,79.6%)',
+ },
+ {
+ scale: 300,
+ hex: '#bef264',
+ rgb: 'rgb(190,242,100)',
+ hsl: 'hsl(82,84.5%,67.1%)',
+ },
+ {
+ scale: 400,
+ hex: '#a3e635',
+ rgb: 'rgb(163,230,53)',
+ hsl: 'hsl(82.7,78%,55.5%)',
+ },
+ {
+ scale: 500,
+ hex: '#84cc16',
+ rgb: 'rgb(132,204,22)',
+ hsl: 'hsl(83.7,80.5%,44.3%)',
+ },
+ {
+ scale: 600,
+ hex: '#65a30d',
+ rgb: 'rgb(101,163,13)',
+ hsl: 'hsl(84.8,85.2%,34.5%)',
+ },
+ {
+ scale: 700,
+ hex: '#4d7c0f',
+ rgb: 'rgb(77,124,15)',
+ hsl: 'hsl(85.9,78.4%,27.3%)',
+ },
+ {
+ scale: 800,
+ hex: '#3f6212',
+ rgb: 'rgb(63,98,18)',
+ hsl: 'hsl(86.3,69%,22.7%)',
+ },
+ {
+ scale: 900,
+ hex: '#365314',
+ rgb: 'rgb(54,83,20)',
+ hsl: 'hsl(87.6,61.2%,20.2%)',
+ },
+ {
+ scale: 950,
+ hex: '#1a2e05',
+ rgb: 'rgb(26,46,5)',
+ hsl: 'hsl(89.3,80.4%,10%)',
+ },
+ ],
+ green: [
+ {
+ scale: 50,
+ hex: '#f0fdf4',
+ rgb: 'rgb(240,253,244)',
+ hsl: 'hsl(138.5,76.5%,96.7%)',
+ },
+ {
+ scale: 100,
+ hex: '#dcfce7',
+ rgb: 'rgb(220,252,231)',
+ hsl: 'hsl(140.6,84.2%,92.5%)',
+ },
+ {
+ scale: 200,
+ hex: '#bbf7d0',
+ rgb: 'rgb(187,247,208)',
+ hsl: 'hsl(141,78.9%,85.1%)',
+ },
+ {
+ scale: 300,
+ hex: '#86efac',
+ rgb: 'rgb(134,239,172)',
+ hsl: 'hsl(141.7,76.6%,73.1%)',
+ },
+ {
+ scale: 400,
+ hex: '#4ade80',
+ rgb: 'rgb(74,222,128)',
+ hsl: 'hsl(141.9,69.2%,58%)',
+ },
+ {
+ scale: 500,
+ hex: '#22c55e',
+ rgb: 'rgb(34,197,94)',
+ hsl: 'hsl(142.1,70.6%,45.3%)',
+ },
+ {
+ scale: 600,
+ hex: '#16a34a',
+ rgb: 'rgb(22,163,74)',
+ hsl: 'hsl(142.1,76.2%,36.3%)',
+ },
+ {
+ scale: 700,
+ hex: '#15803d',
+ rgb: 'rgb(21,128,61)',
+ hsl: 'hsl(142.4,71.8%,29.2%)',
+ },
+ {
+ scale: 800,
+ hex: '#166534',
+ rgb: 'rgb(22,101,52)',
+ hsl: 'hsl(142.8,64.2%,24.1%)',
+ },
+ {
+ scale: 900,
+ hex: '#14532d',
+ rgb: 'rgb(20,83,45)',
+ hsl: 'hsl(143.8,61.2%,20.2%)',
+ },
+ {
+ scale: 950,
+ hex: '#052e16',
+ rgb: 'rgb(5,46,22)',
+ hsl: 'hsl(144.9,80.4%,10%)',
+ },
+ ],
+ emerald: [
+ {
+ scale: 50,
+ hex: '#ecfdf5',
+ rgb: 'rgb(236,253,245)',
+ hsl: 'hsl(151.8,81%,95.9%)',
+ },
+ {
+ scale: 100,
+ hex: '#d1fae5',
+ rgb: 'rgb(209,250,229)',
+ hsl: 'hsl(149.3,80.4%,90%)',
+ },
+ {
+ scale: 200,
+ hex: '#a7f3d0',
+ rgb: 'rgb(167,243,208)',
+ hsl: 'hsl(152.4,76%,80.4%)',
+ },
+ {
+ scale: 300,
+ hex: '#6ee7b7',
+ rgb: 'rgb(110,231,183)',
+ hsl: 'hsl(156.2,71.6%,66.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#34d399',
+ rgb: 'rgb(52,211,153)',
+ hsl: 'hsl(158.1,64.4%,51.6%)',
+ },
+ {
+ scale: 500,
+ hex: '#10b981',
+ rgb: 'rgb(16,185,129)',
+ hsl: 'hsl(160.1,84.1%,39.4%)',
+ },
+ {
+ scale: 600,
+ hex: '#059669',
+ rgb: 'rgb(5,150,105)',
+ hsl: 'hsl(161.4,93.5%,30.4%)',
+ },
+ {
+ scale: 700,
+ hex: '#047857',
+ rgb: 'rgb(4,120,87)',
+ hsl: 'hsl(162.9,93.5%,24.3%)',
+ },
+ {
+ scale: 800,
+ hex: '#065f46',
+ rgb: 'rgb(6,95,70)',
+ hsl: 'hsl(163.1,88.1%,19.8%)',
+ },
+ {
+ scale: 900,
+ hex: '#064e3b',
+ rgb: 'rgb(6,78,59)',
+ hsl: 'hsl(164.2,85.7%,16.5%)',
+ },
+ {
+ scale: 950,
+ hex: '#022c22',
+ rgb: 'rgb(2,44,34)',
+ hsl: 'hsl(165.7,91.3%,9%)',
+ },
+ ],
+ teal: [
+ {
+ scale: 50,
+ hex: '#f0fdfa',
+ rgb: 'rgb(240,253,250)',
+ hsl: 'hsl(166.2,76.5%,96.7%)',
+ },
+ {
+ scale: 100,
+ hex: '#ccfbf1',
+ rgb: 'rgb(204,251,241)',
+ hsl: 'hsl(167.2,85.5%,89.2%)',
+ },
+ {
+ scale: 200,
+ hex: '#99f6e4',
+ rgb: 'rgb(153,246,228)',
+ hsl: 'hsl(168.4,83.8%,78.2%)',
+ },
+ {
+ scale: 300,
+ hex: '#5eead4',
+ rgb: 'rgb(94,234,212)',
+ hsl: 'hsl(170.6,76.9%,64.3%)',
+ },
+ {
+ scale: 400,
+ hex: '#2dd4bf',
+ rgb: 'rgb(45,212,191)',
+ hsl: 'hsl(172.5,66%,50.4%)',
+ },
+ {
+ scale: 500,
+ hex: '#14b8a6',
+ rgb: 'rgb(20,184,166)',
+ hsl: 'hsl(173.4,80.4%,40%)',
+ },
+ {
+ scale: 600,
+ hex: '#0d9488',
+ rgb: 'rgb(13,148,136)',
+ hsl: 'hsl(174.7,83.9%,31.6%)',
+ },
+ {
+ scale: 700,
+ hex: '#0f766e',
+ rgb: 'rgb(15,118,110)',
+ hsl: 'hsl(175.3,77.4%,26.1%)',
+ },
+ {
+ scale: 800,
+ hex: '#115e59',
+ rgb: 'rgb(17,94,89)',
+ hsl: 'hsl(176.1,69.4%,21.8%)',
+ },
+ {
+ scale: 900,
+ hex: '#134e4a',
+ rgb: 'rgb(19,78,74)',
+ hsl: 'hsl(175.9,60.8%,19%)',
+ },
+ {
+ scale: 950,
+ hex: '#042f2e',
+ rgb: 'rgb(4,47,46)',
+ hsl: 'hsl(178.6,84.3%,10%)',
+ },
+ ],
+ cyan: [
+ {
+ scale: 50,
+ hex: '#ecfeff',
+ rgb: 'rgb(236,254,255)',
+ hsl: 'hsl(183.2,100%,96.3%)',
+ },
+ {
+ scale: 100,
+ hex: '#cffafe',
+ rgb: 'rgb(207,250,254)',
+ hsl: 'hsl(185.1,95.9%,90.4%)',
+ },
+ {
+ scale: 200,
+ hex: '#a5f3fc',
+ rgb: 'rgb(165,243,252)',
+ hsl: 'hsl(186.2,93.5%,81.8%)',
+ },
+ {
+ scale: 300,
+ hex: '#67e8f9',
+ rgb: 'rgb(103,232,249)',
+ hsl: 'hsl(187,92.4%,69%)',
+ },
+ {
+ scale: 400,
+ hex: '#22d3ee',
+ rgb: 'rgb(34,211,238)',
+ hsl: 'hsl(187.9,85.7%,53.3%)',
+ },
+ {
+ scale: 500,
+ hex: '#06b6d4',
+ rgb: 'rgb(6,182,212)',
+ hsl: 'hsl(188.7,94.5%,42.7%)',
+ },
+ {
+ scale: 600,
+ hex: '#0891b2',
+ rgb: 'rgb(8,145,178)',
+ hsl: 'hsl(191.6,91.4%,36.5%)',
+ },
+ {
+ scale: 700,
+ hex: '#0e7490',
+ rgb: 'rgb(14,116,144)',
+ hsl: 'hsl(192.9,82.3%,31%)',
+ },
+ {
+ scale: 800,
+ hex: '#155e75',
+ rgb: 'rgb(21,94,117)',
+ hsl: 'hsl(194.4,69.6%,27.1%)',
+ },
+ {
+ scale: 900,
+ hex: '#164e63',
+ rgb: 'rgb(22,78,99)',
+ hsl: 'hsl(196.4,63.6%,23.7%)',
+ },
+ {
+ scale: 950,
+ hex: '#083344',
+ rgb: 'rgb(8,51,68)',
+ hsl: 'hsl(197,78.9%,14.9%)',
+ },
+ ],
+ sky: [
+ {
+ scale: 50,
+ hex: '#f0f9ff',
+ rgb: 'rgb(240,249,255)',
+ hsl: 'hsl(204,100%,97.1%)',
+ },
+ {
+ scale: 100,
+ hex: '#e0f2fe',
+ rgb: 'rgb(224,242,254)',
+ hsl: 'hsl(204,93.8%,93.7%)',
+ },
+ {
+ scale: 200,
+ hex: '#bae6fd',
+ rgb: 'rgb(186,230,253)',
+ hsl: 'hsl(200.6,94.4%,86.1%)',
+ },
+ {
+ scale: 300,
+ hex: '#7dd3fc',
+ rgb: 'rgb(125,211,252)',
+ hsl: 'hsl(199.4,95.5%,73.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#38bdf8',
+ rgb: 'rgb(56,189,248)',
+ hsl: 'hsl(198.4,93.2%,59.6%)',
+ },
+ {
+ scale: 500,
+ hex: '#0ea5e9',
+ rgb: 'rgb(14,165,233)',
+ hsl: 'hsl(198.6,88.7%,48.4%)',
+ },
+ {
+ scale: 600,
+ hex: '#0284c7',
+ rgb: 'rgb(2,132,199)',
+ hsl: 'hsl(200.4,98%,39.4%)',
+ },
+ {
+ scale: 700,
+ hex: '#0369a1',
+ rgb: 'rgb(3,105,161)',
+ hsl: 'hsl(201.3,96.3%,32.2%)',
+ },
+ {
+ scale: 800,
+ hex: '#075985',
+ rgb: 'rgb(7,89,133)',
+ hsl: 'hsl(201,90%,27.5%)',
+ },
+ {
+ scale: 900,
+ hex: '#0c4a6e',
+ rgb: 'rgb(12,74,110)',
+ hsl: 'hsl(202,80.3%,23.9%)',
+ },
+ {
+ scale: 950,
+ hex: '#082f49',
+ rgb: 'rgb(8,47,73)',
+ hsl: 'hsl(204,80.2%,15.9%)',
+ },
+ ],
+ blue: [
+ {
+ scale: 50,
+ hex: '#eff6ff',
+ rgb: 'rgb(239,246,255)',
+ hsl: 'hsl(213.8,100%,96.9%)',
+ },
+ {
+ scale: 100,
+ hex: '#dbeafe',
+ rgb: 'rgb(219,234,254)',
+ hsl: 'hsl(214.3,94.6%,92.7%)',
+ },
+ {
+ scale: 200,
+ hex: '#bfdbfe',
+ rgb: 'rgb(191,219,254)',
+ hsl: 'hsl(213.3,96.9%,87.3%)',
+ },
+ {
+ scale: 300,
+ hex: '#93c5fd',
+ rgb: 'rgb(147,197,253)',
+ hsl: 'hsl(211.7,96.4%,78.4%)',
+ },
+ {
+ scale: 400,
+ hex: '#60a5fa',
+ rgb: 'rgb(96,165,250)',
+ hsl: 'hsl(213.1,93.9%,67.8%)',
+ },
+ {
+ scale: 500,
+ hex: '#3b82f6',
+ rgb: 'rgb(59,130,246)',
+ hsl: 'hsl(217.2,91.2%,59.8%)',
+ },
+ {
+ scale: 600,
+ hex: '#2563eb',
+ rgb: 'rgb(37,99,235)',
+ hsl: 'hsl(221.2,83.2%,53.3%)',
+ },
+ {
+ scale: 700,
+ hex: '#1d4ed8',
+ rgb: 'rgb(29,78,216)',
+ hsl: 'hsl(224.3,76.3%,48%)',
+ },
+ {
+ scale: 800,
+ hex: '#1e40af',
+ rgb: 'rgb(30,64,175)',
+ hsl: 'hsl(225.9,70.7%,40.2%)',
+ },
+ {
+ scale: 900,
+ hex: '#1e3a8a',
+ rgb: 'rgb(30,58,138)',
+ hsl: 'hsl(224.4,64.3%,32.9%)',
+ },
+ {
+ scale: 950,
+ hex: '#172554',
+ rgb: 'rgb(23,37,84)',
+ hsl: 'hsl(226.2,57%,21%)',
+ },
+ ],
+ indigo: [
+ {
+ scale: 50,
+ hex: '#eef2ff',
+ rgb: 'rgb(238,242,255)',
+ hsl: 'hsl(225.9,100%,96.7%)',
+ },
+ {
+ scale: 100,
+ hex: '#e0e7ff',
+ rgb: 'rgb(224,231,255)',
+ hsl: 'hsl(226.5,100%,93.9%)',
+ },
+ {
+ scale: 200,
+ hex: '#c7d2fe',
+ rgb: 'rgb(199,210,254)',
+ hsl: 'hsl(228,96.5%,88.8%)',
+ },
+ {
+ scale: 300,
+ hex: '#a5b4fc',
+ rgb: 'rgb(165,180,252)',
+ hsl: 'hsl(229.7,93.5%,81.8%)',
+ },
+ {
+ scale: 400,
+ hex: '#818cf8',
+ rgb: 'rgb(129,140,248)',
+ hsl: 'hsl(234.5,89.5%,73.9%)',
+ },
+ {
+ scale: 500,
+ hex: '#6366f1',
+ rgb: 'rgb(99,102,241)',
+ hsl: 'hsl(238.7,83.5%,66.7%)',
+ },
+ {
+ scale: 600,
+ hex: '#4f46e5',
+ rgb: 'rgb(79,70,229)',
+ hsl: 'hsl(243.4,75.4%,58.6%)',
+ },
+ {
+ scale: 700,
+ hex: '#4338ca',
+ rgb: 'rgb(67,56,202)',
+ hsl: 'hsl(244.5,57.9%,50.6%)',
+ },
+ {
+ scale: 800,
+ hex: '#3730a3',
+ rgb: 'rgb(55,48,163)',
+ hsl: 'hsl(243.7,54.5%,41.4%)',
+ },
+ {
+ scale: 900,
+ hex: '#312e81',
+ rgb: 'rgb(49,46,129)',
+ hsl: 'hsl(242.2,47.4%,34.3%)',
+ },
+ {
+ scale: 950,
+ hex: '#1e1b4b',
+ rgb: 'rgb(30,27,75)',
+ hsl: 'hsl(243.8,47.1%,20%)',
+ },
+ ],
+ violet: [
+ {
+ scale: 50,
+ hex: '#f5f3ff',
+ rgb: 'rgb(245,243,255)',
+ hsl: 'hsl(250,100%,97.6%)',
+ },
+ {
+ scale: 100,
+ hex: '#ede9fe',
+ rgb: 'rgb(237,233,254)',
+ hsl: 'hsl(251.4,91.3%,95.5%)',
+ },
+ {
+ scale: 200,
+ hex: '#ddd6fe',
+ rgb: 'rgb(221,214,254)',
+ hsl: 'hsl(250.5,95.2%,91.8%)',
+ },
+ {
+ scale: 300,
+ hex: '#c4b5fd',
+ rgb: 'rgb(196,181,253)',
+ hsl: 'hsl(252.5,94.7%,85.1%)',
+ },
+ {
+ scale: 400,
+ hex: '#a78bfa',
+ rgb: 'rgb(167,139,250)',
+ hsl: 'hsl(255.1,91.7%,76.3%)',
+ },
+ {
+ scale: 500,
+ hex: '#8b5cf6',
+ rgb: 'rgb(139,92,246)',
+ hsl: 'hsl(258.3,89.5%,66.3%)',
+ },
+ {
+ scale: 600,
+ hex: '#7c3aed',
+ rgb: 'rgb(124,58,237)',
+ hsl: 'hsl(262.1,83.3%,57.8%)',
+ },
+ {
+ scale: 700,
+ hex: '#6d28d9',
+ rgb: 'rgb(109,40,217)',
+ hsl: 'hsl(263.4,70%,50.4%)',
+ },
+ {
+ scale: 800,
+ hex: '#5b21b6',
+ rgb: 'rgb(91,33,182)',
+ hsl: 'hsl(263.4,69.3%,42.2%)',
+ },
+ {
+ scale: 900,
+ hex: '#4c1d95',
+ rgb: 'rgb(76,29,149)',
+ hsl: 'hsl(263.5,67.4%,34.9%)',
+ },
+ {
+ scale: 950,
+ hex: '#1e1b4b',
+ rgb: 'rgb(46,16,101)',
+ hsl: 'hsl(261.2,72.6%,22.9%)',
+ },
+ ],
+ purple: [
+ {
+ scale: 50,
+ hex: '#faf5ff',
+ rgb: 'rgb(250,245,255)',
+ hsl: 'hsl(270,100%,98%)',
+ },
+ {
+ scale: 100,
+ hex: '#f3e8ff',
+ rgb: 'rgb(243,232,255)',
+ hsl: 'hsl(268.7,100%,95.5%)',
+ },
+ {
+ scale: 200,
+ hex: '#e9d5ff',
+ rgb: 'rgb(233,213,255)',
+ hsl: 'hsl(268.6,100%,91.8%)',
+ },
+ {
+ scale: 300,
+ hex: '#d8b4fe',
+ rgb: 'rgb(216,180,254)',
+ hsl: 'hsl(269.2,97.4%,85.1%)',
+ },
+ {
+ scale: 400,
+ hex: '#c084fc',
+ rgb: 'rgb(192,132,252)',
+ hsl: 'hsl(270,95.2%,75.3%)',
+ },
+ {
+ scale: 500,
+ hex: '#a855f7',
+ rgb: 'rgb(168,85,247)',
+ hsl: 'hsl(270.7,91%,65.1%)',
+ },
+ {
+ scale: 600,
+ hex: '#9333ea',
+ rgb: 'rgb(147,51,234)',
+ hsl: 'hsl(271.5,81.3%,55.9%)',
+ },
+ {
+ scale: 700,
+ hex: '#7e22ce',
+ rgb: 'rgb(126,34,206)',
+ hsl: 'hsl(272.1,71.7%,47.1%)',
+ },
+ {
+ scale: 800,
+ hex: '#6b21a8',
+ rgb: 'rgb(107,33,168)',
+ hsl: 'hsl(272.9,67.2%,39.4%)',
+ },
+ {
+ scale: 900,
+ hex: '#581c87',
+ rgb: 'rgb(88,28,135)',
+ hsl: 'hsl(273.6,65.6%,32%)',
+ },
+ {
+ scale: 950,
+ hex: '#3b0764',
+ rgb: 'rgb(59,7,100)',
+ hsl: 'hsl(273.5,86.9%,21%)',
+ },
+ ],
+ fuchsia: [
+ {
+ scale: 50,
+ hex: '#fdf4ff',
+ rgb: 'rgb(253,244,255)',
+ hsl: 'hsl(289.1,100%,97.8%)',
+ },
+ {
+ scale: 100,
+ hex: '#fae8ff',
+ rgb: 'rgb(250,232,255)',
+ hsl: 'hsl(287,100%,95.5%)',
+ },
+ {
+ scale: 200,
+ hex: '#f5d0fe',
+ rgb: 'rgb(245,208,254)',
+ hsl: 'hsl(288.3,95.8%,90.6%)',
+ },
+ {
+ scale: 300,
+ hex: '#f0abfc',
+ rgb: 'rgb(240,171,252)',
+ hsl: 'hsl(291.1,93.1%,82.9%)',
+ },
+ {
+ scale: 400,
+ hex: '#e879f9',
+ rgb: 'rgb(232,121,249)',
+ hsl: 'hsl(292,91.4%,72.5%)',
+ },
+ {
+ scale: 500,
+ hex: '#d946ef',
+ rgb: 'rgb(217,70,239)',
+ hsl: 'hsl(292.2,84.1%,60.6%)',
+ },
+ {
+ scale: 600,
+ hex: '#c026d3',
+ rgb: 'rgb(192,38,211)',
+ hsl: 'hsl(293.4,69.5%,48.8%)',
+ },
+ {
+ scale: 700,
+ hex: '#a21caf',
+ rgb: 'rgb(162,28,175)',
+ hsl: 'hsl(294.7,72.4%,39.8%)',
+ },
+ {
+ scale: 800,
+ hex: '#86198f',
+ rgb: 'rgb(134,25,143)',
+ hsl: 'hsl(295.4,70.2%,32.9%)',
+ },
+ {
+ scale: 900,
+ hex: '#701a75',
+ rgb: 'rgb(112,26,117)',
+ hsl: 'hsl(296.7,63.6%,28%)',
+ },
+ {
+ scale: 950,
+ hex: '#4a044e',
+ rgb: 'rgb(74,4,78)',
+ hsl: 'hsl(296.8,90.2%,16.1%)',
+ },
+ ],
+ pink: [
+ {
+ scale: 50,
+ hex: '#fdf2f8',
+ rgb: 'rgb(253,242,248)',
+ hsl: 'hsl(327.3,73.3%,97.1%)',
+ },
+ {
+ scale: 100,
+ hex: '#fce7f3',
+ rgb: 'rgb(252,231,243)',
+ hsl: 'hsl(325.7,77.8%,94.7%)',
+ },
+ {
+ scale: 200,
+ hex: '#fbcfe8',
+ rgb: 'rgb(251,207,232)',
+ hsl: 'hsl(325.9,84.6%,89.8%)',
+ },
+ {
+ scale: 300,
+ hex: '#f9a8d4',
+ rgb: 'rgb(249,168,212)',
+ hsl: 'hsl(327.4,87.1%,81.8%)',
+ },
+ {
+ scale: 400,
+ hex: '#f472b6',
+ rgb: 'rgb(244,114,182)',
+ hsl: 'hsl(328.6,85.5%,70.2%)',
+ },
+ {
+ scale: 500,
+ hex: '#ec4899',
+ rgb: 'rgb(236,72,153)',
+ hsl: 'hsl(330.4,81.2%,60.4%)',
+ },
+ {
+ scale: 600,
+ hex: '#db2777',
+ rgb: 'rgb(219,39,119)',
+ hsl: 'hsl(333.3,71.4%,50.6%)',
+ },
+ {
+ scale: 700,
+ hex: '#be185d',
+ rgb: 'rgb(190,24,93)',
+ hsl: 'hsl(335.1,77.6%,42%)',
+ },
+ {
+ scale: 800,
+ hex: '#9d174d',
+ rgb: 'rgb(157,23,77)',
+ hsl: 'hsl(335.8,74.4%,35.3%)',
+ },
+ {
+ scale: 900,
+ hex: '#831843',
+ rgb: 'rgb(131,24,67)',
+ hsl: 'hsl(335.9,69%,30.4%)',
+ },
+ {
+ scale: 950,
+ hex: '#500724',
+ rgb: 'rgb(80,7,36)',
+ hsl: 'hsl(336.2,83.9%,17.1%)',
+ },
+ ],
+ rose: [
+ {
+ scale: 50,
+ hex: '#fff1f2',
+ rgb: 'rgb(255,241,242)',
+ hsl: 'hsl(355.7,100%,97.3%)',
+ },
+ {
+ scale: 100,
+ hex: '#ffe4e6',
+ rgb: 'rgb(255,228,230)',
+ hsl: 'hsl(355.6,100%,94.7%)',
+ },
+ {
+ scale: 200,
+ hex: '#fecdd3',
+ rgb: 'rgb(254,205,211)',
+ hsl: 'hsl(352.7,96.1%,90%)',
+ },
+ {
+ scale: 300,
+ hex: '#fda4af',
+ rgb: 'rgb(253,164,175)',
+ hsl: 'hsl(352.6,95.7%,81.8%)',
+ },
+ {
+ scale: 400,
+ hex: '#fb7185',
+ rgb: 'rgb(251,113,133)',
+ hsl: 'hsl(351.3,94.5%,71.4%)',
+ },
+ {
+ scale: 500,
+ hex: '#f43f5e',
+ rgb: 'rgb(244,63,94)',
+ hsl: 'hsl(349.7,89.2%,60.2%)',
+ },
+ {
+ scale: 600,
+ hex: '#e11d48',
+ rgb: 'rgb(225,29,72)',
+ hsl: 'hsl(346.8,77.2%,49.8%)',
+ },
+ {
+ scale: 700,
+ hex: '#be123c',
+ rgb: 'rgb(190,18,60)',
+ hsl: 'hsl(345.3,82.7%,40.8%)',
+ },
+ {
+ scale: 800,
+ hex: '#9f1239',
+ rgb: 'rgb(159,18,57)',
+ hsl: 'hsl(343.4,79.7%,34.7%)',
+ },
+ {
+ scale: 900,
+ hex: '#881337',
+ rgb: 'rgb(136,19,55)',
+ hsl: 'hsl(341.5,75.5%,30.4%)',
+ },
+ {
+ scale: 950,
+ hex: '#4c0519',
+ rgb: 'rgb(76,5,25)',
+ hsl: 'hsl(343.1,87.7%,15.9%)',
+ },
+ ],
+}
+
+export const colorMapping = {
+ light: {
+ background: 'white',
+ foreground: '{{base}}-950',
+ card: 'white',
+ 'card-foreground': '{{base}}-950',
+ popover: 'white',
+ 'popover-foreground': '{{base}}-950',
+ primary: '{{base}}-900',
+ 'primary-foreground': '{{base}}-50',
+ secondary: '{{base}}-100',
+ 'secondary-foreground': '{{base}}-900',
+ muted: '{{base}}-100',
+ 'muted-foreground': '{{base}}-500',
+ accent: '{{base}}-100',
+ 'accent-foreground': '{{base}}-900',
+ destructive: 'red-500',
+ 'destructive-foreground': '{{base}}-50',
+ border: '{{base}}-200',
+ input: '{{base}}-200',
+ ring: '{{base}}-950',
+ },
+ dark: {
+ background: '{{base}}-950',
+ foreground: '{{base}}-50',
+ card: '{{base}}-950',
+ 'card-foreground': '{{base}}-50',
+ popover: '{{base}}-950',
+ 'popover-foreground': '{{base}}-50',
+ primary: '{{base}}-50',
+ 'primary-foreground': '{{base}}-900',
+ secondary: '{{base}}-800',
+ 'secondary-foreground': '{{base}}-50',
+ muted: '{{base}}-800',
+ 'muted-foreground': '{{base}}-400',
+ accent: '{{base}}-800',
+ 'accent-foreground': '{{base}}-50',
+ destructive: 'red-900',
+ 'destructive-foreground': '{{base}}-50',
+ border: '{{base}}-800',
+ input: '{{base}}-800',
+ ring: '{{base}}-300',
+ },
+} as const
diff --git a/apps/design-system/registry/default/example/accordion-demo.tsx b/apps/design-system/registry/default/example/accordion-demo.tsx
new file mode 100644
index 00000000000..99f6a6dbe4d
--- /dev/null
+++ b/apps/design-system/registry/default/example/accordion-demo.tsx
@@ -0,0 +1,31 @@
+import {
+ Accordion_Shadcn_,
+ AccordionContent_Shadcn_,
+ AccordionItem_Shadcn_,
+ AccordionTrigger_Shadcn_,
+} from 'ui'
+
+export default function AccordionDemo() {
+ return (
+
+
+ Is it accessible?
+
+ Yes. It adheres to the WAI-ARIA design pattern.
+
+
+
+ Is it styled?
+
+ Yes. It comes with default styles that matches the other components' aesthetic.
+
+
+
+ Is it animated?
+
+ Yes. Its animated by default, but you can disable it if you prefer.
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/admonition-demo.tsx b/apps/design-system/registry/default/example/admonition-demo.tsx
new file mode 100644
index 00000000000..77c15eea02c
--- /dev/null
+++ b/apps/design-system/registry/default/example/admonition-demo.tsx
@@ -0,0 +1,11 @@
+import { Admonition } from 'ui-patterns/admonition'
+
+export default function AdmonitionDemo() {
+ return (
+
+ Heads up!
+
+ You can add components to your app using the cli.
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/alert-destructive.tsx b/apps/design-system/registry/default/example/alert-destructive.tsx
new file mode 100644
index 00000000000..67c3b747149
--- /dev/null
+++ b/apps/design-system/registry/default/example/alert-destructive.tsx
@@ -0,0 +1,15 @@
+import { AlertCircle } from 'lucide-react'
+
+import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
+
+export default function AlertDestructive() {
+ return (
+
+ Error
+
+ Your session has expired. Please log in again.
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/alert-dialog-demo.tsx b/apps/design-system/registry/default/example/alert-dialog-demo.tsx
new file mode 100644
index 00000000000..38f358327a4
--- /dev/null
+++ b/apps/design-system/registry/default/example/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from 'ui'
+import { Button } from 'ui'
+
+export default function AlertDialogDemo() {
+ return (
+
+
+
+
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your account and remove your
+ data from our servers.
+
+
+
+ Cancel
+ Continue
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/aspect-ratio-demo.tsx b/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
new file mode 100644
index 00000000000..d1d681c65f5
--- /dev/null
+++ b/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image'
+
+import { AspectRatio } from 'ui'
+
+export default function AspectRatioDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/avatar-demo.tsx b/apps/design-system/registry/default/example/avatar-demo.tsx
new file mode 100644
index 00000000000..bfa8b6b4911
--- /dev/null
+++ b/apps/design-system/registry/default/example/avatar-demo.tsx
@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from 'ui'
+
+export default function AvatarDemo() {
+ return (
+
+ MT
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/badge-demo.tsx b/apps/design-system/registry/default/example/badge-demo.tsx
new file mode 100644
index 00000000000..d34f2ce7052
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeDemo() {
+ return Badge
+}
diff --git a/apps/design-system/registry/default/example/badge-destructive.tsx b/apps/design-system/registry/default/example/badge-destructive.tsx
new file mode 100644
index 00000000000..a1d3b2ce590
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeDestructive() {
+ return Destructive
+}
diff --git a/apps/design-system/registry/default/example/badge-outline.tsx b/apps/design-system/registry/default/example/badge-outline.tsx
new file mode 100644
index 00000000000..780711720d4
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeOutline() {
+ return Outline
+}
diff --git a/apps/design-system/registry/default/example/badge-secondary.tsx b/apps/design-system/registry/default/example/badge-secondary.tsx
new file mode 100644
index 00000000000..bc24be53c4d
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeSecondary() {
+ return Secondary
+}
diff --git a/apps/design-system/registry/default/example/button-as-child.tsx b/apps/design-system/registry/default/example/button-as-child.tsx
new file mode 100644
index 00000000000..aa8c3e0259a
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-as-child.tsx
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+import { Button } from 'ui'
+
+export default function ButtonAsChild() {
+ return (
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-default.tsx b/apps/design-system/registry/default/example/button-default.tsx
new file mode 100644
index 00000000000..33b22371e51
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-default.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonDemo() {
+ return (
+ (new Date())
+
+ return >({
+ resolver: zodResolver(FormSchema),
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
new file mode 100644
index 00000000000..8daa38dc91d
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+ dob: z.date({
+ required_error: 'A date of birth is required.',
+ }),
+})
+
+export default function CalendarForm() {
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-demo.tsx b/apps/design-system/registry/default/example/checkbox-demo.tsx
new file mode 100644
index 00000000000..8f7ebf20d67
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Checkbox_Shadcn_ } from 'ui'
+
+export default function CheckboxDemo() {
+ return (
+ >({
+ resolver: zodResolver(FormSchema),
+ defaultValues: {
+ items: ['recents', 'home'],
+ },
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx
new file mode 100644
index 00000000000..bea7b188f64
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import Link from 'next/link'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import { Checkbox_Shadcn_ } from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+ mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ defaultValues: {
+ mobile: true,
+ },
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-with-text.tsx b/apps/design-system/registry/default/example/checkbox-with-text.tsx
new file mode 100644
index 00000000000..87ec288baaa
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Checkbox_Shadcn_ } from 'ui'
+
+export default function CheckboxWithText() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx b/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
new file mode 100644
index 00000000000..a4bb84e77d9
--- /dev/null
+++ b/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
@@ -0,0 +1,50 @@
+import { ClassLabel } from '@/components/class-label'
+import { ExampleLabel } from '@/components/example-label'
+import * as React from 'react'
+
+export default function Demo() {
+ return (
+
+
+ }
+ >
+ {value
+ ? frameworks.find((framework) => framework.value === value)?.label
+ : 'Select framework...'}
+
+
+
+
+ No framework found.
+
+ {frameworks.map((framework) => (
+ {
+ setValue(currentValue === value ? '' : currentValue)
+ setOpen(false)
+ }}
+ >
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
new file mode 100644
index 00000000000..f2e06033516
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
+
+import { Button, CommandList_Shadcn_ } from 'ui'
+import {
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+} from 'ui'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from 'ui'
+
+const labels = [
+ 'feature',
+ 'bug',
+ 'enhancement',
+ 'documentation',
+ 'design',
+ 'question',
+ 'maintenance',
+]
+
+export default function ComboboxDropdownMenu() {
+ const [label, setLabel] = React.useState('feature')
+ const [open, setOpen] = React.useState(false)
+
+ return (
+ >({
+ resolver: zodResolver(FormSchema),
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/combobox-popover.tsx b/apps/design-system/registry/default/example/combobox-popover.tsx
new file mode 100644
index 00000000000..4976381d518
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-popover.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+import {
+ ArrowUpCircle,
+ CheckCircle2,
+ Circle,
+ HelpCircle,
+ LucideIcon,
+ Plus,
+ XCircle,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, CommandList_Shadcn_ } from 'ui'
+import {
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+type Status = {
+ value: string
+ label: string
+ icon: LucideIcon
+}
+
+const statuses: Status[] = [
+ {
+ value: 'backlog',
+ label: 'Backlog',
+ icon: HelpCircle,
+ },
+ {
+ value: 'todo',
+ label: 'Todo',
+ icon: Circle,
+ },
+ {
+ value: 'in progress',
+ label: 'In Progress',
+ icon: ArrowUpCircle,
+ },
+ {
+ value: 'done',
+ label: 'Done',
+ icon: CheckCircle2,
+ },
+ {
+ value: 'canceled',
+ label: 'Canceled',
+ icon: XCircle,
+ },
+]
+
+export default function ComboboxPopover() {
+ const [open, setOpen] = React.useState(false)
+ const [selectedStatus, setSelectedStatus] = React.useState(null)
+
+ return (
+ (null)
+
+ if (isDesktop) {
+ return (
+
+
+ }
+ >
+ {selectedStatus ? <>{selectedStatus.label} : <>Set status}
+
+
+
+
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+function StatusList({
+ setOpen,
+ setSelectedStatus,
+}: {
+ setOpen: (open: boolean) => void
+ setSelectedStatus: (status: Status | null) => void
+}) {
+ return (
+
+
+ No results found.
+
+ {statuses.map((status) => (
+ {
+ setSelectedStatus(statuses.find((priority) => priority.value === value) || null)
+ setOpen(false)
+ }}
+ >
+ {status.label}
+
+ ))}
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/command-demo.tsx b/apps/design-system/registry/default/example/command-demo.tsx
new file mode 100644
index 00000000000..c758fcaef28
--- /dev/null
+++ b/apps/design-system/registry/default/example/command-demo.tsx
@@ -0,0 +1,55 @@
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+import {
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ CommandSeparator_Shadcn_,
+ CommandShortcut_Shadcn_,
+} from 'ui'
+
+export default function CommandDemo() {
+ return (
+
+
+ No results found.
+
+
+
+
+
+
+
+
+
+
+ ⌘P
+
+
+ ⌘B
+
+
+ ⌘S
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/command-dialog.tsx b/apps/design-system/registry/default/example/command-dialog.tsx
new file mode 100644
index 00000000000..a3989e95e62
--- /dev/null
+++ b/apps/design-system/registry/default/example/command-dialog.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import * as React from 'react'
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+import {
+ CommandDialog,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ CommandSeparator_Shadcn_,
+ CommandShortcut_Shadcn_,
+} from 'ui'
+
+export default function CommandDialogDemo() {
+ const [open, setOpen] = React.useState(false)
+
+ React.useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ setOpen((open) => !open)
+ }
+ }
+
+ document.addEventListener('keydown', down)
+ return () => document.removeEventListener('keydown', down)
+ }, [])
+
+ return (
+ <>
+
+
+ No results found.
+
+
+
+
+
+
+
+
+
+
+ ⌘P
+
+
+ ⌘B
+
+
+ ⌘S
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/context-menu-demo.tsx b/apps/design-system/registry/default/example/context-menu-demo.tsx
new file mode 100644
index 00000000000..877b9917d90
--- /dev/null
+++ b/apps/design-system/registry/default/example/context-menu-demo.tsx
@@ -0,0 +1,65 @@
+import {
+ ContextMenu_Shadcn_,
+ ContextMenuCheckboxItem_Shadcn_,
+ ContextMenuContent_Shadcn_,
+ ContextMenuItem_Shadcn_,
+ ContextMenuLabel_Shadcn_,
+ ContextMenuRadioGroup_Shadcn_,
+ ContextMenuRadioItem_Shadcn_,
+ ContextMenuSeparator_Shadcn_,
+ ContextMenuShortcut_Shadcn_,
+ ContextMenuSub_Shadcn_,
+ ContextMenuSubContent_Shadcn_,
+ ContextMenuSubTrigger_Shadcn_,
+ ContextMenuTrigger_Shadcn_,
+} from 'ui'
+
+export default function ContextMenuDemo() {
+ return (
+
+
+ Right click here
+
+
+
+ Back
+ ⌘[
+
+
+ Forward
+ ⌘]
+
+
+ Reload
+ ⌘R
+
+
+ More Tools
+
+
+ Save Page As...
+ ⇧⌘S
+
+ Create Shortcut...
+ Name Window...
+ Developer Tools
+
+
+
+ Show Bookmarks Bar
+ ⌘⇧B
+
+ Show Full URLs
+
+ People
+ Pedro Duarte
+ Colm Tuite
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-demo.tsx b/apps/design-system/registry/default/example/date-picker-demo.tsx
new file mode 100644
index 00000000000..c4424bc6aba
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-demo.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+export default function DatePickerDemo() {
+ const [date, setDate] = React.useState()
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
new file mode 100644
index 00000000000..7e6989c141e
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+ dob: z.date({
+ required_error: 'A date of birth is required.',
+ }),
+})
+
+export default function DatePickerForm() {
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-with-presets.tsx b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
new file mode 100644
index 00000000000..41dec91c019
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import * as React from 'react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+ Select_Shadcn_,
+ SelectContent_Shadcn_,
+ SelectItem_Shadcn_,
+ SelectTrigger_Shadcn_,
+ SelectValue_Shadcn_,
+} from 'ui'
+
+export default function DatePickerWithPresets() {
+ const [date, setDate] = React.useState()
+
+ return (
+
+
+
+
+
+ setDate(addDays(new Date(), parseInt(value)))}>
+
+
+
+ Today
+ Tomorrow
+ In 3 days
+ In a week
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-with-range.tsx b/apps/design-system/registry/default/example/date-picker-with-range.tsx
new file mode 100644
index 00000000000..15bf3c13d09
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-with-range.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+// @ts-expect-error
+import { DateRange } from 'react-day-picker'
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+export default function DatePickerWithRange({ className }: React.HTMLAttributes) {
+ const [date, setDate] = React.useState({
+ from: new Date(2022, 0, 20),
+ to: addDays(new Date(2022, 0, 20), 20),
+ })
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/drawer-dialog.tsx b/apps/design-system/registry/default/example/drawer-dialog.tsx
new file mode 100644
index 00000000000..6d43398796d
--- /dev/null
+++ b/apps/design-system/registry/default/example/drawer-dialog.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { Button } from 'ui'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from 'ui'
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function DrawerDialogDemo() {
+ const [open, setOpen] = React.useState(false)
+ const isDesktop = useMediaQuery('(min-width: 768px)')
+
+ if (isDesktop) {
+ return (
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you are done.
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function ProfileForm({ className }: React.ComponentProps<'form'>) {
+ return (
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
new file mode 100644
index 00000000000..048d60d750d
--- /dev/null
+++ b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+
+import { Button } from 'ui'
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from 'ui'
+
+type Checked = DropdownMenuCheckboxItemProps['checked']
+
+export default function DropdownMenuCheckboxes() {
+ const [showStatusBar, setShowStatusBar] = React.useState(true)
+ const [showActivityBar, setShowActivityBar] = React.useState(false)
+ const [showPanel, setShowPanel] = React.useState(false)
+
+ return (
+
+
+
+
+
+ Appearance
+
+ Status Bar
+
+
+ Activity Bar
+
+
+ Panel
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/dropdown-menu-demo.tsx b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
new file mode 100644
index 00000000000..4be7a68a5e8
--- /dev/null
+++ b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
@@ -0,0 +1,122 @@
+import {
+ Cloud,
+ CreditCard,
+ Github,
+ Keyboard,
+ LifeBuoy,
+ LogOut,
+ Mail,
+ MessageSquare,
+ Plus,
+ PlusCircle,
+ Settings,
+ User,
+ UserPlus,
+ Users,
+} from 'lucide-react'
+
+import { Button } from 'ui'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuPortal,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger,
+} from 'ui'
+
+export default function DropdownMenuDemo() {
+ return (
+
+
+
+
+
+ My Account
+
+
+ ⇧⌘P
+
+
+ ⌘B
+
+
+ ⌘S
+
+
+ ⌘K
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ⌘+T
+
+
+
+
+
+
+
+
+
+ ⇧⌘Q
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
new file mode 100644
index 00000000000..7f339382b00
--- /dev/null
+++ b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+
+import { Button } from 'ui'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from 'ui'
+
+export default function DropdownMenuRadioGroupDemo() {
+ const [position, setPosition] = React.useState('bottom')
+
+ return (
+
+
+
+
+
+ Panel Position
+
+ Top
+ Bottom
+ Right
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-after-label.tsx b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
new file mode 100644
index 00000000000..2bd5cae8e89
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-after-label.tsx
@@ -0,0 +1,51 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+ functionName: z.string(),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-before-label.tsx b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
new file mode 100644
index 00000000000..84afb3a31c6
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-before-label.tsx
@@ -0,0 +1,51 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+ functionName: z.string(),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-demo.tsx b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
new file mode 100644
index 00000000000..4d31cc3df60
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
@@ -0,0 +1,54 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { z } from 'zod'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const formSchema = z.object({
+ username: z.string().min(2, {
+ message: 'Username must be at least 2 characters.',
+ }),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ username: '',
+ },
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
new file mode 100644
index 00000000000..ff215787a11
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
@@ -0,0 +1,104 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Checkbox_Shadcn_, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+ items: z.array(z.string()).refine((value) => value.some((item) => item), {
+ message: 'You have to select at least one item.',
+ }),
+})
+
+const items = [
+ {
+ id: 'recents',
+ label: 'Recents',
+ },
+ {
+ id: 'home',
+ label: 'Home',
+ },
+ {
+ id: 'applications',
+ label: 'Applications',
+ },
+ {
+ id: 'desktop',
+ label: 'Desktop',
+ },
+ {
+ id: 'downloads',
+ label: 'Downloads',
+ },
+ {
+ id: 'documents',
+ label: 'Documents',
+ },
+] as const
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
new file mode 100644
index 00000000000..a21de035399
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
@@ -0,0 +1,55 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import {
+ Badge,
+ Button,
+ Checkbox_Shadcn_,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormField_Shadcn_,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+ consistent_settings: z.boolean().default(false).optional(),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
new file mode 100644
index 00000000000..7b0a0a53b54
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
@@ -0,0 +1,58 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Separator } from 'ui'
+import { z } from 'zod'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const formSchema = z.object({
+ username: z.string().min(2, {
+ message: 'Username must be at least 2 characters.',
+ }),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ username: '',
+ },
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-select.tsx b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
new file mode 100644
index 00000000000..22ae206dc46
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
@@ -0,0 +1,71 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import {
+ Button,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormField_Shadcn_,
+ Select_Shadcn_,
+ SelectContent_Shadcn_,
+ SelectItem_Shadcn_,
+ SelectTrigger_Shadcn_,
+ SelectValue_Shadcn_,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+ email: z
+ .string({
+ required_error: 'Please select an email to display.',
+ })
+ .email(),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
new file mode 100644
index 00000000000..0e2c373502d
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
@@ -0,0 +1,49 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+ switch_option: z.boolean().default(false).optional(),
+})
+
+export default function FormItemLayoutDemo() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ // action('form form.handleSubmit(onSubmit)')(values)
+ }
+ return (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/hover-card-demo.tsx b/apps/design-system/registry/default/example/hover-card-demo.tsx
new file mode 100644
index 00000000000..95ae07e2f43
--- /dev/null
+++ b/apps/design-system/registry/default/example/hover-card-demo.tsx
@@ -0,0 +1,31 @@
+import { CalendarDays } from 'lucide-react'
+
+import { Avatar, AvatarFallback, AvatarImage } from 'ui'
+import { Button } from 'ui'
+import { HoverCard_Shadcn_, HoverCardContent_Shadcn_, HoverCardTrigger_Shadcn_ } from 'ui'
+
+export default function HoverCardDemo() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/info-tooltip-demo.tsx b/apps/design-system/registry/default/example/info-tooltip-demo.tsx
new file mode 100644
index 00000000000..e6eee809dff
--- /dev/null
+++ b/apps/design-system/registry/default/example/info-tooltip-demo.tsx
@@ -0,0 +1,5 @@
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
+
+export default function InfoTooltipDemo() {
+ return This is the tooltip content
+}
diff --git a/apps/design-system/registry/default/example/input-demo.tsx b/apps/design-system/registry/default/example/input-demo.tsx
new file mode 100644
index 00000000000..ed8cf4c24b2
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input_Shadcn_ } from 'ui'
+
+export default function InputDemo() {
+ return >({
+ resolver: zodResolver(FormSchema),
+ defaultValues: {
+ username: '',
+ },
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-controlled.tsx b/apps/design-system/registry/default/example/input-otp-controlled.tsx
new file mode 100644
index 00000000000..f6d9a6c5572
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-controlled.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import * as React from 'react'
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+
+export default function InputOTPControlled() {
+ const [value, setValue] = React.useState('')
+
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx
new file mode 100644
index 00000000000..9036239ff06
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+ pin: z.string().min(6, {
+ message: 'Your one-time password must be 6 characters.',
+ }),
+})
+
+export default function InputOTPForm() {
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ defaultValues: {
+ pin: '',
+ },
+ })
+
+ function onSubmit(data: z.infer) {
+ toast({
+ title: 'You submitted the following values:',
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-pattern.tsx b/apps/design-system/registry/default/example/input-otp-pattern.tsx
new file mode 100644
index 00000000000..ce136748fc7
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-pattern.tsx
@@ -0,0 +1,18 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+
+export default function InputOTPPattern() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-separator.tsx b/apps/design-system/registry/default/example/input-otp-separator.tsx
new file mode 100644
index 00000000000..a6b162d8cf5
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-separator.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
+
+export default function InputOTPWithSeparator() {
+ return (
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-with-button.tsx b/apps/design-system/registry/default/example/input-with-button.tsx
new file mode 100644
index 00000000000..ba7f3df71f0
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-with-button.tsx
@@ -0,0 +1,13 @@
+import { Button } from 'ui'
+import { Input_Shadcn_ } from 'ui'
+
+export default function InputWithButton() {
+ return (
+
+
+ File
+
+
+ New Tab ⌘T
+
+
+ New Window ⌘N
+
+ New Incognito Window
+
+ Share
+
+ Email link
+ Messages
+ Notes
+
+
+
+ Print... ⌘P
+
+
+
+
+ Edit
+
+
+ Undo ⌘Z
+
+
+ Redo ⇧⌘Z
+
+
+ Find
+
+ Search the web
+ Find...
+ Find Next
+ Find Previous
+
+
+ Cut
+ Copy
+ Paste
+
+
+
+ View
+
+ Always Show Bookmarks Bar
+ Always Show Full URLs
+
+ Reload ⌘R
+
+
+ Force Reload ⇧⌘R
+
+ Toggle Fullscreen
+ Hide Sidebar
+
+
+
+ Profiles
+
+
+ Andy
+ Benoit
+ Luis
+
+ Edit...
+ Add Profile...
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/modal-aligned-footer.tsx b/apps/design-system/registry/default/example/modal-aligned-footer.tsx
new file mode 100644
index 00000000000..cd8c6b239ca
--- /dev/null
+++ b/apps/design-system/registry/default/example/modal-aligned-footer.tsx
@@ -0,0 +1,43 @@
+import { Link2 } from 'lucide-react'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
+
+export default function ModalVerticalAlignedFooter() {
+ const [visible, setVisible] = useState(false)
+
+ return (
+ <>
+
+ setVisible(!visible)}
+ onConfirm={() => setVisible(!visible)}
+ title="This is the title of the modal"
+ description="And i am the description"
+ alignFooter="right"
+ size="medium"
+ hideClose={false}
+ header={
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/modal-custom-footer.tsx b/apps/design-system/registry/default/example/modal-custom-footer.tsx
new file mode 100644
index 00000000000..206fb72e092
--- /dev/null
+++ b/apps/design-system/registry/default/example/modal-custom-footer.tsx
@@ -0,0 +1,53 @@
+import { Link2 } from 'lucide-react'
+import { useState } from 'react'
+import { Badge, Button, Modal } from 'ui'
+
+export default function ModalVerticalCustomFooter() {
+ const [visible, setVisible] = useState(false)
+
+ return (
+ <>
+
+ setVisible(!visible)}
+ onConfirm={() => setVisible(!visible)}
+ title="This is the title of the modal"
+ description="And i am the description"
+ size="medium"
+ hideClose={false}
+ header={
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/modal-demo.tsx b/apps/design-system/registry/default/example/modal-demo.tsx
new file mode 100644
index 00000000000..f11c441568b
--- /dev/null
+++ b/apps/design-system/registry/default/example/modal-demo.tsx
@@ -0,0 +1,42 @@
+import { Link2 } from 'lucide-react'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
+
+export default function ModalDemo() {
+ const [visible, setVisible] = useState(false)
+
+ return (
+ <>
+
+ setVisible(!visible)}
+ onConfirm={() => setVisible(!visible)}
+ title="This is the title of the modal"
+ description="And i am the description"
+ size="medium"
+ hideClose={false}
+ header={
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/modal-hide-footer.tsx b/apps/design-system/registry/default/example/modal-hide-footer.tsx
new file mode 100644
index 00000000000..ff14e8bf566
--- /dev/null
+++ b/apps/design-system/registry/default/example/modal-hide-footer.tsx
@@ -0,0 +1,43 @@
+import { Link2 } from 'lucide-react'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
+
+export default function ModalVerticalHideFooter() {
+ const [visible, setVisible] = useState(false)
+
+ return (
+ <>
+
+ setVisible(!visible)}
+ onConfirm={() => setVisible(!visible)}
+ title="This is the title of the modal"
+ description="And i am the description"
+ hideFooter={true}
+ size="medium"
+ hideClose={false}
+ header={
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/modal-vertical-layout.tsx b/apps/design-system/registry/default/example/modal-vertical-layout.tsx
new file mode 100644
index 00000000000..e1578fb2660
--- /dev/null
+++ b/apps/design-system/registry/default/example/modal-vertical-layout.tsx
@@ -0,0 +1,43 @@
+import { Link2 } from 'lucide-react'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
+
+export default function ModalVerticalLayout() {
+ const [visible, setVisible] = useState(false)
+
+ return (
+ <>
+
+ setVisible(!visible)}
+ onConfirm={() => setVisible(!visible)}
+ title="This is the title of the modal"
+ description="And i am the description"
+ layout="vertical"
+ size="medium"
+ hideClose={false}
+ header={
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/mode-toggle.tsx b/apps/design-system/registry/default/example/mode-toggle.tsx
new file mode 100644
index 00000000000..fa179ce6dda
--- /dev/null
+++ b/apps/design-system/registry/default/example/mode-toggle.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from 'ui'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
+
+export default function ModeToggle() {
+ const { setTheme } = useTheme()
+
+ return (
+
+
+
+
+
+ setTheme('light')}>Light
+ setTheme('dark')}>Dark
+ setTheme('system')}>System
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/multi-select-demo.tsx b/apps/design-system/registry/default/example/multi-select-demo.tsx
new file mode 100644
index 00000000000..faa684876f7
--- /dev/null
+++ b/apps/design-system/registry/default/example/multi-select-demo.tsx
@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import {
+ MultiSelector,
+ MultiSelectorContent,
+ MultiSelectorInput,
+ MultiSelectorItem,
+ MultiSelectorList,
+ MultiSelectorTrigger,
+} from 'ui-patterns/multi-select'
+
+export default function MultiSelectDemo() {
+ const [value, setValue] = useState([])
+
+ return (
+
+
+
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/multi-select-form.tsx b/apps/design-system/registry/default/example/multi-select-form.tsx
new file mode 100644
index 00000000000..339c5ca6b6f
--- /dev/null
+++ b/apps/design-system/registry/default/example/multi-select-form.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import {
+ MultiSelector,
+ MultiSelectorContent,
+ MultiSelectorInput,
+ MultiSelectorItem,
+ MultiSelectorList,
+ MultiSelectorTrigger,
+} from 'ui-patterns/multi-select'
+import {
+ Form_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+ useToast,
+} from 'ui'
+import z from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { toast } from 'ui'
+import { Button } from 'ui'
+import Image from 'next/image'
+
+const form = z.object({
+ value: z.array(z.string()).nonempty('Please select at least one person'),
+})
+
+type Form = z.infer
+
+const users = [
+ {
+ name: 'ThePrimeagen',
+ picture: 'https://pbs.twimg.com/profile_images/1759330620160049152/2i_wkOoK_400x400.jpg',
+ },
+ {
+ name: 'Shadcn',
+ picture: 'https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg',
+ },
+ {
+ name: 'Theo',
+ picture: 'https://pbs.twimg.com/profile_images/1605762947686375425/lsoGWWty_400x400.jpg',
+ },
+]
+
+const MultiSelectZod = () => {
+ const multiForm = useForm
{{name}}
;
+ // `
+ // // console.log('node', node)
+
+ // const documentation = parse(code)[0]
+
+ // // console.log('documentation', documentation)
+
+ // // Add attributes to object
+
+ // node.attributes?.push({
+ // type: 'mdxJsxAttribute',
+ // name: 'docs',
+ // value: JSON.stringify(documentation),
+ // })
+
+ // // console.log('node after', node)
+
+ // // Add random text as children
+ // // node.children?.push({
+ // // type: 'text',
+ // // value: 'I am random text', // Generate a random UUID as text content
+ // // })
+
+ // // node.data = {
+ // // ...node.data,
+ // // name: 'documentation',
+ // // type: 'mdxJsxAttribute',
+ // // value: documentation,
+ // // }
+ // }
+
+ if (node.name === 'ComponentSource') {
+ // console.log('DO NOT USE THIS COMPONENT')
+ // This component should not be in use!
+ // console.log('node', node)
+
+ const name = getNodeAttributeByName(node, 'name')?.value as string
+ const fileName = getNodeAttributeByName(node, 'fileName')?.value as string | undefined
+
+ if (!name && !srcPath) {
+ return null
+ }
+
+ try {
+ for (const style of styles) {
+ let src: string
+
+ if (srcPath) {
+ src = srcPath
+ } else {
+ const component = Index[style.name][name]
+ // console.log('got to ELSE STATEMENT')
+ // console.log('filename', fileName)
+ // console.log('name', name)
+
+ src = fileName
+ ? component.files.find((file: string) => {
+ return file.endsWith(`${fileName}.tsx`) || file.endsWith(`${fileName}.ts`)
+ }) || component.files[0]
+ : component.files[0]
+ // console.log('got to END of ELSE STATEMENT')
+ }
+
+ // Read the source file.
+ const filePath = path.join(process.cwd(), src)
+ let source = fs.readFileSync(filePath, 'utf8')
+
+ // Replace imports.
+ // TODO: Use @swc/core and a visitor to replace this.
+ // For now a simple regex should do.
+ // source = source.replaceAll(`@/registry/${style.name}/`, '@/components/') // COMMENT THEE OUT
+ // source = source.replaceAll('export default', 'export')
+
+ // Add code as children so that rehype can take over at build time.
+ node.children?.push(
+ u('element', {
+ tagName: 'pre',
+ properties: {
+ __src__: src,
+ __style__: style.name,
+ },
+ attributes: [
+ {
+ name: 'styleName',
+ type: 'mdxJsxAttribute',
+ value: style.name,
+ },
+ ],
+ children: [
+ u('element', {
+ tagName: 'code',
+ properties: {
+ className: ['language-tsx'],
+ },
+ children: [
+ {
+ type: 'text',
+ value: source,
+ },
+ ],
+ }),
+ ],
+ })
+ )
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ if (node.name === 'ComponentPreview') {
+ const name = getNodeAttributeByName(node, 'name')?.value as string
+
+ if (!name) {
+ return null
+ }
+
+ try {
+ for (const style of styles) {
+ const component = Index[style.name][name]
+ // console.log('GOT HERE')
+ const src = component.files[0]
+
+ // Read the source file.
+ const filePath = path.join(process.cwd(), src)
+ let source = fs.readFileSync(filePath, 'utf8')
+
+ // Replace imports.
+ // TODO: Use @swc/core and a visitor to replace this.
+ // For now a simple regex should do.
+ source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
+ source = source.replaceAll('export default', 'export')
+
+ // Add code as children so that rehype can take over at build time.
+ node.children?.push(
+ u('element', {
+ tagName: 'pre',
+ properties: {
+ __src__: src,
+ },
+ children: [
+ u('element', {
+ tagName: 'code',
+ properties: {
+ className: ['language-tsx'],
+ },
+ children: [
+ {
+ type: 'text',
+ value: source,
+ },
+ ],
+ }),
+ ],
+ })
+ )
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ if (node.name === 'CodeFragment') {
+ const name = getNodeAttributeByName(node, 'name')?.value as string
+
+ if (!name) {
+ return null
+ }
+
+ try {
+ for (const style of styles) {
+ const component = Index[style.name][name]
+ // console.log('GOT HERE')
+ const src = component.files[0]
+
+ // Read the source file.
+ const filePath = path.join(process.cwd(), src)
+ let source = fs.readFileSync(filePath, 'utf8')
+
+ // Replace imports.
+ // TODO: Use @swc/core and a visitor to replace this.
+ // For now a simple regex should do.
+ source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
+ source = source.replaceAll('export default', 'export')
+
+ // Add code as children so that rehype can take over at build time.
+ node.children?.push(
+ u('element', {
+ tagName: 'pre',
+ properties: {
+ __src__: src,
+ },
+ children: [
+ u('element', {
+ tagName: 'code',
+ properties: {
+ className: ['language-tsx'],
+ },
+ children: [
+ {
+ type: 'text',
+ value: source,
+ },
+ ],
+ }),
+ ],
+ })
+ )
+ }
+ } catch (error) {
+ console.error(error)
+ }
+ }
+
+ // if (node.name === "ComponentExample") {
+ // const source = getComponentSourceFileContent(node)
+ // if (!source) {
+ // return
+ // }
+
+ // // Replace the Example component with a pre element.
+ // node.children?.push(
+ // u("element", {
+ // tagName: "pre",
+ // properties: {
+ // __src__: src,
+ // },
+ // children: [
+ // u("element", {
+ // tagName: "code",
+ // properties: {
+ // className: ["language-tsx"],
+ // },
+ // children: [
+ // {
+ // type: "text",
+ // value: source,
+ // },
+ // ],
+ // }),
+ // ],
+ // })
+ // )
+
+ // const extractClassname = getNodeAttributeByName(
+ // node,
+ // "extractClassname"
+ // )
+ // if (
+ // extractClassname &&
+ // typeof extractClassname.value !== "undefined" &&
+ // extractClassname.value !== "false"
+ // ) {
+ // // Extract className from string
+ // // TODO: Use @swc/core and a visitor to extract this.
+ // // For now, a simple regex should do.
+ // const values = source.match(/className="(.*)"/)
+ // const className = values ? values[1] : ""
+
+ // // Add the className as a jsx prop so we can pass it to the copy button.
+ // node.attributes?.push({
+ // name: "extractedClassNames",
+ // type: "mdxJsxAttribute",
+ // value: className,
+ // })
+
+ // // Add a pre element with the className only.
+ // node.children?.push(
+ // u("element", {
+ // tagName: "pre",
+ // properties: {},
+ // children: [
+ // u("element", {
+ // tagName: "code",
+ // properties: {
+ // className: ["language-tsx"],
+ // },
+ // children: [
+ // {
+ // type: "text",
+ // value: className,
+ // },
+ // ],
+ // }),
+ // ],
+ // })
+ // )
+ // }
+ // }
+
+ // if (node.name === "ComponentSource") {
+ // const source = getComponentSourceFileContent(node)
+ // if (!source) {
+ // return
+ // }
+
+ // // Replace the Source component with a pre element.
+ // node.children?.push(
+ // u("element", {
+ // tagName: "pre",
+ // properties: {
+ // __src__: src,
+ // },
+ // children: [
+ // u("element", {
+ // tagName: "code",
+ // properties: {
+ // className: ["language-tsx"],
+ // },
+ // children: [
+ // {
+ // type: "text",
+ // value: source,
+ // },
+ // ],
+ // }),
+ // ],
+ // })
+ // )
+ // }
+ })
+ }
+}
+
+function getNodeAttributeByName(node: UnistNode, name: string) {
+ return node.attributes?.find((attribute) => attribute.name === name)
+}
+
+function getComponentSourceFileContent(node: UnistNode) {
+ const src = getNodeAttributeByName(node, 'src')?.value as string
+
+ if (!src) {
+ return null
+ }
+
+ // Read the source file.
+ const filePath = path.join(process.cwd(), src)
+ console.log('filePath', filePath)
+ const source = fs.readFileSync(filePath, 'utf8')
+
+ return source
+}
diff --git a/apps/design-system/lib/rehype-npm-command.ts b/apps/design-system/lib/rehype-npm-command.ts
new file mode 100644
index 00000000000..aaa3792922f
--- /dev/null
+++ b/apps/design-system/lib/rehype-npm-command.ts
@@ -0,0 +1,42 @@
+import { UnistNode, UnistTree } from 'types/unist'
+import { visit } from 'unist-util-visit'
+
+export function rehypeNpmCommand() {
+ return (tree: UnistTree) => {
+ visit(tree, (node: UnistNode) => {
+ if (node.type !== 'element' || node?.tagName !== 'pre') {
+ return
+ }
+
+ // npm install.
+ if (node.properties?.['__rawString__']?.startsWith('npm install')) {
+ const npmCommand = node.properties?.['__rawString__']
+ node.properties['__npmCommand__'] = npmCommand
+ node.properties['__yarnCommand__'] = npmCommand.replace('npm install', 'yarn add')
+ node.properties['__pnpmCommand__'] = npmCommand.replace('npm install', 'pnpm add')
+ node.properties['__bunCommand__'] = npmCommand.replace('npm install', 'bun add')
+ }
+
+ // npx create.
+ if (node.properties?.['__rawString__']?.startsWith('npx create-')) {
+ const npmCommand = node.properties?.['__rawString__']
+ node.properties['__npmCommand__'] = npmCommand
+ node.properties['__yarnCommand__'] = npmCommand.replace('npx create-', 'yarn create ')
+ node.properties['__pnpmCommand__'] = npmCommand.replace('npx create-', 'pnpm create ')
+ node.properties['__bunCommand__'] = npmCommand.replace('npx', 'bunx --bun')
+ }
+
+ // npx.
+ if (
+ node.properties?.['__rawString__']?.startsWith('npx') &&
+ !node.properties?.['__rawString__']?.startsWith('npx create-')
+ ) {
+ const npmCommand = node.properties?.['__rawString__']
+ node.properties['__npmCommand__'] = npmCommand
+ node.properties['__yarnCommand__'] = npmCommand
+ node.properties['__pnpmCommand__'] = npmCommand.replace('npx', 'pnpm dlx')
+ node.properties['__bunCommand__'] = npmCommand.replace('npx', 'bunx --bun')
+ }
+ })
+ }
+}
diff --git a/apps/design-system/lib/sample-component.tsx b/apps/design-system/lib/sample-component.tsx
new file mode 100644
index 00000000000..7f12bfb2413
--- /dev/null
+++ b/apps/design-system/lib/sample-component.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { Component } from 'react'
+
+/**
+ * Column properties.
+ */
+export interface IColumnProps {
+ /** prop1 description */
+ prop1?: string
+ /** prop2 description */
+ prop2: number
+ /**
+ * prop3 description
+ */
+ prop3: () => void
+ /** prop4 description */
+ prop4: 'option1' | 'option2' | 'option3'
+}
+
+/**
+ * Form column.
+ */
+export class Column extends ComponentTest
+ }
+}
diff --git a/apps/design-system/lib/themes/supabase-2.json b/apps/design-system/lib/themes/supabase-2.json
new file mode 100644
index 00000000000..81ffd9ec7cb
--- /dev/null
+++ b/apps/design-system/lib/themes/supabase-2.json
@@ -0,0 +1,207 @@
+{
+ "name": "Supabase Theme",
+ "displayName": "Supabase Theme",
+ "semanticHighlighting": true,
+ "colors": {
+ "editor.background": "var(--code-highlight-color)",
+ "editor.foreground": "var(--code-foreground)",
+ "editor.lineHighlightBackground": "var(--code-highlight-color)",
+ "editorCursor.foreground": "var(--code-foreground)",
+ "editorWhitespace.foreground": "var(--code-foreground)",
+ "editorIndentGuide.background": "var(--code-foreground)",
+ "editor.selectionBackground": "var(--code-highlight-color)",
+ "editor.selectionHighlightBackground": "var(--code-highlight-color)"
+ },
+ "tokenColors": [
+ {
+ "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+ "settings": {
+ "foreground": "var(--code-token-comment)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "scope": ["constant", "entity.name.constant", "variable.other.constant"],
+ "settings": {
+ "foreground": "var(--code-token-constant)"
+ }
+ },
+ {
+ "scope": ["entity", "entity.name", "entity.name.type", "support.type"],
+ "settings": {
+ "foreground": "var(--code-token-function)"
+ }
+ },
+ {
+ "scope": ["variable", "support.variable", "variable.parameter"],
+ "settings": {
+ "foreground": "var(--code-token-parameter)"
+ }
+ },
+ {
+ "scope": ["keyword", "storage.type", "storage.modifier", "keyword.control"],
+ "settings": {
+ "foreground": "var(--code-token-keyword)"
+ }
+ },
+ {
+ "scope": ["string", "constant.other.symbol", "constant.other.key", "string.quoted"],
+ "settings": {
+ "foreground": "var(--code-token-string)"
+ }
+ },
+ {
+ "scope": ["support.function", "entity.name.function"],
+ "settings": {
+ "foreground": "var(--code-token-function)"
+ }
+ },
+ {
+ "scope": ["punctuation", "punctuation.separator", "meta.brace", "punctuation.definition"],
+ "settings": {
+ "foreground": "var(--code-token-punctuation)"
+ }
+ },
+ {
+ "scope": ["meta.tag", "declaration.tag", "markup.deleted"],
+ "settings": {
+ "foreground": "var(--code-token-function)"
+ }
+ },
+ {
+ "scope": ["markup.inserted"],
+ "settings": {
+ "foreground": "var(--code-token-string)"
+ }
+ },
+ {
+ "scope": ["markup.changed"],
+ "settings": {
+ "foreground": "var(--code-token-string-expression)"
+ }
+ },
+ {
+ "scope": ["invalid", "invalid.deprecated"],
+ "settings": {
+ "foreground": "var(--code-foreground)",
+ "background": "var(--code-token-comment)"
+ }
+ },
+ {
+ "scope": ["support.type.property-name"],
+ "settings": {
+ "foreground": "var(--code-token-property)"
+ }
+ },
+ {
+ "scope": ["entity.other.attribute-name"],
+ "settings": {
+ "foreground": "var(--code-token-property)"
+ }
+ },
+ {
+ "scope": ["meta.object-literal.key"],
+ "settings": {
+ "foreground": "var(--code-token-property)"
+ }
+ },
+ {
+ "scope": ["entity.other.attribute-name", "entity.other.inherited-class"],
+ "settings": {
+ "foreground": "var(--code-token-property)"
+ }
+ },
+ {
+ "scope": ["storage", "storage.type", "storage.modifier"],
+ "settings": {
+ "foreground": "var(--code-token-keyword)"
+ }
+ },
+ {
+ "scope": ["support.class"],
+ "settings": {
+ "foreground": "var(--code-token-function)"
+ }
+ },
+ {
+ "scope": ["constant.language"],
+ "settings": {
+ "foreground": "var(--code-token-constant)"
+ }
+ },
+ {
+ "scope": ["meta.embedded"],
+ "settings": {
+ "foreground": "var(--code-token-string-expression)"
+ }
+ },
+ {
+ "scope": ["meta.function-call"],
+ "settings": {
+ "foreground": "var(--code-token-function)"
+ }
+ },
+ {
+ "scope": ["meta.method-call"],
+ "settings": {
+ "foreground": "var(--code-token-function)"
+ }
+ },
+ {
+ "scope": ["meta.return-type"],
+ "settings": {
+ "foreground": "var(--code-token-keyword)"
+ }
+ },
+ {
+ "scope": [
+ "meta.import",
+ "meta.import.js",
+ "meta.import.ts",
+ "meta.import.tsx",
+ "meta.import.jsx",
+ "string.quoted.single.js",
+ "string.quoted.double.js",
+ "string.quoted.single.ts",
+ "string.quoted.double.ts",
+ "string.quoted.single.tsx",
+ "string.quoted.double.tsx",
+ "string.quoted.single.jsx",
+ "string.quoted.double.jsx"
+ ],
+ "settings": {
+ "foreground": "var(--code-token-string-expression)"
+ }
+ },
+ {
+ "scope": ["meta.var.expr"],
+ "settings": {
+ "foreground": "var(--code-token-variable)"
+ }
+ },
+ {
+ "scope": ["meta.block"],
+ "settings": {
+ "foreground": "var(--code-foreground)"
+ }
+ },
+ {
+ "scope": ["meta.delimiter.period"],
+ "settings": {
+ "foreground": "var(--code-foreground)"
+ }
+ },
+ {
+ "scope": ["meta.brace.round"],
+ "settings": {
+ "foreground": "var(--code-foreground)"
+ }
+ },
+ {
+ "scope": ["meta.paren.expr"],
+ "settings": {
+ "foreground": "var(--code-foreground)"
+ }
+ }
+ ]
+}
diff --git a/apps/design-system/lib/toc.ts b/apps/design-system/lib/toc.ts
new file mode 100644
index 00000000000..c11d0b83031
--- /dev/null
+++ b/apps/design-system/lib/toc.ts
@@ -0,0 +1,79 @@
+// @ts-nocheck
+// TODO: I'll fix this later.
+
+import { toc } from 'mdast-util-toc'
+import { remark } from 'remark'
+import { visit } from 'unist-util-visit'
+
+const textTypes = ['text', 'emphasis', 'strong', 'inlineCode']
+
+function flattenNode(node) {
+ const p = []
+ visit(node, (node) => {
+ if (!textTypes.includes(node.type)) return
+ p.push(node.value)
+ })
+ return p.join(``)
+}
+
+interface Item {
+ title: string
+ url: string
+ items?: Item[]
+}
+
+interface Items {
+ items?: Item[]
+}
+
+function getItems(node, current): Items {
+ if (!node) {
+ return {}
+ }
+
+ if (node.type === 'paragraph') {
+ visit(node, (item) => {
+ if (item.type === 'link') {
+ current.url = item.url
+ current.title = flattenNode(node)
+ }
+
+ if (item.type === 'text') {
+ current.title = flattenNode(node)
+ }
+ })
+
+ return current
+ }
+
+ if (node.type === 'list') {
+ current.items = node.children.map((i) => getItems(i, {}))
+
+ return current
+ } else if (node.type === 'listItem') {
+ const heading = getItems(node.children[0], {})
+
+ if (node.children.length > 1) {
+ getItems(node.children[1], heading)
+ }
+
+ return heading
+ }
+
+ return {}
+}
+
+const getToc = () => (node, file) => {
+ const table = toc(node)
+ const items = getItems(table.map, {})
+
+ file.data = items
+}
+
+export type TableOfContents = Items
+
+export async function getTableOfContents(content: string): Promise
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-demo.tsx b/apps/design-system/registry/default/example/button-demo.tsx
new file mode 100644
index 00000000000..be612ebfafa
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-demo.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonDemo() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-destructive.tsx b/apps/design-system/registry/default/example/button-destructive.tsx
new file mode 100644
index 00000000000..33e1c7005ec
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-destructive.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonDestructive() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-ghost.tsx b/apps/design-system/registry/default/example/button-ghost.tsx
new file mode 100644
index 00000000000..0230b5a104b
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-ghost.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonGhost() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-icon.tsx b/apps/design-system/registry/default/example/button-icon.tsx
new file mode 100644
index 00000000000..a48c8f0e3af
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-icon.tsx
@@ -0,0 +1,7 @@
+import { ChevronRight } from 'lucide-react'
+
+import { Button } from 'ui'
+
+export default function ButtonIcon() {
+ return }>
+}
diff --git a/apps/design-system/registry/default/example/button-link.tsx b/apps/design-system/registry/default/example/button-link.tsx
new file mode 100644
index 00000000000..a34a15aa152
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-link.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonLink() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-loading.tsx b/apps/design-system/registry/default/example/button-loading.tsx
new file mode 100644
index 00000000000..9320b8f0fd7
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-loading.tsx
@@ -0,0 +1,9 @@
+import { Button } from 'ui'
+
+export default function ButtonLoading() {
+ return (
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-outline.tsx b/apps/design-system/registry/default/example/button-outline.tsx
new file mode 100644
index 00000000000..da8039f0c4d
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-outline.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonOutline() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-secondary.tsx b/apps/design-system/registry/default/example/button-secondary.tsx
new file mode 100644
index 00000000000..59a1fdcdcaf
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-secondary.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonSecondary() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-sizes.tsx b/apps/design-system/registry/default/example/button-sizes.tsx
new file mode 100644
index 00000000000..d625a4e6305
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-sizes.tsx
@@ -0,0 +1,24 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonDemo() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-warning.tsx b/apps/design-system/registry/default/example/button-warning.tsx
new file mode 100644
index 00000000000..e50b6abc8c7
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-warning.tsx
@@ -0,0 +1,19 @@
+import { Mail } from 'lucide-react'
+import { Button } from 'ui'
+
+export default function ButtonDemo() {
+ return (
+
+
+
+ }>
+ Button icon
+
+ }>
+ Button iconRight
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/button-with-icon.tsx b/apps/design-system/registry/default/example/button-with-icon.tsx
new file mode 100644
index 00000000000..207f6749f15
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-with-icon.tsx
@@ -0,0 +1,7 @@
+import { Mail } from 'lucide-react'
+
+import { Button } from 'ui'
+
+export default function ButtonWithIcon() {
+ return }>Login with Email
+}
diff --git a/apps/design-system/registry/default/example/calendar-demo.tsx b/apps/design-system/registry/default/example/calendar-demo.tsx
new file mode 100644
index 00000000000..b635acc6583
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-demo.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+
+import { Calendar } from 'ui'
+
+export default function CalendarDemo() {
+ const [date, setDate] = React.useState
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-disabled.tsx b/apps/design-system/registry/default/example/checkbox-disabled.tsx
new file mode 100644
index 00000000000..0d5356651fa
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox_Shadcn_ } from 'ui'
+
+export default function CheckboxDisabled() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
new file mode 100644
index 00000000000..d1eacb70b38
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import { Checkbox_Shadcn_ } from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { toast } from 'ui'
+
+const items = [
+ {
+ id: 'recents',
+ label: 'Recents',
+ },
+ {
+ id: 'home',
+ label: 'Home',
+ },
+ {
+ id: 'applications',
+ label: 'Applications',
+ },
+ {
+ id: 'desktop',
+ label: 'Desktop',
+ },
+ {
+ id: 'downloads',
+ label: 'Downloads',
+ },
+ {
+ id: 'documents',
+ label: 'Documents',
+ },
+] as const
+
+const FormSchema = z.object({
+ items: z.array(z.string()).refine((value) => value.some((item) => item), {
+ message: 'You have to select at least one item.',
+ }),
+})
+
+export default function CheckboxReactHookFormMultiple() {
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/collapsible-demo.tsx b/apps/design-system/registry/default/example/collapsible-demo.tsx
new file mode 100644
index 00000000000..4c4bd31b02c
--- /dev/null
+++ b/apps/design-system/registry/default/example/collapsible-demo.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronsUpDown, Plus, X } from 'lucide-react'
+
+import { Button } from 'ui'
+import { Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui'
+
+export default function CollapsibleDemo() {
+ const [isOpen, setIsOpen] = React.useState(false)
+
+ return (
+
+
+
+ + You agree to our Terms of Service and Privacy Policy. +
+
+
+
+
+
+ @peduarte starred 3 repositories
+@radix-ui/primitives
+ @radix-ui/colors
+ @stitches/react
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/color-usage-surface-studio.tsx b/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
new file mode 100644
index 00000000000..893abbd1893
--- /dev/null
+++ b/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
@@ -0,0 +1,36 @@
+import { ClassLabel } from '@/components/class-label'
+import { ExampleLabel } from '@/components/example-label'
+import * as React from 'react'
+
+export default function Demo() {
+ return (
+
+
+
+ grid header
+ bg-surface-200
+ border
+
+
+
+
+ content row
+ bg-200
+ border-secondary
+
+
+
+
+ content row
+ bg-200
+ border-secondary
+
+
+
+
+ content row
+ bg-200
+ border-secondary
+
+
+
+
+ content row
+ bg-200
+ border-secondary
+
+
+ empty frame space
+ bg-alternative
+ border-stronger
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx b/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
new file mode 100644
index 00000000000..29c4eba1e11
--- /dev/null
+++ b/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
@@ -0,0 +1,19 @@
+import { ClassLabel } from '@/components/class-label'
+import { ExampleLabel } from '@/components/example-label'
+import * as React from 'react'
+
+export default function Demo() {
+ return (
+
+ app background
+ bg-studio
+
+
+
+
+ content panel
+ bg-surface-100
+ border
+
+
+
+
+ content panel
+ bg-surface-200
+ border
+
+
+
+
+
+ content panel
+ bg-surface-300
+ border
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/combobox-demo.tsx b/apps/design-system/registry/default/example/combobox-demo.tsx
new file mode 100644
index 00000000000..60aa8c843f0
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-demo.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import {
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+const frameworks = [
+ {
+ value: 'next.js',
+ label: 'Next.js',
+ },
+ {
+ value: 'sveltekit',
+ label: 'SvelteKit',
+ },
+ {
+ value: 'nuxt.js',
+ label: 'Nuxt.js',
+ },
+ {
+ value: 'remix',
+ label: 'Remix',
+ },
+ {
+ value: 'astro',
+ label: 'Astro',
+ },
+]
+
+export default function ComboboxDemo() {
+ const [open, setOpen] = React.useState(false)
+ const [value, setValue] = React.useState('')
+
+ return (
+
+ app background
+ bg
+
+
+ content panel
+ bg-surface-75
+ border-muted
+
+
+
+
+ }
+ >
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+ No label found.
+
+ {labels.map((label) => (
+ {
+ setLabel(value)
+ setOpen(false)
+ }}
+ >
+ {label}
+
+ ))}
+
+
+
+
+
+
+ ⌘⌫
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
new file mode 100644
index 00000000000..92af712e2d2
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import {
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+} from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const languages = [
+ { label: 'English', value: 'en' },
+ { label: 'French', value: 'fr' },
+ { label: 'German', value: 'de' },
+ { label: 'Spanish', value: 'es' },
+ { label: 'Portuguese', value: 'pt' },
+ { label: 'Russian', value: 'ru' },
+ { label: 'Japanese', value: 'ja' },
+ { label: 'Korean', value: 'ko' },
+ { label: 'Chinese', value: 'zh' },
+] as const
+
+const FormSchema = z.object({
+ language: z.string({
+ required_error: 'Please select a language.',
+ }),
+})
+
+export default function ComboboxForm() {
+ const form = useForm+ + {label} + + Create a new project +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+
+
+ ) : (
+
+
+
+
+ No results found.
+
+ {statuses.map((status) => (
+ {
+ setSelectedStatus(
+ statuses.find((priority) => priority.value === value) || null
+ )
+ setOpen(false)
+ }}
+ >
+
+ ))}
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/combobox-responsive.tsx b/apps/design-system/registry/default/example/combobox-responsive.tsx
new file mode 100644
index 00000000000..997faf87937
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-responsive.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { Button, CommandList_Shadcn_ } from 'ui'
+import {
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { Drawer, DrawerContent, DrawerTrigger } from 'ui'
+import { Plus } from 'lucide-react'
+
+type Status = {
+ value: string
+ label: string
+}
+
+const statuses: Status[] = [
+ {
+ value: 'backlog',
+ label: 'Backlog',
+ },
+ {
+ value: 'todo',
+ label: 'Todo',
+ },
+ {
+ value: 'in progress',
+ label: 'In Progress',
+ },
+ {
+ value: 'done',
+ label: 'Done',
+ },
+ {
+ value: 'canceled',
+ label: 'Canceled',
+ },
+]
+
+export default function ComboBoxResponsive() {
+ const [open, setOpen] = React.useState(false)
+ const isDesktop = useMediaQuery('(min-width: 768px)')
+ const [selectedStatus, setSelectedStatus] = React.useStateStatus
+
+
+ + Press{' '} + + ⌘J + +
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/dialog-close-button.tsx b/apps/design-system/registry/default/example/dialog-close-button.tsx
new file mode 100644
index 00000000000..4c45847ef7b
--- /dev/null
+++ b/apps/design-system/registry/default/example/dialog-close-button.tsx
@@ -0,0 +1,57 @@
+import { Copy } from 'lucide-react'
+
+import { Button, DialogSection, DialogSectionSeparator } from 'ui'
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function DialogCloseButton() {
+ return (
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/dialog-demo.tsx b/apps/design-system/registry/default/example/dialog-demo.tsx
new file mode 100644
index 00000000000..68e81be28d5
--- /dev/null
+++ b/apps/design-system/registry/default/example/dialog-demo.tsx
@@ -0,0 +1,48 @@
+import { Button, DialogSection, DialogSectionSeparator } from 'ui'
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function DialogDemo() {
+ return (
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/drawer-demo.tsx b/apps/design-system/registry/default/example/drawer-demo.tsx
new file mode 100644
index 00000000000..ce28bb12084
--- /dev/null
+++ b/apps/design-system/registry/default/example/drawer-demo.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { Minus, Plus } from 'lucide-react'
+import { Bar, BarChart, ResponsiveContainer } from 'recharts'
+
+import { Button } from 'ui'
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from 'ui'
+
+const data = [
+ {
+ goal: 400,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 278,
+ },
+ {
+ goal: 189,
+ },
+ {
+ goal: 239,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 278,
+ },
+ {
+ goal: 189,
+ },
+ {
+ goal: 349,
+ },
+]
+
+export default function DrawerDemo() {
+ const [goal, setGoal] = React.useState(350)
+
+ function onClick(adjustment: number) {
+ setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+ }
+
+ return (
+
+
+ Move Goal
+ Set your daily activity goal.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {goal}
+ Calories/day
+
+
+
+
+
+
+
+
+ VC
+
+
+
+
+ @nextjs
+The React Framework – created and maintained by @vercel.
+
+
+
+ Picture
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-form.tsx b/apps/design-system/registry/default/example/input-form.tsx
new file mode 100644
index 00000000000..21445090f8a
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import { Input } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+ username: z.string().min(2, {
+ message: 'Username must be at least 2 characters.',
+ }),
+})
+
+export default function InputForm() {
+ const form = useForm
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+ setValue(value)}>
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-demo.tsx b/apps/design-system/registry/default/example/input-otp-demo.tsx
new file mode 100644
index 00000000000..ac9bf81ea68
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-demo.tsx
@@ -0,0 +1,19 @@
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
+
+export default function InputOTPDemo() {
+ return (
+
+ {value === '' ? <>Enter your one-time password. : <>You entered: {value}}
+
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ })
+ }
+
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-with-label.tsx b/apps/design-system/registry/default/example/input-with-label.tsx
new file mode 100644
index 00000000000..c9f0ea60256
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-with-label.tsx
@@ -0,0 +1,10 @@
+import { Input_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function InputWithLabel() {
+ return (
+
+ Email
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/input-with-text.tsx b/apps/design-system/registry/default/example/input-with-text.tsx
new file mode 100644
index 00000000000..d401e2de140
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-with-text.tsx
@@ -0,0 +1,11 @@
+import { Input_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function InputWithText() {
+ return (
+
+ Email
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/label-demo.tsx b/apps/design-system/registry/default/example/label-demo.tsx
new file mode 100644
index 00000000000..777b0624c9d
--- /dev/null
+++ b/apps/design-system/registry/default/example/label-demo.tsx
@@ -0,0 +1,12 @@
+import { Checkbox_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function LabelDemo() {
+ return (
+ Enter your email address.
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/menubar-demo.tsx b/apps/design-system/registry/default/example/menubar-demo.tsx
new file mode 100644
index 00000000000..87dbb560f22
--- /dev/null
+++ b/apps/design-system/registry/default/example/menubar-demo.tsx
@@ -0,0 +1,105 @@
+import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from 'ui'
+
+export default function MenubarDemo() {
+ return (
+
+ Accept terms and conditions
+
+
+
+ }
+ >
+
+
+
+
+ This is the title
+ This is the title ++ Modal content is inserted here, if you need to insert anything into the Modal you can do + so via `children`. +
+
+
+ }
+ customFooter={
+
+
+
+
+ This is the title
+ This is the title +
+
+ }
+ >
+
+
+ Proceed with caution
+
+
+
+
+ + Modal content is inserted here, if you need to insert anything into the Modal you can do + so via `children`. +
+
+
+ }
+ >
+
+
+
+
+ This is the title
+ This is the title ++ Modal content is inserted here, if you need to insert anything into the Modal you can do + so via `children`. +
+
+
+ }
+ >
+
+
+
+
+ This is the title
+ This is the title ++ Modal content is inserted here, if you need to insert anything into the Modal you can do + so via `children`. +
+
+
+ }
+ >
+
+
+
+
+ This is the title
+ This is the title ++ Modal content is inserted here, if you need to insert anything into the Modal you can do + so via `children`. +
+