modern-alert 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Paul's Digital Studio
+
+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,214 @@
+# ModernAlert
+
+A small dialog library for the browser. No npm dependencies, no framework.
+
+Drop in three files. Call `ModernAlert.show()`. Get a promise back.
+
+```js
+const result = await ModernAlert.confirm(
+  'Delete this project?',
+  'Files stay in the trash for 30 days.'
+)
+
+if (result.isConfirmed) {
+  await deleteProject()
+}
+```
+
+The default card is left-aligned, with the type color as a thin top line. Light, dark, or follow the system. The circular icon is opt-in.
+
+## What you get
+
+- Dialog first, decoration second (`icon` is off by default)
+- Semantic types: `success`, `error`, `warning`, `info`, `question`, `confirm`, `loading`
+- Backdrop you can keep, drop, or keep invisible while still blocking the page
+- Inputs, HTML, loading, and a timer — still three files, no bundler
+
+## Setup
+
+Load the three files in this order. `window.ModernAlert` is ready after the last script.
+
+### npm
+
+```bash
+npm install modern-alert
+```
+
+```html
+<link rel="stylesheet" href="node_modules/modern-alert/src/modern-alert.css">
+<script src="node_modules/modern-alert/src/icons.js"></script>
+<script src="node_modules/modern-alert/src/modern-alert.js"></script>
+```
+
+If your bundler can import CSS:
+
+```js
+import 'modern-alert/src/icons.js'
+import 'modern-alert'
+import 'modern-alert/modern-alert.css'
+```
+
+### CDN
+
+After the package is on npm:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-alert@1.0.0/src/modern-alert.css">
+<script src="https://cdn.jsdelivr.net/npm/modern-alert@1.0.0/src/icons.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/modern-alert@1.0.0/src/modern-alert.js"></script>
+```
+
+Pin a version. `@latest` will follow new releases.
+
+TypeScript types ship in the package (`src/modern-alert.d.ts`).
+
+### Copy the files
+
+Copy `src/modern-alert.css`, `src/icons.js`, and `src/modern-alert.js` into your project:
+
+```html
+<link rel="stylesheet" href="src/modern-alert.css">
+<script src="src/icons.js"></script>
+<script src="src/modern-alert.js"></script>
+```
+
+## Usage
+
+### A simple message
+
+```js
+await ModernAlert.success('Saved', 'The file is already in the library.')
+await ModernAlert.error('Could not save', 'Check your connection and try again.')
+```
+
+### Confirm something destructive
+
+```js
+const { isConfirmed } = await ModernAlert.confirm(
+  'Delete this project?',
+  'You can restore it from the trash.'
+)
+```
+
+`confirm` shows Cancel and a primary action. Other types show a single button unless you pass `cancelText`.
+
+### Ask for a value
+
+```js
+const result = await ModernAlert.show({
+  type: 'question',
+  title: 'What should we call it?',
+  input: 'text',
+  inputPlaceholder: 'Project name',
+  inputValidator: (value) => !String(value).trim() && 'Give it a name'
+})
+
+if (result.isConfirmed) {
+  createProject(result.value)
+}
+```
+
+`input` can be `text`, `email`, `password`, `textarea`, or `select` (`inputOptions` + `inputValue` for select).
+
+### Loading, then done
+
+```js
+ModernAlert.loading('Saving…')
+
+await api.save()
+
+await ModernAlert.success('Saved', 'You can keep working.')
+```
+
+A loading dialog does not close on backdrop click or Escape. Close it with `ModernAlert.close()`, or replace it with the next `show()` / `success()`.
+
+### HTML inside the body
+
+```js
+await ModernAlert.show({
+  title: "What's new",
+  html: '<p>You can pass <strong>your own markup</strong>.</p>'
+})
+```
+
+Markup is sanitized: scripts, event handlers, and `javascript:` URLs are stripped.
+
+## Look
+
+```js
+await ModernAlert.show({
+  title: 'Deployed',
+  text: 'v2.4.1 is live.',
+  theme: 'dark',     // auto | light | dark
+  icon: true,        // circular SVG mascot
+  backdrop: false    // no dim; the page still cannot be clicked
+})
+```
+
+Shorthand helpers take an optional third argument for any option:
+
+```js
+ModernAlert.success('Saved', 'All set.', { theme: 'dark', timer: 2000 })
+```
+
+## Options
+
+| Option | Default | Meaning |
+| --- | --- | --- |
+| `type` | `'info'` | `success` `error` `warning` `info` `question` `confirm` `loading` |
+| `title` | `''` | Heading |
+| `text` | `''` | Body text. Ignored if `html` is set |
+| `html` | `''` | Sanitized markup for the body |
+| `confirmText` | `'OK'` | Primary button label |
+| `cancelText` | `''` | Secondary button label. Any non-empty value also shows Cancel |
+| `showConfirm` | `true` | Show the primary button |
+| `showCancel` | `false` | Show Cancel. `type: 'confirm'` turns this on |
+| `input` | `''` | `text` `email` `password` `textarea` `select` |
+| `inputPlaceholder` | `''` | Placeholder for text-like inputs |
+| `inputValue` | `''` | Initial value, or the selected key for `select` |
+| `inputLabel` | `''` | Label above the field |
+| `inputOptions` | `null` | `{ value: 'Label' }` map for `select` |
+| `inputValidator` | `null` | `(value) => errorMessage`. Return a string to block confirm |
+| `theme` | `'auto'` | Follows `prefers-color-scheme`, or `'light'` / `'dark'` |
+| `icon` | `false` | `true` shows the animated 72px type icon. Forced on for `loading` |
+| `backdrop` | `true` | `false` removes the dim and blur, not the click shield |
+| `timer` | `0` | Auto-dismiss after N milliseconds. Ignored for `loading` |
+| `allowOutsideClick` | `true` | Click outside the card to dismiss. Off for `loading` |
+| `allowEscapeKey` | `true` | Escape to dismiss. Off for `loading` |
+
+## The promise
+
+Every call returns:
+
+```ts
+{
+  isConfirmed: boolean
+  isDismissed: boolean
+  value: any        // true, or the input string
+  dismiss: string   // 'cancel' | 'esc' | 'backdrop' | 'timer' | 'close' | 'replace'
+}
+```
+
+`dismiss` is set only when the dialog was not confirmed.
+
+```js
+ModernAlert.show({ title: 'Ping' })
+ModernAlert.isVisible() // true
+ModernAlert.close()     // dismiss: 'close'
+```
+
+## API map
+
+| Call | What it does |
+| --- | --- |
+| `show(options)` | Full dialog |
+| `show(title, text, type)` | Same, positional |
+| `success` `error` `warning` `info` `question` | Typed helpers |
+| `confirm(title, text, options?)` | Two actions |
+| `loading(title, text?)` | Spinner, no buttons |
+| `close()` | Dismiss the open dialog |
+| `isVisible()` | Whether a dialog is on screen |
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "modern-alert",
+  "version": "1.0.0",
+  "description": "Modern modal dialogs for the browser. No dependencies.",
+  "license": "MIT",
+  "author": {
+    "name": "Paul's Digital Studio",
+    "url": "https://github.com/PaulsDigital"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PaulsDigital/modern-alert.git"
+  },
+  "bugs": {
+    "url": "https://github.com/PaulsDigital/modern-alert/issues"
+  },
+  "homepage": "https://github.com/PaulsDigital/modern-alert#readme",
+  "keywords": [
+    "alert",
+    "dialog",
+    "modal",
+    "confirm",
+    "prompt",
+    "popup",
+    "vanilla-js"
+  ],
+  "main": "src/modern-alert.js",
+  "browser": "src/modern-alert.js",
+  "style": "src/modern-alert.css",
+  "types": "src/modern-alert.d.ts",
+  "unpkg": "src/modern-alert.js",
+  "jsdelivr": "src/modern-alert.js",
+  "files": [
+    "src",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/modern-alert.d.ts",
+      "default": "./src/modern-alert.js"
+    },
+    "./modern-alert.css": "./src/modern-alert.css",
+    "./src/modern-alert.css": "./src/modern-alert.css",
+    "./src/modern-alert.js": "./src/modern-alert.js",
+    "./src/icons.js": "./src/icons.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "./src/modern-alert.js",
+    "./src/icons.js",
+    "*.css"
+  ]
+}

package/src/icons.js

@@ -0,0 +1,41 @@
+(function (global) {
+  'use strict';
+
+  const stroke =
+    'fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" pathLength="1"';
+
+  global.ModernAlertIcons = {
+    success:
+      '<svg class="ma-svg" viewBox="0 0 64 64" aria-hidden="true">' +
+      '<circle class="ma-stroke ma-stroke--ring" cx="32" cy="32" r="26" ' + stroke + '></circle>' +
+      '<path class="ma-stroke ma-stroke--mark" d="M20.5 33.2l8.2 8.3 15.6-18" ' + stroke + '></path>' +
+      '</svg>',
+
+    error:
+      '<svg class="ma-svg" viewBox="0 0 64 64" aria-hidden="true">' +
+      '<circle class="ma-stroke ma-stroke--ring" cx="32" cy="32" r="26" ' + stroke + '></circle>' +
+      '<path class="ma-stroke ma-stroke--mark" d="M24 24l16 16M40 24L24 40" ' + stroke + '></path>' +
+      '</svg>',
+
+    warning:
+      '<svg class="ma-svg" viewBox="0 0 64 64" aria-hidden="true">' +
+      '<path class="ma-stroke ma-stroke--ring" d="M32 12.5L54 51.5H10z" ' + stroke + '></path>' +
+      '<path class="ma-stroke ma-stroke--mark" d="M32 26v12" ' + stroke + '></path>' +
+      '<circle class="ma-stroke ma-stroke--dot" cx="32" cy="46" r="1.4" fill="currentColor" stroke="none"></circle>' +
+      '</svg>',
+
+    info:
+      '<svg class="ma-svg" viewBox="0 0 64 64" aria-hidden="true">' +
+      '<circle class="ma-stroke ma-stroke--ring" cx="32" cy="32" r="26" ' + stroke + '></circle>' +
+      '<path class="ma-stroke ma-stroke--mark" d="M32 29.5V42" ' + stroke + '></path>' +
+      '<circle class="ma-stroke ma-stroke--dot" cx="32" cy="23" r="1.6" fill="currentColor" stroke="none"></circle>' +
+      '</svg>',
+
+    question:
+      '<svg class="ma-svg" viewBox="0 0 64 64" aria-hidden="true">' +
+      '<circle class="ma-stroke ma-stroke--ring" cx="32" cy="32" r="26" ' + stroke + '></circle>' +
+      '<path class="ma-stroke ma-stroke--mark" d="M26 25.5c1.2-3.6 6.8-5 10.2-2.4 3 2.3 2.6 6.2-.2 8.2-1.8 1.3-4 2.2-4 5.2" ' + stroke + '></path>' +
+      '<circle class="ma-stroke ma-stroke--dot" cx="32" cy="44.5" r="1.6" fill="currentColor" stroke="none"></circle>' +
+      '</svg>'
+  };
+})(typeof window !== 'undefined' ? window : this);