@giddaa-housing/ui 3.4.0 → 3.6.0

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 };

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 { cn } from "./utils/cn.js";
+import { SizeProvider, responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -29,11 +29,11 @@ const selectTriggerVariants = cva("group/select-trigger flex w-fit min-w-0 items
 	} },
 	defaultVariants: { size: "md" }
 });
-const selectContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[align-trigger=true]:transition-none not-data-[align-trigger=true]:data-starting-style:opacity-0 not-data-[align-trigger=true]:data-starting-style:scale-95 not-data-[align-trigger=true]:data-ending-style:opacity-0 not-data-[align-trigger=true]:data-ending-style:scale-95 not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-2 not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-starting-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-ending-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:not-data-[align-trigger=true]:data-starting-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-ending-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-0", {
+const selectContentVariants = cva("relative isolate z-50 flex max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) flex-col overflow-hidden border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-popup)] ease-gdt-out data-[align-trigger=true]:transition-none not-data-[align-trigger=true]:data-starting-style:opacity-0 not-data-[align-trigger=true]:data-starting-style:scale-95 not-data-[align-trigger=true]:data-ending-style:opacity-0 not-data-[align-trigger=true]:data-ending-style:scale-95 not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-2 not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-starting-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=top]:data-ending-style:-translate-y-2 not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=right]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:-translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-2 not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:not-data-[align-trigger=true]:data-starting-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-ending-style:scale-100 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:not-data-[align-trigger=true]:data-[side=inline-start]:data-ending-style:translate-x-0", {
 	variants: { size: {
-		sm: "rounded-lg p-1",
-		md: "rounded-xl p-1.5",
-		lg: "rounded-[18px] p-2"
+		sm: "rounded-lg",
+		md: "rounded-xl",
+		lg: "rounded-[18px]"
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -45,6 +45,74 @@ const selectItemVariants = cva("group/select-item relative flex w-full cursor-po
 	} },
 	defaultVariants: { size: "md" }
 });
+const responsiveSelectTriggerSizes = {
+	base: {
+		sm: "h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		md: "h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+		lg: "h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+	},
+	md: {
+		sm: "md:h-8 md:gap-2 md:px-3 md:text-gdt-xs md:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "md:h-10 md:gap-2 md:px-3.5 md:text-gdt-sm md:[&_svg:not([class*='size-'])]:size-4",
+		lg: "md:h-12 md:gap-2.5 md:px-4 md:pr-5 md:text-gdt-md md:[&_svg:not([class*='size-'])]:size-4.5"
+	},
+	lg: {
+		sm: "lg:h-8 lg:gap-2 lg:px-3 lg:text-gdt-xs lg:[&_svg:not([class*='size-'])]:size-3.5",
+		md: "lg:h-10 lg:gap-2 lg:px-3.5 lg:text-gdt-sm lg:[&_svg:not([class*='size-'])]:size-4",
+		lg: "lg:h-12 lg:gap-2.5 lg:px-4 lg:pr-5 lg:text-gdt-md lg:[&_svg:not([class*='size-'])]:size-4.5"
+	}
+};
+const responsiveSelectContentSizes = {
+	base: {
+		sm: "rounded-lg",
+		md: "rounded-xl",
+		lg: "rounded-[18px]"
+	},
+	md: {
+		sm: "md:rounded-lg",
+		md: "md:rounded-xl",
+		lg: "md:rounded-[18px]"
+	},
+	lg: {
+		sm: "lg:rounded-lg",
+		md: "lg:rounded-xl",
+		lg: "lg:rounded-[18px]"
+	}
+};
+const responsiveSelectItemSizes = {
+	base: {
+		sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs",
+		md: "gap-2 rounded-md px-4 py-2 text-gdt-sm",
+		lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md"
+	},
+	md: {
+		sm: "md:gap-1.5 md:px-3 md:py-1.5 md:text-gdt-xs",
+		md: "md:gap-2 md:px-4 md:py-2 md:text-gdt-sm",
+		lg: "md:gap-2.5 md:px-4 md:py-2.5 md:text-gdt-md"
+	},
+	lg: {
+		sm: "lg:gap-1.5 lg:px-3 lg:py-1.5 lg:text-gdt-xs",
+		md: "lg:gap-2 lg:px-4 lg:py-2 lg:text-gdt-sm",
+		lg: "lg:gap-2.5 lg:px-4 lg:py-2.5 lg:text-gdt-md"
+	}
+};
+const responsiveSelectBodySizes = {
+	base: {
+		sm: "p-1",
+		md: "p-1.5",
+		lg: "p-2"
+	},
+	md: {
+		sm: "md:p-1",
+		md: "md:p-1.5",
+		lg: "md:p-2"
+	},
+	lg: {
+		sm: "lg:p-1",
+		md: "lg:p-1.5",
+		lg: "lg:p-2"
+	}
+};
 function SelectGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Group, {
 		"data-slot": "select-group",
@@ -60,17 +128,18 @@ function SelectValue({ className, ...props }) {
 	});
 }
 function SelectTrigger({ className, children, unstyled, ...props }) {
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectTriggerSizes);
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-slot": "select-trigger",
-		"data-size": resolvedSize,
-		className: cn(!unstyled && selectTriggerVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(!unstyled && selectTriggerVariants({ size: null }), !unstyled && resolvedSize.className, className),
 		...props,
 		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 }) {
-	const resolvedSize = useComponentSize();
+function SelectContent({ className, children, header, footer, side = "bottom", sideOffset = 8, align = "center", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectContentSizes);
+	const bodySize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectBodySizes);
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		side,
 		sideOffset,
@@ -81,19 +150,43 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 8, a
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			"data-slot": "select-content",
 			"data-align-trigger": alignItemWithTrigger,
-			className: cn(selectContentVariants({ size: resolvedSize }), className),
+			className: cn(selectContentVariants({ size: null }), resolvedSize.className, className),
 			...props,
 			children: [
-				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-				/* @__PURE__ */ jsx(Select$1.List, {
-					className: "space-y-0.5",
-					children
+				header,
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "select-content-body",
+					className: cn("min-h-0 flex-1 overflow-y-auto", bodySize.className),
+					children: [
+						/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+						/* @__PURE__ */ jsx(Select$1.List, {
+							className: "space-y-0.5",
+							children
+						}),
+						/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+					]
 				}),
-				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+				footer
 			]
 		})
 	}) });
 }
