@stll/ui 0.44.1 → 0.46.0

package/README.md

@@ -213,7 +213,8 @@ column and keep their trailing column, so they never scroll sideways.
   <ListGroupHeader>
     <ListGroupHeading>
       <ListGroupTitle id="apps">
-        Apps with access<ListGroupCount>3</ListGroupCount>
+        Apps with access
+        <ListGroupCount count="3" />
       </ListGroupTitle>
       <ListGroupDescription>Apps you authorized.</ListGroupDescription>
     </ListGroupHeading>

package/dist/components/accordion.d.ts

@@ -2,7 +2,11 @@ import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.d.ts
 declare const Accordion: <Value = unknown>(props: Accordion$1.Root.Props<Value>) => import("react").JSX.Element;
 declare const AccordionItem: ({ className, ...props }: Accordion$1.Item.Props) => import("react").JSX.Element;
-declare const AccordionTrigger: ({ className, children, ...props }: Accordion$1.Trigger.Props) => import("react").JSX.Element;
-declare const AccordionPanel: ({ className, children, ...props }: Accordion$1.Panel.Props) => import("react").JSX.Element;
+declare const AccordionTrigger: ({ className, children, size, ...props }: Accordion$1.Trigger.Props & {
+  size?: "default" | "compact";
+}) => import("react").JSX.Element;
+declare const AccordionPanel: ({ className, children, size, ...props }: Accordion$1.Panel.Props & {
+  size?: "default" | "compact";
+}) => import("react").JSX.Element;
 //#endregion
 export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -13,10 +13,10 @@ const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion
 	"data-slot": "accordion-item",
 	...props
 });
-const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
+const AccordionTrigger = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Header, {
 	className: "flex",
 	children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
-		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-start text-sm font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", className),
+		className: cn("focus-visible:ring-ring flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md text-start font-medium outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-64 data-panel-open:*:data-[slot=accordion-indicator]:rotate-180", size === "compact" ? "py-2 text-xs" : "py-4 text-sm", className),
 		"data-slot": "accordion-trigger",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
@@ -25,12 +25,12 @@ const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */
 		})]
 	})
 });
-const AccordionPanel = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
+const AccordionPanel = ({ className, children, size = "default", ...props }) => /* @__PURE__ */ jsx(Accordion$1.Panel, {
 	className: "text-muted-foreground h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
 	"data-slot": "accordion-panel",
 	...props,
 	children: /* @__PURE__ */ jsx("div", {
-		className: cn("pt-0 pb-4", className),
+		className: cn("pt-0", size === "compact" ? "pb-3" : "pb-4", className),
 		children
 	})
 });

package/dist/components/ai-label.d.ts

@@ -0,0 +1,33 @@
+//#region src/components/ai-label.d.ts
+type AiLabelProps = {
+  /**
+   * The words the mark shows ("AI", "AI topics"), already translated. They
+   * are also the control's accessible name, so what a sighted reader sees is
+   * what a screen-reader user hears.
+   */
+  label: string;
+  /**
+   * What the reader is told about the content the mark stands beside, already
+   * translated. Hosts pass the sentence for one closed disclosure context
+   * (`@stll/api-contract/ai-disclosure`), never free text.
+   */
+  disclosure: string;
+  className?: string | undefined;
+};
+/**
+ * The mark on content a model wrote, and the one place a reader learns what
+ * that means.
+ *
+ * It keeps the weight of the plain label it replaces: the surrounding text's
+ * size, colour, case and tracking, a small sparkle, no chip and no tint. The
+ * only addition is that it is a button: a click, a tap, Enter or Space opens
+ * a small popover with the disclosure, and Escape or a click outside closes
+ * it. Nothing depends on hover.
+ *
+ * The trigger stays inline, so it can sit inside a heading or a line of
+ * text. Never inside another control (a `<summary>`, a link, a button): it is
+ * one itself, and nested interactive content is unreachable to assistive
+ * technology.
+ */
+export declare const AiLabel: ({ label, disclosure, className }: AiLabelProps) => import("react").JSX.Element;
+//#endregion

