@igne-agency/react-web-ui 0.3.0 → 0.4.0

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

@@ -1,7 +1,3 @@
-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";
@@ -9,92 +5,150 @@ 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 { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useRef, useState } from "react";
 // src/components/filter-bar/filter-bar.tsx
 var FilterBarContext = createContext(null);
 var useFilterBar = () => {
 	return useRequiredContext(FilterBarContext, "FilterBar.* must be rendered inside <FilterBar.Root>.");
 };
+var FilterDrawerContext = createContext(null);
+var useApply = () => {
+	return useRequiredContext(FilterDrawerContext, "FilterBar.Apply must be rendered inside <FilterBar.Drawer>.");
+};
+/** The `<search>` landmark holding a `useFilterView` for the parts inside it. */
 var Root = (t0) => {
-	const $ = c(8);
-	const { filters, children, className } = t0;
+	const $ = c(18);
+	let className;
+	let filters;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({filters, render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = filters;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		className = $[1];
+		filters = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[6] !== className) {
 		t1 = clsx(filter_bar_module_default.bar, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[2] !== children || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsx("search", {
-			className: t1,
-			children
-		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
+	if ($[8] !== props || $[9] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[5] !== filters || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsx(FilterBarContext, {
+	if ($[11] !== ref || $[12] !== render || $[13] !== t2) {
+		t3 = {
+			defaultTagName: "search",
+			render,
+			ref,
+			props: t2
+		};
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	const element = useRender(t3);
+	let t4;
+	if ($[15] !== element || $[16] !== filters) {
+		t4 = /* @__PURE__ */ jsx(FilterBarContext, {
 			value: filters,
-			children: t2
+			children: element
 		});
-		$[5] = filters;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
-	return t3;
+		$[15] = element;
+		$[16] = filters;
+		$[17] = t4;
+	} else t4 = $[17];
+	return t4;
 };
 /**
-* 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.
+* The live search input, a `SearchField` bound to the view's search. Search is
+* not part of the Apply/Cancel bargain: it narrows as you type, debounced by
+* the view. Its label is hidden and fills the placeholder unless told otherwise.
 */
 var Search = (t0) => {
-	const $ = c(9);
-	const { label, clearLabel, optionalLabel, className } = t0;
-	const { search, setSearch } = useFilterBar();
+	const $ = c(16);
+	let className;
+	let label;
+	let props;
 	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] !== optionalLabel || $[5] !== search || $[6] !== setSearch || $[7] !== t1) {
-		t2 = /* @__PURE__ */ jsx(SearchField, {
+	if ($[0] !== t0) {
+		({label, labelHidden: t1, placeholder: t2, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		className = $[1];
+		label = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const labelHidden = t1 === void 0 ? true : t1;
+	const placeholder = t2 === void 0 ? label : t2;
+	const { search, setSearch } = useFilterBar();
+	let t3;
+	if ($[6] !== className) {
+		t3 = clsx(filter_bar_module_default.search, className);
+		$[6] = className;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== label || $[9] !== labelHidden || $[10] !== placeholder || $[11] !== props || $[12] !== search || $[13] !== setSearch || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(SearchField, {
+			...props,
 			label,
-			labelHidden: true,
-			optionalLabel,
-			clearLabel,
-			placeholder: label,
+			labelHidden,
+			placeholder,
 			value: search,
 			onValueChange: setSearch,
-			className: t1
+			className: t3
 		});
-		$[2] = clearLabel;
-		$[3] = label;
-		$[4] = optionalLabel;
-		$[5] = search;
-		$[6] = setSearch;
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
-	return t2;
+		$[8] = label;
+		$[9] = labelHidden;
+		$[10] = placeholder;
+		$[11] = props;
+		$[12] = search;
+		$[13] = setSearch;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
 };
 /**
-* 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.
+* The apply-gated half: a `Drawer.Root` whose draft `FilterBar.Apply` commits.
+* Dismissing the drawer any other way discards the draft.
 */
 var FilterDrawer = (t0) => {
-	const $ = c(41);
-	const { children, swipeDirection, triggerLabel, title, closeLabel, resetLabel, applyLabel, className } = t0;
-	const { activeCount, apply, cancel, reset } = useFilterBar();
+	const $ = c(12);
+	const { children, swipeDirection } = t0;
+	const { apply, cancel } = useFilterBar();
 	const [open, setOpen] = useState(false);
 	const appliedRef = useRef(false);
 	let t1;
@@ -122,183 +176,457 @@ var FilterDrawer = (t0) => {
 	} else t2 = $[3];
 	const handleOpenChange = t2;
 	let t3;
-	if ($[4] !== activeCount) {
-		t3 = activeCount > 0 && /* @__PURE__ */ jsx(Badge, {
-			tone: "neutral",
-			variant: "solid",
-			children: activeCount
+	if ($[4] !== children || $[5] !== handleOpenChange || $[6] !== open || $[7] !== swipeDirection) {
+		t3 = /* @__PURE__ */ jsx(Drawer.Root, {
+			open,
+			onOpenChange: handleOpenChange,
+			swipeDirection,
+			children
 		});
-		$[4] = activeCount;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[4] = children;
+		$[5] = handleOpenChange;
+		$[6] = open;
+		$[7] = swipeDirection;
+		$[8] = t3;
+	} else t3 = $[8];
 	let t4;
-	if ($[6] !== t3 || $[7] !== triggerLabel) {
-		t4 = /* @__PURE__ */ jsx(Drawer.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
+	if ($[9] !== handleApply || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(FilterDrawerContext, {
+			value: handleApply,
+			children: t3
+		});
+		$[9] = handleApply;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+};
+/** The button that opens the drawer, such as "Filters" with a `FilterBar.Badge`. */
+var Trigger = (t0) => {
+	const $ = c(8);
+	let children;
+	let icon;
+	let props;
+	if ($[0] !== t0) {
+		({icon, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = props;
+	} else {
+		children = $[1];
+		icon = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== children || $[5] !== icon || $[6] !== props) {
+		t1 = /* @__PURE__ */ jsx(Drawer.Trigger, { render: /* @__PURE__ */ jsx(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, { 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,
+			icon,
+			...props,
 			children
+		}) });
+		$[4] = children;
+		$[5] = icon;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+/** How many filters are applied, for the trigger. Renders nothing while none are. */
+var FilterBadge = (t0) => {
+	const $ = c(9);
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({tone: t1, variant: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
+	const tone = t1 === void 0 ? "neutral" : t1;
+	const variant = t2 === void 0 ? "solid" : t2;
+	const { activeCount } = useFilterBar();
+	if (activeCount === 0) return null;
+	let t3;
+	if ($[4] !== activeCount || $[5] !== props || $[6] !== tone || $[7] !== variant) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			tone,
+			variant,
+			...props,
+			children: activeCount
 		});
-		$[19] = children;
-		$[20] = t9;
-		$[21] = t10;
-	} else t10 = $[21];
-	let t11;
-	if ($[22] !== reset || $[23] !== resetLabel) {
-		t11 = /* @__PURE__ */ jsx(Button, {
+		$[4] = activeCount;
+		$[5] = props;
+		$[6] = tone;
+		$[7] = variant;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+/** The drawer itself: its portal, backdrop, viewport and popup, around the content. */
+var Content = (t0) => {
+	const $ = c(6);
+	const { children, className } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Drawer.Backdrop, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== children) {
+		t2 = /* @__PURE__ */ jsx(Drawer.Content, { children });
+		$[1] = children;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== className || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Drawer.Portal, { children: [t1, /* @__PURE__ */ jsx(Drawer.Viewport, { children: /* @__PURE__ */ jsx(Drawer.Popup, {
+			className,
+			children: t2
+		}) })] });
+		$[3] = className;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+/** The filter controls, bound to the view's `draft`, in a column. */
+var Fields = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(filter_bar_module_default.fields, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/** The drawer's actions, `FilterBar.Reset` and `FilterBar.Apply`, at its end. */
+var Footer = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(filter_bar_module_default.footer, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/** Puts the draft back to the initial filters, without closing the drawer. */
+var Reset = (t0) => {
+	const $ = c(13);
+	let children;
+	let icon;
+	let onClick;
+	let props;
+	if ($[0] !== t0) {
+		({icon, children, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = onClick;
+		$[4] = props;
+	} else {
+		children = $[1];
+		icon = $[2];
+		onClick = $[3];
+		props = $[4];
+	}
+	const { reset } = useFilterBar();
+	let t1;
+	if ($[5] !== onClick || $[6] !== reset) {
+		t1 = (event) => {
+			onClick?.(event);
+			reset();
+		};
+		$[5] = onClick;
+		$[6] = reset;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== children || $[9] !== icon || $[10] !== props || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
 			variant: "tertiary",
-			icon: SvgRestore,
-			onClick: reset,
-			children: resetLabel
+			icon,
+			...props,
+			onClick: t1,
+			children
 		});
-		$[22] = reset;
-		$[23] = resetLabel;
-		$[24] = t11;
-	} else t11 = $[24];
-	let t12;
-	if ($[25] !== applyLabel || $[26] !== handleApply) {
-		t12 = /* @__PURE__ */ jsx(Button, {
+		$[8] = children;
+		$[9] = icon;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+};
+/** Commits the draft and closes the drawer. */
+var Apply = (t0) => {
+	const $ = c(13);
+	let children;
+	let icon;
+	let onClick;
+	let props;
+	if ($[0] !== t0) {
+		({icon, children, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = onClick;
+		$[4] = props;
+	} else {
+		children = $[1];
+		icon = $[2];
+		onClick = $[3];
+		props = $[4];
+	}
+	const apply = useApply();
+	let t1;
+	if ($[5] !== apply || $[6] !== onClick) {
+		t1 = (event) => {
+			onClick?.(event);
+			apply();
+		};
+		$[5] = apply;
+		$[6] = onClick;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== children || $[9] !== icon || $[10] !== props || $[11] !== t1) {
+		t2 = /* @__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]
+			icon,
+			...props,
+			onClick: t1,
+			children
 		});
-		$[35] = handleOpenChange;
-		$[36] = open;
-		$[37] = swipeDirection;
-		$[38] = t14;
-		$[39] = t4;
-		$[40] = t15;
-	} else t15 = $[40];
-	return t15;
+		$[8] = children;
+		$[9] = icon;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
 };
 /**
-* 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.
+* The applied-filter row, on a line of its own: the chips for what is
+* narrowing the list, such as an `ActiveFilters`, and `FilterBar.ClearAll`.
+* Renders nothing while nothing narrows the list.
 */
 var Active = (t0) => {
-	const $ = c(9);
-	const { children, clearAllLabel, className } = t0;
-	const { isNarrowed, clearAll } = useFilterBar();
-	if (!isNarrowed) return null;
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { isNarrowed } = useFilterBar();
 	let t1;
-	if ($[0] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(filter_bar_module_default.active, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== isNarrowed || $[11] !== ref || $[12] !== render || $[13] !== t2) {
+		t3 = {
+			defaultTagName: "div",
+			render,
+			ref,
+			enabled: isNarrowed,
+			props: t2
+		};
+		$[10] = isNarrowed;
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return useRender(t3);
+};
+/** Clears every committed filter and the search. */
+var ClearAll = (t0) => {
+	const $ = c(13);
+	let children;
+	let icon;
+	let onClick;
+	let props;
+	if ($[0] !== t0) {
+		({icon, children, onClick, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = onClick;
+		$[4] = props;
+	} else {
+		children = $[1];
+		icon = $[2];
+		onClick = $[3];
+		props = $[4];
+	}
+	const { clearAll } = useFilterBar();
+	let t1;
+	if ($[5] !== clearAll || $[6] !== onClick) {
+		t1 = (event) => {
+			onClick?.(event);
+			clearAll();
+		};
+		$[5] = clearAll;
+		$[6] = onClick;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[2] !== clearAll || $[3] !== clearAllLabel) {
+	if ($[8] !== children || $[9] !== icon || $[10] !== props || $[11] !== t1) {
 		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]
+			icon,
+			...props,
+			onClick: t1,
+			children
 		});
-		$[5] = children;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
+		$[8] = children;
+		$[9] = icon;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
 };
 /**
-* 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.
+* Composite filter surface. `Root` holds a `useFilterView` in context: `Search`
+* and the `Drawer` share the leading row, and `Active`, the applied-filter row,
+* takes a line of its own. The drawer's header is the `Drawer` component's own
+* `Drawer.Header`, `Drawer.Title` and `Drawer.CloseButton`.
 *
 * @example
 * <FilterBar.Root filters={filters}>
-* 	<FilterBar.Search label="Search clients" clearLabel="Clear search" optionalLabel="optional" />
-* 	<FilterBar.Drawer swipeDirection={narrow ? "down" : "right"} triggerLabel="Filters" title="Filter clients" closeLabel="Close" resetLabel="Reset" applyLabel="Apply">
-* 		<ClientFilterFields filters={filters} />
+* 	<FilterBar.Search label="Search clients" clearLabel="Clear search" clearIcon={<CloseIcon />} icon={<SearchIcon />} optionalLabel="optional" />
+* 	<FilterBar.Drawer swipeDirection={narrow ? "down" : "right"}>
+* 		<FilterBar.Trigger icon={<FilterIcon />}>Filters<FilterBar.Badge /></FilterBar.Trigger>
+* 		<FilterBar.Content>
+* 			<Drawer.Header>
+* 				<Drawer.Title>Filter clients</Drawer.Title>
+* 				<Drawer.CloseButton closeLabel="Close" icon={<CloseIcon />} />
+* 			</Drawer.Header>
+* 			<FilterBar.Fields><ClientFilterFields filters={filters} /></FilterBar.Fields>
+* 			<FilterBar.Footer>
+* 				<FilterBar.Reset>Reset</FilterBar.Reset>
+* 				<FilterBar.Apply>Apply</FilterBar.Apply>
+* 			</FilterBar.Footer>
+* 		</FilterBar.Content>
 * 	</FilterBar.Drawer>
-* 	<FilterBar.Active clearAllLabel="Clear filters">
-* 		<ActiveFilters filters={filters} describe={describers} label="Active filters" removeLabel="Remove" />
+* 	<FilterBar.Active>
+* 		<ActiveFilters filters={filters} describe={describers} label="Active filters" removeLabel="Remove" removeIcon={<CloseIcon />} />
+* 		<FilterBar.ClearAll>Clear filters</FilterBar.ClearAll>
 * 	</FilterBar.Active>
 * </FilterBar.Root>
 */
@@ -306,6 +634,14 @@ var FilterBar = {
 	Root,
 	Search,
 	Drawer: FilterDrawer,
-	Active
+	Trigger,
+	Badge: FilterBadge,
+	Content,
+	Fields,
+	Footer,
+	Reset,
+	Apply,
+	Active,
+	ClearAll
 };
 export { FilterBar };