@parallelworks/ui 0.44.0 → 0.46.0

package/dist/components/Button.js

@@ -1,51 +1,38 @@
-import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
-import { LoaderIcon } from "./StatusIcons.js";
+import { cx } from "../cx.js";
+import { ChevronRightIcon } from "../icons.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { Loader } from "./Loader.js";
 import { useLink } from "./Provider.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { Button } from "@base-ui/react/button";
 //#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";
-	const variantClasses = {
-		primary: "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white shadow-[0_4px_14px_0_rgba(59,130,246,0.3)] hover:enabled:-translate-y-0.5 hover:enabled:shadow-[0_6px_20px_0_rgba(59,130,246,0.4)] active:enabled:translate-y-0",
-		secondary: "bg-[var(--theme-muted-panel-bg)] text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-border)]",
-		outline: "bg-transparent text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-muted-panel-bg)] hover:enabled:border-[var(--theme-muted-text-color)]",
-		ghost: "bg-transparent text-[var(--theme-muted-text-color)] hover:enabled:text-[var(--theme-app)] hover:enabled:bg-[var(--theme-muted-panel-bg)]"
-	};
-	const sizeClasses = {
-		sm: "py-2 px-4 text-[0.8125rem]",
-		default: "py-3 px-5 text-sm",
-		lg: "py-4 px-6 text-base"
-	};
-	const widthClass = fullWidth ? "w-full" : "w-auto";
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		disabled: disabled || loading,
-		className: clsx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
+/** A button in the package's one look (see `buttonClasses`).
+*  `focusableWhenDisabled` keeps a disabled button's tooltip reachable. A link
+*  that looks like a button stays a link: give it `buttonClasses()`. */
+function Button$1({ variant, size = "md", iconOnly, icon, loading = false, disabled, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
 		...props,
-		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
-			}),
-			children,
-			icon && iconPosition === "right" && /* @__PURE__ */ jsx("span", {
-				className: "flex items-center",
-				children: icon
-			})
-		] })
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: cx(buttonClasses({
+			variant,
+			size,
+			iconOnly
+		}), className),
+		children: [loading ? /* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			decorative: true,
+			size: "1em"
+		}) : icon, children]
 	});
-});
-Button.displayName = "Button";
+}
 function MethodButton({ icon, label, description, href, loading, disabled, className = "", ...props }) {
 	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 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:not-disabled:bg-(--theme-border) hover:not-disabled:border-(--theme-muted-text-color) hover:not-disabled:-translate-y-0.5 active:translate-y-0";
+	const disabledClasses = "disabled:opacity-60 disabled:cursor-not-allowed";
 	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",
+			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
 			children: icon
 		}),
 		/* @__PURE__ */ jsxs("span", {
@@ -58,27 +45,35 @@ function MethodButton({ icon, label, description, href, loading, disabled, class
 				children: description
 			})]
 		}),
-		loading ? /* @__PURE__ */ jsx(LoaderIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2" }) : /* @__PURE__ */ jsx(FaAngleRight, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
+		loading ? /* @__PURE__ */ jsx("span", {
+			className: "ml-2 shrink-0 text-[var(--theme-muted-text-color)]",
+			children: /* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: 20,
+				color: "currentColor"
+			})
+		}) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
 	] });
 	if (href) {
 		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
 			href,
-			className: clsx("group", baseClasses, className),
+			className: cx("group", baseClasses, className),
 			children: content
 		});
 		return /* @__PURE__ */ jsx(Link, {
 			href,
-			className: clsx("group", baseClasses, className),
+			className: cx("group", baseClasses, className),
 			children: content
 		});
 	}
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		className: clsx("group", baseClasses, disabledClasses, className),
+		className: cx("group", baseClasses, disabledClasses, className),
 		disabled: disabled || loading,
 		...props,
 		children: content
 	});
 }
 //#endregion
-export { Button, MethodButton };
+export { Button$1 as Button, MethodButton };

package/dist/components/Callout.js

