@giddaa-housing/ui 3.2.0 → 3.4.0

package/dist/scroll-spy.js

@@ -0,0 +1,318 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
+import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName } from "./tabs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/scroll-spy.tsx
+const ScrollSpyContext = React.createContext(null);
+/**
+* The element this spy's sections actually scroll inside — a scrollable
+* ancestor, or `document.scrollingElement` for the page. Everything is
+* measured against it, so each instance answers only to its own scrollport:
+* a spy in an open Sheet and a spy on the page behind it never see each
+* other's scrolling.
+*
+* Returns `null` when nothing scrolls. A `position: fixed` ancestor with no
+* scrollable element inside it — a short Dialog, say — is pinned to the
+* viewport, so it neither moves with the page nor scrolls on its own. Falling
+* back to the page there would read the page's scroll position and pin the
+* last section active for a reader who never scrolled anything.
+*
+* Walked from a section rather than the root: the root often sits *outside*
+* the scrolling region, as it does when a Sheet puts the list in its header
+* and the sections in its scrolling body.
+*/
+function getScrollport(element) {
+	let node = element;
+	while (node && node !== document.documentElement) {
+		const { overflowY, position } = getComputedStyle(node);
+		if (overflowY === "auto" || overflowY === "scroll") return node;
+		if (position === "fixed") return null;
+		node = node.parentElement;
+	}
+	return document.scrollingElement;
+}
+function useScrollSpyContext(part) {
+	const context = React.useContext(ScrollSpyContext);
+	if (!context) throw new Error(`\`${part}\` must be used inside \`ScrollSpy\`.`);
+	return context;
+}
+/**
+* Read and drive the spy from anywhere inside a `ScrollSpy` — an overflow
+* "More" menu, a floating progress rail, a heading that echoes the section
+* being read.
+*
+* Context reaches through portals, so a consumer inside an open `DropdownMenu`
+* or `Popover` works without threading anything down by hand. `registerSection`
+* is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
+*/
+function useScrollSpy() {
+	const { activeValue, getSectionId, getTriggerId, scrollToSection } = useScrollSpyContext("useScrollSpy");
+	return React.useMemo(() => ({
+		activeValue,
+		getSectionId,
+		getTriggerId,
+		scrollToSection
+	}), [
+		activeValue,
+		getSectionId,
+		getTriggerId,
+		scrollToSection
+	]);
+}
+/**
+* `Tabs` for a page that shows everything at once: every section stays mounted
+* and visible, the triggers scroll to their section, and the active trigger
+* tracks whichever section the reader is currently on.
+*
+* The parts mirror the `Tabs` API — `ScrollSpy` / `ScrollSpyList` /
+* `ScrollSpyTrigger` / `ScrollSpyContent`, matched by `value` — and the list
+* takes the same `variant` and `size` as `TabsList`, so the two read as one
+* family. Overflow ("More" dropdowns, per-breakpoint trigger counts) is the
+* consuming app's job, exactly as it is with `Tabs`;
+* `scrollSpyTriggerClassName` is exported so an overflow button can match the
+* real triggers.
+*/
+function ScrollSpy({ className, orientation = "horizontal", value, defaultValue, onValueChange, scrollOffset = 0, children, ...props }) {
+	const baseId = React.useId();
+	const reducedMotion = useReducedMotion();
+	const [activeValue, setActiveValue] = useUncontrolled({
+		value,
+		defaultValue,
+		onChange: (next) => {
+			if (next !== void 0) onValueChange?.(next);
+		}
+	});
+	const sectionsRef = React.useRef(/* @__PURE__ */ new Map());
+	const [sectionsVersion, setSectionsVersion] = React.useState(0);
+	const activeRef = React.useRef(activeValue);
+	const commitRef = React.useRef(setActiveValue);
+	React.useEffect(() => {
+		activeRef.current = activeValue;
+		commitRef.current = setActiveValue;
+	});
+	const registerSection = React.useCallback((sectionValue, element) => {
+		if (element) sectionsRef.current.set(sectionValue, element);
+		else sectionsRef.current.delete(sectionValue);
+		setSectionsVersion((version) => version + 1);
+	}, []);
+	React.useEffect(() => {
+		let frame = 0;
+		const [firstSection] = sectionsRef.current.values();
+		const scrollport = getScrollport(firstSection ?? null);
+		const isPage = scrollport === document.scrollingElement;
+		const measure = () => {
+			frame = 0;
+			const sections = [...sectionsRef.current.entries()].map(([sectionValue, element]) => ({
+				value: sectionValue,
+				top: element.getBoundingClientRect().top
+			})).sort((a, b) => a.top - b.top);
+			const first = sections[0];
+			const last = sections.at(-1);
+			if (!(first && last)) return;
+			const originTop = scrollport && !isPage ? scrollport.getBoundingClientRect().top : 0;
+			const atBottom = scrollport ? scrollport.scrollTop + scrollport.clientHeight >= scrollport.scrollHeight - 2 : false;
+			let next = first.value;
+			if (atBottom) next = last.value;
+			else for (const section of sections) if (section.top - originTop <= scrollOffset + 2) next = section.value;
+			if (next !== activeRef.current) {
+				activeRef.current = next;
+				commitRef.current(next);
+			}
+		};
+		const schedule = () => {
+			if (!frame) frame = requestAnimationFrame(measure);
+		};
+		measure();
+		const scrollTarget = isPage ? window : scrollport;
+		scrollTarget?.addEventListener("scroll", schedule, { passive: true });
+		window.addEventListener("resize", schedule, { passive: true });
+		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			scrollTarget?.removeEventListener("scroll", schedule);
+			window.removeEventListener("resize", schedule);
+		};
+	}, [scrollOffset, sectionsVersion]);
+	const scrollToSection = React.useCallback((sectionValue) => {
+		const element = sectionsRef.current.get(sectionValue);
+		if (!element) return;
+		activeRef.current = sectionValue;
+		commitRef.current(sectionValue);
+		element.scrollIntoView({
+			behavior: reducedMotion ? "auto" : "smooth",
+			block: "start"
+		});
+		element.focus({ preventScroll: true });
+	}, [reducedMotion]);
+	const context = React.useMemo(() => ({
+		activeValue,
+		scrollOffset,
+		registerSection,
+		scrollToSection,
+		getTriggerId: (sectionValue) => `${baseId}-trigger-${sectionValue}`,
+		getSectionId: (sectionValue) => `${baseId}-section-${sectionValue}`
+	}), [
+		activeValue,
+		baseId,
+		registerSection,
+		scrollOffset,
+		scrollToSection
+	]);
+	return /* @__PURE__ */ jsx(ScrollSpyContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "scroll-spy",
+			className: cn("group/tabs flex gap-3 data-[orientation=horizontal]:flex-col", className),
+			"data-orientation": orientation,
+			...props,
+			children
+		})
+	});
+}
+/**
+* Keeps `element` inside `list`'s own scrollport, on whichever axis actually
+* overflows. Deliberately not `scrollIntoView`: that walks every scrollable
+* ancestor, and the page is the very thing driving the active section here —
+* nudging it back would fight the reader mid-scroll. This touches only the
+* list's `scrollLeft`/`scrollTop`.
+*
+* "Nearest" semantics with a margin: an already-visible trigger doesn't move,
+* and one scrolled to leaves a sliver of its neighbour showing rather than
+* sitting flush against the edge.
+*/
+const FOLLOW_MARGIN = 24;
+function followActiveTrigger(list, element, behavior) {
+	const axes = [{
+		overflows: list.scrollWidth > list.clientWidth,
+		start: element.offsetLeft,
+		size: element.offsetWidth,
+		view: list.scrollLeft,
+		viewSize: list.clientWidth,
+		key: "left"
+	}, {
+		overflows: list.scrollHeight > list.clientHeight,
+		start: element.offsetTop,
+		size: element.offsetHeight,
+		view: list.scrollTop,
+		viewSize: list.clientHeight,
+		key: "top"
+	}];
+	const options = { behavior };
+	for (const axis of axes) {
+		if (!axis.overflows) continue;
+		const end = axis.start + axis.size;
+		const viewEnd = axis.view + axis.viewSize;
+		if (axis.start < axis.view) options[axis.key] = Math.max(0, axis.start - FOLLOW_MARGIN);
+		else if (end > viewEnd) options[axis.key] = end - axis.viewSize + FOLLOW_MARGIN;
+	}
+	if (options.left !== void 0 || options.top !== void 0) list.scrollTo(options);
+}
+function ScrollSpyList({ className, variant = "underline", size, children, scrollActiveIntoView = false, "aria-label": ariaLabel = "Section navigation", ...props }) {
+	const { activeValue } = useScrollSpyContext("ScrollSpyList");
+	const reducedMotion = useReducedMotion();
+	const hasFollowedRef = React.useRef(false);
+	const resolvedVariant = resolveTabsListVariant(variant);
+	const resolvedSize = useComponentSize(size);
+	const listRef = React.useRef(null);
+	const [indicator, setIndicator] = React.useState(null);
+	React.useEffect(() => {
+		const list = listRef.current;
+		if (!list) return;
+		const measure = () => {
+			const active = list.querySelector("[data-slot=\"scroll-spy-trigger\"][data-active]");
+			const next = active ? {
+				left: active.offsetLeft,
+				top: active.offsetTop,
+				width: active.offsetWidth,
+				height: active.offsetHeight
+			} : null;
+			setIndicator((current) => current?.left === next?.left && current?.top === next?.top && current?.width === next?.width && current?.height === next?.height ? current : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(list);
+		for (const trigger of list.querySelectorAll("[data-slot=\"scroll-spy-trigger\"]")) observer.observe(trigger);
+		return () => observer.disconnect();
+	}, [activeValue]);
+	React.useEffect(() => {
+		const list = listRef.current;
+		if (!(scrollActiveIntoView && list)) return;
+		const active = list.querySelector("[data-slot=\"scroll-spy-trigger\"][data-active]");
+		if (!active) return;
+		const behavior = reducedMotion || !hasFollowedRef.current ? "auto" : "smooth";
+		hasFollowedRef.current = true;
+		followActiveTrigger(list, active, behavior);
+	}, [
+		activeValue,
+		reducedMotion,
+		scrollActiveIntoView
+	]);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref: listRef,
+		"data-slot": "scroll-spy-list",
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSize,
+		"aria-label": ariaLabel,
+		className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+		style: indicator ? {
+			"--active-tab-left": `${indicator.left}px`,
+			"--active-tab-top": `${indicator.top}px`,
+			"--active-tab-width": `${indicator.width}px`,
+			"--active-tab-height": `${indicator.height}px`
+		} : void 0,
+		...props,
+		children: [children, indicator ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: tabsIndicatorClassName
+		}) : null]
+	});
+}
+/**
+* Trigger styling, exported so an overflow "More" button outside the list can
+* render the same look — the `Tabs` trigger classes verbatim, so the two
+* components stay pixel-identical.
+*/
+const scrollSpyTriggerClassName = tabsTriggerClassName;
+function ScrollSpyTrigger({ className, value, type = "button", onClick, ...props }) {
+	const { activeValue, getSectionId, getTriggerId, scrollToSection } = useScrollSpyContext("ScrollSpyTrigger");
+	const isActive = activeValue === value;
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "scroll-spy-trigger",
+		id: getTriggerId(value),
+		type,
+		"aria-controls": getSectionId(value),
+		"aria-current": isActive ? "location" : void 0,
+		"data-active": isActive ? "" : void 0,
+		className: cn(scrollSpyTriggerClassName, "cursor-pointer", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) scrollToSection(value);
+		},
+		...props
+	});
+}
+function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props }) {
+	const { activeValue, getSectionId, getTriggerId, registerSection, scrollOffset } = useScrollSpyContext("ScrollSpyContent");
+	return /* @__PURE__ */ jsx("section", {
+		ref: React.useCallback((element) => {
+			registerSection(value, element);
+		}, [registerSection, value]),
+		"data-slot": "scroll-spy-content",
+		"data-active": activeValue === value ? "" : void 0,
+		id: getSectionId(value),
+		"aria-labelledby": getTriggerId(value),
+		tabIndex,
+		className: cn("flex-1 text-sm outline-none", className),
+		style: {
+			scrollMarginTop: scrollOffset,
+			...style
+		},
+		...props
+	});
+}
+//#endregion
+export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, useScrollSpy };

package/dist/sonar.d.ts

@@ -0,0 +1,51 @@
+import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/sonar.d.ts
+/**
+ * Kept in step with `--animate-sonar-wave` in `css/theme.css`; the waves are
+ * staggered by a fraction of one cycle, which only reads as a continuous sonar
+ * if this matches the keyframe's duration. `sonar.test.tsx` asserts they agree.
+ */
+declare const SONAR_DURATION_MS = 1500;
+/**
+ * Colour rides on `currentColor` so the keyframe stays tone-agnostic: one set
+ * of keyframes, one class per tone.
+ */
+declare const sonarWaveVariants: (props?: ({
+  tone?: "brand" | "danger" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SonarProps = React.ComponentProps<"span"> & VariantProps<typeof sonarWaveVariants> & {
+  /** Stop pulsing without unmounting — the child renders on its own. */
+  active?: boolean;
+  /** Overlapping rings. More reads as a faster, more urgent sonar. */
+  waves?: 1 | 2 | 3;
+  /** How far each ring travels. Inherits from `SizeProvider`. */
+  size?: ComponentSize;
+  /**
+   * Skip measurement and use this `border-radius` verbatim. Only needed
+   * when the child's shape can't be read off the DOM — an SVG using
+   * geometry rather than CSS, say.
+   */
+  radius?: string;
+};
+/**
+ * Draws attention to a dot, badge or button by pulsing rings outward from it.
+ *
+ * The rings trace the child's own shape: `Sonar` reads the child's computed
+ * `border-radius` and hands it to the rings, so a pill badge pulses a pill and
+ * a rounded button pulses a rounded rectangle, with nothing to keep in sync by
+ * hand. That matters because radii in this library are often size-dependent —
+ * `Tag` alone moves through `rounded-md`/`lg`/`xl` across its three sizes.
+ *
+ * Purely decorative: the rings are `aria-hidden` and the child is untouched, so
+ * whatever the child announces is what assistive tech hears. A pulse is not a
+ * label — if the attention it draws carries meaning, put that meaning in the
+ * 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.
+ */
+declare function Sonar({ className, children, active, waves, size, tone, radius, style, ...props }: SonarProps): React.JSX.Element;
+//#endregion
+export { SONAR_DURATION_MS, Sonar, type SonarProps, sonarWaveVariants };

package/dist/sonar.js

@@ -0,0 +1,117 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+//#region src/sonar.tsx
+/**
+* Kept in step with `--animate-sonar-wave` in `css/theme.css`; the waves are
+* staggered by a fraction of one cycle, which only reads as a continuous sonar
+* if this matches the keyframe's duration. `sonar.test.tsx` asserts they agree.
+*/
+const SONAR_DURATION_MS = 1500;
+const SQUARE = {
+	borderTopLeftRadius: "0px",
+	borderTopRightRadius: "0px",
+	borderBottomRightRadius: "0px",
+	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;
+}
+/**
+* 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]"), {
+	variants: { tone: {
+		brand: "text-fg-brand",
+		info: "text-status-info",
+		success: "text-status-success",
+		warning: "text-status-warning",
+		danger: "text-status-danger"
+	} },
+	defaultVariants: { tone: "brand" }
+});
+/**
+* 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.
+*/
+function waveDelays(waves) {
+	return Array.from({ length: waves }, (_, index) => Math.round(index * SONAR_DURATION_MS / waves));
+}
+/** How far the ring travels before it fades out. */
+const sonarSpread = {
+	sm: "[--sonar-spread:0.375rem]",
+	md: "[--sonar-spread:0.625rem]",
+	lg: "[--sonar-spread:0.875rem]"
+};
+/**
+* Draws attention to a dot, badge or button by pulsing rings outward from it.
+*
+* The rings trace the child's own shape: `Sonar` reads the child's computed
+* `border-radius` and hands it to the rings, so a pill badge pulses a pill and
+* a rounded button pulses a rounded rectangle, with nothing to keep in sync by
+* hand. That matters because radii in this library are often size-dependent —
+* `Tag` alone moves through `rounded-md`/`lg`/`xl` across its three sizes.
+*
+* Purely decorative: the rings are `aria-hidden` and the child is untouched, so
+* whatever the child announces is what assistive tech hears. A pulse is not a
+* label — if the attention it draws carries meaning, put that meaning in the
+* 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.
+*/
+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);
+	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 measure = () => {
+			const computed = getComputedStyle(target);
+			const next = {
+				borderTopLeftRadius: computed.borderTopLeftRadius,
+				borderTopRightRadius: computed.borderTopRightRadius,
+				borderBottomRightRadius: computed.borderBottomRightRadius,
+				borderBottomLeftRadius: computed.borderBottomLeftRadius
+			};
+			setCorners((current) => sameCorners(current, next) ? current : next);
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [active, radius]);
+	const shape = radius !== void 0 ? { borderRadius: radius } : corners;
+	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,
+		...props,
+		children: [children, active && shape ? waveDelays(waves).map((delay) => /* @__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]
+	});
+}
+//#endregion
+export { SONAR_DURATION_MS, Sonar, sonarWaveVariants };