@loafmarkets/ui 0.0.7 → 0.0.9

package/dist/index.mjs

@@ -1554,7 +1554,7 @@ var formatPercent = (value, fractionDigits = 2) => {
   return `${value.toFixed(fractionDigits)}%`;
 };
 var YourOrders = React5.forwardRef(
-  ({ className, title = "Portfolio Holdings (Demo)", orders, ...props }, ref) => {
+  ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
     const [activeTab, setActiveTab] = React5.useState("portfolio");
     const hasOrders = Array.isArray(orders) && orders.length > 0;
     const renderPortfolio = () => {
@@ -1586,7 +1586,7 @@ var YourOrders = React5.forwardRef(
           const currentPrice = order.currentPrice ?? order.price;
           const priceChangePercent = order.priceChangePercent ?? order.pnlPercent;
           const priceChangePositive = order.priceChangePositive ?? (priceChangePercent != null ? priceChangePercent >= 0 : void 0);
-          return /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+          return /* @__PURE__ */ jsxs("div", { style: { ...rowStyle, gridTemplateColumns: renderOrderActions ? "1.8fr 0.8fr 0.7fr 0.8fr 0.8fr 0.9fr 0.8fr" : "1.8fr 0.9fr 0.7fr 0.8fr 0.8fr 1fr" }, children: [
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.15rem" }, children: [
                 /* @__PURE__ */ jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500 }, children: propertyName }),
@@ -1657,7 +1657,8 @@ var YourOrders = React5.forwardRef(
                   ] }) : null
                 ]
               }
-            )
+            ),
+            renderOrderActions ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions(order) }) : null
           ] }, order.id);
         }) })
       ] });
@@ -1929,12 +1930,37 @@ var PropertyHeroHeader = React5.forwardRef(
     const tradeHoverColor = "#f5dd9a";
     const [isTradeInteracting, setIsTradeInteracting] = React5.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
+    const headingStyle = {
+      fontSize: "2.5rem",
+      marginBottom: "0.5rem",
+      color: "#ffffff",
+      textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
+      fontWeight: 600,
+      lineHeight: 1.2
+    };
+    const priceBlockStyle = {
+      fontSize: "1.25rem",
+      fontWeight: 600,
+      color: "var(--color-accent, #f0b90b)",
+      marginLeft: "1rem",
+      paddingLeft: "1rem",
+      borderLeft: "1px solid rgba(255, 255, 255, 0.3)",
+      display: "flex",
+      alignItems: "center"
+    };
+    const locationStyle = {
+      fontSize: "1.25rem",
+      color: "rgba(255, 255, 255, 0.9)",
+      marginBottom: "0.75rem",
+      display: "flex",
+      alignItems: "center"
+    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
-          "relative w-full overflow-hidden bg-black h-[500px] rounded-[12px] max-[768px]:h-[400px] max-[768px]:rounded-lg max-[480px]:h-[350px] max-[480px]:rounded-md",
+          "relative w-[1200px] h-[500px] overflow-hidden bg-black rounded-[12px]",
           className
         ),
         ...props,
@@ -1944,50 +1970,45 @@ var PropertyHeroHeader = React5.forwardRef(
             {
               src: imageUrl,
               alt: imageAlt ?? name,
-              className: "h-full w-full object-cover object-center block max-w-none min-w-[120%] min-h-[120%]",
-              style: { transform: "scale(1.0)", transformOrigin: "center" }
+              className: "absolute inset-0 block h-full w-full object-cover object-center",
+              style: { transform: "scale(1.20)", transformOrigin: "center" }
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 flex w-full items-end justify-between p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "inline-block w-auto max-w-[70%] rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:max-w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2", children: [
-              /* @__PURE__ */ jsx("h1", { className: "mb-2 text-[2.5rem] leading-tight text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.3)] max-[768px]:mb-[0.4rem] max-[768px]:text-[2rem] max-[480px]:mb-[0.3rem] max-[480px]:text-[1.75rem]", children: name }),
-              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center text-[1.25rem] text-white/90 max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
-                /* @__PURE__ */ jsx("span", { children: location }),
-                price == null ? null : /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    className: "ml-4 flex items-center border-l border-white/30 pl-4 font-semibold",
-                    style: { color: "var(--color-accent, #e6c87e)" },
-                    children: [
-                      formatPrice2(price, currencySymbol),
-                      changePercent == null ? null : /* @__PURE__ */ jsxs(
-                        "span",
-                        {
-                          className: cn(
-                            "ml-2 flex items-center text-[0.875rem] font-medium",
-                            isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "inline-block w-full rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2 min-[769px]:flex-1 min-[769px]:min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
+                /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
+                  /* @__PURE__ */ jsx("span", { style: locationStyle, children: location }),
+                  price == null ? null : /* @__PURE__ */ jsxs("span", { style: priceBlockStyle, children: [
+                    formatPrice2(price, currencySymbol),
+                    changePercent == null ? null : /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "ml-2 flex items-center text-[0.875rem] font-medium",
+                          isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "svg",
+                            {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              width: "12",
+                              height: "12",
+                              viewBox: "0 0 24 24",
+                              fill: "currentColor",
+                              className: "mr-[0.15rem]",
+                              children: /* @__PURE__ */ jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
+                            }
                           ),
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "svg",
-                              {
-                                xmlns: "http://www.w3.org/2000/svg",
-                                width: "12",
-                                height: "12",
-                                viewBox: "0 0 24 24",
-                                fill: "currentColor",
-                                className: "mr-[0.15rem]",
-                                children: /* @__PURE__ */ jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
-                              }
-                            ),
-                            Math.abs(changePercent).toFixed(2),
-                            "%"
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
+                          Math.abs(changePercent).toFixed(2),
+                          "%"
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
                 beds == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -2014,7 +2035,7 @@ var PropertyHeroHeader = React5.forwardRef(
                 propertyTypeLabel == null ? null : /* @__PURE__ */ jsx("div", { children: propertyTypeLabel })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {