@strands.gg/accui 2.3.7 → 2.3.9

package/dist/strands-auth-ui.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, renderSlot, createBlock, Teleport, createCommentVNode, unref, createElementVNode, toDisplayString, createTextVNode, h, useSlots, normalizeStyle, Fragment, resolveDynamicComponent, ref, mergeProps, withCtx, nextTick, toRefs, watch, renderList, reactive, withModifiers, createStaticVNode, createVNode, withDirectives, vModelText, Transition, createSlots, vModelSelect, inject, onBeforeUnmount, withKeys, isMemoSame, getCurrentInstance } from "vue";
+import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, renderSlot, createBlock, Teleport, createCommentVNode, unref, createElementVNode, toDisplayString, createTextVNode, h, useSlots, resolveDynamicComponent, mergeProps, withCtx, Fragment, ref, nextTick, toRefs, watch, normalizeStyle, renderList, reactive, withModifiers, createStaticVNode, createVNode, withDirectives, vModelText, Transition, createSlots, vModelSelect, inject, onBeforeUnmount, withKeys, isMemoSame, getCurrentInstance } from "vue";
 import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-C3gBJK6y.es.js";
 import { s } from "./useStrandsConfig-C3gBJK6y.es.js";
 import { u as useStrandsAuth } from "./useStrandsAuth-B91u7n_t.es.js";
@@ -146,7 +146,7 @@ const _hoisted_4$t = {
   "aria-hidden": "true"
 };
 const _hoisted_5$q = ["d"];
-const _hoisted_6$o = { class: "alert-text-container" };
+const _hoisted_6$n = { class: "alert-text-container" };
 const _hoisted_7$m = {
   key: 0,
   class: "alert-dismiss-container"
@@ -202,7 +202,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                 }, null, 8, _hoisted_5$q)
               ]))
             ]),
