@giddaa-housing/ui 3.4.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

@@ -85,7 +85,7 @@ type PriceTagProps<TOption extends PriceTagCurrencyOption = PriceTagCurrencyOpti
   monthlyPaymentLabel?: string;
 };
 /**
- * Pill-shaped price display, optionally a trigger for a currency dropdown.
+ * 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

package/dist/price-tag.js

@@ -1,18 +1,18 @@
 "use client";
 import { Check, ChevronDown } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+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: {
@@ -30,13 +30,35 @@ const priceTagVariants = cva("group/price-tag inline-flex w-fit shrink-0 items-c
 		hasDescription: false
 	}
 });
-/** The description is quieter than the price, and quietest at the largest size. */
+/** 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",
-	xs: "text-gdt-subtext",
-	sm: "text-gdt-subtext",
-	md: "text-gdt-subtext",
-	lg: "text-gdt-xs"
+	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;
@@ -84,7 +106,7 @@ function DefaultMenuOption({ option }) {
 	] });
 }
 /**
-* Pill-shaped price display, optionally a trigger for a currency dropdown.
+* 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
@@ -106,9 +128,18 @@ function PriceTag({ value, description, size = "md", currencies, selectedCurrenc
 	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: resolvedValue }), resolvedDescription ? /* @__PURE__ */ jsx("span", {
-			className: cn("font-medium leading-none opacity-90", descriptionSizeClassName[size]),
+		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]
 	});
