feat: themes (#1135)

apps/www/__registry__/index.tsx

@@ -1006,6 +1006,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/mode-toggle")),
       files: ["registry/default/example/mode-toggle.tsx"],
     },
+    "cards": {
+      name: "cards",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/cards")),
+      files: ["registry/default/example/cards/cards.tsx"],
+    },
   },  "new-york": {
     "accordion": {
       name: "accordion",
@@ -2008,5 +2015,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/example/mode-toggle")),
       files: ["registry/new-york/example/mode-toggle.tsx"],
     },
+    "cards": {
+      name: "cards",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/new-york/example/cards")),
+      files: ["registry/new-york/example/cards/cards.tsx"],
+    },
   },
 }

apps/www/app/examples/dashboard/page.tsx

@@ -25,7 +25,7 @@ import { UserNav } from "@/app/examples/dashboard/components/user-nav"
 
 export const metadata: Metadata = {
   title: "Dashboard",
-  description: "Example dashboard app using the components.",
+  description: "Example dashboard app built using the components.",
 }
 
 export default function DashboardPage() {

apps/www/app/layout.tsx

@@ -9,6 +9,7 @@ import { ThemeProvider } from "@/components/providers"
 import { SiteFooter } from "@/components/site-footer"
 import { SiteHeader } from "@/components/site-header"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeSwitcher } from "@/components/theme-switcher"
 import { Toaster as DefaultToaster } from "@/registry/default/ui/toaster"
 import { Toaster as NewYorkToaster } from "@/registry/new-york/ui/toaster"
 
@@ -82,7 +83,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
             fontSans.variable
           )}
         >
-          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
             <div className="relative flex min-h-screen flex-col">
               <SiteHeader />
               <div className="flex-1">{children}</div>
@@ -90,6 +96,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             </div>
             <TailwindIndicator />
           </ThemeProvider>
+          <ThemeSwitcher />
           <Analytics />
           <NewYorkToaster />
           <DefaultToaster />

apps/www/app/themes/page.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from "next"
+
+import "public/registry/themes.css"
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { ThemeCustomizer } from "@/components/theme-customizer"
+import { ThemeWrapper } from "@/components/theme-wrapper"
+import { ThemesTabs } from "@/app/themes/tabs"
+
+export const metadata: Metadata = {
+  title: "Themes",
+  description: "Hand-picked themes that you can copy and paste into your apps.",
+}
+
+export default function ThemesPage() {
+  return (
+    <div className="container">
+      <ThemeWrapper
+        defaultTheme="zinc"
+        className="relative flex flex-col items-start md:flex-row md:items-center"
+      >
+        <PageHeader className="relative pb-4 md:pb-8 lg:pb-12">
+          <PageHeaderHeading>Make it yours.</PageHeaderHeading>
+          <PageHeaderDescription>
+            Hand-picked themes that you can copy and paste into your apps.
+          </PageHeaderDescription>
+        </PageHeader>
+        <div className="px-4 pb-8 md:ml-auto md:pb-0">
+          <ThemeCustomizer />
+        </div>
+      </ThemeWrapper>
+      <ThemesTabs />
+    </div>
+  )
+}

apps/www/app/themes/tabs.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+
+import { useConfig } from "@/hooks/use-config"
+import { ThemeWrapper } from "@/components/theme-wrapper"
+import CardsDefault from "@/registry/default/example/cards"
+import { Skeleton } from "@/registry/default/ui/skeleton"
+import CardsNewYork from "@/registry/new-york/example/cards"
+
+export function ThemesTabs() {
+  const [mounted, setMounted] = React.useState(false)
+  const [config] = useConfig()
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <div className="space-y-8">
+      {!mounted ? (
+        <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:gap-6">
+          <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-6">
+            <Skeleton className="h-[218px] w-full" />
+            <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
+              <Skeleton className="h-[218px] w-full" />
+              <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+                <Skeleton className="h-[218px] w-full" />
+              </div>
+              <div className="pt-3 sm:col-span-2 xl:pt-4">
+                <Skeleton className="h-[218px] w-full" />
+              </div>
+            </div>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+              <div className="space-y-4 xl:space-y-6">
+                <Skeleton className="h-[218px] w-full" />
+                <Skeleton className="h-[218px] w-full" />
+                <Skeleton className="h-[218px] w-full" />
+              </div>
+              <div className="space-y-4 xl:space-y-6">
+                <Skeleton className="h-[218px] w-full" />
+                <Skeleton className="h-[218px] w-full" />
+                <div className="hidden xl:block">
+                  <Skeleton className="h-[218px] w-full" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-4 lg:col-span-6 xl:col-span-4 xl:space-y-6">
+            <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
+              <Skeleton className="h-[218px] w-full" />
+              <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+                <Skeleton className="h-[218px] w-full" />
+              </div>
+              <div className="pt-3 sm:col-span-2 xl:pt-4">
+                <Skeleton className="h-[218px] w-full" />
+              </div>
+            </div>
+            <div className="hidden md:block">
+              <Skeleton className="h-[218px] w-full" />
+            </div>
+            <Skeleton className="h-[218px] w-full" />
+          </div>
+        </div>
+      ) : (
+        <ThemeWrapper>
+          {config.style === "new-york" && <CardsNewYork />}
+          {config.style === "default" && <CardsDefault />}
+        </ThemeWrapper>
+      )}
+    </div>
+  )
+}

apps/www/components/copy-button.tsx

@@ -21,7 +21,7 @@ interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   event?: Event["name"]
 }
 
