juice-toast 1.2.1 → 1.3.1

package/API.md

@@ -0,0 +1,262 @@
+# 🍹 JuiceToast API Reference
+
+JuiceToast is a lightweight, dependency-free toast notification library with rich customization, animation, accessibility, and plugin support.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install juice-toast
+```
+
+```js
+import juiceToast from "juice-toast";
+```
+
+---
+
+## 🚀 Quick Start
+
+```js
+juiceToast.setup({
+  duration: 3000,
+  maxVisible: 3,
+  glassUI: true
+});
+
+juiceToast.success({
+  title: "Success",
+  message: "Data saved successfully"
+});
+```
+
+---
+
+## ⚙️ Global Configuration (`setup`)
+
+```js
+juiceToast.setup(options);
+```
+
+### Options
+
+| Option           | Type             | Default | Description                     |
+| ---------------- | ---------------- | ------- | ------------------------------- |
+| `duration`       | number           | `2500`  | Toast display duration (ms)     |
+| `maxVisible`     | number           | `3`     | Max visible toasts per position |
+| `glassUI`        | boolean | number | `0`     | Enable glass effect (0–100)     |
+| `playSound`      | string | null    | `null`  | Global sound file               |
+| `injectCSS`      | boolean          | `true`  | Auto inject base CSS            |
+| `css`            | string | null    | `null`  | Custom CSS override             |
+| `swipeThreshold` | number           | `60`    | Swipe distance to dismiss       |
+| `dev`            | boolean          | `false` | Enable console warnings         |
+
+---
+
+## 🧩 Toast Methods
+
+Each toast type is auto-generated from configuration or `addType`.
+
+```js
+juiceToast.success(payload);
+juiceToast.error(payload);
+juiceToast.info(payload);
+juiceToast.warning(payload);
+juiceToast.loading(payload);
+```
+
+Payload can be a **string** or **object**.
+
+---
+
+## 📝 Toast Payload Options
+
+### Basic
+
+```js
+{
+  title: "Title",
+  message: "Message",
+  duration: 3000
+}
+```
+
+### Appearance
+
+```js
+{
+  theme: "dark",
+  bg: "#333",
+  color: "#fff",
+  border: "1px solid #000",
+  size: "sm" | "md" | "lg",
+  compact: true
+}
+```
+
+---
+
+## 🎬 Animation
+
+```js
+{
+  animation: "slide-in" | "fade-in" | "bounce-in",
+  enterAnimation: "pop" | "bounce" | "shake" | "wiggle" | "pulse" | "spin"
+}
+```
+
+> `enterAnimation` respects `prefers-reduced-motion` automatically.
+
+---
+
+## 🧊 Glass UI
+
+```js
+{
+  glassUI: true        // default intensity (60)
+  glassUI: 80          // custom intensity
+}
+```
+
+---
+
+## 📍 Position / Placement
+
+```js
+{
+  position: "top-left" |
+            "top-right" |
+            "top-center" |
+            "bottom-left" |
+            "bottom-right" |
+            "bottom-center"
+}
+```
+
+---
+
+## 🎯 Icon System
+
+```js
+{
+  icon: "check-circle",
+  iconPack: "fa fa-solid",
+  iconSize: "18px",
+  iconPosition: "left" | "right" | "top",
+  iconAnimate: "bounce",
+  iconLink: "https://example.com"
+}
+```
+
+---
+
+## 🔘 Actions Button
+
+```js
+{
+  actions: [
+    {
+      label: "Undo",
+      onClick: () => {},
+      closeOnClick: true
+    }
+  ]
+}
+```
+
+---
+
+## ⏳ Progress Bar
+
+```js
+{
+  progress: true,
+  progressColor: "rgba(255,255,255,.7)"
+}
+```
+
+---
+
+## 🔊 Sound
+
+```js
+{
+  playSound: "ding.mp3"
+}
+```
+
+Supported formats: `.mp3`, `.wav`, `.ogg`, `.opus`, `.aiff`, `.wma`
+
+---
+
+## ✋ Interaction
+
+* Swipe to dismiss (touch devices)
+* Pause on hover / touch
+* Click close button (`closable: true`)
+
+```js
+{ closable: true }
+```
+
+---
+
+## ♿ Accessibility (A11Y)
+
+* `role="alert"`
+* `aria-live="polite"`
+* Keyboard focusable
+* Reduced motion support
+
+---
+
+## 🔌 Plugin System
+
+```js
+juiceToast.use(ctx => {
+  const { toast, cfg, type, root } = ctx;
+});
+```
+
+---
+
+## 🎨 Theme API
+
+```js
+juiceToast.defineTheme("ocean", {
+  bg: "#0ea5e9",
+  color: "#fff"
+});
+
+juiceToast.setTheme("ocean");
+```
+
+---
+
+## ➕ Custom Toast Type
+
+```js
+juiceToast.addType("custom", {
+  icon: "star",
+  bg: "gold",
+  color: "#000"
+});
+
+juiceToast.custom("Hello World");
+```
+
+---
+
+## 🧹 Utilities
+
+```js
+juiceToast.clear();   // Clear queue
+juiceToast.destroy(); // Remove all & cleanup
+```
+
+---
+
+## 📄 License
+
+MIT License © 2026 OpenDN Foundation

package/CHANGELOG.md

@@ -1,26 +1,46 @@
-v1.2.0-rc.2026
-- Adding A11Y
-- Adding More Placement
-- GlassUI Fix (WARNING: Maybe it's Not Working)
-- Adding Animation
+
+## v1.3.1
+- Improved iOS / Safari (WebKit) compatibility
+- Smoother swipe-to-dismiss on mobile
+- Better pause-on-touch behavior
+- Progress bar sync fixes
+- Accessibility & stability improvements
+
+v1.3.0
+- Add CSS Injection System (no external `style.css` needed)
+- Add Reduced Motion Support (prefers-reduced-motion)
+- Improve Animation System (enterAnimation + type animation)
+- Improve Glass UI with intensity control (0–100)
+- Improve Swipe to Dismiss
+- Improve Pause on Hover & Touch
+- Add Plugin System
+- Improve Accessibility (ARIA, keyboard focus)
+- Improve Icon Interaction & Animation
+- Add Animation Preset
+- Add Progress Bar
+- Bug fixes & internal refactor
+
+v1.2.0-rc.2026 / v1.2.1
+- Add A11Y support
+- Add Multiple Placement / Position
+- Experimental Glass UI (unstable)
 
 NEXT 120/2026
-- Adding Swipe to Dismiss
-- Adding Pause on Hover
-- Adding `playSound`
-- Adding GlassUI
+- Improve Sound API (per-toast sound)
+- Add Exit Animation
+- Add Promise-based Toast API
+- Add Stack Grouping
+- Improve TypeScript Definitions
 
 v1.1.0
-- Adding **Size Preset**
-- Adding Compact
-- Improve Style And Fix Bugs
+- Add Size Preset
+- Add Compact Mode
+- Add Actions Button
+- Improve Style
 - Improve `.d.ts`
-- Adding **Actions Button**
 
 v1.0.1
-- Add Forget File `style.css`
+- Add `style.css` file
 
 v1.0.0
-- Published In First Time
-
-
+- Initial release

package/CODE_OF_CONDUCT.md

@@ -49,7 +49,7 @@ Here are some ways you can help make Juice Toast a positive community:
 If you see or experience something that breaks this Code of Conduct:
 
 1. **Stay calm** and don’t respond aggressively.
-2. **Report it** to the maintainers at **[your-email@example.com]**.
+2. **Report it** to the maintainers at **[musickhairy@gmail.com]**.
 3. Maintainers will **review and respond quickly and fairly**, keeping the reporter anonymous if requested.
 4. Actions can include **warnings, temporary restrictions, or banning**, depending on severity.
 
@@ -84,4 +84,4 @@ Juice Toast isn’t just code — it’s a **community of developers who care**.
 Great ideas come from collaboration, experimentation, and mutual respect.  
 By following this Code of Conduct, you’re helping make Juice Toast a **place where developers of all skill levels can grow, learn, and have fun**.  
 
-Let’s build something amazing together! 🚀
+Let’s build something amazing together! 🚀

package/EoL.md

@@ -6,5 +6,4 @@ The following versions and distributions have reached End of Life (EoL) and are
 |--------------------|-----------------|--------|
 | 1.2.0-rc.2026      | UMD build       | UMD distribution has been removed to simplify maintenance and reduce build complexity |
 | 0.0.0-next.1202026 | Pre-release tag | Versioning structure became inconsistent and difficult to maintain |
-| 1.0.0              | 1.0.0 | Stable release | Deprecated due to outdated internal architecture and styling standards |
 | 1.0.0 | Stable release | Deprecated due to outdated internal architecture and styling standards |

package/README.md

@@ -3,14 +3,14 @@
 **JuiceToast** is a lightweight, flexible, and dependency-free toast notification library for modern web applications.  
 Designed with a **clean API**, **extensive customization**, and **strong backward compatibility**, JuiceToast fits both small projects and enterprise-scale systems.
 
-It supports **ESM and UMD**, **dynamic toast types**, **theme management**, **queue handling**, and **legacy API compatibility** out of the box.
+It supports **ESM**, **dynamic toast types**, **theme management**, **queue handling**, and **legacy API compatibility** out of the box.
 
 ---
 
 ## ✨ Key Features
 
 - 🚀 Zero dependencies
-- 📦 Supports **ESM** and **UMD**
+- 📦 Supports **ESM**
 - 🔁 Built-in queue system (one toast displayed at a time)
 - 🎨 Theme system (light, dark, and custom themes)
 - 🧩 Dynamic toast types (`success`, `error`, etc.)
@@ -26,26 +26,7 @@ It supports **ESM and UMD**, **dynamic toast types**, **theme management**, **qu
 
 ### ESM
 ```js
