@parallelworks/ui 0.40.1 → 0.42.0

package/dist/components/DescriptionList.js

@@ -1,15 +1,15 @@
-import { TooltipInfo } from "./Tooltip.js";
-import cx from "classnames";
+import { InfoTip } from "./InfoTip.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DescriptionList.tsx
 function DescriptionListItem({ label, children, tooltip, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("dt", {
-		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
+		className: clsx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 truncate",
 			children: label
-		}), tooltip && /* @__PURE__ */ jsx(TooltipInfo, {
+		}), tooltip && /* @__PURE__ */ jsx(InfoTip, {
 			className: "pr-2",
 			text: tooltip
 		})]
@@ -21,7 +21,7 @@ function DescriptionListItem({ label, children, tooltip, className, ...props })
 }
 function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("w-full", wrapperClassName),
+		className: clsx("w-full", wrapperClassName),
 		children: [
 			title && /* @__PURE__ */ jsx("h2", {
 				className: "text-sm font-semibold w-full mb-1",
@@ -32,7 +32,7 @@ function DescriptionList({ children, title, separators = true, subtitle, classNa
 				children: subtitle
 			}),
 			/* @__PURE__ */ jsx("dl", {
-				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
+				className: clsx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
 				children: Array.isArray(children) ? React.Children.toArray(children) : children
 			})
 		]

package/dist/components/Filter.js

@@ -1,5 +1,5 @@
 import { FaFilter } from "../icons/fa/FaFilter.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Filter.tsx
 function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePill, onPillChange }) {
@@ -22,7 +22,7 @@ function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePil
 			children: pills.map((pill) => /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => onPillChange(pill.value),
-				className: cx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
+				className: clsx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
 				children: pill.label
 			}, pill.value))
 		})]

package/dist/components/FilterPill.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/FilterPill.tsx
 function FilterPill({ active, onClick, children }) {
@@ -6,7 +6,7 @@ function FilterPill({ active, onClick, children }) {
 		type: "button",
 		"aria-pressed": active,
 		onClick,
-		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
+		className: clsx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
 		children
 	});
 }

package/dist/components/HoverCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement, ReactNode } from 'react';
+export interface HoverCardProps {
+    /** Mounted only while open, so a card that loads its own data loads on first hover. */
+    card: ReactNode;
+    /** The anchor. It receives the trigger's props and ref, so it must pass them to its element. */
+    children: ReactElement;
+    /** Opens on first render, for stories and screenshots. */
+    defaultOpen?: boolean;
+}
+/** Detail about its anchor, such as a person's profile, after a short hover or
+ *  on focus. A visual enhancement: whatever the card shows must also be
+ *  reachable another way, such as the page the anchor links to. The card
+ *  stays open while the pointer is over it. */
+export declare function HoverCard({ card, children, defaultOpen }: HoverCardProps): import("react").JSX.Element;

package/dist/components/HoverCard.js

