@api7/ui-components 0.7.0 → 0.8.0

package/dist/components/code/code.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+export interface CodeProps extends Omit<ComponentProps<'code'>, 'children'> {
+  children: string;
+  /** Show a copy button beside the inline code. Defaults to false. */
+  copyable?: boolean;
+  /** Text to copy instead of the displayed code, including an empty string. */
+  copyValue?: string;
+}
+export declare function Code({ children, copyable, copyValue, className, ...props }: CodeProps): import("react").JSX.Element;

package/dist/components/code/code.js

@@ -0,0 +1,20 @@
+"use client";
+import { CopyButton } from "./copy-button.js";
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/code/code.tsx
+function Code({ children, copyable = false, copyValue, className, ...props }) {
+	return /* @__PURE__ */ jsxs("code", {
+		className: cn("inline-flex max-w-full items-center gap-1 rounded-sm bg-muted px-1 py-0.5 align-baseline font-mono text-xs text-foreground", className),
+		...props,
+		"data-slot": "code",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 whitespace-pre-wrap wrap-anywhere",
+			children
+		}), copyable && /* @__PURE__ */ jsx(CopyButton, {
+			value: copyValue ?? children,
+			className: "size-5"
+		})]
+	});
+}
+export { Code };

package/dist/components/code/copy-button.js

@@ -0,0 +1,42 @@
+"use client";
+import { Button } from "../button/button.js";
+import { useMessages } from "../../config/config-provider.js";
+import { useClipboard } from "../../hooks/use-clipboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, TriangleAlert } from "lucide-react";
+// src/components/code/copy-button.tsx
+function CopyButtonContent({ value, className }) {
+	const { copy, status } = useClipboard();
+	const { code: messages } = useMessages();
+	const label = status === "copied" ? messages.copied : status === "error" ? messages.copyError : messages.copy;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex shrink-0 align-middle",
+		"data-slot": "code-copy",
+		children: [/* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			className,
+			"aria-label": label,
+			title: label,
+			"aria-busy": status === "copying" || void 0,
+			onClick: () => {
+				copy(value);
+			},
+			"data-status": status,
+			children: /* @__PURE__ */ jsx(status === "copied" ? Check : status === "error" ? TriangleAlert : Copy, {
+				"aria-hidden": "true",
+				className: status === "error" ? "text-destructive-text" : void 0
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			role: "status",
+			"aria-live": "polite",
+			children: status === "copied" || status === "error" ? label : ""
+		})]
+	});
+}
+function CopyButton(props) {
+	return /* @__PURE__ */ jsx(CopyButtonContent, { ...props }, props.value);
+}
+export { CopyButton };

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps } from "react";
+export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'children'> {
+  code: string;
+  /** Syntax language or alias. Unknown languages render as plain text. */
+  language?: string;
+  /** Show a copy button. Defaults to true. */
+  copyable?: boolean;
+  /** Text to copy instead of the displayed code, including an empty string. */
+  copyValue?: string;
+  showLineNumbers?: boolean;
+  /** Wrap long lines instead of scrolling horizontally. */
+  wrapLines?: boolean;
+  /** Props for the scrollable pre element, including its accessible name and maximum height. */
+  preProps?: ComponentProps<'pre'>;
+}
+export declare function CodeBlock({ code, language, copyable, copyValue, showLineNumbers, wrapLines, preProps, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/components/code-block/code-block.js

@@ -0,0 +1,45 @@
+"use client";
+import { highlightLines, tokenClassName } from "./highlight.js";
+import { CopyButton } from "../code/copy-button.js";
+import { cn } from "../../lib/cn.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/code-block/code-block.tsx
+function CodeBlock({ code, language = "text", copyable = true, copyValue, showLineNumbers = false, wrapLines = false, preProps, className, ...props }) {
+	const lines = useMemo(() => highlightLines(code, language), [code, language]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 max-w-full items-start overflow-hidden rounded-lg bg-muted text-foreground", className),
+		...props,
+		"data-slot": "code-block",
+		children: [/* @__PURE__ */ jsx("pre", {
+			tabIndex: 0,
+			...preProps,
+			className: cn("m-0 min-w-0 flex-1 overflow-auto p-3 font-mono text-sm leading-6 outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-inset", preProps?.className),
+			"data-slot": "code-block-pre",
+			children: /* @__PURE__ */ jsx("code", {
+				className: cn("block", wrapLines ? "whitespace-pre-wrap wrap-anywhere" : "w-max min-w-full whitespace-pre"),
+				children: lines.map((line, index) => /* @__PURE__ */ jsxs("span", {
+					className: "flex min-h-6",
+					"data-slot": "code-block-line",
+					children: [showLineNumbers && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "me-4 shrink-0 text-end text-muted-foreground select-none",
+						style: { width: `${String(lines.length).length}ch` },
+						"data-slot": "code-block-line-number",
+						children: index + 1
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1",
+						children: line.map((token, tokenIndex) => /* @__PURE__ */ jsx("span", {
+							className: tokenClassName(token.types),
+							children: token.content
+						}, tokenIndex))
+					})]
+				}, index))
+			})
+		}), copyable && /* @__PURE__ */ jsx(CopyButton, {
+			value: copyValue ?? code,
+			className: "m-1"
+		})]
+	});
+}
+export { CodeBlock };

