@shadng/sng-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ShadNG Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# sng-ui
+
+Native Angular UI components inspired by shadcn/ui Figma designs.
+
+[![npm](https://img.shields.io/npm/v/sng-ui)](https://www.npmjs.com/package//sng-ui)
+[![Angular](https://img.shields.io/badge/Angular-21-dd0031)](https://angular.dev)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38bdf8)](https://tailwindcss.com)
+[![License](https://img.shields.io/badge/License-MIT-green)](LICENSE)
+
+## Installation
+
+```bash
+npm install sng-ui
+```
+
+Peer dependencies:
+
+```json
+{
+  "@angular/common": "^21.0.0",
+  "@angular/core": "^21.0.0",
+  "@angular/platform-browser": "^21.0.0",
+  "shiki": "^3.0.0"
+}
+```
+
+`shiki` is optional and only needed for `code-block` / `preview-box`.
+
+## CLI (Copy-Paste Model)
+
+```bash
+npx sng-ui init
+npx sng-ui add button
+npx sng-ui add table menu
+```
+
+The CLI copies editable component source into your app.
+
+## Usage
+
+```ts
+import { Component } from '@angular/core';
+import { SngButton } from 'sng-ui';
+
+@Component({
+  selector: 'app-example',
+  imports: [SngButton],
+  template: `
+    <sng-button class="bg-primary text-primary-foreground shadow-xs hover:bg-primary/90">
+      Click me
+    </sng-button>
+  `,
+})
+export class ExampleComponent {}
+```
+
+## Theming
+
+Theme tokens are defined in `src/lib/styles/sng-themes.css`.
+
+## Package Checks
+
+```bash
+npm run test:cli
+npm run pack:check
+```
+
+## Notes Before First Public Release
+
+- Update `repository`, `homepage`, and `bugs.url` in `package.json` to your final GitHub repository.
+- Keep tests and Storybook stories in this repo for contributors; npm publish excludes test/story artifacts via `.npmignore`.
+
+## License
+
+MIT

package/cli/sng-ui.js

@@ -0,0 +1,331 @@
+#!/usr/bin/env node
+
+const fs = require('node:fs');
+const path = require('node:path');
+
+const CONFIG_FILE = 'sng-ui.json';
+const DEFAULT_COMPONENTS_DIR = 'src/lib/sng-ui';
+const PACKAGE_ROOT = path.resolve(__dirname, '..');
+const LIB_SOURCE_ROOT = path.join(PACKAGE_ROOT, 'src', 'lib');
+
+const ALWAYS_AVAILABLE_IMPORTS = new Set([
+  '@angular/animations',
+  '@angular/common',
+  '@angular/core',
+  '@angular/forms',
+  '@angular/platform-browser',
+  '@angular/router',
+  'rxjs',
+  'tslib'
+]);
+
+function printHelp() {
+  console.log(`sng-ui CLI
+
+Usage:
+  npx sng-ui init [--path <dir>] [--force]
+  npx sng-ui add <component...> [--path <dir>] [--force] [--dry-run]
+
+Examples:
+  npx sng-ui init
+  npx sng-ui add button
+  npx sng-ui add table menu
+  npx sng-ui add slider --path src/lib/ui
+`);
+}
+
+function parseOptions(tokens) {
+  const options = { force: false, dryRun: false, path: null, values: [] };
+
+  for (let index = 0; index < tokens.length; index += 1) {
+    const token = tokens[index];
+    if (token === '--force') {
+      options.force = true;
+      continue;
+    }
+    if (token === '--dry-run') {
+      options.dryRun = true;
+      continue;
+    }
+    if (token === '--path') {
+      const next = tokens[index + 1];
+      if (!next || next.startsWith('--')) {
+        throw new Error('Missing value for --path.');
+      }
+      options.path = next;
+      index += 1;
+      continue;
+    }
+    options.values.push(token);
+  }
+
+  return options;
+}
+
+function readConfig(cwd) {
+  const configPath = path.join(cwd, CONFIG_FILE);
+  if (!fs.existsSync(configPath)) {
+    return { componentsDir: DEFAULT_COMPONENTS_DIR };
+  }
+  const raw = fs.readFileSync(configPath, 'utf8');
+  const parsed = JSON.parse(raw);
+  return {
+    componentsDir: typeof parsed.componentsDir === 'string' && parsed.componentsDir.trim()
+      ? parsed.componentsDir
+      : DEFAULT_COMPONENTS_DIR
+  };
+}
+
+function writeConfig(cwd, componentsDir, force) {
+  const configPath = path.join(cwd, CONFIG_FILE);
+  if (fs.existsSync(configPath) && !force) {
+    throw new Error(`Config already exists at ${CONFIG_FILE}. Use --force to overwrite.`);
+  }
+  const payload = {
+    componentsDir
+  };
+  fs.writeFileSync(configPath, `${JSON.stringify(payload, null, 2)}\n`, 'utf8');
+  fs.mkdirSync(path.resolve(cwd, componentsDir), { recursive: true });
+}
+
+function getComponentFolderMap() {
+  const entries = fs.readdirSync(LIB_SOURCE_ROOT, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name)
+    .filter((name) => name !== 'styles');
+
+  const map = new Map();
+  for (const folder of entries) {
+    map.set(folder, folder);
+    if (folder.startsWith('sng-')) {
+      map.set(folder.slice(4), folder);
+    }
+  }
+  return map;
+}
+
+function resolveComponentFolder(componentName, folderMap) {
+  return folderMap.get(componentName) || null;
+}
+
+function shouldSkipFile(filePath) {
+  return filePath.endsWith('.spec.ts') || filePath.endsWith('.stories.ts');
+}
+
+function listFilesRecursively(directoryPath) {
+  const files = [];
+  const stack = [directoryPath];
+
+  while (stack.length) {
+    const current = stack.pop();
+    const entries = fs.readdirSync(current, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = path.join(current, entry.name);
+      if (entry.isDirectory()) {
+        stack.push(fullPath);
+      } else if (!shouldSkipFile(fullPath)) {
+        files.push(fullPath);
+      }
+    }
+  }
+
+  return files;
+}
+
+function resolveImportFile(fromFile, importPath) {
+  const fromDirectory = path.dirname(fromFile);
+  const base = path.resolve(fromDirectory, importPath);
+  const candidates = [
+    base,
+    `${base}.ts`,
+    `${base}.js`,
+    path.join(base, 'index.ts'),
+    path.join(base, 'index.js')
+  ];
+
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate) && fs.statSync(candidate).isFile()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+function extractImports(filePath) {
+  const content = fs.readFileSync(filePath, 'utf8')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^\s*\/\/.*$/gm, '');
+  const imports = [];
+  const pattern = /\bfrom\s+['"]([^'"]+)['"]|import\s+['"]([^'"]+)['"]/g;
+  let match = pattern.exec(content);
+  while (match) {
+    imports.push(match[1] || match[2]);
+    match = pattern.exec(content);
+  }
+  return imports;
+}
+
+function toPackageName(importPath) {
+  if (importPath.startsWith('@')) {
+    const parts = importPath.split('/');
+    return parts.length >= 2 ? `${parts[0]}/${parts[1]}` : importPath;
+  }
+  return importPath.split('/')[0];
+}
+
+function collectComponentFiles(componentFolder) {
+  const queue = [];
+  const visitedFiles = new Set();
+  const visitedFolders = new Set([componentFolder]);
+
+  const rootPath = path.join(LIB_SOURCE_ROOT, componentFolder);
+  for (const file of listFilesRecursively(rootPath)) {
+    queue.push(file);
+  }
+
+  const externalPackages = new Set();
+
+  while (queue.length) {
+    const currentFile = queue.shift();
+    if (visitedFiles.has(currentFile)) {
+      continue;
+    }
+    visitedFiles.add(currentFile);
+
+    const imports = extractImports(currentFile);
+    for (const importPath of imports) {
+      if (importPath.startsWith('.')) {
+        const resolved = resolveImportFile(currentFile, importPath);
+        if (!resolved || !resolved.startsWith(LIB_SOURCE_ROOT) || shouldSkipFile(resolved)) {
+          continue;
+        }
+        const relative = path.relative(LIB_SOURCE_ROOT, resolved);
+        const rootFolder = relative.split(path.sep)[0];
+        if (!visitedFolders.has(rootFolder)) {
+          visitedFolders.add(rootFolder);
+          for (const file of listFilesRecursively(path.join(LIB_SOURCE_ROOT, rootFolder))) {
+            queue.push(file);
+          }
+        } else {
+          queue.push(resolved);
+        }
+      } else if (!ALWAYS_AVAILABLE_IMPORTS.has(importPath) && !importPath.startsWith('node:')) {
+        const packageName = toPackageName(importPath);
+        if (!ALWAYS_AVAILABLE_IMPORTS.has(packageName) && packageName !== 'sng-ui') {
+          externalPackages.add(packageName);
+        }
+      }
+    }
+  }
+
+  return {
+    files: [...visitedFiles].sort(),
+    externalPackages: [...externalPackages].sort()
+  };
+}
+
+function copyFiles(files, destinationRoot, options) {
+  let copied = 0;
+  let skipped = 0;
+
+  for (const sourceFile of files) {
+    const relative = path.relative(LIB_SOURCE_ROOT, sourceFile);
+    const destination = path.join(destinationRoot, relative);
+    const destinationDirectory = path.dirname(destination);
+
+    if (!options.dryRun) {
+      fs.mkdirSync(destinationDirectory, { recursive: true });
+    }
+
+    if (fs.existsSync(destination) && !options.force) {
+      skipped += 1;
+      continue;
+    }
+
+    if (!options.dryRun) {
+      fs.copyFileSync(sourceFile, destination);
+    }
+    copied += 1;
+  }
+
+  return { copied, skipped };
+}
+
+function runInit(cwd, options) {
+  const componentsDir = options.path || DEFAULT_COMPONENTS_DIR;
+  writeConfig(cwd, componentsDir, options.force);
+  console.log(`Created ${CONFIG_FILE} with componentsDir="${componentsDir}".`);
+}
+
+function runAdd(cwd, options) {
+  if (!options.values.length) {
+    throw new Error('Missing component name. Example: npx sng-ui add button');
+  }
+
+  const config = readConfig(cwd);
+  const destinationRoot = path.resolve(cwd, options.path || config.componentsDir);
+  const folderMap = getComponentFolderMap();
+  const missing = [];
+
+  let totalCopied = 0;
+  let totalSkipped = 0;
+  const dependencySet = new Set();
+
+  for (const componentName of options.values) {
+    const folder = resolveComponentFolder(componentName, folderMap);
+    if (!folder) {
+      missing.push(componentName);
+      continue;
+    }
+
+    const { files, externalPackages } = collectComponentFiles(folder);
+    const result = copyFiles(files, destinationRoot, options);
+    totalCopied += result.copied;
+    totalSkipped += result.skipped;
+    for (const dependency of externalPackages) {
+      dependencySet.add(dependency);
+    }
+    console.log(`Added ${componentName}: ${result.copied} file(s), ${result.skipped} skipped.`);
+  }
+
+  if (missing.length) {
+    const available = [...new Set([...folderMap.keys()].filter((name) => !name.startsWith('sng-')))].sort();
+    throw new Error(`Unknown component(s): ${missing.join(', ')}.\nAvailable: ${available.join(', ')}`);
+  }
+
+  console.log(`Done. Copied ${totalCopied} file(s), skipped ${totalSkipped}.`);
+  if (dependencySet.size) {
+    console.log(`Install peer deps if missing:\n  npm install ${[...dependencySet].join(' ')}`);
+  }
+}
+
+function main() {
+  const cwd = process.cwd();
+  const args = process.argv.slice(2);
+  const command = args.shift();
+
+  if (!command || command === '--help' || command === '-h') {
+    printHelp();
+    return;
+  }
+
+  const options = parseOptions(args);
+
+  if (command === 'init') {
+    runInit(cwd, options);
+    return;
+  }
+  if (command === 'add') {
+    runAdd(cwd, options);
+    return;
+  }
+
+  throw new Error(`Unknown command: ${command}`);
+}
+
+try {
+  main();
+} catch (error) {
+  console.error(`[sng-ui] ${error.message}`);
+  process.exit(1);
+}

package/ng-package.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist/sng-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "input": "cli",
+      "glob": "**/*",
+      "ignore": [
+        "**/*.spec.cjs"
+      ],
+      "output": "cli"
+    },
+    "registry.json",
+    "LICENSE",
+    {
+      "input": "src/lib",
+      "glob": "**/*.ts",
+      "ignore": [
+        "**/*.spec.ts",
+        "**/*.stories.ts"
+      ],
+      "output": "src/lib"
+    },
+    "src/lib/styles/**/*.css"
+  ]
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@shadng/sng-ui",
+  "version": "1.0.0",
+  "description": "Native Angular UI components inspired by shadcn/ui Figma designs.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alimjanablikim/sng-ui.git"
+  },
+  "homepage": "https://github.com/alimjanablikim/sng-ui",
+  "bugs": {
+    "url": "https://github.com/alimjanablikim/sng-ui/issues"
+  },
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "tailwindcss",
+    "shadcn"
+  ],
+  "bin": {
+    "sng-ui": "cli/sng-ui.js"
+  },
+  "engines": {
+    "node": ">=20.11.0",
+    "npm": ">=10.0.0"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "shiki": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test:cli": "node --test cli/sng-ui.cli.spec.cjs",
+    "pack:check": "npm pack --dry-run"
+  },
+  "files": [
+    "src/",
+    "!src/**/*.spec.ts",
+    "!src/**/*.stories.ts",
+    "cli/",
+    "!cli/*.spec.cjs",
+    "registry.json",
+    "README.md",
+    "LICENSE",
+    "ng-package.json",
+    "tsconfig.json",
+    "tsconfig.lib.json",
+    "tsconfig.lib.prod.json"
+  ]
+}