package/dist/components/ai-label.js

@@ -0,0 +1,42 @@
+"use client";
+import { SparklesIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverDescription, PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ai-label.tsx
+/**
+* The mark on content a model wrote, and the one place a reader learns what
+* that means.
+*
+* It keeps the weight of the plain label it replaces: the surrounding text's
+* size, colour, case and tracking, a small sparkle, no chip and no tint. The
+* only addition is that it is a button: a click, a tap, Enter or Space opens
+* a small popover with the disclosure, and Escape or a click outside closes
+* it. Nothing depends on hover.
+*
+* The trigger stays inline, so it can sit inside a heading or a line of
+* text. Never inside another control (a `<summary>`, a link, a button): it is
+* one itself, and nested interactive content is unreachable to assistive
+* technology.
+*/
+const AiLabel = ({ label, disclosure, className }) => /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+	className: cn("focus-visible:ring-ring relative inline-flex cursor-pointer items-center justify-center gap-1 rounded-sm align-middle tracking-[inherit] text-inherit [text-transform:inherit] decoration-dotted underline-offset-2 outline-none [font:inherit] hover:underline focus-visible:ring-2 data-popup-open:underline pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+	"data-slot": "ai-label",
+	type: "button",
+	children: [/* @__PURE__ */ jsx(SparklesIcon, {
+		"aria-hidden": true,
+		className: "size-3 shrink-0"
+	}), label]
+}), /* @__PURE__ */ jsx(PopoverPopup, {
+	"aria-label": label,
+	className: "max-w-72",
+	"data-slot": "ai-label-popup",
+	padding: "sm",
+	side: "bottom",
+	children: /* @__PURE__ */ jsx(PopoverDescription, {
+		className: "text-xs leading-relaxed text-pretty",
+		children: disclosure
+	})
+})] });
+//#endregion
+export { AiLabel };

package/dist/components/alert-dialog.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME } from "../lib/safe-area.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -24,7 +25,7 @@ const AlertDialogBackdrop = ({ className, layer = "default", ...props }) => /* @
 	...props
 });
 const AlertDialogViewport = ({ className, layer = "default", ...props }) => /* @__PURE__ */ jsx(AlertDialog$1.Viewport, {
-	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4", OVERLAY_LAYER_CLASS_NAMES[layer], className),
+	className: cn("fixed inset-0 grid grid-rows-[1fr_auto_3fr] justify-items-center", SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME, OVERLAY_LAYER_CLASS_NAMES[layer], className),
 	"data-slot": "alert-dialog-viewport",
 	...props
 });
@@ -32,7 +33,7 @@ const AlertDialogPopup = ({ className, bottomStickOnMobile = true, layer = "defa
 	className: cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12"),
 	layer,
 	children: /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
-		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
+		className: cn("bg-popover text-popover-foreground relative row-start-2 flex max-h-full min-h-0 w-full max-w-lg min-w-0 -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-ending-style:duration-150 data-nested:data-ending-style:translate-y-8 data-nested-dialog-open:origin-top data-starting-style:scale-98 data-starting-style:opacity-0 data-nested:data-starting-style:translate-y-8 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:pb-(--safe-area-bottom) max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:before:hidden max-sm:before:rounded-none max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4", className),
 		"data-slot": "alert-dialog-popup",
 		...props
 	})

package/dist/components/animated-count.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/animated-count.d.ts
+/**
+ * A formatted number whose changed characters fade in. The caller formats
+ * (locale digits, units); the glyphs stay plain inline text so bidirectional
+ * ordering is the browser's, and only opacity moves. The first render is
+ * still: a count that loads does not announce itself.
+ */
+declare const AnimatedCount: ({ className, value }: {
+  className?: string;
+  value: string;
+}) => import("react").JSX.Element;
+//#endregion
+export { AnimatedCount };

