@loafmarkets/ui 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -255,14 +255,28 @@ type YourOrder = {
     priceChangePercent?: number;
     priceChangePositive?: boolean;
 };
-type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
+type YourOrdersTab = {
+    id: string;
+    label: string;
     title?: string;
     orders: YourOrder[];
+    emptyState?: string;
+    enableCancel?: boolean;
+};
+type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    orders?: YourOrder[];
+    tabs?: YourOrdersTab[];
+    activeTabId?: string;
+    onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 };
 declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
-    orders: YourOrder[];
+    orders?: YourOrder[];
+    tabs?: YourOrdersTab[];
+    activeTabId?: string;
+    onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -255,14 +255,28 @@ type YourOrder = {
     priceChangePercent?: number;
     priceChangePositive?: boolean;
 };
-type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
+type YourOrdersTab = {
+    id: string;
+    label: string;
     title?: string;
     orders: YourOrder[];
+    emptyState?: string;
+    enableCancel?: boolean;
+};
+type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    orders?: YourOrder[];
+    tabs?: YourOrdersTab[];
+    activeTabId?: string;
+    onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 };
 declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
-    orders: YourOrder[];
+    orders?: YourOrder[];
+    tabs?: YourOrdersTab[];
+    activeTabId?: string;
+    onTabChange?: (tabId: string) => void;
     renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -4297,7 +4297,7 @@ var PriceChange = at.span`
   gap: 0.35rem;
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
-var TABS = [
+var DEFAULT_TABS = [
   { id: "portfolio", label: "Portfolio" },
   { id: "openOrders", label: "Open Orders" },
   { id: "tradeHistory", label: "Trade History" },
@@ -4392,12 +4392,29 @@ var formatPercent = (value, fractionDigits = 2) => {
   return `${value.toFixed(fractionDigits)}%`;
 };
 var YourOrders = o__namespace.forwardRef(
-  ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
-    const [activeTab, setActiveTab] = o__namespace.useState("portfolio");
-    const hasOrders = Array.isArray(orders) && orders.length > 0;
-    const renderPortfolio = () => {
+  ({ className, title, orders, tabs, activeTabId, onTabChange, renderOrderActions, ...props }, ref) => {
+    const [internalActiveTab, setInternalActiveTab] = o__namespace.useState(tabs?.[0]?.id ?? "portfolio");
+    const effectiveActiveTabId = activeTabId ?? internalActiveTab;
+    const handleTabChange = (tabId) => {
+      if (onTabChange) {
+        onTabChange(tabId);
+      } else {
+        setInternalActiveTab(tabId);
+      }
+    };
+    const resolvedTabs = tabs ?? DEFAULT_TABS.map((t) => ({ ...t, orders: orders ?? [], emptyState: `No ${t.label.toLowerCase()} data available.` }));
+    const activeTab = resolvedTabs.find((t) => t.id === effectiveActiveTabId) ?? resolvedTabs[0];
+    const activeOrders = activeTab?.orders ?? orders ?? [];
+    const displayTitle = title ?? activeTab?.title ?? activeTab?.label ?? "Portfolio Holdings";
+    console.log("[YourOrders] tabs:", tabs?.map((t) => ({ id: t.id, ordersCount: t.orders?.length })));
+    console.log("[YourOrders] activeTabId prop:", activeTabId);
+    console.log("[YourOrders] effectiveActiveTabId:", effectiveActiveTabId);
+    console.log("[YourOrders] activeTab:", activeTab?.id, "orders count:", activeOrders?.length);
+    const hasOrders = Array.isArray(activeOrders) && activeOrders.length > 0;
+    const emptyMessage = activeTab?.emptyState ?? "No holdings yet. Start trading to build your portfolio.";
+    const renderOrders = () => {
       if (!hasOrders) {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStateStyle, children: "No holdings yet. Start trading to build your portfolio." });
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStateStyle, children: emptyMessage });
       }
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tableHeaderStyle, children: [
@@ -4408,7 +4425,7 @@ var YourOrders = o__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "Avg Price" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: tableHeaderCell, children: "P&L" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: orders.map((order) => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: activeOrders.map((order) => {
           const propertyName = order.asset;
           const holding = order.holdingLabel ?? `${order.amount.toLocaleString(void 0, {
             minimumFractionDigits: 0,
@@ -4501,24 +4518,7 @@ var YourOrders = o__namespace.forwardRef(
         }) })
       ] });
     };