package/registry.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "./registry-schema.json",
+  "name": "sng-ui",
+  "description": "ShadNG UI Component Registry",
+  "components": {
+    "cn": {
+      "name": "cn",
+      "description": "Utility for merging Tailwind CSS classes",
+      "files": ["lib/button/cn.ts"],
+      "dependencies": {
+        "npm": ["clsx", "tailwind-merge"]
+      }
+    },
+    "button": {
+      "name": "button",
+      "description": "Angular button component with class-based styling",
+      "files": ["lib/button/sng-button.ts"],
+      "dependencies": {
+        "internal": ["cn"]
+      }
+    },
+    "code-block": {
+      "name": "code-block",
+      "description": "Code block component with VS Code-accurate syntax highlighting powered by Shiki. Includes copy button and language header.",
+      "files": ["lib/code-block/sng-code-block.ts", "lib/code-block/index.ts"],
+      "dependencies": {
+        "npm": ["shiki"],
+        "internal": ["cn"]
+      },
+      "note": "Requires 'shiki' npm package. Supports 200+ languages and all VS Code themes."
+    },
+    "preview-box": {
+      "name": "preview-box",
+      "description": "Tabbed preview component with Preview, Code, and Source tabs. Perfect for documentation sites.",
+      "files": ["lib/preview-box/sng-preview-box.ts"],
+      "dependencies": {
+        "internal": ["cn", "code-block"],
+        "npm": ["shiki"]
+      },
+      "note": "Uses code-block for syntax-highlighted code display in Code/Source tabs."
+    },
+    "accordion": {
+      "name": "accordion",
+      "description": "Angular accordion component for collapsible content sections. Built with Angular signals for accessibility.",
+      "files": [
+        "lib/accordion/sng-accordion.ts",
+        "lib/accordion/sng-accordion-item.ts",
+        "lib/accordion/sng-accordion-trigger.ts",
+        "lib/accordion/sng-accordion-content.ts",
+        "lib/accordion/index.ts"
+      ],
+      "dependencies": {
+        "internal": ["cn"]
+      },
+      "note": "Includes smooth expand/collapse animations. Supports single/multiple mode and collapsible options."
+    },
+    "alert": {
+      "name": "alert",
+      "description": "Angular alert component for displaying important messages, errors, and notifications. Supports icons and multiple variants via Tailwind classes.",
+      "files": [
+        "lib/alert/sng-alert.ts",
+        "lib/alert/sng-alert-title.ts",
+        "lib/alert/sng-alert-description.ts",
+        "lib/alert/index.ts"
+      ],
+      "dependencies": {
+        "internal": ["cn"]
+      },
+      "note": "Purely presentational component. No Angular CDK required. Use Alert Dialog for confirmation modals."
+    }
+  }
+}

package/src/lib/accordion/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/accordion/index.ts

@@ -0,0 +1,18 @@
+// Components
+export { SngAccordion } from './sng-accordion';
+export { SngAccordionItem } from './sng-accordion-item';
+export { SngAccordionTrigger } from './sng-accordion-trigger';
+export { SngAccordionContent } from './sng-accordion-content';
+
+// Types
+export type {
+  SngAccordionType,
+  SngAccordionValue,
+  SngAccordionState,
+  SngAccordionOrientation,
+  SngAccordionLayout,
+  SngAccordionApi,
+  SngAccordionItemApi,
+  SngAccordionTriggerApi,
+  SngAccordionContentApi,
+} from './sng-accordion.types';