@giddaa-housing/ui 3.5.0 → 3.7.0

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

package/dist/sparkline.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartContainer, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/sparkline.d.ts