@parallelworks/ui 0.44.0 → 0.45.0

package/dist/components/SettingsCard.js

@@ -1,31 +1,58 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsCard.tsx
-/**
-* 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`.
-*/
-function SettingsCard({ title, description, action, actionAlign = "adjacent", overflowVisible, children, className }) {
+/** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
+*  the next. Cards stack with room between them. */
+function SettingsCard({ title, description, action, actionAlign = "beside", overflowVisible = false, className, children }) {
 	return /* @__PURE__ */ jsxs("section", {
-		className: clsx("mt-10 first:mt-0", className),
+		className: cx("mt-10 first:mt-0", className),
 		children: [(title || action) && /* @__PURE__ */ jsxs("div", {
 			className: "mb-3 px-0.5",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("flex items-center gap-1.5", actionAlign === "right" && "justify-between"),
+				className: cx("flex items-center gap-1.5", actionAlign === "end" && "justify-between"),
 				children: [title && /* @__PURE__ */ jsx("h2", {
-					className: "text-[15px] font-semibold theme-text leading-none",
+					className: "text-[15px] leading-none font-semibold theme-text",
 					children: title
 				}), action]
 			}), description && /* @__PURE__ */ jsx("p", {
-				className: "text-xs theme-muted-text mt-1.5 leading-snug",
+				className: "mt-1.5 text-xs leading-snug theme-muted-text",
 				children: description
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: clsx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+			className: cx("panel divide-y divide-(--theme-border)", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+			children
+		})]
+	});
+}
+/** A heading between groups of rows inside a SettingsCard. */
+function SettingsHeading({ children }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: "px-5 py-3 text-sm font-semibold tracking-wider uppercase theme-muted-panel theme-muted-text",
+		children
+	});
+}
+/** 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`. */
+function SettingRow({ label, htmlFor, helpText, fill = false, onClick, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "none",
+		onClick,
+		className: cx("grid grid-cols-1 gap-x-8 gap-y-2 px-5 py-5", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", onClick && "cursor-pointer transition-colors select-none hover:theme-hover"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-y-1",
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor,
+				className: "leading-tight font-semibold theme-text",
+				children: label
+			}), helpText && /* @__PURE__ */ jsx("div", {
+				className: "text-xs leading-snug theme-muted-text",
+				children: helpText
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("min-w-0", !fill && "flex items-center justify-end"),
 			children
 		})]
 	});
 }
 //#endregion
-export { SettingsCard as default };
+export { SettingRow, SettingsCard, SettingsHeading };

package/dist/components/Skeleton.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface SkeletonProps {
+    /** Any CSS length, or pixels. Defaults to the container's width. */
+    width?: number | string | undefined;
+    /** Any CSS length, or pixels. Defaults to a line of text. */
+    height?: number | string | undefined;
+    circle?: boolean | undefined;
+    /** Lines of the same shape, one under another; space them with `className`. */
+    count?: number | undefined;
+    className?: string | undefined;
+}
+/** The shape of content still loading. Hidden from assistive technology, so
+ *  wrap a page's skeletons in one `LoadingRegion` that says they are loading. */
+export declare function Skeleton({ width, height, circle, count, className }: SkeletonProps): import("react").JSX.Element[];
+/** Says, once, that what it holds is still loading, for skeletons or a chart
+ *  drawing its first data. */
+export declare function LoadingRegion({ label, className, children, }: {
+    /** Defaults to the provider's `loading` string. */
+    label?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Skeleton.js

@@ -0,0 +1,34 @@
+import { cx } from "../cx.js";
+import { positionKeys } from "./keys.js";
+import { useStrings } from "./Provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Skeleton.tsx
+/** The shape of content still loading. Hidden from assistive technology, so
+*  wrap a page's skeletons in one `LoadingRegion` that says they are loading. */
+function Skeleton({ width, height, circle, count = 1, className }) {
+	return positionKeys(count, "skeleton").map((key) => /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("block animate-pulse bg-(--theme-muted-panel-bg) motion-reduce:animate-none", circle ? "rounded-full" : "rounded", height === void 0 && "h-[1em]", className),
+		style: {
+			width: width ?? (circle ? height : void 0),
+			height
+		}
+	}, key));
+}
+/** Says, once, that what it holds is still loading, for skeletons or a chart
+*  drawing its first data. */
+function LoadingRegion({ label, className, children }) {
+	const { loading } = useStrings().common;
+	const name = label || loading;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": name,
+		className,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: name
+		})]
+	});
+}
+//#endregion
+export { LoadingRegion, Skeleton };

