@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/filter-bar/filter-bar.js

@@ -0,0 +1,310 @@
+import SvgCheck from "../../vendor/@material-design-icons/svg/outlined/check.js";
+import SvgFilterAlt from "../../vendor/@material-design-icons/svg/outlined/filter_alt.js";
+import SvgFilterAltOff from "../../vendor/@material-design-icons/svg/outlined/filter_alt_off.js";
+import SvgRestore from "../../vendor/@material-design-icons/svg/outlined/restore.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { Badge } from "../badge/badge.js";
+import { Button } from "../button/button.js";
+import { Drawer } from "../drawer/drawer.js";
+import { SearchField } from "../search-field/search-field.js";
+import filter_bar_module_default from "./filter-bar.module.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/filter-bar/filter-bar.tsx
+var FilterBarContext = createContext(null);
+var useFilterBar = () => {
+	return useRequiredContext(FilterBarContext, "FilterBar.* must be rendered inside <FilterBar.Root>.");
+};
+var Root = (t0) => {
+	const $ = c(8);
+	const { filters, children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(filter_bar_module_default.bar, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("search", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== filters || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(FilterBarContext, {
+			value: filters,
+			children: t2
+		});
+		$[5] = filters;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+};
+/**
+* The live search input. Search is not part of the Apply/Cancel bargain: it
+* narrows as you type, debounced by the view. Its label is hidden; the glyph
+* and the placeholder carry it for anyone who can see them.
+*/
+var Search = (t0) => {
+	const $ = c(8);
+	const { label, clearLabel, className } = t0;
+	const { search, setSearch } = useFilterBar();
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(filter_bar_module_default.search, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== clearLabel || $[3] !== label || $[4] !== search || $[5] !== setSearch || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(SearchField, {
+			label,
+			labelHidden: true,
+			optionalLabel: "",
+			clearLabel,
+			placeholder: label,
+			value: search,
+			onValueChange: setSearch,
+			className: t1
+		});
+		$[2] = clearLabel;
+		$[3] = label;
+		$[4] = search;
+		$[5] = setSearch;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The apply-gated half: a trigger badged with the applied-filter count, and a
+* drawer of filter fields over Apply, which commits the draft. Dismissing the
+* drawer discards the draft, and Reset puts it back to the initial filters
+* without closing.
+*/
+var FilterDrawer = (t0) => {
+	const $ = c(41);
+	const { children, swipeDirection, triggerLabel, title, closeLabel, resetLabel, applyLabel, className } = t0;
+	const { activeCount, apply, cancel, reset } = useFilterBar();
+	const [open, setOpen] = useState(false);
+	const appliedRef = useRef(false);
+	let t1;
+	if ($[0] !== apply) {
+		t1 = () => {
+			appliedRef.current = true;
+			apply();
+			setOpen(false);
+		};
+		$[0] = apply;
+		$[1] = t1;
+	} else t1 = $[1];
+	const handleApply = t1;
+	let t2;
+	if ($[2] !== cancel) {
+		t2 = (next) => {
+			if (!next) {
+				if (!appliedRef.current) cancel();
+				appliedRef.current = false;
+			}
+			setOpen(next);
+		};
+		$[2] = cancel;
+		$[3] = t2;
+	} else t2 = $[3];
+	const handleOpenChange = t2;
+	let t3;
+	if ($[4] !== activeCount) {
+		t3 = activeCount > 0 && /* @__PURE__ */ jsx(Badge, {
+			tone: "neutral",
+			variant: "solid",
+			children: activeCount
+		});
+		$[4] = activeCount;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3 || $[7] !== triggerLabel) {
+		t4 = /* @__PURE__ */ jsx(Drawer.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
+			variant: "secondary",
+			icon: SvgFilterAlt,
+			children: [triggerLabel, t3]
+		}) });
+		$[6] = t3;
+		$[7] = triggerLabel;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Drawer.Backdrop, {});
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== title) {
+		t6 = /* @__PURE__ */ jsx(Drawer.Title, { children: title });
+		$[10] = title;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== closeLabel) {
+		t7 = /* @__PURE__ */ jsx(Drawer.CloseButton, { label: closeLabel });
+		$[12] = closeLabel;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Drawer.Header, { children: [t6, t7] });
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== className) {
+		t9 = clsx(filter_bar_module_default.fields, className);
+		$[17] = className;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== children || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: t9,
+			children
+		});
+		$[19] = children;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== reset || $[23] !== resetLabel) {
+		t11 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			icon: SvgRestore,
+			onClick: reset,
+			children: resetLabel
+		});
+		$[22] = reset;
+		$[23] = resetLabel;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== applyLabel || $[26] !== handleApply) {
+		t12 = /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			icon: SvgCheck,
+			onClick: handleApply,
+			children: applyLabel
+		});
+		$[25] = applyLabel;
+		$[26] = handleApply;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] !== t11 || $[29] !== t12) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: filter_bar_module_default.footer,
+			children: [t11, t12]
+		});
+		$[28] = t11;
+		$[29] = t12;
+		$[30] = t13;
+	} else t13 = $[30];
+	let t14;
+	if ($[31] !== t10 || $[32] !== t13 || $[33] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(Drawer.Portal, { children: [t5, /* @__PURE__ */ jsx(Drawer.Viewport, { children: /* @__PURE__ */ jsx(Drawer.Popup, { children: /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+			t8,
+			t10,
+			t13
+		] }) }) })] });
+		$[31] = t10;
+		$[32] = t13;
+		$[33] = t8;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== handleOpenChange || $[36] !== open || $[37] !== swipeDirection || $[38] !== t14 || $[39] !== t4) {
+		t15 = /* @__PURE__ */ jsxs(Drawer.Root, {
+			open,
+			onOpenChange: handleOpenChange,
+			swipeDirection,
+			children: [t4, t14]
+		});
+		$[35] = handleOpenChange;
+		$[36] = open;
+		$[37] = swipeDirection;
+		$[38] = t14;
+		$[39] = t4;
+		$[40] = t15;
+	} else t15 = $[40];
+	return t15;
+};
+/**
+* The applied-filter row: the chips for what is narrowing the list, with the
+* clear-everything control inline at their end. That control clears the search
+* as well as the committed filters.
+*/
+var Active = (t0) => {
+	const $ = c(9);
+	const { children, clearAllLabel, className } = t0;
+	const { isNarrowed, clearAll } = useFilterBar();
+	if (!isNarrowed) return null;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(filter_bar_module_default.active, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== clearAll || $[3] !== clearAllLabel) {
+		t2 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			icon: SvgFilterAltOff,
+			onClick: clearAll,
+			children: clearAllLabel
+		});
+		$[2] = clearAll;
+		$[3] = clearAllLabel;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== children || $[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [children, t2]
+		});
+		$[5] = children;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+/**
+* Composite filter surface. `Root` holds a `useFilterView` in context and lays
+* out the parts: `Search` and `Drawer` share the leading row, and `Active`, the
+* applied-filter row, takes a line of its own.
+*
+* @example
+* <FilterBar.Root filters={filters}>
+* 	<FilterBar.Search label="Search clients" clearLabel="Clear search" />
+* 	<FilterBar.Drawer swipeDirection={narrow ? "down" : "right"} triggerLabel="Filters" title="Filter clients" closeLabel="Close" resetLabel="Reset" applyLabel="Apply">
+* 		<ClientFilterFields filters={filters} />
+* 	</FilterBar.Drawer>
+* 	<FilterBar.Active clearAllLabel="Clear filters">
+* 		<ActiveFilters filters={filters} describe={describers} label="Active filters" removeLabel="Remove" />
+* 	</FilterBar.Active>
+* </FilterBar.Root>
+*/
+var FilterBar = {
+	Root,
+	Search,
+	Drawer: FilterDrawer,
+	Active
+};
+export { FilterBar };