+function SelectHeader({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "select-header",
+		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-t-[inherit] border-line-subtle border-b bg-canvas px-3 py-2 text-left text-gdt-sm font-bold text-fg-brand outline-none transition-colors hover:bg-surface-brand-subtle focus-visible:bg-surface-brand-subtle focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-brand-subtle disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		...props
+	});
+}
+function SelectFooter({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "select-footer",
+		className: cn("relative z-20 flex min-h-9 w-full cursor-pointer items-center gap-2 rounded-none rounded-b-[inherit] border-line-subtle border-t bg-canvas px-3 py-2 text-left text-gdt-sm font-semibold text-fg-secondary outline-none transition-colors hover:bg-surface focus-visible:bg-surface focus-visible:inset-ring-2 focus-visible:inset-ring-line-focus active:bg-surface-raised disabled:pointer-events-none disabled:text-fg-caption-placeholder", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className),
+		...props
+	});
+}
 function SelectLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 		"data-slot": "select-label",
@@ -103,10 +196,10 @@ function SelectLabel({ className, ...props }) {
 }
 function SelectItem({ className, children, ...props }) {
 	const { multiple } = React.useContext(SelectSelectionContext);
-	const resolvedSize = useComponentSize();
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(), responsiveSelectItemSizes);
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
 		"data-slot": "select-item",
-		className: cn(selectItemVariants({ size: resolvedSize }), !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
+		className: cn(selectItemVariants({ size: null }), resolvedSize.className, !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
 		...props,
 		children: [multiple ? /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
 			keepMounted: true,
@@ -142,4 +235,4 @@ function SelectScrollDownButton({ className, ...props }) {
 	});
 }
 //#endregion
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectFooter, SelectGroup, SelectHeader, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/separator.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/separator.tsx

package/dist/sheet.d.ts

@@ -9,6 +9,8 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: SheetSide;
   showCloseButton?: boolean;
   showOverlay?: boolean;
+  /** @internal Positions specialized popup shells without changing the surface. */
+  popupClassName?: string;
 } & ({
   side: "top" | "bottom";
   size?: "fullscreen";
@@ -16,7 +18,7 @@ type SheetContentProps = Dialog.Popup.Props & {
   side?: "left" | "right";
   size?: "sm" | "md" | "lg";
 });
-declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, ...props }: SheetContentProps): React.JSX.Element;
+declare function SheetContent({ className, children, side, size, showCloseButton, showOverlay, popupClassName, ...props }: SheetContentProps): React.JSX.Element;
 declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/sheet.js

