@gspa/ui 0.2.0 → 0.3.1

package/dist/components/Toast.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),S=require("class-variance-authority"),o=require("../utils/cn.cjs"),q=require("../lib/toast.cjs"),s=require("./Icon.cjs"),I=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),P=["aria-live"],j={class:"flex-1 min-w-0 pt-0.5"},A=["onClick"],$=["onClick"],K={key:2,class:"absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden"},L={__name:"Toast",props:{position:{type:String,default:"top-right",validator:i=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(i)},hotkey:{type:Array,default:()=>["altKey","KeyT"]},richColors:{type:Boolean,default:!0},expand:{type:Boolean,default:!1},visibleToasts:{type:Number,default:3},closeButton:{type:Boolean,default:!0}},setup(i){const n=i,{toasts:p,dismiss:v}=q.useToaster(),x=e.computed(()=>p.value.slice(0,n.visibleToasts)),w={"top-left":"top-0 left-0 flex-col items-start","top-center":"top-0 left-1/2 -translate-x-1/2 flex-col items-center","top-right":"top-0 right-0 flex-col items-end","bottom-left":"bottom-0 left-0 flex-col-reverse items-start","bottom-center":"bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center","bottom-right":"bottom-0 right-0 flex-col-reverse items-end"},b=e.computed(()=>o.cn(w[n.position])),k=S.cva("group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5",{variants:{variant:{default:"ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30",info:"border-blue-700 bg-blue-700 ui-text-inverse shadow-lg shadow-blue-900/25",success:"border-green-700 bg-green-700 ui-text-inverse shadow-lg shadow-green-900/25",warning:"border-amber-600 bg-amber-600 ui-text-inverse shadow-lg shadow-amber-900/25",error:"border-red-700 bg-red-700 ui-text-inverse shadow-lg shadow-red-900/25",loading:"ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30"}},defaultVariants:{variant:"default"}}),y=r=>o.cn(k({variant:r.variant})),l={default:"bell",info:"info",success:"check-circle",warning:"triangle-exclamation",error:"circle-xmark",loading:"loader-circle"},c={default:"ui-primary",info:"text-white",success:"text-white",warning:"text-white",error:"text-white",loading:"ui-primary"},u={default:"ui-surface-muted border ui-border",info:"bg-white/15 ring-1 ring-white/25",success:"bg-white/15 ring-1 ring-white/25",warning:"bg-white/15 ring-1 ring-white/25",error:"bg-white/15 ring-1 ring-white/25",loading:"ui-surface-muted border ui-border"},d={default:"bg-(--ui-primary)",info:"bg-white/70",success:"bg-white/70",warning:"bg-white/70",error:"bg-white/70",loading:"bg-(--ui-primary)"},h={default:"ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline",info:"text-white/90 hover:text-white underline-offset-4 hover:underline",success:"text-white/90 hover:text-white underline-offset-4 hover:underline",warning:"text-white/90 hover:text-white underline-offset-4 hover:underline",error:"text-white/90 hover:text-white underline-offset-4 hover:underline",loading:"ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline"},m={default:"ui-text",info:"text-white",success:"text-white",warning:"text-white",error:"text-white",loading:"ui-text"},f={default:"ui-text-muted",info:"text-white/90",success:"text-white/90",warning:"text-white/90",error:"text-white/90",loading:"ui-text-muted"},g={default:"ui-text-soft hover:bg-black/5 dark:hover:bg-white/10 hover:text-(--ui-text)",info:"text-white/80 hover:text-white hover:bg-white/15",success:"text-white/80 hover:text-white hover:bg-white/15",warning:"text-white/80 hover:text-white hover:bg-white/15",error:"text-white/80 hover:text-white hover:bg-white/15",loading:"ui-text hover:bg-black/5 dark:hover:bg-white/5 hover:text-(--ui-text)"},C=r=>r.icon||l[r.variant]||l.default,B=r=>{const a=c[r.variant]||c.default;return r.variant==="loading"?`${a} animate-spin`:a},_=r=>u[r.variant]||u.default,V=r=>d[r.variant]||d.default,N=r=>h[r.variant]||h.default,T=r=>m[r.variant]||m.default,z=r=>f[r.variant]||f.default,E=r=>g[r.variant]||g.default,M=r=>r.icon!==!1,D=r=>r.dismissible!==!1&&(r.closeButton||n.closeButton||r.dismissible);return(r,a)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o.cn)(b.value,"fixed z-[10000] flex max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none"))},[e.createVNode(e.TransitionGroup,{"enter-active-class":"transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]","enter-from-class":"transform translate-x-full opacity-0 scale-90","enter-to-class":"transform translate-x-0 opacity-100 scale-100","leave-active-class":"transition-all duration-300 ease-[cubic-bezier(0.4,0,1,1)]","leave-from-class":"transform translate-x-0 opacity-100 scale-100","leave-to-class":"transform translate-x-full opacity-0 scale-90","move-class":"transition-all duration-300 ease-out",tag:"div",class:"w-full space-y-3"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.value,t=>(e.openBlock(),e.createElementBlock("div",{key:t.id,class:e.normalizeClass(y(t)),role:"alert","aria-live":t.variant==="error"?"assertive":"polite"},[M(t)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o.cn)("relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-all duration-300",_(t)))},[e.createVNode(s.default,{icon:C(t),class:e.normalizeClass(e.unref(o.cn)("h-5 w-5 transition-transform duration-300 group-hover:scale-110",B(t)))},null,8,["icon","class"])],2)):e.createCommentVNode("",!0),e.createElementVNode("div",j,[t.title?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(o.cn)("text-md font-semibold leading-tight mb-1",T(t)))},e.toDisplayString(t.title),3)):e.createCommentVNode("",!0),t.message||t.description?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(o.cn)("text-md leading-relaxed",z(t)))},e.toDisplayString(t.message||t.description),3)):e.createCommentVNode("",!0),t.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps({key:2,ref_for:!0},t.componentProps,{class:"mt-3"}),null,16)):e.createCommentVNode("",!0),t.action?(e.openBlock(),e.createElementBlock("button",{key:3,class:e.normalizeClass(["mt-3 inline-flex items-center gap-1.5 text-sm font-medium transition-colors",N(t)]),onClick:t.action.onClick},[e.createTextVNode(e.toDisplayString(t.action.label)+" ",1),e.createVNode(s.default,{icon:"arrow-right",class:"h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"})],10,A)):e.createCommentVNode("",!0)]),D(t)?(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(e.unref(o.cn)("absolute right-2 top-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md opacity-70 transition-all hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",E(t))),"aria-label":"Dismiss",onClick:G=>e.unref(v)(t.id)},[e.createVNode(s.default,{icon:"x",class:"h-4 w-4"})],10,$)):e.createCommentVNode("",!0),t.duration&&t.duration>0?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o.cn)("h-full origin-left animate-toast-progress",V(t))),style:e.normalizeStyle({animationDuration:`${t.duration}ms`})},null,6)])):e.createCommentVNode("",!0)],10,P))),128))]),_:1})],2)]))}},F=I._export_sfc(L,[["__scopeId","data-v-8acde4d1"]]);exports.default=F;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),T=require("../lib/toast.cjs"),M=require("./Icon.cjs"),w=require("../_plugin-vue_export-helper-BHFhmbuH.cjs"),D=["data-expanded","data-hotkey"],S=["aria-live"],L={key:0,class:"kv-toast__icon"},$={class:"kv-toast__content"},q={key:0,class:"kv-toast__title"},z={key:1,class:"kv-toast__message"},j=["onClick"],A=["onClick"],P={key:2,class:"kv-toast__progress-track","aria-hidden":"true"},K={__name:"Toast",props:{position:{type:String,default:"top-right",validator:a=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(a)},hotkey:{type:Array,default:()=>["altKey","KeyT"]},richColors:{type:Boolean,default:!0},expand:{type:Boolean,default:!1},visibleToasts:{type:Number,default:3},closeButton:{type:Boolean,default:!0}},setup(a){const c=a,{toasts:d,dismiss:u}=T.useToaster(),p=e.computed(()=>d.value.slice(0,c.visibleToasts)),n=(t,i)=>({name:`Toast${t}Icon`,render(){return e.h("svg",{"data-toast-icon":t.toLowerCase(),viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":1.9,"stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},i.map(([o,l])=>e.h(o,l)))}}),k=n("default",[["path",{d:"M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"}],["path",{d:"M10 21h4"}]]),_=n("info",[["circle",{cx:"12",cy:"12",r:"9"}],["path",{d:"M12 11v5"}],["path",{d:"M12 8h.01"}]]),h=n("success",[["circle",{cx:"12",cy:"12",r:"9"}],["path",{d:"m8.5 12 2.3 2.3 4.9-5"}]]),v=n("warning",[["path",{d:"M10.3 4.1 2.7 17.2A1.8 1.8 0 0 0 4.3 20h15.4a1.8 1.8 0 0 0 1.6-2.8L13.7 4.1a2 2 0 0 0-3.4 0Z"}],["path",{d:"M12 9v4"}],["path",{d:"M12 16.5h.01"}]]),m=n("error",[["circle",{cx:"12",cy:"12",r:"9"}],["path",{d:"m9 9 6 6"}],["path",{d:"m15 9-6 6"}]]),y=n("loading",[["path",{d:"M21 12a9 9 0 1 1-2.64-6.36"}]]),f=n("close",[["path",{d:"m7.5 7.5 9 9"}],["path",{d:"m16.5 7.5-9 9"}]]),B=n("arrow",[["path",{d:"M5 12h14"}],["path",{d:"m14 7 5 5-5 5"}]]),s={default:k,info:_,success:h,warning:v,error:m,loading:y},r=t=>s[t.variant]?t.variant:"default",g=t=>s[r(t)],b=t=>typeof t.icon=="string",C=t=>t.icon&&typeof t.icon!="string"&&t.icon!==!0?t.icon:g(t),N=t=>t.icon!==!1,V=t=>t.dismissible!==!1&&(t.closeButton||c.closeButton||t.dismissible),x=e.computed(()=>`kv-toast-region--${c.position}`),E=e.computed(()=>c.position.startsWith("bottom-")?"kv-toast-stack--bottom":"");return(t,i)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("section",{class:e.normalizeClass(["kv-toast-region",x.value]),"aria-label":"Notifications","data-expanded":c.expand,"data-hotkey":c.hotkey.join("+")},[e.createVNode(e.TransitionGroup,{name:"kv-toast",tag:"div",class:e.normalizeClass(["kv-toast-stack",E.value])},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,o=>(e.openBlock(),e.createElementBlock("article",{key:o.id,class:e.normalizeClass(["kv-toast",[`kv-toast--${r(o)}`,{"kv-toast--subtle":!c.richColors}]]),role:"alert","aria-live":o.variant==="error"?"assertive":"polite","aria-atomic":"true"},[N(o)?(e.openBlock(),e.createElementBlock("span",L,[b(o)?(e.openBlock(),e.createBlock(M.default,{key:0,icon:o.icon,"aria-hidden":"true"},null,8,["icon"])):(e.openBlock(),e.createBlock(e.resolveDynamicComponent(C(o)),{key:1}))])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[o.title?(e.openBlock(),e.createElementBlock("p",q,e.toDisplayString(o.title),1)):e.createCommentVNode("",!0),o.message||o.description?(e.openBlock(),e.createElementBlock("p",z,e.toDisplayString(o.message||o.description),1)):e.createCommentVNode("",!0),o.component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.component),e.mergeProps({key:2,ref_for:!0},o.componentProps,{class:"kv-toast__custom-content"}),null,16)):e.createCommentVNode("",!0),o.action?(e.openBlock(),e.createElementBlock("button",{key:3,type:"button",class:"kv-toast__action",onClick:o.action.onClick},[e.createTextVNode(e.toDisplayString(o.action.label)+" ",1),e.createVNode(e.unref(B))],8,j)):e.createCommentVNode("",!0)]),V(o)?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"kv-toast__close","aria-label":"Dismiss notification",onClick:l=>e.unref(u)(o.id)},[e.createVNode(e.unref(f))],8,A)):e.createCommentVNode("",!0),o.duration&&o.duration>0?(e.openBlock(),e.createElementBlock("span",P,[e.createElementVNode("span",{class:"kv-toast__progress",style:e.normalizeStyle({animationDuration:`${o.duration}ms`})},null,4)])):e.createCommentVNode("",!0)],10,S))),128))]),_:1},8,["class"])],10,D)]))}},W=w._export_sfc(K,[["__scopeId","data-v-3876a110"]]);exports.default=W;