package/dist/components/Slider.d.ts

@@ -0,0 +1,16 @@
+export interface SliderProps {
+    value: number;
+    onValueChange: (value: number) => void;
+    min: number;
+    max: number;
+    step?: number | undefined;
+    disabled?: boolean | undefined;
+    /** How the value reads to assistive technology, as Intl formats numbers. */
+    format?: Intl.NumberFormatOptions | undefined;
+    /** The thumb's name; a slider beside a field's own box shares the field's label. */
+    'aria-label'?: string | undefined;
+    className?: string | undefined;
+}
+/** A number picked by dragging along a range, or with the arrow keys. Pair it with a
+ *  NumberInput when the exact value matters. */
+export declare function Slider({ value, onValueChange, min, max, step, disabled, format, 'aria-label': ariaLabel, className, }: SliderProps): import("react").JSX.Element;

package/dist/components/Slider.js

@@ -0,0 +1,30 @@
+import { cx } from "../cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/components/Slider.tsx
+/** A number picked by dragging along a range, or with the arrow keys. Pair it with a
+*  NumberInput when the exact value matters. */
+function Slider$1({ value, onValueChange, min, max, step = 1, disabled = false, format, "aria-label": ariaLabel, className }) {
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		value,
+		onValueChange: (next) => onValueChange(Array.isArray(next) ? next[0] ?? min : next),
+		min,
+		max,
+		step,
+		disabled,
+		format,
+		className: cx("w-full", className),
+		children: /* @__PURE__ */ jsx(Slider.Control, {
+			className: "flex w-full touch-none select-none items-center py-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				className: "h-1 w-full rounded-full bg-(--theme-border)",
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-accent)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
+					"aria-label": ariaLabel,
+					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-(--theme-focus-ring)"
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { Slider$1 as Slider };

package/dist/components/Sort.js

@@ -1,15 +1,13 @@
-import { TiArrowSortedDown } from "../icons/ti/TiArrowSortedDown.js";
-import { TiArrowSortedUp } from "../icons/ti/TiArrowSortedUp.js";
-import { TiArrowUnsorted } from "../icons/ti/TiArrowUnsorted.js";
+import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
 import { useStrings } from "./Provider.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Sort.tsx
 var SortIcon = ({ currentlySorted, currentDirection, name }) => {
 	const style = { transform: "translateY(2px)" };
 	if (currentlySorted === name) {
-		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(TiArrowSortedDown, { style });
-		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(TiArrowSortedUp, { style });
-	} else return /* @__PURE__ */ jsx(TiArrowUnsorted, { style });
+		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(SortDownIcon, { style });
+		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(SortUpIcon, { style });
+	} else return /* @__PURE__ */ jsx(SortUnsortedIcon, { style });
 	return null;
 };
 function Sort({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection }) {

package/dist/components/StatusBadge.d.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
-export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+import { type Tone } from './tone.js';
+/** A badge's tone. */
+export type BadgeVariant = Tone;
 interface StatusBadgeProps {
     /** Badge content */
     children: ReactNode;

package/dist/components/StatusBadge.js

@@ -1,57 +1,34 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { toneFill, toneSurface, toneText } from "./tone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/StatusBadge.tsx
-var variantStyles = {
-	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
-	success: "bg-emerald-500/10 text-emerald-800 dark:text-emerald-400 border-emerald-500/20",
-	warning: "bg-amber-500/10 text-amber-800 dark:text-amber-400 border-amber-500/20",
-	error: "bg-red-500/10 text-red-800 dark:text-red-400 border-red-500/20",
-	info: "bg-blue-500/10 text-blue-800 dark:text-blue-400 border-blue-500/20",
-	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
-};
-var pulseColors = {
-	default: "bg-(--theme-app)",
-	success: "bg-emerald-500",
-	warning: "bg-amber-500",
-	error: "bg-red-500",
-	info: "bg-blue-500",
-	muted: "bg-(--theme-muted-text-color)"
-};
-var textColors = {
-	default: "text-(--theme-app)",
-	success: "text-emerald-600 dark:text-emerald-400",
-	warning: "text-amber-600 dark:text-amber-400",
-	error: "text-red-600 dark:text-red-400",
-	info: "text-blue-600 dark:text-blue-400",
-	muted: "text-(--theme-muted-text-color)"
-};
 /** A line of text in a variant's colour, for a status that stands beside a
 *  dot rather than inside a badge. */
 function statusTextClass(variant) {
-	return textColors[variant];
+	return toneText[variant];
 }
 function StatusBadge({ children, variant = "default", pulse = false, dot = false, size = "sm", className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		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),
+		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", toneSurface[variant], className),
 		children: [
 			pulse && /* @__PURE__ */ jsxs("span", {
 				className: "relative flex h-2 w-2",
-				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]) })]
+				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", toneFill[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", toneFill[variant]) })]
 			}),
