{faq.question}
- -{faq.answer}
-
- {
- const {
- data: { user },
- } = await supabase.auth.getUser()
- if (!user) {
- event.preventDefault()
- localStorage.setItem('prompt', value)
- snap.setLoginDialogOpen(true)
- return
- }
- }}
- value={value}
- placeholder="e.g Create a Telegram-like chat application"
- onValueChange={(e) => setValue(e.target.value)}
- message={state?.message}
- />
- {state?.message &&
- {state?.message}
} -
- {suggestions.map((suggestion, idx) => (
-
- ))}
-
-
- )
-}
-
-export default NewThreadInput
diff --git a/apps/database-new/app/[threadId]/[runId]/BottomMarker.tsx b/apps/database-new/app/[threadId]/[runId]/BottomMarker.tsx
deleted file mode 100644
index 1231218a54c..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/BottomMarker.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client'
-
-import { createRef, useEffect } from 'react'
-
-const BottomMarker = () => {
- const ref = createRef
-
- )
-}
-
-export { Chat }
diff --git a/apps/database-new/app/[threadId]/[runId]/ChatInput.tsx b/apps/database-new/app/[threadId]/[runId]/ChatInput.tsx
deleted file mode 100644
index 64bf1af14dd..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/ChatInput.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-
-import { updateThread } from '@/app/actions'
-import { AssistantChatForm } from '@/components/AssistantChatForm'
-import { useState } from 'react'
-import { useFormState, useFormStatus } from 'react-dom'
-import { Input } from 'ui'
-
-function ChatInput({ params }: { params: { threadId: string; runId: string } }) {
- const [value, setValue] = useState('')
-
- const { threadId, runId } = params
-
- const initialState = {
- message: undefined,
- success: undefined,
- data: {
- value,
- },
- }
-
- const [state, formAction] = useFormState(updateThread, initialState)
-
- const Message = () => {
- const { pending } = useFormStatus()
-
- console.log('state.message', state.message)
-
- return !state.success && state.success !== undefined && !pending ? (
-
-
-
-
-
- loading}>
-
-
- {state.message}
- ) : null - } - - return ( -
- setValue(v.target.value)}
- message={state.message}
- >
-
-
-
-
- )
-}
-
-export { ChatInput }
diff --git a/apps/database-new/app/[threadId]/[runId]/Messages.tsx b/apps/database-new/app/[threadId]/[runId]/Messages.tsx
deleted file mode 100644
index c4fb282dd94..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/Messages.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { sortBy } from 'lodash'
-import OpenAI from 'openai'
-import UserChat from './UserChat'
-
-dayjs.extend(relativeTime)
-
-const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
-
-async function Messages({ params }: { params: { threadId: string; runId: string } }) {
- const [run, { data: messages }] = await Promise.all([
- openai.beta.threads.runs.retrieve(params.threadId, params.runId),
- openai.beta.threads.messages.list(params.threadId),
- ])
-
- const messagesSorted = sortBy(messages, (m) => m.created_at)
-
- const userMessages = messagesSorted.filter((message) => message.role === 'user')
-
- return (
-
- {userMessages.map((message, idx) => {
- const index = messages.indexOf(message)
-
- const reply = messages[index + 1]
- const isLatest = idx === userMessages.length - 1
-
- const hoursFromNow = dayjs().diff(dayjs(message.created_at * 1000), 'hours')
- const formattedTimeFromNow = dayjs(message.created_at * 1000).fromNow()
- const formattedCreatedAt = dayjs(message.created_at * 1000).format('DD MMM YYYY, HH:mm')
- const replyDuration =
- reply !== undefined ? reply.created_at - message.created_at : undefined
-
- const times = {
- hoursFromNow,
- formattedTimeFromNow,
- formattedCreatedAt,
- replyDuration,
- }
-
- return (
-
- )
-}
-
-export { Messages }
diff --git a/apps/database-new/app/[threadId]/[runId]/UserChat.tsx b/apps/database-new/app/[threadId]/[runId]/UserChat.tsx
deleted file mode 100644
index 8abc0683a6e..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/UserChat.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-'use client'
-
-import { useAppStateSnapshot } from '@/lib/state'
-import { pull } from 'lodash'
-import Link from 'next/link'
-import { useParams, usePathname, useRouter } from 'next/navigation'
-import OpenAI from 'openai'
-import { useEffect } from 'react'
-import { cn } from 'ui'
-
-interface UserChatProps {
- message: OpenAI.Beta.Threads.Messages.ThreadMessage
- isLatest: boolean
- times: {
- hoursFromNow: number
- formattedTimeFromNow: string
- formattedCreatedAt: string
- replyDuration: number | undefined
- }
- run: OpenAI.Beta.Threads.Run
-}
-
-const UserChat = ({ message, isLatest, times, run }: UserChatProps) => {
- const router = useRouter()
- const snap = useAppStateSnapshot()
- const { threadId, runId } = useParams()
-
- // console.log(run)
-
- const LOADING_STATUSES = ['in_progress', 'queued']
-
- const runIsInProgressRemotely = LOADING_STATUSES.includes(run.status)
-
- useEffect(() => {
- if (runIsInProgressRemotely) {
- // set a local state for run loading
- // this state will be updated via other client components when completing a run
- // remove current message id from array if it exists
- let currentRunsLoading = [...snap.runsLoading]
- pull(currentRunsLoading, run.id)
- const payload = [...currentRunsLoading, run.id]
- snap.setRunsLoading([...payload])
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [runIsInProgressRemotely, run.id]) // Intentionally left snap out of the dependency array
-
- // using the local state for run loading
- const isLoading = snap.runsLoading.includes(run.id) && isLatest
-
- const { hoursFromNow, formattedTimeFromNow, formattedCreatedAt, replyDuration } = times
-
- // chat shown as selected when url matches
- const isSelected = usePathname().includes(message.id)
-
- // extract the text from the assistant message
- const message_content = message.content[0]
- const text = message_content.type === 'text' ? message_content.text.value : ''
-
- return (
-
-
-
- {isLoading && (
-
-
-
- )}
- {/* Node line*/}
- {!isLatest && }
-
-
-
-
-
- )
-}
-
-export default UserChat
diff --git a/apps/database-new/app/[threadId]/[runId]/[messageId]/CodeEditor.tsx b/apps/database-new/app/[threadId]/[runId]/[messageId]/CodeEditor.tsx
deleted file mode 100644
index 272ba15558f..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/[messageId]/CodeEditor.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { format } from 'sql-formatter'
-
-import { getThread } from './MessageId.utils'
-import { MonacoEditor } from './MonacoEditor'
-import { CodeEditorContainer } from './CodeEditorContainer'
-
-import OpenAI from 'openai'
-
-const openai = new OpenAI()
-
-async function waitForRunCompletion(params: { threadId: string; runId: string }) {
- console.log('waiting for run completion')
- let realRun = await openai.beta.threads.runs.retrieve(params.threadId, params.runId)
-
- while (realRun.status === 'in_progress') {
- //console.log('while..')
- await new Promise((resolve) => setTimeout(resolve, 2000))
- realRun = await openai.beta.threads.runs.retrieve(params.threadId, params.runId)
- //console.log('realRun', realRun.status)
- }
-
- //console.log('Run completed:', realRun.status)
-}
-
-export async function CodeEditor({ params }: { params: any }) {
- const { threadId, runId, messageId } = params
-
- await waitForRunCompletion(params)
-
- const content = await getThread({ threadId, runId, messageId })
-
- const code = format(content, { language: 'postgresql' })
-
- // keep polling until the run is completed
-
- // useEffect(() => {
- // snap.setSelectedCode(code)
- // }, [code])
-
- /**
- * - CodeEditorContainer is a client component, which uses valtio state
- * - MonacoEditor is a server component injected into it
- */
-
- return (
-
-
-
-
-
- {isSelected && (
-
-
- - {text} -
- {/* {isLoading && } */} -- Sent {hoursFromNow > 6 ? `on ${formattedCreatedAt}` : formattedTimeFromNow} - {replyDuration !== undefined - ? ` with ${replyDuration}s response` - : isLoading - ? ', generating response...' - : ''} -
- )} -
- {children}
-
- )
-}
-
-export { CodeEditorContainer }
diff --git a/apps/database-new/app/[threadId]/[runId]/[messageId]/MessageId.utils.ts b/apps/database-new/app/[threadId]/[runId]/[messageId]/MessageId.utils.ts
deleted file mode 100644
index 73e2ef4ccb1..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/[messageId]/MessageId.utils.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-'use server'
-
-import OpenAI from 'openai'
-
-import { AssistantMessage } from '@/lib/types'
-import { compact, sortBy } from 'lodash'
-
-const openai = new OpenAI()
-
-async function getThread({
- threadId,
- runId,
- messageId,
-}: {
- threadId: string
- runId: string
- messageId: string
-}) {
- const [run, { data: _messages }] = await Promise.all([
- openai.beta.threads.runs.retrieve(threadId, runId),
- openai.beta.threads.messages.list(threadId),
- ])
-
- let messages = compact(
- await Promise.all(
- _messages.map(async (m) => {
- if (m.role === 'user' && m.content[0].type === 'text') {
- return {
- id: m.id,
- role: 'user' as const,
- created_at: m.created_at,
- text: m.content[0].text.value,
- }
- }
-
- if (m.content.length >= 1 && m.content[0].type === 'text') {
- let sql = ''
- if (m.content[0].type === 'text') {
- sql = m.content[0].text.value.replaceAll('\n', '')
- }
- return {
- id: m.id,
- role: 'assistant' as const,
- created_at: m.created_at,
- sql,
- }
- }
- })
- )
- )
-
- messages = sortBy(messages, (m) => m.created_at)
-
- const userMessages = messages.filter((m) => m.role === 'user')
-
- const selectedMessageIdx = messages.findIndex((m) => m.id === messageId)
- const selectedMessageReply = (
- selectedMessageIdx !== -1 ? messages[selectedMessageIdx + 1] : undefined
- ) as AssistantMessage | undefined
-
- const content = selectedMessageReply?.sql.replaceAll('```sql', '').replaceAll('```', '') || ''
-
- return content
-}
-
-export { getThread }
diff --git a/apps/database-new/app/[threadId]/[runId]/[messageId]/MonacoEditor.tsx b/apps/database-new/app/[threadId]/[runId]/[messageId]/MonacoEditor.tsx
deleted file mode 100644
index f7cf4421cc4..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/[messageId]/MonacoEditor.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'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) => {
- const snap = useAppStateSnapshot()
- const params = useParams()
-
- const runId = params.runId as string
-
- useEffect(() => {
- const runIsLoading = snap.runsLoading.includes(runId)
- if (runIsLoading) {
- // let currentRunsLoading = snap.runsLoading
- const payload = [...snap.runsLoading.filter((item) => item !== runId)]
- snap.setRunsLoading([...payload])
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [runId]) // Intentionally left snap out of the dependency array
-
- return (
-
-
- {data.name}
- {targetPosition && (
-
-
- ) : (
-
-
-
-
- {data.columns.map((column) => (
-
- )}
-
- )
-}
-
-export default TableNode
diff --git a/apps/database-new/app/[threadId]/[runId]/[messageId]/page.tsx b/apps/database-new/app/[threadId]/[runId]/[messageId]/page.tsx
deleted file mode 100644
index eca31d6840f..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/[messageId]/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CodeEditor } from '@/app/[threadId]/[runId]/[messageId]/CodeEditor'
-import { SchemaFlow } from '@/app/[threadId]/[runId]/[messageId]/SchemaFlow'
-import GraphLoader from '@/components/Loaders/GraphLoader'
-import SchemaLoader from '@/components/Loaders/SchemaLoader'
-import { Loader2 } from 'lucide-react'
-import Image from 'next/image'
-import { Suspense } from 'react'
-
-interface ThreadPageProps {
- params: {
- threadId: string
- runId: string
- messageId: string
- }
-}
-
-export default async function ThreadPage({ params }: ThreadPageProps) {
- return (
-
-
- ))}
-
- {column.isPrimary && (
-
-
-
- {column.name}
-
-
- {column.format}
-
-
- {targetPosition && (
-
-
- )
-}
diff --git a/apps/database-new/app/[threadId]/[runId]/layout.tsx b/apps/database-new/app/[threadId]/[runId]/layout.tsx
deleted file mode 100644
index c8bf55dbef4..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Chat } from '@/app/[threadId]/[runId]/Chat'
-import SaveSchemaDropdown from '@/components/Header/SaveSchemaDropdown'
-import ToggleCodeEditorButton from '@/components/Header/ToggleCodeEditorButton'
-
-export default function Layout({
- children,
- params,
-}: {
- children: React.ReactNode
- params: { threadId: string; runId: string }
-}) {
- return (
-
-
- )
-}
diff --git a/apps/database-new/app/[threadId]/[runId]/page----delete.tsx b/apps/database-new/app/[threadId]/[runId]/page----delete.tsx
deleted file mode 100644
index 87b9c8530a3..00000000000
--- a/apps/database-new/app/[threadId]/[runId]/page----delete.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react'
-
-const RunIdPage = async () => {
- return <>
-}
-
-import OpenAI from 'openai'
-
-import { AssistantMessage } from '@/lib/types'
-import { compact, sortBy } from 'lodash'
-
-const openai = new OpenAI()
-
-async function getThread({
- threadId,
- runId,
- messageId,
-}: {
- threadId: string
- runId: string
- messageId: string
-}) {
- console.log('getting thread..', threadId, runId, messageId)
-
- const [run, { data: _messages }] = await Promise.all([
- openai.beta.threads.runs.retrieve(threadId, runId),
- openai.beta.threads.messages.list(threadId),
- ])
-
- let messages = compact(
- await Promise.all(
- _messages.map(async (m) => {
- if (m.role === 'user' && m.content[0].type === 'text') {
- return {
- id: m.id,
- role: 'user' as const,
- created_at: m.created_at,
- text: m.content[0].text.value,
- }
- }
-
- if (m.content.length >= 1 && m.content[0].type === 'text') {
- let sql = ''
- if (m.content[0].type === 'text') {
- sql = m.content[0].text.value.replaceAll('\n', '')
- }
- return {
- id: m.id,
- role: 'assistant' as const,
- created_at: m.created_at,
- sql,
- }
- }
- })
- )
- )
-
- messages = sortBy(messages, (m) => m.created_at)
-
- // const userMessages = messages.filter((m) => m.role === 'user')
-
- const selectedMessageIdx = messages.findIndex((m) => m.id === messageId)
- const selectedMessageReply = (
- selectedMessageIdx !== -1 ? messages[selectedMessageIdx + 1] : undefined
- ) as AssistantMessage | undefined
-
- const content = selectedMessageReply?.sql.replaceAll('```sql', '').replaceAll('```', '') || ''
-
- return content
-}
-
-export { getThread }
-
-export default RunIdPage
diff --git a/apps/database-new/app/actions.ts b/apps/database-new/app/actions.ts
deleted file mode 100644
index 6b5ebebdd93..00000000000
--- a/apps/database-new/app/actions.ts
+++ /dev/null
@@ -1,293 +0,0 @@
-'use server'
-
-import { last, sortBy } from 'lodash'
-
-import { AssistantMessage } from '@/lib/types'
-import { parseTables } from '@/lib/utils'
-
-import { createClient } from '@/lib/supabase/server'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-import { RedirectType, redirect } from 'next/navigation'
-
-import OpenAI from 'openai'
-import { z } from 'zod'
-import { threadId } from 'worker_threads'
-import { MessageContentText } from 'openai/resources/beta/threads/index.mjs'
-
-const openai = new OpenAI()
-
-export async function logout() {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- const { error } = await supabase.auth.signOut()
-
- if (error) {
- console.log('Error logging out:', error.message)
- return
- }
-
- revalidatePath('/', 'layout')
- redirect('/')
-}
-
-export async function deleteThread(prevState: any, formData: FormData) {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- 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('thread_id', data.thread_id)
- await openai.beta.threads.del(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 cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- try {
- const schema = z.object({
- thread_title: z.string(),
- row_id: z.string(),
- })
-
- const data = schema.parse({
- thread_title: formData.get('thread_title'),
- row_id: formData.get('row_id'),
- })
-
- const { error } = await supabase
- .from('threads')
- .update({ thread_title: data.thread_title })
- .eq('id', data.row_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,
- }
- }
-}
-
-export async function createThread(prevState: any, formData: FormData) {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- let redirectUrl = ''
-
- try {
- const schema = z.object({
- value: z.string(),
- })
-
- const data = schema.parse({
- value: formData.get('value'),
- })
-
- const {
- data: { user },
- error: userError,
- } = await supabase.auth.getUser()
-
- if (userError || !user) {
- return {
- success: false,
- message: 'Failed to get user',
- data: undefined,
- }
- }
-
- const thread = await openai.beta.threads.create()
-
- const message = await openai.beta.threads.messages.create(thread.id, {
- role: 'user',
- content: data.value,
- })
-
- const createRun = await openai.beta.threads.runs.create(thread.id, {
- assistant_id: 'asst_oLWrK8lScZVNEpfjwUIvBAnq',
- })
-
- const [run, { data: messages }] = await Promise.all([
- openai.beta.threads.runs.retrieve(thread.id, createRun.id),
- openai.beta.threads.messages.list(thread.id),
- ])
-
- const threadTitle = messages
- .filter((m) => m.role === 'user' && m.content[0]?.type === 'text')
- .map((m) => {
- if (m.content[0]?.type === 'text') {
- return m.content[0]?.text?.value
- }
- return undefined
- })
- .find((text) => text !== undefined)
-
- try {
- const { error } = await supabase.from('threads').insert({
- thread_id: thread.id,
- run_id: run.id,
- user_id: user.id,
- thread_title: threadTitle as string,
- latest_message_id: message.id,
- })
- revalidatePath('/profile')
- if (error) throw error
- } catch (error) {
- console.error(error)
- }
-
- // insert into supabase
- try {
- const { error } = await supabase.from('messages_user').insert({
- message_id: message.id,
- thread_id: thread.id,
- text: (message.content[0] as MessageContentText).text.value,
- run_id: run.id,
- user_id: user.id,
- })
- if (error) throw error
- } catch (error) {
- console.error(error)
- }
-
- redirectUrl = `/${thread.id}/${run.id}/${message.id}`
- // return {
- // success: true,
- // message: 'Managed to run action',
- // data: {
- // messageId: message.id,
- // runId: run.id,
- // threadId: thread.id,
- // },
- // }
- } catch (error: any) {
- console.error(error)
- return {
- success: false,
- message: 'Failed to update title to update title',
- data: undefined,
- }
- }
-
- redirect(redirectUrl)
-}
-
-export async function updateThread(prevState: any, formData: FormData) {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
- let redirectUrl = ''
-
- try {
- const schema = z.object({
- value: z.string(),
- threadId: z.string(),
- runId: z.string(),
- })
-
- const data = schema.parse({
- value: formData.get('value'),
- threadId: formData.get('threadId'),
- runId: formData.get('runId'),
- })
-
- const message = await openai.beta.threads.messages.create(data.threadId, {
- content: data.value,
- role: 'user',
- })
-
- revalidatePath(`/${data.threadId}/${data.runId}`, 'layout')
-
- // insert into supabase
-
- const {
- data: { user },
- error: userError,
- } = await supabase.auth.getUser()
-
- if (userError || !user) {
- return {
- success: false,
- message: 'Failed to get user',
- data: undefined,
- }
- }
- console.log('message.content[0]', message.content[0])
- try {
- const { error } = await supabase.from('messages_user').insert({
- message_id: message.id,
- thread_id: data.threadId,
- text: (message.content[0] as MessageContentText).text.value,
- run_id: data.runId,
- user_id: user.id,
- })
- if (error) throw error
- } catch (error) {
- console.error(error)
- }
- console.log('message.id', message.id)
- // update existing thread with latest messageID
- try {
- const { error } = await supabase
- .from('threads')
- .update({
- latest_message_id: message.id,
- })
- .eq('thread_id', data.threadId)
- if (error) throw error
- } catch (error) {
- console.error('Update error:', error)
- }
-
- const run = await openai.beta.threads.runs.create(message.thread_id, {
- assistant_id: 'asst_oLWrK8lScZVNEpfjwUIvBAnq',
- })
-
- revalidatePath(`/${data.threadId}/${data.runId}/${message.id}`, 'layout')
-
- redirectUrl = `/${message.thread_id}/${run.id}/${message.id}`
- } catch (error: any) {
- return {
- success: false,
- message: 'Failed to update schema with new prompt',
- data: undefined,
- }
- }
-
- revalidatePath(redirectUrl)
- redirect(redirectUrl)
-}
diff --git a/apps/database-new/app/api/ai/sql/threads/[threadId]/delete/route.ts b/apps/database-new/app/api/ai/sql/threads/[threadId]/delete/route.ts
deleted file mode 100644
index ac5b4e0554f..00000000000
--- a/apps/database-new/app/api/ai/sql/threads/[threadId]/delete/route.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import OpenAI from 'openai'
-
-const openai = new OpenAI()
-
-export async function POST(req: Request, { params }: { params: { threadId: string } }) {
- if (!req.body) {
- return Response.error()
- }
-
- const kill = await openai.beta.threads.del(params.threadId)
- console.log({ kill })
- return Response.json({})
-}
diff --git a/apps/database-new/app/api/ai/sql/threads/[threadId]/read/[runId]/route.ts b/apps/database-new/app/api/ai/sql/threads/[threadId]/read/[runId]/route.ts
deleted file mode 100644
index d15c0087d08..00000000000
--- a/apps/database-new/app/api/ai/sql/threads/[threadId]/read/[runId]/route.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// import { parseTables } from '@/lib/utils'
-import { compact } from 'lodash'
-import OpenAI from 'openai'
-
-const openai = new OpenAI()
-
-export async function GET(
- req: Request,
- { params }: { params: { threadId: string; runId: string } }
-) {
- const [run, { data: messages }] = await Promise.all([
- openai.beta.threads.runs.retrieve(params.threadId, params.runId),
- openai.beta.threads.messages.list(params.threadId),
- ])
-
- const mappedMessages = compact(
- await Promise.all(
- messages.map(async (m) => {
- if (m.role === 'user' && m.content[0].type === 'text') {
- return {
- id: m.id,
- role: 'user' as const,
- created_at: m.created_at,
- text: m.content[0].text.value,
- }
- }
-
- if (m.content.length >= 1 && m.content[0].type === 'text') {
- let sql = ''
- if (m.content[0].type === 'text') {
- sql = m.content[0].text.value.replaceAll('\n', '')
- }
- return {
- id: m.id,
- role: 'assistant' as const,
- created_at: m.created_at,
- sql,
- }
- }
- })
- )
- )
- const result = {
- id: params.threadId,
- status: run.status === 'completed' ? 'completed' : 'loading',
- messages: mappedMessages,
- }
-
- return Response.json(result)
-}
diff --git a/apps/database-new/app/api/ai/sql/threads/[threadId]/update/route.ts b/apps/database-new/app/api/ai/sql/threads/[threadId]/update/route.ts
deleted file mode 100644
index 010e0fd6b07..00000000000
--- a/apps/database-new/app/api/ai/sql/threads/[threadId]/update/route.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import OpenAI from 'openai'
-
-const openai = new OpenAI()
-
-export async function POST(req: Request, { params }: { params: { threadId: string } }) {
- if (!req.body) {
- return Response.error()
- }
-
- const { prompt } = await req.json()
-
- const message = await openai.beta.threads.messages.create(params.threadId, {
- content: prompt,
- role: 'user',
- })
-
- const run = await openai.beta.threads.runs.create(message.thread_id, {
- assistant_id: 'asst_oLWrK8lScZVNEpfjwUIvBAnq',
- })
-
- return Response.json({ threadId: message.thread_id, runId: run.id })
-}
diff --git a/apps/database-new/app/api/ai/sql/threads/create/route.ts b/apps/database-new/app/api/ai/sql/threads/create/route.ts
deleted file mode 100644
index 8f12d5476b9..00000000000
--- a/apps/database-new/app/api/ai/sql/threads/create/route.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { cookies } from 'next/headers'
-import { createClient } from '@/lib/supabase/server'
-import OpenAI from 'openai'
-import { revalidatePath } from 'next/cache'
-
-const openai = new OpenAI()
-
-export async function POST(req: Request) {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- if (!req.body) {
- return Response.error()
- }
-
- const { prompt, userID } = await req.json()
-
- const thread = await openai.beta.threads.create()
-
- await openai.beta.threads.messages.create(thread.id, {
- role: 'user',
- content: prompt,
- })
-
- const createRun = await openai.beta.threads.runs.create(thread.id, {
- assistant_id: 'asst_oLWrK8lScZVNEpfjwUIvBAnq',
- })
-
- const [run, { data: messages }] = await Promise.all([
- openai.beta.threads.runs.retrieve(thread.id, createRun.id),
- openai.beta.threads.messages.list(thread.id),
- ])
- const threadTitle = messages
- .filter((m) => m.role === 'user' && m.content[0]?.type === 'text')
- .map((m) => {
- if (m.content[0]?.type === 'text') {
- return m.content[0]?.text?.value
- }
- return undefined
- })
- .find((text) => text !== undefined)
-
- try {
- const { error } = await supabase.from('threads').insert({
- thread_id: thread.id,
- run_id: run.id,
- user_id: userID,
- thread_title: threadTitle as string,
- })
- if (error) throw error
- } catch (error) {
- console.error(error)
- }
-
- revalidatePath('/profile')
-
- return Response.json({ threadId: thread.id, runId: run.id })
-}
diff --git a/apps/database-new/app/auth/callback/route.ts b/apps/database-new/app/auth/callback/route.ts
deleted file mode 100644
index 9927c7a79a7..00000000000
--- a/apps/database-new/app/auth/callback/route.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-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 cookieStore = cookies()
- const supabase = createClient(cookieStore)
- 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
deleted file mode 100644
index ae38bd7cba9..00000000000
--- a/apps/database-new/app/faq/page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-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 (
-
-
- {children}
-
-
- )
-}
-
-export default FAQ
diff --git a/apps/database-new/app/globals.css b/apps/database-new/app/globals.css
deleted file mode 100644
index bbe375023cc..00000000000
--- a/apps/database-new/app/globals.css
+++ /dev/null
@@ -1,190 +0,0 @@
-@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
deleted file mode 100644
index 2935c8b68ea..00000000000
--- a/apps/database-new/app/layout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index 22b9a2caa69..00000000000
--- a/apps/database-new/app/profile/Thread.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'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 formattedTimeAgo = timeAgo(thread.modified_at)
-
- const [editOpen, setEditOpen] = useState(false)
- const [deleteOpen, setDeleteOpen] = useState(false)
-
- return (
- <>
- No conversations created yet
- -
-
-
-
- {thread.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('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
deleted file mode 100644
index 89d3d8e6058..00000000000
--- a/apps/database-new/app/profile/layout.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-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
deleted file mode 100644
index 0183e144d71..00000000000
--- a/apps/database-new/app/profile/page.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-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 cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- 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
deleted file mode 100644
index f194beb54a5..00000000000
--- a/apps/database-new/components/AllThreadsModal/AllThreadsModal.constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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
deleted file mode 100644
index ad988bf4164..00000000000
--- a/apps/database-new/components/AllThreadsModal/AllThreadsModal.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-// '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}
-//
- {loading || pending ? (
-
- )
- }
-
- return (
-
- )
- }
-)
-
-AssistantChatForm.displayName = 'AssistantChatForm'
-
-export { AssistantChatForm }
diff --git a/apps/database-new/components/Auth/LoginForm.tsx b/apps/database-new/components/Auth/LoginForm.tsx
deleted file mode 100644
index 6cf20b367a7..00000000000
--- a/apps/database-new/components/Auth/LoginForm.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { createClient } from '@/lib/supabase/server'
-import { Github } from 'lucide-react'
-import { cookies, headers } from 'next/headers'
-import { redirect } from 'next/navigation'
-import { Button } from '@ui/components/Button'
-
-export default function LoginForm({ searchParams }: { searchParams?: { message?: string } }) {
- const signUp = async (formData: FormData) => {
- 'use server'
-
- const origin = headers().get('origin')
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'github',
- options: { redirectTo: `${origin}/auth/callback` },
- })
-
- if (error) {
- console.log(error.message)
- return redirect(`/login?message=${error.message}`)
- } else {
- return redirect(data.url)
- }
- }
-
- return (
-
-
-
- )
-}
diff --git a/apps/database-new/components/Footer.tsx b/apps/database-new/components/Footer.tsx
deleted file mode 100644
index c6d8cdb8665..00000000000
--- a/apps/database-new/components/Footer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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
deleted file mode 100644
index 93ac5737b52..00000000000
--- a/apps/database-new/components/Header/AvatarDropdown.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'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
-
- // {selectedMessage !== undefined && (
- //
- <>
- )
-}
-
-export default CurrentThreadName
diff --git a/apps/database-new/components/Header/Header.tsx b/apps/database-new/components/Header/Header.tsx
deleted file mode 100644
index 6d10e899364..00000000000
--- a/apps/database-new/components/Header/Header.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import HeaderActions from './HeaderActions'
-import { createClient } from '@/lib/supabase/server'
-import { cookies } from 'next/headers'
-import CurrentThreadName from './CurrentThreadName'
-import Link from 'next/link'
-import UserDropdown from './UserDropdown'
-
-const Header = async () => {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore)
-
- const {
- data: { user },
- } = await supabase.auth.getUser()
-
- return (
-
- )
-}
-
-export default Header
diff --git a/apps/database-new/components/Header/HeaderActions.tsx b/apps/database-new/components/Header/HeaderActions.tsx
deleted file mode 100644
index 7d600e018af..00000000000
--- a/apps/database-new/components/Header/HeaderActions.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client'
-import { useAppStateSnapshot } from '@/lib/state'
-import { createClient } from '@/lib/supabase/client'
-import { User } from '@supabase/supabase-js'
-import Link from 'next/link'
-import { useRouter, useSelectedLayoutSegment } from 'next/navigation'
-import { useState } from 'react'
-import { Button } from 'ui'
-import AvatarDropdown from './AvatarDropdown'
-import NoUserDropdown from './NoUserDropdown'
-import SaveSchemaDropdown from './SaveSchemaDropdown'
-import ThemeSwitcherButton from './ThemeSwitcher'
-import ToggleCodeEditorButton from './ToggleCodeEditorButton'
-
-interface HeaderActionsProps {
- user: User | null
-}
-const HeaderActions = ({ user }: HeaderActionsProps) => {
- const supabase = createClient()
- const router = useRouter()
- const segment = useSelectedLayoutSegment()
-
- const [currentUser, setCurrentUser] = useState- // {selectedMessage.text} - //
- // )} - //
- {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
deleted file mode 100644
index b7e5c3b6729..00000000000
--- a/apps/database-new/components/Header/NoUserDropdown.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { LogIn } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { DropdownMenuItem, DropdownMenuSeparator } from 'ui'
-
-const NoUserDropdown = () => {
- return (
- <>
-
-
- )}
-
-
-
- {/* {currentUser ? (
-
-
-
-
- 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
deleted file mode 100644
index 3a47125e388..00000000000
--- a/apps/database-new/components/Loaders/SchemaLoader.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Loader2 } from 'lucide-react'
-
-const SchemaLoader = async () => {
- return (
-
-
- )
-}
-
-export default SchemaLoader
diff --git a/apps/database-new/components/Shimmer.tsx b/apps/database-new/components/Shimmer.tsx
deleted file mode 100644
index 2a3aa3ae437..00000000000
--- a/apps/database-new/components/Shimmer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-const ANIMATION_DELAY = 150
-
-const ShimmeringLoader = ({ className = '', delayIndex = 0, animationDelay = 150 }) => {
- return (
-
- )
-}
-
-const GenericSkeletonLoader = () => (
-
-
-
-
-)
-
-export { GenericSkeletonLoader }
-export default ShimmeringLoader
diff --git a/apps/database-new/components/providers.tsx b/apps/database-new/components/providers.tsx
deleted file mode 100644
index e87743ca16a..00000000000
--- a/apps/database-new/components/providers.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { PropsWithChildren } from 'react'
-
-const queryClient = new QueryClient()
-
-export function ReactQueryProvider({ children }: PropsWithChildren) {
- return
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Area Chart - Interactive
+ Showing total visitors for the last 3 months
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Bar Chart - Interactive
+ Showing total visitors for the last 3 months
+
+
+ {['desktop', 'mobile'].map((key) => {
+ const chart = key as keyof typeof chartConfig
+ return (
+
+ )
+ })}
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Line Chart - Interactive
+ Showing total visitors for the last 3 months
+
+
+ {['desktop', 'mobile'].map((key) => {
+ const chart = key as keyof typeof chartConfig
+ return (
+
+ )
+ })}
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Pie Chart - Interactive
+ January - June 2024
+
+
+
+ {config?.label}
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+
+ {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..a770e33d315
--- /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..8a565c86f4e
--- /dev/null
+++ b/apps/design-system/components/homepage-svg-handler.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import SVG from 'react-inlinesvg'
+import { useTheme } from 'next-themes'
+import { cn } from 'ui'
+
+const HomepageSvgHandler = ({ name, className }: { name: string; className?: 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..e61c80fb466
--- /dev/null
+++ b/apps/design-system/components/icons.tsx
@@ -0,0 +1,69 @@
+import { Index } from 'icons/__registry__/index'
+import { Copy } from 'lucide-react'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} 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}
+
+
+
+
+ )
+}
+
+export { SonnerExpandConfig }
diff --git a/apps/design-system/components/sonner-expand-position.tsx b/apps/design-system/components/sonner-expand-position.tsx
new file mode 100644
index 00000000000..82510e03394
--- /dev/null
+++ b/apps/design-system/components/sonner-expand-position.tsx
@@ -0,0 +1,70 @@
+import { useConfig } from '@/hooks/use-config'
+import { ComponentProps } from 'react'
+import {
+ SelectContent_Shadcn_,
+ SelectGroup_Shadcn_,
+ SelectItem_Shadcn_,
+ SelectLabel_Shadcn_,
+ SelectTrigger_Shadcn_,
+ SelectValue_Shadcn_,
+ Select_Shadcn_,
+ SonnerToaster,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+function SonnerPositionConfig() {
+ const [config, setConfig] = useConfig()
+
+ type Position = NonNullable
+
+
+ )
+}
+
+export { SonnerPositionConfig }
diff --git a/apps/design-system/components/source-panel.tsx b/apps/design-system/components/source-panel.tsx
new file mode 100644
index 00000000000..92151a863c8
--- /dev/null
+++ b/apps/design-system/components/source-panel.tsx
@@ -0,0 +1,269 @@
+import { Doc } from '@/.contentlayer/generated'
+import Link from 'next/link'
+import { forwardRef } from 'react'
+
+import { ExternalLink } from 'lucide-react'
+import { Button } from 'ui'
+import { cn } from 'ui/src/lib/utils/cn'
+import Image from 'next/image'
+
+const SourcePanel = forwardRef
+
+ )
+ }
+ }
+
+ 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
+
+['position']
+ sonnerExpand: boolean
+ // backendProvider: BackendProvider['name'] | undefined
+}
+
+const configAtom = atomWithStorage('config', {
+ style: 'default',
+ theme: 'zinc',
+ radius: 0.5,
+ sonnerPosition: 'bottom-right',
+ sonnerExpand: false,
+ // backendProvider: 'nextjs-auth',
+})
+
+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..2280b564d29
--- /dev/null
+++ b/apps/design-system/next.config.mjs
@@ -0,0 +1,41 @@
+import { withContentlayer } from 'next-contentlayer2'
+
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
+
+/** @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 [
+ ...(BASE_PATH.length
+ ? [
+ {
+ source: '/',
+ destination: 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..af3e909ca92
--- /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.6",
+ "eslint-config-supabase": "*",
+ "fs": "^0.0.1-security",
+ "jotai": "^2.8.0",
+ "lodash.template": "4.5.0",
+ "lucide-react": "*",
+ "markdown-wasm": "^1.2.0",
+ "next": "^14.2.3",
+ "next-contentlayer2": "0.4.6",
+ "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.5.0",
+ "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--dark.svg b/apps/design-system/public/img/design-system-marks/atoms-illustration--dark.svg
new file mode 100644
index 00000000000..fae400998e3
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/atoms-illustration--dark.svg
@@ -0,0 +1,100 @@
+
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--deep-dark.svg b/apps/design-system/public/img/design-system-marks/design-system-marks--deep-dark.svg
new file mode 100644
index 00000000000..928eafbfc38
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/design-system-marks--deep-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--dark.svg b/apps/design-system/public/img/design-system-marks/fragments-illustration--dark.svg
new file mode 100644
index 00000000000..01331d3d8de
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/fragments-illustration--dark.svg
@@ -0,0 +1,104 @@
+
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/database-new/public/next.svg b/apps/design-system/public/next.svg
similarity index 100%
rename from apps/database-new/public/next.svg
rename to apps/design-system/public/next.svg
diff --git a/apps/database-new/public/vercel.svg b/apps/design-system/public/vercel.svg
similarity index 100%
rename from apps/database-new/public/vercel.svg
rename to apps/design-system/public/vercel.svg
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/charts.ts b/apps/design-system/registry/charts.ts
new file mode 100644
index 00000000000..be6ab4c2b48
--- /dev/null
+++ b/apps/design-system/registry/charts.ts
@@ -0,0 +1,503 @@
+import { Registry } from './schema'
+
+export const charts: Registry = [
+ // Area Charts
+ {
+ name: 'chart-area-axes',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-axes.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-default',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-default.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-gradient',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-gradient.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-icons',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-icons.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-interactive',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-interactive.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-legend',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-legend.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-linear',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-linear.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-stacked-expand',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-stacked-expand.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-stacked',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-stacked.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+ {
+ name: 'chart-area-step',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-area-step.tsx'],
+ category: 'Charts',
+ subcategory: 'Area',
+ },
+
+ // Bar Charts
+ {
+ name: 'chart-bar-active',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-active.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-default',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-default.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-horizontal',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-horizontal.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-interactive',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-interactive.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-label-custom',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-label-custom.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-label',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-label.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-mixed',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-mixed.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-multiple',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-multiple.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-negative',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-negative.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+ {
+ name: 'chart-bar-stacked',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-bar-stacked.tsx'],
+ category: 'Charts',
+ subcategory: 'Bar',
+ },
+
+ // Line Charts
+ {
+ name: 'chart-line-default',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-default.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-dots-colors',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-dots-colors.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-dots-custom',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-dots-custom.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-dots',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-dots.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-interactive',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-interactive.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-label-custom',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-label-custom.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-label',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-label.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-linear',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-linear.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-multiple',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-multiple.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+ {
+ name: 'chart-line-step',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-line-step.tsx'],
+ category: 'Charts',
+ subcategory: 'Line',
+ },
+
+ // Pie Charts
+ {
+ name: 'chart-pie-donut-active',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-donut-active.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-donut-text',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-donut-text.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-donut',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-donut.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-interactive',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-interactive.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-label-custom',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-label-custom.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-label-list',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-label-list.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-label',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-label.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-legend',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-legend.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-separator-none',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-separator-none.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-simple',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-simple.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+ {
+ name: 'chart-pie-stacked',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-pie-stacked.tsx'],
+ category: 'Charts',
+ subcategory: 'Pie',
+ },
+
+ // Radar Charts
+ {
+ name: 'chart-radar-default',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-default.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-dots',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-dots.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-grid-circle-fill',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-grid-circle-fill.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-grid-circle-no-lines',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-grid-circle-no-lines.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-grid-circle',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-grid-circle.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-grid-custom',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-grid-custom.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-grid-fill',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-grid-fill.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-grid-none',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-grid-none.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-icons',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-icons.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-label-custom',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-label-custom.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-legend',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-legend.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-lines-only',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-lines-only.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-multiple',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-multiple.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+ {
+ name: 'chart-radar-radius',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radar-radius.tsx'],
+ category: 'Charts',
+ subcategory: 'Radar',
+ },
+
+ // Radial Charts
+ {
+ name: 'chart-radial-grid',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radial-grid.tsx'],
+ category: 'Charts',
+ subcategory: 'Radial',
+ },
+ {
+ name: 'chart-radial-label',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radial-label.tsx'],
+ category: 'Charts',
+ subcategory: 'Radial',
+ },
+ {
+ name: 'chart-radial-shape',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radial-shape.tsx'],
+ category: 'Charts',
+ subcategory: 'Radial',
+ },
+ {
+ name: 'chart-radial-simple',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radial-simple.tsx'],
+ category: 'Charts',
+ subcategory: 'Radial',
+ },
+ {
+ name: 'chart-radial-stacked',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radial-stacked.tsx'],
+ category: 'Charts',
+ subcategory: 'Radial',
+ },
+ {
+ name: 'chart-radial-text',
+ type: 'components:block',
+ registryDependencies: ['card', 'chart'],
+ files: ['block/chart-radial-text.tsx'],
+ category: 'Charts',
+ subcategory: 'Radial',
+ },
+]
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/block/chart-area-axes.tsx b/apps/design-system/registry/default/block/chart-area-axes.tsx
new file mode 100644
index 00000000000..26713267cbd
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-axes.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'An area chart with axes'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Axes
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-default.tsx b/apps/design-system/registry/default/block/chart-area-default.tsx
new file mode 100644
index 00000000000..0ccfe016d7c
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-default.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A simple area chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-gradient.tsx b/apps/design-system/registry/default/block/chart-area-gradient.tsx
new file mode 100644
index 00000000000..d6e7ad9b621
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-gradient.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'An area chart with gradient fill'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Gradient
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-icons.tsx b/apps/design-system/registry/default/block/chart-area-icons.tsx
new file mode 100644
index 00000000000..bc9d0195253
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-icons.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { TrendingDown, TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+
+export const description = 'An area chart with icons'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ icon: TrendingDown,
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ icon: TrendingUp,
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Icons
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-interactive.tsx b/apps/design-system/registry/default/block/chart-area-interactive.tsx
new file mode 100644
index 00000000000..df2579fe8f8
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-interactive.tsx
@@ -0,0 +1,238 @@
+'use client'
+
+import * as React from 'react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+import {
+ Select_Shadcn_,
+ SelectContent_Shadcn_,
+ SelectItem_Shadcn_,
+ SelectTrigger_Shadcn_,
+ SelectValue_Shadcn_,
+} from 'ui'
+
+export const description = 'An interactive area chart'
+
+const chartData = [
+ { date: '2024-04-01', desktop: 222, mobile: 150 },
+ { date: '2024-04-02', desktop: 97, mobile: 180 },
+ { date: '2024-04-03', desktop: 167, mobile: 120 },
+ { date: '2024-04-04', desktop: 242, mobile: 260 },
+ { date: '2024-04-05', desktop: 373, mobile: 290 },
+ { date: '2024-04-06', desktop: 301, mobile: 340 },
+ { date: '2024-04-07', desktop: 245, mobile: 180 },
+ { date: '2024-04-08', desktop: 409, mobile: 320 },
+ { date: '2024-04-09', desktop: 59, mobile: 110 },
+ { date: '2024-04-10', desktop: 261, mobile: 190 },
+ { date: '2024-04-11', desktop: 327, mobile: 350 },
+ { date: '2024-04-12', desktop: 292, mobile: 210 },
+ { date: '2024-04-13', desktop: 342, mobile: 380 },
+ { date: '2024-04-14', desktop: 137, mobile: 220 },
+ { date: '2024-04-15', desktop: 120, mobile: 170 },
+ { date: '2024-04-16', desktop: 138, mobile: 190 },
+ { date: '2024-04-17', desktop: 446, mobile: 360 },
+ { date: '2024-04-18', desktop: 364, mobile: 410 },
+ { date: '2024-04-19', desktop: 243, mobile: 180 },
+ { date: '2024-04-20', desktop: 89, mobile: 150 },
+ { date: '2024-04-21', desktop: 137, mobile: 200 },
+ { date: '2024-04-22', desktop: 224, mobile: 170 },
+ { date: '2024-04-23', desktop: 138, mobile: 230 },
+ { date: '2024-04-24', desktop: 387, mobile: 290 },
+ { date: '2024-04-25', desktop: 215, mobile: 250 },
+ { date: '2024-04-26', desktop: 75, mobile: 130 },
+ { date: '2024-04-27', desktop: 383, mobile: 420 },
+ { date: '2024-04-28', desktop: 122, mobile: 180 },
+ { date: '2024-04-29', desktop: 315, mobile: 240 },
+ { date: '2024-04-30', desktop: 454, mobile: 380 },
+ { date: '2024-05-01', desktop: 165, mobile: 220 },
+ { date: '2024-05-02', desktop: 293, mobile: 310 },
+ { date: '2024-05-03', desktop: 247, mobile: 190 },
+ { date: '2024-05-04', desktop: 385, mobile: 420 },
+ { date: '2024-05-05', desktop: 481, mobile: 390 },
+ { date: '2024-05-06', desktop: 498, mobile: 520 },
+ { date: '2024-05-07', desktop: 388, mobile: 300 },
+ { date: '2024-05-08', desktop: 149, mobile: 210 },
+ { date: '2024-05-09', desktop: 227, mobile: 180 },
+ { date: '2024-05-10', desktop: 293, mobile: 330 },
+ { date: '2024-05-11', desktop: 335, mobile: 270 },
+ { date: '2024-05-12', desktop: 197, mobile: 240 },
+ { date: '2024-05-13', desktop: 197, mobile: 160 },
+ { date: '2024-05-14', desktop: 448, mobile: 490 },
+ { date: '2024-05-15', desktop: 473, mobile: 380 },
+ { date: '2024-05-16', desktop: 338, mobile: 400 },
+ { date: '2024-05-17', desktop: 499, mobile: 420 },
+ { date: '2024-05-18', desktop: 315, mobile: 350 },
+ { date: '2024-05-19', desktop: 235, mobile: 180 },
+ { date: '2024-05-20', desktop: 177, mobile: 230 },
+ { date: '2024-05-21', desktop: 82, mobile: 140 },
+ { date: '2024-05-22', desktop: 81, mobile: 120 },
+ { date: '2024-05-23', desktop: 252, mobile: 290 },
+ { date: '2024-05-24', desktop: 294, mobile: 220 },
+ { date: '2024-05-25', desktop: 201, mobile: 250 },
+ { date: '2024-05-26', desktop: 213, mobile: 170 },
+ { date: '2024-05-27', desktop: 420, mobile: 460 },
+ { date: '2024-05-28', desktop: 233, mobile: 190 },
+ { date: '2024-05-29', desktop: 78, mobile: 130 },
+ { date: '2024-05-30', desktop: 340, mobile: 280 },
+ { date: '2024-05-31', desktop: 178, mobile: 230 },
+ { date: '2024-06-01', desktop: 178, mobile: 200 },
+ { date: '2024-06-02', desktop: 470, mobile: 410 },
+ { date: '2024-06-03', desktop: 103, mobile: 160 },
+ { date: '2024-06-04', desktop: 439, mobile: 380 },
+ { date: '2024-06-05', desktop: 88, mobile: 140 },
+ { date: '2024-06-06', desktop: 294, mobile: 250 },
+ { date: '2024-06-07', desktop: 323, mobile: 370 },
+ { date: '2024-06-08', desktop: 385, mobile: 320 },
+ { date: '2024-06-09', desktop: 438, mobile: 480 },
+ { date: '2024-06-10', desktop: 155, mobile: 200 },
+ { date: '2024-06-11', desktop: 92, mobile: 150 },
+ { date: '2024-06-12', desktop: 492, mobile: 420 },
+ { date: '2024-06-13', desktop: 81, mobile: 130 },
+ { date: '2024-06-14', desktop: 426, mobile: 380 },
+ { date: '2024-06-15', desktop: 307, mobile: 350 },
+ { date: '2024-06-16', desktop: 371, mobile: 310 },
+ { date: '2024-06-17', desktop: 475, mobile: 520 },
+ { date: '2024-06-18', desktop: 107, mobile: 170 },
+ { date: '2024-06-19', desktop: 341, mobile: 290 },
+ { date: '2024-06-20', desktop: 408, mobile: 450 },
+ { date: '2024-06-21', desktop: 169, mobile: 210 },
+ { date: '2024-06-22', desktop: 317, mobile: 270 },
+ { date: '2024-06-23', desktop: 480, mobile: 530 },
+ { date: '2024-06-24', desktop: 132, mobile: 180 },
+ { date: '2024-06-25', desktop: 141, mobile: 190 },
+ { date: '2024-06-26', desktop: 434, mobile: 380 },
+ { date: '2024-06-27', desktop: 448, mobile: 490 },
+ { date: '2024-06-28', desktop: 149, mobile: 200 },
+ { date: '2024-06-29', desktop: 103, mobile: 160 },
+ { date: '2024-06-30', desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ const [timeRange, setTimeRange] = React.useState('90d')
+
+ const filteredData = chartData.filter((item) => {
+ const date = new Date(item.date)
+ const now = new Date()
+ let daysToSubtract = 90
+ if (timeRange === '30d') {
+ daysToSubtract = 30
+ } else if (timeRange === '7d') {
+ daysToSubtract = 7
+ }
+ now.setDate(now.getDate() - daysToSubtract)
+ return date >= now
+ })
+
+ return (
+
+
+
+
+
+
+
+ Last 3 months
+
+
+ Last 30 days
+
+
+ Last 7 days
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const date = new Date(value)
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ })
+ }}
+ />
+ {
+ return new Date(value).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ })
+ }}
+ indicator="dot"
+ />
+ }
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-legend.tsx b/apps/design-system/registry/default/block/chart-area-legend.tsx
new file mode 100644
index 00000000000..a58cfa9fbd9
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-legend.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+
+export const description = 'An area chart with a legend'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Legend
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-linear.tsx b/apps/design-system/registry/default/block/chart-area-linear.tsx
new file mode 100644
index 00000000000..8381711c7aa
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-linear.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A linear area chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Linear
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-stacked-expand.tsx b/apps/design-system/registry/default/block/chart-area-stacked-expand.tsx
new file mode 100644
index 00000000000..eca0b1118f7
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-stacked-expand.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A stacked area chart with expand stacking'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80, other: 45 },
+ { month: 'February', desktop: 305, mobile: 200, other: 100 },
+ { month: 'March', desktop: 237, mobile: 120, other: 150 },
+ { month: 'April', desktop: 73, mobile: 190, other: 50 },
+ { month: 'May', desktop: 209, mobile: 130, other: 100 },
+ { month: 'June', desktop: 214, mobile: 140, other: 160 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-3))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Stacked Expanded
+ Showing total visitors for the last 6months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-stacked.tsx b/apps/design-system/registry/default/block/chart-area-stacked.tsx
new file mode 100644
index 00000000000..22c0f58558b
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-stacked.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A stacked area chart'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Stacked
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-area-step.tsx b/apps/design-system/registry/default/block/chart-area-step.tsx
new file mode 100644
index 00000000000..5ac732aeaf4
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-area-step.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { Activity, TrendingUp } from 'lucide-react'
+import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A step area chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ icon: Activity,
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Area Chart - Step
+ Showing total visitors for the last 6 months
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-active.tsx b/apps/design-system/registry/default/block/chart-bar-active.tsx
new file mode 100644
index 00000000000..b1ab1d95e1a
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-active.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A bar chart with an active bar'
+
+const chartData = [
+ { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 275, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Active
+ January - June 2024
+
+
+
+
+ chartConfig[value as keyof typeof chartConfig]?.label}
+ />
+ {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-default.tsx b/apps/design-system/registry/default/block/chart-bar-default.tsx
new file mode 100644
index 00000000000..1c0596e3b57
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-default.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A bar chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-horizontal.tsx b/apps/design-system/registry/default/block/chart-bar-horizontal.tsx
new file mode 100644
index 00000000000..2305d0a4e1c
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-horizontal.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A horizontal bar chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Horizontal
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-interactive.tsx b/apps/design-system/registry/default/block/chart-bar-interactive.tsx
new file mode 100644
index 00000000000..34374419f59
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-interactive.tsx
@@ -0,0 +1,202 @@
+'use client'
+
+import * as React from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'An interactive bar chart'
+
+const chartData = [
+ { date: '2024-04-01', desktop: 222, mobile: 150 },
+ { date: '2024-04-02', desktop: 97, mobile: 180 },
+ { date: '2024-04-03', desktop: 167, mobile: 120 },
+ { date: '2024-04-04', desktop: 242, mobile: 260 },
+ { date: '2024-04-05', desktop: 373, mobile: 290 },
+ { date: '2024-04-06', desktop: 301, mobile: 340 },
+ { date: '2024-04-07', desktop: 245, mobile: 180 },
+ { date: '2024-04-08', desktop: 409, mobile: 320 },
+ { date: '2024-04-09', desktop: 59, mobile: 110 },
+ { date: '2024-04-10', desktop: 261, mobile: 190 },
+ { date: '2024-04-11', desktop: 327, mobile: 350 },
+ { date: '2024-04-12', desktop: 292, mobile: 210 },
+ { date: '2024-04-13', desktop: 342, mobile: 380 },
+ { date: '2024-04-14', desktop: 137, mobile: 220 },
+ { date: '2024-04-15', desktop: 120, mobile: 170 },
+ { date: '2024-04-16', desktop: 138, mobile: 190 },
+ { date: '2024-04-17', desktop: 446, mobile: 360 },
+ { date: '2024-04-18', desktop: 364, mobile: 410 },
+ { date: '2024-04-19', desktop: 243, mobile: 180 },
+ { date: '2024-04-20', desktop: 89, mobile: 150 },
+ { date: '2024-04-21', desktop: 137, mobile: 200 },
+ { date: '2024-04-22', desktop: 224, mobile: 170 },
+ { date: '2024-04-23', desktop: 138, mobile: 230 },
+ { date: '2024-04-24', desktop: 387, mobile: 290 },
+ { date: '2024-04-25', desktop: 215, mobile: 250 },
+ { date: '2024-04-26', desktop: 75, mobile: 130 },
+ { date: '2024-04-27', desktop: 383, mobile: 420 },
+ { date: '2024-04-28', desktop: 122, mobile: 180 },
+ { date: '2024-04-29', desktop: 315, mobile: 240 },
+ { date: '2024-04-30', desktop: 454, mobile: 380 },
+ { date: '2024-05-01', desktop: 165, mobile: 220 },
+ { date: '2024-05-02', desktop: 293, mobile: 310 },
+ { date: '2024-05-03', desktop: 247, mobile: 190 },
+ { date: '2024-05-04', desktop: 385, mobile: 420 },
+ { date: '2024-05-05', desktop: 481, mobile: 390 },
+ { date: '2024-05-06', desktop: 498, mobile: 520 },
+ { date: '2024-05-07', desktop: 388, mobile: 300 },
+ { date: '2024-05-08', desktop: 149, mobile: 210 },
+ { date: '2024-05-09', desktop: 227, mobile: 180 },
+ { date: '2024-05-10', desktop: 293, mobile: 330 },
+ { date: '2024-05-11', desktop: 335, mobile: 270 },
+ { date: '2024-05-12', desktop: 197, mobile: 240 },
+ { date: '2024-05-13', desktop: 197, mobile: 160 },
+ { date: '2024-05-14', desktop: 448, mobile: 490 },
+ { date: '2024-05-15', desktop: 473, mobile: 380 },
+ { date: '2024-05-16', desktop: 338, mobile: 400 },
+ { date: '2024-05-17', desktop: 499, mobile: 420 },
+ { date: '2024-05-18', desktop: 315, mobile: 350 },
+ { date: '2024-05-19', desktop: 235, mobile: 180 },
+ { date: '2024-05-20', desktop: 177, mobile: 230 },
+ { date: '2024-05-21', desktop: 82, mobile: 140 },
+ { date: '2024-05-22', desktop: 81, mobile: 120 },
+ { date: '2024-05-23', desktop: 252, mobile: 290 },
+ { date: '2024-05-24', desktop: 294, mobile: 220 },
+ { date: '2024-05-25', desktop: 201, mobile: 250 },
+ { date: '2024-05-26', desktop: 213, mobile: 170 },
+ { date: '2024-05-27', desktop: 420, mobile: 460 },
+ { date: '2024-05-28', desktop: 233, mobile: 190 },
+ { date: '2024-05-29', desktop: 78, mobile: 130 },
+ { date: '2024-05-30', desktop: 340, mobile: 280 },
+ { date: '2024-05-31', desktop: 178, mobile: 230 },
+ { date: '2024-06-01', desktop: 178, mobile: 200 },
+ { date: '2024-06-02', desktop: 470, mobile: 410 },
+ { date: '2024-06-03', desktop: 103, mobile: 160 },
+ { date: '2024-06-04', desktop: 439, mobile: 380 },
+ { date: '2024-06-05', desktop: 88, mobile: 140 },
+ { date: '2024-06-06', desktop: 294, mobile: 250 },
+ { date: '2024-06-07', desktop: 323, mobile: 370 },
+ { date: '2024-06-08', desktop: 385, mobile: 320 },
+ { date: '2024-06-09', desktop: 438, mobile: 480 },
+ { date: '2024-06-10', desktop: 155, mobile: 200 },
+ { date: '2024-06-11', desktop: 92, mobile: 150 },
+ { date: '2024-06-12', desktop: 492, mobile: 420 },
+ { date: '2024-06-13', desktop: 81, mobile: 130 },
+ { date: '2024-06-14', desktop: 426, mobile: 380 },
+ { date: '2024-06-15', desktop: 307, mobile: 350 },
+ { date: '2024-06-16', desktop: 371, mobile: 310 },
+ { date: '2024-06-17', desktop: 475, mobile: 520 },
+ { date: '2024-06-18', desktop: 107, mobile: 170 },
+ { date: '2024-06-19', desktop: 341, mobile: 290 },
+ { date: '2024-06-20', desktop: 408, mobile: 450 },
+ { date: '2024-06-21', desktop: 169, mobile: 210 },
+ { date: '2024-06-22', desktop: 317, mobile: 270 },
+ { date: '2024-06-23', desktop: 480, mobile: 530 },
+ { date: '2024-06-24', desktop: 132, mobile: 180 },
+ { date: '2024-06-25', desktop: 141, mobile: 190 },
+ { date: '2024-06-26', desktop: 434, mobile: 380 },
+ { date: '2024-06-27', desktop: 448, mobile: 490 },
+ { date: '2024-06-28', desktop: 149, mobile: 200 },
+ { date: '2024-06-29', desktop: 103, mobile: 160 },
+ { date: '2024-06-30', desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+ views: {
+ label: 'Page Views',
+ },
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ const [activeChart, setActiveChart] = React.useState('desktop')
+
+ const total = React.useMemo(
+ () => ({
+ desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+ mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+ }),
+ []
+ )
+
+ return (
+
+
+
+
+
+
+ {
+ const date = new Date(value)
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ })
+ }}
+ />
+ {
+ return new Date(value).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ })
+ }}
+ />
+ }
+ />
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-label-custom.tsx b/apps/design-system/registry/default/block/chart-bar-label-custom.tsx
new file mode 100644
index 00000000000..7867342bc6d
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-label-custom.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A bar chart with a custom label'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+ label: {
+ color: 'hsl(var(--background))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Custom Label
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ hide
+ />
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-label.tsx b/apps/design-system/registry/default/block/chart-bar-label.tsx
new file mode 100644
index 00000000000..3bbdcc7a7ea
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-label.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A bar chart with a label'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Label
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-mixed.tsx b/apps/design-system/registry/default/block/chart-bar-mixed.tsx
new file mode 100644
index 00000000000..1790507f73f
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-mixed.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A mixed bar chart'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Mixed
+ January - June 2024
+
+
+
+
+ chartConfig[value as keyof typeof chartConfig]?.label}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-multiple.tsx b/apps/design-system/registry/default/block/chart-bar-multiple.tsx
new file mode 100644
index 00000000000..ffb9c61679a
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-multiple.tsx
@@ -0,0 +1,65 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A multiple bar chart'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Multiple
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-negative.tsx b/apps/design-system/registry/default/block/chart-bar-negative.tsx
new file mode 100644
index 00000000000..43f87ef0762
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-negative.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A bar chart with negative values'
+
+const chartData = [
+ { month: 'January', visitors: 186 },
+ { month: 'February', visitors: 205 },
+ { month: 'March', visitors: -207 },
+ { month: 'April', visitors: 173 },
+ { month: 'May', visitors: -209 },
+ { month: 'June', visitors: 214 },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Negative
+ January - June 2024
+
+
+
+
+
+ 0 ? 'hsl(var(--chart-1))' : 'hsl(var(--chart-2))'}
+ />
+ ))}
+ |
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-bar-stacked.tsx b/apps/design-system/registry/default/block/chart-bar-stacked.tsx
new file mode 100644
index 00000000000..34a7439e982
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-bar-stacked.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+
+export const description = 'A stacked bar chart with a legend'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Bar Chart - Stacked + Legend
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-default.tsx b/apps/design-system/registry/default/block/chart-line-default.tsx
new file mode 100644
index 00000000000..408dc1d6f9f
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-default.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-dots-colors.tsx b/apps/design-system/registry/default/block/chart-line-dots-colors.tsx
new file mode 100644
index 00000000000..c8a55a0c44b
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-dots-colors.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Dot, Line, LineChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart with dots and colors'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ color: 'hsl(var(--chart-2))',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Dots Colors
+ January - June 2024
+
+
+
+
+ {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-dots-custom.tsx b/apps/design-system/registry/default/block/chart-line-dots-custom.tsx
new file mode 100644
index 00000000000..87c69309319
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-dots-custom.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { GitCommitVertical, TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart with custom dots'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Custom Dots
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+ {
+ const r = 24
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-dots.tsx b/apps/design-system/registry/default/block/chart-line-dots.tsx
new file mode 100644
index 00000000000..cc211f2c2b4
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-dots.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart with dots'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Dots
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-interactive.tsx b/apps/design-system/registry/default/block/chart-line-interactive.tsx
new file mode 100644
index 00000000000..5f9c92b9792
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-interactive.tsx
@@ -0,0 +1,208 @@
+'use client'
+
+import * as React from 'react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'An interactive line chart'
+
+const chartData = [
+ { date: '2024-04-01', desktop: 222, mobile: 150 },
+ { date: '2024-04-02', desktop: 97, mobile: 180 },
+ { date: '2024-04-03', desktop: 167, mobile: 120 },
+ { date: '2024-04-04', desktop: 242, mobile: 260 },
+ { date: '2024-04-05', desktop: 373, mobile: 290 },
+ { date: '2024-04-06', desktop: 301, mobile: 340 },
+ { date: '2024-04-07', desktop: 245, mobile: 180 },
+ { date: '2024-04-08', desktop: 409, mobile: 320 },
+ { date: '2024-04-09', desktop: 59, mobile: 110 },
+ { date: '2024-04-10', desktop: 261, mobile: 190 },
+ { date: '2024-04-11', desktop: 327, mobile: 350 },
+ { date: '2024-04-12', desktop: 292, mobile: 210 },
+ { date: '2024-04-13', desktop: 342, mobile: 380 },
+ { date: '2024-04-14', desktop: 137, mobile: 220 },
+ { date: '2024-04-15', desktop: 120, mobile: 170 },
+ { date: '2024-04-16', desktop: 138, mobile: 190 },
+ { date: '2024-04-17', desktop: 446, mobile: 360 },
+ { date: '2024-04-18', desktop: 364, mobile: 410 },
+ { date: '2024-04-19', desktop: 243, mobile: 180 },
+ { date: '2024-04-20', desktop: 89, mobile: 150 },
+ { date: '2024-04-21', desktop: 137, mobile: 200 },
+ { date: '2024-04-22', desktop: 224, mobile: 170 },
+ { date: '2024-04-23', desktop: 138, mobile: 230 },
+ { date: '2024-04-24', desktop: 387, mobile: 290 },
+ { date: '2024-04-25', desktop: 215, mobile: 250 },
+ { date: '2024-04-26', desktop: 75, mobile: 130 },
+ { date: '2024-04-27', desktop: 383, mobile: 420 },
+ { date: '2024-04-28', desktop: 122, mobile: 180 },
+ { date: '2024-04-29', desktop: 315, mobile: 240 },
+ { date: '2024-04-30', desktop: 454, mobile: 380 },
+ { date: '2024-05-01', desktop: 165, mobile: 220 },
+ { date: '2024-05-02', desktop: 293, mobile: 310 },
+ { date: '2024-05-03', desktop: 247, mobile: 190 },
+ { date: '2024-05-04', desktop: 385, mobile: 420 },
+ { date: '2024-05-05', desktop: 481, mobile: 390 },
+ { date: '2024-05-06', desktop: 498, mobile: 520 },
+ { date: '2024-05-07', desktop: 388, mobile: 300 },
+ { date: '2024-05-08', desktop: 149, mobile: 210 },
+ { date: '2024-05-09', desktop: 227, mobile: 180 },
+ { date: '2024-05-10', desktop: 293, mobile: 330 },
+ { date: '2024-05-11', desktop: 335, mobile: 270 },
+ { date: '2024-05-12', desktop: 197, mobile: 240 },
+ { date: '2024-05-13', desktop: 197, mobile: 160 },
+ { date: '2024-05-14', desktop: 448, mobile: 490 },
+ { date: '2024-05-15', desktop: 473, mobile: 380 },
+ { date: '2024-05-16', desktop: 338, mobile: 400 },
+ { date: '2024-05-17', desktop: 499, mobile: 420 },
+ { date: '2024-05-18', desktop: 315, mobile: 350 },
+ { date: '2024-05-19', desktop: 235, mobile: 180 },
+ { date: '2024-05-20', desktop: 177, mobile: 230 },
+ { date: '2024-05-21', desktop: 82, mobile: 140 },
+ { date: '2024-05-22', desktop: 81, mobile: 120 },
+ { date: '2024-05-23', desktop: 252, mobile: 290 },
+ { date: '2024-05-24', desktop: 294, mobile: 220 },
+ { date: '2024-05-25', desktop: 201, mobile: 250 },
+ { date: '2024-05-26', desktop: 213, mobile: 170 },
+ { date: '2024-05-27', desktop: 420, mobile: 460 },
+ { date: '2024-05-28', desktop: 233, mobile: 190 },
+ { date: '2024-05-29', desktop: 78, mobile: 130 },
+ { date: '2024-05-30', desktop: 340, mobile: 280 },
+ { date: '2024-05-31', desktop: 178, mobile: 230 },
+ { date: '2024-06-01', desktop: 178, mobile: 200 },
+ { date: '2024-06-02', desktop: 470, mobile: 410 },
+ { date: '2024-06-03', desktop: 103, mobile: 160 },
+ { date: '2024-06-04', desktop: 439, mobile: 380 },
+ { date: '2024-06-05', desktop: 88, mobile: 140 },
+ { date: '2024-06-06', desktop: 294, mobile: 250 },
+ { date: '2024-06-07', desktop: 323, mobile: 370 },
+ { date: '2024-06-08', desktop: 385, mobile: 320 },
+ { date: '2024-06-09', desktop: 438, mobile: 480 },
+ { date: '2024-06-10', desktop: 155, mobile: 200 },
+ { date: '2024-06-11', desktop: 92, mobile: 150 },
+ { date: '2024-06-12', desktop: 492, mobile: 420 },
+ { date: '2024-06-13', desktop: 81, mobile: 130 },
+ { date: '2024-06-14', desktop: 426, mobile: 380 },
+ { date: '2024-06-15', desktop: 307, mobile: 350 },
+ { date: '2024-06-16', desktop: 371, mobile: 310 },
+ { date: '2024-06-17', desktop: 475, mobile: 520 },
+ { date: '2024-06-18', desktop: 107, mobile: 170 },
+ { date: '2024-06-19', desktop: 341, mobile: 290 },
+ { date: '2024-06-20', desktop: 408, mobile: 450 },
+ { date: '2024-06-21', desktop: 169, mobile: 210 },
+ { date: '2024-06-22', desktop: 317, mobile: 270 },
+ { date: '2024-06-23', desktop: 480, mobile: 530 },
+ { date: '2024-06-24', desktop: 132, mobile: 180 },
+ { date: '2024-06-25', desktop: 141, mobile: 190 },
+ { date: '2024-06-26', desktop: 434, mobile: 380 },
+ { date: '2024-06-27', desktop: 448, mobile: 490 },
+ { date: '2024-06-28', desktop: 149, mobile: 200 },
+ { date: '2024-06-29', desktop: 103, mobile: 160 },
+ { date: '2024-06-30', desktop: 446, mobile: 400 },
+]
+
+const chartConfig = {
+ views: {
+ label: 'Page Views',
+ },
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ const [activeChart, setActiveChart] = React.useState('desktop')
+
+ const total = React.useMemo(
+ () => ({
+ desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+ mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+ }),
+ []
+ )
+
+ return (
+
+
+
+
+
+
+ {
+ const date = new Date(value)
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ })
+ }}
+ />
+ {
+ return new Date(value).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ })
+ }}
+ />
+ }
+ />
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-label-custom.tsx b/apps/design-system/registry/default/block/chart-line-label-custom.tsx
new file mode 100644
index 00000000000..3d84fec03a3
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-label-custom.tsx
@@ -0,0 +1,103 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, LabelList, Line, LineChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart with a custom label'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ color: 'hsl(var(--chart-2))',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Custom Label
+ January - June 2024
+
+
+
+
+
+ chartConfig[value]?.label}
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-label.tsx b/apps/design-system/registry/default/block/chart-line-label.tsx
new file mode 100644
index 00000000000..2c187e95961
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-label.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, LabelList, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart with a label'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Label
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-linear.tsx b/apps/design-system/registry/default/block/chart-line-linear.tsx
new file mode 100644
index 00000000000..9219a3c9de4
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-linear.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A linear line chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Linear
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-multiple.tsx b/apps/design-system/registry/default/block/chart-line-multiple.tsx
new file mode 100644
index 00000000000..f09714a2737
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-multiple.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A multiple line chart'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Multiple
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-line-step.tsx b/apps/design-system/registry/default/block/chart-line-step.tsx
new file mode 100644
index 00000000000..0ab71e07d09
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-line-step.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A line chart with step'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 73 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Line Chart - Step
+ January - June 2024
+
+
+
+
+ value.slice(0, 3)}
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-donut-active.tsx b/apps/design-system/registry/default/block/chart-pie-donut-active.tsx
new file mode 100644
index 00000000000..2490b50f65f
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-donut-active.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Label, Pie, PieChart, Sector } from 'recharts'
+import { PieSectorDataItem } from 'recharts/types/polar/Pie'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A donut chart with an active sector'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Donut Active
+ January - June 2024
+
+
+
+
+ (
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-donut-text.tsx b/apps/design-system/registry/default/block/chart-pie-donut-text.tsx
new file mode 100644
index 00000000000..cba1eee8492
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-donut-text.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import * as React from 'react'
+import { TrendingUp } from 'lucide-react'
+import { Label, Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A donut chart with text'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ const totalVisitors = React.useMemo(() => {
+ return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
+ }, [])
+
+ return (
+
+
+ Pie Chart - Donut with Text
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-donut.tsx b/apps/design-system/registry/default/block/chart-pie-donut.tsx
new file mode 100644
index 00000000000..328fbd4b48a
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-donut.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A donut chart'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Donut
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-interactive.tsx b/apps/design-system/registry/default/block/chart-pie-interactive.tsx
new file mode 100644
index 00000000000..be05cbf8e41
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-interactive.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import * as React from 'react'
+import { Label, Pie, PieChart, Sector } from 'recharts'
+import { PieSectorDataItem } from 'recharts/types/polar/Pie'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartStyle, ChartTooltip, ChartTooltipContent } from 'ui'
+import {
+ Select_Shadcn_,
+ SelectContent_Shadcn_,
+ SelectItem_Shadcn_,
+ SelectTrigger_Shadcn_,
+ SelectValue_Shadcn_,
+} from 'ui'
+
+export const description = 'An interactive pie chart'
+
+const desktopData = [
+ { month: 'january', desktop: 186, fill: 'var(--color-january)' },
+ { month: 'february', desktop: 305, fill: 'var(--color-february)' },
+ { month: 'march', desktop: 237, fill: 'var(--color-march)' },
+ { month: 'april', desktop: 173, fill: 'var(--color-april)' },
+ { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ desktop: {
+ label: 'Desktop',
+ },
+ mobile: {
+ label: 'Mobile',
+ },
+ january: {
+ label: 'January',
+ color: 'hsl(var(--chart-1))',
+ },
+ february: {
+ label: 'February',
+ color: 'hsl(var(--chart-2))',
+ },
+ march: {
+ label: 'March',
+ color: 'hsl(var(--chart-3))',
+ },
+ april: {
+ label: 'April',
+ color: 'hsl(var(--chart-4))',
+ },
+ may: {
+ label: 'May',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ const id = 'pie-interactive'
+ const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)
+
+ const activeIndex = React.useMemo(
+ () => desktopData.findIndex((item) => item.month === activeMonth),
+ [activeMonth]
+ )
+ const months = React.useMemo(() => desktopData.map((item) => item.month), [])
+
+ return (
+
+
+
+
+
+
+ {months.map((key) => {
+ const config = chartConfig[key as keyof typeof chartConfig]
+
+ if (!config) {
+ return null
+ }
+
+ return (
+
+
+ )
+ })}
+
+
+
+
+
+
+ (
+
+
+ )}
+ >
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-label-custom.tsx b/apps/design-system/registry/default/block/chart-pie-label-custom.tsx
new file mode 100644
index 00000000000..5fcae35aabe
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-label-custom.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A pie chart with a custom label'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Custom Label
+ January - June 2024
+
+
+
+
+ {
+ return (
+
+ {`${
+ chartConfig[payload.browser as keyof typeof chartConfig]?.label
+ } (${payload.visitors})`}
+
+ )
+ }}
+ nameKey="browser"
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-label-list.tsx b/apps/design-system/registry/default/block/chart-pie-label-list.tsx
new file mode 100644
index 00000000000..814371c307e
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-label-list.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { LabelList, Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A pie chart with a label list'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Label List
+ January - June 2024
+
+
+
+
+
+ chartConfig[value]?.label}
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-label.tsx b/apps/design-system/registry/default/block/chart-pie-label.tsx
new file mode 100644
index 00000000000..408bd68fb95
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-label.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A pie chart with a label'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Label
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-legend.tsx b/apps/design-system/registry/default/block/chart-pie-legend.tsx
new file mode 100644
index 00000000000..c72830caf17
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-legend.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent } from 'ui'
+
+export const description = 'A pie chart with a legend'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Legend
+ January - June 2024
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-separator-none.tsx b/apps/design-system/registry/default/block/chart-pie-separator-none.tsx
new file mode 100644
index 00000000000..ed00866c3b8
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-separator-none.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A pie chart with no separator'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Separator None
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-simple.tsx b/apps/design-system/registry/default/block/chart-pie-simple.tsx
new file mode 100644
index 00000000000..a16fb87ca56
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-simple.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A simple pie chart'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-pie-stacked.tsx b/apps/design-system/registry/default/block/chart-pie-stacked.tsx
new file mode 100644
index 00000000000..a2ab16ba711
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-pie-stacked.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import * as React from 'react'
+import { TrendingUp } from 'lucide-react'
+import { Label, Pie, PieChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A pie chart with stacked sections'
+
+const desktopData = [
+ { month: 'january', desktop: 186, fill: 'var(--color-january)' },
+ { month: 'february', desktop: 305, fill: 'var(--color-february)' },
+ { month: 'march', desktop: 237, fill: 'var(--color-march)' },
+ { month: 'april', desktop: 173, fill: 'var(--color-april)' },
+ { month: 'may', desktop: 209, fill: 'var(--color-may)' },
+]
+
+const mobileData = [
+ { month: 'january', mobile: 80, fill: 'var(--color-january)' },
+ { month: 'february', mobile: 200, fill: 'var(--color-february)' },
+ { month: 'march', mobile: 120, fill: 'var(--color-march)' },
+ { month: 'april', mobile: 190, fill: 'var(--color-april)' },
+ { month: 'may', mobile: 130, fill: 'var(--color-may)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ desktop: {
+ label: 'Desktop',
+ },
+ mobile: {
+ label: 'Mobile',
+ },
+ january: {
+ label: 'January',
+ color: 'hsl(var(--chart-1))',
+ },
+ february: {
+ label: 'February',
+ color: 'hsl(var(--chart-2))',
+ },
+ march: {
+ label: 'March',
+ color: 'hsl(var(--chart-3))',
+ },
+ april: {
+ label: 'April',
+ color: 'hsl(var(--chart-4))',
+ },
+ may: {
+ label: 'May',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Pie Chart - Stacked
+ January - June 2024
+
+
+
+
+ {
+ return chartConfig[payload?.[0].dataKey as keyof typeof chartConfig].label
+ }}
+ />
+ }
+ />
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-default.tsx b/apps/design-system/registry/default/block/chart-radar-default.tsx
new file mode 100644
index 00000000000..dc3d4e6d553
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-default.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 273 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-dots.tsx b/apps/design-system/registry/default/block/chart-radar-dots.tsx
new file mode 100644
index 00000000000..bedf14de29b
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-dots.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with dots'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 273 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Dots
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-grid-circle-fill.tsx b/apps/design-system/registry/default/block/chart-radar-grid-circle-fill.tsx
new file mode 100644
index 00000000000..d17d1536225
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-grid-circle-fill.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a grid and circle fill'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 285 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 203 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 264 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Grid Circle Filled
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-grid-circle-no-lines.tsx b/apps/design-system/registry/default/block/chart-radar-grid-circle-no-lines.tsx
new file mode 100644
index 00000000000..3e602ac5745
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-grid-circle-no-lines.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a grid and circle fill'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 203 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Grid Circle - No lines
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-grid-circle.tsx b/apps/design-system/registry/default/block/chart-radar-grid-circle.tsx
new file mode 100644
index 00000000000..0cc0277a0c4
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-grid-circle.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a grid and circle'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 273 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Grid Circle
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-grid-custom.tsx b/apps/design-system/registry/default/block/chart-radar-grid-custom.tsx
new file mode 100644
index 00000000000..31614acc9a3
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-grid-custom.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a custom grid'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 273 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Grid Custom
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-grid-fill.tsx b/apps/design-system/registry/default/block/chart-radar-grid-fill.tsx
new file mode 100644
index 00000000000..7745a10fb13
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-grid-fill.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a grid filled'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 285 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 203 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 264 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Grid Filled
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-grid-none.tsx b/apps/design-system/registry/default/block/chart-radar-grid-none.tsx
new file mode 100644
index 00000000000..a75ac15da18
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-grid-none.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with no grid'
+
+const chartData = [
+ { month: 'January', desktop: 186 },
+ { month: 'February', desktop: 305 },
+ { month: 'March', desktop: 237 },
+ { month: 'April', desktop: 273 },
+ { month: 'May', desktop: 209 },
+ { month: 'June', desktop: 214 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Grid None
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-icons.tsx b/apps/design-system/registry/default/block/chart-radar-icons.tsx
new file mode 100644
index 00000000000..b2a83ad3934
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-icons.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+
+export const description = 'A radar chart with icons'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ icon: ArrowDownFromLine,
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ icon: ArrowUpFromLine,
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Icons
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-label-custom.tsx b/apps/design-system/registry/default/block/chart-radar-label-custom.tsx
new file mode 100644
index 00000000000..51edad28517
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-label-custom.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a custom label'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Custom Label
+ Showing total visitors for the last 6 months
+
+
+
+
+ {
+ const data = chartData[index]
+
+ return (
+
+ {data.desktop}
+ /
+ {data.mobile}
+
+ {data.month}
+
+
+ )
+ }}
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-legend.tsx b/apps/design-system/registry/default/block/chart-radar-legend.tsx
new file mode 100644
index 00000000000..1500cc422a3
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-legend.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+
+export const description = 'A radar chart with a legend'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Legend
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-lines-only.tsx b/apps/design-system/registry/default/block/chart-radar-lines-only.tsx
new file mode 100644
index 00000000000..acb880c81c3
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-lines-only.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with lines only'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 160 },
+ { month: 'February', desktop: 185, mobile: 170 },
+ { month: 'March', desktop: 207, mobile: 180 },
+ { month: 'April', desktop: 173, mobile: 160 },
+ { month: 'May', desktop: 160, mobile: 190 },
+ { month: 'June', desktop: 174, mobile: 204 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Lines Only
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-multiple.tsx b/apps/design-system/registry/default/block/chart-radar-multiple.tsx
new file mode 100644
index 00000000000..5cc44043950
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-multiple.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with multiple data'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Multiple
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radar-radius.tsx b/apps/design-system/registry/default/block/chart-radar-radius.tsx
new file mode 100644
index 00000000000..f6616c4ac00
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radar-radius.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radar chart with a radius axis'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radar Chart - Radius Axis
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radial-grid.tsx b/apps/design-system/registry/default/block/chart-radial-grid.tsx
new file mode 100644
index 00000000000..fea6deab0c2
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radial-grid.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { PolarGrid, RadialBar, RadialBarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radial chart with a grid'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radial Chart - Grid
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radial-label.tsx b/apps/design-system/registry/default/block/chart-radial-label.tsx
new file mode 100644
index 00000000000..073e8b4ed47
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radial-label.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { LabelList, RadialBar, RadialBarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radial chart with a label'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radial Chart - Label
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radial-shape.tsx b/apps/design-system/registry/default/block/chart-radial-shape.tsx
new file mode 100644
index 00000000000..120a2df88d4
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radial-shape.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Label, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer } from 'ui'
+
+export const description = 'A radial chart with a custom shape'
+
+const chartData = [{ browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' }]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radial Chart - Shape
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radial-simple.tsx b/apps/design-system/registry/default/block/chart-radial-simple.tsx
new file mode 100644
index 00000000000..6c7590b2573
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radial-simple.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { RadialBar, RadialBarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radial chart'
+
+const chartData = [
+ { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+ { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+ { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+ { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+ { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
+]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ chrome: {
+ label: 'Chrome',
+ color: 'hsl(var(--chart-1))',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+ firefox: {
+ label: 'Firefox',
+ color: 'hsl(var(--chart-3))',
+ },
+ edge: {
+ label: 'Edge',
+ color: 'hsl(var(--chart-4))',
+ },
+ other: {
+ label: 'Other',
+ color: 'hsl(var(--chart-5))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radial Chart
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radial-stacked.tsx b/apps/design-system/registry/default/block/chart-radial-stacked.tsx
new file mode 100644
index 00000000000..e38791f9bae
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radial-stacked.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+export const description = 'A radial chart with stacked sections'
+
+const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: 'hsl(var(--chart-1))',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+ return (
+
+
+ Radial Chart - Stacked
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/block/chart-radial-text.tsx b/apps/design-system/registry/default/block/chart-radial-text.tsx
new file mode 100644
index 00000000000..8dd238c505b
--- /dev/null
+++ b/apps/design-system/registry/default/block/chart-radial-text.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import { Label, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
+import { ChartConfig, ChartContainer } from 'ui'
+
+export const description = 'A radial chart with text'
+
+const chartData = [{ browser: 'safari', visitors: 200, fill: 'var(--color-safari)' }]
+
+const chartConfig = {
+ visitors: {
+ label: 'Visitors',
+ },
+ safari: {
+ label: 'Safari',
+ color: 'hsl(var(--chart-2))',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ Radial Chart - Text
+ January - June 2024
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
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/assistant-chat-commands.tsx b/apps/design-system/registry/default/example/assistant-chat-commands.tsx
new file mode 100644
index 00000000000..d09a27fdf74
--- /dev/null
+++ b/apps/design-system/registry/default/example/assistant-chat-commands.tsx
@@ -0,0 +1,55 @@
+import React, { useRef, useState } from 'react'
+import { AssistantChatForm } from 'ui-patterns/AssistantChat/AssistantChatForm'
+import { AssistantCommandsPopover } from 'ui-patterns/AssistantChat/AssistantCommandsPopover'
+
+export default function AssistantChatCommands() {
+ const [commandsOpen, setCommandsOpen] = useState(false)
+ const textAreaRef = useRef(null)
+ const [value, setValueState] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ function handleSubmit(event: React.FormEvent) {
+ // set loading for 3 seconds and then reset
+ setLoading(true)
+ setTimeout(() => {
+ setLoading(false)
+ }, 1500)
+ }
+
+ const suggestions = [
+ 'Add policy for org Inserted User Access',
+ 'Add policy for User-Specific Todo Access',
+ 'Add policy for Org Update Restriction',
+ ]
+
+ 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('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..9f889005280
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -0,0 +1,92 @@
+'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 { toast } from 'sonner'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import {
+ Button,
+ Calendar,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+ Popover_Shadcn_,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+} 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('You submitted the following values:', {
+ description: (
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/chart-bar-demo-axis.tsx b/apps/design-system/registry/default/example/chart-bar-demo-axis.tsx
new file mode 100644
index 00000000000..7ecc971b0cd
--- /dev/null
+++ b/apps/design-system/registry/default/example/chart-bar-demo-axis.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { ChartConfig, ChartContainer } from 'ui'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: '#2563eb',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: '#60a5fa',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ value.slice(0, 3)}
+ />
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/chart-bar-demo-grid.tsx b/apps/design-system/registry/default/example/chart-bar-demo-grid.tsx
new file mode 100644
index 00000000000..73b9783703e
--- /dev/null
+++ b/apps/design-system/registry/default/example/chart-bar-demo-grid.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { Bar, BarChart, CartesianGrid } from 'recharts'
+import { ChartConfig, ChartContainer } from 'ui'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: '#2563eb',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: '#60a5fa',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx b/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx
new file mode 100644
index 00000000000..c18c880c725
--- /dev/null
+++ b/apps/design-system/registry/default/example/chart-bar-demo-legend.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartLegend,
+ ChartLegendContent,
+ ChartTooltip,
+ ChartTooltipContent,
+} from 'ui'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: '#2563eb',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: '#60a5fa',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ value.slice(0, 3)}
+ />
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx b/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx
new file mode 100644
index 00000000000..2d5cdf9b76f
--- /dev/null
+++ b/apps/design-system/registry/default/example/chart-bar-demo-tooltip.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: '#2563eb',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: '#60a5fa',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+ value.slice(0, 3)}
+ />
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/chart-bar-demo.tsx b/apps/design-system/registry/default/example/chart-bar-demo.tsx
new file mode 100644
index 00000000000..646d11730fb
--- /dev/null
+++ b/apps/design-system/registry/default/example/chart-bar-demo.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { Bar, BarChart } from 'recharts'
+
+import { ChartConfig, ChartContainer } from 'ui'
+
+const chartData = [
+ { month: 'January', desktop: 186, mobile: 80 },
+ { month: 'February', desktop: 305, mobile: 200 },
+ { month: 'March', desktop: 237, mobile: 120 },
+ { month: 'April', desktop: 73, mobile: 190 },
+ { month: 'May', desktop: 209, mobile: 130 },
+ { month: 'June', desktop: 214, mobile: 140 },
+]
+
+const chartConfig = {
+ desktop: {
+ label: 'Desktop',
+ color: '#2563eb',
+ },
+ mobile: {
+ label: 'Mobile',
+ color: '#60a5fa',
+ },
+} satisfies ChartConfig
+
+export default function Component() {
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/chart-tooltip-demo.tsx b/apps/design-system/registry/default/example/chart-tooltip-demo.tsx
new file mode 100644
index 00000000000..89f338fda2c
--- /dev/null
+++ b/apps/design-system/registry/default/example/chart-tooltip-demo.tsx
@@ -0,0 +1,205 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export default function Component() {
+ return (
+ >({
+ resolver: zodResolver(FormSchema),
+ defaultValues: {
+ items: ['recents', 'home'],
+ },
+ })
+
+ function onSubmit(data: z.infer) {
+ toast('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..68a90d95d63
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import {
+ Button,
+ Checkbox_Shadcn_,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+} 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('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('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/commandmenu-badge.tsx b/apps/design-system/registry/default/example/commandmenu-badge.tsx
new file mode 100644
index 00000000000..309f8cd2afa
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-badge.tsx
@@ -0,0 +1,42 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import {
+ BadgeExperimental,
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandProvider,
+ useRegisterCommands,
+ useSetCommandMenuOpen,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ useRegisterCommands('Commands', [
+ {
+ id: 'experimental',
+ name: 'Experimental',
+ action: () => alert('You triggered an experimental command'),
+ badge: () =>
+
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-conditional.tsx b/apps/design-system/registry/default/example/commandmenu-conditional.tsx
new file mode 100644
index 00000000000..4d8159b3573
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-conditional.tsx
@@ -0,0 +1,70 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import { useMemo, useState } from 'react'
+import {
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ useRegisterCommands,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ const [activeCommand, setActiveCommand] = useState(1)
+
+ const toggleCommands = () => setActiveCommand((state) => (state === 1 ? 2 : 1))
+
+ const commandOne = useMemo(
+ () => [
+ {
+ id: 'one',
+ name: 'One',
+ action: () => alert('One'),
+ },
+ ],
+ []
+ )
+
+ const commandTwo = useMemo(
+ () => [
+ {
+ id: 'two',
+ name: 'Two',
+ action: () => alert('Two'),
+ },
+ ],
+ []
+ )
+
+ const command = activeCommand === 1 ? commandOne : commandTwo
+
+ useRegisterCommands('Commands', command, { deps: [command] })
+
+ return (
+
+ )
+}
+
+function CommandMenuTrigger() {
+ return (
+
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-demo.tsx b/apps/design-system/registry/default/example/commandmenu-demo.tsx
new file mode 100644
index 00000000000..a1cfec496cd
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-demo.tsx
@@ -0,0 +1,48 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import {
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ useRegisterCommands,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ useRegisterCommands('Action commands', [
+ {
+ id: 'alert',
+ name: 'Alert',
+ action: () => alert('You triggered a command'),
+ },
+ ])
+ useRegisterCommands('Route commands', [
+ {
+ id: 'supabase-website',
+ name: 'Go to Supabase website',
+ route: 'https://supabase.com',
+ },
+ ])
+
+ return null
+}
+
+function CommandMenuTrigger() {
+ return (
+
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-force.tsx b/apps/design-system/registry/default/example/commandmenu-force.tsx
new file mode 100644
index 00000000000..ac475beb238
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-force.tsx
@@ -0,0 +1,60 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import {
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ useRegisterCommands,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ useRegisterCommands('Commands', [
+ {
+ id: 'forced',
+ name: 'Force-mounted',
+ action: () => alert("This command always shows even if it doesn't match the search query"),
+ forceMount: true,
+ },
+ {
+ id: 'not-forced',
+ name: 'Not force-mounted',
+ action: () => alert("This command will disappear if it doesn't match the search query"),
+ },
+ ])
+ useRegisterCommands(
+ 'Force-mounted section',
+ [
+ {
+ id: 'example',
+ name: 'An example',
+ action: () => alert('This entire section is force-mounted'),
+ },
+ ],
+ {
+ forceMountSection: true,
+ }
+ )
+
+ return null
+}
+
+function CommandMenuTrigger() {
+ return (
+
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-hidden.tsx b/apps/design-system/registry/default/example/commandmenu-hidden.tsx
new file mode 100644
index 00000000000..a9d60c69025
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-hidden.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import {
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ useRegisterCommands,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ useRegisterCommands('Commands', [
+ {
+ id: 'shown',
+ name: 'shown',
+ action: () => alert('This command is shown by default'),
+ },
+ {
+ id: 'hidden',
+ name: 'open sesame',
+ action: () => alert('This command is only shown when searched'),
+ defaultHidden: true,
+ },
+ ])
+
+ return null
+}
+
+function CommandMenuTrigger() {
+ return (
+
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-icon.tsx b/apps/design-system/registry/default/example/commandmenu-icon.tsx
new file mode 100644
index 00000000000..c877f83e450
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-icon.tsx
@@ -0,0 +1,43 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import { Github } from 'lucide-react'
+import {
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ useRegisterCommands,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ useRegisterCommands('Commands', [
+ {
+ id: 'github',
+ name: 'Go to repo',
+ route: 'https://github.com/supabase/supabase',
+ icon: () =>
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx b/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx
new file mode 100644
index 00000000000..0cd74c1d7a1
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-subpage-custom.tsx
@@ -0,0 +1,65 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import { useMemo } from 'react'
+import {
+ Breadcrumb,
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ PageType,
+ useRegisterCommands,
+ useRegisterPage,
+ useSetPage,
+} from 'ui-patterns/CommandMenu'
+
+function CustomSubpage() {
+ return (
+
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/commandmenu-subpage.tsx b/apps/design-system/registry/default/example/commandmenu-subpage.tsx
new file mode 100644
index 00000000000..ef842b43143
--- /dev/null
+++ b/apps/design-system/registry/default/example/commandmenu-subpage.tsx
@@ -0,0 +1,73 @@
+import { Button } from '@ui/components/shadcn/ui/button'
+import { useMemo } from 'react'
+import {
+ CommandInput,
+ CommandList,
+ CommandMenu,
+ CommandMenuTrigger as CommandMenuTriggerPrimitive,
+ CommandProvider,
+ PageType,
+ useRegisterCommands,
+ useRegisterPage,
+ useSetPage,
+} from 'ui-patterns/CommandMenu'
+
+function Commands() {
+ const setPage = useSetPage()
+
+ const commands = useMemo(
+ () => [
+ {
+ id: 'subcommand',
+ name: 'Subcommand',
+ action: () => alert('Triggered from subpage'),
+ },
+ ],
+ []
+ )
+
+ useRegisterPage(
+ 'Subpage',
+ {
+ type: PageType.Commands,
+ sections: [
+ {
+ id: 'subpage',
+ name: 'Subpage',
+ commands,
+ },
+ ],
+ },
+ { deps: [commands] }
+ )
+
+ useRegisterCommands('Commands', [
+ {
+ id: 'subpage',
+ name: 'Go to subpage',
+ action: () => setPage('Subpage'),
+ },
+ ])
+
+ return null
+}
+
+function CommandMenuTrigger() {
+ return (
+
+
+
+ )
+}
+
+export default function CommandMenuDemo() {
+ return (
+
+
+ )
+}
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..dc3270acb69
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -0,0 +1,92 @@
+'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 { toast } from 'sonner'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import {
+ Button,
+ Calendar,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+ Popover_Shadcn_,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+} 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('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/expanding-textarea-demo.tsx b/apps/design-system/registry/default/example/expanding-textarea-demo.tsx
new file mode 100644
index 00000000000..464d1db42ab
--- /dev/null
+++ b/apps/design-system/registry/default/example/expanding-textarea-demo.tsx
@@ -0,0 +1,16 @@
+import { useState } from 'react'
+import { ExpandingTextArea } from 'ui'
+
+export default function ExpandingTextareaDemo() {
+ const [value, setValue] = useState('')
+
+ return (
+ {
+ setValue(event.target.value)
+ }}
+ />
+ )
+}
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('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..bccd4423c69
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -0,0 +1,79 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import {
+ Button,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} 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('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..83892ee5bab
--- /dev/null
+++ b/apps/design-system/registry/default/example/multi-select-form.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import Image from 'next/image'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import z from 'zod'
+
+import {
+ Button,
+ Form_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} from 'ui'
+import {
+ MultiSelector,
+ MultiSelectorContent,
+ MultiSelectorInput,
+ MultiSelectorItem,
+ MultiSelectorList,
+ MultiSelectorTrigger,
+} from 'ui-patterns/multi-select'
+
+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
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Area Chart - Interactive
+ Showing total visitors for the last 3 months
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Bar Chart - Interactive
+ Showing total visitors for the last 3 months
+
+
+ {['desktop', 'mobile'].map((key) => {
+ const chart = key as keyof typeof chartConfig
+ return (
+
+ )
+ })}
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Line Chart - Interactive
+ Showing total visitors for the last 3 months
+
+
+ {['desktop', 'mobile'].map((key) => {
+ const chart = key as keyof typeof chartConfig
+ return (
+
+ )
+ })}
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Pie Chart - Interactive
+ January - June 2024
+
+
+
+ {config?.label}
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ setValueState(e)}
+ suggestions={suggestions}
+ >
+ setValueState(e.target.value)}
+ commandsOpen={commandsOpen}
+ setCommandsOpen={setCommandsOpen}
+ onSubmit={async (event) => {
+ event.preventDefault()
+ handleSubmit(event)
+ }}
+ />
+
+
+ )
+}
diff --git a/apps/design-system/registry/default/example/assistant-chat-demo.tsx b/apps/design-system/registry/default/example/assistant-chat-demo.tsx
new file mode 100644
index 00000000000..54ad73a33f2
--- /dev/null
+++ b/apps/design-system/registry/default/example/assistant-chat-demo.tsx
@@ -0,0 +1,30 @@
+import { Box } from 'lucide-react'
+import { useState } from 'react'
+import { AssistantChatForm } from 'ui-patterns/AssistantChat/AssistantChatForm'
+
+export default function AssistantChatDemo() {
+ const [value, setValueState] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ function handleSubmit(event: React.FormEvent) {
+ // set loading for 3 seconds and then reset
+ setLoading(true)
+ setTimeout(() => {
+ setLoading(false)
+ }, 1500)
+ }
+
+ return (
+ + Press / to open + commands +
+
+
+
+ }>
+ 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 (
+
+
+ )
+}
+
+function TooltipDemo({
+ indicator = 'dot',
+ label,
+ payload,
+ hideLabel,
+ hideIndicator,
+ className,
+}: {
+ label: string
+ hideLabel?: boolean
+ hideIndicator?: boolean
+ indicator?: 'line' | 'dot' | 'dashed'
+ payload: {
+ name: string
+ value: number
+ fill: string
+ }[]
+ nameKey?: string
+ labelKey?: string
+} & React.ComponentProps<'div'>) {
+ const tooltipLabel = hideLabel ? null :
+
+ Label
+
+
+
+ Name
+
+
+
+
+
+ Indicator
+ {label}
+
+ if (!payload?.length) {
+ return null
+ }
+
+ const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+ return (
+
+ {!nestLabel ? tooltipLabel : null}
+
+ )
+}
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 (
+
+ {payload.map((item, index) => {
+ const indicatorColor = item.fill
+
+ return (
+
+ svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+ indicator === 'dot' && 'items-center'
+ )}
+ >
+ <>
+ {!hideIndicator && (
+
+ )}
+
+ )
+ })}
+
+
+
+
+ {nestLabel ? tooltipLabel : null}
+ {item.name}
+
+
+ {item.value.toLocaleString()}
+
+
+
+ )
+}
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..3dfe784db0d
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -0,0 +1,120 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import {
+ Button,
+ Checkbox_Shadcn_,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+} 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..011464b8eab
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-demo.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { Check, ChevronsUpDown } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+import {
+ Button,
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ 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..5c4e7d16208
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import {
+ Button,
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+} from 'ui'
+import {
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+ Popover_Shadcn_,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+} 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 + +
+
+
+
+
+ )
+}
+
+function Commands() {
+ const setPage = useSetPage()
+
+ useRegisterPage('Subpage', {
+ type: PageType.Component,
+ component: CustomSubpage,
+ })
+
+ useRegisterCommands('Commands', [
+ {
+ id: 'subpage',
+ name: 'Go to subpage',
+ action: () => setPage('Subpage'),
+ },
+ ])
+
+ return null
+}
+
+function CommandMenuTrigger() {
+ return (
+ Custom subpage
++ Here is a custom subpage built from a component that you provide. +
+
+ {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..ea9db189256
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import {
+ Button,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormDescription_Shadcn_,
+ FormField_Shadcn_,
+ FormItem_Shadcn_,
+ FormLabel_Shadcn_,
+ FormMessage_Shadcn_,
+ Input,
+} 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`. +
+