-import juiceToast from "https://cdn.kyrt.my.id/libs/js/juice-toast/1.1.0/juice-toast.esm.min.js";
-```
-
-### UMD (Browser)
-```html
-<link
-  rel="stylesheet"
-  href="https://cdn.kyrt.my.id/libs/css/fontic/2.0.0/juice-toast/style.min.css"
-/>
-<script src="https://cdn.kyrt.my.id/libs/js/juice-toast/1.1.0/juice-toast.umd.min.js"></script>
-
-<script>
-  juiceToast.setup({
-    success: {
-      bg: "#01AA38"
-    }
-  });
-
-  juiceToast.success("Hello world!");
-</script>
+import juiceToast from "https://npdn.kyrt.my.id/npm/juice-toast@1.3.0/dist/juice-toast.esm.js";
 ```
 
 ---
@@ -241,6 +222,9 @@ dark: {
 - Browser-only (DOM required)
 - Root element is automatically created: `#juice-toast-root`
 - Suitable for frameworks, custom runtimes, etc.
+- For JuiceToast ^v1.3.0, You don't need import `style.css` manually.
+- UMD Are deprecated for maintain reason
+- Need Improvment for Handphone user or WebKit user
 
 ---
 

package/dist/juice-toast-ios.d.ts

@@ -0,0 +1,141 @@
+/* JuiceToast v1.3.1 (iOS Enhanced)
+ * (C) 2026 OpenDN Foundation
+ * Type Definitions
+ */
+
+export type ToastType =
+  | "success"
+  | "error"
+  | "warning"
+  | "info"
+  | "loading"
+  | string
+
+export type ToastPosition =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "top-center"
+  | "bottom-center"
+
+export type ToastSize = "sm" | "md" | "lg"
+
+export type AnimationType =
+  | "spin"
+  | "pulse"
+  | "shake"
+  | "bounce"
+  | "wiggle"
+  | "pop"
+  | string
+
+export interface ToastAction {
+  label: string
+  onClick?: (event: MouseEvent) => void
+  closeOnClick?: boolean
+}
+
+export interface ToastOptions {
+  /* content */
+  title?: string
+  message?: string
+
+  /* icon */
+  icon?: string
+  iconPack?: string
+  iconSize?: string | number
+  iconPosition?: "left" | "right" | "top"
+  iconLink?: string
+  iconAnimate?: AnimationType
+
+  /* layout */
+  position?: ToastPosition
+  size?: ToastSize
+  width?: string
+  height?: string
+  compact?: boolean
+
+  /* behavior */
+  duration?: number
+  closable?: boolean
+  progress?: boolean
+  progressColor?: string
+  swipeThreshold?: number
+
+  /* style */
+  theme?: string
+  bg?: string
+  color?: string
+  border?: string
+  glassUI?: boolean | number
+
+  /* animation */
+  animation?: AnimationType
+  enterAnimation?: AnimationType
+
+  /* actions */
+  actions?: ToastAction[]
+
+  /* sound */
+  playSound?: string | null
+
+  /* legacy / alias (still supported internally) */
+  toast?: ToastPosition
+  closeable?: boolean
+  icon_left_top?: string
+  icon_config?: string
+  icon_onClick_url?: string
+  icon_onClick_animate?: AnimationType
+}
+
+export interface JuiceToastConfig {
+  duration?: number
+  maxVisible?: number
+  swipeThreshold?: number
+  glassUI?: number | boolean
+  playSound?: string | null
+  dev?: boolean
+  injectCSS?: boolean
+  css?: string
+
+  /* custom toast type defaults */
+  [type: string]: any
+}
+
+export interface ToastPluginContext {
+  toast: HTMLElement
+  cfg: ToastOptions
+  type: ToastType
+  root: HTMLElement
+}
+
+export type JuiceToastPlugin = (ctx: ToastPluginContext) => void
+
+export interface JuiceToast {
+  /* lifecycle */
+  setup(config?: JuiceToastConfig): void
+  clear(): void
+  destroy(): void
+
+  /* extension */
+  use(plugin: JuiceToastPlugin): void
+  addType(type: ToastType, defaults?: Partial<ToastOptions>): void
+  defineTheme(
+    name: string,
+    theme: {
+      bg?: string
+      color?: string
+      border?: string
+    }
+  ): void
+  setTheme(name: string): void
+
+  /* dynamic toast functions (success, error, custom, dll) */
+  [key: string]: any
+}
+
+declare const juiceToast: JuiceToast
+
+export default juiceToast
+export { juiceToast }