atlas-react-kit 1.2.0 → 1.2.1

package/dist/form/control-field.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, metaErrorText } from "./field-shell.js";
 /**
  * The `form/*` field layout for a control the kit does not ship (a
  * combobox, a segmented picker): label with the required marker, optional
@@ -13,10 +13,5 @@ export function FormControlField({ id: idProp, label, description, required, met
     const generatedId = useId();
     const id = idProp ?? generatedId;
     const errorText = metaErrorText(meta, { submitted, showError });
-    return (_jsx(FormFieldShell, { ...props, id: id, label: label, description: description, errorText: errorText, required: required, children: children({
-            id,
-            "aria-invalid": invalidWhen(errorText),
-            "aria-describedby": describedBy(id, errorText, description ? descriptionIdFor(id) : undefined),
-            "aria-required": required || undefined,
-        }) }));
+    return (_jsx(FormFieldShell, { ...props, id: id, label: label, description: description, errorText: errorText, required: required, children: children({ id, ...fieldAria(id, errorText, { description, required }) }) }));
 }

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

@@ -2,11 +2,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { DatePickerButton } from "../date-picker.js";
-import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, metaErrorText, } from "./field-shell.js";
 /** Date picker with built-in field error text and invalid styling. */
 export function FormDatePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta, { submitted, showError });
     const generatedId = useId();
     const id = idProp ?? generatedId;
-    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(DatePickerButton, { ...picker, id: id, onValueChange: onValueChange, ...pickerFieldAria(id, errorText, required) }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(DatePickerButton, { ...picker, id: id, onValueChange: onValueChange, ...fieldAria(id, errorText, {
+                required: required && "described",
+                labelledBy: "label-value",
+            }) }) }));
 }

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

@@ -2,11 +2,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { DateTimePickerButton } from "../date-time-picker.js";
-import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, metaErrorText, } from "./field-shell.js";
 /** Date-time picker with built-in field error text and invalid styling. */
 export function FormDateTimePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta, { submitted, showError });
     const generatedId = useId();
     const id = idProp ?? generatedId;
