@parallelworks/ui 0.43.0 → 0.45.0

package/dist/components/Meter.js

@@ -0,0 +1,94 @@
+import { cx } from "../cx.js";
+import { Tooltip } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/Meter.tsx
+var fillClassName = {
+	accent: "bg-(--theme-accent)",
+	success: "bg-green-600",
+	warning: "bg-amber-500",
+	error: "bg-red-600",
+	muted: "bg-(--theme-muted-text-color)"
+};
+var trackClassName = {
+	sm: "h-1",
+	md: "h-1.5",
+	lg: "h-2"
+};
+var labelRowClassName = "mb-1 flex items-baseline justify-between gap-2 text-[13px]";
+var detailClassName = "mt-1 text-[11px] tabular-nums text-(--theme-muted-text-color)";
+/** The tone for `value` against a warning and an error level, for a measure
+*  that's worse the higher it reads. */
+function levelTone(value, warnAt, errorAt) {
+	return value >= errorAt ? "error" : value >= warnAt ? "warning" : "accent";
+}
+/** How full something is, such as storage used or a quota spent: a reading,
+*  not a task under way (that's `ProgressBar`). The bar turns amber, then red,
+*  as it passes `warnAt` and `errorAt`; `tone` overrides that. */
+function Meter$1({ value, min = 0, max = 100, warnAt = 80, errorAt = 90, tone, format, showValue = "beside", label, "aria-label": ariaLabel, detail, size = "md", className }) {
+	const clamped = Math.min(Math.max(value, min), max);
+	const fill = fillClassName[tone ?? levelTone(clamped, warnAt, errorAt)];
+	const shownValue = /* @__PURE__ */ jsx(Meter.Value, { className: "shrink-0 font-medium tabular-nums theme-text" });
+	const track = /* @__PURE__ */ jsx(Meter.Track, {
+		className: cx("w-full overflow-hidden rounded-full bg-(--theme-border)", trackClassName[size]),
+		children: /* @__PURE__ */ jsx(Meter.Indicator, { className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", fill) })
+	});
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		value: clamped,
+		min,
+		max,
+		format,
+		"aria-label": ariaLabel,
+		className: cx("min-w-0", className),
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsxs("div", {
+				className: labelRowClassName,
+				children: [/* @__PURE__ */ jsx(Meter.Label, {
+					className: "min-w-0 truncate theme-text",
+					children: label
+				}), showValue === "beside" && shownValue]
+			}),
+			showValue === "tooltip" ? /* @__PURE__ */ jsx(Tooltip, {
+				content: formatShare(clamped, min, max, format),
+				children: track
+			}) : track,
+			detail !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: detailClassName,
+				children: detail
+			})
+		]
+	});
+}
+function formatShare(value, min, max, format) {
+	return format ? new Intl.NumberFormat(void 0, format).format(value) : new Intl.NumberFormat(void 0, { style: "percent" }).format((value - min) / (max - min || 1));
+}
+/** How far a task has come, such as an upload, out of `max`; `null` while
+*  that's not known. Name it with `label` or `aria-label`. */
+function ProgressBar({ value, max = 100, tone = "accent", status, label, "aria-label": ariaLabel, detail, size = "md", className }) {
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		value,
+		max,
+		"aria-label": ariaLabel,
+		className: cx("min-w-0", className),
+		children: [
+			(label !== void 0 || status !== void 0) && /* @__PURE__ */ jsxs("div", {
+				className: labelRowClassName,
+				children: [/* @__PURE__ */ jsx(Progress.Label, {
+					className: "min-w-0 truncate theme-muted-text",
+					children: label
+				}), status ?? /* @__PURE__ */ jsx(Progress.Value, { className: "shrink-0 tabular-nums theme-muted-text" })]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: cx("w-full overflow-hidden rounded-full bg-(--theme-border)", trackClassName[size]),
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: cx("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", "data-indeterminate:w-1/3 data-indeterminate:animate-pulse", fillClassName[tone]) })
+			}),
+			detail !== void 0 && /* @__PURE__ */ jsx("div", {
+				className: detailClassName,
+				children: detail
+			})
+		]
+	});
+}
+//#endregion
+export { Meter$1 as Meter, ProgressBar, levelTone };

package/dist/components/Modal.js

