@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

package/dist/components/accordion/accordion.js

@@ -0,0 +1,184 @@
+import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
+import { Icon } from "../icon/icon.js";
+import accordion_module_default from "./accordion.module.js";
+import { c } from "react/compiler-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+// src/components/accordion/accordion.tsx
+var Root = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(accordion_module_default.root, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Accordion.Root, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Item = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(accordion_module_default.item, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Accordion.Item, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Trigger = (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(accordion_module_default.trigger, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			svg: SvgExpandMore,
+			label: "",
+			size: 1.5,
+			className: accordion_module_default.chevron
+		});
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			className: t1,
+			...props,
+			children: [children, t2]
+		});
+		$[7] = children;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+var Panel = (t0) => {
+	const $ = c(12);
+	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(accordion_module_default.content, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== children || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[6] = children;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Accordion.Panel, {
+			className: accordion_module_default.panel,
+			...props,
+			children: t2
+		});
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+/**
+* A stack of panels that fold open and shut, each under a heading whose
+* trigger names it, on base-ui's `Accordion`. `Header` renders an `<h3>`; pass
+* `render={<h2 />}` where the page's outline needs another level.
+*
+* @example
+* <Accordion.Root>
+* 	<Accordion.Item value="fees">
+* 		<Accordion.Header>
+* 			<Accordion.Trigger>Fees</Accordion.Trigger>
+* 		</Accordion.Header>
+* 		<Accordion.Panel>{fees}</Accordion.Panel>
+* 	</Accordion.Item>
+* </Accordion.Root>
+*/
+var Accordion$1 = {
+	Root,
+	Item,
+	Header: Accordion.Header,
+	Trigger,
+	Panel
+};
+export { Accordion$1 as Accordion };

package/dist/components/accordion/accordion.module.js

@@ -0,0 +1,16 @@
+import './accordion.css';// src/components/accordion/accordion.module.scss
+var root = "_root_1u0up_3";
+var item = "_item_1u0up_8";
+var trigger = "_trigger_1u0up_12";
+var chevron = "_chevron_1u0up_64";
+var panel = "_panel_1u0up_75";
+var content = "_content_1u0up_90";
+var accordion_module_default = {
+	root,
+	item,
+	trigger,
+	chevron,
+	panel,
+	content
+};
+export { chevron, content, accordion_module_default as default, item, panel, root, trigger };

package/dist/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from "./accordion.tsx";

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion } from "./accordion.js";

package/dist/components/active-filters/active-filter-describers.d.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import type { Tone, ToneVariant } from "../../lib/tone.ts";
+/**
+ * One chip in an {@link ActiveFilters} row. `onRemove` defaults to clearing the
+ * whole field; `tone`/`variant` colour the chip.
+ */
+export type ActiveFilterDescriptor = Readonly<{
+    tone?: Tone;
+    variant?: ToneVariant;
+    onRemove?: () => void;
+}> & (Readonly<{
+    content: string;
+    /** A short plain-text label, where it differs from `content`. */
+    textValue?: string;
+}> | Readonly<{
+    content: ReactNode;
+    /** A short plain-text label for content that is not a string. */
+    textValue: string;
+}>);
+/**
+ * Per-field renderers for active-filter chips. Each receives the committed
+ * value and returns one descriptor, or an array of them for one chip per value.
+ */
+export type ActiveFilterDescribers<TFilters> = Readonly<{
+    [K in keyof TFilters]?: (value: NonNullable<TFilters[K]>) => ActiveFilterDescriptor | readonly ActiveFilterDescriptor[];
+}>;
+/**
+ * Builds a describer that renders one chip reading `Label: a, b, c` from a
+ * multi-value filter. `render` maps one value to its display text.
+ *
+ * @example
+ * // statuses?: DeclarationStatus[]
+ * describeList({
+ * 	label: "Status",
+ * 	render: (status) => statusLabels[status](),
+ * })
+ */
+export declare const describeList: <T>({ label, render, tone, }: Readonly<{
+    label: string;
+    render?: (value: T) => string;
+    tone?: Tone;
+}>) => (values: ReadonlyArray<T>) => ActiveFilterDescriptor;
+/**
+ * Builds a describer for a single-value filter, rendering one chip reading
+ * `Label: value`. `render` maps the value to its display text.
+ *
+ * @example
+ * // rangeStartAt?: string (ISO)
+ * describeValue({ label: "From", render: formatDate })
+ */
+export declare const describeValue: <T>({ label, render, tone, }: Readonly<{
+    label: string;
+    render?: (value: T) => string;
+    tone?: Tone;
+}>) => (value: T) => ActiveFilterDescriptor;
+/**
+ * Builds a describer for a boolean flag — one chip showing the label when the
+ * flag is on.
+ *
+ * @example describeFlag("Archived")
+ */
+export declare const describeFlag: (label: string, tone?: Tone) => () => ActiveFilterDescriptor;

