@giddaa-housing/ui 2.0.0 → 3.0.0

package/dist/chat.js

@@ -0,0 +1,528 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { FileText, Image, Plus, Send, Video } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/chat.tsx
+/**
+* The chat shell — a column of header, body and footer.
+*
+* **It sets no height on purpose.** The consumer decides: `h-[708px]`, `h-full`,
+* `h-dvh`. Note that `ChatBody` can only scroll inside a bounded height — give
+* this element one, or the body grows with its content and the page scrolls
+* instead.
+*
+* Header and footer sit outside the scrolling region, so they never move and
+* never need measuring. Anything that should pin *within* the scroll — tabs, a
+* filter row — belongs in `ChatBodyBar`.
+*/
+function Chat({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "chat",
+		className: cn("relative flex min-h-0 flex-col overflow-hidden rounded-[40px] border border-line-subtle bg-surface", className),
+		...props
+	});
+}
+/**
+* The fixed header. Composes anything — avatar, title, actions, a sentiment bar.
+*
+* Its own height is free: it can wrap, gain a row, or lose one, and nothing
+* downstream cares. Only the body scrolls.
+*/
+function ChatHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "chat-header",
+		className: cn("flex min-h-20 shrink-0 items-center gap-3 border-b border-line-subtle bg-canvas px-3.5", className),
+		...props
+	});
+}
+/** The header's primary line — who the conversation is with. */
+function ChatHeaderTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-slot": "chat-header-title",
+		className: cn("truncate text-gdt-md leading-[22px] font-semibold text-fg-primary", className),
+		...props
+	});
+}
+/** The header's secondary line — timezone, status, last seen. */
+function ChatHeaderDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "chat-header-description",
+		className: cn("truncate text-gdt-xs leading-[18px] text-fg-secondary", className),
+		...props
+	});
+}
+/** Avatar and contact copy. Fills the space between navigation and actions. */
+function ChatHeaderIdentity({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-header-identity",
+		className: cn("flex min-w-0 flex-1 items-center gap-3", className),
+		...props
+	});
+}
+/** Stacks the contact name and presence line at the Figma one-pixel gap. */
+function ChatHeaderText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-header-text",
+		className: cn("flex min-w-0 flex-col gap-px", className),
+		...props
+	});
+}
+/** Trailing icon actions such as video and voice calling. */
+function ChatHeaderActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-header-actions",
+		className: cn("flex shrink-0 items-center gap-3", className),
+		...props
+	});
+}
+/** A 24px header affordance. The caller supplies the icon and behaviour. */
+function ChatHeaderAction({ className, size = "icon-xs", variant = "ghost", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "chat-header-action",
+		className: cn("text-fg-primary [&_svg:not([class*='size-'])]:size-6", className),
+		size,
+		type: "button",
+		variant,
+		...props
+	});
+}
+/**
+* The fixed footer. Wraps `ChatInput`, and owns only the chrome around it —
+* the rule and the surface. The composer owns its internal bar padding.
+*/
+function ChatFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		"data-slot": "chat-footer",
+		className: cn("shrink-0 border-t border-line-subtle bg-canvas", className),
+		...props
+	});
+}
+/**
+* Distance from the bottom, in px, that still counts as being at the bottom.
+*
+* Big enough to absorb sub-pixel layout rounding, small enough that it never
+* feels sticky.
+*/
+const SCROLL_EDGE_THRESHOLD = 8;
+/** Movement below this is layout jitter, not deliberate reader input. */
+const SUBPIXEL_EPSILON = .5;
+const ChatBodyContext = React.createContext(null);
+function assignRef(ref, value) {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+}
+function getStableAnchor(element, content) {
+	const stable = element.closest("[data-scroll-anchor],[data-message-id]");
+	if (!stable || !content.contains(stable)) return { element };
+	const scrollAnchor = stable.getAttribute("data-scroll-anchor");
+	if (scrollAnchor !== null) return {
+		element: stable,
+		attribute: "data-scroll-anchor",
+		value: scrollAnchor
+	};
+	return {
+		element: stable,
+		attribute: "data-message-id",
+		value: stable.getAttribute("data-message-id") ?? void 0
+	};
+}
+function findAnchorByAttribute(content, attribute, value) {
+	for (const element of content.querySelectorAll(`[${attribute}]`)) if (element.getAttribute(attribute) === value) return element;
+	return null;
+}
+/**
+* Read the body's scroll state — for a "jump to bottom" or "N new messages"
+* affordance. Must be called inside `<ChatBody>`.
+*/
+function useChatBody() {
+	const context = React.useContext(ChatBodyContext);
+	if (!context) throw new Error("useChatBody must be called inside <ChatBody>.");
+	return context;
+}
+/**
+* The scrolling region of a chat. Composes anything — messages, a table, an
+* empty state. It owns scrolling and nothing else.
+*
+* Two behaviours, and they are the whole point:
+*
+* **Following.** New content keeps the bottom in view — but only while the
+* reader is already there. Any deliberate scroll upward hands control over
+* immediately; returning to the bottom hands it back. It never yanks.
+*
+* **Prepend.** When older messages load in above, the row you were reading
+* stays exactly where it was. This works by remembering an element and its
+* offset from the viewport, then putting it back after the layout changes —
+* which holds no matter where the content grew.
+*
+* Both are driven by one `ResizeObserver` on the content, so they also cover an
+* image finishing its load or a bubble reflowing — things a dependency on a
+* message array cannot see. It fires once on observe, which is what opens the
+* view at the latest message.
+*
+* Children may use `sticky top-0` (see `ChatBodyBar`) — this is their scroll
+* container.
+*/
+function ChatBody({ className, children, onScroll, ref, ...props }) {
+	const viewportRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	const [isPinned, setIsPinned] = React.useState(true);
+	const setViewportRef = React.useCallback((node) => {
+		viewportRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	const followingRef = React.useRef(true);
+	const lastScrollTopRef = React.useRef(0);
+	const anchorRef = React.useRef(null);
+	const scrollToBottom = React.useCallback((behavior = "smooth") => {
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		followingRef.current = true;
+		setIsPinned(true);
+		viewport.scrollTo({
+			top: viewport.scrollHeight - viewport.clientHeight,
+			behavior
+		});
+	}, []);
+	/**
+	* Remember the element under the middle of the viewport, and how far below
+	* the viewport's top edge it sits.
+	*
+	* The middle rather than the top on purpose: `ChatBodyBar` is sticky at the
+	* top, so probing there would anchor to a bar that never moves and defeat
+	* the whole mechanism.
+	*/
+	const captureAnchor = React.useCallback(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		if (!viewport || !content || followingRef.current) {
+			anchorRef.current = null;
+			return;
+		}
+		const bounds = viewport.getBoundingClientRect();
+		const element = document.elementFromPoint(bounds.left + bounds.width / 2, bounds.top + bounds.height / 2);
+		if (!element || !viewport.contains(element)) {
+			anchorRef.current = null;
+			return;
+		}
+		const anchor = getStableAnchor(element, content);
+		anchorRef.current = {
+			...anchor,
+			top: anchor.element.getBoundingClientRect().top - bounds.top
+		};
+	}, []);
+	/** Put the remembered element back where it was. */
+	const restoreAnchor = React.useCallback(() => {
+		const viewport = viewportRef.current;
+		const content = contentRef.current;
+		const anchor = anchorRef.current;
+		if (!viewport || !content || !anchor) return;
+		let element = anchor.element;
+		if (!element.isConnected && anchor.attribute && anchor.value !== void 0) element = findAnchorByAttribute(content, anchor.attribute, anchor.value) ?? element;
+		if (!element.isConnected || !content.contains(element)) return;
+		const viewportTop = viewport.getBoundingClientRect().top;
+		const delta = element.getBoundingClientRect().top - viewportTop - anchor.top;
+		if (Math.abs(delta) <= SUBPIXEL_EPSILON) return;
+		viewport.scrollTop += delta;
+		anchor.element = element;
+		anchor.top = element.getBoundingClientRect().top - viewportTop;
+	}, []);
+	const handleScroll = React.useCallback((event) => {
+		onScroll?.(event);
+		if (event.defaultPrevented) return;
+		const viewport = event.currentTarget;
+		const previous = lastScrollTopRef.current;
+		const current = viewport.scrollTop;
+		lastScrollTopRef.current = current;
+		if (viewport.scrollHeight - current - viewport.clientHeight <= SCROLL_EDGE_THRESHOLD) followingRef.current = true;
+		else if (current < previous - SUBPIXEL_EPSILON) followingRef.current = false;
+		captureAnchor();
+		setIsPinned(followingRef.current);
+	}, [captureAnchor, onScroll]);
+	React.useLayoutEffect(() => {
+		scrollToBottom("instant");
+	}, [scrollToBottom]);
+	React.useEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		const observer = new ResizeObserver(() => {
+			if (followingRef.current) scrollToBottom("instant");
+			else restoreAnchor();
+		});
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [scrollToBottom, restoreAnchor]);
+	const context = React.useMemo(() => ({
+		isPinned,
+		scrollToBottom
+	}), [isPinned, scrollToBottom]);
+	return /* @__PURE__ */ jsx(ChatBodyContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref: setViewportRef,
+			"data-slot": "chat-body",
+			"data-pinned": isPinned || void 0,
+			className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain bg-surface px-3.5 py-3 [background-image:radial-gradient(circle,color-mix(in_srgb,var(--color-line)_55%,transparent)_0.75px,transparent_0.75px)] [background-position:0_0] [background-size:24px_24px] [overflow-anchor:none]", className),
+			onScroll: handleScroll,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: contentRef,
+				"data-slot": "chat-body-content",
+				children
+			})
+		})
+	});
+}
+/**
+* A bar pinned to the top of the scrolling region — tabs, a filter row, a date
+* header. Content scrolls behind it.
+*
+* It needs an opaque background to hide what passes under it; `bg-canvas`
+* matches the panel surface and can be overridden.
+*/
+function ChatBodyBar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chat-body-bar",
+		className: cn("sticky top-0 z-10 bg-canvas", className),
+		...props
+	});
+}
+/**
+* Bounds one dated group so its sticky divider is pushed away by the next
+* section instead of stacking with it.
+*/
+function ChatDateSection({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		"data-slot": "chat-date-section",
+		className: cn("relative flex min-w-0 flex-col gap-3 [&+&]:mt-5", className),
+		...props
+	});
+}
+/** Sticky date pill for the messages in its containing `ChatDateSection`. */
+function ChatDateDivider({ className, ...props }) {
+	return /* @__PURE__ */ jsx("time", {
+		"data-slot": "chat-date-divider",
+		className: cn("sticky top-3 z-10 self-center rounded-[14px] bg-canvas px-3 py-1.25 text-gdt-sm font-bold text-fg-secondary shadow-1", className),
+		...props
+	});
+}
+/**
+* The default menu — File, Video, Image. Spread it to *extend* rather than
+* replace: `items={[...defaultChatInputAttachItems, { kind: "document", … }]}`.
+*/
+const defaultChatInputAttachItems = [
+	{
+		kind: "file",
+		label: "File",
+		icon: /* @__PURE__ */ jsx(FileText, {}),
+		accept: "*/*"
+	},
+	{
+		kind: "video",
+		label: "Video",
+		icon: /* @__PURE__ */ jsx(Video, {}),
+		accept: "video/*"
+	},
+	{
+		kind: "image",
+		label: "Image",
+		icon: /* @__PURE__ */ jsx(Image, {}),
+		accept: "image/*"
+	}
+];
+const ChatInputContext = React.createContext(null);
+function useChatInputContext() {
+	const context = React.useContext(ChatInputContext);
+	if (!context) throw new Error("ChatInput parts must be rendered inside <ChatInput>.");
+	return context;
+}
+/**
+* The chat composer. A real `<form>`, so Enter and the send button are one
+* submit path rather than two.
+*
+* Compose the parts inside it — the layout is yours, the behaviour is ours.
+*/
+function ChatInput({ value, defaultValue, onValueChange, onSend, clearOnSend = true, disabled = false, className, children, ...props }) {
+	const [uncontrolled, setUncontrolled] = React.useState(defaultValue ?? "");
+	const isControlled = value !== void 0;
+	const text = isControlled ? value : uncontrolled;
+	const canSend = onSend !== void 0;
+	const setValue = React.useCallback((next) => {
+		if (!isControlled) setUncontrolled(next);
+		onValueChange?.(next);
+	}, [isControlled, onValueChange]);
+	const submit = React.useCallback(() => {
+		const trimmed = text.trim();
+		if (!trimmed || disabled || !onSend) return;
+		const accepted = onSend(trimmed);
+		if (clearOnSend && accepted !== false) setValue("");
+	}, [
+		text,
+		disabled,
+		onSend,
+		clearOnSend,
+		setValue
+	]);
+	const context = React.useMemo(() => ({
+		value: text,
+		setValue,
+		disabled,
+		canSend,
+		submit
+	}), [
+		text,
+		setValue,
+		disabled,
+		canSend,
+		submit
+	]);
+	return /* @__PURE__ */ jsx(ChatInputContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("form", {
+			"data-slot": "chat-input",
+			"data-disabled": disabled || void 0,
+			className: cn("flex min-h-19 w-full min-w-0 items-center gap-2.5 bg-canvas px-3.5", className),
+			...props,
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children
+		})
+	});
+}
+/** The `+` button. Opens a dropdown of file kinds, each opening a filtered picker. */
+function ChatInputAttach({ onAttach, items = defaultChatInputAttachItems, className, contentClassName, disabled: disabledProp = false, "aria-label": ariaLabel = "Add attachment", children, size = "icon-xs", variant = "ghost", ...props }) {
+	const { disabled } = useChatInputContext();
+	const fileRef = React.useRef(null);
+	const kindRef = React.useRef("");
+	const [open, setOpen] = React.useState(false);
+	const hasActionableItem = items.some((item) => item.onSelect !== void 0 || onAttach !== void 0);
+	const isDisabled = disabled || disabledProp || !hasActionableItem;
+	const handleSelect = (item) => {
+		setOpen(false);
+		if (item.onSelect) {
+			item.onSelect();
+			return;
+		}
+		const input = fileRef.current;
+		if (!input || onAttach === void 0) return;
+		kindRef.current = item.kind;
+		input.accept = item.accept ?? "*/*";
+		input.value = "";
+		input.click();
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		ref: fileRef,
+		className: "hidden",
+		disabled: isDisabled,
+		multiple: true,
+		onChange: (event) => {
+			const files = Array.from(event.target.files ?? []);
+			if (files.length > 0) onAttach?.(files, kindRef.current);
+		},
+		tabIndex: -1,
+		type: "file"
+	}), /* @__PURE__ */ jsxs(DropdownMenu, {
+		onOpenChange: (nextOpen) => setOpen(isDisabled ? false : nextOpen),
+		open: isDisabled ? false : open,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			disabled: isDisabled,
+			render: /* @__PURE__ */ jsx(Button, {
+				...props,
+				"aria-label": ariaLabel,
+				"data-slot": "chat-input-attach",
+				className: cn("shrink-0 text-fg-secondary data-popup-open:bg-action-tertiary [&_svg:not([class*='size-'])]:size-6", className),
+				disabled: isDisabled,
+				size,
+				type: "button",
+				variant
+			}),
+			children: children ?? /* @__PURE__ */ jsx(Plus, {})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "start",
+			className: cn("w-auto min-w-28 rounded-lg bg-surface-overlay shadow-2", contentClassName),
+			side: "top",
+			sideOffset: 8,
+			children: items.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "gap-2.5 px-2.5 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-6",
+				onClick: () => handleSelect(item),
+				children: [item.icon, item.label]
+			}, item.kind))
+		})]
+	})] });
+}
+/**
+* The single-line message field.
+*
+* Enter sends. The `isComposing` guard stops Enter from sending while an IME
+* candidate is being confirmed.
+*/
+function ChatInputField({ className, children, disabled: disabledProp = false, onKeyDown, type = "text", ...props }) {
+	const { value, setValue, disabled, canSend, submit } = useChatInputContext();
+	const isDisabled = disabled || disabledProp || !canSend;
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		"data-slot": "chat-input-field",
+		className: "h-11 rounded-[22px] border-[1.5px] border-transparent bg-surface-raised focus-within:border-line-focus focus-within:shadow-[0_0_0_3px_var(--color-line-focus)] focus-within:inset-ring-0",
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			...props,
+			className: cn("px-4 text-gdt-sm", className),
+			disabled: isDisabled,
+			onChange: (event) => setValue(event.target.value),
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+				event.preventDefault();
+				submit();
+			},
+			type,
+			value
+		}), children]
+	});
+}
+/**
+* An accessible button inside the field — emoji, mic, whatever. The caller
+* owns the action, while the component owns the input-group placement.
+*/
+function ChatInputAction({ align = "inline-start", addonClassName, className, disabled: disabledProp = false, size = "icon-xs", ...props }) {
+	const { disabled, canSend } = useChatInputContext();
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
+		"data-slot": "chat-input-action",
+		align,
+		className: cn("p-0 has-[>button]:m-0", align === "inline-start" ? "pl-4" : "pr-4", addonClassName),
+		children: /* @__PURE__ */ jsx(InputGroupButton, {
+			...props,
+			className: cn("text-fg-secondary [&_svg:not([class*='size-'])]:size-6", className),
+			disabled: disabled || disabledProp || !canSend,
+			size,
+			type: "button"
+		})
+	});
+}
+/** Submit button. Disabled while empty — there is nothing to send. */
+function ChatInputSend({ className, disabled: disabledProp = false, "aria-label": ariaLabel = "Send message", size = "icon", variant = "primary", ...props }) {
+	const { value, disabled, canSend } = useChatInputContext();
+	const unavailable = disabled || disabledProp || !canSend;
+	const empty = value.trim().length === 0;
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		"aria-label": ariaLabel,
+		"data-slot": "chat-input-send",
+		"data-empty": empty && !unavailable ? true : void 0,
+		className: cn("size-11 shrink-0 rounded-full disabled:bg-action-tertiary disabled:text-fg-caption-placeholder disabled:opacity-100 [&_svg:not([class*='size-'])]:size-5.5", className),
+		disabled: unavailable || empty,
+		size,
+		type: "submit",
+		variant,
+		children: /* @__PURE__ */ jsx(Send, {})
+	});
+}
+//#endregion
+export { Chat, ChatBody, ChatBodyBar, ChatDateDivider, ChatDateSection, ChatFooter, ChatHeader, ChatHeaderAction, ChatHeaderActions, ChatHeaderDescription, ChatHeaderIdentity, ChatHeaderText, ChatHeaderTitle, ChatInput, ChatInputAction, ChatInputAttach, ChatInputField, ChatInputSend, defaultChatInputAttachItems, useChatBody };