package/dist/components/animated-count.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/animated-count.tsx
+/**
+* Aligns characters from the end, where digits keep their place value, so
+* 99 → 100 changes every glyph but 120 → 121 only the last one. An unchanged
+* glyph keeps its key and therefore its DOM node: it never replays its fade.
+*/
+const toGlyphs = (value, previous, generation) => {
+	const chars = Array.from(value);
+	return chars.map((char, index) => {
+		const fromEnd = chars.length - index;
+		const priorIndex = previous === null ? -1 : previous.length - fromEnd;
+		const prior = priorIndex >= 0 ? previous?.[priorIndex] : void 0;
+		if (prior?.char === char) return prior;
+		return {
+			char,
+			enters: previous !== null,
+			key: `${generation}:${fromEnd}`
+		};
+	});
+};
+/**
+* A formatted number whose changed characters fade in. The caller formats
+* (locale digits, units); the glyphs stay plain inline text so bidirectional
+* ordering is the browser's, and only opacity moves. The first render is
+* still: a count that loads does not announce itself.
+*/
+const AnimatedCount = ({ className, value }) => {
+	const [state, setState] = useState(() => ({
+		generation: 0,
+		glyphs: toGlyphs(value, null, 0),
+		value
+	}));
+	let { glyphs } = state;
+	if (state.value !== value) {
+		const generation = state.generation + 1;
+		glyphs = toGlyphs(value, state.glyphs, generation);
+		setState({
+			generation,
+			glyphs,
+			value
+		});
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("tabular-nums", className),
+		"data-slot": "animated-count",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: value
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: glyphs.map((glyph) => /* @__PURE__ */ jsx("span", {
+				className: cn(glyph.enters && "motion-safe:animate-text-fade"),
+				children: glyph.char
+			}, glyph.key))
+		})]
+	});
+};
+//#endregion
+export { AnimatedCount };

package/dist/components/application-rail.js

@@ -22,7 +22,7 @@ const ApplicationRailHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("
 	...props
 });
 const ApplicationRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-2 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:hidden", className),
+	className: cn("flex min-h-0 flex-1 [scrollbar-width:none] flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain [&::-webkit-scrollbar]:hidden", className),
 	"data-slot": "application-rail-content",
 	...props
 });

package/dist/components/brand-icons.d.ts

@@ -3,4 +3,5 @@ import * as React$1 from "react";
 type BrandIconProps = React$1.ComponentProps<"svg">;
 export declare const DiscordLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
 export declare const GitHubLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
+export declare const XLogoIcon: (props: BrandIconProps) => React$1.JSX.Element;
 //#endregion

package/dist/components/brand-icons.js

@@ -14,5 +14,12 @@ const GitHubLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656" })
 });
+const XLogoIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	fill: "currentColor",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.64 7.584H.47l8.6-9.835L0 1.153h7.594l5.243 6.932 6.064-6.932Zm-1.29 19.49h2.039L6.486 3.24H4.298l13.313 17.403Z" })
+});
 //#endregion
-export { DiscordLogoIcon, GitHubLogoIcon };
+export { DiscordLogoIcon, GitHubLogoIcon, XLogoIcon };

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "icon" | "sm" | "default" | "lg" | "row" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "destructive" | "muted" | "secondary" | "default" | "destructive-outline" | "destructive-ghost" | "ghost" | "outline" | null | undefined;
+  size?: "default" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "muted" | "destructive-outline" | "destructive-ghost" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

package/dist/components/button.js

@@ -19,7 +19,17 @@ import { cva } from "class-variance-authority";
 * swaps the cursor so the control still reads as unavailable on hover.
 */
 const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
