@giddaa-housing/ui 3.6.0 → 3.8.0

package/dist/match.js

@@ -3,7 +3,7 @@ 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/match.tsx
 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", {
@@ -83,54 +83,71 @@ 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", size, label = "Match", showChevron = true, type = "button", "aria-label": ariaLabel, ...props }) {
+function Match({ className, value, variant = "bar", size, label = "Match", showChevron, readOnly, type = "button", disabled, onClick, ref, "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 interactive = readOnly === void 0 ? onClick !== void 0 : !readOnly;
+	const chevron = showChevron ?? interactive;
 	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,
+	const rootProps = {
 		"aria-label": ariaLabel ?? text,
 		"data-slot": "match",
 		"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),
+		className: cn(rootSizeClasses, className)
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
+			progress,
+			sizes: resolvedSizes,
+			responsive
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			"data-slot": "match-label",
+			className: "shrink-0 font-bold",
+			children: text
+		}),
+		resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "match-bar-track",
+			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",
+				style: { width: `${progress}%` }
+			})
+		}) : null,
+		chevron ? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": "true",
+			"data-slot": "match-chevron",
+			className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
+		}) : null
+	] });
+	if (!interactive) return /* @__PURE__ */ jsx("span", {
+		...rootProps,
+		"data-readonly": "true",
+		role: "img",
+		ref,
+		...props,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...rootProps,
+		type,
+		disabled,
+		onClick,
+		ref,
 		...props,
-		children: [
-			resolvedVariant === "donut" ? /* @__PURE__ */ jsx(MatchDonut, {
-				progress,
-				sizes: resolvedSizes,
-				responsive
-			}) : null,
-			/* @__PURE__ */ jsx("span", {
-				"data-slot": "match-label",
-				className: "shrink-0 font-bold",
-				children: text
-			}),
-			resolvedVariant === "bar" ? /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				"data-slot": "match-bar-track",
-				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",
-					style: { width: `${progress}%` }
-				})
-			}) : null,
-			showChevron ? /* @__PURE__ */ jsx(ChevronDown, {
-				"aria-hidden": "true",
-				"data-slot": "match-chevron",
-				className: cn("shrink-0 text-fg-secondary", matchChevronSizes[resolvedSizes.base], responsive && responsiveClass("md", matchChevronSizes[resolvedSizes.md]), responsive && responsiveClass("lg", matchChevronSizes[resolvedSizes.lg]))
-			}) : null
-		]
+		children: content
 	});
 }
 const responsiveSizeClasses = {

package/dist/media-player.js

@@ -171,7 +171,7 @@ function MediaPlayerRoot({ audio, children, className, onBlurCapture, onFocusCap
 			"data-slot": "media-player",
 			role: "region",
 			tabIndex: 0,
-			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
+			className: cn("group/media-player relative isolate block w-full overflow-hidden rounded-2xl bg-fg-primary text-fg-on-brand shadow-2 outline-none [transform:translateZ(0)]", "data-[controls=hidden]:cursor-none", "data-[audio]:bg-[image:var(--gradient-accent-forest-to-brass)]", "data-[fullscreen]:rounded-none data-[fullscreen]:shadow-none", className),
 			...props,
 			onBlurCapture: (event) => {
 				onBlurCapture?.(event);
@@ -264,7 +264,7 @@ function MediaPlayerVideo({ className, ref, ...props }) {
 			setRef(ref, node);
 		}, [ref]),
 		"data-slot": "media-player-video",
-		className: cn("block aspect-video size-full rounded-[inherit] object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
+		className: cn("block aspect-video size-full object-cover", "group-data-[fullscreen]/media-player:aspect-auto group-data-[fullscreen]/media-player:object-contain", className),
 		playsInline: true,
 		...props
 	});
@@ -891,7 +891,7 @@ function MediaPlayerError({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "media-player-error",
 		role: "alert",
-		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 rounded-[inherit] bg-canvas/85 px-6 text-center text-fg-primary backdrop-blur-sm", className),
+		className: cn("absolute inset-0 z-20 flex flex-col items-center justify-center gap-1 bg-canvas px-6 text-center text-fg-primary", className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(TriangleAlert, {

package/dist/mobile-sidebar.js

@@ -27,8 +27,8 @@ 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),
+		popupClassName: "h-dvh w-full max-w-[24.375rem]",
+		className: cn("h-dvh w-full rounded-none border-y-0 border-r-0 bg-canvas [--sheet-padding-x:1.25rem] [--sheet-padding-top:0.8125rem]", className),
 		...props
 	});
 }
@@ -81,7 +81,7 @@ function MobileSidebarNav({ className, ...props }) {
 function MobileSidebarList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "mobile-sidebar-list",
-		className: cn("flex flex-col", className),
+		className: cn("-mx-4 flex flex-col gap-1", className),
 		...props
 	});
 }
@@ -97,7 +97,7 @@ function MobileSidebarLink({ active = false, icon, className, children, render,
 		defaultTagName: "a",
 		props: mergeProps({
 			"aria-current": active ? "page" : void 0,
-			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+			className: cn("group/mobile-sidebar-link grid min-h-11 w-full grid-cols-1 items-center rounded-xl px-4 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand hover:bg-surface-brand-subtle", className),
 			children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("span", {
 				className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
 				children: [icon ? /* @__PURE__ */ jsx("span", {
@@ -127,7 +127,7 @@ function MobileSidebarGroupTrigger({ active = false, icon, className, children,
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		"data-slot": "mobile-sidebar-group-trigger",
 		"data-active": active || void 0,
-		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-2 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand", className),
+		className: cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-xl px-4 py-2.5 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-colors hover:bg-surface focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle text-fg-brand hover:bg-surface-brand-subtle", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: cn("grid min-w-0 items-center", icon ? "grid-cols-[1.25rem_minmax(0,1fr)] gap-3" : "grid-cols-1"),
@@ -154,7 +154,7 @@ function MobileSidebarGroupPanel({ className, ...props }) {
 function MobileSidebarSubList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "mobile-sidebar-sub-list",
-		className: cn("ml-8 flex flex-col pb-1", className),
+		className: cn("ml-8 flex flex-col gap-0.5 pb-2 pt-1", className),
 		...props
 	});
 }
@@ -168,7 +168,7 @@ function MobileSidebarSubheading({ className, ...props }) {
 function MobileSidebarSubLink({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("block rounded-lg px-2 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
+		props: mergeProps({ className: cn("block rounded-lg px-4 py-1.5 text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface hover:text-fg-primary focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", className) }, props),
 		render,
 		state: { slot: "mobile-sidebar-sub-link" }
 	});

package/dist/phone-input.d.ts

@@ -3,19 +3,36 @@ import * as React from "react";
 import { CountryCode } from "libphonenumber-js";
 //#region src/phone-input.d.ts
 interface PhoneInputProps {
+  /** Controlled E.164 value, e.g. `"+2348012345678"`. */
   value?: string;
   onChange?: (value: string | undefined) => void;
+  /** Country the field starts on, before anything is typed. */
   defaultCountry?: CountryCode;
   size?: ComponentSizeValue;
   disabled?: boolean;
   readOnly?: boolean;
   placeholder?: string;
+  /**
+   * Content pinned to the trailing edge of the field — a validity tick, a
+   * "Verify" button, an extension. It sits outside the number, so it never
+   * shifts as the number is formatted.
+   */
+  rightAddon?: React.ReactNode;
   className?: string;
   id?: string;
   name?: string;
   ref?: React.Ref<HTMLInputElement>;
   "aria-invalid"?: boolean;
 }
-declare function PhoneInput({ value, onChange, defaultCountry, size, disabled, readOnly, placeholder, className, id, name, ref, "aria-invalid": ariaInvalid }: PhoneInputProps): React.JSX.Element;
+/**
+ * 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.
+ */
+declare function PhoneInput({ value, onChange, defaultCountry, size, disabled, readOnly, placeholder, rightAddon, className, id, name, ref, "aria-invalid": ariaInvalid }: PhoneInputProps): React.JSX.Element;
 //#endregion
 export { type CountryCode, PhoneInput, type PhoneInputProps };

package/dist/phone-input.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,7 +226,16 @@ 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 }) {
+/**
+* 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);
@@ -176,63 +244,64 @@ function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = f
 		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: sizeValue,
 		className,
-		children: [/* @__PURE__ */ jsxs(InputGroupAddon, {
-			align: "inline-start",
-			className: "gap-2 self-stretch py-0",
-			children: [/* @__PURE__ */ jsx(CountrySelect, {
-				country,
-				size: resolvedSize.base,
+		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-j3txxA5t.d.ts → picker-qxWi9wZ1.d.ts}

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

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

@@ -4,11 +4,11 @@ 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"> & {
+type PopoverContentProps = Popover.Popup.Props & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "collisionAvoidance" | "positionMethod" | "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 PopoverContent({ className, align, alignOffset, collisionAvoidance, positionMethod, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
 declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
   border?: boolean;
 }): React.JSX.Element;

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

package/dist/popover.js

@@ -16,11 +16,12 @@ function PopoverTrigger({ ...props }) {
 		...props
 	});
 }
-function PopoverContent({ className, align = "center", alignOffset = 0, collisionAvoidance, side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
+function PopoverContent({ className, align = "center", alignOffset = 0, collisionAvoidance, positionMethod = "fixed", side = "bottom", sideOffset = 6, showArrow = true, size = "md", children, ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align,
 		alignOffset,
 		collisionAvoidance,
+		positionMethod,
 		side,
 		sideOffset,
 		className: "isolate z-50",

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