@parallelworks/ui 0.41.0 → 0.42.0

package/dist/components/PageHeader.d.ts

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

package/dist/components/PageHeader.js

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

package/dist/components/Pagination.js

@@ -1,14 +1,14 @@
 import { useStrings } from "./Provider.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Pagination.tsx
 function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roundedBottom, startingNumber, startingTime, nextDisabled, prevDisabled, name, useTimeRange = false }) {
 	const t = useStrings().list;
 	return /* @__PURE__ */ jsxs("nav", {
-		className: cx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
+		className: clsx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
 		"aria-label": "Pagination",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cx("hidden", (startingNumber !== void 0 && endingNumber !== void 0 || startingTime && endingTime) && "sm:block"),
+			className: clsx("hidden", (startingNumber !== void 0 && endingNumber !== void 0 || startingTime && endingTime) && "sm:block"),
 			children: /* @__PURE__ */ jsx("p", {
 				className: "text-sm whitespace-nowrap",
 				children: useTimeRange && startingTime && endingTime ? t.paginationShowingTimeRange(name ?? "", startingTime, endingTime) : t.paginationShowing(name ?? "", startingNumber ?? "", endingNumber ?? "")
@@ -19,13 +19,13 @@ function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roun
 				type: "button",
 				disabled: prevDisabled,
 				onClick: prevCallback,
-				className: cx("link text-sm", prevDisabled && "disabled"),
+				className: clsx("link text-sm", prevDisabled && "disabled"),
 				children: t.paginationPrevious
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				disabled: nextDisabled,
 				onClick: nextCallback,
-				className: cx("link text-sm", nextDisabled && "disabled"),
+				className: clsx("link text-sm", nextDisabled && "disabled"),
 				children: t.paginationNext
 			})]
 		})]

package/dist/components/Provider.d.ts

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

package/dist/components/Provider.js

@@ -1,14 +1,12 @@
 import { safeUrl } from "../safeUrl.js";
+import { TooltipProvider } from "./Tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
-var DefaultLink = ({ to, onClick, className, children, ...rest }) => /* @__PURE__ */ jsx("a", {
-	href: safeUrl(to),
-	onClick,
-	className,
-	...rest,
-	children
+var DefaultLink = ({ href, ...rest }) => /* @__PURE__ */ jsx("a", {
+	href: safeUrl(href),
+	...rest
 });
 /** The provider's link slot, with a plain anchor fallback. */
 function useLink() {
@@ -46,8 +44,7 @@ var DEFAULTS = {
 			favorited: "Favorited",
 			favoriteHintOn: "Your item will be favorited when it's created",
 			favoriteHintOff: "Favorite your item when it's created",
-			filter: "Filter",
-			noOptions: "No options available"
+			filter: "Filter"
 		},
 		common: {
 			copy: "Copy",
@@ -60,7 +57,8 @@ var DEFAULTS = {
 			jsonHasErrors: "JSON has errors, please fix before saving",
 			remove: "Remove",
 			sort: "Sort",
-			userAvatar: "User avatar"
+			userAvatar: "User avatar",
+			moreInfo: "More information"
 		},
 		dropdown: {
 			select: (type) => `Select ${type}`,
@@ -350,7 +348,6 @@ var DEFAULTS = {
 			copied: (label) => `Copied ${label}`,
 			couldntCopy: (label) => `Couldn't copy ${label}`,
 			moreActions: "More actions",
-			toggleState: (label, on) => `${label}, ${on ? "on" : "off"}`,
 			labelName: "name",
 			labelEmail: "email",
 			labelUsername: "username",
@@ -383,7 +380,7 @@ var DEFAULTS = {
 			perPage: "Per page",
 			paginationPrevious: "Previous",
 			paginationNext: "Next",
-			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			paginationShowing: (name, start, end) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				"Showing ",
 				name,
 				" ",
@@ -398,7 +395,7 @@ var DEFAULTS = {
 					children: end
 				})
 			] }),
-			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			paginationShowingTimeRange: (name, startTime, endTime) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				"Showing ",
 				name,
 				" from ",
@@ -613,7 +610,7 @@ function UIProvider({ notify, strings, navigation, data, slots, engine, children
 	]);
 	return /* @__PURE__ */ jsx(UIContext.Provider, {
 		value,
-		children
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
 	});
 }
 //#endregion

package/dist/components/Radio.d.ts

@@ -0,0 +1,8 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+export { RadioGroup } from '@base-ui/react/radio-group';
+export interface RadioProps<Value> extends Omit<BaseRadio.Root.Props<Value>, 'className'> {
+    className?: string | undefined;
+}
+/** One choice in a `RadioGroup`, which holds the value. Name it with an
+ *  enclosing `<label>`. */
+export declare function Radio<Value>({ className, ...props }: RadioProps<Value>): import("react").JSX.Element;

package/dist/components/Radio.js

@@ -0,0 +1,16 @@
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/Radio.tsx
+/** One choice in a `RadioGroup`, which holds the value. Name it with an
+*  enclosing `<label>`. */
+function Radio$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		...props,
+		className: clsx("flex size-4 shrink-0 items-center justify-center rounded-full border border-(--theme-border) bg-(--theme-input-bg) cursor-pointer outline-none transition-colors", "data-checked:border-(--theme-element) data-checked:bg-(--theme-element)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "size-1.5 rounded-full bg-(--theme-element-text)" })
+	});
+}
+//#endregion
+export { Radio$1 as Radio, RadioGroup };

package/dist/components/SectionHeader.js

@@ -1,9 +1,9 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/SectionHeader.tsx
 function SectionHeader({ children, className = "", size = "md" }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
+		className: clsx("w-full font-semibold", size === "sm" ? "mb-2 text-sm theme-text" : "text-lg", className),
 		children
 	});
 }

package/dist/components/SegmentedControl.d.ts

@@ -5,18 +5,19 @@ export interface SegmentedOption<T extends string> {
     icon?: ReactNode;
     /** Beside the label, or in the corner when only the icon shows. */
     badge?: ReactNode;
-    /** Navigates instead of calling `onChange`, for segments that are pages. */
-    to?: string;
+    /** Navigates instead of choosing, for segments that are pages. */
+    href?: string;
     testId?: string;
 }
 /** A few mutually exclusive choices side by side, one always current. With
  *  `iconOnly` the segments stack as icons with their labels in tooltips, for
- *  a collapsed rail. */
-export declare function SegmentedControl<T extends string>({ label, options, value, onChange, fill, iconOnly, testId, }: {
+ *  a collapsed rail. Segments with `href` are pages, so the control becomes
+ *  navigation. */
+export declare function SegmentedControl<T extends string>({ label, options, value, onValueChange, fill, iconOnly, testId, }: {
     label: string;
     options: SegmentedOption<T>[];
     value: T;
-    onChange?: (value: T) => void;
+    onValueChange?: (value: T) => void;
     /** Segments share the container's width equally. */
     fill?: boolean;
     iconOnly?: boolean;

package/dist/components/SegmentedControl.js

@@ -1,20 +1,23 @@
+import { Tooltip } from "./Tooltip.js";
 import { useLink } from "./Provider.js";
-import { TOOLTIP_ID } from "./Tooltip.js";
-import cx from "classnames";
+import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/components/SegmentedControl.tsx
 var itemBase = "relative flex min-w-0 items-center justify-center rounded-md font-medium transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-link)";
 var itemCurrent = "bg-(--theme-panel-bg) theme-text shadow-sm ring-1 ring-(--theme-border)";
 var itemIdle = "theme-muted-text hover:theme-text hover:bg-(--theme-hover)";
 /** A few mutually exclusive choices side by side, one always current. With
 *  `iconOnly` the segments stack as icons with their labels in tooltips, for
-*  a collapsed rail. */
-function SegmentedControl({ label, options, value, onChange, fill = false, iconOnly = false, testId }) {
+*  a collapsed rail. Segments with `href` are pages, so the control becomes
+*  navigation. */
+function SegmentedControl({ label, options, value, onValueChange, fill = false, iconOnly = false, testId }) {
 	const Link = useLink();
-	const links = options.some((o) => o.to);
+	const links = options.some((o) => o.href);
 	const items = options.map((option) => {
 		const current = option.value === value;
-		const className = cx(itemBase, current ? itemCurrent : itemIdle, iconOnly ? "h-8 w-8" : cx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
+		const className = clsx(itemBase, current ? itemCurrent : itemIdle, iconOnly ? "h-8 w-8" : clsx("h-7 gap-1.5 text-[13px]", fill ? "px-1.5" : "px-2.5"));
 		const content = /* @__PURE__ */ jsxs(Fragment, { children: [
 			option.icon,
 			iconOnly ? /* @__PURE__ */ jsx("span", {
@@ -29,39 +32,40 @@ function SegmentedControl({ label, options, value, onChange, fill = false, iconO
 				children: option.badge
 			}) : option.badge)
 		] });
-		const tooltip = iconOnly ? {
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": option.label,
-			"data-tooltip-place": "right"
-		} : {};
-		return option.to ? /* @__PURE__ */ jsx(Link, {
-			to: option.to,
-			"aria-current": current ? "page" : void 0,
-			"data-testid": option.testId,
-			className,
-			...tooltip,
-			children: content
-		}, option.value) : /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-pressed": current,
-			"data-testid": option.testId,
-			onClick: () => onChange?.(option.value),
-			className,
-			...tooltip,
-			children: content
+		return /* @__PURE__ */ jsx(Tooltip, {
+			content: option.label,
+			side: "right",
+			disabled: !iconOnly,
+			children: option.href ? /* @__PURE__ */ jsx(Link, {
+				href: option.href,
+				"aria-current": current ? "page" : void 0,
+				"data-testid": option.testId,
+				className,
+				children: content
+			}) : /* @__PURE__ */ jsx(Toggle, {
+				value: option.value,
+				"data-testid": option.testId,
+				className,
+				children: content
+			})
 		}, option.value);
 	});
-	const groupClassName = cx("gap-0.5", iconOnly ? "flex flex-col items-center" : cx("rounded-lg theme-muted-panel p-0.5", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
-	return links ? /* @__PURE__ */ jsx("nav", {
+	const groupClassName = clsx("gap-0.5", iconOnly ? "flex flex-col items-center" : clsx("rounded-lg theme-muted-panel p-0.5", fill ? "grid auto-cols-fr grid-flow-col" : "inline-flex"));
+	if (links) return /* @__PURE__ */ jsx("nav", {
 		"aria-label": label,
 		"data-testid": testId,
 		className: groupClassName,
 		children: items
-	}) : /* @__PURE__ */ jsx("div", {
-		role: "group",
+	});
+	return /* @__PURE__ */ jsx(ToggleGroup, {
 		"aria-label": label,
 		"data-testid": testId,
 		className: groupClassName,
+		orientation: iconOnly ? "vertical" : "horizontal",
+		value: [value],
+		onValueChange: ([next]) => {
+			if (next !== void 0) onValueChange?.(next);
+		},
 		children: items
 	});
 }

package/dist/components/Select.d.ts

@@ -0,0 +1,27 @@
+import { Select as BaseSelect } from '@base-ui/react/select';
+import type { ReactElement, ReactNode } from 'react';
+export interface SelectItem<Value> {
+    value: Value;
+    label: string;
+    /** A second line under the label, such as what an option does. */
+    description?: string | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<Value, Multiple>, 'items' | 'children'> & {
+    items: readonly SelectItem<Value>[];
+    placeholder?: string | undefined;
+    /** Applied to the trigger. */
+    className?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    /** Renders the field as this button, for compact pickers such as a toolbar pill. The
+     *  button shows the selection itself; `placeholder` and `className` then go unused. */
+    trigger?: ReactElement | undefined;
+    /** A hint on the trigger button. */
+    triggerTooltip?: ReactNode;
+};
+/** Picks one value, or several with `multiple`, from a short list. Use
+ *  Combobox when the list is long enough to need filtering. */
+export declare function Select<Value, Multiple extends boolean | undefined = false>({ items, placeholder, className, 'aria-label': ariaLabel, 'aria-describedby': describedBy, 'aria-invalid': invalid, trigger, triggerTooltip, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;