atlas-react-kit 0.9.4 → 0.11.0

package/dist/form/date-time-picker-field.d.ts

@@ -1,3 +1,4 @@
+import type { DatePickerCalendarProps } from "../date-picker.js";
 import type { FieldMetaState } from "./field-error.js";
 type Props = {
     value: Date | null;
@@ -10,7 +11,13 @@ type Props = {
     timeStep?: number;
     /** Forwarded to the date-time picker trigger. */
     className?: string;
+    /** Classes for the field wrapper (label, trigger, and error). */
+    fieldClassName?: string;
+    /** Forwarded to the date-time picker popover. */
+    contentClassName?: string;
+    /** Day Picker options forwarded to the calendar (disabled days, etc.). */
+    calendarProps?: DatePickerCalendarProps;
 };
 /** Date-time picker with built-in field error text and invalid styling. */
-export declare function FormDateTimePickerField({ value, onValueChange, label, meta, placeholder, disabled, timeStep, className, }: Props): import("react").JSX.Element;
+export declare function FormDateTimePickerField({ onValueChange, label, meta, fieldClassName, ...picker }: Props): import("react").JSX.Element;
 export {};

package/dist/form/date-time-picker-field.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { DateTimePickerButton } from "../date-time-picker.js";
-import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
+import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
 /** Date-time picker with built-in field error text and invalid styling. */
-export function FormDateTimePickerField({ value, onValueChange, label, meta, placeholder, disabled, timeStep, className, }) {
+export function FormDateTimePickerField({ onValueChange, label, meta, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta);
     const id = useId();
-    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, children: _jsx(DateTimePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, timeStep: timeStep, className: className, "aria-invalid": invalidWhen(errorText) }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, className: fieldClassName, children: _jsx(DateTimePickerButton, { ...picker, id: id, onChange: onValueChange, ...pickerFieldAria(id, errorText) }) }));
 }

package/dist/form/feedback-field.d.ts

@@ -1,4 +1,5 @@
 /** Form-level submit or mutation error (not tied to a single field). */
