angular-dev-utils 1.0.1

package/.github/workflows/ci.yml

@@ -0,0 +1,39 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build
+
+      - name: Archive build artifacts
+        if: matrix.node-version == '20.x'
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+          retention-days: 7

package/.github/workflows/publish.yml

@@ -0,0 +1,53 @@
+name: Publish to npm
+
+on:
+  release:
+    types: [created]
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Version to publish (e.g., 1.0.0)"
+        required: false
+        type: string
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.x"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build
+
+      - name: Copy package files
+        run: |
+          cp package.json dist/angular-dev-utils/
+          cp README.md dist/angular-dev-utils/
+          cp LICENSE dist/angular-dev-utils/
+
+      - name: Publish to npm Registry
+        run: |
+          cd dist/angular-dev-utils
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create Git Tag
+        if: github.event.inputs.version != ''
+        run: |
+          git tag v${{ github.event.inputs.version }}
+          git push origin v${{ github.event.inputs.version }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 hopesf
+
+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,60 @@
+# Angular Dev Utils
+
+Modern Angular component library with standalone components and Tailwind CSS.
+
+[![CI](https://github.com/hopesf/Dev-Utils/actions/workflows/ci.yml/badge.svg)](https://github.com/hopesf/Dev-Utils/actions/workflows/ci.yml)
+[![npm version](https://badge.fury.io/js/hopesf-angular-dev-utils.svg)](https://www.npmjs.com/package/hopesf-angular-dev-utils)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Installation
+
+```bash
+npm install hopesf-angular-dev-utils
+```
+
+No authentication or tokens required!
+
+## Quick Start
+
+Import components directly in your standalone components:
+
+```typescript
+import { Component } from "@angular/core";
+import { ButtonComponent, CardComponent, InputComponent } from "hopesf-angular-dev-utils";
+
+@Component({
+  selector: "app-example",
+  standalone: true,
+  imports: [ButtonComponent, CardComponent, InputComponent],
+  template: `
+    <adu-card>
+      <adu-input label="Name" [(ngModel)]="name"></adu-input>
+      <adu-button variant="primary" (clicked)="submit()">Submit</adu-button>
+    </adu-card>
+  `,
+})
+export class ExampleComponent {
+  name = "";
+
+  submit() {
+    console.log("Name:", this.name);
+  }
+}
+```
+
+## Documentation
+
+For full documentation, visit the [main README](../../README.md).
+
+## Components
+
+- **Button** - Customizable button with variants and loading states
+- **Input** - Form-ready input with validation
+- **Card** - Container with header/footer sections
+- **Modal** - Dialog with service and component modes
+- **Table** - Data table with sorting and pagination
+- **Spinner** - Loading indicator with overlay option
+
+## License
+
+MIT

package/angular.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-dev-utils": {
+      "projectType": "library",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "adu",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist/angular-dev-utils",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "cssUrl": "inline"
+  }
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "angular-dev-utils",
+  "version": "1.0.1",
+  "description": "Modern Angular UI component library with Tailwind CSS styling",
+  "keywords": [
+    "angular",
+    "components",
+    "ui",
+    "tailwind",
+    "library",
+    "standalone"
+  ],
+  "author": "hopesf",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hopesf/Dev-Utils.git"
+  },
+  "homepage": "https://github.com/hopesf/Dev-Utils#readme",
+  "bugs": {
+    "url": "https://github.com/hopesf/Dev-Utils/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build angular-dev-utils",
+    "watch": "ng build angular-dev-utils --watch",
+    "test": "ng test angular-dev-utils"
+  },
+  "private": false,
+  "peerDependencies": {
+    "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/animations": "^17.3.0",
+    "@angular/common": "^17.3.0",
+    "@angular/compiler": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.12",
+    "@angular/platform-browser": "^17.3.0",
+    "@angular/platform-browser-dynamic": "^17.3.0",
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.14.3",
+    "@angular-devkit/build-angular": "^17.3.0",
+    "@angular/cli": "^17.3.0",
+    "@angular/compiler-cli": "^17.3.0",
+    "autoprefixer": "^10.4.17",
+    "ng-packagr": "^17.3.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "~5.4.2"
+  }
+}

package/src/lib/components/button/button.component.ts

@@ -0,0 +1,100 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonVariant, ButtonSize } from '../../models/types';
+
+@Component({
+  selector: 'adu-button',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button
+      [type]="type"
+      [disabled]="disabled || loading"
+      [class]="buttonClasses"
+      (click)="handleClick($event)"
+    >
+      <span *ngIf="loading" class="adu-button-spinner"></span>
+      <ng-content></ng-content>
+    </button>
+  `,
+  styles: [`
+    .adu-button {
+      @apply inline-flex items-center justify-center gap-2 font-medium rounded-md transition-colors duration-200;
+      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2;
+      @apply disabled:pointer-events-none disabled:opacity-50;
+    }
+
+    /* Variants */
+    .adu-button-primary {
+      @apply bg-zinc-900 text-zinc-50 hover:bg-zinc-800 shadow-sm;
+    }
+
+    .adu-button-secondary {
+      @apply bg-zinc-100 text-zinc-900 hover:bg-zinc-200 shadow-sm;
+    }
+
+    .adu-button-success {
+      @apply bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm;
+    }
+
+    .adu-button-danger {
+      @apply bg-red-600 text-zinc-50 hover:bg-red-700 shadow-sm;
+    }
+
+    .adu-button-warning {
+      @apply bg-amber-500 text-white hover:bg-amber-600 shadow-sm;
+    }
+
+    .adu-button-ghost {
+      @apply bg-transparent hover:bg-zinc-100 hover:text-zinc-900 text-zinc-700;
+    }
+
+    .adu-button-outline {
+      @apply border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 text-zinc-900;
+    }
+
+    /* Sizes */
+    .adu-button-sm {
+      @apply h-9 px-3 text-sm rounded-md;
+    }
+
+    .adu-button-md {
+      @apply h-10 px-4 text-sm;
+    }
+
+    .adu-button-lg {
+      @apply h-11 px-8 text-base;
+    }
+
+    /* Loading Spinner */
+    .adu-button-spinner {
+      @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
+    }
+  `]
+})
+export class ButtonComponent {
+  @Input() variant: ButtonVariant = 'primary';
+  @Input() size: ButtonSize = 'md';
+  @Input() type: 'button' | 'submit' | 'reset' = 'button';
+  @Input() disabled = false;
+  @Input() loading = false;
+  @Input() fullWidth = false;
+
+  @Output() clicked = new EventEmitter<MouseEvent>();
+
+  get buttonClasses(): string {
+    const classes = ['adu-button', `adu-button-${this.variant}`, `adu-button-${this.size}`];
+
+    if (this.fullWidth) {
+      classes.push('w-full');
+    }
+
+    return classes.join(' ');
+  }
+
+  handleClick(event: MouseEvent): void {
+    if (!this.disabled && !this.loading) {
+      this.clicked.emit(event);
+    }
+  }
+}

package/src/lib/components/card/card.component.ts

@@ -0,0 +1,101 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'adu-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div [class]="cardClasses">
+      <div *ngIf="hasHeader" class="adu-card-header">
+        <ng-content select="[card-header]"></ng-content>
+      </div>
+      
+      <div class="adu-card-body">
+        <ng-content></ng-content>
+      </div>
+      
+      <div *ngIf="hasFooter" class="adu-card-footer">
+        <ng-content select="[card-footer]"></ng-content>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .adu-card {
+      @apply rounded-lg border border-zinc-200 bg-white text-zinc-950 shadow-sm;
+    }
+
+    .adu-card-hoverable:hover {
+      @apply shadow-md;
+    }
+
+    .adu-card-shadow-sm {
+      @apply shadow-sm;
+    }
+
+    .adu-card-shadow-md {
+      @apply shadow-md;
+    }
+
+    .adu-card-shadow-lg {
+      @apply shadow-lg;
+    }
+
+    .adu-card-shadow-xl {
+      @apply shadow-xl;
+    }
+
+    .adu-card-header {
+      @apply flex flex-col space-y-1.5 p-6;
+    }
+
+    .adu-card-body {
+      @apply p-6 pt-0;
+    }
+
+    .adu-card-body-compact {
+      @apply p-4 pt-0;
+    }
+
+    .adu-card-body-spacious {
+      @apply p-8 pt-0;
+    }
+
+    .adu-card-footer {
+      @apply flex items-center p-6 pt-0;
+    }
+  `]
+})
+export class CardComponent {
+  @Input() shadow: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @Input() hoverable = false;
+  @Input() padding: 'compact' | 'normal' | 'spacious' = 'normal';
+  @Input() hasHeader = false;
+  @Input() hasFooter = false;
+
+  get cardClasses(): string {
+    const classes = ['adu-card'];
+
+    if (this.shadow !== 'none') {
+      classes.push(`adu-card-shadow-${this.shadow}`);
+    }
+
+    if (this.hoverable) {
+      classes.push('adu-card-hoverable');
+    }
+
+    return classes.join(' ');
+  }
+
+  get bodyClasses(): string {
+    const classes = ['adu-card-body'];
+
+    if (this.padding === 'compact') {
+      classes.push('adu-card-body-compact');
+    } else if (this.padding === 'spacious') {
+      classes.push('adu-card-body-spacious');
+    }
+
+    return classes.join(' ');
+  }
+}

