@loafmarkets/ui 0.0.4 → 0.0.5

package/dist/index.d.mts

@@ -160,6 +160,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 +295,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

@@ -160,6 +160,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 +295,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

@@ -1249,6 +1249,143 @@ 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 rounded-[14px] border border-[#1a1f2b] bg-[#0f131c] px-4 py-3 text-white shadow-[0_18px_45px_rgba(0,0,0,0.55)] md:flex-row md:items-center md:gap-4",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", ref: dropdownRef, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: !hasAddresses,
+                onClick: () => setIsDropdownOpen((prev) => !prev),
+                className: cn(
+                  "flex h-[42px] w-full items-center justify-between rounded-[10px] border border-[#202632] bg-[#181c27] px-4 text-left text-[15px] font-semibold text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition hover:bg-[#1d222e] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent,#e6c87e)]",
+                  !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-[#1f2431] bg-[#161925] py-1 shadow-[0_25px_55px_rgba(0,0,0,0.65)] backdrop-blur-sm", 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 w-full 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)] shadow-[0_10px_25px_rgba(0,0,0,0.45)] transition hover:bg-[rgba(230,200,126,0.08)] md:w-max",
+              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 +1992,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;