package/dist/components/filter-bar/filter-bar.module.js

@@ -0,0 +1,14 @@
+import './filter-bar.css';// src/components/filter-bar/filter-bar.module.scss
+var bar = "_bar_1j1i8_3";
+var search = "_search_1j1i8_10";
+var active = "_active_1j1i8_14";
+var fields = "_fields_1j1i8_21";
+var footer = "_footer_1j1i8_27";
+var filter_bar_module_default = {
+	bar,
+	search,
+	active,
+	fields,
+	footer
+};
+export { active, bar, filter_bar_module_default as default, fields, footer, search };

package/dist/components/filter-bar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./filter-bar.tsx";
+export { type FilterView, useFilterView, } from "./use-filter-view.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/filter-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filter-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EACN,KAAK,UAAU,EACf,aAAa,GACb,MAAM,sBAAsB,CAAC"}

package/dist/components/filter-bar/index.js

@@ -0,0 +1,3 @@
+import { FilterBar } from "./filter-bar.js";
+import { useFilterView } from "./use-filter-view.js";
+export { FilterBar, useFilterView };

package/dist/components/filter-bar/use-filter-view.d.ts

@@ -0,0 +1,87 @@
+import type { StoredValue } from "../../lib/table-storage.ts";
+/**
+ * Whether a filter value narrows the view: present, and not an unchecked
+ * boolean, a blank string or an empty multi-select.
+ *
+ * @example
+ * isActiveFilterValue("open") // true
+ * isActiveFilterValue([]) // false
+ */
+export declare const isActiveFilterValue: <T>(value: T) => value is NonNullable<T>;
+/**
+ * Counts the fields in `filters` that hold an active (present + non-empty)
+ * value. Drives the applied-filter badge on the {@link FilterBar} trigger.
+ *
+ * @example
+ * countActiveFilters({ status: "open", q: "" }) // 1
+ */
+export declare const countActiveFilters: (filters: object) => number;
+/**
+ * The same filter set with every field emptied to `undefined`.
+ *
+ * @example
+ * clearFilterValues({ status: "open", dateFrom: "2026-01-01" })
+ * // -> { status: undefined, dateFrom: undefined }
+ */
+export declare const clearFilterValues: <TFilters extends object>(filters: TFilters) => TFilters;
+/** The committed/draft filter model returned by {@link useFilterView}. */
+export type FilterView<TFilters extends object> = Readonly<{
+    /** Committed filters — feed these to the query. */
+    committed: TFilters;
+    /** Pending drawer edits, not yet applied. Bind filter controls to these. */
+    draft: TFilters;
+    /** Writes one draft field (pass `undefined` to clear it). */
+    setDraft: <K extends keyof TFilters>(key: K, value: TFilters[K]) => void;
+    /** Number of active (present + non-empty) committed filters. */
+    activeCount: number;
+    /** Whether anything is narrowing the result set — a filter or the search. */
+    isNarrowed: boolean;
+    /** Commit `draft` → committed. */
+    apply: () => void;
+    /** Discard `draft`, restoring it from committed. */
+    cancel: () => void;
+    /**
+     * Restore `draft` to the initial filters. Draft-only — Apply still commits.
+     */
+    reset: () => void;
+    /**
+     * Empty every filter field and the search, committed immediately.
+     */
+    clearAll: () => void;
+    /** Clear a single committed field immediately (no Apply). */
+    removeFilter: (key: keyof TFilters) => void;
+    /** Commit a single field to a value immediately (no Apply). */
+    setFilter: <K extends keyof TFilters>(key: K, value: TFilters[K]) => void;
+    /** Live search input value (instant, for the text field). */
+    search: string;
+    /** Debounced search value — feed this to the query. */
+    debouncedSearch: string;
+    /** Updates both the live and debounced search values. */
+    setSearch: (value: string) => void;
+}>;
+/**
+ * Holds committed-vs-draft filter state plus a debounced live search, the
+ * query-agnostic core of a filter-driven view. `onCommittedChange` fires
+ * whenever the committed set changes and `onSearchChange` on every keystroke;
+ * controls bind straight to `draft` + `setDraft` in the consumer's own render.
+ * Given a `stored` value, the committed set opens from it and is written back
+ * on every commit; the search is never stored.
+ *
+ * @example
+ * const filters = useFilterView<{ status?: string }>({
+ * 	initial: {},
+ * 	onCommittedChange: resetPage,
+ * 	onSearchChange: resetPage,
+ * });
+ * // <Select value={filters.draft.status ?? ""}
+ * //   onValueChange={(next) => filters.setDraft("status", next || undefined)} />
+ */
+export declare const useFilterView: <TFilters extends object>({ initial, stored, onCommittedChange, onSearchChange, searchDelay, }: Readonly<{
+    initial: TFilters;
+    /** Where the committed filters persist; they open from it when given. */
+    stored?: StoredValue<TFilters>;
+    onCommittedChange?: () => void;
+    onSearchChange?: () => void;
+    searchDelay?: number;
+}>) => FilterView<TFilters>;
+//# sourceMappingURL=use-filter-view.d.ts.map