-			dot && !pulse && /* @__PURE__ */ jsx("span", { className: clsx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
+			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", toneFill[variant]) }),
 			children
 		]
 	});
 }
 function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
 	return /* @__PURE__ */ jsxs("span", {
-		className: clsx("relative inline-flex", className),
+		className: cx("relative inline-flex", className),
 		style: {
 			width: size,
 			height: size
 		},
-		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]),
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", toneFill[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: cx("relative inline-flex rounded-full", toneFill[variant]),
 			style: {
 				width: size,
 				height: size

package/dist/components/StatusIcons.d.ts

@@ -1,11 +1,7 @@
-import type { IconBaseProps } from 'react-icons';
 interface IBaseCheckmarkProps {
     className?: string;
     colored?: boolean;
 }
 export declare function SuccessCheckmark({ className, colored }: IBaseCheckmarkProps): import("react").JSX.Element;
 export declare function ErrorCheckmark({ className, colored }: IBaseCheckmarkProps): import("react").JSX.Element;
-export declare function LoaderIcon({ className, ...props }: IconBaseProps & {
-    className?: string;
-}): import("react").JSX.Element;
 export {};

package/dist/components/StatusIcons.js

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

package/dist/components/Switch.d.ts

@@ -12,11 +12,15 @@ declare const sizes: {
 export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'className' | 'children'> {
     size?: keyof typeof sizes;
     className?: string | undefined;
+    /** The on state's own name, such as "Enabled", shown beside the switch while it's on. */
+    onLabel?: string | undefined;
+    /** The off state's own name, shown beside the switch while it's off. */
+    offLabel?: 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 declare function Switch({ size, className, onLabel, offLabel, ...props }: SwitchProps): import("react").JSX.Element;
 export {};

package/dist/components/Switch.js

@@ -1,5 +1,5 @@
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/Switch.tsx
 var sizes = {
@@ -17,11 +17,28 @@ var sizes = {
 * 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, {
+function Switch$1({ size = "md", className, onLabel, offLabel, ...props }) {
+	const control = /* @__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) })
+		className: cx("peer 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-accent)", "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: cx("rounded-full bg-white shadow-sm transition-transform duration-200", sizes[size].thumb) })
+	});
+	if (onLabel === void 0 && offLabel === void 0) return control;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2 text-sm text-(--theme-app)",
+		children: [
+			control,
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "peer-data-checked:hidden",
+				children: offLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "hidden peer-data-checked:inline",
+				children: onLabel
+			})
+		]
 	});
 }
 //#endregion

package/dist/components/Table.js

@@ -1,6 +1,5 @@
-import { useStrings } from "./Provider.js";
-import Loader from "./Loader.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { Loader } from "./Loader.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 //#region src/components/Table.tsx
@@ -10,7 +9,7 @@ function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
 		colSpan: colspan,
-		className: clsx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
 		children
 	});
 }
@@ -18,7 +17,7 @@ function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProp
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
 		colSpan: colspan,
-		className: clsx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
+		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
 		children
 	});
 }
@@ -31,7 +30,7 @@ function Header({ children, className, style, colspan = 1, onClick, sort, caps =
 		colSpan: colspan,
 		style,
 		"aria-sort": sort === "unsorted" ? "none" : sort,
-		className: clsx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
+		className: cx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
 		children: onClick ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick,
@@ -46,25 +45,19 @@ var isHeaderChild = (child) => {
 };
 var getHeaders = (children) => children.filter(isHeaderChild);
 function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
-	const { loading } = useStrings();
 	const ChildrenArr = React.Children.toArray(children);
 	const Headers = getHeaders(ChildrenArr);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
 		"aria-busy": isLoading,
-		className: clsx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
-		children: isLoading ? /* @__PURE__ */ jsxs("div", {
-			role: "status",
-			"aria-label": loading,
+		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+		children: isLoading ? /* @__PURE__ */ jsx("div", {
 			className: "flex justify-center items-center h-32",
-			children: [/* @__PURE__ */ jsx(Loader, {}), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: loading
-			})]
+			children: /* @__PURE__ */ jsx(Loader, {})
 		}) : /* @__PURE__ */ jsx("div", {
-			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"),
+			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"),
 			children: /* @__PURE__ */ jsxs("table", {
-				className: clsx(className, "min-w-full divide-y theme-border"),
+				className: cx(className, "min-w-full divide-y theme-border"),
 				...tableProps,
 				children: [/* @__PURE__ */ jsx("thead", {
 					className: theadClassName,
@@ -82,11 +75,11 @@ function CompactTable({ wrapperClassName = "", className = "", tbodyClassName =
 	const Headers = getHeaders(ChildrenArr);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: /* @__PURE__ */ jsx("div", {
-			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"),
+			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"),
 			children: /* @__PURE__ */ jsxs("table", {
-				className: clsx("min-w-full divide-y theme-border", className),
+				className: cx("min-w-full divide-y theme-border", className),
 				children: [/* @__PURE__ */ jsx("thead", {
 					className: "theme-muted-panel",
 					children: /* @__PURE__ */ jsx("tr", {

package/dist/components/Tabs.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+import { type SegmentLayout } from './segmented.js';
+export interface TabItem<Value extends string = string> {
+    value: Value;
+    label: string;
+    icon?: ReactNode;
+    /** Beside the label, or in the corner when only the icon shows. */
+    badge?: ReactNode;
+    /** Navigates instead of showing a panel, for tabs that are pages. */
+    href?: string;
+    disabled?: boolean;
+    testId?: string;
+}
+declare const stickyClasses: {
+    underHeader: string;
+    underToolbar: string;
+};
+export interface TabsProps<Value extends string> extends SegmentLayout {
+    /** Names the set of tabs for assistive technology. */
+    label: string;
+    items: TabItem<Value>[];
+    /** The current tab. For tabs that are pages, the page being shown. */
+    value?: Value | undefined;
+    defaultValue?: Value | undefined;
+    onValueChange?: ((value: Value) => void) | undefined;
+    /** `line` underlines the current tab across a page; `segmented` matches a
+     *  SegmentedControl, for a few views in a small space. `fill` and `iconOnly`
+     *  apply to `segmented`. */
+    variant?: 'line' | 'segmented' | undefined;
+    /** At the tab row's far end, such as a picker for what the tabs show. */
+    end?: ReactNode;
+    /** Pins the tab row as the page scrolls. */
+    sticky?: keyof typeof stickyClasses | undefined;
+    /** On the tab row. */
+    className?: string | undefined;
+    testId?: string | undefined;
+    /** The `TabPanel`s; tabs that are pages leave this to the router. */
+    children?: ReactNode;
+}
+/** Views of one thing, one shown at a time: panels below the tabs, or pages
+ *  the tabs link to. A lone tab would only repeat the page's title, so the row
+ *  hides unless there are two or more, or something at its end. */
+export declare function Tabs<Value extends string>({ label, items, value, defaultValue, onValueChange, variant, fill, iconOnly, end, sticky, className, testId, children, }: TabsProps<Value>): import("react").JSX.Element;
+/** One tab's content, shown while its tab is current. */
+export declare function TabPanel({ value, keepMounted, className, children, }: {
+    value: string;
+    /** Keeps the content, and its state, while another tab is shown. */
+    keepMounted?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Tabs.js

@@ -0,0 +1,75 @@
+import { cx } from "../cx.js";
+import { Tooltip } from "./Tooltip.js";
+import { useLink } from "./Provider.js";
+import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/Tabs.tsx
+var stickyClasses = {
+	underHeader: "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)",
+	underToolbar: "sticky top-22 z-(--layer-sticky) bg-(--theme-app-bg)"
+};
+/** Views of one thing, one shown at a time: panels below the tabs, or pages
+*  the tabs link to. A lone tab would only repeat the page's title, so the row
+*  hides unless there are two or more, or something at its end. */
+function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "line", fill = false, iconOnly = false, end, sticky, className, testId, children }) {
+	const Link = useLink();
+	const segmented = variant === "segmented";
+	const layout = {
+		fill,
+		iconOnly: segmented && iconOnly
+	};
+	const [own, setOwn] = useState(defaultValue ?? items[0]?.value);
+	const current = value ?? own;
+	const showRow = items.length > 1 || !!end;
+	const tabs = items.map((item) => {
+		const tab = /* @__PURE__ */ jsx(Tabs.Tab, {
+			value: item.value,
+			disabled: item.disabled,
+			"data-testid": item.testId,
+			...item.href ? {
+				nativeButton: false,
+				render: /* @__PURE__ */ jsx(Link, { href: item.href })
+			} : {},
+			className: segmented ? segmentClassName(item.value === current, layout) : "flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold theme-muted-text outline-none transition-colors hover:theme-text focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-link) data-active:text-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			children: /* @__PURE__ */ jsx(SegmentContent, {
+				...item,
+				iconOnly: layout.iconOnly
+			})
+		}, item.value);
+		return layout.iconOnly ? /* @__PURE__ */ jsx(Tooltip, {
+			content: item.label,
+			side: "right",
+			children: tab
+		}, item.value) : tab;
+	});
+	return /* @__PURE__ */ jsxs(Tabs.Root, {
+		value: current ?? null,
+		onValueChange: (next) => {
+			setOwn(next);
+			onValueChange?.(next);
+		},
+		orientation: layout.iconOnly ? "vertical" : "horizontal",
+		"data-testid": testId,
+		children: [showRow && /* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClasses[sticky], className),
+			children: [/* @__PURE__ */ jsxs(Tabs.List, {
+				"aria-label": label,
+				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto"),
+				children: [tabs, !segmented && /* @__PURE__ */ jsx(Tabs.Indicator, { className: "absolute bottom-0 left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) bg-(--theme-link) transition-[translate,width] duration-200 ease-in-out motion-reduce:transition-none" })]
+			}), end]
+		}), children]
+	});
+}
+/** One tab's content, shown while its tab is current. */
+function TabPanel({ value, keepMounted, className, children }) {
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		value,
+		keepMounted,
+		className: cx("outline-none", className),
+		children
+	});
+}
+//#endregion
+export { TabPanel, Tabs$1 as Tabs };

package/dist/components/ThemeEditor.d.ts

@@ -0,0 +1,29 @@
+import { type ColorPreference, type Mode, type Theme } from '../theme/index.js';
+export interface ThemeEditorProps {
+    /** The theme being edited, as a host stores it. */
+    value: Theme;
+    onChange: (theme: Theme) => void;
+    /** Which mode's colors the controls edit. Leave it out to let the editor keep its own. */
+    mode?: Mode | undefined;
+    onModeChange?: ((mode: Mode) => void) | undefined;
+    /** The person's light, dark or system choice; the Appearance control shows when this and its handler are given. */
+    preference?: ColorPreference | undefined;
+    onPreferenceChange?: ((preference: ColorPreference) => void) | undefined;
+    /** What Reset returns to; the default theme when left out. */
+    defaultValue?: Theme | undefined;
+    /** False drops the preview beside the controls, for a host that applies the theme app-wide as it changes (`useApplyTheme`). */
+    preview?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * Edits a theme: a background, an accent and a contrast for light and for
+ * dark, an optional sidebar of its own and a code style. Everything else is
+ * generated, so any choice reads. It previews the result beside the controls,
+ * copies the theme as JSON, imports one pasted back, and resets.
+ */
+export declare function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPreferenceChange, defaultValue, preview, className, }: ThemeEditorProps): import("react").JSX.Element;
+/** The theme on a small page: a sidebar, a panel of text, a control, statuses and code. */
+export declare function ThemePreview({ theme, mode }: {
+    theme: Theme;
+    mode: Mode;
+}): import("react").JSX.Element;