@loafmarkets/ui 0.1.38 → 0.1.40

package/dist/index.mjs

@@ -7270,7 +7270,7 @@ function GalleryMapSection({
   const [carouselIndex, setCarouselIndex] = useState(0);
   const [showVideo, setShowVideo] = useState(false);
   const [autoPlaying, setAutoPlaying] = useState(autoPlay);
-  const resolvedMapUrl = mapUrl ?? (tokenName ? `https://demo.loafmarkets.com/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
+  const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
   useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
     const interval = setInterval(() => {
@@ -8945,6 +8945,16 @@ var IPOAssetSelector = styled24.div`
   z-index: 10;
   transition: all 0.3s ease;
   &:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.6rem 0.75rem;
+  }
 `;
 var AssetSelectorDropdown = styled24.div`
   display: flex;
@@ -8964,6 +8974,15 @@ var AssetName = styled24.div`
   letter-spacing: -0.02em;
   svg { margin-left: 0.75rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); opacity: 0.7; }
   &:hover svg { opacity: 1; }
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.9rem;
+    svg { margin-left: 0.4rem; width: 16px; height: 16px; }
+  }
 `;
 var SelectorMetrics = styled24.div`
   display: flex;
@@ -8975,6 +8994,20 @@ var SelectorMetrics = styled24.div`
   background: rgba(255,255,255,0.03);
   border-radius: 8px;
   border: 1px solid rgba(255,255,255,0.05);
+
+  @media (max-width: 768px) {
+    gap: 0.6rem;
+    padding: 0.4rem 0.75rem;
+    margin-right: 0;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+    margin-left: 0;
+    padding: 0.35rem 0.5rem;
+    gap: 0.5rem;
+  }
 `;
 var MetricLabel2 = styled24.span`
   font-size: 0.75rem;
@@ -8983,11 +9016,24 @@ var MetricLabel2 = styled24.span`
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-right: 0.5rem;
+
+  @media (max-width: 768px) {
+    font-size: 0.65rem;
+    margin-right: 0.35rem;
+  }
 `;
 var MetricValue = styled24.span`
   font-size: 1.25rem;
   font-weight: 700;
   color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
+
+  @media (max-width: 768px) {
+    font-size: 1.05rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.95rem;
+  }
 `;
 var MetricChange = styled24.span`
   font-size: 0.85rem;
@@ -8996,6 +9042,10 @@ var MetricChange = styled24.span`
   display: flex;
   align-items: center;
   gap: 0.25rem;
+
+  @media (max-width: 768px) {
+    font-size: 0.75rem;
+  }
 `;
 var Separator = styled24.span`
   font-size: 1rem;
@@ -9014,6 +9064,11 @@ var IPODropdown = styled24.div`
   max-height: 360px;
   overflow-y: auto;
   border: 1px solid rgba(255,255,255,0.08);
+
+  @media (max-width: 480px) {
+    max-height: 280px;
+    border-radius: 12px;
+  }
   animation: slideDown 0.3s cubic-bezier(0.4,0,0.2,1);
   @keyframes slideDown {
     from { opacity: 0; transform: translateY(-10px); }
@@ -9808,7 +9863,7 @@ function OrderPanel({
             "input",
             {
               type: "text",
-              inputMode: "numeric",
+              inputMode: "decimal",
               value: isPayInputFocused ? payInputValue : orderTotal.toLocaleString(),
               onFocus: (e) => {
                 setIsPayInputFocused(true);
@@ -9816,7 +9871,12 @@ function OrderPanel({
                 e.target.select();
               },
               onBlur: handlePayBlur,
-              onChange: (e) => setPayInputValue(e.target.value),
+              onChange: (e) => {
+                const v = e.target.value;
+                if (v === "" || /^\d*\.?\d{0,2}$/.test(v)) {
+                  setPayInputValue(v);
+                }
+              },
               onKeyDown: (e) => {
                 if (e.key === "Enter") {
                   e.target.blur();
@@ -9882,7 +9942,12 @@ function OrderPanel({
                 e.target.select();
               },
               onBlur: handleReceiveBlur,
-              onChange: (e) => setReceiveInputValue(e.target.value),
+              onChange: (e) => {
+                const v = e.target.value;
+                if (v === "" || /^\d+$/.test(v)) {
+                  setReceiveInputValue(v);
+                }
+              },
               onKeyDown: (e) => {
                 if (e.key === "Enter") {
                   e.target.blur();
@@ -10013,9 +10078,10 @@ var Panel2 = styled24.div`
   }
   @media (max-width: 768px) {
     padding: 1rem;
-    input[style*="font-size: 1.75rem"] {
-      font-size: 1.25rem !important;
-    }
+  }
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    border-radius: 6px;
   }
 `;
 var PanelHeader2 = styled24.div`
@@ -10049,6 +10115,11 @@ var Card2 = styled24.div`
   border: 1px solid rgba(255,255,255,0.15);
   border-radius: 12px;
   padding: 1rem 1.25rem;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem 1rem;
+    border-radius: 10px;
+  }
 `;
 var CardLabel = styled24.div`
   font-size: 0.75rem;
@@ -10067,6 +10138,10 @@ var CardInputRow = styled24.div`
     font-weight: 600;
     color: #fff;
     width: 100%;
+
+    @media (max-width: 480px) {
+      font-size: 1.35rem;
+    }
   }
   span {
     font-size: 1rem;
@@ -10080,8 +10155,10 @@ var QuickSelectRow = styled24.div`
   display: flex;
   gap: 0.5rem;
   margin-top: 0.75rem;
+  flex-wrap: wrap;
   button {
     flex: 1;
+    min-width: 50px;
     padding: 0.4rem 0;
     font-size: 0.75rem;
     font-weight: 500;
@@ -10097,6 +10174,11 @@ var QuickSelectRow = styled24.div`
     border-color: rgba(212,175,55,0.5);
     color: #D4AF37;
   }
+
+  @media (max-width: 480px) {
+    gap: 0.35rem;
+    button { font-size: 0.7rem; padding: 0.35rem 0; }
+  }
 `;
 var FundsRow = styled24.div`
   display: flex;
@@ -10220,6 +10302,10 @@ var BalanceValue = styled24.div`
     color: #0ecb81;
     font-weight: 600;
   }
+
+  @media (max-width: 480px) {
+    font-size: 1.2rem;
+  }
 `;
 var BalanceAction = styled24.div`
   font-size: 0.75rem;
@@ -10678,6 +10764,10 @@ var TabContainer = styled24.div`
   gap: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.75rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
 `;
 var Tab = styled24.button`
   background: transparent;
@@ -10685,6 +10775,8 @@ var Tab = styled24.button`
   padding: 0.6rem 1rem;
   font-size: 0.75rem;
   font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
   color: ${({ $active }) => $active ? "#f0b90b" : "rgba(255, 255, 255, 0.4)"};
   cursor: pointer;
   transition: color 0.15s;
@@ -10955,8 +11047,14 @@ var Row2 = styled24.div`
   max-width: 1800px;
   margin-left: auto;
   margin-right: auto;
-  @media (max-width: 1024px) {
+  overflow: hidden;
+  @media (max-width: 768px) {
     grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  & > * {
+    min-width: 0;
+    overflow: hidden;
   }
 `;
 var TradeNewsPanel = styled24.div`
@@ -10968,8 +11066,8 @@ var TradeNewsPanel = styled24.div`
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   border: 1px solid var(--color-border);
   min-height: 280px;
-  overflow: visible !important;
-  @media (max-width: 1024px) {
+  overflow: hidden;
+  @media (max-width: 768px) {
     max-width: 100%;
     flex: 0 0 100%;
   }
@@ -11620,29 +11718,42 @@ var HeroGrid = styled24.div`
   }
 
   @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
+    overflow: hidden;
 
     & > div:nth-child(1) {
       display: none;
     }
 
     & > div:nth-child(2) {
-      grid-column: 1 / -1;
       order: 1;
+      min-width: 0;
+      width: 100%;
     }
 
     & > div:nth-child(4) {
-      grid-column: 1 / -1;
       order: 2;
+      min-width: 0;
+      width: 100%;
+      height: auto;
     }
 
     & > div:nth-child(3) {
-      grid-column: 1 / -1;
       order: 3;
+      min-width: 0;
+      width: 100%;
     }
   }
+
+  @media (max-width: 768px) {
+    gap: 0.75rem;
+  }
+
+  @media (max-width: 480px) {
+    gap: 0.5rem;
+  }
 `;
 var PaymentOption = styled24.div`
   display: flex;