@yamada-ui/cli 2.0.0-dev-20250823131710 → 2.0.0-dev-20250824091139

package/dist/index.js

@@ -1,6 +1,5 @@
 import { createRequire } from "node:module";
 import checkNode from "cli-check-node";
-import unhandledError from "cli-handle-unhandled";
 import { Command } from "commander";
 import c from "picocolors";
 import process$1, { env } from "node:process";
@@ -10,7 +9,7 @@ import path from "node:path";
 import { format, promisify } from "node:util";
 import os from "node:os";
 import fs, { existsSync, realpathSync, statSync } from "fs";
-import os$1 from "os";
+import os$1, { tmpdir } from "os";
 import path$1 from "path";
 import fs$1 from "node:fs";
 import tty from "node:tty";
@@ -18,24 +17,25 @@ import semverDiff from "semver/functions/diff.js";
 import semverGt from "semver/functions/gt.js";
 import semver from "semver";
 import boxen from "boxen";
-import { getObject, isArray, isObject, isString, isUndefined, merge, omitObject } from "@yamada-ui/utils";
-import { mkdir, readFile, readdir, writeFile } from "fs/promises";
+import { getObject, isArray, isObject, isString, isUndefined, merge, omitObject, toArray } from "@yamada-ui/utils";
+import { mkdir, mkdtemp, readFile, readdir, writeFile } from "fs/promises";
 import { Listr } from "listr2";
 import ora from "ora";
 import prompts from "prompts";
-import { execa } from "execa";
+import { ExecaError, execa } from "execa";
 import "validate-npm-package-name";
 import YAML from "yamljs";
 import { glob } from "glob";
 import { ESLint } from "eslint";
 import { format as format$1, resolveConfig, resolveConfigFile } from "prettier";
+import { transform } from "sucrase";
 import { build } from "esbuild";
 import nodeEval from "node-eval";
 import { Script } from "vm";
 import { HttpsProxyAgent } from "https-proxy-agent";
 import fetch from "node-fetch";
-import { diffLines } from "diff";
 import { rimraf } from "rimraf";
+import { diffLines } from "diff";
 
 //#region rolldown:runtime
 var __create = Object.create;
@@ -5062,13 +5062,13 @@ var MissingValueError = class extends Error {
 		this.key = key;
 	}
 };
