@gilav21/shadcn-angular 0.0.10 → 0.0.12

package/dist/commands/add.js

@@ -6,6 +6,7 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { getConfig } from '../utils/config.js';
 import { registry } from '../registry/index.js';
+import { installPackages } from '../utils/package-manager.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // Base URL for the component registry (GitHub raw content)
@@ -105,67 +106,159 @@ export async function add(components, options) {
     const targetDir = options.path
         ? path.join(cwd, options.path)
         : path.join(cwd, 'src/components/ui');
-    // Check for existing files
-    const existing = [];
+    // Check for existing files and diff
+    const componentsToInstall = [];
+    const componentsToSkip = [];
+    const conflictingComponents = [];
+    const contentCache = new Map();
+    const checkSpinner = ora('Checking for conflicts...').start();
     for (const name of allComponents) {
         const component = registry[name];
+        let hasChanges = false;
+        let isFullyPresent = true;
         for (const file of component.files) {
             const targetPath = path.join(targetDir, file);
             if (await fs.pathExists(targetPath)) {
-                existing.push(file);
+                const localContent = await fs.readFile(targetPath, 'utf-8');
+                try {
+                    let remoteContent = await fetchComponentContent(file, options);
+                    // Transform imports for comparison
+                    const utilsAlias = config.aliases.utils;
+                    remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    const normalize = (str) => str.replace(/\s+/g, '').trim();
+                    if (normalize(localContent) !== normalize(remoteContent)) {
+                        hasChanges = true;
+                    }
+                    contentCache.set(file, remoteContent); // Cache for installation
+                }
+                catch (error) {
+                    // unexpected error fetching remote
+                    console.warn(`Could not fetch remote content for comparison: ${file}`);
+                    hasChanges = true; // Assume changed/unknown
+                }
             }
+            else {
+                isFullyPresent = false;
+            }
+        }
+        if (isFullyPresent && !hasChanges) {
+            componentsToSkip.push(name);
+        }
+        else if (hasChanges) {
+            conflictingComponents.push(name);
+        }
+        else {
+            componentsToInstall.push(name);
         }
     }
-    if (existing.length > 0 && !options.overwrite && !options.yes) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: `The following files already exist: ${existing.join(', ')}. Overwrite?`,
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Installation cancelled.'));
-            return;
+    checkSpinner.stop();
+    let componentsToOverwrite = [];
+    if (conflictingComponents.length > 0) {
+        if (options.overwrite) {
+            componentsToOverwrite = conflictingComponents;
+        }
+        else if (options.yes) {
+            componentsToOverwrite = []; // Skip conflicts in non-interactive mode unless --overwrite
+        }
+        else {
+            console.log(chalk.yellow(`\n${conflictingComponents.length} component(s) have local changes or are different from remote.`));
+            const { selected } = await prompts({
+                type: 'multiselect',
+                name: 'selected',
+                message: 'Select components to OVERWRITE (Unselected will be skipped):',
+                choices: conflictingComponents.map(name => ({
+                    title: name,
+                    value: name,
+                })),
+                hint: '- Space to select, Enter to confirm',
+            });
+            componentsToOverwrite = selected || [];
         }
     }
+    // Final list of components to process
+    // We process:
+    // 1. componentsToInstall (Brand new or partial)
+    // 2. componentsToOverwrite (User selected)
+    // We SKIP:
+    // 1. componentsToSkip (Identical)
+    // 2. conflictingComponents NOT in componentsToOverwrite
+    const finalComponents = [...componentsToInstall, ...componentsToOverwrite];
+    if (finalComponents.length === 0 && componentsToSkip.length > 0) {
+        console.log(chalk.green(`\nAll components are up to date! (${componentsToSkip.length} skipped)`));
+        return;
+    }
+    if (finalComponents.length === 0) {
+        console.log(chalk.dim('\nNo components to install.'));
+        return;
+    }
     const spinner = ora('Installing components...').start();
     let successCount = 0;
     try {
         await fs.ensureDir(targetDir);
-        for (const name of allComponents) {
+        for (const name of finalComponents) {
             const component = registry[name];
             let componentSuccess = true;
             for (const file of component.files) {
                 const targetPath = path.join(targetDir, file);
                 try {
-                    let content = await fetchComponentContent(file, options);
-                    // Transform imports
-                    // Replace ../lib/utils (or similar relative paths) with the configured alias
-                    const utilsAlias = config.aliases.utils;
-                    content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    let content = contentCache.get(file);
+                    if (!content) {
+                        content = await fetchComponentContent(file, options);
+                        // Transform imports if not already transformed (cached is transformed)
+                        const utilsAlias = config.aliases.utils;
+                        content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    }
                     await fs.ensureDir(path.dirname(targetPath));
                     await fs.writeFile(targetPath, content);
-                    spinner.text = `Added ${file}`;
+                    // spinner.text = `Added ${file}`; // Too verbose?
                 }
                 catch (err) {
                     spinner.warn(`Could not add ${file}: ${err.message}`);
                     componentSuccess = false;
                 }
             }
-            if (componentSuccess)
+            if (componentSuccess) {
                 successCount++;
+                spinner.text = `Added ${name}`;
+            }
         }
         if (successCount > 0) {
-            spinner.succeed(chalk.green(`Added ${successCount} component(s)`));
+            spinner.succeed(chalk.green(`Success! Added ${successCount} component(s)`));
             console.log('\n' + chalk.dim('Components added:'));
-            allComponents.forEach(name => {
+            finalComponents.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.cyan(name));
             });
-            console.log('');
         }
         else {
-            spinner.fail(chalk.red('Failed to add any components.'));
+            spinner.info('No new components installed.');
+        }
+        if (finalComponents.length > 0) {
+            const npmDependencies = new Set();
+            for (const name of finalComponents) {
+                const component = registry[name];
+                if (component.npmDependencies) {
+                    component.npmDependencies.forEach(dep => npmDependencies.add(dep));
+                }
+            }
+            if (npmDependencies.size > 0) {
+                const depSpinner = ora('Installing dependencies...').start();
+                try {
+                    await installPackages(Array.from(npmDependencies), { cwd });
+                    depSpinner.succeed('Dependencies installed.');
+                }
+                catch (e) {
+                    depSpinner.fail('Failed to install dependencies.');
+                    console.error(e);
+                }
+            }
+        }
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            componentsToSkip.forEach(name => {
+                console.log(chalk.dim('  - ') + chalk.gray(name));
+            });
         }
+        console.log('');
     }
     catch (error) {
         spinner.fail('Failed to add components');

package/dist/commands/init.js

@@ -195,6 +195,35 @@ export async function init(options) {
             };
             await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
+        // Configure app.config.ts with Lucide icons
+        spinner.text = 'Configuring icons in app.config.ts...';
+        const appConfigPath = path.join(cwd, 'src/app/app.config.ts');
+        if (await fs.pathExists(appConfigPath)) {
+            let appConfigContent = await fs.readFile(appConfigPath, 'utf-8');
+            // Add imports
+            if (!appConfigContent.includes('LucideAngularModule')) {
+                const iconImports = "import { LucideAngularModule, ArrowDown, ArrowUp, ChevronsUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-angular';";
+                appConfigContent = iconImports + '\n' + appConfigContent;
+            }
+            if (!appConfigContent.includes('importProvidersFrom')) {
+                appConfigContent = "import { importProvidersFrom } from '@angular/core';\n" + appConfigContent;
+            }
+            // Add provider
+            const providerCode = `
+    importProvidersFrom(LucideAngularModule.pick({ 
+      ArrowDown, 
+      ArrowUp, 
+      ChevronsUpDown, 
+      ChevronLeft, 
+      ChevronRight, 
+      ChevronsLeft, 
+      ChevronsRight 
+    }))`;
+            if (!appConfigContent.includes('LucideAngularModule.pick')) {
+                appConfigContent = appConfigContent.replace(/providers:\s*\[/, `providers: [${providerCode},`);
+                await fs.writeFile(appConfigPath, appConfigContent);
+            }
+        }
         spinner.succeed(chalk.green('Project initialized successfully!'));
         console.log('\n' + chalk.bold('Next steps:'));
         console.log(chalk.dim('  1. Add components: ') + chalk.cyan('npx @gilav21/shadcn-angular add button'));

package/dist/index.js

@@ -6,7 +6,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.8');
+    .version('0.0.10');
 program
     .command('init')
     .description('Initialize shadcn-angular in your project')

package/dist/registry/index.d.ts

@@ -2,6 +2,7 @@ export interface ComponentDefinition {
     name: string;
     files: string[];
     dependencies?: string[];
+    npmDependencies?: string[];
 }
 export type ComponentName = keyof typeof registry;
 export declare const registry: Record<string, ComponentDefinition>;

package/dist/registry/index.js

@@ -89,6 +89,48 @@ export const registry = {
         files: ['date-picker.component.ts'],
         dependencies: ['calendar'],
     },
+    chat: {
+        name: 'chat',
+        files: ['chat.component.ts'],
+        dependencies: ['avatar', 'button', 'textarea', 'scroll-area'],
+    },
+    'streaming-text': {
+        name: 'streaming-text',
+        files: ['streaming-text.component.ts'],
+    },
+    sparkles: {
+        name: 'sparkles',
+        files: ['sparkles.component.ts'],
+        dependencies: ['button'],
+    },
+    'code-block': {
+        name: 'code-block',
+        files: ['code-block.component.ts'],
+        dependencies: ['button', 'scroll-area'],
+    },
+    'text-reveal': {
+        name: 'text-reveal',
+        files: ['text-reveal.component.ts'],
+    },
+    'data-table': {
+        name: 'data-table',
+        files: [
+            'data-table/data-table.component.ts',
+            'data-table/data-table-column-header.component.ts',
+            'data-table/data-table-pagination.component.ts',
+            'data-table/data-table.types.ts',
+            'data-table/cell-host.directive.ts',
+        ],
+        dependencies: [
+            'table',
+            'input',
+            'button',
+            'checkbox',
+            'select',
+            'pagination',
+            'popover',
+        ],
+    },
     dialog: {
         name: 'dialog',
         files: ['dialog.component.ts'],
@@ -124,7 +166,8 @@ export const registry = {
     },
     'input-group': {
         name: 'input-group',
-        files: ['input-group.component.ts'],
+        files: ['input-group.component.ts', 'input-group.token.ts'],
+        dependencies: ['input'],
     },
     'input-otp': {
         name: 'input-otp',
@@ -197,6 +240,7 @@ export const registry = {
     sidebar: {
         name: 'sidebar',
         files: ['sidebar.component.ts'],
+        dependencies: ['scroll-area', 'tooltip'],
     },
     skeleton: {
         name: 'skeleton',
@@ -262,7 +306,7 @@ export const registry = {
     'chip-list': {
         name: 'chip-list',
         files: ['chip-list.component.ts'],
-        dependencies: ['badge', 'button'],
+        dependencies: ['badge', 'button', 'input', 'input-group'],
     },
     'emoji-picker': {
         name: 'emoji-picker',

package/dist/utils/package-manager.d.ts

@@ -0,0 +1,6 @@
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+export declare function getPackageManager(cwd: string): Promise<PackageManager>;
+export declare function installPackages(packages: string[], options: {
+    cwd: string;
+    dev?: boolean;
+}): Promise<void>;

package/dist/utils/package-manager.js

@@ -0,0 +1,49 @@
+import { execa } from 'execa';
+import fs from 'fs-extra';
+import path from 'path';
+export async function getPackageManager(cwd) {
+    const userAgent = process.env['npm_config_user_agent'];
+    if (userAgent) {
+        if (userAgent.startsWith('yarn'))
+            return 'yarn';
+        if (userAgent.startsWith('pnpm'))
+            return 'pnpm';
+        if (userAgent.startsWith('bun'))
+            return 'bun';
+        return 'npm';
+    }
+    // Check for lock files
+    if (await fs.pathExists(path.join(cwd, 'yarn.lock')))
+        return 'yarn';
+    if (await fs.pathExists(path.join(cwd, 'pnpm-lock.yaml')))
+        return 'pnpm';
+    if (await fs.pathExists(path.join(cwd, 'bun.lockb')))
+        return 'bun';
+    return 'npm';
+}
+export async function installPackages(packages, options) {
+    const packageManager = await getPackageManager(options.cwd);
+    const args = [];
+    if (packageManager === 'npm') {
+        args.push('install');
+        if (options.dev)
+            args.push('-D');
+    }
+    else if (packageManager === 'yarn') {
+        args.push('add');
+        if (options.dev)
+            args.push('-D');
+    }
+    else if (packageManager === 'pnpm') {
+        args.push('add');
+        if (options.dev)
+            args.push('-D');
+    }
+    else if (packageManager === 'bun') {
+        args.push('add');
+        if (options.dev)
+            args.push('-d');
+    }
+    args.push(...packages);
+    await execa(packageManager, args, { cwd: options.cwd });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gilav21/shadcn-angular",
-    "version": "0.0.10",
+    "version": "0.0.12",
     "description": "CLI for adding shadcn-angular components to your project",
     "bin": {
         "shadcn-angular": "./dist/index.js"

package/src/commands/add.ts

@@ -6,6 +6,7 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { getConfig } from '../utils/config.js';
 import { registry, type ComponentName } from '../registry/index.js';
+import { installPackages } from '../utils/package-manager.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -124,38 +125,106 @@ export async function add(components: string[], options: AddOptions) {
         ? path.join(cwd, options.path)
         : path.join(cwd, 'src/components/ui');
 
-    // Check for existing files
-    const existing: string[] = [];
+    // Check for existing files and diff
+    const componentsToInstall: ComponentName[] = [];
+    const componentsToSkip: string[] = [];
+    const conflictingComponents: ComponentName[] = [];
+    const contentCache = new Map<string, string>();
+
+    const checkSpinner = ora('Checking for conflicts...').start();
+
     for (const name of allComponents) {
         const component = registry[name];
+        let hasChanges = false;
+        let isFullyPresent = true;
+
         for (const file of component.files) {
             const targetPath = path.join(targetDir, file);
             if (await fs.pathExists(targetPath)) {
-                existing.push(file);
+                const localContent = await fs.readFile(targetPath, 'utf-8');
+
+                try {
+                    let remoteContent = await fetchComponentContent(file, options);
+                    // Transform imports for comparison
+                    const utilsAlias = config.aliases.utils;
+                    remoteContent = remoteContent.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+
+                    const normalize = (str: string) => str.replace(/\s+/g, '').trim();
+                    if (normalize(localContent) !== normalize(remoteContent)) {
+                        hasChanges = true;
+                    }
+                    contentCache.set(file, remoteContent); // Cache for installation
+                } catch (error) {
+                    // unexpected error fetching remote
+                    console.warn(`Could not fetch remote content for comparison: ${file}`);
+                    hasChanges = true; // Assume changed/unknown
+                }
+            } else {
+                isFullyPresent = false;
             }
         }
+
+        if (isFullyPresent && !hasChanges) {
+            componentsToSkip.push(name);
+        } else if (hasChanges) {
+            conflictingComponents.push(name);
+        } else {
+            componentsToInstall.push(name);
+        }
     }
 
-    if (existing.length > 0 && !options.overwrite && !options.yes) {
-        const { overwrite } = await prompts({
-            type: 'confirm',
-            name: 'overwrite',
-            message: `The following files already exist: ${existing.join(', ')}. Overwrite?`,
-            initial: false,
-        });
-        if (!overwrite) {
-            console.log(chalk.dim('Installation cancelled.'));
-            return;
+    checkSpinner.stop();
+
+    let componentsToOverwrite: ComponentName[] = [];
+
+    if (conflictingComponents.length > 0) {
+        if (options.overwrite) {
+            componentsToOverwrite = conflictingComponents;
+        } else if (options.yes) {
+            componentsToOverwrite = []; // Skip conflicts in non-interactive mode unless --overwrite
+        } else {
+            console.log(chalk.yellow(`\n${conflictingComponents.length} component(s) have local changes or are different from remote.`));
+            const { selected } = await prompts({
+                type: 'multiselect',
+                name: 'selected',
+                message: 'Select components to OVERWRITE (Unselected will be skipped):',
+                choices: conflictingComponents.map(name => ({
+                    title: name,
+                    value: name,
+                })),
+                hint: '- Space to select, Enter to confirm',
+            });
+            componentsToOverwrite = selected || [];
         }
     }
 
+    // Final list of components to process
+    // We process:
+    // 1. componentsToInstall (Brand new or partial)
+    // 2. componentsToOverwrite (User selected)
+    // We SKIP:
+    // 1. componentsToSkip (Identical)
+    // 2. conflictingComponents NOT in componentsToOverwrite
+
+    const finalComponents = [...componentsToInstall, ...componentsToOverwrite];
+
+    if (finalComponents.length === 0 && componentsToSkip.length > 0) {
+        console.log(chalk.green(`\nAll components are up to date! (${componentsToSkip.length} skipped)`));
+        return;
+    }
+
+    if (finalComponents.length === 0) {
+        console.log(chalk.dim('\nNo components to install.'));
+        return;
+    }
+
     const spinner = ora('Installing components...').start();
     let successCount = 0;
 
     try {
         await fs.ensureDir(targetDir);
 
-        for (const name of allComponents) {
+        for (const name of finalComponents) {
             const component = registry[name];
             let componentSuccess = true;
 
@@ -163,35 +232,69 @@ export async function add(components: string[], options: AddOptions) {
                 const targetPath = path.join(targetDir, file);
 
                 try {
-                    let content = await fetchComponentContent(file, options);
+                    let content = contentCache.get(file);
+                    if (!content) {
+                        content = await fetchComponentContent(file, options);
+                        // Transform imports if not already transformed (cached is transformed)
+                        const utilsAlias = config.aliases.utils;
+                        content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
+                    }
 
-                    // Transform imports
-                    // Replace ../lib/utils (or similar relative paths) with the configured alias
-                    const utilsAlias = config.aliases.utils;
-                    content = content.replace(/(\.\.\/)+lib\/utils/g, utilsAlias);
                     await fs.ensureDir(path.dirname(targetPath));
                     await fs.writeFile(targetPath, content);
-                    spinner.text = `Added ${file}`;
+                    // spinner.text = `Added ${file}`; // Too verbose?
                 } catch (err: any) {
                     spinner.warn(`Could not add ${file}: ${err.message}`);
                     componentSuccess = false;
                 }
             }
-            if (componentSuccess) successCount++;
+            if (componentSuccess) {
+                successCount++;
+                spinner.text = `Added ${name}`;
+            }
         }
 
         if (successCount > 0) {
-            spinner.succeed(chalk.green(`Added ${successCount} component(s)`));
+            spinner.succeed(chalk.green(`Success! Added ${successCount} component(s)`));
 
             console.log('\n' + chalk.dim('Components added:'));
-            allComponents.forEach(name => {
+            finalComponents.forEach(name => {
                 console.log(chalk.dim('  - ') + chalk.cyan(name));
             });
-            console.log('');
         } else {
-            spinner.fail(chalk.red('Failed to add any components.'));
+            spinner.info('No new components installed.');
         }
 
+        if (finalComponents.length > 0) {
+            const npmDependencies = new Set<string>();
+            for (const name of finalComponents) {
+                const component = registry[name];
+                if (component.npmDependencies) {
+                    component.npmDependencies.forEach(dep => npmDependencies.add(dep));
+                }
+            }
+
+            if (npmDependencies.size > 0) {
+                const depSpinner = ora('Installing dependencies...').start();
+                try {
+                    await installPackages(Array.from(npmDependencies), { cwd });
+                    depSpinner.succeed('Dependencies installed.');
+                } catch (e) {
+                    depSpinner.fail('Failed to install dependencies.');
+                    console.error(e);
+                }
+            }
+        }
+
+        if (componentsToSkip.length > 0) {
+            console.log('\n' + chalk.dim('Components skipped (up to date):'));
+            componentsToSkip.forEach(name => {
+                console.log(chalk.dim('  - ') + chalk.gray(name));
+            });
+        }
+
+        console.log('');
+
     } catch (error) {
         spinner.fail('Failed to add components');
         console.error(error);

package/src/commands/init.ts

@@ -224,6 +224,44 @@ export async function init(options: InitOptions) {
             await fs.writeJson(postcssrcPath, configContent, { spaces: 4 });
         }
 
+        // Configure app.config.ts with Lucide icons
+        spinner.text = 'Configuring icons in app.config.ts...';
+        const appConfigPath = path.join(cwd, 'src/app/app.config.ts');
+
+        if (await fs.pathExists(appConfigPath)) {
+            let appConfigContent = await fs.readFile(appConfigPath, 'utf-8');
+
+            // Add imports
+            if (!appConfigContent.includes('LucideAngularModule')) {
+                const iconImports = "import { LucideAngularModule, ArrowDown, ArrowUp, ChevronsUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-angular';";
+                appConfigContent = iconImports + '\n' + appConfigContent;
+            }
+
+            if (!appConfigContent.includes('importProvidersFrom')) {
+                appConfigContent = "import { importProvidersFrom } from '@angular/core';\n" + appConfigContent;
+            }
+
+            // Add provider
+            const providerCode = `
+    importProvidersFrom(LucideAngularModule.pick({ 
+      ArrowDown, 
+      ArrowUp, 
+      ChevronsUpDown, 
+      ChevronLeft, 
+      ChevronRight, 
+      ChevronsLeft, 
+      ChevronsRight 
+    }))`;
+
+            if (!appConfigContent.includes('LucideAngularModule.pick')) {
+                appConfigContent = appConfigContent.replace(
+                    /providers:\s*\[/,
+                    `providers: [${providerCode},`
+                );
+                await fs.writeFile(appConfigPath, appConfigContent);
+            }
+        }
+
         spinner.succeed(chalk.green('Project initialized successfully!'));
 
         console.log('\n' + chalk.bold('Next steps:'));

package/src/index.ts

@@ -8,7 +8,7 @@ const program = new Command();
 program
     .name('shadcn-angular')
     .description('CLI for adding shadcn-angular components to your Angular project')
-    .version('0.0.8');
+    .version('0.0.10');
 
 program
     .command('init')

package/src/registry/index.ts

@@ -5,6 +5,7 @@ export interface ComponentDefinition {
   name: string;
   files: string[]; // Relative paths to component files
   dependencies?: string[]; // Other components this depends on
+  npmDependencies?: string[]; // NPM packages this depends on
 }
 
 export type ComponentName = keyof typeof registry;
@@ -98,6 +99,48 @@ export const registry: Record<string, ComponentDefinition> = {
     files: ['date-picker.component.ts'],
     dependencies: ['calendar'],
   },
+  chat: {
+    name: 'chat',
+    files: ['chat.component.ts'],
+    dependencies: ['avatar', 'button', 'textarea', 'scroll-area'],
+  },
+  'streaming-text': {
+    name: 'streaming-text',
+    files: ['streaming-text.component.ts'],
+  },
+  sparkles: {
+    name: 'sparkles',
+    files: ['sparkles.component.ts'],
+    dependencies: ['button'],
+  },
+  'code-block': {
+    name: 'code-block',
+    files: ['code-block.component.ts'],
+    dependencies: ['button', 'scroll-area'],
+  },
+  'text-reveal': {
+    name: 'text-reveal',
+    files: ['text-reveal.component.ts'],
+  },
+  'data-table': {
+    name: 'data-table',
+    files: [
+      'data-table/data-table.component.ts',
+      'data-table/data-table-column-header.component.ts',
+      'data-table/data-table-pagination.component.ts',
+      'data-table/data-table.types.ts',
+      'data-table/cell-host.directive.ts',
+    ],
+    dependencies: [
+      'table',
+      'input',
+      'button',
+      'checkbox',
+      'select',
+      'pagination',
+      'popover',
+    ],
+  },
   dialog: {
     name: 'dialog',
     files: ['dialog.component.ts'],
@@ -118,6 +161,7 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'field',
     files: ['field.component.ts'],
   },
+
   'file-upload': {
     name: 'file-upload',
     files: ['file-upload.component.ts'],
@@ -133,7 +177,8 @@ export const registry: Record<string, ComponentDefinition> = {
   },
   'input-group': {
     name: 'input-group',
-    files: ['input-group.component.ts'],
+    files: ['input-group.component.ts', 'input-group.token.ts'],
+    dependencies: ['input'],
   },
   'input-otp': {
     name: 'input-otp',
@@ -206,6 +251,7 @@ export const registry: Record<string, ComponentDefinition> = {
   sidebar: {
     name: 'sidebar',
     files: ['sidebar.component.ts'],
+    dependencies: ['scroll-area', 'tooltip'],
   },
   skeleton: {
     name: 'skeleton',
@@ -271,7 +317,7 @@ export const registry: Record<string, ComponentDefinition> = {
   'chip-list': {
     name: 'chip-list',
     files: ['chip-list.component.ts'],
-    dependencies: ['badge', 'button'],
+    dependencies: ['badge', 'button', 'input', 'input-group'],
   },
   'emoji-picker': {
     name: 'emoji-picker',

package/src/utils/package-manager.ts

@@ -0,0 +1,50 @@
+import { execa } from 'execa';
+import fs from 'fs-extra';
+import path from 'path';
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun';
+
+export async function getPackageManager(cwd: string): Promise<PackageManager> {
+    const userAgent = process.env['npm_config_user_agent'];
+
+    if (userAgent) {
+        if (userAgent.startsWith('yarn')) return 'yarn';
+        if (userAgent.startsWith('pnpm')) return 'pnpm';
+        if (userAgent.startsWith('bun')) return 'bun';
+        return 'npm';
+    }
+
+    // Check for lock files
+    if (await fs.pathExists(path.join(cwd, 'yarn.lock'))) return 'yarn';
+    if (await fs.pathExists(path.join(cwd, 'pnpm-lock.yaml'))) return 'pnpm';
+    if (await fs.pathExists(path.join(cwd, 'bun.lockb'))) return 'bun';
+
+    return 'npm';
+}
+
+export async function installPackages(
+    packages: string[],
+    options: { cwd: string; dev?: boolean }
+) {
+    const packageManager = await getPackageManager(options.cwd);
+
+    const args: string[] = [];
+
+    if (packageManager === 'npm') {
+        args.push('install');
+        if (options.dev) args.push('-D');
+    } else if (packageManager === 'yarn') {
+        args.push('add');
+        if (options.dev) args.push('-D');
+    } else if (packageManager === 'pnpm') {
+        args.push('add');
+        if (options.dev) args.push('-D');
+    } else if (packageManager === 'bun') {
+        args.push('add');
+        if (options.dev) args.push('-d');
+    }
+
+    args.push(...packages);
+
+    await execa(packageManager, args, { cwd: options.cwd });
+}