@tony-ui-library/core 0.0.1

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tony-ui-library/core",
+  "version": "0.0.1",
+  "description": "Angular UI component library inspired by shadcn/ui - signals, zoneless, Tailwind CSS v4",
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/forms": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^3.0.0"
+  },
+  "schematics": "./schematics/collection.json",
+  "ng-add": {
+    "save": "dependencies"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "tailwind",
+    "shadcn",
+    "signals",
+    "zoneless"
+  ],
+  "license": "MIT",
+  "author": "coci_dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coci-dev/tony-ui.git"
+  },
+  "homepage": "https://github.com/coci-dev/tony-ui.git",
+  "bugs": {
+    "url": "https://github.com/coci-dev/tony-ui/issues"
+  },
+  "exports": {
+    "./styles/*": {
+      "default": "./src/styles/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/tony-ui-library-core.d.ts",
+      "default": "./fesm2022/tony-ui-library-core.mjs"
+    }
+  },
+  "module": "fesm2022/tony-ui-library-core.mjs",
+  "typings": "types/tony-ui-library-core.d.ts"
+}

package/schematics/collection.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add TonyUI to a project",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    },
+    "component": {
+      "description": "Copy a TonyUI component source to your project (shadcn-style)",
+      "factory": "./ng-generate/component/index#generateComponent",
+      "schema": "./ng-generate/component/schema.json",
+      "aliases": ["c"]
+    }
+  }
+}

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

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

package/schematics/ng-add/index.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+function ngAdd(options) {
+    return (tree, context) => {
+        context.logger.info('Adding TonyUI to your project...');
+        // Create .postcssrc.json if it doesn't exist
+        if (!tree.exists('.postcssrc.json')) {
+            tree.create('.postcssrc.json', JSON.stringify({ plugins: { '@tailwindcss/postcss': {} } }, null, 2));
+            context.logger.info('Created .postcssrc.json');
+        }
+        // Add theme import to styles.css
+        const stylesPath = 'src/styles.css';
+        if (tree.exists(stylesPath)) {
+            const content = tree.read(stylesPath).toString('utf-8');
+            const themeImport = '@import "@tony-ui-library/core/styles/sonny-theme.css";';
+            const sourceDirective = '@source "../node_modules/@tony-ui-library/core";';
+            if (!content.includes(themeImport)) {
+                const newContent = `${themeImport}\n${sourceDirective}\n\n${content}`;
+                tree.overwrite(stylesPath, newContent);
+                context.logger.info('Added TonyUI theme import to styles.css');
+            }
+        }
+        // Add provideTonyUI to app.config.ts
+        const configPath = 'src/app/app.config.ts';
+        if (tree.exists(configPath)) {
+            let configContent = tree.read(configPath).toString('utf-8');
+            const theme = options.theme || 'light';
+            if (!configContent.includes('provideTonyUI')) {
+                // Add import statement
+                const importLine = `import { provideTonyUI } from '@tony-ui-library/core';\n`;
+                const lastImportIndex = configContent.lastIndexOf('import ');
+                const lastImportEnd = configContent.indexOf('\n', lastImportIndex);
+                configContent =
+                    configContent.slice(0, lastImportEnd + 1) +
+                        importLine +
+                        configContent.slice(lastImportEnd + 1);
+                // Add provider to providers array
+                const providersMatch = configContent.match(/providers\s*:\s*\[/);
+                if (providersMatch && providersMatch.index !== undefined) {
+                    const insertPos = providersMatch.index + providersMatch[0].length;
+                    configContent =
+                        configContent.slice(0, insertPos) +
+                            `\n    provideTonyUI({ defaultTheme: '${theme}' }),` +
+                            configContent.slice(insertPos);
+                }
+                tree.overwrite(configPath, configContent);
+                context.logger.info('Added provideTonyUI to app.config.ts');
+            }
+        }
+        return tree;
+    };
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "TonyUIAddSchema",
+  "title": "TonyUI ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project to add TonyUI to."
+    },
+    "theme": {
+      "type": "string",
+      "default": "light",
+      "enum": ["light", "dark", "corporate"],
+      "description": "Default theme to configure."
+    }
+  },
+  "required": []
+}

package/schematics/ng-generate/component/index.d.ts

@@ -0,0 +1,9 @@
+import { Rule } from '@angular-devkit/schematics';
+interface Schema {
+    name: string;
+    path: string;
+    prefix: string;
+    skipTests: boolean;
+}
+export declare function generateComponent(options: Schema): Rule;
+export {};

package/schematics/ng-generate/component/index.js

@@ -0,0 +1,439 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateComponent = generateComponent;
+const path = __importStar(require("path"));
+const AVAILABLE_COMPONENTS = [
+    'accordion',
+    'alert',
+    'avatar',
+    'badge',
+    'breadcrumb',
+    'button',
+    'button-group',
+    'calendar',
+    'card',
+    'carousel',
+    'chat-bubble',
+    'checkbox',
+    'combobox',
+    'diff',
+    'divider',
+    'dock',
+    'drawer',
+    'dropdown',
+    'fab',
+    'fieldset',
+    'file-input',
+    'indicator',
+    'input',
+    'kbd',
+    'link',
+    'list',
+    'loader',
+    'modal',
+    'navbar',
+    'pagination',
+    'progress',
+    'radial-progress',
+    'radio',
+    'rating',
+    'select',
+    'sheet',
+    'skeleton',
+    'slider',
+    'stat',
+    'status',
+    'steps',
+    'switch',
+    'table',
+    'tabs',
+    'textarea',
+    'timeline',
+    'toast',
+    'toggle',
+    'tooltip',
+    'validator',
+];
+const COMPONENT_FILES = {
+    accordion: [
+        'accordion.directives.ts',
+        'index.ts',
+    ],
+    alert: [
+        'alert.directives.ts',
+        'alert.variants.ts',
+        'index.ts',
+    ],
+    avatar: [
+        'avatar.component.ts',
+        'avatar.variants.ts',
+        'index.ts',
+    ],
+    badge: [
+        'badge.directive.ts',
+        'badge.variants.ts',
+        'index.ts',
+    ],
+    breadcrumb: [
+        'breadcrumb.directives.ts',
+        'index.ts',
+    ],
+    button: [
+        'button.directive.ts',
+        'button.variants.ts',
+        'index.ts',
+    ],
+    'button-group': [
+        'button-group.directive.ts',
+        'button-group.variants.ts',
+        'index.ts',
+    ],
+    calendar: [
+        'calendar.component.ts',
+        'index.ts',
+    ],
+    card: [
+        'card.directives.ts',
+        'card.variants.ts',
+        'index.ts',
+    ],
+    carousel: [
+        'carousel.directives.ts',
+        'index.ts',
+    ],
+    'chat-bubble': [
+        'chat-bubble.directives.ts',
+        'index.ts',
+    ],
+    checkbox: [
+        'checkbox.directive.ts',
+        'checkbox.variants.ts',
+        'index.ts',
+    ],
+    combobox: [
+        'combobox.component.ts',
+        'combobox.variants.ts',
+        'index.ts',
+    ],
+    diff: [
+        'diff.component.ts',
+        'index.ts',
+    ],
+    divider: [
+        'divider.component.ts',
+        'divider.variants.ts',
+        'index.ts',
+    ],
+    dock: [
+        'dock.directives.ts',
+        'index.ts',
+    ],
+    drawer: [
+        'drawer.directives.ts',
+        'index.ts',
+    ],
+    dropdown: [
+        'dropdown.directives.ts',
+        'dropdown.variants.ts',
+        'index.ts',
+    ],
+    fab: [
+        'fab.directives.ts',
+        'index.ts',
+    ],
+    fieldset: [
+        'fieldset.directives.ts',
+        'fieldset.variants.ts',
+        'index.ts',
+    ],
+    'file-input': [
+        'file-input.component.ts',
+        'file-input.variants.ts',
+        'index.ts',
+    ],
+    indicator: [
+        'indicator.directives.ts',
+        'index.ts',
+    ],
+    input: [
+        'input.directive.ts',
+        'input.variants.ts',
+        'label.directive.ts',
+        'index.ts',
+    ],
+    kbd: [
+        'kbd.directive.ts',
+        'kbd.variants.ts',
+        'index.ts',
+    ],
+    link: [
+        'link.directive.ts',
+        'link.variants.ts',
+        'index.ts',
+    ],
+    list: [
+        'list.directives.ts',
+        'index.ts',
+    ],
+    loader: [
+        'loader.component.ts',
+        'loader.variants.ts',
+        'index.ts',
+    ],
+    modal: [
+        'dialog.types.ts',
+        'dialog-ref.ts',
+        'dialog.service.ts',
+        'dialog.directives.ts',
+        'index.ts',
+    ],
+    navbar: [
+        'navbar.directives.ts',
+        'index.ts',
+    ],
+    pagination: [
+        'pagination.component.ts',
+        'pagination.variants.ts',
+        'index.ts',
+    ],
+    progress: [
+        'progress.component.ts',
+        'progress.variants.ts',
+        'index.ts',
+    ],
+    'radial-progress': [
+        'radial-progress.component.ts',
+        'index.ts',
+    ],
+    radio: [
+        'radio.directive.ts',
+        'radio.variants.ts',
+        'index.ts',
+    ],
+    rating: [
+        'rating.component.ts',
+        'rating.variants.ts',
+        'index.ts',
+    ],
+    select: [
+        'select.component.ts',
+        'select.variants.ts',
+        'index.ts',
+    ],
+    sheet: [
+        'sheet-ref.ts',
+        'sheet.directives.ts',
+        'sheet.service.ts',
+        'sheet.types.ts',
+        'index.ts',
+    ],
+    skeleton: [
+        'skeleton.directive.ts',
+        'skeleton.variants.ts',
+        'index.ts',
+    ],
+    slider: [
+        'slider.component.ts',
+        'slider.variants.ts',
+        'index.ts',
+    ],
+    stat: [
+        'stat.directives.ts',
+        'index.ts',
+    ],
+    status: [
+        'status.directive.ts',
+        'status.variants.ts',
+        'index.ts',
+    ],
+    steps: [
+        'steps.directives.ts',
+        'index.ts',
+    ],
+    switch: [
+        'switch.component.ts',
+        'switch.variants.ts',
+        'index.ts',
+    ],
+    table: [
+        'table.directives.ts',
+        'table.variants.ts',
+        'index.ts',
+    ],
+    tabs: [
+        'tabs.directives.ts',
+        'tabs.variants.ts',
+        'index.ts',
+    ],
+    textarea: [
+        'textarea.directive.ts',
+        'textarea.variants.ts',
+        'index.ts',
+    ],
+    timeline: [
+        'timeline.directives.ts',
+        'index.ts',
+    ],
+    toast: [
+        'toast.service.ts',
+        'toast.variants.ts',
+        'toaster.component.ts',
+        'index.ts',
+    ],
+    toggle: [
+        'toggle.directive.ts',
+        'toggle.variants.ts',
+        'index.ts',
+    ],
+    tooltip: [
+        'tooltip.directive.ts',
+        'tooltip.variants.ts',
+        'index.ts',
+    ],
+    validator: [
+        'validator.directives.ts',
+        'index.ts',
+    ],
+};
+const COMPONENT_SPEC_FILES = {
+    accordion: ['accordion.directives.spec.ts'],
+    alert: ['alert.directives.spec.ts'],
+    avatar: ['avatar.component.spec.ts'],
+    badge: ['badge.directive.spec.ts'],
+    breadcrumb: ['breadcrumb.directives.spec.ts'],
+    button: ['button.directive.spec.ts'],
+    'button-group': ['button-group.directive.spec.ts'],
+    calendar: ['calendar.component.spec.ts'],
+    card: ['card.directives.spec.ts'],
+    carousel: ['carousel.directives.spec.ts'],
+    'chat-bubble': ['chat-bubble.directives.spec.ts'],
+    checkbox: ['checkbox.directive.spec.ts'],
+    combobox: ['combobox.component.spec.ts'],
+    diff: ['diff.component.spec.ts'],
+    divider: ['divider.component.spec.ts'],
+    dock: ['dock.directives.spec.ts'],
+    drawer: ['drawer.directives.spec.ts'],
+    dropdown: ['dropdown.directives.spec.ts'],
+    fab: ['fab.directives.spec.ts'],
+    fieldset: ['fieldset.directives.spec.ts'],
+    'file-input': ['file-input.component.spec.ts'],
+    indicator: ['indicator.directives.spec.ts'],
+    input: ['input.directive.spec.ts'],
+    kbd: ['kbd.directive.spec.ts'],
+    link: ['link.directive.spec.ts'],
+    list: ['list.directives.spec.ts'],
+    loader: ['loader.component.spec.ts'],
+    modal: ['dialog.service.spec.ts'],
+    navbar: ['navbar.directives.spec.ts'],
+    pagination: ['pagination.component.spec.ts'],
+    progress: ['progress.component.spec.ts'],
+    'radial-progress': ['radial-progress.component.spec.ts'],
+    radio: ['radio.directive.spec.ts'],
+    rating: ['rating.component.spec.ts'],
+    select: ['select.component.spec.ts'],
+    sheet: ['sheet.component.spec.ts'],
+    skeleton: ['skeleton.directive.spec.ts'],
+    slider: ['slider.component.spec.ts'],
+    stat: ['stat.directives.spec.ts'],
+    status: ['status.directive.spec.ts'],
+    steps: ['steps.directives.spec.ts'],
+    switch: ['switch.component.spec.ts'],
+    table: ['table.directives.spec.ts'],
+    tabs: ['tabs.directives.spec.ts'],
+    textarea: ['textarea.directive.spec.ts'],
+    timeline: ['timeline.directives.spec.ts'],
+    toast: ['toast.service.spec.ts'],
+    toggle: ['toggle.directive.spec.ts'],
+    tooltip: ['tooltip.directive.spec.ts'],
+    validator: ['validator.directives.spec.ts'],
+};
+function generateComponent(options) {
+    return (tree, context) => {
+        const name = options.name.toLowerCase();
+        if (!AVAILABLE_COMPONENTS.includes(name)) {
+            throw new Error(`Unknown component "${name}". Available: ${AVAILABLE_COMPONENTS.join(', ')}`);
+        }
+        const targetDir = options.path || 'src/app/ui';
+        const componentDir = `${targetDir}/${name}`;
+        const files = COMPONENT_FILES[name];
+        const specFiles = options.skipTests ? [] : (COMPONENT_SPEC_FILES[name] || []);
+        // Ensure cn.ts utility exists
+        const cnTargetPath = `${targetDir}/utils/cn.ts`;
+        if (!tree.exists(cnTargetPath)) {
+            const cnContent = `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+`;
+            tree.create(cnTargetPath, cnContent);
+            context.logger.info('Created utils/cn.ts');
+        }
+        // Copy component files from the library source
+        const sourceBase = path.join(__dirname, '..', '..', '..', 'src', 'lib', name);
+        for (const file of [...files, ...specFiles]) {
+            const sourcePath = path.join(sourceBase, file);
+            const destPath = `${componentDir}/${file}`;
+            if (tree.exists(destPath)) {
+                context.logger.warn(`File already exists: ${destPath} — skipping`);
+                continue;
+            }
+            // Read from the package's source files
+            try {
+                const fs = require('fs');
+                let content = fs.readFileSync(sourcePath, 'utf-8');
+                // Rewrite imports to use local cn utility
+                content = content.replace(/from ['"]\.\.\/core\/utils\/cn['"]/g, `from '../utils/cn'`);
+                // Rewrite prefix if custom
+                if (options.prefix && options.prefix !== 'ton') {
+                    content = content.replace(/ton/g, options.prefix);
+                    content = content.replace(/Ton/g, capitalize(options.prefix));
+                }
+                tree.create(destPath, content);
+                context.logger.info(`Created ${destPath}`);
+            }
+            catch (e) {
+                context.logger.error(`Could not read source file: ${sourcePath}`);
+            }
+        }
+        context.logger.info(`Component "${name}" copied to ${componentDir}`);
+        return tree;
+    };
+}
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/schematics/ng-generate/component/schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "TonyUIGenerateComponentSchema",
+  "title": "TonyUI component generator (copy-paste style)",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The component to copy (accordion, alert, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, chat-bubble, checkbox, combobox, diff, divider, dock, drawer, dropdown, fab, fieldset, file-input, indicator, input, kbd, link, list, loader, modal, navbar, pagination, progress, radial-progress, radio, rating, select, sheet, skeleton, slider, stat, status, steps, switch, table, tabs, textarea, timeline, toast, toggle, tooltip, validator).",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "path": {
+      "type": "string",
+      "default": "src/app/ui",
+      "description": "The path to copy the component into."
+    },
+    "prefix": {
+      "type": "string",
+      "default": "ton",
+      "description": "The prefix to use for selectors."
+    },
+    "skipTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "Skip copying test files."
+    }
+  },
+  "required": ["name"]
+}