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

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

@@ -1,17 +1,15 @@
-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 { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DropZone, FileTrigger, TagGroup, TagList } from "react-aria-components";
 import { Fieldset } from "@base-ui/react/fieldset";
 // src/components/file-field/file-input.tsx
+/** The fieldset around the file input, which projects its state as `data-*` attributes. */
 var FileInputRoot = (t0) => {
 	const $ = c(15);
 	let disabled;
@@ -62,6 +60,7 @@ var FileInputRoot = (t0) => {
 	} else t4 = $[14];
 	return t4;
 };
+/** The legend that names the fieldset. */
 var FileInputLegend = (props) => {
 	const $ = c(3);
 	let t0;
@@ -81,6 +80,7 @@ var FileInputLegend = (props) => {
 	} else t1 = $[2];
 	return t1;
 };
+/** The area files are dropped on, holding the hint, the picker button and the staged files. */
 var FileInputDropTarget = (t0) => {
 	const $ = c(14);
 	let className;
@@ -129,120 +129,132 @@ var FileInputDropTarget = (t0) => {
 	} else t4 = $[13];
 	return t4;
 };
+/** The prompt inside the drop target, with an optional `icon` above it. */
 var FileInputHint = (t0) => {
-	const $ = c(11);
+	const $ = c(14);
 	let children;
 	let className;
+	let icon;
 	let props;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({className, icon, children, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = props;
+		$[3] = icon;
+		$[4] = props;
 	} else {
 		children = $[1];
 		className = $[2];
-		props = $[3];
+		icon = $[3];
+		props = $[4];
 	}
 	let t1;
-	if ($[4] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(file_field_module_default.hint, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Icon, {
-			svg: SvgUploadFile,
-			label: "",
-			size: 1.5
+	if ($[7] !== icon) {
+		t2 = icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: file_field_module_default.hintIcon,
+			children: icon
 		});
-		$[6] = t2;
-	} else t2 = $[6];
+		$[7] = icon;
+		$[8] = t2;
+	} else t2 = $[8];
 	let t3;
-	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+	if ($[9] !== children || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
 		t3 = /* @__PURE__ */ jsxs("p", {
 			className: t1,
 			...props,
 			children: [t2, children]
 		});
-		$[7] = children;
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[9] = children;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
 	return t3;
 };
+/** The button that opens the file dialog. */
 var FileInputTrigger = (t0) => {
-	const $ = c(20);
+	const $ = c(22);
 	let buttonRef;
 	let describedBy;
 	let disabled;
+	let icon;
 	let invalid;
 	let label;
 	let props;
 	if ($[0] !== t0) {
-		({label, disabled, describedBy, buttonRef, invalid, ...props} = t0);
+		({label, disabled, describedBy, buttonRef, invalid, icon, ...props} = t0);
 		$[0] = t0;
 		$[1] = buttonRef;
 		$[2] = describedBy;
 		$[3] = disabled;
-		$[4] = invalid;
-		$[5] = label;
-		$[6] = props;
+		$[4] = icon;
+		$[5] = invalid;
+		$[6] = label;
+		$[7] = props;
 	} else {
 		buttonRef = $[1];
 		describedBy = $[2];
 		disabled = $[3];
-		invalid = $[4];
-		label = $[5];
-		props = $[6];
+		icon = $[4];
+		invalid = $[5];
+		label = $[6];
+		props = $[7];
 	}
 	const t1 = invalid === true ? "invalid" : void 0;
 	let t2;
-	if ($[7] !== t1) {
+	if ($[8] !== t1) {
 		t2 = fieldStateAttributes({ validity: t1 });
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[9] !== disabled) {
+	if ($[10] !== disabled) {
 		t3 = /* @__PURE__ */ jsx(Button, { isDisabled: disabled });
-		$[9] = disabled;
-		$[10] = t3;
-	} else t3 = $[10];
+		$[10] = disabled;
+		$[11] = t3;
+	} else t3 = $[11];
 	let t4;
-	if ($[11] !== buttonRef || $[12] !== describedBy || $[13] !== label || $[14] !== t2 || $[15] !== t3) {
+	if ($[12] !== buttonRef || $[13] !== describedBy || $[14] !== icon || $[15] !== label || $[16] !== t2 || $[17] !== t3) {
 		t4 = /* @__PURE__ */ jsx(Button$1, {
 			variant: "secondary",
 			size: "sm",
-			icon: SvgAttachFile,
+			icon,
 			ref: buttonRef,
 			"aria-describedby": describedBy,
 			...t2,
 			render: t3,
 			children: label
 		});
-		$[11] = buttonRef;
-		$[12] = describedBy;
-		$[13] = label;
-		$[14] = t2;
-		$[15] = t3;
-		$[16] = t4;
-	} else t4 = $[16];
+		$[12] = buttonRef;
+		$[13] = describedBy;
+		$[14] = icon;
+		$[15] = label;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+	} else t4 = $[18];
 	let t5;
-	if ($[17] !== props || $[18] !== t4) {
+	if ($[19] !== props || $[20] !== t4) {
 		t5 = /* @__PURE__ */ jsx(FileTrigger, {
 			...props,
 			children: t4
 		});
-		$[17] = props;
-		$[18] = t4;
-		$[19] = t5;
-	} else t5 = $[19];
+		$[19] = props;
+		$[20] = t4;
+		$[21] = t5;
+	} else t5 = $[21];
 	return t5;
 };
+/** The staged files, as a group of removable tiles. */
 var FileInputList = (t0) => {
 	const $ = c(9);
 	const { label, onRemove, children, className } = t0;
@@ -276,29 +288,37 @@ var FileInputList = (t0) => {
 	} else t3 = $[8];
 	return t3;
 };
+/** One staged file as an `AttachmentTile`. */
 var FileInputItem = (t0) => {
-	const $ = c(7);
-	const { id, file, hint, invalid: t1, disabled: t2, removeLabel } = t0;
+	const $ = c(8);
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({invalid: t1, disabled: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
 	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) {
+	if ($[4] !== disabled || $[5] !== invalid || $[6] !== props) {
 		t3 = /* @__PURE__ */ jsx(AttachmentTile, {
-			id,
-			file,
-			hint,
-			removeLabel,
 			invalid,
-			disabled
+			disabled,
+			...props
 		});
-		$[0] = disabled;
-		$[1] = file;
-		$[2] = hint;
-		$[3] = id;
-		$[4] = invalid;
-		$[5] = removeLabel;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[4] = disabled;
+		$[5] = invalid;
+		$[6] = props;
+		$[7] = t3;
+	} else t3 = $[7];
 	return t3;
 };
 /**
@@ -311,10 +331,10 @@ var FileInputItem = (t0) => {
 * <FileInput.Root state={{ requiredness: "optional" }}>
 * 	<FileInput.Legend optionalLabel="optional">Attachments</FileInput.Legend>
 * 	<FileInput.DropTarget aria-label="Drop zone for attachments" onDrop={onDrop}>
-* 		<FileInput.Hint>Drag files here</FileInput.Hint>
-* 		<FileInput.Trigger label="Choose files" onSelect={onSelect} />
+* 		<FileInput.Hint icon={<UploadFileIcon />}>Drag files here</FileInput.Hint>
+* 		<FileInput.Trigger label="Choose files" icon={<AttachFileIcon />} onSelect={onSelect} />
 * 		<FileInput.List label="Files for attachments" onRemove={onRemove}>
-* 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" />
+* 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" removeIcon={<CloseIcon />} />
 * 		</FileInput.List>
 * 	</FileInput.DropTarget>
 * </FileInput.Root>

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

@@ -1,85 +1,113 @@
-import { type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import { type BadgeProps } from "../badge/badge.tsx";
+import { type SearchFieldProps } from "../search-field/search-field.tsx";
 import type { FilterView } from "./use-filter-view.ts";
-export type FilterBarRootProps<TFilters extends object> = Readonly<{
+export type FilterBarRootProps<TFilters extends object> = useRender.ComponentProps<"search"> & 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;
-    /** The word an optional field's label trails, such as "optional", which every field takes. */
-    optionalLabel: string;
-    className?: string;
 }>;
+/** The `<search>` landmark holding a `useFilterView` for the parts inside it. */
+declare const Root: <TFilters extends object>({ filters, render, className, ref, ...props }: FilterBarRootProps<TFilters>) => ReactNode;
+export type FilterBarSearchProps = Omit<SearchFieldProps, "value" | "onValueChange">;
 /**
- * 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.
  */
-declare const Search: ({ label, clearLabel, optionalLabel, className, }: FilterBarSearchProps) => ReactNode;
+declare const Search: ({ label, labelHidden, placeholder, className, ...props }: FilterBarSearchProps) => ReactNode;
 export type FilterBarDrawerProps = Readonly<{
-    /** The filter controls, bound to the view's `draft`. */
+    /** The trigger and the drawer's content: `FilterBar.Trigger` and `FilterBar.Content`. */
     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.
+ * The apply-gated half: a `Drawer.Root` whose draft `FilterBar.Apply` commits.
+ * Dismissing the drawer any other way discards the draft.
  */
-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;
+declare const FilterDrawer: ({ children, swipeDirection, }: FilterBarDrawerProps) => ReactNode;
+/** What the action buttons of a filter bar take. */
+export type FilterBarButtonProps = Omit<ComponentProps<"button">, "ref" | "children"> & Readonly<{
+    /** The glyph leading the label. */
+    icon?: ReactNode;
+    /** The button's label. */
+    children: ReactNode;
+}>;
+/** The button that opens the drawer, such as "Filters" with a `FilterBar.Badge`. */
+declare const Trigger: ({ icon, children, ...props }: FilterBarButtonProps) => ReactNode;
+export type FilterBarBadgeProps = Omit<BadgeProps, "children">;
+/** How many filters are applied, for the trigger. Renders nothing while none are. */
+declare const FilterBadge: ({ tone, variant, ...props }: FilterBarBadgeProps) => ReactNode;
+export type FilterBarContentProps = Readonly<{
+    /** The drawer's header, its `FilterBar.Fields` and its `FilterBar.Footer`. */
+    children: ReactNode;
     className?: string;
 }>;
+/** The drawer itself: its portal, backdrop, viewport and popup, around the content. */
+declare const Content: ({ children, className, }: FilterBarContentProps) => ReactNode;
+export type FilterBarFieldsProps = useRender.ComponentProps<"div">;
+/** The filter controls, bound to the view's `draft`, in a column. */
+declare const Fields: ({ render, className, ref, ...props }: FilterBarFieldsProps) => ReactElement;
+export type FilterBarFooterProps = useRender.ComponentProps<"div">;
+/** The drawer's actions, `FilterBar.Reset` and `FilterBar.Apply`, at its end. */
+declare const Footer: ({ render, className, ref, ...props }: FilterBarFooterProps) => ReactElement;
+/** Puts the draft back to the initial filters, without closing the drawer. */
+declare const Reset: ({ icon, children, onClick, ...props }: FilterBarButtonProps) => ReactNode;
+/** Commits the draft and closes the drawer. */
+declare const Apply: ({ icon, children, onClick, ...props }: FilterBarButtonProps) => ReactNode;
+export type FilterBarActiveProps = useRender.ComponentProps<"div">;
 /**
- * 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.
  */
-declare const Active: ({ children, clearAllLabel, className, }: FilterBarActiveProps) => ReactNode;
+declare const Active: ({ render, className, ref, ...props }: FilterBarActiveProps) => ReactElement | null;
+/** Clears every committed filter and the search. */
+declare const ClearAll: ({ icon, children, onClick, ...props }: FilterBarButtonProps) => ReactNode;
 type FilterBarParts = Readonly<{
     Root: typeof Root;
     Search: typeof Search;
     Drawer: typeof FilterDrawer;
+    Trigger: typeof Trigger;
+    Badge: typeof FilterBadge;
+    Content: typeof Content;
+    Fields: typeof Fields;
+    Footer: typeof Footer;
+    Reset: typeof Reset;
+    Apply: typeof Apply;
     Active: typeof Active;
+    ClearAll: typeof ClearAll;
 }>;
 /**
- * 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>
  */