@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/combobox-select/combobox-select.mjs

@@ -0,0 +1,473 @@
+import { useTheme } from "../../lib/theme/use-theme.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
+import { usePhoneMedia } from "../../lib/phone-media.mjs";
+import { roomBelowIsShort } from "./combobox-select.list-side.mjs";
+import { isOptionGroup, normalizeOption, optionKey } from "./combobox-select.options.mjs";
+import { Check, ChevronDown, LoaderCircle, Plus, X } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox-select/combobox-select.tsx
+const defaultMessages = {
+	clear: "Clear selection",
+	toggle: "Toggle options",
+	selected: "Selected options",
+	chipDescription: "Press Backspace or Delete to remove",
+	inputDescription: "From the start of the input, press Left Arrow to focus selected options",
+	remove: (label) => `Remove ${label}`
+};
+const defaultRenderCreateLabel = (query) => `Create “${query}”`;
+/** An option's or a chip's text, with its whole value as the title when it is cut off. */
+function OverflowText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref: useOverflowTitle(),
+		className: "r-combobox-select__text",
+		children
+	});
+}
+function recordLabel(record, renderLabel) {
+	return record.option === void 0 ? record.label : renderLabel?.(record.option) ?? record.label;
+}
+function renderOptionContent({ record, selected, renderLabel, renderOption, renderCreateLabel }) {
+	if (record.createQuery !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": true }), /* @__PURE__ */ jsx(OverflowText, { children: renderCreateLabel(record.label) })] });
+	const content = record.option === void 0 ? record.label : renderOption?.(record.option, { selected }) ?? recordLabel(record, renderLabel);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		className: "r-combobox-select__indicator",
+		children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true })
+	})] });
+}
+function renderSelectedChip({ record, index, tagLimit, strings, renderLabel, renderTag }) {
+	const label = recordLabel(record, renderLabel);
+	const content = record.option === void 0 ? record.label : renderTag?.(record.option) ?? label;
+	const overflow = index >= tagLimit;
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		className: "r-combobox-select__chip",
+		"data-overflow": overflow || void 0,
+		"aria-label": record.label,
+		"aria-description": strings.chipDescription,
+		children: [/* @__PURE__ */ jsx(OverflowText, { children: content }), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+			className: "r-combobox-select__remove",
+			"aria-label": strings.remove(record.label),
+			children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+		})]
+	}, optionKey(record.value));
+}
+/**
+* On a phone the list always opens below the field, between the field and the
+* keyboard, as a native autocomplete does, and never flips: which side has more
+* room depends on whether the keyboard happens to be up, so choosing a side made
+* the same field open up one time and down the next.
+*/
+const PHONE_LIST_COLLISION = {
+	side: "none",
+	align: "shift",
+	fallbackAxisSide: "none"
+};
+function ComboboxSelectFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+	return /* @__PURE__ */ jsx(Combobox.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+/**
+* Keeps room for the list below the field on a phone: when fewer than three
+* rows fit between the field and the bottom of the visual viewport (the
+* keyboard's top edge while it is up), scrolls the field up to the top of
+* what is visible instead of flipping the list above it.
+*/
+function keepRoomBelow(field) {
+	const view = field?.ownerDocument.defaultView;
+	if (!field || !view) return;
+	const visual = view.visualViewport;
+	const viewport = visual ? {
+		top: visual.offsetTop,
+		height: visual.height
+	} : {
+		top: 0,
+		height: view.innerHeight
+	};
+	if (roomBelowIsShort(field.getBoundingClientRect(), viewport)) {
+		if (!field.style.scrollMarginTop) field.style.scrollMarginTop = "2.5rem";
+		field.scrollIntoView({
+			block: "start",
+			inline: "nearest",
+			behavior: "instant"
+		});
+	}
+}
+/** Options-driven composition. The stable compound Combobox API stays unchanged. */
+function isItemEqualToValue(a, b) {
+	return a.createQuery === b.createQuery && a.value === b.value;
+}
+function itemToStringLabel(record) {
+	return record.label;
+}
+function itemToStringValue(record) {
+	return String(record.value);
+}
+function ComboboxSelect({ options, multiple, value, defaultValue, onValueChange, labelField = "label", valueField = "value", disabledField = "disabled", fallbackOption, filterable = true, filter, remote = false, onSearch, loading = false, create = false, creatable, onCreate, clearable = false, showArrow = true, clearFilterAfterSelect = true, onClear, maxTagCount, size = "md", status, placeholder = "Select an option", renderLabel, renderOption, renderTag, renderCreateLabel = defaultRenderCreateLabel, emptyContent = "No options found", loadingContent = "Loading…", messages, listMaxHeight, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight = true, onOpenChange, ...rootProps }) {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const { resolvedMode } = useTheme();
+	const scopedPortalProps = useThemeScopeProps(portalProps ?? {});
+	const strings = {
+		...defaultMessages,
+		...messages
+	};
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? (multiple ? [] : null));
+	const selectedValue = value === void 0 ? uncontrolledValue : value;
+	const selectedKeys = useMemo(() => Array.isArray(selectedValue) ? selectedValue : selectedValue == null ? [] : [selectedValue], [selectedValue]);
+	const [query, setQuery] = useState(String(defaultInputValue ?? ""));
+	const [createdOptions, setCreatedOptions] = useState([]);
+	const collator = useMemo(() => new Intl.Collator(void 0, {
+		sensitivity: "base",
+		usage: "search"
+	}), []);
+	const normalized = useMemo(() => {
+		const normalize = (option) => normalizeOption(option, labelField, valueField, disabledField);
+		const groups = [];
+		options.forEach((option, index) => {
+			if (isOptionGroup(option)) groups.push({
+				key: `group:${optionKey(option.key)}`,
+				label: option.label,
+				items: option.children.map(normalize)
+			});
+			else groups.push({
+				key: `option:${index}`,
+				items: [normalize(option)]
+			});
+		});
+		const records = new Map(groups.flatMap((group) => group.items.map((record) => [record.value, record])));
+		const created = createdOptions.map(normalize).filter((record) => !records.has(record.value));
+		created.forEach((record) => records.set(record.value, record));
+		if (created.length) groups.push({
+			key: "created",
+			items: created
+		});
+		return {
+			groups,
+			records
+		};
+	}, [
+		options,
+		createdOptions,
+		labelField,
+		valueField,
+		disabledField
+	]);
+	const [retained, setRetained] = useState(() => /* @__PURE__ */ new Map());
+	const selected = useMemo(() => {
+		return selectedKeys.map((key) => normalized.records.get(key) ?? retained.get(key) ?? (fallbackOption ? normalizeOption(fallbackOption(key), labelField, valueField, disabledField) : {
+			value: key,
+			label: String(key),
+			disabled: false
+		}));
+	}, [
+		selectedKeys,
+		normalized,
+		retained,
+		fallbackOption,
+		labelField,
+		valueField,
+		disabledField
+	]);
+	if (retained.size !== selected.length || !selected.every((record) => retained.get(record.value) === record)) setRetained(new Map(selected.map((record) => [record.value, record])));
+	const search = String(inputValue ?? query).trim();
+	const canCreate = (create || creatable) && filterable && !loading && search !== "" && ![...normalized.records.values(), ...selected].some((record) => record.label.trim().toLocaleLowerCase() === search.toLocaleLowerCase());
+	const items = useMemo(() => {
+		if (!canCreate) return normalized.groups;
+		const candidate = {
+			value: search,
+			label: search,
+			disabled: false,
+			createQuery: search
+		};
+		return [...normalized.groups, {
+			key: "create",
+			items: [candidate]
+		}];
+	}, [
+		canCreate,
+		normalized.groups,
+		search
+	]);
+	const css = `r-combobox-select r-combobox-select--${size}${resolvedMode === "dark" ? " r-combobox-select--dark" : ""}`;
+	const tagLimit = maxTagCount === void 0 ? Infinity : Math.max(0, Math.floor(maxTagCount));
+	const inputClassName = ["r-combobox-select__input", typeof inputProps?.className === "string" ? inputProps.className : null].filter(Boolean).join(" ");
+	const phone = usePhoneMedia();
+	const controlClassName = [
+		css,
+		"r-combobox-select__control has-focus-visible:shadow-focus",
+		phone ? "r-combobox-select__control--phone" : null,
+		className
+	].filter(Boolean).join(" ");
+	const positionerClassName = ["r-combobox-select__positioner", typeof positionerProps?.className === "string" ? positionerProps.className : null].filter(Boolean).join(" ");
+	const popupClassName = [
+		css,
+		"r-combobox-select__popup",
+		phone ? "r-combobox-select__popup--anchored" : null,
+		typeof popupProps?.className === "string" ? popupProps.className : null
+	].filter(Boolean).join(" ");
+	const inputRef = ref ?? inputProps?.ref;
+	const inputLabel = ariaLabel ?? inputProps?.["aria-label"];
+	const inputLabelledBy = ariaLabelledBy ?? inputProps?.["aria-labelledby"];
+	const inputDescribedBy = ariaDescribedBy ?? inputProps?.["aria-describedby"];
+	const inputInvalid = ariaInvalid ?? (status === "error" ? true : inputProps?.["aria-invalid"]);
+	const inputDescription = multiple && selected.length ? strings.inputDescription : inputProps?.["aria-description"];
+	const inputPlaceholder = multiple && selected.length ? "" : placeholder;
+	const inputReadOnly = readOnly || !filterable;
+	const controlValue = multiple ? selected : selected[0] ?? null;
+	const handleValueChange = useCallback((next, details) => {
+		const nextRecords = next === null ? [] : Array.isArray(next) ? next : [next];
+		const createRecord = nextRecords.find((record) => record.createQuery !== void 0);
+		let newOption;
+		let resolved = nextRecords;
+		if (createRecord) {
+			const created = onCreate ? onCreate(createRecord.label) : {
+				[labelField]: createRecord.label,
+				[valueField]: createRecord.label
+			};
+			if (created === null) {
+				details.cancel();
+				return;
+			}
+			const record = normalizeOption(created, labelField, valueField, disabledField);
+			if (record.disabled) {
+				details.cancel();
+				return;
+			}
+			newOption = created;
+			const existing = normalized.records.get(record.value) ?? retained.get(record.value);
+			resolved = nextRecords.map((item) => item === createRecord ? existing ?? record : item);
+			resolved = [...new Map(resolved.map((item) => [item.value, item])).values()];
+		}
+		const nextValue = multiple ? resolved.map((record) => record.value) : resolved[0]?.value ?? null;
+		const nextOptions = multiple ? resolved.map((record) => record.option) : resolved[0]?.option ?? null;
+		onValueChange?.(nextValue, nextOptions, details);
+		if (details.isCanceled) return;
+		if (newOption !== void 0) setCreatedOptions((previous) => [...previous, newOption]);
+		setRetained(new Map(resolved.map((record) => [record.value, record])));
+		if (value === void 0) setUncontrolledValue(nextValue);
+		if (details.reason === "clear-press") onClear?.();
+	}, [
+		multiple,
+		onCreate,
+		labelField,
+		valueField,
+		disabledField,
+		normalized.records,
+		retained,
+		onValueChange,
+		value,
+		onClear
+	]);
+	const handleInputValueChange = useCallback((next, details) => {
+		onInputValueChange?.(next, details);
+		if (details.isCanceled) return;
+		const shouldKeepQuery = details.reason === "input-change" || details.reason === "item-press" && !clearFilterAfterSelect;
+		setQuery(shouldKeepQuery ? next : "");
+		if (details.reason === "input-change" || details.reason === "clear-press") onSearch?.(next);
+	}, [
+		onInputValueChange,
+		clearFilterAfterSelect,
+		onSearch
+	]);
+	const filterOptions = useCallback((record, pattern) => {
+		if (record.createQuery !== void 0) return true;
+		if (remote || !filterable || filter === false) return true;
+		return record.option !== void 0 && typeof filter === "function" ? filter(pattern, record.option) : collator.compare(record.label.slice(0, pattern.length), pattern) === 0 || record.label.toLocaleLowerCase().includes(pattern.toLocaleLowerCase());
+	}, [
+		remote,
+		filterable,
+		filter,
+		collator
+	]);
+	const selectedChips = selected.map((record, index) => renderSelectedChip({
+		record,
+		index,
+		tagLimit,
+		strings,
+		renderLabel,
+		renderTag
+	}));
+	const overflowCount = selected.length > tagLimit ? selected.length - tagLimit : 0;
+	const overflowTitle = selected.slice(tagLimit).map((record) => record.label).join(", ");
+	const overflow = overflowCount ? /* @__PURE__ */ jsxs("span", {
+		className: "r-combobox-select__overflow",
+		title: overflowTitle,
+		children: ["+", overflowCount]
+	}) : null;
+	function renderRecord(record) {
+		const itemKey = record.createQuery !== void 0 ? "create" : optionKey(record.value);
+		const content = renderOptionContent({
+			record,
+			selected: selected.some((item) => item.value === record.value),
+			renderLabel,
+			renderOption,
+			renderCreateLabel
+		});
+		return /* @__PURE__ */ jsx(Combobox.Item, {
+			value: record,
+			disabled: record.disabled || loading,
+			className: "r-combobox-select__option",
+			children: content
+		}, itemKey);
+	}
+	function renderGroup(group) {
+		const groupLabel = group.label == null ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+			className: "r-combobox-select__group-label",
+			children: group.label
+		});
+		return /* @__PURE__ */ jsxs(Combobox.Group, {
+			items: group.items,
+			children: [groupLabel, /* @__PURE__ */ jsx(Combobox.Collection, { children: renderRecord })]
+		}, group.key);
+	}
+	const input = /* @__PURE__ */ jsx(Combobox.Input, {
+		...inputProps,
+		ref: inputRef,
+		id,
+		"data-slot": "combobox-select-input",
+		className: inputClassName,
+		"aria-label": inputLabel,
+		"aria-labelledby": inputLabelledBy,
+		"aria-describedby": inputDescribedBy,
+		"aria-invalid": inputInvalid,
+		"aria-description": inputDescription,
+		placeholder: inputPlaceholder,
+		readOnly: inputReadOnly
+	});
+	const controlContent = multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
+		className: "r-combobox-select__chips",
+		"aria-label": strings.selected,
+		children: [
+			selectedChips,
+			overflow,
+			input
+		]
+	}) : input;
+	const loadingMessage = loading ? /* @__PURE__ */ jsx("div", {
+		className: "r-combobox-select__message",
+		children: loadingContent
+	}) : null;
+	const emptyMessage = !loading ? /* @__PURE__ */ jsx("div", {
+		className: "r-combobox-select__message",
+		children: emptyContent
+	}) : null;
+	const loadingIndicator = loading ? /* @__PURE__ */ jsx(LoaderCircle, {
+		className: "r-combobox-select__spinner",
+		"aria-hidden": true
+	}) : null;
+	const clearAction = clearable ? /* @__PURE__ */ jsx(Combobox.Clear, {
+		className: "r-combobox-select__action",
+		"aria-label": strings.clear,
+		children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+	}) : null;
+	const triggerAction = showArrow ? /* @__PURE__ */ jsx(Combobox.Trigger, {
+		className: "r-combobox-select__action",
+		"aria-label": strings.toggle,
+		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
+	}) : null;
+	const actions = /* @__PURE__ */ jsxs("span", {
+		className: "r-combobox-select__actions",
+		children: [
+			loadingIndicator,
+			clearAction,
+			triggerAction
+		]
+	});
+	const valueChange = handleValueChange;
+	const listHeight = typeof listMaxHeight === "number" ? `${listMaxHeight}px` : listMaxHeight;
+	const fieldRef = useRef(null);
+	const [phoneOpen, setPhoneOpen] = useState(false);
+	const handleOpenChange = useCallback((next, details) => {
+		onOpenChange?.(next, details);
+		if (phone && !details.isCanceled) setPhoneOpen(next);
+	}, [onOpenChange, phone]);
+	useEffect(() => {
+		if (!phone || !phoneOpen) return;
+		const field = fieldRef.current;
+		const visual = field?.ownerDocument.defaultView?.visualViewport;
+		let frame = 0;
+		const check = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => keepRoomBelow(field));
+		};
+		check();
+		visual?.addEventListener("resize", check);
+		return () => {
+			cancelAnimationFrame(frame);
+			visual?.removeEventListener("resize", check);
+		};
+	}, [phone, phoneOpen]);
+	const popupPropsStyle = popupProps?.style;
+	const popupStyle = useMemo(() => {
+		if (listHeight === void 0) return popupPropsStyle;
+		return (state) => ({
+			...typeof popupPropsStyle === "function" ? popupPropsStyle(state) : popupPropsStyle,
+			"--combobox-select-list-max-height": listHeight
+		});
+	}, [listHeight, popupPropsStyle]);
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		...rootProps,
+		onOpenChange: handleOpenChange,
+		id,
+		multiple,
+		disabled,
+		readOnly,
+		items,
+		value: controlValue,
+		onValueChange: valueChange,
+		inputValue,
+		defaultInputValue,
+		onInputValueChange: handleInputValueChange,
+		filter: filterOptions,
+		itemToStringLabel,
+		itemToStringValue,
+		isItemEqualToValue,
+		autoHighlight,
+		children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
+			ref: fieldRef,
+			"data-slot": "combobox-select",
+			"data-status": status,
+			className: controlClassName,
+			style,
+			children: [controlContent, actions]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, {
+			...scopedPortalProps,
+			children: /* @__PURE__ */ jsx(ComboboxSelectFramePositioner, {
+				sideOffset: 4,
+				align: "start",
+				...phone ? {
+					side: "bottom",
+					collisionAvoidance: PHONE_LIST_COLLISION
+				} : null,
+				...positionerProps,
+				container: portalProps?.container,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+					initialFocus: false,
+					finalFocus: false,
+					...popupProps,
+					style: popupStyle,
+					"data-slot": "combobox-select-popup",
+					className: popupClassName,
+					children: [
+						/* @__PURE__ */ jsx(Combobox.Status, { children: loadingMessage }),
+						/* @__PURE__ */ jsx(Combobox.List, {
+							className: "r-combobox-select__list",
+							"aria-busy": loading,
+							children: renderGroup
+						}),
+						/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyMessage })
+					]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { ComboboxSelect };

package/dist/components/combobox-select/combobox-select.options.mjs

@@ -0,0 +1,21 @@
+//#region src/components/combobox-select/combobox-select.options.ts
+function isOptionGroup(option) {
+	return typeof option === "object" && option !== null && "type" in option && option.type === "group" && "children" in option && Array.isArray(option.children);
+}
+function normalizeOption(option, labelField, valueField, disabledField) {
+	const fields = option;
+	const value = fields[valueField];
+	const label = fields[labelField];
+	if (typeof value !== "string" && typeof value !== "number") throw new Error("ComboboxSelect options must have a string or number value.");
+	return {
+		value,
+		label: typeof label === "string" || typeof label === "number" ? String(label) : String(value),
+		disabled: Boolean(fields[disabledField]),
+		option
+	};
+}
+function optionKey(value) {
+	return `${typeof value}:${value}`;
+}
+//#endregion
+export { isOptionGroup, normalizeOption, optionKey };

package/dist/components/combobox-select/combobox-select.types.d.mts

@@ -0,0 +1,83 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox-select/combobox-select.types.d.ts
+export type ComboboxSelectValue = string | number;
+export interface ComboboxSelectOption {
+  value: ComboboxSelectValue;
+  label: string;
+  disabled?: boolean;
+}
+export interface ComboboxSelectGroup<Option = ComboboxSelectOption> {
+  type: "group";
+  key: string | number;
+  label: ReactNode;
+  children: readonly Option[];
+}
+export type ComboboxSelectSelection<Multiple extends boolean | undefined> = Multiple extends true ? ComboboxSelectValue[] : ComboboxSelectValue | null;
+export interface ComboboxSelectMessages {
+  clear: string;
+  toggle: string;
+  selected: string;
+  chipDescription: string;
+  inputDescription: string;
+  remove: (label: string) => string;
+}
+type RootProps = Combobox.Root.Props<unknown, boolean>;
+export type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
+  options: readonly (Option | ComboboxSelectGroup<Option>)[];
+  multiple?: Multiple;
+  value?: ComboboxSelectSelection<Multiple>;
+  defaultValue?: ComboboxSelectSelection<Multiple>;
+  onValueChange?: (value: ComboboxSelectSelection<Multiple>, options: Multiple extends true ? (Option | undefined)[] : Option | undefined | null, details: Combobox.Root.ChangeEventDetails) => void;
+  labelField?: keyof Option;
+  valueField?: keyof Option;
+  disabledField?: keyof Option;
+  /** Supplies labels for values that have not been loaded yet. */
+  fallbackOption?: (value: ComboboxSelectValue) => Option;
+  filterable?: boolean;
+  filter?: false | ((query: string, option: Option) => boolean);
+  /** Display the provided results without local filtering. Requests belong to the caller. */
+  remote?: boolean;
+  onSearch?: (query: string) => void;
+  loading?: boolean;
+  create?: boolean;
+  /** Alias for create, useful when matching Select libraries that call this mode creatable. */
+  creatable?: boolean;
+  /** Called only when the creation row is selected. Return null to reject creation. */
+  onCreate?: (query: string) => Option | null;
+  clearable?: boolean;
+  showArrow?: boolean;
+  clearFilterAfterSelect?: boolean;
+  onClear?: () => void;
+  /** Collapse chips when the control is unfocused; all remain reachable when focused. */
+  maxTagCount?: number;
+  size?: "sm" | "md" | "lg";
+  status?: "error" | "warning";
+  placeholder?: string;
+  renderLabel?: (option: Option) => ReactNode;
+  /** Customizes option content while preserving the Base UI option element. */
+  renderOption?: (option: Option, info: {
+    selected: boolean;
+  }) => ReactNode;
+  /** Customizes chip content while preserving keyboard navigation and removal. */
+  renderTag?: (option: Option) => ReactNode;
+  renderCreateLabel?: (query: string) => ReactNode;
+  emptyContent?: ReactNode;
+  loadingContent?: ReactNode;
+  messages?: Partial<ComboboxSelectMessages>;
+  /**
+   * The tallest the list gets before it scrolls, its 6px padding above and below
+   * included: a CSS length, or a number of pixels. On a phone the list also gets
+   * shorter to fit the room on its side, and opens above when that side has more
+   * room and below is short of this height.
+   * @default "16rem"
+   */
+  listMaxHeight?: number | string;
+  inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
+  portalProps?: Combobox.Portal.Props;
+  positionerProps?: Omit<Combobox.Positioner.Props, "children">;
+  popupProps?: Omit<Combobox.Popup.Props, "children">;
+  className?: string;
+  style?: CSSProperties;
+};
+//#endregion

