@loafmarkets/ui 0.0.4 → 0.0.6

package/dist/index.d.mts

@@ -116,9 +116,10 @@ interface HousePositionSliderProps extends React.HTMLAttributes<HTMLDivElement>
     pendingOrders?: HousePositionPendingOrder[];
     defaultOrderType?: "market" | "limit";
     orderbook?: HousePositionOrderbook;
+    ownershipPercentOverride?: number;
     onConfirmOrder?: (payload: HousePositionSliderOrderPayload) => void;
 }
-declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, orderbook, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
+declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, orderbook, ownershipPercentOverride, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
 
 type PropertyTourProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> & {
     title: string;
@@ -160,6 +161,27 @@ interface PropertyNewsUpdatesProps extends React.HTMLAttributes<HTMLDivElement>
 }
 declare const PropertyNewsUpdates: React.ForwardRefExoticComponent<PropertyNewsUpdatesProps & React.RefAttributes<HTMLDivElement>>;
 
+type PropertyAddressOption = {
+    id: string;
+    label: string;
+};
+type PropertyCompareBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    compareLabel?: string;
+    onCompareClick?: () => void;
+    compareIcon?: React.ReactNode;
+};
+declare const PropertyCompareBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    compareLabel?: string;
+    onCompareClick?: () => void;
+    compareIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
 type YourOrderSide = "buy" | "sell";
 type YourOrder = {
     id: string;
@@ -274,4 +296,4 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyCompareBar, type PropertyCompareBarProps, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.d.ts

@@ -116,9 +116,10 @@ interface HousePositionSliderProps extends React.HTMLAttributes<HTMLDivElement>
     pendingOrders?: HousePositionPendingOrder[];
     defaultOrderType?: "market" | "limit";
     orderbook?: HousePositionOrderbook;
+    ownershipPercentOverride?: number;
     onConfirmOrder?: (payload: HousePositionSliderOrderPayload) => void;
 }
-declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, orderbook, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
+declare function HousePositionSlider({ tokenId, tokenSymbol, totalTokens, currentPrice, availableCash, tokensHeld, pendingOrders, defaultOrderType, orderbook, ownershipPercentOverride, onConfirmOrder, className, ...props }: HousePositionSliderProps): react_jsx_runtime.JSX.Element;
 
 type PropertyTourProps = Omit<React.ComponentPropsWithoutRef<typeof Card>, "title"> & {
     title: string;
@@ -160,6 +161,27 @@ interface PropertyNewsUpdatesProps extends React.HTMLAttributes<HTMLDivElement>
 }
 declare const PropertyNewsUpdates: React.ForwardRefExoticComponent<PropertyNewsUpdatesProps & React.RefAttributes<HTMLDivElement>>;
 
+type PropertyAddressOption = {
+    id: string;
+    label: string;
+};
+type PropertyCompareBarProps = React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    compareLabel?: string;
+    onCompareClick?: () => void;
+    compareIcon?: React.ReactNode;
+};
+declare const PropertyCompareBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    addresses: (PropertyAddressOption | string)[];
+    selectedAddressId?: string;
+    onSelectAddress?: (addressId: string) => void;
+    compareLabel?: string;
+    onCompareClick?: () => void;
+    compareIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+
 type YourOrderSide = "buy" | "sell";
 type YourOrder = {
     id: string;
@@ -274,4 +296,4 @@ declare const PropertySubheader: React.ForwardRefExoticComponent<React.HTMLAttri
     actions?: PropertySubheaderAction[];
 } & React.RefAttributes<HTMLDivElement>>;
 
-export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type HousePositionOrderbook, type HousePositionPendingOrder, HousePositionSlider, type HousePositionSliderOrderPayload, type HousePositionSliderProps, Orderbook, type OrderbookLevel, type OrderbookProps, type OrderbookSide, type OrderbookTrade, PortfolioSummary, type PortfolioSummaryProps, PriceChart, type PriceChartCandle, type PriceChartProps, type PriceChartRange, type PropertyAddressOption, PropertyCompareBar, type PropertyCompareBarProps, PropertyHeroHeader, type PropertyHeroHeaderProps, type PropertyNewsItem, type PropertyNewsType, PropertyNewsUpdates, type PropertyNewsUpdatesProps, PropertySubheader, type PropertySubheaderAction, type PropertySubheaderProps, type PropertySubheaderTab, PropertyTour, type PropertyTourProps, type YourOrder, type YourOrderSide, YourOrders, type YourOrdersProps, badgeVariants, buttonVariants };