-    const renderOtherTab = (label) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStateStyle, children: `No ${label.toLowerCase()} data available.` });
-    let tabContent = null;
-    switch (activeTab) {
-      case "portfolio":
-        tabContent = renderPortfolio();
-        break;
-      case "openOrders":
-        tabContent = renderOtherTab("Open Orders");
-        break;
-      case "tradeHistory":
-        tabContent = renderOtherTab("Trade History");
-        break;
-      case "orderHistory":
-        tabContent = renderOtherTab("Order History");
-        break;
-      default:
-        tabContent = null;
-    }
+    const tabContent = renderOrders();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -4527,14 +4527,14 @@ var YourOrders = o__namespace.forwardRef(
         className,
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyle, children: title }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: tabsRowStyle, children: TABS.map((tab) => {
-            const isActive = activeTab === tab.id;
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: titleStyle, children: displayTitle }) }),
+          resolvedTabs.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tabsRowStyle, children: resolvedTabs.map((tab) => {
+            const isActive = effectiveActiveTabId === tab.id;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => setActiveTab(tab.id),
+                onClick: () => handleTabChange(tab.id),
                 style: {
                   ...tabButtonBase,
                   color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)",
@@ -5140,243 +5140,99 @@ var PriceBlock2 = at.span`
 `;
 var PropertySubheader = o__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabRefs = o__namespace.useRef([]);
-    const tabsWrapperRef = o__namespace.useRef(null);
-    const scrollContainerRef = o__namespace.useRef(null);
-    const indicatorRef = o__namespace.useRef(null);
-    const [isMobile, setIsMobile] = o__namespace.useState(false);
-    const [tabScrollThumb, setTabScrollThumb] = o__namespace.useState({
-      widthPercent: 100,
-      leftPercent: 0,
-      scrollable: false
-    });
-    const actionContainerStyle = o__namespace.useMemo(() => {
-      if (isMobile) {
-        return {
-          order: -1,
-          justifyContent: "center",
-          gap: "0.45rem",
-          flexWrap: "wrap"
-        };
-      }
-      return { order: 0 };
-    }, [isMobile]);
-    const actionButtonStyle = o__namespace.useMemo(() => {
-      if (isMobile) {
-        return { padding: "0.35rem 0.6rem", fontSize: "11px" };
-      }
-      return void 0;
-    }, [isMobile]);
-    const updateTabScrollThumb = o__namespace.useCallback(() => {
-      const container = scrollContainerRef.current;
-      if (!container) return;
-      const visibleWidth = container.clientWidth;
-      const totalWidth = container.scrollWidth;
-      if (totalWidth <= visibleWidth || visibleWidth === 0) {
-        setTabScrollThumb(
-          (prev2) => prev2.scrollable ? { widthPercent: 100, leftPercent: 0, scrollable: false } : prev2
-        );
-        return;
-      }
-      const widthPercent = visibleWidth / totalWidth * 100;
-      const maxScroll = Math.max(totalWidth - visibleWidth, 0);
-      const scrollRatio = maxScroll === 0 ? 0 : container.scrollLeft / maxScroll;
-      const usableTrack = Math.max(100 - widthPercent, 0);
-      const leftPercent = scrollRatio * usableTrack;
-      setTabScrollThumb({
-        widthPercent,
-        leftPercent,
-        scrollable: true
-      });
-    }, []);
-    const updateMobileIndicator = o__namespace.useCallback(() => {
-      if (typeof window === "undefined") return;
-      if (!indicatorRef.current || !tabsWrapperRef.current) return;
-      const isMobile2 = window.matchMedia("(max-width: 768px)").matches;
-      if (!isMobile2) {
-        indicatorRef.current.style.width = "0px";
-        indicatorRef.current.style.transform = "translateX(0)";
-        setTabScrollThumb(
-          (prev2) => prev2.scrollable ? { widthPercent: 100, leftPercent: 0, scrollable: false } : prev2
-        );
-        return;
-      }
-      const activeIndex = tabs.findIndex((tab) => tab.id === activeTabId);
-      if (activeIndex === -1) return;
-      const activeButton = tabRefs.current[activeIndex];
-      if (!activeButton) return;
-      const wrapperRect = tabsWrapperRef.current.getBoundingClientRect();
-      const buttonRect = activeButton.getBoundingClientRect();
-      const width = buttonRect.width;
-      const left = buttonRect.left - wrapperRect.left;
-      indicatorRef.current.style.width = `${width}px`;
-      indicatorRef.current.style.transform = `translateX(${left}px)`;
-      updateTabScrollThumb();
-    }, [activeTabId, tabs, updateTabScrollThumb]);
-    o__namespace.useEffect(() => {
-      updateMobileIndicator();
-    }, [updateMobileIndicator]);
+    const tabsContainerRef = o__namespace.useRef(null);
     o__namespace.useEffect(() => {
-      if (typeof window === "undefined") return;
-      const handleResize = () => updateMobileIndicator();
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }, [updateMobileIndicator]);
-    o__namespace.useEffect(() => {
-      const scrollEl = scrollContainerRef.current;
-      if (!scrollEl) return;
-      const handleScroll = () => {
-        updateMobileIndicator();
-        updateTabScrollThumb();
+      const container = tabsContainerRef.current;
+      if (!container) return;
+      const isMobile = window.innerWidth <= 768;
+      if (!isMobile) return;
+      const forceScrollbar = () => {
+        if (container.scrollWidth > container.clientWidth) {
+          container.scrollTop = 1;
+          container.scrollTop = 0;
+          container.scrollLeft = 1;
+          container.scrollLeft = 0;
+        }
       };
-      scrollEl.addEventListener("scroll", handleScroll, { passive: true });
-      return () => scrollEl.removeEventListener("scroll", handleScroll);
-    }, [updateMobileIndicator, updateTabScrollThumb]);
-    o__namespace.useEffect(() => {
-      if (isMobile) {
-        updateTabScrollThumb();
-      }
-    }, [isMobile, updateTabScrollThumb, tabs.length]);
-    o__namespace.useEffect(() => {
-      if (typeof window === "undefined") return;
-      const media = window.matchMedia("(max-width: 768px)");
-      const setMatch = () => setIsMobile(media.matches);
-      setMatch();
-      media.addEventListener("change", setMatch);
-      return () => media.removeEventListener("change", setMatch);
-    }, []);
+      setTimeout(forceScrollbar, 100);
+      window.addEventListener("resize", forceScrollbar);
+      return () => window.removeEventListener("resize", forceScrollbar);
+    }, [tabs]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: cn("w-full font-normal flex flex-col gap-3 md:flex-row md:items-center md:justify-between", className),
+        className: cn(
+          "w-full font-normal",
+          "flex flex-col-reverse gap-3",
+          "md:flex-row md:items-center md:justify-between",
+          className
+        ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              ref: tabsWrapperRef,
+              ref: tabsContainerRef,
               className: cn(
-                "relative flex w-full min-w-0 flex-col",
-                "max-[768px]:gap-0",
-                "max-[768px]:order-0",
-                "md:flex-row md:items-center md:justify-between"
+                "flex items-center border-b border-white/10",
+                "overflow-x-auto md:overflow-visible",
+                "[-webkit-overflow-scrolling:touch]",
+                "[scroll-behavior:smooth]",
+                "[touch-action:pan-x]",
+                "md:border-b-0"
               ),
-              style: isMobile ? { gap: 0 } : void 0,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+              style: { WebkitTapHighlightColor: "transparent" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
+                const active = tab.id === activeTabId;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
                   {
-                    ref: scrollContainerRef,
+                    type: "button",
+                    onClick: () => onTabChange?.(tab.id),
                     className: cn(
-                      "flex w-full min-w-0 items-center",
-                      "overflow-x-auto md:overflow-visible",
-                      "[-webkit-overflow-scrolling:touch]",
-                      "[scrollbar-width:none]",
-                      "[scroll-behavior:smooth]",
-                      "[touch-action:pan-x]",
-                      "md:border-b md:border-white/10"
+                      "relative whitespace-nowrap",
+                      "px-6 py-4",
+                      "font-normal",
+                      "transition-colors",
+                      "max-[768px]:px-[1.2rem] max-[768px]:py-[0.8rem]",
+                      "max-[480px]:px-4 max-[480px]:py-[0.7rem] max-[480px]:text-[0.9rem]",
+                      active ? "font-semibold text-[var(--color-accent,#e6c87e)]" : "text-white/60 hover:text-white"
                     ),
-                    style: { WebkitTapHighlightColor: "transparent" },
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-max gap-2 lg:gap-4", children: tabs.map((tab, index) => {
-                      const active = tab.id === activeTabId;
-                      return /* @__PURE__ */ jsxRuntime.jsxs(
-                        "button",
-                        {
-                          ref: (node2) => {
-                            tabRefs.current[index] = node2;
-                          },
-                          type: "button",
-                          onClick: () => onTabChange?.(tab.id),
-                          className: cn(
-                            "relative whitespace-nowrap",
-                            "px-5 py-4 lg:px-6",
-                            "text-[16px]",
-                            "font-medium",
-                            "transition-colors",
-                            "max-[768px]:rounded-full max-[768px]:px-5 max-[768px]:py-3",
-                            "max-[768px]:text-[15px]",
-                            "max-[480px]:px-4 max-[480px]:py-[0.75rem] max-[480px]:text-sm",
-                            active ? "font-semibold text-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#f1d27a)]" : "text-white/65 hover:text-white"
-                          ),
-                          style: {
-                            borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
-                            minWidth: "80px",
-                            touchAction: "manipulation"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                              tab.id === "trade" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden h-4 w-4 items-center justify-center rounded-full bg-white/10 text-[11px] text-[var(--color-accent,#e6c87e)] max-[768px]:inline-flex", children: "\u21C5" }) : null,
-                              tab.label
-                            ] }),
-                            tab.hasNotification ? /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                className: "absolute right-[10px] top-[10px] h-2 w-2 rounded-full animate-pulse",
-                                style: {
-                                  backgroundColor: tab.notificationColor ?? "#f6465d",
-                                  boxShadow: "0 0 0 0 rgba(246, 70, 93, 0.7)"
-                                }
-                              }
-                            ) : null
-                          ]
-                        },
-                        tab.id
-                      );
-                    }) })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none relative hidden h-[3px] w-full min-w-0 overflow-hidden rounded-full bg-white/10 max-[768px]:block", style: { marginBottom: "1px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    ref: indicatorRef,
-                    className: "absolute left-0 top-0 block h-full rounded-full bg-[var(--color-accent,#e6c87e)] transition-all duration-300 ease-out"
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
                     style: {
-                      display: isMobile ? "block" : "none",
-                      height: "8px",
-                      width: "100%",
-                      borderRadius: "999px",
-                      background: "rgba(18,19,22,0.85)",
-                      marginTop: "0",
-                      position: "relative"
+                      borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
+                      minWidth: "80px",
+                      touchAction: "manipulation"
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: 0,
-                          left: `${tabScrollThumb.leftPercent}%`,
-                          height: "100%",
-                          borderRadius: "999px",
-                          background: "rgba(92,94,102,0.85)",
-                          width: `${tabScrollThumb.widthPercent}%`,
-                          transition: "left 0.2s ease-out, width 0.2s ease-out, opacity 0.2s ease-out",
-                          opacity: tabScrollThumb.scrollable ? 1 : 0.25
+                    children: [
+                      tab.label,
+                      tab.hasNotification ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: "absolute right-[10px] top-[10px] h-2 w-2 rounded-full animate-pulse",
+                          style: {
+                            backgroundColor: tab.notificationColor ?? "#f6465d",
+                            boxShadow: "0 0 0 0 rgba(246, 70, 93, 0.7)"
+                          }
                         }
-                      }
-                    )
-                  }
-                )
-              ]
+                      ) : null
+                    ]
+                  },
+                  tab.id
+                );
+              }) })
             }
           ),
           actions != null && actions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "flex items-center gap-[4px] md:gap-[10px]",
