@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/MenuEntries.js

@@ -0,0 +1,123 @@
+import { MenuCheckboxItem, MenuItem, MenuLinkItem, MenuPopup, MenuSeparator, MenuSubmenuTrigger } from "./Menu.js";
+import { safeUrl } from "../safeUrl.js";
+import { keyedByContent } from "./keys.js";
+import { Tooltip } from "./Tooltip.js";
+import { useLink, useNotify, useStrings } from "./Provider.js";
+import { useQueryMatch } from "./search.js";
+import { Menu } from "@base-ui/react/menu";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/MenuEntries.tsx
+var menuDivider = { divider: true };
+var isMenuDivider = (entry) => "divider" in entry;
+var isMenuSubmenu = (entry) => "items" in entry;
+/** Gives a menu root its search's filter; `children` renders the root with the query. */
+function MenuFilter({ search, children }) {
+	const [query, setQuery] = useState("");
+	if (!search) return children("");
+	return /* @__PURE__ */ jsx(Menu.FilterProvider, {
+		filter: null,
+		value: query,
+		onValueChange: setQuery,
+		autoHighlight: true,
+		children: children(query)
+	});
+}
+/** A menu's rows, with its search field when it has one. */
+function MenuEntries({ entries, search, query = "" }) {
+	const matches = useQueryMatch();
+	if (!search) return /* @__PURE__ */ jsx(EntryRows, { entries });
+	const needle = query.trim();
+	const shown = needle ? searchMatches(entries, (a) => matches(needle, a.label, a.keywords)) : entries;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "sticky top-0 z-[1] bg-(--theme-app-bg) px-2 pt-0.5 pb-1",
+			children: /* @__PURE__ */ jsx(Menu.Input, {
+				"aria-label": search.placeholder,
+				placeholder: search.placeholder,
+				className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-muted-text-color) focus:border-(--theme-element)"
+			})
+		}),
+		/* @__PURE__ */ jsx(Menu.List, { children: /* @__PURE__ */ jsx(EntryRows, { entries: shown }) }),
+		needle && shown.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
+			children: search.empty
+		})
+	] });
+}
+function searchMatches(entries, match) {
+	const found = /* @__PURE__ */ new Map();
+	const walk = (list) => {
+		for (const entry of list) if (isMenuSubmenu(entry)) walk(entry.items);
+		else if (!isMenuDivider(entry) && !found.has(entry.label) && match(entry)) found.set(entry.label, entry);
+	};
+	walk(entries);
+	return [...found.values()];
+}
+function EntryRows({ entries }) {
+	return keyedByContent(entries, (entry) => isMenuDivider(entry) ? "divider" : entry.label).map(({ key, item }) => isMenuDivider(item) ? /* @__PURE__ */ jsx(MenuSeparator, {}, key) : isMenuSubmenu(item) ? /* @__PURE__ */ jsx(SubmenuRow, { submenu: item }, key) : /* @__PURE__ */ jsx(ActionRow, { action: item }, key));
+}
+function SubmenuRow({ submenu }) {
+	return /* @__PURE__ */ jsx(MenuFilter, {
+		search: submenu.search,
+		children: (query) => /* @__PURE__ */ jsxs(Menu.SubmenuRoot, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, { children: [submenu.icon, submenu.label] }), /* @__PURE__ */ jsx(MenuPopup, {
+			side: "inline-end",
+			children: /* @__PURE__ */ jsx(MenuEntries, {
+				entries: submenu.items,
+				search: submenu.search,
+				query
+			})
+		})] })
+	});
+}
+var destructiveClassName = "text-(--theme-error) data-highlighted:text-(--theme-error)";
+function ActionRow({ action }) {
+	const Link = useLink();
+	const copy = useCopy();
+	const className = clsx(action.destructive && destructiveClassName);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [action.icon, action.label] });
+	if (action.href && !action.disabled) return action.reloadDocument ? /* @__PURE__ */ jsx(MenuLinkItem, {
+		href: safeUrl(action.href),
+		className,
+		children: content
+	}) : /* @__PURE__ */ jsx(MenuLinkItem, {
+		render: /* @__PURE__ */ jsx(Link, { href: action.href }),
+		className,
+		children: content
+	});
+	const run = () => {
+		if (action.copy) copy(action.copy);
+		action.onClick?.();
+	};
+	const reason = action.disabled ? action.disabledReason : void 0;
+	const label = /* @__PURE__ */ jsxs(Fragment, { children: [content, reason && /* @__PURE__ */ jsxs("span", {
+		className: "sr-only",
+		children: [". ", reason]
+	})] });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: reason,
+		side: "right",
+		children: action.checked === void 0 ? /* @__PURE__ */ jsx(MenuItem, {
+			disabled: action.disabled,
+			onClick: run,
+			className,
+			children: label
+		}) : /* @__PURE__ */ jsx(MenuCheckboxItem, {
+			checked: action.checked,
+			onCheckedChange: run,
+			disabled: action.disabled,
+			className,
+			children: label
+		})
+	});
+}
+function useCopy() {
+	const notify = useNotify();
+	const { list: t } = useStrings();
+	return ({ text, label }) => {
+		navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
+	};
+}
+//#endregion
+export { MenuEntries, MenuFilter, isMenuDivider, isMenuSubmenu, menuDivider };

package/dist/components/Modal.d.ts

@@ -0,0 +1,29 @@
+import { Dialog } from '@base-ui/react/dialog';
+import type { ReactNode } from 'react';
+/** The panel a modal draws by default; pass `panel={false}` to paint your own. */
+export declare const modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+/** Names the modal for assistive technology; renders an `<h2>`. */
+export declare const ModalTitle: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+/** Describes the modal for assistive technology; renders a `<p>`. */
+export declare const ModalDescription: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+export interface ModalProps extends Omit<Dialog.Popup.Props, 'className' | 'children' | 'render'> {
+    open: boolean;
+    onClose: () => void;
+    /** A confirmation the person must answer: it takes the alertdialog role and the
+     *  backdrop doesn't close it. Escape still cancels while it's dismissible. */
+    alert?: boolean | undefined;
+    /** False ignores the backdrop and Escape, so typed input isn't lost to a stray
+     *  click; the modal's own buttons still close it. */
+    dismissible?: boolean | undefined;
+    /** Where the panel sits: near the top of the window, or in its middle. */
+    align?: 'top' | 'center' | undefined;
+    /** Draws the default panel surface around `className`. */
+    panel?: boolean;
+    /** The backdrop's dimming, for a modal that needs a darker or blurred stage. */
+    backdropClassName?: string;
+    className?: string;
+    children: ReactNode;
+}
+/** A modal dialog: focus stays inside, the page behind is inert and doesn't scroll,
+ *  and focus returns to where it was on close. Name it with `ModalTitle` or `aria-label`. */
+export declare function Modal({ open, onClose, alert, dismissible, align, panel, backdropClassName, className, children, ...popupProps }: ModalProps): import("react").JSX.Element;

package/dist/components/Modal.js

@@ -0,0 +1,47 @@
+import { portalContainer } from "./floating.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/components/Modal.tsx
+/** The panel a modal draws by default; pass `panel={false}` to paint your own. */
+var modalPanelClassName = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+/** Names the modal for assistive technology; renders an `<h2>`. */
+var ModalTitle = Dialog.Title;
+/** Describes the modal for assistive technology; renders a `<p>`. */
+var ModalDescription = Dialog.Description;
+/** A modal dialog: focus stays inside, the page behind is inert and doesn't scroll,
+*  and focus returns to where it was on close. Name it with `ModalTitle` or `aria-label`. */
+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") {
+			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
+			})
+		})]
+	});
+	return alert ? /* @__PURE__ */ jsx(AlertDialog.Root, {
+		open,
+		onOpenChange,
+		children: content
+	}) : /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		disablePointerDismissal: !dismissible,
+		onOpenChange,
+		children: content
+	});
+}
+//#endregion
+export { Modal, ModalDescription, ModalTitle, modalPanelClassName };

package/dist/components/Overview.js

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

package/dist/components/PageHeader.d.ts