package/dist/index.js

@@ -304,6 +304,7 @@ function HousePositionSlider({
   pendingOrders = [],
   defaultOrderType = "market",
   orderbook,
+  ownershipPercentOverride,
   onConfirmOrder,
   className,
   ...props
@@ -314,6 +315,7 @@ function HousePositionSlider({
   const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
   const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
   const [isDragging, setIsDragging] = React5__namespace.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = React5__namespace.useState(null);
   const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
   const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
   const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
@@ -335,9 +337,8 @@ function HousePositionSlider({
   const effectiveAvailableCash = Math.max(0, availableCash - pendingBuyValue);
   const effectiveTokensHeld = Math.max(0, tokensHeld - pendingSellTokens);
   const holdingsValue = tokensHeld * effectivePrice;
-  const sliderHoldingsValue = effectiveTokensHeld * effectivePrice;
-  const sliderTotalCapacity = sliderHoldingsValue + effectiveAvailableCash;
-  const baselinePct = sliderTotalCapacity <= 0 ? 0 : sliderHoldingsValue / sliderTotalCapacity * 100;
+  const safeTotalTokens = totalTokens > 0 ? totalTokens : 1;
+  const baselineOwnershipActual = clamp(effectiveTokensHeld / safeTotalTokens * 100, 0, 100);
   let deltaTokens = 0;
   let deltaValue = 0;
   let marketAvgPrice = null;
@@ -383,29 +384,21 @@ function HousePositionSlider({
   }
   targetTokens = tokensHeld + deltaTokens;
   targetValue = targetTokens * effectivePrice;
-  const plannedDeltaValue = (() => {
-    if (orderMode === "buy") {
-      if (buyTrackingMode === "dollars") {
-        const notional = Math.min(Math.max(0, deltaDollars), effectiveAvailableCash);
-        return notional;
-      }
-      const tokensPlanned = Math.max(0, deltaTokensBuy);
-      const referencePrice = orderType === "market" ? currentPrice || limitPriceSafe : limitPriceSafe;
-      return Math.min(tokensPlanned * referencePrice, effectiveAvailableCash);
-    }
-    if (orderMode === "sell") {
-      const tokensToSell = Math.abs(Math.min(0, deltaTokensSell));
-      const sellValue = tokensToSell * effectivePrice;
-      return -Math.min(sellValue, sliderHoldingsValue);
-    }
-    return 0;
-  })();
-  const sliderTargetValue = clamp(sliderHoldingsValue + plannedDeltaValue, 0, sliderTotalCapacity);
-  const targetPct = sliderTotalCapacity <= 0 ? 0 : sliderTargetValue / sliderTotalCapacity * 100;
+  const sliderTargetTokens = clamp(effectiveTokensHeld + deltaTokens, 0, safeTotalTokens);
+  const normalizedTargetPct = sliderTargetTokens / safeTotalTokens * 100;
   const isIncrease = orderMode === "buy";
   const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
-  const currentOwnership = totalTokens <= 0 ? 0 : tokensHeld / totalTokens * 100;
-  const targetOwnership = totalTokens <= 0 ? 0 : targetTokens / totalTokens * 100;
+  const currentOwnership = totalTokens <= 0 ? 0 : clamp(tokensHeld / totalTokens * 100, 0, 100);
+  const targetOwnership = totalTokens <= 0 ? 0 : clamp(targetTokens / totalTokens * 100, 0, 100);
+  const ownershipOverrideValue = typeof ownershipPercentOverride === "number" && Number.isFinite(ownershipPercentOverride) ? clamp(ownershipPercentOverride, 0, 100) : null;
+  const ownershipShift = ownershipOverrideValue != null ? ownershipOverrideValue - baselineOwnershipActual : 0;
+  const baselinePct = clamp(ownershipOverrideValue ?? baselineOwnershipActual, 0, 100);
+  const impliedTargetPct = clamp(normalizedTargetPct + ownershipShift, 0, 100);
+  const displayTargetPct = visualTargetPct ?? impliedTargetPct;
+  const targetPct = displayTargetPct;
+  const displayCurrentOwnership = clamp(ownershipOverrideValue ?? currentOwnership, 0, 100);
+  const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
+  const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
   const resetOrder = React5__namespace.useCallback(() => {
     setOrderMode("none");
@@ -413,6 +406,7 @@ function HousePositionSlider({
     setDeltaDollars(0);
     setDeltaTokensBuy(0);
     setDeltaTokensSell(0);
+    setVisualTargetPct(null);
   }, []);
   const updateOrderFromTargetValue = React5__namespace.useCallback(
     (newTargetValue) => {
@@ -443,6 +437,7 @@ function HousePositionSlider({
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
       updateOrderFromTargetValue(newTargetTokens * effectivePrice);
+      setVisualTargetPct(nextOwnership);
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
@@ -475,12 +470,14 @@ function HousePositionSlider({
       const magnitude = Math.min(Math.abs(normalized), 1);
       if (magnitude < 0.02) {
         resetOrder();
+        setVisualTargetPct(null);
         return;
       }
       if (normalized > 0) {
         const notional = clamp(magnitude * effectiveAvailableCash, 0, effectiveAvailableCash);
         if (notional <= 0) {
           resetOrder();
+          setVisualTargetPct(null);
           return;
         }
         setOrderMode("buy");
@@ -488,12 +485,14 @@ function HousePositionSlider({
         setDeltaDollars(notional);
         setDeltaTokensBuy(0);
         setDeltaTokensSell(0);
+        setVisualTargetPct(clamp(pct, 0, 100));
         return;
       }
       if (normalized < 0) {
         const tokensToSell = clamp(magnitude * effectiveTokensHeld, 0, effectiveTokensHeld);
         if (tokensToSell <= 0) {
           resetOrder();
+          setVisualTargetPct(null);
           return;
         }
         setOrderMode("sell");
@@ -501,9 +500,11 @@ function HousePositionSlider({
         setDeltaTokensSell(-tokensToSell);
         setDeltaDollars(0);
         setDeltaTokensBuy(0);
+        setVisualTargetPct(clamp(pct, 0, 100));
         return;
       }
       resetOrder();
+      setVisualTargetPct(null);
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
@@ -666,19 +667,19 @@ function HousePositionSlider({
           " Ownership"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white", children: [
-          currentOwnership.toFixed(2),
+          displayCurrentOwnership.toFixed(2),
           "%",
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1.5 text-white/50", children: "\u2192" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "text",
-              value: ownershipInput || targetOwnership.toFixed(2),
+              value: ownershipInput || displayTargetOwnership.toFixed(2),
               onChange: (e) => {
                 const val = e.target.value;
                 if (val === "" || /^[0-9]*\.?[0-9]*$/.test(val)) setOwnershipInput(val);
               },
-              onFocus: () => setOwnershipInput(targetOwnership.toFixed(2)),
+              onFocus: () => setOwnershipInput(displayTargetOwnership.toFixed(2)),
               onBlur: () => {
                 const num = Number.parseFloat(ownershipInput);
                 if (Number.isFinite(num)) updateOrderFromOwnership(num);
@@ -689,7 +690,7 @@ function HousePositionSlider({
               },
               className: cn(
                 "w-[70px] rounded-[4px] border bg-white/10 px-2 py-1 text-right font-semibold outline-none",
-                targetOwnership >= currentOwnership ? "border-[rgba(14,203,129,0.3)] text-[#0ecb81] focus:border-[#0ecb81]" : "border-[rgba(246,70,93,0.3)] text-[#f6465d] focus:border-[#f6465d]"
+                displayTargetOwnership >= displayCurrentOwnership ? "border-[rgba(14,203,129,0.3)] text-[#0ecb81] focus:border-[#0ecb81]" : "border-[rgba(246,70,93,0.3)] text-[#f6465d] focus:border-[#f6465d]"
               )
             }
           )
@@ -1249,6 +1250,144 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
   }
 );
 PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
+var PropertyCompareBar = React5__namespace.forwardRef(
+  ({
+    className,
+    addresses,
+    selectedAddressId,
+    onSelectAddress,
+    compareLabel = "Compare",
+    onCompareClick,
+    compareIcon,
+    ...props
+  }, ref) => {
+    const normalizedAddresses = React5__namespace.useMemo(() => {
+      return addresses.map(
+        (option) => typeof option === "string" ? { id: option, label: option } : option
+      );
+    }, [addresses]);
+    const hasAddresses = normalizedAddresses.length > 0;
+    const firstAddressId = normalizedAddresses[0]?.id;
+    const isControlled = selectedAddressId !== void 0;
+    const [internalSelectedId, setInternalSelectedId] = React5__namespace.useState(
+      () => isControlled ? void 0 : firstAddressId
+    );
+    const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
+    React5__namespace.useEffect(() => {
+      if (!isControlled) {
+        setInternalSelectedId((current) => {
+          if (current != null && normalizedAddresses.some((option) => option.id === current)) {
+            return current;
+          }
+          return firstAddressId;
+        });
+      }
+    }, [firstAddressId, isControlled, normalizedAddresses]);
+    const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
+    const [isDropdownOpen, setIsDropdownOpen] = React5__namespace.useState(false);
+    const dropdownRef = React5__namespace.useRef(null);
+    React5__namespace.useEffect(() => {
+      if (!isDropdownOpen) return;
+      const handleClick = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsDropdownOpen(false);
+        }
+      };
+      const handleKey = (event) => {
+        if (event.key === "Escape") {
+          setIsDropdownOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClick);
+      document.addEventListener("keydown", handleKey);
+      return () => {
+        document.removeEventListener("mousedown", handleClick);
+        document.removeEventListener("keydown", handleKey);
+      };
+    }, [isDropdownOpen]);
+    const defaultCompareIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h7v7H4V4zm0 9h7v7H4v-7zm9-9h7v7h-7V4zm0 9h7v7h-7v-7z" }) });
+    const handleAddressSelect = (addressId) => {
+      if (!isControlled) {
+        setInternalSelectedId(addressId);
+      }
+      onSelectAddress?.(addressId);
+      setIsDropdownOpen(false);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-full flex-col gap-3 border border-white/10 px-4 py-3 text-white shadow-[0_18px_40px_rgba(0,0,0,0.55)] md:flex-row md:items-center md:justify-between md:gap-4",
+          className
+        ),
+        style: { borderRadius: "16px" },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-auto", ref: dropdownRef, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: !hasAddresses,
+                onClick: () => setIsDropdownOpen((prev) => !prev),
+                className: cn(
+                  "flex h-[42px] w-auto items-center gap-2 rounded-[12px] border border-transparent bg-transparent px-0 text-left text-[15px] font-semibold text-white transition hover:text-white/80 focus-visible:outline-none",
+                  !hasAddresses && "text-white/40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 flex items-center text-white/60 transition-transform", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      className: cn("transition-transform", isDropdownOpen && "rotate-180"),
+                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5H7z" })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            isDropdownOpen && hasAddresses ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-[calc(100%+8px)] z-20 w-full rounded-[12px] border border-white/10 py-1 shadow-[0_25px_55px_rgba(0,0,0,0.6)] bg-black", children: normalizedAddresses.map((option) => {
+              const active = option.id === resolvedSelectedId;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "flex w-full items-center px-4 py-2 text-left text-[14px] text-white/80 transition hover:bg-white/5 hover:text-white",
+                    active && "text-white"
+                  ),
+                  onClick: () => handleAddressSelect(option.id),
+                  children: option.label
+                },
+                option.id
+              );
+            }) }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "accentOutline",
+              size: "sm",
+              className: "flex items-center justify-center gap-2 rounded-[10px] border-[var(--color-accent,#e6c87e)] bg-transparent px-4 py-2 text-[14px] font-semibold text-[var(--color-accent,#e6c87e)] transition hover:bg-[rgba(230,200,126,0.08)] md:ml-auto",
+              onClick: onCompareClick,
+              disabled: !hasAddresses,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: compareIcon ?? defaultCompareIcon }),
+                compareLabel
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PropertyCompareBar.displayName = "PropertyCompareBar";
 var clampPct = (pct) => Math.min(100, Math.max(0, pct));
 var EditIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
@@ -1855,6 +1994,7 @@ exports.HousePositionSlider = HousePositionSlider;
 exports.Orderbook = Orderbook;
 exports.PortfolioSummary = PortfolioSummary;
 exports.PriceChart = PriceChart;
+exports.PropertyCompareBar = PropertyCompareBar;
 exports.PropertyHeroHeader = PropertyHeroHeader;
 exports.PropertyNewsUpdates = PropertyNewsUpdates;
 exports.PropertySubheader = PropertySubheader;