@@ -1,22 +1,28 @@
-import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { InfoIcon, WarningIcon } from "../icons.js";
+import { toneSurface } from "./tone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Callout.tsx
 function CalloutIcon({ type }) {
-	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(TbAlertTriangle, { className: "h-6 w-6 mr-4 text-lg" });
-	else return /* @__PURE__ */ jsx(FaInfoCircle, { className: "h-6 w-6 mr-4 text-lg" });
+	if (type === "warning" || type === "error") return /* @__PURE__ */ jsx(WarningIcon, {
+		"aria-hidden": "true",
+		className: "mr-3 h-5 w-5 shrink-0"
+	});
+	else return /* @__PURE__ */ jsx(InfoIcon, {
+		"aria-hidden": "true",
+		className: "mr-3 h-5 w-5 shrink-0"
+	});
 }
 function Callout({ type, className = "", children }) {
 	return /* @__PURE__ */ jsx("div", {
-		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",
+		className: cx(toneSurface[type], "my-4 rounded-xl border px-4 py-3", className),
+		role: type === "info" ? "note" : "alert",
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "py-1",
-				children: /* @__PURE__ */ jsx(CalloutIcon, { type })
-			}), /* @__PURE__ */ jsx("div", { children })]
+			className: "flex text-sm",
+			children: [/* @__PURE__ */ jsx(CalloutIcon, { type }), /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children
+			})]
 		})
 	});
 }

package/dist/components/Card.d.ts

@@ -1,13 +1,23 @@
-import type { ReactNode } from 'react';
-interface CardProps {
+import type { ReactElement, ReactNode } from 'react';
+declare const sizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export interface CardProps {
     children: ReactNode;
-    className?: string;
-    wide?: boolean;
-    compact?: boolean;
-    interactive?: boolean;
-    authShadow?: boolean;
+    /** Its width and padding: `sm` for a short form, `lg` for a wide one. */
+    size?: keyof typeof sizeClasses | undefined;
+    /** A stronger shadow, for a card standing alone on a page, such as sign-in. */
+    elevated?: boolean | undefined;
+    /** Renders the card as this element, such as a link or a button, which makes
+     *  the whole card pressable: it lifts on hover and shows focus. */
+    render?: ReactElement | undefined;
+    className?: string | undefined;
 }
-export declare function Card({ children, className, wide, compact, interactive, authShadow, }: CardProps): import("react").JSX.Element;
+/** A raised surface holding one task, such as a sign-in form or a choice among
+ *  a few options. */
+export declare function Card({ children, size, elevated, render, className }: CardProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CardHeaderProps {
     badge?: ReactNode;
     title: string;

package/dist/components/Card.js

@@ -1,15 +1,26 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Card.tsx
-function Card({ children, className = "", wide, compact, interactive, authShadow }) {
-	return /* @__PURE__ */ jsx("div", {
-		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
+var sizeClasses = {
+	sm: "max-w-[400px] p-6",
+	md: "max-w-[520px] p-10",
+	lg: "max-w-[560px] p-8"
+};
+/** A raised surface holding one task, such as a sign-in form or a choice among
+*  a few options. */
+function Card({ children, size = "md", elevated = false, render, className }) {
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx("div", {}),
+		props: {
+			className: cx("block w-full rounded-2xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
+			children
+		}
 	});
 }
 function CardHeader({ badge, title, description, className = "", align = "center" }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(align === "center" ? "text-center" : "text-left", "mb-6", className),
+		className: cx(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/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+export { CheckboxGroup } from '@base-ui/react/checkbox-group';
+export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, 'className'> {
+    className?: string | undefined;
+}
+/** A box that ticks on and off, or shows a mixed state with `indeterminate`. Name it with an
+ *  enclosing `<label>`, or `aria-label` when it stands alone, as in a table row. In a
+ *  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. */
+export declare function Checkbox({ className, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox.js

@@ -0,0 +1,30 @@
+import { cx } from "../cx.js";
+import { CheckIcon, MinusIcon } from "../icons.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+//#region src/components/Checkbox.tsx
+/** A box that ticks on and off, or shows a mixed state with `indeterminate`. Name it with an
+*  enclosing `<label>`, or `aria-label` when it stands alone, as in a table row. In a
+*  `CheckboxGroup`, `value` identifies it and the group holds which are ticked. */
+function Checkbox$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		...props,
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-accent) data-indeterminate:bg-(--theme-accent)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "flex",
+			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
+				...indicatorProps,
+				children: state.indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				}) : /* @__PURE__ */ jsx(CheckIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})
+		})
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxGroup };

package/dist/components/Combobox.d.ts

@@ -10,6 +10,7 @@ interface FieldProps {
     'aria-labelledby'?: string | undefined;
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
     /** Classes for the field box: border, background, size. */
     className?: string | undefined;
 }
@@ -23,6 +24,13 @@ type SelectionProps<Value> = {
     value?: readonly Value[] | undefined;
     defaultValue?: readonly Value[] | undefined;
     onValueChange?: ((value: NoInfer<Value>[]) => void) | undefined;
+    /** Typed text the list doesn't have can be added as a value of its own, as tags are. The
+     *  values are then strings. For one free-text value, use Autocomplete. */
+    creatable?: (Value extends string ? boolean : never) | undefined;
+    /** The most values the field takes; past it, only removing one lets another in. */
+    maxItems?: number | undefined;
+    /** The longest text that can be typed, such as for a created value. */
+    maxLength?: number | undefined;
 };
 export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> & {
     items: ComboboxItems<Value>;
@@ -46,4 +54,4 @@ export interface AutocompleteProps extends FieldProps {
 /** 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;
+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, 'aria-required': ariaRequired, }: AutocompleteProps): import("react").JSX.Element;

package/dist/components/Combobox.js

@@ -1,12 +1,11 @@
-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 { cx } from "../cx.js";
+import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
+import { panelClassName, panelItemClassName, 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 { fieldBox } from "./fieldBox.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Combobox } from "@base-ui/react/combobox";
@@ -66,16 +65,20 @@ function useEntries(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]);
+	return useCallback((entry, query) => entry.created === true || 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 fieldClassName = cx(fieldBox({
+	within: true,
+	multiline: true,
+	padded: false
+}), "relative flex items-center gap-1");
 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)";
+var popupInputClassName = fieldBox({ size: "sm" });
 /** 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 { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const strings = useStrings();
@@ -89,25 +92,46 @@ function Combobox$1(props) {
 	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 [uncontrolledCount, setUncontrolledCount] = useState(props.multiple ? props.defaultValue?.length ?? 0 : 0);
+	const chosen = props.multiple ? props.value ?? null : null;
+	const full = props.multiple && props.maxItems !== void 0 && (chosen?.length ?? uncontrolledCount) >= props.maxItems;
+	const isChosen = (entry) => chosen?.some((value) => isItemEqualToValue(entry.value, value)) ?? false;
+	const typed = inputValue?.trim() ?? "";
+	const lowered = typed.toLocaleLowerCase();
+	const sameText = (value, label) => label?.toLocaleLowerCase() === lowered || typeof value === "string" && value.toLocaleLowerCase() === lowered;
+	const created = props.multiple && props.creatable && typed !== "" && !full && !entries.flat.some((entry) => sameText(entry.value, entry.label)) && !chosen?.some((value) => sameText(value)) ? {
+		value: typed,
+		label: t.add(typed),
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
+		created: true
+	} : void 0;
+	const [first] = entries.items;
+	const listItems = !created ? entries.items : first !== void 0 && "items" in first ? [{
+		label: "",
+		items: [created],
+		order: -1
+	}, ...entries.items] : [created, ...entries.items];
 	const selectedIcon = selected?.icon && (inputValue === null || inputValue === selected.label) ? selected.icon : null;
 	const input = /* @__PURE__ */ jsx(Combobox.Input, {
 		id: trigger ? void 0 : id,
-		placeholder,
+		placeholder: full && props.maxItems !== void 0 ? t.limitReached(props.maxItems) : placeholder,
+		maxLength: props.multiple ? props.maxLength : void 0,
 		"aria-label": ariaLabel || void 0,
 		"aria-labelledby": ariaLabelledBy,
 		"aria-describedby": ariaDescribedBy,
 		"aria-invalid": ariaInvalid || void 0,
+		"aria-required": ariaRequired || required || void 0,
 		autoComplete: "off",
 		className: trigger ? popupInputClassName : inputClassName
 	});
 	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
 		value: entry,
-		disabled: entry.disabled,
+		disabled: entry.disabled || full && !isChosen(entry),
 		...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" })
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
 		})]
 	}, rowProps.key);
 	const parts = trigger ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
@@ -118,6 +142,7 @@ function Combobox$1(props) {
 			"aria-labelledby": ariaLabelledBy,
 			"aria-describedby": ariaDescribedBy,
 			"aria-invalid": ariaInvalid || void 0,
+			"aria-required": ariaRequired || required || void 0,
 			render: trigger
 		})
 	}), /* @__PURE__ */ jsx(ListPopup, {
@@ -133,7 +158,7 @@ function Combobox$1(props) {
 		renderItem: itemRow
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-testid": "combobox",
-		className: clsx(fieldClassName, className),
+		className: cx(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, {
@@ -142,7 +167,7 @@ function Combobox$1(props) {
 				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" })
+					children: /* @__PURE__ */ jsx(RemoveIcon, { className: "size-3" })
 				})]
 			}, entry.label)) }), input]
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [selectedIcon && /* @__PURE__ */ jsx("span", {
@@ -152,7 +177,7 @@ function Combobox$1(props) {
 			"aria-label": t.showOptions,
 			"data-testid": "combobox-button",
 			className: triggerClassName,
-			children: /* @__PURE__ */ jsx(FaCaretDown, { className: "size-3" })
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
 		})]
 	}), /* @__PURE__ */ jsx(ListPopup, {
 		listRef: list,
@@ -162,7 +187,7 @@ function Combobox$1(props) {
 		renderItem: itemRow
 	})] });
 	const root = {
-		items: entries.items,
+		items: listItems,
 		filter,
 		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
 		itemToStringLabel: entryLabel,
@@ -171,6 +196,7 @@ function Combobox$1(props) {
 		disabled,
 		required,
 		virtualized: true,
+		autoHighlight: Boolean(props.multiple && props.creatable),
 		children: parts
 	};
 	return props.multiple ? /* @__PURE__ */ jsx(Combobox.Root, {
@@ -178,7 +204,10 @@ function Combobox$1(props) {
 		multiple: true,
 		value: toEntries(props.value),
 		defaultValue: toEntries(props.defaultValue),
-		onValueChange: (next) => props.onValueChange?.(next.map((entry) => entry.value))
+		onValueChange: (next) => {
+			setUncontrolledCount(next.length);
+			props.onValueChange?.(next.map((entry) => entry.value));
+		}
 	}) : /* @__PURE__ */ jsx(Combobox.Root, {
 		...root,
 		value: selected,
@@ -187,7 +216,7 @@ function Combobox$1(props) {
 	});
 }
 /** 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 }) {
+function Autocomplete$1({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired }) {
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
@@ -205,7 +234,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		virtualized: true,
 		children: [/* @__PURE__ */ jsxs(Autocomplete.InputGroup, {
 			"data-testid": "combobox",
-			className: clsx(fieldClassName, className),
+			className: cx(fieldClassName, className),
 			children: [/* @__PURE__ */ jsx(Autocomplete.Input, {
 				id,
 				placeholder,
@@ -213,13 +242,14 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				"aria-labelledby": ariaLabelledBy,
 				"aria-describedby": ariaDescribedBy,
 				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || required || 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" })
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3" })
 			})]
 		}), /* @__PURE__ */ jsx(ListPopup, {
 			listRef: list,
@@ -233,7 +263,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		})]
 	});
 }
