@srcroot/ui 0.0.65 → 1.0.1

package/README.md

@@ -1,146 +1,171 @@
 # @srcroot/ui
 
-A UI library with polymorphic, accessible React components.
-This library provides a collection of re-usable components that you can copy and paste into your apps.
+A UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
 
 ## Features
 
-- **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag).
-- **Accessible**: Built on standard HTML elements and WAI-ARIA patterns.
-- **Copy/Paste**: Not a dependency you install, but code you own.
-- **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`.
+- **Framework-Aware**: Automatically detects your framework (Next.js, Vite, etc.) and uses the right component variants
+- **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag)
+- **Accessible**: Built on standard HTML elements and WAI-ARIA patterns
+- **Copy/Paste**: Components are copied directly into your project — you own the code
+- **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`
+- **Multi-Platform**: Supports npm, Yarn, pnpm, Bun, and Deno
 
-## Installation
-
-This library is distributed via a CLI that initializes your project and adds components directly to your source code.
+## Quick Start
 
 ### 1. Initialize
 
-Run the `init` command to set up the necessary dependencies and structural files (like `cn` utility) in your project.
-
 ```bash
 npx @srcroot/ui init
 ```
 
-This will ask a few questions to configure your project structure (e.g., where to put components).
+This sets up your project with the `cn` utility, theme configuration, and creates the necessary structure.
 
 ### 2. Add Components
 
-Use the `add` command to install components. You can do this in three ways:
-
-**Interactive Mode:**
-Run without arguments to select components from a list.
 ```bash
+# Interactive mode
 npx @srcroot/ui add
-```
 
-**Specific Components:**
-Add one or more components by name.
-```bash
+# Specific components
 npx @srcroot/ui add button card input
-```
 
-**Add All:**
-Install every available component at once.
-```bash
+# Add all components
 npx @srcroot/ui add --all
 ```
 
-This will copy the component files to your `components/ui` directory and install any necessary peer dependencies (like `react-icons` or `clsx`).
+Components are installed to `src/components/ui/` (or `components/ui/` depending on your structure).
 
-### 3. Usage
+## Supported Package Managers
 
-Import components directly from your project folder:
+The CLI automatically detects and uses your package manager:
 
-```tsx
-import { Button } from "@/components/ui/button"
-
-export default function Home() {
-  return (
-    <Button variant="destructive" onClick={() => alert("Clicked!")}>
-      Click Me
-    </Button>
-  )
-}
-```
+- **npm** - `npm install`
+- **Yarn** - `yarn add`
+- **pnpm** - `pnpm add`
+- **Bun** - `bun add`
+- **Deno** - `deno add -A`
+
+## Framework Detection
+
+The CLI automatically detects your framework:
+
+| Framework | Detection | Notes |
+|-----------|-----------|-------|
+| Next.js | `next.config.ts/js/mjs` or `src/app` directory | Uses `next/script` for analytics |
+| Vite | `vite.config.ts/js/mjs` | Uses `useEffect` for analytics, localStorage for themes |
 
 ## Available Components
 
-run `npx @srcroot/ui list` to see all available components.
+Run `npx @srcroot/ui list` to see all available components.
+
+### Analytics
+- `google-analytics` - Google Analytics 4 integration
+- `google-tag-manager` - Google Tag Manager container
+- `meta-pixel` - Meta/Facebook Pixel tracking
+- `microsoft-clarity` - Microsoft Clarity analytics
+- `tiktok-pixel` - TikTok Pixel tracking
 
 ### Core
-- `button` - Polymorphic button with variants.
-- `badge` - Status indicators.
-- `avatar` - User profile images with fallbacks.
-- `separator` - Visual divider.
-- `button-group` - Attached or spaced button sets.
+- `button` - Polymorphic button with variants
+- `badge` - Status indicators
+- `avatar` - User profile images with fallbacks
+- `separator` - Visual divider
+- `button-group` - Attached or spaced button sets
+- `slot` - Polymorphic slot for component composition
 
 ### Forms
-- `input` - Basic text input.
-- `textarea` - Multi-line text input.
-- `checkbox` - Toggle selection.
-- `radio` - Single selection from list.
-- `switch` - Toggle switch.
-- `select` - Dropdown selection.
-- `slider` - Range input.
-- `otp-input` - One-time password verification.
-- `search` - Search input with debounce support.
-- `calendar` - Date and range picker.
+- `input` - Basic text input
+- `textarea` - Multi-line text input
+- `checkbox` - Toggle selection
+- `radio` - Single selection from list
+- `switch` - Toggle switch
+- `select` - Dropdown selection
+- `slider` - Range input
+- `otp-input` - One-time password verification
+- `search` - Search input with debounce
+- `calendar` - Date and range picker
+- `date-picker` - Date selection component
+- `form-field` - Form field wrapper with label and validation
+- `input-group` - Input with attached elements
 
 ### Layout
