@parallelworks/ui 0.77.0 → 0.79.0

package/dist/components/SegmentedControl.d.ts

@@ -1,23 +1,36 @@
-import type { ReactNode } from 'react';
-import { type SegmentLayout } from './segmented.js';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type SegmentLayout, type SegmentTone } 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;
+    /** How many things the choice holds, as a pill after the label. */
+    count?: number | undefined;
+    /** Colors the label and the count, for a choice that needs attention. */
+    tone?: SegmentTone | undefined;
+    /** Can't be chosen now; it still shows, and the rest still work. */
+    disabled?: boolean | undefined;
     testId?: string;
 }
+/** What else reaches the group's root element, such as `onContextMenu` for a
+ *  menu on the whole control, `id` or `aria-describedby`. Its look and its
+ *  value stay the control's own. */
+export type SegmentedControlRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style' | 'defaultValue' | 'onChange' | 'dir' | 'aria-label'>;
 /** 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. To filter a list
  *  by values that may all be off, or several at once, use `ToggleGroup`. 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 & {
+export declare function SegmentedControl<T extends string>({ label, options, value, onValueChange, fill, iconOnly, size, disabled, testId, ...rest }: SegmentedControlRootProps & SegmentLayout & {
     label?: string | undefined;
     options: SegmentedOption<T>[];
     value: T;
     onValueChange?: (value: T) => void;
+    /** None of the choices can be changed now, such as for a reader without
+     *  the right to; the current one still shows. */
+    disabled?: boolean | undefined;
     testId?: string;
 }): import("react").JSX.Element;

package/dist/components/SegmentedControl.js

@@ -10,16 +10,19 @@ import { ToggleGroup } from "@base-ui/react/toggle-group";
 *  by values that may all be off, or several at once, use `ToggleGroup`. 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 }) {
+function SegmentedControl({ label, options, value, onValueChange, fill = false, iconOnly = false, size = "md", disabled = false, testId, ...rest }) {
 	const layout = {
 		fill,
-		iconOnly
+		iconOnly,
+		size
 	};
 	return /* @__PURE__ */ jsx(ToggleGroup, {
+		...rest,
 		"aria-label": label,
 		"data-testid": testId,
 		className: segmentGroupClassName(layout),
 		orientation: iconOnly ? "vertical" : "horizontal",
+		disabled,
 		value: [value],
 		onValueChange: ([next]) => {
 			if (next !== void 0) onValueChange?.(next);
@@ -30,8 +33,9 @@ function SegmentedControl({ label, options, value, onValueChange, fill = false,
 			disabled: !iconOnly,
 			children: /* @__PURE__ */ jsx(Toggle, {
 				value: option.value,
+				disabled: option.disabled,
 				"data-testid": option.testId,
-				className: segmentClassName(option.value === value, layout),
+				className: segmentClassName(option.value === value, layout, option.tone),
 				children: /* @__PURE__ */ jsx(SegmentContent, {
 					...option,
 					iconOnly

package/dist/components/Select.d.ts

@@ -1,11 +1,15 @@
 import { Select as BaseSelect } from '@base-ui/react/select';
-import { type ReactElement, type ReactNode } from 'react';
+import { type KeyboardEventHandler, type ReactElement, type ReactNode } from 'react';
 import { type ComboboxItem } from './comboboxItems.js';
 import { type FieldBoxSize } from './fieldBox.js';
 /** An option of a Select: the same shape as a Combobox's, so a list moves between them as is. */
 export type SelectItem<Value> = ComboboxItem<Value>;
-export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<Value, Multiple>, 'items' | 'children'> & {
+type SelectValueChange<Value, Multiple extends boolean | undefined> = (value: Multiple extends true ? Value[] : Value, details: BaseSelect.Root.ChangeEventDetails) => void;
+export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<BaseSelect.Root.Props<Value, Multiple>, 'items' | 'children' | 'onValueChange'> & {
     items: readonly SelectItem<Value>[];
+    /** Called with the value picked. A single Select never passes null unless an item's value is
+     *  null, such as a "None" option, so the value is always one of the items'. */
+    onValueChange?: SelectValueChange<Value, Multiple> | undefined;
     placeholder?: string | undefined;
     /** Applied to the trigger. */
     className?: string | undefined;
@@ -22,10 +26,22 @@ export type SelectProps<Value, Multiple extends boolean | undefined = false> = O
     /** `sm` for dense places such as toolbars and table cells, `lg` for a form that stands alone,
      *  such as sign-in. */
     size?: FieldBoxSize | undefined;
+    /** `fill` takes the width of its row, as a form's fields do; `content` takes the width of its
+     *  longest label, as in a toolbar or beside text. By default it fills inside a Field and
+     *  sizes to its content anywhere else. */
+    width?: 'fill' | 'content' | undefined;
+    /** Why the field can't be changed, with `disabled`: shown as a tooltip and read after its
+     *  name. The field stays focusable, so the keyboard reaches the reason too. */
+    disabledReason?: string | undefined;
+    /** The edge of the field the open list lines up with, when the list is wider. */
+    align?: 'start' | 'end' | undefined;
+    /** On the trigger, such as to keep a key from a host's own shortcuts. */
+    onKeyDown?: KeyboardEventHandler<HTMLElement> | 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-labelledby': labelledBy, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, trigger, triggerTooltip, size, 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, width, disabledReason, align, onKeyDown, onItemHighlighted, onValueChange, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;
+export {};

package/dist/components/Select.js

@@ -1,101 +1,147 @@
 import { cx } from "../cx.js";
 import { CheckIcon, ChevronDownIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
-import { useFullscreenContainer } from "./fullscreen.js";
+import { usePopupContainer } from "./popupContainer.js";
 import { Tooltip } from "./Tooltip.js";
 import { fieldBox } from "./fieldBox.js";
-import { optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { useFieldControl } from "./Field.js";
+import { optionNaming, pickerEndClassName, pickerItemClassName } from "./comboboxItems.js";
 import { OptionDescription } from "./OptionDescription.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/Select.tsx
 var triggerClassName = "flex cursor-pointer items-center justify-between gap-2 pr-1.5 text-left";
+var explainedDisabledClassName = "cursor-not-allowed hover:border-(--theme-border-field) bg-(--theme-input-disabled-bg) text-(--theme-placeholder)";
 /** 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-labelledby": labelledBy, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-required": required, trigger, triggerTooltip, size = "md", onItemHighlighted, ...rootProps }) {
-	const fullscreen = useFullscreenContainer();
+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", width, disabledReason, align = "start", onKeyDown, onItemHighlighted, onValueChange, ...rootProps }) {
+	const portal = usePopupContainer();
 	const uid = useId();
+	const inField = useFieldControl() !== null;
+	const content = (width ?? (inField ? "fill" : "content")) === "content";
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
+	const explained = Boolean(rootProps.disabled && disabledReason);
+	const reasonId = `${uid}reason`;
 	const triggerProps = {
 		"aria-label": ariaLabel,
 		"aria-labelledby": labelledBy,
-		"aria-describedby": describedBy,
+		"aria-describedby": cx(describedBy, explained && reasonId) || void 0,
 		"aria-invalid": invalid || void 0,
-		"aria-required": required || void 0
+		"aria-required": required || void 0,
+		"aria-disabled": explained || void 0,
+		onKeyDown
 	};
+	const nullable = items.some((item) => item.value === null);
+	const tip = explained ? disabledReason : triggerTooltip;
 	return /* @__PURE__ */ jsxs(Select.Root, {
 		items,
 		...rootProps,
+		disabled: explained ? false : rootProps.disabled,
+		readOnly: explained || rootProps.readOnly,
+		...explained && { open: false },
+		onValueChange: (next, details) => {
+			if (next === null && !rootProps.multiple && !nullable) return;
+			onValueChange?.(next, details);
+		},
 		onOpenChange: (open, details) => {
 			rootProps.onOpenChange?.(open, details);
 			if (!open) onItemHighlighted?.(void 0);
 		},
-		children: [trigger ? /* @__PURE__ */ jsx(Tooltip, {
-			content: triggerTooltip,
-			children: /* @__PURE__ */ jsx(Select.Trigger, {
-				...triggerProps,
-				render: trigger
-			})
-		}) : /* @__PURE__ */ jsxs(Select.Trigger, {
-			...triggerProps,
-			className: cx(fieldBox({ size }), triggerClassName, className),
-			children: [/* @__PURE__ */ jsx(Select.Value, {
-				placeholder,
-				className: "truncate data-placeholder:text-(--theme-placeholder)",
-				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(ChevronDownIcon, { "aria-hidden": "true" })
-			})]
-		}), /* @__PURE__ */ jsx(Select.Portal, {
-			container: fullscreen,
-			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: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
-						children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
-							value: item.value,
-							disabled: item.disabled,
-							...optionNaming(`${uid}${index}`, item),
-							onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
-							className: pickerItemClassName,
-							children: [
-								item.icon && /* @__PURE__ */ jsx("span", {
-									className: "flex shrink-0 items-center",
-									children: item.icon
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: "flex min-w-0 flex-col",
-									children: [/* @__PURE__ */ jsxs("span", {
-										className: "flex min-w-0 items-center gap-2",
-										children: [/* @__PURE__ */ jsx(Select.ItemText, {
-											id: `${uid}${index}label`,
-											className: "truncate",
-											children: item.label
-										}), item.badge]
-									}), /* @__PURE__ */ jsx(OptionDescription, {
-										id: `${uid}${index}description`,
-										item
-									})]
-								}),
-								/* @__PURE__ */ jsx(Select.ItemIndicator, {
-									className: "ml-auto flex shrink-0 items-center",
-									children: /* @__PURE__ */ jsx(CheckIcon, {
-										"aria-hidden": "true",
-										className: "size-3.5"
+		children: [
+			trigger ? /* @__PURE__ */ jsx(Tooltip, {
+				content: tip,
+				children: /* @__PURE__ */ jsx(Select.Trigger, {
+					...triggerProps,
+					render: trigger
+				})
+			}) : /* @__PURE__ */ jsx(Tooltip, {
+				content: tip,
+				children: /* @__PURE__ */ jsxs(Select.Trigger, {
+					...triggerProps,
+					className: cx(fieldBox({ size }), triggerClassName, content && "w-fit max-w-full", explained && explainedDisabledClassName, className),
+					children: [/* @__PURE__ */ jsx(Select.Value, {
+						placeholder,
+						className: cx("truncate data-placeholder:text-(--theme-placeholder)", content && !rootProps.multiple && "grid"),
+						children: rootProps.multiple ? (values) => values.length > 0 ? values.map(labelOf).join(", ") : placeholder : content ? (value) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+							className: "col-start-1 row-start-1 truncate",
+							children: (value === null ? void 0 : labelOf(value)) ?? placeholder
+						}), [placeholder, ...items.map((item) => item.label)].map((label, index) => label && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "invisible col-start-1 row-start-1 h-0 overflow-hidden whitespace-nowrap",
+							children: label
+						}, index))] }) : void 0
+					}), /* @__PURE__ */ jsx(Select.Icon, {
+						className: "shrink-0 text-(--theme-muted-text-color)",
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })
+					})]
+				})
+			}),
+			explained && /* @__PURE__ */ jsx("span", {
+				id: reasonId,
+				hidden: true,
+				children: disabledReason
+			}),
+			/* @__PURE__ */ jsx(Select.Portal, {
+				...portal,
+				children: /* @__PURE__ */ jsx(Select.Positioner, {
+					alignItemWithTrigger: false,
+					align,
+					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: cx("max-h-[min(15rem,var(--available-height))] overflow-y-auto", "p-1"),
+							children: items.map((item, index) => /* @__PURE__ */ jsxs(Select.Item, {
+								value: item.value,
+								disabled: item.disabled,
+								...optionNaming(`${uid}${index}`, item),
+								onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
+								className: pickerItemClassName,
+								children: [
+									item.icon && /* @__PURE__ */ jsx("span", {
+										className: "flex shrink-0 items-center",
+										children: item.icon
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "flex min-w-0 flex-col",
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "flex min-w-0 items-center gap-2",
+											children: [/* @__PURE__ */ jsx(Select.ItemText, {
+												id: `${uid}${index}label`,
+												className: "truncate",
+												children: item.label
+											}), item.badge]
+										}), /* @__PURE__ */ jsx(OptionDescription, {
+											id: `${uid}${index}description`,
+											item
+										})]
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: pickerEndClassName,
+										children: [item.hint && /* @__PURE__ */ jsx("span", {
+											id: `${uid}${index}hint`,
+											className: "text-xs tabular-nums text-(--theme-muted-text-color)",
+											children: item.hint
+										}), /* @__PURE__ */ jsx("span", {
+											className: cx("flex items-center", item.hint && "w-3.5"),
+											children: /* @__PURE__ */ jsx(Select.ItemIndicator, {
+												className: "flex items-center",
+												children: /* @__PURE__ */ jsx(CheckIcon, {
+													"aria-hidden": "true",
+													className: "size-3.5"
+												})
+											})
+										})]
 									})
-								})
-							]
-						}, String(item.value)))
+								]
+							}, String(item.value)))
+						})
 					})
 				})
 			})
-		})]
+		]
 	});
 }
 //#endregion

