@stll/ui 0.65.1 → 0.67.0

package/dist/components/text.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { TEXT_VARIANT_CLASS_NAMES, TEXT_VARIANT_FACES } from "./text.shared.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/text.tsx
+// src/components/text.tsx
 const WEIGHT_CLASS_NAMES = {
 	light: "font-light",
 	regular: "font-normal",
@@ -21,5 +21,4 @@ const Text = ({ className, variant = "body", ...props }) => /* @__PURE__ */ jsx(
 	"data-variant": variant,
 	...props
 });
-//#endregion
 export { Text };

package/dist/components/text.native.d.ts

@@ -1,6 +1,5 @@
 import { TextContract, TextVariant } from "./text.shared.js";
 import { TextProps } from "react-native";
-//#region src/components/text.native.d.ts
 /** The font a role is set in, for a native control that draws its own text. */
 export declare const textFontFamily: (variant: TextContract["variant"]) => string;
 /**
@@ -11,5 +10,4 @@ export declare const textFontFamily: (variant: TextContract["variant"]) => strin
 export declare const Text: ({ className, style, variant, ...props }: Omit<TextProps, keyof TextContract> & TextContract & {
   className?: string | undefined;
 }) => import("react").JSX.Element;
-//#endregion
 export type { TextVariant };

package/dist/components/text.native.js

@@ -1,7 +1,7 @@
 import { TEXT_VARIANT_CLASS_NAMES, TEXT_VARIANT_FACES } from "./text.shared.js";
 import { jsx } from "react/jsx-runtime";
 import { Text as Text$1 } from "react-native";
-//#region src/components/text.native.tsx
+// src/components/text.native.tsx
 /**
 * The embedded DM Sans face, the web's typeface, for each weight, by the
 * name the app registers it under.
@@ -34,5 +34,4 @@ const Text = ({ className, style, variant = "body", ...props }) => /* @__PURE__
 	style: [{ fontFamily: textFontFamily(variant) }, style],
 	...props
 });
-//#endregion
 export { Text, textFontFamily };

package/dist/components/text.shared.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-//#region src/components/text.shared.d.ts
 /** Each role's size, colour and spacing, as Tailwind classes. */
 export declare const TEXT_VARIANT_CLASS_NAMES: {
   readonly body: "text-base";
@@ -45,5 +44,4 @@ export declare const TEXT_VARIANT_FACES: {
 export type TextContract = {
   variant?: TextVariant;
   children?: ReactNode;
-};
-//#endregion
+};

package/dist/components/text.shared.js

@@ -1,4 +1,4 @@
-//#region src/components/text.shared.ts
+// src/components/text.shared.ts
 /** Each role's size, colour and spacing, as Tailwind classes. */
 const TEXT_VARIANT_CLASS_NAMES = {
 	body: "text-base",
@@ -37,5 +37,4 @@ const TEXT_VARIANT_FACES = {
 	badge: sans("medium"),
 	link: sans("regular")
 };
-//#endregion
 export { TEXT_VARIANT_CLASS_NAMES, TEXT_VARIANT_FACES };

package/dist/components/textarea.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { ControlSize } from "../lib/control-size.js";
-//#region src/components/textarea.d.ts
 type TextareaProps = React$1.ComponentProps<"textarea"> & {
   size?: ControlSize | number;
   unstyled?: boolean;
@@ -17,7 +16,16 @@ type TextareaProps = React$1.ComponentProps<"textarea"> & {
    * table cell or a row must not push its neighbours around.
    */
   fieldSizing?: "content" | "fixed";
+  /**
+   * The most lines it grows to before it scrolls. Without it the field grows
+   * with its content without end.
+   */
+  maxRows?: number | undefined;
+  /**
+   * Shows `length / maxLength` under the end of the field. Needs `maxLength`;
+   * the browser still enforces the limit.
+   */
+  showCount?: boolean | undefined;
 };
-declare const Textarea: ({ className, size, unstyled, inline, fieldSizing, dir, onChange, ...props }: TextareaProps) => React$1.JSX.Element;
-//#endregion
+declare const Textarea: ({ className, size, unstyled, inline, fieldSizing, maxRows, showCount, dir, onChange, style, ...props }: TextareaProps) => React$1.JSX.Element;
 export { Textarea, type TextareaProps };

package/dist/components/textarea.js

@@ -1,44 +1,82 @@
 "use client";
-import { cn } from "../lib/utils.js";
-import { CONTROL_SIZE } from "../lib/control-size.js";
 import { useContentDir } from "../hooks/use-content-dir.js";
+import { CONTROL_SIZE } from "../lib/control-size.js";
+import { cn } from "../lib/utils.js";
 import { INLINE_FIELD_CLASS_NAME } from "./input-control.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { Field } from "@base-ui/react/field";
-//#region src/components/textarea.tsx
-const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, fieldSizing = "content", dir, onChange, ...props }) => {
+// src/components/textarea.tsx
+const Textarea = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, fieldSizing = "content", maxRows, showCount = false, dir, onChange, style, ...props }) => {
 	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
 		dir,
 		value: props.value,
 		defaultValue: props.defaultValue
 	});
