@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/environment-variables.js

@@ -3,9 +3,9 @@ import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
 import { DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, collectEnvironmentVariables, rowsToEnvFileText } from "./lib/env-file.js";
 import { useEnvironmentVariables } from "./hooks/use-environment-variables.js";
+import { InputGroup, InputGroupAddon } from "./ui/input-group.js";
 import { Input } from "./ui/input.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "./ui/input-group.js";
-import { createContext, use, useId } from "react";
+import { createContext, use, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangleIcon, EyeIcon, EyeOffIcon, FileUpIcon, PlusIcon, RotateCcwIcon, SaveIcon, Trash2Icon } from "lucide-react";
 //#region src/environment-variables.tsx
@@ -15,18 +15,28 @@ function useEnvironmentVariablesContext(componentName) {
 	if (!context) throw new Error(`${componentName} must be used inside <EnvironmentVariables.Root>.`);
 	return context;
 }
-function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false, rowErrors, keyLabel = "Key", valueLabel = "Value", keyPlaceholder = "OPENAI_API_KEY", valuePlaceholder = "sk-...", duplicateKeyMessage = DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, onSubmit, className, children, ...props }) {
-	function handleSubmit(event) {
+function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false, rowErrors, keyLabel = "Key", valueLabel = "Value", keyPlaceholder = "OPENAI_API_KEY", valuePlaceholder = "sk-…", duplicateKeyMessage = DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE, revealValueLabel = (key) => `Show value for ${key}`, onSubmit, className, children, ...props }) {
+	const pendingRef = useRef(false);
+	const [pending, setPending] = useState(false);
+	async function handleSubmit(event) {
 		if (event.defaultPrevented || !onSubmit) return;
 		event.preventDefault();
-		if (editor.hasDuplicateKeys) return;
+		if (pendingRef.current || editor.hasDuplicateKeys) return;
 		const rows = editor.getRowsForSubmit();
-		onSubmit({
+		const payload = {
 			rows,
 			variables: collectEnvironmentVariables(rows),
 			envFileText: rowsToEnvFileText(rows),
 			reset: () => editor.resetRows(rows)
-		});
+		};
+		pendingRef.current = true;
+		setPending(true);
+		try {
+			await onSubmit(payload);
+		} finally {
+			pendingRef.current = false;
+			setPending(false);
+		}
 	}
 	return /* @__PURE__ */ jsx(EnvironmentVariablesContext.Provider, {
 		value: {
@@ -38,7 +48,9 @@ function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false,
 			valueLabel,
 			keyPlaceholder,
 			valuePlaceholder,
-			duplicateKeyMessage
+			duplicateKeyMessage,
+			revealValueLabel,
+			pending
 		},
 		children: /* @__PURE__ */ jsx("form", {
 			"data-control-ui": "environment-variables",
@@ -47,6 +59,7 @@ function EnvironmentVariablesRoot({ editor, disabled = false, readOnly = false,
 			"data-surface": "panel",
 			"data-disabled": disabled ? "true" : void 0,
 			"data-readonly": readOnly ? "true" : void 0,
+			"aria-busy": pending || void 0,
 			className: cn("flex min-w-0 flex-col", className),
 			onSubmit: handleSubmit,
 			...props,
@@ -157,6 +170,7 @@ function EnvironmentVariablesUploadButton({ inputLabel = "Import .env file", chi
 		type: "file",
 		accept: ".env,text/plain",
 		className: "sr-only",
+		tabIndex: -1,
 		disabled: isDisabled,
 		"aria-label": inputLabel,
 		onChange: handleChange
@@ -203,7 +217,7 @@ function EnvironmentVariablesRows({ rowErrors, className, children, ...props })
 	});
 }
 function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props }) {
-	const { editor, disabled, readOnly, rowErrors: contextRowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage } = useEnvironmentVariablesContext("EnvironmentVariables.Row");
+	const { editor, disabled, readOnly, rowErrors: contextRowErrors, keyLabel, valueLabel, keyPlaceholder, valuePlaceholder, duplicateKeyMessage, revealValueLabel } = useEnvironmentVariablesContext("EnvironmentVariables.Row");
 	const resolvedRowErrors = rowErrors ?? contextRowErrors;
 	const keyError = resolvedRowErrors?.[index]?.key ?? (editor.rowHasDuplicateKey(index) ? duplicateKeyMessage : null);
 	const valueError = resolvedRowErrors?.[index]?.value;
@@ -211,8 +225,11 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 	const rowId = editor.getRowId(index);
 	const keyInputId = `${rowId}-key`;
 	const valueInputId = `${rowId}-value`;
-	const revealValueLabel = editor.isValueRevealed(index) ? "Hide value" : "Show value";
-	const removeRowLabel = `Remove environment variable ${row.key.trim() || index + 1}`;
+	const keyErrorId = `${keyInputId}-error`;
+	const valueErrorId = `${valueInputId}-error`;
+	const rowName = row.key.trim() || `row ${index + 1}`;
+	const valueRevealed = editor.isValueRevealed(index);
+	const removeRowLabel = `Remove environment variable ${rowName}`;
 	function handlePaste(event) {
 		if (editor.handlePaste(index, event.clipboardData.getData("text"))) event.preventDefault();
 	}
@@ -235,19 +252,18 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 						children: keyLabel
 					}),
 					/* @__PURE__ */ jsx(Input, {
-						"data-control-ui": "environment-variables",
-						"data-control-family": "environment-variables",
-						"data-slot": "key-input",
 						id: keyInputId,
 						size: "sm",
 						value: row.key,
 						placeholder: keyPlaceholder,
 						disabled: isDisabled,
 						"aria-invalid": Boolean(keyError),
+						"aria-describedby": keyError ? keyErrorId : void 0,
 						onChange: (event) => editor.updateRow(index, { key: event.target.value }),
 						onPaste: handlePaste
 					}),
 					keyError ? /* @__PURE__ */ jsx("p", {
+						id: keyErrorId,
 						"data-control-ui": "environment-variables",
 						"data-control-family": "environment-variables",
 						"data-slot": "field-error",
@@ -267,35 +283,30 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 						children: valueLabel
 					}),
 					/* @__PURE__ */ jsxs(InputGroup, {
-						"data-control-ui": "environment-variables",
-						"data-control-family": "environment-variables",
-						"data-slot": "value-group",
-						"data-invalid": valueError ? "true" : void 0,
 						size: "sm",
-						children: [/* @__PURE__ */ jsx(InputGroupInput, {
-							"data-control-ui": "environment-variables",
-							"data-control-family": "environment-variables",
-							"data-slot": "value-input",
+						children: [/* @__PURE__ */ jsx(Input, {
 							id: valueInputId,
 							value: row.value,
 							placeholder: valuePlaceholder,
 							disabled: isDisabled,
 							"aria-invalid": Boolean(valueError),
-							type: editor.isValueRevealed(index) ? "text" : "password",
+							"aria-describedby": valueError ? valueErrorId : void 0,
+							type: valueRevealed ? "text" : "password",
 							onChange: (event) => editor.updateRow(index, { value: event.target.value }),
 							onPaste: handlePaste
 						}), /* @__PURE__ */ jsx(InputGroupAddon, {
-							className: "pr-1",
+							className: "pe-1",
 							children: /* @__PURE__ */ jsx(Button, {
 								type: "button",
 								variant: "quiet",
 								size: "sm",
 								iconOnly: true,
 								disabled: isDisabled,
-								"aria-label": revealValueLabel,
-								title: revealValueLabel,
+								"aria-label": revealValueLabel(rowName),
+								"aria-pressed": valueRevealed,
+								title: revealValueLabel(rowName),
 								onClick: () => editor.toggleValueVisibility(index),
-								children: editor.isValueRevealed(index) ? /* @__PURE__ */ jsx(EyeOffIcon, {
+								children: valueRevealed ? /* @__PURE__ */ jsx(EyeOffIcon, {
 									"aria-hidden": "true",
 									className: "size-3.5"
 								}) : /* @__PURE__ */ jsx(EyeIcon, {
@@ -306,6 +317,7 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 						})]
 					}),
 					valueError ? /* @__PURE__ */ jsx("p", {
+						id: valueErrorId,
 						"data-control-ui": "environment-variables",
 						"data-control-family": "environment-variables",
 						"data-slot": "field-error",
@@ -322,7 +334,7 @@ function EnvironmentVariablesRow({ row, index, rowErrors, className, ...props })
 				disabled,
 				"aria-label": removeRowLabel,
 				title: "Remove variable",
-				className: "absolute top-2 right-1 sm:static sm:justify-self-end sm:self-start",
+				className: "absolute top-2 end-1 sm:static sm:justify-self-end sm:self-start",
 				onClick: () => editor.removeRow(index),
 				children: /* @__PURE__ */ jsx(Trash2Icon, {
 					"aria-hidden": "true",
@@ -371,14 +383,14 @@ function EnvironmentVariablesResetButton({ children = "Reset", variant = "quiet"
 	});
 }
 function EnvironmentVariablesSubmitButton({ children = "Save", variant = "solid", tone = "primary", size = "sm", disabled, ...props }) {
-	const { editor, disabled: contextDisabled, readOnly } = useEnvironmentVariablesContext("EnvironmentVariables.SubmitButton");
+	const { editor, disabled: contextDisabled, readOnly, pending } = useEnvironmentVariablesContext("EnvironmentVariables.SubmitButton");
 	if (readOnly) return null;
 	return /* @__PURE__ */ jsxs(Button, {
 		type: "submit",
 		variant,
 		tone,
 		size,
-		disabled: disabled ?? (contextDisabled || editor.hasDuplicateKeys),
+		disabled: disabled ?? (contextDisabled || pending || editor.hasDuplicateKeys),
 		...props,
 		children: [/* @__PURE__ */ jsx(SaveIcon, {
 			"aria-hidden": "true",
@@ -449,7 +461,7 @@ function EnvironmentVariablesReadOnlyList({ rows, emptyMessage = "No environment
 		}))
 	});
 }
-function EnvironmentVariablesReadOnlyItem({ name, value = "********", revealed = false, className, ...props }) {
+function EnvironmentVariablesReadOnlyItem({ name, value, revealed = false, hiddenValueLabel = "Hidden value", className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "environment-variables",
 		"data-control-family": "environment-variables",
@@ -461,13 +473,21 @@ function EnvironmentVariablesReadOnlyItem({ name, value = "********", revealed =
 			"data-control-family": "environment-variables",
 			"data-slot": "readonly-key",
 			className: "min-w-0 truncate",
+			title: typeof name === "string" ? name : void 0,
 			children: name
 		}), /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "environment-variables",
 			"data-control-family": "environment-variables",
 			"data-slot": "readonly-value",
 			className: "min-w-0 truncate",
-			children: revealed ? value : "********"
+			title: revealed && typeof value === "string" ? value : void 0,
+			children: revealed ? value : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "••••••••"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: hiddenValueLabel
+			})] })
 		})]
 	});
 }

package/dist/filter-bar/context.d.ts

@@ -0,0 +1,32 @@
+import { FilterBarDraft, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarScalar, FilterBarStage, FilterBarValue } from "./types.js";
+import { CSSProperties, KeyboardEvent } from "react";
+//#region src/filter-bar/context.d.ts
+export type FilterBarExit = {
+  item: FilterBarItem;
+  style: CSSProperties;
+};
+export type FilterBarContextValue = {
+  fields: readonly FilterBarField[];
+  operators: readonly FilterBarOperator[];
+  items: readonly FilterBarItem[];
+  draft: FilterBarDraft | null;
+  exits: FilterBarExit[];
+  disabled: boolean;
+  readOnly: boolean;
+  register: (key: string, element: HTMLElement | null) => void;
+  start: (owner: string, anchor: HTMLElement, stage?: FilterBarStage, item?: FilterBarItem, query?: string) => void;
+  close: (restoreFocus?: boolean) => void;
+  back: () => void;
+  setQuery: (query: string) => void;
+  selectField: (fieldId: string) => void;
+  selectOperator: (operatorId: string) => void;
+  selectValues: (values: FilterBarScalar[]) => void;
+  commit: (value: FilterBarValue) => void;
+  remove: (item: FilterBarItem) => void;
+  clear: () => void;
+  releaseExit: (id: string) => void;
+  navigate: (event: KeyboardEvent<HTMLElement>, itemId?: string, part?: string) => void;
+};
+export declare const FilterBarContext: import("react").Context<FilterBarContextValue | null>;
+export declare function useFilterBarContext(): FilterBarContextValue;
+//#endregion

package/dist/filter-bar/context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/filter-bar/context.tsx
+const FilterBarContext = createContext(null);
+function useFilterBarContext() {
+	const context = use(FilterBarContext);
+	if (!context) throw new Error("FilterBar parts must be used inside FilterBar.Root.");
+	return context;
+}
+//#endregion
+export { FilterBarContext, useFilterBarContext };

package/dist/filter-bar/editor.d.ts

@@ -0,0 +1,14 @@
+import { ComboboxInputProps } from "../ui/combobox.js";
+import { ReactNode, RefObject } from "react";
+//#region src/filter-bar/editor.d.ts
+export declare function FilterBarEditor({ owner, mode, anchorRef, children }: {
+  owner: string;
+  mode: "input" | "button";
+  anchorRef?: RefObject<HTMLInputElement | null>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FilterBarInlineInput({ owner, inputRef, className, ...props }: Omit<ComboboxInputProps, "ref"> & {
+  owner: string;
+  inputRef: RefObject<HTMLInputElement | null>;
+}): import("react").JSX.Element;
+//#endregion

package/dist/filter-bar/editor.js

@@ -0,0 +1,216 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { useFilterBarContext } from "./context.js";
+import { allowsCustomValue, fieldOperators, fieldOptions, parseCustomValue } from "./model.js";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "../ui/combobox.js";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-bar/editor.tsx
+function valueChoice(value, label) {
+	return {
+		id: `${typeof value}:${value}`,
+		value,
+		label
+	};
+}
+function sameChoice(first, second) {
+	return first.id === second.id;
+}
+function valueChoices(field, query) {
+	const choices = fieldOptions(field).map((option) => ({
+		...valueChoice(option.value, option.label),
+		icon: option.icon,
+		disabled: option.disabled
+	}));
+	const customValue = allowsCustomValue(field) ? parseCustomValue(field, query) : void 0;
+	if (customValue !== void 0 && !choices.some((choice) => choice.value === customValue)) choices.push(valueChoice(customValue, `Use “${customValue}”`));
+	return choices;
+}
+function editorChoices(context, draft) {
+	if (!draft || draft.stage === "field") return context.fields.filter((candidate) => fieldOperators(candidate, context.operators).length > 0).map((candidate) => ({
+		id: candidate.id,
+		label: candidate.label,
+		icon: candidate.icon
+	}));
+	const field = context.fields.find((candidate) => candidate.id === draft.fieldId);
+	if (!field) return [];
+	if (draft.stage === "operator") return fieldOperators(field, context.operators).map((operator) => ({
+		id: operator.id,
+		label: operator.label,
+		ariaLabel: operator.ariaLabel
+	}));
+	return valueChoices(field, draft.query);
+}
+function searchLabel(stage, field) {
+	if (stage === "field") return "Filter field";
+	if (stage === "operator") return "Filter operator";
+	return `${field?.label ?? "Filter"} value`;
+}
+function statusId(owner) {
+	return `${owner}-filter-status`;
+}
+function handleSelection(context, draft, choice) {
+	if (!choice || !draft) return;
+	const field = context.fields.find((candidate) => candidate.id === draft.fieldId);
+	if (draft.stage === "value" && (field?.loading || field?.error)) return;
+	if (Array.isArray(choice)) context.selectValues(choice.flatMap((selected) => selected.value === void 0 ? [] : [selected.value]));
+	else if (draft.stage === "field") context.selectField(choice.id);
+	else if (draft.stage === "operator") context.selectOperator(choice.id);
+	else if (choice.value !== void 0) context.commit(choice.value);
+}
+function handleEditorKeyDown(context, draft, event) {
+	if (event.nativeEvent.isComposing) return false;
+	const backwards = event.key === "Escape" || event.key === "Backspace" && draft?.query === "";
+	if (draft && backwards) {
+		event.preventDefault();
+		event.stopPropagation();
+		context.back();
+		return true;
+	}
+	const operator = context.operators.find((candidate) => candidate.id === draft?.operatorId);
+	const field = context.fields.find((candidate) => candidate.id === draft?.fieldId);
+	if (!(draft?.stage === "value" && operator?.arity === "many" && event.key === "Enter" && (event.metaKey || event.ctrlKey)) || !draft || draft.values.length === 0 || field?.loading || field?.error) return false;
+	event.preventDefault();
+	context.commit(draft.values);
+	return true;
+}
+function EditorOptions({ field, invalidNumber, owner }) {
+	if (field?.loading || field?.error) return /* @__PURE__ */ jsx("div", {
+		id: statusId(owner),
+		className: "p-3 text-caption",
+		children: field.error ?? "Loading values…"
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: invalidNumber ? "Enter a number, like 42 or 3.5." : "No matching options." }), /* @__PURE__ */ jsx(ComboboxList, { children: (choice) => /* @__PURE__ */ jsx(ComboboxItem, {
+		value: choice,
+		disabled: choice.disabled,
+		"aria-label": choice.ariaLabel,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [choice.icon, /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				title: choice.label,
+				children: choice.label
+			})]
+		})
+	}, choice.id) })] });
+}
+function handleOpenChange(context, draft, anchorRef, owner, open, eventDetails) {
+	if (open && !draft && anchorRef?.current && eventDetails.reason !== "input-change") context.start(owner, anchorRef.current);
+	if (open || !draft) return;
+	if (eventDetails.reason === "item-press" || eventDetails.reason === "escape-key") eventDetails.cancel();
+	else context.close(false);
+}
+function editorView(context, draft) {
+	const field = context.fields.find((candidate) => candidate.id === draft?.fieldId);
+	const operator = context.operators.find((candidate) => candidate.id === draft?.operatorId);
+	const stage = draft?.stage ?? "field";
+	const many = stage === "value" && operator?.arity === "many";
+	const query = draft?.query ?? "";
+	const choices = editorChoices(context, draft);
+	const selected = (draft?.values ?? []).map((value) => choices.find((choice) => choice.value === value) ?? valueChoice(value, field?.formatValue?.(value) ?? String(value)));
+	const customNumber = field?.type === "number" && allowsCustomValue(field);
+	return {
+		field,
+		stage,
+		many,
+		query,
+		choices,
+		selected,
+		invalidNumber: stage === "value" && Boolean(customNumber) && query.trim() !== "" && field !== void 0 && parseCustomValue(field, query) === void 0,
+		remote: stage === "value" && field?.optionsMode === "remote",
+		unavailable: stage === "value" && Boolean(field?.loading || field?.error),
+		label: searchLabel(stage, field),
+		described: stage === "value" && Boolean(field?.error)
+	};
+}
+function FilterBarEditor({ owner, mode, anchorRef, children }) {
+	const context = useFilterBarContext();
+	const searchRef = useRef(null);
+	const draft = context.draft?.owner === owner ? context.draft : null;
+	const { field, stage, many, query, choices, selected, invalidNumber, remote, unavailable, label, described } = editorView(context, draft);
+	const canCommitMany = selected.length > 0 && !unavailable && !context.disabled && !context.readOnly;
+	return /* @__PURE__ */ jsxs(Combobox, {
+		items: choices,
+		multiple: many,
+		value: many ? selected : null,
+		inputValue: query,
+		open: draft !== null,
+		disabled: context.disabled,
+		readOnly: context.readOnly,
+		modal: false,
+		isItemEqualToValue: sameChoice,
+		filter: remote ? null : void 0,
+		onValueChange: (choice) => handleSelection(context, draft, choice),
+		onInputValueChange: (nextQuery, eventDetails) => {
+			if (eventDetails.reason !== "input-change" && eventDetails.reason !== "input-clear") return;
+			if (draft) context.setQuery(nextQuery);
+			else if (anchorRef?.current) context.start(owner, anchorRef.current, "field", void 0, nextQuery);
+		},
+		onOpenChange: (open, eventDetails) => handleOpenChange(context, draft, anchorRef, owner, open, eventDetails),
+		children: [children, /* @__PURE__ */ jsxs(ComboboxContent, {
+			anchor: draft?.anchor,
+			initialFocus: mode === "input" ? false : searchRef,
+			finalFocus: false,
+			className: "w-72 max-h-(--available-height) overflow-y-auto",
+			onKeyDown: (event) => {
+				if (event.key === "Escape" && !event.defaultPrevented) {
+					event.preventDefault();
+					context.back();
+				}
+			},
+			children: [
+				mode === "button" && /* @__PURE__ */ jsx("div", {
+					className: "p-2",
+					children: /* @__PURE__ */ jsx(ComboboxInput, {
+						ref: searchRef,
+						size: "sm",
+						"aria-label": label,
+						"aria-describedby": described ? statusId(owner) : void 0,
+						placeholder: label,
+						inputMode: field?.type === "number" && stage === "value" ? "decimal" : void 0,
+						onKeyDown: (event) => handleEditorKeyDown(context, draft, event)
+					})
+				}),
+				/* @__PURE__ */ jsx(EditorOptions, {
+					field: stage === "value" ? field : void 0,
+					invalidNumber,
+					owner
+				}),
+				many && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end p-2",
+					children: /* @__PURE__ */ jsx(Button, {
+						disabled: !canCommitMany,
+						onClick: () => context.commit(draft?.values ?? []),
+						children: "Apply"
+					})
+				})
+			]
+		})]
+	});
+}
+function FilterBarInlineInput({ owner, inputRef, className, ...props }) {
+	const context = useFilterBarContext();
+	const draft = context.draft?.owner === owner ? context.draft : null;
+	const { label, described } = editorView(context, draft);
+	function handleKeyDown(event) {
+		props.onKeyDown?.(event);
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		if (handleEditorKeyDown(context, draft, event) || event.currentTarget.value !== "") return;
+		const last = context.items.at(-1);
+		if (event.key === "Backspace" && !draft && last) {
+			event.preventDefault();
+			context.remove(last);
+		} else context.navigate(event);
+	}
+	return /* @__PURE__ */ jsx(ComboboxInput, {
+		ref: inputRef,
+		size: "sm",
+		className,
+		...props,
+		"aria-label": draft ? label : props["aria-label"],
+		"aria-describedby": described ? statusId(owner) : props["aria-describedby"],
+		onKeyDown: handleKeyDown
+	});
+}
+//#endregion
+export { FilterBarEditor, FilterBarInlineInput };

package/dist/filter-bar/model.d.ts

@@ -0,0 +1,10 @@
+import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarScalar } from "./types.js";
+//#region src/filter-bar/model.d.ts
+export declare function fieldOperators(field: FilterBarField, operators: readonly FilterBarOperator[]): FilterBarOperator[];
+export declare function fieldOptions(field: FilterBarField): readonly FilterBarOption[];
+export declare function parseCustomValue(field: FilterBarField, query: string): FilterBarScalar | undefined;
+export declare function allowsCustomValue(field: FilterBarField): boolean;
+export declare function formatFilterValue(item: FilterBarItem, field: FilterBarField | undefined): string;
+export declare function describeFilter(item: FilterBarItem, fields: readonly FilterBarField[], operators: readonly FilterBarOperator[]): string;
+export declare function filterNavigationKeys(items: readonly FilterBarItem[]): string[];
+//#endregion

package/dist/filter-bar/model.js

@@ -0,0 +1,57 @@
+//#region src/filter-bar/model.ts
+const booleanOptions = [{
+	value: true,
+	label: "True"
+}, {
+	value: false,
+	label: "False"
+}];
+function fieldOperators(field, operators) {
+	return operators.filter((operator) => !field.operators || field.operators.includes(operator.id));
+}
+function fieldOptions(field) {
+	return field.options ?? (field.type === "boolean" ? booleanOptions : []);
+}
+function parseCustomValue(field, query) {
+	if (!query.trim()) return void 0;
+	if (field.type === "number") {
+		if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(query.trim())) return void 0;
+		const number = Number(query);
+		return Number.isFinite(number) ? number : void 0;
+	}
+	if (field.type === "boolean") {
+		if (query.toLowerCase() === "true") return true;
+		if (query.toLowerCase() === "false") return false;
+		return;
+	}
+	return query.trim();
+}
+function allowsCustomValue(field) {
+	return field.allowCustomValue ?? (field.options === void 0 && field.type !== "boolean" && field.optionsMode !== "remote");
+}
+function formatFilterValue(item, field) {
+	if (item.value === null) return "";
+	return (Array.isArray(item.value) ? item.value : [item.value]).map((value) => field?.formatValue?.(value) ?? fieldOptionsForLabel(field, value)).join(", ");
+}
+function fieldOptionsForLabel(field, value) {
+	return (field ? fieldOptions(field).find((option) => option.value === value)?.label : void 0) ?? String(value);
+}
+function describeFilter(item, fields, operators) {
+	const field = fields.find((candidate) => candidate.id === item.fieldId);
+	const operator = operators.find((candidate) => candidate.id === item.operatorId);
+	return [
+		field?.label ?? item.fieldId,
+		operator?.ariaLabel ?? operator?.label,
+		formatFilterValue(item, field)
+	].filter(Boolean).join(" ");
+}
+function filterNavigationKeys(items) {
+	return items.flatMap((item) => [
+		"field",
+		"operator",
+		...item.value === null ? [] : ["value"],
+		"remove"
+	].map((segment) => `${item.id}:${segment}`));
+}
+//#endregion
+export { allowsCustomValue, describeFilter, fieldOperators, fieldOptions, filterNavigationKeys, formatFilterValue, parseCustomValue };

