@parallelworks/ui 0.43.0 → 0.45.0

package/dist/components/Drawer.js

@@ -0,0 +1,120 @@
+import { cx } from "../cx.js";
+import { CloseIcon } from "../icons.js";
+import { pressedToast } from "./Toast.js";
+import { useStrings } from "./Provider.js";
+import { useSplitter } from "./splitter.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/Drawer.tsx
+/** A panel that slides in from an edge over the page. A swipe toward that edge,
+*  Escape or a press outside closes it, and focus returns where it was.
+*
+*  It leaves the host's fixed chrome uncovered: it starts below
+*  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
+*  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
+*  on the document root. */
+function Drawer$1({ open, onClose, title, description, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
+	const { common } = useStrings();
+	const container = useRef(null);
+	const viewport = useRef(null);
+	const [popup, setPopup] = useState(null);
+	const [chosen, setChosen] = useState(null);
+	const rendered = useRenderedWidth(resizable ? popup : null);
+	const splitter = useSplitter({
+		width: chosen ?? rendered ?? (typeof width === "number" ? width : minWidth),
+		onWidthChange: setChosen,
+		min: minWidth,
+		max: () => innerWidth(viewport.current),
+		side: side === "right" ? "left" : "right"
+	});
+	const header = title !== void 0 || description !== void 0 || closeButton;
+	const area = contained ? "absolute inset-0" : "fixed inset-x-0 bottom-0 top-(--app-inset-top,0px)";
+	const onOpenChange = (next, details) => {
+		if (next) return;
+		if (!dismissible && details.reason === "escape-key" || details.reason === "outside-press" && pressedToast(details.event)) {
+			details.cancel();
+			return;
+		}
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs(Drawer.Root, {
+		open,
+		onOpenChange,
+		swipeDirection: side,
+		modal,
+		disablePointerDismissal: !dismissible,
+		children: [contained && /* @__PURE__ */ jsx("div", {
+			ref: container,
+			className: "contents"
+		}), /* @__PURE__ */ jsxs(Drawer.Portal, {
+			...contained ? { container } : {},
+			keepMounted,
+			className: contained ? "contents" : void 0,
+			children: [modal !== false && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: cx(area, "z-(--layer-drawer) bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none") }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+				ref: viewport,
+				className: cx(area, "pointer-events-none z-(--layer-drawer) flex", side === "right" ? "justify-end pl-[max(var(--app-inset-start,0px),2.5rem)]" : "justify-start pl-(--app-inset-start,0px) pr-10"),
+				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+					...popupProps,
+					ref: setPopup,
+					className: cx("pointer-events-auto relative flex h-full max-w-full flex-col border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-xl outline-none", side === "right" ? "border-l" : "border-r", "transition-transform duration-300 ease-in-out [transform:translateX(var(--drawer-swipe-movement-x))] data-swiping:select-none data-swiping:duration-0 motion-reduce:transition-none", side === "right" ? "data-ending-style:[transform:translateX(100%)] data-starting-style:[transform:translateX(100%)]" : "data-ending-style:[transform:translateX(-100%)] data-starting-style:[transform:translateX(-100%)]"),
+					style: { width: splitter.resizing || chosen !== null ? splitter.width : width },
+					children: [resizable && /* @__PURE__ */ jsx("div", {
+						...splitter.separatorProps,
+						"data-base-ui-swipe-ignore": ""
+					}), /* @__PURE__ */ jsxs(Drawer.Content, {
+						className: "flex min-h-0 flex-1 flex-col",
+						children: [
+							header && /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-start gap-3 border-b border-(--theme-border) px-4 py-3",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0 flex-1",
+									children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
+										className: "truncate text-sm font-semibold",
+										children: title
+									}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
+										className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
+										children: description
+									})]
+								}), closeButton && /* @__PURE__ */ jsx(Drawer.Close, {
+									"aria-label": common.close,
+									className: "-m-1 shrink-0 cursor-pointer rounded-md p-1 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+									children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" })
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: cx("relative flex min-h-0 flex-1 flex-col overflow-y-auto", padded && "p-4", className),
+								children
+							}),
+							footer && /* @__PURE__ */ jsx("div", {
+								className: "flex shrink-0 justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+								children: footer
+							})
+						]
+					})]
+				})
+			})]
+		})]
+	});
+}
+/** The width an element renders at, which its CSS may hold below the width asked for. */
+function useRenderedWidth(el) {
+	const [rendered, setRendered] = useState(null);
+	useLayoutEffect(() => {
+		if (!el) return;
+		const measure = () => setRendered(el.getBoundingClientRect().width || null);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [el]);
+	return rendered;
+}
+/** The room inside the drawer's viewport, past its gutter; unbounded before layout, as in a test. */
+function innerWidth(el) {
+	if (!el?.clientWidth) return Number.POSITIVE_INFINITY;
+	const style = getComputedStyle(el);
+	return el.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0);
+}
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/components/EmptyState.d.ts

@@ -1,11 +1,16 @@
-import type React from 'react';
-interface EmptyStateProps {
-    title: string;
-    description?: string;
-    action?: React.ReactNode;
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
+import type { ReactNode } from 'react';
+export interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** What to do about it, such as a create button. */
+    action?: ReactNode;
+    icon?: ReactNode;
+    /** `panel` stands in for a whole page or list; `bare` sits inside something
+     *  that already frames it, such as a sidebar, a menu or a dialog. */
+    variant?: 'panel' | 'bare' | undefined;
+    className?: string | undefined;
+    testId?: string | undefined;
 }
-export default function EmptyState({ title, description, action, icon: Icon }: EmptyStateProps): React.JSX.Element;
-export {};
+/** What shows where there is nothing yet, or nothing matches: what's missing,
+ *  and what to do about it. */
+export declare function EmptyState({ title, description, action, icon, variant, className, testId, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.js

@@ -1,19 +1,24 @@
+import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/EmptyState.tsx
-function EmptyState({ title, description, action, icon: Icon }) {
+/** What shows where there is nothing yet, or nothing matches: what's missing,
+*  and what to do about it. */
+function EmptyState({ title, description, action, icon, variant = "panel", className, testId }) {
+	const panel = variant === "panel";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "border-solid rounded-2xl border border-(--theme-border) theme-panel flex flex-col items-center justify-center py-12 px-6",
+		"data-testid": testId,
+		className: cx("flex flex-col items-center justify-center text-center", panel ? "panel px-6 py-12" : "px-3 py-6", className),
 		children: [
-			Icon && /* @__PURE__ */ jsx("div", {
-				className: "w-10 h-10 rounded-full bg-(--theme-muted-panel-bg) flex items-center justify-center mb-3",
-				children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 theme-muted-text" })
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) theme-muted-text [&_svg]:h-5 [&_svg]:w-5",
+				children: icon
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium mb-1",
+				className: cx("text-sm", panel ? "mb-1 font-medium" : "theme-muted-text"),
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "text-xs theme-muted-text text-center max-w-xs",
+				className: "max-w-xs text-xs theme-muted-text",
 				children: description
 			}),
 			action && /* @__PURE__ */ jsx("div", {
@@ -24,4 +29,4 @@ function EmptyState({ title, description, action, icon: Icon }) {
 	});
 }
 //#endregion
-export { EmptyState as default };
+export { EmptyState };

package/dist/components/ExternalLink.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from 'react';
+export type ExternalLinkProps = Omit<ComponentPropsWithRef<'a'>, 'target' | 'rel'> & {
+    /** Marks the link as leaving the page with an arrow after its text. */
+    icon?: boolean;
+};
+/** A link that opens in a new tab, says so to screen readers, and gives the
+ *  page it opens no hold on this one. */
+export declare function ExternalLink({ children, icon, className, ...props }: ExternalLinkProps): import("react").JSX.Element;

package/dist/components/ExternalLink.js

@@ -0,0 +1,29 @@
+import { cx } from "../cx.js";
+import { ExternalLinkIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ExternalLink.tsx
+/** A link that opens in a new tab, says so to screen readers, and gives the
+*  page it opens no hold on this one. */
+function ExternalLink({ children, icon = false, className, ...props }) {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsxs("a", {
+		...props,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: cx(icon && "inline-flex items-center gap-1", className),
+		children: [
+			children,
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [" ", common.opensInNewTab]
+			}),
+			icon && /* @__PURE__ */ jsx(ExternalLinkIcon, {
+				className: "h-3 w-3 shrink-0",
+				"aria-hidden": true
+			})
+		]
+	});
+}
+//#endregion
+export { ExternalLink };

package/dist/components/Field.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+/** What a field's control takes to be named, described and marked by its field. Spread it
+ *  on the control: `{(control) => <input {...control} />}`. */
+export interface FieldControlProps {
+    id: string;
+    /** Set for a group, which its legend names rather than a label. */
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: true | undefined;
+    'aria-required'?: true | undefined;
+}
+/** Set by a layout that lines up the fields in a row, as a form's grid does: a stacked field's
+ *  label and control take the row's label and control tracks, so controls under labels of
+ *  different lengths line up. The layout makes the field's box a subgrid of two rows. */
+export declare const FieldRowContext: import("react").Context<boolean>;
+/** The surrounding Field's control props, for a control drawn further down than the Field's
+ *  own children. Null outside a Field. */
+export declare function useFieldControl(): FieldControlProps | null;
+export type FieldLayout = 'stacked' | 'inline';
+export interface FieldProps {
+    label: ReactNode;
+    /** Beside the label and outside it, so it stays out of the control's name: an InfoTip, a count. */
+    hint?: ReactNode;
+    /** Buttons at the far end of the label's row that act on the field, such as one that
+     *  switches its control to a typed expression. */
+    actions?: ReactNode;
+    /** Help under the control, read with it. */
+    description?: ReactNode;
+    /** A message under the control. It also marks the control invalid. */
+    error?: ReactNode;
+    /** Marks the control invalid without a message, for one shown elsewhere. */
+    invalid?: boolean | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** `stacked` puts the label above the control. `inline` puts it in a column to the left, as a
+     *  form lays out its fields. */
+    layout?: FieldLayout | undefined;
+    /** With `inline`, the label takes only its own width rather than the column's. */
+    compact?: boolean | undefined;
+    /** A set of controls, such as radios or checkboxes, that a legend names instead of a label. */
+    group?: boolean | undefined;
+    /** The control's id; one is made up when left out. */
+    id?: string | undefined;
+    className?: string | undefined;
+    /** The control, or a function that places the control props on it. A Base UI control, such
+     *  as Select, Combobox, NumberInput, Checkbox or Switch, needs only the `id`. */
+    children: ReactNode | ((control: FieldControlProps) => ReactNode);
+}
+/** An error in the look a Field gives its own, for one under a part of a control rather than
+ *  the whole of it, such as a row of a list editor. */
+export declare function ErrorText({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+/** A control with its label, help and error, tied to it for assistive technology. One frame
+ *  for every field, in a form or standing alone. */
+export declare function Field({ label, hint, actions, description, error, invalid, required, disabled, layout, compact, group, id: ownId, className, children, }: FieldProps): import("react").JSX.Element;
+/** One checkbox or radio and its label inside a Field, such as an option of a group. A bare
+ *  `<label>` there would take the Field's label as its own, so every option read as the field. */
+export declare function FieldOption({ disabled, className, children, }: {
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The eye button inside a secret's box that shows or hides what was typed. Give the box
+ *  room for it on the right, such as `pr-9`. */
+export declare function RevealToggle({ revealed, onRevealedChange, disabled, }: {
+    revealed: boolean;
+    onRevealedChange: (revealed: boolean) => void;
+    disabled?: boolean | undefined;
+}): import("react").JSX.Element;

package/dist/components/Field.js

@@ -0,0 +1,159 @@
+import { cx } from "../cx.js";
+import { EyeIcon, EyeOffIcon, WarningIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { RequiredMark } from "./RequiredMark.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useId } from "react";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/Field.tsx
+var ControlContext = createContext(null);
+/** Set by a layout that lines up the fields in a row, as a form's grid does: a stacked field's
+*  label and control take the row's label and control tracks, so controls under labels of
+*  different lengths line up. The layout makes the field's box a subgrid of two rows. */
+var FieldRowContext = createContext(false);
+/** The surrounding Field's control props, for a control drawn further down than the Field's
+*  own children. Null outside a Field. */
+function useFieldControl() {
+	return use(ControlContext);
+}
+var labelClassName = "flex items-center gap-1 text-sm font-medium text-(--theme-app)";
+var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
+var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error)";
+/** An error in the look a Field gives its own, for one under a part of a control rather than
+*  the whole of it, such as a row of a list editor. */
+function ErrorText({ children }) {
+	return children ? /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: errorTextClassName,
+		children: [/* @__PURE__ */ jsx(WarningIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5 shrink-0"
+		}), children]
+	}) : null;
+}
+/** A control with its label, help and error, tied to it for assistive technology. One frame
+*  for every field, in a form or standing alone. */
+function Field$1({ label, hint, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, group = false, id: ownId, className, children }) {
+	const uid = useId();
+	const id = ownId ?? `${uid}control`;
+	const labelId = `${uid}label`;
+	const descriptionId = description ? `${uid}description` : void 0;
+	const errorId = error ? `${uid}error` : void 0;
+	const isInvalid = Boolean(error) || Boolean(invalid);
+	const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
+	const control = {
+		id,
+		...group && { "aria-labelledby": labelId },
+		...describedBy && { "aria-describedby": describedBy },
+		...isInvalid && { "aria-invalid": true },
+		...required && { "aria-required": true }
+	};
+	const inline = layout === "inline";
+	const inRow = use(FieldRowContext) && !inline && !group;
+	const labelBox = cx(labelClassName, inline && cx("min-h-9 shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
+	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
+		hint,
+		actions && /* @__PURE__ */ jsx("span", {
+			className: actionsClassName,
+			children: actions
+		})
+	] });
+	const body = /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
+		children: [
+			/* @__PURE__ */ jsx(FieldRowContext, {
+				value: false,
+				children: /* @__PURE__ */ jsx(ControlContext, {
+					value: control,
+					children: typeof children === "function" ? children(control) : children
+				})
+			}),
+			description && /* @__PURE__ */ jsx(Field.Description, {
+				id: descriptionId,
+				className: "text-xs leading-relaxed text-(--theme-muted-text-color)",
+				children: description
+			}),
+			error && /* @__PURE__ */ jsxs(Field.Error, {
+				id: errorId,
+				match: true,
+				role: "alert",
+				className: errorTextClassName,
+				children: [/* @__PURE__ */ jsx(WarningIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5 shrink-0"
+				}), error]
+			})
+		]
+	});
+	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : "flex-col gap-1.5", className);
+	if (group) return /* @__PURE__ */ jsx(Field.Root, {
+		invalid: isInvalid,
+		disabled,
+		render: /* @__PURE__ */ jsx(Fieldset.Root, {
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: frame,
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, {
+				id: labelId,
+				className: labelBox,
+				children: labelContent
+			}), body]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		invalid: isInvalid,
+		disabled,
+		className: frame,
+		"data-field-row": inRow || void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: labelBox,
+			children: [
+				/* @__PURE__ */ jsxs(Field.Label, {
+					htmlFor: id,
+					id: labelId,
+					"data-field-label": true,
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}),
+				hint,
+				actions && /* @__PURE__ */ jsx("span", {
+					className: actionsClassName,
+					children: actions
+				})
+			]
+		}), body]
+	});
+}
+/** One checkbox or radio and its label inside a Field, such as an option of a group. A bare
+*  `<label>` there would take the Field's label as its own, so every option read as the field. */
+function FieldOption({ disabled, className, children }) {
+	return /* @__PURE__ */ jsx(Field.Item, {
+		disabled,
+		render: /* @__PURE__ */ jsx("label", {}),
+		className: cx(disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", className),
+		children
+	});
+}
+/** The eye button inside a secret's box that shows or hides what was typed. Give the box
+*  room for it on the right, such as `pr-9`. */
+function RevealToggle({ revealed, onRevealedChange, disabled }) {
+	const { common: t } = useStrings();
+	const Icon = revealed ? EyeOffIcon : EyeIcon;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": revealed ? t.hideValue : t.showValue,
+		"aria-pressed": revealed,
+		disabled,
+		onClick: () => onRevealedChange(!revealed),
+		className: "absolute inset-y-0 right-0 flex w-9 cursor-pointer items-center justify-center text-(--theme-muted-text-color) hover:text-(--theme-app) disabled:cursor-not-allowed disabled:opacity-50",
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+}
+//#endregion
+export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, RevealToggle, useFieldControl };

