@edgar208/sileo-vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Edgar II, Ramos O.
+
+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,106 @@
+# Sileo-Vue 🍞
+
+A premium, production-ready Vue 3 toast notification library inspired by Sileo. Featuring glassmorphism, smooth animations, and a modern iOS-like aesthetic.
+
+## Features
+
+- 🍦 **Vue 3 Support**: Built with the Composition API.
+- ✨ **Premium Design**: Modern glassmorphism (blur + transparency) and detached pill headers.
+- 🎬 **Smooth Animations**: Tailored entrance and exit transitions.
+- 🖐️ **Swipe to Dismiss**: Natural gestures for both mouse and touch.
+- 📦 **NPM Ready**: Bundled with Vite library mode, includes TypeScript types.
+- 🌓 **Dark Mode**: Optimized for dark UI by default.
+- 🛠️ **Configurable**: Global and per-toast options.
+
+## Installation
+
+```bash
+npm install sileo-vue
+# or
+yarn add sileo-vue
+```
+
+## Setup
+
+### 1. Register the Plugin
+
+```typescript
+import { createApp } from 'vue';
+import { SileoPlugin } from 'sileo-vue';
+import 'sileo-vue/style.css'; // Don't forget the styles!
+
+const app = createApp(App);
+
+app.use(SileoPlugin, {
+  position: 'top-right',
+  duration: 4000
+});
+
+app.mount('#app');
+```
+
+## Usage
+
+### Using the Composable
+
+```vue
+<script setup>
+import { useToast } from 'sileo-vue';
+
+const { toast } = useToast();
+
+const showToast = () => {
+  toast.success('Settings saved successfully!');
+};
+</script>
+
+<template>
+  <button @click="showToast">Show Toast</button>
+</template>
+```
+
+### API Options
+
+```typescript
+toast({
+  title: 'Notification',
+  message: 'This is a message',
+  type: 'info', // 'success' | 'error' | 'warning' | 'info' | 'default'
+  duration: 5000,
+  position: 'top-center',
+  showProgress: true,
+  swipeToDismiss: true
+});
+
+// Shorthands
+toast.success('Success message');
+toast.error('Error message');
+toast.warning('Warning message');
+toast.info('Info message');
+```
+
+## Advanced Customization
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | `undefined` | Optional title shown in the detached pill header. |
+| `message` | `string` | `required` | The main content of the toast. |
+| `type` | `string` | `'default'` | Toast variation: `success`, `error`, `warning`, `info`. |
+| `duration` | `number` | `4000` | Auto-dismiss delay in ms. Set to `0` to persist. |
+| `position` | `string` | `'top-right'` | Corner placement. |
+| `showProgress` | `boolean` | `true` | Show/hide the animated progress bar. |
+| `swipeToDismiss`| `boolean` | `true` | Enable swipe gestures to clear toasts. |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+```
+
+## License
+
+MIT

package/dist/components/Toast.vue.d.ts

@@ -0,0 +1,11 @@
+import type { Toast } from '../types';
+type __VLS_Props = {
+    toast: Toast;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ToastContainer.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/composables/useToast.d.ts

@@ -0,0 +1,33 @@
+import type { Toast, ToastOptions, GlobalConfig } from '../types';
+export declare function useToast(): {
+    toasts: import("vue").Reactive<Toast[]>;
+    toast: ((options: ToastOptions | string) => string) & {
+        success: (msg: string | ToastOptions) => string;
+        error: (msg: string | ToastOptions) => string;
+        warning: (msg: string | ToastOptions) => string;
+        info: (msg: string | ToastOptions) => string;
+        clear: () => 0;
+        config: (newConfig: GlobalConfig) => {
+            position?: import("../types").ToastPosition | undefined;
+            duration?: number | undefined;
+            maxToasts?: number | undefined;
+        } & GlobalConfig;
+    };
+    removeToast: (id: string) => void;
+};
+export declare const toastManager: {
+    toasts: import("vue").Reactive<Toast[]>;
+    toast: ((options: ToastOptions | string) => string) & {
+        success: (msg: string | ToastOptions) => string;
+        error: (msg: string | ToastOptions) => string;
+        warning: (msg: string | ToastOptions) => string;
+        info: (msg: string | ToastOptions) => string;
+        clear: () => 0;
+        config: (newConfig: GlobalConfig) => {
+            position?: import("../types").ToastPosition | undefined;
+            duration?: number | undefined;
+            maxToasts?: number | undefined;
+        } & GlobalConfig;
+    };
+    removeToast: (id: string) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './composables/useToast';
+export { SileoPlugin } from './plugin';
+export { default as Toast } from './components/Toast.vue';
+export { default as ToastContainer } from './components/ToastContainer.vue';

package/dist/plugin/index.d.ts

@@ -0,0 +1,5 @@
+import { type App } from 'vue';
+import type { GlobalConfig } from '../types';
+export declare const SileoPlugin: {
+    install(app: App, options?: GlobalConfig): void;
+};

package/dist/sileo-vue.js

@@ -0,0 +1,203 @@
+import { reactive as M, markRaw as I, defineComponent as $, ref as h, computed as T, onUnmounted as S, openBlock as n, createElementBlock as a, normalizeStyle as E, normalizeClass as B, createElementVNode as l, createBlock as D, resolveDynamicComponent as z, toDisplayString as y, createCommentVNode as k, withModifiers as P, Fragment as b, renderList as x, createVNode as A, TransitionGroup as j, withCtx as N, unref as R, createApp as V, h as F } from "vue";
+const m = M([]), w = M({
+  position: "top-right",
+  duration: 4e3,
+  maxToasts: 5
+}), G = () => Math.random().toString(36).substring(2, 9);
+function O() {
+  const e = (t) => {
+    const u = {
+      type: "default",
+      duration: w.duration || 4e3,
+      position: w.position || "top-right",
+      showProgress: !0,
+      closeOnClick: !0,
+      swipeToDismiss: !0
+    }, i = typeof t == "string" ? { message: t } : t;
+    m.length >= (w.maxToasts || 5) && m.shift();
+    const v = G(), o = {
+      ...u,
+      ...i,
+      id: v,
+      createdAt: Date.now()
+    };
+    return o.icon && typeof o.icon != "string" && (o.icon = I(o.icon)), m.push(o), o.duration > 0 && setTimeout(() => {
+      d(v);
+    }, o.duration), v;
+  }, d = (t) => {
+    const u = m.findIndex((i) => i.id === t);
+    u !== -1 && m.splice(u, 1);
+  }, r = Object.assign(e, {
+    success: (t) => e(typeof t == "string" ? { message: t, type: "success" } : { ...t, type: "success" }),
+    error: (t) => e(typeof t == "string" ? { message: t, type: "error" } : { ...t, type: "error" }),
+    warning: (t) => e(typeof t == "string" ? { message: t, type: "warning" } : { ...t, type: "warning" }),
+    info: (t) => e(typeof t == "string" ? { message: t, type: "info" } : { ...t, type: "info" }),
+    clear: () => m.length = 0,
+    config: (t) => Object.assign(w, t)
+  });
+  return {
+    toasts: m,
+    toast: r,
+    removeToast: d
+  };
+}
+const _ = O(), U = { class: "sileo-toast__header" }, q = { class: "sileo-toast__icon" }, H = { key: 1 }, J = {
+  key: 2,
+  class: "sileo-toast__default-icon"
+}, K = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5"
+}, Q = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5"
+}, W = {
+  key: 2,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5"
+}, Y = {
+  key: 3,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2.5"
+}, Z = {
+  key: 0,
+  class: "sileo-toast__title"
+}, tt = { class: "sileo-toast__body" }, et = { class: "sileo-toast__message" }, ot = {
+  key: 0,
+  class: "sileo-toast__progress"
+}, st = /* @__PURE__ */ $({
+  __name: "Toast",
+  props: {
+    toast: {}
+  },
+  emits: ["close"],
+  setup(e, { emit: d }) {
+    const r = e, t = d, u = h(null), i = h(!1), v = h(0), o = h(0), p = T(() => r.toast.icon), C = T(() => {
+      const c = `translateX(${o.value}px) scale(${i.value ? 0.98 : 1})`, s = Math.max(0, 1 - Math.abs(o.value) / 200);
+      return {
+        transform: c,
+        opacity: s,
+        transition: i.value ? "none" : "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+      };
+    }), L = (c) => {
+      r.toast.swipeToDismiss && (i.value = !0, v.value = "touches" in c ? c.touches[0].clientX : c.clientX, "touches" in c ? (window.addEventListener("touchmove", f), window.addEventListener("touchend", g)) : (window.addEventListener("mousemove", f), window.addEventListener("mouseup", g)));
+    }, f = (c) => {
+      if (!i.value) return;
+      const s = "touches" in c ? c.touches[0].clientX : c.clientX;
+      o.value = s - v.value;
+    }, g = () => {
+      i.value && (i.value = !1, Math.abs(o.value) > 100 ? t("close") : o.value = 0, window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", g), window.removeEventListener("touchmove", f), window.removeEventListener("touchend", g));
+    };
+    return S(() => {
+      window.removeEventListener("mousemove", f), window.removeEventListener("mouseup", g), window.removeEventListener("touchmove", f), window.removeEventListener("touchend", g);
+    }), (c, s) => (n(), a("div", {
+      ref_key: "toastRef",
+      ref: u,
+      class: B(["sileo-toast", [`sileo-toast--${e.toast.type}`]]),
+      style: E(C.value),
+      onMousedown: L,
+      onTouchstart: L
+    }, [
+      l("div", U, [
+        l("div", q, [
+          typeof e.toast.icon != "string" && e.toast.icon ? (n(), D(z(p.value), { key: 0 })) : typeof e.toast.icon == "string" ? (n(), a("span", H, y(e.toast.icon), 1)) : (n(), a("div", J, [
+            e.toast.type === "success" ? (n(), a("svg", K, [...s[1] || (s[1] = [
+              l("path", { d: "M20 6L9 17L4 12" }, null, -1)
+            ])])) : e.toast.type === "error" ? (n(), a("svg", Q, [...s[2] || (s[2] = [
+              l("path", { d: "M18 6L6 18M6 6l12 12" }, null, -1)
+            ])])) : e.toast.type === "warning" ? (n(), a("svg", W, [...s[3] || (s[3] = [
+              l("path", { d: "M12 9v4m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 17c-.77 1.333.192 3 1.732 3z" }, null, -1)
+            ])])) : (n(), a("svg", Y, [...s[4] || (s[4] = [
+              l("path", { d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, null, -1)
+            ])]))
+          ]))
+        ]),
+        e.toast.title ? (n(), a("span", Z, y(e.toast.title), 1)) : k("", !0),
+        e.toast.closeOnClick ? (n(), a("button", {
+          key: 1,
+          class: "sileo-toast__close",
+          onClick: s[0] || (s[0] = P((ct) => c.$emit("close"), ["stop"]))
+        }, [...s[5] || (s[5] = [
+          l("svg", {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2"
+          }, [
+            l("path", { d: "M18 6L6 18M6 6l12 12" })
+          ], -1)
+        ])])) : k("", !0)
+      ]),
+      l("div", tt, [
+        l("p", et, y(e.toast.message), 1)
+      ]),
+      e.toast.duration > 0 && e.toast.showProgress ? (n(), a("div", ot, [
+        l("div", {
+          class: "sileo-toast__progress-inner",
+          style: E({ animationDuration: `${e.toast.duration}ms` })
+        }, null, 4)
+      ])) : k("", !0)
+    ], 38));
+  }
+}), X = (e, d) => {
+  const r = e.__vccOpts || e;
+  for (const [t, u] of d)
+    r[t] = u;
+  return r;
+}, nt = /* @__PURE__ */ X(st, [["__scopeId", "data-v-fcd6b8c9"]]), it = { class: "sileo-wrapper" }, at = /* @__PURE__ */ $({
+  __name: "ToastContainer",
+  setup(e) {
+    const { toasts: d, removeToast: r } = O(), t = [
+      "top-left",
+      "top-center",
+      "top-right",
+      "bottom-left",
+      "bottom-center",
+      "bottom-right"
+    ], u = (i) => d.filter((v) => v.position === i);
+    return (i, v) => (n(), a("div", it, [
+      (n(), a(b, null, x(t, (o) => l("div", {
+        key: o,
+        class: B(["sileo-container", [`sileo-container--${o}`]])
+      }, [
+        A(j, { name: "sileo-list" }, {
+          default: N(() => [
+            (n(!0), a(b, null, x(u(o), (p) => (n(), D(nt, {
+              key: p.id,
+              toast: p,
+              onClose: (C) => R(r)(p.id)
+            }, null, 8, ["toast", "onClose"]))), 128))
+          ]),
+          _: 2
+        }, 1024)
+      ], 2)), 64))
+    ]));
+  }
+}), rt = /* @__PURE__ */ X(at, [["__scopeId", "data-v-7d7ea511"]]), dt = {
+  install(e, d = {}) {
+    if (Object.keys(d).length > 0 && _.toast.config(d), typeof document < "u") {
+      const r = "sileo-toast-container";
+      let t = document.getElementById(r);
+      t || (t = document.createElement("div"), t.id = r, document.body.appendChild(t), V({
+        render: () => F(rt)
+      }).mount(t));
+    }
+    e.config.globalProperties.$toast = _.toast, e.provide("toast", _.toast);
+  }
+};
+export {
+  dt as SileoPlugin,
+  nt as Toast,
+  rt as ToastContainer,
+  _ as toastManager,
+  O as useToast
+};

package/dist/sileo-vue.umd.cjs

@@ -0,0 +1 @@
+(function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c.SileoVue={},c.Vue))})(this,function(c,t){"use strict";const f=t.reactive([]),y=t.reactive({position:"top-right",duration:4e3,maxToasts:5}),T=()=>Math.random().toString(36).substring(2,9);function u(){const o=e=>{const d={type:"default",duration:y.duration||4e3,position:y.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},i=typeof e=="string"?{message:e}:e;f.length>=(y.maxToasts||5)&&f.shift();const m=T(),n={...d,...i,id:m,createdAt:Date.now()};return n.icon&&typeof n.icon!="string"&&(n.icon=t.markRaw(n.icon)),f.push(n),n.duration>0&&setTimeout(()=>{l(m)},n.duration),m},l=e=>{const d=f.findIndex(i=>i.id===e);d!==-1&&f.splice(d,1)},a=Object.assign(o,{success:e=>o(typeof e=="string"?{message:e,type:"success"}:{...e,type:"success"}),error:e=>o(typeof e=="string"?{message:e,type:"error"}:{...e,type:"error"}),warning:e=>o(typeof e=="string"?{message:e,type:"warning"}:{...e,type:"warning"}),info:e=>o(typeof e=="string"?{message:e,type:"info"}:{...e,type:"info"}),clear:()=>f.length=0,config:e=>Object.assign(y,e)});return{toasts:f,toast:a,removeToast:l}}const h=u(),L={class:"sileo-toast__header"},b={class:"sileo-toast__icon"},V={key:1},M={key:2,class:"sileo-toast__default-icon"},N={key:0,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5"},x={key:1,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5"},S={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5"},D={key:3,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5"},$={key:0,class:"sileo-toast__title"},O={class:"sileo-toast__body"},z={class:"sileo-toast__message"},P={key:0,class:"sileo-toast__progress"},X=t.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(o,{emit:l}){const a=o,e=l,d=t.ref(null),i=t.ref(!1),m=t.ref(0),n=t.ref(0),g=t.computed(()=>a.toast.icon),_=t.computed(()=>{const r=`translateX(${n.value}px) scale(${i.value?.98:1})`,s=Math.max(0,1-Math.abs(n.value)/200);return{transform:r,opacity:s,transition:i.value?"none":"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)"}}),C=r=>{a.toast.swipeToDismiss&&(i.value=!0,m.value="touches"in r?r.touches[0].clientX:r.clientX,"touches"in r?(window.addEventListener("touchmove",p),window.addEventListener("touchend",k)):(window.addEventListener("mousemove",p),window.addEventListener("mouseup",k)))},p=r=>{if(!i.value)return;const s="touches"in r?r.touches[0].clientX:r.clientX;n.value=s-m.value},k=()=>{i.value&&(i.value=!1,Math.abs(n.value)>100?e("close"):n.value=0,window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",k),window.removeEventListener("touchmove",p),window.removeEventListener("touchend",k))};return t.onUnmounted(()=>{window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",k),window.removeEventListener("touchmove",p),window.removeEventListener("touchend",k)}),(r,s)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"toastRef",ref:d,class:t.normalizeClass(["sileo-toast",[`sileo-toast--${o.toast.type}`]]),style:t.normalizeStyle(_.value),onMousedown:C,onTouchstart:C},[t.createElementVNode("div",L,[t.createElementVNode("div",b,[typeof o.toast.icon!="string"&&o.toast.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(g.value),{key:0})):typeof o.toast.icon=="string"?(t.openBlock(),t.createElementBlock("span",V,t.toDisplayString(o.toast.icon),1)):(t.openBlock(),t.createElementBlock("div",M,[o.toast.type==="success"?(t.openBlock(),t.createElementBlock("svg",N,[...s[1]||(s[1]=[t.createElementVNode("path",{d:"M20 6L9 17L4 12"},null,-1)])])):o.toast.type==="error"?(t.openBlock(),t.createElementBlock("svg",x,[...s[2]||(s[2]=[t.createElementVNode("path",{d:"M18 6L6 18M6 6l12 12"},null,-1)])])):o.toast.type==="warning"?(t.openBlock(),t.createElementBlock("svg",S,[...s[3]||(s[3]=[t.createElementVNode("path",{d:"M12 9v4m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 17c-.77 1.333.192 3 1.732 3z"},null,-1)])])):(t.openBlock(),t.createElementBlock("svg",D,[...s[4]||(s[4]=[t.createElementVNode("path",{d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"},null,-1)])]))]))]),o.toast.title?(t.openBlock(),t.createElementBlock("span",$,t.toDisplayString(o.toast.title),1)):t.createCommentVNode("",!0),o.toast.closeOnClick?(t.openBlock(),t.createElementBlock("button",{key:1,class:"sileo-toast__close",onClick:s[0]||(s[0]=t.withModifiers(v=>r.$emit("close"),["stop"]))},[...s[5]||(s[5]=[t.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[t.createElementVNode("path",{d:"M18 6L6 18M6 6l12 12"})],-1)])])):t.createCommentVNode("",!0)]),t.createElementVNode("div",O,[t.createElementVNode("p",z,t.toDisplayString(o.toast.message),1)]),o.toast.duration>0&&o.toast.showProgress?(t.openBlock(),t.createElementBlock("div",P,[t.createElementVNode("div",{class:"sileo-toast__progress-inner",style:t.normalizeStyle({animationDuration:`${o.toast.duration}ms`})},null,4)])):t.createCommentVNode("",!0)],38))}}),w=(o,l)=>{const a=o.__vccOpts||o;for(const[e,d]of l)a[e]=d;return a},E=w(X,[["__scopeId","data-v-fcd6b8c9"]]),I={class:"sileo-wrapper"},B=w(t.defineComponent({__name:"ToastContainer",setup(o){const{toasts:l,removeToast:a}=u(),e=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],d=i=>l.filter(m=>m.position===i);return(i,m)=>(t.openBlock(),t.createElementBlock("div",I,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(e,n=>t.createElementVNode("div",{key:n,class:t.normalizeClass(["sileo-container",[`sileo-container--${n}`]])},[t.createVNode(t.TransitionGroup,{name:"sileo-list"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d(n),g=>(t.openBlock(),t.createBlock(E,{key:g.id,toast:g,onClose:_=>t.unref(a)(g.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],2)),64))]))}}),[["__scopeId","data-v-7d7ea511"]]),j={install(o,l={}){if(Object.keys(l).length>0&&h.toast.config(l),typeof document<"u"){const a="sileo-toast-container";let e=document.getElementById(a);e||(e=document.createElement("div"),e.id=a,document.body.appendChild(e),t.createApp({render:()=>t.h(B)}).mount(e))}o.config.globalProperties.$toast=h.toast,o.provide("toast",h.toast)}};c.SileoPlugin=j,c.Toast=E,c.ToastContainer=B,c.toastManager=h,c.useToast=u,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.sileo-toast[data-v-fcd6b8c9]{position:relative;width:320px;pointer-events:auto;margin-bottom:12px;-webkit-user-select:none;user-select:none;z-index:1000;display:flex;flex-direction:column;gap:8px}.sileo-toast__header[data-v-fcd6b8c9]{display:flex;align-items:center;gap:8px;background:#ffffff1a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 12px;border-radius:100px;width:fit-content;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 15px #0003;color:#fff}.sileo-toast__icon[data-v-fcd6b8c9]{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.sileo-toast__default-icon svg[data-v-fcd6b8c9]{width:100%;height:100%}.sileo-toast__title[data-v-fcd6b8c9]{font-size:13px;font-weight:600;letter-spacing:-.2px}.sileo-toast__close[data-v-fcd6b8c9]{background:none;border:none;cursor:pointer;padding:0;margin-left:4px;color:#ffffff80;display:flex;align-items:center;transition:color .2s}.sileo-toast__close[data-v-fcd6b8c9]:hover{color:#fff}.sileo-toast__close svg[data-v-fcd6b8c9]{width:14px;height:14px}.sileo-toast__body[data-v-fcd6b8c9]{background:#141414b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:16px 20px;border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px #0000004d;overflow:hidden;position:relative}.sileo-toast__message[data-v-fcd6b8c9]{margin:0;font-size:15px;line-height:1.4;color:#ffffffe6;font-weight:400}.sileo-toast--success .sileo-toast__header[data-v-fcd6b8c9]{border-color:#34c7594d;color:#34c759}.sileo-toast--error .sileo-toast__header[data-v-fcd6b8c9]{border-color:#ff3b304d;color:#ff3b30}.sileo-toast--warning .sileo-toast__header[data-v-fcd6b8c9]{border-color:#ff9f0a4d;color:#ff9f0a}.sileo-toast--info .sileo-toast__header[data-v-fcd6b8c9]{border-color:#007aff4d;color:#007aff}.sileo-toast__progress[data-v-fcd6b8c9]{position:absolute;bottom:0;left:0;right:0;height:3px;background:#ffffff0d}.sileo-toast__progress-inner[data-v-fcd6b8c9]{height:100%;background:currentColor;width:0%;animation:sileo-progress-fcd6b8c9 linear forwards}@keyframes sileo-progress-fcd6b8c9{0%{width:100%}to{width:0%}}.sileo-toast--success[data-v-fcd6b8c9]{color:#34c759}.sileo-toast--error[data-v-fcd6b8c9]{color:#ff3b30}.sileo-toast--warning[data-v-fcd6b8c9]{color:#ff9f0a}.sileo-toast--info[data-v-fcd6b8c9]{color:#007aff}.sileo-toast--default[data-v-fcd6b8c9]{color:#ffffff80}.sileo-container[data-v-7d7ea511]{position:fixed;z-index:9999;padding:20px;pointer-events:none;display:flex;flex-direction:column}.sileo-container--top-left[data-v-7d7ea511]{top:0;left:0;align-items:flex-start}.sileo-container--top-center[data-v-7d7ea511]{top:0;left:50%;transform:translate(-50%);align-items:center}.sileo-container--top-right[data-v-7d7ea511]{top:0;right:0;align-items:flex-end}.sileo-container--bottom-left[data-v-7d7ea511]{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}.sileo-container--bottom-center[data-v-7d7ea511]{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}.sileo-container--bottom-right[data-v-7d7ea511]{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}.sileo-list-enter-active[data-v-7d7ea511],.sileo-list-leave-active[data-v-7d7ea511]{transition:all .5s cubic-bezier(.19,1,.22,1)}.sileo-list-enter-from[data-v-7d7ea511]{opacity:0;transform:translateY(-20px) scale(.9)}.sileo-list-leave-to[data-v-7d7ea511]{opacity:0;transform:translateY(-10px) scale(.95)}.sileo-list-move[data-v-7d7ea511]{transition:transform .4s ease}.sileo-container--bottom-left .sileo-list-enter-from[data-v-7d7ea511],.sileo-container--bottom-center .sileo-list-enter-from[data-v-7d7ea511],.sileo-container--bottom-right .sileo-list-enter-from[data-v-7d7ea511]{transform:translateY(20px) scale(.9)}

package/dist/types/index.d.ts

@@ -0,0 +1,24 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'default';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    title?: string;
+    message: string;
+    type?: ToastType;
+    duration?: number;
+    position?: ToastPosition;
+    icon?: any;
+    showProgress?: boolean;
+    closeOnClick?: boolean;
+    swipeToDismiss?: boolean;
+}
+export interface Toast extends Required<Omit<ToastOptions, 'icon' | 'title'>> {
+    id: string;
+    title?: string;
+    icon?: any;
+    createdAt: number;
+}
+export interface GlobalConfig {
+    position?: ToastPosition;
+    duration?: number;
+    maxToasts?: number;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@edgar208/sileo-vue",
+  "version": "1.0.0",
+  "description": "A production-ready Vue 3 toast notification library inspired by Sileo.",
+  "type": "module",
+  "main": "./dist/sileo-vue.umd.cjs",
+  "module": "./dist/sileo-vue.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/sileo-vue.js",
+      "require": "./dist/sileo-vue.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^3.2.6"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "toast",
+    "notification",
+    "sileo",
+    "glassmorphism",
+    "ui-library"
+  ],
+  "author": "",
+  "license": "MIT"
+}