package/dist/components/code-block/highlight.js

@@ -0,0 +1,67 @@
+import bash from "refractor/bash";
+import { refractor } from "refractor/core";
+import css from "refractor/css";
+import javascript from "refractor/javascript";
+import json from "refractor/json";
+import lua from "refractor/lua";
+import markup from "refractor/markup";
+import typescript from "refractor/typescript";
+import yaml from "refractor/yaml";
+// src/components/code-block/highlight.ts
+for (const syntax of [
+	bash,
+	css,
+	javascript,
+	json,
+	lua,
+	markup,
+	typescript,
+	yaml
+]) refractor.register(syntax);
+function highlightLines(code, language) {
+	const grammar = language.toLowerCase();
+	const nodes = refractor.registered(grammar) ? refractor.highlight(code, grammar).children : [{
+		type: "text",
+		value: code
+	}];
+	const lines = [[]];
+	function visit(nodes, types = []) {
+		for (const node of nodes) if (node.type === "element") visit(node.children, [...types, ...node.properties.className ?? []]);
+		else if (node.type === "text") node.value.split(/(\r\n|\r|\n)/).forEach((content, index) => {
+			if (content) lines[lines.length - 1].push({
+				content,
+				types
+			});
+			if (index % 2 === 1) lines.push([]);
+		});
+	}
+	visit(nodes);
+	return lines;
+}
+function tokenClassName(types) {
+	if (types.some((type) => [
+		"comment",
+		"prolog",
+		"doctype"
+	].includes(type))) return "text-muted-foreground";
+	if (types.some((type) => [
+		"string",
+		"char",
+		"attr-value"
+	].includes(type))) return "text-success-foreground";
+	if (types.some((type) => [
+		"keyword",
+		"boolean",
+		"number",
+		"constant",
+		"property",
+		"tag",
+		"attr-name"
+	].includes(type))) return "text-primary-text";
+	if (types.some((type) => [
+		"function",
+		"class-name",
+		"builtin"
+	].includes(type))) return "text-warning-foreground";
+}
+export { highlightLines, tokenClassName };

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible } from "@base-ui/react/collapsible";
+export type CollapsibleProps = Omit<Collapsible.Root.Props, 'className'> & {
+  className?: string;
+};
+export type CollapsibleTriggerProps = Omit<Collapsible.Trigger.Props, 'className'> & {
+  className?: string;
+};
+export type CollapsibleContentProps = Omit<Collapsible.Panel.Props, 'className'> & {
+  className?: string;
+};
+declare function Collapsible$1({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+declare function CollapsibleTrigger({ className, children, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
+declare function CollapsibleContent({ className, ...props }: CollapsibleContentProps): import("react").JSX.Element;
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/collapsible/collapsible.tsx
+function Collapsible$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		className: cn("min-w-0", className),
+		...props,
+		"data-slot": "collapsible"
+	});
+}
+function CollapsibleTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		className: cn("inline-flex max-w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md text-start text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-panel-open:[&>[data-slot=collapsible-icon]]:rotate-180", className),
+		...props,
+		"data-slot": "collapsible-trigger",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 [overflow-wrap:anywhere]",
+			children
+		}), /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": "true",
+			"data-slot": "collapsible-icon",
+			className: "size-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none"
+		})]
+	});
+}
+function CollapsibleContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		className: cn("h-[var(--collapsible-panel-height)] overflow-hidden text-sm transition-[height,opacity] duration-200 ease-out data-ending-style:h-0 data-ending-style:opacity-0 data-starting-style:h-0 data-starting-style:opacity-0 motion-reduce:transition-none", className),
+		...props,
+		"data-slot": "collapsible-content"
+	});
+}
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/combobox/combobox-loading.d.ts