-function pupa(template, data, { ignoreMissing = false, transform = ({ value }) => value } = {}) {
+function pupa(template, data, { ignoreMissing = false, transform: transform$1 = ({ value }) => value } = {}) {
 	if (typeof template !== "string") throw new TypeError(`Expected a \`string\` in the first argument, got \`${typeof template}\``);
 	if (typeof data !== "object") throw new TypeError(`Expected an \`object\` or \`Array\` in the second argument, got \`${typeof data}\``);
 	const replace = (placeholder, key) => {
 		let value = data;
 		for (const property of key.split(".")) value = value ? value[property] : void 0;
-		const transformedValue = transform({
+		const transformedValue = transform$1({
 			value,
 			key
 		});
@@ -5230,7 +5230,6 @@ var dependencies = {
 	"@yamada-ui/utils": "workspace:*",
 	"boxen": "^8.0.1",
 	"cli-check-node": "^1.3.4",
-	"cli-handle-unhandled": "^1.1.2",
 	"commander": "^14.0.0",
 	"diff": "^8.0.2",
 	"esbuild": "^0.25.8",
@@ -5247,6 +5246,7 @@ var dependencies = {
 	"prompts": "^2.4.2",
 	"rimraf": "^6.0.1",
 	"semver": "^7.7.2",
+	"sucrase": "^3.35.0",
 	"validate-npm-package-name": "^6.0.2",
 	"yamljs": "^0.3.0"
 };
@@ -5283,7 +5283,7 @@ var package_default = {
 
 //#endregion
 //#region src/utils/lint.ts
-async function lint(content, { cwd: cwd$3, enabled = true, filePath } = {}) {
+async function lintText(content, { cwd: cwd$3, enabled = true, filePath } = {}) {
 	if (!enabled) return content;
 	try {
 		const eslint = new ESLint({
@@ -5297,10 +5297,21 @@ async function lint(content, { cwd: cwd$3, enabled = true, filePath } = {}) {
 		return content;
 	}
 }
+async function lintFiles(patterns, { cwd: cwd$3, enabled = true } = {}) {
+	if (!enabled) return;
+	try {
+		const eslint = new ESLint({
+			cwd: cwd$3,
+			fix: true
+		});
+		const results = await eslint.lintFiles(patterns);
+		await ESLint.outputFixes(results);
+	} catch {}
+}
 
 //#endregion
 //#region src/utils/prettier.ts
-async function format$2(content, { configPath, enabled = true,...options } = {}) {
+async function formatText(content, { configPath, enabled = true,...options } = {}) {
 	if (!enabled) return content;
 	try {
 		configPath ??= await resolveConfigFile();
@@ -5314,6 +5325,15 @@ async function format$2(content, { configPath, enabled = true,...options } = {})
 		return content;
 	}
 }
+async function formatFiles(patterns, { enabled = true,...options } = {}) {
+	if (!enabled) return;
+	patterns = toArray(patterns);
+	await Promise.all(patterns.map(async (pattern) => {
+		let content = await readFile(pattern, "utf-8");
+		content = await formatText(content, options);
+		await writeFile(pattern, content, "utf-8");
+	}));
+}
 
 //#endregion
 //#region src/utils/fs.ts
@@ -5326,13 +5346,13 @@ async function isWriteable(directory) {
 		return false;
 	}
 }
-async function writeFile$1(path$9, content, { format: formatConfig, lint: lintConfig,...rest } = {}) {
-	content = await lint(content, {
-		cwd: rest.cwd ?? cwd,
-		...lintConfig
+async function writeFile$1(path$9, content, options = {}) {
+	await writeFile(path$9, content, options.encoding ?? "utf-8");
+	await lintFiles(path$9, {
+		cwd: options.cwd ?? cwd,
+		...options.lint
 	});
-	content = await format$2(content, formatConfig);
-	await writeFile(path$9, content, rest.encoding ?? "utf-8");
+	await formatFiles(path$9, options.format);
 }
 async function writeFileSafe(path$9, content, options) {
 	if (path$9.includes("/")) {
@@ -5343,9 +5363,9 @@ async function writeFileSafe(path$9, content, options) {
 }
 async function validateDir(path$9) {
 	const writeable = await isWriteable(path$9);
-	if (!writeable) throw new Error(`The path ${path$9} does not writeable. Please check the permissions.`);
-	if (!existsSync(path$9)) throw new Error(`The path ${path$9} does not exist. Please try again.`);
-	if (!statSync(path$9).isDirectory()) throw new Error(`The path ${path$9} is not a directory. Please try again.`);
+	if (!writeable) throw new Error(`The path ${c.yellow(path$9)} does not writeable. Please check the permissions.`);
+	if (!existsSync(path$9)) throw new Error(`The path ${c.yellow(path$9)} does not exist. Please try again.`);
+	if (!statSync(path$9).isDirectory()) throw new Error(`The path ${c.yellow(path$9)} is not a directory. Please try again.`);
 	return true;
 }
 function timer() {
@@ -5361,28 +5381,31 @@ function timer() {
 		start
 	};
 }
-async function getComponentFiles(componentName, { srcPath }) {
+async function getFiles(pattern) {
 	const files$1 = {};
-	const [dirPath] = await glob(path$1.join(srcPath, "**", componentName));
-	if (!dirPath) return files$1;
+	const [dirPath] = await glob(pattern);
 	const dirents = await readdir(dirPath, { withFileTypes: true });
 	await Promise.all(dirents.map(async (dirent) => {
 		const name$1 = dirent.name;
 		if (dirent.isDirectory()) {
-			const data = await readdir(path$1.join(dirent.parentPath, name$1), { withFileTypes: true });
-			await Promise.all(data.map(async (dirent$1) => {
+			const dirents$1 = await readdir(path$1.join(dirent.parentPath, name$1), { withFileTypes: true });
+			await Promise.all(dirents$1.map(async (dirent$1) => {
 				if (dirent$1.isDirectory()) return;
+				if (dirent$1.name === REGISTRY_FILE_NAME) return;
 				const targetPath = path$1.join(dirent$1.parentPath, dirent$1.name);
-				const data$1 = await readFile(targetPath, "utf-8");
-				files$1[`${name$1}/${dirent$1.name}`] = data$1;
+				const data = await readFile(targetPath, "utf-8");
+				files$1[`${name$1}/${dirent$1.name}`] = data;
 			}));
-		} else {
+		} else if (name$1 !== REGISTRY_FILE_NAME) {
 			const targetPath = path$1.join(dirent.parentPath, dirent.name);
 			const data = await readFile(targetPath, "utf-8");
 			files$1[name$1] = data;
 		}
 	}));
-	return files$1;
+	return {
+		dirPath,
+		files: files$1
+	};
 }
 
 //#endregion
@@ -5404,7 +5427,6 @@ async function getPackageJson(cwd$3) {
 }
 function getVersion({ dependencies: dependencies$1, devDependencies: devDependencies$1 }, nameWithVersion) {
 	const [name$1, version$1] = splitVersion(nameWithVersion);
-	if (!name$1) return;
 	let currentVersion;
 	if (isObject(dependencies$1) && name$1 in dependencies$1) currentVersion = dependencies$1[name$1];
 	else if (isObject(devDependencies$1) && name$1 in devDependencies$1) currentVersion = devDependencies$1[name$1];
@@ -5433,6 +5455,9 @@ function splitVersion(value) {
 	} else return value.split("@");
 }
 function getPackageName(value) {
+	return splitVersion(value)[0];
+}
+function getPackageNameWithVersion(value) {
 	return isObject(value) ? `${value.name}@${value.wanted}` : value;
 }
 function packageAddArgs(packageManager, { dev = false, exact = false } = {}) {
@@ -5480,6 +5505,16 @@ async function installDependencies(dependencies$1, { cwd: cwd$3, dev, exact = tr
 		stdout: "ignore"
 	});
 }
+async function uninstallDependencies(dependencies$1, { cwd: cwd$3 } = {}) {
+	const packageManager = getPackageManager();
+	if (dependencies$1.length) {
+		const command = packageManager === "npm" ? "uninstall" : "remove";
+		await execa(packageManager, [command, ...dependencies$1], {
+			cwd: cwd$3,
+			stdout: "ignore"
+		});
+	}
+}
 async function addWorkspace(cwd$3, workspacePath, config$1) {
 	const packageManager = getPackageManager();
 	switch (packageManager) {
@@ -5513,14 +5548,40 @@ async function addWorkspace(cwd$3, workspacePath, config$1) {
 	}
 }
 
+//#endregion
+//#region src/utils/typescript.ts
+function transformExtension(value, jsx) {
+	if (!jsx) return value;
+	const extension = value.split(".").at(-1);
+	if (extension === "tsx") return value.replace(/\.tsx$/, ".jsx");
+	if (extension === "ts") return value.replace(/\.ts$/, ".js");
+	return value;
+}
+function isTsx(value) {
+	return value.endsWith(".tsx");
+}
+function isJsx(value) {
+	return value.endsWith(".jsx");
+}
+function transformTsxToJsx(content) {
+	return transform(content, {
+		jsxRuntime: "preserve",
+		transforms: ["jsx", "typescript"]
+	}).code;
+}
+function transformTsToJs(content) {
+	return transform(content, { transforms: ["typescript"] }).code;
+}
+
 //#endregion
 //#region src/utils/config.ts
-async function getConfig(cwd$3, configPath, { format: format$3, lint: lint$1 } = {}) {
+async function getConfig(cwd$3, configPath, { format: format$2, jsx, lint } = {}) {
 	try {
-		const data = await readFile(path$1.resolve(cwd$3, configPath), "utf8");
+		const data = await readFile(path$1.resolve(cwd$3, configPath), "utf-8");
 		const userConfig = JSON.parse(data);
-		if (!isUndefined(format$3)) userConfig.format = { enabled: format$3 };
-		if (!isUndefined(lint$1)) userConfig.lint = { enabled: lint$1 };
+		if (!isUndefined(format$2)) userConfig.format = { enabled: format$2 };
+		if (!isUndefined(lint)) userConfig.lint = { enabled: lint };
+		if (!isUndefined(jsx)) userConfig.jsx = jsx;
 		const rootPath = path$1.resolve(cwd$3, userConfig.path ?? (userConfig.monorepo ? DEFAULT_PATH.monorepo : DEFAULT_PATH.polyrepo));
 		const src = existsSync(path$1.resolve(rootPath, "src"));
 		const srcPath = src ? path$1.resolve(rootPath, "src") : rootPath;
@@ -5529,9 +5590,13 @@ async function getConfig(cwd$3, configPath, { format: format$3, lint: lint$1 } =
 			const replacedSection = path$9.replace(/(\.\.\/|\.\/)/g, "").replace(/(^\/|\/$)/g, "");
 			return [section, replacedSection];
 		}));
-		userConfig.lint ??= {};
-		userConfig.lint.filePath ??= path$1.resolve(srcPath, "index.ts");
-		function getSectionAbsolutePath(section) {
+		const indexPath = path$1.resolve(srcPath, transformExtension("index.ts", userConfig.jsx));
+		const registryPath = path$1.resolve(srcPath, REGISTRY_FILE_NAME);
+		if (userConfig.theme?.path) userConfig.theme.path = path$1.resolve(cwd$3, userConfig.theme.path);
+		function isSection(section) {
+			return SECTION_NAMES.includes(section);
+		}
+		function getSectionResolvedPath(section) {
 			return path$1.resolve(srcPath, userConfig[section]?.path ?? DEFAULT_PATH[section]);
 		}
 		function getSectionPath(section) {
@@ -5546,8 +5611,8 @@ async function getConfig(cwd$3, configPath, { format: format$3, lint: lint$1 } =
 				const section = value;
 				return {
 					...userConfig[section],
-					absolutePath: getSectionAbsolutePath(section),
 					path: getSectionPath(section),
+					resolvedPath: getSectionResolvedPath(section),
 					section
 				};
 			} else {
@@ -5556,8 +5621,8 @@ async function getConfig(cwd$3, configPath, { format: format$3, lint: lint$1 } =
 				const section = result;
 				return {
 					...userConfig[section],
-					absolutePath: getSectionAbsolutePath(section),
 					path: getSectionPath(section),
+					resolvedPath: getSectionResolvedPath(section),
 					section
 				};
 			}
@@ -5567,8 +5632,11 @@ async function getConfig(cwd$3, configPath, { format: format$3, lint: lint$1 } =
 			src,
 			cwd: cwd$3,
 			getSection,
-			getSectionAbsolutePath,
 			getSectionPath,
+			getSectionResolvedPath,
+			indexPath,
+			isSection,
+			registryPath,
 			rootPath,
 			srcPath
 		};
@@ -5576,7 +5644,7 @@ async function getConfig(cwd$3, configPath, { format: format$3, lint: lint$1 } =
 		const packageManager = getPackageManager();
 		const { args, command } = packageExecuteCommands(packageManager);
 		const prefix = `${command}${args.length ? ` ${args.join(" ")}` : ""}`;
-		throw new Error(`No config found. Please run ${c.cyan(`${prefix} ${package_default.name}@latest init`)}.`);
+		throw new Error(`No ${c.yellow("config")} found. Please run ${c.cyan(`${prefix} ${package_default.name}@latest init`)}.`);
 	}
 }
 
@@ -5671,7 +5739,7 @@ async function fetchRegistries(names, config$1, { cache: cache$1 = true, depende
 			results[name$1] = await results[name$1];
 			const { dependencies: dependencies$1, dependents, section } = results[name$1];
 			const target = [];
-			if (section === "root" || section === "theme") return;
+			if (!config$1.isSection(section)) return;
 			withDependencies = withDependencies && (config$1[section]?.dependents ?? true);
 			withDependents = withDependents && (config$1[section]?.dependencies ?? false);
 			if (withDependencies && dependents) {
@@ -5691,10 +5759,13 @@ async function fetchRegistries(names, config$1, { cache: cache$1 = true, depende
 	await fetch$1(names);
 	return results;
 }
+async function fetchLocaleRegistry(path$9) {
+	return JSON.parse(await readFile(path$9, "utf-8"));
+}
 async function getGeneratedNameMap(config$1) {
 	const results = await Promise.all(SECTION_NAMES.map(async (section) => {
 		try {
-			const sectionPath = config$1.getSectionAbsolutePath(section);
+			const sectionPath = config$1.getSectionResolvedPath(section);
 			const dirents = await readdir(sectionPath, { withFileTypes: true });
 			return [section, dirents.filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name)];
 		} catch {
@@ -5746,6 +5817,18 @@ function transformContent(targetSection, content, { getSection }, generatedNames
 	});
 	return content;
 }
+async function transformContentWithFormatAndLint(filePath, section, content, config$1, generatedNames) {
+	const { cwd: cwd$3, format: format$2, jsx, lint } = config$1;
+	content = transformContent(section, content, config$1, generatedNames);
+	if (jsx) content = isJsx(filePath) ? transformTsxToJsx(content) : transformTsToJs(content);
+	content = await lintText(content, {
+		...lint,
+		cwd: cwd$3,
+		filePath
+	});
+	content = await formatText(content, format$2);
+	return content;
+}
 function transformTemplateContent(template, data) {
 	let content = template;
 	Object.entries(data).forEach(([key, value]) => {
@@ -5753,20 +5836,7 @@ function transformTemplateContent(template, data) {
 	});
 	return content;
 }
-async function generateSources(dirPath, { section, sources }, config$1, generatedNames = []) {
-	await Promise.all(sources.map(async ({ name: fileName, content, data, template }) => {
-		const targetPath = path$1.resolve(dirPath, fileName);
-		if (content) {
-			content = transformContent(section, content, config$1, generatedNames);
-			await writeFileSafe(targetPath, content, config$1);
-		} else if (template && data) await Promise.all(data.map(async ({ name: fileName$1,...rest }) => {
-			content = transformTemplateContent(template, rest);
-			content = transformContent(section, content, config$1, generatedNames);
-			await writeFileSafe(path$1.resolve(targetPath, fileName$1), content, config$1);
-		}));
-	}));
-}
-function replaceIndex(generatedNames, content, { getSection }) {
+function transformIndex(generatedNames, content, { getSection }) {
 	const matches = content.matchAll(/from\s+["']([^"']+)["']/g);
 	matches.forEach((match) => {
 		const [searchValue, value] = match;
@@ -5791,10 +5861,42 @@ function replaceIndex(generatedNames, content, { getSection }) {
 	});
 	return content;
 }
+async function transformIndexWithFormatAndLint(content, config$1, generatedNames) {
+	const { cwd: cwd$3, format: format$2, indexPath, jsx, lint } = config$1;
+	content = transformIndex(generatedNames, content, config$1);
+	if (jsx) content = transformTsToJs(content);
+	content = await lintText(content, {
+		...lint,
+		cwd: cwd$3,
+		filePath: indexPath
+	});
+	content = await formatText(content, format$2);
+	return content;
+}
+async function generateSource(dirPath, section, { name: fileName, content, data, template }, config$1, generatedNames = []) {
+	fileName = transformExtension(fileName, config$1.jsx);
+	const targetPath = path$1.resolve(dirPath, fileName);
+	if (content) {
+		content = transformContent(section, content, config$1, generatedNames);
+		if (config$1.jsx) content = isJsx(fileName) ? transformTsxToJsx(content) : transformTsToJs(content);
+		await writeFileSafe(targetPath, content, config$1);
+	} else if (template && data) await Promise.all(data.map(async ({ name: fileName$1,...rest }) => {
+		fileName$1 = transformExtension(fileName$1, config$1.jsx);
+		let content$1 = transformTemplateContent(template, rest);
+		content$1 = transformContent(section, content$1, config$1, generatedNames);
+		if (config$1.jsx) content$1 = isJsx(fileName$1) ? transformTsxToJsx(content$1) : transformTsToJs(content$1);
+		await writeFileSafe(path$1.resolve(targetPath, fileName$1), content$1, config$1);
+	}));
+}
+async function generateSources(dirPath, registry, config$1, generatedNames = []) {
+	await Promise.all([...registry.sources.map((source) => generateSource(dirPath, registry.section, source, config$1, generatedNames)), writeFileSafe(path$1.resolve(dirPath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }))]);
+}
 
 //#endregion
 //#region src/constant.ts
 const CONFIG_FILE_NAME = "ui.json";
+const REGISTRY_FILE_NAME = "registry.json";
+const THEME_PATH = "./theme";
 const DEFAULT_PACKAGE_NAME = "@workspaces/ui";
 const REGISTRY_URL = "https://v2.yamada-ui.com/registry/v2";
 const DEFAULT_PATH = {
@@ -5821,14 +5923,22 @@ const DEFAULT_PACKAGE_JSON = {
 	type: "module",
 	private: true,
 	scripts: {},
-	exports: {
+	dependencies: Object.fromEntries(REQUIRED_DEPENDENCIES.map((dependency) => splitVersion(dependency))),
+	devDependencies: Object.fromEntries(REQUIRED_DEV_DEPENDENCIES.map((dependency) => splitVersion(dependency)))
+};
+const DEFAULT_PACKAGE_JSON_EXPORTS = {
+	TSX: {
 		".": "./src/index.ts",
 		"./components/*": "./src/components/*/index.ts",
 		"./hooks/*": "./src/hooks/*/index.ts",
 		"./providers/*": "./src/providers/*/index.ts"
 	},
-	dependencies: Object.fromEntries(REQUIRED_DEPENDENCIES.map((dependency) => splitVersion(dependency))),
-	devDependencies: Object.fromEntries(REQUIRED_DEV_DEPENDENCIES.map((dependency) => splitVersion(dependency)))
+	JSX: {
+		".": "./src/index.js",
+		"./components/*": "./src/components/*/index.js",
+		"./hooks/*": "./src/hooks/*/index.js",
+		"./providers/*": "./src/providers/*/index.js"
+	}
 };
 const TSCONFIG_JSON = {
 	compilerOptions: {
@@ -5863,23 +5973,22 @@ const TSCONFIG_JSON = {
 
 //#endregion
 //#region src/commands/add/index.ts
-const add = new Command("add").description("Add a component to your project").argument("[components...]", "Components to add").option("--cwd <path>", "Current working directory", cwd).option("-c, --config <path>", "Path to the config file", CONFIG_FILE_NAME).option("-o, --overwrite", "overwrite existing files.", false).option("-i, --install", "Install dependencies", false).option("-f, --format", "Format the output files.", false).option("-l, --lint", "Lint the output files.", false).action(async function(componentNames, { config: configPath, cwd: cwd$3, format: format$3, install, lint: lint$1, overwrite }) {
+const add = new Command("add").description("add a component to your project").argument("[components...]", "components to add").option("--cwd <path>", "current working directory", cwd).option("-c, --config <path>", "path to the config file", CONFIG_FILE_NAME).option("-o, --overwrite", "overwrite existing files.", false).option("-i, --install", "install dependencies", false).option("-s, --sequential", "run tasks sequentially.", false).option("-f, --format", "format the output files.").option("-l, --lint", "lint the output files.").action(async function(componentNames, { config: configPath, cwd: cwd$3, format: format$2, install, lint, overwrite, sequential }) {
 	const spinner = ora();
 	try {
 		const { end } = timer();
-		const all = !componentNames.length;
 		spinner.start("Validating directory");
 		await validateDir(cwd$3);
 		spinner.succeed("Validated directory");
 		spinner.start("Fetching config");
 		const config$1 = await getConfig(cwd$3, configPath, {
-			format: format$3,
-			lint: lint$1
+			format: format$2,
+			lint
 		});
 		spinner.succeed("Fetched config");
 		let generatedNameMap;
 		const omittedGeneratedNames = [];
-		if (all) {
+		if (!componentNames.length) {
 			const { proceed } = await prompts({
 				type: "confirm",
 				name: "proceed",
@@ -5919,8 +6028,8 @@ const add = new Command("add").description("Add a component to your project").ar
 		}
 		spinner.start("Fetching registries");
 		const registries = await fetchRegistries(componentNames, config$1, {
-			dependencies: !all,
-			dependents: !all,
+			dependencies: !!componentNames.length,
+			dependents: !!componentNames.length,
 			omit: omittedGeneratedNames
 		});
 		const registryNames = Object.keys(registries);
@@ -5931,10 +6040,20 @@ const add = new Command("add").description("Add a component to your project").ar
 			...dependents?.providers ?? []
 		]).flat().filter((dependent) => omittedGeneratedNames.includes(dependent)))];
 		spinner.succeed("Fetched registries");
+		if (componentNames.length !== registryNames.length) {
+			const colorizedNames = registryNames.map((name$1) => c.yellow(name$1));
+			const { proceed } = await prompts({
+				type: "confirm",
+				name: "proceed",
+				initial: true,
+				message: c.reset(`The following components will be added: ${colorizedNames.join(", ")}. Do you want to add them?`)
+			});
+			if (!proceed) process.exit(0);
+		}
 		const targetNames = [...new Set([...omittedGeneratedNames, ...registryNames])];
 		const tasks = new Listr(Object.entries(registries).map(([name$1, registry]) => {
-			if (registry.section === "root" || registry.section === "theme") return;
-			const sectionPath = config$1.getSectionAbsolutePath(registry.section);
+			if (!config$1.isSection(registry.section)) return;
+			const sectionPath = config$1.getSectionResolvedPath(registry.section);
 			const dirPath = path$1.join(sectionPath, name$1);
 			return {
 				task: async (_, task) => {
@@ -5943,50 +6062,43 @@ const add = new Command("add").description("Add a component to your project").ar
 				},
 				title: `Generating ${c.cyan(name$1)}`
 			};
-		}).filter((task) => !isUndefined(task)), { concurrent: true });
-		if (existsSync(path$1.resolve(config$1.srcPath, "index.ts"))) tasks.add({
-			task: async (_, task) => {
-				const targetPath = path$1.resolve(config$1.srcPath, "index.ts");
-				const content = replaceIndex(targetNames, await readFile(targetPath, "utf-8"), config$1);
-				await writeFileSafe(targetPath, content, config$1);
-				task.title = `Updated ${c.cyan("index.ts")}`;
-			},
-			title: `Updating ${c.cyan("index.ts")}`
-		});
-		else tasks.add({
-			task: async (_, task) => {
-				const { sources } = await fetchRegistry("index");
-				const targetPath = path$1.resolve(config$1.srcPath, "index.ts");
-				const content = replaceIndex(targetNames, sources[0].content, config$1);
-				await writeFileSafe(targetPath, content, config$1);
-				task.title = `Generated ${c.cyan("index.ts")}`;
-			},
-			title: `Generating ${c.cyan("index.ts")}`
-		});
+		}).filter((task) => !isUndefined(task)), { concurrent: !sequential });
 		if (affectedNames.length && generatedNameMap) {
 			if (!overwrite) {
 				const colorizedNames = affectedNames.map((name$1) => c.yellow(name$1));
-				const { update } = await prompts({
+				const { update: update$1 } = await prompts({
 					type: "confirm",
 					name: "update",
 					initial: true,
 					message: c.reset([`The following generated files will be updated: ${colorizedNames.join(", ")}.`, "Do you want to update them?"].join(" "))
 				});
-				if (update) overwrite = update;
+				if (update$1) overwrite = update$1;
 			}
 			if (overwrite) Object.entries(generatedNameMap).forEach(([section, names]) => {
 				names.forEach((name$1) => {
 					if (!affectedNames.includes(name$1)) return;
 					tasks.add({
 						task: async (_, task) => {
-							const sectionPath = config$1.getSectionAbsolutePath(section);
+							const sectionPath = config$1.getSectionResolvedPath(section);
 							const dirPath = path$1.join(sectionPath, name$1);
 							const dirents = await readdir(dirPath, { withFileTypes: true });
 							await Promise.all(dirents.map(async (dirent) => {
-								if (dirent.isDirectory()) return;
-								const targetPath = path$1.join(dirent.parentPath, dirent.name);
-								const content = transformContent(section, await readFile(targetPath, "utf-8"), config$1, targetNames);
-								await writeFileSafe(targetPath, content, config$1);
+								if (dirent.isDirectory()) {
+									const dirents$1 = await readdir(path$1.join(dirent.parentPath, name$1), { withFileTypes: true });
+									await Promise.all(dirents$1.map(async (dirent$1) => {
+										if (dirent$1.isDirectory()) return;
+										if (dirent$1.name === REGISTRY_FILE_NAME) return;
+										const targetPath = path$1.join(dirent$1.parentPath, dirent$1.name);
+										let content = await readFile(targetPath, "utf-8");
+										content = transformContent(section, content, config$1, targetNames);
+										await writeFileSafe(targetPath, content, config$1);
+									}));
+								} else if (dirent.name !== REGISTRY_FILE_NAME) {
+									const targetPath = path$1.join(dirent.parentPath, dirent.name);
+									let content = await readFile(targetPath, "utf-8");
+									content = transformContent(section, content, config$1, targetNames);
+									await writeFileSafe(targetPath, content, config$1);
+								}
 							}));
 							task.title = `Updated ${c.cyan(name$1)}`;
 						},
@@ -5995,6 +6107,26 @@ const add = new Command("add").description("Add a component to your project").ar
 				});
 			});
 		}
+		const indexFileName = transformExtension("index.ts", config$1.jsx);
+		if (existsSync(config$1.indexPath)) tasks.add({
+			task: async (_, task) => {
+				let content = await readFile(config$1.indexPath, "utf-8");
+				content = transformIndex(targetNames, content, config$1);
+				await writeFileSafe(config$1.indexPath, content, config$1);
+				task.title = `Updated ${c.cyan(indexFileName)}`;
+			},
+			title: `Updating ${c.cyan(indexFileName)}`
+		});
+		else tasks.add({
+			task: async (_, task) => {
+				const { sources: [source] } = await fetchRegistry("index");
+				let content = transformIndex(targetNames, source.content, config$1);
+				if (config$1.jsx) content = transformTsToJs(content);
+				await writeFileSafe(config$1.indexPath, content, config$1);
+				task.title = `Generated ${c.cyan(indexFileName)}`;
+			},
+			title: `Generating ${c.cyan(indexFileName)}`
+		});
 		if (dependencies$1.length) {
 			const targetPath = config$1.monorepo ? config$1.rootPath : cwd$3;
 			spinner.start(`Checking ${c.cyan("package.json")} dependencies`);
@@ -6013,7 +6145,7 @@ const add = new Command("add").description("Add a component to your project").ar
 			}
 			if (install) tasks.add({
 				task: async (_, task) => {
-					await installDependencies(notInstalledDependencies.map(getPackageName), { cwd: targetPath });
+					await installDependencies(notInstalledDependencies.map(getPackageNameWithVersion), { cwd: targetPath });
 					task.title = "Installed dependencies";
 				},
 				title: "Installing dependencies"
@@ -6028,125 +6160,464 @@ const add = new Command("add").description("Add a component to your project").ar
 });
 
 //#endregion
-//#region src/commands/diff/index.ts
-async function getData(componentNames, config$1) {
-	const data = {};
-	const registries = {};
-	const tasks = new Listr([...componentNames.map((componentName) => ({
+//#region src/commands/update/print-conflicts.ts
+function printConflicts(conflictMap, config$1) {
+	Object.entries(conflictMap).forEach(([name$1, files$1]) => {
+		if (name$1 === "index") console.log(`- ${c.yellow(transformExtension("index.ts", config$1.jsx))}: ${config$1.indexPath.replace(`${config$1.cwd}/`, "")}`);
+		else {
+			console.log(`- ${name$1}`);
+			Object.entries(files$1).forEach(([fileName, path$9]) => {
+				console.log(`  - ${c.yellow(fileName)}: ${path$9.replace(`${config$1.cwd}/`, "")}`);
+			});
+		}
+	});
+}
+
+//#endregion
+//#region src/commands/diff/get-diff.ts
+function getDirPath(section, name$1, config$1) {
+	return config$1.isSection(section) ? path$1.join(config$1.getSectionResolvedPath(section), name$1) : section === "theme" ? config$1.theme.path : config$1.srcPath;
+}
+async function getDiff(generatedNames, { locale, remote }, config$1, concurrent = true) {
+	const changeMap = {};
+	const dependencyMap = {
+		add: [],
+		remove: [],
+		update: []
+	};
+	const tasks = new Listr(Object.entries(remote).map(([componentName, { dependencies: dependencies$1, section, sources }]) => ({
+		task: async (_, task) => {
+			const localeRegistry = locale[componentName];
+			if (componentName === "index") {
+				const [source] = sources;
+				const fileName = transformExtension(source.name, config$1.jsx);
+				const [remote$1, locale$1] = await Promise.all([transformIndexWithFormatAndLint(source.content, config$1, generatedNames), transformIndexWithFormatAndLint(localeRegistry.sources[0].content, config$1, generatedNames)]);
+				const diff$1 = diffLines(locale$1, remote$1);
+				if (diff$1.length < 2) return;
+				changeMap[componentName] ??= {};
+				changeMap[componentName][fileName] = {
+					diff: diff$1,
+					locale: locale$1,
+					remote: remote$1
+				};
+			} else {
+				const dirPath = getDirPath(section, componentName, config$1);
+				if (dependencies$1 || localeRegistry.dependencies) {
+					const remoteDependencies = dependencies$1?.externals ?? [];
+					const localeDependencies = localeRegistry.dependencies?.externals ?? [];
+					const remotePackageNames = remoteDependencies.map(getPackageName);
+					const localePackageNames = localeDependencies.map(getPackageName);
+					const add$1 = remotePackageNames.filter((name$1) => !localePackageNames.includes(name$1));
+					const remove = localePackageNames.filter((name$1) => !remotePackageNames.includes(name$1));
+					const update$1 = localeDependencies.map((name$1) => {
+						const [packageName, current] = splitVersion(name$1);
+						const remoteDependency = remoteDependencies.find((name$2) => getPackageName(name$2) === packageName);
+						if (!remoteDependency) return;
+						const [, wanted] = splitVersion(remoteDependency);
+						if (current === wanted) return;
+						return {
+							name: packageName,
+							current,
+							wanted
+						};
+					}).filter((data) => !isUndefined(data));
+					dependencyMap.add.push(...add$1);
+					dependencyMap.remove.push(...remove);
+					dependencyMap.update.push(...update$1);
+				}
+				await Promise.all(sources.map(async ({ name: name$1, content, data, template }) => {
+					const source = localeRegistry.sources.find((source$1) => source$1.name === name$1);
+					name$1 = transformExtension(name$1, config$1.jsx);
+					const targetPath = path$1.join(dirPath, name$1);
+					if (content) if (source) {
+						const [remote$1, locale$1] = await Promise.all([transformContentWithFormatAndLint(targetPath, section, content, config$1, generatedNames), transformContentWithFormatAndLint(targetPath, section, source.content, config$1, generatedNames)]);
+						const diff$1 = diffLines(locale$1, remote$1);
+						if (diff$1.length < 2) return;
+						changeMap[componentName] ??= {};
+						changeMap[componentName][name$1] = {
+							diff: diff$1,
+							locale: locale$1,
+							remote: remote$1
+						};
+					} else {
+						let remote$1 = transformContent(section, content, config$1, generatedNames);
+						if (config$1.jsx) remote$1 = isJsx(name$1) ? transformTsxToJsx(remote$1) : transformTsToJs(remote$1);
+						const diff$1 = [{
+							added: true,
+							count: remote$1.length,
+							removed: false,
+							value: remote$1
+						}];
+						changeMap[componentName] ??= {};
+						changeMap[componentName][name$1] = {
+							diff: diff$1,
+							remote: remote$1
+						};
+					}
+					else if (template && data) await Promise.all(data.map(async ({ name: fileName,...remoteRest }) => {
+						const localeData = source?.data?.find(({ name: name$2 }) => name$2 === fileName);
+						fileName = transformExtension(fileName, config$1.jsx);
+						if (localeData) {
+							if (template === source?.template) return;
+							const { name: _name,...localeRest } = localeData;
+							const [remote$1, locale$1] = await Promise.all([transformContentWithFormatAndLint(path$1.join(targetPath, fileName), section, transformTemplateContent(template, remoteRest), config$1, generatedNames), transformContentWithFormatAndLint(path$1.join(targetPath, fileName), section, transformTemplateContent(source.template, localeRest), config$1, generatedNames)]);
+							const diff$1 = diffLines(locale$1, remote$1);
+							if (diff$1.length < 2) return;
+							changeMap[componentName] ??= {};
+							changeMap[componentName][`${name$1}/${fileName}`] = {
+								diff: diff$1,
+								locale: locale$1,
+								remote: remote$1
+							};
+						} else {
+							let remote$1 = transformContent(section, transformTemplateContent(template, remoteRest), config$1, generatedNames);
+							if (config$1.jsx) remote$1 = isJsx(fileName) ? transformTsxToJsx(remote$1) : transformTsToJs(remote$1);
+							const diff$1 = [{
+								added: true,
+								count: remote$1.length,
+								removed: false,
+								value: remote$1
+							}];
+							changeMap[componentName] ??= {};
+							changeMap[componentName][`${name$1}/${fileName}`] = {
+								diff: diff$1,
+								remote: remote$1
+							};
+						}
+					}));
+				}));
+				const removeSources = localeRegistry.sources.filter(({ name: name$1 }) => !sources.some((source) => source.name === name$1));
+				removeSources.forEach(({ name: name$1, content, data, template }) => {
+					if (content) {
+						let locale$1 = transformContent(section, content, config$1, generatedNames);
+						if (config$1.jsx) locale$1 = isJsx(name$1) ? transformTsxToJsx(locale$1) : transformTsToJs(locale$1);
+						const diff$1 = [{
+							added: false,
+							count: locale$1.length,
+							removed: true,
+							value: locale$1
+						}];
+						changeMap[componentName] ??= {};
+						changeMap[componentName][name$1] = {
+							diff: diff$1,
+							locale: locale$1
+						};
+					} else if (template && data) data.forEach(({ name: fileName,...remoteRest }) => {
+						let locale$1 = transformContent(section, transformTemplateContent(template, remoteRest), config$1, generatedNames);
+						if (config$1.jsx) locale$1 = isJsx(fileName) ? transformTsxToJsx(locale$1) : transformTsToJs(locale$1);
+						const diff$1 = [{
+							added: true,
+							count: locale$1.length,
+							removed: false,
+							value: locale$1
+						}];
+						changeMap[componentName] ??= {};
+						changeMap[componentName][`${name$1}/${fileName}`] = {
+							diff: diff$1,
+							locale: locale$1
+						};
+					});
+				});
+			}
+			task.title = `Checked ${c.cyan(componentName)}`;
+		},
+		title: `Checking ${c.cyan(componentName)}`
+	})), { concurrent });
+	await tasks.run();
+	return {
+		changeMap,
+		dependencyMap
+	};
+}
+
+//#endregion
+//#region src/commands/update/update-files.ts
+async function mergeContent(remotePath, localePath, currentPath, fallback) {
+	let content = "";
+	let conflict = false;
+	try {
+		const { stdout } = await execa("diff3", [
+			"-m",
+			remotePath,
+			localePath,
+			currentPath
+		]);
+		content = stdout;
+	} catch (e) {
+		if (e instanceof ExecaError) if (e.stdout) {
+			conflict = true;
+			content = e.stdout;
+		} else content = fallback;
+	}
+	content = content.replaceAll(remotePath, "remote");
+	content = content.replaceAll(localePath, "locale");
+	content = content.replaceAll(currentPath, "current");
+	content = content.replace(/\|\|\|\|\|\|\|[\s\S]*?=======/g, "=======");
+	return {
+		conflict,
+		content
+	};
+}
+async function updateFiles(changeMap, { add: add$1, remove, update: update$1 }, { remote }, config$1, { concurrent = true, install = false } = {}) {
+	const conflictMap = {};
+	const disabledFormatAndLint = {
+		format: { enabled: false },
+		lint: { enabled: false }
+	};
+	const tasks = new Listr(Object.entries(changeMap).map(([componentName, changes]) => ({
+		task: async (_, task) => {
+			const tempDirPath = await mkdtemp(path$1.join(tmpdir(), `yamada-ui-${componentName}-`));
+			const registry = remote[componentName];
+			const dirPath = getDirPath(registry.section, componentName, config$1);
+			try {
+				if (componentName === "index") {
+					const name$1 = config$1.indexPath.split("/").at(-1);
+					const data = changes[name$1];
+					if (!("locale" in data && "remote" in data)) return;
+					const remotePath = path$1.join(tempDirPath, `remote-${name$1}`);
+					const localePath = path$1.join(tempDirPath, `locale-${name$1}`);
+					await Promise.all([writeFileSafe(remotePath, data.remote, disabledFormatAndLint), writeFileSafe(localePath, data.locale, disabledFormatAndLint)]);
+					const { conflict, content: mergedContent } = await mergeContent(remotePath, localePath, config$1.indexPath, data.remote);
+					await writeFileSafe(config$1.indexPath, mergedContent, conflict ? merge(config$1, disabledFormatAndLint) : config$1);
+					if (conflict) {
+						conflictMap[componentName] ??= {};
+						conflictMap[componentName][name$1] = config$1.indexPath;
+					}
+				} else await Promise.all(Object.entries(changes).map(async ([name$1, { ...data }]) => {
+					const currentPath = path$1.join(dirPath, name$1);
+					if ("locale" in data && "remote" in data) {
+						const remotePath = path$1.join(tempDirPath, `remote-${name$1}`);
+						const localePath = path$1.join(tempDirPath, `locale-${name$1}`);
+						await Promise.all([writeFileSafe(remotePath, data.remote, disabledFormatAndLint), writeFileSafe(localePath, data.locale, disabledFormatAndLint)]);
+						const { conflict, content: mergedContent } = await mergeContent(remotePath, localePath, currentPath, data.remote);
+						await writeFileSafe(currentPath, mergedContent, conflict ? merge(config$1, disabledFormatAndLint) : config$1);
+						if (conflict) {
+							conflictMap[componentName] ??= {};
+							conflictMap[componentName][name$1] = currentPath;
+						}
+					} else if ("remote" in data) await writeFileSafe(currentPath, data.remote, config$1);
+					else await rimraf(currentPath);
+				}));
+				await writeFileSafe(path$1.resolve(dirPath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }));
+			} catch {} finally {
+				await rimraf(tempDirPath);
+			}
+			task.title = `Changed ${c.cyan(componentName)}`;
+		},
+		title: `Changing ${c.cyan(componentName)}`
+	})), { concurrent });
+	await tasks.run();
+	if (!install && (add$1.length || remove.length || update$1.length)) {
+		const { install: install$1 } = await prompts({
+			type: "confirm",
+			name: "install",
+			initial: true,
+			message: c.reset("There are dependency updates. Do you want to install them?")
+		});
+		if (!install$1) return conflictMap;
+	}
+	const cwd$3 = config$1.monorepo ? config$1.rootPath : config$1.cwd;
+	remove.push(...update$1.map(({ name: name$1 }) => name$1));
+	add$1.push(...update$1.map(getPackageNameWithVersion));
+	if (remove.length) await uninstallDependencies(remove.map(getPackageName), { cwd: cwd$3 });
+	if (add$1.length) await installDependencies(add$1, { cwd: cwd$3 });
+	return conflictMap;
+}
+
+//#endregion
+//#region src/commands/diff/get-registries-and-files.ts
+async function getRegistriesAndFiles(componentNames, config$1, { concurrent = true, index = false, theme: theme$1 = false } = {}) {
+	const fileMap = {};
+	const registryMap = {
+		locale: {},
+		remote: {}
+	};
+	const tasks = new Listr([], { concurrent });
+	if (index) tasks.add([{
+		task: async (_, task) => {
+			const indexFileName = transformExtension("index.ts", config$1.jsx);
+			fileMap.index = { [indexFileName]: await readFile(config$1.indexPath, "utf-8") };
+			registryMap.locale.index = await fetchLocaleRegistry(config$1.registryPath);
+			task.title = `Got ${c.cyan("index")} file`;
+		},
+		title: `Getting ${c.cyan("index")} file`
+	}, {
+		task: async (_, task) => {
+			registryMap.remote.index = await fetchRegistry("index");
+			task.title = `Fetched ${c.cyan("index")} registry`;
+		},
+		title: `Fetching ${c.cyan("index")} registry`
+	}]);
+	if (theme$1) tasks.add([{
 		task: async (_, task) => {
-			data[componentName] = await getComponentFiles(componentName, config$1);
+			if (!config$1.theme?.path) return;
+			const { dirPath, files: files$1 } = await getFiles(config$1.theme.path);
+			fileMap.theme = files$1;
+			registryMap.locale.theme = await fetchLocaleRegistry(path$1.join(dirPath, REGISTRY_FILE_NAME));
+			task.title = `Got ${c.cyan("theme")} files`;
+		},
+		title: `Getting ${c.cyan("theme")} files`
+	}, {
+		task: async (_, task) => {
+			registryMap.remote.theme = await fetchRegistry("theme");
+			task.title = `Fetched ${c.cyan("theme")} registry`;
+		},
+		title: `Fetching ${c.cyan("theme")} registry`
+	}]);
+	tasks.add(componentNames.map((componentName) => [{
+		task: async (_, task) => {
+			const { dirPath, files: files$1 } = await getFiles(path$1.join(config$1.srcPath, "**", componentName));
+			fileMap[componentName] = files$1;
+			registryMap.locale[componentName] = await fetchLocaleRegistry(path$1.join(dirPath, REGISTRY_FILE_NAME));
 			task.title = `Got ${c.cyan(componentName)} files`;
 		},
 		title: `Getting ${c.cyan(componentName)} files`
-	})), ...componentNames.map((componentName) => ({
+	}, {
 		task: async (_, task) => {
-			registries[componentName] = await fetchRegistry(componentName);
+			registryMap.remote[componentName] = await fetchRegistry(componentName);
 			task.title = `Fetched ${c.cyan(componentName)} registry`;
 		},
 		title: `Fetching ${c.cyan(componentName)} registry`
-	}))], { concurrent: true });
+	}]).flat());
 	await tasks.run();
 	return {
-		data,
-		registries
+		fileMap,
+		registryMap
 	};
 }
-async function getDiff(generatedNames, data, registries, config$1) {
-	const changes = {};
-	await Promise.all(Object.entries(data).map(async ([name$1, files$1]) => {
-		const registry = registries[name$1];
-		if (!registry) return;
-		await Promise.all(Object.entries(files$1).map(async ([fileName, file$1]) => {
-			const registryFile = registry.sources.find(({ name: name$2 }) => name$2 === fileName);
-			if (!registryFile?.content) return;
-			const content = await format$2(transformContent(registry.section, registryFile.content, config$1, generatedNames));
-			const diff$1 = diffLines(file$1, content);
-			if (diff$1.length < 2) return;
-			changes[name$1] ??= {};
-			changes[name$1][fileName] = diff$1;
-		}));
-	}));
-	return changes;
+
+//#endregion
+//#region src/commands/diff/print-diff.ts
+function printDiff(changes, detail = false) {
+	if (!changes) return;
+	Object.entries(changes).forEach(([fileName, { diff: diff$1 }]) => {
+		console.log(`- ${c.cyan(fileName)}`);
+		console.log("");
+		diff$1.forEach(({ added, removed, value }) => {
+			if (added) return process.stdout.write(c.green(value));
+			else if (removed) return process.stdout.write(c.red(value));
+			else if (detail) return process.stdout.write(value);
+		});
+	});
+}
+function printDiffFiles(name$1, changes) {
+	if (!changes) return;
+	console.log(`- ${name$1}`);
+	Object.entries(changes).forEach(([fileName, { diff: diff$1 }]) => {
+		printDiffFile(fileName, diff$1, "  ");
+	});
+}
+function printDiffFile(name$1, diff$1 = [], space = "") {
+	const added = diff$1.reduce((prev, { added: added$1, count }) => {
+		if (added$1) return prev + count;
+		return prev;
+	}, 0);
+	const removed = diff$1.reduce((prev, { count, removed: removed$1 }) => {
+		if (removed$1) return prev + count;
+		return prev;
+	}, 0);
+	if (!added && !removed) return;
+	const result = [`${space}- ${c.cyan(name$1)}`];
+	if (added) result.push(`${c.green(added)} insertions`);
+	if (removed) result.push(`${c.red(removed)} deletions`);
+	console.log(result.join(" "));
 }
-const diff = new Command("diff").description("Check for updates against the registry").argument("[component]", "Component to check").option("--cwd <path>", "Current working directory", cwd).option("-c, --config <path>", "Path to the config file", CONFIG_FILE_NAME).option("-d, --detail", "Show detailed changes", false).action(async function(componentName, { config: configPath, cwd: cwd$3, detail = false }) {
+function printDiffDependencies({ add: add$1, remove, update: update$1 }) {
+	console.log("- dependencies");
+	if (add$1.length) add$1.forEach((name$1) => {
+		console.log(`  - ${c.green(getPackageName(name$1))}`);
+	});
+	if (remove.length) remove.forEach((name$1) => {
+		console.log(`  - ${c.red(getPackageName(name$1))}`);
+	});
+	if (update$1.length) update$1.forEach(({ name: name$1, current, wanted }) => {
+		console.log(`  - ${name$1}@${c.red(current)}->${c.green(wanted)}`);
+	});
+}
+
+//#endregion
+//#region src/commands/diff/index.ts
+const diff = new Command("diff").description("check for updates against the registry").argument("[component]", "component to check").option("--cwd <path>", "current working directory", cwd).option("-c, --config <path>", "path to the config file", CONFIG_FILE_NAME).option("-s, --sequential", "run tasks sequentially.", false).option("-d, --detail", "show detailed changes", false).action(async function(targetName, { config: configPath, cwd: cwd$3, detail, sequential }) {
 	const spinner = ora();
 	try {
 		const { end } = timer();
 		const packageManager = getPackageManager();
 		const { args, command } = packageExecuteCommands(packageManager);
 		const prefix = `${command}${args.length ? ` ${args.join(" ")}` : ""}`;
-		const addCommand = c.cyan(`${prefix} ${package_default.name}@latest add`);
-		const diffCommand = c.cyan(`${prefix} ${package_default.name}@latest diff`);
+		const getCommand = (command$1) => c.cyan(`${prefix} ${package_default.name}@latest ${command$1}`);
 		spinner.start("Validating directory");
 		await validateDir(cwd$3);
 		spinner.succeed("Validated directory");
 		spinner.start("Fetching config");
 		const config$1 = await getConfig(cwd$3, configPath);
 		spinner.succeed("Fetched config");
-		const componentNames = [];
 		spinner.start("Getting generated components");
+		const componentNames = [];
 		const generatedNameMap = await getGeneratedNameMap(config$1);
 		const generatedNames = Object.values(generatedNameMap).flat();
+		const existsTheme = !!config$1.theme?.path && existsSync(config$1.theme.path);
+		let index = targetName === "index";
+		let theme$1 = targetName === "theme";
 		spinner.succeed("Got generated components");
-		if (componentName) if (generatedNames.includes(componentName)) componentNames.push(componentName);
+		if (theme$1 && !existsTheme) throw new Error([
+			`No ${c.yellow("theme")} found.`,
+			`Please run ${getCommand("theme")}`,
+			"to generate it."
+		].join(" "));
+		if (!index && !theme$1) if (targetName) if (generatedNames.includes(targetName)) componentNames.push(targetName);
 		else throw new Error([
-			`No ${c.yellow(componentName)} found in generated components.`,
-			`Please run ${addCommand} ${c.green(componentName)}`,
+			`No ${c.yellow(targetName)} found in generated components.`,
+			`Please run ${getCommand("add")} ${c.green(targetName)}`,
 			"to add it."
 		].join(" "));
-		else componentNames.push(...generatedNames);
-		if (!componentNames.length) throw new Error([
+		else {
+			componentNames.push(...generatedNames);
+			index = true;
+			if (existsTheme) theme$1 = true;
+		}
+		if (!index && !theme$1 && !componentNames.length) throw new Error([
 			"No components found.",
-			`Please run ${addCommand} ${c.green("<component>")}`,
+			`Please run ${getCommand("add")} ${c.green("<component>")}`,
 			"to add components."
 		].join(" "));
-		const { data, registries } = await getData(componentNames, config$1);
-		const changes = await getDiff(generatedNames, data, registries, config$1);
-		const hasChanges = Object.keys(changes).length;
+		const { registryMap } = await getRegistriesAndFiles(componentNames, config$1, {
+			concurrent: !sequential,
+			index,
+			theme: theme$1
+		});
+		const { changeMap, dependencyMap } = await getDiff(generatedNames, registryMap, config$1, !sequential);
+		const hasChanges = !!Object.keys(changeMap).length;
+		const hasDependencyChanges = !!dependencyMap.add.length || !!dependencyMap.remove.length || !!dependencyMap.update.length;
 		console.log("---------------------------------");
-		if (!hasChanges) console.log(c.cyan("No updates found."));
-		else if (componentName) {
-			const diff$1 = changes[componentName];
-			if (!diff$1) return;
-			Object.entries(diff$1).forEach(([fileName, diff$2], index) => {
-				if (!!index) console.log("");
-				console.log(`- ${c.cyan(fileName)}`);
-				console.log("");
-				diff$2.forEach(({ added, removed, value }) => {
-					if (added) return process.stdout.write(c.green(value));
-					else if (removed) return process.stdout.write(c.red(value));
-					else if (detail) return process.stdout.write(value);
-				});
-			});
-		} else {
-			componentNames.forEach((name$1) => {
-				const diff$1 = changes[name$1];
-				if (!diff$1) return;
-				console.log(`- ${name$1}`);
-				Object.entries(diff$1).forEach(([fileName, diff$2]) => {
-					const added = diff$2.reduce((prev, { added: added$1, count }) => {
-						if (added$1) return prev + count;
-						return prev;
-					}, 0);
-					const removed = diff$2.reduce((prev, { count, removed: removed$1 }) => {
-						if (removed$1) return prev + count;
-						return prev;
-					}, 0);
-					console.log(`  - ${c.cyan(fileName)} ${c.green(added)} insertions ${c.red(removed)} deletions`);
+		if (!hasChanges && !hasDependencyChanges) console.log(c.cyan("No updates found."));
+		else {
+			if (targetName) printDiff(changeMap[targetName], detail);
+			else {
+				if (index && changeMap.index) {
+					const indexFileName = transformExtension("index.ts", config$1.jsx);
+					printDiffFile(indexFileName, changeMap.index[indexFileName]?.diff);
+				}
+				if (theme$1 && changeMap.theme) printDiffFiles("theme", changeMap.theme);
+				componentNames.forEach((name$1) => {
+					printDiffFiles(name$1, changeMap[name$1]);
 				});
+			}
+			if (hasDependencyChanges) printDiffDependencies(dependencyMap);
+			console.log("---------------------------------");
+			const { update: update$1 } = await prompts({
+				type: "confirm",
+				name: "update",
+				initial: true,
+				message: c.reset("Do you want to update the files?")
 			});
-			console.log("");
-			console.log(boxen([
-				"Run",
-				c.cyan(diffCommand),
-				c.green("<component>"),
-				"to see the changes."
-			].join(" "), {
-				borderColor: "yellow",
-				borderStyle: "round",
-				padding: 1,
-				textAlignment: "center"
-			}));
+			if (update$1) {
+				const conflictMap = await updateFiles(changeMap, dependencyMap, registryMap, config$1, { concurrent: !sequential });
+				if (Object.keys(conflictMap).length) {
+					console.log("---------------------------------");
+					spinner.warn("There are conflicts. Please check the following files:");
+					printConflicts(conflictMap, config$1);
+				}
+			}
 		}
 		end();
 	} catch (e) {
@@ -6157,17 +6628,18 @@ const diff = new Command("diff").description("Check for updates against the regi
 
 //#endregion
 //#region src/commands/init/index.ts
-const init = new Command("init").description("Initialize your project and install dependencies").option("--cwd <path>", "Current working directory", cwd).option("-c, --config <path>", "Path to the config file", CONFIG_FILE_NAME).option("-o, --overwrite", "Overwrite existing files.", false).action(async function({ config: configPath, cwd: cwd$3, overwrite }) {
+const init = new Command("init").description("initialize your project and install dependencies").option("--cwd <path>", "current working directory", cwd).option("-c, --config <path>", "path to the config file", CONFIG_FILE_NAME).option("-o, --overwrite", "overwrite existing files.", false).option("-j, --jsx", "use jsx instead of tsx", false).action(async function({ config: configPath, cwd: cwd$3, jsx, overwrite }) {
 	const spinner = ora();
 	try {
 		const { end } = timer();
 		await validateDir(cwd$3);
+		const indexFileName = transformExtension("index.ts", jsx);
 		const configFileName = configPath.includes("/") ? configPath.split("/").at(-1) : configPath;
 		const config$1 = { ...DEFAULT_CONFIG };
 		configPath = path$1.resolve(cwd$3, configPath);
 		let dependencies$1;
 		let devDependencies$1;
-		let { src = true, format: format$3 = true, lint: lint$1 = true, monorepo = true, outdir = "", packageName = "" } = await prompts([
+		let { src = true, format: format$2 = true, lint = true, monorepo = true, outdir = "", packageName = "" } = await prompts([
 			{
 				type: "toggle",
 				name: "monorepo",
@@ -6217,10 +6689,11 @@ const init = new Command("init").description("Initialize your project and instal
 		outdir ||= monorepo ? DEFAULT_PATH.monorepo : DEFAULT_PATH.polyrepo;
 		packageName = packageName.replace(/\x17/g, "").trim();
 		packageName ||= DEFAULT_PACKAGE_NAME;
-		config$1.monorepo = monorepo;
+		if (monorepo) config$1.monorepo = monorepo;
+		if (jsx) config$1.jsx = jsx;
 		config$1.path = outdir;
-		config$1.format = { enabled: format$3 };
-		config$1.lint = { enabled: lint$1 };
+		config$1.format = { enabled: format$2 };
+		config$1.lint = { enabled: lint };
 		const { generate } = await prompts({
 			type: "confirm",
 			name: "generate",
@@ -6267,7 +6740,8 @@ const init = new Command("init").description("Initialize your project and instal
 						const targetPath = path$1.resolve(outdirPath, "package.json");
 						const content = JSON.stringify({
 							name: packageName,
-							...DEFAULT_PACKAGE_JSON
+							...DEFAULT_PACKAGE_JSON,
+							exports: DEFAULT_PACKAGE_JSON_EXPORTS[jsx ? "JSX" : "TSX"]
 						});
 						await writeFileSafe(targetPath, content, merge(config$1, { format: { parser: "json" } }));
 						task.title = `Generated ${c.cyan("package.json")}`;
@@ -6276,22 +6750,14 @@ const init = new Command("init").description("Initialize your project and instal
 				},
 				{
 					task: async (_, task) => {
-						const targetPath = path$1.resolve(outdirPath, "tsconfig.json");
-						const content = JSON.stringify({ ...TSCONFIG_JSON });
-						await writeFileSafe(targetPath, content, merge(config$1, { format: { parser: "json" } }));
-						task.title = `Generated ${c.cyan("tsconfig.json")}`;
-					},
-					title: `Generating ${c.cyan("tsconfig.json")}`
-				},
-				{
-					task: async (_, task) => {
-						const targetPath = path$1.resolve(outdirPath, src ? "src" : "", "index.ts");
-						const { sources } = await fetchRegistry("index");
-						const content = sources[0].content;
-						await writeFileSafe(targetPath, content, config$1);
-						task.title = `Generated ${c.cyan("index.ts")}`;
+						const targetPath = path$1.resolve(outdirPath, src ? "src" : "");
+						const registry = await fetchRegistry("index");
+						let content = registry.sources[0].content;
+						if (jsx) content = transformTsToJs(content);
+						await Promise.all([writeFileSafe(path$1.join(targetPath, indexFileName), content, config$1), writeFileSafe(path$1.join(targetPath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }))]);
+						task.title = `Generated ${c.cyan(indexFileName)}`;
 					},
-					title: `Generating ${c.cyan("index.ts")}`
+					title: `Generating ${c.cyan(indexFileName)}`
 				},
 				{
 					task: async (_, task) => {
@@ -6304,6 +6770,15 @@ const init = new Command("init").description("Initialize your project and instal
 					title: "Adding workspace"
 				}
 			], { concurrent: true });
+			if (!jsx) tasks.add({
+				task: async (_, task) => {
+					const targetPath = path$1.resolve(outdirPath, "tsconfig.json");
+					const content = JSON.stringify({ ...TSCONFIG_JSON });
+					await writeFileSafe(targetPath, content, merge(config$1, { format: { parser: "json" } }));
+					task.title = `Generated ${c.cyan("tsconfig.json")}`;
+				},
+				title: `Generating ${c.cyan("tsconfig.json")}`
+			});
 			await tasks.run();
 			const { install } = await prompts({
 				type: "confirm",
@@ -6325,13 +6800,13 @@ const init = new Command("init").description("Initialize your project and instal
 				title: `Checking ${c.cyan("package.json")} dependencies`
 			}, {
 				task: async (_, task) => {
-					const { sources } = await fetchRegistry("index");
-					const targetPath = path$1.resolve(outdirPath, "index.ts");
-					const content = sources[0].content;
-					await writeFileSafe(targetPath, content, config$1);
-					task.title = `Generated ${c.cyan("index.ts")}`;
+					const registry = await fetchRegistry("index");
+					let content = registry.sources[0].content;
+					if (jsx) content = transformTsToJs(content);
+					await Promise.all([writeFileSafe(path$1.resolve(outdirPath, indexFileName), content, config$1), writeFileSafe(path$1.resolve(outdirPath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }))]);
+					task.title = `Generated ${c.cyan(indexFileName)}`;
 				},
-				title: `Generating ${c.cyan("index.ts")}`
+				title: `Generating ${c.cyan(indexFileName)}`
 			}], { concurrent: true });
 			await tasks.run();
 			if (notInstalledDependencies.length || notInstalledDevDependencies.length) {
@@ -6343,8 +6818,8 @@ const init = new Command("init").description("Initialize your project and instal
 					message: c.reset([`The following dependencies are not installed: ${colorizedNames.join(", ")}.`, "Do you want to install them?"].join(" "))
 				});
 				if (install) {
-					dependencies$1 = notInstalledDependencies.map(getPackageName);
-					devDependencies$1 = notInstalledDevDependencies.map(getPackageName);
+					dependencies$1 = notInstalledDependencies.map(getPackageNameWithVersion);
+					devDependencies$1 = notInstalledDevDependencies.map(getPackageNameWithVersion);
 				}
 			}
 		}
@@ -6380,6 +6855,70 @@ const init = new Command("init").description("Initialize your project and instal
 	}
 });
 
+//#endregion
+//#region src/commands/theme/index.ts
+const theme = new Command("theme").description("generate theme to your project").argument("[path]", "path to the theme directory").option("--cwd <path>", "current working directory", cwd).option("-c, --config <path>", "path to the config file", CONFIG_FILE_NAME).option("-o, --overwrite", "overwrite existing directory.", false).option("-j, --js", "use js instead of ts").option("-f, --format", "format the output files.").option("-l, --lint", "lint the output files.").action(async function(themePath, { config: configPath, cwd: cwd$3, format: format$2, js, lint, overwrite }) {
+	const spinner = ora();
+	try {
+		const { end } = timer();
+		spinner.start("Validating directory");
+		await validateDir(cwd$3);
+		spinner.succeed("Validated directory");
+		spinner.start("Fetching config");
+		const config$1 = await getConfig(cwd$3, configPath, {
+			format: format$2,
+			jsx: js,
+			lint
+		});
+		const resolvedPath = themePath ? path$1.resolve(cwd$3, themePath) : config$1.theme?.path ?? path$1.resolve(cwd$3, THEME_PATH);
+		spinner.succeed("Fetched config");
+		if (!overwrite && existsSync(resolvedPath)) {
+			const { overwrite: overwrite$1 } = await prompts({
+				type: "confirm",
+				name: "overwrite",
+				initial: false,
+				message: c.reset(`The directory already exists. Do you want to overwrite it?`)
+			});
+			if (!overwrite$1) process.exit(0);
+			spinner.start("Clearing directory");
+			await rimraf(resolvedPath);
+			spinner.succeed("Cleared directory");
+		}
+		spinner.start("Fetching registry");
+		const registry = await fetchRegistry("theme");
+		spinner.succeed("Fetched registry");
+		const tasks = new Listr([{
+			task: async (_, task) => {
+				await Promise.all([...registry.sources.map(async ({ name: name$1, content }) => {
+					if (!content) return;
+					name$1 = transformExtension(name$1, config$1.jsx);
+					const targetPath = path$1.resolve(resolvedPath, name$1);
+					if (config$1.jsx) content = isTsx(name$1) ? transformTsxToJsx(content) : transformTsToJs(content);
+					await writeFileSafe(targetPath, content, config$1);
+				}), writeFileSafe(path$1.resolve(resolvedPath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }))]);
+				task.title = `Generated theme`;
+			},
+			title: `Generating theme`
+		}, {
+			task: async (_, task) => {
+				const targetPath = path$1.resolve(cwd$3, configPath);
+				const data = await readFile(targetPath, "utf-8");
+				const userConfig = JSON.parse(data);
+				userConfig.theme ??= {};
+				userConfig.theme.path ??= themePath ?? THEME_PATH;
+				await writeFileSafe(targetPath, JSON.stringify(userConfig), merge(config$1, { format: { parser: "json" } }));
+				task.title = `Updated config`;
+			},
+			title: `Updating config`
+		}], { concurrent: true });
+		await tasks.run();
+		end();
+	} catch (e) {
+		if (e instanceof Error) spinner.fail(e.message);
+		else spinner.fail("An unknown error occurred");
+	}
+});
+
 //#endregion
 //#region src/commands/tokens/config.ts
 const config = [
@@ -6441,9 +6980,9 @@ function isTone(value) {
 function print(unions) {
 	return Object.entries(unions).sort(([a], [b]) => a.localeCompare(b)).map(([key, union]) => `${key}: ${!union.length ? "never" : union.map((value) => `"${value}"`).join(" | ")};`).join("\n");
 }
-function extractColorSchemes(theme, colorTokens = []) {
+function extractColorSchemes(theme$1, colorTokens = []) {
 	colorTokens.push("colorScheme.contrast", "colorScheme.fg", "colorScheme.subtle", "colorScheme.muted", "colorScheme.emphasized", "colorScheme.ghost", "colorScheme.solid", "colorScheme.outline");
-	const { colors, semanticTokens } = theme;
+	const { colors, semanticTokens } = theme$1;
 	const colorSchemes = [];
 	Object.entries(colors ?? {}).forEach(([key, value]) => {
 		if (!isTone(value)) return;
@@ -6467,8 +7006,8 @@ function extractColorSchemes(theme, colorTokens = []) {
 	});
 	return { colorSchemes };
 }
-function extractThemeSchemes(theme) {
-	const { themeSchemes } = theme;
+function extractThemeSchemes(theme$1) {
+	const { themeSchemes } = theme$1;
 	return Object.keys(themeSchemes ?? {});
 }
 function extractPaths(target, { maxDepth = Infinity, replaceKey = (key) => key, shouldProcess = () => true } = {}) {
@@ -6488,10 +7027,10 @@ function extractKeys(obj, key) {
 	if (!isObject(property)) return [];
 	return Object.keys(property);
 }
-function generateThemeTokens(theme, { internal = false, theme: { responsive = false } = {} }) {
+function generateThemeTokens(theme$1, { internal = false, theme: { responsive = false } = {} }) {
 	let shouldProcess = () => true;
-	if (responsive && isObject(theme.breakpoints)) {
-		const keys = ["base", ...Object.keys(theme.breakpoints)];
+	if (responsive && isObject(theme$1.breakpoints)) {
+		const keys = ["base", ...Object.keys(theme$1.breakpoints)];
 		const isResponsive = (obj) => {
 			const providedKeys = Object.keys(obj);
 			if (!providedKeys.length) return false;
@@ -6501,15 +7040,15 @@ function generateThemeTokens(theme, { internal = false, theme: { responsive = fa
 		shouldProcess = (obj) => !isResponsive(obj);
 	}
 	const tokens$1 = config.reduce((prev, { key, flatMap = (value) => value, maxDepth, replaceKey, shouldProcess: additionalShouldProcess = () => true }) => {
-		const target = getObject(theme, key);
+		const target = getObject(theme$1, key);
 		prev[key] = [];
 		if (isObject(target) || isArray(target)) prev[key] = extractPaths(target, {
 			maxDepth,
 			replaceKey,
 			shouldProcess: (obj) => shouldProcess(obj) && additionalShouldProcess(obj)
 		}).flatMap(flatMap);
-		if (isObject(theme.semanticTokens)) {
-			const target$1 = getObject(theme.semanticTokens, key);
+		if (isObject(theme$1.semanticTokens)) {
+			const target$1 = getObject(theme$1.semanticTokens, key);
 			const semanticKeys = extractPaths(target$1, {
 				maxDepth,
 				replaceKey,
@@ -6519,16 +7058,16 @@ function generateThemeTokens(theme, { internal = false, theme: { responsive = fa
 		}
 		return prev;
 	}, {});
-	const textStyles = extractKeys(theme, "styles.textStyles");
-	const layerStyles = extractKeys(theme, "styles.layerStyles");
-	const apply = extractPaths(omitObject(theme.styles ?? {}, [
+	const textStyles = extractKeys(theme$1, "styles.textStyles");
+	const layerStyles = extractKeys(theme$1, "styles.layerStyles");
+	const apply = extractPaths(omitObject(theme$1.styles ?? {}, [
 		"globalStyle",
 		"layerStyles",
 		"resetStyle",
 		"textStyles"
 	]), { maxDepth: 2 });
-	const { colorSchemes } = extractColorSchemes(theme, tokens$1.colors);
-	const themeSchemes = extractThemeSchemes(theme);
+	const { colorSchemes } = extractColorSchemes(theme$1, tokens$1.colors);
+	const themeSchemes = extractThemeSchemes(theme$1);
 	if (internal) return [
 		`import type { UsageThemeTokens } from "./system"`,
 		``,
@@ -6562,15 +7101,15 @@ function generateThemeTokens(theme, { internal = false, theme: { responsive = fa
 }
 async function getTheme(path$9, cwd$3) {
 	const { dependencies: dependencies$1, mod } = await getModule(path$9, cwd$3);
-	const theme = mod?.default ?? mod?.theme ?? mod?.customTheme ?? mod?.defaultTheme ?? {};
+	const theme$1 = mod?.default ?? mod?.theme ?? mod?.customTheme ?? mod?.defaultTheme ?? {};
 	const config$1 = mod?.config ?? mod?.customConfig ?? mod?.defaultConfig ?? {};
 	return {
 		config: config$1,
 		dependencies: dependencies$1,
-		theme
+		theme: theme$1
 	};
 }
-const tokens = new Command("tokens").description("Generate theme typings").argument("<path>", "Path to the theme file").option("--cwd <path>", "Current working directory", cwd).option("-c, --config <path>", "Path to the config file", CONFIG_FILE_NAME).option("-o, --out <path>", `Output path`).option("-f, --format", "Format the output file").option("-l, --lint", "Lint the output file").option("--internal", "Generate internal tokens", false).action(async function(inputPath, { config: configPath, cwd: cwd$3, format: format$3, internal, lint: lint$1, out: outPath }) {
+const tokens = new Command("tokens").description("generate theme typings").argument("[path]", "path to the theme file").option("--cwd <path>", "current working directory", cwd).option("-c, --config <path>", "path to the config file", CONFIG_FILE_NAME).option("-o, --out <path>", `output path`).option("-f, --format", "format the output file").option("-l, --lint", "lint the output file").option("--internal", "generate internal tokens", false).action(async function(inputPath, { config: configPath, cwd: cwd$3, format: format$2, internal, lint, out: outPath }) {
 	const spinner = ora();
 	try {
 		const { end } = timer();
@@ -6581,11 +7120,13 @@ const tokens = new Command("tokens").description("Generate theme typings").argum
 		if (!internal) {
 			spinner.start("Fetching config");
 			config$1 = await getConfig(cwd$3, configPath, {
-				format: format$3,
-				lint: lint$1
+				format: format$2,
+				lint
 			});
+			if (config$1.theme?.path) inputPath ??= path$1.resolve(cwd$3, config$1.theme.path, "index.ts");
 			spinner.succeed("Fetched config");
 		}
+		if (!inputPath) throw new Error("No input path provided");
 		spinner.start(`Getting theme`);
 		cwd$3 = path$1.resolve(cwd$3);
 		inputPath = path$1.resolve(cwd$3, inputPath);
@@ -6594,18 +7135,18 @@ const tokens = new Command("tokens").description("Generate theme typings").argum
 			const dirPath = inputPath.split("/").slice(0, -1).join("/");
 			outPath = path$1.join(dirPath, "index.types.ts");
 		} else outPath = path$1.join(cwd$3, "index.types.ts");
-		const { config: themeConfig, theme } = await getTheme(inputPath, cwd$3);
+		const { config: themeConfig, theme: theme$1 } = await getTheme(inputPath, cwd$3);
 		spinner.succeed(`Got theme`);
 		spinner.start(`Generating theme typings`);
-		const content = generateThemeTokens(theme, {
+		const content = generateThemeTokens(theme$1, {
 			...themeConfig,
 			internal
 		});
 		await writeFileSafe(outPath, content, config$1 ? merge(config$1, { lint: { filePath: inputPath } }) : {
 			cwd: cwd$3,
-			format: { enabled: format$3 },
+			format: { enabled: format$2 },
 			lint: {
-				enabled: lint$1,
+				enabled: lint,
 				filePath: inputPath
 			}
 		});
@@ -6617,11 +7158,81 @@ const tokens = new Command("tokens").description("Generate theme typings").argum
 	}
 });
 
+//#endregion
+//#region src/commands/update/index.ts
+const update = new Command("update").description("update components in your project").argument("[components...]", "components to update").option("--cwd <path>", "current working directory", cwd).option("-c, --config <path>", "path to the config file", CONFIG_FILE_NAME).option("-i, --install", "install dependencies", false).option("-s, --sequential", "run tasks sequentially.", false).option("-f, --format", "format the output files.").option("-l, --lint", "lint the output files.").action(async function(targetNames, { config: configPath, cwd: cwd$3, format: format$2, install, lint, sequential }) {
+	const spinner = ora();
+	try {
+		const { end } = timer();
+		const packageManager = getPackageManager();
+		const { args, command } = packageExecuteCommands(packageManager);
+		const prefix = `${command}${args.length ? ` ${args.join(" ")}` : ""}`;
+		const getCommand = (command$1) => c.cyan(`${prefix} ${package_default.name}@latest ${command$1}`);
+		spinner.start("Validating directory");
+		await validateDir(cwd$3);
+		spinner.succeed("Validated directory");
+		spinner.start("Fetching config");
+		const config$1 = await getConfig(cwd$3, configPath, {
+			format: format$2,
+			lint
+		});
+		spinner.succeed("Fetched config");
+		spinner.start("Getting generated components");
+		const all = !targetNames.length;
+		const index = all || targetNames.includes("index");
+		const theme$1 = all || targetNames.includes("theme");
+		const existsTheme = !!config$1.theme?.path && existsSync(config$1.theme.path);
+		if (theme$1 && !existsTheme) throw new Error([
+			`No ${c.yellow("theme")} found.`,
+			`Please run ${getCommand("theme")}`,
+			"to generate it."
+		].join(" "));
+		const omittedTargetNames = targetNames.filter((name$1) => !["index", "theme"].includes(name$1));
+		const componentNames = [];
+		const generatedNameMap = await getGeneratedNameMap(config$1);
+		const generatedNames = Object.values(generatedNameMap).flat();
+		spinner.succeed("Got generated components");
+		if (omittedTargetNames.length) {
+			const notFoundNames = omittedTargetNames.filter((name$1) => !generatedNames.includes(name$1));
+			if (notFoundNames.length) throw new Error([
+				`No ${notFoundNames.map((name$1) => c.yellow(name$1)).join(", ")} found in generated components.`,
+				`Please run ${getCommand("add")} ${notFoundNames.map((name$1) => c.green(name$1)).join(", ")}`,
+				"to add it."
+			].join(" "));
+			else componentNames.push(...omittedTargetNames);
+		} else if (all || !index && !theme$1) componentNames.push(...generatedNames);
+		const { registryMap } = await getRegistriesAndFiles(componentNames, config$1, {
+			concurrent: !sequential,
+			index,
+			theme: theme$1
+		});
+		const { changeMap, dependencyMap } = await getDiff(generatedNames, registryMap, config$1, !sequential);
+		const hasChanges = !!Object.keys(changeMap).length;
+		const hasDependencyChanges = !!dependencyMap.add.length || !!dependencyMap.remove.length || !!dependencyMap.update.length;
+		console.log("---------------------------------");
+		if (!hasChanges && !hasDependencyChanges) console.log(c.cyan("No updates found."));
+		else {
+			const conflictMap = await updateFiles(changeMap, dependencyMap, registryMap, config$1, {
+				concurrent: !sequential,
+				install
+			});
+			if (Object.keys(conflictMap).length) {
+				console.log("---------------------------------");
+				spinner.warn("There are conflicts. Please check the following files:");
+				printConflicts(conflictMap, config$1);
+			}
+		}
+		end();
+	} catch (e) {
+		if (e instanceof Error) spinner.fail(e.message);
+		else spinner.fail("An unknown error occurred");
+	}
+});
+
 //#endregion
 //#region src/index.ts
-async function run() {
+function run() {
 	checkNode("22");
-	await unhandledError();
 	updateNotifier({
 		pkg: package_default,
 		shouldNotifyInNpmScript: true,
@@ -6629,10 +7240,12 @@ async function run() {
 	}).notify({ isGlobal: true });
 	console.log(`\n${c.bold(c.green("Yamada UI CLI"))} v${package_default.version} ${c.dim("by Yamada UI")}`);
 	console.log(`${c.dim(package_default.description)}\n`);
-	const program = new Command("Yamada UI CLI").version(package_default.version, "-v, --version", "Display the version number").usage(`${c.green("<command>")} [options]`);
+	const program = new Command("Yamada UI CLI").version(package_default.version, "-v, --version", "display the version number").usage(`${c.green("<command>")} [options]`);
 	program.addCommand(init);
 	program.addCommand(add);
+	program.addCommand(update);
 	program.addCommand(diff);
+	program.addCommand(theme);
 	program.addCommand(tokens);
 	program.parse();
 }