@stlhorizon/vue-ui 2.7.1 → 2.7.3

package/README.md

@@ -1030,7 +1030,7 @@ A small label component for displaying status, tags, or counts with multiple var
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `String` | `'default'` | Visual style (default, secondary, destructive, outline, success, warning, info, ghost, link, subtle, dark, light, primaryOutline, destructiveOutline, successOutline, gradient) |
+| `variant` | `String` | `'default'` | Visual style (default, secondary, destructive, primary, outline, success, warning, info, ghost, link, subtle, dark, light, primaryOutline, destructiveOutline, successOutline, gradient) |
 | `size` | `String` | `'md'` | Size variant (sm, md, lg) |
 | `shape` | `String` | `'rounded'` | Shape variant (rounded, pill, square) |
 | `icon` | `String \| Object` | `null` | Icon component |
@@ -1055,6 +1055,8 @@ A small label component for displaying status, tags, or counts with multiple var
 <template>
   <div class="space-x-2">
     <Badge variant="default">New</Badge>
+    <Badge variant="primary">Primary</Badge>
+    <Badge variant="secondary">Secondary</Badge>
     <Badge variant="success" size="sm">Active</Badge>
     <Badge variant="warning" shape="pill">Pending</Badge>
     <Badge variant="destructive" icon="ExclamationIcon">Error</Badge>

package/dist/index.esm.js

