@srcroot/ui 0.0.37 → 0.0.40

package/dist/index.js

@@ -22,7 +22,12 @@ var THEME_METADATA = {
   neutral: { name: "Neutral", description: "Pure gray, no undertones" },
   stone: { name: "Stone", description: "Warm gray with brown undertones" },
   zinc: { name: "Zinc", description: "Cool gray with subtle blue undertones" },
-  gray: { name: "Gray", description: "True neutral gray" }
+  gray: { name: "Gray", description: "True neutral gray" },
+  violet: { name: "Violet", description: "Vibrant purple and magenta" },
+  rose: { name: "Rose", description: "Soft and elegant pinkish-red" },
+  blue: { name: "Blue", description: "Trustworthy corporate blue" },
+  green: { name: "Green", description: "Nature and success green" },
+  orange: { name: "Orange", description: "Energetic and creative orange" }
 };
 var ThemeService = class {
   registryThemesPath;
@@ -367,11 +372,12 @@ async function init(options) {
   await initializer.run();
 }
 
-// src/cli/commands/add.ts
+// src/cli/services/component-adder.ts
 import fs4 from "fs-extra";
 import path4 from "path";
 import ora2 from "ora";
 import prompts2 from "prompts";
+import { execa as execa2 } from "execa";
 import { fileURLToPath as fileURLToPath3 } from "url";
 
 // src/cli/registry.ts
@@ -750,121 +756,192 @@ var REGISTRY = {
     description: "AI chat interface",
     category: "Data Display",
     dependencies: ["button", "input", "scroll-area", "avatar"]
+  },
+  chart: {
+    file: "ui/chart.tsx",
+    description: "Charts using Recharts",
+    category: "Data Display",
+    dependencies: [],
+    registryDependencies: ["recharts"]
   }
 };
 
-// src/cli/commands/add.ts
+// src/cli/services/component-adder.ts
 var __dirname4 = path4.dirname(fileURLToPath3(import.meta.url));
