@loafmarkets/ui 0.1.410 → 0.1.411

package/dist/index.mjs

@@ -1615,12 +1615,23 @@ var StatusDot = styled10.span`
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #0ecb81;
   flex-shrink: 0;
-  animation: ${breathe} 3s ease-in-out infinite;
+
+  ${({ $state }) => $state === "active" ? css`
+          background: #0ecb81;
+          animation: ${breathe} 3s ease-in-out infinite;
+        ` : $state === "reduced" ? css`
+            background: #e6c87e;
+            box-shadow: 0 0 4px rgba(240, 185, 11, 0.4);
+          ` : $state === "free" ? css`
+              background: #f6465d;
+              box-shadow: 0 0 4px rgba(246, 70, 93, 0.4);
+            ` : css`
+              background: rgba(255, 255, 255, 0.3);
+            `}
 `;
 var LoafLiquidityBadge = React5.forwardRef(
-  ({ className, isGlowing, onClick, children, ...props }, ref) => {
+  ({ className, isGlowing, status = "unknown", onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       LogoContainer,
       {
@@ -1631,11 +1642,11 @@ var LoafLiquidityBadge = React5.forwardRef(
         role: onClick ? "button" : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs(LogoText, { children: [
+          /* @__PURE__ */ jsxs(LogoText, { className: "loaf-ll-label", children: [
             /* @__PURE__ */ jsx(LoafLogoImage, { src: Loaf_logo_Banner_default, alt: "Loaf" }),
             /* @__PURE__ */ jsx(LiquidityText, { children: children ?? "Liquidity" })
           ] }),
-          /* @__PURE__ */ jsx(StatusDot, {})
+          /* @__PURE__ */ jsx(StatusDot, { $state: status, "data-liquidity": status })
         ]
       }
     );
@@ -1882,13 +1893,21 @@ var Orderbook = React5.forwardRef(
     isLoading = false,
     onPriceClick,
     onLoafLiquidityClick,
+    liquidityStatus,
     tradeExplorerUrl,
     maxLevels,
     fillHeight = false,
     className,
     ...props
   }, ref) => {
-    const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem] orderbook-ll-badge", onClick: onLoafLiquidityClick });
+    const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(
+      LoafLiquidityBadge,
+      {
+        className: "text-[0.6rem] orderbook-ll-badge",
+        onClick: onLoafLiquidityClick,
+        status: liquidityStatus
+      }
+    );
     const [tab, setTabState] = React5.useState(defaultTab);
     const setTab = setTabState;
     const effectiveTab = showTradesTab ? tab : "orderbook";