notiqjs 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Andrés Rengifo
+
+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,188 @@
+<div align="center">
+  <h1>Notiq</h1>
+  <p><strong>A sub-2kb, framework-agnostic toast notification library.</strong></p>
+  
+  <p>
+    <img alt="npm package size" src="https://img.shields.io/badge/size-%3C%202kb%20(gzip)-success?style=for-the-badge">
+    <img alt="Dependencies" src="https://img.shields.io/badge/dependencies-0-blue?style=for-the-badge">
+    <img alt="A11y" src="https://img.shields.io/badge/A11y-Supported-blueviolet?style=for-the-badge">
+  </p>
+</div>
+
+<br>
+
+Notiq is a microscopic, highly optimized toast notification library written in pure TypeScript. It has zero dependencies, operates entirely on the DOM, and integrates seamlessly into any frontend environment without the need for wrappers or providers.
+
+## Features
+
+- **Microscopic Size:** < 2kb minified + gzipped.
+- **Zero Dependencies:** Pure Vanilla JS/TS under the hood.
+- **Framework Agnostic:** Works beautifully in React, Vue, Svelte, Astro, or plain HTML.
+- **SSR Safe:** Safely executed in server-rendered frameworks (Next.js, Nuxt, Astro).
+- **Accessible:** Automatic `aria-live` regions for screen readers.
+- **XSS Secure:** Uses `textContent` to prevent script injections.
+- **Smooth Animations:** Hardware-accelerated sliding and scaling transitions.
+
+## Installation
+
+```bash
+# npm
+npm install notiqjs
+
+# yarn
+yarn add notiqjs
+
+# pnpm
+pnpm add notiqjs
+
+# bun
+bun add notiqjs
+```
+
+## Quick Start
+
+Import the class and call a static method. No context providers or root components required.
+
+```ts
+import { Notiq } from 'notiqjs';
+
+// Basic usage
+Notiq.success('Payment processed successfully');
+
+// With description and custom position
+Notiq.error({
+  message: 'Connection Timeout',
+  description: 'Please check your internet connection and try again.',
+  position: 'top-center'
+});
+```
+
+---
+
+## Framework Integration
+
+Because Notiq does not rely on a Virtual DOM, it can be called directly from component logic, event handlers, or even external services (like Axios interceptors).
+
+### React / Next.js
+```tsx
+import { Notiq } from 'notiqjs';
+
+export default function Checkout() {
+  const handlePayment = () => {
+    Notiq.success({ 
+      message: 'Order placed!', 
+      description: 'Receipt sent to your email.' 
+    });
+  };
+
+  return <button onClick={handlePayment}>Pay Now</button>;
+}
+```
+
+### Angular
+```typescript
+import { Component } from '@angular/core';
+import { Notiq } from 'notiqjs';
+
+@Component({
+  selector: 'app-checkout',
+  template: `<button (click)="handlePayment()">Pay Now</button>`
+})
+export class CheckoutComponent {
+  handlePayment() {
+    Notiq.success({ 
+      message: 'Order placed!', 
+      description: 'Receipt sent to your email.' 
+    });
+  }
+}
+```
+
+### Astro
+In Astro, client-side code runs inside standard `<script>` tags.
+
+```astro
+---
+// src/components/NotifyButton.astro
+---
+<button id="notify-btn">Launch Toast</button>
+
+<script>
+  import { Notiq } from 'notiqjs';
+  
+  document.getElementById('notify-btn')?.addEventListener('click', () => {
+    Notiq.success('Hello from Astro!');
+  });
+</script>
+```
+
+---
+
+## Customization
+
+Notiq is designed to be fully customizable without fighting inline styles.
+
+### 1. Global CSS Overrides
+Every toast automatically receives the `notiq` CSS class. Target this in your global stylesheet to override defaults (like `border-radius`, `font-family`, etc.) across your entire application.
+
+```css
+/* global.css */
+.notiq {
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+}
+```
+
+### 2. Utility Classes (Tailwind CSS)
+Pass specific utility classes directly to individual toasts using the `className` property.
+
+```ts
+Notiq.info({
+  message: 'Update available',
+  className: 'border-2 border-blue-500 shadow-xl'
+});
+```
+
+### 3. Custom Icons & Colors
+You can inject any raw HTML into the `icon` property (perfect for SVGs or Iconify) and pass any valid CSS `background` value to `color`.
+
+```ts
+Notiq.custom({
+  message: 'Premium Unlocked',
+  color: 'linear-gradient(135deg, #6366f1 0%, #a855f7 100%)',
+  icon: '<svg>...</svg>', /* Your custom SVG string */
+  textColor: '#ffffff'
+});
+```
+
+---
+
+## API Reference
+
+### Methods
+- `Notiq.success(options)`
+- `Notiq.error(options)`
+- `Notiq.warning(options)`
+- `Notiq.info(options)`
+- `Notiq.custom(options)`
+
+### `NotiqOptions`
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `message` | `string` | **Required** | The main text of the notification. |
+| `description` | `string` | `undefined` | Secondary text displayed below the message. |
+| `position` | `string` | `bottom-right` | `top-right`, `top-left`, `top-center`, `bottom-right`, `bottom-left`, `bottom-center`. |
+| `duration` | `number` | `3000` | Time in milliseconds before the toast auto-dismisses. |
+| `icon` | `string \| false` | *(Default icon)* | Custom SVG/HTML string, or `false` to hide. |
+| `dismiss` | `boolean` | `true` | If true, clicking the toast will close it immediately. |
+| `color` | `string` | *(Theme default)* | Background color. Accepts hex, rgb, or CSS gradients. |
+| `textColor` | `string` | `#fff` | Override the text color. |
+| `className` | `string` | `undefined` | Inject custom CSS classes (e.g. Tailwind). |
+
+---
+
+## License
+
+Notiq is under [MIT license](https://opensource.org/license/mit)

package/dist/ntiq.es.js

@@ -0,0 +1,48 @@
+//#region src/ntiq.ts
+var e = {
+	success: ["<path d=\"M20 6L9 17l-5-5\"/>", "#10b981"],
+	error: ["<path d=\"M18 6L6 18M6 6l12 12\"/>", "#ef4444"],
+	info: ["<path d=\"M12 8h0M12 12v4\"/>", "#3b82f6"],
+	warning: ["<path d=\"M12 9v4M12 17h0M10.3 4L2 18h20L13.7 4a2 2 0 0 0-3.4 0z\"/>", "#f59e0b"]
+}, t = !1;
+function n() {
+	t || typeof document > "u" || (t = !0, document.head.insertAdjacentHTML("afterbegin", "<style>\n    .nq-c{position:fixed;display:flex;flex-direction:column;gap:12px;z-index:9999;pointer-events:none}\n    .nq-tr,.nq-br{right:20px;align-items:flex-end}\n    .nq-tl,.nq-bl{left:20px;align-items:flex-start}\n    .nq-tc,.nq-bc{left:50%;transform:translateX(-50%);align-items:center}\n    .nq-tr,.nq-tl,.nq-tc{top:20px}\n    .nq-br,.nq-bl,.nq-bc{bottom:20px}\n    .nq-t{max-width:600px;pointer-events:auto;position:relative;overflow:hidden;padding:12px 16px;border-radius:8px;color:#fff;font:500 14px/1.4 system-ui,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:flex-start;gap:10px;opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.27)}\n    .nq-s{opacity:1!important;transform:none!important}\n    .nq-i{flex-shrink:0;margin-top:1px}\n    .nq-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}\n    .nq-p{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.35);animation:nq-p linear forwards}\n    @keyframes nq-p{from{width:100%}to{width:0}}\n    @media(max-width:480px){.nq-c{left:12px!important;right:12px!important;transform:none!important;align-items:stretch!important}}\n  </style>"));
+}
+function r(t, r) {
+	if (typeof window > "u") return;
+	n();
+	let i = typeof t == "string" ? { message: t } : t, a = i.type ?? r, o = i.position ?? "bottom-right", s = i.duration ?? 3e3, c = o.split("-").map((e) => e[0]).join(""), [l, u] = e[a], d = document.querySelector(`.nq-${c}`);
+	d ||= (document.body.insertAdjacentHTML("beforeend", `<div class="nq-c nq-${c}"></div>`), document.querySelector(`.nq-${c}`));
+	let f = document.createElement("div");
+	if (f.className = [
+		"ntiq",
+		"nq-t",
+		i.className
+	].filter(Boolean).join(" "), f.setAttribute("role", "alert"), f.setAttribute("aria-live", a === "error" || a === "warning" ? "assertive" : "polite"), f.style.cssText = `background:${i.color ?? u};transform:translateY(${o[0] === "t" ? "-" : ""}16px) scale(.95)`, i.textColor && (f.style.color = i.textColor), i.icon !== !1) {
+		let e = document.createElement("span");
+		e.className = "nq-i", e.innerHTML = i.icon ?? `<svg viewBox="0 0 24 24">${l}</svg>`, f.appendChild(e);
+	}
+	let p = document.createElement("div");
+	p.style.flexGrow = "1";
+	let m = document.createElement("div");
+	if (m.textContent = i.message, i.description && (m.style.fontWeight = "600"), p.appendChild(m), i.description) {
+		let e = document.createElement("div");
+		e.textContent = i.description, e.style.cssText = "font-size:.875em;opacity:.85;margin-top:3px", p.appendChild(e);
+	}
+	f.appendChild(p), f.insertAdjacentHTML("beforeend", `<div class="nq-p" style="animation-duration:${s}ms"></div>`), o[0] === "t" ? d.prepend(f) : d.appendChild(f), f.offsetHeight, f.classList.add("nq-s");
+	let h = () => {
+		f.classList.remove("nq-s"), f.addEventListener("transitionend", () => {
+			f.remove(), d.childElementCount || d.remove();
+		}, { once: !0 });
+	};
+	i.dismiss !== !1 && (f.onclick = h), setTimeout(h, s);
+}
+var i = class {
+	static success = (e) => r(e, "success");
+	static error = (e) => r(e, "error");
+	static info = (e) => r(e, "info");
+	static warning = (e) => r(e, "warning");
+	static custom = (e) => r(e, "info");
+};
+//#endregion
+export { i as Ntiq };

package/dist/ntiq.umd.js

@@ -0,0 +1,15 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Ntiq={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:[`<path d="M20 6L9 17l-5-5"/>`,`#10b981`],error:[`<path d="M18 6L6 18M6 6l12 12"/>`,`#ef4444`],info:[`<path d="M12 8h0M12 12v4"/>`,`#3b82f6`],warning:[`<path d="M12 9v4M12 17h0M10.3 4L2 18h20L13.7 4a2 2 0 0 0-3.4 0z"/>`,`#f59e0b`]},n=!1;function r(){n||typeof document>`u`||(n=!0,document.head.insertAdjacentHTML(`afterbegin`,`<style>
+    .nq-c{position:fixed;display:flex;flex-direction:column;gap:12px;z-index:9999;pointer-events:none}
+    .nq-tr,.nq-br{right:20px;align-items:flex-end}
+    .nq-tl,.nq-bl{left:20px;align-items:flex-start}
+    .nq-tc,.nq-bc{left:50%;transform:translateX(-50%);align-items:center}
+    .nq-tr,.nq-tl,.nq-tc{top:20px}
+    .nq-br,.nq-bl,.nq-bc{bottom:20px}
+    .nq-t{max-width:600px;pointer-events:auto;position:relative;overflow:hidden;padding:12px 16px;border-radius:8px;color:#fff;font:500 14px/1.4 system-ui,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:flex-start;gap:10px;opacity:0;transition:opacity .3s,transform .3s cubic-bezier(.175,.885,.32,1.27)}
+    .nq-s{opacity:1!important;transform:none!important}
+    .nq-i{flex-shrink:0;margin-top:1px}
+    .nq-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+    .nq-p{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.35);animation:nq-p linear forwards}
+    @keyframes nq-p{from{width:100%}to{width:0}}
+    @media(max-width:480px){.nq-c{left:12px!important;right:12px!important;transform:none!important;align-items:stretch!important}}
+  </style>`))}function i(e,n){if(typeof window>`u`)return;r();let i=typeof e==`string`?{message:e}:e,a=i.type??n,o=i.position??`bottom-right`,s=i.duration??3e3,c=o.split(`-`).map(e=>e[0]).join(``),[l,u]=t[a],d=document.querySelector(`.nq-${c}`);d||=(document.body.insertAdjacentHTML(`beforeend`,`<div class="nq-c nq-${c}"></div>`),document.querySelector(`.nq-${c}`));let f=document.createElement(`div`);if(f.className=[`ntiq`,`nq-t`,i.className].filter(Boolean).join(` `),f.setAttribute(`role`,`alert`),f.setAttribute(`aria-live`,a===`error`||a===`warning`?`assertive`:`polite`),f.style.cssText=`background:${i.color??u};transform:translateY(${o[0]===`t`?`-`:``}16px) scale(.95)`,i.textColor&&(f.style.color=i.textColor),i.icon!==!1){let e=document.createElement(`span`);e.className=`nq-i`,e.innerHTML=i.icon??`<svg viewBox="0 0 24 24">${l}</svg>`,f.appendChild(e)}let p=document.createElement(`div`);p.style.flexGrow=`1`;let m=document.createElement(`div`);if(m.textContent=i.message,i.description&&(m.style.fontWeight=`600`),p.appendChild(m),i.description){let e=document.createElement(`div`);e.textContent=i.description,e.style.cssText=`font-size:.875em;opacity:.85;margin-top:3px`,p.appendChild(e)}f.appendChild(p),f.insertAdjacentHTML(`beforeend`,`<div class="nq-p" style="animation-duration:${s}ms"></div>`),o[0]===`t`?d.prepend(f):d.appendChild(f),f.offsetHeight,f.classList.add(`nq-s`);let h=()=>{f.classList.remove(`nq-s`),f.addEventListener(`transitionend`,()=>{f.remove(),d.childElementCount||d.remove()},{once:!0})};i.dismiss!==!1&&(f.onclick=h),setTimeout(h,s)}e.Ntiq=class{static success=e=>i(e,`success`);static error=e=>i(e,`error`);static info=e=>i(e,`info`);static warning=e=>i(e,`warning`);static custom=e=>i(e,`info`)}});