@@ -0,0 +1,18 @@
+import "react";
+export interface ComboboxLoadRequest {
+  search: string;
+  /** Starts at 1 and advances after each successful page, including empty pages. */
+  page: number;
+  signal: AbortSignal;
+}
+export interface ComboboxPage<Item> {
+  items: Item[];
+  hasMore: boolean;
+}
+export interface ComboboxLoadingOptions<Item> {
+  loadItems: (request: ComboboxLoadRequest) => Promise<ComboboxPage<Item>>;
+  /** Delay before a nonempty search. An empty search loads immediately. */
+  debounceMs?: number;
+  /** Change this when the data source changes. Selection stays under the caller's control. */
+  resetKey?: unknown;
+}

package/dist/components/combobox/combobox-loading.js

@@ -0,0 +1,148 @@
+"use client";
+import { Button } from "../button/button.js";
+import { Spinner } from "../spinner/spinner.js";
+import { useMessages } from "../../config/config-provider.js";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+// src/components/combobox/combobox-loading.tsx
+const ComboboxLoadingContext = createContext(null);
+function useComboboxLoadingContext() {
+	return useContext(ComboboxLoadingContext);
+}
+function attachInputRef(ref, node) {
+	if (typeof ref === "function") {
+		const cleanup = ref(node);
+		return typeof cleanup === "function" ? cleanup : () => {
+			ref(null);
+		};
+	}
+	if (!ref) return () => {};
+	ref.current = node;
+	return () => {
+		ref.current = null;
+	};
+}
+function useComboboxInputRef(ref) {
+	const inputRef = useComboboxLoadingContext()?.inputRef;
+	return useMemo(() => {
+		if (!inputRef) return ref;
+		return (node) => {
+			const cleanupExternal = attachInputRef(ref, node);
+			const cleanupInternal = attachInputRef(inputRef, node);
+			return () => {
+				cleanupExternal();
+				cleanupInternal();
+			};
+		};
+	}, [ref, inputRef]);
+}
+function useComboboxLoading(loadItems, search, enabled, debounceMs, resetKey) {
+	const loader = useRef(loadItems);
+	useLayoutEffect(() => {
+		loader.current = loadItems;
+	}, [loadItems]);
+	const [state, setState] = useState({
+		items: [],
+		loading: true,
+		hasMore: false,
+		failed: false,
+		loadMore: () => {}
+	});
+	useEffect(() => {
+		if (!enabled) return;
+		const controller = new AbortController();
+		let items = [];
+		let page = 1;
+		let hasMore = true;
+		let loading = false;
+		async function loadMore() {
+			if (!loader.current || controller.signal.aborted || loading || !hasMore) return;
+			loading = true;
+			setState({
+				items,
+				loading: true,
+				hasMore,
+				failed: false,
+				loadMore
+			});
+			try {
+				const result = await loader.current({
+					search,
+					page,
+					signal: controller.signal
+				});
+				if (controller.signal.aborted) return;
+				items = [...items, ...result.items];
+				hasMore = result.hasMore;
+				page += 1;
+				setState({
+					items,
+					loading: false,
+					hasMore,
+					failed: false,
+					loadMore
+				});
+			} catch {
+				if (controller.signal.aborted) return;
+				setState({
+					items,
+					loading: false,
+					hasMore,
+					failed: true,
+					loadMore
+				});
+			} finally {
+				loading = false;
+			}
+		}
+		setState({
+			items,
+			loading: true,
+			hasMore: false,
+			failed: false,
+			loadMore: () => {}
+		});
+		const timeout = setTimeout(() => void loadMore(), search ? debounceMs : 0);
+		return () => {
+			clearTimeout(timeout);
+			controller.abort();
+		};
+	}, [
+		search,
+		enabled,
+		debounceMs,
+		resetKey
+	]);
+	return {
+		...state,
+		enabled,
+		loading: enabled && state.loading
+	};
+}
+function ComboboxLoadingStatus() {
+	const state = useComboboxLoadingContext();
+	const messages = useMessages();
+	if (!state) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Combobox.Status, {
+		className: "flex items-center gap-2 px-4 py-2.5 text-sm text-muted-foreground empty:p-0",
+		"data-slot": "combobox-status",
+		children: state.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, {
+			size: "sm",
+			"aria-hidden": "true"
+		}), messages.combobox.loading] }) : state.failed ? messages.combobox.error : null
+	}), state.enabled && !state.loading && (state.failed || state.hasMore) && /* @__PURE__ */ jsx("div", {
+		className: "px-4 py-2",
+		"data-slot": "combobox-pagination",
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "link",
+			onClick: () => {
+				state.inputRef.current?.focus();
+				state.loadMore();
+			},
+			children: state.failed ? messages.combobox.retry : messages.combobox.loadMore
+		})
+	})] });
+}
+export { ComboboxLoadingContext, ComboboxLoadingStatus, useComboboxInputRef, useComboboxLoading, useComboboxLoadingContext };

