@giddaa-housing/ui 3.6.0 → 3.7.0

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

package/dist/styles.css

@@ -367,6 +367,9 @@
   .sticky {
     position: sticky;
   }
+  .\[inset\:calc\(var\(--sonar-spread\,0\.625rem\)\*-1\)\] {
+    inset: calc(var(--sonar-spread,0.625rem) * -1);
+  }
   .inset-0 {
     inset: 0;
   }
@@ -621,6 +624,9 @@
       padding-inline: 40px;
     }
   }
+  .-mx-4 {
+    margin-inline: calc(var(--spacing) * -4);
+  }
   .mx-0 {
     margin-inline: 0;
   }
@@ -1159,6 +1165,9 @@
   .w-1 {
     width: var(--spacing);
   }
+  .w-1\/2 {
+    width: calc(1 / 2 * 100%);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -1330,6 +1339,9 @@
   .max-w-140 {
     max-width: calc(var(--spacing) * 140);
   }
+  .max-w-\[24\.375rem\] {
+    max-width: 24.375rem;
+  }
   .max-w-\[28\.75rem\] {
     max-width: 28.75rem;
   }
@@ -2223,12 +2235,6 @@
       background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
     }
   }
-  .bg-black\/25 {
-    background-color: color-mix(in srgb, #000 25%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
-    }
-  }
   .bg-black\/40 {
     background-color: color-mix(in srgb, #000 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2274,12 +2280,6 @@
   .bg-canvas {
     background-color: var(--color-canvas);
   }
-  .bg-canvas\/85 {
-    background-color: color-mix(in srgb, #ffffff 85%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-canvas) 85%, transparent);
-    }
-  }
   .bg-current {
     background-color: currentcolor;
   }
@@ -2388,6 +2388,9 @@
   .bg-\[linear-gradient\(180deg\,var\(--color-surface-brand\)_0\%\,var\(--color-moss-600\)_100\%\)\] {
     background-image: linear-gradient(180deg,var(--color-surface-brand) 0%,var(--color-moss-600) 100%);
   }
+  .\[mask-image\:linear-gradient\(\#000\,\#000\)\,linear-gradient\(\#000\,\#000\)\] {
+    mask-image: linear-gradient(#000,#000),linear-gradient(#000,#000);
+  }
   .\[background-size\:24px_24px\] {
     background-size: 24px 24px;
   }
@@ -2397,6 +2400,12 @@
   .\[background-position\:0_0\] {
     background-position: 0 0;
   }
+  .\[mask-composite\:exclude\] {
+    mask-composite: exclude;
+  }
+  .\[mask-clip\:border-box\,padding-box\] {
+    mask-clip: border-box,padding-box;
+  }
   .fill-fg-primary {
     fill: var(--color-fg-primary);
   }
@@ -3053,6 +3062,10 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
   .caret-fg-primary {
     caret-color: var(--color-fg-primary);
   }
@@ -3100,6 +3113,10 @@
     --tw-shadow: var(--shadow-3);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_0_0_var\(--sonar-spread\,0\.625rem\)_currentColor\] {
+    --tw-shadow: 0 0 0 var(--sonar-spread,0.625rem) var(--tw-shadow-color, currentColor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_0_4px_rgb\(0_0_0\/0\.1\)\] {
     --tw-shadow: 0 0 4px var(--tw-shadow-color, rgb(0 0 0/0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3609,8 +3626,8 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .will-change-\[box-shadow\,opacity\] {
-    will-change: box-shadow,opacity;
+  .will-change-\[transform\,opacity\] {
+    will-change: transform,opacity;
   }
   .animate-in {
     animation-name: enter;
@@ -3788,6 +3805,9 @@
   .\[--sonar-spread\:0\.875rem\] {
     --sonar-spread: 0.875rem;
   }
+  .\[--sonar-spread\:…\] {
+    --sonar-spread: …;
+  }
   .\[--switch-spinner-size\:0\.75rem\] {
     --switch-spinner-size: 0.75rem;
   }
@@ -3818,6 +3838,9 @@
   .\[backface-visibility\:hidden\] {
     backface-visibility: hidden;
   }
+  .\[border\:var\(--sonar-spread\,0\.625rem\)_solid_transparent\] {
+    border: var(--sonar-spread,0.625rem) solid transparent;
+  }
   .\[overflow-anchor\:none\] {
     overflow-anchor: none;
   }
@@ -4096,6 +4119,22 @@
       display: none;
     }
   }
+  .group-has-\[\.is-nested-dialog\]\/dialog-portal\:bg-black\/25 {
+    &:is(:where(.group\/dialog-portal):has(*:is(.is-nested-dialog)) *) {
+      background-color: color-mix(in srgb, #000 25%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
+      }
+    }
+  }
+  .group-has-\[\.is-nested-dialog\]\/sheet-portal\:bg-black\/25 {
+    &:is(:where(.group\/sheet-portal):has(*:is(.is-nested-dialog)) *) {
+      background-color: color-mix(in srgb, #000 25%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
+      }
+    }
+  }
   .group-has-\[\:focus-visible\]\/seek-thumb\:\[filter\:drop-shadow\(0_0_0\.25rem_var\(--color-line-focus\)\)\] {
     &:is(:where(.group\/seek-thumb):has(*:is(:focus-visible)) *) {
       filter: drop-shadow(0 0 0.25rem var(--color-line-focus));
@@ -4111,6 +4150,22 @@
       grid-row-start: 2;
     }
   }
+  .group-has-\[\>\.is-nested-dialog\]\/dialog-portal\:bg-black\/25 {
+    &:is(:where(.group\/dialog-portal):has(>.is-nested-dialog) *) {
+      background-color: color-mix(in srgb, #000 25%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
+      }
+    }
+  }
+  .group-has-\[\>\.is-nested-dialog\]\/sheet-portal\:bg-black\/25 {
+    &:is(:where(.group\/sheet-portal):has(>.is-nested-dialog) *) {
+      background-color: color-mix(in srgb, #000 25%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
+      }
+    }
+  }
   .group-has-\[\>input\]\/input-group\:pt-2 {
     &:is(:where(.group\/input-group):has(>input) *) {
       padding-top: calc(var(--spacing) * 2);
@@ -7277,6 +7332,28 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .has-\[\:focus-visible\]\:ring-2 {
+    &:has(*:is(:focus-visible)) {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .has-\[\:focus-visible\]\:ring-line-focus {
+    &:has(*:is(:focus-visible)) {
+      --tw-ring-color: var(--color-line-focus);
+    }
+  }
+  .has-\[\:focus-visible\]\:ring-offset-2 {
+    &:has(*:is(:focus-visible)) {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .has-\[\:focus-visible\]\:ring-offset-canvas {
+    &:has(*:is(:focus-visible)) {
+      --tw-ring-offset-color: var(--color-canvas);
+    }
+  }
   .has-\[\[data-slot\=card-action\]\:active\]\:border-line-focus {
     &:has(*:is([data-slot=card-action]:active)) {
       border-color: var(--color-line-focus);
@@ -9693,6 +9770,24 @@
       backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     }
   }
+  .supports-backdrop-filter\:group-has-\[\>\.is-nested-dialog\]\/dialog-portal\:backdrop-blur-none {
+    @supports (backdrop-filter: var(--tw)) {
+      &:is(:where(.group\/dialog-portal):has(>.is-nested-dialog) *) {
+        --tw-backdrop-blur:  ;
+        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      }
+    }
+  }
+  .supports-backdrop-filter\:group-has-\[\>\.is-nested-dialog\]\/sheet-portal\:backdrop-blur-none {
+    @supports (backdrop-filter: var(--tw)) {
+      &:is(:where(.group\/sheet-portal):has(>.is-nested-dialog) *) {
+        --tw-backdrop-blur:  ;
+        -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+        backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      }
+    }
+  }
   .supports-backdrop-filter\:hover\:bg-black\/55 {
     @supports (backdrop-filter: var(--tw)) {
       &:hover {
@@ -10955,6 +11050,11 @@
       padding-inline: calc(var(--spacing) * 5.5);
     }
   }
+  .md\:px-6 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .md\:px-6\.5 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6.5);
@@ -11532,6 +11632,11 @@
       flex-direction: column;
     }
   }
+  .lg\:gap-0\.5 {
+    @media (width >= 64rem) {
+      gap: calc(var(--spacing) * 0.5);
+    }
+  }
   .lg\:gap-1 {
     @media (width >= 64rem) {
       gap: var(--spacing);
@@ -11648,6 +11753,11 @@
       padding-inline: calc(var(--spacing) * 5.5);
     }
   }
+  .lg\:px-6 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .lg\:px-6\.5 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 6.5);
@@ -13718,12 +13828,6 @@
       }
     }
   }
-  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 {
-    &>svg:not([class*='size-']) {
-      width: calc(var(--spacing) * 3.5);
-      height: calc(var(--spacing) * 3.5);
-    }
-  }
   .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 {
     &>svg:not([class*='size-']) {
       width: calc(var(--spacing) * 4);
@@ -13918,11 +14022,11 @@
 }
 @keyframes sonar-wave {
   from {
-    box-shadow: 0 0 0 0 currentColor;
+    transform: scale(var(--sonar-scale-x, 0.5), var(--sonar-scale-y, 0.5));
     opacity: 0.55;
   }
   to {
-    box-shadow: 0 0 0 var(--sonar-spread, 0.625rem) currentColor;
+    transform: scale(1, 1);
     opacity: 0;
   }
 }

package/dist/video-player-dialog.js

@@ -80,7 +80,7 @@ function VideoPlayerDialogContent({ size = "md", theme = "light", showCloseButto
 function VideoPlayerDialogMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "video-player-dialog-media",
-		className: cn("relative isolate aspect-video w-full overflow-hidden rounded-t-[inherit] bg-[#11160f]", "[&>[data-slot=media-player]]:size-full [&>[data-slot=media-player]]:rounded-none [&>[data-slot=media-player]]:shadow-none", className),
+		className: cn("relative isolate aspect-video w-full overflow-hidden rounded-t-[inherit] bg-[#11160f] [transform:translateZ(0)]", "[&>[data-slot=media-player]]:size-full [&>[data-slot=media-player]]:rounded-none [&>[data-slot=media-player]]:shadow-none", className),
 		...props
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -313,6 +313,10 @@
       "types": "./dist/radio-group.d.ts",
       "import": "./dist/radio-group.js"
     },
+    "./rating": {
+      "types": "./dist/rating.d.ts",
+      "import": "./dist/rating.js"
+    },
     "./review-block": {
       "types": "./dist/review-block.d.ts",
       "import": "./dist/review-block.js"

package/dist/dialog-nesting.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-//#region src/dialog-nesting.d.ts
-declare function DialogNestingProvider({ children }: {
-  children: ReactNode;
-}): import("react").JSX.Element;
-/** Depth of the current dialog (1 = top-level, 2+ = nested). */
-declare function useDialogNestingDepth(): number;
-//#endregion
-export { DialogNestingProvider, useDialogNestingDepth };

package/dist/dialog-nesting.js

@@ -1,27 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-//#region src/dialog-nesting.tsx
-/**
-* Tracks how deep a Dialog/Sheet is nested. Sheet and Dialog share the same
-* Base UI primitive, so they share this one context too — a Dialog opened
-* inside a Sheet (or vice-versa) counts as nested.
-*
-* Depth is 0 outside any dialog, 1 for a top-level dialog, 2+ for nested ones.
-* Overlays use `depth > 1` to render lighter (so the parent shows through),
-* while the base overlay keeps the full page-hiding dim.
-*/
-const DialogNestingContext = createContext(0);
-function DialogNestingProvider({ children }) {
-	const depth = useContext(DialogNestingContext);
-	return /* @__PURE__ */ jsx(DialogNestingContext.Provider, {
-		value: depth + 1,
-		children
-	});
-}
-/** Depth of the current dialog (1 = top-level, 2+ = nested). */
-function useDialogNestingDepth() {
-	return useContext(DialogNestingContext);
-}
-//#endregion
-export { DialogNestingProvider, useDialogNestingDepth };