@@ -1,5 +1,5 @@
-import { portalContainer } from "./floating.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { pressedToast } from "./Toast.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog } from "@base-ui/react/dialog";
@@ -15,23 +15,20 @@ var ModalDescription = Dialog.Description;
 function Modal({ open, onClose, alert = false, dismissible = true, align = "top", panel = true, backdropClassName = "bg-black/40", className, children, ...popupProps }) {
 	const onOpenChange = (next, details) => {
 		if (next) return;
-		if (!dismissible && details.reason === "escape-key") {
+		if (!dismissible && details.reason === "escape-key" || details.reason === "outside-press" && pressedToast(details.event)) {
 			details.cancel();
 			return;
 		}
 		onClose();
 	};
-	const content = /* @__PURE__ */ jsxs(Dialog.Portal, {
-		container: portalContainer(),
-		children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: clsx("fixed inset-0 z-[9990]", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
-			className: clsx("fixed inset-0 z-[9990] flex justify-center px-4 pb-8", align === "center" ? "items-center" : "items-start pt-[14vh]"),
-			children: /* @__PURE__ */ jsx(Dialog.Popup, {
-				...popupProps,
-				className: clsx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", "outline-none", className),
-				children
-			})
-		})]
-	});
+	const content = /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cx("fixed inset-0 z-(--layer-modal)", backdropClassName) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: cx("fixed inset-0 z-(--layer-modal) flex justify-center px-4 pt-20 pb-8", align === "center" ? "items-center" : "items-start sm:pt-[max(14vh,5rem)]"),
+		children: /* @__PURE__ */ jsx(Dialog.Popup, {
+			...popupProps,
+			className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", "outline-none", className),
+			children
+		})
+	})] });
 	return alert ? /* @__PURE__ */ jsx(AlertDialog.Root, {
 		open,
 		onOpenChange,

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,25 @@
+import { NumberField } from '@base-ui/react/number-field';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface NumberInputProps extends Omit<NumberField.Root.Props, 'className' | 'children' | 'render'> {
+    /** How the value reads in the box: grouping, currency, units, percent. Intl's own options, so
+     *  `{ style: 'currency', currency: 'USD' }` or `{ style: 'unit', unit: 'gigabyte' }`. Digits
+     *  are kept as typed unless the format limits them, and grouping is off unless it turns it on. */
+    format?: Intl.NumberFormatOptions | undefined;
+    placeholder?: string | undefined;
+    /** Up and down buttons beside the value. */
+    steppers?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Marks the field required for assistive technology without the native check `required` adds. */
+    'aria-required'?: boolean | undefined;
+    size?: FieldBoxSize | undefined;
+    /** Applied to the box around the input and its steppers, such as a width. */
+    className?: string | undefined;
+}
+/** A number field: typing, arrow keys and the steppers move the value within `min` and `max`
+ *  by `step`, and `format` shows it as Intl formats it in the reader's locale. The value is a
+ *  number, or null while the box is empty. */
+export declare function NumberInput({ format, placeholder, steppers, autoFocus, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, size, className, ...rootProps }: NumberInputProps): import("react").JSX.Element;

package/dist/components/NumberInput.js

@@ -0,0 +1,55 @@
+import { cx } from "../cx.js";
+import { ChevronDownIcon, ChevronUpIcon } from "../icons.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/NumberInput.tsx
+var stepperClassName = "flex flex-1 items-center justify-center px-1 text-(--theme-muted-text-color) hover:text-(--theme-app) cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-40";
+/** A number field: typing, arrow keys and the steppers move the value within `min` and `max`
+*  by `step`, and `format` shows it as Intl formats it in the reader's locale. The value is a
+*  number, or null while the box is empty. */
+function NumberInput({ format, placeholder, steppers = true, autoFocus, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className, ...rootProps }) {
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		...rootProps,
+		format: {
+			maximumFractionDigits: 20,
+			useGrouping: false,
+			...format
+		},
+		children: /* @__PURE__ */ jsxs(NumberField.Group, {
+			className: cx(fieldBox({
+				size,
+				within: true,
+				padded: false
+			}), "relative", className),
+			children: [/* @__PURE__ */ jsx(NumberField.Input, {
+				placeholder,
+				autoFocus,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || void 0,
+				"data-1p-ignore": true,
+				className: cx("h-full w-full min-w-0 bg-transparent tabular-nums outline-none", size === "sm" ? "px-2" : "px-3", steppers && "pr-6")
+			}), steppers && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-y-0 right-0 flex flex-col",
+				children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+					className: stepperClassName,
+					children: /* @__PURE__ */ jsx(ChevronUpIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+					className: stepperClassName,
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+export { NumberInput };

package/dist/components/Overview.js

@@ -1,22 +1,24 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { LoadingRegion, Skeleton } from "./Skeleton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Overview.tsx
 function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center w-full", className),
+		className: cx("flex items-center w-full", className),
 		children: [
-			loading ? /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 animate-pulse rounded-full bg-(--theme-muted-panel-bg)",
-				style: {
-					width: iconSize,
-					height: iconSize
-				}
+			loading ? /* @__PURE__ */ jsx(Skeleton, {
+				circle: true,
+				height: iconSize,
+				className: "shrink-0"
 			}) : Icon,
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-col min-w-0 flex-1",
-				children: loading ? /* @__PURE__ */ jsxs("div", {
+				children: loading ? /* @__PURE__ */ jsx(LoadingRegion, {
 					className: "space-y-1",
-					children: [/* @__PURE__ */ jsx("div", { className: "h-3 animate-pulse rounded bg-(--theme-muted-panel-bg)" }), /* @__PURE__ */ jsx("div", { className: "h-3 animate-pulse rounded bg-(--theme-muted-panel-bg)" })]
+					children: /* @__PURE__ */ jsx(Skeleton, {
+						count: 2,
+						height: 12
+					})
 				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("div", {
 						className: "font-semibold text-xl tracking-tight",

package/dist/components/PageHeader.d.ts

@@ -9,7 +9,6 @@ export interface PageHeaderCrumb {
     label: ReactNode;
     href?: string;
 }
-export declare const headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
 /** With menu, the plus opens a chooser; otherwise navigates to or calls the
  * single action. `word` is the visible verb; `label` stays the full action for
  * the tooltip and screen readers. */
@@ -24,11 +23,11 @@ export declare function HeaderAddButton({ href, onClick, label, word, menu, disa
     disabledHint?: string;
 }): import("react").JSX.Element;
 /** The header's "…" menu of actions on the page's subject. */
-export declare function HeaderActionMenu({ items, label, }: {
+export declare function HeaderActionMenu({ items, label }: {
     items: MenuEntry[];
     label?: string;
 }): import("react").JSX.Element | null;
-export declare function HeaderEditButton({ href, onClick, label, disabled, tooltip, }: {
+export declare function HeaderEditButton({ href, onClick, label: labelProp, disabled, tooltip, }: {
     href?: string;
     onClick?: () => void;
     label?: string;

package/dist/components/PageHeader.js

@@ -1,26 +1,31 @@
-import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
-import { FaEdit } from "../icons/fa/FaEdit.js";
-import { FaPlus } from "../icons/fa/FaPlus.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { cx } from "../cx.js";
+import { AddIcon, ChevronRightIcon, EditIcon, MoreIcon } from "../icons.js";
 import { keyedByContent } from "./keys.js";
+import { buttonClasses } from "./buttonClasses.js";
 import { Tooltip } from "./Tooltip.js";
 import { useLink, useSlots, useStrings } from "./Provider.js";
 import { ActionMenu } from "./ActionMenu.js";
 import { useBreadcrumb } from "./Breadcrumbs.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 //#region src/components/PageHeader.tsx
-var headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
-var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium cursor-pointer text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+var headerActionButtonClasses = buttonClasses({
+	variant: "ghost",
+	size: "xs",
+	iconOnly: true
+});
+var headerAddButtonClasses = buttonClasses({
+	variant: "outline",
+	size: "xs"
+});
 /** With menu, the plus opens a chooser; otherwise navigates to or calls the
 * single action. `word` is the visible verb; `label` stays the full action for
 * the tooltip and screen readers. */
 function HeaderAddButton({ href, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
 	const { common } = useStrings();
 	const Link = useLink();
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FaPlus, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
 	if (menu) return /* @__PURE__ */ jsx(ActionMenu, {
 		items: menu,
 		label,
@@ -44,37 +49,40 @@ function HeaderAddButton({ href, onClick, label, word = "add", menu, disabled =
 			onClick: disabled ? void 0 : onClick,
 			"aria-label": hint ? `${label}. ${hint}` : label,
 			"aria-disabled": disabled || void 0,
-			className: clsx(headerAddButtonClasses, "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color)"),
+			className: headerAddButtonClasses,
 			children: content
 		})
 	});
 }
 /** The header's "…" menu of actions on the page's subject. */
-function HeaderActionMenu({ items, label = "Actions" }) {
+function HeaderActionMenu({ items, label }) {
+	const { common } = useStrings();
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsx(ActionMenu, {
 		items,
-		label,
+		label: label ?? common.actions,
 		triggerClassName: headerActionButtonClasses,
-		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "w-3.5 h-3.5" })
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
 	});
 }
-function HeaderEditButton({ href, onClick, label = "Edit", disabled, tooltip }) {
+function HeaderEditButton({ href, onClick, label: labelProp, disabled, tooltip }) {
 	const Link = useLink();
+	const { common } = useStrings();
+	const label = labelProp ?? common.edit;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: tooltip ?? label,
 		children: href && !disabled ? /* @__PURE__ */ jsx(Link, {
 			href,
 			"aria-label": label,
 			className: headerActionButtonClasses,
-			children: /* @__PURE__ */ jsx(FaEdit, { className: "w-3 h-3" })
+			children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
 		}) : /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick,
 			disabled,
 			"aria-label": label,
-			className: clsx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
-			children: /* @__PURE__ */ jsx(FaEdit, { className: "w-3 h-3" })
+			className: headerActionButtonClasses,
+			children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
 		})
 	});
 }
@@ -114,6 +122,7 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	const { setHidden } = useBreadcrumb();
 	const Link = useLink();
 	const { breadcrumbPin, navToggle } = useSlots();
+	const { common } = useStrings();
 	useLayoutEffect(() => {
 		setHidden(true);
 		return () => setHidden(false);
@@ -125,7 +134,7 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 		className: "flex items-center gap-1.5 min-w-0",
 		children: [
 			/* @__PURE__ */ jsx("nav", {
-				"aria-label": "Breadcrumb",
+				"aria-label": common.breadcrumb,
 				className: "flex items-center gap-2 min-w-0 text-[13px]",
 				children: keyedByContent(crumbs, (c) => c.href ?? (typeof c.label === "string" ? c.label : "crumb")).map(({ key, item: crumb }, idx) => {
 					if (idx === crumbs.length - 1) return /* @__PURE__ */ jsx("h1", {
@@ -139,7 +148,7 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 					}) : /* @__PURE__ */ jsx("span", {
 						className: "text-(--theme-muted-text-color) whitespace-nowrap",
 						children: crumb.label
-					}), /* @__PURE__ */ jsx(LuChevronRight, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
 				})
 			}),
 			titleAction,
@@ -157,9 +166,9 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 		children: [toggle, crumbRow]
 	}) : /* @__PURE__ */ jsx("div", {});
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(sticky && clsx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		className: cx(sticky && cx("sticky z-(--layer-header)", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx("flex items-center justify-between gap-6 px-4 h-11", hasLeading && "border-b border-(--theme-border)"),
+			className: cx("flex items-center justify-between gap-6 px-4 h-11", hasLeading && "border-b border-(--theme-border)"),
 			children: [leading, actionCluster]
 		}), toolbar && /* @__PURE__ */ jsx("div", {
 			className: "px-4",
@@ -168,4 +177,4 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	});
 }
 //#endregion
-export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader, headerActionButtonClasses };
+export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader };

package/dist/components/Pagination.d.ts

@@ -1,15 +1,28 @@
-interface IPaginationProps {
-    nextCallback: () => void;
-    prevCallback: () => void;
-    startingNumber?: string | number;
-    endingNumber?: string | number;
-    startingTime?: string | undefined;
-    endingTime?: string | undefined;
-    nextDisabled: boolean;
-    prevDisabled: boolean;
-    name?: string;
-    roundedBottom?: boolean;
-    useTimeRange?: boolean;
+import type { ReactNode } from 'react';
+/** Page sizes a list offers; the first is the default. */
+export declare const PAGE_SIZES: readonly [number, ...number[]];
+export interface PaginationProps {
+    /** The page shown, counting from 0. */
+    page: number;
+    pageSize: number;
+    /** How many rows there are. Leave it out for a list that only knows whether
+     *  more follow, and pass `hasNext`. */
+    total?: number | undefined;
+    /** Whether a page follows. Needed without a `total`, and for a total that is
+     *  a capped count, so paging doesn't stop at the cap. */
+    hasNext?: boolean | undefined;
+    /** Moves to a page. */
+    onPageChange?: ((page: number) => void) | undefined;
+    /** Makes each page a link instead, for pages the address names. */
+    pageHref?: ((page: number) => string) | undefined;
+    /** Page sizes to offer; shown only with `onPageSizeChange`. */
+    pageSizes?: readonly number[];
+    onPageSizeChange?: ((size: number) => void) | undefined;
+    /** Replaces "1–50 of 200", such as with the time range a page covers. */
+    summary?: ReactNode;
+    className?: string | undefined;
 }
-declare function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roundedBottom, startingNumber, startingTime, nextDisabled, prevDisabled, name, useTimeRange, }: IPaginationProps): import("react").JSX.Element;
-export { Pagination };
+/** Steps through a list a page at a time: where the page sits in the list,
+ *  previous and next, and optionally how many rows a page holds. Renders
+ *  nothing when everything fits on one page. */
+export declare function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes, onPageSizeChange, summary, className, }: PaginationProps): import("react").JSX.Element | null;

package/dist/components/Pagination.js

@@ -1,35 +1,96 @@
-import { useStrings } from "./Provider.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { Tooltip } from "./Tooltip.js";
+import { useLink, useStrings } from "./Provider.js";
+import { IconButton } from "./IconButton.js";
+import { Select } from "./Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Pagination.tsx
-function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roundedBottom, startingNumber, startingTime, nextDisabled, prevDisabled, name, useTimeRange = false }) {
+/** Page sizes a list offers; the first is the default. */
+var PAGE_SIZES = [
+	50,
+	100,
+	200
+];
+/** Steps through a list a page at a time: where the page sits in the list,
+*  previous and next, and optionally how many rows a page holds. Renders
+*  nothing when everything fits on one page. */
+function Pagination({ page, pageSize, total, hasNext, onPageChange, pageHref, pageSizes = PAGE_SIZES, onPageSizeChange, summary, className }) {
 	const t = useStrings().list;
+	const start = page * pageSize + 1;
+	const pageEnd = (page + 1) * pageSize;
+	const known = total !== void 0;
+	const pageCount = known ? Math.max(1, Math.ceil(total / pageSize)) : void 0;
+	const pastCap = known && hasNext === true && pageEnd >= total;
+	const end = known && !pastCap ? Math.min(total, pageEnd) : pageEnd;
+	const hasPrevious = page > 0;
+	const hasMore = hasNext ?? (pageCount !== void 0 && page < pageCount - 1);
+	const smallest = Math.min(...pageSizes);
+	const showSizes = !!onPageSizeChange && (known && total > smallest || pageSize > smallest);
+	if (!hasPrevious && !hasMore && !showSizes) return null;
+	const position = summary ?? (known ? t.pager(start, end, pastCap ? end : total, pastCap) : null);
 	return /* @__PURE__ */ jsxs("nav", {
-		className: clsx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
-		"aria-label": "Pagination",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: clsx("hidden", (startingNumber !== void 0 && endingNumber !== void 0 || startingTime && endingTime) && "sm:block"),
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-sm whitespace-nowrap",
-				children: useTimeRange && startingTime && endingTime ? t.paginationShowingTimeRange(name ?? "", startingTime, endingTime) : t.paginationShowing(name ?? "", startingNumber ?? "", endingNumber ?? "")
-			})
+		"aria-label": t.pagination,
+		className: cx("flex h-10 shrink-0 items-center justify-between gap-3 px-2.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-center gap-3 text-xs text-(--theme-muted-text-color)",
+			children: [position && /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: position
+			}), showSizes && /* @__PURE__ */ jsx(Select, {
+				"aria-label": t.perPage,
+				size: "sm",
+				className: "w-20",
+				items: pageSizes.map((size) => ({
+					value: size,
+					label: String(size)
+				})),
+				value: pageSize,
+				onValueChange: (size) => size !== null && onPageSizeChange(size)
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1 justify-between sm:justify-end gap-x-2",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				disabled: prevDisabled,
-				onClick: prevCallback,
-				className: clsx("link text-sm", prevDisabled && "disabled"),
-				children: t.paginationPrevious
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				disabled: nextDisabled,
-				onClick: nextCallback,
-				className: clsx("link text-sm", nextDisabled && "disabled"),
-				children: t.paginationNext
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(PageStep, {
+				to: page - 1,
+				enabled: hasPrevious,
+				label: t.paginationPrevious,
+				icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+				onPageChange,
+				pageHref
+			}), /* @__PURE__ */ jsx(PageStep, {
+				to: page + 1,
+				enabled: hasMore,
+				label: t.paginationNext,
+				icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+				onPageChange,
+				pageHref
 			})]
 		})]
 	});
 }
+function PageStep({ to, enabled, label, icon, onPageChange, pageHref }) {
+	const Link = useLink();
+	if (pageHref && enabled) return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ jsx(Link, {
+			href: pageHref(to),
+			"aria-label": label,
+			className: buttonClasses({
+				variant: "outline",
+				size: "sm",
+				iconOnly: true
+			}),
+			children: icon
+		})
+	});
+	return /* @__PURE__ */ jsx(IconButton, {
+		variant: "outline",
+		icon,
+		label,
+		disabled: !enabled,
+		onClick: () => onPageChange?.(to)
+	});
+}
 //#endregion
-export { Pagination };
+export { PAGE_SIZES, Pagination };

package/dist/components/Popover.d.ts

@@ -0,0 +1,47 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { type ReactElement, type ReactNode } from 'react';
+import { type FloatingAnchor } from './floating.js';
+/** A button that closes the popover it sits in. */
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Closes the popover the caller sits in, for an element that isn't a button,
+ *  such as a link that leaves the panel: `<Link href onClick={close}>`. */
+export declare function useClosePopover(): () => void;
+/** What a popover opens from: a trigger that opens it on press, or an anchor
+ *  it opens at while `open`, such as the point where a selection ended. */
+type PopoverOpener = {
+    /** The button that opens it. It receives the trigger's props and ref, so it must pass them to its element. */
+    trigger: ReactElement;
+    at?: never;
+} | {
+    /** An element or pointer event it opens at, for a popover with no trigger. */
+    at: FloatingAnchor;
+    trigger?: never;
+};
+export type PopoverProps = PopoverOpener & PopoverOptions;
+export interface PopoverOptions extends Omit<BasePopover.Popup.Props, 'className' | 'children' | 'render' | 'title' | 'initialFocus'> {
+    /** A heading at the top that names the popover. Without one, name it with `aria-label`. */
+    title?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: BasePopover.Positioner.Props['side'];
+    align?: BasePopover.Positioner.Props['align'];
+    /** Also opens while the pointer rests on the trigger. A click or a tap still
+     *  opens it, so touch and keyboard users reach it too. */
+    openOnHover?: boolean;
+    /** Where focus goes on opening: the first control in it, the panel itself for
+     *  a list read before one item in it is picked, or nowhere, for a popover that
+     *  offers an action on what the reader is doing, such as copying a selection. */
+    initialFocus?: 'first-control' | 'popup' | 'none';
+    /** `panel` holds controls or a list; `tip` is a tooltip-sized note with an arrow. */
+    variant?: 'panel' | 'tip';
+    /** On the popup: its width, padding or text size. */
+    className?: string;
+    children: ReactNode;
+}
+/** A panel anchored to its trigger, over the page so no container clips it. It
+ *  flips and shifts to stay on screen, closes on Escape or a press outside, and
+ *  returns focus to the trigger. Use a Menu for a list of actions, and a
+ *  HoverCard for a preview a link already leads to. */
+export declare function Popover({ trigger, at, title, open, defaultOpen, onOpenChange, side, align, openOnHover, initialFocus, variant, className, children, ...popupProps }: PopoverProps): import("react").JSX.Element;
+export {};