package/dist/src/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/ntiq.d.ts

@@ -0,0 +1,19 @@
+export interface NtiqOptions {
+    message: string;
+    description?: string;
+    type?: 'success' | 'error' | 'info' | 'warning';
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    duration?: number;
+    icon?: string | false;
+    dismiss?: boolean;
+    color?: string;
+    textColor?: string;
+    className?: string;
+}
+export declare class Ntiq {
+    static success: (o: string | NtiqOptions) => void;
+    static error: (o: string | NtiqOptions) => void;
+    static info: (o: string | NtiqOptions) => void;
+    static warning: (o: string | NtiqOptions) => void;
+    static custom: (o: NtiqOptions) => void;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "notiqjs",
+  "version": "1.0.0",
+  "description": "The sub-2kb, framework-agnostic, toast notification library.",
+  "type": "module",
+  "main": "./dist/notiq.umd.js",
+  "module": "./dist/notiq.es.js",
+  "types": "./dist/notiq.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/notiq.es.js",
+      "require": "./dist/notiq.umd.js",
+      "types": "./dist/notiq.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "toast",
+    "notification",
+    "alert",
+    "framework-agnostic",
+    "vanilla",
+    "typescript"
+  ],
+  "author": "Andrés Rengifo <andresm.rengifo@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/afmosquerare/notiq"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^5.0.1"
+  }
+}