feat(cli): tree resolver

apps/www/registry/schema.ts

@@ -24,6 +24,7 @@ export const registryItemTypeSchema = z.enum([
   "registry:component",
   "registry:ui",
   "registry:hook",
+  "registry:theme",
 ])
 
 export const registryItemFileSchema = z.union([

apps/www/scripts/build-registry.mts

@@ -382,23 +382,10 @@ async function buildStylesIndex() {
       registryDependencies: ["utils", "hello-block", "command"],
       tailwind: {
         config: {
-          theme: {
-            extend: {
-              borderRadius: {
-                lg: "var(--radius)",
-                md: "calc(var(--radius) - 2px)",
-                sm: "calc(var(--radius) - 4px)",
-              },
-            },
-          },
           plugins: [`require("tailwindcss-animate")`],
         },
       },
-      cssVars: {
-        light: {
-          "--radius": "0.5rem",
-        },
-      },
+      cssVars: {},
       files: [],
     }
 
@@ -670,23 +657,22 @@ async function buildThemes() {
     // ----------------------------------------------------------------------------
     rimraf.sync(path.join(REGISTRY_PATH, "themes"))
     for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
-      const payload = {
+      const payload: Record<string, any> = {
         name: baseColor,
         label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
         cssVars: {},
       }
-
       for (const [mode, values] of Object.entries(colorMapping)) {
-        payload["cssVars"][mode] = {}
+        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
+            payload.cssVars[mode][key] = resolvedColor
 
             const [resolvedBase, scale] = resolvedColor.split("-")
             const color = scale
               ? colorsData[resolvedBase].find(
-                  (item) => item.scale === parseInt(scale)
+                  (item: any) => item.scale === parseInt(scale)
                 )
               : colorsData[resolvedBase]
             if (color) {

packages/cli/src/commands/init.ts

@@ -15,22 +15,15 @@ import { handleError } from "@/src/utils/handle-error"
 import { logger } from "@/src/utils/logger"
 import { preFlight } from "@/src/utils/preflight"
 import {
-  getRegistryBaseColor,
   getRegistryBaseColors,
-  getRegistryItem,
   getRegistryStyles,
   registryResolveItemsTree,
 } from "@/src/utils/registry"
 import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
 import { updateDestinations } from "@/src/utils/updaters/update-destinations"
-import { updateRegistryDependencies } from "@/src/utils/updaters/update-registry-dependencies"
-import {
-  buildTailwindThemeColorsFromCssVars,
-  updateTailwindConfig,
-} from "@/src/utils/updaters/update-tailwind-config"
+import { updateTailwindConfig } from "@/src/utils/updaters/update-tailwind-config"
 import { updateTailwindCss } from "@/src/utils/updaters/update-tailwind-css"
 import { Command } from "commander"
-import deepmerge from "deepmerge"
 import { cyan, green } from "kleur/colors"
 import ora from "ora"
 import prompts from "prompts"
@@ -303,8 +296,6 @@ export async function runInit(config: Config) {
     process.exit(1)
   }
 
-  console.log(tree.tailwind?.config?.theme)
-
   await updateTailwindConfig(tree.tailwind?.config, config)
   await updateTailwindCss(tree.cssVars, config)
   initializersSpinner?.succeed()

packages/cli/src/utils/registry/index.ts

@@ -248,16 +248,24 @@ export async function registryResolveItemsTree(
     return null
   }
 
+  // Add the index item to the beginning of the payload.
   if (names.includes("index")) {
-    const index = await getInitRegistryItem(config)
+    const index = await getRegistryItem(config.style, "index")
     if (index) {
       payload.unshift(index)
     }
   }
 
+  // Fetch the theme item if a base color is provided.
+  if (config.tailwind.baseColor) {
+    const theme = await registryGetTheme(config.tailwind.baseColor)
+    if (theme) {
+      payload.unshift(theme)
+    }
+  }
+
   let tailwind = {}
   payload.forEach((item) => {
-    console.log(item.tailwind?.config?.theme)
     tailwind = deepmerge(tailwind, item.tailwind ?? {})
   })
 
@@ -277,42 +285,39 @@ export async function registryResolveItemsTree(
   })
 }
 
-async function getInitRegistryItem(config: Config) {
-  const [payload, baseColor] = await Promise.all([
-    getRegistryItem(config.style, "index"),
-    getRegistryBaseColor(config.tailwind.baseColor),
-  ])
-
-  if (!payload || !baseColor) {
+export async function registryGetTheme(name: string) {
+  const baseColor = await getRegistryBaseColor(name)
+  if (!baseColor) {
     return null
   }
 
-  // Inline the base color in the tailwind config.
-  // TODO: Remove this when we have theme handling.
-  if (config.tailwind.cssVariables && baseColor) {
-    payload.cssVars = {
-      light: {
-        ...baseColor.cssVars.light,
-        ...payload.cssVars?.light,
-      },
-      dark: {
-        ...baseColor.cssVars.dark,
-        ...payload.cssVars?.dark,
-      },
-    }
-
-    if (payload.tailwind?.config && baseColor.cssVars?.light) {
-      payload.tailwind.config = deepmerge(payload.tailwind.config, {
+  return {
+    name,
+    type: "registry:theme",
+    tailwind: {
+      config: {
         theme: {
           extend: {
+            borderRadius: {
+              lg: "var(--radius)",
+              md: "calc(var(--radius) - 2px)",
+              sm: "calc(var(--radius) - 4px)",
+            },
             colors: buildTailwindThemeColorsFromCssVars(
               baseColor.cssVars.light
             ),
           },
         },
-      })
-    }
-  }
-
-  return payload
+      },
+    },
+    cssVars: {
+      light: {
+        ...baseColor.cssVars.light,
+        radius: "0.5rem",
+      },
+      dark: {
+        ...baseColor.cssVars.dark,
+      },
+    },
+  } satisfies z.infer<typeof registryItemSchema>
 }

packages/cli/src/utils/registry/schema.ts

@@ -12,6 +12,7 @@ export const registryItemTypeSchema = z.enum([
   "registry:component",
   "registry:ui",
   "registry:hook",
+  "registry:theme",
 ])
 
 export const registryItemFileSchema = z.object({