@ng-cn/core 1.0.0

package/.cursor/rules/cursor.mdc

@@ -0,0 +1,53 @@
+---
+context: true
+priority: high
+scope: project
+---
+
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

package/.prettierrc

@@ -0,0 +1,27 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "ignore",
+  "bracketSameLine": false,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    },
+    {
+      "files": "*.component.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,199 @@
+# 🎨 ng-cn
+
+> **Beautiful Angular components built with Tailwind CSS v4** — The official Angular port of [shadcn/ui](https://ui.shadcn.com/)
+
+[![npm version](https://img.shields.io/npm/v/@ng-cn/core.svg)](https://www.npmjs.com/package/@ng-cn/core)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Angular](https://img.shields.io/badge/Angular-21%2B-red.svg)](https://angular.io)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.x-06B6D4.svg)](https://tailwindcss.com)
+
+**[🌐 Live Demo](https://shadcn-angular.tigayon.com/)** • **[📚 Documentation](https://shadcn-angular.tigayon.com/docs)** • **[🐛 Report Bug](https://github.com/Tigayon-Innovations/angular-shadcn/issues)**
+
+---
+
+## ✨ Why ng-cn?
+
+- **🎨 60+ Components** - Production-ready, accessible UI components
+- **⚡ Angular 21+** - Signals, standalone components, modern control flow
+- **📦 Zero Config** - One command sets up everything
+- **🧩 Own Your Code** - Components live in your project, customize freely
+- **🌙 Dark Mode** - Built-in theme support
+- **♿ Accessible** - WCAG 2.1 AA compliant
+
+---
+
+## 🚀 Quick Start
+
+### 1. Initialize
+
+```bash
+ng add @ng-cn/core
+```
+
+This automatically:
+- ✅ Installs dependencies (Tailwind, clsx, tailwind-merge, CDK)
+- ✅ Creates `ng-cn.scss` with theme CSS variables
+- ✅ Sets up `lib/utils/cn.ts` utility function
+- ✅ Configures TypeScript path aliases (`@/ui/*`, `@/utils/*`)
+- ✅ Creates the component folder structure
+
+### 2. Add Components
+
+```bash
+# Add components to your project
+ng g @ng-cn/core:c button
+ng g @ng-cn/core:c card
+ng g @ng-cn/core:c dialog
+
+# Or use the short alias
+ng g @ng-cn/core:c accordion
+```
+
+### 3. Use
+
+```typescript
+import { Component } from '@angular/core';
+import { Button } from '@/ui/button';
+import { Card, CardHeader, CardTitle, CardContent } from '@/ui/card';
+
+@Component({
+  selector: 'app-example',
+  imports: [Button, Card, CardHeader, CardTitle, CardContent],
+  template: \`
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Get Started</Button>
+        <Button variant="outline">Learn More</Button>
+      </CardContent>
+    </Card>
+  \`,
+})
+export class ExampleComponent {}
+```
+
+---
+
+## 📦 Available Components
+
+### Form
+\`button\` \`input\` \`textarea\` \`select\` \`checkbox\` \`radio-group\` \`switch\` \`slider\` \`label\` \`toggle\`
+
+### Layout  
+\`card\` \`separator\` \`collapsible\` \`accordion\` \`tabs\` \`table\`
+
+### Feedback
+\`alert\` \`badge\` \`progress\` \`skeleton\` \`toast\` \`tooltip\`
+
+### Overlay
+\`dialog\` \`alert-dialog\` \`sheet\` \`drawer\` \`popover\` \`dropdown-menu\`
+
+### Data Display
+\`avatar\` \`calendar\` \`data-table\` \`breadcrumb\`
+
+[See all 60+ components →](https://shadcn-angular.tigayon.com/components)
+
+---
+
+## 🎨 Theming
+
+The \`ng-cn.scss\` file contains all CSS variables for easy customization:
+
+```scss
+:root {
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --accent: oklch(0.97 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --radius: 0.625rem;
+  /* ... more variables */
+}
+
+.dark {
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  /* ... dark mode overrides */
+}
+```
+
+[📖 Theming Guide →](https://shadcn-angular.tigayon.com/docs/theming)
+
+---
+
+## 📁 Project Structure
+
+After running \`ng add @ng-cn/core\`, your project will have:
+
+```
+src/
+├── ng-cn.scss              # Theme CSS variables (auto-imported)
+├── app/
+│   └── lib/
+│       ├── utils/
+│       │   ├── cn.ts       # Utility for merging classes
+│       │   └── index.ts
+│       └── components/
+│           └── ui/         # Your components live here
+│               ├── button/
+│               ├── card/
+│               └── ...
+```
+
+---
+
+## 🔧 Manual Installation
+
+If you prefer manual setup:
+
+```bash
+# 1. Install dependencies
+npm i @ng-cn/core clsx tailwind-merge class-variance-authority @angular/cdk lucide-angular
+
+# 2. Add Tailwind
+ng add tailwindcss
+
+# 3. Copy the CSS variables from docs to your styles.scss
+
+# 4. Create the cn utility in src/app/lib/utils/cn.ts
+```
+
+---
+
+## 🤖 AI Integration (MCP)
+
+ng-cn includes an MCP server for AI assistant integration:
+
+```bash
+npm run build:mcp
+```
+
+[🤖 MCP Setup Guide →](docs/MCP-SETUP.md)
+
+---
+
+## 📖 Documentation
+
+- [Installation](https://shadcn-angular.tigayon.com/docs/installation)
+- [Theming](https://shadcn-angular.tigayon.com/docs/theming)  
+- [Dark Mode](https://shadcn-angular.tigayon.com/docs/dark-mode)
+- [Components](https://shadcn-angular.tigayon.com/components)
+
+---
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE)
+
+Inspired by [shadcn/ui](https://github.com/shadcn-ui/ui)
+
+---
+
+<div align="center">
+
+Made with ❤️ by [Tigayon Innovations](https://tigayon.com)
+
+</div>

package/angular.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "shadcn-angular": {
+      "projectType": "application",
+      "schematics": {
+          "@schematics/angular:component": {
+              "prefix": "",
+              "style": "none",
+              "changeDetection": "OnPush",
+              "standalone": true,
+              "skipTests": true
+          },
+          "@schematics/angular:directive": {
+              "prefix": "",
+              "type": "directive"
+          },
+          "@schematics/angular:service": {
+              "type": "service"
+          },
+          "@schematics/angular:guard": {
+              "typeSeparator": "."
+          },
+          "@schematics/angular:interceptor": {
+              "typeSeparator": "."
+          },
+          "@schematics/angular:module": {
+              "typeSeparator": "."
+          },
+          "@schematics/angular:pipe": {
+              "typeSeparator": "."
+          },
+          "@schematics/angular:resolver": {
+              "typeSeparator": "."
+          }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "server": "src/main.server.ts",
+            "outputMode": "server",
+            "ssr": {
+              "entry": "src/server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "shadcn-angular:build:production"
+            },
+            "development": {
+              "buildTarget": "shadcn-angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/dist/schematics/component/index.d.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+interface ComponentOptions {
+    name: string;
+    project?: string;
+    path?: string;
+}
+export declare function component(options: ComponentOptions): Rule;
+export {};

package/dist/schematics/component/index.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.component = component;
+const core_1 = require("@angular-devkit/core");
+const schematics_1 = require("@angular-devkit/schematics");
+// Component registry - maps component names to their file structure
+const COMPONENT_REGISTRY = {
+    button: {
+        files: ['button.component.ts', 'index.ts'],
+        dependencies: ['class-variance-authority', 'clsx', 'tailwind-merge', '@angular/cdk']
+    },
+    card: {
+        files: ['card.component.ts', 'card-header.component.ts', 'card-title.component.ts', 'card-description.component.ts', 'card-content.component.ts', 'card-footer.component.ts', 'index.ts'],
+        dependencies: ['clsx', 'tailwind-merge']
+    },
+    input: {
+        files: ['input.component.ts', 'index.ts'],
+        dependencies: ['clsx', 'tailwind-merge', '@angular/forms']
+    },
+    label: {
+        files: ['label.component.ts', 'index.ts'],
+        dependencies: ['class-variance-authority', 'clsx', 'tailwind-merge']
+    },
+    separator: {
+        files: ['separator.component.ts', 'index.ts'],
+        dependencies: ['clsx', 'tailwind-merge']
+    },
+    badge: {
+        files: ['badge.component.ts', 'index.ts'],
+        dependencies: ['class-variance-authority', 'clsx', 'tailwind-merge']
+    },
+    alert: {
+        files: ['alert.component.ts', 'alert-title.component.ts', 'alert-description.component.ts', 'index.ts'],
+        dependencies: ['class-variance-authority', 'clsx', 'tailwind-merge']
+    },
+    dialog: {
+        files: ['dialog.component.ts', 'dialog-content.component.ts', 'dialog-header.component.ts', 'dialog-footer.component.ts', 'dialog-title.component.ts', 'dialog-description.component.ts', 'index.ts'],
+        dependencies: ['@angular/cdk', 'clsx', 'tailwind-merge']
+    },
+    'data-table': {
+        files: [
+            'data-table.component.ts',
+            'data-table-content.component.ts',
+            'data-table-context.ts',
+            'data-table-pagination.component.ts',
+            'data-table-search.component.ts',
+            'data-table-toolbar.component.ts',
+            'data-table-view-options.component.ts',
+            'index.ts'
+        ],
+        dependencies: ['clsx', 'tailwind-merge', 'lucide-angular']
+    },
+    // Add more components as needed
+};
+function component(options) {
+    return (tree, context) => {
+        const componentName = options.name.toLowerCase();
+        if (!COMPONENT_REGISTRY[componentName]) {
+            const availableComponents = Object.keys(COMPONENT_REGISTRY).join(', ');
+            throw new schematics_1.SchematicsException(`Component "${componentName}" not found. Available components: ${availableComponents}`);
+        }
+        const componentInfo = COMPONENT_REGISTRY[componentName];
+        const basePath = options.path || 'src/app/lib/components/ui';
+        const componentPath = (0, core_1.normalize)((0, core_1.join)((0, core_1.normalize)(basePath), (0, core_1.normalize)(componentName)));
+        context.logger.info(`📦 Installing ${componentName} component...`);
+        // Check if component directory already exists
+        if (tree.exists(componentPath)) {
+            context.logger.warn(`⚠️  Component directory ${componentPath} already exists. Skipping...`);
+            return tree;
+        }
+        // Create component directory
+        tree.create((0, core_1.join)(componentPath, '.gitkeep'), '');
+        // Copy component files from the source
+        const sourceBasePath = `src/app/lib/components/ui/${componentName}`;
+        for (const file of componentInfo.files) {
+            const sourcePath = (0, core_1.join)((0, core_1.normalize)(sourceBasePath), (0, core_1.normalize)(file));
+            const targetPath = (0, core_1.join)(componentPath, (0, core_1.normalize)(file));
+            if (tree.exists(sourcePath)) {
+                const content = tree.read(sourcePath);
+                if (content) {
+                    tree.create(targetPath, content);
+                    context.logger.info(`  ✅ Created ${file}`);
+                }
+            }
+            else {
+                context.logger.warn(`  ⚠️  Source file ${sourcePath} not found`);
+            }
+        }
+        // Check dependencies
+        context.logger.info('');
+        context.logger.info('📚 Required dependencies:');
+        for (const dep of componentInfo.dependencies) {
+            context.logger.info(`  - ${dep}`);
+        }
+        context.logger.info('');
+        context.logger.info(`✅ ${componentName} component installed successfully!`);
+        context.logger.info('');
+        context.logger.info('📖 Import the component:');
+        context.logger.info(`   import { ${toPascalCase(componentName)} } from '@/ui/${componentName}';`);
+        context.logger.info('');
+        return tree;
+    };
+}
+function toPascalCase(str) {
+    return str
+        .split('-')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}

package/dist/schematics/ng-add/index.d.ts

@@ -0,0 +1,7 @@
+import { Rule } from '@angular-devkit/schematics';
+interface NgAddOptions {
+    project?: string;
+    skipInstall?: boolean;
+}
+export declare function ngAdd(options: NgAddOptions): Rule;
+export {};

package/dist/schematics/ng-add/index.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+function ngAdd(options) {
+    return (tree, context) => {
+        context.logger.info('✨ Adding shadcn-angular to your project...');
+        // Add dependencies to package.json
+        const packageJsonPath = '/package.json';
+        if (tree.exists(packageJsonPath)) {
+            const packageJson = JSON.parse(tree.read(packageJsonPath).toString('utf-8'));
+            const requiredDependencies = {
+                'lucide-angular': '^0.562.0',
+                'class-variance-authority': '^0.7.1',
+                'clsx': '^2.1.1',
+                'tailwind-merge': '^3.4.0',
+                '@angular/cdk': '^21.0.5',
+                'tailwindcss': '^4.1.18',
+                '@tailwindcss/postcss': '^4.1.18'
+            };
+            // Check and add missing dependencies
+            let needsInstall = false;
+            for (const [pkg, version] of Object.entries(requiredDependencies)) {
+                if (!packageJson.dependencies?.[pkg]) {
+                    packageJson.dependencies = packageJson.dependencies || {};
+                    packageJson.dependencies[pkg] = version;
+                    needsInstall = true;
+                    context.logger.info(`  📦 Adding ${pkg}@${version}`);
+                }
+            }
+            if (needsInstall) {
+                tree.overwrite(packageJsonPath, JSON.stringify(packageJson, null, 2));
+                if (!options.skipInstall) {
+                    context.addTask(new tasks_1.NodePackageInstallTask());
+                }
+            }
+            else {
+                context.logger.info('  ✅ All dependencies already installed');
+            }
+        }
+        context.logger.info('');
+        context.logger.info('✅ shadcn-angular setup complete!');
+        context.logger.info('');
+        context.logger.info('📚 Next steps:');
+        context.logger.info('  1. Ensure Tailwind CSS is configured in your project');
+        context.logger.info('  2. Add CSS variables to your styles.scss (see docs)');
+        context.logger.info('  3. Install components: ng generate shadcn-angular:component button');
+        context.logger.info('');
+        return tree;
+    };
+}