+	const [typedLength, setTypedLength] = useState(() => textLength(props.defaultValue));
+	const length = props.value === void 0 ? typedLength : textLength(props.value);
+	const counted = showCount && props.maxLength !== void 0;
 	const handleChange = (event) => {
 		contentDir.trackValue(event.currentTarget.value);
+		if (counted) setTypedLength(event.currentTarget.value.length);
 		onChange?.(event);
 	};
-	return /* @__PURE__ */ jsx("span", {
-		className: cn(inline && "relative inline-flex w-full", !unstyled && !inline && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+	const syncCountOnFormReset = (control) => {
+		const textarea = control?.querySelector("textarea");
+		const form = textarea?.form;
+		if (!counted || props.value !== void 0 || !textarea || !form) return;
+		const handleReset = () => {
+			setTimeout(() => {
+				contentDir.trackValue(textarea.value);
+				setTypedLength(textarea.value.length);
+			}, 0);
+		};
+		form.addEventListener("reset", handleReset);
+		return () => {
+			form.removeEventListener("reset", handleReset);
+		};
+	};
+	const textareaStyle = maxRows === void 0 ? style : {
+		...style,
+		"--textarea-max-rows": maxRows
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(inline && "relative inline-flex w-full", counted && "relative", !unstyled && !inline && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
 		"data-size": size,
 		"data-slot": "textarea-control",
-		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
-			className: cn(inline ? cn(INLINE_FIELD_CLASS_NAME, "resize-none") : cn("w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none", TEXTAREA_SIZE_CLASS_NAMES[controlSize], fieldSizing === "content" && TEXTAREA_FLOOR_CLASS_NAMES[controlSize]), fieldSizing === "content" ? "field-sizing-content" : "field-sizing-fixed resize-none"),
+		ref: syncCountOnFormReset,
+		children: [/* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
+			className: cn(inline ? cn(INLINE_FIELD_CLASS_NAME, "resize-none [--textarea-pb:0px] [--textarea-pt:0px]") : cn("w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] outline-none", TEXTAREA_SIZE_CLASS_NAMES[controlSize], fieldSizing === "content" && TEXTAREA_FLOOR_CLASS_NAMES[controlSize]), fieldSizing === "content" ? "field-sizing-content" : "field-sizing-fixed resize-none", "pt-(--textarea-pt) pb-(--textarea-pb)", counted && "[--textarea-pb:--spacing(6)]", maxRows !== void 0 && "max-h-[calc(var(--textarea-max-rows)*1lh+var(--textarea-pt)+var(--textarea-pb))] min-h-0 max-sm:min-h-0"),
 			"data-slot": "textarea",
 			...mergeProps(defaultProps, props, { onChange: handleChange }),
-			dir: contentDir.dir
-		}) })
+			dir: contentDir.dir,
+			style: textareaStyle
+		}) }), counted ? /* @__PURE__ */ jsxs("span", {
+			className: "text-muted-foreground pointer-events-none absolute end-3 bottom-1.5 text-xs tabular-nums",
+			"data-slot": "textarea-count",
+			children: [
+				length,
+				"/",
+				props.maxLength
+			]
+		}) : null]
 	});
 };
+/** Each size's block padding, as the variables the padding and cap read. */
 const TEXTAREA_SIZE_CLASS_NAMES = {
-	[CONTROL_SIZE.sm]: "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]",
-	[CONTROL_SIZE.default]: void 0,
-	[CONTROL_SIZE.lg]: "py-[calc(--spacing(2)-1px)]"
+	[CONTROL_SIZE.sm]: "px-[calc(--spacing(2.5)-1px)] [--textarea-pb:calc(--spacing(1)-1px)] [--textarea-pt:calc(--spacing(1)-1px)]",
+	[CONTROL_SIZE.default]: "[--textarea-pb:calc(--spacing(1.5)-1px)] [--textarea-pt:calc(--spacing(1.5)-1px)]",
+	[CONTROL_SIZE.lg]: "[--textarea-pb:calc(--spacing(2)-1px)] [--textarea-pt:calc(--spacing(2)-1px)]"
 };
 const TEXTAREA_FLOOR_CLASS_NAMES = {
 	[CONTROL_SIZE.sm]: "min-h-16.5 max-sm:min-h-19.5",
 	[CONTROL_SIZE.default]: "min-h-17.5 max-sm:min-h-20.5",
 	[CONTROL_SIZE.lg]: "min-h-18.5 max-sm:min-h-21.5"
 };
-//#endregion
+function textLength(value) {
+	if (value === void 0) return 0;
+	return String(value).length;
+}
 export { Textarea };

package/dist/components/textarea.native.d.ts

@@ -1,10 +1,8 @@
 import { ComponentProps } from "react";
 import { NativeField } from "./input.native.js";
-//#region src/components/textarea.native.d.ts
 /**
  * The web's `Textarea` (./textarea.tsx) on a phone: text that wraps and grows,
  * in the web's box, or none for a field inside a container that draws one
  * (the composer).
  */
-export declare const Textarea: ({ size, unstyled, ...props }: Omit<ComponentProps<typeof NativeField>, "box" | "multiline">) => import("react").JSX.Element;
-//#endregion
+export declare const Textarea: ({ size, unstyled, ...props }: Omit<ComponentProps<typeof NativeField>, "box" | "multiline">) => import("react").JSX.Element;

package/dist/components/textarea.native.js

@@ -1,6 +1,6 @@
 import { NativeField } from "./input.native.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/textarea.native.tsx
+// src/components/textarea.native.tsx
 /** The web textarea's box at each control size: its border and inset. */
 const BOX = {
 	sm: "min-h-16 rounded-lg border border-input bg-card px-2.5 py-1.5",
@@ -24,5 +24,4 @@ const Textarea = ({ size = "default", unstyled = false, ...props }) => /* @__PUR
 	multiline: true,
 	size
 });
-//#endregion
 export { Textarea };

package/dist/components/textarea.shared.d.ts

@@ -1,4 +1,2 @@
 import { TextFieldContract } from "./input.shared.js";
-//#region src/components/textarea.shared.d.ts
-export type TextareaContract = Omit<TextFieldContract, "onValueChange">;
-//#endregion
+export type TextareaContract = Omit<TextFieldContract, "onValueChange">;

package/dist/components/time-field.d.ts

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import { PickerClock } from "./date-picker-popover.logic.js";
+/**
+ * Stacks time fields on one grid, so their labels, hours and minutes line up
+ * whatever each label's length. A lone TimeField makes its own group.
+ */
+declare const TimeFieldGroup: ({ children, className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
+type TimeFieldProps = {
+  className?: string | undefined;
+  disabled: boolean;
+  /** Ties the field to an error or hint shown next to it. */
+  describedBy?: string | undefined;
+  invalid?: boolean;
+  label: string;
+  locale: string;
+  onChange: (clock: PickerClock) => void;
+  /** A wall-clock `HH:mm` time, or `null` while there is none. */
+  time: string | null;
+};
+/**
+ * A wall-clock time to the minute: hour and minute selects in the locale's
+ * own clock and numerals, so `2 PM` and `14` read as each locale writes them.
+ */
+declare const TimeField: ({ className, ...props }: TimeFieldProps) => React$1.JSX.Element;
+export { TimeField, TimeFieldGroup, type TimeFieldProps };

package/dist/components/time-field.js

@@ -0,0 +1,108 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { getHourOptions, getMinuteOptions, getTimeFieldNames, splitPickerTime } from "./date-picker-popover.logic.js";
+import { Select, SelectContent as SelectPopup, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo } from "react";
+// src/components/time-field.tsx
+/**
+* Label, hour, colon, minute. The time tracks never shrink below their value,
+* so a 12-hour `10 AM` is never clipped. Below 13rem, too narrow for the
+* longest label beside its selects, each label takes its own line above them.
+*/
+const TIME_FIELD_GRID_CLASS_NAME = "grid items-center gap-x-1.5 gap-y-1.5 grid-cols-[auto_minmax(max-content,1fr)_auto_minmax(max-content,1fr)] @max-[13rem]/time-fields:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]";
+/** Set inside a TimeFieldGroup, whose grid every field's row shares. */
+const TimeFieldGroupContext = createContext(false);
+/**
+* Stacks time fields on one grid, so their labels, hours and minutes line up
+* whatever each label's length. A lone TimeField makes its own group.
+*/
+const TimeFieldGroup = ({ children, className, ...props }) => /* @__PURE__ */ jsx(TimeFieldGroupContext.Provider, {
+	value: true,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("@container/time-fields min-w-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: TIME_FIELD_GRID_CLASS_NAME,
+			children
+		})
+	})
+});
+/**
+* A wall-clock time to the minute: hour and minute selects in the locale's
+* own clock and numerals, so `2 PM` and `14` read as each locale writes them.
+*/
+const TimeField = ({ className, ...props }) => {
+	return useContext(TimeFieldGroupContext) ? /* @__PURE__ */ jsx(TimeFieldRow, {
+		className,
+		...props
+	}) : /* @__PURE__ */ jsx(TimeFieldGroup, {
+		className,
+		children: /* @__PURE__ */ jsx(TimeFieldRow, { ...props })
+	});
+};
+const TimeFieldRow = ({ className, describedBy, disabled, invalid = false, label, locale, onChange, time }) => {
+	const labelId = useId();
+	const hourOptions = useMemo(() => getHourOptions(locale), [locale]);
+	const minuteOptions = useMemo(() => getMinuteOptions(locale), [locale]);
+	const fieldNames = useMemo(() => getTimeFieldNames(locale), [locale]);
+	const clock = time === null ? null : splitPickerTime(time);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-describedby": describedBy,
+		"aria-labelledby": labelId,
+		className: cn("col-span-full grid grid-cols-subgrid items-center", className),
+		role: "group",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground-label text-xs @max-[13rem]/time-fields:col-span-full",
+				id: labelId,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TimePartSelect, {
+				disabled,
+				invalid,
+				label: fieldNames.hour,
+				onChange: (hour) => onChange({
+					hour,
+					minute: clock?.minute ?? 0
+				}),
+				options: hourOptions,
+				value: clock?.hour ?? null
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "text-muted-foreground text-xs",
+				children: ":"
+			}),
+			/* @__PURE__ */ jsx(TimePartSelect, {
+				disabled,
+				invalid,
+				label: fieldNames.minute,
+				onChange: (minute) => onChange({
+					hour: clock?.hour ?? 0,
+					minute
+				}),
+				options: minuteOptions,
+				value: clock?.minute ?? null
+			})
+		]
+	});
+};
+const TimePartSelect = ({ disabled, invalid, label, onChange, options, value }) => /* @__PURE__ */ jsxs(Select, {
+	disabled,
+	onValueChange: (next) => {
+		if (typeof next === "number") onChange(next);
+	},
+	value,
+	children: [/* @__PURE__ */ jsx(SelectTrigger, {
+		"aria-invalid": invalid || void 0,
+		"aria-label": label,
+		className: "w-full min-w-0 tabular-nums",
+		size: "sm",
+		children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "—" })
+	}), /* @__PURE__ */ jsx(SelectPopup, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+		value: option.value,
+		children: option.label
+	}, option.value)) })]
+});
+export { TimeField, TimeFieldGroup };

