@giddaa-housing/ui 3.6.0 → 3.7.0

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

package/dist/rating.js

@@ -0,0 +1,187 @@
+"use client";
+import { Star } from "./icons.js";
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/rating.tsx
+const ratingIconSizes = {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6"
+};
+const ratingGapSizes = {
+	sm: "gap-0.5",
+	md: "gap-1",
+	lg: "gap-1.5"
+};
+const responsiveIconSizes = {
+	base: ratingIconSizes,
+	md: {
+		sm: "md:size-4",
+		md: "md:size-5",
+		lg: "md:size-6"
+	},
+	lg: {
+		sm: "lg:size-4",
+		md: "lg:size-5",
+		lg: "lg:size-6"
+	}
+};
+const responsiveGapSizes = {
+	base: ratingGapSizes,
+	md: {
+		sm: "md:gap-0.5",
+		md: "md:gap-1",
+		lg: "md:gap-1.5"
+	},
+	lg: {
+		sm: "lg:gap-0.5",
+		md: "lg:gap-1",
+		lg: "lg:gap-1.5"
+	}
+};
+function clampRating(value, max) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(max, Math.max(0, value));
+}
+/**
+* How much of the star at `index` (1-based) the value fills, as a percentage.
+* Rounded because `4.3 - 4` is `0.30000000000000027` in binary floating point,
+* and that number should not reach the DOM as a width.
+*/
+function getIconFill(index, value) {
+	const fill = Math.min(1, Math.max(0, value - (index - 1)));
+	return Math.round(fill * 1e4) / 100;
+}
+function formatRatingValue(value) {
+	return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+function defaultItemLabel(value, max) {
+	return `${formatRatingValue(value)} of ${max}`;
+}
+/** Every value a reader can pick, low to high: `[0.5, 1, 1.5, …]` or `[1, 2, …]`. */
+function getSelectableValues(max, precision) {
+	const steps = Math.round(max / precision);
+	return Array.from({ length: steps }, (_, step) => (step + 1) * precision);
+}
+function RatingIconPair({ fill, icon: Icon, sizeClassName }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": "true",
+		"data-slot": "rating-icon",
+		className: cn("block shrink-0 text-line-strong transition-colors", sizeClassName)
+	}), fill > 0 ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "rating-icon-fill",
+		className: "pointer-events-none absolute inset-y-0 left-0 overflow-hidden text-line-focus",
+		style: { width: `${fill}%` },
+		children: /* @__PURE__ */ jsx(Icon, {
+			fill: "currentColor",
+			className: cn("block max-w-none shrink-0 transition-colors", sizeClassName)
+		})
+	}) : null] });
+}
+/**
+* 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 />
+* ```
+*/
+function Rating({ value, defaultValue, onValueChange, max = 5, precision = 1, size, readOnly = false, disabled = false, required = false, name, id, itemLabel = defaultItemLabel, icon = Star, iconClassName, className, onBlur, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const generatedName = React.useId();
+	const [current, setCurrent] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: 0,
+		onChange: onValueChange
+	});
+	const [preview, setPreview] = React.useState(null);
+	const sizeValue = useComponentSizeValue(size);
+	const iconSizes = responsiveValueClasses(sizeValue, responsiveIconSizes);
+	const gapSizes = responsiveValueClasses(sizeValue, responsiveGapSizes);
+	const iconBox = cn(iconSizes.className, iconClassName);
+	const interactive = !readOnly;
+	const displayed = clampRating(interactive && preview !== null ? preview : current, max);
+	const icons = Array.from({ length: max }, (_, index) => index + 1);
+	const rootProps = {
+		"data-slot": "rating",
+		"data-size": iconSizes.base,
+		"data-size-md": iconSizes.responsive ? iconSizes.md : void 0,
+		"data-size-lg": iconSizes.responsive ? iconSizes.lg : void 0,
+		className: cn("inline-flex w-fit shrink-0 items-center", gapSizes.className, className)
+	};
+	if (!interactive) return /* @__PURE__ */ jsx("span", {
+		...rootProps,
+		ref,
+		id,
+		"aria-label": ariaLabel ?? itemLabel(displayed, max),
+		"data-readonly": "true",
+		role: "img",
+		children: icons.map((index) => /* @__PURE__ */ jsx("span", {
+			className: cn("relative inline-flex shrink-0", iconBox),
+			children: /* @__PURE__ */ jsx(RatingIconPair, {
+				fill: getIconFill(index, displayed),
+				icon,
+				sizeClassName: iconBox
+			})
+		}, index))
+	});
+	const groupName = name ?? generatedName;
+	const selectable = getSelectableValues(max, precision);
+	return /* @__PURE__ */ jsx("div", {
+		...rootProps,
+		ref,
+		id,
+		role: "radiogroup",
+		"aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? "Rating",
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid || void 0,
+		"aria-required": required || void 0,
+		"data-disabled": disabled || void 0,
+		onBlur,
+		onPointerLeave: () => setPreview(null),
+		className: cn(rootProps.className, disabled && "cursor-not-allowed opacity-60"),
+		children: icons.map((index) => {
+			const values = selectable.filter((item) => item > index - 1 && item <= index);
+			return /* @__PURE__ */ jsxs("span", {
+				"data-slot": "rating-item",
+				className: cn("relative inline-flex shrink-0 transition-[scale] duration-[var(--duration-motion-press)] ease-gdt-out", !disabled && "active:scale-[0.97] motion-reduce:active:scale-100", iconBox),
+				children: [/* @__PURE__ */ jsx(RatingIconPair, {
+					fill: getIconFill(index, displayed),
+					icon,
+					sizeClassName: iconBox
+				}), values.map((item, position) => /* @__PURE__ */ jsx("label", {
+					"data-slot": "rating-control",
+					"data-value": item,
+					onPointerEnter: () => {
+						if (!disabled) setPreview(item);
+					},
+					className: cn("absolute inset-y-0 rounded-[3px]", "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-line-focus has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-canvas", disabled ? "cursor-not-allowed" : "cursor-pointer", values.length === 1 ? "left-0 w-full" : position === 0 ? "left-0 w-1/2" : "right-0 w-1/2"),
+					children: /* @__PURE__ */ jsx("input", {
+						type: "radio",
+						className: "sr-only",
+						name: groupName,
+						value: item,
+						checked: current === item,
+						disabled,
+						required: required && item === selectable[0],
+						"aria-label": itemLabel(item, max),
+						onChange: () => setCurrent(item)
+					})
+				}, item))]
+			}, index);
+		})
+	});
+}
+//#endregion
+export { Rating };

