@strands.gg/accui 2.3.7 → 2.3.8

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

@@ -1438,10 +1438,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 +1460,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 +1473,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 +1507,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 +1526,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.8",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/strands-auth-ui.cjs.js",