@srcroot/ui 0.0.65 → 1.0.0

package/dist/index.js

@@ -101,15 +101,13 @@ var ThemeService = class {
 };
 
 // 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: {
@@ -173,6 +171,8 @@ const config: Config = {
 
 export default config
 `;
+}
+var TAILWIND_CONFIG = getTailwindConfig("nextjs");
 
 // src/cli/utils/get-package-manager.ts
 import fs3 from "fs";
@@ -261,10 +261,23 @@ var ProjectInitializer = class {
       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 = path5.resolve(this.options.cwd);
     const packageManager = getPackageManager(cwd);
     const installCmd = packageManager === "npm" ? "install" : "add";
+    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"] || "";
@@ -303,7 +316,8 @@ var ProjectInitializer = class {
       hasPagesDir,
       libDir,
       componentsDir,
-      globalsPath
+      globalsPath,
+      framework
     };
   }
   async promptUser() {
@@ -370,7 +384,7 @@ export function cn(...inputs: ClassValue[]) {
       if (!cfg.isTailwind4) {
         spinner.start("Setting up Tailwind config...");
         const tailwindConfigPath = path5.join(cfg.cwd, "tailwind.config.ts");
-        await fs5.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        await fs5.writeFile(tailwindConfigPath, getTailwindConfig(cfg.framework));
         spinner.succeed(`Created tailwind.config.ts`);
       }
       const packageInfo = getPackageInfo();
@@ -924,14 +938,49 @@ var REGISTRY = {
 
 // src/cli/services/component-adder.ts
 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) {
@@ -1104,12 +1153,26 @@ Please manually install: ${packages.join(" ")}`);
           }
           spinner.start("Adding components...");
         }
-        const registryPath = path6.resolve(getRegistryPath(), comp.file);
+        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 fs6.readFile(registryPath, "utf-8");
+        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) {

package/package.json

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

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>
+    )
+}