package/dist/components/combobox-select/index.d.mts

@@ -0,0 +1,3 @@
+import { ComboboxSelectGroup, ComboboxSelectMessages, ComboboxSelectOption, ComboboxSelectProps, ComboboxSelectSelection, ComboboxSelectValue } from "./combobox-select.types.mjs";
+import { ComboboxSelect } from "./combobox-select.mjs";
+export { ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue };

package/dist/components/comment/comment-card.d.mts

@@ -0,0 +1,40 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/comment/comment-card.d.ts
+export type CommentCardProps = useRender.ComponentProps<"div"> & {
+  /** The discussion people are reading or replying to: an ink border, lifted. */
+  active?: boolean;
+};
+/**
+ * The card of one discussion: its comments, a line such as "2 replies", and
+ * the reply box when it is open. A `div`; which parts it holds (collapsed or
+ * open) is the caller's choice. To open it with a click, add
+ * `CommentCardTrigger`.
+ */
+export declare function CommentCard({ className, render, active, ...props }: CommentCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentCardTriggerProps = useRender.ComponentProps<"button">;
+/**
+ * A button laid over the whole card, for a collapsed card that opens when it
+ * is clicked or chosen with the keyboard. It has no text of its own: give it
+ * an `aria-label` ("Comment from Martin").
+ */
+export declare function CommentCardTrigger({ className, render, ...props }: CommentCardTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentCardMetaProps = useRender.ComponentProps<"div">;
+/**
+ * A short line about the discussion, in the caller's words: how many replies
+ * it has, that it is about the whole document, or that the passage it was on
+ * can no longer be found. When choosing it does something (makes this the
+ * discussion being read), render it as a button,
+ * `render={<button type="button" />}`: it then underlines on hover, as
+ * clickable text, and takes the focus ring.
+ */
+export declare function CommentCardMeta({ className, render, ...props }: CommentCardMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CommentCardQuoteProps = useRender.ComponentProps<"span">;
+/**
+ * The passage the discussion is about, in the caller's words (usually the
+ * quoted text). Hidden on screen, where the card's place beside the
+ * highlighted passage says it; give it an `id` and point the
+ * `aria-describedby` of `CommentCardTrigger` or `CommentMarker` at it, so a
+ * screen reader says which passage a card is about.
+ */
+export declare function CommentCardQuote({ className, render, ...props }: CommentCardQuoteProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion