@parallelworks/ui 0.44.0 → 0.46.0

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 {};

package/dist/components/Popover.js

@@ -0,0 +1,63 @@
+import { cx } from "../cx.js";
+import { panelClassName, positionerClassName, tipClassName, toPositionerAnchor } from "./floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/Popover.tsx
+/** A button that closes the popover it sits in. */
+var PopoverClose = Popover.Close;
+var CloseContext = createContext(() => {});
+/** 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}>`. */
+function useClosePopover() {
+	return use(CloseContext);
+}
+/** 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. */
+function Popover$1({ trigger, at, title, open, defaultOpen, onOpenChange, side = "bottom", align = "center", openOnHover = false, initialFocus = "first-control", variant = "panel", className, children, ...popupProps }) {
+	const tip = variant === "tip";
+	const popup = useRef(null);
+	const actions = useRef(null);
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		actionsRef: actions,
+		...open === void 0 ? {} : { open },
+		...defaultOpen === void 0 ? {} : { defaultOpen },
+		...onOpenChange ? { onOpenChange: (next) => onOpenChange(next) } : {},
+		children: [trigger && /* @__PURE__ */ jsx(Popover.Trigger, {
+			render: trigger,
+			openOnHover,
+			...openOnHover ? {
+				delay: 300,
+				closeDelay: 150
+			} : {}
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			side,
+			align,
+			sideOffset: tip ? 8 : 6,
+			collisionPadding: 8,
+			...at ? { anchor: toPositionerAnchor(at) } : {},
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Popover.Popup, {
+				...popupProps,
+				ref: popup,
+				initialFocus: initialFocus === "popup" ? popup : initialFocus === "first-control",
+				className: cx(tip ? cx("max-w-sm text-left", tipClassName) : cx(panelClassName, "max-h-(--available-height) max-w-[calc(100vw-16px)] overflow-y-auto p-3"), className),
+				children: [
+					tip && /* @__PURE__ */ jsx(Popover.Arrow, { className: "size-2 rotate-45 bg-(--theme-app) data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" }),
+					title && /* @__PURE__ */ jsx(Popover.Title, {
+						className: "mb-2 text-sm font-semibold",
+						children: title
+					}),
+					/* @__PURE__ */ jsx(CloseContext, {
+						value: () => actions.current?.close(),
+						children
+					})
+				]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { Popover$1 as Popover, PopoverClose, useClosePopover };