package/dist/components/filter-bar/use-filter-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filter-view.d.ts","sourceRoot":"","sources":["../../../src/components/filter-bar/use-filter-view.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAC7B,CAAC,KACN,KAAK,IAAI,WAAW,CAAC,CAAC,CAKqB,CAAC;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,YACrB,MAAM,KACb,MACuD,CAAC;AAE3D;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,SAAS,MAAM,WAC/C,QAAQ,KACf,QAKD,CAAC;AAEH,0EAA0E;AAC1E,MAAM,MAAM,UAAU,CAAC,QAAQ,SAAS,MAAM,IAAI,QAAQ,CAAC;IAC1D,mDAAmD;IACnD,SAAS,EAAE,QAAQ,CAAC;IACpB,4EAA4E;IAC5E,KAAK,EAAE,QAAQ,CAAC;IAChB,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,QAAQ,EAClC,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KACd,IAAI,CAAC;IACV,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IAEpB,6EAA6E;IAC7E,UAAU,EAAE,OAAO,CAAC;IAEpB,kCAAkC;IAClC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oDAAoD;IACpD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,6DAA6D;IAC7D,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,QAAQ,KAAK,IAAI,CAAC;IAC5C,+DAA+D;IAC/D,SAAS,EAAE,CAAC,CAAC,SAAS,MAAM,QAAQ,EACnC,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KACd,IAAI,CAAC;IAEV,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC,CAAC;AAIH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,SAAS,MAAM,wEAMlD,QAAQ,CAAC;IACX,OAAO,EAAE,QAAQ,CAAC;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,KAAG,UAAU,CAAC,QAAQ,CAuFvB,CAAC"}