package/dist/components/toast.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { Toast, ToastManagerAddOptions, ToastObject } from "@base-ui/react/toast";
-//#region src/components/toast.d.ts
 type ToastData = {
   tooltipStyle?: boolean;
   timeoutPolicy?: {
@@ -92,5 +91,4 @@ declare function toastCountdownMs({ timeout, type }: {
 declare function resolveToastUpdateTimeout(options: ToastUpdateOptions, previous: Pick<ToastObject<ToastData>, "actionProps" | "data" | "description" | "title" | "type">): {
   timeout?: number;
 };
-//#endregion
 export { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, type ToastPosition, ToastProvider, resolveToastUpdateTimeout, stellaToast, toastCountdownMs, toastDedupeId };

package/dist/components/toast.js

@@ -1,14 +1,14 @@
 "use client";
 import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
 import { SAFE_AREA_TOAST_GEOMETRY_CLASS_NAME } from "../lib/safe-area.js";
-import { Loader } from "./loader.js";
+import { cn } from "../lib/utils.js";
 import { buttonVariants } from "./button.js";
+import { Loader } from "./loader.js";
 import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Toast } from "@base-ui/react/toast";
-//#region src/components/toast.tsx
+// src/components/toast.tsx
 const toastManager = Toast.createToastManager();
 const anchoredToastManager = Toast.createToastManager();
 const TOAST_RIGHT_OFFSET_VAR = "--stella-toast-right-offset";
@@ -108,7 +108,7 @@ const Toasts = ({ position }) => {
 								"data-slot": "toast-action",
 								children: toastItem.actionProps.children
 							}), /* @__PURE__ */ jsx(Toast.Close, {
-								className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-0.5 select-none",
+								className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded-sm p-0.5 select-none",
 								"data-slot": "toast-close",
 								"aria-label": "Close notification",
 								children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
@@ -374,5 +374,4 @@ function getToastIcon(type) {
 function isToastType(type) {
 	return typeof type === "string" && type in TOAST_ICONS;
 }
-//#endregion
 export { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastProvider, resolveToastUpdateTimeout, stellaToast, toastCountdownMs, toastDedupeId };

package/dist/components/toggle-group.d.ts

@@ -3,7 +3,6 @@ import * as React$1 from "react";
 import { ButtonSize } from "./button.shared.js";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { ToggleProps } from "./toggle.js";
-//#region src/components/toggle-group.d.ts
 /**
  * A segmented control: a row of toggles in one tray, of which one (or, with
  * `multiple`, several) is on. Use it for view modes, density, and filter
@@ -28,5 +27,4 @@ type ToggleGroupProps<Value extends string> = ToggleGroup$1.Props<Value> & {
   size?: ButtonSize | undefined;
   children?: React$1.ReactNode;
 };
-//#endregion
 export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps };

package/dist/components/toggle-group.js

@@ -4,7 +4,7 @@ import { Toggle } from "./toggle.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
-//#region src/components/toggle-group.tsx
+// src/components/toggle-group.tsx
 const ToggleGroupSizeContext = createContext("xs");
 /**
 * A segmented control: a row of toggles in one tray, of which one (or, with
@@ -41,5 +41,4 @@ const ToggleGroupItem = ({ className, size, variant = "muted", ...props }) => {
 		...props
 	});
 };
-//#endregion
 export { ToggleGroup, ToggleGroupItem };

package/dist/components/toggle.d.ts

@@ -2,7 +2,6 @@ import "./button.js";
 import * as React$1 from "react";
 import { ButtonSize } from "./button.shared.js";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
-//#region src/components/toggle.d.ts
 /**
  * A button that stays pressed: a formatting mark, "show resolved", a pinned
  * view. It is a `Button` underneath, so it shares the button's sizes, focus
@@ -22,5 +21,4 @@ type ToggleProps<Value extends string> = Toggle$1.Props<Value> & {
   tooltip?: React$1.ReactNode;
   variant?: ToggleVariant | undefined;
 };
-//#endregion
 export { Toggle, type ToggleProps, type ToggleVariant };

package/dist/components/toggle.js

@@ -2,7 +2,7 @@
 import { Button } from "./button.js";
 import { jsx } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
-//#region src/components/toggle.tsx
+// src/components/toggle.tsx
 /**
 * A button that stays pressed: a formatting mark, "show resolved", a pinned
 * view. It is a `Button` underneath, so it shares the button's sizes, focus
@@ -22,5 +22,4 @@ const Toggle = ({ size = "sm", tooltip, variant = "muted", ...props }) => /* @__
 	}),
 	...props
 });
-//#endregion
 export { Toggle };

package/dist/components/toolbar-icon-action.d.ts

@@ -1,6 +1,5 @@
 import { Button } from "./button.js";
 import { ComponentProps, ReactNode } from "react";
-//#region src/components/toolbar-icon-action.d.ts
 type ToolbarIconActionProps = Omit<ComponentProps<typeof Button>, "aria-label" | "children" | "size" | "title" | "tooltip" | "variant"> & {
   /** Names the action for the tooltip and for assistive technology. */
   label: string;
@@ -14,5 +13,4 @@ type ToolbarIconActionProps = Omit<ComponentProps<typeof Button>, "aria-label" |
  * and the accessible name, and the row stays the same shape everywhere.
  */
 export declare const ToolbarIconAction: ({ density, icon, label, ...props }: ToolbarIconActionProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/toolbar-icon-action.js

@@ -1,6 +1,6 @@
 import { Button } from "./button.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/toolbar-icon-action.tsx
+// src/components/toolbar-icon-action.tsx
 const SIZE_BY_DENSITY = {
 	header: "icon-sm",
 	toolbar: "icon-xs"
@@ -19,5 +19,4 @@ const ToolbarIconAction = ({ density, icon, label, ...props }) => /* @__PURE__ *
 	variant: "ghost",
 	children: icon
 });
-//#endregion
 export { ToolbarIconAction };

package/dist/components/tooltip-trigger-helper.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/tooltip-trigger-helper.d.ts
 type TooltipTriggerOptions = {
   trigger: React$1.ReactElement;
   tooltip: React$1.ReactNode;
@@ -10,5 +9,4 @@ type TooltipTriggerOptions = {
  * `aria-label` to that Button, whose size decides (see `BUTTON_SIZE_CONTENT`).
  */
 declare const renderTooltipTrigger: ({ trigger, tooltip }: TooltipTriggerOptions) => React$1.JSX.Element;
-//#endregion
 export { renderTooltipTrigger };

package/dist/components/tooltip-trigger-helper.js

@@ -2,7 +2,7 @@
 import { hasTooltipContent } from "../lib/tooltip-content.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/tooltip-trigger-helper.tsx
+// src/components/tooltip-trigger-helper.tsx
 /**
 * Overlay triggers pass only an explicit `tooltip`. They cannot tell whether
 * their content is a label or a glyph; a trigger rendered as `Button` hands its
@@ -12,5 +12,4 @@ const renderTooltipTrigger = ({ trigger, tooltip }) => {
 	if (!hasTooltipContent(tooltip)) return trigger;
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipPopup, { children: tooltip })] });
 };
-//#endregion
 export { renderTooltipTrigger };

package/dist/components/tooltip.d.ts

@@ -1,6 +1,6 @@
+import { KbdKeys } from "./kbd.js";
 import { ReactNode } from "react";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-//#region src/components/tooltip.d.ts
 declare const TooltipCreateHandle: typeof Tooltip$1.createHandle;
 /**
  * How long the pointer rests on a trigger before its tooltip opens. Base UI
@@ -27,10 +27,14 @@ declare const TooltipTrigger: (props: Tooltip$1.Trigger.Props) => import("react"
 declare const TooltipFactTrigger: ({ children }: {
   children: ReactNode;
 }) => import("react").JSX.Element;
-declare const TooltipPopup: ({ className, align, sideOffset, side, children, ...props }: Tooltip$1.Popup.Props & {
+declare const TooltipPopup: ({ className, align, sideOffset, side, children, shortcut, ...props }: Tooltip$1.Popup.Props & {
+  /**
+   * The keys that do the same as the trigger, shown after the label and
+   * spelled for the reader's platform (`["mod", "K"]`).
+   */
+  shortcut?: KbdKeys | undefined;
   align?: Tooltip$1.Positioner.Props["align"];
   side?: Tooltip$1.Positioner.Props["side"];
   sideOffset?: Tooltip$1.Positioner.Props["sideOffset"];
 }) => import("react").JSX.Element;
-//#endregion
 export { TOOLTIP_OPEN_DELAY_MS, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -1,10 +1,11 @@
 "use client";
-import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME } from "../lib/positioner-sizing.js";
-import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Kbd } from "./kbd.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-//#region src/components/tooltip.tsx
+// src/components/tooltip.tsx
 const TooltipCreateHandle = Tooltip$1.createHandle;
 /**
 * How long the pointer rests on a trigger before its tooltip opens. Base UI
@@ -40,7 +41,7 @@ const TooltipFactTrigger = ({ children }) => /* @__PURE__ */ jsx(Tooltip$1.Trigg
 	type: "button",
 	children
 });
-const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top", children, ...props }) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top", children, shortcut, ...props }) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 	align,
 	className: cn(CONTENT_SIZED_POSITIONER_CLASS_NAME, "transition-[top,left,right,bottom,transform] data-instant:transition-none", OVERLAY_LAYER_CLASS_NAMES.popup),
 	collisionPadding: 8,
@@ -54,9 +55,12 @@ const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top
 		children: /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
 			className: "relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0",
 			"data-slot": "tooltip-viewport",
-			children
+			children: shortcut === void 0 ? children : /* @__PURE__ */ jsxs("span", {
+				className: "flex flex-wrap items-center gap-x-2 gap-y-1",
+				"data-slot": "tooltip-shortcut-row",
+				children: [children, /* @__PURE__ */ jsx(Kbd, { keys: shortcut })]
+			})
 		})
 	})
 }) });
