universal-modal-monorepo 1.0.0

package/packages/universal-modal/src/styles/modal.css

@@ -0,0 +1,368 @@
+/**
+ * @poluru-labs/universal-modal styles
+ *
+ * Brand / button theming (override on :root, [data-um-theme], or .um-modal):
+ *   --um-color-brand
+ *   --um-color-brand-fg
+ *   --um-btn-confirm-bg | --um-btn-confirm-fg | --um-btn-confirm-border
+ *   --um-btn-cancel-bg  | --um-btn-cancel-fg  | --um-btn-cancel-border
+ */
+
+:root,
+[data-um-theme='light'] {
+  --um-color-bg: #ffffff;
+  --um-color-fg: #111827;
+  --um-color-muted: #6b7280;
+  --um-color-border: #e5e7eb;
+  --um-color-brand: #0d47a1;
+  --um-color-brand-fg: #ffffff;
+  --um-color-accent: var(--um-color-brand);
+  --um-color-accent-fg: var(--um-color-brand-fg);
+  --um-color-danger: #b91c1c;
+  --um-backdrop-bg: rgba(15, 23, 42, 0.55);
+  --um-shadow: 0 24px 48px rgba(15, 23, 42, 0.18), 0 8px 16px rgba(15, 23, 42, 0.08);
+  --um-focus-ring: 0 0 0 3px color-mix(in srgb, var(--um-color-brand) 35%, transparent);
+
+  --um-btn-confirm-bg: var(--um-color-brand);
+  --um-btn-confirm-fg: var(--um-color-brand-fg);
+  --um-btn-confirm-border: var(--um-color-brand);
+  --um-btn-cancel-bg: var(--um-color-bg);
+  --um-btn-cancel-fg: var(--um-color-fg);
+  --um-btn-cancel-border: var(--um-color-border);
+}
+
+[data-um-theme='dark'],
+.um-theme-dark {
+  --um-color-bg: #111827;
+  --um-color-fg: #f9fafb;
+  --um-color-muted: #9ca3af;
+  --um-color-border: #374151;
+  --um-color-brand: #0d47a1;
+  --um-color-brand-fg: #ffffff;
+  --um-color-accent: var(--um-color-brand);
+  --um-color-accent-fg: var(--um-color-brand-fg);
+  --um-color-danger: #f87171;
+  --um-backdrop-bg: rgba(2, 6, 23, 0.72);
+  --um-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3);
+  --um-focus-ring: 0 0 0 3px color-mix(in srgb, var(--um-color-brand) 45%, transparent);
+
+  --um-btn-confirm-bg: var(--um-color-brand);
+  --um-btn-confirm-fg: var(--um-color-brand-fg);
+  --um-btn-confirm-border: var(--um-color-brand);
+  --um-btn-cancel-bg: var(--um-color-bg);
+  --um-btn-cancel-fg: var(--um-color-fg);
+  --um-btn-cancel-border: var(--um-color-border);
+}
+
+.um-modal {
+  --um-radius: 12px;
+  --um-spacing: 1.25rem;
+  --um-spacing-sm: 0.75rem;
+  --um-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  --um-font-size: 1rem;
+  --um-font-size-title: 1.25rem;
+  --um-line-height: 1.5;
+  --um-width-sm: 360px;
+  --um-width-md: 480px;
+  --um-width-lg: 640px;
+  --um-width-xl: 800px;
+  --um-max-width: min(96vw, var(--um-width-md));
+  --um-max-height: min(90vh, 900px);
+  --um-z-index: 1000;
+  --um-animation-duration: 200ms;
+  --um-animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
+  --um-panel-padding: var(--um-spacing);
+  --um-backdrop-opacity: 1;
+
+  position: fixed;
+  inset: 0;
+  z-index: var(--um-z-index);
+  display: grid;
+  place-items: center;
+  padding: var(--um-spacing);
+  font-family: var(--um-font-family);
+  font-size: var(--um-font-size);
+  line-height: var(--um-line-height);
+  color: var(--um-color-fg);
+  pointer-events: none;
+}
+
+.um-modal[hidden] {
+  display: none !important;
+}
+
+.um-modal--open,
+.um-modal--closing {
+  pointer-events: auto;
+}
+
+.um-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--um-backdrop-bg);
+  opacity: 0;
+  transition: opacity var(--um-animation-duration) var(--um-animation-easing);
+}
+
+.um-modal--open .um-modal__backdrop {
+  opacity: var(--um-backdrop-opacity);
+}
+
+.um-modal--closing .um-modal__backdrop {
+  opacity: 0;
+}
+
+.um-modal__dialog {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: var(--um-max-width);
+  max-height: var(--um-max-height);
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+
+.um-modal__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: var(--um-max-height);
+  background: var(--um-color-bg);
+  color: var(--um-color-fg);
+  border: 1px solid var(--um-color-border);
+  border-radius: var(--um-radius);
+  box-shadow: var(--um-shadow);
+  pointer-events: auto;
+  transform: translateY(8px) scale(0.98);
+  opacity: 0;
+  transition:
+    transform var(--um-animation-duration) var(--um-animation-easing),
+    opacity var(--um-animation-duration) var(--um-animation-easing);
+  overflow: hidden;
+}
+
+.um-modal--open .um-modal__panel {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+.um-modal--closing .um-modal__panel {
+  transform: translateY(8px) scale(0.98);
+  opacity: 0;
+}
+
+/* Sizes */
+.um-modal__panel[data-size='sm'] {
+  --um-max-width: min(96vw, var(--um-width-sm));
+}
+.um-modal__panel[data-size='md'] {
+  --um-max-width: min(96vw, var(--um-width-md));
+}
+.um-modal__panel[data-size='lg'] {
+  --um-max-width: min(96vw, var(--um-width-lg));
+}
+.um-modal__panel[data-size='xl'] {
+  --um-max-width: min(96vw, var(--um-width-xl));
+}
+.um-modal__panel[data-size='fullscreen'] {
+  --um-max-width: 100vw;
+  --um-max-height: 100vh;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  border-radius: 0;
+}
+
+/* Placements */
+.um-modal[data-placement='top'],
+.um-modal:has(.um-modal__panel[data-placement='top']) {
+  place-items: start center;
+  padding-top: clamp(1rem, 6vh, 3rem);
+}
+
+.um-modal:has(.um-modal__panel[data-placement='bottom']) {
+  place-items: end center;
+  padding-bottom: clamp(1rem, 6vh, 3rem);
+}
+
+.um-modal:has(.um-modal__panel[data-placement='left']) {
+  place-items: stretch start;
+  padding: 0;
+}
+
+.um-modal:has(.um-modal__panel[data-placement='right']) {
+  place-items: stretch end;
+  padding: 0;
+}
+
+.um-modal__panel[data-placement='left'],
+.um-modal__panel[data-placement='right'] {
+  height: 100vh;
+  max-height: 100vh;
+  border-radius: 0;
+  --um-max-width: min(92vw, var(--um-width-md));
+}
+
+.um-modal__panel[data-placement='left'] {
+  transform: translateX(-16px);
+}
+.um-modal__panel[data-placement='right'] {
+  transform: translateX(16px);
+}
+.um-modal--open .um-modal__panel[data-placement='left'],
+.um-modal--open .um-modal__panel[data-placement='right'] {
+  transform: translateX(0);
+}
+
+.um-modal__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: var(--um-panel-padding);
+  padding-bottom: var(--um-spacing-sm);
+  padding-right: calc(var(--um-panel-padding) + 2rem);
+}
+
+.um-modal__header[hidden],
+.um-modal__footer[hidden],
+.um-modal__close[hidden] {
+  display: none !important;
+}
+
+.um-modal__title {
+  margin: 0;
+  font-size: var(--um-font-size-title);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--um-color-fg);
+}
+
+.um-modal__description {
+  margin: 0;
+  color: var(--um-color-muted);
+  font-size: 0.95rem;
+}
+
+.um-modal__body {
+  padding: 0 var(--um-panel-padding) var(--um-panel-padding);
+  overflow: auto;
+  flex: 1 1 auto;
+}
+
+.um-modal__footer {
+  padding: var(--um-spacing-sm) var(--um-panel-padding) var(--um-panel-padding);
+  border-top: 1px solid var(--um-color-border);
+  background: color-mix(in srgb, var(--um-color-bg) 92%, var(--um-color-border));
+}
+
+.um-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+}
+
+.um-modal__close {
+  position: absolute;
+  top: 0.7rem;
+  right: 0.7rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: calc(var(--um-radius) - 4px);
+  background: transparent;
+  color: var(--um-color-muted);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.um-modal__close:hover {
+  background: color-mix(in srgb, var(--um-color-border) 65%, transparent);
+  color: var(--um-color-fg);
+}
+
+.um-modal__close:focus-visible,
+.um-modal__btn:focus-visible {
+  outline: none;
+  box-shadow: var(--um-focus-ring);
+}
+
+.um-modal__btn {
+  appearance: none;
+  border: 1px solid var(--um-btn-cancel-border);
+  border-radius: calc(var(--um-radius) - 4px);
+  padding: 0.55rem 1rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--um-btn-cancel-bg);
+  color: var(--um-btn-cancel-fg);
+  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease, filter 120ms ease;
+}
+
+.um-modal__btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.um-modal__btn--cancel {
+  background: var(--um-btn-cancel-bg);
+  border-color: var(--um-btn-cancel-border);
+  color: var(--um-btn-cancel-fg);
+}
+
+.um-modal__btn--cancel:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--um-btn-cancel-border) 45%, var(--um-btn-cancel-bg));
+}
+
+.um-modal__btn--confirm {
+  position: relative;
+  background: var(--um-btn-confirm-bg);
+  border-color: var(--um-btn-confirm-border);
+  color: var(--um-btn-confirm-fg);
+}
+
+.um-modal__btn--confirm:hover:not(:disabled) {
+  filter: brightness(1.05);
+}
+
+.um-modal__spinner {
+  display: none;
+  width: 0.95rem;
+  height: 0.95rem;
+  margin-left: 0.5rem;
+  border: 2px solid color-mix(in srgb, var(--um-btn-confirm-fg) 35%, transparent);
+  border-top-color: var(--um-btn-confirm-fg);
+  border-radius: 50%;
+  vertical-align: -0.15em;
+  animation: um-spin 0.7s linear infinite;
+}
+
+.um-modal--loading .um-modal__spinner {
+  display: inline-block;
+}
+
+@keyframes um-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .um-modal__backdrop,
+  .um-modal__panel {
+    transition: none !important;
+  }
+
+  .um-modal__spinner {
+    animation: none;
+  }
+}

package/packages/universal-modal/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

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

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+  },
+  format: ['esm', 'cjs'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+});

package/packages/universal-modal-angular/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-angular/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-angular/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-angular/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-angular/README.md

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

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

@@ -0,0 +1,85 @@
+{
+  "name": "@poluru-labs/universal-modal-angular",
+  "version": "1.0.0",
+  "description": "Angular 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-angular"
+  },
+  "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",
+    "angular",
+    "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": {
+    "@angular/common": ">=16.0.0",
+    "@angular/core": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://polurus.com"
+  }
+}

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

@@ -0,0 +1,10 @@
+export { UniversalModalComponent } from './universal-modal.component';
+export type {
+  CloseReason,
+  ModalOptions,
+  ModalPlacement,
+  ModalRole,
+  ModalSize,
+  ModalState,
+  ModalTheme,
+} from '@poluru-labs/universal-modal';