package/dist/components/SelectionCopy.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+/** Text to read and copy from in part, such as a run's YAML or a log: selecting some of it
+ *  shows a Copy button under the end of the selection, which copies just that and says so.
+ *  The button is a real one inside the block, so Tab reaches it after the text; a selection
+ *  made from the keyboard shows it too, and Escape or a press elsewhere puts it away. The
+ *  browser's own copy keeps working. */
+export declare function SelectionCopy({ children, className, }: {
+    children: ReactNode;
+    className?: string | undefined;
+}): import("react").JSX.Element;

package/dist/components/SelectionCopy.js

@@ -0,0 +1,105 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { CopyIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { useCopy } from "./useCopy.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SelectionCopy.tsx
+var EDGE = 40;
+/** Text to read and copy from in part, such as a run's YAML or a log: selecting some of it
+*  shows a Copy button under the end of the selection, which copies just that and says so.
+*  The button is a real one inside the block, so Tab reaches it after the text; a selection
+*  made from the keyboard shows it too, and Escape or a press elsewhere puts it away. The
+*  browser's own copy keeps working. */
+function SelectionCopy({ children, className }) {
+	const { common: t } = useStrings();
+	const { copy } = useCopy();
+	const root = useRef(null);
+	const pointerDown = useRef(false);
+	const [place, setPlace] = useState(null);
+	const read = useCallback(() => {
+		const el = root.current;
+		const selection = typeof window === "undefined" ? null : window.getSelection();
+		if (!el || !selection || selection.isCollapsed || selection.rangeCount === 0) {
+			setPlace(null);
+			return;
+		}
+		const range = selection.getRangeAt(0);
+		const text = selection.toString();
+		if (!el.contains(range.commonAncestorContainer) || !text.trim()) {
+			setPlace(null);
+			return;
+		}
+		const rects = range.getClientRects();
+		const end = rects[rects.length - 1] ?? range.getBoundingClientRect();
+		const box = el.getBoundingClientRect();
+		const x = end.right - box.left;
+		setPlace({
+			x: box.width > 80 ? Math.min(Math.max(x, EDGE), box.width - EDGE) : box.width / 2,
+			y: end.bottom - box.top + 4,
+			text
+		});
+	}, []);
+	useEffect(() => {
+		const onChange = () => {
+			if (!pointerDown.current) read();
+		};
+		const onUp = () => {
+			if (pointerDown.current) {
+				pointerDown.current = false;
+				read();
+			}
+		};
+		document.addEventListener("selectionchange", onChange);
+		document.addEventListener("pointerup", onUp);
+		return () => {
+			document.removeEventListener("selectionchange", onChange);
+			document.removeEventListener("pointerup", onUp);
+		};
+	}, [read]);
+	useEffect(() => {
+		if (!place) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") setPlace(null);
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [place]);
+	const copySelection = async () => {
+		if (!place) return;
+		if (await copy(place.text)) {
+			window.getSelection()?.removeAllRanges();
+			setPlace(null);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: root,
+		className: cx("relative", className),
+		onPointerDown: (e) => {
+			if (!e.target.closest?.("[data-selection-copy]")) {
+				pointerDown.current = true;
+				setPlace(null);
+			}
+		},
+		onScrollCapture: () => setPlace(null),
+		children: [children, place && /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-selection-copy": "",
+			"aria-label": t.copySelection,
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: () => void copySelection(),
+			className: cx(buttonClasses({
+				variant: "secondary",
+				size: "xs"
+			}), "absolute z-10 -translate-x-1/2 shadow-(--theme-shadow)"),
+			style: {
+				left: place.x,
+				top: place.y
+			},
+			children: [/* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" }), t.copy]
+		})]
+	});
+}
+//#endregion
+export { SelectionCopy };

package/dist/components/SettingModeOption.js

@@ -1,7 +1,7 @@
 import { cx } from "../cx.js";
 import { Radio } from "./Radio.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingModeOption.tsx
 /** 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. */

package/dist/components/SettingsCard.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/SettingsCard.tsx
 var HeadingLevel = createContext(3);
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from

package/dist/components/Skeleton.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
-import { positionKeys } from "./keys.js";
 import { useStrings } from "./Provider.js";
+import { positionKeys } from "./keys.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Skeleton.tsx
 /** The shape of content still loading. Hidden from assistive technology, so

package/dist/components/StatusBadge.d.ts

@@ -1,25 +1,70 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { type Tone } from './tone.js';
-/** A badge's tone. */
-export type BadgeVariant = Tone;
-interface StatusBadgeProps {
+/** A badge's tone: a status, or the theme's accent for something set apart that
+ *  isn't a status, such as "New". */
+export type BadgeVariant = Tone | 'accent';
+/** How loud a badge is: `soft` tints it, `solid` fills it for the one thing that
+ *  must catch the eye, and `outline` leaves only its edge and text. */
+export type BadgeEmphasis = 'soft' | 'solid' | 'outline';
+/** A badge's outline: a `pill`, or a squarer `tag` for a label such as "Beta". */
+export type BadgeShape = 'pill' | 'tag';
+declare const sizeClasses: {
+    readonly sm: 'gap-1 py-px text-[10px] leading-3.5';
+    readonly md: 'gap-1.5 py-0.5 text-[11px] leading-4';
+};
+export type BadgeSize = keyof typeof sizeClasses;
+export interface StatusBadgeProps {
     /** Badge content */
     children: ReactNode;
     /** Visual variant */
-    variant?: BadgeVariant;
+    variant?: BadgeVariant | undefined;
+    /** `soft` (the default) tints it; `solid` fills it; `outline` draws only its edge. */
+    emphasis?: BadgeEmphasis | undefined;
+    /** `pill` (the default), or `tag` for a squarer label such as "Preview". */
+    shape?: BadgeShape | undefined;
+    /** Uppercase, tracked letters, for a short label such as "Beta". */
+    caps?: boolean | undefined;
+    /** Cuts a long label off with an ellipsis instead of growing past its cell. */
+    truncate?: boolean | undefined;
     /** Show animated pulse indicator */
-    pulse?: boolean;
+    pulse?: boolean | undefined;
     /** Show a still indicator in the variant's color */
-    dot?: boolean;
+    dot?: boolean | undefined;
     /** Size */
-    size?: 'sm' | 'md';
+    size?: BadgeSize | undefined;
+    /** Renders the badge as this element, such as a link to what it names. */
+    render?: ReactElement | undefined;
     /** Additional class */
-    className?: string;
+    className?: string | undefined;
 }
 /** A line of text in a variant's color, for a status that stands beside a
  *  dot rather than inside a badge. */
 export declare function statusTextClass(variant: BadgeVariant): string;
-export declare function StatusBadge({ children, variant, pulse, dot, size, className, }: StatusBadgeProps): import("react").JSX.Element;
+/** A short status or label in a tone, such as "Running" or "Preview". */
+export declare function StatusBadge({ children, variant, emphasis, shape, caps, truncate, pulse, dot, size, render, className, }: StatusBadgeProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface CountBadgeProps {
+    count: number;
+    /** Above it, the count reads as `max` and a plus, such as "99+". */
+    max?: number | undefined;
+    /** Its tone, `accent` by default. A host with a color of its own, such as one
+     *  for work waiting on an agent, passes it in `className`. */
+    variant?: BadgeVariant | undefined;
+    /** `solid` (the default) for a count that asks for attention, such as unread
+     *  messages; `soft` for one that only informs, such as a tab's total. */
+    emphasis?: Exclude<BadgeEmphasis, 'outline'> | undefined;
+    size?: BadgeSize | undefined;
+    /** Read after the number by assistive technology, such as "unread", when the
+     *  text around it doesn't say what it counts. */
+    label?: string | undefined;
+    /** Shows a zero; otherwise a count of zero renders nothing. */
+    showZero?: boolean | undefined;
+    /** The locale the number is written in; the browser's own without it. */
+    locale?: string | undefined;
+    className?: string | undefined;
+}
+/** A number beside a link or tab, such as unread messages or items waiting,
+ *  capped at `max` so a big count doesn't widen what it sits in. */
+export declare function CountBadge({ count, max, variant, emphasis, size, label, showZero, locale, className, }: CountBadgeProps): import("react").JSX.Element | null;
 interface StatusDotProps {
     variant?: BadgeVariant;
     pulse?: boolean;