@srcroot/ui 0.0.64 → 1.0.0

package/dist/index.js

@@ -5,18 +5,43 @@ import { Command } from "commander";
 import chalk3 from "chalk";
 
 // src/cli/services/project-initializer.ts
-import fs4 from "fs-extra";
-import path4 from "path";
+import fs5 from "fs-extra";
+import path5 from "path";
 import ora from "ora";
 import prompts from "prompts";
-import { fileURLToPath as fileURLToPath3 } from "url";
+import { fileURLToPath as fileURLToPath4 } from "url";
 import { execa } from "execa";
 
 // src/cli/services/theme-service.ts
-import fs from "fs-extra";
+import fs2 from "fs-extra";
+import path2 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+
+// src/cli/utils/get-registry-path.ts
 import path from "path";
+import fs from "fs-extra";
 import { fileURLToPath } from "url";
-var __dirname = path.dirname(fileURLToPath(import.meta.url));
+function getRegistryPath() {
+  const __filename2 = fileURLToPath(import.meta.url);
+  const __dirname5 = path.dirname(__filename2);
+  const pathsToCheck = [
+    path.resolve(__dirname5, "..", "src", "registry"),
+    // Production case
+    path.resolve(__dirname5, "..", "..", "registry"),
+    // Development case
+    path.resolve(process.cwd(), "src", "registry")
+    // Fallback/CWD case
+  ];
+  for (const p of pathsToCheck) {
+    if (fs.existsSync(p)) {
+      return p;
+    }
+  }
+  return path.resolve(__dirname5, "..", "src", "registry");
+}
+
+// src/cli/services/theme-service.ts
+var __dirname2 = path2.dirname(fileURLToPath2(import.meta.url));
 var THEME_METADATA = {
   slate: { name: "Slate", description: "Cool gray with strong blue undertones (default)" },
   neutral: { name: "Neutral", description: "Pure gray, no undertones" },
@@ -33,18 +58,18 @@ var THEME_METADATA = {
 var ThemeService = class {
   registryThemesPath;
   constructor() {
-    this.registryThemesPath = path.resolve(__dirname, "..", "src", "registry", "themes");
+    this.registryThemesPath = path2.join(getRegistryPath(), "themes");
   }
   /**
    * Get list of available themes from registry/themes/v3/*.css (v3 as primary source)
    */
   getAvailableThemes() {
     const themes = [];
-    const v3Path = path.join(this.registryThemesPath, "v3");
-    if (!fs.existsSync(v3Path)) {
+    const v3Path = path2.join(this.registryThemesPath, "v3");
+    if (!fs2.existsSync(v3Path)) {
       return themes;
     }
-    const files = fs.readdirSync(v3Path);
+    const files = fs2.readdirSync(v3Path);
     for (const file of files) {
       if (file.endsWith(".css")) {
         const themeName = file.replace(".css", "");
@@ -66,25 +91,23 @@ var ThemeService = class {
    */
   async getThemeCss(themeName, isTailwind4) {
     const versionFolder = isTailwind4 ? "v4" : "v3";
-    const themeFilePath = path.join(this.registryThemesPath, versionFolder, `${themeName}.css`);
-    if (!fs.existsSync(themeFilePath)) {
+    const themeFilePath = path2.join(this.registryThemesPath, versionFolder, `${themeName}.css`);
+    if (!fs2.existsSync(themeFilePath)) {
       throw new Error(`Theme file not found: ${themeFilePath}`);
     }
-    const content = await fs.readFile(themeFilePath, "utf-8");
+    const content = await fs2.readFile(themeFilePath, "utf-8");
     return content;
   }
 };
 
 // src/cli/utils/templates.ts
-var TAILWIND_CONFIG = `import type { Config } from "tailwindcss"
+function getTailwindConfig(framework) {
+  const contentPaths = framework === "vite" ? ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"] : ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}"];
+  return `import type { Config } from "tailwindcss"
 
 const config: Config = {
   darkMode: ["class"],
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
+  content: ${JSON.stringify(contentPaths, null, 6).replace(/\n/g, "\n    ").replace(/\[$/, "    [").replace(/\]$/, "  ]")},
   theme: {
     extend: {
       colors: {
@@ -148,16 +171,18 @@ const config: Config = {
 
 export default config
 `;
+}
+var TAILWIND_CONFIG = getTailwindConfig("nextjs");
 
 // src/cli/utils/get-package-manager.ts
-import fs2 from "fs";
-import path2 from "path";
+import fs3 from "fs";
+import path3 from "path";
 function getPackageManager(cwd) {
   const dir = cwd || process.cwd();
-  if (fs2.existsSync(path2.join(dir, "bun.lockb"))) return "bun";
-  if (fs2.existsSync(path2.join(dir, "pnpm-lock.yaml"))) return "pnpm";
-  if (fs2.existsSync(path2.join(dir, "yarn.lock"))) return "yarn";
-  if (fs2.existsSync(path2.join(dir, "package-lock.json"))) return "npm";
+  if (fs3.existsSync(path3.join(dir, "bun.lockb"))) return "bun";
+  if (fs3.existsSync(path3.join(dir, "pnpm-lock.yaml"))) return "pnpm";
+  if (fs3.existsSync(path3.join(dir, "yarn.lock"))) return "yarn";
+  if (fs3.existsSync(path3.join(dir, "package-lock.json"))) return "npm";
   const userAgent = process.env.npm_config_user_agent;
   if (userAgent) {
     if (userAgent.startsWith("yarn")) return "yarn";
@@ -168,19 +193,19 @@ function getPackageManager(cwd) {
 }
 
 // src/cli/utils/get-package-info.ts
-import path3 from "path";
-import fs3 from "fs-extra";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import path4 from "path";
+import fs4 from "fs-extra";
+import { fileURLToPath as fileURLToPath3 } from "url";
 function getPackageInfo() {
-  const __filename2 = fileURLToPath2(import.meta.url);
-  const __dirname5 = path3.dirname(__filename2);
+  const __filename2 = fileURLToPath3(import.meta.url);
+  const __dirname5 = path4.dirname(__filename2);
   const pathsToCheck = [
-    path3.resolve(__dirname5, "..", "package.json"),
-    path3.resolve(__dirname5, "..", "..", "..", "package.json")
+    path4.resolve(__dirname5, "..", "package.json"),
+    path4.resolve(__dirname5, "..", "..", "..", "package.json")
   ];
   for (const pkgPath of pathsToCheck) {
-    if (fs3.existsSync(pkgPath)) {
-      return fs3.readJSONSync(pkgPath);
+    if (fs4.existsSync(pkgPath)) {
+      return fs4.readJSONSync(pkgPath);
     }
   }
   return { version: "0.0.0" };
@@ -204,7 +229,7 @@ var logger = {
 };
 
 // src/cli/services/project-initializer.ts
-var __dirname3 = path4.dirname(fileURLToPath3(import.meta.url));
+var __dirname3 = path5.dirname(fileURLToPath4(import.meta.url));
 var ProjectInitializer = class {
   options;
   config = {};
@@ -223,47 +248,60 @@ var ProjectInitializer = class {
     this.printSuccess();
   }
   async validateEnvironment() {
-    const cwd = path4.resolve(this.options.cwd);
-    const packageJsonPath = path4.join(cwd, "package.json");
-    if (!fs4.existsSync(packageJsonPath)) {
+    const cwd = path5.resolve(this.options.cwd);
+    const packageJsonPath = path5.join(cwd, "package.json");
+    if (!fs5.existsSync(packageJsonPath)) {
       logger.error("Error: No package.json found. Please run this in a project directory.");
       process.exit(1);
     }
-    const pkg = await fs4.readJson(packageJsonPath);
+    const pkg = await fs5.readJson(packageJsonPath);
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     if (!allDeps["react"]) {
       logger.error("Error: React not found in dependencies. Please initialize this in a React project.");
       process.exit(1);
     }
   }
+  detectFramework(cwd) {
+    if (fs5.existsSync(path5.join(cwd, "next.config.ts")) || fs5.existsSync(path5.join(cwd, "next.config.js")) || fs5.existsSync(path5.join(cwd, "next.config.mjs"))) {
+      return "nextjs";
+    }
+    if (fs5.existsSync(path5.join(cwd, "vite.config.ts")) || fs5.existsSync(path5.join(cwd, "vite.config.js")) || fs5.existsSync(path5.join(cwd, "vite.config.mjs"))) {
+      return "vite";
+    }
+    if (fs5.existsSync(path5.join(cwd, "src", "app"))) {
+      return "nextjs";
+    }
+    return "unknown";
+  }
   async detectConfiguration() {
-    const cwd = path4.resolve(this.options.cwd);
+    const cwd = path5.resolve(this.options.cwd);
     const packageManager = getPackageManager(cwd);
     const installCmd = packageManager === "npm" ? "install" : "add";
-    const pkg = await fs4.readJson(path4.join(cwd, "package.json"));
+    const framework = this.detectFramework(cwd);
+    const pkg = await fs5.readJson(path5.join(cwd, "package.json"));
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     const tailwindVersion = allDeps["tailwindcss"] || "";
     const isTailwind4 = tailwindVersion.includes("^4") || tailwindVersion.startsWith("4") || allDeps["@tailwindcss/postcss"];
-    const hasSrc = fs4.existsSync(path4.join(cwd, "src"));
-    const srcPath = hasSrc ? path4.join(cwd, "src") : cwd;
-    const appPath = path4.join(srcPath, "app");
-    const pagesPath = path4.join(srcPath, "pages");
-    const hasAppDir = fs4.existsSync(appPath);
-    const hasPagesDir = fs4.existsSync(pagesPath);
-    const libDir = path4.join(srcPath, "lib");
-    const componentsDir = path4.join(srcPath, "components", "ui");
+    const hasSrc = fs5.existsSync(path5.join(cwd, "src"));
+    const srcPath = hasSrc ? path5.join(cwd, "src") : cwd;
+    const appPath = path5.join(srcPath, "app");
+    const pagesPath = path5.join(srcPath, "pages");
+    const hasAppDir = fs5.existsSync(appPath);
+    const hasPagesDir = fs5.existsSync(pagesPath);
+    const libDir = path5.join(srcPath, "lib");
+    const componentsDir = path5.join(srcPath, "components", "ui");
     let globalsPath = "";
     if (hasAppDir) {
-      if (fs4.existsSync(path4.join(appPath, "globals.css"))) globalsPath = path4.join(appPath, "globals.css");
-      else if (fs4.existsSync(path4.join(appPath, "global.css"))) globalsPath = path4.join(appPath, "global.css");
-      else globalsPath = path4.join(appPath, "globals.css");
+      if (fs5.existsSync(path5.join(appPath, "globals.css"))) globalsPath = path5.join(appPath, "globals.css");
+      else if (fs5.existsSync(path5.join(appPath, "global.css"))) globalsPath = path5.join(appPath, "global.css");
+      else globalsPath = path5.join(appPath, "globals.css");
     } else if (hasPagesDir) {
-      const stylesPath = path4.join(srcPath, "styles");
-      if (fs4.existsSync(path4.join(stylesPath, "globals.css"))) globalsPath = path4.join(stylesPath, "globals.css");
-      else if (fs4.existsSync(path4.join(stylesPath, "global.css"))) globalsPath = path4.join(stylesPath, "global.css");
-      else globalsPath = path4.join(stylesPath, "globals.css");
+      const stylesPath = path5.join(srcPath, "styles");
+      if (fs5.existsSync(path5.join(stylesPath, "globals.css"))) globalsPath = path5.join(stylesPath, "globals.css");
+      else if (fs5.existsSync(path5.join(stylesPath, "global.css"))) globalsPath = path5.join(stylesPath, "global.css");
+      else globalsPath = path5.join(stylesPath, "globals.css");
     } else {
-      globalsPath = path4.join(srcPath, "globals.css");
+      globalsPath = path5.join(srcPath, "globals.css");
     }
     this.config = {
       cwd,
@@ -278,7 +316,8 @@ var ProjectInitializer = class {
       hasPagesDir,
       libDir,
       componentsDir,
-      globalsPath
+      globalsPath,
+      framework
     };
   }
   async promptUser() {
@@ -311,13 +350,13 @@ var ProjectInitializer = class {
     const spinner = ora("Creating project structure...").start();
     const cfg = this.config;
     try {
-      await fs4.ensureDir(cfg.libDir);
-      await fs4.ensureDir(cfg.componentsDir);
-      const utilsPath = path4.join(cfg.libDir, "utils.ts");
-      const registryUtilsPath = path4.resolve(__dirname3, "..", "src", "registry", "lib", "utils.ts");
+      await fs5.ensureDir(cfg.libDir);
+      await fs5.ensureDir(cfg.componentsDir);
+      const utilsPath = path5.join(cfg.libDir, "utils.ts");
+      const registryUtilsPath = path5.join(getRegistryPath(), "lib", "utils.ts");
       let utilsContent = "";
-      if (fs4.existsSync(registryUtilsPath)) {
-        utilsContent = await fs4.readFile(registryUtilsPath, "utf-8");
+      if (fs5.existsSync(registryUtilsPath)) {
+        utilsContent = await fs5.readFile(registryUtilsPath, "utf-8");
       } else {
         utilsContent = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
@@ -328,15 +367,15 @@ export function cn(...inputs: ClassValue[]) {
 `;
         spinner.warn(`Could not find registry/utils.ts, using fallback content.`);
       }
-      await fs4.writeFile(utilsPath, utilsContent);
-      spinner.succeed(`Created ${path4.relative(cfg.cwd, utilsPath)}`);
+      await fs5.writeFile(utilsPath, utilsContent);
+      spinner.succeed(`Created ${path5.relative(cfg.cwd, utilsPath)}`);
       spinner.start(`Setting up ${cfg.selectedTheme} theme...`);
-      const stylesDir = path4.dirname(cfg.globalsPath);
-      await fs4.ensureDir(stylesDir);
+      const stylesDir = path5.dirname(cfg.globalsPath);
+      await fs5.ensureDir(stylesDir);
       try {
         const cssContent = await this.themeService.getThemeCss(cfg.selectedTheme, cfg.isTailwind4);
-        await fs4.writeFile(cfg.globalsPath, cssContent);
-        spinner.succeed(`Updated ${path4.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
+        await fs5.writeFile(cfg.globalsPath, cssContent);
+        spinner.succeed(`Updated ${path5.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
       } catch (error) {
         spinner.fail(`Failed to load theme: ${cfg.selectedTheme}`);
         console.error(error);
@@ -344,8 +383,8 @@ export function cn(...inputs: ClassValue[]) {
       }
       if (!cfg.isTailwind4) {
         spinner.start("Setting up Tailwind config...");
-        const tailwindConfigPath = path4.join(cfg.cwd, "tailwind.config.ts");
-        await fs4.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        const tailwindConfigPath = path5.join(cfg.cwd, "tailwind.config.ts");
+        await fs5.writeFile(tailwindConfigPath, getTailwindConfig(cfg.framework));
         spinner.succeed(`Created tailwind.config.ts`);
       }
       const packageInfo = getPackageInfo();
@@ -353,11 +392,11 @@ export function cn(...inputs: ClassValue[]) {
         version: packageInfo.version || "0.0.0",
         theme: cfg.selectedTheme,
         paths: {
-          components: path4.relative(cfg.cwd, cfg.componentsDir),
-          utils: path4.relative(cfg.cwd, utilsPath)
+          components: path5.relative(cfg.cwd, cfg.componentsDir),
+          utils: path5.relative(cfg.cwd, utilsPath)
         }
       };
-      await fs4.writeJSON(path4.join(cfg.cwd, "srcroot.config.json"), configObj, { spaces: 2 });
+      await fs5.writeJSON(path5.join(cfg.cwd, "srcroot.config.json"), configObj, { spaces: 2 });
       spinner.succeed("Created srcroot.config.json");
     } catch (error) {
       spinner.fail("Failed to initialize project");
@@ -378,8 +417,8 @@ export function cn(...inputs: ClassValue[]) {
       deps.push("tailwindcss-animate");
     }
     try {
-      const packageJsonPath = path4.join(cfg.cwd, "package.json");
-      const pkg = await fs4.readJson(packageJsonPath);
+      const packageJsonPath = path5.join(cfg.cwd, "package.json");
+      const pkg = await fs5.readJson(packageJsonPath);
       const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
       const missingDeps = deps.filter((dep) => !allDeps[dep]);
       if (missingDeps.length === 0) {
@@ -414,15 +453,15 @@ async function init(options) {
 }
 
 // src/cli/commands/add.ts
-import path6 from "path";
+import path7 from "path";
 
 // src/cli/services/component-adder.ts
-import fs5 from "fs-extra";
-import path5 from "path";
+import fs6 from "fs-extra";
+import path6 from "path";
 import ora2 from "ora";
 import prompts2 from "prompts";
 import { execa as execa2 } from "execa";
-import { fileURLToPath as fileURLToPath4 } from "url";
+import { fileURLToPath as fileURLToPath5 } from "url";
 
 // src/cli/registry.ts
 var REGISTRY = {
@@ -898,15 +937,50 @@ var REGISTRY = {
 };
 
 // src/cli/services/component-adder.ts
-var __dirname4 = path5.dirname(fileURLToPath4(import.meta.url));
+var __dirname4 = path6.dirname(fileURLToPath5(import.meta.url));
+var FRAMEWORK_SPECIFIC_COMPONENTS = {
+  "google-analytics": "analytics/google-analytics.vite.tsx",
+  "google-tag-manager": "analytics/google-tag-manager.vite.tsx",
+  "meta-pixel": "analytics/meta-pixel.vite.tsx",
+  "microsoft-clarity": "analytics/microsoft-clarity.vite.tsx",
+  "tiktok-pixel": "analytics/tiktok-pixel.vite.tsx",
+  "theme-switcher": "ui/theme-switcher.vite.tsx"
+};
 var ComponentAdder = class {
   cwd;
   options;
+  framework = "unknown";
   constructor(cwd, options) {
     this.cwd = cwd;
     this.options = options;
+    this.framework = this.detectFramework();
+  }
+  detectFramework() {
+    if (fs6.existsSync(path6.join(this.cwd, "next.config.ts")) || fs6.existsSync(path6.join(this.cwd, "next.config.js")) || fs6.existsSync(path6.join(this.cwd, "next.config.mjs"))) {
+      return "nextjs";
+    }
+    if (fs6.existsSync(path6.join(this.cwd, "vite.config.ts")) || fs6.existsSync(path6.join(this.cwd, "vite.config.js")) || fs6.existsSync(path6.join(this.cwd, "vite.config.mjs"))) {
+      return "vite";
+    }
+    if (fs6.existsSync(path6.join(this.cwd, "src", "app"))) {
+      return "nextjs";
+    }
+    return "unknown";
+  }
+  transformForVite(name, content) {
+    content = content.replace(/^"use client"[;\n\r]*/m, "");
+    content = content.replace(/import\s*{\s*useTheme\s*}\s*from\s*"next-themes"\s*;?\n?/g, "");
+    content = content.replace(/import\s*{\s*ThemeProvider\s*}\s*from\s*"next-themes"\s*;?\n?/g, "");
+    if (name === "theme-switcher") {
+    }
+    return content.trimStart();
   }
   async add(components) {
+    if (this.framework === "vite") {
+      logger.info("Detected Vite project - using Vite-compatible components");
+    } else if (this.framework === "nextjs") {
+      logger.info("Detected Next.js project - using Next.js components");
+    }
     components = await this.resolveComponents(components);
     const { valid, invalid } = this.validateComponents(components);
     if (invalid.length > 0) {
@@ -1013,20 +1087,20 @@ Please manually install: ${packages.join(" ")}`);
   }
   async copyComponents(components) {
     const spinner = ora2("Adding components...").start();
-    const hasSrc = fs5.existsSync(path5.join(this.cwd, "src"));
-    const srcPath = hasSrc ? path5.join(this.cwd, "src") : this.cwd;
-    const componentsDir = path5.join(srcPath, "components", "ui");
+    const hasSrc = fs6.existsSync(path6.join(this.cwd, "src"));
+    const srcPath = hasSrc ? path6.join(this.cwd, "src") : this.cwd;
+    const componentsDir = path6.join(srcPath, "components", "ui");
     try {
-      await fs5.ensureDir(componentsDir);
+      await fs6.ensureDir(componentsDir);
       let overwriteAll = false;
       let skipAll = false;
       if (!this.options.overwrite) {
         const conflicts = [];
         for (const name of components) {
           const comp = REGISTRY[name];
-          const fileName = path5.basename(comp.file);
-          const targetPath = path5.join(componentsDir, fileName);
-          if (fs5.existsSync(targetPath)) {
+          const fileName = path6.basename(comp.file);
+          const targetPath = path6.join(componentsDir, fileName);
+          if (fs6.existsSync(targetPath)) {
             conflicts.push(fileName);
           }
         }
@@ -1055,11 +1129,12 @@ Please manually install: ${packages.join(" ")}`);
         }
         spinner.start("Adding components...");
       }
+      let addedCount = 0;
       for (const name of components) {
         const comp = REGISTRY[name];
-        const fileName = path5.basename(comp.file);
-        const targetPath = path5.join(componentsDir, fileName);
-        if (fs5.existsSync(targetPath) && !this.options.overwrite && !overwriteAll) {
+        const fileName = path6.basename(comp.file);
+        const targetPath = path6.join(componentsDir, fileName);
+        if (fs6.existsSync(targetPath) && !this.options.overwrite && !overwriteAll) {
           if (skipAll) {
             spinner.info(`Skipped ${fileName}`);
             continue;
@@ -1078,13 +1153,28 @@ Please manually install: ${packages.join(" ")}`);
           }
           spinner.start("Adding components...");
         }
-        const registryPath = path5.resolve(__dirname4, "..", "..", "registry", comp.file);
-        if (!fs5.existsSync(registryPath)) {
+        let registryPath = path6.resolve(getRegistryPath(), comp.file);
+        let content = "";
+        if (this.framework === "vite") {
+          const viteVariant = FRAMEWORK_SPECIFIC_COMPONENTS[name];
+          if (viteVariant) {
+            const vitePath = path6.resolve(getRegistryPath(), viteVariant);
+            if (fs6.existsSync(vitePath)) {
+              registryPath = vitePath;
+              spinner.info(`Using Vite-specific ${fileName}`);
+            }
+          }
+        }
+        if (!fs6.existsSync(registryPath)) {
           spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
           continue;
         }
-        const content = await fs5.readFile(registryPath, "utf-8");
-        await fs5.writeFile(targetPath, content);
+        content = await fs6.readFile(registryPath, "utf-8");
+        if (this.framework === "vite") {
+          content = this.transformForVite(name, content);
+        }
+        await fs6.writeFile(targetPath, content);
+        addedCount++;
         if (components.length > 10) {
           spinner.text = `Adding ${fileName}...`;
         } else {
@@ -1092,7 +1182,7 @@ Please manually install: ${packages.join(" ")}`);
         }
       }
       if (components.length > 10) {
-        spinner.succeed(`Added ${components.length} components`);
+        spinner.succeed(`Added ${addedCount} components`);
       }
     } catch (error) {
       spinner.fail("Failed to add components");
@@ -1104,7 +1194,7 @@ Please manually install: ${packages.join(" ")}`);
 
 // src/cli/commands/add.ts
 async function add(components, options) {
-  const cwd = path6.resolve(options.cwd);
+  const cwd = path7.resolve(options.cwd);
   const adder = new ComponentAdder(cwd, options);
   await adder.add(components);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.64",
+  "version": "1.0.0",
   "description": "A UI library with polymorphic, accessible React components",
   "author": "Shifaul Islam",
   "license": "MIT",
@@ -71,4 +71,4 @@
       "optional": true
     }
   }
-}
+}

package/src/registry/analytics/google-analytics.vite.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from "react"
+import type { FC } from "react"
+
+interface GoogleAnalyticsProps {
+  gaIds: string[];
+}
+
+const GoogleAnalytics: FC<GoogleAnalyticsProps> = ({ gaIds }) => {
+  useEffect(() => {
+    if (gaIds.length === 0) return
+
+    const gtmScript = document.createElement("script")
+    gtmScript.async = true
+    gtmScript.src = `https://www.googletagmanager.com/gtag/js?id=${gaIds[0]}`
+    document.head.appendChild(gtmScript)
+
+    const inlineScript = document.createElement("script")
+    inlineScript.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      ${gaIds.map((id) => `gtag('config', '${id}', { page_path: window.location.pathname });`).join("\n")}
+    `
+    document.head.appendChild(inlineScript)
+
+    return () => {
+      document.head.removeChild(gtmScript)
+      document.head.removeChild(inlineScript)
+    }
+  }, [gaIds])
+
+  return null
+}
+
+export default GoogleAnalytics

package/src/registry/analytics/google-tag-manager.vite.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from "react"
+import type { FC, ReactNode } from "react"
+
+interface GTMContainer {
+  gtmId: string;
+  tagServerUrl?: string;
+}
+
+interface GoogleTagManagerProps {
+  containers: GTMContainer[];
+}
+
+const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
+  useEffect(() => {
+    const defaultServer = "https://www.googletagmanager.com"
+
+    const scriptsMap = containers.reduce((map, container) => {
+      const server = container.tagServerUrl || defaultServer;
+      if (!map.has(server)) {
+        map.set(server, []);
+      }
+      map.get(server)!.push(container.gtmId);
+      return map;
+    }, new Map<string, string[]>()); const scriptElements: HTMLScriptElement[] = []
+
+    Array.from(scriptsMap.entries()).forEach(([server, ids]) => {
+      ids.forEach((id) => {
+        const script = document.createElement("script")
+        script.innerHTML = `
+          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s);j.async=true;j.src="${server}/gtm.js?"+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${id}');
+        `
+        script.id = `gtm-script-${server}-${id}`
+        document.head.appendChild(script)
+        scriptElements.push(script)
+      })
+    })
+
+    return () => {
+      scriptElements.forEach((script) => {
+        if (document.head.contains(script)) {
+          document.head.removeChild(script)
+        }
+      })
+    }
+  }, [containers])
+
+  return null
+}
+
+export default GoogleTagManager

package/src/registry/analytics/meta-pixel.vite.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from "react"
+import type { FC } from "react"
+
+interface MetaPixelProps {
+  pixelIds: string[];
+}
+
+const MetaPixel: FC<MetaPixelProps> = ({ pixelIds }) => {
+  useEffect(() => {
+    if (pixelIds.length === 0) return
+
+    const script = document.createElement("script")
+    script.innerHTML = `
+      !function(f,b,e,v,n,t,s)
+      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+      n.queue=[];t=b.createElement(e);t.async=!0;
+      t.src=v;s=b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t,s)}(window, document,'script',
+      'https://connect.facebook.net/en_US/fbevents.js');
+      ${pixelIds.map((id) => `fbq('init', '${id}');`).join("\n")}
+      fbq('track', 'PageView');
+    `
+    script.id = "fb-script-multi"
+    document.head.appendChild(script)
+
+    return () => {
+      if (document.head.contains(script)) {
+        document.head.removeChild(script)
+      }
+    }
+  }, [pixelIds])
+
+  return null
+}
+
+export default MetaPixel

package/src/registry/analytics/microsoft-clarity.vite.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from "react"
+import type { FC } from "react"
+
+interface MicrosoftClarityProps {
+  clarityIds: string[];
+}
+
+const MicrosoftClarity: FC<MicrosoftClarityProps> = ({ clarityIds }) => {
+  useEffect(() => {
+    clarityIds.forEach((id) => {
+      const script = document.createElement("script")
+      script.innerHTML = `
+        (function(c,l,a,r,i,t,y){
+          c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+          t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", "${id}");
+      `
+      script.id = `microsoft-clarity-init-${id}`
+      document.head.appendChild(script)
+    })
+
+    return () => {
+      clarityIds.forEach((id) => {
+        const script = document.getElementById(`microsoft-clarity-init-${id}`)
+        if (script && document.head.contains(script)) {
+          document.head.removeChild(script)
+        }
+      })
+    }
+  }, [clarityIds])
+
+  return null
+}
+
+export default MicrosoftClarity

package/src/registry/analytics/tiktok-pixel.vite.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from "react"
+import type { FC } from "react"
+
+interface TikTokPixelProps {
+  pixelIds: string[];
+}
+
+const TikTokPixel: FC<TikTokPixelProps> = ({ pixelIds }) => {
+  useEffect(() => {
+    const script = document.createElement("script")
+    script.innerHTML = `
+      !function (w, d, t) {
+        w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];
+        ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],
+        ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
+        for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);
+        ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},
+        ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js";
+        ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};
+        var s=document.createElement("script");s.type="text/javascript",s.async=!0,s.src=r+"?sdkid="+e+"&lib="+t;
+        var p=document.getElementsByTagName("script")[0];p.parentNode.insertBefore(s,p)};
+        ${pixelIds.map((id) => `ttq.load('${id}');`).join("\n")}
+        ttq.page();
+      }(window, document, 'ttq');
+    `
+    script.id = "tiktok-script-multi"
+    document.head.appendChild(script)
+
+    return () => {
+      if (document.head.contains(script)) {
+        document.head.removeChild(script)
+      }
+    }
+  }, [pixelIds])
+
+  return null
+}
+
+export default TikTokPixel

package/src/registry/ui/theme-switcher.vite.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { FiSun, FiMoon, FiMonitor } from "react-icons/fi"
+import { cn } from "../lib/utils"
+
+interface ThemeSwitcherProps {
+    onThemeChange?: (theme: string) => void
+    className?: string
+}
+
+export function ThemeSwitcher({ onThemeChange, className }: ThemeSwitcherProps) {
+    const [theme, setThemeState] = React.useState<string>("light")
+    const [mounted, setMounted] = React.useState(false)
+
+    React.useEffect(() => {
+        setMounted(true)
+        const stored = localStorage.getItem("theme") || "light"
+        setThemeState(stored)
+    }, [])
+
+    const setTheme = (newTheme: string) => {
+        setThemeState(newTheme)
+        localStorage.setItem("theme", newTheme)
+        if (newTheme === "dark") {
+            document.documentElement.classList.add("dark")
+        } else {
+            document.documentElement.classList.remove("dark")
+        }
+        onThemeChange?.(newTheme)
+    }
+
+    const toggleTheme = () => {
+        if (theme === "light") {
+            setTheme("dark")
+        } else if (theme === "dark") {
+            setTheme("system")
+        } else {
+            setTheme("light")
+        }
+    }
+
+    const getIcon = () => {
+        if (!mounted) {
+            return <FiSun className="mr-2 h-4 w-4" />
+        }
+        if (theme === "system") {
+            return <FiMonitor className="mr-2 h-4 w-4" />
+        }
+        if (theme === "dark") {
+            return <FiMoon className="mr-2 h-4 w-4" />
+        }
+        return <FiSun className="mr-2 h-4 w-4" />
+    }
+
+    const getLabel = () => {
+        if (!mounted) return "Theme"
+        if (theme === "system") return "System"
+        if (theme === "dark") return "Dark"
+        return "Light"
+    }
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className={cn(
+                "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer",
+                className
+            )}
+        >
+            {getIcon()}
+            <span>Theme: {getLabel()}</span>
+        </button>
+    )
+}