-async function add(components, options) {
-  const cwd = path4.resolve(options.cwd);
-  if (options.all) {
-    components = Object.keys(REGISTRY);
+var ComponentAdder = class {
+  cwd;
+  options;
+  constructor(cwd, options) {
+    this.cwd = cwd;
+    this.options = options;
   }
-  if (components.length === 0) {
-    const { items } = await prompts2({
-      type: "multiselect",
-      name: "items",
-      message: "Which components would you like to add?",
-      hint: "Space to select. A to toggle all. Enter to submit.",
-      instructions: false,
-      choices: Object.keys(REGISTRY).map((name) => ({
-        title: name,
-        value: name
-      }))
-    });
-    if (!items || items.length === 0) {
-      logger.warn("No components selected.");
-      process.exit(0);
+  async add(components) {
+    components = await this.resolveComponents(components);
+    const { valid, invalid } = this.validateComponents(components);
+    if (invalid.length > 0) {
+      logger.error(`Unknown components: ${invalid.join(", ")}`);
+      console.log("\nRun '@srcroot/ui list' to see available components.");
+      process.exit(1);
     }
-    components = items;
-  }
-  const validComponents = [];
-  const invalidComponents = [];
-  for (const comp of components) {
-    if (comp in REGISTRY) {
-      validComponents.push(comp);
-    } else {
-      invalidComponents.push(comp);
+    const { componentDeps, packageDeps } = this.resolveDependencies(valid);
+    this.logPlan(componentDeps, packageDeps);
+    if (packageDeps.size > 0) {
+      await this.installPackages(Array.from(packageDeps));
     }
+    await this.copyComponents(Array.from(componentDeps));
+    logger.success("\n\u2705 Components added successfully!\n");
   }
-  if (invalidComponents.length > 0) {
-    logger.error(`Unknown components: ${invalidComponents.join(", ")}`);
-    console.log("\nRun '@srcroot/ui list' to see available components.");
-    process.exit(1);
+  async resolveComponents(components) {
+    if (this.options.all) {
+      return Object.keys(REGISTRY);
+    }
+    if (components.length === 0) {
+      const { items } = await prompts2({
+        type: "multiselect",
+        name: "items",
+        message: "Which components would you like to add?",
+        hint: "Space to select. A to toggle all. Enter to submit.",
+        instructions: false,
+        choices: Object.keys(REGISTRY).map((name) => ({
+          title: name,
+          value: name
+        }))
+      });
+      if (!items || items.length === 0) {
+        logger.warn("No components selected.");
+        process.exit(0);
+      }
+      return items;
+    }
+    return components;
   }
-  const toInstall = /* @__PURE__ */ new Set();
-  function resolveDeps(name) {
-    if (toInstall.has(name)) return;
-    toInstall.add(name);
-    const comp = REGISTRY[name];
-    if (comp.dependencies) {
-      for (const dep of comp.dependencies) {
-        resolveDeps(dep);
+  validateComponents(components) {
+    const valid = [];
+    const invalid = [];
+    for (const comp of components) {
+      if (comp in REGISTRY) {
+        valid.push(comp);
+      } else {
+        invalid.push(comp);
       }
     }
+    return { valid, invalid };
   }
-  for (const comp of validComponents) {
-    resolveDeps(comp);
+  resolveDependencies(components) {
+    const componentDeps = /* @__PURE__ */ new Set();
+    const packageDeps = /* @__PURE__ */ new Set();
+    const resolve = (name) => {
+      if (componentDeps.has(name)) return;
+      componentDeps.add(name);
+      const comp = REGISTRY[name];
+      if (comp.dependencies) {
+        for (const dep of comp.dependencies) {
+          resolve(dep);
+        }
+      }
+      if (comp.registryDependencies) {
+        for (const pkg of comp.registryDependencies) {
+          packageDeps.add(pkg);
+        }
+      }
+    };
+    for (const comp of components) {
+      resolve(comp);
+    }
+    return { componentDeps, packageDeps };
   }
-  const componentsToAdd = Array.from(toInstall);
-  if (componentsToAdd.length > 10) {
-    logger.info(`
+  logPlan(componentDeps, packageDeps) {
+    const componentsToAdd = Array.from(componentDeps);
+    const packagesToInstall = Array.from(packageDeps);
+    if (componentsToAdd.length > 10) {
+      logger.info(`
 \u{1F4E6} Adding ${componentsToAdd.length} components...
 `);
-  } else {
-    logger.info("\n\u{1F4E6} Adding components:\n");
-    componentsToAdd.forEach((name) => {
-      console.log(`  - ${name}`);
-    });
+    } else {
+      logger.info("\n\u{1F4E6} Adding components:\n");
+      componentsToAdd.forEach((name) => {
+        console.log(`  - ${name}`);
+      });
+    }
+    if (packagesToInstall.length > 0) {
+      logger.info("\n\u{1F4E6} Installing dependencies:\n");
+      packagesToInstall.forEach((pkg) => {
+        console.log(`  - ${pkg}`);
+      });
+    }
+    console.log();
   }
-  console.log();
-  const spinner = ora2("Adding components...").start();
-  const hasSrc = fs4.existsSync(path4.join(cwd, "src"));
-  const srcPath = hasSrc ? path4.join(cwd, "src") : cwd;
-  const componentsDir = path4.join(srcPath, "components", "ui");
-  try {
-    await fs4.ensureDir(componentsDir);
-    for (const name of componentsToAdd) {
-      const comp = REGISTRY[name];
-      const fileName = path4.basename(comp.file);
-      const targetPath = path4.join(componentsDir, fileName);
-      if (fs4.existsSync(targetPath) && !options.overwrite) {
-        spinner.stop();
-        const { overwrite } = await prompts2({
-          type: "confirm",
-          name: "overwrite",
-          message: `${fileName} already exists. Overwrite?`,
-          initial: false
-        });
-        if (!overwrite) {
-          spinner.info(`Skipped ${fileName}`);
+  async installPackages(packages) {
+    const packageManager = getPackageManager(this.cwd);
+    const spinner = ora2("Installing dependencies...").start();
+    const installCmd = packageManager === "npm" ? "install" : "add";
+    try {
+      await execa2(packageManager, [installCmd, ...packages], {
+        cwd: this.cwd
+      });
+      spinner.succeed("Dependencies installed");
+    } catch (error) {
+      spinner.fail("Failed to install dependencies");
+      logger.error(error);
+      logger.warn(`
+Please manually install: ${packages.join(" ")}`);
+    }
+  }
+  async copyComponents(components) {
+    const spinner = ora2("Adding components...").start();
+    const hasSrc = fs4.existsSync(path4.join(this.cwd, "src"));
+    const srcPath = hasSrc ? path4.join(this.cwd, "src") : this.cwd;
+    const componentsDir = path4.join(srcPath, "components", "ui");
+    try {
+      await fs4.ensureDir(componentsDir);
+      for (const name of components) {
+        const comp = REGISTRY[name];
+        const fileName = path4.basename(comp.file);
+        const targetPath = path4.join(componentsDir, fileName);
+        if (fs4.existsSync(targetPath) && !this.options.overwrite) {
+          spinner.stop();
+          const { overwrite } = await prompts2({
+            type: "confirm",
+            name: "overwrite",
+            message: `${fileName} already exists. Overwrite?`,
+            initial: false
+          });
+          if (!overwrite) {
+            spinner.info(`Skipped ${fileName}`);
+            spinner.start("Adding components...");
+            continue;
+          }
           spinner.start("Adding components...");
+        }
+        const registryPath = path4.resolve(__dirname4, "..", "..", "registry", comp.file);
+        if (!fs4.existsSync(registryPath)) {
+          spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
           continue;
         }
-        spinner.start("Adding components...");
-      }
-      const registryPath = path4.resolve(__dirname4, "..", "src", "registry", comp.file);
-      if (!fs4.existsSync(registryPath)) {
-        spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
-        continue;
+        const content = await fs4.readFile(registryPath, "utf-8");
+        await fs4.writeFile(targetPath, content);
+        if (components.length > 10) {
+          spinner.text = `Adding ${fileName}...`;
+        } else {
+          spinner.succeed(`Added ${fileName}`);
+        }
       }
-      const content = await fs4.readFile(registryPath, "utf-8");
-      await fs4.writeFile(targetPath, content);
-      if (componentsToAdd.length > 10) {
-        spinner.text = `Adding ${fileName}...`;
-      } else {
-        spinner.succeed(`Added ${fileName}`);
+      if (components.length > 10) {
+        spinner.succeed(`Added ${components.length} components`);
       }
+    } catch (error) {
+      spinner.fail("Failed to add components");
+      console.error(error);
+      process.exit(1);
     }
-    if (componentsToAdd.length > 10) {
-      spinner.succeed(`Added ${componentsToAdd.length} components`);
-    }
-    logger.success("\n\u2705 Components added successfully!\n");
-  } catch (error) {
-    spinner.fail("Failed to add components");
-    console.error(error);
-    process.exit(1);
   }
+};
+
+// src/cli/commands/add.ts
+async function add(components, options) {
+  const cwd = process.cwd();
+  const adder = new ComponentAdder(cwd, options);
+  await adder.add(components);
 }
 
 // src/cli/commands/list.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.37",
+  "version": "0.0.40",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {

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

@@ -11,7 +11,7 @@ interface GoogleTagManagerProps {
 }
 
 const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
-    const defaultServer = 'https://www.googletagmanager.com/gtm.js';
+    const defaultServer = 'https://www.googletagmanager.com';
 
     // Group containers by tagServer to avoid duplicate script loads
     const scriptsMap = containers.reduce((map, container) => {
@@ -32,7 +32,7 @@ const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
                 __html: `
           ${ids
                         .map(
-                            id => `(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}?"+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${id}');`
+                            id => `(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}');`
                         )
                         .join('')}
         `,
@@ -45,7 +45,7 @@ const GoogleTagManager: FC<GoogleTagManagerProps> = ({ containers }) => {
             {scriptElements}
 
             <noscript>
-                {containers.map(({ gtmId, tagServer = defaultServer }) => (
+                {containers.map(({ gtmId, tagServerUrl = defaultServer }) => (
                     <iframe
                         key={gtmId}
                         src={`${tagServer}/ns.html?id=${gtmId}`}

package/src/registry/themes/v3/blue.css

@@ -0,0 +1,158 @@
+/**
+ * @srcroot/ui - Blue Theme (Tailwind 3)
+ * Trustworthy corporate blue
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 221.2 83.2% 53.3%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 221.2 83.2% 53.3%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 221.2 83.2% 53.3%;
+
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 221.2 30% 96.1%;
+        --secondary-foreground: 221.2 83.2% 53.3%;
+
+        --muted: 221.2 30% 96.1%;
+        --muted-foreground: 221.2 10% 45%;
+
+        --accent: 221.2 30% 96.1%;
+        --accent-foreground: 221.2 83.2% 53.3%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 221.2 83.2% 53.3%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 221.2 20% 90%;
+        --input: 221.2 20% 90%;
+        --ring: 221.2 83.2% 53.3%;
+
+        --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 221.2 83.2% 53.3%;
+        --sidebar-primary: 221.2 83.2% 53.3%;
+        --sidebar-primary-foreground: 210 40% 98%;
+        --sidebar-accent: 221.2 30% 96.1%;
+        --sidebar-accent-foreground: 221.2 83.2% 53.3%;
+        --sidebar-border: 221.2 20% 90%;
+        --sidebar-ring: 221.2 83.2% 53.3%;
+    }
+
+    .dark {
+        --background: 221.2 40% 6%;
+        --foreground: 210 40% 98%;
+
+        --card: 221.2 40% 8%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 221.2 40% 8%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 221.2 83.2% 53.3%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 221.2 30% 15%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 221.2 30% 15%;
+        --muted-foreground: 221.2 20% 65%;
+
+        --accent: 221.2 30% 15%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 221.2 83.2% 53.3%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 221.2 83.2% 53.3%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 221.2 83.2% 53.3%;
+
+        --border: 221.2 30% 18%;
+        --input: 221.2 30% 18%;
+        --ring: 221.2 83.2% 53.3%;
+
+        --sidebar-background: 221.2 40% 10%;
+        --sidebar-foreground: 210 40% 98%;
+        --sidebar-primary: 221.2 83.2% 53.3%;
+        --sidebar-primary-foreground: 210 40% 98%;
+        --sidebar-accent: 221.2 30% 15%;
+        --sidebar-accent-foreground: 210 40% 98%;
+        --sidebar-border: 221.2 30% 18%;
+        --sidebar-ring: 221.2 83.2% 53.3%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
+
+    .bg-gradient-brand {
+        background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+    }
+}

package/src/registry/themes/v3/gray.css

@@ -151,4 +151,8 @@
     .animate-accordion-up {
         animation: accordion-up 0.2s ease-out;
     }
+
+    .bg-gradient-brand {
+        background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+    }
 }

package/src/registry/themes/v3/green.css

@@ -0,0 +1,158 @@
+/**
+ * @srcroot/ui - Green Theme (Tailwind 3)
+ * Nature and success green
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 142.1 76.2% 36.3%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 142.1 76.2% 36.3%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 142.1 76.2% 36.3%;
+
+        --primary: 142.1 76.2% 36.3%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 142.1 30% 96.1%;
+        --secondary-foreground: 142.1 76.2% 36.3%;
+
+        --muted: 142.1 30% 96.1%;
+        --muted-foreground: 142.1 10% 45%;
+
+        --accent: 142.1 30% 96.1%;
+        --accent-foreground: 142.1 76.2% 36.3%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 142.1 76.2% 36.3%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 142.1 20% 90%;
+        --input: 142.1 20% 90%;
+        --ring: 142.1 76.2% 36.3%;
+
+        --radius: 0.5rem;
+
+        --sidebar-width: 16rem;
+        --sidebar-width-mobile: 18rem;
+        --sidebar-width-collapsed: 3rem;
+        --sidebar-width-icon: 3rem;
+        --header-height: 3.5rem;
+
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 142.1 76.2% 36.3%;
+        --sidebar-primary: 142.1 76.2% 36.3%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 142.1 30% 96.1%;
+        --sidebar-accent-foreground: 142.1 76.2% 36.3%;
+        --sidebar-border: 142.1 20% 90%;
+        --sidebar-ring: 142.1 76.2% 36.3%;
+    }
+
+    .dark {
+        --background: 142.1 40% 6%;
+        --foreground: 355.7 100% 97.3%;
+
+        --card: 142.1 40% 8%;
+        --card-foreground: 355.7 100% 97.3%;
+
+        --popover: 142.1 40% 8%;
+        --popover-foreground: 355.7 100% 97.3%;
+
+        --primary: 142.1 76.2% 36.3%;
+        --primary-foreground: 355.7 100% 97.3%;
+
+        --secondary: 142.1 30% 15%;
+        --secondary-foreground: 355.7 100% 97.3%;
+
+        --muted: 142.1 30% 15%;
+        --muted-foreground: 142.1 20% 65%;
+
+        --accent: 142.1 30% 15%;
+        --accent-foreground: 355.7 100% 97.3%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 142.1 76.2% 36.3%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 142.1 76.2% 36.3%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 142.1 76.2% 36.3%;
+
+        --border: 142.1 30% 18%;
+        --input: 142.1 30% 18%;
+        --ring: 142.1 76.2% 36.3%;
+
+        --sidebar-background: 142.1 40% 10%;
+        --sidebar-foreground: 355.7 100% 97.3%;
+        --sidebar-primary: 142.1 76.2% 36.3%;
+        --sidebar-primary-foreground: 355.7 100% 97.3%;
+        --sidebar-accent: 142.1 30% 15%;
+        --sidebar-accent-foreground: 355.7 100% 97.3%;
+        --sidebar-border: 142.1 30% 18%;
+        --sidebar-ring: 142.1 76.2% 36.3%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+@layer utilities {
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+
+        to {
+            height: 0;
+        }
+    }
+
+    .animate-accordion-down {
+        animation: accordion-down 0.2s ease-out;
+    }
+
+    .animate-accordion-up {
+        animation: accordion-up 0.2s ease-out;
+    }
+
+    .bg-gradient-brand {
+        background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+    }
+}

package/src/registry/themes/v3/neutral.css

@@ -151,4 +151,8 @@
     .animate-accordion-up {
         animation: accordion-up 0.2s ease-out;
     }
+
+    .bg-gradient-brand {
+        background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+    }
 }