@giddaa-housing/ui 3.5.0 → 3.7.0

package/dist/phone-input.js

@@ -1,7 +1,7 @@
 "use client";
 import { Check, ChevronDown, Search } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { Separator } from "./separator.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
@@ -10,28 +10,87 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { AsYouType, getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
 import flags from "react-phone-number-input/flags";
-//#region src/phone-input.tsx
-const COUNTRIES = getPhoneCountries();
-function getNationalDigits(value) {
-	return value.replace(/\D/g, "");
+//#region src/lib/phone-input-value.ts
+const EMPTY = {
+	text: "",
+	national: "",
+	international: false,
+	value: void 0
+};
+/** Drops everything a phone number cannot contain, keeping a leading `+`. */
+function sanitizePhoneText(input) {
+	const digits = input.replace(/\D/g, "");
+	return input.trimStart().startsWith("+") ? `+${digits}` : digits;
 }
-function formatNational(digits, country) {
-	if (!digits) return "";
-	return new AsYouType(country).input(digits);
+/**
+* Groups national digits that `AsYouType` handed back untouched.
+*
+* Most countries only publish a national format that assumes the trunk prefix,
+* so `AsYouType("NG")` formats `08161827754` as `0816 182 7754` but hands
+* `8161827754` straight back in one run — and it formats neither until enough
+* digits have arrived. The same digits always group under the international
+* pattern, so that grouping is borrowed and the calling code taken back off.
+*
+* Whatever the reader typed in front of the national digits is theirs, and goes
+* back where they left it. This only ever inserts separators: typing `081`
+* shows `081`, never `81`.
+*/
+function groupNationalDigits(sanitized, national, country) {
+	if (!national || !sanitized.endsWith(national)) return "";
+	const callingCode = `+${getCountryCallingCode(country)}`;
+	const international = new AsYouType().input(`${callingCode}${national}`);
+	if (!international.startsWith(callingCode)) return "";
+	return sanitized.slice(0, sanitized.length - national.length) + international.slice(callingCode.length).trimStart();
 }
-function toE164(digits, country) {
-	if (!digits) return void 0;
-	return `+${getCountryCallingCode(country)}${digits}`;
+/**
+* Reads what is in the field after a keystroke.
+*
+* `country` is the currently selected country; it is only overridden when the
+* text is international *and* the digits so far name exactly one country —
+* `+1` is still both the US and Canada, so the selector holds still until it
+* is not.
+*/
+function derivePhoneValue(input, country) {
+	const sanitized = sanitizePhoneText(input);
+	const formatter = new AsYouType(country);
+	const formatted = formatter.input(sanitized);
+	const international = sanitized.startsWith("+");
+	const national = formatter.getNationalNumber();
+	return {
+		text: !international && formatted === sanitized && groupNationalDigits(sanitized, national, country) || formatted,
+		country: (international ? formatter.getCountry() : void 0) ?? country,
+		national,
+		international,
+		value: national ? formatter.getNumberValue() : void 0
+	};
 }
-function parseValue(value) {
-	if (!value) return { digits: "" };
+/** Reads an externally supplied value — a form's default, a fetched record. */
+function readPhoneValue(value, fallback) {
+	if (!value) return {
+		...EMPTY,
+		country: fallback
+	};
 	const parsed = parsePhoneNumberFromString(value);
-	if (parsed?.nationalNumber) return {
-		country: parsed.country,
-		digits: parsed.nationalNumber
+	if (!parsed?.nationalNumber) return derivePhoneValue(value, fallback);
+	if (!parsed.country) return derivePhoneValue(parsed.number, fallback);
+	return {
+		...derivePhoneValue(parsed.formatNational(), parsed.country),
+		country: parsed.country
+	};
+}
+/**
+* Rewrites the field for a country picked from the selector. The digits the
+* reader typed are kept; only the code in front of them changes.
+*/
+function selectPhoneCountry(current, next) {
+	return {
+		...derivePhoneValue(current.international ? `+${getCountryCallingCode(next)}${current.national}` : current.national, next),
+		country: next
 	};
-	return { digits: "" };
 }
+//#endregion
+//#region src/phone-input.tsx
+const COUNTRIES = getPhoneCountries();
 const flagSizeVariants = {
 	sm: "h-3 w-[18px]",
 	md: "h-3.5 w-5",
@@ -110,7 +169,7 @@ function CountryList({ items, country, onSelect }) {
 		})
 	});
 }
-function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
+function CountrySelect({ country, size, disabled, showCallingCode, onSelect, finalFocusRef }) {
 	const [open, setOpen] = React.useState(false);
 	const [query, setQuery] = React.useState("");
 	const searchRef = React.useRef(null);
@@ -140,7 +199,7 @@ function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
 					country,
 					size
 				}),
-				/* @__PURE__ */ jsxs("span", { children: ["+", getCountryCallingCode(country)] }),
+				showCallingCode ? /* @__PURE__ */ jsxs("span", { children: ["+", getCountryCallingCode(country)] }) : null,
 				/* @__PURE__ */ jsx(ChevronDown, { className: cn("text-fg-secondary transition-transform", open && "rotate-180", size === "lg" ? "size-4" : "size-3.5") })
 			]
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
@@ -167,71 +226,82 @@ function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
 		})]
 	});
 }
-function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = false, readOnly = false, placeholder = "(0000) 000-0000", className, id, name, ref, "aria-invalid": ariaInvalid }) {
-	const resolvedSize = useComponentSize(size);
+/**
+* A phone field that takes a number written either way round.
+*
+* `0801 234 5678` and `+234 801 234 5678` are the same number, and both are
+* accepted here: typing or pasting a leading `+` switches the field to
+* international entry and moves the country selector to match, while a plain
+* national number is read against the selected country, trunk prefix and all.
+* `onChange` receives E.164 in both cases.
+*/
+function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = false, readOnly = false, placeholder = "(0000) 000-0000", rightAddon, className, id, name, ref, "aria-invalid": ariaInvalid }) {
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = resolveResponsiveComponentSize(sizeValue);
 	const inputRef = React.useRef(null);
 	const setInputRef = React.useCallback((node) => {
 		inputRef.current = node;
 		if (typeof ref === "function") ref(node);
 		else if (ref) ref.current = node;
 	}, [ref]);
-	const initial = React.useMemo(() => parseValue(value), []);
-	const [country, setCountry] = React.useState(initial.country ?? defaultCountry);
-	const [national, setNational] = React.useState(() => formatNational(initial.digits, initial.country ?? defaultCountry));
+	const [phone, setPhone] = React.useState(() => readPhoneValue(value, defaultCountry));
 	React.useEffect(() => {
-		if (toE164(getNationalDigits(national), country) === value) return;
-		const next = parseValue(value);
-		const nextCountry = next.country ?? country;
-		setCountry(nextCountry);
-		setNational(formatNational(next.digits, nextCountry));
+		if (phone.value === value) return;
+		setPhone(readPhoneValue(value, phone.country));
 	}, [value]);
-	function emit(digits, nextCountry) {
-		onChange?.(toE164(digits, nextCountry));
+	function commit(next) {
+		setPhone(next);
+		if (next.value !== phone.value) onChange?.(next.value);
 	}
 	function handleInputChange(event) {
-		const digits = getNationalDigits(event.target.value);
-		setNational(formatNational(digits, country));
-		emit(digits, country);
+		commit(derivePhoneValue(event.target.value, phone.country));
 	}
 	function handleCountrySelect(nextCountry) {
-		const digits = getNationalDigits(national);
-		setCountry(nextCountry);
-		setNational(formatNational(digits, nextCountry));
-		emit(digits, nextCountry);
+		commit(selectPhoneCountry(phone, nextCountry));
 	}
 	const dividerStateClasses = cn("group-hover/input-group:bg-line-strong", "group-focus-within/input-group:bg-line-focus", "group-has-[[aria-invalid=true]]/input-group:bg-line-danger", "group-has-disabled/input-group:bg-line-subtle");
 	return /* @__PURE__ */ jsxs(InputGroup, {
-		size: resolvedSize,
+		size: sizeValue,
 		className,
-		children: [/* @__PURE__ */ jsxs(InputGroupAddon, {
-			align: "inline-start",
-			className: "gap-2 self-stretch py-0",
-			children: [/* @__PURE__ */ jsx(CountrySelect, {
-				country,
-				size: resolvedSize,
+		children: [
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-start",
+				className: "gap-2 self-stretch py-0",
+				children: [/* @__PURE__ */ jsx(CountrySelect, {
+					country: phone.country,
+					size: resolvedSize.base,
+					disabled,
+					showCallingCode: !phone.international,
+					onSelect: handleCountrySelect,
+					finalFocusRef: inputRef
+				}), /* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					shade: "deep",
+					className: cn("self-stretch transition-colors", dividerStateClasses)
+				})]
+			}),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				ref: setInputRef,
+				id,
+				name,
+				type: "tel",
+				inputMode: "tel",
+				autoComplete: "tel",
+				value: phone.text,
+				onChange: handleInputChange,
+				placeholder,
 				disabled,
-				onSelect: handleCountrySelect,
-				finalFocusRef: inputRef
-			}), /* @__PURE__ */ jsx(Separator, {
-				orientation: "vertical",
-				shade: "deep",
-				className: cn("self-stretch transition-colors", dividerStateClasses)
-			})]
-		}), /* @__PURE__ */ jsx(InputGroupInput, {
-			ref: setInputRef,
-			id,
-			name,
-			type: "tel",
-			inputMode: "tel",
-			autoComplete: "tel",
-			value: national,
-			onChange: handleInputChange,
-			placeholder,
-			disabled,
-			readOnly,
-			"aria-invalid": ariaInvalid || void 0,
-			className: "pl-0"
-		})]
+				readOnly,
+				"aria-invalid": ariaInvalid || void 0,
+				className: "pl-0"
+			}),
+			rightAddon ? /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				"data-slot": "phone-right-addon",
+				className: "gap-2 self-stretch py-0",
+				children: rightAddon
+			}) : null
+		]
 	});
 }
 //#endregion

