@stll/ui 0.61.0 → 0.64.0

package/dist/calendar/day-calendar.logic.js

@@ -146,7 +146,7 @@ const slotAt = (ms, options) => rangeFromDrag({
 * member of a cluster shares the cluster's lane count, so their widths match.
 */
 const layoutOverlaps = (ranges) => {
-	const sorted = ranges.toSorted((left, right) => left.startMs - right.startMs || right.endMs - left.endMs || compareIds(left.id, right.id));
+	const sorted = [...ranges].sort((left, right) => left.startMs - right.startMs || right.endMs - left.endMs || compareIds(left.id, right.id));
 	const placements = /* @__PURE__ */ new Map();
 	const seen = /* @__PURE__ */ new Set();
 	let cluster = [];
@@ -186,7 +186,7 @@ const layoutOverlaps = (ranges) => {
 * an earlier entry already uses it.
 */
 const mergeShortSegments = (segments, { thresholdMs }) => {
-	const sorted = segments.toSorted((left, right) => left.startMs - right.startMs || left.endMs - right.endMs || compareIds(left.id, right.id));
+	const sorted = [...segments].sort((left, right) => left.startMs - right.startMs || left.endMs - right.endMs || compareIds(left.id, right.id));
 	const merged = [];
 	const takenIds = new Set(segments.map(({ id }) => id));
 	let run = [];

package/dist/components/accordion.js

@@ -14,7 +14,7 @@ const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion
 	...props
 });
 const TRIGGER_SIZE_CLASS_NAME = {
-	compact: "py-2 text-xs",
+	compact: "py-1.5 text-xs",
 	default: "py-4 text-sm",
 	sm: "min-h-11 items-center py-2 text-sm"
 };

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

@@ -1,5 +1,12 @@
 import * as React$1 from "react";
 //#region src/components/bidi-text.d.ts
+/**
+ * Isolation shields the text around a value, not the value itself: a
+ * directional control inside it still reorders its letters, so stored text
+ * loses those controls before it renders.
+ */
+export declare const stripDirectionalControls: (text: string) => string;
+export declare const withoutDirectionalControls: (children: React$1.ReactNode) => React$1.ReactNode;
 export declare const BidiText: (props: BidiTextProps) => React$1.JSX.Element;
 export declare const UserText: typeof BidiText;
 type BidiDirection = "auto" | "ltr" | "rtl";

package/dist/components/bidi-text.js

@@ -2,37 +2,50 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/bidi-text.tsx
+/** Explicit embeddings, overrides and isolates; implicit marks stay. */
+const DIRECTIONAL_CONTROLS = /[\u202A-\u202E\u2066-\u2069]/gu;
+/**
+* Isolation shields the text around a value, not the value itself: a
+* directional control inside it still reorders its letters, so stored text
+* loses those controls before it renders.
+*/
+const stripDirectionalControls = (text) => text.replaceAll(DIRECTIONAL_CONTROLS, "");
+const withoutDirectionalControls = (children) => typeof children === "string" ? stripDirectionalControls(children) : children;
 const BidiText = (props) => {
 	if (props.as === "span") {
-		const { as: _as, className, direction = "auto", ...rest } = props;
+		const { as: _as, children, className, direction = "auto", ...rest } = props;
 		return /* @__PURE__ */ jsx("span", {
 			className: cn("[unicode-bidi:isolate]", className),
 			dir: direction,
-			...rest
+			...rest,
+			children: withoutDirectionalControls(children)
 		});
 	}
 	if (props.as === "div") {
-		const { as: _as, className, direction = "auto", ...rest } = props;
+		const { as: _as, children, className, direction = "auto", ...rest } = props;
 		return /* @__PURE__ */ jsx("div", {
 			className: cn("[unicode-bidi:isolate]", className),
 			dir: direction,
-			...rest
+			...rest,
+			children: withoutDirectionalControls(children)
 		});
 	}
 	if (props.as === "p") {
-		const { as: _as, className, direction = "auto", ...rest } = props;
+		const { as: _as, children, className, direction = "auto", ...rest } = props;
 		return /* @__PURE__ */ jsx("p", {
 			className: cn("[unicode-bidi:isolate]", className),
 			dir: direction,
-			...rest
+			...rest,
+			children: withoutDirectionalControls(children)
 		});
 	}
-	const { as: _as, direction = "auto", ...rest } = props;
+	const { as: _as, children, direction = "auto", ...rest } = props;
 	return /* @__PURE__ */ jsx("bdi", {
 		dir: direction,
-		...rest
+		...rest,
+		children: withoutDirectionalControls(children)
 	});
 };
 const UserText = BidiText;
 //#endregion
-export { BidiText, UserText };
+export { BidiText, UserText, stripDirectionalControls, withoutDirectionalControls };

package/dist/components/button.d.ts

@@ -16,7 +16,7 @@ declare const BUTTON_LAYOUT_CLASS_NAMES: {
   readonly wrap: "h-auto min-h-11 items-start justify-start py-2 text-start whitespace-normal sm:h-auto";
 };
 declare const buttonVariants: (props?: ({
-  size?: "chip" | "default" | "icon" | "icon-2xs" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "inline" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
+  size?: "chip" | "default" | "icon" | "icon-2xs" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "inline" | "lg" | "row" | "sm" | "touch" | "xl" | "xs" | null | undefined;
   layout?: "wrap" | null | undefined;
   variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "muted-destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -66,6 +66,7 @@ declare const BUTTON_SIZE_CONTENT: {
   readonly lg: "text";
   readonly row: "text";
   readonly sm: "text";
+  readonly touch: "text";
   readonly xl: "text";
   readonly xs: "text";
 };

package/dist/components/button.js

@@ -6,6 +6,7 @@ import { MENU_ROW_CLASS_NAME } from "../lib/menu-row.js";
 import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
 import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, isValidElement } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { panic } from "better-result";
@@ -50,6 +51,7 @@ const BUTTON_SIZE_CLASS_NAMES = {
 	lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
 	row: `${MENU_ROW_CLASS_NAME} [&_svg]:mx-0`,
 	sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] text-sm sm:h-7 sm:text-xs",
+	touch: "min-h-[44px] min-w-[44px] px-[calc(--spacing(3.5)-1px)]",
 	xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
 	xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
 };
@@ -65,7 +67,7 @@ const BUTTON_VARIANT_CLASS_NAMES = {
 	outline: `${tokens("outline")} dark:bg-input/32 data-pressed:border-primary/48 data-pressed:bg-accent dark:data-pressed:bg-input/64 [:hover:not([data-pressed])]:bg-accent/50 dark:[:hover:not([data-pressed])]:bg-input/64 shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none`,
 	secondary: `${tokens("secondary")} data-pressed:bg-background data-pressed:inset-ring-input active:bg-secondary/80 [:hover:not([data-pressed])]:bg-secondary/90 data-pressed:shadow-xs/5 data-pressed:inset-ring`
 };
-const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex max-w-full shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	compoundVariants: [{
 		className: "[:hover:not([data-pressed])]:bg-transparent",
 		size: "inline",
@@ -105,7 +107,7 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
 * inside the box: an outline paints above the content, so a card's own
 * surface cannot cover it the way it would cover an inset shadow.
 */
-const BUTTON_PLAIN_CLASS = "focus-visible:ring-ring focus-visible:ring-offset-background data-pressed:outline-primary/48 relative inline-block cursor-pointer text-start outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-default data-pressed:outline-2 data-pressed:-outline-offset-2 data-pressed:outline-solid";
+const BUTTON_PLAIN_CLASS = "focus-visible:ring-ring focus-visible:ring-offset-background data-pressed:outline-primary/48 relative inline-block max-w-full cursor-pointer text-start outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:cursor-default data-pressed:outline-2 data-pressed:-outline-offset-2 data-pressed:outline-solid";
 /**
 * The outline a plain button's focus ring follows, matching its content:
 * `box` for a card, row or block of text (the container radius), `round` for
@@ -145,9 +147,57 @@ const BUTTON_SIZE_CONTENT = {
 	lg: BUTTON_CONTENT.text,
 	row: BUTTON_CONTENT.text,
 	sm: BUTTON_CONTENT.text,
+	touch: BUTTON_CONTENT.text,
 	xl: BUTTON_CONTENT.text,
 	xs: BUTTON_CONTENT.text
 };
+/**
+* A button never grows past its container (`max-w-full` on every variant).
+* A one-line text label is cut to fit with an ellipsis; the button's
+* accessible name keeps the whole text, and `tooltip` can show it. The label
+* is a plain span, not a `TruncatedText`: a tooltip root in every button's
+* label would cost every screen with many buttons. `layout="wrap"` lets a
+* label take several lines instead. An inline button is a word in a sentence
+* and a plain button lays out its own content, so neither has a one-line
+* label to cut.
+*/
+const BUTTON_LABEL_CLASS = "block min-w-0 truncate";
+const cutsLabel = ({ layout, size, variant }) => layout === void 0 && variant !== "plain" && variant !== "link" && size !== "inline" && BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE] === BUTTON_CONTENT.text;
+/**
+* Each run of adjacent text among the children, cut to the button's width.
+* Adjacent text (`Save {count} files`) stays one run, as it is one flex item
+* in the button's box; children React renders as nothing (`null`, `false`)
+* do not split it. Every other child keeps its place in a fragment keyed by
+* its own key, or by its position when it has none, so keyed children keep
+* their state when they move.
+*/
+const containedLabel = (children) => {
+	const items = Array.isArray(children) ? children : [children];
+	const parts = [];
+	let run = [];
+	const closeRun = () => {
+		if (run.length > 0) {
+			parts.push(/* @__PURE__ */ jsx("span", {
+				className: BUTTON_LABEL_CLASS,
+				"data-slot": "button-label",
+				children: run
+			}, `label:${String(parts.length)}`));
+			run = [];
+		}
+	};
+	for (const child of items) {
+		if (child === null || child === void 0 || typeof child === "boolean") continue;
+		if (typeof child === "string" || typeof child === "number") {
+			run.push(child);
+			continue;
+		}
+		closeRun();
+		const key = isValidElement(child) && child.key !== null ? `key:${child.key}` : `part:${String(parts.length)}`;
+		parts.push(/* @__PURE__ */ jsx(Fragment$1, { children: child }, key));
+	}
+	closeRun();
+	return parts;
+};
 const implicitTooltip = (size, accessibleName) => {
 	const content = BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE];
 	switch (content) {
@@ -174,7 +224,11 @@ function Button({ className, variant: variantProp, size, render, layout, loading
 			"data-slot": "button-loader",
 			size: "sm",
 			variant: "decorative"
-		}) : icon, children] }),
+		}) : icon, cutsLabel({
+			layout,
+			size,
+			variant
+		}) ? containedLabel(children) : children] }),
 		className: cn(variant === "plain" ? cn(BUTTON_PLAIN_CLASS, BUTTON_PLAIN_SHAPE_CLASS[shape], className) : cn(disposition === BUTTON_DISPOSITION.enabled && !isActivationPreservingDisabled && size !== "row" && size !== "inline" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,

package/dist/components/button.native-classes.js

@@ -68,6 +68,11 @@ const SIZES = {
 		label: "text-sm",
 		slop: 0
 	},
+	touch: {
+		box: `${CONTROL} min-h-11 min-w-11 gap-2 rounded-lg px-4`,
+		label: "",
+		slop: 0
+	},
 	xl: {
 		box: `${CONTROL} min-h-14 gap-2 rounded-lg px-6`,
 		label: "text-lg",

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

@@ -59,7 +59,7 @@ export type ButtonTokenVariant = keyof typeof BUTTON_VARIANT_TOKENS;
 export declare const BUTTON_PLAIN_VARIANT = "plain";
 export type ButtonVariant = ButtonTokenVariant | typeof BUTTON_PLAIN_VARIANT;
 /** Every size a button comes in, on every platform. */
-export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-2xs", "icon-xs", "inline", "lg", "row", "sm", "xl", "xs"];
+export declare const BUTTON_SIZES: readonly ["chip", "default", "icon", "icon-lg", "icon-sm", "icon-xl", "icon-2xs", "icon-xs", "inline", "lg", "row", "sm", "touch", "xl", "xs"];
 export type ButtonSize = (typeof BUTTON_SIZES)[number];
 /**
  * The props every button renderer accepts, with one meaning. A renderer adds

package/dist/components/button.shared.js

@@ -68,6 +68,7 @@ const BUTTON_SIZES = [
 	"lg",
 	"row",
 	"sm",
+	"touch",
 	"xl",
 	"xs"
 ];

package/dist/components/checkbox.js

@@ -13,6 +13,7 @@ const Checkbox = ({ className, ...props }) => /* @__PURE__ */ jsx(Checkbox$1.Roo
 		render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
 			...indicatorProps,
 			children: state.indeterminate ? /* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
 				className: "size-3.5 sm:size-3",
 				fill: "none",
 				height: "24",
@@ -25,6 +26,7 @@ const Checkbox = ({ className, ...props }) => /* @__PURE__ */ jsx(Checkbox$1.Roo
 				xmlns: "http://www.w3.org/2000/svg",
 				children: [/* @__PURE__ */ jsx("title", { children: "Indeterminate" }), /* @__PURE__ */ jsx("path", { d: "M5.252 12h13.496" })]
 			}) : /* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
 				className: "size-3.5 sm:size-3",
 				fill: "none",
 				height: "24",

package/dist/components/court-filter.d.ts

@@ -0,0 +1,42 @@
+//#region src/components/court-filter.d.ts
+type CourtOption = {
+  value: string;
+  label?: string;
+  badgeText?: string;
+};
+type CourtFilterGroup = {
+  value: string;
+  label: string | null;
+  courts: readonly CourtOption[];
+};
+type CourtFilterBaseProps = {
+  groups: readonly CourtFilterGroup[];
+  label: string;
+};
+type SingleCourtFilterProps = CourtFilterBaseProps & {
+  selected: string | undefined;
+  onChange: (value: string | undefined) => void;
+  collapsedGroups: readonly string[];
+  visibleRowLimit: number;
+  showAllLabel: string;
+};
+type MultipleCourtFilterProps = CourtFilterBaseProps & {
+  selected: readonly string[];
+  onChange: (values: string[]) => void;
+  maxSelections: number;
+  selectionHint: string;
+  searchLabel: string;
+  clearLabel: string;
+  emptyLabel: string;
+  matchText: (value: string) => string;
+};
+export declare const toggleCourtSelection: (selected: readonly string[], values: readonly string[]) => string[];
+/**
+ * Court filtering shares an owner while each surface keeps its interaction
+ * model. Each model is its own export, so a bundle carries only the one it
+ * renders.
+ */
+export declare const MultipleCourtFilter: (options: MultipleCourtFilterProps) => import("react").JSX.Element;
+export declare const SingleCourtFilter: (props: SingleCourtFilterProps) => import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/court-filter.js

@@ -0,0 +1,210 @@
+"use client";
+import { ChevronRightIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { BidiText } from "./bidi-text.js";
+import { ScrollArea } from "./scroll-area.js";
+import { DirectionalIcon } from "./directional-icon.js";
+import { Checkbox } from "./checkbox.js";
+import { Field, FieldLabel } from "./field.js";
+import { SearchField } from "./search-field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+//#region src/components/court-filter.tsx
+const toggleCourtSelection = (selected, values) => {
+	return values.every((value) => selected.includes(value)) ? selected.filter((value) => !values.includes(value)) : [.../* @__PURE__ */ new Set([...selected, ...values])];
+};
+const SingleCourtGroup = ({ group, options }) => {
+	const panelId = useId();
+	const [open, setOpen] = useState(!options.collapsedGroups.includes(group.value));
+	const [showAll, setShowAll] = useState(false);
+	const selectedHere = group.courts.find(({ value }) => value === options.selected);
+	const expanded = open || selectedHere !== void 0;
+	const items = showAll ? [...group.courts] : group.courts.slice(0, options.visibleRowLimit);
+	if (selectedHere !== void 0 && !items.includes(selectedHere)) items.push(selectedHere);
+	const hiddenCount = group.courts.length - items.length;
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", { children: [group.label !== null && /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-controls": panelId,
+		"aria-expanded": expanded,
+		className: "text-foreground-strong-muted hover:text-foreground flex min-h-11 w-full items-center gap-1 py-1 text-start text-xs font-medium",
+		onClick: () => setOpen(!expanded),
+		children: [/* @__PURE__ */ jsx(DirectionalIcon, {
+			className: cn("size-3 shrink-0 transition-transform", expanded && "rotate-90"),
+			flip: !expanded,
+			icon: ChevronRightIcon
+		}), group.label]
+	}), /* @__PURE__ */ jsxs("div", {
+		hidden: group.label !== null && !expanded,
+		id: panelId,
+		children: [/* @__PURE__ */ jsx("ul", {
+			"aria-label": group.label ?? options.label,
+			className: "flex flex-col",
+			children: items.map(({ value, label, badgeText }) => {
+				const checked = options.selected === value;
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+					className: "hover:bg-muted/60 has-[:focus-visible]:ring-ring flex min-h-11 cursor-pointer items-center gap-2 rounded-sm py-1.5 ps-1 pe-1 text-xs has-[:focus-visible]:ring-2",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: "radio",
+							name: `court-${panelId}`,
+							value,
+							checked,
+							className: "accent-primary size-3.5 shrink-0",
+							onChange: () => options.onChange(value),
+							onClick: () => {
+								if (checked) options.onChange(void 0);
+							}
+						}),
+						/* @__PURE__ */ jsx(BidiText, {
+							as: "span",
+							className: cn("text-foreground min-w-0 flex-1 truncate", checked && "font-medium"),
+							title: label ?? value,
+							children: label ?? value
+						}),
+						badgeText !== void 0 && /* @__PURE__ */ jsx("bdi", {
+							className: "text-muted-foreground text-2xs shrink-0 tabular-nums",
+							children: badgeText
+						})
+					]
+				}) }, value);
+			})
+		}), hiddenCount > 0 && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "text-muted-foreground hover:text-foreground -mx-1 min-h-11 px-1 py-1.5 text-xs",
+			onClick: () => setShowAll(true),
+			children: options.showAllLabel
+		})]
+	})] });
+};
+const MultipleCourtGroup = ({ group, courts, options, hintId }) => {
+	const labelId = useId();
+	const { selected } = options;
+	const values = courts.map(({ value }) => value);
+	const tierSelected = values.every((value) => selected.includes(value));
+	const nextTier = toggleCourtSelection(selected, values);
+	const tierDisabled = !tierSelected && nextTier.length > options.maxSelections;
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ jsx("legend", {
+				className: "sr-only",
+				children: group.label ?? options.label
+			}),
+			group.label !== null && /* @__PURE__ */ jsxs("label", {
+				id: `${labelId}-tier`,
+				className: "flex min-h-11 cursor-pointer items-center gap-2 text-xs font-medium",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					"aria-labelledby": `${labelId}-tier`,
+					checked: tierSelected,
+					indeterminate: !tierSelected && values.some((value) => selected.includes(value)),
+					disabled: tierDisabled,
+					"aria-describedby": hintId,
+					onCheckedChange: () => {
+						if (tierSelected || nextTier.length <= options.maxSelections) options.onChange(nextTier);
+					}
+				}), group.label]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col",
+				children: courts.map(({ value, label, badgeText }, index) => {
+					const checked = selected.includes(value);
+					const next = toggleCourtSelection(selected, [value]);
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+						id: `${labelId}-${index}`,
+						className: "hover:bg-muted/60 has-[:focus-visible]:ring-ring flex min-h-11 cursor-pointer items-center gap-2 rounded-sm text-sm has-[:focus-visible]:ring-2",
+						children: [
+							/* @__PURE__ */ jsx(Checkbox, {
+								"aria-labelledby": `${labelId}-${index}`,
+								checked,
+								disabled: !checked && next.length > options.maxSelections,
+								"aria-describedby": hintId,
+								onCheckedChange: () => {
+									if (checked || next.length <= options.maxSelections) options.onChange(next);
+								}
+							}),
+							/* @__PURE__ */ jsx("bdi", {
+								className: "min-w-0 flex-1 wrap-break-word",
+								children: label ?? value
+							}),
+							badgeText !== void 0 && /* @__PURE__ */ jsx("bdi", {
+								className: "text-muted-foreground text-xs tabular-nums",
+								children: badgeText
+							})
+						]
+					}) }, value);
+				})
+			})
+		]
+	});
+};
+/**
+* Court filtering shares an owner while each surface keeps its interaction
+* model. Each model is its own export, so a bundle carries only the one it
+* renders.
+*/
+const MultipleCourtFilter = (options) => {
+	const [query, setQuery] = useState("");
+	const hintId = useId();
+	const needle = options.matchText(query);
+	const missing = options.selected.filter((name) => !options.groups.some((group) => group.courts.some(({ value }) => value === name)));
+	const groups = [...options.groups];
+	if (missing.length > 0) groups.push({
+		value: "selected",
+		label: null,
+		courts: missing.map((value) => ({ value }))
+	});
+	const visible = groups.flatMap((group) => {
+		const courts = options.matchText(group.label ?? "").includes(needle) ? group.courts : group.courts.filter(({ value, label }) => options.matchText(label ?? value).includes(needle));
+		return courts.length === 0 ? [] : [{
+			group,
+			courts
+		}];
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 space-y-2",
+		children: [
+			/* @__PURE__ */ jsxs(Field, { children: [/* @__PURE__ */ jsx(FieldLabel, {
+				className: "sr-only",
+				children: options.searchLabel
+			}), /* @__PURE__ */ jsx(SearchField, {
+				value: query,
+				onValueChange: setQuery,
+				clearLabel: options.clearLabel,
+				placeholder: options.searchLabel
+			})] }),
+			/* @__PURE__ */ jsx("p", {
+				id: hintId,
+				role: "status",
+				className: "text-muted-foreground text-xs",
+				children: options.selectionHint
+			}),
+			/* @__PURE__ */ jsx(ScrollArea, {
+				className: "h-72",
+				axis: "vertical",
+				"aria-label": options.label,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [visible.length === 0 && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground py-2 text-sm",
+						children: options.emptyLabel
+					}), visible.map(({ group, courts }) => /* @__PURE__ */ jsx(MultipleCourtGroup, {
+						group,
+						courts,
+						options,
+						hintId
+					}, group.value))]
+				})
+			})
+		]
+	});
+};
+const SingleCourtFilter = (props) => /* @__PURE__ */ jsx("div", {
+	className: "flex flex-col gap-3",
+	children: props.groups.map((group) => /* @__PURE__ */ jsx(SingleCourtGroup, {
+		group,
+		options: props
+	}, group.value))
+});
+//#endregion
+export { MultipleCourtFilter, SingleCourtFilter, toggleCourtSelection };

