@giddaa-housing/ui 3.5.0 → 3.6.0

package/dist/radio-group.js

@@ -1,11 +1,16 @@
 "use client";
 import { cn } from "./utils/cn.js";
-import { useComponentSize } from "./size-context.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 //#region src/radio-group.tsx
+const radioSizeVariants = {
+	sm: "size-4 [--radio-dot-size:0.625rem]",
+	md: "size-5 [--radio-dot-size:0.75rem]",
+	lg: "size-6 [--radio-dot-size:0.875rem]"
+};
 function RadioGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		"data-slot": "radio-group",
@@ -13,11 +18,7 @@ function RadioGroup({ className, ...props }) {
 		...props
 	});
 }
-const radioVariants = cva("group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100 size-5 [--radio-dot-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--radio-dot-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--radio-dot-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--radio-dot-size:0.875rem]", { variants: { size: {
-	sm: "size-4 [--radio-dot-size:0.625rem]",
-	md: "size-5 [--radio-dot-size:0.75rem]",
-	lg: "size-6 [--radio-dot-size:0.875rem]"
-} } });
+const radioVariants = cva("group/radio-group-item peer relative flex aspect-square shrink-0 rounded-full border-2 bg-transparent text-transparent outline-none transition-[background-color,border-color,box-shadow,color,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line-strong data-checked:border-action-primary data-checked:text-action-primary data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-disabled:active:scale-100", { variants: { size: radioSizeVariants } });
 /**
 * Compose each radio item with the shared field primitives.
 *
@@ -34,11 +35,11 @@ const radioVariants = cva("group/radio-group-item peer relative flex aspect-squa
 * ```
 */
 function RadioGroupItem({ className, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveRadioSizes);
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "radio-group-item",
-		"data-size": resolvedSize,
-		className: cn(radioVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(radioVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Radio.Indicator, {
 			"data-slot": "radio-group-indicator",
@@ -47,5 +48,18 @@ function RadioGroupItem({ className, size, ...props }) {
 		})
 	});
 }
+const responsiveRadioSizes = {
+	base: radioSizeVariants,
+	md: {
+		sm: "md:size-4 md:[--radio-dot-size:0.625rem]",
+		md: "md:size-5 md:[--radio-dot-size:0.75rem]",
+		lg: "md:size-6 md:[--radio-dot-size:0.875rem]"
+	},
+	lg: {
+		sm: "lg:size-4 lg:[--radio-dot-size:0.625rem]",
+		md: "lg:size-5 lg:[--radio-dot-size:0.75rem]",
+		lg: "lg:size-6 lg:[--radio-dot-size:0.875rem]"
+	}
+};
 //#endregion
 export { RadioGroup, RadioGroupItem, radioVariants };

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