package/dist/picker-BTXBrsl4.js

@@ -0,0 +1,62 @@
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses } from "./size-context.js";
+import { Button } from "./button.js";
+import { useInputComponentSizeValue } 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 pickerTriggerSizeVariants = {
+	sm: "h-8 px-3 text-gdt-xs [&_svg]:size-3.5",
+	md: "h-10 px-3.5 text-gdt-sm [&_svg]:size-4",
+	lg: "h-12 px-4 text-gdt-md [&_svg]:size-4.5",
+	xl: "h-14 px-4.5 text-gdt-lg [&_svg]:size-5"
+};
+const pickerTriggerVariants = cva("flex w-full items-center justify-between rounded-full border transition-[border-color,box-shadow] outline-none", {
+	variants: { size: pickerTriggerSizeVariants },
+	defaultVariants: { size: "md" }
+});
+function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, size, className }) {
+	const resolvedSize = responsiveValueClasses(useInputComponentSizeValue(size), responsivePickerTriggerSizes);
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		"data-size": resolvedSize.base,
+		className: cn(pickerTriggerVariants({ size: null }), resolvedSize.className, disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
+	});
+}
+const responsivePickerTriggerSizes = {
+	base: pickerTriggerSizeVariants,
+	md: {
+		sm: "md:h-8 md:px-3 md:text-gdt-xs md:[&_svg]:size-3.5",
+		md: "md:h-10 md:px-3.5 md:text-gdt-sm md:[&_svg]:size-4",
+		lg: "md:h-12 md:px-4 md:text-gdt-md md:[&_svg]:size-4.5",
+		xl: "md:h-14 md:px-4.5 md:text-gdt-lg md:[&_svg]:size-5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:px-3 lg:text-gdt-xs lg:[&_svg]:size-3.5",
+		md: "lg:h-10 lg:px-3.5 lg:text-gdt-sm lg:[&_svg]:size-4",
+		lg: "lg:h-12 lg:px-4 lg:text-gdt-md lg:[&_svg]:size-4.5",
+		xl: "lg:h-14 lg:px-4.5 lg:text-gdt-lg lg:[&_svg]:size-5"
+	}
+};
+function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			size: "sm",
+			onClick: onSecondary,
+			children: secondaryLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+//#endregion
+export { PickerTrigger as n, PickerFooter as t };

package/dist/{picker-CsnHtbe4.d.ts → picker-j3txxA5t.d.ts}

@@ -1,5 +1,5 @@
-import "./input-size-context-C-SFx9sx.js";
-import { r as PopoverContent } from "./popover-DSlPeH7x.js";
+import "./input-size-context-BMhves-J.js";
+import { r as PopoverContent } from "./popover-CNymD33m.js";
 import "./icons-C9JXR5Xv.js";
 import * as React from "react";
 //#region src/lib/picker.d.ts

package/dist/pie-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { Pie, PieChart as PieChart$1 } from "recharts";

package/dist/{popover-DSlPeH7x.d.ts → popover-CNymD33m.d.ts}

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/popover.d.ts

package/dist/popover.d.ts

@@ -1,2 +1,2 @@
-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";
+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-CNymD33m.js";
 export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };

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

@@ -1,5 +1,5 @@
-import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
-import { Carousel, CarouselIndicator, CarouselItem } from "./carousel.js";
+import { n as ButtonLink, t as Button } from "./button-BS5KCibF.js";
+import { Carousel, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious } from "./carousel.js";
 import { ImageProps } from "./image.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
@@ -58,6 +58,10 @@ declare function PropertyListingCardMedia({ className, images, children, ...prop
  * carousel part works here, including `CarouselPrevious`/`CarouselNext`.
  */
 declare function PropertyListingCardCarousel({ className, opts, ...props }: React.ComponentProps<typeof Carousel>): React.JSX.Element;
+/** Previous-photo control, revealed when the carousel is hovered or focused. */
+declare function PropertyListingCardCarouselPrevious({ className, ...props }: React.ComponentProps<typeof CarouselPrevious>): React.JSX.Element;
+/** Next-photo control, revealed when the carousel is hovered or focused. */
+declare function PropertyListingCardCarouselNext({ className, ...props }: React.ComponentProps<typeof CarouselNext>): 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
@@ -88,4 +92,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, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardCarouselNext, PropertyListingCardCarouselPrevious, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, type PropertyListingCardProps, PropertyListingCardTitle, type PropertyListingImage, propertyListingCardVariants };

package/dist/property-listing-card.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "./utils/cn.js";
 import { Button, ButtonLink } from "./button.js";
-import { Carousel, CarouselContent, CarouselIndicator, CarouselItem } from "./carousel.js";
+import { Carousel, CarouselContent, CarouselIndicator, CarouselItem, CarouselNext, CarouselPrevious } from "./carousel.js";
 import { Image } from "./image.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -53,7 +53,12 @@ function PropertyListingCardMedia({ className, images, children, ...props }) {
 }
 /** 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.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, {}),
+		/* @__PURE__ */ jsx(PropertyListingCardCarouselPrevious, {}),
+		/* @__PURE__ */ jsx(PropertyListingCardCarouselNext, {})
+	] });
 	if (images[0]?.src) return /* @__PURE__ */ jsx(PropertyListingCardImage, {
 		image: images[0],
 		className: "absolute inset-0 -z-10"
@@ -69,11 +74,23 @@ 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),
+		opts,
+		className: cn("group/property-listing-carousel absolute inset-0 -z-10 size-full rounded-none bg-surface", className),
+		...props
+	});
+}
+const propertyListingCardCarouselControlClassName = "size-9 border-white/35 bg-black/50 text-white opacity-0 shadow-[0_4px_16px_rgb(0_0_0/0.28)] backdrop-blur-md transition-[background-color,opacity,scale] hover:scale-105 hover:bg-black/70 group-hover/property-listing-carousel:opacity-100 group-focus-within/property-listing-carousel:opacity-100 focus-visible:opacity-100 focus-visible:shadow-[0_0_0_2px_var(--color-line-focus),0_4px_16px_rgb(0_0_0/0.28)] active:hover:scale-[0.97] disabled:opacity-0 group-hover/property-listing-carousel:disabled:opacity-40 group-focus-within/property-listing-carousel:disabled:opacity-40 disabled:hover:scale-100 [&_svg]:mx-auto [&_svg]:size-[18px]";
+/** Previous-photo control, revealed when the carousel is hovered or focused. */
+function PropertyListingCardCarouselPrevious({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CarouselPrevious, {
+		className: cn(propertyListingCardCarouselControlClassName, "left-3", className),
+		...props
+	});
+}
+/** Next-photo control, revealed when the carousel is hovered or focused. */
+function PropertyListingCardCarouselNext({ className, ...props }) {
+	return /* @__PURE__ */ jsx(CarouselNext, {
+		className: cn(propertyListingCardCarouselControlClassName, "right-3", className),
 		...props
 	});
 }