-export declare function FormFeedbackField({ message }: {
+export declare function FormFeedbackField({ message, className, }: {
     message: string | null;
+    className?: string;
 }): import("react").JSX.Element | null;

package/dist/form/feedback-field.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils.js";
 /** Form-level submit or mutation error (not tied to a single field). */
-export function FormFeedbackField({ message }) {
+export function FormFeedbackField({ message, className, }) {
     if (!message)
         return null;
-    return (_jsx("p", { className: "text-sm text-destructive", role: "alert", children: message }));
+    return (_jsx("p", { "data-slot": "form-feedback", className: cn("text-sm text-destructive", className), role: "alert", children: message }));
 }

package/dist/form/field-error.d.ts

@@ -6,7 +6,10 @@ export type FieldMetaState = {
 };
 /** First TanStack Form error message for a field, if any. */
 export declare function getFieldErrorMessage(message: FieldErrorMessage): string | undefined;
-export declare function FieldError({ message, text, }: {
+export declare function FieldError({ id, message, text, className, }: {
+    /** Point the control's `aria-describedby` here so the error is read with it. */
+    id?: string;
     message?: FieldErrorMessage;
     text?: string;
+    className?: string;
 }): import("react").JSX.Element | null;

package/dist/form/field-error.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../utils.js";
 /** First TanStack Form error message for a field, if any. */
 export function getFieldErrorMessage(message) {
     if (typeof message === "string")
         return message;
     return message?.message;
 }
-export function FieldError({ message, text, }) {
+export function FieldError({ id, message, text, className, }) {
     const resolved = text ?? getFieldErrorMessage(message);
     if (!resolved)
         return null;
-    return (_jsx("p", { className: "text-xs text-destructive", role: "alert", children: resolved }));
+    return (_jsx("p", { id: id, "data-slot": "form-field-error", className: cn("text-xs text-destructive", className), role: "alert", children: resolved }));
 }

package/dist/form/field-shell.d.ts

@@ -8,14 +8,38 @@ import { type FieldMetaState } from "./field-error.js";
 export declare function metaErrorText(meta: FieldMetaState | undefined): string | undefined;
 /** `aria-invalid` for the control: `true` while there is error text. */
 export declare function invalidWhen(errorText: string | undefined): true | undefined;
+/** Id of the label `FormFieldShell` renders for control `id`. */
+export declare function labelIdFor(id: string): string;
+/** Id of the error text `FormFieldShell` renders for control `id`. */
+export declare function errorIdFor(id: string): string;
+/**
+ * `aria-describedby` for the control: the given hint ids, plus the error
+ * text while there is one, or `undefined` when there is nothing to read.
+ */
+export declare function describedBy(id: string, errorText: string | undefined, ...hintIds: Array<string | undefined>): string | undefined;
+/**
+ * Trigger ARIA for the date and date-time fields: invalid while there is
+ * error text, named "label, value" (a `<label for>` alone would hide the
+ * picked value), and described by the error.
+ */
+export declare function pickerFieldAria(id: string, errorText: string | undefined): {
+    "aria-invalid": boolean | undefined;
+    "aria-labelledby": string;
+    "aria-describedby": string | undefined;
+};
 /**
  * Label, control, and error text stacked with the kit's field spacing.
  * `labelAction` sits on the label's row (the Markdown field's mode toggle).
+ * Set `labelFor` to false when the control is not rendered (Markdown
+ * preview), so the label does not point at a missing element.
+ * `className` styles the wrapper (`data-slot="form-field"`), e.g. a width.
  */
-export declare function FormFieldShell({ id, label, labelAction, errorText, children, }: {
+export declare function FormFieldShell({ id, label, labelAction, errorText, labelFor, className, children, }: {
     id: string;
     label: string;
     labelAction?: ReactNode;
     errorText: string | undefined;
+    labelFor?: boolean;
+    className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/form/field-shell.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pickerValueId } from "../internal/form-control.js";
 import { Label } from "../label.js";
+import { cn } from "../utils.js";
 import { FieldError, getFieldErrorMessage, } from "./field-error.js";
 /**
  * Not a public entry. The layout and error wiring every `form/*` field
@@ -13,11 +15,42 @@ export function metaErrorText(meta) {
 export function invalidWhen(errorText) {
     return errorText ? true : undefined;
 }
+/** Id of the label `FormFieldShell` renders for control `id`. */
+export function labelIdFor(id) {
+    return `${id}-label`;
+}
+/** Id of the error text `FormFieldShell` renders for control `id`. */
+export function errorIdFor(id) {
+    return `${id}-error`;
+}
+/**
+ * `aria-describedby` for the control: the given hint ids, plus the error
+ * text while there is one, or `undefined` when there is nothing to read.
+ */
+export function describedBy(id, errorText, ...hintIds) {
+    const ids = [...hintIds, errorText ? errorIdFor(id) : undefined].filter(Boolean);
+    return ids.length ? ids.join(" ") : undefined;
+}
+/**
+ * Trigger ARIA for the date and date-time fields: invalid while there is
+ * error text, named "label, value" (a `<label for>` alone would hide the
+ * picked value), and described by the error.
+ */
+export function pickerFieldAria(id, errorText) {
+    return {
+        "aria-invalid": invalidWhen(errorText),
+        "aria-labelledby": `${labelIdFor(id)} ${pickerValueId(id)}`,
+        "aria-describedby": describedBy(id, errorText),
+    };
+}
 /**
  * Label, control, and error text stacked with the kit's field spacing.
  * `labelAction` sits on the label's row (the Markdown field's mode toggle).
+ * Set `labelFor` to false when the control is not rendered (Markdown
+ * preview), so the label does not point at a missing element.
+ * `className` styles the wrapper (`data-slot="form-field"`), e.g. a width.
  */
-export function FormFieldShell({ id, label, labelAction, errorText, children, }) {
-    const labelNode = _jsx(Label, { htmlFor: id, children: label });
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [labelAction ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [labelNode, labelAction] })) : (labelNode), children, _jsx(FieldError, { text: errorText })] }));
+export function FormFieldShell({ id, label, labelAction, errorText, labelFor = true, className, children, }) {
+    const labelNode = (_jsx(Label, { id: labelIdFor(id), htmlFor: labelFor ? id : undefined, children: label }));
+    return (_jsxs("div", { "data-slot": "form-field", className: cn("flex flex-col gap-1.5", className), children: [labelAction ? (_jsxs("div", { "data-slot": "form-field-header", className: "flex items-center justify-between gap-2", children: [labelNode, labelAction] })) : (labelNode), children, _jsx(FieldError, { id: errorIdFor(id), text: errorText })] }));
 }

package/dist/form/markdown-field.d.ts

@@ -3,7 +3,7 @@ import type { TextFieldApi } from "./text-field.js";
  * GFM body field: Write is a textarea, Preview is the sanitized Markdown
  * renderer. String-in/string-out — not a WYSIWYG document model.
  */
-export declare function FormMarkdownField({ field, id, label, placeholder, rows, showError, }: {
+export declare function FormMarkdownField({ field, id, label, placeholder, rows, showError, className, fieldClassName, previewClassName, }: {
     field: TextFieldApi;
     /**
      * Control id the label points at. Defaults to `field.name`; pass a unique
@@ -14,4 +14,10 @@ export declare function FormMarkdownField({ field, id, label, placeholder, rows,
     placeholder?: string;
     rows?: number;
     showError?: boolean;
+    /** Forwarded to the Write textarea. */
+    className?: string;
+    /** Classes for the field wrapper (label row, body, and error). */
+    fieldClassName?: string;
+    /** Classes for the Preview surface, e.g. a taller `min-h-40`. */
+    previewClassName?: string;
 }): import("react").JSX.Element;

package/dist/form/markdown-field.js

@@ -1,17 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Markdown } from "../markdown.js";
+import { lazy, Suspense, useState } from "react";
+import { Spinner } from "../spinner.js";
 import { Textarea } from "../textarea.js";
 import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
 import { fieldSurface } from "../internal/styles.js";
 import { cn, onInputChange } from "../utils.js";
-import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
+import { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+// The renderer (react-markdown + remark-gfm) is fetched the first time
+// Preview is shown or hovered, so a form in Write mode stays light.
+const loadMarkdown = () => import("../markdown.js");
+const preloadMarkdown = () => void loadMarkdown();
+const Markdown = lazy(() => loadMarkdown().then((module) => ({ default: module.Markdown })));
 /**
  * GFM body field: Write is a textarea, Preview is the sanitized Markdown
  * renderer. String-in/string-out — not a WYSIWYG document model.
  */
-export function FormMarkdownField({ field, id = field.name, label, placeholder = "Markdown supported", rows = 5, showError = true, }) {
+export function FormMarkdownField({ field, id = field.name, label, placeholder = "Markdown supported", rows = 5, showError = true, className, fieldClassName, previewClassName, }) {
     const [mode, setMode] = useState("write");
     const onChange = onInputChange(field.handleChange);
     const errorText = showError ? metaErrorText(field.state.meta) : undefined;
@@ -20,5 +25,5 @@ export function FormMarkdownField({ field, id = field.name, label, placeholder =
         if (value === "write" || value === "preview")
             setMode(value);
     }
-    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, labelAction: _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", children: "Preview" })] }), children: mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, "aria-invalid": invalidWhen(errorText) })) : (_jsx("div", { className: cn(fieldSurface, "min-h-16"), "aria-live": "polite", children: trimmed ? (_jsx(Markdown, { content: trimmed })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, labelFor: mode === "write", className: fieldClassName, labelAction: _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", onPointerEnter: preloadMarkdown, onFocus: preloadMarkdown, children: "Preview" })] }), children: mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, className: className, "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText) })) : (_jsx("div", { "data-slot": "form-markdown-preview", className: cn(fieldSurface, "min-h-16", previewClassName), "aria-live": "polite", children: trimmed ? (_jsx(Suspense, { fallback: _jsx(Spinner, { "aria-label": "Loading preview" }), children: _jsx(Markdown, { content: trimmed }) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })) }));
 }

package/dist/form/select-field.d.ts

@@ -6,8 +6,14 @@ type Props = {
     label: string;
     onValueChange: (value: string) => void;
     placeholder?: string;
+    /** Forwarded to the select trigger. */
+    className?: string;
+    /** Classes for the field wrapper (label, trigger, and error). */
+    fieldClassName?: string;
+    /** Forwarded to the select's option list (`SelectContent`). */
+    contentClassName?: string;
     children: ReactNode;
 };
 /** Select control with built-in field error text and invalid styling. */
-export declare function FormSelectField({ value, meta, label, onValueChange, placeholder, children, }: Props): import("react").JSX.Element;
+export declare function FormSelectField({ value, meta, label, onValueChange, placeholder, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
 export {};

package/dist/form/select-field.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Select, SelectContent, SelectTrigger, SelectValue } from "../select.js";
-import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
+import { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
 /** Select control with built-in field error text and invalid styling. */
-export function FormSelectField({ value, meta, label, onValueChange, placeholder, children, }) {
+export function FormSelectField({ value, meta, label, onValueChange, placeholder, className, fieldClassName, contentClassName, children, }) {
     const errorText = metaErrorText(meta);
     const id = useId();
-    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, children: _jsxs(Select, { value: value, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { id: id, "aria-invalid": invalidWhen(errorText), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: children })] }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, className: fieldClassName, children: _jsxs(Select, { value: value, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { id: id, className: className, "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: contentClassName, children: children })] }) }));
 }

package/dist/form/text-field.d.ts

@@ -8,7 +8,7 @@ export type TextFieldApi = {
     handleChange: (value: string) => void;
     handleBlur: () => void;
 };
-export declare function FormTextField({ field, id, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, autoComplete, required, minLength, }: {
+export declare function FormTextField({ field, id, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, autoComplete, required, minLength, className, fieldClassName, }: {
     field: TextFieldApi;
     /**
      * Control id the label points at. Defaults to `field.name`; pass a unique
@@ -30,4 +30,8 @@ export declare function FormTextField({ field, id, label, placeholder, descripti
     autoComplete?: string;
     required?: boolean;
     minLength?: number;
+    /** Forwarded to the input or textarea. */
+    className?: string;
+    /** Classes for the field wrapper (label, hint, control, and error). */
+    fieldClassName?: string;
 }): import("react").JSX.Element;

package/dist/form/text-field.js

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "../input.js";
 import { Textarea } from "../textarea.js";
 import { onInputChange } from "../utils.js";
-import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
-export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError = true, autoComplete, required, minLength, }) {
+import { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError = true, autoComplete, required, minLength, className, fieldClassName, }) {
     const onChange = onInputChange(field.handleChange);
     const errorText = showError ? metaErrorText(field.state.meta) : undefined;
+    const descriptionId = description ? `${id}-description` : undefined;
     const controlProps = {
         id,
         value: field.state.value,
@@ -16,7 +17,9 @@ export function FormTextField({ field, id = field.name, label, placeholder, desc
         autoComplete,
         required,
         minLength,
+        className,
         "aria-invalid": invalidWhen(errorText),
+        "aria-describedby": describedBy(id, errorText, descriptionId),
     };
-    return (_jsxs(FormFieldShell, { id: id, label: label, errorText: errorText, children: [description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: description })) : null, multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus }))] }));
+    return (_jsxs(FormFieldShell, { id: id, label: label, errorText: errorText, className: fieldClassName, children: [description ? (_jsx("p", { id: descriptionId, "data-slot": "form-field-description", className: "text-xs text-muted-foreground", children: description })) : null, multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus }))] }));
 }

package/dist/info-tip.d.ts

@@ -14,14 +14,17 @@ export type InfoTipProps = {
     align?: React.ComponentProps<typeof PopoverContent>["align"];
     badge?: React.ReactNode;
     icon?: React.ReactNode;
+    /** Classes for the trigger button. */
     className?: string;
-};
+    /** Classes for the panel, e.g. its width. Defaults to `w-72`. */
+    contentClassName?: string;
+} & Omit<React.ComponentProps<"button">, "title" | "children" | "type" | "onMouseEnter" | "onMouseLeave" | "onClick">;
 /**
  * Longer help than a Tooltip: a Popover with a 20px glyph and a 44px hit
  * area. Hover opens only on a fine pointer; click, tap, and keyboard always
  * toggle it. Not a glossary or "coming soon" chip — pass that copy in.
  */