-            createElementVNode("div", _hoisted_6$o, [
+            createElementVNode("div", _hoisted_6$n, [
               _ctx.title ? (openBlock(), createElementBlock("h3", {
                 key: 0,
                 class: normalizeClass(titleClasses.value)
@@ -613,21 +613,20 @@ const Users = createLucideIcon("users", [
   ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", key: "kshegd" }],
   ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }]
 ]);
-const _hoisted_1$E = ["type", "disabled"];
-const _hoisted_2$x = {
+const _hoisted_1$E = {
   key: 0,
   class: "button-loading-content"
 };
-const _hoisted_3$v = { key: 0 };
-const _hoisted_4$s = {
+const _hoisted_2$x = { key: 0 };
+const _hoisted_3$v = {
   key: 1,
   class: "button-content"
 };
-const _hoisted_5$p = {
+const _hoisted_4$s = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_6$n = {
+const _hoisted_5$p = {
   key: 1,
   class: "trailing-icon"
 };
@@ -647,7 +646,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     iconName: {},
     leadingIcon: {},
     trailingIcon: {},
-    squircle: { type: Boolean, default: false }
+    squircle: { type: Boolean, default: false },
+    to: {}
   },
   emits: ["click"],
   setup(__props) {
@@ -676,6 +676,36 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const LeadingIconComponent = computed(() => props.leadingIcon ? getLucideIcon(props.leadingIcon) : null);
     const TrailingIconComponent = computed(() => props.trailingIcon ? getLucideIcon(props.trailingIcon) : null);
     const IconComponent = computed(() => props.iconName ? getLucideIcon(props.iconName) : null);
+    const componentTag = computed(() => {
+      if (!props.to) return "button";
+      if (typeof process !== "undefined" && process.client !== void 0) {
+        return "nuxt-link";
+      }
+      if (typeof window !== "undefined" && (window.__NUXT__ || window.$nuxt)) {
+        return "nuxt-link";
+      }
+      try {
+        if (typeof window !== "undefined" && window.Vue?.Router) {
+          return "router-link";
+        }
+      } catch (e) {
+      }
+      return "a";
+    });
+    const linkProps = computed(() => {
+      if (!props.to) return {};
+      const tag = componentTag.value;
+      if (tag === "nuxt-link" || tag === "router-link") {
+        return { to: props.to };
+      }
+      if (tag === "a") {
+        if (typeof props.to === "object") {
+          return { href: "#route-object-not-supported" };
+        }
+        return { href: props.to };
+      }
+      return {};
+    });
     const buttonClasses = computed(() => {
       const classes = [
         "ui-button",
@@ -696,56 +726,59 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        type: _ctx.type,
+      return openBlock(), createBlock(resolveDynamicComponent(componentTag.value), mergeProps(linkProps.value, {
+        type: componentTag.value === "button" ? _ctx.type : void 0,
         disabled: _ctx.disabled || _ctx.loading,
-        class: normalizeClass(buttonClasses.value),
-        style: normalizeStyle(buttonStyles.value),
+        class: buttonClasses.value,
+        style: buttonStyles.value,
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-      }, [
-        _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_2$x, [
-          _cache[1] || (_cache[1] = createElementVNode("svg", {
-            class: "button-loading-icon",
-            fill: "none",
-            viewBox: "0 0 24 24"
-          }, [
-            createElementVNode("circle", {
-              class: "button-loading-track",
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "currentColor",
-              "stroke-width": "4"
-            }),
-            createElementVNode("path", {
-              class: "button-loading-spinner",
-              fill: "currentColor",
-              d: "m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            })
-          ], -1)),
-          !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_3$v, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
-        ])) : (openBlock(), createElementBlock("span", _hoisted_4$s, [
-          _ctx.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            IconComponent.value && !unref(slots)["default"] ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
-          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            IconComponent.value || LeadingIconComponent.value || unref(slots)["leading-icon"] ? (openBlock(), createElementBlock("span", _hoisted_5$p, [
-              IconComponent.value && !LeadingIconComponent.value && !unref(slots)["leading-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), { key: 0 })) : createCommentVNode("", true),
-              LeadingIconComponent.value && !unref(slots)["leading-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(LeadingIconComponent.value), { key: 1 })) : createCommentVNode("", true),
-              unref(slots)["leading-icon"] ? renderSlot(_ctx.$slots, "leading-icon", { key: 2 }, void 0, true) : createCommentVNode("", true)
-            ])) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "icon", {}, void 0, true),
-            renderSlot(_ctx.$slots, "default", {}, void 0, true),
-            TrailingIconComponent.value || unref(slots)["trailing-icon"] ? (openBlock(), createElementBlock("span", _hoisted_6$n, [
-              TrailingIconComponent.value && !unref(slots)["trailing-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(TrailingIconComponent.value), { key: 0 })) : createCommentVNode("", true),
-              unref(slots)["trailing-icon"] ? renderSlot(_ctx.$slots, "trailing-icon", { key: 1 }, void 0, true) : createCommentVNode("", true)
-            ])) : createCommentVNode("", true)
-          ], 64))
-        ]))
-      ], 14, _hoisted_1$E);
+      }), {
+        default: withCtx(() => [
+          _ctx.loading ? (openBlock(), createElementBlock("span", _hoisted_1$E, [
+            _cache[1] || (_cache[1] = createElementVNode("svg", {
+              class: "button-loading-icon",
+              fill: "none",
+              viewBox: "0 0 24 24"
+            }, [
+              createElementVNode("circle", {
+                class: "button-loading-track",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                "stroke-width": "4"
+              }),
+              createElementVNode("path", {
+                class: "button-loading-spinner",
+                fill: "currentColor",
+                d: "m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              })
+            ], -1)),
+            !_ctx.icon ? (openBlock(), createElementBlock("span", _hoisted_2$x, toDisplayString(_ctx.loadingText || "Loading..."), 1)) : createCommentVNode("", true)
+          ])) : (openBlock(), createElementBlock("span", _hoisted_3$v, [
+            _ctx.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              IconComponent.value && !unref(slots)["default"] ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), { key: 0 })) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              IconComponent.value || LeadingIconComponent.value || unref(slots)["leading-icon"] ? (openBlock(), createElementBlock("span", _hoisted_4$s, [
+                IconComponent.value && !LeadingIconComponent.value && !unref(slots)["leading-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(IconComponent.value), { key: 0 })) : createCommentVNode("", true),
+                LeadingIconComponent.value && !unref(slots)["leading-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(LeadingIconComponent.value), { key: 1 })) : createCommentVNode("", true),
+                unref(slots)["leading-icon"] ? renderSlot(_ctx.$slots, "leading-icon", { key: 2 }, void 0, true) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "icon", {}, void 0, true),
+              renderSlot(_ctx.$slots, "default", {}, void 0, true),
+              TrailingIconComponent.value || unref(slots)["trailing-icon"] ? (openBlock(), createElementBlock("span", _hoisted_5$p, [
+                TrailingIconComponent.value && !unref(slots)["trailing-icon"] ? (openBlock(), createBlock(resolveDynamicComponent(TrailingIconComponent.value), { key: 0 })) : createCommentVNode("", true),
+                unref(slots)["trailing-icon"] ? renderSlot(_ctx.$slots, "trailing-icon", { key: 1 }, void 0, true) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true)
+            ], 64))
+          ]))
+        ]),
+        _: 3
+      }, 16, ["type", "disabled", "class", "style"]);
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-98ba7614"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["__scopeId", "data-v-0a40a982"]]);
 const _hoisted_1$D = {
   key: 0,
   class: "ui-card-header"
@@ -1010,14 +1043,41 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const tag = computed(() => {
-      if (props.to) return "router-link";
+      if (props.to) {
+        if (typeof process !== "undefined" && process.client !== void 0) {
+          return "nuxt-link";
+        }
+        if (typeof window !== "undefined" && (window.__NUXT__ || window.$nuxt)) {
+          return "nuxt-link";
+        }
+        try {
+          if (typeof window !== "undefined" && window.Vue?.Router) {
+            return "router-link";
+          }
+        } catch (e) {
+        }
+        return "a";
+      }
       if (props.href) return "a";
       return "button";
     });
     const linkProps = computed(() => {
       const baseProps = {};
+      const currentTag = tag.value;
       if (props.to) {
-        baseProps["to"] = props.to;
+        if (currentTag === "nuxt-link" || currentTag === "router-link") {
+          baseProps["to"] = props.to;
+        } else if (currentTag === "a") {
+          if (typeof props.to === "object") {
+            baseProps["href"] = "#route-object-not-supported";
+          } else {
+            baseProps["href"] = props.to;
+            if (props.external) {
+              baseProps["target"] = "_blank";
+              baseProps["rel"] = "noopener noreferrer";
+            }
+          }
+        }
       } else if (props.href) {
         baseProps["href"] = props.href;
         if (props.external) {
@@ -1100,7 +1160,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-49c069cf"]]);
+const StrandsUiLink = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-a9d22fbf"]]);
 const _hoisted_1$B = { class: "tabs-wrapper" };
 const _hoisted_2$u = {
   key: 0,
@@ -1438,10 +1498,10 @@ const _hoisted_1$A = {
   class: "loader-icon"
 };
 const _hoisted_2$t = ["width", "height"];
-const _hoisted_3$r = ["d", "stroke", "stroke-width"];
-const _hoisted_4$p = ["d", "stroke", "stroke-width"];
-const _hoisted_5$m = ["width", "height"];
-const _hoisted_6$l = ["stroke"];
+const _hoisted_3$r = ["d"];
+const _hoisted_4$p = ["stroke-width"];
+const _hoisted_5$m = ["stroke-width"];
+const _hoisted_6$l = ["width", "height"];
 const _hoisted_7$k = {
   key: 3,
   class: "loader-text"
@@ -1460,32 +1520,12 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const path = logo.replace(/<svg[^>]*>/, "").replace(/<\/svg>/, "").trim();
     const d = path.match(/d="([^"]*)"/)?.[1] || "";
-    const props = __props;
-    function getCurrentAccentColor() {
-      if (typeof window !== "undefined") {
-        const cssValue = getComputedStyle(document.documentElement).getPropertyValue("--strands-accent").trim();
-        if (cssValue) {
-          return cssValue;
-        }
-      }
-      return "#EA00A8";
-    }
-    const getColorMap = () => {
-      const accentColor = getCurrentAccentColor();
-      return {
-        primary: { solid: accentColor, semi: `${accentColor}10` },
-        success: { solid: "#22c55e", semi: "#22c55e10" },
-        warning: { solid: "#f59e0b", semi: "#f59e0b10" },
-        danger: { solid: "#ef4444", semi: "#ef444410" },
-        white: { solid: "#ffffff", semi: "#ffffff10" },
-        black: { solid: "#000000", semi: "#00000010" }
-      };
-    };
-    const semiColor = computed(() => getColorMap()[props.color].semi);
-    const solidColor = computed(() => getColorMap()[props.color].solid);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["loader-container", { "loader-centered": _ctx.centered }])
+        class: normalizeClass(["loader-container", [
+          { "loader-centered": _ctx.centered },
+          `loader-color-${_ctx.color}`
+        ]])
       }, [
         _ctx.variant === "spinner" ? (openBlock(), createElementBlock("div", _hoisted_1$A, [
           (openBlock(), createElementBlock("svg", {
@@ -1493,25 +1533,30 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             height: _ctx.size,
             viewBox: "0 0 500 500"
           }, [
-            createElementVNode("path", {
-              d: unref(d),
+            createElementVNode("defs", null, [
+              createElementVNode("path", {
+                id: "logo-path",
+                d: unref(d),
+                transform: "translate(81, 13) scale(1.0)"
+              }, null, 8, _hoisted_3$r)
+            ]),
+            createElementVNode("use", {
+              href: "#logo-path",
               fill: "none",
-              stroke: semiColor.value,
+              stroke: "var(--loader-semi-color)",
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              transform: "translate(81, 13) scale(1.0)"
-            }, null, 8, _hoisted_3$r),
-            createElementVNode("path", {
-              d: unref(d),
+              "stroke-linejoin": "round"
+            }, null, 8, _hoisted_4$p),
+            createElementVNode("use", {
+              href: "#logo-path",
               fill: "none",
-              stroke: solidColor.value,
+              stroke: "var(--loader-solid-color)",
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
-              class: "loader-animated-path",
-              transform: "translate(81, 13) scale(1.0)"
-            }, null, 8, _hoisted_4$p)
+              class: "loader-animated-path"
+            }, null, 8, _hoisted_5$m)
           ], 8, _hoisted_2$t))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -1522,18 +1567,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             width: _ctx.size,
             height: _ctx.size,
             viewBox: "0 0 50 50"
-          }, [
+          }, [..._cache[0] || (_cache[0] = [
             createElementVNode("circle", {
               cx: "25",
               cy: "25",
               r: "20",
               fill: "none",
-              stroke: solidColor.value,
+              stroke: "var(--loader-solid-color)",
               "stroke-width": "4",
               "stroke-linecap": "round",
               class: "loader-circle-path"
-            }, null, 8, _hoisted_6$l)
-          ], 8, _hoisted_5$m))
+            }, null, -1)
+          ])], 8, _hoisted_6$l))
         ], 4)) : _ctx.variant === "bar" ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "loader-bar",
@@ -1541,23 +1586,17 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             width: _ctx.fullWidth ? "100%" : `${_ctx.size * 1.5}px`,
             height: `${Math.max(_ctx.size * 0.1, 4)}px`
           })
-        }, [
-          createElementVNode("div", {
-            class: "loader-bar-track",
-            style: normalizeStyle({ backgroundColor: semiColor.value })
-          }, [
-            createElementVNode("div", {
-              class: "loader-bar-fill",
-              style: normalizeStyle({ backgroundColor: solidColor.value })
-            }, null, 4)
-          ], 4)
-        ], 4)) : createCommentVNode("", true),
+        }, [..._cache[1] || (_cache[1] = [
+          createElementVNode("div", { class: "loader-bar-track" }, [
+            createElementVNode("div", { class: "loader-bar-fill" })
+          ], -1)
+        ])], 4)) : createCommentVNode("", true),
         _ctx.text ? (openBlock(), createElementBlock("p", _hoisted_7$k, toDisplayString(_ctx.text), 1)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-dde32ad9"]]);
+const StrandsUiLoader = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-ba3ffb77"]]);
 const _hoisted_1$z = ["aria-pressed", "aria-labelledby"];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "UiToggle",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/strands-auth-ui.cjs.js",