package/dist/components/active-filters/active-filter-describers.js

@@ -0,0 +1,48 @@
+// src/components/active-filters/active-filter-describers.ts
+/**
+* Builds a describer that renders one chip reading `Label: a, b, c` from a
+* multi-value filter. `render` maps one value to its display text.
+*
+* @example
+* // statuses?: DeclarationStatus[]
+* describeList({
+* 	label: "Status",
+* 	render: (status) => statusLabels[status](),
+* })
+*/
+var describeList = ({ label, render = String, tone }) => (values) => {
+	const content = `${label}: ${values.map(render).join(", ")}`;
+	return {
+		content,
+		textValue: content,
+		tone
+	};
+};
+/**
+* Builds a describer for a single-value filter, rendering one chip reading
+* `Label: value`. `render` maps the value to its display text.
+*
+* @example
+* // rangeStartAt?: string (ISO)
+* describeValue({ label: "From", render: formatDate })
+*/
+var describeValue = ({ label, render = String, tone }) => (value) => {
+	const content = `${label}: ${render(value)}`;
+	return {
+		content,
+		textValue: content,
+		tone
+	};
+};
+/**
+* Builds a describer for a boolean flag — one chip showing the label when the
+* flag is on.
+*
+* @example describeFlag("Archived")
+*/
+var describeFlag = (label, tone) => () => ({
+	content: label,
+	textValue: label,
+	tone
+});
+export { describeFlag, describeList, describeValue };

package/dist/components/active-filters/active-filters.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { type FilterView } from "../filter-bar/use-filter-view.ts";
+import type { ActiveFilterDescribers } from "./active-filter-describers.ts";
+export type ActiveFiltersProps<TFilters extends object> = Readonly<{
+    filters: FilterView<TFilters>;
+    /** Maps a filter key + value to one or more chip descriptors. */
+    describe: ActiveFilterDescribers<TFilters>;
+    /** What the chips are, such as "Active filters". */
+    label: string;
+    /** Each chip's remove button's name and tooltip, such as "Remove". */
+    removeLabel: string;
+    className?: string;
+}>;
+/**
+ * A roving-focus row of removable chips for the committed filters, on the
+ * kit's `TagGroup`. Renders one or more chips per described, non-empty
+ * committed field, and nothing when none are active.
+ *
+ * @example
+ * <ActiveFilters
+ * 	filters={filters}
+ * 	describe={{ status: describeValue({ label: "Status" }) }}
+ * 	label="Active filters"
+ * 	removeLabel="Remove"
+ * />
+ */
+export declare const ActiveFilters: <TFilters extends object>({ filters, describe, label, removeLabel, className, }: ActiveFiltersProps<TFilters>) => ReactNode;

package/dist/components/active-filters/active-filters.js