package/dist/components/filter-bar/use-filter-view.js

@@ -0,0 +1,219 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+// src/components/filter-bar/use-filter-view.ts
+/**
+* Whether a filter value narrows the view: present, and not an unchecked
+* boolean, a blank string or an empty multi-select.
+*
+* @example
+* isActiveFilterValue("open") // true
+* isActiveFilterValue([]) // false
+*/
+var isActiveFilterValue = (value) => value !== void 0 && value !== null && value !== false && value !== "" && !(Array.isArray(value) && value.length === 0);
+/**
+* Counts the fields in `filters` that hold an active (present + non-empty)
+* value. Drives the applied-filter badge on the {@link FilterBar} trigger.
+*
+* @example
+* countActiveFilters({ status: "open", q: "" }) // 1
+*/
+var countActiveFilters = (filters) => Object.values(filters).filter(isActiveFilterValue).length;
+/**
+* The same filter set with every field emptied to `undefined`.
+*
+* @example
+* clearFilterValues({ status: "open", dateFrom: "2026-01-01" })
+* // -> { status: undefined, dateFrom: undefined }
+*/
+var clearFilterValues = (filters) => ({
+	...filters,
+	...Object.fromEntries(Object.keys(filters).map((key) => [key, void 0]))
+});
+var DEFAULT_SEARCH_DELAY = 300;
+/**
+* Holds committed-vs-draft filter state plus a debounced live search, the
+* query-agnostic core of a filter-driven view. `onCommittedChange` fires
+* whenever the committed set changes and `onSearchChange` on every keystroke;
+* controls bind straight to `draft` + `setDraft` in the consumer's own render.
+* Given a `stored` value, the committed set opens from it and is written back
+* on every commit; the search is never stored.
+*
+* @example
+* const filters = useFilterView<{ status?: string }>({
+* 	initial: {},
+* 	onCommittedChange: resetPage,
+* 	onSearchChange: resetPage,
+* });
+* // <Select value={filters.draft.status ?? ""}
+* //   onValueChange={(next) => filters.setDraft("status", next || undefined)} />
+*/
+var useFilterView = (t0) => {
+	const $ = c(44);
+	const { initial, stored, onCommittedChange, onSearchChange, searchDelay: t1 } = t0;
+	const searchDelay = t1 === void 0 ? DEFAULT_SEARCH_DELAY : t1;
+	let t2;
+	if ($[0] !== initial || $[1] !== stored) {
+		t2 = () => stored?.read() ?? initial;
+		$[0] = initial;
+		$[1] = stored;
+		$[2] = t2;
+	} else t2 = $[2];
+	const [committed, setCommitted] = useState(t2);
+	const [draft, setDraftState] = useState(committed);
+	const [search, setSearchLive] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+	let t3;
+	let t4;
+	if ($[3] !== search || $[4] !== searchDelay) {
+		t3 = () => {
+			const timer = setTimeout(() => {
+				setDebouncedSearch(search);
+			}, searchDelay);
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		t4 = [search, searchDelay];
+		$[3] = search;
+		$[4] = searchDelay;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	useEffect(t3, t4);
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = (key, value) => setDraftState((prev) => ({
+			...prev,
+			[key]: value
+		}));
+		$[7] = t5;
+	} else t5 = $[7];
+	const setDraft = t5;
+	let t6;
+	if ($[8] !== onCommittedChange || $[9] !== stored) {
+		t6 = (next) => {
+			setCommitted(next);
+			onCommittedChange?.();
+			stored?.write(next);
+		};
+		$[8] = onCommittedChange;
+		$[9] = stored;
+		$[10] = t6;
+	} else t6 = $[10];
+	const commit = t6;
+	let t7;
+	if ($[11] !== commit || $[12] !== draft) {
+		t7 = () => commit(draft);
+		$[11] = commit;
+		$[12] = draft;
+		$[13] = t7;
+	} else t7 = $[13];
+	const apply = t7;
+	let t8;
+	if ($[14] !== committed) {
+		t8 = () => setDraftState(committed);
+		$[14] = committed;
+		$[15] = t8;
+	} else t8 = $[15];
+	const cancel = t8;
+	let t9;
+	if ($[16] !== initial) {
+		t9 = () => setDraftState(initial);
+		$[16] = initial;
+		$[17] = t9;
+	} else t9 = $[17];
+	const reset = t9;
+	let t10;
+	if ($[18] !== commit || $[19] !== committed) {
+		t10 = (key_0) => {
+			const clear = (prev_0) => ({
+				...prev_0,
+				[key_0]: void 0
+			});
+			setDraftState(clear);
+			commit(clear(committed));
+		};
+		$[18] = commit;
+		$[19] = committed;
+		$[20] = t10;
+	} else t10 = $[20];
+	const removeFilter = t10;
+	let t11;
+	if ($[21] !== commit || $[22] !== committed) {
+		t11 = (key_1, value_0) => {
+			const set = (prev_1) => ({
+				...prev_1,
+				[key_1]: value_0
+			});
+			setDraftState(set);
+			commit(set(committed));
+		};
+		$[21] = commit;
+		$[22] = committed;
+		$[23] = t11;
+	} else t11 = $[23];
+	const setFilter = t11;
+	let t12;
+	if ($[24] !== onSearchChange) {
+		t12 = (value_1) => {
+			setSearchLive(value_1);
+			onSearchChange?.();
+		};
+		$[24] = onSearchChange;
+		$[25] = t12;
+	} else t12 = $[25];
+	const setSearch = t12;
+	let t13;
+	if ($[26] !== commit || $[27] !== committed || $[28] !== setSearch) {
+		t13 = () => {
+			setDraftState(clearFilterValues);
+			commit(clearFilterValues(committed));
+			setSearch("");
+		};
+		$[26] = commit;
+		$[27] = committed;
+		$[28] = setSearch;
+		$[29] = t13;
+	} else t13 = $[29];
+	const clearAll = t13;
+	const activeCount = countActiveFilters(committed);
+	const t14 = activeCount > 0 || search !== "";
+	let t15;
+	if ($[30] !== activeCount || $[31] !== apply || $[32] !== cancel || $[33] !== clearAll || $[34] !== committed || $[35] !== debouncedSearch || $[36] !== draft || $[37] !== removeFilter || $[38] !== reset || $[39] !== search || $[40] !== setFilter || $[41] !== setSearch || $[42] !== t14) {
+		t15 = {
+			committed,
+			draft,
+			setDraft,
+			activeCount,
+			isNarrowed: t14,
+			apply,
+			cancel,
+			reset,
+			clearAll,
+			removeFilter,
+			setFilter,
+			search,
+			debouncedSearch,
+			setSearch
+		};
+		$[30] = activeCount;
+		$[31] = apply;
+		$[32] = cancel;
+		$[33] = clearAll;
+		$[34] = committed;
+		$[35] = debouncedSearch;
+		$[36] = draft;
+		$[37] = removeFilter;
+		$[38] = reset;
+		$[39] = search;
+		$[40] = setFilter;
+		$[41] = setSearch;
+		$[42] = t14;
+		$[43] = t15;
+	} else t15 = $[43];
+	return t15;
+};
+export { clearFilterValues, countActiveFilters, isActiveFilterValue, useFilterView };

package/dist/components/form/first-invalid.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Focuses the first invalid field inside `root` in document order, and scrolls
+ * it to the middle of the view. A field hands focus to its invalid control, or
+ * else to its selected option or the first control Tab would reach. Disabled
+ * and hidden controls are skipped.
+ *
+ * @example
+ * focusFirstInvalid(formElement); // the focused control, or undefined
+ */
+export declare const focusFirstInvalid: (root: ParentNode) => HTMLElement | undefined;
+//# sourceMappingURL=first-invalid.d.ts.map

package/dist/components/form/first-invalid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"first-invalid.d.ts","sourceRoot":"","sources":["../../../src/components/form/first-invalid.ts"],"names":[],"mappings":"AAwCA;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,SACvB,UAAU,KACd,WAAW,GAAG,SAehB,CAAC"}