@@ -184,4 +201,4 @@ function PropertyListingCardActionButtonLink({ className, ...props }) {
 	});
 }
 //#endregion
-export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };
+export { PropertyListingCard, PropertyListingCardActionButton, PropertyListingCardActionButtonLink, PropertyListingCardActions, PropertyListingCardBadges, PropertyListingCardCarousel, PropertyListingCardCarouselIndicator, PropertyListingCardCarouselItem, PropertyListingCardCarouselNext, PropertyListingCardCarouselPrevious, PropertyListingCardDetails, PropertyListingCardImage, PropertyListingCardImagePlaceholder, PropertyListingCardMedia, PropertyListingCardMediaTop, PropertyListingCardOptionsBar, PropertyListingCardOverview, PropertyListingCardTitle, propertyListingCardVariants };

package/dist/radar-chart.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart as RadarChart$1 } from "recharts";

package/dist/radio-group.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 //#region src/radio-group.d.ts
@@ -6,7 +6,7 @@ declare function RadioGroup({ className, ...props }: RadioGroup$1.Props): import
 declare const radioVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type RadioGroupItemSize = NonNullable<VariantProps<typeof radioVariants>["size"]>;
+type RadioGroupItemSize = ComponentSizeValue;
 type RadioGroupItemProps<Value = unknown> = Radio.Root.Props<Value> & {
   size?: RadioGroupItemSize;
 };

package/dist/radio-group.js

@@ -1,11 +1,16 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 //#region src/radio-group.tsx
+const radioSizeVariants = {
+	sm: "size-4 [--radio-dot-size:0.625rem]",
+	md: "size-5 [--radio-dot-size:0.75rem]",
+	lg: "size-6 [--radio-dot-size:0.875rem]"
+};
 function RadioGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
@@ -13,11 +18,7 @@ function RadioGroup({ className, ...props }) {
 		...props
 	});
 }