@@ -0,0 +1,96 @@
+import { isActiveFilterValue } from "../filter-bar/use-filter-view.js";
+import { TagGroup } from "../tag-group/tag-group.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/active-filters/active-filters.tsx
+var buildChips = (filters, describe) => {
+	return Object.keys(describe).filter((key) => key in describe).flatMap((key) => {
+		const value = filters.committed[key];
+		if (!isActiveFilterValue(value)) return [];
+		const described = describe[key]?.(value);
+		if (!described) return [];
+		return (Array.isArray(described) ? described : [described]).map((descriptor, index) => ({
+			id: `${key}#${index}`,
+			content: descriptor.content,
+			textValue: descriptor.textValue ?? (typeof descriptor.content === "string" ? descriptor.content : void 0),
+			tone: descriptor.tone,
+			variant: descriptor.variant ?? "subtle",
+			onRemove: descriptor.onRemove ?? (() => {
+				filters.removeFilter(key);
+			})
+		}));
+	});
+};
+/**
+* A roving-focus row of removable chips for the committed filters, on the
+* kit's `TagGroup`. Renders one or more chips per described, non-empty
+* committed field, and nothing when none are active.
+*
+* @example
+* <ActiveFilters
+* 	filters={filters}
+* 	describe={{ status: describeValue({ label: "Status" }) }}
+* 	label="Active filters"
+* 	removeLabel="Remove"
+* />
+*/
+var ActiveFilters = (t0) => {
+	const $ = c(15);
+	const { filters, describe, label, removeLabel, className } = t0;
+	let t1;
+	if ($[0] !== describe || $[1] !== filters) {
+		t1 = buildChips(filters, describe);
+		$[0] = describe;
+		$[1] = filters;
+		$[2] = t1;
+	} else t1 = $[2];
+	const chips = t1;
+	if (chips.length === 0) return null;
+	let t2;
+	if ($[3] !== chips) {
+		t2 = (keys) => {
+			for (const chip of chips) if (keys.has(chip.id)) chip.onRemove();
+		};
+		$[3] = chips;
+		$[4] = t2;
+	} else t2 = $[4];
+	const handleRemove = t2;
+	let t3;
+	if ($[5] !== removeLabel) {
+		t3 = (chip_0) => /* @__PURE__ */ jsxs(TagGroup.Tag, {
+			id: chip_0.id,
+			textValue: chip_0.textValue,
+			tone: chip_0.tone,
+			variant: chip_0.variant,
+			children: [chip_0.content, /* @__PURE__ */ jsx(TagGroup.Remove, { label: removeLabel })]
+		});
+		$[5] = removeLabel;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== chips || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TagGroup.List, {
+			items: chips,
+			children: t3
+		});
+		$[7] = chips;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== className || $[11] !== handleRemove || $[12] !== label || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(TagGroup.Root, {
+			"aria-label": label,
+			onRemove: handleRemove,
+			className,
+			children: t4
+		});
+		$[10] = className;
+		$[11] = handleRemove;
+		$[12] = label;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
+};
+export { ActiveFilters };

package/dist/components/active-filters/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./active-filter-describers.ts";
+export * from "./active-filters.tsx";

package/dist/components/active-filters/index.js

@@ -0,0 +1,3 @@
+import { describeFlag, describeList, describeValue } from "./active-filter-describers.js";
+import { ActiveFilters } from "./active-filters.js";
+export { ActiveFilters, describeFlag, describeList, describeValue };

package/dist/components/attachment-tile/attachment-preview.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+/** An image source for a preview, and whether one is still on its way. */
+export type AttachmentPreviewSource = Readonly<{
+    src: string | undefined;
+    pending: boolean;
+}>;
+/**
+ * Reads an image blob into a `data:` URL for an inline preview, for as long as
+ * the caller is mounted. A blob that is not an image gets none.
+ *
+ * @example
+ * useAttachmentPreview(file); // -> { src: "data:image/png;base64,…", pending: false }
+ */
+export declare const useAttachmentPreview: (blob: Blob | undefined) => AttachmentPreviewSource;
+export type AttachmentPreviewProps = Readonly<{
+    name: string;
+    /** Tooltip text for the preview. */
+    hint: string;
+    /** Image source; without one the tile shows a glyph and the extension. */
+    src: string | undefined;
+    /** Whether an image source is still being produced. */
+    pending?: boolean;
+}>;
+/**
+ * The inside of an attachment tile: an image preview where there is one, a file
+ * glyph and the extension otherwise, plus the file name for assistive tech. A
+ * source that is still arriving shows a skeleton; one that fails to load falls
+ * back to the glyph.
+ *
+ * @example
+ * <AttachmentPreview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
+ */
+export declare const AttachmentPreview: ({ name, hint, src, pending, }: AttachmentPreviewProps) => ReactNode;

package/dist/components/attachment-tile/attachment-preview.js