package/src/lib/components/input/input.component.ts

@@ -0,0 +1,141 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InputType, InputSize } from '../../models/types';
+
+@Component({
+  selector: 'adu-input',
+  standalone: true,
+  imports: [CommonModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="adu-input-wrapper">
+      <label *ngIf="label" [for]="id" class="adu-input-label">
+        {{ label }}
+        <span *ngIf="required" class="text-red-500">*</span>
+      </label>
+      
+      <div class="relative">
+        <input
+          [id]="id"
+          [type]="type"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [value]="value"
+          [class]="inputClasses"
+          (input)="onInputChange($event)"
+          (blur)="onTouched()"
+        />
+        <span *ngIf="icon" class="adu-input-icon">{{ icon }}</span>
+      </div>
+
+      <p *ngIf="error" class="adu-input-error">{{ error }}</p>
+      <p *ngIf="hint && !error" class="adu-input-hint">{{ hint }}</p>
+    </div>
+  `,
+  styles: [`
+    .adu-input-wrapper {
+      @apply w-full;
+    }
+
+    .adu-input-label {
+      @apply block text-sm font-medium text-zinc-900 mb-1.5;
+    }
+
+    .adu-input {
+      @apply flex w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm;
+      @apply ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium;
+      @apply placeholder:text-zinc-500;
+      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2;
+      @apply disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-zinc-50;
+    }
+
+    .adu-input-sm {
+      @apply h-9 px-3 text-sm;
+    }
+
+    .adu-input-md {
+      @apply h-10 px-3 text-sm;
+    }
+
+    .adu-input-lg {
+      @apply h-11 px-4 text-base;
+    }
+
+    .adu-input-error-state {
+      @apply border-red-500 focus-visible:ring-red-500;
+    }
+
+    .adu-input-icon {
+      @apply absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none;
+    }
+
+    .adu-input-error {
+      @apply mt-1.5 text-sm text-red-600 font-medium;
+    }
+
+    .adu-input-hint {
+      @apply mt-1.5 text-sm text-zinc-500;
+    }
+  `]
+})
+export class InputComponent implements ControlValueAccessor {
+  @Input() id = `adu-input-${Math.random().toString(36).substr(2, 9)}`;
+  @Input() label = '';
+  @Input() type: InputType = 'text';
+  @Input() placeholder = '';
+  @Input() size: InputSize = 'md';
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() required = false;
+  @Input() error = '';
+  @Input() hint = '';
+  @Input() icon = '';
+
+  value = '';
+  onChange: (value: string) => void = () => { };
+  onTouched: () => void = () => { };
+
+  get inputClasses(): string {
+    const classes = ['adu-input', `adu-input-${this.size}`];
+
+    if (this.error) {
+      classes.push('adu-input-error-state');
+    }
+
+    if (this.icon) {
+      classes.push('pr-10');
+    }
+
+    return classes.join(' ');
+  }
+
+  onInputChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.value = input.value;
+    this.onChange(this.value);
+  }
+
+  writeValue(value: string): void {
+    this.value = value || '';
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

package/src/lib/components/modal/modal.component.ts

@@ -0,0 +1,139 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'adu-modal',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="adu-modal-wrapper" *ngIf="isOpen" (click)="onBackdropClick()">
+      <div [class]="modalClasses" (click)="$event.stopPropagation()">
+        <button 
+          *ngIf="showCloseButton"
+          class="adu-modal-close" 
+          (click)="close()"
+          aria-label="Close modal"
+        >
+          ×
+        </button>
+
+        <div *ngIf="title" class="adu-modal-title">
+          {{ title }}
+        </div>
+
+        <div class="adu-modal-body">
+          <ng-content></ng-content>
+        </div>
+
+        <div *ngIf="hasFooter" class="adu-modal-footer">
+          <ng-content select="[modal-footer]"></ng-content>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .adu-modal-wrapper {
+      @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+      animation: fadeIn 0.15s ease-out;
+    }
+
+    .adu-modal-content {
+      @apply relative bg-white rounded-lg shadow-lg max-h-[90vh] overflow-hidden;
+      animation: slideUp 0.2s ease-out;
+    }
+
+    .adu-modal-sm {
+      @apply w-full max-w-sm;
+    }
+
+    .adu-modal-md {
+      @apply w-full max-w-lg;
+    }
+
+    .adu-modal-lg {
+      @apply w-full max-w-2xl;
+    }
+
+    .adu-modal-xl {
+      @apply w-full max-w-4xl;
+    }
+
+    .adu-modal-full {
+      @apply w-full h-full max-w-none rounded-none;
+    }
+
+    .adu-modal-close {
+      @apply absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white;
+      @apply transition-opacity hover:opacity-100;
+      @apply focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2;
+      @apply disabled:pointer-events-none;
+      @apply text-zinc-500 hover:text-zinc-900 text-2xl font-light w-6 h-6 flex items-center justify-center;
+    }
+
+    .adu-modal-title {
+      @apply flex flex-col space-y-1.5 text-center sm:text-left p-6 pb-4;
+      @apply text-lg font-semibold leading-none tracking-tight text-zinc-950;
+    }
+
+    .adu-modal-body {
+      @apply p-6 pt-0 overflow-y-auto;
+    }
+
+    .adu-modal-footer {
+      @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 pt-4;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(4px) scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    .animate-fadeIn {
+      animation: fadeIn 0.15s ease-out;
+    }
+
+    .animate-slideUp {
+      animation: slideUp 0.3s ease-out;
+    }
+  `]
+})
+export class ModalComponent {
+  @Input() isOpen = false;
+  @Input() title = '';
+  @Input() size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'md';
+  @Input() closeOnBackdrop = true;
+  @Input() showCloseButton = true;
+  @Input() hasFooter = false;
+
+  @Output() isOpenChange = new EventEmitter<boolean>();
+  @Output() closed = new EventEmitter<void>();
+
+  get modalClasses(): string {
+    return ['adu-modal-content', `adu-modal-${this.size}`].join(' ');
+  }
+
+  close(): void {
+    this.isOpen = false;
+    this.isOpenChange.emit(false);
+    this.closed.emit();
+  }
+
+  onBackdropClick(): void {
+    if (this.closeOnBackdrop) {
+      this.close();
+    }
+  }
+}