package/dist/components/combobox/combobox.d.ts

@@ -1,17 +1,24 @@
+import { ComboboxLoadRequest, ComboboxLoadingOptions, ComboboxPage } from "./combobox-loading.js";
 import { ReactNode } from "react";
 import { Combobox } from "@base-ui/react/combobox";
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
-export type ComboboxProps = Combobox.Root.Props<unknown, boolean>;
-declare function Combobox$1(props: ComboboxProps): import("react").JSX.Element;
+type LocalSource = {
+  loadItems?: never;
+  debounceMs?: never;
+  resetKey?: never;
+};
+type ManagedProps = 'items' | 'filteredItems' | 'filter' | 'inputValue' | 'defaultInputValue';
+export type ComboboxProps<Item = unknown, Multiple extends boolean | undefined = boolean> = (Combobox.Root.Props<Item, Multiple> & LocalSource) | (Omit<Combobox.Root.Props<Item, Multiple>, ManagedProps> & ComboboxLoadingOptions<Item> & { [K in ManagedProps]?: never; });
+declare function Combobox$1<Item, Multiple extends boolean | undefined = false>({ loadItems, debounceMs, resetKey, ...props }: ComboboxProps<Item, Multiple>): import("react").JSX.Element;
 export type ComboboxInputProps = WithClassName<Combobox.Input.Props> & {
   /** Accessible name of the clear button. Defaults to the `combobox.clear` message. */
   clearLabel?: string;
   /** Accessible name of the toggle button. Defaults to the `combobox.toggle` message. */
   toggleLabel?: string;
 };