-    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(DateTimePickerButton, { ...picker, id: id, onValueChange: onValueChange, ...pickerFieldAria(id, errorText, required) }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(DateTimePickerButton, { ...picker, id: id, onValueChange: onValueChange, ...fieldAria(id, errorText, {
+                required: required && "described",
+                labelledBy: "label-value",
+            }) }) }));
 }

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-export type FieldErrorMessage = string | {
-    message?: string;
-} | undefined;
+import type { FieldErrorItem } from "../field.js";
+/** An error as TanStack Form reports it: text, or an error with a `message`. */
+export type FieldErrorMessage = string | FieldErrorItem;
 export type FieldMetaState = {
     /** Validation errors for the field; the `form/*` fields show the first. */
     errors: FieldErrorMessage[];

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

@@ -1,5 +1,6 @@
 import type { ComponentProps, ReactNode } from "react";
 import type { DateLike, DatePickerCalendarProps } from "../date-picker.js";
+import type { AsChildProps } from "../internal/as-child.js";
 import { type ErrorTimingProps, type FieldMetaState, type FormFieldBaseProps, type FormFieldMetaProps } from "./field-error.js";
 /**
  * Not a public entry. The layout and error wiring every `form/*` field
@@ -12,19 +13,25 @@ import { type ErrorTimingProps, type FieldMetaState, type FormFieldBaseProps, ty
  * and the form has not been submitted.
  */
 export declare function metaErrorText(meta: FieldMetaState | undefined, { submitted, showError }?: ErrorTimingProps): 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 hint `FormFieldShell` renders for control `id`. */
-export declare function descriptionIdFor(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.
+ * ARIA for a field's control, from the ids `FormFieldShell` renders:
+ * invalid while there is error text, described by the hint, the hidden
+ * "Required" text, and the error. `required: "described"` is for a button
+ * trigger, which cannot take `aria-required`; leave `required` out where
+ * the control carries native `required`. `labelledBy: "label"` names a
+ * group; `"label-value"` reads a picker "label, value".
  */
-export declare function describedBy(id: string, errorText: string | undefined, ...hintIds: Array<string | undefined>): string | undefined;
+export declare function fieldAria(id: string, errorText: string | undefined, { description, required, labelledBy, }?: {
+    /** The field's hint; when set, the control is described by it. */
+    description?: ReactNode;
+    required?: boolean | "described";
+    labelledBy?: "label" | "label-value";
+}): {
+    "aria-invalid": true | undefined;
+    "aria-describedby": string | undefined;
+    "aria-required": true | undefined;
+    "aria-labelledby"?: string | undefined;
+};
 /**
  * Props the date and date-time fields share; each adds its own `value`,
  * `onValueChange`, and `placeholder`.
@@ -52,29 +59,27 @@ export type PickerFieldBaseProps = FormFieldBaseProps & FormFieldMetaProps & {
     calendarProps?: DatePickerCalendarProps;
 };
 /**
- * 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 "Required" (a button cannot take
- * `aria-required`) and the error.
+ * Every `form/*` field's wrapper (`data-slot="form-field"`): children with
+ * the field spacing, then the error text. `asChild` makes the one child the
+ * wrapper (the checkbox group's fieldset).
  */
-export declare function pickerFieldAria(id: string, errorText: string | undefined, required?: boolean): {
-    "aria-invalid": boolean | undefined;
-    "aria-labelledby": string;
-    "aria-describedby": string | undefined;
-};
+export declare function FormFieldFrame({ id, errorText, asChild, className, children, ...props }: Omit<ComponentProps<"div">, "id"> & AsChildProps & {
+    /** Id of the control; the error id derives from it. */
+    id: string;
+    /** Error text under the children; `undefined` shows none. */
+    errorText: string | undefined;
+}): import("react").JSX.Element;
+/** A field's hint, with id `descriptionIdFor(id)`. */
+export declare function FormFieldDescription({ id, children, }: {
+    id: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
 /**
- * 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.
- * `description` is a hint between the label and the control, with id
- * `descriptionIdFor(id)`. `className` and other div props go to the
- * wrapper (`data-slot="form-field"`), e.g. a width.
- * `required` marks the label; the control still sets its own `required`.
- * The error sits below the control and takes no space while there is none,
- * so put fields in a grid row with `items-start` to keep controls aligned.
+ * Label, hint, control, and error in a `FormFieldFrame`. `labelAction` sits
+ * on the label's row; `labelFor={false}` when the control is not rendered
+ * (Markdown preview). `required` marks the label only.
  */
-export declare function FormFieldShell({ id, label, labelAction, description, errorText, labelFor, required, className, children, ...props }: Omit<ComponentProps<"div">, "id" | "children"> & {
+export declare function FormFieldShell({ id, label, labelAction, description, errorText, labelFor, required, children, ...props }: Omit<ComponentProps<"div">, "id" | "children"> & {
     /** Id of the control; the label, hint, and error ids derive from it. */
     id: string;
     /** Visible label text. */

package/dist/form/field-shell.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
 import { pickerValueId } from "../internal/form-control.js";
 import { Label } from "../label.js";
 import { cn } from "../utils.js";
@@ -20,20 +21,16 @@ export function metaErrorText(meta, { submitted, showError = true } = {}) {
         return undefined;
     return getFieldErrorMessage(meta.errors[0]);
 }
-/** `aria-invalid` for the control: `true` while there is error text. */
-export function invalidWhen(errorText) {
-    return errorText ? true : undefined;
-}
 /** Id of the label `FormFieldShell` renders for control `id`. */
-export function labelIdFor(id) {
+function labelIdFor(id) {
     return `${id}-label`;
 }
 /** Id of the hint `FormFieldShell` renders for control `id`. */
-export function descriptionIdFor(id) {
+function descriptionIdFor(id) {
     return `${id}-description`;
 }
 /** Id of the error text `FormFieldShell` renders for control `id`. */
-export function errorIdFor(id) {
+function errorIdFor(id) {
     return `${id}-error`;
 }
 /**
@@ -44,39 +41,49 @@ function requiredIdFor(id) {
     return `${id}-required`;
 }
 /**
- * `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.
+ * ARIA for a field's control, from the ids `FormFieldShell` renders:
+ * invalid while there is error text, described by the hint, the hidden
+ * "Required" text, and the error. `required: "described"` is for a button
+ * trigger, which cannot take `aria-required`; leave `required` out where
+ * the control carries native `required`. `labelledBy: "label"` names a
+ * group; `"label-value"` reads a picker "label, value".
  */
-export function describedBy(id, errorText, ...hintIds) {
-    const ids = [...hintIds, errorText ? errorIdFor(id) : undefined].filter(Boolean);
-    return ids.length ? ids.join(" ") : undefined;
+export function fieldAria(id, errorText, { description, required, labelledBy, } = {}) {
+    const describedBy = [
+        description ? descriptionIdFor(id) : undefined,
+        required === "described" ? requiredIdFor(id) : undefined,
+        errorText ? errorIdFor(id) : undefined,
+    ].filter(Boolean);
+    return {
+        "aria-invalid": errorText ? true : undefined,
+        "aria-describedby": describedBy.length ? describedBy.join(" ") : undefined,
+        "aria-required": required === true ? true : undefined,
+        ...(labelledBy && {
+            "aria-labelledby": labelledBy === "label"
+                ? labelIdFor(id)
+                : `${labelIdFor(id)} ${pickerValueId(id)}`,
+        }),
+    };
 }
 /**
- * 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 "Required" (a button cannot take
- * `aria-required`) and the error.
+ * Every `form/*` field's wrapper (`data-slot="form-field"`): children with
+ * the field spacing, then the error text. `asChild` makes the one child the
+ * wrapper (the checkbox group's fieldset).
  */
-export function pickerFieldAria(id, errorText, required) {
-    return {
-        "aria-invalid": invalidWhen(errorText),
-        "aria-labelledby": `${labelIdFor(id)} ${pickerValueId(id)}`,
-        "aria-describedby": describedBy(id, errorText, required ? requiredIdFor(id) : undefined),
-    };
+export function FormFieldFrame({ id, errorText, asChild, className, children, ...props }) {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsxs(Comp, { "data-slot": "form-field", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Slot.Slottable, { children: children }), _jsx(FieldError, { id: errorIdFor(id), text: errorText })] }));
+}
+/** A field's hint, with id `descriptionIdFor(id)`. */
+export function FormFieldDescription({ id, children, }) {
+    return (_jsx("p", { id: descriptionIdFor(id), "data-slot": "form-field-description", className: "text-xs text-muted-foreground", children: children }));
 }
 /**
- * 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.
- * `description` is a hint between the label and the control, with id
- * `descriptionIdFor(id)`. `className` and other div props go to the
- * wrapper (`data-slot="form-field"`), e.g. a width.
- * `required` marks the label; the control still sets its own `required`.
- * The error sits below the control and takes no space while there is none,
- * so put fields in a grid row with `items-start` to keep controls aligned.
+ * Label, hint, control, and error in a `FormFieldFrame`. `labelAction` sits
+ * on the label's row; `labelFor={false}` when the control is not rendered
+ * (Markdown preview). `required` marks the label only.
  */
-export function FormFieldShell({ id, label, labelAction, description, errorText, labelFor = true, required, className, children, ...props }) {
+export function FormFieldShell({ id, label, labelAction, description, errorText, labelFor = true, required, children, ...props }) {
     const labelNode = (_jsx(Label, { id: labelIdFor(id), htmlFor: labelFor ? id : undefined, required: required, children: label }));
-    return (_jsxs("div", { "data-slot": "form-field", className: cn("flex flex-col gap-1.5", className), ...props, children: [labelAction ? (_jsxs("div", { "data-slot": "form-field-header", className: "flex items-center justify-between gap-2", children: [labelNode, labelAction] })) : (labelNode), description ? (_jsx("p", { id: descriptionIdFor(id), "data-slot": "form-field-description", className: "text-xs text-muted-foreground", children: description })) : null, children, required ? (_jsx("span", { id: requiredIdFor(id), hidden: true, children: "Required" })) : null, _jsx(FieldError, { id: errorIdFor(id), text: errorText })] }));
+    return (_jsxs(FormFieldFrame, { ...props, id: id, errorText: errorText, children: [labelAction ? (_jsxs("div", { "data-slot": "form-field-header", className: "flex items-center justify-between gap-2", children: [labelNode, labelAction] })) : (labelNode), description ? (_jsx(FormFieldDescription, { id: id, children: description })) : null, children, required ? (_jsx("span", { id: requiredIdFor(id), hidden: true, children: "Required" })) : null] }));
 }

package/dist/form/markdown-field.js

@@ -6,7 +6,7 @@ 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 { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, 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");
@@ -25,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, labelFor: mode === "write", required: required, 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, required: required, 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" })) })) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, labelFor: mode === "write", required: required, 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, required: required, className: className, ...fieldAria(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.js

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

package/dist/form/text-field.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from "../input.js";
 import { Textarea } from "../textarea.js";
 import { onInputChange } from "../utils.js";
-import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, metaErrorText } from "./field-shell.js";
 /**
  * Text input, or a textarea with `multiline`, bound to a TanStack Form
  * `field`, with a label, optional hint, and the `form/*` error text.
@@ -11,7 +11,6 @@ import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorTe
 export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError, submitted, autoComplete, required, minLength, className, fieldClassName, }) {
     const onChange = onInputChange(field.handleChange);
     const errorText = metaErrorText(field.state.meta, { submitted, showError });
-    const descriptionId = description ? descriptionIdFor(id) : undefined;
     const controlProps = {
         id,
         value: field.state.value,
@@ -22,8 +21,7 @@ export function FormTextField({ field, id = field.name, label, placeholder, desc
         required,
         minLength,
         className,
-        "aria-invalid": invalidWhen(errorText),
-        "aria-describedby": describedBy(id, errorText, descriptionId),
+        ...fieldAria(id, errorText, { description }),
     };
     return (_jsx(FormFieldShell, { id: id, label: label, description: description, errorText: errorText, required: required, className: fieldClassName, children: multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus })) }));
 }

package/dist/form/toggle-group-field.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
-import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, labelIdFor, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, metaErrorText } from "./field-shell.js";
 /**
  * One choice from a few as a joined outline toggle group (a segmented
  * control), with a visible label and the `form/*` error wiring.
@@ -15,5 +15,5 @@ export function FormToggleGroupField({ label, description, value, onValueChange,
         if (option)
             onValueChange(option.value);
     }
-    return (_jsx(FormFieldShell, { id: id, label: label, labelFor: false, description: description, errorText: errorText, required: required, className: fieldClassName, children: _jsx(ToggleGroup, { id: id, type: "single", value: value, onValueChange: handleValueChange, variant: "outline", size: size, spacing: 0, disabled: disabled, "aria-labelledby": labelIdFor(id), "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText, description ? descriptionIdFor(id) : undefined), className: className, children: options.map((option) => (_jsx(ToggleGroupItem, { value: option.value, children: option.label }, option.value))) }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, labelFor: false, description: description, errorText: errorText, required: required, className: fieldClassName, children: _jsx(ToggleGroup, { id: id, type: "single", value: value, onValueChange: handleValueChange, variant: "outline", size: size, spacing: 0, disabled: disabled, ...fieldAria(id, errorText, { description, labelledBy: "label" }), className: className, children: options.map((option) => (_jsx(ToggleGroupItem, { value: option.value, children: option.label }, option.value))) }) }));
 }

package/dist/info-tip.d.ts

@@ -11,8 +11,9 @@ export type InfoTipProps = {
     /** Extra body after the title and description. */
     children?: React.ReactNode;
     /**
-     * `inline` keeps the surrounding line height; the 44px hit area overflows.
-     * Default `box`.
+     * `inline` sits in a line of text: the glyph is 1em, a quarter em after
+     * the word, on the text's cap height, and keeps the line height; the 44px
+     * hit area overflows. Default `box`.
      */
     layout?: InfoTipLayout;
     /** Panel side. Default `top`; Radix still flips on collision. */
@@ -29,8 +30,8 @@ export type InfoTipProps = {
     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
+ * Longer help than a Tooltip: a Popover with a 20px glyph (1em inline) 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, contentClassName, ...props }: InfoTipProps): React.JSX.Element;

package/dist/info-tip.js

@@ -7,8 +7,8 @@ import { focusRing, hitArea44, quietTextHover } from "./internal/styles.js";
 import { HOVER_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
 import { cn } from "./utils.js";
 /**
- * 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
+ * Longer help than a Tooltip: a Popover with a 20px glyph (1em inline) 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.
  */
 function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, contentClassName, ...props }) {
@@ -51,7 +51,12 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
             if (next)
                 openedBy.current = "click";
             setOpen(next);
-        }, 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", quietTextHover, inline ? cn("size-5 align-middle", hitArea44) : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, onClick: (event) => {
+        }, 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", quietTextHover, 
+                    // Inline: 1em scales with the sentence; -0.125em centres the
+                    // glyph on the cap height without growing the line box.
+                    inline
+                        ? cn("ml-[0.25em] size-[1em] align-[-0.125em]", 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.
@@ -60,7 +65,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
                             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, 
+                    }, children: icon ?? (_jsx(CircleHelpIcon, { className: inline ? "size-full" : "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) => {

package/dist/internal/active-link.d.ts

@@ -0,0 +1,7 @@
+/** How NavLink and TabsNavLink mark the current page (`selectedState.active`). */
+export declare function activeLinkAttributes(active: boolean): {
+    "data-state": string;
+    "aria-current": "page" | undefined;
+};
+/** A link marked by `activeLinkAttributes`, or an active Radix tab. */
+export declare const activeLinkSelector = "[aria-current=\"page\"], [data-state=\"active\"]";

package/dist/internal/active-link.js

@@ -0,0 +1,9 @@
+/** How NavLink and TabsNavLink mark the current page (`selectedState.active`). */
+export function activeLinkAttributes(active) {
+    return {
+        "data-state": active ? "active" : "inactive",
+        "aria-current": active ? "page" : undefined,
+    };
+}
+/** A link marked by `activeLinkAttributes`, or an active Radix tab. */
+export const activeLinkSelector = '[aria-current="page"], [data-state="active"]';

package/dist/internal/calendar-size.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Calendar cell size and padding, shared with LazyCalendar's placeholder
+ * (here, not in calendar.tsx, so the placeholder skips Day Picker).
+ */
+export declare const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(3)]";

package/dist/internal/calendar-size.js

@@ -0,0 +1,5 @@
+/**
+ * Calendar cell size and padding, shared with LazyCalendar's placeholder
+ * (here, not in calendar.tsx, so the placeholder skips Day Picker).
+ */
+export const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(3)]";

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

@@ -12,7 +12,7 @@ export declare const formControlTriggerClassName = "h-10 w-full border-input bg-
  * with muted text while empty (`data-empty`). Intrinsic padding makes one
  * line 40px tall while longer values wrap and consumer height classes work.
  */
-export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground";
+export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 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. */

package/dist/internal/form-control.js

@@ -1,3 +1,4 @@
+import { emptyValueText } from "./styles.js";
 /**
  * Chrome that makes a Button-based picker trigger match Input / SelectTrigger:
  * 40px height, px-3, body text (16px below md so iOS does not zoom), border-input,
@@ -12,7 +13,7 @@ export const formControlTriggerClassName = "h-10 w-full border-input bg-backgrou
  * with muted text while empty (`data-empty`). Intrinsic padding makes one
  * line 40px tall while longer values wrap and consumer height classes work.
  */
-export const pickerTriggerClassName = `${formControlTriggerClassName} h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground`;
+export const pickerTriggerClassName = `${formControlTriggerClassName} h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] ${emptyValueText}`;
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 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. */

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

@@ -1,4 +1,16 @@
 import * as React from "react";
+/**
+ * ARIA for the search input of a listbox; the input sets `aria-controls`
+ * itself, where the linter can see it.
+ */
+export declare function listboxInputAria(listId: string, activeIndex: number | undefined): {
+    "aria-autocomplete": "list";
+    "aria-activedescendant": string | undefined;
+};
+/** The scrolling listbox; sr-only while `ListboxEmptyStatus` shows. */
+export declare function Listbox({ empty, className, ...props }: Omit<React.ComponentProps<"ul">, "role"> & {
+    empty: boolean;
+}): React.JSX.Element;
 type PickerOptionProps<T> = {
     item: T;
     getLabel: (item: T) => string;
@@ -16,9 +28,10 @@ type PickerOptionProps<T> = {
 declare function PickerOptionInner<T>({ item, getLabel, onSelect, onHighlight, showCheck, ...props }: PickerOptionProps<T>): React.JSX.Element;
 export declare const PickerOption: typeof PickerOptionInner;
 /**
- * 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.
+ * The "No results" status (`children`, default "No results"). 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;

package/dist/internal/listbox-option.js

@@ -4,7 +4,23 @@ import { CheckIcon } from "lucide-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";
+import { listboxEmpty, listboxScroll, optionState } from "./styles.js";
+/**
+ * ARIA for the search input of a listbox; the input sets `aria-controls`
+ * itself, where the linter can see it.
+ */
+export function listboxInputAria(listId, activeIndex) {
+    return {
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeIndex === undefined
+            ? undefined
+            : listboxOptionId(listId, activeIndex),
+    };
+}
+/** The scrolling listbox; sr-only while `ListboxEmptyStatus` shows. */
+export function Listbox({ empty, className, ...props }) {
+    return (_jsx("ul", { role: "listbox", className: empty ? "sr-only" : cn(listboxScroll, className), ...props }));
+}
 /**
  * One option of a search-driven listbox (Combobox, SearchPicker): a
  * non-focusable button in a presentational `li`, highlighted by state and
@@ -20,10 +36,11 @@ function PickerOptionInner({ item, getLabel, onSelect, onHighlight, showCheck, .
 }
 export const PickerOption = React.memo(PickerOptionInner);
 /**
- * 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.
+ * The "No results" status (`children`, default "No results"). 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 }) {
+export function ListboxEmptyStatus({ empty, className, children = "No results", ...props }) {
     return (_jsx("div", { role: "status", className: empty ? cn(listboxEmpty, className) : "sr-only", ...props, children: empty ? children : null }));
 }

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

@@ -1,9 +1,10 @@
 /**
- * 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.
+ * Classes and placement defaults shared by the kit's floating surfaces
+ * (Popover, DropdownMenu, Select, Dialog, Tooltip) and the option rows
+ * inside them. Components use these instead of retyping them, so the
+ * panels and rows look, sit, 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";
@@ -24,3 +25,7 @@ export declare const overlayFadeZoom = "duration-100 data-open:animate-in data-o
 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";
 /** 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";
+/** Default gap in px between a trigger and its panel (Radix `sideOffset`). */
+export declare const OVERLAY_SIDE_OFFSET = 4;
+/** Default px a panel keeps from the viewport edge (Radix `collisionPadding`). */
+export declare const OVERLAY_COLLISION_PADDING = 8;

package/dist/internal/overlay-styles.js

@@ -1,9 +1,10 @@
 /**
- * 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.
+ * Classes and placement defaults shared by the kit's floating surfaces
+ * (Popover, DropdownMenu, Select, Dialog, Tooltip) and the option rows
+ * inside them. Components use these instead of retyping them, so the
+ * panels and rows look, sit, 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 const overlaySurface = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10";
@@ -24,3 +25,7 @@ export const overlayFadeZoom = `${overlayFade} data-open:zoom-in-95 data-closed:
 export 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";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";
+/** Default gap in px between a trigger and its panel (Radix `sideOffset`). */
+export const OVERLAY_SIDE_OFFSET = 4;
+/** Default px a panel keeps from the viewport edge (Radix `collisionPadding`). */
+export const OVERLAY_COLLISION_PADDING = 8;

package/dist/internal/search.d.ts

@@ -9,4 +9,8 @@ export declare function createSearchIndex<T>(items: T[], getLabel: (item: T) =>
     item: T;
     label: string;
 }[];
+/**
+ * The items whose folded label includes `needle` (a `normalizeSearchQuery`
+ * result), in order; every item when `needle` is empty.
+ */
 export declare function filterSearchIndex<T>(index: ReturnType<typeof createSearchIndex<T>>, needle: string): T[];