-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 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", {
+/**
+* Press feedback: the button gives slightly under the pointer.
+*
+* Applied by `Button` only while it can act, so a disabled or loading button
+* never appears to respond. `scale` is its own property in Tailwind v4, so it
+* composes with a caller's `translate` (a vertically centred icon button) and
+* the transition names only the transform family. Menu rows and link-styled
+* buttons keep the treatment of their surface instead.
+*/
+const buttonPressClass = "motion-safe:transition-transform motion-safe:duration-150 ease-out motion-safe:active:scale-[0.98]";
+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", {
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -68,7 +78,7 @@ function Button({ className, variant, size, render, loading, children, disabled,
 			size: "sm",
 			variant: "decorative"
 		}), children] }) : children,
-		className: cn(buttonVariants({
+		className: cn(disposition === BUTTON_DISPOSITION.enabled && size !== "row" && variant !== "link" && buttonPressClass, buttonVariants({
 			className,
 			size,
 			variant

package/dist/components/command.js

@@ -66,7 +66,7 @@ const CommandEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomple
 	...props
 });
 const CommandList = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.List, {
-	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+	className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain", className),
 	"data-slot": "command-list",
 	...props
 });

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

@@ -9,10 +9,16 @@
  * carries meaning on its own anyway: the court's name stands beside it.
  */
 export type CourtBadgeWeight = "solid" | "tinted" | "outline" | "dashed";
+/**
+ * `default` stands on its own beside a court's name; `inline` sits inside a
+ * line of small text (a list row's meta line) without making it taller.
+ */
+export type CourtBadgeSize = "default" | "inline";
 type CourtBadgeProps = {
   /** The court's own abbreviation, in the language its name is in. */
   abbreviation: string;
   weight: CourtBadgeWeight;
+  size?: CourtBadgeSize | undefined;
   className?: string;
 };
 /**
@@ -23,5 +29,5 @@ type CourtBadgeProps = {
  * abbreviation is actually known. There is no placeholder: a court nobody
  * abbreviates gets no chip.
  */
-export declare const CourtBadge: ({ abbreviation, className, weight }: CourtBadgeProps) => import("react").JSX.Element;
+export declare const CourtBadge: ({ abbreviation, className, size, weight }: CourtBadgeProps) => import("react").JSX.Element;
 //#endregion

package/dist/components/court-badge.js

@@ -1,7 +1,17 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/court-badge.tsx
-const COURT_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-sm border px-1 py-0.5 font-mono text-xs leading-4 font-semibold tracking-wide whitespace-nowrap";
+const COURT_BADGE_BASE_CLASS = "inline-flex shrink-0 items-center rounded-sm border font-mono font-semibold tracking-wide whitespace-nowrap";
+/**
+* The line box runs a third taller than the type, because these capitals
+* carry diacritics (Ú, Ř, Š) whose ink rises above cap height; a tighter box
+* sets the acute against the pill's border. `inline` keeps that ratio at a
+* smaller size and drops the padding, so the chip fits a 16px text line.
+*/
+const SIZE_CLASS = {
+	default: "px-1 py-0.5 text-xs leading-4",
+	inline: "px-0.5 text-3xs leading-3.5"
+};
 /**
 * Every weight keeps a border, because `--muted` is a 4% tint: a borderless
 * tinted chip on a sidebar or a muted row is a pill whose edge nobody can
@@ -31,8 +41,8 @@ const WEIGHT_CLASS = {
 * abbreviation is actually known. There is no placeholder: a court nobody
 * abbreviates gets no chip.
 */
-const CourtBadge = ({ abbreviation, className, weight }) => /* @__PURE__ */ jsx("span", {
-	className: cn(COURT_BADGE_BASE_CLASS, WEIGHT_CLASS[weight], className),
+const CourtBadge = ({ abbreviation, className, size = "default", weight }) => /* @__PURE__ */ jsx("span", {
+	className: cn(COURT_BADGE_BASE_CLASS, SIZE_CLASS[size], WEIGHT_CLASS[weight], className),
 	"data-slot": "court-badge",
 	dir: "ltr",
 	children: abbreviation

package/dist/components/date-picker-popover.d.ts

@@ -41,6 +41,16 @@ type DatePickerPopoverProps = {
   placeholderLabel?: string;
   clearLabel?: string;
   defaultOpen?: boolean;
+  open?: boolean;
+  triggerRef?: React.Ref<HTMLButtonElement> | undefined;
+  /** Keep the trigger focused when opening a following range bound. */
+  focusTriggerOnOpen?: boolean;
+  /** Enables direct date entry, with host-localized validation. */
+  dateInputLabel?: string;
+  outOfRangeLabel?: string;
+  noFuture?: boolean;
+  /** Host-owned calendar date; defaults to the browser timezone. */
+  getToday?: () => string;
   onOpenChange?: (open: boolean) => void;
   /** Label for the "go to today" button. Auto-localized from the locale when omitted. */
   todayLabel?: string;
@@ -57,8 +67,8 @@ type DatePickerPopoverProps = {
   /** Label of the time input in `date-time` mode. */
   timeLabel?: string;
   /** Inclusive `YYYY-MM-DD` bounds; in `date-time` mode they bound the day. */
-  minDate?: string;
-  maxDate?: string;
+  minDate?: string | undefined;
+  maxDate?: string | undefined;
   isDateDisabled?: (date: string) => boolean;
   layer?: OverlayLayer;
 };

package/dist/components/date-picker-popover.js

@@ -3,6 +3,7 @@ import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
+import { Input } from "./input.js";
 import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
 import { DATE_PICKER_MODE, formatDateTimeValue, getHourOptions, getMinuteOptions, getTimeFieldNames, joinPickerTime, localDateFromTimestamp, millisecondsUntilNextLocalDate, parseDateTimeValue, resolveCalendarViewMonth, shiftCalendarDate, splitPickerTime } from "./date-picker-popover.logic.js";
@@ -10,7 +11,7 @@ import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popov
 import { Select, SelectContent as SelectPopup, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { panic } from "better-result";
+import { Result, panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.tsx
 const toISODate = (date) => date.toString();
@@ -57,7 +58,7 @@ const subscribeToLocalDate = (onStoreChange) => {
 		if (localDateListeners.size === 0) stopLocalDateSubscription();
 	};
 };
-const useHydrationSafeToday = () => useSyncExternalStore(subscribeToLocalDate, getLocalToday, () => HYDRATION_DATE);
+const useHydrationSafeToday = (getToday) => useSyncExternalStore(subscribeToLocalDate, getToday, () => HYDRATION_DATE);
 const useHydrationSafeBrowserLocale = () => useSyncExternalStore(noopSubscribe, () => navigator.language || HYDRATION_LOCALE, () => HYDRATION_LOCALE);
 const getFirstDayOfWeek = (locale) => {
 	const info = getLocaleWeekInfo(locale);
@@ -252,7 +253,7 @@ const PICKER_SIZE_CLASS_NAMES = {
 	}
 };
 const DatePickerPopoverContent = (props) => {
-	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
+	const { id, labelledBy, className, disabled, hideClear, size = "compact", variant = "inline", mode = DATE_PICKER_MODE.date, value: rawValue, onChange, locale, isOverdue = false, showIcon = true, placeholderLabel, clearLabel = "Clear date", defaultOpen = false, open: controlledOpen, triggerRef, focusTriggerOnOpen = false, dateInputLabel, outOfRangeLabel, onOpenChange, todayLabel: todayLabelProp, overdueLabel, minDate, maxDate, isDateDisabled, layer = "default", today } = props;
 	const selection = resolveSelection(mode, rawValue);
 	const value = selection.date;
 	const labels = resolvePopupLabels(props);
@@ -294,14 +295,19 @@ const DatePickerPopoverContent = (props) => {
 		maxDate,
 		isDateDisabled
 	]);
+	const dateDraft = useDatePickerDraft({
+		value,
+		isDayDisabled,
+		onChange
+	});
 	const displayLabel = formatSelection(locale, selection) ?? placeholderLabel ?? "—";
 	const selectDay = (date) => {
 		switch (selection.mode) {
 			case DATE_PICKER_MODE.date:
-				onChange(date);
+				dateDraft.apply(date);
 				return;
 			case DATE_PICKER_MODE.dateTime:
-				onChange(formatDateTimeValue({
+				dateDraft.apply(formatDateTimeValue({
 					date,
 					time: selection.time ?? "00:00"
 				}));
@@ -311,7 +317,7 @@ const DatePickerPopoverContent = (props) => {
 	};
 	const handleTimeChange = (clock) => {
 		if (value === "") return;
-		onChange(formatDateTimeValue({
+		dateDraft.apply(formatDateTimeValue({
 			date: value,
 			time: joinPickerTime(clock)
 		}));
@@ -443,6 +449,7 @@ const DatePickerPopoverContent = (props) => {
 	})();
 	return /* @__PURE__ */ jsxs(Popover, {
 		defaultOpen,
+		open: controlledOpen,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
 			disabled,
@@ -451,6 +458,7 @@ const DatePickerPopoverContent = (props) => {
 				"aria-labelledby": labelledBy ? `${labelledBy} ${displayValueId}` : void 0,
 				className: cn(TRIGGER_VARIANT_CLASS_NAMES[variant], triggerToneClassName, className),
 				id,
+				ref: triggerRef,
 				type: "button"
 			}),
 			children: [
@@ -466,7 +474,8 @@ const DatePickerPopoverContent = (props) => {
 				})
 			]
 		}), /* @__PURE__ */ jsx(PopoverPopup, {
-			initialFocus: () => gridRef.current?.querySelector(`[data-date="${value || today}"]`) ?? gridRef.current,
+			onBlur: dateDraft.handleBlur,
+			initialFocus: focusTriggerOnOpen ? false : () => gridRef.current?.querySelector(`[data-date="${value || today}"]`) ?? gridRef.current,
 			className: "data-starting-style:scale-100",
 			layer,
 			padding: "sm",
@@ -516,6 +525,7 @@ const DatePickerPopoverContent = (props) => {
 								onClick: () => {
 									if (!isUnavailable) selectDay(day.date);
 								},
+								onFocus: () => setFocusedDate(day.date),
 								role: "gridcell",
 								tabIndex: isFocused ? 0 : -1,
 								type: "button",
@@ -546,11 +556,21 @@ const DatePickerPopoverContent = (props) => {
 						onChange: handleTimeChange,
 						time: selection.time
 					}),
+					/* @__PURE__ */ jsx(TypedDateField, {
+						mode: selection.mode,
+						label: dateInputLabel,
+						value: dateDraft.value,
+						invalid: dateDraft.invalid,
+						errorLabel: outOfRangeLabel,
+						onDraftChange: dateDraft.edit,
+						onCommit: dateDraft.submit
+					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "mt-1 flex items-center gap-1 border-t pt-1",
 						children: [/* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
 							onClick: () => {
+								dateDraft.discard();
 								const todayDate = Temporal.PlainDate.from(today);
 								setViewMonthOverride({
 									month: todayDate.month - 1,
@@ -563,7 +583,7 @@ const DatePickerPopoverContent = (props) => {
 							children: todayLabel
 						}), value && !hideClear && /* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
-							onClick: () => onChange(null),
+							onClick: () => dateDraft.apply(null),
 							size: "xs",
 							variant: "ghost",
 							children: clearLabel
@@ -576,10 +596,12 @@ const DatePickerPopoverContent = (props) => {
 };
 const DatePickerPopover = (props) => {
 	const browserLocale = useHydrationSafeBrowserLocale();
-	const today = useHydrationSafeToday();
+	const today = useHydrationSafeToday(props.getToday ?? getLocalToday);
 	const locale = props.locale ?? browserLocale;
+	const maxDate = props.noFuture && (!props.maxDate || props.maxDate > today) ? today : props.maxDate;
 	return /* @__PURE__ */ jsx(DatePickerPopoverContent, {
 		...props,
+		maxDate,
 		locale,
 		today
 	});
@@ -738,5 +760,79 @@ const YearGrid = ({ decadeBase, currentYear, cellClassName, onSelect, today }) =
 		}, row[0]))
 	});
 };
+const useDatePickerDraft = ({ value, isDayDisabled, onChange }) => {
+	const [draft, setDraft] = useState(null);
+	const commitStatus = useRef("consumed");
+	const hasDraft = draft?.baseValue === value;
+	const inputValue = hasDraft ? draft.value : value;
+	const parsed = Result.try(() => Temporal.PlainDate.from(inputValue));
+	const invalid = hasDraft && inputValue !== "" && (parsed.isErr() || parsed.value.toString() !== inputValue || isDayDisabled(inputValue));
+	const discard = () => {
+		commitStatus.current = "consumed";
+		setDraft(null);
+	};
+	const apply = (next) => {
+		discard();
+		onChange(next);
+	};
+	const commit = () => {
+		if (commitStatus.current !== "pending" || invalid || inputValue === value) return;
+		apply(inputValue || null);
+	};
+	return {
+		value: inputValue,
+		invalid,
+		edit: (next) => {
+			commitStatus.current = "pending";
+			setDraft({
+				baseValue: value,
+				value: next
+			});
+		},
+		discard,
+		apply,
+		submit: () => {
+			if (!invalid) apply(inputValue || null);
+		},
+		handleBlur: (event) => {
+			if (event.currentTarget.contains(event.relatedTarget)) return;
+			commit();
+		}
+	};
+};
+const TypedDateField = ({ mode, label, value, invalid, errorLabel = "Choose a date within the allowed range.", onDraftChange, onCommit }) => {
+	const id = useId();
+	if (!label || mode !== DATE_PICKER_MODE.date) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 flex flex-col gap-1",
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: "text-xs",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id,
+				value,
+				placeholder: "YYYY-MM-DD",
+				dir: "ltr",
+				"aria-invalid": invalid,
+				"aria-describedby": invalid ? `${id}-error` : void 0,
+				onChange: (event) => onDraftChange(event.currentTarget.value),
+				onKeyDown: (event) => {
+					if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+					event.preventDefault();
+					onCommit();
+				}
+			}),
+			invalid && /* @__PURE__ */ jsx("p", {
+				id: `${id}-error`,
+				role: "alert",
+				className: "text-destructive text-xs",
+				children: errorLabel
+			})
+		]
+	});
+};
 //#endregion
 export { DatePickerPopover };

package/dist/components/date-range-filter.d.ts

@@ -0,0 +1,14 @@
+import { DatePickerPopoverProps } from "./date-picker-popover.js";
+//#region src/components/date-range-filter.d.ts
+type DateRangeFilterProps = Omit<DatePickerPopoverProps, "value" | "onChange" | "minDate" | "open" | "defaultOpen" | "onOpenChange" | "triggerRef" | "focusTriggerOnOpen" | "id" | "labelledBy" | "mode"> & {
+  from: string | null;
+  to: string | null;
+  onFromChange: (value: string | null) => void;
+  onToChange: (value: string | null) => void;
+  fromLabel: string;
+  toLabel: string;
+};
+/** Both calendar bounds and the focus handoff belong to the range. */
+declare const DateRangeFilter: ({ from, to, onFromChange, onToChange, fromLabel, toLabel, className, maxDate, ...pickerProps }: DateRangeFilterProps) => import("react").JSX.Element;
+//#endregion
+export { DateRangeFilter, type DateRangeFilterProps };