@stll/ui 0.65.1 → 0.66.0

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

@@ -8,7 +8,7 @@ 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";
@@ -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

@@ -2,9 +2,10 @@
 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 { 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

@@ -7,7 +7,7 @@ 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 };

package/dist/components/view-toolbar.d.ts

@@ -1,6 +1,5 @@
 import { Button } from "./button.js";
 import { ComponentProps } from "react";
-//#region src/components/view-toolbar.d.ts
 /** Shared view controls stay compact and scroll horizontally on small screens. */
 export declare const ViewToolbarChrome: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 type ViewFilterButtonProps = Omit<ComponentProps<typeof Button>, "children" | "size" | "variant" | "aria-label" | "title"> & {
@@ -8,5 +7,4 @@ type ViewFilterButtonProps = Omit<ComponentProps<typeof Button>, "children" | "s
 };
 export declare const ViewFilterButton: ({ label, ...props }: ViewFilterButtonProps) => import("react").JSX.Element;
 export declare const ViewFilterChip: ({ className, ...props }: Omit<ComponentProps<typeof Button>, "size" | "variant">) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/view-toolbar.js

@@ -2,7 +2,7 @@ import { FilterIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/view-toolbar.tsx
+// src/components/view-toolbar.tsx
 /** Shared view controls stay compact and scroll horizontally on small screens. */
 const ViewToolbarChrome = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex min-w-0 shrink-0 [scrollbar-width:none] flex-nowrap items-center gap-1 overflow-x-auto px-2 py-1 [-ms-overflow-style:none] md:flex-wrap md:overflow-visible [&::-webkit-scrollbar]:hidden", className),
@@ -22,5 +22,4 @@ const ViewFilterChip = ({ className, ...props }) => /* @__PURE__ */ jsx(Button,
 	size: "xs",
 	variant: "secondary"
 });
-//#endregion
 export { ViewFilterButton, ViewFilterChip, ViewToolbarChrome };

