@ng-cn/core 1.0.5 → 1.0.7

package/schematics/ng-add/schema.json

@@ -11,6 +11,25 @@
         "$source": "projectName"
       }
     },
+    "theme": {
+      "type": "string",
+      "description": "Theme variant to use for styling. Choose from: shadcn, github, vercel, apple, openai, clickup, linear.",
+      "default": "shadcn",
+      "enum": ["shadcn", "github", "vercel", "apple", "openai", "clickup", "linear"],
+      "x-prompt": {
+        "message": "Which theme variant would you like to use?",
+        "type": "list",
+        "items": [
+          { "value": "shadcn", "label": "shadcn - The default clean, minimal, and professional theme" },
+          { "value": "github", "label": "GitHub - Inspired by GitHub's clean developer-focused design" },
+          { "value": "vercel", "label": "Vercel - Bold black and white design aesthetic" },
+          { "value": "apple", "label": "Apple - Elegant, sophisticated design language" },
+          { "value": "openai", "label": "OpenAI - Modern, tech-forward aesthetic" },
+          { "value": "clickup", "label": "ClickUp - Vibrant, colorful productivity aesthetic" },
+          { "value": "linear", "label": "Linear - Sleek, issue tracking inspired design" }
+        ]
+      }
+    },
     "skipInstall": {
       "type": "boolean",
       "default": false,
@@ -22,47 +41,9 @@
       "description": "Skip creating ng-cn.scss styles file."
     },
     "components": {
-      "type": "array",
-      "items": {
-        "type": "string"
-      },
-      "default": [],
-      "description": "Components to install initially.",
-      "x-prompt": {
-        "message": "Which components would you like to add? (Press space to select, enter to confirm)",
-        "type": "list",
-        "multiselect": true,
-        "items": [
-          { "value": "button", "label": "Button - Displays a button or a component that looks like a button" },
-          { "value": "card", "label": "Card - Displays a card with header, content, and footer" },
-          { "value": "input", "label": "Input - Displays a form input field" },
-          { "value": "label", "label": "Label - Renders an accessible label associated with controls" },
-          { "value": "checkbox", "label": "Checkbox - A control that allows toggling between checked and not checked" },
-          { "value": "select", "label": "Select - Displays a list of options for the user to pick from" },
-          { "value": "dialog", "label": "Dialog - A window overlaid on the primary window" },
-          { "value": "toast", "label": "Toast - A succinct message that is displayed temporarily" },
-          { "value": "dropdown-menu", "label": "Dropdown Menu - Displays a menu when triggered" },
-          { "value": "tabs", "label": "Tabs - A set of layered sections of content" },
-          { "value": "table", "label": "Table - A responsive table component" },
-          { "value": "avatar", "label": "Avatar - An image element with a fallback for representing the user" },
-          { "value": "badge", "label": "Badge - Displays a badge or a component that looks like a badge" },
-          { "value": "alert", "label": "Alert - Displays a callout for user attention" },
-          { "value": "tooltip", "label": "Tooltip - A popup that displays information related to an element" },
-          { "value": "progress", "label": "Progress - Displays an indicator showing the completion progress" },
-          { "value": "skeleton", "label": "Skeleton - Use to show a placeholder while content is loading" },
-          { "value": "separator", "label": "Separator - Visually or semantically separates content" },
-          { "value": "switch", "label": "Switch - A control that allows toggling between checked and not checked" },
-          { "value": "textarea", "label": "Textarea - Displays a form textarea" },
-          { "value": "accordion", "label": "Accordion - A vertically stacked set of interactive headings" },
-          { "value": "sheet", "label": "Sheet - Extends the Dialog component to display complementary content" },
-          { "value": "popover", "label": "Popover - Displays rich content in a portal, triggered by a button" },
-          { "value": "calendar", "label": "Calendar - A date field component for entering and editing dates" },
-          { "value": "command", "label": "Command - Fast, composable, unstyled command menu" },
-          { "value": "form", "label": "Form - Building forms with validation" },
-          { "value": "sidebar", "label": "Sidebar - A composable, themeable and customizable sidebar" },
-          { "value": "spinner", "label": "Spinner - Loading indicator animations" }
-        ]
-      }
+      "type": "string",
+      "default": "",
+      "description": "Components to install. Use 'all' to install all 50+ components, or provide a comma-separated list like 'button,card,dialog'. Leave empty to skip component installation."
     }
   }
 }

package/schematics/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ng-cn/core-schematics",
+  "version": "0.0.1",
+  "schematics": "./collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  }
+}

package/.cursor/rules/cursor.mdc

@@ -1,53 +0,0 @@
----
-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

@@ -1,17 +0,0 @@
-# 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

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

package/.prettierrc

@@ -1,27 +0,0 @@
-{
-  "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

@@ -1,200 +0,0 @@
-# 🎨 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)
-- [Contributing Guide](CONTRIBUTING.md)
-
----
-
-## 📄 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

@@ -1,122 +0,0 @@
-{
-  "$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/auto/tailwind/resolve-margin-and-text.py

@@ -1,30 +0,0 @@
-import os
-import re
-
-def process_html_file(file_path):
-    with open(file_path, 'r', encoding='utf-8') as file:
-        content = file.read()
-
-    # Replace classes
-    new_content = re.sub(r'\bmr-', 'me-', content)
-    new_content = re.sub(r'\bml-', 'ms-', new_content)
-    new_content = re.sub(r'\btext-left\b', 'text-start', new_content)
-    new_content = re.sub(r'\btext-right\b', 'text-end', new_content)
-
-    if new_content != content:
-        with open(file_path, 'w', encoding='utf-8') as file:
-            file.write(new_content)
-        return True
-    return False
-
-def traverse_and_process(directory):
-    for root, _, files in os.walk(directory):
-        for file in files:
-            if file.endswith('.html'):
-                file_path = os.path.join(root, file)
-                if process_html_file(file_path):
-                    print(f"Changes made to: {file_path}")
-
-if __name__ == "__main__":
-    src_directory = 'src'
-    traverse_and_process(src_directory)

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

@@ -1,8 +0,0 @@
-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

@@ -1,109 +0,0 @@
-"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

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