clipxjs 1.0.0-beta.0-0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024  [Mr Akshay Shinde](https://github.com/MrAkshayAS)
+
+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,293 @@
+![License](https://img.shields.io/badge/License-MIT-ff932e)
+![Release](https://img.shields.io/github/v/release/MrAkshayAS/clipxjs?color=ff7a5e)
+
+# ClipX.js -Maximize Clipboard Power with Minimal Size
+
+
+ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward `copy, cut, and paste` capabilities,  and `built-in toast notifications` that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.
+
+---
+## Official Website
+
+For more information about this project, please visit our official website: [ClipX](https://clipx.dzr.app/)
+
+---
+## Table of Contents 📑
+
+1. [Why Choose ClipX.js?](#why-choose-clipxjs)
+   - [Lightweight & Fast](#lightweight--fast)
+   - [Built-in Feedback](#built-in-feedback)
+   - [Flexible Customization](#flexible-customization)
+   - [Easy Integration](#easy-integration)
+   - [Robust Error Handling](#robust-error-handling)
+2. [Installation](#installation)
+   - [Via NPM](#via-npm)
+   - [Via CDN](#via-cdn)
+3. [Initializing ClipX.js](#initializing-clipxjs)
+   - [Basic Initialization](#basic-initialization)
+   - [Configuration Options](#configuration-options)
+4. [Attaching ClipX Functionality](#attaching-clipx-functionality)
+   - [Example: Using Data Attributes](#example-using-data-attributes)
+   - [Example: Using Class Names](#example-using-class-names)
+5. [Attributes Overview](#attributes-overview)
+   - [`data-clipx-target`](#data-clipx-target)
+   - [`data-clipx-text`](#data-clipx-text)
+   - [`data-clipx-cut`](#data-clipx-cut)
+   - [`data-clipx-msg`](#data-clipx-msg)
+   - [`data-clipx-toast`](#data-clipx-toast)
+   - [`data-clipx-disable-msg`](#data-clipx-disable-msg)
+   - [`data-clipx-disable-toast`](#data-clipx-disable-toast)
+   - [`data-clipx-toast-position`](#data-clipx-toast-position)
+   - [`data-clipx-duration`](#data-clipx-duration)
+6. [Example](#example)
+7. [Demo](#demo--get-start-code)
+
+---
+## Why Choose ClipX.js?
+
+### Lightweight & Fast
+- At only 2KB, ClipX.js is smaller and faster than most clipboard libraries.
+### Built-in Feedback
+- Includes customizable toast notifications for clipboard actions—no need for additional UI libraries.
+### Flexible Customization
+- Easily style toasts, control message display, and integrate seamlessly with your app's design.
+### Easy Integration
+- Simple API with minimal setup, ensuring broad compatibility across modern and older browsers.
+### Robust Error Handling
+- Provides clear, customizable error feedback to enhance user experience and simplify debugging.
+  
+---
+
+## Installation
+
+### Via NPM
+
+```bash
+npm i clipxjs
+```
+### Via CDN 
+
+Use only one `CDN`
+
+**jsdelivr**
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
+```
+
+**OR**
+
+**unpkg**
+
+```html
+<script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>
+```
+---
+## Initializing ClipX.js
+
+To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:
+
+## Basic Initialization
+
+```javascript
+/* Initialize ClipX.js instance */
+var clipx = new clipx();
+```
+
+## Configuration Options
+
+### 1. Disable Text Content Change Globally
+
+To prevent the text content of elements from changing globally, set the `msg` property to `true`. Otherwise, set it to `false` to enable text content change.
+
+```javascript
+clipx.disable.msg = false; // Set to true to disable text content change globally
+```
+
+### 2. Disable Toast Notifications Globally
+
+To prevent toast notifications from showing globally, set the `toast` property to `true`. Otherwise, set it to `false` to enable toast notifications.
+
+```javascript
+clipx.disable.toast = false; // Set to true to disable toast notifications globally
+```
+
+### 3. Set Custom Styles for Toast Notifications
+
+Customize the appearance of toast notifications by providing CSS styles. For example, the following configuration sets a dark background with white text, padding, and rounded corners.
+
+```javascript
+clipx.setCustomStyles({
+    toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
+});
+```
+
+## Attaching ClipX Functionality
+
+To bind ClipX.js functionality to elements, use the `attach` method with appropriate selectors. This method will enable clipboard operations on elements with the specified attributes or classes.
+
+### Example: Using Data Attributes
+
+Apply ClipX.js to elements with `data-clipx-text` or `data-clipx-target` attributes.
+
+```javascript
+clipx.attach('[data-clipx-text], [data-clipx-target]');
+```
+
+### Example: Using Class Names
+
+Alternatively, apply ClipX.js to elements with specific classes.
+
+```javascript
+clipx.attach('.clipx, .copy-btn, .your-class');
+```
+
+
+---
+## Attributes Overview
+
+### This All Are Attributes
+- **`data-clipx-target`**: Element selector for text source.
+- **`data-clipx-text`**: Static text to copy or cut.
+- **`data-clipx-cut`**: Toggle cut operation.
+- **`data-clipx-msg`**: Custom success message.
+- **`data-clipx-toast`**: Show only toast, no text change.
+- **`data-clipx-disable-msg`**: Disable element text change.
+- **`data-clipx-disable-toast`**: Disable toast notification.
+- **`data-clipx-toast-position`**: Position of the toast (top/bottom).
+- **`data-clipx-duration`**: Duration of toast visibility.
+
+---
+
+
+## Example 
+
+### `data-clipx-target`
+
+**Description:** Specifies the target element whose text will be copied to the clipboard when the button is clicked.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
+<p id="text-to-copy">This is the text to be copied.</p>
+```
+
+### `data-clipx-text`
+
+**Description:** Defines a static text string that will be copied to the clipboard when the button is clicked.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Static text to copy">Copy Static Text</button>
+```
+
+### `data-clipx-cut`
+
+**Description:** Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.
+
+**Example:**
+```html
+<textarea id="text-to-cut">This text will be cut.</textarea>
+<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>Cut Text</button>
+```
+
+### `data-clipx-msg`
+
+**Description:** Copies the specified text to the clipboard and shows a toast notification with a custom message.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Another static text" data-clipx-msg="Text copied successfully!">Copy with Custom Message</button>
+```
+
+### `data-clipx-toast`
+
+**Description:** Displays a toast notification with the copied text. The button text remains unchanged.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>Copy with Toast Only</button>
+```
+
+### `data-clipx-disable-msg`
+
+**Description:** Shows a toast notification without changing the button's text content.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>Copy with Toast Only, No Text Change</button>
+```
+
+###  `USE data-clipx-disable-toast & data-clipx-disable-msg`
+
+**Description:** Copies the specified text to the clipboard without showing a toast notification And Changing Text Contents.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast data-clipx-disable-msg>Copy without Toast & with Change Text</button>
+```
+
+### `data-clipx-disable-toast`
+
+**Description:** Copies the specified text to the clipboard without showing a toast notification.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast>Copy without Toast</button>
+```
+
+### `data-clipx-toast-position`
+
+**Description:** Defines the position of the toast notification (top or bottom).
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-toast-position="top">Copy with Toast on Top</button>
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-toast-position="bottom">Copy with Toast on Bottom</button>
+```
+
+### `data-clipx-duration`
+
+**Description:** Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.
+
+**Example:**
+```html
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast data-clipx-duration="3000">Copy with 3 Seconds Toast</button>
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-duration="3000">Copy with 3 Seconds Toast & Content Change</button>
+<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-toast data-clipx-duration="3000">Copy 3 sec Content Change</button>
+```
+---
+
+## Demo || Get Start Code
+
+```html
+
+<h1>ClipX.js Demo</h1>
+
+<button class="copy-btn" data-clipx-text="Static text to copy" data-clipx-msg="Static text copied!">Copy Static Text</button>
+
+<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>Cut Text</button>
+<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
+
+<p id="text-to-copy">This text will be cut and copied to the clipboard.</p>
+
+<button class="copy-btn" data-clipx-text="Another static text" data-clipx-toast data-clipx-toast-position="bottom">Copy with Toast Only</button>
+
+<button class="copy-btn" data-clipx-text="Text with 5 seconds toast" data-clipx-toast data-clipx-duration="5000">Copy with 5 Seconds Toast</button>
+
+
+<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
+<script>
+    // Initialize ClipX.js instance
+    var clipx = new clipx();
+
+    // Optional: Set custom styles for toast notifications
+    clipx.setCustomStyles({
+        toast: "background-color: #333; color: #fff; padding: 12px; border-radius: 5px;"
+    });
+
+    // Attach ClipX.js functionality to elements
+    clipx.attach('[data-clipx-text], [data-clipx-target]');
+</script>
+
+```

package/dist/clipx.min.js

@@ -0,0 +1 @@
+(function(t){function e(){this.attach=this.attach.bind(this),this.isProcessing=!1,this.disable={msg:!1,toast:!1},this.customStyles={}}e.prototype.copyText=function(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);if(navigator.permissions)return navigator.permissions.query({name:"clipboard-write"}).then(function(e){if("granted"===e.state||"prompt"===e.state)return navigator.clipboard.writeText(t);throw new Error("Clipboard write permission denied.")});var e=document.createElement("textarea");return e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),Promise.resolve()},e.prototype.cutText=function(t,e){return this.copyText(t).then(function(){e&&(e.value="",e.textContent="")})},e.prototype.copyFromElement=function(t){var e=t.value||t.textContent;return this.copyText(e)},e.prototype.cutFromElement=function(t){var e=t.value||t.textContent;return this.cutText(e,t)},e.prototype.attach=function(t){var e=document.querySelectorAll(t);e.forEach(function(t){t.addEventListener("click",function(){if(!this.isProcessing){this.isProcessing=!0;var e,o=t.getAttribute("data-clipx-target"),i=t.getAttribute("data-clipx-text"),a=t.hasAttribute("data-clipx-cut"),s=t.getAttribute("data-clipx-msg"),r=t.hasAttribute("data-clipx-toast"),n=t.hasAttribute("data-clipx-disable-msg"),c=t.hasAttribute("data-clipx-disable-toast"),l=t.getAttribute("data-clipx-toast-position")||"bottom",p=parseInt(t.getAttribute("data-clipx-duration"),10)||1500;if(o){var u=document.querySelector(o);u&&(e=a?this.cutFromElement(u):this.copyFromElement(u))}else i&&(e=a?this.cutText(i):this.copyText(i));e&&e.then(()=>this.onSuccess(t,s,r,n,c,l,p)).catch(e=>this.onError(t,e)).finally(()=>{this.isProcessing=!1})}}.bind(this))}.bind(this))},e.prototype.onSuccess=function(t,e,o,i,a,s,r){var n=t.textContent,c=e||"Copied !",l="top"===s?"clipx-toast top":"clipx-toast bottom";if(o||i||this.disable.msg||(t.textContent=c),a||this.disable.toast)setTimeout(function(){this.disable.msg||(t.textContent=n)}.bind(this),r);else{var p=document.createElement("div");p.className=l,p.textContent=c,p.setAttribute("role","alert"),p.setAttribute("aria-live","assertive"),p.style.cssText=this.customStyles.toast||"",document.body.appendChild(p),p.style.opacity=0,setTimeout(()=>p.style.opacity=1,0),setTimeout(function(){p.style.opacity=0,setTimeout(()=>document.body.removeChild(p),500),o||i||this.disable.msg||(t.textContent=n)}.bind(this),r)}},e.prototype.onError=function(t,e){console.error("Failed to cut/copy text: ",e);var o=document.createElement("div");o.className="clipx-toast error",o.textContent="Failed to copy!",o.setAttribute("role","alert"),o.setAttribute("aria-live","assertive"),o.style.cssText=this.customStyles.toast||"",document.body.appendChild(o),setTimeout(()=>{o.style.opacity=0,setTimeout(()=>document.body.removeChild(o),500)},1500)},e.prototype.setCustomStyles=function(t){this.customStyles=t},t.clipx=e;var o=document.createElement("style");o.textContent=" .clipx-toast{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;position:fixed;left:50%;transform:translateX(-50%);background-color:#fff;color:#363636;padding:8px 10px;border-radius:8px;z-index:9999;box-shadow:0 3px 10px rgb(0 0 0 / .1),0 3px 3px rgb(0 0 0 / .05);font-size:14px;text-align:center;opacity:0;animation:fadeIn 0.5s ease forwards;transition:opacity 0.5s ease;max-width:90%;width:auto}.clipx-toast.top{top:20px;bottom:auto}.clipx-toast.bottom{bottom:20px}.clipx-toast.error{background-color:#f8d7da;color:#721c24}@keyframes fadeIn{from{opacity:0;transform:translateY(10px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0) translateX(-50%)}to{opacity:0;transform:translateY(10px) translateX(-50%)}}",document.head.appendChild(o)})(this);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "clipxjs",
+  "version": "1.0.0-beta.0-0",
+  "description": "ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward copy, cut, and paste capabilities, and built-in toast notifications that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.",
+  "main": "src/clipx.js",
+  "scripts": {
+    "build": "webpack --config bundler/webpack.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MrAkshayAS/clipxjs.git"
+  },
+  "keywords": ["clipboard","copy","cut","paste","toast","notifications","clipx","clipxjs","lightweight","UI","customizable","performance","cross-browser","front-end"
+],
+  "author": "@mrakshayas",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/MrAkshayAS/clipxjs/issues"
+  },
+  "homepage": "https://github.com/MrAkshayAS/clipxjs#readme"
+}

package/src/clipx.js

@@ -0,0 +1,268 @@
+(function (global) {
+  // Constructor for the clipx object
+  function clipx() {
+    this.attach = this.attach.bind(this); // Bind the attach method to the instance
+    this.isProcessing = false; // Flag to prevent multiple executions
+    // Global flags to disable specific features
+    this.disable = {
+      msg: false,
+      toast: false,
+    };
+    this.customStyles = {}; // Store custom styles for the toast notifications
+  }
+
+  // Method to copy text to clipboard
+  clipx.prototype.copyText = function (text) {
+    if (navigator.clipboard) {
+      // Use the Clipboard API if available
+      return navigator.clipboard.writeText(text);
+    } else if (navigator.permissions) {
+      // Check permissions if Clipboard API is not available
+      return navigator.permissions
+        .query({ name: "clipboard-write" })
+        .then(function (permissionStatus) {
+          if (
+            permissionStatus.state === "granted" ||
+            permissionStatus.state === "prompt"
+          ) {
+            return navigator.clipboard.writeText(text);
+          } else {
+            throw new Error("Clipboard write permission denied.");
+          }
+        });
+    } else {
+      // Fallback to using a temporary textarea element for older browsers
+      var textArea = document.createElement("textarea");
+      textArea.value = text;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textArea);
+      return Promise.resolve();
+    }
+  };
+
+  // Method to cut (copy and then clear) text from an element
+  clipx.prototype.cutText = function (text, element) {
+    return this.copyText(text).then(function () {
+      if (element) {
+        element.value = ""; // Clear value for input elements
+        element.textContent = ""; // Clear text content for non-input elements
+      }
+    });
+  };
+
+  // Method to copy text from an element
+  clipx.prototype.copyFromElement = function (element) {
+    var text = element.value || element.textContent; // Get text from input or non-input element
+    return this.copyText(text);
+  };
+
+  // Method to cut (copy and then clear) text from an element
+  clipx.prototype.cutFromElement = function (element) {
+    var text = element.value || element.textContent; // Get text from input or non-input element
+    return this.cutText(text, element);
+  };
+
+  // Method to attach event listeners to elements matching the selector
+  clipx.prototype.attach = function (selector) {
+    var elements = document.querySelectorAll(selector);
+    elements.forEach(
+      function (element) {
+        element.addEventListener(
+          "click",
+          function () {
+            if (this.isProcessing) return; // Prevent multiple executions
+            this.isProcessing = true;
+
+            var targetSelector = element.getAttribute("data-clipx-target");
+            var text = element.getAttribute("data-clipx-text");
+            var cut = element.hasAttribute("data-clipx-cut");
+            var msgType = element.getAttribute("data-clipx-msg");
+            var toastOnly = element.hasAttribute("data-clipx-toast");
+            var disableMsg = element.hasAttribute("data-clipx-disable-msg");
+            var disableToast = element.hasAttribute("data-clipx-disable-toast");
+            var toastPosition =
+              element.getAttribute("data-clipx-toast-position") || "bottom";
+            var contentDuration =
+              parseInt(element.getAttribute("data-clipx-duration"), 10) || 1500;
+
+            var actionPromise;
+
+            // Determine the action based on attributes
+            if (targetSelector) {
+              var targetElement = document.querySelector(targetSelector);
+              if (targetElement) {
+                actionPromise = cut
+                  ? this.cutFromElement(targetElement)
+                  : this.copyFromElement(targetElement);
+              }
+            } else if (text) {
+              actionPromise = cut ? this.cutText(text) : this.copyText(text);
+            }
+
+            if (actionPromise) {
+              actionPromise
+                .then(() =>
+                  this.onSuccess(
+                    element,
+                    msgType,
+                    toastOnly,
+                    disableMsg,
+                    disableToast,
+                    toastPosition,
+                    contentDuration
+                  )
+                )
+                .catch((err) => this.onError(element, err))
+                .finally(() => {
+                  this.isProcessing = false;
+                });
+            }
+          }.bind(this)
+        );
+      }.bind(this)
+    );
+  };
+
+  // Handle successful copy/cut operation
+  clipx.prototype.onSuccess = function (
+    element,
+    msgType,
+    toastOnly,
+    disableMsg,
+    disableToast,
+    toastPosition,
+    contentDuration
+  ) {
+    var originalText = element.textContent; // Store original text content
+    var customMessage = msgType || "Copied !"; // Use provided message or default to "Copied!"
+    var toastClass =
+      toastPosition === "top" ? "clipx-toast top" : "clipx-toast bottom";
+
+    if (!toastOnly && !disableMsg && !this.disable.msg) {
+      element.textContent = customMessage; // Update element's text content
+    }
+
+    if (!disableToast && !this.disable.toast) {
+      var toast = document.createElement("div");
+      toast.className = toastClass;
+      toast.textContent = customMessage;
+      toast.setAttribute("role", "alert");
+      toast.setAttribute("aria-live", "assertive");
+      toast.style.cssText = this.customStyles.toast || ""; // Apply custom styles if any
+
+      document.body.appendChild(toast);
+
+      // Fade-in and fade-out animation
+      toast.style.opacity = 0;
+      setTimeout(() => (toast.style.opacity = 1), 0);
+
+      setTimeout(
+        function () {
+          toast.style.opacity = 0;
+          setTimeout(() => document.body.removeChild(toast), 500);
+
+          if (!toastOnly && !disableMsg && !this.disable.msg) {
+            element.textContent = originalText; // Restore original text content
+          }
+        }.bind(this),
+        contentDuration
+      );
+    } else {
+      setTimeout(
+        function () {
+          if (!this.disable.msg) {
+            element.textContent = originalText; // Restore original text content
+          }
+        }.bind(this),
+        contentDuration
+      );
+    }
+  };
+
+  // Handle errors during copy/cut operation
+  clipx.prototype.onError = function (element, err) {
+    console.error("Failed to cut/copy text: ", err);
+    var toast = document.createElement("div");
+    toast.className = "clipx-toast error";
+    toast.textContent = "Failed to copy!";
+    toast.setAttribute("role", "alert");
+    toast.setAttribute("aria-live", "assertive");
+    toast.style.cssText = this.customStyles.toast || "";
+
+    document.body.appendChild(toast);
+    setTimeout(() => {
+      toast.style.opacity = 0;
+      setTimeout(() => document.body.removeChild(toast), 500);
+    }, 1500);
+  };
+
+  // Method to set custom styles for toast notifications
+  clipx.prototype.setCustomStyles = function (styles) {
+    this.customStyles = styles;
+  };
+
+  // Expose the clipx constructor to the global object
+  global.clipx = clipx;
+
+  // Add default styles for toast notifications
+  var style = document.createElement("style");
+  style.textContent = `
+        .clipx-toast {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #fff;
+    color: #363636;
+    padding: 8px 10px;
+    border-radius: 8px;
+    z-index: 9999;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
+    font-size: 14px;
+    text-align: center;
+    opacity: 0;
+    animation: fadeIn 0.5s ease forwards;
+    transition: opacity 0.5s ease;
+    max-width: 90%; /* Ensure it fits well on smaller screens */
+    width: auto; /* Ensure the width adjusts based on content */
+}
+
+.clipx-toast.top {
+    top: 20px;
+    bottom: auto;
+}
+
+.clipx-toast.bottom {
+    bottom: 20px;
+}
+
+.clipx-toast.error {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px) translateX(-50%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) translateX(-50%);
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+        transform: translateY(0) translateX(-50%);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(10px) translateX(-50%);
+    }
+}`;
+  document.head.appendChild(style);
+})(this);