package/dist/components/form/first-invalid.js

@@ -0,0 +1,31 @@
+// src/components/form/first-invalid.ts
+var INVALID = "[aria-invalid=\"true\"], [data-invalid]";
+var SELECTED = "[aria-checked=\"true\"], [aria-pressed=\"true\"]";
+var FOCUSABLE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
+var REDUCED_MOTION = "(prefers-reduced-motion)";
+var focusable = (element) => element instanceof HTMLElement && element.matches(FOCUSABLE) && !element.matches(":disabled, [aria-disabled=\"true\"]") && element.closest("[inert], [aria-hidden=\"true\"]") === null && element.checkVisibility({ visibilityProperty: true });
+var tabbable = (element) => focusable(element) && element.tabIndex >= 0;
+var focusTarget = (invalid) => tabbable(invalid) ? invalid : Array.from(invalid.querySelectorAll(INVALID)).find(tabbable) ?? Array.from(invalid.querySelectorAll(SELECTED)).find(focusable) ?? Array.from(invalid.querySelectorAll(FOCUSABLE)).find(tabbable);
+/**
+* Focuses the first invalid field inside `root` in document order, and scrolls
+* it to the middle of the view. A field hands focus to its invalid control, or
+* else to its selected option or the first control Tab would reach. Disabled
+* and hidden controls are skipped.
+*
+* @example
+* focusFirstInvalid(formElement); // the focused control, or undefined
+*/
+var focusFirstInvalid = (root) => {
+	for (const invalid of root.querySelectorAll(INVALID)) {
+		const target = focusTarget(invalid);
+		if (target !== void 0) {
+			target.focus({ preventScroll: true });
+			target.scrollIntoView({
+				block: "center",
+				behavior: window.matchMedia(REDUCED_MOTION).matches ? "instant" : "smooth"
+			});
+			return target;
+		}
+	}
+};
+export { focusFirstInvalid };