-                "justify-center md:justify-end",
+                "flex items-center gap-[10px]",
                 "overflow-x-auto md:overflow-visible",
                 "[scrollbar-width:none]",
-                "max-[768px]:w-full max-[768px]:pb-2 max-[768px]:mb-2"
+                "md:justify-end",
+                "max-[768px]:w-full max-[768px]:justify-center max-[768px]:pb-2 max-[768px]:mb-4"
               ),
-              style: actionContainerStyle,
               children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -5384,14 +5240,14 @@ var PropertySubheader = o__namespace.forwardRef(
                   onClick: action.onClick,
                   className: cn(
                     "flex shrink-0 items-center gap-[5px] whitespace-nowrap",
-                    "rounded-[6px]",
-                    "border border-white/15",
+                    "rounded",
+                    "border border-white/10",
                     "bg-transparent",
-                    "px-3.5 py-1.5 text-[14px] font-medium",
+                    "px-3 py-1.5 text-[14px] font-normal",
                     "transition-all",
+                    "max-[768px]:px-2.5 max-[768px]:py-[5px] max-[768px]:text-[13px]",
                     "hover:bg-white/5 hover:border-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#e6c87e)]"
                   ),
-                  style: actionButtonStyle,
                   children: [
                     action.icon,
                     action.label