package/dist/components/HoverCard.js

@@ -1,4 +1,4 @@
-import { cardClassName, portalContainer, positionerClassName } from "./floating.js";
+import { cardClassName, positionerClassName } from "./floating.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
@@ -13,20 +13,17 @@ function HoverCard({ card, children, defaultOpen = false }) {
 			delay: 350,
 			closeDelay: 150,
 			render: children
-		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
-			container: portalContainer(),
-			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
-				side: "bottom",
-				align: "start",
-				sideOffset: 8,
-				collisionPadding: 8,
-				className: positionerClassName,
-				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
-					className: cardClassName,
-					children: card
-				})
+		}), /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 8,
+			collisionPadding: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				className: cardClassName,
+				children: card
 			})
-		})]
+		}) })]
 	});
 }
 //#endregion

package/dist/components/IconButton.d.ts

@@ -1,17 +1,20 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-interface IconButtonProps extends ComponentPropsWithRef<'button'> {
-    /** Icon to display */
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ButtonSize, type ButtonVariant } from './buttonClasses.js';
+export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
     icon: ReactNode;
     /** The accessible name, also shown as the tooltip. */
     label: string;
-    /** Button variant */
-    variant?: 'default' | 'ghost' | 'primary' | 'success';
-    /** Size of the button */
-    size?: 'sm' | 'md' | 'lg';
-    /** Whether button is in active/selected state */
-    active?: boolean;
-    /** False hides the tooltip, such as while the button's own popup is open. */
-    showTooltip?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** A toggle's state: set, it reads as pressed (`aria-pressed`). */
+    pressed?: boolean | undefined;
+    /** A dot in the corner, such as for filters narrowing what the page shows. */
+    dot?: boolean;
+    /** A single key, such as F, that presses the button from anywhere on the page
+     *  outside a text field. Also shown in the tooltip. */
+    shortcut?: string | undefined;
 }