package/dist/components/identity-text.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { withoutDirectionalControls } from "./bidi-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
 //#region src/components/identity-text.tsx
@@ -10,6 +11,7 @@ const IdentityText = ({ children, className }) => {
 	const [overflow, setOverflow] = useState(false);
 	const [hasFocusOwner, setHasFocusOwner] = useState(false);
 	const [open, setOpen] = useState(false);
+	const name = withoutDirectionalControls(children);
 	const textRef = useCallback((node) => {
 		if (node === null) return;
 		const measure = () => setOverflow(node.scrollWidth > node.clientWidth);
@@ -56,14 +58,14 @@ const IdentityText = ({ children, className }) => {
 				role: overflow && !hasFocusOwner ? "button" : void 0,
 				tabIndex: overflow && !hasFocusOwner ? 0 : void 0
 			}),
-			children
+			children: name
 		}), /* @__PURE__ */ jsx(TooltipPopup, {
 			className: "max-w-sm",
 			role: "tooltip",
 			children: /* @__PURE__ */ jsx("span", {
 				className: "block max-w-sm wrap-break-word",
 				dir: "auto",
-				children
+				children: name
 			})
 		})]
 	});

package/dist/components/landing.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { ScrollArea } from "./scroll-area.js";
 import { BidiText } from "./bidi-text.js";
+import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/landing.tsx
 const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {

package/dist/components/middle-truncate.d.ts

@@ -0,0 +1,19 @@
+//#region src/components/middle-truncate.d.ts
+type MiddleTruncateProps = {
+  value: string;
+  className?: string;
+};
+/**
+ * One line of text that, when it does not fit, gives up its middle and keeps
+ * its end: `Smlouva o dílo – revize…klienta.docx`. For names whose end tells
+ * them apart (file names, versions, case numbers), where a trailing ellipsis
+ * would cut exactly that part.
+ *
+ * The head clips after its last whole character and the tail slides over the
+ * slack, so the ellipsis sits flush against the text instead of after a gap
+ * or half a glyph. The ellipsis is generated content with empty alternative
+ * text: the element's text and accessible name stay the full value.
+ */
+export declare const MiddleTruncate: ({ value, className }: MiddleTruncateProps) => import("react").JSX.Element;
+//#endregion
+export {};