@giddaa-housing/ui 3.6.0 → 3.8.0

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

package/dist/sonar.d.ts

@@ -44,7 +44,9 @@ type SonarProps = React.ComponentProps<"span"> & VariantProps<typeof sonarWaveVa
  * child.
  *
  * The rings are painted with `box-shadow` spread, which lives outside the
- * element's box, so an ancestor with `overflow: hidden` will clip them.
+ * element's box, so an ancestor with `overflow: hidden` will clip them. They
+ * sit behind the child with its shape punched out of them, so nothing paints
+ * inside it whatever background — or none — the child has of its own.
  */
 declare function Sonar({ className, children, active, waves, size, tone, radius, style, ...props }: SonarProps): React.JSX.Element;
 //#endregion

package/dist/sonar.js

@@ -18,13 +18,56 @@ const SQUARE = {
 	borderBottomLeftRadius: "0px"
 };
 function sameCorners(a, b) {
-	return a !== null && a.borderTopLeftRadius === b.borderTopLeftRadius && a.borderTopRightRadius === b.borderTopRightRadius && a.borderBottomRightRadius === b.borderBottomRightRadius && a.borderBottomLeftRadius === b.borderBottomLeftRadius;
+	if (a === null || b === null) return a === b;
+	return a.borderTopLeftRadius === b.borderTopLeftRadius && a.borderTopRightRadius === b.borderTopRightRadius && a.borderBottomRightRadius === b.borderBottomRightRadius && a.borderBottomLeftRadius === b.borderBottomLeftRadius;
+}
+function sameMetrics(a, b) {
+	return a !== null && a.scaleX === b.scaleX && a.scaleY === b.scaleY && sameCorners(a.corners, b.corners);
+}
+/**
+* The ring is painted at its full travel and scaled *back*, so this is where it
+* starts: small enough that its outer edge lands exactly on the child's own,
+* with nothing showing yet. Growing from there to scale 1 moves that edge out
+* by `spread` — the same distance the old spread animation moved it.
+*
+* Worked out per axis on purpose: one factor for both would move a 200x40
+* button's ring five times further sideways than vertically, and equal travel
+* on every side is the whole look.
+*/
+function startScale(extent, spread) {
+	if (extent <= 0) return 1;
+	return Math.round(extent / (extent + 2 * spread) * 1e3) / 1e3;
+}
+function readCorners(target) {
+	if (!target) return SQUARE;
+	const computed = getComputedStyle(target);
+	return {
+		borderTopLeftRadius: computed.borderTopLeftRadius,
+		borderTopRightRadius: computed.borderTopRightRadius,
+		borderBottomRightRadius: computed.borderBottomRightRadius,
+		borderBottomLeftRadius: computed.borderBottomLeftRadius
+	};
+}
+/**
+* `--sonar-spread` is authored in rem, and `getComputedStyle` hands custom
+* properties back as written rather than resolved to pixels, so this does the
+* one conversion the token is ever written to need. Reading it from the DOM
+* rather than the map below keeps a `[--sonar-spread:…]` override on the
+* wrapper driving the travel as well as the ring.
+*/
+function spreadInPixels(host) {
+	const raw = getComputedStyle(host).getPropertyValue("--sonar-spread").trim();
+	const value = Number.parseFloat(raw);
+	if (!Number.isFinite(value)) return 10;
+	if (!raw.endsWith("rem")) return value;
+	const root = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	return value * (Number.isFinite(root) ? root : 16);
 }
 /**
 * Colour rides on `currentColor` so the keyframe stays tone-agnostic: one set
 * of keyframes, one class per tone.
 */