@@ -1,6 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
-import { type RowMenuItem } from '../list/RowContextMenu.js';
-import { type HeaderAddMenuItem } from './AddMenu.js';
+import type { MenuEntry } from './MenuEntries.js';
 export interface PageHeaderBreadcrumb {
     label: string;
     href?: string;
@@ -14,28 +13,23 @@ export declare const headerActionButtonClasses = "flex items-center justify-cent
 /** 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. */
-export declare function HeaderAddButton({ to, onClick, label, word, menu, disabled, disabledHint, }: {
-    to?: string;
+export declare function HeaderAddButton({ href, onClick, label, word, menu, disabled, disabledHint, }: {
+    href?: string;
     onClick?: () => void;
     label: string;
     word?: 'add' | 'create';
-    menu?: HeaderAddMenuItem[];
+    menu?: MenuEntry[];
     /** Button mode only. */
     disabled?: boolean;
     disabledHint?: string;
 }): import("react").JSX.Element;
+/** The header's "…" menu of actions on the page's subject. */
 export declare function HeaderActionMenu({ items, label, }: {
-    items: HeaderAddMenuItem[];
-    label?: string;
-}): import("react").JSX.Element | null;
-/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
- * destructive styling) as the list pages' right-click context menus. */
-export declare function HeaderRowMenu({ items, label, }: {
-    items: RowMenuItem[];
+    items: MenuEntry[];
     label?: string;
 }): import("react").JSX.Element | null;
-export declare function HeaderEditButton({ to, onClick, label, disabled, tooltip, }: {
-    to?: string;
+export declare function HeaderEditButton({ href, onClick, label, disabled, tooltip, }: {
+    href?: string;
     onClick?: () => void;
     label?: string;
     disabled?: boolean;
@@ -48,13 +42,13 @@ export declare function BreadcrumbsTitleAction({ children }: {
 export declare function BreadcrumbsRightAction({ children }: {
     children: ReactNode;
 }): import("react").ReactPortal | null;
-export declare function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, to, onClick, disabled, tooltip, }: {
+export declare function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip, }: {
     icon: ComponentType<{
         className?: string;
     }>;
     label: string;
     ariaLabel?: string;
-    to?: string;
+    href?: string;
     onClick?: (() => void) | undefined;
     disabled?: boolean;
     tooltip?: string | undefined;

package/dist/components/PageHeader.js

@@ -1,16 +1,15 @@
-import { useLink, useSlots, useStrings } from "./Provider.js";
 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 { keyedByContent } from "./keys.js";
-import { TOOLTIP_ID } from "./Tooltip.js";
-import { AddMenu } from "./AddMenu.js";
+import { Tooltip } from "./Tooltip.js";
+import { useLink, useSlots, useStrings } from "./Provider.js";
+import { ActionMenu } from "./ActionMenu.js";
 import { useBreadcrumb } from "./Breadcrumbs.js";
-import { useRowMenu } from "../list/RowContextMenu.js";
-import cx from "classnames";
-import { Fragment, useLayoutEffect } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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";
@@ -18,86 +17,65 @@ var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5
 /** 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({ to, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
+function HeaderAddButton({ href, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
 	const { common } = useStrings();
 	const Link = useLink();
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FaPlus, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
-	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FaPlus, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	if (menu) return /* @__PURE__ */ jsx(ActionMenu, {
 		items: menu,
 		label,
-		buttonClassName: headerAddButtonClasses,
+		triggerClassName: headerAddButtonClasses,
 		children: content
 	});
-	if (to) return /* @__PURE__ */ jsx(Link, {
-		to,
-		"aria-label": label,
-		title: label,
-		className: headerAddButtonClasses,
-		children: content
+	if (href) return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		children: /* @__PURE__ */ jsx(Link, {
+			href,
+			"aria-label": label,
+			className: headerAddButtonClasses,
+			children: content
+		})
 	});
 	const hint = disabled ? disabledHint : void 0;
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: disabled ? void 0 : onClick,
-		"aria-label": hint ? `${label}. ${hint}` : label,
-		"aria-disabled": disabled || void 0,
-		...hint ? {
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": hint
-		} : { title: label },
-		className: cx(headerAddButtonClasses, "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color)"),
-		children: content
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: hint ?? label,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			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)"),
+			children: content
+		})
 	});
 }
+/** The header's "…" menu of actions on the page's subject. */
 function HeaderActionMenu({ items, label = "Actions" }) {
 	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsx(AddMenu, {
+	return /* @__PURE__ */ jsx(ActionMenu, {
 		items,
 		label,
-		buttonClassName: headerActionButtonClasses,
+		triggerClassName: headerActionButtonClasses,
 		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "w-3.5 h-3.5" })
 	});
 }
-/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
-* destructive styling) as the list pages' right-click context menus. */
-function HeaderRowMenu({ items, label = "Actions" }) {
-	const { openMenu, contextMenu } = useRowMenu();
-	if (items.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": label,
-		title: label,
-		className: headerActionButtonClasses,
-		onClick: (e) => {
-			const r = e.currentTarget.getBoundingClientRect();
-			openMenu(r.left, r.bottom + 4, items);
-		},
-		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "w-3.5 h-3.5" })
-	}), contextMenu] });
-}
-function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
+function HeaderEditButton({ href, onClick, label = "Edit", disabled, tooltip }) {
 	const Link = useLink();
-	const tooltipProps = tooltip ? {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": tooltip
-	} : {};
-	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
-		to,
-		"aria-label": label,
-		...tooltip ? {} : { title: label },
-		className: headerActionButtonClasses,
-		...tooltipProps,
-		children: /* @__PURE__ */ jsx(FaEdit, { className: "w-3 h-3" })
-	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick,
-		disabled,
-		"aria-label": label,
-		title: tooltip ? void 0 : label,
-		className: cx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
-		...tooltipProps,
-		children: /* @__PURE__ */ jsx(FaEdit, { className: "w-3 h-3" })
+	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" })
+		}) : /* @__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" })
+		})
 	});
 }
 /** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
@@ -112,28 +90,24 @@ function BreadcrumbsRightAction({ children }) {
 	return createPortal(children, rightActionSlot);
 }
 var breadcrumbsActionClasses = "flex items-center gap-1 link text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
-function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, to, onClick, disabled, tooltip }) {
+function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, href, onClick, disabled, tooltip }) {
 	const Link = useLink();
-	const tip = tooltip ? {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": tooltip
-	} : {};
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
-	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
-		to,
-		className: breadcrumbsActionClasses,
-		...ariaLabel ? { "aria-label": ariaLabel } : {},
-		...tip,
-		children: content
-	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick,
-		disabled,
-		className: breadcrumbsActionClasses,
-		...ariaLabel ? { "aria-label": ariaLabel } : {},
-		...tip,
-		children: content
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip,
+		children: href && !disabled ? /* @__PURE__ */ jsx(Link, {
+			href,
+			className: breadcrumbsActionClasses,
+			"aria-label": ariaLabel,
+			children: content
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick,
+			disabled,
+			className: breadcrumbsActionClasses,
+			"aria-label": ariaLabel,
+			children: content
+		})
 	});
 }
 function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky = true, stickyTopClassName = "top-0" }) {
@@ -158,8 +132,8 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 						className: "m-0 text-[13px] font-medium leading-none text-(--theme-app) truncate",
 						children: crumb.label
 					}, key);