package/dist/select.js

@@ -113,6 +113,40 @@ const responsiveSelectBodySizes = {
 		lg: "lg:p-2"
 	}
 };
+const responsiveSelectEdgeSizes = {
+	base: {
+		sm: "px-4",
+		md: "px-5.5",
+		lg: "px-6"
+	},
+	md: {
+		sm: "md:px-4",
+		md: "md:px-5.5",
+		lg: "md:px-6"
+	},
+	lg: {
+		sm: "lg:px-4",
+		md: "lg:px-5.5",
+		lg: "lg:px-6"
+	}
+};
+const responsiveSelectLabelSizes = {
+	base: {
+		sm: "px-3",
+		md: "px-4",
+		lg: "px-4"
+	},
+	md: {
+		sm: "md:px-3",
+		md: "md:px-4",
+		lg: "md:px-4"
+	},
+	lg: {
+		sm: "lg:px-3",
+		md: "lg:px-4",
+		lg: "lg:px-4"
+	}
+};
 function SelectGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Group, {
 		"data-slot": "select-group",
@@ -175,7 +209,7 @@ function SelectHeader({ className, type = "button", ...props }) {
 	return /* @__PURE__ */ jsx("button", {
 		type,
 		"data-slot": "select-header",
-		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-t-[inherit] border-line-subtle border-b bg-canvas px-3 py-2 text-left text-gdt-sm font-bold text-fg-brand outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-brand-subtle disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-t-[inherit] border-line-subtle border-b bg-canvas py-2 text-left text-gdt-sm font-bold text-fg-brand outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-brand-subtle disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", responsiveValueClasses(useComponentSizeValue(), responsiveSelectEdgeSizes).className, className),
 		...props
 	});
 }
@@ -183,14 +217,15 @@ function SelectFooter({ className, type = "button", ...props }) {
 	return /* @__PURE__ */ jsx("button", {
 		type,
 		"data-slot": "select-footer",
-		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-b-[inherit] border-line-subtle border-t bg-canvas px-3 py-2 text-left text-gdt-sm font-semibold text-fg-secondary outline-none transition-colors hover:bg-surface focus-visible:bg-surface focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-raised disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-b-[inherit] border-line-subtle border-t bg-canvas py-2 text-left text-gdt-sm font-semibold text-fg-secondary outline-none transition-colors hover:bg-surface focus-visible:bg-surface focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-raised disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", responsiveValueClasses(useComponentSizeValue(), responsiveSelectEdgeSizes).className, className),
 		...props
 	});
 }
 function SelectLabel({ className, ...props }) {
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectLabelSizes);
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		"data-slot": "select-label",
-		className: cn("px-3 py-1 text-gdt-xs text-fg-secondary", className),
+		className: cn("py-1 text-gdt-xs text-fg-secondary", resolvedSize.className, className),
 		...props
 	});
 }