@@ -127,16 +158,13 @@ function PriceTag({ value, description, size = "md", currencies, selectedCurrenc
 		open,
 		defaultOpen,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 			"data-slot": "price-tag",
 			"data-interactive": "true",
 			type,
 			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",

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";

package/dist/property-listing-card.d.ts

@@ -1,4 +1,6 @@
 import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
+import { Carousel, CarouselIndicator, CarouselItem } from "./carousel.js";
+import { ImageProps } from "./image.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -6,6 +8,10 @@ import * as React from "react";
 declare const propertyListingCardVariants: (props?: ({
   variant?: "default" | "elevated" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * @deprecated Render `PropertyListingCardImage` yourself, which takes `src`,
+ * `alt` and every other image prop directly. Removed in the next major.
+ */
 type PropertyListingImage = {
   id?: string;
   src?: string;
@@ -13,9 +19,65 @@ type PropertyListingImage = {
 };
 interface PropertyListingCardProps extends React.ComponentProps<"article">, VariantProps<typeof propertyListingCardVariants> {}
 declare function PropertyListingCard({ className, variant, ...props }: PropertyListingCardProps): React.JSX.Element;
+/**
+ * The media well: a positioned box the backdrop and the overlays share. The
+ * backdrop — one image, a carousel of them, or the placeholder — sits at
+ * `-z-10`; everything else stacks above it.
+ *
+ * Compose the backdrop as children and it stays yours to arrange:
+ *
+ * ```tsx
+ * <PropertyListingCardMedia>
+ *   <PropertyListingCardCarousel>
+ *     <CarouselContent>
+ *       {images.map((image) => (
+ *         <PropertyListingCardCarouselItem key={image.id}>
+ *           <PropertyListingCardImage src={image.src} alt={image.alt} loading="lazy" />
+ *         </PropertyListingCardCarouselItem>
+ *       ))}
+ *     </CarouselContent>
+ *     <PropertyListingCardCarouselIndicator className="bottom-20" />
+ *   </PropertyListingCardCarousel>
+ *   <PropertyListingCardMediaTop>…</PropertyListingCardMediaTop>
+ * </PropertyListingCardMedia>
+ * ```
+ */
 declare function PropertyListingCardMedia({ className, images, children, ...props }: React.ComponentProps<"div"> & {
+  /**
+   * @deprecated Compose the backdrop from `PropertyListingCardCarousel`,
+   * `PropertyListingCardImage` and `PropertyListingCardImagePlaceholder`
+   * instead. Building it from a list left no way to lazy-load a photo, move
+   * the indicator off the options bar, or hand the images to a framework's
+   * own image component. Removed in the next major.
+   */
   images?: PropertyListingImage[];
 }): React.JSX.Element;
+/**
+ * The carousel, sized to fill the media well and sunk behind the overlays.
+ * Fill it with `CarouselContent` from `@giddaa-housing/ui/carousel` — every
+ * carousel part works here, including `CarouselPrevious`/`CarouselNext`.
+ */
+declare function PropertyListingCardCarousel({ className, opts, ...props }: React.ComponentProps<typeof Carousel>): React.JSX.Element;
+declare function PropertyListingCardCarouselItem({ className, ...props }: React.ComponentProps<typeof CarouselItem>): React.JSX.Element;
+/**
+ * The indicator, lifted clear of the options bar by default. That bar is
+ * `min-h-9.5` and the media may carry a price tag above it, so the offset is
+ * a starting point rather than a rule — `className="bottom-20"` or any other
+ * `bottom-*` moves it.
+ */
+declare function PropertyListingCardCarouselIndicator({ className, size, ...props }: React.ComponentProps<typeof CarouselIndicator>): React.JSX.Element;
+/**
+ * A listing photo. Takes everything an `<img>` does — `loading="lazy"`,
+ * `fetchPriority`, `sizes`, `srcSet` — and `render` swaps the element for a
+ * framework's image component. `ImageProvider` does the same for every image
+ * in the tree at once.
+ */
+declare function PropertyListingCardImage({ image, alt, src, className, ...props }: ImageProps & {
+  /** @deprecated Pass `src` and `alt` directly. Removed in the next major. */
+  image?: PropertyListingImage;
+}): React.JSX.Element;
+/** Stands in for a listing with no photo, filling the well behind the overlays. */
+declare function PropertyListingCardImagePlaceholder({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PropertyListingCardMediaTop({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PropertyListingCardOptionsBar({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function PropertyListingCardDetails({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -26,4 +88,4 @@ declare function PropertyListingCardActions({ className, ...props }: React.Compo
 declare function PropertyListingCardActionButton({ className, type, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
 declare function PropertyListingCardActionButtonLink({ className, ...props }: React.ComponentProps<typeof ButtonLink>): React.JSX.Element;
 //#endregion
-export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };

package/dist/property-listing-card.js

@@ -1,7 +1,8 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button, ButtonLink } from "./button.js";
 import { Carousel, CarouselContent, CarouselIndicator, CarouselItem } from "./carousel.js";
+import { Image } from "./image.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -20,39 +21,107 @@ function PropertyListingCard({ className, variant, ...props }) {
 		...props
 	});
 }
-function PropertyListingCardMedia({ className, images = [], children, ...props }) {
-	const hasMultipleImages = images.length > 1;
+/**
+* The media well: a positioned box the backdrop and the overlays share. The
+* backdrop — one image, a carousel of them, or the placeholder — sits at
+* `-z-10`; everything else stacks above it.
+*
+* Compose the backdrop as children and it stays yours to arrange:
+*
+* ```tsx
+* <PropertyListingCardMedia>
+*   <PropertyListingCardCarousel>
+*     <CarouselContent>
+*       {images.map((image) => (
+*         <PropertyListingCardCarouselItem key={image.id}>
+*           <PropertyListingCardImage src={image.src} alt={image.alt} loading="lazy" />
+*         </PropertyListingCardCarouselItem>
+*       ))}
+*     </CarouselContent>
+*     <PropertyListingCardCarouselIndicator className="bottom-20" />
+*   </PropertyListingCardCarousel>
+*   <PropertyListingCardMediaTop>…</PropertyListingCardMediaTop>
+* </PropertyListingCardMedia>
+* ```
+*/
+function PropertyListingCardMedia({ className, images, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative isolate min-h-70 overflow-hidden rounded-t-2xl bg-surface text-fg-primary", className),
 		...props,
-		children: [hasMultipleImages ? /* @__PURE__ */ jsxs(Carousel, {
-			imageSize: "full",
-			opts: { loop: true },
-			className: "absolute inset-0 -z-10 size-full rounded-none bg-surface",
-			children: [/* @__PURE__ */ jsx(CarouselContent, { children: images.map((carouselImage, index) => /* @__PURE__ */ jsx(CarouselItem, {
-				className: "relative h-full",
-				children: /* @__PURE__ */ jsx(PropertyListingCardImage, { image: carouselImage })
-			}, carouselImage.id ?? carouselImage.src ?? carouselImage.alt ?? index)) }), /* @__PURE__ */ jsx(CarouselIndicator, {
-				size: "sm",
-				className: "bottom-16"
-			})]
-		}) : images[0]?.src ? /* @__PURE__ */ jsx(PropertyListingCardImage, {
-			image: images[0],
-			className: "absolute inset-0 -z-10"
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder",
-			children: "Property Image"
-		}), children]
-	});
-}
-function PropertyListingCardImage({ image, className, ...props }) {
-	return /* @__PURE__ */ jsx("img", {
-		src: image.src,
-		alt: image.alt ?? "Property image",
+		children: [images ? /* @__PURE__ */ jsx(PropertyListingCardMediaBackdrop, { images }) : null, children]
+	});
+}
+/** The backdrop the deprecated `images` prop builds, unchanged. */
+function PropertyListingCardMediaBackdrop({ images }) {
+	if (images.length > 1) return /* @__PURE__ */ jsxs(PropertyListingCardCarousel, { children: [/* @__PURE__ */ jsx(CarouselContent, { children: images.map((carouselImage, index) => /* @__PURE__ */ jsx(PropertyListingCardCarouselItem, { children: /* @__PURE__ */ jsx(PropertyListingCardImage, { image: carouselImage }) }, carouselImage.id ?? carouselImage.src ?? carouselImage.alt ?? index)) }), /* @__PURE__ */ jsx(PropertyListingCardCarouselIndicator, {})] });
+	if (images[0]?.src) return /* @__PURE__ */ jsx(PropertyListingCardImage, {
+		image: images[0],
+		className: "absolute inset-0 -z-10"
+	});
+	return /* @__PURE__ */ jsx(PropertyListingCardImagePlaceholder, {});
+}
+/**
+* The carousel, sized to fill the media well and sunk behind the overlays.
+* Fill it with `CarouselContent` from `@giddaa-housing/ui/carousel` — every
+* carousel part works here, including `CarouselPrevious`/`CarouselNext`.
+*/
+function PropertyListingCardCarousel({ className, opts, ...props }) {
+	return /* @__PURE__ */ jsx(Carousel, {
+		"data-slot": "property-listing-card-carousel",
+		imageSize: "full",
+		opts: {
+			loop: true,
+			...opts
+		},
+		className: cn("absolute inset-0 -z-10 size-full rounded-none bg-surface", className),
+		...props
+	});
+}
+function PropertyListingCardCarouselItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CarouselItem, {
+		"data-slot": "property-listing-card-carousel-item",
+		className: cn("relative h-full", className),
+		...props
+	});
+}
+/**
+* The indicator, lifted clear of the options bar by default. That bar is
+* `min-h-9.5` and the media may carry a price tag above it, so the offset is
+* a starting point rather than a rule — `className="bottom-20"` or any other
+* `bottom-*` moves it.
+*/
+function PropertyListingCardCarouselIndicator({ className, size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(CarouselIndicator, {
+		"data-slot": "property-listing-card-carousel-indicator",
+		size,
+		className: cn("bottom-16", className),
+		...props
+	});
+}
+/**
+* A listing photo. Takes everything an `<img>` does — `loading="lazy"`,
+* `fetchPriority`, `sizes`, `srcSet` — and `render` swaps the element for a
+* framework's image component. `ImageProvider` does the same for every image
+* in the tree at once.
+*/
+function PropertyListingCardImage({ image, alt, src, className, ...props }) {
+	return /* @__PURE__ */ jsx(Image, {
+		slot: "property-listing-card-image",
+		src: src ?? image?.src,
+		alt: alt ?? image?.alt ?? "Property image",
 		className: cn("size-full object-cover", className),
 		...props
 	});
 }
+/** Stands in for a listing with no photo, filling the well behind the overlays. */
+function PropertyListingCardImagePlaceholder({ className, children = "Property Image", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "property-listing-card-image-placeholder",
+		className: cn("absolute inset-0 -z-10 grid place-items-center bg-surface-raised text-gdt-sm font-bold text-fg-caption-placeholder", className),
+		...props,
+		children
+	});
+}
 function PropertyListingCardMediaTop({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("absolute inset-x-2 top-2 z-10 flex items-start justify-between gap-3", className),
@@ -115,4 +184,4 @@ function PropertyListingCardActionButtonLink({ className, ...props }) {
 	});
 }
 //#endregion
-export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardDetails, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };

package/dist/purchase-option-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.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";

package/dist/radar-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 } from "react/jsx-runtime";