universal-modal-monorepo 1.0.0

package/packages/universal-modal-angular/src/universal-modal.component.ts

@@ -0,0 +1,275 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {
+  CSS_CLASSES,
+  ModalEngine,
+  type CloseReason,
+  type ModalPlacement,
+  type ModalRole,
+  type ModalSize,
+  type ModalTheme,
+} from '@poluru-labs/universal-modal';
+
+/**
+ * Angular standalone adapter around the framework-agnostic ModalEngine.
+ */
+@Component({
+  selector: 'universal-modal',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      #root
+      [class]="rootClass"
+      [ngStyle]="style"
+      [attr.hidden]="!(visible || open) ? true : null"
+      [attr.aria-hidden]="!(visible || open)"
+    >
+      <div #backdrop [class]="classes.backdrop" data-um-backdrop></div>
+      <div #dialog [class]="classes.dialog">
+        <div #panel [class]="classes.panel" [attr.data-size]="size" [attr.data-placement]="placement">
+          <button
+            *ngIf="showCloseIcon"
+            #closeBtn
+            type="button"
+            [class]="classes.close"
+            aria-label="Close dialog"
+          >
+            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
+              <path
+                d="M6.4 6.4l11.2 11.2M17.6 6.4L6.4 17.6"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+
+          <div [class]="classes.header">
+            <ng-content select="[modalHeader]"></ng-content>
+            <h2 *ngIf="title" [id]="titleId" [class]="classes.title">{{ title }}</h2>
+            <p *ngIf="description" [id]="descId" [class]="classes.description">{{ description }}</p>
+          </div>
+
+          <div [class]="classes.body">
+            <ng-content></ng-content>
+          </div>
+
+          <div [class]="classes.footer">
+            <ng-content select="[modalFooter]"></ng-content>
+            <div *ngIf="!hideActions" [class]="classes.actions">
+              <button #cancelBtn type="button" [class]="classes.cancel" [disabled]="loading">
+                {{ cancelText }}
+              </button>
+              <button
+                #confirmBtn
+                type="button"
+                [class]="classes.confirm"
+                [disabled]="loading"
+                [attr.aria-busy]="loading"
+              >
+                {{ confirmText }}
+                <span [class]="classes.spinner" aria-hidden="true"></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class UniversalModalComponent implements AfterViewInit, OnChanges, OnDestroy {
+  readonly classes = CSS_CLASSES;
+
+  @Input() open = false;
+  @Input() size: ModalSize = 'md';
+  @Input() placement: ModalPlacement = 'center';
+  @Input() title?: string;
+  @Input() description?: string;
+  @Input() persistent = false;
+  @Input() closeOnEsc = true;
+  @Input() closeOnBackdrop = true;
+  @Input() showCloseIcon = true;
+  @Input() role: ModalRole = 'dialog';
+  @Input() confirmText = 'Confirm';
+  @Input() cancelText = 'Cancel';
+  @Input() hideActions = false;
+  @Input() loading = false;
+  @Input() zIndexBase?: number;
+  @Input() className = '';
+  @Input() style: Record<string, string> | null = null;
+  @Input() theme?: ModalTheme;
+  @Input() ariaLabel?: string;
+
+  @Output() openChange = new EventEmitter<boolean>();
+  @Output() beforeOpen = new EventEmitter<void>();
+  @Output() afterOpen = new EventEmitter<void>();
+  @Output() beforeClose = new EventEmitter<CloseReason>();
+  @Output() afterClose = new EventEmitter<CloseReason>();
+  @Output() confirm = new EventEmitter<void>();
+  @Output() cancel = new EventEmitter<void>();
+
+  @ViewChild('root') rootRef?: ElementRef<HTMLDivElement>;
+  @ViewChild('backdrop') backdropRef?: ElementRef<HTMLDivElement>;
+  @ViewChild('dialog') dialogRef?: ElementRef<HTMLDivElement>;
+  @ViewChild('panel') panelRef?: ElementRef<HTMLDivElement>;
+  @ViewChild('closeBtn') closeRef?: ElementRef<HTMLButtonElement>;
+  @ViewChild('confirmBtn') confirmRef?: ElementRef<HTMLButtonElement>;
+  @ViewChild('cancelBtn') cancelRef?: ElementRef<HTMLButtonElement>;
+
+  visible = false;
+  readonly titleId: string;
+  readonly descId: string;
+
+  private engine: ModalEngine | null = null;
+  private unsubs: Array<() => void> = [];
+  private readonly hostId: string;
+
+  constructor(@Inject(DOCUMENT) private readonly documentRef: Document) {
+    this.hostId = `um-ng-${Math.random().toString(36).slice(2, 9)}`;
+    this.titleId = `${this.hostId}-title`;
+    this.descId = `${this.hostId}-description`;
+  }
+
+  get rootClass(): string {
+    return [
+      CSS_CLASSES.root,
+      this.visible || this.open ? CSS_CLASSES.open : '',
+      this.loading ? CSS_CLASSES.loading : '',
+      this.className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  ngAfterViewInit(): void {
+    const root = this.rootRef?.nativeElement;
+    if (root && root.parentElement !== this.documentRef.body) {
+      this.documentRef.body.appendChild(root);
+    }
+
+    this.engine = new ModalEngine({
+      id: this.hostId,
+      size: this.size,
+      placement: this.placement,
+      title: this.title,
+      description: this.description,
+      persistent: this.persistent,
+      closeOnEsc: this.closeOnEsc,
+      closeOnBackdrop: this.closeOnBackdrop,
+      showCloseIcon: this.showCloseIcon,
+      role: this.role,
+      confirmText: this.confirmText,
+      cancelText: this.cancelText,
+      hideActions: this.hideActions,
+      zIndexBase: this.zIndexBase,
+      className: this.className,
+      theme: this.theme,
+      ariaLabel: this.ariaLabel,
+      ariaLabelledBy: this.title ? this.titleId : undefined,
+      ariaDescribedBy: this.description ? this.descId : undefined,
+      beforeOpen: () => {
+        this.beforeOpen.emit();
+      },
+      afterOpen: () => this.afterOpen.emit(),
+      beforeClose: (reason) => {
+        this.beforeClose.emit(reason);
+      },
+      afterClose: (reason) => this.afterClose.emit(reason),
+      onConfirm: async () => {
+        this.confirm.emit();
+      },
+      onCancel: async () => {
+        this.cancel.emit();
+      },
+    });
+
+    this.attachHost();
+    this.bindEngineEvents();
+
+    if (this.open) {
+      void this.engine.open();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.engine) return;
+
+    this.engine.updateOptions({
+      size: this.size,
+      placement: this.placement,
+      title: this.title,
+      description: this.description,
+      persistent: this.persistent,
+      closeOnEsc: this.closeOnEsc,
+      closeOnBackdrop: this.closeOnBackdrop,
+      showCloseIcon: this.showCloseIcon,
+      role: this.role,
+      confirmText: this.confirmText,
+      cancelText: this.cancelText,
+      hideActions: this.hideActions,
+      zIndexBase: this.zIndexBase,
+      className: this.className,
+      theme: this.theme,
+      ariaLabel: this.ariaLabel,
+      ariaLabelledBy: this.title ? this.titleId : undefined,
+      ariaDescribedBy: this.description ? this.descId : undefined,
+    });
+
+    this.engine.setLoading(this.loading);
+
+    if (changes['open']) {
+      if (this.open && !this.engine.isOpen) void this.engine.open();
+      if (!this.open && this.engine.isOpen) void this.engine.close('programmatic');
+    }
+  }
+
+  ngOnDestroy(): void {
+    for (const off of this.unsubs) off();
+    this.unsubs = [];
+    this.engine?.destroy();
+    this.engine = null;
+    this.rootRef?.nativeElement.remove();
+  }
+
+  private attachHost(): void {
+    if (!this.engine || !this.rootRef || !this.backdropRef || !this.dialogRef || !this.panelRef) {
+      return;
+    }
+
+    this.engine.attach({
+      root: this.rootRef.nativeElement,
+      backdrop: this.backdropRef.nativeElement,
+      dialog: this.dialogRef.nativeElement,
+      panel: this.panelRef.nativeElement,
+      closeButton: this.closeRef?.nativeElement ?? null,
+      confirmButton: this.confirmRef?.nativeElement ?? null,
+      cancelButton: this.cancelRef?.nativeElement ?? null,
+    });
+  }
+
+  private bindEngineEvents(): void {
+    if (!this.engine) return;
+    this.unsubs.push(
+      this.engine.on('openChange', (isOpen) => {
+        this.visible = isOpen;
+        this.openChange.emit(isOpen);
+      }),
+      this.engine.on('loadingChange', (loading) => {
+        this.loading = loading;
+      }),
+    );
+  }
+}

package/packages/universal-modal-angular/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/universal-modal-angular/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: { index: 'src/index.ts' },
+  format: ['esm', 'cjs'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ['@angular/core', '@angular/common', '@poluru-labs/universal-modal'],
+});

package/packages/universal-modal-react/AUTHORS

@@ -0,0 +1,5 @@
+# Authors
+
+Subrahmanyam Poluru <mail.polurus@gmail.com>
+https://polurus.com
+https://www.linkedin.com/in/polurus/

package/packages/universal-modal-react/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## 1.0.0 — 2026-08-01
+
+### Added
+- Initial public release
+- Depends on `@poluru-labs/universal-modal@1.0.0`
+- MIT licensed (see LICENSE)
+

package/packages/universal-modal-react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Subrahmanyam Poluru 
+
+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/packages/universal-modal-react/NOTICE

@@ -0,0 +1,6 @@
+@poluru-labs/universal-modal
+Copyright (c) 2026 Subrahmanyam Poluru 
+
+This product is developed and maintained by .
+Homepage: https://polurus.com
+Contact: mail.polurus@gmail.com

package/packages/universal-modal-react/README.md

@@ -0,0 +1,12 @@
+# @poluru-labs/universal-modal-react
+
+```bash
+npm install @poluru-labs/universal-modal-react
+```
+
+```tsx
+import { UniversalModal } from '@poluru-labs/universal-modal-react';
+import '@poluru-labs/universal-modal/styles.css';
+```
+
+Author: Subrahmanyam Poluru · mail.polurus@gmail.com

package/packages/universal-modal-react/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@poluru-labs/universal-modal-react",
+  "version": "1.0.0",
+  "description": "React adapter for @poluru-labs/universal-modal",
+  "author": {
+    "name": "Subrahmanyam Poluru",
+    "email": "mail.polurus@gmail.com",
+    "url": "https://polurus.com"
+  },
+  "contributors": [
+    {
+      "name": "Subrahmanyam Poluru",
+      "email": "mail.polurus@gmail.com",
+      "url": "https://www.linkedin.com/in/polurus/"
+    }
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/poluru-labs/universal-modal#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/poluru-labs/universal-modal.git",
+    "directory": "packages/universal-modal-react"
+  },
+  "bugs": {
+    "url": "https://github.com/poluru-labs/universal-modal/issues",
+    "email": "mail.polurus@gmail.com"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "modal",
+    "dialog",
+    "react",
+    "poluru-labs",
+    "accessibility"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "AUTHORS",
+    "NOTICE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist *.tgz",
+    "prepublishOnly": "npm run clean && npm run typecheck && npm run build"
+  },
+  "dependencies": {
+    "@poluru-labs/universal-modal": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://polurus.com"
+  }
+}