-var itemClassName = clsx(panelItemClassName, "data-selected:font-medium");
+var itemClassName = cx(panelItemClassName, "data-selected:font-medium");
 function ItemContent({ entry }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center",
@@ -275,30 +305,27 @@ function GroupHeading({ group }) {
 }
 /** 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
-					}) })
-				]
-			})
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		align: "start",
+		sideOffset: 4,
+		className: positionerClassName,
+		children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+			className: cx("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;

package/dist/components/ConfirmModal.js

@@ -1,12 +1,11 @@
 import { useStrings } from "./Provider.js";
-import { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses } from "./ghostButton.js";
+import { Button } from "./Button.js";
 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();
+	const { common } = useStrings();
 	const [pending, setPending] = useState(false);
 	const firedRef = useRef(false);
 	useEffect(() => {
@@ -54,17 +53,18 @@ function ConfirmModal({ open, onClose, title, description, children, confirmLabe
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "mt-5 flex items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
 				onClick: onClose,
 				disabled: pending,
-				className: clsx(ghostButtonClasses, pending && "cursor-wait"),
-				children: cancelLabel ?? strings.modal.cancel
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
+				children: cancelLabel ?? common.cancel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: destructive ? "danger" : "primary",
+				size: "sm",
 				onClick: runConfirm,
-				disabled: confirmDisabled || pending,
-				className: clsx(destructive ? dangerButtonClasses : primaryButtonClasses, "disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-wait"),
+				disabled: confirmDisabled,
+				loading: pending,
 				children: confirmLabel
 			})]
 		})]

package/dist/components/ContextMenu.d.ts

@@ -1,17 +1,11 @@
+import { type FloatingAnchor } from './floating.js';
 import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
-/** Where a menu opens: under an element, such as the button that opened it, or
- *  at a pointer event's point, which then moves with the element it landed on. */
-export type MenuAnchor = Element | {
-    clientX: number;
-    clientY: number;
-    currentTarget?: EventTarget | null;
-};
 export interface OpenMenuOptions {
     search?: MenuSearch | undefined;
     /** Called once the menu closes, or another menu replaces it. */
     onClose?: (() => void) | undefined;
 }
-export type OpenMenu = (at: MenuAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
+export type OpenMenu = (at: FloatingAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
 /**
  * One menu that any number of rows, buttons or a canvas open with their own
  * items, so a long list holds a single menu rather than one per row. Render