-declare function ComboboxInput({ className, clearLabel, toggleLabel, ...props }: ComboboxInputProps): import("react").JSX.Element;
+declare function ComboboxInput({ className, clearLabel, toggleLabel, ref, ...props }: ComboboxInputProps): import("react").JSX.Element;
 export type ComboboxContentProps = Omit<WithClassName<Combobox.Popup.Props>, 'children'> & {
   side?: Combobox.Positioner.Props['side'];
   sideOffset?: Combobox.Positioner.Props['sideOffset'];
@@ -20,7 +27,7 @@ export type ComboboxContentProps = Omit<WithClassName<Combobox.Popup.Props>, 'ch
   /** Content shown when no item matches. Defaults to the localized 'No results' message. */
   empty?: ReactNode;
 };
-declare function ComboboxContent({ className, side, sideOffset, align, children, empty, ...props }: ComboboxContentProps): import("react").JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, children, empty, onScroll, ...props }: ComboboxContentProps): import("react").JSX.Element;
 export type ComboboxItemProps = WithClassName<Combobox.Item.Props>;
 declare function ComboboxItem({ className, children, ...props }: ComboboxItemProps): import("react").JSX.Element;
 export type ComboboxEmptyProps = WithClassName<Combobox.Empty.Props>;
@@ -42,5 +49,5 @@ export type ComboboxChipProps = WithClassName<Combobox.Chip.Props> & {
 };
 declare function ComboboxChip({ className, children, removeLabel, ...props }: ComboboxChipProps): import("react").JSX.Element;
 export type ComboboxChipsInputProps = WithClassName<Combobox.Input.Props>;
-declare function ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps): import("react").JSX.Element;
-export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue };
+declare function ComboboxChipsInput({ className, ref, ...props }: ComboboxChipsInputProps): import("react").JSX.Element;
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxLoadRequest, type ComboboxPage, ComboboxValue };

package/dist/components/combobox/combobox.js

@@ -1,21 +1,55 @@
 "use client";