-const radioVariants = cva("group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100 size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]", { variants: { size: {
-	sm: "size-4 [--radio-dot-size:0.625rem]",
-	md: "size-5 [--radio-dot-size:0.75rem]",
-	lg: "size-6 [--radio-dot-size:0.875rem]"
-} } });
+const radioVariants = cva("group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100", { variants: { size: radioSizeVariants } });
 /**
 * Compose each radio item with the shared field primitives.
 *
@@ -34,11 +35,11 @@ const radioVariants = cva("group/radio-group-item peer relative flex aspect-squa
 * ```
 */
 function RadioGroupItem({ className, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveRadioSizes);
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "radio-group-item",
-		"data-size": resolvedSize,
-		className: cn(radioVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(radioVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Radio.Indicator, {
 			"data-slot": "radio-group-indicator",
@@ -47,5 +48,18 @@ function RadioGroupItem({ className, size, ...props }) {
 		})
 	});
 }
+const responsiveRadioSizes = {
+	base: radioSizeVariants,
+	md: {
+		sm: "md:size-4 md:[--radio-dot-size:0.625rem]",
+		md: "md:size-5 md:[--radio-dot-size:0.75rem]",
+		lg: "md:size-6 md:[--radio-dot-size:0.875rem]"
+	},
+	lg: {
+		sm: "lg:size-4 lg:[--radio-dot-size:0.625rem]",
+		md: "lg:size-5 lg:[--radio-dot-size:0.75rem]",
+		lg: "lg:size-6 lg:[--radio-dot-size:0.875rem]"
+	}
+};
 //#endregion
 export { RadioGroup, RadioGroupItem, radioVariants };

package/dist/rating.d.ts

@@ -0,0 +1,60 @@
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
+import { j as IconProps } from "./icons-C9JXR5Xv.js";
+import * as React from "react";
+//#region src/rating.d.ts
+/** How finely a rating can be *set*. Display always honours the exact value. */
+type RatingPrecision = 1 | 0.5;
+type RatingIcon = React.ComponentType<IconProps>;
+interface RatingProps {
+  /** Controlled rating. Fractions render as partially filled icons. */
+  value?: number;
+  /** Starting rating when the component owns its own state. */
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  /** How many icons to render. */
+  max?: number;
+  /** Smallest increment a reader can pick. Display is not rounded to it. */
+  precision?: RatingPrecision;
+  size?: ComponentSizeValue;
+  /** Renders the score as an image instead of a control. */
+  readOnly?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /** Groups the radios and names the value in submitted form data. */
+  name?: string;
+  id?: string;
+  /** Accessible name for each option, e.g. `(value) => \`${value} stars\``. */
+  itemLabel?: (value: number, max: number) => string;
+  /** Swaps the glyph. Anything that takes SVG props and paints `currentColor`. */
+  icon?: RatingIcon;
+  /**
+   * Overrides the icon box for a size the `sm`/`md`/`lg` scale does not cover
+   * — `iconClassName="size-9"`. Merged after the scale, so it wins outright.
+   */
+  iconClassName?: string;
+  className?: string;
+  onBlur?: React.FocusEventHandler<HTMLElement>;
+  /** The `div` that groups the radios, or the `span` when `readOnly`. */
+  ref?: React.Ref<HTMLElement>;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+}
+/**
+ * A star rating that reads and writes.
+ *
+ * Interactive ratings are a group of real radio inputs — one per selectable
+ * value — visually replaced by the icons. That is deliberate: it buys native
+ * arrow-key navigation, native form submission under `name`, and the
+ * "3 of 5, radio button 3 of 5" announcement, none of which a div with click
+ * handlers gets for free.
+ *
+ * ```tsx
+ * <Rating defaultValue={4} onValueChange={setRating} />
+ * <Rating value={4.3} readOnly />
+ * ```
+ */
+declare function Rating({ value, defaultValue, onValueChange, max, precision, size, readOnly, disabled, required, name, id, itemLabel, icon, iconClassName, className, onBlur, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: RatingProps): React.JSX.Element;
+//#endregion
+export { Rating, type RatingIcon, type RatingPrecision, type RatingProps };