glass-alert-animation 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GlassAlert
+
+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,119 @@
+# GlassAlert Animation ✨
+
+<p align="center">
+  <img src="docs/assets/logo.png" alt="GlassAlert Logo" width="200" />
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/glass-alert-animation">
+    <img src="https://img.shields.io/npm/v/glass-alert-animation?style=flat-square&color=6366f1" alt="npm version" />
+  </a>
+  <a href="https://www.npmjs.com/package/glass-alert-animation">
+    <img src="https://img.shields.io/npm/dw/glass-alert-animation?style=flat-square&color=8b5cf6" alt="npm downloads" />
+  </a>
+  <a href="https://github.com/jhonatalex/glass-alert/blob/main/LICENSE">
+    <img src="https://img.shields.io/github/license/jhonatalex/glass-alert?style=flat-square&color=6366f1" alt="license" />
+  </a>
+  <a href="https://github.com/jhonatalex/glass-alert">
+    <img src="https://img.shields.io/github/stars/jhonatalex/glass-alert?style=flat-square&color=8b5cf6" alt="github stars" />
+  </a>
+</p>
+
+---
+
+**GlassAlert** is a premium, high-performance glassmorphism alert and modal library for React, powered by GSAP. Designed to be a high-end alternative to SweetAlert2, it focuses on modern "liquid glass" aesthetics, fluid animations, and interactive backgrounds.
+
+### [🌐 Visit Live Documentation & Demos](https://jhonatalex.github.io/glass-alert/)
+
+---
+
+## ✨ Features
+
+- 💎 **Premium Glassmorphism**: Stunning blur effects, translucent gradients, and luminous borders.
+- 🚀 **GSAP-Powered Animations**: Hardware-accelerated transitions that feel smooth and professional.
+- 🎨 **Dynamic Backgrounds**: Interactive, moving liquid gradient backgrounds for an "alive" feel.
+- 📦 **Framework Ready**: Built for React with a simple hook-based API.
+- 📱 **Mobile Optimized**: Fully responsive and lightweight.
+- 🛠️ **Extremely Customizable**: Adjust blur, opacity, colors, and animation styles with ease.
+- 🎭 **Lottie Support**: Built-in support for Lottie animations for success, error, and more.
+
+## 🚀 Installation
+
+```bash
+npm install glass-alert-animation gsap lottie-react
+```
+
+> **Note:** `gsap` and `lottie-react` are required dependencies for the animations and icons.
+
+## 📖 Quick Start
+
+### 1. Setup the Provider
+
+Wrap your application with the `GlassAlertProvider` and import the styles.
+
+```tsx
+import { GlassAlertProvider } from 'glass-alert-animation';
+import 'glass-alert-animation/styles';
+
+function App() {
+  return (
+    <GlassAlertProvider>
+      <yourApp />
+    </GlassAlertProvider>
+  );
+}
+```
+
+### 2. Trigger an Alert
+
+Use the `useGlassAlert` hook to fire alerts anywhere in your components.
+
+```tsx
+import { useGlassAlert } from 'glass-alert-animation';
+
+function MyComponent() {
+  const { fire } = useGlassAlert();
+
+  const handleAlert = async () => {
+    const result = await fire({
+      title: 'Success!',
+      text: 'GlassAlert is working perfectly.',
+      icon: 'success',
+      glassColor: '#6366f1',
+      animation: 'liquid'
+    });
+    
+    if (result.isConfirmed) {
+      console.log('User clicked OK');
+    }
+  };
+
+  return <button onClick={handleAlert}>Show Alert</button>;
+}
+```
+
+## ⚙️ Configuration Reference
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | `''` | Main title header. |
+| `text` | `string` | `''` | Body text content. |
+| `html` | `ReactNode` | `undefined` | Custom HTML content (overrides text). |
+| `icon` | `string` | `undefined` | `success`, `error`, `warning`, `info`, `question`. |
+| `animation` | `string` | `'elastic'` | `elastic`, `bounce`, `slide`, `fade`, `liquid`. |
+| `toast` | `boolean` | `false` | Enable toast notification mode. |
+| `timer` | `number` | `0` | Auto-dismiss timer in ms. |
+| `glassBlur` | `number` | `20` | Blur intensity for the glass effect (px). |
+| `glassOpacity` | `number` | `0.12` | Opacity of the background (0-1). |
+| `glassColor` | `string` | `'#6366f1'` | Primary accent color. |
+| `animatedBackground`| `boolean` | `true` | Enable the dynamic background gradient. |
+
+---
+
+## 🤝 Contributing
+
+This project is open-source and we welcome all contributions! Feel free to open issues or submit pull requests.
+
+## 📄 License
+
+MIT © [jhonatalex](https://github.com/jhonatalex)

package/dist/core/animations.d.ts

@@ -0,0 +1,17 @@
+/**
+ * GSAP Animation Engine for GlassAlert
+ * Uses GSAP best practices from the official gsap-skills:
+ * - Transform aliases (x, y, scale, rotation) over raw transform strings
+ * - autoAlpha over opacity for fade in/out
+ * - Timeline-based sequencing
+ * - Built-in eases (back.out, elastic.out, power3.inOut)
+ */
+import type { GlassAlertAnimation } from './types';
+/** Set GSAP instance if user provides it (for ESM environments) */
+export declare function setGsap(g: any): void;
+export declare function animateIn(popupEl: HTMLElement, backdropEl: HTMLElement, type?: GlassAlertAnimation, onComplete?: () => void): any;
+export declare function animateOut(popupEl: HTMLElement, backdropEl: HTMLElement, type?: GlassAlertAnimation, onComplete?: () => void): any;
+export declare function animateIcon(iconEl: HTMLElement, iconType: string): any;
+export declare function animateBackground(bgEl: HTMLElement, speed?: number): any;
+export declare function animateButtonHover(btnEl: HTMLElement, enter: boolean): void;
+export declare function animateTimerBar(barEl: HTMLElement, duration: number, onComplete?: () => void): any;

package/dist/core/defaults.d.ts

@@ -0,0 +1,4 @@
+import type { GlassAlertOptions } from './types';
+export declare const defaultOptions: Required<Pick<GlassAlertOptions, 'position' | 'animation' | 'toast' | 'timer' | 'timerProgressBar' | 'showConfirmButton' | 'confirmButtonText' | 'confirmButtonColor' | 'showCancelButton' | 'cancelButtonText' | 'cancelButtonColor' | 'showDenyButton' | 'denyButtonText' | 'denyButtonColor' | 'showCloseButton' | 'allowOutsideClick' | 'allowEscapeKey' | 'reverseButtons' | 'useLottieIcons' | 'lottieLoop' | 'glassBlur' | 'glassOpacity' | 'glassColor' | 'glassColorSecondary' | 'glassBorderOpacity' | 'backdropBlur' | 'animatedBackground' | 'backgroundAnimSpeed'>>;
+/** Merge user options with defaults */
+export declare function mergeOptions(opts: GlassAlertOptions): GlassAlertOptions & typeof defaultOptions;

package/dist/core/icons.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SVG Icon definitions for GlassAlert
+ * Each icon is designed to be animated by GSAP (stroke-dasharray/dashoffset)
+ */
+export declare const iconSVGs: {
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    question: string;
+};
+/** Default icon colors */
+export declare const iconColors: Record<string, string>;

package/dist/core/types.d.ts

@@ -0,0 +1,123 @@
+/** Icon types for GlassAlert */
+export type GlassAlertIcon = 'success' | 'error' | 'warning' | 'info' | 'question';
+/** Position variants */
+export type GlassAlertPosition = 'center' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+/** Animation variants */
+export type GlassAlertAnimation = 'elastic' | 'bounce' | 'slide' | 'fade' | 'liquid' | 'none';
+/** Dismiss reasons */
+export type GlassDismissReason = 'cancel' | 'backdrop' | 'close' | 'esc' | 'timer';
+/** Result returned by fire() */
+export interface GlassAlertResult<T = any> {
+    readonly isConfirmed: boolean;
+    readonly isDenied: boolean;
+    readonly isDismissed: boolean;
+    readonly value?: T;
+    readonly dismiss?: GlassDismissReason;
+}
+/** Glass-specific style options */
+export interface GlassStyleOptions {
+    /** Blur intensity for the glass effect (px). Default: 20 */
+    glassBlur?: number;
+    /** Opacity of the glass background (0-1). Default: 0.15 */
+    glassOpacity?: number;
+    /** Primary glass color (hex/rgb). Default: '#6366f1' */
+    glassColor?: string;
+    /** Secondary glass color for gradients. Default: '#8b5cf6' */
+    glassColorSecondary?: string;
+    /** Border luminosity (0-1). Default: 0.3 */
+    glassBorderOpacity?: number;
+    /** Backdrop blur (px). Default: 8 */
+    backdropBlur?: number;
+    /** Enable animated background gradient. Default: true */
+    animatedBackground?: boolean;
+    /** Background animation speed in seconds. Default: 8 */
+    backgroundAnimSpeed?: number;
+}
+/** Main options for GlassAlert.fire() */
+export interface GlassAlertOptions extends GlassStyleOptions {
+    /** Title text (supports HTML when using html prop) */
+    title?: string;
+    /** Body text */
+    text?: string;
+    /** Custom HTML content (overrides text) */
+    html?: string | React.ReactNode;
+    /** Icon type */
+    icon?: GlassAlertIcon;
+    /** Custom icon color */
+    iconColor?: string;
+    /** Position of the popup */
+    position?: GlassAlertPosition;
+    /** Animation type for entrance/exit */
+    animation?: GlassAlertAnimation;
+    /** Show as toast (non-blocking, auto-dismiss) */
+    toast?: boolean;
+    /** Lottie animation URL or imported JSON object */
+    lottie?: string | object;
+    /** Whether the Lottie animation should play on loop. Default: false */
+    lottieLoop?: boolean;
+    /** Whether to use bundled Lottie defaults for standard icons. Default: true */
+    useLottieIcons?: boolean;
+    /** Auto-close timer in milliseconds */
+    timer?: number;
+    /** Show timer progress bar */
+    timerProgressBar?: boolean;
+    /** Popup width */
+    width?: number | string;
+    /** Popup padding */
+    padding?: number | string;
+    /** Show confirm button. Default: true */
+    showConfirmButton?: boolean;
+    /** Confirm button text. Default: 'OK' */
+    confirmButtonText?: string;
+    /** Confirm button color */
+    confirmButtonColor?: string;
+    /** Show cancel button. Default: false */
+    showCancelButton?: boolean;
+    /** Cancel button text. Default: 'Cancel' */
+    cancelButtonText?: string;
+    /** Cancel button color */
+    cancelButtonColor?: string;
+    /** Show deny button. Default: false */
+    showDenyButton?: boolean;
+    /** Deny button text. Default: 'No' */
+    denyButtonText?: string;
+    /** Deny button color */
+    denyButtonColor?: string;
+    /** Show close (X) button. Default: false */
+    showCloseButton?: boolean;
+    /** Allow closing by clicking backdrop. Default: true */
+    allowOutsideClick?: boolean;
+    /** Allow closing by pressing Escape. Default: true */
+    allowEscapeKey?: boolean;
+    /** Reverse buttons order. Default: false */
+    reverseButtons?: boolean;
+    /** Called when popup opens */
+    willOpen?: () => void;
+    /** Called after popup is fully open & animated */
+    didOpen?: () => void;
+    /** Called when popup starts closing */
+    willClose?: () => void;
+    /** Called after popup is fully closed */
+    didClose?: () => void;
+    /** Footer content */
+    footer?: string | React.ReactNode;
+    customClass?: {
+        container?: string;
+        popup?: string;
+        title?: string;
+        icon?: string;
+        content?: string;
+        actions?: string;
+        confirmButton?: string;
+        cancelButton?: string;
+        denyButton?: string;
+        closeButton?: string;
+        footer?: string;
+    };
+}
+/** Internal state for the alert queue */
+export interface GlassAlertState {
+    isOpen: boolean;
+    options: GlassAlertOptions;
+    resolve: ((result: GlassAlertResult) => void) | null;
+}