package/dist/checkbox.js

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/checkbox.tsx
-const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color] 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 data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
+const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas 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 data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand 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 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
 	sm: "size-4 [--checkbox-icon-size:0.625rem]",
 	md: "size-5 [--checkbox-icon-size:0.75rem]",
 	lg: "size-6 [--checkbox-icon-size:0.875rem]"

package/dist/combobox.d.ts

@@ -1,6 +1,7 @@
 import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
 import * as React from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react";
+import { Virtualizer } from "@tanstack/react-virtual";
 //#region src/combobox.d.ts
 type ComboboxSize = ComponentSize;
 declare function Combobox<Value, Multiple extends boolean | undefined = false>({ multiple, children, size, ...props }: Combobox$1.Root.Props<Value, Multiple> & {
@@ -26,5 +27,51 @@ declare function ComboboxChip({ className, children, showRemove, ...props }: Com
 }): React.JSX.Element;
 declare function ComboboxChipsInput({ className, ...props }: Combobox$1.Input.Props): React.JSX.Element;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+type ComboboxVirtualizer = Virtualizer<HTMLDivElement, Element>;
+type ComboboxHighlightDetails = {
+  reason: "keyboard" | "pointer" | "none";
+  index: number;
+};
+/**
+ * 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.
+ */
+declare function useComboboxVirtualizer(): {
+  virtualizerRef: React.RefObject<ComboboxVirtualizer | null>;
+  onItemHighlighted: (item: unknown, { reason, index }: ComboboxHighlightDetails) => void;
+};
+type ComboboxVirtualItemProps = {
+  index: number;
+  "data-index": number;
+  "aria-setsize": number;
+  "aria-posinset": number;
+  style: React.CSSProperties;
+};
+declare function ComboboxVirtualizedList<Item>({ virtualizerRef, estimateSize, overscan, paddingStart, paddingEnd, maxHeight, className, children }: {
+  /** Ref returned by {@link useComboboxVirtualizer}. */
+  virtualizerRef: React.RefObject<ComboboxVirtualizer | null>;
+  /**
+   * Fixed row height in px (or a per-index function). Rows render at this
+   * exact height, so match it to the item size variant (roughly sm: 32,
+   * md: 40, lg: 44). Defaults to 40.
+   */
+  estimateSize?: number | ((index: number) => number);
+  overscan?: number;
+  paddingStart?: number;
+  paddingEnd?: number;
+  /**
+   * Fixed max height of the scroll viewport (px number or CSS length).
+   * Must be a stable value — do NOT wire this to `--available-height` or any
+   * value the popup positioner writes, or react-virtual's resize observer and
+   * the positioner will feed back into each other and freeze the page on open.
+   * Defaults to `"22rem"`.
+   */
+  maxHeight?: number | string;
+  className?: string;
+  /** Render a `ComboboxItem`, spreading the provided props onto it. */
+  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, useComboboxAnchor };
+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 };