@@ -0,0 +1,181 @@
+import SvgDescription from "../../vendor/@material-design-icons/svg/outlined/description.js";
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { Icon } from "../icon/icon.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import attachment_tile_module_default from "./attachment-tile.module.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/attachment-tile/attachment-preview.tsx
+var extensionOf = (name) => {
+	const dot = name.lastIndexOf(".");
+	return dot > 0 ? name.slice(dot + 1) : "";
+};
+/**
+* Reads an image blob into a `data:` URL for an inline preview, for as long as
+* the caller is mounted. A blob that is not an image gets none.
+*
+* @example
+* useAttachmentPreview(file); // -> { src: "data:image/png;base64,…", pending: false }
+*/
+var useAttachmentPreview = (blob) => {
+	const $ = c(6);
+	const image = blob?.type.startsWith("image/") ? blob : void 0;
+	const [read, setRead] = useState();
+	const dataUrl = read !== void 0 && read.blob === image ? read.dataUrl : void 0;
+	let t0;
+	let t1;
+	if ($[0] !== image) {
+		t0 = () => {
+			if (!image) return;
+			let cancelled = false;
+			const reader = new FileReader();
+			reader.onload = () => {
+				if (!cancelled && typeof reader.result === "string") setRead({
+					blob: image,
+					dataUrl: reader.result
+				});
+			};
+			reader.readAsDataURL(image);
+			return () => {
+				cancelled = true;
+				reader.abort();
+			};
+		};
+		t1 = [image];
+		$[0] = image;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	const t2 = image !== void 0 && dataUrl === void 0;
+	let t3;
+	if ($[3] !== dataUrl || $[4] !== t2) {
+		t3 = {
+			src: dataUrl,
+			pending: t2
+		};
+		$[3] = dataUrl;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+};
+/**
+* The inside of an attachment tile: an image preview where there is one, a file
+* glyph and the extension otherwise, plus the file name for assistive tech. A
+* source that is still arriving shows a skeleton; one that fails to load falls
+* back to the glyph.
+*
+* @example
+* <AttachmentPreview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
+*/
+var AttachmentPreview = (t0) => {
+	const $ = c(23);
+	const { name, hint, src, pending: t1 } = t0;
+	const pending = t1 === void 0 ? false : t1;
+	const [loadedSrc, setLoadedSrc] = useState();
+	const [brokenSrc, setBrokenSrc] = useState();
+	let t2;
+	if ($[0] !== name) {
+		t2 = extensionOf(name);
+		$[0] = name;
+		$[1] = t2;
+	} else t2 = $[1];
+	const extension = t2;
+	const image = src === brokenSrc ? void 0 : src;
+	const t3 = pending || image !== void 0 && image !== loadedSrc;
+	let t4;
+	if ($[2] !== t3) {
+		t4 = { busy: t3 };
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	const busy = useBusyPhase(t4) !== "fresh";
+	let t5;
+	if ($[4] !== image) {
+		t5 = (node) => {
+			if (image === void 0 || !node?.complete) return;
+			if (node.naturalWidth === 0) {
+				setBrokenSrc(image);
+				return;
+			}
+			setLoadedSrc(image);
+		};
+		$[4] = image;
+		$[5] = t5;
+	} else t5 = $[5];
+	const settleAlreadyDecoded = t5;
+	const t6 = busy || void 0;
+	let t7;
+	if ($[6] !== extension || $[7] !== image || $[8] !== pending || $[9] !== settleAlreadyDecoded) {
+		t7 = image === void 0 ? pending ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+			svg: SvgDescription,
+			size: 1.5,
+			label: ""
+		}), extension === "" ? null : /* @__PURE__ */ jsx("span", {
+			className: attachment_tile_module_default.extension,
+			children: extension
+		})] }) : /* @__PURE__ */ jsx("img", {
+			ref: settleAlreadyDecoded,
+			src: image,
+			alt: "",
+			className: attachment_tile_module_default.image,
+			onLoad: () => setLoadedSrc(image),
+			onError: () => setBrokenSrc(image)
+		});
+		$[6] = extension;
+		$[7] = image;
+		$[8] = pending;
+		$[9] = settleAlreadyDecoded;
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== busy) {
+		t8 = busy ? /* @__PURE__ */ jsx(Skeleton, { className: attachment_tile_module_default.imageSkeleton }) : null;
+		$[11] = busy;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== name) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: attachment_tile_module_default.name,
+			children: name
+		});
+		$[13] = name;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("span", {
+			className: attachment_tile_module_default.preview,
+			"aria-busy": t6,
+			children: [
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== hint || $[21] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Tooltip, {
+			content: hint,
+			children: t10
+		});
+		$[20] = hint;
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	return t11;
+};
+export { AttachmentPreview, useAttachmentPreview };