-declare function InfoTip({ label, title, description, children, layout, side, align, badge, icon, className, }: InfoTipProps): React.JSX.Element;
+declare function InfoTip({ label, title, description, children, layout, side, align, badge, icon, className, contentClassName, ...props }: InfoTipProps): React.JSX.Element;
 /** InfoTip that sits in a line of text without stretching the line box. */
 declare function InlineTip(props: Omit<InfoTipProps, "layout">): React.JSX.Element;
 export { InfoTip, InlineTip };

package/dist/info-tip.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CircleHelpIcon } from "lucide-react";
 import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover.js";
-import { focusRing } from "./internal/styles.js";
+import { focusRing, hitArea44 } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * True when a mouse can hover. Touch and coarse pointers must use click;
@@ -17,10 +17,13 @@ function canHoverOpen() {
  * area. Hover opens only on a fine pointer; click, tap, and keyboard always
  * toggle it. Not a glossary or "coming soon" chip — pass that copy in.
  */
-function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, }) {
+function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, contentClassName, ...props }) {
     const [open, setOpen] = React.useState(false);
     const closeTimer = React.useRef(null);
-    const hoverOpened = React.useRef(false);
+    // How the panel last opened. A hover-open leaves focus where it was and
+    // closes when the pointer leaves; a click (or keyboard) open pins it.
+    const openedBy = React.useRef(null);
+    const titleId = React.useId();
     const inline = layout === "inline";
     const cancelClose = () => {
         if (closeTimer.current !== null) {
@@ -32,11 +35,13 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         if (!canHoverOpen())
             return;
         cancelClose();
-        hoverOpened.current = true;
+        if (open)
+            return;
+        openedBy.current = "hover";
         setOpen(true);
     };
     const closeFromHover = () => {
-        if (!canHoverOpen() || !hoverOpened.current)
+        if (!canHoverOpen() || openedBy.current !== "hover")
             return;
         cancelClose();
         // Leave a beat so the pointer can travel from the glyph into the panel.
@@ -44,18 +49,31 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
     };
     React.useEffect(() => () => cancelClose(), []);
     return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
-            // Hover already opened the panel; the following click should pin
-            // it, not toggle it closed (Playwright and real mice both hover
-            // before they click).
-            if (hoverOpened.current && open && !next) {
-                hoverOpened.current = false;
-                return;
-            }
-            hoverOpened.current = false;
+            // Escape and outside clicks close however the panel opened. Keep
+            // `openedBy` on close so onCloseAutoFocus can read it.
+            cancelClose();
+            if (next)
+                openedBy.current = "click";
             setOpen(next);
-        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn(focusRing, "relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground hover:text-selected-foreground focus-visible:text-selected-foreground", inline
-                        ? "size-5 align-middle after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2"
-                        : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: icon ?? (_jsx(CircleHelpIcon, { className: "size-5", "data-icon": "info-tip", "aria-hidden": true })) }) }), _jsxs(PopoverContent, { side: side, align: align, className: "w-72", onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: [_jsxs(PopoverHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [title ? _jsx(PopoverTitle, { children: title }) : null, badge] }), description ? (_jsx(PopoverDescription, { children: description })) : null] }), children] })] }));
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ...props, type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn(focusRing, "relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground hover:text-selected-foreground focus-visible:text-selected-foreground", inline ? cn("size-5 align-middle", hitArea44) : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, onClick: (event) => {
+                        // Hover already opened the panel; this click pins it instead of
+                        // toggling it closed (Playwright and real mice both hover before
+                        // they click). Preventing default skips Radix's toggle.
+                        if (open && openedBy.current === "hover") {
+                            event.preventDefault();
+                            cancelClose();
+                            openedBy.current = "click";
+                        }
+                    }, children: icon ?? (_jsx(CircleHelpIcon, { className: "size-5", "data-icon": "info-tip", "aria-hidden": true })) }) }), _jsxs(PopoverContent, { side: side, align: align, className: cn("w-72", contentClassName), "aria-labelledby": title ? titleId : undefined, "aria-label": title ? undefined : label, 
+                // A pointer passing over the glyph must not take focus from where
+                // the user is typing, nor hand it to the trigger on close.
+                onOpenAutoFocus: (event) => {
+                    if (openedBy.current === "hover")
+                        event.preventDefault();
+                }, onCloseAutoFocus: (event) => {
+                    if (openedBy.current === "hover")
+                        event.preventDefault();
+                }, onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: [_jsxs(PopoverHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [title ? _jsx(PopoverTitle, { id: titleId, children: title }) : null, badge] }), description ? (_jsx(PopoverDescription, { children: description })) : null] }), children] })] }));
 }
 /** InfoTip that sits in a line of text without stretching the line box. */
 function InlineTip(props) {

package/dist/internal/form-control.d.ts

@@ -16,3 +16,8 @@ export declare const pickerTriggerClassName = "h-10 w-full border-input bg-backg
 export declare const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */
 export declare const PICKER_COLLISION_PADDING = 16;
+/**
+ * Id of a picker trigger's value text. A form field lists it after the label
+ * id in `aria-labelledby` so the trigger reads "label, value".
+ */
+export declare function pickerValueId(id: string): string;

package/dist/internal/form-control.js

@@ -16,3 +16,10 @@ export const pickerTriggerClassName = `${formControlTriggerClassName} justify-st
 export const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */
 export const PICKER_COLLISION_PADDING = 16;
+/**
+ * Id of a picker trigger's value text. A form field lists it after the label
+ * id in `aria-labelledby` so the trigger reads "label, value".
+ */
+export function pickerValueId(id) {
+    return `${id}-value`;
+}

package/dist/internal/listbox-navigation.d.ts

@@ -12,3 +12,35 @@ export declare function listboxOptionId(listId: string, index: number): string;
  * so the ref is stable without `useCallback`.
  */
 export declare function scrollOptionIntoView(node: HTMLElement | null): void;
+/**
+ * True while an IME is composing (Japanese, Chinese, Korean input). Enter
+ * then commits the composition and must not select an option. `keyCode`
+ * 229 covers Safari, which ends composition before the keydown.
+ */
+export declare function isComposingKey(event: {
+    nativeEvent: KeyboardEvent;
+    keyCode: number;
+}): boolean;
+/**
+ * Shared keydown for a search input that drives a listbox: navigation keys
+ * move the highlight, Enter picks the highlighted index. Returns `true` when
+ * the key is handled (or an IME is composing, when every key belongs to the
+ * IME), so the caller can stop; `false` leaves the key to the caller (for
+ * example SearchPicker's Escape).
+ */
+export declare function handleListboxKey(event: {
+    key: string;
+    keyCode: number;
+    nativeEvent: KeyboardEvent;
+    preventDefault: () => void;
+}, { highlight, length, setHighlight, onEnter, }: {
+    highlight: number;
+    length: number;
+    setHighlight: (index: number) => void;
+    onEnter: (index: number) => void;
+}): boolean;
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
+ * Combobox and SearchPicker (which re-exports it).
+ */
+export declare function foldSearchText(value: string): string;

package/dist/internal/listbox-navigation.js

@@ -35,3 +35,41 @@ export function listboxOptionId(listId, index) {
 export function scrollOptionIntoView(node) {
     node?.scrollIntoView({ block: "nearest" });
 }
+/**
+ * True while an IME is composing (Japanese, Chinese, Korean input). Enter
+ * then commits the composition and must not select an option. `keyCode`
+ * 229 covers Safari, which ends composition before the keydown.
+ */
+export function isComposingKey(event) {
+    return event.nativeEvent.isComposing || event.keyCode === 229;
+}
+/**
+ * Shared keydown for a search input that drives a listbox: navigation keys
+ * move the highlight, Enter picks the highlighted index. Returns `true` when
+ * the key is handled (or an IME is composing, when every key belongs to the
+ * IME), so the caller can stop; `false` leaves the key to the caller (for
+ * example SearchPicker's Escape).
+ */
+export function handleListboxKey(event, { highlight, length, setHighlight, onEnter, }) {
+    if (isComposingKey(event))
+        return true;
+    const next = moveListboxHighlight(event.key, highlight, length);
+    if (next !== undefined) {
+        event.preventDefault();
+        setHighlight(next);
+        return true;
+    }
+    if (event.key === "Enter") {
+        event.preventDefault();
+        onEnter(highlight);
+        return true;
+    }
+    return false;
+}
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
+ * Combobox and SearchPicker (which re-exports it).
+ */
+export function foldSearchText(value) {
+    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}

package/dist/internal/listbox-option.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+type ListboxOptionProps = Omit<React.ComponentProps<"button">, "id" | "role" | "type" | "tabIndex" | "aria-selected"> & {
+    /** The listbox id; the option id derives from it for aria-activedescendant. */
+    listId: string;
+    index: number;
+    /** Keyboard or pointer highlight (tracked in state, not DOM focus). */
+    active: boolean;
+    selected: boolean;
+};
+/**
+ * One option of a search-driven listbox (Combobox, SearchPicker): a
+ * non-focusable button in a presentational `li`, highlighted by state and
+ * scrolled into view while active. Pass `data-slot`, handlers, and the
+ * component's right padding and indicator.
+ */
+export declare function ListboxOption({ listId, index, active, selected, className, ...props }: ListboxOptionProps): React.JSX.Element;
+/**
+ * The "No results" status. It sits outside the listbox, which may own only
+ * options, and stays mounted (sr-only when not empty) so screen readers
+ * announce the empty state as the query changes.
+ */
+export declare function ListboxEmptyStatus({ empty, className, children, ...props }: Omit<React.ComponentProps<"div">, "role"> & {
+    empty: boolean;
+}): React.JSX.Element;
+export {};

package/dist/internal/listbox-option.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../utils.js";
+import { listboxOptionId, scrollOptionIntoView } from "./listbox-navigation.js";
+import { optionRow } from "./overlay-styles.js";
+import { listboxEmpty, optionState } from "./styles.js";
+/**
+ * One option of a search-driven listbox (Combobox, SearchPicker): a
+ * non-focusable button in a presentational `li`, highlighted by state and
+ * scrolled into view while active. Pass `data-slot`, handlers, and the
+ * component's right padding and indicator.
+ */
+export function ListboxOption({ listId, index, active, selected, className, ...props }) {
+    return (_jsx("li", { role: "none", children: _jsx("button", { ref: active ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", tabIndex: -1, "aria-selected": selected, className: cn(optionRow, selected && optionState.selected, active && optionState.active, className), ...props }) }));
+}
+/**
+ * The "No results" status. It sits outside the listbox, which may own only
+ * options, and stays mounted (sr-only when not empty) so screen readers
+ * announce the empty state as the query changes.
+ */
+export function ListboxEmptyStatus({ empty, className, children, ...props }) {
+    return (_jsx("div", { role: "status", className: empty ? cn(listboxEmpty, className) : "sr-only", ...props, children: empty ? children : null }));
+}

package/dist/internal/math.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Bound `n` to `[lo, hi]`. NaN stays NaN, so callers that accept missing
+ * data check `Number.isFinite` first and pick their own empty value.
+ */
+export declare function clamp(n: number, lo: number, hi: number): number;

package/dist/internal/math.js

@@ -0,0 +1,7 @@
+/**
+ * Bound `n` to `[lo, hi]`. NaN stays NaN, so callers that accept missing
+ * data check `Number.isFinite` first and pick their own empty value.
+ */
+export function clamp(n, lo, hi) {
+    return Math.min(hi, Math.max(lo, n));
+}

package/dist/internal/overlay-styles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Classes shared by the kit's floating surfaces (Popover, DropdownMenu,
+ * Select, Dialog, Tooltip) and the option rows inside them. Components add
+ * these with `cn()` instead of retyping them, so the panels and rows look
+ * and move the same everywhere. Tailwind only generates class names it
+ * finds as literals, so every class appears here in full.
+ */
+/** The panel: square corners, popover colors, shadow, and a hairline ring. */
+export declare const overlaySurface = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10";
+/** Slide in from the trigger, on whichever side Radix placed the panel. */
+export declare const overlaySideSlide = "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+/**
+ * Fade on open and close. `data-open` and `data-closed` (theme.css) match
+ * Radix's `data-state="open"` and `"closed"`.
+ */
+export declare const overlayFade = "duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
+/** Fade plus a slight zoom, for panels (the backdrop only fades). */
+export declare const overlayFadeZoom = "duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-open:zoom-in-95 data-closed:zoom-out-95";
+/**
+ * Base of a menu or listbox row (SelectItem, DropdownMenuItem, Combobox and
+ * SearchPicker options). Each component adds its own right padding and
+ * indicator, plus the highlight from `optionState`.
+ */
+export declare const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
+/** Icons in a row: no pointer events, no shrinking, 14px unless sized. */
+export declare const optionIcon = "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+/** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
+export declare const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";