-					return /* @__PURE__ */ jsxs(Fragment, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
-						to: crumb.href,
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
+						href: crumb.href,
 						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
 						children: crumb.label
 					}) : /* @__PURE__ */ jsx("span", {
@@ -183,9 +157,9 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 		children: [toggle, crumbRow]
 	}) : /* @__PURE__ */ jsx("div", {});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(sticky && cx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		className: clsx(sticky && clsx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center justify-between gap-6 px-4 h-11", hasLeading && "border-b border-(--theme-border)"),
+			className: clsx("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",
@@ -194,4 +168,4 @@ function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, classNa
 	});
 }
 //#endregion
-export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, PageHeader, headerActionButtonClasses };
+export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, PageHeader, headerActionButtonClasses };

package/dist/components/Pagination.js

@@ -1,14 +1,14 @@
 import { useStrings } from "./Provider.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 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 }) {
 	const t = useStrings().list;
 	return /* @__PURE__ */ jsxs("nav", {
-		className: cx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
+		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: cx("hidden", (startingNumber !== void 0 && endingNumber !== void 0 || startingTime && endingTime) && "sm:block"),
+			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 ?? "")
@@ -19,13 +19,13 @@ function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roun
 				type: "button",
 				disabled: prevDisabled,
 				onClick: prevCallback,
-				className: cx("link text-sm", prevDisabled && "disabled"),
+				className: clsx("link text-sm", prevDisabled && "disabled"),
 				children: t.paginationPrevious
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				disabled: nextDisabled,
 				onClick: nextCallback,
-				className: cx("link text-sm", nextDisabled && "disabled"),
+				className: clsx("link text-sm", nextDisabled && "disabled"),
 				children: t.paginationNext
 			})]
 		})]

package/dist/components/Provider.d.ts

@@ -45,7 +45,6 @@ export interface UIStrings {
         favoriteHintOn: string;
         favoriteHintOff: string;
         filter: string;
-        noOptions: string;
     };
     common: {
         copy: string;
@@ -59,6 +58,7 @@ export interface UIStrings {
         remove: string;
         sort: string;
         userAvatar: string;
+        moreInfo: string;
     };
     dropdown: {
         select: (type: string) => string;
@@ -354,7 +354,6 @@ export interface UIStrings {
         couldntCopy: (label: string) => string;
         moreActions: string;
         /** A toolbar toggle's name in the overflow menu, where a row can't be pressed. */
-        toggleState: (label: string, on: boolean) => string;
         labelName: string;
         labelEmail: string;
         labelUsername: string;
@@ -448,15 +447,10 @@ import type { FieldComponent } from '../form/fieldRegistry.js';
 import type { PageHeaderCrumb } from './PageHeader.js';
 /** Renders internal navigation; hosts bind their router's Link. Accessibility
  * and tooltip data attributes pass through so header links keep their labels. */
-export type UILinkComponent = React.ComponentType<{
-    to: string;
-    onClick?: () => void;
-    className?: string;
-    children: ReactNode;
-    title?: string | undefined;
-    'aria-label'?: string | undefined;
-    'aria-current'?: 'page' | undefined;
-    [dataAttr: `data-${string}`]: string | undefined;
+/** An internal navigation link. It passes every other prop, ref included, to
+ *  its anchor, so menus and tooltips can attach to it. */
+export type UILinkComponent = React.ComponentType<React.ComponentPropsWithRef<'a'> & {
+    href: string;
 }>;
 /** The provider's link slot, with a plain anchor fallback. */
 export declare function useLink(): UILinkComponent;