-export declare function IconButton({ icon, label, variant, size, active, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
-export {};
+/** A button that shows only an icon, named by its tooltip. It can be a popup's
+ *  trigger: it passes the trigger's props and ref on, and hides its tooltip while
+ *  the popup is open. */
+export declare function IconButton({ icon, label, variant, size, pressed, dot, shortcut, className, ref, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/components/IconButton.js

@@ -1,28 +1,37 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
 import { Tooltip } from "./Tooltip.js";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { useShortcutKey } from "./shortcutKey.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
 //#region src/components/IconButton.tsx
-function IconButton({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, ...props }) {
-	const sizeClasses = {
-		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
-		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
-		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
-	};
-	const variantClasses = {
-		default: clsx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
-		ghost: clsx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
-		primary: clsx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
-		success: clsx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
-	};
+/** A button that shows only an icon, named by its tooltip. It can be a popup's
+*  trigger: it passes the trigger's props and ref on, and hides its tooltip while
+*  the popup is open. */
+function IconButton({ icon, label, variant = "ghost", size = "sm", pressed, dot = false, shortcut, className, ref, ...props }) {
+	const button = useRef(null);
+	const setButton = useCallback((node) => {
+		button.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useShortcutKey(shortcut, () => button.current?.click());
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: label,
-		disabled: !showTooltip,
-		children: /* @__PURE__ */ jsx("button", {
+		shortcut: shortcut?.toUpperCase(),
+		disabled: props["aria-expanded"] === true && !!props["aria-haspopup"],
+		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-label": label,
-			className: clsx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
+			"aria-pressed": pressed,
+			ref: setButton,
+			className: cx(buttonClasses({
+				variant,
+				size,
+				iconOnly: true
+			}), className),
 			...props,
-			children: icon
+			children: [icon, dot && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
 		})
 	});
 }

package/dist/components/InfoTip.js

@@ -1,11 +1,11 @@
-import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
-import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { cx } from "../cx.js";
+import { HelpIcon } from "../icons.js";
 import { keyedByContent } from "./keys.js";
 import { useStrings } from "./Provider.js";
-import { clsx } from "clsx";
+import { ExternalLink } from "./ExternalLink.js";
+import { Popover } from "./Popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
-import { Popover } from "@base-ui/react/popover";
 //#region src/components/InfoTip.tsx
 var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
 function formatLine(line) {
@@ -13,10 +13,8 @@ function formatLine(line) {
 	let last = 0;
 	for (const match of line.matchAll(linkRegex)) {
 		if (match.index > last) nodes.push(line.slice(last, match.index));
-		nodes.push(/* @__PURE__ */ jsx("a", {
+		nodes.push(/* @__PURE__ */ jsx(ExternalLink, {
 			href: match[2],
-			target: "_blank",
-			rel: "noopener noreferrer",
 			className: "underline",
 			children: match[1]
 		}, match.index));
@@ -38,23 +36,18 @@ function InfoTip({ text, side = "top", className, children }) {
 		className,
 		children
 	}) : null;
-	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+	return /* @__PURE__ */ jsx(Popover, {
+		variant: "tip",
 		openOnHover: true,
-		"aria-label": children ? void 0 : t.moreInfo,
-		className: clsx("inline-flex items-center cursor-help", !children && "tooltip", className),
-		children: children ?? /* @__PURE__ */ jsx(HiQuestionMarkCircle, { "aria-hidden": "true" })
-	}), /* @__PURE__ */ jsx(Popover.Portal, {
-		container: portalContainer(),
-		children: /* @__PURE__ */ jsx(Popover.Positioner, {
-			side,
-			sideOffset: 8,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Popover.Popup, {
-				className: clsx("max-w-sm text-left", tipClassName),
-				children: [/* @__PURE__ */ jsx(Popover.Arrow, { className: tipArrowClassName }), formatInfoTipContent(text)]
-			})
-		})
-	})] });
+		side,
+		trigger: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": children ? void 0 : t.moreInfo,
+			className: cx("inline-flex items-center cursor-help", !children && "tooltip", className),
+			children: children ?? /* @__PURE__ */ jsx(HelpIcon, { "aria-hidden": "true" })
+		}),
+		children: formatInfoTipContent(text)
+	});
 }
 //#endregion
 export { InfoTip, formatInfoTipContent };