@giddaa-housing/ui 3.5.0 → 3.7.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/rich-text-editor.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 * as React from "react";
 //#region src/rich-text-editor.d.ts
 interface RichTextEditorProps {

package/dist/scatter-chart.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 { ChartConfig } from "./chart.js";
 import * as React from "react";
 import { CartesianGrid, Scatter, ScatterChart as ScatterChart$1, XAxis, YAxis } from "recharts";

package/dist/scroll-spy.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 { TabsListVariant } from "./tabs.js";
 import * as React from "react";
 //#region src/scroll-spy.d.ts
@@ -11,6 +11,12 @@ import * as React from "react";
  * or `Popover` works without threading anything down by hand. `registerSection`
  * is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
  */
+declare function useOptionalScrollSpy(): {
+  activeValue: string | undefined;
+  getSectionId: (value: string) => string;
+  getTriggerId: (value: string) => string;
+  scrollToSection: (value: string) => void;
+} | null;
 declare function useScrollSpy(): {
   activeValue: string | undefined;
   getSectionId: (value: string) => string;
@@ -73,4 +79,4 @@ type ScrollSpyContentProps = Omit<React.ComponentProps<"section">, "value"> & {
 };
 declare function ScrollSpyContent({ className, value, style, tabIndex, ...props }: ScrollSpyContentProps): React.JSX.Element;
 //#endregion
-export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, useScrollSpy };
+export { ScrollSpy, ScrollSpyContent, type ScrollSpyContentProps, ScrollSpyList, type ScrollSpyListProps, type ScrollSpyProps, ScrollSpyTrigger, type ScrollSpyTriggerProps, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };

package/dist/scroll-spy.js

@@ -49,19 +49,19 @@ function useScrollSpyContext(part) {
 * or `Popover` works without threading anything down by hand. `registerSection`
 * is deliberately not exposed: sections are `ScrollSpyContent`'s to own.
 */
+function useOptionalScrollSpy() {
+	const context = React.useContext(ScrollSpyContext);
+	return React.useMemo(() => context ? {
+		activeValue: context.activeValue,
+		getSectionId: context.getSectionId,
+		getTriggerId: context.getTriggerId,
+		scrollToSection: context.scrollToSection
+	} : null, [context]);
+}
 function useScrollSpy() {
-	const { activeValue, getSectionId, getTriggerId, scrollToSection } = useScrollSpyContext("useScrollSpy");
-	return React.useMemo(() => ({
-		activeValue,
-		getSectionId,
-		getTriggerId,
-		scrollToSection
-	}), [
-		activeValue,
-		getSectionId,
-		getTriggerId,
-		scrollToSection
-	]);
+	const value = useOptionalScrollSpy();
+	if (!value) throw new Error("`useScrollSpy` must be used inside `ScrollSpy`.");
+	return value;
 }
 /**
 * `Tabs` for a page that shows everything at once: every section stays mounted
@@ -315,4 +315,4 @@ function ScrollSpyContent({ className, value, style, tabIndex = -1, ...props })
 	});
 }
 //#endregion
-export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, useScrollSpy };
+export { ScrollSpy, ScrollSpyContent, ScrollSpyList, ScrollSpyTrigger, scrollSpyTriggerClassName, useOptionalScrollSpy, useScrollSpy };

package/dist/section-jumper.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+//#region src/section-jumper.d.ts
+type SectionJumperItem = {
+  value: string;
+  label: React.ReactNode;
+  /** DOM id of a standalone destination. Defaults to `value`. */
+  targetId?: string;
+};
+type SectionJumperProviderProps = React.ComponentProps<"div"> & {
+  /** Heading selectors to discover inside the provider. */
+  selectors?: string[];
+  /** Prefix used for IDs generated on headings that do not already have one. */
+  idPrefix?: string;
+  /** Sticky-header offset used when tracking and scrolling to headings. */
+  scrollOffset?: number;
+};
+declare function SectionJumperProvider({ children, selectors, idPrefix, scrollOffset, ...props }: SectionJumperProviderProps): React.JSX.Element;
+type SectionJumperProps = Omit<React.ComponentProps<"div">, "children"> & {
+  /** Explicit sections. Omit inside `SectionJumperProvider` to use discovered headings. */
+  items?: SectionJumperItem[];
+  label?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  mobileBreakpoint?: number;
+  /** Sticky-header offset used by standalone target-id mode. */
+  scrollOffset?: number;
+};
+declare function SectionJumper({ className, items: itemsProp, label, open, defaultOpen, onOpenChange, mobileBreakpoint, scrollOffset: scrollOffsetProp, ...props }: SectionJumperProps): React.JSX.Element | null;
+//#endregion
+export { SectionJumper, type SectionJumperItem, type SectionJumperProps, SectionJumperProvider, type SectionJumperProviderProps };

package/dist/section-jumper.js

@@ -0,0 +1,276 @@
+"use client";
+import { ChevronDown } from "./icons.js";
+import { cn } from "./utils/cn.js";
+import { useReducedMotion } from "./utils/use-reduced-motion.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { useOptionalScrollSpy } from "./scroll-spy.js";
+import { useIsMobile } from "./utils/use-is-mobile.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/section-jumper.tsx
+const SectionJumperProviderContext = React.createContext(null);
+function SectionJumperProvider({ children, selectors = ["h2"], idPrefix = "section-jumper-heading", scrollOffset = 0, ...props }) {
+	const rootRef = React.useRef(null);
+	const [items, setItems] = React.useState([]);
+	const selector = selectors.join(",");
+	React.useEffect(() => {
+		const root = rootRef.current;
+		if (!root || !selector) return;
+		const generatedIds = /* @__PURE__ */ new Set();
+		const discover = () => {
+			const usedIds = /* @__PURE__ */ new Set();
+			const next = [...root.querySelectorAll(selector)].reduce((result, heading, index) => {
+				const label = heading.textContent?.trim();
+				if (!label) return result;
+				let targetId = heading.id;
+				if (!targetId) {
+					targetId = `${idPrefix}-${index + 1}`;
+					let suffix = 2;
+					while (usedIds.has(targetId) || document.getElementById(targetId) && document.getElementById(targetId) !== heading) targetId = `${idPrefix}-${index + 1}-${suffix++}`;
+					heading.id = targetId;
+					generatedIds.add(targetId);
+				}
+				usedIds.add(targetId);
+				result.push({
+					value: targetId,
+					label,
+					targetId
+				});
+				return result;
+			}, []);
+			setItems((current) => current.length === next.length && current.every((item, index) => item.value === next[index]?.value && item.label === next[index]?.label) ? current : next);
+		};
+		discover();
+		const observer = new MutationObserver(discover);
+		observer.observe(root, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		return () => {
+			observer.disconnect();
+			for (const id of generatedIds) {
+				const heading = document.getElementById(id);
+				if (heading && root.contains(heading)) heading.removeAttribute("id");
+			}
+		};
+	}, [idPrefix, selector]);
+	const value = React.useMemo(() => ({
+		items,
+		scrollOffset
+	}), [items, scrollOffset]);
+	return /* @__PURE__ */ jsx(SectionJumperProviderContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: rootRef,
+			"data-slot": "section-jumper-provider",
+			...props,
+			children
+		})
+	});
+}
+function getSectionJumperScrollport(element) {
+	let parent = element.parentElement;
+	while (parent && parent !== document.documentElement) {
+		const { overflowY } = getComputedStyle(parent);
+		if (overflowY === "auto" || overflowY === "scroll") return parent;
+		parent = parent.parentElement;
+	}
+	return null;
+}
+function useStandaloneSectionJumper(items, scrollOffset, enabled) {
+	const reducedMotion = useReducedMotion();
+	const [activeValue, setActiveValue] = React.useState(items[0]?.value);
+	const itemsRef = React.useRef(items);
+	itemsRef.current = items;
+	const targetKey = items.map((item) => `${item.value}:${item.targetId ?? item.value}`).join("|");
+	React.useEffect(() => {
+		if (!enabled) return;
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			const targets = itemsRef.current.map((item) => ({
+				value: item.value,
+				element: document.getElementById(item.targetId ?? item.value)
+			})).filter((target) => Boolean(target.element));
+			if (targets.length === 0) return;
+			const scrollport = getSectionJumperScrollport(targets[0].element);
+			const originTop = scrollport?.getBoundingClientRect().top ?? 0;
+			let next = targets[0]?.value;
+			for (const target of targets) if (target.element.getBoundingClientRect().top - originTop <= scrollOffset + 2) next = target.value;
+			const root = scrollport ?? document.scrollingElement;
+			if (root && root.scrollTop + root.clientHeight >= root.scrollHeight - 2) next = targets.at(-1)?.value ?? next;
+			setActiveValue(next);
+		};
+		const scheduleMeasure = () => {
+			if (!frame) frame = requestAnimationFrame(measure);
+		};
+		const firstTarget = itemsRef.current.map((item) => document.getElementById(item.targetId ?? item.value)).find((element) => Boolean(element));
+		const scrollTarget = (firstTarget ? getSectionJumperScrollport(firstTarget) : null) ?? window;
+		measure();
+		scrollTarget.addEventListener("scroll", scheduleMeasure, { passive: true });
+		window.addEventListener("resize", scheduleMeasure);
+		return () => {
+			if (frame) cancelAnimationFrame(frame);
+			scrollTarget.removeEventListener("scroll", scheduleMeasure);
+			window.removeEventListener("resize", scheduleMeasure);
+		};
+	}, [
+		enabled,
+		scrollOffset,
+		targetKey
+	]);
+	const getTargetId = React.useCallback((value) => {
+		return itemsRef.current.find((candidate) => candidate.value === value)?.targetId ?? value;
+	}, []);
+	const scrollToSection = React.useCallback((value) => {
+		const element = document.getElementById(getTargetId(value));
+		if (!element) return;
+		setActiveValue(value);
+		const scrollport = getSectionJumperScrollport(element);
+		const behavior = reducedMotion ? "auto" : "smooth";
+		if (scrollport) scrollport.scrollTo({
+			top: element.getBoundingClientRect().top - scrollport.getBoundingClientRect().top + scrollport.scrollTop - scrollOffset,
+			behavior
+		});
+		else window.scrollTo({
+			top: element.getBoundingClientRect().top + window.scrollY - scrollOffset,
+			behavior
+		});
+	}, [
+		getTargetId,
+		reducedMotion,
+		scrollOffset
+	]);
+	return React.useMemo(() => ({
+		activeValue,
+		getSectionId: getTargetId,
+		getTriggerId: (value) => `section-jumper-${value}`,
+		scrollToSection
+	}), [
+		activeValue,
+		getTargetId,
+		scrollToSection
+	]);
+}
+function SectionJumperDot({ active, variant }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("block shrink-0 bg-line transition-[width,height,background-color] duration-(--duration-motion-surface) ease-gdt-out motion-reduce:transition-none", !active && "size-2 rounded-full", active && variant === "desktop" && "h-6 w-2 rounded-sm bg-surface-brand", active && variant === "menu" && "size-2 rounded-full bg-surface-brand", active && variant === "mobile" && "h-2 w-6 rounded-sm bg-surface-brand")
+	});
+}
+function SectionJumperMenu({ items, onSelect, controller }) {
+	const { activeValue, getSectionId, getTriggerId } = controller;
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Page sections",
+		className: "flex flex-col gap-0.5",
+		children: items.map((item) => {
+			const active = item.value === activeValue;
+			return /* @__PURE__ */ jsxs("button", {
+				id: `${getTriggerId(item.value)}-jumper`,
+				type: "button",
+				"aria-controls": getSectionId(item.value),
+				"aria-current": active ? "location" : void 0,
+				"data-active": active ? "" : void 0,
+				className: cn("flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-gdt-sm font-medium text-fg-secondary outline-none transition-colors hover:bg-surface-raised focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]", active && "bg-surface-brand-subtle font-semibold text-fg-brand"),
+				onClick: () => onSelect(item.value),
+				children: [/* @__PURE__ */ jsx(SectionJumperDot, {
+					active,
+					variant: "menu"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: item.label
+				})]
+			}, item.value);
+		})
+	});
+}
+function SectionJumper({ className, items: itemsProp, label = "On this page", open, defaultOpen = false, onOpenChange, mobileBreakpoint = 1024, scrollOffset: scrollOffsetProp, ...props }) {
+	const provider = React.useContext(SectionJumperProviderContext);
+	const items = itemsProp ?? provider?.items ?? [];
+	const scrollOffset = scrollOffsetProp ?? provider?.scrollOffset ?? 0;
+	const scrollSpy = useOptionalScrollSpy();
+	const hasExplicitTargets = items.some((item) => item.targetId !== void 0);
+	const standalone = useStandaloneSectionJumper(items, scrollOffset, hasExplicitTargets || !scrollSpy);
+	const controller = hasExplicitTargets || !scrollSpy ? standalone : scrollSpy;
+	const { activeValue, scrollToSection } = controller;
+	const isMobile = useIsMobile(mobileBreakpoint);
+	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+	const resolvedOpen = open ?? internalOpen;
+	const activeItem = items.find((item) => item.value === activeValue);
+	const setOpen = React.useCallback((next) => {
+		if (open === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [onOpenChange, open]);
+	const select = React.useCallback((value) => {
+		scrollToSection(value);
+		setOpen(false);
+	}, [scrollToSection, setOpen]);
+	if (items.length === 0) return null;
+	const desktopTrigger = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `${label}${activeItem ? `, current section: ${String(activeItem.label)}` : ""}`,
+		className: "flex w-fit cursor-pointer flex-col items-center gap-3.5 rounded-2xl border border-transparent p-2 outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]",
+		children: items.map((item) => {
+			return /* @__PURE__ */ jsx(SectionJumperDot, {
+				active: item.value === activeValue,
+				variant: "desktop"
+			}, item.value);
+		})
+	});
+	const mobileTrigger = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "flex cursor-pointer items-center gap-3 rounded-full border border-line-subtle bg-surface-overlay px-4 py-1 text-gdt-xs font-medium text-fg-brand shadow-2 outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)]",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "flex items-center gap-1",
+				children: items.map((item) => /* @__PURE__ */ jsx(SectionJumperDot, {
+					active: item.value === activeValue,
+					variant: "mobile"
+				}, item.value))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "max-w-32 truncate",
+				children: activeItem?.label ?? label
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": true,
+				className: cn("size-3 transition-transform", resolvedOpen && "rotate-180")
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "section-jumper",
+		className: cn("w-fit", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open: resolvedOpen,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				render: isMobile ? mobileTrigger : desktopTrigger,
+				openOnHover: !isMobile,
+				closeDelay: 100
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: isMobile ? "center" : "end",
+				side: isMobile ? "top" : "left",
+				sideOffset: 8,
+				showArrow: false,
+				className: cn("border border-line-subtle shadow-2 px-4 pb-4 pt-3", isMobile ? "w-90 rounded-2xl" : "w-60 rounded-2xl"),
+				children: [/* @__PURE__ */ jsx("p", {
+					className: cn("border-b border-line-subtle pb-2 font-semibold text-fg-primary", isMobile ? "text-gdt-md" : "text-gdt-sm"),
+					children: label
+				}), /* @__PURE__ */ jsx("div", {
+					className: "pt-2",
+					children: /* @__PURE__ */ jsx(SectionJumperMenu, {
+						items,
+						onSelect: select,
+						controller
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { SectionJumper, SectionJumperProvider };

package/dist/select.d.ts

@@ -1,8 +1,8 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import * as React from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/select.d.ts
-type SelectSize = ComponentSize;
+type SelectSize = ComponentSizeValue;
 declare function Select<Value, Multiple extends boolean | undefined = false>({ multiple, children, size, ...props }: Select$1.Root.Props<Value, Multiple> & {
   size?: SelectSize;
 }): React.JSX.Element;
@@ -11,11 +11,16 @@ declare function SelectValue({ className, ...props }: Select$1.Value.Props): Rea
 declare function SelectTrigger({ className, children, unstyled, ...props }: Select$1.Trigger.Props & {
   unstyled?: boolean;
 }): React.JSX.Element;
-declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
+declare function SelectContent({ className, children, header, footer, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"> & {
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}): React.JSX.Element;
+declare function SelectHeader({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function SelectFooter({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 declare function SelectLabel({ className, ...props }: Select$1.GroupLabel.Props): React.JSX.Element;
 declare function SelectItem({ className, children, ...props }: Select$1.Item.Props): React.JSX.Element;
 declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): React.JSX.Element;
 declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollUpArrow>): React.JSX.Element;
 declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollDownArrow>): React.JSX.Element;
 //#endregion
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectFooter, SelectGroup, SelectHeader, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue };