@parallelworks/ui 0.44.0 → 0.45.0

package/dist/components/RunStatusIcon.js

@@ -0,0 +1,84 @@
+import { cx } from "../cx.js";
+import { CancelIcon, FailIcon, NotRunningIcon, RunningIcon, SkipIcon, SuccessIcon } from "../icons.js";
+import { toneText } from "./tone.js";
+import { useStrings } from "./Provider.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/RunStatusIcon.tsx
+var looks = {
+	started: {
+		tone: "warning",
+		icon: RunningIcon,
+		spin: true
+	},
+	running: {
+		tone: "warning",
+		icon: RunningIcon,
+		spin: true
+	},
+	completed: {
+		tone: "success",
+		icon: SuccessIcon
+	},
+	failed: {
+		tone: "error",
+		icon: FailIcon
+	},
+	error: {
+		tone: "error",
+		icon: FailIcon
+	},
+	skipped: {
+		tone: "muted",
+		icon: SkipIcon
+	},
+	"skipped-failed": {
+		tone: "muted",
+		icon: SkipIcon
+	},
+	canceled: {
+		tone: "info",
+		icon: CancelIcon
+	},
+	faulted: {
+		tone: "error",
+		icon: RunningIcon,
+		spin: true
+	},
+	canceling: {
+		tone: "info",
+		icon: RunningIcon,
+		spin: true
+	},
+	"": {
+		tone: "muted",
+		icon: NotRunningIcon
+	}
+};
+/** The tone a run status reads in, so a badge that says the status in words matches the
+*  icon: `<StatusBadge variant={runStatusTone(status)}>`. */
+function runStatusTone(status) {
+	return looks[status ?? ""].tone;
+}
+/** A run's, job's or step's status as an icon in its tone, beside the name of what ran. It
+*  is named by `strings.dag.statusLabel`. To say the status in words, use `StatusBadge` with
+*  `runStatusTone`. */
+function RunStatusIcon({ status, className }) {
+	const { dag } = useStrings();
+	const look = looks[status ?? ""];
+	const Icon = look.icon;
+	const label = dag.statusLabel(status ?? "");
+	return /* @__PURE__ */ jsx("span", {
+		...label ? {
+			role: "img",
+			"aria-label": label
+		} : { "aria-hidden": true },
+		"data-status": status || "not-run",
+		className: cx("flex h-2 items-center", toneText[look.tone], className),
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: cx(look.spin && "animate-spin rounded-full")
+		})
+	});
+}
+//#endregion
+export { RunStatusIcon, runStatusTone };

package/dist/components/SearchInput.d.ts

@@ -0,0 +1,16 @@
+import type { InputHTMLAttributes, Ref } from 'react';
+import { type FieldBoxSize } from './fieldBox.js';
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'className'> {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Names the box, and is its placeholder unless `placeholder` says otherwise. */
+    label?: string | undefined;
+    size?: FieldBoxSize | undefined;
+    /** On the wrapper: its width or margin. */
+    className?: string | undefined;
+    ref?: Ref<HTMLInputElement> | undefined;
+}
+/** A box that narrows what is shown as you type, such as a panel's rows or a log's lines.
+ *  A clear button empties it, and so does Escape, without closing the dialog it sits in. For
+ *  a list page's toolbar, which keeps search terms and opens on ⌘F, use `ListSearchControl`. */
+export declare function SearchInput({ value, onValueChange, label, placeholder, size, className, onKeyDown, ref, ...props }: SearchInputProps): import("react").JSX.Element;

package/dist/components/SearchInput.js

