robot-toast 2.1.2 → 2.1.4

package/README.md

@@ -1,6 +1,10 @@
 # 🤖 robot-toast
 
-Lightweight toast notifications with an animated robot companion. 16 tree-shakeable robots, fully draggable, multiple themes, and optional React hook.
+![robot-toast demo](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/toasts.gif)
+
+Lightweight toast notifications with complete control.
+
+robot-toast gives you a canvas, not a prescription — bring your own robot, colors, buttons, and timing. 16 tree-shakeable robots, fully draggable, zero dependencies.
 
 <p align="left">
   <a href="https://robot-toast-client.vercel.app/" style="color:#e53935; font-weight:600; text-decoration:none;">Demo & Playground →</a>
@@ -14,7 +18,37 @@ Lightweight toast notifications with an animated robot companion. 16 tree-shakea
   <img src="https://img.shields.io/bundlephobia/minzip/robot-toast?style=flat-square" />
 </p>
 
-> **[GIF/video of robot in action]** ← [Add robot demo GIF here]
+## 🤖 Built-in Robots
+
+![Built-in Robots](https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/robots.png)
+
+[**See them animated in the playground →**](https://robot-toast-client.vercel.app/features)
+
+## 🎨 Features in Action
+
+<table>
+  <tr>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/ad.png" alt="Light Mode" width="100%">
+    </td>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/darkmode.png" alt="Dark Mode" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/lightmode.png" alt="Light Mode" width="100%">
+    </td>
+    <td align="center" width="50%">
+      <img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/custom.png" alt="Custom Styling" width="100%">
+    </td>
+  </tr>
+  <tr>
+    <td align="center" colspan="2">
+      <img src="https://raw.githubusercontent.com/Pratham2703005/robot-toast/refs/heads/main/public/offiicial-page/questions_and_new_styles.png" alt="Styles & Questions" width="100%">
+    </td>
+  </tr>
+</table>
 
 ## Install
 
@@ -25,38 +59,36 @@ npm install robot-toast
 ## Quick Start
 
 ```ts
-import { toast } from 'robot-toast';
-import { wave } from 'robot-toast/robots';
+import { toast } from "robot-toast";
+import { wave } from "robot-toast/robots";
 
-toast({ message: 'Hello! 🤖', robotVariant: wave });
-toast.success('Operation successful!');
-toast.error('Something went wrong');
+toast({ message: "Hello! 🤖", robotVariant: wave });
+toast.success("Operation successful!");
+toast.error("Something went wrong");
 ```
 
-**Explore all features & interactive demos →** [Full Playground](https://robot-toast-client.vercel.app/features)
-
 ## Features at a Glance
 
-| Robots | Layout | Styling | Behavior |
-|--------|--------|---------|----------|
-| 16 built-in variants | 6 position options | 3 themes | Fully draggable |
-| Tree-shakeable imports | Auto-queuing | Custom inline styles | Typewriter effect |
-| Custom images (SVG/PNG) | Progress bar | Transitions (4 types) | Promise helpers |
-| | | | React hook included |
+| Robots                  | Layout             | Styling               | Behavior              |
+| ----------------------- | ------------------ | --------------------- | --------------------- |
+| 16 built-in variants    | 6 position options | 3 themes              | Fully draggable       |
+| Tree-shakeable imports  | Auto-queuing       | Custom inline styles  | Typewriter effect     |
+| Custom images (SVG/PNG) | Progress bar       | Transitions (4 types) | Promise helpers       |
+| Custom image paths      | Multi-toast queue  | CSS overrides         | React hook included   |
 
 ---
 
-## Full API Reference
+## Usage
 
 ### Basic Usage
 
 ```ts
-import { toast } from 'robot-toast';
-import { wave, success, error } from 'robot-toast/robots';
+import { toast } from "robot-toast";
+import { wave, success, error } from "robot-toast/robots";
 
-toast('Simple notification');
-toast({ message: 'With options', type: 'success', robotVariant: wave });
-toast.success('Shorthand');
+toast("Simple notification");
+toast({ message: "With options", type: "success", robotVariant: wave });
+toast.success("Shorthand");
 ```
 
 ### All Options
@@ -65,19 +97,19 @@ toast.success('Shorthand');
 toast({
   // Content
   message: 'Notification text',
-  
+
   // Appearance
   type: 'default' | 'info' | 'success' | 'warning' | 'error',
   theme: 'light' | 'dark' | 'colored',
   transition: 'bounce' | 'flip' | 'zoom' | 'slide',
-  position: 'top-left' | 'top-center' | 'top-right' | 
+  position: 'top-left' | 'top-center' | 'top-right' |
             'bottom-left' | 'bottom-center' | 'bottom-right',
-  
+
   // Robot & Styling
   robotVariant: wave | base | success | error | '...' | 'default' | '/path.svg',
   nearScreen: true,
   style: { background: '...', color: '...' },
-  
+
   // Timing & Behavior
   autoClose: 5000 | false,
   typeSpeed: 30,
@@ -86,11 +118,11 @@ toast({
   pauseOnHover: true,
   pauseOnFocusLoss: true,
   rtl: false,
-  
+
   // Multi-toast
   limit: 0,
   newestOnTop: false,
-  
+
   // Buttons & Callbacks
   buttons: [{ label: 'Undo', onClick: () => {...} }],
   onOpen: () => {...},
@@ -98,34 +130,16 @@ toast({
 });
 ```
 
-### Built-in Robots
-
-Import any of the 16 built-in robots from `robot-toast/robots`:
-
-```ts
-import {
-  wave, base, base2, success, error,
-  angry, angry2, shock, think, search,
-  loading, sleep, headPalm, typing,
-  validation, validation2,
-} from 'robot-toast/robots';
-
-// Or import directly for guaranteed tree-shaking:
-import { wave } from 'robot-toast/robots/wave';
-```
-
-Custom images are supported: pass any SVG/PNG/JPG/GIF/WebP path to `robotVariant`.
-
 ### Inline Buttons
 
 Add undo/confirm/cancel style buttons to toasts:
 
 ```ts
 toast({
-  message: 'File deleted',
+  message: "File deleted",
   buttons: [
-    { label: 'Undo', onClick: () => restoreFile() },
-    { label: 'Keep', onClick: () => {}, style: { color: 'gray' } },
+    { label: "Undo", onClick: () => restoreFile() },
+    { label: "Keep", onClick: () => {}, style: { color: "gray" } },
   ],
 });
 ```
@@ -135,33 +149,81 @@ toast({
 Attach loading/success/error messages to any promise:
 
 ```ts
-toast.promise(fetch('/api/save').then(r => r.json()), {
-  loading: 'Saving…',
-  success: (data) => `Saved as ${data.name}`,
-  error: (err) => `Failed: ${err.message}`,
-});
+toast.promise(
+  fetch("/api/save").then((r) => r.json()),
+  {
+    loading: "Saving…",
+    success: (data) => `Saved as ${data.name}`,
+    error: (err) => `Failed: ${err.message}`,
+  },
+);
 ```
 
 ### React Bindings
 
 ```tsx
-import { useRobotToast, useToastOnMount } from 'robot-toast/react';
+import { useRobotToast, useToastOnMount } from "robot-toast/react";
 
 function App() {
   const toast = useRobotToast();
-  return <button onClick={() => toast.success('Saved!')}>Save</button>;
+  return <button onClick={() => toast.success("Saved!")}>Save</button>;
 }
 
 function InitBanner() {
-  useToastOnMount({ message: 'Welcome!', autoClose: false });
+  useToastOnMount({ message: "Welcome!", autoClose: false });
   return null;
 }
 ```
 
+### Complete Example
+
+Combine robots, buttons, theming, and promises in one powerful toast:
+
+```tsx
+import { useRobotToast } from "robot-toast/react";
+import { success, error, loading } from "robot-toast/robots";
+
+function CompleteExample() {
+  const toast = useRobotToast();
+
+  const handleUpload = () => {
+    toast.promise(
+      fetch("/api/upload").then((r) => r.json()),
+      {
+        loading: {
+          message: "Uploading your file...",
+          robotVariant: loading,
+          theme: "dark",
+        },
+        success: {
+          message: "File uploaded! Ready to go? 🎉",
+          robotVariant: success,
+          theme: "colored",
+          style: { background: "#10b981", color: "white" },
+          buttons: [
+            { label: "View", onClick: () => window.open("/files") },
+            { label: "Done", onClick: () => {} },
+          ],
+        },
+        error: {
+          message: "Upload failed. Try again?",
+          robotVariant: error,
+          theme: "dark",
+          style: { background: "#ef4444" },
+          buttons: [{ label: "Retry", onClick: handleUpload }],
+        },
+      },
+    );
+  };
+
+  return <button onClick={handleUpload}>Upload File</button>;
+}
+```
+
 ### Programmatic Control
 
 ```ts
-const id = toast('Working…');
+const id = toast("Working…");
 toast.closeById(id);
 toast.closeAll();
 ```
@@ -169,14 +231,14 @@ toast.closeAll();
 ### Themes & Custom Styles
 
 ```ts
-toast({ message: 'Light', theme: 'light' });
-toast({ message: 'Dark', theme: 'dark' });
-toast({ 
-  message: 'Custom gradient',
+toast({ message: "Light", theme: "light" });
+toast({ message: "Dark", theme: "dark" });
+toast({
+  message: "Custom gradient",
   style: {
-    background: 'linear-gradient(135deg, #667eea, #764ba2)',
-    color: '#fff',
-    borderRadius: '16px',
+    background: "linear-gradient(135deg, #667eea, #764ba2)",
+    color: "#fff",
+    borderRadius: "16px",
   },
 });
 ```
@@ -187,25 +249,3 @@ toast({
 - Other types: `role="status"` + `aria-live="polite"`
 - `aria-atomic="true"` ensures full message re-announcement
 - Labeled close button for screen readers
-
-### Framework Examples
-
-**React / Next.js**
-```tsx
-'use client';
-import { useRobotToast } from 'robot-toast/react';
-import { wave } from 'robot-toast/robots';
-
-export default function App() {
-  const toast = useRobotToast();
-  
-  return (
-    <button onClick={() => toast.success({ 
-      message: 'Deployed!', 
-      robotVariant: wave 
-    })}>
-      Deploy
-    </button>
-  );
-}
-```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robot-toast",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "A lightweight, framework-agnostic toast notification library with an animated robot character. Tree-shakeable robots, draggable with swipe-to-dismiss, toast.promise(), and an optional React hook.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",