@giddaa-housing/ui 3.2.0 → 3.4.0

package/css/theme.css

@@ -141,6 +141,7 @@
 	--animate-accordion-up: accordion-up 0.2s ease-out;
 	--animate-sonar-glow: sonar-glow 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
 	--animate-round-sonar-glow: round-sonar-glow 1.5s ease-out infinite;
+	--animate-sonar-wave: sonar-wave 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
 	--animate-spin-slow: spin 3s linear infinite;
 }
 
@@ -175,6 +176,7 @@
 		--animate-bouncing-loader: none;
 		--animate-sonar-glow: none;
 		--animate-round-sonar-glow: none;
+		--animate-sonar-wave: none;
 		--animate-spin-slow: none;
 	}
 }
@@ -280,3 +282,21 @@
 		opacity: 0;
 	}
 }
+
+/* Drives `Sonar`. Spread rather than `transform: scale()` on purpose: spread
+   grows the ring by the same number of pixels on every side and traces the
+   element's own border-radius, so one keyframe fits a 8px dot and a wide
+   button alike. Scaling would expand a wide element far more horizontally
+   than vertically — which is why sonar-glow above needs its per-axis
+   --sonar-glow-scale-x/y knobs. */
+@keyframes sonar-wave {
+	from {
+		box-shadow: 0 0 0 0 currentColor;
+		opacity: 0.55;
+	}
+
+	to {
+		box-shadow: 0 0 0 var(--sonar-spread, 0.625rem) currentColor;
+		opacity: 0;
+	}
+}

package/dist/accordion.js

@@ -1,3 +1,4 @@
+"use client";
 import { ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";

package/dist/alert.js

@@ -3,7 +3,7 @@ import { t as cn } from "./cn-BI_4DMBf.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx
-const alertVariants = cva("grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-start gap-y-1 rounded-xl border-2 px-4 py-3.5 text-gdt-sm transition-[background-color,border-color,color,box-shadow] has-[>svg]:grid-cols-[1.25rem_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-current", {
+const alertVariants = cva("group/alert grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-start gap-y-1 rounded-xl border-2 px-4 py-3.5 text-gdt-sm transition-[background-color,border-color,color,box-shadow] has-[>svg]:grid-cols-[1.25rem_minmax(0,1fr)_auto] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-5 [&>svg]:text-current", {
 	variants: { variant: {
 		success: "border-status-success bg-surface-brand-subtle text-status-success",
 		info: "border-status-info bg-surface text-status-info",
@@ -33,14 +33,14 @@ function AlertTitle({ className, ...props }) {
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
-		className: cn("col-start-2 row-start-2 text-fg-secondary [&_p]:leading-relaxed", className),
+		className: cn("col-start-2 row-start-1 text-fg-secondary group-has-[[data-slot=alert-title]]/alert:row-start-2 [&_p]:leading-relaxed", className),
 		...props
 	});
 }
 function AlertActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-actions",
-		className: cn("col-start-2 row-start-3 mt-2 flex shrink-0 items-center gap-2 justify-self-start sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-[-0.125rem] sm:justify-self-end", className),
+		className: cn("col-start-2 row-start-2 mt-2 flex shrink-0 items-center gap-2 justify-self-start max-sm:group-has-[[data-slot=alert-title]]/alert:row-start-3 sm:col-start-3 sm:row-span-2 sm:row-start-1 sm:mt-[-0.125rem] sm:justify-self-end", className),
 		...props
 	});
 }

package/dist/badge.js

@@ -36,6 +36,11 @@ const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center j
 			false: ""
 		}
 	},
+	compoundVariants: [{
+		variant: "outline",
+		border: false,
+		class: "border-line"
+	}],
 	defaultVariants: {
 		variant: "default",
 		size: "md",

package/dist/button.js

@@ -22,8 +22,8 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
 			whatsapp: "bg-whatsapp-green text-black [&_svg]:text-white hover:brightness-95 active:brightness-90 data-focused:brightness-95 data-pressed:brightness-90",
 			"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand shadow-2 backdrop-blur-sm active:scale-[0.97] motion-reduce:active:scale-100",
-			"link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-			"link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
+			"link-brand": "border-transparent bg-transparent text-fg-brand hover:underline active:underline active:opacity-70",
+			"link-neutral": "border-transparent bg-transparent text-fg-secondary hover:underline active:underline active:opacity-70"
 		},
 		size: {
 			sm: "h-8 min-w-8 gap-2 px-3.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-4",
@@ -37,6 +37,10 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			"icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
 		}
 	},
+	compoundVariants: [{
+		variant: ["link-brand", "link-neutral"],
+		class: "h-auto min-h-0 w-auto min-w-0 shrink justify-start rounded-none px-0 py-0 text-left whitespace-normal underline-offset-4 active:not-aria-[haspopup]:translate-y-0"
+	}],
 	defaultVariants: {
 		variant: "primary",
 		size: "md"

package/dist/footer.d.ts

@@ -1,5 +1,6 @@
 import { n as InputSize } from "./input-CfoEJ8A6.js";
 import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/footer.d.ts
 type FooterRootProps = React.ComponentProps<"footer"> & {
@@ -20,10 +21,14 @@ declare function FooterSection({ className, ...props }: React.ComponentProps<"di
 declare function FooterSectionTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
 declare function FooterLinkList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function FooterLinkItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-type FooterLinkProps = useRender.ComponentProps<"a"> & {
+declare const footerLinkVariants: (props?: ({
+  variant?: "brand" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FooterLinkVariant = NonNullable<VariantProps<typeof footerLinkVariants>["variant"]>;
+type FooterLinkProps = useRender.ComponentProps<"a"> & VariantProps<typeof footerLinkVariants> & {
   showArrow?: boolean;
 };
-declare function FooterLink({ className, children, render, showArrow, ...props }: FooterLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function FooterLink({ className, children, render, showArrow, variant, ...props }: FooterLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function FooterContactGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterContact({ className, ...props }: React.ComponentProps<"address">): React.JSX.Element;
 declare function FooterContactTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
@@ -39,4 +44,4 @@ declare function FooterNewsletterControl({ className, children, size, ...props }
 declare function FooterBottom({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterLegalLinks({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 //#endregion
-export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, type FooterLinkProps, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, type FooterRootProps, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle };
+export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, type FooterLinkProps, type FooterLinkVariant, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, type FooterRootProps, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle, footerLinkVariants };

package/dist/footer.js

@@ -6,6 +6,7 @@ import { Input } from "./input.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
 //#region src/footer.tsx
 function FooterRoot({ className, containerClassName, children, ...props }) {
 	return /* @__PURE__ */ jsx("footer", {
@@ -117,18 +118,28 @@ function FooterLinkItem({ className, ...props }) {
 		...props
 	});
 }
-function FooterLink({ className, children, render, showArrow = false, ...props }) {
+const footerLinkVariants = cva("inline-flex items-center gap-gdt-sm underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", {
+	variants: { variant: {
+		default: "text-fg-secondary hover:text-fg-brand",
+		brand: "text-fg-brand"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function FooterLink({ className, children, render, showArrow = false, variant = "default", ...props }) {
 	return useRender({
 		defaultTagName: "a",
 		props: mergeProps({
-			className: cn("inline-flex items-center gap-gdt-sm text-fg-secondary underline-offset-4 transition-colors hover:text-fg-brand hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", className),
+			className: cn(footerLinkVariants({ variant }), className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children }), showArrow && /* @__PURE__ */ jsx(ChevronRight, {
 				"aria-hidden": "true",
 				className: "size-3.5"
 			})] })
 		}, props),
 		render,
-		state: { slot: "footer-link" }
+		state: {
+			slot: "footer-link",
+			variant
+		}
 	});
 }
 function FooterContactGrid({ className, ...props }) {
@@ -229,4 +240,4 @@ function FooterLegalLinks({ className, ...props }) {
 	});
 }
 //#endregion
-export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle };
+export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle, footerLinkVariants };

package/dist/media-gallery-hero.js

@@ -8,8 +8,8 @@ import { ReviewBlock } from "./review-block.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/media-gallery-hero.tsx
-const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] bg-surface-raised md:h-[380px] md:rounded-[40px] lg:h-[480px]");
-const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 bg-surface-raised md:grid", {
+const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] md:h-[380px] md:rounded-[40px] lg:h-[480px]");
+const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 md:grid", {
 	variants: { imageCount: {
 		1: "",
 		2: "gap-2 grid-cols-[minmax(0,3fr)_minmax(0,2fr)]",
@@ -77,7 +77,7 @@ function MobileGalleryCounter({ total }) {
 function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, renderMedia, showMobileIndicator }) {
 	const carouselImages = images.length > 0 ? images : [{}];
 	return /* @__PURE__ */ jsxs(Carousel, {
-		className: "absolute inset-0 z-0 block size-full rounded-[32px] bg-surface-raised md:hidden",
+		className: "absolute inset-0 z-0 block size-full rounded-[32px] md:hidden",
 		imageSize: "full",
 		opts: {
 			align: "start",

package/dist/price-tag.d.ts

@@ -3,32 +3,100 @@ import * as React from "react";
 //#region src/price-tag.d.ts
 declare const priceTagVariants: (props?: ({
   size?: "lg" | "md" | "sm" | "xs" | "xxs" | null | undefined;
+  hasDescription?: boolean | null | undefined;
   hasMonthlyPayment?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type PriceTagSize = NonNullable<VariantProps<typeof priceTagVariants>["size"]>;
+/**
+ * A currency in the dropdown.
+ *
+ * `currency`, `value` and `description` are all PriceTag needs, and none of
+ * them are interpreted — `description` in particular is printed as given, so
+ * the wording is yours. The rest are legacy and go in the next major.
+ */
 type PriceTagCurrencyOption = {
-  code: string;
-  amount: string;
+  /** Shown at the leading edge, and matched against `selectedCurrency`. */
+  currency?: string;
+  /** The price, exactly as it should read. */
+  value?: React.ReactNode;
+  /** A second line under the price. Your words, printed as given. */
+  description?: React.ReactNode;
+  /** @deprecated Use `currency`. Removed in the next major. */
+  code?: string;
+  /** @deprecated Use `value`. Removed in the next major. */
+  amount?: string;
+  /** @deprecated Format before you pass it. Removed in the next major. */
   shortAmount?: string;
+  /** @deprecated Use `description`. Removed in the next major. */
   monthlyPayment?: string;
+  /** @deprecated Use `description`. Removed in the next major. */
   monthlyPaymentLabel?: string;
 };
+/**
+ * A currency option after the legacy fields have been folded in — what
+ * `onCurrencyChange` and `renderMenuOption` receive. The original object is
+ * spread in, so code still reading `code` or `amount` off it keeps working.
+ *
+ * Generic over your own option type, which `PriceTag` infers from `currencies`.
+ * Anything extra you hang on an option — a rate, an id, a flag — arrives here
+ * typed, so `renderMenuOption` can use it without a cast.
+ */
+type PriceTagMenuOption<TOption extends PriceTagCurrencyOption = PriceTagCurrencyOption> = TOption & {
+  currency: string;
+  value: React.ReactNode;
+  description?: React.ReactNode;
+  /** Whether this is the row `selectedCurrency` points at. */
+  selected: boolean;
+};
+/** @deprecated Format before you pass it. Removed in the next major. */
 type PriceTagFormat = "full" | "shortened";
-type PriceTagProps = Omit<React.ComponentProps<"button">, "children"> & {
-  amount: string;
-  shortAmount?: string;
-  format?: PriceTagFormat;
+type PriceTagProps<TOption extends PriceTagCurrencyOption = PriceTagCurrencyOption> = Omit<React.ComponentProps<"button">, "children" | "value"> & {
+  /** The price, exactly as it should read. */
+  value?: React.ReactNode;
+  /** A second line under the price. Your words, printed as given. */
+  description?: React.ReactNode;
   size?: PriceTagSize;
-  monthlyPayment?: string;
-  monthlyPaymentLabel?: string;
-  currencies?: PriceTagCurrencyOption[];
+  /**
+   * Providing this turns the tag into a dropdown trigger. Options carry
+   * whatever else you need — `TOption` is inferred from here, and the
+   * callbacks below receive it intact.
+   */
+  currencies?: TOption[];
   selectedCurrency?: string;
-  onCurrencyChange?: (currency: PriceTagCurrencyOption) => void;
+  onCurrencyChange?: (option: PriceTagMenuOption<NoInfer<TOption>>) => void;
+  /**
+   * Replace a row's contents. PriceTag keeps the button, its selected state
+   * and its keyboard behaviour, so a custom row can't quietly lose them.
+   */
+  renderMenuOption?: (option: PriceTagMenuOption<NoInfer<TOption>>) => React.ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   popoverClassName?: string;
+  /** @deprecated Use `value`. Removed in the next major. */
+  amount?: string;
+  /** @deprecated Format before you pass it. Removed in the next major. */
+  shortAmount?: string;
+  /** @deprecated Format before you pass it. Removed in the next major. */
+  format?: PriceTagFormat;
+  /** @deprecated Use `description`. Removed in the next major. */
+  monthlyPayment?: string;
+  /** @deprecated Use `description`. Removed in the next major. */
+  monthlyPaymentLabel?: string;
 };
-declare function PriceTag({ amount, shortAmount, format, size, monthlyPayment, monthlyPaymentLabel, currencies, selectedCurrency, onCurrencyChange, open, defaultOpen, onOpenChange, className, popoverClassName, type, ...props }: PriceTagProps): React.JSX.Element;
+/**
+ * Pill-shaped price display, optionally a trigger for a currency dropdown.
+ *
+ * Display only: it prints `value` and `description` as given and never
+ * composes a sentence, picks a format, or decides that a line is too small to
+ * be worth showing. Wording, currency conversion and number formatting all
+ * belong to the app, which is the only place that knows the locale, the
+ * product's voice, and what the second line is actually for.
+ *
+ * The legacy `amount` / `shortAmount` / `format` / `monthlyPayment` props still
+ * work and keep their old behaviour exactly, including the size threshold that
+ * hid the monthly line below `md`. They go in the next major.
+ */
+declare function PriceTag<TOption extends PriceTagCurrencyOption = PriceTagCurrencyOption>({ value, description, size, currencies, selectedCurrency, onCurrencyChange, renderMenuOption, open, defaultOpen, onOpenChange, className, popoverClassName, type, amount, shortAmount, format, monthlyPayment, monthlyPaymentLabel, ...props }: PriceTagProps<TOption>): React.JSX.Element;
 //#endregion
-export { PriceTag, type PriceTagCurrencyOption, type PriceTagFormat, type PriceTagProps, type PriceTagSize, priceTagVariants };
+export { PriceTag, type PriceTagCurrencyOption, type PriceTagFormat, type PriceTagMenuOption, type PriceTagProps, type PriceTagSize, priceTagVariants };

package/dist/price-tag.js

@@ -1,7 +1,7 @@
 "use client";
 import { Check, ChevronDown } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Popover } from "@base-ui/react/popover";
 //#region src/price-tag.tsx
@@ -14,6 +14,12 @@ const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-c
 			md: "min-h-10.5 gap-1.5 px-5 py-2 text-gdt-md [&>svg]:size-4",
 			lg: "min-h-13 gap-2 px-7 py-3 text-gdt-lg [&>svg]:size-4.5"
 		},
+		/** Two lines sit top-aligned against the chevron rather than centred. */
+		hasDescription: {
+			true: "items-start",
+			false: ""
+		},
+		/** @deprecated Use `hasDescription`. Removed in the next major. */
 		hasMonthlyPayment: {
 			true: "items-start",
 			false: ""
@@ -21,37 +27,102 @@ const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-c
 	},
 	defaultVariants: {
 		size: "md",
-		hasMonthlyPayment: false
+		hasDescription: false
 	}
 });
+/** The description is quieter than the price, and quietest at the largest size. */
+const descriptionSizeClassName = {
+	xxs: "text-gdt-subtext",
+	xs: "text-gdt-subtext",
+	sm: "text-gdt-subtext",
+	md: "text-gdt-subtext",
+	lg: "text-gdt-xs"
+};
 function getDisplayAmount({ amount, shortAmount, format }) {
 	return format === "shortened" && shortAmount ? shortAmount : amount;
 }
-function PriceTag({ amount, shortAmount, format = "full", size = "md", monthlyPayment, monthlyPaymentLabel = "Low as", currencies, selectedCurrency, onCurrencyChange, open, defaultOpen, onOpenChange, className, popoverClassName, type = "button", ...props }) {
+/**
+* Folds the legacy fields into the current three. New fields win outright, so
+* an option can be migrated one at a time.
+*/
+function resolveMenuOption(option, format, selectedCurrency) {
+	const currency = option.currency ?? option.code ?? "";
+	const value = option.value ?? getDisplayAmount({
+		amount: option.amount,
+		shortAmount: option.shortAmount,
+		format
+	});
+	const description = option.description ?? (option.monthlyPayment ? `${option.monthlyPaymentLabel ?? "As low as"} ${option.monthlyPayment} per month` : void 0);
+	return {
+		...option,
+		currency,
+		value,
+		description,
+		selected: currency === selectedCurrency
+	};
+}
+function DefaultMenuOption({ option }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: "min-w-10 text-gdt-sm font-semibold text-fg-brand",
+			children: option.currency
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "ml-auto flex min-w-0 flex-col items-end",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-gdt-sm font-bold text-fg-primary",
+				children: option.value
+			}), option.description ? /* @__PURE__ */ jsx("span", {
+				className: "text-gdt-xs text-fg-secondary",
+				children: option.description
+			}) : null]
+		}),
+		option.selected ? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 text-fg-brand"
+		}) : null
+	] });
+}
+/**
+* Pill-shaped price display, optionally a trigger for a currency dropdown.
+*
+* Display only: it prints `value` and `description` as given and never
+* composes a sentence, picks a format, or decides that a line is too small to
+* be worth showing. Wording, currency conversion and number formatting all
+* belong to the app, which is the only place that knows the locale, the
+* product's voice, and what the second line is actually for.
+*
+* The legacy `amount` / `shortAmount` / `format` / `monthlyPayment` props still
+* work and keep their old behaviour exactly, including the size threshold that
+* hid the monthly line below `md`. They go in the next major.
+*/
+function PriceTag({ value, description, size = "md", currencies, selectedCurrency, onCurrencyChange, renderMenuOption, open, defaultOpen, onOpenChange, className, popoverClassName, type = "button", amount, shortAmount, format = "full", monthlyPayment, monthlyPaymentLabel = "Low as", ...props }) {
 	const hasDropdown = Boolean(currencies?.length);
-	const displayMonthlyPayment = (size === "md" || size === "lg") && monthlyPayment ? `${monthlyPaymentLabel} ${monthlyPayment} monthly` : void 0;
+	const resolvedValue = value ?? getDisplayAmount({
+		amount,
+		shortAmount,
+		format
+	});
+	const legacyDescription = monthlyPayment && (size === "md" || size === "lg") ? `${monthlyPaymentLabel} ${monthlyPayment} monthly` : void 0;
+	const resolvedDescription = description ?? legacyDescription;
 	const pill = /* @__PURE__ */ jsxs("span", {
 		className: "flex min-w-0 flex-col gap-1",
-		children: [/* @__PURE__ */ jsx("span", { children: getDisplayAmount({
-			amount,
-			shortAmount,
-			format
-		}) }), displayMonthlyPayment ? /* @__PURE__ */ jsx("span", {
-			className: cn("hidden text-gdt-subtext font-medium leading-none opacity-90", {
-				"inline-block": size === "md",
-				"inline-block text-gdt-xs": size === "lg"
-			}),
-			children: displayMonthlyPayment
+		children: [/* @__PURE__ */ jsx("span", { children: resolvedValue }), resolvedDescription ? /* @__PURE__ */ jsx("span", {
+			className: cn("font-medium leading-none opacity-90", descriptionSizeClassName[size]),
+			children: resolvedDescription
 		}) : null]
 	});
+	const pillClassName = cn(priceTagVariants({
+		size,
+		hasDescription: Boolean(resolvedDescription)
+	}), className);
 	if (!hasDropdown) return /* @__PURE__ */ jsx("span", {
 		"data-slot": "price-tag",
-		className: cn(priceTagVariants({
-			size,
-			hasMonthlyPayment: Boolean(displayMonthlyPayment)
-		}), className),
+		className: pillClassName,
+		...props,
 		children: pill
 	});
+	const options = (currencies ?? []).map((currency) => resolveMenuOption(currency, format, selectedCurrency));
 	return /* @__PURE__ */ jsxs(Popover.Root, {
 		open,
 		defaultOpen,
@@ -60,10 +131,7 @@ function PriceTag({ amount, shortAmount, format = "full", size = "md", monthlyPa
 			"data-slot": "price-tag",
 			"data-interactive": "true",
 			type,
-			className: cn(priceTagVariants({
-				size,
-				hasMonthlyPayment: Boolean(displayMonthlyPayment)
-			}), className),
+			className: pillClassName,
 			...props,
 			children: [pill, /* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": "true",
@@ -75,41 +143,14 @@ function PriceTag({ amount, shortAmount, format = "full", size = "md", monthlyPa
 			children: /* @__PURE__ */ jsx(Popover.Popup, {
 				"data-slot": "price-tag-popover",
 				className: cn("z-50 flex w-[17.25rem] max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-xl border border-line-subtle bg-surface-overlay p-2 text-fg-primary shadow-3 outline-hidden transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0", popoverClassName),
-				children: currencies?.map((currency) => {
-					const active = currency.code === selectedCurrency;
-					const optionAmount = getDisplayAmount({
-						amount: currency.amount,
-						shortAmount: currency.shortAmount,
-						format
-					});
-					const optionMonthlyPayment = currency.monthlyPayment ? `${currency.monthlyPaymentLabel ?? "As low as"} ${currency.monthlyPayment} per month` : void 0;
-					return /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						"data-active": active ? "true" : void 0,
-						className: "flex min-h-14 w-full items-center gap-3 rounded-lg px-3 text-start outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[active=true]:bg-surface-brand-subtle",
-						onClick: () => onCurrencyChange?.(currency),
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								className: "min-w-10 text-gdt-sm font-semibold text-fg-brand",
-								children: currency.code
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "ml-auto flex min-w-0 flex-col items-end",
-								children: [/* @__PURE__ */ jsx("span", {
-									className: "text-gdt-sm font-bold text-fg-primary",
-									children: optionAmount
-								}), optionMonthlyPayment ? /* @__PURE__ */ jsx("span", {
-									className: "text-gdt-xs text-fg-secondary",
-									children: optionMonthlyPayment
-								}) : null]
-							}),
-							active ? /* @__PURE__ */ jsx(Check, {
-								"aria-hidden": "true",
-								className: "size-4 shrink-0 text-fg-brand"
-							}) : null
-						]
-					}, currency.code);
-				})
+				children: options.map((option) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-slot": "price-tag-option",
+					"data-active": option.selected ? "true" : void 0,
+					className: "flex min-h-14 w-full items-center gap-3 rounded-lg px-3 text-start outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[active=true]:bg-surface-brand-subtle",
+					onClick: () => onCurrencyChange?.(option),
+					children: renderMenuOption ? renderMenuOption(option) : /* @__PURE__ */ jsx(DefaultMenuOption, { option })
+				}, option.currency))
 			})
 		}) })]
 	});

package/dist/property-listing-card.js

@@ -62,7 +62,7 @@ function PropertyListingCardMediaTop({ className, ...props }) {
 function PropertyListingCardOptionsBar({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/80 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus", className) }, props),
+		props: mergeProps({ className: cn("absolute inset-x-0 bottom-0 z-10 flex min-h-9.5 items-center justify-center gap-1 bg-black/70 px-4 py-1.5 text-center text-gdt-subtext font-extrabold tracking-wide text-white uppercase transition-[background-color] hover:bg-black/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus", "supports-backdrop-filter:bg-black/40 supports-backdrop-filter:backdrop-blur-[15px] supports-backdrop-filter:hover:bg-black/55", className) }, props),
 		render,
 		state: { slot: "property-listing-card-options-bar" }
 	});

package/dist/scroll-spy.d.ts

@@ -0,0 +1,76 @@
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { TabsListVariant } from "./tabs.js";
+import * as React from "react";
+//#region src/scroll-spy.d.ts
+/**
+ * Read and drive the spy from anywhere inside a `ScrollSpy` — an overflow
+ * "More" menu, a floating progress rail, a heading that echoes the section
+ * being read.
+ *
+ * Context reaches through portals, so a consumer inside an open `DropdownMenu`
+ * or `Popover` works without threading anything down by hand. `registerSection`
+ * is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
+ */
+declare function useScrollSpy(): {
+  activeValue: string | undefined;
+  getSectionId: (value: string) => string;
+  getTriggerId: (value: string) => string;
+  scrollToSection: (value: string) => void;
+};
+type ScrollSpyProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  orientation?: "horizontal" | "vertical";
+  /** Controlled active section. */
+  value?: string;
+  /** Active section before the first scroll measurement lands. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /**
+   * Distance in px between the top of the scrollport and the line a section
+   * has to cross to become active. Set it to the height of a sticky header —
+   * it also becomes each section's `scroll-margin-top`, so scrolling lands
+   * the heading below the header rather than under it.
+   */
+  scrollOffset?: number;
+};
+/**
+ * `Tabs` for a page that shows everything at once: every section stays mounted
+ * and visible, the triggers scroll to their section, and the active trigger
+ * tracks whichever section the reader is currently on.
+ *
+ * The parts mirror the `Tabs` API — `ScrollSpy` / `ScrollSpyList` /
+ * `ScrollSpyTrigger` / `ScrollSpyContent`, matched by `value` — and the list
+ * takes the same `variant` and `size` as `TabsList`, so the two read as one
+ * family. Overflow ("More" dropdowns, per-breakpoint trigger counts) is the
+ * consuming app's job, exactly as it is with `Tabs`;
+ * `scrollSpyTriggerClassName` is exported so an overflow button can match the
+ * real triggers.
+ */
+declare function ScrollSpy({ className, orientation, value, defaultValue, onValueChange, scrollOffset, children, ...props }: ScrollSpyProps): React.JSX.Element;
+type ScrollSpyListProps = React.ComponentProps<"nav"> & {
+  variant?: TabsListVariant;
+  size?: ComponentSize;
+  /**
+   * Keep the active trigger visible as the reader scrolls. Opt in when the
+   * list itself scrolls — without it, a strip narrower than its triggers looks
+   * frozen once the active one passes out of view. No-op when nothing
+   * overflows, and it never scrolls anything but the list.
+   */
+  scrollActiveIntoView?: boolean;
+};
+declare function ScrollSpyList({ className, variant, size, children, scrollActiveIntoView, "aria-label": ariaLabel, ...props }: ScrollSpyListProps): React.JSX.Element;
+/**
+ * Trigger styling, exported so an overflow "More" button outside the list can
+ * render the same look — the `Tabs` trigger classes verbatim, so the two
+ * components stay pixel-identical.
+ */
+declare const scrollSpyTriggerClassName: string;
+type ScrollSpyTriggerProps = Omit<React.ComponentProps<"button">, "value"> & {
+  value: string;
+};
+declare function ScrollSpyTrigger({ className, value, type, onClick, ...props }: ScrollSpyTriggerProps): React.JSX.Element;
+type ScrollSpyContentProps = Omit<React.ComponentProps<"section">, "value"> & {
+  value: string;
+};
+declare function ScrollSpyContent({ className, value, style, tabIndex, ...props }: ScrollSpyContentProps): React.JSX.Element;
+//#endregion
+export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, useScrollSpy };