package/dist/sheet.d.ts

@@ -9,6 +9,8 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: SheetSide;
   showCloseButton?: boolean;
   showOverlay?: boolean;
+  /** Controls the visual response when this surface participates in a nested dialog stack. */
+  nestingEffect?: "stack" | "none";
   /** @internal Positions specialized popup shells without changing the surface. */
   popupClassName?: string;
 } & ({
@@ -18,7 +20,7 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: "left" | "right";
   size?: "sm" | "md" | "lg";
 });
-declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, popupClassName, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, nestingEffect, popupClassName, ...props }: SheetContentProps): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/sheet.js

@@ -3,16 +3,15 @@ import { X } from "./icons.js";
 import { cn } from "./utils/cn.js";
 import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
-import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/sheet.tsx
 function Sheet({ ...props }) {
-	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "sheet",
 		...props
-	}) });
+	});
 }
 function SheetTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
@@ -26,23 +25,22 @@ function SheetClose({ ...props }) {
 		...props
 	});
 }
-function SheetPortal({ ...props }) {
+function SheetPortal({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Portal, {
 		"data-slot": "sheet-portal",
+		className: (state) => cn("group/sheet-portal", typeof className === "function" ? className(state) : className),
 		...props
 	});
 }
 function SheetOverlay({ className, ...props }) {
-	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		forceRender: true,
 		"data-slot": "sheet-overlay",
-		"data-nested": nested || void 0,
-		className: cn("fixed inset-0 z-50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
+		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xl group-has-[>.is-nested-dialog]/sheet-portal:bg-black/25 supports-backdrop-filter:group-has-[>.is-nested-dialog]/sheet-portal:backdrop-blur-none", className),
 		...props
 	});
 }
-const sheetContentVariants = cva("group/sheet-content pointer-events-none fixed z-50 overflow-visible transition-[opacity,scale,translate] duration-[var(--duration-motion-surface)] ease-gdt-drawer data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 data-[side=bottom]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=top]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*1.5rem)] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*1.5rem)] data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=bottom]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)] data-[side=top]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)]", {
+const sheetContentVariants = cva("group/sheet-content pointer-events-none fixed z-50 overflow-visible transition-[opacity,scale,translate] duration-[var(--duration-motion-surface)] ease-gdt-drawer data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0", {
 	variants: { size: {
 		sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
 		md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
@@ -51,7 +49,7 @@ const sheetContentVariants = cva("group/sheet-content pointer-events-none fixed
 	} },
 	defaultVariants: { size: "md" }
 });
-function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, popupClassName, ...props }) {
+function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, nestingEffect = "stack", popupClassName, ...props }) {
 	const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize === "fullscreen" ? "lg" : resolvedSize,
@@ -59,7 +57,8 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 			"data-slot": "sheet-content",
 			"data-side": side,
 			"data-size": resolvedSize,
-			className: cn(sheetContentVariants({ size: resolvedSize }), popupClassName),
+			"data-nesting-effect": nestingEffect,
+			className: (state) => cn(sheetContentVariants({ size: resolvedSize }), nestingEffect === "stack" && state.nested && "is-nested-dialog", nestingEffect === "stack" && "data-[side=bottom]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=top]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*1.5rem)] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*1.5rem)] data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=bottom]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)] data-[side=top]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)]", popupClassName),
 			...props,
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-slot": "sheet-surface",
@@ -69,7 +68,7 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 				"data-slot": "sheet-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
-					className: "pointer-events-auto absolute z-10 size-7 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[nested-dialog-open]/sheet-content:hidden group-data-[side=bottom]/sheet-content:-top-9 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-9 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-9 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-9 group-data-[side=right]/sheet-content:top-4",
+					className: cn("pointer-events-auto absolute z-10 size-7 border border-line bg-surface p-0 text-fg-primary shadow-(--elevation-e1-shadow) hover:bg-surface-raised group-data-[side=bottom]/sheet-content:-top-9 group-data-[side=bottom]/sheet-content:right-4 group-data-[side=top]/sheet-content:-bottom-9 group-data-[side=top]/sheet-content:right-4 group-data-[side=left]/sheet-content:-right-9 group-data-[side=left]/sheet-content:top-4 group-data-[side=right]/sheet-content:-left-9 group-data-[side=right]/sheet-content:top-4", nestingEffect === "stack" && "group-data-[nested-dialog-open]/sheet-content:hidden"),
 					size: "icon-xs",
 					children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",