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

package/dist/components/file-field/file-input.js

@@ -0,0 +1,338 @@
+import SvgAttachFile from "../../vendor/@material-design-icons/svg/outlined/attach_file.js";
+import SvgUploadFile from "../../vendor/@material-design-icons/svg/outlined/upload_file.js";
+import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
+import { Button as Button$1 } from "../button/button.js";
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { Icon } from "../icon/icon.js";
+import file_field_module_default from "./file-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, DropZone, FileTrigger, TagGroup, TagList } from "react-aria-components";
+import { Fieldset } from "@base-ui/react/fieldset";
+// src/components/file-field/file-input.tsx
+var FileInputRoot = (t0) => {
+	const $ = c(15);
+	let disabled;
+	let props;
+	let state;
+	if ($[0] !== t0) {
+		({state, disabled, ...props} = t0);
+		$[0] = t0;
+		$[1] = disabled;
+		$[2] = props;
+		$[3] = state;
+	} else {
+		disabled = $[1];
+		props = $[2];
+		state = $[3];
+	}
+	let t1;
+	if ($[4] !== disabled) {
+		t1 = /* @__PURE__ */ jsx(Fieldset.Root, { disabled });
+		$[4] = disabled;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== state) {
+		t2 = state ?? {};
+		$[6] = state;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t2) {
+		t3 = fieldStateAttributes(t2);
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== disabled || $[11] !== props || $[12] !== t1 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Field.Root, {
+			render: t1,
+			disabled,
+			...t3,
+			...props
+		});
+		$[10] = disabled;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
+};
+var FileInputLegend = (props) => {
+	const $ = c(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(Fieldset.Legend, {});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== props) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			nativeLabel: false,
+			render: t0,
+			...props
+		});
+		$[1] = props;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+var FileInputDropTarget = (t0) => {
+	const $ = c(16);
+	let className;
+	let label;
+	let props;
+	let state;
+	if ($[0] !== t0) {
+		({label, state, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = label;
+		$[3] = props;
+		$[4] = state;
+	} else {
+		className = $[1];
+		label = $[2];
+		props = $[3];
+		state = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(file_field_module_default.dropTarget, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== state) {
+		t2 = state ?? {};
+		$[7] = state;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== t2) {
+		t3 = fieldStateAttributes(t2);
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== label || $[12] !== props || $[13] !== t1 || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(DropZone, {
+			"aria-label": label,
+			className: t1,
+			...t3,
+			...props
+		});
+		$[11] = label;
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+};
+var FileInputHint = (t0) => {
+	const $ = c(11);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(file_field_module_default.hint, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			svg: SvgUploadFile,
+			label: "",
+			size: 1.5
+		});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+		t3 = /* @__PURE__ */ jsxs("p", {
+			className: t1,
+			...props,
+			children: [t2, children]
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+var FileInputTrigger = (t0) => {
+	const $ = c(20);
+	let buttonRef;
+	let describedBy;
+	let disabled;
+	let invalid;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, disabled, describedBy, buttonRef, invalid, ...props} = t0);
+		$[0] = t0;
+		$[1] = buttonRef;
+		$[2] = describedBy;
+		$[3] = disabled;
+		$[4] = invalid;
+		$[5] = label;
+		$[6] = props;
+	} else {
+		buttonRef = $[1];
+		describedBy = $[2];
+		disabled = $[3];
+		invalid = $[4];
+		label = $[5];
+		props = $[6];
+	}
+	let t1;
+	if ($[7] !== invalid) {
+		t1 = fieldStateAttributes({ invalid });
+		$[7] = invalid;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] !== disabled) {
+		t2 = /* @__PURE__ */ jsx(Button, { isDisabled: disabled });
+		$[9] = disabled;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== buttonRef || $[12] !== describedBy || $[13] !== label || $[14] !== t1 || $[15] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button$1, {
+			variant: "secondary",
+			size: "sm",
+			icon: SvgAttachFile,
+			ref: buttonRef,
+			"aria-describedby": describedBy,
+			...t1,
+			render: t2,
+			children: label
+		});
+		$[11] = buttonRef;
+		$[12] = describedBy;
+		$[13] = label;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	let t4;
+	if ($[17] !== props || $[18] !== t3) {
+		t4 = /* @__PURE__ */ jsx(FileTrigger, {
+			...props,
+			children: t3
+		});
+		$[17] = props;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	return t4;
+};
+var FileInputList = (t0) => {
+	const $ = c(9);
+	const { label, onRemove, children, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(file_field_module_default.list, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(TagList, {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== label || $[6] !== onRemove || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TagGroup, {
+			"aria-label": label,
+			onRemove,
+			children: t2
+		});
+		$[5] = label;
+		$[6] = onRemove;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var FileInputItem = (t0) => {
+	const $ = c(7);
+	const { id, file, hint, invalid: t1, disabled: t2, removeLabel } = t0;
+	const invalid = t1 === void 0 ? false : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] !== disabled || $[1] !== file || $[2] !== hint || $[3] !== id || $[4] !== invalid || $[5] !== removeLabel) {
+		t3 = /* @__PURE__ */ jsx(AttachmentTile, {
+			id,
+			file,
+			hint,
+			removeLabel,
+			invalid,
+			disabled
+		});
+		$[0] = disabled;
+		$[1] = file;
+		$[2] = hint;
+		$[3] = id;
+		$[4] = invalid;
+		$[5] = removeLabel;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+/**
+* The styled parts of a file input: the field frame around react-aria's
+* `DropZone` and `FileTrigger`, plus the staged files as removable
+* `AttachmentTile`s. The `Root` is a fieldset named by its `Legend`. For the
+* ordinary case, use `FileField`.
+*
+* @example
+* <FileInput.Root state={{ requiredness: "optional" }}>
+* 	<FileInput.Legend optionalLabel="optional">Attachments</FileInput.Legend>
+* 	<FileInput.DropTarget label="Drop zone for attachments" onDrop={onDrop}>
+* 		<FileInput.Hint>Drag files here</FileInput.Hint>
+* 		<FileInput.Trigger label="Choose files" onSelect={onSelect} />
+* 		<FileInput.List label="Files for attachments" onRemove={onRemove}>
+* 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" />
+* 		</FileInput.List>
+* 	</FileInput.DropTarget>
+* </FileInput.Root>
+*/
+var FileInput = {
+	Root: FileInputRoot,
+	Legend: FileInputLegend,
+	DropTarget: FileInputDropTarget,
+	Hint: FileInputHint,
+	Trigger: FileInputTrigger,
+	Pending: Field.Pending,
+	List: FileInputList,
+	Item: FileInputItem,
+	Description: Field.Description,
+	Error: Field.Error
+};
+export { FileInput };

package/dist/components/file-field/file-size.d.ts

@@ -0,0 +1,22 @@
+/** The part of a `File` a size limit is decided on. */
+export type SizedFile = Readonly<{
+    name: string;
+    size: number;
+}>;
+/**
+ * Whether a file is over a size limit.
+ *
+ * @example
+ * isOversized({ name: "scan.pdf", size: 2048 }, 1024); // true
+ */
+export declare const isOversized: (file: SizedFile, maxBytes: number) => boolean;
+/**
+ * The files over a size limit, in the order they were given. The rest of the
+ * selection is left alone, so a rejected file can be pointed at and removed
+ * rather than disappearing.
+ *
+ * @example
+ * oversizedFiles([{ name: "a", size: 1 }, { name: "b", size: 9 }], 5); // [{ name: "b", size: 9 }]
+ */
+export declare const oversizedFiles: <TFile extends SizedFile>(files: readonly TFile[], maxBytes: number) => readonly TFile[];
+//# sourceMappingURL=file-size.d.ts.map

package/dist/components/file-field/file-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-size.d.ts","sourceRoot":"","sources":["../../../src/components/file-field/file-size.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,SACjB,SAAS,YACL,MAAM,KACd,OAA+B,CAAC;AAEnC;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,SAAS,SAAS,SAC9C,SAAS,KAAK,EAAE,YACb,MAAM,KACd,SAAS,KAAK,EACiC,CAAC"}

package/dist/components/file-field/file-size.js

@@ -0,0 +1,18 @@
+// src/components/file-field/file-size.ts
+/**
+* Whether a file is over a size limit.
+*
+* @example
+* isOversized({ name: "scan.pdf", size: 2048 }, 1024); // true
+*/
+var isOversized = (file, maxBytes) => file.size > maxBytes;
+/**
+* The files over a size limit, in the order they were given. The rest of the
+* selection is left alone, so a rejected file can be pointed at and removed
+* rather than disappearing.
+*
+* @example
+* oversizedFiles([{ name: "a", size: 1 }, { name: "b", size: 9 }], 5); // [{ name: "b", size: 9 }]
+*/
+var oversizedFiles = (files, maxBytes) => files.filter((file) => isOversized(file, maxBytes));
+export { isOversized, oversizedFiles };

package/dist/components/file-field/file-type.d.ts

@@ -0,0 +1,22 @@
+/** The part of a `File` an `accept` list is decided on. */
+export type TypedFile = Readonly<{
+    name: string;
+    type: string;
+}>;
+/**
+ * Whether a file matches an `accept` list the way the native file picker does:
+ * by MIME type, a `type/*` wildcard or a `.ext` extension, ignoring case. An
+ * empty list accepts every file.
+ *
+ * @example
+ * isAccepted({ name: "scan.PNG", type: "image/png" }, ["image/*", ".pdf"]); // true
+ */
+export declare const isAccepted: (file: TypedFile, accept: readonly string[]) => boolean;
+/**
+ * The files an `accept` list rejects, in the order they were given.
+ *
+ * @example
+ * wrongTypeFiles([{ name: "a.pdf", type: "application/pdf" }, { name: "b.exe", type: "" }], [".pdf"]); // [{ name: "b.exe", type: "" }]
+ */
+export declare const wrongTypeFiles: <TFile extends TypedFile>(files: readonly TFile[], accept: readonly string[]) => readonly TFile[];
+//# sourceMappingURL=file-type.d.ts.map

package/dist/components/file-field/file-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-type.d.ts","sourceRoot":"","sources":["../../../src/components/file-field/file-type.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAkBH;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,SAChB,SAAS,UACP,SAAS,MAAM,EAAE,KACvB,OASF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,SAAS,SAAS,SAC9C,SAAS,KAAK,EAAE,UACf,SAAS,MAAM,EAAE,KACvB,SAAS,KAAK,EAC+B,CAAC"}

package/dist/components/file-field/file-type.js

@@ -0,0 +1,28 @@
+// src/components/file-field/file-type.ts
+var matchesToken = (file, token) => {
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	if (token.startsWith(".")) return name.endsWith(token);
+	if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+	return type === token;
+};
+/**
+* Whether a file matches an `accept` list the way the native file picker does:
+* by MIME type, a `type/*` wildcard or a `.ext` extension, ignoring case. An
+* empty list accepts every file.
+*
+* @example
+* isAccepted({ name: "scan.PNG", type: "image/png" }, ["image/*", ".pdf"]); // true
+*/
+var isAccepted = (file, accept) => {
+	const tokens = accept.map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+	return tokens.length === 0 || tokens.some((token) => matchesToken(file, token));
+};
+/**
+* The files an `accept` list rejects, in the order they were given.
+*
+* @example
+* wrongTypeFiles([{ name: "a.pdf", type: "application/pdf" }, { name: "b.exe", type: "" }], [".pdf"]); // [{ name: "b.exe", type: "" }]
+*/
+var wrongTypeFiles = (files, accept) => files.filter((file) => !isAccepted(file, accept));
+export { isAccepted, wrongTypeFiles };

package/dist/components/file-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./file-field.tsx";
+export * from "./file-input.tsx";
+export * from "./tsf-file-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/file-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/file-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/components/file-field/index.js

@@ -0,0 +1,4 @@
+import { FileField } from "./file-field.js";
+import { FileInput } from "./file-input.js";
+import { TSFFileField } from "./tsf-file-field.js";
+export { FileField, FileInput, TSFFileField };

package/dist/components/file-field/tsf-file-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type FileFieldProps } from "./file-field.tsx";
+export type TSFFileFieldProps = Omit<FileFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `FileField` bound to the TanStack Form field it renders in, reached as
+ * `field.FileField`. The field's value is the staged `File` list.
+ *
+ * @example
+ * <form.AppField name="attachments">
+ * 	{field => <field.FileField label="Attachments" optionalLabel="optional" maxFileSize={limit} {...fileCopy} />}
+ * </form.AppField>
+ */
+export declare const TSFFileField: (props: TSFFileFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-file-field.d.ts.map

package/dist/components/file-field/tsf-file-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-file-field.d.ts","sourceRoot":"","sources":["../../../src/components/file-field/tsf-file-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,cAAc,EACnB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACnC,cAAc,EACd,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,UACjB,iBAAiB,KACtB,SAgBF,CAAC"}

package/dist/components/file-field/tsf-file-field.js

@@ -0,0 +1,48 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { FileField } from "./file-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/file-field/tsf-file-field.tsx
+/**
+* `FileField` bound to the TanStack Form field it renders in, reached as
+* `field.FileField`. The field's value is the staged `File` list.
+*
+* @example
+* <form.AppField name="attachments">
+* 	{field => <field.FileField label="Attachments" optionalLabel="optional" maxFileSize={limit} {...fileCopy} />}
+* </form.AppField>
+*/
+var TSFFileField = (props) => {
+	const $ = c(11);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (files) => field.handleChange(files);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected.dirty || $[3] !== connected.errors || $[4] !== connected.onBlur || $[5] !== connected.pending || $[6] !== connected.touched || $[7] !== field.state.value || $[8] !== props || $[9] !== t0) {
+		t1 = /* @__PURE__ */ jsx(FileField, {
+			...props,
+			errors: connected.errors,
+			dirty: connected.dirty,
+			touched: connected.touched,
+			pending: connected.pending,
+			onBlur: connected.onBlur,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected.dirty;
+		$[3] = connected.errors;
+		$[4] = connected.onBlur;
+		$[5] = connected.pending;
+		$[6] = connected.touched;
+		$[7] = field.state.value;
+		$[8] = props;
+		$[9] = t0;
+		$[10] = t1;
+	} else t1 = $[10];
+	return t1;
+};
+export { TSFFileField };

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

@@ -0,0 +1,34 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._bar_1j1i8_3 {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-gap, var(--sys-unit-8));
+  }
+  ._search_1j1i8_10 {
+    flex: 1 1 var(--filter-bar-search-basis, var(--sys-unit-64));
+    min-inline-size: 0;
+  }
+  ._active_1j1i8_14 {
+    display: flex;
+    flex: 1 0 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-active-gap, var(--sys-unit-4));
+  }
+  ._fields_1j1i8_21 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--filter-bar-fields-gap, var(--sys-unit-12));
+    margin-block-start: var(--sys-unit-12);
+  }
+  ._footer_1j1i8_27 {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sys-unit-8);
+    margin-block-start: var(--sys-unit-16);
+  }
+}

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

@@ -0,0 +1,86 @@
+import { type ReactNode } from "react";
+import type { FilterView } from "./use-filter-view.ts";
+export type FilterBarRootProps<TFilters extends object> = Readonly<{
+    filters: FilterView<TFilters>;
+    children: ReactNode;
+    className?: string;
+}>;
+declare const Root: <TFilters extends object>({ filters, children, className, }: FilterBarRootProps<TFilters>) => ReactNode;
+export type FilterBarSearchProps = Readonly<{
+    /** Names the field and fills its placeholder, such as "Search clients". */
+    label: string;
+    /** The clear button's name and tooltip, such as "Clear search". */
+    clearLabel: string;
+    className?: string;
+}>;
+/**
+ * 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.
+ */
+declare const Search: ({ label, clearLabel, className, }: FilterBarSearchProps) => ReactNode;
+export type FilterBarDrawerProps = Readonly<{
+    /** The filter controls, bound to the view's `draft`. */
+    children: ReactNode;
+    /**
+     * Where the drawer comes from: `"right"` for a side panel, `"down"` for a
+     * bottom sheet, for example from the app's own viewport query.
+     */
+    swipeDirection: "right" | "down";
+    /** The trigger's label, such as "Filters". */
+    triggerLabel: string;
+    /** The drawer's title, such as "Filter clients". */
+    title: string;
+    /** The close button's name and tooltip, such as "Close". */
+    closeLabel: string;
+    /** The button that restores the initial filters, such as "Reset". */
+    resetLabel: string;
+    /** The button that commits the draft, such as "Apply". */
+    applyLabel: string;
+    className?: string;
+}>;
+/**
+ * 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.
+ */
+declare const FilterDrawer: ({ children, swipeDirection, triggerLabel, title, closeLabel, resetLabel, applyLabel, className, }: FilterBarDrawerProps) => ReactNode;
+export type FilterBarActiveProps = Readonly<{
+    /** The chips for the committed filters, i.e. an `<ActiveFilters>`. */
+    children?: ReactNode;
+    /** The button that clears every filter and the search, such as "Clear filters". */
+    clearAllLabel: string;
+    className?: string;
+}>;
+/**
+ * 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.
+ */
+declare const Active: ({ children, clearAllLabel, className, }: FilterBarActiveProps) => ReactNode;
+type FilterBarParts = Readonly<{
+    Root: typeof Root;
+    Search: typeof Search;
+    Drawer: typeof FilterDrawer;
+    Active: typeof Active;
+}>;
+/**
+ * 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>
+ */
+export declare const FilterBar: FilterBarParts;
+export {};
+//# sourceMappingURL=filter-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../../src/components/filter-bar/filter-bar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEN,KAAK,SAAS,EAGd,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAuBvD,MAAM,MAAM,kBAAkB,CAAC,QAAQ,SAAS,MAAM,IACrD,QAAQ,CAAC;IACR,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ,QAAA,MAAM,IAAI,GAAI,QAAQ,SAAS,MAAM,qCAIlC,kBAAkB,CAAC,QAAQ,CAAC,KAAG,SAMjC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;GAIG;AACH,QAAA,MAAM,MAAM,sCAIT,oBAAoB,KAAG,SAezB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,8CAA8C;IAC9C,YAAY,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,QAAA,MAAM,YAAY,sGASf,oBAAoB,KAAG,SA2EzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mFAAmF;IACnF,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;GAIG;AACH,QAAA,MAAM,MAAM,4CAIT,oBAAoB,KAAG,SAkBzB,CAAC;AAEF,KAAK,cAAc,GAAG,QAAQ,CAAC;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,MAAM,EAAE,OAAO,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS,EAAE,cAKvB,CAAC"}