@loafmarkets/ui 0.1.212 → 0.1.213

package/dist/index.mjs

@@ -8499,6 +8499,7 @@ function PropertyOverview({
   const [showDividendHistory, setShowDividendHistory] = useState(false);
   const [showHolders, setShowHolders] = useState(false);
   const [copiedAddress, setCopiedAddress] = useState(false);
+  const [statsTab, setStatsTab] = useState("token");
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
   const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
@@ -8630,9 +8631,12 @@ function PropertyOverview({
     ] }),
     /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "Statistics" }),
-      /* @__PURE__ */ jsxs(StatsGrid, { children: [
-        /* @__PURE__ */ jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Token Performance" }),
+      /* @__PURE__ */ jsxs(StatsTabbedCard, { children: [
+        /* @__PURE__ */ jsxs(StatsTabBar, { children: [
+          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token Performance" }),
+          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property Fundamentals" })
+        ] }),
+        statsTab === "token" && /* @__PURE__ */ jsxs(StatsTabContent, { children: [
           tokenStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { $gold: !!item.gold, children: [
             /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
             item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsx(StatValue, { $gold: !!item.gold, children: item.value })
@@ -8661,8 +8665,7 @@ function PropertyOverview({
             /* @__PURE__ */ jsx(HoldRatioTrack, { children: /* @__PURE__ */ jsx(HoldRatioFill, { $pct: holdRatio.holdPct }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Property Fundamentals" }),
+        statsTab === "property" && /* @__PURE__ */ jsxs(StatsTabContent, { children: [
           propertyStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { children: [
             /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
             /* @__PURE__ */ jsx(StatValue, { children: item.value })
@@ -9330,6 +9333,35 @@ var ChainLogoImg = styled9.img`
   width: auto;
   vertical-align: middle;
 `;
+var StatsTabbedCard = styled9.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.div`
+  display: flex;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+`;
+var StatsTab = styled9.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.div`
+  padding: 0.5rem 1.25rem 1.25rem;
+`;
 var StatsGrid = styled9.div`
   display: grid;
   grid-template-columns: 340px 340px;