@parallelworks/ui 0.41.0 → 0.43.0

package/dist/components/Avatar.js

@@ -1,7 +1,7 @@
 import { useStrings } from "./Provider.js";
-import cx from "classnames";
-import { useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/Avatar.tsx
 var SIZE_CLASSES = {
 	xs: "w-4 h-4 text-[9px]",
@@ -30,19 +30,19 @@ function Avatar({ src, name, size = "md", status, className }) {
 	const [erroredUrl, setErroredUrl] = useState(null);
 	const showImage = !!src && erroredUrl !== src;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("relative inline-flex", className),
+		className: clsx("relative inline-flex", className),
 		children: [showImage ? /* @__PURE__ */ jsx("img", {
 			src,
 			alt: name || strings.common.userAvatar,
 			loading: "lazy",
 			onError: () => setErroredUrl(src),
-			className: cx("rounded-full object-cover", SIZE_CLASSES[size])
+			className: clsx("rounded-full object-cover", SIZE_CLASSES[size])
 		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
+			className: clsx("rounded-full flex items-center justify-center font-medium", "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white", SIZE_CLASSES[size]),
 			children: size === "xs" ? avatarInitials(name).charAt(0) : avatarInitials(name)
 		}), status && /* @__PURE__ */ jsx("span", {
 			"data-testid": "online-indicator",
-			className: cx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
+			className: clsx("absolute bottom-0 right-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "w-1.5 h-1.5" : "w-2.5 h-2.5")
 		})]
 	});
 }

package/dist/components/Breadcrumbs.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useLayoutEffect, useMemo } from "react";
 //#region src/components/Breadcrumbs.tsx
 var BreadcrumbContext = createContext({
 	breadcrumbs: [],

package/dist/components/Button.js

@@ -1,9 +1,9 @@
-import { useLink } from "./Provider.js";
 import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
 import { LoaderIcon } from "./StatusIcons.js";
-import cx from "classnames";
+import { useLink } from "./Provider.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Button.tsx
 var Button = forwardRef(({ children, variant = "primary", size = "default", loading, icon, iconPosition = "right", fullWidth = true, className = "", disabled, ...props }, ref) => {
 	const baseClasses = "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 cursor-pointer border-none mt-2 disabled:opacity-50 disabled:cursor-not-allowed";
@@ -23,9 +23,9 @@ var Button = forwardRef(({ children, variant = "primary", size = "default", load
 		ref,
 		type: "button",
 		disabled: disabled || loading,
-		className: cx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
+		className: clsx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
 		...props,
-		children: loading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 			icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", {
 				className: "flex items-center",
 				children: icon
@@ -43,7 +43,7 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 	const Link = useLink();
 	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:bg-[var(--theme-border)] hover:border-[var(--theme-muted-text-color)] hover:-translate-y-0.5 active:translate-y-0";
 	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:bg-[var(--ds-muted)] disabled:hover:border-[var(--ds-border)] disabled:hover:translate-y-0";
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 		icon && /* @__PURE__ */ jsx("span", {
 			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
 			children: icon
@@ -63,18 +63,18 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 	if (href) {
 		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
 			href,
-			className: cx("group", baseClasses, className),
+			className: clsx("group", baseClasses, className),
 			children: content
 		});
 		return /* @__PURE__ */ jsx(Link, {
-			to: href,
-			className: cx("group", baseClasses, className),
+			href,
+			className: clsx("group", baseClasses, className),
 			children: content
 		});
 	}
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: cx("group", baseClasses, disabledClasses, className),
+		className: clsx("group", baseClasses, disabledClasses, className),
 		disabled: disabled || loading,
 		...props,
 		children: content

package/dist/components/Callout.js

@@ -1,6 +1,6 @@
 import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
@@ -9,7 +9,7 @@ function CalloutIcon({ type }) {
 }
 function Callout({ type, className = "", children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
+		className: clsx(className, type === "warning" && "bg-orange-100 border-orange-500 text-orange-700", type === "error" && "bg-red-100 border-red-500 text-red-700", type === "info" && "bg-blue-100 border-blue-500 text-blue-700", "border-t-4 rounded-b px-4 py-3 shadow-md my-4"),
 		role: "alert",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex",

package/dist/components/Card.js

@@ -1,15 +1,15 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Card.tsx
 function Card({ children, className = "", wide, compact, interactive, authShadow }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
+		className: clsx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
 		children
 	});
 }
 function CardHeader({ badge, title, description, className = "", align = "center" }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),
+		className: clsx(align === "center" ? "text-center" : "text-left", "mb-6", className),
 		children: [
 			badge && /* @__PURE__ */ jsx("div", {
 				className: "inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-full text-[var(--theme-muted-text-color)] mb-4 transition-colors duration-200",

package/dist/components/Combobox.d.ts

@@ -0,0 +1,49 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type ComboboxItems } from './comboboxItems.js';
+export type { ComboboxGroup, ComboboxItem, ComboboxItems, ComboboxLeaf, } from './comboboxItems.js';
+interface FieldProps {
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Classes for the field box: border, background, size. */
+    className?: string | undefined;
+}
+type SelectionProps<Value> = {
+    multiple?: false | undefined;
+    value?: Value | null | undefined;
+    defaultValue?: Value | null | undefined;
+    onValueChange?: ((value: NoInfer<Value> | null) => void) | undefined;
+} | {
+    multiple: true;
+    value?: readonly Value[] | undefined;
+    defaultValue?: readonly Value[] | undefined;
+    onValueChange?: ((value: NoInfer<Value>[]) => void) | undefined;
+};
+export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> & {
+    items: ComboboxItems<Value>;
+    /** Matches a value to its item. Defaults to deep equality, so object values can be recreated. */
+    isItemEqualToValue?: ((itemValue: Value, value: Value) => boolean) | undefined;
+    /** Labels a selected value that no item has, such as a saved choice the list no longer offers. */
+    itemToStringLabel?: ((value: Value) => string) | undefined;
+    /** Renders the field as this button, with the search input inside the popup, for compact
+     *  pickers such as a toolbar pill. The button shows the selection itself. */
+    trigger?: ReactElement | undefined;
+    /** A hint on the trigger button. */
+    triggerTooltip?: ReactNode;
+};
+export interface AutocompleteProps extends FieldProps {
+    /** Suggestions; any typed text is also a valid value. */
+    items: ComboboxItems<string>;
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+}
+/** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
+export declare function Combobox<Value = string>(props: ComboboxProps<Value>): import("react").JSX.Element;
+/** A free-text field that suggests values as you type. */
+export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: AutocompleteProps): import("react").JSX.Element;

package/dist/components/Combobox.js

@@ -0,0 +1,405 @@
+import { FaCaretDown } from "../icons/fa/FaCaretDown.js";
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { FiX } from "../icons/fi/FiX.js";
+import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { Tooltip } from "./Tooltip.js";
+import { useStrings } from "./Provider.js";
+import { useQueryMatch } from "./search.js";
+import { isComboboxGroup } from "./comboboxItems.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { dequal } from "dequal";
+//#region src/components/Combobox.tsx
+function toEntry(item, group) {
+	const entry = typeof item === "string" ? {
+		value: item,
+		label: item
+	} : item;
+	return group === void 0 ? entry : {
+		...entry,
+		group
+	};
+}
+/** Base UI takes either flat items or groups, and filters and navigates by the leaf items, so
+*  items listed between groups gather into headless groups where they sit. */
+function useEntries(items) {
+	return useMemo(() => {
+		if (!items.some(isComboboxGroup)) {
+			const flat = items.map((item) => toEntry(item));
+			return {
+				items: flat,
+				flat,
+				statusGroups: []
+			};
+		}
+		const groups = [];
+		for (const item of items) {
+			if (isComboboxGroup(item)) {
+				groups.push({
+					label: item.label,
+					icon: item.icon,
+					description: item.description,
+					items: item.items.map((leaf) => toEntry(leaf, item.label)),
+					order: groups.length
+				});
+				continue;
+			}
+			const last = groups.at(-1);
+			if (last?.headless) last.items.push(toEntry(item));
+			else groups.push({
+				label: "",
+				items: [toEntry(item)],
+				order: groups.length,
+				headless: true
+			});
+		}
+		return {
+			items: groups,
+			flat: groups.flatMap((g) => g.items),
+			statusGroups: groups.filter((g) => g.items.length === 0)
+		};
+	}, [items]);
+}
+function useEntryFilter() {
+	const match = useQueryMatch();
+	return useCallback((entry, query) => match(query, entry.label, typeof entry.value === "string" ? entry.value : void 0, entry.group), [match]);
+}
+var entryLabel = (entry) => entry?.label ?? "";
+var fieldClassName = "theme-input relative flex min-h-8 w-full items-center gap-1 rounded-md border text-sm focus-within:border-(--theme-element) focus-within:ring-1 focus-within:ring-(--theme-element) has-[[aria-invalid=true]]:border-(--theme-error) has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-(--theme-input-disabled-bg) has-[input:disabled]:text-(--theme-input-disabled-text)";
+var inputClassName = "h-full min-w-12 flex-1 self-stretch border-0 bg-transparent py-1.5 pl-3 text-inherit outline-none placeholder:text-(--theme-muted-text-color) disabled:cursor-not-allowed";
+var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--theme-muted-text-color) disabled:cursor-not-allowed";
+var popupInputClassName = "theme-input h-7 w-full rounded-md border px-2 text-sm outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-element)";
+/** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
+function Combobox$1(props) {
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, trigger, triggerTooltip } = props;
+	const entries = useEntries(items);
+	const filter = useEntryFilter();
+	const strings = useStrings();
+	const t = strings.dropdown;
+	const list = useRef(null);
+	const [inputValue, setInputValue] = useState(null);
+	const entryOf = (value) => entries.flat.find((entry) => isItemEqualToValue(entry.value, value)) ?? {
+		value,
+		label: itemToStringLabel(value)
+	};
+	const toEntries = (values) => values?.map(entryOf);
+	const toSingle = (value) => value === void 0 ? void 0 : value === null ? null : entryOf(value);
+	const selected = props.multiple ? void 0 : toSingle(props.value);
+	const selectedIcon = selected?.icon && (inputValue === null || inputValue === selected.label) ? selected.icon : null;
+	const input = /* @__PURE__ */ jsx(Combobox.Input, {
+		id: trigger ? void 0 : id,
+		placeholder,
+		"aria-label": ariaLabel || void 0,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid || void 0,
+		autoComplete: "off",
+		className: trigger ? popupInputClassName : inputClassName
+	});
+	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
+		value: entry,
+		disabled: entry.disabled,
+		...rowProps.props,
+		className: itemClassName,
+		children: [/* @__PURE__ */ jsx(ItemContent, { entry }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			className: "ml-auto flex shrink-0 items-center",
+			children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5" })
+		})]
+	}, rowProps.key);
+	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: triggerTooltip,
+		children: /* @__PURE__ */ jsx(Combobox.Trigger, {
+			id,
+			"aria-label": ariaLabel || void 0,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy,
+			"aria-invalid": ariaInvalid || void 0,
+			render: trigger
+		})
+	}), /* @__PURE__ */ jsx(ListPopup, {
+		listRef: list,
+		empty: t.noOptionsFound,
+		statusGroups: entries.statusGroups,
+		query: inputValue ?? "",
+		header: /* @__PURE__ */ jsx("div", {
+			className: "border-b border-(--theme-border) p-1.5",
+			children: input
+		}),
+		className: "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		renderItem: itemRow
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
+		"data-testid": "combobox",
+		className: clsx(fieldClassName, className),
+		children: [props.multiple ? /* @__PURE__ */ jsxs(Combobox.Chips, {
+			className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-1",
+			children: [/* @__PURE__ */ jsx(Combobox.Value, { children: (values) => values.map((entry) => /* @__PURE__ */ jsxs(Combobox.Chip, {
+				"aria-label": entry.label,
+				className: "flex items-center gap-1 rounded bg-(--theme-muted-panel-bg) py-0.5 pr-0.5 pl-1.5 text-xs outline-none data-highlighted:bg-(--theme-hover)",
+				children: [entry.label, /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+					"aria-label": `${strings.common.remove} ${entry.label}`,
+					className: "flex size-4 items-center justify-center rounded hover:bg-(--theme-hover)",
+					children: /* @__PURE__ */ jsx(FiX, { className: "size-3" })
+				})]
+			}, entry.label)) }), input]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center pl-3",
+			children: selectedIcon
+		}), input] }), /* @__PURE__ */ jsx(Combobox.Trigger, {
+			"aria-label": t.showOptions,
+			"data-testid": "combobox-button",
+			className: triggerClassName,
+			children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+		})]
+	}), /* @__PURE__ */ jsx(ListPopup, {
+		listRef: list,
+		empty: t.noOptionsFound,
+		statusGroups: entries.statusGroups,
+		query: inputValue ?? "",
+		renderItem: itemRow
+	})] });
+	const root = {
+		items: entries.items,
+		filter,
+		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
+		itemToStringLabel: entryLabel,
+		onInputValueChange: setInputValue,
+		onItemHighlighted: (_, { index, reason }) => list.current?.reveal(index, reason),
+		disabled,
+		required,
+		virtualized: true,
+		children: parts
+	};
+	return props.multiple ? /* @__PURE__ */ jsx(Combobox.Root, {
+		...root,
+		multiple: true,
+		value: toEntries(props.value),
+		defaultValue: toEntries(props.defaultValue),
+		onValueChange: (next) => props.onValueChange?.(next.map((entry) => entry.value))
+	}) : /* @__PURE__ */ jsx(Combobox.Root, {
+		...root,
+		value: selected,
+		defaultValue: toSingle(props.defaultValue),
+		onValueChange: (next) => props.onValueChange?.(next?.value ?? null)
+	});
+}
+/** A free-text field that suggests values as you type. */
+function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const entries = useEntries(items);
+	const filter = useEntryFilter();
+	const t = useStrings().dropdown;
+	const list = useRef(null);
+	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
+		items: entries.items,
+		filter,
+		itemToStringValue: (entry) => entry.value,
+		value,
+		defaultValue,
+		onValueChange: (next) => onValueChange?.(next),
+		onItemHighlighted: (_, { index, reason }) => list.current?.reveal(index, reason),
+		disabled,
+		required,
+		virtualized: true,
+		children: [/* @__PURE__ */ jsxs(Autocomplete.InputGroup, {
+			"data-testid": "combobox",
+			className: clsx(fieldClassName, className),
+			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
+				id,
+				placeholder,
+				"aria-label": ariaLabel || void 0,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				autoComplete: "off",
+				className: inputClassName
+			}), entries.flat.length > 0 && /* @__PURE__ */ jsx(Autocomplete.Trigger, {
+				"aria-label": t.showOptions,
+				"data-testid": "combobox-button",
+				className: triggerClassName,
+				children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+			})]
+		}), /* @__PURE__ */ jsx(ListPopup, {
+			listRef: list,
+			renderItem: (entry, rowProps) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+				value: entry,
+				disabled: entry.disabled,
+				...rowProps.props,
+				className: itemClassName,
+				children: /* @__PURE__ */ jsx(ItemContent, { entry })
+			}, rowProps.key)
+		})]
+	});
+}
+var itemClassName = clsx(panelItemClassName, "data-selected:font-medium");
+function ItemContent({ entry }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 items-center",
+		children: entry.icon
+	}), /* @__PURE__ */ jsxs("span", {
+		className: "flex min-w-0 flex-col",
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: entry.label,
+			overflowOnly: true,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: entry.label
+			})
+		}), entry.description && /* @__PURE__ */ jsx("span", {
+			className: "text-xs leading-snug text-(--theme-muted-text-color)",
+			children: entry.description
+		})]
+	})] });
+}
+function GroupHeading({ group }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		group.icon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 items-center",
+			children: group.icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "shrink-0 font-semibold",
+			children: group.label
+		}),
+		group.description && /* @__PURE__ */ jsx(Tooltip, {
+			content: group.description,
+			overflowOnly: true,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 truncate",
+				children: ["· ", group.description]
+			})
+		})
+	] });
+}
+/** Portal, positioner and popup shared by Combobox and Autocomplete; both use the same parts. */
+function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", renderItem }) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		container: portalContainer(),
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			align: "start",
+			sideOffset: 4,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				className: clsx("overflow-hidden", className, panelClassName),
+				children: [
+					header,
+					empty && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
+						className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
+						children: empty
+					}),
+					/* @__PURE__ */ jsx(Combobox.List, { children: /* @__PURE__ */ jsx(VirtualList, {
+						ref: listRef,
+						statusGroups,
+						query,
+						renderItem
+					}) })
+				]
+			})
+		})
+	});
+}
+function toRows(filtered, statusGroups) {
+	const nodes = statusGroups.length ? [...filtered, ...statusGroups].sort((a, b) => ("order" in a ? a.order : 0) - ("order" in b ? b.order : 0)) : filtered;
+	const rows = [];
+	const rowOfItem = [];
+	for (const node of nodes) {
+		const leaves = "items" in node ? node.items : [node];
+		if ("items" in node && !node.headless) rows.push({
+			kind: "group",
+			group: node
+		});
+		for (const entry of leaves) {
+			rowOfItem.push(rows.length);
+			rows.push({
+				kind: "item",
+				entry,
+				index: rowOfItem.length - 1
+			});
+		}
+	}
+	return {
+		rows,
+		rowOfItem
+	};
+}
+function VirtualList({ ref, statusGroups, query, renderItem }) {
+	const filtered = Combobox.useFilteredItems();
+	const match = useQueryMatch();
+	const { rows, rowOfItem } = useMemo(() => {
+		const q = query.trim();
+		const shown = q ? statusGroups.filter((g) => match(q, g.label, g.description)) : statusGroups;
+		return toRows(filtered, shown);
+	}, [
+		filtered,
+		statusGroups,
+		query,
+		match
+	]);
+	const scroller = useRef(null);
+	const virtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => scroller.current,
+		estimateSize: (i) => rows[i]?.kind === "group" ? 28 : 36,
+		overscan: 10,
+		paddingStart: 4,
+		paddingEnd: 4,
+		scrollPaddingStart: 4,
+		scrollPaddingEnd: 4
+	});
+	useImperativeHandle(ref, () => ({ reveal(index, reason) {
+		const row = index === void 0 ? void 0 : rowOfItem[index];
+		if (row === void 0 || reason === "pointer") return;
+		queueMicrotask(() => virtualizer.scrollToIndex(row, { align: "auto" }));
+	} }), [rowOfItem, virtualizer]);
+	const scrollerRef = useCallback((element) => {
+		scroller.current = element;
+		if (element) virtualizer.measure();
+	}, [virtualizer]);
+	if (rows.length === 0) return null;
+	const total = virtualizer.getTotalSize();
+	return /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		ref: scrollerRef,
+		className: "max-h-[min(15rem,var(--available-height))] overflow-auto overscroll-contain",
+		style: { height: total },
+		children: /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "relative w-full",
+			style: { height: total },
+			children: virtualizer.getVirtualItems().map((virtual) => {
+				const row = rows[virtual.index];
+				const style = {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					transform: `translateY(${virtual.start}px)`
+				};
+				if (!row) return null;
+				if (row.kind === "group") return /* @__PURE__ */ jsx("div", {
+					role: "presentation",
+					"data-index": virtual.index,
+					ref: virtualizer.measureElement,
+					style,
+					className: "flex items-center gap-1.5 px-3 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
+					children: /* @__PURE__ */ jsx(GroupHeading, { group: row.group })
+				}, virtual.key);
+				return renderItem(row.entry, {
+					key: virtual.key,
+					props: {
+						index: row.index,
+						ref: virtualizer.measureElement,
+						"data-index": virtual.index,
+						"aria-setsize": rowOfItem.length,
+						"aria-posinset": row.index + 1,
+						style
+					}
+				});
+			})
+		})
+	});
+}
+//#endregion
+export { Autocomplete$1 as Autocomplete, Combobox$1 as Combobox };