package/dist/components/Toast.js

@@ -1,26 +1,34 @@
-import { computed as _, createBlock as C, openBlock as r, Teleport as G, createElementVNode as h, normalizeClass as i, unref as n, createVNode as l, TransitionGroup as q, withCtx as H, createElementBlock as s, Fragment as J, renderList as O, createCommentVNode as a, toDisplayString as f, resolveDynamicComponent as Q, mergeProps as R, createTextVNode as U, normalizeStyle as W } from "vue";
-import { cva as X } from "class-variance-authority";
-import { cn as o } from "../utils/cn.js";
-import { useToaster as Y } from "../lib/toast.js";
-import g from "./Icon.js";
-import { _ as Z } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const ee = ["aria-live"], te = { class: "flex-1 min-w-0 pt-0.5" }, re = ["onClick"], ie = ["onClick"], oe = {
+import { computed as l, createBlock as c, openBlock as e, Teleport as P, createElementVNode as d, normalizeClass as p, createVNode as u, TransitionGroup as W, withCtx as F, createElementBlock as s, Fragment as G, renderList as Z, createCommentVNode as i, resolveDynamicComponent as g, toDisplayString as _, mergeProps as q, createTextVNode as H, unref as h, normalizeStyle as J, h as b } from "vue";
+import { useToaster as O } from "../lib/toast.js";
+import Q from "./Icon.js";
+import { _ as R } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const U = ["data-expanded", "data-hotkey"], X = ["aria-live"], Y = {
+  key: 0,
+  class: "kv-toast__icon"
+}, I = { class: "kv-toast__content" }, oo = {
+  key: 0,
+  class: "kv-toast__title"
+}, to = {
+  key: 1,
+  class: "kv-toast__message"
+}, eo = ["onClick"], no = ["onClick"], so = {
   key: 2,
-  class: "absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden"
-}, ne = {
+  class: "kv-toast__progress-track",
+  "aria-hidden": "true"
+}, ao = {
   __name: "Toast",
   props: {
     position: {
       type: String,
       default: "top-right",
-      validator: (c) => [
+      validator: (r) => [
         "top-left",
         "top-center",
         "top-right",
         "bottom-left",
         "bottom-center",
         "bottom-right"
-      ].includes(c)
+      ].includes(r)
     },
     hotkey: {
       type: Array,
@@ -43,189 +51,125 @@ const ee = ["aria-live"], te = { class: "flex-1 min-w-0 pt-0.5" }, re = ["onClic
       default: !0
     }
   },
-  setup(c) {
-    const u = c, { toasts: B, dismiss: T } = Y(), M = _(
-      () => B.value.slice(0, u.visibleToasts)
-    ), N = {
-      "top-left": "top-0 left-0 flex-col items-start",
-      "top-center": "top-0 left-1/2 -translate-x-1/2 flex-col items-center",
-      "top-right": "top-0 right-0 flex-col items-end",
-      "bottom-left": "bottom-0 left-0 flex-col-reverse items-start",
-      "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse items-center",
-      "bottom-right": "bottom-0 right-0 flex-col-reverse items-end"
-    }, V = _(
-      () => o(N[u.position])
-    ), z = X(
-      "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-xl border p-4 transition-all duration-200 hover:-translate-y-0.5",
-      {
-        variants: {
-          variant: {
-            default: "ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30",
-            info: "border-blue-700 bg-blue-700 ui-text-inverse shadow-lg shadow-blue-900/25",
-            success: "border-green-700 bg-green-700 ui-text-inverse shadow-lg shadow-green-900/25",
-            warning: "border-amber-600 bg-amber-600 ui-text-inverse shadow-lg shadow-amber-900/25",
-            error: "border-red-700 bg-red-700 ui-text-inverse shadow-lg shadow-red-900/25",
-            loading: "ui-surface ui-border-strong ui-text shadow-lg shadow-black/5 dark:shadow-black/30"
-          }
-        },
-        defaultVariants: { variant: "default" }
+  setup(r) {
+    const a = r, { toasts: m, dismiss: C } = O(), x = l(() => m.value.slice(0, a.visibleToasts)), n = (t, f) => ({
+      name: `Toast${t}Icon`,
+      render() {
+        return b("svg", {
+          "data-toast-icon": t.toLowerCase(),
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": 1.9,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true"
+        }, f.map(([o, y]) => b(o, y)));
       }
-    ), D = (t) => o(z({ variant: t.variant })), m = {
-      default: "bell",
-      info: "info",
-      success: "check-circle",
-      warning: "triangle-exclamation",
-      error: "circle-xmark",
-      loading: "loader-circle"
-    }, p = {
-      default: "ui-primary",
-      info: "text-white",
-      success: "text-white",
-      warning: "text-white",
-      error: "text-white",
-      loading: "ui-primary"
-    }, v = {
-      default: "ui-surface-muted border ui-border",
-      info: "bg-white/15 ring-1 ring-white/25",
-      success: "bg-white/15 ring-1 ring-white/25",
-      warning: "bg-white/15 ring-1 ring-white/25",
-      error: "bg-white/15 ring-1 ring-white/25",
-      loading: "ui-surface-muted border ui-border"
-    }, x = {
-      default: "bg-(--ui-primary)",
-      info: "bg-white/70",
-      success: "bg-white/70",
-      warning: "bg-white/70",
-      error: "bg-white/70",
-      loading: "bg-(--ui-primary)"
-    }, w = {
-      default: "ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline",
-      info: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      success: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      warning: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      error: "text-white/90 hover:text-white underline-offset-4 hover:underline",
-      loading: "ui-primary hover:text-(--ui-primary-strong) underline-offset-4 hover:underline"
-    }, b = {
-      default: "ui-text",
-      info: "text-white",
-      success: "text-white",
-      warning: "text-white",
-      error: "text-white",
-      loading: "ui-text"
-    }, y = {
-      default: "ui-text-muted",
-      info: "text-white/90",
-      success: "text-white/90",
-      warning: "text-white/90",
-      error: "text-white/90",
-      loading: "ui-text-muted"
-    }, k = {
-      default: "ui-text-soft hover:bg-black/5 dark:hover:bg-white/10 hover:text-(--ui-text)",
-      info: "text-white/80 hover:text-white hover:bg-white/15",
-      success: "text-white/80 hover:text-white hover:bg-white/15",
-      warning: "text-white/80 hover:text-white hover:bg-white/15",
-      error: "text-white/80 hover:text-white hover:bg-white/15",
-      loading: "ui-text hover:bg-black/5 dark:hover:bg-white/5 hover:text-(--ui-text)"
-    }, I = (t) => t.icon || m[t.variant] || m.default, $ = (t) => {
-      const d = p[t.variant] || p.default;
-      return t.variant === "loading" ? `${d} animate-spin` : d;
-    }, P = (t) => v[t.variant] || v.default, S = (t) => x[t.variant] || x.default, j = (t) => w[t.variant] || w.default, A = (t) => b[t.variant] || b.default, E = (t) => y[t.variant] || y.default, K = (t) => k[t.variant] || k.default, L = (t) => t.icon !== !1, F = (t) => t.dismissible !== !1 && (t.closeButton || u.closeButton || t.dismissible);
-    return (t, d) => (r(), C(G, { to: "body" }, [
-      h("div", {
-        class: i(n(o)(
-          V.value,
-          "fixed z-[10000] flex max-h-screen w-full p-4 md:max-w-[420px] pointer-events-none"
-        ))
+    }), T = n("default", [
+      ["path", { d: "M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" }],
+      ["path", { d: "M10 21h4" }]
+    ]), B = n("info", [
+      ["circle", { cx: "12", cy: "12", r: "9" }],
+      ["path", { d: "M12 11v5" }],
+      ["path", { d: "M12 8h.01" }]
+    ]), w = n("success", [
+      ["circle", { cx: "12", cy: "12", r: "9" }],
+      ["path", { d: "m8.5 12 2.3 2.3 4.9-5" }]
+    ]), M = n("warning", [
+      ["path", { d: "M10.3 4.1 2.7 17.2A1.8 1.8 0 0 0 4.3 20h15.4a1.8 1.8 0 0 0 1.6-2.8L13.7 4.1a2 2 0 0 0-3.4 0Z" }],
+      ["path", { d: "M12 9v4" }],
+      ["path", { d: "M12 16.5h.01" }]
+    ]), N = n("error", [
+      ["circle", { cx: "12", cy: "12", r: "9" }],
+      ["path", { d: "m9 9 6 6" }],
+      ["path", { d: "m15 9-6 6" }]
+    ]), D = n("loading", [
+      ["path", { d: "M21 12a9 9 0 1 1-2.64-6.36" }]
+    ]), $ = n("close", [
+      ["path", { d: "m7.5 7.5 9 9" }],
+      ["path", { d: "m16.5 7.5-9 9" }]
+    ]), L = n("arrow", [
+      ["path", { d: "M5 12h14" }],
+      ["path", { d: "m14 7 5 5-5 5" }]
+    ]), k = {
+      default: T,
+      info: B,
+      success: w,
+      warning: M,
+      error: N,
+      loading: D
+    }, v = (t) => k[t.variant] ? t.variant : "default", S = (t) => k[v(t)], V = (t) => typeof t.icon == "string", A = (t) => t.icon && typeof t.icon != "string" && t.icon !== !0 ? t.icon : S(t), E = (t) => t.icon !== !1, j = (t) => t.dismissible !== !1 && (t.closeButton || a.closeButton || t.dismissible), z = l(() => `kv-toast-region--${a.position}`), K = l(() => a.position.startsWith("bottom-") ? "kv-toast-stack--bottom" : "");
+    return (t, f) => (e(), c(P, { to: "body" }, [
+      d("section", {
+        class: p(["kv-toast-region", z.value]),
+        "aria-label": "Notifications",
+        "data-expanded": a.expand,
+        "data-hotkey": a.hotkey.join("+")
       }, [
-        l(q, {
-          "enter-active-class": "transition-all duration-400 ease-[cubic-bezier(0.16,1,0.3,1)]",
-          "enter-from-class": "transform translate-x-full opacity-0 scale-90",
-          "enter-to-class": "transform translate-x-0 opacity-100 scale-100",
-          "leave-active-class": "transition-all duration-300 ease-[cubic-bezier(0.4,0,1,1)]",
-          "leave-from-class": "transform translate-x-0 opacity-100 scale-100",
-          "leave-to-class": "transform translate-x-full opacity-0 scale-90",
-          "move-class": "transition-all duration-300 ease-out",
+        u(W, {
+          name: "kv-toast",
           tag: "div",
-          class: "w-full space-y-3"
+          class: p(["kv-toast-stack", K.value])
         }, {
-          default: H(() => [
-            (r(!0), s(J, null, O(M.value, (e) => (r(), s("div", {
-              key: e.id,
-              class: i(D(e)),
+          default: F(() => [
+            (e(!0), s(G, null, Z(x.value, (o) => (e(), s("article", {
+              key: o.id,
+              class: p(["kv-toast", [
+                `kv-toast--${v(o)}`,
+                { "kv-toast--subtle": !a.richColors }
+              ]]),
               role: "alert",
-              "aria-live": e.variant === "error" ? "assertive" : "polite"
+              "aria-live": o.variant === "error" ? "assertive" : "polite",
+              "aria-atomic": "true"
             }, [
-              L(e) ? (r(), s("div", {
-                key: 0,
-                class: i(n(o)(
-                  "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-all duration-300",
-                  P(e)
-                ))
-              }, [
-                l(g, {
-                  icon: I(e),
-                  class: i(n(o)(
-                    "h-5 w-5 transition-transform duration-300 group-hover:scale-110",
-                    $(e)
-                  ))
-                }, null, 8, ["icon", "class"])
-              ], 2)) : a("", !0),
-              h("div", te, [
-                e.title ? (r(), s("div", {
+              E(o) ? (e(), s("span", Y, [
+                V(o) ? (e(), c(Q, {
                   key: 0,
-                  class: i(n(o)("text-md font-semibold leading-tight mb-1", A(e)))
-                }, f(e.title), 3)) : a("", !0),
-                e.message || e.description ? (r(), s("div", {
-                  key: 1,
-                  class: i(n(o)("text-md leading-relaxed", E(e)))
-                }, f(e.message || e.description), 3)) : a("", !0),
-                e.component ? (r(), C(Q(e.component), R({
+                  icon: o.icon,
+                  "aria-hidden": "true"
+                }, null, 8, ["icon"])) : (e(), c(g(A(o)), { key: 1 }))
+              ])) : i("", !0),
+              d("div", I, [
+                o.title ? (e(), s("p", oo, _(o.title), 1)) : i("", !0),
+                o.message || o.description ? (e(), s("p", to, _(o.message || o.description), 1)) : i("", !0),
+                o.component ? (e(), c(g(o.component), q({
                   key: 2,
                   ref_for: !0
-                }, e.componentProps, { class: "mt-3" }), null, 16)) : a("", !0),
-                e.action ? (r(), s("button", {
+                }, o.componentProps, { class: "kv-toast__custom-content" }), null, 16)) : i("", !0),
+                o.action ? (e(), s("button", {
                   key: 3,
-                  class: i(["mt-3 inline-flex items-center gap-1.5 text-sm font-medium transition-colors", j(e)]),
-                  onClick: e.action.onClick
+                  type: "button",
+                  class: "kv-toast__action",
+                  onClick: o.action.onClick
                 }, [
-                  U(f(e.action.label) + " ", 1),
-                  l(g, {
-                    icon: "arrow-right",
-                    class: "h-3 w-3 transition-transform duration-200 group-hover:translate-x-0.5"
-                  })
-                ], 10, re)) : a("", !0)
+                  H(_(o.action.label) + " ", 1),
+                  u(h(L))
+                ], 8, eo)) : i("", !0)
               ]),
-              F(e) ? (r(), s("button", {
+              j(o) ? (e(), s("button", {
                 key: 1,
-                class: i(n(o)(
-                  "absolute right-2 top-2 flex h-7 w-7 shrink-0 items-center justify-center rounded-md opacity-70 transition-all hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-(--ui-ring)",
-                  K(e)
-                )),
-                "aria-label": "Dismiss",
-                onClick: (se) => n(T)(e.id)
+                type: "button",
+                class: "kv-toast__close",
+                "aria-label": "Dismiss notification",
+                onClick: (y) => h(C)(o.id)
               }, [
-                l(g, {
-                  icon: "x",
-                  class: "h-4 w-4"
-                })
-              ], 10, ie)) : a("", !0),
-              e.duration && e.duration > 0 ? (r(), s("div", oe, [
-                h("div", {
-                  class: i(n(o)(
-                    "h-full origin-left animate-toast-progress",
-                    S(e)
-                  )),
-                  style: W({ animationDuration: `${e.duration}ms` })
-                }, null, 6)
-              ])) : a("", !0)
-            ], 10, ee))), 128))
+                u(h($))
+              ], 8, no)) : i("", !0),
+              o.duration && o.duration > 0 ? (e(), s("span", so, [
+                d("span", {
+                  class: "kv-toast__progress",
+                  style: J({ animationDuration: `${o.duration}ms` })
+                }, null, 4)
+              ])) : i("", !0)
+            ], 10, X))), 128))
           ]),
           _: 1
-        })
-      ], 2)
+        }, 8, ["class"])
+      ], 10, U)
     ]));
   }
-}, fe = /* @__PURE__ */ Z(ne, [["__scopeId", "data-v-8acde4d1"]]);
+}, po = /* @__PURE__ */ R(ao, [["__scopeId", "data-v-3876a110"]]);
 export {
-  fe as default
+  po as default
 };