@@ -0,0 +1,33 @@
+import { cardClassName, portalContainer, positionerClassName } from "./floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/components/HoverCard.tsx
+/** Detail about its anchor, such as a person's profile, after a short hover or
+*  on focus. A visual enhancement: whatever the card shows must also be
+*  reachable another way, such as the page the anchor links to. The card
+*  stays open while the pointer is over it. */
+function HoverCard({ card, children, defaultOpen = false }) {
+	return /* @__PURE__ */ jsxs(PreviewCard.Root, {
+		defaultOpen,
+		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
+			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
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { HoverCard };

package/dist/components/IconButton.d.ts

@@ -1,8 +1,8 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+interface IconButtonProps extends ComponentPropsWithRef<'button'> {
     /** Icon to display */
     icon: ReactNode;
-    /** Accessible label (used for aria-label and tooltip) */
+    /** The accessible name, also shown as the tooltip. */
     label: string;
     /** Button variant */
     variant?: 'default' | 'ghost' | 'primary' | 'success';
@@ -10,8 +10,8 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'sm' | 'md' | 'lg';
     /** Whether button is in active/selected state */
     active?: boolean;
-    /** Whether to show tooltip on hover */
+    /** False hides the tooltip, such as while the button's own popup is open. */
     showTooltip?: boolean;
 }
-export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function IconButton({ icon, label, variant, size, active, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/IconButton.js

@@ -1,34 +1,30 @@
-import { TOOLTIP_ID } from "./Tooltip.js";
-import cx from "classnames";
-import { forwardRef } from "react";
+import { Tooltip } from "./Tooltip.js";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/IconButton.tsx
-var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, disabled, ...props }, ref) => {
+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: cx("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: cx("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: cx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
-		success: cx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
+		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")
 	};
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type: "button",
-		"aria-label": label,
-		disabled,
-		...showTooltip ? { "data-tooltip-id": TOOLTIP_ID } : {},
-		"data-tooltip-content": label,
-		"data-tooltip-delay-show": 300,
-		"data-tooltip-class-name": "!bg-[var(--theme-app)] !text-[var(--theme-app-bg)] !text-xs !py-1 !px-2 !rounded-md",
-		className: cx("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),
-		...props,
-		children: icon
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: label,
+		disabled: !showTooltip,
+		children: /* @__PURE__ */ jsx("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),
+			...props,
+			children: icon
+		})
 	});
-});
-IconButton.displayName = "IconButton";
+}
 //#endregion
 export { IconButton };

package/dist/components/InfoTip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { TooltipSide } from './Tooltip.js';
+/** Infotip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
+export declare function formatInfoTipContent(content: string): ReactNode;
+interface InfoTipProps {
+    text: string;
+    side?: TooltipSide;
+    className?: string | undefined;
+    /** Replaces the info icon as the trigger, such as a status label the text explains. */
+    children?: ReactNode;
+}
+/** Extra detail behind an info trigger. A popover that also opens on hover, so
+ *  touch and screen reader users can reach it and its links. */
+export declare function InfoTip({ text, side, className, children }: InfoTipProps): import("react").JSX.Element | null;
+export {};

package/dist/components/InfoTip.js

@@ -0,0 +1,60 @@
+import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
+import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { keyedByContent } from "./keys.js";
+import { useStrings } from "./Provider.js";
+import { clsx } from "clsx";
+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) {
+	const nodes = [];
+	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", {
+			href: match[2],
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: "underline",
+			children: match[1]
+		}, match.index));
+		last = match.index + match[0].length;
+	}
+	if (last < line.length) nodes.push(line.slice(last));
+	return nodes;
+}
+/** Infotip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
+function formatInfoTipContent(content) {
+	if (!content) return null;
+	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
+}
+/** Extra detail behind an info trigger. A popover that also opens on hover, so
+*  touch and screen reader users can reach it and its links. */
+function InfoTip({ text, side = "top", className, children }) {
+	const t = useStrings().common;
+	if (!text) return children ? /* @__PURE__ */ jsx("span", {
+		className,
+		children
+	}) : null;
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		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)]
+			})
+		})
+	})] });
+}
+//#endregion
+export { InfoTip, formatInfoTipContent };

package/dist/components/Input.js

@@ -2,12 +2,12 @@ import { LuEye } from "../icons/lu/LuEye.js";
 import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import { RequiredMark } from "./RequiredMark.js";