@@ -0,0 +1,52 @@
+import { cx } from "../cx.js";
+import { CloseIcon, SearchIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SearchInput.tsx
+/** A box that narrows what is shown as you type, such as a panel's rows or a log's lines.
+*  A clear button empties it, and so does Escape, without closing the dialog it sits in. For
+*  a list page's toolbar, which keeps search terms and opens on ⌘F, use `ListSearchControl`. */
+function SearchInput({ value, onValueChange, label, placeholder, size = "md", className, onKeyDown, ref, ...props }) {
+	const { common } = useStrings();
+	const name = label ?? common.search;
+	const small = size === "sm";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("relative flex items-center", className),
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {
+				"aria-hidden": "true",
+				className: cx("pointer-events-none absolute text-(--theme-muted-text-color)", small ? "left-2 size-3" : "left-2.5 size-3.5")
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...props,
+				ref,
+				type: "search",
+				"aria-label": name,
+				placeholder: placeholder ?? name,
+				value,
+				onChange: (e) => onValueChange(e.target.value),
+				onKeyDown: (e) => {
+					onKeyDown?.(e);
+					if (e.key === "Escape" && value && !e.defaultPrevented) {
+						e.stopPropagation();
+						onValueChange("");
+					}
+				},
+				className: cx(fieldBox({ size }), "[&::-webkit-search-cancel-button]:appearance-none", small ? "pl-6 pr-6" : "pl-8 pr-8")
+			}),
+			value && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": common.clearSearch,
+				onClick: () => onValueChange(""),
+				className: "absolute right-1 flex size-6 cursor-pointer items-center justify-center rounded text-(--theme-muted-text-color) hover:text-(--theme-app)",
+				children: /* @__PURE__ */ jsx(CloseIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { SearchInput };

package/dist/components/Section.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export type SectionVariant = 'plain' | 'card';
+export interface SectionProps {
+    title: ReactNode;
+    /** Beside the title, outside the toggle, such as an info tip or a count. */
+    beside?: ReactNode;
+    /** At the header's far end, such as an add button or a range picker. */
+    actions?: ReactNode;
+    /** `plain` rules the title off from the content under it; `card` frames the
+     *  section as a panel. */
+    variant?: SectionVariant | undefined;
+    /** False shows the content always, under a title that doesn't fold. */
+    collapsible?: boolean | undefined;
+    /** Hold the state, such as a remembered preference, with `open` and
+     *  `onOpenChange`; or leave it to the section with `defaultOpen`. */
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    /** The heading level the title sits at in the page's outline. */
+    headingLevel?: 2 | 3 | 4 | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/** A titled part of a page or form, its title a heading in the page's outline,
+ *  that can fold away. Folding keeps the content mounted, so fields hold their
+ *  values and validation while closed. For a line inside content that reveals
+ *  more detail, use Disclosure. */
+export declare function Section({ title, beside, actions, variant, collapsible, open, onOpenChange, defaultOpen, headingLevel, className, children, }: SectionProps): import("react").JSX.Element;

package/dist/components/Section.js

@@ -0,0 +1,76 @@
+import { cx } from "../cx.js";
+import { ChevronRightIcon } from "../icons.js";
+import { collapsePanelClassName } from "./Disclosure.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/Section.tsx
+var rootClasses = {
+	plain: "flex w-full flex-col",
+	card: "group/section panel mb-1 flex w-full flex-col"
+};
+var headerClasses = {
+	plain: "mb-2 flex w-full items-center gap-2 border-b border-(--theme-border) pb-1",
+	card: "flex w-full items-center gap-2 px-2 py-3"
+};
+var titleClasses = {
+	plain: "text-lg font-semibold",
+	card: "text-sm font-bold text-(--theme-muted-text-color) group-data-open/section:text-inherit"
+};
+/** A titled part of a page or form, its title a heading in the page's outline,
+*  that can fold away. Folding keeps the content mounted, so fields hold their
+*  values and validation while closed. For a line inside content that reveals
+*  more detail, use Disclosure. */
+function Section({ title, beside, actions, variant = "plain", collapsible = true, open, onOpenChange, defaultOpen = true, headingLevel = 3, className, children }) {
+	const Heading = `h${headingLevel}`;
+	const end = actions && /* @__PURE__ */ jsx("div", {
+		className: "ml-auto flex items-center gap-2",
+		children: actions
+	});
+	const titleProps = { "data-section-title": "" };
+	const fill = !beside && !actions;
+	if (!collapsible) return /* @__PURE__ */ jsxs("section", {
+		className: cx(rootClasses[variant], className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: headerClasses[variant],
+			children: [
+				/* @__PURE__ */ jsx(Heading, {
+					...titleProps,
+					className: cx("flex items-center", titleClasses[variant]),
+					children: title
+				}),
+				beside,
+				end
+			]
+		}), children]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		open,
+		onOpenChange: (next) => onOpenChange?.(next),
+		defaultOpen,
+		className: cx(rootClasses[variant], className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: headerClasses[variant],
+			children: [
+				/* @__PURE__ */ jsx(Heading, {
+					className: cx("flex min-w-0", fill && "flex-1"),
+					children: /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+						...titleProps,
+						className: cx("group flex min-w-0 cursor-pointer items-center gap-1 text-left", fill && "w-full", titleClasses[variant]),
+						children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+							"aria-hidden": "true",
+							className: cx("shrink-0 transition-transform group-data-panel-open:rotate-90 motion-reduce:transition-none", "px-1 text-[1.25rem]")
+						}), title]
+					})
+				}),
+				beside,
+				end
+			]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			keepMounted: true,
+			className: collapsePanelClassName,
+			children
+		})]
+	});
+}
+//#endregion
+export { Section };

package/dist/components/SegmentedControl.d.ts

@@ -1,25 +1,21 @@
 import type { ReactNode } from 'react';