@@ -3602,7 +3602,7 @@ const ae = {
     variant: {
       type: String,
       default: "default",
-      validator: (e) => ["default", "secondary", "destructive", "outline", "success", "warning", "info", "ghost", "link", "subtle", "dark", "light", "primaryOutline", "destructiveOutline", "successOutline", "gradient"].includes(e)
+      validator: (e) => ["default", "secondary", "destructive", "primary", "outline", "success", "warning", "info", "ghost", "link", "subtle", "dark", "light", "primaryOutline", "destructiveOutline", "successOutline", "gradient"].includes(e)
     },
     size: {
       type: String,
@@ -3634,13 +3634,14 @@ const ae = {
       {
         variants: {
           variant: {
-            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",
+            default: "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 dark:border-blue-200 dark:bg-blue-50 dark:text-blue-900",
+            secondary: "border border-gray-200 bg-gray-50 text-gray-800 hover:bg-gray-100 dark:border-gray-200 dark:bg-gray-50 dark:text-gray-900",
+            destructive: "border border-red-200 bg-red-50 text-red-800 hover:bg-red-100 dark:border-red-200 dark:bg-red-50 dark:text-red-900",
+            primary: "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 dark:border-blue-200 dark:bg-blue-50 dark:text-blue-900",
             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",
+            success: "border border-green-200 bg-green-50 text-green-800 dark:border-green-200 dark:bg-green-50 dark:text-green-900",
+            warning: "border border-yellow-200 bg-yellow-50 text-yellow-800 hover:bg-yellow-100 dark:border-yellow-200 dark:bg-yellow-50 dark:text-yellow-900",
+            info: "border border-blue-200 bg-blue-50 text-blue-800 hover:bg-blue-100 dark:border-blue-200 dark:bg-blue-50 dark:text-blue-900",
             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",
@@ -10425,7 +10426,7 @@ const Qu = {
           i("div", Vf, [
             e.organisationName ? (o(), d("div", Df, [
               i("p", Mf, x(e.organisationName), 1),
-              e.user.organisation?.role ? (o(), d("p", Ff, x(e.user.organisation.role), 1)) : h("", !0)
+              e.user.organisations?.role ? (o(), d("p", Ff, x(e.user.organisations.role), 1)) : h("", !0)
             ])) : h("", !0),
             i("nav", Nf, [
               i("span", Ef, x(e.currentSection), 1),
@@ -12265,37 +12266,37 @@ function Jg(e, a, t, n, r, l) {
 const Qg = /* @__PURE__ */ yt(Bg, [["render", Jg]]), Zg = {
   key: 0,
   class: "stl-loader__backdrop"
-}, ev = { class: "stl-loader__container" }, tv = {
+}, e0 = { class: "stl-loader__container" }, t0 = {
   key: 0,
   class: "stl-loader__text stl-loader__text--top"
-}, av = {
+}, a0 = {
   key: 1,
   class: "stl-loader__spin"
-}, nv = {
+}, n0 = {
   key: 2,
   class: "stl-loader__pulse"
-}, rv = {
+}, r0 = {
   key: 3,
   class: "stl-loader__bounce"
-}, sv = {
+}, s0 = {
   key: 4,
   class: "stl-loader__ripple"
-}, lv = {
+}, l0 = {
   key: 5,
   class: "stl-loader__bars"
-}, ov = {
+}, o0 = {
   key: 6,
   class: "stl-loader__dots"
-}, iv = {
+}, i0 = {
   key: 7,
   class: "stl-loader__ring"
-}, uv = {
+}, u0 = {
   key: 8,
   class: "stl-loader__spinner-text"
-}, dv = {
+}, d0 = {
   key: 9,
   class: "stl-loader__text stl-loader__text--bottom"
-}, cv = {
+}, c0 = {
   __name: "StlLoader",
   props: {
     loading: {
@@ -12363,43 +12364,43 @@ const Qg = /* @__PURE__ */ yt(Bg, [["render", Jg]]), Zg = {
       })
     }, [
       e.overlay ? (o(), d("div", Zg)) : h("", !0),
-      i("div", ev, [
-        e.text && e.textPosition === "top" ? (o(), d("div", tv, x(e.text), 1)) : h("", !0),
-        e.type === "spin" ? (o(), d("div", av)) : e.type === "pulse" ? (o(), d("div", nv)) : e.type === "bounce" ? (o(), d("div", rv, [
+      i("div", e0, [
+        e.text && e.textPosition === "top" ? (o(), d("div", t0, x(e.text), 1)) : h("", !0),
+        e.type === "spin" ? (o(), d("div", a0)) : e.type === "pulse" ? (o(), d("div", n0)) : e.type === "bounce" ? (o(), d("div", r0, [
           (o(), d(K, null, J(3, (n) => i("div", {
             key: n,
             class: "stl-loader__bounce-dot",
             style: de({ animationDelay: `${(n - 1) * 0.1}s` })
           }, null, 4)), 64))
-        ])) : e.type === "ripple" ? (o(), d("div", sv, [
+        ])) : e.type === "ripple" ? (o(), d("div", s0, [
           (o(), d(K, null, J(2, (n) => i("div", {
             key: n,
             class: "stl-loader__ripple-ring",
             style: de({ animationDelay: `${(n - 1) * 0.5}s` })
           }, null, 4)), 64))
-        ])) : e.type === "bars" ? (o(), d("div", lv, [
+        ])) : e.type === "bars" ? (o(), d("div", l0, [
           (o(), d(K, null, J(5, (n) => i("div", {
             key: n,
             class: "stl-loader__bar",
             style: de({ animationDelay: `${(n - 1) * 0.1}s` })
           }, null, 4)), 64))
-        ])) : e.type === "dots" ? (o(), d("div", ov, [
+        ])) : e.type === "dots" ? (o(), d("div", o0, [
           (o(), d(K, null, J(3, (n) => i("div", {
             key: n,
             class: "stl-loader__dot",
             style: de({ animationDelay: `${(n - 1) * 0.16}s` })
           }, null, 4)), 64))
-        ])) : e.type === "ring" ? (o(), d("div", iv, [...t[0] || (t[0] = [
+        ])) : e.type === "ring" ? (o(), d("div", i0, [...t[0] || (t[0] = [
           i("div", { class: "stl-loader__ring-track" }, null, -1),
           i("div", { class: "stl-loader__ring-fill" }, null, -1)
-        ])])) : e.type === "spinner-text" ? (o(), d("div", uv, [...t[1] || (t[1] = [
+        ])])) : e.type === "spinner-text" ? (o(), d("div", u0, [...t[1] || (t[1] = [
           i("div", { class: "stl-loader__spinner" }, null, -1)
         ])])) : h("", !0),
-        e.text && e.textPosition === "bottom" ? (o(), d("div", dv, x(e.text), 1)) : h("", !0)
+        e.text && e.textPosition === "bottom" ? (o(), d("div", d0, x(e.text), 1)) : h("", !0)
       ])
     ], 6)) : h("", !0);
   }
-}, Ye = /* @__PURE__ */ yt(cv, [["__scopeId", "data-v-671e75e9"]]), Ua = {
+}, Ye = /* @__PURE__ */ yt(c0, [["__scopeId", "data-v-671e75e9"]]), Ua = {
   Avatar: Lo,
   Badge: Ro,
   Button: Ce,
@@ -12471,7 +12472,7 @@ const Qg = /* @__PURE__ */ yt(Bg, [["render", Jg]]), Zg = {
   AuthLayout: $g,
   DefaultLayout: jg,
   ErrorLayout: Qg
-}, vv = {
+}, v0 = {
   install(e, a = {}) {
     const { prefix: t = "" } = a;
     Object.keys(Ua).forEach((n) => {
@@ -12553,7 +12554,7 @@ export {
   $i as Tooltip,
   Yt as Typography,
   S as cn,
-  vv as default,
+  v0 as default,
   Ut as toast,
   ed as useToaster
 };