+import { ComboboxLoadingContext, ComboboxLoadingStatus, useComboboxInputRef, useComboboxLoading, useComboboxLoadingContext } from "./combobox-loading.js";
 import { useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { listItemClassName, listboxClassName, popupLayerClassName } from "../../lib/popup.js";
 import { controlFocus, controlFocusWithin, controlSurface } from "../../lib/control.js";
+import { listItemClassName, listboxClassName, popupLayerClassName } from "../../lib/popup.js";
+import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { Combobox } from "@base-ui/react/combobox";
 // src/components/combobox/combobox.tsx
-function Combobox$1(props) {
-	return /* @__PURE__ */ jsx(Combobox.Root, { ...props });
+function Combobox$1({ loadItems, debounceMs = 300, resetKey, ...props }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
+	const open = props.open ?? uncontrolledOpen;
+	const [search, setSearch] = useState("");
+	const inputRef = useRef(null);
+	const state = useComboboxLoading(loadItems, search, !!loadItems && open && !props.disabled, debounceMs, resetKey);
+	const asyncProps = loadItems ? {
+		items: state.items,
+		filter: null,
+		open,
+		onOpenChange: (nextOpen, details) => {
+			props.onOpenChange?.(nextOpen, details);
+			if (details.isCanceled) return;
+			setUncontrolledOpen(nextOpen);
+		},
+		onInputValueChange: (value, details) => {
+			props.onInputValueChange?.(value, details);
+			if (details.isCanceled) return;
+			if (details.reason === "input-change" || details.reason === "input-clear" || details.reason === "clear-press") setSearch(value);
+			else if (details.reason === "item-press" || details.reason === "none") setSearch("");
+		}
+	} : {};
+	return /* @__PURE__ */ jsx(ComboboxLoadingContext.Provider, {
+		value: loadItems ? {
+			...state,
+			inputRef
+		} : null,
+		children: /* @__PURE__ */ jsx(Combobox.Root, {
+			...props,
+			...asyncProps
+		})
+	});
 }
-function ComboboxInput({ className, clearLabel, toggleLabel, ...props }) {
+function ComboboxInput({ className, clearLabel, toggleLabel, ref, ...props }) {
 	const messages = useMessages();
+	const inputRef = useComboboxInputRef(ref);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
 		"data-slot": "combobox-input-group",
 		children: [/* @__PURE__ */ jsx(Combobox.Input, {
+			ref: inputRef,
 			className: cn(controlSurface, controlFocus, "h-8 w-full pr-16 pl-3", className),
 			...props,
 			"data-slot": "combobox-input"
@@ -38,7 +72,8 @@ function ComboboxInput({ className, clearLabel, toggleLabel, ...props }) {
 		})]
 	});
 }
-function ComboboxContent({ className, side = "bottom", sideOffset = 4, align = "start", children, empty = /* @__PURE__ */ jsx(ComboboxEmpty, {}), ...props }) {
+function ComboboxContent({ className, side = "bottom", sideOffset = 4, align = "start", children, empty = /* @__PURE__ */ jsx(ComboboxEmpty, {}), onScroll, ...props }) {
+	const asyncState = useComboboxLoadingContext();
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 		className: popupLayerClassName,
 		side,
@@ -47,11 +82,22 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 4, align = "
 		children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 			className: cn(listboxClassName, "min-w-(--anchor-width) outline-none", className),
 			...props,
+			onScroll: (event) => {
+				onScroll?.(event);
+				if (event.defaultPrevented || !asyncState?.enabled || asyncState.loading || asyncState.failed) return;
+				const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+				if (scrollHeight - scrollTop - clientHeight <= 32) asyncState.loadMore();
+			},
 			"data-slot": "combobox-content",
-			children: [/* @__PURE__ */ jsx(Combobox.List, {
-				"data-slot": "combobox-list",
-				children
-			}), empty]
+			children: [
+				/* @__PURE__ */ jsx(Combobox.List, {
+					"aria-busy": asyncState?.loading,
+					"data-slot": "combobox-list",
+					children
+				}),
+				!asyncState?.loading && !asyncState?.failed && !asyncState?.hasMore && empty,
+				/* @__PURE__ */ jsx(ComboboxLoadingStatus, {})
+			]
 		})
 	}) });
 }
@@ -131,8 +177,10 @@ function ComboboxChip({ className, children, removeLabel, ...props }) {
 		})]
 	});
 }
