@yamada-ui/cli 2.0.0-dev-20250823155214 → 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";
@@ -29,6 +28,7 @@ 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";
@@ -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"
 };
@@ -5388,14 +5388,15 @@ async function getFiles(pattern) {
 	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 if (!name$1.endsWith(".json")) {
+		} 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;
@@ -5426,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];
@@ -5455,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 } = {}) {
@@ -5545,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$2, lint } = {}) {
+async function getConfig(cwd$3, configPath, { format: format$2, jsx, lint } = {}) {
 	try {
 		const data = await readFile(path$1.resolve(cwd$3, configPath), "utf-8");
 		const userConfig = JSON.parse(data);
 		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;
@@ -5561,13 +5590,13 @@ async function getConfig(cwd$3, configPath, { format: format$2, lint } = {}) {
 			const replacedSection = path$9.replace(/(\.\.\/|\.\/)/g, "").replace(/(^\/|\/$)/g, "");
 			return [section, replacedSection];
 		}));
-		const indexPath = path$1.resolve(srcPath, "index.ts");
+		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 getSectionAbsolutePath(section) {
+		function getSectionResolvedPath(section) {
 			return path$1.resolve(srcPath, userConfig[section]?.path ?? DEFAULT_PATH[section]);
 		}
 		function getSectionPath(section) {
@@ -5582,8 +5611,8 @@ async function getConfig(cwd$3, configPath, { format: format$2, lint } = {}) {
 				const section = value;
 				return {
 					...userConfig[section],
-					absolutePath: getSectionAbsolutePath(section),
 					path: getSectionPath(section),
+					resolvedPath: getSectionResolvedPath(section),
 					section
 				};
 			} else {
@@ -5592,8 +5621,8 @@ async function getConfig(cwd$3, configPath, { format: format$2, lint } = {}) {
 				const section = result;
 				return {
 					...userConfig[section],
-					absolutePath: getSectionAbsolutePath(section),
 					path: getSectionPath(section),
+					resolvedPath: getSectionResolvedPath(section),
 					section
 				};
 			}
@@ -5603,8 +5632,8 @@ async function getConfig(cwd$3, configPath, { format: format$2, lint } = {}) {
 			src,
 			cwd: cwd$3,
 			getSection,
-			getSectionAbsolutePath,
 			getSectionPath,
+			getSectionResolvedPath,
 			indexPath,
 			isSection,
 			registryPath,
@@ -5736,7 +5765,7 @@ async function fetchLocaleRegistry(path$9) {
 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 {
@@ -5789,8 +5818,9 @@ function transformContent(targetSection, content, { getSection }, generatedNames
 	return content;
 }
 async function transformContentWithFormatAndLint(filePath, section, content, config$1, generatedNames) {
-	const { cwd: cwd$3, format: format$2, lint } = config$1;
+	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,
@@ -5832,23 +5862,29 @@ function transformIndex(generatedNames, content, { getSection }) {
 	return content;
 }
 async function transformIndexWithFormatAndLint(content, config$1, generatedNames) {
-	const { cwd: cwd$3, format: format$2, lint } = config$1;
+	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: config$1.indexPath
+		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 }) => {
-		const content$1 = transformContent(section, transformTemplateContent(template, rest), config$1, generatedNames);
+		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);
 	}));
 }
@@ -5887,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: {
@@ -6009,7 +6053,7 @@ const add = new Command("add").description("add a component to your project").ar
 		const targetNames = [...new Set([...omittedGeneratedNames, ...registryNames])];
 		const tasks = new Listr(Object.entries(registries).map(([name$1, registry]) => {
 			if (!config$1.isSection(registry.section)) return;
-			const sectionPath = config$1.getSectionAbsolutePath(registry.section);
+			const sectionPath = config$1.getSectionResolvedPath(registry.section);
 			const dirPath = path$1.join(sectionPath, name$1);
 			return {
 				task: async (_, task) => {
@@ -6035,14 +6079,26 @@ const add = new Command("add").description("add a component to your project").ar
 					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)}`;
 						},
@@ -6051,22 +6107,25 @@ 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) => {
-				const content = transformIndex(targetNames, await readFile(config$1.indexPath, "utf-8"), config$1);
+				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("index.ts")}`;
+				task.title = `Updated ${c.cyan(indexFileName)}`;
 			},
-			title: `Updating ${c.cyan("index.ts")}`
+			title: `Updating ${c.cyan(indexFileName)}`
 		});
 		else tasks.add({
 			task: async (_, task) => {
 				const { sources: [source] } = await fetchRegistry("index");
-				const content = transformIndex(targetNames, source.content, config$1);
+				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("index.ts")}`;
+				task.title = `Generated ${c.cyan(indexFileName)}`;
 			},
-			title: `Generating ${c.cyan("index.ts")}`
+			title: `Generating ${c.cyan(indexFileName)}`
 		});
 		if (dependencies$1.length) {
 			const targetPath = config$1.monorepo ? config$1.rootPath : cwd$3;
@@ -6086,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"
@@ -6104,7 +6163,7 @@ const add = new Command("add").description("add a component to your project").ar
 //#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("index.ts")}: ${config$1.indexPath.replace(`${config$1.cwd}/`, "")}`);
+		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]) => {
@@ -6116,69 +6175,159 @@ function printConflicts(conflictMap, config$1) {
 
 //#endregion
 //#region src/commands/diff/get-diff.ts
-function getFilePath(section, name$1, fileName, config$1) {
-	return config$1.isSection(section) ? path$1.join(config$1.getSectionAbsolutePath(section), name$1, fileName) : path$1.join(config$1.srcPath, section === "theme" ? name$1 : "", fileName);
+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 changes = {};
-	const tasks = new Listr(Object.entries(remote).map(([componentName, { section, sources }]) => ({
+	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 = source.name;
-				const [remoteContent, localeContent] = await Promise.all([transformIndexWithFormatAndLint(source.content, config$1, generatedNames), transformIndexWithFormatAndLint(localeRegistry.sources[0].content, config$1, generatedNames)]);
-				const diff$1 = diffLines(localeContent, remoteContent);
+				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;
-				changes[componentName] ??= {};
-				changes[componentName][fileName] = diff$1;
-			} else await Promise.all(sources.map(async ({ name: name$1, content, data, template }) => {
-				const filePath = getFilePath(section, componentName, name$1, config$1);
-				const source = localeRegistry.sources.find((source$1) => source$1.name === name$1);
-				if (content) if (source) {
-					const [remoteContent, localeContent] = await Promise.all([transformContentWithFormatAndLint(filePath, section, content, config$1, generatedNames), transformContentWithFormatAndLint(filePath, section, source.content, config$1, generatedNames)]);
-					const diff$1 = diffLines(localeContent, remoteContent);
-					if (diff$1.length < 2) return;
-					changes[componentName] ??= {};
-					changes[componentName][name$1] = diff$1;
-				} else {
-					const remoteContent = transformContent(section, content, config$1, generatedNames);
-					changes[componentName] ??= {};
-					changes[componentName][name$1] = [{
-						added: true,
-						count: remoteContent.length,
-						removed: false,
-						value: remoteContent
-					}];
+				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);
 				}
-				else if (template && data) await Promise.all(data.map(async ({ name: fileName,...remoteRest }) => {
-					const localeData = source?.data?.find(({ name: name$2 }) => name$2 === fileName);
-					if (localeData) {
-						if (template === source?.template) return;
-						const { name: _name,...localeRest } = localeData;
-						const [remoteContent, localeContent] = await Promise.all([transformContentWithFormatAndLint(path$1.join(filePath, fileName), section, transformTemplateContent(template, remoteRest), config$1, generatedNames), transformContentWithFormatAndLint(path$1.join(filePath, fileName), section, transformTemplateContent(source.template, localeRest), config$1, generatedNames)]);
-						const diff$1 = diffLines(localeContent, remoteContent);
+				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;
-						changes[componentName] ??= {};
-						changes[componentName][`${name$1}/${fileName}`] = diff$1;
+						changeMap[componentName] ??= {};
+						changeMap[componentName][name$1] = {
+							diff: diff$1,
+							locale: locale$1,
+							remote: remote$1
+						};
 					} else {
-						const remoteContent = transformContent(section, transformTemplateContent(template, remoteRest), config$1, generatedNames);
-						changes[componentName] ??= {};
-						changes[componentName][`${name$1}/${fileName}`] = [{
+						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: remoteContent.length,
+							count: remote$1.length,
 							removed: false,
-							value: remoteContent
+							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 changes;
+	return {
+		changeMap,
+		dependencyMap
+	};
 }
 
 //#endregion
@@ -6209,78 +6358,47 @@ async function mergeContent(remotePath, localePath, currentPath, fallback) {
 		content
 	};
 }
-async function updateFiles(generatedNames, { locale, remote }, config$1, { concurrent = true, install = false } = {}) {
+async function updateFiles(changeMap, { add: add$1, remove, update: update$1 }, { remote }, config$1, { concurrent = true, install = false } = {}) {
 	const conflictMap = {};
-	const notInstalledDependencies = [];
-	const shouldUninstallDependencies = [];
 	const disabledFormatAndLint = {
 		format: { enabled: false },
 		lint: { enabled: false }
 	};
-	const tasks = new Listr(Object.entries(remote).map(([componentName, { dependencies: dependencies$1, section, sources }]) => ({
+	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 localeRegistry = locale[componentName];
-			if (dependencies$1 || localeRegistry.dependencies) {
-				const add$1 = dependencies$1?.externals.filter((name$1) => !localeRegistry.dependencies?.externals.includes(name$1)) ?? [];
-				const remove = localeRegistry.dependencies?.externals.filter((name$1) => !dependencies$1?.externals.includes(name$1)) ?? [];
-				notInstalledDependencies.push(...add$1);
-				shouldUninstallDependencies.push(...remove);
-			}
+			const registry = remote[componentName];
+			const dirPath = getDirPath(registry.section, componentName, config$1);
 			try {
 				if (componentName === "index") {
-					const [source] = sources;
-					const fileName = source.name;
-					const remotePath = path$1.join(tempDirPath, `remote-${fileName}`);
-					const localePath = path$1.join(tempDirPath, `locale-${fileName}`);
-					const [remoteContent, localeContent] = await Promise.all([transformIndexWithFormatAndLint(sources[0].content, config$1, generatedNames), transformIndexWithFormatAndLint(localeRegistry.sources[0].content, config$1, generatedNames)]);
-					await Promise.all([writeFileSafe(remotePath, remoteContent, disabledFormatAndLint), writeFileSafe(localePath, localeContent, disabledFormatAndLint)]);
-					const { conflict, content: mergedContent } = await mergeContent(remotePath, localePath, config$1.indexPath, remoteContent);
+					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][fileName] = config$1.indexPath;
+						conflictMap[componentName][name$1] = config$1.indexPath;
 					}
-				} else await Promise.all(sources.map(async ({ name: name$1, content, data, template }) => {
-					const currentPath = getFilePath(section, componentName, name$1, config$1);
-					const source = localeRegistry.sources.find((source$1) => source$1.name === name$1);
-					if (content) if (source) {
+				} 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}`);
-						const [remoteContent, localeContent] = await Promise.all([transformContentWithFormatAndLint(currentPath, section, content, config$1, generatedNames), transformContentWithFormatAndLint(currentPath, section, source.content, config$1, generatedNames)]);
-						await Promise.all([writeFileSafe(remotePath, remoteContent, disabledFormatAndLint), writeFileSafe(localePath, localeContent, disabledFormatAndLint)]);
-						const { conflict, content: mergedContent } = await mergeContent(remotePath, localePath, currentPath, remoteContent);
+						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 {
-						const remoteContent = transformContent(section, content, config$1, generatedNames);
-						await writeFileSafe(currentPath, remoteContent, config$1);
-					}
-					else if (template && data) await Promise.all(data.map(async ({ name: fileName,...remoteRest }) => {
-						const currentFilePath = path$1.join(currentPath, fileName);
-						const localeData = source?.data?.find(({ name: name$2 }) => name$2 === fileName);
-						if (localeData) {
-							if (template === source.template) return;
-							const { name: _name,...localeRest } = localeData;
-							const remotePath = path$1.join(tempDirPath, `remote-${name$1}-${fileName}`);
-							const localePath = path$1.join(tempDirPath, `locale-${name$1}-${fileName}`);
-							const [remoteContent, localeContent] = await Promise.all([transformContentWithFormatAndLint(currentFilePath, section, transformTemplateContent(template, remoteRest), config$1, generatedNames), transformContentWithFormatAndLint(currentFilePath, section, transformTemplateContent(source.template, localeRest), config$1, generatedNames)]);
-							await Promise.all([writeFileSafe(remotePath, remoteContent, disabledFormatAndLint), writeFileSafe(localePath, localeContent, disabledFormatAndLint)]);
-							const { conflict, content: mergedContent } = await mergeContent(remotePath, localePath, currentFilePath, remoteContent);
-							await writeFileSafe(currentFilePath, mergedContent, conflict ? merge(config$1, disabledFormatAndLint) : config$1);
-							if (conflict) {
-								conflictMap[componentName] ??= {};
-								conflictMap[componentName][`${name$1}/${fileName}`] = currentFilePath;
-							}
-						} else {
-							const remoteContent = transformContent(section, transformTemplateContent(template, remoteRest), config$1, generatedNames);
-							await writeFileSafe(currentFilePath, remoteContent, config$1);
-						}
-					}));
+					} 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);
 			}
@@ -6289,7 +6407,7 @@ async function updateFiles(generatedNames, { locale, remote }, config$1, { concu
 		title: `Changing ${c.cyan(componentName)}`
 	})), { concurrent });
 	await tasks.run();
-	if (!install && (notInstalledDependencies.length || shouldUninstallDependencies.length)) {
+	if (!install && (add$1.length || remove.length || update$1.length)) {
 		const { install: install$1 } = await prompts({
 			type: "confirm",
 			name: "install",
@@ -6299,8 +6417,10 @@ async function updateFiles(generatedNames, { locale, remote }, config$1, { concu
 		if (!install$1) return conflictMap;
 	}
 	const cwd$3 = config$1.monorepo ? config$1.rootPath : config$1.cwd;
-	if (shouldUninstallDependencies.length) await uninstallDependencies(shouldUninstallDependencies.map((value) => splitVersion(value)[0]), { cwd: cwd$3 });
-	if (notInstalledDependencies.length) await installDependencies(notInstalledDependencies, { cwd: cwd$3 });
+	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;
 }
 
@@ -6308,21 +6428,22 @@ async function updateFiles(generatedNames, { locale, remote }, config$1, { concu
 //#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 registries = {
+	const registryMap = {
 		locale: {},
 		remote: {}
 	};
 	const tasks = new Listr([], { concurrent });
 	if (index) tasks.add([{
 		task: async (_, task) => {
-			fileMap.index = { "index.ts": await readFile(config$1.indexPath, "utf-8") };
-			registries.locale.index = await fetchLocaleRegistry(config$1.registryPath);
+			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) => {
-			registries.remote.index = await fetchRegistry("index");
+			registryMap.remote.index = await fetchRegistry("index");
 			task.title = `Fetched ${c.cyan("index")} registry`;
 		},
 		title: `Fetching ${c.cyan("index")} registry`
@@ -6332,13 +6453,13 @@ async function getRegistriesAndFiles(componentNames, config$1, { concurrent = tr
 			if (!config$1.theme?.path) return;
 			const { dirPath, files: files$1 } = await getFiles(config$1.theme.path);
 			fileMap.theme = files$1;
-			registries.locale.theme = await fetchLocaleRegistry(path$1.join(dirPath, REGISTRY_FILE_NAME));
+			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) => {
-			registries.remote.theme = await fetchRegistry("theme");
+			registryMap.remote.theme = await fetchRegistry("theme");
 			task.title = `Fetched ${c.cyan("theme")} registry`;
 		},
 		title: `Fetching ${c.cyan("theme")} registry`
@@ -6347,13 +6468,13 @@ async function getRegistriesAndFiles(componentNames, config$1, { concurrent = tr
 		task: async (_, task) => {
 			const { dirPath, files: files$1 } = await getFiles(path$1.join(config$1.srcPath, "**", componentName));
 			fileMap[componentName] = files$1;
-			registries.locale[componentName] = await fetchLocaleRegistry(path$1.join(dirPath, REGISTRY_FILE_NAME));
+			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`
 	}, {
 		task: async (_, task) => {
-			registries.remote[componentName] = await fetchRegistry(componentName);
+			registryMap.remote[componentName] = await fetchRegistry(componentName);
 			task.title = `Fetched ${c.cyan(componentName)} registry`;
 		},
 		title: `Fetching ${c.cyan(componentName)} registry`
@@ -6361,41 +6482,57 @@ async function getRegistriesAndFiles(componentNames, config$1, { concurrent = tr
 	await tasks.run();
 	return {
 		fileMap,
-		registries
+		registryMap
 	};
 }
 
 //#endregion
 //#region src/commands/diff/print-diff.ts
-function printDiff(diff$1, detail = false) {
-	if (!diff$1) return;
-	Object.entries(diff$1).forEach(([fileName, diff$2]) => {
+function printDiff(changes, detail = false) {
+	if (!changes) return;
+	Object.entries(changes).forEach(([fileName, { diff: diff$1 }]) => {
 		console.log(`- ${c.cyan(fileName)}`);
 		console.log("");
-		diff$2.forEach(({ added, removed, value }) => {
+		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, diff$1) {
-	if (!diff$1) return;
+function printDiffFiles(name$1, changes) {
+	if (!changes) return;
 	console.log(`- ${name$1}`);
-	Object.entries(diff$1).forEach(([fileName, changes]) => {
-		printDiffFile(fileName, changes, "  ");
+	Object.entries(changes).forEach(([fileName, { diff: diff$1 }]) => {
+		printDiffFile(fileName, diff$1, "  ");
 	});
 }
-function printDiffFile(name$1, changes = [], space = "") {
-	const added = changes.reduce((prev, { added: added$1, count }) => {
+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 = changes.reduce((prev, { count, removed: removed$1 }) => {
+	const removed = diff$1.reduce((prev, { count, removed: removed$1 }) => {
 		if (removed$1) return prev + count;
 		return prev;
 	}, 0);
-	console.log(`${space}- ${c.cyan(name$1)} ${c.green(added)} insertions ${c.red(removed)} deletions`);
+	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(" "));
+}
+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
@@ -6443,24 +6580,29 @@ const diff = new Command("diff").description("check for updates against the regi
 			`Please run ${getCommand("add")} ${c.green("<component>")}`,
 			"to add components."
 		].join(" "));
-		const { registries } = await getRegistriesAndFiles(componentNames, config$1, {
+		const { registryMap } = await getRegistriesAndFiles(componentNames, config$1, {
 			concurrent: !sequential,
 			index,
 			theme: theme$1
 		});
-		const changes = await getDiff(generatedNames, registries, config$1, !sequential);
-		const hasChanges = Object.keys(changes).length;
+		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."));
+		if (!hasChanges && !hasDependencyChanges) console.log(c.cyan("No updates found."));
 		else {
-			if (targetName) printDiff(changes[targetName], detail);
+			if (targetName) printDiff(changeMap[targetName], detail);
 			else {
-				if (index) printDiffFile("index.ts", changes.index?.["index.ts"]);
-				if (theme$1) printDiffFiles("theme", changes.theme);
+				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, changes[name$1]);
+					printDiffFiles(name$1, changeMap[name$1]);
 				});
 			}
+			if (hasDependencyChanges) printDiffDependencies(dependencyMap);
 			console.log("---------------------------------");
 			const { update: update$1 } = await prompts({
 				type: "confirm",
@@ -6469,12 +6611,7 @@ const diff = new Command("diff").description("check for updates against the regi
 				message: c.reset("Do you want to update the files?")
 			});
 			if (update$1) {
-				const changeNames = Object.keys(changes);
-				const omittedRegistries = {
-					locale: Object.fromEntries(Object.entries(registries.locale).filter(([name$1]) => changeNames.includes(name$1))),
-					remote: Object.fromEntries(Object.entries(registries.remote).filter(([name$1]) => changeNames.includes(name$1)))
-				};
-				const conflictMap = await updateFiles(generatedNames, omittedRegistries, config$1, { concurrent: !sequential });
+				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:");
@@ -6491,11 +6628,12 @@ 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);
@@ -6551,7 +6689,8 @@ 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$2 };
 		config$1.lint = { enabled: lint };
@@ -6601,31 +6740,24 @@ 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")}`;
 					},
 					title: `Generating ${c.cyan("package.json")}`
 				},
-				{
-					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" : "");
 						const registry = await fetchRegistry("index");
-						const content = registry.sources[0].content;
-						await Promise.all([writeFileSafe(path$1.join(targetPath, "index.ts"), 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("index.ts")}`;
+						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) => {
@@ -6638,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",
@@ -6660,11 +6801,12 @@ const init = new Command("init").description("initialize your project and instal
 			}, {
 				task: async (_, task) => {
 					const registry = await fetchRegistry("index");
-					const content = registry.sources[0].content;
-					await Promise.all([writeFileSafe(path$1.resolve(outdirPath, "index.ts"), 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("index.ts")}`;
+					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) {
@@ -6676,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);
 				}
 			}
 		}
@@ -6715,7 +6857,7 @@ 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("-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, lint, overwrite }) {
+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();
@@ -6725,11 +6867,12 @@ const theme = new Command("theme").description("generate theme to your project")
 		spinner.start("Fetching config");
 		const config$1 = await getConfig(cwd$3, configPath, {
 			format: format$2,
+			jsx: js,
 			lint
 		});
-		const themeAbsolutePath = themePath ? path$1.resolve(cwd$3, themePath) : config$1.theme?.path ?? path$1.resolve(cwd$3, THEME_PATH);
+		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(themeAbsolutePath)) {
+		if (!overwrite && existsSync(resolvedPath)) {
 			const { overwrite: overwrite$1 } = await prompts({
 				type: "confirm",
 				name: "overwrite",
@@ -6738,7 +6881,7 @@ const theme = new Command("theme").description("generate theme to your project")
 			});
 			if (!overwrite$1) process.exit(0);
 			spinner.start("Clearing directory");
-			await rimraf(themeAbsolutePath);
+			await rimraf(resolvedPath);
 			spinner.succeed("Cleared directory");
 		}
 		spinner.start("Fetching registry");
@@ -6748,9 +6891,11 @@ const theme = new Command("theme").description("generate theme to your project")
 			task: async (_, task) => {
 				await Promise.all([...registry.sources.map(async ({ name: name$1, content }) => {
 					if (!content) return;
-					const targetPath = path$1.resolve(themeAbsolutePath, name$1);
+					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(themeAbsolutePath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }))]);
+				}), writeFileSafe(path$1.resolve(resolvedPath, REGISTRY_FILE_NAME), JSON.stringify(registry), merge(config$1, { format: { parser: "json" } }))]);
 				task.title = `Generated theme`;
 			},
 			title: `Generating theme`
@@ -7056,22 +7201,18 @@ const update = new Command("update").description("update components in your proj
 			].join(" "));
 			else componentNames.push(...omittedTargetNames);
 		} else if (all || !index && !theme$1) componentNames.push(...generatedNames);
-		const { registries } = await getRegistriesAndFiles(componentNames, config$1, {
+		const { registryMap } = await getRegistriesAndFiles(componentNames, config$1, {
 			concurrent: !sequential,
 			index,
 			theme: theme$1
 		});
-		const changes = await getDiff(generatedNames, registries, config$1, !sequential);
-		const hasChanges = Object.keys(changes).length;
+		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."));
+		if (!hasChanges && !hasDependencyChanges) console.log(c.cyan("No updates found."));
 		else {
-			const changeNames = Object.keys(changes);
-			const omittedRegistries = {
-				locale: Object.fromEntries(Object.entries(registries.locale).filter(([name$1]) => changeNames.includes(name$1))),
-				remote: Object.fromEntries(Object.entries(registries.remote).filter(([name$1]) => changeNames.includes(name$1)))
-			};
-			const conflictMap = await updateFiles(generatedNames, omittedRegistries, config$1, {
+			const conflictMap = await updateFiles(changeMap, dependencyMap, registryMap, config$1, {
 				concurrent: !sequential,
 				install
 			});
@@ -7090,9 +7231,8 @@ const update = new Command("update").description("update components in your proj
 
 //#endregion
 //#region src/index.ts
-async function run() {
+function run() {
 	checkNode("22");
-	await unhandledError();
 	updateNotifier({
 		pkg: package_default,
 		shouldNotifyInNpmScript: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/cli",
   "type": "module",
-  "version": "2.0.0-dev-20250823155214",
+  "version": "2.0.0-dev-20250824091139",
   "description": "The official CLI for Yamada UI projects",
   "keywords": [
     "theme",
@@ -38,7 +38,6 @@
   "dependencies": {
     "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",
@@ -55,6 +54,7 @@
     "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",
     "@yamada-ui/utils": "2.0.0"