-async function copyToClipboardWithMeta(value: string, event?: Event) {
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
   navigator.clipboard.writeText(value)
   if (event) {
     trackEvent(event)

apps/www/components/drawer.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { forwardRef } from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerContent = forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPrimitive.Portal>
+    <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-zinc-950/60" />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 h-[96%] rounded-t-[10px] bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="absolute left-1/2 top-3 h-2 w-[100px] translate-x-[-50%] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPrimitive.Portal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+export { DrawerTrigger, DrawerContent }

apps/www/components/main-nav.tsx

@@ -7,6 +7,7 @@ import { usePathname } from "next/navigation"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
 import { Icons } from "@/components/icons"
+import { Badge } from "@/registry/new-york/ui/badge"
 
 export function MainNav() {
   const pathname = usePathname()
@@ -40,6 +41,17 @@ export function MainNav() {
         >
           Components
         </Link>
+        <Link
+          href="/themes"
+          className={cn(
+            "transition-colors hover:text-foreground/80",
+            pathname?.startsWith("/themes")
+              ? "text-foreground"
+              : "text-foreground/60"
+          )}
+        >
+          Themes
+        </Link>
         <Link
           href="/examples"
           className={cn(

apps/www/components/site-header.tsx

@@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button"
 
 export function SiteHeader() {
   return (
-    <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur">
+    <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur">
       <div className="container flex h-14 items-center">
         <MainNav />
         <MobileNav />

apps/www/components/theme-component.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Index } from "@/__registry__"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { Icons } from "@/components/icons"
+
+interface ThemeComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  extractClassname?: boolean
+  extractedClassNames?: string
+  align?: "center" | "start" | "end"
+}
+
+export function ThemeComponent({ name, ...props }: ThemeComponentProps) {
+  const [config] = useConfig()
+
+  const Preview = React.useMemo(() => {
+    const Component = Index[config.style][name]?.component
+
+    if (!Component) {
+      return (
+        <p className="text-sm text-muted-foreground">
+          Component{" "}
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+            {name}
+          </code>{" "}
+          not found in registry.
+        </p>
+      )
+    }
+
+    return <Component />
+  }, [name, config.style])
+
+  return (
+    <div className={cn("relative")} {...props}>
+      <React.Suspense
+        fallback={
+          <div className="flex items-center text-sm text-muted-foreground">
+            <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            Loading...
+          </div>
+        }
+      >
+        {Preview}
+      </React.Suspense>
+    </div>
+  )
+}

apps/www/components/theme-customizer.tsx

@@ -0,0 +1,629 @@
+"use client"
+
+import * as React from "react"
+import {
+  CheckIcon,
+  CopyIcon,
+  InfoCircledIcon,
+  MoonIcon,
+  ResetIcon,
+  SunIcon,
+} from "@radix-ui/react-icons"
+import template from "lodash.template"
+import { Paintbrush } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { DrawerContent, DrawerTrigger } from "@/components/drawer"
+import { ThemeWrapper } from "@/components/theme-wrapper"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/registry/new-york/ui/dialog"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+import { Skeleton } from "@/registry/new-york/ui/skeleton"
+import { Theme, themes } from "@/registry/themes"
+
+import "@/styles/mdx.css"
+import { Drawer } from "vaul"
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export function ThemeCustomizer() {
+  const [config, setConfig] = useConfig()
+  const { resolvedTheme: mode } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Drawer.Root>
+        <DrawerTrigger asChild>
+          <Button variant="outline" className="md:hidden">
+            <Paintbrush className="mr-2 h-4 w-4" />
+            Customize
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent className="h-[85%] p-6 pt-10">
+          <Customizer />
+        </DrawerContent>
+      </Drawer.Root>
+      <div className="hidden md:flex">
+        <div className="mr-2 hidden items-center space-x-0.5 lg:flex">
+          {mounted ? (
+            <>
+              {["zinc", "rose", "blue", "green", "orange"].map((color) => {
+                const theme = themes.find((theme) => theme.name === color)
+                const isActive = config.theme === color
+
+                if (!theme) {
+                  return null
+                }
+
+                return (
+                  <Tooltip key={theme.name}>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() =>
+                          setConfig({
+                            ...config,
+                            theme: theme.name,
+                          })
+                        }
+                        className={cn(
+                          "flex h-9 w-9 items-center justify-center rounded-full border-2 text-xs",
+                          isActive
+                            ? "border-[--theme-primary]"
+                            : "border-transparent"
+                        )}
+                        style={
+                          {
+                            "--theme-primary": `hsl(${
+                              theme?.activeColor[
+                                mode === "dark" ? "dark" : "light"
+                              ]
+                            })`,
+                          } as React.CSSProperties
+                        }
+                      >
+                        <span
+                          className={cn(
+                            "flex h-6 w-6 items-center justify-center rounded-full bg-[--theme-primary]"
+                          )}
+                        >
+                          {isActive && (
+                            <CheckIcon className="h-4 w-4 text-white" />
+                          )}
+                        </span>
+                        <span className="sr-only">{theme.label}</span>
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent
+                      align="center"
+                      className="rounded-[0.5rem] bg-zinc-900 text-zinc-50"
+                    >
+                      {theme.label}
+                    </TooltipContent>
+                  </Tooltip>
+                )
+              })}
+            </>
+          ) : (
+            <div className="mr-1 flex items-center space-x-3">
+              <Skeleton className="h-6 w-6 rounded-full" />
+              <Skeleton className="h-6 w-6 rounded-full" />
+              <Skeleton className="h-6 w-6 rounded-full" />
+              <Skeleton className="h-6 w-6 rounded-full" />
+              <Skeleton className="h-6 w-6 rounded-full" />
+            </div>
+          )}
+        </div>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">
+              <Paintbrush className="mr-2 h-4 w-4" />
+              Customize
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            align="end"
+            className="z-40 w-[340px] rounded-[0.5rem] bg-white p-6 dark:bg-zinc-950"
+          >
+            <Customizer />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <CopyCodeButton />
+    </div>
+  )
+}
+
+function Customizer() {
+  const [mounted, setMounted] = React.useState(false)
+  const { setTheme: setMode, resolvedTheme: mode } = useTheme()
+  const [config, setConfig] = useConfig()
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <ThemeWrapper
+      defaultTheme="zinc"
+      className="flex flex-col space-y-4 md:space-y-6"
+    >
+      <div className="flex items-start">
+        <div className="space-y-1 pr-2">
+          <div className="font-semibold leading-none tracking-tight">
+            Customize
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Pick a style and color for your components.
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="ml-auto rounded-[0.5rem]"
+          onClick={() => {
+            setConfig({
+              ...config,
+              theme: "zinc",
+              radius: 0.5,
+            })
+          }}
+        >
+          <ResetIcon />
+          <span className="sr-only">Reset</span>
+        </Button>
+      </div>
+      <div className="flex flex-1 flex-col space-y-4 md:space-y-6">
+        <div className="space-y-1.5">
+          <div className="flex w-full items-center">
+            <Label className="text-xs">Style</Label>
+            <Popover>
+              <PopoverTrigger>
+                <InfoCircledIcon className="ml-1 h-3 w-3" />
+                <span className="sr-only">About styles</span>
+              </PopoverTrigger>
+              <PopoverContent
+                className="space-y-3 rounded-[0.5rem] text-sm"
+                side="right"
+                align="start"
+                alignOffset={-20}
+              >
+                <p className="font-medium">
+                  What is the difference between the New York and Default style?
+                </p>
+                <p>
+                  A style comes with its own set of components, animations,
+                  icons and more.
+                </p>
+                <p>
+                  The <span className="font-medium">Default</span> style has
+                  larger inputs, uses lucide-react for icons and
+                  tailwindcss-animate for animations.
+                </p>
+                <p>
+                  The <span className="font-medium">New York</span> style ships
+                  with smaller buttons and cards with shadows. It uses icons
+                  from Radix Icons.
+                </p>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <div className="grid grid-cols-3 gap-2">
+            <Button
+              variant={"outline"}
+              size="sm"
+              onClick={() => setConfig({ ...config, style: "default" })}
+              className={cn(
+                config.style === "default" && "border-2 border-primary"
+              )}
+            >
+              Default
+            </Button>
+            <Button
+              variant={"outline"}
+              size="sm"
+              onClick={() => setConfig({ ...config, style: "new-york" })}
+              className={cn(
+                config.style === "new-york" && "border-2 border-primary"
+              )}
+            >
+              New York
+            </Button>
+          </div>
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Color</Label>
+          <div className="grid grid-cols-3 gap-2">
+            {themes.map((theme) => {
+              const isActive = config.theme === theme.name
+
+              return mounted ? (
+                <Button
+                  variant={"outline"}
+                  size="sm"
+                  key={theme.name}
+                  onClick={() => {
+                    setConfig({
+                      ...config,
+                      theme: theme.name,
+                    })
+                  }}
+                  className={cn(
+                    "justify-start",
+                    isActive && "border-2 border-primary"
+                  )}
+                  style={
+                    {
+                      "--theme-primary": `hsl(${
+                        theme?.activeColor[mode === "dark" ? "dark" : "light"]
+                      })`,
+                    } as React.CSSProperties
+                  }
+                >
+                  <span
+                    className={cn(
+                      "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+                    )}
+                  >
+                    {isActive && <CheckIcon className="h-4 w-4 text-white" />}
+                  </span>
+                  {theme.label}
+                </Button>
+              ) : (
+                <Skeleton className="h-8 w-full" key={theme.name} />
+              )
+            })}
+          </div>
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Radius</Label>
+          <div className="grid grid-cols-5 gap-2">
+            {["0", "0.3", "0.5", "0.75", "1.0"].map((value) => {
+              return (
+                <Button
+                  variant={"outline"}
+                  size="sm"
+                  key={value}
+                  onClick={() => {
+                    setConfig({
+                      ...config,
+                      radius: parseFloat(value),
+                    })
+                  }}
+                  className={cn(
+                    config.radius === parseFloat(value) &&
+                      "border-2 border-primary"
+                  )}
+                >
+                  {value}
+                </Button>
+              )
+            })}
+          </div>
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Mode</Label>
+          <div className="grid grid-cols-3 gap-2">
+            {mounted ? (
+              <>
+                <Button
+                  variant={"outline"}
+                  size="sm"
+                  onClick={() => setMode("light")}
+                  className={cn(mode === "light" && "border-2 border-primary")}
+                >
+                  <SunIcon className="mr-1 -translate-x-1" />
+                  Light
+                </Button>
+                <Button
+                  variant={"outline"}
+                  size="sm"
+                  onClick={() => setMode("dark")}
+                  className={cn(mode === "dark" && "border-2 border-primary")}
+                >
+                  <MoonIcon className="mr-1 -translate-x-1" />
+                  Dark
+                </Button>
+              </>
+            ) : (
+              <>
+                <Skeleton className="h-8 w-full" />
+                <Skeleton className="h-8 w-full" />
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </ThemeWrapper>
+  )
+}
+
+function CopyCodeButton() {
+  const [config] = useConfig()
+  const activeTheme = themes.find((theme) => theme.name === config.theme)
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <>
+      {activeTheme && (
+        <Button
+          onClick={() => {
+            copyToClipboardWithMeta(getThemeCode(activeTheme, config.radius), {
+              name: "copy_theme_code",
+              properties: {
+                theme: activeTheme.name,
+                radius: config.radius,
+              },
+            })
+            setHasCopied(true)
+          }}
+          className="md:hidden"
+        >
+          {hasCopied ? (
+            <CheckIcon className="mr-2 h-4 w-4" />
+          ) : (
+            <CopyIcon className="mr-2 h-4 w-4" />
+          )}
+          Copy
+        </Button>
+      )}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="hidden md:flex">Copy code</Button>
+        </DialogTrigger>
+        <DialogContent className="max-w-2xl outline-none">
+          <DialogHeader>
+            <DialogTitle>Theme</DialogTitle>
+            <DialogDescription>
+              Copy and paste the following code into your CSS file.
+            </DialogDescription>
+          </DialogHeader>
+          <ThemeWrapper defaultTheme="zinc" className="relative">
+            <CustomizerCode />
+            {activeTheme && (
+              <Button
+                size="sm"
+                onClick={() => {
+                  copyToClipboardWithMeta(
+                    getThemeCode(activeTheme, config.radius),
+                    {
+                      name: "copy_theme_code",
+                      properties: {
+                        theme: activeTheme.name,
+                        radius: config.radius,
+                      },
+                    }
+                  )
+                  setHasCopied(true)
+                }}
+                className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground"
+              >
+                {hasCopied ? (
+                  <CheckIcon className="mr-2 h-4 w-4" />
+                ) : (
+                  <CopyIcon className="mr-2 h-4 w-4" />
+                )}
+                Copy
+              </Button>
+            )}
+          </ThemeWrapper>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+function CustomizerCode() {
+  const [config] = useConfig()
+  const activeTheme = themes.find((theme) => theme.name === config.theme)
+
+  return (
+    <ThemeWrapper defaultTheme="zinc" className="relative space-y-4">
+      <div data-rehype-pretty-code-fragment="">
+        <pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+            <span className="line text-white">@layer base &#123;</span>
+            <span className="line text-white">&nbsp;&nbsp;:root &#123;</span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+              {activeTheme?.cssVars.light["background"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+              {activeTheme?.cssVars.light["foreground"]};
+            </span>
+            {[
+              "card",
+              "popover",
+              "primary",
+              "secondary",
+              "muted",
+              "accent",
+              "destructive",
+            ].map((prefix) => (
+              <>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                  {
+                    activeTheme?.cssVars.light[
+                      prefix as keyof typeof activeTheme.cssVars.light
+                    ]
+                  }
+                  ;
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                  {
+                    activeTheme?.cssVars.light[
+                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
+                    ]
+                  }
+                  ;
+                </span>
+              </>
+            ))}
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+              {activeTheme?.cssVars.light["border"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+              {activeTheme?.cssVars.light["input"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+              {activeTheme?.cssVars.light["ring"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--radius: {config.radius}rem;
+            </span>
+            <span className="line text-white">&nbsp;&nbsp;&#125;</span>
+            <span className="line text-white">&nbsp;</span>
+            <span className="line text-white">&nbsp;&nbsp;.dark &#123;</span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--background:{" "}
+              {activeTheme?.cssVars.dark["background"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--foreground:{" "}
+              {activeTheme?.cssVars.dark["foreground"]};
+            </span>
+            {[
+              "card",
+              "popover",
+              "primary",
+              "secondary",
+              "muted",
+              "accent",
+              "destructive",
+            ].map((prefix) => (
+              <>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}:{" "}
+                  {
+                    activeTheme?.cssVars.dark[
+                      prefix as keyof typeof activeTheme.cssVars.dark
+                    ]
+                  }
+                  ;
+                </span>
+                <span className="line text-white">
+                  &nbsp;&nbsp;&nbsp;&nbsp;--{prefix}-foreground:{" "}
+                  {
+                    activeTheme?.cssVars.dark[
+                      `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
+                    ]
+                  }
+                  ;
+                </span>
+              </>
+            ))}
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--border:{" "}
+              {activeTheme?.cssVars.dark["border"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--input:{" "}
+              {activeTheme?.cssVars.dark["input"]};
+            </span>
+            <span className="line text-white">
+              &nbsp;&nbsp;&nbsp;&nbsp;--ring:{" "}
+              {activeTheme?.cssVars.dark["ring"]};
+            </span>
+            <span className="line text-white">&nbsp;&nbsp;&#125;</span>
+            <span className="line text-white">&#125;</span>
+          </code>
+        </pre>
+      </div>
+    </ThemeWrapper>
+  )
+}
+
+function getThemeCode(theme: Theme, radius: number) {
+  if (!theme) {
+    return ""
+  }
+
+  return template(BASE_STYLES_WITH_VARIABLES)({
+    colors: theme.cssVars,
+    radius,
+  })
+}
+
+const BASE_STYLES_WITH_VARIABLES = `
+@layer base {
+  :root {
+    --background: <%- colors.light["background"] %>;
+    --foreground: <%- colors.light["foreground"] %>;
+    --card: <%- colors.light["card"] %>;
+    --card-foreground: <%- colors.light["card-foreground"] %>;
+    --popover: <%- colors.light["popover"] %>;
+    --popover-foreground: <%- colors.light["popover-foreground"] %>;
+    --primary: <%- colors.light["primary"] %>;
+    --primary-foreground: <%- colors.light["primary-foreground"] %>;
+    --secondary: <%- colors.light["secondary"] %>;
+    --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+    --muted: <%- colors.light["muted"] %>;
+    --muted-foreground: <%- colors.light["muted-foreground"] %>;
+    --accent: <%- colors.light["accent"] %>;
+    --accent-foreground: <%- colors.light["accent-foreground"] %>;
+    --destructive: <%- colors.light["destructive"] %>;
+    --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+    --border: <%- colors.light["border"] %>;
+    --input: <%- colors.light["input"] %>;
+    --ring: <%- colors.light["ring"] %>;
+    --radius: <%- radius %>rem;
+  }
+ 
+  .dark {
+    --background: <%- colors.dark["background"] %>;
+    --foreground: <%- colors.dark["foreground"] %>;
+    --card: <%- colors.dark["card"] %>;
+    --card-foreground: <%- colors.dark["card-foreground"] %>;
+    --popover: <%- colors.dark["popover"] %>;
+    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+    --primary: <%- colors.dark["primary"] %>;
+    --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+    --secondary: <%- colors.dark["secondary"] %>;
+    --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+    --muted: <%- colors.dark["muted"] %>;
+    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+    --accent: <%- colors.dark["accent"] %>;
+    --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+    --destructive: <%- colors.dark["destructive"] %>;
+    --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+    --border: <%- colors.dark["border"] %>;
+    --input: <%- colors.dark["input"] %>;
+    --ring: <%- colors.dark["ring"] %>;
+  }
+}
+`

apps/www/components/theme-switcher.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { useSelectedLayoutSegment } from "next/navigation"
+
+import { useConfig } from "@/hooks/use-config"
+
+export function ThemeSwitcher() {
+  const [config] = useConfig()
+  const segment = useSelectedLayoutSegment()
+
+  React.useEffect(() => {
+    document.body.classList.forEach((className) => {
+      if (className.match(/^theme.*/)) {
+        document.body.classList.remove(className)
+      }
+    })
+
+    const theme = segment === "themes" ? config.theme : null
+    if (theme) {
+      return document.body.classList.add(`theme-${theme}`)
+    }
+  }, [segment, config])
+
+  return null
+}

apps/www/components/theme-wrapper.tsx

@@ -3,8 +3,31 @@
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
 
-export function ThemeWrapper({ children }: React.ComponentProps<"div">) {
+interface ThemeWrapperProps extends React.ComponentProps<"div"> {
+  defaultTheme?: string
+}
+
+export function ThemeWrapper({
+  defaultTheme,
+  children,
+  className,
+}: ThemeWrapperProps) {
   const [config] = useConfig()
 
-  return <div className={cn(`theme-${config.theme}`, "w-full")}>{children}</div>
+  return (
+    <div
+      className={cn(
+        `theme-${defaultTheme || config.theme}`,
+        "w-full",
+        className
+      )}
+      style={
+        {
+          "--radius": `${defaultTheme ? 0.5 : config.radius}rem`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  )
 }

apps/www/config/docs.ts

@@ -15,6 +15,10 @@ export const docsConfig: DocsConfig = {
       title: "Components",
       href: "/docs/components/accordion",
     },
+    {
+      title: "Themes",
+      href: "/themes",
+    },
     {
       title: "Examples",
       href: "/examples",

apps/www/hooks/use-config.ts

@@ -7,11 +7,13 @@ import { Theme } from "@/registry/themes"
 type Config = {
   style: Style["name"]
   theme: Theme["name"]
+  radius: number
 }
 
 const configAtom = atomWithStorage<Config>("config", {
   style: "default",
   theme: "zinc",
+  radius: 0.5,
 })
 
 export function useConfig() {

apps/www/lib/events.ts

@@ -7,6 +7,7 @@ const eventSchema = z.object({
     "copy_usage_import_code",
     "copy_usage_code",
     "copy_primitive_code",
+    "copy_theme_code",
   ]),
   // declare type AllowedPropertyValues = string | number | boolean | null
   properties: z

apps/www/package.json

@@ -70,6 +70,7 @@
     "recharts": "^2.6.2",
     "sharp": "^0.31.3",
     "tailwind-merge": "^1.12.0",
+    "vaul": "^0.2.0",
     "zod": "^3.21.4"
   },
   "devDependencies": {

apps/www/public/registry/colors/gray.json

@@ -3,90 +3,90 @@
     "light": {
       "background": "white",
       "foreground": "gray-950",
-      "muted": "gray-100",
-      "muted-foreground": "gray-500",
-      "popover": "white",
-      "popover-foreground": "gray-950",
-      "border": "gray-200",
-      "input": "gray-200",
       "card": "white",
       "card-foreground": "gray-950",
+      "popover": "white",
+      "popover-foreground": "gray-950",
       "primary": "gray-900",
       "primary-foreground": "gray-50",
       "secondary": "gray-100",
       "secondary-foreground": "gray-900",
+      "muted": "gray-100",
+      "muted-foreground": "gray-500",
       "accent": "gray-100",
       "accent-foreground": "gray-900",
       "destructive": "red-500",
       "destructive-foreground": "gray-50",
-      "ring": "gray-400"
+      "border": "gray-200",
+      "input": "gray-200",
+      "ring": "gray-950"
     },
     "dark": {
       "background": "gray-950",
       "foreground": "gray-50",
-      "muted": "gray-800",
-      "muted-foreground": "gray-400",
-      "popover": "gray-950",
-      "popover-foreground": "gray-50",
-      "border": "gray-800",
-      "input": "gray-800",
       "card": "gray-950",
       "card-foreground": "gray-50",
+      "popover": "gray-950",
+      "popover-foreground": "gray-50",
       "primary": "gray-50",
       "primary-foreground": "gray-900",
       "secondary": "gray-800",
       "secondary-foreground": "gray-50",
+      "muted": "gray-800",
+      "muted-foreground": "gray-400",
       "accent": "gray-800",
       "accent-foreground": "gray-50",
       "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "gray-800"
+      "destructive-foreground": "gray-50",
+      "border": "gray-800",
+      "input": "gray-800",
+      "ring": "gray-300"
     }
   },
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
       "foreground": "224 71.4% 4.1%",
-      "muted": "220 14.3% 95.9%",
-      "muted-foreground": "220 8.9% 46.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "224 71.4% 4.1%",
-      "border": "220 13% 91%",
-      "input": "220 13% 91%",
       "card": "0 0% 100%",
       "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
       "primary": "220.9 39.3% 11%",
       "primary-foreground": "210 20% 98%",
       "secondary": "220 14.3% 95.9%",
       "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
       "accent": "220 14.3% 95.9%",
       "accent-foreground": "220.9 39.3% 11%",
       "destructive": "0 84.2% 60.2%",
       "destructive-foreground": "210 20% 98%",
-      "ring": "217.9 10.6% 64.9%"
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%"
     },
     "dark": {
       "background": "224 71.4% 4.1%",
       "foreground": "210 20% 98%",
-      "muted": "215 27.9% 16.9%",
-      "muted-foreground": "217.9 10.6% 64.9%",
-      "popover": "224 71.4% 4.1%",
-      "popover-foreground": "210 20% 98%",
-      "border": "215 27.9% 16.9%",
-      "input": "215 27.9% 16.9%",
       "card": "224 71.4% 4.1%",
       "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
       "primary": "210 20% 98%",
       "primary-foreground": "220.9 39.3% 11%",
       "secondary": "215 27.9% 16.9%",
       "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
       "accent": "215 27.9% 16.9%",
       "accent-foreground": "210 20% 98%",
       "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "215 27.9% 16.9%"
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%"
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n \n    --ring: 217.9 10.6% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 215 27.9% 16.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 224 71.4% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 224 71.4% 4.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 224 71.4% 4.1%;\n \n    --primary: 220.9 39.3% 11%;\n    --primary-foreground: 210 20% 98%;\n \n    --secondary: 220 14.3% 95.9%;\n    --secondary-foreground: 220.9 39.3% 11%;\n \n    --muted: 220 14.3% 95.9%;\n    --muted-foreground: 220 8.9% 46.1%;\n \n    --accent: 220 14.3% 95.9%;\n    --accent-foreground: 220.9 39.3% 11%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 20% 98%;\n\n    --border: 220 13% 91%;\n    --input: 220 13% 91%;\n    --ring: 224 71.4% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 224 71.4% 4.1%;\n    --foreground: 210 20% 98%;\n \n    --card: 224 71.4% 4.1%;\n    --card-foreground: 210 20% 98%;\n \n    --popover: 224 71.4% 4.1%;\n    --popover-foreground: 210 20% 98%;\n \n    --primary: 210 20% 98%;\n    --primary-foreground: 220.9 39.3% 11%;\n \n    --secondary: 215 27.9% 16.9%;\n    --secondary-foreground: 210 20% 98%;\n \n    --muted: 215 27.9% 16.9%;\n    --muted-foreground: 217.9 10.6% 64.9%;\n \n    --accent: 215 27.9% 16.9%;\n    --accent-foreground: 210 20% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 20% 98%;\n \n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --ring: 216 12.2% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }

apps/www/public/registry/colors/lime.json

@@ -1,92 +0,0 @@
-{
-  "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "lime-950",
-      "muted": "lime-100",
-      "muted-foreground": "lime-500",
-      "popover": "white",
-      "popover-foreground": "lime-950",
-      "border": "lime-200",
-      "input": "lime-200",
-      "card": "white",
-      "card-foreground": "lime-950",
-      "primary": "lime-900",
-      "primary-foreground": "lime-50",
-      "secondary": "lime-100",
-      "secondary-foreground": "lime-900",
-      "accent": "lime-100",
-      "accent-foreground": "lime-900",
-      "destructive": "red-500",
-      "destructive-foreground": "lime-50",
-      "ring": "lime-400"
-    },
-    "dark": {
-      "background": "lime-950",
-      "foreground": "lime-50",
-      "muted": "lime-800",
-      "muted-foreground": "lime-400",
-      "popover": "lime-950",
-      "popover-foreground": "lime-50",
-      "border": "lime-800",
-      "input": "lime-800",
-      "card": "lime-950",
-      "card-foreground": "lime-50",
-      "primary": "lime-50",
-      "primary-foreground": "lime-900",
-      "secondary": "lime-800",
-      "secondary-foreground": "lime-50",
-      "accent": "lime-800",
-      "accent-foreground": "lime-50",
-      "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "lime-800"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "89.3 80.4% 10%",
-      "muted": "79.6 89.1% 89.2%",
-      "muted-foreground": "83.7 80.5% 44.3%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "89.3 80.4% 10%",
-      "border": "80.9 88.5% 79.6%",
-      "input": "80.9 88.5% 79.6%",
-      "card": "0 0% 100%",
-      "card-foreground": "89.3 80.4% 10%",
-      "primary": "87.6 61.2% 20.2%",
-      "primary-foreground": "78.3 92% 95.1%",
-      "secondary": "79.6 89.1% 89.2%",
-      "secondary-foreground": "87.6 61.2% 20.2%",
-      "accent": "79.6 89.1% 89.2%",
-      "accent-foreground": "87.6 61.2% 20.2%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "78.3 92% 95.1%",
-      "ring": "82.7 78% 55.5%"
-    },
-    "dark": {
-      "background": "89.3 80.4% 10%",
-      "foreground": "78.3 92% 95.1%",
-      "muted": "86.3 69% 22.7%",
-      "muted-foreground": "82.7 78% 55.5%",
-      "popover": "89.3 80.4% 10%",
-      "popover-foreground": "78.3 92% 95.1%",
-      "border": "86.3 69% 22.7%",
-      "input": "86.3 69% 22.7%",
-      "card": "89.3 80.4% 10%",
-      "card-foreground": "78.3 92% 95.1%",
-      "primary": "78.3 92% 95.1%",
-      "primary-foreground": "87.6 61.2% 20.2%",
-      "secondary": "86.3 69% 22.7%",
-      "secondary-foreground": "78.3 92% 95.1%",
-      "accent": "86.3 69% 22.7%",
-      "accent-foreground": "78.3 92% 95.1%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "86.3 69% 22.7%"
-    }
-  },
-  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 89.3 80.4% 10%;\n \n    --muted: 79.6 89.1% 89.2%;\n    --muted-foreground: 83.7 80.5% 44.3%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 89.3 80.4% 10%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 89.3 80.4% 10%;\n \n    --border: 80.9 88.5% 79.6%;\n    --input: 80.9 88.5% 79.6%;\n \n    --primary: 87.6 61.2% 20.2%;\n    --primary-foreground: 78.3 92% 95.1%;\n \n    --secondary: 79.6 89.1% 89.2%;\n    --secondary-foreground: 87.6 61.2% 20.2%;\n \n    --accent: 79.6 89.1% 89.2%;\n    --accent-foreground: 87.6 61.2% 20.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 78.3 92% 95.1%;\n \n    --ring: 82.7 78% 55.5%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 89.3 80.4% 10%;\n    --foreground: 78.3 92% 95.1%;\n \n    --muted: 86.3 69% 22.7%;\n    --muted-foreground: 82.7 78% 55.5%;\n \n    --popover: 89.3 80.4% 10%;\n    --popover-foreground: 78.3 92% 95.1%;\n \n    --card: 89.3 80.4% 10%;\n    --card-foreground: 78.3 92% 95.1%;\n \n    --border: 86.3 69% 22.7%;\n    --input: 86.3 69% 22.7%;\n \n    --primary: 78.3 92% 95.1%;\n    --primary-foreground: 87.6 61.2% 20.2%;\n \n    --secondary: 86.3 69% 22.7%;\n    --secondary-foreground: 78.3 92% 95.1%;\n \n    --accent: 86.3 69% 22.7%;\n    --accent-foreground: 78.3 92% 95.1%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 86.3 69% 22.7%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}

apps/www/public/registry/colors/neutral.json

@@ -3,90 +3,90 @@
     "light": {
       "background": "white",
       "foreground": "neutral-950",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "border": "neutral-200",
-      "input": "neutral-200",
       "card": "white",
       "card-foreground": "neutral-950",
+      "popover": "white",
+      "popover-foreground": "neutral-950",
       "primary": "neutral-900",
       "primary-foreground": "neutral-50",
       "secondary": "neutral-100",
       "secondary-foreground": "neutral-900",
+      "muted": "neutral-100",
+      "muted-foreground": "neutral-500",
       "accent": "neutral-100",
       "accent-foreground": "neutral-900",
       "destructive": "red-500",
       "destructive-foreground": "neutral-50",
-      "ring": "neutral-400"
+      "border": "neutral-200",
+      "input": "neutral-200",
+      "ring": "neutral-950"
     },
     "dark": {
       "background": "neutral-950",
       "foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
       "card": "neutral-950",
       "card-foreground": "neutral-50",
+      "popover": "neutral-950",
+      "popover-foreground": "neutral-50",
       "primary": "neutral-50",
       "primary-foreground": "neutral-900",
       "secondary": "neutral-800",
       "secondary-foreground": "neutral-50",
+      "muted": "neutral-800",
+      "muted-foreground": "neutral-400",
       "accent": "neutral-800",
       "accent-foreground": "neutral-50",
       "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "neutral-800"
+      "destructive-foreground": "neutral-50",
+      "border": "neutral-800",
+      "input": "neutral-800",
+      "ring": "neutral-300"
     }
   },
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
       "foreground": "0 0% 3.9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
       "card": "0 0% 100%",
       "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
       "primary": "0 0% 9%",
       "primary-foreground": "0 0% 98%",
       "secondary": "0 0% 96.1%",
       "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
       "accent": "0 0% 96.1%",
       "accent-foreground": "0 0% 9%",
       "destructive": "0 84.2% 60.2%",
       "destructive-foreground": "0 0% 98%",
-      "ring": "0 0% 63.9%"
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%"
     },
     "dark": {
       "background": "0 0% 3.9%",
       "foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
       "card": "0 0% 3.9%",
       "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
       "primary": "0 0% 98%",
       "primary-foreground": "0 0% 9%",
       "secondary": "0 0% 14.9%",
       "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
       "accent": "0 0% 14.9%",
       "accent-foreground": "0 0% 98%",
       "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "0 0% 14.9%"
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%"
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 0 0% 63.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 0 0% 14.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n \n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n \n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n \n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n \n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n \n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }

apps/www/public/registry/colors/slate.json

@@ -3,90 +3,90 @@
     "light": {
       "background": "white",
       "foreground": "slate-950",
-      "muted": "slate-100",
-      "muted-foreground": "slate-500",
-      "popover": "white",
-      "popover-foreground": "slate-950",
-      "border": "slate-200",
-      "input": "slate-200",
       "card": "white",
       "card-foreground": "slate-950",
+      "popover": "white",
+      "popover-foreground": "slate-950",
       "primary": "slate-900",
       "primary-foreground": "slate-50",
       "secondary": "slate-100",
       "secondary-foreground": "slate-900",
+      "muted": "slate-100",
+      "muted-foreground": "slate-500",
       "accent": "slate-100",
       "accent-foreground": "slate-900",
       "destructive": "red-500",
       "destructive-foreground": "slate-50",
-      "ring": "slate-400"
+      "border": "slate-200",
+      "input": "slate-200",
+      "ring": "slate-950"
     },
     "dark": {
       "background": "slate-950",
       "foreground": "slate-50",
-      "muted": "slate-800",
-      "muted-foreground": "slate-400",
-      "popover": "slate-950",
-      "popover-foreground": "slate-50",
-      "border": "slate-800",
-      "input": "slate-800",
       "card": "slate-950",
       "card-foreground": "slate-50",
+      "popover": "slate-950",
+      "popover-foreground": "slate-50",
       "primary": "slate-50",
       "primary-foreground": "slate-900",
       "secondary": "slate-800",
       "secondary-foreground": "slate-50",
+      "muted": "slate-800",
+      "muted-foreground": "slate-400",
       "accent": "slate-800",
       "accent-foreground": "slate-50",
       "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "slate-800"
+      "destructive-foreground": "slate-50",
+      "border": "slate-800",
+      "input": "slate-800",
+      "ring": "slate-300"
     }
   },
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
       "foreground": "222.2 84% 4.9%",
-      "muted": "210 40% 96.1%",
-      "muted-foreground": "215.4 16.3% 46.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "222.2 84% 4.9%",
-      "border": "214.3 31.8% 91.4%",
-      "input": "214.3 31.8% 91.4%",
       "card": "0 0% 100%",
       "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
       "primary": "222.2 47.4% 11.2%",
       "primary-foreground": "210 40% 98%",
       "secondary": "210 40% 96.1%",
       "secondary-foreground": "222.2 47.4% 11.2%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
       "accent": "210 40% 96.1%",
       "accent-foreground": "222.2 47.4% 11.2%",
       "destructive": "0 84.2% 60.2%",
       "destructive-foreground": "210 40% 98%",
-      "ring": "215 20.2% 65.1%"
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%"
     },
     "dark": {
       "background": "222.2 84% 4.9%",
       "foreground": "210 40% 98%",
-      "muted": "217.2 32.6% 17.5%",
-      "muted-foreground": "215 20.2% 65.1%",
-      "popover": "222.2 84% 4.9%",
-      "popover-foreground": "210 40% 98%",
-      "border": "217.2 32.6% 17.5%",
-      "input": "217.2 32.6% 17.5%",
       "card": "222.2 84% 4.9%",
       "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
       "primary": "210 40% 98%",
       "primary-foreground": "222.2 47.4% 11.2%",
       "secondary": "217.2 32.6% 17.5%",
       "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
       "accent": "217.2 32.6% 17.5%",
       "accent-foreground": "210 40% 98%",
       "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "217.2 32.6% 17.5%"
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "hsl(212.7,26.8%,83.9)"
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n \n    --ring: 215 20.2% 65.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 217.2 32.6% 17.5%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n \n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n \n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n \n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n \n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n \n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n \n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n \n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n \n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n \n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n \n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n \n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: hsl(212.7,26.8%,83.9);\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }

apps/www/public/registry/colors/stone.json

@@ -3,90 +3,90 @@
     "light": {
       "background": "white",
       "foreground": "stone-950",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "border": "stone-200",
-      "input": "stone-200",
       "card": "white",
       "card-foreground": "stone-950",
+      "popover": "white",
+      "popover-foreground": "stone-950",
       "primary": "stone-900",
       "primary-foreground": "stone-50",
       "secondary": "stone-100",
       "secondary-foreground": "stone-900",
+      "muted": "stone-100",
+      "muted-foreground": "stone-500",
       "accent": "stone-100",
       "accent-foreground": "stone-900",
       "destructive": "red-500",
       "destructive-foreground": "stone-50",
-      "ring": "stone-400"
+      "border": "stone-200",
+      "input": "stone-200",
+      "ring": "stone-950"
     },
     "dark": {
       "background": "stone-950",
       "foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
       "card": "stone-950",
       "card-foreground": "stone-50",
+      "popover": "stone-950",
+      "popover-foreground": "stone-50",
       "primary": "stone-50",
       "primary-foreground": "stone-900",
       "secondary": "stone-800",
       "secondary-foreground": "stone-50",
+      "muted": "stone-800",
+      "muted-foreground": "stone-400",
       "accent": "stone-800",
       "accent-foreground": "stone-50",
       "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "stone-800"
+      "destructive-foreground": "stone-50",
+      "border": "stone-800",
+      "input": "stone-800",
+      "ring": "stone-300"
     }
   },
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
       "foreground": "20 14.3% 4.1%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
       "card": "0 0% 100%",
       "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
       "primary": "24 9.8% 10%",
       "primary-foreground": "60 9.1% 97.8%",
       "secondary": "60 4.8% 95.9%",
       "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
       "accent": "60 4.8% 95.9%",
       "accent-foreground": "24 9.8% 10%",
       "destructive": "0 84.2% 60.2%",
       "destructive-foreground": "60 9.1% 97.8%",
-      "ring": "24 5.4% 63.9%"
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%"
     },
     "dark": {
       "background": "20 14.3% 4.1%",
       "foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
       "card": "20 14.3% 4.1%",
       "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
       "primary": "60 9.1% 97.8%",
       "primary-foreground": "24 9.8% 10%",
       "secondary": "12 6.5% 15.1%",
       "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
       "accent": "12 6.5% 15.1%",
       "accent-foreground": "60 9.1% 97.8%",
       "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "12 6.5% 15.1%"
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%"
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --ring: 24 5.4% 63.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 12 6.5% 15.1%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n \n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n \n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n \n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n \n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n \n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n \n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n \n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n \n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n \n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n \n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n \n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }

apps/www/public/registry/colors/zinc.json

@@ -3,90 +3,90 @@
     "light": {
       "background": "white",
       "foreground": "zinc-950",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "border": "zinc-200",
-      "input": "zinc-200",
       "card": "white",
       "card-foreground": "zinc-950",
+      "popover": "white",
+      "popover-foreground": "zinc-950",
       "primary": "zinc-900",
       "primary-foreground": "zinc-50",
       "secondary": "zinc-100",
       "secondary-foreground": "zinc-900",
+      "muted": "zinc-100",
+      "muted-foreground": "zinc-500",
       "accent": "zinc-100",
       "accent-foreground": "zinc-900",
       "destructive": "red-500",
       "destructive-foreground": "zinc-50",
-      "ring": "zinc-400"
+      "border": "zinc-200",
+      "input": "zinc-200",
+      "ring": "zinc-950"
     },
     "dark": {
       "background": "zinc-950",
       "foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
       "card": "zinc-950",
       "card-foreground": "zinc-50",
+      "popover": "zinc-950",
+      "popover-foreground": "zinc-50",
       "primary": "zinc-50",
       "primary-foreground": "zinc-900",
       "secondary": "zinc-800",
       "secondary-foreground": "zinc-50",
+      "muted": "zinc-800",
+      "muted-foreground": "zinc-400",
       "accent": "zinc-800",
       "accent-foreground": "zinc-50",
       "destructive": "red-900",
-      "destructive-foreground": "red-50",
-      "ring": "zinc-800"
+      "destructive-foreground": "zinc-50",
+      "border": "zinc-800",
+      "input": "zinc-800",
+      "ring": "zinc-300"
     }
   },
   "cssVars": {
     "light": {
       "background": "0 0% 100%",
       "foreground": "240 10% 3.9%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
       "card": "0 0% 100%",
       "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
       "primary": "240 5.9% 10%",
       "primary-foreground": "0 0% 98%",
       "secondary": "240 4.8% 95.9%",
       "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
       "accent": "240 4.8% 95.9%",
       "accent-foreground": "240 5.9% 10%",
       "destructive": "0 84.2% 60.2%",
       "destructive-foreground": "0 0% 98%",
-      "ring": "240 5% 64.9%"
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%"
     },
     "dark": {
       "background": "240 10% 3.9%",
       "foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
       "card": "240 10% 3.9%",
       "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
       "primary": "0 0% 98%",
       "primary-foreground": "240 5.9% 10%",
       "secondary": "240 3.7% 15.9%",
       "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
       "accent": "240 3.7% 15.9%",
       "accent-foreground": "0 0% 98%",
       "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 85.7% 97.3%",
-      "ring": "240 3.7% 15.9%"
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%"
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n \n    --ring: 240 5% 64.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 85.7% 97.3%;\n \n    --ring: 240 3.7% 15.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n \n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n \n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n \n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n \n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n \n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n \n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n \n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n \n    --radius: 0.5rem;\n  }\n \n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n \n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n \n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n \n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n \n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n \n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n \n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n \n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n \n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n  }\n}\n \n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
 }

apps/www/public/registry/styles/default/card.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\" flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/default/select.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDown className=\"h-4 w-4 opacity-50\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n        className\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"py-1.5 pl-8 pr-2 text-sm font-semibold\", className)}\n    {...props}\n  />\n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n    {...props}\n  />\n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n  Select,\n  SelectGroup,\n  SelectValue,\n  SelectTrigger,\n  SelectContent,\n  SelectLabel,\n  SelectItem,\n  SelectSeparator,\n}\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/default/textarea.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <textarea\n        className={cn(\n          \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = \"Textarea\"\n\nexport { Textarea }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/new-york/alert.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground\",\n        destructive:\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n))\nAlert.displayName = \"Alert\"\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nAlertTitle.displayName = \"AlertTitle\"\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n))\nAlertDescription.displayName = \"AlertDescription\"\n\nexport { Alert, AlertTitle, AlertDescription }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/new-york/button.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "button.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-8\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/new-york/calendar.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside: \"text-muted-foreground opacity-50\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/new-york/card.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\" flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/styles/new-york/input.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = \"Input\"\n\nexport { Input }\n"
     }
   ],
   "type": "components:ui"

apps/www/public/registry/themes.css

@@ -1,68 +1,4 @@
 
-  .theme-default {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 160 90% 46%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 215 20.2% 65.1%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark .theme-default {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
- 
-    --ring: 217.2 32.6% 17.5%;
-  }
-
   .theme-zinc {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -70,7 +6,7 @@
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
  
-    --popover: 0 0% 100%;
+    --popover: 0 0% 100%;;
     --popover-foreground: 240 10% 3.9%;
  
     --card: 0 0% 100%;
@@ -91,7 +27,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
  
-    --ring: 240 5% 64.9%;
+    --ring: 240 5.9% 10%;
  
     --radius: 0.5rem;
   }
@@ -122,12 +58,332 @@
     --accent-foreground: 0 0% 98%;
  
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
+    --destructive-foreground: 0 0% 98%;
  
-    --ring: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 
-  .theme-lime {
+  .theme-slate {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark .theme-slate {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 212.7 26.8% 83.9;
+  }
+
+  .theme-stone {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+ 
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --ring: 20 14.3% 4.1%;
+ 
+    --radius: 0.95rem;
+  }
+ 
+  .dark .theme-stone {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+ 
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --ring: 24 5.7% 82.9%;
+  }
+
+  .theme-gray {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+ 
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+ 
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+ 
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+ 
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+ 
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+ 
+    --ring: 224 71.4% 4.1%;
+ 
+    --radius: 0.35rem;
+  }
+ 
+  .dark .theme-gray {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+ 
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+ 
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+ 
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+ 
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+ 
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+ 
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+ 
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+ 
+    --ring: 216 12.2% 83.9%;
+  }
+
+  .theme-neutral {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+ 
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+ 
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+ 
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+ 
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 0 0% 3.9%;
+ 
+    --radius: ;
+  }
+ 
+  .dark .theme-neutral {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+ 
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+ 
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 0 0% 83.1%;
+  }
+
+  .theme-red {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+ 
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+ 
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+ 
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+ 
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+ 
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 0 72.2% 50.6%;
+ 
+    --radius: 0.4rem;
+  }
+ 
+  .dark .theme-red {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+ 
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+ 
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
+ 
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 0 72.2% 50.6%;
+  }
+
+  .theme-rose {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
  
@@ -143,8 +399,8 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
  
-    --primary: 87.6 61.2% 20.2%;
-    --primary-foreground: 0 0% 98%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
  
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
@@ -155,38 +411,358 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
  
-    --ring: 240 5% 64.9%;
+    --ring: 346.8 77.2% 49.8%;
  
     --radius: 0.5rem;
   }
  
-  .dark .theme-lime {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+  .dark .theme-rose {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
  
-    --muted: 240 3.7% 15.9%;
+    --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
  
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
  
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
  
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
  
-    --primary: 82 84.5% 67.1%;
-    --primary-foreground: 240 5.9% 10%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
  
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
  
-    --accent: 240 3.7% 15.9%;
+    --accent: 12 6.5% 15.1%;
     --accent-foreground: 0 0% 98%;
  
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
  
-    --ring: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+
+  .theme-orange {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+ 
+    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --ring: 24.6 95% 53.1%;
+ 
+    --radius: 0.95rem;
+  }
+ 
+  .dark .theme-orange {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+ 
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --ring: 20.5 90.2% 48.2%;
+  }
+
+  .theme-green {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+ 
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+ 
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+ 
+    --primary: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;
+ 
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+ 
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --ring: 142.1 76.2% 36.3%;
+ 
+    --radius: ;
+  }
+ 
+  .dark .theme-green {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+ 
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+ 
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+ 
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+ 
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+ 
+    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;
+ 
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+ 
+    --ring: 142.4 71.8% 29.2%;
+  }
+
+  .theme-blue {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 221.2 83.2% 53.3%;
+ 
+    --radius: ;
+  }
+ 
+  .dark .theme-blue {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 224.3 76.3% 48%;
+  }
+
+  .theme-yellow {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+ 
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+ 
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+ 
+    --primary: 47.9 95.8% 53.1%;
+    --primary-foreground: 26 83.3% 14.1%;
+ 
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+ 
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --ring: 20 14.3% 4.1%;
+ 
+    --radius: 0.95rem;
+  }
+ 
+  .dark .theme-yellow {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+ 
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+ 
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+ 
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+ 
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+ 
+    --primary: 47.9 95.8% 53.1%;
+    --primary-foreground: 26 83.3% 14.1%;
+ 
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+ 
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+ 
+    --ring: 35.5 91.7% 32.9%;
+  }
+
+  .theme-violet {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+ 
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+ 
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+ 
+    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;
+ 
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+ 
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+ 
+    --ring: 262.1 83.3% 57.8%;
+ 
+    --radius: ;
+  }
+ 
+  .dark .theme-violet {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+ 
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+ 
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+ 
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+ 
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+ 
+    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;
+ 
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+ 
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+ 
+    --ring: 263.4 70% 50.4%;
   }

apps/www/public/registry/themes/gray.json

@@ -0,0 +1,48 @@
+{
+  "name": "gray",
+  "label": "Gray",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "224 71.4% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "224 71.4% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "224 71.4% 4.1%",
+      "primary": "220.9 39.3% 11%",
+      "primary-foreground": "210 20% 98%",
+      "secondary": "220 14.3% 95.9%",
+      "secondary-foreground": "220.9 39.3% 11%",
+      "muted": "220 14.3% 95.9%",
+      "muted-foreground": "220 8.9% 46.1%",
+      "accent": "220 14.3% 95.9%",
+      "accent-foreground": "220.9 39.3% 11%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "220 13% 91%",
+      "input": "220 13% 91%",
+      "ring": "224 71.4% 4.1%"
+    },
+    "dark": {
+      "background": "224 71.4% 4.1%",
+      "foreground": "210 20% 98%",
+      "card": "224 71.4% 4.1%",
+      "card-foreground": "210 20% 98%",
+      "popover": "224 71.4% 4.1%",
+      "popover-foreground": "210 20% 98%",
+      "primary": "210 20% 98%",
+      "primary-foreground": "220.9 39.3% 11%",
+      "secondary": "215 27.9% 16.9%",
+      "secondary-foreground": "210 20% 98%",
+      "muted": "215 27.9% 16.9%",
+      "muted-foreground": "217.9 10.6% 64.9%",
+      "accent": "215 27.9% 16.9%",
+      "accent-foreground": "210 20% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 20% 98%",
+      "border": "215 27.9% 16.9%",
+      "input": "215 27.9% 16.9%",
+      "ring": "216 12.2% 83.9%"
+    }
+  }
+}

apps/www/public/registry/themes/neutral.json

@@ -0,0 +1,48 @@
+{
+  "name": "neutral",
+  "label": "Neutral",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "0 0% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "0 0% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "0 0% 3.9%",
+      "primary": "0 0% 9%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "0 0% 96.1%",
+      "secondary-foreground": "0 0% 9%",
+      "muted": "0 0% 96.1%",
+      "muted-foreground": "0 0% 45.1%",
+      "accent": "0 0% 96.1%",
+      "accent-foreground": "0 0% 9%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 89.8%",
+      "input": "0 0% 89.8%",
+      "ring": "0 0% 3.9%"
+    },
+    "dark": {
+      "background": "0 0% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "0 0% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "0 0% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "0 0% 9%",
+      "secondary": "0 0% 14.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "0 0% 14.9%",
+      "muted-foreground": "0 0% 63.9%",
+      "accent": "0 0% 14.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "0 0% 14.9%",
+      "input": "0 0% 14.9%",
+      "ring": "0 0% 83.1%"
+    }
+  }
+}

apps/www/public/registry/themes/slate.json

@@ -0,0 +1,48 @@
+{
+  "name": "slate",
+  "label": "Slate",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "222.2 84% 4.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "222.2 84% 4.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "222.2 84% 4.9%",
+      "primary": "222.2 47.4% 11.2%",
+      "primary-foreground": "210 40% 98%",
+      "secondary": "210 40% 96.1%",
+      "secondary-foreground": "222.2 47.4% 11.2%",
+      "muted": "210 40% 96.1%",
+      "muted-foreground": "215.4 16.3% 46.9%",
+      "accent": "210 40% 96.1%",
+      "accent-foreground": "222.2 47.4% 11.2%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "214.3 31.8% 91.4%",
+      "input": "214.3 31.8% 91.4%",
+      "ring": "222.2 84% 4.9%"
+    },
+    "dark": {
+      "background": "222.2 84% 4.9%",
+      "foreground": "210 40% 98%",
+      "card": "222.2 84% 4.9%",
+      "card-foreground": "210 40% 98%",
+      "popover": "222.2 84% 4.9%",
+      "popover-foreground": "210 40% 98%",
+      "primary": "210 40% 98%",
+      "primary-foreground": "222.2 47.4% 11.2%",
+      "secondary": "217.2 32.6% 17.5%",
+      "secondary-foreground": "210 40% 98%",
+      "muted": "217.2 32.6% 17.5%",
+      "muted-foreground": "215 20.2% 65.1%",
+      "accent": "217.2 32.6% 17.5%",
+      "accent-foreground": "210 40% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "210 40% 98%",
+      "border": "217.2 32.6% 17.5%",
+      "input": "217.2 32.6% 17.5%",
+      "ring": "hsl(212.7,26.8%,83.9)"
+    }
+  }
+}

apps/www/public/registry/themes/stone.json

@@ -0,0 +1,48 @@
+{
+  "name": "stone",
+  "label": "Stone",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "20 14.3% 4.1%",
+      "card": "0 0% 100%",
+      "card-foreground": "20 14.3% 4.1%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "20 14.3% 4.1%",
+      "primary": "24 9.8% 10%",
+      "primary-foreground": "60 9.1% 97.8%",
+      "secondary": "60 4.8% 95.9%",
+      "secondary-foreground": "24 9.8% 10%",
+      "muted": "60 4.8% 95.9%",
+      "muted-foreground": "25 5.3% 44.7%",
+      "accent": "60 4.8% 95.9%",
+      "accent-foreground": "24 9.8% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "20 5.9% 90%",
+      "input": "20 5.9% 90%",
+      "ring": "20 14.3% 4.1%"
+    },
+    "dark": {
+      "background": "20 14.3% 4.1%",
+      "foreground": "60 9.1% 97.8%",
+      "card": "20 14.3% 4.1%",
+      "card-foreground": "60 9.1% 97.8%",
+      "popover": "20 14.3% 4.1%",
+      "popover-foreground": "60 9.1% 97.8%",
+      "primary": "60 9.1% 97.8%",
+      "primary-foreground": "24 9.8% 10%",
+      "secondary": "12 6.5% 15.1%",
+      "secondary-foreground": "60 9.1% 97.8%",
+      "muted": "12 6.5% 15.1%",
+      "muted-foreground": "24 5.4% 63.9%",
+      "accent": "12 6.5% 15.1%",
+      "accent-foreground": "60 9.1% 97.8%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "60 9.1% 97.8%",
+      "border": "12 6.5% 15.1%",
+      "input": "12 6.5% 15.1%",
+      "ring": "24 5.7% 82.9%"
+    }
+  }
+}

apps/www/public/registry/themes/zinc.json

@@ -0,0 +1,48 @@
+{
+  "name": "zinc",
+  "label": "Zinc",
+  "cssVars": {
+    "light": {
+      "background": "0 0% 100%",
+      "foreground": "240 10% 3.9%",
+      "card": "0 0% 100%",
+      "card-foreground": "240 10% 3.9%",
+      "popover": "0 0% 100%",
+      "popover-foreground": "240 10% 3.9%",
+      "primary": "240 5.9% 10%",
+      "primary-foreground": "0 0% 98%",
+      "secondary": "240 4.8% 95.9%",
+      "secondary-foreground": "240 5.9% 10%",
+      "muted": "240 4.8% 95.9%",
+      "muted-foreground": "240 3.8% 46.1%",
+      "accent": "240 4.8% 95.9%",
+      "accent-foreground": "240 5.9% 10%",
+      "destructive": "0 84.2% 60.2%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 5.9% 90%",
+      "input": "240 5.9% 90%",
+      "ring": "240 10% 3.9%"
+    },
+    "dark": {
+      "background": "240 10% 3.9%",
+      "foreground": "0 0% 98%",
+      "card": "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      "popover": "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      "primary": "0 0% 98%",
+      "primary-foreground": "240 5.9% 10%",
+      "secondary": "240 3.7% 15.9%",
+      "secondary-foreground": "0 0% 98%",
+      "muted": "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      "accent": "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      "destructive": "0 62.8% 30.6%",
+      "destructive-foreground": "0 0% 98%",
+      "border": "240 3.7% 15.9%",
+      "input": "240 3.7% 15.9%",
+      "ring": "240 4.9% 83.9%"
+    }
+  }
+}

apps/www/registry/colors.ts

@@ -1514,43 +1514,43 @@ export const colorMapping = {
   light: {
     background: "white",
     foreground: "{{base}}-950",
-    muted: "{{base}}-100",
-    "muted-foreground": "{{base}}-500",
-    popover: "white",
-    "popover-foreground": "{{base}}-950",
-    border: "{{base}}-200",
-    input: "{{base}}-200",
     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",
-    ring: "{{base}}-400",
+    border: "{{base}}-200",
+    input: "{{base}}-200",
+    ring: "{{base}}-950",
   },
   dark: {
     background: "{{base}}-950",
     foreground: "{{base}}-50",
-    muted: "{{base}}-800",
-    "muted-foreground": "{{base}}-400",
-    popover: "{{base}}-950",
-    "popover-foreground": "{{base}}-50",
-    border: "{{base}}-800",
-    input: "{{base}}-800",
     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": "red-50",
-    ring: "{{base}}-800",
+    "destructive-foreground": "{{base}}-50",
+    border: "{{base}}-800",
+    input: "{{base}}-800",
+    ring: "{{base}}-300",
   },
 } as const

apps/www/registry/default/example/cards/activity-goal.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "@/hooks/use-config"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { themes } from "@/registry/themes"
+
+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 function CardsActivityGoal() {
+  const { theme: mode } = useTheme()
+  const [config] = useConfig()
+
+  const theme = themes.find((theme) => theme.name === config.theme)
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle className="text-base">Move Goal</CardTitle>
+        <CardDescription>Set your daily activity goal.</CardDescription>
+      </CardHeader>
+      <CardContent className="pb-2">
+        <div className="flex items-center justify-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(-10)}
+            disabled={goal <= 200}
+          >
+            <Minus className="h-4 w-4" />
+            <span className="sr-only">Decrease</span>
+          </Button>
+          <div className="flex-1 text-center">
+            <div className="text-5xl font-bold tracking-tighter">{goal}</div>
+            <div className="text-[0.70rem] uppercase text-muted-foreground">
+              Calories/day
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(10)}
+            disabled={goal >= 400}
+          >
+            <Plus className="h-4 w-4" />
+            <span className="sr-only">Increase</span>
+          </Button>
+        </div>
+        <div className="my-3 h-[60px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <Bar
+                dataKey="goal"
+                style={
+                  {
+                    fill: "var(--theme-primary)",
+                    opacity: 0.2,
+                    "--theme-primary": `hsl(${
+                      theme?.cssVars[mode === "dark" ? "dark" : "light"].primary
+                    })`,
+                  } as React.CSSProperties
+                }
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Set Goal</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/calendar.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { addDays } from "date-fns"
+
+import { Calendar } from "@/registry/default/ui/calendar"
+import { Card, CardContent } from "@/registry/default/ui/card"
+
+const start = new Date(2023, 5, 5)
+
+export function CardsCalendar() {
+  return (
+    <Card className="max-w-[280px]">
+      <CardContent className="p-0">
+        <Calendar
+          numberOfMonths={1}
+          mode="range"
+          defaultMonth={start}
+          selected={{
+            from: start,
+            to: addDays(start, 8),
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/chat.tsx

@@ -0,0 +1,254 @@
+import * as React from "react"
+import { Check, Plus, Send } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/default/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/default/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/default/ui/dialog"
+import { Input } from "@/registry/default/ui/input"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip"
+
+const users = [
+  {
+    name: "Olivia Martin",
+    email: "m@example.com",
+    avatar: "/avatars/01.png",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "isabella.nguyen@email.com",
+    avatar: "/avatars/03.png",
+  },
+  {
+    name: "Emma Wilson",
+    email: "emma@example.com",
+    avatar: "/avatars/05.png",
+  },
+  {
+    name: "Jackson Lee",
+    email: "lee@example.com",
+    avatar: "/avatars/02.png",
+  },
+  {
+    name: "William Kim",
+    email: "will@email.com",
+    avatar: "/avatars/04.png",
+  },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+  const [messages, setMessages] = React.useState([
+    {
+      role: "agent",
+      content: "Hi, how can I help you today?",
+    },
+    {
+      role: "user",
+      content: "Hey, I'm having trouble with my account.",
+    },
+    {
+      role: "agent",
+      content: "What seems to be the problem?",
+    },
+    {
+      role: "user",
+      content: "I can't log in.",
+    },
+  ])
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center">
+          <div className="flex items-center space-x-4">
+            <Avatar>
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Sofia Davis</p>
+              <p className="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="ml-auto rounded-full"
+                  onClick={() => setOpen(true)}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={10}>New message</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                  message.role === "user"
+                    ? "ml-auto bg-primary text-primary-foreground"
+                    : "bg-muted"
+                )}
+              >
+                {message.content}
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              setMessages([
+                ...messages,
+                {
+                  role: "user",
+                  content: event.currentTarget.message.value,
+                },
+              ])
+
+              event.currentTarget.message.value = ""
+            }}
+            className="flex w-full items-center space-x-2"
+          >
+            <Input
+              id="message"
+              placeholder="Type your message..."
+              className="flex-1"
+            />
+            <Button type="submit" size="icon">
+              <Send className="h-4 w-4" />
+              <span className="sr-only">Send</span>
+            </Button>
+          </form>
+        </CardFooter>
+      </Card>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="gap-0 p-0 outline-none">
+          <DialogHeader className="px-4 pb-4 pt-5">
+            <DialogTitle>New message</DialogTitle>
+            <DialogDescription>
+              Invite a user to this thread. This will create a new group
+              message.
+            </DialogDescription>
+          </DialogHeader>
+          <Command className="overflow-hidden rounded-t-none border-t">
+            <CommandInput placeholder="Search user..." />
+            <CommandList>
+              <CommandEmpty>No users found.</CommandEmpty>
+              <CommandGroup className="p-2">
+                {users.map((user) => (
+                  <CommandItem
+                    key={user.email}
+                    className="flex items-center px-2"
+                    onSelect={() => {
+                      if (selectedUsers.includes(user)) {
+                        return setSelectedUsers(
+                          selectedUsers.filter(
+                            (selectedUser) => selectedUser !== user
+                          )
+                        )
+                      }
+
+                      return setSelectedUsers(
+                        [...users].filter((u) =>
+                          [...selectedUsers, user].includes(u)
+                        )
+                      )
+                    }}
+                  >
+                    <Avatar>
+                      <AvatarImage src={user.avatar} alt="Image" />
+                      <AvatarFallback>{user.name[0]}</AvatarFallback>
+                    </Avatar>
+                    <div className="ml-2">
+                      <p className="text-sm font-medium leading-none">
+                        {user.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {user.email}
+                      </p>
+                    </div>
+                    {selectedUsers.includes(user) ? (
+                      <Check className="ml-auto flex h-5 w-5 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+            {selectedUsers.length > 0 ? (
+              <div className="flex -space-x-2 overflow-hidden">
+                {selectedUsers.map((user) => (
+                  <Avatar
+                    key={user.email}
+                    className="inline-block border-2 border-background"
+                  >
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback>{user.name[0]}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Select users to add to this thread.
+              </p>
+            )}
+            <Button
+              disabled={selectedUsers.length < 2}
+              onClick={() => {
+                setOpen(false)
+              }}
+            >
+              Continue
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

apps/www/registry/default/example/cards/cookie-settings.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Label } from "@/registry/default/ui/label"
+import { Switch } from "@/registry/default/ui/switch"
+
+export function CardsCookieSettings() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cookie Settings</CardTitle>
+        <CardDescription>Manage your cookie settings here.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between space-x-4">
+          <Label htmlFor="necessary" className="flex flex-col space-y-1">
+            <span>Strictly Necessary</span>
+            <span className="text-xs font-normal leading-snug text-muted-foreground">
+              These cookies are essential in order to use the website and use
+              its features.
+            </span>
+          </Label>
+          <Switch id="necessary" defaultChecked aria-label="Necessary" />
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <Label htmlFor="functional" className="flex flex-col space-y-1">
+            <span>Functional Cookies</span>
+            <span className="text-xs font-normal leading-snug text-muted-foreground">
+              These cookies allow the website to provide personalized
+              functionality.
+            </span>
+          </Label>
+          <Switch id="functional" aria-label="Functional" />
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <Label htmlFor="performance" className="flex flex-col space-y-1">
+            <span>Performance Cookies</span>
+            <span className="text-xs font-normal leading-snug text-muted-foreground">
+              These cookies help to improve the performance of the website.
+            </span>
+          </Label>
+          <Switch id="performance" aria-label="Performance" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Save preferences
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/create-account.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+
+export function CardsCreateAccount() {
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <Icons.gitHub className="mr-2 h-4 w-4" />
+            Github
+          </Button>
+          <Button variant="outline">
+            <Icons.google className="mr-2 h-4 w-4" />
+            Google
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/data-table.tsx

@@ -0,0 +1,332 @@
+"use client"
+
+import * as React from "react"
+import {
+  CaretSortIcon,
+  ChevronDownIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Checkbox } from "@/registry/default/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/default/ui/dropdown-menu"
+import { Input } from "@/registry/default/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/default/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@yahoo.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@gmail.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@gmail.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@gmail.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@hotmail.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <CaretSortIcon className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <DotsHorizontalIcon className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export function CardsDataTable() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payments</CardTitle>
+        <CardDescription>Manage your payments.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-4 flex items-center gap-4">
+          <Input
+            placeholder="Filter emails..."
+            value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+            onChange={(event) =>
+              table.getColumn("email")?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className="[&:has([role=checkbox])]:pl-3"
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </TableHead>
+                    )
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className="[&:has([role=checkbox])]:pl-3"
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <div className="flex items-center justify-end space-x-2 pt-4">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/index.tsx

@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "@/registry/default/example/cards/activity-goal"
+import { CardsCalendar } from "@/registry/default/example/cards/calendar"
+import { CardsChat } from "@/registry/default/example/cards/chat"
+import { CardsCookieSettings } from "@/registry/default/example/cards/cookie-settings"
+import { CardsCreateAccount } from "@/registry/default/example/cards/create-account"
+import { CardsDataTable } from "@/registry/default/example/cards/data-table"
+import { CardsMetric } from "@/registry/default/example/cards/metric"
+import { CardsPaymentMethod } from "@/registry/default/example/cards/payment-method"
+import { CardsReportIssue } from "@/registry/default/example/cards/report-issue"
+import { CardsShare } from "@/registry/default/example/cards/share"
+import { CardsStats } from "@/registry/default/example/cards/stats"
+import { CardsTeamMembers } from "@/registry/default/example/cards/team-members"
+
+export default function CardsDemo() {
+  return (
+    <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+      <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+        <CardsStats />
+        <div className="grid gap-1 sm:grid-cols-[280px_1fr] md:hidden">
+          <CardsCalendar />
+          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-4">
+            <CardsMetric />
+          </div>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+          <div className="space-y-4 xl:space-y-4">
+            <CardsTeamMembers />
+            <CardsCookieSettings />
+            <CardsPaymentMethod />
+          </div>
+          <div className="space-y-4 xl:space-y-4">
+            <CardsChat />
+            <CardsCreateAccount />
+            <div className="hidden xl:block">
+              <CardsReportIssue />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+        <div className="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
+          <CardsCalendar />
+          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-3">
+            <CardsMetric />
+          </div>
+        </div>
+        <div className="hidden md:block">
+          <CardsDataTable />
+        </div>
+        <CardsShare />
+        <div className="xl:hidden">
+          <CardsReportIssue />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/www/registry/default/example/cards/metric.tsx

@@ -0,0 +1,142 @@
+import { useTheme } from "next-themes"
+import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
+
+import { useConfig } from "@/hooks/use-config"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { themes } from "@/registry/themes"
+
+const data = [
+  {
+    average: 400,
+    today: 240,
+  },
+  {
+    average: 300,
+    today: 139,
+  },
+  {
+    average: 200,
+    today: 980,
+  },
+  {
+    average: 278,
+    today: 390,
+  },
+  {
+    average: 189,
+    today: 480,
+  },
+  {
+    average: 239,
+    today: 380,
+  },
+  {
+    average: 349,
+    today: 430,
+  },
+]
+
+export function CardsMetric() {
+  const { theme: mode } = useTheme()
+  const [config] = useConfig()
+
+  const theme = themes.find((theme) => theme.name === config.theme)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Exercise Minutes</CardTitle>
+        <CardDescription>
+          Your excercise minutes are ahead of where you normally are.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-4">
+        <div className="h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    return (
+                      <div className="rounded-lg border bg-background p-2 shadow-sm">
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Average
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {payload[0].value}
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Today
+                            </span>
+                            <span className="font-bold">
+                              {payload[1].value}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  }
+
+                  return null
+                }}
+              />
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="average"
+                activeDot={{
+                  r: 6,
+                  style: { fill: "var(--theme-primary)", opacity: 0.25 },
+                }}
+                style={
+                  {
+                    stroke: "var(--theme-primary)",
+                    opacity: 0.25,
+                    "--theme-primary": `hsl(${
+                      theme?.cssVars[mode === "dark" ? "dark" : "light"].primary
+                    })`,
+                  } as React.CSSProperties
+                }
+              />
+              <Line
+                type="monotone"
+                dataKey="today"
+                strokeWidth={2}
+                activeDot={{
+                  r: 8,
+                  style: { fill: "var(--theme-primary)" },
+                }}
+                style={
+                  {
+                    stroke: "var(--theme-primary)",
+                    "--theme-primary": `hsl(${
+                      theme?.cssVars[mode === "dark" ? "dark" : "light"].primary
+                    })`,
+                  } as React.CSSProperties
+                }
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/payment-method.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/default/ui/radio-group"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+
+export function CardsPaymentMethod() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>
+          Add a new payment method to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+          <Label
+            htmlFor="card"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+          >
+            <RadioGroupItem
+              value="card"
+              id="card"
+              className="sr-only"
+              aria-label="Card"
+            />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="mb-3 h-6 w-6"
+            >
+              <rect width="20" height="14" x="2" y="5" rx="2" />
+              <path d="M2 10h20" />
+            </svg>
+            Card
+          </Label>
+          <Label
+            htmlFor="paypal"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+          >
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="sr-only"
+              aria-label="Paypal"
+            />
+            <Icons.paypal className="mb-3 h-6 w-6" />
+            Paypal
+          </Label>
+          <Label
+            htmlFor="apple"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+          >
+            <RadioGroupItem
+              value="apple"
+              id="apple"
+              className="sr-only"
+              aria-label="Apple"
+            />
+            <Icons.apple className="mb-3 h-6 w-6" />
+            Apple
+          </Label>
+        </RadioGroup>
+        <div className="grid gap-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="First Last" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="city">City</Label>
+          <Input id="city" placeholder="" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="number">Card number</Label>
+          <Input id="number" placeholder="" />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="month">Expires</Label>
+            <Select>
+              <SelectTrigger id="month" aria-label="Month">
+                <SelectValue placeholder="Month" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">January</SelectItem>
+                <SelectItem value="2">February</SelectItem>
+                <SelectItem value="3">March</SelectItem>
+                <SelectItem value="4">April</SelectItem>
+                <SelectItem value="5">May</SelectItem>
+                <SelectItem value="6">June</SelectItem>
+                <SelectItem value="7">July</SelectItem>
+                <SelectItem value="8">August</SelectItem>
+                <SelectItem value="9">September</SelectItem>
+                <SelectItem value="10">October</SelectItem>
+                <SelectItem value="11">November</SelectItem>
+                <SelectItem value="12">December</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="year">Year</Label>
+            <Select>
+              <SelectTrigger id="year" aria-label="Year">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from({ length: 10 }, (_, i) => (
+                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
+                    {new Date().getFullYear() + i}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cvc">CVC</Label>
+            <Input id="cvc" placeholder="CVC" />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Continue</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/report-issue.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+import { Textarea } from "@/registry/default/ui/textarea"
+
+export function CardsReportIssue() {
+  const id = React.useId()
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report an issue</CardTitle>
+        <CardDescription>
+          What area are you having problems with?
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="grid gap-2">
+            <Label htmlFor={`area-${id}`}>Area</Label>
+            <Select defaultValue="billing">
+              <SelectTrigger id={`area-${id}`} aria-label="Area">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="team">Team</SelectItem>
+                <SelectItem value="billing">Billing</SelectItem>
+                <SelectItem value="account">Account</SelectItem>
+                <SelectItem value="deployments">Deployments</SelectItem>
+                <SelectItem value="support">Support</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+            <Select defaultValue="2">
+              <SelectTrigger
+                id={`security-level-${id}`}
+                className="line-clamp-1 w-full truncate"
+                aria-label="Security Level"
+              >
+                <SelectValue placeholder="Select level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                <SelectItem value="2">Severity 2</SelectItem>
+                <SelectItem value="3">Severity 3</SelectItem>
+                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor={`subject-${id}`}>Subject</Label>
+          <Input id={`subject-${id}`} placeholder="I need help with..." />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor={`description-${id}`}>Description</Label>
+          <Textarea
+            id={`description-${id}`}
+            placeholder="Please include all information relevant to your issue."
+          />
+        </div>
+      </CardContent>
+      <CardFooter className="justify-between space-x-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/share.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { Input } from "@/registry/default/ui/input"
+import { Label } from "@/registry/default/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/default/ui/select"
+import { Separator } from "@/registry/default/ui/separator"
+
+export function CardsShare() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle>Share this document</CardTitle>
+        <CardDescription>
+          Anyone with the link can view this document.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex space-x-2">
+          <Label htmlFor="link" className="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            value="http://example.com/link/to/document"
+            readOnly
+          />
+          <Button variant="secondary" className="shrink-0">
+            Copy Link
+          </Button>
+        </div>
+        <Separator className="my-4" />
+        <div className="space-y-4">
+          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/03.png" alt="Image" />
+                  <AvatarFallback>OM</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Olivia Martin
+                  </p>
+                  <p className="text-sm text-muted-foreground">m@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="edit">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/05.png" alt="Image" />
+                  <AvatarFallback>IN</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Isabella Nguyen
+                  </p>
+                  <p className="text-sm text-muted-foreground">b@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="view">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/01.png" alt="Image" />
+                  <AvatarFallback>SD</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Sofia Davis
+                  </p>
+                  <p className="text-sm text-muted-foreground">p@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="view">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/default/example/cards/stats.tsx

@@ -0,0 +1,131 @@
+import { useTheme } from "next-themes"
+import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "@/hooks/use-config"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import { themes } from "@/registry/themes"
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 240,
+  },
+  {
+    revenue: 14405,
+    subscription: 300,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 189,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 278,
+  },
+  {
+    revenue: 26475,
+    subscription: 189,
+  },
+]
+
+export function CardsStats() {
+  const { theme: mode } = useTheme()
+  const [config] = useConfig()
+
+  const theme = themes.find((theme) => theme.name === config.theme)
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-base font-normal">Total Revenue</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">$15,231.89</div>
+          <p className="text-xs text-muted-foreground">
+            +20.1% from last month
+          </p>
+          <div className="h-[80px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart
+                data={data}
+                margin={{
+                  top: 5,
+                  right: 10,
+                  left: 10,
+                  bottom: 0,
+                }}
+              >
+                <Line
+                  type="monotone"
+                  strokeWidth={2}
+                  dataKey="revenue"
+                  activeDot={{
+                    r: 6,
+                    style: { fill: "var(--theme-primary)", opacity: 0.25 },
+                  }}
+                  style={
+                    {
+                      stroke: "var(--theme-primary)",
+                      "--theme-primary": `hsl(${
+                        theme?.cssVars[mode === "dark" ? "dark" : "light"]
+                          .primary
+                      })`,
+                    } as React.CSSProperties
+                  }
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-base font-normal">Subscriptions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+2350</div>
+          <p className="text-xs text-muted-foreground">
+            +180.1% from last month
+          </p>
+          <div className="mt-4 h-[80px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={data}>
+                <Bar
+                  dataKey="subscription"
+                  style={
+                    {
+                      fill: "var(--theme-primary)",
+                      opacity: 1,
+                      "--theme-primary": `hsl(${
+                        theme?.cssVars[mode === "dark" ? "dark" : "light"]
+                          .primary
+                      })`,
+                    } as React.CSSProperties
+                  }
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

apps/www/registry/default/example/cards/team-members.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/default/ui/avatar"
+import { Button } from "@/registry/default/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/default/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/default/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/default/ui/popover"
+
+export function CardsTeamMembers() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Team Members</CardTitle>
+        <CardDescription>
+          Invite your team members to collaborate.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Sofia Davis</p>
+              <p className="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Owner{" "}
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/02.png" alt="Image" />
+              <AvatarFallback>JL</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Jackson Lee</p>
+              <p className="text-sm text-muted-foreground">p@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Member{" "}
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup className="p-1.5">
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/03.png" alt="Image" />
+              <AvatarFallback>IN</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">
+                Isabella Nguyen
+              </p>
+              <p className="text-sm text-muted-foreground">i@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Member{" "}
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup className="p-1.5">
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/default/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}

apps/www/registry/default/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

apps/www/registry/new-york/example/cards/activity-goal.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { MinusIcon, PlusIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+import { Bar, BarChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "@/hooks/use-config"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { themes } from "@/registry/themes"
+
+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 function CardsActivityGoal() {
+  const { theme: mode } = useTheme()
+  const [config] = useConfig()
+
+  const theme = themes.find((theme) => theme.name === config.theme)
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-4">
+        <CardTitle>Move Goal</CardTitle>
+        <CardDescription>Set your daily activity goal.</CardDescription>
+      </CardHeader>
+      <CardContent className="pb-2">
+        <div className="flex items-center justify-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(-10)}
+            disabled={goal <= 200}
+          >
+            <MinusIcon className="h-4 w-4" />
+            <span className="sr-only">Decrease</span>
+          </Button>
+          <div className="flex-1 text-center">
+            <div className="text-5xl font-bold tracking-tighter">{goal}</div>
+            <div className="text-[0.70rem] uppercase text-muted-foreground">
+              Calories/day
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 shrink-0 rounded-full"
+            onClick={() => onClick(10)}
+            disabled={goal >= 400}
+          >
+            <PlusIcon className="h-4 w-4" />
+            <span className="sr-only">Increase</span>
+          </Button>
+        </div>
+        <div className="my-3 h-[60px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <Bar
+                dataKey="goal"
+                style={
+                  {
+                    fill: "var(--theme-primary)",
+                    opacity: 0.2,
+                    "--theme-primary": `hsl(${
+                      theme?.cssVars[mode === "dark" ? "dark" : "light"].primary
+                    })`,
+                  } as React.CSSProperties
+                }
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Set Goal</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/calendar.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { addDays } from "date-fns"
+
+import { Calendar } from "@/registry/new-york/ui/calendar"
+import { Card, CardContent } from "@/registry/new-york/ui/card"
+
+const start = new Date(2023, 5, 5)
+
+export function CardsCalendar() {
+  return (
+    <Card className="max-w-[260px]">
+      <CardContent className="p-1">
+        <Calendar
+          numberOfMonths={1}
+          mode="range"
+          defaultMonth={start}
+          selected={{
+            from: start,
+            to: addDays(start, 8),
+          }}
+        />
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/chat.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/registry/new-york/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/registry/new-york/ui/dialog"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+const users = [
+  {
+    name: "Olivia Martin",
+    email: "m@example.com",
+    avatar: "/avatars/01.png",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "isabella.nguyen@email.com",
+    avatar: "/avatars/03.png",
+  },
+  {
+    name: "Emma Wilson",
+    email: "emma@example.com",
+    avatar: "/avatars/05.png",
+  },
+  {
+    name: "Jackson Lee",
+    email: "lee@example.com",
+    avatar: "/avatars/02.png",
+  },
+  {
+    name: "William Kim",
+    email: "will@email.com",
+    avatar: "/avatars/04.png",
+  },
+] as const
+
+type User = (typeof users)[number]
+
+export function CardsChat() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
+
+  const [messages, setMessages] = React.useState([
+    {
+      role: "agent",
+      content: "Hi, how can I help you today?",
+    },
+    {
+      role: "user",
+      content: "Hey, I'm having trouble with my account.",
+    },
+    {
+      role: "agent",
+      content: "What seems to be the problem?",
+    },
+    {
+      role: "user",
+      content: "I can't log in.",
+    },
+  ])
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center">
+          <div className="flex items-center space-x-4">
+            <Avatar>
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Sofia Davis</p>
+              <p className="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  variant="outline"
+                  className="ml-auto rounded-full"
+                  onClick={() => setOpen(true)}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  <span className="sr-only">New message</span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent sideOffset={10}>New message</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                  message.role === "user"
+                    ? "ml-auto bg-primary text-primary-foreground"
+                    : "bg-muted"
+                )}
+              >
+                {message.content}
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              setMessages([
+                ...messages,
+                {
+                  role: "user",
+                  content: event.currentTarget.message.value,
+                },
+              ])
+
+              event.currentTarget.message.value = ""
+            }}
+            className="flex w-full items-center space-x-2"
+          >
+            <Input
+              id="message"
+              placeholder="Type your message..."
+              className="flex-1"
+            />
+            <Button type="submit" size="icon">
+              <PaperPlaneIcon className="h-4 w-4" />
+              <span className="sr-only">Send</span>
+            </Button>
+          </form>
+        </CardFooter>
+      </Card>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="gap-0 p-0 outline-none">
+          <DialogHeader className="px-4 pb-4 pt-5">
+            <DialogTitle>New message</DialogTitle>
+            <DialogDescription>
+              Invite a user to this thread. This will create a new group
+              message.
+            </DialogDescription>
+          </DialogHeader>
+          <Command className="overflow-hidden rounded-t-none border-t bg-transparent">
+            <CommandInput placeholder="Search user..." />
+            <CommandList>
+              <CommandEmpty>No users found.</CommandEmpty>
+              <CommandGroup className="p-2">
+                {users.map((user) => (
+                  <CommandItem
+                    key={user.email}
+                    className="flex items-center px-2"
+                    onSelect={() => {
+                      if (selectedUsers.includes(user)) {
+                        return setSelectedUsers(
+                          selectedUsers.filter(
+                            (selectedUser) => selectedUser !== user
+                          )
+                        )
+                      }
+
+                      return setSelectedUsers(
+                        [...users].filter((u) =>
+                          [...selectedUsers, user].includes(u)
+                        )
+                      )
+                    }}
+                  >
+                    <Avatar>
+                      <AvatarImage src={user.avatar} alt="Image" />
+                      <AvatarFallback>{user.name[0]}</AvatarFallback>
+                    </Avatar>
+                    <div className="ml-2">
+                      <p className="text-sm font-medium leading-none">
+                        {user.name}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {user.email}
+                      </p>
+                    </div>
+                    {selectedUsers.includes(user) ? (
+                      <CheckIcon className="ml-auto flex h-5 w-5 text-primary" />
+                    ) : null}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+          <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+            {selectedUsers.length > 0 ? (
+              <div className="flex -space-x-2 overflow-hidden">
+                {selectedUsers.map((user) => (
+                  <Avatar
+                    key={user.email}
+                    className="inline-block border-2 border-background"
+                  >
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback>{user.name[0]}</AvatarFallback>
+                  </Avatar>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                Select users to add to this thread.
+              </p>
+            )}
+            <Button
+              disabled={selectedUsers.length < 2}
+              onClick={() => {
+                setOpen(false)
+              }}
+            >
+              Continue
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

apps/www/registry/new-york/example/cards/cookie-settings.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Label } from "@/registry/new-york/ui/label"
+import { Switch } from "@/registry/new-york/ui/switch"
+
+export function CardsCookieSettings() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cookie Settings</CardTitle>
+        <CardDescription>Manage your cookie settings here.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between space-x-4">
+          <Label htmlFor="necessary" className="flex flex-col space-y-1">
+            <span>Strictly Necessary</span>
+            <span className="text-xs font-normal leading-snug text-muted-foreground">
+              These cookies are essential in order to use the website and use
+              its features.
+            </span>
+          </Label>
+          <Switch id="necessary" defaultChecked aria-label="Necessary" />
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <Label htmlFor="functional" className="flex flex-col space-y-1">
+            <span>Functional Cookies</span>
+            <span className="text-xs font-normal leading-snug text-muted-foreground">
+              These cookies allow the website to provide personalized
+              functionality.
+            </span>
+          </Label>
+          <Switch id="functional" aria-label="Functional" />
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <Label htmlFor="performance" className="flex flex-col space-y-1">
+            <span>Performance Cookies</span>
+            <span className="text-xs font-normal leading-snug text-muted-foreground">
+              These cookies help to improve the performance of the website.
+            </span>
+          </Label>
+          <Switch id="performance" aria-label="Performance" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Save preferences
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/create-account.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+
+export function CardsCreateAccount() {
+  return (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <Icons.gitHub className="mr-2 h-4 w-4" />
+            Github
+          </Button>
+          <Button variant="outline">
+            <Icons.google className="mr-2 h-4 w-4" />
+            Google
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/data-table.tsx

@@ -0,0 +1,332 @@
+"use client"
+
+import * as React from "react"
+import {
+  CaretSortIcon,
+  ChevronDownIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Checkbox } from "@/registry/new-york/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/new-york/ui/dropdown-menu"
+import { Input } from "@/registry/new-york/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+
+const data: Payment[] = [
+  {
+    id: "m5gr84i9",
+    amount: 316,
+    status: "success",
+    email: "ken99@yahoo.com",
+  },
+  {
+    id: "3u1reuv4",
+    amount: 242,
+    status: "success",
+    email: "Abe45@gmail.com",
+  },
+  {
+    id: "derv1ws0",
+    amount: 837,
+    status: "processing",
+    email: "Monserrat44@gmail.com",
+  },
+  {
+    id: "5kma53ae",
+    amount: 874,
+    status: "success",
+    email: "Silas22@gmail.com",
+  },
+  {
+    id: "bhqecj4p",
+    amount: 721,
+    status: "failed",
+    email: "carmella@hotmail.com",
+  },
+]
+
+export type Payment = {
+  id: string
+  amount: number
+  status: "pending" | "processing" | "success" | "failed"
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected()}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <div className="capitalize">{row.getValue("status")}</div>
+    ),
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <CaretSortIcon className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <div className="lowercase">{row.getValue("email")}</div>,
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"))
+
+      // Format the amount as a dollar amount
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <DotsHorizontalIcon className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(payment.id)}
+            >
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]
+
+export function CardsDataTable() {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payments</CardTitle>
+        <CardDescription>Manage your payments.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-4 flex items-center gap-4">
+          <Input
+            placeholder="Filter emails..."
+            value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+            onChange={(event) =>
+              table.getColumn("email")?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm"
+          />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="ml-auto">
+                Columns <ChevronDownIcon className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) =>
+                        column.toggleVisibility(!!value)
+                      }
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead
+                        key={header.id}
+                        className="[&:has([role=checkbox])]:pl-3"
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </TableHead>
+                    )
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className="[&:has([role=checkbox])]:pl-3"
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        <div className="flex items-center justify-end space-x-2 pt-4">
+          <div className="flex-1 text-sm text-muted-foreground">
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </div>
+          <div className="space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              Previous
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/index.tsx

@@ -0,0 +1,63 @@
+import { CardsActivityGoal } from "@/registry/new-york/example/cards/activity-goal"
+import { CardsCalendar } from "@/registry/new-york/example/cards/calendar"
+import { CardsChat } from "@/registry/new-york/example/cards/chat"
+import { CardsCookieSettings } from "@/registry/new-york/example/cards/cookie-settings"
+import { CardsCreateAccount } from "@/registry/new-york/example/cards/create-account"
+import { CardsDataTable } from "@/registry/new-york/example/cards/data-table"
+import { CardsMetric } from "@/registry/new-york/example/cards/metric"
+import { CardsPaymentMethod } from "@/registry/new-york/example/cards/payment-method"
+import { CardsReportIssue } from "@/registry/new-york/example/cards/report-issue"
+import { CardsShare } from "@/registry/new-york/example/cards/share"
+import { CardsStats } from "@/registry/new-york/example/cards/stats"
+import { CardsTeamMembers } from "@/registry/new-york/example/cards/team-members"
+
+export default function CardsDemo() {
+  return (
+    <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4">
+      <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+        <CardsStats />
+        <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
+          <CardsCalendar />
+          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-4">
+            <CardsMetric />
+          </div>
+        </div>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+          <div className="space-y-4 xl:space-y-4">
+            <CardsTeamMembers />
+            <CardsCookieSettings />
+            <CardsPaymentMethod />
+          </div>
+          <div className="space-y-4 xl:space-y-4">
+            <CardsChat />
+            <CardsCreateAccount />
+            <div className="hidden xl:block">
+              <CardsReportIssue />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+        <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
+          <CardsCalendar />
+          <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+            <CardsActivityGoal />
+          </div>
+          <div className="pt-3 sm:col-span-2 xl:pt-3">
+            <CardsMetric />
+          </div>
+        </div>
+        <div className="hidden md:block">
+          <CardsDataTable />
+        </div>
+        <CardsShare />
+        <div className="xl:hidden">
+          <CardsReportIssue />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/www/registry/new-york/example/cards/metric.tsx

@@ -0,0 +1,142 @@
+import { useTheme } from "next-themes"
+import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
+
+import { useConfig } from "@/hooks/use-config"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { themes } from "@/registry/themes"
+
+const data = [
+  {
+    average: 400,
+    today: 240,
+  },
+  {
+    average: 300,
+    today: 139,
+  },
+  {
+    average: 200,
+    today: 980,
+  },
+  {
+    average: 278,
+    today: 390,
+  },
+  {
+    average: 189,
+    today: 480,
+  },
+  {
+    average: 239,
+    today: 380,
+  },
+  {
+    average: 349,
+    today: 430,
+  },
+]
+
+export function CardsMetric() {
+  const { theme: mode } = useTheme()
+  const [config] = useConfig()
+
+  const theme = themes.find((theme) => theme.name === config.theme)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Exercise Minutes</CardTitle>
+        <CardDescription>
+          Your excercise minutes are ahead of where you normally are.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="pb-4">
+        <div className="h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={data}
+              margin={{
+                top: 5,
+                right: 10,
+                left: 10,
+                bottom: 0,
+              }}
+            >
+              <Tooltip
+                content={({ active, payload }) => {
+                  if (active && payload && payload.length) {
+                    return (
+                      <div className="rounded-lg border bg-background p-2 shadow-sm">
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Average
+                            </span>
+                            <span className="font-bold text-muted-foreground">
+                              {payload[0].value}
+                            </span>
+                          </div>
+                          <div className="flex flex-col">
+                            <span className="text-[0.70rem] uppercase text-muted-foreground">
+                              Today
+                            </span>
+                            <span className="font-bold">
+                              {payload[1].value}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  }
+
+                  return null
+                }}
+              />
+              <Line
+                type="monotone"
+                strokeWidth={2}
+                dataKey="average"
+                activeDot={{
+                  r: 6,
+                  style: { fill: "var(--theme-primary)", opacity: 0.25 },
+                }}
+                style={
+                  {
+                    stroke: "var(--theme-primary)",
+                    opacity: 0.25,
+                    "--theme-primary": `hsl(${
+                      theme?.cssVars[mode === "dark" ? "dark" : "light"].primary
+                    })`,
+                  } as React.CSSProperties
+                }
+              />
+              <Line
+                type="monotone"
+                dataKey="today"
+                strokeWidth={2}
+                activeDot={{
+                  r: 8,
+                  style: { fill: "var(--theme-primary)" },
+                }}
+                style={
+                  {
+                    stroke: "var(--theme-primary)",
+                    "--theme-primary": `hsl(${
+                      theme?.cssVars[mode === "dark" ? "dark" : "light"].primary
+                    })`,
+                  } as React.CSSProperties
+                }
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/payment-method.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/registry/new-york/ui/radio-group"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+
+export function CardsPaymentMethod() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>
+          Add a new payment method to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+          <Label
+            htmlFor="card"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+          >
+            <RadioGroupItem
+              value="card"
+              id="card"
+              className="sr-only"
+              aria-label="Card"
+            />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="mb-3 h-6 w-6"
+            >
+              <rect width="20" height="14" x="2" y="5" rx="2" />
+              <path d="M2 10h20" />
+            </svg>
+            Card
+          </Label>
+          <Label
+            htmlFor="paypal"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+          >
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="sr-only"
+              aria-label="Paypal"
+            />
+            <Icons.paypal className="mb-3 h-6 w-6" />
+            Paypal
+          </Label>
+          <Label
+            htmlFor="apple"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-transparent p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+          >
+            <RadioGroupItem
+              value="apple"
+              id="apple"
+              className="sr-only"
+              aria-label="Apple"
+            />
+            <Icons.apple className="mb-3 h-6 w-6" />
+            Apple
+          </Label>
+        </RadioGroup>
+        <div className="grid gap-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="First Last" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="city">City</Label>
+          <Input id="city" placeholder="" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="number">Card number</Label>
+          <Input id="number" placeholder="" />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="month">Expires</Label>
+            <Select>
+              <SelectTrigger id="month" aria-label="Month">
+                <SelectValue placeholder="Month" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">January</SelectItem>
+                <SelectItem value="2">February</SelectItem>
+                <SelectItem value="3">March</SelectItem>
+                <SelectItem value="4">April</SelectItem>
+                <SelectItem value="5">May</SelectItem>
+                <SelectItem value="6">June</SelectItem>
+                <SelectItem value="7">July</SelectItem>
+                <SelectItem value="8">August</SelectItem>
+                <SelectItem value="9">September</SelectItem>
+                <SelectItem value="10">October</SelectItem>
+                <SelectItem value="11">November</SelectItem>
+                <SelectItem value="12">December</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="year">Year</Label>
+            <Select>
+              <SelectTrigger id="year" aria-label="Year">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from({ length: 10 }, (_, i) => (
+                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
+                    {new Date().getFullYear() + i}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cvc">CVC</Label>
+            <Input id="cvc" placeholder="CVC" />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Continue</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/report-issue.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Textarea } from "@/registry/new-york/ui/textarea"
+
+export function CardsReportIssue() {
+  const id = React.useId()
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report an issue</CardTitle>
+        <CardDescription>
+          What area are you having problems with?
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="grid gap-2">
+            <Label htmlFor={`area-${id}`}>Area</Label>
+            <Select defaultValue="billing">
+              <SelectTrigger id={`area-${id}`} aria-label="Area">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="team">Team</SelectItem>
+                <SelectItem value="billing">Billing</SelectItem>
+                <SelectItem value="account">Account</SelectItem>
+                <SelectItem value="deployments">Deployments</SelectItem>
+                <SelectItem value="support">Support</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor={`security-level-${id}`}>Security Level</Label>
+            <Select defaultValue="2">
+              <SelectTrigger
+                id={`security-level-${id}`}
+                className="line-clamp-1 w-full truncate"
+                aria-label="Security Level"
+              >
+                <SelectValue placeholder="Select level" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">Severity 1 (Highest)</SelectItem>
+                <SelectItem value="2">Severity 2</SelectItem>
+                <SelectItem value="3">Severity 3</SelectItem>
+                <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor={`subject-${id}`}>Subject</Label>
+          <Input id={`subject-${id}`} placeholder="I need help with..." />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor={`description-${id}`}>Description</Label>
+          <Textarea
+            id={`description-${id}`}
+            placeholder="Please include all information relevant to your issue."
+          />
+        </div>
+      </CardContent>
+      <CardFooter className="justify-between space-x-2">
+        <Button variant="ghost">Cancel</Button>
+        <Button>Submit</Button>
+      </CardFooter>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/share.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { Input } from "@/registry/new-york/ui/input"
+import { Label } from "@/registry/new-york/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/new-york/ui/select"
+import { Separator } from "@/registry/new-york/ui/separator"
+
+export function CardsShare() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle>Share this document</CardTitle>
+        <CardDescription>
+          Anyone with the link can view this document.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex space-x-2">
+          <Label htmlFor="link" className="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            value="http://example.com/link/to/document"
+            readOnly
+          />
+          <Button className="shrink-0">Copy Link</Button>
+        </div>
+        <Separator className="my-4" />
+        <div className="space-y-4">
+          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="grid gap-6">
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/03.png" alt="Image" />
+                  <AvatarFallback>OM</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Olivia Martin
+                  </p>
+                  <p className="text-sm text-muted-foreground">m@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="edit">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/05.png" alt="Image" />
+                  <AvatarFallback>IN</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Isabella Nguyen
+                  </p>
+                  <p className="text-sm text-muted-foreground">b@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="view">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between space-x-4">
+              <div className="flex items-center space-x-4">
+                <Avatar>
+                  <AvatarImage src="/avatars/01.png" alt="Image" />
+                  <AvatarFallback>SD</AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="text-sm font-medium leading-none">
+                    Sofia Davis
+                  </p>
+                  <p className="text-sm text-muted-foreground">p@example.com</p>
+                </div>
+              </div>
+              <Select defaultValue="view">
+                <SelectTrigger className="ml-auto w-[110px]" aria-label="Edit">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="edit">Can edit</SelectItem>
+                  <SelectItem value="view">Can view</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/new-york/example/cards/stats.tsx

@@ -0,0 +1,131 @@
+import { useTheme } from "next-themes"
+import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts"
+
+import { useConfig } from "@/hooks/use-config"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import { themes } from "@/registry/themes"
+
+const data = [
+  {
+    revenue: 10400,
+    subscription: 240,
+  },
+  {
+    revenue: 14405,
+    subscription: 300,
+  },
+  {
+    revenue: 9400,
+    subscription: 200,
+  },
+  {
+    revenue: 8200,
+    subscription: 278,
+  },
+  {
+    revenue: 7000,
+    subscription: 189,
+  },
+  {
+    revenue: 9600,
+    subscription: 239,
+  },
+  {
+    revenue: 11244,
+    subscription: 278,
+  },
+  {
+    revenue: 26475,
+    subscription: 189,
+  },
+]
+
+export function CardsStats() {
+  const { theme: mode } = useTheme()
+  const [config] = useConfig()
+
+  const theme = themes.find((theme) => theme.name === config.theme)
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">$15,231.89</div>
+          <p className="text-xs text-muted-foreground">
+            +20.1% from last month
+          </p>
+          <div className="h-[80px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart
+                data={data}
+                margin={{
+                  top: 5,
+                  right: 10,
+                  left: 10,
+                  bottom: 0,
+                }}
+              >
+                <Line
+                  type="monotone"
+                  strokeWidth={2}
+                  dataKey="revenue"
+                  activeDot={{
+                    r: 6,
+                    style: { fill: "var(--theme-primary)", opacity: 0.25 },
+                  }}
+                  style={
+                    {
+                      stroke: "var(--theme-primary)",
+                      "--theme-primary": `hsl(${
+                        theme?.cssVars[mode === "dark" ? "dark" : "light"]
+                          .primary
+                      })`,
+                    } as React.CSSProperties
+                  }
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-normal">Subscriptions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">+2350</div>
+          <p className="text-xs text-muted-foreground">
+            +180.1% from last month
+          </p>
+          <div className="mt-4 h-[80px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={data}>
+                <Bar
+                  dataKey="subscription"
+                  style={
+                    {
+                      fill: "var(--theme-primary)",
+                      opacity: 1,
+                      "--theme-primary": `hsl(${
+                        theme?.cssVars[mode === "dark" ? "dark" : "light"]
+                          .primary
+                      })`,
+                    } as React.CSSProperties
+                  }
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

apps/www/registry/new-york/example/cards/team-members.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york/ui/avatar"
+import { Button } from "@/registry/new-york/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york/ui/card"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/new-york/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/new-york/ui/popover"
+
+export function CardsTeamMembers() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Team Members</CardTitle>
+        <CardDescription>
+          Invite your team members to collaborate.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/01.png" alt="Image" />
+              <AvatarFallback>OM</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Sofia Davis</p>
+              <p className="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Owner{" "}
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/02.png" alt="Image" />
+              <AvatarFallback>JL</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">Jackson Lee</p>
+              <p className="text-sm text-muted-foreground">p@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Member{" "}
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup className="p-1.5">
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex items-center justify-between space-x-4">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-8 w-8">
+              <AvatarImage src="/avatars/03.png" alt="Image" />
+              <AvatarFallback>IN</AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-sm font-medium leading-none">
+                Isabella Nguyen
+              </p>
+              <p className="text-sm text-muted-foreground">i@example.com</p>
+            </div>
+          </div>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                Member{" "}
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="end">
+              <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup className="p-1.5">
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p className="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem className="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p className="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

apps/www/registry/new-york/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     variants: {
       variant: {

apps/www/registry/new-york/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",

apps/www/registry/new-york/ui/calendar.tsx

@@ -36,11 +36,18 @@ function Calendar({
         head_cell:
           "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
         ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
         day_selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",

apps/www/registry/new-york/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

apps/www/registry/registry.ts

@@ -854,6 +854,11 @@ const example: Registry = [
     type: "components:example",
     files: ["example/mode-toggle.tsx"],
   },
+  {
+    name: "cards",
+    type: "components:example",
+    files: ["example/cards/cards.tsx"],
+  },
 ]
 
 export const registry: Registry = [...ui, ...example]

apps/www/registry/themes.ts

@@ -1,145 +1,633 @@
 export const themes = [
-  {
-    name: "default",
-    label: "Default",
-    cssVars: {
-      light: {
-        background: "0 0% 100%",
-        foreground: "222.2 84% 4.9%",
-        muted: "210 40% 96.1%",
-        "muted-foreground": "215.4 16.3% 46.9%",
-        popover: "0 0% 100%",
-        "popover-foreground": "222.2 84% 4.9%",
-        border: "214.3 31.8% 91.4%",
-        input: "214.3 31.8% 91.4%",
-        card: "0 0% 100%",
-        "card-foreground": "222.2 84% 4.9%",
-        primary: "160 90% 46%",
-        "primary-foreground": "210 40% 98%",
-        secondary: "210 40% 96.1%",
-        "secondary-foreground": "222.2 47.4% 11.2%",
-        accent: "210 40% 96.1%",
-        "accent-foreground": "222.2 47.4% 11.2%",
-        destructive: "0 84.2% 60.2%",
-        "destructive-foreground": "210 40% 98%",
-        ring: "215 20.2% 65.1%",
-      },
-      dark: {
-        background: "222.2 84% 4.9%",
-        foreground: "210 40% 98%",
-        muted: "217.2 32.6% 17.5%",
-        "muted-foreground": "215 20.2% 65.1%",
-        popover: "222.2 84% 4.9%",
-        "popover-foreground": "210 40% 98%",
-        border: "217.2 32.6% 17.5%",
-        input: "217.2 32.6% 17.5%",
-        card: "222.2 84% 4.9%",
-        "card-foreground": "210 40% 98%",
-        primary: "210 40% 98%",
-        "primary-foreground": "222.2 47.4% 11.2%",
-        secondary: "217.2 32.6% 17.5%",
-        "secondary-foreground": "210 40% 98%",
-        accent: "217.2 32.6% 17.5%",
-        "accent-foreground": "210 40% 98%",
-        destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 85.7% 97.3%",
-        ring: "217.2 32.6% 17.5%",
-      },
-    },
-  },
   {
     name: "zinc",
     label: "Zinc",
+    activeColor: {
+      light: "240 5.9% 10%",
+      dark: "240 5.2% 33.9%",
+    },
     cssVars: {
       light: {
         background: "0 0% 100%",
         foreground: "240 10% 3.9%",
-        muted: "240 4.8% 95.9%",
-        "muted-foreground": "240 3.8% 46.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "240 10% 3.9%",
-        border: "240 5.9% 90%",
-        input: "240 5.9% 90%",
         card: "0 0% 100%",
         "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%;",
+        "popover-foreground": "240 10% 3.9%",
         primary: "240 5.9% 10%",
         "primary-foreground": "0 0% 98%",
         secondary: "240 4.8% 95.9%",
         "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
         accent: "240 4.8% 95.9%",
         "accent-foreground": "240 5.9% 10%",
         destructive: "0 84.2% 60.2%",
         "destructive-foreground": "0 0% 98%",
-        ring: "240 5% 64.9%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "240 5.9% 10%",
+        radius: "0.5rem",
       },
       dark: {
         background: "240 10% 3.9%",
         foreground: "0 0% 98%",
-        muted: "240 3.7% 15.9%",
-        "muted-foreground": "240 5% 64.9%",
-        popover: "240 10% 3.9%",
-        "popover-foreground": "0 0% 98%",
-        border: "240 3.7% 15.9%",
-        input: "240 3.7% 15.9%",
         card: "240 10% 3.9%",
         "card-foreground": "0 0% 98%",
+        popover: "240 10% 3.9%",
+        "popover-foreground": "0 0% 98%",
         primary: "0 0% 98%",
         "primary-foreground": "240 5.9% 10%",
         secondary: "240 3.7% 15.9%",
         "secondary-foreground": "0 0% 98%",
+        muted: "240 3.7% 15.9%",
+        "muted-foreground": "240 5% 64.9%",
         accent: "240 3.7% 15.9%",
         "accent-foreground": "0 0% 98%",
         destructive: "0 62.8% 30.6%",
-        "destructive-foreground": "0 85.7% 97.3%",
-        ring: "240 3.7% 15.9%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "240 4.9% 83.9%",
       },
     },
   },
   {
-    name: "lime",
-    label: "Lime",
+    name: "slate",
+    label: "Slate",
+    activeColor: {
+      light: "215.4 16.3% 46.9%",
+      dark: "215.3 19.3% 34.5%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        primary: "222.2 47.4% 11.2%",
+        "primary-foreground": "210 40% 98%",
+        secondary: "210 40% 96.1%",
+        "secondary-foreground": "222.2 47.4% 11.2%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "222.2 84% 4.9%",
+        radius: "0.5rem",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "210 40% 98%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "212.7 26.8% 83.9",
+      },
+    },
+  },
+  {
+    name: "stone",
+    label: "Stone",
+    activeColor: {
+      light: "25 5.3% 44.7%",
+      dark: "33.3 5.5% 32.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24 9.8% 10%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "60 9.1% 97.8%",
+        "primary-foreground": "24 9.8% 10%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "24 5.7% 82.9%",
+      },
+    },
+  },
+  {
+    name: "gray",
+    label: "Gray",
+    activeColor: {
+      light: "220 8.9% 46.1%",
+      dark: "215 13.8% 34.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "220.9 39.3% 11%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "224 71.4% 4.1%",
+        radius: "0.35rem",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "210 20% 98%",
+        "primary-foreground": "220.9 39.3% 11%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "216 12.2% 83.9%",
+      },
+    },
+  },
+  {
+    name: "neutral",
+    label: "Neutral",
+    activeColor: {
+      light: "0 0% 45.1%",
+      dark: "0 0% 32.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 0% 9%",
+        "primary-foreground": "0 0% 98%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 0% 3.9%",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 0% 98%",
+        "primary-foreground": "0 0% 9%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 0% 83.1%",
+      },
+    },
+  },
+  {
+    name: "red",
+    label: "Red",
+    activeColor: {
+      light: "0 72.2% 50.6%",
+      dark: "0 72.2% 50.6%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "0 0% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        primary: "0 72.2% 50.6%",
+        "primary-foreground": "0 85.7% 97.3%",
+        secondary: "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        muted: "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        accent: "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 89.8%",
+        input: "0 0% 89.8%",
+        ring: "0 72.2% 50.6%",
+        radius: "0.4rem",
+      },
+      dark: {
+        background: "0 0% 3.9%",
+        foreground: "0 0% 98%",
+        card: "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        popover: "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        primary: "0 72.2% 50.6%",
+        "primary-foreground": "0 85.7% 97.3%",
+        secondary: "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        accent: "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        border: "0 0% 14.9%",
+        input: "0 0% 14.9%",
+        ring: "0 72.2% 50.6%",
+      },
+    },
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    activeColor: {
+      light: "346.8 77.2% 49.8%",
+      dark: "346.8 77.2% 49.8%",
+    },
     cssVars: {
       light: {
         background: "0 0% 100%",
         foreground: "240 10% 3.9%",
-        muted: "240 4.8% 95.9%",
-        "muted-foreground": "240 3.8% 46.1%",
-        popover: "0 0% 100%",
-        "popover-foreground": "240 10% 3.9%",
-        border: "240 5.9% 90%",
-        input: "240 5.9% 90%",
         card: "0 0% 100%",
         "card-foreground": "240 10% 3.9%",
-        primary: "87.6 61.2% 20.2%",
-        "primary-foreground": "0 0% 98%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "346.8 77.2% 49.8%",
+        "primary-foreground": "355.7 100% 97.3%",
         secondary: "240 4.8% 95.9%",
         "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
         accent: "240 4.8% 95.9%",
         "accent-foreground": "240 5.9% 10%",
         destructive: "0 84.2% 60.2%",
         "destructive-foreground": "0 0% 98%",
-        ring: "240 5% 64.9%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "346.8 77.2% 49.8%",
+        radius: "0.5rem",
       },
       dark: {
-        background: "240 10% 3.9%",
-        foreground: "0 0% 98%",
-        muted: "240 3.7% 15.9%",
-        "muted-foreground": "240 5% 64.9%",
-        popover: "240 10% 3.9%",
-        "popover-foreground": "0 0% 98%",
-        border: "240 3.7% 15.9%",
-        input: "240 3.7% 15.9%",
-        card: "240 10% 3.9%",
-        "card-foreground": "0 0% 98%",
-        primary: "82 84.5% 67.1%",
-        "primary-foreground": "240 5.9% 10%",
+        background: "20 14.3% 4.1%",
+        foreground: "0 0% 95%",
+        popover: "0 0% 9%",
+        "popover-foreground": "0 0% 95%",
+        card: "24 9.8% 10%",
+        "card-foreground": "0 0% 95%",
+        primary: "346.8 77.2% 49.8%",
+        "primary-foreground": "355.7 100% 97.3%",
         secondary: "240 3.7% 15.9%",
         "secondary-foreground": "0 0% 98%",
-        accent: "240 3.7% 15.9%",
+        muted: "0 0% 15%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "12 6.5% 15.1%",
         "accent-foreground": "0 0% 98%",
         destructive: "0 62.8% 30.6%",
         "destructive-foreground": "0 85.7% 97.3%",
-        ring: "240 3.7% 15.9%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "346.8 77.2% 49.8%",
+      },
+    },
+  },
+  {
+    name: "orange",
+    label: "Orange",
+    activeColor: {
+      light: "24.6 95% 53.1%",
+      dark: "20.5 90.2% 48.2%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "24.6 95% 53.1%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "24.6 95% 53.1%",
+        radius: "0.95rem",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "20.5 90.2% 48.2%",
+        "primary-foreground": "60 9.1% 97.8%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 72.2% 50.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "20.5 90.2% 48.2%",
+      },
+    },
+  },
+  {
+    name: "green",
+    label: "Green",
+    activeColor: {
+      light: "142.1 76.2% 36.3%",
+      dark: "142.1 70.6% 45.3%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "240 10% 3.9%",
+        card: "0 0% 100%",
+        "card-foreground": "240 10% 3.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "240 10% 3.9%",
+        primary: "142.1 76.2% 36.3%",
+        "primary-foreground": "355.7 100% 97.3%",
+        secondary: "240 4.8% 95.9%",
+        "secondary-foreground": "240 5.9% 10%",
+        muted: "240 4.8% 95.9%",
+        "muted-foreground": "240 3.8% 46.1%",
+        accent: "240 4.8% 95.9%",
+        "accent-foreground": "240 5.9% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        border: "240 5.9% 90%",
+        input: "240 5.9% 90%",
+        ring: "142.1 76.2% 36.3%",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "0 0% 95%",
+        popover: "0 0% 9%",
+        "popover-foreground": "0 0% 95%",
+        card: "24 9.8% 10%",
+        "card-foreground": "0 0% 95%",
+        primary: "142.1 70.6% 45.3%",
+        "primary-foreground": "144.9 80.4% 10%",
+        secondary: "240 3.7% 15.9%",
+        "secondary-foreground": "0 0% 98%",
+        muted: "0 0% 15%",
+        "muted-foreground": "240 5% 64.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "0 0% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "0 85.7% 97.3%",
+        border: "240 3.7% 15.9%",
+        input: "240 3.7% 15.9%",
+        ring: "142.4 71.8% 29.2%",
+      },
+    },
+  },
+  {
+    name: "blue",
+    label: "Blue",
+    activeColor: {
+      light: "221.2 83.2% 53.3%",
+      dark: "217.2 91.2% 59.8%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "222.2 84% 4.9%",
+        card: "0 0% 100%",
+        "card-foreground": "222.2 84% 4.9%",
+        popover: "0 0% 100%",
+        "popover-foreground": "222.2 84% 4.9%",
+        primary: "221.2 83.2% 53.3%",
+        "primary-foreground": "210 40% 98%",
+        secondary: "210 40% 96.1%",
+        "secondary-foreground": "222.2 47.4% 11.2%",
+        muted: "210 40% 96.1%",
+        "muted-foreground": "215.4 16.3% 46.9%",
+        accent: "210 40% 96.1%",
+        "accent-foreground": "222.2 47.4% 11.2%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 40% 98%",
+        border: "214.3 31.8% 91.4%",
+        input: "214.3 31.8% 91.4%",
+        ring: "221.2 83.2% 53.3%",
+      },
+      dark: {
+        background: "222.2 84% 4.9%",
+        foreground: "210 40% 98%",
+        card: "222.2 84% 4.9%",
+        "card-foreground": "210 40% 98%",
+        popover: "222.2 84% 4.9%",
+        "popover-foreground": "210 40% 98%",
+        primary: "217.2 91.2% 59.8%",
+        "primary-foreground": "222.2 47.4% 11.2%",
+        secondary: "217.2 32.6% 17.5%",
+        "secondary-foreground": "210 40% 98%",
+        muted: "217.2 32.6% 17.5%",
+        "muted-foreground": "215 20.2% 65.1%",
+        accent: "217.2 32.6% 17.5%",
+        "accent-foreground": "210 40% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 40% 98%",
+        border: "217.2 32.6% 17.5%",
+        input: "217.2 32.6% 17.5%",
+        ring: "224.3 76.3% 48%",
+      },
+    },
+  },
+  {
+    name: "yellow",
+    label: "Yellow",
+    activeColor: {
+      light: "47.9 95.8% 53.1%",
+      dark: "47.9 95.8% 53.1%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "20 14.3% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "20 14.3% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "20 14.3% 4.1%",
+        primary: "47.9 95.8% 53.1%",
+        "primary-foreground": "26 83.3% 14.1%",
+        secondary: "60 4.8% 95.9%",
+        "secondary-foreground": "24 9.8% 10%",
+        muted: "60 4.8% 95.9%",
+        "muted-foreground": "25 5.3% 44.7%",
+        accent: "60 4.8% 95.9%",
+        "accent-foreground": "24 9.8% 10%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "20 5.9% 90%",
+        input: "20 5.9% 90%",
+        ring: "20 14.3% 4.1%",
+        radius: "0.95rem",
+      },
+      dark: {
+        background: "20 14.3% 4.1%",
+        foreground: "60 9.1% 97.8%",
+        card: "20 14.3% 4.1%",
+        "card-foreground": "60 9.1% 97.8%",
+        popover: "20 14.3% 4.1%",
+        "popover-foreground": "60 9.1% 97.8%",
+        primary: "47.9 95.8% 53.1%",
+        "primary-foreground": "26 83.3% 14.1%",
+        secondary: "12 6.5% 15.1%",
+        "secondary-foreground": "60 9.1% 97.8%",
+        muted: "12 6.5% 15.1%",
+        "muted-foreground": "24 5.4% 63.9%",
+        accent: "12 6.5% 15.1%",
+        "accent-foreground": "60 9.1% 97.8%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "60 9.1% 97.8%",
+        border: "12 6.5% 15.1%",
+        input: "12 6.5% 15.1%",
+        ring: "35.5 91.7% 32.9%",
+      },
+    },
+  },
+  {
+    name: "violet",
+    label: "Violet",
+    activeColor: {
+      light: "262.1 83.3% 57.8%",
+      dark: "263.4 70% 50.4%",
+    },
+    cssVars: {
+      light: {
+        background: "0 0% 100%",
+        foreground: "224 71.4% 4.1%",
+        card: "0 0% 100%",
+        "card-foreground": "224 71.4% 4.1%",
+        popover: "0 0% 100%",
+        "popover-foreground": "224 71.4% 4.1%",
+        primary: "262.1 83.3% 57.8%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "220 14.3% 95.9%",
+        "secondary-foreground": "220.9 39.3% 11%",
+        muted: "220 14.3% 95.9%",
+        "muted-foreground": "220 8.9% 46.1%",
+        accent: "220 14.3% 95.9%",
+        "accent-foreground": "220.9 39.3% 11%",
+        destructive: "0 84.2% 60.2%",
+        "destructive-foreground": "210 20% 98%",
+        border: "220 13% 91%",
+        input: "220 13% 91%",
+        ring: "262.1 83.3% 57.8%",
+      },
+      dark: {
+        background: "224 71.4% 4.1%",
+        foreground: "210 20% 98%",
+        card: "224 71.4% 4.1%",
+        "card-foreground": "210 20% 98%",
+        popover: "224 71.4% 4.1%",
+        "popover-foreground": "210 20% 98%",
+        primary: "263.4 70% 50.4%",
+        "primary-foreground": "210 20% 98%",
+        secondary: "215 27.9% 16.9%",
+        "secondary-foreground": "210 20% 98%",
+        muted: "215 27.9% 16.9%",
+        "muted-foreground": "217.9 10.6% 64.9%",
+        accent: "215 27.9% 16.9%",
+        "accent-foreground": "210 20% 98%",
+        destructive: "0 62.8% 30.6%",
+        "destructive-foreground": "210 20% 98%",
+        border: "215 27.9% 16.9%",
+        input: "215 27.9% 16.9%",
+        ring: "263.4 70% 50.4%",
       },
     },
   },

apps/www/scripts/build-registry.ts

@@ -190,18 +190,12 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
   :root {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
- 
-    --muted: <%- colors.light["muted"] %>;
-    --muted-foreground: <%- colors.light["muted-foreground"] %>;
- 
-    --popover: <%- colors.light["popover"] %>;
-    --popover-foreground: <%- colors.light["popover-foreground"] %>;
- 
+
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
  
-    --border: <%- colors.light["border"] %>;
-    --input: <%- colors.light["input"] %>;
+    --popover: <%- colors.light["popover"] %>;
+    --popover-foreground: <%- colors.light["popover-foreground"] %>;
  
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
@@ -209,12 +203,17 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
  
+    --muted: <%- colors.light["muted"] %>;
+    --muted-foreground: <%- colors.light["muted-foreground"] %>;
+ 
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
  
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
- 
+
+    --border: <%- colors.light["border"] %>;
+    --input: <%- colors.light["input"] %>;
     --ring: <%- colors.light["ring"] %>;
  
     --radius: 0.5rem;
@@ -224,17 +223,11 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
  
-    --muted: <%- colors.dark["muted"] %>;
-    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
- 
-    --popover: <%- colors.dark["popover"] %>;
-    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
- 
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
  
-    --border: <%- colors.dark["border"] %>;
-    --input: <%- colors.dark["input"] %>;
+    --popover: <%- colors.dark["popover"] %>;
+    --popover-foreground: <%- colors.dark["popover-foreground"] %>;
  
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
@@ -242,12 +235,17 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
  
+    --muted: <%- colors.dark["muted"] %>;
+    --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+ 
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
  
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
  
+    --border: <%- colors.dark["border"] %>;
+    --input: <%- colors.dark["input"] %>;
     --ring: <%- colors.dark["ring"] %>;
   }
 }
@@ -261,7 +259,7 @@ export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
   }
 }`
 
-for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone", "lime"]) {
+for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
   const base: Record<string, any> = {
     inlineColors: {},
     cssVars: {},
@@ -334,7 +332,7 @@ export const THEME_STYLES_WITH_VARIABLES = `
  
     --ring: <%- colors.light["ring"] %>;
  
-    --radius: 0.5rem;
+    --radius: <%- colors.light["radius"] %>;
   }
  
   .dark .theme-<%- theme %> {
@@ -384,4 +382,49 @@ fs.writeFileSync(
   "utf8"
 )
 
+// ----------------------------------------------------------------------------
+// Build registry/themes/[theme].json
+// ----------------------------------------------------------------------------
+rimraf.sync(path.join(REGISTRY_PATH, "themes"))
+for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
+  const payload = {
+    name: baseColor,
+    label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
+    cssVars: {},
+  }
+
+  for (const [mode, values] of Object.entries(colorMapping)) {
+    payload["cssVars"][mode] = {}
+    for (const [key, value] of Object.entries(values)) {
+      if (typeof value === "string") {
+        const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`)
+        payload["cssVars"][mode][key] = resolvedColor
+
+        const [resolvedBase, scale] = resolvedColor.split("-")
+        const color = scale
+          ? colorsData[resolvedBase].find(
+              (item) => item.scale === parseInt(scale)
+            )
+          : colorsData[resolvedBase]
+        if (color) {
+          payload["cssVars"][mode][key] = color.hslChannel
+        }
+      }
+    }
+  }
+
+  const targetPath = path.join(REGISTRY_PATH, "themes")
+
+  // Create directory if it doesn't exist.
+  if (!fs.existsSync(targetPath)) {
+    fs.mkdirSync(targetPath, { recursive: true })
+  }
+
+  fs.writeFileSync(
+    path.join(targetPath, `${payload.name}.json`),
+    JSON.stringify(payload, null, 2),
+    "utf8"
+  )
+}
+
 console.log("✅ Done!")

apps/www/styles/globals.css

@@ -6,65 +6,46 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
     --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
-
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
-
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
     --ring: 240 5% 64.9%;
-
     --radius: 0.5rem;
   }
 
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
-
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
-
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
-
-    --ring: 240 3.7% 15.9%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 

pnpm-lock.yaml

@@ -266,6 +266,9 @@ importers:
       tailwind-merge:
         specifier: ^1.12.0
         version: 1.12.0
+      vaul:
+        specifier: ^0.2.0
+        version: 0.2.0(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
       zod:
         specifier: ^3.21.4
         version: 3.21.4
@@ -989,7 +992,7 @@ packages:
   /@changesets/apply-release-plan@6.1.3:
     resolution: {integrity: sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/config': 2.3.0
       '@changesets/get-version-range-type': 0.3.2
       '@changesets/git': 2.0.0
@@ -1007,7 +1010,7 @@ packages:
   /@changesets/assemble-release-plan@5.2.3:
     resolution: {integrity: sha512-g7EVZCmnWz3zMBAdrcKhid4hkHT+Ft1n0mLussFMcB1dE2zCuwcvGoy9ec3yOgPGF4hoMtgHaMIk3T3TBdvU9g==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/errors': 0.1.4
       '@changesets/get-dependents-graph': 1.3.5
       '@changesets/types': 5.2.1
@@ -1110,7 +1113,7 @@ packages:
   /@changesets/get-release-plan@3.0.16:
     resolution: {integrity: sha512-OpP9QILpBp1bY2YNIKFzwigKh7Qe9KizRsZomzLe6pK8IUo8onkAAVUD8+JRKSr8R7d4+JRuQrfSSNlEwKyPYg==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/assemble-release-plan': 5.2.3
       '@changesets/config': 2.3.0
       '@changesets/pre': 1.0.14
@@ -1126,7 +1129,7 @@ packages:
   /@changesets/git@2.0.0:
     resolution: {integrity: sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/errors': 0.1.4
       '@changesets/types': 5.2.1
       '@manypkg/get-packages': 1.1.3
@@ -1151,7 +1154,7 @@ packages:
   /@changesets/pre@1.0.14:
     resolution: {integrity: sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/errors': 0.1.4
       '@changesets/types': 5.2.1
       '@manypkg/get-packages': 1.1.3
@@ -1161,7 +1164,7 @@ packages:
   /@changesets/read@0.5.9:
     resolution: {integrity: sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/git': 2.0.0
       '@changesets/logger': 0.0.5
       '@changesets/parse': 0.3.16
@@ -1182,7 +1185,7 @@ packages:
   /@changesets/write@0.2.3:
     resolution: {integrity: sha512-Dbamr7AIMvslKnNYsLFafaVORx4H0pvCA2MHqgtNCySMe1blImEyAEOzDmcgKAkgz4+uwoLz7demIrX+JBr/Xw==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/types': 5.2.1
       fs-extra: 7.0.1
       human-id: 1.0.2
@@ -1974,7 +1977,7 @@ packages:
   /@manypkg/find-root@1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@types/node': 12.20.55
       find-up: 4.1.0
       fs-extra: 8.1.0
@@ -1993,7 +1996,7 @@ packages:
   /@manypkg/get-packages@1.1.3:
     resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@changesets/types': 4.1.0
       '@manypkg/find-root': 1.1.0
       fs-extra: 8.1.0
@@ -2509,7 +2512,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.7
       '@types/react-dom': 18.2.4
@@ -2832,7 +2835,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
@@ -2889,7 +2892,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@types/react': 18.2.7
       react: 18.2.0
     dev: false
@@ -2921,7 +2924,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0)
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.7)(react@18.2.0)
@@ -3164,7 +3167,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@floating-ui/react-dom': 2.0.0(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0)
@@ -3206,7 +3209,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.7
       '@types/react-dom': 18.2.4
@@ -3274,7 +3277,7 @@ packages:
       '@types/react-dom':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.7)(react@18.2.0)
       '@types/react': 18.2.7
       '@types/react-dom': 18.2.4
@@ -3761,7 +3764,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.7)(react@18.2.0)
       '@types/react': 18.2.7
       react: 18.2.0
@@ -3813,7 +3816,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       '@radix-ui/rect': 1.0.1
       '@types/react': 18.2.7
       react: 18.2.0
@@ -3858,7 +3861,7 @@ packages:
   /@radix-ui/rect@1.0.1:
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
     dev: false
 
   /@resvg/resvg-wasm@2.0.0-alpha.4:
@@ -4511,13 +4514,6 @@ packages:
     resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
     dependencies:
       deep-equal: 2.2.1
-    dev: false
-
-  /aria-query@5.3.0:
-    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
-    dependencies:
-      dequal: 2.0.3
-    dev: true
 
   /array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
@@ -4644,13 +4640,6 @@ packages:
     resolution: {integrity: sha512-goKlv8DZrK9hUh975fnHzhNIO4jUnFCfv/dszV5VwUGDFjI6vQ2VwoyjYjYNEbBE8AH87TduWP5uyDR1D+Iteg==}
     dependencies:
       deep-equal: 2.2.1
-    dev: false
-
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: true
 
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
@@ -4841,10 +4830,6 @@ packages:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
     dev: false
 
-  /caniuse-lite@1.0.30001489:
-    resolution: {integrity: sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==}
-    dev: false
-
   /caniuse-lite@1.0.30001512:
     resolution: {integrity: sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw==}
 
@@ -5475,7 +5460,6 @@ packages:
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
       which-typed-array: 1.1.9
-    dev: false
 
   /deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
@@ -5689,7 +5673,6 @@ packages:
       is-string: 1.0.7
       isarray: 2.0.5
       stop-iteration-iterator: 1.0.0
-    dev: false
 
   /es-set-tostringtag@2.0.1:
     resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
@@ -6022,7 +6005,7 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
-      '@babel/runtime': 7.22.3
+      '@babel/runtime': 7.22.6
       aria-query: 5.1.3
       array-includes: 3.1.6
       array.prototype.flatmap: 1.3.1
@@ -6048,17 +6031,17 @@ packages:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
     dependencies:
       '@babel/runtime': 7.22.6
-      aria-query: 5.3.0
+      aria-query: 5.1.3
       array-includes: 3.1.6
       array.prototype.flatmap: 1.3.1
       ast-types-flow: 0.0.7
       axe-core: 4.7.2
-      axobject-query: 3.2.1
+      axobject-query: 3.1.1
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
       eslint: 8.44.0
       has: 1.0.3
-      jsx-ast-utils: 3.3.4
+      jsx-ast-utils: 3.3.3
       language-tags: 1.0.5
       minimatch: 3.1.2
       object.entries: 1.1.6
@@ -7179,7 +7162,6 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
-    dev: false
 
   /is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
@@ -7308,7 +7290,6 @@ packages:
 
   /is-map@2.0.2:
     resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
-    dev: false
 
   /is-nan@1.3.2:
     resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
@@ -7375,7 +7356,6 @@ packages:
 
   /is-set@2.0.2:
     resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
-    dev: false
 
   /is-shared-array-buffer@1.0.2:
     resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
@@ -7434,7 +7414,6 @@ packages:
 
   /is-weakmap@2.0.1:
     resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
-    dev: false
 
   /is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
@@ -7446,7 +7425,6 @@ packages:
     dependencies:
       call-bind: 1.0.2
       get-intrinsic: 1.2.1
-    dev: false
 
   /is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
@@ -7462,7 +7440,6 @@ packages:
 
   /isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
-    dev: false
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
@@ -7584,16 +7561,6 @@ packages:
       array-includes: 3.1.6
       object.assign: 4.1.4
 
-  /jsx-ast-utils@3.3.4:
-    resolution: {integrity: sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==}
-    engines: {node: '>=4.0'}
-    dependencies:
-      array-includes: 3.1.6
-      array.prototype.flat: 1.3.1
-      object.assign: 4.1.4
-      object.values: 1.1.6
-    dev: true
-
   /keyv@3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
     dependencies:
@@ -8601,7 +8568,7 @@ packages:
       react: '*'
       react-dom: '*'
     dependencies:
-      next: 13.4.8(@babel/core@7.22.6)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.4.8(@babel/core@7.22.1)(@opentelemetry/api@1.4.1)(react-dom@18.2.0)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -8628,7 +8595,7 @@ packages:
       '@opentelemetry/api': 1.4.1
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001489
+      caniuse-lite: 1.0.30001512
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -8671,7 +8638,7 @@ packages:
       '@next/env': 13.4.8
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001489
+      caniuse-lite: 1.0.30001512
       postcss: 8.4.14
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -8811,7 +8778,6 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.2.0
-    dev: false
 
   /object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
@@ -10213,7 +10179,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       internal-slot: 1.0.5
-    dev: false
 
   /stream-transform@2.1.3:
     resolution: {integrity: sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==}
@@ -11104,6 +11069,20 @@ packages:
       builtins: 1.0.3
     dev: false
 
+  /vaul@0.2.0(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-bzqiLz0RzTOewNFRptP9b9Ri5Zrz9cYoK/Qsmo+cbPBJOjiI/Y7Ch3p3BBZKmsmXcQYSp4FsQme9I5DCHxXfeg==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
+
   /vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
     dependencies:
@@ -11368,7 +11347,6 @@ packages:
       is-set: 2.0.2
       is-weakmap: 2.0.1
       is-weakset: 2.0.2
-    dev: false
 
   /which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}

tailwind.config.cjs

@@ -49,6 +49,7 @@ module.exports = {
         },
       },
       borderRadius: {
+        xl: `calc(var(--radius) + 4px)`,
         lg: `var(--radius)`,
         md: `calc(var(--radius) - 2px)`,
         sm: "calc(var(--radius) - 4px)",