-const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave will-change-[box-shadow,opacity] [backface-visibility:hidden] [transform:translateZ(0)]", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
+const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-sonar-wave opacity-0 shadow-[0_0_0_var(--sonar-spread,0.625rem)_currentColor] will-change-[transform,opacity] [backface-visibility:hidden]", "motion-reduce:animate-none motion-reduce:opacity-40 motion-reduce:shadow-[0_0_0_2px_currentColor]"), {
 	variants: { tone: {
 		brand: "text-fg-brand",
 		info: "text-status-info",
@@ -35,9 +78,46 @@ const sonarWaveVariants = cva(cn("pointer-events-none absolute inset-0 animate-s
 	defaultVariants: { tone: "brand" }
 });
 /**
+* The cut-out the rings are painted through: everything from the child's own
+* edge out to one `--sonar-spread`, and nothing inside it.
+*
+* A ring is painted at full spread and scaled back to start, which means that
+* early in its travel it lies *within* the child rather than around it. Behind
+* a child with a background of its own that goes unseen, but through an outline
+* button it is a band sweeping across the middle. The child's shape is punched
+* out of the rings here instead, so what shows is only ever the halo.
+*
+* A transparent border, rather than padding, because it is the padding box that
+* absolutely positioned rings are laid out against: this way the border box is
+* the far edge of the travel, the padding box is the child, and each ring can
+* go on being `inset-0`. CSS shrinks the corner radii between the two boxes by
+* the border width on its own, so the hole traces the child's corners exactly.
+*/
+const sonarRingsClass = cn("pointer-events-none absolute -z-10 [inset:calc(var(--sonar-spread,0.625rem)*-1)] [border:var(--sonar-spread,0.625rem)_solid_transparent]", "[mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000)] [mask-clip:border-box,padding-box] [mask-composite:exclude]");
+/**
+* The child's corner, grown by one spread, for the box the cut-out is measured
+* off. Written per token because a computed radius can be elliptical ("8px
+* 4px") or, from the `radius` prop, a whole shorthand — each length grows, and
+* the "/" between horizontal and vertical radii is passed through untouched.
+*/
+function growRadius(value) {
+	return value.trim().split(/\s+/).map((token) => token === "/" ? token : `calc(${token} + var(--sonar-spread, 0.625rem))`).join(" ");
+}
+/** The same shape as the rings, one spread wider on every side. */
+function grownShape(shape) {
+	return Object.fromEntries(Object.entries(shape).map(([property, value]) => [property, growRadius(String(value))]));
+}
+/**
 * Rings evenly spaced across one cycle, so the last finishes just as the first
 * comes round again. Doubles as each ring's key — the offsets are distinct by
 * construction, which an index would only pretend to be.
+*
+* Applied as *negative* delays, which start every ring on the first frame at a
+* different point in the cycle rather than holding it still until its turn
+* comes round. A ring waiting out a positive delay shows the style it is
+* animating from — here a finished, full-spread, fully opaque ring — so the
+* sonar would open on a solid halo and snap into motion three quarters of a
+* second later.
 */
 function waveDelays(waves) {
 	return Array.from({ length: waves }, (_, index) => Math.round(index * SONAR_DURATION_MS / waves));
@@ -63,54 +143,62 @@ const sonarSpread = {
 * child.
 *
 * The rings are painted with `box-shadow` spread, which lives outside the
-* element's box, so an ancestor with `overflow: hidden` will clip them.
+* element's box, so an ancestor with `overflow: hidden` will clip them. They
+* sit behind the child with its shape punched out of them, so nothing paints
+* inside it whatever background — or none — the child has of its own.
 */
 function Sonar({ className, children, active = true, waves = 2, size, tone, radius, style, ...props }) {
 	const resolvedSize = useComponentSize(size);
 	const ref = React.useRef(null);
-	const [corners, setCorners] = React.useState(null);
+	const [metrics, setMetrics] = React.useState(null);
 	React.useEffect(() => {
-		if (radius !== void 0 || !active) return;
-		const target = ref.current?.querySelector(":scope > :not([data-slot=\"sonar-wave\"])");
-		if (!target) {
-			setCorners(SQUARE);
-			return;
-		}
+		const host = ref.current;
+		if (!host || !active) return;
+		const target = radius === void 0 ? host.querySelector(":scope > :not([data-slot=\"sonar-rings\"])") : null;
 		const measure = () => {
-			const computed = getComputedStyle(target);
+			const box = host.getBoundingClientRect();
+			const spread = spreadInPixels(host);
 			const next = {
-				borderTopLeftRadius: computed.borderTopLeftRadius,
-				borderTopRightRadius: computed.borderTopRightRadius,
-				borderBottomRightRadius: computed.borderBottomRightRadius,
-				borderBottomLeftRadius: computed.borderBottomLeftRadius
+				corners: radius !== void 0 ? null : readCorners(target),
+				scaleX: startScale(box.width, spread),
+				scaleY: startScale(box.height, spread)
 			};
-			setCorners((current) => sameCorners(current, next) ? current : next);
+			setMetrics((current) => sameMetrics(current, next) ? current : next);
 		};
 		measure();
 		if (typeof ResizeObserver === "undefined") return;
 		const observer = new ResizeObserver(measure);
-		observer.observe(target);
+		observer.observe(host);
 		return () => observer.disconnect();
 	}, [active, radius]);
-	const shape = radius !== void 0 ? { borderRadius: radius } : corners;
+	const shape = radius !== void 0 ? { borderRadius: radius } : metrics?.corners ?? null;
 	return /* @__PURE__ */ jsxs("span", {
 		ref,
 		"data-slot": "sonar",
 		"data-tone": tone ?? "brand",
 		"data-size": resolvedSize,
 		"data-active": active ? "" : void 0,
-		className: cn("relative inline-flex w-fit shrink-0", sonarSpread[resolvedSize], className),
-		style,
+		className: cn("relative isolate inline-flex w-fit shrink-0", sonarSpread[resolvedSize], className),
+		style: metrics ? {
+			"--sonar-scale-x": metrics.scaleX,
+			"--sonar-scale-y": metrics.scaleY,
+			...style
+		} : style,
 		...props,
-		children: [children, active && shape ? waveDelays(waves).map((delay) => /* @__PURE__ */ jsx("span", {
+		children: [children, active && shape ? /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			"data-slot": "sonar-wave",
-			style: {
-				...shape,
-				animationDelay: delay === 0 ? void 0 : `${delay}ms`
-			},
-			className: cn(sonarWaveVariants({ tone }), delay > 0 && "motion-reduce:hidden")
-		}, `sonar-wave-${delay}`)) : null]
+			"data-slot": "sonar-rings",
+			style: grownShape(shape),
+			className: sonarRingsClass,
+			children: waveDelays(waves).map((delay) => /* @__PURE__ */ jsx("span", {
+				"data-slot": "sonar-wave",
+				style: {
+					...shape,
+					animationDelay: delay === 0 ? void 0 : `-${delay}ms`
+				},
+				className: cn(sonarWaveVariants({ tone }), delay > 0 && "motion-reduce:hidden")
+			}, `sonar-wave-${delay}`))
+		}) : null]
 	});
 }
 //#endregion