-function ComboboxChipsInput({ className, ...props }) {
+function ComboboxChipsInput({ className, ref, ...props }) {
+	const inputRef = useComboboxInputRef(ref);
 	return /* @__PURE__ */ jsx(Combobox.Input, {
+		ref: inputRef,
 		className: cn("h-6 min-w-16 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
 		...props,
 		"data-slot": "combobox-chips-input"

package/dist/components/data-table/data-table.d.ts

@@ -1,10 +1,13 @@
 import { DataTableColumnFilter } from "./filter-header.js";
 import { ComponentProps, ReactNode } from "react";
-import { ColumnDef, ColumnFiltersState, PaginationState, RowData, SortingState, TableFeatures } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, ColumnPinningState, ExpandedState, PaginationState, RowData, SortingState, TableFeatures } from "@tanstack/react-table";
 declare const dataTableFeatures: {
   columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  columnPinningFeature: import("@tanstack/react-table").TableFeature;
+  columnSizingFeature: import("@tanstack/react-table").TableFeature;
   columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
   rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  rowExpandingFeature: import("@tanstack/react-table").TableFeature;
   rowPaginationFeature: import("@tanstack/react-table").TableFeature;
   filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
   sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
@@ -23,8 +26,11 @@ type DataTableFeatures = typeof dataTableFeatures;
 type DataTableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue>;
 declare function createDataTableColumnHelper<TData extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
   columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  columnPinningFeature: import("@tanstack/react-table").TableFeature;
+  columnSizingFeature: import("@tanstack/react-table").TableFeature;
   columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
   rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  rowExpandingFeature: import("@tanstack/react-table").TableFeature;
   rowPaginationFeature: import("@tanstack/react-table").TableFeature;
   filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
   sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
@@ -43,8 +49,10 @@ declare module '@tanstack/react-table' {
   interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue> {
     /** Classes applied to this column's header and body cells. */
     className?: string;
+    /** Plain column name for assistive technology when a custom header is visually hidden. */
+    accessibleLabel?: string;
     /**
-     * Puts a multi select filter in the header of this column. The filter value is the list of chosen values, so
+     * Puts an option menu or custom filter panel in the header. The filter value is the list of chosen values, so
      * a column that the table filters itself needs `filterFn: 'oneOf'` (a row matches when its value is any of them),
      * and with `manualFiltering` the owner of the data does the filtering.
      */
@@ -56,6 +64,20 @@ export interface DataTableProps<TData extends RowData> {
   data: TData[];
   /** Stable row id; defaults to the row index. */
   getRowId?: (row: TData, index: number) => string;
+  /** Detail content rendered in a full-width row below its parent. Enables the leading expansion column. */
+  renderExpandedRow?: (row: TData) => ReactNode;
+  /** Defaults to true when renderExpandedRow is supplied. Ineligible rows have no expansion button. */
+  getRowCanExpand?: (row: TData) => boolean;
+  /** Controlled expansion by row ID, or true for all eligible rows. */
+  expanded?: ExpandedState;
+  /** Initial expansion when expanded is uncontrolled. Later eligibility changes do not reset it. */
+  defaultExpanded?: ExpandedState;
+  /** Receives the proposed expansion state when a row is toggled. */
+  onExpandedChange?: (expanded: ExpandedState) => void;
+  /** Logical edges: `end` pins Actions to the right in an LTR layout. */
+  columnPinning?: ColumnPinningState;
+  defaultColumnPinning?: ColumnPinningState;
+  onColumnPinningChange?: (pinning: ColumnPinningState) => void;
   sorting?: SortingState;
   defaultSorting?: SortingState;
   onSortingChange?: (sorting: SortingState) => void;
@@ -75,12 +97,14 @@ export interface DataTableProps<TData extends RowData> {
   /** Accessible name of the pagination region; set it when a page shows several tables. */
   paginationLabel?: string;
   loading?: boolean;
+  /** Hide repeated headers visually while preserving plain column names for assistive technology. */
+  showHeader?: boolean;
   /** Replaces the default "No Data" message. */
   empty?: ReactNode;
   /** Rendered above the table, right-aligned (search inputs, buttons). */
   toolbar?: ReactNode;
   className?: string;
 }
-declare function DataTable<TData extends RowData>({ columns, data, getRowId, sorting, defaultSorting, onSortingChange, manualSorting, columnFilters, onColumnFiltersChange, manualFiltering, pagination, defaultPagination, onPaginationChange, manualPagination, rowCount, pageSizeOptions, hidePagination, paginationLabel, loading, empty, toolbar, className }: DataTableProps<TData>): import("react").JSX.Element;
+declare function DataTable<TData extends RowData>({ columns, data, getRowId, renderExpandedRow, getRowCanExpand, expanded, defaultExpanded, onExpandedChange, columnPinning, defaultColumnPinning, onColumnPinningChange, sorting, defaultSorting, onSortingChange, manualSorting, columnFilters, onColumnFiltersChange, manualFiltering, pagination, defaultPagination, onPaginationChange, manualPagination, rowCount, pageSizeOptions, hidePagination, paginationLabel, loading, showHeader, empty, toolbar, className }: DataTableProps<TData>): import("react").JSX.Element;
 declare function DataTableRowActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 export { DataTable, type DataTableColumnDef, type DataTableFeatures, DataTableRowActions, createDataTableColumnHelper, dataTableFeatures };