@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/combobox-CACVdp1R.js

@@ -0,0 +1,430 @@
+import { Check, ChevronDown, X } from "./icons.js";
+import { cn } from "./utils/cn.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { useCallback, useRef, useState } from "react";
+import { Combobox } from "@base-ui/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/lib/use-grown.ts
+/**
+* Tracks whether an element has grown taller than its own `min-height` — a
+* chips field that has wrapped onto a second row, in practice.
+*
+* CSS can ask about a container's width but never its own height, and a radius
+* that reads as a pill on one row reads as a mistake on two, so the height has
+* to be measured. `min-height` is the baseline because it is the height the
+* control lays out at when empty. An element without one has no baseline to
+* have grown past and always reports `false`, which is why the size variants
+* that set a fixed `h-*` set a matching `min-h-*` beside it: a call site that
+* swaps in `h-auto` then keeps both its floor and this measurement.
+*/
+function useGrown() {
+	const [grown, setGrown] = useState(false);
+	const elementRef = useRef(null);
+	const observerRef = useRef(null);
+	const measure = useCallback(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		const base = Number.parseFloat(getComputedStyle(element).minHeight);
+		setGrown(base > 0 && element.offsetHeight > base + 1);
+	}, []);
+	return {
+		ref: useCallback((element) => {
+			observerRef.current?.disconnect();
+			observerRef.current = null;
+			elementRef.current = element;
+			if (element === null) {
+				setGrown(false);
+				return;
+			}
+			measure();
+			if (typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(measure);
+			observer.observe(element);
+			observerRef.current = observer;
+		}, [measure]),
+		grown
+	};
+}
+//#endregion
+//#region src/combobox.tsx
+const ComboboxSelectionContext = React.createContext({ multiple: false });
+/**
+* True for anything rendered inside `ComboboxContent`. A `ComboboxInput` is
+* either the field that opens the popup or the search box inside it, and the
+* two want opposite treatment — the styling and the anchoring both turn on
+* this, and reading it from the tree beats guessing from CSS state that is
+* true in both places (the popup is, after all, open in both).
+*/
+const ComboboxPopupContext = React.createContext(false);
+function Combobox$1({ multiple, children, size, ...props }) {
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size,
+		children: /* @__PURE__ */ jsx(ComboboxSelectionContext.Provider, {
+			value: { multiple: multiple === true },
+			children: /* @__PURE__ */ jsx(Combobox.Root, {
+				multiple,
+				...props,
+				children
+			})
+		})
+	});
+}
+const comboboxTriggerVariants = cva("group/combobox-trigger flex w-fit min-w-0 items-center justify-between rounded-full data-[grown=true]:rounded-2xl border border-line bg-canvas text-left font-normal whitespace-nowrap text-fg-primary shadow-none outline-none transition-[background-color,border-color,border-radius,box-shadow,color] select-none hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus data-focused:border-line-focus data-focused:inset-ring-1 data-focused:inset-ring-line-focus data-popup-open:rounded-2xl data-popup-open:border-line-focus data-popup-open:inset-ring-1 data-popup-open:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder data-placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:shadow-none data-[invalid=true]:border-line-danger data-[invalid=true]:text-fg-danger *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:min-w-0 *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { size: {
+		sm: "h-8 min-h-8 gap-2 px-3 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
+		md: "h-10 min-h-10 gap-2 px-3.5 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
+		lg: "h-12 min-h-12 gap-2.5 px-4 pr-5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxInputVariants = cva("w-auto data-[grown=true]:rounded-2xl has-data-popup-open:rounded-2xl has-data-popup-open:border-line-focus has-data-popup-open:inset-ring-1 has-data-popup-open:inset-ring-line-focus", {
+	variants: { size: {
+		sm: "min-h-8",
+		md: "min-h-10",
+		lg: "min-h-12"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* The same field, standing in the popup as its search box. It is inside the
+* open popup rather than being the thing that opened it, so none of the
+* trigger's open-state treatment applies: no pill, no focus ring competing
+* with the popup's own border, and a radius that belongs to the list it sits
+* above rather than to a field on the page.
+*/
+const comboboxPopupInputVariants = cva("w-auto", {
+	variants: { size: {
+		sm: "rounded-md",
+		md: "rounded-lg",
+		lg: "rounded-lg"
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxContentVariants = cva("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width))] origin-(--transform-origin) 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-[chips=true]:min-w-(--anchor-width) data-starting-style:opacity-0 data-starting-style:scale-95 data-ending-style:opacity-0 data-ending-style:scale-95 data-[side=bottom]:data-starting-style:translate-y-2 data-[side=bottom]:data-ending-style:translate-y-2 data-[side=top]:data-starting-style:-translate-y-2 data-[side=top]:data-ending-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=left]:data-ending-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=right]:data-ending-style:-translate-x-2 data-[side=inline-end]:data-starting-style:-translate-x-2 data-[side=inline-end]:data-ending-style:-translate-x-2 data-[side=inline-start]:data-starting-style:translate-x-2 data-[side=inline-start]:data-ending-style:translate-x-2 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100 motion-reduce:data-[side=bottom]:data-starting-style:translate-y-0 motion-reduce:data-[side=bottom]:data-ending-style:translate-y-0 motion-reduce:data-[side=top]:data-starting-style:translate-y-0 motion-reduce:data-[side=top]:data-ending-style:translate-y-0 motion-reduce:data-[side=left]:data-starting-style:translate-x-0 motion-reduce:data-[side=left]:data-ending-style:translate-x-0 motion-reduce:data-[side=right]:data-starting-style:translate-x-0 motion-reduce:data-[side=right]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-end]:data-ending-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-starting-style:translate-x-0 motion-reduce:data-[side=inline-start]:data-ending-style:translate-x-0 *:data-[slot=input-group]:mb-1", {
+	variants: { size: {
+		sm: "rounded-lg",
+		md: "rounded-xl",
+		lg: "rounded-[18px]"
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxContentBodyVariants = cva("flex min-h-0 flex-1 flex-col overflow-hidden", {
+	variants: { size: {
+		sm: "p-1",
+		md: "p-1.5",
+		lg: "p-2"
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxItemVariants = cva("group/combobox-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none select-none data-highlighted:bg-surface data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: { size: {
+		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"
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxChipsVariants = cva("flex flex-wrap items-center gap-1 rounded-full data-[grown=true]:rounded-2xl border border-line bg-canvas bg-clip-padding text-fg-primary transition-[background-color,border-color,box-shadow,color] focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-aria-invalid:border-line-danger has-aria-invalid:text-fg-danger has-aria-invalid:shadow-none has-data-popup-open:rounded-2xl has-data-popup-open:border-line-focus has-data-popup-open:inset-ring-1 has-data-popup-open:inset-ring-line-focus", {
+	variants: { size: {
+		sm: "min-h-8 px-2.5 py-1 text-gdt-xs has-data-[slot=combobox-chip]:px-1.5",
+		md: "min-h-10 px-3 py-1.5 text-gdt-sm has-data-[slot=combobox-chip]:px-2",
+		lg: "min-h-12 px-4 py-2 text-gdt-md has-data-[slot=combobox-chip]:px-2.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+const comboboxChipVariants = cva("flex w-fit items-center justify-center gap-1 rounded-sm bg-surface font-medium whitespace-nowrap text-fg-primary has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", {
+	variants: { size: {
+		sm: "h-5 px-1.5 text-gdt-xs",
+		md: "h-[calc(--spacing(5.25))] px-1.5 text-gdt-xs",
+		lg: "h-6 px-2 text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	const resolvedSize = useComponentSize();
+	const { ref, grown } = useGrown();
+	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		ref,
+		"data-slot": "combobox-trigger",
+		"data-size": resolvedSize,
+		"data-grown": grown ? "true" : void 0,
+		className: cn(comboboxTriggerVariants({ size: resolvedSize }), className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox.Icon, { render: /* @__PURE__ */ jsx(ChevronDown, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" }) })]
+	});
+}
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		className: cn(className),
+		...props,
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs",
+			children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
+		})
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	const resolvedSize = useComponentSize();
+	const insidePopup = React.useContext(ComboboxPopupContext);
+	const { ref, grown } = useGrown();
+	const contents = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Combobox.Input, {
+			render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+			...props
+		}),
+		/* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "inline-end",
+			children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+				size: "icon-xs",
+				variant: "ghost",
+				render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
+				"data-slot": "input-group-button",
+				className: "border-0 bg-transparent p-0 shadow-none inset-ring-0 group-has-data-[slot=combobox-clear]/input-group:hidden hover:border-transparent focus-visible:border-transparent focus-visible:inset-ring-0 data-popup-open:border-transparent data-popup-open:bg-transparent data-popup-open:inset-ring-0 data-pressed:bg-transparent",
+				disabled
+			}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+		}),
+		children
+	] });
+	if (insidePopup) return /* @__PURE__ */ jsx(InputGroup, {
+		className: cn(comboboxPopupInputVariants({ size: resolvedSize }), className),
+		children: contents
+	});
+	return /* @__PURE__ */ jsx(Combobox.InputGroup, {
+		ref,
+		"data-grown": grown ? "true" : void 0,
+		render: /* @__PURE__ */ jsx(InputGroup, { className: cn(comboboxInputVariants({ size: resolvedSize }), className) }),
+		children: contents
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, children, header, footer, ...props }) {
+	const resolvedSize = useComponentSize();
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Combobox.Popup, {
+			"data-slot": "combobox-content",
+			"data-chips": !!anchor,
+			className: cn("group/combobox-content flex flex-col", comboboxContentVariants({ size: resolvedSize }), "has-data-[slot=combobox-virtualized]:max-h-none", className),
+			...props,
+			children: /* @__PURE__ */ jsxs(ComboboxPopupContext.Provider, {
+				value: true,
+				children: [
+					header,
+					/* @__PURE__ */ jsx("div", {
+						"data-slot": "combobox-content-body",
+						className: comboboxContentBodyVariants({ size: resolvedSize }),
+						children
+					}),
+					footer
+				]
+			})
+		})
+	}) });
+}
+function ComboboxHeader({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "combobox-header",
+		className: cn("relative z-20 flex min-h-9 w-full shrink-0 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 ComboboxFooter({ className, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "combobox-footer",
+		className: cn("relative z-20 flex min-h-9 w-full shrink-0 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 ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: cn("no-scrollbar min-h-0 max-h-(--available-height) flex-1 space-y-0.5 scroll-py-1 overflow-y-auto overscroll-contain data-empty:p-0 has-data-[slot=combobox-virtualized]:max-h-none has-data-[slot=combobox-virtualized]:space-y-0 has-data-[slot=combobox-virtualized]:overflow-hidden", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	const { multiple } = React.useContext(ComboboxSelectionContext);
+	const resolvedSize = useComponentSize();
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn(comboboxItemVariants({ size: resolvedSize }), !multiple && "data-selected:bg-surface-brand-subtle data-selected:font-medium data-selected:text-fg-brand", className),
+		...props,
+		children: [multiple ? /* @__PURE__ */ jsx(Combobox.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/combobox-item:border-action-primary group-data-selected/combobox-item:bg-action-primary group-data-selected/combobox-item:text-fg-on-brand group-data-disabled/combobox-item:border-line-subtle group-data-disabled/combobox-item:bg-surface group-data-disabled/combobox-item:text-fg-caption-placeholder [&>svg]:size-3",
+			children: /* @__PURE__ */ jsx(Check, {})
+		}) : null, /* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 shrink-0 items-center gap-2",
+			children
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className: cn("scroll-my-1 space-y-0.5", className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("px-3 py-1 text-gdt-xs text-fg-secondary", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("hidden w-full justify-center py-2 text-center text-gdt-sm text-fg-secondary group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("pointer-events-none my-1 h-px bg-line-subtle", className),
+		...props
+	});
+}
+function ComboboxChips({ className, ref: refProp, ...props }) {
+	const resolvedSize = useComponentSize();
+	const { ref, grown } = useGrown();
+	return /* @__PURE__ */ jsx(Combobox.Chips, {
+		ref: (element) => {
+			ref(element);
+			if (typeof refProp === "function") refProp(element);
+			else if (refProp) refProp.current = element;
+		},
+		"data-slot": "combobox-chips",
+		"data-grown": grown ? "true" : void 0,
+		className: cn(comboboxChipsVariants({ size: resolvedSize }), className),
+		...props
+	});
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	const resolvedSize = useComponentSize();
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn(comboboxChipVariants({ size: resolvedSize }), className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs",
+				children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
+			})
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 bg-transparent text-fg-primary outline-none placeholder:text-fg-caption-placeholder", className),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return React.useRef(null);
+}
+/**
+* Wires up an external virtualizer for a large `Combobox`. Spread the returned
+* `onItemHighlighted` onto `<Combobox virtualized items={...}>` and pass
+* `virtualizerRef` to `<ComboboxVirtualizedList>`. Keeps keyboard navigation in
+* sync by scrolling the highlighted (off-screen) item into view.
+*/
+function useComboboxVirtualizer() {
+	const virtualizerRef = React.useRef(null);
+	return {
+		virtualizerRef,
+		onItemHighlighted: React.useCallback((item, { reason, index }) => {
+			const virtualizer = virtualizerRef.current;
+			if (item == null || !virtualizer || index < 0) return;
+			const isStart = index === 0;
+			const isEnd = index === virtualizer.options.count - 1;
+			if (reason === "none" || reason === "keyboard" && (isStart || isEnd)) queueMicrotask(() => {
+				virtualizer.scrollToIndex(index, { align: isEnd ? "start" : "end" });
+			});
+		}, [])
+	};
+}
+function ComboboxVirtualizedList({ virtualizerRef, estimateSize = 40, overscan = 20, paddingStart = 4, paddingEnd = 4, maxHeight = "22rem", className, children }) {
+	const filteredItems = Combobox.useFilteredItems();
+	const scrollElementRef = React.useRef(null);
+	const virtualizer = useVirtualizer({
+		count: filteredItems.length,
+		getScrollElement: () => scrollElementRef.current,
+		estimateSize: typeof estimateSize === "function" ? estimateSize : () => estimateSize,
+		overscan,
+		paddingStart,
+		paddingEnd,
+		scrollPaddingStart: paddingStart,
+		scrollPaddingEnd: paddingEnd
+	});
+	React.useImperativeHandle(virtualizerRef, () => virtualizer, [virtualizer]);
+	const handleScrollElementRef = React.useCallback((element) => {
+		scrollElementRef.current = element;
+		if (element) virtualizer.measure();
+	}, [virtualizer]);
+	const totalSize = virtualizer.getTotalSize();
+	if (!filteredItems.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		ref: handleScrollElementRef,
+		"data-slot": "combobox-virtualized",
+		style: { maxHeight },
+		className: cn("no-scrollbar overflow-y-auto overscroll-contain", className),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "relative w-full",
+			style: { height: totalSize },
+			children: virtualizer.getVirtualItems().map((virtualItem) => {
+				const item = filteredItems[virtualItem.index];
+				if (item == null) return null;
+				return /* @__PURE__ */ jsx(React.Fragment, { children: children(item, {
+					index: virtualItem.index,
+					"data-index": virtualItem.index,
+					"aria-setsize": filteredItems.length,
+					"aria-posinset": virtualItem.index + 1,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						height: virtualItem.size,
+						transform: `translateY(${virtualItem.start}px)`
+					}
+				}) }, virtualItem.key);
+			})
+		})
+	});
+}
+//#endregion
+export { ComboboxValue as _, ComboboxCollection as a, useComboboxVirtualizer as b, ComboboxFooter as c, ComboboxInput as d, ComboboxItem as f, ComboboxTrigger as g, ComboboxSeparator as h, ComboboxChipsInput as i, ComboboxGroup as l, ComboboxList as m, ComboboxChip as n, ComboboxContent as o, ComboboxLabel as p, ComboboxChips as r, ComboboxEmpty as s, Combobox$1 as t, ComboboxHeader as u, ComboboxVirtualizedList as v, useComboboxAnchor as y };

package/dist/combobox.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";
 import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Virtualizer } from "@tanstack/react-virtual";
@@ -13,7 +13,12 @@ declare function ComboboxInput({ className, children, disabled, showTrigger, sho
   showTrigger?: boolean;
   showClear?: boolean;
 }): React.JSX.Element;
-declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, children, header, footer, ...props }: Combobox$1.Popup.Props & Pick<Combobox$1.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor"> & {
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}): React.JSX.Element;
+declare function ComboboxHeader({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function ComboboxFooter({ className, type, ...props }: React.ComponentProps<"button">): React.JSX.Element;
 declare function ComboboxList({ className, ...props }: Combobox$1.List.Props): React.JSX.Element;
 declare function ComboboxItem({ className, children, ...props }: Combobox$1.Item.Props): React.JSX.Element;
 declare function ComboboxGroup({ className, ...props }: Combobox$1.Group.Props): React.JSX.Element;
@@ -21,7 +26,7 @@ declare function ComboboxLabel({ className, ...props }: Combobox$1.GroupLabel.Pr
 declare function ComboboxCollection({ ...props }: Combobox$1.Collection.Props): React.JSX.Element;
 declare function ComboboxEmpty({ className, ...props }: Combobox$1.Empty.Props): React.JSX.Element;
 declare function ComboboxSeparator({ className, ...props }: Combobox$1.Separator.Props): React.JSX.Element;
-declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof Combobox$1.Chips> & Combobox$1.Chips.Props): React.JSX.Element;
+declare function ComboboxChips({ className, ref: refProp, ...props }: React.ComponentPropsWithRef<typeof Combobox$1.Chips> & Combobox$1.Chips.Props): React.JSX.Element;
 declare function ComboboxChip({ className, children, showRemove, ...props }: Combobox$1.Chip.Props & {
   showRemove?: boolean;
 }): React.JSX.Element;
@@ -74,4 +79,4 @@ declare function ComboboxVirtualizedList<Item>({ virtualizerRef, estimateSize, o
   children: (item: Item, props: ComboboxVirtualItemProps) => React.ReactNode;
 }): React.JSX.Element | null;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, type ComboboxSize, ComboboxTrigger, ComboboxValue, type ComboboxVirtualItemProps, ComboboxVirtualizedList, type ComboboxVirtualizer, useComboboxAnchor, useComboboxVirtualizer };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, type ComboboxSize, ComboboxTrigger, ComboboxValue, type ComboboxVirtualItemProps, ComboboxVirtualizedList, type ComboboxVirtualizer, useComboboxAnchor, useComboboxVirtualizer };