package/src/lib/components/spinner/spinner.component.ts

@@ -0,0 +1,64 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpinnerSize, SpinnerColor } from '../../models/types';
+
+@Component({
+  selector: 'adu-spinner',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div *ngIf="overlay" class="adu-spinner-overlay">
+      <div [class]="spinnerClasses"></div>
+      <p *ngIf="message" class="adu-spinner-message">{{ message }}</p>
+    </div>
+
+    <div *ngIf="!overlay" [class]="spinnerClasses"></div>
+  `,
+  styles: [`
+    .adu-spinner {
+      @apply inline-block border-2 border-zinc-200 border-t-zinc-900 rounded-full animate-spin;
+    }
+
+    .adu-spinner-sm {
+      @apply w-4 h-4 border-2;
+    }
+
+    .adu-spinner-md {
+      @apply w-6 h-6 border-2;
+    }
+
+    .adu-spinner-lg {
+      @apply w-10 h-10 border-[3px];
+    }
+
+    .adu-spinner-primary {
+      @apply border-zinc-200 border-t-zinc-900;
+    }
+
+    .adu-spinner-secondary {
+      @apply border-zinc-300 border-t-zinc-600;
+    }
+
+    .adu-spinner-white {
+      @apply border-zinc-100 border-t-white;
+    }
+
+    .adu-spinner-overlay {
+      @apply fixed inset-0 bg-black/50 backdrop-blur-sm flex flex-col items-center justify-center z-50;
+    }
+
+    .adu-spinner-message {
+      @apply mt-4 text-white text-sm font-medium;
+    }
+  `]
+})
+export class SpinnerComponent {
+  @Input() size: SpinnerSize = 'md';
+  @Input() color: SpinnerColor = 'primary';
+  @Input() overlay = false;
+  @Input() message = '';
+
+  get spinnerClasses(): string {
+    return ['adu-spinner', `adu-spinner-${this.size}`, `adu-spinner-${this.color}`].join(' ');
+  }
+}

package/src/lib/components/table/table.component.ts

@@ -0,0 +1,240 @@
+import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableColumn, TableConfig } from '../../models/types';
+
+@Component({
+  selector: 'adu-table',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="adu-table-container">
+      <table class="adu-table" [class.adu-table-striped]="config.striped" [class.adu-table-hoverable]="config.hoverable">
+        <thead class="adu-table-header">
+          <tr>
+            <th 
+              *ngFor="let column of columns"
+              [style.width]="column.width"
+              [class.adu-table-sortable]="column.sortable && config.sortable"
+              (click)="onSort(column)"
+              class="adu-table-th"
+            >
+              <div class="flex items-center justify-between">
+                <span>{{ column.label }}</span>
+                <span *ngIf="column.sortable && config.sortable" class="adu-table-sort-icon">
+                  <span *ngIf="sortColumn === column.key">
+                    {{ sortDirection === 'asc' ? '↑' : '↓' }}
+                  </span>
+                  <span *ngIf="sortColumn !== column.key" class="text-gray-300">↕</span>
+                </span>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="adu-table-body">
+          <tr *ngFor="let row of paginatedData; let i = index" class="adu-table-row">
+            <td *ngFor="let column of columns" class="adu-table-td">
+              <ng-container *ngIf="cellTemplate; else defaultCell">
+                <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row, column: column }"></ng-container>
+              </ng-container>
+              <ng-template #defaultCell>
+                {{ getCellValue(row, column) }}
+              </ng-template>
+            </td>
+          </tr>
+          <tr *ngIf="paginatedData.length === 0" class="adu-table-empty">
+            <td [attr.colspan]="columns.length" class="text-center py-8 text-gray-500">
+              <ng-content select="[empty-state]"></ng-content>
+              <span *ngIf="!hasEmptyState">No data available</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Pagination -->
+      <div *ngIf="config.pageable && totalPages > 1" class="adu-table-pagination">
+        <button 
+          class="adu-pagination-btn" 
+          [disabled]="currentPage === 1"
+          (click)="goToPage(currentPage - 1)"
+        >
+          Previous
+        </button>
+
+        <div class="adu-pagination-info">
+          Page {{ currentPage }} of {{ totalPages }}
+        </div>
+
+        <button 
+          class="adu-pagination-btn"
+          [disabled]="currentPage === totalPages"
+          (click)="goToPage(currentPage + 1)"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .adu-table-container {
+      @apply w-full overflow-x-auto rounded-md border border-zinc-200;
+    }
+
+    .adu-table {
+      @apply w-full caption-bottom text-sm;
+    }
+
+    .adu-table-header {
+      @apply border-b border-zinc-200;
+    }
+
+    .adu-table-th {
+      @apply h-12 px-4 text-left align-middle font-medium text-zinc-500;
+      @apply [&:has([role=checkbox])]:pr-0;
+    }
+
+    .adu-table-sortable {
+      @apply cursor-pointer hover:text-zinc-900 transition-colors;
+    }
+
+    .adu-table-sort-icon {
+      @apply ml-2 inline-block text-zinc-400;
+    }
+
+    .adu-table-body {
+      @apply [&_tr:last-child]:border-0;
+    }
+
+    .adu-table-row {
+      @apply border-b border-zinc-200 transition-colors;
+      @apply hover:bg-zinc-50/50;
+      @apply data-[state=selected]:bg-zinc-100;
+    }
+
+    .adu-table-striped .adu-table-row:nth-child(even) {
+      @apply bg-zinc-50/30;
+    }
+
+    .adu-table-hoverable .adu-table-row:hover {
+      @apply bg-zinc-50;
+    }
+
+    .adu-table-td {
+      @apply p-4 align-middle text-zinc-900;
+      @apply [&:has([role=checkbox])]:pr-0;
+    }
+
+    .adu-table-empty {
+      @apply text-center py-10 text-zinc-500;
+    }
+
+    .adu-table-pagination {
+      @apply flex items-center justify-between px-4 py-3 border-t border-zinc-200 bg-zinc-50/50;
+    }
+
+    .adu-pagination-btn {
+      @apply inline-flex items-center justify-center rounded-md text-sm font-medium;
+      @apply ring-offset-white transition-colors;
+      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2;
+      @apply disabled:pointer-events-none disabled:opacity-50;
+      @apply border border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900;
+      @apply h-9 px-4 py-2;
+    }
+
+    .adu-pagination-info {
+      @apply text-sm text-zinc-600 font-medium;
+    }
+  `]
+})
+export class TableComponent<T = any> {
+  @Input() data: T[] = [];
+  @Input() columns: TableColumn<T>[] = [];
+  @Input() config: TableConfig = {
+    sortable: true,
+    pageable: true,
+    pageSize: 10,
+    striped: true,
+    hoverable: true
+  };
+
+  @ContentChild('cellTemplate') cellTemplate?: TemplateRef<any>;
+  @Output() rowClicked = new EventEmitter<T>();
+  @Output() sortChanged = new EventEmitter<{ column: string; direction: 'asc' | 'desc' }>();
+
+  sortColumn = '';
+  sortDirection: 'asc' | 'desc' = 'asc';
+  currentPage = 1;
+  hasEmptyState = false;
+
+  ngOnInit() {
+    this.config = { ...this.getDefaultConfig(), ...this.config };
+  }
+
+  get sortedData(): T[] {
+    if (!this.config.sortable || !this.sortColumn) {
+      return this.data;
+    }
+
+    return [...this.data].sort((a, b) => {
+      const aVal = this.getNestedValue(a, this.sortColumn);
+      const bVal = this.getNestedValue(b, this.sortColumn);
+
+      if (aVal < bVal) return this.sortDirection === 'asc' ? -1 : 1;
+      if (aVal > bVal) return this.sortDirection === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }
+
+  get paginatedData(): T[] {
+    if (!this.config.pageable) {
+      return this.sortedData;
+    }
+
+    const start = (this.currentPage - 1) * (this.config.pageSize || 10);
+    const end = start + (this.config.pageSize || 10);
+    return this.sortedData.slice(start, end);
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.data.length / (this.config.pageSize || 10));
+  }
+
+  onSort(column: TableColumn<T>): void {
+    if (!column.sortable || !this.config.sortable) return;
+
+    if (this.sortColumn === column.key) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.sortColumn = column.key;
+      this.sortDirection = 'asc';
+    }
+
+    this.sortChanged.emit({ column: column.key, direction: this.sortDirection });
+  }
+
+  goToPage(page: number): void {
+    if (page >= 1 && page <= this.totalPages) {
+      this.currentPage = page;
+    }
+  }
+
+  getCellValue(row: T, column: TableColumn<T>): any {
+    if (column.cellTemplate) {
+      return column.cellTemplate(row);
+    }
+    return this.getNestedValue(row, column.key);
+  }
+
+  private getNestedValue(obj: any, path: string): any {
+    return path.split('.').reduce((current, prop) => current?.[prop], obj);
+  }
+
+  private getDefaultConfig(): TableConfig {
+    return {
+      sortable: true,
+      pageable: true,
+      pageSize: 10,
+      striped: true,
+      hoverable: true
+    };
+  }
+}