-//#endregion
 export { TOOLTIP_OPEN_DELAY_MS, Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipFactTrigger, TooltipProvider, TooltipTrigger };

package/dist/components/truncated-text.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { TooltipContent as TooltipPopup } from "./tooltip.js";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/truncated-text.d.ts
 /**
  * Text that ends in an ellipsis when it does not fit, and shows the whole of
  * it only when it was actually cut: on hover or focus with a tooltip, and on
@@ -29,5 +28,4 @@ type TruncatedTextProps = useRender.ComponentProps<"span"> & {
 };
 /** Whether the element's text is cut by its box, in either direction. */
 declare function isTextOverflowing(element: Pick<HTMLElement, "clientHeight" | "clientWidth" | "scrollHeight" | "scrollWidth"> | null): boolean;
-//#endregion
 export { TruncatedText, type TruncatedTextLines, type TruncatedTextProps, isTextOverflowing };

package/dist/components/truncated-text.js

@@ -1,13 +1,13 @@
 "use client";
-import { cn } from "../lib/utils.js";
-import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { containedEventHandler } from "../hooks/use-contained-handler.js";
+import { cn } from "../lib/utils.js";
 import { Popover, PopoverContent as PopoverPopup } from "./popover.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/truncated-text.tsx
+// src/components/truncated-text.tsx
 /**
 * Text that ends in an ellipsis when it does not fit, and shows the whole of
 * it only when it was actually cut: on hover or focus with a tooltip, and on
@@ -107,5 +107,4 @@ const CONTROL_SELECTOR = "a[href], button, label, summary, [role=button], [role=
 function isInsideControl(element) {
 	return element.closest(CONTROL_SELECTOR) !== null;
 }
-//#endregion
 export { TruncatedText, isTextOverflowing };