@stlhorizon/vue-ui 2.5.7 → 2.7.0

package/dist/index.esm.js

@@ -3602,7 +3602,7 @@ const ae = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "secondary", "destructive", "outline"].includes(e)
+      validator: (e) => ["default", "secondary", "destructive", "outline", "success", "warning", "info", "ghost", "link", "subtle", "dark", "light", "primaryOutline", "destructiveOutline", "successOutline", "gradient"].includes(e)
     },
     size: {
       type: String,
@@ -3629,21 +3629,27 @@ const ae = {
   },
   emits: ["dismiss"],
   setup(e, { emit: a }) {
-    const t = {
-      template: `
-    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-    </svg>
-  `
-    }, n = e, r = a, l = () => r("dismiss"), s = M(
+    const t = e, n = a, r = () => n("dismiss"), l = M(
       "inline-flex items-center font-medium border transition-all duration-200",
       {
         variants: {
           variant: {
-            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-            outline: "text-foreground border"
+            default: "border-transparent bg-blue-500 text-white hover:bg-blue-600",
+            secondary: "border-transparent bg-gray-500 text-white hover:bg-gray-600",
+            destructive: "border-transparent bg-red-500 text-white hover:bg-red-600",
+            outline: "text-foreground border",
+            success: "border-transparent bg-green-500 text-white hover:bg-green-600",
+            warning: "border-transparent bg-yellow-300 text-gray-900 hover:bg-yellow-400",
+            info: "border-transparent bg-cyan-500 text-white hover:bg-cyan-600",
+            ghost: "bg-transparent text-gray-700 hover:bg-gray-100",
+            link: "text-blue-600 hover:underline",
+            subtle: "bg-gray-100 text-gray-800 hover:bg-gray-200",
+            dark: "bg-gray-900 text-white hover:bg-black",
+            light: "bg-gray-50 text-gray-800 border border-gray-200 hover:bg-gray-100",
+            primaryOutline: "border border-blue-500 text-blue-500 bg-transparent hover:bg-blue-50",
+            destructiveOutline: "border border-red-500 text-red-500 bg-transparent hover:bg-red-50",
+            successOutline: "border border-green-500 text-green-500 bg-transparent hover:bg-green-50",
+            gradient: "bg-gradient-to-r from-blue-400 to-purple-500 text-white hover:from-blue-500 hover:to-purple-600"
           },
           size: {
             sm: "px-2 py-0.5 text-xs",
@@ -3662,26 +3668,29 @@ const ae = {
           shape: "rounded"
         }
       }
-    ), u = v(() => ["mr-1", {
+    ), s = v(() => ["mr-1", {
       sm: "w-3 h-3",
       md: "w-4 h-4",
       lg: "w-5 h-5"
-    }[n.size]]);
-    return (c, y) => (o(), d("span", {
-      class: m(N(S)(N(s)({ variant: e.variant, size: e.size, shape: e.shape }), c.$attrs.class))
+    }[t.size]]);
+    return (u, c) => (o(), d("span", {
+      class: m(N(S)(N(l)({ variant: e.variant, size: e.size, shape: e.shape }), u.$attrs.class))
     }, [
       e.icon ? (o(), R(ve(e.icon), {
         key: 0,
-        class: m(u.value)
+        class: m(s.value)
       }, null, 8, ["class"])) : h("", !0),
-      B(c.$slots, "default"),
+      B(u.$slots, "default"),
       e.dismissible ? (o(), d("button", {
         key: 1,
         class: "ml-1 hover:bg-black/10 rounded-full p-0.5 transition-colors",
         "aria-label": e.dismissLabel,
-        onClick: l
+        onClick: r
       }, [
-        P(t, { class: "w-3 h-3" })
+        P(ae, {
+          icon: "xmark",
+          class: "w-3 h-3"
+        })
       ], 8, _o)) : h("", !0)
     ], 2));
   }