@giddaa-housing/ui 3.5.0 → 3.6.0

package/dist/match.js

@@ -1,55 +1,124 @@
 "use client";
 import { ChevronDown } from "./icons.js";
 import { cn } from "./utils/cn.js";
+import { resolveResponsiveComponentSize, useComponentSizeValue } from "./size-context.js";
 import { CircularProgress } from "./progress.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/match.tsx
-const matchVariants = cva("inline-flex h-8 w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
-	variants: { variant: {
-		bar: "gap-2 px-3",
-		donut: "gap-3 pl-2 pr-3"
-	} },
-	defaultVariants: { variant: "bar" }
+const matchVariants = cva("inline-flex w-fit shrink-0 items-center rounded-full border border-line-subtle bg-surface text-fg-primary shadow-none transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-60", {
+	variants: {
+		variant: {
+			bar: "",
+			donut: ""
+		},
+		size: {
+			sm: "h-7 text-gdt-subtext",
+			md: "h-8 text-gdt-xs",
+			lg: "h-10 text-gdt-sm"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "bar",
+			size: "sm",
+			className: "gap-1.5 px-2.5"
+		},
+		{
+			variant: "bar",
+			size: "md",
+			className: "gap-2 px-3"
+		},
+		{
+			variant: "bar",
+			size: "lg",
+			className: "gap-2.5 px-3.5"
+		},
+		{
+			variant: "donut",
+			size: "sm",
+			className: "gap-2 pl-1.5 pr-2.5"
+		},
+		{
+			variant: "donut",
+			size: "md",
+			className: "gap-3 pl-2 pr-3"
+		},
+		{
+			variant: "donut",
+			size: "lg",
+			className: "gap-3.5 pl-2.5 pr-3.5"
+		}
+	],
+	defaultVariants: {
+		variant: "bar",
+		size: "md"
+	}
 });
+const matchDonutSizes = {
+	sm: {
+		pixelSize: 20,
+		strokeWidth: 3
+	},
+	md: {
+		pixelSize: 24,
+		strokeWidth: 4
+	},
+	lg: {
+		pixelSize: 28,
+		strokeWidth: 4
+	}
+};
+const matchBarSizes = {
+	sm: "h-1 w-12",
+	md: "h-1.5 w-15",
+	lg: "h-2 w-18"
+};
+const matchChevronSizes = {
+	sm: "size-2.5",
+	md: "size-3",
+	lg: "size-3.5"
+};
 function normalizeMatchValue(value) {
 	if (!Number.isFinite(value)) return 0;
 	return Math.min(100, Math.max(0, Math.round(value)));
 }
-function Match({ className, value, variant = "bar", label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+function Match({ className, value, variant = "bar", size, label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSizes = resolveResponsiveComponentSize(sizeValue);
+	const responsive = typeof sizeValue !== "string";
+	const resolvedVariant = variant ?? "bar";
 	const progress = normalizeMatchValue(value);
 	const text = `${progress}% ${label}`;
+	const rootSizeClasses = cn(matchVariants({
+		variant: resolvedVariant,
+		size: resolvedSizes.base
+	}), responsive && matchBreakpointClasses(resolvedVariant, "md", resolvedSizes.md), responsive && matchBreakpointClasses(resolvedVariant, "lg", resolvedSizes.lg));
 	return /* @__PURE__ */ jsxs("button", {
 		type,
 		"aria-label": ariaLabel ?? text,
 		"data-slot": "match",
-		"data-variant": variant,
-		className: cn(matchVariants({ variant }), className),
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSizes.base,
+		"data-size-md": responsive ? resolvedSizes.md : void 0,
+		"data-size-lg": responsive ? resolvedSizes.lg : void 0,
+		className: cn(rootSizeClasses, className),
 		...props,
 		children: [
-			variant === "donut" ? /* @__PURE__ */ jsx(CircularProgress, {
-				"aria-hidden": "true",
-				role: "presentation",
-				"data-slot": "match-donut",
-				value: progress,
-				pixelSize: 24,
-				strokeWidth: 4,
-				strokeLinecap: "butt",
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "sr-only",
-					children: [progress, "%"]
-				})
+			resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
+				progress,
+				sizes: resolvedSizes,
+				responsive
 			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "match-label",
-				className: "shrink-0 text-[10px] font-bold leading-3",
+				className: "shrink-0 font-bold",
 				children: text
 			}),
-			variant === "bar" ? /* @__PURE__ */ jsx("span", {
+			resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				"data-slot": "match-bar-track",
-				className: "relative h-1.5 w-15 shrink-0 overflow-hidden rounded-full bg-surface-raised",
+				className: cn("relative shrink-0 overflow-hidden rounded-full bg-surface-raised", matchBarSizes[resolvedSizes.base], responsive && responsiveClass("md", matchBarSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchBarSizes[resolvedSizes.lg])),
 				children: /* @__PURE__ */ jsx("span", {
 					"data-slot": "match-bar-fill",
 					className: "absolute inset-y-0 left-0 rounded-full bg-action-primary",
@@ -59,10 +128,97 @@ function Match({ className, value, variant = "bar", label = "Match", showChevron
 			showChevron ? /* @__PURE__ */ jsx(ChevronDown, {
 				"aria-hidden": "true",
 				"data-slot": "match-chevron",
-				className: "size-3 shrink-0 text-fg-secondary"
+				className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
 			}) : null
 		]
 	});
 }
+const responsiveSizeClasses = {
+	md: {
+		sm: "md:h-7 md:text-gdt-subtext",
+		md: "md:h-8 md:text-gdt-xs",
+		lg: "md:h-10 md:text-gdt-sm"
+	},
+	lg: {
+		sm: "lg:h-7 lg:text-gdt-subtext",
+		md: "lg:h-8 lg:text-gdt-xs",
+		lg: "lg:h-10 lg:text-gdt-sm"
+	}
+};
+const responsiveVariantClasses = {
+	md: {
+		bar: {
+			sm: "md:gap-1.5 md:px-2.5",
+			md: "md:gap-2 md:px-3",
+			lg: "md:gap-2.5 md:px-3.5"
+		},
+		donut: {
+			sm: "md:gap-2 md:pl-1.5 md:pr-2.5",
+			md: "md:gap-3 md:pl-2 md:pr-3",
+			lg: "md:gap-3.5 md:pl-2.5 md:pr-3.5"
+		}
+	},
+	lg: {
+		bar: {
+			sm: "lg:gap-1.5 lg:px-2.5",
+			md: "lg:gap-2 lg:px-3",
+			lg: "lg:gap-2.5 lg:px-3.5"
+		},
+		donut: {
+			sm: "lg:gap-2 lg:pl-1.5 lg:pr-2.5",
+			md: "lg:gap-3 lg:pl-2 lg:pr-3",
+			lg: "lg:gap-3.5 lg:pl-2.5 lg:pr-3.5"
+		}
+	}
+};
+function matchBreakpointClasses(variant, breakpoint, size) {
+	return cn(responsiveSizeClasses[breakpoint][size], responsiveVariantClasses[breakpoint][variant][size]);
+}
+const responsiveTokenClasses = {
+	md: {
+		"h-1 w-12": "md:h-1 md:w-12",
+		"h-1.5 w-15": "md:h-1.5 md:w-15",
+		"h-2 w-18": "md:h-2 md:w-18",
+		"size-2.5": "md:size-2.5",
+		"size-3": "md:size-3",
+		"size-3.5": "md:size-3.5"
+	},
+	lg: {
+		"h-1 w-12": "lg:h-1 lg:w-12",
+		"h-1.5 w-15": "lg:h-1.5 lg:w-15",
+		"h-2 w-18": "lg:h-2 lg:w-18",
+		"size-2.5": "lg:size-2.5",
+		"size-3": "lg:size-3",
+		"size-3.5": "lg:size-3.5"
+	}
+};
+function responsiveClass(breakpoint, className) {
+	return responsiveTokenClasses[breakpoint][className];
+}
+function MatchDonut({ progress, sizes, responsive }) {
+	return (responsive ? [
+		"base",
+		"md",
+		"lg"
+	] : ["base"]).map((breakpoint) => {
+		const size = sizes[breakpoint];
+		const dimensions = matchDonutSizes[size];
+		const visibility = responsive ? breakpoint === "base" ? "md:hidden" : breakpoint === "md" ? "hidden md:grid lg:hidden" : "hidden lg:grid" : "";
+		return /* @__PURE__ */ jsx(CircularProgress, {
+			"aria-hidden": "true",
+			role: "presentation",
+			"data-slot": "match-donut",
+			value: progress,
+			pixelSize: dimensions.pixelSize,
+			strokeWidth: dimensions.strokeWidth,
+			strokeLinecap: "butt",
+			className: cn("shrink-0", visibility),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [progress, "%"]
+			})
+		}, breakpoint);
+	});
+}
 //#endregion
 export { Match, matchVariants };

package/dist/media-gallery-hero.js

@@ -9,7 +9,7 @@ import { ReviewBlock } from "./review-block.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/media-gallery-hero.tsx
-const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-[32px] md:h-[380px] md:rounded-[40px] lg:h-[480px]");
+const mediaGalleryHeroVariants = cva("relative isolate h-[350px] w-full overflow-hidden rounded-none md:h-[380px] md:rounded-[40px] lg:h-[480px]");
 const mediaGalleryImagesVariants = cva("absolute inset-0 z-0 hidden size-full min-h-0 min-w-0 md:grid", {
 	variants: { imageCount: {
 		1: "",
@@ -53,7 +53,7 @@ function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick
 		className: "text-gdt-sm font-medium text-fg-caption-placeholder",
 		children: "Media"
 	}));
-	const tileClassName = cn("relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover", isDesktopTile && "hidden md:flex", className);
+	const tileClassName = cn("relative flex size-full min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-none bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover", isDesktopTile && "hidden md:flex", className);
 	if (!onMediaClick) return /* @__PURE__ */ jsx("div", {
 		className: tileClassName,
 		"data-slot": "media-gallery-tile",
@@ -71,6 +71,7 @@ function MediaGalleryTile({ className, image, index, isDesktopTile, onMediaClick
 function MobileGalleryCounter({ total }) {
 	const { selectedIndex } = useCarousel();
 	return /* @__PURE__ */ jsx(GalleryIndicator, {
+		className: "h-[35px] lg:h-[45px]",
 		currentPhoto: selectedIndex + 1,
 		size: "sm",
 		totalPhotos: total
@@ -79,17 +80,16 @@ function MobileGalleryCounter({ total }) {
 function MobileMediaCarousel({ currentMedia, images, mediaTotal, onMediaClick, renderMedia, showMobileIndicator }) {
 	const carouselImages = images.length > 0 ? images : [{}];
 	return /* @__PURE__ */ jsxs(Carousel, {
-		className: "absolute inset-0 z-0 block size-full rounded-[32px] md:hidden",
+		className: "absolute inset-0 z-0 block size-full rounded-none md:hidden",
 		imageSize: "full",
 		opts: {
 			align: "start",
-			loop: carouselImages.length > 1,
 			startIndex: Math.max(0, currentMedia - 1)
 		},
 		children: [/* @__PURE__ */ jsx(CarouselContent, { children: carouselImages.map((image, index) => /* @__PURE__ */ jsx(CarouselItem, {
 			className: "h-full",
 			children: /* @__PURE__ */ jsx(MediaGalleryTile, {
-				className: "rounded-[32px]",
+				className: "rounded-none",
 				image,
 				index,
 				onMediaClick,
@@ -148,7 +148,7 @@ function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "P
 		children: "Video"
 	}));
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("absolute inset-0 z-0 flex size-full items-center justify-center overflow-hidden rounded-[32px] bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", className),
+		className: cn("absolute inset-0 z-0 flex size-full items-center justify-center overflow-hidden rounded-none bg-surface-raised md:rounded-[40px]", "[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover", className),
 		"data-slot": "media-gallery-video",
 		...props,
 		children: [content, controls ? null : /* @__PURE__ */ jsx("button", {
@@ -156,7 +156,7 @@ function MediaGalleryVideo({ alt = "", autoPlay, className, controls, label = "P
 			className: cn(buttonVariants({
 				variant: "glass-overlay",
 				size: "icon-xl"
-			}), "absolute top-1/2 left-1/2 z-10 size-20 -translate-x-1/2 -translate-y-1/2 active:not-aria-[haspopup]:-translate-y-1/2 md:size-24"),
+			}), "absolute top-1/2 left-1/2 z-10 size-[35px] -translate-x-1/2 -translate-y-1/2 active:not-aria-[haspopup]:-translate-y-1/2 lg:size-[45px] [&>svg]:size-4 lg:[&>svg]:size-5"),
 			"data-slot": "media-gallery-video-play",
 			onClick: onPlayClick,
 			type: "button",
@@ -187,6 +187,7 @@ function MediaGalleryIndicator({ "aria-label": ariaLabel, className, label, onCl
 		...props,
 		children: /* @__PURE__ */ jsx(GalleryIndicator, {
 			"aria-hidden": "true",
+			className: "h-[35px] lg:h-[45px]",
 			label: indicatorLabel,
 			size
 		})
@@ -195,6 +196,7 @@ function MediaGalleryIndicator({ "aria-label": ariaLabel, className, label, onCl
 		className: cn("absolute right-4 bottom-4 z-10 hidden md:block", className),
 		"data-slot": "media-gallery-indicator",
 		children: /* @__PURE__ */ jsx(GalleryIndicator, {
+			className: "h-[35px] lg:h-[45px]",
 			label: indicatorLabel,
 			size
 		})

package/dist/mobile-sidebar.js

@@ -27,6 +27,7 @@ function MobileSidebarContent({ className, showCloseButton = false, ...props })
 		side: "right",
 		size: "sm",
 		showCloseButton,
+		popupClassName: "h-dvh w-[min(100vw,24.375rem)]",
 		className: cn("h-dvh w-[min(100vw,24.375rem)] rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
 		...props
 	});

package/dist/number-input.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { NumberFieldRootProps } from "@base-ui/react/number-field";
 //#region src/number-input.d.ts
@@ -32,7 +32,7 @@ type NumberInputProps = Omit<NumberFieldRootProps, "format"> & {
   format?: Intl.NumberFormatOptions;
   formatPreset?: NumberInputFormatPreset;
   placeholder?: string;
-  size?: ComponentSize;
+  size?: ComponentSizeValue;
   thousandSeparator?: boolean;
 };
 declare function NumberInput({ children, format, formatPreset, placeholder, size, thousandSeparator, ...props }: NumberInputProps): React.JSX.Element;

package/dist/number-input.js

@@ -1,7 +1,7 @@
 "use client";
 import { Minus, Plus } from "./icons.js";
 import { cn } from "./utils/cn.js";
-import { SizeProvider, useComponentSize } from "./size-context.js";
+import { SizeProvider, useComponentSize, useComponentSizeValue } from "./size-context.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
@@ -25,7 +25,7 @@ const numberInputFormatPresets = {
 	plain: { useGrouping: false }
 };
 function NumberInput({ children, format, formatPreset, placeholder, size, thousandSeparator, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = useComponentSizeValue(size);
 	const resolvedFormat = format ?? (formatPreset ? numberInputFormatPresets[formatPreset] : void 0) ?? (thousandSeparator ? numberInputFormatPresets.decimal : void 0);
 	return /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize,

package/dist/pagination.d.ts

@@ -1,4 +1,4 @@
-import { n as ButtonLink, t as Button } from "./button-DW5OijoR.js";
+import { n as ButtonLink, t as Button } from "./button-BS5KCibF.js";
 import * as React from "react";
 //#region src/pagination.d.ts
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;

package/dist/phone-input.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { CountryCode } from "libphonenumber-js";
 //#region src/phone-input.d.ts
@@ -6,7 +6,7 @@ interface PhoneInputProps {
   value?: string;
   onChange?: (value: string | undefined) => void;
   defaultCountry?: CountryCode;
-  size?: ComponentSize;
+  size?: ComponentSizeValue;
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;

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";
@@ -168,7 +168,8 @@ 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);
+	const sizeValue = useComponentSizeValue(size);
+	const resolvedSize = resolveResponsiveComponentSize(sizeValue);
 	const inputRef = React.useRef(null);
 	const setInputRef = React.useCallback((node) => {
 		inputRef.current = node;
@@ -201,14 +202,14 @@ function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = f
 	}
 	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,
+				size: resolvedSize.base,
 				disabled,
 				onSelect: handleCountrySelect,
 				finalFocusRef: inputRef

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