+import { type SegmentLayout } from './segmented.js';
 export interface SegmentedOption<T extends string> {
     value: T;
     label: string;
     icon?: ReactNode;
     /** Beside the label, or in the corner when only the icon shows. */
     badge?: ReactNode;
-    /** 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. 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;
+/** A few mutually exclusive choices side by side, one always current, such as
+ *  a time range or what to group by. To move between views or pages, use
+ *  `Tabs` with `variant="segmented"`, which looks the same. Name it with
+ *  `label`, or leave that out inside a `Field group`, whose legend names it. */
+export declare function SegmentedControl<T extends string>({ label, options, value, onValueChange, fill, iconOnly, testId, }: SegmentLayout & {
+    label?: string | undefined;
     options: SegmentedOption<T>[];
     value: T;
     onValueChange?: (value: T) => void;
-    /** Segments share the container's width equally. */
-    fill?: boolean;
-    iconOnly?: boolean;
     testId?: string;
 }): import("react").JSX.Element;

package/dist/components/SegmentedControl.js

@@ -1,72 +1,41 @@
 import { Tooltip } from "./Tooltip.js";
-import { useLink } from "./Provider.js";
-import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
+import { jsx } 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. Segments with `href` are pages, so the control becomes
-*  navigation. */
+/** A few mutually exclusive choices side by side, one always current, such as
+*  a time range or what to group by. To move between views or pages, use
+*  `Tabs` with `variant="segmented"`, which looks the same. Name it with
+*  `label`, or leave that out inside a `Field group`, whose legend names it. */
 function SegmentedControl({ label, options, value, onValueChange, fill = false, iconOnly = false, testId }) {
-	const Link = useLink();
-	const links = options.some((o) => o.href);
-	const items = options.map((option) => {
-		const current = option.value === value;
-		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", {
-				className: "sr-only",
-				children: option.label
-			}) : /* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: option.label
-			}),
-			option.badge && (iconOnly ? /* @__PURE__ */ jsx("span", {
-				className: "absolute top-1 right-1 inline-flex",
-				children: option.badge
-			}) : option.badge)
-		] });
-		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 = 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
-	});
+	const layout = {
+		fill,
+		iconOnly
+	};
 	return /* @__PURE__ */ jsx(ToggleGroup, {
 		"aria-label": label,
 		"data-testid": testId,
-		className: groupClassName,
+		className: segmentGroupClassName(layout),
 		orientation: iconOnly ? "vertical" : "horizontal",
 		value: [value],
 		onValueChange: ([next]) => {
 			if (next !== void 0) onValueChange?.(next);
 		},
-		children: items
+		children: options.map((option) => /* @__PURE__ */ jsx(Tooltip, {
+			content: option.label,
+			side: "right",
+			disabled: !iconOnly,
+			children: /* @__PURE__ */ jsx(Toggle, {
+				value: option.value,
+				"data-testid": option.testId,
+				className: segmentClassName(option.value === value, layout),
+				children: /* @__PURE__ */ jsx(SegmentContent, {
+					...option,
+					iconOnly
+				})
+			})
+		}, option.value))
 	});
 }
 //#endregion

package/dist/components/Select.d.ts

@@ -14,17 +14,21 @@ export type SelectProps<Value, Multiple extends boolean | undefined = false> = O
     /** Applied to the trigger. */
     className?: string | undefined;
     'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
     'aria-describedby'?: string | undefined;
     'aria-invalid'?: boolean | undefined;
+    'aria-required'?: 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;
+    /** `sm` for dense places such as toolbars and table cells. */
+    size?: 'sm' | 'md' | undefined;
     /** The item a person is on as they move through the open list, then undefined once it
      *  closes, such as to preview a theme before it is chosen. */
     onItemHighlighted?: ((value: Value | undefined) => void) | undefined;
 };
 /** 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, onItemHighlighted, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;
+export declare function Select<Value, Multiple extends boolean | undefined = false>({ items, placeholder, className, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, trigger, triggerTooltip, size, onItemHighlighted, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;

package/dist/components/Select.js

@@ -1,20 +1,22 @@
-import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { panelClassName, panelItemClassName, portalContainer, positionerClassName } from "./floating.js";
+import { cx } from "../cx.js";
+import { CheckIcon, ChevronDownIcon } from "../icons.js";
+import { panelClassName, panelItemClassName, positionerClassName } from "./floating.js";
 import { Tooltip } from "./Tooltip.js";
-import { clsx } from "clsx";
+import { fieldBox } from "./fieldBox.js";
 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)");
+var triggerClassName = "flex cursor-pointer items-center justify-between gap-2 pr-1.5 text-left";
 /** 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, onItemHighlighted, ...rootProps }) {
+function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, trigger, triggerTooltip, size = "md", onItemHighlighted, ...rootProps }) {
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
 	const triggerProps = {
 		"aria-label": ariaLabel,
+		"aria-labelledby": labelledBy,
 		"aria-describedby": describedBy,
-		"aria-invalid": invalid || void 0
+		"aria-invalid": invalid || void 0,
+		"aria-required": required || void 0
 	};
 	return /* @__PURE__ */ jsxs(Select.Root, {
 		items,
@@ -31,52 +33,49 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 			})
 		}) : /* @__PURE__ */ jsxs(Select.Trigger, {
 			...triggerProps,
-			className: clsx(triggerClassName, className),
+			className: cx(fieldBox({ size }), 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" })
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { "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),
-							onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
-							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)))
-					})
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+			alignItemWithTrigger: false,
+			sideOffset: 4,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				className: cx("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,
+						onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
+						className: cx("grid grid-cols-[1rem_1fr]", panelItemClassName),
+						children: [
+							/* @__PURE__ */ jsx(Select.ItemIndicator, {
+								className: "col-start-1",
+								children: /* @__PURE__ */ jsx(CheckIcon, { 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

package/dist/components/SettingModeOption.d.ts

@@ -1,10 +1,8 @@
-/** 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, }: {
+/** A named and described choice in a SettingsCard, picking between modes such
+ *  as default or custom. Stack them in a `RadioGroup`, which holds the value. */
+export declare function SettingModeOption({ value, label, description, disabled, }: {
     value: string;
     label: string;
     description: string;
-    isFirst?: boolean;
     disabled?: boolean;
 }): import("react").JSX.Element;

package/dist/components/SettingModeOption.js

@@ -1,13 +1,12 @@
+import { cx } from "../cx.js";
 import { Radio } from "./Radio.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingModeOption.tsx
-/** 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 }) {
+/** A named and described choice in a SettingsCard, picking between modes such
+*  as default or custom. Stack them in a `RadioGroup`, which holds the value. */
+function SettingModeOption({ value, label, description, disabled }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: clsx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
+		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
 		children: [/* @__PURE__ */ jsx(Radio, {
 			value,
 			disabled,

package/dist/components/SettingsCard.d.ts

@@ -1,24 +1,37 @@
 import type { ReactNode } from 'react';
-interface SettingsCardProps {
-    /** Sentence-case section label above the card. Omit on the first card of a
-     * page, where the page title already names the section. */
-    title?: string;
+export interface SettingsCardProps {
+    /** Names the card above it. Leave it out on a page's first card, where the
+     *  page title already names it. */
+    title?: string | undefined;
     description?: ReactNode;
-    /** Control rendered on the right of the section label (e.g. a small action). */
+    /** Beside the title, such as an add button; with `actionAlign="end"`, at the
+     *  header's far edge, such as Save. */
     action?: ReactNode;
-    /** 'adjacent' (default) sits the action next to the title (e.g. a `+`);
-     * 'right' pushes it to the far edge of the header (e.g. a Save button). */
-    actionAlign?: 'adjacent' | 'right';
-    /** Let inner content (e.g. a dropdown menu) overflow the panel instead of
-     * being clipped to its rounded corners. */
-    overflowVisible?: boolean;
+    actionAlign?: 'beside' | 'end' | undefined;
+    /** Lets content such as an inline menu reach past the card's rounded edge. */
+    overflowVisible?: boolean | undefined;
+    className?: string | undefined;
+    /** SettingRows, and SettingsHeadings between groups of them. */
     children: ReactNode;
-    className?: string;
 }
-/**
- * A settings card: an optional sentence-case section label sits above a
- * bordered panel of rows. The label carries the breathing-room rhythm between
- * cards; the rows inside provide their own dividers via SettingRow's `isFirst`.
- */
-export default function SettingsCard({ title, description, action, actionAlign, overflowVisible, children, className, }: SettingsCardProps): import("react").JSX.Element;
-export {};
+/** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
+ *  the next. Cards stack with room between them. */
+export declare function SettingsCard({ title, description, action, actionAlign, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
+/** A heading between groups of rows inside a SettingsCard. */
+export declare function SettingsHeading({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** One setting in a SettingsCard: its name and help on the left, its control on
+ *  the right, or under the name across the row with `fill`. */
+export declare function SettingRow({ label, htmlFor, helpText, fill, onClick, children, }: {
+    label: string;
+    /** The control's id, so the name labels it. */
+    htmlFor?: string | undefined;
+    helpText?: ReactNode;
+    /** The control takes the row's width, as a text field does; otherwise it sits compact at the right. */
+    fill?: boolean | undefined;
+    /** Makes the whole row press its control, such as a switch. The control still
+     *  handles its own press; stop it propagating there so it doesn't toggle twice. */
+    onClick?: (() => void) | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;