package/dist/filter-bar/motion.d.ts

@@ -0,0 +1,10 @@
+//#region src/filter-bar/motion.d.ts
+export declare function filterMotionEnabled(element: HTMLElement): boolean;
+export declare function useFilterBarMotion(): {
+  register(key: string, element: HTMLElement | null): void;
+  capture(): void;
+  cancel: () => void;
+  play(): void;
+  rootRef: import("react").RefObject<HTMLFieldSetElement | null>;
+};
+//#endregion

package/dist/filter-bar/motion.js

@@ -0,0 +1,84 @@
+"use client";
+import { prefersReducedMotion, readDurationMs } from "../lib/motion.js";
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/filter-bar/motion.ts
+function filterMotionEnabled(element) {
+	return !prefersReducedMotion(element) && readDurationMs(element, "--duration-fast") > 0;
+}
+function animateMovement(element, before, after, duration, easing) {
+	const x = before.left - after.left;
+	const y = before.top - after.top;
+	if (Math.abs(x) < 1 && Math.abs(y) < 1) return null;
+	return element.animate([{ transform: `translate(${x}px, ${y}px)` }, { transform: "translate(0, 0)" }], {
+		duration,
+		easing
+	});
+}
+function animateLayout(elements, before, after, animations, duration, easing) {
+	for (const [key, bounds] of after) {
+		const origin = before.get(key);
+		const element = elements.get(key);
+		if (!origin || !element) continue;
+		const animation = animateMovement(element, origin, bounds, duration, easing);
+		if (animation) animations.set(key, animation);
+	}
+}
+function useFilterBarMotion() {
+	const rootRef = useRef(null);
+	const [motion] = useState(() => {
+		const elements = /* @__PURE__ */ new Map();
+		const animations = /* @__PURE__ */ new Map();
+		let captured = null;
+		function measure() {
+			return new Map([...elements].map(([key, element]) => [key, element.getBoundingClientRect()]));
+		}
+		function cancel() {
+			for (const animation of animations.values()) animation.cancel();
+			animations.clear();
+		}
+		return {
+			register(key, element) {
+				if (element) elements.set(key, element);
+				else elements.delete(key);
+			},
+			capture() {
+				captured = measure();
+			},
+			cancel,
+			play() {
+				const root = rootRef.current;
+				if (!root || !filterMotionEnabled(root)) {
+					cancel();
+					captured = null;
+					return;
+				}
+				if (!captured) return;
+				const origin = captured;
+				captured = null;
+				cancel();
+				const next = measure();
+				const duration = readDurationMs(root, "--duration-fast");
+				const easing = getComputedStyle(root).getPropertyValue("--ease-standard").trim();
+				animateLayout(elements, origin, next, animations, duration, easing);
+			}
+		};
+	});
+	useLayoutEffect(() => motion.play());
+	useLayoutEffect(() => {
+		const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+		function cancelReducedMotion() {
+			if (media.matches) motion.cancel();
+		}
+		media.addEventListener("change", cancelReducedMotion);
+		return () => {
+			media.removeEventListener("change", cancelReducedMotion);
+			motion.cancel();
+		};
+	}, [motion]);
+	return {
+		rootRef,
+		...motion
+	};
+}
+//#endregion
+export { filterMotionEnabled, useFilterBarMotion };