@giddaa-housing/ui 3.1.0 → 3.3.0

package/dist/scroll-spy.js

@@ -0,0 +1,295 @@
+"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 rendered inside \`ScrollSpy\`.`);
+	return context;
+}
+/**
+* `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 };

package/dist/search-input.js

@@ -1,7 +1,7 @@
 "use client";
+import { Search, X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
-import { Search, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/search-input.tsx

package/dist/select.js

@@ -1,7 +1,7 @@
 "use client";
+import { Check, ChevronDown, ChevronUp } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -66,7 +66,7 @@ function SelectTrigger({ className, children, unstyled, ...props }) {
 		"data-size": resolvedSize,
 		className: cn(!unstyled && selectTriggerVariants({ size: resolvedSize }), className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-line-strong transition-transform group-data-disabled/select-trigger:text-fg-caption-placeholder data-popup-open:rotate-180" }) })]
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDown, { className: "text-line-strong transition-transform group-data-disabled/select-trigger:text-fg-caption-placeholder data-popup-open:rotate-180" }) })]
 	});
 }
 function SelectContent({ className, children, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
@@ -111,9 +111,9 @@ function SelectItem({ className, children, ...props }) {
 		children: [multiple ? /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 			keepMounted: true,
 			className: "flex size-5 shrink-0 items-center justify-center rounded-sm border border-line bg-canvas text-transparent transition-[background-color,border-color,color] group-data-selected/select-item:border-action-primary group-data-selected/select-item:bg-action-primary group-data-selected/select-item:text-fg-on-brand group-data-disabled/select-item:border-line-subtle group-data-disabled/select-item:bg-surface group-data-disabled/select-item:text-fg-caption-placeholder [&>svg]:size-3",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			children: /* @__PURE__ */ jsx(Check, {})
 		}) : null, /* @__PURE__ */ jsx(Select$1.ItemText, {
-			className: "flex min-w-0 flex-1 shrink-0 gap-2 whitespace-nowrap",
+			className: "flex min-w-0 flex-1 shrink-0 items-center gap-2",
 			children
 		})]
 	});
@@ -130,7 +130,7 @@ function SelectScrollUpButton({ className, ...props }) {
 		"data-slot": "select-scroll-up-button",
 		className: cn("sticky top-0 z-10 flex h-7 w-full cursor-default items-center justify-center bg-canvas text-fg-secondary [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
-		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+		children: /* @__PURE__ */ jsx(ChevronUp, {})
 	});
 }
 function SelectScrollDownButton({ className, ...props }) {
@@ -138,7 +138,7 @@ function SelectScrollDownButton({ className, ...props }) {
 		"data-slot": "select-scroll-down-button",
 		className: cn("sticky bottom-0 z-10 flex h-7 w-full cursor-default items-center justify-center bg-canvas text-fg-secondary [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
-		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+		children: /* @__PURE__ */ jsx(ChevronDown, {})
 	});
 }
 //#endregion

package/dist/sheet.js

@@ -1,9 +1,9 @@
 "use client";
+import { X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
 import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
-import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog } from "@base-ui/react/dialog";
@@ -67,7 +67,7 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 					variant: "ghost",
 					className: "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",
 					size: "icon-xs",
-					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: "Close"
 					})]

package/dist/sidebar.js

@@ -1,4 +1,5 @@
 "use client";
+import { Menu } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Separator } from "./separator.js";
 import { Button } from "./button.js";
@@ -7,7 +8,6 @@ import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
 import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { Menu } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/stepper.js

@@ -1,6 +1,6 @@
 "use client";
+import { Check } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { CheckIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -88,7 +88,7 @@ function StepperIndicator({ className, state: stateProp, children, ...props }) {
 		"data-state": resolved,
 		className: cn(indicatorVariants({ state: resolved }), className),
 		...props,
-		children: children ?? (resolved === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
+		children: children ?? (resolved === "complete" ? /* @__PURE__ */ jsx(Check, {
 			className: "size-4 sm:size-4.5",
 			strokeWidth: 2.5
 		}) : step)