package/dist/components/ConfirmModal.js

@@ -1,9 +1,9 @@
 import { useStrings } from "./Provider.js";
-import { BareModal, modalPanelClasses } from "./BareModal.js";
 import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./ghostButton.js";
-import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Modal, ModalDescription, ModalTitle } from "./Modal.js";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/components/ConfirmModal.tsx
 function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled = false, destructive = false, align = "top", cancelLabel, closeOnConfirm = true }) {
 	const strings = useStrings();
@@ -29,21 +29,21 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			setPending(false);
 		}
 	}, [onConfirm, closeOnConfirm]);
-	return /* @__PURE__ */ jsxs(BareModal, {
+	return /* @__PURE__ */ jsxs(Modal, {
+		alert: destructive,
 		open,
 		onClose,
-		ariaLabel: title,
 		align,
-		preventClose: pending,
-		className: cx(modalPanelClasses, "w-[480px] max-w-full"),
+		dismissible: !pending,
+		className: "w-[480px] max-w-full",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "px-5 pt-5",
 			children: [
-				/* @__PURE__ */ jsx("h2", {
+				/* @__PURE__ */ jsx(ModalTitle, {
 					className: "text-lg font-semibold text-(--theme-app)",
 					children: title
 				}),
-				description !== null && description !== void 0 && /* @__PURE__ */ jsx("p", {
+				description !== null && description !== void 0 && /* @__PURE__ */ jsx(ModalDescription, {
 					className: "mt-1.5 text-sm text-(--theme-muted-text-color)",
 					children: description
 				}),
@@ -58,13 +58,13 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 				type: "button",
 				onClick: onClose,
 				disabled: pending,
-				className: cx(ghostButtonClasses, pending && "cursor-wait"),
+				className: clsx(ghostButtonClasses, pending && "cursor-wait"),
 				children: cancelLabel ?? strings.modal.cancel
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: runConfirm,
 				disabled: confirmDisabled || pending,
-				className: cx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				className: clsx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
 				children: confirmLabel
 			})]
 		})]