package/dist/components/workspace-shell.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement, ReactNode } from "react";
-//#region src/components/workspace-shell.d.ts
 type WorkspaceCompactNavigation = {
   /** Navigation content rendered inside Stella's compact sheet. */
   content: ReactElement;
@@ -80,5 +79,4 @@ type WorkspaceEndRailProps = {
  * only the actions and route state.
  */
 export declare const WorkspaceEndRail: ({ chatAction, children, className, label, overlay, topAction }: WorkspaceEndRailProps) => import("react").JSX.Element;
-//#endregion
 export type { WorkspaceCompactNavigation, WorkspaceEndRailChatAction, WorkspaceEndRailProps, WorkspaceNavigation, WorkspaceShellProps, WorkspaceTopBarContext };

package/dist/components/workspace-shell.js

@@ -8,7 +8,7 @@ import { InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFo
 import { Sheet, SheetContent as SheetPopup, SheetTitle, SheetTrigger } from "./sheet.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
-//#region src/components/workspace-shell.tsx
+// src/components/workspace-shell.tsx
 /**
 * Stella's complete authenticated workspace frame. It owns the dynamic
 * viewport, sibling rail geometry, sticky top chrome, and sole content
@@ -107,5 +107,4 @@ const WorkspaceEndRail = ({ chatAction, children, className, label, overlay, top
 		}) })
 	]
 });
-//#endregion
 export { WorkspaceEndRail, WorkspaceShell };

package/dist/css.d.ts

@@ -1,3 +1,2 @@
-//#region src/css.d.ts
 declare module "*.css";
 export {};

package/dist/data-table/schema.d.ts

@@ -1,4 +1,3 @@
-//#region src/data-table/schema.d.ts
 /**
  * A table's schema: which columns exist, what each can do, and how wide it
  * starts. Not how a cell draws — that is the caller's, and it is the reason
@@ -65,5 +64,4 @@ export declare const tableColumnSizing: <TRender>(schema: TableSchema<TRender>)
  * second declaration wins and the first disappears with no error anywhere.
  * Callers that build a schema from user data (a property list) check here.
  */
-export declare const duplicateColumnIds: <TRender>(schema: TableSchema<TRender>) => string[];
-//#endregion
+export declare const duplicateColumnIds: <TRender>(schema: TableSchema<TRender>) => string[];

package/dist/data-table/schema.js

@@ -1,4 +1,4 @@
-//#region src/data-table/schema.ts
+// src/data-table/schema.ts
 /** Every column a schema declares, in order. */
 const tableColumnIds = (schema) => schema.columns.map((column) => column.id);
 const withCapability = (schema, capability) => schema.columns.filter((column) => column.capabilities[capability]).map((column) => column.id);
@@ -36,5 +36,4 @@ const duplicateColumnIds = (schema) => {
 	}
 	return [...duplicates];
 };
-//#endregion
 export { duplicateColumnIds, findTableColumn, hideableColumnIds, sortableColumnIds, tableColumnIds, tableColumnSizing, visibleColumnIds };

package/dist/data-table/table.d.ts

@@ -1,5 +1,4 @@
 import { HTMLAttributes, ReactNode } from "react";
-//#region src/data-table/table.d.ts
 export declare const DataTable: <TItem>({ columns, emptyLabel, getRowProps, isLoading, loadingLabel, loadingRowCount, rowAction, rowKey, rows }: DataTableProps<TItem>) => import("react").JSX.Element;
 type RowProps = Omit<HTMLAttributes<HTMLTableRowElement>, "children">;
 export declare const DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS: readonly ["a[href]", "audio[controls]", "button", "input", "select", "textarea", "video[controls]", "summary", "label", "[contenteditable]:not([contenteditable='false'])", "[role='button']", "[role='checkbox']", "[role='combobox']", "[role='link']", "[role='listbox']", "[role='menuitem']", "[role='menuitemcheckbox']", "[role='menuitemradio']", "[role='option']", "[role='radio']", "[role='searchbox']", "[role='slider']", "[role='spinbutton']", "[role='switch']", "[role='tab']", "[role='textbox']", "[role='treeitem']", "[tabindex]:not([tabindex='-1'])", "[data-data-table-stop-row-action]"];
@@ -29,5 +28,4 @@ export type DataTableProps<TItem> = {
   rows: readonly TItem[];
 };
 export declare const isDataTableRowActionTarget: (row: EventTarget, target: EventTarget | null) => boolean;
-//#endregion
 export {};

package/dist/data-table/table.js

@@ -3,7 +3,7 @@ import { Button } from "../components/button.js";
 import { Skeleton } from "../components/skeleton.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/data-table/table.tsx
+// src/data-table/table.tsx
 const DataTable = ({ columns, emptyLabel, getRowProps, isLoading = false, loadingLabel, loadingRowCount = DEFAULT_LOADING_ROW_COUNT, rowAction, rowKey, rows }) => {
 	let content;
 	if (isLoading) content = /* @__PURE__ */ jsx(LoadingRows, {
@@ -124,5 +124,4 @@ const mergeHandlers = (first, second) => {
 		second(event);
 	};
 };
-//#endregion
 export { DATA_TABLE_INTERACTIVE_DESCENDANT_SELECTORS, DataTable, isDataTableRowActionTarget };

package/dist/hooks/use-contained-handler.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/hooks/use-contained-handler.d.ts
 type ContainmentRoot = {
   contains: (target: Node) => boolean;
 };
@@ -51,5 +50,4 @@ export declare const containedEventHandler: <E extends {
   currentTarget: unknown;
   target: unknown;
 }>(handler: (event: E) => void) => (event: E) => void;
-//#endregion
 export {};

package/dist/hooks/use-contained-handler.js

@@ -1,4 +1,4 @@
-//#region src/hooks/use-contained-handler.ts
+// src/hooks/use-contained-handler.ts
 /**
 * Wrap a React event handler so it only fires when the event target
 * is a DOM descendant of the given ref.
@@ -50,5 +50,4 @@ const containedEventHandler = (handler) => (event) => {
 	if (event.currentTarget instanceof Node && event.target instanceof Node && !event.currentTarget.contains(event.target)) return;
 	handler(event);
 };
-//#endregion
 export { containedEventHandler, containedHandler };

package/dist/hooks/use-content-dir.d.ts

@@ -1,4 +1,3 @@
-//#region src/hooks/use-content-dir.d.ts
 /**
  * Resolve the `dir` for a free-text field so the caret and alignment follow
  * the ambient UI direction while the field is empty, then switch to the typed
@@ -44,5 +43,4 @@ export declare const isStructuredInputType: (type: string | undefined) => boolea
  */
 export declare const contentDir: (value: FieldValue) => "auto" | undefined;
 export declare const useContentDir: ({ dir, value, defaultValue }: UseContentDirArgs) => UseContentDirResult;
-//#endregion
 export {};

package/dist/hooks/use-content-dir.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-//#region src/hooks/use-content-dir.ts
+// src/hooks/use-content-dir.ts
 const STRUCTURED_INPUT_TYPES = /* @__PURE__ */ new Set([
 	"email",
 	"url",
@@ -41,5 +41,4 @@ const useContentDir = ({ dir, value, defaultValue }) => {
 		}
 	};
 };
-//#endregion
 export { contentDir, isStructuredInputType, useContentDir };

package/dist/hooks/use-latest.d.ts

@@ -1,5 +1,4 @@
 import { RefObject } from "react";
-//#region src/hooks/use-latest.d.ts
 /**
  * A ref that always holds the latest committed value, readable from
  * event handlers, imperative bridges, and async paths without making
@@ -17,5 +16,4 @@ import { RefObject } from "react";
  * the component body), which the React Compiler cannot model and
  * `no-ref-mirror` bans.
  */
-export declare const useLatest: <T>(value: T) => RefObject<T>;
-//#endregion
+export declare const useLatest: <T>(value: T) => RefObject<T>;

package/dist/hooks/use-latest.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from "react";
-//#region src/hooks/use-latest.ts
+// src/hooks/use-latest.ts
 /**
 * A ref that always holds the latest committed value, readable from
 * event handlers, imperative bridges, and async paths without making
@@ -24,5 +24,4 @@ const useLatest = (value) => {
 	});
 	return ref;
 };
-//#endregion
 export { useLatest };

package/dist/hooks/use-mobile.d.ts

@@ -1,4 +1,2 @@
-//#region src/hooks/use-mobile.d.ts
 /** True below `md`, where the layout collapses to a single column. */
-export declare function useIsMobile(): boolean;
-//#endregion
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-//#region src/hooks/use-mobile.ts
+// src/hooks/use-mobile.ts
 /** The `md:` variant's own condition, as a media query. */
 const MD_MEDIA_QUERY = `(min-width: 48rem)`;
 const subscribe = (onChange) => {
@@ -13,5 +13,4 @@ const getServerSnapshot = () => false;
 function useIsMobile() {
 	return React$1.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-//#endregion
 export { useIsMobile };

package/dist/hooks/use-prefers-reduced-motion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Whether the person asked the system for reduced motion. For behaviour that
+ * changes with the preference (a different control, not only a different
+ * animation); a CSS-only difference belongs in the `motion-reduce:` variant.
+ */
+export declare const usePrefersReducedMotion: () => boolean;

package/dist/hooks/use-prefers-reduced-motion.js

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from "react";
+// src/hooks/use-prefers-reduced-motion.ts
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const subscribe = (onChange) => {
+	const mediaQueryList = window.matchMedia(REDUCED_MOTION_QUERY);
+	mediaQueryList.addEventListener("change", onChange);
+	return () => mediaQueryList.removeEventListener("change", onChange);
+};
+const getSnapshot = () => window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const getServerSnapshot = () => false;
+/**
+* Whether the person asked the system for reduced motion. For behaviour that
+* changes with the preference (a different control, not only a different
+* animation); a CSS-only difference belongs in the `motion-reduce:` variant.
+*/
+const usePrefersReducedMotion = () => useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+export { usePrefersReducedMotion };

package/dist/hooks/use-viewport-width.d.ts

@@ -1,4 +1,2 @@
-//#region src/hooks/use-viewport-width.d.ts
 /** Viewport width in CSS pixels, tracked across resizes. */
-export declare function useViewportWidth(): number;
-//#endregion
+export declare function useViewportWidth(): number;

package/dist/hooks/use-viewport-width.js

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-//#region src/hooks/use-viewport-width.ts
+// src/hooks/use-viewport-width.ts
 const subscribe = (onChange) => {
 	window.addEventListener("resize", onChange);
 	return () => window.removeEventListener("resize", onChange);
@@ -10,5 +10,4 @@ const getServerSnapshot = () => 0;
 function useViewportWidth() {
 	return React$1.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-//#endregion
 export { useViewportWidth };