@@ -1,6 +1,6 @@
 "use client";
 import { X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
 import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
@@ -42,7 +42,7 @@ function SheetOverlay({ className, ...props }) {
 		...props
 	});
 }
-const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) transition-[opacity,scale,translate] duration-[var(--duration-motion-surface)] ease-gdt-drawer data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=bottom]:rounded-b-none data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=top]:rounded-t-none data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:rounded-l-none data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:rounded-r-none data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 data-[side=bottom]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=top]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*1.5rem)] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*1.5rem)] data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=bottom]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)] data-[side=top]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)]", {
+const sheetContentVariants = cva("group/sheet-content pointer-events-none fixed z-50 overflow-visible transition-[opacity,scale,translate] duration-[var(--duration-motion-surface)] ease-gdt-drawer data-ending-style:opacity-0 data-starting-style:opacity-0 [--sheet-padding-x:1rem] [--sheet-padding-top:1rem] data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 data-[side=bottom]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=top]:data-[nested-dialog-open]:translate-y-[calc(var(--nested-dialogs)*1.5rem)] data-[side=left]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*1.5rem)] data-[side=right]:data-[nested-dialog-open]:translate-x-[calc(var(--nested-dialogs)*-1.5rem)] data-[side=bottom]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)] data-[side=top]:data-[nested-dialog-open]:scale-x-[calc(1_-_var(--nested-dialogs)*0.05)]", {
 	variants: { size: {
 		sm: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:1.5rem] w-90 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h5)]",
 		md: "sm:[--sheet-padding-top:1.5rem] sm:[--sheet-padding-x:2rem] xl:[--sheet-padding-x:2.5rem] w-120 max-w-[calc(100vw-2.5rem)] [--sheet-title:var(--text-gdt-h4)]",
@@ -51,7 +51,7 @@ const sheetContentVariants = cva("group/sheet-content fixed z-50 flex flex-col g
 	} },
 	defaultVariants: { size: "md" }
 });
-function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, ...props }) {
+function SheetContent({ className, children, side = "left", size = "md", showCloseButton = true, showOverlay = true, popupClassName, ...props }) {
 	const resolvedSize = side === "top" || side === "bottom" ? "fullscreen" : size !== "fullscreen" ? size : "md";
 	return /* @__PURE__ */ jsxs(SheetPortal, { children: [showOverlay && /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(SizeProvider, {
 		size: resolvedSize === "fullscreen" ? "lg" : resolvedSize,
@@ -59,13 +59,17 @@ function SheetContent({ className, children, side = "left", size = "md", showClo
 			"data-slot": "sheet-content",
 			"data-side": side,
 			"data-size": resolvedSize,
-			className: cn(sheetContentVariants({ size: resolvedSize }), className),
+			className: cn(sheetContentVariants({ size: resolvedSize }), popupClassName),
 			...props,
-			children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "sheet-surface",
+				className: cn("pointer-events-auto flex size-full flex-col gap-0 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding text-fg-primary shadow-(--elevation-e2-shadow) group-data-[side=bottom]/sheet-content:rounded-b-none group-data-[side=top]/sheet-content:rounded-t-none group-data-[side=left]/sheet-content:rounded-l-none group-data-[side=right]/sheet-content:rounded-r-none", className),
+				children
+			}), showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
 				"data-slot": "sheet-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					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",
+					className: "pointer-events-auto 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(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",

package/dist/sidebar.d.ts

@@ -1,6 +1,6 @@
 import { Separator } from "./separator.js";
-import { t as Button } from "./button-DW5OijoR.js";
-import { t as Input } from "./input-CfoEJ8A6.js";
+import { t as Button } from "./button-BS5KCibF.js";
+import { Input } from "./input.js";
 import { TooltipContent } from "./tooltip.js";
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";