@loafmarkets/ui 0.1.368 → 0.1.369

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React5 from 'react';
-import React5__default, { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import React5__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -18574,7 +18574,139 @@ var SiteFooter = () => {
     showContactPopup && /* @__PURE__ */ jsx(ContactPopup, { onClose: () => setShowContactPopup(false) })
   ] });
 };
+var PAD_Y = 2;
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function extractSparkline(candles, maxPoints = 20) {
+  if (!candles.length) return [];
+  const step = Math.max(1, Math.floor(candles.length / maxPoints));
+  const points = [];
+  for (let i = 0; i < candles.length; i += step) {
+    points.push(candles[i].close);
+  }
+  if (points.length > 0) {
+    const last = candles[candles.length - 1].close;
+    if (points[points.length - 1] !== last) {
+      points.push(last);
+    }
+  }
+  return points;
+}
+var SparklineChart = React5__default.memo(function SparklineChart2({ data, width, height, positive }) {
+  const [hoverX, setHoverX] = useState(null);
+  const svgRef = useRef(null);
+  const { linePath, fillPath, points } = useMemo(() => {
+    const mn = Math.min(...data);
+    const mx = Math.max(...data);
+    const range = mx - mn || 1;
+    const stepX = width / (data.length - 1);
+    const pts = data.map((v, i) => ({
+      x: i * stepX,
+      y: height - (v - mn) / range * (height - PAD_Y * 2) - PAD_Y
+    }));
+    const line = pts.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+    const fill = `${line} L${width},${height} L0,${height} Z`;
+    return { linePath: line, fillPath: fill, points: pts };
+  }, [data, width, height]);
+  const interpolated = useMemo(() => {
+    if (hoverX == null || points.length < 2) return null;
+    const stepX = width / (data.length - 1);
+    const rawIdx = hoverX / stepX;
+    const i0 = Math.floor(rawIdx);
+    const i1 = Math.min(i0 + 1, data.length - 1);
+    const t = rawIdx - i0;
+    return {
+      x: hoverX,
+      y: lerp(points[i0].y, points[i1].y, t),
+      price: lerp(data[i0], data[i1], t)
+    };
+  }, [hoverX, points, data, width]);
+  const handleMouseMove = useCallback((e) => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const rect = svg.getBoundingClientRect();
+    const x = Math.max(0, Math.min(width, e.clientX - rect.left));
+    setHoverX(x);
+  }, [width]);
+  const handleMouseLeave = useCallback(() => setHoverX(null), []);
+  if (data.length < 2) return null;
+  const color = positive ? "#00C076" : "#FF5757";
+  const gradId = `spark-grad-${positive ? "up" : "dn"}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref: svgRef,
+      width,
+      height,
+      style: { display: "block", overflow: "visible", cursor: hoverX != null ? "crosshair" : "default" },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+        ] }) }),
+        /* @__PURE__ */ jsx("path", { d: fillPath, fill: `url(#${gradId})` }),
+        /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+        interpolated && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: interpolated.x,
+              y1: 0,
+              x2: interpolated.x,
+              y2: height,
+              stroke: "rgba(255,255,255,0.2)",
+              strokeWidth: 1,
+              strokeDasharray: "2,2"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: interpolated.x, cy: interpolated.y, r: 3, fill: color, stroke: "#0A0A0C", strokeWidth: 1.5 }),
+          (() => {
+            const above = interpolated.y > 24;
+            const tooltipY = above ? interpolated.y - 26 : interpolated.y + 8;
+            const tooltipX = Math.min(Math.max(interpolated.x - 28, 0), width - 56);
+            const textX = tooltipX + 28;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: tooltipX,
+                  y: tooltipY,
+                  width: 56,
+                  height: 16,
+                  rx: 3,
+                  fill: "rgba(0,0,0,0.75)",
+                  stroke: "rgba(255,255,255,0.1)",
+                  strokeWidth: 0.5
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "text",
+                {
+                  x: textX,
+                  y: tooltipY + 11.5,
+                  textAnchor: "middle",
+                  fill: "#fff",
+                  fontSize: 9,
+                  fontWeight: 600,
+                  fontFamily: "inherit",
+                  style: { fontVariantNumeric: "tabular-nums" },
+                  children: [
+                    "$",
+                    interpolated.price.toFixed(2)
+                  ]
+                }
+              )
+            ] });
+          })()
+        ] })
+      ]
+    }
+  );
+});
 
-export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SiteFooter, Skeleton, SlideDigit, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, hasPendingActivity, useAdaptivePolling, useToast };
+export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, extractSparkline, hasPendingActivity, useAdaptivePolling, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map