@loafmarkets/ui 0.1.6 → 0.1.7

package/dist/index.mjs

@@ -5628,7 +5628,394 @@ var PropertySubheader = o.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
+var PropertyCompareBar = o.forwardRef(
+  ({
+    className,
+    addresses,
+    selectedAddressId,
+    onSelectAddress,
+    propertyValue,
+    propertyValueVariant = "classic",
+    price,
+    ...props
+  }, ref) => {
+    const normalizedAddresses = o.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] = o.useState(
+      () => isControlled ? void 0 : firstAddressId
+    );
+    const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
+    o.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] = o.useState(false);
+    const dropdownRef = o.useRef(null);
+    o.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 handleAddressSelect = (addressId) => {
+      if (!isControlled) {
+        setInternalSelectedId(addressId);
+      }
+      onSelectAddress?.(addressId);
+      setIsDropdownOpen(false);
+    };
+    const propertyValueLabel = propertyValue?.label ?? "Property Value";
+    const propertyValueCurrency = propertyValue?.currencySymbol ?? "$";
+    const propertyValueFormat = propertyValue?.formatOptions ?? {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    };
+    const formattedPropertyValue = propertyValue == null ? null : `${propertyValueCurrency}${propertyValue.value.toLocaleString(
+      void 0,
+      propertyValueFormat
+    )}`;
+    const formattedPropertyChange = propertyValue?.change == null ? null : `${propertyValue.change >= 0 ? "+" : "-"}${propertyValueCurrency}${Math.abs(
+      propertyValue.change
+    ).toLocaleString(void 0, propertyValueFormat)}`;
+    const priceCurrency = price?.currencySymbol ?? "$";
+    const priceFormat = price?.formatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    const pricePercentFormat = price?.percentFormatOptions ?? { minimumFractionDigits: 2, maximumFractionDigits: 2 };
+    const formattedPriceValue = price == null ? null : `${priceCurrency}${price.value.toLocaleString(void 0, priceFormat)}`;
+    const formattedPriceChange = price?.change == null ? null : `${price.change >= 0 ? "+" : "-"}${priceCurrency}${Math.abs(price.change).toLocaleString(
+      void 0,
+      priceFormat
+    )}`;
+    const formattedPricePercent = price?.changePercent == null ? null : `${price.changePercent >= 0 ? "+" : "-"}${Math.abs(price.changePercent).toLocaleString(
+      void 0,
+      pricePercentFormat
+    )}%`;
+    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(PriceBlock2, { $variant: propertyValueVariant, children: [
+      /* @__PURE__ */ jsx(PriceAmount, { children: formattedPriceValue }),
+      formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxs(
+        PriceChange,
+        {
+          $isPositive: price?.change != null ? price.change >= 0 : price?.changePercent != null ? price.changePercent >= 0 : void 0,
+          children: [
+            formattedPriceChange ? /* @__PURE__ */ jsx("span", { children: formattedPriceChange }) : null,
+            formattedPricePercent ? /* @__PURE__ */ jsx("span", { children: formattedPricePercent }) : null
+          ]
+        }
+      ) : null
+    ] }) : null;
+    const propertyValueContent = formattedPropertyValue ? /* @__PURE__ */ jsxs(PropertyValueBlock, { $variant: propertyValueVariant, children: [
+      /* @__PURE__ */ jsx(PropertyValueLabel, { children: propertyValueLabel }),
+      /* @__PURE__ */ jsx(PropertyValueAmount, { children: formattedPropertyValue }),
+      formattedPropertyChange ? /* @__PURE__ */ jsx(PropertyValueChange, { $isPositive: propertyValue?.change != null ? propertyValue.change >= 0 : void 0, children: formattedPropertyChange }) : null
+    ] }) : null;
+    return /* @__PURE__ */ jsxs(PropertySelectorContainer, { ref, className, $variant: propertyValueVariant, ...props, children: [
+      /* @__PURE__ */ jsxs(PropertySelector, { ref: dropdownRef, onClick: () => hasAddresses && setIsDropdownOpen((prev2) => !prev2), children: [
+        /* @__PURE__ */ jsxs(PropertyAddress, { children: [
+          selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available",
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "dropdown-icon",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              style: { transform: isDropdownOpen ? "rotate(180deg)" : void 0 },
+              children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5H7z" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(PropertySelectorDropdown, { $isOpen: isDropdownOpen && hasAddresses, children: normalizedAddresses.map((option) => /* @__PURE__ */ jsx(
+          PropertySelectorOption,
+          {
+            onClick: (event) => {
+              event.stopPropagation();
+              handleAddressSelect(option.id);
+            },
+            children: /* @__PURE__ */ jsx(PropertySelectorName, { children: option.label })
+          },
+          option.id
+        )) })
+      ] }),
+      propertyValueVariant === "pill" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        priceContent,
+        propertyValueContent
+      ] }) : propertyValueContent
+    ] });
+  }
+);
+PropertyCompareBar.displayName = "PropertyCompareBar";
+var PropertySelectorContainer = at.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background-color: ${({ $variant }) => $variant === "pill" ? "#0f0f0f" : "rgba(30, 32, 38, 0.95)"};
+  border: ${({ $variant }) => $variant === "pill" ? "1px solid rgba(255, 255, 255, 0.15)" : "none"};
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: var(--color-text, #f8f9fa);
+  font-family: var(--font-family, "Inter", sans-serif);
+
+  @media (max-width: 1024px) {
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  @media (max-width: 768px) {
+    border-radius: 0;
+    margin-top: 0;
+    padding-top: 0.5rem;
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+
+    ${({ $variant }) => $variant === "pill" ? rt`
+            display: grid;
+            grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1fr);
+            gap: 0.35rem;
+            align-items: center;
+
+            > *:nth-child(1) {
+              width: 100%;
+            }
+
+            > *:nth-child(2) {
+              justify-self: center;
+              width: 100%;
+            }
+
+            > *:nth-child(3) {
+              justify-self: end;
+              text-align: right;
+            }
+          ` : rt`
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.5rem;
+          `};
+  }
+`;
+var PropertySelector = at.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  flex: 1;
+
+  &:hover {
+    .dropdown-icon {
+      transform: translateY(2px);
+    }
+  }
+`;
+var PropertyAddress = at.div`
+  font-size: 1.125rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit;
+
+  svg {
+    transition: transform 0.2s;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.2rem;
+    font-size: 1rem;
+    line-height: 1.2;
+    white-space: normal;
+  }
+`;
+var PropertySelectorDropdown = at.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--color-card, #1f232b);
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  overflow: hidden;
+  display: ${(props) => props.$isOpen ? "block" : "none"};
+`;
+var PropertySelectorOption = at.div`
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+var PropertySelectorName = at.div`
+  font-weight: 600;
+`;
+var PropertyValueBlock = at.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 1rem;
+  white-space: nowrap;
+
+  ${({ $variant }) => $variant === "card" && rt`
+      margin-left: auto;
+      flex-direction: row;
+      align-items: center;
+      min-width: 220px;
+      border: none;
+      background: rgba(30, 32, 38, 0.95);
+      border-radius: 14px;
+      padding: 0.9rem 1.25rem;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      gap: 0.85rem;
+      justify-content: flex-end;
+
+      @media (max-width: 600px) {
+        margin: 0;
+        width: auto;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.125rem;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        box-shadow: none;
+      }
+    `}
+
+  ${({ $variant }) => $variant === "pill" && rt`
+      margin-left: auto;
+      margin-right: 1rem;
+      background: #191919;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      padding: 0.5rem 1rem;
+      gap: 1rem;
+      align-items: center;
+
+      @media (max-width: 600px) {
+        margin: 0;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-end;
+        text-align: right;
+        gap: 0.2rem;
+        padding: 0;
+        background: transparent;
+        border-radius: 0;
+        border: none;
+        white-space: normal;
+      }
+    `}
+
+  @media (max-width: 600px) {
+    margin: 0;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.2rem;
+    white-space: normal;
+  }
+`;
+var PropertyValueLabel = at.span`
+  font-size: 0.7rem;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  @media (max-width: 600px) {
+    font-size: 0.6rem;
+    letter-spacing: 0.4px;
+  }
+`;
+var PropertyValueAmount = at.span`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+
+  @media (max-width: 600px) {
+    font-size: 0.95rem;
+  }
+`;
+var PropertyValueChange = at.span`
+  font-size: 0.75rem;
+  font-weight: 500;
+  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)"};
+
+  @media (max-width: 600px) {
+    font-size: 0.65rem;
+  }
+`;
+var PriceBlock2 = at.div`
+  display: none;
+
+  ${({ $variant }) => $variant === "pill" && rt`
+      @media (max-width: 600px) {
+        display: flex;
+        flex: none;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.15rem;
+        width: 100%;
+      }
+    `}
+`;
+var PriceAmount = at.span`
+  font-size: 1.6rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.2px;
+`;
+var PriceChange = at.span`
+  font-size: 0.85rem;
+  font-weight: 500;
+  display: inline-flex;
+  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)"};
+`;
 
-export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants };
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, MobileTradeNav, Orderbook, PortfolioSummary, PriceChart, PropertyCompareBar, PropertyHeroHeader, PropertyNewsUpdates, PropertySubheader, PropertyTour, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map