-import cx from "classnames";
-import { forwardRef, useId, useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
 //#region src/components/Input.tsx
 /** The box a text field draws, for other controls that should look like one. */
-var fieldBoxClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]");
+var fieldBoxClasses = clsx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]");
 function LabelRow({ id, label, hint, required }) {
 	const element = /* @__PURE__ */ jsxs("label", {
 		className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
@@ -70,7 +70,7 @@ var Input = forwardRef(({ label, labelHint, description, error, className = "",
 		children: [/* @__PURE__ */ jsx("input", {
 			ref,
 			type: isPassword && showPassword ? "text" : type,
-			className: cx(fieldBoxClasses, "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", isPassword && "pr-11", className),
+			className: clsx(fieldBoxClasses, "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", isPassword && "pr-11", className),
 			...props,
 			id: field.id,
 			required,
@@ -96,7 +96,7 @@ var Textarea = forwardRef(({ label, labelHint, description, error, className = "
 	}, props.id, props["aria-describedby"], required);
 	return field.frame(/* @__PURE__ */ jsx("textarea", {
 		ref,
-		className: cx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
+		className: clsx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
 		...props,
 		id: field.id,
 		required,

package/dist/components/LetterBadge.js

@@ -1,11 +1,11 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LetterBadge.tsx
 /** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
 * an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
 function LetterBadge({ text, className }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		className: clsx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
 		children: text
 	});
 }

package/dist/components/Loader.js

@@ -1,5 +1,5 @@
 import { LoaderIcon } from "./StatusIcons.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Loader.tsx
 var RIPPLE_STAGGER_S = .22;
@@ -15,9 +15,9 @@ function Loader({ size = 48, text, textSize = 12, full = true, color = "", loade
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"aria-label": text || "Loading",
-		className: cx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
+		className: clsx(full && "w-full", "flex flex-col flex-wrap justify-center items-center gap-y-1"),
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cx("w-full flex justify-center items-center", loaderColor),
+			className: clsx("w-full flex justify-center items-center", loaderColor),
 			style: loaderStyle,
 			children: variant === "logo" ? /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 64.29 64.29",

package/dist/components/Markdown.js

@@ -1,5 +1,5 @@
-import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from "react";
 //#region src/components/Markdown.tsx
 var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
 function Markdown(props) {

package/dist/components/MarkdownImpl.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { code } from "@streamdown/code";
 import { math } from "@streamdown/math";
@@ -21,7 +21,7 @@ function Markdown({ children, isStreaming, controls }) {
 			shikiTheme,
 			components: { a: ({ node, ...props }) => /* @__PURE__ */ jsx("a", {
 				...props,
-				className: cx("link wrap-break-word", props.className),
+				className: clsx("link wrap-break-word", props.className),
 				target: "_blank",
 				rel: "noopener noreferrer"
 			}) },

package/dist/components/Menu.d.ts

@@ -0,0 +1,33 @@
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import type { ReactNode } from 'react';
+type Styled<Props> = Omit<Props, 'className'> & {
+    className?: string | undefined;
+};
+export interface MenuPopupProps {
+    children: ReactNode;
+    className?: string | undefined;
+    side?: BaseMenu.Positioner.Props['side'];
+    align?: BaseMenu.Positioner.Props['align'];
+    /** What it opens against in place of its trigger, such as the point a right-click landed. */
+    anchor?: BaseMenu.Positioner.Props['anchor'];
+    /** Keeps the popup's children mounted while closed, so state they own survives. */
+    keepMounted?: boolean;
+}
+/** The portal, positioner and popup every menu needs. */
+export declare function MenuPopup({ children, className, side, align, anchor, keepMounted, }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuItem({ className, ...props }: Styled<BaseMenu.Item.Props>): import("react").JSX.Element;
+/** A navigation row; give it `render` for a router link. Closes the menu like any item. */
+export declare function MenuLinkItem({ className, ...props }: Styled<BaseMenu.LinkItem.Props>): import("react").JSX.Element;
+/** A choice within a Menu.RadioGroup, checked while it holds the group's value. */
+export declare function MenuRadioItem({ className, children, ...props }: Styled<BaseMenu.RadioItem.Props>): import("react").JSX.Element;
+/** An on/off choice, checked while `checked` holds; it closes the menu like any item. */
+export declare function MenuCheckboxItem({ className, children, ...props }: Styled<BaseMenu.CheckboxItem.Props>): import("react").JSX.Element;
+/** The row that opens a submenu, inside a Menu.SubmenuRoot. */
+export declare function MenuSubmenuTrigger({ className, children, ...props }: Styled<BaseMenu.SubmenuTrigger.Props>): import("react").JSX.Element;
+export declare function MenuSeparator({ className }: {
+    className?: string | undefined;
+}): import("react").JSX.Element;
+export declare function MenuGroupLabel({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Menu.js

@@ -0,0 +1,86 @@
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { Menu } from "@base-ui/react/menu";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Menu.tsx
+var itemClassName = panelItemClassName;
+/** The portal, positioner and popup every menu needs. */
+function MenuPopup({ children, className, side = "bottom", align = "start", anchor, keepMounted = false }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		container: portalContainer(),
+		keepMounted,
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			side,
+			align,
+			anchor,
+			sideOffset: 4,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				className: clsx("min-w-44 max-h-(--available-height) overflow-y-auto py-1", panelClassName, className),
+				children
+			})
+		})
+	});
+}
+function MenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		...props,
+		className: clsx(itemClassName, className)
+	});
+}
+/** A navigation row; give it `render` for a router link. Closes the menu like any item. */
+function MenuLinkItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.LinkItem, {
+		closeOnClick: true,
+		...props,
+		className: clsx(itemClassName, className)
+	});
+}
+/** A choice within a Menu.RadioGroup, checked while it holds the group's value. */
+function MenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		closeOnClick: true,
+		...props,
+		className: clsx(itemClassName, "pl-2", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex w-3.5 shrink-0 justify-center",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3" }) })
+		}), children]
+	});
+}
+/** An on/off choice, checked while `checked` holds; it closes the menu like any item. */
+function MenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		closeOnClick: true,
+		...props,
+		className: clsx(itemClassName, className),
+		children: [children, /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "ml-auto",
+			children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5 opacity-80" })
+		})]
+	});
+}
+/** The row that opens a submenu, inside a Menu.SubmenuRoot. */
+function MenuSubmenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		...props,
+		className: clsx(itemClassName, "data-popup-open:bg-(--theme-hover)", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 items-center gap-2",
+			children
+		}), /* @__PURE__ */ jsx(LuChevronRight, { className: "size-3 shrink-0 opacity-60" })]
+	});
+}
+function MenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, { className: clsx("my-1 h-px bg-(--theme-border)", className) });
+}
+function MenuGroupLabel({ children }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-(--theme-muted-text-color)",
+		children
+	});
+}
+//#endregion
+export { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger };

package/dist/components/MenuEntries.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+/** Something a menu row does: navigates with `href`, or runs `onClick`. */
+export interface MenuAction {
+    label: string;
+    icon?: ReactNode;
+    /** Navigates instead of calling onClick. */
+    href?: string | undefined;
+    /** Loads the page instead of routing, for paths the host's router doesn't serve. */
+    reloadDocument?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    /** Why the action is disabled, shown on hover and read with its name. */
+    disabledReason?: string | undefined;
+    destructive?: boolean | undefined;
+    /** Makes the row an on/off choice, checked while true. */
+    checked?: boolean | undefined;
+    /** Text the row copies to the clipboard, confirmed with a toast naming `label`. */
+    copy?: {
+        text: string;
+        label: string;
+    } | undefined;
+    /** More text a menu's search matches, beside the label. */
+    keywords?: string | undefined;
+}
+/** A row that opens a menu of its own. */
+export interface MenuSubmenu {
+    label: string;
+    icon?: ReactNode;
+    items: MenuEntry[];
+    search?: MenuSearch | undefined;
+}
+export interface MenuDivider {
+    divider: true;
+}
+export type MenuEntry = MenuAction | MenuSubmenu | MenuDivider;
+export declare const menuDivider: MenuDivider;
+/** A field atop a menu that narrows it, submenus included, to the actions it matches. */
+export interface MenuSearch {
+    placeholder: string;
+    /** Shown when nothing matches. */
+    empty: string;
+}
+export declare const isMenuDivider: (entry: MenuEntry) => entry is MenuDivider;
+export declare const isMenuSubmenu: (entry: MenuEntry) => entry is MenuSubmenu;
+/** Gives a menu root its search's filter; `children` renders the root with the query. */
+export declare function MenuFilter({ search, children, }: {
+    search: MenuSearch | undefined;
+    children: (query: string) => ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/** A menu's rows, with its search field when it has one. */
+export declare function MenuEntries({ entries, search, query, }: {
+    entries: MenuEntry[];
+    search?: MenuSearch | undefined;
+    /** The search's text, from the MenuFilter around the menu's root. */
+    query?: string;
+}): import("react").JSX.Element;