package/src/lib/models/types.ts

@@ -0,0 +1,32 @@
+export type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'ghost' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface TableColumn<T = any> {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  width?: string;
+  cellTemplate?: (row: T) => string;
+}
+
+export interface TableConfig {
+  sortable?: boolean;
+  pageable?: boolean;
+  pageSize?: number;
+  striped?: boolean;
+  hoverable?: boolean;
+}
+
+export interface ModalConfig {
+  title?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  showCloseButton?: boolean;
+}
+
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerColor = 'primary' | 'secondary' | 'white';

package/src/lib/services/modal.service.ts

@@ -0,0 +1,120 @@
+import { Injectable, ComponentRef, ApplicationRef, createComponent, EnvironmentInjector, Type } from '@angular/core';
+import { Subject } from 'rxjs';
+import { ModalConfig } from '../models/types';
+
+export interface ModalRef<T = any> {
+  close: (result?: T) => void;
+  afterClosed: () => Subject<T | undefined>;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalService {
+  private modalComponentRef: ComponentRef<any> | null = null;
+  private closeSubject = new Subject<any>();
+
+  constructor(
+    private appRef: ApplicationRef,
+    private injector: EnvironmentInjector
+  ) { }
+
+  open<T, R = any>(component: Type<T>, config: ModalConfig = {}): ModalRef<R> {
+    // Close existing modal if any
+    if (this.modalComponentRef) {
+      this.close();
+    }
+
+    // Create modal wrapper
+    const modalWrapper = document.createElement('div');
+    modalWrapper.className = this.getModalWrapperClasses(config);
+
+    // Create backdrop
+    const backdrop = document.createElement('div');
+    backdrop.className = 'adu-modal-backdrop';
+    if (config.closeOnBackdrop !== false) {
+      backdrop.onclick = () => this.close();
+    }
+
+    // Create modal content
+    const modalContent = document.createElement('div');
+    modalContent.className = this.getModalContentClasses(config);
+    modalContent.onclick = (e) => e.stopPropagation();
+
+    // Create close button if needed
+    if (config.showCloseButton !== false) {
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'adu-modal-close';
+      closeBtn.innerHTML = '×';
+      closeBtn.onclick = () => this.close();
+      modalContent.appendChild(closeBtn);
+    }
+
+    // Add title if provided
+    if (config.title) {
+      const titleEl = document.createElement('div');
+      titleEl.className = 'adu-modal-title';
+      titleEl.textContent = config.title;
+      modalContent.appendChild(titleEl);
+    }
+
+    // Create component container
+    const componentContainer = document.createElement('div');
+    componentContainer.className = 'adu-modal-body';
+    modalContent.appendChild(componentContainer);
+
+    // Assemble modal
+    modalWrapper.appendChild(backdrop);
+    modalWrapper.appendChild(modalContent);
+    document.body.appendChild(modalWrapper);
+
+    // Create and attach component
+    this.modalComponentRef = createComponent(component, {
+      environmentInjector: this.injector,
+      hostElement: componentContainer
+    });
+
+    this.appRef.attachView(this.modalComponentRef.hostView);
+
+    // Handle ESC key
+    if (config.closeOnEscape !== false) {
+      const escHandler = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          this.close();
+          document.removeEventListener('keydown', escHandler);
+        }
+      };
+      document.addEventListener('keydown', escHandler);
+    }
+
+    return {
+      close: (result?: R) => this.close(result),
+      afterClosed: () => this.closeSubject as Subject<R | undefined>
+    };
+  }
+
+  close(result?: any): void {
+    if (this.modalComponentRef) {
+      this.appRef.detachView(this.modalComponentRef.hostView);
+      this.modalComponentRef.destroy();
+      this.modalComponentRef = null;
+
+      // Remove modal from DOM
+      const modals = document.querySelectorAll('.adu-modal-wrapper');
+      modals.forEach(modal => modal.remove());
+
+      this.closeSubject.next(result);
+      this.closeSubject.complete();
+      this.closeSubject = new Subject<any>();
+    }
+  }
+
+  private getModalWrapperClasses(config: ModalConfig): string {
+    return 'adu-modal-wrapper';
+  }
+
+  private getModalContentClasses(config: ModalConfig): string {
+    const size = config.size || 'md';
+    return `adu-modal-content adu-modal-${size}`;
+  }
+}

package/src/lib/styles.scss

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Angular Dev Utils - Base Styles */
+.adu-component {
+  @apply transition-all duration-200 ease-in-out;
+}

package/src/public-api.ts

@@ -0,0 +1,17 @@
+/*
+ * Public API Surface of angular-dev-utils
+ */
+
+// Components
+export * from './lib/components/button/button.component';
+export * from './lib/components/input/input.component';
+export * from './lib/components/card/card.component';
+export * from './lib/components/modal/modal.component';
+export * from './lib/components/table/table.component';
+export * from './lib/components/spinner/spinner.component';
+
+// Services
+export * from './lib/services/modal.service';
+
+// Models & Types
+export * from './lib/models/types';

package/tailwind.config.js

@@ -0,0 +1,25 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./projects/angular-dev-utils/src/**/*.{html,ts}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}