@giddaa-housing/ui 3.3.0 → 3.5.0

package/dist/multi-step-form.js

@@ -1,8 +1,8 @@
 "use client";
 import { Check } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { cn } from "./utils/cn.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { Progress, ProgressIndicator, ProgressTrack } from "./progress.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

package/dist/number-input.js

@@ -1,6 +1,6 @@
 "use client";
 import { Minus, Plus } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/page-header.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/page-header.tsx
 function DashboardHeader({ hideBorder = false, className, ...props }) {

package/dist/pagination.js

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button, ButtonLink } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/password-input.js

@@ -1,6 +1,6 @@
 "use client";
 import { Eye, EyeOff } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

package/dist/phone-input.js

@@ -1,21 +1,17 @@
 "use client";
 import { Check, ChevronDown, Search } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { Separator } from "./separator.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { getPhoneCountries } from "./utils/phone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { AsYouType, getCountries, getCountryCallingCode, parsePhoneNumber } from "libphonenumber-js";
+import { AsYouType, getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
 import flags from "react-phone-number-input/flags";
 //#region src/phone-input.tsx
-const regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames(["en"], { type: "region" }) : void 0;
-const COUNTRIES = getCountries().map((code) => ({
-	code,
-	name: regionNames?.of(code) ?? code,
-	calling: getCountryCallingCode(code)
-})).sort((a, b) => a.name.localeCompare(b.name));
+const COUNTRIES = getPhoneCountries();
 function getNationalDigits(value) {
 	return value.replace(/\D/g, "");
 }
@@ -29,13 +25,11 @@ function toE164(digits, country) {
 }
 function parseValue(value) {
 	if (!value) return { digits: "" };
-	try {
-		const parsed = parsePhoneNumber(value);
-		if (parsed?.nationalNumber) return {
-			country: parsed.country,
-			digits: parsed.nationalNumber
-		};
-	} catch {}
+	const parsed = parsePhoneNumberFromString(value);
+	if (parsed?.nationalNumber) return {
+		country: parsed.country,
+		digits: parsed.nationalNumber
+	};
 	return { digits: "" };
 }
 const flagSizeVariants = {
@@ -107,7 +101,7 @@ function CountryList({ items, country, onSelect }) {
 						}),
 						/* @__PURE__ */ jsxs("span", {
 							className: "shrink-0 text-fg-secondary",
-							children: ["+", entry.calling]
+							children: ["+", entry.callingCode]
 						}),
 						selected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-fg-brand" })
 					]
@@ -124,7 +118,7 @@ function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
 		const q = query.trim().toLowerCase();
 		if (!q) return COUNTRIES;
 		const normalized = q.replace(/^\+/, "");