-- `card` - Content container with header/content/footer.
-- `container` - Centered layout wrapper.
-- `aspect-ratio` - Maintain element proportions.
+- `card` - Content container with header/content/footer
+- `container` - Centered layout wrapper
+- `aspect-ratio` - Maintain element proportions
+- `resizable` - Resizable panel groups
 
 ### Data Display
-- `text` - Polymorphic typography component.
-- `label` - Accessible form label.
-- `table` - Responsive data table.
-- `accordion` - Collapsible content sections.
-- `collapsible` - Expandable panel.
-- `tabs` - Tabbed content switcher.
-- `progress` - Progress bar.
-- `skeleton` - Loading placeholder state.
-- `image` - Enhanced img with fallback and loading state.
-- `carousel` - Content slider with autoplay.
+- `text` - Polymorphic typography
+- `label` - Accessible form label
+- `table` - Responsive data table
+- `table-of-contents` - Auto-generated TOC
+- `accordion` - Collapsible content sections
+- `collapsible` - Expandable panel
+- `tabs` - Tabbed content switcher
+- `progress` - Progress bar
+- `skeleton` - Loading placeholder
+- `image` - Enhanced image with fallback
+- `carousel` - Content slider with autoplay
+- `marquee` - Scrolling marquee animation
 
 ### Feedback
-- `loading-spinner` - SVG spinner with variants.
-- `star-rating` - Interactive rating component.
-- `toast` - Transient notifications.
-- `alert` - Critical information banner.
+- `loading-spinner` - SVG spinner with variants
+- `star-rating` - Interactive rating component
+- `toast` - Transient notifications
+- `alert` - Critical information banner
+- `scroll-to-top` - Scroll to top button
+- `scroll-animation` - Scroll-triggered animations
 
 ### Overlays
-- `dialog` - Modal dialog.
-- `alert-dialog` - Modal for confirming actions.
-- `sheet` - Side-panel overlay.
-- `popover` - Content appearing over trigger.
-- `tooltip` - Hover information.
-- `dropdown-menu` - Menu for actions/navigation.
+- `dialog` - Modal dialog
+- `alert-dialog` - Modal for confirming actions
+- `sheet` - Side-panel overlay
+- `popover` - Content appearing over trigger
+- `tooltip` - Hover information
+- `dropdown-menu` - Menu for actions/navigation
+- `context-menu` - Right-click context menu
 
 ### Navigation
-- `breadcrumb` - Navigation trail.
-- `pagination` - Page navigation controls.
+- `breadcrumb` - Navigation trail
+- `pagination` - Page navigation controls
+- `sidebar` - Collapsible sidebar with navigation
+- `menubar` - Menu bar component
+
+### Specialized
+- `chatbot` - Chat interface widget
+- `chart` - Recharts-based chart component
+- `map` - Google Maps embed
+- `combobox` - Searchable dropdown (Command menu pattern)
+- `command` - Command menu (Cmdk-style)
+- `file-upload` - Drag-and-drop file upload
+- `hover-card` - Hover-triggered card
+- `native-select` - Native select wrapper
+- `patterns` - Decorative background patterns
+- `theme-switcher` - Light/dark/system theme toggle
+- `whatsapp` - WhatsApp floating button
+- `floating-dock` - macOS-style floating dock
 
 ## Polymorphism
 
-Our components accept an `as` prop to change the underlying HTML element while maintaining styles and behavior.
+Components accept an `as` prop to change the underlying HTML element:
 
 ```tsx
-// Renders as an <a> tag but looks like a button
-<Button as="a" href="/login">
-  Login
-</Button>
-
-// Renders as a specialized text variant
-<Text as="h1" variant="h1">
-  Page Title
-</Text>
+<Button as="a" href="/login">Login</Button>
+
+<Text as="h1" variant="h1">Page Title</Text>
 ```
 
-## Local Development
+## CLI Options
 
