@loafmarkets/ui 0.1.211 → 0.1.213

package/dist/index.js

@@ -8525,6 +8525,7 @@ function PropertyOverview({
   const [showDividendHistory, setShowDividendHistory] = React5.useState(false);
   const [showHolders, setShowHolders] = React5.useState(false);
   const [copiedAddress, setCopiedAddress] = React5.useState(false);
+  const [statsTab, setStatsTab] = React5.useState("token");
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
   const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
@@ -8656,9 +8657,12 @@ function PropertyOverview({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Statistics" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Token Performance" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatsTabbedCard, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(StatsTabBar, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token Performance" }),
+          /* @__PURE__ */ jsxRuntime.jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property Fundamentals" })
+        ] }),
+        statsTab === "token" && /* @__PURE__ */ jsxRuntime.jsxs(StatsTabContent, { children: [
           tokenStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { $gold: !!item.gold, children: [
             /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
             item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsxRuntime.jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsxRuntime.jsx(StatValue, { $gold: !!item.gold, children: item.value })
@@ -8687,8 +8691,7 @@ function PropertyOverview({
             /* @__PURE__ */ jsxRuntime.jsx(HoldRatioTrack, { children: /* @__PURE__ */ jsxRuntime.jsx(HoldRatioFill, { $pct: holdRatio.holdPct }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Property Fundamentals" }),
+        statsTab === "property" && /* @__PURE__ */ jsxRuntime.jsxs(StatsTabContent, { children: [
           propertyStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
             /* @__PURE__ */ jsxRuntime.jsx(StatValue, { children: item.value })
@@ -9356,6 +9359,35 @@ var ChainLogoImg = styled9__default.default.img`
   width: auto;
   vertical-align: middle;
 `;
+var StatsTabbedCard = styled9__default.default.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  max-width: 400px;
+`;
+var StatsTabBar = styled9__default.default.div`
+  display: flex;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+`;
+var StatsTab = styled9__default.default.button`
+  flex: 1;
+  padding: 0.85rem 1rem;
+  background: none;
+  border: none;
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.35)"};
+  border-bottom: 2px solid ${(p) => p.$active ? "#D4AF37" : "transparent"};
+  margin-bottom: -1px;
+  &:hover { color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.6)"}; }
+`;
+var StatsTabContent = styled9__default.default.div`
+  padding: 0.5rem 1.25rem 1.25rem;
+`;
 var StatsGrid = styled9__default.default.div`
   display: grid;
   grid-template-columns: 340px 340px;
@@ -9406,8 +9438,8 @@ styled9__default.default.span`
   gap: 3px;
 `;
 var StatValue = styled9__default.default.span`
-  font-size: 1rem;
-  font-weight: 600;
+  font-size: 0.88rem;
+  font-weight: 500;
   color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
@@ -10059,7 +10091,7 @@ var HoldersFullListBtn = styled9__default.default.a`
 `;
 var StatValueClickable = styled9__default.default.span`
   font-size: 0.88rem;
-  font-weight: 600;
+  font-weight: 500;
   color: #fff;
   cursor: pointer;
   text-decoration: underline;