@awaisdev5765/prism-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Awais Rehman
+
+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

@@ -1,3 +1,62 @@
-# Temporary Holding Version
+# prism-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Zero-dependency web components for modern apps — the web sibling of the
+[Prism Flutter family](https://pub.dev/packages/prism_markdown).
+
+## Components
+
+### `<prism-toast>` — adaptive toast notifications
+
+Bottom-centered on mobile, stacked top-right cards on desktop — the pattern
+each platform expects. Four icon-led variants, auto-dismiss, optional action
+button, XSS-safe.
+
+## Install
+
+```bash
+npm install @awaisdev5765/prism-ui
+```
+
+## Usage
+
+```js
+import '@awaisdev5765/prism-ui/toast';
+
+// Shorthands
+PrismToast.success('Settings saved.');
+PrismToast.error('Upload failed. Retry?');
+PrismToast.warning('Storage almost full.');
+PrismToast.info('New features available.');
+
+// Full control
+PrismToast.show({
+  title: 'Sync complete',
+  message: '142 items updated.',
+  type: 'success',
+  duration: 4000,
+  actionLabel: 'View',
+  onAction: () => openChangelog(),
+});
+
+PrismToast.dismissAll();
+```
+
+Works with **any framework** — React, Vue, Svelte, plain HTML — because
+they're standard Web Components with zero dependencies.
+
+## How it adapts
+
+| Viewport | Behavior |
+| --- | --- |
+| < 600px | Slides up from the bottom edge, nearly full width |
+| ≥ 600px | Slides in from the right, stacked top-right cards (380px) |
+
+## Why prism-ui?
+
+- **Zero dependencies** — ~3KB of hand-written code per component
+- **Web Components** — native custom elements, no framework lock-in
+- **The Prism family** — the same design language as our 12 Flutter packages
+
+## License
+
+MIT — see [LICENSE](LICENSE).

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * prism-ui — zero-dependency web components for modern apps.
+ *
+ * Import what you need:
+ * ```js
+ * import 'prism-ui/toast';
+ * ```
+ */
+export { PrismToast, PrismToastElement, type PrismToastOptions, type PrismToastType, } from './toast.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+/**
+ * prism-ui — zero-dependency web components for modern apps.
+ *
+ * Import what you need:
+ * ```js
+ * import 'prism-ui/toast';
+ * ```
+ */
+export { PrismToast, PrismToastElement, } from './toast.js';

package/dist/toast.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Adaptive toast notifications as a web component — bottom-centered on
+ * mobile, stacked top-right on desktop. Zero dependencies.
+ *
+ * Quick start:
+ * ```js
+ * import 'prism-ui/toast';
+ * PrismToast.success('Settings saved.');
+ * ```
+ */
+export type PrismToastType = 'success' | 'error' | 'warning' | 'info';
+export interface PrismToastOptions {
+    /** Main message text. */
+    message: string;
+    /** Visual/semantic type — drives icon and colors. Default: 'info'. */
+    type?: PrismToastType;
+    /** Optional bold lead-in above the message. */
+    title?: string;
+    /** Auto-dismiss delay in ms. Default: 3000. */
+    duration?: number;
+    /** Label for an optional action button. */
+    actionLabel?: string;
+    /** Invoked when the action button is clicked. */
+    onAction?: () => void;
+}
+/** Custom element rendering one toast card. */
+export declare class PrismToastElement extends HTMLElement {
+    static observedAttributes: string[];
+    private _timer;
+    private _exiting;
+    connectedCallback(): void;
+    /** Animates the toast out and removes it from the DOM. */
+    dismiss(): void;
+}
+/** Imperative API for showing toasts. */
+export declare const PrismToast: {
+    /** Shows a toast with full options. */
+    show(options: PrismToastOptions): PrismToastElement;
+    /** Success shorthand. */
+    success(message: string, options?: Partial<PrismToastOptions>): void;
+    /** Error shorthand. */
+    error(message: string, options?: Partial<PrismToastOptions>): void;
+    /** Warning shorthand. */
+    warning(message: string, options?: Partial<PrismToastOptions>): void;
+    /** Info shorthand. */
+    info(message: string, options?: Partial<PrismToastOptions>): void;
+    /** Removes every visible toast. */
+    dismissAll(): void;
+};

package/dist/toast.js

@@ -0,0 +1,245 @@
+/**
+ * Adaptive toast notifications as a web component — bottom-centered on
+ * mobile, stacked top-right on desktop. Zero dependencies.
+ *
+ * Quick start:
+ * ```js
+ * import 'prism-ui/toast';
+ * PrismToast.success('Settings saved.');
+ * ```
+ */
+const TYPES = {
+    success: { icon: '✓', label: 'Success' },
+    error: { icon: '✕', label: 'Error' },
+    warning: { icon: '!', label: 'Warning' },
+    info: { icon: 'i', label: 'Info' },
+};
+/** Container managing the toast stack (one per document). */
+let container = null;
+let styleInjected = false;
+const STACK_CSS = `
+  .prism-toast-stack {
+    position: fixed;
+    z-index: 2147483000;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    pointer-events: none;
+  }
+  .prism-toast-stack > * { pointer-events: auto; }
+  /* Mobile: bottom-centered, near full width */
+  .prism-toast-stack {
+    left: 16px;
+    right: 16px;
+    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+  }
+  /* Desktop/web: stacked top-right cards — the notification pattern */
+  @media (min-width: 600px) {
+    .prism-toast-stack {
+      top: 16px;
+      right: 16px;
+      bottom: auto;
+      left: auto;
+      width: 380px;
+      align-items: flex-end;
+    }
+  }
+`;
+function ensureContainer() {
+    if (container && document.body.contains(container))
+        return container;
+    if (!styleInjected) {
+        const style = document.createElement('style');
+        style.textContent = STACK_CSS;
+        document.head.appendChild(style);
+        styleInjected = true;
+    }
+    container = document.createElement('div');
+    container.className = 'prism-toast-stack';
+    document.body.appendChild(container);
+    return container;
+}
+/** Custom element rendering one toast card. */
+export class PrismToastElement extends HTMLElement {
+    static observedAttributes = [];
+    _timer = null;
+    _exiting = false;
+    connectedCallback() {
+        if (this.shadowRoot)
+            return;
+        const shadow = this.attachShadow({ mode: 'open' });
+        const type = (this.dataset.type ?? 'info');
+        const meta = TYPES[type];
+        const title = this.dataset.title;
+        const actionLabel = this.dataset.actionLabel;
+        shadow.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          animation: prism-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        :host(.prism-exiting) {
+          animation: prism-out 200ms ease-in forwards;
+        }
+        @keyframes prism-in {
+          from { opacity: 0; transform: translateY(12px); }
+          to { opacity: 1; transform: none; }
+        }
+        @keyframes prism-out {
+          to { opacity: 0; transform: translateY(-8px); }
+        }
+        .card {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px 8px 12px 16px;
+          border-radius: 14px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+          font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+          font-size: 14px;
+          line-height: 1.4;
+        }
+        .icon {
+          flex: none;
+          width: 26px;
+          height: 26px;
+          display: grid;
+          place-items: center;
+          border-radius: 50%;
+          font-weight: 700;
+          font-size: 14px;
+        }
+        .body { flex: 1; min-width: 0; }
+        .title { font-weight: 700; margin-bottom: 2px; }
+        .action {
+          flex: none;
+          background: none;
+          border: none;
+          font: inherit;
+          font-weight: 600;
+          cursor: pointer;
+          padding: 8px 10px;
+          border-radius: 8px;
+        }
+        .close {
+          flex: none;
+          background: none;
+          border: none;
+          cursor: pointer;
+          font-size: 18px;
+          line-height: 1;
+          padding: 8px;
+          border-radius: 8px;
+          opacity: 0.7;
+        }
+        .close:hover, .action:hover { opacity: 1; filter: brightness(1.15); }
+      </style>
+      <div class="card" part="card">
+        <span class="icon" part="icon">${meta.icon}</span>
+        <div class="body" part="body">
+          ${title ? `<div class="title">${escapeHtml(title)}</div>` : ''}
+          <div class="message">${escapeHtml(this.dataset.message ?? '')}</div>
+        </div>
+        ${actionLabel
+            ? `<button class="action" part="action">${escapeHtml(actionLabel)}</button>`
+            : ''}
+        <button class="close" part="close" aria-label="Dismiss">✕</button>
+      </div>
+    `;
+        const card = shadow.querySelector('.card');
+        applySeverity(card, type);
+        const close = shadow.querySelector('.close');
+        close.addEventListener('click', () => this.dismiss());
+        if (actionLabel) {
+            const action = shadow.querySelector('.action');
+            action.addEventListener('click', () => {
+                this.dispatchEvent(new CustomEvent('prism-toast-action', { bubbles: true }));
+                this.dismiss();
+            });
+        }
+        const duration = Number(this.dataset.duration ?? 3000);
+        this._timer = setTimeout(() => this.dismiss(), duration);
+    }
+    /** Animates the toast out and removes it from the DOM. */
+    dismiss() {
+        if (this._exiting)
+            return;
+        this._exiting = true;
+        if (this._timer)
+            clearTimeout(this._timer);
+        this.classList.add('prism-exiting');
+        this.addEventListener('animationend', () => this.remove(), { once: true });
+    }
+}
+if (!customElements.get('prism-toast')) {
+    customElements.define('prism-toast', PrismToastElement);
+}
+/** Imperative API for showing toasts. */
+export const PrismToast = {
+    /** Shows a toast with full options. */
+    show(options) {
+        ensureContainer();
+        const el = document.createElement('prism-toast');
+        el.dataset.type = options.type ?? 'info';
+        el.dataset.message = options.message;
+        if (options.title)
+            el.dataset.title = options.title;
+        if (options.duration !== undefined) {
+            el.dataset.duration = String(options.duration);
+        }
+        if (options.actionLabel)
+            el.dataset.actionLabel = options.actionLabel;
+        if (options.onAction) {
+            el.addEventListener('prism-toast-action', () => options.onAction());
+        }
+        container.appendChild(el);
+        return el;
+    },
+    /** Success shorthand. */
+    success(message, options) {
+        PrismToast.show({ ...options, message, type: 'success' });
+    },
+    /** Error shorthand. */
+    error(message, options) {
+        PrismToast.show({ ...options, message, type: 'error' });
+    },
+    /** Warning shorthand. */
+    warning(message, options) {
+        PrismToast.show({ ...options, message, type: 'warning' });
+    },
+    /** Info shorthand. */
+    info(message, options) {
+        PrismToast.show({ ...options, message, type: 'info' });
+    },
+    /** Removes every visible toast. */
+    dismissAll() {
+        if (!container)
+            return;
+        container
+            .querySelectorAll('prism-toast')
+            .forEach((el) => el.dismiss());
+    },
+};
+function applySeverity(card, type) {
+    // Material 3-inspired container colors.
+    const palettes = {
+        success: ['#DCEFE4', '#0F5132'],
+        error: ['#FADBD8', '#7A1C12'],
+        warning: ['#FDEBD0', '#7A4B0C'],
+        info: ['#E3E7F4', '#28325A'],
+    };
+    const [bg, fg] = palettes[type];
+    card.style.background = bg;
+    card.style.color = fg;
+    const icon = card.querySelector('.icon');
+    icon.style.background = fg;
+    icon.style.color = bg;
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@awaisdev5765/prism-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Zero-dependency web components for modern apps — adaptive toasts, banners, and more. The web sibling of the Prism Flutter family.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./toast": {
+      "types": "./dist/toast.d.ts",
+      "import": "./dist/toast.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build && npm test"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "toast",
+    "notification",
+    "ui",
+    "vanilla",
+    "zero-dependency",
+    "prism"
+  ],
+  "author": "Awais Rehman",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/awaisdev5765/prism-ui.git"
+  },
+  "homepage": "https://github.com/awaisdev5765/prism-ui#readme",
+  "bugs": {
+    "url": "https://github.com/awaisdev5765/prism-ui/issues"
+  },
+  "devDependencies": {
+    "happy-dom": "^15.0.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  }
+}