-To run the documentation/playground locally:
+```
+npx @srcroot/ui init          Initialize project structure
+npx @srcroot/ui add [comps]   Add component(s)
+npx @srcroot/ui add --all     Add all components
+npx @srcroot/ui list          List available components
+```
+
+## Local Development
 
 ```bash
 cd examples/playground
@@ -148,4 +173,4 @@ npm install
 npm run dev
 ```
 
-Visit `http://localhost:3001` to view the component showcase.
+Visit `http://localhost:3001` to view the component showcase.

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,12 +171,15 @@ const config: Config = {
 
 export default config
 `;
+}
+var TAILWIND_CONFIG = getTailwindConfig("nextjs");
 
 // src/cli/utils/get-package-manager.ts
 import fs3 from "fs";
 import path3 from "path";
 function getPackageManager(cwd) {
   const dir = cwd || process.cwd();
+  if (fs3.existsSync(path3.join(dir, "deno.json")) || fs3.existsSync(path3.join(dir, "deno.jsonc"))) return "deno";
   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";
@@ -189,6 +190,8 @@ function getPackageManager(cwd) {
     if (userAgent.startsWith("pnpm")) return "pnpm";
     if (userAgent.startsWith("bun")) return "bun";
   }
+  const denoAgent = process.env.DENO_ENV;
+  if (denoAgent) return "deno";
   return "npm";
 }
 
@@ -261,10 +264,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 +319,8 @@ var ProjectInitializer = class {
       hasPagesDir,
       libDir,
       componentsDir,
-      globalsPath
+      globalsPath,
+      framework
     };
   }
   async promptUser() {
@@ -370,7 +387,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 +941,123 @@ 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, "");
+    content = content.replace(/import\s*{\s*cn\s*}\s*from\s*"@\/lib\/utils"\s*;?\n?/g, 'import { cn } from "../../lib/utils"\n');
+    content = content.replace(/import\s*{\s*Slot\s*}\s*from\s*"@\/components\/ui\/slot"\s*;?\n?/g, 'import { Slot } from "./slot"\n');
+    const otherUiImports = [
+      "accordion",
+      "alert-dialog",
+      "alert",
+      "aspect-ratio",
+      "avatar",
+      "badge",
+      "breadcrumb",
+      "button",
+      "button-group",
+      "calendar",
+      "card",
+      "carousel",
+      "chart",
+      "chatbot",
+      "checkbox",
+      "collapsible",
+      "combobox",
+      "command",
+      "container",
+      "context-menu",
+      "date-picker",
+      "dialog",
+      "drawer",
+      "dropdown-menu",
+      "empty-state",
+      "file-upload",
+      "floating-dock",
+      "form-field",
+      "hover-card",
+      "image",
+      "input",
+      "input-group",
+      "kbd",
+      "label",
+      "loading-spinner",
+      "map",
+      "marquee",
+      "menubar",
+      "native-select",
+      "otp-input",
+      "pagination",
+      "patterns",
+      "popover",
+      "progress",
+      "radio",
+      "resizable",
+      "scroll-animation",
+      "scroll-area",
+      "scroll-to-top",
+      "search",
+      "select",
+      "separator",
+      "sheet",
+      "sidebar",
+      "skeleton",
+      "slider",
+      "star-rating",
+      "switch",
+      "table",
+      "table-of-contents",
+      "tabs",
+      "text",
+      "textarea",
+      "toast",
+      "toggle",
+      "toggle-group",
+      "tooltip",
+      "whatsapp"
+    ];
+    for (const comp of otherUiImports) {
+      const regex = new RegExp(`from\\s+"@/components/ui/${comp}"`, "g");
+      content = content.replace(regex, `from "./${comp}"`);
+    }
+    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) {
@@ -1023,9 +1149,23 @@ var ComponentAdder = class {
   async installPackages(packages) {
     const packageManager = getPackageManager(this.cwd);
     const spinner = ora2("Installing dependencies...").start();
-    const installCmd = packageManager === "npm" ? "install" : "add";
+    let installCmd;
+    switch (packageManager) {
+      case "deno":
+        installCmd = ["add", "-A", ...packages];
+        break;
+      case "bun":
+        installCmd = ["add", ...packages];
+        break;
+      case "pnpm":
+      case "yarn":
+        installCmd = ["add", ...packages];
+        break;
+      default:
+        installCmd = ["install", ...packages];
+    }
     try {
-      await execa2(packageManager, [installCmd, ...packages], {
+      await execa2(packageManager, installCmd, {
         cwd: this.cwd
       });
       spinner.succeed("Dependencies installed");
@@ -1104,12 +1244,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.1",
   "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>
+    )
+}