@parallelworks/ui 0.41.0 → 0.42.0

package/dist/components/Select.js

@@ -0,0 +1,78 @@
+import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
+import { FaCheck } from "../icons/fa/FaCheck.js";
+import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { Tooltip } from "./Tooltip.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/Select.tsx
+var triggerClassName = clsx("flex w-full items-center justify-between gap-2 rounded-md border border-(--theme-border) bg-(--theme-input-bg) py-2 pl-3 pr-2 text-left text-sm text-(--theme-app) cursor-pointer outline-none", "focus-visible:border-(--theme-element) focus-visible:ring-1 focus-visible:ring-(--theme-element)", "aria-invalid:border-(--theme-error) data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-input-disabled-text)");
+/** Picks one value, or several with `multiple`, from a short list. Use
+*  Combobox when the list is long enough to need filtering. */
+function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": invalid, trigger, triggerTooltip, ...rootProps }) {
+	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
+	const triggerProps = {
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		"aria-invalid": invalid || void 0
+	};
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items,
+		...rootProps,
+		children: [trigger ? /* @__PURE__ */ jsx(Tooltip, {
+			content: triggerTooltip,
+			children: /* @__PURE__ */ jsx(Select.Trigger, {
+				...triggerProps,
+				render: trigger
+			})
+		}) : /* @__PURE__ */ jsxs(Select.Trigger, {
+			...triggerProps,
+			className: clsx(triggerClassName, className),
+			children: [/* @__PURE__ */ jsx(Select.Value, {
+				placeholder,
+				className: "truncate data-placeholder:text-(--theme-muted-text-color)",
+				children: rootProps.multiple ? (values) => values.length > 0 ? values.map(labelOf).join(", ") : placeholder : void 0
+			}), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "shrink-0 text-(--theme-muted-text-color)",
+				children: /* @__PURE__ */ jsx(FaAngleDown, { "aria-hidden": "true" })
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			container: portalContainer(),
+			children: /* @__PURE__ */ jsx(Select.Positioner, {
+				alignItemWithTrigger: false,
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Select.Popup, {
+					className: clsx("min-w-(--anchor-width) max-w-[min(20rem,var(--available-width))]", panelClassName),
+					children: /* @__PURE__ */ jsx(Select.List, {
+						className: "max-h-[min(15rem,var(--available-height))] overflow-y-auto py-1",
+						children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+							value: item.value,
+							disabled: item.disabled,
+							className: clsx("grid grid-cols-[1rem_1fr]", panelItemClassName),
+							children: [
+								/* @__PURE__ */ jsx(Select.ItemIndicator, {
+									className: "col-start-1",
+									children: /* @__PURE__ */ jsx(FaCheck, { className: "size-3.5" })
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "col-start-2 flex min-w-0 items-center gap-2",
+									children: [item.icon, /* @__PURE__ */ jsx(Select.ItemText, {
+										className: "truncate",
+										children: item.label
+									})]
+								}),
+								item.description && /* @__PURE__ */ jsx("span", {
+									className: "col-start-2 text-xs text-(--theme-muted-text-color)",
+									children: item.description
+								})
+							]
+						}, String(item.value)))
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { Select$1 as Select };

package/dist/components/SettingModeOption.d.ts

@@ -1,11 +1,8 @@
-/** A labeled + described radio option row, used inside a SettingsCard to pick
- * between modes (e.g. default vs custom). Stacked rows share the card's
- * dividers via `isFirst`. */
-export declare function SettingModeOption({ name, checked, onSelect, label, description, isFirst, disabled, }: {
-    /** Radio group name; shared across the options of one picker. */
-    name: string;
-    checked: boolean;
-    onSelect: () => void;
+/** A labeled + described choice in a SettingsCard, picking between modes (e.g.
+ * default vs custom). Stack them in a `RadioGroup`, which holds the value;
+ * stacked rows share the card's dividers via `isFirst`. */
+export declare function SettingModeOption({ value, label, description, isFirst, disabled, }: {
+    value: string;
     label: string;
     description: string;
     isFirst?: boolean;

package/dist/components/SettingModeOption.js

@@ -1,19 +1,17 @@
-import cx from "classnames";
+import { Radio } from "./Radio.js";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingModeOption.tsx
-/** A labeled + described radio option row, used inside a SettingsCard to pick
-* between modes (e.g. default vs custom). Stacked rows share the card's
-* dividers via `isFirst`. */
-function SettingModeOption({ name, checked, onSelect, label, description, isFirst, disabled }) {
+/** A labeled + described choice in a SettingsCard, picking between modes (e.g.
+* default vs custom). Stack them in a `RadioGroup`, which holds the value;
+* stacked rows share the card's dividers via `isFirst`. */
+function SettingModeOption({ value, label, description, isFirst, disabled }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
-		children: [/* @__PURE__ */ jsx("input", {
-			type: "radio",
-			name,
-			checked,
-			onChange: onSelect,
+		className: clsx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
+		children: [/* @__PURE__ */ jsx(Radio, {
+			value,
 			disabled,
-			className: "mt-0.5 w-4 h-4 theme-input shrink-0"
+			className: "mt-0.5"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsx("div", {

package/dist/components/SettingRow.js

@@ -1,11 +1,11 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingRow.tsx
 function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick }) {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "none",
 		onClick,
-		className: cx("px-5 py-5 grid grid-cols-1 gap-x-8 gap-y-2", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", !isFirst && "border-t theme-border", onClick && "cursor-pointer select-none hover:theme-hover transition-colors"),
+		className: clsx("px-5 py-5 grid grid-cols-1 gap-x-8 gap-y-2", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", !isFirst && "border-t theme-border", onClick && "cursor-pointer select-none hover:theme-hover transition-colors"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-y-1",
 			children: [/* @__PURE__ */ jsx("label", {
@@ -17,14 +17,14 @@ function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick
 				children: helpText
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx("min-w-0", !fill && "flex items-center justify-end"),
+			className: clsx("min-w-0", !fill && "flex items-center justify-end"),
 			children
 		})]
 	});
 }
 function SettingSection({ title, isFirst }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("px-5 py-3 theme-muted-panel", !isFirst && "border-t theme-border"),
+		className: clsx("px-5 py-3 theme-muted-panel", !isFirst && "border-t theme-border"),
 		children: /* @__PURE__ */ jsx("h2", {
 			className: "font-semibold text-sm uppercase tracking-wider theme-muted-text",
 			children: title

package/dist/components/SettingsCard.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsCard.tsx
 /**
@@ -8,11 +8,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 function SettingsCard({ title, description, action, actionAlign = "adjacent", overflowVisible, children, className }) {
 	return /* @__PURE__ */ jsxs("section", {
-		className: cx("mt-10 first:mt-0", className),
+		className: clsx("mt-10 first:mt-0", className),
 		children: [(title || action) && /* @__PURE__ */ jsxs("div", {
 			className: "mb-3 px-0.5",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center gap-1.5", actionAlign === "right" && "justify-between"),
+				className: clsx("flex items-center gap-1.5", actionAlign === "right" && "justify-between"),
 				children: [title && /* @__PURE__ */ jsx("h2", {
 					className: "text-[15px] font-semibold theme-text leading-none",
 					children: title
@@ -22,7 +22,7 @@ function SettingsCard({ title, description, action, actionAlign = "adjacent", ov
 				children: description
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: cx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+			className: clsx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
 			children
 		})]
 	});

package/dist/components/SettingsGroup.js

@@ -1,9 +1,9 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsGroup.tsx
 function SettingsGroup({ title, children, className }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("mt-8 first:mt-0", className),
+		className: clsx("mt-8 first:mt-0", className),
 		children: [title && /* @__PURE__ */ jsx("h2", {
 			className: "text-[11px] font-semibold uppercase tracking-wider theme-muted-text mb-2 px-1",
 			children: title

package/dist/components/Sort.js

@@ -1,7 +1,7 @@
-import { useStrings } from "./Provider.js";
 import { TiArrowSortedDown } from "../icons/ti/TiArrowSortedDown.js";
 import { TiArrowSortedUp } from "../icons/ti/TiArrowSortedUp.js";
 import { TiArrowUnsorted } from "../icons/ti/TiArrowUnsorted.js";
+import { useStrings } from "./Provider.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Sort.tsx
 var SortIcon = ({ currentlySorted, currentDirection, name }) => {

package/dist/components/StatusBadge.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/StatusBadge.tsx
 var variantStyles = {
@@ -32,26 +32,26 @@ function statusTextClass(variant) {
 }
 function StatusBadge({ children, variant = "default", pulse = false, dot = false, size = "sm", className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
+		className: clsx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
 		children: [
 			pulse && /* @__PURE__ */ jsxs("span", {
 				className: "relative flex h-2 w-2",
-				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
+				children: [/* @__PURE__ */ jsx("span", { className: clsx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: clsx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
 			}),
-			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
+			dot && !pulse && /* @__PURE__ */ jsx("span", { className: clsx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
 			children
 		]
 	});
 }
 function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: cx("relative inline-flex", className),
+		className: clsx("relative inline-flex", className),
 		style: {
 			width: size,
 			height: size
 		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
-			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: clsx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: clsx("relative inline-flex rounded-full", pulseColors[variant]),
 			style: {
 				width: size,
 				height: size

package/dist/components/StatusIcons.js

@@ -1,18 +1,18 @@
 import { BiError } from "../icons/bi/BiError.js";
 import { HiMiniCheckCircle } from "../icons/hi2/HiMiniCheckCircle.js";
 import { FaCircleNotch } from "../icons/fa/FaCircleNotch.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/StatusIcons.tsx
 function SuccessCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: cx(colored && "text-green-500", className) });
+	return /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: clsx(colored && "text-green-500", className) });
 }
 function ErrorCheckmark({ className, colored = true }) {
-	return /* @__PURE__ */ jsx(BiError, { className: cx(colored && "text-red-400", className) });
+	return /* @__PURE__ */ jsx(BiError, { className: clsx(colored && "text-red-400", className) });
 }
 function LoaderIcon({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FaCircleNotch, {
-		className: cx("animate-spin", className),
+		className: clsx("animate-spin", className),
 		...props
 	});
 }

package/dist/components/Switch.d.ts

@@ -0,0 +1,22 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+declare const sizes: {
+    sm: {
+        root: string;
+        thumb: string;
+    };
+    md: {
+        root: string;
+        thumb: string;
+    };
+};
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'className' | 'children'> {
+    size?: keyof typeof sizes;
+    className?: string | undefined;
+}
+/**
+ * An on/off control. Name it with an enclosing `<label>`, or `aria-label`. A
+ * sibling `<label htmlFor>` needs `nativeButton render={<button />}`, which
+ * puts the id on the button the label points at.
+ */
+export declare function Switch({ size, className, ...props }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist/components/Switch.js

@@ -0,0 +1,28 @@
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/Switch.tsx
+var sizes = {
+	sm: {
+		root: "h-5 w-9",
+		thumb: "size-4 data-checked:translate-x-4"
+	},
+	md: {
+		root: "h-6 w-11",
+		thumb: "size-5 data-checked:translate-x-5"
+	}
+};
+/**
+* An on/off control. Name it with an enclosing `<label>`, or `aria-label`. A
+* sibling `<label htmlFor>` needs `nativeButton render={<button />}`, which
+* puts the id on the button the label points at.
+*/
+function Switch$1({ size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		...props,
+		className: clsx("inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border) transition-colors duration-200 cursor-pointer outline-none", "data-checked:bg-(--theme-element)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: clsx("rounded-full bg-white shadow-sm transition-transform duration-200", sizes[size].thumb) })
+	});
+}
+//#endregion
+export { Switch$1 as Switch };

package/dist/components/Table.js

@@ -1,8 +1,8 @@
 import { useStrings } from "./Provider.js";
 import Loader from "./Loader.js";
-import cx from "classnames";
-import React from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
 //#region src/components/Table.tsx
 function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	const yPadding = className?.includes("py-") ? "" : "py-4";
@@ -10,7 +10,7 @@ function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
 		colSpan: colspan,
-		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		className: clsx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
 		children
 	});
 }
@@ -18,7 +18,7 @@ function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProp
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
 		colSpan: colspan,
-		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
+		className: clsx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
 		children
 	});
 }
@@ -31,7 +31,7 @@ function Header({ children, className, style, colspan = 1, onClick, sort, caps =
 		colSpan: colspan,
 		style,
 		"aria-sort": sort === "unsorted" ? "none" : sort,
-		className: cx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
+		className: clsx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
 		children: onClick ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick,
@@ -52,7 +52,7 @@ function Table({ borderless = false, panel = true, className = "", wrapperClassN
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
 		"aria-busy": isLoading,
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+		className: clsx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: isLoading ? /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			"aria-label": loading,
@@ -62,9 +62,9 @@ function Table({ borderless = false, panel = true, className = "", wrapperClassN
 				children: loading
 			})]
 		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+			className: clsx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
 			children: /* @__PURE__ */ jsxs("table", {
-				className: cx(className, "min-w-full divide-y theme-border"),
+				className: clsx(className, "min-w-full divide-y theme-border"),
 				...tableProps,
 				children: [/* @__PURE__ */ jsx("thead", {
 					className: theadClassName,
@@ -82,11 +82,11 @@ function CompactTable({ wrapperClassName = "", className = "", tbodyClassName =
 	const Headers = getHeaders(ChildrenArr);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+		className: clsx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
+			className: clsx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
 			children: /* @__PURE__ */ jsxs("table", {
-				className: cx("min-w-full divide-y theme-border", className),
+				className: clsx("min-w-full divide-y theme-border", className),
 				children: [/* @__PURE__ */ jsx("thead", {
 					className: "theme-muted-panel",
 					children: /* @__PURE__ */ jsx("tr", {

package/dist/components/Tooltip.d.ts

@@ -1,21 +1,25 @@
-import { type PlacesType } from 'react-tooltip';
-export declare const TOOLTIP_ID = "global-tooltip";
-/** Anchor props that reveal `content` only while the text is ellipsized; `measure` picks the clipped descendant when it isn't the anchor. */
-export declare function truncationTooltipProps(content: string, measure?: (anchor: HTMLElement) => HTMLElement | null): {
-    role: 'none';
-    'data-tooltip-id': string;
-    onMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
-};
-/** Tooltip 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 formatTooltipContent(content: React.ReactNode): number | bigint | true | import("react").JSX.Element[] | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
-/** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
-export declare function GlobalTooltip(): import("react").JSX.Element;
-interface ITooltipInfo {
-    text: string;
-    className?: string | undefined;
-    place?: PlacesType;
-    children?: React.ReactNode;
-    tabIndex?: number;
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ReactElement, type ReactNode } from 'react';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+/** One popup serves every Tooltip below it, so each anchor costs only a trigger.
+ *  UIProvider mounts it; nothing else needs to. */
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Props beyond the tooltip's own go to the anchor, so a Tooltip can be another
+ *  trigger's render target, such as a popover button with a hint. */
+export interface TooltipProps extends Omit<BaseTooltip.Trigger.Props, 'content' | 'children' | 'render' | 'handle' | 'payload'> {
+    /** Nothing to show disables the tooltip. Newlines in a string break lines. */
+    content: ReactNode;
+    /** The anchor. It receives the trigger's props and ref, so it must pass them to its element. */
+    children: ReactElement;
+    side?: TooltipSide;
+    /** Keys shown beside the content, joined with +, such as ⌘+F. */
+    shortcut?: string | undefined;
+    disabled?: boolean | undefined;
+    /** Opens only while the anchor's text is clipped, such as a truncated label. */
+    overflowOnly?: boolean;
 }
-export declare function TooltipInfo({ text, className, children, place, tabIndex, }: ITooltipInfo): import("react").JSX.Element;
-export {};
+/** A visual hint for sighted pointer and keyboard users. The anchor still needs
+ *  its own accessible name; use InfoTip for content everyone must reach. */
+export declare function Tooltip({ content, children, side, shortcut, disabled, overflowOnly, ...anchorProps }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -1,98 +1,80 @@
-import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
+import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
 import { keyedByContent } from "./keys.js";
-import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tooltip } from "react-tooltip";
+import { Fragment as Fragment$1, createContext, use, useState } from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/components/Tooltip.tsx
-var TOOLTIP_ID = "global-tooltip";
-/** Anchor props that reveal `content` only while the text is ellipsized; `measure` picks the clipped descendant when it isn't the anchor. */
-function truncationTooltipProps(content, measure) {
-	return {
-		role: "none",
-		"data-tooltip-id": TOOLTIP_ID,
-		onMouseEnter: (event) => {
-			const anchor = event.currentTarget;
-			const measured = measure ? measure(anchor) : anchor;
-			if (measured && measured.scrollWidth > measured.clientWidth) anchor.setAttribute("data-tooltip-content", content);
-			else anchor.removeAttribute("data-tooltip-content");
-		}
-	};
-}
-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;
-}
-/** Tooltip text can come from untrusted sources (workflow YAML), so all markup is literal text — only `[text](url)` links and newlines are parsed. */
-function formatTooltipContent(content) {
-	if (typeof content !== "string") return content || null;
-	if (!content) return null;
-	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
-}
+var TooltipHandleContext = createContext(null);
 function KbdShortcut({ keys }) {
 	const parts = keys.split("+").map((part) => part.trim()).filter(Boolean);
 	return /* @__PURE__ */ jsx("span", {
 		className: "inline-flex items-center gap-1 align-middle",
-		children: keyedByContent(parts, (p) => p).map(({ key, item: part }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
+		children: keyedByContent(parts, (p) => p).map(({ key, item: part }, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
 			className: "opacity-60 text-[11px]",
 			children: "+"
 		}), /* @__PURE__ */ jsx("kbd", {
-			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-white/30 bg-white/10 font-sans text-[11px] font-semibold leading-none",
+			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-current/30 bg-current/10 font-sans text-[11px] font-semibold leading-none",
 			children: part
 		})] }, key))
 	});
 }
-var globalCloseEvents = { escape: true };
-/** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
-function GlobalTooltip() {
-	return /* @__PURE__ */ jsx(Tooltip, {
-		id: TOOLTIP_ID,
-		className: "max-w-lg break-words config-tips normal-case text-left z-[10000]",
-		place: "top",
-		globalCloseEvents,
-		render: ({ content, activeAnchor }) => {
-			const body = formatTooltipContent(content);
-			const shortcut = activeAnchor?.getAttribute("data-tooltip-shortcut");
-			if (!shortcut) return body;
-			return /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-2",
-				children: [body, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
-			});
-		}
+function TooltipPopup({ content, shortcut, side }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, {
+		container: portalContainer(),
+		children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+			side,
+			sideOffset: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+				className: `max-w-xs ${tipClassName}`,
+				children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { className: tipArrowClassName }), shortcut ? /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-2",
+					children: [content, /* @__PURE__ */ jsx(KbdShortcut, { keys: shortcut })]
+				}) : content]
+			})
+		})
 	});
 }
-function TooltipInfo({ text, className = "", children, place = "top", tabIndex }) {
-	const anchorProps = {
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": text,
-		"data-tooltip-place": place,
-		className
+/** One popup serves every Tooltip below it, so each anchor costs only a trigger.
+*  UIProvider mounts it; nothing else needs to. */
+function TooltipProvider({ children }) {
+	const [handle] = useState(() => Tooltip.createHandle());
+	return /* @__PURE__ */ jsxs(Tooltip.Provider, { children: [/* @__PURE__ */ jsx(TooltipHandleContext, {
+		value: handle,
+		children
+	}), /* @__PURE__ */ jsx(Tooltip.Root, {
+		handle,
+		onOpenChange: skipUnclipped,
+		children: ({ payload }) => payload && /* @__PURE__ */ jsx(TooltipPopup, { ...payload })
+	})] });
+}
+/** An overflowOnly anchor opens only while its text is cut off. */
+function skipUnclipped(open, details) {
+	const anchor = details.trigger;
+	if (open && anchor instanceof HTMLElement && anchor.hasAttribute("data-overflow-only") && anchor.scrollWidth <= anchor.clientWidth) details.cancel();
+}
+/** A visual hint for sighted pointer and keyboard users. The anchor still needs
+*  its own accessible name; use InfoTip for content everyone must reach. */
+function Tooltip$1({ content, children, side = "top", shortcut, disabled = false, overflowOnly = false, ...anchorProps }) {
+	const handle = use(TooltipHandleContext);
+	const payload = {
+		content,
+		shortcut,
+		side
 	};
-	if (children || !text) return /* @__PURE__ */ jsx("div", {
+	const trigger = /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		...anchorProps,
-		tabIndex,
-		children: children || /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "tooltip" })
+		handle: handle ?? void 0,
+		payload,
+		disabled: disabled || !content,
+		"data-overflow-only": overflowOnly || void 0,
+		render: children
 	});
-	return /* @__PURE__ */ jsx("div", {
-		...anchorProps,
-		role: "img",
-		"aria-label": text,
-		tabIndex: tabIndex ?? 0,
-		children: /* @__PURE__ */ jsx(HiQuestionMarkCircle, { className: "tooltip" })
+	if (handle) return trigger;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		onOpenChange: skipUnclipped,
+		children: [trigger, /* @__PURE__ */ jsx(TooltipPopup, { ...payload })]
 	});
 }
 //#endregion
-export { GlobalTooltip, TOOLTIP_ID, TooltipInfo, formatTooltipContent, truncationTooltipProps };
+export { Tooltip$1 as Tooltip, TooltipProvider };

package/dist/components/floating.d.ts

@@ -0,0 +1,14 @@
+/** Popups portal into the host's .ds-root when it has one, so they inherit the
+ *  design system's CSS variables; undefined lets the portal use document.body. */
+export declare function portalContainer(): HTMLElement | undefined;
+/** Above dialogs and sticky chrome; hidden while its anchor is scrolled out of view. */
+export declare const positionerClassName = "z-[10000] outline-none data-anchor-hidden:invisible";
+/** A panel of choices: a menu, a select's list, a combobox's list. */
+export declare const panelClassName = "rounded-lg border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+/** A row in a panel. */
+export declare const panelItemClassName = "flex w-full cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-left outline-none data-highlighted:bg-(--theme-hover) data-highlighted:text-(--theme-hover-text) data-disabled:cursor-not-allowed data-disabled:opacity-50";
+/** A tooltip's or infotip's small inverted surface. */
+export declare const tipClassName = "rounded-md bg-(--theme-app) px-2 py-1 text-xs text-(--theme-app-bg) shadow-(--theme-shadow) whitespace-pre-line break-words data-instant:transition-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+export declare const tipArrowClassName = "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";
+/** A hover card's surface; the card sets its own width and padding. */
+export declare const cardClassName = "overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-(--theme-shadow-lg) outline-none origin-(--transform-origin) transition-[transform,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";