npm - @loafmarkets/ui - Versions diffs - 0.0.7 → 0.0.9 - Mend

@loafmarkets/ui 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -207,10 +207,12 @@ type YourOrder = {
 type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
     orders: YourOrder[];
+    renderOrderActions?: (order: YourOrder) => React.ReactNode;
 };
 declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
     orders: YourOrder[];
+    renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 type PriceChartRange = "1D" | "1W" | "1M" | "3M" | "1Y";

package/dist/index.d.ts CHANGED Viewed

@@ -207,10 +207,12 @@ type YourOrder = {
 type YourOrdersProps = React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
     orders: YourOrder[];
+    renderOrderActions?: (order: YourOrder) => React.ReactNode;
 };
 declare const YourOrders: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     title?: string;
     orders: YourOrder[];
+    renderOrderActions?: (order: YourOrder) => React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
 type PriceChartRange = "1D" | "1W" | "1M" | "3M" | "1Y";

package/dist/index.js CHANGED Viewed

@@ -1576,7 +1576,7 @@ var formatPercent = (value, fractionDigits = 2) => {
   return `${value.toFixed(fractionDigits)}%`;
 };
 var YourOrders = React5__namespace.forwardRef(
-  ({ className, title = "Portfolio Holdings (Demo)", orders, ...props }, ref) => {
+  ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
     const [activeTab, setActiveTab] = React5__namespace.useState("portfolio");
     const hasOrders = Array.isArray(orders) && orders.length > 0;
     const renderPortfolio = () => {
@@ -1608,7 +1608,7 @@ var YourOrders = React5__namespace.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__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+          return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "1rem", alignItems: "center" }, children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.15rem" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.9rem", fontWeight: 500 }, children: propertyName }),
@@ -1679,7 +1679,8 @@ var YourOrders = React5__namespace.forwardRef(
                   ] }) : null
                 ]
               }
-            )
+            ),
+            renderOrderActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: renderOrderActions(order) }) : null
           ] }, order.id);
         }) })
       ] });
@@ -1951,12 +1952,37 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const tradeHoverColor = "#f5dd9a";
     const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.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__ */ jsxRuntime.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,
@@ -1966,50 +1992,45 @@ var PropertyHeroHeader = React5__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: location }),
-                price == null ? null : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-                        "span",
-                        {
-                          className: cn(
-                            "ml-2 flex items-center text-[0.875rem] font-medium",
-                            isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: locationStyle, children: location }),
+                  price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { style: priceBlockStyle, children: [
+                    formatPrice2(price, currencySymbol),
+                    changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "ml-2 flex items-center text-[0.875rem] font-medium",
+                          isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
+                            }
                           ),
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
                 beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -2036,7 +2057,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
                 propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyTypeLabel })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                 "button",
                 {