-		return COUNTRIES.filter((entry) => entry.name.toLowerCase().includes(q) || entry.calling.includes(normalized) || entry.code.toLowerCase().includes(q));
+		return COUNTRIES.filter((entry) => entry.name.toLowerCase().includes(q) || entry.callingCode.includes(normalized) || entry.code.toLowerCase().includes(q));
 	}, [query]);
 	function handleOpenChange(next) {
 		setOpen(next);

package/dist/photo-gallery.js

@@ -1,8 +1,9 @@
 "use client";
 import { ChevronLeft, ChevronRight, Fullscreen, X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
 import { Carousel, CarouselContent, CarouselItem } from "./carousel.js";
+import { Image } from "./image.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Dialog } from "@base-ui/react/dialog";
@@ -60,7 +61,8 @@ function GalleryFrame({ image, fit = "cover", className }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "photo-gallery-frame",
 		className: cn("relative flex size-full items-center justify-center overflow-hidden", className),
-		children: image?.src ? /* @__PURE__ */ jsx("img", {
+		children: image?.src ? /* @__PURE__ */ jsx(Image, {
+			slot: "photo-gallery-image",
 			src: image.src,
 			alt: image.alt ?? "Property image",
 			className: cn(fit === "contain" ? "max-h-full max-w-full rounded-lg object-contain" : "size-full object-cover"),
@@ -168,7 +170,8 @@ function GalleryThumbnails({ images, selectedIndex, onSelect, colsClassName, cla
 				onClick: () => onSelect(index),
 				style: { width: "calc((100% - (var(--gallery-cols) - 1) * var(--gallery-gap)) / var(--gallery-cols))" },
 				className: cn("relative aspect-4/3 shrink-0 overflow-hidden rounded-lg border-2 bg-surface-raised transition-[border-color,opacity] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", isActive ? "border-line-focus" : "border-transparent opacity-80 hover:opacity-100"),
-				children: image.src ? /* @__PURE__ */ jsx("img", {
+				children: image.src ? /* @__PURE__ */ jsx(Image, {
+					slot: "photo-gallery-thumbnail-image",
 					src: image.src,
 					alt: image.alt ?? `Property image ${index + 1}`,
 					className: "size-full object-cover",

package/dist/picker-CsnHtbe4.d.ts

@@ -0,0 +1,14 @@
+import "./input-size-context-C-SFx9sx.js";
+import { r as PopoverContent } from "./popover-DSlPeH7x.js";
+import "./icons-C9JXR5Xv.js";
+import * as React from "react";
+//#region src/lib/picker.d.ts
+/**
+ * Where a picker's panel goes. Every one of these is a preference the
+ * positioner is free to overrule when the panel would otherwise overflow —
+ * which is the point, a calendar being tall enough that the room below a
+ * trigger often isn't the room it needs.
+ */
+type PickerPlacementProps = Pick<React.ComponentProps<typeof PopoverContent>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionAvoidance">;
+//#endregion
+export { PickerPlacementProps as t };

package/dist/{picker-xSTzeYhc.js → picker-DmIiQKLJ.js}

@@ -1,15 +1,10 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
 import { useInputComponentSize } from "./input-size-context.js";
 import { PopoverTrigger } from "./popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/lib/picker.tsx
-const PICKER_COLLISION_AVOIDANCE = {
-	side: "flip",
-	align: "shift",
-	fallbackAxisSide: "none"
-};
 const pickerTriggerVariants = cva("flex w-full items-center justify-between rounded-full border transition-[border-color,box-shadow] outline-none", {
 	variants: { size: {
 		sm: "h-8 px-3 text-gdt-xs [&_svg]:size-3.5",
@@ -47,4 +42,4 @@ function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
 	});
 }
 //#endregion
-export { PickerFooter as n, PickerTrigger as r, PICKER_COLLISION_AVOIDANCE as t };
+export { PickerTrigger as n, PickerFooter as t };

package/dist/pie-chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { ChartContainer } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/popover-DSlPeH7x.d.ts

@@ -0,0 +1,20 @@
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/popover.d.ts
+declare function Popover$1({ ...props }: Popover.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: Popover.Trigger.Props): React.JSX.Element;
+type PopoverContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
+  showArrow?: boolean;
+  size?: ComponentSize;
+};
+declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
+  border?: boolean;
+}): React.JSX.Element;
+declare function PopoverBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover.Description.Props): React.JSX.Element;
+//#endregion
+export { PopoverFooter as a, PopoverTrigger as c, PopoverDescription as i, PopoverBody as n, PopoverHeader as o, PopoverContent as r, PopoverTitle as s, Popover$1 as t };

package/dist/popover.d.ts

@@ -1,20 +1,2 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
-import * as React from "react";
-import { Popover as Popover$1 } from "@base-ui/react/popover";
-//#region src/popover.d.ts
-declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
-declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
-type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "side" | "sideOffset"> & {
-  showArrow?: boolean;
-  size?: ComponentSize;
-};
-declare function PopoverContent({ className, align, alignOffset, collisionAvoidance, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
-declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
-  border?: boolean;
-}): React.JSX.Element;
-declare function PopoverBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): React.JSX.Element;
-declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): React.JSX.Element;
-//#endregion
+import { a as PopoverFooter, c as PopoverTrigger, i as PopoverDescription, n as PopoverBody, o as PopoverHeader, r as PopoverContent, s as PopoverTitle, t as Popover } from "./popover-DSlPeH7x.js";
 export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/popover.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";

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;
+/**
+ * Rounded-box 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,19 +1,25 @@
 "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 { cn } from "./utils/cn.js";
+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
-const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-center justify-center rounded-4xl bg-surface-brand font-bold leading-none whitespace-nowrap text-fg-on-brand shadow-none transition-[background-color,box-shadow] outline-none data-[interactive=true]:cursor-pointer data-[interactive=true]:hover:bg-action-primary-hover data-[interactive=true]:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[interactive=true]:active:bg-action-primary-pressed", {
+const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-center justify-center bg-surface-brand font-bold whitespace-nowrap text-fg-on-brand shadow-none transition-[background-color,box-shadow] outline-none data-[interactive=true]:cursor-pointer data-[interactive=true]:hover:bg-action-primary-hover data-[interactive=true]:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] data-[interactive=true]:active:bg-action-primary-pressed", {
 	variants: {
 		size: {
-			xxs: "min-h-7 gap-1 px-2.5 py-0.75 text-gdt-subtext [&>svg]:size-3",
-			xs: "min-h-7.5 gap-1 px-3 py-1 text-gdt-xs [&>svg]:size-3.5",
-			sm: "min-h-9 gap-1.5 px-4 py-1.5 text-gdt-sm [&>svg]:size-3.5",
-			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"
+			xxs: "min-h-7 gap-1 rounded-lg px-2.5 py-0.75 text-gdt-subtext leading-none [&_svg]:size-3",
+			xs: "min-h-7.5 gap-1 rounded-lg px-3 py-1 text-gdt-xs leading-none [&_svg]:size-3.5",
+			sm: "min-h-9 gap-1.5 rounded-xl px-4 py-1.5 text-gdt-sm leading-none [&_svg]:size-3.5",
+			md: "min-h-10.5 gap-1.5 rounded-xl px-5 py-2 text-gdt-md leading-none [&_svg]:size-4",
+			lg: "min-h-13 gap-2 rounded-2xl px-7 py-3 text-gdt-lg leading-none [&_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,95 +27,158 @@ const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-c
 	},
 	defaultVariants: {
 		size: "md",
-		hasMonthlyPayment: false
+		hasDescription: false
 	}
 });
+/** The space between the price and its description, 4px through 12px. */
+const lineGapClassName = {
+	xxs: "gap-1",
+	xs: "gap-1",
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-3"
+};
+/**
+* The least space the chevron will sit at from the price. It is usually pushed
+* further out than this, to the trailing edge of the wider description.
+*/
+const chevronGapClassName = {
+	xxs: "gap-2",
+	xs: "gap-2",
+	sm: "gap-3",
+	md: "gap-3",
+	lg: "gap-4"
+};
+/**
+* The description is quieter than the price, and quietest at the largest size.
+* `leading-none` trails the text size here for the same reason it does above.
+*/
+const descriptionSizeClassName = {
+	xxs: "text-gdt-subtext leading-none",
+	xs: "text-gdt-subtext leading-none",
+	sm: "text-gdt-subtext leading-none",
+	md: "text-gdt-subtext leading-none",
+	lg: "text-gdt-xs leading-none"
+};
 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
+	] });
+}
+/**
+* Rounded-box 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
+		className: cn("flex min-w-0 flex-col text-start", lineGapClassName[size]),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: cn("flex items-center justify-between", chevronGapClassName[size]),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children: resolvedValue
+			}), hasDropdown ? /* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": "true",
+				className: "shrink-0 transition-transform group-data-popup-open/price-tag:rotate-180"
+			}) : null]
+		}), resolvedDescription ? /* @__PURE__ */ jsx("span", {
+			className: cn("font-medium 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,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 			"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",
-				className: "transition-transform group-data-popup-open/price-tag:rotate-180"
-			})]
+			children: pill
 		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 			sideOffset: 10,
 			align: "start",
 			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/progress.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";